social.io/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(build): migrate smart config setup and align TypeScript compatibility updates

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-02 12:50:20 +00:00
parent 3338261cfa
commit 47f2a64a61
15 changed files with 2222 additions and 2749 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
npmextra.json → .smartconfig.json
View File

@@ -17,6 +17,20 @@
"accessLevel": "public" "accessLevel": "public"
} }
}, },
"@git.zone/tsbundle": {
"bundles": [
{
"from": "./ts_web/index.ts",
"to": "./dist_bundle/bundle.js",
"outputMode": "bundle",
"bundler": "esbuild",
"production": true
}
]
},
"@git.zone/tswatch": {
"preset": "element"
},
"@ship.zone/szci": { "@ship.zone/szci": {
"npmRegistryUrl": "verdaccio.lossless.one", "npmRegistryUrl": "verdaccio.lossless.one",
"npmGlobalTools": [] "npmGlobalTools": []

2
.vscode/settings.json vendored
View File

@@ -1,7 +1,7 @@
{ {
"json.schemas": [ "json.schemas": [
{ {
"fileMatch": ["/npmextra.json"], "fileMatch": ["/.smartconfig.json"],
"schema": { "schema": {
"type": "object", "type": "object",
"properties": { "properties": {

8
changelog.md
View File

@@ -1,5 +1,13 @@
# Changelog # Changelog
## 2026-04-02 - 1.7.1 - fix(build)
migrate smart config setup and align TypeScript compatibility updates
- replace npmextra.json with .smartconfig.json and simplify build/watch script usage
- update runtime and development dependencies to newer versions
- rename browser tests to the Chromium-specific convention expected by the test tooling
- add explicit property initializers and non-null assertions to satisfy stricter TypeScript checks
## 2026-01-02 - 1.7.0 - feat(recorder) ## 2026-01-02 - 1.7.0 - feat(recorder)
lazy-load rrweb and rrweb-player from CDN via SioServiceLibLoader and switch sio-recorder to use the loader lazy-load rrweb and rrweb-player from CDN via SioServiceLibLoader and switch sio-recorder to use the loader

56
demo.html
View File

@@ -1,56 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social.io Catalog Demo</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #f5f5f5;
}
.demo-section {
margin: 20px 0;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
margin-top: 0;
}
.component-container {
position: relative;
height: 600px;
margin: 20px 0;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}
sio-combox {
position: relative !important;
width: 100% !important;
height: 100% !important;
right: auto !important;
}
</style>
<script type="module" src="./dist_bundle/bundle.js"></script>
</head>
<body>
<div class="demo-section">
<h2>Combox Component</h2>
<div class="component-container">
<sio-combox></sio-combox>
</div>
</div>
<div class="demo-section">
<h2>FAB with Combox</h2>
<div style="position: relative; height: 700px;">
<sio-fab showCombox></sio-fab>
</div>
</div>
</body>
</html>

2
license
View File

@@ -1,4 +1,4 @@
Copyright (c) 2020 Lossless GmbH (hello@lossless.com) Copyright (c) 2020 Task Venture Capital GmbH (hello@task.vc)
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

27
package.json
View File

@@ -8,29 +8,28 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"test": "tstest test/", "test": "tstest test/",
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production", "build": "tsbuild tsfolders --allowimplicitany --skiplibcheck && tsbundle",
"watch": "tswatch element", "watch": "tswatch",
"buildDocs": "tsdoc" "buildDocs": "tsdoc"
}, },
"author": "Lossless GmbH", "author": "Lossless GmbH",
"license": "UNLICENSED", "license": "UNLICENSED",
"dependencies": { "dependencies": {
"@design.estate/dees-domtools": "^2.3.6", "@design.estate/dees-domtools": "^2.5.1",
"@design.estate/dees-element": "^2.1.3", "@design.estate/dees-element": "^2.2.3",
"@design.estate/dees-wcctools": "^3.4.0", "@design.estate/dees-wcctools": "^3.8.0",
"@losslessone_private/loint-pubapi": "^1.0.14",
"@social.io/interfaces": "^1.2.1", "@social.io/interfaces": "^1.2.1",
"lucide": "^0.562.0" "lucide": "^1.6.0"
}, },
"devDependencies": { "devDependencies": {
"@git.zone/tsbuild": "^4.0.2", "@git.zone/tsbuild": "^4.4.0",
"@git.zone/tsbundle": "^2.6.3", "@git.zone/tsbundle": "^2.10.0",
"@git.zone/tsrun": "^2.0.1", "@git.zone/tsrun": "^2.0.2",
"@git.zone/tstest": "^3.1.4", "@git.zone/tstest": "^3.6.0",
"@git.zone/tswatch": "^2.3.13", "@git.zone/tswatch": "^3.3.2",
"@push.rocks/projectinfo": "^5.0.2", "@push.rocks/projectinfo": "^5.0.2",
"@push.rocks/smartenv": "^6.0.0", "@push.rocks/smartenv": "^6.0.0",
"@types/node": "^25.0.3" "@types/node": "^25.5.0"
}, },
"files": [ "files": [
"ts/**/*", "ts/**/*",
@@ -41,7 +40,7 @@
"dist_ts_web/**/*", "dist_ts_web/**/*",
"assets/**/*", "assets/**/*",
"cli.js", "cli.js",
"npmextra.json", ".smartconfig.json",
"readme.md" "readme.md"
], ],
"browserslist": [ "browserslist": [

4668
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

168
readme.md
View File

@@ -1,6 +1,6 @@
# @social.io/catalog # @social.io/catalog
A modern, beautifully designed UI component library for building conversational interfaces and support chat experiences. Built with Lit Element and TypeScript. A modern, beautifully crafted UI component library for building conversational interfaces and support chat experiences. Built with [Lit Element](https://lit.dev/) and TypeScript, featuring a shadcn-inspired design system with full dark mode support. 🚀
## Issue Reporting and Security ## Issue Reporting and Security
@@ -8,20 +8,19 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
## 🎯 Features ## 🎯 Features
- **Complete Chat UI** - Ready-to-use conversation components with message threads, typing indicators, and attachments - **Complete Chat UI** — Ready-to-use conversation components with message threads, typing indicators, and file attachments
- **Floating Action Button** - Eye-catching FAB with smooth animations for triggering the chat interface - **Floating Action Button** — Eye-catching FAB with smooth gradient animations and glow effects
- **PDF Viewer** - Built-in PDF rendering with zoom, pagination, and download capabilities - **PDF Viewer** — Built-in PDF rendering with zoom, pagination, and download capabilities
- **Image Lightbox** - Full-featured lightbox with zoom, pan, and keyboard navigation - **Image Lightbox** — Full-featured lightbox with zoom, pan, and keyboard navigation
- **Modern Design Tokens** - Consistent styling with customizable colors, spacing, typography, and shadows - **Design Token System** — Comprehensive tokens for colors, spacing, typography, shadows, and animations
- **Dark Mode Ready** - Full light/dark theme support out of the box - **Dark Mode Ready** — Full light/dark theme support out of the box via `bdTheme()` helper
- **Accessibility** - Keyboard navigation and proper ARIA attributes - **Accessibility** — Keyboard navigation and proper ARIA attributes throughout
- **TypeScript First** - Full type definitions for all components - **TypeScript First** — Full type definitions and IntelliSense for all components
- **Lazy-loaded Libraries** — rrweb for session recording is loaded on-demand from CDN via `SioServiceLibLoader`
## 📦 Installation ## 📦 Installation
```bash ```bash
npm install @social.io/catalog
# or
pnpm add @social.io/catalog pnpm add @social.io/catalog
``` ```
@@ -30,8 +29,7 @@ pnpm add @social.io/catalog
```typescript ```typescript
import { SioFab, SioCombox } from '@social.io/catalog'; import { SioFab, SioCombox } from '@social.io/catalog';
// Components auto-register as custom elements // Components auto-register as custom elements — just drop them into your HTML:
// Just use them in your HTML:
``` ```
```html ```html
@@ -46,54 +44,74 @@ import { SioFab, SioCombox } from '@social.io/catalog';
### Core Components ### Core Components
| Component | Description | | Component | Tag | Description |
|-----------|-------------| |-----------|-----|-------------|
| `<sio-fab>` | Floating action button with animated chat icon | | `SioFab` | `<sio-fab>` | Floating action button with animated gradient, glow effects, and pulse animation |
| `<sio-combox>` | Complete chat interface with conversation list and message view | | `SioCombox` | `<sio-combox>` | Complete chat interface combining conversation list, message view, and input |
| `<sio-button>` | Styled button with variants (primary, secondary, destructive, outline, ghost) | | `SioButton` | `<sio-button>` | Styled button with variants: `primary`, `secondary`, `destructive`, `outline`, `ghost` |
| `<sio-icon>` | Lucide icon wrapper with size and color customization | | `SioIcon` | `<sio-icon>` | [Lucide](https://lucide.dev/) icon wrapper with size, color, and strokeWidth customization |
| `<sio-dropdown-menu>` | Animated dropdown menu with keyboard support | | `SioDropdownMenu` | `<sio-dropdown-menu>` | Animated dropdown menu with keyboard support and auto-positioning |
### Conversation Components ### Conversation Components
| Component | Description | | Component | Tag | Description |
|-----------|-------------| |-----------|-----|-------------|
| `<sio-conversation-selector>` | Searchable list of conversations with unread indicators | | `SioConversationSelector` | `<sio-conversation-selector>` | Searchable list of conversations with unread indicators and status badges |
| `<sio-conversation-view>` | Message thread with typing indicators and file attachments | | `SioConversationView` | `<sio-conversation-view>` | Message thread with typing indicators, timestamps, and file attachment support |
| `<sio-message-input>` | Auto-expanding textarea with file upload | | `SioMessageInput` | `<sio-message-input>` | Auto-expanding textarea with file upload capabilities |
### Media Components ### Media Components
| Component | Description | | Component | Tag | Description |
|-----------|-------------| |-----------|-----|-------------|
| `<sio-image-lightbox>` | Fullscreen image viewer with zoom and pan | | `SioImageLightbox` | `<sio-image-lightbox>` | Fullscreen image viewer with zoom, pan, and keyboard navigation; also handles PDF files |
| `<sio-pdf-viewer>` | PDF renderer with page navigation and zoom controls | | `SioPdfViewer` | `<sio-pdf-viewer>` | PDF renderer with page navigation, zoom controls, and download button |
### Utility Components ### Utility Components
| Component | Description | | Component | Tag | Description |
|-----------|-------------| |-----------|-----|-------------|
| `<sio-recorder>` | Session recording using rrweb | | `SioRecorder` | `<sio-recorder>` | Session recording and playback using [rrweb](https://www.rrweb.io/), lazy-loaded from CDN |
## 💅 Styling & Theming ### Services
The library uses CSS custom properties for theming. The design system includes: | Export | Description |
|--------|-------------|
| `SioServiceLibLoader` | CDN-based lazy loader for rrweb and rrweb-player libraries |
- **Colors** - Primary, secondary, accent, destructive, muted, and semantic colors ## 💅 Design System
- **Typography** - System font stack with size and weight variants
- **Spacing** - Consistent spacing scale (0.5rem increments) The library ships a comprehensive, shadcn/ui-inspired design token system. All tokens are exported so you can use them in your own components.
- **Radius** - Border radius tokens from sm to full
- **Shadows** - Elevation system from sm to 2xl ### Colors
- **Transitions** - Smooth animation presets
```typescript
import { colors, bdTheme } from '@social.io/catalog/elements/00colors.js';
```
Includes `primary`, `secondary`, `accent`, `destructive`, `muted`, `success`, `background`, `foreground`, `card`, `popover`, `border`, `input`, `ring`, and 5 chart colors — each with light and dark variants.
### Spacing, Radius, Shadows & More
```typescript
import { spacing, radius, shadows, transitions, sizes, zIndex, breakpoints } from '@social.io/catalog/elements/00tokens.js';
```
- **Spacing** — Tailwind-compatible scale from `0` to `96` (0–384px)
- **Radius** — From `sm` (2px) through `full` (9999px)
- **Shadows** — Elevation system from `sm` to `2xl`, plus theme-aware `card` and `dropdown` shadows
- **Transitions** — Presets (`all`, `colors`, `opacity`, `shadow`, `transform`) with timing functions
- **Z-index** — Semantic layers: `dropdown`, `sticky`, `fixed`, `modal`, `popover`, `tooltip`
- **Breakpoints** — `sm` (640px) through `2xl` (1536px)
### Dark Mode ### Dark Mode
Dark mode is automatically supported. The components use `bdTheme()` helper that switches between light and dark values: Dark mode is automatically supported. Use the `bdTheme()` helper for theme-aware values:
```typescript ```typescript
import { bdTheme } from '@social.io/catalog'; import { bdTheme } from '@social.io/catalog/elements/00colors.js';
// Usage in styles // Returns the correct value based on the current theme
css` css`
background: ${bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 10%)')}; background: ${bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 10%)')};
` `
@@ -101,40 +119,55 @@ css`
## 📖 Usage Examples ## 📖 Usage Examples
### Basic Chat FAB ### 💬 Chat FAB
```html ```html
<sio-fab></sio-fab> <sio-fab></sio-fab>
``` ```
The FAB opens a complete chat interface when clicked. It includes: The FAB positions itself at the bottom-right corner and opens a complete chat interface when clicked. It features:
- Keyboard shortcut (Ctrl+S) to toggle - Animated gradient background (indigo → violet → purple)
- Glow effect on hover
- Smooth scale and pulse animations - Smooth scale and pulse animations
- Gradient background with glow effects
### Custom Button Variants ### 🔘 Buttons
```html ```html
<sio-button>Default</sio-button>
<sio-button type="primary">Submit</sio-button> <sio-button type="primary">Submit</sio-button>
<sio-button type="destructive">Delete</sio-button> <sio-button type="destructive">Delete</sio-button>
<sio-button type="outline">Cancel</sio-button> <sio-button type="outline">Cancel</sio-button>
<sio-button type="ghost" size="sm"> <sio-button type="ghost" size="sm">
<sio-icon icon="settings"></sio-icon> <sio-icon icon="settings"></sio-icon>
</sio-button> </sio-button>
<sio-button size="lg">Large</sio-button>
<sio-button disabled>Disabled</sio-button>
``` ```
### Image Lightbox Sizes: `sm`, `default`, `lg`. Status: `normal`, `pending`, `success`, `error`.
### 🖼️ Image Lightbox
```typescript ```typescript
const lightbox = document.querySelector('sio-image-lightbox'); const lightbox = document.querySelector('sio-image-lightbox');
lightbox.open({
// Open with an image
await lightbox.open({
url: 'https://example.com/photo.jpg', url: 'https://example.com/photo.jpg',
name: 'My Photo', name: 'My Photo',
size: 1024000 size: 1024000
}); });
// Or open with a PDF
await lightbox.open({
url: 'https://example.com/document.pdf',
name: 'report.pdf',
type: 'application/pdf',
size: 565000
});
``` ```
### PDF Viewer ### 📄 PDF Viewer
```html ```html
<sio-pdf-viewer <sio-pdf-viewer
@@ -143,12 +176,13 @@ lightbox.open({
></sio-pdf-viewer> ></sio-pdf-viewer>
``` ```
### Dropdown Menu ### ☰ Dropdown Menu
```html ```html
<sio-dropdown-menu <sio-dropdown-menu
.items=${[ .items=${[
{ id: 'edit', label: 'Edit', icon: 'pencil' }, { id: 'edit', label: 'Edit', icon: 'pencil' },
{ id: 'divider', label: '', divider: true },
{ id: 'delete', label: 'Delete', icon: 'trash', destructive: true } { id: 'delete', label: 'Delete', icon: 'trash', destructive: true }
]} ]}
@item-selected=${(e) => console.log('Selected:', e.detail.item)} @item-selected=${(e) => console.log('Selected:', e.detail.item)}
@@ -159,6 +193,17 @@ lightbox.open({
</sio-dropdown-menu> </sio-dropdown-menu>
``` ```
### 🎨 Icons
Uses the full [Lucide](https://lucide.dev/) icon set. Pass kebab-case icon names:
```html
<sio-icon icon="search"></sio-icon>
<sio-icon icon="message-square" color="#3b82f6"></sio-icon>
<sio-icon icon="x" size="32"></sio-icon>
<sio-icon icon="send" .strokeWidth=${3}></sio-icon>
```
## 🔧 Development ## 🔧 Development
```bash ```bash
@@ -168,23 +213,26 @@ pnpm install
# Start development server with hot reload # Start development server with hot reload
pnpm watch pnpm watch
# Run tests
pnpm test
# Build for production # Build for production
pnpm build pnpm build
# Run tests (Chromium browser tests)
pnpm test
``` ```
## 📚 Dependencies ## 📚 Dependencies
- **@design.estate/dees-element** - Lit Element base with utilities | Package | Purpose |
- **@design.estate/dees-domtools** - DOM manipulation helpers |---------|---------|
- **lucide** - Beautiful open-source icons | [`@design.estate/dees-element`](https://www.npmjs.com/package/@design.estate/dees-element) | Lit Element base class with theming utilities |
- **rrweb** - Session recording/replay (for recorder component) | [`@design.estate/dees-domtools`](https://www.npmjs.com/package/@design.estate/dees-domtools) | DOM manipulation and convenience helpers |
| [`@design.estate/dees-wcctools`](https://www.npmjs.com/package/@design.estate/dees-wcctools) | Web component catalog tools |
| [`lucide`](https://lucide.dev/) | Beautiful, consistent open-source icon set |
| [`rrweb`](https://www.rrweb.io/) | Session recording/replay (lazy-loaded from CDN) |
## License and Legal Information ## License and Legal Information
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file. This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](./license) file.
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file. **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

0
test/test.browser.ts → test/test.chromium.ts
View File

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@social.io/catalog', name: '@social.io/catalog',
version: '1.7.0', version: '1.7.1',
description: 'catalog for social.io' description: 'catalog for social.io'
} }

2
ts_web/elements/sio-combox.ts
View File

@@ -58,7 +58,7 @@ export class SioCombox extends DeesElement {
} }
@property({ type: Object }) @property({ type: Object })
public accessor referenceObject: HTMLElement; public accessor referenceObject: HTMLElement = null as any;
@state() @state()
private accessor selectedConversationId: string | null = null; private accessor selectedConversationId: string | null = null;

6
ts_web/elements/sio-dropdown-menu.ts
View File

@@ -57,9 +57,9 @@ export class SioDropdownMenu extends DeesElement {
@state() @state()
private accessor isOpen: boolean = false; private accessor isOpen: boolean = false;
private documentClickHandler: (e: MouseEvent) => void; private documentClickHandler!: (e: MouseEvent) => void;
private scrollHandler: () => void; private scrollHandler!: () => void;
private resizeHandler: () => void; private resizeHandler!: () => void;
public static styles = [ public static styles = [
cssManager.defaultStyles, cssManager.defaultStyles,

4
ts_web/elements/sio-icon.ts
View File

@@ -29,7 +29,7 @@ export class SioIcon extends DeesElement {
`; `;
@property({ type: String }) @property({ type: String })
public accessor icon: string; public accessor icon: string = '';
@property({ type: Number }) @property({ type: Number })
public accessor size: number = 24; public accessor size: number = 24;
@@ -140,7 +140,7 @@ export class SioIcon extends DeesElement {
// Limit cache size // Limit cache size
if (SioIcon.iconCache.size > SioIcon.MAX_CACHE_SIZE) { if (SioIcon.iconCache.size > SioIcon.MAX_CACHE_SIZE) {
const firstKey = SioIcon.iconCache.keys().next().value; const firstKey = SioIcon.iconCache.keys().next().value!;
SioIcon.iconCache.delete(firstKey); SioIcon.iconCache.delete(firstKey);
} }

2
ts_web/elements/sio-pdf-viewer.ts
View File

@@ -523,7 +523,7 @@ export class SioPdfViewer extends DeesElement {
this.renderTask = page.render(renderContext); this.renderTask = page.render(renderContext);
await this.renderTask.promise; await this.renderTask.promise;
} catch (error) { } catch (error) {
if (error.name !== 'RenderingCancelledException') { if ((error as any).name !== 'RenderingCancelledException') {
console.error('Error rendering page:', error); console.error('Error rendering page:', error);
} }
} }

10
ts_web/elements/sio-recorder.ts
View File

@@ -177,11 +177,11 @@ export class SioRecorder extends DeesElement {
public async fixPosition() { public async fixPosition() {
await this.domtoolsPromise; await this.domtoolsPromise;
await this.domtools.convenience.smartdelay.delayFor(0); await this.domtools.convenience.smartdelay.delayFor(0);
const playbackDiv = this.shadowRoot.querySelector('#playback') as HTMLElement; const playbackDiv = this.shadowRoot!.querySelector('#playback') as HTMLElement;
const replayerWrapper = this.shadowRoot.querySelector('.replayer-wrapper') as HTMLElement; const replayerWrapper = this.shadowRoot!.querySelector('.replayer-wrapper') as HTMLElement;
const replayerMouse = this.shadowRoot.querySelector('.replayer-mouse') as HTMLElement; const replayerMouse = this.shadowRoot!.querySelector('.replayer-mouse') as HTMLElement;
const replayerMouseTail = this.shadowRoot.querySelector('.replayer-mouse-tail') as HTMLElement; const replayerMouseTail = this.shadowRoot!.querySelector('.replayer-mouse-tail') as HTMLElement;
const iframe = this.shadowRoot.querySelector('iframe'); const iframe = this.shadowRoot!.querySelector('iframe')!;
replayerWrapper.style.position = 'absolute'; replayerWrapper.style.position = 'absolute';
replayerWrapper.style.top = '0px'; replayerWrapper.style.top = '0px';
replayerWrapper.style.left = '0px'; replayerWrapper.style.left = '0px';