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

@@ -513,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). */
@@ -1887,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);
@@ -1983,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/commands/edit-source-command.ts

@@ -46,6 +46,14 @@ export interface EditSourcePayload {
   before: string | null;
   /** Value after the edit. `null` = the edit removed the prop/attr (the reset path). */
   after: string | null;
+  /**
+   * `op:'text'` only — which rendered instance this edit targeted (index among
+   * same-cd-id DOM nodes). Needed to re-apply a `{variable}` text edit through
+   * undo/redo: the engine traces the string back to the right `.map()` item or
+   * component-prop usage, and that resolution needs the occurrence. Undefined
+   * for literal text (the engine ignores it there) and for css/attr.
+   */
+  occurrence?: number;
 }
 
 /**
@@ -60,6 +68,14 @@ export type EditSourceApplyFn = (apply: {
   id: string;
   key: string;
   value: string | null;
+  /**
+   * `op:'text'` re-application only — the value CURRENTLY on disk (the side we
+   * replace FROM: `before` on redo, `after` on undo), so a `{variable}` edit
+   * can be traced to the right source string. Plus the occurrence. Ignored by
+   * css/attr and by literal-text edits.
+   */
+  from?: string | null;
+  occurrence?: number;
 }) => void | Promise<void>;
 
 export const EDIT_SOURCE_KIND = 'edit-source';
@@ -72,16 +88,27 @@ export interface EditSourceCommandInit {
 
 export function createEditSourceCommand(init: EditSourceCommandInit): EditCommand {
   const { payload, applyFn } = init;
-  const apply = (value: string | null) =>
-    applyFn({ op: payload.op, canvas: payload.canvas, id: payload.id, key: payload.key, value });
+  // `from` = the value on disk BEFORE this re-application (what a `{variable}`
+  // text resolver matches against). do() writes `after` over `before`; undo()
+  // writes `before` over `after`.
+  const apply = (value: string | null, from: string | null) =>
+    applyFn({
+      op: payload.op,
+      canvas: payload.canvas,
+      id: payload.id,
+      key: payload.key,
+      value,
+      from,
+      occurrence: payload.occurrence,
+    });
   return {
     kind: EDIT_SOURCE_KIND,
     label: init.label ?? defaultLabel(payload),
     async do() {
-      await apply(payload.after);
+      await apply(payload.after, payload.before);
     },
     async undo() {
-      await apply(payload.before);
+      await apply(payload.before, payload.after);
     },
   };
 }

package/apps/studio/context-menu.tsx

@@ -54,7 +54,12 @@ export interface MenuItem {
   /** Right-aligned shortcut hint (e.g. `⌘C`, `⌫`). */
   shortcut?: string;
   destructive?: boolean;
-  disabled?: boolean;
+  /**
+   * A FUNCTION form is resolved per-click against `target` — same rationale as
+   * the function-form `submenu` below (e.g. "Open Timeline" only enabled when
+   * THIS right-clicked artboard actually contains a video sequence).
+   */
+  disabled?: boolean | ((target: ContextTarget) => boolean);
   /**
    * Optional nested flyout (e.g. `Theme ▸ DS default / Light / Dark / Follow
    * chrome`). When present the row opens a submenu on hover / ArrowRight /
@@ -70,6 +75,13 @@ export interface MenuItem {
   submenu?: MenuItem[] | ((target: ContextTarget) => MenuItem[]);
   /** Hover/title hint shown when the item is `disabled` (a11y affordance). */
   disabledHint?: string;
+  /**
+   * Fully REMOVE the item for a target (vs. `disabled`, which greys it in place).
+   * Resolved per-click. Use when an entry is meaningless — not merely
+   * unavailable — for the right-clicked element (e.g. "Edit Photo…" only makes
+   * sense on an `<img>`, so it shouldn't appear at all on a `<div>`).
+   */
+  hidden?: boolean | ((target: ContextTarget) => boolean);
   onSelect: (target: ContextTarget) => void;
 }
 
@@ -371,9 +383,19 @@ export function ContextMenuView({
     };
   }, [target.clientX, target.clientY, onClose, pos.x, pos.y]);
 
+  // Resolve per-target `hidden` and drop now-empty sections (so a section that
+  // held only a hidden item doesn't leave a dangling separator).
+  const visibleSections = sections
+    .map((section) =>
+      section.filter((item) => {
+        const h = typeof item.hidden === 'function' ? item.hidden(target) : item.hidden;
+        return !h;
+      })
+    )
+    .filter((section) => section.length > 0);
   return (
     <div ref={ref} className="dc-context-menu" role="menu" style={{ left: pos.x, top: pos.y }}>
-      {sections.map((section, si) => {
+      {visibleSections.map((section, si) => {
         const sectionKey = section.map((i) => i.id).join('|') || `s${si}`;
         return (
           <div key={sectionKey} role="group">
@@ -411,17 +433,20 @@ function MenuItemRow({
   // Resolve a function-form submenu against THIS click's target (e.g.
   // "Select layer" computing candidates from `target.clientX/clientY`).
   const submenuItems = typeof item.submenu === 'function' ? item.submenu(target) : item.submenu;
+  // Same per-click resolution for a function-form `disabled` (e.g. "Open
+  // Timeline" only enabled on an artboard that actually contains video).
+  const disabled = typeof item.disabled === 'function' ? item.disabled(target) : item.disabled;
 
   if (!submenuItems || submenuItems.length === 0) {
     return (
       <button
         type="button"
         role="menuitem"
-        disabled={item.disabled}
-        title={item.disabled ? item.disabledHint : undefined}
+        disabled={disabled}
+        title={disabled ? item.disabledHint : undefined}
         className={`dc-menu-item${item.destructive ? ' is-destructive' : ''}`}
         onClick={() => {
-          if (item.disabled) return;
+          if (disabled) return;
           item.onSelect(target);
           onClose();
         }}
@@ -464,7 +489,7 @@ function MenuItemRow({
         role="menuitem"
         aria-haspopup="menu"
         aria-expanded={subOpen}
-        disabled={item.disabled}
+        disabled={disabled}
         className="dc-menu-item"
         onClick={() => (subOpen ? setSubOpen(false) : open())}
         onKeyDown={(e) => {