@1agh/maude 0.51.1 → 0.52.0

package/apps/studio/client/panels/ClipInspector.jsx

@@ -0,0 +1,409 @@
+// ClipInspector — feature-enhanced-video-editing (Task 9). The per-clip
+// parametric editing popover, scoped to the timeline selection: tabs
+// Speed · Audio · Crop · Grade (media clips) and Transition (seam chips).
+// Draggable, Esc closes, one instance (owned by TimelinePanel). Values come
+// from the enumerator's authoritative `mediaProps`; every commit goes through
+// `onVerb(verb, params)` → POST /_api/clip-edit (stableId + contentHash).
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { NumberField, SliderField, Toggle } from '../inspector-controls.jsx';
+
+const SPEED_PRESETS = [0.25, 0.5, 1, 1.5, 2, 4];
+const PRESENTATIONS = ['fade', 'slide', 'wipe', 'flip', 'clock-wipe', 'none'];
+// Named grade "looks" — parameter bundles, still ONE flat filter string on disk.
+const GRADE_PRESETS = {
+  None: null,
+  Mono: { saturation: 0, contrast: 1.05 },
+  Warm: { hue: -12, saturation: 1.15, brightness: 1.03 },
+  Cool: { hue: 12, saturation: 1.05, brightness: 0.98 },
+  Punch: { contrast: 1.18, saturation: 1.25 },
+};
+
+/** Parse a CSS filter chain back to grade params (mirror of the server's
+ *  filterToGrade). Null = unrecognized function → read-only badge. */
+export function filterToGradeParams(filter) {
+  if (!filter) return {};
+  const out = {};
+  let rest = String(filter).trim();
+  const fnRe = /^([a-z-]+)\(([^)]*)\)\s*/;
+  const keys = {
+    brightness: 'brightness',
+    contrast: 'contrast',
+    saturate: 'saturation',
+    'hue-rotate': 'hue',
+    sepia: 'sepia',
+    grayscale: 'grayscale',
+    invert: 'invert',
+  };
+  while (rest.length) {
+    const m = rest.match(fnRe);
+    if (!m || !keys[m[1]]) return null;
+    const v = Number.parseFloat(m[2]);
+    if (!Number.isFinite(v)) return null;
+    out[keys[m[1]]] = v;
+    rest = rest.slice(m[0].length);
+  }
+  return out;
+}
+
+function TabBar({ tabs, active, onPick }) {
+  return (
+    <div className="tlci-tabs" role="tablist">
+      {tabs.map((t) => (
+        <button
+          key={t}
+          type="button"
+          role="tab"
+          aria-selected={active === t}
+          className={`tlci-tab${active === t ? ' is-on' : ''}`}
+          data-testid={`timeline-inspector-tab-${t.toLowerCase()}`}
+          onClick={() => onPick(t)}
+        >
+          {t}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default function ClipInspector({
+  mode = 'clip', // 'clip' | 'transition'
+  clipLabel = '',
+  mediaProps = null,
+  kind = 'video', // rowKind of the clip
+  transition = null, // { dur } when mode === 'transition'
+  // Non-null = the clip carries editable text (Title literal / AI prompt).
+  textValue = null,
+  x = 200,
+  y = 200,
+  onVerb, // (verb, params) => void
+  onClose,
+}) {
+  const tabs =
+    mode === 'transition'
+      ? ['Transition']
+      : textValue != null && kind !== 'video' && kind !== 'audio'
+        ? ['Text', 'Speed']
+        : kind === 'audio'
+          ? ['Speed', 'Audio']
+          : textValue != null
+            ? ['Speed', 'Audio', 'Crop', 'Grade', 'Text']
+            : ['Speed', 'Audio', 'Crop', 'Grade'];
+  const [tab, setTab] = useState(tabs[0]);
+  const [pos, setPos] = useState({ x, y });
+  const rootRef = useRef(null);
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose?.();
+      }
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => window.removeEventListener('keydown', onKey, true);
+  }, [onClose]);
+
+  const beginDrag = useCallback(
+    (e) => {
+      if (e.target.closest('button, input, select')) return;
+      e.preventDefault();
+      const start = { x: e.clientX, y: e.clientY, px: pos.x, py: pos.y };
+      const move = (ev) =>
+        setPos({ x: start.px + ev.clientX - start.x, y: start.py + ev.clientY - start.y });
+      const up = () => {
+        window.removeEventListener('pointermove', move);
+        window.removeEventListener('pointerup', up);
+      };
+      window.addEventListener('pointermove', move);
+      window.addEventListener('pointerup', up);
+    },
+    [pos]
+  );
+
+  // Local knob state seeded from the authoritative props; commit on release.
+  const rate = mediaProps?.playbackRate ?? 1;
+  const volume = mediaProps?.muted ? 0 : (mediaProps?.volume ?? 1);
+  const framing = mediaProps?.framing ?? null;
+  const gradeParams = filterToGradeParams(mediaProps?.filter);
+  const gradeReadOnly = gradeParams == null;
+  const [grade, setGrade] = useState(gradeParams ?? {});
+  const [frame, setFrame] = useState(framing ?? { scale: 1, x: 0, y: 0 });
+  const [transDur, setTransDur] = useState(transition?.dur ?? 15);
+  useEffect(() => {
+    setGrade(filterToGradeParams(mediaProps?.filter) ?? {});
+    setFrame(mediaProps?.framing ?? { scale: 1, x: 0, y: 0 });
+  }, [mediaProps]);
+  useEffect(() => {
+    setTransDur(transition?.dur ?? 15);
+  }, [transition]);
+
+  const commitGrade = (next) => {
+    setGrade(next);
+    const meaningful = Object.entries(next).some(
+      ([k, v]) => (k === 'brightness' || k === 'contrast' || k === 'saturation' ? v !== 1 : v !== 0)
+    );
+    onVerb?.('grade', { grade: meaningful ? next : null });
+  };
+  const commitFrame = (next) => {
+    setFrame(next);
+    onVerb?.('framing', {
+      framing: next.scale === 1 && next.x === 0 && next.y === 0 ? null : next,
+    });
+  };
+
+  const gradeSlider = (label, key, min, max, step, neutral) => (
+    <label className="tlci-row" key={key}>
+      <span className="tlci-lbl">{label}</span>
+      <SliderField
+        value={grade[key] ?? neutral}
+        min={min}
+        max={max}
+        step={step}
+        onCommit={(v) => commitGrade({ ...grade, [key]: v })}
+        ariaLabel={label}
+      />
+    </label>
+  );
+
+  return (
+    <div
+      ref={rootRef}
+      className="tlci"
+      style={{ left: pos.x, top: pos.y }}
+      role="dialog"
+      aria-label={`Adjust ${clipLabel || 'clip'}`}
+      data-testid="timeline-inspector"
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      <div className="tlci-head" onPointerDown={beginDrag}>
+        <span className="tlci-title">{clipLabel || (mode === 'transition' ? 'Transition' : 'Clip')}</span>
+        <button type="button" className="tlci-x" aria-label="Close" onClick={onClose}>
+          ×
+        </button>
+      </div>
+      <TabBar tabs={tabs} active={tab} onPick={setTab} />
+
+      {tab === 'Speed' && (
+        <div className="tlci-body" role="tabpanel">
+          <div className="tlci-presets">
+            {SPEED_PRESETS.map((p) => (
+              <button
+                key={p}
+                type="button"
+                className={`tlci-chip${rate === p ? ' is-on' : ''}`}
+                data-testid={`timeline-speed-${String(p).replace('.', '_')}`}
+                onClick={() => onVerb?.('speed', { rate: p })}
+              >
+                {p}×
+              </button>
+            ))}
+          </div>
+          <label className="tlci-row">
+            <span className="tlci-lbl">Custom</span>
+            <NumberField
+              value={rate}
+              min={0.1}
+              max={16}
+              step={0.05}
+              onCommit={(v) => onVerb?.('speed', { rate: v })}
+              ariaLabel="Playback rate"
+            />
+          </label>
+          <p className="tlci-note">Duration recomputes; the cut ripples to stay gapless.</p>
+        </div>
+      )}
+
+      {tab === 'Audio' && (
+        <div className="tlci-body" role="tabpanel">
+          <label className="tlci-row">
+            <span className="tlci-lbl">Muted</span>
+            <Toggle
+              checked={!!mediaProps?.muted}
+              onChange={(v) => onVerb?.('audio', { muted: v })}
+              ariaLabel="Mute clip"
+            />
+          </label>
+          <label className="tlci-row">
+            <span className="tlci-lbl">Volume</span>
+            <SliderField
+              value={volume}
+              min={0}
+              max={1}
+              step={0.05}
+              onCommit={(v) => onVerb?.('audio', { volume: v })}
+              ariaLabel="Clip volume"
+            />
+          </label>
+          {kind === 'video' ? (
+            <button
+              type="button"
+              className="tlci-btn"
+              data-testid="timeline-detach-audio"
+              onClick={() => onVerb?.('detach-audio', {})}
+            >
+              Detach audio
+            </button>
+          ) : null}
+        </div>
+      )}
+
+      {tab === 'Crop' && (
+        <div className="tlci-body" role="tabpanel">
+          <label className="tlci-row">
+            <span className="tlci-lbl">Scale</span>
+            <NumberField
+              value={frame.scale}
+              min={1}
+              max={8}
+              step={0.05}
+              onCommit={(v) => commitFrame({ ...frame, scale: v })}
+              ariaLabel="Crop scale"
+            />
+          </label>
+          <label className="tlci-row">
+            <span className="tlci-lbl">X %</span>
+            <NumberField
+              value={frame.x}
+              min={-100}
+              max={100}
+              step={1}
+              onCommit={(v) => commitFrame({ ...frame, x: v })}
+              ariaLabel="Crop x offset"
+            />
+          </label>
+          <label className="tlci-row">
+            <span className="tlci-lbl">Y %</span>
+            <NumberField
+              value={frame.y}
+              min={-100}
+              max={100}
+              step={1}
+              onCommit={(v) => commitFrame({ ...frame, y: v })}
+              ariaLabel="Crop y offset"
+            />
+          </label>
+          <div className="tlci-presets">
+            <button type="button" className="tlci-chip" onClick={() => commitFrame({ scale: 1, x: 0, y: 0 })}>
+              Reset
+            </button>
+            <button type="button" className="tlci-chip" onClick={() => commitFrame({ ...frame, scale: 1.2 })}>
+              1.2×
+            </button>
+            <button type="button" className="tlci-chip" onClick={() => commitFrame({ ...frame, scale: 1.5 })}>
+              1.5×
+            </button>
+          </div>
+        </div>
+      )}
+
+      {tab === 'Grade' && (
+        <div className="tlci-body" role="tabpanel">
+          {gradeReadOnly ? (
+            <p className="tlci-note" data-testid="timeline-grade-readonly">
+              This clip carries a hand-written filter — edit it in code.
+            </p>
+          ) : (
+            <>
+              <div className="tlci-presets">
+                {Object.entries(GRADE_PRESETS).map(([name, params]) => (
+                  <button
+                    key={name}
+                    type="button"
+                    className="tlci-chip"
+                    data-testid={`timeline-grade-${name.toLowerCase()}`}
+                    onClick={() => commitGrade(params ? { ...params } : {})}
+                  >
+                    {name}
+                  </button>
+                ))}
+              </div>
+              {gradeSlider('Brightness', 'brightness', 0.2, 2, 0.01, 1)}
+              {gradeSlider('Contrast', 'contrast', 0.2, 2, 0.01, 1)}
+              {gradeSlider('Saturation', 'saturation', 0, 2, 0.01, 1)}
+              {gradeSlider('Hue', 'hue', -180, 180, 1, 0)}
+              {gradeSlider('Sepia', 'sepia', 0, 1, 0.01, 0)}
+              {gradeSlider('Grayscale', 'grayscale', 0, 1, 0.01, 0)}
+              <p className="tlci-note">
+                Preview applies on the paused frame (WKWebView filter ceiling); exports are exact.
+              </p>
+            </>
+          )}
+        </div>
+      )}
+
+      {tab === 'Text' && (
+        <div className="tlci-body" role="tabpanel">
+          <textarea
+            className="tlci-textarea"
+            data-testid="timeline-inspector-text"
+            defaultValue={textValue || ''}
+            rows={4}
+            placeholder={kind === 'placeholder' ? 'Generation prompt…' : 'Title text…'}
+            onKeyDown={(e) => e.stopPropagation()}
+          />
+          <button
+            type="button"
+            className="tlci-btn"
+            data-testid="timeline-inspector-text-apply"
+            onClick={(e) => {
+              const v = e.currentTarget.closest('.tlci-body')?.querySelector('textarea')?.value;
+              if (v && v.trim()) onVerb?.('set-text', { text: v });
+            }}
+          >
+            Apply text
+          </button>
+          <p className="tlci-note">
+            {kind === 'placeholder'
+              ? 'Updates the generation prompt on the slate.'
+              : 'Rewrites the title text in the composition.'}
+          </p>
+        </div>
+      )}
+
+      {tab === 'Transition' && (
+        <div className="tlci-body" role="tabpanel">
+          <div className="tlci-presets" data-testid="timeline-transition-grid">
+            {PRESENTATIONS.map((p) => (
+              <button
+                key={p}
+                type="button"
+                className="tlci-chip"
+                data-testid={`timeline-transition-${p}`}
+                onClick={() => onVerb?.('transition', { presentation: p })}
+              >
+                {p}
+              </button>
+            ))}
+          </div>
+          <label className="tlci-row">
+            <span className="tlci-lbl">Frames</span>
+            <NumberField
+              value={transDur}
+              min={1}
+              max={120}
+              step={1}
+              onCommit={(v) => {
+                setTransDur(v);
+                onVerb?.('transition', { durationInFrames: v });
+              }}
+              ariaLabel="Transition duration"
+            />
+          </label>
+          <button
+            type="button"
+            className="tlci-btn"
+            data-testid="timeline-transition-remove"
+            onClick={() => {
+              onVerb?.('remove-transition', {});
+              onClose?.();
+            }}
+          >
+            Remove transition (hard cut)
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/studio/client/panels/CloudBar.jsx

@@ -123,7 +123,13 @@ export default function CloudBar() {
     if (!isNativeApp()) return undefined;
     const consume = (url) => {
       const parsed = parseDeepLink(url);
-      if (parsed) setPending(parsed);
+      if (!parsed) return;
+      // NEVER replace a link the person is already looking at. The strip is a
+      // single slot, so an overwrite would swap the code out from under a
+      // click that was aimed at the previous one — the person confirms the
+      // name they read and connects the link that arrived last (validate
+      // 2026-07-30, attacker A1). A second link waits its turn instead.
+      setPending((current) => current ?? parsed);
     };
     invoke('take_pending_deep_link')
       .then((url) => url && consume(url))
@@ -142,7 +148,11 @@ export default function CloudBar() {
     const r = await api('/_api/cloud/attach/code', {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ code: pending.code }),
+      // Send the project the LINK claimed — the one this person just read in
+      // the confirm strip. The server compares it against what the exchange
+      // actually opens and refuses a mismatch, so a familiar name wrapped
+      // around somebody else's code cannot borrow that consent.
+      body: JSON.stringify({ code: pending.code, project: pending.project }),
     });
     setBusy('');
     setPending(null);