@1agh/maude 0.42.0 → 0.44.0

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

@@ -0,0 +1,432 @@
+// 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.
+//
+// Controls come from the shared inspector-controls library
+// (feature-inspector-controls-redesign) so bounded adjustments render as REAL
+// sliders (track/thumb, keyboard-accessible) linked to an exact numeric field,
+// and every row carries a single control (the old DUOTONE / Pattern rows doubled
+// up two controls and overflowed the 304px panel).
+//
+// 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';
+import { ColorField, PanelSection, Select, SliderField, Toggle } from './inspector-controls.jsx';
+
+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"]`.
+const S = {
+  body: { fontSize: 12, color: 'var(--fg-0)', overflowY: 'auto' },
+  sec: { marginBottom: 'var(--space-4)' },
+  secHead: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    fontSize: 11,
+    textTransform: 'uppercase',
+    letterSpacing: 'var(--tracking-wide)',
+    color: 'var(--fg-2)',
+    margin: '4px 0 8px',
+  },
+  row: { display: 'flex', alignItems: 'center', gap: 8, margin: 'var(--space-2) 0' },
+  label: { flex: '0 0 72px', fontSize: 11, color: 'var(--fg-1)' },
+  tip: {
+    flex: 1,
+    fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+    fontSize: 10,
+    color: 'var(--fg-2)',
+    textAlign: 'left',
+  },
+  // handoff — tips go BELOW the control (help text), not inline right, aligned
+  // under the control column (past the 72px label).
+  tipBelow: { marginLeft: 80, marginTop: 2, marginBottom: 'var(--space-2)', fontSize: 10, color: 'var(--fg-2)', lineHeight: 1.4 },
+  reset: {
+    font: 'inherit',
+    fontSize: 10,
+    padding: '1px 6px',
+    borderRadius: 'var(--radius-xs)',
+    border: '1px solid transparent',
+    background: 'transparent',
+    color: 'var(--fg-2)',
+    cursor: 'pointer',
+  },
+};
+
+// handoff — photo sections are now the shared collapsable PanelSection (caret +
+// height animation), with the enable Toggle in the header's `right` slot.
+function Section({ title, right, onReset, children }) {
+  return (
+    <PanelSection title={title} right={right} onReset={onReset}>
+      {children}
+    </PanelSection>
+  );
+}
+
+// One label + one control per row — the fix for the doubled-up DUOTONE / Pattern
+// rows that overflowed the panel. SliderField/Select fill the control side.
+function Row({ label, tip, children }) {
+  return (
+    <>
+      <div style={S.row}>
+        <span style={S.label}>{label}</span>
+        {children}
+      </div>
+      {tip ? <div style={S.tipBelow}>{tip}</div> : null}
+    </>
+  );
+}
+
+// Compact colour field for the photo panel — the shared ColorField shell (swatch
+// flush prefix + value) whose swatch opens a popover holding the injected HSV
+// ColorPicker (falls back to a native colour input). 1:1 with the CSS panel's
+// colour control, just with the pixel-level picker instead of the token popover.
+function PhotoColorField({ value, fallback, label, ColorPicker, onApply }) {
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+  const hex = value || fallback;
+  useEffect(() => {
+    if (!open) return undefined;
+    const onDoc = (e) => {
+      if (!wrapRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('pointerdown', onDoc, true);
+    return () => document.removeEventListener('pointerdown', onDoc, true);
+  }, [open]);
+  return (
+    <ColorField
+      swatch={
+        <span className="st-cp-tokwrap" ref={wrapRef}>
+          <button type="button" className="st-cp-cf-sw" style={{ background: hex }} aria-haspopup="dialog" aria-expanded={open} aria-label={label} title={hex} onClick={() => setOpen((o) => !o)} />
+          {open ? (
+            <div className="st-cp-pop" role="dialog" aria-label={label} style={{ padding: 'var(--space-2)' }}>
+              {ColorPicker ? (
+                <ColorPicker seed={hex} label={label} onApply={onApply} />
+              ) : (
+                <input type="color" value={hex} aria-label={label} onChange={(e) => onApply(e.target.value)} style={{ width: '100%', height: 32 }} />
+              )}
+            </div>
+          ) : null}
+        </span>
+      }
+      displayValue={(hex || '').replace('#', '')}
+      ariaLabel={label}
+      onValue={(v) => onApply(v.startsWith('#') ? v : `#${v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)}`)}
+    />
+  );
+}
+
+// ── 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.
+ * @param {Function} [p.StIcon]         Injected shell icon component (optional).
+ */
+export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBackground, onRecordEdit, StIcon }) {
+  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);
+  // sr-only live-region text for the background-removal busy state (Task 19).
+  const [bgAnnounce, setBgAnnounce] = useState('');
+  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 });
+  // handoff — per-section reset (⟲): remove the section → back to its defaults.
+  const clearSection = (section) => mutate((e) => { delete e[section]; }, { commit: true });
+
+  // Shared by both the initial "Remove Background" and the "redo" button —
+  // drives the busy state + the sr-only live-region announcement (Task 19).
+  const runRemoveBackground = async () => {
+    if (!onRemoveBackground) return;
+    setBgBusy(true);
+    setBgAnnounce('Removing background…');
+    try {
+      const res = await onRemoveBackground(asset);
+      if (res?.maskAsset) {
+        setSection('backgroundRemoved', { enabled: true, maskAsset: res.maskAsset }, true);
+        setBgAnnounce('Background removed');
+      } else {
+        setBgAnnounce('Background removal failed');
+      }
+    } catch {
+      setBgAnnounce('Background removal failed');
+    } finally {
+      setBgBusy(false);
+    }
+  };
+
+  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-2)', 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" onReset={resetAdjustments}>
+        {ADJUSTMENTS.map((a) => (
+          <Row key={a.key} label={a.label}>
+            <SliderField
+              value={adj[a.key]}
+              min={a.min}
+              max={a.max}
+              step={a.step ?? 0.01}
+              unit={a.unit ?? ''}
+              ariaLabel={a.label}
+              onInput={(v) => setAdj(a.key, v)}
+              onCommit={(v) => setAdj(a.key, v, true)}
+            />
+          </Row>
+        ))}
+      </Section>
+
+      <Section
+        title="Duotone"
+        right={<Toggle checked={duo.enabled} onChange={(v) => setSection('duotone', { enabled: v }, true)} label="on" />}
+        onReset={() => clearSection('duotone')}
+      >
+        {duo.enabled && (
+          <>
+            <Row label="Shadow">
+              <PhotoColorField value={duo.colorA} fallback="#111111" label="Shadow" ColorPicker={ColorPicker} onApply={(hex) => setSection('duotone', { colorA: hex }, true)} />
+            </Row>
+            <Row label="Highlight">
+              <PhotoColorField value={duo.colorB} fallback="#ffffff" label="Highlight" ColorPicker={ColorPicker} onApply={(hex) => setSection('duotone', { colorB: hex }, true)} />
+            </Row>
+            <Row label="Intensity">
+              <SliderField value={duo.intensity ?? 1} min={0} max={1} ariaLabel="Duotone intensity" onInput={(v) => setSection('duotone', { intensity: v })} onCommit={(v) => setSection('duotone', { intensity: v }, true)} />
+            </Row>
+          </>
+        )}
+      </Section>
+
+      <Section
+        title="Grain"
+        right={<Toggle checked={grain.enabled} onChange={(v) => setSection('grain', { enabled: v }, true)} label="on" />}
+        onReset={() => clearSection('grain')}
+      >
+        {grain.enabled && (
+          <>
+            <Row label="Amount">
+              <SliderField value={grain.amount ?? 0.4} min={0} max={1} ariaLabel="Grain amount" onInput={(v) => setSection('grain', { amount: v })} onCommit={(v) => setSection('grain', { amount: v }, true)} />
+            </Row>
+            <Row label="Size">
+              {/* Task 7 (feature-inspector-controls-redesign) — range reconciled
+                  against photo/schema.ts's clamp (num(errors, g, 'size', 1, 32));
+                  the panel used to cap at 8, silently hiding the top 3/4 of what
+                  the server would actually accept. */}
+              <SliderField value={grain.size ?? 1} min={1} max={32} step={1} ariaLabel="Grain size" onInput={(v) => setSection('grain', { size: v })} onCommit={(v) => setSection('grain', { size: v }, true)} />
+            </Row>
+          </>
+        )}
+      </Section>
+
+      <Section
+        title="Pattern"
+        right={<Toggle checked={pat.enabled} onChange={(v) => setSection('pattern', { enabled: v }, true)} label="on" />}
+        onReset={() => clearSection('pattern')}
+      >
+        {pat.enabled && (
+          <>
+            <Row label="Type">
+              <Select value={pat.type || 'dots'} options={PATTERN_TYPES} ariaLabel="Pattern type" onChange={(v) => setSection('pattern', { type: v }, true)} />
+            </Row>
+            <Row label="Blend">
+              <Select value={pat.blend || 'normal'} options={PATTERN_BLENDS} ariaLabel="Pattern blend" onChange={(v) => setSection('pattern', { blend: v }, true)} />
+            </Row>
+            <Row label="Color" tip="tip: dark colour + Multiply blend reads best">
+              <PhotoColorField value={pat.color} fallback="#ffffff" label="Pattern color" ColorPicker={ColorPicker} onApply={(hex) => setSection('pattern', { color: hex }, true)} />
+            </Row>
+            <Row label="Scale">
+              {/* Task 7 — reconciled against schema.ts's clamp (num(errors, p,
+                  'scale', 0.1, 16)); the panel used to cap at 4. */}
+              <SliderField value={pat.scale ?? 1} min={0.1} max={16} step={0.1} ariaLabel="Pattern scale" onInput={(v) => setSection('pattern', { scale: v })} onCommit={(v) => setSection('pattern', { scale: v }, true)} />
+            </Row>
+            <Row label="Opacity">
+              <SliderField value={pat.opacity ?? 0.5} min={0} max={1} ariaLabel="Pattern opacity" onInput={(v) => setSection('pattern', { opacity: v })} onCommit={(v) => setSection('pattern', { opacity: v }, true)} />
+            </Row>
+          </>
+        )}
+      </Section>
+
+      <Section title="Mask" onReset={() => clearSection('mask')}>
+        <Row label="Preset">
+          <Select value={mask.preset || 'none'} options={MASK_PRESETS} ariaLabel="Mask preset" onChange={(v) => setSection('mask', { preset: v }, true)} />
+        </Row>
+        {mask.preset && mask.preset !== 'none' && (
+          <Row label="Strength">
+            <SliderField value={mask.strength ?? 0.6} min={0} max={1} ariaLabel="Mask strength" onInput={(v) => setSection('mask', { strength: v })} onCommit={(v) => setSection('mask', { strength: v }, true)} />
+          </Row>
+        )}
+      </Section>
+
+      <Section title="Background" onReset={() => clearSection('backgroundRemoved')}>
+        <div style={{ ...S.row, gap: 10 }} aria-busy={bgBusy || undefined}>
+          {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={() => runRemoveBackground()}
+              >
+                {bgBusy ? 'removing…' : 'redo'}
+              </button>
+            </>
+          ) : (
+            <button
+              type="button"
+              className="st-btn"
+              style={{ opacity: bgBusy ? 0.6 : 1 }}
+              disabled={bgBusy || !onRemoveBackground}
+              data-testid="photo-remove-bg"
+              onClick={() => runRemoveBackground()}
+            >
+              {StIcon ? <StIcon name="sparkle" size={14} /> : null}
+              {bgBusy ? 'Removing…' : 'Remove Background'}
+            </button>
+          )}
+        </div>
+        <span aria-live="polite" className="sr-only">
+          {bgAnnounce}
+        </span>
+      </Section>
+    </div>
+  );
+}
+
+export default PhotoKnobs;