snice 3.2.0 → 3.3.1

package/docs/ai/components/carousel.md

@@ -0,0 +1,49 @@
+# snice-carousel
+
+Image/content carousel with autoplay, loop, navigation.
+
+## Properties
+
+```typescript
+activeIndex: number = 0;
+autoplay: boolean = false;
+autoplayInterval: number = 3000;
+autoplayDirection: 'forward'|'backward' = 'forward';
+loop: boolean = true;
+showControls: boolean = true;
+showIndicators: boolean = true;
+slidesPerView: number = 1;
+spaceBetween: number = 0;
+```
+
+## Methods
+
+- `next()`, `prev()`, `goToSlide(index)`
+- `play()`, `pause()`
+
+## Events
+
+- `@snice/carousel-slide-change` (detail: { activeIndex, previousIndex, carousel })
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-carousel>
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+</snice-carousel>
+
+<!-- Autoplay -->
+<snice-carousel autoplay autoplay-interval="2000">
+  <div>Auto 1</div>
+  <div>Auto 2</div>
+</snice-carousel>
+
+<!-- Multiple slides -->
+<snice-carousel slides-per-view="3" space-between="20">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</snice-carousel>
+```

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/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

package/docs/ai/components/doc.md

@@ -0,0 +1,154 @@
+# snice-doc
+
+Notion-like document editor with block-based editing.
+
+## Usage
+
+```html
+<snice-doc></snice-doc>
+```
+
+## Properties
+
+- `blocks: DocBlock[]` - Document blocks (property only)
+- `placeholder: string` - Placeholder text (default: `"Type '/' for commands..."`)
+- `readonly: boolean` - Readonly mode (default: `false`)
+
+## Methods
+
+- `getBlocks(): DocBlock[]` - Get blocks copy
+- `setBlocks(blocks: DocBlock[]): void` - Set blocks
+- `toJSON(): string` - Export as JSON
+- `fromJSON(json: string): void` - Import from JSON
+- `toMarkdown(): string` - Export as Markdown
+- `toHTML(): string` - Export as HTML
+- `focus(): void` - Focus editor
+- `clear(): void` - Clear all content
+
+## Events
+
+- `doc-change: CustomEvent<{ blocks: DocBlock[] }>` - Content changed
+- `doc-focus: CustomEvent<{ blockId: string }>` - Block focused
+- `doc-blur: CustomEvent<{ blockId: string }>` - Block blurred
+
+## Block Types
+
+- `paragraph` - Text paragraph
+- `heading-1` - H1 heading
+- `heading-2` - H2 heading
+- `heading-3` - H3 heading
+- `bulleted-list` - Bulleted list item
+- `numbered-list` - Numbered list item
+- `todo` - To-do with checkbox
+- `code` - Code block
+- `quote` - Blockquote
+- `divider` - Horizontal rule
+
+## Keyboard Shortcuts
+
+- **/** - Open block menu
+- **Enter** - New block
+- **Backspace** (empty) - Delete block
+- **Ctrl/Cmd+B** - Bold (planned)
+- **Ctrl/Cmd+I** - Italic (planned)
+- **Ctrl/Cmd+U** - Underline (planned)
+
+## Block Menu
+
+- **ArrowDown/Up** - Navigate
+- **Enter** - Select
+- **Escape** - Close
+
+## CSS Variables
+
+```css
+--snice-doc-text-color
+--snice-doc-background
+--snice-doc-muted-color
+--snice-doc-placeholder-color
+--snice-doc-primary-color
+--snice-doc-link-color
+--snice-doc-code-background
+--snice-doc-code-border
+--snice-doc-inline-code-background
+--snice-doc-quote-border
+--snice-doc-divider-color
+--snice-doc-menu-background
+--snice-doc-menu-border
+--snice-doc-menu-hover
+--snice-doc-toolbar-background
+--snice-doc-toolbar-text
+--snice-doc-toolbar-hover
+--snice-doc-toolbar-active
+--snice-doc-padding
+--snice-doc-min-height
+--snice-doc-max-width
+```
+
+## Types
+
+```typescript
+type BlockType =
+  | 'paragraph'
+  | 'heading-1'
+  | 'heading-2'
+  | 'heading-3'
+  | 'bulleted-list'
+  | 'numbered-list'
+  | 'todo'
+  | 'code'
+  | 'quote'
+  | 'divider';
+
+interface DocBlock {
+  id: string;
+  type: BlockType;
+  content: string;
+  formats: TextRange[];
+  checked?: boolean;
+  indent?: number;
+}
+
+interface TextRange {
+  start: number;
+  end: number;
+  format: InlineFormat;
+  value?: string;
+}
+
+type InlineFormat = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code' | 'link';
+```
+
+## Example
+
+```javascript
+const doc = document.querySelector('snice-doc');
+
+doc.setBlocks([
+  { id: '1', type: 'heading-1', content: 'Title', formats: [] },
+  { id: '2', type: 'paragraph', content: 'Content', formats: [] },
+  { id: '3', type: 'todo', content: 'Task', formats: [], checked: false },
+]);
+
+doc.addEventListener('doc-change', (e) => {
+  console.log(e.detail.blocks);
+});
+
+// Export
+const json = doc.toJSON();
+const markdown = doc.toMarkdown();
+const html = doc.toHTML();
+```
+
+## Features
+
+- Block-based editing
+- Type `/` for block menu
+- Drag to reorder
+- Export JSON/Markdown/HTML
+- Readonly mode
+- Keyboard shortcuts
+- To-do lists with checkboxes
+- Code blocks
+- Quotes
+- Dividers