@1agh/maude 0.41.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/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;

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;

package/apps/studio/config.schema.json

@@ -47,7 +47,7 @@
     "themeDefault": {
       "type": "string",
       "enum": ["dark", "light"],
-      "description": "Default theme attribute (data-theme) for new canvases.",
+      "description": "Default theme attribute (data-theme) for new canvases. Can only ever be a single theme name — it is NOT the signal for whether a DS ships more than one theme. For that, check 'designSystems[].themes'.",
       "default": "dark"
     },
     "tokensCssRel": {
@@ -187,7 +187,7 @@
           "themes": {
             "type": "array",
             "items": { "type": "string" },
-            "description": "Optional list of theme names this DS supports (used by the System view's theme toggle when more than one theme is declared)."
+            "description": "Authoritative list of theme names this DS's tokens CSS actually ships (e.g. ['dark','light']). This is the ONLY field that should be checked to decide whether a DS is dual-theme — 'themeDefault' can never hold 'both' (enum is dark|light only), so a single-theme entry MUST still list its one theme (e.g. ['dark']), not omit the field. Bootstrap/re-bootstrap always populates this from the theme-default discovery answer. Drives the System view's theme toggle, design-system-completeness-critic V18/V18c, and /design:new step 9's per-theme reality-check capture."
           },
           "newCanvasDir": {
             "type": "string",