morph-embed 0.1.0

package/dist/morph-embed.esm.mjs

@@ -0,0 +1,2424 @@
+/*! Morph Embed SDK v0.1.0 — https://usemorph.xyz — MIT */
+const g = typeof window !== "undefined" ? window : globalThis;
+
+/* ---- shared/dsl.js ---- */
+/*
+ * Morph DSL — the contract between the model and the page.
+ *
+ * The model returns a Transform: { version, explanation, ops: [...] }.
+ * This module:
+ *   - validateTransform()  : structural validation + sanitization (PURE, no DOM)
+ *   - applyTransform()     : interprets ops against a real document (needs a DOM)
+ *   - undoTransform()      : reverses an applied transform (in-session)
+ *
+ * SECURITY: there is no code-execution op. addElement HTML is whitelist-sanitized,
+ * injected CSS is neutralized, and no op can run script. The interpreter never trusts
+ * the model — every op is validated/sanitized here, on our side.
+ *
+ * UMD: works as a Node module (tests) and as a browser global `MorphDSL` (content script).
+ */
+(function (global, factory) {
+  const api = factory();
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  else global.MorphDSL = api;
+})(typeof self !== 'undefined' ? self : this, function () {
+  'use strict';
+
+  const SCHEMA_VERSION = 1;
+
+  // Op name -> required string fields (besides `op`). Optional fields handled per-op.
+  const OP_SPECS = {
+    injectCSS:   { fields: ['css'] },
+    hide:        { fields: ['selector'] },
+    show:        { fields: ['selector'] },
+    remove:      { fields: ['selector'] },
+    setStyle:    { fields: ['selector'], object: 'style' },
+    setText:     { fields: ['selector', 'text'] },
+    setAttr:     { fields: ['selector', 'name', 'value'] },
+    addClass:    { fields: ['selector', 'class'] },
+    removeClass: { fields: ['selector', 'class'] },
+    move:        { fields: ['selector', 'target', 'position'] },
+    addElement:  { fields: ['html', 'target', 'position'] },
+    renderData:  { fields: ['target', 'position', 'chart'] },
+  };
+
+  const POSITIONS = ['before', 'after', 'prepend', 'append'];
+
+  const ALLOWED_TAGS = new Set([
+    'div', 'span', 'p', 'a', 'ul', 'ol', 'li', 'img', 'b', 'i', 'strong', 'em',
+    'br', 'hr', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'table', 'thead', 'tbody',
+    'tr', 'td', 'th', 'section', 'article', 'header', 'footer', 'nav', 'aside',
+    'main', 'small', 'code', 'pre', 'blockquote', 'figure', 'figcaption',
+    'label', 'button', 'mark', 'time', 'sub', 'sup', 'caption', 'dl', 'dt', 'dd',
+  ]);
+
+  const ALLOWED_ATTRS = new Set([
+    'class', 'id', 'style', 'href', 'src', 'alt', 'title', 'role', 'target',
+    'rel', 'width', 'height', 'colspan', 'rowspan', 'datetime', 'type',
+  ]);
+
+  const SAFE_URL = /^(https?:|mailto:|tel:|\/|#|\.\/|\.\.\/)/i;
+
+  // Namespaces whose elements must be DROPPED with their whole subtree (none are
+  // in ALLOWED_TAGS, and foreign content enables mXSS / <svg><script> leakage).
+  const SVG_NS = 'http://www.w3.org/2000/svg';
+  const MATHML_NS = 'http://www.w3.org/1998/Math/MathML';
+
+  // Elements whose ENTIRE subtree must be dropped (not unwrapped): their text
+  // content is executable/active in some context (script) or is a parsing trap
+  // that re-activates on reparse (noscript/template-script, style breakout,
+  // <title>/<textarea> mXSS). None are in ALLOWED_TAGS.
+  const DROP_SUBTREE_TAGS = new Set([
+    'script', 'style', 'noscript', 'noembed', 'noframes', 'iframe', 'frame',
+    'frameset', 'object', 'embed', 'applet', 'title', 'textarea', 'xmp',
+    'plaintext', 'listing',
+  ]);
+
+  // URL-bearing attribute names (used by both HTML sanitizer and setAttr guard).
+  const URL_ATTRS = new Set(['href', 'src', 'srcset', 'xlink:href']);
+
+  // Modest length caps (DoS hygiene; generous enough not to clip real payloads).
+  const MAX_CSS = 200000;
+  const MAX_HTML = 200000;
+  const MAX_TEXT = 5000;
+  const MAX_EXPLANATION = 500;
+  const MAX_SELECTOR = 2000;
+  const MAX_LABEL = 120;          // chart title cap
+  const MAX_CHART_POINTS = 60;    // bars / points per chart
+  // Trusted chart geometry — rendered by US via createElementNS, never the model.
+  const CHART_W = 600, CHART_H = 280, CHART_PAD = 40;
+
+  // ---- pure helpers --------------------------------------------------------
+
+  function isString(v) { return typeof v === 'string'; }
+
+  // Normalize a CSS string for DANGER DETECTION only (never used as output):
+  // strip /*...*/ comments, decode CSS backslash escapes (\65 -> e, \6a -> j),
+  // and collapse whitespace so 'expr/**/ession(' and '\65 xpression' are caught.
+  function normalizeCssForScan(css) {
+    if (!isString(css)) return '';
+    let s = css.replace(/\/\*[\s\S]*?\*\//g, ''); // strip comments
+    // Decode CSS escapes: \<1-6 hex> (optional trailing ws) or \<char>
+    s = s.replace(/\\([0-9a-fA-F]{1,6})\s?/g, function (_, hex) {
+      try {
+        const cp = parseInt(hex, 16);
+        if (cp > 0 && cp <= 0x10ffff) return String.fromCodePoint(cp);
+      } catch (_e) { /* fall through */ }
+      return '';
+    });
+    s = s.replace(/\\([^\r\n0-9a-fA-F])/g, '$1'); // \<char> -> char
+    // strip control chars / NUL, collapse whitespace
+    s = s.replace(/[\x00-\x20\x7f]+/g, ' ');
+    return s.toLowerCase();
+  }
+
+  // Does the (already normalized) CSS contain a dangerous construct?
+  function cssHasDanger(normalized) {
+    return (
+      /@import/.test(normalized) ||
+      /expression\s*\(/.test(normalized) ||
+      /behavior\s*:/.test(normalized) ||
+      /-moz-binding/.test(normalized) ||
+      /url\(\s*(['"]?)\s*(javascript|vbscript|mocha|livescript|data\s*:\s*text\/html|data\s*:\s*application)/.test(normalized) ||
+      /(javascript|vbscript|mocha|livescript)\s*:/.test(normalized)
+    );
+  }
+
+  // Shared CSS neutralizer. `mode` is 'css' (injectCSS) or 'style' (style attr /
+  // setStyle value). When the normalized form trips cssHasDanger we strip the
+  // offending tokens from the ORIGINAL text (comment-/escape-aware) rather than
+  // rewriting valid styling. If we cannot prove it safe we blank it.
+  function neutralizeCssValue(value, mode) {
+    if (!isString(value)) return '';
+    let out = value;
+    // Token-level removals that are safe to apply unconditionally. Each pattern
+    // tolerates intervening CSS comments/whitespace.
+    const ws = '(?:\\s|/\\*[\\s\\S]*?\\*/)*';
+    // @import ...;  -> drop
+    out = out.replace(new RegExp('@import[^;]*;?', 'gi'), '');
+    // expression( possibly comment-split: expr/**/ession(
+    out = out.replace(new RegExp('e' + ws + 'x' + ws + 'p' + ws + 'r' + ws + 'e' + ws + 's' + ws + 's' + ws + 'i' + ws + 'o' + ws + 'n' + ws + '\\(', 'gi'), 'void(');
+    // behavior: and -moz-binding:
+    out = out.replace(new RegExp('behavior' + ws + ':', 'gi'), '/* behavior */:');
+    out = out.replace(new RegExp('-moz-binding' + ws + ':', 'gi'), '/* binding */:');
+    // url( <comments/ws> <dangerous-scheme> ...) -> url(about:blank#)
+    out = out.replace(
+      /url\(\s*(['"]?)((?:\/\*[\s\S]*?\*\/|\s)*)(javascript|vbscript|mocha|livescript|data\s*:\s*text\/html|data\s*:\s*application)[^)]*\)/gi,
+      'url($1about:blank#)'
+    );
+    // bare scheme prefixes inside the value (style attr context)
+    if (mode === 'style') {
+      out = out.replace(/(javascript|vbscript|mocha|livescript)\s*:/gi, '');
+    }
+    // <style> breakout literal (injectCSS goes into a <style> textContent)
+    if (mode === 'css') {
+      out = out.replace(/<\/style/gi, '<\\/style');
+    }
+    // Final safety net: if normalization STILL detects danger, blank it out
+    // rather than emit something that could execute.
+    if (cssHasDanger(normalizeCssForScan(out))) return '';
+    return out;
+  }
+
+  function neutralizeCss(css) {
+    if (!isString(css)) return '';
+    return neutralizeCssValue(css.slice(0, MAX_CSS), 'css');
+  }
+
+  function sanitizeStyleAttr(value) {
+    if (!isString(value)) return '';
+    return neutralizeCssValue(value, 'style');
+  }
+
+  // Normalize a URL value for SAFE_URL testing: strip control chars / tabs /
+  // newlines / NUL that browsers ignore inside a scheme ('java\tscript:').
+  function normalizeUrl(value) {
+    if (!isString(value)) return '';
+    // remove all control chars and whitespace anywhere (defeats java\tscript:,
+    // leading spaces, embedded newlines) for the scheme test
+    return value.replace(/[\x00-\x20\x7f]+/g, '');
+  }
+
+  function isSafeUrl(value) {
+    return SAFE_URL.test(normalizeUrl(value));
+  }
+
+  // srcset is a comma-separated list of "<url> <descriptor>" candidates; every
+  // candidate URL must be SAFE.
+  function isSafeSrcset(value) {
+    if (!isString(value)) return false;
+    const candidates = value.split(',');
+    for (const cand of candidates) {
+      const url = cand.trim().split(/\s+/)[0];
+      if (!url) continue;
+      if (!isSafeUrl(url)) return false;
+    }
+    return true;
+  }
+
+  // Is this attribute name a URL-bearing one (after normalization)?
+  function isUrlAttr(name) {
+    const n = String(name).toLowerCase();
+    return URL_ATTRS.has(n);
+  }
+
+  // Normalize an attribute name for the on* / namespaced checks: strip NUL and
+  // whitespace that browsers may tolerate around the name.
+  function normalizeAttrName(name) {
+    return String(name).replace(/[\x00-\x20\x7f]+/g, '').toLowerCase();
+  }
+
+  function getDOMParser() {
+    if (typeof DOMParser !== 'undefined') return new DOMParser();
+    throw new Error('Morph: no DOMParser available in this environment');
+  }
+
+  /**
+   * Whitelist-sanitize an HTML fragment. Returns a SAFE html string.
+   * Requires a DOMParser (browser, or jsdom in tests).
+   */
+  function sanitizeHtml(html) {
+    if (!isString(html) || html.trim() === '') return '';
+    if (html.length > MAX_HTML) html = html.slice(0, MAX_HTML);
+    const parser = getDOMParser();
+    const doc = parser.parseFromString('<body>' + html + '</body>', 'text/html');
+    const body = doc.body;
+    sanitizeNode(body, doc);
+    return body.innerHTML;
+  }
+
+  function sanitizeNode(node, doc) {
+    const children = Array.from(node.childNodes);
+    for (const child of children) {
+      if (child.nodeType === 8) { node.removeChild(child); continue; } // comments
+      if (child.nodeType !== 1) continue;                              // keep text
+
+      // Foreign content (SVG / MathML): DROP element AND its whole subtree.
+      // None are in ALLOWED_TAGS, and unwrapping enables <svg><script>/mXSS and
+      // xlink:href=javascript: leakage. namespaceURI is the reliable signal.
+      const ns = child.namespaceURI;
+      if (ns === SVG_NS || ns === MATHML_NS) { node.removeChild(child); continue; }
+
+      const tag = child.tagName.toLowerCase();
+
+      // Drop script-like / parsing-trap elements WITH their subtree (their text
+      // is active or re-activates on reparse). Never unwrap these.
+      if (DROP_SUBTREE_TAGS.has(tag)) { node.removeChild(child); continue; }
+
+      // <template>: its real children live in a separate .content DocumentFragment
+      // (off the childNodes tree). Sanitize that fragment, lift the surviving
+      // children up into the document, then drop the (disallowed) <template>.
+      if (tag === 'template' && child.content) {
+        sanitizeNode(child.content, doc);
+        while (child.content.firstChild) node.insertBefore(child.content.firstChild, child);
+        // also handle any (rare) light-DOM children
+        sanitizeNode(child, doc);
+        while (child.firstChild) node.insertBefore(child.firstChild, child);
+        node.removeChild(child);
+        continue;
+      }
+
+      if (!ALLOWED_TAGS.has(tag)) {
+        // unwrap: keep sanitized children, drop the disallowed element itself.
+        sanitizeNode(child, doc);
+        const moved = [];
+        while (child.firstChild) {
+          const m = child.firstChild;
+          node.insertBefore(m, child);
+          moved.push(m);
+        }
+        node.removeChild(child);
+        // Re-run sanitizeNode on the moved children in their new home so any
+        // foreign/disallowed node that only became reachable after the unwrap is
+        // re-evaluated (defense against reparenting-based mXSS).
+        for (const m of moved) {
+          if (m.nodeType === 1) {
+            const mns = m.namespaceURI;
+            if (mns === SVG_NS || mns === MATHML_NS) { node.removeChild(m); continue; }
+            const mtag = m.tagName.toLowerCase();
+            if (DROP_SUBTREE_TAGS.has(mtag)) { node.removeChild(m); continue; }
+            if (!ALLOWED_TAGS.has(mtag)) {
+              sanitizeNode(m, doc);
+              while (m.firstChild) node.insertBefore(m.firstChild, m);
+              node.removeChild(m);
+            }
+          }
+        }
+        continue;
+      }
+      // scrub attributes
+      for (const attr of Array.from(child.attributes)) {
+        const rawName = attr.name;
+        const name = rawName.toLowerCase();
+        // strip ALL namespaced attrs (xlink:href, xml:*, etc.) — they are never
+        // whitelisted and carry foreign-content URL/script vectors.
+        if (name.indexOf(':') !== -1) { child.removeAttribute(rawName); continue; }
+        // normalize for on* detection: remove NUL/whitespace browsers may tolerate
+        const normName = normalizeAttrName(rawName);
+        if (normName.startsWith('on') || !ALLOWED_ATTRS.has(name)) {
+          child.removeAttribute(rawName);
+          continue;
+        }
+        if (name === 'href' || name === 'src') {
+          if (!isSafeUrl(attr.value)) { child.removeAttribute(rawName); continue; }
+        }
+        if (name === 'srcset') {
+          // not currently whitelisted, but if it ever is, guard every candidate.
+          if (!isSafeSrcset(attr.value)) { child.removeAttribute(rawName); continue; }
+        }
+        if (name === 'style') {
+          child.setAttribute('style', sanitizeStyleAttr(attr.value));
+        }
+        if (name === 'target' && child.getAttribute('target') === '_blank') {
+          child.setAttribute('rel', 'noopener noreferrer');
+        }
+      }
+      sanitizeNode(child, doc);
+    }
+  }
+
+  // ---- validation ----------------------------------------------------------
+
+  /**
+   * Validate + sanitize a raw transform object from the model.
+   * Returns { ok, transform, errors[], skipped[] }.
+   * Invalid ops are DROPPED (not fatal) and reported in `skipped`.
+   * Pure except sanitizeHtml needs a DOMParser; callers in Node tests provide jsdom.
+   */
+  function validateTransform(raw) {
+    const errors = [];
+    const skipped = [];
+
+    if (!raw || typeof raw !== 'object') {
+      return { ok: false, transform: null, errors: ['transform is not an object'], skipped };
+    }
+    if (!Array.isArray(raw.ops)) {
+      return { ok: false, transform: null, errors: ['transform.ops must be an array'], skipped };
+    }
+
+    const cleanOps = [];
+    raw.ops.forEach((op, i) => {
+      const reason = opError(op);
+      if (reason) { skipped.push({ index: i, op: op && op.op, reason }); return; }
+      cleanOps.push(sanitizeOp(op));
+    });
+
+    const transform = {
+      version: SCHEMA_VERSION,
+      explanation: isString(raw.explanation) ? raw.explanation.slice(0, MAX_EXPLANATION) : '',
+      ops: cleanOps,
+    };
+    return { ok: cleanOps.length > 0, transform, errors, skipped };
+  }
+
+  function opError(op) {
+    if (!op || typeof op !== 'object') return 'op is not an object';
+    const spec = OP_SPECS[op.op];
+    if (!spec) return 'unknown op: ' + op.op;
+    for (const f of spec.fields) {
+      if (!isString(op[f])) return `missing/invalid field "${f}"`;
+    }
+    if (op.op === 'move' || op.op === 'addElement') {
+      if (!POSITIONS.includes(op.position)) return 'invalid position';
+    }
+    if (spec.object && (typeof op[spec.object] !== 'object' || op[spec.object] === null)) {
+      return `missing/invalid object "${spec.object}"`;
+    }
+    // Fail-fast guard for obviously malformed/oversized selectors. Does NOT
+    // reject valid CSS selectors used elsewhere ('.promoted', '#content',
+    // 'article.post', '*'); only catches non-string / absurdly long values.
+    if (spec.fields.includes('selector') && !isValidSelectorShape(op.selector)) {
+      return 'invalid selector';
+    }
+    if (op.op === 'move' && !isValidSelectorShape(op.target)) {
+      return 'invalid target selector';
+    }
+    // setAttr: reject event-handler attribute NAMES and enforce the SAME
+    // attribute whitelist that sanitizeHtml uses, so an attr that would be
+    // stripped inside addElement HTML (srcdoc, formaction, action, ...) cannot
+    // be smuggled in via setAttr onto live elements.
+    if (op.op === 'setAttr') {
+      const n = normalizeAttrName(op.name);
+      if (n.startsWith('on')) return 'event-handler attr blocked';
+      if (!ALLOWED_ATTRS.has(n)) return 'attr not allowed: ' + n;
+    }
+    // renderData: chart type + position must be from the fixed sets. The op has
+    // two forms; either way the actual numbers come from caller-attached data at
+    // apply time, never the model.
+    //  - source form (SDK): names a vendor-registered source + a query DESCRIPTION;
+    //    trusted code resolves rows out-of-band.
+    //  - legacy form: dataKey/x/y field mappings over caller-attached records.
+    if (op.op === 'renderData') {
+      if (!POSITIONS.includes(op.position)) return 'invalid position';
+      if (op.chart !== 'bar' && op.chart !== 'line' && op.chart !== 'stat') return 'invalid chart type';
+      if (op.source !== undefined) {
+        if (!isString(op.source) || !op.source) return 'invalid source';
+        if (!op.query || typeof op.query !== 'object' || Array.isArray(op.query)) return 'invalid query';
+      } else {
+        for (const f of ['dataKey', 'x', 'y']) {
+          if (!isString(op[f])) return `missing/invalid field "${f}"`;
+        }
+      }
+    }
+    return null;
+  }
+
+  // Lightweight selector sanity check. We deliberately accept anything that is a
+  // reasonably-sized string and reject only clearly-bogus inputs (empty, huge,
+  // or containing characters that can never appear in a CSS selector). The
+  // authoritative validity check still happens at apply time via
+  // querySelectorAll (which throws -> caught per-op), so this never changes the
+  // "bad selector fails that op only" contract — it just fails such ops earlier.
+  function isValidSelectorShape(sel) {
+    if (!isString(sel)) return false;
+    if (sel.length === 0 || sel.length > MAX_SELECTOR) return false;
+    // NOTE: we intentionally do NOT reject angle brackets or other syntactically
+    // invalid selectors here. The existing contract ("bad selector fails that op
+    // only") requires a malformed selector like '<<<invalid>>>' to PASS validate
+    // and FAIL at apply time via querySelectorAll's throw. We only fail fast on
+    // non-string / empty / absurdly long values, which can never be valid.
+    return true;
+  }
+
+  // Bound + type-check a self-healing anchors descriptor from a (semi-trusted,
+  // locally-stored) recipe. Drops unknown fields and caps sizes.
+  function sanitizeAnchors(arr) {
+    const out = [];
+    for (const a of arr.slice(0, 10)) {
+      if (!a || typeof a !== 'object') continue;
+      const s = {};
+      if (typeof a.tag === 'string') s.tag = a.tag.slice(0, 40).toLowerCase();
+      if (typeof a.id === 'string') s.id = a.id.slice(0, 200);
+      if (typeof a.role === 'string') s.role = a.role.slice(0, 80);
+      if (typeof a.aria === 'string') s.aria = a.aria.slice(0, 200);
+      if (typeof a.text === 'string') s.text = a.text.slice(0, 120);
+      if (Array.isArray(a.classes)) s.classes = a.classes.filter((c) => typeof c === 'string').slice(0, 8).map((c) => c.slice(0, 80));
+      if (typeof a.nthOfType === 'number' && isFinite(a.nthOfType)) s.nthOfType = a.nthOfType;
+      out.push(s);
+    }
+    return out;
+  }
+
+  // Bound a model-supplied query DESCRIPTION (renderData source form). Whitelist
+  // keys only; the SDK's registry + query engine do the semantic (schema)
+  // validation — this just guarantees the op stays small, inert JSON with no
+  // surprise keys.
+  const QUERY_KEYS = ['filter', 'dateField', 'since', 'until', 'groupBy', 'aggregate', 'limit'];
+  function sanitizeQuery(q) {
+    const out = {};
+    for (const k of QUERY_KEYS) {
+      const v = q[k];
+      if (v === undefined) continue;
+      if (k === 'filter' && v && typeof v === 'object' && !Array.isArray(v)) {
+        const f = {};
+        for (const fk of Object.keys(v).slice(0, 10)) {
+          const fv = v[fk];
+          if (isString(fv) || typeof fv === 'number') {
+            f[String(fk).slice(0, 80)] = isString(fv) ? fv.slice(0, 200) : fv;
+          } else if (Array.isArray(fv)) {
+            f[String(fk).slice(0, 80)] = fv.slice(0, 20)
+              .filter((x) => isString(x) || typeof x === 'number')
+              .map((x) => (isString(x) ? x.slice(0, 200) : x));
+          }
+        }
+        out.filter = f;
+      } else if (k === 'aggregate' && v && typeof v === 'object' && !Array.isArray(v)) {
+        const a = {};
+        if (isString(v.fn)) a.fn = v.fn.slice(0, 20);
+        if (isString(v.field)) a.field = v.field.slice(0, 80);
+        out.aggregate = a;
+      } else if (k === 'limit') {
+        if (typeof v === 'number' && isFinite(v)) out.limit = v;
+      } else if (isString(v)) {
+        out[k] = v.slice(0, 80);
+      }
+    }
+    return out;
+  }
+
+  function sanitizeOp(op) {
+    const out = { op: op.op };
+    const spec = OP_SPECS[op.op];
+    for (const f of spec.fields) out[f] = op[f];
+    if (op.op === 'injectCSS') out.css = neutralizeCss(op.css);
+    if (op.op === 'addElement') {
+      out.html = sanitizeHtml(String(op.html).slice(0, MAX_HTML));
+      // Optional action binding (SDK): bounded inert data. Trusted code decides
+      // at apply time whether anything listens (opts.onAction) — never the model.
+      if (isString(op.action) && op.action) {
+        out.action = op.action.slice(0, 80);
+        const args = {};
+        if (op.args && typeof op.args === 'object' && !Array.isArray(op.args)) {
+          for (const k of Object.keys(op.args).slice(0, 20)) {
+            const v = op.args[k];
+            if (isString(v)) args[String(k).slice(0, 80)] = v.slice(0, 500);
+            else if (typeof v === 'number' && isFinite(v)) args[String(k).slice(0, 80)] = v;
+          }
+        }
+        out.args = args;
+      }
+    }
+    if (op.op === 'setStyle') {
+      const style = {};
+      for (const k of Object.keys(op.style)) {
+        if (isString(op.style[k]) || typeof op.style[k] === 'number') {
+          style[k] = sanitizeStyleAttr(String(op.style[k]));
+        }
+      }
+      out.style = style;
+    }
+    if (op.op === 'setText') out.text = String(op.text).slice(0, MAX_TEXT);
+    if (op.op === 'renderData') {
+      out.title = isString(op.title) ? op.title.slice(0, MAX_LABEL) : '';
+      if (op.source !== undefined) {
+        out.source = String(op.source).slice(0, 80);
+        out.query = sanitizeQuery(op.query);
+      } else {
+        // Legacy form: dataKey/x/y are no longer in spec.fields (they're only
+        // required for THIS form), so copy them explicitly.
+        out.dataKey = op.dataKey; out.x = op.x; out.y = op.y;
+      }
+    }
+    if (op.op === 'setAttr') {
+      // Name is already whitelisted in opError. Sanitize the VALUE for
+      // URL-bearing attributes and for the style attribute (apply-side never
+      // checks values), matching how sanitizeHtml treats the same attributes.
+      if (isUrlAttr(out.name)) {
+        const ok = out.name.toLowerCase() === 'srcset' ? isSafeSrcset(out.value) : isSafeUrl(out.value);
+        if (!ok) out.value = '';
+      }
+      if (normalizeAttrName(out.name) === 'style') out.value = sanitizeStyleAttr(String(out.value));
+    }
+    // Preserve a self-healing descriptor if the (saved) op carries one.
+    if (Array.isArray(op.anchors)) out.anchors = sanitizeAnchors(op.anchors);
+    return out;
+  }
+
+  // ---- application (needs a DOM) -------------------------------------------
+
+  const STYLE_GROUP_ATTR = 'data-morph-style';
+
+  /**
+   * Apply a (validated) transform to `doc`. Returns a handle:
+   *   { undos: [fn...], applied: n, failed: n, errors: [...] }
+   * Each op is wrapped in try/catch so one bad op never aborts the rest.
+   */
+  function applyTransform(transform, doc, opts) {
+    doc = doc || (typeof document !== 'undefined' ? document : null);
+    if (!doc) throw new Error('Morph: applyTransform needs a document');
+    const groupId = (opts && opts.groupId) || 'morph';
+    const data = (opts && opts.data) || {};
+    const undos = [];
+    let applied = 0, failed = 0;
+    const errors = [];
+
+    const onAction = (opts && typeof opts.onAction === 'function') ? opts.onAction : null;
+
+    for (const op of transform.ops) {
+      try {
+        const undo = applyOp(op, doc, groupId, data, onAction);
+        // null == the op matched nothing (e.g. a selector whose targets haven't
+        // rendered yet): a MISS, not an applied op and not a failure. This keeps
+        // `applied` honest so callers don't set a phantom "it's applied" sentinel.
+        if (undo === null) continue;
+        if (undo) undos.push(undo);
+        applied++;
+      } catch (e) {
+        failed++;
+        errors.push({ op: op.op, message: String(e && e.message || e) });
+      }
+    }
+    return { undos, applied, failed, errors };
+  }
+
+  function undoTransform(handle) {
+    if (!handle || !Array.isArray(handle.undos)) return;
+    // reverse order so structural moves unwind cleanly
+    for (let i = handle.undos.length - 1; i >= 0; i--) {
+      try { handle.undos[i](); } catch (_) { /* best effort */ }
+    }
+    handle.undos.length = 0;
+  }
+
+  function selectAll(doc, selector) {
+    // throws on invalid selector -> caught by applyTransform
+    return Array.from(doc.querySelectorAll(selector));
+  }
+
+  // Element resolution for applyOp. An op carrying an `anchors` descriptor uses
+  // the self-healing resolver (survives selector rot). An op WITHOUT anchors keeps
+  // the exact legacy behavior: selectAll throws on an invalid selector so that op
+  // fails (the "bad selector fails that op only" contract) — nothing changes.
+  function resolveEls(doc, op) {
+    if (Array.isArray(op.anchors) && op.anchors.length) return resolveSelector(doc, op).els;
+    return selectAll(doc, op.selector);
+  }
+
+  function applyOp(op, doc, groupId, data, onAction) {
+    switch (op.op) {
+      case 'injectCSS': {
+        const style = doc.createElement('style');
+        style.setAttribute(STYLE_GROUP_ATTR, groupId);
+        style.textContent = op.css; // textContent: no breakout
+        (doc.head || doc.documentElement).appendChild(style);
+        return () => style.remove();
+      }
+      case 'hide':
+      case 'show': {
+        const val = op.op === 'hide' ? 'none' : '';
+        const els = resolveEls(doc, op);
+        if (!els.length) return null; // matched nothing — a miss, not an applied op
+        const prev = els.map((el) => el.style.display);
+        els.forEach((el) => {
+          if (op.op === 'show' && val === '') el.style.removeProperty('display');
+          else el.style.setProperty('display', val, 'important');
+        });
+        return () => els.forEach((el, i) => { el.style.display = prev[i]; });
+      }
+      case 'remove': {
+        const els = resolveEls(doc, op);
+        if (!els.length) return null; // nothing to remove yet — a miss, not applied
+        const markers = els.map((el) => {
+          const marker = doc.createComment('morph-removed');
+          el.parentNode && el.parentNode.replaceChild(marker, el);
+          return { el, marker };
+        });
+        return () => markers.forEach(({ el, marker }) => {
+          marker.parentNode && marker.parentNode.replaceChild(el, marker);
+        });
+      }
+      case 'setStyle': {
+        const els = resolveEls(doc, op);
+        if (!els.length) return null;
+        const keys = Object.keys(op.style);
+        const prev = els.map((el) => keys.map((k) => el.style.getPropertyValue(k)));
+        els.forEach((el) => keys.forEach((k) => el.style.setProperty(k, op.style[k], 'important')));
+        return () => els.forEach((el, i) => keys.forEach((k, j) => {
+          if (prev[i][j]) el.style.setProperty(k, prev[i][j]); else el.style.removeProperty(k);
+        }));
+      }
+      case 'setText': {
+        // Refuse to write into active-content / reparse-trap elements: setting the
+        // textContent of a live <style> IS the stylesheet (arbitrary CSS injection
+        // that bypasses neutralizeCss), and <script>/<title>/<textarea> are mXSS
+        // reparse traps. These are never legitimate setText targets. Skip them;
+        // apply to the safe elements only.
+        const els = resolveEls(doc, op)
+          .filter((el) => !DROP_SUBTREE_TAGS.has(el.tagName.toLowerCase()));
+        if (!els.length) return null;
+        const prev = els.map((el) => el.textContent);
+        els.forEach((el) => { el.textContent = op.text; });
+        return () => els.forEach((el, i) => { el.textContent = prev[i]; });
+      }
+      case 'setAttr': {
+        const els = resolveEls(doc, op);
+        if (op.name.toLowerCase().startsWith('on')) throw new Error('event-handler attr blocked');
+        if (!els.length) return null;
+        const prev = els.map((el) => (el.hasAttribute(op.name) ? el.getAttribute(op.name) : null));
+        els.forEach((el) => el.setAttribute(op.name, op.value));
+        return () => els.forEach((el, i) => {
+          if (prev[i] === null) el.removeAttribute(op.name); else el.setAttribute(op.name, prev[i]);
+        });
+      }
+      case 'addClass':
+      case 'removeClass': {
+        const els = resolveEls(doc, op);
+        if (!els.length) return null;
+        const had = els.map((el) => el.classList.contains(op.class));
+        els.forEach((el) => el.classList[op.op === 'addClass' ? 'add' : 'remove'](op.class));
+        return () => els.forEach((el, i) => {
+          if (op.op === 'addClass' && !had[i]) el.classList.remove(op.class);
+          if (op.op === 'removeClass' && had[i]) el.classList.add(op.class);
+        });
+      }
+      case 'move': {
+        const els = resolveEls(doc, op);
+        const target = doc.querySelector(op.target);
+        if (!target) throw new Error('move target not found: ' + op.target);
+        const origins = els.map((el) => ({ el, parent: el.parentNode, next: el.nextSibling }));
+        els.forEach((el) => insertRelative(el, target, op.position));
+        return () => origins.forEach(({ el, parent, next }) => {
+          if (parent) parent.insertBefore(el, next);
+        });
+      }
+      case 'addElement': {
+        const target = doc.querySelector(op.target);
+        if (!target) throw new Error('addElement target not found: ' + op.target);
+        const tpl = doc.createElement('template');
+        tpl.innerHTML = op.html; // already sanitized
+        const nodes = Array.from(tpl.content ? tpl.content.childNodes : tpl.childNodes);
+        const wrapper = doc.createElement('div');
+        wrapper.setAttribute('data-morph-added', groupId);
+        nodes.forEach((n) => wrapper.appendChild(n));
+        insertRelative(wrapper, target, op.position);
+        // Action binding: only when the CALLER provided an invoker (the SDK).
+        // The model only NAMED the action; a real user click is the sole trigger.
+        if (op.action && onAction) {
+          wrapper.querySelectorAll('button').forEach((btn) => {
+            btn.addEventListener('click', () => onAction(op.action, op.args || {}));
+          });
+        }
+        return () => wrapper.remove();
+      }
+      case 'renderData': {
+        const target = doc.querySelector(op.target);
+        if (!target) throw new Error('renderData target not found: ' + op.target);
+        const svg = buildChart(doc, op, data);   // built by US from attached data
+        const wrapper = doc.createElement('div');
+        wrapper.setAttribute('data-morph-added', groupId);
+        wrapper.appendChild(svg);
+        insertRelative(wrapper, target, op.position);
+        return () => wrapper.remove();
+      }
+      default:
+        throw new Error('unhandled op: ' + op.op);
+    }
+  }
+
+  function insertRelative(node, target, position) {
+    switch (position) {
+      case 'before': target.parentNode.insertBefore(node, target); break;
+      case 'after': target.parentNode.insertBefore(node, target.nextSibling); break;
+      case 'prepend': target.insertBefore(node, target.firstChild); break;
+      case 'append': target.appendChild(node); break;
+    }
+  }
+
+  // ---- trusted chart rendering (renderData) --------------------------------
+  // Built entirely by US from typed records the CALLER attached (opts.data).
+  // The model supplies only the chart type and field names; every value is
+  // coerced through Number() before it touches a numeric attribute, and every
+  // label/title is set via textContent. No model- or data-supplied string is
+  // ever parsed as markup (createElementNS only, never innerHTML).
+  function svgEl(doc, name, attrs) {
+    const el = doc.createElementNS(SVG_NS, name);
+    for (const k of Object.keys(attrs)) el.setAttribute(k, String(attrs[k]));
+    return el;
+  }
+
+  function coerceNum(v) { const n = Number(v); return Number.isFinite(n) ? n : 0; }
+
+  function formatStat(n) {
+    if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
+    if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(1).replace(/\.0$/, '') + 'k';
+    return Number.isInteger(n) ? String(n) : n.toFixed(2);
+  }
+
+  function buildChart(doc, op, data) {
+    let points;
+    if (op.source !== undefined) {
+      // Source form: rows were resolved by TRUSTED code (registry + query
+      // engine) and attached as data[source] = [{label, value}].
+      const rows = (data && typeof data === 'object' && Array.isArray(data[op.source]))
+        ? data[op.source].slice(0, MAX_CHART_POINTS) : null;
+      if (!rows || rows.length === 0) throw new Error('renderData: no rows for source ' + op.source);
+      points = rows.map((r) => ({
+        label: String(r && r.label != null ? r.label : '').slice(0, 40),
+        value: coerceNum(r && r.value),
+      }));
+    } else {
+      const ds = (data && typeof data === 'object') ? data[op.dataKey] : null;
+      const records = (ds && Array.isArray(ds.records)) ? ds.records.slice(0, MAX_CHART_POINTS) : null;
+      if (!records || records.length === 0) throw new Error('renderData: no records for ' + op.dataKey);
+      points = records.map((r) => ({
+        label: String((r && r[op.x] != null) ? r[op.x] : '').slice(0, 40),
+        value: coerceNum(r && r[op.y]),
+      }));
+    }
+    if (op.chart === 'stat') {
+      // Single big number + caption. Text nodes only — same contract as charts.
+      const stat = svgEl(doc, 'svg', {
+        width: 280, height: 120, viewBox: '0 0 280 120',
+        'data-morph-chart': 'stat', 'font-family': 'sans-serif',
+      });
+      const val = svgEl(doc, 'text', { x: 20, y: 64, 'font-size': 40, 'font-weight': 'bold', fill: 'currentColor' });
+      val.textContent = formatStat(points[0].value); // text only — never markup
+      stat.appendChild(val);
+      const cap = svgEl(doc, 'text', { x: 20, y: 96, 'font-size': 13, fill: 'currentColor', opacity: '0.7' });
+      cap.textContent = op.title || points[0].label;  // text only — never markup
+      stat.appendChild(cap);
+      return stat;
+    }
+    const maxV = Math.max(1, ...points.map((p) => p.value));
+    const n = points.length;
+    const innerW = CHART_W - 2 * CHART_PAD;
+    const top = op.title ? 34 : 12;
+    const bottom = CHART_H - CHART_PAD;
+    const plotH = bottom - top;
+
+    const svg = svgEl(doc, 'svg', {
+      width: CHART_W, height: CHART_H, viewBox: '0 0 ' + CHART_W + ' ' + CHART_H,
+      'data-morph-chart': op.chart, 'font-family': 'sans-serif',
+    });
+    if (op.title) {
+      const t = svgEl(doc, 'text', { x: CHART_PAD, y: 22, 'font-size': 16, fill: 'currentColor' });
+      t.textContent = op.title;                 // text only — never markup
+      svg.appendChild(t);
+    }
+
+    if (op.chart === 'line') {
+      const step = n > 1 ? innerW / (n - 1) : 0;
+      const coords = points.map((p, i) =>
+        (CHART_PAD + i * step).toFixed(1) + ',' + (bottom - (p.value / maxV) * plotH).toFixed(1)
+      ).join(' ');
+      svg.appendChild(svgEl(doc, 'polyline', { points: coords, fill: 'none', stroke: 'currentColor', 'stroke-width': 2 }));
+    } else {
+      const bw = innerW / n;
+      points.forEach((p, i) => {
+        const h = (p.value / maxV) * plotH;
+        svg.appendChild(svgEl(doc, 'rect', {
+          x: (CHART_PAD + i * bw + bw * 0.1).toFixed(1), y: (bottom - h).toFixed(1),
+          width: (bw * 0.8).toFixed(1), height: h.toFixed(1), fill: 'currentColor',
+        }));
+      });
+    }
+
+    // x-axis labels (text only)
+    points.forEach((p, i) => {
+      const x = op.chart === 'line'
+        ? CHART_PAD + (n > 1 ? innerW / (n - 1) : 0) * i
+        : CHART_PAD + (innerW / n) * i + (innerW / n) / 2;
+      const lab = svgEl(doc, 'text', { x: x.toFixed(1), y: CHART_H - 14, 'font-size': 10, fill: 'currentColor', 'text-anchor': 'middle' });
+      lab.textContent = p.label;                // text only — never markup
+      svg.appendChild(lab);
+    });
+    return svg;
+  }
+
+  // ---- reconcile: idempotent re-assertion (survive SPA re-renders) ---------
+  // Re-applies each element-targeting op ONLY to matching nodes that don't yet
+  // carry that op's marker (the freshly-rendered ones), and re-adds a removed
+  // injectCSS <style>. Safe to call repeatedly. Returns { reapplied, undos };
+  // reapplied counts ops that touched >=1 new node (0 == stable — drives a hard
+  // cap in the caller so a constantly-mutating page can't spin the CPU).
+  const RECON_ATTR = 'data-morph-r';        // space-separated op tokens on touched els
+  const RECON_CSS_ATTR = 'data-morph-rcss'; // marks an injected style tag (value = token)
+
+  function reconHas(el, token) {
+    return (el.getAttribute(RECON_ATTR) || '').split(/\s+/).indexOf(token) !== -1;
+  }
+  function reconAdd(el, token) {
+    const v = el.getAttribute(RECON_ATTR) || '';
+    el.setAttribute(RECON_ATTR, v ? v + ' ' + token : token);
+  }
+  function reconDel(el, token) {
+    const v = (el.getAttribute(RECON_ATTR) || '').split(/\s+/).filter((t) => t && t !== token);
+    if (v.length) el.setAttribute(RECON_ATTR, v.join(' ')); else el.removeAttribute(RECON_ATTR);
+  }
+  function unmarked(doc, selector, token) {
+    return selectAll(doc, selector).filter((el) => !reconHas(el, token));
+  }
+
+  function reconcile(transform, doc, opts) {
+    doc = doc || (typeof document !== 'undefined' ? document : null);
+    if (!doc) throw new Error('Morph: reconcile needs a document');
+    if (!transform || !Array.isArray(transform.ops)) return { reapplied: 0, undos: [] };
+    const groupId = (opts && opts.groupId) || 'morph';
+    const undos = [];
+    let reapplied = 0;
+    transform.ops.forEach((op, i) => {
+      try {
+        const r = reassertOp(op, doc, groupId, i);
+        if (r && r.touched > 0) { reapplied++; if (r.undo) undos.push(r.undo); }
+      } catch (_) { /* per-op safety — never break the page */ }
+    });
+    return { reapplied, undos };
+  }
+
+  function reassertOp(op, doc, groupId, idx) {
+    const token = groupId + ':' + idx;
+    switch (op.op) {
+      case 'injectCSS': {
+        if (doc.querySelector('style[' + RECON_CSS_ATTR + '="' + token + '"]')) return { touched: 0 };
+        const style = doc.createElement('style');
+        style.setAttribute(RECON_CSS_ATTR, token);
+        style.setAttribute(STYLE_GROUP_ATTR, groupId);
+        style.textContent = op.css; // textContent: no breakout
+        (doc.head || doc.documentElement).appendChild(style);
+        return { touched: 1, undo: () => style.remove() };
+      }
+      case 'hide':
+      case 'show': {
+        const els = unmarked(doc, op.selector, token);
+        if (!els.length) return { touched: 0 };
+        const val = op.op === 'hide' ? 'none' : '';
+        const prev = els.map((el) => el.style.display);
+        els.forEach((el) => {
+          if (op.op === 'show' && val === '') el.style.removeProperty('display');
+          else el.style.setProperty('display', val, 'important');
+          reconAdd(el, token);
+        });
+        return { touched: els.length, undo: () => els.forEach((el, i) => { el.style.display = prev[i]; reconDel(el, token); }) };
+      }
+      case 'setStyle': {
+        const els = unmarked(doc, op.selector, token);
+        if (!els.length) return { touched: 0 };
+        const keys = Object.keys(op.style);
+        const prev = els.map((el) => keys.map((k) => el.style.getPropertyValue(k)));
+        els.forEach((el) => { keys.forEach((k) => el.style.setProperty(k, op.style[k], 'important')); reconAdd(el, token); });
+        return {
+          touched: els.length,
+          undo: () => els.forEach((el, i) => { keys.forEach((k, j) => { if (prev[i][j]) el.style.setProperty(k, prev[i][j]); else el.style.removeProperty(k); }); reconDel(el, token); }),
+        };
+      }
+      case 'setText': {
+        const els = unmarked(doc, op.selector, token).filter((el) => !DROP_SUBTREE_TAGS.has(el.tagName.toLowerCase()));
+        if (!els.length) return { touched: 0 };
+        const prev = els.map((el) => el.textContent);
+        els.forEach((el) => { el.textContent = op.text; reconAdd(el, token); });
+        return { touched: els.length, undo: () => els.forEach((el, i) => { el.textContent = prev[i]; reconDel(el, token); }) };
+      }
+      case 'setAttr': {
+        if (op.name.toLowerCase().startsWith('on')) return { touched: 0 };
+        const els = unmarked(doc, op.selector, token);
+        if (!els.length) return { touched: 0 };
+        const prev = els.map((el) => (el.hasAttribute(op.name) ? el.getAttribute(op.name) : null));
+        els.forEach((el) => { el.setAttribute(op.name, op.value); reconAdd(el, token); });
+        return { touched: els.length, undo: () => els.forEach((el, i) => { if (prev[i] === null) el.removeAttribute(op.name); else el.setAttribute(op.name, prev[i]); reconDel(el, token); }) };
+      }
+      case 'addClass':
+      case 'removeClass': {
+        const els = unmarked(doc, op.selector, token);
+        if (!els.length) return { touched: 0 };
+        const had = els.map((el) => el.classList.contains(op.class));
+        els.forEach((el) => { el.classList[op.op === 'addClass' ? 'add' : 'remove'](op.class); reconAdd(el, token); });
+        return {
+          touched: els.length,
+          undo: () => els.forEach((el, i) => { if (op.op === 'addClass' && !had[i]) el.classList.remove(op.class); if (op.op === 'removeClass' && had[i]) el.classList.add(op.class); reconDel(el, token); }),
+        };
+      }
+      case 'remove': {
+        // Re-remove LIVE matches the page re-rendered / hydrated / lazy-loaded
+        // after we first removed them — the dominant revert-on-refresh case on
+        // SPA pages. Removal deletes the node (no per-node marker is possible),
+        // so re-query each tick and remove whatever currently matches.
+        const els = selectAll(doc, op.selector);
+        if (!els.length) return { touched: 0 };
+        const removed = els.map((el) => ({ el, parent: el.parentNode, next: el.nextSibling }));
+        els.forEach((el) => { if (el.parentNode) el.parentNode.removeChild(el); });
+        return {
+          touched: els.length,
+          undo: () => removed.forEach(({ el, parent, next }) => { try { if (parent) parent.insertBefore(el, next); } catch (_) { /* node moved */ } }),
+        };
+      }
+      // Other structural ops (move / addElement / renderData) add wrappers that
+      // survive most partial re-renders; full re-add support is a follow-up.
+      default:
+        return { touched: 0 };
+    }
+  }
+
+  // ---- self-healing selectors (the moat) -----------------------------------
+  // A recipe can store a multi-signal descriptor per targeted element. When the
+  // literal selector stops matching (class-hash rotation / redeploy),
+  // resolveSelector finds the best current match via a scoring cascade and
+  // rebinds ONLY above a confidence threshold — never silently onto the wrong
+  // element (a wrong rebind is worse than going stale).
+  const HEAL_THRESHOLD = 0.5;
+  const HEAL_MAX_CANDIDATES = 3000;
+
+  function normText(t) { return String(t == null ? '' : t).replace(/\s+/g, ' ').trim().toLowerCase(); }
+
+  function nthOfType(el) {
+    const parent = el.parentNode;
+    if (!parent || !parent.children) return 0;
+    const tag = el.tagName;
+    let i = 0;
+    for (const sib of parent.children) { if (sib.tagName === tag) { i++; if (sib === el) return i; } }
+    return 0;
+  }
+
+  // Capture a resilient descriptor of `el` (called at recipe-save time).
+  function captureAnchor(el) {
+    if (!el || el.nodeType !== 1) return null;
+    const a = { tag: el.tagName.toLowerCase() };
+    if (el.id) a.id = el.id;
+    const role = el.getAttribute && el.getAttribute('role');
+    if (role) a.role = role;
+    const aria = el.getAttribute && el.getAttribute('aria-label');
+    if (aria) a.aria = aria;
+    const text = normText(el.textContent).slice(0, 80);
+    if (text) a.text = text;
+    a.classes = (el.classList ? Array.from(el.classList) : []).slice(0, 6);
+    a.nthOfType = nthOfType(el);
+    return a;
+  }
+
+  // Score 0..1: how well `el` matches `anchor`. Only weighs signals the anchor has.
+  function scoreAnchor(el, anchor) {
+    const W = { tag: 1, id: 4, role: 3, aria: 3, text: 5, cls: 2 };
+    let score = 0, max = 0;
+    max += W.tag; if (anchor.tag && el.tagName.toLowerCase() === anchor.tag) score += W.tag;
+    if (anchor.id) { max += W.id; if (el.id === anchor.id) score += W.id; }
+    if (anchor.role) { max += W.role; if ((el.getAttribute && el.getAttribute('role')) === anchor.role) score += W.role; }
+    if (anchor.aria) { max += W.aria; if ((el.getAttribute && el.getAttribute('aria-label')) === anchor.aria) score += W.aria; }
+    if (anchor.text) {
+      max += W.text;
+      const ct = normText(el.textContent).slice(0, 200);
+      if (ct === anchor.text) score += W.text;
+      else if (ct && ct.indexOf(anchor.text) !== -1) score += W.text * 0.5;
+    }
+    if (anchor.classes && anchor.classes.length) {
+      max += W.cls;
+      const have = anchor.classes.filter((c) => el.classList && el.classList.contains(c)).length;
+      score += W.cls * (have / anchor.classes.length);
+    }
+    return max > 0 ? score / max : 0;
+  }
+
+  function findByAnchor(doc, anchor) {
+    if (!anchor || typeof anchor !== 'object') return null;
+    let candidates;
+    try { candidates = Array.from(doc.querySelectorAll(anchor.tag || '*')); }
+    catch (_) { try { candidates = Array.from(doc.querySelectorAll('*')); } catch (_e) { return null; } }
+    if (candidates.length > HEAL_MAX_CANDIDATES) candidates = candidates.slice(0, HEAL_MAX_CANDIDATES);
+    let best = null, bestScore = 0;
+    for (const el of candidates) {
+      const s = scoreAnchor(el, anchor);
+      if (s > bestScore) { bestScore = s; best = el; }
+    }
+    return bestScore >= HEAL_THRESHOLD ? best : null;
+  }
+
+  // Resolve op.selector to elements. Literal first; if nothing matches, heal via
+  // op.anchors. Returns { els, healed }. Never throws.
+  function resolveSelector(doc, op) {
+    let els = [];
+    try { els = Array.from(doc.querySelectorAll(op.selector)); } catch (_) { els = []; }
+    if (els.length) return { els, healed: false };
+    const anchors = Array.isArray(op.anchors) ? op.anchors : null;
+    if (!anchors || !anchors.length) return { els: [], healed: false };
+    const seen = new Set();
+    const healed = [];
+    for (const anchor of anchors) {
+      const el = findByAnchor(doc, anchor);
+      if (el && !seen.has(el)) { seen.add(el); healed.push(el); }
+    }
+    return { els: healed, healed: healed.length > 0 };
+  }
+
+  // Enrich a transform's selector-bearing ops with anchors captured from `doc`
+  // (called at recipe-save time). Ops without a selector, with no current match,
+  // or that already carry anchors are left untouched. Returns a new transform.
+  function withAnchors(transform, doc) {
+    if (!transform || !Array.isArray(transform.ops) || !doc) return transform;
+    const ops = transform.ops.map((op) => {
+      if (!op || typeof op.selector !== 'string' || Array.isArray(op.anchors)) return op;
+      let matches = [];
+      try { matches = Array.from(doc.querySelectorAll(op.selector)).slice(0, 5); } catch (_) { matches = []; }
+      if (!matches.length) return op;
+      const anchors = matches.map((el) => captureAnchor(el)).filter(Boolean);
+      return anchors.length ? Object.assign({}, op, { anchors }) : op;
+    });
+    return Object.assign({}, transform, { ops });
+  }
+
+  // Union the ops of two transforms so a NEW reshape stacks on top of prior ones
+  // instead of replacing them ("remove images" then "remove text" => both gone).
+  // Pure: never mutates either input. Carries the latest transform's metadata.
+  function mergeTransforms(existing, incoming) {
+    const exOps = (existing && Array.isArray(existing.ops)) ? existing.ops : [];
+    const inOps = (incoming && Array.isArray(incoming.ops)) ? incoming.ops : [];
+    const base = (incoming && typeof incoming === 'object') ? incoming : (existing || {});
+    return Object.assign({}, base, { ops: exOps.concat(inOps) });
+  }
+
+  return {
+    SCHEMA_VERSION,
+    OP_SPECS,
+    POSITIONS,
+    validateTransform,
+    sanitizeHtml,
+    neutralizeCss,
+    applyTransform,
+    undoTransform,
+    reconcile,
+    captureAnchor,
+    resolveSelector,
+    withAnchors,
+    mergeTransforms,
+  };
+});
+
+
+/* ---- sdk/src/query.js ---- */
+/*
+ * Morph SDK — trusted query engine.
+ * The model emits a query DESCRIPTION; this module (trusted code) executes it
+ * over records the vendor's own fetch returned, entirely client-side. Unknown
+ * fields are hard errors: a hallucinated field must never yield silent zeros.
+ * UMD: Node module in tests, browser global `MorphQuery` in the SDK bundle.
+ */
+(function (global, factory) {
+  const api = factory();
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  else global.MorphQuery = api;
+})(typeof self !== 'undefined' ? self : this, function () {
+  'use strict';
+
+  const MAX_RECORDS = 10000;
+  const MAX_ROWS = 60;
+  const AGG_FNS = new Set(['sum', 'count', 'avg', 'min', 'max']);
+
+  function parseDuration(s) {
+    if (typeof s !== 'string') return null;
+    const m = /^(\d{1,5})([mhd])$/.exec(s.trim());
+    if (!m) return null;
+    const n = Number(m[1]);
+    return m[2] === 'm' ? n * 60000 : m[2] === 'h' ? n * 3600000 : n * 86400000;
+  }
+
+  function need(field, schema, what) {
+    if (typeof field !== 'string' || !Object.prototype.hasOwnProperty.call(schema, field)) {
+      throw new Error('unknown field: ' + field + (what ? ' (' + what + ')' : ''));
+    }
+  }
+
+  function toTime(v) { const t = Date.parse(v); return Number.isFinite(t) ? t : null; }
+
+  // A bound is either a relative duration ('15d': since = now - d, until = now + d)
+  // or an absolute date string.
+  function bound(query, key, nowMs) {
+    const v = query[key];
+    if (v == null) return null;
+    const dur = parseDuration(v);
+    if (dur != null) return key === 'since' ? nowMs - dur : nowMs + dur;
+    return toTime(v);
+  }
+
+  function runQuery(records, query, schema, nowMs) {
+    if (!Array.isArray(records)) throw new Error('records must be an array');
+    if (!query || typeof query !== 'object') throw new Error('query must be an object');
+    if (!schema || typeof schema !== 'object') throw new Error('schema must be an object');
+    const now = Number.isFinite(nowMs) ? nowMs : Date.now();
+    let rows = records.slice(0, MAX_RECORDS);
+
+    if (query.filter != null) {
+      if (typeof query.filter !== 'object' || Array.isArray(query.filter)) throw new Error('filter must be an object');
+      for (const f of Object.keys(query.filter)) {
+        need(f, schema, 'filter');
+        const want = query.filter[f];
+        const set = Array.isArray(want) ? want.map(String) : [String(want)];
+        rows = rows.filter((r) => r && set.includes(String(r[f])));
+      }
+    }
+
+    if (query.since != null || query.until != null) {
+      need(query.dateField, schema, 'dateField');
+      const lo = bound(query, 'since', now);
+      const hi = bound(query, 'until', now);
+      rows = rows.filter((r) => {
+        const t = r && toTime(r[query.dateField]);
+        if (t == null) return false; // malformed date: excluded, never coerced
+        if (lo != null && t < lo) return false;
+        if (hi != null && t > hi) return false;
+        return true;
+      });
+    }
+
+    const agg = query.aggregate;
+    if (!agg || typeof agg !== 'object' || !AGG_FNS.has(agg.fn)) {
+      throw new Error('aggregate {fn} is required (sum|count|avg|min|max)');
+    }
+    if (agg.fn !== 'count') need(agg.field, schema, 'aggregate');
+
+    function fold(list) {
+      if (agg.fn === 'count') return list.length;
+      const nums = list.map((r) => Number(r && r[agg.field])).filter(Number.isFinite);
+      if (!nums.length) return 0;
+      if (agg.fn === 'sum') return nums.reduce((a, b) => a + b, 0);
+      if (agg.fn === 'avg') return nums.reduce((a, b) => a + b, 0) / nums.length;
+      if (agg.fn === 'min') return Math.min.apply(null, nums);
+      return Math.max.apply(null, nums);
+    }
+
+    let out;
+    if (query.groupBy != null) {
+      need(query.groupBy, schema, 'groupBy');
+      const groups = new Map();
+      for (const r of rows) {
+        const k = String(r && r[query.groupBy]);
+        if (!groups.has(k)) groups.set(k, []);
+        groups.get(k).push(r);
+      }
+      out = Array.from(groups, (pair) => ({ label: pair[0], value: fold(pair[1]) }));
+    } else {
+      out = [{ label: (agg.fn + ' ' + (agg.field || '')).trim(), value: fold(rows) }];
+    }
+
+    const limit = Number.isFinite(query.limit) && query.limit > 0 ? Math.min(query.limit, MAX_ROWS) : MAX_ROWS;
+    return out.slice(0, limit);
+  }
+
+  return { parseDuration, runQuery, MAX_ROWS };
+});
+
+
+/* ---- sdk/src/registry.js ---- */
+/*
+ * Morph SDK — vendor registry. Validates the vendor's init() config (throws
+ * TypeError: vendors are developers, fail loud), exposes JSON-safe manifests
+ * for the model, and is the ONLY path from a model-emitted op to vendor code:
+ * data via resolveData (fetch + trusted query engine), behavior via
+ * invokeAction (schema-checked args + confirm gate).
+ * UMD: Node module in tests, browser global `MorphRegistry` in the SDK bundle.
+ */
+(function (global, factory) {
+  const api = factory(
+    typeof module !== 'undefined' && module.exports ? require('./query.js') : global.MorphQuery
+  );
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  else global.MorphRegistry = api;
+})(typeof self !== 'undefined' ? self : this, function (Query) {
+  'use strict';
+
+  const NAME_RE = /^[a-zA-Z][\w-]{0,59}$/;
+  const FIELD_TYPES = new Set(['string', 'number', 'date', 'boolean']);
+  const ARG_TYPES = new Set(['string', 'number']);
+  const MAX_ENTRIES = 20;
+  const MAX_FIELDS = 40;
+  const FETCH_TIMEOUT_MS = 10000;
+
+  function checkSchema(schema, allowed, what, name) {
+    if (!schema || typeof schema !== 'object') throw new TypeError('Morph: ' + what + ' "' + name + '" needs a schema object');
+    const fields = Object.keys(schema);
+    if (fields.length === 0 || fields.length > MAX_FIELDS) throw new TypeError('Morph: ' + what + ' "' + name + '" schema needs 1-' + MAX_FIELDS + ' fields');
+    for (const f of fields) {
+      if (!NAME_RE.test(f)) throw new TypeError('Morph: bad field name "' + f + '" in ' + what + ' "' + name + '"');
+      if (!allowed.has(schema[f])) throw new TypeError('Morph: bad type "' + schema[f] + '" for field "' + f + '" in ' + what + ' "' + name + '"');
+    }
+  }
+
+  function createRegistry(config) {
+    config = config || {};
+    const sources = {};
+    const actions = {};
+
+    const srcEntries = Object.keys(config.sources || {});
+    const actEntries = Object.keys(config.actions || {});
+    if (srcEntries.length > MAX_ENTRIES || actEntries.length > MAX_ENTRIES) {
+      throw new TypeError('Morph: at most ' + MAX_ENTRIES + ' sources/actions');
+    }
+    for (const name of srcEntries) {
+      const s = config.sources[name];
+      if (!NAME_RE.test(name)) throw new TypeError('Morph: bad source name "' + name + '"');
+      if (!s || typeof s.fetch !== 'function') throw new TypeError('Morph: source "' + name + '" needs a fetch function');
+      checkSchema(s.schema, FIELD_TYPES, 'source', name);
+      sources[name] = {
+        fetch: s.fetch,
+        schema: Object.assign({}, s.schema),
+        description: typeof s.description === 'string' ? s.description.slice(0, 200) : '',
+      };
+    }
+    for (const name of actEntries) {
+      const a = config.actions[name];
+      if (!NAME_RE.test(name)) throw new TypeError('Morph: bad action name "' + name + '"');
+      if (!a || typeof a.run !== 'function') throw new TypeError('Morph: action "' + name + '" needs a run function');
+      checkSchema(a.argsSchema, ARG_TYPES, 'action', name);
+      actions[name] = {
+        run: a.run,
+        argsSchema: Object.assign({}, a.argsSchema),
+        description: typeof a.description === 'string' ? a.description.slice(0, 200) : '',
+        confirm: a.confirm !== false, // default true: safe unless the vendor opts out
+      };
+    }
+
+    function manifests() {
+      const out = { sources: {}, actions: {} };
+      for (const n of Object.keys(sources)) out.sources[n] = { schema: sources[n].schema, description: sources[n].description };
+      for (const n of Object.keys(actions)) out.actions[n] = { argsSchema: actions[n].argsSchema, description: actions[n].description, confirm: actions[n].confirm };
+      return out;
+    }
+
+    function validateDataOp(op) {
+      if (!op || typeof op.source !== 'string' || !Object.prototype.hasOwnProperty.call(sources, op.source)) {
+        return { ok: false, reason: 'unknown source' };
+      }
+      if (!op.query || typeof op.query !== 'object' || Array.isArray(op.query)) {
+        return { ok: false, reason: 'query must be an object' };
+      }
+      return { ok: true };
+    }
+
+    async function resolveData(op) {
+      const v = validateDataOp(op);
+      if (!v.ok) throw new Error('Morph: ' + v.reason);
+      const src = sources[op.source];
+      let timer;
+      const records = await Promise.race([
+        Promise.resolve(src.fetch(op.query)),
+        new Promise((resolve, reject) => {
+          timer = setTimeout(() => reject(new Error('Morph: source "' + op.source + '" timed out')), FETCH_TIMEOUT_MS);
+        }),
+      ]).finally(() => clearTimeout(timer));
+      return Query.runQuery(Array.isArray(records) ? records : [], op.query, src.schema);
+    }
+
+    async function invokeAction(name, args, confirmFn) {
+      const a = Object.prototype.hasOwnProperty.call(actions, name) ? actions[name] : null;
+      if (!a) throw new Error('Morph: unknown action "' + name + '"');
+      args = args && typeof args === 'object' ? args : {};
+      for (const k of Object.keys(args)) {
+        if (!Object.prototype.hasOwnProperty.call(a.argsSchema, k)) throw new Error('Morph: unexpected arg "' + k + '"');
+        if (typeof args[k] !== a.argsSchema[k]) throw new Error('Morph: arg "' + k + '" wrong type (want ' + a.argsSchema[k] + ')');
+      }
+      if (a.confirm) {
+        const ok = await (typeof confirmFn === 'function' ? confirmFn(name, a.description) : false);
+        if (!ok) throw new Error('Morph: action declined');
+      }
+      return a.run(args);
+    }
+
+    return {
+      manifests, validateDataOp, resolveData, invokeAction,
+      hasSources: () => Object.keys(sources).length > 0,
+      hasActions: () => Object.keys(actions).length > 0,
+    };
+  }
+
+  return { createRegistry };
+});
+
+
+/* ---- sdk/src/storage.js ---- */
+/*
+ * Morph SDK — recipe store. Persists one recipe per page path so generated
+ * widgets/reshapes reapply on every visit. Default backing is localStorage
+ * (per-browser); a vendor may pass a custom adapter {get,set,remove} (sync or
+ * Promise) to store recipes in their own backend so a user's generated
+ * features follow them across devices. Storage failures NEVER throw — a
+ * broken store must never break the host page.
+ * UMD: Node module in tests, browser global `MorphStorage` in the SDK bundle.
+ */
+(function (global, factory) {
+  const api = factory();
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  else global.MorphStorage = api;
+})(typeof self !== 'undefined' ? self : this, function () {
+  'use strict';
+
+  const PREFIX = 'morph:sdk:recipe:';
+  const SCHEMA_VERSION = 1;
+  const MAX_PROMPT_LABEL = 300;
+
+  // Default adapter: window.localStorage, JSON values, fully guarded.
+  function localAdapter() {
+    function ls() {
+      try {
+        return (typeof window !== 'undefined' && window.localStorage) ? window.localStorage : null;
+      } catch (_) { return null; } // SecurityError in sandboxed frames
+    }
+    return {
+      get(key) {
+        const s = ls();
+        if (!s) return undefined;
+        const raw = s.getItem(key);
+        if (raw == null) return undefined;
+        try { return JSON.parse(raw); } catch (_) { return undefined; }
+      },
+      set(key, value) {
+        const s = ls();
+        if (!s) return;
+        s.setItem(key, JSON.stringify(value));
+      },
+      remove(key) {
+        const s = ls();
+        if (!s) return;
+        s.removeItem(key);
+      },
+    };
+  }
+
+  // mergeTransforms concats; recipes must UNION. Drop structurally identical
+  // ops (first occurrence wins) so repeating a prompt can't bloat the recipe.
+  function dedupeOps(transform) {
+    if (!transform || !Array.isArray(transform.ops)) return transform;
+    const seen = new Set();
+    const ops = transform.ops.filter((op) => {
+      let key;
+      try { key = JSON.stringify(op); } catch (_) { return true; }
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+    return Object.assign({}, transform, { ops });
+  }
+
+  // Dedupe prompt-label segments exactly like extension/src/recipes.js
+  // appendTransform: never re-append a segment that is already present.
+  function mergePrompt(existingPrompt, incoming) {
+    if (existingPrompt && incoming) {
+      const dup = existingPrompt.split(' + ')
+        .some((s) => s.trim().toLowerCase() === incoming.trim().toLowerCase());
+      return dup ? existingPrompt : String(existingPrompt + ' + ' + incoming).slice(0, MAX_PROMPT_LABEL);
+    }
+    return incoming || existingPrompt || '';
+  }
+
+  function createStore(adapter) {
+    const backing = (adapter && typeof adapter === 'object') ? adapter : localAdapter();
+    const keyOf = (pathKey) => PREFIX + String(pathKey || '/');
+
+    // Serialize read-modify-write so rapid appends can't lose ops (same
+    // pattern as extension/src/recipes.js).
+    let writeChain = Promise.resolve();
+    function serialize(fn) {
+      const run = writeChain.then(fn, fn);
+      writeChain = run.then(() => {}, () => {});
+      return run;
+    }
+
+    async function loadRecipe(pathKey) {
+      try {
+        const v = await backing.get(keyOf(pathKey));
+        return (v && typeof v === 'object') ? v : null;
+      } catch (_) { return null; }
+    }
+
+    function saveRecipe(pathKey, recipe) {
+      return serialize(async () => {
+        try {
+          const merged = Object.assign(
+            { path: String(pathKey || '/'), enabled: true, createdAt: Date.now() },
+            recipe,
+            { schemaVersion: SCHEMA_VERSION, path: String(pathKey || '/') }
+          );
+          await backing.set(keyOf(pathKey), merged);
+          return merged;
+        } catch (_) { return null; }
+      });
+    }
+
+    function appendTransform(pathKey, transform, meta, mergeFn) {
+      return serialize(async () => {
+        try {
+          let existing = null;
+          try { existing = await backing.get(keyOf(pathKey)); } catch (_) { /* treat as none */ }
+          if (!existing || typeof existing !== 'object') existing = null;
+          const mergedTransform = dedupeOps(
+            (existing && existing.transform && typeof mergeFn === 'function')
+              ? mergeFn(existing.transform, transform)
+              : transform
+          );
+          const prompt = mergePrompt(existing && existing.prompt, (meta && meta.prompt) || '');
+          const merged = Object.assign(
+            { path: String(pathKey || '/'), createdAt: Date.now() },
+            existing || {},
+            {
+              path: String(pathKey || '/'), prompt, transform: mergedTransform,
+              enabled: true, schemaVersion: SCHEMA_VERSION,
+            }
+          );
+          await backing.set(keyOf(pathKey), merged);
+          return merged;
+        } catch (_) { return null; }
+      });
+    }
+
+    function removeRecipe(pathKey) {
+      return serialize(async () => {
+        try { await backing.remove(keyOf(pathKey)); } catch (_) { /* never throws */ }
+      });
+    }
+
+    return { loadRecipe, saveRecipe, appendTransform, removeRecipe };
+  }
+
+  return { createStore, SCHEMA_VERSION };
+});
+
+
+/* ---- extension/src/context.js ---- */
+/*
+ * Context extractor — serialize a compact, pruned view of the page so the model
+ * can pick real selectors without shipping the whole DOM. Runs in the content script
+ * (isolated world). Attaches to window.Morph.extractContext.
+ */
+(function () {
+  'use strict';
+  window.Morph = window.Morph || {};
+
+  const SKIP_TAGS = new Set([
+    'script', 'style', 'noscript', 'template', 'svg', 'path', 'meta', 'link',
+    'br', 'head', 'iframe', 'canvas',
+  ]);
+  const MAX_NODES = 600;
+  const MAX_DEPTH = 12;
+  const MAX_CHILDREN = 14;     // cap repetitive lists
+  const TEXT_PREVIEW = 50;
+  const MAX_CHARS = 55000;
+
+  function simpleId(id) {
+    // only emit ids that are valid, stable-looking selectors
+    return id && /^[A-Za-z][\w-]*$/.test(id) ? id : null;
+  }
+
+  function classes(el) {
+    if (!el.classList || el.classList.length === 0) return [];
+    return Array.from(el.classList)
+      .filter((c) => /^[A-Za-z][\w-]*$/.test(c) && c.length <= 40)
+      .slice(0, 3);
+  }
+
+  function selectorHint(el) {
+    const tag = el.tagName.toLowerCase();
+    const id = simpleId(el.id);
+    if (id) return `${tag}#${id}`;
+    const cls = classes(el);
+    return cls.length ? `${tag}.${cls.join('.')}` : tag;
+  }
+
+  function ownText(el) {
+    let t = '';
+    for (const n of el.childNodes) {
+      if (n.nodeType === 3) t += n.nodeValue;
+      if (t.length > TEXT_PREVIEW * 2) break;
+    }
+    t = t.replace(/\s+/g, ' ').trim();
+    return t.length > TEXT_PREVIEW ? t.slice(0, TEXT_PREVIEW) + '…' : t;
+  }
+
+  function isVisible(el) {
+    // cheap visibility filter; avoids dumping hidden subtrees
+    if (el.hidden) return false;
+    // Fast path: an inline display:none / visibility:hidden is a strict subset of
+    // the computed value, so we can rule the node out WITHOUT forcing a
+    // getComputedStyle reflow. The computed-style check below still catches
+    // CSS-class / stylesheet-based hiding.
+    const inline = el.style;
+    if (inline && (inline.display === 'none' || inline.visibility === 'hidden')) return false;
+    const view = el.ownerDocument.defaultView;
+    const style = view && view.getComputedStyle(el);
+    if (style && (style.display === 'none' || style.visibility === 'hidden')) return false;
+    return true;
+  }
+
+  function extractContext(root) {
+    root = root || document.body || document.documentElement;
+    const lines = [];
+    let nodeCount = 0;
+    let charCount = 0;
+    let truncated = false;
+
+    function walk(el, depth) {
+      if (truncated || nodeCount >= MAX_NODES || depth > MAX_DEPTH) return;
+      const tag = el.tagName ? el.tagName.toLowerCase() : null;
+      if (!tag || SKIP_TAGS.has(tag)) return;
+      if (!isVisible(el)) return;
+
+      nodeCount++;
+      const indent = '  '.repeat(Math.min(depth, 10));
+      const role = el.getAttribute && el.getAttribute('role');
+      const aria = el.getAttribute && el.getAttribute('aria-label');
+      const text = ownText(el);
+
+      let line = indent + selectorHint(el);
+      if (role) line += ` [role=${role}]`;
+      if (aria) line += ` [aria-label="${aria.slice(0, 40)}"]`;
+      if (text) line += ` "${text}"`;
+
+      charCount += line.length + 1;
+      if (charCount > MAX_CHARS) { truncated = true; return; }
+      lines.push(line);
+
+      const kids = Array.from(el.children || []);
+      const shown = kids.slice(0, MAX_CHILDREN);
+      for (const child of shown) walk(child, depth + 1);
+      if (kids.length > shown.length) {
+        lines.push(indent + `  …(+${kids.length - shown.length} more siblings)`);
+      }
+    }
+
+    walk(root, 0);
+    let out = lines.join('\n');
+    if (truncated) out += '\n…(snapshot truncated)';
+    return out;
+  }
+
+  window.Morph.extractContext = extractContext;
+})();
+
+
+/* ---- extension/src/promptbar.js ---- */
+/*
+ * Prompt bar — the universal, style-isolated overlay (Shadow DOM) shown on every site.
+ * Pure UI: it knows nothing about the model or recipes; content.js wires the handlers.
+ * Attaches to window.Morph.bar.
+ *
+ * Public contract consumed by content.js (DO NOT remove/rename or change semantics):
+ *   mount(handlers {onSubmit, onUndo}), show, hide, toggle, isVisible,
+ *   setStatus(text, kind), clearStatus, setBusy(bool), showActions(bool), clearInput.
+ * A few NON-breaking helpers are added below (focusInput, setRecent).
+ */
+(function () {
+  'use strict';
+  window.Morph = window.Morph || {};
+
+  const HOST_ID = 'morph-host-root';
+  // Recent prompts are stored PER-ORIGIN: a map { origin -> string[] } under one key,
+  // so the bar only ever shows prompts you typed on the site you're currently on.
+  const RECENT_KEY = 'morph:recentByOrigin';
+  const LEGACY_RECENT_KEY = 'morph:recentPrompts'; // pre-1.0.5 global list; removed on mount
+  const RECENT_CAP = 6;       // prompts kept per origin
+  const MAX_ORIGINS = 60;     // bound total storage growth
+
+  let host, root, els, handlers = {}, visible = false;
+  let lastFocused = null;       // page element focused before show(), restored on hide()
+  let recipeActive = false;     // when a recipe is active we keep example chips hidden
+  let connectHandler = null;    // onConnect callback for the connector suggestion
+  let currentSuggestions = [];  // site-special model prompts (via setSuggestions); empty hides the row
+  let targetClear = null;       // onClear callback for the targeted-element indicator
+
+  const CSS = `
+  :host { all: initial; }
+
+  /* Precision-instrument palette: monochrome, white accent, hairline rules.
+     Dark by default; inverted (black accent) under prefers-color-scheme: light. */
+  .wrap {
+    --bg: #0a0a0b;
+    --fg: #fafafa;
+    --muted: #a1a1aa;
+    --faint: #6e6e76;
+    --line: rgba(255,255,255,0.14);
+    --line-strong: rgba(255,255,255,0.30);
+    --field: #161618;
+    --accent: #ffffff;       /* was purple */
+    --accent-ink: #0a0a0b;   /* text/icon on the white accent */
+    --err: #ff6b6b;
+    --shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 64px -22px rgba(0,0,0,0.9);
+    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
+  }
+  @media (prefers-color-scheme: light) {
+    .wrap {
+      --bg: #ffffff;
+      --fg: #0a0a0b;
+      --muted: #52525b;
+      --faint: #9a9aa2;
+      --line: rgba(0,0,0,0.14);
+      --line-strong: rgba(0,0,0,0.32);
+      --field: #f5f5f5;
+      --accent: #0a0a0b;     /* black accent on light */
+      --accent-ink: #ffffff;
+      --err: #c4302b;
+      --shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 64px -22px rgba(0,0,0,0.28);
+    }
+  }
+
+  .wrap {
+    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(6px);
+    z-index: 2147483647; font-family: var(--mono);
+    width: min(660px, calc(100vw - 32px));
+    background: var(--bg); color: var(--fg);
+    border: 1px solid var(--line); border-radius: 4px;
+    box-shadow: var(--shadow); padding: 14px;
+    opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s cubic-bezier(.2,.7,.2,1);
+    box-sizing: border-box;
+  }
+  .wrap.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
+  @media (prefers-reduced-motion: reduce) {
+    .wrap, .wrap.show { transition: opacity .1s linear; transform: translateX(-50%) translateY(0); }
+    .spinner { animation: none; }
+  }
+
+  .row { display: flex; align-items: stretch; gap: 10px; }
+
+  /* Wordmark: a hard accent block + tracked monospace MORPH. */
+  .logo { display: flex; align-items: center; gap: 9px; user-select: none; white-space: nowrap;
+    font-size: 11px; font-weight: 700; letter-spacing: .24em; color: var(--fg); padding: 0 2px; }
+  .logo .mark { width: 9px; height: 9px; background: var(--accent); display: inline-block; }
+
+  input.q {
+    flex: 1; min-width: 0; background: var(--field);
+    border: 1px solid var(--line); border-radius: 2px;
+    color: var(--fg); font-family: var(--mono); font-size: 13.5px; letter-spacing: -.01em;
+    padding: 11px 12px; outline: none; text-overflow: ellipsis;
+    transition: border-color .12s ease;
+  }
+  input.q:focus { border-color: var(--line-strong); }
+  input.q::placeholder { color: var(--faint); }
+
+  button {
+    border: 0; border-radius: 2px; padding: 0 16px; font-family: var(--mono);
+    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
+    cursor: pointer; white-space: nowrap; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
+  }
+  button:disabled { opacity: .4; cursor: default; }
+  .go { background: var(--accent); color: var(--accent-ink);
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 100px; }
+  .go:hover:not(:disabled) { opacity: .82; }
+  .ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 8px 12px; }
+  .ghost:hover:not(:disabled) { color: var(--fg); border-color: var(--line-strong); }
+  .x { background: transparent; color: var(--faint); padding: 0 8px; font-size: 17px; line-height: 1; }
+  .x:hover { color: var(--fg); }
+
+  /* Crisp keyboard focus ring. */
+  input.q:focus-visible, button:focus-visible, .chip:focus-visible {
+    outline: 1px solid var(--accent); outline-offset: 2px;
+  }
+
+  /* Suggestion + recent chips — square, hairline, mono. */
+  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
+  .chips.hidden { display: none; }
+  .chips .lead { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
+    color: var(--faint); margin-right: 4px; user-select: none; }
+  .chip {
+    background: transparent; color: var(--muted); border: 1px solid var(--line);
+    border-radius: 2px; padding: 5px 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .01em;
+    cursor: pointer; white-space: nowrap; transition: color .12s ease, border-color .12s ease, background .12s ease;
+    /* Recent prompts are arbitrary user text — clamp each chip so a long prompt
+       can't overflow the bar; full text stays available via the title tooltip. */
+    max-width: 200px; overflow: hidden; text-overflow: ellipsis;
+  }
+  .chip.dismiss { max-width: none; }
+  .chip:hover { color: var(--fg); border-color: var(--line-strong); background: var(--field); }
+  .chip.dismiss { padding: 5px 7px; color: var(--faint); }
+
+  .status {
+    font-size: 11.5px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
+    min-height: 15px; color: var(--muted); display: none; line-height: 1.55;
+    word-break: break-word; overflow-wrap: anywhere; max-height: 8.5em; overflow-y: auto;
+  }
+  .status.show { display: block; }
+  .status.err { color: var(--err); }
+  .status.ok { color: var(--fg); }
+  .status b { font-weight: 700; color: var(--fg); }
+
+  .actions { display: none; gap: 8px; margin-top: 12px; }
+  .actions.show { display: flex; }
+
+  /* Connector suggestion ("You're on Gmail — connect …"). */
+  .connector { display: none; align-items: center; gap: 10px; margin-top: 12px;
+    padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--field); }
+  .connector.show { display: flex; }
+  .connector .ctext { flex: 1; font-size: 11px; color: var(--muted); line-height: 1.45; letter-spacing: .01em; }
+  .connector .ctext b { color: var(--fg); font-weight: 700; }
+  .connector .cbtn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 2px;
+    padding: 7px 12px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
+    text-transform: uppercase; cursor: pointer; white-space: nowrap; }
+  .connector .cbtn:hover { opacity: .85; }
+  .connector .cx { background: transparent; border: 0; color: var(--faint); cursor: pointer;
+    font-size: 15px; line-height: 1; padding: 0 4px; }
+  .connector .cx:hover { color: var(--fg); }
+
+  /* Element-picker button + targeted-element indicator. */
+  .aim { background: transparent; color: var(--muted); border: 1px solid var(--line);
+    padding: 0 12px; font-size: 15px; line-height: 1; }
+  .aim:hover:not(:disabled) { color: var(--fg); border-color: var(--line-strong); }
+  .aim.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
+  .target { display: none; align-items: center; gap: 8px; margin-top: 10px;
+    padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--field); }
+  .target.show { display: flex; }
+  .target .ttext { flex: 1; font-size: 11px; color: var(--fg); letter-spacing: .01em; line-height: 1.4;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .target .ttext b { font-weight: 700; }
+  .target .tx { background: transparent; border: 0; color: var(--faint); cursor: pointer;
+    font-size: 15px; line-height: 1; padding: 0 4px; }
+  .target .tx:hover { color: var(--fg); }
+
+  .spinner { display: inline-block; width: 11px; height: 11px; border: 1.5px solid rgba(127,127,140,0.4);
+    border-top-color: var(--accent-ink); border-radius: 50%; animation: spin .6s linear infinite; vertical-align: -1px; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  `;
+
+  function build() {
+    host = document.createElement('div');
+    host.id = HOST_ID;
+    root = host.attachShadow({ mode: 'open' });
+
+    const style = document.createElement('style');
+    style.textContent = CSS;
+    root.appendChild(style);
+
+    const wrap = document.createElement('div');
+    wrap.className = 'wrap';
+    wrap.setAttribute('role', 'dialog');
+    wrap.setAttribute('aria-modal', 'true');
+    wrap.setAttribute('aria-label', 'Morph prompt');
+    // Static structure only — no untrusted text is interpolated here.
+    wrap.innerHTML = `
+      <div class="row">
+        <div class="logo" aria-hidden="true"><i class="mark"></i>MORPH</div>
+        <input class="q" type="text" autocomplete="off" spellcheck="false"
+          aria-label="Describe how this page should look"
+          placeholder="Reshape this page…" />
+        <button class="aim" type="button" aria-label="Pick an element to target" title="Pick an element to change (Esc to cancel)">⌖</button>
+        <button class="go" aria-label="Reshape the page">
+          <span class="go-spin" hidden><span class="spinner"></span></span><span class="go-label">Morph it</span>
+        </button>
+        <button class="x" aria-label="Close Morph" title="Close (Esc)">×</button>
+      </div>
+      <div class="connector" role="note">
+        <span class="ctext"></span>
+        <button class="cbtn" type="button">Connect</button>
+        <button class="cx" type="button" aria-label="Dismiss connector suggestion">×</button>
+      </div>
+      <div class="target" role="note">
+        <span class="ttext"></span>
+        <button class="tx" type="button" aria-label="Clear the targeted element">×</button>
+      </div>
+      <div class="chips examples" aria-label="Example prompts"></div>
+      <div class="chips recent" aria-label="Recent prompts" hidden></div>
+      <div class="status" role="status" aria-live="polite"></div>
+      <div class="actions">
+        <button class="ghost undo" aria-label="Undo and forget this site's recipe">Undo &amp; forget</button>
+      </div>
+    `;
+    root.appendChild(wrap);
+
+    els = {
+      wrap,
+      input: wrap.querySelector('input.q'),
+      go: wrap.querySelector('.go'),
+      goLabel: wrap.querySelector('.go-label'),
+      goSpin: wrap.querySelector('.go-spin'),
+      close: wrap.querySelector('.x'),
+      examples: wrap.querySelector('.chips.examples'),
+      recent: wrap.querySelector('.chips.recent'),
+      status: wrap.querySelector('.status'),
+      actions: wrap.querySelector('.actions'),
+      undo: wrap.querySelector('.undo'),
+      connector: wrap.querySelector('.connector'),
+      ctext: wrap.querySelector('.connector .ctext'),
+      cbtn: wrap.querySelector('.connector .cbtn'),
+      cx: wrap.querySelector('.connector .cx'),
+      aim: wrap.querySelector('.aim'),
+      target: wrap.querySelector('.target'),
+      ttext: wrap.querySelector('.target .ttext'),
+      tx: wrap.querySelector('.target .tx'),
+    };
+
+    renderExamples();
+
+    els.go.addEventListener('click', submit);
+    els.input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.preventDefault(); submit(); }
+      if (e.key === 'Escape') { e.preventDefault(); hide(); }
+    });
+    els.input.addEventListener('input', updateChipVisibility);
+
+    // Contain ALL keystrokes inside the bar so they never reach the host page's
+    // global keyboard shortcuts (e.g. GitHub/Gmail/X single-key hotkeys that
+    // would otherwise fire because our shadow-host is not a recognized input).
+    // stopPropagation does not block typing (default action still happens).
+    ['keydown', 'keyup', 'keypress'].forEach((evt) =>
+      wrap.addEventListener(evt, (e) => { e.stopPropagation(); }));
+    els.close.addEventListener('click', hide);
+    els.undo.addEventListener('click', () => handlers.onUndo && handlers.onUndo());
+    els.cbtn.addEventListener('click', () => { if (connectHandler) connectHandler(); });
+    els.cx.addEventListener('click', hideConnector);
+    els.aim.addEventListener('click', () => { if (handlers.onPick) handlers.onPick(); });
+    els.tx.addEventListener('click', () => { const cb = targetClear; clearTarget(); if (cb) cb(); });
+
+    // Focus trap + Esc, scoped to the shadow root while visible.
+    wrap.addEventListener('keydown', onWrapKeydown);
+
+    (document.body || document.documentElement).appendChild(host);
+
+    // Drop the legacy global recents, then pull THIS site's recents asynchronously;
+    // never throws if chrome.storage is absent.
+    removeLegacyRecent();
+    loadRecent();
+  }
+
+  // --- example / recent chip rendering (text is injected via textContent only) ---
+
+  function makeChip(text, cls) {
+    const b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'chip' + (cls ? ' ' + cls : '');
+    b.textContent = text;                 // NEVER innerHTML — text may be user-authored.
+    b.setAttribute('aria-label', 'Use prompt: ' + text);
+    return b;
+  }
+
+  function fillAndSubmit(text) {
+    if (!els) return;
+    els.input.value = text;
+    els.input.focus();
+    submit();                             // routes through the same submit() so onSubmit fires unchanged
+  }
+
+  function renderExamples() {
+    if (!els) return;
+    els.examples.textContent = '';
+    if (!currentSuggestions.length) { els.examples.hidden = true; return; }
+    els.examples.hidden = false;
+    currentSuggestions.forEach((ex) => {
+      const chip = makeChip(ex);
+      chip.addEventListener('click', () => fillAndSubmit(ex));
+      els.examples.appendChild(chip);
+    });
+    updateChipVisibility();
+  }
+
+  // Set the site-special suggestion chips (plain strings; rendered via textContent).
+  // An empty list HIDES the row — generic restyle is offered by the one-tap presets,
+  // so we never duplicate it here.
+  function setSuggestions(list) {
+    currentSuggestions = Array.isArray(list)
+      ? list.filter((s) => typeof s === 'string' && s.trim()).slice(0, 8)
+      : [];
+    if (els) renderExamples();
+  }
+
+  function renderRecent(list) {
+    if (!els) return;
+    els.recent.textContent = '';
+    const items = Array.isArray(list) ? list.filter((s) => typeof s === 'string' && s.trim()) : [];
+    if (!items.length) { els.recent.hidden = true; return; }
+
+    const lead = document.createElement('span');
+    lead.className = 'lead';
+    lead.textContent = 'Recent';
+    els.recent.appendChild(lead);
+
+    items.slice(0, RECENT_CAP).forEach((p) => {
+      const chip = makeChip(p);
+      chip.title = p;
+      chip.addEventListener('click', () => fillAndSubmit(p));
+      els.recent.appendChild(chip);
+    });
+
+    const clear = makeChip('×', 'dismiss');
+    clear.setAttribute('aria-label', 'Clear recent prompts');
+    clear.title = 'Clear recent prompts';
+    clear.addEventListener('click', clearRecent);
+    els.recent.appendChild(clear);
+
+    els.recent.hidden = false;
+  }
+
+  // Examples are unobtrusive: hidden once a recipe is active or the input has text.
+  function updateChipVisibility() {
+    if (!els) return;
+    const hasText = !!els.input.value.trim();
+    els.examples.classList.toggle('hidden', recipeActive || hasText);
+  }
+
+  // --- recent-prompts memory (chrome.storage.local, guarded for jsdom/plain DOM) ---
+
+  function hasStorage() {
+    return typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local;
+  }
+
+  // Pure: dedupe (case-insensitive), most-recent-first, capped. Exported for tests below.
+  function updateRecentList(list, prompt, cap) {
+    const max = cap || RECENT_CAP;
+    const next = Array.isArray(list) ? list.slice() : [];
+    const p = String(prompt == null ? '' : prompt).trim();
+    if (!p) return next.slice(0, max);
+    const out = [p];
+    for (const item of next) {
+      if (typeof item !== 'string') continue;
+      const t = item.trim();
+      if (!t) continue;
+      if (t.toLowerCase() === p.toLowerCase()) continue;
+      out.push(t);
+      if (out.length >= max) break;
+    }
+    return out.slice(0, max);
+  }
+
+  // The current site's bucket key. Recents are scoped to the page origin.
+  function originKey() {
+    try { return location.origin || '(unknown)'; } catch (_) { return '(unknown)'; }
+  }
+
+  // Pure: write `prompt` into the per-origin recent map and return a NEW map. Each origin
+  // keeps its own deduped/capped list; the number of origins is bounded (oldest-written
+  // dropped first). Exported for tests below.
+  function updateRecentMap(map, origin, prompt, cap, maxOrigins) {
+    const m = map && typeof map === 'object' && !Array.isArray(map) ? Object.assign({}, map) : {};
+    const key = origin || '(unknown)';
+    const list = updateRecentList(Array.isArray(m[key]) ? m[key] : [], prompt, cap);
+    delete m[key];               // re-insert last so this origin is "most recently written"
+    if (list.length) m[key] = list;
+    const capN = maxOrigins || MAX_ORIGINS;
+    const keys = Object.keys(m);  // insertion order
+    if (keys.length > capN) for (const k of keys.slice(0, keys.length - capN)) delete m[k];
+    return m;
+  }
+
+  function loadRecent() {
+    if (!hasStorage()) return;
+    try {
+      chrome.storage.local.get(RECENT_KEY, (d) => {
+        if (chrome.runtime && chrome.runtime.lastError) return;
+        const map = (d && d[RECENT_KEY]) || {};
+        renderRecent(map[originKey()] || []);
+      });
+    } catch (_) { /* ignore */ }
+  }
+
+  function pushRecent(prompt) {
+    if (!hasStorage()) return;
+    try {
+      chrome.storage.local.get(RECENT_KEY, (d) => {
+        const origin = originKey();
+        const map = updateRecentMap((d && d[RECENT_KEY]) || {}, origin, prompt, RECENT_CAP, MAX_ORIGINS);
+        chrome.storage.local.set({ [RECENT_KEY]: map }, () => {
+          if (chrome.runtime && chrome.runtime.lastError) return;
+          renderRecent(map[origin] || []);
+        });
+      });
+    } catch (_) { /* ignore */ }
+  }
+
+  function clearRecent() {
+    if (hasStorage()) {
+      try {
+        chrome.storage.local.get(RECENT_KEY, (d) => {
+          const map = (d && d[RECENT_KEY]) || {};
+          delete map[originKey()];          // clear THIS site only
+          chrome.storage.local.set({ [RECENT_KEY]: map });
+        });
+      } catch (_) {}
+    }
+    renderRecent([]);
+  }
+
+  // One-time cleanup of the pre-1.0.5 global recents key so old cross-site prompts vanish.
+  function removeLegacyRecent() {
+    if (!hasStorage()) return;
+    try { chrome.storage.local.remove(LEGACY_RECENT_KEY); } catch (_) {}
+  }
+
+  // --- submit ---
+
+  function submit() {
+    const q = els.input.value.trim();
+    if (!q || !handlers.onSubmit) return;
+    // Optimistically remember the prompt; content.js drives the actual success/error UI.
+    pushRecent(q);
+    handlers.onSubmit(q);
+  }
+
+  // --- status (TRUSTED markup) ---
+  //
+  // INVARIANT: setStatus receives TRUSTED HTML from content.js — it passes spinner/<b>
+  // markup plus user text that content.js has ALREADY escaped via its own escapeHtml().
+  // We MUST render it with innerHTML and MUST NOT escape here; escaping would double-encode
+  // the user text and break the spinner/bold markup. This is part of the public contract.
+  function setStatus(text, kind) {
+    els.status.className = 'status show' + (kind ? ' ' + kind : '');
+    els.status.innerHTML = text;
+    els.status.scrollTop = 0;
+  }
+  function clearStatus() { els.status.className = 'status'; els.status.innerHTML = ''; }
+
+  function setBusy(busy) {
+    els.go.disabled = busy;
+    els.input.disabled = busy;
+    if (els.goSpin) els.goSpin.hidden = !busy;
+    if (els.goLabel) els.goLabel.textContent = busy ? 'Reshaping…' : 'Morph it';
+    // Disable chips while busy so a second submit can't race.
+    setChipsDisabled(busy);
+    els.wrap.setAttribute('aria-busy', busy ? 'true' : 'false');
+    if (busy) setStatus('<span class="spinner"></span>Reshaping the page…');
+  }
+
+  function setChipsDisabled(disabled) {
+    if (!els) return;
+    const chips = els.wrap.querySelectorAll('.chip');
+    chips.forEach((c) => { c.disabled = !!disabled; });
+  }
+
+  function showActions(show) {
+    els.actions.className = 'actions' + (show ? ' show' : '');
+    // A live recipe means example chips are no longer the right first thing to show.
+    recipeActive = !!show;
+    updateChipVisibility();
+  }
+
+  // --- focus trap ---
+
+  function focusable() {
+    if (!root) return [];
+    const sel = 'input:not([disabled]), button:not([disabled]):not([hidden])';
+    return Array.prototype.filter.call(root.querySelectorAll(sel), (el) => {
+      // Skip elements inside a hidden chips row.
+      if (el.classList && el.classList.contains('chip')) {
+        const rowHidden = el.closest('.chips') && el.closest('.chips').hidden;
+        const rowOff = el.closest('.chips') && el.closest('.chips').classList.contains('hidden');
+        if (rowHidden || rowOff) return false;
+      }
+      return el.offsetParent !== null || el === els.input;
+    });
+  }
+
+  function onWrapKeydown(e) {
+    if (e.key === 'Escape') { e.preventDefault(); hide(); return; }
+    if (e.key !== 'Tab' || !visible) return;
+    const items = focusable();
+    if (!items.length) return;
+    const first = items[0];
+    const last = items[items.length - 1];
+    const active = root.activeElement;
+    if (e.shiftKey) {
+      if (active === first || !root.contains(active)) { e.preventDefault(); last.focus(); }
+    } else {
+      if (active === last || !root.contains(active)) { e.preventDefault(); first.focus(); }
+    }
+  }
+
+  // --- show / hide ---
+
+  function show() {
+    if (!host) build();
+    visible = true;
+    lastFocused = (document.activeElement && document.activeElement !== document.body)
+      ? document.activeElement : null;
+    updateChipVisibility();
+    requestAnimationFrame(() => els.wrap.classList.add('show'));
+    setTimeout(() => els.input && els.input.focus(), 60);
+  }
+  function hide() {
+    if (!host) return;
+    visible = false;
+    els.wrap.classList.remove('show');
+    // Let content.js tear down transient state (cancel pick mode, drop the target).
+    if (handlers.onHide) { try { handlers.onHide(); } catch (_) {} }
+    // Restore focus to whatever the page had before we opened — never trap when idle.
+    const target = lastFocused;
+    lastFocused = null;
+    if (target && typeof target.focus === 'function' && document.contains(target)) {
+      try { target.focus(); } catch (_) {}
+    }
+  }
+  function toggle() { visible ? hide() : show(); }
+
+  function focusInput() { if (els && els.input) els.input.focus(); }
+
+  // Connector suggestion ("You're on Gmail — connect …"). info: {name, blurb, onConnect}.
+  function setConnector(info) {
+    if (!els || !info) return;
+    connectHandler = typeof info.onConnect === 'function' ? info.onConnect : null;
+    els.ctext.textContent = '';
+    const b = document.createElement('b');
+    b.textContent = info.name || 'this app';
+    els.ctext.appendChild(b);
+    els.ctext.appendChild(document.createTextNode(' — connect to ' + (info.blurb || 'pull real data') + '.'));
+    els.cbtn.textContent = info.cta || 'Connect';
+    els.connector.classList.add('show');
+  }
+  function hideConnector() { if (els) els.connector.classList.remove('show'); }
+  function setConnectorBusy(text) { if (els) els.ctext.textContent = text || 'Connecting…'; }
+
+  // Targeted-element indicator. info: { label, onClear }. Text is set via
+  // textContent (label may be page-authored), never innerHTML.
+  function setTarget(info) {
+    if (!els || !info) return;
+    targetClear = typeof info.onClear === 'function' ? info.onClear : null;
+    els.ttext.textContent = '';
+    els.ttext.appendChild(document.createTextNode('Targeting '));
+    const b = document.createElement('b');
+    b.textContent = info.label || 'element';
+    els.ttext.appendChild(b);
+    els.target.classList.add('show');
+    if (els.aim) els.aim.classList.add('on');
+  }
+  function clearTarget() {
+    if (!els) return;
+    els.target.classList.remove('show');
+    if (els.aim) els.aim.classList.remove('on');
+    targetClear = null;
+  }
+  function aimActive(on) { if (els && els.aim) els.aim.classList.toggle('on', !!on); }
+
+  window.Morph.bar = {
+    mount(h) { handlers = h || {}; if (!host) build(); },
+    show, hide, toggle,
+    setStatus, clearStatus, setBusy, showActions,
+    isVisible: () => visible,
+    clearInput: () => { if (els) { els.input.value = ''; updateChipVisibility(); } },
+    // Non-breaking additions:
+    focusInput,
+    setRecent: (list) => renderRecent(list),
+    setSuggestions,
+    setConnector, hideConnector, setConnectorBusy,
+    setTarget, clearTarget, aimActive,
+  };
+
+  // Expose pure helper for the optional test harness without coupling to chrome/DOM.
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { updateRecentList, updateRecentMap };
+  }
+})();
+
+
+/* ---- sdk/src/embed.js ---- */
+/*
+ * Morph SDK — embed entry. Wires the engine (MorphDSL), the vendor registry,
+ * the recipe store, and the prompt bar into the host page.
+ *
+ * createEmbed(deps) is pure wiring with every dependency injected (tests use
+ * it directly with a stubbed backend). The browser block at the bottom builds
+ * the real deps and exposes window.Morph.init(config) for vendors.
+ *
+ * Security invariants enforced here:
+ *  - only source ops that pass registry.validateDataOp survive to apply;
+ *  - rows are resolved by TRUSTED code (registry -> query engine) and the
+ *    vendor's records never leave the page (only manifests go to the backend);
+ *  - action buttons route through registry.invokeAction (schema + confirm).
+ */
+(function (global, factory) {
+  const api = factory();
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  else global.MorphEmbed = api;
+})(typeof self !== 'undefined' ? self : this, function () {
+  'use strict';
+
+  const DEFAULT_BACKEND = 'https://morph-api-234584917638.us-central1.run.app';
+
+  function createEmbed(deps) {
+    const config = (deps && deps.config) || {};
+    const win = deps.win;
+    const DSL = deps.DSL;
+    const registry = deps.registry;
+    const store = deps.store;
+    const bar = deps.bar;
+    const extractContext = deps.extractContext;
+    const fetchFn = deps.fetchFn;
+
+    let backend = DEFAULT_BACKEND;
+    let currentHandle = null;   // live undo handle for everything applied this session
+    let activeTransform = null; // merged transform applied this session
+
+    function pathKey() {
+      try { return win.location.pathname || '/'; } catch (_) { return '/'; }
+    }
+
+    function init() {
+      if (typeof config.key !== 'string' || !config.key) {
+        throw new TypeError('Morph: init requires a publishable key (config.key)');
+      }
+      backend = (typeof config.backend === 'string' && config.backend)
+        ? config.backend.replace(/\/$/, '') : DEFAULT_BACKEND;
+      bar.mount({ onSubmit, onUndo });
+      return api;
+    }
+
+    // Confirm gate for actions. window.confirm is trusted browser chrome the
+    // page can't spoof; a bar-styled dialog can replace it later.
+    function confirmFn(name, description) {
+      try {
+        return win.confirm('Morph: run action "' + name + '"?' + (description ? '\n' + description : ''));
+      } catch (_) { return false; }
+    }
+
+    function onAction(name, args) {
+      return registry.invokeAction(name, args, confirmFn).then(
+        () => { try { bar.setStatus('✓ Action "' + name + '" done.', 'ok'); } catch (_) { /* bar gone */ } },
+        (e) => {
+          const msg = String((e && e.message) || e);
+          try { bar.setStatus(/declined/.test(msg) ? 'Action cancelled.' : 'Action failed: ' + msg, /declined/.test(msg) ? '' : 'err'); } catch (_) { /* bar gone */ }
+        }
+      );
+    }
+
+    // Keep only source-form renderData ops the registry recognizes.
+    function dropUnknownSourceOps(transform) {
+      const ops = transform.ops.filter((op) => {
+        if (op.op !== 'renderData' || op.source === undefined) return true;
+        return registry.validateDataOp(op).ok;
+      });
+      return Object.assign({}, transform, { ops });
+    }
+
+    // Resolve rows for every (registry-valid) source op. Failures drop that op
+    // so one dead source never blocks the rest of the reshape.
+    async function resolveAllData(transform) {
+      const data = {};
+      const sourceOps = transform.ops.filter((op) => op.op === 'renderData' && op.source !== undefined);
+      const results = await Promise.allSettled(sourceOps.map(async (op) => {
+        data[op.source] = await registry.resolveData(op);
+      }));
+      const failedSources = new Set();
+      results.forEach((r, i) => { if (r.status === 'rejected') failedSources.add(sourceOps[i].source); });
+      const ops = transform.ops.filter((op) =>
+        !(op.op === 'renderData' && op.source !== undefined && failedSources.has(op.source) && !Array.isArray(data[op.source])));
+      return { transform: Object.assign({}, transform, { ops }), data, failedCount: failedSources.size };
+    }
+
+    async function applyMerged(incoming, data) {
+      // Stack on top of anything already applied this session (additive), so
+      // successive prompts accumulate instead of replacing each other.
+      const merged = activeTransform ? DSL.mergeTransforms(activeTransform, incoming) : incoming;
+      if (currentHandle) DSL.undoTransform(currentHandle);
+      const handle = DSL.applyTransform(merged, win.document, { groupId: 'morph-sdk', data, onAction });
+      currentHandle = handle;
+      activeTransform = merged;
+      return handle;
+    }
+
+    async function onSubmit(prompt) {
+      try { bar.setBusy(true); bar.showActions(false); } catch (_) { /* bar optional in tests */ }
+      let context = '';
+      try { context = extractContext() || ''; } catch (_) { /* snapshot is best-effort */ }
+
+      let resp;
+      try {
+        const body = { prompt, context, url: win.location.href };
+        if (registry.hasSources() || registry.hasActions()) body.manifests = registry.manifests();
+        const r = await fetchFn(backend + '/api/transform', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'X-Morph-Key': config.key },
+          body: JSON.stringify(body),
+        });
+        if (!r || !r.ok) {
+          const j = r && r.json ? await r.json().catch(() => null) : null;
+          throw new Error((j && j.error) || ('backend error ' + (r && r.status)));
+        }
+        resp = await r.json();
+      } catch (e) {
+        try { bar.setBusy(false); bar.setStatus('Could not reach Morph: ' + String((e && e.message) || e), 'err'); } catch (_) { /* noop */ }
+        return;
+      }
+
+      try {
+        const v = DSL.validateTransform(resp && resp.transform);
+        if (!v.ok) {
+          bar.setBusy(false);
+          bar.setStatus('Couldn’t make that change here — try rephrasing.', '');
+          return;
+        }
+        const gated = dropUnknownSourceOps(v.transform);
+        const { transform, data, failedCount } = await resolveAllData(gated);
+        if (!transform.ops.length) {
+          bar.setBusy(false);
+          bar.setStatus(failedCount ? 'Couldn’t load data for that widget.' : 'Couldn’t make that change here — try rephrasing.', failedCount ? 'err' : '');
+          return;
+        }
+        const handle = await applyMerged(transform, data);
+        bar.setBusy(false);
+        if (!handle || handle.applied === 0) {
+          bar.setStatus('Couldn’t make that change here — try rephrasing.', '');
+          return;
+        }
+        const anchored = DSL.withAnchors ? DSL.withAnchors(transform, win.document) : transform;
+        await store.appendTransform(pathKey(), anchored, { prompt }, DSL.mergeTransforms);
+        const note = handle.failed ? ' (' + handle.failed + ' op(s) skipped)' : '';
+        bar.setStatus('✓ ' + ((resp.transform && resp.transform.explanation) || 'Done.') + ' Saved for this page.' + note, 'ok');
+        bar.showActions(true);
+        try { bar.clearInput(); } catch (_) { /* noop */ }
+      } catch (e) {
+        try { bar.setBusy(false); bar.setStatus('Something went wrong applying that change.', 'err'); } catch (_) { /* noop */ }
+      }
+    }
+
+    async function onUndo() {
+      if (currentHandle) { DSL.undoTransform(currentHandle); currentHandle = null; }
+      activeTransform = null;
+      await store.removeRecipe(pathKey());
+      try { bar.setStatus('Reverted this page to its original look.', ''); bar.showActions(false); } catch (_) { /* noop */ }
+    }
+
+    // Reapply the saved recipe: CSS immediately (FOUC kill), the full
+    // transform (with fresh data) once the DOM is ready.
+    async function applySaved() {
+      const recipe = await store.loadRecipe(pathKey());
+      if (!recipe || recipe.enabled === false || !recipe.transform) return;
+      const v = DSL.validateTransform(recipe.transform);
+      if (!v.ok) return;
+
+      // 1) instant CSS so the page doesn't flash unstyled
+      const cssOnly = Object.assign({}, v.transform, { ops: v.transform.ops.filter((o) => o.op === 'injectCSS') });
+      let cssHandle = null;
+      if (cssOnly.ops.length) cssHandle = DSL.applyTransform(cssOnly, win.document, { groupId: 'morph-sdk-early' });
+
+      // 2) full transform with fresh data once the DOM is ready
+      const full = async () => {
+        const gated = dropUnknownSourceOps(v.transform);
+        const { transform, data } = await resolveAllData(gated);
+        if (cssHandle) { DSL.undoTransform(cssHandle); cssHandle = null; }
+        if (!transform.ops.length) return;
+        await applyMerged(transform, data);
+      };
+      if (win.document.readyState === 'loading') {
+        win.document.addEventListener('DOMContentLoaded', () => { full().catch(() => {}); }, { once: true });
+      } else {
+        await full();
+      }
+    }
+
+    const api = { init, onSubmit, onUndo, applySaved };
+    return api;
+  }
+
+  // ---- browser wiring (skipped under Node/tests) ----------------------------
+  if (typeof window !== 'undefined' && !(typeof module !== 'undefined' && module.exports)) {
+    window.Morph = window.Morph || {};
+    window.Morph.init = function (config) {
+      config = config || {};
+      const registry = window.MorphRegistry.createRegistry({ sources: config.sources, actions: config.actions });
+      const store = window.MorphStorage.createStore(config.storage);
+      // window.fetch exists in every real browser; the guard keeps init from
+      // throwing in DOM test environments without fetch.
+      const doFetch = typeof window.fetch === 'function'
+        ? window.fetch.bind(window)
+        : () => Promise.reject(new Error('Morph: fetch unavailable'));
+      const embed = createEmbed({
+        config, win: window, DSL: window.MorphDSL, registry, store,
+        bar: window.Morph.bar, extractContext: window.Morph.extractContext,
+        fetchFn: doFetch,
+      });
+      embed.init();
+      // Hotkey (default alt+m) + a programmatic opener for vendor-built buttons.
+      const trigger = typeof config.trigger === 'string' ? config.trigger.toLowerCase() : 'alt+m';
+      if (trigger !== 'none') {
+        const key = trigger.split('+').pop();
+        window.addEventListener('keydown', (e) => {
+          if (e.altKey && String(e.key).toLowerCase() === key) { e.preventDefault(); window.Morph.bar.toggle(); }
+        });
+      }
+      window.Morph.open = () => window.Morph.bar.show();
+      embed.applySaved().catch(() => {});
+      return embed;
+    };
+  }
+
+  return { createEmbed };
+});
+
+export function init(config) { return g.Morph.init(config); }
+export default { init };