snice 3.2.0 → 3.3.0

package/docs/ai/components/draw.md

@@ -0,0 +1,140 @@
+# snice-draw
+
+Canvas drawing with lazy-brush smoothing.
+
+## Properties
+
+```typescript
+width: number = 800;
+height: number = 600;
+tool: 'pen'|'eraser'|'line'|'rectangle'|'circle'|'text' = 'pen';
+color: string = '#000000';
+strokeWidth: number = 2;
+backgroundColor: string = '#ffffff';
+lazy: boolean = false;
+lazyRadius: number = 60;
+friction: number = 0.1;
+smoothing: number = 0.5;
+autoPolygon: boolean = false;
+polygonCurvePoints: number = 10;
+disabled: boolean = false;
+```
+
+## Methods
+
+```typescript
+clear(): void
+undo(): void
+redo(): 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
+loadImage(url: string): Promise<void>
+getStrokes(): DrawStroke[]
+setStrokes(strokes: DrawStroke[]): void
+```
+
+## DrawStroke
+
+```typescript
+interface DrawStroke {
+  id: string;
+  tool: DrawTool;
+  color: string;
+  width: number;
+  points: Point[];
+  timestamp: number;
+}
+```
+
+## Events
+
+- `@snice/draw-start` - Drawing started
+- `@snice/draw-end` - Stroke completed (detail: { stroke })
+- `@snice/draw-clear` - Canvas cleared
+- `@snice/draw-undo` - Undo performed
+- `@snice/draw-redo` - Redo performed
+
+## Usage
+
+```javascript
+// Change tool
+draw.tool = 'pen';
+draw.color = '#ff0000';
+draw.strokeWidth = 5;
+
+// Lazy brush
+draw.lazy = true;
+draw.lazyRadius = 60;
+draw.friction = 0.1;
+draw.smoothing = 0.5;
+
+// Auto-polygon
+draw.autoPolygon = true;
+draw.polygonCurvePoints = 15; // Smoother curves
+
+// Actions
+draw.clear();
+draw.undo();
+draw.redo();
+
+// Export
+const dataURL = draw.toDataURL('image/png');
+const blob = await draw.toBlob('image/png');
+draw.download('drawing.png');
+
+// Save/load
+const strokes = draw.getStrokes();
+draw.setStrokes(strokes);
+
+// Load image
+await draw.loadImage('bg.jpg');
+```
+
+```html
+<snice-draw
+  width="800"
+  height="600"
+  tool="pen"
+  color="#000000"
+  stroke-width="2"
+  lazy
+  lazy-radius="60"
+  friction="0.1"
+  auto-polygon
+  polygon-curve-points="10">
+</snice-draw>
+```
+
+## Lazy Brush
+
+Smooth drawing with cursor lag-following:
+- Brush follows cursor within radius
+- Creates organic, smooth lines
+- Reduces jitter and tremor
+- Configurable radius and smoothing
+
+## Auto-Polygon
+
+Automatically processes completed strokes into closed shapes:
+- Detects self-intersections and trims excess
+- Auto-closes open shapes with smooth curves
+- `autoPolygon: boolean` - Enable feature (default: false)
+- `polygonCurvePoints: number` - Curve smoothness 2-30 (default: 10)
+
+Processing happens on stroke completion (pointerup):
+1. If stroke crosses itself, trim at first intersection
+2. If start/end points >20px apart, connect with quadratic curve
+3. Higher curve points = smoother closing arc
+
+## Features
+
+- Canvas drawing
+- Lazy brush smoothing
+- Auto-polygon processing
+- Pen/eraser tools
+- Undo/redo
+- Export (PNG/JPEG/WebP)
+- Save/load strokes
+- Touch/stylus support
+- Keyboard shortcuts

package/docs/ai/components/gantt.md

@@ -0,0 +1,95 @@
+# snice-gantt
+
+Project timeline visualization.
+
+## Properties
+
+```typescript
+tasks: GanttTask[] = [];
+viewMode: 'day'|'week'|'month'|'year' = 'day';
+showToday: boolean = true;
+showProgress: boolean = true;
+showDependencies: boolean = false;
+minDate: Date | string = '';
+maxDate: Date | string = '';
+```
+
+## GanttTask
+
+```typescript
+interface GanttTask {
+  id: string | number;
+  name: string;
+  start: Date | string;
+  end: Date | string;
+  progress?: number; // 0-100
+  dependencies?: (string | number)[];
+  color?: string;
+  data?: any;
+}
+```
+
+## Methods
+
+```typescript
+getTask(id: string | number): GanttTask | undefined
+scrollToToday(): void
+scrollToTask(id: string | number): void
+```
+
+## Events
+
+- `@snice/gantt-task-click` - Task clicked (detail: { task, gantt })
+
+## Usage
+
+```javascript
+gantt.tasks = [
+  {
+    id: 1,
+    name: 'Planning',
+    start: new Date(2024, 0, 1),
+    end: new Date(2024, 0, 7),
+    progress: 100,
+    color: '#4caf50'
+  },
+  {
+    id: 2,
+    name: 'Development',
+    start: new Date(2024, 0, 8),
+    end: new Date(2024, 0, 31),
+    progress: 45,
+    color: '#ff9800',
+    dependencies: [1]
+  }
+];
+
+// View modes
+gantt.viewMode = 'week'; // day|week|month|year
+
+// Events
+gantt.addEventListener('@snice/gantt-task-click', (e) => {
+  console.log(e.detail.task);
+});
+```
+
+```html
+<snice-gantt
+  view-mode="month"
+  show-dependencies
+  min-date="2024-01-01"
+  max-date="2024-12-31">
+</snice-gantt>
+```
+
+## Features
+
+- Timeline visualization
+- Task bars with progress
+- Multiple view modes
+- Color-coded tasks
+- Task dependencies
+- Date range control
+- Today indicator
+- Click handling
+- Programmatic navigation

package/docs/ai/components/kanban.md

@@ -0,0 +1,102 @@
+# snice-kanban
+
+Drag-and-drop kanban board.
+
+## Properties
+
+```typescript
+columns: KanbanColumn[] = [];
+allowDragDrop: boolean = true;
+showCardCount: boolean = true;
+```
+
+## Interfaces
+
+```typescript
+interface KanbanColumn {
+  id: string | number;
+  title: string;
+  cards: KanbanCard[];
+  color?: string;
+  limit?: number;
+  collapsed?: boolean;
+}
+
+interface KanbanCard {
+  id: string | number;
+  title: string;
+  description?: string;
+  assignee?: string;
+  labels?: string[];
+  color?: string;
+  data?: any;
+}
+```
+
+## Methods
+
+```typescript
+addColumn(column: KanbanColumn): void
+removeColumn(id: string | number): void
+addCard(columnId: string | number, card: KanbanCard): void
+removeCard(cardId: string | number): void
+moveCard(cardId: string | number, targetColumnId: string | number): void
+getColumn(id: string | number): KanbanColumn | undefined
+getCard(id: string | number): KanbanCard | undefined
+```
+
+## Events
+
+- `@snice/kanban-card-move` - Card moved (detail: { card, fromColumn, toColumn, kanban })
+- `@snice/kanban-card-click` - Card clicked (detail: { card, kanban })
+
+## Usage
+
+```javascript
+kanban.columns = [
+  {
+    id: 'todo',
+    title: 'To Do',
+    color: '#f44336',
+    limit: 5,
+    cards: [
+      {
+        id: 1,
+        title: 'Task',
+        description: 'Details',
+        assignee: 'Alice',
+        labels: ['bug', 'high-priority'],
+        color: '#f44336'
+      }
+    ]
+  },
+  { id: 'done', title: 'Done', cards: [] }
+];
+
+// Add/remove
+kanban.addCard('todo', { id: 2, title: 'New Task' });
+kanban.moveCard(1, 'done');
+kanban.removeCard(2);
+
+// Events
+kanban.addEventListener('@snice/kanban-card-move', (e) => {
+  console.log(`Moved ${e.detail.card.title}`);
+});
+```
+
+```html
+<!-- Disable drag/drop -->
+<snice-kanban allow-drag-drop="false"></snice-kanban>
+```
+
+## Features
+
+- Drag and drop cards between columns
+- WIP limits per column
+- Card labels and assignees
+- Color-coded cards and columns
+- Card counts
+- Click handling
+- Programmatic card movement
+- Column management
+- Event dispatching

package/docs/ai/components/layout.md

@@ -0,0 +1,261 @@
+# snice-layout
+
+Collection of pre-built page layouts for common application patterns.
+
+## snice-layout
+
+Base layout with header navigation, main content area, and footer.
+
+### Slots
+
+- `brand` - Logo/brand in header
+- `page` - Main page content
+- `footer` - Footer content
+
+### Methods
+
+- `update(appContext, placards, currentRoute, routeParams)` - Update layout navigation
+
+### Usage
+
+```html
+<snice-layout>
+  <div slot="brand">
+    <h1>My App</h1>
+  </div>
+  <div slot="page">
+    <!-- Page content -->
+  </div>
+  <div slot="footer">
+    <p>© 2025 My Company</p>
+  </div>
+</snice-layout>
+```
+
+## snice-layout-centered
+
+Centered single-column layout with configurable width.
+
+### Properties
+
+```typescript
+width: 'sm'|'md'|'lg'|'xl' = 'md';
+```
+
+### Slots
+
+- `page` - Main content (centered)
+
+### Usage
+
+```html
+<snice-layout-centered width="lg">
+  <div slot="page">
+    <!-- Centered content -->
+  </div>
+</snice-layout-centered>
+```
+
+## snice-layout-split
+
+Two-column split layout.
+
+### Slots
+
+- `left` - Left column content
+- `right` - Right column content
+
+### Usage
+
+```html
+<snice-layout-split>
+  <div slot="left">
+    <!-- Left sidebar -->
+  </div>
+  <div slot="right">
+    <!-- Main content -->
+  </div>
+</snice-layout-split>
+```
+
+## snice-layout-sidebar
+
+Layout with collapsible sidebar and main content area.
+
+### Slots
+
+- `brand` - Logo/brand in sidebar header
+- `sidebar` - Sidebar navigation content
+- `page` - Main page content
+- `footer` - Footer content
+
+### Usage
+
+```html
+<snice-layout-sidebar>
+  <div slot="brand">
+    <h1>My App</h1>
+  </div>
+  <nav slot="sidebar">
+    <!-- Sidebar navigation -->
+  </nav>
+  <div slot="page">
+    <!-- Main content -->
+  </div>
+</snice-layout-sidebar>
+```
+
+## snice-layout-dashboard
+
+Dashboard layout with header, sidebar, and content grid.
+
+### Slots
+
+- `brand` - Logo/brand
+- `header` - Top header content
+- `sidebar` - Left sidebar navigation
+- `page` - Main dashboard content
+
+### Usage
+
+```html
+<snice-layout-dashboard>
+  <div slot="brand">
+    <h1>Dashboard</h1>
+  </div>
+  <div slot="header">
+    <!-- User menu, notifications -->
+  </div>
+  <nav slot="sidebar">
+    <!-- Nav items -->
+  </nav>
+  <div slot="page">
+    <!-- Dashboard widgets -->
+  </div>
+</snice-layout-dashboard>
+```
+
+## snice-layout-landing
+
+Landing page layout with hero section.
+
+### Slots
+
+- `header` - Top navigation
+- `hero` - Hero section
+- `page` - Main content
+- `footer` - Footer
+
+### Usage
+
+```html
+<snice-layout-landing>
+  <nav slot="header">
+    <!-- Top nav -->
+  </nav>
+  <div slot="hero">
+    <h1>Welcome</h1>
+  </div>
+  <div slot="page">
+    <!-- Features, content -->
+  </div>
+  <footer slot="footer">
+    <!-- Links, copyright -->
+  </footer>
+</snice-layout-landing>
+```
+
+## snice-layout-blog
+
+Blog-style layout with header, content, and sidebar.
+
+### Slots
+
+- `header` - Header navigation
+- `page` - Main blog content
+- `sidebar` - Blog sidebar (recent posts, categories)
+- `footer` - Footer
+
+### Usage
+
+```html
+<snice-layout-blog>
+  <nav slot="header">
+    <!-- Blog nav -->
+  </nav>
+  <article slot="page">
+    <!-- Blog post -->
+  </article>
+  <aside slot="sidebar">
+    <!-- Recent posts, categories -->
+  </aside>
+</snice-layout-blog>
+```
+
+## snice-layout-fullscreen
+
+Full viewport layout with no margins.
+
+### Slots
+
+- `page` - Fullscreen content
+
+### Usage
+
+```html
+<snice-layout-fullscreen>
+  <div slot="page">
+    <!-- Fullscreen app -->
+  </div>
+</snice-layout-fullscreen>
+```
+
+## snice-layout-minimal
+
+Minimal layout with just header and content.
+
+### Slots
+
+- `header` - Minimal header
+- `page` - Main content
+
+### Usage
+
+```html
+<snice-layout-minimal>
+  <div slot="header">
+    <h1>Simple App</h1>
+  </div>
+  <div slot="page">
+    <!-- Content -->
+  </div>
+</snice-layout-minimal>
+```
+
+## snice-layout-card
+
+Card-based centered layout for login/signup pages.
+
+### Slots
+
+- `page` - Card content
+
+### Usage
+
+```html
+<snice-layout-card>
+  <div slot="page">
+    <h2>Sign In</h2>
+    <!-- Login form -->
+  </div>
+</snice-layout-card>
+```
+
+## Features
+
+- 10 pre-built layout patterns
+- Responsive design
+- Slotted content areas
+- Navigation integration (where applicable)
+- Router integration support
+- Common UI patterns (dashboard, blog, landing, etc.)

package/docs/ai/components/list.md

@@ -0,0 +1,50 @@
+# snice-list
+
+List of items with optional selection, icons, descriptions.
+
+## Properties
+
+```typescript
+items: ListItem[] = [];
+selectionMode: 'single'|'multiple'|'none' = 'none';
+selectedItems: string[] = [];
+hoverable: boolean = true;
+dividers: boolean = false;
+dense: boolean = false;
+```
+
+## ListItem
+
+```typescript
+interface ListItem {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  iconImage?: string;
+  disabled?: boolean;
+  selected?: boolean;
+  data?: any;
+}
+```
+
+## Methods
+
+- `selectItem(id)`, `deselectItem(id)`, `toggleSelection(id)`
+- `getSelectedItems(): ListItem[]`
+
+## Events
+
+- `@snice/list-item-select` (detail: { item, selected, list })
+
+## Usage
+
+```html
+<snice-list id="list" selection-mode="single" dividers></snice-list>
+<script>
+  list.items = [
+    { id: '1', label: 'Item 1', description: 'First', icon: '📄' },
+    { id: '2', label: 'Item 2', description: 'Second', icon: '📄' }
+  ];
+</script>
+```

package/docs/ai/components/location.md

@@ -0,0 +1,75 @@
+# snice-location
+
+Display location information with addresses, coordinates, and maps.
+
+## Properties
+
+```typescript
+mode: 'full'|'compact'|'coordinates'|'address' = 'full';
+name: string = '';
+address: string = '';
+city: string = '';
+state: string = '';
+country: string = '';
+zipCode: string = '';
+latitude: number | string = '';
+longitude: number | string = '';
+showMap: boolean = false;
+showIcon: boolean = true;
+icon: string = '📍';
+iconImage: string = '';
+mapUrl: string = '';
+clickable: boolean = false;
+```
+
+## Methods
+
+```typescript
+getData(): LocationData
+getCoordinates(): { latitude: number; longitude: number } | null
+getFullAddress(): string
+openMap(): void
+```
+
+## Events
+
+- `location-click` - Dispatched when clicked (detail: LocationData)
+
+## Usage
+
+```html
+<snice-location
+  name="Central Park"
+  address="Central Park"
+  city="New York"
+  state="NY"
+  latitude="40.7829"
+  longitude="-73.9654"
+  clickable>
+</snice-location>
+
+<!-- With embedded map -->
+<snice-location
+  name="Times Square"
+  latitude="40.7580"
+  longitude="-73.9855"
+  show-map>
+</snice-location>
+
+<!-- Coordinates only -->
+<snice-location
+  latitude="40.7580"
+  longitude="-73.9855"
+  mode="coordinates">
+</snice-location>
+```
+
+## Features
+
+- Multiple display modes (full/compact/coordinates/address)
+- Embedded Google Maps support
+- Custom icons (emoji or image)
+- Clickable to open in maps app
+- Custom map URL support
+- Complete address formatting
+- Coordinate validation