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

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. */

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" }) }),

package/package.json

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

@@ -181,7 +181,12 @@ code, kbd { font-family: var(--font-mono); }
 .subtab { padding: 0.32rem 0.8rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-fg-subtle); font-size: 0.84rem; font-weight: 500; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
 .subtab:hover { color: var(--color-fg); border-color: var(--color-fg-faint); }
 .subtab.active { color: var(--color-accent); background: var(--color-accent-soft); border-color: color-mix(in oklab, var(--color-accent) 40%, transparent); font-weight: 600; }
-.subtabs-vertical { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 1.5rem; align-items: start; }
+/* `minmax(0, 1fr)`, NOT `1fr`. A bare `1fr` track is `minmax(auto, 1fr)`, and `auto` is the
+   min-content width of the panel, so a wide table in a sub-tab panel sized the whole grid to
+   the table and pushed the page past the viewport instead of scrolling inside its wrapper
+   (ADR-0071 rule 3). Measured on Porvenir's Datasets tab at 1280x800: the panel column
+   rendered 1380px wide on a 1280px viewport. */
+.subtabs-vertical { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
 .subtabs-vertical .subtablist { flex-direction: column; margin-bottom: 0; }
 .subtabs-vertical .subtab { text-align: left; border-radius: 8px; }
 @media (max-width: 760px) { .subtabs-vertical { grid-template-columns: 1fr; } .subtabs-vertical .subtablist { flex-direction: row; } }
@@ -293,7 +298,7 @@ html, body { overflow-x: hidden; }
    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%; }
+.tabs, .tabpanel, .subtabs, .subtabpanels, .subtabpanel { min-width: 0; max-width: 100%; }
 .tablist { min-width: 0; max-width: 100%; width: 100%; }
 
 /* NO MAGIC CHROME NUMBER. An app surface must not compute its height from a hardcoded guess at the
@@ -308,6 +313,12 @@ 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; }
+/* On a contained surface the footer competes with the instrument for a fixed height. With a
+   product's provenance and disclaimer it wrapped into 178px at 1600x900 (five lines), and the
+   instrument fell from 56 to 42 percent of the viewport, under the ADR-0071 rule 8 floor. The
+   text stays (ADR-0016 s2: provenance and the honest disclaimer are the footer's job); it is set
+   compact, so it takes two to three lines, not five. */
+.app-shell.fixed .site-footer .footer-inner { padding: 0.45rem 1.5rem; gap: 0.4rem; font-size: 0.74rem; line-height: 1.3; }
 
 /* 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
@@ -316,7 +327,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; }
+
+/* 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; }