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

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 })
   ] });
 }
 
@@ -795,17 +795,64 @@ function CaseSelector(props) {
   const visible = casesInSource(cases, source);
   const groups = groupByCategory(visible);
   const modified = cases.find((c) => c.id === modifiedFromId) ?? null;
+  const wrapRef = useRef(null);
+  const [minHeight, setMinHeight] = useState(null);
+  const nameKey = visible.map((c) => c.name).join("
");
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    const display = wrap?.querySelector(".cs-select-display");
+    if (!wrap || !display) return void 0;
+    const names = nameKey ? nameKey.split("
") : [];
+    const measure = () => {
+      const st = getComputedStyle(display);
+      const room = display.clientWidth - parseFloat(st.paddingLeft) - parseFloat(st.paddingRight);
+      if (!(room > 0)) return;
+      const copy = document.createElement("span");
+      copy.className = "cs-select-text";
+      copy.setAttribute("aria-hidden", "true");
+      copy.setAttribute("style", `position:absolute;visibility:hidden;left:0;top:0;width:${room}px;display:block;overflow:visible;max-height:none;-webkit-line-clamp:unset;line-clamp:unset`);
+      display.append(copy);
+      let tallest = 0;
+      for (const n of names) {
+        copy.textContent = n;
+        tallest = Math.max(tallest, copy.getBoundingClientRect().height);
+      }
+      const line = parseFloat(getComputedStyle(copy).lineHeight) || parseFloat(st.fontSize) * 1.25;
+      copy.remove();
+      const frame = parseFloat(st.paddingTop) + parseFloat(st.paddingBottom) + parseFloat(st.borderTopWidth) + parseFloat(st.borderBottomWidth);
+      const next = tallest > line * 1.5 ? Math.ceil((tallest + frame) * 100) / 100 : null;
+      setMinHeight((prev) => prev === next ? prev : next);
+    };
+    measure();
+    let width = wrap.getBoundingClientRect().width;
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+      const w = wrap.getBoundingClientRect().width;
+      if (w !== width) {
+        width = w;
+        measure();
+      }
+    });
+    ro?.observe(wrap);
+    void document.fonts?.ready.then(measure);
+    return () => ro?.disconnect();
+  }, [layout, nameKey]);
+  const options = groups.flatMap((g) => g.cases);
+  const selectedName = (options.find((c) => c.id === selectedId) ?? options.find((c) => !c.disabled))?.name ?? "";
   const select = /* @__PURE__ */ jsx(
     "select",
     {
       "data-control": "case",
-      className: "select cs-select",
+      className: "select cs-select cs-select-native",
       "aria-label": ariaLabel ?? "Case selector",
       value: selectedId,
       onChange: (e) => onSelect(e.target.value),
       children: groups.map((g) => /* @__PURE__ */ jsx("optgroup", { label: g.category || " ", children: g.cases.map((c) => /* @__PURE__ */ jsx("option", { value: c.id, disabled: c.disabled, title: caseTooltip(c) || void 0, children: c.name }, c.id)) }, g.category || "_"))
     }
   );
+  const selectBox = /* @__PURE__ */ jsxs("div", { className: "cs-select-wrap", ref: wrapRef, children: [
+    /* @__PURE__ */ jsx("div", { className: "cs-select-display", style: minHeight === null ? void 0 : { minHeight }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "cs-select-text", children: selectedName }) }),
+    select
+  ] });
   return /* @__PURE__ */ jsxs("div", { className: `cs${className ? ` ${className}` : ""}`, role: "group", "aria-label": ariaLabel ?? "Case selector", children: [
     source && lanes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "cs-source", children: [
       /* @__PURE__ */ jsx("span", { className: "cs-source-label", children: t2.source }),
@@ -824,9 +871,9 @@ function CaseSelector(props) {
     ] }),
     source && source !== "synthetic" && /* @__PURE__ */ jsx("p", { className: "cs-locked banner", children: lockedNote ?? t2.lockedNote }),
     layout === "select" && (props.accessory ? /* @__PURE__ */ jsxs("div", { className: "cs-select-row", children: [
-      select,
+      selectBox,
       props.accessory
-    ] }) : select),
+    ] }) : selectBox),
     layout === "chips" && groups.map((g) => /* @__PURE__ */ jsxs("div", { className: "cs-group", role: "group", "aria-label": g.category || void 0, "data-control": "case", children: [
       g.category && /* @__PURE__ */ jsx("span", { className: "cs-group-label", children: g.category }),
       /* @__PURE__ */ jsx("div", { className: "cs-chips", children: g.cases.map((c) => {
@@ -867,7 +914,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 +1012,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 +1038,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 +1082,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 +1103,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 +1113,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 +1123,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 +1198,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 +2971,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 +3484,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 +3492,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 ?? {} }),
@@ -3405,19 +3534,12 @@ function CaseWorkbench(props) {
       ]
     }
   );
-  const besideSelect = Boolean(cases && (cases.layout ?? "chips") === "select");
   const pickers = cases || variants ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases, accessory: besideSelect ? enter : cases.accessory }),
+    cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases }),
     variants && /* @__PURE__ */ jsx(VariantBar, { ...variants })
   ] }) : null;
-  const focusPickers = cases || variants ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases, accessory: cases.accessory }),
-    variants && /* @__PURE__ */ jsx(VariantBar, { ...variants })
-  ] }) : null;
-  const railHead = pickers || enter ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    pickers,
-    besideSelect ? null : enter
-  ] }) : null;
+  const railHead = pickers;
+  const focusPickers = pickers;
   const instrumentData = {
     "data-case-workbench": "",
     "data-group-count": tabs.length,
@@ -3430,7 +3552,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,18 +3562,19 @@ 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,
       value: openGroup,
       onChange: selectGroup,
-      ariaLabel: pick(ariaLabel ?? { en: "Case views", es: "Vistas del caso" }, lang)
+      ariaLabel: pick(ariaLabel ?? { en: "Case views", es: "Vistas del caso" }, lang),
+      trailing: enter || void 0
     }
   ) }) }) }) });
 }
@@ -3655,4 +3778,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

@@ -181,6 +181,67 @@ export function installLib() {
     };
   };
 
+  /**
+   * Selects whose selected option does not fit the room it leaves, or a case select that shows another name than the one it holds (BL-074, shell
+   * 0.17.0; the reviews of 0.17.0). What is measured is what the reader sees:
+   * - a select with the shell's display (`.cs-select-wrap`, the case select since the trial of 0.17.0) shows the name whole at any length in the
+   *   display's real `.cs-select-text` element: the name is cut when that element overflows its box (`scrollHeight` or `scrollWidth` past its
+   *   `clientHeight` or `clientWidth` by more than 1px, e.g. a product stylesheet that clamps it), measured on the element itself, never on a probe
+   *   copy, and when the display's own box is smaller than its content (a product stylesheet that fixes its height); the display is stale when the name it shows, whitespace normalized, differs from the text of the option the select holds;
+   * - any other select shows its text on one line: the room is its width less its own CSS padding and less the native arrow, which is
+   *   measured, not assumed (a probe select of the same class holding one character, sized to its content; 0 with `appearance: none`).
+   * Plain text is measured with the select's own font on one canvas. Runs in the App and inside Focus (its rail holds a case select too).
+   */
+  const selectCuts = () => {
+    const cuts = [];
+    const mctx = document.createElement('canvas').getContext('2d');
+    const norm = (t) => (t ?? '').trim().replace(/\s+/g, ' ');
+    for (const sel of document.querySelectorAll('select')) {
+      if (!mctx || !visible(sel)) continue;
+      const ss = getComputedStyle(sel);
+      const held = norm(sel.options[sel.selectedIndex]?.textContent);
+      const display = sel.closest('.cs-select-wrap')?.querySelector('.cs-select-display');
+      if (display) {
+        const t = display.querySelector('.cs-select-text') ?? display;
+        const shown = norm(t.textContent);
+        if (shown !== held) {
+          cuts.push(`${describe(sel)} shows "${shown}" while the select holds "${held}" (a stale display)`);
+          continue;
+        }
+        const overV = t.scrollHeight > t.clientHeight + 1;
+        const overH = t.scrollWidth > t.clientWidth + 1;
+        if (overV || overH) {
+          const line = Number.parseFloat(getComputedStyle(t).lineHeight) || 1;
+          cuts.push(`${describe(sel)} cuts the case name "${shown}" (the name needs ${Math.round(t.scrollHeight / line)} lines, ${Math.round(t.scrollHeight)}px high and ${Math.round(t.scrollWidth)}px wide, and its box holds ${Math.round(t.clientHeight)}px by ${Math.round(t.clientWidth)}px; held option "${held}")`);
+        } else if (display.scrollHeight > display.clientHeight + 1 || display.scrollWidth > display.clientWidth + 1) {
+          // the text fits its own box but the display's box is smaller (a product stylesheet that fixes the display's height)
+          cuts.push(`${describe(sel)} cuts the case name "${shown}" in its display (the name needs ${Math.round(display.scrollHeight)}px by ${Math.round(display.scrollWidth)}px, the display holds ${Math.round(display.clientHeight)}px by ${Math.round(display.clientWidth)}px; held option "${held}")`);
+        }
+        continue;
+      }
+      const text = held;
+      if (!text) continue;
+      mctx.font = `${ss.fontStyle} ${ss.fontWeight} ${ss.fontSize} ${ss.fontFamily}`;
+      const pad = Number.parseFloat(ss.paddingLeft) + Number.parseFloat(ss.paddingRight);
+      let arrow = 0;
+      const host = sel.parentElement;
+      if (host) {
+        const probe = sel.cloneNode(false);
+        for (const a of [...probe.attributes]) if (a.name !== 'class') probe.removeAttribute(a.name);
+        probe.append(new Option('x'));
+        probe.setAttribute('style', 'position:absolute;visibility:hidden;width:auto;min-width:0;max-width:none;flex:none;left:0;top:0');
+        host.append(probe);
+        const pv = getComputedStyle(probe);
+        arrow = Math.max(0, probe.clientWidth - Number.parseFloat(pv.paddingLeft) - Number.parseFloat(pv.paddingRight) - mctx.measureText('x').width);
+        probe.remove();
+      }
+      const need = mctx.measureText(text).width;
+      const has = sel.clientWidth - pad - arrow;
+      if (need > has + 1) cuts.push(`${describe(sel)} cuts "${text}" (${Math.round(need)}px of text in ${Math.round(has)}px of room, the ${Math.round(arrow)}px arrow taken out)`);
+    }
+    return cuts;
+  };
+
   /** The static layout of the current view (G5, G6 inputs, ADR-0071 and ADR-0017 measures). */
   G.facts = () => {
     const vw = window.innerWidth;
@@ -272,6 +333,8 @@ export function installLib() {
       if (!named) truncated.push(describe(el));
     }
 
+    const cutSelects = selectCuts();
+
     // Containers that cut their content: overflow hidden or clip with more content than box (S1, G5).
     const clipped = [];
     const containers = new Set([de, body, document.getElementById('root'), ...document.querySelectorAll('main, .page, .page-body, [data-instrument], [data-rail], .tabpanel, .caos-cw, [data-plot]')]);
@@ -415,6 +478,8 @@ export function installLib() {
       rail,
       truncated: truncated.slice(0, 5),
       truncatedCount: truncated.length,
+      cutSelects: cutSelects.slice(0, 5),
+      cutSelectCount: cutSelects.length,
       clipped,
       instrument,
       surfaces,
@@ -1029,7 +1094,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);
@@ -1061,12 +1128,19 @@ export function installLib() {
     return {
       focus: Boolean(shell),
       covered,
+      cutSelects: (() => { const c = selectCuts(); return { count: c.length, list: c.slice(0, 5) }; })(),
       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,