@hypit/hypit 0.1.5 → 0.1.6

package/packages/studio/locales/zh-CN.json

@@ -0,0 +1,191 @@
+{
+  "locale": "zh-CN",
+  "name": "简体中文",
+  "direction": "ltr",
+  "messages": {
+    "app.comments": "评论",
+    "app.language": "语言",
+    "app.studio": "工作台",
+    "app.studio-view": "工作区视图",
+    "comments.all": "全部",
+    "comments.caught-up": "评论都已处理",
+    "comments.delete-comment": "删除评论",
+    "comments.done": "已完成",
+    "comments.draw-soon": "批注 · 即将支持",
+    "comments.edit-comment": "编辑评论",
+    "comments.edit-comment-text": "编辑评论内容",
+    "comments.emoji-soon": "表情 · 即将支持",
+    "comments.empty": "留下第一条评论",
+    "comments.empty-hint": "暂停在想调整的画面，说说你的想法。",
+    "comments.filter-comments": "筛选评论",
+    "comments.filter-hint": "切换筛选，查看其他评论。",
+    "comments.go-to-this-frame": "跳转到这一帧",
+    "comments.loading-comments": "加载评论中…",
+    "comments.mark-complete": "标为已完成",
+    "comments.no-completed-comments": "暂无已完成评论",
+    "comments.open": "待处理",
+    "comments.placeholder": "想调整哪里？",
+    "comments.read-failed": "无法读取评论。",
+    "comments.refresh-comments": "刷新评论",
+    "comments.reopen-comment": "标为待处理",
+    "comments.save-failed": "无法保存评论。",
+    "comments.send-comment": "发送评论",
+    "comments.send-shortcut": "发送评论（Enter）",
+    "comments.use-current-frame": "使用当前帧",
+    "comments.write-a-comment": "写评论",
+    "common.cancel": "取消",
+    "common.cancelled": "已取消",
+    "common.compile-failed": "编译失败",
+    "common.completed": "已完成",
+    "common.copied": "已复制",
+    "common.failed": "失败",
+    "common.invalid-value": "无效的值",
+    "common.needs-attention": "需要处理",
+    "common.queued": "排队中",
+    "common.refresh": "刷新",
+    "common.running": "运行中",
+    "common.save": "保存",
+    "common.save-failed": "保存失败",
+    "common.saved": "已保存",
+    "common.saving": "保存中",
+    "common.waiting": "等待中",
+    "inspector.add-color": "添加颜色",
+    "inspector.add-item": "添加条目",
+    "inspector.anchor.program-end": "时间线终点{detail}",
+    "inspector.anchor.program-start": "时间线起点{detail}",
+    "inspector.anchor.segment-end": "段尾{detail}",
+    "inspector.anchor.segment-start": "段头{detail}",
+    "inspector.anchor.token-end": "词尾{detail}",
+    "inspector.anchor.token-start": "词头{detail}",
+    "inspector.aspect-ratio": "画幅比例",
+    "inspector.author": "源文件",
+    "inspector.build": "构建",
+    "inspector.candidates": "候选实现",
+    "inspector.canvas": "画布",
+    "inspector.duration": "时长",
+    "inspector.empty": "当前选中项没有详细信息",
+    "inspector.end": "终点",
+    "inspector.end-anchor": "终点语义锚点",
+    "inspector.frame-rate": "帧率",
+    "inspector.frames": "帧数",
+    "inspector.how": "样式",
+    "inspector.invalid-fields": "请正确填写必填项后保存。",
+    "inspector.item-count": "{count} 项",
+    "inspector.moment": "时刻",
+    "inspector.moment-anchor": "时刻语义锚点",
+    "inspector.move-down": "下移",
+    "inspector.move-up": "上移",
+    "inspector.project": "项目",
+    "inspector.properties": "属性",
+    "inspector.remove-item": "移除条目",
+    "inspector.resolution": "分辨率",
+    "inspector.run": "运行方案",
+    "inspector.semantic-anchors": "语义锚点",
+    "inspector.sources": "引用文件",
+    "inspector.start": "起点",
+    "inspector.start-anchor": "起点语义锚点",
+    "inspector.structured-value": "结构化值",
+    "inspector.targets": "目标产物",
+    "inspector.timeline": "时间线",
+    "inspector.timing": "时间",
+    "inspector.tracks": "轨道",
+    "inspector.use-color": "使用 {color}",
+    "inspector.when": "时间",
+    "inspector.where": "位置",
+    "library.all-media": "全部素材",
+    "library.all-tasks": "全部任务",
+    "library.artifacts": "产物",
+    "library.audio": "音频",
+    "library.clear-task-filter": "清除任务筛选",
+    "library.data": "数据",
+    "library.display-name": "显示名称",
+    "library.enter-name": "请输入名称。",
+    "library.finished": "已结束",
+    "library.image": "图片",
+    "library.images": "图片",
+    "library.in-progress": "进行中",
+    "library.loading-media": "加载素材中…",
+    "library.loading-more": "加载更多…",
+    "library.loading-tasks": "加载任务中…",
+    "library.media-categories": "素材分类",
+    "library.media-category": "素材分类",
+    "library.media-hint": "这里展示已产出的图片、视频和音频，也包括正在构建的任务产物。",
+    "library.name-failed": "无法保存名称",
+    "library.name-pending": "{name}\n构建完成后可以重命名",
+    "library.no-files-in-this-category": "此分类暂无素材",
+    "library.no-media": "暂无素材",
+    "library.no-tasks-here": "暂无任务",
+    "library.no-tasks-in-progress": "没有进行中的任务",
+    "library.preview-name": "预览 {name}",
+    "library.preview-unavailable": "暂时无法预览",
+    "library.referenced-source-files": "引用的源文件",
+    "library.refresh-failed": "刷新失败：{detail}",
+    "library.refresh-failed-retained": "刷新失败：{detail} · 已保留上次视图",
+    "library.refresh-interrupted": "刷新已中断",
+    "library.refresh-media": "刷新素材",
+    "library.refresh-tasks": "刷新任务",
+    "library.refreshing": "刷新中…",
+    "library.rename-hint": "{name}\n双击或按 F2 重命名",
+    "library.return-to-task": "返回任务",
+    "library.source": "源文件",
+    "library.studio-library": "项目资源",
+    "library.task-categories": "任务分类",
+    "library.task-return": "{name} · 返回任务",
+    "library.tasks": "任务",
+    "library.unavailable": "资源暂时不可用",
+    "library.updated": "更新于 {time}",
+    "library.video": "视频",
+    "library.video-loading-preview": "视频 · 加载预览中",
+    "library.videos": "视频",
+    "library.view-media": "查看产物",
+    "library.view-task-media": "查看任务产物",
+    "player.audio-waveform": "音频波形",
+    "player.back-5-seconds": "后退 5 秒",
+    "player.back-to-composition": "返回作品",
+    "player.composition-time": "作品播放进度",
+    "player.elements-at-this-point": "此处的元素",
+    "player.forward-5-seconds": "前进 5 秒",
+    "player.frame-loading": "加载画面中…",
+    "player.frame-unavailable": "画面暂时不可用",
+    "player.hovered-frame": "悬停画面",
+    "player.media-failed": "浏览器无法打开此素材。",
+    "player.media-time": "素材播放进度",
+    "player.mute": "静音",
+    "player.next-frame": "下一帧",
+    "player.pause": "暂停",
+    "player.play": "播放",
+    "player.preview": "预览",
+    "player.previous-frame": "上一帧",
+    "player.unmute": "取消静音",
+    "source.changed-outside-studio": "文件已在外部更改",
+    "source.edit-source": "编辑源文件",
+    "source.keep-lines-unwrapped": "不自动换行",
+    "source.read-source": "查看源文件",
+    "source.save-failed-status": "保存失败（{status}）",
+    "source.saving-before-switch": "切换前保存中",
+    "source.svml-source": "SVML 源文件",
+    "source.unsaved": "未保存",
+    "source.wrap-lines": "自动换行",
+    "tasks.copy-error": "复制错误信息",
+    "tasks.copy-manually": "请选择文字复制",
+    "tasks.no-runtime": "尚未选择运行环境，可在「已结束」中查看保存的任务。",
+    "tasks.progress": "已完成 {completed}/{total} 步",
+    "tasks.refresh-hint": "点击刷新，查看最新任务状态。",
+    "tasks.saved-only": "项目中保存的结果 · 未选择运行环境",
+    "timeline.fit-timeline": "适配时间线",
+    "timeline.moment-name": "时刻 {name}",
+    "timeline.overlapping-timeline-objects": "重叠的时间线对象",
+    "timeline.resize-timeline-track-labels": "调整轨道名称区宽度",
+    "timeline.resize-track-labels": "调整轨道名称区宽度",
+    "timeline.segment-name": "片段 {name}",
+    "timeline.segments": "片段",
+    "timeline.select": "选择",
+    "timeline.selection-name": "区间 {name}",
+    "timeline.selections-and-moments": "区间与时刻",
+    "timeline.words": "词语",
+    "timeline.zoom-in": "放大",
+    "timeline.zoom-out": "缩小",
+    "inspector.color-picker": "{label}取色器",
+    "timeline.segment-count": "{count} 个片段"
+  }
+}

package/packages/studio/src/localization-node.ts

@@ -0,0 +1,46 @@
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { isAbsolute, resolve } from "node:path";
+import type { Plugin } from "vite";
+import { builtinLanguages, languageCoverage, readLanguagePack } from "./localization.js";
+import type { LanguagePack } from "./localization.js";
+
+export async function loadLanguagePack(specifier: string, cwd: string, packageRoot: string): Promise<LanguagePack> {
+  const path = isAbsolute(specifier) || specifier.startsWith(".")
+    ? resolve(cwd, specifier)
+    : createRequire(resolve(packageRoot, "package.json")).resolve(specifier);
+  try { return readLanguagePack(JSON.parse(await readFile(path, "utf8"))); }
+  catch (error) { throw new Error(`Language pack ${specifier}: ${error instanceof Error ? error.message : String(error)}`); }
+}
+
+export function describeLanguagePack(pack: LanguagePack): string {
+  const { missing, unknown } = languageCoverage(pack);
+  return [`${pack.name} (${pack.locale})`,
+    `Missing translations (${missing.length}; English is used): ${missing.join(", ") || "none"}`,
+    `Unknown message IDs (${unknown.length}): ${unknown.join(", ") || "none"}`,
+  ].join("\n");
+}
+
+export async function studioLanguages(specifiers: readonly string[], cwd: string, packageRoot: string): Promise<readonly LanguagePack[]> {
+  const packs = new Map(builtinLanguages.map(pack => [pack.locale, pack]));
+  for (const specifier of specifiers) {
+    const pack = await loadLanguagePack(specifier, cwd, packageRoot);
+    packs.set(pack.locale, pack);
+  }
+  return [...packs.values()];
+}
+
+export function studioLocalizationPlugin(packs: readonly LanguagePack[]): Plugin {
+  return {
+    name: "hypit-studio-localization",
+    configureServer(server) {
+      server.middlewares.use((request, response, next) => {
+        if (new URL(request.url ?? "/", "http://localhost").pathname !== "/__studio/locales") return next();
+        if (request.method !== "GET") { response.statusCode = 405; response.end(); return; }
+        response.setHeader("content-type", "application/json; charset=utf-8");
+        response.setHeader("cache-control", "no-store");
+        response.end(JSON.stringify(packs));
+      });
+    },
+  };
+}

package/packages/studio/src/localization.ts

@@ -0,0 +1,85 @@
+import english from "../locales/en.json" with { type: "json" };
+import chinese from "../locales/zh-CN.json" with { type: "json" };
+
+export type Message = keyof typeof english.messages;
+export type MessageValue = string | ({ readonly other: string } & Partial<Record<Intl.LDMLPluralRule, string>>);
+export type LanguagePack = {
+  readonly locale: string;
+  /** Native language name, displayed without translation. */
+  readonly name: string;
+  readonly direction: "ltr" | "rtl";
+  readonly messages: Readonly<Record<string, MessageValue>>;
+};
+export const defaultLanguage: LanguagePack = english as LanguagePack;
+export const builtinLanguages: readonly LanguagePack[] = [defaultLanguage, chinese as LanguagePack];
+export type MessageValues = Readonly<Record<string, string | number>>;
+const plurals = new Set(["zero", "one", "two", "few", "many", "other"]);
+const record = (value: unknown): value is Record<string, unknown> => value !== null && typeof value === "object" && !Array.isArray(value);
+const variants = (message: MessageValue): readonly string[] => typeof message === "string" ? [message] : Object.values(message);
+const variables = (text: string): string[] => [...new Set([...text.matchAll(/\{(\w+)\}/gu)].map(match => match[1]!))].sort();
+
+/** Read data, never executable translation code. Partial translations remain useful. */
+export function readLanguagePack(value: unknown): LanguagePack {
+  if (!record(value) || typeof value.locale !== "string" || typeof value.name !== "string" || !value.name.trim()
+    || (value.direction !== "ltr" && value.direction !== "rtl") || !record(value.messages)) {
+    throw new Error("A Studio language pack needs locale, name, direction (ltr/rtl) and messages.");
+  }
+  const locale = Intl.getCanonicalLocales(value.locale)[0];
+  if (!locale) throw new Error("A Studio language pack needs a BCP 47 locale.");
+  const messages: Record<string, MessageValue> = {};
+  for (const [id, message] of Object.entries(value.messages)) {
+    if (typeof message !== "string" && (!record(message) || typeof message.other !== "string"
+      || Object.entries(message).some(([form, text]) => !plurals.has(form) || typeof text !== "string"))) {
+      throw new Error(`${id}: expected text or plural forms with an 'other' form.`);
+    }
+    const translated = message as MessageValue;
+    const original = Object.hasOwn(defaultLanguage.messages, id) ? defaultLanguage.messages[id] : undefined;
+    if (original !== undefined) {
+      const expected = variables(variants(original)[0]!).join(",");
+      for (const text of variants(translated)) {
+        if (variables(text).join(",") !== expected) throw new Error(`${id}: preserve the named variables {${expected.split(",").join("}, {")}}.`);
+      }
+      if (typeof translated !== "string" && !variables(variants(original)[0]!).includes("count")) {
+        throw new Error(`${id}: plural forms require a count variable.`);
+      }
+    }
+    messages[id] = translated;
+  }
+  return { locale, name: value.name, direction: value.direction, messages };
+}
+
+export function languageCoverage(pack: LanguagePack): { missing: string[]; unknown: string[] } {
+  return {
+    missing: Object.keys(defaultLanguage.messages).filter(id => !Object.hasOwn(pack.messages, id)),
+    unknown: Object.keys(pack.messages).filter(id => !Object.hasOwn(defaultLanguage.messages, id)),
+  };
+}
+
+export function chooseLanguage(packs: readonly LanguagePack[], preferences: readonly string[]): LanguagePack {
+  for (const preference of preferences) {
+    let locale: string;
+    try { locale = Intl.getCanonicalLocales(preference)[0]!; } catch { continue; }
+    const exact = packs.find(pack => pack.locale === locale);
+    if (exact) return exact;
+    // Match regional/script variants without a list of special language cases.
+    const requested = new Intl.Locale(locale).maximize();
+    const related = packs.find(pack => {
+      const candidate = new Intl.Locale(pack.locale).maximize();
+      return candidate.language === requested.language && candidate.script === requested.script;
+    });
+    if (related) return related;
+  }
+  return packs.find(pack => pack.locale === defaultLanguage.locale) ?? defaultLanguage;
+}
+
+export function formatMessage(pack: LanguagePack, id: Message, values: MessageValues = {}): string {
+  const translated = pack.messages[id];
+  const message = translated ?? defaultLanguage.messages[id]!;
+  const locale = translated === undefined ? defaultLanguage.locale : pack.locale;
+  const template = typeof message === "string" ? message
+    : message[new Intl.PluralRules(locale).select(Number(values.count))] ?? message.other;
+  return template.replace(/\{(\w+)\}/gu, (match, key: string) => {
+    const value = values[key];
+    return typeof value === "number" ? new Intl.NumberFormat(pack.locale).format(value) : value ?? match;
+  });
+}

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;