@hypit/hypit 0.1.4 → 0.1.6

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

@@ -1,6 +1,8 @@
+import { bindDropdown } from "./dropdown.js";
+import { uiLabel, uiAttribute, uiText, uiAttr, userText, languageMenu, initializeI18n, type Message } from "./i18n.js";
 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,8 +15,11 @@ 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";
 
+await initializeI18n();
+
 const app = document.querySelector<HTMLElement>("#app")!;
 app.innerHTML = `
   <header class="topbar">
@@ -39,6 +44,11 @@ app.innerHTML = `
     <div class="topbar-right">
       <div class="meta" data-meta></div>
       <div class="status" data-status></div>
+      <div data-language-menu></div>
+      <div class="view-tabs" role="tablist" ${uiAttribute("aria-label", "app.studio-view")}>
+        <button type="button" role="tab" data-view="studio" aria-selected="true">${icon("studio")}${uiLabel("app.studio")}</button>
+        <button type="button" role="tab" data-view="comments" aria-selected="false">${icon("comments")}${uiLabel("app.comments")}</button>
+      </div>
     </div>
   </header>
   <main class="studio-shell">
@@ -47,7 +57,7 @@ app.innerHTML = `
       <div class="preview-panel" data-stage></div>
       <aside class="workspace-panel">
         <div class="pane-heading workspace-heading" data-workspace-heading>
-          <div class="pane-title">${icon("tune")}<h2>Properties</h2></div>
+          <div class="pane-title">${icon("tune")}<h2>${uiLabel("inspector.properties")}</h2></div>
         </div>
         <div class="workspace-scroll">
           <section class="workspace-section">
@@ -60,11 +70,14 @@ app.innerHTML = `
   </main>
   <pre class="failure" data-failure></pre>`;
 
+app.querySelector("[data-language-menu]")!.replaceWith(languageMenu());
+
 const store = createStore();
 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 +104,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,10 +125,33 @@ 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";
-  status.textContent = state === "error" ? "Save failed" : state === "saved" ? "Saved" : "Saving";
+  uiText(status, state === "error" ? "common.save-failed" : state === "saved" ? "common.saved" : "common.saving");
 });
 
 // Program-level facts never change while a Source is being read, so they live in
@@ -117,14 +161,14 @@ function renderMeta(snapshot: StudioSnapshot): void {
   project.title = snapshot.source.path;
   // Sequence facts belong to the project/inspector, not the application chrome.
   // The timeline transport is the single persistent time readout.
-  meta.textContent = "";
+  userText(meta, "");
 }
 
-function property(label: string, value: string, tone?: string): HTMLElement {
+function property(label: Message, value: string, tone?: string): HTMLElement {
   const node = document.createElement("div");
   node.className = `property${tone === undefined ? "" : ` ${tone}`}`;
   node.innerHTML = "<span></span><strong></strong>";
-  node.querySelector("span")!.textContent = label;
+  uiText(node.querySelector("span")!, label);
   node.querySelector("strong")!.textContent = value;
   node.querySelector("strong")!.title = value;
   return node;
@@ -142,6 +186,12 @@ function group(label: string, items: readonly HTMLElement[], className = ""): HT
   return node;
 }
 
+function uiGroup(label: Message, items: readonly HTMLElement[]): HTMLElement {
+  const node = group(label, items);
+  uiText(node.querySelector("h3")!, label);
+  return node;
+}
+
 function aspectRatio(width: number, height: number): string {
   let a = width;
   let b = height;
@@ -149,18 +199,18 @@ function aspectRatio(width: number, height: number): string {
   return `${width / a}:${height / a}`;
 }
 
-const domainPresentation: Readonly<Record<StudioInspectorDomain, { readonly label: string; readonly icon: string }>> = {
-  where: { label: "Where", icon: "where" },
-  how: { label: "How", icon: "how" },
-  when: { label: "When", icon: "when" },
+const domainPresentation: Readonly<Record<StudioInspectorDomain, { readonly label: Message; readonly icon: string }>> = {
+  where: { label: "inspector.where", icon: "where" },
+  how: { label: "inspector.how", icon: "how" },
+  when: { label: "inspector.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>();
 
 function defaultWorkspaceHeading(): void {
   workspaceHeading.className = "pane-heading workspace-heading";
-  workspaceHeading.innerHTML = `<div class="pane-title">${icon("tune")}<h2>Properties</h2></div>`;
+  workspaceHeading.innerHTML = `<div class="pane-title">${icon("tune")}<h2>${uiLabel("inspector.properties")}</h2></div>`;
 }
 
 function inspectorHeading(
@@ -176,7 +226,7 @@ function inspectorHeading(
     button.type = "button";
     button.className = `inspector-domain-tab${domain === active ? " active" : ""}`;
     button.dataset.domain = domain;
-    button.innerHTML = `${icon(presentation.icon)}<strong>${presentation.label}</strong>`;
+    button.innerHTML = `${icon(presentation.icon)}<strong>${uiLabel(presentation.label)}</strong>`;
     button.setAttribute("aria-pressed", String(domain === active));
     button.addEventListener("click", () => {
       inspectorDomainByEntity.set(entityId, domain);
@@ -207,7 +257,7 @@ function commitControl(entityId: string, parameter: Clip["inspector"][number], r
     void writeParameter(entityId, parameter, replacement);
   } catch (error) {
     restoreParameterControls(entityId);
-    status.textContent = "Invalid value"; status.className = "status error";
+    uiText(status, "common.invalid-value"); status.className = "status error";
     status.title = error instanceof Error ? error.message : String(error);
   }
 }
@@ -230,8 +280,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,76 +336,13 @@ function selectControl(
       }
       close(false);
       trigger.focus();
-      commitControl(entityId, parameter, option.value);
+      change(option.value);
     });
     return item;
   });
   menu.append(...options);
 
-  const close = (restoreFocus: boolean): void => {
-    control.classList.remove("open", "open-up");
-    trigger.setAttribute("aria-expanded", "false");
-    menu.hidden = true;
-    if (restoreFocus) trigger.focus();
-  };
-  const open = (focus: "selected" | "first" | "last" = "selected"): void => {
-    control.classList.add("open");
-    trigger.setAttribute("aria-expanded", "true");
-    menu.hidden = false;
-    control.classList.remove("open-up");
-    const scroll = control.closest<HTMLElement>(".workspace-scroll");
-    if (scroll !== null) {
-      const menuBox = menu.getBoundingClientRect();
-      const scrollBox = scroll.getBoundingClientRect();
-      if (menuBox.bottom > scrollBox.bottom && trigger.getBoundingClientRect().top - menuBox.height >= scrollBox.top) {
-        control.classList.add("open-up");
-      }
-    }
-    const target = focus === "first" ? options[0]
-      : focus === "last" ? options.at(-1)
-      : options.find((option) => option.classList.contains("active")) ?? options[0];
-    target?.focus();
-  };
-  const moveOptionFocus = (offset: number): void => {
-    const current = options.indexOf(document.activeElement as HTMLButtonElement);
-    const next = current < 0 ? 0 : (current + offset + options.length) % options.length;
-    options[next]?.focus();
-  };
-
-  trigger.addEventListener("click", () => {
-    if (control.classList.contains("open")) close(false);
-    else open();
-  });
-  trigger.addEventListener("keydown", (event) => {
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault();
-      event.stopPropagation();
-      open(event.key === "ArrowDown" ? "first" : "last");
-    } else if (event.key === "Escape" && control.classList.contains("open")) {
-      event.preventDefault();
-      event.stopPropagation();
-      close(false);
-    }
-  });
-  menu.addEventListener("keydown", (event) => {
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault();
-      event.stopPropagation();
-      moveOptionFocus(event.key === "ArrowDown" ? 1 : -1);
-    } else if (event.key === "Home" || event.key === "End") {
-      event.preventDefault();
-      event.stopPropagation();
-      options[event.key === "Home" ? 0 : options.length - 1]?.focus();
-    } else if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      close(true);
-    }
-  });
-  control.addEventListener("focusout", (event) => {
-    if (event.relatedTarget instanceof Node && control.contains(event.relatedTarget)) return;
-    close(false);
-  });
+  const { close } = bindDropdown(control, trigger, menu, options);
   control.append(trigger, menu);
   return control;
 }
@@ -376,7 +363,7 @@ function colorValueControl(
   const picker = document.createElement("input");
   picker.type = "color";
   picker.className = "parameter-color-native";
-  picker.setAttribute("aria-label", `${label} picker`);
+  uiAttr(picker, "aria-label", "inspector.color-picker", { label });
   picker.title = label;
   const exact = /^#[0-9a-f]{6}(?:[0-9a-f]{2})?$/iu.test(initial);
   picker.value = exact ? initial.slice(0, 7) : "#000000";
@@ -437,7 +424,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 +440,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 +459,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();
+    uiText(notice, "inspector.invalid-fields");
+    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,14 +495,28 @@ 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");
-    count.textContent = schema.kind === "array" && Array.isArray(draft)
-      ? `${draft.length} ${draft.length === 1 ? "item" : "items"}`
-      : "Structured value";
+    if (schema.kind === "array" && Array.isArray(draft)) uiText(count, "inspector.item-count", { count: draft.length });
+    else uiText(count, "inspector.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 +529,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,28 +544,30 @@ 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";
         up.textContent = "↑";
-        up.title = "Move up";
+        uiAttr(up, "title", "inspector.move-up");
         up.disabled = index === 0;
         up.addEventListener("click", () => move(-1));
         const down = document.createElement("button");
         down.type = "button";
         down.textContent = "↓";
-        down.title = "Move down";
+        uiAttr(down, "title", "inspector.move-down");
         down.disabled = index === list.length - 1;
         down.addEventListener("click", () => move(1));
         const remove = document.createElement("button");
         remove.type = "button";
         remove.innerHTML = icon("minus");
-        remove.title = "Remove item";
+        uiAttr(remove, "title", "inspector.remove-item");
         remove.disabled = schema.minItems !== undefined && list.length <= schema.minItems;
         remove.addEventListener("click", () => {
           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 +577,7 @@ function structuredControl(entityId: string, parameter: Clip["inspector"][number
     } else {
       shell.append(recordDraftControl(schema, draft, (next) => {
         draft = next;
-        refreshDecisions();
+        save();
       }));
     }
 
@@ -599,75 +588,87 @@ function structuredControl(entityId: string, parameter: Clip["inspector"][number
       const add = document.createElement("button");
       add.type = "button";
       add.className = "parameter-structured-add";
-      add.innerHTML = `${icon("plus")}<span>Add ${schema.items.kind === "string" && schema.items.format === "color" ? "color" : "item"}</span>`;
+      add.innerHTML = `${icon("plus")}${uiLabel(schema.items.kind === "string" && schema.items.format === "color" ? "inspector.add-color" : "inspector.add-item")}`;
       add.disabled = schema.maxItems !== undefined && list.length >= schema.maxItems;
       add.addEventListener("click", () => {
         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.style.backgroundColor = color; swatch.title = color; uiAttr(swatch, "aria-label", "inspector.use-color", { 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", () => 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 +679,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 +699,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);
@@ -731,13 +733,13 @@ function parameterGroups(entityId: string, fields: readonly Clip["inspector"][nu
   });
 }
 
-let parameterWriteState: "" | "Saving" | "Saved" | "Failed" = "";
+let parameterWriteState: "" | "common.saving" | "common.saved" | "common.failed" = "";
 async function writeParameter(entityId: string, parameter: Clip["inspector"][number], replacement: CanonicalValue): Promise<void> {
   const state = store.current();
   if (state === undefined) return;
-  parameterWriteState = "Saving";
+  parameterWriteState = "common.saving";
   status.title = "";
-  status.textContent = parameterWriteState;
+  uiText(status, parameterWriteState);
   status.className = "status saving";
   try {
     await applyStudioMutation({
@@ -747,15 +749,15 @@ async function writeParameter(entityId: string, parameter: Clip["inspector"][num
       parameterId: parameter.id,
       value: replacement,
     });
-    parameterWriteState = "Saved";
-    status.textContent = parameterWriteState;
+    parameterWriteState = "common.saved";
+    uiText(status, 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;
+    parameterWriteState = "common.failed";
+    uiText(status, error instanceof Error ? "common.save-failed" : parameterWriteState);
     status.className = "status error";
     status.title = error instanceof Error ? error.message : String(error);
   }
@@ -773,26 +775,26 @@ function renderInspector(snapshot: StudioSnapshot, clipId: string | undefined):
     defaultWorkspaceHeading();
     const fps = snapshot.space.frameRate.numerator / snapshot.space.frameRate.denominator;
     inspector.replaceChildren(
-      group("Project", [
-        property("Author", snapshot.source.path, "property-code"),
-        property("Run", snapshot.run.path, "property-code"),
-        property("Sources", `${snapshot.source.files.length} referenced files`),
-        property("Tracks", String(snapshot.tracks.length), "property-number"),
+      uiGroup("inspector.project", [
+        property("inspector.author", snapshot.source.path, "property-code"),
+        property("inspector.run", snapshot.run.path, "property-code"),
+        property("inspector.sources", String(snapshot.source.files.length)),
+        property("inspector.tracks", String(snapshot.tracks.length), "property-number"),
       ]),
-      group("Canvas", [
-        property("Resolution", `${snapshot.space.canvasWidth} × ${snapshot.space.canvasHeight}`, "property-number"),
-        property("Aspect ratio", aspectRatio(snapshot.space.canvasWidth, snapshot.space.canvasHeight), "property-number"),
+      uiGroup("inspector.canvas", [
+        property("inspector.resolution", `${snapshot.space.canvasWidth} × ${snapshot.space.canvasHeight}`, "property-number"),
+        property("inspector.aspect-ratio", aspectRatio(snapshot.space.canvasWidth, snapshot.space.canvasHeight), "property-number"),
       ]),
-      group("Timeline", [
-        property("Duration", `${snapshot.space.durationSec.toFixed(2)} s`, "property-number"),
-        property("Frame rate", `${fps.toFixed(Number.isInteger(fps) ? 0 : 2)} fps`, "property-number"),
-        property("Frames", String(snapshot.space.frameCount), "property-number"),
+      uiGroup("inspector.timeline", [
+        property("inspector.duration", `${snapshot.space.durationSec.toFixed(2)} s`, "property-number"),
+        property("inspector.frame-rate", `${fps.toFixed(Number.isInteger(fps) ? 0 : 2)} fps`, "property-number"),
+        property("inspector.frames", String(snapshot.space.frameCount), "property-number"),
       ]),
-      group("Build", [
-        property("Targets", snapshot.run.targets
+      uiGroup("inspector.build", [
+        property("inspector.targets", snapshot.run.targets
           .map((target) => target.split("::output::").at(-1) ?? target)
           .join(", ") || "—", "property-code"),
-        property("Candidates", String(snapshot.run.satisfactions.length), "property-number"),
+        property("inspector.candidates", String(snapshot.run.satisfactions.length), "property-number"),
       ]),
     );
     return;
@@ -802,7 +804,7 @@ function renderInspector(snapshot: StudioSnapshot, clipId: string | undefined):
     defaultWorkspaceHeading();
     const empty = document.createElement("div");
     empty.className = "inspector-empty";
-    empty.textContent = "No adjustable parameters";
+    uiText(empty, "inspector.empty");
     inspector.replaceChildren(empty);
     return;
   }
@@ -813,17 +815,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 +848,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 +857,7 @@ function renderSemanticInspector(snapshot: StudioSnapshot, segmentId: string): v
   defaultWorkspaceHeading();
   const empty = document.createElement("div");
   empty.className = "inspector-empty";
-  empty.textContent = "No adjustable parameters";
+  uiText(empty, "inspector.empty");
   inspector.replaceChildren(empty);
 }
 
@@ -862,32 +869,36 @@ function semanticAnchorInspector(snapshot: StudioSnapshot, kind: "selection" | "
     .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]) => {
+  if (!semantic || !current) return uiGroup("inspector.timing", []);
+  const endpoints: readonly (readonly [Message, string])[] = "anchorId" in current ? [["inspector.moment", current.anchorId]]
+    : [["inspector.start", current.startAnchorId], ["inspector.end", current.endAnchorId]];
+  return uiGroup("inspector.semantic-anchors", endpoints.map(([label, anchorId]) => {
     const anchor = semantic.anchors.find((item) => item.id === anchorId)!;
-    const describe = (item: typeof anchor) => {
+    const describe = (node: Element, item: typeof anchor) => {
       const word = semantic.tokens.find((token) => token.id === item.tokenId)?.text;
-      return `${item.kind.replaceAll("-", " ")}${word ? ` · ${word}` : ""}${item.segmentId ? ` · ${item.segmentId}` : ""}`;
+      uiText(node, `inspector.anchor.${item.kind}`, { detail: `${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 };
+        : { kind: "selection", startAnchorId: label === "inspector.start" ? item.id : current.startAnchorId,
+            endAnchorId: label === "inspector.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));
+    if (candidates.length < 2) {
+      const row = property(label!, "");
+      describe(row.querySelector("strong")!, anchor);
+      return row;
+    }
     const row = document.createElement("label");
     row.className = "property";
     const name = document.createElement("span");
-    name.textContent = label!;
+    uiText(name, label!);
     const control = document.createElement("select");
     control.className = "parameter-value";
-    control.setAttribute("aria-label", `${label} semantic anchor`);
+    uiAttr(control, "aria-label", label === "inspector.start" ? "inspector.start-anchor" : label === "inspector.end" ? "inspector.end-anchor" : "inspector.moment-anchor");
     for (const { item } of candidates) {
-      const option = document.createElement("option"); option.value = item.id; option.textContent = describe(item);
+      const option = document.createElement("option"); option.value = item.id; describe(option, item);
       control.append(option);
     }
     control.value = anchorId!;
@@ -896,14 +907,14 @@ function semanticAnchorInspector(snapshot: StudioSnapshot, kind: "selection" | "
       const span = semanticGestureSpan(semantic.anchors, choice.handle, choice.target)!;
       const temporal = choice.handle.temporal!;
       control.disabled = true;
-      status.textContent = "Saving"; status.className = "status saving";
+      uiText(status, "common.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"; })
+      }).then(() => { uiText(status, "common.saved"); status.className = "status saved"; })
         .catch((error: unknown) => {
-          control.value = anchorId!; status.textContent = "Save failed"; status.className = "status error";
+          control.value = anchorId!; uiText(status, "common.save-failed"); status.className = "status error";
           status.title = error instanceof Error ? error.message : String(error);
         }).finally(() => { control.disabled = false; });
     });
@@ -1060,6 +1071,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();
@@ -1086,10 +1098,10 @@ window.addEventListener("keydown", (event) => {
 });
 
 function applySnapshot(snapshot: StudioSnapshot): void {
-  failureView.textContent = "";
+  userText(failureView, "");
   status.className = "status";
   status.title = "";
-  status.textContent = "";
+  userText(status, "");
   renderMeta(snapshot);
   library.show(snapshot);
   store.load(snapshot);
@@ -1097,7 +1109,7 @@ function applySnapshot(snapshot: StudioSnapshot): void {
 
 function applyFailure(failure: StudioFailure): void {
   status.className = "status error";
-  status.textContent = "Compile failed";
+  uiText(status, "common.compile-failed");
   failureView.textContent = failure.error;
   if (failure.range !== undefined) code.highlight([{ range: failure.range, tone: "element" }], true);
   // A parameter control changes immediately in the browser, but the source