@miurajs/miura-render 0.1.0 → 0.2.0

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

@@ -0,0 +1,61 @@
+/**
+ * Utility functions for directive management and lazy loading
+ */
+export declare class DirectiveUtils {
+    /**
+     * Preload specific directives for better performance
+     * @param directiveNames - Array of directive names to preload
+     */
+    static preloadDirectives(directiveNames: string[]): Promise<void>;
+    /**
+     * Preload all available directives
+     */
+    static preloadAllDirectives(): Promise<void>;
+    /**
+     * Check if a directive is loaded
+     * @param directiveName - Name of the directive to check
+     */
+    static isDirectiveLoaded(directiveName: string): boolean;
+    /**
+     * Check if a directive is currently loading
+     * @param directiveName - Name of the directive to check
+     */
+    static isDirectiveLoading(directiveName: string): boolean;
+    /**
+     * Get all loaded directives
+     */
+    static getLoadedDirectives(): string[];
+    /**
+     * Get all registered directives (both loaded and lazy)
+     */
+    static getRegisteredDirectives(): string[];
+    /**
+     * Enable debug logging for directive manager
+     */
+    static enableDebug(): void;
+    /**
+     * Create a loading indicator for elements with lazy directives
+     * @param element - The element to add loading indicator to
+     * @param directiveName - The directive name being loaded
+     */
+    static addLoadingIndicator(element: Element, directiveName: string): void;
+    /**
+     * Remove loading indicator from element
+     * @param element - The element to remove loading indicator from
+     */
+    static removeLoadingIndicator(element: Element): void;
+    /**
+     * Get loading state of an element
+     * @param element - The element to check
+     */
+    static getElementLoadingState(element: Element): string | null;
+}
+/**
+ * CSS for directive loading indicators
+ */
+export declare const directiveLoadingStyles = "\n    .directive-loading {\n        position: relative;\n        opacity: 0.7;\n        pointer-events: none;\n    }\n\n    .directive-loading::after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 20px;\n        height: 20px;\n        margin: -10px 0 0 -10px;\n        border: 2px solid #f3f3f3;\n        border-top: 2px solid #3498db;\n        border-radius: 50%;\n        animation: directive-spin 1s linear infinite;\n        z-index: 1000;\n    }\n\n    @keyframes directive-spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n    }\n";
+/**
+ * Auto-inject directive loading styles
+ */
+export declare function injectDirectiveLoadingStyles(): void;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/directives/utils.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,qBAAa,cAAc;IACvB;;;OAGG;WACU,iBAAiB,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAKvE;;OAEG;WACU,oBAAoB,IAAI,OAAO,CAAC,IAAI,CAAC;IAIlD;;;OAGG;IACH,MAAM,CAAC,iBAAiB,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO;IAIxD;;;OAGG;IACH,MAAM,CAAC,kBAAkB,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO;IAIzD;;OAEG;IACH,MAAM,CAAC,mBAAmB,IAAI,MAAM,EAAE;IAItC;;OAEG;IACH,MAAM,CAAC,uBAAuB,IAAI,MAAM,EAAE;IAI1C;;OAEG;IACH,MAAM,CAAC,WAAW,IAAI,IAAI;IAK1B;;;;OAIG;IACH,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,IAAI;IAKzE;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAKrD;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI;CAGjE;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,soBA0BlC,CAAC;AAEF;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,IAAI,CAOnD"}

package/dist/src/directives/utils.js

@@ -0,0 +1,121 @@
+import { DirectiveManager } from './directive-manager';
+/**
+ * Utility functions for directive management and lazy loading
+ */
+export class DirectiveUtils {
+    /**
+     * Preload specific directives for better performance
+     * @param directiveNames - Array of directive names to preload
+     */
+    static async preloadDirectives(directiveNames) {
+        const promises = directiveNames.map(name => DirectiveManager.preloadDirective(name));
+        await Promise.all(promises);
+    }
+    /**
+     * Preload all available directives
+     */
+    static async preloadAllDirectives() {
+        await DirectiveManager.preloadAllDirectives();
+    }
+    /**
+     * Check if a directive is loaded
+     * @param directiveName - Name of the directive to check
+     */
+    static isDirectiveLoaded(directiveName) {
+        return DirectiveManager.isLoaded(directiveName);
+    }
+    /**
+     * Check if a directive is currently loading
+     * @param directiveName - Name of the directive to check
+     */
+    static isDirectiveLoading(directiveName) {
+        return DirectiveManager.isLoading(directiveName);
+    }
+    /**
+     * Get all loaded directives
+     */
+    static getLoadedDirectives() {
+        return DirectiveManager.getLoadedDirectives();
+    }
+    /**
+     * Get all registered directives (both loaded and lazy)
+     */
+    static getRegisteredDirectives() {
+        return DirectiveManager.getRegisteredDirectives();
+    }
+    /**
+     * Enable debug logging for directive manager
+     */
+    static enableDebug() {
+        const { enableDebug } = require('../utils/debug');
+        enableDebug({ directiveManager: true });
+    }
+    /**
+     * Create a loading indicator for elements with lazy directives
+     * @param element - The element to add loading indicator to
+     * @param directiveName - The directive name being loaded
+     */
+    static addLoadingIndicator(element, directiveName) {
+        element.setAttribute('data-directive-loading', directiveName);
+        element.classList.add('directive-loading');
+    }
+    /**
+     * Remove loading indicator from element
+     * @param element - The element to remove loading indicator from
+     */
+    static removeLoadingIndicator(element) {
+        element.removeAttribute('data-directive-loading');
+        element.classList.remove('directive-loading');
+    }
+    /**
+     * Get loading state of an element
+     * @param element - The element to check
+     */
+    static getElementLoadingState(element) {
+        return element.getAttribute('data-directive-loading');
+    }
+}
+/**
+ * CSS for directive loading indicators
+ */
+export const directiveLoadingStyles = `
+    .directive-loading {
+        position: relative;
+        opacity: 0.7;
+        pointer-events: none;
+    }
+
+    .directive-loading::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 20px;
+        height: 20px;
+        margin: -10px 0 0 -10px;
+        border: 2px solid #f3f3f3;
+        border-top: 2px solid #3498db;
+        border-radius: 50%;
+        animation: directive-spin 1s linear infinite;
+        z-index: 1000;
+    }
+
+    @keyframes directive-spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+`;
+/**
+ * Auto-inject directive loading styles
+ */
+export function injectDirectiveLoadingStyles() {
+    if (!document.getElementById('miura-directive-loading-styles')) {
+        const style = document.createElement('style');
+        style.id = 'miura-directive-loading-styles';
+        style.textContent = directiveLoadingStyles;
+        document.head.appendChild(style);
+    }
+}
+// Auto-inject styles when module is imported
+injectDirectiveLoadingStyles();
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/directives/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;GAEG;AACH,MAAM,OAAO,cAAc;IACvB;;;OAGG;IACH,MAAM,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAwB;QACnD,MAAM,QAAQ,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;QACrF,MAAM,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAChC,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,KAAK,CAAC,oBAAoB;QAC7B,MAAM,gBAAgB,CAAC,oBAAoB,EAAE,CAAC;IAClD,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,iBAAiB,CAAC,aAAqB;QAC1C,OAAO,gBAAgB,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IACpD,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,kBAAkB,CAAC,aAAqB;QAC3C,OAAO,gBAAgB,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,mBAAmB;QACtB,OAAO,gBAAgB,CAAC,mBAAmB,EAAE,CAAC;IAClD,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,uBAAuB;QAC1B,OAAO,gBAAgB,CAAC,uBAAuB,EAAE,CAAC;IACtD,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,WAAW;QACd,MAAM,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAClD,WAAW,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5C,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,mBAAmB,CAAC,OAAgB,EAAE,aAAqB;QAC9D,OAAO,CAAC,YAAY,CAAC,wBAAwB,EAAE,aAAa,CAAC,CAAC;QAC9D,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAC/C,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,OAAgB;QAC1C,OAAO,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;QAClD,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;IAClD,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,OAAgB;QAC1C,OAAO,OAAO,CAAC,YAAY,CAAC,wBAAwB,CAAC,CAAC;IAC1D,CAAC;CACJ;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BrC,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,4BAA4B;IACxC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,gCAAgC,CAAC,EAAE,CAAC;QAC7D,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,EAAE,GAAG,gCAAgC,CAAC;QAC5C,KAAK,CAAC,WAAW,GAAG,sBAAsB,CAAC;QAC3C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;AACL,CAAC;AAED,6CAA6C;AAC7C,4BAA4B,EAAE,CAAC"}

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

@@ -0,0 +1,41 @@
+import { BaseDirective } from './directive';
+interface ValidationRule {
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+    email?: boolean;
+    url?: boolean;
+    number?: boolean;
+    min?: number;
+    max?: number;
+    custom?: (value: string) => boolean | string;
+}
+interface ValidationOptions {
+    rules?: ValidationRule;
+    onError?: (errors: string[]) => void;
+    onSuccess?: () => void;
+    validateOnInput?: boolean;
+    validateOnBlur?: boolean;
+    showErrors?: boolean;
+}
+interface ValidationResult {
+    isValid: boolean;
+    errors: string[];
+}
+export declare class ValidateDirective extends BaseDirective {
+    private options;
+    private currentErrors;
+    mount(element: Element): void;
+    private handleInput;
+    private handleBlur;
+    private validateElement;
+    private updateElementStyling;
+    update(options: ValidationOptions): void;
+    unmount(): void;
+    validate(): ValidationResult;
+    getErrors(): string[];
+    clearErrors(): void;
+}
+export {};
+//# sourceMappingURL=validate.directive.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validate.directive.d.ts","sourceRoot":"","sources":["../../../src/directives/validate.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C,UAAU,cAAc;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC;CAChD;AAED,UAAU,iBAAiB;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,gBAAgB;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,qBAAa,iBAAkB,SAAQ,aAAa;IAChD,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,aAAa,CAAgB;IAErC,KAAK,CAAC,OAAO,EAAE,OAAO;IAqBtB,OAAO,CAAC,WAAW,CAGjB;IAEF,OAAO,CAAC,UAAU,CAGhB;IAEF,OAAO,CAAC,eAAe;IAuFvB,OAAO,CAAC,oBAAoB;IA4B5B,MAAM,CAAC,OAAO,EAAE,iBAAiB;IAIjC,OAAO;IAQP,QAAQ,IAAI,gBAAgB;IAO5B,SAAS,IAAI,MAAM,EAAE;IAIrB,WAAW;CAMd"}

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

@@ -0,0 +1,161 @@
+import { BaseDirective } from './directive';
+import { debugLog } from '../utils/debug';
+export class ValidateDirective extends BaseDirective {
+    options = {};
+    currentErrors = [];
+    mount(element) {
+        debugLog('validate', 'Mounting validate directive');
+        this.options = {
+            validateOnInput: true,
+            validateOnBlur: true,
+            showErrors: true,
+            rules: {},
+            ...this.options
+        };
+        if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+            if (this.options.validateOnInput) {
+                element.addEventListener('input', this.handleInput.bind(this));
+            }
+            if (this.options.validateOnBlur) {
+                element.addEventListener('blur', this.handleBlur.bind(this));
+            }
+        }
+    }
+    handleInput = (event) => {
+        const element = event.target;
+        this.validateElement(element);
+    };
+    handleBlur = (event) => {
+        const element = event.target;
+        this.validateElement(element);
+    };
+    validateElement(element) {
+        const value = element.value;
+        const errors = [];
+        const rules = this.options.rules || {};
+        // Required validation
+        if (rules.required && !value.trim()) {
+            errors.push('This field is required');
+        }
+        if (value.trim()) {
+            // Min length validation
+            if (rules.minLength && value.length < rules.minLength) {
+                errors.push(`Minimum length is ${rules.minLength} characters`);
+            }
+            // Max length validation
+            if (rules.maxLength && value.length > rules.maxLength) {
+                errors.push(`Maximum length is ${rules.maxLength} characters`);
+            }
+            // Pattern validation
+            if (rules.pattern && !rules.pattern.test(value)) {
+                errors.push('Invalid format');
+            }
+            // Email validation
+            if (rules.email) {
+                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                if (!emailPattern.test(value)) {
+                    errors.push('Invalid email format');
+                }
+            }
+            // URL validation
+            if (rules.url) {
+                try {
+                    new URL(value);
+                }
+                catch {
+                    errors.push('Invalid URL format');
+                }
+            }
+            // Number validation
+            if (rules.number) {
+                const num = parseFloat(value);
+                if (isNaN(num)) {
+                    errors.push('Must be a number');
+                }
+                else {
+                    if (rules.min !== undefined && num < rules.min) {
+                        errors.push(`Minimum value is ${rules.min}`);
+                    }
+                    if (rules.max !== undefined && num > rules.max) {
+                        errors.push(`Maximum value is ${rules.max}`);
+                    }
+                }
+            }
+            // Custom validation
+            if (rules.custom) {
+                const result = rules.custom(value);
+                if (result === false) {
+                    errors.push('Invalid value');
+                }
+                else if (typeof result === 'string') {
+                    errors.push(result);
+                }
+            }
+        }
+        const isValid = errors.length === 0;
+        this.currentErrors = errors;
+        // Update element styling
+        this.updateElementStyling(element, isValid);
+        // Call callbacks
+        if (isValid) {
+            this.options.onSuccess?.();
+        }
+        else {
+            this.options.onError?.(errors);
+        }
+        debugLog('validate', 'Validation result:', { isValid, errors });
+        return { isValid, errors };
+    }
+    updateElementStyling(element, isValid) {
+        if (this.options.showErrors) {
+            element.classList.remove('valid', 'invalid');
+            element.classList.add(isValid ? 'valid' : 'invalid');
+            // Add or update error message
+            let errorContainer = element.parentElement?.querySelector('.validation-error');
+            if (!errorContainer && !isValid) {
+                errorContainer = document.createElement('div');
+                errorContainer.className = 'validation-error';
+                if (errorContainer instanceof HTMLElement) {
+                    errorContainer.style.color = 'red';
+                    errorContainer.style.fontSize = '12px';
+                    errorContainer.style.marginTop = '4px';
+                }
+                element.parentElement?.appendChild(errorContainer);
+            }
+            if (errorContainer) {
+                if (isValid) {
+                    errorContainer.remove();
+                }
+                else {
+                    errorContainer.textContent = this.currentErrors[0];
+                }
+            }
+        }
+    }
+    update(options) {
+        this.options = { ...this.options, ...options };
+    }
+    unmount() {
+        if (this.element instanceof HTMLInputElement) {
+            this.element.removeEventListener('input', this.handleInput);
+            this.element.removeEventListener('blur', this.handleBlur);
+        }
+    }
+    // Public methods
+    validate() {
+        if (this.element instanceof HTMLInputElement) {
+            return this.validateElement(this.element);
+        }
+        return { isValid: false, errors: ['Element not found'] };
+    }
+    getErrors() {
+        return this.currentErrors;
+    }
+    clearErrors() {
+        this.currentErrors = [];
+        if (this.element instanceof HTMLInputElement) {
+            this.updateElementStyling(this.element, true);
+        }
+    }
+}
+//# sourceMappingURL=validate.directive.js.map

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

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

package/dist/src/directives/virtual-scroll.d.ts

@@ -0,0 +1,91 @@
+import { TemplateResult } from '../processor/template-result';
+/**
+ * Configuration for virtual scrolling.
+ */
+export interface VirtualScrollConfig<T> {
+    /** Full list of items */
+    items: readonly T[];
+    /** Fixed height of each item in pixels */
+    itemHeight: number;
+    /** Height of the scrollable container in pixels */
+    containerHeight: number;
+    /** Render function for each visible item */
+    render: (item: T, index: number) => TemplateResult;
+    /** Number of extra items to render above/below the visible area (default: 2) */
+    overscan?: number;
+}
+/**
+ * Result of a virtual scroll computation.
+ * Contains the container styles, spacer info, and rendered visible items.
+ */
+export interface VirtualScrollResult<T> {
+    /** CSS styles for the outer scrollable container */
+    containerStyle: string;
+    /** CSS styles for the inner spacer that maintains total scroll height */
+    spacerStyle: string;
+    /** CSS styles for the content wrapper positioned at the correct offset */
+    contentStyle: string;
+    /** The visible items to render */
+    visibleItems: {
+        item: T;
+        index: number;
+        template: TemplateResult;
+    }[];
+    /** Total number of items */
+    totalCount: number;
+    /** Total scrollable height in px */
+    totalHeight: number;
+    /** First visible index */
+    startIndex: number;
+    /** Last visible index (exclusive) */
+    endIndex: number;
+}
+/**
+ * Compute which items are visible given a scroll offset, and return
+ * the positioning metadata needed to render them.
+ *
+ * This is a pure function — it does not touch the DOM. The component
+ * is responsible for:
+ * 1. Providing a scroll container with `overflow-y: auto`
+ * 2. Listening for `scroll` events and calling this again
+ * 3. Rendering the returned templates
+ *
+ * @example
+ * ```ts
+ * @component({ tag: 'my-list' })
+ * class MyList extends MiuraElement {
+ *   declare items: any[];
+ *   declare scrollTop: number;
+ *
+ *   static properties = {
+ *     items: { type: Array, default: [] },
+ *     scrollTop: { type: Number, default: 0 },
+ *   };
+ *
+ *   private onScroll = (e: Event) => {
+ *     this.scrollTop = (e.target as HTMLElement).scrollTop;
+ *   };
+ *
+ *   template() {
+ *     const vs = computeVirtualSlice({
+ *       items: this.items,
+ *       itemHeight: 40,
+ *       containerHeight: 400,
+ *       render: (item, i) => html`<div class="row">${item.name}</div>`,
+ *     }, this.scrollTop);
+ *
+ *     return html`
+ *       <div style=${vs.containerStyle} @scroll=${this.onScroll}>
+ *         <div style=${vs.spacerStyle}>
+ *           <div style=${vs.contentStyle}>
+ *             ${vs.visibleItems.map(v => v.template)}
+ *           </div>
+ *         </div>
+ *       </div>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare function computeVirtualSlice<T>(config: VirtualScrollConfig<T>, scrollTop?: number): VirtualScrollResult<T>;
+//# sourceMappingURL=virtual-scroll.d.ts.map

package/dist/src/directives/virtual-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-scroll.d.ts","sourceRoot":"","sources":["../../../src/directives/virtual-scroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,mBAAmB,CAAC,CAAC;IAClC,yBAAyB;IACzB,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,CAAC;IACnD,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB,CAAC,CAAC;IAClC,oDAAoD;IACpD,cAAc,EAAE,MAAM,CAAC;IACvB,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,YAAY,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,YAAY,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,cAAc,CAAA;KAAE,EAAE,CAAC;IACrE,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EACjC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC9B,SAAS,GAAE,MAAU,GACtB,mBAAmB,CAAC,CAAC,CAAC,CAiCxB"}

package/dist/src/directives/virtual-scroll.js

@@ -0,0 +1,78 @@
+/**
+ * Compute which items are visible given a scroll offset, and return
+ * the positioning metadata needed to render them.
+ *
+ * This is a pure function — it does not touch the DOM. The component
+ * is responsible for:
+ * 1. Providing a scroll container with `overflow-y: auto`
+ * 2. Listening for `scroll` events and calling this again
+ * 3. Rendering the returned templates
+ *
+ * @example
+ * ```ts
+ * @component({ tag: 'my-list' })
+ * class MyList extends MiuraElement {
+ *   declare items: any[];
+ *   declare scrollTop: number;
+ *
+ *   static properties = {
+ *     items: { type: Array, default: [] },
+ *     scrollTop: { type: Number, default: 0 },
+ *   };
+ *
+ *   private onScroll = (e: Event) => {
+ *     this.scrollTop = (e.target as HTMLElement).scrollTop;
+ *   };
+ *
+ *   template() {
+ *     const vs = computeVirtualSlice({
+ *       items: this.items,
+ *       itemHeight: 40,
+ *       containerHeight: 400,
+ *       render: (item, i) => html`<div class="row">${item.name}</div>`,
+ *     }, this.scrollTop);
+ *
+ *     return html`
+ *       <div style=${vs.containerStyle} @scroll=${this.onScroll}>
+ *         <div style=${vs.spacerStyle}>
+ *           <div style=${vs.contentStyle}>
+ *             ${vs.visibleItems.map(v => v.template)}
+ *           </div>
+ *         </div>
+ *       </div>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export function computeVirtualSlice(config, scrollTop = 0) {
+    const { items, itemHeight, containerHeight, render, overscan = 2 } = config;
+    const totalCount = items.length;
+    const totalHeight = totalCount * itemHeight;
+    // Compute visible range
+    const rawStart = Math.floor(scrollTop / itemHeight);
+    const visibleCount = Math.ceil(containerHeight / itemHeight);
+    const startIndex = Math.max(0, rawStart - overscan);
+    const endIndex = Math.min(totalCount, rawStart + visibleCount + overscan);
+    // Build visible items
+    const visibleItems = [];
+    for (let i = startIndex; i < endIndex; i++) {
+        visibleItems.push({
+            item: items[i],
+            index: i,
+            template: render(items[i], i)
+        });
+    }
+    const offsetY = startIndex * itemHeight;
+    return {
+        containerStyle: `overflow-y:auto;height:${containerHeight}px;position:relative;`,
+        spacerStyle: `height:${totalHeight}px;position:relative;`,
+        contentStyle: `position:absolute;top:${offsetY}px;left:0;right:0;`,
+        visibleItems,
+        totalCount,
+        totalHeight,
+        startIndex,
+        endIndex,
+    };
+}
+//# sourceMappingURL=virtual-scroll.js.map

package/dist/src/directives/virtual-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-scroll.js","sourceRoot":"","sources":["../../../src/directives/virtual-scroll.ts"],"names":[],"mappings":"AAyCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,UAAU,mBAAmB,CAC/B,MAA8B,EAC9B,YAAoB,CAAC;IAErB,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;IAC5E,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;IAChC,MAAM,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;IAE5C,wBAAwB;IACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC,CAAC;IAC7D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAC,CAAC;IAE1E,sBAAsB;IACtB,MAAM,YAAY,GAA2C,EAAE,CAAC;IAChE,KAAK,IAAI,CAAC,GAAG,UAAU,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,YAAY,CAAC,IAAI,CAAC;YACd,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;YACd,KAAK,EAAE,CAAC;YACR,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SAChC,CAAC,CAAC;IACP,CAAC;IAED,MAAM,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IAExC,OAAO;QACH,cAAc,EAAE,0BAA0B,eAAe,uBAAuB;QAChF,WAAW,EAAE,UAAU,WAAW,uBAAuB;QACzD,YAAY,EAAE,yBAAyB,OAAO,oBAAoB;QAClE,YAAY;QACZ,UAAU;QACV,WAAW;QACX,UAAU;QACV,QAAQ;KACX,CAAC;AACN,CAAC"}

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

@@ -0,0 +1,24 @@
+import { TemplateResult } from '../processor/template-result';
+/**
+ * Conditional rendering directive.
+ *
+ * Renders `trueCase` when condition is truthy, `falseCase` when falsy.
+ * Unlike ternary expressions, template functions are only called for the
+ * active branch — the inactive branch is never evaluated.
+ *
+ * Usage:
+ * ```ts
+ * html`
+ *   ${when(this.isLoggedIn,
+ *     () => html`<user-profile .user="${this.user}"></user-profile>`,
+ *     () => html`<login-form></login-form>`
+ *   )}
+ * `
+ * ```
+ *
+ * @param condition - Truthy/falsy value to test
+ * @param trueCase - Template function called when condition is truthy
+ * @param falseCase - Optional template function called when condition is falsy
+ */
+export declare function when<T extends TemplateResult>(condition: unknown, trueCase: () => T, falseCase?: () => T): T | undefined;
+//# sourceMappingURL=when.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"when.d.ts","sourceRoot":"","sources":["../../../src/directives/when.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EACzC,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,MAAM,CAAC,EACjB,SAAS,CAAC,EAAE,MAAM,CAAC,GACpB,CAAC,GAAG,SAAS,CAEf"}

package/dist/src/directives/when.js

@@ -0,0 +1,25 @@
+/**
+ * Conditional rendering directive.
+ *
+ * Renders `trueCase` when condition is truthy, `falseCase` when falsy.
+ * Unlike ternary expressions, template functions are only called for the
+ * active branch — the inactive branch is never evaluated.
+ *
+ * Usage:
+ * ```ts
+ * html`
+ *   ${when(this.isLoggedIn,
+ *     () => html`<user-profile .user="${this.user}"></user-profile>`,
+ *     () => html`<login-form></login-form>`
+ *   )}
+ * `
+ * ```
+ *
+ * @param condition - Truthy/falsy value to test
+ * @param trueCase - Template function called when condition is truthy
+ * @param falseCase - Optional template function called when condition is falsy
+ */
+export function when(condition, trueCase, falseCase) {
+    return condition ? trueCase() : falseCase?.();
+}
+//# sourceMappingURL=when.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"when.js","sourceRoot":"","sources":["../../../src/directives/when.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,IAAI,CAChB,SAAkB,EAClB,QAAiB,EACjB,SAAmB;IAEnB,OAAO,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC;AAClD,CAAC"}