entangle-ui 0.6.3 → 0.8.0

package/dist/esm/components/editor/ChatPanel/ChatPanel.js

@@ -2,10 +2,22 @@
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { cx } from '../../../utils/cx.js';
-import { chatPanelRecipe } from './ChatPanel.css.js';
+import { chatPanelRecipe, messageMaxWidthVarName } from './ChatPanel.css.js';
 
-const ChatPanel = /*#__PURE__*/ React.memo(({ density = 'comfortable', children, className, style, testId, ref, ...rest }) => {
-    return (jsx("div", { ref: ref, className: cx(chatPanelRecipe({ density }), className), style: style, "data-testid": testId, ...rest, children: children }));
+function resolveMaxWidth(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === 'number' ? `${value}px` : value;
+}
+const ChatPanel = /*#__PURE__*/ React.memo(({ density = 'comfortable', messageMaxWidth, children, className, style, testId, ref, ...rest }) => {
+    const resolvedMaxWidth = resolveMaxWidth(messageMaxWidth);
+    const rootStyle = resolvedMaxWidth
+        ? {
+            [messageMaxWidthVarName]: resolvedMaxWidth,
+            ...style,
+        }
+        : (style ?? {});
+    return (jsx("div", { ref: ref, className: cx(chatPanelRecipe({ density }), className), style: rootStyle, "data-testid": testId, ...rest, children: children }));
 });
 ChatPanel.displayName = 'ChatPanel';
 

package/dist/esm/components/editor/ChatPanel/ChatPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOO;AAUH;AAWF;AAGF;;"}
+{"version":3,"file":"ChatPanel.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;AAG2B;AACzB;AACF;AAEO;AAWH;;AAEE;;AAEI;AACuB;AAC3B;AAEF;AAWF;AAGF;;"}

package/dist/esm/components/editor/ChatPanel/useChatInput.js

@@ -2,7 +2,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 
 function useChatInput(options = {}) {
-    const { submitKey = 'enter', onSubmit, maxLines = 6 } = options;
+    const { submitKey = 'enter', onSubmit, maxLines = 6, attachmentsCount = 0, } = options;
     const [value, setValue] = useState('');
     const textareaRef = useRef(null);
     const autoResize = useCallback(() => {
@@ -40,12 +40,12 @@ function useChatInput(options = {}) {
         if (isSubmit) {
             event.preventDefault();
             const trimmed = value.trim();
-            if (trimmed) {
+            if (trimmed || attachmentsCount > 0) {
                 onSubmit?.(trimmed);
                 clear();
             }
         }
-    }, [submitKey, value, onSubmit, clear]);
+    }, [submitKey, value, onSubmit, clear, attachmentsCount]);
     return {
         value,
         setValue,

package/dist/esm/components/editor/ChatPanel/useChatInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChatInput.js","sources":["../../../../../../src/components/editor/ChatPanel/useChatInput.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQM;AAGJ;;AAEA;AAEA;AACE;AACA;;;AAGA;AAEA;AAIA;AACA;;AAGF;;;AAIE;AACF;AAEA;;AAEE;;AAEE;;;AAIJ;AAEI;;AAKJ;AAEI;AAEI;;;;AAIA;;;AAIF;;AAEE;AACA;;;;;;;;;;;;AAeV;;"}
+{"version":3,"file":"useChatInput.js","sources":["../../../../../../src/components/editor/ChatPanel/useChatInput.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQM;AAGJ;;AAOA;AAEA;AACE;AACA;;;AAGA;AAEA;AAIA;AACA;;AAGF;;;AAIE;AACF;AAEA;;AAEE;;AAEE;;;AAIJ;AAEI;;AAKJ;AAEI;AAEI;;;;AAIA;;;AAIF;AACA;AACE;AACA;;;AAGN;;;;;;;;;AAYJ;;"}

package/dist/esm/components/editor/ChatPanel/useChatScroll.js

@@ -1,12 +1,24 @@
 "use client";
-import { useRef, useState, useCallback, useEffect } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
 
 function useChatScroll(options) {
     const { messages, enabled = true, threshold = 100 } = options;
     const scrollContainerRef = useRef(null);
+    const scrollContentRef = useRef(null);
     const [isAtBottom, setIsAtBottom] = useState(true);
     const [hasNewMessages, setHasNewMessages] = useState(false);
     const prevMessageCountRef = useRef(messages.length);
+    const isAtBottomRef = useRef(isAtBottom);
+    const enabledRef = useRef(enabled);
+    const lastContentHeightRef = useRef(0);
+    // Keep refs in sync for use inside observer callbacks.
+    useEffect(() => {
+        isAtBottomRef.current = isAtBottom;
+    }, [isAtBottom]);
+    useEffect(() => {
+        enabledRef.current = enabled;
+    }, [enabled]);
     const checkIfAtBottom = useCallback(() => {
         const container = scrollContainerRef.current;
         if (!container)
@@ -25,6 +37,15 @@ function useChatScroll(options) {
         setIsAtBottom(true);
         setHasNewMessages(false);
     }, []);
+    const scrollTo = useCallback((opts) => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        container.scrollTo(opts);
+    }, []);
+    const scrollToElement = useCallback((el, opts) => {
+        el.scrollIntoView(opts);
+    }, []);
     // Listen for scroll events to track position
     useEffect(() => {
         const container = scrollContainerRef.current;
@@ -40,7 +61,34 @@ function useChatScroll(options) {
         container.addEventListener('scroll', handleScroll, { passive: true });
         return () => container.removeEventListener('scroll', handleScroll);
     }, [checkIfAtBottom]);
-    // Auto-scroll or show indicator on new messages
+    // Seed the last-height baseline once the content node mounts so growth is
+    // measured against the initial height, not zero.
+    useEffect(() => {
+        const content = scrollContentRef.current;
+        if (!content)
+            return;
+        lastContentHeightRef.current = content.getBoundingClientRect().height;
+    }, []);
+    // Observe content growth — keeps the list pinned to the bottom during streaming
+    // (when message text grows but `messages.length` stays constant).
+    useResizeObserver(scrollContentRef, entry => {
+        const nextHeight = entry.contentRect.height;
+        const prevHeight = lastContentHeightRef.current;
+        lastContentHeightRef.current = nextHeight;
+        // Only react to growth — shrinks shouldn't force a scroll jump.
+        if (nextHeight <= prevHeight)
+            return;
+        if (!enabledRef.current)
+            return;
+        if (isAtBottomRef.current) {
+            scrollToBottom('auto');
+        }
+        else {
+            setHasNewMessages(true);
+        }
+    });
+    // Auto-scroll or show indicator on new messages. Fallback for mounts and
+    // cleared lists where content height may not grow monotonically.
     useEffect(() => {
         const currentCount = messages.length;
         const prevCount = prevMessageCountRef.current;
@@ -61,9 +109,12 @@ function useChatScroll(options) {
     }, [messages.length, enabled, isAtBottom, scrollToBottom]);
     return {
         scrollContainerRef,
+        scrollContentRef,
         isAtBottom,
         hasNewMessages,
         scrollToBottom,
+        scrollTo,
+        scrollToElement,
     };
 }
 

package/dist/esm/components/editor/ChatPanel/useChatScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChatScroll.js","sources":["../../../../../../src/components/editor/ChatPanel/useChatScroll.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQM;AAGJ;AAEA;;;;AAKA;AACE;AACA;AAAgB;;AAGhB;AACF;;AAGE;AACA;;;;;AAKC;;;;;;AAOD;AACA;;;AAGE;;;;;AAKF;AAEA;;AAEF;;;AAIE;AACA;AACA;;;AAIA;;;;;AAKI;AACF;;;;;AAIJ;;;;;;;AAQF;;"}
+{"version":3,"file":"useChatScroll.js","sources":["../../../../../../src/components/editor/ChatPanel/useChatScroll.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AASM;AAGJ;AAEA;AACA;;;;AAIA;AACA;AACA;;;AAIE;AACF;;AAEE;AACF;AAEA;AACE;AACA;AAAgB;;AAGhB;AACF;;AAGE;AACA;;;;;AAKC;;;;AAKH;AACE;AACA;;AACA;;;AAKE;;;;AAOF;AACA;;;AAGE;;;;;AAKF;AAEA;;AAEF;;;;AAKE;AACA;;;;;;AAMF;AACE;AACA;AACA;;;;;;AAMA;;;;;;AAKF;;;;AAKE;AACA;AACA;;;AAIA;;;;;AAKI;AACF;;;;;AAIJ;;;;;;;;;;AAWF;;"}

package/dist/esm/components/editor/PropertyInspector/PropertySection.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/editor/PropertyInspector/PropertySection.css.ts.vanilla-DJBtY_xk.css';
+import './../../../assets/src/components/editor/PropertyInspector/PropertySection.css.ts.vanilla-DK12opZc.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var actionsArea = 'PropertySection_actionsArea__1xiu0w6d';

package/dist/esm/components/editor/TransformControl/TransformControl.css.js

@@ -0,0 +1,11 @@
+import './../../../assets/src/components/editor/TransformControl/TransformControl.css.ts.vanilla-H-iW-T0s.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var lockButtonRecipe = createRuntimeFn({defaultClassName:'TransformControl_lockButtonRecipe__nv79ki7',variantClassNames:{active:{true:'TransformControl_lockButtonRecipe_active_true__nv79ki8',false:'TransformControl_lockButtonRecipe_active_false__nv79ki9'},size:{sm:'TransformControl_lockButtonRecipe_size_sm__nv79kia',md:'TransformControl_lockButtonRecipe_size_md__nv79kib',lg:'TransformControl_lockButtonRecipe_size_lg__nv79kic'}},defaultVariants:{active:true,size:'sm'},compoundVariants:[]});
+var lockSpacerRecipe = createRuntimeFn({defaultClassName:'TransformControl_lockSpacerRecipe__nv79ki3',variantClassNames:{size:{sm:'TransformControl_lockSpacerRecipe_size_sm__nv79ki4',md:'TransformControl_lockSpacerRecipe_size_md__nv79ki5',lg:'TransformControl_lockSpacerRecipe_size_lg__nv79ki6'}},defaultVariants:{size:'sm'},compoundVariants:[]});
+var rowInner = 'TransformControl_rowInner__nv79ki1';
+var rowVectorWrapper = 'TransformControl_rowVectorWrapper__nv79ki2';
+var transformRoot = 'TransformControl_transformRoot__nv79ki0';
+
+export { lockButtonRecipe, lockSpacerRecipe, rowInner, rowVectorWrapper, transformRoot };
+//# sourceMappingURL=TransformControl.css.js.map

package/dist/esm/components/editor/TransformControl/TransformControl.css.js.map

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

package/dist/esm/components/editor/TransformControl/TransformControl.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { VectorInput } from '../../controls/VectorInput/VectorInput.js';
+import { Select } from '../../controls/Select/Select.js';
+import { LockIcon } from '../../Icons/LockIcon.js';
+import { UnlockIcon } from '../../Icons/UnlockIcon.js';
+import { PropertyRow } from '../PropertyInspector/PropertyRow.js';
+import { rowInner, lockSpacerRecipe, rowVectorWrapper, lockButtonRecipe, transformRoot } from './TransformControl.css.js';
+
+// --- Defaults ---
+const DEFAULT_TRANSFORM = {
+    position: { x: 0, y: 0, z: 0 },
+    rotation: { x: 0, y: 0, z: 0 },
+    scale: { x: 1, y: 1, z: 1 },
+};
+const DEFAULT_COORDINATE_SPACE_OPTIONS = [
+    { value: 'local', label: 'Local' },
+    { value: 'world', label: 'World' },
+    { value: 'parent', label: 'Parent' },
+];
+const DEFAULT_LABELS = {
+    position: 'Position',
+    rotation: 'Rotation',
+    scale: 'Scale',
+    coordinateSpace: 'Space',
+};
+const DEFAULT_PRECISION = { position: 3, rotation: 1, scale: 3 };
+const DEFAULT_STEP = { position: 0.1, rotation: 1, scale: 0.01 };
+const DEFAULT_UNITS = { position: 'm', rotation: '°', scale: '' };
+// Narrow label column so the three axis inputs (with units) have room
+// to render without clipping inside typical 320–400 px property panels.
+const ROW_SPLIT_RATIO = [25, 75];
+// --- Helpers ---
+const vecToArray = (v) => [v.x, v.y, v.z];
+const arrayToVec = (arr) => ({
+    x: arr[0] ?? 0,
+    y: arr[1] ?? 0,
+    z: arr[2] ?? 0,
+});
+// --- Component ---
+/**
+ * The canonical position / rotation / scale property control for 3D
+ * editor interfaces. Composes `VectorInput` (per row) with `Select`
+ * (coordinate space) and `PropertyRow` (layout) into one high-level
+ * component, mirroring the transform widget found in Blender, Unity and
+ * Unreal.
+ *
+ * Three independent atoms — `value`, `coordinateSpace`, `linkedScale` —
+ * each support controlled and uncontrolled usage.
+ *
+ * Changing the coordinate-space dropdown does NOT transform the numeric
+ * values. The component is purely a UI surface; the consumer's editor
+ * logic is responsible for re-projecting values when the space changes.
+ *
+ * The component intentionally renders no `PropertySection` wrapper — slot
+ * it inside an existing section in your panel.
+ *
+ * @example
+ * ```tsx
+ * <PropertySection title="Transform">
+ *   <TransformControl
+ *     value={transform}
+ *     onChange={setTransform}
+ *     showReset
+ *   />
+ * </PropertySection>
+ * ```
+ */
+const TransformControl = ({ value: valueProp, defaultValue, onChange, coordinateSpace: coordinateSpaceProp, defaultCoordinateSpace, onCoordinateSpaceChange, coordinateSpaceOptions, linkedScale: linkedScaleProp, defaultLinkedScale, onLinkedScaleChange, show, labels, precision, step, units, size = 'sm', disabled = false, showReset = false, className, style, testId, ref, ...rest }) => {
+    const [value, setValue] = useControlledState({
+        value: valueProp,
+        defaultValue,
+        onChange,
+        fallback: DEFAULT_TRANSFORM,
+    });
+    const [coordinateSpace, setCoordinateSpace] = useControlledState({
+        value: coordinateSpaceProp,
+        defaultValue: defaultCoordinateSpace,
+        onChange: onCoordinateSpaceChange,
+        fallback: 'local',
+    });
+    const [linkedScale, setLinkedScale] = useControlledState({
+        value: linkedScaleProp,
+        defaultValue: defaultLinkedScale,
+        onChange: onLinkedScaleChange,
+        fallback: true,
+    });
+    const showPosition = show?.position !== false;
+    const showRotation = show?.rotation !== false;
+    const showScale = show?.scale !== false;
+    const showCoordinateSpace = showPosition || showRotation;
+    const resolvedLabels = {
+        position: labels?.position ?? DEFAULT_LABELS.position,
+        rotation: labels?.rotation ?? DEFAULT_LABELS.rotation,
+        scale: labels?.scale ?? DEFAULT_LABELS.scale,
+        coordinateSpace: labels?.coordinateSpace ?? DEFAULT_LABELS.coordinateSpace,
+    };
+    const resolvedPrecision = {
+        position: precision?.position ?? DEFAULT_PRECISION.position,
+        rotation: precision?.rotation ?? DEFAULT_PRECISION.rotation,
+        scale: precision?.scale ?? DEFAULT_PRECISION.scale,
+    };
+    const resolvedStep = {
+        position: step?.position ?? DEFAULT_STEP.position,
+        rotation: step?.rotation ?? DEFAULT_STEP.rotation,
+        scale: step?.scale ?? DEFAULT_STEP.scale,
+    };
+    const resolvedUnits = {
+        position: units?.position ?? DEFAULT_UNITS.position,
+        rotation: units?.rotation ?? DEFAULT_UNITS.rotation,
+        scale: units?.scale ?? DEFAULT_UNITS.scale,
+    };
+    const resolvedSpaceOptions = useMemo(() => coordinateSpaceOptions ?? DEFAULT_COORDINATE_SPACE_OPTIONS, [coordinateSpaceOptions]);
+    // --- Per-row change handlers ---
+    const handlePositionChange = useCallback((next) => {
+        setValue(prev => ({ ...prev, position: arrayToVec(next) }));
+    }, [setValue]);
+    const handleRotationChange = useCallback((next) => {
+        setValue(prev => ({ ...prev, rotation: arrayToVec(next) }));
+    }, [setValue]);
+    const handleScaleChange = useCallback((next, axisIndex) => {
+        const nextScale = arrayToVec(next);
+        if (linkedScale) {
+            const v = next[axisIndex] ?? 0;
+            setValue(prev => ({ ...prev, scale: { x: v, y: v, z: v } }));
+        }
+        else {
+            setValue(prev => ({ ...prev, scale: nextScale }));
+        }
+    }, [linkedScale, setValue]);
+    const handleLockToggle = useCallback(() => {
+        setLinkedScale(prev => !prev);
+    }, [setLinkedScale]);
+    const handleSpaceChange = useCallback((next) => {
+        if (next == null)
+            return;
+        setCoordinateSpace(next);
+    }, [setCoordinateSpace]);
+    // --- Reset handlers ---
+    const handlePositionReset = useCallback(() => {
+        setValue(prev => ({ ...prev, position: { x: 0, y: 0, z: 0 } }));
+    }, [setValue]);
+    const handleRotationReset = useCallback(() => {
+        setValue(prev => ({ ...prev, rotation: { x: 0, y: 0, z: 0 } }));
+    }, [setValue]);
+    const handleScaleReset = useCallback(() => {
+        setValue(prev => ({ ...prev, scale: { x: 1, y: 1, z: 1 } }));
+    }, [setValue]);
+    // --- Render ---
+    return (jsxs("div", { ref: ref, className: cx(transformRoot, className), style: style, "data-testid": testId, ...rest, children: [showCoordinateSpace && (jsx(PropertyRow, { label: resolvedLabels.coordinateSpace, size: size, disabled: disabled, splitRatio: ROW_SPLIT_RATIO, children: jsx(Select, { value: coordinateSpace, options: resolvedSpaceOptions, onChange: handleSpaceChange, size: size, disabled: disabled, "aria-label": resolvedLabels.coordinateSpace }) })), showPosition && (jsx(PropertyRow, { label: resolvedLabels.position, size: size, disabled: disabled, splitRatio: ROW_SPLIT_RATIO, onReset: showReset ? handlePositionReset : undefined, children: jsxs("div", { className: rowInner, children: [jsx("span", { "aria-hidden": "true", className: lockSpacerRecipe({ size }) }), jsx("div", { className: rowVectorWrapper, children: jsx(VectorInput, { value: vecToArray(value.position), onChange: handlePositionChange, dimension: 3, labelPreset: "xyz", colorPreset: "spatial", precision: resolvedPrecision.position, step: resolvedStep.position, unit: resolvedUnits.position, size: size, disabled: disabled, "aria-label": resolvedLabels.position }) })] }) })), showRotation && (jsx(PropertyRow, { label: resolvedLabels.rotation, size: size, disabled: disabled, splitRatio: ROW_SPLIT_RATIO, onReset: showReset ? handleRotationReset : undefined, children: jsxs("div", { className: rowInner, children: [jsx("span", { "aria-hidden": "true", className: lockSpacerRecipe({ size }) }), jsx("div", { className: rowVectorWrapper, children: jsx(VectorInput, { value: vecToArray(value.rotation), onChange: handleRotationChange, dimension: 3, labelPreset: "xyz", colorPreset: "spatial", precision: resolvedPrecision.rotation, step: resolvedStep.rotation, unit: resolvedUnits.rotation, size: size, disabled: disabled, "aria-label": resolvedLabels.rotation }) })] }) })), showScale && (jsx(PropertyRow, { label: resolvedLabels.scale, size: size, disabled: disabled, splitRatio: ROW_SPLIT_RATIO, onReset: showReset ? handleScaleReset : undefined, children: jsxs("div", { className: rowInner, children: [jsx("button", { type: "button", className: lockButtonRecipe({ active: linkedScale, size }), onClick: handleLockToggle, disabled: disabled, "aria-pressed": linkedScale, "aria-label": linkedScale ? 'Unlink scale axes' : 'Link scale axes', title: linkedScale ? 'Linked scale' : 'Unlinked scale', "data-testid": "transform-scale-lock", children: linkedScale ? (jsx(LockIcon, { size: size, decorative: true })) : (jsx(UnlockIcon, { size: size, decorative: true })) }), jsx("div", { className: rowVectorWrapper, children: jsx(VectorInput, { value: vecToArray(value.scale), onChange: handleScaleChange, dimension: 3, labelPreset: "xyz", colorPreset: "spatial", precision: resolvedPrecision.scale, step: resolvedStep.scale, unit: resolvedUnits.scale, size: size, disabled: disabled, "aria-label": resolvedLabels.scale }) })] }) }))] }));
+};
+TransformControl.displayName = 'TransformControl';
+
+export { TransformControl };
+//# sourceMappingURL=TransformControl.js.map

package/dist/esm/components/editor/TransformControl/TransformControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransformControl.js","sources":["../../../../../../src/components/editor/TransformControl/TransformControl.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAyBA;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AAEA;AACE;AACA;AACA;AACD;AAED;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AACI;AAyBL;AACE;;;AAGA;AACD;AAED;AAEI;AACA;AACA;AACA;AACD;AAEH;AACE;AACA;AACA;AACA;AACD;AAED;AACA;AACA;AACA;AAEA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;AAOA;AAEI;AACF;AAIF;AAEI;AACF;;AAME;;;AAGE;;;AAEA;;AAEJ;AAIF;;AAEA;AAEA;;;;AAIE;;AAMF;AACE;AACF;AAEA;AACE;AACF;AAEA;AACE;AACF;;AAIA;AAiIF;AAEA;;"}

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

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/feedback/Alert/Alert.css.ts.vanilla-CRAI-xHx.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var alertActionsRecipe = createRuntimeFn({defaultClassName:'Alert_alertActionsRecipe__156m7fzi',variantClassNames:{align:{left:'Alert_alertActionsRecipe_align_left__156m7fzj',right:'Alert_alertActionsRecipe_align_right__156m7fzk','space-between':'Alert_alertActionsRecipe_align_space-between__156m7fzl'}},defaultVariants:{align:'left'},compoundVariants:[]});
+var alertCloseButtonSolidStyle = 'Alert_alertCloseButtonSolidStyle__156m7fzf';
+var alertCloseColumnStyle = 'Alert_alertCloseColumnStyle__156m7fze';
+var alertColorVar = 'var(--alertColorVar__156m7fz0)';
+var alertContentStyle = 'Alert_alertContentStyle__156m7fzd';
+var alertDescriptionStyle = 'Alert_alertDescriptionStyle__156m7fzh';
+var alertIconSolidStyle = 'Alert_alertIconSolidStyle__156m7fzc';
+var alertIconStyle = 'Alert_alertIconStyle__156m7fzb';
+var alertRecipe = createRuntimeFn({defaultClassName:'Alert_alertRecipe__156m7fz2',variantClassNames:{variant:{info:'Alert_alertRecipe_variant_info__156m7fz3',success:'Alert_alertRecipe_variant_success__156m7fz4',warning:'Alert_alertRecipe_variant_warning__156m7fz5',error:'Alert_alertRecipe_variant_error__156m7fz6',neutral:'Alert_alertRecipe_variant_neutral__156m7fz7'},appearance:{subtle:'Alert_alertRecipe_appearance_subtle__156m7fz8',solid:'Alert_alertRecipe_appearance_solid__156m7fz9',outline:'Alert_alertRecipe_appearance_outline__156m7fza'}},defaultVariants:{variant:'info',appearance:'subtle'},compoundVariants:[]});
+var alertTitleStyle = 'Alert_alertTitleStyle__156m7fzg';
+
+export { alertActionsRecipe, alertCloseButtonSolidStyle, alertCloseColumnStyle, alertColorVar, alertContentStyle, alertDescriptionStyle, alertIconSolidStyle, alertIconStyle, alertRecipe, alertTitleStyle };
+//# sourceMappingURL=Alert.css.js.map

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

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

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

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
+import { vars } from '../../../theme/contract.css.js';
+import { IconButton } from '../../primitives/IconButton/IconButton.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { InfoIcon } from '../../Icons/InfoIcon.js';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { WarningIcon } from '../../Icons/WarningIcon.js';
+import { ErrorIcon } from '../../Icons/ErrorIcon.js';
+import { alertColorVar, alertIconSolidStyle, alertIconStyle, alertContentStyle, alertCloseColumnStyle, alertCloseButtonSolidStyle, alertRecipe } from './Alert.css.js';
+import { AlertTitle } from './AlertTitle.js';
+import { AlertDescription } from './AlertDescription.js';
+import { AlertActions } from './AlertActions.js';
+
+const VARIANT_COLOR = {
+    info: vars.colors.accent.primary,
+    success: vars.colors.accent.success,
+    warning: vars.colors.accent.warning,
+    error: vars.colors.accent.error,
+    neutral: vars.colors.text.muted,
+};
+const VARIANT_ROLE = {
+    info: { role: 'status' },
+    success: { role: 'status' },
+    warning: { role: 'alert' },
+    error: { role: 'alert' },
+    neutral: { role: 'region', ariaLabel: 'Notice' },
+};
+const VARIANT_DEFAULT_ICON = {
+    info: jsx(InfoIcon, { size: "md", decorative: true }),
+    success: jsx(CheckIcon, { size: "md", decorative: true }),
+    warning: jsx(WarningIcon, { size: "md", decorative: true }),
+    error: jsx(ErrorIcon, { size: "md", decorative: true }),
+    neutral: null,
+};
+/**
+ * Persistent inline alert / callout.
+ *
+ * Use for non-transient status messages tied to the surrounding UI — read-only
+ * notices, expired credentials, unsaved-changes banners, etc. For transient
+ * confirmations like "File saved", reach for `useToast` instead.
+ *
+ * Compound API: pair with `<Alert.Title>`, `<Alert.Description>`, and
+ * `<Alert.Actions>` for richer layouts. The same components are also
+ * available as standalone named exports (`AlertTitle`, `AlertDescription`,
+ * `AlertActions`).
+ *
+ * Accessibility: roles are derived from the variant — `alert` for
+ * `error`/`warning`, `status` for `info`/`success`, `region` for `neutral`.
+ * The component never auto-focuses; inline alerts shouldn't grab focus.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="warning" title="Read-only mode">
+ *   Switch to edit mode to make changes.
+ * </Alert>
+ *
+ * <Alert variant="error" onClose={() => setOpen(false)}>
+ *   <Alert.Title>Couldn't reach the server</Alert.Title>
+ *   <Alert.Description>The request timed out.</Alert.Description>
+ *   <Alert.Actions align="right">
+ *     <Button onClick={retry}>Retry</Button>
+ *   </Alert.Actions>
+ * </Alert>
+ * ```
+ */
+const AlertImpl = /*#__PURE__*/ React.memo(({ variant = 'info', appearance = 'subtle', icon = true, onClose, title, children, className, style, testId, 'aria-label': ariaLabelProp, ref, ...rest }) => {
+    const isSolid = appearance === 'solid';
+    const { role, ariaLabel: defaultAriaLabel } = VARIANT_ROLE[variant];
+    const resolvedIcon = icon === false
+        ? null
+        : icon === true
+            ? VARIANT_DEFAULT_ICON[variant]
+            : icon;
+    const inlineVars = assignInlineVars({
+        [alertColorVar]: VARIANT_COLOR[variant],
+    });
+    return (jsxs("div", { ref: ref, role: role, "aria-label": ariaLabelProp ?? defaultAriaLabel, className: cx(alertRecipe({ variant, appearance }), className), style: { ...inlineVars, ...style }, "data-testid": testId, "data-variant": variant, "data-appearance": appearance, ...rest, children: [resolvedIcon ? (jsx("div", { className: cx(alertIconStyle, isSolid && alertIconSolidStyle), "data-alert-icon": "", "aria-hidden": "true", children: resolvedIcon })) : null, jsxs("div", { className: alertContentStyle, children: [title !== undefined && title !== null ? (jsx(AlertTitle, { children: title })) : null, typeof children === 'string' ? (jsx(AlertDescription, { children: children })) : (children)] }), onClose ? (jsx("div", { className: alertCloseColumnStyle, children: jsx(IconButton, { type: "button", "aria-label": "Close alert", variant: "ghost", size: "sm", radius: "sm", onClick: onClose, className: isSolid ? alertCloseButtonSolidStyle : undefined, children: jsx(CloseIcon, { size: "sm", decorative: true }) }) })) : null] }));
+});
+AlertImpl.displayName = 'Alert';
+const Alert = AlertImpl;
+Alert.Title = AlertTitle;
+Alert.Description = AlertDescription;
+Alert.Actions = AlertActions;
+
+export { Alert };
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA0BA;AACE;AACA;AACA;AACA;AACA;;AAGF;AAEI;AACA;AACA;AACA;;;AAIJ;;;;;AAKE;;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AACH;AAeI;AACA;AAEA;AAEI;;AAEE;;;AAIJ;AACD;;AAoDH;AAGF;AAeO;AACP;AACA;AACA;;"}

package/dist/esm/components/feedback/Alert/AlertActions.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { alertActionsRecipe } from './Alert.css.js';
+
+/**
+ * Action-button row for an `Alert`. Lays out children with a horizontal gap
+ * and configurable alignment. Renders only when actions are needed — for
+ * dismissible alerts the close button in the top-right is usually enough.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="error">
+ *   <Alert.Title>Couldn't reach the server</Alert.Title>
+ *   <Alert.Description>The request timed out after 30 seconds.</Alert.Description>
+ *   <Alert.Actions align="right">
+ *     <Button variant="filled" onClick={retry}>Retry</Button>
+ *     <Button onClick={dismiss}>Dismiss</Button>
+ *   </Alert.Actions>
+ * </Alert>
+ * ```
+ */
+const AlertActions = /*#__PURE__*/ React.memo(({ children, align = 'left', className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(alertActionsRecipe({ align }), className), style: style, "data-testid": testId, "data-alert-actions": "", ...rest, children: children }));
+});
+AlertActions.displayName = 'AlertActions';
+
+export { AlertActions };
+//# sourceMappingURL=AlertActions.js.map

package/dist/esm/components/feedback/Alert/AlertActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertActions.js","sources":["../../../../../../src/components/feedback/Alert/AlertActions.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;;;AAgBG;AACI;AAEH;AAYF;AAGF;;"}

package/dist/esm/components/feedback/Alert/AlertDescription.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { alertDescriptionStyle } from './Alert.css.js';
+
+/**
+ * Body text slot for an `Alert`. Most one-line alerts can pass a string as
+ * children to `<Alert>` directly; reach for this when you need to compose
+ * multiple paragraphs or inline elements.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="info">
+ *   <Alert.Title>Heads up</Alert.Title>
+ *   <Alert.Description>
+ *     This editor is read-only. Open the file in edit mode to make changes.
+ *   </Alert.Description>
+ * </Alert>
+ * ```
+ */
+const AlertDescription = /*#__PURE__*/ React.memo(({ children, className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(alertDescriptionStyle, className), style: style, "data-testid": testId, "data-alert-description": "", ...rest, children: children }));
+});
+AlertDescription.displayName = 'AlertDescription';
+
+export { AlertDescription };
+//# sourceMappingURL=AlertDescription.js.map

package/dist/esm/components/feedback/Alert/AlertDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDescription.js","sources":["../../../../../../src/components/feedback/Alert/AlertDescription.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAYF;AAGF;;"}

package/dist/esm/components/feedback/Alert/AlertTitle.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { alertTitleStyle } from './Alert.css.js';
+
+/**
+ * Title slot for an `Alert`. Renders a single line of emphasized text above
+ * the description.
+ *
+ * Equivalent to passing `title` directly on `<Alert>`. Use this form when you
+ * want richer content (links, inline elements) inside the title.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="warning">
+ *   <Alert.Title>Read-only mode</Alert.Title>
+ *   <Alert.Description>Switch to edit to change this file.</Alert.Description>
+ * </Alert>
+ * ```
+ */
+const AlertTitle = /*#__PURE__*/ React.memo(({ children, className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(alertTitleStyle, className), style: style, "data-testid": testId, "data-alert-title": "", ...rest, children: children }));
+});
+AlertTitle.displayName = 'AlertTitle';
+
+export { AlertTitle };
+//# sourceMappingURL=AlertTitle.js.map

package/dist/esm/components/feedback/Alert/AlertTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertTitle.js","sources":["../../../../../../src/components/feedback/Alert/AlertTitle.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAYF;AAGF;;"}

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

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/feedback/Dialog/Dialog.css.ts.vanilla-BrXTOHwS.css';
+import './../../../assets/src/components/feedback/Dialog/Dialog.css.ts.vanilla-BxBFePLG.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var DIALOG_ANIMATION_MS = 200;

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

@@ -4,7 +4,8 @@ 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 { useFocusTrap } from '../../../hooks/useFocusTrap/useFocusTrap.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
 import { cx } from '../../../utils/cx.js';
 
 // --- Context ---
@@ -50,6 +51,7 @@ const Dialog = ({ open, onClose, size = 'md', title, description, closeOnOverlay
         containerRef: panelRef,
         enabled: trapFocus,
     });
+    const setPanelRef = useMergedRef(panelRef, ref);
     const handleKeyDown = useCallback((e) => {
         // Escape handler — inline instead of global document listener
         if (closeOnEscape && e.key === 'Escape') {
@@ -72,17 +74,7 @@ const Dialog = ({ open, onClose, size = 'md', title, description, closeOnOverlay
         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] })] }));
+    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: setPanelRef, 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);
     }

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

@@ -1 +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;;"}
+{"version":3,"file":"Dialog.js","sources":["../../../../../../src/components/feedback/Dialog/Dialog.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAiBA;AAEA;;AAKE;;AAEE;;AAIF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAoBL;AACA;AACA;AACA;AAEA;;;;AAIC;;AAGC;AACA;AACD;;AAID;;;;AAKM;;;;;;AASN;;AAGM;;AAEJ;AAIF;AAAc;AAEd;;;;;AAMA;;;;AA2CA;AACF;AAEA;;"}