@fasl-work/caos-app-shell 0.16.0 → 0.18.0

package/dist/index.d.ts

@@ -2,8 +2,8 @@ export { A as APP_ROUTE, a as AppShell, b as ArchTab, c as ArchitectureConfig, d
 import * as react from 'react';
 import { ReactNode, Component, ErrorInfo } from 'react';
 import * as zustand from 'zustand';
-import { F as FormatOptions } from './tokens-BTOzar-U.js';
-export { N as NBSP, a as NOT_AVAILABLE, b as SCIENTIFIC_BELOW, c as SHELL_TOKENS, S as ShellColorToken, d as ShellToken, f as formatNumber, e as formatTicks, r as resolveToken, u as useFormat, g as useThemeTokens } from './tokens-BTOzar-U.js';
+import { F as FormatOptions } from './text-DyQ1A8oo.js';
+export { a as FittedLabel, N as NBSP, b as NOT_AVAILABLE, c as SCIENTIFIC_BELOW, d as SHELL_TOKENS, S as ShellColorToken, e as ShellToken, f as fitLabel, g as fontFamily, h as formatNumber, i as formatTicks, n as niceStep, j as niceTicks, k as resolveToken, t as textWidth, u as useFormat, l as useThemeTokens, w as widestLabel } from './text-DyQ1A8oo.js';
 import { L as Lang, B as BiText } from './text-BlY47nIt.js';
 export { p as pick, u as useLangStore, a as useShellLang } from './text-BlY47nIt.js';
 
@@ -260,8 +260,9 @@ interface CaseSelectorProps {
      * category structure is preserved either way; only the height changes.
      */
     layout?: 'chips' | 'select';
-    /** A control that sits on the select's row, after it (the workbench's Focus button, shell 0.14.1): the select shrinks to make
-     * room, so the selector is no taller with it. With `layout: 'chips'` it gets a row of its own, after the chips. */
+    /** A control of the product that sits on the select's row, after it: the select shrinks to make room, so the selector is no taller with
+     * it (a long case name may then be cut: keep the control narrow). The workbench's own Focus control is not an accessory since 0.17.0:
+     * it sits in the group tab row. With `layout: 'chips'` it gets a row of its own, after the chips. */
     accessory?: ReactNode;
 }
 /**
@@ -1117,40 +1118,6 @@ interface BarChartProps {
  */
 declare function BarChart({ title, data, axis, orientation, values, height, onSelect }: BarChartProps): react.JSX.Element;
 
-/**
- * Text that fits the drawing it labels, measured in the font the page renders.
- *
- * Products drew their axes and labels with fixed margins and a fixed width per character. The Linux fonts (DejaVu
- * Sans) are wider than the Windows ones and Spanish labels are longer than English ones, so a column sized for one
- * ran its labels out of the drawing in the other (CAOS_Fragmenta 0.05.000: "Tamaño medio clásico, limitado al bloque
- * in situ" read "dio clásico, limitado al bloque in situ"; its deploy gate failed on Linux). Here a label is measured
- * with the canvas text metrics of the page's own font (`--font-sans`, which the gate's wide-font pass replaces),
- * broken over two lines at a word when it does not fit, and only then shortened with an ellipsis, so the drawing can
- * give the whole label as its title. Ported from CAOS_Fragmenta `viz/text.ts` (0.07.000).
- */
-/** The page's sans-serif stack as the shell token resolves it. */
-declare function fontFamily(): string;
-/** The width of one line of text at a font size, in CSS pixels; outside a browser, an estimate on the wide side. */
-declare function textWidth(text: string, px: number, weight?: number): number;
-/** The widest a set of labels needs, each on one line. */
-declare function widestLabel(labels: readonly string[], px: number, weight?: number): number;
-interface FittedLabel {
-    /** One or two lines; the last is shortened with an ellipsis only when the lines allowed are not enough. */
-    lines: string[];
-    /** Whether the label was shortened, so the drawing gives the whole label as its title. */
-    shortened: boolean;
-}
-/** A label in at most `maxLines` lines of `width` pixels: whole when it fits, broken at a word, shortened last. */
-declare function fitLabel(label: string, width: number, px: number, maxLines?: 1 | 2): FittedLabel;
-/** The 1, 2, 2.5 or 5 times a power of ten at or above `x`. */
-declare function niceStep(x: number): number;
-/**
- * Round ticks covering [lo, hi], as many as leave room for labels about `labelSize` pixels along an axis of `room`
- * pixels (at least two, at most `most`). The first tick is at or below `lo` and the last at or above `hi`, so a bar
- * or a point never runs past the last labelled value.
- */
-declare function niceTicks(lo: number, hi: number, room: number, labelSize: number, most?: number): number[];
-
 /** One section of the control rail. A rail whose content does not fit is SPLIT into sections, one shown at a
  * time, never scrolled (ADR-0071 rule 6: a panel must show its own controls). */
 interface RailSection {
@@ -1251,7 +1218,7 @@ interface CaseWorkbenchProps {
     deepLinkView?: boolean | string;
     ariaLabel?: BiText;
     /**
-     * Focus mode for the App (ADR-0070, shell 0.14.0): a Focus button in the rail head opens the selected case's open group in
+     * Focus mode for the App (ADR-0070, shell 0.14.0): a Focus control at the end of the group tab row opens the selected case's open group in
      * the full viewport through `FocusShell` (the stage is the view, the rail stays), holds `?focus=1` beside `?case=` and
      * `?view=` in the URL, and returns with Escape or the exit button to the same case, group and sub-view. `true` takes all
      * the defaults. Omit it and the App is exactly what it was.
@@ -1379,4 +1346,4 @@ interface ViewsRowProps {
  */
 declare function ViewsRow({ children, shares }: ViewsRowProps): react.JSX.Element;
 
-export { BREAKPOINTS, BarChart, type BarChartProps, type BarDatum, BiText, Callout, CardDeck, type CardDeckProps, type CaseDef, type CaseFocusConfig, type CaseGroup, type CaseKind, CaseSelector, type CaseSelectorProps, type CaseSelectorText, CaseWorkbench, type CaseWorkbenchProps, ChipGroup, type ChipGroupProps, type ChipOption, type Citation, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, type DeckCard, DocPage, type DocPageProps, DocReferences, DocRefsScope, DocSection, type DocSectionProps, EXECUTIVE_SCHEMA_VERSION, Equation, type ExecutiveData, type ExecutiveProblem, ExecutiveView, type ExecutiveViewProps, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, type FittedLabel, FlipCard, type FlipCardProps, type FocusMode, type FocusModeConfig, type FocusModeOptions, FocusShell, type FocusShellProps, FormatOptions, Gauge, type GaugeProps, type GaugeZone, Glossary, type GlossaryEntry, InlineMath, Knob, type KnobProps, Landing, type Lane, LaneBadge, Lang, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, type PausedVizController, PlotCard, type PlotCardProps, type Provenance, Question, type QuestionProps, type RailSection, Readout, type ReadoutItem, type ReadoutProps, ReferenceList, Refs, Stage, type StageSize, Stat, type StatProps, type SubTabDef, SubTabs, type SubTabsProps, type SurfaceFocusConfig, SurfacePage, type SurfacePageProps, type TabDef, type TabGroupDef, TabGroups, type TabGroupsProps, Tabs, type TabsProps, type Theme, ThemeToggle, type Tone, type UsePausedVizOptions, VariantBar, type VariantBarProps, type VariantDef, Verdict, type VerdictProps, type ViewFocusConfig, ViewsRow, type ViewsRowProps, type VizFrame, type VizLoop, type VizLoopDeps, type VizLoopOptions, type WorkbenchGroup, WorkbenchLayout, type WorkbenchLayoutProps, type WorkbenchRoute, WorkbenchShell, type WorkbenchShellProps, type WorkbenchState, WorkbenchStateContext, applyTheme, caseKind, caseTooltip, casesInSource, createVizLoop, deckPosition, deckWindow, firstAppearance, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, perPageFor, readCaseParam, readTheme, removeQueryParam, replaceQueryParam, sourcesPresent, textWidth, useFocusMode, usePausedViz, useStageSize, useThemeStore, useUrlView, useWorkbenchState, validateExecutive, viewParamOf, widestLabel, withCaseParam };
+export { BREAKPOINTS, BarChart, type BarChartProps, type BarDatum, BiText, Callout, CardDeck, type CardDeckProps, type CaseDef, type CaseFocusConfig, type CaseGroup, type CaseKind, CaseSelector, type CaseSelectorProps, type CaseSelectorText, CaseWorkbench, type CaseWorkbenchProps, ChipGroup, type ChipGroupProps, type ChipOption, type Citation, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, type DeckCard, DocPage, type DocPageProps, DocReferences, DocRefsScope, DocSection, type DocSectionProps, EXECUTIVE_SCHEMA_VERSION, Equation, type ExecutiveData, type ExecutiveProblem, ExecutiveView, type ExecutiveViewProps, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, FlipCard, type FlipCardProps, type FocusMode, type FocusModeConfig, type FocusModeOptions, FocusShell, type FocusShellProps, FormatOptions, Gauge, type GaugeProps, type GaugeZone, Glossary, type GlossaryEntry, InlineMath, Knob, type KnobProps, Landing, type Lane, LaneBadge, Lang, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, type PausedVizController, PlotCard, type PlotCardProps, type Provenance, Question, type QuestionProps, type RailSection, Readout, type ReadoutItem, type ReadoutProps, ReferenceList, Refs, Stage, type StageSize, Stat, type StatProps, type SubTabDef, SubTabs, type SubTabsProps, type SurfaceFocusConfig, SurfacePage, type SurfacePageProps, type TabDef, type TabGroupDef, TabGroups, type TabGroupsProps, Tabs, type TabsProps, type Theme, ThemeToggle, type Tone, type UsePausedVizOptions, VariantBar, type VariantBarProps, type VariantDef, Verdict, type VerdictProps, type ViewFocusConfig, ViewsRow, type ViewsRowProps, type VizFrame, type VizLoop, type VizLoopDeps, type VizLoopOptions, type WorkbenchGroup, WorkbenchLayout, type WorkbenchLayoutProps, type WorkbenchRoute, WorkbenchShell, type WorkbenchShellProps, type WorkbenchState, WorkbenchStateContext, applyTheme, caseKind, caseTooltip, casesInSource, createVizLoop, deckPosition, deckWindow, firstAppearance, groupByCategory, isStale, makeStateKey, perPageFor, readCaseParam, readTheme, removeQueryParam, replaceQueryParam, sourcesPresent, useFocusMode, usePausedViz, useStageSize, useThemeStore, useUrlView, useWorkbenchState, validateExecutive, viewParamOf, withCaseParam };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, NOT_AVAILABLE, formatTicks, formatNumber, NBSP } from './chunk-YECZXGVG.js';
-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 { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, NOT_AVAILABLE, widestLabel, fitLabel, formatTicks, niceTicks, textWidth, formatNumber, NBSP } from './chunk-DBCMAL2G.js';
+export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, fitLabel, fontFamily, formatNumber, formatTicks, niceStep, niceTicks, pick, readTheme, resolveToken, textWidth, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, widestLabel } from './chunk-DBCMAL2G.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, isValidElement } from 'react';
@@ -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) => {
@@ -2045,7 +2092,7 @@ function executiveTextFields(d) {
   add("title", d.title, 1);
   add("key_statement", d.key_statement, 2);
   d.headline_figures.forEach((f, i) => figure(`headline_figures[${i}]`, f));
-  const { pain, context: context2, situation, trends, proposal } = d;
+  const { pain, context, situation, trends, proposal } = d;
   add("pain.key_message", pain.key_message, 1);
   pain.paragraphs.forEach((p, i) => add(`pain.paragraphs[${i}]`, p, void 0, EXEC_LIMITS.minParagraphWords));
   pain.bearers.forEach((b, i) => {
@@ -2055,11 +2102,11 @@ function executiveTextFields(d) {
   });
   pain.figures.forEach((f, i) => figure(`pain.figures[${i}]`, f));
   pain.causes.forEach((c, i) => add(`pain.causes[${i}].cause`, c.cause));
-  add("context.key_message", context2.key_message, 1);
-  context2.paragraphs.forEach((p, i) => add(`context.paragraphs[${i}]`, p, void 0, EXEC_LIMITS.minParagraphWords));
-  add("context.setting", context2.setting);
-  context2.forces.forEach((f, i) => add(`context.forces[${i}].force`, f.force));
-  context2.evidence.forEach((e, i) => add(`context.evidence[${i}].statement`, e.statement, 1));
+  add("context.key_message", context.key_message, 1);
+  context.paragraphs.forEach((p, i) => add(`context.paragraphs[${i}]`, p, void 0, EXEC_LIMITS.minParagraphWords));
+  add("context.setting", context.setting);
+  context.forces.forEach((f, i) => add(`context.forces[${i}].force`, f.force));
+  context.evidence.forEach((e, i) => add(`context.evidence[${i}].statement`, e.statement, 1));
   add("situation.key_message", situation.key_message, 1);
   situation.roles.forEach((r, i) => {
     add(`situation.roles[${i}].role`, r.role);
@@ -3086,74 +3133,6 @@ var BREAKPOINTS = {
   /** The gate's large screen: the viewport rules of ADR-0071 are measured from here up. */
   large: 1280
 };
-
-// src/chart/text.ts
-var context;
-function fontFamily() {
-  if (typeof document === "undefined") return "sans-serif";
-  return getComputedStyle(document.documentElement).getPropertyValue("--font-sans").trim() || "sans-serif";
-}
-function textWidth(text, px, weight = 400) {
-  if (context === void 0) {
-    try {
-      context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
-    } catch {
-      context = null;
-    }
-  }
-  if (!context) return text.length * px * 0.62;
-  context.font = `${weight} ${px}px ${fontFamily()}`;
-  return context.measureText(text).width;
-}
-function widestLabel(labels, px, weight = 400) {
-  return Math.max(0, ...labels.map((label) => textWidth(label, px, weight)));
-}
-function shorten(line, width, px) {
-  if (textWidth(line, px) <= width) return line;
-  let cut = line;
-  while (cut.length > 1 && textWidth(`${cut}\u2026`, px) > width) cut = cut.slice(0, -1);
-  return `${cut.trimEnd()}\u2026`;
-}
-function fitLabel(label, width, px, maxLines = 2) {
-  if (textWidth(label, px) <= width) return { lines: [label], shortened: false };
-  const words = label.split(" ");
-  if (maxLines === 2 && words.length > 1) {
-    let best = null;
-    let bestWidth = Infinity;
-    for (let k = 1; k < words.length; k += 1) {
-      const first = words.slice(0, k).join(" ");
-      const second = words.slice(k).join(" ");
-      const widest = Math.max(textWidth(first, px), textWidth(second, px));
-      if (widest < bestWidth) {
-        bestWidth = widest;
-        best = [first, second];
-      }
-    }
-    if (best && bestWidth <= width) return { lines: best, shortened: false };
-    if (best) return { lines: [shorten(best[0], width, px), shorten(best[1], width, px)], shortened: true };
-  }
-  return { lines: [shorten(label, width, px)], shortened: true };
-}
-function niceStep(x) {
-  if (!(x > 0) || !Number.isFinite(x)) return 1;
-  const magnitude = 10 ** Math.floor(Math.log10(x));
-  return ([1, 2, 2.5, 5, 10].find((m) => m * magnitude >= x * (1 - 1e-12)) ?? 10) * magnitude;
-}
-function niceTicks(lo, hi, room, labelSize, most = 6) {
-  if (!Number.isFinite(lo) || !Number.isFinite(hi)) return [0];
-  if (hi < lo) [lo, hi] = [hi, lo];
-  if (hi === lo) hi = lo === 0 ? 1 : lo + Math.abs(lo);
-  const count = Math.max(2, Math.min(most, Math.floor(room / (labelSize + 16)) + 1));
-  const step = niceStep((hi - lo) / (count - 1));
-  const first = Math.floor(lo / step + 1e-9) * step;
-  const ticks = [];
-  for (let k = 0; first + k * step <= hi + step * 1e-9 || ticks.length < 2; k += 1) {
-    ticks.push(Number((first + k * step).toPrecision(12)));
-    if (ticks.length > 50) break;
-  }
-  if (ticks[ticks.length - 1] < hi - step * 1e-9) ticks.push(Number((ticks[ticks.length - 1] + step).toPrecision(12)));
-  return ticks;
-}
 var PX = 11;
 var LINE = 13;
 var TONE = {
@@ -3442,7 +3421,7 @@ 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, focus } = props;
+  const { caseId, cases, source, controls, replayOnly, variants, rail, railLabel, groups, compare, context, group, onGroupChange, deepLinkView = true, ariaLabel, focus } = props;
   const lang = useShellLang();
   const focusCfg = focus === true ? {} : focus || null;
   const { show: showFocus, setFocus, enterRef, memory } = useFocusMode(focusCfg);
@@ -3462,8 +3441,8 @@ function CaseWorkbench(props) {
   }
   tabs.push({
     id: "context",
-    label: pick(context2.label ?? { en: "Context", es: "Contexto" }, lang),
-    content: /* @__PURE__ */ jsx("div", { className: "prose caos-cw-context", children: context2.content })
+    label: pick(context.label ?? { en: "Context", es: "Contexto" }, lang),
+    content: /* @__PURE__ */ jsx("div", { className: "prose caos-cw-context", children: context.content })
   });
   if (tabs.length > MAX_WORKBENCH_GROUPS) {
     throw new Error(
@@ -3487,19 +3466,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 }),
-    variants && /* @__PURE__ */ jsx(VariantBar, { ...variants })
-  ] }) : null;
-  const focusPickers = cases || variants ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases, accessory: cases.accessory }),
+    cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases }),
     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,
@@ -3533,7 +3505,8 @@ function CaseWorkbench(props) {
       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
     }
   ) }) }) }) });
 }
@@ -3737,4 +3710,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, useFocusMode, 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, groupByCategory, isStale, makeStateKey, perPageFor, readCaseParam, removeQueryParam, replaceQueryParam, sourcesPresent, useFocusMode, usePausedViz, useUrlView, useWorkbenchState, validateArchitectureConfig, validateExecutive, viewParamOf, withCaseParam };

package/dist/{tokens-BTOzar-U.d.ts → text-DyQ1A8oo.d.ts}

@@ -58,4 +58,42 @@ declare function resolveToken(token: string, fallback?: string): string;
  */
 declare function useThemeTokens(): Record<ShellToken, string>;
 
-export { type FormatOptions as F, NBSP as N, type ShellColorToken as S, NOT_AVAILABLE as a, SCIENTIFIC_BELOW as b, SHELL_TOKENS as c, type ShellToken as d, formatTicks as e, formatNumber as f, useThemeTokens as g, resolveToken as r, useFormat as u };
+/**
+ * Text that fits the drawing it labels, measured in the font the page renders.
+ *
+ * Products drew their axes and labels with fixed margins and a fixed width per character. The Linux fonts (DejaVu
+ * Sans) are wider than the Windows ones and Spanish labels are longer than English ones, so a column sized for one
+ * ran its labels out of the drawing in the other (CAOS_Fragmenta 0.05.000: "Tamaño medio clásico, limitado al bloque
+ * in situ" read "dio clásico, limitado al bloque in situ"; its deploy gate failed on Linux). Here a label is measured
+ * with the canvas text metrics of the page's own font (`--font-sans`, which the gate's wide-font pass replaces),
+ * broken over two lines at a word when it does not fit, and only then shortened with an ellipsis, so the drawing can
+ * give the whole label as its title. Ported from CAOS_Fragmenta `viz/text.ts` (0.07.000).
+ */
+
+/** The name of a reference line that has no label, for the handle a reader drags (a screen reader says it): numbered when
+ * several unlabelled lines of one chart can be dragged, so each handle has a name of its own. */
+declare function referenceLineName(lang: Lang, n: number, of: number): string;
+/** The page's sans-serif stack as the shell token resolves it. */
+declare function fontFamily(): string;
+/** The width of one line of text at a font size, in CSS pixels; outside a browser, an estimate on the wide side. */
+declare function textWidth(text: string, px: number, weight?: number): number;
+/** The widest a set of labels needs, each on one line. */
+declare function widestLabel(labels: readonly string[], px: number, weight?: number): number;
+interface FittedLabel {
+    /** One or two lines; the last is shortened with an ellipsis only when the lines allowed are not enough. */
+    lines: string[];
+    /** Whether the label was shortened, so the drawing gives the whole label as its title. */
+    shortened: boolean;
+}
+/** A label in at most `maxLines` lines of `width` pixels: whole when it fits, broken at a word, shortened last. */
+declare function fitLabel(label: string, width: number, px: number, maxLines?: 1 | 2): FittedLabel;
+/** The 1, 2, 2.5 or 5 times a power of ten at or above `x`. */
+declare function niceStep(x: number): number;
+/**
+ * Round ticks covering [lo, hi], as many as leave room for labels about `labelSize` pixels along an axis of `room`
+ * pixels (at least two, at most `most`). The first tick is at or below `lo` and the last at or above `hi`, so a bar
+ * or a point never runs past the last labelled value.
+ */
+declare function niceTicks(lo: number, hi: number, room: number, labelSize: number, most?: number): number[];
+
+export { type FormatOptions as F, NBSP as N, type ShellColorToken as S, type FittedLabel as a, NOT_AVAILABLE as b, SCIENTIFIC_BELOW as c, SHELL_TOKENS as d, type ShellToken as e, fitLabel as f, fontFamily as g, formatNumber as h, formatTicks as i, niceTicks as j, resolveToken as k, useThemeTokens as l, niceStep as n, referenceLineName as r, textWidth as t, useFormat as u, widestLabel as w };

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,
@@ -433,7 +498,7 @@ export function installLib() {
       // charts whose axis gives a tick the label of the tick before it (UPlotChart declares data-ticks-repeat)
       repeatedTicks: [...document.querySelectorAll('[data-ticks-repeat]')]
         .filter((el) => visible(el) && Number(el.getAttribute('data-ticks-repeat')) > 0)
-        .map((el) => ({ label: describe(el.closest('[data-plot]') || el), n: Number(el.getAttribute('data-ticks-repeat')) })),
+        .map((el) => ({ label: describe(el.closest('[data-plot]') || el), n: Number(el.getAttribute('data-ticks-repeat')), names: el.getAttribute('data-ticks-repeated') || '' })),
       // the drawing a filling card keeps under its note (G6 stage floor): the body of every visible `PlotCard fill`
       fillStages: [...document.querySelectorAll('.caos-plot.fill')]
         .filter(visible)
@@ -1063,6 +1128,7 @@ 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], [data-surface]')),
       caseId: stage ? stage.getAttribute('data-case') : null,

package/gate/run.mjs

@@ -8,7 +8,7 @@
 //   G4 deep links            every route loaded directly (and with a trailing slash), 200 and rendered; artifacts
 //                            are JSON, not the HTML fallback; a missing asset answers 404; doc text clears a floor
 //   G5 scroll and reach      boxes inside the viewport, the rail and their scrollers; tall views scroll; nothing is
-//                            cut; truncated text carries its full text; every control reachable by the pointer
+//                            cut; truncated text carries its full text; a select shows its whole selected text (0.17.0); every control reachable by the pointer
 //   G6 painted area          drawing surfaces have painted pixels, fill their stage, and cover at least half the
 //                            viewport on the App route, measured on the screenshot, never on a host box
 //   G7 walk everything       every route, tab, sub-tab and case, at five sizes, both themes, both languages,
@@ -269,6 +269,15 @@ export async function runGate(o) {
       fail('G18', { route: appRoute, mode: 'routes' }, `the App route ${appRoute} is not among the measured routes (${routes.join(', ') || 'none'}): with --workbench '' and --require-focus the gate measures the App as a surface and must walk it; add it to --routes or name it with --app-route`);
     }
 
+    // ---- G18 on a workbench App (shell 0.17.0): under --require-focus every workbench route must be among the measured routes, or no Focus would be measured
+    if (opt.requireFocus) {
+      for (const wr of workbenchRoutes) {
+        if (!routes.includes(wr)) {
+          fail('G18', { route: wr, mode: 'routes' }, `the workbench route ${wr} is not among the measured routes (${routes.join(', ') || 'none'}): with --require-focus the gate must walk the App to measure its Focus mode; add it to --routes or drop it from --workbench`);
+        }
+      }
+    }
+
     // ---- The landing (shell 0.13.0): the root opens the Introduction on its executive view; an old App link with a query string reaches the App.
     {
       const ctx = await openContext(primarySize, themes[0], langs[0]);
@@ -460,6 +469,7 @@ export async function runGate(o) {
       if (f.rail.outsideCount) fail('G5', where, `${f.rail.outsideCount} rail element(s) outside the rail: ${f.rail.outside.join('; ')}`);
     }
     if (f.truncatedCount) fail('G5', where, `${f.truncatedCount} truncated text(s) without the full text in a title: ${f.truncated.join('; ')}`);
+    if (f.cutSelectCount) fail('G5', where, `${f.cutSelectCount} select(s) cut the selected text (a case name cut in its box, or a display that names another case than the one the select holds, or a plain select with a text wider than its room): ${f.cutSelects.join('; ')}`);
     for (const c of f.clipped) fail('G5', where, c);
     if (f.offCentre !== null && f.offCentre > 2) fail('ADR-0017.1', where, `the prose page is off-centre by ${f.offCentre.toFixed(1)}px`);
     if (f.referenceLists) fail('ADR-0017.4', where, `${f.referenceLists} bibliography outside the end-of-page references block (a .reference-list); give each DocSection its refs and let the page list them once`);
@@ -471,7 +481,9 @@ export async function runGate(o) {
       if (d) s.walkState.doc.push(d);
     }
     for (const r of f.repeatedTicks ?? []) {
-      fail('G6', where, `${r.label}: ${r.n} axis tick label(s) repeat the label before them (give the axis fixed decimals)`);
+      // named x ticks (UPlotChart declares the repeated names): a name used twice, wherever the two ticks sit on the axis
+      if (r.names) fail('G6', where, `${r.label}: ${r.n} named x tick label(s) repeat another tick's label (${r.names.split('|').map((n) => `"${n}"`).join(', ')}); give every named tick a label of its own`);
+      else fail('G6', where, `${r.label}: ${r.n} axis tick label(s) repeat the label before them (give the axis fixed decimals)`);
     }
     // a filling card whose note leaves its drawing under the floor (CAOS_APP_SHELL#95); below 1280 px the document scrolls
     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)`);
@@ -913,6 +925,7 @@ export async function runGate(o) {
     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.cutSelects.count) fail('G5', at, `${label}: ${f.cutSelects.count} select(s) cut the selected text (a case name cut in its box, or a display that names another case than the one the select holds, or a plain select with a text wider than its room): ${f.cutSelects.list.join('; ')}`);
     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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.16.0",
+  "version": "0.18.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",
@@ -56,7 +56,7 @@
     "check:sdd": "python scripts/check_sdd.py ."
   },
   "peerDependencies": {
-    "katex": "^0.16.0",
+    "katex": "^0.16.0 || ^0.17.0 || ^0.18.0 || ^0.19.0",
     "lucide-react": ">=0.400.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
@@ -67,11 +67,10 @@
   },
   "devDependencies": {
     "@playwright/test": "1.63.0",
-    "@types/katex": "^0.16.7",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "esbuild": "0.28.1",
-    "katex": "^0.16.11",
+    "katex": "0.19.0",
     "lucide-react": "1.43.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/reserved-classes.json

@@ -25,6 +25,7 @@
     "caos-card",
     "caos-chart",
     "caos-chart-key",
+    "caos-chart-key-button",
     "caos-chart-legend",
     "caos-chart-plot",
     "caos-chart-readout",
@@ -198,8 +199,11 @@
     "cs-locked",
     "cs-modified",
     "cs-reset",
-    "cs-select",
+    "cs-select-display",
+    "cs-select-native",
     "cs-select-row",
+    "cs-select-text",
+    "cs-select-wrap",
     "cs-source",
     "cs-source-label",
     "cs-source-tabs",
@@ -335,6 +339,7 @@
     "caos-card",
     "caos-chart",
     "caos-chart-key",
+    "caos-chart-key-button",
     "caos-chart-legend",
     "caos-chart-plot",
     "caos-chart-readout",
@@ -512,8 +517,11 @@
     "cs-locked",
     "cs-modified",
     "cs-reset",
-    "cs-select",
+    "cs-select-display",
+    "cs-select-native",
     "cs-select-row",
+    "cs-select-text",
+    "cs-select-wrap",
     "cs-source",
     "cs-source-label",
     "cs-source-tabs",