onbuzz 4.9.13 → 4.10.0

package/src/modules/widget/runtime/bundle.js

@@ -1,640 +1,640 @@
-/**
- * Widget runtime bundle — STRING, served to every jsx-mode iframe.
- *
- * This file is a Node module that exports a plain string. The string is
- * JavaScript that runs INSIDE the sandboxed iframe. Keep it self-contained:
- * the iframe has null origin, no network (CSP connect-src 'none'), and
- * no same-origin access — there is no way to lazy-load anything.
- *
- * Why inline everything as a single string (not a bundled file served
- * via <script src>): the iframe's CSP is script-src 'self' which, for a
- * srcdoc document, resolves 'self' to a unique/null origin that can't
- * match any URL. Inline scripts (via 'unsafe-inline' in CSP) are the
- * only reliable path.
- *
- * Contains:
- *   - A minimal Preact-flavoured h()/render() (hand-rolled, ~500 LOC)
- *   - htm-style tagged-template compiler (~200 LOC)
- *   - The loxia.* SDK (postMessage bridge)
- *   - A small primitive catalogue: Card, Button, Input, Text, Metric, Row, Col
- *
- * MVP note: the primitive catalog is intentionally minimal. Agents can
- * use plain HTML elements in their render functions too — `h('div', ...)`
- * and `html\`<div>...\`` both work. Primitives are ergonomics.
- */
-
-export const WIDGET_RUNTIME = `
-/* ==== Loxia widget runtime v1 ==== */
-(function () {
-  'use strict';
-
-  /* ---------- tiny VDOM (Preact-flavoured) ---------- */
-  // VNode: { type, props, children }
-  function h(type, props, ...children) {
-    return { type, props: props || {}, children: children.flat(Infinity).filter(c => c != null && c !== false) };
-  }
-
-  // Render a VNode/text into a real DOM node. Very small — re-renders
-  // replace the whole subtree rather than diffing (fine for MVP widget
-  // sizes; can upgrade later).
-  function createDom(v) {
-    if (v == null || v === false) return document.createTextNode('');
-    if (typeof v === 'string' || typeof v === 'number') return document.createTextNode(String(v));
-    if (typeof v.type === 'function') {
-      // Component — call with props + children and recurse.
-      const childrenArg = v.children.length === 1 ? v.children[0] : v.children;
-      const out = v.type({ ...v.props, children: childrenArg });
-      return createDom(out);
-    }
-    // Native element
-    const el = document.createElement(v.type);
-    for (const [k, val] of Object.entries(v.props || {})) {
-      if (val == null || val === false) continue;
-      if (k === 'children') continue;
-      if (k === 'style' && typeof val === 'object') {
-        Object.assign(el.style, val);
-      } else if (k === 'className') {
-        el.setAttribute('class', String(val));
-      } else if (k === 'dangerouslySetInnerHTML') {
-        // Deliberately not supported — users who want HTML can use kind:'html'.
-        console.warn('[loxia] dangerouslySetInnerHTML is not supported in jsx widgets');
-      } else if (k.startsWith('on') && typeof val === 'function') {
-        el.addEventListener(k.slice(2).toLowerCase(), val);
-      } else {
-        el.setAttribute(k, String(val));
-      }
-    }
-    for (const child of v.children) {
-      el.appendChild(createDom(child));
-    }
-    return el;
-  }
-
-  let _rootEl = null;
-  let _rootVNode = null;
-  function renderToRoot(vnode, container) {
-    _rootEl = container;
-    _rootVNode = vnode;
-    container.innerHTML = '';
-    container.appendChild(createDom(vnode));
-    scheduleHeight();
-  }
-
-  /* ---------- htm-ish tagged-template compiler ---------- */
-  // Parses:   html\`<Card title=\${t}><Button onClick=\${f}>hi<//></>\`
-  // into a VNode tree using the h() above. Small but sufficient for
-  // widget-shape templates (elements, attributes, children, closing tags
-  // in "//" form, component references via \${Component}).
-  //
-  // Adapted from the public-domain htm algorithm; rewritten terse for inlining.
-  const CACHE = new WeakMap();
-  function html(strings) {
-    const values = Array.prototype.slice.call(arguments, 1);
-    let tree = CACHE.get(strings);
-    if (!tree) {
-      tree = parseTemplate(strings);
-      CACHE.set(strings, tree);
-    }
-    return evalTree(tree, values);
-  }
-
-  // Parse the template array into an instruction list we can replay with values.
-  // Instructions: [kind, ...]
-  //   [1, type]           OPEN (type is string|index)
-  //   [2]                 CLOSE
-  //   [3, name, valueOrIdx, isIndex]  ATTR
-  //   [4, textOrIdx, isIndex]         CHILD
-  function parseTemplate(strings) {
-    const insts = [];
-    let buf = '';
-    let mode = 'text'; // text | tag | attr
-    for (let i = 0; i < strings.length; i++) {
-      const s = strings[i];
-      for (let j = 0; j < s.length; j++) {
-        const c = s[j];
-        if (mode === 'text') {
-          if (c === '<') {
-            if (buf.trim()) insts.push([4, buf, false]);
-            buf = '';
-            mode = 'tag';
-          } else {
-            buf += c;
-          }
-        } else if (mode === 'tag') {
-          if (c === '>') {
-            commitTag(insts, buf);
-            buf = '';
-            mode = 'text';
-          } else if (/\\s/.test(c) && buf) {
-            commitTag(insts, buf);
-            buf = '';
-            mode = 'attr';
-          } else if (c === '/' && j + 1 < s.length && s[j + 1] === '>') {
-            // self-close: <Foo/> — commit then close
-            commitTag(insts, buf);
-            insts.push([2]);
-            buf = '';
-            j++;
-            mode = 'text';
-          } else {
-            buf += c;
-          }
-        } else if (mode === 'attr') {
-          if (c === '>') {
-            if (buf.trim()) parseAttr(insts, buf);
-            buf = '';
-            mode = 'text';
-          } else if (c === '/' && j + 1 < s.length && s[j + 1] === '>') {
-            if (buf.trim()) parseAttr(insts, buf);
-            insts.push([2]);
-            buf = '';
-            j++;
-            mode = 'text';
-          } else {
-            buf += c;
-          }
-        }
-      }
-      // End of string segment — the value at index i goes next.
-      // (Tagged template invariant: strings.length === values.length + 1,
-      // so "there is a value after strings[i]" iff i < strings.length - 1.
-      // We can't reference values here — parseTemplate runs with only the
-      // strings array; values are substituted later in evalTree.)
-      if (i < strings.length - 1) {
-        if (mode === 'text') {
-          if (buf) insts.push([4, buf, false]);
-          buf = '';
-          insts.push([4, i, true]);
-        } else if (mode === 'attr') {
-          const trimmed = buf.trim();
-          if (trimmed.endsWith('=')) {
-            // buf may contain earlier COMPLETED attrs followed by a new
-            // name ending in "=". Example:  'id="b" onClick='  → the
-            // earlier part 'id="b"' is a complete attr we must run
-            // through parseAttr; the final word (after last whitespace)
-            // is the name of the interpolated attribute.
-            const withoutEq = trimmed.slice(0, -1);
-            const m = withoutEq.match(/^([\\s\\S]*?)(\\S+)\\s*\$/);
-            if (m && m[1].trim()) {
-              parseAttr(insts, m[1].trim());
-              insts.push([3, m[2].trim(), i, true]);
-            } else {
-              insts.push([3, withoutEq.trim(), i, true]);
-            }
-          } else if (trimmed === '') {
-            // spread — not supported in MVP; ignore
-          } else {
-            // Something like  'id="b" onClick'  (boolean-ish / \${Comp}-as-type).
-            // parseAttr splits multi-attrs; last token becomes boolean or
-            // value-holder depending on our interpretation. Keep prior
-            // behaviour — pass the whole thing.
-            parseAttr(insts, trimmed + '=' + JSON.stringify('__val__' + i));
-          }
-          buf = '';
-        } else if (mode === 'tag') {
-          // opener is the value — \${Comp}
-          insts.push([1, i, true]);
-          buf = '';
-          mode = 'attr';
-        }
-      }
-    }
-    if (buf.trim()) insts.push([4, buf, false]);
-    return insts;
-  }
-
-  function commitTag(insts, raw) {
-    const t = raw.trim();
-    if (!t) return;
-    if (t.startsWith('/')) {
-      insts.push([2]);
-    } else {
-      insts.push([1, t, false]);
-    }
-  }
-
-  function parseAttr(insts, raw) {
-    // Attrs separated by whitespace, each as "name" or "name=value" or 'name="value"'
-    const parts = raw.match(/[^\\s"']+=\"[^\"]*\"|[^\\s"']+='[^']*'|[^\\s"']+/g) || [];
-    for (const part of parts) {
-      const eq = part.indexOf('=');
-      if (eq === -1) {
-        insts.push([3, part, true, false]); // boolean attr
-      } else {
-        const name = part.slice(0, eq);
-        let val = part.slice(eq + 1);
-        if ((val.startsWith('"') && val.endsWith('"')) ||
-            (val.startsWith("'") && val.endsWith("'"))) {
-          val = val.slice(1, -1);
-        }
-        insts.push([3, name, val, false]);
-      }
-    }
-  }
-
-  // Walk instructions, substituting values, building a tree of {type, props, children}.
-  function evalTree(insts, values) {
-    const stack = [{ type: '__root__', props: {}, children: [] }];
-    for (const inst of insts) {
-      const top = stack[stack.length - 1];
-      if (inst[0] === 1) {
-        const type = inst[2] ? values[inst[1]] : inst[1];
-        const node = { type, props: {}, children: [] };
-        top.children.push(node);
-        stack.push(node);
-      } else if (inst[0] === 2) {
-        if (stack.length > 1) stack.pop();
-      } else if (inst[0] === 3) {
-        const [, name, valOrIdx, isIdx] = inst;
-        top.props[name] = isIdx ? values[valOrIdx] : valOrIdx;
-      } else if (inst[0] === 4) {
-        const [, valOrIdx, isIdx] = inst;
-        const v = isIdx ? values[valOrIdx] : valOrIdx;
-        if (Array.isArray(v)) for (const x of v) top.children.push(x);
-        else if (v != null) top.children.push(v);
-      }
-    }
-    const root = stack[0];
-    return root.children.length === 1 ? root.children[0] : root.children;
-  }
-
-  /* ---------- primitives (ergonomic wrappers) ---------- */
-  function LoxiaCard({ title, children, padding = 'md' }) {
-    const pad = padding === 'sm' ? '8px' : padding === 'lg' ? '24px' : '16px';
-    return h('div', {
-      className: 'loxia-card',
-      style: {
-        background: 'var(--loxia-card-bg, rgb(var(--gray-50)))',
-        border: '1px solid var(--loxia-card-border, rgb(var(--gray-200)))',
-        borderRadius: '8px',
-        padding: pad,
-        color: 'rgb(var(--gray-900))',
-        fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif',
-      },
-    },
-      title ? h('div', { style: { fontWeight: '600', marginBottom: '8px', fontSize: '14px' } }, title) : null,
-      children
-    );
-  }
-
-  function LoxiaButton({ label, onClick, children, variant = 'primary', disabled }) {
-    const bg = variant === 'primary' ? 'rgb(var(--loxia-600))' :
-               variant === 'danger'  ? '#dc2626' : 'rgb(var(--gray-200))';
-    const color = variant === 'primary' || variant === 'danger' ? 'white' : 'rgb(var(--gray-900))';
-    return h('button', {
-      onClick: disabled ? undefined : onClick,
-      disabled,
-      style: {
-        background: bg, color, border: 'none',
-        padding: '6px 14px', borderRadius: '6px', fontSize: '13px',
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.5 : 1,
-      },
-    }, label || children);
-  }
-
-  function LoxiaInput({ value, onChange, placeholder, type = 'text' }) {
-    return h('input', {
-      type, value: value ?? '', placeholder: placeholder ?? '',
-      onInput: (e) => onChange && onChange(e.target.value),
-      style: {
-        padding: '6px 10px', border: '1px solid rgb(var(--gray-300))',
-        borderRadius: '6px', fontSize: '13px', width: '100%',
-        background: 'rgb(var(--gray-50))', color: 'rgb(var(--gray-900))',
-      },
-    });
-  }
-
-  function LoxiaText({ children, tone = 'default', size = 'md' }) {
-    const color = tone === 'muted' ? 'rgb(var(--gray-500))' : 'rgb(var(--gray-900))';
-    const fs = size === 'sm' ? '12px' : size === 'lg' ? '16px' : '14px';
-    return h('span', { style: { color, fontSize: fs } }, children);
-  }
-
-  function LoxiaMetric({ label, value, unit }) {
-    return h('div', { style: { display: 'flex', flexDirection: 'column', gap: '2px' } },
-      h('div', { style: { fontSize: '11px', color: 'rgb(var(--gray-500))', textTransform: 'uppercase', letterSpacing: '0.05em' } }, label),
-      h('div', { style: { fontSize: '20px', fontWeight: '600', color: 'rgb(var(--gray-900))' } },
-        value, unit ? h('span', { style: { fontSize: '13px', fontWeight: '400', color: 'rgb(var(--gray-500))', marginLeft: '4px' } }, unit) : null
-      )
-    );
-  }
-
-  function LoxiaRow({ children, gap = 'md', justify = 'start', align = 'start' }) {
-    const g = gap === 'sm' ? '6px' : gap === 'lg' ? '20px' : '12px';
-    return h('div', { style: { display: 'flex', flexDirection: 'row', gap: g, justifyContent: justify, alignItems: align, flexWrap: 'wrap' } }, children);
-  }
-  function LoxiaCol({ children, gap = 'md' }) {
-    const g = gap === 'sm' ? '6px' : gap === 'lg' ? '20px' : '12px';
-    return h('div', { style: { display: 'flex', flexDirection: 'column', gap: g } }, children);
-  }
-
-  /* ---------- postMessage SDK ---------- */
-  const _updateListeners = [];
-  function sendEvent(evt) {
-    try {
-      window.parent.postMessage({ __loxia: true, type: 'event', widgetId: window.__loxiaWidgetId, payload: evt }, '*');
-    } catch (err) {
-      console.warn('[loxia] sendEvent failed', err);
-    }
-  }
-  function onUpdate(cb) { if (typeof cb === 'function') _updateListeners.push(cb); }
-  function requestHeight(px) {
-    try {
-      window.parent.postMessage({ __loxia: true, type: 'resize', widgetId: window.__loxiaWidgetId, height: px }, '*');
-    } catch {}
-  }
-
-  window.addEventListener('message', (e) => {
-    if (!e.data || e.data.__loxia !== true) return;
-    if (e.source !== window.parent) return;
-    if (e.data.type === 'update' && e.data.props) {
-      _updateListeners.forEach(cb => { try { cb(e.data.props); } catch (err) { console.warn('[loxia] update handler threw', err); } });
-      _reRender();
-    } else if (e.data.type === 'theme' && e.data.tokens) {
-      applyThemeTokens(e.data.tokens);
-    }
-  });
-
-  function applyThemeTokens(tokens) {
-    const root = document.documentElement;
-    for (const [k, v] of Object.entries(tokens)) {
-      root.style.setProperty('--' + k, v);
-    }
-  }
-
-  /* ---------- auto-resize ---------- */
-  let _heightDebounce = null;
-  function scheduleHeight() {
-    if (_heightDebounce) clearTimeout(_heightDebounce);
-    _heightDebounce = setTimeout(() => {
-      const h = Math.ceil(document.body.scrollHeight);
-      requestHeight(h);
-    }, 50);
-  }
-
-  if (typeof ResizeObserver !== 'undefined') {
-    const ro = new ResizeObserver(() => scheduleHeight());
-    document.addEventListener('DOMContentLoaded', () => ro.observe(document.body));
-  } else {
-    // Fallback: just post once after load.
-    document.addEventListener('DOMContentLoaded', () => setTimeout(scheduleHeight, 50));
-  }
-
-  /* ---------- hooks (for the ROOT component only) ---------- */
-  // Agents are heavily trained on React hooks and reach for useState
-  // reflexively. Supporting a minimal hooks set for the root component
-  // eliminates a whole class of "widget didn't render" failures.
-  //
-  // Scope limitation: hooks are tracked by CALL ORDER in the root render.
-  // Nested components calling hooks would break the call-order contract
-  // (different trees, different orders) — so we only guarantee correctness
-  // for the root App function. The tool description tells the agent to
-  // keep state in the root component, which is almost always fine.
-  const _hookCells = [];
-  let _hookIdx = 0;
-  function _sameDeps(a, b) {
-    if (a === b) return true;
-    if (!a || !b) return false;
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
-    return true;
-  }
-  function useState(initial) {
-    const i = _hookIdx++;
-    if (!_hookCells[i]) _hookCells[i] = { value: typeof initial === 'function' ? initial() : initial };
-    const cell = _hookCells[i];
-    const setValue = (v) => {
-      const next = typeof v === 'function' ? v(cell.value) : v;
-      if (next === cell.value) return;
-      cell.value = next;
-      _reRender();
-    };
-    return [cell.value, setValue];
-  }
-  function useRef(initial) {
-    const i = _hookIdx++;
-    if (!_hookCells[i]) _hookCells[i] = { current: initial };
-    return _hookCells[i];
-  }
-  function useMemo(compute, deps) {
-    const i = _hookIdx++;
-    const cell = _hookCells[i] || (_hookCells[i] = { deps: null, value: undefined });
-    if (cell.deps === null || !_sameDeps(cell.deps, deps)) {
-      cell.value = compute();
-      cell.deps = deps ? deps.slice() : null;
-    }
-    return cell.value;
-  }
-  function useCallback(fn, deps) { return useMemo(() => fn, deps); }
-  // useReducer — implemented as a thin wrapper over useState so agents
-  // that know the pattern can reach for it. \`dispatch(action)\` calls
-  // reducer(state, action) and schedules a re-render.
-  function useReducer(reducer, initial, init) {
-    const [state, setState] = useState(init ? init(initial) : initial);
-    const dispatch = useCallback(function(action) {
-      setState(function(prev) { return reducer(prev, action); });
-    }, [reducer]);
-    return [state, dispatch];
-  }
-  function useEffect(fn, deps) {
-    const i = _hookIdx++;
-    const cell = _hookCells[i] || (_hookCells[i] = { deps: null, cleanup: null });
-    const changed = cell.deps === null || !_sameDeps(cell.deps, deps);
-    if (changed) {
-      if (typeof cell.cleanup === 'function') { try { cell.cleanup(); } catch (err) { console.warn('[loxia] effect cleanup threw', err); } }
-      cell.deps = deps ? deps.slice() : null;
-      // Defer until after DOM paint, matching React semantics.
-      setTimeout(() => {
-        try { cell.cleanup = fn() || null; }
-        catch (err) {
-          if (window.__loxiaReportError) window.__loxiaReportError(err, 'effect');
-          else console.warn('[loxia] effect threw', err);
-        }
-      }, 0);
-    }
-  }
-
-  /* ---------- mount API ---------- */
-  let _agentComponent = null;
-  let _currentProps = null;
-  function _reRender() {
-    if (!_agentComponent || !_rootEl) return;
-    _hookIdx = 0; // reset hook counter for this render pass
-    let vnode = _agentComponent({ ...(_currentProps || {}) });
-    // Factory-style agent code (return function App(){...};): the
-    // outer wrapper returned a function rather than a vnode. Promote
-    // it to the real component and re-run so hooks run in the RIGHT
-    // component's scope.
-    if (typeof vnode === 'function') {
-      _agentComponent = vnode;
-      _hookIdx = 0;
-      vnode = _agentComponent({ ...(_currentProps || {}) });
-    }
-    renderToRoot(vnode, _rootEl);
-  }
-
-  window.loxia = {
-    h, html, render: (component, initialProps) => {
-      _agentComponent = component;
-      _currentProps = initialProps || {};
-      const root = document.getElementById('root') || document.body;
-      _rootEl = root;
-      _reRender();
-    },
-    sendEvent, onUpdate, requestHeight,
-    useState, useEffect, useMemo, useCallback, useRef, useReducer,
-    primitives: { LoxiaCard, LoxiaButton, LoxiaInput, LoxiaText, LoxiaMetric, LoxiaRow, LoxiaCol },
-  };
-  // Expose as bare globals AND as properties on h, so all of these work:
-  //   h.useState, loxia.useState, and bare useState
-  //   const { useState } = h;  (← what agents keep writing — now works)
-  // Bare globals — every one of these also exists under the namespace
-  // aliases (React.X, preact.X, etc.) so agents can write bare OR
-  // namespaced without thinking about it.
-  const _Fragment = function Fragment(props){ return props && props.children; };
-  Object.assign(window, {
-    h, html, createElement: h, Fragment: _Fragment,
-    LoxiaCard, LoxiaButton, LoxiaInput, LoxiaText, LoxiaMetric, LoxiaRow, LoxiaCol,
-    useState, useEffect, useMemo, useCallback, useRef, useReducer,
-  });
-  Object.assign(h, { useState, useEffect, useMemo, useCallback, useRef, useReducer });
-
-  // Namespace aliases. Agents are trained on online tutorials that use a
-  // variety of names — htmPreact, preact, preactHooks, React, htm, etc.
-  // Rather than fight the training data name-by-name (whack-a-mole),
-  // we do two things:
-  //
-  //   1. Enumerate every plausible global name.
-  //   2. Wrap the namespace object in a Proxy so accessing an unknown
-  //      property (e.g. 'preact.useLayoutEffect' or 'React.Children')
-  //      doesn't throw — it returns a clearly-named no-op we can point
-  //      the agent at. Better to fail loudly with "useLayoutEffect is
-  //      not implemented in this runtime" than with a cryptic undefined.
-  //
-  // If an identifier we didn't list comes up, add it to NS_NAMES and the
-  // agent's next attempt will succeed. New additions are always O(1).
-  const _nsBase = {
-    h, html, render: window.loxia.render,
-    useState, useEffect, useMemo, useCallback, useRef, useReducer,
-    createElement: h,
-    Fragment: function Fragment(props){ return props && props.children; },
-    LoxiaCard, LoxiaButton, LoxiaInput, LoxiaText, LoxiaMetric, LoxiaRow, LoxiaCol,
-  };
-  // Self-reference so "import X from 'preact'" (X.default pattern) works.
-  _nsBase.default = _nsBase;
-
-  // Known-missing APIs. Return a stub (function OR class constructor)
-  // that throws with a specific, actionable message instead of
-  // undefined. The agent's next-turn feedback sees the API name
-  // explicitly, so retry paths are direct — no guessing why
-  // \`class X extends React.Component\` failed with "undefined is not a
-  // constructor." This list is the SINGLE SOURCE OF TRUTH; the tool
-  // description references it by name and tests assert alignment.
-  //
-  // Split into two groups:
-  //   - _notImplementedClasses: used with \`new\` / \`extends\`; we return
-  //     a class whose constructor throws with the specific name.
-  //   - _notImplementedFns: everything else — a function that throws.
-  const _notImplementedClasses = new Set([
-    'Component', 'PureComponent',
-  ]);
-  const _notImplementedFns = new Set([
-    // Hooks we do not implement
-    'useLayoutEffect', 'useImperativeHandle', 'useContext',
-    'useDeferredValue', 'useTransition', 'useId', 'useSyncExternalStore',
-    'useErrorBoundary',
-    // Non-hook APIs
-    'createContext', 'createRef', 'forwardRef', 'memo',
-    'lazy', 'Suspense', 'StrictMode', 'Children', 'cloneElement',
-    'isValidElement',
-  ]);
-  function _makeNotImplementedFn(key) {
-    return function notImplemented() {
-      throw new Error(
-        "'" + key + "' is not implemented in this widget runtime. " +
-        'Supported hooks: useState, useEffect, useMemo, useCallback, useRef. ' +
-        'Supported primitives: h, html, LoxiaCard, LoxiaButton, LoxiaInput, LoxiaText, LoxiaMetric, LoxiaRow, LoxiaCol. ' +
-        'This runtime is function-components-only (no class components, no context, no suspense).'
-      );
-    };
-  }
-  function _makeNotImplementedClass(key) {
-    // Returning a class (rather than a plain function) makes the message
-    // land correctly whether the agent does \`new X()\` or \`class Y extends X\`.
-    const C = function(){};
-    C.prototype = {};
-    // Subclass attempts: \`class Y extends Component { ... }\` will run our
-    // constructor when \`super()\` is called from Y's constructor.
-    C.prototype.constructor = function() {
-      throw new Error(
-        "'" + key + "' is not implemented in this widget runtime. " +
-        'Class components are not supported — use a function component ' +
-        'with useState/useEffect hooks instead.'
-      );
-    };
-    // Also throw if used without new (e.g. \`Component()\` direct call).
-    const asFn = function() {
-      throw new Error("'" + key + "' is not implemented in this widget runtime (class components not supported — use function components with useState).");
-    };
-    asFn.prototype = C.prototype;
-    return asFn;
-  }
-  const _ns = new Proxy(_nsBase, {
-    get(target, key) {
-      if (key in target) return target[key];
-      if (typeof key !== 'string') return undefined;
-      if (_notImplementedClasses.has(key)) return _makeNotImplementedClass(key);
-      if (_notImplementedFns.has(key))     return _makeNotImplementedFn(key);
-      return undefined;
-    },
-  });
-
-  // Expose as bare globals too — agents that write \`class X extends Component\`
-  // without any namespace still hit the named error.
-  for (const _className of _notImplementedClasses) {
-    window[_className] = _makeNotImplementedClass(_className);
-  }
-  for (const _fnName of _notImplementedFns) {
-    // Only set if not already defined (don't override anything legitimate).
-    if (!(_fnName in window)) window[_fnName] = _makeNotImplementedFn(_fnName);
-  }
-
-  // Every known alias points at the SAME proxy, so agents can reach for
-  // whichever name their training data surfaced and the destructure
-  // pattern works uniformly: const { useState } = <any-of-these>.
-  const NS_NAMES = [
-    // htm + preact ecosystem
-    'htmPreact', 'htm_preact', 'preactHtm', 'htm', 'Htm',
-    'preact', 'Preact', 'preactjs',
-    // hooks-specific package names
-    'preactHooks', 'PreactHooks', 'preact_hooks',
-    'hooks', 'Hooks',
-    // React ecosystem (we aren't React but the surface matches closely)
-    'React', 'react',
-    'reactHooks', 'ReactHooks', 'react_hooks',
-    // Signals / standalone bundles that sometimes appear
-    'preactStandalone', 'preact_standalone',
-  ];
-  for (const _name of NS_NAMES) {
-    window[_name] = _ns;
-  }
-  // ReactDOM gets a minimal render shim — React code often uses
-  // ReactDOM.render(vnode, target) as a mount call. We map it into loxia.render.
-  window.ReactDOM = {
-    render: function(vnode, target) {
-      window.loxia.render(function() { return vnode; }, {});
-    },
-    createRoot: function() {
-      return {
-        render: function(vnode) {
-          window.loxia.render(function() { return vnode; }, {});
-        },
-        unmount: function() {},
-      };
-    },
-  };
-})();
-`;
-
-export default WIDGET_RUNTIME;
+/**
+ * Widget runtime bundle — STRING, served to every jsx-mode iframe.
+ *
+ * This file is a Node module that exports a plain string. The string is
+ * JavaScript that runs INSIDE the sandboxed iframe. Keep it self-contained:
+ * the iframe has null origin, no network (CSP connect-src 'none'), and
+ * no same-origin access — there is no way to lazy-load anything.
+ *
+ * Why inline everything as a single string (not a bundled file served
+ * via <script src>): the iframe's CSP is script-src 'self' which, for a
+ * srcdoc document, resolves 'self' to a unique/null origin that can't
+ * match any URL. Inline scripts (via 'unsafe-inline' in CSP) are the
+ * only reliable path.
+ *
+ * Contains:
+ *   - A minimal Preact-flavoured h()/render() (hand-rolled, ~500 LOC)
+ *   - htm-style tagged-template compiler (~200 LOC)
+ *   - The loxia.* SDK (postMessage bridge)
+ *   - A small primitive catalogue: Card, Button, Input, Text, Metric, Row, Col
+ *
+ * MVP note: the primitive catalog is intentionally minimal. Agents can
+ * use plain HTML elements in their render functions too — `h('div', ...)`
+ * and `html\`<div>...\`` both work. Primitives are ergonomics.
+ */
+
+export const WIDGET_RUNTIME = `
+/* ==== Loxia widget runtime v1 ==== */
+(function () {
+  'use strict';
+
+  /* ---------- tiny VDOM (Preact-flavoured) ---------- */
+  // VNode: { type, props, children }
+  function h(type, props, ...children) {
+    return { type, props: props || {}, children: children.flat(Infinity).filter(c => c != null && c !== false) };
+  }
+
+  // Render a VNode/text into a real DOM node. Very small — re-renders
+  // replace the whole subtree rather than diffing (fine for MVP widget
+  // sizes; can upgrade later).
+  function createDom(v) {
+    if (v == null || v === false) return document.createTextNode('');
+    if (typeof v === 'string' || typeof v === 'number') return document.createTextNode(String(v));
+    if (typeof v.type === 'function') {
+      // Component — call with props + children and recurse.
+      const childrenArg = v.children.length === 1 ? v.children[0] : v.children;
+      const out = v.type({ ...v.props, children: childrenArg });
+      return createDom(out);
+    }
+    // Native element
+    const el = document.createElement(v.type);
+    for (const [k, val] of Object.entries(v.props || {})) {
+      if (val == null || val === false) continue;
+      if (k === 'children') continue;
+      if (k === 'style' && typeof val === 'object') {
+        Object.assign(el.style, val);
+      } else if (k === 'className') {
+        el.setAttribute('class', String(val));
+      } else if (k === 'dangerouslySetInnerHTML') {
+        // Deliberately not supported — users who want HTML can use kind:'html'.
+        console.warn('[loxia] dangerouslySetInnerHTML is not supported in jsx widgets');
+      } else if (k.startsWith('on') && typeof val === 'function') {
+        el.addEventListener(k.slice(2).toLowerCase(), val);
+      } else {
+        el.setAttribute(k, String(val));
+      }
+    }
+    for (const child of v.children) {
+      el.appendChild(createDom(child));
+    }
+    return el;
+  }
+
+  let _rootEl = null;
+  let _rootVNode = null;
+  function renderToRoot(vnode, container) {
+    _rootEl = container;
+    _rootVNode = vnode;
+    container.innerHTML = '';
+    container.appendChild(createDom(vnode));
+    scheduleHeight();
+  }
+
+  /* ---------- htm-ish tagged-template compiler ---------- */
+  // Parses:   html\`<Card title=\${t}><Button onClick=\${f}>hi<//></>\`
+  // into a VNode tree using the h() above. Small but sufficient for
+  // widget-shape templates (elements, attributes, children, closing tags
+  // in "//" form, component references via \${Component}).
+  //
+  // Adapted from the public-domain htm algorithm; rewritten terse for inlining.
+  const CACHE = new WeakMap();
+  function html(strings) {
+    const values = Array.prototype.slice.call(arguments, 1);
+    let tree = CACHE.get(strings);
+    if (!tree) {
+      tree = parseTemplate(strings);
+      CACHE.set(strings, tree);
+    }
+    return evalTree(tree, values);
+  }
+
+  // Parse the template array into an instruction list we can replay with values.
+  // Instructions: [kind, ...]
+  //   [1, type]           OPEN (type is string|index)
+  //   [2]                 CLOSE
+  //   [3, name, valueOrIdx, isIndex]  ATTR
+  //   [4, textOrIdx, isIndex]         CHILD
+  function parseTemplate(strings) {
+    const insts = [];
+    let buf = '';
+    let mode = 'text'; // text | tag | attr
+    for (let i = 0; i < strings.length; i++) {
+      const s = strings[i];
+      for (let j = 0; j < s.length; j++) {
+        const c = s[j];
+        if (mode === 'text') {
+          if (c === '<') {
+            if (buf.trim()) insts.push([4, buf, false]);
+            buf = '';
+            mode = 'tag';
+          } else {
+            buf += c;
+          }
+        } else if (mode === 'tag') {
+          if (c === '>') {
+            commitTag(insts, buf);
+            buf = '';
+            mode = 'text';
+          } else if (/\\s/.test(c) && buf) {
+            commitTag(insts, buf);
+            buf = '';
+            mode = 'attr';
+          } else if (c === '/' && j + 1 < s.length && s[j + 1] === '>') {
+            // self-close: <Foo/> — commit then close
+            commitTag(insts, buf);
+            insts.push([2]);
+            buf = '';
+            j++;
+            mode = 'text';
+          } else {
+            buf += c;
+          }
+        } else if (mode === 'attr') {
+          if (c === '>') {
+            if (buf.trim()) parseAttr(insts, buf);
+            buf = '';
+            mode = 'text';
+          } else if (c === '/' && j + 1 < s.length && s[j + 1] === '>') {
+            if (buf.trim()) parseAttr(insts, buf);
+            insts.push([2]);
+            buf = '';
+            j++;
+            mode = 'text';
+          } else {
+            buf += c;
+          }
+        }
+      }
+      // End of string segment — the value at index i goes next.
+      // (Tagged template invariant: strings.length === values.length + 1,
+      // so "there is a value after strings[i]" iff i < strings.length - 1.
+      // We can't reference values here — parseTemplate runs with only the
+      // strings array; values are substituted later in evalTree.)
+      if (i < strings.length - 1) {
+        if (mode === 'text') {
+          if (buf) insts.push([4, buf, false]);
+          buf = '';
+          insts.push([4, i, true]);
+        } else if (mode === 'attr') {
+          const trimmed = buf.trim();
+          if (trimmed.endsWith('=')) {
+            // buf may contain earlier COMPLETED attrs followed by a new
+            // name ending in "=". Example:  'id="b" onClick='  → the
+            // earlier part 'id="b"' is a complete attr we must run
+            // through parseAttr; the final word (after last whitespace)
+            // is the name of the interpolated attribute.
+            const withoutEq = trimmed.slice(0, -1);
+            const m = withoutEq.match(/^([\\s\\S]*?)(\\S+)\\s*$/);
+            if (m && m[1].trim()) {
+              parseAttr(insts, m[1].trim());
+              insts.push([3, m[2].trim(), i, true]);
+            } else {
+              insts.push([3, withoutEq.trim(), i, true]);
+            }
+          } else if (trimmed === '') {
+            // spread — not supported in MVP; ignore
+          } else {
+            // Something like  'id="b" onClick'  (boolean-ish / \${Comp}-as-type).
+            // parseAttr splits multi-attrs; last token becomes boolean or
+            // value-holder depending on our interpretation. Keep prior
+            // behaviour — pass the whole thing.
+            parseAttr(insts, trimmed + '=' + JSON.stringify('__val__' + i));
+          }
+          buf = '';
+        } else if (mode === 'tag') {
+          // opener is the value — \${Comp}
+          insts.push([1, i, true]);
+          buf = '';
+          mode = 'attr';
+        }
+      }
+    }
+    if (buf.trim()) insts.push([4, buf, false]);
+    return insts;
+  }
+
+  function commitTag(insts, raw) {
+    const t = raw.trim();
+    if (!t) return;
+    if (t.startsWith('/')) {
+      insts.push([2]);
+    } else {
+      insts.push([1, t, false]);
+    }
+  }
+
+  function parseAttr(insts, raw) {
+    // Attrs separated by whitespace, each as "name" or "name=value" or 'name="value"'
+    const parts = raw.match(/[^\\s"']+="[^"]*"|[^\\s"']+='[^']*'|[^\\s"']+/g) || [];
+    for (const part of parts) {
+      const eq = part.indexOf('=');
+      if (eq === -1) {
+        insts.push([3, part, true, false]); // boolean attr
+      } else {
+        const name = part.slice(0, eq);
+        let val = part.slice(eq + 1);
+        if ((val.startsWith('"') && val.endsWith('"')) ||
+            (val.startsWith("'") && val.endsWith("'"))) {
+          val = val.slice(1, -1);
+        }
+        insts.push([3, name, val, false]);
+      }
+    }
+  }
+
+  // Walk instructions, substituting values, building a tree of {type, props, children}.
+  function evalTree(insts, values) {
+    const stack = [{ type: '__root__', props: {}, children: [] }];
+    for (const inst of insts) {
+      const top = stack[stack.length - 1];
+      if (inst[0] === 1) {
+        const type = inst[2] ? values[inst[1]] : inst[1];
+        const node = { type, props: {}, children: [] };
+        top.children.push(node);
+        stack.push(node);
+      } else if (inst[0] === 2) {
+        if (stack.length > 1) stack.pop();
+      } else if (inst[0] === 3) {
+        const [, name, valOrIdx, isIdx] = inst;
+        top.props[name] = isIdx ? values[valOrIdx] : valOrIdx;
+      } else if (inst[0] === 4) {
+        const [, valOrIdx, isIdx] = inst;
+        const v = isIdx ? values[valOrIdx] : valOrIdx;
+        if (Array.isArray(v)) for (const x of v) top.children.push(x);
+        else if (v != null) top.children.push(v);
+      }
+    }
+    const root = stack[0];
+    return root.children.length === 1 ? root.children[0] : root.children;
+  }
+
+  /* ---------- primitives (ergonomic wrappers) ---------- */
+  function LoxiaCard({ title, children, padding = 'md' }) {
+    const pad = padding === 'sm' ? '8px' : padding === 'lg' ? '24px' : '16px';
+    return h('div', {
+      className: 'loxia-card',
+      style: {
+        background: 'var(--loxia-card-bg, rgb(var(--gray-50)))',
+        border: '1px solid var(--loxia-card-border, rgb(var(--gray-200)))',
+        borderRadius: '8px',
+        padding: pad,
+        color: 'rgb(var(--gray-900))',
+        fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif',
+      },
+    },
+      title ? h('div', { style: { fontWeight: '600', marginBottom: '8px', fontSize: '14px' } }, title) : null,
+      children
+    );
+  }
+
+  function LoxiaButton({ label, onClick, children, variant = 'primary', disabled }) {
+    const bg = variant === 'primary' ? 'rgb(var(--loxia-600))' :
+               variant === 'danger'  ? '#dc2626' : 'rgb(var(--gray-200))';
+    const color = variant === 'primary' || variant === 'danger' ? 'white' : 'rgb(var(--gray-900))';
+    return h('button', {
+      onClick: disabled ? undefined : onClick,
+      disabled,
+      style: {
+        background: bg, color, border: 'none',
+        padding: '6px 14px', borderRadius: '6px', fontSize: '13px',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+      },
+    }, label || children);
+  }
+
+  function LoxiaInput({ value, onChange, placeholder, type = 'text' }) {
+    return h('input', {
+      type, value: value ?? '', placeholder: placeholder ?? '',
+      onInput: (e) => onChange && onChange(e.target.value),
+      style: {
+        padding: '6px 10px', border: '1px solid rgb(var(--gray-300))',
+        borderRadius: '6px', fontSize: '13px', width: '100%',
+        background: 'rgb(var(--gray-50))', color: 'rgb(var(--gray-900))',
+      },
+    });
+  }
+
+  function LoxiaText({ children, tone = 'default', size = 'md' }) {
+    const color = tone === 'muted' ? 'rgb(var(--gray-500))' : 'rgb(var(--gray-900))';
+    const fs = size === 'sm' ? '12px' : size === 'lg' ? '16px' : '14px';
+    return h('span', { style: { color, fontSize: fs } }, children);
+  }
+
+  function LoxiaMetric({ label, value, unit }) {
+    return h('div', { style: { display: 'flex', flexDirection: 'column', gap: '2px' } },
+      h('div', { style: { fontSize: '11px', color: 'rgb(var(--gray-500))', textTransform: 'uppercase', letterSpacing: '0.05em' } }, label),
+      h('div', { style: { fontSize: '20px', fontWeight: '600', color: 'rgb(var(--gray-900))' } },
+        value, unit ? h('span', { style: { fontSize: '13px', fontWeight: '400', color: 'rgb(var(--gray-500))', marginLeft: '4px' } }, unit) : null
+      )
+    );
+  }
+
+  function LoxiaRow({ children, gap = 'md', justify = 'start', align = 'start' }) {
+    const g = gap === 'sm' ? '6px' : gap === 'lg' ? '20px' : '12px';
+    return h('div', { style: { display: 'flex', flexDirection: 'row', gap: g, justifyContent: justify, alignItems: align, flexWrap: 'wrap' } }, children);
+  }
+  function LoxiaCol({ children, gap = 'md' }) {
+    const g = gap === 'sm' ? '6px' : gap === 'lg' ? '20px' : '12px';
+    return h('div', { style: { display: 'flex', flexDirection: 'column', gap: g } }, children);
+  }
+
+  /* ---------- postMessage SDK ---------- */
+  const _updateListeners = [];
+  function sendEvent(evt) {
+    try {
+      window.parent.postMessage({ __loxia: true, type: 'event', widgetId: window.__loxiaWidgetId, payload: evt }, '*');
+    } catch (err) {
+      console.warn('[loxia] sendEvent failed', err);
+    }
+  }
+  function onUpdate(cb) { if (typeof cb === 'function') _updateListeners.push(cb); }
+  function requestHeight(px) {
+    try {
+      window.parent.postMessage({ __loxia: true, type: 'resize', widgetId: window.__loxiaWidgetId, height: px }, '*');
+    } catch {}
+  }
+
+  window.addEventListener('message', (e) => {
+    if (!e.data || e.data.__loxia !== true) return;
+    if (e.source !== window.parent) return;
+    if (e.data.type === 'update' && e.data.props) {
+      _updateListeners.forEach(cb => { try { cb(e.data.props); } catch (err) { console.warn('[loxia] update handler threw', err); } });
+      _reRender();
+    } else if (e.data.type === 'theme' && e.data.tokens) {
+      applyThemeTokens(e.data.tokens);
+    }
+  });
+
+  function applyThemeTokens(tokens) {
+    const root = document.documentElement;
+    for (const [k, v] of Object.entries(tokens)) {
+      root.style.setProperty('--' + k, v);
+    }
+  }
+
+  /* ---------- auto-resize ---------- */
+  let _heightDebounce = null;
+  function scheduleHeight() {
+    if (_heightDebounce) clearTimeout(_heightDebounce);
+    _heightDebounce = setTimeout(() => {
+      const h = Math.ceil(document.body.scrollHeight);
+      requestHeight(h);
+    }, 50);
+  }
+
+  if (typeof ResizeObserver !== 'undefined') {
+    const ro = new ResizeObserver(() => scheduleHeight());
+    document.addEventListener('DOMContentLoaded', () => ro.observe(document.body));
+  } else {
+    // Fallback: just post once after load.
+    document.addEventListener('DOMContentLoaded', () => setTimeout(scheduleHeight, 50));
+  }
+
+  /* ---------- hooks (for the ROOT component only) ---------- */
+  // Agents are heavily trained on React hooks and reach for useState
+  // reflexively. Supporting a minimal hooks set for the root component
+  // eliminates a whole class of "widget didn't render" failures.
+  //
+  // Scope limitation: hooks are tracked by CALL ORDER in the root render.
+  // Nested components calling hooks would break the call-order contract
+  // (different trees, different orders) — so we only guarantee correctness
+  // for the root App function. The tool description tells the agent to
+  // keep state in the root component, which is almost always fine.
+  const _hookCells = [];
+  let _hookIdx = 0;
+  function _sameDeps(a, b) {
+    if (a === b) return true;
+    if (!a || !b) return false;
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+    return true;
+  }
+  function useState(initial) {
+    const i = _hookIdx++;
+    if (!_hookCells[i]) _hookCells[i] = { value: typeof initial === 'function' ? initial() : initial };
+    const cell = _hookCells[i];
+    const setValue = (v) => {
+      const next = typeof v === 'function' ? v(cell.value) : v;
+      if (next === cell.value) return;
+      cell.value = next;
+      _reRender();
+    };
+    return [cell.value, setValue];
+  }
+  function useRef(initial) {
+    const i = _hookIdx++;
+    if (!_hookCells[i]) _hookCells[i] = { current: initial };
+    return _hookCells[i];
+  }
+  function useMemo(compute, deps) {
+    const i = _hookIdx++;
+    const cell = _hookCells[i] || (_hookCells[i] = { deps: null, value: undefined });
+    if (cell.deps === null || !_sameDeps(cell.deps, deps)) {
+      cell.value = compute();
+      cell.deps = deps ? deps.slice() : null;
+    }
+    return cell.value;
+  }
+  function useCallback(fn, deps) { return useMemo(() => fn, deps); }
+  // useReducer — implemented as a thin wrapper over useState so agents
+  // that know the pattern can reach for it. \`dispatch(action)\` calls
+  // reducer(state, action) and schedules a re-render.
+  function useReducer(reducer, initial, init) {
+    const [state, setState] = useState(init ? init(initial) : initial);
+    const dispatch = useCallback(function(action) {
+      setState(function(prev) { return reducer(prev, action); });
+    }, [reducer]);
+    return [state, dispatch];
+  }
+  function useEffect(fn, deps) {
+    const i = _hookIdx++;
+    const cell = _hookCells[i] || (_hookCells[i] = { deps: null, cleanup: null });
+    const changed = cell.deps === null || !_sameDeps(cell.deps, deps);
+    if (changed) {
+      if (typeof cell.cleanup === 'function') { try { cell.cleanup(); } catch (err) { console.warn('[loxia] effect cleanup threw', err); } }
+      cell.deps = deps ? deps.slice() : null;
+      // Defer until after DOM paint, matching React semantics.
+      setTimeout(() => {
+        try { cell.cleanup = fn() || null; }
+        catch (err) {
+          if (window.__loxiaReportError) window.__loxiaReportError(err, 'effect');
+          else console.warn('[loxia] effect threw', err);
+        }
+      }, 0);
+    }
+  }
+
+  /* ---------- mount API ---------- */
+  let _agentComponent = null;
+  let _currentProps = null;
+  function _reRender() {
+    if (!_agentComponent || !_rootEl) return;
+    _hookIdx = 0; // reset hook counter for this render pass
+    let vnode = _agentComponent({ ...(_currentProps || {}) });
+    // Factory-style agent code (return function App(){...};): the
+    // outer wrapper returned a function rather than a vnode. Promote
+    // it to the real component and re-run so hooks run in the RIGHT
+    // component's scope.
+    if (typeof vnode === 'function') {
+      _agentComponent = vnode;
+      _hookIdx = 0;
+      vnode = _agentComponent({ ...(_currentProps || {}) });
+    }
+    renderToRoot(vnode, _rootEl);
+  }
+
+  window.loxia = {
+    h, html, render: (component, initialProps) => {
+      _agentComponent = component;
+      _currentProps = initialProps || {};
+      const root = document.getElementById('root') || document.body;
+      _rootEl = root;
+      _reRender();
+    },
+    sendEvent, onUpdate, requestHeight,
+    useState, useEffect, useMemo, useCallback, useRef, useReducer,
+    primitives: { LoxiaCard, LoxiaButton, LoxiaInput, LoxiaText, LoxiaMetric, LoxiaRow, LoxiaCol },
+  };
+  // Expose as bare globals AND as properties on h, so all of these work:
+  //   h.useState, loxia.useState, and bare useState
+  //   const { useState } = h;  (← what agents keep writing — now works)
+  // Bare globals — every one of these also exists under the namespace
+  // aliases (React.X, preact.X, etc.) so agents can write bare OR
+  // namespaced without thinking about it.
+  const _Fragment = function Fragment(props){ return props && props.children; };
+  Object.assign(window, {
+    h, html, createElement: h, Fragment: _Fragment,
+    LoxiaCard, LoxiaButton, LoxiaInput, LoxiaText, LoxiaMetric, LoxiaRow, LoxiaCol,
+    useState, useEffect, useMemo, useCallback, useRef, useReducer,
+  });
+  Object.assign(h, { useState, useEffect, useMemo, useCallback, useRef, useReducer });
+
+  // Namespace aliases. Agents are trained on online tutorials that use a
+  // variety of names — htmPreact, preact, preactHooks, React, htm, etc.
+  // Rather than fight the training data name-by-name (whack-a-mole),
+  // we do two things:
+  //
+  //   1. Enumerate every plausible global name.
+  //   2. Wrap the namespace object in a Proxy so accessing an unknown
+  //      property (e.g. 'preact.useLayoutEffect' or 'React.Children')
+  //      doesn't throw — it returns a clearly-named no-op we can point
+  //      the agent at. Better to fail loudly with "useLayoutEffect is
+  //      not implemented in this runtime" than with a cryptic undefined.
+  //
+  // If an identifier we didn't list comes up, add it to NS_NAMES and the
+  // agent's next attempt will succeed. New additions are always O(1).
+  const _nsBase = {
+    h, html, render: window.loxia.render,
+    useState, useEffect, useMemo, useCallback, useRef, useReducer,
+    createElement: h,
+    Fragment: function Fragment(props){ return props && props.children; },
+    LoxiaCard, LoxiaButton, LoxiaInput, LoxiaText, LoxiaMetric, LoxiaRow, LoxiaCol,
+  };
+  // Self-reference so "import X from 'preact'" (X.default pattern) works.
+  _nsBase.default = _nsBase;
+
+  // Known-missing APIs. Return a stub (function OR class constructor)
+  // that throws with a specific, actionable message instead of
+  // undefined. The agent's next-turn feedback sees the API name
+  // explicitly, so retry paths are direct — no guessing why
+  // \`class X extends React.Component\` failed with "undefined is not a
+  // constructor." This list is the SINGLE SOURCE OF TRUTH; the tool
+  // description references it by name and tests assert alignment.
+  //
+  // Split into two groups:
+  //   - _notImplementedClasses: used with \`new\` / \`extends\`; we return
+  //     a class whose constructor throws with the specific name.
+  //   - _notImplementedFns: everything else — a function that throws.
+  const _notImplementedClasses = new Set([
+    'Component', 'PureComponent',
+  ]);
+  const _notImplementedFns = new Set([
+    // Hooks we do not implement
+    'useLayoutEffect', 'useImperativeHandle', 'useContext',
+    'useDeferredValue', 'useTransition', 'useId', 'useSyncExternalStore',
+    'useErrorBoundary',
+    // Non-hook APIs
+    'createContext', 'createRef', 'forwardRef', 'memo',
+    'lazy', 'Suspense', 'StrictMode', 'Children', 'cloneElement',
+    'isValidElement',
+  ]);
+  function _makeNotImplementedFn(key) {
+    return function notImplemented() {
+      throw new Error(
+        "'" + key + "' is not implemented in this widget runtime. " +
+        'Supported hooks: useState, useEffect, useMemo, useCallback, useRef. ' +
+        'Supported primitives: h, html, LoxiaCard, LoxiaButton, LoxiaInput, LoxiaText, LoxiaMetric, LoxiaRow, LoxiaCol. ' +
+        'This runtime is function-components-only (no class components, no context, no suspense).'
+      );
+    };
+  }
+  function _makeNotImplementedClass(key) {
+    // Returning a class (rather than a plain function) makes the message
+    // land correctly whether the agent does \`new X()\` or \`class Y extends X\`.
+    const C = function(){};
+    C.prototype = {};
+    // Subclass attempts: \`class Y extends Component { ... }\` will run our
+    // constructor when \`super()\` is called from Y's constructor.
+    C.prototype.constructor = function() {
+      throw new Error(
+        "'" + key + "' is not implemented in this widget runtime. " +
+        'Class components are not supported — use a function component ' +
+        'with useState/useEffect hooks instead.'
+      );
+    };
+    // Also throw if used without new (e.g. \`Component()\` direct call).
+    const asFn = function() {
+      throw new Error("'" + key + "' is not implemented in this widget runtime (class components not supported — use function components with useState).");
+    };
+    asFn.prototype = C.prototype;
+    return asFn;
+  }
+  const _ns = new Proxy(_nsBase, {
+    get(target, key) {
+      if (key in target) return target[key];
+      if (typeof key !== 'string') return undefined;
+      if (_notImplementedClasses.has(key)) return _makeNotImplementedClass(key);
+      if (_notImplementedFns.has(key))     return _makeNotImplementedFn(key);
+      return undefined;
+    },
+  });
+
+  // Expose as bare globals too — agents that write \`class X extends Component\`
+  // without any namespace still hit the named error.
+  for (const _className of _notImplementedClasses) {
+    window[_className] = _makeNotImplementedClass(_className);
+  }
+  for (const _fnName of _notImplementedFns) {
+    // Only set if not already defined (don't override anything legitimate).
+    if (!(_fnName in window)) window[_fnName] = _makeNotImplementedFn(_fnName);
+  }
+
+  // Every known alias points at the SAME proxy, so agents can reach for
+  // whichever name their training data surfaced and the destructure
+  // pattern works uniformly: const { useState } = <any-of-these>.
+  const NS_NAMES = [
+    // htm + preact ecosystem
+    'htmPreact', 'htm_preact', 'preactHtm', 'htm', 'Htm',
+    'preact', 'Preact', 'preactjs',
+    // hooks-specific package names
+    'preactHooks', 'PreactHooks', 'preact_hooks',
+    'hooks', 'Hooks',
+    // React ecosystem (we aren't React but the surface matches closely)
+    'React', 'react',
+    'reactHooks', 'ReactHooks', 'react_hooks',
+    // Signals / standalone bundles that sometimes appear
+    'preactStandalone', 'preact_standalone',
+  ];
+  for (const _name of NS_NAMES) {
+    window[_name] = _ns;
+  }
+  // ReactDOM gets a minimal render shim — React code often uses
+  // ReactDOM.render(vnode, target) as a mount call. We map it into loxia.render.
+  window.ReactDOM = {
+    render: function(vnode, target) {
+      window.loxia.render(function() { return vnode; }, {});
+    },
+    createRoot: function() {
+      return {
+        render: function(vnode) {
+          window.loxia.render(function() { return vnode; }, {});
+        },
+        unmount: function() {},
+      };
+    },
+  };
+})();
+`;
+
+export default WIDGET_RUNTIME;