@miurajs/miura-render 0.0.0 → 0.1.1

package/dist/src/directives/animate.directive.d.ts

@@ -0,0 +1,42 @@
+import { BaseDirective } from './directive';
+interface AnimationOptions {
+    trigger?: 'click' | 'hover' | 'visible' | 'custom';
+    animation?: string;
+    duration?: string | number;
+    delay?: string | number;
+    easing?: string;
+    threshold?: number;
+    onStart?: () => void;
+    onEnd?: () => void;
+    onCancel?: () => void;
+    enter?: string;
+    exit?: string;
+    onEnter?: () => void;
+    onExit?: () => void;
+    onComplete?: () => void;
+}
+export declare class AnimateDirective extends BaseDirective {
+    private options;
+    private isAnimating;
+    private animationId;
+    private intersectionObserver;
+    private eventListeners;
+    mount(element: Element): void;
+    private setupTriggers;
+    private addEventListener;
+    private setupIntersectionObserver;
+    private handleClick;
+    private handleHover;
+    private playAnimation;
+    private applyAnimation;
+    private getDuration;
+    private getDelay;
+    private addAnimationStyles;
+    update(options: AnimationOptions): void;
+    private cleanup;
+    unmount(): void;
+    play(): void;
+    stop(): void;
+}
+export {};
+//# sourceMappingURL=animate.directive.d.ts.map

package/dist/src/directives/animate.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.directive.d.ts","sourceRoot":"","sources":["../../../src/directives/animate.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C,UAAU,gBAAgB;IAEtB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAGtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,qBAAa,gBAAiB,SAAQ,aAAa;IAC/C,OAAO,CAAC,OAAO,CAAwB;IACvC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,oBAAoB,CAAqC;IACjE,OAAO,CAAC,cAAc,CAA0E;IAEhG,KAAK,CAAC,OAAO,EAAE,OAAO;IAetB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,yBAAyB;IAmBjC,OAAO,CAAC,WAAW,CAGjB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,aAAa;IA8BrB,OAAO,CAAC,cAAc;IAqEtB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,kBAAkB;IAwI1B,MAAM,CAAC,OAAO,EAAE,gBAAgB;IAUhC,OAAO,CAAC,OAAO;IAcf,OAAO;IAWP,IAAI;IAMJ,IAAI;CAWP"}

package/dist/src/directives/animate.directive.js

@@ -0,0 +1,349 @@
+import { BaseDirective } from './directive';
+import { debugLog } from '../utils/debug';
+export class AnimateDirective extends BaseDirective {
+    options = {};
+    isAnimating = false;
+    animationId = null;
+    intersectionObserver = null;
+    eventListeners = [];
+    mount(element) {
+        debugLog('animate', 'Mounting animate directive');
+        this.options = {
+            trigger: 'click',
+            duration: '0.3s',
+            easing: 'ease-out',
+            threshold: 0.1,
+            ...this.options
+        };
+        this.setupTriggers(element);
+        this.addAnimationStyles();
+    }
+    setupTriggers(element) {
+        if (element instanceof HTMLElement) {
+            switch (this.options.trigger) {
+                case 'click':
+                    this.addEventListener(element, 'click', this.handleClick.bind(this));
+                    break;
+                case 'hover':
+                    this.addEventListener(element, 'mouseenter', this.handleHover.bind(this));
+                    break;
+                case 'visible':
+                    this.setupIntersectionObserver(element);
+                    break;
+                case 'custom':
+                    // Custom trigger - no automatic setup
+                    break;
+            }
+        }
+    }
+    addEventListener(element, event, handler) {
+        element.addEventListener(event, handler);
+        this.eventListeners.push({ element, event, handler });
+    }
+    setupIntersectionObserver(element) {
+        if ('IntersectionObserver' in window) {
+            this.intersectionObserver = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        this.playAnimation(element);
+                    }
+                });
+            }, {
+                threshold: this.options.threshold,
+                rootMargin: '50px'
+            });
+            this.intersectionObserver.observe(element);
+        }
+    }
+    handleClick = (event) => {
+        event.preventDefault();
+        this.playAnimation(event.target);
+    };
+    handleHover = (event) => {
+        this.playAnimation(event.target);
+    };
+    playAnimation(element) {
+        if (this.isAnimating || !element)
+            return;
+        debugLog('animate', 'Playing animation:', this.options.animation);
+        this.isAnimating = true;
+        this.options.onStart?.();
+        if (element instanceof HTMLElement) {
+            const animationType = this.options.animation || 'fadeIn';
+            const duration = this.getDuration();
+            const delay = this.getDelay();
+            // Apply animation
+            this.applyAnimation(element, animationType, duration, delay);
+            // Set up completion callback
+            const handleAnimationEnd = () => {
+                element.removeEventListener('animationend', handleAnimationEnd);
+                element.removeEventListener('transitionend', handleAnimationEnd);
+                this.isAnimating = false;
+                this.options.onEnd?.();
+                debugLog('animate', 'Animation completed');
+            };
+            element.addEventListener('animationend', handleAnimationEnd);
+            element.addEventListener('transitionend', handleAnimationEnd);
+        }
+    }
+    applyAnimation(element, animationType, duration, delay) {
+        // Clear any existing animations and transitions to prevent conflicts
+        element.style.animation = '';
+        element.style.transition = '';
+        element.style.transform = '';
+        element.style.opacity = '';
+        // Force a reflow to ensure styles are cleared
+        element.offsetHeight;
+        switch (animationType) {
+            case 'bounce':
+                element.style.animation = `bounce ${duration} ${delay} ease-in-out`;
+                break;
+            case 'fadeIn':
+                element.style.opacity = '0';
+                element.style.animation = `fadeIn ${duration} ${delay} ease-out`;
+                break;
+            case 'fadeOut':
+                element.style.animation = `fadeOut ${duration} ${delay} ease-in`;
+                break;
+            case 'slideInLeft':
+                element.style.transform = 'translate3d(-100%, 0, 0)';
+                element.style.opacity = '0';
+                element.style.animation = `slideInLeft ${duration} ${delay} ease-out`;
+                break;
+            case 'slideInRight':
+                element.style.transform = 'translate3d(100%, 0, 0)';
+                element.style.opacity = '0';
+                element.style.animation = `slideInRight ${duration} ${delay} ease-out`;
+                break;
+            case 'slideInUp':
+                element.style.transform = 'translate3d(0, 100%, 0)';
+                element.style.opacity = '0';
+                element.style.animation = `slideInUp ${duration} ${delay} ease-out`;
+                break;
+            case 'slideInDown':
+                element.style.transform = 'translate3d(0, -100%, 0)';
+                element.style.opacity = '0';
+                element.style.animation = `slideInDown ${duration} ${delay} ease-out`;
+                break;
+            case 'rotate':
+                element.style.animation = `rotate ${duration} ${delay} ease-in-out`;
+                break;
+            case 'scale':
+                element.style.animation = `scale ${duration} ${delay} ease-out`;
+                break;
+            case 'shake':
+                element.style.animation = `shake ${duration} ${delay} ease-in-out`;
+                break;
+            case 'pulse':
+                element.style.animation = `pulse ${duration} ${delay} ease-in-out`;
+                break;
+            case 'progress':
+                element.style.transition = `width ${duration} ${delay} ease-out`;
+                element.style.width = '100%';
+                break;
+            default:
+                // Custom animation or fallback
+                if (this.options.enter) {
+                    element.style.animation = `${this.options.enter} ${duration} ${delay}`;
+                }
+                else {
+                    // Default fade in
+                    element.style.opacity = '0';
+                    element.style.animation = `fadeIn ${duration} ${delay} ease-out`;
+                }
+        }
+    }
+    getDuration() {
+        const duration = this.options.duration;
+        if (typeof duration === 'number') {
+            return `${duration}ms`;
+        }
+        return duration;
+    }
+    getDelay() {
+        const delay = this.options.delay;
+        if (typeof delay === 'number') {
+            return `${delay}ms`;
+        }
+        return delay ? `${delay}` : '0s';
+    }
+    addAnimationStyles() {
+        // Add CSS keyframes if they don't exist
+        if (!document.getElementById('miura-animation-styles')) {
+            const style = document.createElement('style');
+            style.id = 'miura-animation-styles';
+            style.textContent = `
+                @keyframes bounce {
+                    0%, 20%, 53%, 80%, 100% { 
+                        transform: translate3d(0,0,0); 
+                    }
+                    40%, 43% { 
+                        transform: translate3d(0,-30px,0); 
+                    }
+                    70% { 
+                        transform: translate3d(0,-15px,0); 
+                    }
+                    90% { 
+                        transform: translate3d(0,-4px,0); 
+                    }
+                }
+                
+                @keyframes fadeIn {
+                    from { 
+                        opacity: 0; 
+                        transform: scale(0.9);
+                    }
+                    to { 
+                        opacity: 1; 
+                        transform: scale(1);
+                    }
+                }
+                
+                @keyframes fadeOut {
+                    from { 
+                        opacity: 1; 
+                        transform: scale(1);
+                    }
+                    to { 
+                        opacity: 0; 
+                        transform: scale(0.9);
+                    }
+                }
+                
+                @keyframes slideInLeft {
+                    from { 
+                        transform: translate3d(-100%, 0, 0); 
+                        opacity: 0; 
+                    }
+                    to { 
+                        transform: translate3d(0, 0, 0); 
+                        opacity: 1; 
+                    }
+                }
+                
+                @keyframes slideInRight {
+                    from { 
+                        transform: translate3d(100%, 0, 0); 
+                        opacity: 0; 
+                    }
+                    to { 
+                        transform: translate3d(0, 0, 0); 
+                        opacity: 1; 
+                    }
+                }
+                
+                @keyframes slideInUp {
+                    from { 
+                        transform: translate3d(0, 100%, 0); 
+                        opacity: 0; 
+                    }
+                    to { 
+                        transform: translate3d(0, 0, 0); 
+                        opacity: 1; 
+                    }
+                }
+                
+                @keyframes slideInDown {
+                    from { 
+                        transform: translate3d(0, -100%, 0); 
+                        opacity: 0; 
+                    }
+                    to { 
+                        transform: translate3d(0, 0, 0); 
+                        opacity: 1; 
+                    }
+                }
+                
+                @keyframes rotate {
+                    from { 
+                        transform: rotate(0deg); 
+                    }
+                    to { 
+                        transform: rotate(360deg); 
+                    }
+                }
+                
+                @keyframes scale {
+                    0% { 
+                        transform: scale(1); 
+                    }
+                    50% { 
+                        transform: scale(1.2); 
+                    }
+                    100% { 
+                        transform: scale(1); 
+                    }
+                }
+                
+                @keyframes shake {
+                    0%, 100% { 
+                        transform: translateX(0); 
+                    }
+                    10%, 30%, 50%, 70%, 90% { 
+                        transform: translateX(-10px); 
+                    }
+                    20%, 40%, 60%, 80% { 
+                        transform: translateX(10px); 
+                    }
+                }
+                
+                @keyframes pulse {
+                    0% { 
+                        transform: scale(1); 
+                    }
+                    50% { 
+                        transform: scale(1.1); 
+                    }
+                    100% { 
+                        transform: scale(1); 
+                    }
+                }
+            `;
+            document.head.appendChild(style);
+        }
+    }
+    update(options) {
+        this.options = { ...this.options, ...options };
+        // Re-setup triggers if trigger changed
+        if (this.element) {
+            this.cleanup();
+            this.setupTriggers(this.element);
+        }
+    }
+    cleanup() {
+        // Remove event listeners
+        this.eventListeners.forEach(({ element, event, handler }) => {
+            element.removeEventListener(event, handler);
+        });
+        this.eventListeners = [];
+        // Disconnect intersection observer
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
+        }
+    }
+    unmount() {
+        this.cleanup();
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+        }
+        this.isAnimating = false;
+    }
+    // Public methods for programmatic control
+    play() {
+        if (this.element) {
+            this.playAnimation(this.element);
+        }
+    }
+    stop() {
+        if (this.element && this.isAnimating) {
+            this.isAnimating = false;
+            this.options.onCancel?.();
+            if (this.element instanceof HTMLElement) {
+                this.element.style.animation = '';
+                this.element.style.transition = '';
+            }
+        }
+    }
+}
+//# sourceMappingURL=animate.directive.js.map

package/dist/src/directives/animate.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.directive.js","sourceRoot":"","sources":["../../../src/directives/animate.directive.ts"],"names":[],"mappings":"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"}

package/dist/src/directives/await.d.ts

@@ -0,0 +1,68 @@
+import { TemplateResult } from '../processor/template-result';
+/**
+ * Result object for the `asyncReplace` directive.
+ * Holds the current state of the tracked promise so the template
+ * engine can render the appropriate branch on each update cycle.
+ */
+export declare class AsyncResult {
+    readonly state: 'pending' | 'resolved' | 'rejected';
+    readonly value?: unknown | undefined;
+    readonly error?: unknown | undefined;
+    constructor(state: 'pending' | 'resolved' | 'rejected', value?: unknown | undefined, error?: unknown | undefined);
+}
+/**
+ * Tracks a Promise and triggers a component re-render when it settles.
+ *
+ * Usage inside a component's `template()`:
+ * ```ts
+ * // Create the tracker once (e.g. in onMount or a reactive getter)
+ * this._userTracker = createAsyncTracker(fetchUser(id), () => this.requestUpdate());
+ *
+ * // In template():
+ * ${resolveAsync(this._userTracker,
+ *   (user) => html`<p>Hello ${user.name}</p>`,       // resolved
+ *   () => html`<p>Loading...</p>`,                     // pending
+ *   (err)  => html`<p>Error: ${err.message}</p>`       // rejected
+ * )}
+ * ```
+ */
+export interface AsyncTracker<T = unknown> {
+    /** Current state of the tracked promise */
+    readonly state: 'pending' | 'resolved' | 'rejected';
+    /** Resolved value (only when state === 'resolved') */
+    readonly value?: T;
+    /** Rejection reason (only when state === 'rejected') */
+    readonly error?: unknown;
+}
+/**
+ * Create an AsyncTracker that calls `onSettle` when the promise resolves or rejects.
+ * The component should call `this.requestUpdate()` inside `onSettle` to trigger a re-render.
+ *
+ * @param promise - The Promise to track
+ * @param onSettle - Callback invoked when the promise settles (resolve or reject)
+ */
+export declare function createAsyncTracker<T>(promise: Promise<T>, onSettle: () => void): AsyncTracker<T>;
+/**
+ * Resolve an AsyncTracker into a template based on its current state.
+ * Returns the appropriate branch template.
+ *
+ * @param tracker - The AsyncTracker to resolve
+ * @param resolved - Template function for the resolved state
+ * @param pending - Template function for the pending state (optional)
+ * @param rejected - Template function for the rejected state (optional)
+ *
+ * @example
+ * ```ts
+ * template() {
+ *   return html`
+ *     ${resolveAsync(this.dataTracker,
+ *       (data) => html`<div>${data.name}</div>`,
+ *       () => html`<span>Loading...</span>`,
+ *       (err) => html`<span class="error">${err}</span>`
+ *     )}
+ *   `;
+ * }
+ * ```
+ */
+export declare function resolveAsync<T, R extends TemplateResult>(tracker: AsyncTracker<T>, resolved: (value: T) => R, pending?: () => R, rejected?: (error: unknown) => R): R | undefined;
+//# sourceMappingURL=await.d.ts.map

package/dist/src/directives/await.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"await.d.ts","sourceRoot":"","sources":["../../../src/directives/await.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D;;;;GAIG;AACH,qBAAa,WAAW;aAEA,KAAK,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU;aAC1C,KAAK,CAAC,EAAE,OAAO;aACf,KAAK,CAAC,EAAE,OAAO;gBAFf,KAAK,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,EAC1C,KAAK,CAAC,EAAE,OAAO,YAAA,EACf,KAAK,CAAC,EAAE,OAAO,YAAA;CAEtC;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,OAAO;IACrC,2CAA2C;IAC3C,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IACpD,sDAAsD;IACtD,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAChC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,QAAQ,EAAE,MAAM,IAAI,GACrB,YAAY,CAAC,CAAC,CAAC,CAmBjB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,cAAc,EACpD,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,EACzB,OAAO,CAAC,EAAE,MAAM,CAAC,EACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,CAAC,GACjC,CAAC,GAAG,SAAS,CASf"}

package/dist/src/directives/await.js

@@ -0,0 +1,70 @@
+/**
+ * Result object for the `asyncReplace` directive.
+ * Holds the current state of the tracked promise so the template
+ * engine can render the appropriate branch on each update cycle.
+ */
+export class AsyncResult {
+    state;
+    value;
+    error;
+    constructor(state, value, error) {
+        this.state = state;
+        this.value = value;
+        this.error = error;
+    }
+}
+/**
+ * Create an AsyncTracker that calls `onSettle` when the promise resolves or rejects.
+ * The component should call `this.requestUpdate()` inside `onSettle` to trigger a re-render.
+ *
+ * @param promise - The Promise to track
+ * @param onSettle - Callback invoked when the promise settles (resolve or reject)
+ */
+export function createAsyncTracker(promise, onSettle) {
+    const tracker = {
+        state: 'pending'
+    };
+    promise.then((value) => {
+        tracker.state = 'resolved';
+        tracker.value = value;
+        onSettle();
+    }, (error) => {
+        tracker.state = 'rejected';
+        tracker.error = error;
+        onSettle();
+    });
+    return tracker;
+}
+/**
+ * Resolve an AsyncTracker into a template based on its current state.
+ * Returns the appropriate branch template.
+ *
+ * @param tracker - The AsyncTracker to resolve
+ * @param resolved - Template function for the resolved state
+ * @param pending - Template function for the pending state (optional)
+ * @param rejected - Template function for the rejected state (optional)
+ *
+ * @example
+ * ```ts
+ * template() {
+ *   return html`
+ *     ${resolveAsync(this.dataTracker,
+ *       (data) => html`<div>${data.name}</div>`,
+ *       () => html`<span>Loading...</span>`,
+ *       (err) => html`<span class="error">${err}</span>`
+ *     )}
+ *   `;
+ * }
+ * ```
+ */
+export function resolveAsync(tracker, resolved, pending, rejected) {
+    switch (tracker.state) {
+        case 'pending':
+            return pending?.();
+        case 'resolved':
+            return resolved(tracker.value);
+        case 'rejected':
+            return rejected?.(tracker.error);
+    }
+}
+//# sourceMappingURL=await.js.map

package/dist/src/directives/await.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"await.js","sourceRoot":"","sources":["../../../src/directives/await.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,OAAO,WAAW;IAEA;IACA;IACA;IAHpB,YACoB,KAA0C,EAC1C,KAAe,EACf,KAAe;QAFf,UAAK,GAAL,KAAK,CAAqC;QAC1C,UAAK,GAAL,KAAK,CAAU;QACf,UAAK,GAAL,KAAK,CAAU;IAChC,CAAC;CACP;AA2BD;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAC9B,OAAmB,EACnB,QAAoB;IAEpB,MAAM,OAAO,GAA+E;QACxF,KAAK,EAAE,SAAS;KACnB,CAAC;IAEF,OAAO,CAAC,IAAI,CACR,CAAC,KAAK,EAAE,EAAE;QACN,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC;QAC3B,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QACtB,QAAQ,EAAE,CAAC;IACf,CAAC,EACD,CAAC,KAAK,EAAE,EAAE;QACN,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC;QAC3B,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QACtB,QAAQ,EAAE,CAAC;IACf,CAAC,CACJ,CAAC;IAEF,OAAO,OAAO,CAAC;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,YAAY,CACxB,OAAwB,EACxB,QAAyB,EACzB,OAAiB,EACjB,QAAgC;IAEhC,QAAQ,OAAO,CAAC,KAAK,EAAE,CAAC;QACpB,KAAK,SAAS;YACV,OAAO,OAAO,EAAE,EAAE,CAAC;QACvB,KAAK,UAAU;YACX,OAAO,QAAQ,CAAC,OAAO,CAAC,KAAU,CAAC,CAAC;QACxC,KAAK,UAAU;YACX,OAAO,QAAQ,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;AACL,CAAC"}

package/dist/src/directives/choose.d.ts

@@ -0,0 +1,28 @@
+import { TemplateResult } from '../processor/template-result';
+/**
+ * A single case in a choose() call: [value, templateFn].
+ */
+export type ChoiceCase<V, T extends TemplateResult> = [V, () => T];
+/**
+ * Multi-branch conditional rendering directive.
+ *
+ * Evaluates `value` against a list of cases and renders the matching branch.
+ * Only the matched branch's template function is called.
+ *
+ * Usage:
+ * ```ts
+ * html`
+ *   ${choose(this.page, [
+ *     ['home',    () => html`<home-page></home-page>`],
+ *     ['about',   () => html`<about-page></about-page>`],
+ *     ['contact', () => html`<contact-page></contact-page>`],
+ *   ], () => html`<not-found></not-found>`)}
+ * `
+ * ```
+ *
+ * @param value - The value to match against cases
+ * @param cases - Array of [matchValue, templateFn] tuples
+ * @param defaultCase - Optional template function when no case matches
+ */
+export declare function choose<V, T extends TemplateResult>(value: V, cases: ChoiceCase<V, T>[], defaultCase?: () => T): T | undefined;
+//# sourceMappingURL=choose.d.ts.map

package/dist/src/directives/choose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"choose.d.ts","sourceRoot":"","sources":["../../../src/directives/choose.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,cAAc,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,CAAC,SAAS,cAAc,EAC9C,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EACzB,WAAW,CAAC,EAAE,MAAM,CAAC,GACtB,CAAC,GAAG,SAAS,CAOf"}

package/dist/src/directives/choose.js

@@ -0,0 +1,30 @@
+/**
+ * Multi-branch conditional rendering directive.
+ *
+ * Evaluates `value` against a list of cases and renders the matching branch.
+ * Only the matched branch's template function is called.
+ *
+ * Usage:
+ * ```ts
+ * html`
+ *   ${choose(this.page, [
+ *     ['home',    () => html`<home-page></home-page>`],
+ *     ['about',   () => html`<about-page></about-page>`],
+ *     ['contact', () => html`<contact-page></contact-page>`],
+ *   ], () => html`<not-found></not-found>`)}
+ * `
+ * ```
+ *
+ * @param value - The value to match against cases
+ * @param cases - Array of [matchValue, templateFn] tuples
+ * @param defaultCase - Optional template function when no case matches
+ */
+export function choose(value, cases, defaultCase) {
+    for (const [caseValue, templateFn] of cases) {
+        if (caseValue === value) {
+            return templateFn();
+        }
+    }
+    return defaultCase?.();
+}
+//# sourceMappingURL=choose.js.map

package/dist/src/directives/choose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choose.js","sourceRoot":"","sources":["../../../src/directives/choose.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,MAAM,CAClB,KAAQ,EACR,KAAyB,EACzB,WAAqB;IAErB,KAAK,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,KAAK,EAAE,CAAC;QAC1C,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;YACtB,OAAO,UAAU,EAAE,CAAC;QACxB,CAAC;IACL,CAAC;IACD,OAAO,WAAW,EAAE,EAAE,CAAC;AAC3B,CAAC"}

package/dist/src/directives/decorator-example.d.ts

@@ -0,0 +1,8 @@
+import { BaseDirective } from './directive';
+export declare class ExampleDirective extends BaseDirective {
+    mount(element: Element): void;
+}
+export declare class LazyExampleDirective extends BaseDirective {
+    mount(element: Element): void;
+}
+//# sourceMappingURL=decorator-example.d.ts.map

package/dist/src/directives/decorator-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorator-example.d.ts","sourceRoot":"","sources":["../../../src/directives/decorator-example.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C,qBACa,gBAAiB,SAAQ,aAAa;IAC/C,KAAK,CAAC,OAAO,EAAE,OAAO;CAGzB;AAGD,qBACa,oBAAqB,SAAQ,aAAa;IACnD,KAAK,CAAC,OAAO,EAAE,OAAO;CAGzB"}

package/dist/src/directives/decorator-example.js

@@ -0,0 +1,32 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { directive, lazyDirective } from './decorators';
+import { BaseDirective } from './directive';
+// Example of a regular directive (always loaded)
+let ExampleDirective = class ExampleDirective extends BaseDirective {
+    mount(element) {
+        console.log('Example directive mounted');
+    }
+};
+ExampleDirective = __decorate([
+    directive('example')
+], ExampleDirective);
+export { ExampleDirective };
+// Example of a lazy directive (loaded on-demand)
+let LazyExampleDirective = class LazyExampleDirective extends BaseDirective {
+    mount(element) {
+        console.log('Lazy example directive mounted');
+    }
+};
+LazyExampleDirective = __decorate([
+    lazyDirective('lazy-example')
+], LazyExampleDirective);
+export { LazyExampleDirective };
+// Usage in templates:
+// <div #example>Regular directive</div>
+// <div #lazy-example>Lazy directive</div> 
+//# sourceMappingURL=decorator-example.js.map