@vireocodedev/ui 0.2.0 → 0.2.1

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

@@ -0,0 +1,140 @@
+import React from "react";
+const DEFAULT_COLUMN_WIDTH = 180;
+function getColumnLayoutWidth(column) {
+    if (column.fixedWidth) {
+        return column.minWidthPx ?? column.width ?? DEFAULT_COLUMN_WIDTH;
+    }
+    const preferredWidth = column.width ?? column.minWidthPx ?? DEFAULT_COLUMN_WIDTH;
+    return Math.max(preferredWidth, column.minWidthPx ?? 0);
+}
+/** Pinned and explicitly sized columns keep their exact width; the rest absorb the leftover space. */
+function isFixedColumn(column) {
+    return Boolean(column.sticky) || column.fixedWidth === true || column.width !== undefined;
+}
+export function useVireoResponsiveTableState({ actionsColumn, columns, data, filters, onFiltersChange, rowsPerPageOptions: rowsPerPageOptionsProp, titleColumn, titleEndAdornmentColumn, titleEndAdornmentHelperColumn, }) {
+    const rowsPerPageOptions = React.useMemo(() => {
+        const options = [...(rowsPerPageOptionsProp ?? [10, 20, 50, 100]), filters.rowsPerPage];
+        return [...new Set(options)].sort((a, b) => a - b);
+    }, [filters.rowsPerPage, rowsPerPageOptionsProp]);
+    const skeletonPlaceholderCount = Math.min(Math.max(filters.rowsPerPage, 3), 100);
+    const desktopPageRows = React.useMemo(() => {
+        if (data.length <= filters.rowsPerPage)
+            return data;
+        const firstRow = filters.page * filters.rowsPerPage;
+        return data.slice(firstRow, firstRow + filters.rowsPerPage);
+    }, [data, filters.page, filters.rowsPerPage]);
+    const orderedColumns = React.useMemo(() => {
+        const ids = new Set();
+        for (const column of columns) {
+            if (ids.has(column.id))
+                throw new Error(`VireoResponsiveTable column id "${column.id}" is duplicated.`);
+            ids.add(column.id);
+        }
+        return [
+            ...columns.filter(column => column.sticky === "left"),
+            ...columns.filter(column => !column.sticky),
+            ...columns.filter(column => column.sticky === "right"),
+        ];
+    }, [columns]);
+    const tableLayout = React.useMemo(() => {
+        const leftOffsets = new Map();
+        const rightOffsets = new Map();
+        let left = 0;
+        let right = 0;
+        for (const column of orderedColumns) {
+            if (column.sticky === "left") {
+                leftOffsets.set(column.id, left);
+                left += getColumnLayoutWidth(column);
+            }
+        }
+        for (const column of [...orderedColumns].reverse()) {
+            if (column.sticky === "right") {
+                rightOffsets.set(column.id, right);
+                right += getColumnLayoutWidth(column);
+            }
+        }
+        return {
+            leftOffsets,
+            rightOffsets,
+            totalWidth: orderedColumns.reduce((sum, column) => sum + getColumnLayoutWidth(column), 0),
+            fixedWidth: orderedColumns.reduce((sum, column) => (isFixedColumn(column) ? sum + getColumnLayoutWidth(column) : sum), 0),
+            flexibleWidth: orderedColumns.reduce((sum, column) => (isFixedColumn(column) ? sum : sum + getColumnLayoutWidth(column)), 0),
+            lastLeftId: orderedColumns.filter(column => column.sticky === "left").at(-1)?.id,
+            firstRightId: orderedColumns.find(column => column.sticky === "right")?.id,
+        };
+    }, [orderedColumns]);
+    const desktopColumnWidths = React.useMemo(() => {
+        const { fixedWidth, flexibleWidth, totalWidth } = tableLayout;
+        const byId = new Map();
+        for (const column of orderedColumns) {
+            const layoutWidth = getColumnLayoutWidth(column);
+            byId.set(column.id, isFixedColumn(column) || flexibleWidth === 0
+                ? `${layoutWidth}px`
+                : `max(${layoutWidth}px, calc((100% - ${fixedWidth}px) * ${layoutWidth / flexibleWidth}))`);
+        }
+        return { byId, tableWidth: totalWidth };
+    }, [orderedColumns, tableLayout]);
+    const columnById = React.useMemo(() => new Map(orderedColumns.map(column => [column.id, column])), [orderedColumns]);
+    const resolvedTitleColumn = columnById.get(titleColumn ?? "") ?? orderedColumns.find(column => column.id !== actionsColumn);
+    const endAdornmentColumn = columnById.get(titleEndAdornmentColumn ?? "");
+    const helperColumn = columnById.get(titleEndAdornmentHelperColumn ?? "");
+    const resolvedActionsColumn = columnById.get(actionsColumn ?? "");
+    const mobileDetailColumns = React.useMemo(() => orderedColumns.filter(column => column.id !== resolvedActionsColumn?.id), [orderedColumns, resolvedActionsColumn?.id]);
+    const sortableColumns = React.useMemo(() => orderedColumns.filter(column => Boolean(column.sort?.trim())), [orderedColumns]);
+    const getStickyCellSx = React.useCallback((column, isHeader) => {
+        const isSticky = Boolean(column.sticky);
+        const edgeShadow = column.id === tableLayout.lastLeftId
+            ? "4px 0 8px -6px rgba(15, 23, 42, 0.42)"
+            : column.id === tableLayout.firstRightId
+                ? "-4px 0 8px -6px rgba(15, 23, 42, 0.42)"
+                : undefined;
+        return {
+            boxSizing: "border-box",
+            ...(isHeader && {
+                position: "sticky",
+                top: 0,
+                zIndex: isSticky ? 5 : 3,
+                bgcolor: "surface.sunken",
+            }),
+            ...(isSticky && {
+                position: "sticky",
+                left: column.sticky === "left" ? tableLayout.leftOffsets.get(column.id) : undefined,
+                right: column.sticky === "right" ? tableLayout.rightOffsets.get(column.id) : undefined,
+                zIndex: isHeader ? 5 : 2,
+                bgcolor: isHeader ? "surface.sunken" : "surface.base",
+                boxShadow: edgeShadow,
+            }),
+        };
+    }, [tableLayout]);
+    const handleSort = React.useCallback((sortBy) => {
+        const isActive = filters.sortBy === sortBy;
+        onFiltersChange({
+            ...filters,
+            page: 0,
+            sortBy,
+            sortDirection: isActive && filters.sortDirection === "asc" ? "desc" : "asc",
+        });
+    }, [filters, onFiltersChange]);
+    const handleMobileSortColumnChange = React.useCallback((sortBy) => onFiltersChange({ ...filters, page: 0, sortBy }), [filters, onFiltersChange]);
+    const handleMobileSortDirectionChange = React.useCallback((sortDirection) => {
+        if (sortDirection)
+            onFiltersChange({ ...filters, page: 0, sortDirection });
+    }, [filters, onFiltersChange]);
+    return {
+        rowsPerPageOptions,
+        skeletonPlaceholderCount,
+        desktopPageRows,
+        orderedColumns,
+        desktopColumnWidths,
+        endAdornmentColumn,
+        helperColumn,
+        resolvedActionsColumn,
+        resolvedTitleColumn,
+        mobileDetailColumns,
+        sortableColumns,
+        getStickyCellSx,
+        handleSort,
+        handleMobileSortColumnChange,
+        handleMobileSortDirectionChange,
+    };
+}

package/dist/capabilities/unsaved-changes/contexts/UnsavedChangesContext/UnsavedChangesContext.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+export type UnsavedChangesScopeId = string | null | undefined;
+export type UnsavedChangesRegistration = {
+    busy: boolean;
+    dirty: boolean;
+    id: string;
+    scopeId?: string;
+};
+export type UnsavedChangesStatus = {
+    busy: boolean;
+    dirty: boolean;
+};
+export type UnsavedChangesDiscardRequest = {
+    onDiscard: () => void | Promise<void>;
+    scopeId?: string | null;
+};
+export type UnsavedChangesContextValue = {
+    removeRegistration: (id: string) => void;
+    requestDiscard: (request: UnsavedChangesDiscardRequest) => void;
+    runWithoutNavigationBlock: <T>(action: () => T) => T;
+    upsertRegistration: (registration: UnsavedChangesRegistration) => void;
+};
+export type UnsavedChangesRegistry = {
+    getSnapshot: () => ReadonlyMap<string, UnsavedChangesRegistration>;
+    getStatus: (scopeId?: UnsavedChangesScopeId) => UnsavedChangesStatus;
+    isNavigationBlockBypassed: () => boolean;
+    removeRegistration: (id: string) => void;
+    runWithoutNavigationBlock: <T>(action: () => T) => T;
+    subscribe: (listener: () => void) => () => void;
+    upsertRegistration: (registration: UnsavedChangesRegistration) => void;
+};
+export declare function isUnsavedChangesRegistrationInScope(registration: UnsavedChangesRegistration, scopeId: UnsavedChangesScopeId): boolean;
+export declare function getUnsavedChangesStatus(registrations: ReadonlyMap<string, UnsavedChangesRegistration>, scopeId: UnsavedChangesScopeId): UnsavedChangesStatus;
+export declare function createUnsavedChangesRegistry(): UnsavedChangesRegistry;
+export declare const UnsavedChangesContext: React.Context<UnsavedChangesContextValue>;
+export declare const UnsavedChangesScopeContext: React.Context<string | undefined>;
+export declare function useUnsavedChanges(): UnsavedChangesContextValue;
+export declare function useUnsavedChangesScopeId(): string | undefined;

package/dist/capabilities/unsaved-changes/contexts/UnsavedChangesContext/UnsavedChangesContext.js

@@ -0,0 +1,100 @@
+import React from "react";
+function isPromiseLike(value) {
+    return ((typeof value === "object" || typeof value === "function") &&
+        value !== null &&
+        "then" in value &&
+        typeof value.then === "function");
+}
+export function isUnsavedChangesRegistrationInScope(registration, scopeId) {
+    if (scopeId == null) {
+        return true;
+    }
+    return registration.scopeId === scopeId || registration.scopeId?.startsWith(`${scopeId}/`) === true;
+}
+export function getUnsavedChangesStatus(registrations, scopeId) {
+    let dirty = false;
+    let busy = false;
+    for (const registration of registrations.values()) {
+        if (!registration.dirty || !isUnsavedChangesRegistrationInScope(registration, scopeId)) {
+            continue;
+        }
+        dirty = true;
+        busy ||= registration.busy;
+    }
+    return { dirty, busy };
+}
+export function createUnsavedChangesRegistry() {
+    let registrations = new Map();
+    let navigationBypassDepth = 0;
+    const listeners = new Set();
+    function commit(next) {
+        if (next === registrations) {
+            return;
+        }
+        registrations = next;
+        listeners.forEach(listener => listener());
+    }
+    function releaseNavigationBypass() {
+        navigationBypassDepth = Math.max(0, navigationBypassDepth - 1);
+    }
+    return {
+        getSnapshot: () => registrations,
+        getStatus: scopeId => getUnsavedChangesStatus(registrations, scopeId),
+        isNavigationBlockBypassed: () => navigationBypassDepth > 0,
+        removeRegistration: id => {
+            if (!registrations.has(id)) {
+                return;
+            }
+            const next = new Map(registrations);
+            next.delete(id);
+            commit(next);
+        },
+        runWithoutNavigationBlock: (action) => {
+            navigationBypassDepth += 1;
+            try {
+                const result = action();
+                if (isPromiseLike(result)) {
+                    return Promise.resolve(result).finally(releaseNavigationBypass);
+                }
+                releaseNavigationBypass();
+                return result;
+            }
+            catch (error) {
+                releaseNavigationBypass();
+                throw error;
+            }
+        },
+        subscribe: listener => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        upsertRegistration: registration => {
+            const previous = registrations.get(registration.id);
+            if (previous &&
+                previous.scopeId === registration.scopeId &&
+                previous.dirty === registration.dirty &&
+                previous.busy === registration.busy) {
+                return;
+            }
+            const next = new Map(registrations);
+            next.set(registration.id, registration);
+            commit(next);
+        },
+    };
+}
+const defaultValue = {
+    removeRegistration: () => undefined,
+    requestDiscard: request => void request.onDiscard(),
+    runWithoutNavigationBlock: action => action(),
+    upsertRegistration: () => undefined,
+};
+export const UnsavedChangesContext = React.createContext(defaultValue);
+export const UnsavedChangesScopeContext = React.createContext(undefined);
+export function useUnsavedChanges() {
+    return React.useContext(UnsavedChangesContext);
+}
+export function useUnsavedChangesScopeId() {
+    return React.useContext(UnsavedChangesScopeContext);
+}

package/dist/capabilities/unsaved-changes/hooks/useUnsavedChangesRegistration/useUnsavedChangesRegistration.d.ts

@@ -0,0 +1,7 @@
+export type UseUnsavedChangesRegistrationProps = {
+    busy?: boolean;
+    dirty: boolean;
+    enabled?: boolean;
+    scopeId?: string;
+};
+export declare function useUnsavedChangesRegistration({ busy, dirty, enabled, scopeId: explicitScopeId, }: UseUnsavedChangesRegistrationProps): void;

package/dist/capabilities/unsaved-changes/hooks/useUnsavedChangesRegistration/useUnsavedChangesRegistration.js

@@ -0,0 +1,16 @@
+import { useUnsavedChanges, useUnsavedChangesScopeId, } from "../../../../capabilities/unsaved-changes/contexts/UnsavedChangesContext/UnsavedChangesContext.js";
+import React from "react";
+export function useUnsavedChangesRegistration({ busy = false, dirty, enabled = true, scopeId: explicitScopeId, }) {
+    const id = React.useId();
+    const inheritedScopeId = useUnsavedChangesScopeId();
+    const { removeRegistration, upsertRegistration } = useUnsavedChanges();
+    const scopeId = explicitScopeId ?? inheritedScopeId;
+    React.useLayoutEffect(() => {
+        if (!enabled) {
+            removeRegistration(id);
+            return;
+        }
+        upsertRegistration({ id, scopeId, dirty, busy });
+    }, [busy, dirty, enabled, id, removeRegistration, scopeId, upsertRegistration]);
+    React.useLayoutEffect(() => () => removeRegistration(id), [id, removeRegistration]);
+}

package/dist/capabilities/unsaved-changes/hooks/useUnsavedChangesRequestDiscard/useUnsavedChangesRequestDiscard.d.ts

@@ -0,0 +1,6 @@
+import { type UnsavedChangesScopeId } from "../../../../capabilities/unsaved-changes/contexts/UnsavedChangesContext/UnsavedChangesContext.js";
+export type UseUnsavedChangesRequestDiscardOptions = {
+    disabled?: boolean;
+    scopeId?: UnsavedChangesScopeId;
+};
+export declare function useUnsavedChangesRequestDiscard(onDiscard: () => void | Promise<void>, { disabled, scopeId: requestedScopeId }?: UseUnsavedChangesRequestDiscardOptions): () => void;

package/dist/capabilities/unsaved-changes/hooks/useUnsavedChangesRequestDiscard/useUnsavedChangesRequestDiscard.js

@@ -0,0 +1,13 @@
+import { useUnsavedChanges, useUnsavedChangesScopeId, } from "../../../../capabilities/unsaved-changes/contexts/UnsavedChangesContext/UnsavedChangesContext.js";
+import React from "react";
+export function useUnsavedChangesRequestDiscard(onDiscard, { disabled = false, scopeId: requestedScopeId } = {}) {
+    const currentScopeId = useUnsavedChangesScopeId();
+    const { requestDiscard } = useUnsavedChanges();
+    const scopeId = requestedScopeId === undefined ? currentScopeId : requestedScopeId;
+    return React.useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        requestDiscard({ scopeId, onDiscard });
+    }, [disabled, onDiscard, requestDiscard, scopeId]);
+}

package/dist/capabilities/unsaved-changes/providers/UnsavedChangesScope/UnsavedChangesScope.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export type UnsavedChangesScopeProps = {
+    children: React.ReactNode;
+    id?: string;
+};
+export declare function UnsavedChangesScope({ children, id }: UnsavedChangesScopeProps): React.JSX.Element;

package/dist/capabilities/unsaved-changes/providers/UnsavedChangesScope/UnsavedChangesScope.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UnsavedChangesScopeContext, useUnsavedChangesScopeId, } from "../../../../capabilities/unsaved-changes/contexts/UnsavedChangesContext/UnsavedChangesContext.js";
+import React from "react";
+function normalizeReactId(id) {
+    return id.replaceAll(":", "");
+}
+export function UnsavedChangesScope({ children, id }) {
+    const parentScopeId = useUnsavedChangesScopeId();
+    const reactId = React.useId();
+    const segment = id ?? `scope-${normalizeReactId(reactId)}`;
+    const scopeId = parentScopeId ? `${parentScopeId}/${segment}` : segment;
+    return _jsx(UnsavedChangesScopeContext.Provider, { value: scopeId, children: children });
+}

package/dist/capabilities/unsaved-changes/public.d.ts

@@ -0,0 +1,4 @@
+export { UnsavedChangesContext, UnsavedChangesScopeContext, createUnsavedChangesRegistry, getUnsavedChangesStatus, isUnsavedChangesRegistrationInScope, useUnsavedChanges, useUnsavedChangesScopeId, type UnsavedChangesContextValue, type UnsavedChangesDiscardRequest, type UnsavedChangesRegistration, type UnsavedChangesRegistry, type UnsavedChangesScopeId, type UnsavedChangesStatus, } from "./contexts/UnsavedChangesContext/UnsavedChangesContext.js";
+export { useUnsavedChangesRegistration, type UseUnsavedChangesRegistrationProps, } from "./hooks/useUnsavedChangesRegistration/useUnsavedChangesRegistration.js";
+export { useUnsavedChangesRequestDiscard, type UseUnsavedChangesRequestDiscardOptions, } from "./hooks/useUnsavedChangesRequestDiscard/useUnsavedChangesRequestDiscard.js";
+export { UnsavedChangesScope, type UnsavedChangesScopeProps, } from "./providers/UnsavedChangesScope/UnsavedChangesScope.js";

package/dist/capabilities/unsaved-changes/public.js

@@ -0,0 +1,4 @@
+export { UnsavedChangesContext, UnsavedChangesScopeContext, createUnsavedChangesRegistry, getUnsavedChangesStatus, isUnsavedChangesRegistrationInScope, useUnsavedChanges, useUnsavedChangesScopeId, } from "./contexts/UnsavedChangesContext/UnsavedChangesContext.js";
+export { useUnsavedChangesRegistration, } from "./hooks/useUnsavedChangesRegistration/useUnsavedChangesRegistration.js";
+export { useUnsavedChangesRequestDiscard, } from "./hooks/useUnsavedChangesRequestDiscard/useUnsavedChangesRequestDiscard.js";
+export { UnsavedChangesScope, } from "./providers/UnsavedChangesScope/UnsavedChangesScope.js";

package/dist/core/components/behavior/VireoDelayedRender/VireoDelayedRender.classes.d.ts

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

package/dist/core/components/behavior/VireoDelayedRender/VireoDelayedRender.classes.js

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

package/dist/core/components/behavior/VireoDelayedRender/VireoDelayedRender.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { type VireoDelayedRenderProps } from "./VireoDelayedRender.types.js";
+/**
+ * Defers mounting transient fallback content so fast operations do not produce a distracting flash.
+ */
+export declare const VireoDelayedRender: React.ForwardRefExoticComponent<Omit<VireoDelayedRenderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/core/components/behavior/VireoDelayedRender/VireoDelayedRender.identity.d.ts

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

package/dist/core/components/behavior/VireoDelayedRender/VireoDelayedRender.identity.js

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

package/dist/core/components/behavior/VireoDelayedRender/VireoDelayedRender.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../core/utils/muiutils.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 { VIREO_LOADING_TOKENS } from "../../../../core/constants/loading.constants.js";
+import { getVireoDelayedRenderUtilityClass } from "./VireoDelayedRender.classes.js";
+import { VIREO_DELAYED_RENDER_NAME } from "./VireoDelayedRender.identity.js";
+import { VireoDelayedRenderRoot } from "./VireoDelayedRender.styled.js";
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+    }, getVireoDelayedRenderUtilityClass, classes);
+}
+/**
+ * Defers mounting transient fallback content so fast operations do not produce a distracting flash.
+ */
+export const VireoDelayedRender = React.forwardRef(function VireoDelayedRender(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_DELAYED_RENDER_NAME });
+    const { children, className, classes: classesProp, delay = VIREO_LOADING_TOKENS.revealDelay, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const [shouldRender, setShouldRender] = React.useState(false);
+    React.useEffect(() => {
+        if (shouldRender) {
+            return undefined;
+        }
+        const timer = window.setTimeout(() => {
+            setShouldRender(true);
+        }, delay);
+        return () => window.clearTimeout(timer);
+    }, [delay, shouldRender]);
+    const ownerState = { delay };
+    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);
+    if (!shouldRender) {
+        return null;
+    }
+    return (_jsx(VireoDelayedRenderRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: children }));
+});
+VireoDelayedRender.displayName = VIREO_DELAYED_RENDER_NAME;

package/dist/core/components/behavior/VireoDelayedRender/VireoDelayedRender.styled.d.ts

@@ -0,0 +1,6 @@
+import { type StyledSlotComponent } from "../../../../core/utils/muiutils.js";
+import { type BoxProps } from "@mui/material";
+import { type VireoDelayedRenderOwnerState } from "./VireoDelayedRender.types.js";
+type VireoDelayedRenderStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoDelayedRenderOwnerState>;
+export declare const VireoDelayedRenderRoot: VireoDelayedRenderStyledSlotComponent<BoxProps>;
+export {};

package/dist/core/components/behavior/VireoDelayedRender/VireoDelayedRender.styled.js

@@ -0,0 +1,10 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_DELAYED_RENDER_NAME } from "./VireoDelayedRender.identity.js";
+export const VireoDelayedRenderRoot = styled(Box, {
+    name: VIREO_DELAYED_RENDER_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({
+    display: "contents",
+});

package/dist/core/components/behavior/VireoDelayedRender/VireoDelayedRender.types.d.ts

@@ -0,0 +1,40 @@
+import type { VireoDataAttributeValue } from "../../../../core/utils/muiutils.js";
+import type { BoxProps } from "@mui/material";
+import type { VireoThemeComponent } from "../../../../core/utils/muiutils.js";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoDelayedRenderClasses, type VireoDelayedRenderClassKey } from "./VireoDelayedRender.classes.js";
+import type { VIREO_DELAYED_RENDER_NAME, VireoDelayedRenderSlotName } from "./VireoDelayedRender.identity.js";
+export type VireoDelayedRenderOwnerState = {
+    delay: number;
+};
+export interface VireoDelayedRenderRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoDelayedRender}. */
+export type VireoDelayedRenderSlots = {
+    [TSlotName in VireoDelayedRenderSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoDelayedRender}. */
+export type VireoDelayedRenderSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoDelayedRenderSlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoDelayedRenderRootSlotPropsOverrides, VireoDelayedRenderOwnerState>;
+}>;
+/** Props owned by {@link VireoDelayedRender}. */
+export type VireoDelayedRenderOwnProps = VireoDelayedRenderSlotsAndSlotProps & {
+    /** Content mounted after the delay elapses. */
+    children: React.ReactNode;
+    /** Time in milliseconds to wait before mounting the content. @default VIREO_LOADING_TOKENS.revealDelay */
+    delay?: number;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoDelayedRenderClasses>;
+};
+/** Props VireoDelayedRender inherits from its default root after excluding component-owned props. */
+export type VireoDelayedRenderInheritedProps = Omit<BoxProps<"div">, "children" | "component">;
+/** Props accepted by {@link VireoDelayedRender}. */
+export type VireoDelayedRenderProps = VireoDelayedRenderOwnProps & VireoDelayedRenderInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_DELAYED_RENDER_NAME]?: VireoThemeComponent<VireoDelayedRenderProps, VireoDelayedRenderClassKey, VireoDelayedRenderOwnerState, Theme>;
+    }
+}

package/dist/core/components/behavior/VireoDelayedRender/VireoDelayedRender.types.js

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

package/dist/core/components/behavior/VireoDelayedRender/index.d.ts

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

package/dist/core/components/behavior/VireoDelayedRender/index.js

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

package/dist/core/components/behavior/VireoInitializationBoundary/VireoInitializationBoundary.classes.d.ts

@@ -0,0 +1,10 @@
+import { VIREO_INITIALIZATION_BOUNDARY_STATES, type VireoInitializationBoundarySlotName } from "./VireoInitializationBoundary.identity.js";
+/** Utility classes available to VireoInitializationBoundary. */
+export type VireoInitializationBoundaryStateClassKey = (typeof VIREO_INITIALIZATION_BOUNDARY_STATES)[number];
+export type VireoInitializationBoundaryClasses = Record<VireoInitializationBoundarySlotName | VireoInitializationBoundaryStateClassKey, string>;
+/** Valid keys for VireoInitializationBoundary utility classes and theme style overrides. */
+export type VireoInitializationBoundaryClassKey = keyof VireoInitializationBoundaryClasses;
+/** Returns the generated utility class name for a VireoInitializationBoundary slot or state. */
+export declare function getVireoInitializationBoundaryUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoInitializationBoundary class key. */
+export declare const vireoInitializationBoundaryClasses: VireoInitializationBoundaryClasses;

package/dist/core/components/behavior/VireoInitializationBoundary/VireoInitializationBoundary.classes.js

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

package/dist/core/components/behavior/VireoInitializationBoundary/VireoInitializationBoundary.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type VireoInitializationBoundaryProps } from "./VireoInitializationBoundary.types.js";
+/** Gates a subtree until an abortable asynchronous initialization lifecycle is ready. */
+export declare const VireoInitializationBoundary: React.ForwardRefExoticComponent<Omit<VireoInitializationBoundaryProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/core/components/behavior/VireoInitializationBoundary/VireoInitializationBoundary.identity.d.ts

@@ -0,0 +1,8 @@
+/** Stable component name shared by every VireoInitializationBoundary integration point. */
+export declare const VIREO_INITIALIZATION_BOUNDARY_NAME = "VireoInitializationBoundary";
+/** Canonical public slots exposed by VireoInitializationBoundary, in rendered DOM order. */
+export declare const VIREO_INITIALIZATION_BOUNDARY_SLOTS: readonly ["root", "loadingIndicator"];
+/** Lifecycle state classes exposed by VireoInitializationBoundary. */
+export declare const VIREO_INITIALIZATION_BOUNDARY_STATES: readonly ["pending", "ready"];
+/** Public slot names exposed by VireoInitializationBoundary. */
+export type VireoInitializationBoundarySlotName = (typeof VIREO_INITIALIZATION_BOUNDARY_SLOTS)[number];

package/dist/core/components/behavior/VireoInitializationBoundary/VireoInitializationBoundary.identity.js

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoInitializationBoundary integration point. */
+export const VIREO_INITIALIZATION_BOUNDARY_NAME = "VireoInitializationBoundary";
+/** Canonical public slots exposed by VireoInitializationBoundary, in rendered DOM order. */
+export const VIREO_INITIALIZATION_BOUNDARY_SLOTS = ["root", "loadingIndicator"];
+/** Lifecycle state classes exposed by VireoInitializationBoundary. */
+export const VIREO_INITIALIZATION_BOUNDARY_STATES = ["pending", "ready"];