@1agh/maude 0.43.0 → 0.45.0

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

@@ -12,11 +12,18 @@
 // (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'];
@@ -55,122 +62,103 @@ function prune(edit) {
 // ── 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.
+// for both `:root`/`[data-theme="light"]` and `[data-theme="dark"]`.
 const S = {
-  body: { padding: '10px 12px', fontSize: 12, color: 'var(--fg-0)', overflowY: 'auto' },
-  sec: { marginBottom: 14 },
+  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: '.06em',
+    letterSpacing: 'var(--tracking-wide)',
     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',
+  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: 11,
+    fontSize: 10,
     color: 'var(--fg-2)',
+    textAlign: 'left',
   },
-  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',
-  },
+  // 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: 4,
+    borderRadius: 'var(--radius-xs)',
     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 }) {
+// 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 (
-    <section style={S.sec}>
-      <div style={S.secHead}>
-        <span>{title}</span>
-        {right}
-      </div>
+    <PanelSection title={title} right={right} onReset={onReset}>
       {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>
+    </PanelSection>
   );
 }
 
-function Toggle({ checked, onChange, label }) {
+// 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 (
-    <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>
+    <>
+      <div style={S.row}>
+        <span style={S.label}>{label}</span>
+        {children}
+      </div>
+      {tip ? <div style={S.tipBelow}>{tip}</div> : null}
+    </>
   );
 }
 
-function ColorSwatch({ value, fallback, ColorPicker, onApply }) {
+// 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;
-  if (ColorPicker) return <ColorPicker seed={hex} onApply={onApply} />;
+  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 (
-    <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"
+    <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)}`)}
     />
   );
 }
@@ -185,12 +173,15 @@ function ColorSwatch({ value, fallback, ColorPicker, onApply }) {
  * @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 }) {
+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;
@@ -262,6 +253,29 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
     }, { 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>;
 
@@ -274,49 +288,46 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
 
   return (
     <div style={S.body} data-testid="photo-knobs">
-      <div style={{ ...S.secHead, marginTop: 0, color: 'var(--fg-3)', textTransform: 'none', letterSpacing: 0 }}>
+      <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"
-        right={
-          <button type="button" style={S.reset} onClick={resetAdjustments} title="Reset adjustments">
-            reset
-          </button>
-        }
-      >
+      <Section title="Adjustments" onReset={resetAdjustments}>
         {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)}
-          />
+          <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 && (
           <>
-            <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)} />
+            <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>
@@ -324,11 +335,20 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
       <Section
         title="Grain"
         right={<Toggle checked={grain.enabled} onChange={(v) => setSection('grain', { enabled: v }, true)} label="on" />}
+        onReset={() => clearSection('grain')}
       >
         {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)} />
+            <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>
@@ -336,56 +356,44 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
       <Section
         title="Pattern"
         right={<Toggle checked={pat.enabled} onChange={(v) => setSection('pattern', { enabled: v }, true)} label="on" />}
+        onReset={() => clearSection('pattern')}
       >
         {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)} />
+            <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">
-        <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>
+      <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' && (
-          <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)} />
+          <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">
-        <div style={{ ...S.row, gap: 10 }}>
+      <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" />
@@ -394,16 +402,7 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
                 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);
-                  }
-                }}
+                onClick={() => runRemoveBackground()}
               >
                 {bgBusy ? 'removing…' : 'redo'}
               </button>
@@ -411,24 +410,20 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
           ) : (
             <button
               type="button"
-              style={{ ...S.btn, opacity: bgBusy ? 0.6 : 1 }}
+              className="st-btn"
+              style={{ 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);
-                }
-              }}
+              onClick={() => runRemoveBackground()}
             >
-              {bgBusy ? 'Removing…' : '✦ Remove Background'}
+              {StIcon ? <StIcon name="sparkle" size={14} /> : null}
+              {bgBusy ? 'Removing…' : 'Remove Background'}
             </button>
           )}
         </div>
+        <span aria-live="polite" className="sr-only">
+          {bgAnnounce}
+        </span>
       </Section>
     </div>
   );