feat(viewer): fill the host container, stack the sidebar on narrow hosts, localize panel notices, and fix the phone navbar and playback bar

[joaner]

What

1. fix(deps). Bumps source-map-js to 1.2.2 (GHSA-68fv-2mgg-jv7q).
2. feat(viewer). RosView fills its container. A useStackedLayout hook measures the viewer's own content box (ResizeObserver, measured before first paint):
   • Below 640 px it stacks the sidebar under the panels.
   • Panels are reordered within one resizable group, not remounted, so the Dockview layout and sidebar state survive.
   • Sidebar tabs never clip their labels: the tab list scrolls, and a narrow sidebar shows icons with accessible names.
3. fix(shortcuts). Text fields, composite widgets (tabs, sliders, radios, menus, lists) and dialogs keep Space and the arrow keys. Buttons and links keep Space for activation. Ctrl/Cmd chords without Alt, and IME composition, go to the browser and the host. Ctrl/Cmd only ever meant something together with Alt (the 100 ms time step), and Alt+Ctrl/Cmd+Arrow still works.
4. fix(i18n). The WebGL-unavailable notice and the image panel status texts (waiting, decode failed, stalled, decoding) are localized in en, zh and ja.
5. fix(player). A cancelled initialization in IterablePlayer and WorkerSerializedSource logs at debug level. Navigating away while a file loads no longer prints errors; real failures still log as errors.
6. fix(navbar). A grid layout keeps the source name clear of the controls on phones.
7. fix(playback). Below 520 px of playback-bar width, time and settings share the first row and the transport is centred on a second row. The clock is no longer clipped.
8. test(e2e). Playwright tests/embed-layout.spec.ts.
9. docs(embedding). EMBEDDING.md and EMBEDDING.zh.md describe narrow containers and keyboard ownership.
10. chore: release 2.2.0. Version bump only, following docs/RELEASE.md; no tag. Drop this commit if you prefer to bump on main after merge.

Each commit typechecks and passes check:i18n on its own.

Why

When the viewer was embedded in a fixed-size or resizable pane:

• it didn't follow the host size;
• the sidebar crushed the panels on narrow panes;
• the phone navbar overlapped and the 390 px clock was clipped;
• Space and the arrow keys were taken from the host's widgets;
• the WebGL and image notices stayed English in zh and ja;
• cancelled loads logged errors.

Tests

New tests:

• tests/embed-layout.spec.ts:
  • split at 1280 px;
  • stacked at 500 px, in focus order;
  • a narrow host container (600 px) inside a 1280 px window stacks the sidebar, and widening the host restores the split;
  • panels stay mounted across the breakpoint;
  • tab names and labels;
  • Space on a tab;
  • navbar and playback bar at 390 px and 1280 px.
• useStackedLayout.test.tsx, useKeyboardShortcuts.test.ts (ownership by role and element, Space on buttons and links, the Ctrl/Cmd and Alt rule, IME, cross-realm), imageStatusText.test.ts, ThreeCanvas.test.tsx (zh WebGL notice), and the cancel-log tests in IterablePlayer.test.ts and WorkerSerializedSource.test.ts.

Checks run locally: check:audit, check:i18n, lint, typecheck, test (vitest), build, build:lib, test:e2e (Playwright).

Manual pass in Chrome on the standalone app and on an embedded build:

• 1920 light en, 1440 dark zh, 390 light zh, 390 dark en;
• opening a file, playback, the keyboard, the sidebar, the navbar and the playback bar.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	rosview	924e774	Commit Preview URL Branch Preview URL	Oct 17 2026, 01:59 PM