cmdzero 0.8.5 → 0.9.1

package/overlay/overlay.js

@@ -97,11 +97,31 @@
   .cz-dot.done{background:#10b981}.cz-dot.queued,.cz-dot.running{background:#f59e0b;animation:cz-pulse 1s infinite}.cz-dot.error{background:#ef4444}.cz-dot.reverted,.cz-dot.cancelled{background:#6b7280}
   .cz-tweak button{background:none;border:none;color:#818cf8;cursor:pointer;font-size:12.5px;padding:0}
   .cz-meta{color:#9ca3af}
-  .cz-hint{position:fixed;left:14px;bottom:14px;background:#111827;color:#9ca3af;font-size:12.5px;padding:6px 11px;border-radius:6px;pointer-events:none}
+  /* The hint is visible in BOTH states (out of select mode it's the ⌘0
+     affordance) — .cz-in only rides the swap between the two texts. */
+  .cz-hint{position:fixed;left:14px;bottom:14px;background:#111827;color:#9ca3af;font-size:12.5px;padding:6px 11px;border-radius:6px;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
+  .cz-hint.cz-in{opacity:1;transform:translateY(0)}
   .cz-reload-toggle{position:fixed;left:14px;bottom:46px;background:#111827;color:#6ee7b7;border:1px solid #10b981;font-size:11.5px;padding:4px 9px;border-radius:6px;cursor:pointer;pointer-events:auto}
   .cz-reload-toggle.off{color:#9ca3af;border-color:#374151}
   [contenteditable="plaintext-only"],[contenteditable="true"]{outline:2px dashed #10b981;outline-offset:2px}
-  @keyframes cz-pulse{50%{opacity:.4}}`;
+  @keyframes cz-pulse{50%{opacity:.4}}
+  /* Arming select mode is otherwise a silent text swap. A one-shot sweep says
+     "we woke up"; the ring stays lit to say "we're still listening". Both are
+     opacity/transform only so they cost nothing next to watchLayout()'s polling.
+     The ring starts below the 30px banner rather than cutting across it. */
+  .cz-ring{position:fixed;top:30px;left:0;right:0;bottom:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 2px rgba(16,185,129,.55),inset 0 0 22px rgba(16,185,129,.14);transition:opacity .18s ease}
+  .cz-ring.cz-on{opacity:1;animation:cz-breathe 3s ease-in-out infinite}
+  .cz-shine{position:fixed;inset:0;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 40%,rgba(110,231,183,.18) 50%,transparent 60%)}
+  /* Near-linear on purpose: a fast-out curve spends most of the run parked off
+     the right edge, so the band only actually crosses the screen for a blink. */
+  .cz-shine.cz-sweep{animation:cz-sweep .55s cubic-bezier(.45,.05,.55,.95)}
+  @keyframes cz-breathe{50%{opacity:.55}}
+  @keyframes cz-sweep{0%{opacity:0;transform:translateX(-120%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(120%)}}
+  @media (prefers-reduced-motion:reduce){
+    .cz-ring.cz-on{animation:none}
+    .cz-shine.cz-sweep{animation:none}
+    .cz-hint{transition:none}
+  }`;
 
   const style = document.createElement('style');
   style.textContent = css;
@@ -502,7 +522,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 +1087,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 +1176,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();
@@ -1417,18 +1490,18 @@
       if (tries-- > 0 && Math.abs(scrollY - y) > 2) setTimeout(pin, 30);
       else { try { history.scrollRestoration = 'auto'; } catch { /* ignore */ } }
     })();
-    if (saved.selectMode) setMode(true);
+    if (saved.selectMode) setMode(true, false);
     if (saved.loc) {
       const again = document.querySelector(`[data-cz="${CSS.escape(saved.loc)}"]`);
       if (again) select(again);
     }
   }
-  if (document.readyState === 'complete') restoreAfterReload();
-  else addEventListener('load', restoreAfterReload);
 
   // ---------- mode + events ----------
-  const hint = el('div', 'cz-hint', '⌘0 select mode');
-  root.appendChild(hint);
+  const hint = el('div', 'cz-hint cz-in', '⌘0 select mode');
+  const ring = el('div', 'cz-ring');
+  const shine = el('div', 'cz-shine');
+  root.append(hint, ring, shine);
 
   const reloadToggle = el('button', 'cz-reload-toggle');
   const syncReloadToggle = () => {
@@ -1444,13 +1517,48 @@
   syncReloadToggle();
   root.appendChild(reloadToggle);
 
-  function setMode(on) {
+  // Restart the sweep even if it's mid-flight: drop the class, force a reflow,
+  // re-add it. Without the reflow the browser coalesces the two states and the
+  // animation never replays on a fast ⌘0 ⌘0 ⌘0.
+  function sweep() {
+    shine.classList.remove('cz-sweep');
+    void shine.offsetWidth;
+    shine.classList.add('cz-sweep');
+  }
+  shine.addEventListener('animationend', () => shine.classList.remove('cz-sweep'));
+
+  // Let the pill drop out before the words change, so the swap reads as one
+  // motion rather than a jump cut. Compare against the text we're heading for,
+  // not the one on screen: mid-swap those differ, and a fast ⌘0 ⌘0 would
+  // otherwise take the early return and leave the pill showing the wrong mode.
+  let hintTimer = null;
+  let hintText = hint.textContent;
+  function setHintText(text) {
+    if (hintText === text) return;
+    hintText = text;
+    clearTimeout(hintTimer);
+    hint.classList.remove('cz-in');
+    hintTimer = setTimeout(() => { hint.textContent = hintText; hint.classList.add('cz-in'); }, 140);
+  }
+
+  // `announce` plays the activation sweep. It's on for a real ⌘0 press and off
+  // when we're only restoring the mode after an auto-reload — the sweep should
+  // read as "you just armed this", not fire again on every write.
+  function setMode(on, announce = true) {
     state.selectMode = on;
-    hint.textContent = on ? 'select mode — click · shift-click multi · Tab next · ⌘Z undo · Esc exit' : '⌘0 select mode';
+    setHintText(on ? 'select mode — click · shift-click multi · Tab next · ⌘Z undo · Esc exit' : '⌘0 select mode');
+    ring.classList.toggle('cz-on', on);
+    if (on && announce) sweep();
     if (on) watchLayout(); // keep the boxes glued while anything on the page moves
     else { setHover(null); deselect(); clearMulti(); }
   }
 
+  // Run the restore only now: it calls setMode(), which touches the hint/ring/
+  // shine consts declared above. On a document that's already `complete` when
+  // the overlay is injected it would otherwise run during the temporal dead zone.
+  if (document.readyState === 'complete') restoreAfterReload();
+  else addEventListener('load', restoreAfterReload);
+
   // Visible, stamped elements in document order — the Tab cycle.
   function stampedEls() {
     return [...document.querySelectorAll('[data-cz]')].filter((n) => n.getClientRects().length);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmdzero",
-  "version": "0.8.5",
+  "version": "0.9.1",
   "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

@@ -64,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' &&
@@ -84,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') {