@1agh/maude 0.40.0 → 0.42.0

package/apps/studio/client/export-center.jsx

@@ -0,0 +1,426 @@
+// export-center.jsx — background export notification center
+// (feature-background-export-notification-center).
+//
+//   useExportCenter()  → headless handle (hydrate + WS upsert + toast/panel state)
+//   <ExportBadge>      → menubar entry point (busy pulse + running/queued count)
+//   <ExportToast>       → completion notice (bottom-left, mirrors WhatsNewToast)
+//   <ExportPanel>       → job list (reuses the help-modal backdrop)
+//
+// Structurally a near-exact twin of whats-new.jsx, but driven by live WS
+// `export:job` pushes (via `upsert`, called from app.jsx's WS message handler)
+// instead of a static feed. Styling lives in client/styles/3-shell-maude.css
+// (`.st-exports`) and 4-components.css (`.st-export-*`).
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { isNativeApp, saveExport } from './github.js';
+
+const FORMAT_LABELS = {
+  png: 'PNG',
+  pdf: 'PDF',
+  svg: 'SVG',
+  html: 'HTML',
+  pptx: 'PPTX',
+  canva: 'Canva',
+  zip: 'ZIP',
+  mp4: 'MP4',
+  webm: 'WebM',
+  gif: 'GIF',
+};
+const SCOPE_LABELS = {
+  selection: 'Selection',
+  artboard: 'Artboard',
+  'canvas-as-separate': 'Canvas → separate',
+  'project-raw': 'Project (raw)',
+};
+
+async function fetchJobBytes(id) {
+  const r = await fetch(`/_api/export-jobs/download?id=${encodeURIComponent(id)}`);
+  if (!r.ok) return null;
+  const disp = r.headers.get('Content-Disposition') || '';
+  const filename = /filename="([^"]+)"/.exec(disp)?.[1] || null;
+  const blob = await r.blob();
+  return { blob, filename };
+}
+
+async function autoDownloadBlob(id, fallbackName) {
+  const got = await fetchJobBytes(id);
+  if (!got) return;
+  const filename = got.filename || fallbackName || 'export';
+  const url = URL.createObjectURL(got.blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+async function saveNative(id, fallbackName) {
+  const got = await fetchJobBytes(id);
+  if (!got) return null;
+  const filename = got.filename || fallbackName || 'export';
+  const bytes = Array.from(new Uint8Array(await got.blob.arrayBuffer()));
+  return saveExport(filename, bytes);
+}
+
+export function useExportCenter() {
+  const [jobs, setJobs] = useState(() => new Map());
+  const [panelOpen, setPanelOpen] = useState(false);
+  const [toastQueue, setToastQueue] = useState([]);
+  const [savingIds, setSavingIds] = useState(() => new Set());
+  const prevStatusRef = useRef(new Map());
+  // Dedup guards (not state — re-rendering on these changing would be
+  // pointless; they only gate one-shot side effects).
+  const finalizedRef = useRef(new Set()); // auto-download fires at most once per job
+  const startToastShownRef = useRef(new Set()); // "Exporting…" toast fires at most once per job
+
+  useEffect(() => {
+    let alive = true;
+    fetch('/_api/export-jobs')
+      .then((r) => r.json())
+      .then((j) => {
+        if (!alive) return;
+        const m = new Map();
+        for (const job of Array.isArray(j?.jobs) ? j.jobs : []) {
+          m.set(job.id, job);
+          // Hydration is a SNAPSHOT, not a live transition — seed both guards
+          // so a page (re)load never replays a toast / auto-download for a
+          // job that already reached this status before we opened.
+          prevStatusRef.current.set(job.id, job.status);
+          startToastShownRef.current.add(job.id);
+        }
+        setJobs(m);
+      })
+      .catch(() => {
+        /* offline / restart — the badge just stays empty until a push arrives */
+      });
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  const upsert = useCallback((job) => {
+    if (!job || typeof job.id !== 'string') return;
+    setJobs((prev) => {
+      const next = new Map(prev);
+      next.set(job.id, job);
+      return next;
+    });
+  }, []);
+
+  // One toast per job, morphing in place as the job's live status changes
+  // (queued/running → done/failed) rather than stacking a separate "started"
+  // and "finished" toast. Detects two kinds of transitions:
+  //   - first time a job is seen active (queued/running) → surfaces it so the
+  //     user knows it's running in the background right after the dialog closes.
+  //   - a done/failed transition → surfaces it (or refreshes it in place if
+  //     it's still the front-of-queue toast from the "started" step above).
+  useEffect(() => {
+    const prevStatus = prevStatusRef.current;
+    const toSurface = [];
+    const justFinished = [];
+    // Single pass — read `was` for every job BEFORE prevStatus gets mutated
+    // below, so both the toast + auto-download decisions see the real
+    // "did this change just now" transition, not an already-updated ref.
+    for (const job of jobs.values()) {
+      const was = prevStatus.get(job.id);
+      const isActive = job.status === 'queued' || job.status === 'running';
+      const isFinished = job.status === 'done' || job.status === 'failed';
+      if (was === undefined && isActive && !startToastShownRef.current.has(job.id)) {
+        startToastShownRef.current.add(job.id);
+        toSurface.push(job.id);
+      } else if (was !== job.status && isFinished) {
+        toSurface.push(job.id);
+        justFinished.push(job);
+      }
+    }
+    for (const job of jobs.values()) prevStatus.set(job.id, job.status);
+
+    if (toSurface.length) {
+      setToastQueue((q) => {
+        const merged = q.filter((id) => !toSurface.includes(id));
+        return [...toSurface, ...merged].slice(0, 8);
+      });
+    }
+
+    // Native (Tauri) never auto-pops the OS save dialog — it would interrupt
+    // whatever the user is doing elsewhere. Always an explicit "Save…" click.
+    if (isNativeApp() || !justFinished.length) return;
+    for (const job of justFinished) {
+      if (job.status !== 'done') continue;
+      if (finalizedRef.current.has(job.id)) continue;
+      // Focus-gated: avoids duplicate downloads when multiple tabs share one
+      // dev-server and both receive the same WS push.
+      if (!document.hasFocus()) continue;
+      finalizedRef.current.add(job.id);
+      void autoDownloadBlob(job.id, job.filename);
+    }
+  }, [jobs]);
+
+  const list = useMemo(
+    () =>
+      Array.from(jobs.values()).sort((a, b) => (b.createdAt || '').localeCompare(a.createdAt || '')),
+    [jobs]
+  );
+  const runningCount = list.filter((j) => j.status === 'running').length;
+  const queuedCount = list.filter((j) => j.status === 'queued').length;
+
+  const dismissToast = useCallback(() => setToastQueue((q) => q.slice(1)), []);
+  const openPanel = useCallback(() => setPanelOpen(true), []);
+  const closePanel = useCallback(() => setPanelOpen(false), []);
+
+  const withSaving = useCallback(async (job, fn) => {
+    setSavingIds((prev) => new Set(prev).add(job.id));
+    try {
+      await fn();
+    } finally {
+      setSavingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(job.id);
+        return next;
+      });
+    }
+  }, []);
+
+  // Manual "Download" (web, unfocused-tab fallback) / "Save…" (native) — the
+  // toast/panel row action. Both mark the job finalized so the focus-gated
+  // auto-download effect above doesn't ALSO fire for it later, and both track
+  // a busy state (`savingIds`) so the button can show it's working instead of
+  // going silent while the bytes fetch + (for native) the OS dialog opens.
+  const download = useCallback(
+    async (job) => {
+      finalizedRef.current.add(job.id);
+      await withSaving(job, () => autoDownloadBlob(job.id, job.filename));
+    },
+    [withSaving]
+  );
+  const save = useCallback(
+    async (job) => {
+      finalizedRef.current.add(job.id);
+      await withSaving(job, () => saveNative(job.id, job.filename));
+    },
+    [withSaving]
+  );
+
+  const toastJobId = panelOpen ? null : (toastQueue[0] ?? null);
+
+  return {
+    jobs: list,
+    upsert,
+    runningCount,
+    queuedCount,
+    busyCount: runningCount + queuedCount,
+    panelOpen,
+    openPanel,
+    closePanel,
+    showToast: !!toastJobId,
+    toastJob: toastJobId ? (jobs.get(toastJobId) ?? null) : null,
+    dismissToast,
+    download,
+    save,
+    savingIds,
+  };
+}
+
+function jobLabel(job) {
+  const fmt = FORMAT_LABELS[job.format] || String(job.format || '').toUpperCase();
+  const scope = SCOPE_LABELS[job.scope] || job.scope;
+  return `${fmt} · ${scope}`;
+}
+
+// Native "Save…" opens the OS file picker; web "Download" streams a blob
+// through <a download> — distinct verbs, so the busy label stays distinct too
+// (the fetch-bytes step behind both can take several seconds on a large export).
+function saveActionLabel(saving) {
+  if (isNativeApp()) return saving ? 'Saving…' : 'Save…';
+  return saving ? 'Downloading…' : 'Download';
+}
+
+function ProgressBar({ progress }) {
+  if (!progress || !progress.total) {
+    return <div className="st-export-progress st-export-progress--indeterminate" aria-hidden="true" />;
+  }
+  const pct = Math.max(0, Math.min(100, Math.round((progress.current / progress.total) * 100)));
+  return (
+    <div
+      className="st-export-progress"
+      role="progressbar"
+      aria-valuenow={pct}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      <div className="st-export-progress-bar" style={{ width: `${pct}%` }} />
+    </div>
+  );
+}
+
+function StatusPill({ job }) {
+  const statusText =
+    job.status === 'queued'
+      ? 'Queued'
+      : job.status === 'running'
+        ? job.progress?.total
+          ? `${job.progress.current} of ${job.progress.total}`
+          : 'Rendering…'
+        : job.status === 'done'
+          ? 'Ready'
+          : 'Failed';
+  return <span className={`st-export-pill st-export-pill--${job.status}`}>{statusText}</span>;
+}
+
+export function ExportBadge({ center }) {
+  const busy = center.busyCount > 0;
+  return (
+    <button
+      type="button"
+      className="st-exports"
+      data-tour="exports"
+      data-busy={busy ? 'true' : 'false'}
+      aria-label={busy ? `Exports — ${center.busyCount} running` : 'Exports'}
+      data-tip="Exports"
+      onClick={center.openPanel}
+    >
+      <span aria-hidden="true">⬇</span>
+      {busy && (
+        <span className="st-exports__count" aria-hidden="true">
+          {center.busyCount}
+        </span>
+      )}
+    </button>
+  );
+}
+
+export function ExportToast({ center }) {
+  if (!center.showToast || !center.toastJob) return null;
+  const job = center.toastJob;
+  const pending = job.status === 'queued' || job.status === 'running';
+  const ok = job.status === 'done';
+  const saving = center.savingIds.has(job.id);
+  const finalize = () => {
+    if (isNativeApp()) void center.save(job);
+    else void center.download(job);
+  };
+  return (
+    <div className="st-toast" role="status" aria-live="polite">
+      <button type="button" className="st-toast-close" aria-label="Dismiss" onClick={center.dismissToast}>
+        ×
+      </button>
+      <div className="st-toast-hd">
+        <span aria-hidden="true">{pending ? '⋯' : ok ? '⬇' : '⚠'}</span>
+        {pending ? 'Exporting…' : ok ? 'Export ready' : 'Export failed'}
+      </div>
+      <div className="st-toast-title">{jobLabel(job)}</div>
+      {pending ? (
+        <>
+          <div className="st-toast-txt">Running in the background — you can keep working.</div>
+          <ProgressBar progress={job.progress} />
+        </>
+      ) : (
+        <div className="st-toast-txt">
+          {ok ? (job.filename ?? 'Ready to download.') : (job.error ?? 'Something went wrong.')}
+        </div>
+      )}
+      {ok && (
+        <div className="st-toast-actions">
+          <button
+            type="button"
+            className="btn btn--primary btn--sm"
+            onClick={finalize}
+            disabled={saving}
+          >
+            {saving && <span className="st-btn-spin" aria-hidden="true" />}
+            {saveActionLabel(saving)}
+          </button>
+          <button type="button" className="btn btn--ghost btn--sm" onClick={center.dismissToast}>
+            Dismiss
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ExportPanel({ center }) {
+  const { panelOpen, closePanel } = center;
+  useEffect(() => {
+    if (!panelOpen) return;
+    function onKey(e) {
+      if (e.key === 'Escape') closePanel();
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [panelOpen, closePanel]);
+
+  if (!panelOpen) return null;
+  return (
+    <div
+      className="help-modal-backdrop"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) closePanel();
+      }}
+    >
+      <div
+        className="st-export-panel"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="st-export-panel-title"
+      >
+        <header className="help-modal-hd">
+          <span className="title" id="st-export-panel-title">
+            Exports
+          </span>
+          <button
+            type="button"
+            className="help-modal-close"
+            aria-label="Close (Esc)"
+            onClick={closePanel}
+          >
+            ×
+          </button>
+        </header>
+        <div className="st-export-panel__body">
+          {center.jobs.length === 0 ? (
+            <p className="mdcc-wn-empty">No exports yet.</p>
+          ) : (
+            <ul className="st-export-list">
+              {center.jobs.map((job) => (
+                <li key={job.id} className="st-export-item">
+                  <div className="st-export-item__hd">
+                    <span className="st-export-item__label">{jobLabel(job)}</span>
+                    <StatusPill job={job} />
+                  </div>
+                  {(job.status === 'queued' || job.status === 'running') && (
+                    <ProgressBar progress={job.progress} />
+                  )}
+                  {job.status === 'done' && (
+                    <div className="st-export-item__ft">
+                      <span className="st-export-item__filename">{job.filename}</span>
+                      <button
+                        type="button"
+                        className="btn btn--ghost btn--sm"
+                        disabled={center.savingIds.has(job.id)}
+                        onClick={() => (isNativeApp() ? center.save(job) : center.download(job))}
+                      >
+                        {center.savingIds.has(job.id) && (
+                          <span className="st-btn-spin" aria-hidden="true" />
+                        )}
+                        {saveActionLabel(center.savingIds.has(job.id))}
+                      </button>
+                    </div>
+                  )}
+                  {job.status === 'failed' && (
+                    <div className="st-export-item__ft">
+                      <span className="st-export-item__error">{job.error ?? 'Export failed.'}</span>
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/studio/client/github.js

@@ -95,6 +95,14 @@ export const openLocalProject = (path) => invoke('open_local_project', { path })
  */
 export const saveExport = (filename, bytes) => invoke('save_export', { filename, bytes });
 
+/**
+ * Native "open file" for media upload — the read counterpart to saveExport.
+ * WKWebView won't present the file panel for an HTML <input type=file>, so the
+ * AssetPicker uses this in the desktop app. Returns { name, bytes:[...] } or null
+ * (cancelled). Browser build uses the <input type=file> path instead.
+ */
+export const pickMediaFile = () => invoke('pick_media_file');
+
 // ── Tauri shell: auto-update (Phase 32 / Task 1) ────────────────────────────────
 // The shell downloads + stages a newer build in the background and emits
 // `update-ready` with { version, notes }. The client shows a banner; clicking

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;
@@ -353,6 +370,13 @@
 .st-rp-tab .st-rp-tabct { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
 .st-rp-body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
 .st-rp-hd { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-2); }
+/* Stage H (INV-3) edit-scope strip — local (this element) vs shared (edits N places). */
+.st-scope { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--type-xs); border-bottom: 1px solid var(--border-subtle); flex: none; animation: st-pop var(--dur-soft) var(--ease-out); }
+.st-scope-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
+.st-scope--local { color: var(--fg-2); }
+.st-scope--local .st-scope-dot { background: var(--fg-3); }
+.st-scope--shared { color: var(--accent); }
+.st-scope--shared .st-scope-dot { background: var(--accent); }
 .st-rp-empty { color: var(--fg-2); font-size: var(--type-sm); line-height: 1.6; display: flex; flex-direction: column; gap: var(--space-4); }
 
 /* comment pin (inline badge in the panel) */
@@ -476,6 +500,24 @@
 .st-export-recent-row:hover { background: var(--bg-2); }
 .st-export-recent-row .st-mono { color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
 
+/* ─── AssetPicker (feature-element-editing-robustness Stage F1) ───────────── */
+.st-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--fg-1); font-family: var(--font-mono); font-size: var(--type-xs); padding: 0 12px; transition: background var(--dur-soft) var(--ease-out), border-color var(--dur-soft) var(--ease-out); }
+.st-btn:hover { background: var(--bg-3); border-color: var(--border-strong, var(--border-default)); }
+.st-btn:disabled { opacity: 0.55; cursor: default; }
+.st-asset-picker { width: 620px; }
+.st-ap-toolbar { display: flex; align-items: center; gap: var(--space-3); }
+.st-ap-err { color: var(--danger, #e5484d); font-family: var(--font-mono); font-size: var(--type-xs); }
+.st-ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-3); max-height: 52vh; overflow-y: auto; padding: 2px; }
+.st-ap-empty { grid-column: 1 / -1; color: var(--fg-2); font-family: var(--font-mono); font-size: var(--type-xs); padding: var(--space-6) 0; text-align: center; }
+.st-ap-cell { appearance: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-2); text-align: left; transition: border-color var(--dur-soft) var(--ease-out), background var(--dur-soft) var(--ease-out); }
+.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; }
+.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). */
+.st-cp-mediabtn { padding: var(--space-1) 0 var(--space-2); }
+
 /* ─── Inspector panel fields / layers / css (Plan C P11–P13) ───────────────
  * Lifted from Studio.css; complements the already-present `.st-insp-row`,
  * `.st-insp-label`, `.st-rp-*`. */
@@ -716,6 +758,15 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .st-cp-boxv--mb, .st-cp-boxv--pb { bottom: 1px; left: 50%; transform: translateX(-50%); }
 .st-cp-boxv--ml, .st-cp-boxv--pl { left: 0; top: 50%; transform: translateY(-50%); }
 .st-cp-boxv--mr, .st-cp-boxv--pr { right: 0; top: 50%; transform: translateY(-50%); }
+/* feature-element-editing-robustness Stage B — Position inset widget. One ring
+   (no nested padding box): the 4 inset inputs sit on the outer box edges around
+   a centered core showing the current `position` keyword (Figma constraints box). */
+.st-cp-boxv--it { top: 1px; left: 50%; transform: translateX(-50%); }
+.st-cp-boxv--ib { bottom: 1px; left: 50%; transform: translateX(-50%); }
+.st-cp-boxv--il { left: 0; top: 50%; transform: translateY(-50%); }
+.st-cp-boxv--ir { right: 0; top: 50%; transform: translateY(-50%); }
+.st-cp-boxtag--i { color: var(--accent); }
+.st-cp-boxcore--pos { text-transform: none; letter-spacing: 0; }
 .st-cp-boxhint { display: flex; flex-wrap: wrap; gap: var(--space-1); }
 .st-cp-boxhint + .st-cp-row { margin-top: var(--space-1); }
 .st-cp-chip { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--border-default); border-radius: var(--radius-xs); padding: 1px 6px; }
@@ -762,6 +813,20 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .st-cp-add:hover { border-color: var(--accent); color: var(--fg-0); }
 .st-cp-note { font-size: 10px; color: var(--fg-2); font-style: italic; }
 
+/* Stage M — Fixed / Hug / Fill sizing-mode segmented control (per axis). */
+.st-cp-modes { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-1); }
+.st-cp-modeseg { display: flex; align-items: stretch; gap: var(--space-1); }
+.st-cp-modeax { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }
+.st-cp-modebtn { flex: 1; appearance: none; cursor: pointer; border: 1px solid var(--border-default); background: var(--bg-3); color: var(--fg-1); font-family: var(--font-mono); font-size: 10px; min-height: 22px; border-radius: var(--radius-xs); padding: 0 var(--space-1); }
+.st-cp-modebtn:hover:not(.is-active):not(:disabled) { background: var(--bg-4); color: var(--fg-0); }
+.st-cp-modebtn.is-active { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
+.st-cp-modebtn:disabled { opacity: 0.5; cursor: default; }
+/* Stage M — sub-header for the flex-child row group + the make-flex CTA. */
+.st-cp-subhd { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--space-2); }
+.st-cp-makeflex { align-self: flex-start; appearance: none; cursor: pointer; border: 1px dashed var(--border-default); background: transparent; color: var(--fg-1); font-family: var(--font-mono); font-size: var(--type-xs); border-radius: var(--radius-xs); padding: 4px var(--space-2); }
+.st-cp-makeflex:hover:not(:disabled) { border-color: var(--accent); color: var(--fg-0); }
+.st-cp-makeflex:disabled { opacity: 0.5; cursor: default; }
+
 /* provenance legend */
 .st-cp-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-1); border-top: 1px solid var(--border-subtle); }
 .st-cp-legend span { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }