entangle-ui 0.3.0 → 0.5.0

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,33 @@
+"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';
+import { MiniWrenchIcon, MiniChevronIcon } from './ChatIcons.js';
+
+// ─── 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(MiniWrenchIcon, {}) }), 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(MiniChevronIcon, {}) }))] }), 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":";;;;;;;AAoBA;AAEA;AACE;AACA;AACA;AACA;;AAGF;AAEO;;AAeH;;;;AAIA;;;AAKA;;;AAoCW;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';
 

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

@@ -1 +1 @@
-{"version":3,"file":"PropertyGroup.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertyGroup.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAaA,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAsB;;;AAGtC,gBAAA,EAAA,KAAK,IAAI,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;AACpD,WAAA,EAAA,KAAK,KAAK,KAAK,CAAC,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,CAAA;AAC7B,kBAAA,EAAA,KAAK,KAAK,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;;AAE5D,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAG5B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;aAC3B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;MACtC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;CACpC;AAED,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAA;eACrB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAA;WAC/C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAA;;;iBAGhC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM,CAAA;;;CAGjE;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAA;;;gBAGnB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;CACzD;AAED;AAEO,MAAM,aAAa,GAAiC,CAAC,EAC1D,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,CAAC,EACV,QAAQ,GAAG,KAAK,EAChB,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,QACEA,IAAC,CAAA,eAAe,EACd,EAAA,GAAG,EAAE,GAAG,EAAA,SAAA,EACC,MAAM,EAAA,WAAA,EACJ,QAAQ,EAAA,MAAA,EACb,GAAG,EACT,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,aAAA,EACC,MAAM,EAAA,GACf,IAAI,EAAA,QAAA,EAAA,CAEP,KAAK,IAAI,IAAI,KACZA,IAAC,CAAA,kBAAkB,eACjBC,GAAC,CAAA,eAAe,EAAG,EAAA,CAAA,EACnBA,GAAC,CAAA,gBAAgB,cAAE,KAAK,EAAA,CAAoB,EAC5CA,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG,CACA,EAAA,CAAA,CACtB,EACA,QAAQ,CACO,EAAA,CAAA;AAEtB;AAEA,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
+{"version":3,"file":"PropertyGroup.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertyGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAeA;AAEO;AAYL;AAKM;AACA;;;;;AAKD;AAcP;AAEA;;"}

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

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

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

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

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

@@ -1,8 +1,10 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback, useMemo, createContext, useContext } from 'react';
-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 { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
+import { contentBottomSpacingVar, contentTopSpacingVar, panelContent, panelHeader, searchWrapper, searchInputBase, panelFooter, panelRoot } from './PropertyPanel.css.js';
 
 // --- Context ---
 const PropertyPanelContext = 
@@ -15,68 +17,24 @@ function usePropertyPanelContext() {
     return useContext(PropertyPanelContext);
 }
 const SEARCH_SIZE_MAP = {
-    sm: { height: 20, fontKey: 'md', paddingKey: 'sm' },
-    md: { height: 24, fontKey: 'md', paddingKey: 'md' },
-    lg: { height: 28, fontKey: 'lg', paddingKey: 'md' },
+    sm: {
+        height: 20,
+        fontSize: 'var(--etui-font-size-md)',
+        padding: 'var(--etui-spacing-sm)',
+    },
+    md: {
+        height: 24,
+        fontSize: 'var(--etui-font-size-md)',
+        padding: 'var(--etui-spacing-md)',
+    },
+    lg: {
+        height: 28,
+        fontSize: 'var(--etui-font-size-lg)',
+        padding: 'var(--etui-spacing-md)',
+    },
 };
-const StyledPanelRoot = styled.div `
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: ${props => props.theme.colors.background.primary};
-  color: ${props => props.theme.colors.text.primary};
-  font-family: ${props => props.theme.typography.fontFamily.sans};
-
-  ${props => processCss(props.$css, props.theme)}
-`;
-const StyledPanelHeader = styled.div `
-  flex-shrink: 0;
-  border-bottom: 1px solid ${props => props.theme.colors.border.default};
-`;
-const StyledSearchWrapper = styled.div `
-  padding: ${props => props.theme.spacing.sm}px
-    ${props => props.theme.spacing.md}px;
-`;
-const StyledSearchInput = styled.input `
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid ${props => props.theme.colors.border.default};
-  border-radius: ${props => props.theme.borderRadius.md}px;
-  background: ${props => props.theme.colors.surface.default};
-  color: ${props => props.theme.colors.text.primary};
-  height: ${props => SEARCH_SIZE_MAP[props.$size].height}px;
-  font-size: ${props => props.theme.typography.fontSize[SEARCH_SIZE_MAP[props.$size].fontKey]}px;
-  padding: 0
-    ${props => props.theme.spacing[SEARCH_SIZE_MAP[props.$size].paddingKey]}px;
-  font-family: inherit;
-  outline: none;
-  transition:
-    border-color ${props => props.theme.transitions.fast},
-    box-shadow ${props => props.theme.transitions.fast};
-
-  &:focus {
-    border-color: ${props => props.theme.colors.border.focus};
-    box-shadow: ${props => props.theme.shadows.focus};
-  }
-
-  &::placeholder {
-    color: ${props => props.theme.colors.text.muted};
-  }
-`;
-const StyledPanelContent = styled.div `
-  flex: 1;
-  min-height: 0;
-  padding: ${props => props.$contentTopSpacing ?? props.theme.spacing.sm}px
-    ${props => props.theme.spacing.md}px
-    ${props => props.$contentBottomSpacing ?? props.theme.spacing.md}px;
-  box-sizing: border-box;
-`;
-const StyledPanelFooter = styled.div `
-  flex-shrink: 0;
-  border-top: 1px solid ${props => props.theme.colors.border.default};
-`;
 // --- Component ---
-const PropertyPanel = ({ children, header, footer, size = 'md', maxHeight, searchable = false, searchPlaceholder = 'Search properties...', onSearchChange, contentTopSpacing, contentBottomSpacing, css, className, style, testId, ref, ...rest }) => {
+const PropertyPanel = ({ children, header, footer, size = 'md', maxHeight, searchable = false, searchPlaceholder = 'Search properties...', onSearchChange, contentTopSpacing, contentBottomSpacing, className, style, testId, ref, ...rest }) => {
     const [searchQuery, setSearchQuery] = useState('');
     const handleSearchChange = useCallback((e) => {
         const query = e.target.value;
@@ -89,8 +47,21 @@ const PropertyPanel = ({ children, header, footer, size = 'md', maxHeight, searc
     }), [size, searchQuery]);
     const hasHeader = header != null || searchable;
     const hasFooter = footer != null;
-    const content = (jsx(StyledPanelContent, { "$contentTopSpacing": contentTopSpacing, "$contentBottomSpacing": contentBottomSpacing, children: children }));
-    return (jsx(PropertyPanelContext.Provider, { value: contextValue, children: jsxs(StyledPanelRoot, { ref: ref, role: "region", "aria-label": "Properties", "$css": css, className: className, style: style, "data-testid": testId, ...rest, children: [hasHeader && (jsxs(StyledPanelHeader, { children: [header, searchable && (jsx(StyledSearchWrapper, { children: jsx(StyledSearchInput, { type: "search", role: "searchbox", "aria-label": "Search properties", placeholder: searchPlaceholder, value: searchQuery, onChange: handleSearchChange, "$size": size }) }))] })), maxHeight != null ? (jsx(ScrollArea, { maxHeight: maxHeight, direction: "vertical", scrollbarVisibility: "auto", fadeMask: true, children: content })) : (content), hasFooter && jsx(StyledPanelFooter, { children: footer })] }) }));
+    const sizeConfig = SEARCH_SIZE_MAP[size];
+    const contentStyle = assignInlineVars({
+        [contentTopSpacingVar]: contentTopSpacing != null
+            ? `${contentTopSpacing}px`
+            : 'var(--etui-spacing-sm)',
+        [contentBottomSpacingVar]: contentBottomSpacing != null
+            ? `${contentBottomSpacing}px`
+            : 'var(--etui-spacing-md)',
+    });
+    const content = (jsx("div", { className: panelContent, style: contentStyle, children: children }));
+    return (jsx(PropertyPanelContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, role: "region", "aria-label": "Properties", className: cx(panelRoot, className), style: style, "data-testid": testId, ...rest, children: [hasHeader && (jsxs("div", { className: panelHeader, children: [header, searchable && (jsx("div", { className: searchWrapper, children: jsx("input", { type: "search", role: "searchbox", "aria-label": "Search properties", placeholder: searchPlaceholder, value: searchQuery, onChange: handleSearchChange, className: searchInputBase, style: {
+                                    height: `${sizeConfig.height}px`,
+                                    fontSize: sizeConfig.fontSize,
+                                    padding: `0 ${sizeConfig.padding}`,
+                                } }) }))] })), maxHeight != null ? (jsx(ScrollArea, { maxHeight: maxHeight, direction: "vertical", scrollbarVisibility: "auto", fadeMask: true, children: content })) : (content), hasFooter && jsx("div", { className: panelFooter, children: footer })] }) }));
 };
 PropertyPanel.displayName = 'PropertyPanel';
 

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

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

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

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

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

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