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

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,
@@ -29,6 +29,8 @@
 //   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; no stage
 //                            control under the Focus chrome (label, HUD, actions); no Focus control inside the Focus frame
+//                            on a surface App (--workbench '', --app-route; 0.16.0) the same for the views of its tab row: another view or
+//                            sub-view in Focus or after the return, no ?focus=1 and view in the URL, no view that offers the control
 //   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).
@@ -45,6 +47,7 @@ export const DEFAULTS = {
   themes: 'light,dark',
   langs: 'en,es',
   workbench: '/app',
+  appRoute: '/app',
   idleMs: 3000,
   settleMs: 15000,
   textFloor: 400,
@@ -93,6 +96,8 @@ export async function runGate(o) {
   const themes = String(opt.themes).split(',').map((s) => s.trim());
   const langs = String(opt.langs).split(',').map((s) => s.trim());
   const workbenchRoute = String(opt.workbench).split(',')[0].trim() || '/app';
+  // the App route of a product whose App is a surface (`--workbench ''`): G18 measures its Focus mode (shell 0.16.0)
+  const appRoute = String(opt.appRoute ?? '').trim() || '/app';
   const workbenchRoutes = new Set(String(opt.workbench).split(',').map((s) => s.trim()).filter(Boolean));
   const primarySize = sizes.find(([w]) => w >= opt.viewportMinWidth) ?? sizes[0];
   const shotsDir = join(opt.out, 'shots');
@@ -103,7 +108,7 @@ export async function runGate(o) {
   let server = null;
   let base = opt.url;
   if (opt.serve) {
-    server = await servePages(opt.serve, opt.basePath ?? '/');
+    server = await servePages(opt.serve, opt.basePath ?? '/', 0, { spaFallback: Boolean(opt.spaFallback) });
     base = server.url;
   }
   base = base.endsWith('/') ? base : `${base}/`;
@@ -259,6 +264,20 @@ export async function runGate(o) {
       await ctx.close();
     }
 
+    // ---- G18 on a surface App: under --require-focus the App route must be among the measured routes, or nothing would be measured
+    if (opt.requireFocus && workbenchRoutes.size === 0 && !routes.includes(appRoute)) {
+      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]);
@@ -344,6 +363,7 @@ export async function runGate(o) {
             if (walkState.doc) docResult(at, lang, walkState.doc, Math.max(1, leaves));
 
             if (isWorkbench) await walkCases(page, sink, at, { route, isWorkbench, primary, interact: idleHere, size, w, h, theme, lang, walkState, contrast });
+            else if (workbenchRoutes.size === 0 && route === appRoute) await surfaceFocusWalk(page, sink, at, { route, isWorkbench, primary, interact: idleHere, size, w, h, theme, lang, walkState, contrast });
 
             if (primary && isWorkbench) {
               const f = await page.evaluate(() => window.__caosGate.facts());
@@ -449,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`);
@@ -847,16 +868,18 @@ export async function runGate(o) {
         await subs.nth(sn - 1).click({ timeout: 4000 }).catch(() => undefined);
         await settle(page);
       }
-      await focusVisitOne(page, sink, where, s, caseId, index + k, total, enter);
+      await focusVisitOne(page, sink, where, s, { kind: 'case', id: caseId, total }, index + k, enter);
     }
     await tabs.nth(0).click({ timeout: 4000 }).catch(() => undefined);
     await settle(page);
   }
 
-  async function focusVisitOne(page, sink, where, s, caseId, index, total, enter) {
-    const at = { ...where, trail: `case ${caseId} > Focus` };
+  async function focusVisitOne(page, sink, where, s, subject, index, enter) {
+    const isView = subject.kind === 'view';
+    const caseId = subject.id;
+    const at = { ...where, trail: `${subject.kind} ${subject.id} > Focus` };
     const facts = () => page.evaluate(() => window.__caosGate.focusFacts());
-    const label = `Focus mode of case ${caseId}`;
+    const label = `Focus mode of ${subject.kind} ${subject.id}`;
     const before = await facts();
     try {
       await enter.evaluate((el) => window.__caosGate.bringEl(el)).catch(() => undefined);
@@ -872,11 +895,18 @@ export async function runGate(o) {
       fail('G18', at, `${label}: the Focus control did not open Focus mode`);
       return;
     }
-    if (f.caseId !== caseId) fail('G18', at, `${label} shows case ${f.caseId}`);
-    if (f.group !== before.group) fail('G18', at, `${label} shows group ${f.group}, the App had ${before.group}`);
+    if (!isView && f.caseId !== caseId) fail('G18', at, `${label} shows case ${f.caseId}`);
+    if (f.group !== before.group) fail('G18', at, `${label} shows ${isView ? 'view' : 'group'} ${f.group}, the App had ${before.group}`);
     if (f.subview !== before.subview) fail('G18', at, `${label} shows sub-view ${f.subview}, the App had ${before.subview}`);
     const q = new URLSearchParams(f.search);
-    if (q.get('focus') !== '1' || (total > 1 && q.get('case') !== caseId)) fail('G18', at, `${label}: the URL (${f.search || 'no query'}) does not hold ?focus=1 and the case`);
+    // the parameter the App holds Focus in (`focus`, or the product's own `param`), named by the Focus frame
+    const fp = f.focusParam || 'focus';
+    if (isView) {
+      // the view the App held in its URL stays there (a surface that keeps its view out of the URL has none to keep)
+      const param = before.viewParam || 'view';
+      const held = new URLSearchParams(before.search).get(param);
+      if (q.get(fp) !== '1' || (held !== null && q.get(param) !== held)) fail('G18', at, `${label}: the URL (${f.search || 'no query'}) does not hold ?${fp}=1 and the view (?${param}=)`);
+    } else if (q.get(fp) !== '1' || (subject.total > 1 && q.get('case') !== caseId)) fail('G18', at, `${label}: the URL (${f.search || 'no query'}) does not hold ?${fp}=1 and the case`);
     if (f.docW > f.vw + 1 || f.docH > f.vh + 1) fail('G18', at, `${label}: the page scrolls (the document is ${f.docW}x${f.docH}px in a ${f.vw}x${f.vh}px viewport); Focus mode is the viewport`);
     if (f.nestedMain) fail('G18', at, `${label}: the page holds a main inside a main (the Focus frame must not be a second landmark inside the App's main)`);
     // the keyboard stays in the Focus frame: the App behind it is out of the tab order
@@ -893,6 +923,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);
@@ -917,18 +948,103 @@ export async function runGate(o) {
     const g = await facts();
     if (g.focus) {
       fail('G18', at, `${label}: ${byButton && left ? 'the exit control' : 'Escape'} does not return to the App`);
-      await page.goto(`${urlFor(s.route)}?case=${encodeURIComponent(caseId)}`, { waitUntil: 'load', timeout: 30000 }).catch(() => undefined);
+      await page.goto(`${urlFor(s.route)}?${isView ? (before.viewParam || 'view') : 'case'}=${encodeURIComponent(caseId)}`, { waitUntil: 'load', timeout: 30000 }).catch(() => undefined);
       await settle(page);
     } else {
       if (!g.app) fail('G18', at, `${label}: back from Focus mode there is no App on the page`);
-      if (g.caseId !== caseId) fail('G18', at, `${label}: back in the App on case ${g.caseId}, it was left on case ${caseId}`);
-      if (g.group !== before.group) fail('G18', at, `${label}: back in the App on group ${g.group}, it was left on group ${before.group}`);
+      if (!isView && g.caseId !== caseId) fail('G18', at, `${label}: back in the App on case ${g.caseId}, it was left on case ${caseId}`);
+      if (g.group !== before.group) fail('G18', at, `${label}: back in the App on ${isView ? 'view' : 'group'} ${g.group}, it was left on ${isView ? 'view' : 'group'} ${before.group}`);
       if (g.subview !== before.subview) fail('G18', at, `${label}: back in the App on sub-view ${g.subview}, it was left on sub-view ${before.subview}`);
-      if (new URLSearchParams(g.search).has('focus')) fail('G18', at, `${label}: the URL still holds ?focus after the return`);
+      if (new URLSearchParams(g.search).has(fp)) fail('G18', at, `${label}: the URL still holds ?${fp} after the return`);
     }
     drain(sink, at);
   }
 
+  /**
+   * G18 on an App that is a surface (`--workbench ''`, the App route `--app-route`, shell 0.16.0): every view of the surface's tab row is
+   * opened and its tab row measured (the row and the head must not move between views: the Focus control must add no row, ADR-0071);
+   * each view that offers the Focus control is entered from its last sub-view (the first view is where the walk leaves the App, so a
+   * Focus that fell back to it would go unseen) and, in the primary mode, left both by the exit button and by Escape; outside the primary
+   * mode, the last focusable view only. The same failures as for a workbench apply, with the view in place of the case and the group.
+   */
+  async function surfaceFocusWalk(page, sink, at, s) {
+    const rowTabs = page.locator('[data-surface] > .caos-surface-body > .tabs > [role="tablist"] > [role="tab"]');
+    const n = await rowTabs.count();
+    const focusable = [];
+    const rows = [];
+    // the tab row and the head, from the surface's own top (the document may have scrolled)
+    const geometry = () =>
+      page.evaluate(() => {
+        const surface = document.querySelector('[data-surface]');
+        const list = document.querySelector('[data-surface] > .caos-surface-body > .tabs > [role="tablist"]');
+        if (!surface || !list) return null;
+        const top = surface.getBoundingClientRect().top;
+        const r = list.getBoundingClientRect();
+        const head = document.querySelector('[data-surface] > .caos-surface-head');
+        const round = (x) => Math.round(x * 10) / 10;
+        // the height the tabs themselves need (their lowest edge, the row's bottom padding and rule): anything above it is height something
+        // else gave the row, such as a taller Focus control in the slot beside it
+        const cs = getComputedStyle(list);
+        // the tabs stretch to the row, so they are measured at their natural height (aligned to the start for this one reading)
+        const before = list.style.alignItems;
+        list.style.alignItems = 'flex-start';
+        const lowest = Math.max(0, ...[...list.querySelectorAll('[role="tab"]')].map((b) => b.getBoundingClientRect().bottom));
+        list.style.alignItems = before;
+        const need = lowest - r.top + parseFloat(cs.paddingBottom) + parseFloat(cs.borderBottomWidth);
+        return { top: round(r.top - top), height: round(r.height), head: head ? round(head.getBoundingClientRect().height) : 0, slack: round(r.height - need) };
+      });
+    for (let i = 0; i < n; i += 1) {
+      await rowTabs.nth(i).click({ timeout: 4000 }).catch(() => undefined);
+      await settle(page);
+      const shown = (await page.locator('[data-focus-enter]').filter({ visible: true }).count()) > 0;
+      const facts = await page.evaluate(() => window.__caosGate.focusFacts());
+      if (shown) focusable.push({ index: i, id: facts.group });
+      rows.push({ id: facts.group, geo: await geometry() });
+    }
+    if (focusable.length > 0 && rows[0]?.geo) {
+      for (const r of rows.slice(1)) {
+        if (!r.geo) continue;
+        const g0 = rows[0].geo;
+        if (r.geo.top !== g0.top || r.geo.height !== g0.height || r.geo.head !== g0.head) {
+          fail('G18', { ...at, trail: `view ${r.id}` }, `the surface's tab row or head moves between views (view ${rows[0].id}: row at ${g0.top}px, ${g0.height}px high, head ${g0.head}px; view ${r.id}: row at ${r.geo.top}px, ${r.geo.height}px high, head ${r.geo.head}px): a view must not add a row or shift the tab row (ADR-0071); the Focus control sits on the tab row with its space reserved and adds none, and a per-view head is the product's to keep steady`);
+          break;
+        }
+      }
+    }
+    if (focusable.length > 0) {
+      const tall = rows.find((r) => r.geo && r.geo.slack > 3);
+      if (tall) fail('G18', { ...at, trail: `view ${tall.id}` }, `the surface's tab row is ${tall.geo.slack}px taller than its tabs need (view ${tall.id}, row ${tall.geo.height}px): something beside the tabs, such as a taller Focus control in the tab row's slot, adds height to the row on every view (ADR-0071)`);
+      const empty = (await page.evaluate(() => window.__caosGate.focusFacts())).emptyHead;
+      if (empty !== null) fail('G18', { ...at, trail: 'surface head' }, `the surface renders a head with no title, lede or actions (an empty head row ${empty}px high): a surface without them has no head, and the Focus control sits on the tab row, never in a head of its own (ADR-0071)`);
+    }
+    if (focusable.length === 0) {
+      if (opt.requireFocus) {
+        fail('G18', { ...at, trail: 'surface > Focus' }, `the surface App (${at.route}) offers no Focus control ([data-focus-enter]) on any of its ${n} view(s): ADR-0070 requires a visible control on every view with a stage that opens it in focus mode (set TabDef.focus on the view and focus on the SurfacePage)`);
+      }
+      if (n > 0) await rowTabs.nth(0).click({ timeout: 4000 }).catch(() => undefined);
+      await settle(page);
+      return;
+    }
+    const targets = s.primary ? focusable : focusable.slice(-1);
+    for (const [k, v] of targets.entries()) {
+      // the primary mode leaves each focusable view twice: by the exit button (even index), then by Escape (odd index)
+      for (const way of s.primary ? [0, 1] : [0]) {
+        await rowTabs.nth(v.index).click({ timeout: 4000 }).catch(() => undefined);
+        await settle(page);
+        const subs = page.locator('[data-surface] .subtablist [role="tab"]');
+        const sn = await subs.count();
+        if (sn > 1) {
+          await subs.nth(sn - 1).click({ timeout: 4000 }).catch(() => undefined);
+          await settle(page);
+        }
+        const enter = page.locator('[data-focus-enter]').filter({ visible: true }).first();
+        await focusVisitOne(page, sink, at, s, { kind: 'view', id: v.id }, 2 * k + way, enter);
+      }
+    }
+    await rowTabs.nth(0).click({ timeout: 4000 }).catch(() => undefined);
+    await settle(page);
+  }
+
   async function workbenchKey(page) {
     return page.evaluate(() => document.querySelector('[data-case-workbench]')?.getAttribute('data-state-key') ?? null);
   }

package/gate/serve.mjs

@@ -3,6 +3,12 @@
 // index.html; `/name` falls back to `name.html`; anything else is 404 with the site's 404.html. There is no SPA
 // fallback, which is the point: a route that was not materialised, or an artifact missing from the build, fails here
 // exactly as it would on Pages (failure classes 2 and 22: deep links that 404, artifacts answered with HTML).
+// With `spaFallback` (`--spa-fallback`, shell 0.16.0) it answers as nginx does for a single-page app on a VPS
+// (`try_files $uri $uri/ /index.html`): an extensionless path that matches no file gets index.html with 200; a path with an
+// extension that matches no file stays 404, so a missing artifact still fails. Edge paths, by design of a gate server and tested:
+// a directory with no index.html answers the app shell (nginx: 301 then 403); a dot in a directory name reads as an extension, so
+// `/route/with.dot/` and `/app/run.v2` stay 404 (nginx would serve the app); a MISSING dotfile such as `/.env` has no extension and
+// answers the app shell (an existing file, a dotfile included, is served as it is); the query string is no part of the path (`/route?x=1.5` answers the app shell, `/missing.js?v=2` is 404).
 
 import { createServer } from 'node:http';
 import { existsSync, readFileSync, statSync } from 'node:fs';
@@ -37,12 +43,14 @@ const MIME = {
  * @param {string} dir the built site
  * @param {string} basePath the site's base path ('/' for a custom domain, '/Repo/' for a project page)
  * @param {number} port 0 for any free port (the gate), or a fixed one (a product's preview)
+ * @param {{ spaFallback?: boolean }} options `spaFallback`: answer an extensionless path that matches no file with index.html and 200
  * @returns {Promise<{ url: string, close: () => Promise<void> }>}
  */
-export function servePages(dir, basePath = '/', port = 0) {
+export function servePages(dir, basePath = '/', port = 0, options = {}) {
   const root = resolve(dir);
   const base = basePath.endsWith('/') ? basePath : `${basePath}/`;
   const notFound = join(root, '404.html');
+  const rootIndex = join(root, 'index.html');
   const server = createServer((req, res) => {
     const send = (status, file, headers = {}) => {
       res.writeHead(status, { 'Content-Type': MIME[extname(file).toLowerCase()] ?? 'application/octet-stream', 'Cache-Control': 'no-store', ...headers });
@@ -57,6 +65,8 @@ export function servePages(dir, basePath = '/', port = 0) {
     };
     let path;
     let search = '';
+    // nginx `try_files $uri $uri/ /index.html`: a path with no extension that is no file answers the app shell
+    const miss = () => (options.spaFallback && !extname(path ?? '') && existsSync(rootIndex) ? send(200, rootIndex) : missing());
     try {
       const u = new URL(req.url ?? '/', 'http://x');
       path = decodeURIComponent(u.pathname);
@@ -77,7 +87,7 @@ export function servePages(dir, basePath = '/', port = 0) {
       if (st.isFile()) return send(200, file);
       if (st.isDirectory()) {
         const index = join(file, 'index.html');
-        if (!existsSync(index)) return missing();
+        if (!existsSync(index)) return miss();
         if (!path.endsWith('/')) {
           // the query string survives the redirect, as a Pages host keeps it (an old link /app?case=B2 must reach its case)
           res.writeHead(301, { Location: `${path}/${search}` });
@@ -87,7 +97,7 @@ export function servePages(dir, basePath = '/', port = 0) {
       }
     }
     if (!path.endsWith('/') && existsSync(`${file}.html`)) return send(200, `${file}.html`);
-    return missing();
+    return miss();
   });
   return new Promise((ok) => {
     server.listen(port, '127.0.0.1', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.15.0",
+  "version": "0.17.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

@@ -155,6 +155,7 @@
     "caos-surface",
     "caos-surface-actions",
     "caos-surface-body",
+    "caos-surface-focus",
     "caos-surface-head",
     "caos-surface-heading",
     "caos-surface-lede",
@@ -197,8 +198,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",
@@ -277,6 +281,8 @@
     "tablist",
     "tabpanel",
     "tabs",
+    "tabs-has-slot",
+    "tabs-slot",
     "th-refs",
     "th-refs-label",
     "tick-list",
@@ -292,6 +298,7 @@
     "accent",
     "active",
     "caos-col-text",
+    "caos-focus-norail",
     "compact",
     "contain",
     "error",
@@ -413,6 +420,7 @@
     "caos-focus-hud",
     "caos-focus-instrument",
     "caos-focus-label",
+    "caos-focus-norail",
     "caos-focus-rail",
     "caos-focus-rail-body",
     "caos-focus-shell",
@@ -462,6 +470,7 @@
     "caos-surface",
     "caos-surface-actions",
     "caos-surface-body",
+    "caos-surface-focus",
     "caos-surface-head",
     "caos-surface-heading",
     "caos-surface-lede",
@@ -506,8 +515,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",
@@ -596,6 +608,8 @@
     "tablist",
     "tabpanel",
     "tabs",
+    "tabs-has-slot",
+    "tabs-slot",
     "th-refs",
     "th-refs-label",
     "tick-list",

package/styles.css

@@ -507,11 +507,28 @@ svg.lucide { flex: none; }
 .cs-reset { border: none; background: transparent; color: var(--color-accent); font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.2rem; text-decoration: underline; text-underline-offset: 2px; }
 /* 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. */
-.cs-select { width: 100%; max-width: 460px; }
-/* the select and a control beside it (the workbench's Focus button): one row, the select shrinks, the control keeps its size */
+/* The case select shows the selected name whole, at any length, in a display (as many lines as the longest name of the list needs, measured in the DOM by CaseSelector; no clamp, no ellipsis), the native select on top of it, transparent by colour (shell 0.17.0; BL-074). */
+.cs-select-wrap { position: relative; width: 100%; max-width: 460px; min-width: 0; }
+.cs-select-display { box-sizing: border-box; display: flex; align-items: center; position: relative; min-width: 0; background: var(--color-surface-2); color: var(--color-fg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.35rem 1.7rem 0.35rem 0.5rem; font-size: 0.85rem; line-height: 1.25; }
+.cs-select-text { display: block; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
+.cs-select-display::after { content: ''; position: absolute; right: 0.65rem; top: 50%; width: 0.4rem; height: 0.4rem; margin-top: -0.3rem; border-right: 2px solid var(--color-fg-subtle); border-bottom: 2px solid var(--color-fg-subtle); transform: rotate(45deg); }
+.cs-select-wrap > .cs-select-native { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0 0.5rem; box-sizing: border-box; background: transparent; color: transparent; border-color: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
+.cs-select-native option, .cs-select-native optgroup { color: var(--color-fg); background: var(--color-surface-2); }
+.cs-select-wrap > .cs-select-native:focus { outline: none; }
+.cs-select-wrap:focus-within > .cs-select-display { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+@supports selector(:has(*)) {
+  .cs-select-wrap:focus-within > .cs-select-display { outline: none; }
+  .cs-select-wrap:has(> .cs-select-native:focus-visible) > .cs-select-display { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+}
+/* Windows High Contrast forces a select's text back to CanvasText, which would paint its one cut line over the display's lines (the re-review of 0.17.0, B1) */
+@media (forced-colors: active) {
+  .cs-select-wrap > .cs-select-native { forced-color-adjust: none; }
+  .cs-select-native option, .cs-select-native optgroup { forced-color-adjust: auto; }
+}
+/* the select and a control beside it (a product's accessory): one row, the select shrinks, the control keeps its size */
 .cs-select-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
-.cs-select-row > .cs-select { flex: 1 1 auto; min-width: 0; }
-.cs-select-row > :not(.cs-select) { flex: none; }
+.cs-select-row > .cs-select-wrap { flex: 1 1 auto; min-width: 0; }
+.cs-select-row > :not(.cs-select-wrap) { flex: none; }
 
 /* == 9 workbench ================================================================================================ */
 
@@ -837,3 +854,28 @@ svg.lucide { flex: none; }
 @media (max-width: 900px) {
   .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)); }
 }
+
+/* == Focus mode for a SurfacePage App (shell 0.16.0, ADR-0070) ======================================================== */
+
+/* The stage is the open view, laid out as CaseWorkbench's group is (the same clearance under the Focus chrome); a view with no rail
+   leaves the frame one column, so the stage is the whole frame. */
+.caos-focus-instrument > .caos-surface-focus { position: absolute; inset: 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--caos-focus-clear-top, 4.6rem) 0.9rem max(0.9rem, var(--caos-focus-clear-bottom, 0px)); }
+.caos-surface-focus > .tabs { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
+.caos-surface-focus > .tabs > .tabpanel:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.6rem; }
+.caos-focus-shell.caos-focus-norail { grid-template-columns: minmax(0,1fr); }
+@media (max-width: 900px) {
+  .caos-focus-instrument > .caos-surface-focus { padding: var(--caos-focus-clear-top, 6.6rem) 0.5rem max(0.5rem, var(--caos-focus-clear-bottom, 0px)); }
+  .caos-focus-shell.caos-focus-norail { grid-template-rows: minmax(0,1fr); }
+}
+/* The Focus control of a surface sits at the end of the tab row, in a slot beside the tab list, on the same row (never in the head, never
+   inside the tablist). The slot is always there while the surface has Focus, so the row does not move between views; the tabs scroll
+   beside it. The slot repeats the tab list's bottom rule, so the line runs under both. */
+.caos-surface-body > .tabs.tabs-has-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 0.5rem; }
+.tabs-has-slot > .tablist { grid-column: 1; grid-row: 1; }
+.tabs-has-slot > .tabs-slot { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; align-items: center; padding-bottom: 0.4rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--color-border); }
+.tabs-has-slot > .tabs-slot > .caos-focus-enter { align-self: center; padding-block: 0.2rem; }
+.tabs-has-slot > .tabpanel { grid-column: 1 / -1; grid-row: 2; }
+/* The same slot in the workbench's group tab row (shell 0.17.0, BL-074): the Focus control of the App ends the row, so the case select keeps
+   the rail head's whole width. The tab row's own spacing (a tighter rule than the surface's) is repeated under the slot. */
+.caos-cw > .tabs.tabs-has-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 0.5rem; }
+.caos-cw > .tabs-has-slot > .tabs-slot { margin-bottom: 0.5rem; padding-bottom: var(--space-1); }