snice 2.5.4 → 3.1.0

package/dist/{types/symbols.d.ts → symbols.d.ts}

@@ -6,6 +6,8 @@ export declare const IS_ELEMENT_CLASS: symbol;
 export declare const CHANNEL_HANDLERS: symbol;
 export declare const READY_PROMISE: symbol;
 export declare const READY_RESOLVE: symbol;
+export declare const RENDERED_PROMISE: symbol;
+export declare const RENDERED_RESOLVE: symbol;
 export declare const CONTROLLER: symbol;
 export declare const INITIALIZED: symbol;
 export declare const ON_HANDLERS: symbol;
@@ -17,6 +19,7 @@ export declare const NATIVE_CONTROLLER: symbol;
 export declare const CLEANUP: symbol;
 export declare const PROPERTIES: symbol;
 export declare const PROPERTY_VALUES: symbol;
+export declare const PRE_INIT_PROPERTY_VALUES: symbol;
 export declare const PROPERTIES_INITIALIZED: symbol;
 export declare const PROPERTY_WATCHERS: symbol;
 export declare const EXPLICITLY_SET_PROPERTIES: symbol;
@@ -35,3 +38,22 @@ export declare const PART_TIMERS: symbol;
 export declare const MOVED_TIMERS: symbol;
 export declare const ADOPTED_TIMERS: symbol;
 export declare const DISPATCH_TIMERS: symbol;
+export declare const RENDER_METHOD: symbol;
+export declare const RENDER_OPTIONS: symbol;
+export declare const RENDER_INSTANCE: symbol;
+export declare const RENDER_SCHEDULED: symbol;
+export declare const RENDER_TIMERS: symbol;
+export declare const RENDER_CALLBACKS: symbol;
+export declare const STYLES_METHOD: symbol;
+export declare const STYLES_APPLIED: symbol;
+export declare const CONTEXT_HANDLER: symbol;
+export declare const CONTEXT_METHOD_NAME: symbol;
+export declare const NAVIGATION_CONTEXT_INSTANCE: symbol;
+export declare const REGISTERED_ELEMENTS: symbol;
+export declare const IS_UPDATING: symbol;
+export declare const CONTEXT_REGISTER: symbol;
+export declare const CONTEXT_UNREGISTER: symbol;
+export declare const CONTEXT_NOTIFY_ELEMENT: symbol;
+export declare const CONTEXT_OPTIONS: symbol;
+export declare const CONTEXT_TIMER: symbol;
+export declare const CONTEXT_CALLED: symbol;

package/dist/symbols.esm.js

@@ -1,6 +1,6 @@
 /*!
- * snice v2.5.3
- * Imperative TypeScript framework for building vanilla web components with decorators, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v3.0.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.
  */
@@ -36,6 +36,8 @@ const CHANNEL_HANDLERS = getSymbol('channel-handlers');
 // Internal element state symbols
 const READY_PROMISE = getSymbol('ready-promise');
 const READY_RESOLVE = getSymbol('ready-resolve');
+const RENDERED_PROMISE = getSymbol('rendered-promise');
+const RENDERED_RESOLVE = getSymbol('rendered-resolve');
 const CONTROLLER = getSymbol('controller');
 const INITIALIZED = getSymbol('initialized');
 // Event handler symbols
@@ -51,6 +53,7 @@ const CLEANUP = getSymbol('cleanup');
 // Property symbols
 const PROPERTIES = getSymbol('properties');
 const PROPERTY_VALUES = getSymbol('property-values');
+const PRE_INIT_PROPERTY_VALUES = getSymbol('pre-init-property-values');
 const PROPERTIES_INITIALIZED = getSymbol('properties-initialized');
 const PROPERTY_WATCHERS = getSymbol('property-watchers');
 const EXPLICITLY_SET_PROPERTIES = getSymbol('explicitly-set-properties');
@@ -75,6 +78,27 @@ const MOVED_TIMERS = getSymbol('moved-timers');
 const ADOPTED_TIMERS = getSymbol('adopted-timers');
 // Dispatch timing symbols
 const DISPATCH_TIMERS = getSymbol('dispatch-timers');
+// Render symbols (v3.0.0)
+const RENDER_METHOD = getSymbol('render-method');
+const RENDER_OPTIONS = getSymbol('render-options');
+const RENDER_INSTANCE = getSymbol('render-instance');
+const RENDER_SCHEDULED = getSymbol('render-scheduled');
+const RENDER_TIMERS = getSymbol('render-timers');
+const RENDER_CALLBACKS = getSymbol('render-callbacks');
+const STYLES_METHOD = getSymbol('styles-method');
+const STYLES_APPLIED = getSymbol('styles-applied');
+// Navigation context symbols
+const CONTEXT_HANDLER = getSymbol('context-handler');
+const CONTEXT_METHOD_NAME = getSymbol('context-method-name');
+const NAVIGATION_CONTEXT_INSTANCE = getSymbol('navigation-context-instance');
+const REGISTERED_ELEMENTS = getSymbol('registered-elements');
+const IS_UPDATING = getSymbol('is-updating');
+const CONTEXT_REGISTER = getSymbol('context-register');
+const CONTEXT_UNREGISTER = getSymbol('context-unregister');
+const CONTEXT_NOTIFY_ELEMENT = getSymbol('context-notify-element');
+const CONTEXT_OPTIONS = getSymbol('context-options');
+const CONTEXT_TIMER = getSymbol('context-timer');
+const CONTEXT_CALLED = getSymbol('context-called');
 
-export { ADOPTED_HANDLERS, ADOPTED_TIMERS, CHANNEL_HANDLERS, CLEANUP, CONTEXT_REQUEST_HANDLER, CONTROLLER, CONTROLLER_ID, CONTROLLER_KEY, CONTROLLER_NAME_KEY, CONTROLLER_OPERATIONS, CREATED_AT, CURRENT_PAGE_MARKER, DISPATCH_TIMERS, DISPOSE_HANDLERS, EXPLICITLY_SET_PROPERTIES, INITIALIZED, IS_CONTROLLER_CLASS, IS_CONTROLLER_INSTANCE, IS_ELEMENT_CLASS, MOVED_HANDLERS, MOVED_TIMERS, NATIVE_CONTROLLER, OBSERVERS, ON_HANDLERS, PAGE_TRANSITION, PARTS, PART_TIMERS, PROPERTIES, PROPERTIES_INITIALIZED, PROPERTY_VALUES, PROPERTY_WATCHERS, READY_HANDLERS, READY_PROMISE, READY_RESOLVE, ROUTER_CONTEXT, getSymbol };
+export { ADOPTED_HANDLERS, ADOPTED_TIMERS, CHANNEL_HANDLERS, CLEANUP, CONTEXT_CALLED, CONTEXT_HANDLER, CONTEXT_METHOD_NAME, CONTEXT_NOTIFY_ELEMENT, CONTEXT_OPTIONS, CONTEXT_REGISTER, CONTEXT_REQUEST_HANDLER, CONTEXT_TIMER, CONTEXT_UNREGISTER, CONTROLLER, CONTROLLER_ID, CONTROLLER_KEY, CONTROLLER_NAME_KEY, CONTROLLER_OPERATIONS, CREATED_AT, CURRENT_PAGE_MARKER, DISPATCH_TIMERS, DISPOSE_HANDLERS, EXPLICITLY_SET_PROPERTIES, INITIALIZED, IS_CONTROLLER_CLASS, IS_CONTROLLER_INSTANCE, IS_ELEMENT_CLASS, IS_UPDATING, MOVED_HANDLERS, MOVED_TIMERS, NATIVE_CONTROLLER, NAVIGATION_CONTEXT_INSTANCE, OBSERVERS, ON_HANDLERS, PAGE_TRANSITION, PARTS, PART_TIMERS, PRE_INIT_PROPERTY_VALUES, PROPERTIES, PROPERTIES_INITIALIZED, PROPERTY_VALUES, PROPERTY_WATCHERS, READY_HANDLERS, READY_PROMISE, READY_RESOLVE, REGISTERED_ELEMENTS, RENDERED_PROMISE, RENDERED_RESOLVE, RENDER_CALLBACKS, RENDER_INSTANCE, RENDER_METHOD, RENDER_OPTIONS, RENDER_SCHEDULED, RENDER_TIMERS, ROUTER_CONTEXT, STYLES_APPLIED, STYLES_METHOD, getSymbol };
 //# sourceMappingURL=symbols.esm.js.map

package/dist/symbols.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"symbols.esm.js","sources":["../src/global.ts","../src/symbols.ts"],"sourcesContent":[null,null],"names":[],"mappings":";;;;;;AAAA;AACA;AAKA;AACA,SAAS,mBAAmB,GAAA;AAC1B,IAAA,IAAI,CAAE,UAAkB,CAAC,KAAK,EAAE;QAC7B,UAAkB,CAAC,KAAK,GAAG;YAC1B,kBAAkB,EAAE,IAAI,GAAG,EAAE;AAC7B,YAAA,mBAAmB,EAAE,CAAC;YACtB,OAAO,EAAE,IAAI,GAAG;SACjB;IACH;IACA,OAAQ,UAAkB,CAAC,KAAK;AAClC;AAEA;AACO,MAAM,KAAK,GAAG,mBAAmB,EAAE;AAE1C;AACM,SAAU,SAAS,CAAC,IAAY,EAAA;IACpC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AAC5B,QAAA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACvC;IACA,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAE;AACjC;;AC3BA;AACA;MAMa,mBAAmB,GAAG,SAAS,CAAC,qBAAqB;MACrD,sBAAsB,GAAG,SAAS,CAAC,wBAAwB;MAC3D,gBAAgB,GAAG,SAAS,CAAC,kBAAkB;MAC/C,gBAAgB,GAAG,SAAS,CAAC,kBAAkB;AAE5D;MACa,aAAa,GAAG,SAAS,CAAC,eAAe;MACzC,aAAa,GAAG,SAAS,CAAC,eAAe;MACzC,UAAU,GAAG,SAAS,CAAC,YAAY;MACnC,WAAW,GAAG,SAAS,CAAC,aAAa;AAElD;MACa,WAAW,GAAG,SAAS,CAAC,aAAa;AAElD;MACa,cAAc,GAAG,SAAS,CAAC,gBAAgB;MAC3C,mBAAmB,GAAG,SAAS,CAAC,iBAAiB;MACjD,aAAa,GAAG,SAAS,CAAC,eAAe;MACzC,qBAAqB,GAAG,SAAS,CAAC,uBAAuB;MACzD,iBAAiB,GAAG,SAAS,CAAC,mBAAmB;AAE9D;MACa,OAAO,GAAG,SAAS,CAAC,SAAS;AAE1C;MACa,UAAU,GAAG,SAAS,CAAC,YAAY;MACnC,eAAe,GAAG,SAAS,CAAC,iBAAiB;MAC7C,sBAAsB,GAAG,SAAS,CAAC,wBAAwB;MAC3D,iBAAiB,GAAG,SAAS,CAAC,mBAAmB;MACjD,yBAAyB,GAAG,SAAS,CAAC,2BAA2B;AAE9E;MACa,cAAc,GAAG,SAAS,CAAC,gBAAgB;MAC3C,mBAAmB,GAAG,SAAS,CAAC,qBAAqB;MACrD,uBAAuB,GAAG,SAAS,CAAC,yBAAyB;MAC7D,eAAe,GAAG,SAAS,CAAC,iBAAiB;MAC7C,UAAU,GAAG,SAAS,CAAC,YAAY;AAEhD;MACa,cAAc,GAAG,SAAS,CAAC,gBAAgB;MAC3C,gBAAgB,GAAG,SAAS,CAAC,kBAAkB;MAC/C,cAAc,GAAG,SAAS,CAAC,gBAAgB;MAC3C,gBAAgB,GAAG,SAAS,CAAC,kBAAkB;AAE5D;MACa,SAAS,GAAG,SAAS,CAAC,WAAW;AAE9C;MACa,KAAK,GAAG,SAAS,CAAC,OAAO;MACzB,WAAW,GAAG,SAAS,CAAC,aAAa;AAElD;MACa,YAAY,GAAG,SAAS,CAAC,cAAc;MACvC,cAAc,GAAG,SAAS,CAAC,gBAAgB;AAExD;MACa,eAAe,GAAG,SAAS,CAAC,iBAAiB;;;;"}
+{"version":3,"file":"symbols.esm.js","sources":["../src/global.ts","../src/symbols.ts"],"sourcesContent":[null,null],"names":[],"mappings":"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"}

package/dist/template.d.ts

@@ -0,0 +1,100 @@
+/**
+ * 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;
+export declare const CSS_RESULT: unique symbol;
+/**
+ * Result of html`` tagged template
+ * Contains static strings and dynamic values for differential rendering
+ */
+export interface TemplateResult {
+    readonly _$litType$: typeof HTML_RESULT;
+    readonly strings: TemplateStringsArray;
+    readonly values: readonly any[];
+}
+/**
+ * Result of css`` tagged template
+ * Contains CSS text for style injection
+ */
+export interface CSSResult {
+    readonly _$litType$: typeof CSS_RESULT;
+    readonly cssText: string;
+    styleSheet?: CSSStyleSheet;
+}
+/**
+ * Tagged template function for creating HTML templates
+ *
+ * @example
+ * ```typescript
+ * html`<div class="card">
+ *   <h1>${this.title}</h1>
+ *   <button @click=${this.handleClick}>Click me</button>
+ * </div>`
+ * ```
+ */
+export declare function html(strings: TemplateStringsArray, ...values: any[]): TemplateResult;
+/**
+ * Tagged template function for creating CSS
+ *
+ * @example
+ * ```typescript
+ * css`:host {
+ *   display: block;
+ *   padding: 1rem;
+ * }`
+ * ```
+ */
+export declare function css(strings: TemplateStringsArray, ...values: any[]): CSSResult;
+/**
+ * Check if a value is a TemplateResult
+ */
+export declare function isTemplateResult(value: any): value is TemplateResult;
+/**
+ * Check if a value is a CSSResult
+ */
+export declare function isCSSResult(value: any): value is CSSResult;
+/**
+ * Type guard for primitive values
+ */
+export declare function isPrimitive(value: any): boolean;
+/**
+ * Sanitize HTML to prevent XSS
+ * Only allows safe HTML, escapes dangerous content
+ */
+export declare function sanitize(value: any): string;
+/**
+ * Nothing - represents no value (different from null/undefined)
+ * Used to remove content from templates
+ */
+export declare const nothing: unique symbol;
+/**
+ * Type for template values that represent "no content"
+ */
+export type Nothing = typeof nothing;
+declare const UNSAFE_HTML: unique symbol;
+/**
+ * Wrapper for raw HTML strings that should not be escaped
+ * WARNING: Only use with sanitized/trusted content to prevent XSS
+ */
+export interface UnsafeHTML {
+    readonly _$litType$: typeof UNSAFE_HTML;
+    readonly html: string;
+}
+/**
+ * Mark a string as raw HTML that should not be escaped
+ * WARNING: Only use with sanitized content - using user input can lead to XSS!
+ *
+ * @example
+ * ```typescript
+ * const htmlString = '<span class="bold">Hello</span>';
+ * html`<div>${unsafeHTML(htmlString)}</div>`
+ * ```
+ */
+export declare function unsafeHTML(html: string): UnsafeHTML;
+/**
+ * Check if a value is an UnsafeHTML wrapper
+ */
+export declare function isUnsafeHTML(value: any): value is UnsafeHTML;
+export {};

package/dist/transitions.cjs

@@ -0,0 +1,219 @@
+/*!
+ * snice v3.0.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.
+ */
+'use strict';
+
+/**
+ * Generic transition system for animating between elements
+ */
+/**
+ * Parse CSS property string into an object
+ */
+function parseStyles(styleString) {
+    const styles = {};
+    styleString.split(';').forEach(rule => {
+        const [prop, value] = rule.split(':').map(s => s.trim());
+        if (prop && value) {
+            styles[prop] = value;
+        }
+    });
+    return styles;
+}
+/**
+ * Perform a transition between two elements
+ */
+async function performTransition(container, oldElement, newElement, transition = {}) {
+    const outDuration = transition.outDuration || 300;
+    const inDuration = transition.inDuration || 300;
+    const mode = transition.mode || 'sequential';
+    // Default transitions
+    const outStyles = transition.out ? parseStyles(transition.out) : { opacity: '0' };
+    const inStartStyles = { opacity: '0' }; // Always start invisible
+    const inEndStyles = transition.in ? parseStyles(transition.in) : { opacity: '1' };
+    // Set container to relative positioning to allow absolute positioning
+    // Skip for layout elements to avoid jumpy transitions
+    const containerStyle = container.style;
+    const originalPosition = containerStyle.position;
+    const isLayoutElement = container.tagName.includes('-') && container.shadowRoot;
+    if (!isLayoutElement) {
+        containerStyle.position = 'relative';
+    }
+    // Check if elements are slotted (inside a layout)
+    const isSlottedTransition = oldElement.hasAttribute('slot') || newElement.hasAttribute('slot');
+    if (isSlottedTransition) {
+        // For slotted elements, use absolute with width/height for crossfade
+        oldElement.style.position = 'absolute';
+        oldElement.style.width = '100%';
+        oldElement.style.height = '100%';
+        oldElement.style.transition = `opacity ${outDuration}ms ease-in-out`;
+        newElement.style.position = 'absolute';
+        newElement.style.width = '100%';
+        newElement.style.height = '100%';
+        newElement.style.transition = `opacity ${inDuration}ms ease-in-out`;
+    }
+    else {
+        // Original absolute positioning for non-slotted elements
+        oldElement.style.position = 'absolute';
+        oldElement.style.top = '0';
+        oldElement.style.left = '0';
+        oldElement.style.width = '100%';
+        oldElement.style.transition = `all ${outDuration}ms ease-in-out`;
+        newElement.style.position = 'absolute';
+        newElement.style.top = '0';
+        newElement.style.left = '0';
+        newElement.style.width = '100%';
+    }
+    Object.assign(newElement.style, inStartStyles);
+    newElement.style.transition = `all ${inDuration}ms ease-in-out`;
+    // Add new element to container
+    container.appendChild(newElement);
+    // Force browser to calculate styles
+    void newElement.offsetHeight;
+    if (mode === 'simultaneous') {
+        // Start both transitions at once
+        Object.assign(oldElement.style, outStyles);
+        Object.assign(newElement.style, inEndStyles);
+        // Wait for both transitions to complete
+        await new Promise(resolve => setTimeout(resolve, Math.max(outDuration, inDuration)));
+    }
+    else {
+        // Sequential: transition out old, then transition in new
+        Object.assign(oldElement.style, outStyles);
+        await new Promise(resolve => setTimeout(resolve, outDuration));
+        Object.assign(newElement.style, inEndStyles);
+        await new Promise(resolve => setTimeout(resolve, inDuration));
+    }
+    // Cleanup
+    oldElement.remove();
+    if (isSlottedTransition) {
+        // Cleanup for slotted elements
+        newElement.style.position = '';
+        newElement.style.width = '';
+        newElement.style.height = '';
+        newElement.style.transition = '';
+    }
+    else {
+        // Cleanup for non-slotted elements
+        newElement.style.position = '';
+        newElement.style.top = '';
+        newElement.style.left = '';
+        newElement.style.width = '';
+        newElement.style.transition = '';
+    }
+    // Reset any transition styles
+    Object.keys({ ...inStartStyles, ...inEndStyles }).forEach(prop => {
+        newElement.style[prop] = '';
+    });
+    if (!isLayoutElement) {
+        containerStyle.position = originalPosition;
+    }
+}
+/**
+ * Predefined transitions
+ */
+// Fade transition
+const fadeTransition = {
+    name: 'fade',
+    outDuration: 200,
+    inDuration: 200,
+    out: 'opacity: 0',
+    in: 'opacity: 1',
+    mode: 'simultaneous'
+};
+// Slide transition (from left)
+const slideTransition = {
+    name: 'slide',
+    outDuration: 300,
+    inDuration: 300,
+    out: 'transform: translateX(-100%)',
+    in: 'transform: translateX(0)',
+    mode: 'sequential'
+};
+// Slide from right
+const slideRightTransition = {
+    name: 'slide-right',
+    outDuration: 300,
+    inDuration: 300,
+    out: 'transform: translateX(100%)',
+    in: 'transform: translateX(0)',
+    mode: 'sequential'
+};
+// Slide from top
+const slideUpTransition = {
+    name: 'slide-up',
+    outDuration: 300,
+    inDuration: 300,
+    out: 'transform: translateY(-100%)',
+    in: 'transform: translateY(0)',
+    mode: 'sequential'
+};
+// Slide from bottom
+const slideDownTransition = {
+    name: 'slide-down',
+    outDuration: 300,
+    inDuration: 300,
+    out: 'transform: translateY(100%)',
+    in: 'transform: translateY(0)',
+    mode: 'sequential'
+};
+// Scale transition
+const scaleTransition = {
+    name: 'scale',
+    outDuration: 250,
+    inDuration: 250,
+    out: 'transform: scale(0.9); opacity: 0',
+    in: 'transform: scale(1); opacity: 1',
+    mode: 'simultaneous'
+};
+// Rotate transition
+const rotateTransition = {
+    name: 'rotate',
+    outDuration: 400,
+    inDuration: 400,
+    out: 'transform: rotate(180deg) scale(0.5); opacity: 0',
+    in: 'transform: rotate(0) scale(1); opacity: 1',
+    mode: 'simultaneous'
+};
+// Flip transition
+const flipTransition = {
+    name: 'flip',
+    outDuration: 400,
+    inDuration: 400,
+    out: 'transform: rotateY(180deg); opacity: 0',
+    in: 'transform: rotateY(0); opacity: 1',
+    mode: 'sequential'
+};
+// Zoom transition
+const zoomTransition = {
+    name: 'zoom',
+    outDuration: 300,
+    inDuration: 300,
+    out: 'transform: scale(2); opacity: 0',
+    in: 'transform: scale(1); opacity: 1',
+    mode: 'simultaneous'
+};
+// None transition (instant swap)
+const noneTransition = {
+    name: 'none',
+    outDuration: 0,
+    inDuration: 0,
+    out: '',
+    in: '',
+    mode: 'simultaneous'
+};
+
+exports.fadeTransition = fadeTransition;
+exports.flipTransition = flipTransition;
+exports.noneTransition = noneTransition;
+exports.performTransition = performTransition;
+exports.rotateTransition = rotateTransition;
+exports.scaleTransition = scaleTransition;
+exports.slideDownTransition = slideDownTransition;
+exports.slideRightTransition = slideRightTransition;
+exports.slideTransition = slideTransition;
+exports.slideUpTransition = slideUpTransition;
+exports.zoomTransition = zoomTransition;
+//# sourceMappingURL=transitions.cjs.map

package/dist/transitions.esm.js

@@ -1,6 +1,6 @@
 /*!
- * snice v2.5.3
- * Imperative TypeScript framework for building vanilla web components with decorators, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v3.0.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/types/context.d.ts

@@ -0,0 +1,48 @@
+import { AppContext } from './app-context';
+import { NavContext } from './nav-context';
+import { Placard } from './placard';
+import { RouteParams } from './route-params';
+import { REGISTERED_ELEMENTS, IS_UPDATING, CONTEXT_REGISTER, CONTEXT_UNREGISTER, CONTEXT_NOTIFY_ELEMENT } from '../symbols';
+declare const REGISTERED_ELEMENTS_SET: unique symbol;
+/**
+ * Represents the bundled router state that can notify registered elements of changes
+ */
+export declare class Context {
+    [REGISTERED_ELEMENTS]: WeakMap<HTMLElement, string>;
+    [IS_UPDATING]: boolean;
+    /**
+     * Register an element to receive context updates
+     * @internal Used by @context decorator
+     */
+    [CONTEXT_REGISTER]: (element: HTMLElement, methodName: string) => void;
+    /**
+     * Unregister an element from receiving context updates
+     * @internal Used by @context decorator cleanup
+     */
+    [CONTEXT_UNREGISTER]: (element: HTMLElement) => void;
+    /**
+     * Notify a specific element of the current context state
+     * @internal Used by @context decorator
+     */
+    [CONTEXT_NOTIFY_ELEMENT]: (element: HTMLElement) => void;
+    private [REGISTERED_ELEMENTS_SET];
+    /**
+     * Unique immutable identifier for this context instance
+     */
+    readonly id: number;
+    /**
+     * Application context (theme, auth, config, etc.)
+     */
+    application: AppContext;
+    /**
+     * Navigation state
+     */
+    navigation: NavContext;
+    constructor(context?: AppContext, placards?: Placard[], currentRoute?: string, routeParams?: RouteParams);
+    /**
+     * Update the context and notify all registered elements
+     * Prevents infinite loops by tracking update state
+     */
+    update(context: AppContext, placards: Placard[], currentRoute: string, routeParams: RouteParams): void;
+}
+export {};

package/dist/types/element-options.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Options for configuring custom elements via the @element decorator
+ */
+export interface ElementOptions {
+    /**
+     * Whether this element is form-associated.
+     * Form-associated elements can participate in form submission and validation.
+     * When true, the element will have access to ElementInternals for form integration.
+     *
+     * @default false
+     *
+     * @example
+     * ```typescript
+     * @element('my-input', { formAssociated: true })
+     * class MyInput extends HTMLElement {
+     *   private internals!: ElementInternals;
+     *
+     *   constructor() {
+     *     super();
+     *     this.internals = this.attachInternals();
+     *   }
+     * }
+     * ```
+     */
+    formAssociated?: boolean;
+}

package/dist/types/index.d.ts

@@ -1,9 +1,25 @@
-export { element, layout, property, query, queryAll, watch, context, applyElementFunctionality, ready, dispose, moved, adopted, part } from './element';
-export type { Layout } from './element';
-export { Router } from './router';
-export { controller, useNativeElementControllers } from './controller';
-export { on, dispatch } from './events';
-export { observe } from './observe';
-export { request, respond } from './request-response';
-export { IS_CONTROLLER_INSTANCE, getSymbol } from './symbols';
-export * from './types';
+export * from './query-options';
+export * from './property-options';
+export * from './property-converter';
+export * from './snice-element';
+export * from './part-options';
+export * from './moved-options';
+export * from './adopted-options';
+export * from './element-options';
+export * from './simple-array';
+export * from './router-options';
+export * from './page-options';
+export * from './router-instance';
+export * from './on-options';
+export * from './dispatch-options';
+export * from './i-controller';
+export * from './transition';
+export * from './observe-options';
+export * from './request-options';
+export * from './respond-options';
+export * from './snice-global';
+export * from './placard';
+export * from './guard';
+export * from './route-params';
+export * from './app-context';
+export * from './context';

package/dist/types/nav-context.d.ts

@@ -0,0 +1,19 @@
+import { Placard } from './placard';
+import { RouteParams } from './route-params';
+/**
+ * Navigation context containing route state
+ */
+export interface NavContext {
+    /**
+     * All registered placards from pages
+     */
+    placards: Placard[];
+    /**
+     * Current route path
+     */
+    route: string;
+    /**
+     * Route parameters extracted from current route
+     */
+    params: RouteParams;
+}

package/dist/types/{types/on-options.d.ts → on-options.d.ts}

@@ -13,4 +13,6 @@ export interface OnOptions {
     debounce?: number;
     /** Throttle the handler by specified milliseconds */
     throttle?: number;
+    /** CSS selector to target specific elements within shadow root */
+    target?: string;
 }

package/dist/types/{types/placard.d.ts → placard.d.ts}

@@ -77,7 +77,6 @@ export interface Placard<T = any> {
     show?: boolean;
     /**
      * Guard functions that determine if the page should appear in navigation.
-     * Reuses the same guard system as route protection.
      * @example [isAuthenticated, hasAdminRole]
      */
     visibleOn?: Guard<T> | Guard<T>[];

package/docs/ai/README.md

@@ -0,0 +1,17 @@
+# AI-Optimized Documentation
+
+Token-efficient reference docs for AI assistants. Same content as human docs, minimal verbosity.
+
+**Format:**
+- Type signatures over prose
+- Bullet points over paragraphs
+- Code over explanations
+- No tutorials, pure reference
+
+**Files:**
+- `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
+
+Read these instead of `/docs/*.md` for faster context loading.