@hypit/hypit 0.1.5 → 0.1.7

package/packages/studio/src/style.css

@@ -142,7 +142,7 @@ button:focus-visible, textarea:focus-visible {
   white-space: nowrap;
 }
 .topbar-right { justify-self: end; display: flex; align-items: center; min-width: 0; }
-.view-tabs { display: flex; align-items: center; gap: 2px; margin-left: 16px; padding: 2px; border-radius: 5px; background: var(--subtab-surface); }
+.view-tabs { display: flex; flex: 0 0 auto; white-space: nowrap; align-items: center; gap: 2px; margin-left: 16px; padding: 2px; border-radius: 5px; background: var(--subtab-surface); }
 .view-tabs button {
   display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
   border: 0; border-radius: 4px; color: var(--text-3); background: transparent;
@@ -150,6 +150,18 @@ button:focus-visible, textarea:focus-visible {
 .view-tabs button[aria-selected="true"] { color: var(--subtab-active-text); background: var(--subtab-active-surface); }
 .view-tabs button:focus-visible { outline: 1px solid #8a8f99; outline-offset: -1px; }
 .view-tabs .icon { width: 14px; height: 14px; }
+.parameter-select.language-select { width: auto; flex: 0 0 auto; margin-left: 10px; }
+.language-select .language-toggle {
+  display: grid; place-items: center; grid-template-columns: 1fr;
+  width: 28px; height: 28px; padding: 0;
+  color: var(--subtab-active-text); background: var(--subtab-surface);
+  border-color: var(--line);
+}
+.language-toggle .icon { width: 16px; height: 16px; }
+.language-select .parameter-select-menu { width: max-content; min-width: 150px; max-width: 240px; }
+.language-select .parameter-select-option { font-family: var(--font-ui); text-align: start; }
+.topbar { position: relative; z-index: 40; }
+
 .meta {
   color: var(--text-3);
   font: 500 11px/1 var(--font-ui);
@@ -1560,8 +1572,8 @@ button:focus-visible, textarea:focus-visible {
 .failure:empty { display: none; }
 
 @media (max-width: 920px) {
-  .meta, .topbar-right { display: none; }
-  .topbar { grid-template-columns: 1fr minmax(120px, 1fr); }
+  .meta, .topbar-right .status { display: none; }
+  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
   .upper-shell { grid-template-columns: minmax(320px, var(--source-width)) 8px minmax(300px, 1fr); }
   .workspace-handle, .workspace-panel { display: none; }
 }

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

@@ -1,3 +1,5 @@
+import { uiAttr, uiText, userText } from "./i18n.js";
+
 /** Two-line label with an expanding editor; the caller owns persistence. */
 export function createArtifactName(options: {
   readonly name: string;
@@ -15,7 +17,7 @@ export function createArtifactName(options: {
   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`;
+  uiAttr(label, "title", options.editable ? "library.rename-hint" : "library.name-pending", { name });
   element.append(label);
   label.addEventListener("click", (event) => { event.stopPropagation(); options.select(); });
   let editing = false;
@@ -30,7 +32,7 @@ export function createArtifactName(options: {
     field.className = "artifact-name-editor";
     field.value = name;
     field.rows = 1;
-    field.setAttribute("aria-label", "Display name");
+    uiAttr(field, "aria-label", "library.display-name");
     const error = document.createElement("span");
     error.className = "artifact-name-error";
     error.setAttribute("role", "status");
@@ -53,17 +55,17 @@ export function createArtifactName(options: {
       if (!editing || saving) return;
       const value = field.value.trim();
       if (value === name) { close(); return; }
-      if (value.length === 0) { error.textContent = "Enter a name."; return; }
+      if (value.length === 0) { uiText(error, "library.enter-name"); return; }
       saving = true;
       field.readOnly = true;
-      error.textContent = "Saving…";
+      uiText(error, "common.saving");
       try {
         name = await options.save(value);
         text.textContent = name;
-        label.title = `${name}\nDouble-click or press F2 to rename`;
+        uiAttr(label, "title", "library.rename-hint", { name });
         close();
       } catch (cause) {
-        error.textContent = cause instanceof Error ? cause.message : String(cause);
+        userText(error, cause instanceof Error ? cause.message : String(cause));
       } finally {
         saving = false;
         field.readOnly = false;

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

@@ -1,3 +1,4 @@
+import { uiAttr, uiText, userText } from "./i18n.js";
 import type { StudioArtifactView } from "../shared.js";
 import { audioPreview } from "./material-preview.js";
 
@@ -35,7 +36,7 @@ export function createArtifactPreview(changed: () => void) {
     error.setAttribute("role", "status");
     const failed = () => {
       if (generation !== current) return;
-      error.textContent = "This media could not be opened in the browser.";
+      uiText(error, "player.media-failed");
       error.hidden = false;
       changed();
     };
@@ -61,14 +62,14 @@ export function createArtifactPreview(changed: () => void) {
       if (audio) {
         const wave = document.createElement("div");
         wave.className = "stage-audio-wave";
-        wave.textContent = "Audio";
+        uiText(wave, "library.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);
+          uiAttr(image, "alt", "player.audio-waveform");
+          userText(wave, ""); wave.replaceChildren(image);
         });
       }
     }

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

@@ -1,3 +1,4 @@
+import { t, userText, uiAttribute, uiText, uiAttr } from "./i18n.js";
 import type { Range, StudioSnapshot, StudioSourceView } from "../shared.js";
 import { icon, setIcon } from "./icons.js";
 import { intentTones } from "./markers.js";
@@ -77,10 +78,10 @@ export function createCodePane(): CodePane {
     <strong class="code-location" data-path></strong>
     <div class="code-actions">
       <span class="code-save-state" data-save-state></span>
-      <button type="button" class="icon-button code-wrap" data-wrap aria-label="Wrap lines" aria-pressed="false" title="Wrap lines">
+      <button type="button" class="icon-button code-wrap" data-wrap ${uiAttribute("aria-label", "source.wrap-lines")} aria-pressed="false" ${uiAttribute("title", "source.wrap-lines")}>
         ${icon("wrap")}
       </button>
-      <button type="button" class="icon-button code-mode" data-mode aria-label="Edit source" title="Edit source">
+      <button type="button" class="icon-button code-mode" data-mode ${uiAttribute("aria-label", "source.edit-source")} ${uiAttribute("title", "source.edit-source")}>
         <span data-mode-icon>${icon("edit")}</span>
       </button>
     </div>`;
@@ -88,7 +89,7 @@ export function createCodePane(): CodePane {
   element.className = "code";
   element.innerHTML = `
     <div class="code-scroll"><svg class="range-canvas" aria-hidden="true"></svg></div>
-    <textarea class="code-editor" data-editor spellcheck="false" aria-label="SVML source"></textarea>`;
+    <textarea class="code-editor" data-editor spellcheck="false" ${uiAttribute("aria-label", "source.svml-source")}></textarea>`;
   const path = toolbar.querySelector<HTMLElement>("[data-path]")!;
   const scroll = element.querySelector<HTMLElement>(".code-scroll")!;
   const canvas = element.querySelector<SVGSVGElement>(".range-canvas")!;
@@ -116,8 +117,8 @@ export function createCodePane(): CodePane {
     wrapped = value;
     element.classList.toggle("is-wrapped", wrapped);
     wrap.setAttribute("aria-pressed", String(wrapped));
-    wrap.setAttribute("aria-label", wrapped ? "Keep lines unwrapped" : "Wrap lines");
-    wrap.title = wrapped ? "Keep lines unwrapped" : "Wrap lines";
+    uiAttr(wrap, "aria-label", wrapped ? "source.keep-lines-unwrapped" : "source.wrap-lines");
+    uiAttr(wrap, "title", wrapped ? "source.keep-lines-unwrapped" : "source.wrap-lines");
     window.requestAnimationFrame(draw);
   };
 
@@ -125,8 +126,8 @@ export function createCodePane(): CodePane {
     editing = value;
     element.classList.toggle("is-editing", editing);
     setIcon(modeIcon, editing ? "eye" : "edit");
-    mode.setAttribute("aria-label", editing ? "Read source" : "Edit source");
-    mode.title = editing ? "Read source" : "Edit source";
+    uiAttr(mode, "aria-label", editing ? "source.read-source" : "source.edit-source");
+    uiAttr(mode, "title", editing ? "source.read-source" : "source.edit-source");
     if (editing) {
       editor.value = sourceText;
       editingRevision = snapshotRevision;
@@ -143,7 +144,7 @@ export function createCodePane(): CodePane {
     saveInFlight = true;
     let accepted = false;
     let acceptedRevision = savingRevision;
-    saveState.textContent = "Saving";
+    uiText(saveState, "common.saving");
     saveState.className = "code-save-state saving";
     try {
       const response = await fetch("/__studio/source", {
@@ -153,7 +154,7 @@ export function createCodePane(): CodePane {
       });
       if (!response.ok) {
         const reason = await response.text();
-        throw new Error(reason || `Save failed (${response.status})`);
+        throw new Error(reason || t("source.save-failed-status", { status: response.status }));
       }
       const result = await response.json() as { readonly revision?: unknown };
       if (typeof result.revision === "number") acceptedRevision = result.revision;
@@ -163,15 +164,15 @@ export function createCodePane(): CodePane {
         sourceText = savingText;
         dirty = false;
       }
-      saveState.textContent = "Saved";
+      uiText(saveState, "common.saved");
       saveState.className = "code-save-state saved";
       window.setTimeout(() => {
-        if (!dirty) saveState.textContent = "";
+        if (!dirty) userText(saveState, "");
       }, 1200);
     } catch (error) {
-      saveState.textContent = error instanceof Error && error.message.includes("changed")
-        ? "Changed outside Studio"
-        : "Save failed";
+      uiText(saveState, error instanceof Error && error.message.includes("changed")
+        ? "source.changed-outside-studio"
+        : "common.save-failed");
       saveState.className = "code-save-state error";
     } finally {
       saveInFlight = false;
@@ -189,7 +190,7 @@ export function createCodePane(): CodePane {
   wrap.addEventListener("click", () => setWrapped(!wrapped));
   editor.addEventListener("input", () => {
     dirty = true;
-    saveState.textContent = "Unsaved";
+    uiText(saveState, "source.unsaved");
     saveState.className = "code-save-state dirty";
     if (saveTimer !== undefined) window.clearTimeout(saveTimer);
     saveTimer = window.setTimeout(() => void save(), 480);
@@ -308,7 +309,7 @@ export function createCodePane(): CodePane {
           imports: [],
         };
       if (activeSource !== undefined && activeSource.path !== sourceFile.path && dirty) {
-        saveState.textContent = "Saving before switch";
+        uiText(saveState, "source.saving-before-switch");
         saveState.className = "code-save-state saving";
         void save();
         return false;

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

@@ -1,3 +1,4 @@
+import { t, uiLabel, uiAttribute, uiText, uiAttr, type Message } from "./i18n.js";
 import { feedbackClock } from "../feedback.js";
 import type { FeedbackComment, FeedbackMutation, FeedbackView } from "../feedback.js";
 import { icon } from "./icons.js";
@@ -11,28 +12,28 @@ export function createComments(store: Store, stage: Stage) {
   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 class="pane-title">${icon("comments")}<h2>${uiLabel("app.comments")}</h2><span data-count></span></div>
+      <button type="button" class="comments-icon" data-refresh ${uiAttribute("aria-label", "comments.refresh-comments")} ${uiAttribute("title", "comments.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 class="comments-filters" role="group" ${uiAttribute("aria-label", "comments.filter-comments")}>
+      <button type="button" data-filter="all" aria-pressed="true">${uiLabel("comments.all")}</button>
+      <button type="button" data-filter="open" aria-pressed="false">${uiLabel("comments.open")}</button>
+      <button type="button" data-filter="done" aria-pressed="false">${uiLabel("comments.done")}</button>
     </div>
     <div class="comments-error" role="status" aria-live="polite" hidden></div>
-    <div class="comments-list" aria-label="Comments"></div>
+    <div class="comments-list" ${uiAttribute("aria-label", "app.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>
+        <button type="button" class="comment-time" data-current-time ${uiAttribute("title", "comments.use-current-frame")} ${uiAttribute("aria-label", "comments.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>
+        <textarea rows="3" ${uiAttribute("aria-label", "comments.write-a-comment")} ${uiAttribute("placeholder", "comments.placeholder")} 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>
+            <button type="button" class="comments-icon" ${uiAttribute("aria-label", "comments.emoji-soon")} ${uiAttribute("title", "comments.emoji-soon")} disabled>${icon("smile")}</button>
+            <button type="button" class="comments-icon" ${uiAttribute("aria-label", "comments.draw-soon")} ${uiAttribute("title", "comments.draw-soon")} disabled>${icon("edit")}</button>
           </div>
-          <button class="comment-submit" type="submit" aria-label="Send comment" title="Send comment (Enter)" disabled>${icon("send")}</button>
+          <button class="comment-submit" type="submit" ${uiAttribute("aria-label", "comments.send-comment")} ${uiAttribute("title", "comments.send-shortcut")} disabled>${icon("send")}</button>
         </div>
       </div>
     </form>`;
@@ -68,10 +69,10 @@ export function createComments(store: Store, stage: Stage) {
     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 button = (name: string, label: Message, 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.innerHTML = icon(name); uiAttr(node, "title", label); uiAttr(node, "aria-label", label);
     node.disabled = busy;
     node.addEventListener("click", (event) => { event.stopPropagation(); action(); });
     return node;
@@ -101,8 +102,8 @@ export function createComments(store: Store, stage: Stage) {
       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.";
+      uiText(empty.querySelector("strong")!, view === undefined ? "comments.loading-comments" : filter === "done" ? "comments.no-completed-comments" : filter === "open" ? "comments.caught-up" : "comments.empty");
+      uiText(empty.querySelector("p")!, filter === "all" ? "comments.empty-hint" : "comments.filter-hint");
       list.append(empty);
     }
     for (const { comment, number } of comments) {
@@ -114,31 +115,31 @@ export function createComments(store: Store, stage: Stage) {
       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));
+      uiAttr(location, "title", "comments.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", () => {
+      const resolve = button("check", comment.resolved ? "comments.reopen-comment" : "comments.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", () => {
+      actions.append(label, resolve, button("edit", "comments.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 }); }));
+      }), button("trash", "comments.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");
+        uiAttr(text, "aria-label", "comments.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";
+        const cancel = document.createElement("button"); cancel.type = "button"; uiText(cancel, "common.cancel");
         cancel.addEventListener("click", () => { editing = undefined; render(); });
-        const save = document.createElement("button"); save.type = "submit"; save.textContent = "Save"; save.disabled = busy;
+        const save = document.createElement("button"); save.type = "submit"; uiText(save, "common.save"); save.disabled = busy;
         controls.append(cancel, save); edit.append(text, controls);
         edit.addEventListener("submit", (event) => {
           event.preventDefault();
@@ -161,7 +162,7 @@ export function createComments(store: Store, stage: Stage) {
     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 (!response.ok) throw new Error(data.error ?? t("comments.read-failed"));
       if (request !== fetchId) return;
       if (JSON.stringify(view) !== JSON.stringify(data)) { view = data; render(); }
       showError(); renderAnchor();
@@ -173,7 +174,7 @@ export function createComments(store: Store, stage: Stage) {
     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.");
+      if (!response.ok) throw new Error(data.error ?? t("comments.save-failed"));
       ++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;

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

@@ -0,0 +1,68 @@
+/** Shared listbox interaction for Studio controls. Callers own the options and values. */
+export function bindDropdown(control: HTMLElement, trigger: HTMLButtonElement, menu: HTMLElement, options: readonly HTMLButtonElement[]) {
+  const close = (restoreFocus = false): 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);
+  });
+  return { close };
+}

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

@@ -0,0 +1,109 @@
+import { builtinLanguages, chooseLanguage, formatMessage, readLanguagePack } from "../localization.js";
+import type { LanguagePack, Message, MessageValues } from "../localization.js";
+import { bindDropdown } from "./dropdown.js";
+import { icon } from "./icons.js";
+export type { Message } from "../localization.js";
+
+type Attribute = "title" | "aria-label" | "placeholder" | "alt";
+const attributes: readonly Attribute[] = ["title", "aria-label", "placeholder", "alt"];
+const storageKey = "hypit-studio.language";
+let languages = builtinLanguages;
+let language = chooseLanguage(languages, navigator.languages);
+
+export async function initializeI18n(): Promise<void> {
+  const response = await fetch("/__studio/locales");
+  if (!response.ok) throw new Error(`Could not load Studio languages (${response.status}).`);
+  languages = (await response.json() as unknown[]).map(readLanguagePack);
+  let saved: string | null = null;
+  try { saved = localStorage.getItem(storageKey); } catch { /* Browser storage may be disabled. */ }
+  language = chooseLanguage(languages, [...(saved ? [saved] : []), ...navigator.languages]);
+  document.documentElement.lang = language.locale;
+}
+
+export function t(message: Message, values: MessageValues = {}): string {
+  return formatMessage(language, message, values);
+}
+function escape(value: string): string {
+  return value.replace(/[&<>"']/gu, char => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[char]!);
+}
+export function uiLabel(message: Message): string {
+  return `<span data-ui-text="${message}" dir="${language.direction}">${escape(t(message))}</span>`;
+}
+export function uiAttribute(attribute: Attribute, message: Message): string {
+  return `${attribute}="${escape(t(message))}" data-ui-${attribute}="${message}"`;
+}
+export function uiText(node: Element, message: Message, values: MessageValues = {}): void {
+  node.setAttribute("data-ui-text", message);
+  node.setAttribute("data-ui-values", JSON.stringify(values));
+  node.setAttribute("dir", language.direction);
+  node.textContent = t(message, values);
+}
+/** Use when a node changes from UI text into a user-provided name or an empty value. */
+export function userText(node: Element, value: string): void {
+  node.removeAttribute("data-ui-text");
+  node.removeAttribute("data-ui-values");
+  node.setAttribute("dir", "auto");
+  node.textContent = value;
+}
+export function uiAttr(node: Element, attribute: Attribute, message: Message, values: MessageValues = {}): void {
+  node.setAttribute(`data-ui-${attribute}`, message);
+  node.setAttribute(`data-ui-${attribute}-values`, JSON.stringify(values));
+  node.setAttribute(attribute, t(message, values));
+}
+export function uiDate(node: Element, timestamp: number): void {
+  node.setAttribute("data-ui-date", String(timestamp));
+  node.textContent = new Intl.DateTimeFormat(language.locale, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }).format(timestamp);
+}
+
+function selectLanguage(pack: LanguagePack): void {
+  language = pack;
+  try { localStorage.setItem(storageKey, pack.locale); } catch { /* Tab-local choice still applies. */ }
+  document.documentElement.lang = pack.locale;
+  // Update explicitly marked chrome in place, without rebuilding editors or the player.
+  for (const node of Array.from(document.querySelectorAll("[data-ui-text]"))) {
+    uiText(node, node.getAttribute("data-ui-text") as Message, JSON.parse(node.getAttribute("data-ui-values") ?? "{}") as MessageValues);
+  }
+  for (const attribute of attributes) {
+    for (const node of Array.from(document.querySelectorAll(`[data-ui-${attribute}]`))) {
+      uiAttr(node, attribute, node.getAttribute(`data-ui-${attribute}`) as Message, JSON.parse(node.getAttribute(`data-ui-${attribute}-values`) ?? "{}") as MessageValues);
+    }
+  }
+  for (const node of Array.from(document.querySelectorAll("[data-ui-date]"))) uiDate(node, Number(node.getAttribute("data-ui-date")));
+}
+
+export function languageMenu(): HTMLElement {
+  const control = document.createElement("div");
+  control.className = "parameter-select language-select";
+  const trigger = document.createElement("button");
+  trigger.type = "button"; trigger.className = "parameter-select-trigger language-toggle";
+  trigger.dataset.language = "";
+  trigger.innerHTML = icon("globe");
+  uiAttr(trigger, "title", "app.language"); uiAttr(trigger, "aria-label", "app.language");
+  trigger.setAttribute("aria-haspopup", "listbox"); trigger.setAttribute("aria-expanded", "false");
+  const menu = document.createElement("div");
+  menu.className = "parameter-select-menu"; menu.id = "studio-languages"; menu.hidden = true;
+  menu.setAttribute("role", "listbox"); uiAttr(menu, "aria-label", "app.language");
+  trigger.setAttribute("aria-controls", menu.id);
+  const options = languages.map(pack => {
+    const item = document.createElement("button");
+    item.type = "button"; item.className = "parameter-select-option";
+    item.lang = pack.locale; item.dir = pack.direction;
+    item.textContent = pack.name;
+    item.dataset.locale = pack.locale;
+    item.setAttribute("role", "option");
+    item.addEventListener("click", () => {
+      selectLanguage(pack); renderSelection(); close(true);
+    });
+    return item;
+  });
+  const renderSelection = (): void => {
+    for (const item of options) {
+      const selected = item.dataset.locale === language.locale;
+      item.classList.toggle("active", selected); item.setAttribute("aria-selected", String(selected));
+    }
+  };
+  menu.append(...options); control.append(trigger, menu);
+  const { close } = bindDropdown(control, trigger, menu, options);
+  renderSelection();
+  return control;
+}

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

@@ -1,5 +1,6 @@
 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>',
+  globe: '<circle cx="12" cy="12" r="9"/><ellipse cx="12" cy="12" rx="4" ry="9"/><path d="M3 12h18"/>',
   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"/>',