@1agh/maude 0.41.0 → 0.43.0

package/apps/studio/client/photo-knobs.jsx

@@ -0,0 +1,437 @@
+// photo-knobs.jsx — the Inspector "Photo" tab body (feature-photo-editor, Task 15).
+//
+// A self-contained editor for a PhotoEdit sidecar. Unlike CssKnobs (whose write
+// path is /_api/edit-css keyed on a source `data-cd-id`), PhotoKnobs writes the
+// non-destructive `assets/<sha8>.photo.json` sidecar through /_api/photo-edit —
+// so it works for BOTH an artboard `<img>` and an annotation ImageStroke (both
+// carry an `assets/<sha8>.<ext>` source), neither of which CssKnobs can express.
+//
+// Runs on the MAIN origin (the studio shell), so inline styles are fine
+// (style-src 'self' 'unsafe-inline'). Renders the controls; the live pixel
+// preview happens in the canvas iframe's <PhotoLayer>, driven by `onEdit`
+// (app.jsx broadcasts the updated edit down to the canvas). Reuses the shell's
+// HSV `ColorPicker` when injected; falls back to a native color input.
+//
+// Sections + ranges mirror photo/schema.ts exactly:
+//   Adjustments (brightness/contrast/saturation/exposure −1..1, hue −180..180,
+//   sepia/grayscale/invert 0..1) · Duotone · Grain · Pattern · Mask · Background.
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const PATTERN_TYPES = ['dots', 'grid', 'lines', 'diagonal', 'crosshatch'];
+const PATTERN_BLENDS = ['normal', 'multiply', 'screen', 'overlay', 'soft-light'];
+const MASK_PRESETS = ['none', 'vignette', 'radial-reveal', 'edge-fade'];
+
+const ADJUSTMENTS = [
+  { key: 'brightness', label: 'Brightness', min: -1, max: 1 },
+  { key: 'contrast', label: 'Contrast', min: -1, max: 1 },
+  { key: 'saturation', label: 'Saturation', min: -1, max: 1 },
+  { key: 'exposure', label: 'Exposure', min: -1, max: 1 },
+  { key: 'hue', label: 'Hue', min: -180, max: 180, step: 1, unit: '°' },
+  { key: 'sepia', label: 'Sepia', min: 0, max: 1 },
+  { key: 'grayscale', label: 'Grayscale', min: 0, max: 1 },
+  { key: 'invert', label: 'Invert', min: 0, max: 1 },
+];
+
+// Deep-clone a small plain edit object (structuredClone is available in the shell).
+const clone = (o) => (o ? JSON.parse(JSON.stringify(o)) : {});
+
+/** Prune empty sub-objects so a neutral edit serializes back to `{}`. */
+function prune(edit) {
+  const out = {};
+  for (const [k, v] of Object.entries(edit)) {
+    if (v == null) continue;
+    if (typeof v === 'object' && !Array.isArray(v)) {
+      const inner = {};
+      for (const [ik, iv] of Object.entries(v)) if (iv != null && iv !== '') inner[ik] = iv;
+      if (Object.keys(inner).length) out[k] = inner;
+    } else {
+      out[k] = v;
+    }
+  }
+  return out;
+}
+
+// ── small inline-styled primitives ──────────────────────────────────────────
+
+// Theme tokens — the REAL shell tokens (client/styles/1-tokens.css), defined
+// for both `:root`/`[data-theme="light"]` and `[data-theme="dark"]`. Earlier
+// this used invented `--st-*` names (--st-fg/--st-border/--st-btn-bg/--st-mono)
+// that were never actually declared anywhere in the stylesheet, so every rule
+// silently fell back to its hardcoded dark-mode default — the panel looked
+// fine in dark mode purely by coincidence and was low-contrast/washed out in
+// light mode.
+const S = {
+  body: { padding: '10px 12px', fontSize: 12, color: 'var(--fg-0)', overflowY: 'auto' },
+  sec: { marginBottom: 14 },
+  secHead: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    fontSize: 11,
+    textTransform: 'uppercase',
+    letterSpacing: '.06em',
+    color: 'var(--fg-2)',
+    margin: '4px 0 8px',
+  },
+  row: { display: 'flex', alignItems: 'center', gap: 8, margin: '5px 0' },
+  label: { flex: '0 0 78px', fontSize: 11, color: 'var(--fg-1)' },
+  range: { flex: 1, minWidth: 0 },
+  num: {
+    flex: '0 0 42px',
+    textAlign: 'right',
+    fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+    fontSize: 11,
+    color: 'var(--fg-2)',
+  },
+  btn: {
+    font: 'inherit',
+    fontSize: 11,
+    padding: '5px 10px',
+    borderRadius: 6,
+    border: '1px solid var(--border-default)',
+    background: 'var(--bg-3)',
+    color: 'var(--fg-0)',
+    cursor: 'pointer',
+  },
+  reset: {
+    font: 'inherit',
+    fontSize: 10,
+    padding: '1px 6px',
+    borderRadius: 4,
+    border: '1px solid transparent',
+    background: 'transparent',
+    color: 'var(--fg-2)',
+    cursor: 'pointer',
+  },
+  select: {
+    font: 'inherit',
+    fontSize: 11,
+    padding: '3px 6px',
+    borderRadius: 5,
+    border: '1px solid var(--border-default)',
+    background: 'var(--bg-3)',
+    color: 'var(--fg-0)',
+  },
+};
+
+function Section({ title, right, children }) {
+  return (
+    <section style={S.sec}>
+      <div style={S.secHead}>
+        <span>{title}</span>
+        {right}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function Slider({ label, value, min, max, step = 0.01, unit = '', onChange, onCommit }) {
+  const v = value ?? (min < 0 ? 0 : min);
+  return (
+    <div style={S.row}>
+      <span style={S.label}>{label}</span>
+      <input
+        type="range"
+        style={S.range}
+        min={min}
+        max={max}
+        step={step}
+        value={v}
+        onChange={(e) => onChange(Number(e.target.value))}
+        onPointerUp={onCommit}
+        onKeyUp={onCommit}
+        aria-label={label}
+      />
+      <span style={S.num}>
+        {step >= 1 ? Math.round(v) : v.toFixed(2)}
+        {unit}
+      </span>
+    </div>
+  );
+}
+
+function Toggle({ checked, onChange, label }) {
+  return (
+    <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, cursor: 'pointer' }}>
+      <input type="checkbox" checked={!!checked} onChange={(e) => onChange(e.target.checked)} />
+      {label}
+    </label>
+  );
+}
+
+function ColorSwatch({ value, fallback, ColorPicker, onApply }) {
+  const hex = value || fallback;
+  if (ColorPicker) return <ColorPicker seed={hex} onApply={onApply} />;
+  return (
+    <input
+      type="color"
+      value={hex}
+      onChange={(e) => onApply(e.target.value)}
+      style={{ width: 28, height: 20, padding: 0, border: 'none', background: 'none' }}
+      aria-label="color"
+    />
+  );
+}
+
+// ── the panel ────────────────────────────────────────────────────────────────
+
+/**
+ * @param {object}   p
+ * @param {string}   p.asset             `assets/<sha8>.<ext>` source path.
+ * @param {object}  [p.initialEdit]      Seed PhotoEdit (else fetched on mount).
+ * @param {Function} [p.ColorPicker]     Injected HSV picker component (optional).
+ * @param {Function} [p.onEdit]          (edit) => void — live-preview broadcast.
+ * @param {Function} [p.onRemoveBackground] async (asset) => { maskAsset } | null.
+ * @param {Function} [p.onRecordEdit]    (before, after) => void — undo integration.
+ */
+export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBackground, onRecordEdit }) {
+  const [edit, setEditState] = useState(() => clone(initialEdit));
+  const [loading, setLoading] = useState(!initialEdit);
+  const [saveState, setSaveState] = useState('idle'); // idle | saving | saved | error
+  const [bgBusy, setBgBusy] = useState(false);
+  const putTimer = useRef(null);
+  const editRef = useRef(edit);
+  editRef.current = edit;
+
+  // Hydrate from the sidecar unless seeded.
+  useEffect(() => {
+    if (initialEdit || !asset) return;
+    let dead = false;
+    setLoading(true);
+    fetch(`/_api/photo-edit?asset=${encodeURIComponent(asset)}`)
+      .then((r) => (r.ok ? r.json() : {}))
+      .then((j) => {
+        if (dead) return;
+        setEditState(j && typeof j === 'object' ? j : {});
+        setLoading(false);
+      })
+      .catch(() => !dead && setLoading(false));
+    return () => {
+      dead = true;
+    };
+  }, [asset, initialEdit]);
+
+  const put = useCallback(
+    (next) => {
+      clearTimeout(putTimer.current);
+      putTimer.current = setTimeout(async () => {
+        setSaveState('saving');
+        try {
+          const res = await fetch(`/_api/photo-edit?asset=${encodeURIComponent(asset)}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(prune(next)),
+          });
+          setSaveState(res.ok ? 'saved' : 'error');
+        } catch {
+          setSaveState('error');
+        }
+      }, 160);
+    },
+    [asset]
+  );
+
+  // Apply a mutation, push the optimistic edit to the live preview, persist
+  // (debounced), and record undo (before → after).
+  const mutate = useCallback(
+    (fn, { commit = false } = {}) => {
+      const before = editRef.current;
+      const next = clone(before);
+      fn(next);
+      setEditState(next);
+      onEdit?.(next);
+      put(next);
+      if (commit) onRecordEdit?.(before, next);
+    },
+    [onEdit, put, onRecordEdit]
+  );
+
+  const setAdj = (key, value, commit) =>
+    mutate((e) => {
+      e.adjustments = e.adjustments || {};
+      if (value === 0 || value == null) delete e.adjustments[key];
+      else e.adjustments[key] = value;
+      if (Object.keys(e.adjustments).length === 0) delete e.adjustments;
+    }, { commit });
+
+  const setSection = (section, patch, commit) =>
+    mutate((e) => {
+      e[section] = { ...(e[section] || {}), ...patch };
+    }, { commit });
+
+  const resetAdjustments = () => mutate((e) => delete e.adjustments, { commit: true });
+
+  if (loading) return <div style={{ ...S.body, opacity: 0.6 }}>Loading photo edit…</div>;
+
+  const adj = edit.adjustments || {};
+  const duo = edit.duotone || {};
+  const grain = edit.grain || {};
+  const pat = edit.pattern || {};
+  const mask = edit.mask || {};
+  const bg = edit.backgroundRemoved || {};
+
+  return (
+    <div style={S.body} data-testid="photo-knobs">
+      <div style={{ ...S.secHead, marginTop: 0, color: 'var(--fg-3)', textTransform: 'none', letterSpacing: 0 }}>
+        <span style={{ fontFamily: 'var(--font-mono, monospace)', fontSize: 10 }}>{asset}</span>
+        <span style={{ fontSize: 10, color: saveState === 'error' ? 'var(--status-error)' : undefined }}>
+          {saveState === 'saving' ? 'saving…' : saveState === 'error' ? '⚠ save failed' : saveState === 'saved' ? 'saved' : ''}
+        </span>
+      </div>
+
+      <Section
+        title="Adjustments"
+        right={
+          <button type="button" style={S.reset} onClick={resetAdjustments} title="Reset adjustments">
+            reset
+          </button>
+        }
+      >
+        {ADJUSTMENTS.map((a) => (
+          <Slider
+            key={a.key}
+            label={a.label}
+            value={adj[a.key]}
+            min={a.min}
+            max={a.max}
+            step={a.step ?? 0.01}
+            unit={a.unit ?? ''}
+            onChange={(v) => setAdj(a.key, v)}
+            onCommit={() => setAdj(a.key, adj[a.key] ?? 0, true)}
+          />
+        ))}
+      </Section>
+
+      <Section
+        title="Duotone"
+        right={<Toggle checked={duo.enabled} onChange={(v) => setSection('duotone', { enabled: v }, true)} label="on" />}
+      >
+        {duo.enabled && (
+          <>
+            <div style={S.row}>
+              <span style={S.label}>Shadow</span>
+              <ColorSwatch value={duo.colorA} fallback="#111111" ColorPicker={ColorPicker} onApply={(hex) => setSection('duotone', { colorA: hex }, true)} />
+              <span style={S.label}>Highlight</span>
+              <ColorSwatch value={duo.colorB} fallback="#ffffff" ColorPicker={ColorPicker} onApply={(hex) => setSection('duotone', { colorB: hex }, true)} />
+            </div>
+            <Slider label="Intensity" value={duo.intensity ?? 1} min={0} max={1} onChange={(v) => setSection('duotone', { intensity: v })} onCommit={() => setSection('duotone', { intensity: duo.intensity ?? 1 }, true)} />
+          </>
+        )}
+      </Section>
+
+      <Section
+        title="Grain"
+        right={<Toggle checked={grain.enabled} onChange={(v) => setSection('grain', { enabled: v }, true)} label="on" />}
+      >
+        {grain.enabled && (
+          <>
+            <Slider label="Amount" value={grain.amount ?? 0.4} min={0} max={1} onChange={(v) => setSection('grain', { amount: v })} onCommit={() => setSection('grain', { amount: grain.amount ?? 0.4 }, true)} />
+            <Slider label="Size" value={grain.size ?? 1} min={1} max={8} step={0.5} onChange={(v) => setSection('grain', { size: v })} onCommit={() => setSection('grain', { size: grain.size ?? 1 }, true)} />
+          </>
+        )}
+      </Section>
+
+      <Section
+        title="Pattern"
+        right={<Toggle checked={pat.enabled} onChange={(v) => setSection('pattern', { enabled: v }, true)} label="on" />}
+      >
+        {pat.enabled && (
+          <>
+            <div style={S.row}>
+              <span style={S.label}>Type</span>
+              <select style={S.select} value={pat.type || 'dots'} onChange={(e) => setSection('pattern', { type: e.target.value }, true)}>
+                {PATTERN_TYPES.map((t) => (
+                  <option key={t} value={t}>
+                    {t}
+                  </option>
+                ))}
+              </select>
+              <span style={S.label}>Blend</span>
+              <select style={S.select} value={pat.blend || 'normal'} onChange={(e) => setSection('pattern', { blend: e.target.value }, true)}>
+                {PATTERN_BLENDS.map((b) => (
+                  <option key={b} value={b}>
+                    {b}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div style={S.row}>
+              <span style={S.label}>Color</span>
+              <ColorSwatch value={pat.color} fallback="#ffffff" ColorPicker={ColorPicker} onApply={(hex) => setSection('pattern', { color: hex }, true)} />
+              <span style={{ ...S.num, flex: 1, textAlign: 'left', color: 'var(--fg-3)' }}>tip: dark + multiply</span>
+            </div>
+            <Slider label="Scale" value={pat.scale ?? 1} min={0.25} max={4} step={0.25} onChange={(v) => setSection('pattern', { scale: v })} onCommit={() => setSection('pattern', { scale: pat.scale ?? 1 }, true)} />
+            <Slider label="Opacity" value={pat.opacity ?? 0.5} min={0} max={1} onChange={(v) => setSection('pattern', { opacity: v })} onCommit={() => setSection('pattern', { opacity: pat.opacity ?? 0.5 }, true)} />
+          </>
+        )}
+      </Section>
+
+      <Section title="Mask">
+        <div style={S.row}>
+          <span style={S.label}>Preset</span>
+          <select style={S.select} value={mask.preset || 'none'} onChange={(e) => setSection('mask', { preset: e.target.value }, true)}>
+            {MASK_PRESETS.map((m) => (
+              <option key={m} value={m}>
+                {m}
+              </option>
+            ))}
+          </select>
+        </div>
+        {mask.preset && mask.preset !== 'none' && (
+          <Slider label="Strength" value={mask.strength ?? 0.6} min={0} max={1} onChange={(v) => setSection('mask', { strength: v })} onCommit={() => setSection('mask', { strength: mask.strength ?? 0.6 }, true)} />
+        )}
+      </Section>
+
+      <Section title="Background">
+        <div style={{ ...S.row, gap: 10 }}>
+          {bg.maskAsset ? (
+            <>
+              <Toggle checked={bg.enabled} onChange={(v) => setSection('backgroundRemoved', { enabled: v }, true)} label="applied" />
+              <button
+                type="button"
+                style={{ ...S.reset, opacity: bgBusy ? 0.6 : 1 }}
+                disabled={bgBusy || !onRemoveBackground}
+                title="Run background removal again"
+                onClick={async () => {
+                  if (!onRemoveBackground) return;
+                  setBgBusy(true);
+                  try {
+                    const res = await onRemoveBackground(asset);
+                    if (res?.maskAsset) setSection('backgroundRemoved', { enabled: true, maskAsset: res.maskAsset }, true);
+                  } finally {
+                    setBgBusy(false);
+                  }
+                }}
+              >
+                {bgBusy ? 'removing…' : 'redo'}
+              </button>
+            </>
+          ) : (
+            <button
+              type="button"
+              style={{ ...S.btn, opacity: bgBusy ? 0.6 : 1 }}
+              disabled={bgBusy || !onRemoveBackground}
+              data-testid="photo-remove-bg"
+              onClick={async () => {
+                if (!onRemoveBackground) return;
+                setBgBusy(true);
+                try {
+                  const res = await onRemoveBackground(asset);
+                  if (res?.maskAsset) setSection('backgroundRemoved', { enabled: true, maskAsset: res.maskAsset }, true);
+                } finally {
+                  setBgBusy(false);
+                }
+              }}
+            >
+              {bgBusy ? 'Removing…' : '✦ Remove Background'}
+            </button>
+          )}
+        </div>
+      </Section>
+    </div>
+  );
+}
+
+export default PhotoKnobs;

package/apps/studio/client/styles/3-shell-maude.css

@@ -86,6 +86,23 @@
   border-radius: var(--radius-pill); background: var(--accent); border: 1.5px solid var(--bg-1);
 }
 
+/* feature-background-export-notification-center — menubar Exports button.
+   Mirrors .st-whatsnew's attribute-driven state (data-busy instead of
+   data-unseen — running/queued exports, not an unread count). */
+.st-exports {
+  position: relative; appearance: none; border: 0; background: transparent; cursor: pointer;
+  width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-sm);
+  color: var(--fg-1); font-size: 13px;
+}
+.st-exports:hover { background: var(--bg-3); color: var(--fg-0); }
+.st-exports[data-busy="true"] { color: var(--accent); }
+.st-exports__count {
+  position: absolute; top: -2px; right: -2px; min-width: 14px; height: 14px; padding: 0 3px;
+  display: grid; place-items: center; border-radius: var(--radius-pill);
+  background: var(--accent); color: var(--accent-fg); font-family: var(--font-mono);
+  font-size: 9px; font-weight: 700; line-height: 1; border: 1.5px solid var(--bg-1);
+}
+
 /* ─── Menubar dropdown ────────────────────────────────────────────────────── */
 .st-dropdown {
   position: absolute; top: 38px; min-width: 230px;
@@ -496,6 +513,28 @@
 .st-ap-cell:hover { border-color: var(--accent, var(--border-strong, var(--border-default))); background: var(--bg-3); }
 .st-ap-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xs); background: var(--bg-4, var(--bg-3)); display: block; }
 .st-ap-name { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* ─── StickerPicker (feature-whiteboard-annotation-improvements Phase 4) ──── */
+.st-sticker-picker { width: 640px; }
+.st-sticker-picker .input {
+  font-family: var(--font-body); font-size: var(--type-sm); color: var(--fg-0);
+  background: var(--bg-3); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
+  padding: var(--space-3) var(--space-4); width: 100%;
+  transition: border-color var(--dur-soft) var(--ease-out), box-shadow var(--dur-soft) var(--ease-out);
+}
+.st-sticker-picker .input::placeholder { color: var(--fg-3); }
+.st-sticker-picker .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
+.st-sp-body { max-height: 56vh; overflow-y: auto; padding: 2px; display: flex; flex-direction: column; gap: var(--space-5); }
+.st-sp-pack-hd { display: flex; align-items: baseline; gap: var(--space-2); padding: 0 2px; }
+.st-sp-pack-name { font-family: var(--font-mono); font-size: var(--type-xs); font-weight: 600; color: var(--fg-1); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
+.st-sp-pack-author { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-3); }
+.st-sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--space-2); }
+.st-sp-cell { appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 6px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-2); transition: border-color var(--dur-soft) var(--ease-out), background var(--dur-soft) var(--ease-out); }
+.st-sp-cell:hover { border-color: var(--accent, var(--border-strong, var(--border-default))); background: var(--bg-3); }
+.st-sp-thumb { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
+.st-sp-empty { color: var(--fg-2); font-family: var(--font-mono); font-size: var(--type-xs); padding: var(--space-6) 0; text-align: center; }
+.st-sp-ft { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
+.st-sp-ft a { color: var(--fg-2); }
 .st-cp-replace { width: 100%; justify-content: center; }
 /* Media "Replace…" — a full-width button, NOT inside the 3-col .st-cp-row grid
    (which would drop it into the 10px provenance-dot column and clip it). */
@@ -1870,6 +1909,25 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
   box-shadow: 0 -10px 18px -12px color-mix(in oklab, var(--bg-0) 80%, transparent);
 }
 .rb-dock { position: relative; }
+/* Proactive "remote has updates" nudge — a full-width primary button above the dock
+   trigger, shown when the tracking remote is ahead (status.remoteAhead). */
+.rb-getlatest { width: 100%; justify-content: flex-start; gap: var(--space-2); animation: rb-getlatest-in var(--dur-soft, 160ms) var(--ease-out, ease-out); }
+.rb-getlatest-tx { flex: 0 0 auto; }
+.rb-getlatest-sub { margin-left: auto; font-weight: 500; opacity: 0.9; font-size: var(--type-xs); white-space: nowrap; }
+@keyframes rb-getlatest-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .rb-getlatest, .rb-resume { animation: none; } }
+/* "Continue on <draft>" resume nudge — a subtle secondary row (not the primary blue),
+   shown above the dock trigger when you're on the Shared version but have a draft. */
+.rb-resume { display: flex; align-items: center; gap: var(--space-1); width: 100%; animation: rb-getlatest-in var(--dur-soft, 160ms) var(--ease-out, ease-out); }
+.rb-resume-go { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-2); min-width: 0; text-align: left; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-2); color: var(--fg-1); cursor: pointer; font-size: var(--type-sm); transition: border-color var(--dur-soft) var(--ease-out), background var(--dur-soft) var(--ease-out); }
+.rb-resume-go:hover { border-color: var(--border-strong); background: var(--bg-3); }
+.rb-resume-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.rb-resume-icon { color: var(--status-warn); flex: 0 0 auto; display: grid; place-items: center; }
+.rb-resume-tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rb-resume-arrow { color: var(--fg-3); flex: 0 0 auto; }
+.rb-resume-x { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-3); cursor: pointer; }
+.rb-resume-x:hover { background: var(--bg-3); color: var(--fg-1); }
+.rb-resume-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 /* The compact one-line trigger — "📁 <project> · ◐ <version> ⌃" */
 .rb-trigger {
   display: flex; align-items: center; gap: var(--space-2);
@@ -1966,6 +2024,7 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .rb-sheet-body { margin: 0; color: var(--fg-1); font-size: var(--type-md); line-height: var(--lh-md); }
 .rb-sheet-body b { color: var(--fg-0); font-weight: 600; }
 .rb-sheet-meta { margin: 0; color: var(--fg-2); font-size: var(--type-sm); line-height: var(--lh-md); }
+.rb-pr-url { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--type-xs); word-break: break-all; user-select: all; opacity: 0.8; }
 .rb-sheet-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-2); }
 @media (prefers-reduced-motion: reduce) {
   .rb-spin { animation-duration: 1ms; }

package/apps/studio/client/styles/4-components.css

@@ -1306,6 +1306,156 @@
   }
 }
 
+/* ───────── Export notification center — feature-background-export-notification-center ─────────
+   Panel shell reuses .help-modal-backdrop (above); list/item/progress are new
+   — no prior job-row or progress-bar component existed in the client. */
+.st-export-panel {
+  width: min(560px, 92vw);
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--u-bg-1);
+  color: var(--u-fg-0);
+  border: 1px solid var(--u-bg-3);
+  border-radius: var(--radius-md);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+.st-export-panel__body {
+  overflow-y: auto;
+  padding: 8px 14px 16px;
+}
+.st-export-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.st-export-item {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--u-bg-3);
+}
+.st-export-item:last-child {
+  border-bottom: none;
+}
+.st-export-item__hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.st-export-item__label {
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+}
+.st-export-item__ft {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 6px;
+}
+.st-export-item__filename {
+  color: var(--u-fg-2);
+  font-size: 12px;
+  font-family: var(--font-mono, monospace);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.st-export-item__error {
+  color: var(--u-status-error);
+  font-size: 12px;
+}
+.st-export-pill {
+  text-transform: uppercase;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 2px 6px;
+  border-radius: var(--radius-pill, 999px);
+  white-space: nowrap;
+}
+.st-export-pill--queued {
+  background: var(--u-bg-3);
+  color: var(--u-fg-2);
+}
+.st-export-pill--running {
+  background: var(--u-accent-bg);
+  color: var(--u-accent);
+}
+.st-export-pill--done {
+  background: color-mix(in oklab, var(--u-status-success) 18%, transparent);
+  color: var(--u-status-success);
+}
+.st-export-pill--failed {
+  background: color-mix(in oklab, var(--u-status-error) 18%, transparent);
+  color: var(--u-status-error);
+}
+.st-export-progress {
+  position: relative;
+  height: 4px;
+  border-radius: var(--radius-pill, 999px);
+  background: var(--u-bg-3);
+  overflow: hidden;
+}
+.st-export-progress-bar {
+  height: 100%;
+  background: var(--u-accent);
+  transition: width 0.2s ease-out;
+}
+.st-export-progress--indeterminate::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  width: 40%;
+  background: var(--u-accent);
+  border-radius: var(--radius-pill, 999px);
+  animation: st-export-indeterminate 1.2s ease-in-out infinite;
+}
+@keyframes st-export-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(350%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .st-export-progress--indeterminate::after {
+    animation-duration: 1ms;
+  }
+}
+.st-toast .st-export-progress {
+  margin-top: var(--space-1, 4px);
+}
+/* Busy state for the Save…/Download button — the bytes fetch + (native) the
+   OS save-dialog handoff can take several seconds on a large export; without
+   this the button just goes silent after the click. */
+.st-btn-spin {
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  margin-right: 5px;
+  vertical-align: -1px;
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  opacity: 0.75;
+  animation: st-btn-spin 0.7s linear infinite;
+}
+@keyframes st-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .st-btn-spin {
+    animation-duration: 1ms;
+  }
+}
+
 /* ───────── Guided tour (overlay) — feature-in-app-whats-new-tour Phase 3 ───────── */
 .mdcc-tour {
   position: fixed;