@alexgorbatchev/shadcn 0.0.47 → 0.0.49

package/README.md

@@ -261,8 +261,10 @@ The npm package includes the same index at `llms.txt` in its root and its linked
 | Area                     | Components                                                                                                                                                                                    |
 | :----------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | 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                                   |
+| Forms and selections     | AuthForm, Calendar, Checkbox, Combobox, Command, EmailCodeAuthForm, 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 |
+| Layout and typography    | AppShell, Container, Grid, GridItem, Heading, PageHeader, Stack, Text                                                                                                                         |
+| Data display             | WeatherForecast, WeatherSummary                                                                                                                                                               |
 | Overlays                 | AlertDialog, ContextMenu, Dialog, Drawer, DropdownMenu, HoverCard, Popover, Sheet, Tooltip                                                                                                    |
 | Loading                  | Progress, Skeleton, Spinner                                                                                                                                                                   |
 | Conversations            | Attachment, Bubble, Marker, Message, MessageScroller                                                                                                                                          |
@@ -316,7 +318,7 @@ Compose data tables with the exported Table parts and `@tanstack/react-table@9.2
 
 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.
+`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. `EmailCodeAuthForm` from the same entry point is passwordless sign-in in two steps: the email step calls `onRequestCode(email)`, and the code step collects a numeric code of `codeLength` digits (default 6) and calls `onVerifyCode(email, code)` when the code is complete or submitted. It offers Resend code and Use a different email, shows pending state while a handler runs, and shows a rejected handler's message without leaving the current step. `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.
 
 Use the Theme toolbar to select light, dark, or system palettes; Docs and example frames follow that selection. Local and routed previews can run on separate ports with independent dependency caches. Reload an open preview after restarting it on a different port.
 
@@ -358,9 +360,69 @@ Bun 1.4.0's CSS bundler lowers logical positioning to language-based selectors.
 
 Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Questionnaire`, which renders a native form. `QuestionnaireChoice` supplies native radios or, with `multiple`, checkboxes; label every `QuestionnaireInput`. Read answers with `FormData.get()` or `getAll()`. `QuestionnaireProgress` and the Previous, Skip, Next, and Submit parts follow the active item. Optional steps need an answer or an explicit skip; observe `onStatusChange` to distinguish skipped answers. Letter and number shortcuts select answers without advancing. Use `item`/`onItemChange` for controlled navigation and `invalid` for external validation. Draft defaults and native reset restore initial answers and navigation. These parts accept density overrides and native render/ref props where supported. See the [upstream composition guide](https://ui.shadcn.com/docs/components/base/questionnaire).
 
+# Page layout
+
+Compose screens from layout components instead of utility classes. Each one accepts `render` for a semantic element, such as `render={<section aria-label="Members" />}`, `<ul />`, `<li />`, `<form />`, or `<main />`; props, handlers, and refs merge with the rendered element.
+
+- `Stack` arranges children along one axis. `direction` is `vertical` (default) or `horizontal`, or a breakpoint map such as `{ base: "vertical", md: "horizontal" }`. `gap` and `padding` take the density-aware spacing tokens `none`, `control`, `panel-sm`, `panel`, `field`, and `section`. `align`, `justify`, and `wrap` position children. `grow` takes the remaining space of a parent `Stack` and lets its content shrink; `height` is `auto`, `full`, `viewport`, or `min-viewport`.
+- `Grid` lays out equal columns: `columns` is 1–6 or 12, or a breakpoint map such as `{ base: 1, md: 2, xl: 4 }`. `minColumnWidth` (`xs`, `sm`, `md`, `lg`) instead fits as many columns as the grid's own width allows, so card grids adapt inside narrow panes. `GridItem span` widens a cell; `span="full"` always spans every column.
+- `Container` centers a column with a maximum `width` (`xs` 20rem, `sm` 24rem, `md` 42rem, `lg` 64rem, `xl` 80rem, or `full`).
+- `Text` renders body copy as a paragraph with semantic `size`, `tone`, `weight`, `align`, `truncate`, and `tabular` options; use `render={<span />}` for inline text. `Heading` renders `h1`–`h6` from its required `level`, with a `size` chosen independently of the outline level.
+- `ScrollArea grow` scrolls inside the remaining space of a parent `Stack`.
+
+A header row with trailing actions, a two-column form, and a centered sign-in page:
+
+```tsx
+import {
+  AuthForm,
+  Button,
+  Container,
+  Field,
+  FieldLabel,
+  Grid,
+  GridItem,
+  Heading,
+  Input,
+  Stack,
+  Textarea,
+} from "@alexgorbatchev/shadcn";
+
+<Stack direction="horizontal" justify="between" align="center" gap="control" wrap render={<header />}>
+  <Heading level={2}>Members</Heading>
+  <Button>Invite</Button>
+</Stack>;
+
+<Grid columns={{ base: 1, md: 2 }} gap="field" render={<form onSubmit={save} />}>
+  <Field>
+    <FieldLabel htmlFor="first-name">First name</FieldLabel>
+    <Input id="first-name" />
+  </Field>
+  <Field>
+    <FieldLabel htmlFor="last-name">Last name</FieldLabel>
+    <Input id="last-name" />
+  </Field>
+  <GridItem span="full">
+    <Field>
+      <FieldLabel htmlFor="notes">Notes</FieldLabel>
+      <Textarea id="notes" />
+    </Field>
+  </GridItem>
+</Grid>;
+
+<Stack height="min-viewport" align="center" justify="center" padding="panel" render={<main />}>
+  <Container width="sm">
+    <AuthForm onSubmit={signIn} />
+  </Container>
+</Stack>;
+```
+
+`AppShell` navigation items take either `href` or `render`, a router link element such as `{ id: "plans", label: "Plans", render: <Link to="/plans" />, active: true }`; the router element owns its destination and client-side navigation while the item keeps its active state, `aria-current="page"`, and activation analytics. `content="scroll"` (default) places children in a padded scrolling column; `content="fill"` gives them the remaining area without padding or scrolling, for full-height screens that manage their own scroll regions.
+
+`WeatherSummary` shows one day's forecast: a `label`, a `condition` from `clear`, `partly-cloudy`, `cloudy`, `fog`, `drizzle`, `rain`, `snow`, or `thunderstorm` with its icon, `high` and `low` temperatures in `unit` (`celsius` by default), and an optional `precipitationProbability` from 0 to 100. Values are rounded and formatted with `Intl` for `locale`; `conditionLabel` localizes the condition name. `WeatherForecast` renders several days, each with an `id`, as a list named by `label`: `variant="strip"` (default) wraps compact days side by side, and `variant="list"` shows one detailed day per row.
+
 # Inline editing and ratings
 
-`InlineEdit` mounts an edit session with a controlled `value`, `onValueChange`, `onCommit`, and `onCancel`. Mount it in place of the displayed label. Its input focuses and selects its text by default; `shouldSelectOnMount={false}` preserves the initial caret. Enter or blur commits once, Escape cancels without committing, and asynchronous saves disable the input until completion. Rejected saves display an error and allow retry.
+`InlineEdit` mounts an edit session with a controlled `value`, `onValueChange`, `onCommit`, and `onCancel`. Mount it in place of the displayed label. Its input focuses and selects its text by default; `shouldSelectOnMount={false}` preserves the initial caret. Enter or blur commits once, Escape cancels without committing, and asynchronous saves disable the input until completion. Set `hasChanges={false}` to cancel an unchanged edit before calling `onCommit`; the caller owns normalization and comparison. It defaults to true, so creation sessions can commit their initial value. Rejected saves display a generic error and allow retry; `renderError` can map the unknown failure to application-authored guidance.
 
 `VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a `TableColumnGroup`; responsive columns keep their widths aligned with cells that share their `visibleFrom`. `maxHeight` defaults to `65vh`, `estimateRowHeight` to 80 pixels, and `overscan` to five rows. `retainedKeys` keeps editing rows mounted; the focused row is retained automatically. Filtering and selection belong to the consumer.
 
@@ -370,6 +432,10 @@ Column `meta.filter` offers a column in `DataGridFilters`, hidden columns includ
 
 Import `DataGridSelectHeader` and `DataGridSelectCell` from `@alexgorbatchev/shadcn/data-grid`. Pass the current `useTable` result as `table` to both controls, and pass `row` and an accessible `label` to each cell. The header selects selectable filtered rows across all pages and preserves selections hidden by filters. It shows a mixed state when some of those rows are selected and disables itself when none are selectable. Its default label is "Select all filtered rows"; provide `label` to name the scope in your application. Cells follow native row selection rules, including disabled rows and partially selected parents. The controls observe selection changes without requiring the parent table selector to include selection state.
 
+`ActionsMenu` shares one `items` definition between a dropdown action and an optional context menu. Supply an accessible `label`; the default trigger is a ghost icon button. `size="sm"` displays the label, and `variant`, `disabled`, and `trigger` customize the action. Supplying `contextTarget` composes the native context trigger with that element and adds its popup. Compose items with `MenuItem`, `MenuLinkItem`, checkbox/radio parts, groups, labels, separators, shortcuts, and submenu parts; dropdown and context menus share these implementations. `MenuLinkItem` retains its native anchor and menu keyboard semantics.
+
+For nested layouts, compose `ActionsMenuTrigger`, `ActionsMenuContextTarget`, and `ActionsMenuContextContent` explicitly inside `ActionsMenu`. The dropdown trigger owns its local native dropdown root and popup; the context target and content share an independent context root. A tree row can use `TreeItem render={<ActionsMenuContextTarget />}` and put the trigger in its action slot. For a table row, render the context target as the actual `tr`, then place the dropdown trigger and context content inside a `td`: native popup portals insert focus guards at their declaration, which must remain valid table children.
+
 `TreeItem linkProps` places the registered tree item, roving focus, and native drag handlers on an anchor. Pass `href` and anchor events directly, or compose a router link through `linkProps.render`. The outer `render` and `ref` remain available for row overlays; disclosure and `endEnhancer` controls remain siblings of the link. Enter and modified clicks retain native link behavior, while tree arrows retain navigation and expansion behavior. Optional `dropHint={{ content, open, side }}` displays caller-controlled drag feedback without adding a focus target.
 
 Embedded actions, links, menus, editable fields, and media controls retain their own keyboard behavior. Registered anchor and button rows still participate in tree navigation; rename and search inputs retain their completion and cancellation shortcuts.
@@ -380,9 +446,11 @@ Embedded actions, links, menus, editable fields, and media controls retain their
 
 `DialogContent size="wide"` uses a desktop maximum width of 576px; `size="narrow"` uses 192px, and the default uses 384px. Dialogs remain bounded by the viewport. `FieldGroup columns={2}` arranges fields in two columns on desktop and one on mobile.
 
+`FormDialog` supplies a controlled dialog with a fixed heading and footer around a scrolling body. Supply `open`, `onOpenChange`, `title`, and children; `description`, `size`, and `density` are optional. With `onSubmit`, the body and actions use a native form: the caller handles `preventDefault`, validation, submission, and pending state. `submitLabel` adds the stock submit button, with optional `submitVariant` and `submitDisabled`; `primaryAction` supplies a custom action instead. Without `onSubmit`, custom actions can request consent without introducing a form. Without a primary action, `cancelLabel="Done"` gives a close-only footer. `isBusy` blocks native dismissal and disables the stock actions; callers disable their own inputs and custom actions. Pass already-rendered safe guidance through `error`.
+
 `ImagePicker` displays a 256px square preview with upload and unset buttons. Supply the existing `src`, a staged `file` (`undefined` for the existing image, `null` for removal), and `onFileChange`/`onClear` callbacks. It accepts PNG, JPEG, and GIF files and releases local preview URLs when they change or unmount. The consumer owns saving and removal confirmation.
 
-`ConfirmationDialog` uses an alert dialog with Cancel and a destructive confirmation button. Supply `open`, `onOpenChange`, `title`, `description`, `confirmLabel`, and `onConfirm`. It waits for asynchronous work, keeps the dialog open on failure, and prevents cancellation while that work is pending.
+`ConfirmationDialog` uses an alert dialog with Cancel and a destructive confirmation button. Supply `open`, `onOpenChange`, `title`, `description`, `confirmLabel`, and `onConfirm`. It waits for asynchronous work, keeps the dialog open on failure, and prevents cancellation while that work is pending. Its body scrolls within the viewport while the heading and actions stay visible. Failures display generic guidance by default; `renderError` maps unknown failures to application-authored messages.
 
 # Split views
 

package/dist/{chunk-snq5m541.js → chunk-02a3sgge.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-tcefvfr8.js";
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   ShimmerLabel2
-} from "./chunk-s3wqwhxc.js";
+} from "./chunk-228jkv3n.js";
 import {
   SwapLabel2
-} from "./chunk-wgxs6b5t.js";
+} from "./chunk-39q6906v.js";
 import {
   Collapsible2,
   CollapsibleTrigger2,

package/dist/{chunk-mqea74ex.js → chunk-032fn19y.js}

@@ -1,12 +1,12 @@
 import {
   Button2
-} from "./chunk-38301e40.js";
+} from "./chunk-bd09gygt.js";
 import {
   useReceiptFocus
 } from "./chunk-vxvaaptq.js";
 import {
   OptionList2
-} from "./chunk-dy4ghe9p.js";
+} from "./chunk-nay3qsgw.js";
 
 // src/components/assistant-ui/elements/QuestionFlow.tsx
 import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";

package/dist/{chunk-tg5grn8f.js → chunk-056z8fc3.js}

@@ -1,9 +1,9 @@
 import {
   ContextDisplayRoot3
-} from "./chunk-8q0xpeh4.js";
+} from "./chunk-t4y934a5.js";
 import {
   ContextDisplayRuntimeRoot2
-} from "./chunk-qky9999p.js";
+} from "./chunk-x8ftt0wm.js";
 
 // src/components/assistant-ui/native/ContextDisplayRoot.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-fz2x6hvf.js → chunk-09x5ne2y.js}

@@ -1,10 +1,10 @@
 import {
   Badge2
-} from "./chunk-wjx6zf94.js";
+} from "./chunk-9t530p75.js";
 import {
   Card2,
   CardContent2
-} from "./chunk-bygq5yqf.js";
+} from "./chunk-k1f35j55.js";
 import {
   FieldSet2,
   FieldLegend2,
@@ -12,11 +12,11 @@ import {
   FieldContent2,
   FieldLabel2,
   FieldDescription2
-} from "./chunk-6jpz5geq.js";
+} from "./chunk-9n0axzd5.js";
 import {
   RadioGroup2,
   RadioGroupItem2
-} from "./chunk-ekbesw9t.js";
+} from "./chunk-kgqe8gpb.js";
 
 // src/components/assistant-ui/elements/ModelPicker.tsx
 import { useId } from "react";

package/dist/{chunk-0q9n4syq.js → chunk-0bwg27nq.js}

@@ -1,16 +1,16 @@
 import {
   CommandList2,
   CommandGroup2
-} from "./chunk-0twprqdp.js";
+} from "./chunk-5bq2j907.js";
 import {
   useModelSelectorContext
 } from "./chunk-ydfx8r6d.js";
 import {
   ModelSelectorEmpty2
-} from "./chunk-cvg5366s.js";
+} from "./chunk-zthc8ajd.js";
 import {
   ModelSelectorItem2
-} from "./chunk-prp1x0by.js";
+} from "./chunk-8sktrf74.js";
 
 // src/components/assistant-ui/elements/ModelSelectorList.tsx
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";

package/dist/{chunk-hyq4nwg2.js → chunk-0hq6rg7w.js}

@@ -1,6 +1,6 @@
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 
 // src/components/Avatar.tsx
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";

package/dist/{chunk-6kygf29c.js → chunk-0jz2mp48.js}

@@ -1,9 +1,9 @@
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   InputGroup2
-} from "./chunk-14mh00z3.js";
+} from "./chunk-rxjxb4vy.js";
 
 // src/components/assistant-ui/elements/ComposerBar.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-fvg93469.js → chunk-0ybqnkcy.js}

@@ -1,6 +1,6 @@
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   take
 } from "./chunk-v8ks0cfq.js";

package/dist/{chunk-m9rrhywc.js → chunk-10bcpsft.js}

@@ -1,21 +1,21 @@
 import {
   MarkdownText2
-} from "./chunk-bt7ramb0.js";
+} from "./chunk-mxcfz56p.js";
 import {
   ReasoningRoot3
-} from "./chunk-3v95p5js.js";
+} from "./chunk-m0kavf2m.js";
 import {
   ReasoningTrigger2
-} from "./chunk-pa8yemp1.js";
+} from "./chunk-a1c1yrkz.js";
 import {
   ReasoningFade2
-} from "./chunk-3g8p9apn.js";
+} from "./chunk-zyxzn7xf.js";
 import {
   ReasoningContent2
-} from "./chunk-qv3b2jvc.js";
+} from "./chunk-x0p3g392.js";
 import {
   ReasoningText2
-} from "./chunk-m99hfsps.js";
+} from "./chunk-f2p7w894.js";
 import {
   REASONING_ANIMATION_DURATION
 } from "./chunk-fgmcbtyt.js";

package/dist/{chunk-8wc2z7te.js → chunk-10vjajh7.js}

@@ -11,28 +11,16 @@ import {
 } from "./chunk-jpvw9xqy.js";
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   useAnalyticsCallback
 } from "./chunk-5mydsjp3.js";
 
-// src/components/DropdownMenu.tsx
+// src/components/MenuPopup.tsx
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
-import { ChevronRightIcon, CheckIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 "use client";
-function DropdownMenu2({
-  analytics,
-  ...props
-}) {
-  const trackedOnOpenChange = useAnalyticsCallback("DropdownMenu", analytics, (open, _details) => ({ name: "ui.open-request", open }), props.onOpenChange);
-  return /* @__PURE__ */ jsx(MenuPrimitive.Root, {
-    "data-slot": "dropdown-menu",
-    ...props,
-    onOpenChange: trackedOnOpenChange
-  });
-}
-function DropdownMenuPortal2({ container, ref, children, ...props }) {
+function MenuPortal({ container, ref, children, ...props }) {
   const resolvedContainer = usePortalContainer2(container);
   const portal = usePortalNode(ref);
   return /* @__PURE__ */ jsx(MenuPrimitive.Portal, {
@@ -46,13 +34,7 @@ function DropdownMenuPortal2({ container, ref, children, ...props }) {
     })
   });
 }
-function DropdownMenuTrigger2({ ...props }) {
-  return /* @__PURE__ */ jsx(MenuPrimitive.Trigger, {
-    "data-slot": "dropdown-menu-trigger",
-    ...props
-  });
-}
-function DropdownMenuContent2({
+function MenuPopup({
   density,
   width = "content",
   align = "start",
@@ -64,7 +46,7 @@ function DropdownMenuContent2({
 }) {
   const resolvedDensity = useDensity(density);
   const direction = useDirection2();
-  return /* @__PURE__ */ jsx(DropdownMenuPortal2, {
+  return /* @__PURE__ */ jsx(MenuPortal, {
     children: /* @__PURE__ */ jsx(MenuPrimitive.Positioner, {
       dir: direction,
       className: "isolate outline-none",
@@ -73,6 +55,7 @@ function DropdownMenuContent2({
       side,
       sideOffset,
       children: /* @__PURE__ */ jsx(MenuPrimitive.Popup, {
+        dir: direction,
         "data-density": resolvedDensity,
         "data-slot": "dropdown-menu-content",
         className: (state) => cn2("max-h-(--available-height) max-w-(--available-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-frame 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:overflow-hidden data-closed:fade-out-0", width === "anchor" ? "w-(--anchor-width)" : "w-max", typeof className === "function" ? className(state) : className),
@@ -81,22 +64,29 @@ function DropdownMenuContent2({
     })
   });
 }
-function DropdownMenuGroup2({ ...props }) {
-  return /* @__PURE__ */ jsx(MenuPrimitive.Group, {
-    "data-slot": "dropdown-menu-group",
+
+// src/components/MenuParts.tsx
+import { Menu as MenuPrimitive2 } from "@base-ui/react/menu";
+import { ChevronRightIcon, CheckIcon } from "lucide-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+"use client";
+var menuItemClassName = "group/menu-item relative flex cursor-default items-center gap-control-gap rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive";
+function MenuGroup2({ ...props }) {
+  return /* @__PURE__ */ jsx2(MenuPrimitive2.Group, {
+    "data-slot": "menu-group",
     ...props
   });
 }
-function DropdownMenuLabel2({ density, className, inset, ...props }) {
-  return /* @__PURE__ */ jsx(MenuPrimitive.GroupLabel, {
+function MenuLabel2({ density, className, inset, ...props }) {
+  return /* @__PURE__ */ jsx2(MenuPrimitive2.GroupLabel, {
     "data-density": density,
-    "data-slot": "dropdown-menu-label",
+    "data-slot": "menu-label",
     "data-inset": inset,
     className: (state) => cn2("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:ps-7", typeof className === "function" ? className(state) : className),
     ...props
   });
 }
-function DropdownMenuItem2({
+function MenuItem2({
   analytics,
   density,
   className,
@@ -104,41 +94,60 @@ function DropdownMenuItem2({
   variant = "default",
   ...props
 }) {
-  const trackedOnClick = useAnalyticsCallback("DropdownMenuItem", analytics, { name: "ui.activate" }, props.onClick);
-  return /* @__PURE__ */ jsx(MenuPrimitive.Item, {
+  const trackedOnClick = useAnalyticsCallback("MenuItem", analytics, { name: "ui.activate" }, props.onClick);
+  return /* @__PURE__ */ jsx2(MenuPrimitive2.Item, {
     "data-density": density,
-    "data-slot": "dropdown-menu-item",
+    "data-slot": "menu-item",
     "data-inset": inset,
     "data-variant": variant,
-    className: (state) => cn2("group/dropdown-menu-item relative flex cursor-default items-center gap-control-gap rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", typeof className === "function" ? className(state) : className),
+    className: (state) => cn2(menuItemClassName, typeof className === "function" ? className(state) : className),
     ...props,
     onClick: trackedOnClick
   });
 }
-function DropdownMenuSub2({ analytics, ...props }) {
-  const trackedOnOpenChange = useAnalyticsCallback("DropdownMenuSub", analytics, (open, _details) => ({ name: "ui.open-request", open }), props.onOpenChange);
-  return /* @__PURE__ */ jsx(MenuPrimitive.SubmenuRoot, {
-    "data-slot": "dropdown-menu-sub",
+function MenuLinkItem2({
+  analytics,
+  density,
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  const trackedOnClick = useAnalyticsCallback("MenuLinkItem", analytics, { name: "ui.activate" }, props.onClick);
+  return /* @__PURE__ */ jsx2(MenuPrimitive2.LinkItem, {
+    "data-density": density,
+    "data-slot": "menu-item",
+    "data-inset": inset,
+    "data-variant": variant,
+    className: (state) => cn2(menuItemClassName, typeof className === "function" ? className(state) : className),
+    ...props,
+    onClick: trackedOnClick
+  });
+}
+function MenuSub2({ analytics, ...props }) {
+  const trackedOnOpenChange = useAnalyticsCallback("MenuSub", analytics, (open, _details) => ({ name: "ui.open-request", open }), props.onOpenChange);
+  return /* @__PURE__ */ jsx2(MenuPrimitive2.SubmenuRoot, {
+    "data-slot": "menu-sub",
     ...props,
     onOpenChange: trackedOnOpenChange
   });
 }
-function DropdownMenuSubTrigger2({ density, className, inset, children, ...props }) {
-  return /* @__PURE__ */ jsxs(MenuPrimitive.SubmenuTrigger, {
+function MenuSubTrigger2({ density, className, inset, children, ...props }) {
+  return /* @__PURE__ */ jsxs(MenuPrimitive2.SubmenuTrigger, {
     "data-density": density,
-    "data-slot": "dropdown-menu-sub-trigger",
+    "data-slot": "menu-sub-trigger",
     "data-inset": inset,
     className: (state) => cn2("flex cursor-default items-center gap-control-gap rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", typeof className === "function" ? className(state) : className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRightIcon, {
+      /* @__PURE__ */ jsx2(ChevronRightIcon, {
         className: "ms-auto rtl:rotate-180"
       })
     ]
   });
 }
-function DropdownMenuSubContent2({
+function MenuSubContent2({
   density,
   align = "start",
   alignOffset = -3,
@@ -148,9 +157,9 @@ function DropdownMenuSubContent2({
   ...props
 }) {
   const resolvedDensity = useDensity(density);
-  return /* @__PURE__ */ jsx(DropdownMenuContent2, {
+  return /* @__PURE__ */ jsx2(MenuPopup, {
     "data-density": resolvedDensity,
-    "data-slot": "dropdown-menu-sub-content",
+    "data-slot": "menu-sub-content",
     className: (state) => cn2("w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-frame border border-frame-edge shadow-frame duration-120 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", typeof className === "function" ? className(state) : className),
     align,
     alignOffset,
@@ -159,7 +168,7 @@ function DropdownMenuSubContent2({
     ...props
   });
 }
-function DropdownMenuCheckboxItem2({
+function MenuCheckboxItem2({
   analytics,
   density,
   className,
@@ -168,72 +177,91 @@ function DropdownMenuCheckboxItem2({
   inset,
   ...props
 }) {
-  const trackedOnCheckedChange = useAnalyticsCallback("DropdownMenuCheckboxItem", analytics, { name: "ui.change-request" }, props.onCheckedChange);
-  return /* @__PURE__ */ jsxs(MenuPrimitive.CheckboxItem, {
+  const trackedOnCheckedChange = useAnalyticsCallback("MenuCheckboxItem", analytics, { name: "ui.change-request" }, props.onCheckedChange);
+  return /* @__PURE__ */ jsxs(MenuPrimitive2.CheckboxItem, {
     "data-density": density,
-    "data-slot": "dropdown-menu-checkbox-item",
+    "data-slot": "menu-checkbox-item",
     "data-inset": inset,
     className: (state) => cn2("relative flex cursor-default items-center gap-control-gap rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", typeof className === "function" ? className(state) : className),
     checked,
     ...props,
     onCheckedChange: trackedOnCheckedChange,
     children: [
-      /* @__PURE__ */ jsx("span", {
+      /* @__PURE__ */ jsx2("span", {
         className: "pointer-events-none absolute end-2 flex items-center justify-center",
-        "data-slot": "dropdown-menu-checkbox-item-indicator",
-        children: /* @__PURE__ */ jsx(MenuPrimitive.CheckboxItemIndicator, {
-          children: /* @__PURE__ */ jsx(CheckIcon, {})
+        "data-slot": "menu-checkbox-item-indicator",
+        children: /* @__PURE__ */ jsx2(MenuPrimitive2.CheckboxItemIndicator, {
+          children: /* @__PURE__ */ jsx2(CheckIcon, {})
         })
       }),
       children
     ]
   });
 }
-function DropdownMenuRadioGroup2({
-  analytics,
-  ...props
-}) {
-  const trackedOnValueChange = useAnalyticsCallback("DropdownMenuRadioGroup", analytics, { name: "ui.change-request" }, props.onValueChange);
-  return /* @__PURE__ */ jsx(MenuPrimitive.RadioGroup, {
-    "data-slot": "dropdown-menu-radio-group",
+function MenuRadioGroup2({ analytics, ...props }) {
+  const trackedOnValueChange = useAnalyticsCallback("MenuRadioGroup", analytics, { name: "ui.change-request" }, props.onValueChange);
+  return /* @__PURE__ */ jsx2(MenuPrimitive2.RadioGroup, {
+    "data-slot": "menu-radio-group",
     ...props,
     onValueChange: trackedOnValueChange
   });
 }
-function DropdownMenuRadioItem2({ density, className, children, inset, ...props }) {
-  return /* @__PURE__ */ jsxs(MenuPrimitive.RadioItem, {
+function MenuRadioItem2({ density, className, children, inset, ...props }) {
+  return /* @__PURE__ */ jsxs(MenuPrimitive2.RadioItem, {
     "data-density": density,
-    "data-slot": "dropdown-menu-radio-item",
+    "data-slot": "menu-radio-item",
     "data-inset": inset,
     className: (state) => cn2("relative flex cursor-default items-center gap-control-gap rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", typeof className === "function" ? className(state) : className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", {
+      /* @__PURE__ */ jsx2("span", {
         className: "pointer-events-none absolute end-2 flex items-center justify-center",
-        "data-slot": "dropdown-menu-radio-item-indicator",
-        children: /* @__PURE__ */ jsx(MenuPrimitive.RadioItemIndicator, {
-          children: /* @__PURE__ */ jsx(CheckIcon, {})
+        "data-slot": "menu-radio-item-indicator",
+        children: /* @__PURE__ */ jsx2(MenuPrimitive2.RadioItemIndicator, {
+          children: /* @__PURE__ */ jsx2(CheckIcon, {})
         })
       }),
       children
     ]
   });
 }
-function DropdownMenuSeparator2({ density, className, ...props }) {
-  return /* @__PURE__ */ jsx(MenuPrimitive.Separator, {
+function MenuSeparator2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx2(MenuPrimitive2.Separator, {
     "data-density": density,
-    "data-slot": "dropdown-menu-separator",
+    "data-slot": "menu-separator",
     className: (state) => cn2("-mx-1 my-1 h-px bg-border", typeof className === "function" ? className(state) : className),
     ...props
   });
 }
-function DropdownMenuShortcut2({ density, className, ...props }) {
-  return /* @__PURE__ */ jsx("span", {
+function MenuShortcut2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx2("span", {
     "data-density": density,
-    "data-slot": "dropdown-menu-shortcut",
-    className: cn2("ms-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
+    "data-slot": "menu-shortcut",
+    className: cn2("ms-auto text-xs tracking-widest text-muted-foreground group-focus/menu-item:text-accent-foreground", className),
+    ...props
+  });
+}
+
+// src/components/DropdownMenu.tsx
+import { Menu as MenuPrimitive3 } from "@base-ui/react/menu";
+import { jsx as jsx3 } from "react/jsx-runtime";
+"use client";
+function DropdownMenu2({
+  analytics,
+  ...props
+}) {
+  const trackedOnOpenChange = useAnalyticsCallback("DropdownMenu", analytics, (open, _details) => ({ name: "ui.open-request", open }), props.onOpenChange);
+  return /* @__PURE__ */ jsx3(MenuPrimitive3.Root, {
+    "data-slot": "dropdown-menu",
+    ...props,
+    onOpenChange: trackedOnOpenChange
+  });
+}
+function DropdownMenuTrigger2({ ...props }) {
+  return /* @__PURE__ */ jsx3(MenuPrimitive3.Trigger, {
+    "data-slot": "dropdown-menu-trigger",
     ...props
   });
 }
 
-export { DropdownMenu2, DropdownMenuPortal2, DropdownMenuTrigger2, DropdownMenuContent2, DropdownMenuGroup2, DropdownMenuLabel2, DropdownMenuItem2, DropdownMenuSub2, DropdownMenuSubTrigger2, DropdownMenuSubContent2, DropdownMenuCheckboxItem2, DropdownMenuRadioGroup2, DropdownMenuRadioItem2, DropdownMenuSeparator2, DropdownMenuShortcut2 };
+export { MenuPortal, MenuPopup, MenuGroup2, MenuLabel2, MenuItem2, MenuLinkItem2, MenuSub2, MenuSubTrigger2, MenuSubContent2, MenuCheckboxItem2, MenuRadioGroup2, MenuRadioItem2, MenuSeparator2, MenuShortcut2, DropdownMenu2, DropdownMenuTrigger2 };

package/dist/{chunk-588wj6g4.js → chunk-11m1mwv4.js}

@@ -1,12 +1,12 @@
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   Button2
-} from "./chunk-38301e40.js";
+} from "./chunk-bd09gygt.js";
 import {
   ShimmerLabel2
-} from "./chunk-s3wqwhxc.js";
+} from "./chunk-228jkv3n.js";
 import {
   mono
 } from "./chunk-fgmcbtyt.js";

package/dist/{chunk-wnhxn2se.js → chunk-16qrkr8k.js}

@@ -1,6 +1,6 @@
 import {
   CommandInput2
-} from "./chunk-0twprqdp.js";
+} from "./chunk-5bq2j907.js";
 
 // src/components/assistant-ui/elements/ModelSelectorSearch.tsx
 import { jsx } from "react/jsx-runtime";