ladrillosjs 2.0.0-beta.6 → 2.0.0-beta.8

package/dist/core/events/eventBus.d.ts

@@ -0,0 +1,136 @@
+/**
+ * LadrillosJS Global Event Bus
+ *
+ * Provides cross-component communication without prop drilling.
+ *
+ * Usage:
+ * - $emit("event-name", data) - Emit an event to all listeners
+ * - $listen("event-name", callback) - Listen for events from any component
+ *
+ * @example
+ * ```html
+ * <!-- Component A: Emitting events -->
+ * <script>
+ *   const login = () => {
+ *     $emit("user-logged-in", { userId: 123, username: "john" });
+ *   };
+ * </script>
+ *
+ * <!-- Component B: Listening for events -->
+ * <script>
+ *   let isLoggedIn = false;
+ *   let username = "";
+ *
+ *   $listen("user-logged-in", (user) => {
+ *     isLoggedIn = true;
+ *     username = user.username;
+ *   });
+ * </script>
+ * ```
+ */
+/**
+ * Event listener callback function type
+ */
+export type EventListener<T = unknown> = (data: T) => void;
+/**
+ * Public alias for EventListener (for external API)
+ */
+export type EventCallback<T = unknown> = EventListener<T>;
+/**
+ * Internal listener registration with metadata for cleanup
+ */
+interface ListenerRegistration {
+    callback: EventListener;
+    componentId?: string;
+}
+/**
+ * Unsubscribe function returned by $listen
+ */
+export type Unsubscribe = () => void;
+/**
+ * Global event bus interface for type safety
+ */
+interface GlobalEventBus {
+    listeners: Map<string, Set<ListenerRegistration>>;
+    componentListeners: Map<string, Set<{
+        event: string;
+        registration: ListenerRegistration;
+    }>>;
+}
+/**
+ * Extend globalThis to include our event bus
+ */
+declare global {
+    var __ladrillosEventBus: GlobalEventBus | undefined;
+}
+/**
+ * Emit an event to all registered listeners.
+ *
+ * @param eventName - The name of the event to emit
+ * @param data - Optional data to pass to listeners
+ *
+ * @example
+ * ```js
+ * $emit("user-logged-in", { userId: 123, username: "john" });
+ * $emit("show-modal");
+ * $emit("item-added", { id: 1, name: "Product" });
+ * ```
+ */
+export declare function $emit<T = unknown>(eventName: string, data?: T): void;
+/**
+ * Listen for events from any component.
+ *
+ * @param eventName - The name of the event to listen for
+ * @param callback - Function to call when the event is emitted
+ * @param componentId - Optional component ID for automatic cleanup
+ * @returns Unsubscribe function to remove the listener
+ *
+ * @example
+ * ```js
+ * // Basic usage
+ * $listen("user-logged-in", (user) => {
+ *   console.log(`Welcome, ${user.username}!`);
+ *   isLoggedIn = true;
+ * });
+ *
+ * // With unsubscribe
+ * const unsubscribe = $listen("notifications", handleNotification);
+ * // Later: unsubscribe();
+ * ```
+ */
+export declare function $listen<T = unknown>(eventName: string, callback: EventListener<T>, componentId?: string): Unsubscribe;
+/**
+ * Remove all listeners registered by a specific component.
+ * Called automatically when a component is disconnected from the DOM.
+ *
+ * @param componentId - The component's unique ID
+ */
+export declare function cleanupComponentListeners(componentId: string): void;
+/**
+ * Remove all event listeners (useful for testing)
+ */
+export declare function clearAllListeners(): void;
+/**
+ * Get the count of listeners for an event (useful for debugging)
+ */
+export declare function getListenerCount(eventName: string): number;
+/**
+ * Check if an event has any listeners
+ */
+export declare function hasListeners(eventName: string): boolean;
+/**
+ * Creates event bus helpers bound to a specific component.
+ * This enables automatic cleanup when the component is disconnected.
+ *
+ * @param componentId - The unique ID of the component
+ * @returns Object containing bound $emit and $listen functions
+ */
+export declare function createEventBusHelpers(componentId: string): {
+    $emit: <T = unknown>(eventName: string, data?: T) => void;
+    $listen: <T = unknown>(eventName: string, callback: EventListener<T>) => Unsubscribe;
+};
+/**
+ * Names of event bus helpers (for Function parameter lists)
+ */
+export declare const eventBusHelperNames: string[];
+export {};

package/dist/core/helpers/frameworkHelpers.d.ts

@@ -0,0 +1,38 @@
+import { ComponentConfig, RegisterComponentsResult } from '../ladrillos';
+import { LazyStrategy } from '../lazy';
+/**
+ * Wraps a Map in a Proxy to allow cleaner dot notation access.
+ * Supports both $refs.inputEl and $refs.get("inputEl") syntax.
+ *
+ * @example
+ * const $refs = createRefsProxy(new Map());
+ * $refs.set("input", document.querySelector("input"));
+ * $refs.input.focus();  // Works!
+ * $refs.get("input").focus();  // Also works!
+ */
+export declare function createRefsProxy<T extends HTMLElement = HTMLElement>(map: Map<string, T>): Map<string, T> & Record<string, T>;
+/**
+ * Creates framework helpers bound to a specific component's base URL.
+ * This ensures relative paths like "./buttons.html" resolve correctly
+ * relative to the component that calls registerComponent.
+ *
+ * @param componentUrl - The absolute URL of the component (e.g., "http://localhost/header/header.html")
+ * @returns Object containing bound helper functions
+ */
+export declare function createFrameworkHelpers(componentUrl: string): {
+    registerComponent: (name: string, path: string, useShadowDOM?: boolean, lazy?: boolean | LazyStrategy) => Promise<void>;
+    registerComponents: (configs: ComponentConfig[] | Record<string, string | Omit<ComponentConfig, "name">>) => Promise<RegisterComponentsResult>;
+    $use: (path: string, useShadowDOM?: boolean, lazy?: boolean | LazyStrategy) => Promise<void>;
+};
+/**
+ * Names of all framework helpers (for Function parameter lists)
+ */
+export declare const frameworkHelperNames: string[];
+/**
+ * Default helpers for entry point usage (resolve relative to page URL).
+ * Inside components, use createFrameworkHelpers(componentUrl) instead.
+ */
+export declare function getFrameworkHelperValues(): ((...args: any[]) => any)[];
+export declare const registerComponent: (name: string, path: string, useShadowDOM?: boolean, lazy?: boolean | LazyStrategy) => Promise<void>;
+export declare const registerComponents: (configs: ComponentConfig[] | Record<string, string | Omit<ComponentConfig, "name">>) => Promise<RegisterComponentsResult>;
+export declare const $use: (path: string, useShadowDOM?: boolean, lazy?: boolean | LazyStrategy) => Promise<void>;

package/dist/core/html/htmlparser.d.ts

@@ -0,0 +1,19 @@
+import { BindingDescriptor } from '../../types';
+type TemplateLoadResult = {
+    bindings: BindingDescriptor[];
+};
+/**
+ * Injects the template HTML into the host element and scans for data bindings.
+ * Returns a list of all bindings found in text nodes and attributes.
+ *
+ * Directive scanning ($for / $if / $show / $bind) is performed separately
+ * by `scanDirectivesWithRefs` in the web component lifecycle.
+ *
+ * <lazy> elements are preprocessed here in a detached <template> fragment so
+ * their children never get connected (and thus never fire connectedCallback /
+ * drain their light DOM) before lazy detaches them. Without this, components
+ * inside <lazy> that read `$host.__originalHTML` would see an empty string on
+ * the second connect after lazy reveals them.
+ */
+export declare const loadTemplate: (host: HTMLElement | ShadowRoot, template: string) => TemplateLoadResult;
+export {};

package/dist/core/js/moduleExecutor.d.ts

@@ -0,0 +1,118 @@
+import { ScriptElement, ExternalScriptElement } from '../../types';
+/**
+ * Rewrites relative imports in module code to absolute URLs.
+ *
+ * NOTE: When using a dev server like Vite, TypeScript imports work because
+ * the server transpiles .ts files on-the-fly. Without a dev server, you need
+ * to use .js files or pre-compile your TypeScript.
+ *
+ * @param code - The module script content
+ * @param baseUrl - The URL to resolve relative paths against (component's URL)
+ * @returns The code with rewritten imports
+ */
+export declare function rewriteImports(code: string, baseUrl: string): string;
+/**
+ * Executes a single inline module script.
+ *
+ * @param script - The script element containing module code
+ * @param componentUrl - The component's URL for resolving relative imports
+ * @param componentId - Unique ID for tracking blob URLs
+ * @returns Promise that resolves when the module has executed
+ */
+export declare function executeModuleScript(script: ScriptElement, componentUrl: string, componentId?: string): Promise<unknown>;
+/**
+ * Executes an external module script.
+ * For external scripts, we fetch the content, auto-export all declarations,
+ * and execute it via blob URL with injected framework helpers.
+ *
+ * If the script has the 'external' attribute, it's loaded as a plain
+ * external script without any framework processing (no helpers, no auto-exports).
+ *
+ * @param script - The external script element
+ * @param componentId - Optional component ID for event bus cleanup
+ * @param componentUrl - Optional component URL for path resolution
+ * @returns Promise that resolves with the module exports
+ */
+export declare function executeExternalScript(script: ExternalScriptElement, componentId?: string, componentUrl?: string): Promise<unknown>;
+/**
+ * Loads external scripts marked with the 'external' attribute.
+ * These are third-party libraries (like highlight.js) that need to be loaded
+ * BEFORE the component's inline scripts run, since they may depend on globals
+ * provided by these libraries.
+ *
+ * @param externalScripts - External scripts from the component
+ * @returns Promise that resolves when all external scripts are loaded
+ */
+export declare function loadPlainExternalScripts(externalScripts: ExternalScriptElement[]): Promise<void>;
+/**
+ * Loads external stylesheets (<link rel="stylesheet">) into the component.
+ * For Shadow DOM components, fetches CSS content and injects directly into shadow root.
+ * For light DOM components, adds <link> to document head.
+ *
+ * @param externalStyles - External stylesheets from the component
+ * @param root - The component's root (shadow root or element itself)
+ * @param useShadowDOM - Whether the component uses Shadow DOM
+ * @returns Promise that resolves when all stylesheets are loaded
+ */
+export declare function loadExternalStyles(externalStyles: Array<{
+    href: string;
+    rel: string;
+}>, root?: ShadowRoot | HTMLElement, useShadowDOM?: boolean): Promise<void>;
+/**
+ * Executes all module scripts for a component.
+ * Handles both inline and external scripts (module and non-module).
+ *
+ * @param scripts - Inline scripts from the component
+ * @param externalScripts - External scripts from the component
+ * @param componentUrl - The component's URL for resolving imports
+ * @param componentId - Unique ID for cleanup tracking
+ * @returns Promise that resolves when all modules have executed
+ */
+export declare function executeAllModuleScripts(scripts: ScriptElement[], externalScripts: ExternalScriptElement[], componentUrl: string, componentId?: string): Promise<Map<number, unknown>>;
+/**
+ * Cleans up blob URLs created for a component.
+ * Call this when a component is disconnected to prevent memory leaks.
+ *
+ * @param componentId - The component's unique ID
+ */
+export declare function cleanupModuleScripts(componentId: string): void;
+/**
+ * Extracts import specifiers from module code.
+ * Useful for debugging or pre-fetching dependencies.
+ *
+ * @param code - The module script content
+ * @returns Array of import specifiers found in the code
+ */
+export declare function extractImportSpecifiers(code: string): string[];
+/**
+ * Executes a module script and extracts declared variables for reactive state.
+ *
+ * This is the KEY function for reactivity support in module scripts.
+ * It:
+ * 1. Resolves all imports (wrapping arrays in reactive proxies)
+ * 2. Strips import statements from the code
+ * 3. Transforms variable access to go through the reactive state object
+ * 4. Executes the remaining code in a sandbox with imports available
+ * 5. Functions read/write directly to the reactive state for full reactivity
+ *
+ * The transformation ensures that functions declared in module scripts
+ * read/write from the reactive state, not from local closure variables.
+ * This makes `let x = 0; function inc() { x++; }` work reactively.
+ *
+ * @param reactiveState - The component's reactive state object. Module script
+ *                        functions will read/write directly to this object.
+ * @param onStateChange - Optional callback when imported arrays are mutated.
+ *                        This triggers directive updates (like $for loops).
+ */
+export declare function executeModuleScriptWithReactivity(script: ScriptElement, componentUrl: string, componentId?: string, refs?: Map<string, HTMLElement>, reactiveState?: Record<string, unknown>, onStateChange?: () => void, hostElement?: HTMLElement): Promise<Record<string, unknown>>;
+/**
+ * Executes all module scripts with reactivity support.
+ * Returns merged state from all module scripts.
+ * @param refs - Optional refs Map that will be populated by scanDirectives later.
+ *               Functions in module scripts can capture this reference.
+ * @param reactiveState - The component's reactive state object. Module script
+ *                        functions will read/write directly to this object.
+ * @param onStateChange - Optional callback when imported arrays are mutated.
+ *                        This triggers directive updates (like $for loops).
+ */
+export declare function executeModuleScriptsWithReactivity(scripts: ScriptElement[], externalScripts: ExternalScriptElement[], componentUrl: string, componentId?: string, refs?: Map<string, HTMLElement>, reactiveState?: Record<string, unknown>, onStateChange?: () => void, hostElement?: HTMLElement): Promise<Record<string, unknown>>;

package/dist/core/js/reactivity.d.ts

@@ -0,0 +1,52 @@
+import { BindingDescriptor } from '../../types';
+/**
+ * Function signature for updating a single binding with new state
+ */
+type UpdateBindingFn = (binding: BindingDescriptor, state: Record<string, unknown>) => void;
+/**
+ * Wraps an array in a Proxy that intercepts mutation methods.
+ * When any mutation method is called, the onMutate callback is triggered,
+ * which updates all directives (like $for loops).
+ *
+ * Example:
+ *   const items = createReactiveArray(['a', 'b'], () => console.log('changed!'));
+ *   items.push('c');  // Logs: "changed!"
+ *   items[0] = 'x';   // Also triggers reactivity (index assignment)
+ *
+ * @param arr - The array to make reactive
+ * @param onMutate - Callback to trigger when the array is mutated
+ * @returns A reactive proxy of the array
+ */
+export declare function createReactiveArray<T>(arr: T[], onMutate: () => void): T[];
+/**
+ * Creates a reactive state object that automatically updates the DOM
+ * when properties change.
+ *
+ * How it works:
+ *   1. Wraps the initial state in a Proxy
+ *   2. When a property is set, finds all bindings that depend on it
+ *   3. Re-evaluates those bindings and updates the DOM
+ *
+ * Supports dynamically adding new state keys (e.g., from module scripts).
+ * When a new key is added, it automatically finds bindings that depend on it.
+ *
+ * Example:
+ *   const state = createReactiveState({ count: 0 }, bindings, updateFn);
+ *   state.count++;  // Automatically updates all {count} bindings in the DOM
+ *   state.name = "hello"; // New key - finds and updates {name} bindings
+ *
+ * @param initialState - Initial state values extracted from component script
+ * @param bindings - All template bindings that might depend on state
+ * @param updateBinding - Function to re-evaluate and update a single binding
+ * @param onStateChange - Optional callback when any state property changes (for directives)
+ */
+export declare function createReactiveState(initialState: Record<string, unknown>, bindings: BindingDescriptor[], updateBinding: UpdateBindingFn, onStateChange?: () => void): Record<string, unknown>;
+/**
+ * Creates the update function that re-evaluates a binding and updates the DOM.
+ * This should be called once when setting up reactivity, then passed to
+ * createReactiveState.
+ *
+ * @param evaluateExpression - Function to evaluate {expression} against state
+ */
+export declare function createBindingUpdater(evaluateExpression: (expr: string, context: Record<string, unknown>) => unknown): UpdateBindingFn;
+export {};

package/dist/core/js/scriptParser.d.ts

@@ -0,0 +1,52 @@
+import { BindingDescriptor, ScriptElement } from '../../types';
+/**
+ * Main entry point for processing component scripts.
+ *
+ * 1. Extracts all variables and functions from <script> tags
+ * 2. Applies attribute overrides (attributes take precedence over defaults)
+ * 3. Creates attribute-only state entries (for attributes without script vars)
+ * 4. Creates a reactive state that auto-updates DOM on changes
+ * 5. Binds inline event handlers (onclick, etc.) to work with reactive state
+ * 6. Evaluates and applies template bindings like {name} or {greet()}
+ *
+ * @param host - The component's root element or shadow root
+ * @param scripts - Script elements from the component
+ * @param bindings - Template bindings to connect to state
+ * @param attributeOverrides - Attributes from HTML that override script defaults
+ * @param onStateChange - Optional callback when state changes (for directive updates)
+ * @param deferBindings - If true, don't apply bindings immediately (for module script support)
+ * @param componentUrl - The absolute URL of the component (for resolving relative paths in registerComponent)
+ * @param componentId - Optional unique ID for this component instance (for event bus cleanup)
+ * @param refs - Optional refs Map (for $refs access in scripts)
+ * @param templateBindings - Variable names from template bindings (for auto-prop access in scripts)
+ * @returns The reactive state object - changes trigger automatic DOM updates
+ */
+export declare function loadScripts(host: HTMLElement | ShadowRoot, scripts: ScriptElement[], bindings: BindingDescriptor[], attributeOverrides?: Record<string, unknown>, onStateChange?: () => void, deferBindings?: boolean, componentUrl?: string, componentId?: string, refs?: Map<string, HTMLElement>, templateBindings?: string[]): Promise<Record<string, unknown>>;
+/**
+ * Apply bindings after all state is ready (including module scripts).
+ * This should be called after module scripts have been executed.
+ */
+export declare function applyBindingsDeferred(host: HTMLElement | ShadowRoot, bindings: BindingDescriptor[], state: Record<string, unknown>): void;
+/**
+ * Extracts function definitions from script content.
+ * These will be re-created in the event handler context with current state values.
+ *
+ * @param content - The script content to extract functions from
+ * @param skipFunctions - Function names to skip (already in state as reactive functions)
+ */
+export declare function extractFunctionDefinitions(content: string, skipFunctions?: string[]): string;
+/**
+ * Finds variable declarations: let x = ..., const y = ..., var z = ...
+ * Only returns TOP-LEVEL declarations — declarations inside callbacks,
+ * arrow function bodies, and other nested scopes are intentionally skipped
+ * so they remain real local variables after script transformation.
+ *
+ * Exported so webcomponent.ts can use it for observedAttributes.
+ */
+export declare function extractVariableNames(content: string): string[];
+/**
+ * Creates and returns an expression evaluator function for use by directives.
+ * This allows directives to evaluate expressions like "item.name" or "count > 5"
+ * in the context of the component's state.
+ */
+export declare function createExpressionEvaluator(): (expr: string, context: Record<string, unknown>) => unknown;

package/dist/core/ladrillos.d.ts

@@ -0,0 +1,68 @@
+import { LadrillosComponent } from '../types';
+import { LazyStrategy } from './lazy';
+/**
+ * Component registration configuration
+ */
+export interface ComponentConfig {
+    name: string;
+    path: string;
+    useShadowDOM?: boolean;
+    /**
+     * Lazy loading configuration:
+     * - `false` (default): Load immediately
+     * - `true`: Lazy load using default strategy (visible with 100px margin)
+     * - `LazyStrategy`: Custom lazy loading strategy
+     */
+    lazy?: boolean | LazyStrategy;
+}
+/**
+ * Result of a batch component registration
+ */
+export interface RegisterComponentsResult {
+    /** Components that registered successfully */
+    success: string[];
+    /** Components that failed with their errors */
+    failed: Array<{
+        name: string;
+        error: Error;
+    }>;
+    /** Components that were skipped (already registered) */
+    skipped: string[];
+}
+declare class Ladrillos {
+    components: Record<string, LadrillosComponent>;
+    constructor();
+    registerComponent(name: string, path: string, useShadowDOM?: boolean, lazy?: boolean | LazyStrategy): Promise<void>;
+    /**
+     * Register multiple components at once with parallel fetching.
+     *
+     * Benefits over sequential registration:
+     * - Parallel network requests via Promise.allSettled
+     * - Early deduplication check (skips already registered)
+     * - Batched custom element definitions
+     * - Returns detailed results for error handling
+     *
+     * @example
+     * ```js
+     * // Array syntax
+     * await ladrillos.registerComponents([
+     *   { name: 'my-header', path: './header.html' },
+     *   { name: 'my-footer', path: './footer.html', useShadowDOM: false }
+     * ]);
+     *
+     * // Object syntax
+     * await ladrillos.registerComponents({
+     *   'my-header': './header.html',
+     *   'my-footer': { path: './footer.html', useShadowDOM: false }
+     * });
+     * ```
+     */
+    registerComponents(configs: ComponentConfig[] | Record<string, string | Omit<ComponentConfig, "name">>): Promise<RegisterComponentsResult>;
+    /**
+     * Force load a lazy component programmatically.
+     * Useful for preloading components before they're visible.
+     */
+    loadLazyComponent(name: string): Promise<LadrillosComponent | undefined>;
+}
+export declare const ladrillos: Ladrillos;
+export {};

package/dist/core/lazy/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Lazy Loading Module
+ * Re-exports all lazy loading utilities
+ */
+export { type LazyStrategy, type LazyStrategyFactory, lazyOnIdle, lazyOnVisible, lazyOnMedia, lazyOnInteraction, lazyOnDelay, defaultLazyStrategy, } from './lazyStrategies';
+export { initLazyLoader, registerLazyComponent, isLazyComponent, forceLoadLazyComponent, getLazyComponentTagName, } from './lazyLoader';

package/dist/core/lazy/lazyLoader.d.ts

@@ -0,0 +1,22 @@
+import { LadrillosComponent } from '../../types';
+import { LazyStrategy } from './lazyStrategies';
+/**
+ * Initialize the lazy loading system with the components registry
+ */
+export declare function initLazyLoader(registry: Record<string, LadrillosComponent>): void;
+/**
+ * Register a component for lazy loading
+ */
+export declare function registerLazyComponent(name: string, absolutePath: string, useShadowDOM: boolean, strategy: LazyStrategy): void;
+/**
+ * Check if a component is registered for lazy loading
+ */
+export declare function isLazyComponent(name: string): boolean;
+/**
+ * Force load a lazy component (for programmatic loading)
+ */
+export declare function forceLoadLazyComponent(name: string): Promise<LadrillosComponent | undefined>;
+/**
+ * Get the real tag name for a loaded lazy component
+ */
+export declare function getLazyComponentTagName(name: string): string | undefined;

package/dist/core/lazy/lazyStrategies.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Lazy Loading Strategies for LadrillosJS
+ *
+ * control over when lazy components are loaded.
+ */
+/**
+ * A lazy loading strategy function.
+ * @param load - Call this to trigger component loading
+ * @param element - The placeholder element being observed
+ * @returns Optional teardown function for cleanup
+ */
+export type LazyStrategy = (load: () => void, element: Element) => (() => void) | void;
+/**
+ * Factory function that creates a LazyStrategy with options
+ */
+export type LazyStrategyFactory<T = undefined> = T extends undefined ? () => LazyStrategy : (options?: T) => LazyStrategy;
+/**
+ * Load when the browser is idle.
+ * Uses requestIdleCallback with a timeout fallback.
+ *
+ * @param timeout - Max wait time in ms before forcing load (default: 10000)
+ *
+ * @example
+ * { name: 'analytics', path: './analytics.html', lazy: lazyOnIdle(5000) }
+ */
+export declare const lazyOnIdle: LazyStrategyFactory<number>;
+/**
+ * Load when element becomes visible in viewport.
+ * Uses IntersectionObserver for efficient visibility detection.
+ *
+ * @param options - IntersectionObserver options (rootMargin, threshold, etc.)
+ *
+ * @example
+ * // Load when 100px before entering viewport
+ * { name: 'footer', path: './footer.html', lazy: lazyOnVisible({ rootMargin: '100px' }) }
+ */
+export declare const lazyOnVisible: LazyStrategyFactory<IntersectionObserverInit>;
+/**
+ * Load when specified media query matches.
+ * Useful for mobile-only or desktop-only components.
+ *
+ * @param query - CSS media query string
+ *
+ * @example
+ * { name: 'mobile-nav', path: './mobile-nav.html', lazy: lazyOnMedia('(max-width: 768px)') }
+ */
+export declare const lazyOnMedia: LazyStrategyFactory<string>;
+/**
+ * Load when user interacts with the element.
+ * Replays the triggering event after component loads for seamless UX.
+ *
+ * @param events - Event type(s) to listen for (default: ['click', 'focusin'])
+ *
+ * @example
+ * { name: 'modal', path: './modal.html', lazy: lazyOnInteraction('click') }
+ * { name: 'form', path: './form.html', lazy: lazyOnInteraction(['focus', 'click']) }
+ */
+export declare const lazyOnInteraction: LazyStrategyFactory<string | string[]>;
+/**
+ * Load after a specified delay.
+ * Simple time-based loading for non-critical components.
+ *
+ * @param ms - Delay in milliseconds
+ *
+ * @example
+ * { name: 'chat-widget', path: './chat.html', lazy: lazyOnDelay(3000) }
+ */
+export declare const lazyOnDelay: LazyStrategyFactory<number>;
+/**
+ * Default lazy strategy - loads when visible with 100px root margin
+ * for smooth loading before element enters viewport
+ */
+export declare const defaultLazyStrategy: LazyStrategy;