@zq-silk/yui 2.15.0 → 2.16.0

package/dist/web/assets/client/views/task/page.js

@@ -4,7 +4,7 @@ export const TASK_PAGE_SCRIPT = String.raw `
 // observation arrives separately from the Context snapshot, so every fact it
 // feeds lives in a [data-slot] that updateObservation() redraws in place.
 import { h, icon, clear } from "/assets/js/lib/dom.js";
-import { badge, chip, timeTag } from "/assets/js/ui/primitives.js";
+import { badge, chip, operatorToggle, timeTag, topBar } from "/assets/js/ui/primitives.js";
 import { label, statusBadge } from "/assets/js/domain/vocab.js";
 import { totalOf } from "/assets/js/domain/context.js";
 import { renderOverviewPanel } from "/assets/js/views/task/overview.js";
@@ -29,8 +29,8 @@ export function renderTaskDetail(container, data, t, locale, ctx) {
   container.dataset.jobsLocale = locale;
   data.viewState.coreKey = data.core.coreCursor;
   const page = h("div.page.task-page");
-  page.append(h("header.task-header", null, taskBar(task, t, ctx)),
-    h("div.task-hero", null, h("h1.task-title", null, task.title), taskMeta(task, t, locale)),
+  container.append(taskBar(task, t, ctx));
+  page.append(h("div.task-hero", null, h("h1.task-title", null, task.title), taskMeta(task, t, locale)),
     h("div.tabs-wrap", null, taskTabs(data.core, t, ctx)));
   const panels = {};
   TABS.forEach(function (tab) {
@@ -74,15 +74,15 @@ export function selectTab(container, tab) {
 }
 
 function taskBar(task, t, ctx) {
-  return h("div.task-bar", null,
-    h("button.icon-btn.back-btn", { type: "button", "aria-label": t("actions.back"), title: t("actions.back"), onclick: ctx.onBack }, icon("back")),
+  return topBar(t, ctx.revealSidebar,
     h("nav.crumbs", { "aria-label": t("crumbs.label") },
-      h("button.crumb", { type: "button", onclick: ctx.onBack }, t("crumbs.tasks")),
+      h("button.crumb", { type: "button", title: t("overview.title"), onclick: ctx.onBack }, t("manage.workbench")),
       h("span.crumb-sep", { "aria-hidden": "true" }, "/"),
-      h("code.crumb-current", null, task.id)),
-    h("span.spacer"),
-    dockToggle("discussion", "chat", t("dock.discussion") + " · D", t, ctx),
-    dockToggle("session", "terminal", t("dock.session"), t, ctx));
+      h("code.crumb-current", { title: task.title }, task.id)),
+    [dockToggle("discussion", "chat", t("dock.discussion") + " · D", t, ctx),
+      dockToggle("session", "terminal", t("dock.session"), t, ctx),
+      h("span.task-bar-sep", { "aria-hidden": "true" }),
+      operatorToggle(t, ctx.toggleOperator)]);
 }
 
 function dockToggle(mode, iconName, title, t, ctx) {

package/dist/web/assets/shared/brand.js

@@ -0,0 +1,22 @@
+import { THEMES } from "./themes.js";
+// The Yui mark: a capital Y with an accent dot on a tile (64×64 grid). One
+// geometry source for the in-page mark and the favicon. The in-page mark is
+// drawn with theme tokens via CSS (tile = ink, Y = canvas, dot = accent), so it
+// follows a theme switch; the favicon cannot read page CSS, so each theme gets
+// a pre-coloured copy that the theme script swaps in.
+const Y_PATH = "M17 17L30 33L43 17M30 33V49";
+const DOT = { cx: 49.5, cy: 46, r: 4.6 };
+// Inline glyph for `.brand-mark`; the tile itself is the element's background.
+export function brandGlyphSvg() {
+    return `<svg class="brand-glyph" viewBox="0 0 64 64" aria-hidden="true" focusable="false">`
+        + `<path d="${Y_PATH}" fill="none" stroke="currentColor" stroke-width="7.5" stroke-linecap="round" stroke-linejoin="round"/>`
+        + `<circle class="brand-dot" cx="${DOT.cx}" cy="${DOT.cy}" r="${DOT.r}"/></svg>`;
+}
+function brandIconSvg(tile, glyph, dot) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">`
+        + `<rect width="64" height="64" rx="16" fill="${tile}"/>`
+        + `<path d="${Y_PATH}" fill="none" stroke="${glyph}" stroke-width="7.5" stroke-linecap="round" stroke-linejoin="round"/>`
+        + `<circle cx="${DOT.cx}" cy="${DOT.cy}" r="${DOT.r}" fill="${dot}"/></svg>`;
+}
+// Favicon data URIs keyed by theme id (img-src allows data:).
+export const BRAND_ICONS = Object.freeze(Object.fromEntries(THEMES.map(theme => [theme.id, "data:image/svg+xml," + encodeURIComponent(brandIconSvg(theme.tokens.ink, theme.tokens.canvas, theme.tokens.accent))])));

package/dist/web/assets/shared/geometry.js

@@ -9,11 +9,17 @@ export const BREAKPOINTS = Object.freeze({
     // ≤ small: phone layout for page content.
     small: 620
 });
+// The global navigation rail (Workbench / Models / Settings) on every page.
+export const RAIL_WIDTH = 60;
 export const SIDEBAR = Object.freeze({ min: 240, max: 560, compact: 264, step: 16 });
 export const DOCK = Object.freeze({ min: 320, max: 760, initial: 440, step: 24 });
 // The task column never shrinks below this while a divider is dragged.
 export const CENTER_MIN = 420;
 export const DIVIDER_WIDTH = 9;
+// Between narrow and this width an open dock and the default task list cannot
+// both fit beside a minimum task column, so the task list steps aside while
+// the dock is open (closing the dock brings it back).
+export const DOCK_FOCUS_MAX = RAIL_WIDTH + SIDEBAR.compact + DIVIDER_WIDTH + DOCK.initial + CENTER_MIN - 1;
 export const LAYOUT_GEOMETRY = Object.freeze({
-    narrow: BREAKPOINTS.narrow, sidebar: SIDEBAR, dock: DOCK, centerMin: CENTER_MIN, divider: DIVIDER_WIDTH
+    narrow: BREAKPOINTS.narrow, focusMax: DOCK_FOCUS_MAX, rail: RAIL_WIDTH, sidebar: SIDEBAR, dock: DOCK, centerMin: CENTER_MIN, divider: DIVIDER_WIDTH
 });

package/dist/web/assets/shared/icons.js

@@ -4,10 +4,14 @@
 export const ICON_PATHS = Object.freeze({
     refresh: ["M20 11a8 8 0 0 0-14.3-4.9L4 8", "M4 4v4h4", "M4 13a8 8 0 0 0 14.3 4.9L20 16", "M20 20v-4h-4"],
     search: ["M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14z", "M20 20l-4-4"],
+    textSearch: ["M4 6h14", "M4 11h6", "M4 16h4", "M15.5 19a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z", "M21 21l-3-3"],
     terminal: ["M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z", "M7 10l3 2-3 2", "M12 15h5"],
     send: ["M4 12l16-8-6 16-2.5-6.5z", "M11.5 13.5L20 4"],
     swap: ["M7 7h13", "M16 3l4 4-4 4", "M17 17H4", "M8 13l-4 4 4 4"],
     close: ["M6 6l12 12", "M18 6L6 18"],
+    workbench: ["M4 4h7v7H4z", "M13 4h7v4h-7z", "M13 10h7v10h-7z", "M4 13h7v7H4z"],
+    sidebar: ["M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z", "M9 5v14", "M5.5 9h1", "M5.5 12h1"],
+    menu: ["M4 7h16", "M4 12h16", "M4 17h16"],
     back: ["M19 12H5", "M11 6l-6 6 6 6"],
     dock: ["M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z", "M14 5v14", "M17 9h1", "M17 12h1"],
     settings: ["M4 7h10", "M18 7h2", "M16 5v4", "M4 17h4", "M12 17h8", "M10 15v4"],

package/dist/web/assets/shared/motion.js

@@ -0,0 +1,74 @@
+// The motion system: every duration, easing, keyframe and stacking layer in
+// the web UI comes from here. The stylesheets read the generated CSS custom
+// properties (tokens.ts) and keyframes (styles/motion.ts); client scripts read
+// the same values as JSON (client/lib/motion.ts). Changing a number below
+// retimes the whole interface in one place.
+//
+// The curves follow well-known open-source component libraries: `sheet` is
+// the iOS / Vaul drawer curve, `standard` a Material/Radix-style ease-out for
+// small UI, and `exit` an accelerate curve so things leave quicker than they
+// arrive.
+export const DURATIONS = Object.freeze({
+    // Hover, press and colour feedback.
+    fast: 120,
+    // Popovers, menus, dialogs, content swaps.
+    base: 200,
+    // Exits are a little quicker than entries.
+    exit: 150,
+    // Column resizes (sidebar collapse, dock open) via View Transitions.
+    layout: 260,
+    // Drawers and sheets.
+    sheet: 420,
+    sheetOut: 300,
+    // Cross-document page transitions.
+    page: 220
+});
+export const EASINGS = Object.freeze({
+    standard: "cubic-bezier(.2,.8,.2,1)",
+    sheet: "cubic-bezier(.32,.72,0,1)",
+    exit: "cubic-bezier(.4,0,1,1)"
+});
+// Stacking layers, lowest to highest.
+export const LAYERS = Object.freeze({
+    raised: 1,
+    sticky: 10,
+    header: 20,
+    popover: 30,
+    sheet: 60,
+    scrim: 70,
+    drawer: 71,
+    railOver: 72,
+    toast: 90,
+    skip: 100
+});
+// Keyframe presets. Each is emitted as a CSS @keyframes rule named
+// `m-<name>` and handed to the Web Animations API by the client.
+export const PRESETS = Object.freeze({
+    fade: { frames: [{ opacity: 0 }, { opacity: 1 }], duration: "base", easing: "standard" },
+    rise: { frames: [{ opacity: 0, transform: "translate3d(0,6px,0)" }, { opacity: 1, transform: "none" }], duration: "base", easing: "standard" },
+    pop: { frames: [{ opacity: 0, transform: "scale(.96)" }, { opacity: 1, transform: "none" }], duration: "base", easing: "standard" },
+    sheetUp: { frames: [{ transform: "translate3d(0,100%,0)" }, { transform: "translate3d(0,0,0)" }], duration: "sheet", easing: "sheet" },
+    sheetDown: { frames: [{ transform: "translate3d(0,0,0)" }, { transform: "translate3d(0,100%,0)" }], duration: "sheetOut", easing: "sheet" }
+});
+const kebab = (name) => name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+// CSS custom properties: --t-<duration>, --ease-<easing>, --z-<layer>.
+// `--t-med` and `--ease` stay as aliases for the existing stylesheets.
+export function motionTokenStyles() {
+    const t = Object.entries(DURATIONS).map(([k, v]) => `--t-${kebab(k)}:${v}ms`);
+    const e = Object.entries(EASINGS).map(([k, v]) => `--ease-${kebab(k)}:${v}`);
+    const z = Object.entries(LAYERS).map(([k, v]) => `--z-${kebab(k)}:${v}`);
+    return [...t, "--t-med:var(--t-base)", ...e, "--ease:var(--ease-standard)", ...z].join(";") + ";";
+}
+function frameCss(frame) {
+    return Object.entries(frame).map(([k, v]) => `${kebab(k)}:${v}`).join(";");
+}
+export function motionKeyframes() {
+    const presets = Object.entries(PRESETS).map(([name, p]) => {
+        const last = p.frames.length - 1;
+        const stops = p.frames.map((f, i) => `${last ? Math.round((i / last) * 100) : 0}%{${frameCss(f)}}`).join("");
+        return `@keyframes m-${kebab(name)}{${stops}}`;
+    });
+    return [...presets, "@keyframes m-spin{to{transform:rotate(360deg)}}", "@keyframes m-blink{50%{opacity:.35}}"].join("\n");
+}
+// The JSON the client motion helper reads.
+export const MOTION = Object.freeze({ durations: DURATIONS, easings: EASINGS, presets: PRESETS });

package/dist/web/assets/shell/appRail.js

@@ -0,0 +1,14 @@
+import { brandGlyphSvg } from "../shared/brand.js";
+import { iconSvg } from "../shared/icons.js";
+const item = (area, href, icon, key, label, current, id) => `<a${id ? ` id="${id}"` : ""} class="rail-item" href="${href}" data-area="${area}"${area === current ? ` aria-current="page"` : ""}${area === "workbench" && current === "workbench" ? "" : ` data-nav-area="${area}"`} title="${label}" data-i18n-title="${key}">${iconSvg(icon)}<span data-i18n="${key}">${label}</span></a>`;
+export function appRail(current) {
+    const brandNav = current === "workbench" ? "" : ` data-nav-area="workbench"`;
+    return `<nav class="app-rail" aria-label="Main navigation" data-i18n-aria-label="manage.nav">
+      <a class="rail-brand" href="/"${brandNav} title="Yui"><span class="brand-mark" aria-hidden="true">${brandGlyphSvg()}</span><span class="sr-only">Yui</span></a>
+      <div class="rail-items">
+        ${item("workbench", "/", "workbench", "manage.workbench", "Workbench", current, current === "workbench" ? "rail-workbench" : undefined)}
+        ${item("models", "/models", "layers", "models.title", "Models", current)}
+        ${item("settings", "/settings", "settings", "settings.title", "Settings", current, current === "workbench" ? "settings-open" : undefined)}
+      </div>
+    </nav>`;
+}

package/dist/web/assets/shell/dialogs.js

@@ -27,6 +27,7 @@ export const DIALOGS_HTML = `  <dialog id="settings-dialog" class="dialog settin
           <dt><kbd>R</kbd></dt><dd data-i18n="shortcut.refresh">Refresh</dd>
           <dt><kbd>D</kbd></dt><dd data-i18n="shortcut.dock">Show or hide the session panel</dd>
           <dt><kbd>O</kbd></dt><dd data-i18n="shortcut.operator">Operator session</dd>
+          <dt><kbd>[</kbd></dt><dd data-i18n="shortcut.sidebar">Show or hide the task list</dd>
           <dt><kbd>1</kbd>–<kbd>${TASK_TABS.length}</kbd></dt><dd data-i18n="shortcut.tabs">Switch task sections</dd>
           <dt><kbd>Esc</kbd></dt><dd data-i18n="shortcut.escape">Close panel / leave task</dd>
         </dl>

package/dist/web/assets/shell/dock.js

@@ -7,17 +7,30 @@ import { iconSvg } from "../shared/icons.js";
 export const DOCK_HTML = `    <div id="dock-divider" class="dock-divider" role="separator" tabindex="0" aria-orientation="vertical" aria-valuemin="${DOCK.min}" aria-valuemax="${DOCK.max}" aria-valuenow="${DOCK.initial}" aria-label="Resize session panel" data-i18n-aria-label="dock.resize" hidden><span aria-hidden="true"></span></div>
     <aside id="dock" class="dock" aria-label="Session" data-i18n-aria-label="dock.label" hidden>
       <header class="dock-head">
-        <div class="seg" role="tablist" aria-label="Session view" data-i18n-aria-label="dock.label">
-          <button id="dock-tab-conversation" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-conversation"><span data-i18n="conversation.title">Conversation</span></button>
-          <button id="dock-tab-discussion" class="seg-btn" type="button" role="tab" aria-selected="true" aria-controls="dock-discussion">${iconSvg("chat")}<span data-i18n="dock.discussion">Discussion</span></button>
-          <button id="dock-tab-session" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-session">${iconSvg("terminal")}<span data-i18n="dock.session">Live session</span></button>
-          <button id="dock-tab-preview" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-preview" disabled><span data-i18n="preview.title">Preview</span></button>
-        </div>
+        <details id="dock-target" class="dock-target">
+          <summary class="dock-target-btn" aria-label="Conversation target" data-i18n-aria-label="dock.target">
+            <span id="dock-target-icon" class="dock-target-icon" aria-hidden="true">${iconSvg("broadcast")}</span>
+            <span id="dock-target-label" class="dock-target-label">Operator</span>${iconSvg("down")}
+          </summary>
+          <div class="dock-target-menu">
+            <div id="dock-target-options" class="dock-target-options" role="group" aria-label="Conversation target" data-i18n-aria-label="dock.target"></div>
+            <hr>
+            <button id="global-input-open" class="dock-target-item" type="button">${iconSvg("send")}<span data-i18n="global.openRole">Message another Role…</span></button>
+          </div>
+        </details>
         <div class="dock-actions">
           <button id="dock-swap" class="icon-btn" type="button" aria-label="Swap with task details" data-i18n-aria-label="dock.swap" title="Swap with task details">${iconSvg("swap")}</button>
           <button id="dock-close" class="icon-btn" type="button" aria-label="Hide session panel" data-i18n-aria-label="dock.hide" title="Hide · D">${iconSvg("close")}</button>
         </div>
       </header>
+      <div class="dock-tabs">
+        <div class="seg seg-sm" role="tablist" aria-label="Session view" data-i18n-aria-label="dock.label">
+          <button id="dock-tab-conversation" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-conversation"><span data-i18n="conversation.title">Conversation</span></button>
+          <button id="dock-tab-discussion" class="seg-btn" type="button" role="tab" aria-selected="true" aria-controls="dock-discussion">${iconSvg("chat")}<span data-i18n="dock.discussion">Discussion</span></button>
+          <button id="dock-tab-session" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-session">${iconSvg("terminal")}<span data-i18n="dock.session">Live session</span></button>
+          <button id="dock-tab-preview" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-preview" disabled><span data-i18n="preview.title">Preview</span></button>
+        </div>
+      </div>
       <section id="dock-conversation" class="dock-pane dock-discussion" role="tabpanel" aria-labelledby="dock-tab-conversation" hidden></section>
       <section id="dock-discussion" class="dock-pane dock-discussion" role="tabpanel" aria-labelledby="dock-tab-discussion"></section>
       <section id="dock-preview" class="dock-pane dock-preview" role="tabpanel" aria-labelledby="dock-tab-preview" hidden></section>

package/dist/web/assets/shell/index.js

@@ -1,8 +1,10 @@
+import { BRAND_ICONS } from "../shared/brand.js";
 import { DEFAULT_DARK_THEME } from "../shared/themes.js";
 import { STYLESHEETS } from "../styles/index.js";
 import { DIALOGS_HTML } from "./dialogs.js";
 import { DOCK_HTML } from "./dock.js";
 import { SIDEBAR_HTML } from "./sidebar.js";
+import { appRail } from "./appRail.js";
 // Static application frame. Everything inside #detail, #task-list and the dock
 // panes is rendered by the client modules; the shell only fixes the regions
 // and the controls whose identity must survive re-renders. Stylesheets are
@@ -17,8 +19,8 @@ export const DASHBOARD_HTML = `<!doctype html>
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="color-scheme" content="dark light">
   <meta name="yui-web-token" content="__YUI_WEB_TOKEN__">
+  <link rel="icon" type="image/svg+xml" href="${BRAND_ICONS[DEFAULT_DARK_THEME.id]}">
   <script src="/assets/theme.js"></script>
-  <link rel="icon" href="data:,">
   <title>Yui</title>
   <link rel="preload" href="/assets/fonts/inter-500.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/assets/fonts/inter-600.woff2" as="font" type="font/woff2" crossorigin>
@@ -28,7 +30,9 @@ ${STYLESHEET_LINKS}
 <body>
   <a class="skip-link" href="#center" data-i18n="a11y.skip">Skip to task details</a>
   <div class="app">
+    ${appRail("workbench")}
 ${SIDEBAR_HTML}
+    <div id="sidebar-scrim" class="sidebar-scrim"></div>
     <main id="center" class="center" tabindex="-1">
       <div id="detail" class="detail"></div>
     </main>
@@ -36,6 +40,6 @@ ${DOCK_HTML}
   </div>
 ${DIALOGS_HTML}
   <div id="toast" class="toast" role="status" aria-live="polite"></div>
-  <script type="module" src="/assets/app.js"></script>
+  <script type="module" src="/assets/app.js" blocking="render"></script>
 </body>
 </html>`;

package/dist/web/assets/shell/login.js

@@ -1,18 +1,19 @@
 import { DEFAULT_DARK_THEME } from "../shared/themes.js";
+import { BRAND_ICONS, brandGlyphSvg } from "../shared/brand.js";
 import { iconSvg } from "../shared/icons.js";
 // The only document served without a session. It carries no page token and
 // no Task data; the client module posts the password as same-origin JSON and
 // the server answers with a session cookie. CSP form-action 'none' means the
 // form can never submit natively (so a password cannot end up in a URL).
-const SHEETS = ["fonts", "tokens", "base", "ui/controls", "ui/forms", "views/login"];
+const SHEETS = ["fonts", "tokens", "base", "motion", "ui/controls", "ui/forms", "views/login"];
 export const LOGIN_HTML = `<!doctype html>
 <html lang="en" data-theme="${DEFAULT_DARK_THEME.id}">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="color-scheme" content="dark light">
+  <link rel="icon" type="image/svg+xml" href="${BRAND_ICONS[DEFAULT_DARK_THEME.id]}">
   <script src="/assets/theme.js"></script>
-  <link rel="icon" href="data:,">
   <title>Sign in · Yui</title>
   <link rel="preload" href="/assets/fonts/inter-500.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/assets/fonts/inter-600.woff2" as="font" type="font/woff2" crossorigin>
@@ -20,13 +21,13 @@ ${SHEETS.map(name => `  <link rel="stylesheet" href="/assets/css/${name}.css">`)
 </head>
 <body class="login-body">
   <main class="login-shell">
-    <div class="login-top">
-      <label class="login-locale"><span class="sr-only" data-i18n="settings.language">Language</span><select id="locale-select"><option value="en">English</option><option value="zh-CN">简体中文</option></select></label>
-    </div>
     <section class="login-card" aria-labelledby="login-title">
-      <div class="login-brand">
-        <span class="brand-mark" aria-hidden="true">結</span>
-        <span class="brand-name">Yui</span>
+      <div class="login-top">
+        <div class="login-brand">
+          <span class="brand-mark" aria-hidden="true">${brandGlyphSvg()}</span>
+          <span class="brand-name">Yui</span>
+        </div>
+        <label class="login-locale"><span class="sr-only" data-i18n="settings.language">Language</span><select id="locale-select"><option value="en">English</option><option value="zh-CN">简体中文</option></select></label>
       </div>
       <header class="login-heading">
         <h1 id="login-title" data-i18n="login.heading">Sign in to Yui</h1>

package/dist/web/assets/shell/manage.js

@@ -1,51 +1,63 @@
 import { STYLESHEETS } from "../styles/index.js";
 import { DEFAULT_DARK_THEME } from "../shared/themes.js";
+import { BRAND_ICONS } from "../shared/brand.js";
 import { iconSvg } from "../shared/icons.js";
+import { appRail } from "./appRail.js";
 import { MANAGE_SECTIONS } from "../shared/manageNav.js";
-// One frame and entry point for /models/* and /settings/*. The shared router
-// changes sections without unloading their controllers or drafts. Leaving
-// the management document still uses the browser's unsaved-draft prompt.
+// One frame and entry point for /models/* and /settings/*. The frame is the
+// workbench's own: the global rail, a collapsible list (here the current
+// area's sections), and the center column under the shared top bar. Narrow
+// screens open the rail and the list together as a drawer, exactly as on the
+// workbench. The shared router changes sections without unloading their
+// controllers or drafts. Leaving the management document still uses the
+// browser's unsaved-draft prompt.
 const escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
 const sectionLink = (item) => `<a class="manage-link" href="/${item.section === "connection" ? "settings" : item.page}/${item.section}" data-page="${item.page}" data-section="${item.section}"><span data-i18n="${item.key}">${escapeHtml(item.label)}</span><i class="manage-dirty" aria-hidden="true"></i></a>`;
-const area = (name, icon, key, label) => `
+const area = (name, key, label) => `
         <div class="manage-area" data-area-group="${name}">
-          <a class="manage-primary" href="/${name}" data-area="${name}">${iconSvg(icon)}<span data-i18n="${key}">${label}</span></a>
           <div class="manage-sections" role="group" aria-label="${label}" data-i18n-aria-label="${key}">
             ${MANAGE_SECTIONS[name].map(sectionLink).join("\n            ")}
           </div>
         </div>`;
-const RAIL = `<aside class="manage-rail">
-      <header class="manage-rail-head">
-        <a class="brand" href="/" title="Workbench" data-i18n-title="manage.workbench">
-          <span class="brand-mark" aria-hidden="true">結</span><span class="brand-name">Yui</span>
-        </a>
-        <label class="manage-locale"><span class="sr-only" data-i18n="settings.language">Language</span><select id="locale-select"><option value="en">English</option><option value="zh-CN">简体中文</option></select></label>
+const RAIL = `<aside class="manage-rail sidebar" aria-label="Sections" data-i18n-aria-label="manage.sections">
+      <header class="side-head">
+        <h2 id="manage-area-title" class="side-title"></h2>
+        <button id="sidebar-collapse" class="icon-btn side-collapse" type="button" aria-label="Collapse sections" data-i18n-aria-label="manage.collapseSections" title="Collapse sections · [" data-i18n-title="manage.collapseSections">${iconSvg("sidebar")}</button>
       </header>
-      <nav class="manage-nav" aria-label="Main navigation" data-i18n-aria-label="manage.nav">
-        <div class="manage-area" data-area-group="workbench">
-          <a class="manage-primary" href="/" data-area="workbench">${iconSvg("inbox")}<span data-i18n="manage.workbench">Workbench</span></a>
-        </div>${area("models", "layers", "models.title", "Models")}${area("settings", "settings", "settings.title", "Settings")}
+      <nav class="manage-nav" aria-label="Sections" data-i18n-aria-label="manage.sections">${area("models", "models.title", "Models")}${area("settings", "settings.title", "Settings")}
       </nav>
     </aside>`;
+const TOP_BAR = `<header class="top-bar">
+        <button class="icon-btn side-expand" type="button" data-sidebar-toggle="true" aria-expanded="false" aria-label="Show sections" data-i18n-aria-label="manage.showSections" title="Show sections · [" data-i18n-title="manage.showSections"><span class="i-sidebar">${iconSvg("sidebar")}</span><span class="i-menu">${iconSvg("menu")}</span></button>
+        <nav class="crumbs" aria-label="Location" data-i18n-aria-label="crumbs.label"><span id="manage-crumb-area" class="crumb crumb-static"></span><span class="crumb-sep" aria-hidden="true">/</span><span id="manage-crumb-section" class="crumb-current"></span></nav>
+        <span class="spacer"></span>
+        <label class="top-locale"><span class="sr-only" data-i18n="settings.language">Language</span><select id="locale-select"><option value="en">English</option><option value="zh-CN">简体中文</option></select></label>
+      </header>`;
 // One management document. `main` is the page's reading column markup.
 export function manageDocument(options) {
     return `<!doctype html>
 <html lang="en" data-theme="${DEFAULT_DARK_THEME.id}">
 <head>
-  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="yui-web-token" content="__YUI_WEB_TOKEN__">
+  <link rel="icon" type="image/svg+xml" href="${BRAND_ICONS[DEFAULT_DARK_THEME.id]}">
   <script src="/assets/theme.js"></script>
-  <link rel="icon" href="data:,"><title>Yui · ${options.title}</title>
+  <title>Yui · ${options.title}</title>
   ${STYLESHEETS.map(s => `<link rel="stylesheet" href="/assets/css/${s.name}.css">`).join("\n  ")}
 </head>
 <body class="manage-body ${options.page}-body">
-  <div class="manage-app" data-page="${options.page}" hidden>
+  <div class="app manage-app" data-page="${options.page}" hidden>
+    ${appRail(options.page === "models" ? "models" : "settings")}
     ${RAIL}
-    <main class="manage-main" id="manage-main">
+    <div id="sidebar-scrim" class="sidebar-scrim"></div>
+    <main id="manage-scroll" class="center manage-center" tabindex="-1">
+      ${TOP_BAR}
+      <div class="manage-main" id="manage-main">
 ${options.main}
+      </div>
     </main>
   </div>
-  <script type="module" src="/assets/js/app/manage.js"></script>
+  <script type="module" src="/assets/js/app/manage.js" blocking="render"></script>
 </body></html>`;
 }
 // The common section heading: title and one explanatory line.

package/dist/web/assets/shell/settingsContent.js

@@ -10,7 +10,7 @@ export const SETTINGS_MAIN = `
             <fieldset class="field"><legend data-i18n="settings.theme">Theme</legend><div id="theme-options" class="theme-options"></div></fieldset>
             <div class="settings-stack">
               <label class="field"><span data-i18n="settings.language">Language</span><select id="settings-locale"><option value="en">English</option><option value="zh-CN">简体中文</option></select></label>
-              <label class="field"><span data-i18n="settings.accessMode">Default session access</span><select id="access-mode"><option value="native" data-i18n="settings.native">Native terminal</option><option value="structured" data-i18n="settings.structured">Structured view</option></select></label>
+              <label class="field"><span data-i18n="settings.accessMode">Default session access</span><select id="access-mode"><option value="structured" data-i18n="settings.structured">Structured view</option><option value="native" data-i18n="settings.native">Native terminal</option></select></label>
               <p data-i18n="settings.accessHelp">Preference for subsequent session selection where supported. It does not switch a live Session.</p>
               <button id="reset-layout" type="button" class="btn" data-i18n="settings.resetLayout">Reset saved workspace layout</button>
               <p id="browser-receipt" role="status"></p>

package/dist/web/assets/shell/sidebar.js

@@ -6,24 +6,27 @@ import { iconSvg } from "../shared/icons.js";
 // The string keeps its indentation inside .app and has no trailing newline.
 export const SIDEBAR_HTML = `    <aside class="sidebar" aria-label="Tasks" data-i18n-aria-label="sidebar.label">
       <header class="side-head">
-        <div class="brand">
-          <span class="brand-mark" aria-hidden="true">結</span>
-          <span class="brand-name">Yui</span>
-        </div>
+        <h2 class="side-title" data-i18n="sidebar.label">Tasks</h2>
         <span class="sync" id="sync-state" title="Last sync" data-i18n-title="sync.label">
           <i aria-hidden="true"></i><time id="last-sync">—</time>
         </span>
         <button id="refresh" class="icon-btn" type="button" aria-label="Refresh" data-i18n-aria-label="actions.refresh" title="Refresh · R">${iconSvg("refresh")}</button>
+        <button id="sidebar-collapse" class="icon-btn side-collapse" type="button" aria-label="Collapse task list" data-i18n-aria-label="sidebar.collapse" title="Collapse task list · [" data-i18n-title="sidebar.collapse">${iconSvg("sidebar")}</button>
       </header>
-      <button id="create-task" class="btn btn-primary" type="button" data-i18n="create.title">New task</button>
-      <label class="search-field">
-        ${iconSvg("search")}
-        <span class="sr-only" data-i18n="search.label">Search tasks</span>
-        <input id="search" type="search" autocomplete="off" spellcheck="false" placeholder="Search tasks" data-i18n-placeholder="search.placeholder">
-        <kbd>/</kbd>
-      </label>
-      <button id="body-search-open" class="foot-btn" type="button">${iconSvg("search")}<span data-i18n="bodySearch.title">Search task contents</span></button>
-      <div id="attention-bar" class="attention-bar" aria-live="polite"></div>
+      <div class="side-tools">
+        <button id="create-task" class="btn btn-primary side-create" type="button">${iconSvg("plus")}<span data-i18n="create.title">New task</span></button>
+        <div class="side-search">
+          <label class="search-field">
+            ${iconSvg("search")}
+            <span class="sr-only" data-i18n="search.label">Search tasks</span>
+            <input id="search" type="search" autocomplete="off" spellcheck="false" placeholder="Search tasks" data-i18n-placeholder="search.placeholder">
+            <kbd>/</kbd>
+          </label>
+          <button id="body-search-open" class="icon-btn side-search-body" type="button" aria-label="Search task contents" data-i18n-aria-label="bodySearch.title" title="Search task contents" data-i18n-title="bodySearch.title">${iconSvg("textSearch")}</button>
+        </div>
+        <div id="catalog-source" class="seg seg-sm source-seg" role="radiogroup" aria-label="Task category" data-i18n-aria-label="jobs.taskCategory"></div>
+        <div id="attention-bar" class="attention-bar" aria-live="polite"></div>
+      </div>
       <div id="status-filters" class="status-tabs" role="group" aria-label="Filter by status" data-i18n-aria-label="filters.label"></div>
       <div id="task-list" class="task-list" aria-label="Tasks" data-i18n-aria-label="sidebar.label" aria-live="polite"></div>
       <div id="catalog-controls" class="pager" aria-live="polite">
@@ -32,15 +35,5 @@ export const SIDEBAR_HTML = `    <aside class="sidebar" aria-label="Tasks" data-
         <button id="catalog-next" class="pager-btn" type="button" data-i18n="catalog.next" disabled>Next page</button>
         <button id="catalog-attention-reset" class="pager-clear" type="button" data-i18n="catalog.clearAttention" hidden>Clear attention filter</button>
       </div>
-      <footer class="side-foot">
-        <button id="operator-terminal" class="foot-btn" type="button" title="Operator session · O">
-          ${iconSvg("terminal")}<span data-i18n="actions.operator">Operator</span><kbd>O</kbd>
-        </button>
-        <button id="global-input-open" class="foot-btn" type="button" title="Global input" data-i18n-title="global.open">
-          ${iconSvg("broadcast")}<span data-i18n="global.open">Global input</span>
-        </button>
-        <a id="models-open" class="icon-btn" href="/models" aria-label="Models" data-i18n-aria-label="models.title" title="Models" data-i18n-title="models.title">${iconSvg("layers")}</a>
-        <button id="settings-open" class="icon-btn" type="button" aria-label="Settings" data-i18n-aria-label="settings.title" title="Settings">${iconSvg("settings")}</button>
-      </footer>
     </aside>
     <div id="sidebar-divider" class="sidebar-divider" role="separator" tabindex="0" aria-orientation="vertical" aria-valuemin="${SIDEBAR.min}" aria-valuemax="${SIDEBAR.max}" aria-valuenow="${SIDEBAR.compact}" aria-label="Resize task list" data-i18n-aria-label="sidebar.resize" title="Drag to resize · double-click to reset" data-i18n-title="sidebar.resizeHint"><span aria-hidden="true"></span></div>`;

package/dist/web/assets/styles/base.js

@@ -28,7 +28,7 @@ input:disabled,select:disabled,textarea:disabled{opacity:.55}
 ::-webkit-scrollbar-track{background:transparent}
 [hidden]{display:none!important}
 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
-.skip-link{position:fixed;left:12px;top:-60px;z-index:100;padding:9px 14px;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;transition:top var(--t-fast)}
+.skip-link{position:fixed;left:12px;top:-60px;z-index:var(--z-skip);padding:9px 14px;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;transition:top var(--t-fast)}
 .skip-link:focus{top:12px}
 .icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
 .icon-sm{width:14px;height:14px}

package/dist/web/assets/styles/index.js

@@ -3,6 +3,7 @@ import { BASE_STYLES } from "./base.js";
 import { RESPONSIVE_STYLES } from "./layout/responsive.js";
 import { WORKSPACE_STYLES } from "./layout/workspace.js";
 import { MARKDOWN_STYLES } from "./markdown.js";
+import { MOTION_STYLES } from "./motion.js";
 import { TOKEN_STYLES } from "./tokens.js";
 import { CONTROL_STYLES } from "./ui/controls.js";
 import { FORM_STYLES } from "./ui/forms.js";
@@ -29,6 +30,7 @@ export const STYLESHEETS = Object.freeze([
     { name: "fonts", body: FONT_FACE_STYLES },
     { name: "tokens", body: TOKEN_STYLES },
     { name: "base", body: BASE_STYLES },
+    { name: "motion", body: MOTION_STYLES },
     { name: "layout/workspace", body: WORKSPACE_STYLES },
     { name: "ui/controls", body: CONTROL_STYLES },
     { name: "ui/surfaces", body: SURFACE_STYLES },