snice 3.10.5 → 4.0.0

package/dist/symbols.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v3.10.4
+ * snice v3.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/symbols.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v3.10.4
+ * snice v3.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/transitions.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v3.10.4
+ * snice v3.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/transitions.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v3.10.4
+ * snice v3.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/docs/ai/components/audio-recorder.md

@@ -43,12 +43,12 @@ interface AudioRecording {
 
 ## Events
 
-- `@snice/recorder-start` - Recording started
-- `@snice/recorder-stop` - Recording stopped
-- `@snice/recorder-pause` - Paused
-- `@snice/recorder-resume` - Resumed
-- `@snice/recorder-cancel` - Cancelled
-- `@snice/recorder-error` - Error
+- `recorder-start` - Recording started
+- `recorder-stop` - Recording stopped
+- `recorder-pause` - Paused
+- `recorder-resume` - Resumed
+- `recorder-cancel` - Cancelled
+- `recorder-error` - Error
 
 ## Usage
 

package/docs/ai/components/calendar.md

@@ -47,8 +47,8 @@ getEventsForDate(date: Date | string): CalendarEvent[]
 
 ## Events
 
-- `@snice/calendar-change` - Date selected (detail: { value, calendar })
-- `@snice/calendar-event-click` - Event clicked (detail: { event, calendar })
+- `calendar-change` - Date selected (detail: { value, calendar })
+- `calendar-event-click` - Event clicked (detail: { event, calendar })
 
 ## Usage
 

package/docs/ai/components/camera.md

@@ -12,7 +12,8 @@ controlsPosition: ControlsPosition = 'auto';
 showControls: boolean = true;
 width: number = 1280;
 height: number = 720;
-aspectRatio: string = '';  // '16:9', '4:3', '1:1', '21:9'
+aspectRatio: string = '';  // '16:9', '9:16', '4:3', '1:1', '21:9'
+objectFit: 'contain'|'cover' = 'contain';  // contain: full video, cover: fills frame (may crop)
 ```
 
 ## ControlsPosition
@@ -53,10 +54,10 @@ interface CapturedImage {
 
 ## Events
 
-- `@snice/camera-start` - Camera started (detail: { stream })
-- `@snice/camera-stop` - Camera stopped
-- `@snice/camera-capture` - Photo captured (detail: { image })
-- `@snice/camera-error` - Error occurred (detail: { error })
+- `camera-start` - Camera started (detail: { stream })
+- `camera-stop` - Camera stopped
+- `camera-capture` - Photo captured (detail: { image })
+- `camera-error` - Error occurred (detail: { error })
 
 ## Slots
 
@@ -96,6 +97,12 @@ interface CapturedImage {
 
 <!-- Square -->
 <snice-camera aspect-ratio="1:1" width="1080" height="1080"></snice-camera>
+
+<!-- Portrait mode with cover -->
+<snice-camera aspect-ratio="9:16" object-fit="cover" width="720" height="1280"></snice-camera>
+
+<!-- Cover mode (fills container, may crop) -->
+<snice-camera object-fit="cover"></snice-camera>
 ```
 
 ```javascript
@@ -107,7 +114,7 @@ const image = await camera.capture();
 await camera.switchCamera();
 
 // Events
-camera.addEventListener('@snice/camera-capture', (e) => {
+camera.addEventListener('camera-capture', (e) => {
   const img = e.detail.image;
   console.log(img.dataURL);
 });

package/docs/ai/components/carousel.md

@@ -23,7 +23,7 @@ spaceBetween: number = 0;
 
 ## Events
 
-- `@snice/carousel-slide-change` (detail: { activeIndex, previousIndex, carousel })
+- `carousel-slide-change` (detail: { activeIndex, previousIndex, carousel })
 
 ## Usage
 

package/docs/ai/components/color-picker.md

@@ -58,7 +58,7 @@ presets: string[] = [...];
 <snice-color-picker id="picker"></snice-color-picker>
 <script>
 const picker = document.querySelector('#picker');
-picker.addEventListener('@snice/color-picker-change', (e) => {
+picker.addEventListener('color-picker-change', (e) => {
   console.log('Color:', e.detail.value);
 });
 </script>

package/docs/ai/components/command-palette.md

@@ -45,11 +45,11 @@ interface CommandItem {
 
 ## Events
 
-- `@snice/command-palette-open` - Opened (detail: { palette })
-- `@snice/command-palette-close` - Closed (detail: { palette })
-- `@snice/command-select` - Command selected (detail: { command, palette })
-- `@snice/command-execute` - Command executed (detail: { command, palette })
-- `@snice/command-search` - Search changed (detail: { query, results, palette })
+- `command-palette-open` - Opened (detail: { palette })
+- `command-palette-close` - Closed (detail: { palette })
+- `command-select` - Command selected (detail: { command, palette })
+- `command-execute` - Command executed (detail: { command, palette })
+- `command-search` - Search changed (detail: { query, results, palette })
 
 ## Usage
 
@@ -97,7 +97,7 @@ interface CommandItem {
 
 <!-- Events -->
 <script>
-  palette.addEventListener('@snice/command-execute', (e) => {
+  palette.addEventListener('command-execute', (e) => {
     console.log('Executed:', e.detail.command.label);
   });
 </script>

package/docs/ai/components/draw.md

@@ -49,11 +49,11 @@ interface DrawStroke {
 
 ## 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
+- `draw-start` - Drawing started
+- `draw-end` - Stroke completed (detail: { stroke })
+- `draw-clear` - Canvas cleared
+- `draw-undo` - Undo performed
+- `draw-redo` - Redo performed
 
 ## Usage
 

package/docs/ai/components/drawer.md

@@ -28,8 +28,8 @@ toggle()  // Toggle drawer
 ## Events
 
 ```typescript
-'@snice/drawer-open'   // { drawer }
-'@snice/drawer-close'  // { drawer }
+'drawer-open'   // { drawer }
+'drawer-close'  // { drawer }
 ```
 
 ## Slots

package/docs/ai/components/empty-state.md

@@ -52,7 +52,7 @@ actionHref: string = '';
 <!-- Events -->
 <snice-empty-state id="empty" action-text="Click"></snice-empty-state>
 <script>
-document.querySelector('#empty').addEventListener('@snice/empty-state-action', () => {
+document.querySelector('#empty').addEventListener('empty-state-action', () => {
   console.log('Action clicked');
 });
 </script>

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

@@ -15,8 +15,8 @@ showProgress: boolean = true;
 allowPause: boolean = true;
 allowDelete: boolean = true;
 autoUpload: boolean = true;
-showAddButton: boolean = false; // show add button tile instead of drop zone
-hideAddButton: boolean = false; // hide default add button (show only custom actions)
+showDropzone: boolean = true; // show drop zone for drag & drop
+showAddButton: boolean = false; // show add button tile in gallery
 files: GalleryFile[]; // read-only
 ```
 
@@ -155,8 +155,9 @@ controller.attach?.(document.body);
   allow-pause="false"
 ></snice-file-gallery>
 
-<!-- Add button mode -->
+<!-- Add button mode (hide drop zone, show add tile) -->
 <snice-file-gallery
+  show-dropzone="false"
   show-add-button="true"
   max-files="6"
 ></snice-file-gallery>
@@ -171,7 +172,7 @@ const icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">...</sv
 const actionId = gallery.addCustomAction(icon, 'Camera');
 
 // Handle custom action
-gallery.addEventListener('@snice/custom-action-click', (e) => {
+gallery.addEventListener('custom-action-click', (e) => {
   if (e.detail.actionId === actionId) {
     // Handle camera action
     const file = capturePhoto(); // your implementation
@@ -180,10 +181,10 @@ gallery.addEventListener('@snice/custom-action-click', (e) => {
 });
 
 // Other events
-gallery.addEventListener('@snice/files-change', (e) => {
+gallery.addEventListener('files-change', (e) => {
   console.log('Files:', e.detail.files);
 });
-gallery.addEventListener('@snice/upload-complete', (e) => {
+gallery.addEventListener('upload-complete', (e) => {
   console.log('Complete:', e.detail.url);
 });
 

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

@@ -71,10 +71,10 @@ files: FileList | null;
 <snice-file-upload id="upload"></snice-file-upload>
 <script>
 const upload = document.querySelector('#upload');
-upload.addEventListener('@snice/file-upload-change', (e) => {
+upload.addEventListener('file-upload-change', (e) => {
   console.log('Files:', e.detail.files);
 });
-upload.addEventListener('@snice/file-upload-error', (e) => {
+upload.addEventListener('file-upload-error', (e) => {
   console.error('Error:', e.detail.message);
 });
 </script>

package/docs/ai/components/kanban.md

@@ -58,8 +58,8 @@ clearFilters(): void
 
 ## Events
 
-- `@snice/kanban-card-move` - Card moved (detail: { card, fromColumn, toColumn, kanban })
-- `@snice/kanban-card-click` - Card clicked (detail: { card, kanban })
+- `kanban-card-move` - Card moved (detail: { card, fromColumn, toColumn, kanban })
+- `kanban-card-click` - Card clicked (detail: { card, kanban })
 
 ## Usage
 
@@ -97,7 +97,7 @@ kanban.search('landing page');
 kanban.clearFilters();
 
 // Events
-kanban.addEventListener('@snice/kanban-card-move', (e) => {
+kanban.addEventListener('kanban-card-move', (e) => {
   console.log(`Moved ${e.detail.card.title}`);
 });
 ```

package/docs/ai/components/menu.md

@@ -25,8 +25,8 @@ distance: number = 4;
 
 ## Events
 
-- `@snice/menu-open` - Fired when menu opens (detail: { menu: SniceMenuElement })
-- `@snice/menu-close` - Fired when menu closes (detail: { menu: SniceMenuElement })
+- `menu-open` - Fired when menu opens (detail: { menu: SniceMenuElement })
+- `menu-close` - Fired when menu closes (detail: { menu: SniceMenuElement })
 
 ## Usage
 
@@ -95,7 +95,7 @@ selected: boolean = false;
 
 ### Events
 
-- `@snice/menu-item-select` - Fired when item is clicked (detail: { item: SniceMenuItemElement, value: string })
+- `menu-item-select` - Fired when item is clicked (detail: { item: SniceMenuItemElement, value: string })
 
 ## snice-menu-divider
 

package/docs/ai/components/modal.md

@@ -24,8 +24,8 @@ close()  // Close modal
 ## Events
 
 ```typescript
-'@snice/modal-open'   // { modal }
-'@snice/modal-close'  // { modal }
+'modal-open'   // { modal }
+'modal-close'  // { modal }
 ```
 
 ## Slots

package/docs/ai/components/music-player.md

@@ -56,16 +56,16 @@ interface Track {
 
 ## Events
 
-- `@snice/player-play` - Playback started
-- `@snice/player-pause` - Playback paused
-- `@snice/player-stop` - Playback stopped
-- `@snice/player-track-change` - Track changed
-- `@snice/player-track-ended` - Track ended
-- `@snice/player-shuffle-change` - Shuffle changed
-- `@snice/player-repeat-change` - Repeat mode changed
-- `@snice/player-volume-change` - Volume changed
+- `player-play` - Playback started
+- `player-pause` - Playback paused
+- `player-stop` - Playback stopped
+- `player-track-change` - Track changed
+- `player-track-ended` - Track ended
+- `player-shuffle-change` - Shuffle changed
+- `player-repeat-change` - Repeat mode changed
+- `player-volume-change` - Volume changed
 - `@snice/player-time-update` - Time updated
-- `@snice/player-error` - Error occurred
+- `player-error` - Error occurred
 
 ## Usage
 

package/docs/ai/components/pagination.md

@@ -29,7 +29,7 @@ lastPage()               // Last page
 ## Events
 
 ```typescript
-'@snice/pagination-change' // { page, previousPage }
+'pagination-change' // { page, previousPage }
 ```
 
 ## Usage
@@ -39,7 +39,7 @@ lastPage()               // Last page
 ```
 
 ```typescript
-pagination.addEventListener('@snice/pagination-change', (e) => {
+pagination.addEventListener('pagination-change', (e) => {
   console.log(e.detail.page);
 });
 ```

package/docs/ai/components/qr-reader.md

@@ -18,17 +18,17 @@ QR code scanner using device camera and ZXing WASM decoder.
 - `snap()` - Take snapshot (manual-snap mode)
 
 ### Events
-- `@snice/qr-scan` - detail: `{data: string, timestamp: number, reader: SniceQRReader}`
-- `@snice/qr-error` - detail: `{error: any, reader: SniceQRReader}`
+- `qr-scan` - detail: `{data: string, timestamp: number, reader: SniceQRReader}`
+- `qr-error` - detail: `{error: any, reader: SniceQRReader}`
 - `@snice/camera-ready` - detail: `{reader: SniceQRReader}`
-- `@snice/camera-error` - detail: `{error: any, reader: SniceQRReader}`
+- `camera-error` - detail: `{error: any, reader: SniceQRReader}`
 
 ## Usage
 
 ```html
 <snice-qr-reader auto-start></snice-qr-reader>
 <script>
-  reader.addEventListener('@snice/qr-scan', e => console.log(e.detail.data));
+  reader.addEventListener('qr-scan', e => console.log(e.detail.data));
 </script>
 ```
 

package/docs/ai/components/select.md

@@ -36,9 +36,9 @@ blur()                       // Blur and close
 
 **Events:**
 ```typescript
-'@snice/select-change'  // { value, option, select }
-'@snice/select-open'    // { select }
-'@snice/select-close'   // { select }
+'select-change'  // { value, option, select }
+'select-open'    // { select }
+'select-close'   // { select }
 ```
 
 ### snice-option (Option Item)
@@ -66,7 +66,7 @@ optionData  // { value, label, disabled, selected, icon }
 ```
 
 ```typescript
-select.addEventListener('@snice/select-change', (e) => {
+select.addEventListener('select-change', (e) => {
   console.log(e.detail.value);
 });
 

package/docs/ai/components/slider.md

@@ -67,7 +67,7 @@ vertical: boolean = false;
 <snice-slider id="slider"></snice-slider>
 <script>
 const slider = document.querySelector('#slider');
-slider.addEventListener('@snice/slider-change', (e) => {
+slider.addEventListener('slider-change', (e) => {
   console.log('Value:', e.detail.value);
 });
 </script>

package/docs/ai/components/split-pane.md

@@ -24,7 +24,7 @@ reset(): void
 
 ## Events
 
-- `@snice/resize` - Dispatched on resize (detail: { primarySize, secondarySize, splitPane })
+- `pane-resize` - Dispatched on resize (detail: { primarySize, secondarySize, splitPane })
 
 ## Usage
 

package/docs/ai/components/switch.md

@@ -29,7 +29,7 @@ click()       // Programmatic click
 ## Events
 
 ```typescript
-'@snice/switch-change' // { checked, switch }
+'switch-change' // { checked, switch }
 ```
 
 ## Usage
@@ -39,7 +39,7 @@ click()       // Programmatic click
 ```
 
 ```typescript
-switchEl.addEventListener('@snice/switch-change', (e) => {
+switchEl.addEventListener('switch-change', (e) => {
   console.log(e.detail.checked);
 });
 ```

package/docs/ai/components/tabs.md

@@ -23,7 +23,7 @@ getPanel(index: number)             // Get panel element
 
 **Events:**
 ```typescript
-'@snice/tab-change' // { index, oldIndex, tab, panel }
+'tab-change' // { index, oldIndex, tab, panel }
 ```
 
 ### snice-tab (Tab Button)
@@ -41,8 +41,8 @@ blur()    // Remove focus
 
 **Events:**
 ```typescript
-'@snice/tab-select' // { tab }
-'@snice/close'      // { tab }
+'tab-select' // { tab }
+'tab-close'      // { tab }
 ```
 
 ### snice-tab-panel (Content Panel)
@@ -68,7 +68,7 @@ transitionDuration: number = 300;          // Transition duration (ms)
 ```
 
 ```typescript
-tabs.addEventListener('@snice/tab-change', (e) => {
+tabs.addEventListener('tab-change', (e) => {
   console.log(e.detail.index);
 });
 

package/docs/ai/components/terminal.md

@@ -122,7 +122,7 @@ interface TerminalCommandResponse {
 const terminal = document.querySelector('snice-terminal');
 
 // Listen for commands (event pattern)
-terminal.addEventListener('@snice/terminal-command', (e) => {
+terminal.addEventListener('terminal-command', (e) => {
   console.log('Command:', e.detail.command, e.detail.args);
 });
 

package/docs/ai/components/timer.md

@@ -17,10 +17,10 @@
 - `getTime()`: Get current time in seconds
 
 ## Events
-- `@snice/timer-start`: { timer, time }
-- `@snice/timer-stop`: { timer, time }
-- `@snice/timer-reset`: { timer, time }
-- `@snice/timer-complete`: { timer } - Countdown reached 0
+- `timer-start`: { timer, time }
+- `timer-stop`: { timer, time }
+- `timer-reset`: { timer, time }
+- `timer-complete`: { timer } - Countdown reached 0
 
 ## Implementation
 - Uses requestAnimationFrame for smooth updates

package/docs/ai/components/tree.md

@@ -58,11 +58,11 @@ interface TreeNode {
 
 ## Events
 
-- `@snice/tree-node-expand` - Node expanded (detail: { nodeId, node, tree })
-- `@snice/tree-node-collapse` - Node collapsed (detail: { nodeId, node, tree })
-- `@snice/tree-node-select` - Node selected (detail: { nodeId, node, selectedNodes, tree })
-- `@snice/tree-node-check` - Node checked/unchecked (detail: { nodeId, node, checked, checkedNodes, tree })
-- `@snice/tree-node-lazy-load` - Lazy node expanded (detail: { nodeId, node, tree })
+- `tree-node-expand` - Node expanded (detail: { nodeId, node, tree })
+- `tree-node-collapse` - Node collapsed (detail: { nodeId, node, tree })
+- `tree-node-select` - Node selected (detail: { nodeId, node, selectedNodes, tree })
+- `tree-node-check` - Node checked/unchecked (detail: { nodeId, node, checked, checkedNodes, tree })
+- `tree-node-lazy-load` - Lazy node expanded (detail: { nodeId, node, tree })
 
 ## Usage
 
@@ -114,7 +114,7 @@ interface TreeNode {
 <snice-tree id="tree"></snice-tree>
 <script>
   const tree = document.getElementById('tree');
-  tree.addEventListener('@snice/tree-node-select', (e) => {
+  tree.addEventListener('tree-node-select', (e) => {
     console.log('Selected:', e.detail.node.label);
     console.log('All selected:', e.detail.selectedNodes.map(n => n.label));
   });
@@ -134,7 +134,7 @@ interface TreeNode {
     }
   ];
 
-  lazyTree.addEventListener('@snice/tree-node-lazy-load', async (e) => {
+  lazyTree.addEventListener('tree-node-lazy-load', async (e) => {
     const node = e.detail.node;
     const data = await fetch(`/api/nodes/${node.id}`).then(r => r.json());
 

package/docs/components/audio-recorder.md

@@ -11,7 +11,7 @@ Record audio with visualization, pause/resume, and playback.
   const recorder = document.getElementById('recorder');
 
   // Listen for stop event
-  recorder.addEventListener('@snice/recorder-stop', async () => {
+  recorder.addEventListener('recorder-stop', async () => {
     // Recording complete
   });
 </script>
@@ -67,12 +67,12 @@ Download recorded audio.
 
 ## Events
 
-- `@snice/recorder-start` - Recording started
-- `@snice/recorder-stop` - Recording stopped
-- `@snice/recorder-pause` - Recording paused
-- `@snice/recorder-resume` - Recording resumed
-- `@snice/recorder-cancel` - Recording cancelled
-- `@snice/recorder-error` - Error occurred
+- `recorder-start` - Recording started
+- `recorder-stop` - Recording stopped
+- `recorder-pause` - Recording paused
+- `recorder-resume` - Recording resumed
+- `recorder-cancel` - Recording cancelled
+- `recorder-error` - Error occurred
 
 ## Examples
 

package/docs/components/banner.md

@@ -37,13 +37,13 @@ Toggle banner visibility.
 
 ## Events
 
-### `@snice/banner-open`
+### `banner-open`
 Fired when banner opens.
 
-### `@snice/banner-close`
+### `banner-close`
 Fired when banner closes.
 
-### `@snice/banner-action`
+### `banner-action`
 Fired when action button is clicked.
 
 ## Examples
@@ -67,7 +67,7 @@ Fired when action button is clicked.
 ></snice-banner>
 
 <script>
-document.querySelector('snice-banner').addEventListener('@snice/banner-action', () => {
+document.querySelector('snice-banner').addEventListener('banner-action', () => {
   console.log('Update clicked');
 });
 </script>