@easemate/web-kit 0.2.0 → 0.3.0

package/build/internal/component-loaders.js

@@ -1,169 +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 const 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.)
- */
-export const WEB_KIT_COMPONENT_TAGS = ['ease-curve', 'ease-code'];
-/**
- * All public web-kit tags.
- */
-export const WEB_KIT_ALL_TAGS = [...WEB_KIT_ELEMENT_TAGS, ...WEB_KIT_COMPONENT_TAGS];
-/**
- * Internal/sub-component tags that are auto-registered with their parents.
- */
-export const 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.
- */
-export const COMPONENT_LOADERS = {
-    // Controls
-    'ease-button': () => import("../elements/button/index.js"),
-    'ease-checkbox': () => import("../elements/checkbox/index.js"),
-    'ease-color-input': () => import("../elements/color/index.js"),
-    'ease-color-picker': () => import("../elements/color/picker.js"),
-    'ease-dropdown': () => import("../elements/dropdown/index.js"),
-    'ease-input': () => import("../elements/input/index.js"),
-    'ease-number-input': () => import("../elements/number/index.js"),
-    'ease-origin': () => import("../elements/origin/index.js"),
-    'ease-radio-group': () => import("../elements/radio/index.js"),
-    'ease-radio-input': () => import("../elements/radio/input.js"),
-    'ease-slider': () => import("../elements/slider/index.js"),
-    'ease-toggle': () => import("../elements/toggle/index.js"),
-    // Layout
-    'ease-field': () => import("../elements/field/index.js"),
-    'ease-panel': () => import("../elements/panel/index.js"),
-    'ease-popover': () => import("../elements/popover/index.js"),
-    'ease-state': () => import("../elements/state/index.js"),
-    'ease-tooltip': () => import("../elements/tooltip/index.js"),
-    // Display
-    'ease-logo-loader': () => import("../elements/logo/index.js"),
-    'ease-monitor': () => import("../elements/monitor/index.js"),
-    'ease-monitor-fps': () => import("../elements/monitor/fps.js"),
-    // Icons
-    'ease-icon-anchor-add': () => import("../elements/icons/interface/anchor-add.js"),
-    'ease-icon-anchor-remove': () => import("../elements/icons/interface/anchor-remove.js"),
-    'ease-icon-arrow-up': () => import("../elements/icons/interface/arrow-up.js"),
-    'ease-icon-arrows-vertical': () => import("../elements/icons/interface/arrows-vertical.js"),
-    'ease-icon-bezier': () => import("../elements/icons/interface/bezier.js"),
-    'ease-icon-bezier-angle': () => import("../elements/icons/interface/bezier-angle.js"),
-    'ease-icon-bezier-distribute': () => import("../elements/icons/interface/bezier-distribute.js"),
-    'ease-icon-bezier-length': () => import("../elements/icons/interface/bezier-length.js"),
-    'ease-icon-bezier-mirror': () => import("../elements/icons/interface/bezier-mirror.js"),
-    'ease-icon-check': () => import("../elements/icons/interface/check.js"),
-    'ease-icon-chevron': () => import("../elements/icons/animation/chevron.js"),
-    'ease-icon-circle-arrow-left': () => import("../elements/icons/interface/circle-arrow-left.js"),
-    'ease-icon-circle-arrow-right': () => import("../elements/icons/interface/circle-arrow-right.js"),
-    'ease-icon-clear': () => import("../elements/icons/animation/clear.js"),
-    'ease-icon-code': () => import("../elements/icons/interface/code.js"),
-    'ease-icon-dots': () => import("../elements/icons/interface/dots.js"),
-    'ease-icon-grid': () => import("../elements/icons/animation/grid.js"),
-    'ease-icon-loading': () => import("../elements/icons/animation/loading.js"),
-    'ease-icon-mention': () => import("../elements/icons/interface/mention.js"),
-    'ease-icon-minus': () => import("../elements/icons/interface/minus.js"),
-    'ease-icon-picker': () => import("../elements/icons/interface/picker.js"),
-    'ease-icon-plus': () => import("../elements/icons/interface/plus.js"),
-    'ease-icon-settings': () => import("../elements/icons/interface/settings.js"),
-    'ease-icon-snap': () => import("../elements/icons/animation/snap.js"),
-    // Advanced components
-    'ease-curve': () => import("../components/curve/index.js"),
-    'ease-code': () => import("../components/code/index.js")
-};
-/**
- * Load specific components by tag name.
- */
-export async function loadComponents(tags) {
-    const promises = tags.map((tag) => {
-        const loader = COMPONENT_LOADERS[tag];
-        if (loader) {
-            return loader();
-        }
-        return Promise.resolve();
-    });
-    await Promise.all(promises);
-}
-/**
- * Load all components (equivalent to importing register.ts).
- */
-export async function loadAllComponents() {
-    await import("../register.js");
-}
-/**
- * Resolve which tags to load based on include/exclude options.
- */
-export 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) => WEB_KIT_ALL_TAGS.includes(tag));
-    }
-    // Otherwise, start with all tags and remove excluded ones
-    let tags = [...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/fonts.cjs

@@ -1,128 +0,0 @@
-"use strict";
-/**
- * Font loading utilities.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_FONTS = void 0;
-exports.injectFonts = injectFonts;
-exports.removeFonts = removeFonts;
-const style_inject_1 = require("./style-inject.cjs");
-const FONT_LINK_ID_PREFIX = 'ease-webkit-font-';
-const PRECONNECT_ID = 'ease-webkit-preconnect-google';
-/**
- * Default fonts used by the kit.
- */
-exports.DEFAULT_FONTS = {
-    'Instrument Sans': {
-        source: 'google',
-        family: 'Instrument Sans',
-        css2: 'opsz,wght@14..32,400..700'
-    },
-    'Geist Mono': {
-        source: 'google',
-        family: 'Geist Mono',
-        css2: 'wght@100..900'
-    }
-};
-/**
- * Generate a Google Fonts URL.
- */
-function buildGoogleFontUrl(family, css2) {
-    const encodedFamily = encodeURIComponent(family).replace(/%20/g, '+');
-    const params = css2 ? `:${css2}` : '';
-    return `https://fonts.googleapis.com/css2?family=${encodedFamily}${params}&display=swap`;
-}
-/**
- * Inject preconnect links for Google Fonts.
- */
-function injectPreconnect() {
-    if (!(0, style_inject_1.isBrowser)()) {
-        return;
-    }
-    // Check if already added
-    if (document.getElementById(PRECONNECT_ID)) {
-        return;
-    }
-    const head = document.head;
-    // preconnect to fonts.googleapis.com
-    const preconnect1 = document.createElement('link');
-    preconnect1.id = PRECONNECT_ID;
-    preconnect1.rel = 'preconnect';
-    preconnect1.href = 'https://fonts.googleapis.com';
-    head.appendChild(preconnect1);
-    // preconnect to fonts.gstatic.com
-    const preconnect2 = document.createElement('link');
-    preconnect2.rel = 'preconnect';
-    preconnect2.href = 'https://fonts.gstatic.com';
-    preconnect2.crossOrigin = 'anonymous';
-    head.appendChild(preconnect2);
-}
-/**
- * Inject a font link.
- */
-function injectFontLink(id, url) {
-    if (!(0, style_inject_1.isBrowser)()) {
-        return null;
-    }
-    const fullId = FONT_LINK_ID_PREFIX + id;
-    // Check if already injected
-    let link = document.getElementById(fullId);
-    if (link) {
-        return link;
-    }
-    link = document.createElement('link');
-    link.id = fullId;
-    link.rel = 'stylesheet';
-    link.href = url;
-    document.head.appendChild(link);
-    return link;
-}
-/**
- * Remove a font link.
- */
-function removeFontLink(id) {
-    if (!(0, style_inject_1.isBrowser)()) {
-        return;
-    }
-    const fullId = FONT_LINK_ID_PREFIX + id;
-    const link = document.getElementById(fullId);
-    if (link) {
-        link.remove();
-    }
-}
-/**
- * Inject fonts based on configuration.
- */
-function injectFonts(config, preconnect = true) {
-    if (config === false) {
-        return;
-    }
-    const fonts = config === 'default' ? exports.DEFAULT_FONTS : config;
-    if (preconnect) {
-        // Check if any Google fonts are being loaded
-        const hasGoogleFonts = Object.values(fonts).some((f) => f.source === 'google');
-        if (hasGoogleFonts) {
-            injectPreconnect();
-        }
-    }
-    for (const [name, source] of Object.entries(fonts)) {
-        const id = name.toLowerCase().replace(/\s+/g, '-');
-        if (source.source === 'google' && source.family) {
-            const url = buildGoogleFontUrl(source.family, source.css2);
-            injectFontLink(id, url);
-        }
-        else if (source.source === 'css' && source.url) {
-            injectFontLink(id, source.url);
-        }
-    }
-}
-/**
- * Remove all injected fonts.
- */
-function removeFonts(config) {
-    const fonts = config === 'default' ? exports.DEFAULT_FONTS : config;
-    for (const name of Object.keys(fonts)) {
-        const id = name.toLowerCase().replace(/\s+/g, '-');
-        removeFontLink(id);
-    }
-}

package/build/internal/fonts.d.cts

@@ -1,32 +0,0 @@
-/**
- * Font loading utilities.
- */
-/**
- * Font source configuration.
- */
-export interface FontSource {
-    /** Source type */
-    source: 'google' | 'css';
-    /** For Google fonts: the family name */
-    family?: string;
-    /** For Google fonts: the css2 query params (e.g., 'wght@400..700') */
-    css2?: string;
-    /** For CSS source: the URL to the CSS file */
-    url?: string;
-}
-/**
- * Font configuration map.
- */
-export type FontConfig = Record<string, FontSource>;
-/**
- * Default fonts used by the kit.
- */
-export declare const DEFAULT_FONTS: FontConfig;
-/**
- * Inject fonts based on configuration.
- */
-export declare function injectFonts(config: FontConfig | 'default' | false, preconnect?: boolean): void;
-/**
- * Remove all injected fonts.
- */
-export declare function removeFonts(config: FontConfig | 'default'): void;

package/build/internal/fonts.d.ts

@@ -1,32 +0,0 @@
-/**
- * Font loading utilities.
- */
-/**
- * Font source configuration.
- */
-export interface FontSource {
-    /** Source type */
-    source: 'google' | 'css';
-    /** For Google fonts: the family name */
-    family?: string;
-    /** For Google fonts: the css2 query params (e.g., 'wght@400..700') */
-    css2?: string;
-    /** For CSS source: the URL to the CSS file */
-    url?: string;
-}
-/**
- * Font configuration map.
- */
-export type FontConfig = Record<string, FontSource>;
-/**
- * Default fonts used by the kit.
- */
-export declare const DEFAULT_FONTS: FontConfig;
-/**
- * Inject fonts based on configuration.
- */
-export declare function injectFonts(config: FontConfig | 'default' | false, preconnect?: boolean): void;
-/**
- * Remove all injected fonts.
- */
-export declare function removeFonts(config: FontConfig | 'default'): void;

package/build/internal/fonts.js

@@ -1,123 +0,0 @@
-/**
- * Font loading utilities.
- */
-import { isBrowser } from "./style-inject.js";
-const FONT_LINK_ID_PREFIX = 'ease-webkit-font-';
-const PRECONNECT_ID = 'ease-webkit-preconnect-google';
-/**
- * Default fonts used by the kit.
- */
-export const DEFAULT_FONTS = {
-    'Instrument Sans': {
-        source: 'google',
-        family: 'Instrument Sans',
-        css2: 'opsz,wght@14..32,400..700'
-    },
-    'Geist Mono': {
-        source: 'google',
-        family: 'Geist Mono',
-        css2: 'wght@100..900'
-    }
-};
-/**
- * Generate a Google Fonts URL.
- */
-function buildGoogleFontUrl(family, css2) {
-    const encodedFamily = encodeURIComponent(family).replace(/%20/g, '+');
-    const params = css2 ? `:${css2}` : '';
-    return `https://fonts.googleapis.com/css2?family=${encodedFamily}${params}&display=swap`;
-}
-/**
- * Inject preconnect links for Google Fonts.
- */
-function injectPreconnect() {
-    if (!isBrowser()) {
-        return;
-    }
-    // Check if already added
-    if (document.getElementById(PRECONNECT_ID)) {
-        return;
-    }
-    const head = document.head;
-    // preconnect to fonts.googleapis.com
-    const preconnect1 = document.createElement('link');
-    preconnect1.id = PRECONNECT_ID;
-    preconnect1.rel = 'preconnect';
-    preconnect1.href = 'https://fonts.googleapis.com';
-    head.appendChild(preconnect1);
-    // preconnect to fonts.gstatic.com
-    const preconnect2 = document.createElement('link');
-    preconnect2.rel = 'preconnect';
-    preconnect2.href = 'https://fonts.gstatic.com';
-    preconnect2.crossOrigin = 'anonymous';
-    head.appendChild(preconnect2);
-}
-/**
- * Inject a font link.
- */
-function injectFontLink(id, url) {
-    if (!isBrowser()) {
-        return null;
-    }
-    const fullId = FONT_LINK_ID_PREFIX + id;
-    // Check if already injected
-    let link = document.getElementById(fullId);
-    if (link) {
-        return link;
-    }
-    link = document.createElement('link');
-    link.id = fullId;
-    link.rel = 'stylesheet';
-    link.href = url;
-    document.head.appendChild(link);
-    return link;
-}
-/**
- * Remove a font link.
- */
-function removeFontLink(id) {
-    if (!isBrowser()) {
-        return;
-    }
-    const fullId = FONT_LINK_ID_PREFIX + id;
-    const link = document.getElementById(fullId);
-    if (link) {
-        link.remove();
-    }
-}
-/**
- * Inject fonts based on configuration.
- */
-export function injectFonts(config, preconnect = true) {
-    if (config === false) {
-        return;
-    }
-    const fonts = config === 'default' ? DEFAULT_FONTS : config;
-    if (preconnect) {
-        // Check if any Google fonts are being loaded
-        const hasGoogleFonts = Object.values(fonts).some((f) => f.source === 'google');
-        if (hasGoogleFonts) {
-            injectPreconnect();
-        }
-    }
-    for (const [name, source] of Object.entries(fonts)) {
-        const id = name.toLowerCase().replace(/\s+/g, '-');
-        if (source.source === 'google' && source.family) {
-            const url = buildGoogleFontUrl(source.family, source.css2);
-            injectFontLink(id, url);
-        }
-        else if (source.source === 'css' && source.url) {
-            injectFontLink(id, source.url);
-        }
-    }
-}
-/**
- * Remove all injected fonts.
- */
-export function removeFonts(config) {
-    const fonts = config === 'default' ? DEFAULT_FONTS : config;
-    for (const name of Object.keys(fonts)) {
-        const id = name.toLowerCase().replace(/\s+/g, '-');
-        removeFontLink(id);
-    }
-}

package/build/internal/lazy-load.cjs

@@ -1,89 +0,0 @@
-"use strict";
-/**
- * Lazy loading utilities using MutationObserver.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createLazyLoader = createLazyLoader;
-const component_loaders_1 = require("./component-loaders.cjs");
-const style_inject_1 = require("./style-inject.cjs");
-/**
- * Create a lazy loader that auto-registers components when they appear in DOM.
- */
-function createLazyLoader(config = {}) {
-    if (!(0, style_inject_1.isBrowser)()) {
-        return {
-            dispose: () => { },
-            load: async () => { }
-        };
-    }
-    const { root = document, include, exclude, preload } = config;
-    // Determine which tags to watch
-    let watchTags = new Set([...component_loaders_1.WEB_KIT_ALL_TAGS]);
-    if (include && include.length > 0) {
-        watchTags = new Set(include.filter((tag) => component_loaders_1.WEB_KIT_ALL_TAGS.includes(tag)));
-    }
-    if (exclude && exclude.length > 0) {
-        for (const tag of exclude) {
-            watchTags.delete(tag);
-        }
-    }
-    // Track loaded components
-    const loaded = new Set();
-    // Load a component
-    const load = async (tag) => {
-        if (loaded.has(tag)) {
-            return;
-        }
-        const loader = component_loaders_1.COMPONENT_LOADERS[tag];
-        if (loader) {
-            loaded.add(tag);
-            await loader();
-        }
-    };
-    // Check if an element or its descendants need loading
-    const checkElement = (element) => {
-        const tagName = element.tagName.toLowerCase();
-        if (watchTags.has(tagName) && !loaded.has(tagName)) {
-            void load(tagName);
-        }
-        // Check children
-        for (const child of element.querySelectorAll('*')) {
-            const childTag = child.tagName.toLowerCase();
-            if (watchTags.has(childTag) && !loaded.has(childTag)) {
-                void load(childTag);
-            }
-        }
-    };
-    // Create observer
-    const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-            for (const node of mutation.addedNodes) {
-                if (node instanceof Element) {
-                    checkElement(node);
-                }
-            }
-        }
-    });
-    // Start observing
-    const target = root instanceof Document ? root.documentElement : root;
-    observer.observe(target, {
-        childList: true,
-        subtree: true
-    });
-    // Check existing elements
-    checkElement(target);
-    // Preload specified tags
-    if (preload && preload.length > 0) {
-        for (const tag of preload) {
-            if (component_loaders_1.WEB_KIT_ALL_TAGS.includes(tag)) {
-                void load(tag);
-            }
-        }
-    }
-    return {
-        dispose: () => {
-            observer.disconnect();
-        },
-        load
-    };
-}

package/build/internal/lazy-load.d.cts

@@ -1,32 +0,0 @@
-/**
- * Lazy loading utilities using MutationObserver.
- */
-import { type WebKitTag } from "./component-loaders.cjs";
-/**
- * Lazy load configuration.
- */
-export interface LazyLoadConfig {
-    /** MutationObserver strategy */
-    strategy?: 'mutation';
-    /** Root element to observe (default: document) */
-    root?: Document | Element;
-    /** Tags to include in lazy loading */
-    include?: readonly string[];
-    /** Tags to exclude from lazy loading */
-    exclude?: readonly string[];
-    /** Tags to preload immediately */
-    preload?: readonly string[];
-}
-/**
- * Lazy loader instance.
- */
-export interface LazyLoader {
-    /** Stop observing and cleanup */
-    dispose: () => void;
-    /** Manually load a component */
-    load: (tag: WebKitTag) => Promise<void>;
-}
-/**
- * Create a lazy loader that auto-registers components when they appear in DOM.
- */
-export declare function createLazyLoader(config?: LazyLoadConfig): LazyLoader;

package/build/internal/lazy-load.d.ts

@@ -1,32 +0,0 @@
-/**
- * Lazy loading utilities using MutationObserver.
- */
-import { type WebKitTag } from "./component-loaders.js";
-/**
- * Lazy load configuration.
- */
-export interface LazyLoadConfig {
-    /** MutationObserver strategy */
-    strategy?: 'mutation';
-    /** Root element to observe (default: document) */
-    root?: Document | Element;
-    /** Tags to include in lazy loading */
-    include?: readonly string[];
-    /** Tags to exclude from lazy loading */
-    exclude?: readonly string[];
-    /** Tags to preload immediately */
-    preload?: readonly string[];
-}
-/**
- * Lazy loader instance.
- */
-export interface LazyLoader {
-    /** Stop observing and cleanup */
-    dispose: () => void;
-    /** Manually load a component */
-    load: (tag: WebKitTag) => Promise<void>;
-}
-/**
- * Create a lazy loader that auto-registers components when they appear in DOM.
- */
-export declare function createLazyLoader(config?: LazyLoadConfig): LazyLoader;