@wildo-ai/presets-components-3d 1.1.6

package/dist/esm/layout-3d-main-container.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useNavigationState, useUI } from '@wildo-ai/saas-frontend-lib';
+import { FrameCanvasDoor } from './frame/frame-canvas.lazy.js';
+import { assertSupportedLayout3D, INHERIT_LAYOUT_3D } from './layout/layout-3d-definition.js';
+import { crossFadesAppearance } from './layout/layout-3d-transition-choreography.js';
+import { Layout3DCamera } from './layout/layout-3d-vocabulary.js';
+import { ShellLayoutPlacementKind } from './layout/shell-layout-placement.js';
+import { useFrameAppearance } from './frame/use-frame-appearance.js';
+/**
+ * The brand a 3D main container carries. `Symbol.for`, not `Symbol`: the component registry lives on
+ * `globalThis` and survives a hot reload, while a reloaded module would mint a new `Symbol` and fail to
+ * recognise the container it registered last time — and then capture it as "the 2D shell".
+ */
+const LAYOUT_3D_MAIN_CONTAINER_BRAND = Symbol.for('@wildo-ai/presets-components-3d/main-container');
+/** Whether a registered main container is a 3D one — and so carries the 2D container it wraps. */
+export function isLayout3DMainContainer(component) {
+    return typeof component === 'function' && component[LAYOUT_3D_MAIN_CONTAINER_BRAND] === true;
+}
+let appearanceMismatchWarned = false;
+/**
+ * How long a shell appearance other than the one the layout requires must persist before it is reported. The UI
+ * context starts from the DEFAULT theme and resolves the application's own theme a moment later, so the first value
+ * this container sees is routinely SEPARATED even in a CONTINUOUS application — measured on Wonder Todos, whose
+ * shell renders `bg-transparent` while the first-render value read SEPARATED. Only a value that survives
+ * bootstrap is the application's.
+ */
+const APPEARANCE_MISMATCH_REPORT_DELAY_MS = 5000;
+/**
+ * Build the 3D main container: a captured 2D container, and a layout that either renders it (INHERIT) or arranges
+ * the regions with a container of its own (COMPOSED).
+ *
+ * It renders exactly two children, at FIXED positions:
+ *
+ * - **index 0, the frame slot** ({@link FrameSlot}): the decorative canvas behind its lazy door (`FrameCanvasDoor`),
+ *   whose `LazyDoorErrorBoundary` contains any failure of it. The theme and the navigation state are read in the
+ *   slot, in the DOM tree, and passed to the canvas as props: a theme, mode, breakpoint or navigation change
+ *   re-renders index 0 and never touches index 1.
+ *   It is `position: fixed` with NO z-index, `aria-hidden` and `pointer-events: none`.
+ * - **index 1, the placement**: the captured 2D container, unchanged, for an INHERIT layout; the layout's own
+ *   container, composed from the same shell building blocks, otherwise. Either way every region, provider,
+ *   context, portal and latch is the application's own.
+ *
+ * Why no wrapper, and no `isolate` (the #1821 text proposed `<div class="isolate">` with the canvas at
+ * `-z-10`): `isolate` would make the whole shell ONE stacking context, so anything positioned OUTSIDE it
+ * with a lower z-index — the consent prompt (`z-50`) — would paint over the shell's own dialogs
+ * (`--z-overlay`, 300). #1830 measured that exact reordering and chose `relative` for the 2D shell root
+ * for that reason. Instead, a positioned element with no z-index paints at the z-index:0 level in TREE
+ * order, which puts the canvas after the theme's background layer (`UIContext`'s `isolate` wrapper,
+ * earlier in the tree) and before the shell root (`relative`, the next sibling) — frame above the theme
+ * background, shell above the frame — while every z-index inside the shell keeps its global order.
+ *
+ * The precondition this places on the placement: its ROOT must be positioned (the 2D default and the
+ * header-first container are `relative`, #1830), or its in-flow content paints at a lower level than the frame and
+ * under it. The frame never takes a click either way — it handles no pointer events at all.
+ *
+ * Why fixed positions: a canvas failure empties only index 0. The placement never moves and keeps one component
+ * type for the application's life, so it never remounts — a remount there would unmount every navigation zone and
+ * lose its state.
+ */
+export function create3DMainContainer(captured, options = {}) {
+    const layout = options.layout ?? INHERIT_LAYOUT_3D;
+    const frameStyles = options.frameStyles;
+    // A camera, transition kind or rest pose the renderer does not implement is refused here, at registration.
+    assertSupportedLayout3D(layout);
+    const crossFadeAppearance = crossFadesAppearance(layout.transitions.appearance);
+    // Chosen ONCE, outside the component: the element at index 1 keeps one type for the application's life, so it
+    // never remounts.
+    const Placement = layout.placement.kind === ShellLayoutPlacementKind.INHERIT ? captured : layout.placement.container;
+    function Layout3DMainContainer(props) {
+        const { shellAppearance } = useUI();
+        const required = layout.constraints.requiredShellAppearance;
+        useEffect(() => {
+            // The frame is visible only where regions paint nothing. A layout states the shell appearance it is designed
+            // for; any other is the application's choice to correct, so it is said once and nothing switches.
+            if (required === null || shellAppearance === required || appearanceMismatchWarned)
+                return undefined;
+            const report = setTimeout(() => {
+                // Checked again here: several containers (or a remount) may have armed a timer before the first fired.
+                if (appearanceMismatchWarned)
+                    return;
+                appearanceMismatchWarned = true;
+                console.warn(`[presets-components-3d] the 3D layout '${layout.id}' is designed for a '${String(required)}' shell, and this theme's `
+                    + `shell appearance is '${String(shellAppearance)}': opaque regions will cover the frame drawn under them.`);
+            }, APPEARANCE_MISMATCH_REPORT_DELAY_MS);
+            return () => clearTimeout(report);
+        }, [shellAppearance, required]);
+        return (_jsxs(_Fragment, { children: [layout.scene.camera === Layout3DCamera.FLAT_ORTHOGRAPHIC && _jsx(FrameSlot, { layout: layout, frameStyles: frameStyles, crossFadeAppearance: crossFadeAppearance }), _jsx(Placement, { ...props })] }));
+    }
+    return Object.assign(Layout3DMainContainer, {
+        [LAYOUT_3D_MAIN_CONTAINER_BRAND]: true,
+        captured,
+        layout,
+        frameStyles,
+    });
+}
+/**
+ * Index 0 of a 3D main container: reads what the frame follows — the theme (`useFrameAppearance`) and the navigation
+ * state (#1826) — and hands it to the canvas. Its own component, so a navigation, which changes the navigation state
+ * many times a second during some flows, re-renders this slot and never the placement beside it.
+ *
+ * The navigation signature is every structural zone's top entry (`getTopEntry`, so a tabbed zone reports its visible
+ * tab), identified by its URL PATH:
+ * - not by its id, which is minted again on every push or replace, so a route sync that re-lands the SAME place would
+ *   read as a navigation nobody made (the id stands in only for an entry without a URL);
+ * - not by its query string, which carries VIEW state on the same content (`?section=`, `?dataMode=`, which the
+ *   engine updates in place as "same id, same content"): switching a board's section tab or a list's mode is not
+ *   going somewhere, and does not play.
+ * The route sync hooks mirror router navigations into those stacks, so a sidebar link and a record opened beside a
+ * list both change it; the overlay zone is not a place and does not. While no zone holds anything yet, the signature
+ * is empty, which the frame never records (see `FrameDriver.setNavigation`).
+ */
+function FrameSlot({ layout, frameStyles, crossFadeAppearance, }) {
+    const appearance = useFrameAppearance(layout.scene.frameStyles, frameStyles);
+    const navigation = useNavigationState();
+    const zones = Object.keys(navigation.state.zones);
+    const places = zones.map((zone) => {
+        const top = navigation.getTopEntry(zone);
+        return top ? (top.urlPath?.split(/[?#]/)[0] ?? top.id) : '';
+    });
+    const navigationSignature = places.some((place) => place !== '') ? zones.map((zone, index) => `${zone}:${places[index]}`).join('|') : '';
+    return (_jsx(FrameCanvasDoor, { appearance: appearance, camera: layout.scene.camera, crossFadeAppearance: crossFadeAppearance, navigationTransition: layout.transitions.navigation, sidebarResizeTransition: layout.transitions.sidebarResize, zoneFocusTransition: layout.transitions.zoneFocus, navigationSignature: navigationSignature, focusedZone: navigation.focusedZone }));
+}
+//# sourceMappingURL=layout-3d-main-container.js.map

package/dist/esm/layout-3d-main-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-3d-main-container.js","sourceRoot":"","sources":["../../../src/layout-3d-main-container.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\n\nimport { useNavigationState, useUI, type AppLayoutPreset_MainContainer_DefaultProps } from '@wildo-ai/saas-frontend-lib';\n\nimport { FrameCanvasDoor } from './frame/frame-canvas.lazy';\nimport type { Frame3DStyleOverrides } from './frame/frame-3d-style';\nimport { assertSupportedLayout3D, INHERIT_LAYOUT_3D, type Layout3DDefinition } from './layout/layout-3d-definition';\nimport { crossFadesAppearance } from './layout/layout-3d-transition-choreography';\nimport { Layout3DCamera } from './layout/layout-3d-vocabulary';\nimport { ShellLayoutPlacementKind } from './layout/shell-layout-placement';\nimport { useFrameAppearance } from './frame/use-frame-appearance';\n\n/**\n * The brand a 3D main container carries. `Symbol.for`, not `Symbol`: the component registry lives on\n * `globalThis` and survives a hot reload, while a reloaded module would mint a new `Symbol` and fail to\n * recognise the container it registered last time — and then capture it as \"the 2D shell\".\n */\nconst LAYOUT_3D_MAIN_CONTAINER_BRAND = Symbol.for('@wildo-ai/presets-components-3d/main-container');\n\ntype MainContainerComponent = React.ComponentType<AppLayoutPreset_MainContainer_DefaultProps>;\n\n/** @wildo_source:part:start presets.3d.register-layout facet:layer:frontend facet:family:layout-3d facet:audience:app-developer */\n/** What a 3D main container draws: the layout, and the application's frame-style overrides. */\nexport interface Layout3DOptions {\n  /**\n   * The layout: its disposal, its scene and its transitions. Defaults to {@link INHERIT_LAYOUT_3D}, the 2D disposal\n   * with the frame under it. An application uses ONE layout for its whole life.\n   */\n  layout?: Layout3DDefinition;\n  /** Frame-style overrides layered over the layout's built-in styles. */\n  frameStyles?: Frame3DStyleOverrides;\n}\n/** @wildo_source:part:end presets.3d.register-layout */\n\n/** A 3D main container: the component, the 2D container it captured, and the layout it draws. */\nexport type Layout3DMainContainer = MainContainerComponent & {\n  readonly [LAYOUT_3D_MAIN_CONTAINER_BRAND]: true;\n  /**\n   * The 2D main container captured at registration: rendered unchanged by an INHERIT placement, and kept by every\n   * layout so a re-registration wraps IT rather than a 3D container.\n   */\n  readonly captured: MainContainerComponent;\n  /** The layout this container draws. */\n  readonly layout: Layout3DDefinition;\n  /** The application's frame-style overrides, when it registered any. */\n  readonly frameStyles: Frame3DStyleOverrides | undefined;\n};\n\n/** Whether a registered main container is a 3D one — and so carries the 2D container it wraps. */\nexport function isLayout3DMainContainer(component: unknown): component is Layout3DMainContainer {\n  return typeof component === 'function' && (component as Partial<Layout3DMainContainer>)[LAYOUT_3D_MAIN_CONTAINER_BRAND] === true;\n}\n\nlet appearanceMismatchWarned = false;\n\n/**\n * How long a shell appearance other than the one the layout requires must persist before it is reported. The UI\n * context starts from the DEFAULT theme and resolves the application's own theme a moment later, so the first value\n * this container sees is routinely SEPARATED even in a CONTINUOUS application — measured on Wonder Todos, whose\n * shell renders `bg-transparent` while the first-render value read SEPARATED. Only a value that survives\n * bootstrap is the application's.\n */\nconst APPEARANCE_MISMATCH_REPORT_DELAY_MS = 5000;\n\n/**\n * Build the 3D main container: a captured 2D container, and a layout that either renders it (INHERIT) or arranges\n * the regions with a container of its own (COMPOSED).\n *\n * It renders exactly two children, at FIXED positions:\n *\n * - **index 0, the frame slot** ({@link FrameSlot}): the decorative canvas behind its lazy door (`FrameCanvasDoor`),\n *   whose `LazyDoorErrorBoundary` contains any failure of it. The theme and the navigation state are read in the\n *   slot, in the DOM tree, and passed to the canvas as props: a theme, mode, breakpoint or navigation change\n *   re-renders index 0 and never touches index 1.\n *   It is `position: fixed` with NO z-index, `aria-hidden` and `pointer-events: none`.\n * - **index 1, the placement**: the captured 2D container, unchanged, for an INHERIT layout; the layout's own\n *   container, composed from the same shell building blocks, otherwise. Either way every region, provider,\n *   context, portal and latch is the application's own.\n *\n * Why no wrapper, and no `isolate` (the #1821 text proposed `<div class=\"isolate\">` with the canvas at\n * `-z-10`): `isolate` would make the whole shell ONE stacking context, so anything positioned OUTSIDE it\n * with a lower z-index — the consent prompt (`z-50`) — would paint over the shell's own dialogs\n * (`--z-overlay`, 300). #1830 measured that exact reordering and chose `relative` for the 2D shell root\n * for that reason. Instead, a positioned element with no z-index paints at the z-index:0 level in TREE\n * order, which puts the canvas after the theme's background layer (`UIContext`'s `isolate` wrapper,\n * earlier in the tree) and before the shell root (`relative`, the next sibling) — frame above the theme\n * background, shell above the frame — while every z-index inside the shell keeps its global order.\n *\n * The precondition this places on the placement: its ROOT must be positioned (the 2D default and the\n * header-first container are `relative`, #1830), or its in-flow content paints at a lower level than the frame and\n * under it. The frame never takes a click either way — it handles no pointer events at all.\n *\n * Why fixed positions: a canvas failure empties only index 0. The placement never moves and keeps one component\n * type for the application's life, so it never remounts — a remount there would unmount every navigation zone and\n * lose its state.\n */\nexport function create3DMainContainer(captured: MainContainerComponent, options: Layout3DOptions = {}): Layout3DMainContainer {\n  const layout = options.layout ?? INHERIT_LAYOUT_3D;\n  const frameStyles = options.frameStyles;\n  // A camera, transition kind or rest pose the renderer does not implement is refused here, at registration.\n  assertSupportedLayout3D(layout);\n  const crossFadeAppearance = crossFadesAppearance(layout.transitions.appearance);\n  // Chosen ONCE, outside the component: the element at index 1 keeps one type for the application's life, so it\n  // never remounts.\n  const Placement: MainContainerComponent = layout.placement.kind === ShellLayoutPlacementKind.INHERIT ? captured : layout.placement.container;\n  function Layout3DMainContainer(props: AppLayoutPreset_MainContainer_DefaultProps): React.JSX.Element {\n    const { shellAppearance } = useUI();\n    const required = layout.constraints.requiredShellAppearance;\n\n    useEffect(() => {\n      // The frame is visible only where regions paint nothing. A layout states the shell appearance it is designed\n      // for; any other is the application's choice to correct, so it is said once and nothing switches.\n      if (required === null || shellAppearance === required || appearanceMismatchWarned) return undefined;\n      const report = setTimeout(() => {\n        // Checked again here: several containers (or a remount) may have armed a timer before the first fired.\n        if (appearanceMismatchWarned) return;\n        appearanceMismatchWarned = true;\n        console.warn(\n          `[presets-components-3d] the 3D layout '${layout.id}' is designed for a '${String(required)}' shell, and this theme's `\n          + `shell appearance is '${String(shellAppearance)}': opaque regions will cover the frame drawn under them.`,\n        );\n      }, APPEARANCE_MISMATCH_REPORT_DELAY_MS);\n      return () => clearTimeout(report);\n    }, [shellAppearance, required]);\n\n    return (\n      <>\n        {/* A spatial layout's placement draws its own environment; the flat frame belongs to the flat camera only. */}\n        {layout.scene.camera === Layout3DCamera.FLAT_ORTHOGRAPHIC && <FrameSlot layout={layout} frameStyles={frameStyles} crossFadeAppearance={crossFadeAppearance} />}\n        <Placement {...props} />\n      </>\n    );\n  }\n\n  return Object.assign(Layout3DMainContainer, {\n    [LAYOUT_3D_MAIN_CONTAINER_BRAND]: true as const,\n    captured,\n    layout,\n    frameStyles,\n  });\n}\n\n/**\n * Index 0 of a 3D main container: reads what the frame follows — the theme (`useFrameAppearance`) and the navigation\n * state (#1826) — and hands it to the canvas. Its own component, so a navigation, which changes the navigation state\n * many times a second during some flows, re-renders this slot and never the placement beside it.\n *\n * The navigation signature is every structural zone's top entry (`getTopEntry`, so a tabbed zone reports its visible\n * tab), identified by its URL PATH:\n * - not by its id, which is minted again on every push or replace, so a route sync that re-lands the SAME place would\n *   read as a navigation nobody made (the id stands in only for an entry without a URL);\n * - not by its query string, which carries VIEW state on the same content (`?section=`, `?dataMode=`, which the\n *   engine updates in place as \"same id, same content\"): switching a board's section tab or a list's mode is not\n *   going somewhere, and does not play.\n * The route sync hooks mirror router navigations into those stacks, so a sidebar link and a record opened beside a\n * list both change it; the overlay zone is not a place and does not. While no zone holds anything yet, the signature\n * is empty, which the frame never records (see `FrameDriver.setNavigation`).\n */\nfunction FrameSlot({\n  layout,\n  frameStyles,\n  crossFadeAppearance,\n}: {\n  layout: Layout3DDefinition;\n  frameStyles: Frame3DStyleOverrides | undefined;\n  crossFadeAppearance: boolean;\n}): React.JSX.Element {\n  const appearance = useFrameAppearance(layout.scene.frameStyles, frameStyles);\n  const navigation = useNavigationState();\n  const zones = Object.keys(navigation.state.zones) as Array<keyof typeof navigation.state.zones>;\n  const places = zones.map((zone) => {\n    const top = navigation.getTopEntry(zone);\n    return top ? (top.urlPath?.split(/[?#]/)[0] ?? top.id) : '';\n  });\n  const navigationSignature = places.some((place) => place !== '') ? zones.map((zone, index) => `${zone}:${places[index]}`).join('|') : '';\n  return (\n    <FrameCanvasDoor\n      appearance={appearance}\n      camera={layout.scene.camera}\n      crossFadeAppearance={crossFadeAppearance}\n      navigationTransition={layout.transitions.navigation}\n      sidebarResizeTransition={layout.transitions.sidebarResize}\n      zoneFocusTransition={layout.transitions.zoneFocus}\n      navigationSignature={navigationSignature}\n      focusedZone={navigation.focusedZone}\n    />\n  );\n}\n"]}

package/dist/esm/register-3d-layout.d.ts

@@ -0,0 +1,40 @@
+import { type FrontendComponentRegistration } from '@wildo-ai/saas-frontend-lib';
+import { type Layout3DOptions } from './layout-3d-main-container';
+/** @wildo_source:part:start presets.3d.register-layout facet:layer:frontend facet:family:layout-3d facet:audience:app-developer */
+/**
+ * Make an application's signed-in shell 3D: the shell's regions — unchanged HTML, with all their contexts —
+ * arranged by a 3D layout, with a decorative WebGL frame drawn under them.
+ *
+ * There is no 2D/3D switch and no option to enable it. An application is 3D because it CALLS this, from
+ * its engine module's `componentRegistrations` — the entries `registerFrontendComponentRegistrations`
+ * runs AFTER the framework presets are registered, so the Default main container exists by then:
+ *
+ * ```ts
+ * import { register3DLayout } from '@wildo-ai/presets-components-3d';
+ *
+ * export const engineComponentRegistrations: FrontendComponentRegistration[] = [register3DLayout()];
+ * ```
+ *
+ * It registers under `Default` for `APP_LAYOUTS_MAIN_CONTAINER`, the only preset key the shell resolves,
+ * after capturing the container registered there before it. An INHERIT layout renders that captured container,
+ * unchanged; a layout with a disposal of its own renders its composed container instead, built from the same
+ * shell building blocks — either way every region, context and behaviour is the application's own.
+ *
+ * - **Refuses** when nothing is registered yet: capturing `null` would render no shell at all, and the
+ *   cause — the registration running before the framework presets — is worth an error, not a blank app.
+ * - **Idempotent**: a registration that finds a 3D container already there (a second call, or the
+ *   registry surviving a hot reload on `globalThis`) wraps the 2D container IT captured, never itself.
+ * - **Keeps the registration's metadata**: the captured container's `isConfigurable` is carried over, so
+ *   nothing that reads the registry's metadata sees a difference.
+ *
+ * `options.layout` selects the layout (`INHERIT_LAYOUT_3D` by default); `options.frameStyles` layers an
+ * application's frame styles over the layout's own (per theme id, or for all themes).
+ *
+ * - **One layout per application.** A registration that finds a 3D container of a DIFFERENT layout already
+ *   registered refuses: an application is not 3D in two ways, and a silent replacement would hide which one it
+ *   is. The same layout again is idempotent. (A layout changed in code during a hot reload needs a full page
+ *   reload, because the registry outlives the hot reload.)
+ */
+export declare function register3DLayout(options?: Layout3DOptions): FrontendComponentRegistration;
+/** @wildo_source:part:end presets.3d.register-layout */
+//# sourceMappingURL=register-3d-layout.d.ts.map

package/dist/esm/register-3d-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register-3d-layout.d.ts","sourceRoot":"","sources":["../../../src/register-3d-layout.ts"],"names":[],"mappings":"AACA,OAAO,EAA4B,KAAK,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAE3G,OAAO,EAAkD,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAIlH,mIAAmI;AACnI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,eAAoB,GAAG,6BAA6B,CAiC7F;AACD,wDAAwD"}

package/dist/esm/register-3d-layout.js

@@ -0,0 +1,72 @@
+import { CorePresetNames, FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { ComponentRegistryService } from '@wildo-ai/saas-frontend-lib';
+import { create3DMainContainer, isLayout3DMainContainer } from './layout-3d-main-container.js';
+import { BUILT_IN_LAYOUTS_3D, INHERIT_LAYOUT_3D } from './layout/layout-3d-definition.js';
+import { Layout3DId } from './layout/layout-3d-vocabulary.js';
+/** @wildo_source:part:start presets.3d.register-layout facet:layer:frontend facet:family:layout-3d facet:audience:app-developer */
+/**
+ * Make an application's signed-in shell 3D: the shell's regions — unchanged HTML, with all their contexts —
+ * arranged by a 3D layout, with a decorative WebGL frame drawn under them.
+ *
+ * There is no 2D/3D switch and no option to enable it. An application is 3D because it CALLS this, from
+ * its engine module's `componentRegistrations` — the entries `registerFrontendComponentRegistrations`
+ * runs AFTER the framework presets are registered, so the Default main container exists by then:
+ *
+ * ```ts
+ * import { register3DLayout } from '@wildo-ai/presets-components-3d';
+ *
+ * export const engineComponentRegistrations: FrontendComponentRegistration[] = [register3DLayout()];
+ * ```
+ *
+ * It registers under `Default` for `APP_LAYOUTS_MAIN_CONTAINER`, the only preset key the shell resolves,
+ * after capturing the container registered there before it. An INHERIT layout renders that captured container,
+ * unchanged; a layout with a disposal of its own renders its composed container instead, built from the same
+ * shell building blocks — either way every region, context and behaviour is the application's own.
+ *
+ * - **Refuses** when nothing is registered yet: capturing `null` would render no shell at all, and the
+ *   cause — the registration running before the framework presets — is worth an error, not a blank app.
+ * - **Idempotent**: a registration that finds a 3D container already there (a second call, or the
+ *   registry surviving a hot reload on `globalThis`) wraps the 2D container IT captured, never itself.
+ * - **Keeps the registration's metadata**: the captured container's `isConfigurable` is carried over, so
+ *   nothing that reads the registry's metadata sees a difference.
+ *
+ * `options.layout` selects the layout (`INHERIT_LAYOUT_3D` by default); `options.frameStyles` layers an
+ * application's frame styles over the layout's own (per theme id, or for all themes).
+ *
+ * - **One layout per application.** A registration that finds a 3D container of a DIFFERENT layout already
+ *   registered refuses: an application is not 3D in two ways, and a silent replacement would hide which one it
+ *   is. The same layout again is idempotent. (A layout changed in code during a hot reload needs a full page
+ *   reload, because the registry outlives the hot reload.)
+ */
+export function register3DLayout(options = {}) {
+    let capturedIsConfigurable = false;
+    return {
+        componentRef: FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER,
+        preset: CorePresetNames.DEFAULT,
+        get isConfigurable() {
+            return capturedIsConfigurable;
+        },
+        loadComponent: async () => {
+            const current = ComponentRegistryService.resolve(FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER, CorePresetNames.DEFAULT);
+            if (!current) {
+                throw new Error('register3DLayout(): no Default APP_LAYOUTS_MAIN_CONTAINER is registered to capture. Call it from the engine module\'s '
+                    + '`componentRegistrations`, which run after the framework presets — not from a module evaluated before them.');
+            }
+            const layout = options.layout ?? INHERIT_LAYOUT_3D;
+            // An application's own layout may not borrow a built-in id: the one-layout check compares ids, and a borrowed
+            // one would make two different layouts look like the same.
+            if (Object.values(Layout3DId).includes(layout.id) && BUILT_IN_LAYOUTS_3D[layout.id] !== layout) {
+                throw new Error(`register3DLayout(): the layout id '${layout.id}' belongs to a built-in layout; give the application's own layout an id of its own.`);
+            }
+            if (isLayout3DMainContainer(current) && current.layout.id !== layout.id) {
+                throw new Error(`register3DLayout(): this application already registered the 3D layout '${current.layout.id}' and now asks for '${layout.id}'. `
+                    + 'An application uses one layout: remove the other registration — or, if you just changed the layout in code, '
+                    + 'reload the page (the component registry outlives a hot reload).');
+            }
+            capturedIsConfigurable = ComponentRegistryService.getMetadata(FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER, CorePresetNames.DEFAULT)?.isConfigurable ?? false;
+            return create3DMainContainer(isLayout3DMainContainer(current) ? current.captured : current, options);
+        },
+    };
+}
+/** @wildo_source:part:end presets.3d.register-layout */
+//# sourceMappingURL=register-3d-layout.js.map

package/dist/esm/register-3d-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register-3d-layout.js","sourceRoot":"","sources":["../../../src/register-3d-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC7F,OAAO,EAAE,wBAAwB,EAAsC,MAAM,6BAA6B,CAAC;AAE3G,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAwB,MAAM,4BAA4B,CAAC;AAClH,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,mIAAmI;AACnI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,UAAU,gBAAgB,CAAC,UAA2B,EAAE;IAC5D,IAAI,sBAAsB,GAAG,KAAK,CAAC;IACnC,OAAO;QACL,YAAY,EAAE,qBAAqB,CAAC,0BAA0B;QAC9D,MAAM,EAAE,eAAe,CAAC,OAAO;QAC/B,IAAI,cAAc;YAChB,OAAO,sBAAsB,CAAC;QAChC,CAAC;QACD,aAAa,EAAE,KAAK,IAAI,EAAE;YACxB,MAAM,OAAO,GAAG,wBAAwB,CAAC,OAAO,CAAC,qBAAqB,CAAC,0BAA0B,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;YAC5H,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,MAAM,IAAI,KAAK,CACb,wHAAwH;sBACtH,4GAA4G,CAC/G,CAAC;YACJ,CAAC;YACD,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,iBAAiB,CAAC;YACnD,8GAA8G;YAC9G,2DAA2D;YAC3D,IAAK,MAAM,CAAC,MAAM,CAAC,UAAU,CAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAgB,CAAC,KAAK,MAAM,EAAE,CAAC;gBAC3H,MAAM,IAAI,KAAK,CAAC,sCAAsC,MAAM,CAAC,EAAE,qFAAqF,CAAC,CAAC;YACxJ,CAAC;YACD,IAAI,uBAAuB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,EAAE,CAAC;gBACxE,MAAM,IAAI,KAAK,CACb,0EAA0E,OAAO,CAAC,MAAM,CAAC,EAAE,uBAAuB,MAAM,CAAC,EAAE,KAAK;sBAC9H,8GAA8G;sBAC9G,iEAAiE,CACpE,CAAC;YACJ,CAAC;YACD,sBAAsB,GAAG,wBAAwB,CAAC,WAAW,CAAC,qBAAqB,CAAC,0BAA0B,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,cAAc,IAAI,KAAK,CAAC;YAClK,OAAO,qBAAqB,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACvG,CAAC;KACF,CAAC;AACJ,CAAC;AACD,wDAAwD","sourcesContent":["import { CorePresetNames, FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { ComponentRegistryService, type FrontendComponentRegistration } from '@wildo-ai/saas-frontend-lib';\n\nimport { create3DMainContainer, isLayout3DMainContainer, type Layout3DOptions } from './layout-3d-main-container';\nimport { BUILT_IN_LAYOUTS_3D, INHERIT_LAYOUT_3D } from './layout/layout-3d-definition';\nimport { Layout3DId } from './layout/layout-3d-vocabulary';\n\n/** @wildo_source:part:start presets.3d.register-layout facet:layer:frontend facet:family:layout-3d facet:audience:app-developer */\n/**\n * Make an application's signed-in shell 3D: the shell's regions — unchanged HTML, with all their contexts —\n * arranged by a 3D layout, with a decorative WebGL frame drawn under them.\n *\n * There is no 2D/3D switch and no option to enable it. An application is 3D because it CALLS this, from\n * its engine module's `componentRegistrations` — the entries `registerFrontendComponentRegistrations`\n * runs AFTER the framework presets are registered, so the Default main container exists by then:\n *\n * ```ts\n * import { register3DLayout } from '@wildo-ai/presets-components-3d';\n *\n * export const engineComponentRegistrations: FrontendComponentRegistration[] = [register3DLayout()];\n * ```\n *\n * It registers under `Default` for `APP_LAYOUTS_MAIN_CONTAINER`, the only preset key the shell resolves,\n * after capturing the container registered there before it. An INHERIT layout renders that captured container,\n * unchanged; a layout with a disposal of its own renders its composed container instead, built from the same\n * shell building blocks — either way every region, context and behaviour is the application's own.\n *\n * - **Refuses** when nothing is registered yet: capturing `null` would render no shell at all, and the\n *   cause — the registration running before the framework presets — is worth an error, not a blank app.\n * - **Idempotent**: a registration that finds a 3D container already there (a second call, or the\n *   registry surviving a hot reload on `globalThis`) wraps the 2D container IT captured, never itself.\n * - **Keeps the registration's metadata**: the captured container's `isConfigurable` is carried over, so\n *   nothing that reads the registry's metadata sees a difference.\n *\n * `options.layout` selects the layout (`INHERIT_LAYOUT_3D` by default); `options.frameStyles` layers an\n * application's frame styles over the layout's own (per theme id, or for all themes).\n *\n * - **One layout per application.** A registration that finds a 3D container of a DIFFERENT layout already\n *   registered refuses: an application is not 3D in two ways, and a silent replacement would hide which one it\n *   is. The same layout again is idempotent. (A layout changed in code during a hot reload needs a full page\n *   reload, because the registry outlives the hot reload.)\n */\nexport function register3DLayout(options: Layout3DOptions = {}): FrontendComponentRegistration {\n  let capturedIsConfigurable = false;\n  return {\n    componentRef: FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER,\n    preset: CorePresetNames.DEFAULT,\n    get isConfigurable(): boolean {\n      return capturedIsConfigurable;\n    },\n    loadComponent: async () => {\n      const current = ComponentRegistryService.resolve(FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER, CorePresetNames.DEFAULT);\n      if (!current) {\n        throw new Error(\n          'register3DLayout(): no Default APP_LAYOUTS_MAIN_CONTAINER is registered to capture. Call it from the engine module\\'s '\n          + '`componentRegistrations`, which run after the framework presets — not from a module evaluated before them.',\n        );\n      }\n      const layout = options.layout ?? INHERIT_LAYOUT_3D;\n      // An application's own layout may not borrow a built-in id: the one-layout check compares ids, and a borrowed\n      // one would make two different layouts look like the same.\n      if ((Object.values(Layout3DId) as string[]).includes(layout.id) && BUILT_IN_LAYOUTS_3D[layout.id as Layout3DId] !== layout) {\n        throw new Error(`register3DLayout(): the layout id '${layout.id}' belongs to a built-in layout; give the application's own layout an id of its own.`);\n      }\n      if (isLayout3DMainContainer(current) && current.layout.id !== layout.id) {\n        throw new Error(\n          `register3DLayout(): this application already registered the 3D layout '${current.layout.id}' and now asks for '${layout.id}'. `\n          + 'An application uses one layout: remove the other registration — or, if you just changed the layout in code, '\n          + 'reload the page (the component registry outlives a hot reload).',\n        );\n      }\n      capturedIsConfigurable = ComponentRegistryService.getMetadata(FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER, CorePresetNames.DEFAULT)?.isConfigurable ?? false;\n      return create3DMainContainer(isLayout3DMainContainer(current) ? current.captured : current, options);\n    },\n  };\n}\n/** @wildo_source:part:end presets.3d.register-layout */\n"]}

package/dist/esm/shell-region-measurement.d.ts

@@ -0,0 +1,75 @@
+import { ShellRegion } from '@wildo-ai/presets-components-models';
+/**
+ * One painted region of the signed-in shell, measured in CSS pixels relative to the viewport.
+ *
+ * The 3D frame only FOLLOWS the HTML shell: every size, collapse and breakpoint decision stays the 2D
+ * container's, and the frame reads the result off the DOM. So this is the frame's only input about the
+ * layout, and it carries nothing a renderer could mistake for a decision.
+ */
+export interface MeasuredShellRegion {
+    region: ShellRegion;
+    /** The region's `data-placement` (a `HorizontalPlacement` / `VerticalPlacement` value), when it sits at an edge. */
+    placement: string | null;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    /**
+     * The region already renders a glass material: its element carries `data-material-kind="glass"` (a region
+     * preset renders through `Surface asChild`, which puts the material attributes on the region element itself).
+     * The frame draws no slab under it — glass over a frosted slab would be two materials doing one job.
+     */
+    glass: boolean;
+    /** The element measured, so a caller can observe it for size changes. */
+    element: HTMLElement;
+}
+/**
+ * Every element marked as a shell region, whether or not it currently has a box — a region collapsed to
+ * nothing is still one to observe, so it is redrawn the moment it reappears. Same filtering as
+ * {@link measureShellRegions} otherwise.
+ */
+export declare function findShellRegionElements(root?: ParentNode): HTMLElement[];
+/**
+ * Every shell region currently painted, found by the public `data-component-area` marker (#1818) and
+ * never by a preset's markup — so a custom 2D region preset that keeps the marker is framed like the
+ * built-in one.
+ *
+ * Skipped, deliberately:
+ * - a value outside `ShellRegion`: `data-component-area` is the SHELL's contract, and anything else
+ *   carrying the attribute is not a region the frame should draw under;
+ * - the sidebar's mobile DRAWER (`data-mobile-drawer`): it is an overlay that slides over the content,
+ *   not a region that tiles the shell, so a slab under it would sit under the page;
+ * - an element with no box (a region rendered but collapsed to nothing, or hidden).
+ */
+export declare function measureShellRegions(root?: ParentNode): MeasuredShellRegion[];
+/** One navigation zone the content area shows, measured like a region. */
+export interface MeasuredNavigationZone {
+    /** The zone's `data-content-area` value: the navigation's zone name (`primary`, `secondary`, `companion`). */
+    zone: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    element: HTMLElement;
+}
+/**
+ * Every navigation zone container inside the shell's CONTENT region, found by the navigation's own public marker
+ * (`data-content-area`, one per zone container whatever the branch — single zone, resizable split or static split).
+ * Only inside the content region: the marker is the navigation's, and the frame draws zone rims only within the
+ * content slab. Whatever its box, so one that reappears is observed (as {@link findShellRegionElements}).
+ */
+export declare function findNavigationZoneElements(root?: ParentNode): HTMLElement[];
+/** The navigation zones currently shown: a hidden zone (`display: none`, collapsed responsively) has no box and is skipped. */
+export declare function measureNavigationZones(root?: ParentNode): MeasuredNavigationZone[];
+/**
+ * The centre of a measured region in an orthographic camera matched 1:1 to CSS pixels, whose origin is
+ * the viewport's centre and whose y axis points UP (three.js), while the DOM's points down.
+ */
+export declare function regionCentreInFrameUnits(region: Pick<MeasuredShellRegion, 'left' | 'top' | 'width' | 'height'>, viewport: {
+    width: number;
+    height: number;
+}): {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=shell-region-measurement.d.ts.map

package/dist/esm/shell-region-measurement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-region-measurement.d.ts","sourceRoot":"","sources":["../../../src/shell-region-measurement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAEhF;;;;;;GAMG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,WAAW,CAAC;IACpB,oHAAoH;IACpH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,EAAE,OAAO,CAAC;IACf,yEAAyE;IACzE,OAAO,EAAE,WAAW,CAAC;CACtB;AAID;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,GAAE,UAAqB,GAAG,WAAW,EAAE,CAKlF;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,GAAE,UAAqB,GAAG,mBAAmB,EAAE,CAiBtF;AAED,0EAA0E;AAC1E,MAAM,WAAW,sBAAsB;IACrC,8GAA8G;IAC9G,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,WAAW,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,0BAA0B,CAAC,IAAI,GAAE,UAAqB,GAAG,WAAW,EAAE,CAErF;AAED,+HAA+H;AAC/H,wBAAgB,sBAAsB,CAAC,IAAI,GAAE,UAAqB,GAAG,sBAAsB,EAAE,CAQ5F;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC,EACtE,QAAQ,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC1C;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAK1B"}

package/dist/esm/shell-region-measurement.js

@@ -0,0 +1,75 @@
+import { MaterialKind, ShellRegion } from '@wildo-ai/presets-components-models';
+const SHELL_REGION_VALUES = new Set(Object.values(ShellRegion));
+/**
+ * Every element marked as a shell region, whether or not it currently has a box — a region collapsed to
+ * nothing is still one to observe, so it is redrawn the moment it reappears. Same filtering as
+ * {@link measureShellRegions} otherwise.
+ */
+export function findShellRegionElements(root = document) {
+    return [...root.querySelectorAll('[data-component-area]')].filter((element) => {
+        const value = element.dataset.componentArea;
+        return value !== undefined && SHELL_REGION_VALUES.has(value) && !element.hasAttribute('data-mobile-drawer');
+    });
+}
+/**
+ * Every shell region currently painted, found by the public `data-component-area` marker (#1818) and
+ * never by a preset's markup — so a custom 2D region preset that keeps the marker is framed like the
+ * built-in one.
+ *
+ * Skipped, deliberately:
+ * - a value outside `ShellRegion`: `data-component-area` is the SHELL's contract, and anything else
+ *   carrying the attribute is not a region the frame should draw under;
+ * - the sidebar's mobile DRAWER (`data-mobile-drawer`): it is an overlay that slides over the content,
+ *   not a region that tiles the shell, so a slab under it would sit under the page;
+ * - an element with no box (a region rendered but collapsed to nothing, or hidden).
+ */
+export function measureShellRegions(root = document) {
+    const measured = [];
+    for (const element of findShellRegionElements(root)) {
+        const rect = element.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            continue;
+        measured.push({
+            region: element.dataset.componentArea,
+            placement: element.dataset.placement ?? null,
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height,
+            glass: element.dataset.materialKind === MaterialKind.GLASS,
+            element,
+        });
+    }
+    return measured;
+}
+/**
+ * Every navigation zone container inside the shell's CONTENT region, found by the navigation's own public marker
+ * (`data-content-area`, one per zone container whatever the branch — single zone, resizable split or static split).
+ * Only inside the content region: the marker is the navigation's, and the frame draws zone rims only within the
+ * content slab. Whatever its box, so one that reappears is observed (as {@link findShellRegionElements}).
+ */
+export function findNavigationZoneElements(root = document) {
+    return [...root.querySelectorAll(`[data-component-area="${ShellRegion.CONTENT}"] [data-content-area]`)];
+}
+/** The navigation zones currently shown: a hidden zone (`display: none`, collapsed responsively) has no box and is skipped. */
+export function measureNavigationZones(root = document) {
+    const measured = [];
+    for (const element of findNavigationZoneElements(root)) {
+        const rect = element.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            continue;
+        measured.push({ zone: element.dataset.contentArea ?? '', left: rect.left, top: rect.top, width: rect.width, height: rect.height, element });
+    }
+    return measured;
+}
+/**
+ * The centre of a measured region in an orthographic camera matched 1:1 to CSS pixels, whose origin is
+ * the viewport's centre and whose y axis points UP (three.js), while the DOM's points down.
+ */
+export function regionCentreInFrameUnits(region, viewport) {
+    return {
+        x: region.left + region.width / 2 - viewport.width / 2,
+        y: viewport.height / 2 - (region.top + region.height / 2),
+    };
+}
+//# sourceMappingURL=shell-region-measurement.js.map

package/dist/esm/shell-region-measurement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-region-measurement.js","sourceRoot":"","sources":["../../../src/shell-region-measurement.ts"],"names":[],"mappings":"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","sourcesContent":["import { MaterialKind, ShellRegion } from '@wildo-ai/presets-components-models';\n\n/**\n * One painted region of the signed-in shell, measured in CSS pixels relative to the viewport.\n *\n * The 3D frame only FOLLOWS the HTML shell: every size, collapse and breakpoint decision stays the 2D\n * container's, and the frame reads the result off the DOM. So this is the frame's only input about the\n * layout, and it carries nothing a renderer could mistake for a decision.\n */\nexport interface MeasuredShellRegion {\n  region: ShellRegion;\n  /** The region's `data-placement` (a `HorizontalPlacement` / `VerticalPlacement` value), when it sits at an edge. */\n  placement: string | null;\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n  /**\n   * The region already renders a glass material: its element carries `data-material-kind=\"glass\"` (a region\n   * preset renders through `Surface asChild`, which puts the material attributes on the region element itself).\n   * The frame draws no slab under it — glass over a frosted slab would be two materials doing one job.\n   */\n  glass: boolean;\n  /** The element measured, so a caller can observe it for size changes. */\n  element: HTMLElement;\n}\n\nconst SHELL_REGION_VALUES: ReadonlySet<string> = new Set(Object.values(ShellRegion));\n\n/**\n * Every element marked as a shell region, whether or not it currently has a box — a region collapsed to\n * nothing is still one to observe, so it is redrawn the moment it reappears. Same filtering as\n * {@link measureShellRegions} otherwise.\n */\nexport function findShellRegionElements(root: ParentNode = document): HTMLElement[] {\n  return [...root.querySelectorAll<HTMLElement>('[data-component-area]')].filter((element) => {\n    const value = element.dataset.componentArea;\n    return value !== undefined && SHELL_REGION_VALUES.has(value) && !element.hasAttribute('data-mobile-drawer');\n  });\n}\n\n/**\n * Every shell region currently painted, found by the public `data-component-area` marker (#1818) and\n * never by a preset's markup — so a custom 2D region preset that keeps the marker is framed like the\n * built-in one.\n *\n * Skipped, deliberately:\n * - a value outside `ShellRegion`: `data-component-area` is the SHELL's contract, and anything else\n *   carrying the attribute is not a region the frame should draw under;\n * - the sidebar's mobile DRAWER (`data-mobile-drawer`): it is an overlay that slides over the content,\n *   not a region that tiles the shell, so a slab under it would sit under the page;\n * - an element with no box (a region rendered but collapsed to nothing, or hidden).\n */\nexport function measureShellRegions(root: ParentNode = document): MeasuredShellRegion[] {\n  const measured: MeasuredShellRegion[] = [];\n  for (const element of findShellRegionElements(root)) {\n    const rect = element.getBoundingClientRect();\n    if (rect.width <= 0 || rect.height <= 0) continue;\n    measured.push({\n      region: element.dataset.componentArea as ShellRegion,\n      placement: element.dataset.placement ?? null,\n      left: rect.left,\n      top: rect.top,\n      width: rect.width,\n      height: rect.height,\n      glass: element.dataset.materialKind === MaterialKind.GLASS,\n      element,\n    });\n  }\n  return measured;\n}\n\n/** One navigation zone the content area shows, measured like a region. */\nexport interface MeasuredNavigationZone {\n  /** The zone's `data-content-area` value: the navigation's zone name (`primary`, `secondary`, `companion`). */\n  zone: string;\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n  element: HTMLElement;\n}\n\n/**\n * Every navigation zone container inside the shell's CONTENT region, found by the navigation's own public marker\n * (`data-content-area`, one per zone container whatever the branch — single zone, resizable split or static split).\n * Only inside the content region: the marker is the navigation's, and the frame draws zone rims only within the\n * content slab. Whatever its box, so one that reappears is observed (as {@link findShellRegionElements}).\n */\nexport function findNavigationZoneElements(root: ParentNode = document): HTMLElement[] {\n  return [...root.querySelectorAll<HTMLElement>(`[data-component-area=\"${ShellRegion.CONTENT}\"] [data-content-area]`)];\n}\n\n/** The navigation zones currently shown: a hidden zone (`display: none`, collapsed responsively) has no box and is skipped. */\nexport function measureNavigationZones(root: ParentNode = document): MeasuredNavigationZone[] {\n  const measured: MeasuredNavigationZone[] = [];\n  for (const element of findNavigationZoneElements(root)) {\n    const rect = element.getBoundingClientRect();\n    if (rect.width <= 0 || rect.height <= 0) continue;\n    measured.push({ zone: element.dataset.contentArea ?? '', left: rect.left, top: rect.top, width: rect.width, height: rect.height, element });\n  }\n  return measured;\n}\n\n/**\n * The centre of a measured region in an orthographic camera matched 1:1 to CSS pixels, whose origin is\n * the viewport's centre and whose y axis points UP (three.js), while the DOM's points down.\n */\nexport function regionCentreInFrameUnits(\n  region: Pick<MeasuredShellRegion, 'left' | 'top' | 'width' | 'height'>,\n  viewport: { width: number; height: number },\n): { x: number; y: number } {\n  return {\n    x: region.left + region.width / 2 - viewport.width / 2,\n    y: viewport.height / 2 - (region.top + region.height / 2),\n  };\n}\n"]}

package/dist/esm/spatial/spatial-camera.d.ts

@@ -0,0 +1,106 @@
+/**
+ * The spatial layout's camera and panel geometry (PROTOTYPE, 2026-09-30): plain math, no three.js, so the placement
+ * container can import it without pulling the WebGL chunk in (`check:lazy-boundaries`).
+ *
+ * ## One world, two renderers
+ *
+ * The world is in CSS pixels, with its origin at the middle of the viewport, x to the right, y DOWN, z toward the
+ * viewer — CSS's own axes, so the HTML stage needs no conversion. A CSS `perspective: d` root with the camera element
+ * at its centre shows an element at z = 0 at exactly its CSS size when the camera rests at (0, 0, d): that is the rest
+ * pose, and it is why the content panel is crisp at rest. The WebGL environment renders the same world through a
+ * three.js perspective camera built from the same pose (y flipped, see `spatial-environment.tsx`).
+ */
+/** Where the camera is and where it looks. Angles in degrees, in CSS rotation terms (`rotateY`, `rotateX`). */
+export interface SpatialCameraPose {
+    x: number;
+    y: number;
+    z: number;
+    yawDeg: number;
+    pitchDeg: number;
+}
+/** The CSS perspective distance: the viewer's distance from the z = 0 plane at rest. Short enough to feel spatial. */
+export declare const SPATIAL_CAMERA_DISTANCE_PX = 1100;
+export declare function restPose(distance?: number): SpatialCameraPose;
+/**
+ * The transform of the stage's camera element for a pose: the inverse of the camera (a camera moving right is the
+ * world moving left), then pushed to the perspective plane. `translateZ(d) · Rᵀ · T(−P)`, where the camera's rotation is
+ * `rotateY(yaw) · rotateX(pitch)`; at rest it is the identity.
+ */
+export declare function cssCameraTransform(pose: SpatialCameraPose, distance?: number): string;
+export declare function lerpPose(from: SpatialCameraPose, to: SpatialCameraPose, t: number): SpatialCameraPose;
+/** A camera move: poses at points of its duration (0 to 1), eased between. The last pose is where it comes to rest. */
+export interface SpatialCameraMove {
+    durationMs: number;
+    keyframes: ReadonlyArray<{
+        at: number;
+        pose: SpatialCameraPose;
+    }>;
+}
+/** A smooth in-out easing: the camera starts and stops without a jolt. */
+export declare function easeInOutCubic(t: number): number;
+/** The camera's pose `elapsedMs` into a move. Past its end, the move's final pose. */
+export declare function sampleMove(move: SpatialCameraMove, elapsedMs: number): SpatialCameraPose;
+/** The moves the prototype plays. Each leaves the camera at rest, so the content is always crisp when nothing moves. */
+export declare enum SpatialCameraCue {
+    /** The shell appears: the camera glides in from far back. */
+    ARRIVAL = "arrival",
+    /** The content changed: the camera steps back to take in the space, then returns. */
+    NAVIGATION = "navigation",
+    /** Focus moved to a pane beside another: the camera leans toward it, then returns. */
+    ZONE_FOCUS = "zone-focus",
+    /** The side column resized: the camera breathes out while the panels re-arrange. */
+    COLUMN_RESIZE = "column-resize"
+}
+/**
+ * The move for a cue. `towardX` is, for a zone focus, the focused pane's centre in world x (the camera leans toward
+ * it); ignored otherwise.
+ */
+export declare function cameraMoveFor(cue: SpatialCameraCue, distance?: number, towardX?: number): SpatialCameraMove;
+/** The panels the spatial placement arranges the shell regions into. */
+export declare enum SpatialPanelId {
+    /** Activity bar, start sidebar, start utility panel: one column standing angled on the start side. */
+    START_COLUMN = "start-column",
+    /** Toolbar and content: facing the camera. */
+    CENTRE = "centre",
+    /** End sidebar and end utility panel, angled on the end side. */
+    END_COLUMN = "end-column",
+    /** Top status bar and menubar, floating above the centre. */
+    TOP = "top",
+    /** Bottom status bar, below the centre. */
+    BOTTOM = "bottom"
+}
+/** A panel's size (its CSS box, measured untransformed) and where its centre stands in the world. */
+export interface SpatialPanelPlacement {
+    x: number;
+    y: number;
+    z: number;
+    width: number;
+    height: number;
+    yawDeg: number;
+}
+export interface SpatialLayoutInput {
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Natural widths of the side columns (0 when empty). */
+    startWidth: number;
+    endWidth: number;
+    /** Natural heights of the top and bottom strips (0 when empty). */
+    topHeight: number;
+    bottomHeight: number;
+}
+/** Margin around the arrangement and gap between panels, in CSS pixels. */
+export declare const SPATIAL_MARGIN_PX = 28;
+export declare const SPATIAL_GAP_PX = 18;
+/** How far the side columns turn toward the viewer, like screens beside a desk. */
+export declare const SPATIAL_SIDE_ANGLE_DEG = 26;
+/**
+ * Where each panel stands. The centre keeps the footprint it would have in 2D and faces the camera at z = 0, so at
+ * rest it is shown at exactly its CSS size. Each side column is hinged at its inner edge, a gap from the centre, and
+ * turned so its outer edge comes toward the viewer. The top strip floats slightly forward, above the centre.
+ */
+export declare function layoutSpatialPanels(input: SpatialLayoutInput): Record<SpatialPanelId, SpatialPanelPlacement>;
+/** The CSS transform standing a panel at its placement: centred on the stage origin, moved, then turned. */
+export declare function panelTransform(panel: SpatialPanelPlacement): string;
+//# sourceMappingURL=spatial-camera.d.ts.map

package/dist/esm/spatial/spatial-camera.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spatial-camera.d.ts","sourceRoot":"","sources":["../../../../src/spatial/spatial-camera.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,+GAA+G;AAC/G,MAAM,WAAW,iBAAiB;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,sHAAsH;AACtH,eAAO,MAAM,0BAA0B,OAAO,CAAC;AAE/C,wBAAgB,QAAQ,CAAC,QAAQ,GAAE,MAAmC,GAAG,iBAAiB,CAEzF;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,EAAE,QAAQ,GAAE,MAAmC,GAAG,MAAM,CAEjH;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,iBAAiB,EAAE,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAGrG;AAED,uHAAuH;AACvH,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,aAAa,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,iBAAiB,CAAA;KAAE,CAAC,CAAC;CACnE;AAED,0EAA0E;AAC1E,wBAAgB,cAAc,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED,sFAAsF;AACtF,wBAAgB,UAAU,CAAC,IAAI,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,GAAG,iBAAiB,CAaxF;AAED,wHAAwH;AACxH,oBAAY,gBAAgB;IAC1B,6DAA6D;IAC7D,OAAO,YAAY;IACnB,qFAAqF;IACrF,UAAU,eAAe;IACzB,sFAAsF;IACtF,UAAU,eAAe;IACzB,oFAAoF;IACpF,aAAa,kBAAkB;CAChC;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,gBAAgB,EAAE,QAAQ,GAAE,MAAmC,EAAE,OAAO,SAAI,GAAG,iBAAiB,CAwBlI;AAED,wEAAwE;AACxE,oBAAY,cAAc;IACxB,sGAAsG;IACtG,YAAY,iBAAiB;IAC7B,8CAA8C;IAC9C,MAAM,WAAW;IACjB,iEAAiE;IACjE,UAAU,eAAe;IACzB,6DAA6D;IAC7D,GAAG,QAAQ;IACX,2CAA2C;IAC3C,MAAM,WAAW;CAClB;AAED,qGAAqG;AACrG,MAAM,WAAW,qBAAqB;IACpC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,yDAAyD;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,2EAA2E;AAC3E,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,mFAAmF;AACnF,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAEzC;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,kBAAkB,GAAG,MAAM,CAAC,cAAc,EAAE,qBAAqB,CAAC,CA6B5G;AAED,4GAA4G;AAC5G,wBAAgB,cAAc,CAAC,KAAK,EAAE,qBAAqB,GAAG,MAAM,CAEnE"}