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

package/styles.css

@@ -316,3 +316,7 @@ html, body { overflow-x: hidden; }
 [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; }