tweaklocal 0.3.1 → 0.3.4

package/overlay/overlay.js

@@ -16,6 +16,12 @@
   #twk-root{position:fixed;inset:0;pointer-events:none;z-index:2147483000;font-family:ui-sans-serif,system-ui,sans-serif}
   .twk-outline{position:fixed;border:1.5px solid #6366f1;border-radius:3px;background:rgba(99,102,241,.08);pointer-events:none;transition:all .04s linear}
   .twk-outline.twk-selected{border-color:#10b981;background:rgba(16,185,129,.06)}
+  .twk-multi{position:fixed;border:1.5px solid #f59e0b;border-radius:3px;background:rgba(245,158,11,.10);pointer-events:none}
+  .twk-multibar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:#111827;color:#f9fafb;border:1.5px solid #f59e0b;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.4);padding:8px;pointer-events:auto;display:flex;gap:6px;align-items:center;font-size:12px;z-index:2147483001}
+  .twk-multibar input{background:#1f2937;border:1px solid #374151;border-radius:6px;color:#f9fafb;padding:5px 8px;font-size:12px;outline:none;width:220px}
+  .twk-multibar button{background:#374151;color:#f9fafb;border:none;border-radius:6px;padding:4px 9px;font-size:12px;cursor:pointer}
+  .twk-multibar button.twk-danger{background:#dc2626}
+  .twk-multibar .twk-count{color:#fbbf24;font-weight:700}
   .twk-badge{position:fixed;background:#312e81;color:#e0e7ff;font-size:11px;padding:2px 7px;border-radius:4px;pointer-events:none;white-space:nowrap;transform:translateY(-100%)}
   .twk-pop-label{position:fixed;background:#10b981;color:#052e1b;font-size:13.8px;font-weight:700;padding:3px 10px;border-radius:8px 8px 0 0;pointer-events:none;white-space:nowrap;transform:translate(-50%,-100%);text-align:center}
   .twk-delete-btn{position:fixed;width:22px;height:22px;border-radius:50%;background:#dc2626;color:#fff;border:none;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.4)}
@@ -29,6 +35,8 @@
   .twk-pop input{flex:1;background:#1f2937;border:1px solid #374151;border-radius:6px;color:#f9fafb;padding:5px 8px;font-size:12px;outline:none}
   .twk-pop select{background:#1f2937;border:1px solid #374151;border-radius:6px;color:#f9fafb;padding:3px 4px;font-size:11.5px;outline:none}
   .twk-label{color:#9ca3af;min-width:50px}
+  .twk-note{color:#fbbf24;font-size:11px;line-height:1.35;background:rgba(245,158,11,.1);border-radius:6px;padding:4px 7px}
+  .twk-note.twk-info{color:#93c5fd;background:rgba(59,130,246,.12)}
   .twk-cur{color:#6ee7b7;font-size:11px;margin-left:auto}
   .twk-swatches{display:flex;gap:4px;flex-wrap:wrap;max-height:96px;overflow-y:auto;padding:2px}
   .twk-swatch{width:18px;height:18px;border-radius:4px;border:1px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
@@ -61,8 +69,13 @@
     selected: null, // { el, loc }
     editing: null, // { el, original }
     tailwind: true, // daemon reports whether the app uses Tailwind
+    model: 'auto', // NL model override; 'auto' = router picks
+    multi: [], // [{ el, loc }] shift-click multi-selection
   };
 
+  // Stack of undoable tweak ids (LIFO) for ⌘Z / Ctrl-Z global undo.
+  const undoStack = [];
+
   // ---------- helpers ----------
   const el = (tag, cls, text) => {
     const n = document.createElement(tag);
@@ -192,36 +205,48 @@
   deleteBtn.style.display = 'none';
   deleteBtn.title = 'Delete element';
   root.appendChild(deleteBtn);
+  // All instances of a mapped template share one source stamp; the DOM position
+  // of a given instance tells the daemon WHICH data item it is (list items
+  // render in array order).
+  function instanceIndex(elm, loc) {
+    const instances = [...document.querySelectorAll(`[data-twk="${CSS.escape(loc)}"]`)];
+    const i = instances.indexOf(elm);
+    return i >= 0 ? i : undefined;
+  }
+
+  async function deleteOne({ el: elm, loc }) {
+    const payload = { loc, index: instanceIndex(elm, loc) };
+    // Dry-run first so a refusal never flickers the element.
+    await api('delete', { ...payload, dryRun: true });
+    if (document.contains(elm)) elm.style.display = 'none'; // optimistic; HMR makes it real
+    await api('delete', payload);
+  }
+
   deleteBtn.onclick = async (e) => {
     e.preventDefault();
     e.stopPropagation();
     const sel = state.selected;
     if (!sel || !document.contains(sel.el)) return;
-    // Check first so a refusal never flickers the element or loses the
-    // selection — only hide optimistically once we know it'll succeed.
     deleteBtn.disabled = true;
     try {
-      await api('delete', { loc: sel.loc, dryRun: true });
+      await deleteOne(sel);
     } catch (err) {
+      if (document.contains(sel.el)) sel.el.style.display = '';
       deleteBtn.disabled = false;
-      addTweak({ id: 'x' + Date.now(), status: 'error', label: err.message.slice(0, 140) });
+      addTweak({ id: 'x' + Date.now(), status: 'error', label: `delete: ${err.message.slice(0, 140)}` });
       return;
     }
     deleteBtn.disabled = false;
-    sel.el.style.display = 'none'; // optimistic; HMR makes it real
     deselect();
-    try {
-      await api('delete', { loc: sel.loc });
-    } catch (err) {
-      sel.el.style.display = '';
-      addTweak({ id: 'x' + Date.now(), status: 'error', label: `delete: ${err.message}` });
-    }
   };
 
   function select(target) {
     finishTextEdit(false);
     const loc = target.getAttribute('data-twk');
-    state.selected = { el: target, loc, meta: null };
+    // How many rendered elements map to this same source line — i.e. how many
+    // instances a shared-source edit (style/functionality) will change.
+    const instances = document.querySelectorAll(`[data-twk="${CSS.escape(loc)}"]`).length;
+    state.selected = { el: target, loc, meta: null, instances };
     selBox.style.display = 'block';
     renderPopover();
     reposition();
@@ -252,6 +277,97 @@
     deleteBtn.style.display = 'none';
   }
 
+  // ---------- multi-select (shift-click) ----------
+  const multiBoxes = []; // pooled outline divs
+  const multiBar = el('div', 'twk-multibar');
+  multiBar.style.display = 'none';
+  root.appendChild(multiBar);
+
+  function toggleMulti(target) {
+    const loc = target.getAttribute('data-twk');
+    const i = state.multi.findIndex((m) => m.el === target);
+    if (i >= 0) state.multi.splice(i, 1);
+    else {
+      // leaving single-selection mode: fold the current single selection in too
+      if (state.selected && !state.multi.some((m) => m.el === state.selected.el)) {
+        state.multi.push({ el: state.selected.el, loc: state.selected.loc });
+      }
+      if (!state.multi.some((m) => m.el === target)) state.multi.push({ el: target, loc });
+      deselect();
+    }
+    renderMulti();
+  }
+
+  function clearMulti() {
+    state.multi = [];
+    renderMulti();
+  }
+
+  function positionMulti() {
+    state.multi.forEach((m, i) => {
+      if (!multiBoxes[i]) { multiBoxes[i] = el('div', 'twk-multi'); root.appendChild(multiBoxes[i]); }
+      const box = multiBoxes[i];
+      if (!document.contains(m.el)) { box.style.display = 'none'; return; }
+      box.style.display = 'block';
+      positionBox(box, m.el);
+    });
+    for (let i = state.multi.length; i < multiBoxes.length; i++) multiBoxes[i].style.display = 'none';
+  }
+
+  let multiInput;
+  function renderMulti() {
+    positionMulti();
+    if (!state.multi.length) { multiBar.style.display = 'none'; return; }
+    multiBar.style.display = 'flex';
+    multiBar.textContent = '';
+    multiBar.append(el('span', 'twk-count', String(state.multi.length)));
+    multiBar.append(el('span', null, 'selected'));
+    multiInput = el('input');
+    multiInput.placeholder = 'Describe a change for all…';
+    multiInput.value = multiBar._draft || '';
+    multiInput.oninput = () => { multiBar._draft = multiInput.value; };
+    multiInput.onkeydown = (e) => { if (e.key === 'Enter') applyMultiNL(); e.stopPropagation(); };
+    const apply = el('button', 'twk-primary', 'Apply');
+    apply.onclick = applyMultiNL;
+    const del = el('button', 'twk-danger', 'Delete all');
+    del.onclick = deleteMulti;
+    const clear = el('button', null, 'Clear');
+    clear.onclick = clearMulti;
+    multiBar.append(multiInput, apply, del, clear);
+  }
+
+  async function applyMultiNL() {
+    const instruction = (multiInput?.value || '').trim();
+    if (!instruction) return;
+    const targets = state.multi.slice();
+    multiBar._draft = '';
+    clearMulti();
+    for (const t of targets) {
+      try {
+        const r = await api('nl', { loc: t.loc, instruction, model: state.model });
+        addTweak({ id: r.id, status: 'queued', model: r.model, label: `${shortLoc(t.loc)}: ${instruction.slice(0, 40)}` });
+      } catch (e) {
+        addTweak({ id: 'x' + Date.now() + t.loc, status: 'error', label: `${shortLoc(t.loc)}: ${e.message}` });
+      }
+    }
+  }
+
+  async function deleteMulti() {
+    const targets = state.multi.slice();
+    clearMulti();
+    // Delete bottom-up so a mapped-list removal doesn't shift the index of a
+    // not-yet-deleted sibling in the same list.
+    targets.sort((a, b) => (instanceIndex(b.el, b.loc) ?? 0) - (instanceIndex(a.el, a.loc) ?? 0));
+    for (const t of targets) {
+      try {
+        await deleteOne(t);
+      } catch (e) {
+        if (document.contains(t.el)) t.el.style.display = '';
+        addTweak({ id: 'x' + Date.now() + t.loc, status: 'error', label: `delete ${shortLoc(t.loc)}: ${e.message}` });
+      }
+    }
+  }
+
   function reposition() {
     const s = state.selected;
     if (!s) return;
@@ -268,7 +384,7 @@
     const left = Math.min(Math.max(r.left, 8), innerWidth - 356);
     Object.assign(pop.style, { left: left + 'px', top: Math.max(top, 8 + labelH) + 'px' });
     popLabel.style.display = 'block';
-    popLabel.textContent = shortLoc(s.loc);
+    popLabel.textContent = s.instances > 1 ? `${shortLoc(s.loc)} · ${s.instances}×` : shortLoc(s.loc);
     Object.assign(popLabel.style, { left: (left + pop.offsetWidth / 2) + 'px', top: pop.style.top });
     deleteBtn.style.display = 'flex';
     const inset = 4;
@@ -322,12 +438,25 @@
   function fontStep(target, dir) {
     const scale = readTheme().textSizes;
     const classes = classList(target);
+    // An arbitrary size like `text-[34px]` also sets font-size and would
+    // override the scale class we add — remove it too, and seed the step from
+    // the element's rendered px so the first bump goes the right direction.
+    const arbitrary = classes.filter((c) => /^text-\[[^\]]+\]$/.test(c));
     const cur = classes.find((c) => scale.includes(c));
-    let idx = cur ? scale.indexOf(cur) : scale.indexOf('text-base');
+    let idx;
+    if (cur) idx = scale.indexOf(cur);
+    else {
+      const px = parseFloat(getComputedStyle(target).fontSize) || 16;
+      // nearest scale entry by rendered size, else middle
+      idx = scale.indexOf('text-base');
+      if (idx < 0) idx = Math.floor(scale.length / 2);
+    }
     if (idx < 0) idx = Math.floor(scale.length / 2);
     const next = Math.min(Math.max(idx + dir, 0), scale.length - 1);
-    if (scale[next] === cur) return null;
-    return { remove: cur ? [cur] : [], add: [scale[next]] };
+    const add = scale[next];
+    const remove = [...(cur ? [cur] : []), ...arbitrary];
+    if (add === cur && !arbitrary.length) return null;
+    return { remove, add: [add] };
   }
 
   // Property editor: which classes to strip when setting each property.
@@ -481,11 +610,24 @@
 
     // location now lives in the green tab above the panel (popLabel)
 
+    // Reused component: this source line renders in >1 place, so style and
+    // functionality edits (which change the shared source) apply everywhere.
+    // Copy is the exception — it must stay on this one instance (below).
+    const shared = s.instances > 1;
+    if (shared) {
+      pop.appendChild(el('div', 'twk-note twk-info', `Reused component — ${s.instances} instances. Style & functionality changes apply to all of them.`));
+    }
+
     // Copy lane, driven by the SOURCE text literals (s.meta.texts), not the
     // DOM: animation libs split text into spans and expressions render as
     // text, so DOM shape says nothing about what's editable in the JSX.
     const literals = s.meta ? s.meta.texts : null;
-    if (literals && literals.length) {
+    if (shared && literals && literals.length) {
+      // The text literal is shared by every instance, so editing it here would
+      // change all of them — which is not what a copy edit should do. Keep copy
+      // local: block the in-place edit and point to the per-instance route.
+      pop.appendChild(el('div', 'twk-note', 'Copy here is shared across all instances — editing it would change every one. To change just this instance, make its text a prop/data value (describe it below and it\'ll route through the model).'));
+    } else if (literals && literals.length) {
       // In-place editing only when the single literal IS the element's whole
       // text (animation-split DOM still qualifies — same text, different
       // nodes). Partial literals (mixed with {expressions}) get input fields
@@ -608,14 +750,14 @@
 
     const nlRow = el('div', 'twk-row');
     const input = el('input');
-    input.placeholder = 'Describe a change… (routed to the right model)';
+    input.placeholder = 'Describe a change…';
     const go = el('button', 'twk-primary', 'Go');
     const send = async () => {
       const instruction = input.value.trim();
       if (!instruction) return;
       input.value = '';
       try {
-        const r = await api('nl', { loc: s.loc, instruction });
+        const r = await api('nl', { loc: s.loc, instruction, model: state.model });
         addTweak({ id: r.id, status: 'queued', model: r.model, label: instruction.slice(0, 60) });
       } catch (e) {
         addTweak({ id: 'x' + Date.now(), status: 'error', label: e.message });
@@ -625,6 +767,20 @@
     input.onkeydown = (e) => { if (e.key === 'Enter') send(); e.stopPropagation(); };
     nlRow.append(input, go);
     pop.appendChild(nlRow);
+
+    // Model picker: Auto (router) or a forced tier.
+    const modelRow = el('div', 'twk-row');
+    modelRow.append(el('span', 'twk-label', 'Model'));
+    const modelSel = el('select');
+    for (const [label, value] of [['Auto (routed)', 'auto'], ['Sonnet', 'claude-sonnet-5'], ['Opus', 'claude-opus-4-8'], ['Fable', 'claude-fable-5']]) {
+      const o = el('option', null, label);
+      o.value = value;
+      if (value === state.model) o.selected = true;
+      modelSel.appendChild(o);
+    }
+    modelSel.onchange = () => { state.model = modelSel.value; };
+    modelRow.append(modelSel);
+    pop.appendChild(modelRow);
     // delete lives as a floating icon on the element itself (deleteBtn)
   }
 
@@ -733,7 +889,14 @@
       row._dot.className = 'twk-dot ' + t.status;
       const inFlight = t.status === 'queued' || t.status === 'running';
       row._cancel.style.display = inFlight ? '' : 'none';
-      row._undo.style.display = t.status === 'done' && !String(t.id).startsWith('x') ? '' : 'none';
+      const undoable = t.status === 'done' && !String(t.id).startsWith('x');
+      row._undo.style.display = undoable ? '' : 'none';
+      const key = String(t.id);
+      if (undoable && !undoStack.includes(key)) undoStack.push(key);
+      if (t.status === 'reverted') {
+        const i = undoStack.indexOf(key);
+        if (i >= 0) undoStack.splice(i, 1);
+      }
     }
     const bits = [];
     if (t.model) bits.push(t.model.replace(/^claude-/, '') + (t.effort ? ` @ ${t.effort}` : ''));
@@ -768,22 +931,64 @@
 
   function setMode(on) {
     state.selectMode = on;
-    hint.textContent = on ? 'select mode — click an element · Esc to exit' : '⌘. select mode';
-    if (!on) { setHover(null); deselect(); }
+    hint.textContent = on ? 'select mode — click · shift-click multi · Tab next · ⌘Z undo · Esc exit' : '⌘. select mode';
+    if (!on) { setHover(null); deselect(); clearMulti(); }
   }
 
+  // Visible, stamped elements in document order — the Tab cycle.
+  function stampedEls() {
+    return [...document.querySelectorAll('[data-twk]')].filter((n) => n.getClientRects().length);
+  }
+  function selectNext(dir) {
+    const els = stampedEls();
+    if (!els.length) return;
+    const cur = state.selected?.el;
+    let idx = cur ? els.indexOf(cur) : -1;
+    idx = (idx + dir + els.length) % els.length;
+    const next = els[idx];
+    select(next);
+    next.scrollIntoView({ block: 'center', behavior: 'smooth' });
+  }
+
+  async function undoLast() {
+    const id = undoStack.pop();
+    if (id == null) return;
+    try {
+      await api('undo', { id });
+      setTimeout(reposition, 350);
+    } catch { /* already reverted / unknown — drop it */ }
+  }
+
+  // ⌘Z / Ctrl-Z should still do native undo inside inputs and while editing copy.
+  const inTextField = (t) =>
+    t instanceof Element && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName));
+
   addEventListener('keydown', (e) => {
     if ((e.metaKey || e.ctrlKey) && e.key === '.') {
       e.preventDefault();
       setMode(!state.selectMode);
       return;
     }
+    // Global undo (works whenever the overlay is active, not just in select
+    // mode) — but never hijack undo inside a text field or mid copy-edit.
+    if ((e.metaKey || e.ctrlKey) && (e.key === 'z' || e.key === 'Z') && !e.shiftKey) {
+      if (state.editing || inTextField(e.target)) return;
+      e.preventDefault();
+      undoLast();
+      return;
+    }
     if (!state.selectMode) return;
     if (e.key === 'Escape') {
       if (state.editing) return finishTextEdit(false);
+      if (state.multi.length) return clearMulti();
       if (state.selected) return deselect();
       return setMode(false);
     }
+    if (e.key === 'Tab' && !state.editing) {
+      e.preventDefault();
+      selectNext(e.shiftKey ? -1 : 1);
+      return;
+    }
     if (e.key === 'Enter' && state.editing) {
       e.preventDefault();
       finishTextEdit(true);
@@ -812,10 +1017,13 @@
     e.preventDefault();
     e.stopPropagation();
     const target = e.target instanceof Element ? e.target.closest('[data-twk]') : null;
+    // Shift-click toggles an element in the multi-selection set.
+    if (target && e.shiftKey) return toggleMulti(target);
+    if (state.multi.length) clearMulti();
     if (target) select(target);
     else deselect();
   }, true);
 
-  addEventListener('scroll', () => { reposition(); setHover(state.hoverEl); }, true);
-  addEventListener('resize', () => reposition());
+  addEventListener('scroll', () => { reposition(); positionMulti(); setHover(state.hoverEl); }, true);
+  addEventListener('resize', () => { reposition(); positionMulti(); });
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tweaklocal",
-  "version": "0.3.1",
+  "version": "0.3.4",
   "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

@@ -90,30 +90,106 @@ export function applyTextEdit(root, loc, oldText, newText) {
   return writeChecked(abs, content, next);
 }
 
+// Rebuild a template-literal className, editing only the STATIC class tokens
+// and keeping every `${...}` expression verbatim. Returns the `...` source.
+function rebuildTemplateClasses(content, expr, removes, adds) {
+  const SENT = '\u0000';
+  const parts = [];
+  expr.quasis.forEach((q, i) => {
+    parts.push(q.value.raw);
+    if (i < expr.expressions.length) parts.push(SENT);
+  });
+  let tokens = parts
+    .join('')
+    .split(/\s+/)
+    .filter(Boolean)
+    .flatMap((t) => {
+      if (!t.includes(SENT)) return [t];
+      const out = [];
+      t.split(SENT).forEach((seg, i, a) => { if (seg) out.push(seg); if (i < a.length - 1) out.push(SENT); });
+      return out;
+    });
+  tokens = tokens.filter((t) => t === SENT || !removes.includes(t));
+  for (const a of adds) if (!tokens.includes(a)) tokens.push(a);
+  let ei = 0;
+  const rebuilt = tokens
+    .map((t) => (t === SENT ? '${' + content.slice(expr.expressions[ei].start, expr.expressions[ei++].end) + '}' : t))
+    .join(' ');
+  return '`' + rebuilt + '`';
+}
+
+// Resolve a local `const name = "..."` (or template) referenced by
+// className={name}. Returns the string/template literal node, or null.
+function resolveClassConst(ast, name) {
+  let found = null;
+  walk(ast, (n) => {
+    if (found) return;
+    if (n.type === 'VariableDeclarator' && n.id?.type === 'Identifier' && n.id.name === name) {
+      const init = unwrapExpr(n.init);
+      if (init && (init.type === 'StringLiteral' || init.type === 'TemplateLiteral')) found = init;
+    }
+  });
+  return found;
+}
+
+// The literal node we can actually edit for a className attribute — the
+// attribute's own string/template, or the `const` it references.
+function classValueNode(ast, attr) {
+  const v = attr.value;
+  if (v && v.type === 'StringLiteral') return v;
+  const expr = v && v.type === 'JSXExpressionContainer' ? v.expression : null;
+  if (!expr) return null;
+  if (expr.type === 'StringLiteral' || expr.type === 'TemplateLiteral') return expr;
+  if (expr.type === 'Identifier') return resolveClassConst(ast, expr.name);
+  return null;
+}
+
 export function applyClassEdit(root, loc, removes = [], adds = []) {
-  const { abs, content, element } = loadTarget(root, loc);
+  const { abs, content, element, ast } = loadTarget(root, loc);
   const opening = element.openingElement;
-  const attr = opening.attributes.find(
-    (a) =>
-      a.type === 'JSXAttribute' &&
-      a.name.name === 'className' &&
-      a.value &&
-      a.value.type === 'StringLiteral'
+  const classAttrs = opening.attributes.filter(
+    (a) => a.type === 'JSXAttribute' && a.name.name === 'className'
   );
-  let next;
-  if (attr) {
-    let classes = attr.value.value.split(/\s+/).filter(Boolean);
-    classes = classes.filter((c) => !removes.includes(c));
+
+  const editList = (list) => {
+    let classes = list.split(/\s+/).filter(Boolean).filter((c) => !removes.includes(c));
     for (const a of adds) if (!classes.includes(a)) classes.push(a);
-    next =
-      content.slice(0, attr.value.start + 1) +
-      classes.join(' ') +
-      content.slice(attr.value.end - 1);
-  } else {
+    return classes.join(' ');
+  };
+
+  // No className yet — add a fresh string attribute.
+  if (!classAttrs.length) {
     const pos = opening.name.end;
-    next =
-      content.slice(0, pos) + ` className="${adds.join(' ')}"` + content.slice(pos);
+    return writeChecked(abs, content, content.slice(0, pos) + ` className="${adds.join(' ')}"` + content.slice(pos));
   }
+
+  // When an element has DUPLICATE className attributes (a corruption the old
+  // class editor could introduce), React renders only the LAST one. Edit that
+  // effective className, and strip the earlier dead duplicates so the element
+  // ends up valid and single-className.
+  const attr = classAttrs[classAttrs.length - 1];
+  const node = classValueNode(ast, attr);
+  if (!node) {
+    throw new Error(
+      "className here is computed, so I can't edit its classes deterministically. Use the size/color controls (inline style) or describe the change to route it through the model."
+    );
+  }
+
+  const replacement =
+    node.type === 'TemplateLiteral'
+      ? rebuildTemplateClasses(content, node, removes, adds)
+      : JSON.stringify(editList(node.value));
+
+  // Apply the value replacement plus removal of each dead duplicate attribute
+  // (with its leading space), right-to-left so offsets stay valid.
+  const edits = [{ start: node.start, end: node.end, text: replacement }];
+  for (const d of classAttrs.slice(0, -1)) {
+    const start = content[d.start - 1] === ' ' ? d.start - 1 : d.start;
+    edits.push({ start, end: d.end, text: '' });
+  }
+  edits.sort((a, b) => b.start - a.start);
+  let next = content;
+  for (const e of edits) next = next.slice(0, e.start) + e.text + next.slice(e.end);
   return writeChecked(abs, content, next);
 }
 
@@ -255,16 +331,17 @@ function nameOfFunction(ast, fn) {
 
 // Walk up from the element looking for a `{...}` JSX expression whose whole
 // removal parses — covers `{cond && <el/>}` (conditional) and `{arr.map(...)}`
-// (list template: removing it removes the rendered list). Never crosses a
-// function boundary except an inline callback (a function that is itself a
-// call argument, e.g. the .map render callback).
+// (list template). Never crosses a function boundary except an inline callback
+// (a function that is itself a call argument, e.g. the .map render callback).
+// For lists, also returns the map CallExpression so the caller can target the
+// underlying data array instead of the whole list.
 function removableExpressionContainer(chain) {
   for (let i = 1; i < chain.length; i++) {
     const node = chain[i];
     if (node.type === 'JSXExpressionContainer') {
       const inner = chain[i - 1];
       const isList = FN_TYPES.has(inner?.type) || inner?.type === 'CallExpression';
-      return { container: node, kind: isList ? 'list' : 'conditional block' };
+      return { container: node, kind: isList ? 'list' : 'conditional block', mapCall: isList ? inner : null };
     }
     if (FN_TYPES.has(node.type)) {
       // crossing a function is only allowed for inline callbacks (map etc.)
@@ -275,6 +352,68 @@ function removableExpressionContainer(chain) {
   return null;
 }
 
+// Unwrap TS wrappers around an initializer (as const / satisfies / parens).
+function unwrapExpr(node) {
+  let n = node;
+  while (n && (n.type === 'TSAsExpression' || n.type === 'TSSatisfiesExpression' || n.type === 'TSNonNullExpression' || n.type === 'ParenthesizedExpression'))
+    n = n.expression;
+  return n;
+}
+
+// For `{items.map(cb)}`: resolve `items` to a local `const items = [...]`
+// ArrayExpression in the same file. Returns the array node or null.
+function resolveMappedArray(ast, mapCall) {
+  let call = mapCall;
+  // chain may have handed us the arrow (expression-body case) — find the call
+  if (call && FN_TYPES.has(call.type)) return null; // caller passes the real call below
+  if (!call || 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;
+  const arrName = callee.object.name;
+  let arr = null;
+  walk(ast, (n) => {
+    if (arr) return;
+    if (n.type === 'VariableDeclarator' && n.id?.type === 'Identifier' && n.id.name === arrName) {
+      const init = unwrapExpr(n.init);
+      if (init?.type === 'ArrayExpression') arr = init;
+    }
+  });
+  return arr;
+}
+
+// Remove the k-th element of an ArrayExpression, handling commas and whole
+// lines. Returns new content, or null if the result doesn't parse.
+function removeArrayElement(content, arrayNode, k, file) {
+  const el = arrayNode.elements[k];
+  if (!el) return null;
+  let start = el.start;
+  let end = el.end;
+  const after = content.slice(end).match(/^\s*,/);
+  if (after) end += after[0].length;
+  else {
+    const before = content.slice(0, start).match(/,\s*$/);
+    if (before) start -= before[0].length;
+  }
+  const lineStart = content.lastIndexOf('\n', start - 1) + 1;
+  const trailing = content.slice(end).match(/^[ \t]*\n/);
+  if (/^[ \t]*$/.test(content.slice(lineStart, start)) && trailing) {
+    start = lineStart;
+    end += trailing[0].length;
+  }
+  const next = content.slice(0, start) + content.slice(end);
+  try {
+    parseSource(next, file);
+    return next;
+  } catch {
+    return null;
+  }
+}
+
 // Walk the project for JSX usages of <Name ...>. Returns [{file, element}].
 function findUsages(root, name) {
   const usages = [];
@@ -309,15 +448,16 @@ function findUsages(root, name) {
 /**
  * Delete behavior, in order:
  *  1. Normal element (has siblings): remove it in place.
- *  2. Element inside a `{...}` JSX expression whose removal parses — a list
- *     template (`{arr.map(...)}`) or a conditional (`{cond && <el/>}`):
- *     remove the whole expression. Deleting a list template removes the
- *     rendered list — that's what the on-screen "container" is.
- *  3. Sole return of a NAMED component used in exactly one place: remove that
+ *  2. List template (`{arr.map(...)}`): the clicked DOM instance's `index`
+ *     identifies the data item — remove that ONE entry from the local array
+ *     literal. Deleting one card removes one card, not the list. (To remove a
+ *     whole list, select its surrounding wrapper element instead.)
+ *  3. Conditional (`{cond && <el/>}`): remove the whole conditional block.
+ *  4. Sole return of a NAMED component used in exactly one place: remove that
  *     usage at its call site.
  *  Otherwise refuse with an actionable message (ambiguous → model lane).
  */
-export function applyDeleteElement(root, loc, { dryRun = false } = {}) {
+export function applyDeleteElement(root, loc, { dryRun = false, index } = {}) {
   // reuse loadTarget's AST — element identity must hold for the ancestor walk
   const { abs, content, element, file, ast } = loadTarget(root, loc);
 
@@ -331,6 +471,22 @@ export function applyDeleteElement(root, loc, { dryRun = false } = {}) {
   const chain = ancestorChain(ast, element);
 
   const wrapper = removableExpressionContainer(chain);
+  if (wrapper && wrapper.kind === 'list') {
+    const arr = resolveMappedArray(ast, wrapper.mapCall);
+    if (arr && Number.isInteger(index) && index >= 0 && index < arr.elements.length) {
+      const next = removeArrayElement(content, arr, index, file);
+      if (next !== null) {
+        const detail = `item ${index + 1} of ${arr.elements.length}`;
+        if (dryRun) return { abs, before: content, after: next, wouldWrite: false, removedBlock: detail };
+        return { ...writeChecked(abs, content, next), removedBlock: detail };
+      }
+    }
+    // data not editable deterministically (imported/computed array, or the
+    // instance index is unknown) — never silently delete the whole list
+    throw new Error(
+      "this is one item in a rendered list whose data I can't safely edit here. Describe the change (e.g. \"remove the second stat\") and it'll route through the model — or select the list's surrounding container to delete the whole list."
+    );
+  }
   if (wrapper) {
     const next = removeElementFromContent(content, wrapper.container, file);
     if (next !== null) {

package/src/server.js

@@ -128,12 +128,12 @@ export function startServer({ root, port = 4100 }) {
 
         if (url.pathname === '/api/delete') {
           if (body.dryRun) {
-            applyDeleteElement(root, body.loc, { dryRun: true }); // throws if unsafe, writes nothing
+            applyDeleteElement(root, body.loc, { dryRun: true, index: body.index }); // throws if unsafe, writes nothing
             return json(res, { ok: true, dryRun: true });
           }
           const id = nextId++;
           const target = describeTarget(root, body.loc);
-          const write = applyDeleteElement(root, body.loc);
+          const write = applyDeleteElement(root, body.loc, { index: body.index });
           remember(id, write);
           telemetry.record('delete');
           const label = write.removedUsage
@@ -173,6 +173,12 @@ export function startServer({ root, port = 4100 }) {
           const { file } = parseLoc(body.loc);
           const target = describeTarget(root, body.loc);
           const route = await classify(body.instruction, { cwd: root });
+          // Manual model override from the picker: keep the router's effort/tier
+          // (still sized to the request) but force the model the user chose.
+          if (body.model && body.model !== 'auto') {
+            route.model = body.model;
+            route.tier = 'manual';
+          }
           const abs = path.resolve(root, file);
           remember(id, { abs, before: fs.readFileSync(abs, 'utf8') });
           telemetry.record('nl');