@consciousclouds/shell-primitive 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,7 +1,46 @@
+# 0.1.2 — Responsive shell local candidate
+
+Add ShellViewportProvider/useShellViewport for container-aware composition. ShellFrame measures header height, uses available CSS layout width for sidebar/reflow and bounds portals. Default host is 100dvh; consumers can supply a sized provider. Existing slots and motion tokens remain supported.
+
+Not published. Frozen earlier candidates remain unchanged.
+
 # Changelog
 
 All notable changes to `@consciousclouds/shell-primitive` are documented here.
 
+## [0.1.1] — local release candidate, 2026-11-01
+
+- Require UI and Tokens ^0.1.1 through registry-compatible ranges; declare React DOM; respect reduced motion for workspace and inspector reflow using the existing UI hook. Public props unchanged.
+- Pack lifecycle builds fresh distributable output. Historical 0.1.0 is unchanged.
+- Candidate only: no registry publication or published-digest claim.
+
+## Unreleased
+
+- **A skip link** (WCAG 2.4.1, bypass blocks). `ShellFrame` renders "Skip to content" as its first focusable element,
+  hidden until it has focus.
+  - It moves focus straight to the workspace scroller (`#shell-workspace`, in both chromes), so the next Tab lands in
+    the page.
+  - `skipLinkLabel` overrides its text.
+  - Measured in a real browser: the first Tab stop, visible with a ring. Enter puts focus in `<main>`: 2 key presses
+    instead of 8 with no grants, and more with a full nav.
+- **The inspector region** (Frontend Platform Doctrine: the frame owns the header · nav · workspace · inspector
+  regions). `ShellFrame` gains the optional `inspector` slot, plus `inspectorOpen` (default `false`) and
+  `inspectorWidth` (default 384, surfaced as `--inspector-width`).
+  - Like the assistant, the slot node owns its own open/close, focus and width. The frame owns its placement,
+    directly beside the workspace and before the assistant, and the reflow: the workspace↔inspector gap opens while
+    `inspectorOpen` says the inspector takes space.
+  - No inspector ⇒ no region and no wrapper; the DOM is unchanged.
+  - In framed chrome the workspace and the inspector share their own row (`data-slot="shell-inspector-reflow"`),
+    so a closed zero-width inspector never adds a second gap beside the assistant.
+- `ShellFrame` gains **`sidebarDefaultOpen`** (default `true`), handed to the
+  registry `SidebarProvider` as `defaultOpen`.
+- The workspace scroll container is **keyboard-focusable** with a visible focus
+  ring (axe `scrollable-region-focusable`).
+- **Framed chrome pads less on phones** (outer `p-2`, inner `p-3` below `sm`), so
+  the two layers no longer take 64px of a 390px screen.
+- The reflow container carries `data-slot="shell-reflow"`. Tests select it by
+  that slot, not by padding classes.
+
 ## 0.1.0
 
 - Initial extraction of the neutral **Shell Primitive** from the live

package/README.md

@@ -38,3 +38,26 @@ in Chief) owns its own open/close and focus lifecycle — the frame only reflows
 the main region around it.
 
 See `docs/design/frontend-platform-doctrine.md`.
+
+## Unit 1 compatibility candidate (0.1.1, unpublished)
+
+Require UI and Tokens ^0.1.1 through registry-compatible ranges; declare React DOM; respect reduced motion for workspace and inspector reflow using the existing UI hook. Public props unchanged.
+
+Use public package exports. No product checkout, application runtime or Universal source alias is required.
+React 19, React Router 7/Vite 6 and Next.js 16/Tailwind 4 are the Unit 1 verification targets.
+The existing React >=18 peer range is preserved; this unit does not certify every version in that range.
+For CSS consumers, import Tailwind first, then `@consciousclouds/tokens/styles/house.css`,
+`@consciousclouds/ui/styles/source.css`, and `@consciousclouds/shell-primitive/styles/source.css`
+when using the frame. The CSS source registrations scan installed `dist` files.
+Theme colors remain HSL channel triples (for example `145 65% 28%`), not full `hsl(...)` or `oklch(...)` values.
+Product fonts, logos, navigation, flavors and authority remain consumer-owned.
+Brand overrides target the document root; multiple independently themed embedded roots need a separately approved scoping contract.
+See `scripts/frontend-foundation-unit1/README.md` in the source repository for reproducible candidate verification,
+publication ordering and release limitations.
+
+
+## Responsive candidate 0.1.2
+
+Add ShellViewportProvider/useShellViewport for container-aware composition. ShellFrame measures header height, uses available CSS layout width for sidebar/reflow and bounds portals. Default host is 100dvh; consumers can supply a sized provider. Existing slots and motion tokens remain supported.
+
+See `scripts/operator-shell-responsive/README.md` in the source repository for artifact-only verification and compatibility limits. This is a local candidate, not a published release.

package/dist/frame/ShellFrame.d.ts

@@ -8,8 +8,18 @@
  *   - a full-width header bar (the `header` slot) above
  *   - an icon-collapsible sidebar (the `sidebar` slot) and
  *   - a main / workspace region (`children`), with
+ *   - an OPTIONAL inspector region beside it (the `inspector` slot), and
  *   - an OPTIONAL right-side assistant panel (the `assistant` slot).
  *
+ * The inspector region is the frame's fourth region (Frontend Platform Doctrine:
+ * header · nav · workspace · inspector). Like the assistant, the slot node owns
+ * its own open/close, focus and width; the frame owns only its PLACEMENT,
+ * directly beside the workspace and before the assistant, and the reflow: the
+ * workspace↔inspector gap opens while `inspectorOpen` says the inspector takes
+ * space. The slot decides when it takes space (a shell may dock it only where
+ * the viewport has room and float it otherwise). No inspector ⇒ no region and
+ * no wrapper: the frame's DOM is exactly what it was.
+ *
  * The assistant-panel PLACEMENT is a frame concern; the assistant's turn flow,
  * open/close lifecycle, focus return, and its own panel-width / scrim are the
  * SLOT's concern (whatever node a shell drops in — the operator shell drops in
@@ -74,14 +84,45 @@ export interface ShellFrameProps {
      * for `push`. `rail` is always in-flow at `xl+`; `overlay` never reflows.
      */
     assistantOpen?: boolean;
+    /**
+     * OPTIONAL inspector region — the detail panel beside the workspace. The node
+     * owns its OWN open/close, focus and width; the frame places it between the
+     * workspace and the assistant and reflows the workspace around it. Absent ⇒ no
+     * region and no extra wrapper.
+     */
+    inspector?: React.ReactNode;
+    /**
+     * Whether the inspector currently TAKES SPACE beside the workspace (default
+     * `false`) — opens the workspace↔inspector gap. A slot that floats (a sheet
+     * over the content) leaves this false.
+     */
+    inspectorOpen?: boolean;
+    /**
+     * The inspector's width in px (default 384), surfaced to the slot as the
+     * `--inspector-width` CSS custom property.
+     */
+    inspectorWidth?: number;
     /** The main region's chrome (default `framed`). */
     workspaceChrome?: ShellWorkspaceChrome;
+    /**
+     * The skip link's text (default "Skip to content"). The link is the frame's first focusable element, hidden until it
+     * has focus, and moves focus to the workspace, so a keyboard operator does not tab through the header and every nav
+     * item on every page.
+     */
+    skipLinkLabel?: string;
     /**
      * OPTIONAL overlay surfaces (e.g. a command palette) mounted inside the
      * frame's provider context but out of flow — portals/dialogs that must sit
      * within the shell's React tree without disturbing the layout.
      */
     overlays?: React.ReactNode;
+    /**
+     * Whether the sidebar starts expanded (default `true`). The registry sidebar
+     * writes its state to the `sidebar_state` cookie on every toggle; a product
+     * that reads that cookie on the server passes it here, so a collapsed sidebar
+     * stays collapsed across a reload instead of springing open.
+     */
+    sidebarDefaultOpen?: boolean;
 }
-export declare function ShellFrame({ header, sidebar, children, assistant, assistantBehavior, assistantWidth, assistantOpen, workspaceChrome, overlays, }: ShellFrameProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShellFrame(props: ShellFrameProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ShellFrame.d.ts.map

package/dist/frame/ShellFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShellFrame.d.ts","sourceRoot":"","sources":["../../src/frame/ShellFrame.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAE5D,kFAAkF;AAClF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,cAAc,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,8DAA8D;IAC9D,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,yEAAyE;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mDAAmD;IACnD,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAcD,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,iBAA0B,EAC1B,cAAoB,EACpB,aAAqB,EACrB,eAA0B,EAC1B,QAAQ,GACT,EAAE,eAAe,2CA2DjB"}
+{"version":3,"file":"ShellFrame.d.ts","sourceRoot":"","sources":["../../src/frame/ShellFrame.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAE5D,kFAAkF;AAClF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,cAAc,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,8DAA8D;IAC9D,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,yEAAyE;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mDAAmD;IACnD,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAiBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAGhD"}

package/dist/frame/ShellFrame.js

@@ -1,39 +1,123 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ShellFrame — the neutral shell FRAME: the one layout skeleton every
+ * Frontend-Platform shell (Operator / Business / Consumer) frames around.
+ * MECHANISM, not meaning — it knows nothing of any product, of Chief, of a
+ * transport, of the nav engine, or of the permission guard. It owns only the
+ * arrangement:
+ *
+ *   - a full-width header bar (the `header` slot) above
+ *   - an icon-collapsible sidebar (the `sidebar` slot) and
+ *   - a main / workspace region (`children`), with
+ *   - an OPTIONAL inspector region beside it (the `inspector` slot), and
+ *   - an OPTIONAL right-side assistant panel (the `assistant` slot).
+ *
+ * The inspector region is the frame's fourth region (Frontend Platform Doctrine:
+ * header · nav · workspace · inspector). Like the assistant, the slot node owns
+ * its own open/close, focus and width; the frame owns only its PLACEMENT,
+ * directly beside the workspace and before the assistant, and the reflow: the
+ * workspace↔inspector gap opens while `inspectorOpen` says the inspector takes
+ * space. The slot decides when it takes space (a shell may dock it only where
+ * the viewport has room and float it otherwise). No inspector ⇒ no region and
+ * no wrapper: the frame's DOM is exactly what it was.
+ *
+ * The assistant-panel PLACEMENT is a frame concern; the assistant's turn flow,
+ * open/close lifecycle, focus return, and its own panel-width / scrim are the
+ * SLOT's concern (whatever node a shell drops in — the operator shell drops in
+ * Chief). The frame's job is the MAIN-REGION REFLOW: the gap between the
+ * workspace and the panel animates as the panel occupies space, given
+ * (assistant present + behavior + open + width).
+ *
+ *   - `push` (default): the workspace visibly reflows beside an in-flow panel
+ *     at `lg+` (the gap opens from 0 to 1rem when the panel opens).
+ *   - `overlay`: the panel floats over the workspace — no reflow (the gap
+ *     stays 0; the slot renders its own floating drawer).
+ *   - `rail`: an always-present in-flow rail at `xl+` — the gap is always open
+ *     at `xl+`.
+ *
+ * If NO assistant slot is passed, no panel and no reflow render at all: "a
+ * shell without an assistant" falls out for free (the gap is permanently 0 and
+ * the workspace fills the inset). This is exactly what the future Business /
+ * Consumer shells rely on when they frame around ShellFrame without Chief.
+ *
+ * The reflow motion is read from @consciousclouds/tokens (`motionTokens`) —
+ * the platform's single source of truth for duration/easing — never
+ * hand-rolled numbers. Everything else is layout composed over
+ * @consciousclouds/ui's `SidebarProvider` / `SidebarInset`.
+ */
+import * as React from "react";
+import { ShellViewportProvider, useShellViewport } from "./viewport.js";
 import { motionTokens } from "@consciousclouds/tokens";
-import { SidebarInset, SidebarProvider, cn } from "@consciousclouds/ui";
+import { SidebarInset, SidebarProvider, cn, useReducedMotion } from "@consciousclouds/ui";
 /**
  * The reflow transition — motion from the token vocabulary, applied inline so
  * the timing travels with the JS values (no hand-rolled `duration-300 /
  * ease-in-out`). The gap VALUES stay Tailwind classes; only the timing is
  * tokenized here.
  */
+/** The workspace scroller's id: the skip link's target, one per frame (a page renders one shell). */
+const WORKSPACE_ID = "shell-workspace";
 const REFLOW_TRANSITION = {
     transitionProperty: "gap",
     transitionDuration: `${motionTokens.duration.base}s`,
     transitionTimingFunction: `cubic-bezier(${motionTokens.easing.standard.join(", ")})`,
 };
-export function ShellFrame({ header, sidebar, children, assistant, assistantBehavior = "push", assistantWidth = 420, assistantOpen = false, workspaceChrome = "framed", overlays, }) {
+export function ShellFrame(props) {
+    const viewport = useShellViewport();
+    return viewport ? _jsx(ShellFrameBody, { ...props }) : _jsx(ShellViewportProvider, { children: _jsx(ShellFrameBody, { ...props }) });
+}
+function ShellFrameBody({ header, sidebar, children, assistant, assistantBehavior = "push", assistantWidth = 420, assistantOpen = false, inspector, inspectorOpen = false, inspectorWidth = 384, workspaceChrome = "framed", skipLinkLabel = "Skip to content", overlays, sidebarDefaultOpen = true, }) {
+    const viewport = useShellViewport();
+    const headerRef = React.useRef(null);
+    const [headerHeight, setHeaderHeight] = React.useState(56);
+    React.useEffect(() => {
+        const element = headerRef.current;
+        if (!element)
+            return;
+        const measure = () => { const height = element.offsetHeight; if (height > 0)
+            setHeaderHeight(height); };
+        measure();
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+        observer?.observe(element);
+        return () => observer?.disconnect();
+    }, []);
+    const reducedMotion = useReducedMotion();
+    const reflowTransition = reducedMotion
+        ? { ...REFLOW_TRANSITION, transitionDuration: "0s" }
+        : REFLOW_TRANSITION;
     const framed = workspaceChrome === "framed";
     const hasAssistant = assistant != null;
+    const hasInspector = inspector != null;
+    const narrow = viewport?.width !== undefined && viewport.width < 768;
     // The main-region reflow gap: opens (0 → 1rem) as the panel takes space.
     // Only ever non-zero when an assistant is present — no assistant ⇒ no reflow.
     const reflowGap = !hasAssistant
         ? "gap-0"
         : assistantBehavior === "rail"
-            ? "gap-0 xl:gap-4"
+            ? (viewport?.width === undefined ? "gap-0 xl:gap-4" : viewport.width >= 1280 ? "gap-4" : "gap-0")
             : assistantBehavior === "push" && assistantOpen
-                ? "gap-0 lg:gap-4"
+                ? (viewport?.width === undefined ? "gap-0 lg:gap-4" : viewport.width >= 1024 ? "gap-4" : "gap-0")
                 : "gap-0";
-    return (_jsxs(SidebarProvider, { className: "h-svh flex-col overflow-hidden", style: {
-            "--header-height": "3.5rem",
+    // FRAMED chrome: the workspace card and the inspector share their own flex row, so the inspector's gap is
+    // independent of the assistant's (a closed, zero-width region never adds a second gap beside the assistant).
+    const withInspector = (workspace) => hasInspector ? (_jsxs("div", { "data-slot": "shell-inspector-reflow", className: cn("flex min-h-0 min-w-0 flex-1", inspectorOpen ? "gap-4" : "gap-0"), style: reflowTransition, children: [workspace, inspector] })) : (workspace);
+    return (_jsxs(SidebarProvider, { defaultOpen: sidebarDefaultOpen, mobile: viewport?.width === undefined ? undefined : viewport.width < 768, mobileContainer: viewport?.element, className: "h-full min-h-0 flex-col overflow-hidden", style: {
+            "--header-height": `${headerHeight}px`,
             "--assistant-width": `${assistantWidth}px`,
-        }, children: [header, overlays, _jsxs("div", { className: "flex min-h-0 flex-1", children: [sidebar, _jsx(SidebarInset, { className: "min-h-0 flex-row overflow-hidden", children: framed ? (
+            "--inspector-width": `${inspectorWidth}px`,
+        }, children: [_jsx("a", { href: `#${WORKSPACE_ID}`, "data-slot": "shell-skip-link", onClick: (event) => {
+                    const workspace = document.getElementById(WORKSPACE_ID);
+                    if (!workspace)
+                        return;
+                    event.preventDefault();
+                    workspace.focus();
+                }, className: "sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-[100] focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-overlay focus:outline-none focus:ring-2 focus:ring-ring", children: skipLinkLabel }), _jsx("div", { ref: headerRef, className: "shrink-0", children: header }), overlays, _jsxs("div", { className: "flex min-h-0 flex-1", children: [sidebar, _jsx(SidebarInset, { className: "min-h-0 flex-row overflow-hidden", children: framed ? (
                         // FRAMED workspace chrome: the workspace floats as a rounded
                         // container, a sibling card beside the assistant panel; the gap
                         // animates alongside the panel so the reflow reads as one motion.
-                        _jsxs("div", { className: cn("flex min-h-0 min-w-0 flex-1 p-4 lg:p-6", reflowGap), style: REFLOW_TRANSITION, children: [_jsx("div", { className: "min-w-0 flex-1 overflow-y-auto rounded-xl bg-muted/50 shadow-panel p-4 lg:p-6", children: children }), assistant] })) : (
+                        _jsxs("div", { "data-slot": "shell-reflow", className: cn("flex min-h-0 min-w-0 flex-1", narrow ? "p-2" : "p-4 lg:p-6", reflowGap), style: reflowTransition, children: [withInspector(_jsx("div", { id: WORKSPACE_ID, tabIndex: 0, className: cn("min-w-0 flex-1 overflow-x-auto overflow-y-auto rounded-xl bg-muted/50 shadow-panel outline-none focus-visible:ring-2 focus-visible:ring-ring/50", narrow ? "p-3" : "p-4 lg:p-6"), children: children })), assistant] })) : (
                         // EDGE-TO-EDGE workspace chrome: the flat layout (no reflow gap).
-                        _jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-0 flex-1 overflow-y-auto p-4 lg:p-6", children: children }), assistant] })) })] })] }));
+                        _jsxs(_Fragment, { children: [_jsx("div", { id: WORKSPACE_ID, tabIndex: 0, className: "min-w-0 flex-1 overflow-y-auto p-4 outline-none focus-visible:ring-2 focus-visible:ring-ring/50 lg:p-6", children: children }), inspector, assistant] })) })] })] }));
 }
 //# sourceMappingURL=ShellFrame.js.map

package/dist/frame/ShellFrame.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShellFrame.js","sourceRoot":"","sources":["../../src/frame/ShellFrame.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAyCb,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAqDxE;;;;;GAKG;AACH,MAAM,iBAAiB,GAAwB;IAC7C,kBAAkB,EAAE,KAAK;IACzB,kBAAkB,EAAE,GAAG,YAAY,CAAC,QAAQ,CAAC,IAAI,GAAG;IACpD,wBAAwB,EAAE,gBAAgB,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;CACrF,CAAC;AAEF,MAAM,UAAU,UAAU,CAAC,EACzB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,iBAAiB,GAAG,MAAM,EAC1B,cAAc,GAAG,GAAG,EACpB,aAAa,GAAG,KAAK,EACrB,eAAe,GAAG,QAAQ,EAC1B,QAAQ,GACQ;IAChB,MAAM,MAAM,GAAG,eAAe,KAAK,QAAQ,CAAC;IAC5C,MAAM,YAAY,GAAG,SAAS,IAAI,IAAI,CAAC;IAEvC,yEAAyE;IACzE,8EAA8E;IAC9E,MAAM,SAAS,GAAG,CAAC,YAAY;QAC7B,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,iBAAiB,KAAK,MAAM;YAC5B,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,iBAAiB,KAAK,MAAM,IAAI,aAAa;gBAC7C,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,OAAO,CAAC;IAEhB,OAAO,CACL,MAAC,eAAe,IACd,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EACH;YACE,iBAAiB,EAAE,QAAQ;YAC3B,mBAAmB,EAAE,GAAG,cAAc,IAAI;SACpB,aAGzB,MAAM,EACN,QAAQ,EACT,eAAK,SAAS,EAAC,qBAAqB,aACjC,OAAO,EACR,KAAC,YAAY,IAAC,SAAS,EAAC,kCAAkC,YACvD,MAAM,CAAC,CAAC,CAAC;wBACR,6DAA6D;wBAC7D,gEAAgE;wBAChE,kEAAkE;wBAClE,eACE,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,EAClE,KAAK,EAAE,iBAAiB,aAMxB,cAAK,SAAS,EAAC,+EAA+E,YAC3F,QAAQ,GACL,EAGL,SAAS,IACN,CACP,CAAC,CAAC,CAAC;wBACF,kEAAkE;wBAClE,8BACE,cAAK,SAAS,EAAC,2CAA2C,YAAE,QAAQ,GAAO,EAC1E,SAAS,IACT,CACJ,GACY,IACX,IACU,CACnB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ShellFrame.js","sourceRoot":"","sources":["../../src/frame/ShellFrame.tsx"],"names":[],"mappings":"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"}

package/dist/frame/viewport.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface ShellViewport {
+    /** Undefined during SSR; the initial markup stays hydration-compatible. */
+    width: number | undefined;
+    height: number | undefined;
+    element: HTMLDivElement | null;
+}
+/** Actual available layout space, not the browser's width. No routes or product state. */
+export declare function useShellViewport(): ShellViewport | null;
+/** Composite shells can share the frame's size and portal boundary with their slots. */
+export declare function ShellViewportProvider({ children, style, className }: {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=viewport.d.ts.map

package/dist/frame/viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../../src/frame/viewport.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,aAAa;IAC5B,2EAA2E;IAC3E,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;CAChC;AAGD,0FAA0F;AAC1F,wBAAgB,gBAAgB,IAAI,aAAa,GAAG,IAAI,CAEvD;AAED,wFAAwF;AACxF,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAyBA"}

package/dist/frame/viewport.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+const ViewportContext = React.createContext(null);
+/** Actual available layout space, not the browser's width. No routes or product state. */
+export function useShellViewport() {
+    return React.useContext(ViewportContext);
+}
+/** Composite shells can share the frame's size and portal boundary with their slots. */
+export function ShellViewportProvider({ children, style, className }) {
+    const [element, setElement] = React.useState(null);
+    const [size, setSize] = React.useState({});
+    React.useEffect(() => {
+        if (!element)
+            return;
+        const measure = () => {
+            // CSS layout pixels preserve breakpoints under zoom or host transforms.
+            const box = { width: element.clientWidth, height: element.clientHeight };
+            // Hidden/unmeasured hosts retain SSR fallback until there is real geometry.
+            if (box.width <= 0)
+                return;
+            const width = box.width;
+            const height = box.height;
+            setSize(old => old.width === width && old.height === height ? old : { width, height });
+        };
+        measure();
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+        observer?.observe(element);
+        window.addEventListener("resize", measure);
+        return () => { observer?.disconnect(); window.removeEventListener("resize", measure); };
+    }, [element]);
+    const value = React.useMemo(() => ({ width: size.width, height: size.height, element }), [size, element]);
+    return _jsx(ViewportContext.Provider, { value: value, children: _jsx("div", { ref: setElement, "data-slot": "shell-viewport", className: className, style: { position: "relative", width: "100%", height: "100dvh", minWidth: 0, contain: "layout", ...style }, children: children }) });
+}
+//# sourceMappingURL=viewport.js.map

package/dist/frame/viewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.js","sourceRoot":"","sources":["../../src/frame/viewport.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAuB,IAAI,CAAC,CAAC;AAExE,0FAA0F;AAC1F,MAAM,UAAU,gBAAgB;IAC9B,OAAO,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAC3C,CAAC;AAED,wFAAwF;AACxF,MAAM,UAAU,qBAAqB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAIjE;IACC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAC9E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,wEAAwE;YACxE,MAAM,GAAG,GAAG,EAAC,KAAK,EAAC,OAAO,CAAC,WAAW,EAAC,MAAM,EAAC,OAAO,CAAC,YAAY,EAAC,CAAC;YACpE,4EAA4E;YAC5E,IAAI,GAAG,CAAC,KAAK,IAAI,CAAC;gBAAE,OAAO;YAC3B,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;YACxB,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC;YAC1B,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,KAAK,IAAI,GAAG,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC,CAAC;QACvF,CAAC,CAAC;QACF,OAAO,EAAE,CAAC;QACV,MAAM,QAAQ,GAAG,OAAO,cAAc,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;QAC5F,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;QAC3B,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC3C,OAAO,GAAG,EAAE,GAAG,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1F,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAC,KAAK,EAAC,IAAI,CAAC,KAAK,EAAC,MAAM,EAAC,IAAI,CAAC,MAAM,EAAC,OAAO,EAAC,CAAC,EAAE,CAAC,IAAI,EAAC,OAAO,CAAC,CAAC,CAAC;IACnG,OAAO,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAE,cAAK,GAAG,EAAE,UAAU,eAAY,gBAAgB,EAC7F,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAC,CAAC,EAAC,OAAO,EAAC,QAAQ,EAAC,GAAG,KAAK,EAAC,YACnH,QAAQ,GACL,GAA2B,CAAC;AACpC,CAAC"}

package/dist/index.d.ts

@@ -17,4 +17,6 @@
  */
 export { ShellFrame } from "./frame/ShellFrame.js";
 export type { AssistantBehavior, ShellFrameProps, ShellWorkspaceChrome, } from "./frame/ShellFrame.js";
+export { ShellViewportProvider, useShellViewport } from "./frame/viewport.js";
+export type { ShellViewport } from "./frame/viewport.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,YAAY,EACV,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,YAAY,EACV,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC9E,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -16,4 +16,5 @@
  * docs/design/frontend-platform-doctrine.md.
  */
 export { ShellFrame } from "./frame/ShellFrame.js";
+export { ShellViewportProvider, useShellViewport } from "./frame/viewport.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAOnD,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@consciousclouds/shell-primitive",
-  "version": "0.1.0",
-  "description": "ConsciousClouds Shell Primitive — the neutral shell FRAME (mechanism, not meaning): the header + sidebar + main-region layout skeleton over @consciousclouds/ui, the responsive assistant-panel placement mechanics (push | overlay | rail reflow), and workspace chrome (framed | edge-to-edge). No product, no Chief, no nav, no permission guard. The shared primitive the Operator / Business / Consumer shells frame around. Layer 3·5 of the Frontend Platform.",
+  "version": "0.1.2",
+  "description": "ConsciousClouds Shell Primitive \u2014 the neutral shell FRAME (mechanism, not meaning): the header + sidebar + main-region layout skeleton over @consciousclouds/ui, the responsive assistant-panel placement mechanics (push | overlay | rail reflow), and workspace chrome (framed | edge-to-edge). No product, no Chief, no nav, no permission guard. The shared primitive the Operator / Business / Consumer shells frame around. Layer 3\u00b75 of the Frontend Platform.",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -25,17 +25,19 @@
     "clean": "rm -rf dist",
     "test": "bun test",
     "type-check": "tsc --noEmit",
-    "prepublishOnly": "bun run clean && bun run build && bun run type-check"
+    "prepublishOnly": "bun run clean && bun run build && bun run type-check",
+    "prepack": "bun run clean && bun run build && bun run type-check"
   },
   "dependencies": {
-    "@consciousclouds/ui": "0.1.0"
+    "@consciousclouds/ui": "^0.1.3"
   },
   "peerDependencies": {
-    "@consciousclouds/tokens": "0.1.0",
-    "react": ">=18.0.0"
+    "@consciousclouds/tokens": "^0.1.1",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@consciousclouds/tokens": "0.1.0",
+    "@consciousclouds/tokens": "^0.1.1",
     "@happy-dom/global-registrator": "^20.10.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.1",