@fasl-work/caos-app-shell 0.14.1 → 0.14.3

package/dist/index.d.ts

@@ -69,7 +69,16 @@ interface FocusShellProps {
      */
     landmark?: boolean;
 }
-/** Full-viewport, scenario-scoped analysis frame. The product supplies only its instrument and controls. */
+/**
+ * Full-viewport, scenario-scoped analysis frame. The product supplies only its instrument and controls.
+ *
+ * The frame measures its overlay chrome and sets three lengths on `.caos-focus-stage` (custom properties, so the instrument
+ * inherits them): `--caos-focus-clear-top` (the stage's top edge to the lowest chrome box in its upper half, plus 8px),
+ * `--caos-focus-clear-bottom` (likewise from the bottom edge, 0 or unset when nothing sits in the lower half) and
+ * `--caos-focus-label-bottom` (the label's bottom edge from the stage's top). A product that renders its own instrument keeps
+ * its controls clear of the chrome with `padding-top: var(--caos-focus-clear-top, 4.6rem)`. Before the first measurement and in
+ * a non-browser render the properties are unset and the CSS fallbacks apply.
+ */
 declare function FocusShell({ stage, rail, title, description, hud, onExit, exitLabel, stageLabel, landmark }: FocusShellProps): react.JSX.Element;
 
 /** Light/dark icon toggle. Shows the icon of the theme you would switch TO. */

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, useCallback, useContext, useMemo, useLayoutEffect, Children } from 'react';
+import { createContext, Component, useState, useRef, useId, useEffect, useLayoutEffect, useCallback, useContext, useMemo, Children } 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';
@@ -483,10 +483,65 @@ function WorkbenchShell({
     overlays
   ] });
 }
+var GAP = 8;
+function measureChrome(stage) {
+  const box = stage.getBoundingClientRect();
+  if (box.height <= 0 || box.width <= 0) return;
+  const label = stage.querySelector(":scope > .caos-focus-label");
+  const chrome2 = [
+    label,
+    ...Array.from(stage.querySelectorAll(":scope > .caos-focus-hud > div")),
+    stage.querySelector(":scope > .caos-focus-actions")
+  ].filter((e) => e !== null);
+  const write = (name, px) => {
+    const next = px === null ? "" : `${px}px`;
+    if (stage.style.getPropertyValue(name) === next) return false;
+    if (px === null) stage.style.removeProperty(name);
+    else stage.style.setProperty(name, next);
+    return true;
+  };
+  const labelBottom = label ? Math.ceil(label.getBoundingClientRect().bottom - box.top) : null;
+  const moved = write("--caos-focus-label-bottom", labelBottom !== null && labelBottom > 0 ? labelBottom : null);
+  if (moved) {
+    measureChrome(stage);
+    return;
+  }
+  const mid = box.height / 2;
+  let top = 0;
+  let bottom = 0;
+  for (const el of chrome2) {
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0) continue;
+    if (r.top - box.top < mid) top = Math.max(top, r.bottom - box.top + GAP);
+    else bottom = Math.max(bottom, box.bottom - r.top + GAP);
+  }
+  write("--caos-focus-clear-top", top > 0 ? Math.ceil(top) : null);
+  write("--caos-focus-clear-bottom", bottom > 0 ? Math.ceil(bottom) : null);
+}
 function FocusShell({ stage, rail, title, description, hud, onExit, exitLabel, stageLabel, landmark = true }) {
   const Root = landmark ? "main" : "div";
+  const stageRef = useRef(null);
+  useLayoutEffect(() => {
+    const el = stageRef.current;
+    if (el) measureChrome(el);
+  });
+  useLayoutEffect(() => {
+    const el = stageRef.current;
+    if (!el) return void 0;
+    const run = () => measureChrome(el);
+    window.addEventListener("resize", run);
+    let ro;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(run);
+      for (const c of Array.from(el.querySelectorAll(":scope > .caos-focus-label, :scope > .caos-focus-hud, :scope > .caos-focus-actions"))) ro.observe(c);
+    }
+    return () => {
+      window.removeEventListener("resize", run);
+      ro?.disconnect();
+    };
+  }, []);
   return /* @__PURE__ */ jsxs(Root, { className: "caos-focus-shell", "data-focus-shell": "", children: [
-    /* @__PURE__ */ jsxs("section", { className: "caos-focus-stage", "aria-label": stageLabel, 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: [
         /* @__PURE__ */ jsx("strong", { children: title }),
@@ -3355,6 +3410,10 @@ function CaseWorkbench(props) {
     cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases, accessory: besideSelect ? enter : cases.accessory }),
     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
@@ -3382,7 +3441,7 @@ function CaseWorkbench(props) {
         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 }) })
+        rail: /* @__PURE__ */ jsx("div", { className: "caos-focus-rail-body", children: /* @__PURE__ */ jsx(RailBody, { rail: rail ?? null, railHead: focusPickers, railLabel }) })
       }
     ) }) });
   }

package/gate/inpage.mjs

@@ -1036,8 +1036,32 @@ export function installLib() {
     const panel = stage ? stage.querySelector('[role="tabpanel"]') : null;
     const st = document.querySelector('.caos-focus-stage');
     const box = st ? st.getBoundingClientRect() : null;
+    // a stage control the Focus chrome (the label, the HUD tiles, the actions) sits on: more than 1px in both directions
+    const chrome = st
+      ? [
+          ...[...st.querySelectorAll(':scope > .caos-focus-label')].map((e) => [e, 'the stage label']),
+          ...[...st.querySelectorAll(':scope > .caos-focus-hud > div')].map((e) => [e, 'the HUD']),
+          ...[...st.querySelectorAll(':scope > .caos-focus-actions')].map((e) => [e, 'the Focus actions']),
+        ].filter(([e]) => visible(e))
+      : [];
+    const covered = [];
+    const controlSel = '[role="tab"], button, a[href], select, input, textarea, summary, [role="button"], [role="radio"], [role="checkbox"], [role="switch"], [role="slider"]';
+    for (const c of document.querySelectorAll('.caos-focus-instrument')) {
+      for (const el of c.querySelectorAll(controlSel)) {
+        if (covered.length >= 4) break;
+        if (!visible(el)) continue;
+        const r = el.getBoundingClientRect();
+        const hit = chrome.find(([e]) => {
+          const b = e.getBoundingClientRect();
+          return r.left < b.right - 1 && r.right > b.left + 1 && r.top < b.bottom - 1 && r.bottom > b.top + 1;
+        });
+        if (hit) covered.push({ control: (el.getAttribute('aria-label') || el.textContent || el.tagName).trim().replace(/\s+/g, ' ').slice(0, 40), chrome: hit[1] });
+      }
+    }
     return {
       focus: Boolean(shell),
+      covered,
+      enterInside: [...document.querySelectorAll('[data-focus-shell] [data-focus-enter]')].filter(visible).length,
       app: Boolean(document.querySelector('[data-workbench]')),
       caseId: stage ? stage.getAttribute('data-case') : null,
       group: shell ? (stage ? stage.getAttribute('data-focus-group') : null) : panel ? panel.getAttribute('data-panel') : null,

package/gate/run.mjs

@@ -27,7 +27,8 @@
 //                            Space, its hidden face out of the accessibility tree; a carousel reaches every card, never scrolls sideways
 //   G17 animated drawings    an animated SVG has its reduced-motion block, plays for 10 s at most and is still under reduced motion
 //   G18 Focus mode           the App's Focus control opens the case's open group in the full viewport and returns to the same case and
-//                            group (by the exit control and by Escape); no page scroll, the rail without scroll, one tab row
+//                            group (by the exit control and by Escape); no page scroll, the rail without scroll, one tab row; no stage
+//                            control under the Focus chrome (label, HUD, actions); no Focus control inside the Focus frame
 // plus the ADR-0071 and ADR-0017 measures (viewport, one-row tabs, rail without scroll, centred prose, captions,
 // references).
 
@@ -889,6 +890,8 @@ export async function runGate(o) {
     if (f.tabRows.some((r) => r > 1)) fail('G18', at, `${label}: a tab row wraps onto ${Math.max(...f.tabRows)} rows`);
     if (big && f.share < opt.instrumentMin) fail('G18', at, `${label}: the stage covers ${(100 * f.share).toFixed(1)}% of the viewport (floor ${(100 * opt.instrumentMin).toFixed(0)}%)`);
     if (f.exitInside === false) fail('G18', at, `${label}: the exit control is outside the viewport`);
+    for (const c of f.covered) fail('G18', at, `${label}: ${c.chrome} covers the control "${c.control}" (the stage must clear the Focus chrome)`);
+    if (f.enterInside > 0) fail('G18', at, `${label}: the Focus control shows inside Focus mode (it opens the mode the reader is already in)`);
     for (const m of await page.evaluate(() => window.__caosGate.drawingText())) fail('G10', at, m);
     if (s.contrast) for (const m of await page.evaluate(() => window.__caosGate.contrast())) fail('G13', at, m);
     if (index === 0) await saveShot(page, `focus_${slug(s.route)}_${s.w}x${s.h}_${s.theme}_${s.lang}.png`);

package/package.json

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

package/styles.css

@@ -672,7 +672,7 @@ svg.lucide { flex: none; }
 .caos-focus-label { position: absolute; top: 14px; left: 14px; max-width: min(46ch,calc(100% - 230px)); display: grid; gap: 4px; padding: 10px 12px; pointer-events: none; }
 .caos-focus-label strong { font-size: 0.96rem; line-height: 1.2; }
 .caos-focus-label span { font-size: 0.78rem; line-height: 1.4; color: var(--color-fg-subtle); }
-.caos-focus-hud { position: absolute; left: 14px; top: 104px; display: grid; gap: 6px; pointer-events: none; }
+.caos-focus-hud { position: absolute; left: 14px; top: calc(var(--caos-focus-label-bottom, 96px) + 8px); display: grid; gap: 6px; pointer-events: none; }
 .caos-focus-hud > div { display: grid; gap: 1px; padding: 7px 10px; min-width: 120px; }
 .caos-focus-hud strong { font: 700 1rem var(--font-mono,monospace); }
 .caos-focus-hud span { color: var(--color-fg-subtle); font-size: 0.61rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
@@ -754,6 +754,8 @@ svg.lucide { flex: none; }
 .caos-exec-badge { align-self: flex-start; padding: 0.1rem 0.5rem; font-size: var(--text-xs); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-fg-subtle); }
 .caos-exec-cause { min-width: 0; overflow-wrap: anywhere; }
 .caos-exec-cause-head { display: flex; justify-content: space-between; gap: 1rem; }
+/* the cause's share stays whole: the row lets its label wrap anywhere, and the squeezed value broke into "3", "5", "%" at 390px */
+.caos-exec-cause-head > .caos-exec-value { flex: none; white-space: nowrap; overflow-wrap: normal; }
 .caos-exec-bar { height: 0.45rem; margin-top: 0.3rem; background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
 .caos-exec-bar > span { display: block; height: 100%; background: var(--color-accent); }
 .caos-exec-cdef { font-size: var(--text-xs); line-height: 1.4; color: var(--color-fg-faint); }
@@ -823,11 +825,15 @@ svg.lucide { flex: none; }
 
 /* == Focus mode for the App (shell 0.14.0, ADR-0070) ================================================================== */
 
-/* The stage is the open group; the label overlay (heading and line) sits above it, so the group starts below the label. */
-.caos-focus-instrument > .caos-cw-focus { position: absolute; inset: 0; padding: 4.6rem 0.9rem 0.9rem; }
+/* The stage is the open group; the label overlay (heading and line) sits above it, so the group starts below the label.
+   FocusShell measures the overlay chrome and sets, on .caos-focus-stage, three lengths the instrument inherits (shell 0.14.3):
+   --caos-focus-clear-top (stage top to the lowest chrome box in the upper half, plus 8px), --caos-focus-clear-bottom (stage
+   bottom to the highest chrome box in the lower half, plus 8px; unset when none) and --caos-focus-label-bottom (the label's
+   bottom edge). The fallbacks below apply before the first measurement and in a non-browser render. */
+.caos-focus-instrument > .caos-cw-focus { position: absolute; inset: 0; padding: var(--caos-focus-clear-top, 4.6rem) 0.9rem max(0.9rem, var(--caos-focus-clear-bottom, 0px)); }
 .caos-focus-instrument > .caos-cw-focus > .tabs { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
 .caos-focus-rail-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0.85rem; min-width: 0; }
 .caos-focus-enter { align-self: flex-start; }
 @media (max-width: 900px) {
-  .caos-focus-instrument > .caos-cw-focus { padding: 6.6rem 0.5rem 0.5rem; }
+  .caos-focus-instrument > .caos-cw-focus { padding: var(--caos-focus-clear-top, 6.6rem) 0.5rem max(0.5rem, var(--caos-focus-clear-bottom, 0px)); }
 }