@ahriknow/lux 0.0.1

package/src/template.js

@@ -0,0 +1,402 @@
+/**
+ * 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 ───
+export const HTML_RESULT = 1;
+export const SVG_RESULT = 2;
+
+// ─── Sentinels ───
+export const nothing = Symbol.for('lux-nothing');
+
+// ─── Template cache ───
+const templateCache = new WeakMap();
+
+// ─── html / svg tagged template functions ───
+export function html(strings, ...values) {
+    return { _$luxType$: HTML_RESULT, strings, values };
+}
+
+export function svg(strings, ...values) {
+    return { _$luxType$: SVG_RESULT, strings, values };
+}
+
+export function css(strings, ...values) {
+    return { _$luxType$: 3, strings, values };
+}
+
+export function isTemplateResult(value) {
+    return value && value._$luxType$ !== undefined;
+}
+
+// ─── HTML escaping ──
+export 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, context);
+        return;
+    }
+
+    if (isTemplateResult(value)) {
+        render(value, container, context);
+        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, context);
+                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 ──
+
+export 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], context);
+                } 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], context);
+                    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
+ */
+export 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, context);
+        } 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
+ */
+export function when(condition, trueFn, falseFn = () => '') {
+    return condition ? trueFn() : falseFn();
+}
+
+/**
+ * show(condition, content) — show/hide element
+ */
+export function show(condition, content = '') {
+    return condition ? content : '';
+}
+
+/**
+ * classMap(classes) — dynamic class binding helper
+ */
+export function classMap(classes) {
+    return classes;
+}
+
+/**
+ * styleMap(styles) — dynamic style binding helper
+ */
+export function styleMap(styles) {
+    return styles;
+}
+
+/**
+ * guard(dependencies, fn) — re-render only when dependencies change
+ */
+export function guard(dependencies, fn) {
+    return fn();
+}

package/src/theme/color.js

@@ -0,0 +1,148 @@
+/**
+ * Color utilities — HSL-based color generation from a seed color
+ */
+
+// ─── Conversion ───
+
+export 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),
+    };
+}
+
+export 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) };
+}
+
+export 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),
+    };
+}
+
+export function hexToHsl(hex) {
+    const { r, g, b } = hexToRgb(hex);
+    return rgbToHsl(r, g, b);
+}
+
+export 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('');
+}
+
+export 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%
+ */
+export 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 semantic colors by shifting hue from seed.
+ * success: +120°, warning: +40°, error: -20° (or +340°), info: +200°
+ */
+export function generateSemantic(h, s, l) {
+    const shift = (hue, sat, light) => {
+        const h2 = ((hue % 360) + 360) % 360;
+        return hslToHex(h2, sat, light);
+    };
+
+    return {
+        success: {
+            500: shift(h + 120, 72, 45),
+            light: shift(h + 120, 60, 92),
+        },
+        warning: {
+            500: shift(h + 40, 85, 55),
+            light: shift(h + 40, 80, 93),
+        },
+        error: {
+            500: shift(h - 20, 78, 55),
+            light: shift(h - 20, 70, 93),
+        },
+        info: {
+            500: shift(h + 200, 72, 55),
+            light: shift(h + 200, 65, 93),
+        },
+    };
+}

package/src/theme/create.js

@@ -0,0 +1,97 @@
+/**
+ * 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();
+ */
+
+import { hexToHsl, hslToHex } from './color.js';
+import { generatePalette } from './color.js';
+import { generateLightTokens, generateDarkTokens, tokensToCSS } from './tokens.js';
+
+const defaultColors = {
+    primary: '#6c5ce7',
+    success: '#10b981',
+    warning: '#f59e0b',
+    error: '#ef4444',
+    info: '#3b82f6',
+};
+
+export 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, s: ss } = 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;
+        },
+    };
+}

package/src/theme/index.js

@@ -0,0 +1,2 @@
+export { createTheme } from './create.js';
+export { hexToHsl, hslToHex, hexToRgb, rgbToHsl } from './color.js';