@fasl-work/caos-app-shell 0.6.2 → 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. */

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.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",