cmdzero 0.5.0 → 0.7.0

package/overlay/overlay.js

@@ -34,13 +34,29 @@
   .cz-dragghost{position:fixed;pointer-events:none;z-index:2147483350;opacity:.5;outline:2px dashed #6366f1;border-radius:4px;background:rgba(99,102,241,.12)}
   .cz-delete-btn:hover{background:#ef4444}
   .cz-delete-btn svg{width:12px;height:12px;pointer-events:none}
-  .cz-pop{position:fixed;background:#111827;color:#f9fafb;border:1.5px solid #10b981;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.35);padding:8px;pointer-events:auto;display:flex;flex-direction:column;gap:6px;min-width:300px;max-width:340px;font-size:12px}
+  .cz-pop{position:fixed;background:#111827;color:#f9fafb;border:1.5px solid #10b981;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.35);padding:8px;pointer-events:auto;display:flex;flex-direction:column;gap:6px;min-width:340px;max-width:400px;font-size:12px}
+  .cz-pop textarea{flex:1;width:100%;min-height:66px;resize:vertical;background:#1f2937;border:1px solid #374151;border-radius:6px;color:#f9fafb;padding:7px 9px;font-size:12.5px;line-height:1.45;outline:none;font-family:inherit}
+  .cz-pop textarea:focus{border-color:#6366f1}
   .cz-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
   .cz-pop button{background:#374151;color:#f9fafb;border:none;border-radius:6px;padding:4px 9px;font-size:12px;cursor:pointer}
   .cz-pop button:hover{background:#4b5563}
   .cz-pop button.cz-primary{background:#6366f1}
   .cz-pop input{flex:1;background:#1f2937;border:1px solid #374151;border-radius:6px;color:#f9fafb;padding:5px 8px;font-size:12px;outline:none}
   .cz-pop select{background:#1f2937;border:1px solid #374151;border-radius:6px;color:#f9fafb;padding:3px 4px;font-size:11.5px;outline:none}
+  .cz-panel{position:fixed;left:0;top:30px;bottom:0;width:264px;box-sizing:border-box;overflow-y:auto;background:#0f1523;color:#f9fafb;border-right:1.5px solid #10b981;box-shadow:8px 0 30px rgba(0,0,0,.4);padding:12px 12px 28px;pointer-events:auto;display:flex;flex-direction:column;gap:6px;font-size:12px;z-index:2147483100;transform:translateX(0);transition:transform .26s cubic-bezier(.4,0,.2,1)}
+  .cz-panel.cz-collapsed{transform:translateX(-100%)}
+  .cz-phead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:7px;border-bottom:1px solid #1f2937}
+  .cz-min{background:#1f2937;color:#cbd5e1;border:none;border-radius:6px;padding:2px 9px;font-size:14px;line-height:1;cursor:pointer}
+  .cz-min:hover{background:#374151;color:#fff}
+  .cz-ptab{position:fixed;left:0;top:calc(50% + 15px);transform:translateY(-50%);z-index:2147483110;display:none;align-items:center;gap:5px;background:#10b981;color:#052e1b;border:none;border-radius:0 9px 9px 0;padding:13px 6px;cursor:pointer;pointer-events:auto;writing-mode:vertical-rl;font-size:11px;font-weight:700;letter-spacing:.05em;box-shadow:2px 0 10px rgba(0,0,0,.35)}
+  .cz-ptab.cz-show{display:flex}
+  .cz-ptab:hover{background:#34d399}
+  .cz-panel .cz-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
+  .cz-panel button{background:#374151;color:#f9fafb;border:none;border-radius:6px;padding:4px 9px;font-size:12px;cursor:pointer}
+  .cz-panel button:hover{background:#4b5563}
+  .cz-panel select{background:#1f2937;border:1px solid #374151;border-radius:6px;color:#f9fafb;padding:3px 4px;font-size:11.5px;outline:none}
+  .cz-ptitle{font-family:ui-monospace,monospace;font-size:11px;color:#6ee7b7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .cz-sec{color:#94a3b8;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin:5px 0 1px}
   .cz-label{color:#9ca3af;min-width:50px}
   .cz-note{color:#fbbf24;font-size:11px;line-height:1.35;background:rgba(245,158,11,.1);border-radius:6px;padding:4px 7px}
   .cz-note.cz-info{color:#93c5fd;background:rgba(59,130,246,.12)}
@@ -50,15 +66,29 @@
   .cz-swatch:hover{transform:scale(1.15)}
   .cz-chip{font-size:10.5px !important;padding:2px 6px !important}
   .cz-tray{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:auto}
+  /* Compressed by default (just a dot + short label); hovering the tray expands
+     every alert to full detail with undo/cancel. */
+  .cz-tweak{transition:padding .12s ease}
+  .cz-tray:not(:hover) .cz-tweak{padding:4px 10px;font-size:12px}
+  .cz-tray:not(:hover) .cz-tweak .cz-meta,
+  .cz-tray:not(:hover) .cz-tweak button{display:none}
+  .cz-tray:not(:hover) .cz-tlabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;display:inline-block;vertical-align:bottom}
+  .cz-banner{position:fixed;top:0;left:0;right:0;height:30px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 14px;background:rgba(9,13,20,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #1f2937;color:#cbd5e1;font-size:12px;line-height:1;pointer-events:auto;z-index:2147483200;box-sizing:border-box}
+  .cz-banner .cz-brand{display:flex;align-items:center;gap:6px;font-weight:600;color:#e2e8f0;flex:none}
+  .cz-banner .cz-brand kbd{background:#10b981;color:#052e1b;border-radius:5px;padding:2px 6px;font-size:10.5px;font-family:ui-monospace,monospace;font-weight:700}
+  .cz-banner .cz-stats{display:flex;gap:18px;align-items:center;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;flex:1;justify-content:center}
+  .cz-banner .cz-stat span{color:#64748b}
+  .cz-banner .cz-stat b{color:#f1f5f9;font-weight:600;margin-left:5px}
+  .cz-banner .cz-stat.cz-accent b{color:#6ee7b7}
+  .cz-banner a{color:#6ee7b7;text-decoration:none;flex:none}
+  .cz-banner a:hover{text-decoration:underline}
+  .cz-banner .cz-idle{color:#64748b}
   .cz-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
   .cz-wrap.cz-expanded{max-height:calc(100vh - 90px);overflow-y:auto;overflow-x:hidden;padding:2px}
-  .cz-wrap:not(.cz-expanded) > .cz-tweak:nth-child(n+6){display:none}
+  .cz-wrap:not(.cz-expanded) > .cz-tweak:nth-child(n+4){display:none}
   .cz-fade{height:16px;width:160px;background:linear-gradient(to bottom,rgba(17,24,39,0),rgba(17,24,39,.55));pointer-events:none;margin-top:-10px}
   .cz-history{background:#0b1220;color:#93c5fd;border:1px solid #263041;border-radius:8px;padding:4px 10px;font-size:11.5px;cursor:pointer;pointer-events:auto;box-shadow:0 4px 14px rgba(0,0,0,.3)}
   .cz-history:hover{border-color:#6366f1}
-  .cz-total{background:#064e3b;color:#a7f3d0;border-radius:8px;padding:6px 11px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.3);white-space:nowrap;width:max-content;max-width:720px}
-  .cz-total a{color:#6ee7b7;margin-left:10px;text-decoration:underline;cursor:pointer}
-  .cz-total a:hover{color:#a7f3d0}
   .cz-tweak{background:#111827;color:#e5e7eb;border-radius:8px;padding:7px 11px;font-size:13px;display:flex;gap:8px;align-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3);white-space:nowrap;width:max-content;max-width:720px;overflow:hidden;text-overflow:ellipsis}
   .cz-dot{width:8px;height:8px;border-radius:50%;flex:none}
   .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}
@@ -87,8 +117,10 @@
     model: 'auto', // NL model override; 'auto' = router picks
     multi: [], // [{ el, loc }] shift-click multi-selection
     autoReload: true, // seamlessly reload after a write so changes always show live
+    panelCollapsed: false, // left style panel minimized to a tab
   };
   try { state.autoReload = localStorage.getItem('cz-autoreload') !== '0'; } catch { /* no storage */ }
+  try { state.panelCollapsed = localStorage.getItem('cz-panel-collapsed') === '1'; } catch { /* no storage */ }
 
   // Stack of undoable tweak ids (LIFO) for ⌘Z / Ctrl-Z global undo.
   const undoStack = [];
@@ -213,6 +245,31 @@
   const pop = el('div', 'cz-pop');
   pop.style.display = 'none';
   root.appendChild(pop);
+  // Left-side style inspector — a full-height dock that slides in from the left
+  // and pushes the page over (no overlap). Minimizable to a left-edge tab.
+  const PANEL_W = 264;
+  const panel = el('div', 'cz-panel cz-collapsed');
+  root.appendChild(panel);
+  const panelTab = el('button', 'cz-ptab');
+  panelTab.innerHTML = '<span>▸</span><span>STYLE</span>';
+  panelTab.title = 'Show style panel';
+  panelTab.onclick = () => setPanelCollapsed(false);
+  root.appendChild(panelTab);
+  try { document.body.style.transition = 'margin-left .26s cubic-bezier(.4,0,.2,1)'; } catch { /* ignore */ }
+
+  function setPanelCollapsed(v) {
+    state.panelCollapsed = v;
+    try { localStorage.setItem('cz-panel-collapsed', v ? '1' : '0'); } catch { /* no storage */ }
+    applyPanelLayout();
+  }
+  // Slide the panel in/out and push the page so nothing is covered.
+  function applyPanelLayout() {
+    const open = !!state.selected && !state.panelCollapsed;
+    panel.classList.toggle('cz-collapsed', !open);
+    panelTab.classList.toggle('cz-show', !!state.selected && state.panelCollapsed);
+    try { document.body.style.marginLeft = open ? PANEL_W + 'px' : '0px'; } catch { /* ignore */ }
+  }
+
   const popLabel = el('div', 'cz-pop-label');
   popLabel.style.display = 'none';
   root.appendChild(popLabel);
@@ -305,6 +362,7 @@
   const dropLine = el('div', 'cz-drop');
   dropLine.style.display = 'none';
   root.appendChild(dropLine);
+  let suppressClick = false; // swallow the click the browser fires right after a drag
 
   grip.addEventListener('mousedown', (e) => {
     e.preventDefault();
@@ -313,20 +371,36 @@
     if (!s || !document.contains(s.el)) return;
     const axis = siblingAxis(s.el);
     const { peers } = dragPeers(s.el, s.loc);
-    if (peers.length < 2) return; // nothing to reorder among
+    if (peers.length < 2) {
+      addTweak({ id: 'x' + Date.now(), status: 'error', label: 'nothing to reorder here — select a card in a row, or the section container' });
+      return;
+    }
     const from = peers.indexOf(s.el);
-    let insertIndex = from;
+    if (from < 0) return;
+    const startX = e.clientX, startY = e.clientY;
+    let engaged = false, insertIndex = from;
+
+    const engage = () => {
+      engaged = true;
+      document.body.style.cursor = 'grabbing';
+      grip.style.cursor = 'grabbing';
+      s.el.style.opacity = '0.45'; // show what's moving
+      // hide the panels/popover so they don't block the drop targets
+      pop.style.display = 'none'; popLabel.style.display = 'none'; // panel is docked left, doesn't block drop targets
+    };
 
     const onMove = (ev) => {
+      if (!engaged) {
+        if (Math.abs(ev.clientX - startX) < 4 && Math.abs(ev.clientY - startY) < 4) return; // threshold
+        engage();
+      }
       const pos = axis === 'horizontal' ? ev.clientX : ev.clientY;
-      // find insertion slot: before the first peer whose midpoint is past pointer
       insertIndex = peers.length;
       for (let i = 0; i < peers.length; i++) {
         const rr = peers[i].getBoundingClientRect();
         const mid = axis === 'horizontal' ? rr.left + rr.width / 2 : rr.top + rr.height / 2;
         if (pos < mid) { insertIndex = i; break; }
       }
-      // draw the drop indicator at that gap
       const ref = peers[Math.min(insertIndex, peers.length - 1)].getBoundingClientRect();
       dropLine.style.display = 'block';
       if (axis === 'horizontal') {
@@ -341,11 +415,20 @@
       removeEventListener('mousemove', onMove, true);
       removeEventListener('mouseup', onUp, true);
       dropLine.style.display = 'none';
+      document.body.style.cursor = '';
+      grip.style.cursor = 'grab';
+      if (document.contains(s.el)) s.el.style.opacity = '';
+      if (!engaged) return; // was a click, not a drag
+      suppressClick = true; // swallow the synthetic click that follows a drag
+      setTimeout(() => { suppressClick = false; }, 0);
+      const restore = () => { if (state.selected === s && document.contains(s.el)) { renderPopover(); renderPanel(); reposition(); } };
       const finalIndex = insertIndex > from ? insertIndex - 1 : insertIndex;
-      if (finalIndex === from || finalIndex < 0) return;
+      if (finalIndex === from || finalIndex < 0) { restore(); return; } // dropped where it started
       try {
         await api('move', { loc: s.loc, index: instanceIndex(s.el, s.loc), toIndex: finalIndex });
+        restore(); // reorder shows via auto-reload; restore panels if it doesn't
       } catch (err) {
+        restore();
         addTweak({ id: 'x' + Date.now(), status: 'error', label: `move: ${err.message.slice(0, 140)}` });
       }
     };
@@ -354,7 +437,7 @@
   });
 
   function select(target) {
-    finishTextEdit(false);
+    finishTextEdit(true); // moving to another element saves the current text edit
     const loc = target.getAttribute('data-cz');
     // How many rendered elements map to this same source line — i.e. how many
     // instances a shared-source edit (style/functionality) will change.
@@ -362,6 +445,7 @@
     state.selected = { el: target, loc, meta: null, instances };
     selBox.style.display = 'block';
     renderPopover();
+    renderPanel();
     reposition();
     loadMeta();
   }
@@ -377,15 +461,20 @@
       if (state.selected !== s) return; // selection changed meanwhile
       s.meta = meta;
       renderPopover();
+      renderPanel();
       reposition();
+      // Text editing is active the moment an editable element is highlighted —
+      // no button click needed. Caret goes to the end so it's non-destructive.
+      if (canEditWholeText(s) && !state.editing) startTextEdit(false);
     } catch { /* element not resolvable — leave popover as is */ }
   }
 
   function deselect() {
-    finishTextEdit(false);
+    finishTextEdit(true); // exiting/⌘0 saves the current text edit
     state.selected = null;
     selBox.style.display = 'none';
     pop.style.display = 'none';
+    applyPanelLayout(); // slides the panel out + un-shifts the page
     popLabel.style.display = 'none';
     deleteBtn.style.display = 'none';
     moveBar.style.display = 'none';
@@ -494,8 +583,12 @@
     const r = positionBox(selBox, s.el);
     pop.style.display = 'flex';
     const labelH = 22; // room for the file:line tab above the panel
-    const top = r.bottom + 8 + labelH + pop.offsetHeight > innerHeight ? r.top - pop.offsetHeight - 8 : r.bottom + 8 + labelH;
-    const left = Math.min(Math.max(r.left, 8), innerWidth - 356);
+    // Keep a generous gap so the panel never sits on top of the text you're
+    // editing — below the element by default, above only if there's no room.
+    const GAP = 26;
+    const below = r.bottom + GAP + labelH;
+    const top = below + pop.offsetHeight > innerHeight ? r.top - pop.offsetHeight - GAP : below;
+    const left = Math.min(Math.max(r.left, 8), innerWidth - Math.max(pop.offsetWidth + 16, 356));
     Object.assign(pop.style, { left: left + 'px', top: Math.max(top, 8 + labelH) + 'px' });
     popLabel.style.display = 'block';
     popLabel.textContent = s.instances > 1 ? `${shortLoc(s.loc)} · ${s.instances}×` : shortLoc(s.loc);
@@ -529,7 +622,7 @@
     } catch (e) {
       addTweak({ id: 'x' + Date.now(), status: 'error', label: `${label}: ${e.message}` });
     }
-    setTimeout(() => { reposition(); renderPopover(); }, 350); // after HMR
+    setTimeout(() => { reposition(); renderPopover(); renderPanel(); }, 350); // after HMR
   }
 
   // ---------- popover ----------
@@ -613,7 +706,7 @@
     } catch (e) {
       addTweak({ id: 'x' + Date.now(), status: 'error', label: `${label}: ${e.message}` });
     }
-    setTimeout(() => { reposition(); renderPopover(); }, 350);
+    setTimeout(() => { reposition(); renderPopover(); renderPanel(); }, 350);
   }
 
   function pxStep(current, scale, dir) {
@@ -726,6 +819,86 @@
     return row;
   }
 
+  // Build the inline swatches/chips control for one style property (used by the
+  // left panel — every attribute broken out, no dropdown).
+  function buildPropSwatches(name, tw) {
+    const s = state.selected;
+    const wrap = el('div', 'cz-swatches');
+    const p = (tw ? PROPS : STYLE_PROPS)[name];
+    if (!p) return wrap;
+    if (p.type === 'color') {
+      if (tw) {
+        const { colors, fromDS } = readTheme();
+        if (!fromDS) { wrap.append(el('span', 'cz-meta', 'no design-system colors in CSS')); return wrap; }
+        for (const c of colors) {
+          const b = el('button', 'cz-swatch');
+          b.style.background = c.value;
+          b.title = `${p.prefix}-${c.name}`;
+          b.onclick = () => applyClassTweak(propChange(s.el, name, `${p.prefix}-${c.name}`), name);
+          wrap.appendChild(b);
+        }
+      } else {
+        const { varColors } = readTheme();
+        const palette = varColors.length ? varColors.slice(0, 48) : harvestPageColors();
+        for (const c of palette) {
+          const b = el('button', 'cz-swatch');
+          b.style.background = c.value;
+          b.title = c.name;
+          b.onclick = () => applyStyleProp(name, c.apply);
+          wrap.appendChild(b);
+        }
+      }
+    } else {
+      p.options.forEach((opt, i) => {
+        const b = el('button', 'cz-chip', p.labels ? p.labels[i] : opt);
+        b.onclick = () => tw ? applyClassTweak(propChange(s.el, name, opt), name) : applyStyleProp(name, opt);
+        wrap.appendChild(b);
+      });
+    }
+    return wrap;
+  }
+
+  // Left inspector panel: every style attribute broken out into its own control.
+  function renderPanel() {
+    const s = state.selected;
+    applyPanelLayout();
+    if (!s) return;
+    panel.textContent = '';
+    const head = el('div', 'cz-phead');
+    head.append(el('div', 'cz-ptitle', `<${s.el.tagName.toLowerCase()}>  ${shortLoc(s.loc)}${s.instances > 1 ? ` · ${s.instances}×` : ''}`));
+    const min = el('button', 'cz-min', '‹');
+    min.title = 'Minimize panel';
+    min.onclick = () => setPanelCollapsed(true);
+    head.append(min);
+    panel.appendChild(head);
+    const tw = state.tailwind;
+
+    panel.appendChild(el('div', 'cz-sec', 'Spacing'));
+    if (tw) { panel.appendChild(spacingRow('Padding', 'p')); panel.appendChild(spacingRow('Margin', 'm')); }
+    else { panel.appendChild(spacingRowPx('Padding', 'padding')); panel.appendChild(spacingRowPx('Margin', 'margin')); }
+
+    panel.appendChild(el('div', 'cz-sec', 'Typography'));
+    if (tw) {
+      const fontRow = el('div', 'cz-row');
+      fontRow.append(el('span', 'cz-label', 'Font'));
+      const fMinus = el('button', null, 'A−');
+      const fPlus = el('button', null, 'A+');
+      fMinus.onclick = () => applyClassTweak(fontStep(s.el, -1), 'font');
+      fPlus.onclick = () => applyClassTweak(fontStep(s.el, +1), 'font');
+      const curFont = classList(s.el).find((c) => readTheme().textSizes.includes(c));
+      fontRow.append(fMinus, fPlus, el('span', 'cz-cur', curFont || 'inherited'));
+      panel.appendChild(fontRow);
+    } else {
+      panel.appendChild(fontRowPx());
+    }
+
+    panel.appendChild(el('div', 'cz-sec', 'Color & border'));
+    for (const name of Object.keys(tw ? PROPS : STYLE_PROPS)) {
+      panel.appendChild(el('span', 'cz-label', name));
+      panel.appendChild(buildPropSwatches(name, tw));
+    }
+  }
+
   function renderPopover() {
     const s = state.selected;
     if (!s) return;
@@ -758,12 +931,7 @@
       const wholeText =
         literals.length === 1 && literals[0].value.trim() === s.el.textContent.trim();
       if (wholeText) {
-        const row = el('div', 'cz-row');
-        row.append(el('span', 'cz-label', 'Copy'));
-        const b = el('button', null, '✎ Edit text in place');
-        b.onclick = () => startTextEdit();
-        row.appendChild(b);
-        pop.appendChild(row);
+        pop.appendChild(el('div', 'cz-note cz-info', '✎ Editing text inline — just type. Saves on ⌘0 or when you move to another element; Esc cancels.'));
       } else {
         // DOM is transformed (or several literals) → edit the source text here
         for (const t of literals) {
@@ -790,91 +958,13 @@
       }
     }
 
-    // Deterministic style controls. Tailwind apps get class edits; everything
-    // else gets inline-style edits — same zero-token lane, any styling system.
-    const tw = state.tailwind;
-
-    if (tw) {
-      pop.appendChild(spacingRow('Padding', 'p'));
-      pop.appendChild(spacingRow('Margin', 'm'));
-      const fontRow = el('div', 'cz-row');
-      fontRow.append(el('span', 'cz-label', 'Font'));
-      const fMinus = el('button', null, 'A−');
-      const fPlus = el('button', null, 'A+');
-      fMinus.onclick = () => applyClassTweak(fontStep(s.el, -1), 'font');
-      fPlus.onclick = () => applyClassTweak(fontStep(s.el, +1), 'font');
-      fontRow.append(fMinus, fPlus);
-      const curFont = classList(s.el).find((c) => readTheme().textSizes.includes(c));
-      fontRow.append(el('span', 'cz-cur', curFont || 'inherited'));
-      pop.appendChild(fontRow);
-    } else {
-      pop.appendChild(spacingRowPx('Padding', 'padding'));
-      pop.appendChild(spacingRowPx('Margin', 'margin'));
-      pop.appendChild(fontRowPx());
-    }
-
-    // property editor
-    const propRow = el('div', 'cz-row');
-    propRow.append(el('span', 'cz-label', 'Style'));
-    const propSel = el('select');
-    propSel.appendChild(el('option', null, 'Choose property…'));
-    for (const name of Object.keys(tw ? PROPS : STYLE_PROPS)) {
-      const o = el('option', null, name);
-      o.value = name;
-      propSel.appendChild(o);
-    }
-    propRow.appendChild(propSel);
-    pop.appendChild(propRow);
-    const swatches = el('div', 'cz-swatches');
-    pop.appendChild(swatches);
-    propSel.onchange = () => {
-      swatches.textContent = '';
-      const p = (tw ? PROPS : STYLE_PROPS)[propSel.value];
-      if (!p) return;
-      if (p.type === 'color') {
-        if (tw) {
-          const { colors, fromDS } = readTheme();
-          if (!fromDS) {
-            swatches.append(el('span', 'cz-meta', 'no design-system colors found in page CSS'));
-            return;
-          }
-          for (const c of colors) {
-            const b = el('button', 'cz-swatch');
-            b.style.background = c.value;
-            b.title = `${p.prefix}-${c.name}`;
-            b.onclick = () => applyClassTweak(propChange(s.el, propSel.value, `${p.prefix}-${c.name}`), propSel.value);
-            swatches.appendChild(b);
-          }
-        } else {
-          // design tokens if the app defines color custom properties,
-          // otherwise the palette actually rendered on the page
-          const { varColors } = readTheme();
-          const palette = varColors.length ? varColors.slice(0, 48) : harvestPageColors();
-          for (const c of palette) {
-            const b = el('button', 'cz-swatch');
-            b.style.background = c.value;
-            b.title = c.name;
-            b.onclick = () => applyStyleProp(propSel.value, c.apply);
-            swatches.appendChild(b);
-          }
-        }
-      } else {
-        p.options.forEach((opt, i) => {
-          const b = el('button', 'cz-chip', p.labels ? p.labels[i] : opt);
-          b.onclick = () =>
-            tw
-              ? applyClassTweak(propChange(s.el, propSel.value, opt), propSel.value)
-              : applyStyleProp(propSel.value, opt);
-          swatches.appendChild(b);
-        });
-      }
-      reposition();
-    };
+    // Style controls now live in the left inspector panel (renderPanel).
 
-    const nlRow = el('div', 'cz-row');
-    const input = el('input');
-    input.placeholder = 'Describe a change…';
-    const go = el('button', 'cz-primary', 'Go');
+    const nlWrap = el('div', 'cz-nlwrap');
+    const input = el('textarea');
+    input.placeholder = 'Describe a change… (⌘↵ to send)';
+    input.rows = 3;
+    const go = el('button', 'cz-primary', 'Go →');
     const send = async () => {
       const instruction = input.value.trim();
       if (!instruction) return;
@@ -888,9 +978,13 @@
       }
     };
     go.onclick = send;
-    input.onkeydown = (e) => { if (e.key === 'Enter') send(); e.stopPropagation(); };
-    nlRow.append(input, go);
-    pop.appendChild(nlRow);
+    // ⌘↵ / Ctrl↵ sends; plain Enter inserts a newline (multi-line prompts).
+    input.onkeydown = (e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); send(); } e.stopPropagation(); };
+    const goRow = el('div', 'cz-row');
+    goRow.style.justifyContent = 'flex-end';
+    goRow.appendChild(go);
+    nlWrap.append(input, goRow);
+    pop.appendChild(nlWrap);
 
     // Model picker: Auto (router) or a forced tier.
     const modelRow = el('div', 'cz-row');
@@ -913,11 +1007,21 @@
   // descriptions, buttons, links — even when animations have split the DOM
   // into spans: we swap in the source text for editing and keep the original
   // DOM aside so Esc restores it untouched.
-  function startTextEdit() {
+  // Whether the selected element's whole visible text is a single source
+  // 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 (!lits || lits.length !== 1 || s.instances > 1) return false;
+    return document.contains(s.el) && lits[0].value.trim() === s.el.textContent.trim();
+  }
+
+  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 frag = document.createDocumentFragment();
     while (s.el.firstChild) frag.appendChild(s.el.firstChild);
     state.editing = {
@@ -930,9 +1034,11 @@
     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();
-    document.getSelection()?.selectAllChildren(s.el);
-    hint.textContent = 'editing copy — Enter saves · Esc cancels · click away saves';
+    s.el.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); }
+    hint.textContent = 'editing text — type to change · ⌘0 or click another element saves · Esc cancels';
   }
 
   async function finishTextEdit(commit) {
@@ -961,21 +1067,35 @@
     setTimeout(() => { reposition(); loadMeta(); }, 350);
   }
 
-  // ---------- tray ----------
-  const tray = el('div', 'cz-tray');
-  root.appendChild(tray);
-  const totalBar = el('div', 'cz-total');
-  totalBar.style.display = 'none';
-  const totalText = el('span');
-  const reportLink = el('a', null, 'monthly report →');
+  // ---------- stats banner (permanent, above the site) ----------
+  const banner = el('div', 'cz-banner');
+  const brand = el('div', 'cz-brand');
+  brand.innerHTML = '<kbd>⌘0</kbd> CmdZero';
+  const bannerStats = el('div', 'cz-stats');
+  const reportLink = el('a', null, 'report →');
   reportLink.href = 'https://cmdzero.dev/report';
   reportLink.target = '_blank';
   reportLink.rel = 'noopener';
-  totalBar.append(totalText, reportLink);
-  tray.appendChild(totalBar);
-  // Alerts live in their own wrap so history can collapse independently of the
-  // savings bar. Newest is inserted at the top; the 5 newest stay visible and
-  // older ones fold behind an expander (fades at the bottom).
+  banner.append(brand, bannerStats, reportLink);
+  root.appendChild(banner);
+  // Push the page down so the banner sits ABOVE the site rather than over it.
+  // Inject a stylesheet instead of mutating body's style attribute: frameworks
+  // that hydrate (React 19+) diff server-rendered attributes and flag a bare
+  // style mutation as a hydration mismatch.
+  try {
+    const prevPad = getComputedStyle(document.body).paddingTop;
+    const pad = document.createElement('style');
+    pad.setAttribute('data-cz-banner-pad', '');
+    pad.textContent = `body { padding-top: calc(${prevPad} + 30px) !important; }`;
+    document.head.appendChild(pad);
+  } catch { /* no body yet */ }
+
+  // ---------- tray ----------
+  const tray = el('div', 'cz-tray');
+  root.appendChild(tray);
+  // Alerts live in their own wrap so history can collapse independently.
+  // Newest is inserted at the top; the 3 newest stay visible (compressed; hover to expand) and older
+  // ones fold behind an expander.
   const tweaksWrap = el('div', 'cz-wrap');
   tray.appendChild(tweaksWrap);
   const fade = el('div', 'cz-fade');
@@ -993,8 +1113,8 @@
   function updateHistoryUI() {
     const rows = tweaksWrap.children.length;
     const expanded = tweaksWrap.classList.contains('cz-expanded');
-    const hidden = Math.max(0, rows - 5);
-    if (rows <= 5) { historyChip.style.display = 'none'; fade.style.display = 'none'; return; }
+    const hidden = Math.max(0, rows - 3);
+    if (rows <= 3) { historyChip.style.display = 'none'; fade.style.display = 'none'; return; }
     historyChip.style.display = '';
     historyChip.textContent = expanded ? 'collapse ▴' : `＋ ${hidden} older ▾`;
     fade.style.display = expanded ? 'none' : '';
@@ -1010,11 +1130,35 @@
     } catch { /* no storage */ }
   }
 
+  const stat = (label, value, accent) => {
+    const s = el('div', 'cz-stat' + (accent ? ' cz-accent' : ''));
+    s.append(el('span', null, label), el('b', null, value));
+    return s;
+  };
+  // How many of the session's tweaks cost zero tokens (copy/style/move/delete).
+  function zeroTokenCount() {
+    let z = 0;
+    for (const r of tweakData.values()) if (!r.model && r.tokens === 0 && !String(r.id).startsWith('x')) z++;
+    return z;
+  }
   function showTotals(t) {
-    if (!t || !t.count) return;
-    totalBar.style.display = '';
-    totalText.textContent = `≈ saved $${t.usd.toFixed(2)} · ${Math.round(t.ms / 1000)}s across ${t.count} tweak${t.count === 1 ? '' : 's'} (vs unscoped agent)`;
+    bannerStats.textContent = '';
+    if (!t || !t.count) {
+      bannerStats.append(el('span', 'cz-idle', 'Press ⌘0, then click any element to tweak it — edits land in your source.'));
+      return;
+    }
+    const secs = Math.round(t.ms / 1000);
+    const time = secs >= 60 ? `${Math.round(secs / 60)}m` : `${secs}s`;
+    const z = zeroTokenCount();
+    bannerStats.append(
+      stat('tweaks', String(t.count)),
+      stat('saved', `$${t.usd.toFixed(2)}`, true),
+      stat('faster', time, true),
+    );
+    if (z > 0) bannerStats.append(stat('zero-token', String(z)));
+    bannerStats.append(stat('vs', 'unscoped agent'));
   }
+  showTotals(null); // idle banner on load until /api/health arrives
 
   function addTweak(t, hydrate) {
     const key = String(t.id);
@@ -1023,7 +1167,7 @@
       row = el('div', 'cz-tweak');
       row._id = key;
       row._dot = el('span', 'cz-dot');
-      row._label = el('span', null, '');
+      row._label = el('span', 'cz-tlabel', '');
       row._meta = el('span', 'cz-meta', '');
       row._cancel = el('button', null, 'cancel');
       row._cancel.style.display = 'none';
@@ -1244,29 +1388,37 @@
       selectNext(e.shiftKey ? -1 : 1);
       return;
     }
-    if (e.key === 'Enter' && state.editing) {
+    // Enter saves ONLY when the caret is in the edited element — not when
+    // typing in the popover's textarea (which uses Enter for newlines).
+    if (e.key === 'Enter' && state.editing && e.target === state.editing.el) {
       e.preventDefault();
       finishTextEdit(true);
     }
   }, true);
 
   addEventListener('mousemove', (e) => {
-    if (!state.selectMode || state.editing) return;
+    if (!state.selectMode) return;
+    // keep hover previews live even while editing text, so you can see the
+    // next element you'll click (clicking saves + moves there)
     if (inOverlay(e.target)) return setHover(null);
+    if (state.editing && state.editing.el.contains(e.target)) return setHover(null);
     setHover(e.target instanceof Element ? e.target.closest('[data-cz]') : null);
   }, true);
 
   addEventListener('click', (e) => {
     if (!state.selectMode) return;
+    if (suppressClick) { e.preventDefault(); e.stopPropagation(); return; } // just finished a drag
     if (inOverlay(e.target)) return;
     if (state.editing) {
-      // clicks inside the editable text place the caret; clicks anywhere
-      // else save the edit (and never navigate/select mid-edit)
-      if (!state.editing.el.contains(e.target)) {
-        e.preventDefault();
-        e.stopPropagation();
-        finishTextEdit(true);
-      }
+      // clicks inside the editable text just place the caret; clicking another
+      // element saves the current edit AND moves the selection there.
+      if (state.editing.el.contains(e.target)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      finishTextEdit(true);
+      const next = e.target instanceof Element ? e.target.closest('[data-cz]') : null;
+      if (next && next !== state.selected?.el) select(next);
+      else if (!next) deselect();
       return;
     }
     e.preventDefault();
@@ -1279,6 +1431,7 @@
     else deselect();
   }, true);
 
+
   addEventListener('scroll', () => { reposition(); positionMulti(); setHover(state.hoverEl); }, true);
   addEventListener('resize', () => { reposition(); positionMulti(); });
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmdzero",
-  "version": "0.5.0",
+  "version": "0.7.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",