@fasl-work/caos-app-shell 0.13.1 → 0.14.0

package/dist/index.js

@@ -4,7 +4,7 @@ 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, useCallback, useContext, useMemo, useLayoutEffect, Children } from 'react';
 import { useInRouterContext, NavLink, useLocation, Navigate, Link } from 'react-router';
-import { Sun, Moon, Languages, Boxes, CodeXml, Globe, Briefcase, Info } from 'lucide-react';
+import { Sun, Moon, Languages, Boxes, CodeXml, Globe, Briefcase, Info, ChevronLeft, ChevronRight, Maximize2, RotateCw } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import katex from 'katex';
 
@@ -483,8 +483,9 @@ function WorkbenchShell({
     overlays
   ] });
 }
-function FocusShell({ stage, rail, title, description, hud, onExit, exitLabel, stageLabel }) {
-  return /* @__PURE__ */ jsxs("main", { className: "caos-focus-shell", children: [
+function FocusShell({ stage, rail, title, description, hud, onExit, exitLabel, stageLabel, landmark = true }) {
+  const Root = landmark ? "main" : "div";
+  return /* @__PURE__ */ jsxs(Root, { className: "caos-focus-shell", "data-focus-shell": "", children: [
     /* @__PURE__ */ jsxs("section", { 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: [
@@ -498,10 +499,10 @@ function FocusShell({ stage, rail, title, description, hud, onExit, exitLabel, s
       /* @__PURE__ */ jsxs("div", { className: "caos-focus-actions", children: [
         /* @__PURE__ */ jsx(LanguageToggle, {}),
         /* @__PURE__ */ jsx(ThemeToggle, {}),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: onExit, children: exitLabel })
+        /* @__PURE__ */ jsx("button", { type: "button", "data-focus-exit": "", onClick: onExit, children: exitLabel })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("aside", { className: "caos-focus-rail", children: rail })
+    /* @__PURE__ */ jsx("aside", { className: "caos-focus-rail", "data-rail": "", children: rail })
   ] });
 }
 
@@ -805,6 +806,8 @@ function CaseSelector(props) {
 function caseKindOf(c) {
   return c.kind ?? "synthetic";
 }
+var ViewMemoryContext = createContext(null);
+var memoryKey = (kind, ariaLabel, ids) => `${kind}|${ariaLabel ?? ""}|${ids.join(",")}`;
 var CitationsContext = createContext({ list: [], byId: {} });
 function CitationsProvider({ items, children }) {
   const byId = {};
@@ -938,7 +941,12 @@ var MAX_PEER_TABS = 6;
 function Tabs({ tabs, initial, value, onChange, ariaLabel }) {
   const baseId = useId();
   const first = tabs[0]?.id ?? "";
-  const [own, setOwn] = useState(initial ?? first);
+  const memory = useContext(ViewMemoryContext);
+  const mkey = memoryKey("tabs", ariaLabel, 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;
+  });
   const active = value ?? own;
   const rowRef = useRef(null);
   useOverflowFade(rowRef, ".tab.active", [active, tabs.length]);
@@ -947,6 +955,7 @@ function Tabs({ tabs, initial, value, onChange, ariaLabel }) {
   }
   function select(id) {
     if (value === void 0) setOwn(id);
+    memory?.set(mkey, id);
     onChange?.(id);
   }
   function onKeyDown(e, idx) {
@@ -1003,7 +1012,12 @@ function Tabs({ tabs, initial, value, onChange, ariaLabel }) {
 function SubTabs({ tabs, initial, value, onChange, ariaLabel, orientation = "horizontal" }) {
   const baseId = useId();
   const first = tabs[0]?.id ?? "";
-  const [own, setOwn] = useState(initial ?? first);
+  const memory = useContext(ViewMemoryContext);
+  const mkey = memoryKey("subtabs", ariaLabel, 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;
+  });
   const active = value ?? own;
   const vertical = orientation === "vertical";
   const rowRef = useRef(null);
@@ -1013,6 +1027,7 @@ function SubTabs({ tabs, initial, value, onChange, ariaLabel, orientation = "hor
   }
   function select(id) {
     if (value === void 0) setOwn(id);
+    memory?.set(mkey, id);
     onChange?.(id);
   }
   function onKeyDown(e, idx) {
@@ -2125,6 +2140,216 @@ var ONWARD_LINKS = {
   technical: { en: "How the work explores this problem", es: "C\xF3mo explora el trabajo este problema" },
   app: { en: "Open the App", es: "Abrir la App" }
 };
+var useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+var FLIP_LIMITS = {
+  title: { en: 8, es: 10 },
+  back: { en: 40, es: 50 }
+};
+var FLIP_TEXT = {
+  show: { en: "Show details", es: "Mostrar detalles" },
+  hide: { en: "Hide details", es: "Ocultar detalles" }
+};
+function FlipCard({ title, label, children, id, defaultOpen = false, open: controlled, onOpenChange, className, lang: forced }) {
+  const stored = useShellLang();
+  const lang = forced ?? stored;
+  const auto = useId().replace(/:/g, "");
+  const base = id ?? `flip-${auto}`;
+  const backId = `${base}-back`;
+  const [own, setOwn] = useState(defaultOpen);
+  const open = controlled ?? own;
+  const front = useRef(null);
+  const back = useRef(null);
+  const byUser = useRef(false);
+  const frontFace = useRef(null);
+  const backFace = useRef(null);
+  useIsoLayoutEffect(() => {
+    frontFace.current?.toggleAttribute("inert", open);
+    backFace.current?.toggleAttribute("inert", !open);
+  }, [open]);
+  useEffect(() => {
+    if (!byUser.current) return;
+    (open ? back : front).current?.focus({ preventScroll: true });
+  }, [open]);
+  function turn(next) {
+    byUser.current = true;
+    if (controlled === void 0) setOwn(next);
+    onOpenChange?.(next);
+  }
+  function onKeyDown(e) {
+    if (e.key === "Escape" && open) {
+      e.preventDefault();
+      e.stopPropagation();
+      turn(false);
+    }
+  }
+  const icon = /* @__PURE__ */ jsx(RotateCw, { size: 14, "aria-hidden": "true", className: "caos-flip-icon" });
+  return /* @__PURE__ */ jsx("div", { className: ["caos-flip", className].filter(Boolean).join(" "), "data-flip-card": "", "data-flip-open": open ? "true" : "false", onKeyDown, children: /* @__PURE__ */ jsxs("div", { className: "caos-flip-inner", children: [
+    /* @__PURE__ */ jsx("div", { className: "caos-flip-face caos-flip-front", "aria-hidden": open ? true : void 0, ref: frontFace, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "caos-flip-toggle",
+        "aria-expanded": open,
+        "aria-controls": backId,
+        "data-flip-toggle": "front",
+        ref: front,
+        onClick: () => turn(true),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "caos-flip-title", "data-flip-title": "", children: title }),
+          icon,
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: FLIP_TEXT.show[lang] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "caos-flip-face caos-flip-back", id: backId, "data-flip-back": "", "aria-hidden": open ? void 0 : true, ref: backFace, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "caos-flip-toggle caos-flip-return",
+          "aria-expanded": open,
+          "aria-controls": backId,
+          "data-flip-toggle": "back",
+          ref: back,
+          onClick: () => turn(false),
+          children: [
+            label ? /* @__PURE__ */ jsx("span", { className: "caos-flip-return-title", children: label }) : /* @__PURE__ */ jsx("span", {}),
+            icon,
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: FLIP_TEXT.hide[lang] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "caos-flip-content", "data-flip-content": "", children })
+    ] })
+  ] }) });
+}
+var DECK_TEXT = {
+  previous: { en: "Previous", es: "Anterior" },
+  next: { en: "Next", es: "Siguiente" },
+  of: { en: "of", es: "de" },
+  to: { en: "to", es: "a" }
+};
+var MIN_CARD_REM = 15;
+var GAP_REM = 0.9;
+var SWIPE_PX = 50;
+function perPageFor(width, minCard, gap) {
+  if (!(width > 0)) return 1;
+  return Math.max(1, Math.floor((width + gap) / (minCard + gap)));
+}
+function deckWindow(n, per, start) {
+  const p = Math.max(1, Math.floor(per));
+  if (p >= n) return { start: 0, end: n };
+  const s = Math.min(Math.max(0, start), n - p);
+  return { start: s, end: s + p };
+}
+function deckPosition(start, shown, n, lang) {
+  const o = DECK_TEXT.of[lang];
+  if (shown <= 1) return `${start + 1} ${o} ${n}`;
+  return `${start + 1} ${DECK_TEXT.to[lang]} ${start + shown} ${o} ${n}`;
+}
+var useIsoLayoutEffect2 = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function CardDeck({ cards, flip = false, carouselAbove = 4, ariaLabel, className, lang: forced }) {
+  const stored = useShellLang();
+  const lang = forced ?? stored;
+  const n = cards.length;
+  const carousel = n > carouselAbove;
+  const rootRef = useRef(null);
+  const [per, setPer] = useState(1);
+  const [start, setStart] = useState(0);
+  const [moved, setMoved] = useState(false);
+  const touch = useRef(null);
+  useIsoLayoutEffect2(() => {
+    const root = rootRef.current;
+    if (!carousel || !root || typeof ResizeObserver === "undefined") return void 0;
+    const measure = () => {
+      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+      setPer(perPageFor(root.clientWidth, MIN_CARD_REM * rem, GAP_REM * rem));
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(root);
+    return () => ro.disconnect();
+  }, [carousel, n]);
+  const win = deckWindow(n, carousel ? per : n, start);
+  const shown = win.end - win.start;
+  const controls = carousel && shown < n;
+  const atStart = win.start <= 0;
+  const atEnd = win.end >= n;
+  function go(to, step = false) {
+    if (!controls) return;
+    setMoved(true);
+    setStart(deckWindow(n, per, step ? win.start + to : to).start);
+  }
+  const page = () => Math.max(1, per);
+  useEffect(() => {
+    const root = rootRef.current;
+    const a = document.activeElement;
+    if (!root || !a || !root.contains(a) || a.checkVisibility?.({ checkVisibilityCSS: true }) !== false) return;
+    (root.querySelector('[data-deck-card]:not([hidden]) [data-flip-card][data-flip-open="false"] [data-flip-toggle="front"], [data-deck-card]:not([hidden]) [data-flip-card][data-flip-open="true"] [data-flip-toggle="back"]') ?? root.querySelector("[data-deck-next]"))?.focus({ preventScroll: true });
+  }, [win.start, win.end]);
+  function onKeyDown(e) {
+    if (!controls || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+    const t2 = e.target;
+    if (t2.closest('input, select, textarea, [contenteditable="true"]')) return;
+    if (e.key === "ArrowRight") go(1, true);
+    else if (e.key === "ArrowLeft") go(-1, true);
+    else if (e.key === "Home") go(0);
+    else if (e.key === "End") go(n);
+    else return;
+    e.preventDefault();
+  }
+  function onTouchStart(e) {
+    const t2 = e.touches[0];
+    touch.current = t2 ? { x: t2.clientX, y: t2.clientY } : null;
+  }
+  function onTouchEnd(e) {
+    const from = touch.current;
+    const t2 = e.changedTouches[0];
+    touch.current = null;
+    if (!from || !t2 || !controls) return;
+    const dx = t2.clientX - from.x;
+    const dy = t2.clientY - from.y;
+    if (Math.abs(dx) >= SWIPE_PX && Math.abs(dx) > 2 * Math.abs(dy)) go(dx < 0 ? page() : -page(), true);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "caos-deck",
+      "data-card-deck": "",
+      "data-deck-mode": carousel ? "carousel" : "row",
+      "data-deck-per": carousel ? Math.min(per, n) : n,
+      "data-deck-flip": flip ? "" : void 0,
+      "data-deck-moved": moved ? "" : void 0,
+      role: carousel ? "group" : void 0,
+      "aria-roledescription": carousel ? "carousel" : void 0,
+      "aria-label": carousel ? ariaLabel : void 0,
+      onKeyDown: carousel ? onKeyDown : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: ["caos-deck-track", className].filter(Boolean).join(" "),
+            "data-deck-track": "",
+            "aria-label": carousel ? void 0 : ariaLabel,
+            style: carousel ? { "--deck-per": Math.min(per, n) } : void 0,
+            onTouchStart: carousel ? onTouchStart : void 0,
+            onTouchEnd: carousel ? onTouchEnd : void 0,
+            children: cards.map((c, i) => /* @__PURE__ */ jsx("li", { className: "caos-deck-card", "data-deck-card": "", hidden: carousel && (i < win.start || i >= win.end), ...c.attrs, children: flip ? /* @__PURE__ */ jsx(FlipCard, { title: c.title, label: c.label, lang, children: c.body }) : /* @__PURE__ */ jsxs("div", { className: "caos-card", children: [
+              /* @__PURE__ */ jsx("strong", { className: "caos-card-title", children: c.title }),
+              c.body
+            ] }) }, c.id ?? i))
+          }
+        ),
+        controls && /* @__PURE__ */ jsxs("div", { className: "caos-deck-bar", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "caos-deck-btn", "data-deck-prev": "", "aria-label": DECK_TEXT.previous[lang], "aria-disabled": atStart, onClick: () => !atStart && go(-page(), true), children: /* @__PURE__ */ jsx(ChevronLeft, { size: 18, "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsx("span", { className: "caos-deck-position", "data-deck-position": "", "aria-live": "polite", children: deckPosition(win.start, shown, n, lang) }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "caos-deck-btn", "data-deck-next": "", "aria-label": DECK_TEXT.next[lang], "aria-disabled": atEnd, onClick: () => !atEnd && go(page(), true), children: /* @__PURE__ */ jsx(ChevronRight, { size: 18, "aria-hidden": "true" }) })
+        ] })
+      ]
+    }
+  );
+}
 var UI = {
   bearers: { en: "Who bears it", es: "Qui\xE9n lo soporta" },
   cost: { en: "Cost", es: "Costo" },
@@ -2188,6 +2413,9 @@ function cleanSvg(text) {
   const root = doc.documentElement;
   if (!root || root.localName !== "svg" || doc.querySelector("parsererror")) return null;
   for (const bad of Array.from(doc.querySelectorAll("script, foreignObject"))) bad.remove();
+  for (const anim of Array.from(doc.querySelectorAll("animate, set"))) {
+    if (/^(xlink:)?href$|^on/i.test(anim.getAttribute("attributeName") ?? "")) anim.remove();
+  }
   for (const el of Array.from(doc.querySelectorAll("*"))) {
     for (const attr of Array.from(el.attributes)) {
       if (/^on/i.test(attr.name) || /^(xlink:)?href$/i.test(attr.name) && /^\s*javascript:/i.test(attr.value)) el.removeAttribute(attr.name);
@@ -2199,10 +2427,41 @@ function cleanSvg(text) {
   if (!root.getAttribute("role")) root.setAttribute("role", "img");
   return new XMLSerializer().serializeToString(root);
 }
+function smilEnd(svg) {
+  const secs = (v) => {
+    const m = /^\s*(\d*\.?\d+)\s*(ms|s)?\s*$/.exec(v ?? "");
+    return m ? Number(m[1]) / (m[2] === "ms" ? 1e3 : 1) : 0;
+  };
+  let end = 0;
+  for (const a of Array.from(svg.querySelectorAll("animate, animateTransform, animateMotion, set"))) {
+    end = Math.max(end, secs(a.getAttribute("begin")) + secs(a.getAttribute("dur")));
+  }
+  return end;
+}
+function useStillSmil(host, svg) {
+  useEffect(() => {
+    const el = host.current?.querySelector("svg");
+    if (!svg || !el || typeof matchMedia === "undefined" || !el.querySelector("animate, animateTransform, animateMotion, set")) return void 0;
+    const mq = matchMedia("(prefers-reduced-motion: reduce)");
+    const apply = () => {
+      if (mq.matches) {
+        el.setCurrentTime(smilEnd(el));
+        el.pauseAnimations();
+      } else {
+        el.unpauseAnimations();
+      }
+    };
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, [host, svg]);
+}
 function Illustration({ name, spec, base, lang }) {
   const file = typeof spec.file === "string" ? spec.file : spec.file[lang];
   const url = /^([a-z]+:)?\/\//i.test(file) || file.startsWith("/") ? file : `${base}${file}`;
   const [loaded, setLoaded] = useState({ status: "loading" });
+  const art = useRef(null);
+  useStillSmil(art, loaded.status === "ready" ? loaded.svg : null);
   useEffect(() => {
     let live = true;
     setLoaded({ status: "loading" });
@@ -2229,7 +2488,7 @@ function Illustration({ name, spec, base, lang }) {
       "data-exec-file": file,
       "data-state": loaded.status === "ready" ? void 0 : loaded.status,
       children: [
-        loaded.status === "ready" ? /* @__PURE__ */ jsx("div", { className: "caos-exec-art", dangerouslySetInnerHTML: { __html: loaded.svg } }) : loaded.status === "error" ? /* @__PURE__ */ jsxs("p", { className: "caos-exec-fig-error", role: "alert", children: [
+        loaded.status === "ready" ? /* @__PURE__ */ jsx("div", { className: "caos-exec-art", ref: art, dangerouslySetInnerHTML: { __html: loaded.svg } }) : loaded.status === "error" ? /* @__PURE__ */ jsxs("p", { className: "caos-exec-fig-error", role: "alert", children: [
           t(UI.missing, lang),
           ": ",
           /* @__PURE__ */ jsx("code", { children: file }),
@@ -2311,19 +2570,32 @@ function ExecutiveViewBody({ data, base = "/", lang: forced, open = 1, onOpenTec
       art("pain"),
       /* @__PURE__ */ jsx("ul", { className: "caos-exec-figures", children: d.pain.figures.map((f, i) => /* @__PURE__ */ jsx(Figure2, { f, path: `pain.figures[${i}]`, kind: "pain.figures" }, i)) }),
       /* @__PURE__ */ jsx("h3", { className: "caos-exec-sub", children: t(UI.bearers, lang) }),
-      /* @__PURE__ */ jsx("ul", { className: "caos-exec-cards", children: d.pain.bearers.map((b, i) => /* @__PURE__ */ jsxs("li", { className: "caos-exec-card", "data-exec-item": "pain.bearers", children: [
-        /* @__PURE__ */ jsx("strong", { children: field(`pain.bearers[${i}].who`, b.who) }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { children: t(UI.cost, lang) }),
-          " ",
-          field(`pain.bearers[${i}].cost`, b.cost)
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { children: t(UI.measure, lang) }),
-          " ",
-          field(`pain.bearers[${i}].measure`, b.measure)
-        ] })
-      ] }, i)) }),
+      /* @__PURE__ */ jsx(
+        CardDeck,
+        {
+          flip: true,
+          ariaLabel: t(UI.bearers, lang),
+          className: "caos-exec-cards",
+          cards: d.pain.bearers.map((b, i) => ({
+            id: i,
+            title: field(`pain.bearers[${i}].who`, b.who),
+            label: t(b.who, lang),
+            attrs: { "data-exec-item": "pain.bearers" },
+            body: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Label, { children: t(UI.cost, lang) }),
+                " ",
+                field(`pain.bearers[${i}].cost`, b.cost)
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Label, { children: t(UI.measure, lang) }),
+                " ",
+                field(`pain.bearers[${i}].measure`, b.measure)
+              ] })
+            ] })
+          }))
+        }
+      ),
       /* @__PURE__ */ jsx("h3", { className: "caos-exec-sub", children: t(UI.causes, lang) }),
       /* @__PURE__ */ jsx("ul", { className: "caos-exec-causes", children: d.pain.causes.map((c, i) => /* @__PURE__ */ jsxs("li", { className: "caos-exec-cause", "data-exec-item": "pain.causes", "data-exec-weight": c.weight, children: [
         /* @__PURE__ */ jsxs("div", { className: "caos-exec-cause-head", children: [
@@ -2359,38 +2631,66 @@ function ExecutiveViewBody({ data, base = "/", lang: forced, open = 1, onOpenTec
     // 3. the current situation
     /* @__PURE__ */ jsxs(Section, { n: 3, lang, keyMessage: d.situation.key_message, keyPath: "situation.key_message", children: [
       /* @__PURE__ */ jsx("h3", { className: "caos-exec-sub", children: t(UI.roles, lang) }),
-      /* @__PURE__ */ jsx("ul", { className: "caos-exec-cards", children: d.situation.roles.map((r, i) => /* @__PURE__ */ jsxs("li", { className: "caos-exec-card", "data-exec-item": "situation.roles", children: [
-        /* @__PURE__ */ jsx("strong", { children: field(`situation.roles[${i}].role`, r.role) }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { children: t(UI.decides, lang) }),
-          " ",
-          field(`situation.roles[${i}].decides`, r.decides)
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { children: t(UI.needs, lang) }),
-          " ",
-          field(`situation.roles[${i}].needs`, r.needs)
-        ] })
-      ] }, i)) }),
+      /* @__PURE__ */ jsx(
+        CardDeck,
+        {
+          flip: true,
+          ariaLabel: t(UI.roles, lang),
+          className: "caos-exec-cards",
+          cards: d.situation.roles.map((r, i) => ({
+            id: i,
+            title: field(`situation.roles[${i}].role`, r.role),
+            label: t(r.role, lang),
+            attrs: { "data-exec-item": "situation.roles" },
+            body: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Label, { children: t(UI.decides, lang) }),
+                " ",
+                field(`situation.roles[${i}].decides`, r.decides)
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Label, { children: t(UI.needs, lang) }),
+                " ",
+                field(`situation.roles[${i}].needs`, r.needs)
+              ] })
+            ] })
+          }))
+        }
+      ),
       /* @__PURE__ */ jsx("p", { className: "caos-exec-interaction", children: field("situation.interaction", d.situation.interaction) }),
       art("situation"),
       /* @__PURE__ */ jsx("h3", { className: "caos-exec-sub", children: t(UI.sota, lang) }),
-      /* @__PURE__ */ jsx("ul", { className: "caos-exec-cards", children: d.situation.state_of_the_art.map((a, i) => /* @__PURE__ */ jsxs("li", { className: "caos-exec-card", "data-exec-item": "situation.state_of_the_art", children: [
-        /* @__PURE__ */ jsxs("strong", { children: [
-          field(`situation.state_of_the_art[${i}].approach`, a.approach),
-          /* @__PURE__ */ jsx(Cite2, { id: a.source })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { children: t(UI.achieves, lang) }),
-          " ",
-          field(`situation.state_of_the_art[${i}].achieves`, a.achieves)
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { children: t(UI.fallsShort, lang) }),
-          " ",
-          field(`situation.state_of_the_art[${i}].falls_short`, a.falls_short)
-        ] })
-      ] }, i)) }),
+      /* @__PURE__ */ jsx(
+        CardDeck,
+        {
+          flip: true,
+          ariaLabel: t(UI.sota, lang),
+          className: "caos-exec-cards",
+          cards: d.situation.state_of_the_art.map((a, i) => ({
+            id: i,
+            title: field(`situation.state_of_the_art[${i}].approach`, a.approach),
+            label: t(a.approach, lang),
+            attrs: { "data-exec-item": "situation.state_of_the_art" },
+            body: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Label, { children: t(UI.achieves, lang) }),
+                " ",
+                field(`situation.state_of_the_art[${i}].achieves`, a.achieves)
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Label, { children: t(UI.fallsShort, lang) }),
+                " ",
+                field(`situation.state_of_the_art[${i}].falls_short`, a.falls_short)
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Label, { children: t(UI.source, lang) }),
+                " ",
+                /* @__PURE__ */ jsx(Cite2, { id: a.source })
+              ] })
+            ] })
+          }))
+        }
+      ),
       /* @__PURE__ */ jsxs("p", { className: "caos-exec-status", "data-exec-item": "situation.status", children: [
         /* @__PURE__ */ jsx(Label, { children: field("situation.status.heading", d.situation.status.heading) }),
         " ",
@@ -2434,11 +2734,24 @@ function ExecutiveViewBody({ data, base = "/", lang: forced, open = 1, onOpenTec
       /* @__PURE__ */ jsx(Paragraphs, { list: d.proposal.paragraphs, path: "proposal.paragraphs" }),
       art("proposal"),
       /* @__PURE__ */ jsx("h3", { className: "caos-exec-sub", children: t(UI.fourCs, lang) }),
-      /* @__PURE__ */ jsx("ul", { className: "caos-exec-cs", children: d.proposal.four_cs.map((r, i) => /* @__PURE__ */ jsxs("li", { className: "caos-exec-card", "data-exec-c": i, "data-exec-item": "proposal.four_cs", children: [
-        /* @__PURE__ */ jsx("strong", { "data-exec-field": `proposal.four_cs[${i}].c`, "data-exec-cname": "", children: t(FOUR_CS[i].name, lang) }),
-        /* @__PURE__ */ jsx("small", { className: "caos-exec-cdef", "data-exec-cdef": "", children: t(FOUR_CS[i].definition, lang) }),
-        /* @__PURE__ */ jsx("span", { children: field(`proposal.four_cs[${i}].applies`, r.applies) })
-      ] }, i)) }),
+      /* @__PURE__ */ jsx(
+        CardDeck,
+        {
+          flip: true,
+          ariaLabel: t(UI.fourCs, lang),
+          className: "caos-exec-cs",
+          cards: d.proposal.four_cs.map((r, i) => ({
+            id: i,
+            title: /* @__PURE__ */ jsx("span", { "data-exec-field": `proposal.four_cs[${i}].c`, "data-exec-cname": "", children: t(FOUR_CS[i].name, lang) }),
+            label: t(FOUR_CS[i].name, lang),
+            attrs: { "data-exec-c": i, "data-exec-item": "proposal.four_cs" },
+            body: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("small", { className: "caos-exec-cdef", "data-exec-cdef": "", children: t(FOUR_CS[i].definition, lang) }),
+              /* @__PURE__ */ jsx("span", { children: field(`proposal.four_cs[${i}].applies`, r.applies) })
+            ] })
+          }))
+        }
+      ),
       /* @__PURE__ */ jsx("h3", { className: "caos-exec-sub", children: t(UI.actions, lang) }),
       /* @__PURE__ */ jsx("ol", { className: "caos-exec-actions", children: d.proposal.actions.map((a, i) => /* @__PURE__ */ jsxs("li", { className: "caos-exec-card", "data-exec-item": "proposal.actions", children: [
         /* @__PURE__ */ jsx("strong", { children: field(`proposal.actions[${i}].action`, a.action) }),
@@ -2523,6 +2836,13 @@ function replaceQueryParam(param, value) {
   const next = withCaseParam(window.location.search, value, param);
   window.history.replaceState(window.history.state, "", `${window.location.pathname}${next}${window.location.hash}`);
 }
+function removeQueryParam(param) {
+  if (typeof window === "undefined") return;
+  const p = new URLSearchParams(window.location.search);
+  p.delete(param);
+  const q = p.toString();
+  window.history.replaceState(window.history.state, "", `${window.location.pathname}${q ? `?${q}` : ""}${window.location.hash}`);
+}
 function useUrlView(ids, param, value, onChange) {
   const [own, setOwn] = useState(
     () => param && typeof window !== "undefined" ? readCaseParam(window.location.search, param) : null
@@ -2787,7 +3107,7 @@ function BarChart({ title, data, axis, orientation = "horizontal", values = true
 function isSections(rail) {
   return Array.isArray(rail) && rail.every((s) => typeof s === "object" && s !== null && "id" in s && "content" in s);
 }
-function WorkbenchLayout({ rail, railHead, children, railLabel, className }) {
+function RailBody({ rail, railHead, railLabel }) {
   const lang = useShellLang();
   const sections = isSections(rail) ? rail : null;
   const [active, setActive] = useState(sections?.[0]?.id ?? "");
@@ -2807,38 +3127,43 @@ function WorkbenchLayout({ rail, railHead, children, railLabel, className }) {
       document.getElementById(`${baseId}-rs-${target.id}`)?.focus();
     }
   }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    railHead && /* @__PURE__ */ jsx("div", { className: "caos-wb-rail-head", children: railHead }),
+    sections ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "caos-wb-rail-sections", role: "tablist", "aria-label": label, ref: rowRef, children: sections.map((s, idx) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          id: `${baseId}-rs-${s.id}`,
+          "aria-selected": s.id === current?.id,
+          "aria-controls": `${baseId}-rp-${s.id}`,
+          tabIndex: s.id === current?.id ? 0 : -1,
+          className: s.id === current?.id ? "chip on" : "chip",
+          onClick: () => setActive(s.id),
+          onKeyDown: (e) => onKeyDown(e, idx),
+          children: pick(s.label, lang)
+        },
+        s.id
+      )) }),
+      current && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "caos-wb-rail-panel",
+          role: "tabpanel",
+          id: `${baseId}-rp-${current.id}`,
+          "aria-labelledby": `${baseId}-rs-${current.id}`,
+          children: current.content
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("div", { className: "caos-wb-rail-panel", children: rail })
+  ] });
+}
+function WorkbenchLayout({ rail, railHead, children, railLabel, className }) {
+  const lang = useShellLang();
+  const label = pick(railLabel ?? { en: "Controls", es: "Controles" }, lang);
   return /* @__PURE__ */ jsxs("div", { className: ["page-body", "wide", "caos-wb", className].filter(Boolean).join(" "), "data-workbench": "", children: [
-    /* @__PURE__ */ jsxs("aside", { className: "caos-wb-rail", "aria-label": label, "data-rail": "", children: [
-      railHead && /* @__PURE__ */ jsx("div", { className: "caos-wb-rail-head", children: railHead }),
-      sections ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "caos-wb-rail-sections", role: "tablist", "aria-label": label, ref: rowRef, children: sections.map((s, idx) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            id: `${baseId}-rs-${s.id}`,
-            "aria-selected": s.id === current?.id,
-            "aria-controls": `${baseId}-rp-${s.id}`,
-            tabIndex: s.id === current?.id ? 0 : -1,
-            className: s.id === current?.id ? "chip on" : "chip",
-            onClick: () => setActive(s.id),
-            onKeyDown: (e) => onKeyDown(e, idx),
-            children: pick(s.label, lang)
-          },
-          s.id
-        )) }),
-        current && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "caos-wb-rail-panel",
-            role: "tabpanel",
-            id: `${baseId}-rp-${current.id}`,
-            "aria-labelledby": `${baseId}-rs-${current.id}`,
-            children: current.content
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx("div", { className: "caos-wb-rail-panel", children: rail })
-    ] }),
+    /* @__PURE__ */ jsx("aside", { className: "caos-wb-rail", "aria-label": label, "data-rail": "", children: /* @__PURE__ */ jsx(RailBody, { rail, railHead, railLabel }) }),
     /* @__PURE__ */ jsx("section", { className: "caos-wb-main", "data-instrument": "", children })
   ] });
 }
@@ -2913,13 +3238,73 @@ 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 });
 }
 function CaseWorkbench(props) {
-  const { caseId, cases, source, controls, replayOnly, variants, rail, railLabel, groups, compare, context: context2, group, onGroupChange, deepLinkView = true, ariaLabel } = 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 variantId = variants?.activeId;
   const stateKey = useMemo(
     () => makeStateKey({ caseId, variantId: variantId ?? null, source: source ?? null, controls: controls ?? {} }),
@@ -2944,32 +3329,66 @@ function CaseWorkbench(props) {
     );
   }
   const [openGroup, selectGroup] = useUrlView(tabs.map((t2) => t2.id), viewParamOf(deepLinkView), group, onGroupChange);
-  const railHead = cases || variants ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const pickers = cases || variants ? /* @__PURE__ */ jsxs(Fragment, { children: [
     cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases }),
     variants && /* @__PURE__ */ jsx(VariantBar, { ...variants })
   ] }) : null;
-  return /* @__PURE__ */ jsx(WorkbenchStateContext.Provider, { value: { stateKey, caseId, variantId, source }, children: /* @__PURE__ */ jsx(WorkbenchLayout, { rail: rail ?? null, railHead, railLabel, children: /* @__PURE__ */ jsx(
-    "div",
+  const enter = focusCfg && /* @__PURE__ */ jsxs(
+    "button",
     {
-      className: "caos-cw",
-      "data-case-workbench": "",
-      "data-group-count": tabs.length,
-      "data-case": caseId,
-      "data-variant": variantId ?? "",
-      "data-source": source ?? "",
-      "data-state-key": stateKey,
-      "data-replay-only": replayOnly ? "1" : void 0,
-      children: /* @__PURE__ */ jsx(
-        Tabs,
-        {
-          tabs,
-          value: openGroup,
-          onChange: selectGroup,
-          ariaLabel: pick(ariaLabel ?? { en: "Case views", es: "Vistas del caso" }, lang)
-        }
-      )
+      ref: enterRef,
+      type: "button",
+      className: "btn caos-focus-enter",
+      "data-focus-enter": "",
+      "aria-label": FOCUS_TEXT.enterLabel[lang],
+      title: FOCUS_TEXT.enterLabel[lang],
+      onClick: () => setFocus(true),
+      children: [
+        /* @__PURE__ */ jsx(Maximize2, { size: 14, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children: FOCUS_TEXT.enter[lang] })
+      ]
+    }
+  );
+  const railHead = pickers || enter ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    pickers,
+    enter
+  ] }) : null;
+  const instrumentData = {
+    "data-case-workbench": "",
+    "data-group-count": tabs.length,
+    "data-case": caseId,
+    "data-variant": variantId ?? "",
+    "data-source": source ?? "",
+    "data-state-key": stateKey,
+    "data-replay-only": replayOnly ? "1" : void 0
+  };
+  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(
+      FocusShell,
+      {
+        title: focusCfg.title !== void 0 ? pick(focusCfg.title, lang) : caseName,
+        description: focusCfg.description !== void 0 ? pick(focusCfg.description, lang) : open?.label ?? "",
+        hud: (focusCfg.hud ?? []).map((h) => ({ label: pick(h.label, lang), value: h.value })),
+        onExit: () => setFocus(false),
+        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 }) }) }) }) }),
+        rail: /* @__PURE__ */ jsx("div", { className: "caos-focus-rail-body", children: /* @__PURE__ */ jsx(RailBody, { rail: rail ?? null, railHead: pickers, 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(
+    Tabs,
+    {
+      tabs,
+      value: openGroup,
+      onChange: selectGroup,
+      ariaLabel: pick(ariaLabel ?? { en: "Case views", es: "Vistas del caso" }, lang)
     }
-  ) }) });
+  ) }) }) }) });
 }
 function toneOf(it) {
   if (it.tone) return it.tone;
@@ -3171,4 +3590,4 @@ function ViewsRow({ children, shares }) {
   }) });
 }
 
-export { AppShell, ArchitectureModal, BREAKPOINTS, BarChart, Callout, CaseSelector, CaseWorkbench, ChipGroup, CitationsProvider, Cite, DOC_AREAS, DocPage, DocReferences, DocRefsScope, DocSection, EXECUTIVE_SCHEMA_VERSION, Equation, ExecutiveView, FOUR_CS, Figure, 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, firstAppearance, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, readCaseParam, 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, usePausedViz, useUrlView, useWorkbenchState, validateArchitectureConfig, validateExecutive, viewParamOf, widestLabel, withCaseParam };