snice 3.1.0 → 3.3.0

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

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/empty-state.md

@@ -0,0 +1,72 @@
+# snice-empty-state
+
+Empty state placeholder for no data scenarios.
+
+## Properties
+
+```typescript
+size: 'small'|'medium'|'large' = 'medium';
+icon: string = '📭';
+title: string = 'No data';
+description: string = '';
+actionText: string = '';
+actionHref: string = '';
+```
+
+## Events
+
+- `action` - {emptyState}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-empty-state></snice-empty-state>
+
+<!-- Custom -->
+<snice-empty-state
+  icon="🔍"
+  title="No results found"
+  description="Try adjusting your search"
+></snice-empty-state>
+
+<!-- With action -->
+<snice-empty-state
+  title="No items yet"
+  description="Get started by creating your first item"
+  action-text="Create Item"
+></snice-empty-state>
+
+<!-- With link -->
+<snice-empty-state
+  title="Page not found"
+  action-text="Go Home"
+  action-href="/"
+></snice-empty-state>
+
+<!-- Sizes -->
+<snice-empty-state size="small"></snice-empty-state>
+<snice-empty-state size="medium"></snice-empty-state>
+<snice-empty-state size="large"></snice-empty-state>
+
+<!-- Events -->
+<snice-empty-state id="empty" action-text="Click"></snice-empty-state>
+<script>
+document.querySelector('#empty').addEventListener('@snice/empty-state-action', () => {
+  console.log('Action clicked');
+});
+</script>
+
+<!-- Custom content -->
+<snice-empty-state title="No data">
+  <div>Custom HTML content here</div>
+</snice-empty-state>
+```
+
+## Features
+
+- Customizable icon, title, description
+- Optional action button or link
+- 3 sizes
+- Slot for custom content
+- Accessible

package/docs/ai/components/file-upload.md

@@ -0,0 +1,93 @@
+# snice-file-upload
+
+File upload with drag-and-drop and preview.
+
+## Properties
+
+```typescript
+variant: 'outlined'|'filled' = 'outlined';
+size: 'small'|'medium'|'large' = 'medium';
+accept: string = '';
+multiple: boolean = false;
+disabled: boolean = false;
+required: boolean = false;
+invalid: boolean = false;
+label: string = '';
+helperText: string = '';
+errorText: string = '';
+maxSize: number = -1; // bytes
+maxFiles: number = -1;
+name: string = '';
+dragDrop: boolean = true;
+showPreview: boolean = true;
+files: FileList | null;
+```
+
+## Methods
+
+- `clear()` - Clear all files
+- `removeFile(index)` - Remove file by index
+
+## Events
+
+- `change` - {files, fileUpload}
+- `error` - {message, fileUpload}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-file-upload label="Upload File"></snice-file-upload>
+
+<!-- Multiple files -->
+<snice-file-upload multiple label="Upload Files"></snice-file-upload>
+
+<!-- File type restrictions -->
+<snice-file-upload accept="image/*" label="Images only"></snice-file-upload>
+<snice-file-upload accept=".pdf,.doc,.docx"></snice-file-upload>
+
+<!-- Size limit (5MB) -->
+<snice-file-upload max-size="5242880"></snice-file-upload>
+
+<!-- File count limit -->
+<snice-file-upload multiple max-files="5"></snice-file-upload>
+
+<!-- No drag-drop -->
+<snice-file-upload drag-drop="false"></snice-file-upload>
+
+<!-- No preview -->
+<snice-file-upload show-preview="false"></snice-file-upload>
+
+<!-- Variants -->
+<snice-file-upload variant="outlined"></snice-file-upload>
+<snice-file-upload variant="filled"></snice-file-upload>
+
+<!-- Sizes -->
+<snice-file-upload size="small"></snice-file-upload>
+<snice-file-upload size="medium"></snice-file-upload>
+<snice-file-upload size="large"></snice-file-upload>
+
+<!-- Events -->
+<snice-file-upload id="upload"></snice-file-upload>
+<script>
+const upload = document.querySelector('#upload');
+upload.addEventListener('@snice/file-upload-change', (e) => {
+  console.log('Files:', e.detail.files);
+});
+upload.addEventListener('@snice/file-upload-error', (e) => {
+  console.error('Error:', e.detail.message);
+});
+</script>
+```
+
+## Features
+
+- Form-associated custom element
+- Drag-and-drop support
+- Image preview
+- File type filtering
+- Size validation
+- File count limits
+- Multiple file selection
+- 2 variants, 3 sizes
+- Accessible

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/image.md

@@ -0,0 +1,60 @@
+# snice-image
+
+Flexible image component with variants and lazy loading.
+
+## Properties
+
+```typescript
+src: string = '';
+alt: string = '';
+fallback: string = '';
+variant: 'rounded'|'square'|'circle' = 'rounded';
+size: 'small'|'medium'|'large' = 'medium';
+lazy: boolean = true;
+fit: 'cover'|'contain'|'fill'|'none'|'scale-down' = 'cover';
+width: string = '';
+height: string = '';
+```
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-image src="image.jpg" alt="Description"></snice-image>
+
+<!-- Sizes -->
+<snice-image src="image.jpg" size="small"></snice-image>
+<snice-image src="image.jpg" size="medium"></snice-image>
+<snice-image src="image.jpg" size="large"></snice-image>
+
+<!-- Variants -->
+<snice-image src="image.jpg" variant="rounded"></snice-image>
+<snice-image src="image.jpg" variant="square"></snice-image>
+<snice-image src="image.jpg" variant="circle"></snice-image>
+
+<!-- Fit -->
+<snice-image src="image.jpg" fit="cover" width="200px" height="200px"></snice-image>
+<snice-image src="image.jpg" fit="contain" width="200px" height="200px"></snice-image>
+
+<!-- Fallback -->
+<snice-image src="image.jpg" fallback="placeholder.jpg"></snice-image>
+
+<!-- Custom dimensions -->
+<snice-image src="image.jpg" width="300px" height="200px"></snice-image>
+
+<!-- Lazy loading -->
+<snice-image src="image.jpg" lazy="false"></snice-image>
+
+<!-- Placeholder -->
+<snice-image size="medium" variant="circle"></snice-image>
+```
+
+## Features
+
+- 3 size presets (small: 48px, medium: 96px, large: 192px)
+- 3 shape variants (rounded, square, circle)
+- 5 object-fit options
+- Lazy loading (default on)
+- Fallback image support
+- Placeholder for missing images
+- Custom width/height

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