agentic-ui-kit 0.6.0 → 0.7.0

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/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

@@ -4,8 +4,10 @@ export interface SidebarProps {
     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 +17,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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-ui-kit",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "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",