entangle-ui 0.3.0 → 0.4.0

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

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useCallback } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { emptyStateIconStyle, emptyStateTitleStyle, emptyStateDescriptionStyle, emptyStateSuggestionsStyle, emptyStateSuggestionStyle, emptyStateStyle } from './ChatPanel.css.js';
+
+const ChatEmptyState = /*#__PURE__*/ React.memo(({ title, description, icon, suggestions, onSuggestionClick, className, style, testId, ref, ...rest }) => {
+    const handleSuggestionClick = useCallback((suggestion) => {
+        onSuggestionClick?.(suggestion);
+    }, [onSuggestionClick]);
+    return (jsxs("div", { ref: ref, className: cx(emptyStateStyle, className), style: style, "data-testid": testId, ...rest, children: [icon && jsx("div", { className: emptyStateIconStyle, children: icon }), title && jsx("div", { className: emptyStateTitleStyle, children: title }), description && (jsx("div", { className: emptyStateDescriptionStyle, children: description })), suggestions && suggestions.length > 0 && (jsx("div", { className: emptyStateSuggestionsStyle, children: suggestions.map(suggestion => (jsx("button", { type: "button", className: emptyStateSuggestionStyle, onClick: () => handleSuggestionClick(suggestion), children: suggestion }, suggestion))) }))] }));
+});
+ChatEmptyState.displayName = 'ChatEmptyState';
+
+export { ChatEmptyState };
+//# sourceMappingURL=ChatEmptyState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatEmptyState.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatEmptyState.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcO;AAaH;AAEI;AACF;;AAiCJ;AAGF;;"}

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

@@ -0,0 +1,67 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId, useCallback } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
+import { useChatInput } from './useChatInput.js';
+import { ChatAttachmentChip } from './ChatAttachment.js';
+import { inputPrefixStyle, inputAttachmentsStyle, inputWrapperStyle, inputTextareaStyle, inputMaxHeightVar, inputBottomBarStyle, inputStopButtonStyle, inputButtonStyle, inputContainerStyle } from './ChatPanel.css.js';
+
+// ─── Icons ───────────────────────────────────────────────────────
+const SendIcon = () => (jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M14.5 1.5L7 9M14.5 1.5L10 14.5L7 9M14.5 1.5L1.5 6L7 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const StopIcon = () => (jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1", fill: "currentColor" }) }));
+// ─── Component ───────────────────────────────────────────────────
+const ChatInput = /*#__PURE__*/ React.memo(({ value: controlledValue, onChange: controlledOnChange, onSubmit, onStop, placeholder = 'Type a message...', streaming = false, disabled = false, submitKey = 'enter', maxLines = 6, attachments, onRemoveAttachment, prefix, suffix, toolbar, className, style, testId, ref, ...rest }) => {
+    const inputId = useId();
+    const handleSubmit = useCallback((text) => {
+        onSubmit?.(text, attachments ?? []);
+    }, [onSubmit, attachments]);
+    const chatInput = useChatInput({
+        submitKey,
+        onSubmit: handleSubmit,
+        maxLines,
+    });
+    // Support controlled mode
+    const currentValue = controlledValue ?? chatInput.value;
+    const handleChange = useCallback((e) => {
+        if (controlledOnChange) {
+            controlledOnChange(e.target.value);
+        }
+        chatInput.handleChange(e);
+    }, [controlledOnChange, chatInput]);
+    const handleKeyDown = useCallback((e) => {
+        // In controlled mode, override the internal value check
+        if (controlledValue !== undefined) {
+            const isSubmitKey = submitKey === 'enter'
+                ? e.key === 'Enter' && !e.shiftKey
+                : e.key === 'Enter' && (e.ctrlKey || e.metaKey);
+            if (isSubmitKey && controlledValue.trim()) {
+                e.preventDefault();
+                onSubmit?.(controlledValue, attachments ?? []);
+                return;
+            }
+        }
+        chatInput.handleKeyDown(e);
+    }, [controlledValue, submitKey, onSubmit, attachments, chatInput]);
+    const handleSendClick = useCallback(() => {
+        const val = controlledValue ?? chatInput.value;
+        if (val.trim()) {
+            onSubmit?.(val, attachments ?? []);
+            if (controlledValue === undefined) {
+                chatInput.clear();
+            }
+        }
+    }, [controlledValue, chatInput, onSubmit, attachments]);
+    const lineHeight = 18; // approximate line-height in px
+    const maxHeightPx = `${maxLines * lineHeight}px`;
+    const shortcutLabel = submitKey === 'enter'
+        ? 'Enter to send, Shift+Enter for newline'
+        : 'Ctrl+Enter to send, Enter for newline';
+    return (jsxs("div", { ref: ref, className: cx(inputContainerStyle, className), style: style, "data-testid": testId, ...rest, children: [prefix && jsx("div", { className: inputPrefixStyle, children: prefix }), attachments && attachments.length > 0 && (jsx("div", { className: inputAttachmentsStyle, children: attachments.map(att => (jsx(ChatAttachmentChip, { attachment: att, removable: !!onRemoveAttachment, onRemove: onRemoveAttachment }, att.id))) })), jsxs("div", { className: inputWrapperStyle, children: [jsx("textarea", { ref: chatInput.textareaRef, id: `chat-input-${inputId}`, className: inputTextareaStyle, style: assignInlineVars({
+                            [inputMaxHeightVar]: maxHeightPx,
+                        }), value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": "Chat message input", "aria-keyshortcuts": shortcutLabel }), suffix, jsxs("div", { className: inputBottomBarStyle, children: [toolbar, streaming ? (jsx("button", { type: "button", className: inputStopButtonStyle, onClick: onStop, "aria-label": "Stop generating", children: jsx(StopIcon, {}) })) : (jsx("button", { type: "button", className: inputButtonStyle, onClick: handleSendClick, disabled: disabled || !currentValue.trim(), "aria-label": "Send message", children: jsx(SendIcon, {}) }))] })] })] }));
+});
+ChatInput.displayName = 'ChatInput';
+
+export { ChatInput };
+//# sourceMappingURL=ChatInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAoBA;AAEA;AAkBA;AAYA;AAEO;AAsBH;AAEA;;AAGE;;;AAMA;;AAED;;AAGD;AAEA;;AAGM;;AAEF;AACF;AAIF;;AAGI;AACE;;AAGI;AAEJ;;;;;;AAMF;AACF;AAIF;AACE;AACA;;AAEE;;;;;AAMJ;AACA;AAEA;AAEI;;;;;AAyEN;AAGF;;"}

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { inputToolbarStyle } from './ChatPanel.css.js';
+
+const ChatInputToolbar = /*#__PURE__*/ React.memo(({ children, className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(inputToolbarStyle, className), style: style, "data-testid": testId, role: "toolbar", "aria-label": "Chat input actions", ...rest, children: children }));
+});
+ChatInputToolbar.displayName = 'ChatInputToolbar';
+
+export { ChatInputToolbar };
+//# sourceMappingURL=ChatInputToolbar.js.map

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

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

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { ChatBubble } from './ChatBubble.js';
+import { messageTextStyle, messageAvatarStyle, messageAvatarImgStyle, messageContentStyle, bubbleErrorStyle, messageErrorCaptionStyle, messageErrorIconStyle, messageTimestampStyle, messageRecipe } from './ChatPanel.css.js';
+
+function formatTimestamp(iso) {
+    try {
+        const date = new Date(iso);
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    catch {
+        return '';
+    }
+}
+function getInitials(name) {
+    if (!name)
+        return '?';
+    return name
+        .split(' ')
+        .map(part => part[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+}
+const ErrorIcon = () => (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: [jsx("circle", { cx: "6", cy: "6", r: "5", stroke: "currentColor", strokeWidth: "1.2" }), jsx("line", { x1: "6", y1: "3.5", x2: "6", y2: "6.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), jsx("circle", { cx: "6", cy: "8.5", r: "0.6", fill: "currentColor" })] }));
+const ChatMessage = /*#__PURE__*/ React.memo(({ message, showTimestamp = false, showAvatar = false, actions, renderContent, className, style, testId, ref, ...rest }) => {
+    const { role, content, status, timestamp, avatar, displayName } = message;
+    const isError = status === 'error';
+    const renderedContent = renderContent ? (renderContent(content)) : (jsx("span", { className: messageTextStyle, children: content }));
+    return (jsxs("div", { ref: ref, className: cx(messageRecipe({ role }), className), style: style, "data-testid": testId, ...rest, children: [showAvatar && role !== 'system' && (jsx("div", { className: messageAvatarStyle, "aria-hidden": "true", children: avatar ? (jsx("img", { src: avatar, alt: displayName ?? role, className: messageAvatarImgStyle })) : (getInitials(displayName ?? role)) })), jsxs("div", { className: messageContentStyle, children: [jsx(ChatBubble, { role: role, className: isError ? bubbleErrorStyle : undefined, children: renderedContent }), isError && (jsxs("span", { className: messageErrorCaptionStyle, children: [jsx("span", { className: messageErrorIconStyle, children: jsx(ErrorIcon, {}) }), "Error generating response"] })), actions && jsx("div", { children: actions }), showTimestamp && timestamp && (jsx("span", { className: messageTimestampStyle, children: formatTimestamp(timestamp) }))] })] }));
+});
+ChatMessage.displayName = 'ChatMessage';
+
+export { ChatMessage };
+//# sourceMappingURL=ChatMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatMessage.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAkBA;AACE;AACE;AACA;;AACA;AACA;;AAEJ;AAEA;AACE;AAAW;AACX;;;;AAIG;AACA;AACL;AAEA;AAsBO;AAaH;AACA;;AAQA;AAiDF;AAGF;;"}

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

@@ -1,40 +1,20 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from '@emotion/styled';
-import { processCss } from '../../../utils/styledUtils.js';
+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';
 
-const StyledGroupRoot = styled.div `
-  display: flex;
-  flex-direction: column;
-  padding-left: ${props => props.$indent * props.theme.spacing.xl}px;
-  opacity: ${props => (props.$disabled ? 0.5 : 1)};
-  pointer-events: ${props => (props.$disabled ? 'none' : 'auto')};
-
-  ${props => processCss(props.$css, props.theme)}
-`;
-const StyledGroupDivider = styled.div `
-  display: flex;
-  align-items: center;
-  gap: ${props => props.theme.spacing.md}px;
-  padding: ${props => props.theme.spacing.sm}px
-    ${props => props.theme.spacing.md}px;
-`;
-const StyledGroupTitle = styled.span `
-  font-size: ${props => props.theme.typography.fontSize.xs}px;
-  color: ${props => props.theme.colors.text.muted};
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: ${props => props.theme.typography.fontWeight.medium};
-  white-space: nowrap;
-  flex-shrink: 0;
-`;
-const StyledGroupLine = styled.span `
-  flex: 1;
-  height: 1px;
-  background: ${props => props.theme.colors.border.default};
-`;
 // --- Component ---
-const PropertyGroup = ({ title, children, indent = 0, disabled = false, css, className, style, testId, ref, ...rest }) => {
-    return (jsxs(StyledGroupRoot, { ref: ref, "$indent": indent, "$disabled": disabled, "$css": css, className: className, style: style, "data-testid": testId, ...rest, children: [title != null && (jsxs(StyledGroupDivider, { children: [jsx(StyledGroupLine, {}), jsx(StyledGroupTitle, { children: title }), jsx(StyledGroupLine, {})] })), children] }));
+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';