snice 4.8.0 → 4.10.0

package/docs/ai/components/table.md

@@ -1,8 +1,8 @@
-# snice-table, snice-row, snice-column, snice-cell, snice-header
+# snice-table
 
-Data table with Excel-like formatting, sorting, pagination, and 15 column types.
+Data table with sorting, search, selection, and 15 column types.
 
-## snice-table
+## Properties
 
 ```typescript
 size: 'small'|'medium'|'large' = 'medium';
@@ -10,53 +10,37 @@ variant: 'default'|'striped'|'bordered' = 'default';
 striped: boolean = false;
 hoverable: boolean = true;
 bordered: boolean = false;
-stickyHeader: boolean = false;
+stickyHeader: boolean = false;    // attr: sticky-header
 sortable: boolean = false;
 selectable: boolean = false;
 clickable: boolean = false;
 loading: boolean = false;
-data: any[] = [];
-columns: ColumnDefinition[] = [];
 searchable: boolean = false;
-showPagination: boolean = false;
-pageSize: number = 10;
-currentPage: number = 1;
-totalItems: number = 0;
+searchDebounce: number = 300;     // attr: search-debounce
+list: boolean = false;
+selector: string = '';
+selectorOptions: string = '';     // attr: selector-options
 ```
 
-**Methods:**
-- `setData(data)` - Set table data
-- `sort(column)` - Sort by column
-- `getSelectedRows()` - Get selected rows
-- `search(query)` - Filter data
-- `goToPage(page)` - Navigate pagination
+## Events
 
-**Events:**
-- `row-clicked` - {rowData, rowIndex}
-- `table-row-selection-changed` - {selectedRows, rowIndex, selected}
-- `table-select-all-changed` - {selectedRows, allSelected}
+- `row-clicked` → `{ rowData, rowIndex }`
+- `table-row-selection-changed` → `{ selectedRows, rowIndex, selected }`
+- `table-select-all-changed` → `{ selectedRows, allSelected }`
 
-## Column Types
+## Methods
+
+- `setData(data)` - Set table data array
+- `setColumns(columns)` - Set column definitions
+- `renderHeader()` - Re-render header
+- `renderBody()` - Re-render body
+- `toggleSort(column)` - Sort by column
 
-15 specialized column types with formatting options:
+## Column Types
 
-1. **text** - Plain text
-2. **number** - Formatted numbers (decimals, thousands separators, prefix/suffix)
-3. **date** - Date formatting (short/medium/long/full/custom)
-4. **boolean** - True/false with symbols or text
-5. **currency** - Currency formatting with locale and display options
-6. **percent** - Percentages with trends and colorization
-7. **rating** - Star ratings with custom symbols
-8. **progress** - Progress bars with percentage
-9. **sparkline** - Inline charts (line/bar/area)
-10. **accounting** - Accounting number format
-11. **scientific** - Scientific notation
-12. **fraction** - Fraction display
-13. **duration** - Time durations
-14. **filesize** - File size formatting
-15. **custom** - Custom formatter function
+text, number, date, boolean, currency, percent, rating, progress, sparkline, accounting, scientific, fraction, duration, filesize, custom
 
-## Column Definition
+## ColumnDefinition
 
 ```typescript
 interface ColumnDefinition {
@@ -66,157 +50,44 @@ interface ColumnDefinition {
   align?: 'left'|'center'|'right';
   width?: string;
   sortable?: boolean;
-  filterable?: boolean;
   formatter?: (value, row) => string;
-
-  // Excel-like formatting
   numberFormat?: NumberFormat;
   dateFormat?: DateFormat;
   booleanFormat?: BooleanFormat;
   ratingFormat?: RatingFormat;
   progressFormat?: ProgressFormat;
   sparklineFormat?: SparklineFormat;
-  percentageFormat?: PercentageFormat;
   currencyFormat?: CurrencyFormat;
-
-  // Additional formats
-  phoneFormat?: PhoneFormat;
-  statusFormat?: StatusFormat;
-  tagFormat?: TagFormat;
-  actionsFormat?: ActionsFormat;
-  linkFormat?: LinkFormat;
-  colorFormat?: ColorFormat;
-  emailFormat?: EmailFormat;
-  imageFormat?: ImageFormat;
-  jsonFormat?: JsonFormat;
-  locationFormat?: LocationFormat;
-
-  // Cell styling
-  style?: CellStyle;
   conditionalFormats?: ConditionalFormat[];
-
-  // Display options
-  wrap?: boolean;
-  ellipsis?: boolean;
-  tooltip?: boolean | ((value, row) => string);
 }
 ```
 
 ## Usage
 
 ```html
-<!-- Basic table -->
-<snice-table id="table"></snice-table>
-
-<script>
-const table = document.querySelector('#table');
-
-table.columns = [
-  { key: 'name', label: 'Name', sortable: true },
-  { key: 'age', label: 'Age', type: 'number', align: 'right' },
-  { key: 'email', label: 'Email' }
-];
-
-table.data = [
-  { name: 'John', age: 30, email: 'john@example.com' },
-  { name: 'Jane', age: 25, email: 'jane@example.com' }
-];
-</script>
-
-<!-- Striped and hoverable -->
-<snice-table striped hoverable></snice-table>
-
-<!-- With sorting and selection -->
-<snice-table sortable selectable></snice-table>
-
-<!-- With search -->
-<snice-table searchable></snice-table>
-
-<!-- Sticky header -->
-<snice-table sticky-header></snice-table>
-
-<!-- Advanced formatting -->
-<script>
-table.columns = [
-  {
-    key: 'price',
-    label: 'Price',
-    type: 'currency',
-    currencyFormat: { currency: 'USD', decimals: 2 }
-  },
-  {
-    key: 'progress',
-    label: 'Progress',
-    type: 'progress',
-    progressFormat: { max: 100, showPercentage: true }
-  },
-  {
-    key: 'rating',
-    label: 'Rating',
-    type: 'rating',
-    ratingFormat: { max: 5, symbol: '★' }
-  },
-  {
-    key: 'trend',
-    label: 'Trend',
-    type: 'sparkline',
-    sparklineFormat: { type: 'line', color: '#3b82f6' }
-  },
-  {
-    key: 'status',
-    label: 'Status',
-    type: 'boolean',
-    booleanFormat: { trueValue: 'Active', falseValue: 'Inactive', useSymbols: true }
-  }
-];
-</script>
-
-<!-- Conditional formatting -->
+<snice-table id="table" striped hoverable sortable></snice-table>
 <script>
-table.columns = [
-  {
-    key: 'score',
-    label: 'Score',
-    type: 'number',
-    conditionalFormats: [
-      {
-        condition: (val) => val >= 90,
-        style: { backgroundColor: '#dcfce7', color: '#166534' }
-      },
-      {
-        condition: (val) => val < 60,
-        style: { backgroundColor: '#fee2e2', color: '#991b1b' }
-      }
-    ]
-  }
-];
+  const table = document.querySelector('#table');
+  table.setColumns([
+    { key: 'name', label: 'Name', sortable: true },
+    { key: 'age', label: 'Age', type: 'number', align: 'right' },
+    { key: 'price', label: 'Price', type: 'currency', currencyFormat: { currency: 'USD' } },
+    { key: 'rating', label: 'Rating', type: 'rating', ratingFormat: { max: 5 } }
+  ]);
+  table.setData([
+    { name: 'John', age: 30, price: 99.99, rating: 4 },
+    { name: 'Jane', age: 25, price: 149.99, rating: 5 }
+  ]);
 </script>
 
-<!-- Event handling -->
-<script>
-table.addEventListener('row-clicked', (e) => {
-  console.log('Clicked row:', e.detail.rowData);
-});
+<!-- Declarative columns -->
+<snice-table>
+  <snice-column key="name" label="Name"></snice-column>
+  <snice-column key="age" label="Age" type="number"></snice-column>
+  <snice-row name="Alice" age="30"></snice-row>
+  <snice-row name="Bob" age="25"></snice-row>
+</snice-table>
 
-table.addEventListener('table-row-selection-changed', (e) => {
-  console.log('Selected rows:', e.detail.selectedRows);
-});
-</script>
+<snice-table selectable clickable searchable></snice-table>
+<snice-table list></snice-table>
 ```
-
-## Features
-
-- 15 specialized column types
-- Excel-like formatting for numbers, dates, currencies
-- Visual formatters (progress bars, ratings, sparklines)
-- Conditional formatting with styles
-- Sorting and filtering
-- Row selection
-- Pagination and search
-- Sticky header
-- Custom cell formatters
-- Tooltips and ellipsis
-- Action buttons in cells
-- 3 sizes and variants
-- Loading state
-- Responsive and accessible

package/docs/ai/components/tabs.md

@@ -1,59 +1,44 @@
 # snice-tabs
 
-Tabbed interface with container, tab buttons, and content panels.
+Tabbed interface with tab buttons and content panels.
 
-## Components
-
-### snice-tabs (Container)
+## snice-tabs (Container)
 
 ```typescript
-selected: number = 0;                              // Active tab index
-placement: 'top'|'bottom'|'start'|'end' = 'top';  // Tab navigation position
-noScrollControls: boolean = false;                 // Hide scroll buttons
-transition: string = 'none';                       // Panel transition effect
+selected: number = 0;
+placement: 'top'|'bottom'|'start'|'end' = 'top';
+noScrollControls: boolean = false;  // attr: no-scroll-controls
+transition: string = 'none';
 ```
 
-**Methods:**
-```typescript
-selectTab(index: number)           // Select tab by index
-show(index: number)                 // Alias for selectTab
-getTab(index: number)               // Get tab element
-getPanel(index: number)             // Get panel element
-```
+## snice-tab (Tab Button)
 
-**Events:**
 ```typescript
-'tab-change' // { index, oldIndex, tab, panel }
+disabled: boolean = false;
+closable: boolean = false;
 ```
 
-### snice-tab (Tab Button)
+## snice-tab-panel (Content Panel)
 
 ```typescript
-disabled: boolean = false;   // Disabled state
-closable: boolean = false;   // Show close button
+name: string = '';
+transitionIn: string = '';        // attr: transition-in
+transitionOut: string = '';       // attr: transition-out
+transitionDuration: number = 300; // attr: transition-duration
 ```
 
-**Methods:**
-```typescript
-focus()   // Focus the tab
-blur()    // Remove focus
-```
+## Events
 
-**Events:**
-```typescript
-'tab-select' // { tab }
-'tab-close'      // { tab }
-```
+- `tab-change` → `{ index, oldIndex, tab, panel }` - Tab switched
+- `tab-select` → `{ tab }` - Tab clicked
+- `tab-close` → `{ tab }` - Close button clicked
 
-### snice-tab-panel (Content Panel)
+## Methods
 
-```typescript
-name: string = '';                         // Panel identifier
-transitionIn: string = '';                 // Transition when showing
-transitionOut: string = '';                // Transition when hiding
-transitioning: 'in'|'out'|'' = '';        // Transition state
-transitionDuration: number = 300;          // Transition duration (ms)
-```
+- `selectTab(index)` - Select tab by index
+- `show(index)` - Alias for selectTab
+- `getTab(index)` - Get tab element
+- `getPanel(index)` - Get panel element
 
 ## Usage
 
@@ -61,23 +46,17 @@ transitionDuration: number = 300;          // Transition duration (ms)
 <snice-tabs>
   <snice-tab slot="nav">Tab 1</snice-tab>
   <snice-tab slot="nav">Tab 2</snice-tab>
-
   <snice-tab-panel>Content 1</snice-tab-panel>
   <snice-tab-panel>Content 2</snice-tab-panel>
 </snice-tabs>
-```
 
-```typescript
-tabs.addEventListener('tab-change', (e) => {
-  console.log(e.detail.index);
-});
+<!-- Placement -->
+<snice-tabs placement="bottom">...</snice-tabs>
+<snice-tabs placement="start">...</snice-tabs>
 
-tabs.selectTab(1);
-```
-
-## Notes
+<!-- Closable -->
+<snice-tab slot="nav" closable>Closable Tab</snice-tab>
 
-- Tabs use `slot="nav"` attribute
-- Panels in default slot
-- Automatically manages ARIA attributes
-- Supports keyboard navigation
+<!-- Disabled -->
+<snice-tab slot="nav" disabled>Disabled Tab</snice-tab>
+```

package/docs/ai/components/tag-input.md

@@ -0,0 +1,70 @@
+# snice-tag-input
+
+Tag/chip input with autocomplete suggestions, keyboard navigation, and comma-separated entry.
+
+## Properties
+
+```ts
+value: string[] = []
+suggestions: string[] = []
+maxTags: number = 0              // 0 = unlimited (attribute: max-tags)
+allowDuplicates: boolean = false // attribute: allow-duplicates
+placeholder: string = 'Add a tag...'
+disabled: boolean = false
+readonly: boolean = false
+label: string = ''
+name: string = ''
+```
+
+## Methods
+
+- `addTag(tag: string)` - Add a tag programmatically
+- `removeTag(index: number)` - Remove tag at index
+- `clear()` - Remove all tags
+- `focus()` - Focus the input field
+
+## Events
+
+- `tag-add` -> `{ tag: string; value: string[] }`
+- `tag-remove` -> `{ tag: string; index: number; value: string[] }`
+- `tag-change` -> `{ value: string[] }`
+
+## Input Behavior
+
+- Enter: Add current input as tag (or select highlighted suggestion)
+- Comma: Split input and add each part as a tag
+- Backspace on empty input: Remove last tag
+- ArrowUp/ArrowDown: Navigate suggestions
+- Escape: Close suggestions dropdown
+
+## CSS Custom Properties
+
+- `--snice-color-border` - Container border (default: `rgb(226 226 226)`)
+- `--snice-color-primary` - Focus ring, tag color (default: `rgb(37 99 235)`)
+- `--snice-color-primary-subtle` - Tag background (default: `rgb(239 246 255)`)
+- `--snice-color-background` - Input background (default: `rgb(255 255 255)`)
+- `--snice-color-text` - Text color (default: `rgb(23 23 23)`)
+- `--snice-color-text-tertiary` - Placeholder color
+- `--snice-focus-ring-width` - Focus ring width (default: `2px`)
+- `--snice-focus-ring-color` - Focus ring color
+- `--snice-shadow-lg` - Suggestions dropdown shadow
+
+## Usage
+
+```html
+<snice-tag-input
+  label="Skills"
+  placeholder="Add a skill..."
+  max-tags="5"
+></snice-tag-input>
+```
+
+```js
+const tagInput = document.querySelector('snice-tag-input');
+tagInput.suggestions = ['JavaScript', 'TypeScript', 'Python', 'Rust', 'Go'];
+tagInput.value = ['JavaScript'];
+
+tagInput.addEventListener('tag-change', (e) => {
+  console.log('Tags:', e.detail.value);
+});
+```

package/docs/ai/components/terminal.md

@@ -1,147 +1,65 @@
 # snice-terminal
 
-Shell terminal emulator with command execution, history, ANSI colors, and keyboard navigation.
-
-## Usage
-
-```html
-<snice-terminal prompt="$ " cwd="~"></snice-terminal>
-```
+Shell terminal emulator with command execution, history, and ANSI colors.
 
 ## Properties
 
-- `prompt: string` - Terminal prompt (default: `"$ "`)
-- `cwd: string` - Current working directory (default: `"~"`)
-- `readonly: boolean` - Disable input (default: `false`)
-- `maxLines: number` - Max lines in history (default: `1000`)
-- `showTimestamps: boolean` - Show line timestamps (default: `false`)
-
-## Methods
-
-- `write(content: string, type?: TerminalLineType): void` - Write without newline
-- `writeln(content: string, type?: TerminalLineType): void` - Write with newline
-- `writeLines(lines: Array<{ content: string; type?: TerminalLineType }>): void` - Write multiple lines
-- `writeError(content: string): void` - Write error line
-- `clear(): void` - Clear terminal
-- `focus(): void` - Focus input
-- `getHistory(): string[]` - Get command history
-- `clearHistory(): void` - Clear command history
-
-## Events
-
-- `@snice/terminal-command: CustomEvent<{ command: string; args: string[] }>` - Command entered
-- `@snice/terminal-clear: CustomEvent<{}>` - Terminal cleared
-- `@snice/terminal-ready: CustomEvent<{}>` - Terminal ready
-
-## Request/Response Pattern
-
-Terminal uses `@request('terminal-command')` decorator pattern:
-
 ```typescript
-// Terminal component makes request
-@request('terminal-command')
-async *executeCommand(commandLine: string): any {
-  const response = await (yield payload);
-  return response;
-}
-
-// Controller responds
-@respond('terminal-command')
-async handleCommand(payload: TerminalCommandRequest) {
-  const { command, args, cwd } = payload;
-  // Execute command
-  return { output: 'result', exitCode: 0 };
-}
+prompt: string = '$ ';
+cwd: string = '~';
+readonly: boolean = false;
+maxLines: number = 1000;       // attr: max-lines
+showTimestamps: boolean = false; // attr: show-timestamps
 ```
 
-## Line Types
-
-- `input` - User input
-- `output` - Command output
-- `error` - Error message
-- `info` - Info message
-- `success` - Success message
-- `warning` - Warning message
+## Events
 
-## Keyboard Shortcuts
+- `terminal-command` → `{ command, args }` - Command entered
+- `terminal-clear` → `{}` - Terminal cleared
+- `terminal-ready` → `{}` - Terminal ready
 
-- `Enter` - Execute command
-- `↑/↓` - Navigate history
-- `Ctrl+C` - Cancel input
-- `Ctrl+L` - Clear terminal
-- `Tab` - Command completion (TODO)
+## Methods
 
-## ANSI Color Support
+- `write(content, type?)` - Write without newline
+- `writeln(content, type?)` - Write with newline
+- `writeLines(lines)` - Write multiple lines
+- `writeError(content)` - Write error line
+- `clear()` - Clear terminal
+- `focus()` - Focus input
+- `getHistory()` - Get command history
+- `clearHistory()` - Clear command history
 
-Supports ANSI escape codes for colors:
-- `30-37` - Standard colors
-- `90-97` - Bright colors
+## Line Types
 
-Special output `\x1B[CLEAR]` clears terminal.
+`input` | `output` | `error` | `info` | `success` | `warning`
 
-## CSS Variables
+## CSS Custom Properties
 
 ```css
 --snice-terminal-background
 --snice-terminal-foreground
 --snice-terminal-border
---snice-terminal-scrollbar
---snice-terminal-scrollbar-thumb
+--snice-terminal-prompt-color
 --snice-terminal-input-color
 --snice-terminal-output-color
 --snice-terminal-error-color
 --snice-terminal-info-color
 --snice-terminal-success-color
 --snice-terminal-warning-color
---snice-terminal-prompt-color
---snice-terminal-selection
-```
-
-## Types
-
-```typescript
-type TerminalLineType = 'input' | 'output' | 'error' | 'info' | 'success' | 'warning';
-
-interface TerminalCommandRequest {
-  command: string;
-  args: string[];
-  cwd?: string;
-  history?: string[];
-}
-
-interface TerminalCommandResponse {
-  output?: string;
-  error?: string;
-  exitCode?: number;
-}
 ```
 
-## Example
-
-```javascript
-const terminal = document.querySelector('snice-terminal');
+## Usage
 
-// Listen for commands (event pattern)
-terminal.addEventListener('terminal-command', (e) => {
-  console.log('Command:', e.detail.command, e.detail.args);
-});
+```html
+<snice-terminal prompt="$ " cwd="~"></snice-terminal>
 
-// Handle commands (@respond pattern)
-class TerminalController extends HTMLElement {
-  @respond('terminal-command')
-  async handleCommand(req) {
-    if (req.command === 'echo') {
-      return { output: req.args.join(' '), exitCode: 0 };
-    }
-    if (req.command === 'clear') {
-      return { output: '\x1B[CLEAR]' };
-    }
-    return { error: `Command not found: ${req.command}`, exitCode: 127 };
-  }
-}
+<script>
+  const terminal = document.querySelector('snice-terminal');
+  terminal.writeln('Welcome!', 'info');
+  terminal.writeError('Something failed');
 
-// Write to terminal
-terminal.writeln('Welcome to the terminal!', 'info');
-terminal.writeln('\x1b[32mGreen text\x1b[0m', 'output');
-terminal.writeError('Error: Something went wrong');
+  terminal.addEventListener('terminal-command', (e) => {
+    console.log('Command:', e.detail.command, e.detail.args);
+  });
+</script>
 ```

package/docs/ai/components/testimonial.md

@@ -0,0 +1,56 @@
+# snice-testimonial
+
+Testimonial/quote card with author info, avatar, star rating, and variant styles.
+
+## Properties
+
+```ts
+quote: string = ''
+author: string = ''
+avatar: string = ''            // URL for author avatar image
+role: string = ''              // e.g. "CEO"
+company: string = ''           // e.g. "Acme Inc" (renders as "role at company")
+rating: number = 0             // 0-5 star rating (0 = hidden)
+variant: 'card' | 'minimal' | 'featured' = 'card'
+```
+
+## Variants
+
+- `card` - Default. Background, border, and shadow
+- `minimal` - Left border accent, no background
+- `featured` - Primary-colored background with inverse text
+
+## CSS Custom Properties
+
+- `--snice-color-background-element` - Card background (default: `rgb(252 251 249)`)
+- `--snice-color-border` - Card border (default: `rgb(226 226 226)`)
+- `--snice-color-primary` - Quote icon, minimal border, featured bg (default: `rgb(37 99 235)`)
+- `--snice-color-text` - Text color (default: `rgb(23 23 23)`)
+- `--snice-color-text-secondary` - Author role color
+- `--snice-color-text-inverse` - Featured variant text (default: `rgb(250 250 250)`)
+- `--snice-color-warning` - Star rating color (default: `rgb(234 179 8)`)
+- `--snice-shadow-sm` - Card shadow
+- `--snice-spacing-lg` - Card padding (default: `1.5rem`)
+- `--snice-border-radius-lg` - Card border radius (default: `0.5rem`)
+
+## Usage
+
+```html
+<snice-testimonial
+  quote="This product changed my workflow completely."
+  author="Jane Doe"
+  role="CTO"
+  company="Acme Corp"
+  avatar="https://example.com/jane.jpg"
+  rating="5"
+  variant="card"
+></snice-testimonial>
+
+<!-- Featured style -->
+<snice-testimonial
+  quote="Outstanding experience from start to finish."
+  author="John Smith"
+  rating="4"
+  variant="featured"
+></snice-testimonial>
+```