snice 4.28.0 → 4.29.0

package/docs/ai/components/calendar.md

@@ -8,96 +8,63 @@ Calendar with date selection and event support.
 value: Date | string = new Date();
 view: 'month'|'week'|'day' = 'month';
 events: CalendarEvent[] = [];
-minDate: Date | string = '';
-maxDate: Date | string = '';
-disabledDates: (Date | string)[] = [];
-highlightToday: boolean = true;
-showWeekNumbers: boolean = false;
-firstDayOfWeek: number = 0; // 0=Sun, 1=Mon
+minDate: Date | string = '';           // attribute: min-date
+maxDate: Date | string = '';           // attribute: max-date
+disabledDates: (Date | string)[] = []; // attribute: disabled-dates
+highlightToday: boolean = true;        // attribute: highlight-today
+showWeekNumbers: boolean = false;      // attribute: show-week-numbers
+firstDayOfWeek: number = 0;            // attribute: first-day-of-week (0=Sun, 1=Mon)
 locale: string = 'en-US';
 ```
 
-## CalendarEvent
-
-```typescript
-interface CalendarEvent {
-  id: string | number;
-  title: string;
-  start: Date | string;
-  end?: Date | string;
-  color?: string;
-  data?: any;
-}
-```
-
 ## Methods
 
-```typescript
-goToToday(): void
-goToDate(date: Date | string): void
-previousMonth(): void
-nextMonth(): void
-previousWeek(): void
-nextWeek(): void
-previousDay(): void
-nextDay(): void
-getDisplayedMonth(): { month: number; year: number }
-getEventsForDate(date: Date | string): CalendarEvent[]
-```
+- `goToToday()` - Navigate to today
+- `goToDate(date: Date | string)` - Navigate to specific date
+- `previousMonth()` / `nextMonth()` - Navigate months
+- `previousWeek()` / `nextWeek()` - Navigate weeks
+- `previousDay()` / `nextDay()` - Navigate days
+- `getDisplayedMonth()` - Returns `{ month: number; year: number }`
+- `getEventsForDate(date: Date | string)` - Returns `CalendarEvent[]`
 
 ## Events
 
-- `calendar-change` - Date selected (detail: { value, calendar })
-- `calendar-event-click` - Event clicked (detail: { event, calendar })
+- `calendar-change` -> `{ value: Date, calendar: SniceCalendarElement }`
+- `calendar-event-click` -> `{ event: CalendarEvent, calendar: SniceCalendarElement }`
 
-## Usage
+## CSS Parts
 
-```html
-<snice-calendar></snice-calendar>
+- `base` - Main calendar container
+- `header` - Header with title and navigation buttons
+- `grid` - Day cells grid
 
-<!-- With events -->
+## Basic Usage
+
+```html
 <snice-calendar></snice-calendar>
 ```
 
 ```typescript
+import 'snice/components/calendar/snice-calendar';
+
 calendar.events = [
   { id: 1, title: 'Meeting', start: new Date(), color: '#2196f3' }
 ];
-```
 
-```html
-<!-- With restrictions -->
-<snice-calendar
-  min-date="2024-01-01"
-  max-date="2024-12-31"
-  first-day-of-week="1"
-  locale="fr-FR">
-</snice-calendar>
+calendar.addEventListener('calendar-change', (e) => {
+  console.log('Selected:', e.detail.value);
+});
 ```
 
-```typescript
-// Programmatic control
-calendar.goToToday();
-calendar.previousMonth();
-calendar.nextMonth();
-calendar.goToDate(new Date(2024, 5, 15));
-```
+## Keyboard Navigation
 
-**CSS Parts:**
-- `base` - Main calendar container
-- `header` - Header with title and navigation buttons
-- `grid` - Day cells grid
+- Arrow keys: navigate dates
+- Enter: select date
+- Tab: move between controls
+
+## Accessibility
 
-## Features
-
-- Month/week/day views
-- Event display with colors
-- Date restrictions (min/max/disabled)
-- Locale support
-- Week starting day configuration
-- Week numbers (optional)
-- Keyboard navigation
-- Event click handling
-- Programmatic navigation
-- Multi-event days
-- Today highlighting
+- Keyboard navigation with arrow keys
+- ARIA labels for dates and events
+- Screen reader friendly
+- Focus management

package/docs/ai/components/camera-annotate.md

@@ -1,88 +1,55 @@
 # snice-camera-annotate
 
-Image annotation component combining camera capture + freehand drawing + labeled annotations.
+Camera capture + freehand drawing + labeled annotations.
 
 ## Properties
 
 ```typescript
 mode: 'camera' | 'annotate' = 'camera';
-autoRotateColors: boolean = true;    // attribute: auto-rotate-colors
-showLabelsPanel: boolean = true;     // attribute: show-labels-panel
+autoRotateColors: boolean = true;     // attribute: auto-rotate-colors
+showLabelsPanel: boolean = true;      // attribute: show-labels-panel
 ```
 
 ## Methods
 
-```typescript
-capture(): Promise<void>;
-exportImage(options?: { includeLabels?: boolean }): string;
-exportAnnotations(): AnnotationData;
-importAnnotations(data: AnnotationData): void;
-clearAnnotations(): void;
-```
+- `capture(): Promise<void>` - Capture frame, switch to annotate mode
+- `exportImage(options?: { includeLabels?: boolean }): string` - Export as data URL
+- `exportAnnotations(): AnnotationData` - Export annotation data (JSON-serializable)
+- `importAnnotations(data: AnnotationData): void` - Load annotation data
+- `clearAnnotations(): void` - Remove all annotations
 
 ## Events
 
-```typescript
-'capture'           → { dataURL: string; width: number; height: number }
-'annotate'          → { annotation: Annotation }
-'annotation-change' → { annotations: Annotation[] }
-```
+- `capture` -> `{ dataURL: string, width: number, height: number }`
+- `annotate` -> `{ annotation: Annotation }`
+- `annotation-change` -> `{ annotations: Annotation[] }`
 
-## Types
+## CSS Parts
 
-```typescript
-interface Annotation {
-  id: string;
-  strokeId: string;
-  label: string;
-  color: string;
-  visible: boolean;
-  timestamp: number;
-}
-
-interface AnnotationData {
-  annotations: Annotation[];
-  strokes: AnnotationStroke[];
-  imageWidth: number;
-  imageHeight: number;
-}
-
-interface AnnotationStroke {
-  id: string;
-  color: string;
-  width: number;
-  points: { x: number; y: number }[];
-  timestamp: number;
-}
-```
+- `base` - Outer layout container
+- `canvas` - Canvas area (video + drawing surface)
+- `toolbar` - Toolbar (capture/retake, undo, clear, export)
+- `sidebar` - Sidebar (color palette + annotation labels)
 
-## Usage
+## Basic Usage
 
 ```html
-<!-- Default -->
 <snice-camera-annotate></snice-camera-annotate>
+```
 
-<!-- No sidebar -->
-<snice-camera-annotate show-labels-panel="false"></snice-camera-annotate>
+```typescript
+import 'snice/components/camera-annotate/snice-camera-annotate';
 
-<!-- Manual color selection -->
-<snice-camera-annotate auto-rotate-colors="false"></snice-camera-annotate>
+// Save/load annotations
+const data = annotator.exportAnnotations();
+annotator.importAnnotations(data);
+
+// Export image
+const url = annotator.exportImage({ includeLabels: true });
 ```
 
-**CSS Parts:**
-- `base` - Outer layout container div
-- `canvas` - Canvas area containing video and drawing surface
-- `toolbar` - Toolbar with capture/retake, undo, clear, export buttons
-- `sidebar` - Sidebar panel with color palette and annotation labels
-
-## Features
-
-- Camera capture → freehand draw → label workflow
-- 12-color preset palette with auto-rotation
-- Sidebar labels linked to drawn shapes
-- Hover label highlights shape, dims others (opacity 0.2 + grayscale)
-- Show/hide individual and bulk annotations
-- Export image with/without rendered labels
-- Save/load annotation data (JSON)
-- Undo last stroke
-- Adjustable stroke width
+## Accessibility
+
+- Color swatches have title attributes
+- Annotation toggles have descriptive titles
+- Sidebar scrolls independently

package/docs/ai/components/camera.md

@@ -5,150 +5,68 @@ Live camera feed with built-in mobile-style controls.
 ## Properties
 
 ```typescript
-autoStart: boolean = true;
-facingMode: 'user'|'environment' = 'user';
+autoStart: boolean = true;                    // attribute: auto-start
+facingMode: 'user'|'environment' = 'user';    // attribute: facing-mode
 mirror: boolean = true;
-controlsPosition: ControlsPosition = 'auto';
-showControls: boolean = true;
+controlsPosition: ControlsPosition = 'auto';  // attribute: controls-position
+showControls: boolean = true;                  // attribute: show-controls
 width: number = 1280;
 height: number = 720;
-aspectRatio: string = 'auto';  // 'auto' (fills space), '16:9', '9:16', '4:3', '1:1', '21:9'
-objectFit: 'contain'|'cover' = 'cover';  // cover: fills frame (may crop), contain: full video (may letterbox)
-```
-
-## ControlsPosition
-
-```typescript
-type ControlsPosition =
-  | 'auto'                    // Auto-detect (bottom-right portrait, right landscape)
-  | 'bottom' | 'right' | 'left' | 'top'     // Edge positions
-  | 'bottom-left' | 'bottom-right'          // Corner positions
-  | 'top-left' | 'top-right';
+aspectRatio: string = 'auto';                  // attribute: aspect-ratio — 'auto','16:9','9:16','4:3','1:1','21:9'
+objectFit: 'contain'|'cover' = 'cover';        // attribute: object-fit
 ```
 
 ## Methods
 
-```typescript
-start(): Promise<void>
-stop(): void
-capture(): Promise<CapturedImage>
-switchCamera(): Promise<void>
-isActive(): boolean
-getStream(): MediaStream | null
-enterFullscreen(): void
-exitFullscreen(): void
-toggleFullscreen(): void
-```
-
-## CapturedImage
-
-```typescript
-interface CapturedImage {
-  dataURL: string;
-  blob: Blob;
-  width: number;
-  height: number;
-  timestamp: number;
-}
-```
+- `start(): Promise<void>` - Start camera feed
+- `stop(): void` - Stop camera
+- `capture(): Promise<CapturedImage>` - Capture frame (`{ dataURL, blob, width, height, timestamp }`)
+- `switchCamera(): Promise<void>` - Toggle front/back
+- `isActive(): boolean` - Check if running
+- `getStream(): MediaStream | null` - Get stream
+- `enterFullscreen()` / `exitFullscreen()` / `toggleFullscreen()` - Fullscreen control
 
 ## Events
 
-- `camera-start` - Camera started (detail: { stream })
-- `camera-stop` - Camera stopped
-- `camera-capture` - Photo captured (detail: { image })
-- `camera-error` - Error occurred (detail: { error })
+- `camera-start` -> `{ stream: MediaStream }`
+- `camera-stop` -> (no detail)
+- `camera-capture` -> `{ image: CapturedImage }`
+- `camera-error` -> `{ error: Error }`
 
 ## Slots
 
 - `controls` - Custom controls overlay (full viewport, positioned absolutely)
 
-## Usage
-
-```html
-<!-- Zero config -->
-<snice-camera></snice-camera>
-
-<!-- Custom position -->
-<snice-camera controls-position="bottom-left"></snice-camera>
-
-<!-- Back camera -->
-<snice-camera facing-mode="environment"></snice-camera>
-
-<!-- Custom controls overlay -->
-<snice-camera>
-  <div slot="controls" style="position: absolute; top: 10px; left: 10px;">
-    LIVE
-  </div>
-</snice-camera>
-
-<!-- Hide built-in controls, use only custom -->
-<snice-camera show-controls="false">
-  <div slot="controls" style="position: absolute; bottom: 20px; right: 20px;">
-    <button onclick="this.closest('snice-camera').capture()">📷</button>
-  </div>
-</snice-camera>
+## CSS Custom Properties
 
-<!-- 4K resolution -->
-<snice-camera width="3840" height="2160"></snice-camera>
+- `--snice-camera-bg` - Background (default: `rgb(0 0 0)`)
+- `--snice-camera-overlay` - Controls gradient overlay
+- `--snice-camera-controls-color` - Controls icon/text color
+- `--snice-camera-btn-bg` / `--snice-camera-btn-hover-bg` - Button backgrounds
+- `--snice-camera-capture-bg` / `--snice-camera-capture-color` / `--snice-camera-capture-hover-bg` - Capture button
+- `--snice-camera-flash-color` - Flash overlay
+- `--snice-camera-status-bg` - Status badge
 
-<!-- 16:9 aspect ratio -->
-<snice-camera aspect-ratio="16:9"></snice-camera>
+## CSS Parts
 
-<!-- Square -->
-<snice-camera aspect-ratio="1:1" width="1080" height="1080"></snice-camera>
+- `base` - Outer camera container
+- `controls` - Built-in control buttons area
 
-<!-- Portrait mode with cover -->
-<snice-camera aspect-ratio="9:16" object-fit="cover" width="720" height="1280"></snice-camera>
+## Basic Usage
 
-<!-- Cover mode (fills container, may crop) -->
-<snice-camera object-fit="cover"></snice-camera>
+```html
+<snice-camera></snice-camera>
 ```
 
-```javascript
-// Capture photo
+```typescript
+import 'snice/components/camera/snice-camera';
+
 const image = await camera.capture();
 // { dataURL, blob, width, height, timestamp }
-
-// Switch camera
-await camera.switchCamera();
-
-// Events
-camera.addEventListener('camera-capture', (e) => {
-  const img = e.detail.image;
-  console.log(img.dataURL);
-});
-
-// Fullscreen
-camera.toggleFullscreen();
 ```
 
-**CSS Parts:**
-- `base` - Outer camera container div
-- `controls` - Built-in control buttons area (capture, switch camera)
-
-## CSS Custom Properties
+## Accessibility
 
-- `--snice-camera-bg` - Camera background (default: `rgb(0 0 0)`)
-- `--snice-camera-overlay` - Controls gradient overlay (default: `rgb(0 0 0 / 0.5)`)
-- `--snice-camera-controls-color` - Controls icon/text color (default: `rgb(255 255 255)`)
-- `--snice-camera-btn-bg` - Button background (default: `rgb(0 0 0 / 0.4)`)
-- `--snice-camera-btn-hover-bg` - Button hover background (default: `rgb(0 0 0 / 0.6)`)
-- `--snice-camera-capture-bg` - Capture button background (default: `rgb(255 255 255 / 0.95)`)
-- `--snice-camera-capture-color` - Capture button icon color (default: `rgb(51 51 51)`)
-- `--snice-camera-capture-hover-bg` - Capture button hover (default: `rgb(255 255 255)`)
-- `--snice-camera-flash-color` - Flash overlay color (default: `rgb(255 255 255)`)
-- `--snice-camera-status-bg` - Status badge background (default: `rgb(0 0 0 / 0.7)`)
-
-## Features
-
-- Auto-starts on load (default)
-- Built-in mobile-style controls (Material Design icons)
-- 720p HD quality (1280x720 hardcoded)
-- Switch camera button (auto-hides if only one camera)
-- Capture button with camera icon
-- Auto-detect orientation for control positioning
-- Corner and edge control positioning
-- Mirror mode for front camera
-- Slotted custom controls overlay
-- Requires HTTPS
+- Keyboard navigation for controls
+- Visual feedback for capture
+- Error messaging

package/docs/ai/components/candlestick.md

@@ -5,76 +5,56 @@ SVG-based OHLC candlestick chart for financial data visualization.
 ## Properties
 
 ```typescript
-data: CandleData[] = [];              // {date, open, high, low, close, volume?}
-showVolume: boolean = false;           // Show volume bars below chart
-showGrid: boolean = true;             // Show horizontal grid lines
-showCrosshair: boolean = true;        // Show crosshair on hover
-bullishColor: string = '';            // Custom bullish (close >= open) color
-bearishColor: string = '';            // Custom bearish (close < open) color
-timeFormat: 'auto'|'date'|'time'|'datetime'|'month'|'year' = 'auto';
-yAxisFormat: 'number'|'currency'|'percent' = 'number';
-zoomEnabled: boolean = true;          // Enable scroll zoom and drag pan
-animation: boolean = true;            // Animate candle appearance
-```
-
-## Types
-
-```typescript
-interface CandleData {
-  date: string | number | Date;
-  open: number;
-  high: number;
-  low: number;
-  close: number;
-  volume?: number;
-}
+data: CandleData[] = [];                // {date, open, high, low, close, volume?}
+showVolume: boolean = false;            // attribute: show-volume
+showGrid: boolean = true;              // attribute: show-grid
+showCrosshair: boolean = true;         // attribute: show-crosshair
+bullishColor: string = '';             // attribute: bullish-color
+bearishColor: string = '';             // attribute: bearish-color
+timeFormat: 'auto'|'date'|'time'|'datetime'|'month'|'year' = 'auto'; // attribute: time-format
+yAxisFormat: 'number'|'currency'|'percent' = 'number'; // attribute: y-axis-format
+zoomEnabled: boolean = true;           // attribute: zoom-enabled
+animation: boolean = true;
 ```
 
 ## Methods
 
-- `resetZoom()` — reset zoom to show all data
-- `zoomTo(startIndex: number, endIndex: number)` — zoom to index range
+- `resetZoom()` - Reset zoom to show all data
+- `zoomTo(startIndex: number, endIndex: number)` - Zoom to index range
 
 ## Events
 
-- `candle-click` → `{ candle: CandleData; index: number }` — candle clicked
-- `candle-hover` → `{ candle: CandleData; index: number }` — candle hovered
-- `crosshair-move` → `{ price: number; date: string; x: number; y: number }` — crosshair moved
+- `candle-click` -> `{ candle: CandleData, index: number }`
+- `candle-hover` -> `{ candle: CandleData, index: number }`
+- `crosshair-move` -> `{ price: number, date: string, x: number, y: number }`
+
+## CSS Custom Properties
+
+- `--snice-candlestick-bullish` - Bullish candle color (default: green)
+- `--snice-candlestick-bearish` - Bearish candle color (default: red)
+
+## CSS Parts
+
+- `base` - Outer chart container
+- `canvas` - SVG chart element
+- `tooltip` - OHLC tooltip overlay
 
-## Usage
+## Basic Usage
 
 ```html
 <snice-candlestick show-volume></snice-candlestick>
 ```
 
 ```typescript
+import 'snice/components/candlestick/snice-candlestick';
+
 chart.data = [
   { date: '2024-01-01', open: 100, high: 110, low: 95, close: 105, volume: 500000 },
   { date: '2024-01-02', open: 105, high: 115, low: 100, close: 98, volume: 600000 },
 ];
 ```
 
-## Features
-
-- SVG candlestick bodies with wicks (high/low shadows)
-- Green bullish / red bearish coloring (customizable)
-- Optional volume bars below price chart
-- Horizontal grid lines
-- Y-axis price labels (number/currency/percent)
-- X-axis date labels with smart formatting
-- Crosshair with price/date readout
-- OHLC + volume tooltip on hover
-- Scroll to zoom, drag to pan
-- Responsive via ResizeObserver
-- Entrance animation with staggered delays
-- Accessible: role="img" with aria-label
-
-**CSS Parts:**
-- `base` - Outer chart container div
-- `canvas` - SVG element containing the candlestick chart
-- `tooltip` - OHLC tooltip overlay div
-
-## CSS Custom Properties
+## Accessibility
 
-- `--snice-candlestick-bullish` — bullish candle color (default: green)
-- `--snice-candlestick-bearish` — bearish candle color (default: red)
+- SVG: role="img" with aria-label
+- WCAG AA contrast for default colors

package/docs/ai/components/card.md

@@ -1,6 +1,6 @@
 # snice-card
 
-Container for grouped content.
+Container for grouped content with variants, slots, and interactive states.
 
 ## Properties
 
@@ -12,17 +12,17 @@ selected: boolean = false;
 disabled: boolean = false;
 ```
 
+## Events
+
+- `card-click` -> `{ selected: boolean }`
+
 ## Slots
 
 - `(default)` - Card body content
+- `image` - Image at top of card
 - `header` - Card header
-- `image` - Card image (top of card)
 - `footer` - Card footer
 
-## Events
-
-- `card-click` → `{ selected: boolean }`
-
 ## CSS Parts
 
 - `base` - Outer card container
@@ -30,36 +30,26 @@ disabled: boolean = false;
 - `body` - Card body section
 - `footer` - Card footer section
 
-## Usage
+## Basic Usage
 
 ```html
-<!-- Basic -->
 <snice-card>
-  <p>Card content</p>
-</snice-card>
-
-<!-- With header and footer -->
-<snice-card>
-  <div slot="header">Card Title</div>
+  <div slot="header">Title</div>
   <p>Card body content</p>
-  <div slot="footer">
-    <button>Action</button>
-  </div>
+  <div slot="footer"><button>Action</button></div>
 </snice-card>
+```
 
-<!-- Variants -->
-<snice-card variant="elevated">Elevated (shadow)</snice-card>
-<snice-card variant="bordered">Bordered</snice-card>
-<snice-card variant="flat">Flat</snice-card>
-
-<!-- Sizes -->
-<snice-card size="small">Small padding</snice-card>
-<snice-card size="medium">Medium padding</snice-card>
-<snice-card size="large">Large padding</snice-card>
+```typescript
+import 'snice/components/card/snice-card';
 
-<!-- Interactive -->
-<snice-card clickable>Click me</snice-card>
-<snice-card clickable selected>Selected</snice-card>
-<snice-card clickable disabled>Disabled</snice-card>
+card.addEventListener('card-click', (e) => {
+  console.log('Selected:', e.detail.selected);
+});
 ```
 
+## Accessibility
+
+- Clickable cards are keyboard accessible
+- ARIA roles and states for interactive cards
+- Clear focus indicators