@easemate/web-kit 0.2.0 → 0.3.0

package/build/internal/lazy-load.js

@@ -1,86 +0,0 @@
-/**
- * Lazy loading utilities using MutationObserver.
- */
-import { COMPONENT_LOADERS, WEB_KIT_ALL_TAGS } from "./component-loaders.js";
-import { isBrowser } from "./style-inject.js";
-/**
- * Create a lazy loader that auto-registers components when they appear in DOM.
- */
-export function createLazyLoader(config = {}) {
-    if (!isBrowser()) {
-        return {
-            dispose: () => { },
-            load: async () => { }
-        };
-    }
-    const { root = document, include, exclude, preload } = config;
-    // Determine which tags to watch
-    let watchTags = new Set([...WEB_KIT_ALL_TAGS]);
-    if (include && include.length > 0) {
-        watchTags = new Set(include.filter((tag) => 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[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 (WEB_KIT_ALL_TAGS.includes(tag)) {
-                void load(tag);
-            }
-        }
-    }
-    return {
-        dispose: () => {
-            observer.disconnect();
-        },
-        load
-    };
-}

package/build/internal/style-inject.cjs

@@ -1,236 +0,0 @@
-"use strict";
-/**
- * Style injection utilities for runtime CSS application.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MAIN_CSS = exports.BASE_CSS = exports.RESET_CSS = exports.isBrowser = void 0;
-exports.injectStyle = injectStyle;
-exports.removeStyle = removeStyle;
-exports.hasStyle = hasStyle;
-exports.getPresetCSS = getPresetCSS;
-exports.injectPreset = injectPreset;
-exports.removePreset = removePreset;
-const STYLE_ID_PREFIX = 'ease-webkit-';
-/**
- * Check if we're in a browser environment.
- */
-const isBrowser = () => typeof document !== 'undefined' && typeof window !== 'undefined';
-exports.isBrowser = isBrowser;
-/**
- * Inject a style tag with the given CSS content.
- */
-function injectStyle(id, css, nonce) {
-    if (!(0, exports.isBrowser)()) {
-        return null;
-    }
-    const fullId = STYLE_ID_PREFIX + id;
-    // Check if already injected
-    let style = document.getElementById(fullId);
-    if (style) {
-        // Update content if different
-        if (style.textContent !== css) {
-            style.textContent = css;
-        }
-        return style;
-    }
-    // Create new style element
-    style = document.createElement('style');
-    style.id = fullId;
-    style.textContent = css;
-    if (nonce) {
-        style.nonce = nonce;
-    }
-    document.head.appendChild(style);
-    return style;
-}
-/**
- * Remove an injected style tag.
- */
-function removeStyle(id) {
-    if (!(0, exports.isBrowser)()) {
-        return;
-    }
-    const fullId = STYLE_ID_PREFIX + id;
-    const style = document.getElementById(fullId);
-    if (style) {
-        style.remove();
-    }
-}
-/**
- * Check if a style is already injected.
- */
-function hasStyle(id) {
-    if (!(0, exports.isBrowser)()) {
-        return false;
-    }
-    const fullId = STYLE_ID_PREFIX + id;
-    return document.getElementById(fullId) !== null;
-}
-// --------------------------
-// Preset styles
-// --------------------------
-/**
- * Minimal reset styles (box-sizing, etc.)
- */
-exports.RESET_CSS = `
-@layer ease-reset {
-  *,
-  *::after,
-  *::before {
-    box-sizing: border-box;
-    transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1);
-  }
-
-  :where(html) {
-    color-scheme: light dark;
-    hanging-punctuation: first allow-end last;
-    interpolate-size: allow-keywords;
-    scroll-behavior: smooth;
-    scrollbar-gutter: stable;
-    text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  :where(html.translated-rtl) {
-    direction: rtl;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where(html) {
-      scroll-behavior: auto;
-    }
-  }
-
-  :where(body) {
-    min-block-size: 100svb;
-    min-inline-size: 300px;
-  }
-
-  :where(canvas, img, picture, svg, video) {
-    block-size: auto;
-    border: none;
-    display: block;
-    max-inline-size: 100%;
-  }
-
-  :where(button) {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  :where(textarea) {
-    resize: vertical;
-  }
-
-  :where(textarea:not([rows])) {
-    field-sizing: content;
-  }
-
-  :where(fieldset, iframe) {
-    border: none;
-  }
-
-  :where(p, li, h1, h2, h3, h4, h5, h6) {
-    overflow-wrap: break-word;
-    text-wrap: pretty;
-    margin: 0;
-  }
-
-  :where(abbr[title]) {
-    border: none;
-    text-decoration: none;
-  }
-
-  :where(cite) {
-    font-style: inherit;
-  }
-
-  :where(small) {
-    font-size: inherit;
-  }
-
-  :where(li, ol, ul) {
-    list-style: none;
-  }
-
-  :where(nav:not([role='list'])):is(ul, li, ol, ul) {
-    margin: 0;
-    padding: 0;
-  }
-
-  :where(dialog, [popover]) {
-    background: transparent;
-    border: none;
-    color: inherit;
-    margin: auto;
-    max-block-size: none;
-    max-inline-size: none;
-    position: fixed;
-  }
-
-  :where([popover]) {
-    inset: auto;
-  }
-
-  :where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
-    display: none;
-  }
-
-  :where([hidden]:not([hidden='until-found'])) {
-    display: none;
-  }
-}
-`.trim();
-/**
- * Base body/html styles for dark theme.
- */
-exports.BASE_CSS = `
-html,
-body {
-  background-color: var(--color-gray-900);
-}
-
-body {
-  font-family: var(--ease-font-family, 'Instrument Sans', sans-serif);
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
-  font-variation-settings: 'wdth' 100;
-  min-height: 100dvh;
-  color: var(--color-gray-600);
-}
-`.trim();
-/**
- * Combined main styles (reset + base).
- */
-exports.MAIN_CSS = `${exports.RESET_CSS}\n\n${exports.BASE_CSS}`;
-/**
- * Get CSS content for a preset.
- */
-function getPresetCSS(preset) {
-    switch (preset) {
-        case 'reset':
-            return exports.RESET_CSS;
-        case 'base':
-            return exports.BASE_CSS;
-        case 'main':
-            return exports.MAIN_CSS;
-        default:
-            return '';
-    }
-}
-/**
- * Inject preset styles.
- */
-function injectPreset(preset, nonce) {
-    const css = getPresetCSS(preset);
-    return injectStyle(preset, css, nonce);
-}
-/**
- * Remove preset styles.
- */
-function removePreset(preset) {
-    removeStyle(preset);
-}

package/build/internal/style-inject.d.cts

@@ -1,44 +0,0 @@
-/**
- * Style injection utilities for runtime CSS application.
- */
-/**
- * Check if we're in a browser environment.
- */
-export declare const isBrowser: () => boolean;
-/**
- * Inject a style tag with the given CSS content.
- */
-export declare function injectStyle(id: string, css: string, nonce?: string): HTMLStyleElement | null;
-/**
- * Remove an injected style tag.
- */
-export declare function removeStyle(id: string): void;
-/**
- * Check if a style is already injected.
- */
-export declare function hasStyle(id: string): boolean;
-/**
- * Minimal reset styles (box-sizing, etc.)
- */
-export declare const RESET_CSS: string;
-/**
- * Base body/html styles for dark theme.
- */
-export declare const BASE_CSS: string;
-/**
- * Combined main styles (reset + base).
- */
-export declare const MAIN_CSS: string;
-export type StylePreset = 'reset' | 'base' | 'main';
-/**
- * Get CSS content for a preset.
- */
-export declare function getPresetCSS(preset: StylePreset): string;
-/**
- * Inject preset styles.
- */
-export declare function injectPreset(preset: StylePreset, nonce?: string): HTMLStyleElement | null;
-/**
- * Remove preset styles.
- */
-export declare function removePreset(preset: StylePreset): void;

package/build/internal/style-inject.d.ts

@@ -1,44 +0,0 @@
-/**
- * Style injection utilities for runtime CSS application.
- */
-/**
- * Check if we're in a browser environment.
- */
-export declare const isBrowser: () => boolean;
-/**
- * Inject a style tag with the given CSS content.
- */
-export declare function injectStyle(id: string, css: string, nonce?: string): HTMLStyleElement | null;
-/**
- * Remove an injected style tag.
- */
-export declare function removeStyle(id: string): void;
-/**
- * Check if a style is already injected.
- */
-export declare function hasStyle(id: string): boolean;
-/**
- * Minimal reset styles (box-sizing, etc.)
- */
-export declare const RESET_CSS: string;
-/**
- * Base body/html styles for dark theme.
- */
-export declare const BASE_CSS: string;
-/**
- * Combined main styles (reset + base).
- */
-export declare const MAIN_CSS: string;
-export type StylePreset = 'reset' | 'base' | 'main';
-/**
- * Get CSS content for a preset.
- */
-export declare function getPresetCSS(preset: StylePreset): string;
-/**
- * Inject preset styles.
- */
-export declare function injectPreset(preset: StylePreset, nonce?: string): HTMLStyleElement | null;
-/**
- * Remove preset styles.
- */
-export declare function removePreset(preset: StylePreset): void;

package/build/internal/style-inject.js

@@ -1,226 +0,0 @@
-/**
- * Style injection utilities for runtime CSS application.
- */
-const STYLE_ID_PREFIX = 'ease-webkit-';
-/**
- * Check if we're in a browser environment.
- */
-export const isBrowser = () => typeof document !== 'undefined' && typeof window !== 'undefined';
-/**
- * Inject a style tag with the given CSS content.
- */
-export function injectStyle(id, css, nonce) {
-    if (!isBrowser()) {
-        return null;
-    }
-    const fullId = STYLE_ID_PREFIX + id;
-    // Check if already injected
-    let style = document.getElementById(fullId);
-    if (style) {
-        // Update content if different
-        if (style.textContent !== css) {
-            style.textContent = css;
-        }
-        return style;
-    }
-    // Create new style element
-    style = document.createElement('style');
-    style.id = fullId;
-    style.textContent = css;
-    if (nonce) {
-        style.nonce = nonce;
-    }
-    document.head.appendChild(style);
-    return style;
-}
-/**
- * Remove an injected style tag.
- */
-export function removeStyle(id) {
-    if (!isBrowser()) {
-        return;
-    }
-    const fullId = STYLE_ID_PREFIX + id;
-    const style = document.getElementById(fullId);
-    if (style) {
-        style.remove();
-    }
-}
-/**
- * Check if a style is already injected.
- */
-export function hasStyle(id) {
-    if (!isBrowser()) {
-        return false;
-    }
-    const fullId = STYLE_ID_PREFIX + id;
-    return document.getElementById(fullId) !== null;
-}
-// --------------------------
-// Preset styles
-// --------------------------
-/**
- * Minimal reset styles (box-sizing, etc.)
- */
-export const RESET_CSS = `
-@layer ease-reset {
-  *,
-  *::after,
-  *::before {
-    box-sizing: border-box;
-    transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1);
-  }
-
-  :where(html) {
-    color-scheme: light dark;
-    hanging-punctuation: first allow-end last;
-    interpolate-size: allow-keywords;
-    scroll-behavior: smooth;
-    scrollbar-gutter: stable;
-    text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  :where(html.translated-rtl) {
-    direction: rtl;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where(html) {
-      scroll-behavior: auto;
-    }
-  }
-
-  :where(body) {
-    min-block-size: 100svb;
-    min-inline-size: 300px;
-  }
-
-  :where(canvas, img, picture, svg, video) {
-    block-size: auto;
-    border: none;
-    display: block;
-    max-inline-size: 100%;
-  }
-
-  :where(button) {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  :where(textarea) {
-    resize: vertical;
-  }
-
-  :where(textarea:not([rows])) {
-    field-sizing: content;
-  }
-
-  :where(fieldset, iframe) {
-    border: none;
-  }
-
-  :where(p, li, h1, h2, h3, h4, h5, h6) {
-    overflow-wrap: break-word;
-    text-wrap: pretty;
-    margin: 0;
-  }
-
-  :where(abbr[title]) {
-    border: none;
-    text-decoration: none;
-  }
-
-  :where(cite) {
-    font-style: inherit;
-  }
-
-  :where(small) {
-    font-size: inherit;
-  }
-
-  :where(li, ol, ul) {
-    list-style: none;
-  }
-
-  :where(nav:not([role='list'])):is(ul, li, ol, ul) {
-    margin: 0;
-    padding: 0;
-  }
-
-  :where(dialog, [popover]) {
-    background: transparent;
-    border: none;
-    color: inherit;
-    margin: auto;
-    max-block-size: none;
-    max-inline-size: none;
-    position: fixed;
-  }
-
-  :where([popover]) {
-    inset: auto;
-  }
-
-  :where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
-    display: none;
-  }
-
-  :where([hidden]:not([hidden='until-found'])) {
-    display: none;
-  }
-}
-`.trim();
-/**
- * Base body/html styles for dark theme.
- */
-export const BASE_CSS = `
-html,
-body {
-  background-color: var(--color-gray-900);
-}
-
-body {
-  font-family: var(--ease-font-family, 'Instrument Sans', sans-serif);
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
-  font-variation-settings: 'wdth' 100;
-  min-height: 100dvh;
-  color: var(--color-gray-600);
-}
-`.trim();
-/**
- * Combined main styles (reset + base).
- */
-export const MAIN_CSS = `${RESET_CSS}\n\n${BASE_CSS}`;
-/**
- * Get CSS content for a preset.
- */
-export function getPresetCSS(preset) {
-    switch (preset) {
-        case 'reset':
-            return RESET_CSS;
-        case 'base':
-            return BASE_CSS;
-        case 'main':
-            return MAIN_CSS;
-        default:
-            return '';
-    }
-}
-/**
- * Inject preset styles.
- */
-export function injectPreset(preset, nonce) {
-    const css = getPresetCSS(preset);
-    return injectStyle(preset, css, nonce);
-}
-/**
- * Remove preset styles.
- */
-export function removePreset(preset) {
-    removeStyle(preset);
-}

package/build/react/events.cjs

@@ -1,25 +0,0 @@
-"use strict";
-/**
- * React event handling utilities for @easemate/web-kit
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createEventHandler = createEventHandler;
-/**
- * Creates a type-safe event handler for control-change events.
- *
- * @example
- * ```tsx
- * <ease-slider
- *   name="opacity"
- *   value={0.5}
- *   onControlChange={createEventHandler<number>((value, name) => {
- *     console.log(`${name} changed to ${value}`);
- *   })}
- * />
- * ```
- */
-function createEventHandler(callback) {
-    return (e) => {
-        callback(e.detail.value, e.detail.name, e.detail.event);
-    };
-}

package/build/react/events.d.cts

@@ -1,39 +0,0 @@
-/**
- * React event handling utilities for @easemate/web-kit
- */
-import type { TabChangeEventDetail } from '../elements/panel';
-import type { ControlEventDetail } from '../elements/shared';
-import type { StateChangeEventDetail } from '../elements/state';
-/**
- * Control change event type for React
- */
-export interface ControlChangeEvent<T = unknown> extends CustomEvent<ControlEventDetail<T>> {
-    detail: ControlEventDetail<T>;
-}
-/**
- * State change event type for React
- */
-export interface StateChangeEvent extends CustomEvent<StateChangeEventDetail> {
-    detail: StateChangeEventDetail;
-}
-/**
- * Tab change event type for React
- */
-export interface TabChangeEvent extends CustomEvent<TabChangeEventDetail> {
-    detail: TabChangeEventDetail;
-}
-/**
- * Creates a type-safe event handler for control-change events.
- *
- * @example
- * ```tsx
- * <ease-slider
- *   name="opacity"
- *   value={0.5}
- *   onControlChange={createEventHandler<number>((value, name) => {
- *     console.log(`${name} changed to ${value}`);
- *   })}
- * />
- * ```
- */
-export declare function createEventHandler<T = unknown>(callback: (value: T, name: string | undefined, event: Event) => void): (e: CustomEvent<ControlEventDetail<T>>) => void;