@fasl-work/caos-app-shell 0.15.0 → 0.16.0

package/bin/caos-shell-gate.mjs

@@ -8,20 +8,24 @@
 //   npx caos-shell-gate --url https://contraste.fasl-work.com --expect-brand "Contraste"     the deployed origin
 // Options:
 //   --base-path /Repo/           the site's base path with --serve (a project page); default /
+//   --spa-fallback               with --serve, answer as nginx does for a single-page app (try_files $uri $uri/ /index.html): an extensionless
+//                                path that matches no file gets index.html with 200; a path with an extension stays 404; default off (Pages)
 //   --routes /,/methodology      the routes; default: read from the header navigation
-//   --workbench /app             the routes that carry the case workbench; default /app
+//   --workbench /app             the routes that carry the case workbench; default /app; '' for a product whose App is a SurfacePage
+//   --app-route /app             the App route measured as a surface when --workbench is '' (G18 walks its views' Focus mode); default /app
 //   --sizes 390x844,...,2560x1440  --themes light,dark  --langs en,es
 //   --case-sample id1,id2        cases walked outside the primary mode; default the first and the last
 //   --single-case                the workbench has one case and no case control
 //   --idle-ms 3000  --settle-ms 15000  --text-floor 400  --instrument-min 0.5  --stage-fill-min 0.3  --stage-floor 140
 //   --wide-font-sizes 390x844,1280x800   the sizes of the wide-font pass (G10); --no-wide-font skips it
-//   --require-focus              fail an App without a Focus control (G18; ADR-0070 requires one in a product with simulations)
+//   --require-focus              fail an App without a Focus control (G18; ADR-0070 requires one in a product with simulations); on a surface
+//                                App, one with no view that offers it
 //   --out gate-output            report (gate-report.json), screenshots (shots/) and the capture index (index.html)
 // Needs `playwright` in the consuming project (optional peer dependency). Exit 1 on any failure, 2 on misuse.
 
 import { runGate } from '../gate/run.mjs';
 
-const FLAGS = new Set(['single-case', 'no-wide-font', 'require-focus']);
+const FLAGS = new Set(['single-case', 'no-wide-font', 'require-focus', 'spa-fallback']);
 const args = {};
 const argv = process.argv.slice(2);
 for (let i = 0; i < argv.length; i += 1) {
@@ -40,12 +44,14 @@ const options = {
   expectBrand: args['expect-brand'],
   routes: args.routes,
   workbench: args.workbench,
+  appRoute: args['app-route'],
   sizes: args.sizes,
   themes: args.themes,
   langs: args.langs,
   caseSample: args['case-sample'],
   singleCase: args['single-case'] === true,
   requireFocus: args['require-focus'] === true,
+  spaFallback: args['spa-fallback'] === true,
   idleMs: num('idle-ms'),
   settleMs: num('settle-ms'),
   textFloor: num('text-floor'),

package/dist/index.d.ts

@@ -53,7 +53,8 @@ declare function WorkbenchShell({ brand, routes, navigationLabel, children, side
 
 interface FocusShellProps {
     stage: ReactNode;
-    rail: ReactNode;
+    /** The parameter column on the right. Null or omitted: no column, and the stage is the whole frame (a view of a surface with no rail). */
+    rail?: ReactNode;
     title: string;
     description: string;
     hud: Array<{
@@ -275,10 +276,84 @@ interface CaseSelectorProps {
  */
 declare function CaseSelector(props: CaseSelectorProps): react.JSX.Element;
 
+/** The words Focus mode writes (the product writes none of them). */
+declare const FOCUS_TEXT: {
+    readonly enter: {
+        readonly en: "Focus";
+        readonly es: "Enfocar";
+    };
+    readonly enterLabel: {
+        readonly en: "Open this case in focus mode";
+        readonly es: "Abrir este caso en modo enfoque";
+    };
+    readonly enterViewLabel: {
+        readonly en: "Open this view in focus mode";
+        readonly es: "Abrir esta vista en modo enfoque";
+    };
+    readonly exit: {
+        readonly en: "Back to the App";
+        readonly es: "Volver a la App";
+    };
+    readonly stage: {
+        readonly en: "Focus stage";
+        readonly es: "Escenario de enfoque";
+    };
+};
+/** The query parameter that holds Focus mode (`?focus=1`), beside `?case=` and `?view=`. */
+declare const FOCUS_PARAM = "focus";
+/** What a product may say about the Focus mode of its App (`CaseWorkbench.focus`; `true` means all defaults). */
+interface CaseFocusConfig {
+    /** The stage's heading (default: the name of the selected case). */
+    title?: BiText;
+    /** One line under it (default: the name of the open group). */
+    description?: BiText;
+    /** Readouts laid over the stage (ADR-0070): at most four on a phone. */
+    hud?: Array<{
+        label: BiText;
+        value: string;
+    }>;
+    /** Called when Focus opens (`true`) and closes (`false`), for a product that records it. */
+    onChange?: (on: boolean) => void;
+    /** The query parameter (default `focus`). */
+    param?: string;
+}
+/** What a product may say about the Focus mode of a `SurfacePage` App (`SurfacePage.focus`; `true` means all defaults). */
+interface SurfaceFocusConfig {
+    /** Called when Focus opens (`true`) and closes (`false`), for a product that records it. */
+    onChange?: (on: boolean) => void;
+    /** The query parameter (default `focus`). */
+    param?: string;
+}
+/**
+ * What a product may say about one view of a `SurfacePage` that has a stage (`TabDef.focus`; `true` means all defaults). Only a
+ * view with a stage (a simulation, a drawing, a live run) sets it: a list or a form does not, and shows no Focus control.
+ */
+interface ViewFocusConfig {
+    /** The stage's heading (default: the view's label). */
+    title?: BiText;
+    /** One line under it (default: the surface's title). */
+    description?: BiText;
+    /** Readouts laid over the stage (ADR-0070): at most four on a phone. */
+    hud?: Array<{
+        label: BiText;
+        value: string;
+    }>;
+    /**
+     * The parameter column on the right of the stage in Focus (ADR-0070 requirement 2): the view's own controls, moved here by the
+     * product (the shell moves no DOM). Without a rail the stage is the whole frame and the view keeps its controls in its body.
+     */
+    rail?: ReactNode;
+}
+
 interface TabDef {
     id: string;
     label: ReactNode;
     content: ReactNode;
+    /**
+     * A view with a stage (a simulation, a drawing, a live run) of a `SurfacePage` that has `focus`: it opens in Focus mode (shell
+     * 0.16.0, ADR-0070). `true` takes the defaults. A list or a form sets nothing. Ignored outside a `SurfacePage`.
+     */
+    focus?: boolean | ViewFocusConfig;
 }
 /** At most about six peers, then group by the question (ADR-0071 rule 5). */
 declare const MAX_PEER_TABS = 6;
@@ -291,13 +366,19 @@ interface TabsProps {
     /** Called on every selection, controlled or not. */
     onChange?: (id: string) => void;
     ariaLabel?: string;
+    /**
+     * A control at the end of the tab row, in a slot beside the tab list (never inside it) on the same row: its space is reserved
+     * whatever it shows, so the row does not move. The tabs scroll beside it when they do not fit. Used by `SurfacePage` for its Focus
+     * control (shell 0.16.0). Omit it and the markup is what it was.
+     */
+    trailing?: ReactNode;
 }
 /**
  * Accessible roving-tabindex tab strip on ONE row (ADR-0071 rule 4): arrow keys, Home and End; only the active panel
  * is rendered, inside an error boundary; a row wider than its box fades the hidden end. Controlled when `value` is
  * given (known shell defect 6). More than six peers is reported (rule 5).
  */
-declare function Tabs({ tabs, initial, value, onChange, ariaLabel }: TabsProps): react.JSX.Element;
+declare function Tabs({ tabs, initial, value, onChange, ariaLabel, trailing }: TabsProps): react.JSX.Element;
 
 interface SubTabDef {
     id: string;
@@ -812,7 +893,7 @@ interface SurfacePageProps {
     lede?: ReactNode;
     /** Controls that act on the whole surface (a source picker, an export button), at the right of the head. */
     actions?: ReactNode;
-    /** The surface's views: one row of at most six (ADR-0071 rule 5); the open one is held in the URL. */
+    /** The surface's views: one row of at most six (ADR-0071 rule 5); the open one is held in the URL. A view with a stage sets `focus`. */
     tabs?: TabDef[];
     /** Controlled selection, when the product holds it itself. */
     value?: string;
@@ -822,17 +903,28 @@ interface SurfacePageProps {
     ariaLabel?: BiText;
     /** Mark the body as the instrument, so the gate measures what is drawn in it (ADR-0071 rule 8). */
     instrument?: boolean;
+    /**
+     * Focus mode for the App (ADR-0070, shell 0.16.0): while the open view sets `TabDef.focus`, a Focus control at the end of the tab row
+     * opens that view in the full viewport through `FocusShell` (the view is the stage, its `rail` the parameter column), holds
+     * `?focus=1` beside `?view=` in the URL, and returns with Escape or the exit button to the same view and sub-view. `true` takes all
+     * the defaults. Omit it and the surface is exactly what it was. Needs `tabs`: a surface with one body has no view to focus.
+     */
+    focus?: boolean | SurfaceFocusConfig;
     /** The body when there are no tabs: it fills the viewport. */
     children?: ReactNode;
 }
 /**
  * The third route type, beside the workbench (`WorkbenchLayout`, a rail and an instrument for one case) and the
- * document (`DocPage`, a scrolling reading column): a SURFACE fills the viewport with views that are not one case's,
- * such as a hub, an explorer or a console. Under `ShellConfig.contain` its head and tab row keep their height and the
+ * document (`DocPage`, a scrolling reading column): a SURFACE fills the viewport with views that are not one case's, such
+ * as a hub, an explorer or a console. Under `ShellConfig.contain` its head and tab row keep their height and the
  * open panel scrolls inside; below 900 px the document scrolls. The containment fifteen to nineteen products wrote for
  * themselves (CAOS_MANAGE audit 2026-10-07, section 3), owned here so no product writes it again.
+ *
+ * Its views that have a stage (a simulation, a drawing, a live run) open in Focus mode (0.16.0, ADR-0070): the same behaviour as
+ * `CaseWorkbench`'s, one piece of code (`useFocusMode`). The control sits at the end of the tab row (a slot beside the tab list) with
+ * its space reserved, so it adds no row and moves nothing; it is hidden while the open view has no stage.
  */
-declare function SurfacePage({ title, lede, actions, tabs, value, onChange, deepLinkView, ariaLabel, instrument, children }: SurfacePageProps): react.JSX.Element;
+declare function SurfacePage({ title, lede, actions, tabs, value, onChange, deepLinkView, ariaLabel, instrument, focus, children }: SurfacePageProps): react.JSX.Element;
 
 /** Writes one query parameter with replaceState, keeping the router's history state (React Router keeps its entry
  * key and index there; replacing it with null broke the index the back button relies on). */
@@ -1108,44 +1200,6 @@ interface VariantBarProps {
  * one-line note of what it shows. Selecting a regime must change every view of the case. */
 declare function VariantBar({ variants, activeId, onSelect, title, lane }: VariantBarProps): react.JSX.Element;
 
-/** The words Focus mode writes (the product writes none of them). */
-declare const FOCUS_TEXT: {
-    readonly enter: {
-        readonly en: "Focus";
-        readonly es: "Enfocar";
-    };
-    readonly enterLabel: {
-        readonly en: "Open this case in focus mode";
-        readonly es: "Abrir este caso en modo enfoque";
-    };
-    readonly exit: {
-        readonly en: "Back to the App";
-        readonly es: "Volver a la App";
-    };
-    readonly stage: {
-        readonly en: "Focus stage";
-        readonly es: "Escenario de enfoque";
-    };
-};
-/** The query parameter that holds Focus mode (`?focus=1`), beside `?case=` and `?view=`. */
-declare const FOCUS_PARAM = "focus";
-/** What a product may say about the Focus mode of its App (`CaseWorkbench.focus`; `true` means all defaults). */
-interface CaseFocusConfig {
-    /** The stage's heading (default: the name of the selected case). */
-    title?: BiText;
-    /** One line under it (default: the name of the open group). */
-    description?: BiText;
-    /** Readouts laid over the stage (ADR-0070): at most four on a phone. */
-    hud?: Array<{
-        label: BiText;
-        value: string;
-    }>;
-    /** Called when Focus opens (`true`) and closes (`false`), for a product that records it. */
-    onChange?: (on: boolean) => void;
-    /** The query parameter (default `focus`). */
-    param?: string;
-}
-
 /** One group of views of the selected case, named for the question the user is asking (ADR-0071 rule 5). */
 interface WorkbenchGroup {
     id: string;
@@ -1219,6 +1273,40 @@ declare const MAX_WORKBENCH_GROUPS = 6;
  */
 declare function CaseWorkbench(props: CaseWorkbenchProps): react.JSX.Element;
 
+/** What the hook needs of a product's Focus configuration: `CaseFocusConfig` and `SurfaceFocusConfig` both satisfy it. */
+interface FocusModeConfig {
+    /** The query parameter (default `focus`). */
+    param?: string;
+    /** Called when Focus opens (`true`) and closes (`false`), for a product that records it. */
+    onChange?: (on: boolean) => void;
+}
+interface FocusModeOptions {
+    /**
+     * False while what Focus would open is not available (a surface whose open view has no stage): Focus is then never shown, and a
+     * `?focus=1` left in the URL is removed. Default true.
+     */
+    enabled?: boolean;
+    /** Whether a `?focus=1` in the URL at the first render may open Focus (a surface checks the view the link names). Default true. */
+    initialAllowed?: () => boolean;
+}
+interface FocusMode {
+    /** True when the frame shows: configured, on, and enabled. */
+    show: boolean;
+    /** Opens or closes Focus: writes the URL, moves keyboard focus on the next commit and calls `onChange`. */
+    setFocus: (on: boolean) => void;
+    /** Attach to the control that opens Focus: keyboard focus returns to it when Focus closes. */
+    enterRef: React.MutableRefObject<HTMLButtonElement | null>;
+    /** What the reader had open in the tab rows of the views; provide it as `ViewMemoryContext` around both frames. */
+    memory: Map<string, string>;
+}
+/**
+ * Focus mode (ADR-0070), the one behaviour `CaseWorkbench` and `SurfacePage` share: the state held in the URL (`?focus=1`), Escape
+ * to leave, the page behind the frame inert, keyboard focus moved to the exit control on entry and back to the entering control on
+ * return, and the view memory the frame's remount reads. The component renders the frame (`FocusShell`) when `show` is true.
+ * `cfg` null means the App has no Focus mode: nothing here acts.
+ */
+declare function useFocusMode(cfg: FocusModeConfig | null, options?: FocusModeOptions): FocusMode;
+
 interface KnobProps {
     /** Stable id, written as `data-control` so the gate can enumerate and move every control. */
     id: string;
@@ -1291,4 +1379,4 @@ interface ViewsRowProps {
  */
 declare function ViewsRow({ children, shares }: ViewsRowProps): react.JSX.Element;
 
-export { BREAKPOINTS, BarChart, type BarChartProps, type BarDatum, BiText, Callout, CardDeck, type CardDeckProps, type CaseDef, type CaseFocusConfig, type CaseGroup, type CaseKind, CaseSelector, type CaseSelectorProps, type CaseSelectorText, CaseWorkbench, type CaseWorkbenchProps, ChipGroup, type ChipGroupProps, type ChipOption, type Citation, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, type DeckCard, DocPage, type DocPageProps, DocReferences, DocRefsScope, DocSection, type DocSectionProps, EXECUTIVE_SCHEMA_VERSION, Equation, type ExecutiveData, type ExecutiveProblem, ExecutiveView, type ExecutiveViewProps, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, type FittedLabel, FlipCard, type FlipCardProps, FocusShell, type FocusShellProps, FormatOptions, Gauge, type GaugeProps, type GaugeZone, Glossary, type GlossaryEntry, InlineMath, Knob, type KnobProps, Landing, type Lane, LaneBadge, Lang, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, type PausedVizController, PlotCard, type PlotCardProps, type Provenance, Question, type QuestionProps, type RailSection, Readout, type ReadoutItem, type ReadoutProps, ReferenceList, Refs, Stage, type StageSize, Stat, type StatProps, type SubTabDef, SubTabs, type SubTabsProps, SurfacePage, type SurfacePageProps, type TabDef, type TabGroupDef, TabGroups, type TabGroupsProps, Tabs, type TabsProps, type Theme, ThemeToggle, type Tone, type UsePausedVizOptions, VariantBar, type VariantBarProps, type VariantDef, Verdict, type VerdictProps, ViewsRow, type ViewsRowProps, type VizFrame, type VizLoop, type VizLoopDeps, type VizLoopOptions, type WorkbenchGroup, WorkbenchLayout, type WorkbenchLayoutProps, type WorkbenchRoute, WorkbenchShell, type WorkbenchShellProps, type WorkbenchState, WorkbenchStateContext, applyTheme, caseKind, caseTooltip, casesInSource, createVizLoop, deckPosition, deckWindow, firstAppearance, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, perPageFor, readCaseParam, readTheme, removeQueryParam, replaceQueryParam, sourcesPresent, textWidth, usePausedViz, useStageSize, useThemeStore, useUrlView, useWorkbenchState, validateExecutive, viewParamOf, widestLabel, withCaseParam };
+export { BREAKPOINTS, BarChart, type BarChartProps, type BarDatum, BiText, Callout, CardDeck, type CardDeckProps, type CaseDef, type CaseFocusConfig, type CaseGroup, type CaseKind, CaseSelector, type CaseSelectorProps, type CaseSelectorText, CaseWorkbench, type CaseWorkbenchProps, ChipGroup, type ChipGroupProps, type ChipOption, type Citation, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, type DeckCard, DocPage, type DocPageProps, DocReferences, DocRefsScope, DocSection, type DocSectionProps, EXECUTIVE_SCHEMA_VERSION, Equation, type ExecutiveData, type ExecutiveProblem, ExecutiveView, type ExecutiveViewProps, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, type FittedLabel, FlipCard, type FlipCardProps, type FocusMode, type FocusModeConfig, type FocusModeOptions, FocusShell, type FocusShellProps, FormatOptions, Gauge, type GaugeProps, type GaugeZone, Glossary, type GlossaryEntry, InlineMath, Knob, type KnobProps, Landing, type Lane, LaneBadge, Lang, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, type PausedVizController, PlotCard, type PlotCardProps, type Provenance, Question, type QuestionProps, type RailSection, Readout, type ReadoutItem, type ReadoutProps, ReferenceList, Refs, Stage, type StageSize, Stat, type StatProps, type SubTabDef, SubTabs, type SubTabsProps, type SurfaceFocusConfig, SurfacePage, type SurfacePageProps, type TabDef, type TabGroupDef, TabGroups, type TabGroupsProps, Tabs, type TabsProps, type Theme, ThemeToggle, type Tone, type UsePausedVizOptions, VariantBar, type VariantBarProps, type VariantDef, Verdict, type VerdictProps, type ViewFocusConfig, ViewsRow, type ViewsRowProps, type VizFrame, type VizLoop, type VizLoopDeps, type VizLoopOptions, type WorkbenchGroup, WorkbenchLayout, type WorkbenchLayoutProps, type WorkbenchRoute, WorkbenchShell, type WorkbenchShellProps, type WorkbenchState, WorkbenchStateContext, applyTheme, caseKind, caseTooltip, casesInSource, createVizLoop, deckPosition, deckWindow, firstAppearance, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, perPageFor, readCaseParam, readTheme, removeQueryParam, replaceQueryParam, sourcesPresent, textWidth, useFocusMode, usePausedViz, useStageSize, useThemeStore, useUrlView, useWorkbenchState, validateExecutive, viewParamOf, widestLabel, withCaseParam };

package/dist/index.js

@@ -2,7 +2,7 @@ import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStage
 export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, formatNumber, formatTicks, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens } from './chunk-YECZXGVG.js';
 import { APP_ROUTE, LANDING_ROUTE } from './chunk-33WTUQ7Q.js';
 export { APP_ROUTE, LANDING_ROUTE, LANG_STORAGE_KEY, STANDARD_ROUTES, THEME_BOOT_SCRIPT, THEME_STORAGE_KEY } from './chunk-33WTUQ7Q.js';
-import { createContext, Component, useState, useRef, useId, useEffect, useLayoutEffect, useCallback, useContext, useMemo, Children } from 'react';
+import { createContext, Component, useState, useRef, useId, useEffect, useLayoutEffect, useCallback, useContext, useMemo, Children, isValidElement } from 'react';
 import { useInRouterContext, NavLink, useLocation, Navigate, Link } from 'react-router';
 import { Sun, Moon, Languages, Boxes, CodeXml, Globe, Briefcase, Info, ChevronLeft, ChevronRight, Maximize2, RotateCw } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -540,7 +540,7 @@ function FocusShell({ stage, rail, title, description, hud, onExit, exitLabel, s
       ro?.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsxs(Root, { className: "caos-focus-shell", "data-focus-shell": "", children: [
+  return /* @__PURE__ */ jsxs(Root, { className: rail === null || rail === void 0 ? "caos-focus-shell caos-focus-norail" : "caos-focus-shell", "data-focus-shell": "", children: [
     /* @__PURE__ */ jsxs("section", { ref: stageRef, className: "caos-focus-stage", "aria-label": stageLabel, children: [
       /* @__PURE__ */ jsx("div", { className: "caos-focus-instrument", children: stage }),
       /* @__PURE__ */ jsxs("div", { className: "caos-focus-label", children: [
@@ -557,7 +557,7 @@ function FocusShell({ stage, rail, title, description, hud, onExit, exitLabel, s
         /* @__PURE__ */ jsx("button", { type: "button", "data-focus-exit": "", onClick: onExit, children: exitLabel })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("aside", { className: "caos-focus-rail", "data-rail": "", children: rail })
+    rail !== null && rail !== void 0 && /* @__PURE__ */ jsx("aside", { className: "caos-focus-rail", "data-rail": "", children: rail })
   ] });
 }
 
@@ -867,7 +867,8 @@ function caseKindOf(c) {
   return c.kind ?? "synthetic";
 }
 var ViewMemoryContext = createContext(null);
-var memoryKey = (kind, ariaLabel, ids) => `${kind}|${ariaLabel ?? ""}|${ids.join(",")}`;
+var PanelPathContext = createContext("");
+var memoryKey = (kind, path, ids) => `${kind}|${path}|${ids.join(",")}`;
 var CitationsContext = createContext({ list: [], byId: {} });
 function CitationsProvider({ items, children }) {
   const byId = {};
@@ -964,9 +965,9 @@ function DocReferences({ ids }) {
       const c = byId[id];
       const h = href(c);
       return /* @__PURE__ */ jsxs("li", { children: [
-        /* @__PURE__ */ jsx("span", { children: c.citation }),
+        /* @__PURE__ */ jsx("span", { translate: "no", children: c.citation }),
         " ",
-        h ? /* @__PURE__ */ jsx("a", { href: h, target: "_blank", rel: "noreferrer noopener", className: "faint", children: c.doi ? `doi:${c.doi}` : "link" }) : null
+        h ? /* @__PURE__ */ jsx("a", { href: h, target: "_blank", rel: "noreferrer noopener", className: "faint", children: c.doi ? /* @__PURE__ */ jsx("span", { translate: "no", children: `doi:${c.doi}` }) : "link" }) : null
       ] }, id);
     }) })
   ] });
@@ -990,19 +991,20 @@ function ReferenceList({ ids, heading }) {
     /* @__PURE__ */ jsx("ol", { className: "reference-list", children: items.map((c) => {
       const h = href(c);
       return /* @__PURE__ */ jsxs("li", { children: [
-        /* @__PURE__ */ jsx("span", { children: c.citation }),
+        /* @__PURE__ */ jsx("span", { translate: "no", children: c.citation }),
         " ",
-        h ? /* @__PURE__ */ jsx("a", { href: h, target: "_blank", rel: "noreferrer noopener", className: "faint", children: c.doi ? `doi:${c.doi}` : "link" }) : null
+        h ? /* @__PURE__ */ jsx("a", { href: h, target: "_blank", rel: "noreferrer noopener", className: "faint", children: c.doi ? /* @__PURE__ */ jsx("span", { translate: "no", children: `doi:${c.doi}` }) : "link" }) : null
       ] }, c.id);
     }) })
   ] });
 }
 var MAX_PEER_TABS = 6;
-function Tabs({ tabs, initial, value, onChange, ariaLabel }) {
+function Tabs({ tabs, initial, value, onChange, ariaLabel, trailing }) {
   const baseId = useId();
   const first = tabs[0]?.id ?? "";
   const memory = useContext(ViewMemoryContext);
-  const mkey = memoryKey("tabs", ariaLabel, tabs.map((t2) => t2.id));
+  const path = useContext(PanelPathContext);
+  const mkey = memoryKey("tabs", path, tabs.map((t2) => t2.id));
   const [own, setOwn] = useState(() => {
     const kept = memory?.get(mkey);
     return kept && tabs.some((t2) => t2.id === kept) ? kept : initial ?? first;
@@ -1033,7 +1035,7 @@ function Tabs({ tabs, initial, value, onChange, ariaLabel }) {
     }
   }
   const current = tabs.find((t2) => t2.id === active) ?? tabs[0];
-  return /* @__PURE__ */ jsxs("div", { className: "tabs", children: [
+  return /* @__PURE__ */ jsxs("div", { className: trailing === void 0 ? "tabs" : "tabs tabs-has-slot", children: [
     /* @__PURE__ */ jsx("div", { className: "tablist", role: "tablist", "aria-label": ariaLabel, ref: rowRef, children: tabs.map((tab, idx) => {
       const selected = tab.id === current?.id;
       return /* @__PURE__ */ jsx(
@@ -1054,6 +1056,7 @@ function Tabs({ tabs, initial, value, onChange, ariaLabel }) {
         tab.id
       );
     }) }),
+    trailing !== void 0 && /* @__PURE__ */ jsx("div", { className: "tabs-slot", "data-tabs-slot": "", children: trailing }),
     current && /* @__PURE__ */ jsx(
       "div",
       {
@@ -1063,7 +1066,7 @@ function Tabs({ tabs, initial, value, onChange, ariaLabel }) {
         tabIndex: 0,
         className: "tabpanel",
         "data-panel": current.id,
-        children: /* @__PURE__ */ jsx(PanelBoundary, { panel: current.id, children: /* @__PURE__ */ jsx(DocRefsScope, { children: current.content }) })
+        children: /* @__PURE__ */ jsx(PanelPathContext.Provider, { value: `${path}/${current.id}`, children: /* @__PURE__ */ jsx(PanelBoundary, { panel: current.id, children: /* @__PURE__ */ jsx(DocRefsScope, { children: current.content }) }) })
       },
       current.id
     )
@@ -1073,7 +1076,8 @@ function SubTabs({ tabs, initial, value, onChange, ariaLabel, orientation = "hor
   const baseId = useId();
   const first = tabs[0]?.id ?? "";
   const memory = useContext(ViewMemoryContext);
-  const mkey = memoryKey("subtabs", ariaLabel, tabs.map((t2) => t2.id));
+  const path = useContext(PanelPathContext);
+  const mkey = memoryKey("subtabs", path, tabs.map((t2) => t2.id));
   const [own, setOwn] = useState(() => {
     const kept = memory?.get(mkey);
     return kept && tabs.some((t2) => t2.id === kept) ? kept : initial ?? first;
@@ -1147,7 +1151,7 @@ function SubTabs({ tabs, initial, value, onChange, ariaLabel, orientation = "hor
         tabIndex: 0,
         className: "subtabpanel",
         "data-panel": current.id,
-        children: /* @__PURE__ */ jsx(PanelBoundary, { panel: current.id, children: /* @__PURE__ */ jsx(DocRefsScope, { children: current.content }) })
+        children: /* @__PURE__ */ jsx(PanelPathContext.Provider, { value: `${path}/${current.id}`, children: /* @__PURE__ */ jsx(PanelBoundary, { panel: current.id, children: /* @__PURE__ */ jsx(DocRefsScope, { children: current.content }) }) })
       },
       current.id
     ) })
@@ -2920,20 +2924,155 @@ function useUrlView(ids, param, value, onChange) {
 function viewParamOf(option) {
   return option === false ? null : typeof option === "string" ? option : "view";
 }
-function SurfacePage({ title, lede, actions, tabs, value, onChange, deepLinkView = true, ariaLabel, instrument, children }) {
+
+// src/workbench/focus.ts
+var FOCUS_TEXT = {
+  enter: { en: "Focus", es: "Enfocar" },
+  enterLabel: { en: "Open this case in focus mode", es: "Abrir este caso en modo enfoque" },
+  enterViewLabel: { en: "Open this view in focus mode", es: "Abrir esta vista en modo enfoque" },
+  exit: { en: "Back to the App", es: "Volver a la App" },
+  stage: { en: "Focus stage", es: "Escenario de enfoque" }
+};
+var FOCUS_PARAM = "focus";
+
+// src/shell/useFocusMode.ts
+function useFocusMode(cfg, options = {}) {
+  const enabled = options.enabled ?? true;
+  const param = cfg?.param ?? FOCUS_PARAM;
+  const [on, setOn] = useState(
+    () => cfg !== null && typeof window !== "undefined" && readCaseParam(window.location.search, param) === "1" && (options.initialAllowed?.() ?? true)
+  );
+  const enterRef = useRef(null);
+  const memory = useRef(/* @__PURE__ */ new Map());
+  const turned = useRef(null);
+  const onChangeRef = useRef(cfg?.onChange);
+  onChangeRef.current = cfg?.onChange;
+  const setFocus = useCallback(
+    (next) => {
+      turned.current = next ? "in" : "out";
+      setOn(next);
+      if (next) replaceQueryParam(param, "1");
+      else removeQueryParam(param);
+      onChangeRef.current?.(next);
+    },
+    [param]
+  );
+  const show = cfg !== null && on && enabled;
+  useEffect(() => {
+    if (cfg === null || enabled) return;
+    if (on) setOn(false);
+    if (typeof window !== "undefined" && readCaseParam(window.location.search, param) === "1") removeQueryParam(param);
+  }, [cfg === null, enabled, on, param]);
+  useEffect(() => {
+    if (!show) return void 0;
+    const onKey = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      e.preventDefault();
+      setFocus(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [show, setFocus]);
+  useEffect(() => {
+    if (!show) return void 0;
+    const frame = document.querySelector("[data-focus-shell]");
+    if (!frame) return void 0;
+    const made = [];
+    for (let node = frame; node && node !== document.body; node = node.parentElement) {
+      for (const sib of Array.from(node.parentElement?.children ?? [])) {
+        if (sib !== node && !sib.hasAttribute("inert") && sib.tagName !== "SCRIPT" && sib.tagName !== "STYLE") {
+          sib.setAttribute("inert", "");
+          made.push(sib);
+        }
+      }
+    }
+    return () => {
+      for (const el of made) el.removeAttribute("inert");
+    };
+  }, [show]);
+  useEffect(() => {
+    if (turned.current === "in" && show) document.querySelector("[data-focus-exit]")?.focus();
+    else if (turned.current === "out" && !show) enterRef.current?.focus();
+    turned.current = null;
+  }, [show]);
+  return { show, setFocus, enterRef, memory: memory.current };
+}
+function textOf(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (isValidElement(node)) return textOf(node.props.children);
+  return "";
+}
+var viewFocus = (tab) => !tab || !tab.focus ? null : tab.focus === true ? {} : tab.focus;
+function SurfacePage({ title, lede, actions, tabs, value, onChange, deepLinkView = true, ariaLabel, instrument, focus, children }) {
   const lang = useShellLang();
-  const [open, select] = useUrlView((tabs ?? []).map((t2) => t2.id), tabs ? viewParamOf(deepLinkView) : null, value, onChange);
-  const head = title !== void 0 || lede !== void 0 || actions !== void 0;
-  return /* @__PURE__ */ jsxs("div", { className: "page-body wide caos-surface", "data-surface": "", children: [
+  const placeAbove = useContext(PanelPathContext);
+  const ids = (tabs ?? []).map((t2) => t2.id);
+  const viewParam = tabs ? viewParamOf(deepLinkView) : null;
+  const [open, select] = useUrlView(ids, viewParam, value, onChange);
+  const focusCfg = focus === true ? {} : focus || null;
+  const openTab = tabs?.find((t2) => t2.id === open) ?? tabs?.[0];
+  const openFocus = focusCfg ? viewFocus(openTab) : null;
+  const mode = useFocusMode(focusCfg, {
+    enabled: openFocus !== null,
+    // a link opens Focus only on a view with a stage: the view it names (the first one when it names none), never an unknown one
+    initialAllowed: () => {
+      const named = value ?? (viewParam && typeof window !== "undefined" ? readCaseParam(window.location.search, viewParam) : null);
+      if (named !== null && !ids.includes(named)) return false;
+      return viewFocus(tabs?.find((t2) => t2.id === (named ?? ids[0]))) !== null;
+    }
+  });
+  const reserve = focusCfg !== null && Boolean(tabs?.some((t2) => viewFocus(t2) !== null));
+  const idle = openFocus === null;
+  const enter = reserve && /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: mode.enterRef,
+      type: "button",
+      className: "btn caos-focus-enter",
+      "data-focus-enter": "",
+      "aria-label": FOCUS_TEXT.enterViewLabel[lang],
+      title: FOCUS_TEXT.enterViewLabel[lang],
+      "aria-hidden": idle ? true : void 0,
+      tabIndex: idle ? -1 : void 0,
+      style: idle ? { visibility: "hidden" } : void 0,
+      onClick: () => mode.setFocus(true),
+      children: [
+        /* @__PURE__ */ jsx(Maximize2, { size: 14, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children: FOCUS_TEXT.enter[lang] })
+      ]
+    }
+  );
+  if (mode.show && openTab && openFocus) {
+    const label = textOf(openTab.label);
+    const surfaceTitle = title !== void 0 ? pick(title, lang) : "";
+    return /* @__PURE__ */ jsx(ViewMemoryContext.Provider, { value: mode.memory, children: /* @__PURE__ */ jsx(
+      FocusShell,
+      {
+        title: openFocus.title !== void 0 ? pick(openFocus.title, lang) : label,
+        description: openFocus.description !== void 0 ? pick(openFocus.description, lang) : surfaceTitle,
+        hud: (openFocus.hud ?? []).map((h) => ({ label: pick(h.label, lang), value: h.value })),
+        onExit: () => mode.setFocus(false),
+        exitLabel: FOCUS_TEXT.exit[lang],
+        stageLabel: FOCUS_TEXT.stage[lang],
+        landmark: false,
+        stage: /* @__PURE__ */ jsx("div", { className: "caos-surface-focus", "data-surface-focus": "", "data-view-param": viewParam ?? "", "data-focus-param": focusCfg?.param ?? FOCUS_PARAM, "data-focus-view": openTab.id, "data-focus-group": openTab.id, "data-instrument": "", children: /* @__PURE__ */ jsx("div", { className: "tabs", children: /* @__PURE__ */ jsx("div", { className: "tabpanel", role: "tabpanel", tabIndex: 0, "aria-label": label || void 0, "data-panel": openTab.id, children: /* @__PURE__ */ jsx(PanelPathContext.Provider, { value: `${placeAbove}/${openTab.id}`, children: /* @__PURE__ */ jsx(PanelBoundary, { panel: openTab.id, children: /* @__PURE__ */ jsx(DocRefsScope, { children: openTab.content }) }) }) }) }) }),
+        rail: openFocus.rail !== void 0 && openFocus.rail !== null ? /* @__PURE__ */ jsx("div", { className: "caos-focus-rail-body", children: openFocus.rail }) : null
+      }
+    ) });
+  }
+  const head = title !== void 0 || lede !== void 0 || actions !== void 0 && actions !== null;
+  const page = /* @__PURE__ */ jsxs("div", { className: "page-body wide caos-surface", "data-surface": "", "data-view-param": reserve ? viewParam ?? "" : void 0, children: [
     head && /* @__PURE__ */ jsxs("div", { className: "caos-surface-head", children: [
       /* @__PURE__ */ jsxs("div", { className: "caos-surface-heading", children: [
         title !== void 0 && /* @__PURE__ */ jsx("h1", { className: "caos-surface-title", children: pick(title, lang) }),
         lede !== void 0 && /* @__PURE__ */ jsx("p", { className: "caos-surface-lede", children: lede })
       ] }),
-      actions !== void 0 && /* @__PURE__ */ jsx("div", { className: "caos-surface-actions", children: actions })
+      actions !== void 0 && actions !== null && /* @__PURE__ */ jsx("div", { className: "caos-surface-actions", children: actions })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "caos-surface-body", "data-instrument": instrument ? "" : void 0, children: tabs ? /* @__PURE__ */ jsx(Tabs, { tabs, value: open, onChange: select, ariaLabel: pick(ariaLabel ?? title ?? { en: "Views", es: "Vistas" }, lang) }) : children })
+    /* @__PURE__ */ jsx("div", { className: "caos-surface-body", "data-instrument": instrument ? "" : void 0, children: tabs ? /* @__PURE__ */ jsx(Tabs, { tabs, value: open, onChange: select, ariaLabel: pick(ariaLabel ?? title ?? { en: "Views", es: "Vistas" }, lang), trailing: enter || void 0 }) : children })
   ] });
+  return focusCfg ? /* @__PURE__ */ jsx(ViewMemoryContext.Provider, { value: mode.memory, children: page }) : page;
 }
 
 // src/lib/breakpoints.ts
@@ -3298,15 +3437,6 @@ function VariantBar({ variants, activeId, onSelect, title, lane }) {
     active?.note && /* @__PURE__ */ jsx("p", { className: "caos-variant-note", children: pick(active.note, lang) })
   ] });
 }
-
-// src/workbench/focus.ts
-var FOCUS_TEXT = {
-  enter: { en: "Focus", es: "Enfocar" },
-  enterLabel: { en: "Open this case in focus mode", es: "Abrir este caso en modo enfoque" },
-  exit: { en: "Back to the App", es: "Volver a la App" },
-  stage: { en: "Focus stage", es: "Escenario de enfoque" }
-};
-var FOCUS_PARAM = "focus";
 var MAX_WORKBENCH_GROUPS = MAX_PEER_TABS;
 function panel(id, lane, provenance, content) {
   return /* @__PURE__ */ jsx("div", { className: "caos-cw-panel", "data-group": id, "data-lane": lane, "data-provenance": provenance, children: content });
@@ -3315,56 +3445,8 @@ function CaseWorkbench(props) {
   const { caseId, cases, source, controls, replayOnly, variants, rail, railLabel, groups, compare, context: context2, group, onGroupChange, deepLinkView = true, ariaLabel, focus } = props;
   const lang = useShellLang();
   const focusCfg = focus === true ? {} : focus || null;
-  const focusParam = focusCfg?.param ?? FOCUS_PARAM;
-  const [focusOn, setFocusOn] = useState(() => focusCfg !== null && typeof window !== "undefined" && readCaseParam(window.location.search, focusParam) === "1");
-  const enterRef = useRef(null);
-  const memory = useRef(/* @__PURE__ */ new Map());
-  const turned = useRef(null);
-  const onChangeRef = useRef(focusCfg?.onChange);
-  onChangeRef.current = focusCfg?.onChange;
-  const setFocus = useCallback(
-    (on) => {
-      turned.current = on ? "in" : "out";
-      setFocusOn(on);
-      if (on) replaceQueryParam(focusParam, "1");
-      else removeQueryParam(focusParam);
-      onChangeRef.current?.(on);
-    },
-    [focusParam]
-  );
-  const showFocus = focusCfg !== null && focusOn;
-  useEffect(() => {
-    if (!showFocus) return void 0;
-    const onKey = (e) => {
-      if (e.key !== "Escape" || e.defaultPrevented) return;
-      e.preventDefault();
-      setFocus(false);
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [showFocus, setFocus]);
-  useEffect(() => {
-    if (!showFocus) return void 0;
-    const frame = document.querySelector("[data-focus-shell]");
-    if (!frame) return void 0;
-    const made = [];
-    for (let node = frame; node && node !== document.body; node = node.parentElement) {
-      for (const sib of Array.from(node.parentElement?.children ?? [])) {
-        if (sib !== node && !sib.hasAttribute("inert") && sib.tagName !== "SCRIPT" && sib.tagName !== "STYLE") {
-          sib.setAttribute("inert", "");
-          made.push(sib);
-        }
-      }
-    }
-    return () => {
-      for (const el of made) el.removeAttribute("inert");
-    };
-  }, [showFocus]);
-  useEffect(() => {
-    if (turned.current === "in" && showFocus) document.querySelector("[data-focus-exit]")?.focus();
-    else if (turned.current === "out" && !showFocus) enterRef.current?.focus();
-    turned.current = null;
-  }, [showFocus]);
+  const { show: showFocus, setFocus, enterRef, memory } = useFocusMode(focusCfg);
+  const placeAbove = useContext(PanelPathContext);
   const variantId = variants?.activeId;
   const stateKey = useMemo(
     () => makeStateKey({ caseId, variantId: variantId ?? null, source: source ?? null, controls: controls ?? {} }),
@@ -3430,7 +3512,7 @@ function CaseWorkbench(props) {
   if (showFocus && focusCfg) {
     const open = tabs.find((t2) => t2.id === openGroup) ?? tabs[0];
     const caseName = cases?.cases.find((c) => c.id === caseId)?.name ?? caseId;
-    return /* @__PURE__ */ jsx(ViewMemoryContext.Provider, { value: memory.current, children: /* @__PURE__ */ jsx(WorkbenchStateContext.Provider, { value: { stateKey, caseId, variantId, source }, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ViewMemoryContext.Provider, { value: memory, children: /* @__PURE__ */ jsx(WorkbenchStateContext.Provider, { value: { stateKey, caseId, variantId, source }, children: /* @__PURE__ */ jsx(
       FocusShell,
       {
         title: focusCfg.title !== void 0 ? pick(focusCfg.title, lang) : caseName,
@@ -3440,12 +3522,12 @@ function CaseWorkbench(props) {
         exitLabel: FOCUS_TEXT.exit[lang],
         stageLabel: FOCUS_TEXT.stage[lang],
         landmark: false,
-        stage: /* @__PURE__ */ jsx("div", { className: "caos-cw caos-cw-focus", ...instrumentData, "data-focus-group": open?.id, "data-instrument": "", children: /* @__PURE__ */ jsx("div", { className: "tabs", children: open && /* @__PURE__ */ jsx("div", { className: "tabpanel", role: "tabpanel", tabIndex: 0, "aria-label": open.label, "data-panel": open.id, children: /* @__PURE__ */ jsx(PanelBoundary, { panel: open.id, children: /* @__PURE__ */ jsx(DocRefsScope, { children: open.content }) }) }) }) }),
+        stage: /* @__PURE__ */ jsx("div", { className: "caos-cw caos-cw-focus", ...instrumentData, "data-focus-group": open?.id, "data-focus-param": focusCfg.param ?? FOCUS_PARAM, "data-instrument": "", children: /* @__PURE__ */ jsx("div", { className: "tabs", children: open && /* @__PURE__ */ jsx("div", { className: "tabpanel", role: "tabpanel", tabIndex: 0, "aria-label": open.label, "data-panel": open.id, children: /* @__PURE__ */ jsx(PanelPathContext.Provider, { value: `${placeAbove}/${open.id}`, children: /* @__PURE__ */ jsx(PanelBoundary, { panel: open.id, children: /* @__PURE__ */ jsx(DocRefsScope, { children: open.content }) }) }) }) }) }),
         rail: /* @__PURE__ */ jsx("div", { className: "caos-focus-rail-body", children: /* @__PURE__ */ jsx(RailBody, { rail: rail ?? null, railHead: focusPickers, railLabel }) })
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx(ViewMemoryContext.Provider, { value: memory.current, children: /* @__PURE__ */ jsx(WorkbenchStateContext.Provider, { value: { stateKey, caseId, variantId, source }, children: /* @__PURE__ */ jsx(WorkbenchLayout, { rail: rail ?? null, railHead, railLabel, children: /* @__PURE__ */ jsx("div", { className: "caos-cw", ...instrumentData, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ViewMemoryContext.Provider, { value: memory, children: /* @__PURE__ */ jsx(WorkbenchStateContext.Provider, { value: { stateKey, caseId, variantId, source }, children: /* @__PURE__ */ jsx(WorkbenchLayout, { rail: rail ?? null, railHead, railLabel, children: /* @__PURE__ */ jsx("div", { className: "caos-cw", ...instrumentData, children: /* @__PURE__ */ jsx(
     Tabs,
     {
       tabs,
@@ -3655,4 +3737,4 @@ function ViewsRow({ children, shares }) {
   }) });
 }
 
-export { AppShell, ArchitectureModal, BREAKPOINTS, BarChart, Callout, CardDeck, CaseSelector, CaseWorkbench, ChipGroup, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, DocPage, DocReferences, DocRefsScope, DocSection, EXECUTIVE_SCHEMA_VERSION, Equation, ExecutiveView, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, FlipCard, FocusShell, Gauge, Glossary, InlineMath, Knob, Landing, LaneBadge, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, PlotCard, Question, Readout, ReferenceList, Refs, Stat, SubTabs, SurfacePage, TabGroups, Tabs, ThemeToggle, VariantBar, Verdict, ViewsRow, WorkbenchLayout, WorkbenchShell, WorkbenchStateContext, caseKind, caseTooltip, casesInSource, createVizLoop, deckPosition, deckWindow, firstAppearance, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, perPageFor, readCaseParam, removeQueryParam, replaceQueryParam, sourcesPresent, textWidth, usePausedViz, useUrlView, useWorkbenchState, validateArchitectureConfig, validateExecutive, viewParamOf, widestLabel, withCaseParam };
+export { AppShell, ArchitectureModal, BREAKPOINTS, BarChart, Callout, CardDeck, CaseSelector, CaseWorkbench, ChipGroup, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, DocPage, DocReferences, DocRefsScope, DocSection, EXECUTIVE_SCHEMA_VERSION, Equation, ExecutiveView, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, FlipCard, FocusShell, Gauge, Glossary, InlineMath, Knob, Landing, LaneBadge, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, PlotCard, Question, Readout, ReferenceList, Refs, Stat, SubTabs, SurfacePage, TabGroups, Tabs, ThemeToggle, VariantBar, Verdict, ViewsRow, WorkbenchLayout, WorkbenchShell, WorkbenchStateContext, caseKind, caseTooltip, casesInSource, createVizLoop, deckPosition, deckWindow, firstAppearance, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, perPageFor, readCaseParam, removeQueryParam, replaceQueryParam, sourcesPresent, textWidth, useFocusMode, usePausedViz, useUrlView, useWorkbenchState, validateArchitectureConfig, validateExecutive, viewParamOf, widestLabel, withCaseParam };

package/gate/inpage.mjs

@@ -1029,7 +1029,9 @@ export function installLib() {
   /** The App or Focus mode as the reader meets it: which one, the case and the group, the URL, the page and the rail. */
   G.focusFacts = () => {
     const shell = document.querySelector('[data-focus-shell]');
-    const stage = document.querySelector('[data-case-workbench]');
+    // the instrument of the App: a case workbench, or (a surface App, 0.16.0) the surface or its Focus frame
+    // by explicit order, never the first match in document order: a workbench nested in a surface view is read as the workbench
+    const stage = document.querySelector('[data-case-workbench]') ?? document.querySelector('[data-surface-focus]') ?? document.querySelector('[data-surface]');
     const rail = document.querySelector('.caos-focus-rail');
     const lists = [...document.querySelectorAll('[data-focus-shell] [role="tablist"]')].filter(visible);
     const rows = lists.map((t) => new Set([...t.querySelectorAll('[role="tab"]')].map((b) => Math.round(b.getBoundingClientRect().top))).size);
@@ -1062,11 +1064,17 @@ export function installLib() {
       focus: Boolean(shell),
       covered,
       enterInside: [...document.querySelectorAll('[data-focus-shell] [data-focus-enter]')].filter(visible).length,
-      app: Boolean(document.querySelector('[data-workbench]')),
+      app: Boolean(document.querySelector('[data-workbench], [data-surface]')),
       caseId: stage ? stage.getAttribute('data-case') : null,
       group: shell ? (stage ? stage.getAttribute('data-focus-group') : null) : panel ? panel.getAttribute('data-panel') : null,
       search: location.search,
-      subview: (() => { const t = document.querySelector('[data-case-workbench] .subtab.active'); return t ? t.getAttribute('data-tab') : null; })(),
+      // the query parameter that holds Focus (`focus`, or `param` of the product's focus configuration), written on the Focus frame
+      focusParam: (() => { const e = document.querySelector('[data-focus-param]'); return e ? e.getAttribute('data-focus-param') : null; })(),
+      // a head with no title, lede or actions (an empty head row) on a surface
+      emptyHead: (() => { const h = document.querySelector('[data-surface] > .caos-surface-head'); return h && !h.querySelector('.caos-surface-title, .caos-surface-lede, .caos-surface-actions') ? Math.round(h.getBoundingClientRect().height) : null; })(),
+      // the query parameter the surface holds its open view in (`deepLinkView`): `view`, or the product's own name
+      viewParam: (() => { const e = document.querySelector('[data-surface-focus]') ?? document.querySelector('[data-surface]'); return e && e.hasAttribute('data-view-param') ? e.getAttribute('data-view-param') : null; })(),
+      subview: (() => { const t = document.querySelector('[data-case-workbench] .subtab.active, [data-surface] .subtab.active, [data-surface-focus] .subtab.active'); return t ? t.getAttribute('data-tab') : null; })(),
       nestedMain: document.querySelectorAll('main').length > 1 || Boolean(document.querySelector('main main')),
       vw: window.innerWidth,
       vh: window.innerHeight,

package/gate/run.mjs

@@ -29,6 +29,8 @@
 //   G18 Focus mode           the App's Focus control opens the case's open group in the full viewport and returns to the same case and
 //                            group (by the exit control and by Escape); no page scroll, the rail without scroll, one tab row; no stage
 //                            control under the Focus chrome (label, HUD, actions); no Focus control inside the Focus frame
+//                            on a surface App (--workbench '', --app-route; 0.16.0) the same for the views of its tab row: another view or
+//                            sub-view in Focus or after the return, no ?focus=1 and view in the URL, no view that offers the control
 //   G19 values whole         a short value (number, percentage, amount, unit) sits on one line in every state
 // plus the ADR-0071 and ADR-0017 measures (viewport, one-row tabs, rail without scroll, centred prose, captions,
 // references).
@@ -45,6 +47,7 @@ export const DEFAULTS = {
   themes: 'light,dark',
   langs: 'en,es',
   workbench: '/app',
+  appRoute: '/app',
   idleMs: 3000,
   settleMs: 15000,
   textFloor: 400,
@@ -93,6 +96,8 @@ export async function runGate(o) {
   const themes = String(opt.themes).split(',').map((s) => s.trim());
   const langs = String(opt.langs).split(',').map((s) => s.trim());
   const workbenchRoute = String(opt.workbench).split(',')[0].trim() || '/app';
+  // the App route of a product whose App is a surface (`--workbench ''`): G18 measures its Focus mode (shell 0.16.0)
+  const appRoute = String(opt.appRoute ?? '').trim() || '/app';
   const workbenchRoutes = new Set(String(opt.workbench).split(',').map((s) => s.trim()).filter(Boolean));
   const primarySize = sizes.find(([w]) => w >= opt.viewportMinWidth) ?? sizes[0];
   const shotsDir = join(opt.out, 'shots');
@@ -103,7 +108,7 @@ export async function runGate(o) {
   let server = null;
   let base = opt.url;
   if (opt.serve) {
-    server = await servePages(opt.serve, opt.basePath ?? '/');
+    server = await servePages(opt.serve, opt.basePath ?? '/', 0, { spaFallback: Boolean(opt.spaFallback) });
     base = server.url;
   }
   base = base.endsWith('/') ? base : `${base}/`;
@@ -259,6 +264,11 @@ export async function runGate(o) {
       await ctx.close();
     }
 
+    // ---- G18 on a surface App: under --require-focus the App route must be among the measured routes, or nothing would be measured
+    if (opt.requireFocus && workbenchRoutes.size === 0 && !routes.includes(appRoute)) {
+      fail('G18', { route: appRoute, mode: 'routes' }, `the App route ${appRoute} is not among the measured routes (${routes.join(', ') || 'none'}): with --workbench '' and --require-focus the gate measures the App as a surface and must walk it; add it to --routes or name it with --app-route`);
+    }
+
     // ---- The landing (shell 0.13.0): the root opens the Introduction on its executive view; an old App link with a query string reaches the App.
     {
       const ctx = await openContext(primarySize, themes[0], langs[0]);
@@ -344,6 +354,7 @@ export async function runGate(o) {
             if (walkState.doc) docResult(at, lang, walkState.doc, Math.max(1, leaves));
 
             if (isWorkbench) await walkCases(page, sink, at, { route, isWorkbench, primary, interact: idleHere, size, w, h, theme, lang, walkState, contrast });
+            else if (workbenchRoutes.size === 0 && route === appRoute) await surfaceFocusWalk(page, sink, at, { route, isWorkbench, primary, interact: idleHere, size, w, h, theme, lang, walkState, contrast });
 
             if (primary && isWorkbench) {
               const f = await page.evaluate(() => window.__caosGate.facts());
@@ -847,16 +858,18 @@ export async function runGate(o) {
         await subs.nth(sn - 1).click({ timeout: 4000 }).catch(() => undefined);
         await settle(page);
       }
-      await focusVisitOne(page, sink, where, s, caseId, index + k, total, enter);
+      await focusVisitOne(page, sink, where, s, { kind: 'case', id: caseId, total }, index + k, enter);
     }
     await tabs.nth(0).click({ timeout: 4000 }).catch(() => undefined);
     await settle(page);
   }
 
-  async function focusVisitOne(page, sink, where, s, caseId, index, total, enter) {
-    const at = { ...where, trail: `case ${caseId} > Focus` };
+  async function focusVisitOne(page, sink, where, s, subject, index, enter) {
+    const isView = subject.kind === 'view';
+    const caseId = subject.id;
+    const at = { ...where, trail: `${subject.kind} ${subject.id} > Focus` };
     const facts = () => page.evaluate(() => window.__caosGate.focusFacts());
-    const label = `Focus mode of case ${caseId}`;
+    const label = `Focus mode of ${subject.kind} ${subject.id}`;
     const before = await facts();
     try {
       await enter.evaluate((el) => window.__caosGate.bringEl(el)).catch(() => undefined);
@@ -872,11 +885,18 @@ export async function runGate(o) {
       fail('G18', at, `${label}: the Focus control did not open Focus mode`);
       return;
     }
-    if (f.caseId !== caseId) fail('G18', at, `${label} shows case ${f.caseId}`);
-    if (f.group !== before.group) fail('G18', at, `${label} shows group ${f.group}, the App had ${before.group}`);
+    if (!isView && f.caseId !== caseId) fail('G18', at, `${label} shows case ${f.caseId}`);
+    if (f.group !== before.group) fail('G18', at, `${label} shows ${isView ? 'view' : 'group'} ${f.group}, the App had ${before.group}`);
     if (f.subview !== before.subview) fail('G18', at, `${label} shows sub-view ${f.subview}, the App had ${before.subview}`);
     const q = new URLSearchParams(f.search);
-    if (q.get('focus') !== '1' || (total > 1 && q.get('case') !== caseId)) fail('G18', at, `${label}: the URL (${f.search || 'no query'}) does not hold ?focus=1 and the case`);
+    // the parameter the App holds Focus in (`focus`, or the product's own `param`), named by the Focus frame
+    const fp = f.focusParam || 'focus';
+    if (isView) {
+      // the view the App held in its URL stays there (a surface that keeps its view out of the URL has none to keep)
+      const param = before.viewParam || 'view';
+      const held = new URLSearchParams(before.search).get(param);
+      if (q.get(fp) !== '1' || (held !== null && q.get(param) !== held)) fail('G18', at, `${label}: the URL (${f.search || 'no query'}) does not hold ?${fp}=1 and the view (?${param}=)`);
+    } else if (q.get(fp) !== '1' || (subject.total > 1 && q.get('case') !== caseId)) fail('G18', at, `${label}: the URL (${f.search || 'no query'}) does not hold ?${fp}=1 and the case`);
     if (f.docW > f.vw + 1 || f.docH > f.vh + 1) fail('G18', at, `${label}: the page scrolls (the document is ${f.docW}x${f.docH}px in a ${f.vw}x${f.vh}px viewport); Focus mode is the viewport`);
     if (f.nestedMain) fail('G18', at, `${label}: the page holds a main inside a main (the Focus frame must not be a second landmark inside the App's main)`);
     // the keyboard stays in the Focus frame: the App behind it is out of the tab order
@@ -917,18 +937,103 @@ export async function runGate(o) {
     const g = await facts();
     if (g.focus) {
       fail('G18', at, `${label}: ${byButton && left ? 'the exit control' : 'Escape'} does not return to the App`);
-      await page.goto(`${urlFor(s.route)}?case=${encodeURIComponent(caseId)}`, { waitUntil: 'load', timeout: 30000 }).catch(() => undefined);
+      await page.goto(`${urlFor(s.route)}?${isView ? (before.viewParam || 'view') : 'case'}=${encodeURIComponent(caseId)}`, { waitUntil: 'load', timeout: 30000 }).catch(() => undefined);
       await settle(page);
     } else {
       if (!g.app) fail('G18', at, `${label}: back from Focus mode there is no App on the page`);
-      if (g.caseId !== caseId) fail('G18', at, `${label}: back in the App on case ${g.caseId}, it was left on case ${caseId}`);
-      if (g.group !== before.group) fail('G18', at, `${label}: back in the App on group ${g.group}, it was left on group ${before.group}`);
+      if (!isView && g.caseId !== caseId) fail('G18', at, `${label}: back in the App on case ${g.caseId}, it was left on case ${caseId}`);
+      if (g.group !== before.group) fail('G18', at, `${label}: back in the App on ${isView ? 'view' : 'group'} ${g.group}, it was left on ${isView ? 'view' : 'group'} ${before.group}`);
       if (g.subview !== before.subview) fail('G18', at, `${label}: back in the App on sub-view ${g.subview}, it was left on sub-view ${before.subview}`);
-      if (new URLSearchParams(g.search).has('focus')) fail('G18', at, `${label}: the URL still holds ?focus after the return`);
+      if (new URLSearchParams(g.search).has(fp)) fail('G18', at, `${label}: the URL still holds ?${fp} after the return`);
     }
     drain(sink, at);
   }
 
+  /**
+   * G18 on an App that is a surface (`--workbench ''`, the App route `--app-route`, shell 0.16.0): every view of the surface's tab row is
+   * opened and its tab row measured (the row and the head must not move between views: the Focus control must add no row, ADR-0071);
+   * each view that offers the Focus control is entered from its last sub-view (the first view is where the walk leaves the App, so a
+   * Focus that fell back to it would go unseen) and, in the primary mode, left both by the exit button and by Escape; outside the primary
+   * mode, the last focusable view only. The same failures as for a workbench apply, with the view in place of the case and the group.
+   */
+  async function surfaceFocusWalk(page, sink, at, s) {
+    const rowTabs = page.locator('[data-surface] > .caos-surface-body > .tabs > [role="tablist"] > [role="tab"]');
+    const n = await rowTabs.count();
+    const focusable = [];
+    const rows = [];
+    // the tab row and the head, from the surface's own top (the document may have scrolled)
+    const geometry = () =>
+      page.evaluate(() => {
+        const surface = document.querySelector('[data-surface]');
+        const list = document.querySelector('[data-surface] > .caos-surface-body > .tabs > [role="tablist"]');
+        if (!surface || !list) return null;
+        const top = surface.getBoundingClientRect().top;
+        const r = list.getBoundingClientRect();
+        const head = document.querySelector('[data-surface] > .caos-surface-head');
+        const round = (x) => Math.round(x * 10) / 10;
+        // the height the tabs themselves need (their lowest edge, the row's bottom padding and rule): anything above it is height something
+        // else gave the row, such as a taller Focus control in the slot beside it
+        const cs = getComputedStyle(list);
+        // the tabs stretch to the row, so they are measured at their natural height (aligned to the start for this one reading)
+        const before = list.style.alignItems;
+        list.style.alignItems = 'flex-start';
+        const lowest = Math.max(0, ...[...list.querySelectorAll('[role="tab"]')].map((b) => b.getBoundingClientRect().bottom));
+        list.style.alignItems = before;
+        const need = lowest - r.top + parseFloat(cs.paddingBottom) + parseFloat(cs.borderBottomWidth);
+        return { top: round(r.top - top), height: round(r.height), head: head ? round(head.getBoundingClientRect().height) : 0, slack: round(r.height - need) };
+      });
+    for (let i = 0; i < n; i += 1) {
+      await rowTabs.nth(i).click({ timeout: 4000 }).catch(() => undefined);
+      await settle(page);
+      const shown = (await page.locator('[data-focus-enter]').filter({ visible: true }).count()) > 0;
+      const facts = await page.evaluate(() => window.__caosGate.focusFacts());
+      if (shown) focusable.push({ index: i, id: facts.group });
+      rows.push({ id: facts.group, geo: await geometry() });
+    }
+    if (focusable.length > 0 && rows[0]?.geo) {
+      for (const r of rows.slice(1)) {
+        if (!r.geo) continue;
+        const g0 = rows[0].geo;
+        if (r.geo.top !== g0.top || r.geo.height !== g0.height || r.geo.head !== g0.head) {
+          fail('G18', { ...at, trail: `view ${r.id}` }, `the surface's tab row or head moves between views (view ${rows[0].id}: row at ${g0.top}px, ${g0.height}px high, head ${g0.head}px; view ${r.id}: row at ${r.geo.top}px, ${r.geo.height}px high, head ${r.geo.head}px): a view must not add a row or shift the tab row (ADR-0071); the Focus control sits on the tab row with its space reserved and adds none, and a per-view head is the product's to keep steady`);
+          break;
+        }
+      }
+    }
+    if (focusable.length > 0) {
+      const tall = rows.find((r) => r.geo && r.geo.slack > 3);
+      if (tall) fail('G18', { ...at, trail: `view ${tall.id}` }, `the surface's tab row is ${tall.geo.slack}px taller than its tabs need (view ${tall.id}, row ${tall.geo.height}px): something beside the tabs, such as a taller Focus control in the tab row's slot, adds height to the row on every view (ADR-0071)`);
+      const empty = (await page.evaluate(() => window.__caosGate.focusFacts())).emptyHead;
+      if (empty !== null) fail('G18', { ...at, trail: 'surface head' }, `the surface renders a head with no title, lede or actions (an empty head row ${empty}px high): a surface without them has no head, and the Focus control sits on the tab row, never in a head of its own (ADR-0071)`);
+    }
+    if (focusable.length === 0) {
+      if (opt.requireFocus) {
+        fail('G18', { ...at, trail: 'surface > Focus' }, `the surface App (${at.route}) offers no Focus control ([data-focus-enter]) on any of its ${n} view(s): ADR-0070 requires a visible control on every view with a stage that opens it in focus mode (set TabDef.focus on the view and focus on the SurfacePage)`);
+      }
+      if (n > 0) await rowTabs.nth(0).click({ timeout: 4000 }).catch(() => undefined);
+      await settle(page);
+      return;
+    }
+    const targets = s.primary ? focusable : focusable.slice(-1);
+    for (const [k, v] of targets.entries()) {
+      // the primary mode leaves each focusable view twice: by the exit button (even index), then by Escape (odd index)
+      for (const way of s.primary ? [0, 1] : [0]) {
+        await rowTabs.nth(v.index).click({ timeout: 4000 }).catch(() => undefined);
+        await settle(page);
+        const subs = page.locator('[data-surface] .subtablist [role="tab"]');
+        const sn = await subs.count();
+        if (sn > 1) {
+          await subs.nth(sn - 1).click({ timeout: 4000 }).catch(() => undefined);
+          await settle(page);
+        }
+        const enter = page.locator('[data-focus-enter]').filter({ visible: true }).first();
+        await focusVisitOne(page, sink, at, s, { kind: 'view', id: v.id }, 2 * k + way, enter);
+      }
+    }
+    await rowTabs.nth(0).click({ timeout: 4000 }).catch(() => undefined);
+    await settle(page);
+  }
+
   async function workbenchKey(page) {
     return page.evaluate(() => document.querySelector('[data-case-workbench]')?.getAttribute('data-state-key') ?? null);
   }

package/gate/serve.mjs

@@ -3,6 +3,12 @@
 // index.html; `/name` falls back to `name.html`; anything else is 404 with the site's 404.html. There is no SPA
 // fallback, which is the point: a route that was not materialised, or an artifact missing from the build, fails here
 // exactly as it would on Pages (failure classes 2 and 22: deep links that 404, artifacts answered with HTML).
+// With `spaFallback` (`--spa-fallback`, shell 0.16.0) it answers as nginx does for a single-page app on a VPS
+// (`try_files $uri $uri/ /index.html`): an extensionless path that matches no file gets index.html with 200; a path with an
+// extension that matches no file stays 404, so a missing artifact still fails. Edge paths, by design of a gate server and tested:
+// a directory with no index.html answers the app shell (nginx: 301 then 403); a dot in a directory name reads as an extension, so
+// `/route/with.dot/` and `/app/run.v2` stay 404 (nginx would serve the app); a MISSING dotfile such as `/.env` has no extension and
+// answers the app shell (an existing file, a dotfile included, is served as it is); the query string is no part of the path (`/route?x=1.5` answers the app shell, `/missing.js?v=2` is 404).
 
 import { createServer } from 'node:http';
 import { existsSync, readFileSync, statSync } from 'node:fs';
@@ -37,12 +43,14 @@ const MIME = {
  * @param {string} dir the built site
  * @param {string} basePath the site's base path ('/' for a custom domain, '/Repo/' for a project page)
  * @param {number} port 0 for any free port (the gate), or a fixed one (a product's preview)
+ * @param {{ spaFallback?: boolean }} options `spaFallback`: answer an extensionless path that matches no file with index.html and 200
  * @returns {Promise<{ url: string, close: () => Promise<void> }>}
  */
-export function servePages(dir, basePath = '/', port = 0) {
+export function servePages(dir, basePath = '/', port = 0, options = {}) {
   const root = resolve(dir);
   const base = basePath.endsWith('/') ? basePath : `${basePath}/`;
   const notFound = join(root, '404.html');
+  const rootIndex = join(root, 'index.html');
   const server = createServer((req, res) => {
     const send = (status, file, headers = {}) => {
       res.writeHead(status, { 'Content-Type': MIME[extname(file).toLowerCase()] ?? 'application/octet-stream', 'Cache-Control': 'no-store', ...headers });
@@ -57,6 +65,8 @@ export function servePages(dir, basePath = '/', port = 0) {
     };
     let path;
     let search = '';
+    // nginx `try_files $uri $uri/ /index.html`: a path with no extension that is no file answers the app shell
+    const miss = () => (options.spaFallback && !extname(path ?? '') && existsSync(rootIndex) ? send(200, rootIndex) : missing());
     try {
       const u = new URL(req.url ?? '/', 'http://x');
       path = decodeURIComponent(u.pathname);
@@ -77,7 +87,7 @@ export function servePages(dir, basePath = '/', port = 0) {
       if (st.isFile()) return send(200, file);
       if (st.isDirectory()) {
         const index = join(file, 'index.html');
-        if (!existsSync(index)) return missing();
+        if (!existsSync(index)) return miss();
         if (!path.endsWith('/')) {
           // the query string survives the redirect, as a Pages host keeps it (an old link /app?case=B2 must reach its case)
           res.writeHead(301, { Location: `${path}/${search}` });
@@ -87,7 +97,7 @@ export function servePages(dir, basePath = '/', port = 0) {
       }
     }
     if (!path.endsWith('/') && existsSync(`${file}.html`)) return send(200, `${file}.html`);
-    return missing();
+    return miss();
   });
   return new Promise((ok) => {
     server.listen(port, '127.0.0.1', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Shared web-app shell, workbench primitives, content primitives, design system and measured gate for the CAOS / Faena public apps (ADR-0016, ADR-0017, ADR-0071).",
   "license": "MIT",
   "author": "Felipe Santibáñez-Leal",

package/reserved-classes.json

@@ -155,6 +155,7 @@
     "caos-surface",
     "caos-surface-actions",
     "caos-surface-body",
+    "caos-surface-focus",
     "caos-surface-head",
     "caos-surface-heading",
     "caos-surface-lede",
@@ -277,6 +278,8 @@
     "tablist",
     "tabpanel",
     "tabs",
+    "tabs-has-slot",
+    "tabs-slot",
     "th-refs",
     "th-refs-label",
     "tick-list",
@@ -292,6 +295,7 @@
     "accent",
     "active",
     "caos-col-text",
+    "caos-focus-norail",
     "compact",
     "contain",
     "error",
@@ -413,6 +417,7 @@
     "caos-focus-hud",
     "caos-focus-instrument",
     "caos-focus-label",
+    "caos-focus-norail",
     "caos-focus-rail",
     "caos-focus-rail-body",
     "caos-focus-shell",
@@ -462,6 +467,7 @@
     "caos-surface",
     "caos-surface-actions",
     "caos-surface-body",
+    "caos-surface-focus",
     "caos-surface-head",
     "caos-surface-heading",
     "caos-surface-lede",
@@ -596,6 +602,8 @@
     "tablist",
     "tabpanel",
     "tabs",
+    "tabs-has-slot",
+    "tabs-slot",
     "th-refs",
     "th-refs-label",
     "tick-list",

package/styles.css

@@ -837,3 +837,24 @@ svg.lucide { flex: none; }
 @media (max-width: 900px) {
   .caos-focus-instrument > .caos-cw-focus { padding: var(--caos-focus-clear-top, 6.6rem) 0.5rem max(0.5rem, var(--caos-focus-clear-bottom, 0px)); }
 }
+
+/* == Focus mode for a SurfacePage App (shell 0.16.0, ADR-0070) ======================================================== */
+
+/* The stage is the open view, laid out as CaseWorkbench's group is (the same clearance under the Focus chrome); a view with no rail
+   leaves the frame one column, so the stage is the whole frame. */
+.caos-focus-instrument > .caos-surface-focus { position: absolute; inset: 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--caos-focus-clear-top, 4.6rem) 0.9rem max(0.9rem, var(--caos-focus-clear-bottom, 0px)); }
+.caos-surface-focus > .tabs { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
+.caos-surface-focus > .tabs > .tabpanel:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.6rem; }
+.caos-focus-shell.caos-focus-norail { grid-template-columns: minmax(0,1fr); }
+@media (max-width: 900px) {
+  .caos-focus-instrument > .caos-surface-focus { padding: var(--caos-focus-clear-top, 6.6rem) 0.5rem max(0.5rem, var(--caos-focus-clear-bottom, 0px)); }
+  .caos-focus-shell.caos-focus-norail { grid-template-rows: minmax(0,1fr); }
+}
+/* The Focus control of a surface sits at the end of the tab row, in a slot beside the tab list, on the same row (never in the head, never
+   inside the tablist). The slot is always there while the surface has Focus, so the row does not move between views; the tabs scroll
+   beside it. The slot repeats the tab list's bottom rule, so the line runs under both. */
+.caos-surface-body > .tabs.tabs-has-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 0.5rem; }
+.tabs-has-slot > .tablist { grid-column: 1; grid-row: 1; }
+.tabs-has-slot > .tabs-slot { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; align-items: center; padding-bottom: 0.4rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--color-border); }
+.tabs-has-slot > .tabs-slot > .caos-focus-enter { align-self: center; padding-block: 0.2rem; }
+.tabs-has-slot > .tabpanel { grid-column: 1 / -1; grid-row: 2; }