@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/integrations/event-source/hooks/useVireoEventSource/useVireoEventSource.js

@@ -0,0 +1,167 @@
+"use client";
+import React from "react";
+function useCommittedRef(value) {
+    const ref = React.useRef(value);
+    React.useEffect(() => {
+        ref.current = value;
+    });
+    return ref;
+}
+function resolveUrl(url, enabled) {
+    const resolved = typeof url === "string" ? url : url.toString();
+    if (enabled && resolved.trim().length === 0) {
+        throw new TypeError("useVireoEventSource url must not be blank while the connection is enabled.");
+    }
+    return resolved;
+}
+function validateListenerNames(listeners) {
+    if (Object.prototype.hasOwnProperty.call(listeners, "message")) {
+        throw new TypeError('useVireoEventSource reserves the "message" event name for the onMessage callback.');
+    }
+}
+function isPromiseLike(value) {
+    return ((typeof value === "object" || typeof value === "function") &&
+        value !== null &&
+        typeof value.then === "function");
+}
+/**
+ * Owns one native EventSource connection without imposing application event,
+ * decoding, authentication, visibility, or connectivity policy.
+ */
+export function useVireoEventSource({ url, enabled = true, withCredentials = false, listeners = {}, onOpen, onError, onMessage, onListenerError, }) {
+    validateListenerNames(listeners);
+    const resolvedUrl = resolveUrl(url, enabled);
+    const [status, setStatus] = React.useState(enabled ? "connecting" : "closed");
+    const sourceRef = React.useRef(null);
+    const namedDispatchersRef = React.useRef(new Map());
+    const listenersRef = useCommittedRef(listeners);
+    const onOpenRef = useCommittedRef(onOpen);
+    const onErrorRef = useCommittedRef(onError);
+    const onMessageRef = useCommittedRef(onMessage);
+    const onListenerErrorRef = useCommittedRef(onListenerError);
+    const configurationRef = useCommittedRef({ enabled, url: resolvedUrl, withCredentials });
+    const reportListenerError = React.useCallback((failure, asynchronous) => {
+        const handler = onListenerErrorRef.current;
+        if (handler !== undefined) {
+            handler(failure);
+            return;
+        }
+        if (asynchronous) {
+            void Promise.reject(failure.error);
+            return;
+        }
+        throw failure.error;
+    }, [onListenerErrorRef]);
+    const invokeListener = React.useCallback((listener, event, eventName) => {
+        let result;
+        try {
+            result = listener(event);
+        }
+        catch (error) {
+            reportListenerError({ error, eventName, event }, false);
+            return;
+        }
+        if (!isPromiseLike(result))
+            return;
+        void Promise.resolve(result).catch(error => {
+            reportListenerError({ error, eventName, event }, true);
+        });
+    }, [reportListenerError]);
+    const removeNamedDispatchers = React.useCallback((source) => {
+        for (const [eventName, dispatcher] of namedDispatchersRef.current) {
+            source.removeEventListener(eventName, dispatcher);
+        }
+        namedDispatchersRef.current.clear();
+    }, []);
+    const closeCurrentSource = React.useCallback(() => {
+        const source = sourceRef.current;
+        if (source === null)
+            return;
+        sourceRef.current = null;
+        removeNamedDispatchers(source);
+        source.onopen = null;
+        source.onerror = null;
+        source.onmessage = null;
+        source.close();
+    }, [removeNamedDispatchers]);
+    const synchronizeNamedDispatchers = React.useCallback((source) => {
+        const currentNames = new Set(Object.keys(listenersRef.current));
+        for (const [eventName, dispatcher] of namedDispatchersRef.current) {
+            if (currentNames.has(eventName))
+                continue;
+            source.removeEventListener(eventName, dispatcher);
+            namedDispatchersRef.current.delete(eventName);
+        }
+        for (const eventName of currentNames) {
+            if (namedDispatchersRef.current.has(eventName))
+                continue;
+            const dispatcher = event => {
+                if (sourceRef.current !== source)
+                    return;
+                const listener = listenersRef.current[eventName];
+                if (listener === undefined)
+                    return;
+                invokeListener(listener, event, eventName);
+            };
+            namedDispatchersRef.current.set(eventName, dispatcher);
+            source.addEventListener(eventName, dispatcher);
+        }
+    }, [invokeListener, listenersRef]);
+    const createConnection = React.useCallback((configuration) => {
+        closeCurrentSource();
+        if (!configuration.enabled)
+            return;
+        if (typeof EventSource === "undefined") {
+            throw new Error("useVireoEventSource requires a browser with native EventSource support.");
+        }
+        const source = new EventSource(configuration.url, { withCredentials: configuration.withCredentials });
+        sourceRef.current = source;
+        source.onopen = event => {
+            if (sourceRef.current !== source)
+                return;
+            setStatus("open");
+            onOpenRef.current?.(event);
+        };
+        source.onerror = event => {
+            if (sourceRef.current !== source)
+                return;
+            if (source.readyState === source.CONNECTING)
+                setStatus("reconnecting");
+            else if (source.readyState === source.CLOSED)
+                setStatus("closed");
+            onErrorRef.current?.(event);
+        };
+        source.onmessage = event => {
+            if (sourceRef.current !== source)
+                return;
+            const listener = onMessageRef.current;
+            if (listener !== undefined)
+                invokeListener(listener, event, null);
+        };
+        synchronizeNamedDispatchers(source);
+    }, [closeCurrentSource, invokeListener, onErrorRef, onMessageRef, onOpenRef, synchronizeNamedDispatchers]);
+    React.useEffect(() => {
+        const configuration = { enabled, url: resolvedUrl, withCredentials };
+        if (!enabled) {
+            closeCurrentSource();
+            setStatus("closed");
+            return;
+        }
+        setStatus("connecting");
+        createConnection(configuration);
+        return closeCurrentSource;
+    }, [closeCurrentSource, createConnection, enabled, resolvedUrl, withCredentials]);
+    React.useEffect(() => {
+        const source = sourceRef.current;
+        if (source !== null)
+            synchronizeNamedDispatchers(source);
+    });
+    const reconnect = React.useCallback(() => {
+        const configuration = configurationRef.current;
+        if (!configuration.enabled)
+            return;
+        setStatus("connecting");
+        createConnection(configuration);
+    }, [configurationRef, createConnection]);
+    return { reconnect, status };
+}

package/dist/integrations/event-source/hooks/useVireoEventSource/useVireoEventSource.types.d.ts

@@ -0,0 +1,22 @@
+export type VireoEventSourceStatus = "connecting" | "open" | "reconnecting" | "closed";
+export type VireoEventSourceListener = (event: MessageEvent<string>) => Promise<void> | void;
+export type VireoEventSourceListeners<TEventName extends string = string> = Partial<Record<TEventName, VireoEventSourceListener>>;
+export type VireoEventSourceListenerError<TEventName extends string = string> = Readonly<{
+    error: unknown;
+    eventName: TEventName | null;
+    event: MessageEvent<string>;
+}>;
+export type UseVireoEventSourceOptions<TEventName extends string = string> = {
+    url: string | URL;
+    enabled?: boolean;
+    withCredentials?: boolean;
+    listeners?: VireoEventSourceListeners<TEventName>;
+    onOpen?: (event: Event) => void;
+    onError?: (event: Event) => void;
+    onMessage?: VireoEventSourceListener;
+    onListenerError?: (failure: VireoEventSourceListenerError<TEventName>) => void;
+};
+export type UseVireoEventSourceResult = Readonly<{
+    status: VireoEventSourceStatus;
+    reconnect: () => void;
+}>;

package/dist/integrations/event-source/hooks/useVireoEventSource/useVireoEventSource.types.js

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

package/dist/integrations/event-source/public.d.ts

@@ -0,0 +1 @@
+export { useVireoEventSource, type UseVireoEventSourceOptions, type UseVireoEventSourceResult, type VireoEventSourceListener, type VireoEventSourceListenerError, type VireoEventSourceListeners, type VireoEventSourceStatus, } from "./hooks/useVireoEventSource/useVireoEventSource.js";

package/dist/integrations/event-source/public.js

@@ -0,0 +1,2 @@
+"use client";
+export { useVireoEventSource, } from "./hooks/useVireoEventSource/useVireoEventSource.js";

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.classes.d.ts

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

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.classes.js

@@ -0,0 +1,12 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_DRAGGABLE_ITEM_NAME, VIREO_DRAGGABLE_ITEM_SLOTS, } from "./VireoDraggableItem.identity.js";
+/** Returns the generated utility class name for a VireoDraggableItem slot or state. */
+export function getVireoDraggableItemUtilityClass(slot) {
+    return generateUtilityClass(VIREO_DRAGGABLE_ITEM_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoDraggableItem class key. */
+export const vireoDraggableItemClasses = generateUtilityClasses(VIREO_DRAGGABLE_ITEM_NAME, [
+    ...VIREO_DRAGGABLE_ITEM_SLOTS,
+    "disabled",
+    "dragging",
+]);

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { VireoDraggableItemProps } from "./VireoDraggableItem.types.js";
+/** Makes one rendered item draggable through its root or an explicit VireoDragHandle. */
+export declare const VireoDraggableItem: React.ForwardRefExoticComponent<Omit<VireoDraggableItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.identity.d.ts

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

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.identity.js

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

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VireoDndContext } from "../../../../../integrations/hello-pangea-dnd/contexts/VireoDndContext/VireoDndContext.js";
+import { encodeDndIdentifier } from "../../../../../integrations/hello-pangea-dnd/utils/dndIdCodec.js";
+import { DraggableItemRoot } from "../../../../../integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/internal/components/DraggableItemRoot/index.js";
+import { Draggable } from "@hello-pangea/dnd";
+import { useThemeProps } from "@mui/material/styles";
+import React from "react";
+import { VIREO_DRAGGABLE_ITEM_NAME } from "./VireoDraggableItem.identity.js";
+const ZERO_POINTER_OFFSET = { x: 0, y: 0 };
+function usePointerLiftCorrection() {
+    const initialPointerPositionRef = React.useRef(null);
+    const latestPointerPositionRef = React.useRef(null);
+    const liftCorrectionRef = React.useRef(null);
+    const trackPointerPosition = React.useCallback((event) => {
+        latestPointerPositionRef.current = { x: event.clientX, y: event.clientY };
+    }, []);
+    const stopPointerTracking = React.useCallback(() => {
+        window.removeEventListener("pointermove", trackPointerPosition, true);
+        window.removeEventListener("pointerup", stopPointerTracking, true);
+        window.removeEventListener("pointercancel", stopPointerTracking, true);
+        initialPointerPositionRef.current = null;
+        latestPointerPositionRef.current = null;
+    }, [trackPointerPosition]);
+    React.useEffect(() => stopPointerTracking, [stopPointerTracking]);
+    const capturePointerLift = React.useCallback((event) => {
+        if (event.button !== 0)
+            return;
+        stopPointerTracking();
+        const point = { x: event.clientX, y: event.clientY };
+        initialPointerPositionRef.current = point;
+        latestPointerPositionRef.current = point;
+        liftCorrectionRef.current = null;
+        window.addEventListener("pointermove", trackPointerPosition, true);
+        window.addEventListener("pointerup", stopPointerTracking, true);
+        window.addEventListener("pointercancel", stopPointerTracking, true);
+    }, [stopPointerTracking, trackPointerPosition]);
+    const getPointerLiftCorrection = React.useCallback((isDragging) => {
+        if (!isDragging) {
+            liftCorrectionRef.current = null;
+            return ZERO_POINTER_OFFSET;
+        }
+        if (liftCorrectionRef.current === null) {
+            const initialPointer = initialPointerPositionRef.current;
+            const latestPointer = latestPointerPositionRef.current;
+            liftCorrectionRef.current =
+                initialPointer && latestPointer
+                    ? { x: latestPointer.x - initialPointer.x, y: latestPointer.y - initialPointer.y }
+                    : ZERO_POINTER_OFFSET;
+        }
+        return liftCorrectionRef.current;
+    }, []);
+    return { capturePointerLift, getPointerLiftCorrection };
+}
+/** Makes one rendered item draggable through its root or an explicit VireoDragHandle. */
+export const VireoDraggableItem = React.forwardRef(function VireoDraggableItem(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_DRAGGABLE_ITEM_NAME });
+    const { allowDragFromInteractiveElements = false, disabled = false, disableDefaultFeedback = false, dragHandle = "root", id, index, respectForcePress = true, ...rootProps } = props;
+    const context = React.useContext(VireoDndContext);
+    if (!context)
+        throw new Error("VireoDraggableItem must be used within VireoDndProvider.");
+    const { registerDraggable } = context;
+    const { capturePointerLift, getPointerLiftCorrection } = usePointerLiftCorrection();
+    const encodedId = React.useMemo(() => encodeDndIdentifier(id, VIREO_DRAGGABLE_ITEM_NAME), [id]);
+    React.useEffect(() => registerDraggable(encodedId), [encodedId, registerDraggable]);
+    return (_jsx(Draggable, { draggableId: encodedId, index: index, isDragDisabled: disabled, disableInteractiveElementBlocking: allowDragFromInteractiveElements, shouldRespectForcePress: respectForcePress, children: (provided, snapshot) => (_jsx(DraggableItemRoot, { ...rootProps, disabled: disabled, disableDefaultFeedback: disableDefaultFeedback, dragHandle: dragHandle, forwardedRef: forwardedRef, liftCorrection: getPointerLiftCorrection(snapshot.isDragging), onPointerLiftStart: capturePointerLift, provided: provided, snapshot: snapshot })) }));
+});
+VireoDraggableItem.displayName = VIREO_DRAGGABLE_ITEM_NAME;

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.styled.d.ts

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

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.styled.js

@@ -0,0 +1,21 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_DRAGGABLE_ITEM_NAME } from "./VireoDraggableItem.identity.js";
+export const VireoDraggableItemRoot = styled(Box, {
+    name: VIREO_DRAGGABLE_ITEM_NAME,
+    slot: "Root",
+    overridesResolver: ({ ownerState }, styles) => [
+        styles.root,
+        ownerState.disabled && styles.disabled,
+        ownerState.isDragging && styles.dragging,
+    ],
+})(({ theme, ownerState }) => {
+    if (ownerState.disableDefaultFeedback)
+        return {};
+    return {
+        ...(ownerState.dragHandle === "root" &&
+            !ownerState.disabled && { cursor: ownerState.isDragging ? "grabbing" : "grab" }),
+        ...(ownerState.isDragging && { boxShadow: theme.shadows[6] }),
+        "@media (prefers-reduced-motion: reduce)": { transitionDuration: "0.01ms !important" },
+    };
+});

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.types.d.ts

@@ -0,0 +1,54 @@
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { VireoDraggableId } from "../../../../../integrations/hello-pangea-dnd/types/dnd.types.js";
+import type { BoxProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoDraggableItemClasses, type VireoDraggableItemClassKey } from "./VireoDraggableItem.classes.js";
+import type { VIREO_DRAGGABLE_ITEM_NAME, VireoDraggableItemSlotName } from "./VireoDraggableItem.identity.js";
+export type VireoDraggableItemOwnerState = {
+    disabled: boolean;
+    disableDefaultFeedback: boolean;
+    dragHandle: "explicit" | "root";
+    isDragging: boolean;
+};
+export interface VireoDraggableItemRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoDraggableItem}. */
+export type VireoDraggableItemSlots = {
+    [TSlotName in VireoDraggableItemSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoDraggableItem}. */
+export type VireoDraggableItemSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoDraggableItemSlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoDraggableItemRootSlotPropsOverrides, VireoDraggableItemOwnerState>;
+}>;
+/** Props owned by {@link VireoDraggableItem}. */
+export type VireoDraggableItemOwnProps = VireoDraggableItemSlotsAndSlotProps & {
+    /** Allows a drag to begin from interactive descendants. @default false */
+    allowDragFromInteractiveElements?: boolean;
+    children?: React.ReactNode;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoDraggableItemClasses>;
+    /** @default false */
+    disabled?: boolean;
+    /** @default false */
+    disableDefaultFeedback?: boolean;
+    /** @default 'root' */
+    dragHandle?: "explicit" | "root";
+    /** Structured identifier unique within the nearest provider. */
+    id: VireoDraggableId;
+    /** Current zero-based position inside its source zone. */
+    index: number;
+    /** @default true */
+    respectForcePress?: boolean;
+};
+/** Props VireoDraggableItem inherits from its default root after excluding component-owned props. */
+export type VireoDraggableItemInheritedProps = Omit<BoxProps<"div">, "children" | "component" | "id" | "onDragStart">;
+/** Props accepted by {@link VireoDraggableItem}. */
+export type VireoDraggableItemProps = VireoDraggableItemOwnProps & VireoDraggableItemInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_DRAGGABLE_ITEM_NAME]?: VireoThemeComponent<VireoDraggableItemProps, VireoDraggableItemClassKey, VireoDraggableItemOwnerState, Theme>;
+    }
+}

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.types.js

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

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/index.d.ts

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

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/index.js

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

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/internal/components/DraggableItemRoot/DraggableItemRoot.d.ts

@@ -0,0 +1,18 @@
+import type { VireoDraggableItemProps } from "../../../../../../../../integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.types.js";
+import type { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
+import React from "react";
+type DraggableItemRootProps = Omit<VireoDraggableItemProps, "allowDragFromInteractiveElements" | "disabled" | "disableDefaultFeedback" | "dragHandle" | "id" | "index" | "respectForcePress"> & {
+    disabled: boolean;
+    disableDefaultFeedback: boolean;
+    dragHandle: "explicit" | "root";
+    forwardedRef: React.ForwardedRef<HTMLDivElement>;
+    liftCorrection: {
+        x: number;
+        y: number;
+    };
+    onPointerLiftStart: (event: React.PointerEvent<HTMLDivElement>) => void;
+    provided: DraggableProvided;
+    snapshot: DraggableStateSnapshot;
+};
+export declare function DraggableItemRoot({ children, className, classes: classesProp, disabled, disableDefaultFeedback, dragHandle, forwardedRef, liftCorrection, onPointerDownCapture, onPointerLiftStart, provided, slotProps, slots, snapshot, style, sx, ...other }: DraggableItemRootProps): React.JSX.Element;
+export {};

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/internal/components/DraggableItemRoot/DraggableItemRoot.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../../../../core/public.js";
+import { getVireoDraggableItemUtilityClass, } from "../../../../../../../../integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.classes.js";
+import { VireoDraggableItemRoot } from "../../../../../../../../integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/VireoDraggableItem.styled.js";
+import { VireoDraggableItemContext } from "../../../../../../../../integrations/hello-pangea-dnd/contexts/VireoDraggableItemContext/VireoDraggableItemContext.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { createPortal } from "react-dom";
+function useUtilityClasses(ownerState, classes) {
+    return composeClasses({
+        root: ["root", ownerState.disabled && "disabled", ownerState.isDragging && "dragging"],
+    }, getVireoDraggableItemUtilityClass, classes);
+}
+export function DraggableItemRoot({ children, className, classes: classesProp, disabled, disableDefaultFeedback, dragHandle, forwardedRef, liftCorrection, onPointerDownCapture, onPointerLiftStart, provided, slotProps = {}, slots = {}, snapshot, style, sx, ...other }) {
+    const ownerState = {
+        disabled,
+        disableDefaultFeedback,
+        dragHandle,
+        isDragging: snapshot.isDragging,
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, onPointerDownCapture: rootSlotOnPointerDownCapture, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef, provided.innerRef);
+    const handleCountRef = React.useRef(0);
+    const registerHandle = React.useCallback(() => {
+        handleCountRef.current += 1;
+        return () => {
+            handleCountRef.current -= 1;
+        };
+    }, []);
+    const handlePointerDownCapture = React.useCallback(event => {
+        const consumerHandler = rootSlotOnPointerDownCapture ?? onPointerDownCapture;
+        consumerHandler?.(event);
+        if (event.button !== 0)
+            return;
+        onPointerLiftStart(event);
+    }, [onPointerDownCapture, onPointerLiftStart, rootSlotOnPointerDownCapture]);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV !== "production" && dragHandle === "explicit" && handleCountRef.current === 0) {
+            console.warn('VireoDraggableItem with dragHandle="explicit" requires a mounted VireoDragHandle.');
+        }
+    }, [dragHandle]);
+    const contextValue = React.useMemo(() => ({
+        disabled,
+        explicitHandle: dragHandle === "explicit",
+        isDragging: snapshot.isDragging,
+        dragHandleProps: provided.dragHandleProps,
+        registerHandle,
+    }), [disabled, dragHandle, provided.dragHandleProps, registerHandle, snapshot.isDragging]);
+    const nativeHandleProps = dragHandle === "root" ? provided.dragHandleProps : undefined;
+    const draggableStyle = provided.draggableProps.style;
+    const correctedDraggableStyle = snapshot.isDragging && draggableStyle && "position" in draggableStyle && draggableStyle.position === "fixed"
+        ? {
+            ...draggableStyle,
+            left: typeof draggableStyle.left === "number" ? draggableStyle.left + liftCorrection.x : draggableStyle.left,
+            top: typeof draggableStyle.top === "number" ? draggableStyle.top + liftCorrection.y : draggableStyle.top,
+        }
+        : draggableStyle;
+    const draggableItem = (_jsx(VireoDraggableItemContext.Provider, { value: contextValue, children: _jsx(VireoDraggableItemRoot, { ...other, ...rootSlotOther, ...provided.draggableProps, ...nativeHandleProps, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), "data-dragging": snapshot.isDragging ? "true" : "false", onPointerDownCapture: handlePointerDownCapture, style: { ...style, ...rootSlotStyle, ...correctedDraggableStyle }, sx: mergeSx(sx, rootSlotSx), children: children }) }));
+    return snapshot.isDragging && typeof document !== "undefined"
+        ? createPortal(draggableItem, document.body)
+        : draggableItem;
+}

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/internal/components/DraggableItemRoot/index.d.ts

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

package/dist/integrations/hello-pangea-dnd/components/behavior/VireoDraggableItem/internal/components/DraggableItemRoot/index.js

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

package/dist/integrations/hello-pangea-dnd/components/controls/VireoDragHandle/VireoDragHandle.classes.d.ts

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

package/dist/integrations/hello-pangea-dnd/components/controls/VireoDragHandle/VireoDragHandle.classes.js

@@ -0,0 +1,12 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_DRAG_HANDLE_NAME, VIREO_DRAG_HANDLE_SLOTS, } from "./VireoDragHandle.identity.js";
+/** Returns the generated utility class name for a VireoDragHandle slot or state. */
+export function getVireoDragHandleUtilityClass(slot) {
+    return generateUtilityClass(VIREO_DRAG_HANDLE_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoDragHandle class key. */
+export const vireoDragHandleClasses = generateUtilityClasses(VIREO_DRAG_HANDLE_NAME, [
+    ...VIREO_DRAG_HANDLE_SLOTS,
+    "disabled",
+    "dragging",
+]);

package/dist/integrations/hello-pangea-dnd/components/controls/VireoDragHandle/VireoDragHandle.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+/** Renders the accessible dedicated grip for an explicit-handle VireoDraggableItem. */
+export declare const VireoDragHandle: React.ForwardRefExoticComponent<(Omit<import("./VireoDragHandle.types.js").VireoDragHandleSlotsAndSlotProps & {
+    children?: React.ReactNode;
+    classes?: Partial<import("./VireoDragHandle.classes.js").VireoDragHandleClasses>;
+} & {
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} & import("./VireoDragHandle.types.js").VireoDragHandleInheritedProps, "ref"> | Omit<import("./VireoDragHandle.types.js").VireoDragHandleSlotsAndSlotProps & {
+    children?: React.ReactNode;
+    classes?: Partial<import("./VireoDragHandle.classes.js").VireoDragHandleClasses>;
+} & {
+    "aria-label"?: string;
+    "aria-labelledby": string;
+} & import("./VireoDragHandle.types.js").VireoDragHandleInheritedProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;

package/dist/integrations/hello-pangea-dnd/components/controls/VireoDragHandle/VireoDragHandle.identity.d.ts

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

package/dist/integrations/hello-pangea-dnd/components/controls/VireoDragHandle/VireoDragHandle.identity.js

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

package/dist/integrations/hello-pangea-dnd/components/controls/VireoDragHandle/VireoDragHandle.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { VireoDraggableItemContext } from "../../../../../integrations/hello-pangea-dnd/contexts/VireoDraggableItemContext/VireoDraggableItemContext.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 { getVireoDragHandleUtilityClass } from "./VireoDragHandle.classes.js";
+import { VIREO_DRAG_HANDLE_NAME } from "./VireoDragHandle.identity.js";
+import { VireoDragHandleIcon, VireoDragHandleRoot } from "./VireoDragHandle.styled.js";
+function useUtilityClasses(ownerState, classes) {
+    return composeClasses({
+        root: ["root", ownerState.disabled && "disabled", ownerState.isDragging && "dragging"],
+        icon: ["icon"],
+    }, getVireoDragHandleUtilityClass, classes);
+}
+/** Renders the accessible dedicated grip for an explicit-handle VireoDraggableItem. */
+export const VireoDragHandle = React.forwardRef(function VireoDragHandle(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_DRAG_HANDLE_NAME });
+    const { children, className, classes: classesProp, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const context = React.useContext(VireoDraggableItemContext);
+    if (!context?.explicitHandle) {
+        throw new Error('VireoDragHandle must be used inside VireoDraggableItem with dragHandle="explicit".');
+    }
+    const { registerHandle } = context;
+    React.useEffect(() => registerHandle(), [registerHandle]);
+    const ownerState = {
+        disabled: context.disabled,
+        isDragging: context.isDragging,
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const resolvedIconSlotProps = resolveSlotProps(slotProps.icon, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const { className: iconSlotClassName, ...iconSlotOther } = resolvedIconSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    return (_jsx(VireoDragHandleRoot, { ...other, ...rootSlotOther, ...context.dragHandleProps, as: slots.root, ref: rootRef, ownerState: ownerState, disabled: context.disabled, className: joinClassNames(classes.root, className, rootSlotClassName), "data-dragging": context.isDragging ? "true" : "false", style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: children ?? (_jsx(VireoDragHandleIcon, { ...iconSlotOther, as: slots.icon, ownerState: ownerState, className: joinClassNames(classes.icon, iconSlotClassName) })) }));
+});
+VireoDragHandle.displayName = VIREO_DRAG_HANDLE_NAME;

package/dist/integrations/hello-pangea-dnd/components/controls/VireoDragHandle/VireoDragHandle.styled.d.ts

@@ -0,0 +1,7 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type IconButtonProps, type SvgIconProps } from "@mui/material";
+import { type VireoDragHandleOwnerState } from "./VireoDragHandle.types.js";
+type VireoDragHandleStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoDragHandleOwnerState>;
+export declare const VireoDragHandleRoot: VireoDragHandleStyledSlotComponent<IconButtonProps>;
+export declare const VireoDragHandleIcon: VireoDragHandleStyledSlotComponent<SvgIconProps>;
+export {};

package/dist/integrations/hello-pangea-dnd/components/controls/VireoDragHandle/VireoDragHandle.styled.js

@@ -0,0 +1,20 @@
+import DragIndicatorRounded from "@mui/icons-material/DragIndicatorRounded";
+import { IconButton } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_DRAG_HANDLE_NAME } from "./VireoDragHandle.identity.js";
+export const VireoDragHandleRoot = styled(IconButton, {
+    name: VIREO_DRAG_HANDLE_NAME,
+    slot: "Root",
+    overridesResolver: ({ ownerState }, styles) => [
+        styles.root,
+        ownerState.disabled && styles.disabled,
+        ownerState.isDragging && styles.dragging,
+    ],
+})(({ ownerState }) => ({
+    cursor: ownerState.disabled ? "default" : ownerState.isDragging ? "grabbing" : "grab",
+}));
+export const VireoDragHandleIcon = styled(DragIndicatorRounded, {
+    name: VIREO_DRAG_HANDLE_NAME,
+    slot: "Icon",
+    overridesResolver: (_props, styles) => styles.icon,
+})({});