@fasl-work/caos-app-shell 0.6.0 → 0.6.2

package/dist/index.d.ts

@@ -262,6 +262,18 @@ interface CaseSelectorProps {
     deepLink?: boolean | string;
     ariaLabel?: string;
     className?: string;
+    /**
+     * How the one-of-N choice is presented. Default 'chips' keeps the labelled chip
+     * blocks; 'select' renders a native dropdown with one optgroup per category.
+     *
+     * ADR-0071 rule 7 asks for the dropdown whenever the deck is a categorised
+     * one-of-N choice, because the chip layout spends vertical space linearly in the
+     * number of cases and that space is taken from the instrument on every render.
+     * Measured on Porvenir at 2560x1440: ten cases in four categories occupied a
+     * 308px block, 21% of the viewport, for a choice one control expresses. The
+     * category structure is preserved either way; only the height changes.
+     */
+    layout?: 'chips' | 'select';
 }
 /**
  * CaseSelector v2 — the shared source + case picker. Renders (1) an optional first-level source

package/dist/index.js

@@ -568,7 +568,8 @@ function CaseSelector(props) {
     text,
     deepLink,
     ariaLabel,
-    className
+    className,
+    layout = "chips"
   } = props;
   const t = { ...TEXT[lang], ...text };
   const baseId = useId();
@@ -606,7 +607,17 @@ function CaseSelector(props) {
       )) })
     ] }),
     source && source !== "synthetic" && /* @__PURE__ */ jsx("p", { className: "cs-locked banner", children: lockedNote ?? t.lockedNote }),
-    groups.map((g) => /* @__PURE__ */ jsxs("div", { className: "cs-group", role: "group", "aria-label": g.category || void 0, children: [
+    layout === "select" && /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: "select cs-select",
+        "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.id} \xB7 ${c.name}` }, c.id)) }, g.category || "_"))
+      }
+    ),
+    layout === "chips" && groups.map((g) => /* @__PURE__ */ jsxs("div", { className: "cs-group", role: "group", "aria-label": g.category || void 0, children: [
       g.category && /* @__PURE__ */ jsx("span", { className: "cs-group-label", children: g.category }),
       /* @__PURE__ */ jsx("div", { className: "cs-chips", children: g.cases.map((c) => {
         const on = c.id === selectedId;

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "@fasl-work/caos-app-shell",
-  "version": "0.6.0",
-  "description": "Shared web-app shell + content primitives + design system for the CAOS / Faena public apps (ADR-0016).",
-  "license": "MIT",
-  "author": "Felipe Santibáñez-Leal",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/fsantibanezleal/CAOS_APP_SHELL.git"
-  },
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "sideEffects": [
-    "*.css"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./styles.css": "./styles.css"
-  },
-  "files": [
-    "dist",
-    "styles.css"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "test": "node --import tsx --test \"test/**/*.test.ts\" \"test/**/*.test.tsx\"",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "katex": "^0.16.0",
-    "lucide-react": ">=0.400.0",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
-    "react-router": "^6 || ^7 || ^8",
-    "zustand": "^4 || ^5"
-  },
-  "devDependencies": {
-    "@types/katex": "^0.16.7",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "katex": "^0.16.11",
-    "lucide-react": "^0.469.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router": "^8.3.0",
-    "tsup": "^8.3.5",
-    "tsx": "^4.23.0",
-    "typescript": "^5.7.3",
-    "zustand": "^5.0.2"
-  },
-  "overrides": {
-    "esbuild": "0.28.1"
-  }
-}
+{
+  "name": "@fasl-work/caos-app-shell",
+  "version": "0.6.2",
+  "description": "Shared web-app shell + content primitives + design system for the CAOS / Faena public apps (ADR-0016).",
+  "license": "MIT",
+  "author": "Felipe Santibáñez-Leal",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fsantibanezleal/CAOS_APP_SHELL.git"
+  },
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "node --import tsx --test \"test/**/*.test.ts\" \"test/**/*.test.tsx\"",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "katex": "^0.16.0",
+    "lucide-react": ">=0.400.0",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "react-router": "^6 || ^7 || ^8",
+    "zustand": "^4 || ^5"
+  },
+  "devDependencies": {
+    "@types/katex": "^0.16.7",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "katex": "^0.16.11",
+    "lucide-react": "^0.469.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^8.3.0",
+    "tsup": "^8.3.5",
+    "tsx": "^4.23.0",
+    "typescript": "^5.7.3",
+    "zustand": "^5.0.2"
+  },
+  "overrides": {
+    "esbuild": "0.28.1"
+  }
+}

package/styles.css

@@ -285,7 +285,14 @@ code, kbd { font-family: var(--font-mono); }
    the tab bar a single scrollable row pushes the whole page wider than the viewport and the user has to
    drag sideways to reach the right edge. Measured on ChargeCascade: scrollWidth 1817 on a 1600 viewport. */
 html, body { overflow-x: hidden; }
-.page-body { max-width: 100%; }
+/* `min-width: 0`, NOT `max-width: 100%`. Containment is about letting a box SHRINK below its
+   content; capping it at 100% does nothing for that and, because this rule comes after the
+   `.page-body` definition above, it silently OVERRODE `max-width: var(--maxw)` and removed the
+   1200px reading cap from every prose page in every product on this shell. Measured on Porvenir at
+   1600x900: doc routes rendered 1600px wide instead of 1200px centered, so body text ran the full
+   width of the display, which is the opposite of what ADR-0017 s1.1 specifies. The wide workbench
+   opt-in is `.page-body.wide`; a prose page must keep the measure. */
+.page-body { min-width: 0; }
 .tabs, .tabpanel { min-width: 0; max-width: 100%; }
 .tablist { min-width: 0; max-width: 100%; width: 100%; }
 
@@ -301,11 +308,15 @@ html, body { overflow-x: hidden; }
 /* A viewport-filling app must not carry the prose footer margin: it becomes dead space between the
    content and the chrome. Measured on ChargeCascade as exactly 48px (3rem). */
 .app-shell.fixed .site-footer { margin-top: 0; }
+
+/* ADR-0058 diagram i18n. A hand-authored architecture SVG carries BOTH languages inside ONE file,
+   and the modal wrapper picks one. Two files would be two things to keep in step, and the one not
+   on screen is the one that goes stale. The rules are scoped to [data-arch-lang] so the short class
+   names cannot collide with an app's own styles. */
+[data-arch-lang] .l-es { display: none; }
+[data-arch-lang="es"] .l-en { display: none; }
+[data-arch-lang="es"] .l-es { display: inline; }
 
-/* ADR-0058 diagram i18n. A hand-authored architecture SVG carries BOTH languages inside ONE file,
-   and the modal wrapper picks one. Two files would be two things to keep in step, and the one not
-   on screen is the one that goes stale. The rules are scoped to [data-arch-lang] so the short class
-   names cannot collide with an app's own styles. */
-[data-arch-lang] .l-es { display: none; }
-[data-arch-lang="es"] .l-en { display: none; }
-[data-arch-lang="es"] .l-es { display: inline; }
+/* 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; }