@djangocfg/ui-tools 2.1.349 → 2.1.350

package/dist/index.cjs

@@ -7,7 +7,7 @@ var chunkKNDLV4PI_cjs = require('./chunk-KNDLV4PI.cjs');
 var chunk5I5QNGUG_cjs = require('./chunk-5I5QNGUG.cjs');
 var chunkYW5IVWHQ_cjs = require('./chunk-YW5IVWHQ.cjs');
 var chunk76NNDZH6_cjs = require('./chunk-76NNDZH6.cjs');
-var chunkXYGB26BY_cjs = require('./chunk-XYGB26BY.cjs');
+var chunkHVIL2FEQ_cjs = require('./chunk-HVIL2FEQ.cjs');
 var chunkYXZ6GU7H_cjs = require('./chunk-YXZ6GU7H.cjs');
 var chunkIEEAENLX_cjs = require('./chunk-IEEAENLX.cjs');
 var chunkQW4RBGHN_cjs = require('./chunk-QW4RBGHN.cjs');
@@ -372,7 +372,7 @@ var LazyTree = createLazyComponent(
   }
 );
 var LazyChat = createLazyComponent(
-  () => import('./ChatRoot-VTYANC7M.cjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-7TTJRYBA.cjs').then((m) => ({ default: m.ChatRoot })),
   {
     displayName: "LazyChat",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingFallback, { minHeight: 320, text: "Loading chat\u2026" })
@@ -409,7 +409,7 @@ async function* parseSSE(response, options = {}) {
     throw new Error("SSE response has no body");
   }
   const map = options.map ?? DEFAULT_MAP;
-  const idleMs = options.idleTimeoutMs ?? chunkXYGB26BY_cjs.LIMITS.sseIdleMs;
+  const idleMs = options.idleTimeoutMs ?? chunkHVIL2FEQ_cjs.LIMITS.sseIdleMs;
   const reader = response.body.getReader();
   const decoder = new TextDecoder();
   let buffer = "";
@@ -612,7 +612,7 @@ function createMockTransport(opts = {}) {
     async createSession(_opts) {
       await sleep(latency);
       return {
-        sessionId: chunkXYGB26BY_cjs.createId("s"),
+        sessionId: chunkHVIL2FEQ_cjs.createId("s"),
         messages: history.length ? [...history] : void 0,
         hasMore: false,
         cursor: null,
@@ -629,12 +629,12 @@ function createMockTransport(opts = {}) {
         throw new Error("mock transport scripted failure");
       }
       history.push({
-        id: chunkXYGB26BY_cjs.createId("u"),
+        id: chunkHVIL2FEQ_cjs.createId("u"),
         role: "user",
         content,
         createdAt: Date.now()
       });
-      const messageId = chunkXYGB26BY_cjs.createId("a");
+      const messageId = chunkHVIL2FEQ_cjs.createId("a");
       yield { type: "message_start", messageId, sessionId: _sid };
       const reply = replies[turn % replies.length];
       turn += 1;
@@ -663,7 +663,7 @@ function createMockTransport(opts = {}) {
       turn += 1;
       const text = typeof reply === "string" ? reply : reply.filter((e) => e.type === "chunk").map((e) => e.delta).join("");
       return {
-        id: chunkXYGB26BY_cjs.createId("a"),
+        id: chunkHVIL2FEQ_cjs.createId("a"),
         role: "assistant",
         content: text || DEFAULT_REPLY,
         createdAt: Date.now()
@@ -2019,159 +2019,159 @@ Object.defineProperty(exports, "useCronWeekDays", {
 });
 Object.defineProperty(exports, "Attachments", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.Attachments; }
+  get: function () { return chunkHVIL2FEQ_cjs.Attachments; }
 });
 Object.defineProperty(exports, "AttachmentsGrid", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.AttachmentsGrid; }
+  get: function () { return chunkHVIL2FEQ_cjs.AttachmentsGrid; }
 });
 Object.defineProperty(exports, "AttachmentsList", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.AttachmentsList; }
+  get: function () { return chunkHVIL2FEQ_cjs.AttachmentsList; }
 });
 Object.defineProperty(exports, "CHAT_EVENT_NAME", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.CHAT_EVENT_NAME; }
+  get: function () { return chunkHVIL2FEQ_cjs.CHAT_EVENT_NAME; }
 });
 Object.defineProperty(exports, "CSS_VARS", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.CSS_VARS; }
+  get: function () { return chunkHVIL2FEQ_cjs.CSS_VARS; }
 });
 Object.defineProperty(exports, "ChatProvider", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.ChatProvider; }
+  get: function () { return chunkHVIL2FEQ_cjs.ChatProvider; }
 });
 Object.defineProperty(exports, "ChatRoot", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.ChatRoot; }
+  get: function () { return chunkHVIL2FEQ_cjs.ChatRoot; }
 });
 Object.defineProperty(exports, "Composer", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.Composer; }
+  get: function () { return chunkHVIL2FEQ_cjs.Composer; }
 });
 Object.defineProperty(exports, "DEFAULT_LABELS", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.DEFAULT_LABELS; }
+  get: function () { return chunkHVIL2FEQ_cjs.DEFAULT_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_SIDEBAR", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.DEFAULT_SIDEBAR; }
+  get: function () { return chunkHVIL2FEQ_cjs.DEFAULT_SIDEBAR; }
 });
 Object.defineProperty(exports, "DEFAULT_Z_INDEX", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.DEFAULT_Z_INDEX; }
+  get: function () { return chunkHVIL2FEQ_cjs.DEFAULT_Z_INDEX; }
 });
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.EmptyState; }
+  get: function () { return chunkHVIL2FEQ_cjs.EmptyState; }
 });
 Object.defineProperty(exports, "ErrorBanner", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.ErrorBanner; }
+  get: function () { return chunkHVIL2FEQ_cjs.ErrorBanner; }
 });
 Object.defineProperty(exports, "HOTKEYS", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.HOTKEYS; }
+  get: function () { return chunkHVIL2FEQ_cjs.HOTKEYS; }
 });
 Object.defineProperty(exports, "JumpToLatest", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.JumpToLatest; }
+  get: function () { return chunkHVIL2FEQ_cjs.JumpToLatest; }
 });
 Object.defineProperty(exports, "LIMITS", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.LIMITS; }
+  get: function () { return chunkHVIL2FEQ_cjs.LIMITS; }
 });
 Object.defineProperty(exports, "MessageActions", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.MessageActions; }
+  get: function () { return chunkHVIL2FEQ_cjs.MessageActions; }
 });
 Object.defineProperty(exports, "MessageBubble", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.MessageBubble; }
+  get: function () { return chunkHVIL2FEQ_cjs.MessageBubble; }
 });
 Object.defineProperty(exports, "MessageList", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.MessageList; }
+  get: function () { return chunkHVIL2FEQ_cjs.MessageList; }
 });
 Object.defineProperty(exports, "STORAGE_KEYS", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.STORAGE_KEYS; }
+  get: function () { return chunkHVIL2FEQ_cjs.STORAGE_KEYS; }
 });
 Object.defineProperty(exports, "Sources", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.Sources; }
+  get: function () { return chunkHVIL2FEQ_cjs.Sources; }
 });
 Object.defineProperty(exports, "StreamingIndicator", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.StreamingIndicator; }
+  get: function () { return chunkHVIL2FEQ_cjs.StreamingIndicator; }
 });
 Object.defineProperty(exports, "ToolCalls", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.ToolCalls; }
+  get: function () { return chunkHVIL2FEQ_cjs.ToolCalls; }
 });
 Object.defineProperty(exports, "createId", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.createId; }
+  get: function () { return chunkHVIL2FEQ_cjs.createId; }
 });
 Object.defineProperty(exports, "createTokenBuffer", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.createTokenBuffer; }
+  get: function () { return chunkHVIL2FEQ_cjs.createTokenBuffer; }
 });
 Object.defineProperty(exports, "deriveInitials", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.deriveInitials; }
+  get: function () { return chunkHVIL2FEQ_cjs.deriveInitials; }
 });
 Object.defineProperty(exports, "getChatLogger", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.getChatLogger; }
+  get: function () { return chunkHVIL2FEQ_cjs.getChatLogger; }
 });
 Object.defineProperty(exports, "initialState", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.initialState; }
+  get: function () { return chunkHVIL2FEQ_cjs.initialState; }
 });
 Object.defineProperty(exports, "reducer", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.reducer; }
+  get: function () { return chunkHVIL2FEQ_cjs.reducer; }
 });
 Object.defineProperty(exports, "resolvePersona", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.resolvePersona; }
+  get: function () { return chunkHVIL2FEQ_cjs.resolvePersona; }
 });
 Object.defineProperty(exports, "useChat", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.useChat; }
+  get: function () { return chunkHVIL2FEQ_cjs.useChat; }
 });
 Object.defineProperty(exports, "useChatAudio", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.useChatAudio; }
+  get: function () { return chunkHVIL2FEQ_cjs.useChatAudio; }
 });
 Object.defineProperty(exports, "useChatAudioPrefs", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.useChatAudioPrefs; }
+  get: function () { return chunkHVIL2FEQ_cjs.useChatAudioPrefs; }
 });
 Object.defineProperty(exports, "useChatComposer", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.useChatComposer; }
+  get: function () { return chunkHVIL2FEQ_cjs.useChatComposer; }
 });
 Object.defineProperty(exports, "useChatContext", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.useChatContext; }
+  get: function () { return chunkHVIL2FEQ_cjs.useChatContext; }
 });
 Object.defineProperty(exports, "useChatContextOptional", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.useChatContextOptional; }
+  get: function () { return chunkHVIL2FEQ_cjs.useChatContextOptional; }
 });
 Object.defineProperty(exports, "useChatHistory", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.useChatHistory; }
+  get: function () { return chunkHVIL2FEQ_cjs.useChatHistory; }
 });
 Object.defineProperty(exports, "useChatLayout", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.useChatLayout; }
+  get: function () { return chunkHVIL2FEQ_cjs.useChatLayout; }
 });
 Object.defineProperty(exports, "useChatScroll", {
   enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.useChatScroll; }
+  get: function () { return chunkHVIL2FEQ_cjs.useChatScroll; }
 });
 Object.defineProperty(exports, "TreeError", {
   enumerable: true,

package/dist/index.d.cts

@@ -1869,6 +1869,32 @@ interface UseChatComposerReturn {
 }
 declare function useChatComposer(options: UseChatComposerOptions): UseChatComposerReturn;
 
+type ComposerSize = 'sm' | 'md' | 'lg';
+interface ComposerProps {
+    composer: UseChatComposerReturn;
+    placeholder?: string;
+    disabled?: boolean;
+    showAttachmentButton?: boolean;
+    onPickFiles?: () => void;
+    toolbarStart?: ReactNode;
+    toolbarEnd?: ReactNode;
+    attachmentTray?: ReactNode;
+    className?: string;
+    textareaClassName?: string;
+    /** Visual size — controls textarea height + button slot size.
+     *
+     * - ``sm``  — 32px slot, dense compact composer (admin sidebars, etc).
+     * - ``md``  — 36px slot, default. Same as the legacy fixed size.
+     * - ``lg``  — 48px slot, generous textarea. Use when the chat is
+     *   the page's primary surface (onboarding, support).
+     */
+    size?: ComposerSize;
+    /** Show "Stop" button instead of "Send" while streaming. */
+    isStreaming?: boolean;
+    onCancel?: () => void;
+}
+declare const Composer: react.ForwardRefExoticComponent<ComposerProps & react.RefAttributes<HTMLDivElement>>;
+
 interface AttachmentRendererArgs {
     attachment: ChatAttachment;
     /** True when shown inside the composer's staging tray (denser layout). */
@@ -1980,6 +2006,9 @@ interface ChatRootProps {
     onPickFiles?: () => void;
     /** Hide the composer input area entirely (e.g. while waiting for human approval). */
     hideComposer?: boolean;
+    /** Composer size variant. Default ``md`` (36px slot). Use ``lg`` for primary
+     * surfaces (onboarding, full-page chat), ``sm`` for dense sidebars. */
+    composerSize?: ComposerSize;
 }
 declare function ChatRoot(props: ChatRootProps): react_jsx_runtime.JSX.Element;
 
@@ -2315,23 +2344,6 @@ interface MessageActionsProps {
 }
 declare function MessageActions({ role, onCopy, onRegenerate, onEdit, onDelete, hideOn, className, }: MessageActionsProps): react_jsx_runtime.JSX.Element;
 
-interface ComposerProps {
-    composer: UseChatComposerReturn;
-    placeholder?: string;
-    disabled?: boolean;
-    showAttachmentButton?: boolean;
-    onPickFiles?: () => void;
-    toolbarStart?: ReactNode;
-    toolbarEnd?: ReactNode;
-    attachmentTray?: ReactNode;
-    className?: string;
-    textareaClassName?: string;
-    /** Show "Stop" button instead of "Send" while streaming. */
-    isStreaming?: boolean;
-    onCancel?: () => void;
-}
-declare const Composer: react.ForwardRefExoticComponent<ComposerProps & react.RefAttributes<HTMLDivElement>>;
-
 interface SourcesProps {
     sources: ChatSource[];
     layout?: 'inline' | 'grid';

package/dist/index.d.ts

@@ -1869,6 +1869,32 @@ interface UseChatComposerReturn {
 }
 declare function useChatComposer(options: UseChatComposerOptions): UseChatComposerReturn;
 
+type ComposerSize = 'sm' | 'md' | 'lg';
+interface ComposerProps {
+    composer: UseChatComposerReturn;
+    placeholder?: string;
+    disabled?: boolean;
+    showAttachmentButton?: boolean;
+    onPickFiles?: () => void;
+    toolbarStart?: ReactNode;
+    toolbarEnd?: ReactNode;
+    attachmentTray?: ReactNode;
+    className?: string;
+    textareaClassName?: string;
+    /** Visual size — controls textarea height + button slot size.
+     *
+     * - ``sm``  — 32px slot, dense compact composer (admin sidebars, etc).
+     * - ``md``  — 36px slot, default. Same as the legacy fixed size.
+     * - ``lg``  — 48px slot, generous textarea. Use when the chat is
+     *   the page's primary surface (onboarding, support).
+     */
+    size?: ComposerSize;
+    /** Show "Stop" button instead of "Send" while streaming. */
+    isStreaming?: boolean;
+    onCancel?: () => void;
+}
+declare const Composer: react.ForwardRefExoticComponent<ComposerProps & react.RefAttributes<HTMLDivElement>>;
+
 interface AttachmentRendererArgs {
     attachment: ChatAttachment;
     /** True when shown inside the composer's staging tray (denser layout). */
@@ -1980,6 +2006,9 @@ interface ChatRootProps {
     onPickFiles?: () => void;
     /** Hide the composer input area entirely (e.g. while waiting for human approval). */
     hideComposer?: boolean;
+    /** Composer size variant. Default ``md`` (36px slot). Use ``lg`` for primary
+     * surfaces (onboarding, full-page chat), ``sm`` for dense sidebars. */
+    composerSize?: ComposerSize;
 }
 declare function ChatRoot(props: ChatRootProps): react_jsx_runtime.JSX.Element;
 
@@ -2315,23 +2344,6 @@ interface MessageActionsProps {
 }
 declare function MessageActions({ role, onCopy, onRegenerate, onEdit, onDelete, hideOn, className, }: MessageActionsProps): react_jsx_runtime.JSX.Element;
 
-interface ComposerProps {
-    composer: UseChatComposerReturn;
-    placeholder?: string;
-    disabled?: boolean;
-    showAttachmentButton?: boolean;
-    onPickFiles?: () => void;
-    toolbarStart?: ReactNode;
-    toolbarEnd?: ReactNode;
-    attachmentTray?: ReactNode;
-    className?: string;
-    textareaClassName?: string;
-    /** Show "Stop" button instead of "Send" while streaming. */
-    isStreaming?: boolean;
-    onCancel?: () => void;
-}
-declare const Composer: react.ForwardRefExoticComponent<ComposerProps & react.RefAttributes<HTMLDivElement>>;
-
 interface SourcesProps {
     sources: ChatSource[];
     layout?: 'inline' | 'grid';

package/dist/index.mjs

@@ -5,8 +5,8 @@ export { NativeProvider, StreamProvider, VideoControls, VideoErrorFallback, Vide
 export { ImageViewer } from './chunk-OBRSGM64.mjs';
 export { generateContentKey, useAudioCache, useBlobUrlCleanup, useImageCache, useMediaCacheStore, useVideoCache, useVideoPlayerSettings } from './chunk-C6GXVH5J.mjs';
 export { CronSchedulerProvider, CustomInput, DayChips, MonthDayGrid, SchedulePreview, ScheduleTypeSelector, TimeSelector, buildCron, humanizeCron, isValidCron, parseCron, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays } from './chunk-PVAX67JG.mjs';
-import { LIMITS, createId } from './chunk-QCKJVSJF.mjs';
-export { Attachments, AttachmentsGrid, AttachmentsList, CHAT_EVENT_NAME, CSS_VARS, ChatProvider, ChatRoot, Composer, DEFAULT_LABELS, DEFAULT_SIDEBAR, DEFAULT_Z_INDEX, EmptyState, ErrorBanner, HOTKEYS, JumpToLatest, LIMITS, MessageActions, MessageBubble, MessageList, STORAGE_KEYS, Sources, StreamingIndicator, ToolCalls, createId, createTokenBuffer, deriveInitials, getChatLogger, initialState, reducer, resolvePersona, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatHistory, useChatLayout, useChatScroll } from './chunk-QCKJVSJF.mjs';
+import { LIMITS, createId } from './chunk-XG3XAO7W.mjs';
+export { Attachments, AttachmentsGrid, AttachmentsList, CHAT_EVENT_NAME, CSS_VARS, ChatProvider, ChatRoot, Composer, DEFAULT_LABELS, DEFAULT_SIDEBAR, DEFAULT_Z_INDEX, EmptyState, ErrorBanner, HOTKEYS, JumpToLatest, LIMITS, MessageActions, MessageBubble, MessageList, STORAGE_KEYS, Sources, StreamingIndicator, ToolCalls, createId, createTokenBuffer, deriveInitials, getChatLogger, initialState, reducer, resolvePersona, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatHistory, useChatLayout, useChatScroll } from './chunk-XG3XAO7W.mjs';
 export { TreeError, TreeSkeleton, createDemoTree } from './chunk-B6IR5KSC.mjs';
 export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, appearanceToStyle, clearTreeState, createChildCache, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead } from './chunk-G5IEC7SR.mjs';
 import { PlaygroundProvider } from './chunk-ZUFTH5IR.mjs';
@@ -347,7 +347,7 @@ var LazyTree = createLazyComponent(
   }
 );
 var LazyChat = createLazyComponent(
-  () => import('./ChatRoot-CZMOJOGD.mjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-3FZ6DXBD.mjs').then((m) => ({ default: m.ChatRoot })),
   {
     displayName: "LazyChat",
     fallback: /* @__PURE__ */ jsx(LoadingFallback, { minHeight: 320, text: "Loading chat\u2026" })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.349",
+  "version": "2.1.350",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -101,8 +101,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.349",
-    "@djangocfg/ui-core": "^2.1.349",
+    "@djangocfg/i18n": "^2.1.350",
+    "@djangocfg/ui-core": "^2.1.350",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -155,10 +155,10 @@
     "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.349",
+    "@djangocfg/i18n": "^2.1.350",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.349",
-    "@djangocfg/ui-core": "^2.1.349",
+    "@djangocfg/typescript-config": "^2.1.350",
+    "@djangocfg/ui-core": "^2.1.350",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/tools/Chat/Chat.story.tsx

@@ -101,6 +101,39 @@ export const Default = () => {
   );
 };
 
+// ---------------------------------------------------------------------------
+// 1b) ComposerSizes — sm / md / lg side-by-side
+// ---------------------------------------------------------------------------
+
+export const ComposerSizes = () => {
+  const make = () =>
+    createMockTransport({
+      replies: ['I scale with the composer size — try `lg` on a primary surface.'],
+      latencyMs: 25,
+    });
+  const cells: Array<{ size: 'sm' | 'md' | 'lg'; label: string }> = [
+    { size: 'sm', label: 'sm — 32px (compact)' },
+    { size: 'md', label: 'md — 36px (default)' },
+    { size: 'lg', label: 'lg — 48px (primary surface)' },
+  ];
+  return (
+    <div className="grid h-[640px] grid-cols-3 gap-3">
+      {cells.map(({ size, label }) => (
+        <Frame key={size} h={620}>
+          <ChatRoot
+            transport={make()}
+            config={{
+              greeting: label,
+              placeholder: 'Type a message…',
+            }}
+            composerSize={size}
+          />
+        </Frame>
+      ))}
+    </div>
+  );
+};
+
 // ---------------------------------------------------------------------------
 // 2) WithToolCalls — scripted tool invocations
 // ---------------------------------------------------------------------------

package/src/tools/Chat/components/ChatRoot.tsx

@@ -10,7 +10,7 @@ import { ChatProvider, useChatContext, type ChatContextValue } from '../context'
 import { useChatComposer, type UseChatComposerReturn } from '../hooks/useChatComposer';
 import { useChatScroll } from '../hooks/useChatScroll';
 import { useChatHistory } from '../hooks/useChatHistory';
-import { Composer } from './Composer';
+import { Composer, type ComposerSize } from './Composer';
 import { EmptyState } from './EmptyState';
 import { ErrorBanner } from './ErrorBanner';
 import { JumpToLatest } from './JumpToLatest';
@@ -75,6 +75,9 @@ export interface ChatRootProps {
   onPickFiles?: () => void;
   /** Hide the composer input area entirely (e.g. while waiting for human approval). */
   hideComposer?: boolean;
+  /** Composer size variant. Default ``md`` (36px slot). Use ``lg`` for primary
+   * surfaces (onboarding, full-page chat), ``sm`` for dense sidebars. */
+  composerSize?: ComposerSize;
 }
 
 export function ChatRoot(props: ChatRootProps) {
@@ -195,6 +198,7 @@ function ChatRootShell({ className, slots }: ChatRootShellProps) {
           toolbarStart={slots.composerToolbarStart}
           toolbarEnd={slots.composerToolbarEnd}
           attachmentTray={slots.composerAttachmentTray}
+          size={slots.composerSize}
         />
       )}
       {slots.footer ?? null}

package/src/tools/Chat/components/Composer.tsx

@@ -10,6 +10,8 @@ import { useChatContextOptional } from '../context';
 import type { UseChatComposerReturn } from '../hooks/useChatComposer';
 import { Attachments } from './Attachments';
 
+export type ComposerSize = 'sm' | 'md' | 'lg';
+
 export interface ComposerProps {
   composer: UseChatComposerReturn;
   placeholder?: string;
@@ -21,11 +23,57 @@ export interface ComposerProps {
   attachmentTray?: ReactNode;
   className?: string;
   textareaClassName?: string;
+  /** Visual size — controls textarea height + button slot size.
+   *
+   * - ``sm``  — 32px slot, dense compact composer (admin sidebars, etc).
+   * - ``md``  — 36px slot, default. Same as the legacy fixed size.
+   * - ``lg``  — 48px slot, generous textarea. Use when the chat is
+   *   the page's primary surface (onboarding, support).
+   */
+  size?: ComposerSize;
   /** Show "Stop" button instead of "Send" while streaming. */
   isStreaming?: boolean;
   onCancel?: () => void;
 }
 
+const SIZE_CLASSES: Record<ComposerSize, {
+  slot: string;
+  button: string;
+  iconButton: string;
+  textarea: string;
+  text: string;
+  padding: string;
+  containerPadding: string;
+}> = {
+  sm: {
+    slot: '[&>:not(textarea)]:h-8',
+    button: 'h-8 w-8',
+    iconButton: 'size-3.5',
+    textarea: 'min-h-8 max-h-48 px-3 py-1.5',
+    text: 'text-sm',
+    padding: 'gap-1.5',
+    containerPadding: 'px-2 pt-1.5 pb-[max(0.375rem,env(safe-area-inset-bottom))]',
+  },
+  md: {
+    slot: '[&>:not(textarea)]:h-9',
+    button: 'h-9 w-9',
+    iconButton: 'size-4',
+    textarea: 'min-h-9 max-h-60 px-3.5 py-2',
+    text: 'text-base sm:text-sm',
+    padding: 'gap-1.5',
+    containerPadding: 'px-2.5 pt-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]',
+  },
+  lg: {
+    slot: '[&>:not(textarea)]:h-12',
+    button: 'h-12 w-12',
+    iconButton: 'size-5',
+    textarea: 'min-h-12 max-h-72 px-4 py-3',
+    text: 'text-base',
+    padding: 'gap-2',
+    containerPadding: 'px-3.5 pt-3 pb-[max(0.875rem,env(safe-area-inset-bottom))]',
+  },
+};
+
 export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Composer(
   {
     composer,
@@ -38,6 +86,7 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
     attachmentTray,
     className,
     textareaClassName,
+    size = 'md',
     isStreaming: isStreamingProp,
     onCancel: onCancelProp,
   },
@@ -47,12 +96,14 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
   const isStreaming = isStreamingProp ?? ctx?.isStreaming ?? false;
   const onCancel = onCancelProp ?? ctx?.cancelStream;
   const isDisabled = disabled ?? isStreaming;
+  const sz = SIZE_CLASSES[size];
 
   return (
     <div
       ref={ref}
       className={cn(
-        'border-t border-border bg-background/95 px-2.5 pt-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]',
+        'border-t border-border bg-background/95',
+        sz.containerPadding,
         className,
       )}
     >
@@ -67,11 +118,11 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
         </div>
       ) : null}
 
-      {/* `[&>*]:h-9` enforces a consistent 36px slot height so toolbar
-       *   buttons line up with the textarea baseline (`min-h-[36px]`).
-       *   Toolbar slots that want to opt out can pass an explicit class
-       *   like `!h-auto`. */}
-      <div className="flex items-end gap-1.5 [&>:not(textarea)]:shrink-0 [&>:not(textarea)]:h-9">
+      {/* Size-aware slot row. ``[&>:not(textarea)]:h-{N}`` enforces a
+       *   consistent slot height so toolbar buttons line up with the
+       *   textarea baseline. Toolbar slots that want to opt out can
+       *   pass an explicit class like `!h-auto`. */}
+      <div className={cn('flex items-end [&>:not(textarea)]:shrink-0', sz.padding, sz.slot)}>
         {showAttachmentButton ? (
           <Button
             type="button"
@@ -80,9 +131,9 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
             onClick={onPickFiles}
             aria-label="Attach files"
             disabled={isDisabled}
-            className="h-9 w-9"
+            className={sz.button}
           >
-            <Paperclip aria-hidden className="size-4" />
+            <Paperclip aria-hidden className={sz.iconButton} />
           </Button>
         ) : null}
 
@@ -96,7 +147,9 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
           aria-multiline="true"
           disabled={isDisabled}
           className={cn(
-            'min-h-9 max-h-60 flex-1 resize-none rounded-2xl px-3.5 py-2 text-base sm:text-sm',
+            'flex-1 resize-none rounded-2xl',
+            sz.textarea,
+            sz.text,
             textareaClassName,
           )}
         />
@@ -111,9 +164,9 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
             onClick={onCancel}
             aria-label="Stop"
             aria-keyshortcuts="Escape"
-            className="h-9 w-9"
+            className={sz.button}
           >
-            <Square aria-hidden className="size-3.5" />
+            <Square aria-hidden className={sz.iconButton} />
           </Button>
         ) : (
           <Button
@@ -123,9 +176,9 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
             disabled={!composer.canSubmit}
             aria-label="Send"
             aria-keyshortcuts="Enter"
-            className="h-9 w-9"
+            className={sz.button}
           >
-            <Send aria-hidden className="size-4" />
+            <Send aria-hidden className={sz.iconButton} />
           </Button>
         )}
       </div>