@easemate/web-kit 0.2.0 → 0.3.0

package/build/init.js

@@ -1,289 +0,0 @@
-/**
- * Main initialization API for @easemate/web-kit
- */
-import { applyTheme, followSystemTheme } from "./theme/index.js";
-import { getTheme, isThemeRef } from "./theme/registry.js";
-// --------------------------
-// Helpers
-// --------------------------
-const isBrowser = () => typeof document !== 'undefined' && typeof window !== 'undefined';
-const isThemeModeConfig = (value) => {
-    if (typeof value !== 'object' || value === null) {
-        return false;
-    }
-    const obj = value;
-    return obj.mode !== undefined && (obj.light !== undefined || obj.dark !== undefined);
-};
-/**
- * Register replacement components before loading built-in ones.
- */
-function registerReplacements(replace) {
-    if (!isBrowser()) {
-        return;
-    }
-    for (const [tag, replacement] of Object.entries(replace)) {
-        // Skip if already defined
-        if (customElements.get(tag)) {
-            continue;
-        }
-        if (typeof replacement === 'function') {
-            // Register custom constructor
-            customElements.define(tag, replacement);
-        }
-        else if (typeof replacement === 'string') {
-            // Create a bridge element that renders the aliased tag
-            const aliasTag = replacement;
-            class BridgeElement extends HTMLElement {
-                _inner = null;
-                connectedCallback() {
-                    // Create the aliased element
-                    this._inner = document.createElement(aliasTag);
-                    // Copy attributes
-                    for (const attr of this.attributes) {
-                        this._inner.setAttribute(attr.name, attr.value);
-                    }
-                    // Move children
-                    while (this.firstChild) {
-                        this._inner.appendChild(this.firstChild);
-                    }
-                    // Use shadow DOM to contain the aliased element
-                    const shadow = this.attachShadow({ mode: 'open' });
-                    shadow.appendChild(this._inner);
-                }
-                disconnectedCallback() {
-                    this._inner = null;
-                }
-            }
-            customElements.define(tag, BridgeElement);
-        }
-    }
-}
-/**
- * Resolve and apply styles configuration.
- */
-async function applyStyles(styles, nonce) {
-    if (styles === false) {
-        return { dispose: () => { } };
-    }
-    const { injectPreset, removePreset } = await import("./internal/style-inject.js");
-    const injected = [];
-    if (typeof styles === 'string') {
-        injectPreset(styles, nonce);
-        injected.push(styles);
-    }
-    else if (typeof styles === 'object') {
-        if (styles.reset) {
-            injectPreset('reset', nonce);
-            injected.push('reset');
-        }
-        if (styles.base) {
-            injectPreset('base', nonce);
-            injected.push('base');
-        }
-    }
-    return {
-        dispose: () => {
-            for (const preset of injected) {
-                removePreset(preset);
-            }
-        }
-    };
-}
-/**
- * Resolve and apply theme configuration.
- */
-function applyThemeConfig(theme, target) {
-    if (isThemeModeConfig(theme)) {
-        // Light/dark mode configuration
-        const lightConfig = getTheme(theme.light);
-        const darkConfig = getTheme(theme.dark);
-        if (theme.mode === 'system') {
-            const cleanup = followSystemTheme({ light: lightConfig, dark: darkConfig }, { element: target });
-            return {
-                dispose: cleanup,
-                controller: {
-                    set: (t) => {
-                        const config = getTheme(t);
-                        applyTheme(config, { element: target });
-                    },
-                    mode: (m) => {
-                        if (m === 'system') {
-                            // Re-apply system theme
-                            const systemMode = window.matchMedia('(prefers-color-scheme: light)').matches
-                                ? 'light'
-                                : 'dark';
-                            const config = systemMode === 'light' ? lightConfig : darkConfig;
-                            applyTheme(config, {
-                                element: target,
-                                name: systemMode,
-                                colorScheme: systemMode
-                            });
-                        }
-                        else {
-                            const config = m === 'light' ? lightConfig : darkConfig;
-                            applyTheme(config, {
-                                element: target,
-                                name: m,
-                                colorScheme: m
-                            });
-                        }
-                    }
-                }
-            };
-        }
-        // Fixed mode
-        const config = theme.mode === 'light' ? lightConfig : darkConfig;
-        applyTheme(config, {
-            element: target,
-            name: theme.mode,
-            colorScheme: theme.mode
-        });
-        return {
-            dispose: () => { },
-            controller: {
-                set: (t) => {
-                    const resolvedConfig = getTheme(t);
-                    applyTheme(resolvedConfig, { element: target });
-                }
-            }
-        };
-    }
-    // Simple theme (name, ref, or config)
-    const config = getTheme(theme);
-    const name = isThemeRef(theme) ? theme.name : typeof theme === 'string' ? theme : undefined;
-    applyTheme(config, {
-        element: target,
-        name,
-        colorScheme: 'dark'
-    });
-    return {
-        dispose: () => { },
-        controller: {
-            set: (t) => {
-                const resolvedConfig = getTheme(t);
-                const themeName = isThemeRef(t) ? t.name : typeof t === 'string' ? t : undefined;
-                applyTheme(resolvedConfig, { element: target, name: themeName });
-            }
-        }
-    };
-}
-// --------------------------
-// Main API
-// --------------------------
-/**
- * Initialize the web-kit.
- *
- * @example
- * ```ts
- * // Basic usage - register all components with default theme
- * initWebKit({ theme: 'default' });
- *
- * // Selective loading
- * initWebKit({
- *   include: ['ease-button', 'ease-slider'],
- *   theme: 'default'
- * });
- *
- * // With styles
- * initWebKit({
- *   theme: 'default',
- *   styles: 'main',
- *   fonts: 'default'
- * });
- *
- * // Light/dark mode
- * initWebKit({
- *   theme: {
- *     mode: 'system',
- *     light: myLightTheme,
- *     dark: 'default'
- *   }
- * });
- * ```
- */
-export function initWebKit(options = {}) {
-    // SSR safety - no-op on server
-    if (!isBrowser()) {
-        return {
-            dispose: () => { },
-            ready: Promise.resolve()
-        };
-    }
-    const { include, exclude, replace, theme, target, styles = false, fonts = false, lazyLoad = false, cspNonce, dev } = options;
-    const disposers = [];
-    // Controller object that will be populated
-    const controller = {
-        dispose: () => {
-            for (const dispose of disposers) {
-                dispose();
-            }
-        },
-        theme: undefined,
-        ready: Promise.resolve()
-    };
-    // Build the ready promise
-    const readyPromise = (async () => {
-        // 1. Register replacements first (before loading any components)
-        if (replace) {
-            registerReplacements(replace);
-        }
-        // 2. Apply styles
-        const stylesResult = await applyStyles(styles, cspNonce);
-        disposers.push(stylesResult.dispose);
-        // 3. Apply theme
-        if (theme) {
-            const themeResult = applyThemeConfig(theme, target);
-            disposers.push(themeResult.dispose);
-            controller.theme = themeResult.controller;
-        }
-        // 4. Load fonts
-        if (fonts !== false) {
-            const { injectFonts, removeFonts } = await import("./internal/fonts.js");
-            injectFonts(fonts);
-            const fontsToRemove = fonts;
-            disposers.push(() => removeFonts(fontsToRemove));
-        }
-        // 5. Load components
-        if (lazyLoad) {
-            // Lazy loading mode
-            const { createLazyLoader } = await import("./internal/lazy-load.js");
-            const lazyConfig = typeof lazyLoad === 'object' ? lazyLoad : {};
-            // Apply include/exclude to lazy loader
-            if (include) {
-                lazyConfig.include = include;
-            }
-            else if (exclude) {
-                lazyConfig.exclude = exclude;
-            }
-            const loader = createLazyLoader(lazyConfig);
-            disposers.push(loader.dispose);
-        }
-        else {
-            // Eager loading mode
-            const { loadAllComponents, loadComponents, resolveTags } = await import("./internal/component-loaders.js");
-            if (include || exclude) {
-                const tags = resolveTags({ include, exclude });
-                if (dev?.warnUnknownTags) {
-                    const { WEB_KIT_ALL_TAGS } = await import("./internal/component-loaders.js");
-                    const allTags = new Set(WEB_KIT_ALL_TAGS);
-                    const unknown = (include ?? exclude ?? []).filter((t) => !allTags.has(t));
-                    if (unknown.length > 0) {
-                        console.warn('[web-kit] Unknown tags:', unknown);
-                    }
-                }
-                if (dev?.logLoads) {
-                    console.log('[web-kit] Loading components:', tags);
-                }
-                await loadComponents(tags);
-            }
-            else {
-                if (dev?.logLoads) {
-                    console.log('[web-kit] Loading all components');
-                }
-                await loadAllComponents();
-            }
-        }
-    })();
-    controller.ready = readyPromise;
-    return controller;
-}

package/build/internal/component-loaders.cjs

@@ -1,208 +0,0 @@
-"use strict";
-/**
- * Component loader map for dynamic imports.
- * Maps tag names to their module paths for selective/lazy loading.
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.COMPONENT_LOADERS = exports.WEB_KIT_INTERNAL_TAGS = exports.WEB_KIT_ALL_TAGS = exports.WEB_KIT_COMPONENT_TAGS = exports.WEB_KIT_ELEMENT_TAGS = void 0;
-exports.loadComponents = loadComponents;
-exports.loadAllComponents = loadAllComponents;
-exports.resolveTags = resolveTags;
-/**
- * All root-level web-kit element tags (excludes internal sub-components).
- */
-exports.WEB_KIT_ELEMENT_TAGS = [
-    // Controls
-    'ease-button',
-    'ease-checkbox',
-    'ease-color-input',
-    'ease-color-picker',
-    'ease-dropdown',
-    'ease-input',
-    'ease-number-input',
-    'ease-origin',
-    'ease-radio-group',
-    'ease-radio-input',
-    'ease-slider',
-    'ease-toggle',
-    // Layout
-    'ease-field',
-    'ease-panel',
-    'ease-popover',
-    'ease-state',
-    'ease-tooltip',
-    // Display
-    'ease-logo-loader',
-    'ease-monitor',
-    'ease-monitor-fps',
-    // Icons
-    'ease-icon-anchor-add',
-    'ease-icon-anchor-remove',
-    'ease-icon-arrow-up',
-    'ease-icon-arrows-vertical',
-    'ease-icon-bezier',
-    'ease-icon-bezier-angle',
-    'ease-icon-bezier-distribute',
-    'ease-icon-bezier-length',
-    'ease-icon-bezier-mirror',
-    'ease-icon-check',
-    'ease-icon-chevron',
-    'ease-icon-circle-arrow-left',
-    'ease-icon-circle-arrow-right',
-    'ease-icon-clear',
-    'ease-icon-code',
-    'ease-icon-dots',
-    'ease-icon-grid',
-    'ease-icon-loading',
-    'ease-icon-mention',
-    'ease-icon-minus',
-    'ease-icon-picker',
-    'ease-icon-plus',
-    'ease-icon-settings',
-    'ease-icon-snap'
-];
-/**
- * Advanced component tags (curve, code editor, etc.)
- */
-exports.WEB_KIT_COMPONENT_TAGS = ['ease-curve', 'ease-code'];
-/**
- * All public web-kit tags.
- */
-exports.WEB_KIT_ALL_TAGS = [...exports.WEB_KIT_ELEMENT_TAGS, ...exports.WEB_KIT_COMPONENT_TAGS];
-/**
- * Internal/sub-component tags that are auto-registered with their parents.
- */
-exports.WEB_KIT_INTERNAL_TAGS = [
-    'ease-curve-canvas',
-    'ease-curve-canvas-controls',
-    'ease-curve-controls',
-    'ease-curve-output',
-    'ease-curve-toolbar',
-    'radio-option'
-];
-/**
- * Map of tag names to their loader functions.
- * These use dynamic imports so we only load what's needed.
- */
-exports.COMPONENT_LOADERS = {
-    // Controls
-    'ease-button': () => Promise.resolve().then(() => __importStar(require("../elements/button/index.cjs"))),
-    'ease-checkbox': () => Promise.resolve().then(() => __importStar(require("../elements/checkbox/index.cjs"))),
-    'ease-color-input': () => Promise.resolve().then(() => __importStar(require("../elements/color/index.cjs"))),
-    'ease-color-picker': () => Promise.resolve().then(() => __importStar(require("../elements/color/picker.cjs"))),
-    'ease-dropdown': () => Promise.resolve().then(() => __importStar(require("../elements/dropdown/index.cjs"))),
-    'ease-input': () => Promise.resolve().then(() => __importStar(require("../elements/input/index.cjs"))),
-    'ease-number-input': () => Promise.resolve().then(() => __importStar(require("../elements/number/index.cjs"))),
-    'ease-origin': () => Promise.resolve().then(() => __importStar(require("../elements/origin/index.cjs"))),
-    'ease-radio-group': () => Promise.resolve().then(() => __importStar(require("../elements/radio/index.cjs"))),
-    'ease-radio-input': () => Promise.resolve().then(() => __importStar(require("../elements/radio/input.cjs"))),
-    'ease-slider': () => Promise.resolve().then(() => __importStar(require("../elements/slider/index.cjs"))),
-    'ease-toggle': () => Promise.resolve().then(() => __importStar(require("../elements/toggle/index.cjs"))),
-    // Layout
-    'ease-field': () => Promise.resolve().then(() => __importStar(require("../elements/field/index.cjs"))),
-    'ease-panel': () => Promise.resolve().then(() => __importStar(require("../elements/panel/index.cjs"))),
-    'ease-popover': () => Promise.resolve().then(() => __importStar(require("../elements/popover/index.cjs"))),
-    'ease-state': () => Promise.resolve().then(() => __importStar(require("../elements/state/index.cjs"))),
-    'ease-tooltip': () => Promise.resolve().then(() => __importStar(require("../elements/tooltip/index.cjs"))),
-    // Display
-    'ease-logo-loader': () => Promise.resolve().then(() => __importStar(require("../elements/logo/index.cjs"))),
-    'ease-monitor': () => Promise.resolve().then(() => __importStar(require("../elements/monitor/index.cjs"))),
-    'ease-monitor-fps': () => Promise.resolve().then(() => __importStar(require("../elements/monitor/fps.cjs"))),
-    // Icons
-    'ease-icon-anchor-add': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/anchor-add.cjs"))),
-    'ease-icon-anchor-remove': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/anchor-remove.cjs"))),
-    'ease-icon-arrow-up': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/arrow-up.cjs"))),
-    'ease-icon-arrows-vertical': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/arrows-vertical.cjs"))),
-    'ease-icon-bezier': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/bezier.cjs"))),
-    'ease-icon-bezier-angle': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/bezier-angle.cjs"))),
-    'ease-icon-bezier-distribute': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/bezier-distribute.cjs"))),
-    'ease-icon-bezier-length': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/bezier-length.cjs"))),
-    'ease-icon-bezier-mirror': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/bezier-mirror.cjs"))),
-    'ease-icon-check': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/check.cjs"))),
-    'ease-icon-chevron': () => Promise.resolve().then(() => __importStar(require("../elements/icons/animation/chevron.cjs"))),
-    'ease-icon-circle-arrow-left': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/circle-arrow-left.cjs"))),
-    'ease-icon-circle-arrow-right': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/circle-arrow-right.cjs"))),
-    'ease-icon-clear': () => Promise.resolve().then(() => __importStar(require("../elements/icons/animation/clear.cjs"))),
-    'ease-icon-code': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/code.cjs"))),
-    'ease-icon-dots': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/dots.cjs"))),
-    'ease-icon-grid': () => Promise.resolve().then(() => __importStar(require("../elements/icons/animation/grid.cjs"))),
-    'ease-icon-loading': () => Promise.resolve().then(() => __importStar(require("../elements/icons/animation/loading.cjs"))),
-    'ease-icon-mention': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/mention.cjs"))),
-    'ease-icon-minus': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/minus.cjs"))),
-    'ease-icon-picker': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/picker.cjs"))),
-    'ease-icon-plus': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/plus.cjs"))),
-    'ease-icon-settings': () => Promise.resolve().then(() => __importStar(require("../elements/icons/interface/settings.cjs"))),
-    'ease-icon-snap': () => Promise.resolve().then(() => __importStar(require("../elements/icons/animation/snap.cjs"))),
-    // Advanced components
-    'ease-curve': () => Promise.resolve().then(() => __importStar(require("../components/curve/index.cjs"))),
-    'ease-code': () => Promise.resolve().then(() => __importStar(require("../components/code/index.cjs")))
-};
-/**
- * Load specific components by tag name.
- */
-async function loadComponents(tags) {
-    const promises = tags.map((tag) => {
-        const loader = exports.COMPONENT_LOADERS[tag];
-        if (loader) {
-            return loader();
-        }
-        return Promise.resolve();
-    });
-    await Promise.all(promises);
-}
-/**
- * Load all components (equivalent to importing register.ts).
- */
-async function loadAllComponents() {
-    await Promise.resolve().then(() => __importStar(require("../register.cjs")));
-}
-/**
- * Resolve which tags to load based on include/exclude options.
- */
-function resolveTags(options) {
-    const { include, exclude } = options;
-    // If include is specified, use those (filtered to valid tags)
-    if (include && include.length > 0) {
-        return include.filter((tag) => exports.WEB_KIT_ALL_TAGS.includes(tag));
-    }
-    // Otherwise, start with all tags and remove excluded ones
-    let tags = [...exports.WEB_KIT_ALL_TAGS];
-    if (exclude && exclude.length > 0) {
-        const excludeSet = new Set(exclude);
-        tags = tags.filter((tag) => !excludeSet.has(tag));
-    }
-    return tags;
-}

package/build/internal/component-loaders.d.cts

@@ -1,52 +0,0 @@
-/**
- * Component loader map for dynamic imports.
- * Maps tag names to their module paths for selective/lazy loading.
- */
-/**
- * All root-level web-kit element tags (excludes internal sub-components).
- */
-export declare const WEB_KIT_ELEMENT_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-panel", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap"];
-/**
- * Advanced component tags (curve, code editor, etc.)
- */
-export declare const WEB_KIT_COMPONENT_TAGS: readonly ["ease-curve", "ease-code"];
-/**
- * All public web-kit tags.
- */
-export declare const WEB_KIT_ALL_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-panel", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap", "ease-curve", "ease-code"];
-/**
- * Union type of all element tag names.
- */
-export type WebKitElementTag = (typeof WEB_KIT_ELEMENT_TAGS)[number];
-/**
- * Union type of all component tag names.
- */
-export type WebKitComponentTag = (typeof WEB_KIT_COMPONENT_TAGS)[number];
-/**
- * Union type of all public tag names.
- */
-export type WebKitTag = (typeof WEB_KIT_ALL_TAGS)[number];
-/**
- * Internal/sub-component tags that are auto-registered with their parents.
- */
-export declare const WEB_KIT_INTERNAL_TAGS: readonly ["ease-curve-canvas", "ease-curve-canvas-controls", "ease-curve-controls", "ease-curve-output", "ease-curve-toolbar", "radio-option"];
-/**
- * Map of tag names to their loader functions.
- * These use dynamic imports so we only load what's needed.
- */
-export declare const COMPONENT_LOADERS: Record<WebKitTag, () => Promise<unknown>>;
-/**
- * Load specific components by tag name.
- */
-export declare function loadComponents(tags: readonly WebKitTag[]): Promise<void>;
-/**
- * Load all components (equivalent to importing register.ts).
- */
-export declare function loadAllComponents(): Promise<void>;
-/**
- * Resolve which tags to load based on include/exclude options.
- */
-export declare function resolveTags(options: {
-    include?: readonly string[];
-    exclude?: readonly string[];
-}): WebKitTag[];

package/build/internal/component-loaders.d.ts

@@ -1,52 +0,0 @@
-/**
- * Component loader map for dynamic imports.
- * Maps tag names to their module paths for selective/lazy loading.
- */
-/**
- * All root-level web-kit element tags (excludes internal sub-components).
- */
-export declare const WEB_KIT_ELEMENT_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-panel", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap"];
-/**
- * Advanced component tags (curve, code editor, etc.)
- */
-export declare const WEB_KIT_COMPONENT_TAGS: readonly ["ease-curve", "ease-code"];
-/**
- * All public web-kit tags.
- */
-export declare const WEB_KIT_ALL_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-panel", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap", "ease-curve", "ease-code"];
-/**
- * Union type of all element tag names.
- */
-export type WebKitElementTag = (typeof WEB_KIT_ELEMENT_TAGS)[number];
-/**
- * Union type of all component tag names.
- */
-export type WebKitComponentTag = (typeof WEB_KIT_COMPONENT_TAGS)[number];
-/**
- * Union type of all public tag names.
- */
-export type WebKitTag = (typeof WEB_KIT_ALL_TAGS)[number];
-/**
- * Internal/sub-component tags that are auto-registered with their parents.
- */
-export declare const WEB_KIT_INTERNAL_TAGS: readonly ["ease-curve-canvas", "ease-curve-canvas-controls", "ease-curve-controls", "ease-curve-output", "ease-curve-toolbar", "radio-option"];
-/**
- * Map of tag names to their loader functions.
- * These use dynamic imports so we only load what's needed.
- */
-export declare const COMPONENT_LOADERS: Record<WebKitTag, () => Promise<unknown>>;
-/**
- * Load specific components by tag name.
- */
-export declare function loadComponents(tags: readonly WebKitTag[]): Promise<void>;
-/**
- * Load all components (equivalent to importing register.ts).
- */
-export declare function loadAllComponents(): Promise<void>;
-/**
- * Resolve which tags to load based on include/exclude options.
- */
-export declare function resolveTags(options: {
-    include?: readonly string[];
-    exclude?: readonly string[];
-}): WebKitTag[];