@swmansion/argent 0.13.0 → 0.13.1-next.0

package/dist/preview-ui/index.html

@@ -64,6 +64,7 @@
       .stage,
       .vcard,
       .float-controls,
+      .float-toolbelt,
       .float-status,
       .footbar,
       .comment-pop,
@@ -83,6 +84,13 @@
         gap: var(--gap-list);
         z-index: var(--z-overlay);
       }
+      /* macOS traffic lights (native window controls) occupy the top-left in
+         Electron. Shift the status pill clear of them so a "Connecting…" or
+         error message never lands under the buttons. A browser tab has no
+         buttons, so .native-frame is absent and the pill keeps its corner. */
+      .native-frame .float-status {
+        left: var(--traffic-light-gutter);
+      }
       .status {
         background: var(--color-surface);
         border: var(--border-hairline) solid var(--color-border);
@@ -297,8 +305,9 @@
         font-weight: var(--fw-semibold);
         box-shadow: var(--shadow-card);
       }
-      /* Floating top-right controls (theme, comment, close): a row of square
-         icon buttons that sit over the stream, away from the slim drag toolbar. */
+      /* Floating top-right controls (just the theme toggle now — comment moved
+         to the bottom toolbelt, close is a native traffic light): square icon
+         buttons that sit over the stream, away from the slim drag toolbar. */
       .float-controls {
         position: absolute;
         top: var(--footbar-bottom);
@@ -308,6 +317,19 @@
         z-index: var(--z-overlay);
         -webkit-app-region: no-drag;
       }
+      /* Bottom-centre toolbelt — floats below the stream. Today it carries the
+         comment toggle; it's shaped to grow into a Figma-style bottom tool tab,
+         so it's a horizontal row centred on the window. */
+      .float-toolbelt {
+        position: absolute;
+        bottom: var(--footbar-bottom);
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        gap: var(--gap-list);
+        z-index: var(--z-overlay);
+        -webkit-app-region: no-drag;
+      }
       /* Icon-only controls: a uniform square button so theme / comment / close
          read as one consistent cluster (no mismatched text pills). The glyph is
          inline SVG drawn in currentColor, so it themes for free and the hover /
@@ -726,14 +748,14 @@
       }
       .spot-hit {
         position: absolute;
-        cursor: crosshair;
+        cursor: var(--cursor-comment);
         z-index: var(--z-spot-hit);
         /* The spotlight root sets pointer-events:none; this capture layer must
            opt back in or hover/click never reaches it and nothing un-blurs. */
         pointer-events: auto;
       }
       .inspecting .stage img {
-        cursor: crosshair;
+        cursor: var(--cursor-comment);
       }
 
       /* Comment box bubble anchored next to the inspected element. */
@@ -1208,6 +1230,18 @@
           <span id="hidden-badge" class="hidden-badge" hidden></span>
         </div>
         <div class="float-controls" id="float-controls">
+          <button
+            id="theme-btn"
+            class="float-btn"
+            type="button"
+            aria-label="Theme"
+            title="Theme"></button>
+        </div>
+        <!-- Bottom-centre toolbelt that floats below the stream. Holds the
+             comment toggle for now; this is the seed of a Figma-style bottom
+             tool tab we'll grow later. Window close/minimise live in the native
+             traffic lights, not a handcrafted button. -->
+        <div class="float-toolbelt" id="float-toolbelt">
           <button
             id="comment-btn"
             class="float-btn"
@@ -1227,28 +1261,6 @@
                 d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
             </svg>
           </button>
-          <button
-            id="theme-btn"
-            class="float-btn"
-            type="button"
-            aria-label="Theme"
-            title="Theme"></button>
-          <button
-            id="close-btn"
-            class="float-btn"
-            type="button"
-            aria-label="Close preview window"
-            title="Close preview window">
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              aria-hidden="true">
-              <path d="M6 6 18 18M18 6 6 18" />
-            </svg>
-          </button>
         </div>
         <div class="offscreen-prompt" id="offscreen-prompt" hidden>
           <div class="op-card">
@@ -2023,15 +2035,15 @@
       }
 
       // ── Events ──────────────────────────────────────────────────────────
-      // Close button: ask the tool-server to dismiss the Electron window (it
-      // owns the window lifecycle over stdin, so it plays the close animation
-      // and quits the host cleanly — more reliable than renderer window.close()
-      // under the sandboxed BrowserWindow).
-      const closeBtn = document.getElementById("close-btn");
-      closeBtn.addEventListener("click", () => {
-        closeBtn.blur();
-        fetch(`${TOOL_SERVER}/preview/close`, { method: "POST" }).catch(() => {});
-      });
+      // Window close/minimise are the native macOS traffic lights now (the host
+      // window uses titleBarStyle:"hidden"), so there's no handcrafted close
+      // button to wire up. Closing the native window quits the host; the
+      // tool-server re-opens it on the next round, exactly as the old button's
+      // dismiss did. In Electron, flag the document so the top-left chrome can
+      // sidestep the traffic lights (a browser tab has none).
+      if (/Electron/i.test(navigator.userAgent)) {
+        document.documentElement.classList.add("native-frame");
+      }
 
       // ── Theme (light / dark) ────────────────────────────────────────────
       // Colours are light-dark(LIGHT, DARK) tokens in theme.css; forcing
@@ -2553,18 +2565,33 @@
           );
         let best = null,
           bestScore = Infinity;
+        // The size gate is a PREFERENCE for the first match, never an eliminator.
+        // `fallback` keeps the nearest candidate even when the gate rejects it, so
+        // a clearly on-screen element is never reported off-screen just because the
+        // propose-time frame is a poor size hint: that frame is a thumbnail CROP
+        // region (often a whole component) while `match` can anchor on a small
+        // sub-element inside it — e.g. crop the header band, anchor on its tiny
+        // "Export" button — so the seed size legitimately dwarfs the real match.
+        let fallback = null,
+          fbScore = Infinity;
         for (const n of pool) {
           const f = n.frame;
           const score = anchor ? dist(f) : f.width * f.height;
+          if (score < fbScore) {
+            fbScore = score;
+            fallback = n;
+          }
           if (anchor && !hasDesc && !sizeMatches(f)) continue; // size gate only bootstraps identity
           if (score < bestScore) {
             bestScore = score;
             best = n;
           }
         }
-        // A locked identity must never be dropped over a size wobble: if the size
-        // gate isn't in play (hasDesc) `best` is simply the nearest identity match.
-        return best;
+        // A locked identity must never be dropped over a size wobble (hasDesc →
+        // `best` is the nearest identity match). When the size gate rejects every
+        // candidate (an unreliable propose-time frame), fall back to the nearest
+        // match rather than reporting a visible element off-screen.
+        return best || fallback;
       }
 
       // Topmost on-screen node whose frame contains a normalized point
@@ -3192,6 +3219,37 @@
         else return home;
         return { x: nx, y: home.y };
       }
+      // Deterministic de-overlap of the spring HOMES (targets), run once per
+      // layoutCards pass — i.e. per describe poll, NOT per animation frame. That
+      // is the whole point: the damped bubble springs then glide to homes that
+      // already don't overlap, so there is no live correction force and thus
+      // none of the micro-jitter / wedge-wiggle a per-frame position fix causes.
+      // Stable top-down sweep: walking cards in y order, each one is dropped to
+      // sit just below every card above it that shares its vertical lane. Moving
+      // only ever downward makes it monotonic — it cannot oscillate. Pinned
+      // (user-dropped) cards are fixed anchors the others flow past.
+      function deOverlapHomes(items, cardW, gap, top, bottom) {
+        const sorted = items.slice().sort((a, b) => a.rec.home.y - b.rec.home.y);
+        for (let i = 1; i < sorted.length; i++) {
+          const cur = sorted[i];
+          if (cur.rec.pinned) continue;
+          let floor = top;
+          for (let j = 0; j < i; j++) {
+            const prev = sorted[j];
+            // Same vertical lane? (cards in different columns never constrain.)
+            const oX =
+              Math.min(cur.rec.home.x, prev.rec.home.x) +
+              cardW -
+              Math.max(cur.rec.home.x, prev.rec.home.x);
+            if (oX <= 0) continue;
+            const prevBottom = prev.rec.home.y + prev.ch + gap;
+            if (prevBottom > floor) floor = prevBottom;
+          }
+          // Drop to clear the cards above; clamp so it can't leave the window
+          // (true overflow piles at the bottom rather than vanishing off-screen).
+          if (cur.rec.home.y < floor) cur.rec.home.y = Math.min(floor, bottom - cur.ch);
+        }
+      }
       function layoutCards() {
         const now = Date.now();
         const mr = mainEl.getBoundingClientRect();
@@ -3305,7 +3363,7 @@
         //        • The final maxHeight write is diffed against the inline
         //          value so unchanged frames are no-ops — keeps scrollTop.
         const COL_PAD = 8;
-        const GAP = 12;
+        const GAP = 8;
         const want = vis.map((rec, i) => {
           const body = rec.el.querySelector(".vcard-body");
           if (body && rec.chromeH == null) {
@@ -3371,11 +3429,19 @@
         // the "ready" pop. offsetTop ignores the transform (offsetParent is the
         // position:relative #main), keeping the column height stable.
         const footTop = footEl && !footEl.hidden ? footEl.offsetTop - COL_PAD : mh;
-        const colBottom = Math.min(mh - COL_PAD, footTop);
-        const colH = colBottom - colTop;
+        // The footbar is anchored bottom-RIGHT, so only the column(s) that
+        // actually sit above it should surrender height for it. A column clear
+        // of the footbar's x-range gets the full window height — otherwise the
+        // left column was needlessly squeezed (and its cards clipped) by a
+        // footbar that only overlaps the right column.
+        const footLeft = footEl && !footEl.hidden ? footEl.offsetLeft : mw;
         for (const col of ["L", "R"]) {
           const cwant = want.filter((w) => w.side === col);
           if (cwant.length === 0) continue;
+          const colX = col === "L" ? leftX : rightX;
+          const colBottom =
+            colX + cardW > footLeft ? Math.min(mh - COL_PAD, footTop) : mh - COL_PAD;
+          const colH = colBottom - colTop;
           const naturalSum = cwant.reduce((s, w) => s + w.natural, 0) + (cwant.length - 1) * GAP;
           if (naturalSum <= colH) {
             cwant.sort((a, b) => a.anchor - b.anchor);
@@ -3468,6 +3534,9 @@
             w.rec.vel.y += Math.random() * 18 - 9;
           }
         }
+        // Guarantee no two resting homes overlap. Deterministic + once per pass,
+        // so the springs simply glide to clear targets (no live force, no jitter).
+        deOverlapHomes(want, cardW, GAP, COL_PAD, mh - COL_PAD);
       }
 
       // Reuses SVG nodes (no per-frame teardown) and draws to the *eased*

package/dist/preview-ui/theme.css

@@ -131,7 +131,7 @@
   --pad-code: 2px 6px;
   --pad-pill: 3px 11px;
   --pad-card-head: 7px 10px;
-  --pad-row: 8px 10px;
+  --pad-row: 5px 10px; /* tighter vertical so a 2-variant card fits its column without clipping */
   --pad-cmt: 6px 10px; /* in-card comment box */
   --pad-input: 6px 8px; /* popover textareas */
   --pad-pop: 10px; /* comment / annotation popover */
@@ -168,6 +168,7 @@
   --footbar-bottom: 14px;
   --footbar-right: 14px;
   --resize-edge: 6px; /* drag-layer inset so the frameless window's edges still resize */
+  --traffic-light-gutter: 84px; /* left inset for top-left chrome to clear the native macOS window buttons (Electron only) */
   --footbar-max-width: 70%;
   --select-min-width: 240px;
   --debug-min-width: 220px;
@@ -181,6 +182,18 @@
   --stream-max-h: 80dvh; /* dvh, not vh: in a browser tab `vh` is the toolbar-retracted (large) viewport, so the centered stream overflowed the %-height container and got clipped at the bottom. `dvh` tracks the visible viewport. In the frameless Electron window (no toolbar) dvh == vh, so production is unchanged. */
   --backdrop-blur: 1.67px; /* light haze over the dimmed stream (3× softer than the former 5px) */
 
+  /* ── Cursors ─────────────────────────────────────────────────────────── */
+  /* Comment-mode cursor — a Figma-style speech bubble that makes "you are
+     placing a comment" unmistakable (replaces the generic crosshair). Accent
+     fill + white outline & dots so it reads on the bright stream AND on the
+     dark spotlight scrim. "7 24" is the hotspot: the tail tip, where the click
+     actually lands. Baked as a data-URI because a cursor image can't reference
+     CSS vars — so the colours live here, in the theme, like every other value. */
+  --cursor-comment:
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M6%203h16a3%203%200%200%201%203%203v10a3%203%200%200%201-3%203h-9l-6%205v-5h-1a3%203%200%200%201-3-3V6a3%203%200%200%201%203-3z%22%20fill%3D%22%232f6fd0%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2211%22%20r%3D%221.4%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2211%22%20r%3D%221.4%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2211%22%20r%3D%221.4%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E")
+      7 24,
+    crosshair;
+
   /* ── Opacities ───────────────────────────────────────────────────────── */
   --opacity-disabled: 0.45;
   --opacity-connector: 0.7;

package/dist/preview-window/main.cjs

@@ -25,6 +25,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 // ../preview-window/src/main.ts
 var import_electron = require("electron");
 var readline = __toESM(require("node:readline"));
+import_electron.app.setName("Argent Lens");
 var TARGET_WIDTH = 1200;
 var TARGET_HEIGHT = 820;
 var ANIMATION_MS = 320;
@@ -105,7 +106,17 @@ async function createWindow() {
   win = new import_electron.BrowserWindow({
     width: TARGET_WIDTH,
     height: TARGET_HEIGHT,
-    frame: false,
+    title: "Argent Lens",
+    // Native window controls (the macOS traffic lights) instead of a
+    // handcrafted close button: `titleBarStyle: "hidden"` keeps the real OS
+    // buttons in the top-left while hiding the rest of the title bar, so the
+    // window still reads as frameless. (`frame: false` would suppress the
+    // buttons entirely — that's what we used to do.)
+    titleBarStyle: "hidden",
+    // Inset the traffic lights to share the same 14px padding the in-window
+    // corner panels use (theme toggle, status pill), so the native buttons and
+    // the handcrafted chrome read as one consistent margin.
+    trafficLightPosition: { x: 14, y: 18 },
     show: false,
     // Transparent + no native shadow: the OS window is just a passthrough
     // for the renderer. The visible "card" is whatever <html> + <body>
@@ -119,6 +130,8 @@ async function createWindow() {
       sandbox: true
     }
   });
+  win.setWindowButtonVisibility?.(true);
+  win.setTitle("Argent Lens");
   win.on("closed", () => {
     win = null;
     import_electron.app.quit();