entangle-ui 0.3.0 → 0.5.0

package/dist/esm/components/controls/VectorInput/VectorInput.js

@@ -1,9 +1,13 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useState, useRef, useCallback } from 'react';
-import styled from '@emotion/styled';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
 import { NumberInput } from '../NumberInput/NumberInput.js';
 import { FormLabel } from '../../form/FormLabel.js';
 import { FormHelperText } from '../../form/FormHelperText.js';
+import { cx } from '../../../utils/cx.js';
+import { vars } from '../../../theme/contract.css.js';
+import { axisInputStyle, axisColorVar, axisLabelRecipe, linkButtonRecipe, gapVar, vectorRowRecipe, vectorContainerStyle } from './VectorInput.css.js';
 
 // --- Label presets ---
 const LABEL_PRESETS = {
@@ -24,7 +28,7 @@ function getAxisColor(colorPreset, axisColors, axisIndex) {
     if (colorPreset === 'color') {
         return COLOR_COLORS[axisIndex] ?? null;
     }
-    // 'none' — will be resolved via theme in styled component
+    // 'none' — will be resolved via theme
     return null;
 }
 function getAxisLabels(labelPreset, axisLabels, dimension) {
@@ -37,84 +41,6 @@ function getAxisLabels(labelPreset, axisLabels, dimension) {
     }
     return Array.from({ length: dimension }, (_, i) => String(i));
 }
-// --- Styled components ---
-const StyledVectorContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-`;
-const StyledVectorRow = styled.div `
-  display: flex;
-  flex-direction: ${props => props.$direction};
-  gap: ${props => props.$gap}px;
-  align-items: ${props => (props.$direction === 'row' ? 'center' : 'stretch')};
-`;
-const StyledAxisInput = styled.div `
-  position: relative;
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 0;
-`;
-const axisLabelSizes = {
-    sm: { width: '16px', fontSizeKey: 'xs' },
-    md: { width: '18px', fontSizeKey: 'xs' },
-    lg: { width: '22px', fontSizeKey: 'sm' },
-};
-const StyledAxisLabel = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${props => axisLabelSizes[props.$size].width};
-  min-width: ${props => axisLabelSizes[props.$size].width};
-  height: ${props => axisLabelSizes[props.$size].width};
-  font-size: ${props => props.theme.typography.fontSize[axisLabelSizes[props.$size].fontSizeKey]}px;
-  font-weight: ${props => props.theme.typography.fontWeight.semibold};
-  color: ${props => props.$color ?? props.theme.colors.text.secondary};
-  background: ${props => props.$color
-    ? `${props.$color}33`
-    : `${props.theme.colors.text.secondary}33`};
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-  user-select: none;
-  flex-shrink: 0;
-  margin-right: ${props => props.theme.spacing.xs}px;
-`;
-const linkButtonSizes = {
-    sm: '20px',
-    md: '24px',
-    lg: '32px',
-};
-const StyledLinkButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${props => linkButtonSizes[props.$size]};
-  height: ${props => linkButtonSizes[props.$size]};
-  min-width: ${props => linkButtonSizes[props.$size]};
-  border: 1px solid ${props => props.theme.colors.border.default};
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-  background: ${props => props.$active ? `${props.theme.colors.accent.primary}22` : 'transparent'};
-  color: ${props => props.$active
-    ? props.theme.colors.accent.primary
-    : props.theme.colors.text.muted};
-  cursor: pointer;
-  padding: 0;
-  margin-left: ${props => props.theme.spacing.xs}px;
-  transition: all ${props => props.theme.transitions.fast};
-  flex-shrink: 0;
-
-  &:hover {
-    background: ${props => props.theme.colors.surface.hover};
-    color: ${props => props.$active
-    ? props.theme.colors.accent.primary
-    : props.theme.colors.text.secondary};
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
 // SVG icons for link/unlink
 const LinkIcon = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: jsx("path", { d: "M6.5 9.5L9.5 6.5M5.5 7.5L4.146 8.854a2 2 0 002.708 2.708L8.5 10.5M7.5 5.5l1.646-1.646a2 2 0 012.708 2.708L10.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 const UnlinkIcon = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: jsx("path", { d: "M5.5 7.5L4.146 8.854a2 2 0 002.708 2.708L8.5 10.5M7.5 5.5l1.646-1.646a2 2 0 012.708 2.708L10.5 8.5M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -189,12 +115,14 @@ const VectorInput = ({ value: controlledValue, defaultValue, dimension = 3, labe
     // Resolve labels
     const labels = getAxisLabels(labelPreset, customAxisLabels, dimension);
     const iconSize = size === 'sm' ? 12 : size === 'md' ? 14 : 16;
-    return (jsxs(StyledVectorContainer, { className: className, "data-testid": testId, role: "group", "aria-label": label ?? 'Vector input', ...rest, children: [label && jsx(FormLabel, { disabled: disabled, children: label }), jsxs(StyledVectorRow, { "$direction": direction, "$gap": gap, children: [Array.from({ length: dimension }, (_, i) => {
+    return (jsxs("div", { className: cx(vectorContainerStyle, className), "data-testid": testId, role: "group", "aria-label": label ?? 'Vector input', ...rest, children: [label && jsx(FormLabel, { disabled: disabled, children: label }), jsxs("div", { className: vectorRowRecipe({ direction }), style: assignInlineVars({ [gapVar]: `${gap}px` }), children: [Array.from({ length: dimension }, (_, i) => {
                         const axisLabel = labels[i] ?? String(i);
                         const axisValue = currentValue[i] ?? 0;
                         const axisColor = getAxisColor(colorPreset, customAxisColors, i);
-                        return (jsxs(StyledAxisInput, { "$direction": direction, children: [jsx(StyledAxisLabel, { "$color": axisColor, "$size": size, children: axisLabel }), jsx(NumberInput, { value: axisValue, onChange: (val) => handleAxisChange(i, val), onBlur: handleCommit, min: min, max: max, step: step, precisionStep: precisionStep, largeStep: largeStep, precision: precision, unit: unit, size: size, disabled: disabled, showStepButtons: false, "aria-label": `${axisLabel} axis` })] }, i));
-                    }), showLink && (jsx(StyledLinkButton, { type: "button", "$active": isLinked, "$size": size, onClick: handleLinkToggle, disabled: disabled, "aria-pressed": isLinked, "aria-label": isLinked ? 'Unlink axes' : 'Link axes', title: isLinked ? 'Unlink axes' : 'Link axes', children: isLinked ? (jsx(LinkIcon, { size: iconSize })) : (jsx(UnlinkIcon, { size: iconSize })) }))] }), (error && errorMessage) || helperText ? (jsx(FormHelperText, { error: error && !!errorMessage, children: error && errorMessage ? errorMessage : helperText })) : null] }));
+                        // Fallback to theme secondary text color when no axis color
+                        const resolvedColor = axisColor ?? vars.colors.text.secondary;
+                        return (jsxs("div", { className: axisInputStyle, children: [jsx("div", { className: axisLabelRecipe({ size }), style: assignInlineVars({ [axisColorVar]: resolvedColor }), children: axisLabel }), jsx(NumberInput, { value: axisValue, onChange: (val) => handleAxisChange(i, val), onBlur: handleCommit, min: min, max: max, step: step, precisionStep: precisionStep, largeStep: largeStep, precision: precision, unit: unit, size: size, disabled: disabled, showStepButtons: false, "aria-label": `${axisLabel} axis` })] }, i));
+                    }), showLink && (jsx("button", { type: "button", className: linkButtonRecipe({ active: isLinked, size }), onClick: handleLinkToggle, disabled: disabled, "aria-pressed": isLinked, "aria-label": isLinked ? 'Unlink axes' : 'Link axes', title: isLinked ? 'Unlink axes' : 'Link axes', children: isLinked ? (jsx(LinkIcon, { size: iconSize })) : (jsx(UnlinkIcon, { size: iconSize })) }))] }), (error && errorMessage) || helperText ? (jsx(FormHelperText, { error: error && !!errorMessage, children: error && errorMessage ? errorMessage : helperText })) : null] }));
 };
 VectorInput.displayName = 'VectorInput';
 

package/dist/esm/components/controls/VectorInput/VectorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"VectorInput.js","sources":["../../../../../../src/components/controls/VectorInput/VectorInput.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"VectorInput.js","sources":["../../../../../../src/components/controls/VectorInput/VectorInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAoBA;AAEA;;;AAGE;;AAGF;AAEA;AACA;AAEA;AAKE;AACE;;AAEF;AACE;;AAEF;AACE;;;AAGF;AACF;AAEA;AAKE;AACE;;AAEF;;;;;AAKF;AAEA;AACA;AAYA;AAYA;;;;;;;;;;;;;;;;AAgBG;;;AAmCD;AAGA;;;AAIA;;AAGA;;AAGA;AACE;AACF;;AAGA;AACE;AACA;;;AAGA;;;;AAME;AACA;;;AAIE;;AAEE;;;;;AAMA;;;;;;;AAWJ;AAEA;;;AAGA;;;AAMJ;AACE;AACF;;;;AAOA;;;;;;;AA+CM;AA4BR;AAEA;;"}

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

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

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

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

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

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useCallback } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { attachmentThumbnailStyle, attachmentChipIconStyle, attachmentChipNameStyle, attachmentChipRemoveStyle, attachmentChipStyle } from './ChatPanel.css.js';
+import { MiniSelectionIcon, MiniCodeIcon, MiniImageIcon, MiniFileIcon, MiniCloseIcon } from './ChatIcons.js';
+
+const TYPE_ICONS = {
+    file: MiniFileIcon,
+    image: MiniImageIcon,
+    code: MiniCodeIcon,
+    selection: MiniSelectionIcon,
+};
+// ─── Component ───────────────────────────────────────────────────
+const ChatAttachmentChip = 
+/*#__PURE__*/ React.memo(({ attachment, onRemove, onClick, removable = false, className, style, testId, ref, ...rest }) => {
+    const handleClick = useCallback(() => {
+        onClick?.(attachment);
+    }, [onClick, attachment]);
+    const handleRemove = useCallback((e) => {
+        e.stopPropagation();
+        onRemove?.(attachment.id);
+    }, [onRemove, attachment.id]);
+    const TypeIcon = TYPE_ICONS[attachment.type] ?? MiniFileIcon;
+    const isClickable = !!onClick;
+    return (jsxs("div", { ref: ref, className: cx(attachmentChipStyle, className), style: style, "data-testid": testId, "data-clickable": isClickable || undefined, onClick: isClickable ? handleClick : undefined, role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, ...rest, children: [attachment.type === 'image' && attachment.thumbnailUrl ? (jsx("img", { src: attachment.thumbnailUrl, alt: attachment.name, className: attachmentThumbnailStyle })) : (jsx("span", { className: attachmentChipIconStyle, children: jsx(TypeIcon, {}) })), jsx("span", { className: attachmentChipNameStyle, children: attachment.name }), removable && (jsx("button", { type: "button", className: attachmentChipRemoveStyle, onClick: handleRemove, "aria-label": `Remove ${attachment.name}`, children: jsx(MiniCloseIcon, {}) }))] }));
+});
+ChatAttachmentChip.displayName = 'ChatAttachmentChip';
+
+export { ChatAttachmentChip };
+//# sourceMappingURL=ChatAttachment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatAttachment.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatAttachment.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAqBA;AACE;AACA;AACA;AACA;;AAGF;;AAGE;AAYI;AACE;AACF;AAEA;;AAGI;;;AAMJ;AAEA;AAsCF;AAGJ;;"}

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

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

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

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

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

@@ -0,0 +1,34 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useCallback } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
+import { codeBlockHeaderStyle, codeBlockLanguageStyle, codeBlockActionsStyle, codeBlockCopyButtonStyle, codeBlockLineNumbersColumnStyle, codeBlockPreStyle, codeBlockMaxHeightVar, codeBlockContentWithLineNumbersStyle, codeBlockContentStyle, codeBlockContainerStyle } from './ChatPanel.css.js';
+
+// ─── Icons ───────────────────────────────────────────────────────
+const CopyIcon = () => (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }), jsx("path", { d: "M11 5V3.5A1.5 1.5 0 009.5 2H3.5A1.5 1.5 0 002 3.5V9.5A1.5 1.5 0 003.5 11H5", stroke: "currentColor", strokeWidth: "1.5" })] }));
+const CheckIcon = () => (jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M3 8.5L6.5 12L13 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+// ─── Component ───────────────────────────────────────────────────
+const ChatCodeBlock = /*#__PURE__*/ React.memo(({ code, language, copyable = true, lineNumbers = false, maxHeight = 400, actions, className, style, testId, ref, ...rest }) => {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = useCallback(() => {
+        navigator.clipboard
+            .writeText(code)
+            .then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        })
+            .catch(() => {
+            // Fallback: older browsers — no-op
+        });
+    }, [code]);
+    const lines = code.split('\n');
+    const showHeader = language != null || copyable || actions != null;
+    return (jsxs("div", { ref: ref, className: cx(codeBlockContainerStyle, className), style: style, "data-testid": testId, ...rest, children: [showHeader && (jsxs("div", { className: codeBlockHeaderStyle, children: [language != null && (jsx("span", { className: codeBlockLanguageStyle, children: language })), jsxs("div", { className: codeBlockActionsStyle, children: [actions, copyable && (jsx("button", { type: "button", className: codeBlockCopyButtonStyle, onClick: handleCopy, "aria-label": copied ? 'Copied' : 'Copy code', children: copied ? jsx(CheckIcon, {}) : jsx(CopyIcon, {}) }))] })] })), jsxs("div", { className: cx(codeBlockContentStyle, lineNumbers && codeBlockContentWithLineNumbersStyle), style: assignInlineVars({
+                    [codeBlockMaxHeightVar]: `${maxHeight}px`,
+                }), "data-testid": testId ? `${testId}-content` : undefined, children: [lineNumbers && (jsx("div", { className: codeBlockLineNumbersColumnStyle, "aria-hidden": "true", "data-testid": testId ? `${testId}-line-numbers` : undefined, children: lines.map((_, i) => (jsx("div", { children: i + 1 }, i))) })), jsx("pre", { className: codeBlockPreStyle, children: jsx("code", { children: code }) })] })] }));
+});
+ChatCodeBlock.displayName = 'ChatCodeBlock';
+
+export { ChatCodeBlock };
+//# sourceMappingURL=ChatCodeBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatCodeBlock.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatCodeBlock.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAmBA;AAEA;AAyBA;AAkBA;AAEO;;AAgBH;AACE;;;;;AAKE;;;AAGA;AACJ;;;;AAwCQ;AACD;AAoBT;AAGF;;"}

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

@@ -0,0 +1,14 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { contextChipIconStyle, contextChipLabelStyle, contextChipItemsStyle, contextChipDismissStyle, contextChipStyle } from './ChatPanel.css.js';
+import { MiniCloseIcon } from './ChatIcons.js';
+
+const ChatContextChip = /*#__PURE__*/ React.memo(({ label, items, icon, onDismiss, className, style, testId, ref, ...rest }) => {
+    return (jsxs("div", { ref: ref, className: cx(contextChipStyle, className), style: style, "data-testid": testId, ...rest, children: [icon && jsx("span", { className: contextChipIconStyle, children: icon }), jsxs("span", { className: contextChipLabelStyle, children: [label, ":"] }), jsx("span", { className: contextChipItemsStyle, children: items.join(', ') }), onDismiss && (jsx("button", { type: "button", className: contextChipDismissStyle, onClick: onDismiss, "aria-label": `Dismiss ${label}`, children: jsx(MiniCloseIcon, {}) }))] }));
+});
+ChatContextChip.displayName = 'ChatContextChip';
+
+export { ChatContextChip };
+//# sourceMappingURL=ChatContextChip.js.map

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

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

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/ChatIcons.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Shared mini-icons for Chat components.
+ * These use smaller viewBoxes (8x8, 16x16) than the library's Icon system (24x24)
+ * and are designed for inline use in compact chat UI elements.
+ */
+const MiniCloseIcon = () => (jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M1 1l6 6M7 1L1 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+const MiniFileIcon = () => (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [jsx("path", { d: "M9 2H4.5A1.5 1.5 0 003 3.5v9A1.5 1.5 0 004.5 14h7a1.5 1.5 0 001.5-1.5V6L9 2z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }), jsx("path", { d: "M9 2v4h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" })] }));
+const MiniImageIcon = () => (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [jsx("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }), jsx("circle", { cx: "5.5", cy: "5.5", r: "1.5", fill: "currentColor" }), jsx("path", { d: "M2 11l3-3 2 2 3-3 4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const MiniCodeIcon = () => (jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M5 4L1 8l4 4M11 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const MiniSelectionIcon = () => (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [jsx("rect", { x: "2", y: "2", width: "5", height: "5", rx: "0.5", stroke: "currentColor", strokeWidth: "1.5" }), jsx("rect", { x: "9", y: "9", width: "5", height: "5", rx: "0.5", stroke: "currentColor", strokeWidth: "1.5" })] }));
+const MiniWrenchIcon = () => (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 MiniChevronIcon = ({ 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" }) }));
+
+export { MiniChevronIcon, MiniCloseIcon, MiniCodeIcon, MiniFileIcon, MiniImageIcon, MiniSelectionIcon, MiniWrenchIcon };
+//# sourceMappingURL=ChatIcons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatIcons.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatIcons.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;AAIG;;AAaI;;;AAqEA;AA6BA;AAyBA;;"}

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