@fasl-work/caos-app-shell 0.6.6 → 0.6.8

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useState, useRef, useEffect, useCallback, useId, useContext } from 'react';
+import { createContext, useState, useRef, useId, useEffect, useCallback, useContext } from 'react';
 import { useLocation, NavLink } from 'react-router';
 import { Sun, Moon, Languages, Boxes, CodeXml, Globe, Briefcase, Info } from 'lucide-react';
 import { create } from 'zustand';
@@ -127,19 +127,53 @@ function ArchitectureModal({ config, onClose }) {
   const [active, setActive] = useState(tabs[0]?.id ?? "");
   const [svg, setSvg] = useState(null);
   const [err, setErr] = useState(null);
+  const [fullSize, setFullSize] = useState(false);
+  const [nativeWidth, setNativeWidth] = useState(800);
+  const modalRef = useRef(null);
+  const diagramRef = useRef(null);
   const closeRef = useRef(null);
+  const latestClose = useRef(onClose);
+  latestClose.current = onClose;
+  const id = useId();
   useEffect(() => {
+    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const focusable = () => [...modalRef.current?.querySelectorAll(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    ) ?? []].filter((element) => element.tabIndex >= 0 && element.getClientRects().length > 0);
     const onKey = (e) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        latestClose.current();
+      }
+      if (e.key !== "Tab") return;
+      const elements = focusable(), first = elements[0], last = elements.at(-1);
+      if (!first || !last) {
+        e.preventDefault();
+        return;
+      }
+      if (!modalRef.current?.contains(document.activeElement) || (e.shiftKey ? document.activeElement === first : document.activeElement === last)) {
+        e.preventDefault();
+        (e.shiftKey ? last : first).focus();
+      }
     };
-    window.addEventListener("keydown", onKey);
+    const onFocus = (e) => {
+      if (e.target instanceof Node && !modalRef.current?.contains(e.target)) closeRef.current?.focus();
+    };
+    window.addEventListener("keydown", onKey, true);
+    document.addEventListener("focusin", onFocus);
     closeRef.current?.focus();
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
+    return () => {
+      window.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("focusin", onFocus);
+      if (opener?.isConnected) opener.focus();
+    };
+  }, []);
   const tab = tabs.find((t) => t.id === active) ?? tabs[0];
   useEffect(() => {
     if (!tab) return;
     setErr(null);
+    setFullSize(false);
     const raw = tab.svg.trim();
     if (raw.startsWith("<svg")) {
       setSvg(raw);
@@ -166,12 +200,19 @@ function ArchitectureModal({ config, onClose }) {
       cancelled = true;
     };
   }, [tab]);
+  useEffect(() => {
+    const element = diagramRef.current?.querySelector("svg");
+    if (!element) return;
+    const width = element.viewBox.baseVal.width || element.width.baseVal.value;
+    setNativeWidth(Number.isFinite(width) && width > 0 ? width : 800);
+  }, [svg]);
   if (!tab) return null;
   const title = (es ? config.title_es : config.title_en) ?? (es ? "Arquitectura / C\xF3mo funciona" : "Architecture / How it works");
   const body = (es ? tab.body_es : tab.body_en).split(/\n\s*\n/);
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: modalRef,
       role: "dialog",
       "aria-modal": "true",
       "aria-label": title,
@@ -204,9 +245,20 @@ function ArchitectureModal({ config, onClose }) {
               return /* @__PURE__ */ jsx(
                 "button",
                 {
+                  id: `${id}-${t.id}`,
                   role: "tab",
                   "aria-selected": sel,
+                  "aria-controls": `${id}-panel`,
+                  tabIndex: sel ? 0 : -1,
                   onClick: () => setActive(t.id),
+                  onKeyDown: (event) => {
+                    const index = tabs.indexOf(t);
+                    const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : event.key === "ArrowRight" ? (index + 1) % tabs.length : event.key === "ArrowLeft" ? (index - 1 + tabs.length) % tabs.length : -1;
+                    if (next < 0) return;
+                    event.preventDefault();
+                    setActive(tabs[next].id);
+                    document.getElementById(`${id}-${tabs[next].id}`)?.focus();
+                  },
                   style: {
                     fontSize: 12.5,
                     padding: "5px 10px",
@@ -223,20 +275,25 @@ function ArchitectureModal({ config, onClose }) {
                 t.id
               );
             }) }),
-            /* @__PURE__ */ jsxs("div", { role: "tabpanel", "data-arch-lang": es ? "es" : "en", style: { overflowY: "auto", padding: "14px 16px 18px" }, children: [
+            /* @__PURE__ */ jsxs("div", { id: `${id}-panel`, role: "tabpanel", "aria-labelledby": `${id}-${tab.id}`, "data-arch-lang": es ? "es" : "en", style: { overflowY: "auto", minHeight: 0, padding: "14px 16px 18px" }, children: [
               body.map((p, i) => /* @__PURE__ */ jsx("p", { style: { color: "var(--color-fg)", fontSize: 13, lineHeight: 1.65, margin: i === 0 ? "0 0 10px" : "10px 0" }, children: p }, i)),
               err && /* @__PURE__ */ jsxs("div", { style: { color: "var(--color-warn, #f87171)", fontSize: 12 }, children: [
                 "SVG: ",
                 err
               ] }),
               !err && svg === null && /* @__PURE__ */ jsx("div", { style: { color: "var(--color-fg-faint)", fontSize: 12 }, children: "\u2026" }),
-              svg !== null && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: { border: "1px solid var(--color-border)", borderRadius: 8, padding: 8, background: "var(--color-bg, var(--color-surface))", overflowX: "auto" },
-                  dangerouslySetInnerHTML: { __html: svg }
-                }
-              )
+              svg !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": fullSize, "aria-controls": `${id}-diagram`, onClick: () => setFullSize((value) => !value), style: { margin: "0 0 8px", fontSize: 12, padding: "5px 10px" }, children: fullSize ? es ? "Ajustar diagrama" : "Fit diagram" : es ? "Leer a tama\xF1o completo" : "Read at full size" }),
+                /* @__PURE__ */ jsx("div", { id: `${id}-diagram`, role: "region", "aria-label": es ? "Diagrama de arquitectura" : "Architecture diagram", tabIndex: 0, style: { border: "1px solid var(--color-border)", borderRadius: 8, padding: 8, background: "var(--color-bg, var(--color-surface))", overflow: "auto", maxWidth: "100%" }, children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: diagramRef,
+                    className: "caos-architecture-diagram",
+                    style: { width: fullSize ? nativeWidth : "100%", maxWidth: fullSize ? "none" : "100%" },
+                    dangerouslySetInnerHTML: { __html: svg }
+                  }
+                ) })
+              ] })
             ] })
           ]
         }
@@ -267,6 +324,7 @@ function AppShell({ config, children }) {
         {
           to: r.path,
           end: r.path === "/",
+          onFocus: (event) => event.currentTarget.scrollIntoView({ block: "nearest", inline: "nearest" }),
           className: ({ isActive }) => isActive ? "nav-link active" : "nav-link",
           children: lang === "es" ? r.es : r.en
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "description": "Shared web-app shell + content primitives + design system for the CAOS / Faena public apps (ADR-0016).",
   "license": "MIT",
   "author": "Felipe Santibáñez-Leal",
@@ -29,6 +29,7 @@
   "scripts": {
     "build": "tsup",
     "test": "node --import tsx --test \"test/**/*.test.ts\" \"test/**/*.test.tsx\"",
+    "test:browser": "node --import tsx --test \"e2e/**/*.test.ts\"",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
@@ -40,6 +41,7 @@
     "zustand": "^4 || ^5"
   },
   "devDependencies": {
+    "@playwright/test": "1.63.0",
     "@types/katex": "^0.16.7",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

package/styles.css

@@ -110,7 +110,13 @@ code, kbd { font-family: var(--font-mono); }
 /* ── Misc ── */
 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
 :where(a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
-@media (max-width: 760px) { .main-nav { display: none; } }
+@media (max-width: 760px) {
+  .header-inner { height: auto; min-height: 56px; flex-wrap: wrap; gap: 0 0.5rem; padding: 4px 1rem; }
+  .header-actions { gap: 0; }
+  .header-actions .icon-btn { padding: 0.35rem; }
+  .main-nav { order: 3; flex: 0 0 100%; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 3px 0; scrollbar-width: thin; }
+  .main-nav .nav-link { flex: none; padding: 0.3rem 0.6rem; font-size: 0.8rem; }
+}
 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
 
 /* ── Prose / content pages ── (fill the page-body width with grids/figures/sub-tab rails, not a narrow column) */
@@ -327,6 +333,7 @@ html, body { overflow-x: hidden; }
 [data-arch-lang] .l-es { display: none; }
 [data-arch-lang="es"] .l-en { display: none; }
 [data-arch-lang="es"] .l-es { display: inline; }
+.caos-architecture-diagram > svg { display: block; width: 100%; height: auto; max-width: none; }
 
 /* The compact one-of-N case picker (ADR-0071 rule 7). Ten cases in four categories
    cost a 308px chip block, 21% of a 2560x1440 viewport, and one row as a dropdown. */