@hypit/hypit 0.1.3 → 0.1.5

package/packages/studio/src/temporal-edit.ts

@@ -0,0 +1,131 @@
+import type { StudioEditHandle, StudioSemanticAnchor, StudioTemporalInstantProjection } from "@hypit/studio-adapter";
+
+export type SemanticTarget =
+  | { readonly kind: "selection"; readonly startAnchorId: string; readonly endAnchorId: string }
+  | { readonly kind: "moment"; readonly anchorId: string };
+
+type Span = { readonly startFrame: number; readonly endFrameExclusive: number };
+
+/** Project only the semantic write exposed by the handle. This does not invert expressions. */
+export function semanticGestureSpan(
+  anchors: readonly StudioSemanticAnchor[], handle: StudioEditHandle, target: SemanticTarget,
+): Span | undefined {
+  const semantic = handle.semantic;
+  const temporal = handle.temporal;
+  if (!semantic || !temporal || target.kind !== semantic.kind) return undefined;
+  const byId = new Map(anchors.map((anchor, order) => [anchor.id, { ...anchor, order }]));
+  let span: Span;
+  if (semantic.kind === "moment" && target.kind === "moment") {
+    const previous = byId.get(semantic.anchorId);
+    const next = byId.get(target.anchorId);
+    if (!previous || !next) return undefined;
+    const delta = next.frame - previous.frame;
+    span = temporal.kind === "instant"
+      ? { startFrame: temporal.frame + delta, endFrameExclusive: temporal.frame + delta + 1 }
+      : { startFrame: temporal.startFrame + delta, endFrameExclusive: temporal.endFrameExclusive + delta };
+  } else if (semantic.kind === "selection" && target.kind === "selection") {
+    const start = byId.get(target.startAnchorId);
+    const end = byId.get(target.endAnchorId);
+    if (!start || !end || start.order > end.order) return undefined;
+    if (temporal.kind === "instant") {
+      if (temporal.authority.kind !== "semantic") return undefined;
+      if (temporal.authority.boundary === "start" && target.endAnchorId !== semantic.endAnchorId
+        || temporal.authority.boundary === "end" && target.startAnchorId !== semantic.startAnchorId) return undefined;
+      const frame = temporal.authority.boundary === "start" ? start.frame : end.frame;
+      span = { startFrame: frame, endFrameExclusive: frame + 1 };
+    } else {
+      if (handle.gesture === "trim-start" && target.endAnchorId !== semantic.endAnchorId
+        || handle.gesture === "trim-end" && target.startAnchorId !== semantic.startAnchorId) return undefined;
+      if (handle.gesture === "move") {
+        const stops = [...new Set(anchors.map((anchor) => anchor.frame))].sort((a, b) => a - b);
+        const previousStart = byId.get(semantic.startAnchorId);
+        const previousEnd = byId.get(semantic.endAnchorId);
+        if (!previousStart || !previousEnd
+          || stops.indexOf(start.frame) - stops.indexOf(previousStart.frame)
+            !== stops.indexOf(end.frame) - stops.indexOf(previousEnd.frame)) return undefined;
+      }
+      span = { startFrame: start.frame, endFrameExclusive: end.frame };
+    }
+  } else return undefined;
+  if (!Number.isSafeInteger(span.startFrame) || span.startFrame < 0
+    || !Number.isSafeInteger(span.endFrameExclusive) || span.endFrameExclusive <= span.startFrame) return undefined;
+  if (temporal.kind === "window"
+    && ((handle.gesture === "trim-start" && span.endFrameExclusive !== temporal.endFrameExclusive)
+      || (handle.gesture === "trim-end" && span.startFrame !== temporal.startFrame))) return undefined;
+  return span;
+}
+
+/** A stop is a frame position; coincident anchors remain distinct choices at that stop. */
+export function chooseSemanticGesture(input: {
+  readonly anchors: readonly StudioSemanticAnchor[];
+  readonly handle: StudioEditHandle;
+  readonly pointerStart: number;
+  readonly pointerNow: number;
+  readonly frameCount: number;
+}): SemanticTarget | undefined {
+  const { anchors, handle } = input;
+  const semantic = handle.semantic;
+  const temporal = handle.temporal;
+  if (!semantic || !temporal) return undefined;
+  const order = new Map(anchors.map((anchor, index) => [anchor.id, index]));
+  const byId = new Map(anchors.map((anchor) => [anchor.id, anchor]));
+  const at = new Map<number, StudioSemanticAnchor[]>();
+  for (const anchor of anchors) at.set(anchor.frame, [...at.get(anchor.frame) ?? [], anchor]);
+  const stops = [...at.keys()].sort((a, b) => a - b);
+  const ranked = (choices: readonly StudioSemanticAnchor[], preferred: StudioSemanticAnchor) => [...choices].sort((a, b) =>
+    Number(a.id !== preferred.id) - Number(b.id !== preferred.id)
+    || Number(a.kind !== preferred.kind) - Number(b.kind !== preferred.kind)
+    || order.get(a.id)! - order.get(b.id)!);
+  const valid = (target: SemanticTarget) => {
+    const span = semanticGestureSpan(anchors, handle, target);
+    return span !== undefined && (temporal.kind === "instant" ? span.startFrame : span.endFrameExclusive) <= input.frameCount;
+  };
+  const delta = input.pointerNow - input.pointerStart;
+  if (semantic.kind === "moment") {
+    const current = byId.get(semantic.anchorId);
+    if (!current) return undefined;
+    const candidates = ranked(anchors, current).sort((a, b) =>
+      Math.abs(a.frame - current.frame - delta) - Math.abs(b.frame - current.frame - delta));
+    return candidates.map((anchor): SemanticTarget => ({ kind: "moment", anchorId: anchor.id })).find(valid);
+  }
+  const start = byId.get(semantic.startAnchorId);
+  const end = byId.get(semantic.endAnchorId);
+  if (!start || !end) return undefined;
+  const target = (a: StudioSemanticAnchor, b: StudioSemanticAnchor): SemanticTarget => ({
+    kind: "selection", startAnchorId: a.id, endAnchorId: b.id,
+  });
+  if (handle.gesture === "move" && temporal.kind === "window") {
+    const first = stops.indexOf(start.frame);
+    const last = stops.indexOf(end.frame);
+    const shifts = stops.map((_, index) => index - first)
+      .filter((shift) => last + shift >= 0 && last + shift < stops.length)
+      .sort((a, b) => Math.abs(stops[first + a]! - start.frame - delta)
+        - Math.abs(stops[first + b]! - start.frame - delta) || Math.abs(a) - Math.abs(b));
+    for (const shift of shifts) {
+      for (const a of ranked(at.get(stops[first + shift]!)!, start)) {
+        for (const b of ranked(at.get(stops[last + shift]!)!, end)) {
+          const candidate = target(a, b);
+          if (valid(candidate)) return candidate;
+        }
+      }
+    }
+    return undefined;
+  }
+  const boundary = temporal.kind === "instant" && temporal.authority.kind === "semantic"
+    ? temporal.authority.boundary : handle.gesture === "trim-start" ? "start" : "end";
+  const current = boundary === "start" ? start : end;
+  const candidates = ranked(anchors, current).sort((a, b) =>
+    Math.abs(a.frame - current.frame - delta) - Math.abs(b.frame - current.frame - delta));
+  return candidates.map((anchor) => boundary === "start" ? target(anchor, end) : target(start, anchor)).find(valid);
+}
+
+
+/** Keep the reference and write its local frame offset; a bare reference starts at zero. */
+export function formatTemporalPointEdit(
+  reference: StudioTemporalInstantProjection["reference"], desired: number, base?: number,
+): string {
+  if (reference === "absolute") return `${desired}f`;
+  if (base === undefined) throw new Error(`The ${reference} projection base is unavailable.`);
+  const offset = desired - base;
+  return `${reference}${offset >= 0 ? "+" : ""}${offset}f`;
+}

package/packages/studio/src/ui/artifact-name.ts

@@ -0,0 +1,80 @@
+/** Two-line label with an expanding editor; the caller owns persistence. */
+export function createArtifactName(options: {
+  readonly name: string;
+  readonly editable: boolean;
+  readonly select: () => void;
+  readonly save: (name: string) => Promise<string>;
+}) {
+  const element = document.createElement("div");
+  element.className = "artifact-copy";
+  const label = document.createElement("button");
+  label.type = "button";
+  label.className = "artifact-name";
+  let name = options.name;
+  const text = document.createElement("span");
+  text.className = "artifact-name-text";
+  text.textContent = name;
+  label.append(text);
+  label.title = options.editable ? `${name}\nDouble-click or press F2 to rename` : `${name}\nNaming is available when this Build finishes`;
+  element.append(label);
+  label.addEventListener("click", (event) => { event.stopPropagation(); options.select(); });
+  let editing = false;
+
+  function edit(): void {
+    if (editing || !options.editable) return;
+    options.select();
+    editing = true;
+    element.classList.add("editing");
+    label.hidden = true;
+    const field = document.createElement("textarea");
+    field.className = "artifact-name-editor";
+    field.value = name;
+    field.rows = 1;
+    field.setAttribute("aria-label", "Display name");
+    const error = document.createElement("span");
+    error.className = "artifact-name-error";
+    error.setAttribute("role", "status");
+    element.append(field, error);
+    const resize = () => { field.style.height = "0px"; field.style.height = `${field.scrollHeight + field.offsetHeight - field.clientHeight}px`; };
+    resize();
+    field.focus();
+    field.setSelectionRange(name.length, name.length);
+    field.addEventListener("input", resize);
+    field.addEventListener("click", (event) => event.stopPropagation());
+    let saving = false;
+    const close = () => {
+      editing = false;
+      field.remove();
+      error.remove();
+      label.hidden = false;
+      element.classList.remove("editing");
+    };
+    const save = async () => {
+      if (!editing || saving) return;
+      const value = field.value.trim();
+      if (value === name) { close(); return; }
+      if (value.length === 0) { error.textContent = "Enter a name."; return; }
+      saving = true;
+      field.readOnly = true;
+      error.textContent = "Saving…";
+      try {
+        name = await options.save(value);
+        text.textContent = name;
+        label.title = `${name}\nDouble-click or press F2 to rename`;
+        close();
+      } catch (cause) {
+        error.textContent = cause instanceof Error ? cause.message : String(cause);
+      } finally {
+        saving = false;
+        field.readOnly = false;
+      }
+    };
+    field.addEventListener("blur", () => { void save(); });
+    field.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && !saving) { event.preventDefault(); event.stopPropagation(); close(); label.focus(); }
+      else if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); void save(); }
+    });
+  }
+  label.addEventListener("dblclick", (event) => { event.preventDefault(); event.stopPropagation(); edit(); });
+  return { element, edit };
+}

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

@@ -0,0 +1,99 @@
+import type { StudioArtifactView } from "../shared.js";
+import { audioPreview } from "./material-preview.js";
+
+/** A media viewer only: it does not change the composition or its playhead. */
+export function createArtifactPreview(changed: () => void) {
+  const element = document.createElement("div");
+  element.className = "stage-artifact";
+  element.hidden = true;
+  let selected: StudioArtifactView | undefined;
+  let media: HTMLMediaElement | undefined;
+  let generation = 0;
+
+  function close(): void {
+    generation += 1;
+    selected = undefined;
+    if (media !== undefined) {
+      media.pause();
+      media.removeAttribute("src");
+      media.load();
+    }
+    media = undefined;
+    element.replaceChildren();
+    element.hidden = true;
+  }
+
+  function open(artifact: StudioArtifactView, muted: boolean): void {
+    close();
+    const current = generation;
+    selected = artifact;
+    element.hidden = false;
+    const url = `/__studio/artifact?${new URLSearchParams({ build: artifact.build, output: artifact.output })}`;
+    const error = document.createElement("p");
+    error.className = "stage-media-error";
+    error.hidden = true;
+    error.setAttribute("role", "status");
+    const failed = () => {
+      if (generation !== current) return;
+      error.textContent = "This media could not be opened in the browser.";
+      error.hidden = false;
+      changed();
+    };
+    if (artifact.mediaType.startsWith("image/")) {
+      const image = document.createElement("img");
+      image.alt = artifact.displayName ?? artifact.output;
+      image.addEventListener("error", failed);
+      image.src = url;
+      element.append(image);
+    } else {
+      const audio = artifact.mediaType.startsWith("audio/");
+      const player = document.createElement(audio ? "audio" : "video");
+      media = player;
+      if (player instanceof HTMLVideoElement) player.playsInline = true;
+      player.preload = "metadata";
+      player.muted = muted;
+      for (const event of ["loadedmetadata", "durationchange", "timeupdate", "play", "pause", "ended", "seeking", "seeked"]) {
+        player.addEventListener(event, () => { if (generation === current) changed(); });
+      }
+      player.addEventListener("error", failed);
+      player.src = url;
+      element.append(player);
+      if (audio) {
+        const wave = document.createElement("div");
+        wave.className = "stage-audio-wave";
+        wave.textContent = "Audio";
+        element.append(wave);
+        void audioPreview(url).then((waveform) => {
+          if (generation !== current || waveform === undefined) return;
+          const image = document.createElement("img");
+          image.src = waveform;
+          image.alt = "Audio waveform";
+          wave.replaceChildren(image);
+        });
+      }
+    }
+    element.append(error);
+    changed();
+  }
+
+  function seek(seconds: number): void {
+    if (media === undefined || !Number.isFinite(media.duration)) return;
+    media.currentTime = Math.max(0, Math.min(media.duration, seconds));
+    changed();
+  }
+
+  function toggle(): void {
+    const player = media;
+    if (player === undefined) return;
+    if (!player.paused) player.pause();
+    else {
+      if (player.ended) player.currentTime = 0;
+      void player.play().catch(() => changed());
+    }
+  }
+
+  return { element, open, close, seek, toggle,
+    get selected() { return selected; },
+    get media() { return media; },
+  };
+}

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

@@ -0,0 +1,233 @@
+import { feedbackClock } from "../feedback.js";
+import type { FeedbackComment, FeedbackMutation, FeedbackView } from "../feedback.js";
+import { icon } from "./icons.js";
+import type { Store } from "./selection.js";
+import type { Stage } from "./stage.js";
+
+type Anchor = Pick<FeedbackComment, "at">;
+
+export function createComments(store: Store, stage: Stage) {
+  const element = document.createElement("aside");
+  element.className = "comments-panel";
+  element.innerHTML = `
+    <div class="pane-heading comments-heading">
+      <div class="pane-title">${icon("comments")}<h2>Comments</h2><span data-count></span></div>
+      <button type="button" class="comments-icon" data-refresh aria-label="Refresh comments" title="Refresh comments">${icon("refresh")}</button>
+    </div>
+    <div class="comments-filters" role="group" aria-label="Filter comments">
+      <button type="button" data-filter="all" aria-pressed="true">All</button>
+      <button type="button" data-filter="open" aria-pressed="false">Open</button>
+      <button type="button" data-filter="done" aria-pressed="false">Done</button>
+    </div>
+    <div class="comments-error" role="status" aria-live="polite" hidden></div>
+    <div class="comments-list" aria-label="Comments"></div>
+    <form class="comment-composer">
+      <div class="comment-anchor">
+        <button type="button" class="comment-time" data-current-time title="Use current frame" aria-label="Use current frame">${icon("when")}<span>00:00.00</span></button>
+      </div>
+      <div class="comment-input">
+        <textarea rows="3" aria-label="Write a comment" placeholder="What would you like to change?" spellcheck="true" enterkeyhint="send"></textarea>
+        <div class="comment-input-actions">
+          <div class="comment-tools">
+            <button type="button" class="comments-icon" aria-label="Emoji — coming later" title="Emoji — coming later" disabled>${icon("smile")}</button>
+            <button type="button" class="comments-icon" aria-label="Draw — coming later" title="Draw — coming later" disabled>${icon("edit")}</button>
+          </div>
+          <button class="comment-submit" type="submit" aria-label="Send comment" title="Send comment (Enter)" disabled>${icon("send")}</button>
+        </div>
+      </div>
+    </form>`;
+  const list = element.querySelector<HTMLElement>(".comments-list")!;
+  const form = element.querySelector<HTMLFormElement>("form")!;
+  const input = form.querySelector<HTMLTextAreaElement>("textarea")!;
+  const submit = form.querySelector<HTMLButtonElement>(".comment-submit")!;
+  const counter = element.querySelector<HTMLElement>("[data-count]")!;
+  const timeLabel = form.querySelector<HTMLElement>("[data-current-time] span")!;
+  const errorView = element.querySelector<HTMLElement>(".comments-error")!;
+  let view: FeedbackView | undefined;
+  let filter = "all";
+  let selected: string | undefined;
+  let anchor: Anchor | undefined;
+  let busy = false;
+  let active = false;
+  let fetchId = 0;
+  let editing: { id: string; before: FeedbackComment; text: string } | undefined;
+
+  const showError = (error?: unknown): void => {
+    errorView.hidden = error === undefined;
+    errorView.textContent = error === undefined ? "" : error instanceof Error ? error.message : String(error);
+  };
+  const currentAnchor = (): Anchor | undefined => {
+    const state = store.current();
+    if (state === undefined) return undefined;
+    return {
+      at: state.playhead.frame * state.snapshot.space.frameRate.denominator / state.snapshot.space.frameRate.numerator,
+    };
+  };
+  const renderAnchor = (): void => {
+    timeLabel.textContent = feedbackClock(anchor?.at ?? 0);
+    submit.disabled = busy || view === undefined || anchor === undefined || input.value.trim().length === 0;
+  };
+  const capture = (): void => { stage.pause(); anchor = currentAnchor(); renderAnchor(); };
+  const button = (name: string, label: string, action: () => void): HTMLButtonElement => {
+    const node = document.createElement("button");
+    node.type = "button"; node.className = "comments-icon";
+    node.innerHTML = icon(name); node.title = label; node.setAttribute("aria-label", label);
+    node.disabled = busy;
+    node.addEventListener("click", (event) => { event.stopPropagation(); action(); });
+    return node;
+  };
+  const locate = (comment: FeedbackComment): void => {
+    stage.pause(); stage.showComposition();
+    const state = store.current();
+    if (state === undefined) return;
+    const frame = Math.round(comment.at * state.snapshot.space.frameRate.numerator / state.snapshot.space.frameRate.denominator);
+    store.seek(frame, "video");
+    selected = comment.id;
+    render();
+  };
+  const render = (): void => {
+    const focusedEdit = list.querySelector<HTMLTextAreaElement>(".comment-edit textarea");
+    const cursor = focusedEdit === document.activeElement && focusedEdit !== null
+      ? { start: focusedEdit.selectionStart, end: focusedEdit.selectionEnd } : undefined;
+    counter.textContent = view === undefined ? "" : String(view.comments.length);
+    // Notes are appended to the file in submission order. Number that order;
+    // time sorting and filters only change where a note is displayed.
+    const comments = [...view?.comments ?? []]
+      .map((comment, index) => ({ comment, number: index + 1 }))
+      .sort((a, b) => a.comment.at - b.comment.at)
+      .filter(({ comment }) => filter === "all" || (filter === "done") === (comment.resolved === true));
+    list.replaceChildren();
+    if (comments.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "comments-empty";
+      empty.innerHTML = `${icon(filter === "done" ? "check" : "comments")}<strong></strong><p></p>`;
+      empty.querySelector("strong")!.textContent = view === undefined ? "Loading comments…" : filter === "done" ? "No completed comments" : filter === "open" ? "All caught up" : "A note starts here";
+      empty.querySelector("p")!.textContent = filter === "all" ? "Pause on a frame and describe what you would like to change." : "Switch filters to see the other comments.";
+      list.append(empty);
+    }
+    for (const { comment, number } of comments) {
+      const row = document.createElement("article");
+      row.className = `comment-card${comment.resolved ? " resolved" : ""}${comment.id === selected ? " selected" : ""}`;
+      row.dataset.commentId = comment.id;
+      const head = document.createElement("div"); head.className = "comment-card-head";
+      const location = document.createElement("button"); location.type = "button"; location.className = "comment-location";
+      const label = document.createElement("span"); label.className = "comment-number"; label.textContent = `#${number}`;
+      const time = document.createElement("span"); time.className = "comment-time"; time.textContent = feedbackClock(comment.at);
+      location.append(time);
+      location.title = "Go to this frame"; location.addEventListener("click", () => locate(comment));
+      row.addEventListener("click", (event) => {
+        if ((event.target as Element).closest("button, form") !== null || window.getSelection()?.isCollapsed === false) return;
+        locate(comment);
+      });
+      const actions = document.createElement("div"); actions.className = "comment-actions";
+      const resolve = button("check", comment.resolved ? "Reopen comment" : "Mark complete", () => {
+        void mutate({ type: "replace", before: comment, comment: { ...comment, resolved: !comment.resolved } });
+      });
+      resolve.classList.toggle("is-done", comment.resolved === true);
+      resolve.setAttribute("aria-pressed", String(comment.resolved === true));
+      actions.append(label, resolve, button("edit", "Edit comment", () => {
+        editing = { id: comment.id, before: comment, text: comment.text }; selected = comment.id; render();
+        list.querySelector<HTMLTextAreaElement>(".comment-edit textarea")?.focus();
+      }), button("trash", "Delete comment", () => { void mutate({ type: "delete", before: comment }); }));
+      head.append(location, actions); row.append(head);
+      if (editing?.id === comment.id) {
+        const edit = document.createElement("form"); edit.className = "comment-edit";
+        const text = document.createElement("textarea"); text.rows = 3; text.value = editing.text;
+        text.setAttribute("aria-label", "Edit comment text");
+        text.addEventListener("input", () => { if (editing !== undefined) editing.text = text.value; });
+        const controls = document.createElement("div"); controls.className = "comment-edit-actions";
+        const cancel = document.createElement("button"); cancel.type = "button"; cancel.textContent = "Cancel";
+        cancel.addEventListener("click", () => { editing = undefined; render(); });
+        const save = document.createElement("button"); save.type = "submit"; save.textContent = "Save"; save.disabled = busy;
+        controls.append(cancel, save); edit.append(text, controls);
+        edit.addEventListener("submit", (event) => {
+          event.preventDefault();
+          if (editing === undefined || text.value.trim().length === 0) return;
+          void mutate({ type: "replace", before: editing.before, comment: { ...editing.before, text: text.value.trim() } }, () => { editing = undefined; });
+        }); row.append(edit);
+      } else {
+        const text = document.createElement("p"); text.className = "comment-text"; text.textContent = comment.text;
+        row.append(text);
+      }
+      list.append(row);
+    }
+    if (cursor !== undefined) {
+      const next = list.querySelector<HTMLTextAreaElement>(".comment-edit textarea");
+      next?.focus({ preventScroll: true }); next?.setSelectionRange(cursor.start, cursor.end);
+    }
+  };
+  const refresh = async (): Promise<void> => {
+    const request = ++fetchId;
+    try {
+      const response = await fetch("/__studio/feedback");
+      const data = await response.json() as FeedbackView & { error?: string };
+      if (!response.ok) throw new Error(data.error ?? "Could not read comments.");
+      if (request !== fetchId) return;
+      if (JSON.stringify(view) !== JSON.stringify(data)) { view = data; render(); }
+      showError(); renderAnchor();
+    } catch (error) { if (request === fetchId) showError(error); }
+  };
+  const mutate = async (mutation: FeedbackMutation, saved?: () => void): Promise<void> => {
+    if (busy) return;
+    busy = true; showError(); renderAnchor();
+    try {
+      const response = await fetch("/__studio/feedback", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(mutation) });
+      const data = await response.json() as FeedbackView & { error?: string };
+      if (!response.ok) throw new Error(data.error ?? "Could not save comment.");
+      ++fetchId; view = data; busy = false; saved?.();
+      if (mutation.type === "delete" && selected === mutation.before.id) selected = undefined;
+      if (mutation.type === "delete" && editing?.id === mutation.before.id) editing = undefined;
+      render();
+    } catch (error) { showError(error); }
+    finally { busy = false; renderAnchor(); }
+  };
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    if (view === undefined || anchor === undefined || input.value.trim().length === 0) return;
+    const comment: FeedbackComment = { id: `c-${crypto.randomUUID()}`, run: view.run, ...anchor, text: input.value.trim() };
+    void mutate({ type: "add", comment }, () => {
+      input.value = ""; input.style.height = ""; selected = comment.id; anchor = currentAnchor();
+    });
+  });
+  input.addEventListener("focus", () => { if (input.value.length === 0) capture(); else stage.pause(); });
+  input.addEventListener("input", () => {
+    input.style.height = "auto"; input.style.height = `${Math.min(180, input.scrollHeight)}px`; renderAnchor();
+  });
+  element.addEventListener("keydown", (event) => {
+    if (!(event.target instanceof HTMLTextAreaElement) || event.key !== "Enter") return;
+    // Some IMEs report the confirming Enter as keyCode 229 after compositionend.
+    if (event.isComposing || event.keyCode === 229 || event.shiftKey || event.altKey) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (!event.repeat) event.target.form?.requestSubmit();
+  });
+  document.addEventListener("pointerdown", (event) => {
+    if (!active || selected === undefined) return;
+    const row = event.target instanceof Element ? event.target.closest(".comment-card") : null;
+    if (row?.getAttribute("data-comment-id") === selected) return;
+    selected = undefined;
+    // Keep the clicked control and any unsaved editor mounted through pointerup.
+    list.querySelector(".comment-card.selected")?.classList.remove("selected");
+  });
+  form.querySelector("[data-current-time]")!.addEventListener("click", capture);
+  element.querySelector("[data-refresh]")!.addEventListener("click", () => { void refresh(); });
+  element.querySelectorAll<HTMLButtonElement>("[data-filter]").forEach((button) => button.addEventListener("click", () => {
+    filter = button.dataset.filter!;
+    element.querySelectorAll<HTMLButtonElement>("[data-filter]").forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
+    render();
+  }));
+  store.subscribe(() => {
+    if (input.value.length === 0) { anchor = currentAnchor(); renderAnchor(); }
+  });
+  type Hot = { on(event: string, listener: () => void): void };
+  (import.meta as ImportMeta & { hot?: Hot }).hot?.on("studio:feedback-changed", () => { if (active) void refresh(); });
+  render();
+  return {
+    element,
+    activate(value: boolean) {
+      active = value;
+      stage.setReviewMode(value);
+      if (active) { stage.showComposition(); anchor ??= currentAnchor(); renderAnchor(); void refresh(); }
+    },
+  };
+}

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

@@ -2,6 +2,11 @@ const paths: Readonly<Record<string, string>> = {
   brand: '<g transform="translate(0 1.282) scale(.091603) translate(-50 -180)"><path fill="currentColor" stroke="none" d="M303.78,277.82c-5.98-8.63-15.83-13.77-26.32-13.77h-93.41c-12.28,0-24.92,7.44-29.6,18.8l-28.26,75.82c-4.6,11.25-4.54,24.05,2.22,34.16,6.79,10.15,19.36,16.15,31.57,16.15h85.98c14.12,0,26.9-8.88,31.84-22.1l29.69-79.57c3.67-9.84,2.29-20.86-3.69-29.48v-.02h-.02ZM252.02,377.25c-.94,2.52-3.39,4.22-6.08,4.22h-83.45c-4.34,0-6.68-2.8-7.49-3.99s-2.5-4.43-.84-8.44l23.85-66.24c2.29-6.35,8.08-10.87,14.82-11.22.33-.02.67-.02,1.02-.02h75.41s12.51,1.42,9.29,14.61l-26.53,71.09h0ZM106.85,361.73s-22.36-11.59-17.66-32.66l29.67-82.23c4.78-13.25,17.36-22.09,31.45-22.09h95.02c6.25,0,12.1,3.03,15.71,8.14l13.89,19.68h-112.97c-8.7,0-16.49,5.41-19.52,13.57l-35.59,95.6h0ZM73.3,323.27s-22.37-11.59-17.66-32.66l29.67-82.23c4.79-13.25,17.37-22.09,31.45-22.09h89.91c6.25,0,12.1,3.03,15.71,8.14l13.89,19.68h-107.84c-8.7,0-16.49,5.41-19.52,13.57l-35.59,95.6h-.02Z"/></g>',
   code: '<path d="M9 7 4 12l5 5M15 7l5 5-5 5M13 4l-2 16"/>',
   edit: '<path d="m4 16-.8 4 4-.8L18.5 8.9 15.1 5.5 4 16Z"/><path d="m13.8 6.8 3.4 3.4"/>',
+  studio: '<rect x="3" y="4" width="18" height="16" rx="1.5"/><path d="M3 14h18M8 4v10M15 14v6"/>',
+  comments: '<path d="M6 17H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8l-5 4v-4Z"/><path d="M7 8h10M7 12h7"/>',
+  trash: '<path d="M3 6h18M9 6V3h6v3M6 6l1 15h10l1-15M10 10v7M14 10v7"/>',
+  send: '<path d="M12 20V4m-6 6 6-6 6 6"/>',
+  smile: '<circle cx="12" cy="12" r="9"/><path d="M8 14a4.5 4.5 0 0 0 8 0M8.5 9h.01M15.5 9h.01"/>',
   eye: '<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"/><circle cx="12" cy="12" r="2.5"/>',
   preview: '<rect x="3" y="4" width="18" height="14" rx="2"/><path d="m10 8 5 3.5-5 3.5V8ZM8 21h8"/>',
   tune: '<path d="M4 7h10M18 7h2M4 17h2M10 17h10"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/>',
@@ -14,7 +19,6 @@ const paths: Readonly<Record<string, string>> = {
   results: '<path d="M4 8v12h16V8M3 4h18v4H3zM9 12h6"/>',
   run: '<circle cx="12" cy="12" r="9"/><path d="m10 8 6 4-6 4V8Z"/>',
   image: '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9" r="2"/><path d="m4 18 5-5 3 3 3-4 5 6"/>',
-  sidebarCollapse: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M8 4v16m7-11-3 3 3 3"/>',
   wrap: '<path d="M4 6h16M4 10h12a4 4 0 0 1 0 8h-5m3-3-3 3 3 3M4 14h5M4 18h4"/>',
   timeline: '<path d="M3 6h18M3 12h18M3 18h18"/><path d="M8 4v4M16 10v4M11 16v4"/>',
   minus: '<path d="M5 12h14"/>',
@@ -40,6 +44,11 @@ const paths: Readonly<Record<string, string>> = {
   layers: '<path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5M3 16l9 5 9-5"/>',
   ranking: '<path d="M5 19V9h4v10M10 19V5h4v14M15 19v-7h4v7M3 19h18"/>',
   refresh: '<path d="M20 7v5h-5M4 17v-5h5"/><path d="M18.5 9a7 7 0 0 0-11.8-2.3L4 9M5.5 15a7 7 0 0 0 11.8 2.3L20 15"/>',
+  check: '<circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/>',
+  alert: '<circle cx="12" cy="12" r="9"/><path d="M12 7v6M12 17h.01"/>',
+  arrowRight: '<path d="M5 12h14m-6-6 6 6-6 6"/>',
+  close: '<path d="m6 6 12 12M18 6 6 18"/>',
+  panel: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M8 4v16M8 9h13"/>',
 };
 
 export function icon(name: string, className = "icon"): string {