@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/inspector/design/PlateStyleSection.tsx

@@ -0,0 +1,177 @@
+// One-click plate looks: the named treatments every tool in this class ships,
+// written into the fields this lane already has.
+//
+// ── WHY PRESETS AT ALL, WHEN EVERY FIELD IS ALREADY THERE ───────────────────
+//
+// `paint.radius`, `paint.stroke` and `paint.shadows` have all been honoured on a
+// media plate since unify Phase 1: the corner is a uv1 alphaMap stencil, the
+// stroke is a separate plate raster hung in front with the silhouette punched
+// out, and the shadows are drawn outside the box with the pad baked into the
+// mesh (raster.ts). What was missing is that assembling the LOOK meant setting
+// nine numbers across three sections, in an order nobody is told, and being
+// wrong about any one of them reads as "this tool cannot do the thing every
+// other tool does in one click".
+//
+// shots.so ships Default / Glass Light / Glass Dark / Liquid Glass / Inset Light
+// / Inset Dark / Outline / Border, with shadow modes None / Spread / Hug /
+// Adaptive. Screen Studio and Tella ship the same idea under their own names.
+// This is that shelf, in this lane's vocabulary.
+//
+// ── WHAT IT DELIBERATELY IS NOT ────────────────────────────────────────────
+//
+// NOT A DOCUMENT FIELD. Nothing records which preset was used, and there is no
+// "preset" key on a layer. A preset is a WRITE of ordinary fields, so the
+// author owns the result immediately and every knob stays theirs to nudge: the
+// row is a starting point, not a mode they are now in. That also means no
+// schema bump, nothing an older studio could misread, and no resurrection of
+// the deleted template lane (AGENTS.md) — there is no shipped content here,
+// only numbers this chrome could already type.
+//
+// NOT GLASS, HONESTLY. There is no backdrop blur: a true frosted plate needs
+// the composited scene behind it, which the plate raster (hung in FRONT at
+// plateOrder) structurally cannot sample, and the correct implementation is a
+// two-group split render that doubles the pass count. So the glass rows here
+// are a translucent stroke plus a soft shadow, which is what reads as glass
+// over a busy background.
+import { InspectorRow, InspectorSection, useLocked } from "@dailies-studio/ui";
+import type { CornerRadius, Layer3D, Shadow, Stroke } from "@dailies-studio/shot/doc";
+import { useSelectedLayers, useSelectionWrite } from "../useDocWrite.js";
+
+/** What a preset writes. Every field is optional and an ABSENT one is DELETED
+ *  rather than left alone: a look is a complete statement, so applying "Plain"
+ *  after "Outline" has to remove the stroke, not leave it behind. */
+interface PlateStyle {
+  key: string;
+  label: string;
+  title: string;
+  radius?: CornerRadius;
+  stroke?: Stroke;
+  shadows?: Shadow[];
+}
+
+const r = (n: number): CornerRadius => ({ tl: n, tr: n, br: n, bl: n });
+
+/**
+ * The shelf.
+ *
+ * The numbers are the ones this class of tool converged on, in design px
+ * against a 1920-wide frame: a plate corner around 12-24px, a hairline at 1px,
+ * and a shadow whose blur is several times its own y offset (a tight, dark
+ * shadow reads as a sticker; a wide soft one reads as depth).
+ */
+const STYLES: readonly PlateStyle[] = [
+  {
+    key: "plain",
+    label: "Plain",
+    title: "Square corners, no border, no shadow",
+  },
+  {
+    key: "soft",
+    label: "Soft",
+    title: "Rounded corners and a wide, soft drop shadow",
+    radius: r(16),
+    shadows: [{ xPx: 0, yPx: 18, blurPx: 48, spreadPx: -8, color: "#00000059" }],
+  },
+  {
+    key: "lifted",
+    label: "Lifted",
+    title: "A deeper shadow, for a plate that sits well off its background",
+    radius: r(20),
+    shadows: [
+      // TWO entries, near and far. One shadow at this size goes muddy: the
+      // near one keeps the plate's edge defined and the far one carries the
+      // height. This is what "Deep" is in the tools that ship it.
+      { xPx: 0, yPx: 4, blurPx: 10, spreadPx: -2, color: "#00000040" },
+      { xPx: 0, yPx: 40, blurPx: 90, spreadPx: -16, color: "#00000073" },
+    ],
+  },
+  {
+    key: "outline",
+    label: "Outline",
+    title: "A hairline border, no shadow",
+    radius: r(12),
+    // INSIDE align: an outside stroke grows the plate's silhouette, so a
+    // recording placed to fill an exact box would no longer fill it.
+    stroke: { color: "#ffffff26", widthPx: 1, align: "inside" },
+  },
+  {
+    key: "glass",
+    label: "Glass",
+    title: "A bright hairline and a soft glow, the look that reads as glass over a busy background",
+    radius: r(20),
+    stroke: { color: "#ffffff40", widthPx: 1, align: "inside" },
+    shadows: [
+      // A zero-offset bright shadow IS a glow in this schema (types.ts), which
+      // is why there is one field and not two.
+      { xPx: 0, yPx: 0, blurPx: 32, spreadPx: 0, color: "#ffffff1f" },
+      { xPx: 0, yPx: 24, blurPx: 64, spreadPx: -12, color: "#00000066" },
+    ],
+  },
+  {
+    key: "frame",
+    label: "Frame",
+    title: "A thick light border, the way a screenshot sits inside a mount",
+    radius: r(8),
+    stroke: { color: "#ffffff", widthPx: 10, align: "inside" },
+    shadows: [{ xPx: 0, yPx: 12, blurPx: 32, spreadPx: -6, color: "#0000004d" }],
+  },
+];
+
+export function PlateStyleSection() {
+  const write = useSelectionWrite();
+  const layers = useSelectedLayers();
+  // Each chip writes paint, so a viewer's panel disables the shelf.
+  const locked = useLocked();
+
+  // MEDIA ONLY, and that is a scoping choice rather than a technical one: every
+  // field below is honoured on a rect and a path too. But "plate" names the
+  // thing a screenshot or a recording sits on, and offering the shelf on every
+  // layer would put a Glass row on a line and an arrow.
+  if (layers.length === 0 || !layers.every(isMedia)) return null;
+
+  const apply = (style: PlateStyle): void =>
+    write((layer) => ({
+      ...layer,
+      paint: {
+        // Everything the preset does NOT name is dropped, including keys it has
+        // no opinion on, so a look is repeatable: applying the same row twice
+        // must give the same picture whatever was there first. `fill` is
+        // carried, because it is inert on media and the author may have set it
+        // for a non-media sibling.
+        ...(layer.paint.fill === undefined ? {} : { fill: layer.paint.fill }),
+        ...(style.radius === undefined ? {} : { radius: style.radius }),
+        ...(style.stroke === undefined ? {} : { stroke: style.stroke }),
+        ...(style.shadows === undefined ? {} : { shadows: style.shadows.map((s) => ({ ...s })) }),
+      },
+    }));
+
+  return (
+    <InspectorSection className="insp-object" title="Plate style" persistKey="shot:plate-style">
+      <InspectorRow>
+        <div className="plate-style-grid">
+          {STYLES.map((style) => (
+            <button
+              key={style.key}
+              type="button"
+              className="plate-style-chip"
+              title={style.title}
+              disabled={locked}
+              onClick={() => apply(style)}
+            >
+              {style.label}
+            </button>
+          ))}
+        </div>
+      </InspectorRow>
+    </InspectorSection>
+  );
+}
+
+function isMedia(layer: Layer3D): boolean {
+  return layer.kind === "image" || layer.kind === "video";
+}
+
+/** Exported for the test, which asserts the shelf's own invariants rather than
+ *  its numbers: pinning nine colours would make a design tweak a test failure
+ *  and teach nobody anything. */
+export { STYLES as PLATE_STYLES };

package/src/panels/inspector/design/ShadowSection.tsx

@@ -2,72 +2,245 @@
 // that can disagree. A glow IS a shadow at zero offset with a bright colour,
 // which is exactly how the rasterizer draws it (raster.ts), so modelling them
 // separately would be two schema fields for one Canvas2D call.
-import { ColorPicker, InspectorRow, InspectorSection, NumberField } from "@dailies-studio/ui";
-import type { Shadow } from "@dailies-studio/shot/doc";
-import { NO_SCRUB, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+//
+// ── WHICH ONLY WORKS IF THE PANEL SAYS BOTH WORDS ──────────────────────
+//
+// This section printed "Shadow" over everything, so an author who could see a
+// glow on the stage had no row to look at: the word appeared in ZERO pixels of
+// the chrome, and the question it produced was "where does a glow get its
+// colour". Each entry is now named from its OWN value, GLOW at zero offset and
+// SHADOW otherwise. Derived rather than stored, so dragging Y off zero renames
+// the row it is in and the label can never disagree with the paint.
+//
+// ── AND EVERY ENTRY, NOT JUST THE FIRST ────────────────────────────────
+//
+// `paint.shadows` is a LIST and the pair this lane exists for is a glow plus a
+// drop shadow. Editing `shadows[0]` alone left the second one invisible AND
+// uneditable on exactly the document the schema was shaped for. Entries are
+// listed in ARRAY order, which is PAINT order (raster.ts walks the list and
+// each entry is its own pass), so Add appends and the new entry paints last.
+//
+// NO INSET TOGGLE. `Shadow.inset` exists in the shared type but this lane's
+// raster skips an inset entry outright (it needs a clip pass v1 does not do),
+// so the control would write a field and paint nothing.
+import {
+  ColorField,
+  IconMinus,
+  IconPlus,
+  InspectorRow,
+  InspectorSection,
+  NumberField,
+  PropertyGrid,
+  useLocked,
+} from "@dailies-studio/ui";
+import type { ScrubHandlers } from "@dailies-studio/ui";
+import { removeArrayElementTracks } from "@dailies-studio/shot/doc";
+import { KeyframeDot } from "../KeyframeDot.js";
+import type { Layer3D, Shadow } from "@dailies-studio/shot/doc";
+import { useSelectedLayers, useSelectionScrub, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
 
+/** What Add creates: the neutral soft drop. A zero-everything entry paints
+ *  nothing, and an author who clicks Add and sees no change cannot tell whether
+ *  it worked. */
 const DEFAULT_SHADOW: Shadow = { xPx: 0, yPx: 12, blurPx: 32, spreadPx: 0, color: "#00000080" };
 
+/** The four numbers, in the order they read as a sentence: offset, then
+ *  softness, then growth. */
+const SHADOW_NUMBERS = [
+  { field: "xPx", label: "X", title: "Horizontal offset. Zero on both axes is a glow." },
+  { field: "yPx", label: "Y", title: "Vertical offset. Zero on both axes is a glow." },
+  { field: "blurPx", label: "Blur", title: "Blur radius" },
+  { field: "spreadPx", label: "Spread", title: "Spread (signed: negative shrinks)" },
+] as const;
+type ShadowNumber = (typeof SHADOW_NUMBERS)[number]["field"];
+
 export function ShadowSection() {
   const write = useSelectionWrite();
-  const present = useSelectionValue((layer) => (layer.paint.shadows ?? []).length > 0);
-  const first = useSelectionValue((layer) => layer.paint.shadows?.[0]);
-
-  /** The FIRST shadow only. A layer may hold several (the schema is a list, and
-   *  a glow plus a drop shadow is the common pair), but editing the second one
-   *  needs a per-shadow list UI — which is a section of its own. */
-  const patch = (next: Partial<Shadow>): void =>
-    write((layer) => {
-      const shadows = [...(layer.paint.shadows ?? [DEFAULT_SHADOW])];
-      shadows[0] = { ...DEFAULT_SHADOW, ...shadows[0], ...next };
-      return { ...layer, paint: { ...layer.paint, shadows } };
-    });
-
-  const shadow = first.value ?? DEFAULT_SHADOW;
+  // Add and each entry's remove are plain buttons, so they read a viewer's
+  // lock here; every field is a widget that reads it itself.
+  const locked = useLocked();
+  // The LARGEST count in the selection, not the first layer's: with two
+  // layers holding two and one entries, every entry must have a row. A layer
+  // without an index reads undefined there, so that row shows Mixed, and
+  // `withShadow`/`withoutShadow` skip it.
+  const entries = Math.max(0, ...useSelectedLayers().map((layer) => layer.paint.shadows?.length ?? 0));
 
   return (
     <InspectorSection
+      className="insp-object"
       title="Shadow"
       persistKey="shot:shadow"
       action={
         <button
           type="button"
-          className="section-action"
-          title={present.value === true ? "Remove shadow" : "Add shadow"}
-          onClick={() =>
-            present.value === true
-              ? write((layer) => ({ ...layer, paint: { ...layer.paint, shadows: [] } }))
-              : patch({})
-          }
+          className="btn is-icon insp-section-action"
+          title="Add shadow or glow"
+          aria-label="Add shadow or glow"
+          disabled={locked}
+          onClick={() => write(appendShadow)}
         >
-          {present.value === true ? "−" : "+"}
+          <IconPlus />
         </button>
       }
     >
-      {present.value === true ? (
-        <>
-          <InspectorRow label="Color">
-            <ColorPicker
-              value={shadow.color}
-              ariaLabel="Shadow colour"
-              scrub={NO_SCRUB}
-              commit={(hex) => patch({ color: hex })}
+      {entries === 0 ? <p className="insp-empty">No shadow or glow</p> : null}
+      {Array.from({ length: entries }, (_, index) => (
+        <ShadowEntry key={index} index={index} locked={locked} />
+      ))}
+    </InspectorSection>
+  );
+}
+
+/**
+ * ONE entry. A component of its own because the hooks are per index and the
+ * list length changes under the author's fingers, which is the same reason the
+ * 2D lane's shadow rows are components.
+ */
+function ShadowEntry(props: { index: number; locked: boolean }) {
+  const { index } = props;
+  const write = useSelectionWrite();
+  const color = useSelectionValue((layer) => layer.paint.shadows?.[index]?.color);
+  const colorScrub = useSelectionScrub((layer, raw) => withShadow(layer, index, { color: String(raw) }));
+  const x = useShadowNumber(index, "xPx");
+  const y = useShadowNumber(index, "yPx");
+  const blur = useShadowNumber(index, "blurPx");
+  const spread = useShadowNumber(index, "spreadPx");
+  const fields: Record<ShadowNumber, ShadowNumberField> = {
+    xPx: x,
+    yPx: y,
+    blurPx: blur,
+    spreadPx: spread,
+  };
+
+  // THE NAME THE AUTHOR IS LOOKING FOR, derived from the live offsets so it
+  // follows a drag rather than describing what the entry was when it was added.
+  // The number is the paint slot, which is the only thing that distinguishes
+  // two entries of the same kind.
+  const name = `${x.value === 0 && y.value === 0 ? "Glow" : "Shadow"} ${index + 1}`;
+
+  return (
+    <>
+      <InspectorRow
+        label={name}
+        trailing={
+          <>
+            {/* A GLOW IS A ZERO-OFFSET SHADOW, so this diamond is what a glow
+                pulse is authored with. */}
+            <KeyframeDot path={`paint.shadows.${index}.color`} label={`${name} colour`} />
+            {/* The diamond's own button, in the same lane inside the box: two
+                verbs read as one kind of control only if they rest at one size
+                and strength, and the remove says it destroys on hover. */}
+            <button
+              type="button"
+              className="insp-key is-danger"
+              title={`Remove ${name}`}
+              aria-label={`Remove ${name}`}
+              disabled={props.locked}
+              onClick={() => write((layer) => withoutShadow(layer, index))}
+            >
+              <IconMinus />
+            </button>
+          </>
+        }
+      >
+        <ColorField
+          value={color.value ?? DEFAULT_SHADOW.color}
+          mixed={color.mixed}
+          ariaLabel={`${name} colour`}
+          scrub={colorScrub}
+          commit={(hex) => write((layer) => withShadow(layer, index, { color: hex }))}
+        />
+      </InspectorRow>
+      <PropertyGrid>
+        {SHADOW_NUMBERS.map((f) => (
+          <InspectorRow key={f.field}>
+            <NumberField
+              value={fields[f.field].value ?? 0}
+              mixed={fields[f.field].mixed}
+              label={f.label}
+              ariaLabel={`${f.label}, ${name}`}
+              unit="px"
+              title={f.title}
+              step={1}
+              // Blur alone has a floor (a negative blur is not a blur). X, Y
+              // and Spread are SIGNED and unbounded.
+              {...(f.field === "blurPx" ? { min: 0 } : {})}
+              trailing={<KeyframeDot path={`paint.shadows.${index}.${f.field}`} label={`${f.label}, ${name}`} />}
+              onCommit={fields[f.field].commit}
+              onScrubStart={fields[f.field].scrub.start}
+              onScrub={fields[f.field].scrub.move}
+              onScrubEnd={fields[f.field].scrub.end}
             />
           </InspectorRow>
-          <InspectorRow>
-            <NumberField value={shadow.xPx} label="X" ariaLabel="Shadow X" unit="px" step={1} onCommit={(v) => patch({ xPx: v })} />
-          </InspectorRow>
-          <InspectorRow>
-            <NumberField value={shadow.yPx} label="Y" ariaLabel="Shadow Y" unit="px" step={1} onCommit={(v) => patch({ yPx: v })} />
-          </InspectorRow>
-          <InspectorRow>
-            <NumberField value={shadow.blurPx} label="Blur" ariaLabel="Shadow blur" unit="px" min={0} step={1} onCommit={(v) => patch({ blurPx: v })} />
-          </InspectorRow>
-          <InspectorRow>
-            <NumberField value={shadow.spreadPx} label="Spread" ariaLabel="Shadow spread" unit="px" step={1} onCommit={(v) => patch({ spreadPx: v })} />
-          </InspectorRow>
-        </>
-      ) : null}
-    </InspectorSection>
+        ))}
+      </PropertyGrid>
+    </>
   );
 }
+
+interface ShadowNumberField {
+  value: number | undefined;
+  mixed: boolean;
+  commit: (value: number) => void;
+  scrub: ScrubHandlers;
+}
+
+/** One number of one entry: what it READS across the selection, what a typed
+ *  value COMMITS, and what a label drag SCRUBS. Four identical calls rather
+ *  than four sets of three, and the read is the SCALAR the row displays. */
+function useShadowNumber(index: number, field: ShadowNumber): ShadowNumberField {
+  const write = useSelectionWrite();
+  const { value, mixed } = useSelectionValue((layer) => layer.paint.shadows?.[index]?.[field]);
+  const scrub = useSelectionScrub((layer, raw) => withShadow(layer, index, { [field]: Number(raw) }));
+  return {
+    value,
+    mixed,
+    commit: (next) => write((layer) => withShadow(layer, index, { [field]: next })),
+    scrub,
+  };
+}
+
+/**
+ * Patch ONE EXISTING entry.
+ *
+ * A layer whose list is shorter than `index` is LEFT ALONE rather than grown to
+ * fit: the index is an array slot, so growing would materialise a shadow on a
+ * layer the author has no row for, and a sparse list would reach the
+ * rasterizer. Returning the layer by reference is also what lets
+ * `writeSelection` leave the document identical when nothing changed.
+ */
+function withShadow(layer: Layer3D, index: number, next: Partial<Shadow>): Layer3D {
+  const shadows = layer.paint.shadows ?? [];
+  const current = shadows[index];
+  if (current === undefined) return layer;
+  const out = [...shadows];
+  out[index] = { ...current, ...next };
+  return { ...layer, paint: { ...layer.paint, shadows: out } };
+}
+
+function appendShadow(layer: Layer3D): Layer3D {
+  return {
+    ...layer,
+    paint: { ...layer.paint, shadows: [...(layer.paint.shadows ?? []), DEFAULT_SHADOW] },
+  };
+}
+
+/**
+ * Remove one entry — AND RENUMBER ITS TRACKS.
+ *
+ * A shadow's tracks are addressed by array INDEX (`paint.shadows.1.color`), so
+ * removing entry 0 from a three-shadow layer leaves the track that animated
+ * shadow 1 pointing at what is now shadow 1 — a different shadow. Nothing
+ * errors: the path still resolves and validate is satisfied, so the wrong glow
+ * pulses and there is no signal at all.
+ *
+ * `routeLayerEdit`'s orphan sweep cannot catch this, because both paths still
+ * exist. This op is the only place that knows an element was removed, so it is
+ * the only place the renumber can live.
+ */
+function withoutShadow(layer: Layer3D, index: number): Layer3D {
+  const shadows = layer.paint.shadows ?? [];
+  if (shadows[index] === undefined) return layer;
+  const next = { ...layer, paint: { ...layer.paint, shadows: shadows.filter((_, i) => i !== index) } };
+  return removeArrayElementTracks(next, "paint.shadows", index);
+}