@hypit/hypit 0.1.4 → 0.1.5

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 { parameterAuthorValue, parameterNumber, parameterOption, validateParameterValue } from "../parameter-values.js";
+import { parameterAuthorValue, parameterControlForSchema, parameterNumber, parameterOption, parameterRecordSchema, parameterRecordVariants, validateParameterValue } from "../parameter-values.js";
 import { createCodePane } from "./code.js";
 import { icon } from "./icons.js";
 import { createLibraryPane } from "./library.js";
@@ -13,6 +13,7 @@ import { semanticGestureSpan } from "../temporal-edit.js";
 import type { SemanticTarget } from "../temporal-edit.js";
 import { applyStudioMutation } from "./writeback.js";
 import { createTimeline } from "./timeline.js";
+import { createComments } from "./comments.js";
 import "../style.css";
 
 const app = document.querySelector<HTMLElement>("#app")!;
@@ -39,6 +40,10 @@ app.innerHTML = `
     <div class="topbar-right">
       <div class="meta" data-meta></div>
       <div class="status" data-status></div>
+      <div class="view-tabs" role="tablist" aria-label="Studio view">
+        <button type="button" role="tab" data-view="studio" aria-selected="true">${icon("studio")}Studio</button>
+        <button type="button" role="tab" data-view="comments" aria-selected="false">${icon("comments")}Comments</button>
+      </div>
     </div>
   </header>
   <main class="studio-shell">
@@ -65,6 +70,7 @@ const code = createCodePane();
 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 comments = createComments(store, stage);
 app.querySelector<HTMLElement>("[data-library]")!.append(library.element);
 app.querySelector<HTMLElement>("[data-timeline]")!.append(timeline.element);
 app.querySelector<HTMLElement>("[data-stage]")!.append(stage.element);
@@ -91,6 +97,14 @@ const workspaceHandle = createHandle({
 });
 workspaceHandle.classList.add("workspace-handle");
 upperShell.insertBefore(workspaceHandle, workspacePanel);
+const commentsHandle = createHandle({
+  axis: "column", initial: 360, minimum: 280, invert: true,
+  maximum: () => Math.max(280, upperShell.clientWidth - 360),
+  apply: (size) => { upperShell.style.setProperty("--comments-width", `${size}px`); },
+  remember: "hypit-studio.comments-width",
+});
+commentsHandle.classList.add("comments-handle");
+upperShell.append(commentsHandle, comments.element);
 shell.insertBefore(createHandle({
   axis: "row", initial: Math.round(window.innerHeight * 0.45), minimum: 220, invert: true,
   maximum: () => Math.max(260, shell.clientHeight - 260),
@@ -104,6 +118,29 @@ const project = app.querySelector<HTMLElement>("[data-project]")!;
 const status = app.querySelector<HTMLElement>("[data-status]")!;
 const failureView = app.querySelector<HTMLElement>("[data-failure]")!;
 
+const changeView = (): void => {
+  const current = window.location.hash === "#comments" ? "comments" : "studio";
+  shell.dataset.view = current;
+  app.querySelectorAll<HTMLButtonElement>(".view-tabs [data-view]").forEach((button) => {
+    const selected = button.dataset.view === current;
+    button.setAttribute("aria-selected", String(selected)); button.tabIndex = selected ? 0 : -1;
+  });
+  comments.activate(current === "comments");
+};
+app.querySelectorAll<HTMLButtonElement>(".view-tabs [data-view]").forEach((button) => {
+  button.addEventListener("click", () => { window.location.hash = button.dataset.view!; });
+  button.addEventListener("keydown", (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    event.stopPropagation();
+    const next = button.dataset.view === "studio" ? "comments" : "studio";
+    window.location.hash = next;
+    app.querySelector<HTMLButtonElement>(`.view-tabs [data-view="${next}"]`)!.focus();
+  });
+});
+window.addEventListener("hashchange", changeView);
+changeView();
+
 timeline.element.addEventListener("studio:write", (event) => {
   const state = (event as CustomEvent<{ readonly state?: string }>).detail.state;
   status.className = state === "error" ? "status error" : state === "saved" ? "status saved" : "status saving";
@@ -154,7 +191,7 @@ const domainPresentation: Readonly<Record<StudioInspectorDomain, { readonly labe
   how: { label: "How", icon: "how" },
   when: { label: "When", icon: "when" },
 };
-const domainOrder: readonly StudioInspectorDomain[] = ["where", "how", "when"];
+const domainOrder: readonly StudioInspectorDomain[] = ["where", "when", "how"];
 const inspectorDomainByEntity = new Map<string, StudioInspectorDomain>();
 const inspectorPageByEntity = new Map<string, string>();
 
@@ -230,8 +267,8 @@ document.addEventListener("keydown", (event) => {
 }, true);
 
 function selectControl(
-  entityId: string,
   parameter: Clip["inspector"][number],
+  change: (value: CanonicalValue) => void,
 ): HTMLElement {
   const control = document.createElement("div");
   control.className = "parameter-select parameter-control";
@@ -286,7 +323,7 @@ function selectControl(
       }
       close(false);
       trigger.focus();
-      commitControl(entityId, parameter, option.value);
+      change(option.value);
     });
     return item;
   });
@@ -437,7 +474,8 @@ function fieldLabel(name: string): string {
 
 function blankValue(schema: ValueSchema): CanonicalValue {
   if (schema.kind === "string") return "";
-  if (schema.kind === "number" || schema.kind === "null" || schema.kind === "literal" || schema.kind === "oneOf") return null;
+  if (schema.kind === "literal") return schema.value;
+  if (schema.kind === "number" || schema.kind === "null" || schema.kind === "oneOf") return null;
   if (schema.kind === "boolean") return false;
   if (schema.kind === "array") return [];
   if (schema.kind === "object") return Object.fromEntries(Object.entries(schema.fields)
@@ -452,31 +490,12 @@ function scalarDraftControl(
   held: CanonicalValue | undefined,
   change: (value: CanonicalValue) => void,
 ): HTMLElement {
-  if (schema.kind === "string" && schema.format === "color") {
-    return colorValueControl(label, typeof held === "string" ? held : "", change, true);
-  }
-  const input = document.createElement("input");
-  input.className = "parameter-value parameter-structured-value";
-  input.setAttribute("aria-label", label);
-  input.spellcheck = false;
-  if (schema.kind === "boolean") {
-    input.type = "checkbox";
-    input.checked = held === true;
-    input.addEventListener("change", () => change(input.checked));
-    return input;
-  }
-  input.type = "text";
-  if (schema.kind === "number") input.inputMode = "decimal";
-  input.value = held === undefined || held === null ? "" : textValue(held);
-  input.addEventListener("input", () => {
-    if (schema.kind === "number") {
-      const number = Number(input.value);
-      change(input.value.trim().length === 0 || !Number.isFinite(number) ? null : number);
-    } else {
-      change(input.value);
-    }
-  });
-  return input;
+  return parameterControl("", {
+    id: label, label, domain: "how", section: { id: "record", label: "" },
+    control: parameterControlForSchema(schema) ?? "text",
+    ...(schema.kind === "string" && schema.enum !== undefined ? { options: schema.enum } : {}),
+    schema, value: held ?? null,
+  }, change);
 }
 
 function recordDraftControl(
@@ -490,30 +509,34 @@ function recordDraftControl(
   const fields = document.createElement("div");
   fields.className = "parameter-record-fields";
   for (const [name, field] of Object.entries(schema.fields)) {
-    const row = document.createElement("label");
-    row.className = "parameter-record-field";
-    const copy = document.createElement("span");
-    copy.textContent = fieldLabel(name);
-    row.append(copy, scalarDraftControl(fieldLabel(name), field.schema, record[name], (next) => {
+    if (field.schema.kind === "literal") continue;
+    fields.append(scalarDraftControl(fieldLabel(name), field.schema, record[name], (next) => {
       record = { ...record, [name]: next };
       change(record);
     }));
-    fields.append(row);
   }
   return fields;
 }
 
-function structuredControl(entityId: string, parameter: Clip["inspector"][number]): HTMLElement {
-  const schema = parameter.schema;
+function structuredControl(entityId: string, parameter: Clip["inspector"][number], change: (value: CanonicalValue) => void): HTMLElement {
+  const declaredSchema = parameter.schema;
   const shell = document.createElement("div");
   shell.className = "parameter-structured";
-  if (schema === undefined || (schema.kind !== "array" && schema.kind !== "object")) return shell;
+  if (declaredSchema === undefined || (declaredSchema.kind !== "array" && declaredSchema.kind !== "object" && !parameterRecordVariants(declaredSchema).length)) return shell;
   let draft = structuredClone(parameter.value);
-  let refreshDecisions = (): void => {};
+  const notice = document.createElement("div");
+  notice.className = "parameter-structured-notice";
+  notice.setAttribute("role", "status");
+  const save = (): void => {
+    const changed = !sameValue(draft, parameter.value);
+    notice.hidden = !changed || valid();
+    notice.textContent = "Complete the required fields with valid values to save.";
+    if (changed && valid()) change(draft);
+  };
 
   const valid = (): boolean => {
     try {
-      validateParameterValue(draft, schema, parameter.label);
+      validateParameterValue(draft, declaredSchema, parameter.label);
       return true;
     } catch {
       return false;
@@ -522,6 +545,21 @@ function structuredControl(entityId: string, parameter: Clip["inspector"][number
 
   const render = (): void => {
     shell.replaceChildren();
+    const variants = parameterRecordVariants(declaredSchema);
+    const schema = declaredSchema.kind === "array" ? declaredSchema : parameterRecordSchema(declaredSchema, draft);
+    if (schema === undefined) return;
+    if (variants.length) {
+      const active = variants.find(variant => variant.schema === schema)!;
+      shell.append(parameterControl(entityId, {
+        ...parameter, control: "select", value: variants.indexOf(active),
+        options: variants.map((variant, index) => ({ value: index, label: textValue(variant.value) })),
+      }, (next) => {
+        if (next === variants.indexOf(active)) return;
+        draft = blankValue(variants[Number(next)]!.schema);
+        render();
+        save();
+      }));
+    }
     const summary = document.createElement("div");
     summary.className = "parameter-structured-summary";
     const count = document.createElement("span");
@@ -529,7 +567,7 @@ function structuredControl(entityId: string, parameter: Clip["inspector"][number
       ? `${draft.length} ${draft.length === 1 ? "item" : "items"}`
       : "Structured value";
     summary.append(count);
-    shell.append(summary);
+    if (schema.kind === "array") shell.append(summary);
 
     if (schema.kind === "array") {
       const list = Array.isArray(draft) ? draft : [];
@@ -542,12 +580,12 @@ function structuredControl(entityId: string, parameter: Clip["inspector"][number
           ? recordDraftControl(schema.items, item, (next) => {
               const current = Array.isArray(draft) ? draft : [];
               draft = current.map((candidate, heldIndex) => heldIndex === index ? next : candidate);
-              refreshDecisions();
+              save();
             })
           : scalarDraftControl(`${parameter.label} ${index + 1}`, schema.items, item, (next) => {
               const current = Array.isArray(draft) ? draft : [];
               draft = current.map((candidate, heldIndex) => heldIndex === index ? next : candidate);
-              refreshDecisions();
+              save();
             });
         const actions = document.createElement("span");
         actions.className = "parameter-list-actions";
@@ -557,6 +595,7 @@ function structuredControl(entityId: string, parameter: Clip["inspector"][number
           reordered.splice(index + offset, 0, moving!);
           draft = reordered;
           render();
+          save();
         };
         const up = document.createElement("button");
         up.type = "button";
@@ -579,6 +618,7 @@ function structuredControl(entityId: string, parameter: Clip["inspector"][number
           const current = Array.isArray(draft) ? draft : [];
           draft = current.filter((_, heldIndex) => heldIndex !== index);
           render();
+          save();
         });
         actions.append(up, down, remove);
         row.append(editor, actions);
@@ -588,7 +628,7 @@ function structuredControl(entityId: string, parameter: Clip["inspector"][number
     } else {
       shell.append(recordDraftControl(schema, draft, (next) => {
         draft = next;
-        refreshDecisions();
+        save();
       }));
     }
 
@@ -605,69 +645,81 @@ function structuredControl(entityId: string, parameter: Clip["inspector"][number
         const current = Array.isArray(draft) ? draft : [];
         draft = [...current, blankValue(schema.items)];
         render();
+        save();
       });
       footer.append(add);
     }
-    const decisions = document.createElement("span");
-    decisions.className = "parameter-structured-decisions";
-    const reset = document.createElement("button");
-    reset.type = "button";
-    reset.textContent = "Reset";
-    reset.disabled = sameValue(draft, parameter.value);
-    reset.addEventListener("click", () => {
-      draft = structuredClone(parameter.value);
-      render();
-    });
-    const apply = document.createElement("button");
-    apply.type = "button";
-    apply.className = "primary";
-    apply.textContent = "Apply";
-    apply.addEventListener("click", () => commitControl(entityId, parameter, draft));
-    refreshDecisions = () => {
-      reset.disabled = sameValue(draft, parameter.value);
-      apply.disabled = reset.disabled || !valid();
-    };
-    refreshDecisions();
-    decisions.append(reset, apply);
-    footer.append(decisions);
-    shell.append(footer);
+    if (schema.kind === "array") shell.append(footer);
+    notice.hidden = sameValue(draft, parameter.value) || valid();
+    shell.append(notice);
   };
   render();
   return shell;
 }
 
-function parameterControl(entityId: string, parameter: Clip["inspector"][number]): HTMLElement {
+function parameterControl(
+  entityId: string,
+  parameter: Clip["inspector"][number],
+  change?: (value: CanonicalValue) => void,
+): HTMLElement {
+  const editable = parameter.edit !== undefined || change !== undefined;
+  const commit = change ?? ((value: CanonicalValue) => commitControl(entityId, parameter, value));
+  if (editable && parameter.control === "record" && parameter.schema !== undefined && parameterRecordVariants(parameter.schema).length) {
+    return structuredControl(entityId, parameter, commit);
+  }
   const row = document.createElement("div");
-  row.className = `parameter-row parameter-editable control-${parameter.control}`;
+  row.className = `parameter-row ${!editable ? "parameter-readonly" : "parameter-editable"} control-${parameter.control}`;
   const name = document.createElement("span");
   name.className = "parameter-label";
   name.textContent = parameter.label;
   name.title = parameter.summary ?? parameter.label;
   const right = document.createElement("span");
   right.className = "parameter-right parameter-control";
+  if (!editable) {
+    const value = document.createElement("span");
+    value.className = "parameter-display";
+    let displayValue = textValue(parameter.value);
+    let unitLabel = parameter.unit;
+    if (parameter.control === "number") {
+      try {
+        const numeric = parameterNumber(change && parameter.value === null ? 0 : parameter.value, parameter.number);
+        displayValue = String(numeric.value);
+        unitLabel = numeric.suffix || parameter.unit;
+      } catch { /* Keep the actual value visible when it is not a scalar. */ }
+    } else if (parameter.control === "select") {
+      displayValue = parameter.options?.map(parameterOption).find(option => option.value === parameter.value)?.label ?? displayValue;
+    }
+    value.textContent = displayValue;
+    right.append(value);
+    if (unitLabel !== undefined) {
+      const unit = document.createElement("small"); unit.textContent = unitLabel; right.append(unit);
+    }
+    row.append(name, right);
+    return row;
+  }
   let unitLabel = parameter.unit;
   if (parameter.control === "select") {
-    right.append(selectControl(entityId, parameter));
+    right.append(selectControl(parameter, commit));
   } else if (parameter.control === "color") {
     right.append(colorValueControl(parameter.label, textValue(parameter.value), (next) => {
-      commitControl(entityId, parameter, next);
+      commit(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);
+        swatch.addEventListener("click", () => commit(color)); palette.append(swatch);
       }
       right.append(palette);
     }
   } else if (parameter.control === "list" || parameter.control === "record") {
-    right.append(structuredControl(entityId, parameter));
+    right.append(structuredControl(entityId, parameter, commit));
   } 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);
+      value.addEventListener("change", () => commit(value.value)); right.append(value);
       row.append(name, right); return row;
     }
     const value = document.createElement("input");
@@ -678,8 +730,8 @@ function parameterControl(entityId: string, parameter: Clip["inspector"][number]
     if (value.type === "checkbox") value.checked = parameter.value === true || parameter.value === "true";
     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 numeric = parameterNumber(change && parameter.value === null ? 0 : parameter.value, parameter.number);
+        value.type = "number"; value.inputMode = "decimal"; value.value = change && parameter.value === null ? "" : 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);
@@ -698,11 +750,12 @@ function parameterControl(entityId: string, parameter: Clip["inspector"][number]
     if (!value.title) value.title = parameter.summary ?? parameter.label;
     value.addEventListener("change", () => {
       if (value.type === "checkbox") {
-        commitControl(entityId, parameter, value.checked);
+        commit(value.checked);
       } else if (parameter.control === "number") {
-        if (value.reportValidity()) commitControl(entityId, parameter, value.valueAsNumber);
+        if (change) commit(Number.isFinite(value.valueAsNumber) ? value.valueAsNumber : null);
+        else if (value.reportValidity()) commit(value.valueAsNumber);
       } else {
-        commitControl(entityId, parameter, value.value);
+        commit(value.value);
       }
     });
     right.append(value);
@@ -802,7 +855,7 @@ function renderInspector(snapshot: StudioSnapshot, clipId: string | undefined):
     defaultWorkspaceHeading();
     const empty = document.createElement("div");
     empty.className = "inspector-empty";
-    empty.textContent = "No adjustable parameters";
+    empty.textContent = "No details for this selection";
     inspector.replaceChildren(empty);
     return;
   }
@@ -813,17 +866,22 @@ function renderInspector(snapshot: StudioSnapshot, clipId: string | undefined):
 
   const domainFields = clip.inspector.filter((field) => field.domain === activeDomain);
   const pages = new Map<string, { readonly label: string; readonly fields: typeof domainFields }>();
-  for (const field of domainFields) {
-    const id = field.page?.id ?? "default";
+  const commonFields = domainFields.filter(field => field.page === undefined);
+  for (const field of domainFields.filter(field => field.page !== undefined)) {
+    const id = field.page!.id;
     const page = pages.get(id) ?? { label: field.page?.label ?? "", fields: [] };
     pages.set(id, { ...page, fields: [...page.fields, field] });
   }
   const pageIds = [...pages.keys()];
+  if (pageIds.length === 0) {
+    inspector.replaceChildren(...parameterGroups(clip.id, commonFields));
+    return;
+  }
   const memoryKey = `${clip.id}:${activeDomain}`;
   const rememberedPage = inspectorPageByEntity.get(memoryKey);
   const activePage = rememberedPage !== undefined && pages.has(rememberedPage) ? rememberedPage : pageIds[0]!;
   inspectorPageByEntity.set(memoryKey, activePage);
-  const page = pages.get(activePage)!;
+  const page = pages.get(activePage);
   const subtabs = document.createElement("div");
   subtabs.className = "inspector-subtabs";
   if (pageIds.length > 1) {
@@ -841,7 +899,7 @@ function renderInspector(snapshot: StudioSnapshot, clipId: string | undefined):
       return button;
     }));
   }
-  inspector.replaceChildren(...(pageIds.length > 1 ? [subtabs] : []), ...parameterGroups(clip.id, page.fields));
+  inspector.replaceChildren(...(pageIds.length > 1 ? [subtabs] : []), ...parameterGroups(clip.id, [...commonFields, ...(page?.fields ?? [])]));
 }
 
 function renderSemanticInspector(snapshot: StudioSnapshot, segmentId: string): void {
@@ -850,7 +908,7 @@ function renderSemanticInspector(snapshot: StudioSnapshot, segmentId: string): v
   defaultWorkspaceHeading();
   const empty = document.createElement("div");
   empty.className = "inspector-empty";
-  empty.textContent = "No adjustable parameters";
+  empty.textContent = "No details for this selection";
   inspector.replaceChildren(empty);
 }
 
@@ -1060,6 +1118,7 @@ window.addEventListener("keydown", (event) => {
     event.preventDefault();
     return;
   }
+  if (shell.dataset.view === "comments" && ["-", "_", "=", "+", "\\", "f", "F"].includes(event.key)) return;
   if (event.key === "-" || event.key === "_") {
     timeline.zoomOut();
     event.preventDefault();

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

@@ -20,6 +20,7 @@ export type Overlay = {
   readonly element: SVGSVGElement;
   /** The topmost clip drawn at a point, in client coordinates. */
   hitTest(clientX: number, clientY: number): Clip | undefined;
+  hitsAt(clientX: number, clientY: number): readonly Clip[];
   /** Redraw against the picture, once it has mounted or moved. */
   refresh(): void;
 };
@@ -127,19 +128,22 @@ export function createOverlay(store: Store, measure: Measure): Overlay {
     draw();
   });
 
-  return {
-    element,
-    refresh: draw,
-    hitTest(clientX, clientY) {
+  const hitsAt = (clientX: number, clientY: number): readonly Clip[] => {
       const box = element.getBoundingClientRect();
-      if (box.width === 0 || box.height === 0) return undefined;
+      if (box.width === 0 || box.height === 0) return [];
       const x = (clientX - box.left) / box.width * canvas.width;
       const y = (clientY - box.top) / box.height * canvas.height;
       // Hit individual parts, not the empty space inside a group's union box.
-      return entities.flatMap((clip) => drawnParts(clip)
+      const hits = 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;
-    },
+        .sort((left, right) => right.order - left.order);
+      return [...new Map(hits.map(({ clip }) => [clip.id, clip])).values()];
+  };
+  return {
+    element,
+    refresh: draw,
+    hitsAt,
+    hitTest: (x, y) => hitsAt(x, y)[0],
   };
 }

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

@@ -0,0 +1,108 @@
+import type { StudioSnapshot } from "../shared.js";
+import { feedbackClock } from "../feedback.js";
+
+type PreviewWindow = Window & {
+  __hypitSeekFrame?: (frame: number) => Promise<boolean>;
+  __hypitSetMuted?: (muted: boolean) => Promise<boolean>;
+};
+
+/** One lazy, muted picture for scrubbing; it never changes the main playhead. */
+export function createScrubPreview(container: HTMLElement) {
+  const element = document.createElement("div");
+  element.className = "scrub-preview";
+  element.hidden = true;
+  element.innerHTML = '<div class="scrub-preview-picture"><span>Loading frame…</span></div><div class="scrub-preview-time"></div>';
+  element.setAttribute("aria-hidden", "true");
+  const picture = element.querySelector<HTMLElement>(".scrub-preview-picture")!;
+  const status = picture.querySelector<HTMLElement>("span")!;
+  const time = element.querySelector<HTMLElement>(".scrub-preview-time")!;
+  container.append(element);
+  let iframe: HTMLIFrameElement | undefined;
+  let revision: number | undefined;
+  let ready = false;
+  let seeking = false;
+  let requested: number | undefined;
+  let displayed: number | undefined;
+
+  const seek = async (): Promise<void> => {
+    const current = iframe;
+    if (!ready || seeking || current === undefined || requested === undefined || requested === displayed) return;
+    seeking = true;
+    try {
+      while (iframe === current && requested !== undefined && requested !== displayed) {
+        const frame: number = requested;
+        const target = current.contentWindow as PreviewWindow | null;
+        const placed = await target?.__hypitSeekFrame?.(frame);
+        if (iframe !== current) return;
+        if (!placed) throw new Error("Frame unavailable");
+        displayed = frame;
+        if (requested === frame) {
+          current.style.visibility = "visible";
+          status.hidden = true;
+          element.dataset.frame = String(frame);
+        }
+      }
+    } catch {
+      if (iframe === current) status.textContent = "Frame unavailable";
+    } finally {
+      if (iframe === current) seeking = false;
+    }
+  };
+  const hide = (): void => { element.hidden = true; requested = undefined; };
+  const clear = (): void => {
+    hide(); iframe?.remove(); iframe = undefined; revision = undefined;
+    ready = false; seeking = false; displayed = undefined;
+    delete element.dataset.frame;
+  };
+  return {
+    hide, clear,
+    show(snapshot: StudioSnapshot, frame: number, clientX: number): void {
+      if (snapshot.revision !== revision) clear();
+      if (iframe === undefined) {
+        revision = snapshot.revision;
+        const { canvasWidth, canvasHeight } = snapshot.space;
+        const scale = Math.min(200 / canvasWidth, 170 / canvasHeight);
+        picture.style.width = `${canvasWidth * scale}px`;
+        picture.style.height = `${canvasHeight * scale}px`;
+        const created = document.createElement("iframe");
+        created.title = "Hovered frame";
+        created.tabIndex = -1;
+        created.setAttribute("sandbox", "allow-scripts allow-same-origin");
+        created.setAttribute("allow", "autoplay 'none'");
+        created.style.width = `${canvasWidth}px`;
+        created.style.height = `${canvasHeight}px`;
+        created.style.transform = `scale(${scale})`;
+        created.style.visibility = "hidden";
+        created.addEventListener("load", () => {
+          void (async () => {
+            const target = created.contentWindow as PreviewWindow | null;
+            await target?.__hypitSetMuted?.(true);
+            if (iframe !== created) return;
+            ready = true;
+            await seek();
+          })().catch(() => { if (iframe === created) status.textContent = "Frame unavailable"; });
+        });
+        created.srcdoc = snapshot.preview.srcdoc;
+        iframe = created;
+        picture.prepend(created);
+      }
+      requested = frame;
+      element.hidden = false;
+      const room = container.getBoundingClientRect();
+      const left = Math.max(0, Math.min(clientX - room.left - element.offsetWidth / 2, room.width - element.offsetWidth));
+      element.style.left = `${left}px`;
+      time.textContent = feedbackClock(frame * snapshot.space.frameRate.denominator / snapshot.space.frameRate.numerator);
+      if (frame !== displayed) {
+        iframe.style.visibility = "hidden";
+        status.textContent = "Loading frame…";
+        status.hidden = false;
+        delete element.dataset.frame;
+      } else {
+        iframe.style.visibility = "visible";
+        status.hidden = true;
+        element.dataset.frame = String(frame);
+      }
+      void seek();
+    },
+  };
+}