@hypit/hypit 0.1.3 → 0.1.4

package/packages/studio/src/ui/main.ts

@@ -1,6 +1,6 @@
 import type { Clip, StudioFailure, StudioInspectorDomain, StudioSnapshot } from "../shared.js";
 import type { CanonicalValue, ValueSchema } from "@hypit/protocol";
-import { validateParameterValue } from "../parameter-values.js";
+import { parameterAuthorValue, parameterNumber, parameterOption, validateParameterValue } from "../parameter-values.js";
 import { createCodePane } from "./code.js";
 import { icon } from "./icons.js";
 import { createLibraryPane } from "./library.js";
@@ -9,6 +9,8 @@ import type { Highlight } from "./code.js";
 import { intentAtOffset, spanAtOffset } from "./markers.js";
 import { clipAtOffset, createStore } from "./selection.js";
 import { createStage } from "./stage.js";
+import { semanticGestureSpan } from "../temporal-edit.js";
+import type { SemanticTarget } from "../temporal-edit.js";
 import { applyStudioMutation } from "./writeback.js";
 import { createTimeline } from "./timeline.js";
 import "../style.css";
@@ -60,9 +62,9 @@ app.innerHTML = `
 
 const store = createStore();
 const code = createCodePane();
-const library = createLibraryPane(code);
+const stage = createStage(store, (id) => library.selectArtifact(id));
+const library = createLibraryPane(code, (artifact) => stage.openArtifact(artifact), (artifact) => stage.renameArtifact(artifact));
 const timeline = createTimeline(store);
-const stage = createStage(store);
 app.querySelector<HTMLElement>("[data-library]")!.append(library.element);
 app.querySelector<HTMLElement>("[data-timeline]")!.append(timeline.element);
 app.querySelector<HTMLElement>("[data-stage]")!.append(stage.element);
@@ -72,8 +74,9 @@ app.querySelector<HTMLElement>("[data-stage]")!.append(stage.element);
 const shell = app.querySelector<HTMLElement>(".studio-shell")!;
 const upperShell = app.querySelector<HTMLElement>(".upper-shell")!;
 const workspacePanel = app.querySelector<HTMLElement>(".workspace-panel")!;
+const sidebarMinimum = 320;
 const sourceHandle = createHandle({
-  axis: "column", initial: Math.round(window.innerWidth * 0.34), minimum: 280,
+  axis: "column", initial: 416, minimum: sidebarMinimum,
   maximum: () => Math.max(360, upperShell.clientWidth - 720),
   apply: (size) => { upperShell.style.setProperty("--source-width", `${size}px`); },
   remember: "hypit-studio.v3.source-width",
@@ -81,7 +84,7 @@ const sourceHandle = createHandle({
 sourceHandle.classList.add("source-handle");
 upperShell.insertBefore(sourceHandle, app.querySelector<HTMLElement>("[data-stage]")!);
 const workspaceHandle = createHandle({
-  axis: "column", initial: Math.round(window.innerWidth * 0.22), minimum: 270, invert: true,
+  axis: "column", initial: Math.round(window.innerWidth * 0.22), minimum: sidebarMinimum, invert: true,
   maximum: () => Math.max(320, upperShell.clientWidth - 680),
   apply: (size) => { upperShell.style.setProperty("--workspace-width", `${size}px`); },
   remember: "hypit-studio.v3.workspace-width",
@@ -191,9 +194,22 @@ function textValue(value: CanonicalValue): string {
   return typeof value === "string" ? value : value === null ? "" : String(value);
 }
 
+function restoreParameterControls(entityId: string): void {
+  const current = store.current();
+  if (current?.selection.kind === "clip" && current.selection.clipId === entityId) {
+    renderInspector(current.snapshot, entityId);
+  }
+}
+
 function commitControl(entityId: string, parameter: Clip["inspector"][number], replacement: CanonicalValue): void {
-  if (sameValue(replacement, parameter.value)) return;
-  void writeParameter(entityId, parameter, replacement);
+  try {
+    if (sameValue(parameterAuthorValue(parameter, replacement), parameter.value)) return;
+    void writeParameter(entityId, parameter, replacement);
+  } catch (error) {
+    restoreParameterControls(entityId);
+    status.textContent = "Invalid value"; status.className = "status error";
+    status.title = error instanceof Error ? error.message : String(error);
+  }
 }
 
 let openColorPicker: {
@@ -227,8 +243,11 @@ function selectControl(
   trigger.setAttribute("aria-expanded", "false");
   const selected = document.createElement("span");
   selected.className = "parameter-select-value";
-  const current = textValue(parameter.value);
-  selected.textContent = current;
+  const choices = (parameter.options ?? []).map(parameterOption);
+  if (choices.some(option => option.description || option.preview)) control.classList.add("rich-options");
+  const current = choices.find(option => option.value === parameter.value)
+    ?? choices.find(option => String(option.value) === String(parameter.value));
+  selected.textContent = current?.label ?? textValue(parameter.value);
   const chevron = document.createElement("span");
   chevron.className = "parameter-select-chevron";
   chevron.innerHTML = icon("chevron");
@@ -242,22 +261,32 @@ function selectControl(
   menu.hidden = true;
   trigger.setAttribute("aria-controls", menu.id);
 
-  const options = (parameter.options ?? []).map((option) => {
+  const options = choices.map((option) => {
     const item = document.createElement("button");
     item.type = "button";
     item.className = `parameter-select-option${option === current ? " active" : ""}`;
-    item.textContent = option;
+    const label = document.createElement("span"); label.textContent = option.label;
+    item.append(label);
+    if (option.description) { const description = document.createElement("small"); description.textContent = option.description; item.append(description); }
+    if (option.preview?.kind === "color") {
+      const swatch = document.createElement("span"); swatch.className = "parameter-option-swatch";
+      swatch.style.backgroundColor = option.preview.color; item.prepend(swatch);
+    } else if (option.preview?.kind === "font") {
+      const sample = document.createElement("span"); sample.className = "parameter-option-font";
+      sample.style.fontFamily = option.preview.family; sample.textContent = option.preview.sample ?? option.label;
+      sample.setAttribute("aria-hidden", "true"); item.append(sample);
+    }
     item.setAttribute("role", "option");
     item.setAttribute("aria-selected", String(option === current));
     item.addEventListener("click", () => {
-      selected.textContent = option;
+      selected.textContent = option.label;
       for (const sibling of options) {
         sibling.classList.toggle("active", sibling === item);
         sibling.setAttribute("aria-selected", String(sibling === item));
       }
       close(false);
       trigger.focus();
-      commitControl(entityId, parameter, option);
+      commitControl(entityId, parameter, option.value);
     });
     return item;
   });
@@ -358,7 +387,7 @@ function colorValueControl(
   value.value = initial;
   value.setAttribute("aria-label", label);
   value.spellcheck = false;
-  const alpha = exact && initial.length === 9 ? initial.slice(7) : "";
+  let alpha = exact && initial.length === 9 ? initial.slice(7) : "";
   const replacement = (): string => `${picker.value.toUpperCase()}${alpha}`;
   const close = (): void => {
     if (openColorPicker?.root === colorControl) openColorPicker = undefined;
@@ -389,7 +418,12 @@ function colorValueControl(
   });
   value.addEventListener(draft ? "input" : "change", () => {
     const next = value.value.trim();
-    swatch.style.background = /^#[0-9a-f]{6}(?:[0-9a-f]{2})?$/iu.test(next) ? next : "transparent";
+    const valid = /^#[0-9a-f]{6}(?:[0-9a-f]{2})?$/iu.test(next);
+    swatch.style.background = valid ? next : "transparent";
+    if (valid) {
+      picker.value = next.slice(0, 7);
+      alpha = next.length === 9 ? next.slice(7) : "";
+    }
     change(next);
   });
   colorControl.append(swatch, picker);
@@ -611,40 +645,71 @@ function parameterControl(entityId: string, parameter: Clip["inspector"][number]
   name.title = parameter.summary ?? parameter.label;
   const right = document.createElement("span");
   right.className = "parameter-right parameter-control";
+  let unitLabel = parameter.unit;
   if (parameter.control === "select") {
     right.append(selectControl(entityId, parameter));
   } else if (parameter.control === "color") {
     right.append(colorValueControl(parameter.label, textValue(parameter.value), (next) => {
       commitControl(entityId, parameter, next);
     }));
+    if (parameter.swatches?.length) {
+      const palette = document.createElement("span"); palette.className = "parameter-swatches";
+      for (const color of parameter.swatches) {
+        const swatch = document.createElement("button"); swatch.type = "button";
+        swatch.style.backgroundColor = color; swatch.title = color; swatch.setAttribute("aria-label", `Use ${color}`);
+        swatch.addEventListener("click", () => commitControl(entityId, parameter, color)); palette.append(swatch);
+      }
+      right.append(palette);
+    }
   } else if (parameter.control === "list" || parameter.control === "record") {
     right.append(structuredControl(entityId, parameter));
   } else {
+    if (parameter.multiline && parameter.control === "text") {
+      const value = document.createElement("textarea"); value.className = "parameter-value parameter-multiline";
+      value.value = textValue(parameter.value); value.setAttribute("aria-label", parameter.label);
+      value.addEventListener("change", () => commitControl(entityId, parameter, value.value)); right.append(value);
+      row.append(name, right); return row;
+    }
     const value = document.createElement("input");
     value.type = parameter.control === "boolean" ? "checkbox" : "text";
-    if (parameter.control === "number") value.inputMode = "decimal";
     value.className = "parameter-value";
     value.setAttribute("aria-label", parameter.label);
     value.spellcheck = false;
     if (value.type === "checkbox") value.checked = parameter.value === true || parameter.value === "true";
-    else value.value = textValue(parameter.value);
+    else if (parameter.control === "number") {
+      try {
+        const numeric = parameterNumber(parameter.value, parameter.number);
+        value.type = "number"; value.inputMode = "decimal"; value.value = String(numeric.value);
+        const schema = parameter.schema?.kind === "number" ? parameter.schema : undefined;
+        const scale = parameter.number?.scale ?? 1;
+        const minimum = parameter.number?.minimum ?? (schema?.minimum === undefined ? undefined : schema.minimum * scale);
+        const maximum = parameter.number?.maximum ?? (schema?.maximum === undefined ? undefined : schema.maximum * scale);
+        value.step = String(parameter.number?.step ?? (schema?.integer ? scale : "any"));
+        if (minimum !== undefined) value.min = String(minimum);
+        if (maximum !== undefined) value.max = String(maximum);
+        value.required = true;
+        unitLabel = numeric.suffix || parameter.unit;
+      } catch (error) {
+        value.value = textValue(parameter.value); value.readOnly = true;
+        value.title = error instanceof Error ? error.message : String(error);
+      }
+    } else value.value = textValue(parameter.value);
     value.dataset.parameterId = parameter.id;
-    value.title = parameter.summary ?? parameter.label;
+    if (!value.title) value.title = parameter.summary ?? parameter.label;
     value.addEventListener("change", () => {
       if (value.type === "checkbox") {
         commitControl(entityId, parameter, value.checked);
       } else if (parameter.control === "number") {
-        const number = Number(value.value);
-        if (Number.isFinite(number)) commitControl(entityId, parameter, number);
+        if (value.reportValidity()) commitControl(entityId, parameter, value.valueAsNumber);
       } else {
         commitControl(entityId, parameter, value.value);
       }
     });
     right.append(value);
   }
-  if (parameter.unit !== undefined) {
+  if (unitLabel !== undefined) {
     const unit = document.createElement("small");
-    unit.textContent = parameter.unit;
+    unit.textContent = unitLabel;
     right.append(unit);
   }
   row.append(name, right);
@@ -671,6 +736,7 @@ async function writeParameter(entityId: string, parameter: Clip["inspector"][num
   const state = store.current();
   if (state === undefined) return;
   parameterWriteState = "Saving";
+  status.title = "";
   status.textContent = parameterWriteState;
   status.className = "status saving";
   try {
@@ -685,9 +751,13 @@ async function writeParameter(entityId: string, parameter: Clip["inspector"][num
     status.textContent = parameterWriteState;
     status.className = "status saved";
   } catch (error) {
+    // Validation and stale-revision rejections do not publish a new snapshot.
+    // Restore the accepted value just as a rejected compilation does.
+    restoreParameterControls(entityId);
     parameterWriteState = "Failed";
     status.textContent = error instanceof Error ? "Save failed" : parameterWriteState;
     status.className = "status error";
+    status.title = error instanceof Error ? error.message : String(error);
   }
 }
 
@@ -784,24 +854,76 @@ function renderSemanticInspector(snapshot: StudioSnapshot, segmentId: string): v
   inspector.replaceChildren(empty);
 }
 
+/** Exact identity choice for coincident anchors, through the same Companion-declared handles. */
+function semanticAnchorInspector(snapshot: StudioSnapshot, kind: "selection" | "moment", id: string): HTMLElement {
+  const semantic = snapshot.semantic;
+  const consumers = snapshot.tracks.flatMap((track) => track.clips).flatMap((clip) => clip.editHandles
+    .filter((handle) => handle.enabled && handle.semantic?.kind === kind && handle.semantic.id === id)
+    .map((handle) => ({ clip, handle })));
+  const current = kind === "selection" ? semantic?.selections.find((item) => item.id === id)
+    : semantic?.moments.find((item) => item.id === id);
+  if (!semantic || !current) return group("Timing", []);
+  const endpoints = "anchorId" in current ? [["Moment", current.anchorId]]
+    : [["Start", current.startAnchorId], ["End", current.endAnchorId]];
+  return group("Semantic anchors", endpoints.map(([label, anchorId]) => {
+    const anchor = semantic.anchors.find((item) => item.id === anchorId)!;
+    const describe = (item: typeof anchor) => {
+      const word = semantic.tokens.find((token) => token.id === item.tokenId)?.text;
+      return `${item.kind.replaceAll("-", " ")}${word ? ` · ${word}` : ""}${item.segmentId ? ` · ${item.segmentId}` : ""}`;
+    };
+    const candidates = semantic.anchors.filter((item) => item.frame === anchor.frame).flatMap((item) => {
+      const target: SemanticTarget = "anchorId" in current ? { kind: "moment", anchorId: item.id }
+        : { kind: "selection", startAnchorId: label === "Start" ? item.id : current.startAnchorId,
+            endAnchorId: label === "End" ? item.id : current.endAnchorId };
+      const owner = consumers.find(({ handle }) => semanticGestureSpan(semantic.anchors, handle, target) !== undefined);
+      return owner ? [{ item, target, ...owner }] : [];
+    });
+    if (candidates.length < 2) return property(label!, describe(anchor));
+    const row = document.createElement("label");
+    row.className = "property";
+    const name = document.createElement("span");
+    name.textContent = label!;
+    const control = document.createElement("select");
+    control.className = "parameter-value";
+    control.setAttribute("aria-label", `${label} semantic anchor`);
+    for (const { item } of candidates) {
+      const option = document.createElement("option"); option.value = item.id; option.textContent = describe(item);
+      control.append(option);
+    }
+    control.value = anchorId!;
+    control.addEventListener("change", () => {
+      const choice = candidates.find(({ item }) => item.id === control.value)!;
+      const span = semanticGestureSpan(semantic.anchors, choice.handle, choice.target)!;
+      const temporal = choice.handle.temporal!;
+      control.disabled = true;
+      status.textContent = "Saving"; status.className = "status saving";
+      void applyStudioMutation({ type: "timeline.adjust", revision: snapshot.revision,
+        entityId: choice.clip.id, gesture: choice.handle.gesture,
+        target: temporal.kind === "instant" ? { kind: "instant", frame: span.startFrame, semantic: choice.target }
+          : { kind: "window", ...span, semantic: choice.target },
+      }).then(() => { status.textContent = "Saved"; status.className = "status saved"; })
+        .catch((error: unknown) => {
+          control.value = anchorId!; status.textContent = "Save failed"; status.className = "status error";
+          status.title = error instanceof Error ? error.message : String(error);
+        }).finally(() => { control.disabled = false; });
+    });
+    row.append(name, control);
+    return row;
+  }));
+}
+
 function renderSemanticSelectionInspector(snapshot: StudioSnapshot, selectionId: string): void {
   const selection = snapshot.semantic?.selections.find((item) => item.id === selectionId);
   if (selection === undefined) { inspector.replaceChildren(); return; }
   defaultWorkspaceHeading();
-  const empty = document.createElement("div");
-  empty.className = "inspector-empty";
-  empty.textContent = "Adjust on the timeline";
-  inspector.replaceChildren(empty);
+  inspector.replaceChildren(semanticAnchorInspector(snapshot, "selection", selectionId));
 }
 
 function renderSemanticMomentInspector(snapshot: StudioSnapshot, momentId: string): void {
   const moment = snapshot.semantic?.moments.find((item) => item.id === momentId);
   if (moment === undefined) { inspector.replaceChildren(); return; }
   defaultWorkspaceHeading();
-  const empty = document.createElement("div");
-  empty.className = "inspector-empty";
-  empty.textContent = "Adjust on the timeline";
-  inspector.replaceChildren(empty);
+  inspector.replaceChildren(semanticAnchorInspector(snapshot, "moment", momentId));
 }
 
 // The word being spoken at the playhead, which is the point of carrying token
@@ -966,6 +1088,7 @@ window.addEventListener("keydown", (event) => {
 function applySnapshot(snapshot: StudioSnapshot): void {
   failureView.textContent = "";
   status.className = "status";
+  status.title = "";
   status.textContent = "";
   renderMeta(snapshot);
   library.show(snapshot);
@@ -993,7 +1116,6 @@ const response = await fetch("/__studio/session");
 const initial = await response.json() as StudioSnapshot | StudioFailure;
 if (response.ok && "tracks" in initial) applySnapshot(initial);
 else applyFailure(initial as StudioFailure);
-void library.refresh();
 
 type Hot = { on(event: string, listener: (value: unknown) => void): void };
 const hot = (import.meta as ImportMeta & { hot?: Hot }).hot;

package/packages/studio/src/ui/material-preview.ts

@@ -129,7 +129,7 @@ async function audioWaveform(url: string): Promise<string | undefined> {
   }
 }
 
-function audioPreview(url: string): Promise<string | undefined> {
+export function audioPreview(url: string): Promise<string | undefined> {
   const held = generatedAudio.get(url);
   if (held !== undefined) return held;
   const pending = audioWaveform(url).catch(() => undefined).then((waveform) => {

package/packages/studio/src/ui/overlay.ts

@@ -14,7 +14,7 @@ export type Box = {
   readonly widthPx: number; readonly heightPx: number;
 };
 
-export type Measure = (clipId: string) => Box | undefined;
+export type Measure = (clipId: string) => (Box & { readonly stackOrder: number }) | undefined;
 
 export type Overlay = {
   readonly element: SVGSVGElement;
@@ -62,21 +62,24 @@ export function createOverlay(store: Store, measure: Measure): Overlay {
   element.setAttribute("class", "stage-overlay");
   element.setAttribute("preserveAspectRatio", "none");
 
-  let live: readonly Clip[] = [];
+  let entities: readonly Clip[] = [];
   let canvas = { width: 1, height: 1 };
-  let last: { snapshot: StudioSnapshot; selected: Clip | undefined; frame: number } | undefined;
+  let last: { snapshot: StudioSnapshot; selected: Clip | undefined } | undefined;
 
   /**
    * The box is measured off the picture rather than restated from the Source:
    * motion moves an element across its span, so only what was drawn knows where
    * it ended up. A Present that has not mounted has no box to draw.
    */
-  const drawnBox = (clip: Clip): Box | undefined => {
-    const ids = clip.presentId === undefined ? clip.renderIds : [clip.presentId];
-    const boxes = ids.flatMap((id) => {
+  const drawnParts = (clip: Clip) => {
+    const ids = clip.renderIds.length > 0 ? clip.renderIds : clip.presentId === undefined ? [] : [clip.presentId];
+    return ids.flatMap((id) => {
       const found = measure(id);
       return found === undefined ? [] : [found];
     });
+  };
+  const drawnBox = (clip: Clip): Box | undefined => {
+    const boxes = drawnParts(clip);
     if (boxes.length === 0) return undefined;
     const left = Math.min(...boxes.map((box) => box.xPx));
     const top = Math.min(...boxes.map((box) => box.yPx));
@@ -87,23 +90,23 @@ export function createOverlay(store: Store, measure: Measure): Overlay {
 
   const draw = (): void => {
     if (last === undefined) return;
-    const { snapshot, selected, frame } = last;
+    const { snapshot, selected } = last;
         canvas = { width: snapshot.space.canvasWidth, height: snapshot.space.canvasHeight };
     element.setAttribute("viewBox", `0 0 ${canvas.width} ${canvas.height}`);
     element.replaceChildren();
-    // Only clips actually on screen can be picked out of the picture.
-    live = store.clipsAt(frame);
+    // An editing interval can end before its visual representation disappears.
+    // The renderer decides which associated parts are visible at this frame.
+    entities = snapshot.tracks.flatMap((track) => track.clips);
 
     if (selected === undefined) return;
     const tones = intentTones(snapshot);
     const tone = tones.get(selected.authoredId);
-    const onScreen = frame >= selected.startFrame && frame < selected.endFrameExclusive;
     const box = drawnBox(selected);
     // A Present that is not on screen at this frame was never drawn, so there
     // is nothing to put a box around.
     if (box === undefined) return;
     const group = document.createElementNS(SVG_NS, "g");
-    group.setAttribute("class", `box${onScreen ? "" : " box-elsewhere"}${tone === undefined ? "" : ` tone-${tone}`}`);
+    group.setAttribute("class", `box${tone === undefined ? "" : ` tone-${tone}`}`);
 
     group.append(rect(box, "box-content"));
 
@@ -111,16 +114,15 @@ export function createOverlay(store: Store, measure: Measure): Overlay {
     label.setAttribute("x", String(box.xPx + 10));
     label.setAttribute("y", String(Math.max(28, box.yPx - 12)));
     label.setAttribute("class", "box-label");
-    label.textContent = onScreen ? selected.display.title : `${selected.display.title} (not at this frame)`;
+    label.textContent = selected.display.title;
     group.append(label);
     element.append(group);
   };
 
-  store.subscribe(({ snapshot, selection, playhead }) => {
+  store.subscribe(({ snapshot, selection }) => {
     last = {
       snapshot,
       selected: selection.kind === "clip" ? store.clip(selection.clipId) : undefined,
-      frame: playhead.frame,
     };
     draw();
   });
@@ -133,12 +135,11 @@ export function createOverlay(store: Store, measure: Measure): Overlay {
       if (box.width === 0 || box.height === 0) return undefined;
       const x = (clientX - box.left) / box.width * canvas.width;
       const y = (clientY - box.top) / box.height * canvas.height;
-      // clipsAt already returns topmost first, so the first hit is the one an
-      // author would say they clicked on.
-      return live.find((clip) => {
-        const box = drawnBox(clip);
-        return box !== undefined && inside(box, x, y);
-      });
+      // Hit individual parts, not the empty space inside a group's union box.
+      return entities.flatMap((clip) => drawnParts(clip)
+        .filter((part) => inside(part, x, y))
+        .map((part) => ({ clip, order: part.stackOrder })))
+        .sort((left, right) => right.order - left.order)[0]?.clip;
     },
   };
 }

package/packages/studio/src/ui/sidebar-panel.ts

@@ -0,0 +1,31 @@
+import { icon } from "./icons.js";
+
+/** Shared chrome; each view owns its navigation choices, toolbar and content. */
+export function createSidebarPanel(mark: string, navigationLabel: string) {
+  const element = document.createElement("div");
+  element.className = "sidebar-panel";
+  element.innerHTML = `
+    <div class="sidebar-panel-heading"><span class="sidebar-panel-mark" aria-hidden="true">${icon(mark)}</span></div>
+    <div class="sidebar-panel-toolbar"></div>
+    <nav class="sidebar-panel-nav"></nav>
+    <div class="sidebar-panel-content"></div>`;
+  const navigation = element.querySelector<HTMLElement>("nav")!;
+  navigation.setAttribute("aria-label", navigationLabel);
+  return {
+    element, navigation,
+    toolbar: element.querySelector<HTMLElement>(".sidebar-panel-toolbar")!,
+    content: element.querySelector<HTMLElement>(".sidebar-panel-content")!,
+  };
+}
+
+export function sidebarItem(input: { label: string; icon: string; selected: boolean; select(): void }) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = `sidebar-panel-item${input.selected ? " active" : ""}`;
+  button.setAttribute("aria-label", input.label);
+  button.setAttribute("aria-pressed", String(input.selected));
+  button.title = input.label;
+  button.innerHTML = icon(input.icon);
+  button.addEventListener("click", input.select);
+  return button;
+}