snice 4.28.0 → 4.30.0

package/docs/ai/components/org-chart.md

@@ -4,54 +4,42 @@ Hierarchical organizational chart with expand/collapse, avatars, and two layout
 
 ## Properties
 
-```ts
-data: OrgChartNode | null                // Root node of the tree
-direction: 'top-down' | 'left-right'     // Layout direction (default: 'top-down')
-compact: boolean                         // Compact node display (default: false)
-```
-
-### OrgChartNode
-
-```ts
-interface OrgChartNode {
-  id: string;
-  name: string;
-  title?: string;                        // Job title / role
-  avatar?: string;                       // Avatar image URL
-  children?: OrgChartNode[];
-}
+```typescript
+data: OrgChartNode | null = null;                    // attr: none (JS only)
+direction: 'top-down'|'left-right' = 'top-down';
+compact: boolean = false;
 ```
 
 ## Methods
 
-- `collapseNode(id: string)` -- Collapse a specific node
-- `expandNode(id: string)` -- Expand a specific node
-- `expandAll()` -- Expand all nodes
-- `collapseAll()` -- Collapse all nodes
+- `collapseNode(id: string)` - Collapse a specific node
+- `expandNode(id: string)` - Expand a specific node
+- `expandAll()` - Expand all nodes
+- `collapseAll()` - Collapse all nodes
 
 ## Events
 
-- `node-click` -> `{ node: OrgChartNode }` -- Node clicked
-- `node-expand` -> `{ node: OrgChartNode }` -- Node expanded
-- `node-collapse` -> `{ node: OrgChartNode }` -- Node collapsed
+- `node-click` → `{ node: OrgChartNode }` - Node clicked
+- `node-expand` → `{ node: OrgChartNode }` - Node expanded
+- `node-collapse` → `{ node: OrgChartNode }` - Node collapsed
 
-**CSS Parts:**
-- `base` - The outer chart container
-- `tree` - The tree layout wrapper
+## CSS Parts
+
+- `base` - Outer chart container
+- `tree` - Tree layout wrapper
 - `node` - Individual node cards
 
-## Usage
+## Basic Usage
 
 ```html
 <snice-org-chart direction="top-down"></snice-org-chart>
 ```
 
 ```typescript
+import 'snice/components/org-chart/snice-org-chart';
+
 chart.data = {
-  id: 'ceo',
-  name: 'Jane Smith',
-  title: 'CEO',
-  avatar: '/avatars/jane.jpg',
+  id: 'ceo', name: 'Jane Smith', title: 'CEO', avatar: '/avatars/jane.jpg',
   children: [
     { id: 'cto', name: 'Bob Jones', title: 'CTO', children: [
       { id: 'dev1', name: 'Alice', title: 'Engineer' }
@@ -64,3 +52,20 @@ chart.addEventListener('node-click', (e) => {
   console.log('Selected:', e.detail.node.name);
 });
 ```
+
+## Accessibility
+
+- Nodes are clickable with expand/collapse toggle buttons
+- Avatar placeholders show name initials
+
+## Types
+
+```typescript
+interface OrgChartNode {
+  id: string;
+  name: string;
+  title?: string;
+  avatar?: string;
+  children?: OrgChartNode[];
+}
+```

package/docs/ai/components/pagination.md

@@ -1,48 +1,35 @@
 # snice-pagination
 
-Pagination navigation component.
+Pagination navigation component with page numbers, ellipsis, and navigation buttons.
 
 ## Properties
 
 ```typescript
 current: number = 1;
 total: number = 1;
-siblings: number = 1;               // Pages shown each side of current
-showFirst: boolean = true;          // attr: show-first
-showLast: boolean = true;           // attr: show-last
-showPrev: boolean = true;           // attr: show-prev
-showNext: boolean = true;           // attr: show-next
+siblings: number = 1;                    // Pages shown each side of current
+showFirst: boolean = true;               // attr: show-first
+showLast: boolean = true;                // attr: show-last
+showPrev: boolean = true;               // attr: show-prev
+showNext: boolean = true;               // attr: show-next
 size: 'small'|'medium'|'large' = 'medium';
 variant: 'default'|'rounded'|'text' = 'default';
 ```
 
 ## Methods
 
-- `goToPage(page: number)` - Navigate to page
-- `nextPage()` - Next page
-- `previousPage()` - Previous page
-- `firstPage()` - First page
-- `lastPage()` - Last page
+- `goToPage(page: number)` - Navigate to specific page
+- `nextPage()` - Go to next page
+- `previousPage()` - Go to previous page
+- `firstPage()` - Go to first page
+- `lastPage()` - Go to last page
 
 ## Events
 
-- `pagination-change` → `{ page, previousPage }`
+- `pagination-change` → `{ page: number, previousPage: number }` - Page changed
 
-## Usage
+## CSS Parts
 
-```html
-<snice-pagination current="1" total="10"></snice-pagination>
-<snice-pagination total="20" siblings="3" variant="rounded" size="large"></snice-pagination>
-```
-
-```typescript
-pagination.addEventListener('pagination-change', (e) => {
-  console.log(e.detail.page);
-});
-pagination.goToPage(5);
-```
-
-**CSS Parts:**
 - `base` - Nav container
 - `button` - All navigation buttons (shared)
 - `first-button` - First page button
@@ -61,3 +48,24 @@ pagination.goToPage(5);
 --pagination-font-size: 14px;
 --pagination-border-radius: 4px;
 ```
+
+## Basic Usage
+
+```html
+<snice-pagination current="1" total="10"></snice-pagination>
+```
+
+```typescript
+import 'snice/components/pagination/snice-pagination';
+
+pagination.addEventListener('pagination-change', (e) => {
+  console.log('Page:', e.detail.page);
+});
+```
+
+## Accessibility
+
+- Uses `<nav>` with `aria-label="Pagination"`
+- Active page has `aria-current="page"`
+- Navigation buttons have `aria-label` attributes
+- Disabled state for boundary buttons

package/docs/ai/components/paint.md

@@ -1,126 +1,88 @@
 # snice-paint
 
-Self-contained drawing canvas with built-in toolbar.
+Self-contained drawing canvas with built-in toolbar for colors, brush size, eraser, undo/redo, and clear.
 
 ## Properties
 
 ```typescript
-colors: string[] = ['#3b82f6','#ef4444','#10b981','#f59e0b','#8b5cf6','#ec4899','#e2e8f0','#1e293b'];
 color: string = '#3b82f6';
-strokeWidth: number = 3;
-minStrokeWidth: number = 1;
-maxStrokeWidth: number = 20;
+strokeWidth: number = 3;                              // attr: stroke-width
+minStrokeWidth: number = 1;                           // attr: min-stroke-width
+maxStrokeWidth: number = 20;                          // attr: max-stroke-width
 controls: string = 'colors,size,eraser,undo,redo,clear';
-backgroundColor: string = '#ffffff';
-colorSelects: number = 0; // extra color-picker dots in palette
+backgroundColor: string = '#ffffff';                  // attr: background-color
+colorSelects: number = 0;                             // attr: color-selects, extra color picker dots
 disabled: boolean = false;
+colors: string[];  // getter/setter, default: ['#3b82f6','#ef4444','#10b981','#f59e0b','#8b5cf6','#ec4899','#e2e8f0','#1e293b']
 ```
 
-## Controls
-
-Comma-separated in `controls` attribute:
-- `colors` — color swatch grid
-- `size` — brush size slider
-- `eraser` — eraser toggle
-- `undo` — undo button
-- `redo` — redo button
-- `clear` — clear button
-
 ## Methods
 
-```typescript
-undo(): void
-redo(): void
-clear(): void
-toDataURL(type?: 'image/png'|'image/jpeg'|'image/webp', quality?: number): string
-toBlob(type?: 'image/png'|'image/jpeg'|'image/webp', quality?: number): Promise<Blob>
-download(filename?: string): void
-getStrokes(): PaintStroke[]
-setStrokes(strokes: PaintStroke[]): void
-```
-
-## PaintStroke
-
-```typescript
-interface PaintStroke {
-  id: string;
-  tool: 'pen' | 'eraser';
-  color: string;
-  width: number;
-  points: Point[];
-  timestamp: number;
-}
-```
+- `undo()` - Undo last stroke
+- `redo()` - Redo last undone stroke
+- `clear()` - Clear canvas
+- `toDataURL(type?, quality?)` - Export as data URL
+- `toBlob(type?, quality?)` - Export as Blob (async)
+- `download(filename?)` - Download as image file
+- `getStrokes()` - Get copy of all strokes
+- `setStrokes(strokes)` - Replace all strokes
 
 ## Events
 
-- `paint-start` — Drawing started (detail: { point })
-- `paint-end` — Stroke completed (detail: { stroke })
-- `paint-clear` — Canvas cleared
-- `paint-undo` — Undo performed
-- `paint-redo` — Redo performed
-- `color-select` — Custom color picked (detail: { color, index })
+- `paint-start` → `{ point: Point }` - Drawing started
+- `paint-end` → `{ stroke: PaintStroke }` - Stroke completed
+- `paint-clear` → `{}` - Canvas cleared
+- `paint-undo` → `{}` - Undo performed
+- `paint-redo` → `{}` - Redo performed
+- `color-select` → `{ color: string, index: number }` - Custom color picked
 
 ## Slots
 
-| Slot | Behavior | Description |
-|------|----------|-------------|
-| `toolbar-start` | Additive | Content prepended above default controls |
-| `colors` | Replaces default | Replaces built-in color swatches |
-| `size` | Replaces default | Replaces built-in size slider |
-| `tools` | Additive | Custom tool buttons (between eraser and undo/redo) |
-| `toolbar-end` | Additive | Content appended below default controls |
+- `toolbar-start` - Content prepended before default controls
+- `colors` - Replaces built-in color swatches
+- `size` - Replaces built-in size slider
+- `tools` - Custom tool buttons (between eraser and undo/redo)
+- `toolbar-end` - Content appended after default controls
 
-Toolbar auto-shows when any slot has content, even if `controls=""`.
+## CSS Parts
 
-**CSS Parts:**
-- `base` - The outer paint container
-- `toolbar` - The toolbar with controls
-- `canvas-wrap` - The canvas wrapper element
-- `canvas` - The drawing canvas element
+- `base` - Outer paint container
+- `toolbar` - Toolbar with controls
+- `canvas-wrap` - Canvas wrapper element
+- `canvas` - Drawing canvas element
 
-## Usage
+## Basic Usage
 
 ```html
 <snice-paint></snice-paint>
-
-<!-- Custom colors -->
-<snice-paint colors='["#ff0000","#00ff00","#0000ff"]'></snice-paint>
-
-<!-- Minimal controls -->
-<snice-paint controls="colors,undo"></snice-paint>
-
-<!-- Custom size range -->
-<snice-paint min-stroke-width="2" max-stroke-width="50"></snice-paint>
 ```
 
 ```typescript
+import 'snice/components/paint/snice-paint';
+
 // Export
 paint.download('artwork.png');
-const url = paint.toDataURL();
-
-// Save/load
 const strokes = paint.getStrokes();
 paint.setStrokes(strokes);
 ```
 
-```html
-<!-- Custom color pickers in palette -->
-<snice-paint color-selects="2"></snice-paint>
-
-<!-- Custom tools -->
-<snice-paint>
-  <button slot="tools" onclick="...">Rectangle</button>
-  <button slot="tools" onclick="...">Circle</button>
-</snice-paint>
-
-<!-- Replace color picker -->
-<snice-paint>
-  <input slot="colors" type="color" onchange="this.closest('snice-paint').color = this.value">
-</snice-paint>
-
-<!-- Add save button -->
-<snice-paint>
-  <button slot="toolbar-end" onclick="this.closest('snice-paint').download()">Save</button>
-</snice-paint>
+## Accessibility
+
+- Canvas supports pointer events for drawing
+- Toolbar buttons have title attributes for tooltips
+- Disabled state prevents all drawing interaction
+
+## Types
+
+```typescript
+interface Point { x: number; y: number; }
+interface PaintStroke {
+  id: string;
+  tool: 'pen' | 'eraser';
+  color: string;
+  width: number;
+  points: Point[];
+  timestamp: number;
+}
+type PaintControl = 'colors' | 'size' | 'eraser' | 'undo' | 'redo' | 'clear';
 ```

package/docs/ai/components/pdf-viewer.md

@@ -1,61 +1,60 @@
 # snice-pdf-viewer
 
-PDF document viewer with toolbar (page navigation, zoom, fit modes, download, print). Uses a vendored PDF.js bundle.
+PDF document viewer with toolbar for page navigation, zoom, fit modes, download, and print. Uses vendored PDF.js.
 
 ## Properties
 
-```ts
-src: string                              // PDF file URL
-page: number                             // Current page (default: 1)
-zoom: number                             // Zoom level (default: 1, range: 0.25-5)
-fit: 'width' | 'height' | 'page'        // Fit mode (default: 'width')
-readonly totalPages: number              // Total pages in document
+```typescript
+src: string = '';                                    // PDF file URL
+page: number = 1;                                    // Current page number
+zoom: number = 1;                                    // Zoom level (0.25-5)
+fit: 'width'|'height'|'page' = 'width';             // Fit mode
+readonly totalPages: number = 0;                     // Total pages in document
 ```
 
 ## Methods
 
-- `goToPage(page: number)` -- Navigate to specific page
-- `nextPage()` -- Go to next page
-- `prevPage()` -- Go to previous page
-- `print()` -- Open PDF in new window for printing
-- `download()` -- Trigger PDF file download
+- `goToPage(page: number)` - Navigate to specific page
+- `nextPage()` - Go to next page
+- `prevPage()` - Go to previous page
+- `print()` - Open PDF in new window for printing
+- `download()` - Trigger PDF file download
 
 ## Events
 
-- `page-change` -> `{ page: number; totalPages: number }` -- Page navigation
-- `pdf-loaded` -> `{ totalPages: number }` -- Document loaded successfully
-- `pdf-error` -> `{ error: string }` -- Loading or rendering error
-
-**CSS Parts:**
-- `base` - The outer viewer container
-- `toolbar` - The navigation and zoom toolbar
-- `viewport` - The PDF page display area
+- `page-change` → `{ page: number, totalPages: number }` - Page navigation
+- `pdf-loaded` → `{ totalPages: number }` - Document loaded
+- `pdf-error` → `{ error: string }` - Loading or rendering error
 
-## Keyboard Shortcuts
+## CSS Parts
 
-- `ArrowRight` / `PageDown` -- Next page
-- `ArrowLeft` / `PageUp` -- Previous page
-- `Ctrl/Cmd +` -- Zoom in
-- `Ctrl/Cmd -` -- Zoom out
+- `base` - Outer viewer container
+- `toolbar` - Navigation and zoom toolbar
+- `viewport` - PDF page display area
 
-## Usage
+## Basic Usage
 
 ```html
-<snice-pdf-viewer
-  src="/documents/report.pdf"
-  fit="width"
-  zoom="1"
-></snice-pdf-viewer>
+<snice-pdf-viewer src="/documents/report.pdf" fit="width"></snice-pdf-viewer>
 ```
 
 ```typescript
-viewer.src = '/documents/report.pdf';
+import 'snice/components/pdf-viewer/snice-pdf-viewer';
 
 viewer.addEventListener('pdf-loaded', (e) => {
   console.log('Pages:', e.detail.totalPages);
 });
-
-viewer.addEventListener('page-change', (e) => {
-  console.log(`Page ${e.detail.page} of ${e.detail.totalPages}`);
-});
 ```
+
+## Keyboard Navigation
+
+- `ArrowRight` / `PageDown` - Next page
+- `ArrowLeft` / `PageUp` - Previous page
+- `Ctrl/Cmd +` - Zoom in
+- `Ctrl/Cmd -` - Zoom out
+
+## Accessibility
+
+- Container is keyboard-focusable with `tabindex="0"`
+- Toolbar buttons have title attributes
+- Page input allows direct page navigation

package/docs/ai/components/permission-matrix.md

@@ -5,31 +5,36 @@ Role/permission grid with checkbox toggles for managing access control.
 ## Properties
 
 ```typescript
-roles: PermissionRole[] = [];        // { id, name, description? }
-permissions: Permission[] = [];      // { id, name, group?, description? }
-matrix: PermissionMatrix = {};       // { [roleId]: string[] } (permission IDs)
+roles: PermissionRole[] = [];        // attr: none (JS only)
+permissions: Permission[] = [];      // attr: none (JS only)
+matrix: PermissionMatrix = {};       // attr: none (JS only), { [roleId]: string[] }
 readonly: boolean = false;
 ```
 
+## Methods
+
+- `getMatrix()` - Returns deep copy of current matrix
+- `setMatrix(matrix: PermissionMatrix)` - Replace entire matrix
+- `hasPermission(roleId: string, permId: string)` - Check if role has permission
+
 ## Events
 
-- `permission-toggle` -> `{ roleId: string, permissionId: string, granted: boolean }`
-- `matrix-change` -> `{ matrix: PermissionMatrix }`
+- `permission-toggle` → `{ roleId: string, permissionId: string, granted: boolean }` - Checkbox toggled
+- `matrix-change` → `{ matrix: PermissionMatrix }` - Matrix updated
 
-## Methods
+## CSS Parts
 
-- `getMatrix()` - Returns deep copy of current matrix
-- `setMatrix(matrix)` - Replace entire matrix
-- `hasPermission(roleId, permId)` - Check if role has permission
+- `base` - Outer container
 
-## Usage
+## Basic Usage
 
 ```html
 <snice-permission-matrix id="pm"></snice-permission-matrix>
-<snice-permission-matrix id="pm-ro" readonly></snice-permission-matrix>
 ```
 
 ```typescript
+import 'snice/components/permission-matrix/snice-permission-matrix';
+
 pm.roles = [
   { id: 'admin', name: 'Admin', description: 'Full access' },
   { id: 'editor', name: 'Editor' },
@@ -46,28 +51,18 @@ pm.matrix = {
   editor: ['create', 'read', 'update'],
   viewer: ['read']
 };
-
-// Listen for changes
-pm.addEventListener('permission-toggle', (e) => {
-  console.log(e.detail.roleId, e.detail.permissionId, e.detail.granted);
-});
-
-// Query
-pm.hasPermission('admin', 'delete'); // true
-pm.getMatrix(); // returns deep copy
 ```
 
-## CSS Parts
+## Accessibility
 
-- `base` - Outer container
+- Table uses `role="grid"` with `aria-label`
+- Checkboxes have accessible labels (e.g., "Grant Create for Admin")
+- Readonly mode shows check/dash indicators instead of checkboxes
 
-## Features
+## Types
 
-- Rows = roles, columns = permissions
-- Checkbox toggles for editable mode
-- Check/dash indicators for readonly mode
-- Role descriptions shown inline
-- Permission descriptions in headers
-- Sticky first column and header row
-- Accessible ARIA labels on checkboxes
-- Deep-copy getMatrix() for safe reads
+```typescript
+interface PermissionRole { id: string; name: string; description?: string; }
+interface Permission { id: string; name: string; group?: string; description?: string; }
+type PermissionMatrix = { [roleId: string]: string[] };
+```