@swmansion/argent 0.11.0 → 0.12.0

package/dist/preview-ui/theme.css

@@ -0,0 +1,231 @@
+/* =============================================================================
+ * Argent Preview — THEME
+ *
+ * The ONE place every visual value lives. index.html must not contain a single
+ * hardcoded colour, pixel, duration, easing, z-index or opacity — only
+ * var(--token) references into this file. Tokens are named for what they ARE
+ * (their role), not an abstract scale, and shared only when they represent the
+ * same design decision. The "Motion & feel" block at the bottom is also read
+ * by the JS at boot (getComputedStyle), so animation feel is configured here
+ * too — not buried in the script.
+ *
+ * Light and dark are colocated per token via light-dark(LIGHT, DARK). The
+ * active side follows `color-scheme` on :root — the OS theme by default, or a
+ * forced value the in-app theme toggle writes to documentElement.style. So
+ * every consumer themes for free, with no second palette to keep in sync.
+ * ========================================================================== */
+
+:root {
+  color-scheme: light dark;
+
+  /* ── Palette ─────────────────────────────────────────────────────────── */
+  /* Light + dark live side by side via light-dark(LIGHT, DARK); the active
+     side follows the `color-scheme` above (so the OS theme by default, or a
+     forced value when the user flips the in-app theme toggle). Tokens that are
+     self-contained ink-on-fill pairs (pin, danger) or only ever sit over the
+     device stream (touch dots, spotlight scrim, ring) read on any backdrop and
+     so stay single-valued. */
+  --color-bg: light-dark(#f4f5f7, #0e0e10);
+  --color-fg: light-dark(#1b1d21, #eaeaea);
+  --color-muted: light-dark(#5f636b, #8a8a90);
+  --color-accent: light-dark(
+    #2f6fd0,
+    #9bc7f0
+  ); /* brand sky-blue on dark; a deeper blue carries the same role on light */
+  --color-on-accent: light-dark(#ffffff, #06122b); /* ink on accent-filled surfaces */
+  --color-border: light-dark(#d8dbe2, #2a2a2e);
+  --color-surface: light-dark(#ffffff, #16161a); /* panels (toolbar, cards, pops) */
+  --color-surface-raised: light-dark(#f6f7f9, #1c1c21); /* card header — lifted off surface */
+  --color-surface-hover: light-dark(#eef1f5, #1c1c22); /* hovered list item */
+  --color-row-hover: light-dark(#e8ecf3, #20202a); /* hovered variant row */
+  --color-ok: light-dark(#138a48, #5cdc8b);
+  --color-error: light-dark(#cf2f2f, #ff8080);
+  --color-thumb-bg: light-dark(#e3e5ea, #000000); /* letterbox behind variant previews */
+  --color-pin-bg: #d8a657; /* saved-annotation pin */
+  --color-pin-fg: #1a1205;
+  --color-danger-bg: light-dark(#c2334a, #7a2230); /* destructive (delete) button */
+  --color-danger-fg: #ffd9df;
+
+  /* ── Translucent effect colours ──────────────────────────────────────── */
+  --color-row-staged: light-dark(
+    rgba(19, 138, 72, 0.12),
+    rgba(92, 220, 139, 0.13)
+  ); /* ok tint on staged row */
+  --touch-fill: rgba(155, 199, 240, 0.25); /* multi-touch dot body (accent) */
+  --touch-fill-pressed: rgba(155, 199, 240, 0.55);
+  --touch-stroke: rgba(155, 199, 240, 0.9); /* multi-touch dot ring */
+  --touch-anchor-fill: rgba(255, 200, 80, 0.9); /* anchored-touch dot */
+  --touch-anchor-stroke: rgba(255, 200, 80, 1);
+  --spotlight-scrim: rgba(8, 8, 10, 0.55); /* dim/blur over the stream */
+  --footbar-bg: light-dark(
+    rgba(255, 255, 255, 0.94),
+    rgba(22, 22, 26, 0.94)
+  ); /* surface, semi-opaque */
+
+  /* ── Elevation (box-shadow values, by purpose) ───────────────────────── */
+  /* Only the shadow COLOUR flips per theme: heavy black halos read as grime on
+     a light surface, so light mode uses a soft blue-grey ink at low alpha. */
+  --shadow-stream: 0 10px 48px light-dark(rgba(18, 26, 42, 0.14), #0008);
+  --shadow-pill: 0 4px 14px light-dark(rgba(18, 26, 42, 0.12), #0008);
+  --shadow-card: 0 10px 30px light-dark(rgba(18, 26, 42, 0.13), #0009);
+  --shadow-pin: 0 3px 10px light-dark(rgba(18, 26, 42, 0.16), #0008);
+  --shadow-pop: 0 12px 36px light-dark(rgba(18, 26, 42, 0.18), #000b);
+  --ring-outline: 0 0 0 1px #000a; /* spotlight ring edge (over the stream) */
+  --touch-glow: 0 0 12px rgba(155, 199, 240, 0.5);
+  --dot-glow: 0 0 8px var(--color-ok);
+  --glow-accent: 0 10px 34px light-dark(rgba(47, 111, 208, 0.32), rgba(155, 199, 240, 0.3)); /* accent halo — footbar "ready to submit" pop */
+
+  /* ── Typography ──────────────────────────────────────────────────────── */
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  --fs-title: 15px;
+  --fs-body: 13px;
+  --fs-note: 12px;
+  --fs-read: 12.5px;
+  --fs-label: 11px;
+  --fs-tag: 10px;
+  --fs-mini: 9px;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+  --fw-extrabold: 800;
+  --lh-normal: 1.5;
+  --lh-snug: 1.45;
+  --tracking-label: 0.04em;
+  --tracking-where: 0.03em;
+
+  /* ── Radii (by role) ─────────────────────────────────────────────────── */
+  /* Brand geometry: the argent site rounds generously (terminal card, pills).
+     Mid radii bumped a notch toward that softer feel; tiny tags and the
+     pin-tail teardrop stay tight so their shape doesn't distort. */
+  --radius-chip: 4px;
+  --radius-control: 6px; /* toolbar controls, spot ring */
+  --radius-input: 7px; /* textareas, pop buttons */
+  --radius-button: 8px;
+  --radius-item: 10px; /* device-picker item */
+  --radius-card: 14px; /* stream, cards, popovers, footbar */
+  --radius-pin-tail: 2px; /* annotation-pin teardrop corner */
+  --radius-round: 50%;
+  --radius-pill: 999px;
+
+  /* ── Borders ─────────────────────────────────────────────────────────── */
+  --border-hairline: 1px;
+  --border-strong: 2px; /* spotlight ring, touch dot */
+  --connector-width: 1.5; /* SVG stroke-width (unitless) */
+
+  /* ── Spacing — gaps (recurring roles) ────────────────────────────────── */
+  --gap-tight: 5px;
+  --gap-inline: 6px;
+  --gap-list: 8px;
+  --gap-bar: 10px;
+  --gap-stack: 12px;
+
+  /* ── Spacing — padding (per role) ────────────────────────────────────── */
+  --pad-bar: 8px 12px; /* toolbar */
+  --pad-control: 4px 10px; /* select / button */
+  --pad-toggle: 4px 12px;
+  --pad-view: 12px; /* viewport */
+  --pad-empty: 32px;
+  --pad-picker: 24px;
+  --pad-item: 12px 14px; /* device-picker item */
+  --pad-refresh: 6px 12px;
+  --pad-code: 2px 6px;
+  --pad-pill: 3px 11px;
+  --pad-card-head: 7px 10px;
+  --pad-row: 8px 10px;
+  --pad-cmt: 6px 10px; /* in-card comment box */
+  --pad-input: 6px 8px; /* popover textareas */
+  --pad-pop: 10px; /* comment / annotation popover */
+  --pad-btn: 6px 10px; /* popover buttons */
+  --pad-lab: 1px 7px; /* spotlight ring label */
+  --pad-footbar: 8px 10px;
+  --pad-footbar-input: 6px 9px;
+  --pad-complete: 8px 14px;
+
+  /* one-off margins / nudges (kept named by what they position) */
+  --sub-margin: -4px 0 6px; /* device-picker caption */
+  --comment-title-gap: 7px; /* comment popover heading → body */
+  --annrow-mt: 9px; /* annotation popover button row */
+  --annpop-gap: 8px; /* popover ↔ pin gap, resting */
+  --annpop-gap-show: 14px; /* popover ↔ pin gap, shown */
+  --press-shift: 1px; /* :active downward nudge */
+
+  /* ── Component sizes ─────────────────────────────────────────────────── */
+  --card-width: 232px;
+  --vcard-body-max-h: none; /* JS sets a per-card max-height only when the column overflows the viewport; otherwise the body fits its variant count. */
+  --thumb-size: 96px;
+  --collapsed-thumb-h: 58px; /* once a variant is picked, the others collapse to a row with the preview ~3 lines of body text tall (3 × --fs-body × --lh-normal ≈ 58px) */
+  --pin-size: 20px;
+  --dot-size: 8px; /* status dot, device-picker dot */
+  --card-dot-size: 7px; /* card-header dot */
+  --icon-btn-size: 34px; /* floating top-right icon controls (theme, comment, close) */
+  --icon-size: 17px; /* glyph inside an icon button */
+  --comment-pop-width: 248px;
+  --annpop-width: 232px;
+  --annpop-txt-max-h: 160px;
+  --textarea-min-h: 64px;
+  --cmt-min-h: 28px;
+  --footbar-input-width: 260px;
+  --footbar-bottom: 14px;
+  --footbar-right: 14px;
+  --resize-edge: 6px; /* drag-layer inset so the frameless window's edges still resize */
+  --footbar-max-width: 70%;
+  --select-min-width: 240px;
+  --debug-min-width: 220px;
+  --empty-max-width: 480px;
+  --picker-max-width: 420px;
+  --lab-max-width: 240px;
+  --lab-top: -22px;
+  --complete-note-max-width: 200px;
+  --modal-max-width: 360px;
+  --pad-modal: 18px;
+  --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) */
+
+  /* ── Opacities ───────────────────────────────────────────────────────── */
+  --opacity-disabled: 0.45;
+  --opacity-connector: 0.7;
+  --opacity-pill: 0.92;
+
+  /* ── Z-index layers ──────────────────────────────────────────────────── */
+  --z-connectors: 4;
+  --z-cards: 5;
+  --z-pin: 7;
+  --z-spot-hit: 8;
+  --z-pop: 9; /* off-screen pill, comment popover */
+  --z-overlay: 10; /* annotation popover, footbar */
+  --z-modal: 12; /* confirm modal (above the footbar) */
+
+  /* ── Motion & feel (CSS transitions AND read by JS at boot) ──────────── */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --dur-press: 0.06s;
+  --dur-hover: 0.15s;
+  --dur-fade: 0.18s;
+  --dur-pill: 0.2s;
+  --dur-card-in: 0.22s;
+  --dur-spot: 0.28s;
+  --dur-card-move: 0.34s;
+  --dither-dur: 0.72s; /* light↔dark dithered wavefront sweep */
+  --card-gone-scale: 0.8; /* shrink as a card pops away */
+  --footbar-ready-scale: 1.05; /* footbar grows a touch once every element is chosen */
+
+  /* Spring feel — JS integrates these (ω rad/s, ζ damping ratio). The bubble
+     spring is slow & barely-overshooting (cards drift into place); the tight
+     spring is fast & critically damped (connectors/pins track every frame). */
+  --spring-bubble-omega: 4.2;
+  --spring-bubble-zeta: 1; /* DEMO: critically damped — no overshoot/bounce on cards */
+  --spring-tight-omega: 26;
+  --spring-tight-zeta: 1;
+  --card-gone-grace-ms: 550; /* ride out brief edge drop-outs before fading */
+  --poll-interval-ms: 1200; /* /preview/variants poll cadence */
+  --tree-stale-ms: 6000; /* drop the describe tree if older than this */
+  --flick-max-vel: 1500; /* clamp thrown-card release velocity (px/s) */
+  --spot-idle-dismiss-ms: 150; /* stopped-aimless grace before releasing spotlight */
+  --spot-traj-window-ms: 80; /* recent-sample window used to derive pointer velocity */
+  --spot-traj-stopped-speed: 0.05; /* below this normalized speed (1/s) the pointer counts as stopped */
+  --spot-traj-reach: 0.5; /* normalized forward distance to look for a trajectory target */
+  --spot-traj-hitbox-margin: 0.2; /* per-side margin (fraction of element size). Inflates BOTH the sticky focus hitbox (so a tiny drift out of an element keeps it focused) and the trajectory predictor hitbox. Strict containment still wins, so margins never steal focus from an obviously hovered element. */
+  --spot-max-frame-area: 0.85; /* nodes whose frame covers more than this fraction of the screen are not treated as highlightables (catches Android full-screen container roots that lack iOS's explicit root flag) */
+  --annpop-hover-grace-ms: 280; /* hover-card grace: pin ↔ popover travel */
+  --success-toast-show-ms: 1200; /* how long the post-submit confirmation card lingers (browser mode; in Electron the window closes around it sooner) */
+}

package/dist/preview-window/main.cjs

@@ -0,0 +1,182 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../preview-window/src/main.ts
+var import_electron = require("electron");
+var readline = __toESM(require("node:readline"));
+var TARGET_WIDTH = 1200;
+var TARGET_HEIGHT = 820;
+var ANIMATION_MS = 320;
+var win = null;
+function squeezeSnippet(toScale, durationMs) {
+  const clearWhenDone = toScale === 1;
+  return `
+    new Promise(resolve => {
+      const root = document.documentElement;
+      const s = root.style;
+      s.transformOrigin = '50% 50%';
+      s.transition = 'transform ${durationMs}ms cubic-bezier(0.22, 1, 0.36, 1)';
+      const done = () => {
+        ${clearWhenDone ? "s.transition = ''; s.transform = '';" : ""}
+        resolve();
+      };
+      // Two rAFs so the previous transform (set just before this snippet)
+      // has been committed and rendered before the transition starts.
+      // Without this, the browser collapses both writes into one frame
+      // and skips the animation.
+      requestAnimationFrame(() => requestAnimationFrame(() => {
+        const onEnd = () => { root.removeEventListener('transitionend', onEnd); done(); };
+        root.addEventListener('transitionend', onEnd, { once: true });
+        // Safety in case transitionend never fires (off-screen tab, e.g.):
+        setTimeout(done, ${durationMs + 80});
+        s.transform = 'scaleY(${toScale})';
+      }));
+    });
+  `;
+}
+var HOST_CSS = `
+  html, body { background: transparent !important; }
+  #root { background: var(--color-bg); }
+`;
+async function runInRenderer(snippet, label) {
+  const current = win;
+  if (!current) return;
+  try {
+    await current.webContents.executeJavaScript(snippet);
+  } catch (err) {
+    process.stderr.write(
+      `[preview-window] ${label} failed: ${err instanceof Error ? err.message : err}
+`
+    );
+  }
+}
+async function prepareSqueeze() {
+  await runInRenderer(
+    `
+    (() => {
+      const style = document.createElement('style');
+      style.setAttribute('data-argent-preview-host', '');
+      style.textContent = ${JSON.stringify(HOST_CSS)};
+      document.head.appendChild(style);
+      const s = document.documentElement.style;
+      s.transformOrigin = '50% 50%';
+      s.transition = 'none';
+      s.transform = 'scaleY(0)';
+      void document.documentElement.offsetHeight;
+    })();
+  `,
+    "prepareSqueeze"
+  );
+}
+async function squeezeIn() {
+  await runInRenderer(squeezeSnippet(1, ANIMATION_MS), "squeezeIn");
+}
+async function squeezeOut() {
+  await runInRenderer(squeezeSnippet(0, ANIMATION_MS), "squeezeOut");
+}
+async function createWindow() {
+  const url = process.env.ARGENT_PREVIEW_URL;
+  if (!url) {
+    process.stderr.write("[preview-window] ARGENT_PREVIEW_URL not set, exiting\n");
+    import_electron.app.quit();
+    return;
+  }
+  win = new import_electron.BrowserWindow({
+    width: TARGET_WIDTH,
+    height: TARGET_HEIGHT,
+    frame: false,
+    show: false,
+    // Transparent + no native shadow: the OS window is just a passthrough
+    // for the renderer. The visible "card" is whatever <html> + <body>
+    // paints, which is what we squeeze with the CSS transform.
+    transparent: true,
+    hasShadow: false,
+    backgroundColor: "#00000000",
+    webPreferences: {
+      contextIsolation: true,
+      nodeIntegration: false,
+      sandbox: true
+    }
+  });
+  win.on("closed", () => {
+    win = null;
+    import_electron.app.quit();
+  });
+  try {
+    await win.loadURL(url);
+  } catch (err) {
+    process.stderr.write(
+      `[preview-window] loadURL failed for ${url}: ${err instanceof Error ? err.message : err}
+`
+    );
+    import_electron.app.quit();
+    return;
+  }
+  win.center();
+  await prepareSqueeze();
+  win.show();
+  void squeezeIn();
+}
+function foreground(url) {
+  if (!win) return;
+  if (win.isMinimized()) win.restore();
+  win.show();
+  win.focus();
+  if (url && win.webContents.getURL() !== url) {
+    win.loadURL(url).catch((err) => {
+      process.stderr.write(
+        `[preview-window] foreground loadURL failed: ${err instanceof Error ? err.message : err}
+`
+      );
+    });
+  }
+}
+async function closeWithAnimation() {
+  if (!win) {
+    import_electron.app.quit();
+    return;
+  }
+  await squeezeOut();
+  import_electron.app.quit();
+}
+import_electron.app.whenReady().then(createWindow).catch((err) => {
+  process.stderr.write(
+    `[preview-window] initialization failed: ${err instanceof Error ? err.message : err}
+`
+  );
+  import_electron.app.quit();
+});
+import_electron.app.on("window-all-closed", () => import_electron.app.quit());
+var rl = readline.createInterface({ input: process.stdin });
+rl.on("line", (line) => {
+  let msg;
+  try {
+    msg = JSON.parse(line);
+  } catch {
+    return;
+  }
+  if (msg.cmd === "foreground") foreground(msg.url);
+  else if (msg.cmd === "close") void closeWithAnimation();
+});
+rl.on("close", () => import_electron.app.quit());