@epicbagel/saas-kit 1.16.0 → 1.18.0

package/README.md

@@ -15,6 +15,20 @@ npm install @epicbagel/saas-kit
 Peer dependencies: `react` and `react-dom` (18 or 19), `lucide-react`
 (`>=0.400.0 <2`), `react-icons` (5) and `tailwindcss` (4.3 or later).
 
+## Page header actions
+
+`PageHeaderActions` expands its actions on desktop and collapses them into
+one menu on mobile. Use `presentation="menu"` to keep the same menu at every
+width, giving long page titles more room. Its action order, nested menus,
+disabled state, destructive treatment and callbacks stay the same.
+`mobileLabel` and `mobileAriaLabel` name the menu trigger in either layout.
+
+```tsx
+<PageHeader title="Senior Enterprise Account Executive · Example Company">
+  <PageHeaderActions presentation="menu" actions={actions} />
+</PageHeader>
+```
+
 ## Live voice in Chat
 
 Pass a controlled `voiceSession` to `Chat` or `ChatInput` to show start, mute,
@@ -42,16 +56,20 @@ does not import a voice provider. Stop and release audio tracks before setting
 Wrap the application in `DictationProvider` to use an authenticated transcription
 API for every `VoiceDictationButton`, including buttons nested in chat, forms or
 another component library. The recorder opens beside its microphone on desktop
-and fills the screen below 768px, with elapsed time, LiveKit audio bars and
-Done/Cancel controls. The bars use the recording stream without opening a second
-microphone. Resizing keeps the current recording alive.
+and fills the screen below 768px. Its roomy panel puts the title and close control
+above a microphone, live audio bars and elapsed time, followed by the transcript
+and Done/Cancel controls. The microphone and bars share the palette's first chart
+colour; surfaces and buttons keep their normal theme. The bars use the recording
+stream without opening a second microphone; native recognition has no meter and
+shows no waveform. No device selector is shown because the capture API does not
+offer device selection. Resizing keeps the current recording alive.
 
 For hidden/programmatic triggers, it uses the focused visible button as the
 desktop anchor. Hosts can pass an explicit `anchorRef` for a custom trigger.
 Without a visible anchor it opens full-screen. Nested and sibling dialogs keep
 their focus and cancellation behavior.
 The recorder runs until **Done**, finishes the last words, then commits the returned text once. Failed requests keep the
-take available for retry. Cancel stops microphone tracks, aborts the request and
+take available for retry. Cancel and the header's close control stop microphone tracks, abort the request and
 ignores a late answer. The kit never persists audio or knows provider credentials.
 
 ```tsx

package/dist/{chunk-6S6GD43V.js → chunk-2UYEMPOJ.js}

@@ -33,13 +33,14 @@ function MenuActions({ actions }) {
   return actions.map((action) => /* @__PURE__ */ jsxs(Fragment, { children: [
     action.separatorBefore && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
     action.items?.length ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { disabled: action.disabled, children: /* @__PURE__ */ jsx(MenuActionContent, { action }) }),
+      /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { disabled: action.disabled, title: action.title, children: /* @__PURE__ */ jsx(MenuActionContent, { action }) }),
       /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx(MenuActions, { actions: action.items }) })
     ] }) : /* @__PURE__ */ jsx(
       DropdownMenuItem,
       {
         disabled: action.disabled,
         tone: action.tone,
+        title: action.title,
         onSelect: action.onSelect,
         className: action.description ? "items-start" : void 0,
         children: /* @__PURE__ */ jsx(MenuActionContent, { action })
@@ -49,6 +50,7 @@ function MenuActions({ actions }) {
 }
 function PageHeaderActions({
   actions,
+  presentation = "responsive",
   mobileLabel = "Actions",
   mobileAriaLabel,
   className
@@ -68,7 +70,7 @@ function PageHeaderActions({
     return rank[priorityFor(left.action)] - rank[priorityFor(right.action)] || left.index - right.index;
   }).map(({ action }) => action) : actions;
   return /* @__PURE__ */ jsxs("div", { className: cn("shrink-0", className), children: [
-    /* @__PURE__ */ jsx(
+    presentation === "responsive" && /* @__PURE__ */ jsx(
       "div",
       {
         className: "hidden items-center gap-2 sm:flex",
@@ -110,7 +112,7 @@ function PageHeaderActions({
         )
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "sm:hidden", "data-slot": "page-header-actions-mobile", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx("div", { className: presentation === "responsive" ? "sm:hidden" : void 0, "data-slot": "page-header-actions-mobile", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", variant: "outline", "aria-label": mobileAriaLabel, children: [
         mobileLabel,
         /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })

package/dist/{chunk-6YXKFVZU.cjs → chunk-AU5GUDOW.cjs}

@@ -33,13 +33,14 @@ function MenuActions({ actions }) {
   return actions.map((action) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
     action.separatorBefore && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuSeparator, {}),
     _optionalChain([action, 'access', _ => _.items, 'optionalAccess', _2 => _2.length]) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenuSub, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuSubTrigger, { disabled: action.disabled, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuActionContent, { action }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuSubTrigger, { disabled: action.disabled, title: action.title, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuActionContent, { action }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuSubContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuActions, { actions: action.items }) })
     ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _chunkZAITUDYDcjs.DropdownMenuItem,
       {
         disabled: action.disabled,
         tone: action.tone,
+        title: action.title,
         onSelect: action.onSelect,
         className: action.description ? "items-start" : void 0,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuActionContent, { action })
@@ -49,6 +50,7 @@ function MenuActions({ actions }) {
 }
 function PageHeaderActions({
   actions,
+  presentation = "responsive",
   mobileLabel = "Actions",
   mobileAriaLabel,
   className
@@ -68,7 +70,7 @@ function PageHeaderActions({
     return rank[priorityFor(left.action)] - rank[priorityFor(right.action)] || left.index - right.index;
   }).map(({ action }) => action) : actions;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "shrink-0", className), children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    presentation === "responsive" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
         className: "hidden items-center gap-2 sm:flex",
@@ -110,7 +112,7 @@ function PageHeaderActions({
         )
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sm:hidden", "data-slot": "page-header-actions-mobile", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenu, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: presentation === "responsive" ? "sm:hidden" : void 0, "data-slot": "page-header-actions-mobile", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenu, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", size: "sm", variant: "outline", "aria-label": mobileAriaLabel, children: [
         mobileLabel,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDown, { "aria-hidden": "true" })

package/dist/{chunk-QWUMIAYD.cjs → chunk-PH2TV7XI.cjs}

@@ -118,40 +118,72 @@ function VoiceDictationButton({
     }
   };
   const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex min-w-0 items-start justify-between gap-3", !anchored && "w-full max-w-xl self-center"), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0 space-y-1", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "font-medium", anchored ? "text-sm" : "text-lg"), children: title || "Voice dictation" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { role: "status", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-          busy ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.LoaderCircle, { "aria-hidden": "true", className: "size-3.5 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Mic, { "aria-hidden": "true", className: "size-3.5" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex min-w-0 shrink-0 items-start justify-between gap-4", !anchored && "w-full max-w-xl self-center"), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0 space-y-2 pt-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "break-words text-xl font-semibold leading-tight", children: title || "Voice dictation" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { role: "status", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+          busy && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.LoaderCircle, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin motion-reduce:animate-none" }),
           capture.state === "transcribing" ? "Finishing transcript\u2026" : capture.state === "requesting" ? "Starting dictation\u2026" : error ? "Recording not saved" : capture.state === "ready" ? "Ready" : caption
         ] })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "time", { "aria-label": "Recording duration", dateTime: `PT${elapsed}S`, className: "pt-0.5 font-mono text-xs tabular-nums text-muted-foreground", children: [
-        Math.floor(elapsed / 60).toString().padStart(2, "0"),
-        ":",
-        (elapsed % 60).toString().padStart(2, "0")
-      ] })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkJDEXZGIYcjs.Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          shape: "circle",
+          "aria-label": "Cancel dictation",
+          className: "size-[44px] shrink-0 text-muted-foreground [&_svg]:size-5",
+          onClick: handleCancel,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { "aria-hidden": "true", className: "size-5" })
+        }
+      )
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex min-h-0 flex-col gap-3", !anchored && "w-full max-w-xl flex-1 justify-center self-center py-8 text-center"), children: [
-      capture.audioLevels && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DictationWaveform, { source: capture.audioLevels, state: capture.state, className: !anchored ? "h-20" : void 0 }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { id: descriptionId, className: "text-xs text-muted-foreground", children: capture.state === "transcribing" ? "Finishing your last words\u2026" : capture.state === "requesting" ? "Allow microphone access to start." : error ? capture.canRetry ? "Retry this take or record again." : "Try recording again." : "Speak, then choose Done to add the text." }),
-      displayTranscript && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "max-h-40 overflow-y-auto text-sm leading-relaxed", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex flex-col gap-5", !anchored && "w-full max-w-xl flex-1 justify-center self-center py-6"), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "dictation-meter", className: "flex min-w-0 items-center gap-3 py-5 text-[hsl(var(--chart-1))] sm:gap-5 sm:py-7", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-slot": "dictation-microphone",
+            className: "flex size-[72px] shrink-0 items-center justify-center rounded-full bg-current/10 sm:size-[96px]",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex size-[52px] items-center justify-center rounded-full bg-[hsl(var(--chart-1))] text-popover sm:size-[72px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Mic, { className: "size-7 sm:size-9" }) })
+          }
+        ),
+        capture.audioLevels && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DictationWaveform, { source: capture.audioLevels, state: capture.state }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "time",
+          {
+            "aria-label": "Recording duration",
+            dateTime: `PT${elapsed}S`,
+            className: "ml-auto shrink-0 font-mono text-xl tabular-nums text-muted-foreground sm:text-2xl",
+            children: [
+              Math.floor(elapsed / 60).toString().padStart(2, "0"),
+              ":",
+              (elapsed % 60).toString().padStart(2, "0")
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { id: descriptionId, className: "text-base leading-relaxed text-muted-foreground", children: capture.state === "transcribing" ? "Finishing your last words\u2026" : capture.state === "requesting" ? "Allow microphone access to start." : error ? capture.canRetry ? "Retry this take or record again." : "Try recording again." : "Speak, then choose Done to add the text." }),
+      displayTranscript && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "max-h-48 overflow-y-auto break-words text-base leading-relaxed", children: [
         transcript,
         interim && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-muted-foreground", children: [
           transcript ? " " : "",
           interim
         ] })
       ] }),
-      error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { role: "alert", className: "text-xs text-destructive", children: error }),
-      !error && capture.previewError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { role: "status", className: "text-xs text-muted-foreground", children: capture.previewError })
+      error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { role: "alert", className: "text-sm leading-relaxed text-destructive", children: error }),
+      !error && capture.previewError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { role: "status", className: "text-sm leading-relaxed text-muted-foreground", children: capture.previewError })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "gap-2", anchored ? "flex flex-wrap items-center justify-end" : "mt-auto grid w-full max-w-xl grid-cols-2 gap-3 self-center"), children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { ref: cancelControl, type: "button", variant: "ghost", size: "sm", className: anchored ? "min-h-[44px]" : "min-h-[48px]", onClick: handleCancel, children: "Cancel" }),
-      capture.canRetry && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "outline", size: "sm", className: anchored ? "min-h-[44px]" : "order-first col-span-2 min-h-[48px]", onClick: () => {
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "shrink-0 gap-3 pt-2", anchored ? "flex flex-wrap items-center justify-end" : "mt-auto grid w-full max-w-xl grid-cols-[auto_minmax(0,1fr)] self-center"), children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { ref: cancelControl, type: "button", variant: "ghost", className: "min-h-[48px] px-5", onClick: handleCancel, children: "Cancel" }),
+      capture.canRetry && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "outline", className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-[48px] px-5", !anchored && "order-first col-span-2"), onClick: () => {
         _optionalChain([cancelControl, 'access', _13 => _13.current, 'optionalAccess', _14 => _14.focus, 'call', _15 => _15({ preventScroll: true })]);
         void capture.start();
       }, children: "Record again" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", size: "sm", className: anchored ? "min-h-[44px]" : "min-h-[48px]", onClick: () => void handleDone(), disabled: busy, children: capture.state === "transcribing" ? "Transcribing\u2026" : capture.canRetry ? "Retry transcription" : error ? "Try again" : "Done" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", className: "min-h-[48px] min-w-24 px-6", onClick: () => void handleDone(), disabled: busy, children: capture.state === "transcribing" ? "Transcribing\u2026" : capture.canRetry ? "Retry transcription" : error ? "Try again" : "Done" })
     ] })
   ] });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
@@ -195,13 +227,13 @@ function VoiceDictationButton({
           "data-placement": "anchored",
           side: "top",
           align: "center",
-          sideOffset: 8,
+          sideOffset: 12,
           collisionPadding: 12,
           avoidCollisions: true,
           onCloseAutoFocus: closeAutoFocus,
           onKeyDown,
           onEscapeKeyDown: (event) => event.stopPropagation(),
-          className: "z-[200] flex max-h-[var(--radix-popover-content-available-height)] w-96 max-w-[calc(100vw-1.5rem)] flex-col gap-3 overflow-y-auto rounded-2xl border border-border bg-background p-4 text-foreground shadow-lg outline-hidden",
+          className: "z-[200] flex max-h-[var(--radix-popover-content-available-height)] w-[560px] max-w-[calc(100vw-24px)] flex-col gap-6 overflow-y-auto rounded-2xl border border-border bg-popover p-6 text-popover-foreground shadow-xl outline-hidden",
           children: content
         }
       ) })
@@ -221,7 +253,7 @@ function VoiceDictationButton({
           onCloseAutoFocus: closeAutoFocus,
           onKeyDown,
           onEscapeKeyDown: (event) => event.stopPropagation(),
-          className: "fixed inset-0 z-[200] flex h-dvh w-screen flex-col gap-6 overflow-y-auto overscroll-contain bg-background px-6 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] text-foreground outline-hidden",
+          className: "fixed inset-0 z-[200] flex h-dvh w-screen flex-col gap-6 overflow-y-auto overscroll-contain bg-popover px-5 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] text-popover-foreground outline-hidden",
           children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Title, { className: "sr-only", children: "Voice dictation" }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Description, { className: "sr-only", children: "Record your message, then choose Done to add the text. Cancel discards the recording." }),
@@ -234,7 +266,7 @@ function VoiceDictationButton({
 }
 var SILENCE = [];
 var silence = () => SILENCE;
-function DictationWaveform({ source, state, className }) {
+function DictationWaveform({ source, state }) {
   const bands = _react.useSyncExternalStore.call(void 0, source.subscribe, source.getSnapshot, silence);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkNKWHDI4Ccjs.AgentAudioVisualizerBar,
@@ -245,7 +277,8 @@ function DictationWaveform({ source, state, className }) {
       barCount: 24,
       state: state === "recording" ? "listening" : state === "transcribing" ? "thinking" : state === "requesting" ? "connecting" : "disconnected",
       volumeBands: state === "recording" ? bands : void 0,
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, "h-9 w-full text-foreground", className)
+      className: "h-[64px] min-w-0 flex-1 gap-[3px] sm:h-[88px] sm:gap-[4px]",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-[4px] max-w-[6px] flex-1 rounded-full bg-current/15 transition-colors duration-200 motion-reduce:transition-none data-[lk-highlighted=true]:bg-current" })
     }
   );
 }

package/dist/{chunk-JKVVTFAP.js → chunk-ZGTPNSR7.js}

@@ -23,7 +23,7 @@ import {
 } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { Mic, LoaderCircle } from "lucide-react";
+import { Mic, LoaderCircle, X } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function VoiceDictationButton({
   onCommit,
@@ -118,40 +118,72 @@ function VoiceDictationButton({
     }
   };
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-start justify-between gap-3", !anchored && "w-full max-w-xl self-center"), children: [
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-        /* @__PURE__ */ jsx("h2", { className: cn("font-medium", anchored ? "text-sm" : "text-lg"), children: title || "Voice dictation" }),
-        /* @__PURE__ */ jsxs("span", { role: "status", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-          busy ? /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true", className: "size-3.5 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx(Mic, { "aria-hidden": "true", className: "size-3.5" }),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 shrink-0 items-start justify-between gap-4", !anchored && "w-full max-w-xl self-center"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2 pt-1", children: [
+        /* @__PURE__ */ jsx("h2", { className: "break-words text-xl font-semibold leading-tight", children: title || "Voice dictation" }),
+        /* @__PURE__ */ jsxs("span", { role: "status", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+          busy && /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin motion-reduce:animate-none" }),
           capture.state === "transcribing" ? "Finishing transcript\u2026" : capture.state === "requesting" ? "Starting dictation\u2026" : error ? "Recording not saved" : capture.state === "ready" ? "Ready" : caption
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("time", { "aria-label": "Recording duration", dateTime: `PT${elapsed}S`, className: "pt-0.5 font-mono text-xs tabular-nums text-muted-foreground", children: [
-        Math.floor(elapsed / 60).toString().padStart(2, "0"),
-        ":",
-        (elapsed % 60).toString().padStart(2, "0")
-      ] })
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          shape: "circle",
+          "aria-label": "Cancel dictation",
+          className: "size-[44px] shrink-0 text-muted-foreground [&_svg]:size-5",
+          onClick: handleCancel,
+          children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-5" })
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-col gap-3", !anchored && "w-full max-w-xl flex-1 justify-center self-center py-8 text-center"), children: [
-      capture.audioLevels && /* @__PURE__ */ jsx(DictationWaveform, { source: capture.audioLevels, state: capture.state, className: !anchored ? "h-20" : void 0 }),
-      /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-xs text-muted-foreground", children: capture.state === "transcribing" ? "Finishing your last words\u2026" : capture.state === "requesting" ? "Allow microphone access to start." : error ? capture.canRetry ? "Retry this take or record again." : "Try recording again." : "Speak, then choose Done to add the text." }),
-      displayTranscript && /* @__PURE__ */ jsxs("p", { className: "max-h-40 overflow-y-auto text-sm leading-relaxed", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", !anchored && "w-full max-w-xl flex-1 justify-center self-center py-6"), children: [
+      /* @__PURE__ */ jsxs("div", { "data-slot": "dictation-meter", className: "flex min-w-0 items-center gap-3 py-5 text-[hsl(var(--chart-1))] sm:gap-5 sm:py-7", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-slot": "dictation-microphone",
+            className: "flex size-[72px] shrink-0 items-center justify-center rounded-full bg-current/10 sm:size-[96px]",
+            children: /* @__PURE__ */ jsx("div", { className: "flex size-[52px] items-center justify-center rounded-full bg-[hsl(var(--chart-1))] text-popover sm:size-[72px]", children: /* @__PURE__ */ jsx(Mic, { className: "size-7 sm:size-9" }) })
+          }
+        ),
+        capture.audioLevels && /* @__PURE__ */ jsx(DictationWaveform, { source: capture.audioLevels, state: capture.state }),
+        /* @__PURE__ */ jsxs(
+          "time",
+          {
+            "aria-label": "Recording duration",
+            dateTime: `PT${elapsed}S`,
+            className: "ml-auto shrink-0 font-mono text-xl tabular-nums text-muted-foreground sm:text-2xl",
+            children: [
+              Math.floor(elapsed / 60).toString().padStart(2, "0"),
+              ":",
+              (elapsed % 60).toString().padStart(2, "0")
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-base leading-relaxed text-muted-foreground", children: capture.state === "transcribing" ? "Finishing your last words\u2026" : capture.state === "requesting" ? "Allow microphone access to start." : error ? capture.canRetry ? "Retry this take or record again." : "Try recording again." : "Speak, then choose Done to add the text." }),
+      displayTranscript && /* @__PURE__ */ jsxs("p", { className: "max-h-48 overflow-y-auto break-words text-base leading-relaxed", children: [
         transcript,
         interim && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
           transcript ? " " : "",
           interim
         ] })
       ] }),
-      error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-xs text-destructive", children: error }),
-      !error && capture.previewError && /* @__PURE__ */ jsx("p", { role: "status", className: "text-xs text-muted-foreground", children: capture.previewError })
+      error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm leading-relaxed text-destructive", children: error }),
+      !error && capture.previewError && /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm leading-relaxed text-muted-foreground", children: capture.previewError })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn("gap-2", anchored ? "flex flex-wrap items-center justify-end" : "mt-auto grid w-full max-w-xl grid-cols-2 gap-3 self-center"), children: [
-      /* @__PURE__ */ jsx(Button, { ref: cancelControl, type: "button", variant: "ghost", size: "sm", className: anchored ? "min-h-[44px]" : "min-h-[48px]", onClick: handleCancel, children: "Cancel" }),
-      capture.canRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", className: anchored ? "min-h-[44px]" : "order-first col-span-2 min-h-[48px]", onClick: () => {
+    /* @__PURE__ */ jsxs("div", { className: cn("shrink-0 gap-3 pt-2", anchored ? "flex flex-wrap items-center justify-end" : "mt-auto grid w-full max-w-xl grid-cols-[auto_minmax(0,1fr)] self-center"), children: [
+      /* @__PURE__ */ jsx(Button, { ref: cancelControl, type: "button", variant: "ghost", className: "min-h-[48px] px-5", onClick: handleCancel, children: "Cancel" }),
+      capture.canRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", className: cn("min-h-[48px] px-5", !anchored && "order-first col-span-2"), onClick: () => {
         cancelControl.current?.focus({ preventScroll: true });
         void capture.start();
       }, children: "Record again" }),
-      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", className: anchored ? "min-h-[44px]" : "min-h-[48px]", onClick: () => void handleDone(), disabled: busy, children: capture.state === "transcribing" ? "Transcribing\u2026" : capture.canRetry ? "Retry transcription" : error ? "Try again" : "Done" })
+      /* @__PURE__ */ jsx(Button, { type: "button", className: "min-h-[48px] min-w-24 px-6", onClick: () => void handleDone(), disabled: busy, children: capture.state === "transcribing" ? "Transcribing\u2026" : capture.canRetry ? "Retry transcription" : error ? "Try again" : "Done" })
     ] })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -195,13 +227,13 @@ function VoiceDictationButton({
           "data-placement": "anchored",
           side: "top",
           align: "center",
-          sideOffset: 8,
+          sideOffset: 12,
           collisionPadding: 12,
           avoidCollisions: true,
           onCloseAutoFocus: closeAutoFocus,
           onKeyDown,
           onEscapeKeyDown: (event) => event.stopPropagation(),
-          className: "z-[200] flex max-h-[var(--radix-popover-content-available-height)] w-96 max-w-[calc(100vw-1.5rem)] flex-col gap-3 overflow-y-auto rounded-2xl border border-border bg-background p-4 text-foreground shadow-lg outline-hidden",
+          className: "z-[200] flex max-h-[var(--radix-popover-content-available-height)] w-[560px] max-w-[calc(100vw-24px)] flex-col gap-6 overflow-y-auto rounded-2xl border border-border bg-popover p-6 text-popover-foreground shadow-xl outline-hidden",
           children: content
         }
       ) })
@@ -221,7 +253,7 @@ function VoiceDictationButton({
           onCloseAutoFocus: closeAutoFocus,
           onKeyDown,
           onEscapeKeyDown: (event) => event.stopPropagation(),
-          className: "fixed inset-0 z-[200] flex h-dvh w-screen flex-col gap-6 overflow-y-auto overscroll-contain bg-background px-6 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] text-foreground outline-hidden",
+          className: "fixed inset-0 z-[200] flex h-dvh w-screen flex-col gap-6 overflow-y-auto overscroll-contain bg-popover px-5 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] text-popover-foreground outline-hidden",
           children: [
             /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: "Voice dictation" }),
             /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: "sr-only", children: "Record your message, then choose Done to add the text. Cancel discards the recording." }),
@@ -234,7 +266,7 @@ function VoiceDictationButton({
 }
 var SILENCE = [];
 var silence = () => SILENCE;
-function DictationWaveform({ source, state, className }) {
+function DictationWaveform({ source, state }) {
   const bands = useSyncExternalStore(source.subscribe, source.getSnapshot, silence);
   return /* @__PURE__ */ jsx(
     AgentAudioVisualizerBar,
@@ -245,7 +277,8 @@ function DictationWaveform({ source, state, className }) {
       barCount: 24,
       state: state === "recording" ? "listening" : state === "transcribing" ? "thinking" : state === "requesting" ? "connecting" : "disconnected",
       volumeBands: state === "recording" ? bands : void 0,
-      className: cn("h-9 w-full text-foreground", className)
+      className: "h-[64px] min-w-0 flex-1 gap-[3px] sm:h-[88px] sm:gap-[4px]",
+      children: /* @__PURE__ */ jsx("div", { className: "min-h-[4px] max-w-[6px] flex-1 rounded-full bg-current/15 transition-colors duration-200 motion-reduce:transition-none data-[lk-highlighted=true]:bg-current" })
     }
   );
 }

package/dist/primitives/chat.cjs

@@ -7,7 +7,7 @@
 var _chunk2BTDBZYNcjs = require('../chunk-2BTDBZYN.cjs');
 
 
-var _chunkQWUMIAYDcjs = require('../chunk-QWUMIAYD.cjs');
+var _chunkPH2TV7XIcjs = require('../chunk-PH2TV7XI.cjs');
 
 
 var _chunkYMI3X2YLcjs = require('../chunk-YMI3X2YL.cjs');
@@ -545,7 +545,7 @@ function ChatInput({
                       ) : null,
                       (!helperText || compact) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1" }),
                       voice && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _chunkQWUMIAYDcjs.VoiceDictationButton,
+                        _chunkPH2TV7XIcjs.VoiceDictationButton,
                         {
                           size: "icon",
                           title: voiceTitle,
@@ -623,7 +623,7 @@ function VoiceHero({
     voiceSession ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYMI3X2YLcjs.VoiceSessionControls, { ...voiceSession, size: "hero" }),
       voice && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkQWUMIAYDcjs.VoiceDictationButton,
+        _chunkPH2TV7XIcjs.VoiceDictationButton,
         {
           size: "icon",
           title: voiceTitle,
@@ -633,7 +633,7 @@ function VoiceHero({
         }
       )
     ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkQWUMIAYDcjs.VoiceDictationButton,
+      _chunkPH2TV7XIcjs.VoiceDictationButton,
       {
         size: "lg",
         title: voiceTitle,

package/dist/primitives/chat.js

@@ -7,7 +7,7 @@ import {
 } from "../chunk-Z45YKVAM.js";
 import {
   VoiceDictationButton
-} from "../chunk-JKVVTFAP.js";
+} from "../chunk-ZGTPNSR7.js";
 import {
   VoiceSessionControls
 } from "../chunk-KF4X37DP.js";

package/dist/primitives/connection.cjs

@@ -4,7 +4,7 @@
 var _chunk2HTYXBDUcjs = require('../chunk-2HTYXBDU.cjs');
 
 
-var _chunk6YXKFVZUcjs = require('../chunk-6YXKFVZU.cjs');
+var _chunkAU5GUDOWcjs = require('../chunk-AU5GUDOW.cjs');
 
 
 
@@ -141,7 +141,7 @@ function Connection({
             ),
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2HTYXBDUcjs.StatusBadge, { tone: s.tone, children: _nullishCoalesce(statusLabel, () => ( s.label)) }),
-              responsiveActions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6YXKFVZUcjs.PageHeaderActions, { actions: responsiveActions, mobileLabel: "Actions" })
+              responsiveActions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAU5GUDOWcjs.PageHeaderActions, { actions: responsiveActions, mobileLabel: "Actions" })
             ]
           }
         ),

package/dist/primitives/connection.js

@@ -4,7 +4,7 @@ import {
 } from "../chunk-GMJWBGTJ.js";
 import {
   PageHeaderActions
-} from "../chunk-6S6GD43V.js";
+} from "../chunk-2UYEMPOJ.js";
 import {
   Dialog,
   DialogContent,

package/dist/primitives/page-header-actions.cjs

@@ -2,10 +2,10 @@
 "use client";
 
 
-var _chunk6YXKFVZUcjs = require('../chunk-6YXKFVZU.cjs');
+var _chunkAU5GUDOWcjs = require('../chunk-AU5GUDOW.cjs');
 require('../chunk-ZAITUDYD.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
-exports.PageHeaderActions = _chunk6YXKFVZUcjs.PageHeaderActions;
+exports.PageHeaderActions = _chunkAU5GUDOWcjs.PageHeaderActions;

package/dist/primitives/page-header-actions.d.cts

@@ -10,7 +10,7 @@ interface PageHeaderAction {
     label: ReactNode;
     icon?: ReactNode;
     onSelect?: () => void;
-    /** Optional nested actions. Desktop renders a menu button; mobile nests it inside Actions. */
+    /** Optional nested actions. Expanded layout renders a menu button; collapsed layout nests it inside Actions. */
     items?: PageHeaderAction[];
     /** Optional supporting copy shown when the action appears in a menu. */
     description?: ReactNode;
@@ -23,7 +23,7 @@ interface PageHeaderAction {
      * the button variant.
      */
     priority?: "primary" | "secondary" | "tertiary";
-    /** Semantic treatment used in the collapsed mobile menu. */
+    /** Semantic treatment used in the collapsed menu. */
     tone?: "default" | "muted" | "destructive";
     /** Visually separates destructive or lower-priority actions in the menu. */
     separatorBefore?: boolean;
@@ -31,7 +31,9 @@ interface PageHeaderAction {
 }
 interface PageHeaderActionsProps {
     actions: PageHeaderAction[];
-    /** Visible label for the collapsed mobile trigger. */
+    /** Responsive by default; menu keeps the same collapsed Actions menu at every width. */
+    presentation?: "responsive" | "menu";
+    /** Visible menu-trigger label, also used on desktop when presentation is menu. */
     mobileLabel?: ReactNode;
     /** Accessible label when `mobileLabel` is not plain text. */
     mobileAriaLabel?: string;
@@ -42,8 +44,9 @@ interface PageHeaderActionsProps {
  *
  * Desktop keeps every action visible for fast scanning. Mobile collapses the
  * same action definitions into one menu so page titles retain useful space.
+ * Use `presentation="menu"` to keep that menu at every viewport width.
  * Status and other non-interactive metadata should remain beside the title.
  */
-declare function PageHeaderActions({ actions, mobileLabel, mobileAriaLabel, className, }: PageHeaderActionsProps): react_jsx_runtime.JSX.Element | null;
+declare function PageHeaderActions({ actions, presentation, mobileLabel, mobileAriaLabel, className, }: PageHeaderActionsProps): react_jsx_runtime.JSX.Element | null;
 
 export { type PageHeaderAction, PageHeaderActions, type PageHeaderActionsProps };

package/dist/primitives/page-header-actions.d.ts

@@ -10,7 +10,7 @@ interface PageHeaderAction {
     label: ReactNode;
     icon?: ReactNode;
     onSelect?: () => void;
-    /** Optional nested actions. Desktop renders a menu button; mobile nests it inside Actions. */
+    /** Optional nested actions. Expanded layout renders a menu button; collapsed layout nests it inside Actions. */
     items?: PageHeaderAction[];
     /** Optional supporting copy shown when the action appears in a menu. */
     description?: ReactNode;
@@ -23,7 +23,7 @@ interface PageHeaderAction {
      * the button variant.
      */
     priority?: "primary" | "secondary" | "tertiary";
-    /** Semantic treatment used in the collapsed mobile menu. */
+    /** Semantic treatment used in the collapsed menu. */
     tone?: "default" | "muted" | "destructive";
     /** Visually separates destructive or lower-priority actions in the menu. */
     separatorBefore?: boolean;
@@ -31,7 +31,9 @@ interface PageHeaderAction {
 }
 interface PageHeaderActionsProps {
     actions: PageHeaderAction[];
-    /** Visible label for the collapsed mobile trigger. */
+    /** Responsive by default; menu keeps the same collapsed Actions menu at every width. */
+    presentation?: "responsive" | "menu";
+    /** Visible menu-trigger label, also used on desktop when presentation is menu. */
     mobileLabel?: ReactNode;
     /** Accessible label when `mobileLabel` is not plain text. */
     mobileAriaLabel?: string;
@@ -42,8 +44,9 @@ interface PageHeaderActionsProps {
  *
  * Desktop keeps every action visible for fast scanning. Mobile collapses the
  * same action definitions into one menu so page titles retain useful space.
+ * Use `presentation="menu"` to keep that menu at every viewport width.
  * Status and other non-interactive metadata should remain beside the title.
  */
-declare function PageHeaderActions({ actions, mobileLabel, mobileAriaLabel, className, }: PageHeaderActionsProps): react_jsx_runtime.JSX.Element | null;
+declare function PageHeaderActions({ actions, presentation, mobileLabel, mobileAriaLabel, className, }: PageHeaderActionsProps): react_jsx_runtime.JSX.Element | null;
 
 export { type PageHeaderAction, PageHeaderActions, type PageHeaderActionsProps };

package/dist/primitives/page-header-actions.js

@@ -2,7 +2,7 @@
 "use client";
 import {
   PageHeaderActions
-} from "../chunk-6S6GD43V.js";
+} from "../chunk-2UYEMPOJ.js";
 import "../chunk-V4LE2HWP.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";

package/dist/primitives/voice-dictation-button.cjs

@@ -2,7 +2,7 @@
 "use client";
 
 
-var _chunkQWUMIAYDcjs = require('../chunk-QWUMIAYD.cjs');
+var _chunkPH2TV7XIcjs = require('../chunk-PH2TV7XI.cjs');
 require('../chunk-NKWHDI4C.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
@@ -10,4 +10,4 @@ require('../chunk-2BSFYU22.cjs');
 require('../chunk-7Q4EFCUI.cjs');
 
 
-exports.VoiceDictationButton = _chunkQWUMIAYDcjs.VoiceDictationButton;
+exports.VoiceDictationButton = _chunkPH2TV7XIcjs.VoiceDictationButton;

package/dist/primitives/voice-dictation-button.js

@@ -2,7 +2,7 @@
 "use client";
 import {
   VoiceDictationButton
-} from "../chunk-JKVVTFAP.js";
+} from "../chunk-ZGTPNSR7.js";
 import "../chunk-5OF6D3GH.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [