@alexgorbatchev/shadcn 0.0.17 → 0.0.19

package/README.md

@@ -16,7 +16,7 @@
 # How it Really Works
 
 1. The stylesheet supplies semantic tokens and base body styling. Your Tailwind build scans the installed package to generate component utilities. Font loading is optional; importing `fonts.css` serves JetBrains Mono through your app's asset pipeline.
-2. Theme preference persists in browser local storage, and system mode follows the operating system color preference. The theme provider sets `data-theme` and `color-scheme` on the document root, so dialogs and menus share that palette. Use one provider per document. Density also follows components into their portals. A component's `density` prop overrides its own presentation; nest a `DensityProvider` to change a subtree and its popups together. `useTheme()` throws outside `ThemeProvider`.
+2. Theme preference persists in browser local storage, and system mode follows the operating system color preference. The theme provider sets `data-theme` and `color-scheme` on the document root, so dialogs and menus share that palette. Use one provider per document. Density also follows components into their portals. A component's `density` prop overrides its own presentation; nest a `DensityProvider` to change a subtree and its popups together. A provider declares every density token, so its subtree keeps its density whatever an ancestor or a host page declares. It renders a `div` by default; pass `render`, such as `render={<section aria-label="Tools" className="flex gap-2" />}`, to make your own element the density root instead of adding a wrapper. `useTheme()` throws outside `ThemeProvider`.
 3. Storybook's Theme and Density toolbars change the component examples. Docs backgrounds and example frames follow the selected palette; the preview starts in dark mode with comfortable density.
 
 # Prerequisites
@@ -177,7 +177,7 @@ Override tokens after the theme imports. This example uses the existing success
 
 | Area                     | Components                                                                                                                                                                                    |
 | :----------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Actions and status       | Alert, Badge, Button, ButtonGroup, Sonner, Toast, Toggle, ToggleGroup                                                                                                                         |
+| Actions and status       | Alert, Badge, Button, ButtonGroup, ButtonLink, Sonner, Toast, Toggle, ToggleGroup                                                                                                             |
 | Forms and selections     | Calendar, Checkbox, Combobox, Command, Field, Input, InputGroup, InputOTP, Label, NativeSelect, Questionnaire, RadioGroup, Select, Slider, Switch, Textarea                                   |
 | Structure and navigation | Accordion, AspectRatio, Avatar, Breadcrumb, Card, Carousel, Chart, Collapsible, Empty, Item, Kbd, Menubar, NavigationMenu, Pagination, Resizable, ScrollArea, Separator, Sidebar, Table, Tabs |
 | Overlays                 | AlertDialog, ContextMenu, Dialog, Drawer, DropdownMenu, HoverCard, Popover, Sheet, Tooltip                                                                                                    |
@@ -189,6 +189,8 @@ Use the composed parts exported from the package root, such as `DialogTrigger`,
 
 `ScrollArea` supplies a native scroll viewport and one vertical `ScrollBar` by default. Set `scrollbars={<ScrollBar orientation="horizontal" />}` for a wide horizontal layout, or supply a fragment containing vertical and horizontal parts for both axes. The tracks stay outside the viewport and reserve their shared corner. `keepMounted` belongs to `ScrollBar`; root and track className callbacks receive native overflow/scroll state. Focus the viewport for native keyboard scrolling.
 
+`ButtonLink` renders a native anchor with Button's `variant`, `size`, `align`, `truncate`, `fullWidth`, and `density` options, so navigation keeps the link role, Enter activation, and browser link behavior without `role="button"`. Pass `href` for a plain link, or a router link element through `render`, such as `<ButtonLink variant="outline" render={<Link to="/settings" />}>Settings</ButtonLink>`; class names, children, handlers, and refs merge with the rendered element. Its render callback receives typed slot and density state. Mark icons with `data-icon="inline-start"` or `data-icon="inline-end"` as in Button. Use `Button` for actions that do not navigate.
+
 `Badge` renders a span by default. Use `render={<a href="https://base-ui.com/" />}` for navigation or a native button for actions; handlers and refs merge with the rendered element. Its render callback receives typed variant, density, and slot state. Mark icons with `data-icon="inline-start"` or `data-icon="inline-end"`; their spacing follows inline direction. Use the success and warning variants for those statuses.
 
 Compose `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, and `CardFooter` inside `Card`. Use a native heading inside `CardTitle` when the title belongs in the document outline. The `size="sm"` option reduces spacing; density controls the base inset. A leading image meets the frame without top padding, and cards without footers retain bottom padding. The `--card-spacing` CSS variable adjusts both section gaps and insets.
@@ -221,7 +223,7 @@ For rendered HTML or Markdown output, import `@alexgorbatchev/shadcn/typeset.css
 
 Compose data tables with the exported Table parts and `@tanstack/react-table@9.2.8`, installed directly in your app. `Table dir="rtl"` sets both column direction and the overflow container's reading edge; headers align to the inline start. The Table catalog demonstrates TanStack v9's native `useTable` with sorting, filtering, pagination, column visibility, selection across pages, and row actions that copy invoice IDs or open invoice details. Pass the checkbox's original event to the row-selection handler to retain Shift range selection. There is no separate `DataTable` export. Both the [TanStack v9 quick start](https://tanstack.com/table/latest/docs/framework/react/quick-start) and [shadcn composition guide](https://ui.shadcn.com/docs/components/base/data-table) use the v9 API.
 
-Compose `Sidebar` and `SidebarInset` inside `SidebarProvider`. Use Header, Content, Group, Menu, and Footer parts to organize navigation, and `SidebarTrigger` or `SidebarRail` to toggle it. `useSidebar` exposes desktop and mobile state. Desktop collapse supports `offcanvas`, `icon`, and `none`; the mobile panel uses a titled Sheet with Escape dismissal and focus restoration. Menu buttons accept native custom elements through `render`; use anchors for navigation and keep their accessible text when collapsed. Cmd/Ctrl+B toggles the sidebar while focus is inside its provider. Set `open`/`onOpenChange` for controlled desktop state, or observe changes without supplying `open`. Persist changes in your application through `onOpenChange`, and restore them through `defaultOpen` or controlled `open`. Set widths through the typed `SidebarStyle` variables `--sidebar-width`, `--sidebar-width-mobile`, and `--sidebar-width-icon`.
+Compose `Sidebar` and `SidebarInset` inside `SidebarProvider`. Use Header, Content, Group, Menu, and Footer parts to organize navigation, and `SidebarTrigger` or `SidebarRail` to toggle it. `useSidebar` exposes desktop and mobile state. Desktop collapse supports `offcanvas`, `icon`, and `none`; the mobile panel uses a titled Sheet with Escape dismissal and focus restoration. Menu buttons accept native custom elements through `render`; use anchors for navigation and keep their accessible text when collapsed. Cmd/Ctrl+B toggles the sidebar while focus is inside its provider. Set `open`/`onOpenChange` for controlled desktop state, or observe changes without supplying `open`. Persist changes in your application through `onOpenChange`, and restore them through `defaultOpen` or controlled `open`. Set widths through the typed `SidebarStyle` variables `--sidebar-width`, `--sidebar-width-mobile`, and `--sidebar-width-icon`. Sidebar colors follow the palette of the subtree they render in; set `--sidebar`, `--sidebar-foreground`, `--sidebar-primary`, `--sidebar-primary-foreground`, `--sidebar-accent`, `--sidebar-accent-foreground`, `--sidebar-border`, or `--sidebar-ring` to give the sidebar its own colors.
 
 `InputOTP` uses one real input for typing, selection, paste, and autofill. Compose its visual slots inside `InputOTPGroup`; supply `maxLength` and an accessible label. Use `defaultValue` to initialize an uncontrolled code, or `value` and `onChange` to control it. Changing `defaultValue` after mounting preserves the current input. Import the OTP parts together from `@alexgorbatchev/shadcn/input-otp`; its bundled implementation owns their context. `Calendar` supports single, multiple, and range selection. `ResizablePanelGroup` sizes use explicit percentage strings such as `defaultSize="50%"`; numeric sizes are pixels. `CommandDialog` supplies the modal title and description; set `Command`'s `label` to name its search input.
 
@@ -331,17 +333,19 @@ The preview shows compact individual badges, up to five labels followed by `+N m
 
 # Devhost Preview
 
-The manifest uses `shadcn.example.com` as a documentation placeholder. Before using the routed preview, replace both `services.storybook.host` and `services.storybook.env.__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS` in `devhost.toml` with your locally configured hostname. Keep private hostnames out of commits.
+The routed preview serves Storybook at `shadcn.localhost` through devhost. To use a different hostname, copy [.env.example](./.env.example) to `.env.local` and set `SHADCN_DEV_HOST_SUFFIX`; the Storybook host becomes `shadcn` followed by that suffix. Exported environment variables take precedence over `.env.local`, which stays untracked.
 
 From this repository, start the configured Storybook service:
 
 ```sh
-devhost start
+just run
 ```
 
-Open your configured hostname over HTTPS. The manifest allocates a port automatically and serves Storybook through the shared devhost HTTPS proxy. The hostname must resolve to the machine running devhost, and the managed Caddy instance must be running (`devhost caddy start`).
+`just run` loads `.env.local`, applies the `.localhost` default, and runs `devhost start`. Running `devhost start` directly requires `SHADCN_DEV_HOST_SUFFIX` in the environment; devhost rejects the manifest when it is undefined.
+
+Open the hostname printed by devhost over HTTPS. The manifest allocates a port automatically and serves Storybook through the shared devhost HTTPS proxy. The hostname must resolve to the machine running devhost, and the managed Caddy instance must be running (`devhost caddy start`).
 
-Storybook binds to IPv4 loopback and allows the configured hostname in both Storybook and Vite. Caddy listens on all interfaces and serves HTTP as well as HTTPS, so the external devbox gateway can reach it. The direct `bun run storybook` preview remains available on `127.0.0.1:6006`.
+Storybook binds to IPv4 loopback and allows the configured hostname in both Storybook and Vite. Caddy listens on all interfaces and serves HTTP as well as HTTPS, so the external devbox gateway can reach it. The direct `just storybook` preview remains available on `127.0.0.1:6006`.
 
 # Troubleshooting
 

package/dist/{chunk-hhvp5352.js → chunk-0jb0xgdb.js}

@@ -1,6 +1,6 @@
 import {
   CommandInput2
-} from "./chunk-4gby2v61.js";
+} from "./chunk-waat2ksf.js";
 
 // src/components/assistant-ui/elements/ModelSelectorSearch.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-yn3e9w1j.js → chunk-0q6mg89k.js}

@@ -4,7 +4,7 @@ import {
 import {
   MermaidSvg,
   MermaidZoom2
-} from "./chunk-wwfj7ga3.js";
+} from "./chunk-r4fr62ca.js";
 
 // src/components/assistant-ui/elements/MermaidDiagram.tsx
 import { useMemo } from "react";

package/dist/{chunk-jy6nfnbx.js → chunk-0zwxgwr4.js}

@@ -10,10 +10,10 @@ import {
   SidebarMenu2,
   SidebarMenuItem2,
   SidebarMenuButton2
-} from "./chunk-xvs5y4v7.js";
+} from "./chunk-45kmek5e.js";
 import {
   ThreadList3
-} from "./chunk-tsekdy3w.js";
+} from "./chunk-1tgrhacr.js";
 
 // src/components/assistant-ui/native/ThreadListSidebar.tsx
 import { MessagesSquare } from "lucide-react";

package/dist/{chunk-3esarnmt.js → chunk-155c0btb.js}

@@ -8,7 +8,7 @@ import {
   Dialog2,
   DialogContent2,
   DialogTitle2
-} from "./chunk-zhnwybhq.js";
+} from "./chunk-717ggspf.js";
 import {
   safeHref
 } from "./chunk-xhtsnwnb.js";

package/dist/{chunk-tsekdy3w.js → chunk-1tgrhacr.js}

@@ -301,6 +301,7 @@ var ThreadListItemRename = ({ onDone }) => {
   const [value, setValue] = useState(title);
   const inputRef = useRef(null);
   const settledRef = useRef(false);
+  const keyboardActionRef = useRef(null);
   useEffect(() => {
     inputRef.current?.select();
   }, []);
@@ -332,16 +333,24 @@ var ThreadListItemRename = ({ onDone }) => {
     "aria-label": "Rename thread",
     value,
     onChange: (event) => setValue(event.target.value),
-    onBlur: () => commit(false),
+    onBlur: () => {
+      if (keyboardActionRef.current === "cancel")
+        cancel();
+      else
+        commit(keyboardActionRef.current === "commit");
+      keyboardActionRef.current = null;
+    },
     onKeyDown: (event) => {
       if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229)
         return;
       if (event.key === "Enter") {
         event.preventDefault();
-        commit(true);
+        keyboardActionRef.current = "commit";
+        event.currentTarget.blur();
       } else if (event.key === "Escape") {
         event.preventDefault();
-        cancel();
+        keyboardActionRef.current = "cancel";
+        event.currentTarget.blur();
       }
     }
   });

package/dist/{chunk-7g39g3h8.js → chunk-2e4fnx0e.js}

@@ -4,7 +4,7 @@ import {
   CardTitle2,
   CardDescription2,
   CardContent2
-} from "./chunk-fqekyjkh.js";
+} from "./chunk-v4yqjvzd.js";
 import {
   take
 } from "./chunk-v8ks0cfq.js";

package/dist/{chunk-0yqwq0ev.js → chunk-2qxy1r5y.js}

@@ -12,31 +12,31 @@ import {
 } from "./chunk-h8awhm19.js";
 import {
   ModelSelectorFocusAnchor2
-} from "./chunk-1hbge1cb.js";
+} from "./chunk-82vfgkjv.js";
 import {
   ModelSelectorSearch2
-} from "./chunk-hhvp5352.js";
+} from "./chunk-0jb0xgdb.js";
 import {
   ModelSelectorEmpty2
-} from "./chunk-dnja1pz5.js";
+} from "./chunk-cre60717.js";
 import {
   ModelSelectorItem2
-} from "./chunk-fh3nme7f.js";
+} from "./chunk-vpj3vk7v.js";
 import {
   ModelSelectorList2
-} from "./chunk-jxwfkmdh.js";
+} from "./chunk-x82x81th.js";
 import {
   ModelSelectorEffort2
 } from "./chunk-r07v9c4f.js";
 import {
   ModelSelectorContent2
-} from "./chunk-rrd9fsz6.js";
+} from "./chunk-6wvtsf2m.js";
 import {
   ModelSelectorGroup2
-} from "./chunk-jwajmmfb.js";
+} from "./chunk-dppmqr99.js";
 import {
   ModelSelectorSeparator2
-} from "./chunk-dd53t01w.js";
+} from "./chunk-k4vvp62d.js";
 
 // src/components/assistant-ui/native/ModelSelector.tsx
 import { memo, useEffect } from "react";

package/dist/{chunk-299wvwy8.js → chunk-38kwkd1a.js}

@@ -9,12 +9,12 @@ import {
 } from "./chunk-q40gqpwh.js";
 import {
   Thread2
-} from "./chunk-5ntb7p4q.js";
+} from "./chunk-f8758vjx.js";
 import {
   ThreadListSearch2,
   ThreadListRoot2,
   ThreadListItems2
-} from "./chunk-tsekdy3w.js";
+} from "./chunk-1tgrhacr.js";
 
 // src/components/assistant-ui/native/AssistantModal.tsx
 import { BotIcon, ChevronDownIcon, HistoryIcon, PlusIcon } from "lucide-react";

package/dist/{chunk-xvs5y4v7.js → chunk-45kmek5e.js}

@@ -528,7 +528,7 @@ var sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-f
   variants: {
     variant: {
       default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-      outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
+      outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border,var(--border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent,var(--accent))]"
     },
     size: {
       default: "h-control text-sm",

package/dist/{chunk-rrd9fsz6.js → chunk-6wvtsf2m.js}

@@ -4,19 +4,19 @@ import {
 } from "./chunk-x7z9jzyf.js";
 import {
   Command2
-} from "./chunk-4gby2v61.js";
+} from "./chunk-waat2ksf.js";
 import {
   useModelSelectorContext
 } from "./chunk-ydfx8r6d.js";
 import {
   ModelSelectorFocusAnchor2
-} from "./chunk-1hbge1cb.js";
+} from "./chunk-82vfgkjv.js";
 import {
   ModelSelectorSearch2
-} from "./chunk-hhvp5352.js";
+} from "./chunk-0jb0xgdb.js";
 import {
   ModelSelectorList2
-} from "./chunk-jxwfkmdh.js";
+} from "./chunk-x82x81th.js";
 import {
   ModelSelectorEffort2
 } from "./chunk-r07v9c4f.js";

package/dist/{chunk-zhnwybhq.js → chunk-717ggspf.js}

@@ -68,7 +68,7 @@ function DialogContent2({
         dir: direction,
         "data-density": resolvedDensity,
         "data-slot": "dialog-content",
-        className: (state) => cn2("fixed grid w-full gap-panel bg-popover p-panel text-sm text-popover-foreground border border-frame-edge shadow-frame duration-120 outline-none data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none", size === "fullscreen" ? "inset-0 h-dvh max-h-dvh max-w-none rounded-none" : cn2("top-1/2 left-1/2 max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-md", size === "wide" ? "sm:max-w-xl" : size === "narrow" ? "sm:max-w-48" : "sm:max-w-sm"), typeof className === "function" ? className(state) : className),
+        className: (state) => cn2("fixed grid w-full gap-panel overflow-y-auto overscroll-contain bg-popover p-panel text-sm text-popover-foreground border border-frame-edge shadow-frame duration-120 outline-none data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none", size === "fullscreen" ? "inset-0 h-dvh max-h-dvh max-w-none rounded-none" : cn2("top-1/2 left-1/2 max-h-[calc(100dvh-2rem)] max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-md", size === "wide" ? "sm:max-w-xl" : size === "narrow" ? "sm:max-w-48" : "sm:max-w-sm"), typeof className === "function" ? className(state) : className),
         ...props,
         children: [
           children,

package/dist/{chunk-5h7vkgvz.js → chunk-82cw4kcg.js}

@@ -4,7 +4,7 @@ import {
 import {
   Card2,
   CardContent2
-} from "./chunk-fqekyjkh.js";
+} from "./chunk-v4yqjvzd.js";
 import {
   FieldSet2,
   FieldLegend2,

package/dist/{chunk-1hbge1cb.js → chunk-82vfgkjv.js}

@@ -1,6 +1,6 @@
 import {
   CommandInput2
-} from "./chunk-4gby2v61.js";
+} from "./chunk-waat2ksf.js";
 
 // src/components/assistant-ui/elements/ModelSelectorFocusAnchor.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-r9mng3ws.js → chunk-8x8yxf6x.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-1x2ch0xc.js";
 import {
   Thread2
-} from "./chunk-5ntb7p4q.js";
+} from "./chunk-f8758vjx.js";
 
 // src/components/assistant-ui/native/AssistantSidebar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{chunk-j5wk4ffj.js → chunk-aewjmzt9.js}

@@ -12,7 +12,7 @@ import {
   DialogTrigger2,
   DialogContent2,
   DialogTitle2
-} from "./chunk-zhnwybhq.js";
+} from "./chunk-717ggspf.js";
 import {
   Avatar2,
   AvatarImage2,

package/dist/{chunk-ets9h67e.js → chunk-akaezred.js}

@@ -1,9 +1,9 @@
 import {
   MermaidZoom2
-} from "./chunk-wwfj7ga3.js";
+} from "./chunk-r4fr62ca.js";
 import {
   MermaidDiagram3
-} from "./chunk-yn3e9w1j.js";
+} from "./chunk-0q6mg89k.js";
 
 // src/components/assistant-ui/native/MermaidDiagram.tsx
 import { memo } from "react";

package/dist/{chunk-34ndz1gf.js → chunk-c6b2cfw4.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-h8awhm19.js";
 import {
   ModelSelectorContent2
-} from "./chunk-rrd9fsz6.js";
+} from "./chunk-6wvtsf2m.js";
 
 // src/components/assistant-ui/elements/ModelSelector.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{chunk-fq8taatb.js → chunk-c900175p.js}

@@ -4,7 +4,7 @@ import {
 import {
   Card2,
   CardContent2
-} from "./chunk-fqekyjkh.js";
+} from "./chunk-v4yqjvzd.js";
 import {
   take
 } from "./chunk-v8ks0cfq.js";

package/dist/{chunk-dnja1pz5.js → chunk-cre60717.js}

@@ -1,6 +1,6 @@
 import {
   CommandEmpty2
-} from "./chunk-4gby2v61.js";
+} from "./chunk-waat2ksf.js";
 
 // src/components/assistant-ui/elements/ModelSelectorEmpty.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-jwajmmfb.js → chunk-dppmqr99.js}

@@ -1,6 +1,6 @@
 import {
   CommandGroup2
-} from "./chunk-4gby2v61.js";
+} from "./chunk-waat2ksf.js";
 
 // src/components/assistant-ui/elements/ModelSelectorGroup.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-0xrvhezs.js → chunk-f73en61v.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk-73rkr9ct.js";
 import {
   Card2
-} from "./chunk-fqekyjkh.js";
+} from "./chunk-v4yqjvzd.js";
 import {
   Table2,
   TableHeader2,

package/dist/{chunk-5ntb7p4q.js → chunk-f8758vjx.js}

@@ -17,7 +17,7 @@ import {
   UserMessageAttachments2,
   ComposerAttachments3,
   ComposerAddAttachment2
-} from "./chunk-j5wk4ffj.js";
+} from "./chunk-aewjmzt9.js";
 import {
   getFileHref,
   File2
@@ -27,7 +27,7 @@ import {
 } from "./chunk-c2vcrwjp.js";
 import {
   Image2
-} from "./chunk-1apg76a7.js";
+} from "./chunk-g7v9cqyg.js";
 import {
   MarkdownText2
 } from "./chunk-q2ewq67a.js";
@@ -157,7 +157,9 @@ var ThreadHistorySkeleton = () => /* @__PURE__ */ jsxs("div", {
 function Thread2({
   components = EMPTY_COMPONENTS,
   autoFocus = true,
-  emptyComposerPosition = "center"
+  emptyComposerPosition = "center",
+  viewportProps,
+  composerInputRef
 }) {
   const isEmpty = useAuiState(isNewChatView);
   return /* @__PURE__ */ jsx(ThreadComponentsContext.Provider, {
@@ -165,11 +167,19 @@ function Thread2({
     children: /* @__PURE__ */ jsx(ThreadRoot, {
       isEmpty,
       autoFocus,
-      emptyComposerPosition
+      emptyComposerPosition,
+      viewportProps,
+      composerInputRef
     })
   });
 }
-var ThreadRoot = ({ isEmpty, autoFocus, emptyComposerPosition }) => {
+var ThreadRoot = ({
+  isEmpty,
+  autoFocus,
+  emptyComposerPosition,
+  viewportProps,
+  composerInputRef
+}) => {
   const { Welcome = ThreadWelcome } = useContext(ThreadComponentsContext);
   const isCentered = isEmpty && emptyComposerPosition === "center";
   return /* @__PURE__ */ jsx(ThreadPrimitive.Root, {
@@ -178,6 +188,7 @@ var ThreadRoot = ({ isEmpty, autoFocus, emptyComposerPosition }) => {
     }),
     children: /* @__PURE__ */ jsx(ThreadPrimitive.Viewport, {
       turnAnchor: "top",
+      ...viewportProps,
       "data-slot": "aui_thread-viewport",
       render: /* @__PURE__ */ jsx("div", {
         className: "relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth"
@@ -201,15 +212,20 @@ var ThreadRoot = ({ isEmpty, autoFocus, emptyComposerPosition }) => {
               children: () => /* @__PURE__ */ jsx(ThreadMessage, {})
             })
           }),
+          /* @__PURE__ */ jsx("div", {
+            "aria-hidden": "true",
+            className: cn2(!isCentered && "flex-1")
+          }),
           /* @__PURE__ */ jsxs(ThreadPrimitive.ViewportFooter, {
             render: /* @__PURE__ */ jsx("div", {
-              className: cn2("aui-thread-viewport-footer bg-background sticky bottom-0 flex flex-col gap-4 overflow-visible pb-4 md:pb-6", !isCentered && "mt-auto rounded-t-(--composer-radius)")
+              className: cn2("aui-thread-viewport-footer bg-background sticky bottom-0 flex flex-col gap-4 overflow-visible pb-4 md:pb-6", !isCentered && "rounded-t-(--composer-radius)")
             }),
             children: [
               /* @__PURE__ */ jsx(ThreadScrollToBottom, {}),
               /* @__PURE__ */ jsx(ThreadFollowupSuggestions2, {}),
               /* @__PURE__ */ jsx(Composer, {
-                autoFocus
+                autoFocus,
+                inputRef: composerInputRef
               }),
               /* @__PURE__ */ jsx(AuiIf, {
                 condition: (s) => isNewChatView(s) && s.composer.isEmpty,
@@ -460,7 +476,7 @@ var ThreadSuggestionItem = () => {
     })
   });
 };
-var Composer = ({ autoFocus }) => {
+var Composer = ({ autoFocus, inputRef }) => {
   return /* @__PURE__ */ jsx(ComposerPrimitive.Root, {
     render: /* @__PURE__ */ jsx("form", {
       className: "aui-composer-root relative flex w-full flex-col"
@@ -473,6 +489,7 @@ var Composer = ({ autoFocus }) => {
       children: [
         /* @__PURE__ */ jsx(ComposerAttachments3, {}),
         /* @__PURE__ */ jsx(ComposerPrimitive.Input, {
+          ref: inputRef,
           placeholder: "Send a message...",
           rows: 1,
           autoFocus,
@@ -488,6 +505,7 @@ var Composer = ({ autoFocus }) => {
   });
 };
 var ComposerAction = () => {
+  const { ComposerActions } = useContext(ThreadComponentsContext);
   const isSending = useAuiState((s) => s.composer.submission !== undefined && !(s.thread.isRunning && s.thread.capabilities.cancel));
   return /* @__PURE__ */ jsxs("div", {
     className: "aui-composer-action-wrapper relative flex items-center justify-between",
@@ -496,6 +514,7 @@ var ComposerAction = () => {
       /* @__PURE__ */ jsxs("div", {
         className: "flex items-center gap-1.5",
         children: [
+          ComposerActions && /* @__PURE__ */ jsx(ComposerActions, {}),
           /* @__PURE__ */ jsxs(AuiIf, {
             condition: (s) => s.thread.capabilities.dictation,
             children: [
@@ -504,11 +523,11 @@ var ComposerAction = () => {
                 children: /* @__PURE__ */ jsx(ComposerPrimitive.Dictate, {
                   asChild: true,
                   children: /* @__PURE__ */ jsx(TooltipIconButton2, {
-                    tooltip: "Voice input",
+                    tooltip: "Voice Input",
                     side: "bottom",
                     type: "button",
                     variant: "ghost",
-                    "aria-label": "Start voice input",
+                    "aria-label": "Start Voice Input",
                     children: /* @__PURE__ */ jsx(MicIcon, {
                       "aria-hidden": "true",
                       className: "size-4 shrink-0"
@@ -521,11 +540,11 @@ var ComposerAction = () => {
                 children: /* @__PURE__ */ jsx(ComposerPrimitive.StopDictation, {
                   asChild: true,
                   children: /* @__PURE__ */ jsx(TooltipIconButton2, {
-                    tooltip: "Stop dictation",
+                    tooltip: "Stop Dictation",
                     side: "bottom",
                     type: "button",
                     variant: "ghost",
-                    "aria-label": "Stop voice input",
+                    "aria-label": "Stop Voice Input",
                     children: /* @__PURE__ */ jsx(SquareIcon, {
                       "aria-hidden": "true",
                       className: "size-3.5 shrink-0 animate-pulse motion-reduce:animate-none"
@@ -540,11 +559,11 @@ var ComposerAction = () => {
             children: /* @__PURE__ */ jsx(ComposerPrimitive.Send, {
               asChild: true,
               children: /* @__PURE__ */ jsx(TooltipIconButton2, {
-                tooltip: "Send message",
+                tooltip: "Send Message",
                 side: "bottom",
                 type: "button",
                 variant: "default",
-                "aria-label": "Send message",
+                "aria-label": "Send Message",
                 children: /* @__PURE__ */ jsx(ArrowUpIcon, {
                   "aria-hidden": "true",
                   className: "size-4 shrink-0"
@@ -557,11 +576,11 @@ var ComposerAction = () => {
             children: /* @__PURE__ */ jsx(ComposerPrimitive.Resume, {
               asChild: true,
               children: /* @__PURE__ */ jsx(TooltipIconButton2, {
-                tooltip: "Resume generating",
+                tooltip: "Resume Generating",
                 side: "bottom",
                 type: "button",
                 variant: "default",
-                "aria-label": "Resume generating",
+                "aria-label": "Resume Generating",
                 children: /* @__PURE__ */ jsx(PlayIcon, {
                   "aria-hidden": "true",
                   className: "size-4 shrink-0"
@@ -576,7 +595,7 @@ var ComposerAction = () => {
               children: /* @__PURE__ */ jsx(Button2, {
                 type: "button",
                 variant: "default",
-                "aria-label": isSending ? "Cancel sending" : "Stop generating",
+                "aria-label": isSending ? "Cancel Sending" : "Stop Generating",
                 children: /* @__PURE__ */ jsx(SquareIcon, {
                   "aria-hidden": "true",
                   className: "size-3.5 shrink-0"
@@ -874,6 +893,7 @@ var UserImagePart = (part) => /* @__PURE__ */ jsx("div", {
   })
 });
 var UserMessage = () => {
+  const { UserText } = useContext(ThreadComponentsContext);
   return /* @__PURE__ */ jsxs(MessagePrimitive.Root, {
     "data-slot": "aui_user-message-root",
     "data-role": "user",
@@ -888,7 +908,7 @@ var UserMessage = () => {
           /* @__PURE__ */ jsx("div", {
             className: "aui-user-message-content peer bg-muted text-foreground rounded-(--composer-radius) px-4 py-2 wrap-break-word empty:hidden",
             children: /* @__PURE__ */ jsx(MessagePrimitive.Parts, {
-              components: { File: UserFilePart, Image: UserImagePart }
+              components: { Text: UserText, File: UserFilePart, Image: UserImagePart }
             })
           }),
           /* @__PURE__ */ jsx("div", {

package/dist/{chunk-avrh238b.js → chunk-fyb0b7bp.js}

@@ -5,7 +5,7 @@ import {
   Card2,
   CardContent2,
   CardFooter2
-} from "./chunk-fqekyjkh.js";
+} from "./chunk-v4yqjvzd.js";
 import {
   Field2,
   FieldLabel2

package/dist/{chunk-1apg76a7.js → chunk-g7v9cqyg.js}

@@ -9,7 +9,7 @@ import {
   DialogTrigger2,
   DialogContent2,
   DialogTitle2
-} from "./chunk-zhnwybhq.js";
+} from "./chunk-717ggspf.js";
 import {
   safeHref,
   hostOf

package/dist/{chunk-22678d2t.js → chunk-h46mdagy.js}

@@ -15,7 +15,7 @@ import {
   DialogHeader2,
   DialogTitle2,
   DialogDescription2
-} from "./chunk-zhnwybhq.js";
+} from "./chunk-717ggspf.js";
 import {
   Input2
 } from "./chunk-59p19t57.js";

package/dist/{chunk-dd53t01w.js → chunk-k4vvp62d.js}

@@ -1,6 +1,6 @@
 import {
   CommandSeparator2
-} from "./chunk-4gby2v61.js";
+} from "./chunk-waat2ksf.js";
 
 // src/components/assistant-ui/elements/ModelSelectorSeparator.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-q9qm7skj.js → chunk-k89xxj12.js}

@@ -1,13 +1,13 @@
-import {
-  cn2
-} from "./chunk-cp2m7y7v.js";
 import {
   Card2,
   CardHeader2,
   CardTitle2,
   CardDescription2,
   CardContent2
-} from "./chunk-fqekyjkh.js";
+} from "./chunk-v4yqjvzd.js";
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
 import {
   Chart3,
   ChartTooltipContent2,

package/dist/{chunk-a6e11wj6.js → chunk-kc4mmrwk.js}

@@ -7,7 +7,7 @@ import {
   CardTitle2,
   CardDescription2,
   CardContent2
-} from "./chunk-fqekyjkh.js";
+} from "./chunk-v4yqjvzd.js";
 
 // src/components/assistant-ui/elements/BackgroundInbox.tsx
 import { CheckIcon, Loader2Icon, XIcon } from "lucide-react";

package/dist/{chunk-3hvpcsb4.js → chunk-qw7229kj.js}

@@ -25,7 +25,7 @@ import {
   CardDescription2,
   CardContent2,
   CardFooter2
-} from "./chunk-fqekyjkh.js";
+} from "./chunk-v4yqjvzd.js";
 import {
   Switch2
 } from "./chunk-8ye0k6z7.js";