@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryGroupView/index.js

@@ -0,0 +1 @@
+export { HistoryGroupView } from "./HistoryGroupView.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryNodeView/HistoryNodeView.d.ts

@@ -0,0 +1,10 @@
+import type { HistoryEntryDisclosure } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/types/historyEntry.types.js";
+import type { HistoryNode } from "@vireocodedev/history";
+export declare function HistoryNodeView({ disclosure, emptyValue, hasUnchanged, node, rootMeta, showRootEntityLabel, }: {
+    disclosure: HistoryEntryDisclosure;
+    emptyValue?: React.ReactNode;
+    hasUnchanged: boolean;
+    node: HistoryNode;
+    rootMeta?: React.ReactNode;
+    showRootEntityLabel: boolean;
+}): React.ReactElement;

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryNodeView/HistoryNodeView.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HistoryFieldRowView } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryFieldRowView/HistoryFieldRowView.js";
+import { HistoryGroupView } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryGroupView/HistoryGroupView.js";
+export function HistoryNodeView({ disclosure, emptyValue, hasUnchanged, node, rootMeta, showRootEntityLabel, }) {
+    if (node.type === "group") {
+        return (_jsx(HistoryGroupView, { depth: 1, disclosure: disclosure, emptyValue: emptyValue, group: node, hasUnchanged: hasUnchanged, rootMeta: rootMeta, showRootEntityLabel: showRootEntityLabel }));
+    }
+    return _jsx(HistoryFieldRowView, { depth: 0, emptyValue: emptyValue, labels: disclosure.labels, row: node });
+}

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryNodeView/index.d.ts

@@ -0,0 +1 @@
+export { HistoryNodeView } from "./HistoryNodeView.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryNodeView/index.js

@@ -0,0 +1 @@
+export { HistoryNodeView } from "./HistoryNodeView.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryStatusBadge/HistoryStatusBadge.d.ts

@@ -0,0 +1,7 @@
+import type { VireoHistoryEntryLabels } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.types.js";
+export type HistoryStatus = "added" | "removed" | "updated" | "moved" | "unchanged";
+export declare function HistoryStatusBadge({ focusable, status, labels, }: {
+    focusable?: boolean;
+    status: HistoryStatus;
+    labels: VireoHistoryEntryLabels;
+}): React.ReactElement;

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryStatusBadge/HistoryStatusBadge.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AddRoundedIcon from "@mui/icons-material/AddRounded";
+import EditRoundedIcon from "@mui/icons-material/EditRounded";
+import HorizontalRuleRoundedIcon from "@mui/icons-material/HorizontalRuleRounded";
+import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
+import SwapVertRoundedIcon from "@mui/icons-material/SwapVertRounded";
+import { Box, Tooltip } from "@mui/material";
+function getStatusLabel(status, labels) {
+    return labels[status];
+}
+function HistoryStatusIcon({ status }) {
+    const iconProps = { "aria-hidden": true, focusable: false, fontSize: "inherit" };
+    switch (status) {
+        case "added":
+            return _jsx(AddRoundedIcon, { ...iconProps });
+        case "removed":
+            return _jsx(RemoveRoundedIcon, { ...iconProps });
+        case "moved":
+            return _jsx(SwapVertRoundedIcon, { ...iconProps });
+        case "unchanged":
+            return _jsx(HorizontalRuleRoundedIcon, { ...iconProps });
+        default:
+            return _jsx(EditRoundedIcon, { ...iconProps });
+    }
+}
+export function HistoryStatusBadge({ focusable = true, status, labels, }) {
+    const label = getStatusLabel(status, labels);
+    return (_jsx(Tooltip, { title: label, arrow: true, children: _jsx(Box, { component: "span", className: "VireoHistoryEntry-statusBadge", "data-change-type": status, role: "img", "aria-label": label, tabIndex: focusable ? 0 : undefined, children: _jsx(HistoryStatusIcon, { status: status }) }) }));
+}

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryStatusBadge/index.d.ts

@@ -0,0 +1,2 @@
+export { HistoryStatusBadge } from "./HistoryStatusBadge.js";
+export type { HistoryStatus } from "./HistoryStatusBadge.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryStatusBadge/index.js

@@ -0,0 +1 @@
+export { HistoryStatusBadge } from "./HistoryStatusBadge.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryValueContent/HistoryValueContent.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare function HistoryValueContent({ children, expanded, onOverflowChange, removed, }: {
+    children: React.ReactNode;
+    expanded: boolean;
+    onOverflowChange: (overflowing: boolean) => void;
+    removed?: boolean;
+}): React.ReactElement;

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryValueContent/HistoryValueContent.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+export function HistoryValueContent({ children, expanded, onOverflowChange, removed = false, }) {
+    const contentRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        const element = contentRef.current;
+        if (element == null || expanded)
+            return;
+        const checkOverflow = () => {
+            onOverflowChange(element.scrollHeight > element.clientHeight + 1);
+        };
+        checkOverflow();
+        const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(checkOverflow);
+        resizeObserver?.observe(element);
+        return () => resizeObserver?.disconnect();
+    }, [children, expanded, onOverflowChange]);
+    return (_jsx("div", { ref: contentRef, className: "VireoHistoryEntry-valueContent", "data-expanded": expanded || undefined, "data-removed": removed || undefined, children: children }));
+}

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryValueContent/index.d.ts

@@ -0,0 +1 @@
+export { HistoryValueContent } from "./HistoryValueContent.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryValueContent/index.js

@@ -0,0 +1 @@
+export { HistoryValueContent } from "./HistoryValueContent.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/types/historyEntry.types.d.ts

@@ -0,0 +1,10 @@
+import type { VireoHistoryEntryLabels } from "../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.types.js";
+import type { HistoryPath } from "@vireocodedev/history";
+export type HistoryEntryDisclosure = {
+    defaultExpandedDepth: number;
+    isExpanded: (path: HistoryPath, depth: number) => boolean;
+    labels: VireoHistoryEntryLabels;
+    onToggleExpanded: (path: HistoryPath, depth: number) => void;
+    onToggleShowUnchanged: () => void;
+    showUnchanged: boolean;
+};

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/types/historyEntry.types.js

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

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/utils/getHistoryPathKey.d.ts

@@ -0,0 +1,2 @@
+import type { HistoryPath } from "@vireocodedev/history";
+export declare function getHistoryPathKey(path: HistoryPath): string;

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/utils/getHistoryPathKey.js

@@ -0,0 +1,3 @@
+export function getHistoryPathKey(path) {
+    return path.length === 0 ? "$root" : `$path:${JSON.stringify(path)}`;
+}

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

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

package/dist/capabilities/history/public.js

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/VireoInfiniteCanvas.classes.d.ts

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/VireoInfiniteCanvas.classes.js

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/VireoInfiniteCanvas.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { VireoInfiniteCanvasProps } from "./VireoInfiniteCanvas.types.js";
+/** Provides a controlled-or-uncontrolled pannable, zoomable world coordinate surface. */
+export declare const VireoInfiniteCanvas: React.ForwardRefExoticComponent<Omit<VireoInfiniteCanvasProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/VireoInfiniteCanvas.identity.d.ts

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/VireoInfiniteCanvas.identity.js

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/VireoInfiniteCanvas.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VireoInfiniteCanvasContext } from "../../../../../capabilities/infinite-canvas/contexts/VireoInfiniteCanvasContext/VireoInfiniteCanvasContext.js";
+import { clampCanvasScale, normalizeCanvasTransform, zoomCanvasAtPoint, } from "../../../../../capabilities/infinite-canvas/utils/infiniteCanvas.utils.js";
+import { joinClassNames, mergeSx, resolveSlotProps, useVireoFullscreen } 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 { getVireoInfiniteCanvasUtilityClass } from "./VireoInfiniteCanvas.classes.js";
+import { VIREO_INFINITE_CANVAS_NAME } from "./VireoInfiniteCanvas.identity.js";
+import { VireoInfiniteCanvasRoot } from "./VireoInfiniteCanvas.styled.js";
+const DEFAULT_TRANSFORM = { scale: 1, pan: { x: 0, y: 0 } };
+function useUtilityClasses(classes) {
+    return composeClasses({ root: ["root"] }, getVireoInfiniteCanvasUtilityClass, classes);
+}
+/** Provides a controlled-or-uncontrolled pannable, zoomable world coordinate surface. */
+export const VireoInfiniteCanvas = React.forwardRef(function VireoInfiniteCanvas(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_INFINITE_CANVAS_NAME });
+    const { children, className, classes: classesProp, defaultTransform = DEFAULT_TRANSFORM, gridSize = 24, horizontalGridFactor = 1, maxScale = 10, minScale = 0.1, onTransformChange, panEnabled = true, slotProps = {}, slots = {}, style, sx, transform: controlledTransform, verticalGridFactor = 1, wheelZoomEnabled = true, zoomStep = 1.1, ...other } = props;
+    const initialTransform = React.useRef(normalizeCanvasTransform(defaultTransform, minScale, maxScale));
+    const [internalTransform, setInternalTransform] = React.useState(initialTransform.current);
+    const transform = normalizeCanvasTransform(controlledTransform ?? internalTransform, minScale, maxScale);
+    const [target, setTarget] = React.useState(null);
+    const { isFullscreen, isSupported: isFullscreenSupported, toggleFullscreen } = useVireoFullscreen(target);
+    const [panning, setPanning] = React.useState(false);
+    const dragRef = React.useRef(null);
+    const ownerState = {
+        transform,
+        gridSize,
+        horizontalGridFactor,
+        verticalGridFactor,
+        panning,
+    };
+    const classes = useUtilityClasses(classesProp);
+    const root = resolveSlotProps(slotProps.root, ownerState);
+    const ref = useForkRef(forwardedRef, root.ref, setTarget);
+    const setTransform = React.useCallback((next) => {
+        const normalized = normalizeCanvasTransform(next, minScale, maxScale);
+        if (controlledTransform == null)
+            setInternalTransform(normalized);
+        onTransformChange?.(normalized);
+    }, [controlledTransform, maxScale, minScale, onTransformChange]);
+    const zoomAtClient = React.useCallback((scale, client) => {
+        if (!target)
+            return;
+        const rect = target.getBoundingClientRect();
+        const local = { x: client.x - rect.left, y: client.y - rect.top };
+        setTransform(zoomCanvasAtPoint(transform, clampCanvasScale(scale, minScale, maxScale), local));
+    }, [maxScale, minScale, setTransform, target, transform]);
+    React.useEffect(() => {
+        if (!target || !wheelZoomEnabled)
+            return;
+        const handler = (event) => {
+            event.preventDefault();
+            zoomAtClient(transform.scale * (event.deltaY < 0 ? zoomStep : 1 / zoomStep), {
+                x: event.clientX,
+                y: event.clientY,
+            });
+        };
+        target.addEventListener("wheel", handler, { passive: false });
+        return () => target.removeEventListener("wheel", handler);
+    }, [target, transform.scale, wheelZoomEnabled, zoomAtClient, zoomStep]);
+    const onPointerDown = (event) => {
+        if (!panEnabled || event.button !== 0)
+            return;
+        const eventTarget = event.target;
+        if (eventTarget !== event.currentTarget && !eventTarget.hasAttribute("data-vireo-canvas-pan-surface"))
+            return;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        dragRef.current = { x: event.clientX, y: event.clientY };
+        setPanning(true);
+    };
+    const onPointerMove = (event) => {
+        if (!dragRef.current)
+            return;
+        const previous = dragRef.current;
+        dragRef.current = { x: event.clientX, y: event.clientY };
+        setTransform({
+            scale: transform.scale,
+            pan: { x: transform.pan.x + event.clientX - previous.x, y: transform.pan.y + event.clientY - previous.y },
+        });
+    };
+    const endPan = () => {
+        dragRef.current = null;
+        setPanning(false);
+    };
+    const clientToWorld = React.useCallback((point) => {
+        if (!target)
+            return point;
+        const rect = target.getBoundingClientRect();
+        return {
+            x: (point.x - rect.left - transform.pan.x) / transform.scale,
+            y: (point.y - rect.top - transform.pan.y) / transform.scale,
+        };
+    }, [target, transform]);
+    const worldToClient = React.useCallback((point) => {
+        if (!target)
+            return point;
+        const rect = target.getBoundingClientRect();
+        return {
+            x: rect.left + transform.pan.x + point.x * transform.scale,
+            y: rect.top + transform.pan.y + point.y * transform.scale,
+        };
+    }, [target, transform]);
+    const getViewportCenterWorld = React.useCallback(() => {
+        if (!target)
+            return { x: 0, y: 0 };
+        const rect = target.getBoundingClientRect();
+        return {
+            x: (rect.width / 2 - transform.pan.x) / transform.scale,
+            y: (rect.height / 2 - transform.pan.y) / transform.scale,
+        };
+    }, [target, transform]);
+    const zoomFromCenter = React.useCallback((factor) => {
+        if (!target)
+            return;
+        const rect = target.getBoundingClientRect();
+        zoomAtClient(transform.scale * factor, { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+    }, [target, transform.scale, zoomAtClient]);
+    const context = React.useMemo(() => ({
+        transform,
+        scale: transform.scale,
+        pan: transform.pan,
+        minScale,
+        maxScale,
+        target,
+        clientToWorld,
+        worldToClient,
+        getViewportCenterWorld,
+        setTransform,
+        resetTransform: () => setTransform(initialTransform.current),
+        zoomIn: () => zoomFromCenter(zoomStep),
+        zoomOut: () => zoomFromCenter(1 / zoomStep),
+        isFullscreen,
+        isFullscreenSupported,
+        toggleFullscreen,
+    }), [
+        clientToWorld,
+        getViewportCenterWorld,
+        isFullscreen,
+        isFullscreenSupported,
+        maxScale,
+        minScale,
+        setTransform,
+        target,
+        toggleFullscreen,
+        transform,
+        worldToClient,
+        zoomFromCenter,
+        zoomStep,
+    ]);
+    return (_jsx(VireoInfiniteCanvasContext.Provider, { value: context, children: _jsx(VireoInfiniteCanvasRoot, { ...other, ...root, as: slots.root ?? "div", ref: ref, ownerState: ownerState, "data-vireo-canvas-pan-surface": "", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endPan, onPointerCancel: endPan, className: joinClassNames(classes.root, className, root.className), style: { ...style, ...root.style }, sx: mergeSx(sx, root.sx), children: children }) }));
+});
+VireoInfiniteCanvas.displayName = VIREO_INFINITE_CANVAS_NAME;

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/VireoInfiniteCanvas.styled.d.ts

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/VireoInfiniteCanvas.styled.js

@@ -0,0 +1,29 @@
+import { Box } from "@mui/material";
+import { alpha, styled } from "@mui/material/styles";
+import { VIREO_INFINITE_CANVAS_NAME } from "./VireoInfiniteCanvas.identity.js";
+export const VireoInfiniteCanvasRoot = styled(Box, {
+    name: VIREO_INFINITE_CANVAS_NAME,
+    slot: "Root",
+    overridesResolver: (_p, s) => s.root,
+})(({ theme, ownerState }) => {
+    const spacing = Math.max(1, Math.round(ownerState.gridSize * ownerState.transform.scale));
+    const xSpacing = spacing * ownerState.horizontalGridFactor;
+    const ySpacing = spacing * ownerState.verticalGridFactor;
+    const offsetX = ((ownerState.transform.pan.x % xSpacing) + xSpacing) % xSpacing;
+    const offsetY = ((ownerState.transform.pan.y % ySpacing) + ySpacing) % ySpacing;
+    const line = alpha(theme.palette.text.primary, 0.12);
+    return {
+        backgroundColor: theme.palette.background.default,
+        backgroundImage: `linear-gradient(to right, ${line} 1px, transparent 1px), linear-gradient(to bottom, ${line} 1px, transparent 1px)`,
+        backgroundPosition: `${Math.round(offsetX)}px 0, 0 ${Math.round(offsetY)}px`,
+        backgroundSize: `${xSpacing}px 100%, 100% ${ySpacing}px`,
+        cursor: ownerState.panning ? "grabbing" : "grab",
+        height: "100%",
+        outline: `1px solid ${theme.palette.divider}`,
+        overflow: "hidden",
+        position: "relative",
+        touchAction: "none",
+        userSelect: "none",
+        width: "100%",
+    };
+});

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/VireoInfiniteCanvas.types.d.ts

@@ -0,0 +1,45 @@
+import type { VireoCanvasTransform } from "../../../../../capabilities/infinite-canvas/types/infiniteCanvas.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 { VireoInfiniteCanvasClasses, VireoInfiniteCanvasClassKey } from "./VireoInfiniteCanvas.classes.js";
+import type { VIREO_INFINITE_CANVAS_NAME, VireoInfiniteCanvasSlotName } from "./VireoInfiniteCanvas.identity.js";
+export type VireoInfiniteCanvasOwnerState = {
+    transform: VireoCanvasTransform;
+    gridSize: number;
+    horizontalGridFactor: number;
+    verticalGridFactor: number;
+    panning: boolean;
+};
+export interface VireoInfiniteCanvasRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoInfiniteCanvasSlots = {
+    [TSlotName in VireoInfiniteCanvasSlotName]: React.ElementType;
+};
+export type VireoInfiniteCanvasSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoInfiniteCanvasSlots, {
+    root: SlotProps<"div", VireoInfiniteCanvasRootSlotPropsOverrides, VireoInfiniteCanvasOwnerState>;
+}>;
+export type VireoInfiniteCanvasOwnProps = VireoInfiniteCanvasSlotsAndSlotProps & {
+    children?: React.ReactNode;
+    transform?: VireoCanvasTransform;
+    defaultTransform?: VireoCanvasTransform;
+    onTransformChange?: (transform: VireoCanvasTransform) => void;
+    minScale?: number;
+    maxScale?: number;
+    zoomStep?: number;
+    gridSize?: number;
+    horizontalGridFactor?: number;
+    verticalGridFactor?: number;
+    panEnabled?: boolean;
+    wheelZoomEnabled?: boolean;
+    classes?: Partial<VireoInfiniteCanvasClasses>;
+};
+export type VireoInfiniteCanvasInheritedProps = Omit<BoxProps<"div">, "children" | "component" | "onChange">;
+export type VireoInfiniteCanvasProps = VireoInfiniteCanvasOwnProps & VireoInfiniteCanvasInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_INFINITE_CANVAS_NAME]?: VireoThemeComponent<VireoInfiniteCanvasProps, VireoInfiniteCanvasClassKey, VireoInfiniteCanvasOwnerState, Theme>;
+    }
+}

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/VireoInfiniteCanvas.types.js

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/index.d.ts

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvas/index.js

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/VireoInfiniteCanvasBody.classes.d.ts

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/VireoInfiniteCanvasBody.classes.js

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/VireoInfiniteCanvasBody.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { VireoInfiniteCanvasBodyProps } from "./VireoInfiniteCanvasBody.types.js";
+/** Applies the canvas world transform to positioned content. */
+export declare const VireoInfiniteCanvasBody: React.ForwardRefExoticComponent<Omit<VireoInfiniteCanvasBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/VireoInfiniteCanvasBody.identity.d.ts

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/VireoInfiniteCanvasBody.identity.js

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/VireoInfiniteCanvasBody.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useVireoInfiniteCanvas } from "../../../../../capabilities/infinite-canvas/hooks/useVireoInfiniteCanvas/useVireoInfiniteCanvas.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 { getVireoInfiniteCanvasBodyUtilityClass, } from "./VireoInfiniteCanvasBody.classes.js";
+import { VIREO_INFINITE_CANVAS_BODY_NAME, } from "./VireoInfiniteCanvasBody.identity.js";
+import { VireoInfiniteCanvasBodyRoot } from "./VireoInfiniteCanvasBody.styled.js";
+function useUtilityClasses(classes) {
+    return composeClasses({ root: ["root"] }, getVireoInfiniteCanvasBodyUtilityClass, classes);
+}
+/** Applies the canvas world transform to positioned content. */
+export const VireoInfiniteCanvasBody = React.forwardRef(function VireoInfiniteCanvasBody(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_INFINITE_CANVAS_BODY_NAME });
+    const { children, className, classes: classesProp, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const { transform } = useVireoInfiniteCanvas();
+    const ownerState = { transform };
+    const classes = useUtilityClasses(classesProp);
+    const root = resolveSlotProps(slotProps.root, ownerState);
+    const ref = useForkRef(forwardedRef, root.ref);
+    return (_jsx(VireoInfiniteCanvasBodyRoot, { ...other, ...root, as: slots.root ?? "div", ref: ref, ownerState: ownerState, "data-vireo-canvas-pan-surface": "", className: joinClassNames(classes.root, className, root.className), style: { ...style, ...root.style }, sx: mergeSx(sx, root.sx), children: children }));
+});
+VireoInfiniteCanvasBody.displayName = VIREO_INFINITE_CANVAS_BODY_NAME;

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/VireoInfiniteCanvasBody.styled.d.ts

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/VireoInfiniteCanvasBody.styled.js

@@ -0,0 +1,10 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_INFINITE_CANVAS_BODY_NAME } from "./VireoInfiniteCanvasBody.identity.js";
+export const VireoInfiniteCanvasBodyRoot = styled(Box, { name: VIREO_INFINITE_CANVAS_BODY_NAME, slot: "Root", overridesResolver: (_p, s) => s.root })(({ ownerState }) => ({
+    inset: 0,
+    position: "absolute",
+    transform: `translate(${ownerState.transform.pan.x}px, ${ownerState.transform.pan.y}px) scale(${ownerState.transform.scale})`,
+    transformOrigin: "0 0",
+    willChange: "transform",
+}));

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/VireoInfiniteCanvasBody.types.d.ts

@@ -0,0 +1,30 @@
+import type { VireoCanvasTransform } from "../../../../../capabilities/infinite-canvas/types/infiniteCanvas.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 { VireoInfiniteCanvasBodyClasses, VireoInfiniteCanvasBodyClassKey } from "./VireoInfiniteCanvasBody.classes.js";
+import type { VIREO_INFINITE_CANVAS_BODY_NAME, VireoInfiniteCanvasBodySlotName } from "./VireoInfiniteCanvasBody.identity.js";
+export type VireoInfiniteCanvasBodyOwnerState = {
+    transform: VireoCanvasTransform;
+};
+export interface VireoInfiniteCanvasBodyRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoInfiniteCanvasBodySlots = {
+    [TSlotName in VireoInfiniteCanvasBodySlotName]: React.ElementType;
+};
+export type VireoInfiniteCanvasBodySlotsAndSlotProps = CreateSlotsAndSlotProps<VireoInfiniteCanvasBodySlots, {
+    root: SlotProps<"div", VireoInfiniteCanvasBodyRootSlotPropsOverrides, VireoInfiniteCanvasBodyOwnerState>;
+}>;
+export type VireoInfiniteCanvasBodyOwnProps = VireoInfiniteCanvasBodySlotsAndSlotProps & {
+    children: React.ReactNode;
+    classes?: Partial<VireoInfiniteCanvasBodyClasses>;
+};
+export type VireoInfiniteCanvasBodyInheritedProps = Omit<BoxProps<"div">, "children" | "component">;
+export type VireoInfiniteCanvasBodyProps = VireoInfiniteCanvasBodyOwnProps & VireoInfiniteCanvasBodyInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_INFINITE_CANVAS_BODY_NAME]?: VireoThemeComponent<VireoInfiniteCanvasBodyProps, VireoInfiniteCanvasBodyClassKey, VireoInfiniteCanvasBodyOwnerState, Theme>;
+    }
+}

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/VireoInfiniteCanvasBody.types.js

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/index.d.ts

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

package/dist/capabilities/infinite-canvas/components/layout/VireoInfiniteCanvasBody/index.js

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

package/dist/capabilities/infinite-canvas/components/overlays/VireoInfiniteCanvasOverlay/VireoInfiniteCanvasOverlay.classes.d.ts

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

package/dist/capabilities/infinite-canvas/components/overlays/VireoInfiniteCanvasOverlay/VireoInfiniteCanvasOverlay.classes.js

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

package/dist/capabilities/infinite-canvas/components/overlays/VireoInfiniteCanvasOverlay/VireoInfiniteCanvasOverlay.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { VireoInfiniteCanvasOverlayProps } from "./VireoInfiniteCanvasOverlay.types.js";
+/** Pins interactive controls above the canvas without applying the world transform. */
+export declare const VireoInfiniteCanvasOverlay: React.ForwardRefExoticComponent<Omit<VireoInfiniteCanvasOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/infinite-canvas/components/overlays/VireoInfiniteCanvasOverlay/VireoInfiniteCanvasOverlay.identity.d.ts

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

package/dist/capabilities/infinite-canvas/components/overlays/VireoInfiniteCanvasOverlay/VireoInfiniteCanvasOverlay.identity.js

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