@kgdiff/viewer 0.2.0 → 0.4.0

package/dist/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzD,eAAO,MAAM,QAAQ,EAAE,SAAS,YAAY,EAM3C,CAAC;AAEF,+DAA+D;AAC/D,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAkDnD;AAUD,eAAO,MAAM,MAAM,QA4iBlB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzD,eAAO,MAAM,QAAQ,EAAE,SAAS,YAAY,EAM3C,CAAC;AAEF,+DAA+D;AAC/D,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAkDnD;AAUD,eAAO,MAAM,MAAM,QAmkBlB,CAAC"}

package/dist/styles.js

@@ -78,6 +78,8 @@ export const STYLES = /* css */ `
   -webkit-font-smoothing: antialiased;
 }
 :host([hidden]) { display: none; }
+/* chrome="none" shows the graph alone: small embeds (a 320 px strip) are fine. */
+:host([chrome="none"]) { min-height: 120px; }
 *, *::before, *::after { box-sizing: border-box; }
 [hidden] { display: none !important; }
 button, input { font: inherit; color: inherit; letter-spacing: inherit; }
@@ -107,7 +109,7 @@ kbd {
   background: var(--kg-bg);
 }
 .body { position: relative; flex: 1; min-height: 0; display: flex; }
-.stage-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: var(--kg-bg); }
+.stage-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: var(--kg-bg); container-type: inline-size; }
 .stage { position: absolute; inset: 0; }
 .stage canvas { outline: none; }
 .stage canvas:focus-visible { outline: 2px solid var(--kg-accent); outline-offset: -2px; }
@@ -134,17 +136,22 @@ kbd {
 .link-btn { min-height: 28px; color: var(--kg-accent-text); font-weight: 500; font-size: 12px; border-radius: 4px; }
 .link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
 
-/* ── Header ──────────────────────────────────────────────────────────────── */
-.header {
-  position: relative; z-index: 3; flex: none; height: 52px; display: flex; align-items: center; gap: 12px;
-  padding: 0 10px 0 14px; background: var(--kg-panel); border-bottom: 1px solid var(--kg-border);
-}
+/* ── HUD: title (top-left) and actions (top-right), over the canvas ──────── */
+.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
+.hud > * { pointer-events: auto; }
+.hud-title {
+  position: absolute; top: 12px; left: 12px; max-width: calc(100% - 184px); height: 40px;
+  display: flex; align-items: center; gap: 10px; padding: 0 14px 0 10px;
+}
+.hud[data-titled="false"] .header-sep { display: none; }
+:host([header="compact"]) .hud-title { display: none; }
+.hud-end { position: absolute; top: 12px; right: 12px; }
+.hud-actions { display: flex; align-items: center; gap: 2px; padding: 4px; }
 .brand { display: flex; align-items: center; gap: 8px; flex: none; color: var(--kg-text); }
 .brand-mark { width: 20px; height: 20px; display: block; }
 .brand-name { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
-.header-sep { width: 1px; height: 20px; background: var(--kg-border-strong); flex: none; }
-.versions { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 0; font-size: 13px; overflow: hidden;
-  mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent); }
+.header-sep { width: 1px; height: 18px; background: var(--kg-border-strong); flex: none; }
+.versions { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; font-size: 13px; overflow: hidden; }
 .versions .name { font-weight: 550; color: var(--kg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 .versions .arrow { color: var(--kg-text-3); flex: none; }
 .versions .side { display: flex; align-items: center; gap: 6px; min-width: 0; }
@@ -153,16 +160,9 @@ kbd {
   font: 500 11px/1 var(--kg-mono); color: var(--kg-text-2); background: var(--kg-hover);
   box-shadow: inset 0 0 0 1px var(--kg-border); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
 }
-.header-center { flex: none; display: flex; justify-content: center; }
-/* header="compact": no brand or names (the host shows them); the names keep their space so the
-   mode control stays centered. */
-:host([header="compact"]) .brand, :host([header="compact"]) .header-sep { display: none; }
-:host([header="compact"]) .versions { visibility: hidden; }
-.header-end { display: flex; align-items: center; gap: 4px; flex: 1 0 auto; justify-content: flex-end; }
-.stats { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
 
 .segmented {
-  position: relative; display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 2px;
+  position: relative; display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 2px; flex: none;
   border-radius: 9px; background: var(--kg-hover); box-shadow: inset 0 0 0 1px var(--kg-border);
 }
 .segmented .thumb {
@@ -179,17 +179,6 @@ kbd {
 .seg[aria-checked="true"] { color: var(--kg-text); }
 .seg .icon { opacity: 0.9; }
 
-.pill {
-  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; border-radius: 14px;
-  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
-  transition: box-shadow var(--kg-fast) var(--kg-ease), background var(--kg-fast) var(--kg-ease), opacity var(--kg-fast) var(--kg-ease);
-}
-.stat { color: var(--fam-text); background: var(--fam-soft); box-shadow: inset 0 0 0 1px transparent; }
-.stat:hover { box-shadow: inset 0 0 0 1px var(--fam-base); }
-.stat[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--fam-base); }
-.stats.filtering .stat[aria-pressed="false"] { opacity: 0.55; }
-.stat .glyph { font-weight: 700; }
-
 
 ${familyRules}
 
@@ -199,7 +188,6 @@ ${familyRules}
   backdrop-filter: blur(16px) saturate(140%);
 }
 .float { position: absolute; }
-.top-left { top: 12px; left: 12px; }
 .bottom-left { bottom: 16px; left: 16px; }
 .bottom-right { bottom: 16px; right: 16px; }
 .chip {
@@ -210,7 +198,10 @@ ${familyRules}
 .map-cluster { display: flex; align-items: flex-end; gap: 8px; }
 .zoom-bar { display: flex; flex-direction: column; padding: 2px; gap: 2px; }
 .zoom-bar .icon-btn { width: 30px; height: 30px; }
-.minimap-host { position: relative; width: 184px; height: 128px; border-radius: 12px; box-shadow: 0 0 0 1px var(--kg-border); }
+.minimap-host { position: relative; width: 184px; height: 128px; border-radius: 12px; box-shadow: 0 0 0 1px var(--kg-border);
+  animation: fade var(--kg-base) var(--kg-ease); }
+/* Everything is in view: the minimap has nothing to add. */
+.minimap-host[data-hidden="true"] { display: none; }
 .minimap-host canvas { border-radius: 12px; }
 
 .legend { padding: 6px; min-width: 0; }
@@ -225,30 +216,60 @@ ${familyRules}
 .legend-row { display: grid; grid-template-columns: 22px auto; align-items: center; column-gap: 8px; height: 26px; padding: 0 10px 0 4px; border-radius: 6px; cursor: default; }
 .legend-row .name { font-size: 12px; font-weight: 550; color: var(--kg-text); }
 .swatch { width: 22px; height: 22px; display: block; }
+.mini-legend { display: none; }
+.stage-wrap[data-legend="mini"] .mini-legend {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; bottom: 8px; left: 12px; max-width: calc(100% - 24px);
+  font-size: 11px; line-height: 16px; color: var(--kg-text-2);
+}
+.mini-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
+.mini-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--fam-base); }
+.mini-item[data-family="removed"] .dot { background: none; box-shadow: inset 0 0 0 1.5px var(--fam-base); }
+.stage-wrap[data-legend="mini"] .legend, .stage-wrap[data-legend="none"] .legend { display: none; }
 
 .caption {
-  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); max-width: min(560px, calc(100% - 200px));
-  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; font-size: 12.5px; font-weight: 550;
-  transition: opacity var(--kg-base) var(--kg-ease);
+  max-width: min(560px, 100%); display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px;
+  font-size: 12.5px; font-weight: 550;
 }
 .caption .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .caption .count { color: var(--kg-text-3); font-weight: 500; font-variant-numeric: tabular-nums; flex: none; }
-.caption[data-empty="true"] { opacity: 0; pointer-events: none; }
+.caption[data-empty="true"] { display: none; }
 
 .glyph-box {
   display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 6px;
   font-size: 12px; font-weight: 700; line-height: 1; color: var(--fam-text); background: var(--fam-soft);
 }
 
-.stepper { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 4px 0 12px; }
-.stepper .label { font-size: 12px; font-weight: 550; color: var(--kg-text-2); }
-.stepper .opts { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--kg-hover); }
-.stepper .opt { width: 28px; height: 28px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--kg-text-2); font-variant-numeric: tabular-nums; }
-.stepper .opt:hover { color: var(--kg-text); }
-.stepper .expand { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 8px; margin-left: 4px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--kg-text-2); box-shadow: inset 0 0 0 1px var(--kg-border-strong); font-variant-numeric: tabular-nums; }
-.stepper .expand:hover:not(:disabled) { color: var(--kg-text); background: var(--kg-hover); }
-.stepper .expand .icon { width: 14px; height: 14px; }
-.stepper .opt[aria-checked="true"] { background: var(--kg-raised); color: var(--kg-text); box-shadow: inset 0 0 0 1px var(--kg-border-strong); }
+/* View dock (bottom center): replay's finished pill, caption and transport stack above the bar. */
+.chrome > .dock {
+  position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: center;
+  gap: 8px; pointer-events: none;
+}
+.dock > * { pointer-events: auto; }
+.dock-bar { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 6px; max-width: 100%; }
+.dock-sep { width: 1px; height: 20px; margin: 0 2px; flex: none; background: var(--kg-border-strong); }
+.scope-btn {
+  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; flex: none;
+  font-size: 12.5px; font-weight: 500; color: var(--kg-text-2); white-space: nowrap;
+  transition: background var(--kg-fast) var(--kg-ease), color var(--kg-fast) var(--kg-ease), box-shadow var(--kg-fast) var(--kg-ease);
+}
+.scope-btn:hover { color: var(--kg-text); background: var(--kg-hover); }
+.scope-btn[aria-pressed="true"] { color: var(--kg-accent-text); background: var(--kg-accent-soft); box-shadow: inset 0 0 0 1px var(--kg-accent-soft); }
+.scope-btn[aria-disabled="true"] { cursor: default; }
+.context { display: inline-flex; align-items: center; gap: 8px; padding-left: 2px; flex: none; animation: reveal var(--kg-base) var(--kg-ease); }
+@keyframes reveal { from { opacity: 0; transform: translateX(-6px); } }
+.context .label { font-size: 12px; font-weight: 550; color: var(--kg-text-3); white-space: nowrap; }
+.context .opts { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--kg-hover); }
+.context .opt { width: 28px; height: 28px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--kg-text-2); font-variant-numeric: tabular-nums; }
+.context .opt:hover { color: var(--kg-text); }
+.context .opt[aria-checked="true"] { background: var(--kg-raised); color: var(--kg-text); box-shadow: inset 0 0 0 1px var(--kg-border-strong); }
+.context .expand { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 8px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--kg-text-2); box-shadow: inset 0 0 0 1px var(--kg-border-strong); font-variant-numeric: tabular-nums; }
+.context .expand:hover:not(:disabled) { color: var(--kg-text); background: var(--kg-hover); }
+.context .expand .icon { width: 14px; height: 14px; }
+/* Narrower canvases keep the dock clear of the legend and the minimap: labels give way to icons
+   (each control keeps its name as a tooltip). */
+@container (max-width: 1180px) { .context .label { display: none; } }
+@container (max-width: 1000px) { .dock-bar .seg .lbl { display: none; } .dock-bar .seg { padding: 0 9px; } }
+@container (max-width: 640px) { .scope-btn .lbl { display: none; } .scope-btn { padding: 0 9px; } }
 
 /* Swipe */
 .swipe { position: absolute; inset: 0; pointer-events: none; }
@@ -268,14 +289,14 @@ ${familyRules}
 .swipe .divider:hover .handle, .swipe .divider.dragging .handle { transform: scale(1.08); }
 .swipe .divider:focus-visible { outline: none; }
 .swipe .divider:focus-visible .handle { box-shadow: var(--kg-shadow), 0 0 0 2px var(--kg-accent), 0 0 0 5px var(--kg-accent-soft); }
-.swipe .side-chip { position: absolute; top: 12px; pointer-events: none; }
+/* Below the HUD's title and actions. */
+.swipe .side-chip { position: absolute; top: 64px; pointer-events: none; }
 .swipe .side-chip.before { left: 12px; }
 .swipe .side-chip.after { right: 12px; }
 
-/* Replay transport */
+/* Replay transport (in the dock, clear of the legend and the minimap) */
 .transport {
-  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(600px, calc(100% - 496px));
-  min-width: 360px;
+  width: min(600px, calc(100% - 464px)); min-width: min(360px, 100%);
   display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 8px;
 }
 .transport .play { width: 36px; height: 36px; border-radius: 10px; color: var(--kg-text); }
@@ -298,12 +319,12 @@ ${familyRules}
   display: flex; align-items: center; gap: 6px;
 }
 .finished {
-  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
+  display: flex; align-items: center; gap: 10px;
   height: 36px; padding: 0 6px 0 12px; font-size: 12.5px; font-weight: 550; color: var(--kg-text);
   animation: rise var(--kg-base) var(--kg-ease);
 }
 .finished .icon { color: var(--kg-accent-text); }
-@keyframes rise { from { opacity: 0; transform: translate(-50%, 6px); } }
+@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
 
 /* Tooltip */
 .tooltip {
@@ -401,7 +422,7 @@ ${familyRules}
   transition: background var(--kg-fast) var(--kg-ease), box-shadow var(--kg-fast) var(--kg-ease), color var(--kg-fast) var(--kg-ease);
 }
 .fchip:hover { background: var(--kg-hover); color: var(--kg-text); }
-.fchip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fam-base); flex: none; }
+.fchip .swatch { width: 16px; height: 16px; margin: 0 -1px; }
 .fchip .n { color: var(--kg-text-3); font-variant-numeric: tabular-nums; font-weight: 500; }
 .fchip[aria-pressed="true"] { background: var(--fam-soft); color: var(--fam-text); box-shadow: inset 0 0 0 1px var(--fam-base); }
 .fchip[aria-pressed="true"] .n { color: var(--fam-text); opacity: 0.8; }
@@ -555,7 +576,7 @@ ins.hl { text-decoration: none; background: var(--kg-added-soft); color: var(--k
 
 /* ── Popovers ────────────────────────────────────────────────────────────── */
 .menu {
-  position: absolute; z-index: 10; top: 48px; right: 10px; width: 240px; padding: 6px; border-radius: 12px;
+  position: absolute; z-index: 10; top: calc(100% + 8px); right: 0; width: 240px; padding: 6px; border-radius: 12px;
   animation: pop var(--kg-fast) var(--kg-ease);
 }
 @keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@@ -583,6 +604,11 @@ ins.hl { text-decoration: none; background: var(--kg-added-soft); color: var(--k
 .key-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; border-bottom: 1px solid var(--kg-border); font-size: 12.5px; color: var(--kg-text-2); }
 .key-row .ks { display: inline-flex; align-items: center; gap: 3px; flex: none; color: var(--kg-text-3); font-size: 11px; }
 
+/* ── chrome="none": the graph, its hover tooltip and the legend line only ──── */
+.root[data-chrome="none"] .hud, .root[data-chrome="none"] .sidebar, .root[data-chrome="none"] .dock,
+.root[data-chrome="none"] .map-cluster, .root[data-chrome="none"] .side-chip { display: none !important; }
+.stage-wrap[data-selectable="false"] .tooltip .t-hint { display: none; }
+
 /* ── Compact (< 760 px): bottom sheet ────────────────────────────────────── */
 .root[data-compact="true"] .body { flex-direction: column; }
 .root[data-compact="true"] .sidebar {
@@ -598,20 +624,17 @@ ins.hl { text-decoration: none; background: var(--kg-added-soft); color: var(--k
 }
 .root[data-compact="true"] .sheet-handle::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--kg-control-border); }
 .root[data-compact="true"] .sb-head { padding-top: 4px; }
-.root[data-compact="true"] .seg .lbl { display: none; }
-.root[data-compact="true"] .seg { padding: 0 9px; }
-.root[data-compact="true"] .versions, .root[data-compact="true"] .header-sep, .root[data-compact="true"] .stats,
+.root[data-compact="true"] .versions, .root[data-compact="true"] .header-sep,
 .root[data-compact="true"] .brand-name { display: none; }
-.root[data-compact="true"] .header-center { flex: 1; justify-content: flex-start; }
-.root[data-compact="true"] .header-end { flex: none; }
+.root[data-compact="true"] .hud-title { padding: 0 10px; }
 .root[data-compact="true"] .minimap-host, .root[data-compact="true"] .legend { display: none; }
-/* Zoom controls move to the top-right corner, clear of the full-width replay transport. */
-.root[data-compact="true"] .map-cluster { top: 52px; bottom: auto; right: 12px; }
-.root[data-compact="true"] .transport { bottom: 24px; width: calc(100% - 24px); min-width: 0; }
+/* Zoom controls move under the actions, clear of the full-width replay transport. */
+.root[data-compact="true"] .map-cluster { top: 64px; bottom: auto; right: 12px; }
+/* The bottom sheet's rounded top overlaps the canvas. */
+.root[data-compact="true"] .chrome > .dock { left: 12px; right: 12px; bottom: 26px; }
+.root[data-compact="true"] .transport { width: 100%; min-width: 0; }
 .root[data-compact="true"] .transport .pos { min-width: 48px; }
 .root[data-compact="true"] .detail { max-height: 50%; }
-.root[data-compact="true"] .caption { max-width: calc(100% - 24px); }
-.root[data-narrow="true"] .stats { display: none; }
 .root[data-narrow="true"] .versions .tag, .root[data-narrow="true"] .versions .arrow { display: none; }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,QAAQ,GAA4B;IAC/C,OAAO;IACP,SAAS;IACT,SAAS;IACT,WAAW;IACX,UAAU;CACX,CAAC;AAEF,+DAA+D;AAC/D,MAAM,UAAU,cAAc,CAAC,KAAY;IACzC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC;IACnC,MAAM,IAAI,GAA2B;QACnC,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QACvC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;QAClC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QAC9B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QACjC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM;QACnC,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;QACrC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM;QACnC,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QAChD,qBAAqB,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa;QAClD,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM;QACnC,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;QAC/B,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS;QACnC,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK;QAC/B,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QAChC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;QACzC,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QACrC,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QACrC,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;QAClC,qBAAqB,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;QAC/C,mBAAmB,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;QACvC,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM;QAC9B,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI;QAC5B,WAAW,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI;QACrC,WAAW,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI;QACrC,WAAW,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI;QACrC,WAAW,EAAE,gBAAgB,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;QAC9D,gFAAgF;QAChF,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB;QACtE,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,qBAAqB;QACrE,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACrD,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACxD,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB;QAChE,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,qBAAqB;QACxE,kBAAkB,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,qBAAqB;QAC3E,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,qBAAqB;QACrE,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,qBAAqB;KACpE,CAAC;IACF,KAAK,MAAM,CAAC,IAAI,QAAQ,EAAE,CAAC;QACzB,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;QAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;QACpC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;QAChC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;IAClC,CAAC;IACD,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SACxB,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;SAC9B,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,GAAG,QAAQ,EAAE,SAAkB,CAAC;KAClD,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACT,CAAC,KAAK,SAAS;IACb,CAAC,CAAC,uHAAuH;IACzH,CAAC,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,2BAA2B,CAAC,gCAAgC,CAAC,WAAW,CAC7H;KACA,IAAI,CAAC,IAAI,CAAC,CAAC;AAEd,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiI9B,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2aZ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"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"}

package/dist/ui/context.d.ts

@@ -11,6 +11,8 @@ export interface UiContext {
     readonly controller: ViewerController;
     readonly tr: () => Translator;
     setMode(mode: ViewerMode): void;
+    /** Toggle the `changes` scope (explains itself when it is locked). */
+    toggleScope(): void;
     setThemePreference(pref: ThemePreference): void;
     setPalette(palette: PaletteName): void;
     setLocale(locale: Locale): void;

package/dist/ui/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/ui/context.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/D,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC;IACtC,QAAQ,CAAC,EAAE,EAAE,MAAM,UAAU,CAAC;IAC9B,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,kBAAkB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IAChD,UAAU,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACpC,WAAW,IAAI,OAAO,CAAC;IACvB,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,QAAQ,IAAI,IAAI,CAAC;IACjB,WAAW,IAAI,IAAI,CAAC;IACpB,sDAAsD;IACtD,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;CAC3B;AAED,uFAAuF;AACvF,wBAAgB,SAAS,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,GAAG,MAAM,CAiBtE;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,CAEnD;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAOhE;AAED,iEAAiE;AACjE,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,EAAE,GAAG,IAAI,CAQvE"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/ui/context.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/D,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC;IACtC,QAAQ,CAAC,EAAE,EAAE,MAAM,UAAU,CAAC;IAC9B,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,sEAAsE;IACtE,WAAW,IAAI,IAAI,CAAC;IACpB,kBAAkB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IAChD,UAAU,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACpC,WAAW,IAAI,OAAO,CAAC;IACvB,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,QAAQ,IAAI,IAAI,CAAC;IACjB,WAAW,IAAI,IAAI,CAAC;IACpB,sDAAsD;IACtD,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;CAC3B;AAED,uFAAuF;AACvF,wBAAgB,SAAS,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,GAAG,MAAM,CAiBtE;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,CAEnD;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAOhE;AAED,iEAAiE;AACjE,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,EAAE,GAAG,IAAI,CAQvE"}

package/dist/ui/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/ui/context.ts"],"names":[],"mappings":"AA0BA,uFAAuF;AACvF,MAAM,UAAU,SAAS,CAAC,IAAc,EAAE,MAAoB;IAC5D,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,KAAK;YACR,OAAO,GAAG,CAAC;QACb,KAAK,QAAQ;YACX,OAAO,GAAG,CAAC;QACb,KAAK,OAAO;YACV,OAAO,GAAG,CAAC;QACb,KAAK,OAAO;YACV,OAAO,GAAG,CAAC;QACb,KAAK,WAAW;YACd,OAAO,GAAG,CAAC;QACb,KAAK,QAAQ;YACX,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAC1E;YACE,OAAO,GAAG,CAAC;IACf,CAAC;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,CAAY;IACzC,OAAO,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,sDAAsD;AACtD,MAAM,UAAU,WAAW,CAAC,KAA4B;IACtD,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,EAAE,CAAC;IACnC,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,MAAM,CAAC;IAClC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IAC5C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,SAAS;QAAE,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IAClF,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAc,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1F,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC;AAED,iEAAiE;AACjE,MAAM,UAAU,SAAS,CAAC,KAA4B;IACpD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACvC,MAAM,GAAG,GAAa,EAAE,CAAC;IACzB,KAAK,MAAM,CAAC,IAAI,KAA6B,EAAE,CAAC;QAC9C,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QACrD,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/ui/context.ts"],"names":[],"mappings":"AA4BA,uFAAuF;AACvF,MAAM,UAAU,SAAS,CAAC,IAAc,EAAE,MAAoB;IAC5D,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,KAAK;YACR,OAAO,GAAG,CAAC;QACb,KAAK,QAAQ;YACX,OAAO,GAAG,CAAC;QACb,KAAK,OAAO;YACV,OAAO,GAAG,CAAC;QACb,KAAK,OAAO;YACV,OAAO,GAAG,CAAC;QACb,KAAK,WAAW;YACd,OAAO,GAAG,CAAC;QACb,KAAK,QAAQ;YACX,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAC1E;YACE,OAAO,GAAG,CAAC;IACf,CAAC;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,CAAY;IACzC,OAAO,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,sDAAsD;AACtD,MAAM,UAAU,WAAW,CAAC,KAA4B;IACtD,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,EAAE,CAAC;IACnC,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,MAAM,CAAC;IAClC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IAC5C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,SAAS;QAAE,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IAClF,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAc,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1F,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC;AAED,iEAAiE;AACjE,MAAM,UAAU,SAAS,CAAC,KAA4B;IACpD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACvC,MAAM,GAAG,GAAa,EAAE,CAAC;IACzB,KAAK,MAAM,CAAC,IAAI,KAA6B,EAAE,CAAC;QAC9C,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QACrD,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/ui/dock.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The view dock, floating at the bottom of the canvas. It holds two independent choices: how
+ * the versions are compared (overlay / swipe / replay, one at a time, keys `1`–`3`) and whether
+ * only the changes are shown (key `4`, in any mode). The latter brings its context hops and the
+ * nearest “+N” expansion along. Replay's caption and transport stack above it (`stage.ts`).
+ */
+import type { Topic } from '../controller.js';
+import type { UiContext } from './context.js';
+export declare class Dock {
+    #private;
+    readonly el: HTMLElement;
+    constructor(ctx: UiContext);
+    update(topics: ReadonlySet<Topic>): void;
+    /** Re-measure the segmented thumb (fonts / size changes). */
+    layout(): void;
+}
+//# sourceMappingURL=dock.d.ts.map

package/dist/ui/dock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dock.d.ts","sourceRoot":"","sources":["../../src/ui/dock.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQ9C,qBAAa,IAAI;;IACf,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC;IAYzB,YAAY,GAAG,EAAE,SAAS,EA+EzB;IAED,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAOvC;IAED,6DAA6D;IAC7D,MAAM,IAAI,IAAI,CAEb;CAyEF"}

package/dist/ui/dock.js

@@ -0,0 +1,151 @@
+import { attr, h, icon, relabel, setText } from '../dom.js';
+const MODES = [
+    { mode: 'overlay', icon: 'overlay', key: '1' },
+    { mode: 'swipe', icon: 'swipe', key: '2' },
+    { mode: 'replay', icon: 'replay', key: '3' },
+];
+export class Dock {
+    el;
+    #seg;
+    #thumb;
+    #segButtons = new Map();
+    #scopeButton;
+    #context;
+    #opts;
+    #hopButtons = [];
+    #expandButton;
+    #ctx;
+    constructor(ctx) {
+        this.#ctx = ctx;
+        const c = ctx.controller;
+        this.#thumb = h('span', { class: 'thumb', 'aria-hidden': 'true' });
+        this.#seg = h('div', { class: 'segmented', role: 'radiogroup' }, this.#thumb);
+        for (const m of MODES) {
+            const b = h('button', {
+                type: 'button',
+                class: 'seg',
+                role: 'radio',
+                'data-mode': m.mode,
+                onclick: () => ctx.setMode(m.mode),
+            }, icon(m.icon), h('span', { class: 'lbl' }));
+            this.#segButtons.set(m.mode, b);
+            this.#seg.appendChild(b);
+        }
+        this.#seg.addEventListener('keydown', (e) => this.#onSegKey(e));
+        this.#scopeButton = h('button', {
+            type: 'button',
+            class: 'scope-btn',
+            'aria-pressed': 'false',
+            'aria-keyshortcuts': '4',
+            onclick: () => ctx.toggleScope(),
+        }, icon('changes'), h('span', { class: 'lbl' }));
+        // Context hops (0 / 1 / 2) and the nearest collapsed group: only with the changes scope.
+        this.#opts = h('span', { class: 'opts', role: 'radiogroup' });
+        for (let n = 0; n <= 2; n++) {
+            const b = h('button', {
+                type: 'button',
+                class: 'opt',
+                role: 'radio',
+                text: String(n),
+                onclick: () => c.setHops(n),
+            });
+            this.#hopButtons.push(b);
+            this.#opts.appendChild(b);
+        }
+        this.#opts.addEventListener('keydown', (e) => {
+            if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            const next = Math.max(0, Math.min(2, c.hops + (e.key === 'ArrowRight' ? 1 : -1)));
+            c.setHops(next);
+            this.#hopButtons[next]?.focus();
+        });
+        this.#expandButton = h('button', { type: 'button', class: 'expand', onclick: () => c.expandNearest() }, icon('plus'), h('span', { class: 'n' }));
+        this.#context = h('div', { class: 'context', hidden: true }, h('span', { class: 'label' }), this.#opts, this.#expandButton);
+        this.el = h('div', { class: 'dock-bar card', role: 'group' }, this.#seg, h('span', { class: 'dock-sep', 'aria-hidden': 'true' }), this.#scopeButton, this.#context);
+    }
+    update(topics) {
+        const all = topics.has('status') || topics.has('data') || topics.has('locale');
+        if (all)
+            this.#renderLabels();
+        if (all || topics.has('mode'))
+            this.#renderMode();
+        if (all || topics.has('mode') || topics.has('focus') || topics.has('selection')) {
+            this.#renderScope();
+        }
+    }
+    /** Re-measure the segmented thumb (fonts / size changes). */
+    layout() {
+        this.#renderMode();
+    }
+    #renderLabels() {
+        const tr = this.#ctx.tr();
+        attr(this.el, 'aria-label', tr.t('dock.label'));
+        attr(this.#seg, 'aria-label', tr.t('mode.label'));
+        for (const m of MODES) {
+            const b = this.#segButtons.get(m.mode);
+            const label = tr.t(`mode.${m.mode}`);
+            setText(b.querySelector('.lbl'), label);
+            attr(b, 'title', `${label} (${m.key})`);
+            attr(b, 'aria-label', label);
+        }
+        setText(this.#scopeButton.querySelector('.lbl'), tr.t('mode.changes'));
+        attr(this.#scopeButton, 'aria-label', tr.t('mode.changes'));
+        setText(this.#context.querySelector('.label'), tr.t('focus.context'));
+        attr(this.#opts, 'aria-label', tr.t('focus.hops'));
+    }
+    #renderMode() {
+        const mode = this.#ctx.controller.mode;
+        for (const [m, b] of this.#segButtons) {
+            const on = m === mode;
+            attr(b, 'aria-checked', String(on));
+            b.tabIndex = on ? 0 : -1;
+        }
+        const active = this.#segButtons.get(mode);
+        if (active && active.offsetWidth > 0) {
+            this.#thumb.style.width = `${active.offsetWidth}px`;
+            this.#thumb.style.transform = `translateX(${active.offsetLeft}px)`;
+        }
+    }
+    #renderScope() {
+        const c = this.#ctx.controller;
+        const tr = this.#ctx.tr();
+        const on = c.scope === 'changes';
+        const locked = c.scopeLocked;
+        attr(this.#scopeButton, 'aria-pressed', String(on));
+        attr(this.#scopeButton, 'aria-disabled', locked ? 'true' : null);
+        attr(this.#scopeButton, 'title', locked ? tr.t('scope.locked') : `${tr.t('scope.hint')} (4)`);
+        this.#context.hidden = !on;
+        // The dock's width changed: keep the thumb under the active mode.
+        this.#renderMode();
+        if (!on)
+            return;
+        this.#hopButtons.forEach((b, n) => {
+            attr(b, 'aria-checked', String(n === c.hops));
+            b.tabIndex = n === c.hops ? 0 : -1;
+            attr(b, 'aria-label', `${tr.t('focus.hops')}: ${n}`);
+        });
+        const group = c.focus?.collapsed[c.nearestGroup()];
+        this.#expandButton.hidden = !group;
+        if (group) {
+            const usable = c.canExpand(c.nearestGroup()) || group.nodes.length > 0;
+            this.#expandButton.disabled = !usable;
+            setText(this.#expandButton.querySelector('.n'), tr.num(group.count));
+            relabel(this.#expandButton, `${usable ? tr.t('focus.expandNearest') : tr.t('focus.expandUnavailable')}: ${group.label} (E)`);
+        }
+    }
+    #onSegKey(e) {
+        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const i = MODES.findIndex((m) => m.mode === this.#ctx.controller.mode);
+        const next = MODES[(i + (e.key === 'ArrowRight' ? 1 : MODES.length - 1)) % MODES.length];
+        if (!next)
+            return;
+        this.#ctx.setMode(next.mode);
+        this.#segButtons.get(next.mode)?.focus();
+    }
+}
+//# sourceMappingURL=dock.js.map

package/dist/ui/dock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dock.js","sourceRoot":"","sources":["../../src/ui/dock.ts"],"names":[],"mappings":"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"}

package/dist/ui/header.d.ts

@@ -1,3 +1,8 @@
+/**
+ * The canvas HUD: the title (brand and compared versions) floating top-left, the actions
+ * (appearance menu, help, sidebar toggle) floating top-right. Both stay up while loading and on
+ * errors. How the diff is viewed is chosen in the dock at the bottom (`dock.ts`).
+ */
 import type { Topic } from '../controller.js';
 import type { UiContext } from './context.js';
 export declare class Header {
@@ -5,9 +10,9 @@ export declare class Header {
     readonly el: HTMLElement;
     readonly menuButton: HTMLButtonElement;
     constructor(ctx: UiContext);
+    /** Place the appearance menu under the actions. */
+    attachMenu(menu: HTMLElement): void;
     update(topics: ReadonlySet<Topic>): void;
-    /** Re-measure the segmented thumb (fonts / size changes). */
-    layout(): void;
     setSidebarState(open: boolean): void;
     setMenuState(open: boolean): void;
 }

package/dist/ui/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/ui/header.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAK9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAkC9C,qBAAa,MAAM;;IACjB,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC;IAOzB,QAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC;IAQvC,YAAY,GAAG,EAAE,SAAS,EAsEzB;IAED,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAsBvC;IAED,6DAA6D;IAC7D,MAAM,IAAI,IAAI,CAEb;IAED,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAEnC;IAED,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAEhC;CA8GF"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/ui/header.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAa9C,qBAAa,MAAM;;IACjB,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC;IAUvC,YAAY,GAAG,EAAE,SAAS,EAqCzB;IAED,mDAAmD;IACnD,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAElC;IAED,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CASvC;IAED,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAEnC;IAED,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAEhC;CAsDF"}