agentic-ui-kit 0.6.0 → 0.7.1

package/dist/types/react/src/primitives/button.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { type ButtonProps as AriaButtonProps } from "react-aria-components";
 declare const variants: {
     /** Plain text button, highlights on hover. Sidebar rows, header buttons. */
@@ -24,9 +24,15 @@ declare const sizes: {
 export interface ButtonProps extends Omit<AriaButtonProps, "className"> {
     variant?: keyof typeof variants;
     size?: keyof typeof sizes;
+    /**
+     * Why the button is disabled. Only used with `isDisabled`: the button then stays focusable (`aria-disabled`,
+     * no press handlers, never submits), shows the reason in a tooltip on hover and focus, and exposes it as its
+     * accessible description.
+     */
+    disabledReason?: ReactNode;
     className?: string;
 }
-export declare function Button({ variant, size, className, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, size, className, disabledReason, ...rest }: ButtonProps): import("react").JSX.Element;
 export interface IconButtonProps extends Omit<AriaButtonProps, "className" | "children"> {
     /** Accessible name, also shown as the tooltip. */
     label: string;
@@ -35,7 +41,9 @@ export interface IconButtonProps extends Omit<AriaButtonProps, "className" | "ch
     size?: "sm" | "md";
     /** Show the label as a tooltip on hover. On by default. */
     tooltip?: boolean;
+    /** Why the button is disabled; see `Button`. Replaces the label tooltip while the button is disabled. */
+    disabledReason?: ReactNode;
     className?: string;
 }
-export declare function IconButton({ label, variant, size, tooltip, className, ...props }: IconButtonProps): import("react").JSX.Element;
+export declare function IconButton({ label, variant, size, tooltip, className, disabledReason, ...rest }: IconButtonProps): import("react").JSX.Element;
 export {};

package/dist/types/react/src/primitives/chat-theme.d.ts

@@ -29,6 +29,8 @@ export interface ChatThemeProps {
 /**
  * Applies a chat theme to part of a page. Menus, tooltips and dialogs opened inside render into this
  * element instead of `<body>`, so they get the same theme. An app themed as a whole (variables on
- * `:root`) does not need it for colors, but still uses it for `codeThemes` and `motion`.
+ * `:root`) does not need it for colors, but still uses it for `codeThemes` and `motion`. The element is
+ * `height: 100%` of its parent by default (so `ChatView` has a height without Tailwind); a `className` such
+ * as `h-screen`, or a style rule of your own, replaces that.
  */
 export declare function ChatTheme({ theme, codeThemes, motion, labels, icons, children, className }: ChatThemeProps): import("react").JSX.Element;

package/dist/types/react/src/primitives/cx.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+/** `clsx` plus tailwind-merge: later classes win over earlier ones that set the same property, so a caller's `h-7` or `rounded-none` beats the kit's. */
+export declare function cx(...inputs: ClassValue[]): string;

package/dist/types/react/src/primitives/icons.d.ts

@@ -81,6 +81,8 @@ export interface ChatIcons {
     file: ReactNode;
     /** Remove an attachment. */
     remove: ReactNode;
+    /** The recent-chats button on the collapsed sidebar rail (`ChatListRailButton`). */
+    chatList: ReactNode;
     /**
      * Left of the thinking / tool-steps summary while the model works, e.g. your logo animating. None by
      * default.

package/dist/types/react/src/primitives/labels.d.ts

@@ -25,6 +25,12 @@ export interface ChatLabels {
     ranCommandLabel: string;
     /** Heading phrase for command calls, lowercase: "ran a command", "ran 3 commands". */
     ranCommands: (count: number) => string;
+    /** Approval question for the command tool, present tense. */
+    runCommandAsk: string;
+    /** Approval question for the web search tool. */
+    searchWebAsk: string;
+    /** Approval question for the page fetch tool. */
+    readPageAsk: string;
     /** Row label of the web search tool. */
     searchedWebLabel: string;
     readPageLabel: string;
@@ -61,12 +67,22 @@ export interface ChatLabels {
     expandSidebar: string;
     /** Sidebar toggle, full width. */
     collapseSidebar: string;
+    /** Accessible name of the sidebar's resize handle. */
+    resizeSidebar: string;
+    /** A label with its keyboard shortcut, e.g. "Collapse sidebar (⌘ B)". */
+    withShortcut: (label: string, keys: string) => string;
+    /** The Ctrl key's name in shortcut hints (non-Mac). */
+    ctrlKey: string;
     /** Default title of the context panel. */
     context: string;
     /** Accessible name of the usage meter. */
     contextUsed: string;
     /** "42% used". */
     percentUsed: (percent: number) => string;
+    /** Context meter summary, also its accessible name: "Context: 13.8k / 200k (7%)". */
+    contextSummary: (used: string, limit: string, percent: number) => string;
+    /** Context meter while the numbers are still loading. */
+    contextLoading: string;
     /** Row for the unused part of the window. */
     freeSpace: string;
     /** "1.2k tokens"; `count` is already formatted. */
@@ -155,6 +171,8 @@ export interface ChatLabels {
     copy: string;
     /** Copy button right after copying. */
     copied: string;
+    /** Accessible name of a copy field's read-only input. */
+    copyFieldLabel: string;
     /** Retry button. */
     retry: string;
     /** Edit button. */

package/dist/types/react/src/primitives/menu.d.ts

@@ -1,6 +1,12 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { type MenuItemProps as AriaMenuItemProps, type MenuProps as AriaMenuProps, type PopoverProps as AriaPopoverProps, type Key, type Selection } from "react-aria-components";
-export { MenuTrigger, SubmenuTrigger } from "react-aria-components";
+import { DialogTrigger } from "react-aria-components";
+export { MenuTrigger, SubmenuTrigger, DialogTrigger } from "react-aria-components";
+/**
+ * Wraps a trigger button and a kit `Popover` (or `Modal`) so that pressing the button toggles it, without
+ * importing react-aria. The same component as `DialogTrigger`; use whichever name reads better.
+ */
+export declare const PopoverTrigger: typeof DialogTrigger;
 export interface MenuSearchProps {
     placeholder: string;
     /** A `Menu`; its items are filtered by what the user types. */
@@ -13,9 +19,19 @@ export interface MenuSearchProps {
 export declare function MenuSearch({ placeholder, children, value, onChange }: MenuSearchProps): import("react").JSX.Element;
 export interface PopoverProps extends Omit<AriaPopoverProps, "className"> {
     className?: string;
+    /**
+     * Below this viewport width (px, default 768) the popover opens as a bottom sheet over a dimmed page instead
+     * of floating at the trigger; keyboard, focus and dismissing work the same. `false` always floats. Placement
+     * props are ignored in the sheet.
+     */
+    sheet?: number | false;
+    /** "trigger" makes the popover as wide as its trigger (react-aria's `--trigger-width`). Default "auto". */
+    width?: "auto" | "trigger";
+    /** When floating on a phone (`sheet={false}`), stretch to the viewport width. */
+    fullWidthOnPhones?: boolean;
 }
-/** Floating panel for menus and pickers: surface color, rounded, soft shadow, fades in. */
-export declare function Popover({ className, offset, ...props }: PopoverProps): import("react").JSX.Element;
+/** Floating panel for menus and pickers: surface color, rounded, soft shadow, fades in. On phones it's a bottom sheet. */
+export declare function Popover({ className, offset, sheet, width, fullWidthOnPhones, children, ...props }: PopoverProps): import("react").JSX.Element;
 export interface MenuProps<T> extends Omit<AriaMenuProps<T>, "className"> {
     className?: string;
 }
@@ -33,9 +49,11 @@ export interface MenuItemProps extends Omit<AriaMenuItemProps, "className" | "ch
     shortcut?: string;
     /** "danger" colors the item red, for Delete. */
     tone?: "default" | "danger";
+    /** In a selection menu, how the selected state shows: a "check" mark (default) or an on/off "switch" for settings rows. */
+    indicator?: "check" | "switch";
     className?: string;
 }
-export declare function MenuItem({ children, icon, description, descriptionPlacement, detail, shortcut, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuItem({ children, icon, description, descriptionPlacement, detail, shortcut, tone, indicator, className, ...props }: MenuItemProps): import("react").JSX.Element;
 export interface MenuSectionProps {
     children: ReactNode;
     title?: ReactNode;

package/dist/types/react/src/primitives/overlay.d.ts

@@ -7,12 +7,24 @@ interface OverlayProps {
     children: ReactNode;
     className?: string;
 }
+declare const modalSizes: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    /** Fills the page inside the overlay's padding. */
+    full: string;
+};
 export interface ModalProps extends OverlayProps {
     /** Heading at the top, also the dialog's accessible name. */
     title?: ReactNode;
+    /** Width of the dialog: sm 24rem, md 32rem, lg 42rem (default), xl 64rem, full fills the page. */
+    size?: keyof typeof modalSizes;
+    /** "center" (default) vertically centers the dialog; "top" puts it near the top edge, e.g. a command palette. */
+    placement?: "center" | "top";
 }
 /** A centered dialog over a dimmed page. Escape and clicking outside close it; focus stays inside. */
-export declare function Modal({ isOpen, onOpenChange, title, children, className, ...props }: ModalProps): import("react").JSX.Element;
+export declare function Modal({ isOpen, onOpenChange, title, size, placement, children, className, ...props }: ModalProps): import("react").JSX.Element;
 export interface DrawerProps extends OverlayProps {
     side?: "left" | "right";
 }

package/dist/types/react/src/primitives/panel.d.ts

@@ -9,6 +9,8 @@ export interface PanelProps {
     children: ReactNode;
     /** "card": bordered and rounded, for grids and docks. "flush": no frame, for a pane that fills a column. */
     variant?: "card" | "flush";
+    /** Pads the body (0.75rem, like the header). Off by default so a `ChatView` or list can run edge to edge. */
+    padded?: boolean;
     "aria-label"?: string;
     className?: string;
 }
@@ -16,4 +18,4 @@ export interface PanelProps {
  * A titled region that fills its container and lets the body scroll: a dock panel, an agent pane in a
  * grid, a settings card. A `ChatView` placed in the body sizes itself to the panel.
  */
-export declare function Panel({ title, actions, footer, children, variant, className, ...props }: PanelProps): import("react").JSX.Element;
+export declare function Panel({ title, actions, footer, children, variant, padded, className, ...props }: PanelProps): import("react").JSX.Element;

package/dist/types/react/src/primitives/segmented-control.d.ts

@@ -5,18 +5,43 @@ export interface SegmentedOption<T extends string = string> {
     icon?: ReactNode;
     /** Show only the icon; the label becomes its accessible name and tooltip. */
     iconOnly?: boolean;
+    /** Disable just this option. */
+    isDisabled?: boolean;
 }
-export interface SegmentedControlProps<T extends string = string> {
+declare const sizes: {
+    sm: {
+        button: string;
+        iconOnly: string;
+    };
+    md: {
+        button: string;
+        iconOnly: string;
+    };
+};
+interface SegmentedControlBase<T extends string> {
     /** Accessible name of the group, e.g. "Mode". */
     label: string;
     options: readonly SegmentedOption<T>[];
-    value: T;
-    onChange: (value: T) => void;
+    /** Disable the whole control. */
+    isDisabled?: boolean;
+    /** "sm" (default, 24px tall) or "md" (32px). */
+    size?: keyof typeof sizes;
     className?: string;
 }
+export type SegmentedControlProps<T extends string = string> = SegmentedControlBase<T> & ({
+    /** Pressing the selected option again clears the selection: `value` may be `null` and `onChange` gets `null`. */
+    clearable?: false;
+    value: T;
+    onChange: (value: T) => void;
+} | {
+    clearable: true;
+    value: T | null;
+    onChange: (value: T | null) => void;
+});
 /**
  * One of a few options, side by side on a track, similar to claude.ai's Chat / Cowork switch. Themed with
  * `--chat-segment-track` (default: a shade darker than the surface it sits on) and `--chat-segment-selected`
  * (default `--chat-raised`).
  */
-export declare function SegmentedControl<T extends string>({ label, options, value, onChange, className }: SegmentedControlProps<T>): import("react").JSX.Element;
+export declare function SegmentedControl<T extends string>({ label, options, value, onChange, clearable, isDisabled, size, className }: SegmentedControlProps<T>): import("react").JSX.Element;
+export {};

package/dist/types/react/src/views/app-shell.d.ts

@@ -2,19 +2,47 @@ import { type ReactNode } from "react";
 export interface AppShellProps {
     sidebar: ReactNode;
     children: ReactNode;
-    /** Defaults to collapsed below 1024px. */
+    /** Defaults to collapsed below 1024px. Only the initial value; use `collapsed` to control it. */
     defaultCollapsed?: boolean;
+    /** Controls whether the pinned sidebar is the icon rail. Pair with `onCollapsedChange`. */
+    collapsed?: boolean;
+    /** Called with the new value when the user collapses or expands the pinned sidebar (button or shortcut). */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Where the page scrolls. `"inner"` (default): the shell is exactly the window tall and `main` scrolls inside.
+     * `"window"`: the shell grows with its content, the window scrolls (sticky headers and `position: sticky` in the
+     * page keep working) and the sidebar sticks to the top at window height.
+     */
+    scroll?: "inner" | "window";
+    /**
+     * Lets the user drag the sidebar's right edge (or use the arrow keys on it) to change its width, in px.
+     * Without it the width is `--chat-sidebar-width`.
+     */
+    resizable?: {
+        min: number;
+        max: number;
+    };
+    /** Controls the width in px while `resizable`. Pair with `onWidthChange`. */
+    width?: number;
+    /** Initial width in px while `resizable`, 288 (18rem) otherwise. */
+    defaultWidth?: number;
+    /** Called with the width in px when a drag ends or a key changes it (not on every pointer move). */
+    onWidthChange?: (width: number) => void;
+    /** Keeps the width in localStorage under this key, so it survives reloads. */
+    persistKey?: string;
+    /** Cmd+B (Ctrl+B off Apple platforms) toggles the sidebar. Default true. */
+    shortcut?: boolean;
     className?: string;
 }
 /**
  * A page with a sidebar: pinned and collapsible to an icon rail from tablet width up, a drawer over the
  * content on phones. Children get `useSidebar()` and `<SidebarToggle>`.
  */
-export declare function AppShell({ sidebar, children, defaultCollapsed, className }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ sidebar, children, defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, scroll, resizable, width: widthProp, defaultWidth, onWidthChange, persistKey, shortcut, className, }: AppShellProps): import("react").JSX.Element;
 export interface SidebarToggleProps {
     /** Render only when the sidebar is a drawer, e.g. in the chat header. */
     drawerOnly?: boolean;
     className?: string;
 }
-/** Opens the drawer on phones, collapses / expands the pinned sidebar elsewhere. */
+/** Opens the drawer on phones, collapses / expands the pinned sidebar elsewhere. Its label names the shortcut, e.g. "(⌘ B)". */
 export declare function SidebarToggle({ drawerOnly, className }: SidebarToggleProps): import("react").JSX.Element | null;

package/dist/types/react/src/views/chat-view.d.ts

@@ -35,8 +35,12 @@ export interface ChatViewProps {
     widgets?: WidgetHost;
     /** Usually a `<ChatHeader>`. */
     header?: ReactNode;
-    /** Passed to the composer: toolbar slots, placeholder, controlled text. */
-    composer?: Partial<Omit<ComposerProps, "onSubmit" | "onStop" | "busy">>;
+    /**
+     * Passed to the composer: toolbar slots, placeholder, controlled text. `false` shows no composer (a chat you
+     * can only read or answer through approvals and message actions): `renderComposer` is not called, the empty
+     * state gets `null` in place of the composer and nothing shows if there is none.
+     */
+    composer?: Partial<Omit<ComposerProps, "onSubmit" | "onStop" | "busy">> | false;
     /**
      * Shown instead of the list while there are no messages; gets the centered composer to place, e.g.
      * `(composer) => <EmptyState greeting="Good evening">{composer}</EmptyState>`. Defaults to the composer.

package/dist/types/react/src/views/sidebar.d.ts

@@ -1,11 +1,14 @@
 import type { ReactNode } from "react";
+import { type PopoverProps } from "../primitives/menu";
 export interface SidebarProps {
     /** Name or logo at the top left; hidden when collapsed. */
     brand?: ReactNode;
     /** A logo mark left of `brand`, sized 1.25rem. It stays at the top of the collapsed rail. */
     brandIcon?: ReactNode;
-    /** Buttons at the top right next to the collapse toggle, e.g. a mode switch. */
+    /** Buttons at the top right next to the collapse toggle, e.g. a mode switch. Hidden when collapsed; see `railActions`. */
     headerActions?: ReactNode;
+    /** Icon-only buttons shown under the toggle on the collapsed rail, e.g. the same actions as `headerActions`. */
+    railActions?: ReactNode;
     /** Fixed items under the header: New chat, Search, Projects… (`SidebarItem`s). */
     nav?: ReactNode;
     /** The scrolling middle, usually `ChatList`. Hidden when collapsed. */
@@ -15,18 +18,42 @@ export interface SidebarProps {
     className?: string;
 }
 /** The claude.ai sidebar frame. Collapses to an icon rail inside `AppShell`; a drawer on phones. */
-export declare function Sidebar({ brand, brandIcon, headerActions, nav, children, footer, className }: SidebarProps): import("react").JSX.Element;
+export declare function Sidebar({ brand, brandIcon, headerActions, railActions, nav, children, footer, className }: SidebarProps): import("react").JSX.Element;
+export interface SidebarListProps {
+    children: ReactNode;
+    className?: string;
+}
+/** The `<ul>` for `SidebarItem`s outside `Sidebar`'s `nav` slot (e.g. inside a section): no bullets, no padding. */
+export declare function SidebarList({ children, className }: SidebarListProps): import("react").JSX.Element;
 export interface SidebarItemProps {
     icon: ReactNode;
     label: string;
     onPress?: () => void;
+    /**
+     * Renders the row as a link. For client-side navigation wrap the app in react-aria's `RouterProvider`;
+     * otherwise a press reloads the page.
+     */
     href?: string;
     active?: boolean;
-    /** Shown on the right, e.g. "⌘K". */
+    /** Shown on the right on hover, e.g. "⌘K". */
     shortcut?: string;
+    /** Always shown on the right, e.g. an unread count. On the collapsed rail it becomes a dot. */
+    badge?: ReactNode;
+    /** A second, smaller line under the label. */
+    description?: ReactNode;
+    /** Row actions (a `…` button, say), shown on hover and focus, outside the link so they can be buttons. Hidden when collapsed. */
+    trailing?: ReactNode;
+    /** Native tooltip on the row. Without it, the label shows as a tooltip only while it is cut off by `…`. */
+    title?: string;
+    className?: string;
+    /** Any `data-*` attribute goes on the row's `<li>`, e.g. `data-testid`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
 }
-/** A nav row: icon and label; just the icon with a tooltip when collapsed. Closes the drawer when picked. */
-export declare function SidebarItem({ icon, label, onPress, href, active, shortcut }: SidebarItemProps): import("react").JSX.Element;
+/**
+ * A nav row: icon and label; just the icon with a tooltip when collapsed. Closes the drawer when picked.
+ * Icons are 1rem, or `--chat-sidebar-icon-size`.
+ */
+export declare function SidebarItem({ icon, label, onPress, href, active, shortcut, badge, description, trailing, title, className: extra, ...rest }: SidebarItemProps): import("react").JSX.Element;
 export interface SidebarUserProps {
     name: string;
     /** Second line, e.g. the plan. */
@@ -35,6 +62,8 @@ export interface SidebarUserProps {
     avatarUrl?: string;
     /** Opens upward from the row, e.g. settings and log out. */
     menu?: ReactNode;
+    /** Passed to the menu's popover, e.g. `{ width: "trigger" }` to match the row's width, or a different `placement`. */
+    popoverProps?: Omit<PopoverProps, "children">;
 }
 /** The account row at the bottom: avatar, name, plan, and a menu. */
-export declare function SidebarUser({ name, detail, avatarUrl, menu }: SidebarUserProps): import("react").JSX.Element;
+export declare function SidebarUser({ name, detail, avatarUrl, menu, popoverProps }: SidebarUserProps): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-ui-kit",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "React UI kit for LLM chat and agentic apps: streaming messages, tool calls, approvals, themable with CSS variables.",
   "license": "MIT",
   "type": "module",
@@ -59,7 +59,8 @@
     "react-aria": "3.53.1",
     "react-aria-components": "1.22.1",
     "shiki": "4.6.0",
-    "streamdown": "2.7.1"
+    "streamdown": "2.7.1",
+    "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.4",