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

package/dist/esm/spatial/spatial-shell-container.js

@@ -0,0 +1,231 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { HorizontalPlacement, ShellRegion, SurfaceVariant, VerticalPlacement } from '@wildo-ai/presets-components-models';
+import { AppShellContentOutlet, AppShellLoadingState, AppShellOverlayPortalLayer, AppShellOverlaysOutlet, AppShellProviders, AppShellRegionOutlet, NON_CANONICAL_SHELL_SURFACE_POLICY_OVERRIDE, Surface, useAppShellFirstReady, useAppShellLayout, useNavigationState, useUI, } from '@wildo-ai/saas-frontend-lib';
+import { cameraMoveFor, cssCameraTransform, layoutSpatialPanels, panelTransform, restPose, sampleMove, SPATIAL_CAMERA_DISTANCE_PX, SpatialCameraCue, SpatialPanelId, } from './spatial-camera.js';
+import { SpatialEnvironmentDoor } from './spatial-environment.lazy.js';
+import { SpatialStageStore } from './spatial-stage-store.js';
+/**
+ * The spatial layout's placement (PROTOTYPE, Paul 2026-09-30: "something futurist, with a real camera aspect and
+ * transitions" — clean spatial, side panels angled, content frontal).
+ *
+ * The regions are the application's own, rendered by the standard outlets with every context; this container only
+ * groups them into five glass panels and stands those panels in a CSS 3D stage:
+ *
+ * - a perspective root the size of the viewport;
+ * - a CAMERA element at its centre, `preserve-3d`, whose transform is the inverse of the camera pose;
+ * - the panels, each centred on that element and moved/turned to its place (`layoutSpatialPanels`).
+ *
+ * At rest the camera faces the centre panel from exactly the perspective distance, so the content is drawn at its CSS
+ * size — crisp. The camera moves on the shell's transitions and always returns to rest.
+ *
+ * Overlays render in `AppShellOverlayPortalLayer`, OUTSIDE the stage: a dialog inside a transformed panel would be
+ * confined to it, and a menu would be placed in the wrong coordinates.
+ */
+export function SpatialShellContainer({ children }) {
+    const layoutInfo = useAppShellLayout();
+    const hasLayoutBeenReady = useAppShellFirstReady(layoutInfo.isLayoutReady);
+    if (!layoutInfo.isLayoutReady && !hasLayoutBeenReady)
+        return _jsx(AppShellLoadingState, {});
+    return (_jsx(AppShellProviders, { layout: layoutInfo, children: _jsx(SpatialStage, { children: children }) }));
+}
+const PANEL_TRANSITION = 'transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), width 700ms cubic-bezier(0.2, 0.8, 0.2, 1), height 700ms cubic-bezier(0.2, 0.8, 0.2, 1)';
+function SpatialStage({ children }) {
+    const { isDark, prefersReducedMotion } = useUI();
+    const viewport = useViewportSize();
+    const store = useMemo(() => new SpatialStageStore(), []);
+    const cameraRef = useRef(null);
+    const startRef = useRef(null);
+    const endRef = useRef(null);
+    const topRef = useRef(null);
+    const bottomRef = useRef(null);
+    const sizeRefs = useMemo(() => ({ start: startRef, end: endRef, top: topRef, bottom: bottomRef }), []);
+    const sizes = useNaturalSizes(sizeRefs);
+    const panels = useMemo(() => layoutSpatialPanels({ viewport, startWidth: sizes.start, endWidth: sizes.end, topHeight: sizes.top, bottomHeight: sizes.bottom }), [viewport, sizes.start, sizes.end, sizes.top, sizes.bottom]);
+    const shown = useMemo(() => {
+        const visible = { [SpatialPanelId.CENTRE]: panels[SpatialPanelId.CENTRE] };
+        if (sizes.start > 0)
+            visible[SpatialPanelId.START_COLUMN] = panels[SpatialPanelId.START_COLUMN];
+        if (sizes.end > 0)
+            visible[SpatialPanelId.END_COLUMN] = panels[SpatialPanelId.END_COLUMN];
+        if (sizes.top > 0)
+            visible[SpatialPanelId.TOP] = panels[SpatialPanelId.TOP];
+        if (sizes.bottom > 0)
+            visible[SpatialPanelId.BOTTOM] = panels[SpatialPanelId.BOTTOM];
+        return visible;
+    }, [panels, sizes.start, sizes.end, sizes.top, sizes.bottom]);
+    useLayoutEffect(() => {
+        store.set({ viewport, panels: shown, isDark });
+    }, [store, viewport, shown, isDark]);
+    const play = useCameraPlayer(cameraRef, store, prefersReducedMotion);
+    useSpatialCues(play, sizes.start, sizes.start + sizes.end + sizes.top + sizes.bottom > 0, viewport);
+    const panel = (id, ref, size, content) => {
+        const placement = panels[id];
+        const style = {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            transform: panelTransform(placement),
+            transition: prefersReducedMotion ? undefined : PANEL_TRANSITION,
+            backfaceVisibility: 'hidden',
+            visibility: shown[id] ? 'visible' : 'hidden',
+            ...(size !== 'natural-width' ? { width: placement.width } : {}),
+            ...(size !== 'natural-height' ? { height: placement.height } : {}),
+            ...GLASS_STYLE,
+        };
+        return (_jsx("div", { ref: ref ?? undefined, "data-spatial-panel": id, className: "flex overflow-hidden", style: style, children: content }));
+    };
+    return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.SHELL, policyOverride: NON_CANONICAL_SHELL_SURFACE_POLICY_OVERRIDE, children: _jsxs("div", { className: "relative h-screen w-screen overflow-hidden bg-background", "data-spatial-stage": "", children: [_jsx(SpatialEnvironmentDoor, { store: store }), _jsx("div", { className: "absolute inset-0", style: { perspective: `${SPATIAL_CAMERA_DISTANCE_PX}px`, perspectiveOrigin: '50% 50%' }, children: _jsxs("div", { ref: cameraRef, "data-spatial-camera": "", style: { position: 'absolute', left: '50%', top: '50%', width: 0, height: 0, transformStyle: 'preserve-3d', transform: cssCameraTransform(restPose()) }, children: [panel(SpatialPanelId.START_COLUMN, startRef, 'natural-width', (_jsxs(_Fragment, { children: [_jsx(AppShellRegionOutlet, { region: ShellRegion.ACTIVITY_BAR }), _jsx(AppShellRegionOutlet, { region: ShellRegion.SIDEBAR, placement: HorizontalPlacement.START }), _jsx(AppShellRegionOutlet, { region: ShellRegion.UTILITY_PANEL, placement: HorizontalPlacement.START })] }))), panel(SpatialPanelId.CENTRE, null, 'fixed', (_jsxs("div", { className: "flex-1 flex flex-col min-w-0 min-h-0", children: [_jsx(AppShellRegionOutlet, { region: ShellRegion.TOOLBAR }), _jsx(AppShellContentOutlet, { className: "flex-1 relative min-w-0 min-h-0", children: children })] }))), panel(SpatialPanelId.END_COLUMN, endRef, 'natural-width', (_jsxs(_Fragment, { children: [_jsx(AppShellRegionOutlet, { region: ShellRegion.SIDEBAR, placement: HorizontalPlacement.END }), _jsx(AppShellRegionOutlet, { region: ShellRegion.UTILITY_PANEL, placement: HorizontalPlacement.END })] }))), panel(SpatialPanelId.TOP, topRef, 'natural-height', (_jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsx(AppShellRegionOutlet, { region: ShellRegion.STATUS_BAR, placement: VerticalPlacement.TOP }), _jsx(AppShellRegionOutlet, { region: ShellRegion.MENUBAR })] }))), panel(SpatialPanelId.BOTTOM, bottomRef, 'natural-height', (_jsx("div", { className: "flex-1 flex flex-col min-w-0", children: _jsx(AppShellRegionOutlet, { region: ShellRegion.STATUS_BAR, placement: VerticalPlacement.BOTTOM }) })))] }) }), _jsx(AppShellOverlaysOutlet, {}), _jsx(AppShellOverlayPortalLayer, {})] }) }));
+}
+/**
+ * The glass every panel is made of: a translucent card colour over a blurred backdrop, a hairline light edge and a
+ * deep soft shadow. Colours come from the theme's tokens, so light and dark modes follow the theme.
+ */
+const GLASS_STYLE = {
+    borderRadius: 22,
+    background: 'color-mix(in oklab, var(--card, var(--background)) 74%, transparent)',
+    backdropFilter: 'blur(28px) saturate(1.3)',
+    border: '1px solid color-mix(in oklab, var(--border) 55%, white 45%)',
+    boxShadow: '0 40px 90px -30px rgb(15 23 42 / 0.35), 0 12px 30px -12px rgb(15 23 42 / 0.18), inset 0 1px 0 0 rgb(255 255 255 / 0.45)',
+};
+function useViewportSize() {
+    const read = () => ({ width: window.innerWidth, height: window.innerHeight });
+    const [size, setSize] = useState(read);
+    useEffect(() => {
+        const onResize = () => setSize(read());
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
+    }, []);
+    return size;
+}
+/**
+ * The natural (untransformed) sizes of the panels whose size comes from their content: the side columns' widths and
+ * the strips' heights. `offsetWidth`/`offsetHeight` ignore transforms, so a turned column reads its real width.
+ */
+function useNaturalSizes(refs) {
+    const [sizes, setSizes] = useState({ start: 0, end: 0, top: 0, bottom: 0 });
+    useLayoutEffect(() => {
+        const measure = () => {
+            const width = (ref) => (ref.current && ref.current.childElementCount > 0 ? ref.current.offsetWidth : 0);
+            const height = (ref) => (ref.current && hasRenderedRegion(ref.current) ? ref.current.offsetHeight : 0);
+            const next = { start: width(refs.start), end: width(refs.end), top: height(refs.top), bottom: height(refs.bottom) };
+            setSizes((previous) => (previous.start === next.start && previous.end === next.end && previous.top === next.top && previous.bottom === next.bottom ? previous : next));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        for (const ref of Object.values(refs))
+            if (ref.current)
+                observer.observe(ref.current);
+        const mutations = new MutationObserver(measure);
+        for (const ref of Object.values(refs))
+            if (ref.current)
+                mutations.observe(ref.current, { childList: true, subtree: true });
+        return () => {
+            observer.disconnect();
+            mutations.disconnect();
+        };
+    }, [refs]);
+    return sizes;
+}
+function hasRenderedRegion(element) {
+    return element.querySelector('[data-component-area]') !== null;
+}
+/**
+ * Plays camera moves on the camera element (the stage's OWN element, so writing its inline transform touches nothing
+ * React renders) and publishes every pose to the store for the environment. Under reduced motion every move is a cut
+ * to its final pose. Returns `play(move)`; a new move replaces the one in progress, starting from where it stands.
+ */
+function useCameraPlayer(cameraRef, store, reduced) {
+    const frame = useRef(0);
+    useEffect(() => () => cancelAnimationFrame(frame.current), []);
+    return useMemo(() => {
+        const apply = (pose) => {
+            if (cameraRef.current)
+                cameraRef.current.style.transform = cssCameraTransform(pose);
+            store.set({ pose });
+        };
+        return (move) => {
+            cancelAnimationFrame(frame.current);
+            if (reduced) {
+                apply(move.keyframes[move.keyframes.length - 1].pose);
+                return;
+            }
+            // Start from where the camera stands, so an interrupted move blends instead of jumping.
+            const from = store.get().pose;
+            const blended = { ...move, keyframes: [{ at: 0, pose: from }, ...move.keyframes.filter((keyframe) => keyframe.at > 0)] };
+            const start = performance.now();
+            const tick = () => {
+                const elapsed = performance.now() - start;
+                apply(sampleMove(blended, elapsed));
+                if (elapsed < blended.durationMs)
+                    frame.current = requestAnimationFrame(tick);
+            };
+            frame.current = requestAnimationFrame(tick);
+        };
+    }, [cameraRef, store, reduced]);
+}
+/**
+ * What moves the camera: the shell arriving, the content changing (a structural zone's top entry is another place,
+ * by URL path — the same signature the flat frame uses), focus moving between side-by-side panes, and the start
+ * column resizing (the sidebar collapsing or expanding).
+ */
+function useSpatialCues(play, startWidth, measured, viewport) {
+    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 signature = places.some((place) => place !== '') ? zones.map((zone, index) => `${zone}:${places[index]}`).join('|') : '';
+    const arrived = useRef(false);
+    useEffect(() => {
+        if (arrived.current || !measured)
+            return;
+        arrived.current = true;
+        play(cameraMoveFor(SpatialCameraCue.ARRIVAL));
+    }, [play, measured]);
+    const lastSignature = useRef(null);
+    useEffect(() => {
+        if (signature === '')
+            return;
+        const previous = lastSignature.current;
+        lastSignature.current = signature;
+        if (previous !== null && previous !== signature)
+            play(cameraMoveFor(SpatialCameraCue.NAVIGATION));
+    }, [play, signature]);
+    const lastFocus = useRef(null);
+    useEffect(() => {
+        const zone = navigation.focusedZone ?? null;
+        const previous = lastFocus.current;
+        lastFocus.current = zone;
+        if (previous === null || zone === null || previous === zone)
+            return;
+        const panes = [...document.querySelectorAll(`[data-component-area="${ShellRegion.CONTENT}"] [data-content-area]`)].filter((pane) => pane.offsetWidth > 0);
+        const focused = panes.find((pane) => pane.dataset.contentArea === zone);
+        if (panes.length < 2 || !focused)
+            return;
+        const rect = focused.getBoundingClientRect();
+        play(cameraMoveFor(SpatialCameraCue.ZONE_FOCUS, SPATIAL_CAMERA_DISTANCE_PX, rect.left + rect.width / 2 - viewport.width / 2));
+    }, [play, navigation.focusedZone, viewport.width]);
+    // A collapse animates the width over many frames: cue once per settled change, not once per frame.
+    const settledStart = useRef(0);
+    const lastResizeCue = useRef(0);
+    useEffect(() => {
+        if (startWidth === 0)
+            return;
+        const previous = settledStart.current;
+        if (previous === 0) {
+            settledStart.current = startWidth;
+            return;
+        }
+        if (Math.abs(previous - startWidth) <= 24)
+            return;
+        settledStart.current = startWidth;
+        const now = performance.now();
+        if (now - lastResizeCue.current < 900)
+            return;
+        lastResizeCue.current = now;
+        play(cameraMoveFor(SpatialCameraCue.COLUMN_RESIZE));
+    }, [play, startWidth]);
+}
+//# sourceMappingURL=spatial-shell-container.js.map

package/dist/esm/spatial/spatial-shell-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spatial-shell-container.js","sourceRoot":"","sources":["../../../../src/spatial/spatial-shell-container.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { HorizontalPlacement, ShellRegion, SurfaceVariant, VerticalPlacement } from '@wildo-ai/presets-components-models';\nimport {\n  AppShellContentOutlet,\n  AppShellLoadingState,\n  AppShellOverlayPortalLayer,\n  AppShellOverlaysOutlet,\n  AppShellProviders,\n  AppShellRegionOutlet,\n  NON_CANONICAL_SHELL_SURFACE_POLICY_OVERRIDE,\n  Surface,\n  useAppShellFirstReady,\n  useAppShellLayout,\n  useNavigationState,\n  useUI,\n  type AppLayoutPreset_MainContainer_DefaultProps,\n} from '@wildo-ai/saas-frontend-lib';\n\nimport {\n  cameraMoveFor,\n  cssCameraTransform,\n  layoutSpatialPanels,\n  panelTransform,\n  restPose,\n  sampleMove,\n  SPATIAL_CAMERA_DISTANCE_PX,\n  SpatialCameraCue,\n  SpatialPanelId,\n  type SpatialCameraMove,\n  type SpatialPanelPlacement,\n} from './spatial-camera';\nimport { SpatialEnvironmentDoor } from './spatial-environment.lazy';\nimport { SpatialStageStore } from './spatial-stage-store';\n\n/**\n * The spatial layout's placement (PROTOTYPE, Paul 2026-09-30: \"something futurist, with a real camera aspect and\n * transitions\" — clean spatial, side panels angled, content frontal).\n *\n * The regions are the application's own, rendered by the standard outlets with every context; this container only\n * groups them into five glass panels and stands those panels in a CSS 3D stage:\n *\n * - a perspective root the size of the viewport;\n * - a CAMERA element at its centre, `preserve-3d`, whose transform is the inverse of the camera pose;\n * - the panels, each centred on that element and moved/turned to its place (`layoutSpatialPanels`).\n *\n * At rest the camera faces the centre panel from exactly the perspective distance, so the content is drawn at its CSS\n * size — crisp. The camera moves on the shell's transitions and always returns to rest.\n *\n * Overlays render in `AppShellOverlayPortalLayer`, OUTSIDE the stage: a dialog inside a transformed panel would be\n * confined to it, and a menu would be placed in the wrong coordinates.\n */\nexport function SpatialShellContainer({ children }: AppLayoutPreset_MainContainer_DefaultProps): React.JSX.Element {\n  const layoutInfo = useAppShellLayout();\n  const hasLayoutBeenReady = useAppShellFirstReady(layoutInfo.isLayoutReady);\n  if (!layoutInfo.isLayoutReady && !hasLayoutBeenReady) return <AppShellLoadingState />;\n  return (\n    <AppShellProviders layout={layoutInfo}>\n      <SpatialStage>{children}</SpatialStage>\n    </AppShellProviders>\n  );\n}\n\nconst PANEL_TRANSITION = 'transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), width 700ms cubic-bezier(0.2, 0.8, 0.2, 1), height 700ms cubic-bezier(0.2, 0.8, 0.2, 1)';\n\nfunction SpatialStage({ children }: { children: React.ReactNode }): React.JSX.Element {\n  const { isDark, prefersReducedMotion } = useUI();\n  const viewport = useViewportSize();\n  const store = useMemo(() => new SpatialStageStore(), []);\n  const cameraRef = useRef<HTMLDivElement>(null);\n  const startRef = useRef<HTMLDivElement>(null);\n  const endRef = useRef<HTMLDivElement>(null);\n  const topRef = useRef<HTMLDivElement>(null);\n  const bottomRef = useRef<HTMLDivElement>(null);\n  const sizeRefs = useMemo(() => ({ start: startRef, end: endRef, top: topRef, bottom: bottomRef }), []);\n  const sizes = useNaturalSizes(sizeRefs);\n  const panels = useMemo(\n    () => layoutSpatialPanels({ viewport, startWidth: sizes.start, endWidth: sizes.end, topHeight: sizes.top, bottomHeight: sizes.bottom }),\n    [viewport, sizes.start, sizes.end, sizes.top, sizes.bottom],\n  );\n  const shown = useMemo(() => {\n    const visible: Partial<Record<SpatialPanelId, SpatialPanelPlacement>> = { [SpatialPanelId.CENTRE]: panels[SpatialPanelId.CENTRE] };\n    if (sizes.start > 0) visible[SpatialPanelId.START_COLUMN] = panels[SpatialPanelId.START_COLUMN];\n    if (sizes.end > 0) visible[SpatialPanelId.END_COLUMN] = panels[SpatialPanelId.END_COLUMN];\n    if (sizes.top > 0) visible[SpatialPanelId.TOP] = panels[SpatialPanelId.TOP];\n    if (sizes.bottom > 0) visible[SpatialPanelId.BOTTOM] = panels[SpatialPanelId.BOTTOM];\n    return visible;\n  }, [panels, sizes.start, sizes.end, sizes.top, sizes.bottom]);\n\n  useLayoutEffect(() => {\n    store.set({ viewport, panels: shown, isDark });\n  }, [store, viewport, shown, isDark]);\n\n  const play = useCameraPlayer(cameraRef, store, prefersReducedMotion);\n  useSpatialCues(play, sizes.start, sizes.start + sizes.end + sizes.top + sizes.bottom > 0, viewport);\n\n  const panel = (id: SpatialPanelId, ref: React.Ref<HTMLDivElement> | null, size: 'fixed' | 'natural-width' | 'natural-height', content: React.ReactNode): React.JSX.Element => {\n    const placement = panels[id];\n    const style: React.CSSProperties = {\n      position: 'absolute',\n      left: 0,\n      top: 0,\n      transform: panelTransform(placement),\n      transition: prefersReducedMotion ? undefined : PANEL_TRANSITION,\n      backfaceVisibility: 'hidden',\n      visibility: shown[id] ? 'visible' : 'hidden',\n      ...(size !== 'natural-width' ? { width: placement.width } : {}),\n      ...(size !== 'natural-height' ? { height: placement.height } : {}),\n      ...GLASS_STYLE,\n    };\n    return (\n      <div ref={ref ?? undefined} data-spatial-panel={id} className=\"flex overflow-hidden\" style={style}>\n        {content}\n      </div>\n    );\n  };\n\n  return (\n    <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.SHELL} policyOverride={NON_CANONICAL_SHELL_SURFACE_POLICY_OVERRIDE}>\n      <div className=\"relative h-screen w-screen overflow-hidden bg-background\" data-spatial-stage=\"\">\n        <SpatialEnvironmentDoor store={store} />\n        <div className=\"absolute inset-0\" style={{ perspective: `${SPATIAL_CAMERA_DISTANCE_PX}px`, perspectiveOrigin: '50% 50%' }}>\n          <div\n            ref={cameraRef}\n            data-spatial-camera=\"\"\n            style={{ position: 'absolute', left: '50%', top: '50%', width: 0, height: 0, transformStyle: 'preserve-3d', transform: cssCameraTransform(restPose()) }}\n          >\n            {panel(SpatialPanelId.START_COLUMN, startRef, 'natural-width', (\n              <>\n                <AppShellRegionOutlet region={ShellRegion.ACTIVITY_BAR} />\n                <AppShellRegionOutlet region={ShellRegion.SIDEBAR} placement={HorizontalPlacement.START} />\n                <AppShellRegionOutlet region={ShellRegion.UTILITY_PANEL} placement={HorizontalPlacement.START} />\n              </>\n            ))}\n            {panel(SpatialPanelId.CENTRE, null, 'fixed', (\n              <div className=\"flex-1 flex flex-col min-w-0 min-h-0\">\n                <AppShellRegionOutlet region={ShellRegion.TOOLBAR} />\n                <AppShellContentOutlet className=\"flex-1 relative min-w-0 min-h-0\">{children}</AppShellContentOutlet>\n              </div>\n            ))}\n            {panel(SpatialPanelId.END_COLUMN, endRef, 'natural-width', (\n              <>\n                <AppShellRegionOutlet region={ShellRegion.SIDEBAR} placement={HorizontalPlacement.END} />\n                <AppShellRegionOutlet region={ShellRegion.UTILITY_PANEL} placement={HorizontalPlacement.END} />\n              </>\n            ))}\n            {panel(SpatialPanelId.TOP, topRef, 'natural-height', (\n              <div className=\"flex-1 flex flex-col min-w-0\">\n                <AppShellRegionOutlet region={ShellRegion.STATUS_BAR} placement={VerticalPlacement.TOP} />\n                <AppShellRegionOutlet region={ShellRegion.MENUBAR} />\n              </div>\n            ))}\n            {panel(SpatialPanelId.BOTTOM, bottomRef, 'natural-height', (\n              <div className=\"flex-1 flex flex-col min-w-0\">\n                <AppShellRegionOutlet region={ShellRegion.STATUS_BAR} placement={VerticalPlacement.BOTTOM} />\n              </div>\n            ))}\n          </div>\n        </div>\n        <AppShellOverlaysOutlet />\n        <AppShellOverlayPortalLayer />\n      </div>\n    </Surface>\n  );\n}\n\n/**\n * The glass every panel is made of: a translucent card colour over a blurred backdrop, a hairline light edge and a\n * deep soft shadow. Colours come from the theme's tokens, so light and dark modes follow the theme.\n */\nconst GLASS_STYLE: React.CSSProperties = {\n  borderRadius: 22,\n  background: 'color-mix(in oklab, var(--card, var(--background)) 74%, transparent)',\n  backdropFilter: 'blur(28px) saturate(1.3)',\n  border: '1px solid color-mix(in oklab, var(--border) 55%, white 45%)',\n  boxShadow: '0 40px 90px -30px rgb(15 23 42 / 0.35), 0 12px 30px -12px rgb(15 23 42 / 0.18), inset 0 1px 0 0 rgb(255 255 255 / 0.45)',\n};\n\nfunction useViewportSize(): { width: number; height: number } {\n  const read = (): { width: number; height: number } => ({ width: window.innerWidth, height: window.innerHeight });\n  const [size, setSize] = useState(read);\n  useEffect(() => {\n    const onResize = (): void => setSize(read());\n    window.addEventListener('resize', onResize);\n    return () => window.removeEventListener('resize', onResize);\n  }, []);\n  return size;\n}\n\n/**\n * The natural (untransformed) sizes of the panels whose size comes from their content: the side columns' widths and\n * the strips' heights. `offsetWidth`/`offsetHeight` ignore transforms, so a turned column reads its real width.\n */\nfunction useNaturalSizes(refs: Record<'start' | 'end' | 'top' | 'bottom', React.RefObject<HTMLDivElement | null>>): Record<'start' | 'end' | 'top' | 'bottom', number> {\n  const [sizes, setSizes] = useState({ start: 0, end: 0, top: 0, bottom: 0 });\n  useLayoutEffect(() => {\n    const measure = (): void => {\n      const width = (ref: React.RefObject<HTMLDivElement | null>): number => (ref.current && ref.current.childElementCount > 0 ? ref.current.offsetWidth : 0);\n      const height = (ref: React.RefObject<HTMLDivElement | null>): number => (ref.current && hasRenderedRegion(ref.current) ? ref.current.offsetHeight : 0);\n      const next = { start: width(refs.start), end: width(refs.end), top: height(refs.top), bottom: height(refs.bottom) };\n      setSizes((previous) => (previous.start === next.start && previous.end === next.end && previous.top === next.top && previous.bottom === next.bottom ? previous : next));\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    for (const ref of Object.values(refs)) if (ref.current) observer.observe(ref.current);\n    const mutations = new MutationObserver(measure);\n    for (const ref of Object.values(refs)) if (ref.current) mutations.observe(ref.current, { childList: true, subtree: true });\n    return () => {\n      observer.disconnect();\n      mutations.disconnect();\n    };\n  }, [refs]);\n  return sizes;\n}\n\nfunction hasRenderedRegion(element: HTMLElement): boolean {\n  return element.querySelector('[data-component-area]') !== null;\n}\n\n/**\n * Plays camera moves on the camera element (the stage's OWN element, so writing its inline transform touches nothing\n * React renders) and publishes every pose to the store for the environment. Under reduced motion every move is a cut\n * to its final pose. Returns `play(move)`; a new move replaces the one in progress, starting from where it stands.\n */\nfunction useCameraPlayer(cameraRef: React.RefObject<HTMLDivElement | null>, store: SpatialStageStore, reduced: boolean): (move: SpatialCameraMove) => void {\n  const frame = useRef(0);\n  useEffect(() => () => cancelAnimationFrame(frame.current), []);\n  return useMemo(() => {\n    const apply = (pose: ReturnType<typeof restPose>): void => {\n      if (cameraRef.current) cameraRef.current.style.transform = cssCameraTransform(pose);\n      store.set({ pose });\n    };\n    return (move: SpatialCameraMove): void => {\n      cancelAnimationFrame(frame.current);\n      if (reduced) {\n        apply(move.keyframes[move.keyframes.length - 1]!.pose);\n        return;\n      }\n      // Start from where the camera stands, so an interrupted move blends instead of jumping.\n      const from = store.get().pose;\n      const blended: SpatialCameraMove = { ...move, keyframes: [{ at: 0, pose: from }, ...move.keyframes.filter((keyframe) => keyframe.at > 0)] };\n      const start = performance.now();\n      const tick = (): void => {\n        const elapsed = performance.now() - start;\n        apply(sampleMove(blended, elapsed));\n        if (elapsed < blended.durationMs) frame.current = requestAnimationFrame(tick);\n      };\n      frame.current = requestAnimationFrame(tick);\n    };\n  }, [cameraRef, store, reduced]);\n}\n\n/**\n * What moves the camera: the shell arriving, the content changing (a structural zone's top entry is another place,\n * by URL path — the same signature the flat frame uses), focus moving between side-by-side panes, and the start\n * column resizing (the sidebar collapsing or expanding).\n */\nfunction useSpatialCues(play: (move: SpatialCameraMove) => void, startWidth: number, measured: boolean, viewport: { width: number; height: number }): void {\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 signature = places.some((place) => place !== '') ? zones.map((zone, index) => `${zone}:${places[index]}`).join('|') : '';\n\n  const arrived = useRef(false);\n  useEffect(() => {\n    if (arrived.current || !measured) return;\n    arrived.current = true;\n    play(cameraMoveFor(SpatialCameraCue.ARRIVAL));\n  }, [play, measured]);\n\n  const lastSignature = useRef<string | null>(null);\n  useEffect(() => {\n    if (signature === '') return;\n    const previous = lastSignature.current;\n    lastSignature.current = signature;\n    if (previous !== null && previous !== signature) play(cameraMoveFor(SpatialCameraCue.NAVIGATION));\n  }, [play, signature]);\n\n  const lastFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const zone = navigation.focusedZone ?? null;\n    const previous = lastFocus.current;\n    lastFocus.current = zone;\n    if (previous === null || zone === null || previous === zone) return;\n    const panes = [...document.querySelectorAll<HTMLElement>(`[data-component-area=\"${ShellRegion.CONTENT}\"] [data-content-area]`)].filter((pane) => pane.offsetWidth > 0);\n    const focused = panes.find((pane) => pane.dataset.contentArea === zone);\n    if (panes.length < 2 || !focused) return;\n    const rect = focused.getBoundingClientRect();\n    play(cameraMoveFor(SpatialCameraCue.ZONE_FOCUS, SPATIAL_CAMERA_DISTANCE_PX, rect.left + rect.width / 2 - viewport.width / 2));\n  }, [play, navigation.focusedZone, viewport.width]);\n\n  // A collapse animates the width over many frames: cue once per settled change, not once per frame.\n  const settledStart = useRef(0);\n  const lastResizeCue = useRef(0);\n  useEffect(() => {\n    if (startWidth === 0) return;\n    const previous = settledStart.current;\n    if (previous === 0) {\n      settledStart.current = startWidth;\n      return;\n    }\n    if (Math.abs(previous - startWidth) <= 24) return;\n    settledStart.current = startWidth;\n    const now = performance.now();\n    if (now - lastResizeCue.current < 900) return;\n    lastResizeCue.current = now;\n    play(cameraMoveFor(SpatialCameraCue.COLUMN_RESIZE));\n  }, [play, startWidth]);\n}\n"]}

package/dist/esm/spatial/spatial-stage-store.d.ts

@@ -0,0 +1,27 @@
+import { type SpatialCameraPose, type SpatialPanelId, type SpatialPanelPlacement } from './spatial-camera';
+/** What the WebGL environment needs to draw the same world the HTML stage shows. */
+export interface SpatialStageSnapshot {
+    pose: SpatialCameraPose;
+    distance: number;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Only the panels that show something (a column with no region is absent). */
+    panels: Partial<Record<SpatialPanelId, SpatialPanelPlacement>>;
+    isDark: boolean;
+}
+/**
+ * The one piece of state the HTML stage and the WebGL environment share (PROTOTYPE). The stage WRITES it — the camera
+ * player on every frame of a move, the layout when a panel is re-arranged — and the environment, in its lazily loaded
+ * chunk, SUBSCRIBES and renders. A plain store rather than React state, so a camera frame re-renders no component.
+ */
+export declare class SpatialStageStore {
+    private snapshot;
+    private readonly listeners;
+    constructor(initial?: Partial<SpatialStageSnapshot>);
+    get(): SpatialStageSnapshot;
+    set(change: Partial<SpatialStageSnapshot>): void;
+    subscribe(listener: (snapshot: SpatialStageSnapshot) => void): () => void;
+}
+//# sourceMappingURL=spatial-stage-store.d.ts.map

package/dist/esm/spatial/spatial-stage-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spatial-stage-store.d.ts","sourceRoot":"","sources":["../../../../src/spatial/spatial-stage-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEjJ,oFAAoF;AACpF,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,iBAAiB,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,+EAA+E;IAC/E,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAC/D,MAAM,EAAE,OAAO,CAAC;CACjB;AAED;;;;GAIG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAuD;gBAErE,OAAO,GAAE,OAAO,CAAC,oBAAoB,CAAM;IAWvD,GAAG,IAAI,oBAAoB;IAI3B,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG,IAAI;IAKhD,SAAS,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,oBAAoB,KAAK,IAAI,GAAG,MAAM,IAAI;CAI1E"}

package/dist/esm/spatial/spatial-stage-store.js

@@ -0,0 +1,33 @@
+import { restPose, SPATIAL_CAMERA_DISTANCE_PX } from './spatial-camera.js';
+/**
+ * The one piece of state the HTML stage and the WebGL environment share (PROTOTYPE). The stage WRITES it — the camera
+ * player on every frame of a move, the layout when a panel is re-arranged — and the environment, in its lazily loaded
+ * chunk, SUBSCRIBES and renders. A plain store rather than React state, so a camera frame re-renders no component.
+ */
+export class SpatialStageStore {
+    snapshot;
+    listeners = new Set();
+    constructor(initial = {}) {
+        this.snapshot = {
+            pose: restPose(),
+            distance: SPATIAL_CAMERA_DISTANCE_PX,
+            viewport: { width: 1440, height: 900 },
+            panels: {},
+            isDark: false,
+            ...initial,
+        };
+    }
+    get() {
+        return this.snapshot;
+    }
+    set(change) {
+        this.snapshot = { ...this.snapshot, ...change };
+        for (const listener of this.listeners)
+            listener(this.snapshot);
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+}
+//# sourceMappingURL=spatial-stage-store.js.map

package/dist/esm/spatial/spatial-stage-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spatial-stage-store.js","sourceRoot":"","sources":["../../../../src/spatial/spatial-stage-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAA2E,MAAM,kBAAkB,CAAC;AAYjJ;;;;GAIG;AACH,MAAM,OAAO,iBAAiB;IACpB,QAAQ,CAAuB;IACtB,SAAS,GAAG,IAAI,GAAG,EAA4C,CAAC;IAEjF,YAAY,UAAyC,EAAE;QACrD,IAAI,CAAC,QAAQ,GAAG;YACd,IAAI,EAAE,QAAQ,EAAE;YAChB,QAAQ,EAAE,0BAA0B;YACpC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE;YACtC,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,KAAK;YACb,GAAG,OAAO;SACX,CAAC;IACJ,CAAC;IAED,GAAG;QACD,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,GAAG,CAAC,MAAqC;QACvC,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,MAAM,EAAE,CAAC;QAChD,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,SAAS;YAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjE,CAAC;IAED,SAAS,CAAC,QAAkD;QAC1D,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC7B,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC/C,CAAC;CACF","sourcesContent":["import { restPose, SPATIAL_CAMERA_DISTANCE_PX, type SpatialCameraPose, type SpatialPanelId, type SpatialPanelPlacement } from './spatial-camera';\n\n/** What the WebGL environment needs to draw the same world the HTML stage shows. */\nexport interface SpatialStageSnapshot {\n  pose: SpatialCameraPose;\n  distance: number;\n  viewport: { width: number; height: number };\n  /** Only the panels that show something (a column with no region is absent). */\n  panels: Partial<Record<SpatialPanelId, SpatialPanelPlacement>>;\n  isDark: boolean;\n}\n\n/**\n * The one piece of state the HTML stage and the WebGL environment share (PROTOTYPE). The stage WRITES it — the camera\n * player on every frame of a move, the layout when a panel is re-arranged — and the environment, in its lazily loaded\n * chunk, SUBSCRIBES and renders. A plain store rather than React state, so a camera frame re-renders no component.\n */\nexport class SpatialStageStore {\n  private snapshot: SpatialStageSnapshot;\n  private readonly listeners = new Set<(snapshot: SpatialStageSnapshot) => void>();\n\n  constructor(initial: Partial<SpatialStageSnapshot> = {}) {\n    this.snapshot = {\n      pose: restPose(),\n      distance: SPATIAL_CAMERA_DISTANCE_PX,\n      viewport: { width: 1440, height: 900 },\n      panels: {},\n      isDark: false,\n      ...initial,\n    };\n  }\n\n  get(): SpatialStageSnapshot {\n    return this.snapshot;\n  }\n\n  set(change: Partial<SpatialStageSnapshot>): void {\n    this.snapshot = { ...this.snapshot, ...change };\n    for (const listener of this.listeners) listener(this.snapshot);\n  }\n\n  subscribe(listener: (snapshot: SpatialStageSnapshot) => void): () => void {\n    this.listeners.add(listener);\n    return () => this.listeners.delete(listener);\n  }\n}\n"]}

package/dist/esm/tokens/design-token-resolution.d.ts

@@ -0,0 +1,110 @@
+import { DesignSystemToken } from '@wildo-ai/presets-components-models';
+/**
+ * What a design-token value resolved to, in the units a WebGL frame uses (#1819).
+ *
+ * Token values are authored as CSS strings — `oklch(...)`, `color-mix(...)`, `150ms`, `cubic-bezier(...)`,
+ * `0.5rem` — because the DOM consumes them as CSS. The 3D frame draws with numbers, so each value is
+ * resolved once, per theme and per light/dark mode, into one of these kinds.
+ */
+export declare enum ResolvedDesignTokenKind {
+    /** A colour, in linear-light sRGB (what three.js expects of a material colour) plus alpha. */
+    COLOR = "color",
+    /** A duration (`ms` / `s`), in seconds. */
+    DURATION = "duration",
+    /** An easing, as the four control points of a cubic Bézier. */
+    EASING = "easing",
+    /** A length (`px` / `rem`), in CSS pixels. */
+    SIZE = "size",
+    /** A plain number (an opacity). */
+    NUMBER = "number"
+}
+/**
+ * Why a value was NOT resolved. A value the frame cannot use is reported, never guessed: a wrong number in
+ * a WebGL scene is invisible until someone notices the frame looks off.
+ */
+export declare enum UnresolvedDesignTokenReason {
+    /**
+     * The value depends on the viewport or the containing layout (`clamp()`, `calc()`, viewport units such as `vw`
+     * and `dvh`, container units such as `cqi`, `%`), so it has no single number.
+     */
+    VIEWPORT_RELATIVE = "viewport-relative",
+    /**
+     * A reference (`var()`, `color-mix()`) that neither the token graph nor the browser probe resolved — an
+     * unknown custom property, a mixing space this resolver does not model, or a percentage CSS rejects.
+     */
+    REFERENCE_UNRESOLVED = "reference-unresolved",
+    /** Not one of the forms the frame reads: a shadow list, a list of palette names, a stepped easing. */
+    UNSUPPORTED_FORM = "unsupported-form"
+}
+/** Where a resolved colour came from. The provenance travels through references and mixes. */
+export declare enum DesignTokenColorSource {
+    /** The token's own value was a colour literal. */
+    VALUE = "value",
+    /** Resolved through other tokens (`var(--token)`, `color-mix()` of tokens) with no browser involved. */
+    TOKEN_GRAPH = "token-graph",
+    /**
+     * At least one input came from the browser probe, which answers against the document's custom properties at
+     * the moment of the call — see `useDesignTokenResolution` for why such a result is recomputed after a commit.
+     */
+    BROWSER_PROBE = "browser-probe"
+}
+/**
+ * A token value in the frame's units. The kind decides the unit: linear-light sRGB plus alpha for a colour,
+ * seconds for a duration, cubic-Bézier control points for an easing, CSS pixels for a size.
+ */
+export type ResolvedDesignTokenValue = {
+    kind: ResolvedDesignTokenKind.COLOR;
+    linearRgb: readonly [number, number, number];
+    alpha: number;
+    source: DesignTokenColorSource;
+} | {
+    kind: ResolvedDesignTokenKind.DURATION;
+    seconds: number;
+} | {
+    kind: ResolvedDesignTokenKind.EASING;
+    controlPoints: readonly [number, number, number, number];
+} | {
+    kind: ResolvedDesignTokenKind.SIZE;
+    px: number;
+} | {
+    kind: ResolvedDesignTokenKind.NUMBER;
+    value: number;
+};
+/**
+ * One token's outcome: its authored CSS `value`, and either what it `resolved` to or why it is `unresolved`.
+ * There is no third state, so a consumer must handle both, and an unresolved token is never read as a default.
+ */
+export type DesignTokenResolution = {
+    token: DesignSystemToken;
+    value: string;
+    resolved: ResolvedDesignTokenValue;
+} | {
+    token: DesignSystemToken;
+    value: string;
+    unresolved: UnresolvedDesignTokenReason;
+};
+export interface DesignTokenResolutionOptions {
+    /** The root font size a `rem` is measured against. The framework's own is 16 px. */
+    rootFontSizePx?: number;
+    /**
+     * The browser's computed form of a colour reference the token graph cannot express: a `var()` naming a custom
+     * property that is not a token (the browser also applies its fallback, when the property is undefined), or a
+     * `color-mix()` this resolver does not model. `readComputedCssColorViaDom` from `@wildo-ai/saas-frontend-lib`
+     * in a browser. Omitted in a test, where there is no browser to ask; such a reference is then unresolved.
+     */
+    readComputedColor?: (value: string) => string | null;
+}
+/**
+ * Resolve every token's value into the frame's units, or say why not.
+ *
+ * `values` is the whole token set for ONE theme and ONE mode — what `useUI().getTokenValue` returns — and
+ * must be the whole set, because a formula refers to other tokens: `border-strong` is
+ * `color-mix(in oklab, var(--foreground) 45%, var(--background))`.
+ *
+ * References to other tokens are resolved THROUGH THE TOKEN GRAPH rather than by asking the browser: the
+ * browser answers against whatever custom properties the document holds at the moment, which lags a light/dark
+ * switch, while the graph is the mode's own values by construction. The browser probe is the fallback for a
+ * reference the graph cannot express, and a result that used it says so (`BROWSER_PROBE`).
+ */
+export declare function resolveDesignTokens(values: Readonly<Partial<Record<DesignSystemToken, string>>>, options?: DesignTokenResolutionOptions): Map<DesignSystemToken, DesignTokenResolution>;
+//# sourceMappingURL=design-token-resolution.d.ts.map

package/dist/esm/tokens/design-token-resolution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-token-resolution.d.ts","sourceRoot":"","sources":["../../../../src/tokens/design-token-resolution.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE;;;;;;GAMG;AACH,oBAAY,uBAAuB;IACjC,8FAA8F;IAC9F,KAAK,UAAU;IACf,2CAA2C;IAC3C,QAAQ,aAAa;IACrB,+DAA+D;IAC/D,MAAM,WAAW;IACjB,8CAA8C;IAC9C,IAAI,SAAS;IACb,mCAAmC;IACnC,MAAM,WAAW;CAClB;AAED;;;GAGG;AACH,oBAAY,2BAA2B;IACrC;;;OAGG;IACH,iBAAiB,sBAAsB;IACvC;;;OAGG;IACH,oBAAoB,yBAAyB;IAC7C,sGAAsG;IACtG,gBAAgB,qBAAqB;CACtC;AAED,8FAA8F;AAC9F,oBAAY,sBAAsB;IAChC,kDAAkD;IAClD,KAAK,UAAU;IACf,wGAAwG;IACxG,WAAW,gBAAgB;IAC3B;;;OAGG;IACH,aAAa,kBAAkB;CAChC;AAED;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAChC;IAAE,IAAI,EAAE,uBAAuB,CAAC,KAAK,CAAC;IAAC,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,sBAAsB,CAAA;CAAE,GACpI;IAAE,IAAI,EAAE,uBAAuB,CAAC,QAAQ,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC3D;IAAE,IAAI,EAAE,uBAAuB,CAAC,MAAM,CAAC;IAAC,aAAa,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,GAClG;IAAE,IAAI,EAAE,uBAAuB,CAAC,IAAI,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,uBAAuB,CAAC,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAC7B;IAAE,KAAK,EAAE,iBAAiB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,wBAAwB,CAAA;CAAE,GAC/E;IAAE,KAAK,EAAE,iBAAiB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,2BAA2B,CAAA;CAAE,CAAC;AAEzF,MAAM,WAAW,4BAA4B;IAC3C,oFAAoF;IACpF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;CACtD;AAyDD;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC,EAC5D,OAAO,GAAE,4BAAiC,GACzC,GAAG,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,CAyG/C"}