cmdzero 0.6.0 → 0.7.0

package/overlay/overlay.js

@@ -43,12 +43,19 @@
   .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:12px;top:42px;width:238px;max-height:calc(100vh - 58px);overflow-y:auto;background:#111827;color:#f9fafb;border:1.5px solid #10b981;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.4);padding:9px;pointer-events:auto;display:flex;flex-direction:column;gap:6px;font-size:12px;z-index:2147483100}
+  .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;padding-bottom:5px;border-bottom:1px solid #1f2937}
+  .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}
@@ -58,8 +65,14 @@
   .cz-swatch{width:18px;height:18px;border-radius:4px;border:1px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
   .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;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .22s ease}
-  .cz-tray.cz-dodged{transform:translateX(calc(100% + 28px));opacity:0;pointer-events:none}
+  .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}
@@ -72,7 +85,7 @@
   .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}
@@ -104,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 = [];
@@ -230,11 +245,31 @@
   const pop = el('div', 'cz-pop');
   pop.style.display = 'none';
   root.appendChild(pop);
-  // Left-side style inspector — every style attribute broken out into its own
-  // control, populated by renderPanel() when an element is selected.
-  const panel = el('div', 'cz-panel');
-  panel.style.display = 'none';
+  // 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);
@@ -351,7 +386,7 @@
       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'; panel.style.display = 'none'; popLabel.style.display = 'none';
+      pop.style.display = 'none'; popLabel.style.display = 'none'; // panel is docked left, doesn't block drop targets
     };
 
     const onMove = (ev) => {
@@ -439,7 +474,7 @@
     state.selected = null;
     selBox.style.display = 'none';
     pop.style.display = 'none';
-    panel.style.display = 'none';
+    applyPanelLayout(); // slides the panel out + un-shifts the page
     popLabel.style.display = 'none';
     deleteBtn.style.display = 'none';
     moveBar.style.display = 'none';
@@ -826,10 +861,16 @@
   // Left inspector panel: every style attribute broken out into its own control.
   function renderPanel() {
     const s = state.selected;
-    if (!s) { panel.style.display = 'none'; return; }
-    panel.style.display = 'flex';
+    applyPanelLayout();
+    if (!s) return;
     panel.textContent = '';
-    panel.appendChild(el('div', 'cz-ptitle', `<${s.el.tagName.toLowerCase()}>  ${shortLoc(s.loc)}${s.instances > 1 ? ` · ${s.instances}×` : ''}`));
+    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'));
@@ -1038,17 +1079,23 @@
   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;
-    document.body.style.paddingTop = `calc(${prevPad} + 30px)`;
+    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 5 newest stay visible and
-  // older ones fold behind an expander (fades at the bottom).
+  // 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');
@@ -1066,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' : '';
@@ -1120,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';
@@ -1384,28 +1431,6 @@
     else deselect();
   }, true);
 
-  // Alert tray dodges the cursor: when the pointer enters its region, slide it
-  // off to the right so you can click the elements underneath; slide back once
-  // the pointer leaves the original region (hysteresis avoids flicker).
-  let trayDodged = false, trayZone = null;
-  addEventListener('mousemove', (e) => {
-    const x = e.clientX, y = e.clientY;
-    if (!trayDodged) {
-      if (!tweaksWrap.children.length) return; // nothing to dodge
-      const r = tray.getBoundingClientRect();
-      if (r.width && x >= r.left - 8 && x <= r.right + 8 && y >= r.top - 8 && y <= r.bottom + 8) {
-        trayZone = r;
-        trayDodged = true;
-        tray.classList.add('cz-dodged');
-      }
-    } else {
-      const r = trayZone, m = 34;
-      if (!r || x < r.left - m || x > r.right + m || y < r.top - m || y > r.bottom + m) {
-        trayDodged = false;
-        tray.classList.remove('cz-dodged');
-      }
-    }
-  }, true);
 
   addEventListener('scroll', () => { reposition(); positionMulti(); setHover(state.hoverEl); }, true);
   addEventListener('resize', () => { reposition(); positionMulti(); });

package/package.json

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