@hypit/hypit 0.1.5 → 0.1.7

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

@@ -1,3 +1,4 @@
+import { uiLabel, uiAttribute, uiText, uiAttr, userText } from "./i18n.js";
 import { createArtifactPreview } from "./artifact-preview.js";
 import type { StudioArtifactView, StudioSnapshot } from "../shared.js";
 import { createOverlay } from "./overlay.js";
@@ -31,31 +32,31 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
   element.className = "stage";
   element.innerHTML = `
     <div class="stage-heading">
-      <div class="stage-title">${icon("preview")}<strong>Preview</strong></div>
-      <button type="button" class="stage-return" hidden>Back to composition</button>
+      <div class="stage-title">${icon("preview")}<strong>${uiLabel("player.preview")}</strong></div>
+      <button type="button" class="stage-return" hidden>${uiLabel("player.back-to-composition")}</button>
     </div>
     <div class="stage-viewport">
       <div class="stage-scaler">
-        <iframe title="Preview" sandbox="allow-scripts allow-same-origin" allow="autoplay"></iframe>
+        <iframe ${uiAttribute("title", "player.preview")} sandbox="allow-scripts allow-same-origin" allow="autoplay"></iframe>
       </div>
     </div>
     <div class="stage-progress" hidden>
-      <input class="stage-scrubber" type="range" min="0" max="0" value="0" step="0.01" aria-label="Media time" hidden>
+      <input class="stage-scrubber" type="range" min="0" max="0" value="0" step="0.01" ${uiAttribute("aria-label", "player.media-time")} hidden>
     </div>
     <div class="stage-bar">
       <span class="stage-time" hidden></span>
       <div class="stage-transport">
-      <button type="button" data-previous aria-label="Previous frame" title="Previous frame">
+      <button type="button" data-previous ${uiAttribute("aria-label", "player.previous-frame")} ${uiAttribute("title", "player.previous-frame")}>
         ${icon("previous")}
       </button>
-      <button type="button" data-play aria-label="Play">
+      <button type="button" data-play ${uiAttribute("aria-label", "player.play")}>
         <span data-icon>${icon("play")}</span>
       </button>
-      <button type="button" data-next aria-label="Next frame" title="Next frame">
+      <button type="button" data-next ${uiAttribute("aria-label", "player.next-frame")} ${uiAttribute("title", "player.next-frame")}>
         ${icon("next")}
       </button>
       </div>
-      <button type="button" data-mute aria-label="Mute" class="stage-mute">
+      <button type="button" data-mute ${uiAttribute("aria-label", "player.mute")} class="stage-mute">
         <span data-mute-icon>${icon("volume")}</span>
       </button>
     </div>`;
@@ -124,7 +125,7 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     event.preventDefault(); stop(); closeSelectionMenu();
     const menu = document.createElement("div");
     menu.className = "selection-menu";
-    menu.setAttribute("role", "menu"); menu.setAttribute("aria-label", "Elements at this point");
+    menu.setAttribute("role", "menu"); uiAttr(menu, "aria-label", "player.elements-at-this-point");
     for (const hit of hits) {
       const option = document.createElement("button"); option.type = "button";
       option.setAttribute("role", "menuitem"); option.textContent = hit.display.title;
@@ -204,7 +205,7 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     const wasPlaying = playing;
     playing = false;
     setIcon(playIcon, "play");
-    play.setAttribute("aria-label", "Play");
+    uiAttr(play, "aria-label", "player.play");
     if (raf !== 0) cancelAnimationFrame(raf);
     raf = 0;
     // Settle the picture on the frame the transport stopped at.
@@ -219,7 +220,7 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     if (playing) { stop(); return; }
     playing = true;
     setIcon(playIcon, "pause");
-    play.setAttribute("aria-label", "Pause");
+    uiAttr(play, "aria-label", "player.pause");
     const total = state.snapshot.space.frameCount;
     const rate = fps(state.snapshot);
     fromFrame = state.playhead.frame >= total - 1 ? 0 : state.playhead.frame;
@@ -245,7 +246,7 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
 
   const applyMuted = (): void => {
     setIcon(muteIcon, muted ? "muted" : "volume");
-    mute.setAttribute("aria-label", muted ? "Unmute" : "Mute");
+    uiAttr(mute, "aria-label", muted ? "player.unmute" : "player.mute");
     if (artifactPreview.media !== undefined) artifactPreview.media.muted = muted;
     (iframe.contentWindow as SeekWindow | null)?.__hypitSetMuted?.(muted);
   };
@@ -286,12 +287,12 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     previous.disabled = next.disabled = play.disabled;
     scrubber.disabled = duration <= 0;
     scrubber.step = "0.01";
-    scrubber.setAttribute("aria-label", "Media time");
+    uiAttr(scrubber, "aria-label", "player.media-time");
     scrubber.max = String(duration);
     scrubber.value = String(media?.currentTime ?? 0);
     time.textContent = `${clock(media?.currentTime ?? 0)} / ${clock(duration)}`;
     setIcon(playIcon, media !== undefined && !media.paused ? "pause" : "play");
-    play.setAttribute("aria-label", media !== undefined && !media.paused ? "Pause" : "Play");
+    uiAttr(play, "aria-label", media !== undefined && !media.paused ? "player.pause" : "player.play");
   });
   viewport.append(artifactPreview.element);
   const compositionTime = (): void => {
@@ -302,7 +303,7 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     scrubber.step = String(1 / rate);
     scrubber.max = String(Math.max(0, state.snapshot.space.frameCount - 1) / rate);
     scrubber.value = String(state.playhead.frame / rate);
-    scrubber.setAttribute("aria-label", "Composition time");
+    uiAttr(scrubber, "aria-label", "player.composition-time");
     time.textContent = `${clock(state.playhead.frame / rate)} / ${clock(state.snapshot.space.frameCount / rate)}`;
   };
   scrubber.addEventListener("input", () => {
@@ -318,14 +319,14 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     compositionTime();
     transport.hidden = mute.hidden = false;
     play.disabled = previous.disabled = next.disabled = false;
-    previous.title = "Previous frame";
-    previous.setAttribute("aria-label", previous.title);
-    next.title = "Next frame";
-    next.setAttribute("aria-label", next.title);
-    title.textContent = "Preview";
+    uiAttr(previous, "title", "player.previous-frame");
+    uiAttr(previous, "aria-label", "player.previous-frame");
+    uiAttr(next, "title", "player.next-frame");
+    uiAttr(next, "aria-label", "player.next-frame");
+    uiText(title, "player.preview");
     title.removeAttribute("title");
     setIcon(playIcon, "play");
-    play.setAttribute("aria-label", "Play");
+    uiAttr(play, "aria-label", "player.play");
     fit();
     if (state !== undefined && ready) seekPicture(state.playhead.frame);
   };
@@ -335,12 +336,12 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     stop();
     scaler.hidden = true;
     back.hidden = false;
-    title.textContent = artifact.displayName ?? artifact.output;
+    userText(title, artifact.displayName ?? artifact.output);
     title.title = artifact.output;
-    previous.title = "Back 5 seconds";
-    next.title = "Forward 5 seconds";
-    previous.setAttribute("aria-label", previous.title);
-    next.setAttribute("aria-label", next.title);
+    uiAttr(previous, "title", "player.back-5-seconds");
+    uiAttr(next, "title", "player.forward-5-seconds");
+    uiAttr(previous, "aria-label", "player.back-5-seconds");
+    uiAttr(next, "aria-label", "player.forward-5-seconds");
     artifactPreview.open(artifact, muted);
     selectedArtifact(artifact.id);
   };
@@ -404,7 +405,7 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     showComposition() { if (artifactPreview.selected !== undefined) returnToComposition(); },
     renameArtifact(artifact) {
       const selected = artifactPreview.selected;
-      if (selected?.build === artifact.build && selected.output === artifact.output) title.textContent = artifact.displayName ?? artifact.output;
+      if (selected?.build === artifact.build && selected.output === artifact.output) userText(title, artifact.displayName ?? artifact.output);
     },
   };
 }

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

@@ -1,3 +1,4 @@
+import { userText, uiAttribute, uiText, uiAttr } from "./i18n.js";
 import type {
   SemanticToken,
   StudioSnapshot,
@@ -89,13 +90,13 @@ export function createTimeline(store: Store): Timeline {
   element.innerHTML = `
     <div class="timeline-toolbar">
       <div class="timeline-tools">
-        <button type="button" class="tool-button active" aria-label="Select" title="Select">${icon("select")}</button>
+        <button type="button" class="tool-button active" ${uiAttribute("aria-label", "timeline.select")} ${uiAttribute("title", "timeline.select")}>${icon("select")}</button>
       </div>
       <div class="timeline-time" data-timeline-time>00:00:00</div>
       <div class="timeline-view-actions">
-        <button type="button" class="icon-button" data-zoom-out aria-label="Zoom out" title="Zoom out">${icon("minus")}</button>
-        <button type="button" class="icon-button" data-zoom-fit aria-label="Fit timeline" title="Fit timeline">${icon("fit")}</button>
-        <button type="button" class="icon-button" data-zoom-in aria-label="Zoom in" title="Zoom in">${icon("plus")}</button>
+        <button type="button" class="icon-button" data-zoom-out ${uiAttribute("aria-label", "timeline.zoom-out")} ${uiAttribute("title", "timeline.zoom-out")}>${icon("minus")}</button>
+        <button type="button" class="icon-button" data-zoom-fit ${uiAttribute("aria-label", "timeline.fit-timeline")} ${uiAttribute("title", "timeline.fit-timeline")}>${icon("fit")}</button>
+        <button type="button" class="icon-button" data-zoom-in ${uiAttribute("aria-label", "timeline.zoom-in")} ${uiAttribute("title", "timeline.zoom-in")}>${icon("plus")}</button>
       </div>
     </div>
     <div class="timeline-body" data-timeline-body>
@@ -138,8 +139,8 @@ export function createTimeline(store: Store): Timeline {
     remember: "hypit-studio.v4.timeline-label-width",
   });
   labelHandle.classList.add("timeline-label-handle");
-  labelHandle.setAttribute("aria-label", "Resize timeline track labels");
-  labelHandle.title = "Resize track labels";
+  uiAttr(labelHandle, "aria-label", "timeline.resize-timeline-track-labels");
+  uiAttr(labelHandle, "title", "timeline.resize-track-labels");
   body.insertBefore(labelHandle, lanes);
 
   let state: State | undefined;
@@ -501,12 +502,14 @@ export function createTimeline(store: Store): Timeline {
     ];
     const laneHeight = bands.reduce((height, band) => height + band.height, itemMetrics.insetYPx * 2);
     const label = createTrackLabel(
-      presentation.label ?? "Timeline",
+      presentation.label ?? "",
       presentation.tone,
       presentation.icon,
-      `${snapshot.semantic.segments.length} segment${snapshot.semantic.segments.length === 1 ? "" : "s"}`,
+      "",
       laneHeight,
     );
+    if (presentation.label === undefined) uiText(label.querySelector("strong")!, "inspector.timeline");
+    uiAttr(label, "title", "timeline.segment-count", { count: snapshot.semantic.segments.length });
     label.classList.add("track-label-semantic");
     label.style.height = `calc(var(--timeline-ruler-height) + ${laneHeight}px)`;
     labels.append(label);
@@ -529,7 +532,7 @@ export function createTimeline(store: Store): Timeline {
       band.className = `semantic-band semantic-band-${kind}`;
       band.style.top = `${bandTop}px`;
       band.style.setProperty("--semantic-band-height", `${height}px`);
-      band.setAttribute("aria-label", kind === "intent" ? "Selections and Moments" : kind === "word" ? "Words" : "Segments");
+      uiAttr(band, "aria-label", kind === "intent" ? "timeline.selections-and-moments" : kind === "word" ? "timeline.words" : "timeline.segments");
       lane.append(band);
       bandTop += height;
     }
@@ -546,7 +549,7 @@ export function createTimeline(store: Store): Timeline {
       node.className = "semantic-cell semantic-segment";
       node.tabIndex = 0;
       node.setAttribute("role", "button");
-      node.setAttribute("aria-label", `Segment ${segment.id}`);
+      uiAttr(node, "aria-label", "timeline.segment-name", { name: segment.id });
       node.dataset.semanticSegment = segment.id;
       node.style.left = `${from * 100}%`;
       const segmentWidth = Math.max(0, to - from) * 100;
@@ -626,7 +629,7 @@ export function createTimeline(store: Store): Timeline {
       node.type = "button";
       node.className = "semantic-cell semantic-selection";
       node.tabIndex = 0;
-      node.setAttribute("aria-label", `Selection ${selection.id}`);
+      uiAttr(node, "aria-label", "timeline.selection-name", { name: selection.id });
       node.style.left = `${from * 100}%`;
       node.style.width = `max(2px, ${Math.max(0, to - from) * 100}%)`;
       node.title = selection.id;
@@ -652,7 +655,7 @@ export function createTimeline(store: Store): Timeline {
       node.type = "button";
       node.className = "semantic-moment";
       node.tabIndex = 0;
-      node.setAttribute("aria-label", `Moment ${moment.id}`);
+      uiAttr(node, "aria-label", "timeline.moment-name", { name: moment.id });
       node.style.left = `${at * 100}%`;
       node.title = moment.id;
       node.addEventListener("click", (event) => {
@@ -674,7 +677,7 @@ export function createTimeline(store: Store): Timeline {
       const menu = document.createElement("div");
       menu.className = "timeline-overlap-menu";
       menu.setAttribute("role", "menu");
-      menu.setAttribute("aria-label", "Overlapping timeline objects");
+      uiAttr(menu, "aria-label", "timeline.overlapping-timeline-objects");
       for (const hit of [...hits].reverse()) {
         const option = document.createElement("button");
         option.type = "button";
@@ -835,7 +838,7 @@ export function createTimeline(store: Store): Timeline {
     semanticNodes = [];
     const corner = document.createElement("div");
     corner.className = "label-corner";
-    corner.textContent = "";
+    userText(corner, "");
     if (snapshot.semantic === undefined || snapshot.semantic.segments.length === 0) labels.append(corner);
     buildSemanticLane(snapshot);
     const nextClipNodes: { node: HTMLElement; start: number; end: number; id: string; selectionGroup?: string }[] = [];

package/packages/studio/start.ts

@@ -10,6 +10,14 @@ Open a Run in the browser to inspect its composition, Sources and Results.
 
   hypit studio --run <build.svrun> [--runtime <hypit.runtime.json>]
     [--port <number>] [--workspace <directory>] [--package-root <directory>]
+    [--locale-pack <./language.json | installed-package/language.json>]...
+
+  hypit studio --check-locale <./language.json | installed-package/language.json>
+    [--package-root <directory>]
+
+Language packs are explicit JSON data. Relative files use the current directory;
+package exports resolve from --package-root (the project by default).
+--check-locale lists missing translations and unknown IDs without opening a Run.
 
 Relative command-line paths start at the current directory; --workspace selects
 the project, without rebasing those paths. Otherwise the nearest package.json
@@ -24,9 +32,9 @@ function invalidArguments(message: string): never {
   throw new Error(`${message}. See hypit studio --help.`);
 }
 
-function argumentsByName(argv: readonly string[]): ReadonlyMap<string, string> {
-  const accepted = new Set(["run", "runtime", "port", "workspace", "package-root"]);
-  const result = new Map<string, string>();
+function argumentsByName(argv: readonly string[]): ReadonlyMap<string, readonly string[]> {
+  const accepted = new Set(["run", "runtime", "port", "workspace", "package-root", "locale-pack", "check-locale"]);
+  const result = new Map<string, string[]>();
   for (let index = 0; index < argv.length; index += 2) {
     const flag = argv[index];
     const value = argv[index + 1];
@@ -35,7 +43,7 @@ function argumentsByName(argv: readonly string[]): ReadonlyMap<string, string> {
     }
     const name = flag.slice(2);
     if (!accepted.has(name)) invalidArguments(`Unknown option --${name}`);
-    result.set(name, value);
+    result.set(name, [...result.get(name) ?? [], value]);
   }
   return result;
 }
@@ -47,22 +55,12 @@ export async function runStudio(argv: readonly string[], io: Pick<CliIo, "write"
   }
   const values = argumentsByName(argv[0] === "--" ? argv.slice(1) : argv);
   const invokedFrom = process.env.INIT_CWD ?? process.cwd();
-  const runArgument = values.get("run");
-  if (runArgument === undefined || runArgument.trim().length === 0) invalidArguments("Missing --run");
-  const { createServer } = await import("vite");
+  const runArgument = values.get("run")?.at(-1);
+
   const { findRuntimeProfile, resolveProjectRoot } = await import("@hypit/project-context-node");
-  const { resolveDistributionPackageImport } = await import("@hypit/package-loader-node");
-  const { videoCliDistribution, videoStudioCompanionPackages } = await import("@hypit/video-cli");
-  const { openStudioBuildLibrary } = await import("./src/build-library.js");
-  const { loadStudioCompanionRegistry } = await import("./src/companion-assembly.js");
-  const { loadStudioDomain } = await import("./src/domain.js");
-  const { loadStudioRun } = await import("./src/run.js");
-  const { studioPlugin } = await import("./src/server.js");
-  const { studioFeedbackPlugin } = await import("./src/feedback-server.js");
-  const { inspectStudioRun } = await import("./src/studio-preflight.js");
-  const runPath = resolve(invokedFrom, runArgument);
-  const packageRootArgument = values.get("package-root");
-  const workspaceArgument = values.get("workspace");
+
+  const packageRootArgument = values.get("package-root")?.at(-1);
+  const workspaceArgument = values.get("workspace")?.at(-1);
   const requestedWorkspaceRoot = workspaceArgument === undefined
     ? undefined
     : resolve(invokedFrom, workspaceArgument);
@@ -73,7 +71,26 @@ export async function runStudio(argv: readonly string[], io: Pick<CliIo, "write"
   const packageRoot = packageRootArgument === undefined
     ? workspaceRoot
     : resolve(invokedFrom, packageRootArgument);
-  const runtimeArgument = values.get("runtime");
+  const { describeLanguagePack, loadLanguagePack, studioLanguages, studioLocalizationPlugin } = await import("./src/localization-node.js");
+  const checkLocale = values.get("check-locale")?.at(-1);
+  if (checkLocale !== undefined) {
+    io.write(describeLanguagePack(await loadLanguagePack(checkLocale, invokedFrom, packageRoot)) + "\n");
+    return;
+  }
+  if (runArgument === undefined || runArgument.trim().length === 0) invalidArguments("Missing --run");
+  const runPath = resolve(invokedFrom, runArgument);
+  const { createServer } = await import("vite");
+  const { resolveDistributionPackageImport } = await import("@hypit/package-loader-node");
+  const { videoCliDistribution, videoStudioCompanionPackages } = await import("@hypit/video-cli");
+  const { openStudioBuildLibrary } = await import("./src/build-library.js");
+  const { loadStudioCompanionRegistry } = await import("./src/companion-assembly.js");
+  const { loadStudioDomain } = await import("./src/domain.js");
+  const { loadStudioRun } = await import("./src/run.js");
+  const { studioPlugin } = await import("./src/server.js");
+  const { studioFeedbackPlugin } = await import("./src/feedback-server.js");
+  const { inspectStudioRun } = await import("./src/studio-preflight.js");
+  const languages = await studioLanguages(values.get("locale-pack") ?? [], invokedFrom, packageRoot);
+  const runtimeArgument = values.get("runtime")?.at(-1);
   const selectedRuntime = runtimeArgument === undefined
     ? await findRuntimeProfile(workspaceRoot)
     : undefined;
@@ -89,7 +106,7 @@ export async function runStudio(argv: readonly string[], io: Pick<CliIo, "write"
     ...(packageRoot === workspaceRoot ? [] : [`  Package root       ${packageRoot}`]),
     "",
   ].join("\n"));
-  const port = Number(values.get("port") ?? "5179");
+  const port = Number(values.get("port")?.at(-1) ?? "5179");
   if (!Number.isSafeInteger(port) || port <= 0) invalidArguments("--port must be a positive integer");
 
   const distributionPackageRoot = videoCliDistribution.packageRoot ?? resolve(here, "../..");
@@ -137,7 +154,7 @@ export async function runStudio(argv: readonly string[], io: Pick<CliIo, "write"
       // available for Source and material previews.
       fs: { allow: [workspaceRoot, packageRoot, distributionPackageRoot, here] },
     },
-    plugins: [distributionImports, studioFeedbackPlugin(workspaceRoot, runPath), studioPlugin({
+    plugins: [distributionImports, studioLocalizationPlugin(languages), studioFeedbackPlugin(workspaceRoot, runPath), studioPlugin({
       source,
       runPath,
       workspaceRoot,