@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/overlays/page-overlays/providers/PageOverlayControllerProvider/PageOverlayControllerProvider.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageOverlayControllerContext, usePageOverlayController, } from "../../../../../capabilities/overlays/page-overlays/contexts/PageOverlayControllerContext/PageOverlayControllerContext.js";
+import React from "react";
+import { createPortal } from "react-dom";
+/**
+ * App-level controller for page overlays. Overlays register here and portal
+ * their content into a single shared outlet, so the create/update form and the
+ * history overlay render from the same place. Opening any overlay closes the
+ * others (mutual exclusion), while each overlay keeps its own mount lifecycle so
+ * open/close transitions animate normally.
+ */
+export function PageOverlayControllerProvider({ children }) {
+    const [hostElement, setHostElementState] = React.useState(null);
+    const registry = React.useRef(new Map());
+    const setHostElement = React.useCallback((element) => {
+        setHostElementState(element);
+    }, []);
+    const register = React.useCallback((key, requestClose) => {
+        registry.current.set(key, requestClose);
+    }, []);
+    const unregister = React.useCallback((key) => {
+        registry.current.delete(key);
+    }, []);
+    const requestExclusive = React.useCallback((key) => {
+        registry.current.forEach((requestClose, registeredKey) => {
+            if (registeredKey !== key) {
+                requestClose();
+            }
+        });
+    }, []);
+    const value = React.useMemo(() => ({ hostElement, setHostElement, register, unregister, requestExclusive }), [hostElement, setHostElement, register, unregister, requestExclusive]);
+    return _jsx(PageOverlayControllerContext.Provider, { value: value, children: children });
+}
+/**
+ * Registers a single overlay with the controller and portals its content into
+ * the shared outlet. Pass a falsy {@link render} while the overlay is unmounted.
+ */
+export function PageOverlay({ overlayKey = "page-overlay", open, onRequestClose, render }) {
+    const { hostElement, register, unregister, requestExclusive } = usePageOverlayController();
+    const closeRef = React.useRef(onRequestClose);
+    closeRef.current = onRequestClose;
+    const wasOpenRef = React.useRef(false);
+    React.useEffect(() => {
+        register(overlayKey, () => closeRef.current());
+        return () => unregister(overlayKey);
+    }, [overlayKey, register, unregister]);
+    React.useEffect(() => {
+        if (open && !wasOpenRef.current) {
+            requestExclusive(overlayKey);
+        }
+        wasOpenRef.current = open;
+    }, [open, overlayKey, requestExclusive]);
+    if (!hostElement) {
+        return null;
+    }
+    return createPortal(typeof render === "function" ? render() : render, hostElement);
+}
+export function PageOverlayOutlet() {
+    const { setHostElement } = usePageOverlayController();
+    return _jsx("div", { ref: setHostElement, style: { display: "contents" } });
+}

package/dist/capabilities/overlays/public.d.ts

@@ -0,0 +1,19 @@
+export * from "./components/overlays/VireoBottomDrawer/index.js";
+export * from "./components/overlays/VireoDockedSidePanel/index.js";
+export * from "./components/overlays/VireoOverlayHeader/index.js";
+export * from "./components/overlays/VireoResponsiveOverlayFrame/index.js";
+export * from "./components/overlays/VireoSidePanelResizeHandle/index.js";
+export * from "./confirmation/components/overlays/VireoConfirmationDialog/index.js";
+export type { VireoConfirm, VireoConfirmationOptions, } from "./confirmation/contexts/VireoConfirmationContext/VireoConfirmationContext.js";
+export * from "./confirmation/hooks/useVireoConfirmation/useVireoConfirmation.js";
+export * from "./confirmation/providers/VireoConfirmationProvider/VireoConfirmationProvider.js";
+export { PageOverlayControllerContext, usePageOverlayController, type PageOverlayControllerValue, } from "./page-overlays/contexts/PageOverlayControllerContext/PageOverlayControllerContext.js";
+export { useGuardedOverlayModeSwitch, type GuardedOverlayModeSwitch, } from "./page-overlays/hooks/useGuardedOverlayModeSwitch/useGuardedOverlayModeSwitch.js";
+export { useDelayedOverlayMount, type DelayedOverlayRenderProps, type UseDelayedOverlayMountReturn, } from "./page-overlays/hooks/useDelayedOverlayMount/useDelayedOverlayMount.js";
+export { usePageOverlayModes, type OverlayPayloadMap, type OverlayRendererProps, type OverlayRenderers, type OverlayState, type UsePageOverlayModesReturn, } from "./page-overlays/hooks/usePageOverlayModes/usePageOverlayModes.js";
+export { PageOverlay, PageOverlayControllerProvider, PageOverlayOutlet, type PageOverlayProps, } from "./page-overlays/providers/PageOverlayControllerProvider/PageOverlayControllerProvider.js";
+export { useRafViewportWidth } from "./hooks/useRafViewportWidth/useRafViewportWidth.js";
+export { useSidePanelResize } from "./hooks/useSidePanelResize/useSidePanelResize.js";
+export { DEFAULT_DESKTOP_SIDE_PANEL_MIN_WIDTH, DEFAULT_DESKTOP_SIDE_PANEL_MIN_CONTENT_WIDTH, DEFAULT_DESKTOP_SIDE_PANEL_VIEWPORT_INSET, DESKTOP_SIDE_PANEL_WIDTH_BY_MAX_WIDTH, DOCKED_SIDE_PANEL_TRANSITION_EVENT, DOCKED_SIDE_PANEL_TRANSITION_MS, SIDE_PANEL_RESIZE_ACTIVE_OPACITY, SIDE_PANEL_RESIZE_HANDLE_WIDTH, SIDE_PANEL_RESIZE_HITBOX_WIDTH, SIDE_PANEL_RESIZE_HOVER_OPACITY, SIDE_PANEL_RESIZE_KEYBOARD_STEP, SIDE_PANEL_WIDTH_CSS_VAR, type DockedSidePanelTransitionEventDetail, } from "./constants/overlay.constants.js";
+export type { ResponsiveOverlayFrameDesktopSidePanelWidth, ResponsiveOverlayFrameDesktopSurface, } from "./types/overlay.types.js";
+export { clampSidePanelWidth, getDefaultDesktopSidePanelWidth, getNumericDesktopSidePanelWidth, resolveDockedSidePanelWidth, } from "./utils/overlay.utils.js";

package/dist/capabilities/overlays/public.js

@@ -0,0 +1,17 @@
+export * from "./components/overlays/VireoBottomDrawer/index.js";
+export * from "./components/overlays/VireoDockedSidePanel/index.js";
+export * from "./components/overlays/VireoOverlayHeader/index.js";
+export * from "./components/overlays/VireoResponsiveOverlayFrame/index.js";
+export * from "./components/overlays/VireoSidePanelResizeHandle/index.js";
+export * from "./confirmation/components/overlays/VireoConfirmationDialog/index.js";
+export * from "./confirmation/hooks/useVireoConfirmation/useVireoConfirmation.js";
+export * from "./confirmation/providers/VireoConfirmationProvider/VireoConfirmationProvider.js";
+export { PageOverlayControllerContext, usePageOverlayController, } from "./page-overlays/contexts/PageOverlayControllerContext/PageOverlayControllerContext.js";
+export { useGuardedOverlayModeSwitch, } from "./page-overlays/hooks/useGuardedOverlayModeSwitch/useGuardedOverlayModeSwitch.js";
+export { useDelayedOverlayMount, } from "./page-overlays/hooks/useDelayedOverlayMount/useDelayedOverlayMount.js";
+export { usePageOverlayModes, } from "./page-overlays/hooks/usePageOverlayModes/usePageOverlayModes.js";
+export { PageOverlay, PageOverlayControllerProvider, PageOverlayOutlet, } from "./page-overlays/providers/PageOverlayControllerProvider/PageOverlayControllerProvider.js";
+export { useRafViewportWidth } from "./hooks/useRafViewportWidth/useRafViewportWidth.js";
+export { useSidePanelResize } from "./hooks/useSidePanelResize/useSidePanelResize.js";
+export { DEFAULT_DESKTOP_SIDE_PANEL_MIN_WIDTH, DEFAULT_DESKTOP_SIDE_PANEL_MIN_CONTENT_WIDTH, DEFAULT_DESKTOP_SIDE_PANEL_VIEWPORT_INSET, DESKTOP_SIDE_PANEL_WIDTH_BY_MAX_WIDTH, DOCKED_SIDE_PANEL_TRANSITION_EVENT, DOCKED_SIDE_PANEL_TRANSITION_MS, SIDE_PANEL_RESIZE_ACTIVE_OPACITY, SIDE_PANEL_RESIZE_HANDLE_WIDTH, SIDE_PANEL_RESIZE_HITBOX_WIDTH, SIDE_PANEL_RESIZE_HOVER_OPACITY, SIDE_PANEL_RESIZE_KEYBOARD_STEP, SIDE_PANEL_WIDTH_CSS_VAR, } from "./constants/overlay.constants.js";
+export { clampSidePanelWidth, getDefaultDesktopSidePanelWidth, getNumericDesktopSidePanelWidth, resolveDockedSidePanelWidth, } from "./utils/overlay.utils.js";

package/dist/capabilities/overlays/types/overlay.types.d.ts

@@ -0,0 +1,4 @@
+import { type Breakpoint } from "@mui/material/styles";
+export type ResponsiveOverlayFrameDesktopSidePanelWidth = number | string | Partial<Record<Breakpoint, number | string>>;
+export type ResponsiveOverlayFrameDesktopSurface = "dialog" | "overlaySidePanel" | "dockedSidePanel";
+export type ResponsiveOverlayFrameMobileSurface = "bottomDrawer" | "fullScreenDialog";

package/dist/capabilities/overlays/types/overlay.types.js

@@ -0,0 +1 @@
+export {};

package/dist/capabilities/overlays/utils/overlay.utils.d.ts

@@ -0,0 +1,7 @@
+import { type ResponsiveOverlayFrameDesktopSidePanelWidth } from "../../../capabilities/overlays/types/overlay.types.js";
+import { type DialogProps } from "@mui/material";
+export declare function getDefaultDesktopSidePanelWidth(maxWidth: DialogProps["maxWidth"]): number;
+export declare function getNumericDesktopSidePanelWidth(width: ResponsiveOverlayFrameDesktopSidePanelWidth, maxWidth: DialogProps["maxWidth"]): number;
+export declare function clampSidePanelWidth(width: number, minWidth: number, maxWidth: number): number;
+/** Resolves docked side panel width. */
+export declare function resolveDockedSidePanelWidth(requestedWidth: ResponsiveOverlayFrameDesktopSidePanelWidth, maxWidth: number, minWidth: number): ResponsiveOverlayFrameDesktopSidePanelWidth;

package/dist/capabilities/overlays/utils/overlay.utils.js

@@ -0,0 +1,24 @@
+import { DESKTOP_SIDE_PANEL_WIDTH_BY_MAX_WIDTH } from "../../../capabilities/overlays/constants/overlay.constants.js";
+export function getDefaultDesktopSidePanelWidth(maxWidth) {
+    if (!maxWidth) {
+        return 760;
+    }
+    return DESKTOP_SIDE_PANEL_WIDTH_BY_MAX_WIDTH[maxWidth];
+}
+export function getNumericDesktopSidePanelWidth(width, maxWidth) {
+    if (typeof width === "number" && Number.isFinite(width)) {
+        return width;
+    }
+    return getDefaultDesktopSidePanelWidth(maxWidth);
+}
+export function clampSidePanelWidth(width, minWidth, maxWidth) {
+    const effectiveMaxWidth = Math.max(minWidth, maxWidth);
+    return Math.max(minWidth, Math.min(width, effectiveMaxWidth));
+}
+/** Resolves docked side panel width. */
+export function resolveDockedSidePanelWidth(requestedWidth, maxWidth, minWidth) {
+    if (typeof requestedWidth !== "number") {
+        return requestedWidth;
+    }
+    return clampSidePanelWidth(requestedWidth, minWidth, maxWidth);
+}

package/dist/capabilities/page-layout/components/layout/VireoPage/VireoPage.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoPageSlotName } from "./VireoPage.identity.js";
+/** Utility classes available to VireoPage. */
+export type VireoPageClasses = Record<VireoPageSlotName, string>;
+/** Valid keys for VireoPage utility classes and theme style overrides. */
+export type VireoPageClassKey = keyof VireoPageClasses;
+/** Returns the generated utility class name for a VireoPage slot or state. */
+export declare function getVireoPageUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoPage class key. */
+export declare const vireoPageClasses: VireoPageClasses;

package/dist/capabilities/page-layout/components/layout/VireoPage/VireoPage.classes.js

@@ -0,0 +1,8 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_PAGE_NAME, VIREO_PAGE_SLOTS } from "./VireoPage.identity.js";
+/** Returns the generated utility class name for a VireoPage slot or state. */
+export function getVireoPageUtilityClass(slot) {
+    return generateUtilityClass(VIREO_PAGE_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoPage class key. */
+export const vireoPageClasses = generateUtilityClasses(VIREO_PAGE_NAME, [...VIREO_PAGE_SLOTS]);

package/dist/capabilities/page-layout/components/layout/VireoPage/VireoPage.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { VireoPageProps } from "./VireoPage.types.js";
+/** Establishes a container-measured page-layout context and the standard bounded page frame. */
+export declare const VireoPage: React.ForwardRefExoticComponent<Omit<VireoPageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/page-layout/components/layout/VireoPage/VireoPage.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoPage integration point. */
+export declare const VIREO_PAGE_NAME = "VireoPage";
+/** Canonical public slots exposed by VireoPage, in rendered DOM order. */
+export declare const VIREO_PAGE_SLOTS: readonly ["root"];
+/** Public slot names exposed by VireoPage. */
+export type VireoPageSlotName = (typeof VIREO_PAGE_SLOTS)[number];

package/dist/capabilities/page-layout/components/layout/VireoPage/VireoPage.identity.js

@@ -0,0 +1,4 @@
+/** Stable component name shared by every VireoPage integration point. */
+export const VIREO_PAGE_NAME = "VireoPage";
+/** Canonical public slots exposed by VireoPage, in rendered DOM order. */
+export const VIREO_PAGE_SLOTS = ["root"];

package/dist/capabilities/page-layout/components/layout/VireoPage/VireoPage.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VireoPageLayoutContext } from "../../../../../capabilities/page-layout/contexts/VireoPageLayoutContext/VireoPageLayoutContext.js";
+import { useMeasuredVireoPageLayout } from "../../../../../capabilities/page-layout/hooks/useMeasuredVireoPageLayout/useMeasuredVireoPageLayout.js";
+import { createVireoPageLayout } from "../../../../../capabilities/page-layout/utils/pageLayout.utils.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoPageUtilityClass } from "./VireoPage.classes.js";
+import { VIREO_PAGE_NAME } from "./VireoPage.identity.js";
+import { VireoPageRoot } from "./VireoPage.styled.js";
+function useUtilityClasses(classes) {
+    return composeClasses({ root: ["root"] }, getVireoPageUtilityClass, classes);
+}
+/** Establishes a container-measured page-layout context and the standard bounded page frame. */
+export const VireoPage = React.forwardRef(function VireoPage(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_PAGE_NAME });
+    const { children, className, classes: classesProp, forceCompact, measureParent, measurementPaused, mode, reservedInlineSize, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const measured = useMeasuredVireoPageLayout({
+        mode,
+        forceCompact,
+        measureParent,
+        paused: measurementPaused,
+        reservedInlineSize,
+    });
+    const ownerState = { mode: measured.mode };
+    const classes = useUtilityClasses(classesProp);
+    const resolved = resolveSlotProps(slotProps.root, ownerState);
+    const { className: slotClassName, ref: slotRef, style: slotStyle, sx: slotSx, ...slotOther } = resolved;
+    const ref = useForkRef(forwardedRef, measured.ref, slotRef);
+    const layout = React.useMemo(() => createVireoPageLayout(measured.mode), [measured.mode]);
+    return (_jsx(VireoPageLayoutContext.Provider, { value: layout, children: _jsx(VireoPageRoot, { ...other, ...slotOther, as: slots.root ?? "div", ref: ref, ownerState: ownerState, "data-vireo-page-mode": measured.mode, className: joinClassNames(classes.root, className, slotClassName), style: { ...style, ...slotStyle }, sx: mergeSx(sx, slotSx), children: children }) }));
+});
+VireoPage.displayName = VIREO_PAGE_NAME;

package/dist/capabilities/page-layout/components/layout/VireoPage/VireoPage.styled.d.ts

@@ -0,0 +1,4 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BoxProps } from "@mui/material";
+import type { VireoPageOwnerState } from "./VireoPage.types.js";
+export declare const VireoPageRoot: StyledSlotComponent<BoxProps, VireoPageOwnerState>;

package/dist/capabilities/page-layout/components/layout/VireoPage/VireoPage.styled.js

@@ -0,0 +1,15 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_PAGE_NAME } from "./VireoPage.identity.js";
+export const VireoPageRoot = styled(Box, {
+    name: VIREO_PAGE_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({
+    display: "flex",
+    flex: "1 1 auto",
+    flexDirection: "column",
+    minHeight: 0,
+    minWidth: 0,
+    overflow: "hidden",
+});

package/dist/capabilities/page-layout/components/layout/VireoPage/VireoPage.types.d.ts

@@ -0,0 +1,35 @@
+import type { VireoPageLayoutMode } from "../../../../../capabilities/page-layout/types/pageLayout.types.js";
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { BoxProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import type { VireoPageClasses, VireoPageClassKey } from "./VireoPage.classes.js";
+import type { VIREO_PAGE_NAME, VireoPageSlotName } from "./VireoPage.identity.js";
+export type VireoPageOwnerState = {
+    mode: VireoPageLayoutMode;
+};
+export interface VireoPageRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoPageSlots = {
+    [TSlotName in VireoPageSlotName]: React.ElementType;
+};
+export type VireoPageSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoPageSlots, {
+    root: SlotProps<"div", VireoPageRootSlotPropsOverrides, VireoPageOwnerState>;
+}>;
+export type VireoPageOwnProps = VireoPageSlotsAndSlotProps & {
+    children: React.ReactNode;
+    mode?: VireoPageLayoutMode;
+    forceCompact?: boolean;
+    measureParent?: boolean;
+    measurementPaused?: boolean;
+    reservedInlineSize?: number;
+    classes?: Partial<VireoPageClasses>;
+};
+export type VireoPageInheritedProps = Omit<BoxProps<"div">, "children" | "component">;
+export type VireoPageProps = VireoPageOwnProps & VireoPageInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_PAGE_NAME]?: VireoThemeComponent<VireoPageProps, VireoPageClassKey, VireoPageOwnerState, Theme>;
+    }
+}

package/dist/capabilities/page-layout/components/layout/VireoPage/VireoPage.types.js

@@ -0,0 +1 @@
+export {};

package/dist/capabilities/page-layout/components/layout/VireoPage/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoPage.js";
+export * from "./VireoPage.classes.js";
+export * from "./VireoPage.types.js";

package/dist/capabilities/page-layout/components/layout/VireoPage/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoPage.js";
+export * from "./VireoPage.classes.js";
+export * from "./VireoPage.types.js";

package/dist/capabilities/page-layout/components/layout/VireoPageBody/VireoPageBody.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoPageBodySlotName } from "./VireoPageBody.identity.js";
+/** Utility classes available to VireoPageBody. */
+export type VireoPageBodyClasses = Record<VireoPageBodySlotName, string>;
+/** Valid keys for VireoPageBody utility classes and theme style overrides. */
+export type VireoPageBodyClassKey = keyof VireoPageBodyClasses;
+/** Returns the generated utility class name for a VireoPageBody slot or state. */
+export declare function getVireoPageBodyUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoPageBody class key. */
+export declare const vireoPageBodyClasses: VireoPageBodyClasses;

package/dist/capabilities/page-layout/components/layout/VireoPageBody/VireoPageBody.classes.js

@@ -0,0 +1,10 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_PAGE_BODY_NAME, VIREO_PAGE_BODY_SLOTS } from "./VireoPageBody.identity.js";
+/** Returns the generated utility class name for a VireoPageBody slot or state. */
+export function getVireoPageBodyUtilityClass(slot) {
+    return generateUtilityClass(VIREO_PAGE_BODY_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoPageBody class key. */
+export const vireoPageBodyClasses = generateUtilityClasses(VIREO_PAGE_BODY_NAME, [
+    ...VIREO_PAGE_BODY_SLOTS,
+]);

package/dist/capabilities/page-layout/components/layout/VireoPageBody/VireoPageBody.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { VireoPageBodyProps } from "./VireoPageBody.types.js";
+/** Supplies the standard scrolling page content region and optional sibling drawer. */
+export declare const VireoPageBody: React.ForwardRefExoticComponent<Omit<VireoPageBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/page-layout/components/layout/VireoPageBody/VireoPageBody.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoPageBody integration point. */
+export declare const VIREO_PAGE_BODY_NAME = "VireoPageBody";
+/** Canonical public slots exposed by VireoPageBody, in rendered DOM order. */
+export declare const VIREO_PAGE_BODY_SLOTS: readonly ["root", "content", "container", "drawer"];
+/** Public slot names exposed by VireoPageBody. */
+export type VireoPageBodySlotName = (typeof VIREO_PAGE_BODY_SLOTS)[number];

package/dist/capabilities/page-layout/components/layout/VireoPageBody/VireoPageBody.identity.js

@@ -0,0 +1,4 @@
+/** Stable component name shared by every VireoPageBody integration point. */
+export const VIREO_PAGE_BODY_NAME = "VireoPageBody";
+/** Canonical public slots exposed by VireoPageBody, in rendered DOM order. */
+export const VIREO_PAGE_BODY_SLOTS = ["root", "content", "container", "drawer"];

package/dist/capabilities/page-layout/components/layout/VireoPageBody/VireoPageBody.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useVireoPageLayout } from "../../../../../capabilities/page-layout/hooks/useVireoPageLayout/useVireoPageLayout.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoPageBodyUtilityClass } from "./VireoPageBody.classes.js";
+import { VIREO_PAGE_BODY_NAME } from "./VireoPageBody.identity.js";
+import { VireoPageBodyContainer, VireoPageBodyContent, VireoPageBodyDrawer, VireoPageBodyRoot, } from "./VireoPageBody.styled.js";
+function useUtilityClasses(classes) {
+    return composeClasses({
+        root: ["root"],
+        content: ["content"],
+        container: ["container"],
+        drawer: ["drawer"],
+    }, getVireoPageBodyUtilityClass, classes);
+}
+/** Supplies the standard scrolling page content region and optional sibling drawer. */
+export const VireoPageBody = React.forwardRef(function VireoPageBody(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_PAGE_BODY_NAME });
+    const { children, className, classes: classesProp, compactPadding = 2, drawer, maxWidth = false, paddingOnCompact = false, regularPadding = 3, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const layout = useVireoPageLayout();
+    const ownerState = { mode: layout.mode, paddingOnCompact };
+    const classes = useUtilityClasses(classesProp);
+    const root = resolveSlotProps(slotProps.root, ownerState);
+    const content = resolveSlotProps(slotProps.content, ownerState);
+    const container = resolveSlotProps(slotProps.container, ownerState);
+    const drawerSlot = resolveSlotProps(slotProps.drawer, ownerState);
+    const ref = useForkRef(forwardedRef, root.ref);
+    const Content = slots.content ?? VireoPageBodyContent;
+    const Container = slots.container ?? VireoPageBodyContainer;
+    const Drawer = slots.drawer ?? VireoPageBodyDrawer;
+    const padding = layout.isCompact ? (paddingOnCompact ? compactPadding : 0) : regularPadding;
+    return (_jsxs(VireoPageBodyRoot, { ...other, ...root, as: slots.root ?? "div", ref: ref, ownerState: ownerState, className: joinClassNames(classes.root, className, root.className), style: { ...style, ...root.style }, sx: mergeSx(sx, root.sx), children: [_jsx(Content, { ...content, ownerState: ownerState, className: joinClassNames(classes.content, content.className), children: _jsx(Container, { disableGutters: true, ...container, ownerState: ownerState, maxWidth: maxWidth, className: joinClassNames(classes.container, container.className), sx: mergeSx({ p: padding }, container.sx), children: children }) }), drawer != null && (_jsx(Drawer, { ...drawerSlot, as: slots.drawer ?? "aside", ownerState: ownerState, className: joinClassNames(classes.drawer, drawerSlot.className), children: drawer }))] }));
+});
+VireoPageBody.displayName = VIREO_PAGE_BODY_NAME;

package/dist/capabilities/page-layout/components/layout/VireoPageBody/VireoPageBody.styled.d.ts

@@ -0,0 +1,9 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BoxProps, type ContainerProps } from "@mui/material";
+import type { VireoPageBodyOwnerState } from "./VireoPageBody.types.js";
+type Slot<T extends object> = StyledSlotComponent<T, VireoPageBodyOwnerState>;
+export declare const VireoPageBodyRoot: Slot<BoxProps>;
+export declare const VireoPageBodyContent: Slot<BoxProps>;
+export declare const VireoPageBodyContainer: Slot<ContainerProps>;
+export declare const VireoPageBodyDrawer: Slot<BoxProps>;
+export {};

package/dist/capabilities/page-layout/components/layout/VireoPageBody/VireoPageBody.styled.js

@@ -0,0 +1,30 @@
+import { Box, Container } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_PAGE_BODY_NAME } from "./VireoPageBody.identity.js";
+export const VireoPageBodyRoot = styled(Box, {
+    name: VIREO_PAGE_BODY_NAME,
+    slot: "Root",
+    overridesResolver: (_p, s) => s.root,
+})({ display: "flex", flex: "1 1 auto", minHeight: 0, minWidth: 0, overflow: "hidden" });
+export const VireoPageBodyContent = styled(Box, {
+    name: VIREO_PAGE_BODY_NAME,
+    slot: "Content",
+    overridesResolver: (_p, s) => s.content,
+})({
+    display: "flex",
+    flex: "1 1 auto",
+    flexDirection: "column",
+    minWidth: 0,
+    overflow: "auto",
+    position: "relative",
+});
+export const VireoPageBodyContainer = styled(Container, {
+    name: VIREO_PAGE_BODY_NAME,
+    slot: "Container",
+    overridesResolver: (_p, s) => s.container,
+})({ flex: "1 1 auto", width: "100%" });
+export const VireoPageBodyDrawer = styled(Box, {
+    name: VIREO_PAGE_BODY_NAME,
+    slot: "Drawer",
+    overridesResolver: (_p, s) => s.drawer,
+})({ flex: "0 0 auto", minHeight: 0 });

package/dist/capabilities/page-layout/components/layout/VireoPageBody/VireoPageBody.types.d.ts

@@ -0,0 +1,48 @@
+import type { VireoPageLayoutMode } from "../../../../../capabilities/page-layout/types/pageLayout.types.js";
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { BoxProps, Container, ContainerProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import type { VireoPageBodyClasses, VireoPageBodyClassKey } from "./VireoPageBody.classes.js";
+import type { VIREO_PAGE_BODY_NAME, VireoPageBodySlotName } from "./VireoPageBody.identity.js";
+export type VireoPageBodyOwnerState = {
+    mode: VireoPageLayoutMode;
+    paddingOnCompact: boolean;
+};
+export interface VireoPageBodyRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoPageBodyContentSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoPageBodyContainerSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoPageBodyDrawerSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoPageBodySlots = {
+    [TSlotName in VireoPageBodySlotName]: React.ElementType;
+};
+export type VireoPageBodySlotsAndSlotProps = CreateSlotsAndSlotProps<VireoPageBodySlots, {
+    root: SlotProps<"div", VireoPageBodyRootSlotPropsOverrides, VireoPageBodyOwnerState>;
+    content: SlotProps<"div", VireoPageBodyContentSlotPropsOverrides, VireoPageBodyOwnerState>;
+    container: SlotProps<typeof Container, VireoPageBodyContainerSlotPropsOverrides, VireoPageBodyOwnerState>;
+    drawer: SlotProps<"aside", VireoPageBodyDrawerSlotPropsOverrides, VireoPageBodyOwnerState>;
+}>;
+export type VireoPageBodyOwnProps = VireoPageBodySlotsAndSlotProps & {
+    children: React.ReactNode;
+    drawer?: React.ReactNode;
+    maxWidth?: ContainerProps["maxWidth"];
+    paddingOnCompact?: boolean;
+    regularPadding?: number;
+    compactPadding?: number;
+    classes?: Partial<VireoPageBodyClasses>;
+};
+export type VireoPageBodyInheritedProps = Omit<BoxProps<"div">, "children" | "component">;
+export type VireoPageBodyProps = VireoPageBodyOwnProps & VireoPageBodyInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_PAGE_BODY_NAME]?: VireoThemeComponent<VireoPageBodyProps, VireoPageBodyClassKey, VireoPageBodyOwnerState, Theme>;
+    }
+}

package/dist/capabilities/page-layout/components/layout/VireoPageBody/VireoPageBody.types.js

@@ -0,0 +1 @@
+export {};

package/dist/capabilities/page-layout/components/layout/VireoPageBody/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoPageBody.js";
+export * from "./VireoPageBody.classes.js";
+export * from "./VireoPageBody.types.js";

package/dist/capabilities/page-layout/components/layout/VireoPageBody/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoPageBody.js";
+export * from "./VireoPageBody.classes.js";
+export * from "./VireoPageBody.types.js";

package/dist/capabilities/page-layout/components/layout/VireoPageHeader/VireoPageHeader.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoPageHeaderSlotName } from "./VireoPageHeader.identity.js";
+/** Utility classes available to VireoPageHeader. */
+export type VireoPageHeaderClasses = Record<VireoPageHeaderSlotName, string>;
+/** Valid keys for VireoPageHeader utility classes and theme style overrides. */
+export type VireoPageHeaderClassKey = keyof VireoPageHeaderClasses;
+/** Returns the generated utility class name for a VireoPageHeader slot or state. */
+export declare function getVireoPageHeaderUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoPageHeader class key. */
+export declare const vireoPageHeaderClasses: VireoPageHeaderClasses;

package/dist/capabilities/page-layout/components/layout/VireoPageHeader/VireoPageHeader.classes.js

@@ -0,0 +1,10 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_PAGE_HEADER_NAME, VIREO_PAGE_HEADER_SLOTS, } from "./VireoPageHeader.identity.js";
+/** Returns the generated utility class name for a VireoPageHeader slot or state. */
+export function getVireoPageHeaderUtilityClass(slot) {
+    return generateUtilityClass(VIREO_PAGE_HEADER_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoPageHeader class key. */
+export const vireoPageHeaderClasses = generateUtilityClasses(VIREO_PAGE_HEADER_NAME, [
+    ...VIREO_PAGE_HEADER_SLOTS,
+]);

package/dist/capabilities/page-layout/components/layout/VireoPageHeader/VireoPageHeader.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { VireoPageHeaderProps } from "./VireoPageHeader.types.js";
+/** Renders the standard page title row with optional leading navigation and trailing actions. */
+export declare const VireoPageHeader: React.ForwardRefExoticComponent<Omit<VireoPageHeaderProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/capabilities/page-layout/components/layout/VireoPageHeader/VireoPageHeader.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoPageHeader integration point. */
+export declare const VIREO_PAGE_HEADER_NAME = "VireoPageHeader";
+/** Canonical public slots exposed by VireoPageHeader, in rendered DOM order. */
+export declare const VIREO_PAGE_HEADER_SLOTS: readonly ["root", "leading", "title", "actions"];
+/** Public slot names exposed by VireoPageHeader. */
+export type VireoPageHeaderSlotName = (typeof VIREO_PAGE_HEADER_SLOTS)[number];

package/dist/capabilities/page-layout/components/layout/VireoPageHeader/VireoPageHeader.identity.js

@@ -0,0 +1,4 @@
+/** Stable component name shared by every VireoPageHeader integration point. */
+export const VIREO_PAGE_HEADER_NAME = "VireoPageHeader";
+/** Canonical public slots exposed by VireoPageHeader, in rendered DOM order. */
+export const VIREO_PAGE_HEADER_SLOTS = ["root", "leading", "title", "actions"];

package/dist/capabilities/page-layout/components/layout/VireoPageHeader/VireoPageHeader.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useVireoPageLayout } from "../../../../../capabilities/page-layout/hooks/useVireoPageLayout/useVireoPageLayout.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoPageHeaderUtilityClass } from "./VireoPageHeader.classes.js";
+import { VIREO_PAGE_HEADER_NAME } from "./VireoPageHeader.identity.js";
+import { VireoPageHeaderActions, VireoPageHeaderLeading, VireoPageHeaderRoot, VireoPageHeaderTitle, } from "./VireoPageHeader.styled.js";
+function useUtilityClasses(classes) {
+    return composeClasses({
+        root: ["root"],
+        leading: ["leading"],
+        title: ["title"],
+        actions: ["actions"],
+    }, getVireoPageHeaderUtilityClass, classes);
+}
+/** Renders the standard page title row with optional leading navigation and trailing actions. */
+export const VireoPageHeader = React.forwardRef(function VireoPageHeader(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_PAGE_HEADER_NAME });
+    const { actions, className, classes: classesProp, leading, slotProps = {}, slots = {}, style, sx, title, ...other } = props;
+    const layout = useVireoPageLayout();
+    const ownerState = {
+        mode: layout.mode,
+        hasLeading: leading != null,
+        hasActions: actions != null,
+    };
+    const classes = useUtilityClasses(classesProp);
+    const root = resolveSlotProps(slotProps.root, ownerState);
+    const leadingProps = resolveSlotProps(slotProps.leading, ownerState);
+    const titleProps = resolveSlotProps(slotProps.title, ownerState);
+    const actionsProps = resolveSlotProps(slotProps.actions, ownerState);
+    const ref = useForkRef(forwardedRef, root.ref);
+    const Leading = slots.leading ?? VireoPageHeaderLeading;
+    const Title = slots.title ?? VireoPageHeaderTitle;
+    const Actions = slots.actions ?? VireoPageHeaderActions;
+    return (_jsxs(VireoPageHeaderRoot, { ...other, ...root, as: slots.root ?? "header", ref: ref, ownerState: ownerState, className: joinClassNames(classes.root, className, root.className), style: { ...style, ...root.style }, sx: mergeSx(sx, root.sx), children: [leading != null && (_jsx(Leading, { ...leadingProps, ownerState: ownerState, className: joinClassNames(classes.leading, leadingProps.className), children: leading })), title != null && (_jsx(Title, { ...titleProps, ownerState: ownerState, variant: "h6", fontWeight: 600, noWrap: true, className: joinClassNames(classes.title, titleProps.className), children: title })), actions != null && (_jsx(Actions, { ...actionsProps, ownerState: ownerState, className: joinClassNames(classes.actions, actionsProps.className), children: actions }))] }));
+});
+VireoPageHeader.displayName = VIREO_PAGE_HEADER_NAME;

package/dist/capabilities/page-layout/components/layout/VireoPageHeader/VireoPageHeader.styled.d.ts

@@ -0,0 +1,9 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BoxProps, type TypographyProps } from "@mui/material";
+import type { VireoPageHeaderOwnerState } from "./VireoPageHeader.types.js";
+type Slot<T extends object> = StyledSlotComponent<T, VireoPageHeaderOwnerState>;
+export declare const VireoPageHeaderRoot: Slot<BoxProps>;
+export declare const VireoPageHeaderLeading: Slot<BoxProps>;
+export declare const VireoPageHeaderTitle: Slot<TypographyProps>;
+export declare const VireoPageHeaderActions: Slot<BoxProps>;
+export {};

package/dist/capabilities/page-layout/components/layout/VireoPageHeader/VireoPageHeader.styled.js

@@ -0,0 +1,31 @@
+import { Box, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_PAGE_HEADER_NAME } from "./VireoPageHeader.identity.js";
+export const VireoPageHeaderRoot = styled(Box, {
+    name: VIREO_PAGE_HEADER_NAME,
+    slot: "Root",
+    overridesResolver: (_p, s) => s.root,
+})(({ theme }) => ({
+    alignItems: "center",
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    display: "flex",
+    flex: "0 0 auto",
+    gap: theme.spacing(2),
+    minHeight: 64,
+    padding: theme.spacing(1.5, 3),
+}));
+export const VireoPageHeaderLeading = styled(Box, {
+    name: VIREO_PAGE_HEADER_NAME,
+    slot: "Leading",
+    overridesResolver: (_p, s) => s.leading,
+})({ alignItems: "center", display: "flex", flex: "0 0 auto" });
+export const VireoPageHeaderTitle = styled(Typography, {
+    name: VIREO_PAGE_HEADER_NAME,
+    slot: "Title",
+    overridesResolver: (_p, s) => s.title,
+})({ flex: "1 1 auto", minWidth: 0 });
+export const VireoPageHeaderActions = styled(Box, {
+    name: VIREO_PAGE_HEADER_NAME,
+    slot: "Actions",
+    overridesResolver: (_p, s) => s.actions,
+})(({ theme }) => ({ alignItems: "center", display: "flex", flex: "0 0 auto", gap: theme.spacing(1) }));