@alexgorbatchev/shadcn 0.0.18 → 0.0.20

package/README.md

@@ -1,3 +1,12 @@
+> [!IMPORTANT]
+> **AI agents:** Before using this package, run the following command from the consuming project and read the linked setup and component documentation:
+>
+> ```sh
+> cat node_modules/@alexgorbatchev/shadcn/llms.txt
+> ```
+>
+> Resolve the index's relative links from `node_modules/@alexgorbatchev/shadcn/`.
+
 `@alexgorbatchev/shadcn` is a standalone React component library for Bun applications that need the sharp, monospace devhost design language. Install it as an npm-compatible package and explore its components in the local interactive Storybook catalog. Consuming apps do not depend on the devhost project.
 
 # What It Does
@@ -16,7 +25,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
@@ -64,11 +73,11 @@ import { ChartContainer, type ChartConfig } from "@alexgorbatchev/shadcn/chart";
 import { Carousel, CarouselContent, CarouselItem } from "@alexgorbatchev/shadcn/carousel";
 ```
 
-The patched `sonner`, `input-otp`, and `@shadcn/react` packages remain regular dependencies pending upstream fixes. Other feature dependencies are optional peers, so a core-only installation does not request them. Shared providers work across entry points.
+The patched `sonner`, `input-otp`, and `@shadcn/react` packages remain regular dependencies pending upstream fixes. `@base-ui/utils` is a regular dependency at the exact version `@base-ui/react` requires, so the portal components share Base UI's own ref merging without installing a second copy. Other feature dependencies are optional peers, so a core-only installation does not request them. Shared providers work across entry points.
 
 The optional assistant-ui catalog provides presentational families under `/assistant-ui/<family>` and runtime adapters under `/assistant-ui/native/<family>`. For example, import `ApprovalCard` from `@alexgorbatchev/shadcn/assistant-ui/approval-card`. Add `@alexgorbatchev/shadcn/assistant-ui.css` to your stylesheet. Native threads require an actual assistant-ui runtime and the selected family's optional peers. See the [assistant-ui reference](./docs/internal/assistant-ui.md) for imports, dependency-bearing styles, source inventory, and the SelectionToolbar isolation limitation.
 
-For embedded surfaces, import `PortalProvider` from the package root and pass the real overlay `container`. Dialogs, alerts, sheets, drawers, menus, navigation popups, comboboxes, selects, hover cards, tooltips, popovers, and Base UI toasts inherit that container. Native portal props can still supply an explicit container override.
+For embedded surfaces, import `PortalProvider` from the package root and pass the real overlay `container`. Dialogs, alerts, sheets, drawers, menus, navigation popups, comboboxes, selects, hover cards, tooltips, popovers, and Base UI toasts inherit that container. The container applies to the outermost popup: a popup opened inside another one, such as a select in a dialog, renders inside that popup's portal, where a modal dialog counts it as inside the dialog and keeps it reachable by assistive technology and the pointer. Native portal props can still supply an explicit container override.
 
 # Quick Start
 
@@ -173,11 +182,17 @@ Override tokens after the theme imports. This example uses the existing success
 }
 ```
 
+# LLM Documentation
+
+Storybook serves a generated `llms.txt` index at its site root, with linked setup instructions and a reference page for each story file. Pages contain public package imports, documented story controls, default args, and Storybook CSF examples with interaction tests omitted. The excerpts can depend on local helpers and fixtures; each page links to its full source. Story controls describe the configured controls, rather than the complete TypeScript props API.
+
+The npm package includes the same index at `llms.txt` in its root and its linked pages under `llms/`. Package and Storybook builds regenerate these files from the public exports, README, and story catalog.
+
 # Component Catalog
 
 | 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 +204,12 @@ 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.
 
+Scrolling is intentional: cards, panels, dialogs, sheets, and floating surfaces carry `data-scroll="none"`. Put long content in a nested `ScrollArea` or an explicitly styled native scroll viewport; the outer surface stays stationary. `DialogContent` bounds its height to the viewport and uses a flex column, so give a nested `ScrollArea` `className="min-h-0"` to let it shrink within the dialog. Headers and footers stay outside that scroll area when they need to remain visible.
+
+`ThemeProvider` mounts the development-only `ScrollGuard`. Without a theme provider, mount `<ScrollGuard />` once in your app. Add `data-scroll="none"` to any HTML element to apply the same check. The guard throws a browser error identifying the element, axis, and scroll range when computed `overflow: auto` or `scroll` permits overflowing content to scroll. It checks the marked element itself, including portaled elements in the same document, after content and size changes; nested scroll viewports remain independent. Hidden and clipped overflow do not trigger it. Duplicate mounts share one observer per document, and the final unmount disconnects it. Pass `ownerDocument` to check an iframe's document; shadow roots require their own layout validation. The guard installs no observers when the consuming application's `NODE_ENV` is `"production"`.
+
+`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 +242,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 +352,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-q2ewq67a.js → chunk-02qymemz.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-cp2m7y7v.js";
 import {
   TooltipIconButton2
-} from "./chunk-q40gqpwh.js";
+} from "./chunk-qgjjcmpa.js";
 import {
   useCopyToClipboard
 } from "./chunk-6synj4j9.js";

package/dist/{chunk-q9qm7skj.js → chunk-0ewzb2ax.js}

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

package/dist/{chunk-rrd9fsz6.js → chunk-14qj6w54.js}

@@ -1,22 +1,22 @@
 import {
   PopoverContent2,
   PopoverTitle2
-} from "./chunk-x7z9jzyf.js";
+} from "./chunk-4djw71cv.js";
 import {
   Command2
-} from "./chunk-4gby2v61.js";
+} from "./chunk-7pyt4e5t.js";
 import {
   useModelSelectorContext
 } from "./chunk-ydfx8r6d.js";
 import {
   ModelSelectorFocusAnchor2
-} from "./chunk-1hbge1cb.js";
+} from "./chunk-553bzh59.js";
 import {
   ModelSelectorSearch2
-} from "./chunk-hhvp5352.js";
+} from "./chunk-s46hvhjw.js";
 import {
   ModelSelectorList2
-} from "./chunk-jxwfkmdh.js";
+} from "./chunk-gabqzfq0.js";
 import {
   ModelSelectorEffort2
 } from "./chunk-r07v9c4f.js";

package/dist/{chunk-yn3e9w1j.js → chunk-1c5jjkhw.js}

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

package/dist/{chunk-6aqm34nb.js → chunk-1qhf8gh8.js}

@@ -6,15 +6,15 @@ import {
 } from "./chunk-e6hk39ev.js";
 import {
   TooltipIconButton2
-} from "./chunk-q40gqpwh.js";
+} from "./chunk-qgjjcmpa.js";
 import {
   Thread2
-} from "./chunk-0qcknj5n.js";
+} from "./chunk-8fcjx3he.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";
@@ -189,6 +189,7 @@ function AssistantModal2() {
       }),
       isPortalReady && /* @__PURE__ */ jsxs(AssistantModalPrimitive.Content, {
         "data-density": density,
+        "data-scroll": "none",
         ref: contentRef,
         sideOffset: 16,
         "aria-labelledby": titleId,

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-zgpdhtkw.js → chunk-21x1n6gn.js}

@@ -1,21 +1,21 @@
 import {
   ContextDisplayRoot2
-} from "./chunk-2gten6a1.js";
+} from "./chunk-6wvhq8wq.js";
 import {
   ContextDisplayTrigger2
-} from "./chunk-86211e5a.js";
+} from "./chunk-p8gshf3k.js";
 import {
   ContextDisplayContent2
-} from "./chunk-2b9agdrf.js";
+} from "./chunk-3dyqen8w.js";
 import {
   ContextDisplayRing3
-} from "./chunk-vx7c2xhq.js";
+} from "./chunk-5v4typ39.js";
 import {
   ContextDisplayBar3
-} from "./chunk-6xr41wyr.js";
+} from "./chunk-46jdxdzy.js";
 import {
   ContextDisplayText3
-} from "./chunk-r7fy89jq.js";
+} from "./chunk-79667fz5.js";
 
 // src/components/assistant-ui/native/ContextDisplay.tsx
 import { jsx } from "react/jsx-runtime";

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

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

package/dist/{chunk-msave608.js → chunk-2bx2r98r.js}

@@ -5,7 +5,7 @@ import {
   Popover2,
   PopoverTrigger2,
   PopoverContent2
-} from "./chunk-x7z9jzyf.js";
+} from "./chunk-4djw71cv.js";
 import {
   AgentStatus3
 } from "./chunk-4k2jzddw.js";

package/dist/{chunk-41wykzq3.js → chunk-2tmvz090.js}

@@ -5,7 +5,7 @@ import {
   HoverCard2,
   HoverCardTrigger2,
   HoverCardContent2
-} from "./chunk-m54kq3he.js";
+} from "./chunk-hh43wg05.js";
 import {
   Button2
 } from "./chunk-73rkr9ct.js";

package/dist/{chunk-gknaq8ep.js → chunk-3d9v39ga.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ds65prb9.js";
 import {
   MermaidDiagram3
-} from "./chunk-yn3e9w1j.js";
+} from "./chunk-1c5jjkhw.js";
 
 // src/components/assistant-ui/elements/GenerativeUi.tsx
 import ReactMarkdown from "react-markdown";

package/dist/{chunk-2b9agdrf.js → chunk-3dyqen8w.js}

@@ -1,7 +1,7 @@
 import {
   PopoverContent2,
   PopoverTitle2
-} from "./chunk-x7z9jzyf.js";
+} from "./chunk-4djw71cv.js";
 import {
   getPercentColor,
   getContextSegments

package/dist/{chunk-f63f8w58.js → chunk-3jrsp186.js}

@@ -1,6 +1,6 @@
 import {
   Popover2
-} from "./chunk-x7z9jzyf.js";
+} from "./chunk-4djw71cv.js";
 import {
   contextDisplayContext,
   getUsagePercent

package/dist/{chunk-njzam0hx.js → chunk-3qqdfft7.js}

@@ -43,6 +43,7 @@ function TaskCard3({
   return /* @__PURE__ */ jsxs("div", {
     "data-testid": "TaskCard",
     "data-slot": "task-card",
+    "data-scroll": "none",
     "data-state": state,
     className: cn2(paper, "flex w-full max-w-sm flex-col overflow-hidden rounded-md", className),
     ...props,

package/dist/{chunk-gfm2arhj.js → chunk-43hfchxf.js}

@@ -123,7 +123,7 @@ var ComposerTriggerPopoverImpl = ({
   ...props
 }) => {
   const warnedRef = useRef(false);
-  if (!warnedRef.current && Boolean(directive) === Boolean(action)) {
+  if (process.env.NODE_ENV !== "production" && !warnedRef.current && Boolean(directive) === Boolean(action)) {
     warnedRef.current = true;
     console.warn("[assistant-ui] ComposerTriggerPopover requires exactly one of `directive` or `action` props.");
   }

package/dist/{chunk-6xr41wyr.js → chunk-46jdxdzy.js}

@@ -1,12 +1,12 @@
 import {
   ContextDisplayRoot2
-} from "./chunk-2gten6a1.js";
+} from "./chunk-6wvhq8wq.js";
 import {
   ContextDisplayTrigger2
-} from "./chunk-86211e5a.js";
+} from "./chunk-p8gshf3k.js";
 import {
   ContextDisplayContent2
-} from "./chunk-2b9agdrf.js";
+} from "./chunk-3dyqen8w.js";
 import {
   ContextDisplayValue2
 } from "./chunk-qxt0fx4f.js";

package/dist/{chunk-x7z9jzyf.js → chunk-4djw71cv.js}

@@ -4,6 +4,10 @@ import {
 import {
   usePortalContainer2
 } from "./chunk-j89xg1ak.js";
+import {
+  usePortalNode,
+  PortalProvider2
+} from "./chunk-aa7m22zj.js";
 import {
   cn2
 } from "./chunk-cp2m7y7v.js";
@@ -37,21 +41,27 @@ function PopoverContent2({
   const resolvedDensity = useDensity(density);
   const direction = useDirection();
   const container = usePortalContainer2();
+  const portal = usePortalNode();
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, {
     container,
-    children: /* @__PURE__ */ jsx(PopoverPrimitive.Positioner, {
-      dir: direction,
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "isolate ",
-      children: /* @__PURE__ */ jsx(PopoverPrimitive.Popup, {
+    ref: portal.ref,
+    children: /* @__PURE__ */ jsx(PortalProvider2, {
+      container: portal.node,
+      children: /* @__PURE__ */ jsx(PopoverPrimitive.Positioner, {
         dir: direction,
-        "data-density": resolvedDensity,
-        "data-slot": "popover-content",
-        className: (state) => cn2("flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-md bg-popover p-2.5 text-sm text-popover-foreground shadow-frame border border-frame-edge shadow-frame outline-hidden duration-120 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", typeof className === "function" ? className(state) : className),
-        ...props
+        align,
+        alignOffset,
+        side,
+        sideOffset,
+        className: "isolate ",
+        children: /* @__PURE__ */ jsx(PopoverPrimitive.Popup, {
+          dir: direction,
+          "data-density": resolvedDensity,
+          "data-slot": "popover-content",
+          "data-scroll": "none",
+          className: (state) => cn2("flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-md bg-popover p-2.5 text-sm text-popover-foreground shadow-frame border border-frame-edge shadow-frame outline-hidden duration-120 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", typeof className === "function" ? className(state) : className),
+          ...props
+        })
       })
     })
   });

package/dist/{chunk-fh3nme7f.js → chunk-4drqqqz1.js}

@@ -1,6 +1,6 @@
 import {
   CommandItem2
-} from "./chunk-4gby2v61.js";
+} from "./chunk-7pyt4e5t.js";
 import {
   useModelSelectorContext
 } from "./chunk-ydfx8r6d.js";

package/dist/{chunk-mjpc4qf7.js → chunk-52e8a05a.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-cp2m7y7v.js";
 import {
   ConversationMap2
-} from "./chunk-ed49y20r.js";
+} from "./chunk-ws4y7ctw.js";
 import {
   usePrefersReducedMotion
 } from "./chunk-jy57625a.js";

package/dist/{chunk-1hbge1cb.js → chunk-553bzh59.js}

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

package/dist/{chunk-a6e11wj6.js → chunk-5ayp2vkw.js}

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

package/dist/{chunk-19441s27.js → chunk-5pvyxayg.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-cp2m7y7v.js";
 import {
   MarkdownText2
-} from "./chunk-q2ewq67a.js";
+} from "./chunk-02qymemz.js";
 import {
   formatUnknownValue2,
   ToolFallbackError2,
@@ -13,7 +13,7 @@ import {
 } from "./chunk-yp12vs0s.js";
 import {
   TaskCard3
-} from "./chunk-njzam0hx.js";
+} from "./chunk-3qqdfft7.js";
 import {
   taskStateOf,
   taskLabel,

package/dist/{chunk-vx7c2xhq.js → chunk-5v4typ39.js}

@@ -1,12 +1,12 @@
 import {
   ContextDisplayRoot2
-} from "./chunk-2gten6a1.js";
+} from "./chunk-6wvhq8wq.js";
 import {
   ContextDisplayTrigger2
-} from "./chunk-86211e5a.js";
+} from "./chunk-p8gshf3k.js";
 import {
   ContextDisplayContent2
-} from "./chunk-2b9agdrf.js";
+} from "./chunk-3dyqen8w.js";
 import {
   ContextDisplayValue2
 } from "./chunk-qxt0fx4f.js";

package/dist/{chunk-gt8m0zeq.js → chunk-5wndb6hx.js}

@@ -6,7 +6,7 @@ import {
   PopoverTrigger2,
   PopoverContent2,
   PopoverTitle2
-} from "./chunk-x7z9jzyf.js";
+} from "./chunk-4djw71cv.js";
 
 // src/components/assistant-ui/native/MessageTiming.tsx
 import { useMessageTiming } from "@assistant-ui/react";

package/dist/{chunk-550z7s64.js → chunk-6432235c.js}

@@ -1,12 +1,12 @@
 import {
   ContextDisplayRoot3
-} from "./chunk-f63f8w58.js";
+} from "./chunk-3jrsp186.js";
 import {
   ContextDisplayTrigger2
-} from "./chunk-86211e5a.js";
+} from "./chunk-p8gshf3k.js";
 import {
   ContextDisplayContent2
-} from "./chunk-2b9agdrf.js";
+} from "./chunk-3dyqen8w.js";
 import {
   ContextDisplayValue2
 } from "./chunk-qxt0fx4f.js";

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

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

package/dist/{chunk-2gten6a1.js → chunk-6wvhq8wq.js}

@@ -1,9 +1,9 @@
 import {
   ContextDisplayRoot3
-} from "./chunk-f63f8w58.js";
+} from "./chunk-3jrsp186.js";
 import {
   ContextDisplayRuntimeRoot2
-} from "./chunk-emasqc8x.js";
+} from "./chunk-sat9hjv7.js";
 
 // src/components/assistant-ui/native/ContextDisplayRoot.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-zhnwybhq.js → chunk-70vndezn.js}

@@ -4,6 +4,10 @@ import {
 import {
   usePortalContainer2
 } from "./chunk-j89xg1ak.js";
+import {
+  usePortalNode,
+  PortalProvider2
+} from "./chunk-aa7m22zj.js";
 import {
   cn2
 } from "./chunk-cp2m7y7v.js";
@@ -28,12 +32,18 @@ function DialogTrigger2({ ...props }) {
     ...props
   });
 }
-function DialogPortal2({ container, ...props }) {
+function DialogPortal2({ container, ref, children, ...props }) {
   const resolvedContainer = usePortalContainer2(container);
+  const portal = usePortalNode(ref);
   return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
     "data-slot": "dialog-portal",
     container: resolvedContainer,
-    ...props
+    ref: portal.ref,
+    ...props,
+    children: /* @__PURE__ */ jsx(PortalProvider2, {
+      container: portal.node,
+      children
+    })
   });
 }
 function DialogClose2({ ...props }) {
@@ -68,7 +78,8 @@ 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),
+        "data-scroll": "none",
+        className: (state) => cn2("fixed flex min-h-0 w-full flex-col gap-panel 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,
@@ -96,7 +107,7 @@ function DialogHeader2({ density, className, ...props }) {
   return /* @__PURE__ */ jsx("div", {
     "data-density": density,
     "data-slot": "dialog-header",
-    className: cn2("flex flex-col gap-2", className),
+    className: cn2("flex shrink-0 flex-col gap-2", className),
     ...props
   });
 }
@@ -110,7 +121,7 @@ function DialogFooter2({
   return /* @__PURE__ */ jsxs("div", {
     "data-density": density,
     "data-slot": "dialog-footer",
-    className: cn2("-mx-panel -mb-panel flex flex-col-reverse gap-2 rounded-b-md border-t bg-muted/50 p-panel sm:flex-row sm:justify-end", className),
+    className: cn2("-mx-panel -mb-panel flex shrink-0 flex-col-reverse gap-2 rounded-b-md border-t bg-muted/50 p-panel sm:flex-row sm:justify-end", className),
     ...props,
     children: [
       children,

package/dist/{chunk-r7fy89jq.js → chunk-79667fz5.js}

@@ -1,12 +1,12 @@
 import {
   ContextDisplayRoot2
-} from "./chunk-2gten6a1.js";
+} from "./chunk-6wvhq8wq.js";
 import {
   ContextDisplayTrigger2
-} from "./chunk-86211e5a.js";
+} from "./chunk-p8gshf3k.js";
 import {
   ContextDisplayContent2
-} from "./chunk-2b9agdrf.js";
+} from "./chunk-3dyqen8w.js";
 import {
   ContextDisplayValue2
 } from "./chunk-qxt0fx4f.js";

package/dist/{chunk-4gby2v61.js → chunk-7pyt4e5t.js}

@@ -7,7 +7,7 @@ import {
   DialogHeader2,
   DialogTitle2,
   DialogDescription2
-} from "./chunk-zhnwybhq.js";
+} from "./chunk-70vndezn.js";
 import {
   InputGroup2,
   InputGroupAddon2,