entangle-ui 0.2.0 → 0.4.0

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

@@ -0,0 +1,32 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { useChatScroll } from './useChatScroll.js';
+import { ChatMessage } from './ChatMessage.js';
+import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
+import { messageListContentStyle, newMessagesBannerStyle } from './ChatPanel.css.js';
+
+const ChatMessageList = /*#__PURE__*/ React.memo(({ messages, renderMessage, emptyState, autoScroll = true, className, style, testId, ref, ...rest }) => {
+    const { scrollContainerRef, hasNewMessages, scrollToBottom } = useChatScroll({
+        messages,
+        enabled: autoScroll,
+    });
+    // Merge refs — ScrollArea forwards ref to its viewport div
+    const mergedRef = React.useCallback((node) => {
+        scrollContainerRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [scrollContainerRef, ref]);
+    if (messages.length === 0 && emptyState) {
+        return (jsx(ScrollArea, { ref: mergedRef, autoFill: true, className: className, style: style, testId: testId, ...rest, children: jsx("div", { className: messageListContentStyle, role: "log", "aria-live": "polite", children: emptyState }) }));
+    }
+    return (jsx(ScrollArea, { ref: mergedRef, autoFill: true, className: className, style: style, testId: testId, ...rest, children: jsxs("div", { className: messageListContentStyle, role: "log", "aria-live": "polite", children: [messages.map((message, index) => renderMessage ? (jsx(React.Fragment, { children: renderMessage(message, index) }, message.id)) : (jsx(ChatMessage, { message: message }, message.id))), hasNewMessages && (jsx("button", { className: newMessagesBannerStyle, onClick: () => scrollToBottom('smooth'), type: "button", children: "New messages" }))] }) }));
+});
+ChatMessageList.displayName = 'ChatMessageList';
+
+export { ChatMessageList };
+//# sourceMappingURL=ChatMessageList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageList.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatMessageList.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAYO;;;AAeC;AACD;;;AAMG;AAEF;;;;AAGG;;AAEL;;AAKA;;;AAoDJ;AAGF;;"}

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

@@ -0,0 +1,72 @@
+import './../../../assets/src/components/editor/ChatPanel/ChatPanel.css.ts.vanilla-DPIGnZ4A.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var actionBarStyle = 'ChatPanel_actionBarStyle__1c3e77r2b';
+var attachmentChipIconStyle = 'ChatPanel_attachmentChipIconStyle__1c3e77r1w';
+var attachmentChipNameStyle = 'ChatPanel_attachmentChipNameStyle__1c3e77r1x';
+var attachmentChipRemoveStyle = 'ChatPanel_attachmentChipRemoveStyle__1c3e77r1y';
+var attachmentChipStyle = 'ChatPanel_attachmentChipStyle__1c3e77r1v';
+var attachmentThumbnailStyle = 'ChatPanel_attachmentThumbnailStyle__1c3e77r1z';
+var bubbleErrorStyle = 'ChatPanel_bubbleErrorStyle__1c3e77rk';
+var bubbleRecipe = createRuntimeFn({defaultClassName:'ChatPanel_bubbleRecipe__1c3e77rf',variantClassNames:{role:{user:'ChatPanel_bubbleRecipe_role_user__1c3e77rg',assistant:'ChatPanel_bubbleRecipe_role_assistant__1c3e77rh',system:'ChatPanel_bubbleRecipe_role_system__1c3e77ri',tool:'ChatPanel_bubbleRecipe_role_tool__1c3e77rj'}},defaultVariants:{role:'assistant'},compoundVariants:[]});
+var chatPanelRecipe = createRuntimeFn({defaultClassName:'ChatPanel_chatPanelRecipe__1c3e77r0',variantClassNames:{density:{comfortable:'ChatPanel_chatPanelRecipe_density_comfortable__1c3e77r1',compact:'ChatPanel_chatPanelRecipe_density_compact__1c3e77r2'}},defaultVariants:{density:'comfortable'},compoundVariants:[]});
+var codeBlockActionsStyle = 'ChatPanel_codeBlockActionsStyle__1c3e77r1p';
+var codeBlockContainerStyle = 'ChatPanel_codeBlockContainerStyle__1c3e77r1m';
+var codeBlockContentStyle = 'ChatPanel_codeBlockContentStyle__1c3e77r1r';
+var codeBlockContentWithLineNumbersStyle = 'ChatPanel_codeBlockContentWithLineNumbersStyle__1c3e77r1s';
+var codeBlockCopyButtonStyle = 'ChatPanel_codeBlockCopyButtonStyle__1c3e77r1q';
+var codeBlockHeaderStyle = 'ChatPanel_codeBlockHeaderStyle__1c3e77r1n';
+var codeBlockLanguageStyle = 'ChatPanel_codeBlockLanguageStyle__1c3e77r1o';
+var codeBlockLineNumbersColumnStyle = 'ChatPanel_codeBlockLineNumbersColumnStyle__1c3e77r1t';
+var codeBlockMaxHeightVar = 'var(--codeBlockMaxHeightVar__1c3e77r1l)';
+var codeBlockPreStyle = 'ChatPanel_codeBlockPreStyle__1c3e77r1u';
+var contextChipDismissStyle = 'ChatPanel_contextChipDismissStyle__1c3e77r24';
+var contextChipIconStyle = 'ChatPanel_contextChipIconStyle__1c3e77r21';
+var contextChipItemsStyle = 'ChatPanel_contextChipItemsStyle__1c3e77r23';
+var contextChipLabelStyle = 'ChatPanel_contextChipLabelStyle__1c3e77r22';
+var contextChipStyle = 'ChatPanel_contextChipStyle__1c3e77r20';
+var emptyStateDescriptionStyle = 'ChatPanel_emptyStateDescriptionStyle__1c3e77r28';
+var emptyStateIconStyle = 'ChatPanel_emptyStateIconStyle__1c3e77r26';
+var emptyStateStyle = 'ChatPanel_emptyStateStyle__1c3e77r25';
+var emptyStateSuggestionStyle = 'ChatPanel_emptyStateSuggestionStyle__1c3e77r2a';
+var emptyStateSuggestionsStyle = 'ChatPanel_emptyStateSuggestionsStyle__1c3e77r29';
+var emptyStateTitleStyle = 'ChatPanel_emptyStateTitleStyle__1c3e77r27';
+var inputAttachmentsStyle = 'ChatPanel_inputAttachmentsStyle__1c3e77rp';
+var inputBottomBarStyle = 'ChatPanel_inputBottomBarStyle__1c3e77rv';
+var inputButtonStyle = 'ChatPanel_inputButtonStyle__1c3e77rt';
+var inputContainerStyle = 'ChatPanel_inputContainerStyle__1c3e77ro';
+var inputMaxHeightVar = 'var(--inputMaxHeightVar__1c3e77rn)';
+var inputPrefixStyle = 'ChatPanel_inputPrefixStyle__1c3e77rq';
+var inputStopButtonStyle = 'ChatPanel_inputStopButtonStyle__1c3e77ru';
+var inputTextareaStyle = 'ChatPanel_inputTextareaStyle__1c3e77rs';
+var inputToolbarStyle = 'ChatPanel_inputToolbarStyle__1c3e77rw';
+var inputWrapperStyle = 'ChatPanel_inputWrapperStyle__1c3e77rr';
+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 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';
+var newMessagesBannerStyle = 'ChatPanel_newMessagesBannerStyle__1c3e77r4';
+var toolCallChevronRecipe = createRuntimeFn({defaultClassName:'ChatPanel_toolCallChevronRecipe__1c3e77r1d',variantClassNames:{open:{true:'ChatPanel_toolCallChevronRecipe_open_true__1c3e77r1e',false:'ChatPanel_toolCallChevronRecipe_open_false__1c3e77r1f'}},defaultVariants:{open:false},compoundVariants:[]});
+var toolCallContainerStyle = 'ChatPanel_toolCallContainerStyle__1c3e77r14';
+var toolCallDetailsStyle = 'ChatPanel_toolCallDetailsStyle__1c3e77r1g';
+var toolCallDurationStyle = 'ChatPanel_toolCallDurationStyle__1c3e77r1k';
+var toolCallErrorStyle = 'ChatPanel_toolCallErrorStyle__1c3e77r1j';
+var toolCallHeaderStyle = 'ChatPanel_toolCallHeaderStyle__1c3e77r15';
+var toolCallIconStyle = 'ChatPanel_toolCallIconStyle__1c3e77r16';
+var toolCallNameStyle = 'ChatPanel_toolCallNameStyle__1c3e77r17';
+var toolCallPreStyle = 'ChatPanel_toolCallPreStyle__1c3e77r1i';
+var toolCallSectionLabelStyle = 'ChatPanel_toolCallSectionLabelStyle__1c3e77r1h';
+var toolCallStatusRecipe = createRuntimeFn({defaultClassName:'ChatPanel_toolCallStatusRecipe__1c3e77r18',variantClassNames:{status:{pending:'ChatPanel_toolCallStatusRecipe_status_pending__1c3e77r19',running:'ChatPanel_toolCallStatusRecipe_status_running__1c3e77r1a',completed:'ChatPanel_toolCallStatusRecipe_status_completed__1c3e77r1b',error:'ChatPanel_toolCallStatusRecipe_status_error__1c3e77r1c'}},defaultVariants:{status:'pending'},compoundVariants:[]});
+var typingDotStyle = 'ChatPanel_typingDotStyle__1c3e77r11';
+var typingDotsContainerStyle = 'ChatPanel_typingDotsContainerStyle__1c3e77r10';
+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 };
+//# sourceMappingURL=ChatPanel.css.js.map

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

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

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { chatPanelRecipe } 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 }));
+});
+ChatPanel.displayName = 'ChatPanel';
+
+export { ChatPanel };
+//# sourceMappingURL=ChatPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatPanel.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOO;AAUH;AAWF;AAGF;;"}

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

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useState, useCallback } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { toolCallHeaderStyle, toolCallIconStyle, toolCallNameStyle, toolCallStatusRecipe, toolCallDurationStyle, toolCallChevronRecipe, toolCallDetailsStyle, toolCallSectionLabelStyle, toolCallPreStyle, toolCallErrorStyle, toolCallContainerStyle } from './ChatPanel.css.js';
+
+// ─── Icons ───────────────────────────────────────────────────────
+const WrenchIcon = () => (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [jsx("path", { d: "M14.25 1.75L12.5 3.5L13 5L11.5 6.5L10.5 5.5L5.5 10.5L6.5 11.5L5 13L3.5 12.5L1.75 14.25", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M8.5 2.5L10 4L8 6L6.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const ChevronIcon = ({ size = 10 }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M4.5 3L7.5 6L4.5 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+// ─── Status label map ────────────────────────────────────────────
+const STATUS_LABELS = {
+    pending: 'Pending',
+    running: 'Running',
+    completed: 'Completed',
+    error: 'Error',
+};
+// ─── Component ───────────────────────────────────────────────────
+const ChatToolCall = /*#__PURE__*/ React.memo(({ toolCall, collapsible = true, defaultExpanded = false, icon, renderOutput, className, style, testId, ref, ...rest }) => {
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    const handleToggle = useCallback(() => {
+        if (collapsible) {
+            setExpanded(prev => !prev);
+        }
+    }, [collapsible]);
+    const statusLabel = STATUS_LABELS[toolCall.status];
+    const ariaLabel = `Tool ${toolCall.name}: ${statusLabel}`;
+    return (jsxs("div", { ref: ref, className: cx(toolCallContainerStyle, className), style: style, "data-testid": testId, "aria-label": ariaLabel, ...rest, children: [jsxs("button", { type: "button", className: toolCallHeaderStyle, onClick: handleToggle, "aria-expanded": collapsible ? expanded : undefined, children: [jsx("span", { className: toolCallIconStyle, children: icon ?? jsx(WrenchIcon, {}) }), jsx("span", { className: toolCallNameStyle, children: toolCall.name }), jsx("span", { className: toolCallStatusRecipe({ status: toolCall.status }), children: statusLabel }), toolCall.durationMs !== undefined &&
+                        toolCall.status === 'completed' && (jsxs("span", { className: toolCallDurationStyle, children: [toolCall.durationMs, "ms"] })), collapsible && (jsx("span", { className: toolCallChevronRecipe({
+                            open: expanded || undefined,
+                        }), children: jsx(ChevronIcon, {}) }))] }), expanded && (jsxs("div", { className: toolCallDetailsStyle, children: [toolCall.input && (jsxs(Fragment, { children: [jsx("span", { className: toolCallSectionLabelStyle, children: "Input" }), jsx("pre", { className: toolCallPreStyle, children: JSON.stringify(toolCall.input, null, 2) })] })), toolCall.output && (jsxs(Fragment, { children: [jsx("span", { className: toolCallSectionLabelStyle, children: "Output" }), renderOutput ? (renderOutput(toolCall.output)) : (jsx("pre", { className: toolCallPreStyle, children: JSON.stringify(toolCall.output, null, 2) }))] })), toolCall.error && (jsxs(Fragment, { children: [jsx("span", { className: toolCallSectionLabelStyle, children: "Error" }), jsx("span", { className: toolCallErrorStyle, children: toolCall.error })] }))] }))] }));
+});
+ChatToolCall.displayName = 'ChatToolCall';
+
+export { ChatToolCall };
+//# sourceMappingURL=ChatToolCall.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatToolCall.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatToolCall.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAmBA;AAEA;AAyBA;AAkBA;AAEA;AACE;AACA;AACA;AACA;;AAGF;AAEO;;AAeH;;;;AAIA;;;AAKA;;;AAkCW;AAyCb;AAGF;;"}

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

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { typingDotsContainerStyle, typingDotStyle, typingPulseStyle, typingLabelStyle, typingIndicatorStyle } from './ChatPanel.css.js';
+
+const ChatTypingIndicator = 
+/*#__PURE__*/ React.memo(({ label = 'Thinking...', variant = 'dots', visible = true, className, style, testId, ref, ...rest }) => {
+    if (!visible)
+        return null;
+    return (jsxs("div", { ref: ref, className: cx(typingIndicatorStyle, className), style: style, "data-testid": testId, role: "status", "aria-label": label, ...rest, children: [variant === 'dots' ? (jsxs("div", { className: typingDotsContainerStyle, "aria-hidden": "true", children: [jsx("span", { className: typingDotStyle }), jsx("span", { className: typingDotStyle }), jsx("span", { className: typingDotStyle })] })) : (jsx("div", { className: typingPulseStyle, "aria-hidden": "true" })), jsx("span", { className: typingLabelStyle, children: label })] }));
+});
+ChatTypingIndicator.displayName = 'ChatTypingIndicator';
+
+export { ChatTypingIndicator };
+//# sourceMappingURL=ChatTypingIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTypingIndicator.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatTypingIndicator.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAcE;AAWI;AAAc;AAEd;AAsBF;AAGJ;;"}

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

@@ -0,0 +1,60 @@
+"use client";
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+function useChatInput(options = {}) {
+    const { submitKey = 'enter', onSubmit, maxLines = 6 } = options;
+    const [value, setValue] = useState('');
+    const textareaRef = useRef(null);
+    const autoResize = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        // Reset height to measure scroll height
+        textarea.style.height = 'auto';
+        const lineHeight = parseInt(getComputedStyle(textarea).lineHeight || '18', 10);
+        const maxHeight = maxLines * lineHeight;
+        const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+        textarea.style.height = `${newHeight}px`;
+    }, [maxLines]);
+    // Auto-resize on value change
+    useEffect(() => {
+        autoResize();
+    }, [value, autoResize]);
+    const clear = useCallback(() => {
+        setValue('');
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.style.height = 'auto';
+        }
+    }, []);
+    const handleChange = useCallback((event) => {
+        setValue(event.target.value);
+    }, []);
+    const handleKeyDown = useCallback((event) => {
+        const isSubmit = submitKey === 'enter'
+            ? event.key === 'Enter' &&
+                !event.shiftKey &&
+                !event.ctrlKey &&
+                !event.metaKey
+            : event.key === 'Enter' && (event.ctrlKey || event.metaKey);
+        if (isSubmit) {
+            event.preventDefault();
+            const trimmed = value.trim();
+            if (trimmed) {
+                onSubmit?.(trimmed);
+                clear();
+            }
+        }
+    }, [submitKey, value, onSubmit, clear]);
+    return {
+        value,
+        setValue,
+        clear,
+        textareaRef,
+        handleKeyDown,
+        handleChange,
+    };
+}
+
+export { useChatInput };
+//# sourceMappingURL=useChatInput.js.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,47 @@
+"use client";
+import { useState, useRef, useCallback } from 'react';
+
+function useChatMessages(options = {}) {
+    const { initialMessages = [], maxMessages } = options;
+    const [messages, setMessages] = useState(initialMessages);
+    const messagesRef = useRef(messages);
+    messagesRef.current = messages;
+    const trimToMax = useCallback((msgs) => {
+        if (maxMessages !== undefined && msgs.length > maxMessages) {
+            return msgs.slice(msgs.length - maxMessages);
+        }
+        return msgs;
+    }, [maxMessages]);
+    const appendMessage = useCallback((message) => {
+        setMessages(prev => trimToMax([...prev, message]));
+    }, [trimToMax]);
+    const updateMessage = useCallback((id, update) => {
+        setMessages(prev => prev.map(msg => {
+            if (msg.id !== id)
+                return msg;
+            const partial = typeof update === 'function' ? update(msg) : update;
+            return { ...msg, ...partial };
+        }));
+    }, []);
+    const removeMessage = useCallback((id) => {
+        setMessages(prev => prev.filter(msg => msg.id !== id));
+    }, []);
+    const clearMessages = useCallback(() => {
+        setMessages([]);
+    }, []);
+    const getMessage = useCallback((id) => {
+        return messagesRef.current.find(msg => msg.id === id);
+    }, []);
+    return {
+        messages,
+        setMessages,
+        appendMessage,
+        updateMessage,
+        removeMessage,
+        clearMessages,
+        getMessage,
+    };
+}
+
+export { useChatMessages };
+//# sourceMappingURL=useChatMessages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChatMessages.js","sources":["../../../../../../src/components/editor/ChatPanel/useChatMessages.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AASM;;;AAKJ;AACA;AAEA;;;;AAKI;AACF;AAIF;AAEI;AACF;;;AAaM;AAAmB;AACnB;AACA;;;AAOR;;;AAIA;;;AAIA;AACE;;;;;;;;;;;AAYJ;;"}

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

@@ -0,0 +1,71 @@
+"use client";
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+function useChatScroll(options) {
+    const { messages, enabled = true, threshold = 100 } = options;
+    const scrollContainerRef = useRef(null);
+    const [isAtBottom, setIsAtBottom] = useState(true);
+    const [hasNewMessages, setHasNewMessages] = useState(false);
+    const prevMessageCountRef = useRef(messages.length);
+    const checkIfAtBottom = useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return true;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        return scrollHeight - scrollTop - clientHeight <= threshold;
+    }, [threshold]);
+    const scrollToBottom = useCallback((behavior = 'auto') => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        container.scrollTo({
+            top: container.scrollHeight,
+            behavior,
+        });
+        setIsAtBottom(true);
+        setHasNewMessages(false);
+    }, []);
+    // Listen for scroll events to track position
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const handleScroll = () => {
+            const atBottom = checkIfAtBottom();
+            setIsAtBottom(atBottom);
+            if (atBottom) {
+                setHasNewMessages(false);
+            }
+        };
+        container.addEventListener('scroll', handleScroll, { passive: true });
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, [checkIfAtBottom]);
+    // Auto-scroll or show indicator on new messages
+    useEffect(() => {
+        const currentCount = messages.length;
+        const prevCount = prevMessageCountRef.current;
+        prevMessageCountRef.current = currentCount;
+        if (currentCount <= prevCount)
+            return;
+        if (!enabled)
+            return;
+        if (isAtBottom) {
+            // Use requestAnimationFrame for DOM to update first
+            requestAnimationFrame(() => {
+                scrollToBottom();
+            });
+        }
+        else {
+            setHasNewMessages(true);
+        }
+    }, [messages.length, enabled, isAtBottom, scrollToBottom]);
+    return {
+        scrollContainerRef,
+        isAtBottom,
+        hasNewMessages,
+        scrollToBottom,
+    };
+}
+
+export { useChatScroll };
+//# sourceMappingURL=useChatScroll.js.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,10 @@
+import './../../../assets/src/components/editor/PropertyInspector/PropertyGroup.css.ts.vanilla-Co4n5a98.css';
+
+var groupDivider = 'PropertyGroup_groupDivider__1bdct6w2';
+var groupLine = 'PropertyGroup_groupLine__1bdct6w4';
+var groupRoot = 'PropertyGroup_groupRoot__1bdct6w1';
+var groupTitle = 'PropertyGroup_groupTitle__1bdct6w3';
+var indentVar = 'var(--indentVar__1bdct6w0)';
+
+export { groupDivider, groupLine, groupRoot, groupTitle, indentVar };
+//# sourceMappingURL=PropertyGroup.css.js.map

package/dist/esm/components/editor/PropertyInspector/PropertyGroup.css.js.map

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

package/dist/esm/components/editor/PropertyInspector/PropertyGroup.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
+import { vars } from '../../../theme/contract.css.js';
+import { groupDivider, groupLine, groupTitle, indentVar, groupRoot } from './PropertyGroup.css.js';
+
+// --- Component ---
+const PropertyGroup = ({ title, children, indent = 0, disabled = false, className, style, testId, ref, ...rest }) => {
+    return (jsxs("div", { ref: ref, className: cx(groupRoot, className), style: {
+            ...style,
+            ...assignInlineVars({
+                [indentVar]: `calc(${indent} * ${vars.spacing.xl})`,
+            }),
+            opacity: disabled ? 0.5 : 1,
+            pointerEvents: disabled ? 'none' : 'auto',
+        }, "data-testid": testId, ...rest, children: [title != null && (jsxs("div", { className: groupDivider, children: [jsx("span", { className: groupLine }), jsx("span", { className: groupTitle, children: title }), jsx("span", { className: groupLine })] })), children] }));
+};
+PropertyGroup.displayName = 'PropertyGroup';
+
+export { PropertyGroup };
+//# sourceMappingURL=PropertyGroup.js.map

package/dist/esm/components/editor/PropertyInspector/PropertyGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyGroup.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertyGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAeA;AAEO;AAYL;AAKM;AACA;;;;;AAKD;AAcP;AAEA;;"}

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

@@ -0,0 +1,13 @@
+import './../../../assets/src/components/editor/PropertyInspector/PropertyPanel.css.ts.vanilla-RYv_XgOu.css';
+
+var contentBottomSpacingVar = 'var(--contentBottomSpacingVar__151bru71)';
+var contentTopSpacingVar = 'var(--contentTopSpacingVar__151bru70)';
+var panelContent = 'PropertyPanel_panelContent__151bru76';
+var panelFooter = 'PropertyPanel_panelFooter__151bru77';
+var panelHeader = 'PropertyPanel_panelHeader__151bru73';
+var panelRoot = 'PropertyPanel_panelRoot__151bru72';
+var searchInputBase = 'PropertyPanel_searchInputBase__151bru75';
+var searchWrapper = 'PropertyPanel_searchWrapper__151bru74';
+
+export { contentBottomSpacingVar, contentTopSpacingVar, panelContent, panelFooter, panelHeader, panelRoot, searchInputBase, searchWrapper };
+//# sourceMappingURL=PropertyPanel.css.js.map

package/dist/esm/components/editor/PropertyInspector/PropertyPanel.css.js.map

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

package/dist/esm/components/editor/PropertyInspector/PropertyPanel.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo, createContext, useContext } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
+import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
+import { contentBottomSpacingVar, contentTopSpacingVar, panelContent, panelHeader, searchWrapper, searchInputBase, panelFooter, panelRoot } from './PropertyPanel.css.js';
+
+// --- Context ---
+const PropertyPanelContext = 
+/*#__PURE__*/ createContext(null);
+/**
+ * Returns the PropertyPanel context value, or null if not inside a PropertyPanel.
+ * Child components use this to inherit size and search query from the panel.
+ */
+function usePropertyPanelContext() {
+    return useContext(PropertyPanelContext);
+}
+const SEARCH_SIZE_MAP = {
+    sm: {
+        height: 20,
+        fontSize: 'var(--etui-font-size-md)',
+        padding: 'var(--etui-spacing-sm)',
+    },
+    md: {
+        height: 24,
+        fontSize: 'var(--etui-font-size-md)',
+        padding: 'var(--etui-spacing-md)',
+    },
+    lg: {
+        height: 28,
+        fontSize: 'var(--etui-font-size-lg)',
+        padding: 'var(--etui-spacing-md)',
+    },
+};
+// --- Component ---
+const PropertyPanel = ({ children, header, footer, size = 'md', maxHeight, searchable = false, searchPlaceholder = 'Search properties...', onSearchChange, contentTopSpacing, contentBottomSpacing, className, style, testId, ref, ...rest }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const handleSearchChange = useCallback((e) => {
+        const query = e.target.value;
+        setSearchQuery(query);
+        onSearchChange?.(query);
+    }, [onSearchChange]);
+    const contextValue = useMemo(() => ({
+        size,
+        searchQuery: searchQuery.toLowerCase(),
+    }), [size, searchQuery]);
+    const hasHeader = header != null || searchable;
+    const hasFooter = footer != null;
+    const sizeConfig = SEARCH_SIZE_MAP[size];
+    const contentStyle = assignInlineVars({
+        [contentTopSpacingVar]: contentTopSpacing != null
+            ? `${contentTopSpacing}px`
+            : 'var(--etui-spacing-sm)',
+        [contentBottomSpacingVar]: contentBottomSpacing != null
+            ? `${contentBottomSpacing}px`
+            : 'var(--etui-spacing-md)',
+    });
+    const content = (jsx("div", { className: panelContent, style: contentStyle, children: children }));
+    return (jsx(PropertyPanelContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, role: "region", "aria-label": "Properties", className: cx(panelRoot, className), style: style, "data-testid": testId, ...rest, children: [hasHeader && (jsxs("div", { className: panelHeader, children: [header, searchable && (jsx("div", { className: searchWrapper, children: jsx("input", { type: "search", role: "searchbox", "aria-label": "Search properties", placeholder: searchPlaceholder, value: searchQuery, onChange: handleSearchChange, className: searchInputBase, style: {
+                                    height: `${sizeConfig.height}px`,
+                                    fontSize: sizeConfig.fontSize,
+                                    padding: `0 ${sizeConfig.padding}`,
+                                } }) }))] })), maxHeight != null ? (jsx(ScrollArea, { maxHeight: maxHeight, direction: "vertical", scrollbarVisibility: "auto", fadeMask: true, children: content })) : (content), hasFooter && jsx("div", { className: panelFooter, children: footer })] }) }));
+};
+PropertyPanel.displayName = 'PropertyPanel';
+
+export { PropertyPanel, PropertyPanelContext, usePropertyPanelContext };
+//# sourceMappingURL=PropertyPanel.js.map

package/dist/esm/components/editor/PropertyInspector/PropertyPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyPanel.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertyPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA4BA;AAEA;AACE;AAEF;;;AAGG;;AAED;AACF;AAYA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;;AAGH;;;AAsBE;AAEI;;AAEA;AACF;AAIF;;AAGI;AACD;AAIH;AACA;AAEA;;AAGE;;AAGI;AACJ;;AAGI;AACL;AAED;AAMA;AAyBkB;;AAEA;;AAyBpB;AAEA;;"}

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

@@ -0,0 +1,15 @@
+import './../../../assets/src/components/editor/PropertyInspector/PropertyRow.css.ts.vanilla-C3YZnnHb.css';
+
+var RESET_BUTTON_CLASS = 'property-row-reset';
+var controlRatioVar = 'var(--controlRatioVar__1ds48411)';
+var fullWidthControl = 'PropertyRow_fullWidthControl__1ds48417';
+var fullWidthLabel = 'PropertyRow_fullWidthLabel__1ds48414';
+var modifiedDot = 'PropertyRow_modifiedDot__1ds48415';
+var resetButton = 'PropertyRow_resetButton__1ds48418';
+var rowControl = 'PropertyRow_rowControl__1ds48416';
+var rowLabel = 'PropertyRow_rowLabel__1ds48413';
+var rowRoot = 'PropertyRow_rowRoot__1ds48412';
+var splitRatioVar = 'var(--splitRatioVar__1ds48410)';
+
+export { RESET_BUTTON_CLASS, controlRatioVar, fullWidthControl, fullWidthLabel, modifiedDot, resetButton, rowControl, rowLabel, rowRoot, splitRatioVar };
+//# sourceMappingURL=PropertyRow.css.js.map

package/dist/esm/components/editor/PropertyInspector/PropertyRow.css.js.map

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

package/dist/esm/components/editor/PropertyInspector/PropertyRow.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
+import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
+import { usePropertyPanelContext } from './PropertyPanel.js';
+import { modifiedDot, controlRatioVar, splitRatioVar, fullWidthLabel, fullWidthControl, rowLabel, rowControl, resetButton, RESET_BUTTON_CLASS, rowRoot } from './PropertyRow.css.js';
+
+const ROW_SIZE_MAP = {
+    sm: {
+        minHeight: 22,
+        fontSize: 'var(--etui-font-size-md)',
+        resetIconSize: 10,
+    },
+    md: {
+        minHeight: 26,
+        fontSize: 'var(--etui-font-size-md)',
+        resetIconSize: 12,
+    },
+    lg: {
+        minHeight: 30,
+        fontSize: 'var(--etui-font-size-lg)',
+        resetIconSize: 14,
+    },
+};
+// --- Reset icon ---
+const ResetIcon = ({ size }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: [jsx("path", { d: "M2 4.5h6.5a2 2 0 0 1 0 4H6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M4 2.5L2 4.5L4 6.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+// --- Component ---
+const PropertyRow = ({ label, tooltip, children, fullWidth = false, splitRatio = [40, 60], modified = false, disabled = false, visible = true, size: sizeProp, action, onLabelContextMenu, onReset, className, style, testId, ref, ...rest }) => {
+    const panelCtx = usePropertyPanelContext();
+    const size = sizeProp ?? panelCtx?.size ?? 'md';
+    const sizeConfig = ROW_SIZE_MAP[size];
+    const handleResetClick = useCallback((e) => {
+        e.stopPropagation();
+        onReset?.();
+    }, [onReset]);
+    const modifiedDotEl = modified ? (jsx("span", { className: modifiedDot, "aria-label": "Modified", "data-testid": "modified-dot" })) : null;
+    const labelText = jsx("span", { children: label });
+    const labelElement = tooltip ? (jsx(Tooltip, { title: tooltip, children: jsxs("span", { style: { display: 'contents' }, children: [modifiedDotEl, labelText] }) })) : (jsxs(Fragment, { children: [modifiedDotEl, labelText] }));
+    const inlineVars = assignInlineVars({
+        [splitRatioVar]: `${splitRatio[0]}%`,
+        [controlRatioVar]: `${splitRatio[1]}%`,
+    });
+    return (jsxs("div", { ref: ref, className: cx(rowRoot, className), style: {
+            ...style,
+            ...inlineVars,
+            display: visible ? 'flex' : 'none',
+            flexDirection: fullWidth ? 'column' : 'row',
+            alignItems: fullWidth ? 'stretch' : 'center',
+            minHeight: `${sizeConfig.minHeight}px`,
+            opacity: disabled ? 0.5 : 1,
+            pointerEvents: disabled ? 'none' : 'auto',
+        }, "data-testid": testId, ...rest, children: [fullWidth ? (jsxs(Fragment, { children: [jsx("div", { className: fullWidthLabel, onContextMenu: onLabelContextMenu, style: {
+                            fontSize: sizeConfig.fontSize,
+                            fontWeight: modified
+                                ? 'var(--etui-font-weight-medium)'
+                                : 'var(--etui-font-weight-normal)',
+                        }, children: labelElement }), jsx("div", { className: fullWidthControl, children: children })] })) : (jsxs(Fragment, { children: [jsx("div", { className: rowLabel, onContextMenu: onLabelContextMenu, style: {
+                            fontSize: sizeConfig.fontSize,
+                            fontWeight: modified
+                                ? 'var(--etui-font-weight-medium)'
+                                : 'var(--etui-font-weight-normal)',
+                        }, children: labelElement }), jsx("div", { className: rowControl, children: children })] })), action, onReset && (jsx("span", { className: cx(RESET_BUTTON_CLASS, resetButton), role: "button", tabIndex: 0, "aria-label": "Reset to default", onClick: handleResetClick, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        onReset();
+                    }
+                }, "data-testid": "reset-button", children: jsx(ResetIcon, { size: sizeConfig.resetIconSize }) }))] }));
+};
+PropertyRow.displayName = 'PropertyRow';
+
+export { PropertyRow };
+//# sourceMappingURL=PropertyRow.js.map

package/dist/esm/components/editor/PropertyInspector/PropertyRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyRow.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertyRow.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAgCA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;;AAGH;AAEA;AAyBA;AAEO;AAoBL;;AAEA;AAEA;;;AAIE;;AAYF;AAEA;;;;AAiBC;AAED;AAKM;AACA;;;;AAIA;;;;;AAcM;AACE;AACA;;;AAcF;AACE;AACA;;AAmBJ;;AAEE;;AAEJ;AAQV;AAEA;;"}