@hypit/hypit 0.1.3 → 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 { 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";
@@ -9,8 +9,11 @@ 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 { createComments } from "./comments.js";
 import "../style.css";
 
 const app = document.querySelector<HTMLElement>("#app")!;
@@ -37,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">
@@ -60,9 +67,10 @@ 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);
+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);
@@ -72,8 +80,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,13 +90,21 @@ 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",
 });
 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),
@@ -101,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";
@@ -151,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>();
 
@@ -191,9 +231,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: {
@@ -214,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";
@@ -227,8 +280,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 +298,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);
+      change(option.value);
     });
     return item;
   });
@@ -358,7 +424,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 +455,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);
@@ -403,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)
@@ -418,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(
@@ -456,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;
@@ -488,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");
@@ -495,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 : [];
@@ -508,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";
@@ -523,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";
@@ -545,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);
@@ -554,7 +628,7 @@ function structuredControl(entityId: string, parameter: Clip["inspector"][number
     } else {
       shell.append(recordDraftControl(schema, draft, (next) => {
         draft = next;
-        refreshDecisions();
+        save();
       }));
     }
 
@@ -571,80 +645,124 @@ 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", () => 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", () => commit(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(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);
+        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);
+        commit(value.checked);
       } else if (parameter.control === "number") {
-        const number = Number(value.value);
-        if (Number.isFinite(number)) commitControl(entityId, parameter, number);
+        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);
   }
-  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 +789,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 +804,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);
   }
 }
 
@@ -732,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;
   }
@@ -743,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) {
@@ -771,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 {
@@ -780,28 +908,80 @@ 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);
 }
 
+/** 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
@@ -938,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();
@@ -966,6 +1147,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 +1175,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;