@neuralumina/lumina-ui 0.1.1

package/lumina-ui/core/element.js

@@ -0,0 +1,118 @@
+export function createElement(tag, props = {}) {
+  const { children, style, className, dataset, key, ...rest } = props;
+  const element = document.createElement(tag);
+
+  // Apply classes
+  if (className) {
+    if (Array.isArray(className)) element.classList.add(...className);
+    else element.className = className;
+  }
+
+  // Apply dataset
+  if (dataset && typeof dataset === "object") {
+    Object.keys(dataset).forEach((k) => {
+      element.dataset[k] = dataset[k];
+    });
+  }
+
+  // Apply styles
+  if (style && typeof style === "object") {
+    Object.assign(element.style, style);
+  }
+
+  // Apply remaining props (reflecting properties for common DOM props)
+  Object.entries(rest).forEach(([key, value]) => {
+    if (value === undefined || value === null) return;
+
+    if (key.startsWith("on") && typeof value === "function") {
+      const event = normalizeEventName(key);
+      element.addEventListener(event, value);
+    } else if (
+      key === "checked" ||
+      key === "value" ||
+      key === "disabled" ||
+      key === "selected"
+    ) {
+      // Reflect common boolean/value props
+      try {
+        element[key] = value;
+      } catch (e) {
+        element.setAttribute(key, String(value));
+      }
+    } else if (key === "htmlFor") {
+      element.setAttribute("for", String(value));
+    } else if (
+      key === "id" ||
+      key === "type" ||
+      key === "name" ||
+      key === "placeholder" ||
+      key === "title" ||
+      key === "role" ||
+      key === "aria-label" ||
+      key === "aria-checked" ||
+      key.startsWith("aria-")
+    ) {
+      element.setAttribute(key, String(value));
+    } else if (key === "tabIndex") {
+      element.tabIndex = value;
+    } else {
+      // fallback to attribute - only for primitive types
+      if (typeof value !== "object" || value === null) {
+        element.setAttribute(key, String(value));
+      }
+    }
+  });
+
+  // Append children if provided
+  if (children !== undefined && children !== null) {
+    const childrenArray = Array.isArray(children) ? children : [children];
+    childrenArray.forEach((child) => {
+      if (child === null || child === undefined) return;
+      if (child instanceof Node) {
+        element.appendChild(child);
+      } else if (typeof child === "object" && child._dom) {
+        // internal fast path if widget has a cached DOM
+        element.appendChild(child._dom);
+      } else {
+        element.appendChild(document.createTextNode(String(child)));
+      }
+    });
+  }
+
+  return element;
+}
+
+export function Fragment({ children }) {
+  const fragment = document.createDocumentFragment();
+  if (children) {
+    const childrenArray = Array.isArray(children) ? children : [children];
+    childrenArray.forEach((child) => {
+      if (child instanceof Node) fragment.appendChild(child);
+      else if (typeof child === "object" && child._dom) {
+        fragment.appendChild(child._dom);
+      } else if (child !== null && child !== undefined)
+        fragment.appendChild(document.createTextNode(String(child)));
+    });
+  }
+  return fragment;
+}
+
+export function applyStyles(element, styles) {
+  if (!element || !styles) return element;
+  Object.assign(element.style, styles);
+  return element;
+}
+
+export function addClasses(element, ...classes) {
+  if (!element) return element;
+  element.classList.add(...classes.filter(Boolean));
+  return element;
+}
+
+function normalizeEventName(onName) {
+  // onClick -> click, onDoubleClick -> dblclick (common mapping)
+  const name = onName.slice(2);
+  const lower = name.toLowerCase();
+  if (lower === "doubleclick" || lower === "dblclick") return "dblclick";
+  return lower;
+}

package/lumina-ui/core/renderer.js

@@ -0,0 +1,376 @@
+import { createElement } from "./element.js";
+
+// vnode shape: { tag, props, children, key }
+// function widgets: (forceUpdate) => vnode
+
+export function mount(componentFn, container) {
+  let currentTree = null;
+  let mounted = true;
+
+  const forceUpdate = () => {
+    if (!mounted) return;
+    render();
+  };
+
+  function render() {
+    const newTree =
+      typeof componentFn === "function" ? componentFn(forceUpdate) : componentFn;
+    if (!currentTree) {
+      const dom = renderWidget(newTree, forceUpdate);
+      container.innerHTML = "";
+      container.appendChild(dom);
+    } else {
+      patchWidget(container, currentTree, newTree, 0, null, forceUpdate);
+    }
+    currentTree = normalizeVNode(newTree);
+  }
+
+  render();
+
+  const wrappedForce = () => {
+    if (mounted) forceUpdate();
+  };
+  wrappedForce.unmount = () => {
+    mounted = false;
+    container.innerHTML = "";
+  };
+
+  return wrappedForce;
+}
+
+function renderWidget(widget, forceUpdate) {
+  // primitives
+  if (isEmptyWidget(widget))
+    return document.createTextNode("");
+  if (typeof widget === "string" || typeof widget === "number")
+    return document.createTextNode(String(widget));
+  if (typeof Node !== "undefined" && widget instanceof Node) return widget;
+
+  // arrays -> fragment
+  if (Array.isArray(widget)) {
+    const fragment = document.createDocumentFragment();
+    flattenChildren(widget).forEach((child) => {
+      const childDom = renderWidget(child, forceUpdate);
+      if (childDom) fragment.appendChild(childDom);
+    });
+    return fragment;
+  }
+
+  // functional widget (component)
+  if (typeof widget === "function") {
+    return renderWidget(widget(forceUpdate), forceUpdate);
+  }
+
+  // vnode object
+  if (widget.tag) {
+    const props = widget.props || {};
+    const children = flattenChildren(widget.children || []);
+
+    const element = createElement(widget.tag, {
+      ...(props || {}),
+      children: [],
+    });
+
+    // attach a backref for fast updates (optional)
+    element._vnodeKey = widget.key ?? props.key ?? null;
+
+    (children || []).forEach((child) => {
+      const childDom = renderWidget(child, forceUpdate);
+      if (childDom) element.appendChild(childDom);
+    });
+
+    return element;
+  }
+
+  return document.createTextNode("");
+}
+
+function normalizeVNode(v) {
+  // If given a function, call it (no forceUpdate)
+  if (typeof v === "function") v = v();
+  if (isEmptyWidget(v)) return { tag: "empty", children: [] };
+  if (Array.isArray(v))
+    return { tag: "fragment", children: flattenChildren(v).map(normalizeVNode) };
+  if (v && v.tag) {
+    return {
+      ...v,
+      children: flattenChildren(v.children || []),
+    };
+  }
+  return { tag: "text", children: [String(v)] };
+}
+
+function patchWidget(parent, oldWidget, newWidget, index = 0, currentDom = null, forceUpdate = null) {
+  // Normalize to vnodes
+  const oldV = normalizeVNode(oldWidget);
+  const newV = normalizeVNode(newWidget);
+
+  const dom = currentDom || parent.childNodes[index];
+  if (!dom) return;
+
+  // Replace if different tag or key
+  const oldTag = oldV.tag;
+  const newTag = newV.tag;
+  const oldKey = oldV.key ?? (oldV.props && oldV.props.key);
+  const newKey = newV.key ?? (newV.props && newV.props.key);
+
+  if (oldTag === "empty" && newTag === "empty") return;
+
+  if (oldKey != null || newKey != null) {
+    // keyed children are handled at parent's loop level — here we fall back to replace if mismatched
+    if (oldKey !== newKey || oldTag !== newTag) {
+      const newDom = renderWidget(newWidget, forceUpdate);
+      parent.replaceChild(newDom, dom);
+      return newDom;
+    }
+  } else if (oldTag !== newTag) {
+    const newDom = renderWidget(newWidget, forceUpdate);
+    parent.replaceChild(newDom, dom);
+    return newDom;
+  }
+
+  // Text node
+  if (
+    newTag === "empty" ||
+    newTag === "text" ||
+    typeof newWidget === "string" ||
+    typeof newWidget === "number"
+  ) {
+    const nextText =
+      newTag === "empty" ? "" : String(newV.children?.[0] ?? newWidget);
+    if (
+      dom &&
+      dom.nodeType === Node.TEXT_NODE &&
+      dom.textContent !== nextText
+    ) {
+      dom.textContent = nextText;
+    } else if (dom && dom.nodeType !== Node.TEXT_NODE) {
+      const newDom = renderWidget(newWidget, forceUpdate);
+      parent.replaceChild(newDom, dom);
+      return newDom;
+    }
+    return dom;
+  }
+
+  // Update props
+  const newProps = newV.props || {};
+  const oldProps = oldV.props || {};
+  updateProps(dom, oldProps, newProps);
+
+  // Reconcile children (simple keyed-first pass)
+  const oldChildren = flattenChildren(oldV.children || []);
+  const newChildren = flattenChildren(newV.children || []);
+
+  // Build key -> index map for old children
+  const keyed = new Map();
+  oldChildren.forEach((c, i) => {
+    const k = widgetKey(c);
+    const node = dom.childNodes[i];
+    if (k != null && node) keyed.set(k, { vnode: c, node });
+  });
+
+  // If any new child has a key, do keyed reconciliation
+  const anyKeyed = newChildren.some((c) => widgetKey(c) != null);
+  if (anyKeyed) {
+    const usedKeys = new Set();
+
+    newChildren.forEach((nc, i) => {
+      const nk = widgetKey(nc);
+      let node;
+
+      if (nk != null && keyed.has(nk)) {
+        const oldEntry = keyed.get(nk);
+        usedKeys.add(nk);
+        node = patchWidget(dom, oldEntry.vnode, nc, 0, oldEntry.node, forceUpdate);
+      } else {
+        node = renderWidget(nc, forceUpdate);
+      }
+
+      const targetNode = dom.childNodes[i] || null;
+      if (node && node !== targetNode) {
+        dom.insertBefore(node, targetNode);
+      }
+    });
+
+    keyed.forEach((entry, key) => {
+      if (!usedKeys.has(key) && entry.node.parentNode === dom) {
+        dom.removeChild(entry.node);
+      }
+    });
+
+    while (dom.childNodes.length > newChildren.length) {
+      dom.removeChild(dom.lastChild);
+    }
+
+    return dom;
+  }
+
+  // Fallback index-based reconciliation
+  const maxLen = Math.max(oldChildren.length, newChildren.length);
+  for (let i = 0; i < maxLen; i++) {
+    const oldC = oldChildren[i];
+    const newC = newChildren[i];
+    const oldEmpty = isEmptyWidget(oldC);
+    const newEmpty = isEmptyWidget(newC);
+
+    if (oldEmpty && newEmpty) {
+      continue;
+    } else if (oldEmpty && !newEmpty) {
+      const newDom = renderWidget(newC, forceUpdate);
+      if (dom.childNodes[i]) dom.replaceChild(newDom, dom.childNodes[i]);
+      else dom.insertBefore(newDom, dom.childNodes[i] || null);
+    } else if (!oldEmpty && newEmpty) {
+      const emptyDom = renderWidget(newC, forceUpdate);
+      if (dom.childNodes[i]) dom.replaceChild(emptyDom, dom.childNodes[i]);
+      else dom.insertBefore(emptyDom, dom.childNodes[i] || null);
+    } else {
+      patchWidget(dom, oldC, newC, i, null, forceUpdate);
+    }
+  }
+
+  return dom;
+}
+
+function updateProps(dom, oldProps = {}, newProps = {}) {
+  if (!dom) return;
+
+  // Remove old event listeners and attributes not in newProps
+  Object.keys(oldProps).forEach((key) => {
+    const oldVal = oldProps[key];
+    const nextVal = newProps[key];
+    if (
+      key.startsWith("on") &&
+      typeof oldVal === "function" &&
+      oldVal !== nextVal
+    ) {
+      const event = normalizeEventName(key);
+      dom.removeEventListener(event, oldVal);
+    }
+    if (!(key in newProps) || newProps[key] === undefined || newProps[key] === null) {
+      // cleanup reflecting props and attributes
+      if (key === "style") {
+        dom.removeAttribute("style");
+        if (dom.style) dom.style.cssText = "";
+      } else if (key === "className") {
+        dom.className = "";
+        dom.removeAttribute("class");
+      } else if (key === "dataset" && typeof oldVal === "object") {
+        Object.keys(oldVal).forEach((k) => delete dom.dataset[k]);
+      } else if (key === "value") {
+        try {
+          dom.value = "";
+        } catch (e) {
+          dom.removeAttribute(key);
+        }
+      } else if (
+        key === "checked" ||
+        key === "disabled" ||
+        key === "selected"
+      ) {
+        try {
+          dom[key] = false;
+        } catch (e) {
+          dom.removeAttribute(key);
+        }
+      } else {
+        dom.removeAttribute(key);
+      }
+    }
+  });
+
+  // Set new props
+  Object.keys(newProps).forEach((key) => {
+    const value = newProps[key];
+    const oldValue = oldProps[key];
+
+    if (value === undefined || value === null) return;
+    if (value === oldValue && !isReflectedDomProp(key)) return;
+
+    if (key === "style" && typeof value === "object") {
+      const previous = oldProps.style || {};
+      Object.keys(previous).forEach((styleKey) => {
+        if (!(styleKey in value)) dom.style[styleKey] = "";
+      });
+      Object.assign(dom.style, value);
+    } else if (key.startsWith("on") && typeof value === "function") {
+      const event = normalizeEventName(key);
+      dom.addEventListener(event, value);
+    } else if (key === "className") {
+      if (Array.isArray(value)) {
+        dom.className = value.filter((v) => v && typeof v === "string").join(" ");
+      } else {
+        dom.className = value ? String(value) : "";
+      }
+    } else if (key === "dataset" && typeof value === "object") {
+      const previous = oldProps.dataset || {};
+      Object.keys(previous).forEach((k) => {
+        if (!(k in value)) delete dom.dataset[k];
+      });
+      Object.keys(value).forEach((k) => (dom.dataset[k] = value[k]));
+    } else if (
+      key === "checked" ||
+      key === "value" ||
+      key === "disabled" ||
+      key === "selected"
+    ) {
+      try {
+        dom[key] = value;
+      } catch (e) {
+        dom.setAttribute(key, String(value));
+      }
+    } else if (key === "tabIndex") {
+      dom.tabIndex = value;
+    } else if (key === "htmlFor") {
+      dom.setAttribute("for", String(value));
+    } else if (
+      key !== "children" &&
+      key !== "key" &&
+      value !== undefined &&
+      value !== null
+    ) {
+      dom.setAttribute(key, String(value));
+    }
+  });
+}
+
+function flattenChildren(children = []) {
+  const output = [];
+  const list = Array.isArray(children) ? children : [children];
+
+  list.forEach((child) => {
+    if (Array.isArray(child)) output.push(...flattenChildren(child));
+    else output.push(child);
+  });
+
+  return output;
+}
+
+function widgetKey(widget) {
+  if (!widget || Array.isArray(widget) || typeof widget !== "object") return null;
+  return widget.key ?? (widget.props && widget.props.key) ?? null;
+}
+
+function isReflectedDomProp(key) {
+  return (
+    key === "checked" ||
+    key === "value" ||
+    key === "disabled" ||
+    key === "selected"
+  );
+}
+
+function normalizeEventName(onName) {
+  const name = onName.slice(2);
+  const lower = name.toLowerCase();
+  if (lower === "doubleclick" || lower === "dblclick") return "dblclick";
+  return lower;
+}
+
+function isEmptyWidget(widget) {
+  return (
+    widget === null ||
+    widget === undefined ||
+    widget === false ||
+    widget === true
+  );
+}

package/lumina-ui/core/state.js

@@ -0,0 +1,99 @@
+/**
+ * Lightweight state utilities that work with renderer's forceUpdate pattern.
+ *
+ * API:
+ *   createState(initial, forceUpdate) -> [get, set]
+ *   useState(initial) -> same shape but subscriptions supported
+ *   useEffect(effect, deps, subscribeFn) -> returns a runner to be called by renderer or subscribers
+ *   createStore(reducer, initial)
+ */
+
+export function createState(initialValue, forceUpdate = null) {
+  let value =
+    typeof initialValue === "function" ? initialValue() : initialValue;
+  const subs = new Set();
+
+  if (typeof forceUpdate === "function") subs.add(forceUpdate);
+
+  const get = () => value;
+
+  const set = (next) => {
+    const nextValue = typeof next === "function" ? next(value) : next;
+    if (nextValue !== value) {
+      value = nextValue;
+      subs.forEach((fn) => {
+        try {
+          fn(value);
+        } catch (e) {
+          /* swallow */
+        }
+      });
+    }
+  };
+
+  const subscribe = (fn) => {
+    subs.add(fn);
+    return () => subs.delete(fn);
+  };
+
+  return [get, set, subscribe];
+}
+
+// convenience alias (like React) - returns [get, set, subscribe]
+export const useState = createState;
+
+export function useEffect(effect, deps = undefined) {
+  let cleanup = null;
+  let prevDeps = undefined;
+
+  const run = () => {
+    if (cleanup) {
+      try {
+        cleanup();
+      } catch (e) {}
+    }
+    const ret = effect();
+    cleanup = typeof ret === "function" ? ret : null;
+  };
+
+  const checkAndRun = (currentDeps = deps) => {
+    const changed =
+      !prevDeps ||
+      !currentDeps ||
+      currentDeps.some((d, i) => d !== prevDeps[i]);
+    if (changed) {
+      run();
+      prevDeps = currentDeps ? [...currentDeps] : null;
+    }
+  };
+
+  // return a function that can be called by renderer or subscribers
+  return checkAndRun;
+}
+
+export function createStore(reducer, initialState) {
+  let state = initialState;
+  const listeners = new Set();
+
+  const getState = () => state;
+
+  const dispatch = (action) => {
+    const nextState =
+      typeof action === "function" ? action(state) : reducer(state, action);
+    if (nextState !== state) {
+      state = nextState;
+      listeners.forEach((fn) => {
+        try {
+          fn(state);
+        } catch (e) {}
+      });
+    }
+  };
+
+  const subscribe = (fn) => {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+  };
+
+  return { getState, dispatch, subscribe };
+}

package/lumina-ui/widgets/accessibility.js

@@ -0,0 +1,45 @@
+import { cleanStyle, normalizeWidgetArgs, omitProps } from "./utils.js";
+
+export function Semantics(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+
+  return {
+    tag: props.as || "div",
+    props: {
+      ...omitProps(props, [
+        "as",
+        "label",
+        "hint",
+        "role",
+        "hidden",
+        "liveRegion",
+      ]),
+      role: props.role,
+      "aria-label": props.label,
+      "aria-description": props.hint,
+      "aria-hidden": props.hidden ? "true" : undefined,
+      "aria-live": props.liveRegion ? "polite" : undefined,
+      style: cleanStyle(props.style),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function ExcludeSemantics(
+  propsOrChildren = {},
+  maybeChildren = undefined,
+) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props),
+      "aria-hidden": "true",
+      style: cleanStyle(props.style),
+    },
+    children,
+    key: props.key,
+  };
+}