@ahriknow/lux 0.0.1

package/dist/lux.js

@@ -0,0 +1,1792 @@
+/**
+ * Lux Template System
+ *
+ * Supports:
+ *   - html/svg tagged templates with template caching
+ *   - Child text interpolation: <div>${value}</div>
+ *   - Event binding: <button @click=${handler}>
+ *   - Property binding: <input .value=${val}>
+ *   - Boolean attribute: <div ?hidden=${cond}>
+ *   - Plain attribute: <div id=${val}>
+ *   - Class binding: <div class=${classMap({...})}>
+ *   - Style binding: <div style=${styleMap({...})}>
+ *   - Ref binding: <input ref=${el => ...}>
+ *   - Directives: repeat, when, classMap, styleMap, guard, show
+ *   - Template caching, incremental DOM updates
+ *   - nothing sentinel for clearing content
+ */
+
+// ─── Template type markers ───
+const HTML_RESULT = 1;
+const SVG_RESULT = 2;
+
+// ─── Sentinels ───
+const nothing = Symbol.for('lux-nothing');
+
+// ─── html / svg tagged template functions ───
+function html(strings, ...values) {
+    return { _$luxType$: HTML_RESULT, strings, values };
+}
+
+function svg(strings, ...values) {
+    return { _$luxType$: SVG_RESULT, strings, values };
+}
+
+function css(strings, ...values) {
+    return { _$luxType$: 3, strings, values };
+}
+
+function isTemplateResult(value) {
+    return value && value._$luxType$ !== undefined;
+}
+
+// ─── HTML escaping ──
+function escapeHtml(value) {
+    if (value == null) return '';
+    const str = String(value);
+    if (str.indexOf('<') === -1 && str.indexOf('>') === -1 && str.indexOf('&') === -1) return str;
+    return str.replace(
+        /[<>&"']/g,
+        (c) => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;' })[c]
+    );
+}
+
+// ─── Part marker regex ──
+const ATTR_BINDING_RE = /(?:([@.?][\w-]+)|(ref)|(class))=\s*$/;
+
+// ─── Template parsing ──
+function parseTemplate(strings) {
+    const parts = [];
+    let html = '';
+    for (let i = 0; i < strings.length; i++) {
+        html += strings[i];
+        if (i < strings.length - 1) {
+            const attrMatch = html.match(ATTR_BINDING_RE);
+            if (attrMatch) {
+                const prefixed = attrMatch[1];
+                const isRef = !!attrMatch[2];
+                const isClass = !!attrMatch[3];
+                let prefix = '';
+                let name = '';
+                if (prefixed) {
+                    prefix = prefixed[0];
+                    name = prefixed.slice(1);
+                } else if (isRef) {
+                    prefix = 'ref';
+                    name = 'ref';
+                } else if (isClass) {
+                    prefix = 'class';
+                    name = 'class';
+                }
+                const marker = `lux-attr-${i}`;
+                html = html.slice(0, -attrMatch[0].length) + `${marker}="${name}" `;
+                parts.push({ type: 'attr', name, prefix, marker, index: i });
+            } else {
+                const marker = `lux-${i}`;
+                html += `<!--${marker}-->`;
+                parts.push({ type: 'child', marker, index: i });
+            }
+        }
+    }
+    return { html, parts };
+}
+
+// ─── Commit functions ──
+
+function commitValue(container, value, context) {
+    if (value === nothing || value == null) {
+        clearContainer(container);
+        return;
+    }
+
+    if (isRepeatResult(value)) {
+        commitRepeat(container, value);
+        return;
+    }
+
+    if (isTemplateResult(value)) {
+        render(value, container);
+        return;
+    }
+
+    if (Array.isArray(value)) {
+        clearContainer(container);
+        for (const item of value) {
+            if (isTemplateResult(item)) {
+                const span = document.createElement('span');
+                span.style.display = 'contents';
+                render(item, span);
+                container.appendChild(span);
+            } else if (item instanceof Node) {
+                container.appendChild(item);
+            } else if (item != null && item !== false) {
+                container.appendChild(document.createTextNode(String(item)));
+            }
+        }
+        return;
+    }
+
+    if (value instanceof Node) {
+        clearContainer(container);
+        container.appendChild(value);
+        return;
+    }
+
+    // Primitive — replace content (don't append)
+    if (container.childNodes.length === 1 && container.firstChild.nodeType === Node.TEXT_NODE) {
+        container.firstChild.textContent = String(value);
+    } else {
+        clearContainer(container);
+        container.appendChild(document.createTextNode(String(value)));
+    }
+}
+
+function clearContainer(container) {
+    while (container.firstChild) {
+        container.removeChild(container.firstChild);
+    }
+}
+
+function commitAttrPart(part, value) {
+    const { element, name, prefix } = part;
+
+    switch (prefix) {
+        case '@': {
+            // Event binding
+            const oldHandler = part.committedValue;
+
+            // Determine if we should remove/add based on value changes
+            const isNothing = value == null || value === nothing;
+            const shouldRemoveListener =
+                (isNothing && oldHandler != null) ||
+                value?.capture !== oldHandler?.capture ||
+                value?.once !== oldHandler?.once ||
+                value?.passive !== oldHandler?.passive;
+
+            const shouldAddListener = !isNothing && (oldHandler == null || shouldRemoveListener);
+
+            if (shouldRemoveListener) {
+                element.removeEventListener(name, part._handler || oldHandler, oldHandler);
+            }
+
+            if (shouldAddListener) {
+                if (typeof value === 'function') {
+                    // Wrap handler to preserve `this` as the host element
+                    const host =
+                        part._host ||
+                        (part._host = {
+                            handleEvent(e) {
+                                const fn = part.committedValue;
+                                if (typeof fn === 'function') {
+                                    // Use host element (custom element instance) as `this`
+                                    const hostEl = element.getRootNode().host || element;
+                                    fn.call(hostEl, e);
+                                }
+                            },
+                        });
+                    part._handler = host;
+                    element.addEventListener(name, host);
+                } else if (typeof value === 'object' && value?.handleEvent) {
+                    // EventListenerObject: { handleEvent(event) }
+                    const host = { handleEvent: (e) => value.handleEvent.call(value, e) };
+                    part._handler = host;
+                    element.addEventListener(name, host, {
+                        capture: value.capture,
+                        once: value.once,
+                        passive: value.passive,
+                    });
+                }
+            }
+
+            part.committedValue = value;
+            break;
+        }
+        case '.': {
+            // Property binding
+            element[name] = value === nothing ? undefined : value;
+            break;
+        }
+        case '?': {
+            // Boolean attribute binding
+            element.toggleAttribute(name, !!value);
+            break;
+        }
+        case 'ref': {
+            // Ref binding
+            if (typeof value === 'function') {
+                value(element);
+            }
+            break;
+        }
+        case 'class': {
+            // Class binding
+            if (typeof value === 'string') {
+                element.className = value;
+            } else if (typeof value === 'object' && value != null) {
+                const existing = element.className || '';
+                const names = existing ? existing.split(/\s+/) : [];
+                for (const [cls, active] of Object.entries(value)) {
+                    if (active) {
+                        if (!names.includes(cls)) names.push(cls);
+                    } else {
+                        const idx = names.indexOf(cls);
+                        if (idx !== -1) names.splice(idx, 1);
+                    }
+                }
+                element.className = names.filter(Boolean).join(' ');
+            }
+            break;
+        }
+        default: {
+            // Plain attribute
+            if (value == null || value === false) {
+                element.removeAttribute(name);
+            } else {
+                element.setAttribute(name, value === true ? '' : String(value));
+            }
+        }
+    }
+}
+
+// ─── render() function ──
+
+function render(result, container, context) {
+    if (!isTemplateResult(result)) {
+        container.textContent = result ?? '';
+        return;
+    }
+
+    const { strings, values } = result;
+
+    // Incremental update
+    if (container._luxActiveParts && container._luxStrings === strings) {
+        for (const part of container._luxActiveParts) {
+            if (part.index < values.length) {
+                if (part.type === 'child') {
+                    commitValue(part.span, values[part.index]);
+                } else {
+                    commitAttrPart(part, values[part.index]);
+                }
+            }
+        }
+        return;
+    }
+
+    // First render — build part list
+    const tpl = document.createElement('template');
+    const parsed = parseTemplate(strings);
+    tpl.innerHTML = parsed.html;
+    const fragment = tpl.content.cloneNode(true);
+    const activeParts = [];
+
+    for (const part of parsed.parts) {
+        if (part.type === 'child') {
+            const walker = document.createTreeWalker(fragment, NodeFilter.SHOW_COMMENT);
+            let node;
+            while ((node = walker.nextNode())) {
+                if (node.data === part.marker) {
+                    const span = document.createElement('span');
+                    span.style.display = 'contents';
+                    node.parentNode.replaceChild(span, node);
+                    commitValue(span, values[part.index]);
+                    activeParts.push({ type: 'child', span, index: part.index });
+                    break;
+                }
+            }
+        } else {
+            const element = fragment.querySelector(`[${part.marker}]`);
+            if (element) {
+                element.removeAttribute(part.marker);
+                const ap = {
+                    type: 'attr',
+                    element,
+                    name: part.name,
+                    prefix: part.prefix,
+                    index: part.index,
+                    committedValue: undefined,
+                };
+                commitAttrPart(ap, values[part.index]);
+                activeParts.push(ap);
+            }
+        }
+    }
+
+    container.textContent = '';
+    container.appendChild(fragment);
+    container._luxActiveParts = activeParts;
+    container._luxStrings = strings;
+}
+
+// ─── Directives ──
+
+/**
+ * repeat(items, keyFn, renderFn) — keyed list rendering
+ */
+function repeat(items, keyFn, renderFn) {
+    return { _type: 'repeat', items, keyFn, renderFn };
+}
+
+function isRepeatResult(value) {
+    return value && value._type === 'repeat';
+}
+
+function commitRepeat(container, value, context) {
+    const { items, keyFn, renderFn } = value;
+    const state = container._repeatState;
+
+    // Clear old content
+    if (state) {
+        for (const entry of state.entries) {
+            if (entry.span && entry.span.parentNode) {
+                entry.span.parentNode.removeChild(entry.span);
+            }
+        }
+    }
+
+    // Build new content
+    const frag = document.createDocumentFragment();
+    const entries = [];
+    for (const item of items) {
+        const key = keyFn(item);
+        const result = renderFn(item);
+        const span = document.createElement('span');
+        span.style.display = 'contents';
+        if (isTemplateResult(result)) {
+            render(result, span);
+        } else if (result != null && result !== false) {
+            span.appendChild(document.createTextNode(String(result)));
+        }
+        frag.appendChild(span);
+        entries.push({ key, result, span });
+    }
+    container.appendChild(frag);
+    container._repeatState = { entries };
+}
+
+/**
+ * when(condition, trueFn, falseFn) — conditional rendering
+ */
+function when(condition, trueFn, falseFn = () => '') {
+    return condition ? trueFn() : falseFn();
+}
+
+/**
+ * show(condition, content) — show/hide element
+ */
+function show(condition, content = '') {
+    return condition ? content : '';
+}
+
+/**
+ * classMap(classes) — dynamic class binding helper
+ */
+function classMap(classes) {
+    return classes;
+}
+
+/**
+ * styleMap(styles) — dynamic style binding helper
+ */
+function styleMap(styles) {
+    return styles;
+}
+
+/**
+ * guard(dependencies, fn) — re-render only when dependencies change
+ */
+function guard(dependencies, fn) {
+    return fn();
+}
+
+/**
+ * LuxElement — Base class for Web Components.
+ *
+ * Inherits: HTMLElement → LuxElement
+ * Features: reactive properties, Shadow DOM, lifecycle, controllers, update batching
+ */
+
+
+// ─── Update scheduling ───
+const pendingUpdates = new Set();
+let updateScheduled = false;
+
+function scheduleMicroTask(fn) {
+    Promise.resolve().then(fn);
+}
+
+function enqueueUpdate(element) {
+    pendingUpdates.add(element);
+    if (!updateScheduled) {
+        updateScheduled = true;
+        scheduleMicroTask(() => {
+            updateScheduled = false;
+            const elements = [...pendingUpdates];
+            pendingUpdates.clear();
+            for (const el of elements) {
+                el._$performUpdate();
+            }
+        });
+    }
+}
+
+// ─── Default converter (attribute ↔ property) ───
+const defaultConverter = {
+    toAttribute(value, type) {
+        switch (type) {
+            case Boolean:
+                return value ? '' : null;
+            case Object:
+            case Array:
+                return value == null ? null : JSON.stringify(value);
+            default:
+                return value;
+        }
+    },
+    fromAttribute(value, type) {
+        switch (type) {
+            case Boolean:
+                return value !== null;
+            case Number:
+                return Number(value);
+            case Object:
+            case Array:
+                try {
+                    return JSON.parse(value);
+                } catch {
+                    return null;
+                }
+            default:
+                return value;
+        }
+    },
+};
+
+// ─── LuxElement ───
+class LuxElement extends HTMLElement {
+    // ─── Static: properties declaration ───
+    static properties = {};
+    static styles = undefined;
+
+    // ─── Static: finalization ───
+    static finalized = false;
+    static elementProperties = new Map();
+
+    // ─── Static: __prepare() — subclass isolation ───
+    static __prepare() {
+        if (this.hasOwnProperty('elementProperties')) {
+            return;
+        }
+        // Finalize any superclasses first
+        const superCtor = Object.getPrototypeOf(this);
+        if (superCtor.finalize) {
+            superCtor.finalize();
+        }
+        // Copy superclass elementProperties into own Map
+        this.elementProperties = new Map(superCtor.elementProperties);
+    }
+
+    static get observedAttributes() {
+        this.finalize();
+        return this.__attributeToPropertyMap ? [...this.__attributeToPropertyMap.keys()] : [];
+    }
+
+    static finalize() {
+        if (this.hasOwnProperty('finalized')) {
+            return;
+        }
+        this.finalized = true;
+        this.__prepare();
+
+        // Create properties from the static properties block
+        if (this.hasOwnProperty('properties')) {
+            const props = this.properties;
+            const propKeys = [
+                ...Object.getOwnPropertyNames(props),
+                ...Object.getOwnPropertySymbols(props),
+            ];
+            for (const p of propKeys) {
+                this.createProperty(p, props[p]);
+            }
+        }
+
+        // Create the attribute-to-property map
+        this.__attributeToPropertyMap = new Map();
+        for (const [p, options] of this.elementProperties) {
+            const attr = this.__attributeNameForProperty(p, options);
+            if (attr !== undefined) {
+                this.__attributeToPropertyMap.set(attr, p);
+            }
+        }
+
+        this.elementStyles = this.styles;
+    }
+
+    static __attributeNameForProperty(name, options) {
+        const attribute = options.attribute;
+        return attribute === false
+            ? undefined
+            : typeof attribute === 'string'
+              ? attribute
+              : typeof name === 'string'
+                ? name.replace(/([A-Z])/g, '-$1').toLowerCase()
+                : undefined;
+    }
+
+    // ─── Static: createProperty ───
+    static createProperty(name, options = {}) {
+        this.__prepare();
+        if (this.elementProperties.has(name)) return;
+
+        if (options.state) {
+            options = { ...options, attribute: false };
+        }
+
+        this.elementProperties.set(name, options);
+
+        if (!options.noAccessor) {
+            const key = Symbol();
+            const descriptor = this.getPropertyDescriptor(name, key, options);
+            if (descriptor !== undefined) {
+                Object.defineProperty(this.prototype, name, descriptor);
+            }
+        }
+    }
+
+    static getPropertyDescriptor(name, key, options) {
+        const { type, reflect, converter } = options;
+        converter?.toAttribute ?? defaultConverter.toAttribute;
+
+        return {
+            get() {
+                return this[key];
+            },
+            set(value) {
+                const oldValue = this[key];
+                this[key] = value;
+                this.requestUpdate(name, oldValue, options);
+            },
+            configurable: true,
+            enumerable: true,
+        };
+    }
+
+    // ─── Static: addInitializer ───
+    static _initializers = [];
+
+    static addInitializer(fn) {
+        this._initializers = [...(this._initializers || []), fn];
+    }
+
+    // ─── Static: shadowRootOptions ───
+    static shadowRootOptions = { mode: 'open' };
+
+    // ─── Constructor ───
+    constructor() {
+        super();
+
+        this.__updatePending = false;
+        this.__hasUpdated = false;
+        this.__controllers = new Set();
+        this.__reflectingProperty = null;
+
+        // Ensure finalized
+        if (!this.constructor.hasOwnProperty('finalized')) {
+            this.constructor.finalize();
+        }
+
+        // CloneNode support: save any properties set before upgrade
+        this.__saveInstanceProperties();
+
+        this.requestUpdate();
+
+        for (const fn of this.constructor._initializers || []) {
+            fn(this);
+        }
+    }
+
+    // ─── Instance properties save/replay (cloneNode support) ───
+    __saveInstanceProperties() {
+        const elementProperties = this.constructor.elementProperties;
+        if (!elementProperties) return;
+
+        for (const [name, options] of elementProperties) {
+            if (options.noAccessor) continue;
+
+            if (this.hasOwnProperty(name)) {
+                // Plain property set before setter was defined (cloneNode)
+                const value = this[name];
+                delete this[name];
+                // Store via the Symbol key
+                this.__instancePropertyValues = this.__instancePropertyValues || new Map();
+                this.__instancePropertyValues.set(name, value);
+            }
+        }
+    }
+
+    // ─── Lifecycle callbacks ───
+    connectedCallback() {
+        this.__controllers.forEach((c) => c.hostConnected?.());
+
+        // Ensure finalized
+        if (!this.constructor.hasOwnProperty('finalized')) {
+            this.constructor.finalize();
+        }
+
+        // Sync existing attributes to properties (upgrade scenario)
+        // attributeChangedCallback doesn't fire for pre-existing attributes
+        const attrMap = this.constructor.__attributeToPropertyMap;
+        if (attrMap) {
+            for (const [attrName, propName] of attrMap) {
+                const value = this.getAttribute(attrName);
+                if (value !== null) {
+                    const options = this.constructor.elementProperties.get(propName);
+                    if (options) {
+                        const fromAttr =
+                            options.converter?.fromAttribute ?? defaultConverter.fromAttribute;
+                        this[propName] = fromAttr(value, options.type);
+                    }
+                }
+            }
+        }
+
+        // Replay instance properties saved by __saveInstanceProperties (cloneNode)
+        if (this.__instancePropertyValues) {
+            for (const [name, value] of this.__instancePropertyValues) {
+                this[name] = value;
+            }
+            this.__instancePropertyValues = undefined;
+        }
+
+        // Ensure renderRoot is created
+        this.renderRoot;
+
+        // Trigger first update if not yet done
+        if (!this.__hasUpdated) {
+            this.requestUpdate();
+        }
+    }
+
+    disconnectedCallback() {
+        this.__controllers.forEach((c) => c.hostDisconnected?.());
+    }
+
+    attributeChangedCallback(name, _old, value) {
+        const propName = this.constructor.__attributeToPropertyMap?.get(name);
+        if (propName !== undefined && this.__reflectingProperty !== propName) {
+            const options = this.constructor.elementProperties.get(propName);
+            if (options) {
+                const converter =
+                    typeof options.converter === 'function'
+                        ? { fromAttribute: options.converter }
+                        : options.converter?.fromAttribute !== undefined
+                          ? options.converter
+                          : defaultConverter;
+                this.__reflectingProperty = propName;
+                const convertedValue = converter.fromAttribute(value, options.type);
+                this[propName] = convertedValue;
+                this.__reflectingProperty = null;
+            }
+        }
+    }
+
+    // ─── RenderRoot & Styles ───
+    get renderRoot() {
+        if (!this._renderRoot) {
+            this._renderRoot = this.createRenderRoot();
+            this.__adoptStyles();
+        }
+        return this._renderRoot;
+    }
+
+    createRenderRoot() {
+        return this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    }
+
+    __adoptStyles() {
+        const styles = this.constructor.elementStyles;
+        if (!styles) return;
+
+        const items = Array.isArray(styles) ? styles : [styles];
+        const parts = [];
+        for (const item of items) {
+            if (typeof item === 'string') {
+                parts.push(item);
+            } else if (isTemplateResult(item)) {
+                parts.push(item.strings.join(''));
+            }
+        }
+        if (parts.length === 0) return;
+
+        if (this._renderRoot.adoptedStyleSheets !== undefined) {
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(parts.join('\n'));
+            this._renderRoot.adoptedStyleSheets = [...this._renderRoot.adoptedStyleSheets, sheet];
+        } else {
+            const tag = document.createElement('style');
+            tag.textContent = parts.join('\n');
+            this._renderRoot.appendChild(tag);
+        }
+    }
+
+    // ─── Update lifecycle ───
+    enableUpdating(_requestedUpdate) {}
+
+    get updateComplete() {
+        return this.__updateCompletePromise ?? Promise.resolve();
+    }
+
+    get hasUpdated() {
+        return this.__hasUpdated;
+    }
+
+    get isUpdatePending() {
+        return this.__updatePending;
+    }
+
+    requestUpdate(name, oldValue, options) {
+        if (name !== undefined) {
+            const hasChanged = options?.hasChanged ?? ((v, o) => !Object.is(v, o));
+            if (!hasChanged(this[name], oldValue)) return;
+        }
+
+        if (!this.__updatePending) {
+            this.__updatePending = true;
+            enqueueUpdate(this);
+        }
+    }
+
+    async performUpdate() {
+        if (!this.isUpdatePending) return;
+
+        this.__updatePending = false;
+
+        this.willUpdate(new Map());
+
+        this.__controllers.forEach((c) => c.hostUpdate?.());
+
+        this.update(new Map());
+
+        this.__hasUpdated = true;
+
+        // Reflect properties to attributes after update
+        for (const [name, options] of this.constructor.elementProperties) {
+            if (options.reflect) {
+                const value = this[name];
+                const toAttribute = options.converter?.toAttribute ?? defaultConverter.toAttribute;
+                const attr = this.constructor.__attributeNameForProperty(name, options);
+                if (attr !== undefined) {
+                    this.__reflectingProperty = name;
+                    const attrValue = toAttribute(value, options.type);
+                    if (attrValue === null || attrValue === undefined) {
+                        this.removeAttribute(attr);
+                    } else {
+                        this.setAttribute(attr, String(attrValue));
+                    }
+                    this.__reflectingProperty = null;
+                }
+            }
+        }
+
+        this.__controllers.forEach((c) => c.hostUpdated?.());
+        this.firstUpdated(new Map());
+        this.updated(new Map());
+    }
+
+    _$performUpdate() {
+        this.performUpdate();
+    }
+
+    // ─── Lifecycle hooks ───
+    shouldUpdate(_changedProperties) {
+        return true;
+    }
+
+    willUpdate(_changedProperties) {}
+
+    update(_changedProperties) {
+        const result = this.render();
+        if (result) {
+            render(result, this.renderRoot);
+        }
+    }
+
+    render() {
+        return html``;
+    }
+
+    firstUpdated(_changedProperties) {}
+    updated(_changedProperties) {}
+    propertyChangedCallback(_name, _oldValue, _newValue) {}
+
+    // ─── Controller API ───
+    addController(controller) {
+        this.__controllers.add(controller);
+        if (this.isConnected) {
+            controller.hostConnected?.();
+        }
+    }
+
+    removeController(controller) {
+        this.__controllers.delete(controller);
+    }
+
+    // ─── Utilities ───
+    emit(type, detail, options = {}) {
+        return this.dispatchEvent(
+            new CustomEvent(type, {
+                detail,
+                bubbles: true,
+                composed: true,
+                ...options,
+            })
+        );
+    }
+
+    $(selector) {
+        return this.renderRoot.querySelector(selector);
+    }
+
+    $$(selector) {
+        return this.renderRoot.querySelectorAll(selector);
+    }
+}
+
+// ─── Register component ───
+function registerComponent$1(name, component) {
+    if (!name.includes('-')) {
+        throw new Error(`Component name must contain a hyphen: ${name}`);
+    }
+    if (!customElements.get(name)) {
+        customElements.define(name, component);
+    }
+}
+
+// ─── createComponent (function-based components) ───
+function createComponent(renderFn, options = {}) {
+    const { properties = {} } = options;
+
+    class DynamicComponent extends LuxElement {
+        static properties = properties;
+        render() {
+            return renderFn.call(this, this);
+        }
+    }
+
+    return DynamicComponent;
+}
+
+/**
+ * Lux Router - Hash-based SPA routing
+ *
+ * Usage:
+ *   const router = createRouter({ routes: [...] });
+ *   router.push('/users/123');
+ *
+ * Routes accept component classes or lazy loaders:
+ *   { path: '/', component: HomePage }                    // direct class
+ *   { path: '/admin', component: () => import('./admin.js') }  // lazy
+ */
+
+function registerComponent(name, component) {
+    if (!name.includes('-')) throw new Error(`Component name must contain a hyphen: ${name}`);
+    if (!customElements.get(name)) customElements.define(name, component);
+}
+
+// ─── Route matching ───
+
+function pathToRegex(pattern) {
+    let seg = pattern.replace(/\/+$/, '') || '/';
+    if (seg === '/') return /^\/?$/;
+    const re = '^' + seg.replace(/:(\w+)/g, '([^/]+)').replace(/\(\.\*\)/g, '(.*)') + '$';
+    return new RegExp(re);
+}
+
+function extractParamNames(pattern) {
+    const names = [];
+    const re = /:(\w+)/g;
+    let m;
+    while ((m = re.exec(pattern))) names.push(m[1]);
+    return names;
+}
+
+function parseQuery(hash) {
+    const idx = hash.indexOf('?');
+    if (idx === -1) return {};
+    const params = {};
+    for (const pair of hash.slice(idx + 1).split('&')) {
+        const [k, v] = pair.split('=');
+        if (k) params[decodeURIComponent(k)] = v ? decodeURIComponent(v) : '';
+    }
+    return params;
+}
+
+function getPathFromHash(hash) {
+    return hash.replace(/^#/, '').split('?')[0] || '/';
+}
+
+function resolveComponent(componentOrLoader) {
+    if (typeof componentOrLoader === 'string') {
+        return Promise.resolve(componentOrLoader);
+    }
+    if (
+        typeof componentOrLoader === 'function' &&
+        componentOrLoader.prototype instanceof HTMLElement
+    ) {
+        return ensureRegistered(componentOrLoader);
+    }
+    if (typeof componentOrLoader === 'function') {
+        // Assume lazy loader: () => import(...)
+        return componentOrLoader().then((mod) => {
+            const Comp = mod.default || mod[Object.keys(mod)[0]];
+            return ensureRegistered(Comp);
+        });
+    }
+    return Promise.resolve(null);
+}
+
+function ensureRegistered(ComponentClass) {
+    if (!ComponentClass || !ComponentClass.prototype) return Promise.resolve(null);
+
+    const tagName = ComponentClass.tagName || classToTag(ComponentClass.name);
+
+    // Already registered?
+    if (customElements.get(tagName)) {
+        return Promise.resolve(tagName);
+    }
+
+    registerComponent(tagName, ComponentClass);
+    return Promise.resolve(tagName);
+}
+
+function classToTag(name) {
+    // HomePage → home-page, UserProfile → user-profile
+    return name
+        .replace(/([A-Z])/g, '-$1')
+        .toLowerCase()
+        .replace(/^-/, '');
+}
+
+// ─── Router class ───
+
+class Router {
+    constructor(options = {}) {
+        this.routes = (options.routes || []).map((r) => ({
+            ...r,
+            _regex: pathToRegex(r.path),
+            _paramNames: extractParamNames(r.path),
+            _children: (r.children || []).map((c) => ({
+                ...c,
+                _regex: pathToRegex(c.path),
+                _paramNames: extractParamNames(c.path),
+            })),
+        }));
+
+        this._guards = [];
+        this._listeners = [];
+        this.current = null;
+        this._prev = null;
+        this._onHashChange = this._onHashChange.bind(this);
+    }
+
+    start() {
+        window.addEventListener('hashchange', this._onHashChange);
+        this._resolve();
+    }
+
+    stop() {
+        window.removeEventListener('hashchange', this._onHashChange);
+    }
+
+    push(path) {
+        location.hash = path;
+    }
+
+    replace(path) {
+        const url = new URL(location.href);
+        url.hash = path;
+        history.replaceState(null, '', url.toString());
+        this._onHashChange();
+    }
+
+    back() {
+        history.back();
+    }
+    forward() {
+        history.forward();
+    }
+
+    beforeEach(fn) {
+        this._guards.push(fn);
+        return () => {
+            const i = this._guards.indexOf(fn);
+            if (i >= 0) this._guards.splice(i, 1);
+        };
+    }
+
+    _subscribe(fn) {
+        this._listeners.push(fn);
+        return () => {
+            const i = this._listeners.indexOf(fn);
+            if (i >= 0) this._listeners.splice(i, 1);
+        };
+    }
+
+    _onHashChange() {
+        this._resolve();
+    }
+
+    _resolve() {
+        const hash = location.hash || '#/';
+        const path = getPathFromHash(hash);
+        const query = parseQuery(hash);
+
+        let matched = null;
+        for (const route of this.routes) {
+            const hasChildren = route._children.length > 0;
+
+            // For routes with children, use prefix matching
+            // For leaf routes, use exact matching
+            let m;
+            if (hasChildren) {
+                // Prefix match: path must start with route path
+                const prefix = route.path === '/' ? '' : route.path.replace(/\/+$/, '');
+                if (
+                    path === prefix ||
+                    path.startsWith(prefix + '/') ||
+                    (prefix === '' && path.startsWith('/'))
+                ) {
+                    m = [path]; // fake match for prefix
+                }
+            } else {
+                m = path.match(route._regex);
+            }
+
+            if (m) {
+                const params = {};
+                route._paramNames.forEach((name, i) => {
+                    if (m[i + 1] !== undefined) params[name] = decodeURIComponent(m[i + 1]);
+                });
+                matched = { route, params: { ...params }, query, path };
+
+                // Child matching (check BEFORE redirect)
+                if (hasChildren) {
+                    const prefix = route.path === '/' ? '' : route.path.replace(/\/+$/, '');
+                    const childPath = path.slice(prefix.length) || '/';
+                    let childMatched = false;
+                    for (const child of route._children) {
+                        const cm = childPath.match(child._regex);
+                        if (cm) {
+                            const childParams = {};
+                            child._paramNames.forEach((name, i) => {
+                                childParams[name] = decodeURIComponent(cm[i + 1]);
+                            });
+                            matched.child = {
+                                route: child,
+                                params: { ...params, ...childParams },
+                                query,
+                                path,
+                            };
+                            childMatched = true;
+                            break;
+                        }
+                    }
+                    // No child matched — redirect only if path equals parent path
+                    if (
+                        !childMatched &&
+                        route.redirect &&
+                        path === (route.path === '/' ? '/' : route.path)
+                    ) {
+                        this.replace(route.redirect);
+                        return;
+                    }
+                    // No child matched and no redirect — skip this parent, try other routes
+                    if (!childMatched) {
+                        matched = null;
+                        continue;
+                    }
+                } else if (route.redirect) {
+                    this.replace(route.redirect);
+                    return;
+                }
+                break;
+            }
+        }
+
+        if (!matched) {
+            this.current = { route: null, params: {}, query, path };
+        } else {
+            this.current = matched;
+        }
+
+        for (const guard of this._guards) {
+            if (guard(this.current, this._prev) === false) {
+                if (this._prev) history.replaceState(null, '', '#' + this._prev.path);
+                return;
+            }
+        }
+
+        this._prev = { ...this.current };
+        for (const fn of this._listeners) fn(this.current);
+    }
+}
+
+// ─── Create router + register <router-outlet> ───
+
+function createRouter(options) {
+    const router = new Router(options);
+
+    if (!customElements.get('router-outlet')) {
+        class RouterOutlet extends HTMLElement {
+            connectedCallback() {
+                this.style.display = 'contents';
+                this._unsub = router._subscribe(() => this._update());
+                this._update();
+            }
+
+            disconnectedCallback() {
+                this._unsub?.();
+                this._loadingAbort?.abort();
+            }
+
+            async _update() {
+                const match = this._getMatch();
+                this._loadingAbort?.abort();
+
+                if (!match || !match.route || !match.route.component) {
+                    this.textContent = '';
+                    return;
+                }
+
+                // Skip re-render if the same route is already rendered
+                if (this._lastRoute === match.route) {
+                    return;
+                }
+
+                const controller = new AbortController();
+                this._loadingAbort = controller;
+
+                try {
+                    const tagName = await resolveComponent(match.route.component);
+                    if (controller.signal.aborted) return;
+
+                    this.textContent = '';
+                    if (tagName) {
+                        const el = document.createElement(tagName);
+                        if (match.params) el.params = match.params;
+                        if (match.query) el.query = match.query;
+                        this.appendChild(el);
+                        this._lastRoute = match.route;
+                    }
+                } catch (e) {
+                    if (!controller.signal.aborted) {
+                        console.error('[Lux Router] Failed to load component:', e);
+                        this.textContent = '';
+                    }
+                }
+            }
+
+            _getMatch() {
+                const level = parseInt(this.getAttribute('level')) || 0;
+                let match = router.current;
+                for (let i = 0; i < level; i++) {
+                    if (!match || !match.child) return null;
+                    match = match.child;
+                }
+                return match;
+            }
+        }
+        registerComponent('router-outlet', RouterOutlet);
+    }
+
+    router.start();
+    return router;
+}
+
+/**
+ * ICU MessageFormat subset parser
+ *
+ * Supports:
+ *   - Simple interpolation: "Hello, {name}"
+ *   - Plural: "{count, plural, =0{No items} =1{# item} other{# items}}"
+ *   - Select: "{gender, select, male{He} female{She} other{They}}"
+ */
+
+/**
+ * Find the matching closing brace for an opening brace at position `start`.
+ */
+function findMatchingBrace(str, start) {
+    let depth = 1;
+    for (let i = start + 1; i < str.length; i++) {
+        if (str[i] === '{') depth++;
+        else if (str[i] === '}') {
+            depth--;
+            if (depth === 0) return i;
+        }
+    }
+    return -1;
+}
+
+/**
+ * Extract all top-level {...} expressions from the template.
+ */
+function extractExpressions(template) {
+    const parts = [];
+    let i = 0;
+    while (i < template.length) {
+        if (template[i] === '{') {
+            const end = findMatchingBrace(template, i);
+            if (end !== -1) {
+                parts.push({ start: i, end, expr: template.slice(i + 1, end) });
+                i = end + 1;
+                continue;
+            }
+        }
+        i++;
+    }
+    return parts;
+}
+
+function formatMessage(template, values = {}) {
+    if (!template || typeof template !== 'string') return '';
+
+    const exprs = extractExpressions(template);
+    let result = '';
+    let lastIdx = 0;
+
+    for (const { start, end, expr } of exprs) {
+        result += template.slice(lastIdx, start);
+        const trimmed = expr.trim();
+
+        // Plural: {key, plural, =N{...} other{...}}
+        const pluralMatch = trimmed.match(/^(\w+),\s*plural\s*,\s*(.+)$/);
+        if (pluralMatch) {
+            const [, key, rules] = pluralMatch;
+            const count = Number(values[key]) || 0;
+            result += formatPlural(count, rules);
+            lastIdx = end + 1;
+            continue;
+        }
+
+        // Select: {key, select, val1{...} val2{...}}
+        const selectMatch = trimmed.match(/^(\w+),\s*select\s*,\s*(.+)$/);
+        if (selectMatch) {
+            const [, key, rules] = selectMatch;
+            const value = String(values[key] || '');
+            result += formatSelect(value, rules);
+            lastIdx = end + 1;
+            continue;
+        }
+
+        // Simple interpolation: {key}
+        result += values[trimmed] ?? template.slice(start, end + 1);
+        lastIdx = end + 1;
+    }
+
+    result += template.slice(lastIdx);
+    return result;
+}
+
+function formatPlural(count, rulesStr) {
+    const rules = parseRules(rulesStr);
+    const exact = rules[`=${count}`];
+    if (exact !== undefined) return exact.replace(/#/g, String(count));
+
+    const key = count === 1 ? 'one' : 'other';
+    const rule = rules[key] || rules['other'] || '';
+    return rule.replace(/#/g, String(count));
+}
+
+function formatSelect(value, rulesStr) {
+    const rules = parseRules(rulesStr);
+    return rules[value] || rules['other'] || '';
+}
+
+function parseRules(rulesStr) {
+    const rules = {};
+    const re = /(\w+|=\d+)\{([^}]*)\}/g;
+    let m;
+    while ((m = re.exec(rulesStr))) {
+        rules[m[1]] = m[2];
+    }
+    return rules;
+}
+
+/**
+ * Locale detection
+ */
+
+function getDefaultLocale() {
+    if (typeof navigator !== 'undefined' && navigator.language) {
+        return navigator.language;
+    }
+    return 'en';
+}
+
+function formatNumber(value, options = {}, locale) {
+    try {
+        return new Intl.NumberFormat(locale, options).format(value);
+    } catch {
+        return String(value);
+    }
+}
+
+function formatDate(value, options = {}, locale) {
+    try {
+        return new Intl.DateTimeFormat(locale, options).format(value);
+    } catch {
+        return String(value);
+    }
+}
+
+/**
+ * Lux i18n — Lightweight internationalization
+ *
+ * Usage:
+ *   import { createI18n, msg, number, date } from 'lux/i18n';
+ *
+ *   const i18n = createI18n({
+ *     locale: 'zh-CN',
+ *     messages: {
+ *       'zh-CN': { hello: '你好', welcome: '欢迎, {name}' },
+ *       'en': { hello: 'Hello', welcome: 'Welcome, {name}' },
+ *     }
+ *   });
+ *
+ *   // In templates
+ *   html`<h1>${msg('hello')}</h1>`
+ *   html`<p>${msg('welcome', { name: 'Alice' })}</p>`
+ *   html`<span>${msg('items', { count: 5 })}</span>`
+ *
+ *   // Number/date formatting
+ *   html`<span>${number(1234567)}</span>`
+ *   html`<span>${date(new Date())}</span>`
+ */
+
+
+let currentLocale = '';
+let currentMessages = {};
+let listeners = [];
+
+/**
+ * Get the current translation for a key.
+ */
+function msg(key, values = {}) {
+    const dict = currentMessages[currentLocale] || currentMessages;
+    const template = dict[key] ?? key;
+    return formatMessage(template, values);
+}
+
+/**
+ * Format a number using Intl.NumberFormat.
+ */
+function number(value, options) {
+    return formatNumber(
+        value,
+        typeof options === 'string' ? { style: options } : options,
+        currentLocale
+    );
+}
+
+/**
+ * Format a date using Intl.DateTimeFormat.
+ */
+function date(value, options) {
+    return formatDate(value, options, currentLocale);
+}
+
+/**
+ * Get the current locale string.
+ */
+function getLocale() {
+    return currentLocale;
+}
+
+/**
+ * Create an i18n instance.
+ *
+ * @param {Object} options
+ * @param {string} options.locale - Initial locale (default: navigator.language)
+ * @param {Object} messages - { 'zh-CN': {...}, 'en': {...} }
+ * @returns {Object} i18n instance
+ */
+function createI18n(options = {}) {
+    currentLocale = options.locale || getDefaultLocale();
+    currentMessages = options.messages || {};
+
+    function setLocale(locale) {
+        currentLocale = locale;
+        for (const fn of listeners) fn(locale);
+    }
+
+    function onLocaleChange(fn) {
+        listeners.push(fn);
+        return () => {
+            const i = listeners.indexOf(fn);
+            if (i >= 0) listeners.splice(i, 1);
+        };
+    }
+
+    return {
+        get locale() {
+            return currentLocale;
+        },
+        setLocale,
+        onLocaleChange,
+        msg,
+        number,
+        date,
+        getLocale,
+    };
+}
+
+/**
+ * Color utilities — HSL-based color generation from a seed color
+ */
+
+// ─── Conversion ───
+
+function hexToRgb(hex) {
+    hex = hex.replace('#', '');
+    if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+    };
+}
+
+function rgbToHsl(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b),
+        min = Math.min(r, g, b);
+    let h,
+        s,
+        l = (max + min) / 2;
+
+    if (max === min) {
+        h = s = 0;
+    } else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+
+function hslToRgb(h, s, l) {
+    h /= 360;
+    s /= 100;
+    l /= 100;
+    let r, g, b;
+
+    if (s === 0) {
+        r = g = b = l;
+    } else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+
+    return {
+        r: Math.round(r * 255),
+        g: Math.round(g * 255),
+        b: Math.round(b * 255),
+    };
+}
+
+function hexToHsl(hex) {
+    const { r, g, b } = hexToRgb(hex);
+    return rgbToHsl(r, g, b);
+}
+
+function hslToHex(h, s, l) {
+    const { r, g, b } = hslToRgb(h, s, l);
+    return '#' + [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('');
+}
+
+function rgbString(r, g, b) {
+    return `${r} ${g} ${b}`;
+}
+
+// ─── Palette generation ───
+
+/**
+ * Generate a 10-step palette (50-900) from a seed HSL.
+ * Lightness curve: 50→97%, 100→93%, 200→86%, 300→76%, 400→64%,
+ *                  500→seed%, 600→45%, 700→38%, 800→28%, 900→18%
+ */
+function generatePalette(h, s, l) {
+    const steps = [
+        [50, 97, 90],
+        [100, 93, 85],
+        [200, 86, 78],
+        [300, 76, 68],
+        [400, 64, 58],
+        [500, s, l], // seed
+        [600, s, 45],
+        [700, s, 38],
+        [800, s, 28],
+        [900, s, 18],
+    ];
+
+    const palette = {};
+    for (const [step, sat, light] of steps) {
+        palette[step] = hslToHex(h, sat, light);
+    }
+    return palette;
+}
+
+/**
+ * Generate CSS custom properties (tokens) from a palette.
+ */
+
+
+function rgb(hex) {
+    const { r, g, b } = hexToRgb(hex);
+    return rgbString(r, g, b);
+}
+
+/**
+ * Generate light theme tokens from palette + semantic colors.
+ */
+function generateLightTokens(palette, semantic) {
+    return {
+        // Primary palette
+        'lux-primary-50': rgb(palette[50]),
+        'lux-primary-100': rgb(palette[100]),
+        'lux-primary-200': rgb(palette[200]),
+        'lux-primary-300': rgb(palette[300]),
+        'lux-primary-400': rgb(palette[400]),
+        'lux-primary-500': rgb(palette[500]),
+        'lux-primary-600': rgb(palette[600]),
+        'lux-primary-700': rgb(palette[700]),
+        'lux-primary-800': rgb(palette[800]),
+        'lux-primary-900': rgb(palette[900]),
+
+        // Semantic
+        'lux-success': rgb(semantic.success[500]),
+        'lux-warning': rgb(semantic.warning[500]),
+        'lux-error': rgb(semantic.error[500]),
+        'lux-info': rgb(semantic.info[500]),
+
+        // Surface / background (light mode)
+        'lux-bg': '15 23 42',
+        'lux-bg-alt': '30 41 59',
+        'lux-surface': '15 23 42',
+        'lux-card': '30 41 59',
+        'lux-overlay': '0 0 0 / 50%',
+
+        // Text
+        'lux-text': '241 245 249',
+        'lux-text-dim': '148 163 184',
+        'lux-text-muted': '100 116 139',
+
+        // Border
+        'lux-border': '51 65 85',
+        'lux-border-light': '71 85 105',
+
+        // Interactive
+        'lux-hover': '255 255 255 / 5%',
+        'lux-active': '255 255 255 / 10%',
+        'lux-focus': '0 0 0 / 40%',
+
+        // Radius
+        'lux-radius-sm': '6px',
+        'lux-radius': '8px',
+        'lux-radius-lg': '12px',
+        'lux-radius-xl': '16px',
+        'lux-radius-full': '9999px',
+    };
+}
+
+/**
+ * Generate dark theme tokens.
+ */
+function generateDarkTokens(palette, semantic) {
+    return {
+        // Primary — use lighter variants for dark mode
+        'lux-primary-50': rgb(palette[900]),
+        'lux-primary-100': rgb(palette[800]),
+        'lux-primary-200': rgb(palette[700]),
+        'lux-primary-300': rgb(palette[600]),
+        'lux-primary-400': rgb(palette[400]),
+        'lux-primary-500': rgb(palette[500]),
+        'lux-primary-600': rgb(palette[300]),
+        'lux-primary-700': rgb(palette[200]),
+        'lux-primary-800': rgb(palette[100]),
+        'lux-primary-900': rgb(palette[50]),
+
+        // Semantic
+        'lux-success': rgb(semantic.success[500]),
+        'lux-warning': rgb(semantic.warning[500]),
+        'lux-error': rgb(semantic.error[500]),
+        'lux-info': rgb(semantic.info[500]),
+
+        // Surface (dark mode)
+        'lux-bg': '15 23 42',
+        'lux-bg-alt': '30 41 59',
+        'lux-surface': '15 23 42',
+        'lux-card': '30 41 59',
+        'lux-overlay': '0 0 0 / 70%',
+
+        // Text
+        'lux-text': '241 245 249',
+        'lux-text-dim': '148 163 184',
+        'lux-text-muted': '100 116 139',
+
+        // Border
+        'lux-border': '51 65 85',
+        'lux-border-light': '71 85 105',
+
+        // Interactive
+        'lux-hover': '255 255 255 / 8%',
+        'lux-active': '255 255 255 / 12%',
+        'lux-focus': '0 0 0 / 50%',
+
+        // Radius (same as light)
+        'lux-radius-sm': '6px',
+        'lux-radius': '8px',
+        'lux-radius-lg': '12px',
+        'lux-radius-xl': '16px',
+        'lux-radius-full': '9999px',
+    };
+}
+
+/**
+ * Convert token map to CSS string.
+ */
+function tokensToCSS(tokens, indent = '  ') {
+    let css = ':root {\n';
+    for (const [key, value] of Object.entries(tokens)) {
+        css += `${indent}--${key}: ${value};\n`;
+    }
+    css += '}';
+    return css;
+}
+
+/**
+ * createTheme — generate a complete theme from colors.
+ *
+ * Usage:
+ *   const theme = createTheme({ primary: '#6c5ce7' });
+ *   const theme = createTheme({
+ *     primary: '#6c5ce7', success: '#10b981',
+ *     warning: '#f59e0b', error: '#ef4444', info: '#3b82f6'
+ *   });
+ *   theme.setColors({ success: '#22c55e' });
+ *   theme.apply();
+ */
+
+
+const defaultColors = {
+    primary: '#6c5ce7',
+    success: '#10b981',
+    warning: '#f59e0b',
+    error: '#ef4444',
+    info: '#3b82f6',
+};
+
+function createTheme(options = {}) {
+    if (typeof options === 'string') options = { primary: options };
+
+    const _colors = { ...defaultColors, ...options.colors };
+    let _dark = options.dark ?? false;
+    let _radius = options.radius ?? '8px';
+    let _font =
+        options.font ?? '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+
+    function _build() {
+        const { h, s, l } = hexToHsl(_colors.primary);
+        const palette = generatePalette(h, s, l);
+
+        const semantic = {};
+        for (const [name, hex] of Object.entries(_colors)) {
+            if (name === 'primary') continue;
+            const { h: sh} = hexToHsl(hex);
+            semantic[name] = { 500: hex, light: hslToHex(sh, 60, 93) };
+        }
+
+        const tokens = _dark
+            ? generateDarkTokens(palette, semantic)
+            : generateLightTokens(palette, semantic);
+
+        tokens['lux-radius'] = _radius;
+        tokens['lux-font'] = _font;
+
+        return tokens;
+    }
+
+    function _inject(tokens) {
+        let el = document.getElementById('lux-theme');
+        if (!el) {
+            el = document.createElement('style');
+            el.id = 'lux-theme';
+            document.head.appendChild(el);
+        }
+        el.textContent = tokensToCSS(tokens);
+    }
+
+    return {
+        apply() {
+            _inject(_build());
+        },
+
+        setColors(patch) {
+            Object.assign(_colors, patch);
+            this.apply();
+        },
+
+        setDark(dark) {
+            _dark = dark;
+            this.apply();
+        },
+        getCSS() {
+            return tokensToCSS(_build());
+        },
+        getTokens() {
+            return _build();
+        },
+        getColors() {
+            return { ..._colors };
+        },
+
+        get primary() {
+            return _colors.primary;
+        },
+        get dark() {
+            return _dark;
+        },
+    };
+}
+
+/**
+ * Lux — Lightweight Web Components Framework
+ */
+
+
+const version = '0.1.0';
+
+export { LuxElement, classMap, createComponent, createI18n, createRouter, createTheme, css, date, escapeHtml, getLocale, guard, html, isTemplateResult, msg, nothing, number, registerComponent$1 as registerComponent, render, repeat, show, styleMap, svg, version, when };
+//# sourceMappingURL=lux.js.map