snice 3.1.0 → 3.3.0

package/docs/ai/components/chart.md

@@ -0,0 +1,160 @@
+# snice-chart
+
+General-purpose chart component with multiple types and animations.
+
+## Properties
+
+```typescript
+type: 'line'|'bar'|'horizontal-bar'|'area'|'pie'|'donut'|'scatter'|'bubble'|'radar'|'mixed' = 'line';
+datasets: ChartDataset[] = [];
+labels: string[] = [];
+options: ChartOptions = {};
+width: number = 0;
+height: number = 0;
+```
+
+## ChartDataset
+
+```typescript
+interface ChartDataset {
+  label: string;
+  data: (number | ChartDataPoint)[];
+  type?: ChartType; // for mixed charts
+  backgroundColor?: string | string[];
+  borderColor?: string;
+  borderWidth?: number;
+  fill?: boolean;
+  tension?: number; // 0-1
+  pointRadius?: number;
+  pointHoverRadius?: number;
+  hidden?: boolean;
+}
+```
+
+## ChartDataPoint
+
+```typescript
+interface ChartDataPoint {
+  x?: number | string | Date;
+  y?: number;
+  r?: number; // bubble radius
+  label?: string;
+}
+```
+
+## ChartOptions
+
+```typescript
+interface ChartOptions {
+  responsive?: boolean;
+  maintainAspectRatio?: boolean;
+  aspectRatio?: number;
+  legend?: { position?: 'top'|'bottom'|'left'|'right'|'none'; clickable?: boolean };
+  tooltip?: { trigger?: 'hover'|'click'|'none'; format?: (value, datasetIndex, pointIndex) => string };
+  animation?: { enabled?: boolean; duration?: number; easing?: 'linear'|'ease-in'|'ease-out'|'ease-in-out' };
+  xAxis?: { title?: string; min?: number; max?: number; ticks?: number; grid?: boolean; labels?: string[] };
+  yAxis?: { title?: string; min?: number; max?: number; ticks?: number; grid?: boolean; labels?: string[] };
+}
+```
+
+## Methods
+
+```typescript
+refresh(): void
+update(datasets: ChartDataset[]): void
+addDataset(dataset: ChartDataset): void
+removeDataset(index: number): void
+toggleDataset(index: number): void
+exportImage(format?: 'png'|'svg'): string
+getData(): { datasets: ChartDataset[]; labels: string[] }
+```
+
+## Usage
+
+```javascript
+// Line chart
+chart.type = 'line';
+chart.datasets = [{
+  label: 'Sales',
+  data: [12, 19, 15, 25, 22, 30],
+  borderColor: '#2196f3',
+  tension: 0.4
+}];
+chart.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+
+// Bar chart
+chart.type = 'bar';
+chart.datasets = [{
+  label: 'Revenue',
+  data: [65, 59, 80, 81, 56],
+  backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff']
+}];
+
+// Pie chart
+chart.type = 'pie';
+chart.datasets = [{
+  label: 'Market Share',
+  data: [30, 25, 20, 15, 10],
+  backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff']
+}];
+chart.labels = ['A', 'B', 'C', 'D', 'E'];
+
+// Scatter plot
+chart.type = 'scatter';
+chart.datasets = [{
+  label: 'Dataset 1',
+  data: [
+    { x: 10, y: 20 },
+    { x: 15, y: 25 },
+    { x: 20, y: 22 }
+  ],
+  backgroundColor: '#2196f3'
+}];
+
+// Radar chart
+chart.type = 'radar';
+chart.datasets = [
+  { label: 'Team A', data: [80, 90, 70, 85, 75], borderColor: '#2196f3' },
+  { label: 'Team B', data: [70, 85, 80, 75, 85], borderColor: '#4caf50' }
+];
+chart.labels = ['Speed', 'Strength', 'Agility', 'Defense', 'Skill'];
+
+// Mixed chart
+chart.type = 'mixed';
+chart.datasets = [
+  { label: 'Bar', type: 'bar', data: [10, 20, 30], backgroundColor: '#2196f3' },
+  { label: 'Line', type: 'line', data: [15, 25, 20], borderColor: '#4caf50' }
+];
+
+// Options
+chart.options = {
+  legend: { position: 'bottom', clickable: true },
+  tooltip: {
+    trigger: 'hover',
+    format: (value, datasetIndex, pointIndex) => `Value: ${value}`
+  },
+  animation: { enabled: true, duration: 1000 },
+  yAxis: { min: 0, max: 100, ticks: 5, grid: true }
+};
+
+// Methods
+chart.addDataset({ label: 'New', data: [1, 2, 3] });
+chart.toggleDataset(0);
+const svg = chart.exportImage('svg');
+```
+
+```html
+<snice-chart type="line" height="400"></snice-chart>
+```
+
+## Features
+
+- 10 chart types (line, bar, area, pie, donut, scatter, bubble, radar, horizontal-bar, mixed)
+- Multiple datasets
+- Interactive legend
+- Hover tooltips
+- Animations
+- SVG rendering
+- Custom colors
+- Grid/axes
+- Export capability

package/docs/ai/components/chat.md

@@ -0,0 +1,189 @@
+# snice-chat
+
+Slack-style chat interface with messages, typing indicators, reactions, and file attachments.
+
+## Usage
+
+```html
+<snice-chat current-user="You"></snice-chat>
+```
+
+## Properties
+
+- `messages: ChatMessage[]` - Messages array (property only)
+- `currentUser: string` - Current user name (default: `"You"`)
+- `currentAvatar: string` - Current user avatar URL (default: `""`)
+- `placeholder: string` - Input placeholder (default: `"Type a message..."`)
+- `allowFiles: boolean` - Enable file uploads (default: `true`)
+- `showTyping: boolean` - Show typing indicators (default: `true`)
+- `showAvatars: boolean` - Show user avatars (default: `true`)
+- `showTimestamps: boolean` - Show timestamps (default: `true`)
+
+## Methods
+
+- `addMessage(message: Omit<ChatMessage, 'id'>): void` - Add message
+- `updateMessage(messageId: string, updates: Partial<ChatMessage>): void` - Update message
+- `deleteMessage(messageId: string): void` - Delete message
+- `addTypingIndicator(user: string): void` - Add typing indicator
+- `removeTypingIndicator(user: string): void` - Remove typing indicator
+- `clear(): void` - Clear messages
+- `scrollToBottom(): void` - Scroll to bottom
+- `scrollToMessage(messageId: string): void` - Scroll to message
+
+## Events
+
+- `message-send: CustomEvent<{ message: string; attachments?: File[] }>` - Message sent
+- `message-edit: CustomEvent<{ messageId: string; newContent: string }>` - Message edited
+- `message-delete: CustomEvent<{ messageId: string }>` - Message deleted
+- `message-react: CustomEvent<{ messageId: string; emoji: string }>` - Reaction added
+- `message-thread: CustomEvent<{ messageId: string }>` - Thread started
+- `typing-start: CustomEvent<{}>` - User started typing
+- `typing-stop: CustomEvent<{}>` - User stopped typing
+
+## Message Types
+
+- `text` - Text message
+- `image` - Image attachment
+- `file` - File attachment
+- `system` - System notification
+
+## CSS Variables
+
+```css
+--snice-chat-height
+--snice-chat-border-radius
+--snice-chat-text-color
+--snice-chat-background
+--snice-chat-border-color
+--snice-chat-author-color
+--snice-chat-timestamp-color
+--snice-chat-system-color
+--snice-chat-placeholder-color
+--snice-chat-scrollbar-color
+--snice-chat-scrollbar-hover-color
+--snice-chat-avatar-background
+--snice-chat-avatar-text-color
+--snice-chat-attachment-border
+--snice-chat-attachment-background
+--snice-chat-attachment-icon-background
+--snice-chat-attachment-icon-color
+--snice-chat-reaction-background
+--snice-chat-reaction-border
+--snice-chat-reaction-hover-background
+--snice-chat-reaction-active-background
+--snice-chat-reaction-active-color
+--snice-chat-reaction-active-border
+--snice-chat-actions-background
+--snice-chat-action-color
+--snice-chat-action-hover-background
+--snice-chat-typing-color
+--snice-chat-typing-dot-color
+--snice-chat-input-background
+--snice-chat-input-container-background
+--snice-chat-input-border
+--snice-chat-input-focus-border
+--snice-chat-button-color
+--snice-chat-button-hover-background
+--snice-chat-send-color
+--snice-chat-send-background
+--snice-chat-send-hover-background
+--snice-chat-empty-color
+```
+
+## Types
+
+```typescript
+type MessageType = 'text' | 'file' | 'image' | 'system';
+
+interface ChatMessage {
+  id: string;
+  type: MessageType;
+  content: string;
+  author: string;
+  avatar?: string;
+  timestamp: Date;
+  edited?: boolean;
+  reactions?: MessageReaction[];
+  thread?: ChatMessage[];
+  attachment?: MessageAttachment;
+}
+
+interface MessageAttachment {
+  type: 'image' | 'file';
+  url: string;
+  name: string;
+  size?: number;
+  thumbnailUrl?: string;
+}
+
+interface MessageReaction {
+  emoji: string;
+  count: number;
+  users: string[];
+}
+```
+
+## Example
+
+```javascript
+const chat = document.querySelector('snice-chat');
+
+// Add message
+chat.addMessage({
+  type: 'text',
+  content: 'Hello!',
+  author: 'Alice',
+  avatar: 'https://example.com/alice.jpg',
+  timestamp: new Date(),
+  formats: [],
+});
+
+// Add image
+chat.addMessage({
+  type: 'image',
+  content: '',
+  author: 'Bob',
+  timestamp: new Date(),
+  formats: [],
+  attachment: {
+    type: 'image',
+    url: 'https://example.com/image.jpg',
+    name: 'photo.jpg',
+  },
+});
+
+// Add reaction
+chat.addEventListener('message-react', (e) => {
+  const message = chat.messages.find((m) => m.id === e.detail.messageId);
+  const reactions = message.reactions || [];
+  reactions.push({ emoji: e.detail.emoji, count: 1, users: [chat.currentUser] });
+  chat.updateMessage(e.detail.messageId, { reactions });
+});
+
+// Typing indicator
+chat.addTypingIndicator('Alice');
+setTimeout(() => chat.removeTypingIndicator('Alice'), 2000);
+
+// Send message
+chat.addEventListener('message-send', (e) => {
+  chat.addMessage({
+    type: 'text',
+    content: e.detail.message,
+    author: 'You',
+    timestamp: new Date(),
+    formats: [],
+  });
+});
+```
+
+## Features
+
+- Text, image, file, system messages
+- Edit, delete, react to messages
+- Typing indicators
+- User avatars with initials fallback
+- Timestamps
+- Auto-scroll to new messages
+- File upload support
+- Emoji reactions with counts
+- Message actions (edit, delete)

package/docs/ai/components/code-block.md

@@ -0,0 +1,32 @@
+# snice-code-block
+
+Code display with syntax highlighting, line numbers, copy.
+
+## Properties
+
+```typescript
+code: string = '';
+language: 'javascript'|'typescript'|'html'|'css'|'json'|'python'|'bash'|'plaintext' = 'plaintext';
+showLineNumbers: boolean = false;
+startLine: number = 1;
+highlightLines: number[] = [];
+copyable: boolean = true;
+filename: string = '';
+```
+
+## Methods
+
+- `copy()` - Copy code to clipboard
+
+## Events
+
+- `@snice/code-copy` (detail: { code, codeBlock })
+
+## Usage
+
+```html
+<snice-code-block id="code" language="javascript" show-line-numbers filename="app.js"></snice-code-block>
+<script>
+  document.getElementById('code').code = `console.log('hello');`;
+</script>
+```

package/docs/ai/components/color-display.md

@@ -0,0 +1,48 @@
+# snice-color-display
+
+Displays colors with swatch and label.
+
+## Properties
+
+```typescript
+value: string = '';
+format: 'hex'|'rgb'|'hsl' = 'hex';
+showSwatch: boolean = true;
+showLabel: boolean = true;
+swatchSize: 'small'|'medium'|'large' = 'medium';
+label: string = '';
+```
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-color-display value="#3b82f6"></snice-color-display>
+
+<!-- Formats -->
+<snice-color-display value="#ff0000" format="hex"></snice-color-display>
+<snice-color-display value="#ff0000" format="rgb"></snice-color-display>
+<snice-color-display value="#ff0000" format="hsl"></snice-color-display>
+
+<!-- Sizes -->
+<snice-color-display value="#10b981" swatch-size="small"></snice-color-display>
+<snice-color-display value="#10b981" swatch-size="medium"></snice-color-display>
+<snice-color-display value="#10b981" swatch-size="large"></snice-color-display>
+
+<!-- Custom label -->
+<snice-color-display value="#ef4444" label="Error Red"></snice-color-display>
+
+<!-- Swatch only -->
+<snice-color-display value="#3b82f6" show-label="false"></snice-color-display>
+
+<!-- Label only -->
+<snice-color-display value="#3b82f6" show-swatch="false"></snice-color-display>
+```
+
+## Features
+
+- Auto-converts hex to RGB/HSL
+- 3 swatch sizes (16px, 24px, 32px)
+- Custom labels supported
+- Swatch and label toggle
+- Monospace font for color values

package/docs/ai/components/color-picker.md

@@ -0,0 +1,75 @@
+# snice-color-picker
+
+Color picker with format conversion and presets.
+
+## Properties
+
+```typescript
+value: string = '#000000';
+format: 'hex'|'rgb'|'hsl' = 'hex';
+size: 'small'|'medium'|'large' = 'medium';
+label: string = '';
+helperText: string = '';
+errorText: string = '';
+disabled: boolean = false;
+required: boolean = false;
+invalid: boolean = false;
+name: string = '';
+showInput: boolean = true;
+showPresets: boolean = false;
+presets: string[] = [...];
+```
+
+## Methods
+
+- `focus()` - Focus picker
+- `blur()` - Blur picker
+
+## Events
+
+- `input` - {value, colorPicker}
+- `change` - {value, colorPicker}
+- `focus` - {colorPicker}
+- `blur` - {colorPicker}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-color-picker label="Color" value="#ff0000"></snice-color-picker>
+
+<!-- Formats -->
+<snice-color-picker format="hex"></snice-color-picker>
+<snice-color-picker format="rgb"></snice-color-picker>
+<snice-color-picker format="hsl"></snice-color-picker>
+
+<!-- With presets -->
+<snice-color-picker show-presets></snice-color-picker>
+
+<!-- No input -->
+<snice-color-picker show-input="false"></snice-color-picker>
+
+<!-- Sizes -->
+<snice-color-picker size="small"></snice-color-picker>
+<snice-color-picker size="medium"></snice-color-picker>
+<snice-color-picker size="large"></snice-color-picker>
+
+<!-- Events -->
+<snice-color-picker id="picker"></snice-color-picker>
+<script>
+const picker = document.querySelector('#picker');
+picker.addEventListener('@snice/color-picker-change', (e) => {
+  console.log('Color:', e.detail.value);
+});
+</script>
+```
+
+## Features
+
+- Form-associated custom element
+- Native color picker integration
+- 3 color formats (hex, rgb, hsl)
+- Format conversion
+- Color presets
+- 3 sizes
+- Accessible

package/docs/ai/components/command-palette.md

@@ -0,0 +1,117 @@
+# snice-command-palette
+
+Searchable command palette overlay (⌘K) for quick command access.
+
+## Properties
+
+```typescript
+open: boolean = false;
+commands: CommandItem[] = [];
+placeholder: string = 'Type a command or search...';
+noResultsText: string = 'No results found';
+maxResults: number = 50;
+showRecentCommands: boolean = true;
+recentCommandsLimit: number = 5;
+caseSensitive: boolean = false;
+```
+
+## CommandItem Interface
+
+```typescript
+interface CommandItem {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  iconImage?: string;
+  shortcut?: string;
+  category?: string;
+  disabled?: boolean;
+  action?: () => void | Promise<void>;
+  data?: any;
+}
+```
+
+## Methods
+
+- `show()` - Open palette
+- `close()` - Close palette
+- `toggle()` - Toggle visibility
+- `addCommand(command: CommandItem)` - Add command
+- `removeCommand(id: string)` - Remove command
+- `executeCommand(id: string)` - Execute by ID
+- `clearSearch()` - Clear search
+- `focus()` - Focus input
+
+## Events
+
+- `@snice/command-palette-open` - Opened (detail: { palette })
+- `@snice/command-palette-close` - Closed (detail: { palette })
+- `@snice/command-select` - Command selected (detail: { command, palette })
+- `@snice/command-execute` - Command executed (detail: { command, palette })
+- `@snice/command-search` - Search changed (detail: { query, results, palette })
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-command-palette id="pal"></snice-command-palette>
+<script>
+  document.getElementById('pal').commands = [
+    {
+      id: 'new',
+      label: 'New File',
+      description: 'Create a new file',
+      icon: '📄',
+      shortcut: '⌘N',
+      category: 'File',
+      action: () => console.log('New file')
+    },
+    {
+      id: 'save',
+      label: 'Save',
+      icon: '💾',
+      shortcut: '⌘S',
+      category: 'File',
+      action: () => console.log('Saved')
+    }
+  ];
+</script>
+
+<!-- Opens with ⌘K or Ctrl+K -->
+
+<!-- Manual trigger -->
+<button onclick="palette.show()">Open</button>
+
+<!-- With async actions -->
+<script>
+  palette.commands = [{
+    id: 'logout',
+    label: 'Logout',
+    action: async () => {
+      await fetch('/api/logout', { method: 'POST' });
+      location.href = '/login';
+    }
+  }];
+</script>
+
+<!-- Events -->
+<script>
+  palette.addEventListener('@snice/command-execute', (e) => {
+    console.log('Executed:', e.detail.command.label);
+  });
+</script>
+```
+
+## Features
+
+- ⌘K/Ctrl+K keyboard shortcut
+- Arrow key navigation
+- Fuzzy search filtering
+- Command categories/grouping
+- Recent commands tracking
+- Icons and keyboard shortcuts display
+- Async action support
+- Focus trap when open
+- Backdrop click to close
+- Escape to close