snice 3.1.0 → 3.2.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.1.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.1.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.1.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.1.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/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/color-display.md

@@ -0,0 +1,48 @@
+# snice-color-display
+
+Displays colors with swatch and label.
+
+## Properties
+
+```typescript
+value: string = '';
+format: 'hex'|'rgb'|'hsl' = 'hex';
+showSwatch: boolean = true;
+showLabel: boolean = true;
+swatchSize: 'small'|'medium'|'large' = 'medium';
+label: string = '';
+```
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-color-display value="#3b82f6"></snice-color-display>
+
+<!-- Formats -->
+<snice-color-display value="#ff0000" format="hex"></snice-color-display>
+<snice-color-display value="#ff0000" format="rgb"></snice-color-display>
+<snice-color-display value="#ff0000" format="hsl"></snice-color-display>
+
+<!-- Sizes -->
+<snice-color-display value="#10b981" swatch-size="small"></snice-color-display>
+<snice-color-display value="#10b981" swatch-size="medium"></snice-color-display>
+<snice-color-display value="#10b981" swatch-size="large"></snice-color-display>
+
+<!-- Custom label -->
+<snice-color-display value="#ef4444" label="Error Red"></snice-color-display>
+
+<!-- Swatch only -->
+<snice-color-display value="#3b82f6" show-label="false"></snice-color-display>
+
+<!-- Label only -->
+<snice-color-display value="#3b82f6" show-swatch="false"></snice-color-display>
+```
+
+## Features
+
+- Auto-converts hex to RGB/HSL
+- 3 swatch sizes (16px, 24px, 32px)
+- Custom labels supported
+- Swatch and label toggle
+- Monospace font for color values

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

@@ -0,0 +1,75 @@
+# snice-color-picker
+
+Color picker with format conversion and presets.
+
+## Properties
+
+```typescript
+value: string = '#000000';
+format: 'hex'|'rgb'|'hsl' = 'hex';
+size: 'small'|'medium'|'large' = 'medium';
+label: string = '';
+helperText: string = '';
+errorText: string = '';
+disabled: boolean = false;
+required: boolean = false;
+invalid: boolean = false;
+name: string = '';
+showInput: boolean = true;
+showPresets: boolean = false;
+presets: string[] = [...];
+```
+
+## Methods
+
+- `focus()` - Focus picker
+- `blur()` - Blur picker
+
+## Events
+
+- `input` - {value, colorPicker}
+- `change` - {value, colorPicker}
+- `focus` - {colorPicker}
+- `blur` - {colorPicker}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-color-picker label="Color" value="#ff0000"></snice-color-picker>
+
+<!-- Formats -->
+<snice-color-picker format="hex"></snice-color-picker>
+<snice-color-picker format="rgb"></snice-color-picker>
+<snice-color-picker format="hsl"></snice-color-picker>
+
+<!-- With presets -->
+<snice-color-picker show-presets></snice-color-picker>
+
+<!-- No input -->
+<snice-color-picker show-input="false"></snice-color-picker>
+
+<!-- Sizes -->
+<snice-color-picker size="small"></snice-color-picker>
+<snice-color-picker size="medium"></snice-color-picker>
+<snice-color-picker size="large"></snice-color-picker>
+
+<!-- Events -->
+<snice-color-picker id="picker"></snice-color-picker>
+<script>
+const picker = document.querySelector('#picker');
+picker.addEventListener('@snice/color-picker-change', (e) => {
+  console.log('Color:', e.detail.value);
+});
+</script>
+```
+
+## Features
+
+- Form-associated custom element
+- Native color picker integration
+- 3 color formats (hex, rgb, hsl)
+- Format conversion
+- Color presets
+- 3 sizes
+- Accessible

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/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