@vireocodedev/ui 0.2.0 → 0.2.1

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

@@ -0,0 +1,46 @@
+import type { VireoPageLayoutMode } from "../../../../../capabilities/page-layout/types/pageLayout.types.js";
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { BoxProps, Typography } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import type { VireoPageHeaderClasses, VireoPageHeaderClassKey } from "./VireoPageHeader.classes.js";
+import type { VIREO_PAGE_HEADER_NAME, VireoPageHeaderSlotName } from "./VireoPageHeader.identity.js";
+export type VireoPageHeaderOwnerState = {
+    mode: VireoPageLayoutMode;
+    hasLeading: boolean;
+    hasActions: boolean;
+};
+export interface VireoPageHeaderRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoPageHeaderLeadingSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoPageHeaderTitleSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoPageHeaderActionsSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoPageHeaderSlots = {
+    [TSlotName in VireoPageHeaderSlotName]: React.ElementType;
+};
+export type VireoPageHeaderSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoPageHeaderSlots, {
+    root: SlotProps<"header", VireoPageHeaderRootSlotPropsOverrides, VireoPageHeaderOwnerState>;
+    leading: SlotProps<"div", VireoPageHeaderLeadingSlotPropsOverrides, VireoPageHeaderOwnerState>;
+    title: SlotProps<typeof Typography, VireoPageHeaderTitleSlotPropsOverrides, VireoPageHeaderOwnerState>;
+    actions: SlotProps<"div", VireoPageHeaderActionsSlotPropsOverrides, VireoPageHeaderOwnerState>;
+}>;
+export type VireoPageHeaderOwnProps = VireoPageHeaderSlotsAndSlotProps & {
+    title?: React.ReactNode;
+    leading?: React.ReactNode;
+    actions?: React.ReactNode;
+    classes?: Partial<VireoPageHeaderClasses>;
+};
+export type VireoPageHeaderInheritedProps = Omit<BoxProps<"header">, "children" | "component" | "title">;
+export type VireoPageHeaderProps = VireoPageHeaderOwnProps & VireoPageHeaderInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_PAGE_HEADER_NAME]?: VireoThemeComponent<VireoPageHeaderProps, VireoPageHeaderClassKey, VireoPageHeaderOwnerState, Theme>;
+    }
+}

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

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

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

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

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

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

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

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

package/dist/capabilities/page-layout/components/surfaces/VireoResponsiveCard/VireoResponsiveCard.classes.js

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

package/dist/capabilities/page-layout/components/surfaces/VireoResponsiveCard/VireoResponsiveCard.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { VireoResponsiveCardProps } from "./VireoResponsiveCard.types.js";
+/** Keeps stable card markup while adapting its visual surface to the nearest page container mode. */
+export declare const VireoResponsiveCard: React.ForwardRefExoticComponent<Omit<VireoResponsiveCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

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

package/dist/capabilities/page-layout/components/surfaces/VireoResponsiveCard/VireoResponsiveCard.identity.js

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

package/dist/capabilities/page-layout/components/surfaces/VireoResponsiveCard/VireoResponsiveCard.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } 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 { getVireoResponsiveCardUtilityClass } from "./VireoResponsiveCard.classes.js";
+import { VIREO_RESPONSIVE_CARD_NAME } from "./VireoResponsiveCard.identity.js";
+import { VireoResponsiveCardRoot } from "./VireoResponsiveCard.styled.js";
+function useUtilityClasses(classes) {
+    return composeClasses({ root: ["root"] }, getVireoResponsiveCardUtilityClass, classes);
+}
+/** Keeps stable card markup while adapting its visual surface to the nearest page container mode. */
+export const VireoResponsiveCard = React.forwardRef(function VireoResponsiveCard(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_RESPONSIVE_CARD_NAME });
+    const { children, className, classes: classesProp, slotProps = {}, slots = {}, style, surfaceOnCompact = false, sx, ...other } = props;
+    const layout = useVireoPageLayout();
+    const ownerState = { mode: layout.mode, surfaceOnCompact };
+    const classes = useUtilityClasses(classesProp);
+    const root = resolveSlotProps(slotProps.root, ownerState);
+    const ref = useForkRef(forwardedRef, root.ref);
+    return (_jsx(VireoResponsiveCardRoot, { ...other, ...root, as: slots.root, ref: ref, ownerState: ownerState, "data-vireo-page-mode": layout.mode, className: joinClassNames(classes.root, className, root.className), style: { ...style, ...root.style }, sx: mergeSx(sx, root.sx), children: children }));
+});
+VireoResponsiveCard.displayName = VIREO_RESPONSIVE_CARD_NAME;

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

@@ -0,0 +1,4 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type CardProps } from "@mui/material";
+import type { VireoResponsiveCardOwnerState } from "./VireoResponsiveCard.types.js";
+export declare const VireoResponsiveCardRoot: StyledSlotComponent<CardProps, VireoResponsiveCardOwnerState>;

package/dist/capabilities/page-layout/components/surfaces/VireoResponsiveCard/VireoResponsiveCard.styled.js

@@ -0,0 +1,10 @@
+import { Card } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_RESPONSIVE_CARD_NAME } from "./VireoResponsiveCard.identity.js";
+export const VireoResponsiveCardRoot = styled(Card, {
+    name: VIREO_RESPONSIVE_CARD_NAME,
+    slot: "Root",
+    overridesResolver: (_p, s) => s.root,
+})(({ ownerState }) => ownerState.mode === "compact" && !ownerState.surfaceOnCompact
+    ? { backgroundColor: "transparent", backgroundImage: "none", border: 0, borderRadius: 0, boxShadow: "none" }
+    : {});

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

@@ -0,0 +1,32 @@
+import type { VireoPageLayoutMode } from "../../../../../capabilities/page-layout/types/pageLayout.types.js";
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { Card, CardProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import type { VireoResponsiveCardClasses, VireoResponsiveCardClassKey } from "./VireoResponsiveCard.classes.js";
+import type { VIREO_RESPONSIVE_CARD_NAME, VireoResponsiveCardSlotName } from "./VireoResponsiveCard.identity.js";
+export type VireoResponsiveCardOwnerState = {
+    mode: VireoPageLayoutMode;
+    surfaceOnCompact: boolean;
+};
+export interface VireoResponsiveCardRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoResponsiveCardSlots = {
+    [TSlotName in VireoResponsiveCardSlotName]: React.ElementType;
+};
+export type VireoResponsiveCardSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoResponsiveCardSlots, {
+    root: SlotProps<typeof Card, VireoResponsiveCardRootSlotPropsOverrides, VireoResponsiveCardOwnerState>;
+}>;
+export type VireoResponsiveCardOwnProps = VireoResponsiveCardSlotsAndSlotProps & {
+    children: React.ReactNode;
+    surfaceOnCompact?: boolean;
+    classes?: Partial<VireoResponsiveCardClasses>;
+};
+export type VireoResponsiveCardInheritedProps = Omit<CardProps, "children" | "slots" | "slotProps">;
+export type VireoResponsiveCardProps = VireoResponsiveCardOwnProps & VireoResponsiveCardInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_RESPONSIVE_CARD_NAME]?: VireoThemeComponent<VireoResponsiveCardProps, VireoResponsiveCardClassKey, VireoResponsiveCardOwnerState, Theme>;
+    }
+}

package/dist/capabilities/page-layout/components/surfaces/VireoResponsiveCard/VireoResponsiveCard.types.js

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

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

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

package/dist/capabilities/page-layout/components/surfaces/VireoResponsiveCard/index.js

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

package/dist/capabilities/page-layout/constants/pageLayout.constants.d.ts

@@ -0,0 +1,6 @@
+export declare const VIREO_PAGE_LAYOUT_COMPACT_ENTER_WIDTH = 580;
+export declare const VIREO_PAGE_LAYOUT_COMPACT_EXIT_WIDTH = 620;
+export declare const VIREO_PAGE_LAYOUT_WIDE_ENTER_WIDTH = 1120;
+export declare const VIREO_PAGE_LAYOUT_WIDE_EXIT_WIDTH = 1080;
+/** Minimum content width the application shell preserves beside resizable navigation. */
+export declare const VIREO_PAGE_LAYOUT_MIN_WIDTH = 420;

package/dist/capabilities/page-layout/constants/pageLayout.constants.js

@@ -0,0 +1,6 @@
+export const VIREO_PAGE_LAYOUT_COMPACT_ENTER_WIDTH = 580;
+export const VIREO_PAGE_LAYOUT_COMPACT_EXIT_WIDTH = 620;
+export const VIREO_PAGE_LAYOUT_WIDE_ENTER_WIDTH = 1120;
+export const VIREO_PAGE_LAYOUT_WIDE_EXIT_WIDTH = 1080;
+/** Minimum content width the application shell preserves beside resizable navigation. */
+export const VIREO_PAGE_LAYOUT_MIN_WIDTH = 420;

package/dist/capabilities/page-layout/contexts/VireoPageLayoutContext/VireoPageLayoutContext.d.ts

@@ -0,0 +1,4 @@
+import type { VireoPageLayout } from "../../../../capabilities/page-layout/types/pageLayout.types.js";
+import React from "react";
+/** Internal page-layout value consumed through useVireoPageLayout. */
+export declare const VireoPageLayoutContext: React.Context<VireoPageLayout | null>;

package/dist/capabilities/page-layout/contexts/VireoPageLayoutContext/VireoPageLayoutContext.js

@@ -0,0 +1,3 @@
+import React from "react";
+/** Internal page-layout value consumed through useVireoPageLayout. */
+export const VireoPageLayoutContext = React.createContext(null);

package/dist/capabilities/page-layout/hooks/useMeasuredVireoPageLayout/useMeasuredVireoPageLayout.d.ts

@@ -0,0 +1,13 @@
+import type { VireoPageLayoutMode } from "../../../../capabilities/page-layout/types/pageLayout.types.js";
+import React from "react";
+export type UseMeasuredVireoPageLayoutOptions = {
+    mode?: VireoPageLayoutMode;
+    forceCompact?: boolean;
+    measureParent?: boolean;
+    paused?: boolean;
+    reservedInlineSize?: number;
+};
+export declare function useMeasuredVireoPageLayout<E extends HTMLElement = HTMLDivElement>({ mode, forceCompact, measureParent, paused, reservedInlineSize, }?: UseMeasuredVireoPageLayoutOptions): {
+    ref: React.RefObject<E | null>;
+    mode: VireoPageLayoutMode;
+};

package/dist/capabilities/page-layout/hooks/useMeasuredVireoPageLayout/useMeasuredVireoPageLayout.js

@@ -0,0 +1,56 @@
+import { resolveVireoPageLayoutMode } from "../../../../capabilities/page-layout/utils/pageLayout.utils.js";
+import React from "react";
+export function useMeasuredVireoPageLayout({ mode, forceCompact = false, measureParent = false, paused = false, reservedInlineSize = 0, } = {}) {
+    const initialWidth = typeof window === "undefined" ? 0 : Math.max(0, window.innerWidth - reservedInlineSize);
+    const [measuredMode, setMeasuredMode] = React.useState(() => mode ?? (forceCompact ? "compact" : resolveVireoPageLayoutMode(initialWidth)));
+    const modeRef = React.useRef(measuredMode);
+    const ref = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (mode) {
+            modeRef.current = mode;
+            setMeasuredMode(mode);
+            return;
+        }
+        if (forceCompact) {
+            modeRef.current = "compact";
+            setMeasuredMode("compact");
+            return;
+        }
+        if (paused)
+            return;
+        const element = ref.current;
+        if (!element)
+            return;
+        const target = measureParent ? (element.parentElement ?? element) : element;
+        let frame = null;
+        const measure = () => {
+            frame = null;
+            const next = resolveVireoPageLayoutMode(Math.round(target.getBoundingClientRect().width), modeRef.current);
+            if (next !== modeRef.current) {
+                modeRef.current = next;
+                React.startTransition(() => setMeasuredMode(next));
+            }
+        };
+        const schedule = () => {
+            if (frame == null)
+                frame = window.requestAnimationFrame(measure);
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", schedule);
+            return () => {
+                window.removeEventListener("resize", schedule);
+                if (frame != null)
+                    window.cancelAnimationFrame(frame);
+            };
+        }
+        const observer = new ResizeObserver(schedule);
+        observer.observe(target);
+        return () => {
+            observer.disconnect();
+            if (frame != null)
+                window.cancelAnimationFrame(frame);
+        };
+    }, [forceCompact, measureParent, mode, paused]);
+    return { ref, mode: mode ?? (forceCompact ? "compact" : measuredMode) };
+}

package/dist/capabilities/page-layout/hooks/useVireoPageLayout/useVireoPageLayout.d.ts

@@ -0,0 +1,3 @@
+import type { VireoPageLayout } from "../../../../capabilities/page-layout/types/pageLayout.types.js";
+/** Returns the nearest container-aware page mode, with a viewport fallback outside VireoPage. */
+export declare function useVireoPageLayout(): VireoPageLayout;

package/dist/capabilities/page-layout/hooks/useVireoPageLayout/useVireoPageLayout.js

@@ -0,0 +1,11 @@
+import { VireoPageLayoutContext } from "../../../../capabilities/page-layout/contexts/VireoPageLayoutContext/VireoPageLayoutContext.js";
+import { createVireoPageLayout } from "../../../../capabilities/page-layout/utils/pageLayout.utils.js";
+import { useMediaQuery, useTheme } from "@mui/material";
+import React from "react";
+/** Returns the nearest container-aware page mode, with a viewport fallback outside VireoPage. */
+export function useVireoPageLayout() {
+    const context = React.useContext(VireoPageLayoutContext);
+    const theme = useTheme();
+    const compact = useMediaQuery(theme.breakpoints.down("sm"));
+    return context ?? createVireoPageLayout(compact ? "compact" : "regular");
+}

package/dist/capabilities/page-layout/providers/VireoPageLayoutProvider/VireoPageLayoutProvider.d.ts

@@ -0,0 +1,8 @@
+import type { VireoPageLayout } from "../../../../capabilities/page-layout/types/pageLayout.types.js";
+import React from "react";
+export type VireoPageLayoutProviderProps = {
+    value: VireoPageLayout;
+    children: React.ReactNode;
+};
+/** Supplies an explicitly controlled page-layout mode to a subtree. */
+export declare function VireoPageLayoutProvider({ value, children }: VireoPageLayoutProviderProps): React.JSX.Element;

package/dist/capabilities/page-layout/providers/VireoPageLayoutProvider/VireoPageLayoutProvider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VireoPageLayoutContext } from "../../../../capabilities/page-layout/contexts/VireoPageLayoutContext/VireoPageLayoutContext.js";
+/** Supplies an explicitly controlled page-layout mode to a subtree. */
+export function VireoPageLayoutProvider({ value, children }) {
+    return _jsx(VireoPageLayoutContext.Provider, { value: value, children: children });
+}

package/dist/capabilities/page-layout/public.d.ts

@@ -0,0 +1,10 @@
+export * from "./components/layout/VireoPage/index.js";
+export * from "./components/layout/VireoPageBody/index.js";
+export * from "./components/layout/VireoPageHeader/index.js";
+export * from "./components/surfaces/VireoResponsiveCard/index.js";
+export * from "./constants/pageLayout.constants.js";
+export * from "./hooks/useMeasuredVireoPageLayout/useMeasuredVireoPageLayout.js";
+export * from "./hooks/useVireoPageLayout/useVireoPageLayout.js";
+export * from "./providers/VireoPageLayoutProvider/VireoPageLayoutProvider.js";
+export type * from "./types/pageLayout.types.js";
+export * from "./utils/pageLayout.utils.js";

package/dist/capabilities/page-layout/public.js

@@ -0,0 +1,9 @@
+export * from "./components/layout/VireoPage/index.js";
+export * from "./components/layout/VireoPageBody/index.js";
+export * from "./components/layout/VireoPageHeader/index.js";
+export * from "./components/surfaces/VireoResponsiveCard/index.js";
+export * from "./constants/pageLayout.constants.js";
+export * from "./hooks/useMeasuredVireoPageLayout/useMeasuredVireoPageLayout.js";
+export * from "./hooks/useVireoPageLayout/useVireoPageLayout.js";
+export * from "./providers/VireoPageLayoutProvider/VireoPageLayoutProvider.js";
+export * from "./utils/pageLayout.utils.js";

package/dist/capabilities/page-layout/types/pageLayout.types.d.ts

@@ -0,0 +1,7 @@
+export type VireoPageLayoutMode = "compact" | "regular" | "wide";
+export type VireoPageLayout = {
+    mode: VireoPageLayoutMode;
+    isCompact: boolean;
+    isRegular: boolean;
+    isWide: boolean;
+};

package/dist/capabilities/page-layout/types/pageLayout.types.js

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

package/dist/capabilities/page-layout/utils/pageLayout.utils.d.ts

@@ -0,0 +1,4 @@
+import type { VireoPageLayout, VireoPageLayoutMode } from "../../../capabilities/page-layout/types/pageLayout.types.js";
+export declare function createVireoPageLayout(mode: VireoPageLayoutMode): VireoPageLayout;
+/** Resolves a stable container mode with hysteresis around compact and wide boundaries. */
+export declare function resolveVireoPageLayoutMode(width: number, previousMode?: VireoPageLayoutMode): VireoPageLayoutMode;

package/dist/capabilities/page-layout/utils/pageLayout.utils.js

@@ -0,0 +1,22 @@
+import { VIREO_PAGE_LAYOUT_COMPACT_ENTER_WIDTH, VIREO_PAGE_LAYOUT_COMPACT_EXIT_WIDTH, VIREO_PAGE_LAYOUT_WIDE_ENTER_WIDTH, VIREO_PAGE_LAYOUT_WIDE_EXIT_WIDTH, } from "../../../capabilities/page-layout/constants/pageLayout.constants.js";
+export function createVireoPageLayout(mode) {
+    return { mode, isCompact: mode === "compact", isRegular: mode === "regular", isWide: mode === "wide" };
+}
+/** Resolves a stable container mode with hysteresis around compact and wide boundaries. */
+export function resolveVireoPageLayoutMode(width, previousMode) {
+    if (previousMode === "compact") {
+        if (width > VIREO_PAGE_LAYOUT_WIDE_ENTER_WIDTH)
+            return "wide";
+        return width > VIREO_PAGE_LAYOUT_COMPACT_EXIT_WIDTH ? "regular" : "compact";
+    }
+    if (previousMode === "wide") {
+        if (width < VIREO_PAGE_LAYOUT_COMPACT_ENTER_WIDTH)
+            return "compact";
+        return width < VIREO_PAGE_LAYOUT_WIDE_EXIT_WIDTH ? "regular" : "wide";
+    }
+    if (width < VIREO_PAGE_LAYOUT_COMPACT_ENTER_WIDTH)
+        return "compact";
+    if (width > VIREO_PAGE_LAYOUT_WIDE_ENTER_WIDTH)
+        return "wide";
+    return "regular";
+}

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

@@ -0,0 +1 @@
+export * from "./responsive-table/components/data-display/VireoResponsiveTable/index.js";

package/dist/capabilities/table/public.js

@@ -0,0 +1 @@
+export * from "./responsive-table/components/data-display/VireoResponsiveTable/index.js";

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.classes.d.ts

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

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.classes.js

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

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { VireoResponsiveTableColumn, VireoResponsiveTableProps } from "./VireoResponsiveTable.types.js";
+type VireoResponsiveTableComponent = {
+    <TItem, const TColumns extends readonly VireoResponsiveTableColumn<NoInfer<TItem>, string>[]>(props: VireoResponsiveTableProps<TItem, TColumns> & React.RefAttributes<HTMLDivElement>): React.ReactElement | null;
+    displayName?: string;
+};
+/**
+ * Presents one typed data model as a container-aware desktop table or mobile accordion workflow.
+ */
+export declare const VireoResponsiveTable: VireoResponsiveTableComponent;
+export {};

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.identity.d.ts

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

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.identity.js

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

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.js

@@ -0,0 +1,102 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VireoLoadingRegion, 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 { getVireoResponsiveTableUtilityClass } from "./VireoResponsiveTable.classes.js";
+import { VIREO_RESPONSIVE_TABLE_NAME } from "./VireoResponsiveTable.identity.js";
+import { VireoResponsiveTableRoot } from "./VireoResponsiveTable.styled.js";
+import { DesktopResponsiveTable } from "../../../../../../capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/components/DesktopResponsiveTable/DesktopResponsiveTable.js";
+import { MobileResponsiveTable } from "../../../../../../capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/components/MobileResponsiveTable/MobileResponsiveTable.js";
+import { useVireoResponsiveTableState } from "../../../../../../capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/hooks/useVireoResponsiveTableState/useVireoResponsiveTableState.js";
+const MOBILE_WIDTH_BREAKPOINT = 601;
+const MOBILE_HEIGHT_BREAKPOINT = 700;
+const useBrowserLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({ root: ["root"] }, getVireoResponsiveTableUtilityClass, classes);
+}
+function VireoResponsiveTableImpl(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_RESPONSIVE_TABLE_NAME });
+    const { actionsColumn, className, classes: classesProp, columns, data, filters, filtersCount, filtersDoneLabel, filtersLabel, getRowKey, getRowSx, hasNextPage, initialExpandedMobileRowKey, initialMobileScrollAnchor, initialMobileScrollTop, isFetchingNextPage, labels, layers, layout: controlledLayout, onClearFilters, onExpandedMobileRowKeyChange, onFiltersChange, onLoadNextPage, onMobileFiltersDone, onMobileScrollTopChange, onOpenFilters, renderFilters, renderEmptyState, renderMobileFilters, renderMobileSearch, renderTitleEndAdornment, rowsPerPageOptions, size, skeleton = false, slotProps = {}, slots = {}, style, sx, titleColumn, titleEndAdornmentColumn, titleEndAdornmentHelperColumn, totalCount, clearFiltersLabel, ...other } = props;
+    const tableProps = {
+        actionsColumn,
+        columns,
+        data,
+        filters,
+        filtersCount,
+        filtersDoneLabel,
+        filtersLabel,
+        getRowKey,
+        getRowSx,
+        hasNextPage,
+        initialExpandedMobileRowKey,
+        initialMobileScrollAnchor,
+        initialMobileScrollTop,
+        isFetchingNextPage,
+        labels,
+        layers,
+        layout: controlledLayout,
+        onClearFilters,
+        onExpandedMobileRowKeyChange,
+        onFiltersChange,
+        onLoadNextPage,
+        onMobileFiltersDone,
+        onMobileScrollTopChange,
+        onOpenFilters,
+        renderFilters,
+        renderEmptyState,
+        renderMobileFilters,
+        renderMobileSearch,
+        renderTitleEndAdornment,
+        rowsPerPageOptions,
+        size,
+        skeleton,
+        titleColumn,
+        titleEndAdornmentColumn,
+        titleEndAdornmentHelperColumn,
+        totalCount,
+        clearFiltersLabel,
+    };
+    const state = useVireoResponsiveTableState(tableProps);
+    const containerRef = React.useRef(null);
+    const layoutRef = React.useRef(null);
+    const [measuredLayout, setMeasuredLayout] = React.useState(null);
+    useBrowserLayoutEffect(() => {
+        if (controlledLayout) {
+            layoutRef.current = controlledLayout;
+            return;
+        }
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const updateLayout = (width, height) => {
+            const nextLayout = width < MOBILE_WIDTH_BREAKPOINT || height < MOBILE_HEIGHT_BREAKPOINT ? "mobile" : "desktop";
+            if (layoutRef.current === nextLayout)
+                return;
+            layoutRef.current = nextLayout;
+            setMeasuredLayout(nextLayout);
+        };
+        updateLayout(container.clientWidth, container.clientHeight);
+        if (!globalThis.ResizeObserver)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            const contentBoxSize = entry.contentBoxSize[0];
+            updateLayout(contentBoxSize?.inlineSize ?? entry.contentRect.width, contentBoxSize?.blockSize ?? entry.contentRect.height);
+        });
+        observer.observe(container, { box: "content-box" });
+        return () => observer.disconnect();
+    }, [controlledLayout]);
+    const layout = controlledLayout ?? measuredLayout;
+    const ownerState = { layout, skeleton };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef, containerRef);
+    return (_jsx(VireoResponsiveTableRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, "data-container-layout": layout ?? undefined, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: _jsx(VireoLoadingRegion, { loading: skeleton, loadingLabel: labels.loadingTable, sx: { height: "100%", minHeight: 0 }, children: ({ loadingVisible }) => (_jsxs(_Fragment, { children: [layout === "mobile" && (_jsx(MobileResponsiveTable, { tableProps: tableProps, state: state, skeletonVisible: loadingVisible })), layout === "desktop" && (_jsx(DesktopResponsiveTable, { tableProps: tableProps, state: state, skeletonVisible: loadingVisible }))] })) }) }));
+}
+/**
+ * Presents one typed data model as a container-aware desktop table or mobile accordion workflow.
+ */
+export const VireoResponsiveTable = React.forwardRef(VireoResponsiveTableImpl);
+VireoResponsiveTable.displayName = VIREO_RESPONSIVE_TABLE_NAME;

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.styled.d.ts

@@ -0,0 +1,6 @@
+import { type StyledSlotComponent } from "../../../../../../core/public.js";
+import { type BoxProps } from "@mui/material";
+import { type VireoResponsiveTableOwnerState } from "./VireoResponsiveTable.types.js";
+type VireoResponsiveTableStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoResponsiveTableOwnerState>;
+export declare const VireoResponsiveTableRoot: VireoResponsiveTableStyledSlotComponent<BoxProps>;
+export {};

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.styled.js

@@ -0,0 +1,15 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_RESPONSIVE_TABLE_NAME } from "./VireoResponsiveTable.identity.js";
+export const VireoResponsiveTableRoot = styled(Box, {
+    name: VIREO_RESPONSIVE_TABLE_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    minHeight: 0,
+    minWidth: 0,
+    width: "100%",
+});