cmdzero 0.8.4 → 0.9.0

package/overlay/overlay.js

@@ -502,7 +502,7 @@
     const s = state.selected;
     if (!s) return;
     try {
-      const meta = await api('resolve', { loc: s.loc });
+      const meta = await api('resolve', { loc: s.loc, ancestors: ancestorStamps(s.el) });
       if (state.selected !== s) return; // selection changed meanwhile
       s.meta = meta;
       renderPopover();
@@ -1067,33 +1067,75 @@
   // literal we can edit in place (headings, buttons, links, paragraphs — not
   // containers, and not text shared across multiple instances).
   function canEditWholeText(s) {
-    const lits = s?.meta?.texts;
+    if (!s || !document.contains(s.el)) return false;
+    // Text traced to a call site's prop: the ancestors already picked out which
+    // usage this is, so several instances of the shared component are fine —
+    // the edit lands on this one's data, not on the component they share.
+    const src = s.meta?.textSource;
+    if (src) return !!textHost(s.el, src);
+    const lits = s.meta?.texts;
     if (!lits || lits.length !== 1 || s.instances > 1) return false;
-    return document.contains(s.el) && lits[0].value.trim() === s.el.textContent.trim();
+    return normText(lits[0].value) === normText(s.el.textContent);
+  }
+
+  // Rendered text and source text never match byte for byte: HTML collapses
+  // runs of whitespace, JSX literals wrap across lines, and a word-splitting
+  // animation may join with non-breaking spaces the source spells as plain ones.
+  // Compare what a reader sees, not what the file holds.
+  const normText = (s) => (s || '').replace(/\s+/g, ' ').trim();
+
+  // The element that displays the whole traced string. A reveal animation
+  // renders a span per word, so the span you clicked holds "something." while
+  // the sentence lives a level or two up — that ancestor is what gets edited.
+  function textHost(el, src) {
+    const want = normText(src.value);
+    if (!src.wholeText) return normText(el.textContent) === want ? el : null;
+    for (let p = el; p; p = p.parentElement) {
+      if (normText(p.textContent) === want) return p;
+    }
+    return null;
+  }
+
+  // The stamps above this element, nearest first. The daemon needs them to tell
+  // which call site rendered a shared component's markup.
+  function ancestorStamps(el) {
+    const out = [];
+    for (let p = el?.parentElement; p; p = p.parentElement) {
+      const cz = p.getAttribute('data-cz');
+      if (cz) out.push(cz);
+    }
+    return out;
   }
 
   function startTextEdit(selectAll = true) {
     const s = state.selected;
     // the popover can outlive its selection (HMR, reloads) — never throw
-    const literal = s?.meta?.texts?.[0]?.value;
-    if (literal == null || !document.contains(s.el)) return;
-    if (state.editing && state.editing.el === s.el) return; // already editing this one
+    const source = s?.meta?.textSource || null;
+    const literal = source ? source.value : s?.meta?.texts?.[0]?.value;
+    if (literal == null || !s || !document.contains(s.el)) return;
+    // For traced text the element holding the sentence may be an ancestor of the
+    // one clicked — edit that, or a reveal's per-word spans would each try to
+    // hold the whole heading.
+    const host = source ? textHost(s.el, source) : s.el;
+    if (!host) return;
+    if (state.editing && state.editing.el === host) return; // already editing this one
     const frag = document.createDocumentFragment();
-    while (s.el.firstChild) frag.appendChild(s.el.firstChild);
+    while (host.firstChild) frag.appendChild(host.firstChild);
     state.editing = {
-      el: s.el,
+      el: host,
       loc: s.loc,
+      source, // set when the text lives in a call site's prop rather than here
       literal,
       frag,
-      prevUserSelect: s.el.style.userSelect,
+      prevUserSelect: host.style.userSelect,
     };
-    s.el.textContent = literal;
-    s.el.style.userSelect = 'text'; // buttons often have user-select: none
-    try { s.el.contentEditable = 'plaintext-only'; } catch { s.el.contentEditable = 'true'; }
-    s.el.focus({ preventScroll: true });
+    host.textContent = literal;
+    host.style.userSelect = 'text'; // buttons often have user-select: none
+    try { host.contentEditable = 'plaintext-only'; } catch { host.contentEditable = 'true'; }
+    host.focus({ preventScroll: true });
     const sel = document.getSelection();
-    if (selectAll) sel?.selectAllChildren(s.el);
-    else { const rng = document.createRange(); rng.selectNodeContents(s.el); rng.collapse(false); sel?.removeAllRanges(); sel?.addRange(rng); }
+    if (selectAll) sel?.selectAllChildren(host);
+    else { const rng = document.createRange(); rng.selectNodeContents(host); rng.collapse(false); sel?.removeAllRanges(); sel?.addRange(rng); }
     hint.textContent = 'editing text — type to change · ⌘0 or click another element saves · Esc cancels';
   }
 
@@ -1114,7 +1156,18 @@
       return;
     }
     try {
-      await api('edit-text', { loc: ed.loc, oldText: ed.literal, newText });
+      if (ed.source) {
+        // The string belongs to this call site, not to the component whose
+        // markup we clicked — writing there would retitle every usage at once.
+        await api('edit-prop', {
+          loc: ed.source.loc,
+          prop: ed.source.prop,
+          oldText: ed.literal,
+          newText,
+        });
+      } else {
+        await api('edit-text', { loc: ed.loc, oldText: ed.literal, newText });
+      }
       // keep the new text; HMR re-renders the component (animations included)
     } catch (e) {
       restore();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmdzero",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "Tweak your UI live in the browser and write the changes straight to source. Copy and Tailwind edits cost zero tokens; everything else routes to a right-sized model via headless claude.",
   "license": "MIT",
   "type": "module",

package/src/resolver.js

@@ -18,25 +18,32 @@ function walk(node, cb) {
   }
 }
 
-/** loc format: "<relative file>:<line 1-based>:<col 0-based>" (matches the babel stamp) */
+/**
+ * loc format: "<file>:<line 1-based>:<col 0-based>" (matches the babel stamp).
+ *
+ * The file arrives in one of three shapes, depending on who stamped it: the
+ * babel plugin emits a root-relative path, and the @cmdzero/react dev runtime
+ * passes on whatever the bundler handed jsxDEV — absolute under webpack, but
+ * "[project]/components/Foo.tsx" under Turbopack. Normalize that prefix away
+ * here, at the boundary every caller shares: /api/nl parses locs itself and
+ * resolves them straight against the root, so normalizing further in (say, in
+ * loadTarget) leaves that lane reaching for <root>/[project]/... and dying on
+ * ENOENT while the copy and style lanes look fine.
+ */
 export function parseLoc(loc) {
   const m = /^(.*):(\d+):(\d+)$/.exec(loc);
   if (!m) throw new Error(`bad loc: ${loc}`);
-  return { file: m[1], line: Number(m[2]), col: Number(m[3]) };
+  return { file: m[1].replace(/^\[project\]\//, ''), line: Number(m[2]), col: Number(m[3]) };
 }
 
 export function loadTarget(root, loc) {
   const parsed = parseLoc(loc);
   const { line, col } = parsed;
-  // Stamps come from three sources: the babel plugin (root-relative path,
-  // 0-based column) and the @cmdzero/react dev runtime (1-based column), which
-  // reports whatever the bundler handed jsxDEV — an absolute path under
-  // webpack, but "[project]/..." under Turbopack. Normalize the path and match
-  // either column convention.
-  const raw = parsed.file.replace(/^\[project\]\//, '');
-  // Resolve before the escape check: the guard has to see a normalized path,
-  // or a "foo/../../.." stamp walks straight past a leading-".." test.
-  const file = path.relative(root, path.resolve(root, raw));
+  // parseLoc has already normalized the path's shape; columns still come in two
+  // conventions (babel 0-based, the dev runtime 1-based) and are matched below.
+  // Resolve before the escape check: the guard has to see a normalized path, or
+  // a "foo/../../.." stamp walks straight past a leading-".." test.
+  const file = path.relative(root, path.resolve(root, parsed.file));
   if (file.startsWith('..') || path.isAbsolute(file)) {
     throw new Error('file outside root');
   }
@@ -57,12 +64,192 @@ export function loadTarget(root, loc) {
   return { file, abs, content, element, ast };
 }
 
-export function describeTarget(root, loc) {
-  const { file, content, element } = loadTarget(root, loc);
+/** The nearest enclosing function whose name looks like a component. */
+function enclosingComponent(ast, chain) {
+  for (const node of chain) {
+    if (!FN_TYPES.has(node.type)) continue;
+    const name = nameOfFunction(ast, node);
+    if (name && /^[A-Z]/.test(name)) return { fn: node, name };
+  }
+  return null;
+}
+
+/** Is `name` destructured out of the component's props? ({ text, as }) => ... */
+function isDestructuredProp(fn, name) {
+  const param = fn?.params?.[0];
+  if (param?.type !== 'ObjectPattern') return false;
+  return param.properties.some(
+    (p) => p.type === 'ObjectProperty' && p.key?.type === 'Identifier' && p.key.name === name
+  );
+}
+
+/** The `{ident}` an element renders as its only child, if that's its shape. */
+function soleExpressionIdentifier(element) {
+  const meaningful = element.children.filter(
+    (c) => !(c.type === 'JSXText' && !c.value.trim())
+  );
+  if (meaningful.length !== 1) return null;
+  const only = meaningful[0];
+  if (only.type !== 'JSXExpressionContainer') return null;
+  const expr = unwrapExpr(only.expression);
+  return expr?.type === 'Identifier' ? expr.name : null;
+}
+
+function usageLoc(usage) {
+  const s = usage.element.openingElement.loc.start;
+  return `${usage.file}:${s.line}:${s.column}`;
+}
+
+/** `words.map(cb)` → "words" */
+function mapCallArrayName(node) {
+  const call = unwrapExpr(node);
+  if (call?.type !== 'CallExpression') return null;
+  const callee = call.callee;
+  if (
+    callee?.type !== 'MemberExpression' ||
+    callee.property?.type !== 'Identifier' ||
+    !['map', 'flatMap'].includes(callee.property.name) ||
+    callee.object?.type !== 'Identifier'
+  ) return null;
+  return callee.object.name;
+}
+
+/** `const words = text.split(" ")` → "text" */
+function splitSourceOf(ast, arrName) {
+  let prop = null;
+  walk(ast, (n) => {
+    if (prop) return;
+    if (n.type !== 'VariableDeclarator' || n.id?.type !== 'Identifier' || n.id.name !== arrName) return;
+    const init = unwrapExpr(n.init);
+    if (
+      init?.type === 'CallExpression' &&
+      init.callee?.type === 'MemberExpression' &&
+      init.callee.property?.type === 'Identifier' &&
+      init.callee.property.name === 'split' &&
+      init.callee.object?.type === 'Identifier'
+    ) prop = init.callee.object.name;
+  });
+  return prop;
+}
+
+/**
+ * Text reached one hop indirectly: a reveal animation splits a prop into a span
+ * per word, so the span you can actually click renders {word}, not {text}. The
+ * word isn't addressable in the source — the sentence is — so the editable unit
+ * is the whole prop either way.
+ *
+ * Covers the wrapper that renders {words.map(...)} and any element sitting
+ * inside the map callback.
+ */
+function splitMappedProp(ast, chain, element) {
+  const meaningful = element.children.filter((c) => !(c.type === 'JSXText' && !c.value.trim()));
+  if (meaningful.length === 1 && meaningful[0].type === 'JSXExpressionContainer') {
+    const arrName = mapCallArrayName(meaningful[0].expression);
+    if (arrName) {
+      const prop = splitSourceOf(ast, arrName);
+      if (prop) return prop;
+    }
+  }
+  for (const node of chain) {
+    const arrName = mapCallArrayName(node);
+    if (!arrName) continue;
+    const prop = splitSourceOf(ast, arrName);
+    if (prop) return prop;
+  }
+  return null;
+}
+
+/**
+ * Text is data: `<RevealWords text="..."/>` renders {text} inside a span that
+ * lives in Reveal.tsx, so every heading stamps as that same span. Editing there
+ * rewrites the shared component and changes the copy under every call site at
+ * once — the string belongs to the call site's prop.
+ *
+ * The stamp can't say which call site rendered this element, so the overlay
+ * sends the clicked node's ancestor stamps. The nearest one from another file is
+ * the call site; look the component up there. Two usages in that file and we
+ * genuinely cannot tell which heading was clicked, so say so rather than rewrite
+ * the wrong one.
+ */
+function traceTextProp(root, { file, ast, chain, element }, ancestors = []) {
+  const component = enclosingComponent(ast, chain);
+  if (!component) return { source: null, note: null };
+
+  // {text} straight from the prop, or {word} one hop through split/map — the
+  // latter can only be rewritten a sentence at a time.
+  let propName = null;
+  let wholeText = false;
+  const direct = soleExpressionIdentifier(element);
+  if (direct && isDestructuredProp(component.fn, direct)) {
+    propName = direct;
+  } else {
+    const mapped = splitMappedProp(ast, chain, element);
+    if (mapped && isDestructuredProp(component.fn, mapped)) {
+      propName = mapped;
+      wholeText = true;
+    }
+  }
+  if (!propName) return { source: null, note: null };
+
+  // Nearest ancestor first; the element's own file is the component, not a call site.
+  const seen = new Set();
+  for (const stamp of ancestors) {
+    let candidate;
+    try { candidate = parseLoc(stamp).file; } catch { continue; }
+    candidate = path.isAbsolute(candidate) ? path.relative(root, candidate) : candidate;
+    if (candidate === file || seen.has(candidate)) continue;
+    seen.add(candidate);
+
+    const here = findUsages(root, component.name).filter((u) => u.file === candidate);
+    if (here.length === 0) continue;
+    if (here.length > 1) {
+      return {
+        source: null,
+        note: `this text comes from <${component.name}>'s ${propName} prop, but ${candidate} has ${here.length} usages — I can't tell which one you clicked. Select the heading itself, or describe the change.`,
+      };
+    }
+
+    const attr = here[0].element.openingElement.attributes.find(
+      (a) =>
+        a.type === 'JSXAttribute' &&
+        a.name.name === propName &&
+        a.value?.type === 'StringLiteral'
+    );
+    if (!attr) {
+      return {
+        source: null,
+        note: `<${component.name}> in ${candidate} passes ${propName} as an expression, not a plain string, so there's no literal to edit here.`,
+      };
+    }
+    return {
+      source: {
+        file: candidate,
+        loc: usageLoc(here[0]),
+        component: component.name,
+        prop: propName,
+        value: attr.value.value,
+        // The clicked element shows a slice of this string (one word of a
+        // reveal), so the edit replaces the whole sentence. The overlay uses
+        // this to edit the element that actually holds all of it.
+        wholeText,
+      },
+      note: null,
+    };
+  }
+  return { source: null, note: null };
+}
+
+export function describeTarget(root, loc, { ancestors = [] } = {}) {
+  const { file, content, element, ast } = loadTarget(root, loc);
   const opening = element.openingElement;
   const texts = element.children
     .filter((c) => c.type === 'JSXText' && c.value.trim())
     .map((c) => ({ value: c.value.trim(), start: c.start, end: c.end }));
+
+  // Only trace when there's no literal of our own to edit.
+  const traced = texts.length === 0
+    ? traceTextProp(root, { file, ast, chain: ancestorChain(ast, element), element }, ancestors)
+    : { source: null, note: null };
   const classAttr = opening.attributes.find(
     (a) =>
       a.type === 'JSXAttribute' &&
@@ -77,10 +264,36 @@ export function describeTarget(root, loc) {
     lines: { start: element.loc.start.line, end: element.loc.end.line },
     snippet: content.slice(element.start, element.end),
     texts,
+    // Where this element's text really lives, when it renders a prop rather than
+    // a literal of its own. Null when it has its own text, or when the call site
+    // can't be pinned down (textSourceNote says why).
+    textSource: traced.source,
+    textSourceNote: traced.note,
     className: classAttr ? classAttr.value.value : null,
   };
 }
 
+/**
+ * Rewrite a string prop at a call site: `<RevealWords text="old"/>` → "new".
+ * This is the write half of traceTextProp — the edit lands on the call site's
+ * data, so sibling usages of the same component keep their own copy.
+ */
+export function applyPropTextEdit(root, loc, prop, oldText, newText) {
+  const { abs, content, element } = loadTarget(root, loc);
+  const attr = element.openingElement.attributes.find(
+    (a) => a.type === 'JSXAttribute' && a.name.name === prop && a.value?.type === 'StringLiteral'
+  );
+  if (!attr) throw new Error(`no string ${prop} prop to edit at ${loc}`);
+  if (oldText != null && attr.value.value !== oldText) {
+    throw new Error(`${prop} has changed since it was read — reload and try again`);
+  }
+  // A JSX attribute string is not a JS string: backslash escapes don't apply,
+  // entities do. Escape the two characters that would end or reopen it.
+  const escaped = newText.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+  const next = content.slice(0, attr.value.start) + `"${escaped}"` + content.slice(attr.value.end);
+  return writeChecked(abs, content, next);
+}
+
 export function applyTextEdit(root, loc, oldText, newText) {
   const { abs, content, element } = loadTarget(root, loc);
   const node = element.children.find(

package/src/server.js

@@ -2,7 +2,7 @@ import http from 'node:http';
 import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { describeTarget, applyTextEdit, applyClassEdit, applyStyleEdit, applyDeleteElement, applyMove, parseLoc, checkSyntax } from './resolver.js';
+import { describeTarget, applyTextEdit, applyPropTextEdit, applyClassEdit, applyStyleEdit, applyDeleteElement, applyMove, parseLoc, checkSyntax } from './resolver.js';
 import { classify, buildPrompt, runClaude, runDeploy } from './router.js';
 import { initTelemetry, DISCLOSURE } from './telemetry.js';
 
@@ -126,7 +126,18 @@ export function startServer({ root, port = 4100, heartbeatMs = 15000 }) {
         const body = await readJson(req);
 
         if (url.pathname === '/api/resolve') {
-          return json(res, describeTarget(root, body.loc));
+          // ancestors let the daemon tell two call sites of the same component
+          // apart — without them, every <RevealWords> heading looks identical.
+          return json(res, describeTarget(root, body.loc, { ancestors: body.ancestors || [] }));
+        }
+
+        if (url.pathname === '/api/edit-prop') {
+          const id = nextId++;
+          const write = applyPropTextEdit(root, body.loc, body.prop, body.oldText, body.newText);
+          remember(id, write);
+          telemetry.record('copy');
+          broadcast({ type: 'tweak', id, kind: 'copy', status: 'done', tokens: 0, label: `copy: "${body.newText.slice(0, 40)}"`, ...recordSavings(0, 50) });
+          return json(res, { ok: true, id });
         }
 
         if (url.pathname === '/api/edit-text') {