entangle-ui 0.6.3 → 0.7.0

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

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/editor/ChatPanel/ChatPanel.css.ts.vanilla-DPIGnZ4A.css';
+import './../../../assets/src/components/editor/ChatPanel/ChatPanel.css.ts.vanilla-BI5569ZO.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var actionBarStyle = 'ChatPanel_actionBarStyle__1c3e77r2b';
@@ -41,12 +41,24 @@ var inputStopButtonStyle = 'ChatPanel_inputStopButtonStyle__1c3e77ru';
 var inputTextareaStyle = 'ChatPanel_inputTextareaStyle__1c3e77rs';
 var inputToolbarStyle = 'ChatPanel_inputToolbarStyle__1c3e77rw';
 var inputWrapperStyle = 'ChatPanel_inputWrapperStyle__1c3e77rr';
+var markdownBlockquoteStyle = 'ChatPanel_markdownBlockquoteStyle__1c3e77r2i';
+var markdownHeadingStyle = 'ChatPanel_markdownHeadingStyle__1c3e77r2e';
+var markdownHrStyle = 'ChatPanel_markdownHrStyle__1c3e77r2j';
+var markdownLinkStyle = 'ChatPanel_markdownLinkStyle__1c3e77r2h';
+var markdownListItemStyle = 'ChatPanel_markdownListItemStyle__1c3e77r2g';
+var markdownListStyle = 'ChatPanel_markdownListStyle__1c3e77r2f';
+var markdownParagraphStyle = 'ChatPanel_markdownParagraphStyle__1c3e77r2d';
+var markdownRootStyle = 'ChatPanel_markdownRootStyle__1c3e77r2c';
+var markdownTableStyle = 'ChatPanel_markdownTableStyle__1c3e77r2k';
+var markdownTdStyle = 'ChatPanel_markdownTdStyle__1c3e77r2m';
+var markdownThStyle = 'ChatPanel_markdownThStyle__1c3e77r2l';
 var messageAvatarImgStyle = 'ChatPanel_messageAvatarImgStyle__1c3e77rc';
 var messageAvatarStyle = 'ChatPanel_messageAvatarStyle__1c3e77rb';
 var messageContentStyle = 'ChatPanel_messageContentStyle__1c3e77ra';
 var messageErrorCaptionStyle = 'ChatPanel_messageErrorCaptionStyle__1c3e77rl';
 var messageErrorIconStyle = 'ChatPanel_messageErrorIconStyle__1c3e77rm';
 var messageListContentStyle = 'ChatPanel_messageListContentStyle__1c3e77r3';
+var messageMaxWidthVarName = '--etui-chat-message-max-width';
 var messageRecipe = createRuntimeFn({defaultClassName:'ChatPanel_messageRecipe__1c3e77r5',variantClassNames:{role:{user:'ChatPanel_messageRecipe_role_user__1c3e77r6',assistant:'ChatPanel_messageRecipe_role_assistant__1c3e77r7',system:'ChatPanel_messageRecipe_role_system__1c3e77r8',tool:'ChatPanel_messageRecipe_role_tool__1c3e77r9'}},defaultVariants:{role:'assistant'},compoundVariants:[]});
 var messageTextStyle = 'ChatPanel_messageTextStyle__1c3e77re';
 var messageTimestampStyle = 'ChatPanel_messageTimestampStyle__1c3e77rd';
@@ -68,5 +80,5 @@ var typingIndicatorStyle = 'ChatPanel_typingIndicatorStyle__1c3e77rz';
 var typingLabelStyle = 'ChatPanel_typingLabelStyle__1c3e77r13';
 var typingPulseStyle = 'ChatPanel_typingPulseStyle__1c3e77r12';
 
-export { actionBarStyle, attachmentChipIconStyle, attachmentChipNameStyle, attachmentChipRemoveStyle, attachmentChipStyle, attachmentThumbnailStyle, bubbleErrorStyle, bubbleRecipe, chatPanelRecipe, codeBlockActionsStyle, codeBlockContainerStyle, codeBlockContentStyle, codeBlockContentWithLineNumbersStyle, codeBlockCopyButtonStyle, codeBlockHeaderStyle, codeBlockLanguageStyle, codeBlockLineNumbersColumnStyle, codeBlockMaxHeightVar, codeBlockPreStyle, contextChipDismissStyle, contextChipIconStyle, contextChipItemsStyle, contextChipLabelStyle, contextChipStyle, emptyStateDescriptionStyle, emptyStateIconStyle, emptyStateStyle, emptyStateSuggestionStyle, emptyStateSuggestionsStyle, emptyStateTitleStyle, inputAttachmentsStyle, inputBottomBarStyle, inputButtonStyle, inputContainerStyle, inputMaxHeightVar, inputPrefixStyle, inputStopButtonStyle, inputTextareaStyle, inputToolbarStyle, inputWrapperStyle, messageAvatarImgStyle, messageAvatarStyle, messageContentStyle, messageErrorCaptionStyle, messageErrorIconStyle, messageListContentStyle, messageRecipe, messageTextStyle, messageTimestampStyle, newMessagesBannerStyle, toolCallChevronRecipe, toolCallContainerStyle, toolCallDetailsStyle, toolCallDurationStyle, toolCallErrorStyle, toolCallHeaderStyle, toolCallIconStyle, toolCallNameStyle, toolCallPreStyle, toolCallSectionLabelStyle, toolCallStatusRecipe, typingDotStyle, typingDotsContainerStyle, typingIndicatorStyle, typingLabelStyle, typingPulseStyle };
+export { actionBarStyle, attachmentChipIconStyle, attachmentChipNameStyle, attachmentChipRemoveStyle, attachmentChipStyle, attachmentThumbnailStyle, bubbleErrorStyle, bubbleRecipe, chatPanelRecipe, codeBlockActionsStyle, codeBlockContainerStyle, codeBlockContentStyle, codeBlockContentWithLineNumbersStyle, codeBlockCopyButtonStyle, codeBlockHeaderStyle, codeBlockLanguageStyle, codeBlockLineNumbersColumnStyle, codeBlockMaxHeightVar, codeBlockPreStyle, contextChipDismissStyle, contextChipIconStyle, contextChipItemsStyle, contextChipLabelStyle, contextChipStyle, emptyStateDescriptionStyle, emptyStateIconStyle, emptyStateStyle, emptyStateSuggestionStyle, emptyStateSuggestionsStyle, emptyStateTitleStyle, inputAttachmentsStyle, inputBottomBarStyle, inputButtonStyle, inputContainerStyle, inputMaxHeightVar, inputPrefixStyle, inputStopButtonStyle, inputTextareaStyle, inputToolbarStyle, inputWrapperStyle, markdownBlockquoteStyle, markdownHeadingStyle, markdownHrStyle, markdownLinkStyle, markdownListItemStyle, markdownListStyle, markdownParagraphStyle, markdownRootStyle, markdownTableStyle, markdownTdStyle, markdownThStyle, messageAvatarImgStyle, messageAvatarStyle, messageContentStyle, messageErrorCaptionStyle, messageErrorIconStyle, messageListContentStyle, messageMaxWidthVarName, messageRecipe, messageTextStyle, messageTimestampStyle, newMessagesBannerStyle, toolCallChevronRecipe, toolCallContainerStyle, toolCallDetailsStyle, toolCallDurationStyle, toolCallErrorStyle, toolCallHeaderStyle, toolCallIconStyle, toolCallNameStyle, toolCallPreStyle, toolCallSectionLabelStyle, toolCallStatusRecipe, typingDotStyle, typingDotsContainerStyle, typingIndicatorStyle, typingLabelStyle, typingPulseStyle };
 //# sourceMappingURL=ChatPanel.css.js.map

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

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

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,23 @@
 "use client";
-import { useRef, useState, useCallback, useEffect } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
 
 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 +36,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 +60,41 @@ function useChatScroll(options) {
         container.addEventListener('scroll', handleScroll, { passive: true });
         return () => container.removeEventListener('scroll', handleScroll);
     }, [checkIfAtBottom]);
-    // Auto-scroll or show indicator on new messages
+    // Observe content growth — keeps the list pinned to the bottom during streaming
+    // (when message text grows but `messages.length` stays constant).
+    useEffect(() => {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const content = scrollContentRef.current;
+        if (!content)
+            return;
+        lastContentHeightRef.current = content.getBoundingClientRect().height;
+        const ro = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            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);
+            }
+        });
+        ro.observe(content);
+        return () => {
+            ro.disconnect();
+        };
+    }, [scrollToBottom]);
+    // 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 +115,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":";;;AAQM;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;;;;;;AAOE;AACA;;;AAIA;AACE;AACA;;AAEA;AACA;AACA;;;;;;AAMA;;;;;;AAKF;AAEA;AACA;;AAEA;AACF;;;;AAKE;AACA;AACA;;;AAIA;;;;;AAKI;AACF;;;;;AAIJ;;;;;;;;;;AAWF;;"}

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

@@ -0,0 +1,13 @@
+import './../../../assets/src/components/feedback/EmptyState/EmptyState.css.ts.vanilla-B_TWsTOW.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var emptyStateActionStyle = 'EmptyState_emptyStateActionStyle__1ihe8h18';
+var emptyStateDescriptionStyle = 'EmptyState_emptyStateDescriptionStyle__1ihe8h15';
+var emptyStateIconStyle = 'EmptyState_emptyStateIconStyle__1ihe8h13';
+var emptyStateRecipe = createRuntimeFn({defaultClassName:'EmptyState_emptyStateRecipe__1ihe8h10',variantClassNames:{variant:{'default':'EmptyState_emptyStateRecipe_variant_default__1ihe8h11',compact:'EmptyState_emptyStateRecipe_variant_compact__1ihe8h12'}},defaultVariants:{variant:'default'},compoundVariants:[]});
+var emptyStateTextColumnCompactStyle = 'EmptyState_emptyStateTextColumnCompactStyle__1ihe8h17';
+var emptyStateTextColumnStyle = 'EmptyState_emptyStateTextColumnStyle__1ihe8h16';
+var emptyStateTitleStyle = 'EmptyState_emptyStateTitleStyle__1ihe8h14';
+
+export { emptyStateActionStyle, emptyStateDescriptionStyle, emptyStateIconStyle, emptyStateRecipe, emptyStateTextColumnCompactStyle, emptyStateTextColumnStyle, emptyStateTitleStyle };
+//# sourceMappingURL=EmptyState.css.js.map

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

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

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

@@ -0,0 +1,43 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import { emptyStateIconStyle, emptyStateTextColumnCompactStyle, emptyStateTextColumnStyle, emptyStateTitleStyle, emptyStateDescriptionStyle, emptyStateActionStyle, emptyStateRecipe } from './EmptyState.css.js';
+
+/**
+ * Generic empty / loading state surface.
+ *
+ * Use for empty lists, filtered-out results, or "not yet started"
+ * placeholders. When `loading` is `true`, a `Spinner` is rendered in
+ * place of the icon and the root uses `role="status"`.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon={<SearchIcon size="lg" />}
+ *   title="No results"
+ *   description="Try a different search term."
+ *   action={<Button>Reset filters</Button>}
+ * />
+ *
+ * <EmptyState loading title="Loading conversation..." />
+ * ```
+ */
+const EmptyState = /*#__PURE__*/ React.memo(({ icon, title, description, action, variant = 'default', loading = false, className, style, testId, ref, ...rest }) => {
+    const textColumnClass = variant === 'compact'
+        ? emptyStateTextColumnCompactStyle
+        : emptyStateTextColumnStyle;
+    const statusAttrs = loading
+        ? {
+            role: 'status',
+            'aria-live': 'polite',
+        }
+        : {};
+    return (jsxs("div", { ref: ref, className: cx(emptyStateRecipe({ variant }), className), style: style, "data-testid": testId, ...statusAttrs, ...rest, children: [loading ? (jsx("span", { className: emptyStateIconStyle, children: jsx(Spinner, { size: "lg" }) })) : (icon && jsx("span", { className: emptyStateIconStyle, children: icon })), (title !== undefined && title !== null) ||
+                (description !== undefined && description !== null) ? (jsxs("div", { className: textColumnClass, children: [title !== undefined && title !== null && (jsx("h3", { className: emptyStateTitleStyle, children: title })), description !== undefined && description !== null && (jsx("p", { className: emptyStateDescriptionStyle, children: description }))] })) : null, action && jsx("div", { className: emptyStateActionStyle, children: action })] }));
+});
+EmptyState.displayName = 'EmptyState';
+
+export { EmptyState };
+//# sourceMappingURL=EmptyState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sources":["../../../../../../src/components/feedback/EmptyState/EmptyState.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAgBA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAcH;AAEI;;;AAIF;AACI;AACA;AACD;;AAGL;AAkBI;AAcN;AAGF;;"}

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

@@ -0,0 +1,16 @@
+import './../../../assets/src/utils/animations.css.ts.vanilla-DOVlpljP.css';
+import './../../../assets/src/components/feedback/Spinner/Spinner.css.ts.vanilla-DEUewqdK.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var spinnerColorVar = 'var(--spinnerColorVar__670vre0)';
+var spinnerDotRecipe = createRuntimeFn({defaultClassName:'Spinner_spinnerDotRecipe__670vre5',variantClassNames:{delay:{'0':'Spinner_spinnerDotRecipe_delay_0__670vre6','1':'Spinner_spinnerDotRecipe_delay_1__670vre7','2':'Spinner_spinnerDotRecipe_delay_2__670vre8'}},defaultVariants:{},compoundVariants:[]});
+var spinnerDotsSizerStyle = 'Spinner_spinnerDotsSizerStyle__670vre9';
+var spinnerLabelStyle = 'Spinner_spinnerLabelStyle__670vreb';
+var spinnerPulseStyle = 'Spinner_spinnerPulseStyle__670vrea';
+var spinnerRingStyle = 'Spinner_spinnerRingStyle__670vre3';
+var spinnerRootStyle = 'Spinner_spinnerRootStyle__670vre2';
+var spinnerSizeVar = 'var(--spinnerSizeVar__670vre1)';
+var visuallyHiddenStyle = 'Spinner_visuallyHiddenStyle__670vrec';
+
+export { spinnerColorVar, spinnerDotRecipe, spinnerDotsSizerStyle, spinnerLabelStyle, spinnerPulseStyle, spinnerRingStyle, spinnerRootStyle, spinnerSizeVar, visuallyHiddenStyle };
+//# sourceMappingURL=Spinner.css.js.map

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

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

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

@@ -0,0 +1,50 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { spinnerSizeVar, spinnerColorVar, spinnerRingStyle, spinnerPulseStyle, spinnerDotsSizerStyle, spinnerDotRecipe, spinnerLabelStyle, visuallyHiddenStyle, spinnerRootStyle } from './Spinner.css.js';
+
+const SIZE_MAP = {
+    xs: '12px',
+    sm: '14px',
+    md: '16px',
+    lg: '20px',
+};
+const NAMED_COLOR_MAP = {
+    primary: vars.colors.text.primary,
+    secondary: vars.colors.text.secondary,
+    muted: vars.colors.text.muted,
+    accent: vars.colors.accent.primary,
+};
+function resolveColor(color) {
+    return NAMED_COLOR_MAP[color] ?? color;
+}
+/**
+ * Loading / activity indicator.
+ *
+ * Announces itself via `role="status"` and `aria-label`; honors
+ * `prefers-reduced-motion` by halting animation and dimming the indicator.
+ *
+ * @example
+ * ```tsx
+ * <Spinner />
+ * <Spinner variant="dots" size="lg" />
+ * <Spinner showLabel label="Fetching results..." />
+ * ```
+ */
+const Spinner = /*#__PURE__*/ React.memo(({ size = 'md', variant = 'ring', color = 'accent', label = 'Loading...', showLabel = false, className, style, testId, ref, ...rest }) => {
+    const resolvedColor = resolveColor(color);
+    const resolvedSize = SIZE_MAP[size];
+    const inlineVars = assignInlineVars({
+        [spinnerColorVar]: resolvedColor,
+        [spinnerSizeVar]: resolvedSize,
+    });
+    const indicator = variant === 'ring' ? (jsx("span", { className: spinnerRingStyle, "aria-hidden": true })) : variant === 'pulse' ? (jsx("span", { className: spinnerPulseStyle, "aria-hidden": true })) : (jsxs("span", { className: spinnerDotsSizerStyle, "aria-hidden": true, children: [jsx("span", { className: spinnerDotRecipe({ delay: '0' }) }), jsx("span", { className: spinnerDotRecipe({ delay: '1' }) }), jsx("span", { className: spinnerDotRecipe({ delay: '2' }) })] }));
+    return (jsxs("span", { ref: ref, role: "status", "aria-live": "polite", "aria-label": label, className: cx(spinnerRootStyle, className), style: { ...inlineVars, ...style }, "data-testid": testId, ...rest, children: [indicator, showLabel ? (jsx("span", { className: spinnerLabelStyle, children: label })) : (jsx("span", { className: visuallyHiddenStyle, children: label }))] }));
+});
+Spinner.displayName = 'Spinner';
+
+export { Spinner };
+//# sourceMappingURL=Spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../../../../src/components/feedback/Spinner/Spinner.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAmBA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACE;AACF;AAEA;;;;;;;;;;;;AAYG;;AAcC;AACA;;;;AAKC;AAED;AAaA;AAmBF;AAGF;;"}

package/dist/esm/components/layout/Divider/Divider.css.js

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/layout/Divider/Divider.css.ts.vanilla-CPvd_RW9.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var dividerLabelTextStyle = 'Divider_dividerLabelTextStyle__1desuf1c';
+var dividerRecipe = createRuntimeFn({defaultClassName:'Divider_dividerRecipe__1desuf10',variantClassNames:{orientation:{horizontal:'Divider_dividerRecipe_orientation_horizontal__1desuf11',vertical:'Divider_dividerRecipe_orientation_vertical__1desuf12'},variant:{solid:'Divider_dividerRecipe_variant_solid__1desuf13',dashed:'Divider_dividerRecipe_variant_dashed__1desuf14',dotted:'Divider_dividerRecipe_variant_dotted__1desuf15'}},defaultVariants:{orientation:'horizontal',variant:'solid'},compoundVariants:[[{orientation:'vertical',variant:'dashed'},'Divider_dividerRecipe_compound_0__1desuf16'],[{orientation:'vertical',variant:'dotted'},'Divider_dividerRecipe_compound_1__1desuf17']]});
+var dividerWithLabelRecipe = createRuntimeFn({defaultClassName:'Divider_dividerWithLabelRecipe__1desuf18',variantClassNames:{variant:{solid:'Divider_dividerWithLabelRecipe_variant_solid__1desuf19',dashed:'Divider_dividerWithLabelRecipe_variant_dashed__1desuf1a',dotted:'Divider_dividerWithLabelRecipe_variant_dotted__1desuf1b'}},defaultVariants:{variant:'solid'},compoundVariants:[]});
+
+export { dividerLabelTextStyle, dividerRecipe, dividerWithLabelRecipe };
+//# sourceMappingURL=Divider.css.js.map

package/dist/esm/components/layout/Divider/Divider.css.js.map

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

package/dist/esm/components/layout/Divider/Divider.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { dividerLabelTextStyle, dividerWithLabelRecipe, dividerRecipe } from './Divider.css.js';
+
+const SPACING_MAP = {
+    0: '0',
+    1: 'var(--etui-spacing-xs)',
+    2: 'var(--etui-spacing-sm)',
+    3: 'var(--etui-spacing-md)',
+    4: 'var(--etui-spacing-lg)',
+    5: 'var(--etui-spacing-xl)',
+    6: 'var(--etui-spacing-xxl)',
+    7: 'var(--etui-spacing-xxxl)',
+};
+function resolveSpacing(spacing) {
+    if (spacing === undefined)
+        return '0';
+    if (typeof spacing === 'number')
+        return SPACING_MAP[spacing] ?? '0';
+    return spacing;
+}
+/**
+ * Thin horizontal or vertical rule, optionally with an inline label.
+ *
+ * @example
+ * ```tsx
+ * <Stack>
+ *   <SectionA />
+ *   <Divider spacing={3} />
+ *   <SectionB />
+ * </Stack>
+ *
+ * <Divider label="Advanced" />
+ * ```
+ */
+const Divider = /*#__PURE__*/ React.memo(({ orientation = 'horizontal', variant = 'solid', spacing = 0, label, className, style, testId, ref, ...rest }) => {
+    const spacingValue = resolveSpacing(spacing);
+    const marginStyle = orientation === 'horizontal'
+        ? { marginTop: spacingValue, marginBottom: spacingValue }
+        : { marginLeft: spacingValue, marginRight: spacingValue };
+    if (label && orientation === 'horizontal') {
+        return (jsx("div", { ref: ref, role: "separator", "aria-orientation": "horizontal", className: cx(dividerWithLabelRecipe({ variant }), className), style: { ...marginStyle, ...style }, "data-testid": testId, ...rest, children: jsx("span", { className: dividerLabelTextStyle, children: label }) }));
+    }
+    return (jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cx(dividerRecipe({ orientation, variant }), className), style: { ...marginStyle, ...style }, "data-testid": testId, ...rest }));
+});
+Divider.displayName = 'Divider';
+
+export { Divider };
+//# sourceMappingURL=Divider.js.map

package/dist/esm/components/layout/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../../../../src/components/layout/Divider/Divider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAWA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;;AAC6B;;AACM;AACjC;AACF;AAEA;;;;;;;;;;;;;AAaG;AACI;AAYH;AACA;;;AAKA;;;AAgBA;AAWF;AAGF;;"}

package/dist/esm/components/layout/ListItem/ListItem.css.js

@@ -0,0 +1,10 @@
+import './../../../assets/src/components/layout/ListItem/ListItem.css.ts.vanilla-BwAZrX2f.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var listItemContentStyle = 'ListItem_listItemContentStyle__9m667ic';
+var listItemLeadingStyle = 'ListItem_listItemLeadingStyle__9m667ib';
+var listItemRecipe = createRuntimeFn({defaultClassName:'ListItem_listItemRecipe__9m667i0',variantClassNames:{density:{compact:'ListItem_listItemRecipe_density_compact__9m667i1',comfortable:'ListItem_listItemRecipe_density_comfortable__9m667i2'},clickable:{true:'ListItem_listItemRecipe_clickable_true__9m667i3',false:'ListItem_listItemRecipe_clickable_false__9m667i4'},selected:{true:'ListItem_listItemRecipe_selected_true__9m667i5',false:'ListItem_listItemRecipe_selected_false__9m667i6'},active:{true:'ListItem_listItemRecipe_active_true__9m667i7',false:'ListItem_listItemRecipe_active_false__9m667i8'},disabled:{true:'ListItem_listItemRecipe_disabled_true__9m667i9',false:'ListItem_listItemRecipe_disabled_false__9m667ia'}},defaultVariants:{density:'comfortable',clickable:false,selected:false,active:false,disabled:false},compoundVariants:[]});
+var listItemTrailingStyle = 'ListItem_listItemTrailingStyle__9m667id';
+
+export { listItemContentStyle, listItemLeadingStyle, listItemRecipe, listItemTrailingStyle };
+//# sourceMappingURL=ListItem.css.js.map

package/dist/esm/components/layout/ListItem/ListItem.css.js.map

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

package/dist/esm/components/layout/ListItem/ListItem.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useCallback } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { listItemLeadingStyle, listItemContentStyle, listItemTrailingStyle, listItemRecipe } from './ListItem.css.js';
+
+/**
+ * Reusable list row with leading / trailing slots and hover/selected/active
+ * states. Becomes keyboard-activatable when `onClick` is provided (Enter
+ * and Space trigger the handler).
+ *
+ * @example
+ * ```tsx
+ * <ListItem
+ *   leading={<FileIcon />}
+ *   trailing={<Badge color="success">done</Badge>}
+ *   selected={id === activeId}
+ *   onClick={() => select(id)}
+ * >
+ *   scene.blend
+ * </ListItem>
+ * ```
+ */
+const ListItem = /*#__PURE__*/ React.memo(({ onClick, leading, trailing, selected = false, active = false, disabled = false, density = 'comfortable', children, className, style, testId, ref, ...rest }) => {
+    const clickable = !!onClick && !disabled;
+    const handleKeyDown = useCallback((event) => {
+        if (!clickable)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onClick?.(event);
+        }
+    }, [clickable, onClick]);
+    return (jsxs("div", { ref: ref, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, "aria-disabled": disabled || undefined, "data-disabled": disabled ? 'true' : 'false', "data-selected": selected ? 'true' : undefined, "data-active": active ? 'true' : undefined, onClick: clickable ? onClick : undefined, onKeyDown: handleKeyDown, className: cx(listItemRecipe({
+            density,
+            clickable: clickable || undefined,
+            selected: selected || undefined,
+            active: active || undefined,
+            disabled: disabled || undefined,
+        }), className), style: style, "data-testid": testId, ...rest, children: [leading && jsx("span", { className: listItemLeadingStyle, children: leading }), jsx("span", { className: listItemContentStyle, children: children }), trailing && jsx("span", { className: listItemTrailingStyle, children: trailing })] }));
+});
+ListItem.displayName = 'ListItem';
+
+export { ListItem };
+//# sourceMappingURL=ListItem.js.map

package/dist/esm/components/layout/ListItem/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sources":["../../../../../../src/components/layout/ListItem/ListItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAYA;;;;;;;;;;;;;;;;AAgBG;;;AAmBC;AAEI;;AACA;;AAEE;;AAIJ;AAIF;;;;;;AAkBO;AAYT;AAGF;;"}

package/dist/esm/components/layout/PageHeader/PageHeader.css.js

@@ -0,0 +1,13 @@
+import './../../../assets/src/components/layout/PageHeader/PageHeader.css.ts.vanilla-DdbyyWAN.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var pageHeaderActionsStyle = 'PageHeader_pageHeaderActionsStyle__1uiranpe';
+var pageHeaderBreadcrumbsStyle = 'PageHeader_pageHeaderBreadcrumbsStyle__1uiranpd';
+var pageHeaderIconStyle = 'PageHeader_pageHeaderIconStyle__1uiranp6';
+var pageHeaderRecipe = createRuntimeFn({defaultClassName:'PageHeader_pageHeaderRecipe__1uiranp0',variantClassNames:{size:{sm:'PageHeader_pageHeaderRecipe_size_sm__1uiranp1',md:'PageHeader_pageHeaderRecipe_size_md__1uiranp2',lg:'PageHeader_pageHeaderRecipe_size_lg__1uiranp3'},bordered:{true:'PageHeader_pageHeaderRecipe_bordered_true__1uiranp4',false:'PageHeader_pageHeaderRecipe_bordered_false__1uiranp5'}},defaultVariants:{size:'md',bordered:true},compoundVariants:[]});
+var pageHeaderSubtitleStyle = 'PageHeader_pageHeaderSubtitleStyle__1uiranpc';
+var pageHeaderTitleColumnStyle = 'PageHeader_pageHeaderTitleColumnStyle__1uiranp7';
+var pageHeaderTitleRecipe = createRuntimeFn({defaultClassName:'PageHeader_pageHeaderTitleRecipe__1uiranp8',variantClassNames:{size:{sm:'PageHeader_pageHeaderTitleRecipe_size_sm__1uiranp9',md:'PageHeader_pageHeaderTitleRecipe_size_md__1uiranpa',lg:'PageHeader_pageHeaderTitleRecipe_size_lg__1uiranpb'}},defaultVariants:{size:'md'},compoundVariants:[]});
+
+export { pageHeaderActionsStyle, pageHeaderBreadcrumbsStyle, pageHeaderIconStyle, pageHeaderRecipe, pageHeaderSubtitleStyle, pageHeaderTitleColumnStyle, pageHeaderTitleRecipe };
+//# sourceMappingURL=PageHeader.css.js.map

package/dist/esm/components/layout/PageHeader/PageHeader.css.js.map

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

package/dist/esm/components/layout/PageHeader/PageHeader.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { pageHeaderIconStyle, pageHeaderTitleColumnStyle, pageHeaderBreadcrumbsStyle, pageHeaderTitleRecipe, pageHeaderSubtitleStyle, pageHeaderActionsStyle, pageHeaderRecipe } from './PageHeader.css.js';
+
+/**
+ * Structural page/view header with optional breadcrumbs, subtitle,
+ * leading icon, and right-aligned actions.
+ *
+ * Renders a semantic `<header>` element.
+ *
+ * @example
+ * ```tsx
+ * <PageHeader
+ *   icon={<FolderIcon size="lg" />}
+ *   title="Project Assets"
+ *   subtitle="124 items"
+ *   actions={<Button variant="filled">Upload</Button>}
+ * />
+ * ```
+ */
+const PageHeader = /*#__PURE__*/ React.memo(({ icon, title, subtitle, actions, breadcrumbs, size = 'md', bordered = true, className, style, testId, ref, ...rest }) => {
+    return (jsxs("header", { ref: ref, className: cx(pageHeaderRecipe({ size, bordered }), className), style: style, "data-testid": testId, ...rest, children: [icon && jsx("span", { className: pageHeaderIconStyle, children: icon }), jsxs("div", { className: pageHeaderTitleColumnStyle, children: [breadcrumbs && (jsx("div", { className: pageHeaderBreadcrumbsStyle, children: breadcrumbs })), jsx("h1", { className: pageHeaderTitleRecipe({ size }), children: title }), subtitle && (jsx("div", { className: pageHeaderSubtitleStyle, children: subtitle }))] }), actions && jsx("div", { className: pageHeaderActionsStyle, children: actions })] }));
+});
+PageHeader.displayName = 'PageHeader';
+
+export { PageHeader };
+//# sourceMappingURL=PageHeader.js.map

package/dist/esm/components/layout/PageHeader/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sources":["../../../../../../src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAeA;;;;;;;;;;;;;;;AAeG;AACI;;AAsCL;AAGF;;"}

package/dist/esm/components/layout/SplitPane/SplitPane.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/layout/SplitPane/SplitPane.css.ts.vanilla-BFxdvwyI.css';
+import './../../../assets/src/components/layout/SplitPane/SplitPane.css.ts.vanilla-BGFZ7zDa.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var containerRecipe = createRuntimeFn({defaultClassName:'SplitPane_containerRecipe__13xgg0i0',variantClassNames:{direction:{horizontal:'SplitPane_containerRecipe_direction_horizontal__13xgg0i1',vertical:'SplitPane_containerRecipe_direction_vertical__13xgg0i2'}},defaultVariants:{},compoundVariants:[]});

package/dist/esm/components/navigation/Tabs/TabPanel.js

@@ -5,12 +5,15 @@ import { cx } from '../../../utils/cx.js';
 import { tabPanelStyle } from './Tabs.css.js';
 
 // --- Component ---
-const TabPanel = ({ value, children, keepMounted = false, className, style, testId, ref, ...rest }) => {
-    const { activeValue, tabsId } = useTabsContext();
+const TabPanel = ({ value, children, keepMounted, className, style, testId, ref, ...rest }) => {
+    const ctx = useTabsContext();
+    const { activeValue, tabsId } = ctx;
     const isActive = activeValue === value;
+    // Explicit child prop wins over the parent cascade. Undefined = inherit.
+    const effectiveKeepMounted = keepMounted ?? ctx.keepMounted;
     const tabId = `tabs-${tabsId}-tab-${value}`;
     const panelId = `tabs-${tabsId}-panel-${value}`;
-    if (!isActive && !keepMounted) {
+    if (!isActive && !effectiveKeepMounted) {
         return null;
     }
     return (jsx("div", { ref: ref, role: "tabpanel", id: panelId, "aria-labelledby": tabId, tabIndex: isActive ? 0 : -1, hidden: !isActive || undefined, className: cx(tabPanelStyle, className), style: {

package/dist/esm/components/navigation/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../../../../src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAQA;AAEO;;AAWL;AAEA;AACA;AAEA;AACE;;;AAaI;AACA;AACD;AAOP;AAEA;;"}
+{"version":3,"file":"TabPanel.js","sources":["../../../../../../src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAQA;AAEO;AAUL;AACA;AACA;;AAGA;AAEA;AACA;AAEA;AACE;;;AAaI;AACA;AACD;AAOP;AAEA;;"}

package/dist/esm/components/navigation/Tabs/Tabs.js

@@ -31,7 +31,7 @@ function useTabsContext() {
  * </Tabs>
  * ```
  */
-const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'md', orientation = 'horizontal', fullWidth = false, pillsFrame = true, children, onChange, className, style, testId, ref, ...rest }) => {
+const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'md', orientation = 'horizontal', fullWidth = false, pillsFrame = true, keepMounted = false, children, onChange, className, style, testId, ref, ...rest }) => {
     const autoId = useId();
     const tabsId = autoId;
     const [internalValue, setInternalValue] = useState(defaultValue ?? '');
@@ -51,6 +51,7 @@ const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'm
         orientation,
         fullWidth,
         pillsFrame,
+        keepMounted,
         tabsId,
     }), [
         activeValue,
@@ -60,6 +61,7 @@ const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'm
         orientation,
         fullWidth,
         pillsFrame,
+        keepMounted,
         tabsId,
     ]);
     return (jsx(TabsContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cx(tabsRootRecipe({ orientation }), className), style: style, "data-testid": testId, ...rest, children: children }) }));

package/dist/esm/components/navigation/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEA;;AAGE;;AAEE;;AAEF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;;AAiBD;;AAGA;AACA;;AAGA;;;;AAKI;AACF;AAIF;;;;;;;;;AAUG;;;;;;;;;AAUA;AAGH;AAaF;AAEA;;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEA;;AAGE;;AAEE;;AAEF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AAiBL;;AAGA;AACA;;AAGA;;;;AAKI;AACF;AAIF;;;;;;;;;;AAWG;;;;;;;;;;AAWA;AAGH;AAaF;AAEA;;"}