@fasl-work/caos-app-shell 0.6.1 → 0.6.3

package/dist/index.d.ts

@@ -68,6 +68,21 @@ interface ShellConfig {
             es: string;
         };
     };
+    /**
+     * Routes whose surface IS the viewport (ADR-0071 rule 1): on these the shell adds
+     * `.app-shell.fixed`, which sizes the page to 100dvh and lets flex distribute the
+     * height, so the ONE container that owns long content scrolls and the document
+     * never does. A doc route is not listed and keeps the document scroll. Matching is
+     * exact, or by prefix for a non-root path (`/lab` matches `/lab/case-1`).
+     *
+     * The stylesheet has carried `.app-shell.fixed` with the note "apps that fill the
+     * viewport add it" since the containment fix, and no app could: this component
+     * rendered a fixed class string. Measured on Porvenir before this field existed:
+     * every tab of the App route scrolled the document by 200 to 770px.
+     */
+    fixedRoutes?: string[];
+    /** Every route fixed: a single-surface app (a hub, a one-page tool). */
+    fixed?: boolean;
 }
 /** The shared CAOS/Faena app shell: sticky header (brand + nav + icon-links + lang/theme) + footer.
  * Wrap your <Routes> (or single landing) in it, inside a Router. */
@@ -262,6 +277,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

@@ -1,5 +1,5 @@
 import { createContext, useState, useRef, useEffect, useCallback, useId, useContext } from 'react';
-import { NavLink } from 'react-router';
+import { useLocation, NavLink } from 'react-router';
 import { Sun, Moon, Languages, Boxes, Github, Globe, Briefcase, Info } from 'lucide-react';
 import { create } from 'zustand';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -254,7 +254,9 @@ function AppShell({ config, children }) {
   const portfolio = config.links.portfolio ?? PORTFOLIO;
   const [archOpen, setArchOpen] = useState(false);
   const archLabel = lang === "es" ? "Arquitectura / C\xF3mo funciona" : "Architecture / How it works";
-  return /* @__PURE__ */ jsxs("div", { className: "app-shell", children: [
+  const { pathname } = useLocation();
+  const fixed = config.fixed === true || (config.fixedRoutes ?? []).some((p) => p === pathname || p !== "/" && pathname.startsWith(p.replace(/\/$/, "") + "/"));
+  return /* @__PURE__ */ jsxs("div", { className: fixed ? "app-shell fixed" : "app-shell", children: [
     /* @__PURE__ */ jsx("header", { className: "site-header", children: /* @__PURE__ */ jsxs("div", { className: "header-inner", children: [
       /* @__PURE__ */ jsxs(NavLink, { to: "/", className: "brand", "aria-label": config.product.name, children: [
         /* @__PURE__ */ jsx("span", { className: "brand-mark", children: config.product.mark ?? /* @__PURE__ */ jsx(Boxes, { size: 18, "aria-hidden": "true" }) }),
@@ -568,7 +570,8 @@ function CaseSelector(props) {
     text,
     deepLink,
     ariaLabel,
-    className
+    className,
+    layout = "chips"
   } = props;
   const t = { ...TEXT[lang], ...text };
   const baseId = useId();
@@ -606,7 +609,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.3",
   "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; }