@1agh/maude 0.50.0 → 0.51.1

package/apps/studio/client/report-bug.jsx

@@ -0,0 +1,590 @@
+// client/report-bug.jsx — the Report-a-Bug dialog (feature-bug-report-button).
+//
+// Consent-first by construction (docs/report-schema.md): the dialog's middle
+// step IS the payload preview — every optional item (screenshot, log tail,
+// project name, active canvas, crash logs) has its own checkbox, description
+// is the only mandatory field, and nothing transmits until "Send report".
+// Screenshots can be redacted in place (black-box rects, flattened into the
+// PNG client-side — the original pixels never leave the machine).
+//
+// Transport: POST /_api/report (dev-server proxy → cloud intake). Cloud down
+// or declined → POST /_api/report-fallback writes the bundle under
+// `<designRoot>/_reports/` and we open a prefilled public-issue URL (text
+// only — media never goes to the public repo).
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { invoke, isNativeApp, openGitHubUrl } from './github.js';
+
+const MAX_SHOTS = 3;
+const PUBLIC_ISSUES_URL = 'https://github.com/1aGh/maude/issues/new';
+
+function randHex(n) {
+  const bytes = new Uint8Array(n / 2);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+function installId() {
+  try {
+    let id = localStorage.getItem('maude-install-id');
+    if (!id) {
+      id = `i-${randHex(12)}`;
+      localStorage.setItem('maude-install-id', id);
+    }
+    return id;
+  } catch {
+    return null;
+  }
+}
+
+/** Flatten one screenshot: source image + redaction rects → PNG blob. */
+async function flattenShot(shot) {
+  const img = new Image();
+  img.src = shot.url;
+  await img.decode();
+  const canvas = document.createElement('canvas');
+  canvas.width = img.naturalWidth;
+  canvas.height = img.naturalHeight;
+  const c2d = canvas.getContext('2d');
+  c2d.drawImage(img, 0, 0);
+  c2d.fillStyle = '#000';
+  for (const r of shot.rects) {
+    c2d.fillRect(
+      r.x * img.naturalWidth,
+      r.y * img.naturalHeight,
+      r.w * img.naturalWidth,
+      r.h * img.naturalHeight
+    );
+  }
+  return new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
+}
+
+const blobToDataUrl = (blob) =>
+  new Promise((resolve) => {
+    const fr = new FileReader();
+    fr.onload = () => resolve(fr.result);
+    fr.readAsDataURL(blob);
+  });
+
+/** One screenshot preview tile: redact-mode drag draws normalized black rects. */
+function ShotTile({ shot, redacting, onRects, onRemove }) {
+  const boxRef = useRef(null);
+  const dragRef = useRef(null);
+  const [draft, setDraft] = useState(null);
+
+  const norm = (e) => {
+    const b = boxRef.current.getBoundingClientRect();
+    return {
+      x: Math.min(Math.max((e.clientX - b.left) / b.width, 0), 1),
+      y: Math.min(Math.max((e.clientY - b.top) / b.height, 0), 1),
+    };
+  };
+
+  return (
+    <div className="rb-shot" data-testid="report-bug-shot">
+      <div
+        ref={boxRef}
+        className={`rb-shot-box${redacting ? ' is-redacting' : ''}`}
+        onPointerDown={(e) => {
+          if (!redacting) return;
+          e.currentTarget.setPointerCapture(e.pointerId);
+          dragRef.current = norm(e);
+          setDraft({ ...dragRef.current, w: 0, h: 0 });
+        }}
+        onPointerMove={(e) => {
+          if (!redacting || !dragRef.current) return;
+          const p = norm(e);
+          const s = dragRef.current;
+          setDraft({
+            x: Math.min(s.x, p.x),
+            y: Math.min(s.y, p.y),
+            w: Math.abs(p.x - s.x),
+            h: Math.abs(p.y - s.y),
+          });
+        }}
+        onPointerUp={() => {
+          if (!redacting || !dragRef.current) return;
+          dragRef.current = null;
+          if (draft && draft.w > 0.005 && draft.h > 0.005) onRects([...shot.rects, draft]);
+          setDraft(null);
+        }}
+      >
+        <img src={shot.url} alt="screenshot to attach" draggable={false} />
+        {[...shot.rects, ...(draft ? [draft] : [])].map((r, i) => (
+          <div
+            key={i}
+            className="rb-redact-rect"
+            style={{
+              left: `${r.x * 100}%`,
+              top: `${r.y * 100}%`,
+              width: `${r.w * 100}%`,
+              height: `${r.h * 100}%`,
+            }}
+          />
+        ))}
+      </div>
+      <div className="rb-shot-actions">
+        {shot.rects.length > 0 && (
+          <button type="button" className="rb-link" onClick={() => onRects([])}>
+            Clear redactions
+          </button>
+        )}
+        <button type="button" className="rb-link" data-testid="report-bug-shot-remove" onClick={onRemove}>
+          Remove
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function ReportBugDialog({ open, onClose }) {
+  const [step, setStep] = useState('describe'); // describe | preview | sending | done | fallback
+  const [description, setDescription] = useState('');
+  const [bundle, setBundle] = useState(null);
+  const [shots, setShots] = useState([]); // {url, blob, rects:[{x,y,w,h} normalized]}
+  const [crashLogs, setCrashLogs] = useState([]); // native only: {name, firstLine}
+  const [consent, setConsent] = useState({
+    logTail: true,
+    activeCanvas: true,
+    projectName: false,
+    crashLogs: true,
+  });
+  const [redacting, setRedacting] = useState(false);
+  const [result, setResult] = useState(null); // {issueUrl, issueNumber} | {fallbackDir}
+  const [error, setError] = useState(null);
+
+  const reset = useCallback(() => {
+    for (const s of shots) URL.revokeObjectURL(s.url);
+    setStep('describe');
+    setDescription('');
+    setBundle(null);
+    setShots([]);
+    setCrashLogs([]);
+    setRedacting(false);
+    setResult(null);
+    setError(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shots]);
+
+  const addShotBlob = useCallback((blob) => {
+    if (!blob) return;
+    setShots((prev) =>
+      prev.length >= MAX_SHOTS
+        ? prev
+        : [...prev, { url: URL.createObjectURL(blob), blob, rects: [] }]
+    );
+  }, []);
+
+  // On open: pull the scrubbed bundle, capture the active artboard, list
+  // native crash logs. Every leg fails soft — a report with fewer attachments
+  // beats no dialog.
+  useEffect(() => {
+    if (!open) return;
+    let alive = true;
+    fetch('/_api/debug-bundle')
+      .then((r) => (r.ok ? r.json() : null))
+      .then((b) => alive && setBundle(b))
+      .catch(() => {});
+    fetch('/_api/export', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ format: 'png', scope: 'artboard' }),
+    })
+      .then((r) => (r.ok ? r.blob() : null))
+      .then((blob) => alive && blob && addShotBlob(blob))
+      .catch(() => {});
+    if (isNativeApp()) {
+      invoke('list_crash_logs')
+        .then((logs) => alive && setCrashLogs(Array.isArray(logs) ? logs.slice(0, 3) : []))
+        .catch(() => {});
+    }
+    return () => {
+      alive = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  // Paste-to-attach — the lane that covers native-shell bugs the canvas
+  // capture can't see (user screenshots the window, pastes here).
+  useEffect(() => {
+    if (!open) return;
+    function onPaste(e) {
+      for (const item of e.clipboardData?.items ?? []) {
+        if (item.type.startsWith('image/')) addShotBlob(item.getAsFile());
+      }
+    }
+    window.addEventListener('paste', onPaste);
+    return () => window.removeEventListener('paste', onPaste);
+  }, [open, addShotBlob]);
+
+  if (!open) return null;
+
+  const close = () => {
+    reset();
+    onClose();
+  };
+
+  async function buildReport() {
+    const report = {
+      schema: 'maude-report/v1',
+      reportId: `r-${randHex(8)}`,
+      createdAt: new Date().toISOString(),
+      app: {
+        maudeVersion: bundle?.app?.maudeVersion ?? 'unknown',
+        surface: isNativeApp() ? 'native' : 'browser',
+        platform: bundle?.app?.platform ?? 'unknown',
+        arch: bundle?.app?.arch ?? 'unknown',
+      },
+      context: {
+        projectName: consent.projectName ? (bundle?.context?.projectName ?? null) : null,
+        activeCanvas: consent.activeCanvas ? (bundle?.context?.activeCanvas ?? null) : null,
+      },
+      description: description.trim(),
+      attachments: {
+        screenshots: shots.length,
+        serverLogTail: consent.logTail && !!bundle?.logs?.serverLogTail,
+        crashLogs: consent.crashLogs ? crashLogs.length : 0,
+      },
+      logs: {},
+    };
+    const id = installId();
+    if (id) report.installId = id;
+    if (consent.logTail && bundle?.logs?.serverLogTail) {
+      report.logs.serverLogTail = bundle.logs.serverLogTail;
+    }
+    if (consent.crashLogs && crashLogs.length && isNativeApp()) {
+      report.logs.crashLogs = [];
+      for (const log of crashLogs) {
+        try {
+          const body = await invoke('read_crash_log', { name: log.name });
+          report.logs.crashLogs.push({ name: log.name, body });
+        } catch {
+          /* an unreadable crash log is dropped, not fatal */
+        }
+      }
+    }
+    return report;
+  }
+
+  async function send() {
+    setStep('sending');
+    setError(null);
+    try {
+      const report = await buildReport();
+      const form = new FormData();
+      form.set('report', JSON.stringify(report));
+      for (const shot of shots) {
+        form.append('screenshot', await flattenShot(shot), 'screenshot.png');
+      }
+      const res = await fetch('/_api/report', { method: 'POST', body: form });
+      const json = await res.json().catch(() => null);
+      if (res.ok && json?.ok) {
+        setResult(json);
+        setStep('done');
+        return;
+      }
+      setError(json?.error ?? `report failed (HTTP ${res.status})`);
+      setStep('fallback');
+    } catch {
+      setError('Maude could not reach the report service.');
+      setStep('fallback');
+    }
+  }
+
+  async function saveFallback() {
+    try {
+      const report = await buildReport();
+      const screenshots = [];
+      for (const shot of shots) screenshots.push(await blobToDataUrl(await flattenShot(shot)));
+      const res = await fetch('/_api/report-fallback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ report, screenshots }),
+      });
+      const json = await res.json().catch(() => null);
+      const title = encodeURIComponent(report.description.split('\n')[0].slice(0, 80));
+      const body = encodeURIComponent(
+        `${report.description}\n\n> Maude ${report.app.maudeVersion} · ${report.app.platform} ${report.app.arch} · ${report.app.surface}\n> Local report bundle: \`${json?.dir ?? '.design/_reports/'}\` (attach its files here)`
+      );
+      const url = `${PUBLIC_ISSUES_URL}?title=${title}&body=${body}&labels=report`;
+      if (isNativeApp()) {
+        try {
+          await openGitHubUrl(url);
+        } catch {
+          window.open(url, '_blank', 'noopener');
+        }
+      } else {
+        window.open(url, '_blank', 'noopener');
+      }
+      setResult({ fallbackDir: json?.dir ?? null });
+      setStep('done');
+    } catch {
+      setError('Saving the local bundle failed too — please file the issue by hand.');
+    }
+  }
+
+  const canPreview = description.trim().length > 0;
+
+  return (
+    <div className="help-modal-backdrop" onClick={close} data-testid="report-bug-dialog">
+      <div
+        className="help-modal rb-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="rb-title"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <header className="help-modal-hd">
+          <span className="title" id="rb-title">
+            Report a bug
+          </span>
+          <button type="button" className="help-modal-close" onClick={close} aria-label="Close">
+            ×
+          </button>
+        </header>
+
+        <div className="help-modal-body rb-body">
+          {step === 'describe' && (
+            <>
+              <label className="rb-label" htmlFor="rb-desc">
+                What happened? What did you expect instead?
+              </label>
+              <textarea
+                id="rb-desc"
+                className="rb-desc"
+                data-testid="report-bug-description"
+                rows={5}
+                autoFocus
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="e.g. Clicking Export → PNG shows a spinner forever…"
+              />
+              <p className="rb-hint">
+                Next you'll see exactly what gets attached — nothing is sent until you approve it.
+              </p>
+              <footer className="rb-actions">
+                <button type="button" className="rb-btn" onClick={close}>
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  className="rb-btn rb-primary"
+                  data-testid="report-bug-preview"
+                  disabled={!canPreview}
+                  onClick={() => setStep('preview')}
+                >
+                  Review &amp; attach
+                </button>
+              </footer>
+            </>
+          )}
+
+          {step === 'preview' && (
+            <>
+              <div className="rb-section">
+                <div className="rb-section-hd">
+                  <span>Screenshots ({shots.length})</span>
+                  {shots.length > 0 && (
+                    <button
+                      type="button"
+                      className={`rb-link${redacting ? ' is-on' : ''}`}
+                      data-testid="report-bug-redact"
+                      onClick={() => setRedacting((v) => !v)}
+                    >
+                      {redacting ? 'Done redacting' : 'Redact…'}
+                    </button>
+                  )}
+                </div>
+                {shots.length === 0 ? (
+                  <p className="rb-hint">
+                    No screenshot attached. Paste one (⌘V) to add it — up to {MAX_SHOTS}.
+                  </p>
+                ) : (
+                  <>
+                    {redacting && (
+                      <p className="rb-hint">Drag over anything private — it ships as solid black.</p>
+                    )}
+                    <div className="rb-shots">
+                      {shots.map((shot, i) => (
+                        <ShotTile
+                          key={shot.url}
+                          shot={shot}
+                          redacting={redacting}
+                          onRects={(rects) =>
+                            setShots((prev) => prev.map((s, j) => (j === i ? { ...s, rects } : s)))
+                          }
+                          onRemove={() => {
+                            URL.revokeObjectURL(shot.url);
+                            setShots((prev) => prev.filter((_, j) => j !== i));
+                          }}
+                        />
+                      ))}
+                    </div>
+                    {shots.length < MAX_SHOTS && (
+                      <p className="rb-hint">Paste (⌘V) to attach another screenshot.</p>
+                    )}
+                  </>
+                )}
+              </div>
+
+              <div className="rb-section">
+                <div className="rb-section-hd">
+                  <span>Included with the report</span>
+                </div>
+                <label className="rb-check">
+                  <input type="checkbox" checked disabled />
+                  <span>
+                    Maude {bundle?.app?.maudeVersion ?? '…'} · {bundle?.app?.platform ?? '…'}{' '}
+                    {bundle?.app?.arch ?? ''} · {isNativeApp() ? 'desktop app' : 'browser'}
+                  </span>
+                </label>
+                {bundle?.context?.activeCanvas && (
+                  <label className="rb-check">
+                    <input
+                      type="checkbox"
+                      checked={consent.activeCanvas}
+                      onChange={(e) => setConsent({ ...consent, activeCanvas: e.target.checked })}
+                    />
+                    <span>
+                      Active canvas path — <code>{bundle.context.activeCanvas}</code>
+                    </span>
+                  </label>
+                )}
+                {bundle?.context?.projectName && (
+                  <label className="rb-check">
+                    <input
+                      type="checkbox"
+                      checked={consent.projectName}
+                      onChange={(e) => setConsent({ ...consent, projectName: e.target.checked })}
+                    />
+                    <span>
+                      Project name — <code>{bundle.context.projectName}</code>
+                    </span>
+                  </label>
+                )}
+                {bundle?.logs?.serverLogTail ? (
+                  <label className="rb-check">
+                    <input
+                      type="checkbox"
+                      data-testid="report-bug-consent-logs"
+                      checked={consent.logTail}
+                      onChange={(e) => setConsent({ ...consent, logTail: e.target.checked })}
+                    />
+                    <span>
+                      Recent server log ({bundle.logs.serverLogTail.split('\n').length} lines,
+                      paths &amp; secrets scrubbed) —{' '}
+                      <details className="rb-details">
+                        <summary>view</summary>
+                        <pre className="rb-log">{bundle.logs.serverLogTail}</pre>
+                      </details>
+                    </span>
+                  </label>
+                ) : null}
+                {isNativeApp() && crashLogs.length > 0 && (
+                  <label className="rb-check">
+                    <input
+                      type="checkbox"
+                      checked={consent.crashLogs}
+                      onChange={(e) => setConsent({ ...consent, crashLogs: e.target.checked })}
+                    />
+                    <span>
+                      Crash logs ({crashLogs.length}) — <code>{crashLogs.map((l) => l.name).join(', ')}</code>
+                    </span>
+                  </label>
+                )}
+              </div>
+
+              <p className="rb-hint">
+                Your description and the system info above become a{' '}
+                <strong>public GitHub issue</strong>; screenshots and logs go to a private
+                repository only maintainers can open.
+              </p>
+              <footer className="rb-actions">
+                <button type="button" className="rb-btn" onClick={() => setStep('describe')}>
+                  Back
+                </button>
+                <button
+                  type="button"
+                  className="rb-btn rb-primary"
+                  data-testid="report-bug-send"
+                  onClick={send}
+                >
+                  Send report
+                </button>
+              </footer>
+            </>
+          )}
+
+          {step === 'sending' && <p className="rb-hint">Sending your report…</p>}
+
+          {step === 'done' && (
+            <>
+              {result?.issueUrl ? (
+                <p>
+                  Thank you — your report is filed as{' '}
+                  <button
+                    type="button"
+                    className="rb-link"
+                    data-testid="report-bug-issue-link"
+                    onClick={() => {
+                      if (isNativeApp()) {
+                        openGitHubUrl(result.issueUrl).catch(() =>
+                          navigator.clipboard?.writeText(result.issueUrl)
+                        );
+                      } else {
+                        window.open(result.issueUrl, '_blank', 'noopener');
+                      }
+                    }}
+                  >
+                    report #{result.issueNumber}
+                  </button>
+                  {' '}
+                  on the public Maude issue tracker. Screenshots and logs stay in a private
+                  repository only maintainers can open — the issue links to them.
+                </p>
+              ) : (
+                <p>
+                  The bundle is saved locally
+                  {result?.fallbackDir ? (
+                    <>
+                      {' '}
+                      at <code>{result.fallbackDir}</code>
+                    </>
+                  ) : null}{' '}
+                  and a prefilled GitHub issue was opened — attach the bundle files there.
+                </p>
+              )}
+              <footer className="rb-actions">
+                <button type="button" className="rb-btn rb-primary" onClick={close}>
+                  Done
+                </button>
+              </footer>
+            </>
+          )}
+
+          {step === 'fallback' && (
+            <>
+              <p className="rb-error" data-testid="report-bug-error">
+                {error}
+              </p>
+              <p className="rb-hint">
+                You can save the report locally instead and file it on GitHub yourself — the
+                prefilled issue carries the text; screenshots stay on this machine unless you
+                attach them by hand.
+              </p>
+              <footer className="rb-actions">
+                <button type="button" className="rb-btn" onClick={() => setStep('preview')}>
+                  Back
+                </button>
+                <button type="button" className="rb-btn rb-primary" onClick={saveFallback}>
+                  Save locally &amp; open GitHub
+                </button>
+              </footer>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1993,6 +1993,8 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .gi-rail { position: relative; flex: 0 0 auto; margin-top: auto; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: var(--space-2); }
 .gi-rail-hint { font-size: var(--type-xs); color: var(--fg-2); padding: var(--space-1) var(--space-1); }
 .gi-rail-signin { width: 100%; justify-content: center; }
+.gi-rail-confirm { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-2); }
+.gi-rail-confirm .gi-rail-hint { flex: 1 1 100%; padding: 0; }
 .gi-rail-err { font-size: var(--type-xs); color: var(--status-error); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gi-avatar { border-radius: var(--radius-pill); display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--accent-fg); background: var(--accent); flex: 0 0 auto; }
 .gi-rail-account { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-1) var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--fg-0); cursor: pointer; text-align: left; }

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

@@ -1875,3 +1875,87 @@
   flex-direction: column;
   gap: 6px;
 }
+
+/* ----- Report-a-Bug dialog (feature-bug-report-button) -----
+   Reuses the help-modal shell; rb-* covers the consent checklist, screenshot
+   tiles, and the redaction overlay. Same DS voice: hard edges, mono, tokens. */
+.rb-modal { width: min(640px, 100%); }
+.rb-body { display: flex; flex-direction: column; gap: var(--u-s-3); }
+.rb-label { font-weight: 700; color: var(--u-fg-0); }
+.rb-desc {
+  width: 100%;
+  resize: vertical;
+  background: var(--u-bg-0);
+  border: 1px solid var(--u-border);
+  color: var(--u-fg-0);
+  font-family: var(--u-font-mono);
+  font-size: var(--type-xs);
+  padding: var(--u-s-2);
+}
+.rb-desc:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.rb-hint { color: var(--u-fg-2); }
+.rb-error { color: var(--u-danger, #c0392b); }
+.rb-section { display: flex; flex-direction: column; gap: var(--u-s-1); }
+.rb-section-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 700;
+  color: var(--u-fg-0);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-sku);
+  font-size: 10px;
+}
+.rb-check { display: flex; gap: var(--u-s-2); align-items: baseline; cursor: pointer; }
+.rb-check input { accent-color: var(--u-accent, currentColor); }
+.rb-check code { color: var(--u-fg-0); }
+.rb-details summary { cursor: pointer; color: var(--u-fg-2); }
+.rb-log {
+  max-height: 160px;
+  overflow: auto;
+  background: var(--u-bg-0);
+  border: 1px solid var(--u-border);
+  padding: var(--u-s-2);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.rb-shots { display: flex; flex-wrap: wrap; gap: var(--u-s-2); }
+.rb-shot { display: flex; flex-direction: column; gap: 4px; }
+.rb-shot-box {
+  position: relative;
+  max-width: 260px;
+  border: 1px solid var(--u-border);
+  background: var(--u-bg-0);
+  user-select: none;
+}
+.rb-shot-box img { display: block; max-width: 100%; height: auto; }
+.rb-shot-box.is-redacting { cursor: crosshair; }
+.rb-shot-box.is-redacting img { pointer-events: none; }
+.rb-redact-rect { position: absolute; background: #000; pointer-events: none; }
+.rb-shot-actions { display: flex; gap: var(--u-s-2); }
+.rb-link {
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: var(--u-fg-1);
+  text-decoration: underline;
+  cursor: pointer;
+  font-family: var(--u-font-mono);
+  font-size: var(--type-xs);
+}
+.rb-link:hover, .rb-link.is-on { color: var(--u-fg-0); }
+.rb-actions { display: flex; justify-content: flex-end; gap: var(--u-s-2); margin-top: var(--u-s-2); }
+.rb-btn {
+  background: var(--u-bg-2);
+  border: 1px solid var(--u-fg-0);
+  color: var(--u-fg-0);
+  font-family: var(--u-font-mono);
+  font-size: var(--type-xs);
+  padding: var(--u-s-1) var(--u-s-3);
+  cursor: pointer;
+}
+.rb-btn:hover { background: var(--u-bg-3); }
+.rb-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.rb-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
+.rb-primary { background: var(--u-fg-0); color: var(--u-bg-0); }
+.rb-primary:hover { background: var(--u-fg-1); }