@djangocfg/ui-tools 2.1.349 → 2.1.351

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.349",
+  "version": "2.1.351",
   "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.351",
+    "@djangocfg/ui-core": "^2.1.351",
     "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.351",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.349",
-    "@djangocfg/ui-core": "^2.1.349",
+    "@djangocfg/typescript-config": "^2.1.351",
+    "@djangocfg/ui-core": "^2.1.351",
     "@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/AudioToggle.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+/**
+ * Mute / unmute toggle for chat audio events.
+ *
+ * Reads the current ``muted`` state from the active chat context and
+ * persists changes through ``useChatAudioPrefs`` (cross-tab safe). The
+ * button auto-hides when no ``audio.sounds`` config is provided —
+ * showing a mute toggle for a chat with no sounds is just clutter.
+ *
+ * Drop into a ChatRoot ``header`` slot or anywhere inside a chat
+ * provider:
+ *
+ * ```tsx
+ * <ChatRoot
+ *   header={<AudioToggle />}
+ *   audio={{ sounds: { messageReceived: '/ping.mp3' } }}
+ *   ...
+ * />
+ * ```
+ */
+
+import { Volume2, VolumeX } from 'lucide-react';
+
+import { Button } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useChatContextOptional } from '../context';
+import { useChatAudioPrefs } from '../core/audio/preferences';
+
+export interface AudioToggleProps {
+  /** Visual size — matches Button sizes. Default: ``icon``. */
+  size?: 'sm' | 'icon';
+  /** Variant passed to the underlying Button. Default: ``ghost``. */
+  variant?: 'ghost' | 'outline' | 'secondary';
+  /** Force-show even when no audio config is wired (e.g. for stories). */
+  alwaysShow?: boolean;
+  className?: string;
+}
+
+export function AudioToggle({
+  size = 'icon',
+  variant = 'ghost',
+  alwaysShow = false,
+  className,
+}: AudioToggleProps) {
+  // Read straight from the persist store so the toggle works even
+  // when rendered OUTSIDE the ChatRoot (e.g. in a parent header). The
+  // chat audio bus reads the same store, so a click here flips the
+  // "muted" state for any sibling ChatRoot in the same tab and
+  // mirrors across tabs via the storage event.
+  const muted = useChatAudioPrefs((s) => s.muted);
+  const setMuted = useChatAudioPrefs((s) => s.setMuted);
+
+  // If a ChatRoot is in scope, hide unless it actually wired sounds —
+  // otherwise the button is a no-op for that surface. When rendered
+  // standalone (no context), default to visible.
+  const ctx = useChatContextOptional();
+  if (ctx && !ctx.hasAudio && !alwaysShow) return null;
+
+  const Icon = muted ? VolumeX : Volume2;
+  const label = muted ? 'Unmute chat sounds' : 'Mute chat sounds';
+
+  return (
+    <Button
+      type="button"
+      variant={variant}
+      size={size}
+      onClick={() => setMuted(!muted)}
+      aria-label={label}
+      aria-pressed={muted}
+      title={label}
+      className={cn(size === 'icon' ? 'h-9 w-9' : '', className)}
+    >
+      <Icon aria-hidden className="size-4" />
+    </Button>
+  );
+}

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>

package/src/tools/Chat/components/index.ts

@@ -22,3 +22,4 @@ export { EmptyState, type EmptyStateProps } from './EmptyState';
 export { ErrorBanner, type ErrorBannerProps } from './ErrorBanner';
 export { JumpToLatest, type JumpToLatestProps } from './JumpToLatest';
 export { StreamingIndicator, type StreamingIndicatorProps } from './StreamingIndicator';
+export { AudioToggle, type AudioToggleProps } from './AudioToggle';

package/src/tools/Chat/context/ChatProvider.tsx

@@ -22,6 +22,10 @@ export interface ChatContextValue extends UseChatReturn {
   config: ChatConfig;
   labels: ChatLabels;
   audio: UseChatAudioReturn;
+  /** True iff the host wired at least one ``audio.sounds[event]`` URL.
+   * Components like ``AudioToggle`` use this to auto-hide when there
+   * is nothing to mute. */
+  hasAudio: boolean;
 }
 
 const Ctx = createContext<ChatContextValue | null>(null);
@@ -101,9 +105,17 @@ export function ChatProvider({
     [config.labels],
   );
 
+  const hasAudio = useMemo<boolean>(() => {
+    const sounds = audio?.sounds;
+    if (!sounds) return false;
+    return Object.values(sounds).some(
+      (v) => typeof v === 'string' && v.length > 0,
+    );
+  }, [audio]);
+
   const value = useMemo<ChatContextValue>(
-    () => ({ ...chat, layout, config, labels, audio: audioApi }),
-    [chat, layout, config, labels, audioApi],
+    () => ({ ...chat, layout, config, labels, audio: audioApi, hasAudio }),
+    [chat, layout, config, labels, audioApi, hasAudio],
   );
 
   return (

package/src/tools/Chat/index.ts

@@ -137,6 +137,7 @@ export {
   ErrorBanner,
   JumpToLatest,
   StreamingIndicator,
+  AudioToggle,
   type ChatRootProps,
   type MessageListProps,
   type MessageBubbleProps,
@@ -155,6 +156,7 @@ export {
   type ErrorBannerProps,
   type JumpToLatestProps,
   type StreamingIndicatorProps,
+  type AudioToggleProps,
 } from './components';
 
 // Lazy preset

package/dist/ChatRoot-CZMOJOGD.mjs

@@ -1,5 +0,0 @@
-export { ChatRoot } from './chunk-QCKJVSJF.mjs';
-import './chunk-2ZLKZ5VR.mjs';
-import './chunk-N2XQF2OL.mjs';
-//# sourceMappingURL=ChatRoot-CZMOJOGD.mjs.map
-//# sourceMappingURL=ChatRoot-CZMOJOGD.mjs.map

package/dist/ChatRoot-VTYANC7M.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var chunkXYGB26BY_cjs = require('./chunk-XYGB26BY.cjs');
-require('./chunk-B5AWZOHJ.cjs');
-require('./chunk-OLISEQHS.cjs');
-
-
-
-Object.defineProperty(exports, "ChatRoot", {
-  enumerable: true,
-  get: function () { return chunkXYGB26BY_cjs.ChatRoot; }
-});
-//# sourceMappingURL=ChatRoot-VTYANC7M.cjs.map
-//# sourceMappingURL=ChatRoot-VTYANC7M.cjs.map