tweaklocal 0.3.3 → 0.3.4

package/overlay/overlay.js

@@ -35,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}
@@ -241,7 +243,10 @@
   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();
@@ -379,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;
@@ -605,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
@@ -999,8 +1017,8 @@
     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 || e.metaKey || e.ctrlKey)) return toggleMulti(target);
+    // 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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tweaklocal",
-  "version": "0.3.3",
+  "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,10 +90,64 @@ 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(
+  const classAttrs = opening.attributes.filter(
     (a) => a.type === 'JSXAttribute' && a.name.name === 'className'
   );
 
@@ -104,62 +158,39 @@ export function applyClassEdit(root, loc, removes = [], adds = []) {
   };
 
   // No className yet — add a fresh string attribute.
-  if (!attr) {
+  if (!classAttrs.length) {
     const pos = opening.name.end;
     return writeChecked(abs, content, content.slice(0, pos) + ` className="${adds.join(' ')}"` + content.slice(pos));
   }
 
-  // className="..."  (plain string attribute)
-  if (attr.value && attr.value.type === 'StringLiteral') {
-    const next = content.slice(0, attr.value.start + 1) + editList(attr.value.value) + content.slice(attr.value.end - 1);
-    return writeChecked(abs, content, next);
-  }
-
-  const expr = attr.value && attr.value.type === 'JSXExpressionContainer' ? attr.value.expression : null;
-
-  // className={"..."} / className={'...'}  (string inside an expression)
-  if (expr && expr.type === 'StringLiteral') {
-    const next = content.slice(0, expr.start) + JSON.stringify(editList(expr.value)) + content.slice(expr.end);
-    return writeChecked(abs, content, next);
+  // 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."
+    );
   }
 
-  // className={`... ${dyn} ...`}  — edit only the STATIC class tokens; keep the
-  // dynamic `${...}` expressions verbatim, and stay a single className. (The
-  // old code appended a second className attribute here, which React silently
-  // ignored — the reported "font change didn't persist" bug.)
-  if (expr && expr.type === 'TemplateLiteral') {
-    const SENT = '\u0000'; // placeholder marking where each `${expr}` sits
-    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(' ');
-    const next = content.slice(0, expr.start) + '`' + rebuilt + '`' + content.slice(expr.end);
-    return writeChecked(abs, content, next);
+  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: '' });
   }
-
-  // Computed className (cn(...), a variable, &&/ternary at the top level) —
-  // refuse rather than write a duplicate/broken attribute. The overlay surfaces
-  // this; size/color still work via the inline-style lane.
-  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."
-  );
+  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);
 }
 
 /**