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

package/README.md

@@ -110,7 +110,7 @@ const config: ShellConfig = {
   (G1) or mode (G2), console errors and 4xx/5xx (G3), broken deep links or HTML for an artifact (G4), anything a
   reader cannot scroll to, see whole or click (G5), blank or underfilled drawings and an instrument under half the
   viewport (G6), a view that never settles (G7), loops at rest (G8), controls that change nothing (G9), labels cut or
-  overlapping in a drawing, also in a wider fallback font (G10), a decimal point on a Spanish page (G11), a vertical
+  overlapping in a drawing, also in a wider fallback font (G10), a decimal point on a Spanish page (G11), a number or percentage broken across lines (G19), a vertical
   sub-tab list that scrolls away (G12), text under WCAG AA contrast (G13, every language on a documentation page), and a documentation page without the
   required areas of its kind (`ADR-0017.2`: executive and technical Introduction, Methodology, Implementation,
   Experiments, Benchmark; declared with `<DocSection area="...">`, waived only with a reason of 12 letters or digits in two

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,
@@ -1257,6 +1281,75 @@ export function installLib() {
     return [...new Set(out)].slice(0, 12);
   };
 
+  /**
+   * G19, values whole (BL-065): a short value written in the page's text sits on one line. Shell 0.14.2 fixed a share
+   * "35%" that broke into "3", "5", "%" in a squeezed flex row; no other check sees it, because the pieces are neither
+   * clipped nor outside their box. A short value is a run of characters without breaking whitespace (U+0020, tab, CR,
+   * LF; U+00A0 and U+202F do not end a run) inside one text node, 2 to 16 characters long once the punctuation of the
+   * sentence is stripped from its ends, with a digit, only digits, signs (the hyphens and dashes included), separators,
+   * currency signs, % per mille x and degree signs and at most 4 letters (35%, 0,96, US$1.2bn, 2026-10-15, -3,2pp, 1e-6,
+   * ADR-0071). A value is cut into segments right after a hyphen (U+002D, U+2010, U+2011), an en or em dash and a slash;
+   * a break at those places is a normal line break, so the pieces between them are what must stay whole. A leading sign
+   * stays in the first segment (a lone "-" apart from "3,2" is a broken value). The lines of a segment of 2 or more
+   * characters are the groups of its Range's client rects by top (2px); a segment on more than one line fails the value,
+   * also when it is longer than its container: a segment is never cut into pieces. Two values apart by a regular space
+   * ("12 %") are two runs and may wrap between them. Limits: text nodes only (a value split across elements, <b>35</b>%,
+   * is not read); SVG text is G10's
+   * subject and canvas text cannot be read; code, formulas and anything marked translate="no" are skipped.
+   */
+  G.brokenValues = () => {
+    const out = [];
+    const skip = 'code, pre, kbd, samp, .katex, svg, canvas, textarea, [translate="no"], [aria-hidden="true"], script, style';
+    const runRe = /[^ \t\r\n]+/g;
+    const BREAK_AFTER = '-\u2010\u2011\u2013\u2014/';
+    const strip = /^[()[\]"',;:.]+|[()[\]"',;:.]+$/g;
+    const allowed = /^[\p{Nd}+\-\u2010\u2011\u2013\u2014\u2212\u00b1.,:/'\u00a0\u202f$\u20ac\u00a3\u00a5%\u2030\u00d7\u00b0\p{L}]+$/u;
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    const range = document.createRange();
+    const seen = new Set();
+    for (let n = walker.nextNode(); n && out.length < 12; n = walker.nextNode()) {
+      const text = n.nodeValue || '';
+      if (!/\d/.test(text)) continue;
+      const el = n.parentElement;
+      if (!el || el.closest(skip) || !shown(el)) continue;
+      for (const m of text.matchAll(runRe)) {
+        const run = m[0];
+        if (!/\d/.test(run)) continue;
+        const lead = run.length - run.replace(/^[()[\]"',;:.]+/, '').length;
+        const value = run.replace(strip, '');
+        if (value.length < 2 || value.length > 16 || !/\d/.test(value) || !allowed.test(value)) continue;
+        if ((value.match(/\p{L}/gu) || []).length > 4) continue;
+        const start = m.index + lead;
+        // a break right after a hyphen, a dash or a slash is a normal line break; the segments between them must stay whole.
+        // A leading sign belongs to the first segment (a "-" apart from "3,2" is a broken value).
+        const cuts = [0];
+        for (let i = 1; i < value.length - 1; i += 1) if (BREAK_AFTER.includes(value[i])) cuts.push(i + 1);
+        cuts.push(value.length);
+        let worst = 1;
+        for (let k = 0; k + 1 < cuts.length; k += 1) {
+          if (cuts[k + 1] - cuts[k] < 2) continue;
+          range.setStart(n, start + cuts[k]);
+          range.setEnd(n, start + cuts[k + 1]);
+          const tops = [];
+          for (const r of range.getClientRects()) {
+            if (r.width <= 0.5) continue;
+            if (!tops.some((t) => Math.abs(t - r.top) <= 2)) tops.push(r.top);
+          }
+          worst = Math.max(worst, tops.length);
+        }
+        if (worst > 1) {
+          const msg = `"${value}" breaks across ${worst} lines (${describe(el)})`;
+          if (!seen.has(msg)) {
+            seen.add(msg);
+            out.push(msg);
+            if (out.length >= 12) break;
+          }
+        }
+      }
+    }
+    return out;
+  };
+
   /** The scroll container of an element: the nearest ancestor that scrolls vertically, or the document. */
   const scroller = (el) => {
     for (let a = el.parentElement; a && a !== document.body; a = a.parentElement) {

package/gate/run.mjs

@@ -27,7 +27,9 @@
 //                            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
+//   G19 values whole         a short value (number, percentage, amount, unit) sits on one line in every state
 // plus the ADR-0071 and ADR-0017 measures (viewport, one-row tabs, rail without scroll, centred prose, captions,
 // references).
 
@@ -464,6 +466,7 @@ export async function runGate(o) {
     if (big) for (const c of f.fillStages ?? []) if (c.h < opt.stageFloor) fail('G6', where, `the drawing of ${c.label} keeps ${Math.round(c.h)} px under its note (floor ${opt.stageFloor} px)`);
     for (const m of await page.evaluate(() => window.__caosGate.drawingText())) fail('G10', where, m);
     if (s.lang === 'es') for (const m of await page.evaluate(() => window.__caosGate.decimals())) fail('G11', where, m);
+    for (const m of await page.evaluate(() => window.__caosGate.brokenValues())) fail('G19', where, m);
     if (s.w > 760) for (const m of await page.evaluate(() => window.__caosGate.sticky())) fail('G12', where, m);
     if (s.contrast) for (const m of await page.evaluate(() => window.__caosGate.contrast())) fail('G13', where, m);
     if (f.sectionsWithoutRefs) fail('ADR-0017.4', where, `${f.sectionsWithoutRefs} section(s) end without references or a stated reason`);
@@ -889,7 +892,10 @@ 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);
+    for (const m of await page.evaluate(() => window.__caosGate.brokenValues())) fail('G19', 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`);
     // leave: the exit control for one case, Escape for the next, so both ways are walked

package/package.json

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

package/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; }
@@ -825,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)); }
 }