entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/editor/ViewportGizmo/useGizmoInteraction.js

@@ -0,0 +1,250 @@
+"use client";
+import { useState, useRef, useCallback } from 'react';
+import { clamp } from '../../../utils/mathUtils.js';
+import { gizmoHitTest, axisToPresetView } from './gizmoMath.js';
+
+const NONE_HIT = { type: 'none', distance: Infinity };
+const ORBIT_KEY_STEP = 15;
+const ORBIT_FINE_STEP = 5;
+function useGizmoInteraction(options) {
+    const { orientation, canvasRef, diameter, upAxis, interactionMode, orbitSpeed, constrainPitch, disabled, onOrbit, onOrbitEnd, onSnapToView, onAxisClick, onOriginClick, } = options;
+    const [hoveredRegion, setHoveredRegion] = useState(NONE_HIT);
+    const isDraggingRef = useRef(false);
+    const [, setForceUpdate] = useState(0);
+    const lastPointerRef = useRef({ x: 0, y: 0 });
+    const startPointerRef = useRef({ x: 0, y: 0 });
+    const hasDraggedRef = useRef(false);
+    const allowSnap = interactionMode === 'full' || interactionMode === 'snap-only';
+    const allowOrbit = interactionMode === 'full' || interactionMode === 'orbit-only';
+    const armLength = (diameter / 2) * 0.65;
+    const center = { x: diameter / 2, y: diameter / 2 };
+    const getPointerPos = useCallback((e) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return { px: 0, py: 0 };
+        const rect = canvas.getBoundingClientRect();
+        return { px: e.clientX - rect.left, py: e.clientY - rect.top };
+    }, [canvasRef]);
+    const onPointerDown = useCallback((e) => {
+        if (disabled || interactionMode === 'display-only' || e.button !== 0)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const { px, py } = getPointerPos(e);
+        isDraggingRef.current = true;
+        hasDraggedRef.current = false;
+        lastPointerRef.current = { x: e.clientX, y: e.clientY };
+        startPointerRef.current = { x: e.clientX, y: e.clientY };
+        setForceUpdate(n => n + 1);
+        canvas.setPointerCapture(e.pointerId);
+        // Store hit for click detection on pointer up
+        const hit = gizmoHitTest(px, py, orientation, center, armLength, upAxis);
+        setHoveredRegion(hit);
+    }, [
+        disabled,
+        interactionMode,
+        canvasRef,
+        getPointerPos,
+        orientation,
+        center,
+        armLength,
+        upAxis,
+    ]);
+    const onPointerMove = useCallback((e) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        if (isDraggingRef.current && allowOrbit) {
+            const dx = e.clientX - lastPointerRef.current.x;
+            const dy = e.clientY - lastPointerRef.current.y;
+            // Only count as drag if moved > 3px from start
+            const totalDx = e.clientX - startPointerRef.current.x;
+            const totalDy = e.clientY - startPointerRef.current.y;
+            if (Math.sqrt(totalDx ** 2 + totalDy ** 2) > 3) {
+                hasDraggedRef.current = true;
+            }
+            if (hasDraggedRef.current) {
+                const deltaYaw = dx * orbitSpeed * 0.5;
+                let deltaPitch = -dy * orbitSpeed * 0.5;
+                if (constrainPitch) {
+                    const newPitch = orientation.pitch + deltaPitch;
+                    deltaPitch = clamp(newPitch, -90, 90) - orientation.pitch;
+                }
+                onOrbit?.({ deltaYaw, deltaPitch });
+            }
+            lastPointerRef.current = { x: e.clientX, y: e.clientY };
+            return;
+        }
+        // Hover detection
+        if (interactionMode === 'display-only')
+            return;
+        const { px, py } = getPointerPos(e);
+        const hit = gizmoHitTest(px, py, orientation, center, armLength, upAxis);
+        setHoveredRegion(hit);
+        // Cursor
+        if (disabled) {
+            canvas.style.cursor = 'default';
+        }
+        else if (hit.type === 'axis-positive' || hit.type === 'origin') {
+            canvas.style.cursor = 'pointer';
+        }
+        else if (allowOrbit) {
+            canvas.style.cursor = isDraggingRef.current ? 'grabbing' : 'grab';
+        }
+        else {
+            canvas.style.cursor = 'default';
+        }
+    }, [
+        canvasRef,
+        allowOrbit,
+        orbitSpeed,
+        constrainPitch,
+        orientation,
+        interactionMode,
+        disabled,
+        getPointerPos,
+        center,
+        armLength,
+        upAxis,
+        onOrbit,
+    ]);
+    const onPointerUp = useCallback((e) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        if (isDraggingRef.current) {
+            isDraggingRef.current = false;
+            setForceUpdate(n => n + 1);
+            canvas.releasePointerCapture(e.pointerId);
+            if (hasDraggedRef.current) {
+                // Finished orbit drag
+                onOrbitEnd?.(orientation);
+            }
+            else if (allowSnap) {
+                // Click (no drag) — check hit
+                const { px, py } = getPointerPos(e);
+                const hit = gizmoHitTest(px, py, orientation, center, armLength, upAxis);
+                if (hit.type === 'origin') {
+                    onOriginClick?.();
+                }
+                else if (hit.type === 'axis-positive' && hit.axis) {
+                    onAxisClick?.(hit.axis, true);
+                    const view = axisToPresetView(hit.axis, true, upAxis);
+                    if (view)
+                        onSnapToView?.(view);
+                }
+                else if (hit.type === 'axis-negative' && hit.axis) {
+                    onAxisClick?.(hit.axis, false);
+                    const view = axisToPresetView(hit.axis, false, upAxis);
+                    if (view)
+                        onSnapToView?.(view);
+                }
+            }
+        }
+    }, [
+        canvasRef,
+        allowSnap,
+        getPointerPos,
+        orientation,
+        center,
+        armLength,
+        upAxis,
+        onOrbitEnd,
+        onOriginClick,
+        onAxisClick,
+        onSnapToView,
+    ]);
+    const onKeyDown = useCallback((e) => {
+        if (disabled || interactionMode === 'display-only')
+            return;
+        const fine = e.shiftKey;
+        const step = fine ? ORBIT_FINE_STEP : ORBIT_KEY_STEP;
+        let handled = false;
+        switch (e.key) {
+            case 'ArrowLeft':
+                if (allowOrbit) {
+                    onOrbit?.({ deltaYaw: -step, deltaPitch: 0 });
+                    handled = true;
+                }
+                break;
+            case 'ArrowRight':
+                if (allowOrbit) {
+                    onOrbit?.({ deltaYaw: step, deltaPitch: 0 });
+                    handled = true;
+                }
+                break;
+            case 'ArrowUp':
+                if (allowOrbit) {
+                    let deltaPitch = step;
+                    if (constrainPitch) {
+                        deltaPitch =
+                            clamp(orientation.pitch + step, -90, 90) - orientation.pitch;
+                    }
+                    onOrbit?.({ deltaYaw: 0, deltaPitch });
+                    handled = true;
+                }
+                break;
+            case 'ArrowDown':
+                if (allowOrbit) {
+                    let deltaPitch = -step;
+                    if (constrainPitch) {
+                        deltaPitch =
+                            clamp(orientation.pitch - step, -90, 90) - orientation.pitch;
+                    }
+                    onOrbit?.({ deltaYaw: 0, deltaPitch });
+                    handled = true;
+                }
+                break;
+            case '1':
+                if (allowSnap) {
+                    onSnapToView?.(e.ctrlKey ? 'back' : 'front');
+                    handled = true;
+                }
+                break;
+            case '3':
+                if (allowSnap) {
+                    onSnapToView?.(e.ctrlKey ? 'left' : 'right');
+                    handled = true;
+                }
+                break;
+            case '7':
+                if (allowSnap) {
+                    onSnapToView?.(e.ctrlKey ? 'bottom' : 'top');
+                    handled = true;
+                }
+                break;
+            case '5':
+            case 'Home':
+                onOriginClick?.();
+                handled = true;
+                break;
+        }
+        if (handled) {
+            e.preventDefault();
+        }
+    }, [
+        disabled,
+        interactionMode,
+        allowOrbit,
+        allowSnap,
+        constrainPitch,
+        orientation,
+        onOrbit,
+        onSnapToView,
+        onOriginClick,
+    ]);
+    return {
+        isDragging: isDraggingRef.current,
+        hoveredRegion,
+        handlers: {
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onKeyDown,
+        },
+    };
+}
+
+export { useGizmoInteraction };
+//# sourceMappingURL=useGizmoInteraction.js.map

package/dist/esm/components/editor/ViewportGizmo/useGizmoInteraction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGizmoInteraction.js","sources":["../../../../../../src/components/editor/ViewportGizmo/useGizmoInteraction.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAyCA;AAEA;AACA;AAEM;AAGJ;;AAiBA;;AAEA;AACA;AACA;;;;AAQA;AAEA;AAEI;AACA;;AACA;;AAEF;AAIF;;;AAII;AACA;;;AAIA;AACA;AACA;AACA;;AAEA;;AAGA;;AAEF;;;;;;;;;AAUC;AAGH;AAEI;AACA;;AAEA;;;;;;AAOE;AACE;;AAGF;AACE;;;AAIE;AACA;;;;AAMJ;;;;;;;AAOF;;;;AAKE;;AACK;AACL;;;AAEA;;;AAEA;;AAEJ;;;;;;;;;;;;;AAcC;AAGH;AAEI;AACA;;AAEA;AACE;;AAEA;AAEA;;AAEE;;;;;AAIA;AASA;;;;;AAIE;AACA;AAAU;;;;AAGV;AACA;AAAU;;;;AAIlB;;;;;;;;;;;;AAaC;AAGH;AAEI;;AAEA;;;AAIA;AACE;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;;;;;AAKQ;;;;;;AAMR;;AAEI;;;AAGI;;;;;;AAMR;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;AACA;;;;;;;;AASJ;;;;;;;;;;AAWC;;;;AAMD;;;;;AAKC;;AAEL;;"}

package/dist/esm/components/editor/ViewportGizmo/useGizmoRenderer.js

@@ -0,0 +1,191 @@
+"use client";
+import { useCallback } from 'react';
+import { resolveCanvasTheme } from '../../primitives/canvas/canvasTheme.js';
+import { useCanvasRenderer } from '../../primitives/canvas/useCanvasRenderer.js';
+import '../../primitives/canvas/CanvasContainer.js';
+import { projectAxes } from './gizmoMath.js';
+
+const SIZE_PRESETS = {
+    sm: {
+        labelFontSize: 9,
+        fontWeight: 600,
+        armWidthPositive: 1.5,
+        armWidthNegative: 0.75,
+        tipRadius: 4,
+        tipHoverRadius: 5,
+        originRadius: 4,
+    },
+    md: {
+        labelFontSize: 11,
+        fontWeight: 600,
+        armWidthPositive: 2.5,
+        armWidthNegative: 1,
+        tipRadius: 5,
+        tipHoverRadius: 7,
+        originRadius: 5,
+    },
+    lg: {
+        labelFontSize: 13,
+        fontWeight: 600,
+        armWidthPositive: 3,
+        armWidthNegative: 1.5,
+        tipRadius: 6,
+        tipHoverRadius: 8,
+        originRadius: 6,
+    },
+};
+// ─── Default Axis Colors ───
+const AXIS_COLORS = {
+    x: '#E63946',
+    y: '#6AA84F',
+    z: '#4A86C8',
+};
+function useGizmoRenderer(options) {
+    const { canvasRef, orientation, diameter, upAxis, size, axisColors, axisLabels, axisVisible, showLabels, showNegativeAxes, showOrbitRing, showOriginHandle, background, disabled, isDragging, hoveredRegion, } = options;
+    const draw = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+        const rect = canvas.getBoundingClientRect();
+        const w = rect.width;
+        const h = rect.height;
+        if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+            canvas.width = w * dpr;
+            canvas.height = h * dpr;
+            ctx.scale(dpr, dpr);
+        }
+        else {
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        }
+        const theme = resolveCanvasTheme(canvas);
+        const preset = SIZE_PRESETS[size];
+        const opacity = disabled ? 0.4 : 1;
+        const center = { x: w / 2, y: h / 2 };
+        const armLength = (diameter / 2) * 0.65;
+        // 1. Clear / background
+        ctx.clearRect(0, 0, w, h);
+        if (background === 'subtle') {
+            ctx.globalAlpha = opacity * 0.15;
+            ctx.fillStyle = theme.backgroundSecondary;
+            ctx.beginPath();
+            ctx.arc(center.x, center.y, diameter / 2, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        else if (background === 'solid') {
+            ctx.globalAlpha = opacity;
+            ctx.fillStyle = theme.backgroundSecondary;
+            ctx.fillRect(0, 0, w, h);
+        }
+        ctx.globalAlpha = opacity;
+        // 2. Orbit ring
+        if (showOrbitRing) {
+            ctx.strokeStyle = theme.borderDefault;
+            ctx.lineWidth = 1;
+            ctx.globalAlpha = opacity * 0.3;
+            ctx.beginPath();
+            ctx.arc(center.x, center.y, armLength * 1.1, 0, Math.PI * 2);
+            ctx.stroke();
+            ctx.globalAlpha = opacity;
+        }
+        // 3. Draw arms — depth sorted (furthest first = painter's algorithm)
+        const arms = projectAxes(orientation, center, armLength, upAxis);
+        for (const arm of arms) {
+            if (!axisVisible[arm.axis])
+                continue;
+            if (!arm.positive && !showNegativeAxes)
+                continue;
+            const color = axisColors[arm.axis] ?? AXIS_COLORS[arm.axis] ?? '#888';
+            const isHovered = hoveredRegion.axis === arm.axis &&
+                ((arm.positive && hoveredRegion.type === 'axis-positive') ||
+                    (!arm.positive && hoveredRegion.type === 'axis-negative'));
+            const alpha = arm.positive ? 1.0 : 0.35;
+            const lineWidth = arm.positive
+                ? preset.armWidthPositive
+                : preset.armWidthNegative;
+            // Draw arm line
+            ctx.globalAlpha = opacity * alpha;
+            ctx.strokeStyle = color;
+            ctx.lineWidth = lineWidth;
+            ctx.lineCap = 'round';
+            ctx.beginPath();
+            ctx.moveTo(center.x, center.y);
+            ctx.lineTo(arm.screenX, arm.screenY);
+            ctx.stroke();
+            // Draw tip handle (positive arms only)
+            if (arm.positive) {
+                const tipR = isHovered ? preset.tipHoverRadius : preset.tipRadius;
+                ctx.globalAlpha = opacity;
+                ctx.fillStyle = color;
+                ctx.beginPath();
+                ctx.arc(arm.screenX, arm.screenY, tipR, 0, Math.PI * 2);
+                ctx.fill();
+                // Draw label
+                if (showLabels) {
+                    const label = axisLabels[arm.axis] ?? arm.axis.toUpperCase();
+                    const labelOffset = tipR + preset.labelFontSize * 0.6;
+                    // Position label outward from center
+                    const dx = arm.screenX - center.x;
+                    const dy = arm.screenY - center.y;
+                    const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+                    const nx = dx / dist;
+                    const ny = dy / dist;
+                    const lx = arm.screenX + nx * labelOffset;
+                    const ly = arm.screenY + ny * labelOffset;
+                    ctx.globalAlpha = opacity;
+                    ctx.fillStyle = color;
+                    ctx.font = `${preset.fontWeight} ${preset.labelFontSize}px sans-serif`;
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
+                    ctx.fillText(label, lx, ly);
+                }
+            }
+        }
+        // 4. Origin handle
+        if (showOriginHandle) {
+            const isOriginHovered = hoveredRegion.type === 'origin';
+            const originR = isOriginHovered
+                ? preset.originRadius + 1.5
+                : preset.originRadius;
+            ctx.globalAlpha = opacity * 0.6;
+            ctx.fillStyle = theme.textSecondary;
+            ctx.beginPath();
+            ctx.arc(center.x, center.y, originR, 0, Math.PI * 2);
+            ctx.fill();
+            // Border ring
+            ctx.globalAlpha = opacity * 0.3;
+            ctx.strokeStyle = theme.textMuted;
+            ctx.lineWidth = 1;
+            ctx.stroke();
+        }
+        ctx.globalAlpha = 1;
+    }, [
+        canvasRef,
+        orientation,
+        diameter,
+        upAxis,
+        size,
+        axisColors,
+        axisLabels,
+        axisVisible,
+        showLabels,
+        showNegativeAxes,
+        showOrbitRing,
+        showOriginHandle,
+        background,
+        disabled,
+        isDragging,
+        hoveredRegion,
+    ]);
+    useCanvasRenderer({
+        draw,
+        deps: [draw],
+        paused: false,
+    });
+}
+
+export { AXIS_COLORS, useGizmoRenderer };
+//# sourceMappingURL=useGizmoRenderer.js.map

package/dist/esm/components/editor/ViewportGizmo/useGizmoRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGizmoRenderer.js","sources":["../../../../../../src/components/editor/ViewportGizmo/useGizmoRenderer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AA6BA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;AAGH;AAEA;AACE;AACA;AACA;;AAwBI;AACJ;AAmBA;AACE;AACA;;;AAGA;;AAEA;AAEA;AACA;AACA;AAEA;AACE;AACA;AACA;;;AAEA;;AAGF;AACA;;AAEA;;;;AAMA;AACE;AACA;;;;;AAIK;AACL;AACA;;;AAIF;;;AAIE;AACA;AACA;;;;AAIA;;;AAIF;AAEA;AACE;;AACA;;AAEA;;;AAII;AAEJ;AACA;;AAEE;;AAGF;AACA;AACA;AACA;;;;;;AAOA;AACE;AACA;AACA;;;;;;AAOE;;;;;AAMA;AACA;AACA;;;AAIA;AACA;AACA;AACA;AACA;;;;;;;AAQJ;;AAEE;AACA;AAEF;AACA;;;;;AAMA;AACA;AACA;;;AAIF;AACF;;;;;;;;;;;;;;;;;AAiBC;AAED;;;AAGE;AACD;AACH;;"}

package/dist/esm/components/feedback/Dialog/Dialog.css.js

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/feedback/Dialog/Dialog.css.ts.vanilla-BrXTOHwS.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var DIALOG_ANIMATION_MS = 200;
+var dialogBodyStyle = 'Dialog_dialogBodyStyle__ickl0cl';
+var dialogCloseButtonStyle = 'Dialog_dialogCloseButtonStyle__ickl0ck';
+var dialogDescriptionStyle = 'Dialog_dialogDescriptionStyle__ickl0cj';
+var dialogFooterRecipe = createRuntimeFn({defaultClassName:'Dialog_dialogFooterRecipe__ickl0cm',variantClassNames:{align:{left:'Dialog_dialogFooterRecipe_align_left__ickl0cn',center:'Dialog_dialogFooterRecipe_align_center__ickl0co',right:'Dialog_dialogFooterRecipe_align_right__ickl0cp','space-between':'Dialog_dialogFooterRecipe_align_space-between__ickl0cq'}},defaultVariants:{align:'right'},compoundVariants:[]});
+var dialogHeaderContentStyle = 'Dialog_dialogHeaderContentStyle__ickl0ch';
+var dialogHeaderStyle = 'Dialog_dialogHeaderStyle__ickl0cg';
+var dialogPanelRecipe = createRuntimeFn({defaultClassName:'Dialog_dialogPanelBase__ickl0c7',variantClassNames:{size:{sm:'Dialog_dialogPanelRecipe_size_sm__ickl0c9',md:'Dialog_dialogPanelRecipe_size_md__ickl0ca',lg:'Dialog_dialogPanelRecipe_size_lg__ickl0cb',xl:'Dialog_dialogPanelRecipe_size_xl__ickl0cc',fullscreen:'Dialog_dialogPanelRecipe_size_fullscreen__ickl0cd'},closing:{true:'Dialog_dialogPanelRecipe_closing_true__ickl0ce',false:'Dialog_dialogPanelRecipe_closing_false__ickl0cf'}},defaultVariants:{size:'md',closing:false},compoundVariants:[]});
+var dialogTitleStyle = 'Dialog_dialogTitleStyle__ickl0ci';
+var overlayRecipe = createRuntimeFn({defaultClassName:'Dialog_overlayRecipe__ickl0c4',variantClassNames:{closing:{true:'Dialog_overlayRecipe_closing_true__ickl0c5',false:'Dialog_overlayRecipe_closing_false__ickl0c6'}},defaultVariants:{closing:false},compoundVariants:[]});
+
+export { DIALOG_ANIMATION_MS, dialogBodyStyle, dialogCloseButtonStyle, dialogDescriptionStyle, dialogFooterRecipe, dialogHeaderContentStyle, dialogHeaderStyle, dialogPanelRecipe, dialogTitleStyle, overlayRecipe };
+//# sourceMappingURL=Dialog.css.js.map

package/dist/esm/components/feedback/Dialog/Dialog.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/esm/components/feedback/Dialog/Dialog.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useRef, useCallback, createContext, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { overlayRecipe, dialogPanelRecipe } from './Dialog.css.js';
+import { useDialogAnimation } from './useDialogAnimation.js';
+import { useFocusTrap } from './useFocusTrap.js';
+import { cx } from '../../../utils/cx.js';
+
+// --- Context ---
+const DialogContext = /*#__PURE__*/ createContext(null);
+function useDialogContext() {
+    const ctx = useContext(DialogContext);
+    if (!ctx) {
+        throw new Error('Dialog sub-components must be used within a <Dialog> component');
+    }
+    return ctx;
+}
+// --- Component ---
+/**
+ * Dialog component for modal overlays in editor interfaces.
+ *
+ * Renders an accessible modal dialog with overlay, focus trap,
+ * and keyboard support. Compound component pattern: use with
+ * DialogHeader, DialogBody, DialogFooter, and DialogClose.
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={isOpen} onClose={() => setIsOpen(false)} title="Confirm">
+ *   <DialogHeader>Confirm Action</DialogHeader>
+ *   <DialogBody>Are you sure?</DialogBody>
+ *   <DialogFooter align="right">
+ *     <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+ *     <Button variant="filled">Confirm</Button>
+ *   </DialogFooter>
+ * </Dialog>
+ * ```
+ */
+const Dialog = ({ open, onClose, size = 'md', title, description, closeOnOverlayClick = true, closeOnEscape = true, showOverlay = true, trapFocus = true, initialFocusRef, portal = true, children, className, style, testId, id, ref, ...rest }) => {
+    const autoId = useId();
+    const titleId = `dialog-title-${autoId}`;
+    const descriptionId = `dialog-desc-${autoId}`;
+    const panelRef = useRef(null);
+    const { mounted, closing } = useDialogAnimation({
+        open,
+        panelRef,
+        initialFocusRef,
+    });
+    const handleFocusTrap = useFocusTrap({
+        containerRef: panelRef,
+        enabled: trapFocus,
+    });
+    const handleKeyDown = useCallback((e) => {
+        // Escape handler — inline instead of global document listener
+        if (closeOnEscape && e.key === 'Escape') {
+            e.stopPropagation();
+            onClose();
+            return;
+        }
+        // Focus trap
+        handleFocusTrap(e);
+    }, [closeOnEscape, onClose, handleFocusTrap]);
+    const handleOverlayClick = useCallback((e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget) {
+            onClose();
+        }
+    }, [closeOnOverlayClick, onClose]);
+    if (!mounted)
+        return null;
+    const contextValue = {
+        onClose,
+        titleId,
+        descriptionId,
+    };
+    const dialogContent = (jsxs(DialogContext.Provider, { value: contextValue, children: [showOverlay && (jsx("div", { className: overlayRecipe({ closing }), onClick: handleOverlayClick, "data-testid": testId ? `${testId}-overlay` : undefined })), jsxs("div", { ref: (node) => {
+                    panelRef.current =
+                        node;
+                    if (typeof ref === 'function') {
+                        ref(node);
+                    }
+                    else if (ref) {
+                        ref.current =
+                            node;
+                    }
+                }, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, className: cx(dialogPanelRecipe({ size, closing }), className), style: style, id: id, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [title && (jsx("span", { id: titleId, style: { display: 'none' }, children: title })), description && (jsx("span", { id: descriptionId, style: { display: 'none' }, children: description })), children] })] }));
+    if (portal) {
+        return createPortal(dialogContent, document.body);
+    }
+    return dialogContent;
+};
+Dialog.displayName = 'Dialog';
+
+export { Dialog, useDialogContext };
+//# sourceMappingURL=Dialog.js.map

package/dist/esm/components/feedback/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../../../../src/components/feedback/Dialog/Dialog.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAgBA;AAEA;;AAKE;;AAEE;;AAIF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAoBL;AACA;AACA;AACA;AAEA;;;;AAIC;;AAGC;AACA;AACD;AAED;;;;AAKM;;;;;;AASN;;AAGM;;AAEJ;AAIF;AAAc;AAEd;;;;;;AAiBS;AACC;AACF;;;;AAGG;AACC;;;;;;AAmCZ;AACF;AAEA;;"}

package/dist/esm/components/feedback/Dialog/DialogBody.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '../../../utils/cx.js';
+import { dialogBodyStyle } from './Dialog.css.js';
+
+// --- Component ---
+/**
+ * DialogBody renders the scrollable content area of a Dialog.
+ *
+ * @example
+ * ```tsx
+ * <DialogBody>
+ *   <p>Dialog content goes here.</p>
+ * </DialogBody>
+ * ```
+ */
+const DialogBody = ({ children, className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(dialogBodyStyle, className), style: style, "data-testid": testId, ...rest, children: children }));
+};
+DialogBody.displayName = 'DialogBody';
+
+export { DialogBody };
+//# sourceMappingURL=DialogBody.js.map

package/dist/esm/components/feedback/Dialog/DialogBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogBody.js","sources":["../../../../../../src/components/feedback/Dialog/DialogBody.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;AAEA;;;;;;;;;AASG;;;AAoBH;AAEA;;"}

package/dist/esm/components/feedback/Dialog/DialogClose.js

@@ -0,0 +1,27 @@
+"use client";
+import React from 'react';
+import { useDialogContext } from './Dialog.js';
+
+/**
+ * DialogClose wraps a child element and adds onClick to close the dialog.
+ *
+ * @example
+ * ```tsx
+ * <DialogClose>
+ *   <Button>Cancel</Button>
+ * </DialogClose>
+ * ```
+ */
+const DialogClose = ({ children }) => {
+    const { onClose } = useDialogContext();
+    return React.cloneElement(children, {
+        onClick: (e) => {
+            children.props.onClick?.(e);
+            onClose();
+        },
+    });
+};
+DialogClose.displayName = 'DialogClose';
+
+export { DialogClose };
+//# sourceMappingURL=DialogClose.js.map

package/dist/esm/components/feedback/Dialog/DialogClose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogClose.js","sources":["../../../../../../src/components/feedback/Dialog/DialogClose.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAUA;;;;;;;;;AASG;;AAED;AAEA;AACE;;AAEE;;AAEH;AACH;AAEA;;"}

package/dist/esm/components/feedback/Dialog/DialogFooter.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '../../../utils/cx.js';
+import { dialogFooterRecipe } from './Dialog.css.js';
+
+// --- Component ---
+/**
+ * DialogFooter renders the action area at the bottom of a Dialog.
+ *
+ * @example
+ * ```tsx
+ * <DialogFooter align="right">
+ *   <Button onClick={onCancel}>Cancel</Button>
+ *   <Button variant="filled" onClick={onConfirm}>Confirm</Button>
+ * </DialogFooter>
+ * ```
+ */
+const DialogFooter = ({ children, align = 'right', className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(dialogFooterRecipe({ align }), className), style: style, "data-testid": testId, ...rest, children: children }));
+};
+DialogFooter.displayName = 'DialogFooter';
+
+export { DialogFooter };
+//# sourceMappingURL=DialogFooter.js.map

package/dist/esm/components/feedback/Dialog/DialogFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFooter.js","sources":["../../../../../../src/components/feedback/Dialog/DialogFooter.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;AAEA;;;;;;;;;;AAUG;AACI;AASL;AAWF;AAEA;;"}