snice 3.1.0 → 3.3.0

package/dist/parts.d.ts

@@ -1,7 +1,3 @@
-/**
- * Simplified lit-html-style template system
- * Based on lit-html's approach but simplified
- */
 import { TemplateResult } from './template';
 /**
  * A prepared template ready for rendering
@@ -12,13 +8,12 @@ declare class Template {
     constructor(result: TemplateResult, element: HTMLTemplateElement, attrNamesForParts: string[]);
 }
 interface TemplatePart {
-    type: 'node' | 'attribute' | 'property' | 'boolean-attribute' | 'event' | 'if' | 'case';
+    type: 'node' | 'attribute' | 'property' | 'boolean-attribute' | 'event' | 'conditional-if' | 'conditional-case';
     index: number;
     name?: string;
     element?: Element;
     startNode?: Comment;
     endNode?: Comment;
-    caseElement?: Element;
     attrStrings?: string[];
 }
 /**
@@ -28,6 +23,8 @@ export declare class TemplateInstance {
     template: Template;
     parts: Part[];
     fragment: DocumentFragment | null;
+    private conditionalParts;
+    private regularParts;
     constructor(result: TemplateResult);
     renderFragment(): DocumentFragment;
     render(values: readonly any[]): DocumentFragment;
@@ -100,6 +97,7 @@ export declare class EventPart extends Part {
     private listener;
     private value;
     private keyFilter;
+    private host;
     constructor(element: Element, eventName: string);
     commit(value: any): void;
     clear(): void;
@@ -129,29 +127,28 @@ export declare function parseKeyboardFilter(spec: string): KeyboardFilter;
  */
 export declare function matchesKeyboardFilter(event: KeyboardEvent, filter: KeyboardFilter): boolean;
 /**
- * IfPart handles <if> conditional rendering
- * Uses document fragments to actually remove/insert nodes from the DOM
- * instead of just hiding them with CSS
+ * ConditionalIfPart handles <if> conditional rendering
+ * Removes/inserts DOM nodes based on condition
  */
-export declare class IfPart extends Part {
+export declare class ConditionalIfPart extends Part {
     private ifElement;
     private value;
     private fragment;
-    private childNodes;
     constructor(ifElement: Element);
     commit(value: any): void;
     clear(): void;
 }
 /**
- * CasePart handles <case>/<when>/<default> conditional rendering
- * Uses document fragments to remove/insert <when> and <default> children
+ * ConditionalCasePart handles <case>/<when>/<default> conditional rendering
+ * Removes/inserts matching branch based on value
  */
-export declare class CasePart extends Part {
+export declare class ConditionalCasePart extends Part {
     private caseElement;
     private value;
-    private childrenList;
+    private childrenMap;
     private fragments;
-    private attachedChildren;
+    private defaultChild;
+    private currentChild;
     constructor(caseElement: Element);
     commit(value: any): void;
     clear(): void;

package/dist/symbols.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v3.0.0
+ * snice v3.2.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.0.0
+ * snice v3.2.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/template.d.ts

@@ -1,6 +1,5 @@
 /**
  * Template system for Snice v3.0.0
- * Inspired by lit-html but custom implementation
  * Provides html`` and css`` tagged template processors with differential rendering
  */
 export declare const HTML_RESULT: unique symbol;

package/dist/transitions.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v3.0.0
+ * snice v3.2.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.0.0
+ * snice v3.2.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/README.md

@@ -12,6 +12,15 @@ Token-efficient reference docs for AI assistants. Same content as human docs, mi
 - `api.md` - Complete API reference
 - `patterns.md` - Common usage patterns
 - `architecture.md` - System design
-- `components/*.md` - Component reference, if asked to build using a component
+- `components/*.md` - Component reference (DO NOT read all upfront - read only as needed)
 
 Read these instead of `/docs/*.md` for faster context loading.
+
+## Available Components
+
+**IMPORTANT:** Do NOT read all component docs. Only read a component's doc when you need to use or reference it.
+
+**Implemented Components:**
+- accordion, accordion-item, alert, avatar, badge, banner, breadcrumbs, button, card, checkbox, chip, color-display, color-picker, date-picker, divider, drawer, empty-state, file-upload, image, input, login, modal, nav, progress, radio, select, skeleton, slider, spinner, switch, table, tabs, tab, textarea, timeline, tooltip
+
+**To use a component:** Read `docs/ai/components/{component-name}.md` only when needed.

package/docs/ai/components/actions.md

@@ -0,0 +1,81 @@
+# snice-actions
+
+Action button group with overflow menu.
+
+## Properties
+
+```typescript
+actions: ActionButton[] = [];
+size: 'small'|'medium'|'large' = 'medium';
+variant: 'text'|'outlined'|'filled' = 'text';
+showLabels: boolean = true;
+maxVisible: number = 3;
+moreLabel: string = 'More';
+moreIcon: string = '⋯';
+```
+
+## ActionButton Interface
+
+```typescript
+interface ActionButton {
+  id: string;
+  label?: string;
+  icon?: string;
+  iconImage?: string;
+  variant?: ActionButtonVariant;
+  disabled?: boolean;
+  danger?: boolean;
+  tooltip?: string;
+  action?: () => void | Promise<void>;
+  href?: string;
+  target?: string;
+  data?: any;
+}
+```
+
+## Methods
+
+```typescript
+triggerAction(id: string): void
+getAction(id: string): ActionButton | undefined
+```
+
+## Events
+
+- `@snice/action-trigger` - Dispatched when action triggered (detail: { action, actionsElement })
+
+## Usage
+
+```javascript
+actions.actions = [
+  { id: 'edit', label: 'Edit', icon: '✏️' },
+  { id: 'delete', label: 'Delete', icon: '🗑️', danger: true }
+];
+```
+
+```html
+<!-- Icon only -->
+<snice-actions show-labels="false"></snice-actions>
+
+<!-- With overflow (max 3 visible) -->
+<snice-actions max-visible="3"></snice-actions>
+
+<!-- Outlined variant -->
+<snice-actions variant="outlined"></snice-actions>
+
+<!-- Small size -->
+<snice-actions size="small"></snice-actions>
+```
+
+## Features
+
+- Multiple button variants (text/outlined/filled)
+- Icon-only mode
+- Overflow menu for many actions
+- Danger styling for destructive actions
+- Link support (href/target)
+- Async action callbacks
+- Per-action variant override
+- Disabled state
+- Custom tooltips
+- Programmatic triggering

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

@@ -0,0 +1,97 @@
+# snice-audio-recorder
+
+Audio recording with visualization and playback.
+
+## Properties
+
+```typescript
+autoStart: boolean = false;
+format: 'audio/webm'|'audio/ogg'|'audio/mp4'|'audio/wav' = 'audio/webm';
+bitrate: number = 128000;
+showControls: boolean = true;
+showVisualizer: boolean = true;
+maxDuration: number = 0;
+showTimer: boolean = true;
+```
+
+## Methods
+
+```typescript
+start(): Promise<void>
+stop(): Promise<AudioRecording>
+pause(): void
+resume(): void
+cancel(): void
+getState(): 'inactive'|'recording'|'paused'
+getDuration(): number
+isRecording(): boolean
+download(filename?: string): void
+```
+
+## AudioRecording
+
+```typescript
+interface AudioRecording {
+  blob: Blob;
+  url: string;
+  duration: number;
+  size: number;
+  format: string;
+  timestamp: number;
+}
+```
+
+## 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
+
+## Usage
+
+```javascript
+// Start
+await recorder.start();
+
+// Stop and get recording
+const recording = await recorder.stop();
+// { blob, url, duration, size, format, timestamp }
+
+// Pause/resume
+recorder.pause();
+recorder.resume();
+
+// Cancel
+recorder.cancel();
+
+// Download
+recorder.download('recording.webm');
+
+// Upload
+const formData = new FormData();
+formData.append('audio', recording.blob);
+await fetch('/upload', { method: 'POST', body: formData });
+```
+
+```html
+<snice-audio-recorder
+  auto-start
+  format="audio/mp4"
+  bitrate="256000"
+  max-duration="60">
+</snice-audio-recorder>
+```
+
+## Features
+
+- MediaRecorder API
+- Real-time visualizer
+- Pause/resume
+- Timer
+- Multiple formats
+- Playback
+- Download
+- Requires HTTPS

package/docs/ai/components/banner.md

@@ -0,0 +1,84 @@
+# snice-banner
+
+Fixed position notification banner.
+
+## Properties
+
+```typescript
+variant: 'info'|'success'|'warning'|'error' = 'info';
+position: 'top'|'bottom' = 'top';
+message: string = '';
+dismissible: boolean = true;
+icon: string = '';
+actionText: string = '';
+open: boolean = false;
+```
+
+## Methods
+
+- `show()` - Show banner
+- `hide()` - Hide banner
+- `toggle()` - Toggle banner
+
+## Events
+
+- `open` - {banner}
+- `close` - {banner}
+- `action` - {banner}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-banner message="This is an info message" open></snice-banner>
+
+<!-- Variants -->
+<snice-banner variant="info" message="Info"></snice-banner>
+<snice-banner variant="success" message="Success"></snice-banner>
+<snice-banner variant="warning" message="Warning"></snice-banner>
+<snice-banner variant="error" message="Error"></snice-banner>
+
+<!-- Position -->
+<snice-banner position="top" message="Top banner" open></snice-banner>
+<snice-banner position="bottom" message="Bottom banner" open></snice-banner>
+
+<!-- With action -->
+<snice-banner
+  message="Update available"
+  action-text="Update Now"
+  open
+></snice-banner>
+
+<!-- Not dismissible -->
+<snice-banner
+  message="Important notice"
+  dismissible="false"
+  open
+></snice-banner>
+
+<!-- Custom icon -->
+<snice-banner
+  icon="🎉"
+  message="Celebration!"
+  open
+></snice-banner>
+
+<!-- API -->
+<snice-banner id="banner" message="Hello"></snice-banner>
+<script>
+const banner = document.querySelector('#banner');
+banner.show();
+banner.hide();
+banner.toggle();
+</script>
+```
+
+## Features
+
+- 4 variants (info, success, warning, error)
+- Top or bottom positioning
+- Dismissible with close button
+- Optional action button
+- Smooth slide animation
+- Fixed positioning
+- Accessible (role=alert)

package/docs/ai/components/calendar.md

@@ -0,0 +1,95 @@
+# snice-calendar
+
+Calendar with date selection and event support.
+
+## Properties
+
+```typescript
+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
+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[]
+```
+
+## Events
+
+- `@snice/calendar-change` - Date selected (detail: { value, calendar })
+- `@snice/calendar-event-click` - Event clicked (detail: { event, calendar })
+
+## Usage
+
+```html
+<snice-calendar></snice-calendar>
+
+<!-- With events -->
+<snice-calendar id="cal"></snice-calendar>
+<script>
+cal.events = [
+  { id: 1, title: 'Meeting', start: new Date(), color: '#2196f3' }
+];
+</script>
+
+<!-- With restrictions -->
+<snice-calendar
+  min-date="2024-01-01"
+  max-date="2024-12-31"
+  first-day-of-week="1"
+  locale="fr-FR">
+</snice-calendar>
+
+<!-- Programmatic control -->
+<script>
+calendar.goToToday();
+calendar.previousMonth();
+calendar.nextMonth();
+calendar.goToDate(new Date(2024, 5, 15));
+</script>
+```
+
+## 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

package/docs/ai/components/camera.md

@@ -0,0 +1,130 @@
+# snice-camera
+
+Live camera feed with built-in mobile-style controls.
+
+## Properties
+
+```typescript
+autoStart: boolean = true;
+facingMode: 'user'|'environment' = 'user';
+mirror: boolean = true;
+controlsPosition: ControlsPosition = 'auto';
+showControls: boolean = true;
+width: number = 1280;
+height: number = 720;
+aspectRatio: string = '';  // '16:9', '4:3', '1:1', '21:9'
+```
+
+## 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';
+```
+
+## 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;
+}
+```
+
+## 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 })
+
+## 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>
+
+<!-- 4K resolution -->
+<snice-camera width="3840" height="2160"></snice-camera>
+
+<!-- 16:9 aspect ratio -->
+<snice-camera aspect-ratio="16:9"></snice-camera>
+
+<!-- Square -->
+<snice-camera aspect-ratio="1:1" width="1080" height="1080"></snice-camera>
+```
+
+```javascript
+// Capture photo
+const image = await camera.capture();
+// { dataURL, blob, width, height, timestamp }
+
+// Switch camera
+await camera.switchCamera();
+
+// Events
+camera.addEventListener('@snice/camera-capture', (e) => {
+  const img = e.detail.image;
+  console.log(img.dataURL);
+});
+
+// Fullscreen
+camera.toggleFullscreen();
+```
+
+## 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

package/docs/ai/components/carousel.md

@@ -0,0 +1,49 @@
+# snice-carousel
+
+Image/content carousel with autoplay, loop, navigation.
+
+## Properties
+
+```typescript
+activeIndex: number = 0;
+autoplay: boolean = false;
+autoplayInterval: number = 3000;
+autoplayDirection: 'forward'|'backward' = 'forward';
+loop: boolean = true;
+showControls: boolean = true;
+showIndicators: boolean = true;
+slidesPerView: number = 1;
+spaceBetween: number = 0;
+```
+
+## Methods
+
+- `next()`, `prev()`, `goToSlide(index)`
+- `play()`, `pause()`
+
+## Events
+
+- `@snice/carousel-slide-change` (detail: { activeIndex, previousIndex, carousel })
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-carousel>
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+</snice-carousel>
+
+<!-- Autoplay -->
+<snice-carousel autoplay autoplay-interval="2000">
+  <div>Auto 1</div>
+  <div>Auto 2</div>
+</snice-carousel>
+
+<!-- Multiple slides -->
+<snice-carousel slides-per-view="3" space-between="20">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</snice-carousel>
+```