@ahriknow/lux 0.0.1

package/dist/lux.iife.js

@@ -0,0 +1,1822 @@
+var Lux = (function (exports) {
+    'use strict';
+
+    /**
+     * 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';
+
+    exports.LuxElement = LuxElement;
+    exports.classMap = classMap;
+    exports.createComponent = createComponent;
+    exports.createI18n = createI18n;
+    exports.createRouter = createRouter;
+    exports.createTheme = createTheme;
+    exports.css = css;
+    exports.date = date;
+    exports.escapeHtml = escapeHtml;
+    exports.getLocale = getLocale;
+    exports.guard = guard;
+    exports.html = html;
+    exports.isTemplateResult = isTemplateResult;
+    exports.msg = msg;
+    exports.nothing = nothing;
+    exports.number = number;
+    exports.registerComponent = registerComponent$1;
+    exports.render = render;
+    exports.repeat = repeat;
+    exports.show = show;
+    exports.styleMap = styleMap;
+    exports.svg = svg;
+    exports.version = version;
+    exports.when = when;
+
+    return exports;
+
+})({});
+//# sourceMappingURL=lux.iife.js.map