entangle-ui 0.9.0 → 0.11.0

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

@@ -8,7 +8,9 @@ const ChatEmptyState = /*#__PURE__*/ React.memo(({ title, description, icon, sug
     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))) }))] }));
+    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';
 

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

@@ -1 +1 @@
-{"version":3,"file":"ChatEmptyState.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatEmptyState.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcO;AAaH;AAEI;AACF;;AAiCJ;AAGF;;"}
+{"version":3,"file":"ChatEmptyState.js","sources":["src/components/editor/ChatPanel/ChatEmptyState.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  emptyStateStyle,\n  emptyStateIconStyle,\n  emptyStateTitleStyle,\n  emptyStateDescriptionStyle,\n  emptyStateSuggestionsStyle,\n  emptyStateSuggestionStyle,\n} from './ChatPanel.css';\n\nimport type { ChatEmptyStateProps } from './ChatPanel.types';\n\nexport const ChatEmptyState = /*#__PURE__*/ React.memo<ChatEmptyStateProps>(\n  ({\n    title,\n    description,\n    icon,\n    suggestions,\n    onSuggestionClick,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const handleSuggestionClick = useCallback(\n      (suggestion: string) => {\n        onSuggestionClick?.(suggestion);\n      },\n      [onSuggestionClick]\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={cx(emptyStateStyle, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {icon && <div className={emptyStateIconStyle}>{icon}</div>}\n        {title && <div className={emptyStateTitleStyle}>{title}</div>}\n        {description && (\n          <div className={emptyStateDescriptionStyle}>{description}</div>\n        )}\n        {suggestions && suggestions.length > 0 && (\n          <div className={emptyStateSuggestionsStyle}>\n            {suggestions.map(suggestion => (\n              <button\n                key={suggestion}\n                type=\"button\"\n                className={emptyStateSuggestionStyle}\n                onClick={() => {\n                  handleSuggestionClick(suggestion);\n                }}\n              >\n                {suggestion}\n              </button>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nChatEmptyState.displayName = 'ChatEmptyState';\n"],"names":[],"mappings":";;;;;;AAiBO;AAaH;AAEI;AACF;AAIF;;;AA+BF;AAGF;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatIcons.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatIcons.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;AAIG;;AAaI;;;AAqEA;AA6BA;AAyBA;;"}
+{"version":3,"file":"ChatIcons.js","sources":["src/components/editor/ChatPanel/ChatIcons.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\n/**\n * Shared mini-icons for Chat components.\n * These use smaller viewBoxes (8x8, 16x16) than the library's Icon system (24x24)\n * and are designed for inline use in compact chat UI elements.\n */\n\nexport const MiniCloseIcon: React.FC = () => (\n  <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M1 1l6 6M7 1L1 7\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n\nexport const MiniFileIcon: React.FC = () => (\n  <svg\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <path\n      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\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinejoin=\"round\"\n    />\n    <path\n      d=\"M9 2v4h4\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport const MiniImageIcon: React.FC = () => (\n  <svg\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <rect\n      x=\"2\"\n      y=\"2\"\n      width=\"12\"\n      height=\"12\"\n      rx=\"1.5\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n    />\n    <circle cx=\"5.5\" cy=\"5.5\" r=\"1.5\" fill=\"currentColor\" />\n    <path\n      d=\"M2 11l3-3 2 2 3-3 4 4\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport const MiniCodeIcon: React.FC = () => (\n  <svg\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M5 4L1 8l4 4M11 4l4 4-4 4\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport const MiniSelectionIcon: React.FC = () => (\n  <svg\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <rect\n      x=\"2\"\n      y=\"2\"\n      width=\"5\"\n      height=\"5\"\n      rx=\"0.5\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n    />\n    <rect\n      x=\"9\"\n      y=\"9\"\n      width=\"5\"\n      height=\"5\"\n      rx=\"0.5\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n    />\n  </svg>\n);\n\nexport const MiniWrenchIcon: React.FC = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <path\n      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\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n    <path\n      d=\"M8.5 2.5L10 4L8 6L6.5 4.5\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport const MiniChevronIcon: React.FC<{ size?: number }> = ({ size = 10 }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 12 12\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M4.5 3L7.5 6L4.5 9\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n"],"names":[],"mappings":";;;AAIA;;;;AAIG;;AAaI;;;AAqEA;AA6BA;AAyBA;;"}

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

@@ -1,8 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useId, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { cx } from '../../../utils/cx.js';
+import React, { useId, useCallback } from 'react';
 import '../../Icons/AddIcon.js';
 import '../../Icons/AiChatIcon.js';
 import '../../Icons/AiSparklesIcon.js';
@@ -34,6 +33,7 @@ import '../../Icons/GridIcon.js';
 import '../../Icons/HeartIcon.js';
 import '../../Icons/HelpIcon.js';
 import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
 import '../../Icons/InfoIcon.js';
 import '../../Icons/LastIcon.js';
 import '../../Icons/LinkIcon.js';
@@ -89,9 +89,16 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
-import { useChatInput } from './useChatInput.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
+import { cx } from '../../../utils/cx.js';
 import { ChatAttachmentChip } from './ChatAttachment.js';
 import { inputPrefixStyle, inputAttachmentsStyle, inputWrapperStyle, inputTextareaStyle, inputMaxHeightVar, inputBottomBarStyle, inputStopButtonStyle, inputButtonStyle, inputContainerStyle } from './ChatPanel.css.js';
+import { useChatInput } from './useChatInput.js';
 
 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();

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO;AAsBH;AAEA;;AAGE;;;AAMA;;AAEA;AACD;;AAGD;AAEA;;AAGM;;AAEF;AACF;AAIF;AAEA;;AAGI;AACE;;AAGI;AAEJ;;;;;;AAMF;AACF;;;;;;;AAQC;AAGH;AACE;;;;AAIE;;;;AAIJ;AAEA;AAGA;AACA;AAEA;AAEI;;;;;AAyEN;AAGF;;"}
+{"version":3,"file":"ChatInput.js","sources":["src/components/editor/ChatPanel/ChatInput.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback, useId } from 'react';\n\nimport { SendIcon, StopIcon } from '@/components/Icons';\nimport { cx } from '@/utils/cx';\n\nimport { ChatAttachmentChip } from './ChatAttachment';\nimport {\n  inputContainerStyle,\n  inputAttachmentsStyle,\n  inputPrefixStyle,\n  inputWrapperStyle,\n  inputTextareaStyle,\n  inputButtonStyle,\n  inputStopButtonStyle,\n  inputMaxHeightVar,\n  inputBottomBarStyle,\n} from './ChatPanel.css';\nimport { useChatInput } from './useChatInput';\n\nimport type { ChatInputProps } from './ChatPanel.types';\n\nexport const ChatInput = /*#__PURE__*/ React.memo<ChatInputProps>(\n  ({\n    value: controlledValue,\n    onChange: controlledOnChange,\n    onSubmit,\n    onStop,\n    placeholder = 'Type a message...',\n    streaming = false,\n    disabled = false,\n    submitKey = 'enter',\n    maxLines = 6,\n    attachments,\n    onRemoveAttachment,\n    prefix,\n    suffix,\n    toolbar,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const inputId = useId();\n\n    const handleSubmit = useCallback(\n      (text: string) => {\n        onSubmit?.(text, attachments ?? []);\n      },\n      [onSubmit, attachments]\n    );\n\n    const chatInput = useChatInput({\n      submitKey,\n      onSubmit: handleSubmit,\n      maxLines,\n      attachmentsCount: attachments?.length ?? 0,\n    });\n\n    // Support controlled mode\n    const currentValue = controlledValue ?? chatInput.value;\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n        if (controlledOnChange) {\n          controlledOnChange(e.target.value);\n        }\n        chatInput.handleChange(e);\n      },\n      [controlledOnChange, chatInput]\n    );\n\n    const attachmentsCount = attachments?.length ?? 0;\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // In controlled mode, override the internal value check\n        if (controlledValue !== undefined) {\n          const isSubmitKey =\n            submitKey === 'enter'\n              ? e.key === 'Enter' && !e.shiftKey\n              : e.key === 'Enter' && (e.ctrlKey || e.metaKey);\n\n          if (isSubmitKey && (controlledValue.trim() || attachmentsCount > 0)) {\n            e.preventDefault();\n            onSubmit?.(controlledValue.trim(), attachments ?? []);\n            return;\n          }\n        }\n        chatInput.handleKeyDown(e);\n      },\n      [\n        controlledValue,\n        submitKey,\n        onSubmit,\n        attachments,\n        attachmentsCount,\n        chatInput,\n      ]\n    );\n\n    const handleSendClick = useCallback(() => {\n      const val = controlledValue ?? chatInput.value;\n      const canSubmit = val.trim() || attachmentsCount > 0;\n      if (canSubmit) {\n        onSubmit?.(val.trim(), attachments ?? []);\n        if (controlledValue === undefined) {\n          chatInput.clear();\n        }\n      }\n    }, [controlledValue, chatInput, onSubmit, attachments, attachmentsCount]);\n\n    const canSubmit =\n      (currentValue.trim().length > 0 || attachmentsCount > 0) && !disabled;\n\n    const lineHeight = 18; // approximate line-height in px\n    const maxHeightPx = `${maxLines * lineHeight}px`;\n\n    const shortcutLabel =\n      submitKey === 'enter'\n        ? 'Enter to send, Shift+Enter for newline'\n        : 'Ctrl+Enter to send, Enter for newline';\n\n    return (\n      <div\n        ref={ref}\n        className={cx(inputContainerStyle, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {prefix && <div className={inputPrefixStyle}>{prefix}</div>}\n\n        {attachments && attachments.length > 0 && (\n          <div className={inputAttachmentsStyle}>\n            {attachments.map(att => (\n              <ChatAttachmentChip\n                key={att.id}\n                attachment={att}\n                removable={!!onRemoveAttachment}\n                onRemove={onRemoveAttachment}\n              />\n            ))}\n          </div>\n        )}\n\n        <div className={inputWrapperStyle}>\n          <textarea\n            ref={chatInput.textareaRef}\n            id={`chat-input-${inputId}`}\n            className={inputTextareaStyle}\n            style={assignInlineVars({\n              [inputMaxHeightVar]: maxHeightPx,\n            })}\n            value={currentValue}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            disabled={disabled}\n            rows={1}\n            aria-label=\"Chat message input\"\n            aria-keyshortcuts={shortcutLabel}\n          />\n\n          {suffix}\n\n          <div className={inputBottomBarStyle}>\n            {toolbar}\n\n            {streaming ? (\n              <button\n                type=\"button\"\n                className={inputStopButtonStyle}\n                onClick={onStop}\n                aria-label=\"Stop generating\"\n              >\n                <StopIcon size={12} decorative />\n              </button>\n            ) : (\n              <button\n                type=\"button\"\n                className={inputButtonStyle}\n                onClick={handleSendClick}\n                disabled={!canSubmit}\n                aria-label=\"Send message\"\n              >\n                <SendIcon size={14} decorative />\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nChatInput.displayName = 'ChatInput';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO;AAsBH;AAEA;;AAGE;;;AAMA;;AAEA;AACD;;AAGD;AAEA;;AAGM;;AAEF;AACF;AAIF;AAEA;;AAGI;AACE;;AAGI;AAEJ;;;;;;AAMF;AACF;;;;;;;AAQC;AAGH;AACE;;;;AAIE;;;;AAIJ;AAEA;AAGA;AACA;AAEA;AAEI;;;;;AAyEN;AAGF;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInputToolbar.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatInputToolbar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOO;AAEH;AAaF;AAGF;;"}
+{"version":3,"file":"ChatInputToolbar.js","sources":["src/components/editor/ChatPanel/ChatInputToolbar.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { inputToolbarStyle } from './ChatPanel.css';\n\nimport type { ChatInputToolbarProps } from './ChatPanel.types';\n\nexport const ChatInputToolbar = /*#__PURE__*/ React.memo<ChatInputToolbarProps>(\n  ({ children, className, style, testId, ref, ...rest }) => {\n    return (\n      <div\n        ref={ref}\n        className={cx(inputToolbarStyle, className)}\n        style={style}\n        data-testid={testId}\n        role=\"toolbar\"\n        aria-label=\"Chat input actions\"\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nChatInputToolbar.displayName = 'ChatInputToolbar';\n"],"names":[],"mappings":";;;;;;AAUO;AAEH;AAaF;AAGF;;"}

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

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useMemo } from 'react';
-import { cx } from '../../../utils/cx.js';
 import { Code } from '../../primitives/Code/Code.js';
+import { cx } from '../../../utils/cx.js';
 import { ChatCodeBlock } from './ChatCodeBlock.js';
 import { markdownTableStyle, markdownThStyle, markdownTdStyle, markdownHrStyle, markdownBlockquoteStyle, markdownListStyle, markdownListItemStyle, markdownHeadingStyle, markdownParagraphStyle, markdownRootStyle, markdownLinkStyle } from './ChatPanel.css.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMarkdownRenderer.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatMarkdownRenderer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAqCA;AACE;AACF;AAEA;;;;;;AAWE;AAIE;AACE;AACA;AACD;AACD;AACE;AACA;AAQD;AACD;AACE;;AAcD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAGH;;;;AAMI;;AACA;AACE;;AAEE;;;;;;;;;AAWN;AACE;;AAEF;AACA;;AAGF;AACF;AAoBA;AACE;;;AAIA;;;AAIE;AACE;;;;;;AAOA;;AAEA;AACA;;AAEE;;;;AAIA;AACA;;AAED;;;;AAKH;;AAEE;;;;;;;;;AAUE;;AAEA;AACD;AACD;;;;AAKF;;AAEE;AACE;AACA;;AAEF;;;;AAKF;;AAEE;AACE;AACA;;;;;;AAOJ;;AAEE;AACE;AACA;;;;;;AAOJ;AAEE;AACA;AACA;AAEA;AAEK;AACA;;;AAIL;AACA;;;;;AAIqB;AACnB;AAAW;AACX;AAAU;AACV;AACF;AAEA;;AAEA;AACE;AACA;;AAEF;;;;;AAMF;;AAEE;AAEE;AACA;AACA;AACA;AACA;AACA;;;AAIF;AACA;;AAEF;;AAGF;AACF;AAEA;;;;;;;;;;;;;;;;;AAiBG;;AAED;;AAcI;;AAMA;AASM;AACA;AACE;;;;AAcE;;;AAOF;;AAUA;;AAUA;;AAMA;;AAQA;AACE;;AAEA;AACA;AACA;;AAWgB;;;;AAsClB;AACE;;;AAKZ;AAGJ;;"}
+{"version":3,"file":"ChatMarkdownRenderer.js","sources":["src/components/editor/ChatPanel/ChatMarkdownRenderer.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from 'react';\n\nimport { Code } from '@/components/primitives/Code';\nimport { cx } from '@/utils/cx';\n\nimport { ChatCodeBlock } from './ChatCodeBlock';\nimport {\n  markdownBlockquoteStyle,\n  markdownHeadingStyle,\n  markdownHrStyle,\n  markdownLinkStyle,\n  markdownListItemStyle,\n  markdownListStyle,\n  markdownParagraphStyle,\n  markdownRootStyle,\n  markdownTableStyle,\n  markdownTdStyle,\n  markdownThStyle,\n} from './ChatPanel.css';\n\nimport type { ChatMarkdownRendererProps } from './ChatMarkdownRenderer.types';\n\n// ─────────────────────────────────────────────────────────────────\n// Minimal markdown → React renderer.\n//\n// Covers what chat LLMs typically produce: paragraphs, headings,\n// lists, blockquotes, horizontal rules, inline emphasis / code, links,\n// fenced code blocks, and (with `gfm`) pipe tables.\n//\n// Intentionally lightweight — for advanced CommonMark edge cases or\n// full AST control, consumers can supply their own `renderContent`\n// function on `ChatMessage`.\n// ─────────────────────────────────────────────────────────────────\n\ninterface InlineRenderOptions {\n  linkTarget: '_self' | '_blank';\n}\n\nfunction escapeHtmlInText(text: string): string {\n  return text;\n}\n\nfunction renderInline(\n  text: string,\n  options: InlineRenderOptions,\n  keyPrefix: string\n): React.ReactNode[] {\n  const parts: React.ReactNode[] = [];\n  let rest = text;\n  let index = 0;\n\n  // Ordered by precedence. Each pattern captures the full match so we\n  // can slice around it, and the content(s) we want to render.\n  const patterns: Array<{\n    regex: RegExp;\n    render: (match: RegExpExecArray, key: string) => React.ReactNode;\n  }> = [\n    {\n      regex: /`([^`]+)`/,\n      render: (m, key) => <Code key={key}>{m[1]}</Code>,\n    },\n    {\n      regex: /!\\[([^\\]]*)\\]\\(([^)\\s]+)(?:\\s+\"[^\"]*\")?\\)/,\n      render: (m, key) => (\n        <img\n          key={key}\n          src={m[2]}\n          alt={m[1] ?? ''}\n          style={{ maxWidth: '100%' }}\n        />\n      ),\n    },\n    {\n      regex: /\\[([^\\]]+)\\]\\(([^)\\s]+)(?:\\s+\"[^\"]*\")?\\)/,\n      render: (m, key) => (\n        <a\n          key={key}\n          href={m[2]}\n          target={options.linkTarget}\n          rel={\n            options.linkTarget === '_blank' ? 'noopener noreferrer' : undefined\n          }\n          className={markdownLinkStyle}\n        >\n          {m[1]}\n        </a>\n      ),\n    },\n    {\n      regex: /\\*\\*([^*]+)\\*\\*/,\n      render: (m, key) => <strong key={key}>{m[1]}</strong>,\n    },\n    {\n      regex: /__([^_]+)__/,\n      render: (m, key) => <strong key={key}>{m[1]}</strong>,\n    },\n    {\n      regex: /(?<![*\\w])\\*([^*\\n]+)\\*(?![*\\w])/,\n      render: (m, key) => <em key={key}>{m[1]}</em>,\n    },\n    {\n      regex: /(?<![_\\w])_([^_\\n]+)_(?![_\\w])/,\n      render: (m, key) => <em key={key}>{m[1]}</em>,\n    },\n    {\n      regex: /~~([^~]+)~~/,\n      render: (m, key) => <del key={key}>{m[1]}</del>,\n    },\n  ];\n\n  while (rest.length > 0) {\n    let best: { start: number; length: number; node: React.ReactNode } | null =\n      null;\n\n    for (const { regex, render } of patterns) {\n      const match = regex.exec(rest);\n      if (!match) continue;\n      if (best === null || match.index < best.start) {\n        best = {\n          start: match.index,\n          length: match[0].length,\n          node: render(match, `${keyPrefix}-i-${index++}`),\n        };\n      }\n    }\n\n    if (!best) {\n      parts.push(escapeHtmlInText(rest));\n      break;\n    }\n\n    if (best.start > 0) {\n      parts.push(escapeHtmlInText(rest.slice(0, best.start)));\n    }\n    parts.push(best.node);\n    rest = rest.slice(best.start + best.length);\n  }\n\n  return parts;\n}\n\ninterface Block {\n  type:\n    | 'paragraph'\n    | 'heading'\n    | 'list'\n    | 'orderedList'\n    | 'blockquote'\n    | 'codeBlock'\n    | 'hr'\n    | 'table';\n  content?: string;\n  level?: number;\n  items?: string[];\n  language?: string;\n  rows?: string[][];\n  align?: Array<'left' | 'right' | 'center' | null>;\n}\n\nfunction parseBlocks(source: string, gfm: boolean): Block[] {\n  const lines = source.replace(/\\r\\n/g, '\\n').split('\\n');\n  const blocks: Block[] = [];\n\n  let i = 0;\n  while (i < lines.length) {\n    const line = lines[i] ?? '';\n\n    // Skip blank lines between blocks.\n    if (/^\\s*$/.test(line)) {\n      i++;\n      continue;\n    }\n\n    // Fenced code block\n    const fenceMatch = /^```(\\w+)?\\s*$/.exec(line);\n    if (fenceMatch) {\n      const language = fenceMatch[1];\n      const codeLines: string[] = [];\n      i++;\n      while (i < lines.length && !/^```\\s*$/.test(lines[i] ?? '')) {\n        codeLines.push(lines[i] ?? '');\n        i++;\n      }\n      i++; // skip closing fence\n      blocks.push({\n        type: 'codeBlock',\n        content: codeLines.join('\\n'),\n        language,\n      });\n      continue;\n    }\n\n    // Horizontal rule\n    if (/^\\s*(---|\\*\\*\\*|___)\\s*$/.test(line)) {\n      blocks.push({ type: 'hr' });\n      i++;\n      continue;\n    }\n\n    // Heading (# through ######)\n    const headingMatch = /^(#{1,6})\\s+(.*)$/.exec(line);\n    if (headingMatch) {\n      const hashes = headingMatch[1] ?? '';\n      const headingContent = headingMatch[2] ?? '';\n      blocks.push({\n        type: 'heading',\n        level: hashes.length,\n        content: headingContent.trim(),\n      });\n      i++;\n      continue;\n    }\n\n    // Blockquote — consecutive `> ` lines\n    if (/^\\s*>/.test(line)) {\n      const quoteLines: string[] = [];\n      while (i < lines.length && /^\\s*>/.test(lines[i] ?? '')) {\n        quoteLines.push((lines[i] ?? '').replace(/^\\s*>\\s?/, ''));\n        i++;\n      }\n      blocks.push({ type: 'blockquote', content: quoteLines.join('\\n') });\n      continue;\n    }\n\n    // Unordered list — lines beginning with `- `, `* `, or `+ `\n    if (/^\\s*[-*+]\\s+/.test(line)) {\n      const items: string[] = [];\n      while (i < lines.length && /^\\s*[-*+]\\s+/.test(lines[i] ?? '')) {\n        items.push((lines[i] ?? '').replace(/^\\s*[-*+]\\s+/, ''));\n        i++;\n      }\n      blocks.push({ type: 'list', items });\n      continue;\n    }\n\n    // Ordered list — `1. ...`\n    if (/^\\s*\\d+\\.\\s+/.test(line)) {\n      const items: string[] = [];\n      while (i < lines.length && /^\\s*\\d+\\.\\s+/.test(lines[i] ?? '')) {\n        items.push((lines[i] ?? '').replace(/^\\s*\\d+\\.\\s+/, ''));\n        i++;\n      }\n      blocks.push({ type: 'orderedList', items });\n      continue;\n    }\n\n    // GFM pipe table — a header row, a separator `---|---`, then rows.\n    if (\n      gfm &&\n      /\\|/.test(line) &&\n      i + 1 < lines.length &&\n      /^\\s*\\|?\\s*:?-+:?\\s*(\\|\\s*:?-+:?\\s*)+\\|?\\s*$/.test(lines[i + 1] ?? '')\n    ) {\n      const split = (row: string) =>\n        row\n          .replace(/^\\s*\\|/, '')\n          .replace(/\\|\\s*$/, '')\n          .split('|')\n          .map(cell => cell.trim());\n\n      const header = split(line);\n      const rawAlign = split(lines[i + 1] ?? '');\n      const align = rawAlign.map(cell => {\n        const left = cell.startsWith(':');\n        const right = cell.endsWith(':');\n        if (left && right) return 'center' as const;\n        if (right) return 'right' as const;\n        if (left) return 'left' as const;\n        return null;\n      });\n\n      const rows: string[][] = [header];\n      i += 2;\n      while (i < lines.length && /\\|/.test(lines[i] ?? '')) {\n        rows.push(split(lines[i] ?? ''));\n        i++;\n      }\n      blocks.push({ type: 'table', rows, align });\n      continue;\n    }\n\n    // Paragraph — consecutive non-blank non-block-starting lines.\n    const paraLines: string[] = [];\n    while (i < lines.length) {\n      const ln = lines[i] ?? '';\n      if (\n        /^\\s*$/.test(ln) ||\n        /^```/.test(ln) ||\n        /^(#{1,6})\\s+/.test(ln) ||\n        /^\\s*>/.test(ln) ||\n        /^\\s*[-*+]\\s+/.test(ln) ||\n        /^\\s*\\d+\\.\\s+/.test(ln) ||\n        /^\\s*(---|\\*\\*\\*|___)\\s*$/.test(ln)\n      ) {\n        break;\n      }\n      paraLines.push(ln);\n      i++;\n    }\n    blocks.push({ type: 'paragraph', content: paraLines.join('\\n') });\n  }\n\n  return blocks;\n}\n\n/**\n * Lightweight markdown renderer for chat messages.\n *\n * Pass it to `ChatMessage.renderContent` to render assistant responses\n * with bold / italic / inline code, links, fenced code blocks, lists,\n * blockquotes, horizontal rules, and GFM pipe tables.\n *\n * For advanced markdown features, supply a custom `renderContent`\n * function that uses your markdown library of choice.\n *\n * @example\n * ```tsx\n * <ChatMessage\n *   message={msg}\n *   renderContent={content => <ChatMarkdownRenderer content={content} />}\n * />\n * ```\n */\nexport const ChatMarkdownRenderer =\n  /*#__PURE__*/ React.memo<ChatMarkdownRendererProps>(\n    ({\n      content,\n      gfm = true,\n      linkTarget = '_blank',\n      components,\n      className,\n      style,\n      testId,\n      ref,\n      ...rest\n    }) => {\n      const blocks = useMemo(() => parseBlocks(content, gfm), [content, gfm]);\n\n      const CodeBlock =\n        components?.codeBlock ??\n        (({ code, language }: { code: string; language?: string }) => (\n          <ChatCodeBlock code={code} language={language} />\n        ));\n\n      return (\n        <div\n          ref={ref}\n          className={cx(markdownRootStyle, className)}\n          style={style}\n          data-testid={testId}\n          {...rest}\n        >\n          {blocks.map((block, idx) => {\n            const key = `b-${idx}`;\n            switch (block.type) {\n              case 'paragraph':\n                return (\n                  <p key={key} className={markdownParagraphStyle}>\n                    {renderInline(block.content ?? '', { linkTarget }, key)}\n                  </p>\n                );\n              case 'heading': {\n                const level = Math.min(Math.max(block.level ?? 1, 1), 6) as\n                  | 1\n                  | 2\n                  | 3\n                  | 4\n                  | 5\n                  | 6;\n                const Tag = `h${level}` as keyof React.JSX.IntrinsicElements;\n                return (\n                  <Tag key={key} className={markdownHeadingStyle}>\n                    {renderInline(block.content ?? '', { linkTarget }, key)}\n                  </Tag>\n                );\n              }\n              case 'list':\n                return (\n                  <ul key={key} className={markdownListStyle}>\n                    {(block.items ?? []).map((item, j) => (\n                      <li key={`${key}-${j}`} className={markdownListItemStyle}>\n                        {renderInline(item, { linkTarget }, `${key}-${j}`)}\n                      </li>\n                    ))}\n                  </ul>\n                );\n              case 'orderedList':\n                return (\n                  <ol key={key} className={markdownListStyle}>\n                    {(block.items ?? []).map((item, j) => (\n                      <li key={`${key}-${j}`} className={markdownListItemStyle}>\n                        {renderInline(item, { linkTarget }, `${key}-${j}`)}\n                      </li>\n                    ))}\n                  </ol>\n                );\n              case 'blockquote':\n                return (\n                  <blockquote key={key} className={markdownBlockquoteStyle}>\n                    {renderInline(block.content ?? '', { linkTarget }, key)}\n                  </blockquote>\n                );\n              case 'codeBlock':\n                return (\n                  <CodeBlock\n                    key={key}\n                    code={block.content ?? ''}\n                    language={block.language}\n                  />\n                );\n              case 'hr':\n                return <hr key={key} className={markdownHrStyle} />;\n              case 'table': {\n                const [header, ...rows] = block.rows ?? [];\n                const align = block.align ?? [];\n                return (\n                  <table key={key} className={markdownTableStyle}>\n                    <thead>\n                      <tr>\n                        {(header ?? []).map((cell, j) => (\n                          <th\n                            key={`${key}-h-${j}`}\n                            className={markdownThStyle}\n                            style={\n                              align[j]\n                                ? { textAlign: align[j] ?? undefined }\n                                : undefined\n                            }\n                          >\n                            {renderInline(\n                              cell,\n                              { linkTarget },\n                              `${key}-h-${j}`\n                            )}\n                          </th>\n                        ))}\n                      </tr>\n                    </thead>\n                    <tbody>\n                      {rows.map((row, rIdx) => (\n                        <tr key={`${key}-r-${rIdx}`}>\n                          {row.map((cell, j) => (\n                            <td\n                              key={`${key}-r-${rIdx}-${j}`}\n                              className={markdownTdStyle}\n                              style={\n                                align[j]\n                                  ? { textAlign: align[j] ?? undefined }\n                                  : undefined\n                              }\n                            >\n                              {renderInline(\n                                cell,\n                                { linkTarget },\n                                `${key}-r-${rIdx}-${j}`\n                              )}\n                            </td>\n                          ))}\n                        </tr>\n                      ))}\n                    </tbody>\n                  </table>\n                );\n              }\n              default:\n                return null;\n            }\n          })}\n        </div>\n      );\n    }\n  );\n\nChatMarkdownRenderer.displayName = 'ChatMarkdownRenderer';\n"],"names":[],"mappings":";;;;;;;;AAwCA;AACE;AACF;AAEA;;;;;;AAWE;AAIE;AACE;AACA;AACD;AACD;AACE;AACA;AAQD;AACD;AACE;;AAcD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAGH;;;;AAMI;;AACA;AACE;;AAEE;;;;;;;;;AAWN;AACE;;AAEF;AACA;;AAGF;AACF;AAoBA;AACE;;;AAIA;;;AAIE;AACE;;;;;;AAOA;;AAEA;AACA;;AAEE;;;;AAIA;AACA;;AAED;;;;AAKH;;AAEE;;;;;;;;;AAUE;;AAEA;AACD;AACD;;;;AAKF;;AAEE;AACE;AACA;;AAEF;;;;AAKF;;AAEE;AACE;AACA;;;;;;AAOJ;;AAEE;AACE;AACA;;;;;;AAOJ;AAEE;AACA;AACA;AAEA;AAEK;AACA;;;AAIL;AACA;;;;;AAIqB;AACnB;AAAW;AACX;AAAU;AACV;AACF;AAEA;;AAEA;AACE;AACA;;AAEF;;;;;AAMF;;AAEE;AAEE;AACA;AACA;AACA;AACA;AACA;;;AAIF;AACA;;AAEF;;AAGF;AACF;AAEA;;;;;;;;;;;;;;;;;AAiBG;;AAED;;AAcI;;AAMA;AASM;AACA;AACE;;;;AAcE;;;AAOF;;AAUA;;AAUA;;AAMA;;AAQA;AACE;;AAEA;AACA;AACA;;AAWgB;;;;AAsClB;AACE;;;AAKZ;AAGJ;;"}

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

@@ -1,9 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
-import { cx } from '../../../utils/cx.js';
-import { Avatar } from '../../primitives/Avatar/Avatar.js';
-import '../../primitives/Avatar/AvatarGroup.js';
 import '../../Icons/AddIcon.js';
 import '../../Icons/AiChatIcon.js';
 import '../../Icons/AiSparklesIcon.js';
@@ -35,6 +32,7 @@ import '../../Icons/GridIcon.js';
 import '../../Icons/HeartIcon.js';
 import '../../Icons/HelpIcon.js';
 import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
 import '../../Icons/InfoIcon.js';
 import '../../Icons/LastIcon.js';
 import '../../Icons/LinkIcon.js';
@@ -90,6 +88,15 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
+import { Avatar } from '../../primitives/Avatar/Avatar.js';
+import '../../primitives/Avatar/AvatarGroup.js';
+import { cx } from '../../../utils/cx.js';
 import { ChatBubble } from './ChatBubble.js';
 import { messageTextStyle, messageContentStyle, bubbleErrorStyle, messageErrorCaptionStyle, messageErrorIconStyle, messageTimestampStyle, messageRecipe, messageMaxWidthVarName } from './ChatPanel.css.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessage.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatMessage.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA;;AAG2B;AACzB;AACF;AAEA;AACE;AACE;AACA;;AACA;AACA;;AAEJ;AAEO;AAcH;AACA;;AAQA;;AAEE;;AAEI;AACuB;AAC3B;AAEF;AA4CF;AAGF;;"}
+{"version":3,"file":"ChatMessage.js","sources":["src/components/editor/ChatPanel/ChatMessage.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { ErrorIcon } from '@/components/Icons';\nimport { Avatar } from '@/components/primitives/Avatar';\nimport { cx } from '@/utils/cx';\n\nimport { ChatBubble } from './ChatBubble';\nimport {\n  bubbleErrorStyle,\n  messageContentStyle,\n  messageErrorCaptionStyle,\n  messageErrorIconStyle,\n  messageMaxWidthVarName,\n  messageRecipe,\n  messageTextStyle,\n  messageTimestampStyle,\n} from './ChatPanel.css';\n\nimport type { ChatMessageProps } from './ChatPanel.types';\n\nfunction resolveMaxWidth(\n  value: number | string | undefined\n): string | undefined {\n  if (value === undefined) return undefined;\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nfunction formatTimestamp(iso: string): string {\n  try {\n    const date = new Date(iso);\n    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n  } catch {\n    return '';\n  }\n}\n\nexport const ChatMessage = /*#__PURE__*/ React.memo<ChatMessageProps>(\n  ({\n    message,\n    showTimestamp = false,\n    showAvatar = false,\n    actions,\n    renderContent,\n    maxWidth,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const { role, content, status, timestamp, avatar, displayName } = message;\n    const isError = status === 'error';\n\n    const renderedContent = renderContent ? (\n      renderContent(content)\n    ) : (\n      <span className={messageTextStyle}>{content}</span>\n    );\n\n    const resolvedMaxWidth = resolveMaxWidth(maxWidth);\n    const rootStyle: React.CSSProperties = resolvedMaxWidth\n      ? ({\n          [messageMaxWidthVarName]: resolvedMaxWidth,\n          ...style,\n        } as React.CSSProperties)\n      : (style ?? {});\n\n    return (\n      <div\n        ref={ref}\n        className={cx(messageRecipe({ role }), className)}\n        style={rootStyle}\n        data-testid={testId}\n        {...rest}\n      >\n        {showAvatar && role !== 'system' && (\n          <Avatar\n            size=\"md\"\n            src={avatar}\n            name={displayName ?? role}\n            alt={displayName ?? role}\n          />\n        )}\n\n        <div className={messageContentStyle}>\n          <ChatBubble\n            role={role}\n            className={isError ? bubbleErrorStyle : undefined}\n          >\n            {renderedContent}\n          </ChatBubble>\n\n          {isError && (\n            <span className={messageErrorCaptionStyle}>\n              <span className={messageErrorIconStyle}>\n                <ErrorIcon size={12} decorative />\n              </span>\n              Error generating response\n            </span>\n          )}\n\n          {actions && <div>{actions}</div>}\n\n          {showTimestamp && timestamp && (\n            <span className={messageTimestampStyle}>\n              {formatTimestamp(timestamp)}\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nChatMessage.displayName = 'ChatMessage';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA;;AAG2B;AACzB;AACF;AAEA;AACE;AACE;AACA;;AACA;AACA;;AAEJ;AAEO;AAcH;AACA;;AAQA;;AAEE;;AAEI;AACuB;AAC3B;AAEF;AA4CF;AAGF;;"}

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useMemo, useImperativeHandle } from 'react';
-import { useChatScroll } from './useChatScroll.js';
-import { ChatMessage } from './ChatMessage.js';
 import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
 import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
+import { ChatMessage } from './ChatMessage.js';
 import { messageListContentStyle, newMessagesBannerStyle } from './ChatPanel.css.js';
+import { useChatScroll } from './useChatScroll.js';
 
 const ChatMessageList = /*#__PURE__*/ React.memo(({ messages, renderMessage, emptyState, autoScroll = true, scrollApiRef, className, style, testId, ref, ...rest }) => {
     const { scrollContainerRef, scrollContentRef, hasNewMessages, scrollToBottom, scrollTo, scrollToElement, } = useChatScroll({
@@ -32,7 +32,9 @@ const ChatMessageList = /*#__PURE__*/ React.memo(({ messages, renderMessage, emp
     if (messages.length === 0 && emptyState) {
         return (jsx(ScrollArea, { ref: mergedRef, autoFill: true, className: className, style: style, testId: testId, ...rest, children: jsx("div", { ref: scrollContentRef, 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", { ref: scrollContentRef, 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" }))] }) }));
+    return (jsx(ScrollArea, { ref: mergedRef, autoFill: true, className: className, style: style, testId: testId, ...rest, children: jsxs("div", { ref: scrollContentRef, 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';
 

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageList.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatMessageList.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAgBO;AAaH;;AASE;AACD;;;;AAMD;AACE;AACA;AAAgB;;AAEhB;AACF;AAEA;;;;AAKI;;AAKJ;;AAGE;;;AA0DJ;AAGF;;"}
+{"version":3,"file":"ChatMessageList.js","sources":["src/components/editor/ChatPanel/ChatMessageList.tsx"],"sourcesContent":["'use client';\n\nimport React, { useImperativeHandle, useMemo } from 'react';\n\nimport { ScrollArea } from '@/components/layout/ScrollArea';\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nimport { ChatMessage } from './ChatMessage';\nimport {\n  messageListContentStyle,\n  newMessagesBannerStyle,\n} from './ChatPanel.css';\nimport { useChatScroll } from './useChatScroll';\n\nimport type {\n  ChatMessageListProps,\n  ChatMessageListScrollApi,\n} from './ChatPanel.types';\n\nexport const ChatMessageList = /*#__PURE__*/ React.memo<ChatMessageListProps>(\n  ({\n    messages,\n    renderMessage,\n    emptyState,\n    autoScroll = true,\n    scrollApiRef,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const {\n      scrollContainerRef,\n      scrollContentRef,\n      hasNewMessages,\n      scrollToBottom,\n      scrollTo,\n      scrollToElement,\n    } = useChatScroll({\n      messages,\n      enabled: autoScroll,\n    });\n\n    // ScrollArea forwards ref to its viewport div — merge with our internal\n    // scroll container ref and the consumer's ref.\n    const mergedRef = useMergedRef<HTMLDivElement>(scrollContainerRef, ref);\n\n    const isAtBottomGetter = React.useCallback(() => {\n      const container = scrollContainerRef.current;\n      if (!container) return true;\n      const { scrollTop, scrollHeight, clientHeight } = container;\n      return scrollHeight - scrollTop - clientHeight <= 100;\n    }, [scrollContainerRef]);\n\n    const scrollApi = useMemo<ChatMessageListScrollApi>(\n      () => ({\n        scrollToBottom,\n        scrollTo,\n        scrollToElement,\n        isAtBottom: isAtBottomGetter,\n      }),\n      [scrollToBottom, scrollTo, scrollToElement, isAtBottomGetter]\n    );\n\n    useImperativeHandle(scrollApiRef, () => scrollApi, [scrollApi]);\n\n    if (messages.length === 0 && emptyState) {\n      return (\n        <ScrollArea\n          ref={mergedRef}\n          autoFill\n          className={className}\n          style={style}\n          testId={testId}\n          {...rest}\n        >\n          <div\n            ref={scrollContentRef}\n            className={messageListContentStyle}\n            role=\"log\"\n            aria-live=\"polite\"\n          >\n            {emptyState}\n          </div>\n        </ScrollArea>\n      );\n    }\n\n    return (\n      <ScrollArea\n        ref={mergedRef}\n        autoFill\n        className={className}\n        style={style}\n        testId={testId}\n        {...rest}\n      >\n        <div\n          ref={scrollContentRef}\n          className={messageListContentStyle}\n          role=\"log\"\n          aria-live=\"polite\"\n        >\n          {messages.map((message, index) =>\n            renderMessage ? (\n              <React.Fragment key={message.id}>\n                {renderMessage(message, index)}\n              </React.Fragment>\n            ) : (\n              <ChatMessage key={message.id} message={message} />\n            )\n          )}\n\n          {hasNewMessages && (\n            <button\n              className={newMessagesBannerStyle}\n              onClick={() => {\n                scrollToBottom('smooth');\n              }}\n              type=\"button\"\n            >\n              New messages\n            </button>\n          )}\n        </div>\n      </ScrollArea>\n    );\n  }\n);\n\nChatMessageList.displayName = 'ChatMessageList';\n"],"names":[],"mappings":";;;;;;;;;AAmBO;AAaH;;AASE;AACD;;;;AAMD;AACE;AACA;AAAgB;;AAEhB;AACF;AAEA;;;;AAKI;;AAKJ;;AAGE;;;;;AA4DJ;AAGF;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;AAG2B;AACzB;AACF;AAEO;AAWH;;AAEE;;AAEI;AACuB;AAC3B;AAEF;AAWF;AAGF;;"}
+{"version":3,"file":"ChatPanel.js","sources":["src/components/editor/ChatPanel/ChatPanel.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { chatPanelRecipe, messageMaxWidthVarName } from './ChatPanel.css';\n\nimport type { ChatPanelProps } from './ChatPanel.types';\n\nfunction resolveMaxWidth(\n  value: number | string | undefined\n): string | undefined {\n  if (value === undefined) return undefined;\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nexport const ChatPanel = /*#__PURE__*/ React.memo<ChatPanelProps>(\n  ({\n    density = 'comfortable',\n    messageMaxWidth,\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const resolvedMaxWidth = resolveMaxWidth(messageMaxWidth);\n    const rootStyle: React.CSSProperties = resolvedMaxWidth\n      ? ({\n          [messageMaxWidthVarName]: resolvedMaxWidth,\n          ...style,\n        } as React.CSSProperties)\n      : (style ?? {});\n\n    return (\n      <div\n        ref={ref}\n        className={cx(chatPanelRecipe({ density }), className)}\n        style={rootStyle}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nChatPanel.displayName = 'ChatPanel';\n"],"names":[],"mappings":";;;;;;AAUA;;AAG2B;AACzB;AACF;AAEO;AAWH;;AAEE;;AAEI;AACuB;AAC3B;AAEF;AAWF;AAGF;;"}

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

@@ -2,8 +2,8 @@
 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';
+import { toolCallHeaderStyle, toolCallIconStyle, toolCallNameStyle, toolCallStatusRecipe, toolCallDurationStyle, toolCallChevronRecipe, toolCallDetailsStyle, toolCallSectionLabelStyle, toolCallPreStyle, toolCallErrorStyle, toolCallContainerStyle } from './ChatPanel.css.js';
 
 // ─── Status label map ────────────────────────────────────────────
 const STATUS_LABELS = {

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

@@ -1 +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;;"}
+{"version":3,"file":"ChatToolCall.js","sources":["src/components/editor/ChatPanel/ChatToolCall.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { MiniWrenchIcon, MiniChevronIcon } from './ChatIcons';\nimport {\n  toolCallContainerStyle,\n  toolCallHeaderStyle,\n  toolCallIconStyle,\n  toolCallNameStyle,\n  toolCallStatusRecipe,\n  toolCallChevronRecipe,\n  toolCallDetailsStyle,\n  toolCallSectionLabelStyle,\n  toolCallPreStyle,\n  toolCallErrorStyle,\n  toolCallDurationStyle,\n} from './ChatPanel.css';\n\nimport type { ChatToolCallProps } from './ChatPanel.types';\n\n// ─── Status label map ────────────────────────────────────────────\n\nconst STATUS_LABELS = {\n  pending: 'Pending',\n  running: 'Running',\n  completed: 'Completed',\n  error: 'Error',\n} as const;\n\n// ─── Component ───────────────────────────────────────────────────\n\nexport const ChatToolCall = /*#__PURE__*/ React.memo<ChatToolCallProps>(\n  ({\n    toolCall,\n    collapsible = true,\n    defaultExpanded = false,\n    icon,\n    renderOutput,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const [expanded, setExpanded] = useState(defaultExpanded);\n\n    const handleToggle = useCallback(() => {\n      if (collapsible) {\n        setExpanded(prev => !prev);\n      }\n    }, [collapsible]);\n\n    const statusLabel = STATUS_LABELS[toolCall.status];\n    const ariaLabel = `Tool ${toolCall.name}: ${statusLabel}`;\n\n    return (\n      <div\n        ref={ref}\n        className={cx(toolCallContainerStyle, className)}\n        style={style}\n        data-testid={testId}\n        aria-label={ariaLabel}\n        {...rest}\n      >\n        <button\n          type=\"button\"\n          className={toolCallHeaderStyle}\n          onClick={handleToggle}\n          aria-expanded={collapsible ? expanded : undefined}\n        >\n          <span className={toolCallIconStyle}>\n            {icon ?? <MiniWrenchIcon />}\n          </span>\n\n          <span className={toolCallNameStyle}>{toolCall.name}</span>\n\n          <span className={toolCallStatusRecipe({ status: toolCall.status })}>\n            {statusLabel}\n          </span>\n\n          {toolCall.durationMs !== undefined &&\n            toolCall.status === 'completed' && (\n              <span className={toolCallDurationStyle}>\n                {toolCall.durationMs}ms\n              </span>\n            )}\n\n          {collapsible && (\n            <span\n              className={toolCallChevronRecipe({\n                open: expanded || undefined,\n              })}\n            >\n              <MiniChevronIcon />\n            </span>\n          )}\n        </button>\n\n        {expanded && (\n          <div className={toolCallDetailsStyle}>\n            {toolCall.input && (\n              <>\n                <span className={toolCallSectionLabelStyle}>Input</span>\n                <pre className={toolCallPreStyle}>\n                  {JSON.stringify(toolCall.input, null, 2)}\n                </pre>\n              </>\n            )}\n\n            {toolCall.output && (\n              <>\n                <span className={toolCallSectionLabelStyle}>Output</span>\n                {renderOutput ? (\n                  renderOutput(toolCall.output)\n                ) : (\n                  <pre className={toolCallPreStyle}>\n                    {JSON.stringify(toolCall.output, null, 2)}\n                  </pre>\n                )}\n              </>\n            )}\n\n            {toolCall.error && (\n              <>\n                <span className={toolCallSectionLabelStyle}>Error</span>\n                <span className={toolCallErrorStyle}>{toolCall.error}</span>\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nChatToolCall.displayName = 'ChatToolCall';\n"],"names":[],"mappings":";;;;;;;AAuBA;AAEA;AACE;AACA;AACA;AACA;;AAGF;AAEO;;AAeH;;;;AAIA;;;AAKA;;;AAoCW;AAyCb;AAGF;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatTypingIndicator.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatTypingIndicator.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAcE;AAWI;AAAc;AAEd;AAsBF;AAGJ;;"}
+{"version":3,"file":"ChatTypingIndicator.js","sources":["src/components/editor/ChatPanel/ChatTypingIndicator.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  typingIndicatorStyle,\n  typingDotsContainerStyle,\n  typingDotStyle,\n  typingPulseStyle,\n  typingLabelStyle,\n} from './ChatPanel.css';\n\nimport type { ChatTypingIndicatorProps } from './ChatPanel.types';\n\nexport const ChatTypingIndicator =\n  /*#__PURE__*/ React.memo<ChatTypingIndicatorProps>(\n    ({\n      label = 'Thinking...',\n      variant = 'dots',\n      visible = true,\n      className,\n      style,\n      testId,\n      ref,\n      ...rest\n    }) => {\n      if (!visible) return null;\n\n      return (\n        <div\n          ref={ref}\n          className={cx(typingIndicatorStyle, className)}\n          style={style}\n          data-testid={testId}\n          role=\"status\"\n          aria-label={label}\n          {...rest}\n        >\n          {variant === 'dots' ? (\n            <div className={typingDotsContainerStyle} aria-hidden=\"true\">\n              <span className={typingDotStyle} />\n              <span className={typingDotStyle} />\n              <span className={typingDotStyle} />\n            </div>\n          ) : (\n            <div className={typingPulseStyle} aria-hidden=\"true\" />\n          )}\n          <span className={typingLabelStyle}>{label}</span>\n        </div>\n      );\n    }\n  );\n\nChatTypingIndicator.displayName = 'ChatTypingIndicator';\n"],"names":[],"mappings":";;;;;;;AAiBE;AAWI;AAAc;AAEd;AAsBF;AAGJ;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useChatInput.js","sources":["../../../../../../src/components/editor/ChatPanel/useChatInput.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQM;AAGJ;;AAOA;AAEA;AACE;AACA;;;AAGA;AAEA;AAIA;AACA;;AAGF;;;AAIE;AACF;AAEA;;AAEE;;AAEE;;;AAIJ;AAEI;;AAKJ;AAEI;AAEI;;;;AAIA;;;AAIF;AACA;AACE;AACA;;;AAGN;;;;;;;;;AAYJ;;"}
+{"version":3,"file":"useChatInput.js","sources":["src/components/editor/ChatPanel/useChatInput.ts"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useRef, useEffect } from 'react';\n\nimport type {\n  UseChatInputOptions,\n  UseChatInputReturn,\n} from './ChatPanel.types';\n\nexport function useChatInput(\n  options: UseChatInputOptions = {}\n): UseChatInputReturn {\n  const {\n    submitKey = 'enter',\n    onSubmit,\n    maxLines = 6,\n    attachmentsCount = 0,\n  } = options;\n  const [value, setValue] = useState('');\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  const autoResize = useCallback(() => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n\n    // Reset height to measure scroll height\n    textarea.style.height = 'auto';\n\n    const lineHeight = parseInt(\n      getComputedStyle(textarea).lineHeight || '18',\n      10\n    );\n    const maxHeight = maxLines * lineHeight;\n    const newHeight = Math.min(textarea.scrollHeight, maxHeight);\n\n    textarea.style.height = `${newHeight}px`;\n  }, [maxLines]);\n\n  // Auto-resize on value change\n  useEffect(() => {\n    autoResize();\n  }, [value, autoResize]);\n\n  const clear = useCallback(() => {\n    setValue('');\n    const textarea = textareaRef.current;\n    if (textarea) {\n      textarea.style.height = 'auto';\n    }\n  }, []);\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setValue(event.target.value);\n    },\n    []\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      const isSubmit =\n        submitKey === 'enter'\n          ? event.key === 'Enter' &&\n            !event.shiftKey &&\n            !event.ctrlKey &&\n            !event.metaKey\n          : event.key === 'Enter' && (event.ctrlKey || event.metaKey);\n\n      if (isSubmit) {\n        event.preventDefault();\n        const trimmed = value.trim();\n        if (trimmed || attachmentsCount > 0) {\n          onSubmit?.(trimmed);\n          clear();\n        }\n      }\n    },\n    [submitKey, value, onSubmit, clear, attachmentsCount]\n  );\n\n  return {\n    value,\n    setValue,\n    clear,\n    textareaRef,\n    handleKeyDown,\n    handleChange,\n  };\n}\n"],"names":[],"mappings":";;;AASM;AAGJ;;AAOA;AAEA;AACE;AACA;;;AAGA;AAEA;AAIA;AACA;;AAGF;;;AAIE;AACF;AAEA;;AAEE;;AAEE;;;AAIJ;AAEI;;AAKJ;AAEI;AAEI;;;;AAIA;;;AAIF;AACA;AACE;AACA;;;AAGN;;;;;;;;;AAYJ;;"}

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

@@ -1,11 +1,12 @@
 "use client";
-import { useState, useRef, useCallback } from 'react';
+import { useState, useCallback } from 'react';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
 
 function useChatMessages(options = {}) {
     const { initialMessages = [], maxMessages } = options;
     const [messages, setMessages] = useState(initialMessages);
-    const messagesRef = useRef(messages);
-    messagesRef.current = messages;
+    // Latest messages for synchronous reads in getMessage() without stale closures.
+    const messagesRef = useLatest(messages);
     const trimToMax = useCallback((msgs) => {
         if (maxMessages !== undefined && msgs.length > maxMessages) {
             return msgs.slice(msgs.length - maxMessages);
@@ -31,7 +32,9 @@ function useChatMessages(options = {}) {
     }, []);
     const getMessage = useCallback((id) => {
         return messagesRef.current.find(msg => msg.id === id);
-    }, []);
+    }, 
+    // messagesRef is a stable useLatest ref; listed to satisfy the rule.
+    [messagesRef]);
     return {
         messages,
         setMessages,

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

@@ -1 +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;;"}
+{"version":3,"file":"useChatMessages.js","sources":["src/components/editor/ChatPanel/useChatMessages.ts"],"sourcesContent":["'use client';\n\nimport { useState, useCallback } from 'react';\n\nimport { useLatest } from '@/hooks/useLatest';\n\nimport type {\n  ChatMessageData,\n  UseChatMessagesOptions,\n  UseChatMessagesReturn,\n} from './ChatPanel.types';\n\nexport function useChatMessages(\n  options: UseChatMessagesOptions = {}\n): UseChatMessagesReturn {\n  const { initialMessages = [], maxMessages } = options;\n  const [messages, setMessages] = useState<ChatMessageData[]>(initialMessages);\n  // Latest messages for synchronous reads in getMessage() without stale closures.\n  const messagesRef = useLatest(messages);\n\n  const trimToMax = useCallback(\n    (msgs: ChatMessageData[]): ChatMessageData[] => {\n      if (maxMessages !== undefined && msgs.length > maxMessages) {\n        return msgs.slice(msgs.length - maxMessages);\n      }\n      return msgs;\n    },\n    [maxMessages]\n  );\n\n  const appendMessage = useCallback(\n    (message: ChatMessageData) => {\n      setMessages(prev => trimToMax([...prev, message]));\n    },\n    [trimToMax]\n  );\n\n  const updateMessage = useCallback(\n    (\n      id: string,\n      update:\n        | Partial<ChatMessageData>\n        | ((prev: ChatMessageData) => Partial<ChatMessageData>)\n    ) => {\n      setMessages(prev =>\n        prev.map(msg => {\n          if (msg.id !== id) return msg;\n          const partial = typeof update === 'function' ? update(msg) : update;\n          return { ...msg, ...partial };\n        })\n      );\n    },\n    []\n  );\n\n  const removeMessage = useCallback((id: string) => {\n    setMessages(prev => prev.filter(msg => msg.id !== id));\n  }, []);\n\n  const clearMessages = useCallback(() => {\n    setMessages([]);\n  }, []);\n\n  const getMessage = useCallback(\n    (id: string): ChatMessageData | undefined => {\n      return messagesRef.current.find(msg => msg.id === id);\n    },\n    // messagesRef is a stable useLatest ref; listed to satisfy the rule.\n    [messagesRef]\n  );\n\n  return {\n    messages,\n    setMessages,\n    appendMessage,\n    updateMessage,\n    removeMessage,\n    clearMessages,\n    getMessage,\n  };\n}\n"],"names":[],"mappings":";;;;AAYM;;;;AAMJ;AAEA;;;;AAKI;AACF;AAIF;AAEI;AACF;;;AAaM;AAAmB;AACnB;AACA;;;AAOR;;;AAIA;;;AAIA;AAEI;;;;;;;;;;;;;AAeN;;"}

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

@@ -59,7 +59,9 @@ function useChatScroll(options) {
             }
         };
         container.addEventListener('scroll', handleScroll, { passive: true });
-        return () => container.removeEventListener('scroll', handleScroll);
+        return () => {
+            container.removeEventListener('scroll', handleScroll);
+        };
     }, [checkIfAtBottom]);
     // Seed the last-height baseline once the content node mounts so growth is
     // measured against the initial height, not zero.
@@ -104,6 +106,9 @@ function useChatScroll(options) {
             });
         }
         else {
+            // Reacts to an incoming-message event (count grew while scrolled away) —
+            // event-driven, not derivable during render.
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setHasNewMessages(true);
         }
     }, [messages.length, enabled, isAtBottom, scrollToBottom]);

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

@@ -1 +1 @@
-{"version":3,"file":"useChatScroll.js","sources":["../../../../../../src/components/editor/ChatPanel/useChatScroll.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AASM;AAGJ;AAEA;AACA;;;;AAIA;AACA;AACA;;;AAIE;AACF;;AAEE;AACF;AAEA;AACE;AACA;AAAgB;;AAGhB;AACF;;AAGE;AACA;;;;;AAKC;;;;AAKH;AACE;AACA;;AACA;;;AAKE;;;;AAOF;AACA;;;AAGE;;;;;AAKF;AAEA;;AAEF;;;;AAKE;AACA;;;;;;AAMF;AACE;AACA;AACA;;;;;;AAMA;;;;;;AAKF;;;;AAKE;AACA;AACA;;;AAIA;;;;;AAKI;AACF;;;;;AAIJ;;;;;;;;;;AAWF;;"}
+{"version":3,"file":"useChatScroll.js","sources":["src/components/editor/ChatPanel/useChatScroll.ts"],"sourcesContent":["'use client';\n\nimport { useState, useCallback, useRef, useEffect } from 'react';\n\nimport { useResizeObserver } from '@/hooks/useResizeObserver';\n\nimport type {\n  UseChatScrollOptions,\n  UseChatScrollReturn,\n} from './ChatPanel.types';\n\nexport function useChatScroll(\n  options: UseChatScrollOptions\n): UseChatScrollReturn {\n  const { messages, enabled = true, threshold = 100 } = options;\n\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const scrollContentRef = useRef<HTMLDivElement>(null);\n  const [isAtBottom, setIsAtBottom] = useState(true);\n  const [hasNewMessages, setHasNewMessages] = useState(false);\n  const prevMessageCountRef = useRef(messages.length);\n  const isAtBottomRef = useRef(isAtBottom);\n  const enabledRef = useRef(enabled);\n  const lastContentHeightRef = useRef(0);\n\n  // Keep refs in sync for use inside observer callbacks.\n  useEffect(() => {\n    isAtBottomRef.current = isAtBottom;\n  }, [isAtBottom]);\n  useEffect(() => {\n    enabledRef.current = enabled;\n  }, [enabled]);\n\n  const checkIfAtBottom = useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return true;\n\n    const { scrollTop, scrollHeight, clientHeight } = container;\n    return scrollHeight - scrollTop - clientHeight <= threshold;\n  }, [threshold]);\n\n  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'auto') => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    container.scrollTo({\n      top: container.scrollHeight,\n      behavior,\n    });\n    setIsAtBottom(true);\n    setHasNewMessages(false);\n  }, []);\n\n  const scrollTo = useCallback((opts: ScrollToOptions) => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n    container.scrollTo(opts);\n  }, []);\n\n  const scrollToElement = useCallback(\n    (el: HTMLElement, opts?: ScrollIntoViewOptions) => {\n      el.scrollIntoView(opts);\n    },\n    []\n  );\n\n  // Listen for scroll events to track position\n  useEffect(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    const handleScroll = () => {\n      const atBottom = checkIfAtBottom();\n      setIsAtBottom(atBottom);\n      if (atBottom) {\n        setHasNewMessages(false);\n      }\n    };\n\n    container.addEventListener('scroll', handleScroll, { passive: true });\n    return () => {\n      container.removeEventListener('scroll', handleScroll);\n    };\n  }, [checkIfAtBottom]);\n\n  // Seed the last-height baseline once the content node mounts so growth is\n  // measured against the initial height, not zero.\n  useEffect(() => {\n    const content = scrollContentRef.current;\n    if (!content) return;\n    lastContentHeightRef.current = content.getBoundingClientRect().height;\n  }, []);\n\n  // Observe content growth — keeps the list pinned to the bottom during streaming\n  // (when message text grows but `messages.length` stays constant).\n  useResizeObserver(scrollContentRef, entry => {\n    const nextHeight = entry.contentRect.height;\n    const prevHeight = lastContentHeightRef.current;\n    lastContentHeightRef.current = nextHeight;\n\n    // Only react to growth — shrinks shouldn't force a scroll jump.\n    if (nextHeight <= prevHeight) return;\n    if (!enabledRef.current) return;\n\n    if (isAtBottomRef.current) {\n      scrollToBottom('auto');\n    } else {\n      setHasNewMessages(true);\n    }\n  });\n\n  // Auto-scroll or show indicator on new messages. Fallback for mounts and\n  // cleared lists where content height may not grow monotonically.\n  useEffect(() => {\n    const currentCount = messages.length;\n    const prevCount = prevMessageCountRef.current;\n    prevMessageCountRef.current = currentCount;\n\n    if (currentCount <= prevCount) return;\n\n    if (!enabled) return;\n\n    if (isAtBottom) {\n      // Use requestAnimationFrame for DOM to update first\n      requestAnimationFrame(() => {\n        scrollToBottom();\n      });\n    } else {\n      // Reacts to an incoming-message event (count grew while scrolled away) —\n      // event-driven, not derivable during render.\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setHasNewMessages(true);\n    }\n  }, [messages.length, enabled, isAtBottom, scrollToBottom]);\n\n  return {\n    scrollContainerRef,\n    scrollContentRef,\n    isAtBottom,\n    hasNewMessages,\n    scrollToBottom,\n    scrollTo,\n    scrollToElement,\n  };\n}\n"],"names":[],"mappings":";;;;AAWM;AAGJ;AAEA;AACA;;;;AAIA;AACA;AACA;;;AAIE;AACF;;AAEE;AACF;AAEA;AACE;AACA;AAAgB;;AAGhB;AACF;;AAGE;AACA;;;;;AAKC;;;;AAKH;AACE;AACA;;AACA;;;AAKE;;;;AAOF;AACA;;;AAGE;;;;;AAKF;AAEA;AACA;AACE;AACF;AACF;;;;AAKE;AACA;;;;;;AAMF;AACE;AACA;AACA;;;;;;AAMA;;;;;;AAKF;;;;AAKE;AACA;AACA;;;AAIA;;;;;AAKI;AACF;;;;;;;;AAOJ;;;;;;;;;;AAWF;;"}

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

@@ -0,0 +1,18 @@
+import './../../../assets/src/components/editor/Minimap/Minimap.css.ts.vanilla--rNdWQwy.css';
+
+var ariaLiveRegionStyle = 'Minimap_ariaLiveRegionStyle__1nijti8c';
+var cornerBottomLeftStyle = 'Minimap_cornerBottomLeftStyle__1nijti8a';
+var cornerBottomRightStyle = 'Minimap_cornerBottomRightStyle__1nijti8b';
+var cornerTopLeftStyle = 'Minimap_cornerTopLeftStyle__1nijti88';
+var cornerTopRightStyle = 'Minimap_cornerTopRightStyle__1nijti89';
+var footerInsideStyle = 'Minimap_footerInsideStyle__1nijti87';
+var footerOutsideStyle = 'Minimap_footerOutsideStyle__1nijti86';
+var minimapBodyStyle = 'Minimap_minimapBodyStyle__1nijti81';
+var minimapCanvasStyle = 'Minimap_minimapCanvasStyle__1nijti82';
+var minimapOverlayLayerStyle = 'Minimap_minimapOverlayLayerStyle__1nijti83';
+var minimapShellStyle = 'Minimap_minimapShellStyle__1nijti80';
+var titleInsideStyle = 'Minimap_titleInsideStyle__1nijti85';
+var titleOutsideStyle = 'Minimap_titleOutsideStyle__1nijti84';
+
+export { ariaLiveRegionStyle, cornerBottomLeftStyle, cornerBottomRightStyle, cornerTopLeftStyle, cornerTopRightStyle, footerInsideStyle, footerOutsideStyle, minimapBodyStyle, minimapCanvasStyle, minimapOverlayLayerStyle, minimapShellStyle, titleInsideStyle, titleOutsideStyle };
+//# sourceMappingURL=Minimap.css.js.map

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

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