entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/controls/TreeView/useTreeState.js

@@ -0,0 +1,155 @@
+"use client";
+import { useState, useMemo, useCallback } from 'react';
+
+/**
+ * Flatten tree into a list of visible nodes, respecting expansion state.
+ */
+function flattenTree(nodes, expandedSet, depth = 0, parentId = null) {
+    const result = [];
+    for (const node of nodes) {
+        result.push({ node, depth, parentId });
+        if (node.children && node.children.length > 0 && expandedSet.has(node.id)) {
+            result.push(...flattenTree(node.children, expandedSet, depth + 1, node.id));
+        }
+    }
+    return result;
+}
+/**
+ * Collect all node IDs from a tree for "expand all" or "select all".
+ */
+function collectAllIds(nodes) {
+    const ids = [];
+    for (const node of nodes) {
+        ids.push(node.id);
+        if (node.children) {
+            ids.push(...collectAllIds(node.children));
+        }
+    }
+    return ids;
+}
+function useTreeState({ nodes, expandedIds: controlledExpanded, defaultExpandedIds, selectedIds: controlledSelected, defaultSelectedIds, selectionMode, expandOnSelect = false, onExpandedChange, onSelectionChange, }) {
+    // Internal expansion state
+    const [internalExpanded, setInternalExpanded] = useState(() => new Set(defaultExpandedIds ?? []));
+    const expandedSet = controlledExpanded
+        ? new Set(controlledExpanded)
+        : internalExpanded;
+    // Internal selection state
+    const [internalSelected, setInternalSelected] = useState(() => new Set(defaultSelectedIds ?? []));
+    const selectedSet = controlledSelected
+        ? new Set(controlledSelected)
+        : internalSelected;
+    // Focused node
+    const [focusedId, setFocused] = useState(null);
+    // Flatten visible nodes
+    const visibleNodes = useMemo(() => flattenTree(nodes, expandedSet), [nodes, expandedSet]);
+    // Toggle expansion
+    const toggleExpand = useCallback((id) => {
+        const next = new Set(expandedSet);
+        if (next.has(id)) {
+            next.delete(id);
+        }
+        else {
+            next.add(id);
+        }
+        if (controlledExpanded === undefined) {
+            setInternalExpanded(next);
+        }
+        onExpandedChange?.([...next]);
+    }, [expandedSet, controlledExpanded, onExpandedChange]);
+    // Selection
+    const select = useCallback((id, mode) => {
+        if (selectionMode === 'none')
+            return;
+        let next;
+        if (selectionMode === 'single') {
+            next = new Set([id]);
+        }
+        else {
+            // multiple mode
+            if (mode === 'replace') {
+                next = new Set([id]);
+            }
+            else if (mode === 'toggle') {
+                next = new Set(selectedSet);
+                if (next.has(id)) {
+                    next.delete(id);
+                }
+                else {
+                    next.add(id);
+                }
+            }
+            else {
+                // range — select from last selected to this id
+                const visibleIds = visibleNodes.map(vn => vn.node.id);
+                const lastSelected = [...selectedSet].pop();
+                if (!lastSelected) {
+                    next = new Set([id]);
+                }
+                else {
+                    const startIdx = visibleIds.indexOf(lastSelected);
+                    const endIdx = visibleIds.indexOf(id);
+                    if (startIdx === -1 || endIdx === -1) {
+                        next = new Set([id]);
+                    }
+                    else {
+                        const from = Math.min(startIdx, endIdx);
+                        const to = Math.max(startIdx, endIdx);
+                        next = new Set(selectedSet);
+                        for (let i = from; i <= to; i++) {
+                            const nodeId = visibleIds[i];
+                            if (nodeId !== undefined) {
+                                next.add(nodeId);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        if (controlledSelected === undefined) {
+            setInternalSelected(next);
+        }
+        onSelectionChange?.([...next]);
+        // Expand on select
+        if (expandOnSelect && !expandedSet.has(id)) {
+            // Check if node has children
+            const flat = flattenTree(nodes, new Set(collectAllIds(nodes)));
+            const targetNode = flat.find(fn => fn.node.id === id);
+            if (targetNode?.node.children && targetNode.node.children.length > 0) {
+                toggleExpand(id);
+            }
+        }
+    }, [
+        selectionMode,
+        selectedSet,
+        controlledSelected,
+        onSelectionChange,
+        expandOnSelect,
+        expandedSet,
+        nodes,
+        visibleNodes,
+        toggleExpand,
+    ]);
+    // Select all visible nodes
+    const selectAll = useCallback(() => {
+        if (selectionMode !== 'multiple')
+            return;
+        const allIds = new Set(visibleNodes.map(vn => vn.node.id));
+        if (controlledSelected === undefined) {
+            setInternalSelected(allIds);
+        }
+        onSelectionChange?.([...allIds]);
+    }, [selectionMode, visibleNodes, controlledSelected, onSelectionChange]);
+    return {
+        expandedSet,
+        selectedSet,
+        focusedId,
+        visibleNodes,
+        toggleExpand,
+        select,
+        setFocused,
+        selectAll,
+    };
+}
+
+export { useTreeState };
+//# sourceMappingURL=useTreeState.js.map

package/dist/esm/components/controls/TreeView/useTreeState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTreeState.js","sources":["../../../../../../src/components/controls/TreeView/useTreeState.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAkCA;;AAEG;AACH;;AAOE;;;;;;AAQA;AACF;AAEA;;AAEG;AACH;;AAEE;AACE;AACA;;;;AAIF;AACF;AAEM;;AAYJ;;AAIE;;;AAIF;;AAIE;;;;;;;AAaF;AAEI;AACA;AACE;;;AAEA;;AAEF;;;AAGA;;;;;;AAUA;AAEA;;;;;AAIE;;;AAEO;AACL;AACA;AACE;;;AAEA;;;;;AAIF;;;;;;;;;;;;;;AAYI;AACA;AACE;AACA;AACE;;;;;;;AAQZ;;;AAGA;;;;AAKE;AACA;AACA;;;;AAIJ;;;;;;;;;;AAWC;;AAIH;;;;AAGE;;;AAGA;;;;;;;;;;;;AAaJ;;"}

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

@@ -0,0 +1,13 @@
+import './../../../assets/src/components/controls/VectorInput/VectorInput.css.ts.vanilla-BJma3iQ4.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var axisColorVar = 'var(--axisColorVar__1osrtmk0)';
+var axisInputStyle = 'VectorInput_axisInputStyle__1osrtmk6';
+var axisLabelRecipe = createRuntimeFn({defaultClassName:'VectorInput_axisLabelRecipe__1osrtmk7',variantClassNames:{size:{sm:'VectorInput_axisLabelRecipe_size_sm__1osrtmk8',md:'VectorInput_axisLabelRecipe_size_md__1osrtmk9',lg:'VectorInput_axisLabelRecipe_size_lg__1osrtmka'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var gapVar = 'var(--gapVar__1osrtmk1)';
+var linkButtonRecipe = createRuntimeFn({defaultClassName:'VectorInput_linkButtonRecipe__1osrtmkb',variantClassNames:{active:{true:'VectorInput_linkButtonRecipe_active_true__1osrtmkc',false:'VectorInput_linkButtonRecipe_active_false__1osrtmkd'},size:{sm:'VectorInput_linkButtonRecipe_size_sm__1osrtmke',md:'VectorInput_linkButtonRecipe_size_md__1osrtmkf',lg:'VectorInput_linkButtonRecipe_size_lg__1osrtmkg'}},defaultVariants:{active:false,size:'md'},compoundVariants:[]});
+var vectorContainerStyle = 'VectorInput_vectorContainerStyle__1osrtmk2';
+var vectorRowRecipe = createRuntimeFn({defaultClassName:'VectorInput_vectorRowRecipe__1osrtmk3',variantClassNames:{direction:{row:'VectorInput_vectorRowRecipe_direction_row__1osrtmk4',column:'VectorInput_vectorRowRecipe_direction_column__1osrtmk5'}},defaultVariants:{direction:'row'},compoundVariants:[]});
+
+export { axisColorVar, axisInputStyle, axisLabelRecipe, gapVar, linkButtonRecipe, vectorContainerStyle, vectorRowRecipe };
+//# sourceMappingURL=VectorInput.css.js.map

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

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

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

@@ -0,0 +1,130 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, useCallback } from 'react';
+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 = {
+    xyz: ['X', 'Y', 'Z', 'W'],
+    rgba: ['R', 'G', 'B', 'A'],
+    uvw: ['U', 'V', 'W'],
+};
+// --- Color presets ---
+const SPATIAL_COLORS = ['#EF4444', '#22C55E', '#3B82F6', '#A855F7'];
+const COLOR_COLORS = ['#EF4444', '#22C55E', '#3B82F6', '#FFFFFF'];
+function getAxisColor(colorPreset, axisColors, axisIndex) {
+    if (colorPreset === 'custom' && axisColors) {
+        return axisColors[axisIndex] ?? null;
+    }
+    if (colorPreset === 'spatial') {
+        return SPATIAL_COLORS[axisIndex] ?? null;
+    }
+    if (colorPreset === 'color') {
+        return COLOR_COLORS[axisIndex] ?? null;
+    }
+    // 'none' — will be resolved via theme
+    return null;
+}
+function getAxisLabels(labelPreset, axisLabels, dimension) {
+    if (labelPreset === 'custom' && axisLabels) {
+        return axisLabels;
+    }
+    const preset = LABEL_PRESETS[labelPreset];
+    if (preset) {
+        return preset.slice(0, dimension);
+    }
+    return Array.from({ length: dimension }, (_, i) => String(i));
+}
+// 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" }) }));
+/**
+ * A grouped numeric input for Vec2, Vec3, and Vec4 vectors.
+ *
+ * Used for position, rotation, scale, color channels, UV coordinates,
+ * bounding box extents, and more. Composes NumberInput with per-axis labels,
+ * optional color coding, and linked/unlinked proportional editing.
+ *
+ * @example
+ * ```tsx
+ * <VectorInput
+ *   label="Position"
+ *   value={[0, 0, 0]}
+ *   onChange={(val) => setPosition(val)}
+ *   unit="px"
+ * />
+ * ```
+ */
+const VectorInput = ({ value: controlledValue, defaultValue, dimension = 3, labelPreset = 'xyz', axisLabels: customAxisLabels, colorPreset = 'spatial', axisColors: customAxisColors, min, max, step, precisionStep, largeStep, precision, unit, size = 'md', label, helperText, error = false, errorMessage, disabled = false, showLink = false, defaultLinked = false, linked: controlledLinked, onLinkedChange, direction = 'row', gap = 2, onChange, onChangeComplete, className, testId, ...rest }) => {
+    // Internal value state (uncontrolled mode)
+    const [internalValue, setInternalValue] = useState(() => defaultValue ?? Array.from({ length: dimension }, () => 0));
+    const currentValue = controlledValue ?? internalValue;
+    // Internal linked state (uncontrolled mode)
+    const [internalLinked, setInternalLinked] = useState(defaultLinked);
+    const isLinked = controlledLinked ?? internalLinked;
+    // Ref to track value before linked changes for proportional math
+    const prevValueRef = useRef(currentValue);
+    // Keep prevValueRef up to date when value changes externally
+    React.useEffect(() => {
+        prevValueRef.current = currentValue;
+    }, [currentValue]);
+    // Handle link toggle
+    const handleLinkToggle = useCallback(() => {
+        const newLinked = !isLinked;
+        if (controlledLinked === undefined) {
+            setInternalLinked(newLinked);
+        }
+        onLinkedChange?.(newLinked);
+    }, [isLinked, controlledLinked, onLinkedChange]);
+    // Handle axis value change
+    const handleAxisChange = useCallback((axisIndex, newAxisValue) => {
+        const prevVector = prevValueRef.current;
+        let nextValue;
+        if (isLinked) {
+            const oldAxisValue = prevVector[axisIndex] ?? 0;
+            if (oldAxisValue !== 0) {
+                // Proportional scaling
+                const ratio = newAxisValue / oldAxisValue;
+                nextValue = prevVector.map((v, i) => i === axisIndex ? newAxisValue : v * ratio);
+            }
+            else {
+                // Additive delta when old value is 0
+                const delta = newAxisValue - oldAxisValue;
+                nextValue = prevVector.map((v, i) => i === axisIndex ? newAxisValue : v + delta);
+            }
+        }
+        else {
+            nextValue = currentValue.map((v, i) => i === axisIndex ? newAxisValue : v);
+        }
+        prevValueRef.current = nextValue;
+        if (controlledValue === undefined) {
+            setInternalValue(nextValue);
+        }
+        onChange?.(nextValue, axisIndex);
+    }, [isLinked, currentValue, controlledValue, onChange]);
+    // Handle commit (blur/Enter on any NumberInput)
+    const handleCommit = useCallback(() => {
+        onChangeComplete?.(prevValueRef.current);
+    }, [onChangeComplete]);
+    // Resolve labels
+    const labels = getAxisLabels(labelPreset, customAxisLabels, dimension);
+    const iconSize = size === 'sm' ? 12 : size === 'md' ? 14 : 16;
+    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);
+                        // 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';
+
+export { VectorInput };
+//# sourceMappingURL=VectorInput.js.map

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

@@ -0,0 +1 @@
+{"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,36 @@
+"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';
+
+// ─── Icons ───────────────────────────────────────────────────────
+const FileIcon = () => (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 ImageIcon = () => (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 CodeIcon = () => (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 SelectionIcon = () => (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 CloseIcon = () => (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 TYPE_ICONS = {
+    file: FileIcon,
+    image: ImageIcon,
+    code: CodeIcon,
+    selection: SelectionIcon,
+};
+// ─── 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] ?? FileIcon;
+    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(CloseIcon, {}) }))] }));
+});
+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":";;;;;;AAaA;AAEA;AAuBA;AA4BA;AAkBA;AA6BA;AAWA;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,17 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useCallback } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { contextChipIconStyle, contextChipLabelStyle, contextChipItemsStyle, contextChipDismissStyle, contextChipStyle } from './ChatPanel.css.js';
+
+const CloseIcon = () => (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 ChatContextChip = /*#__PURE__*/ React.memo(({ label, items, icon, onDismiss, className, style, testId, ref, ...rest }) => {
+    const handleDismiss = useCallback(() => {
+        onDismiss?.();
+    }, [onDismiss]);
+    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: handleDismiss, "aria-label": `Dismiss ${label}`, children: jsx(CloseIcon, {}) }))] }));
+});
+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":";;;;;;AAaA;AAWO;AAYH;;AAEA;AAEA;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/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;;"}