@easemate/web-kit 0.1.0

package/build/internal/fonts.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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

@@ -0,0 +1,123 @@
+/**
+ * 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

@@ -0,0 +1,89 @@
+"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

@@ -0,0 +1,32 @@
+/**
+ * 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

@@ -0,0 +1,32 @@
+/**
+ * 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;

package/build/internal/lazy-load.js

@@ -0,0 +1,86 @@
+/**
+ * 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

@@ -0,0 +1,236 @@
+"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

@@ -0,0 +1,44 @@
+/**
+ * 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;