@asharca/ui 0.2.1 → 0.2.2

package/README.md

@@ -1,14 +1,30 @@
 # @asharca/ui
 
+`ChatComposerToolbar` (`@asharca/ui/chat-composer-toolbar`) provides a unified
+tool menu and configurable, ordered shortcuts. Pass `tools`, `pinnedIds`, and
+`onPinnedIdsChange`; the consuming app owns actions and preference persistence.
+Use it in `ChatThread.composerTools` with `showAttachmentPicker={false}` to
+replace the default attachment button. The default remains unchanged.
+
 Reusable React controls, chat thread, conversation sidebar, and responsive shell extracted from ToolPlane. Routing, persistence, authentication, and API handlers stay in the host application.
 
 ## Install
 
 ```bash
-pnpm add @asharca/ui @assistant-ui/react@0.15.18
-# or: npm install @asharca/ui @assistant-ui/react@0.15.18
+pnpm add @asharca/ui
+# or: npm install @asharca/ui
+```
+
+pnpm installs missing peer dependencies by default. If automatic peer installation
+is disabled or your package manager leaves peers missing, install them explicitly:
+
+```bash
+pnpm add @asharca/ui @assistant-ui/react@0.15.18 react@^19 react-dom@^19 tailwindcss@^4
 ```
 
+For version conflicts, first check that your application and other dependencies
+support these versions. Installing the package does not configure your CSS build.
+
 The package uses React 19 and Tailwind CSS 4. `ChatThread` additionally accepts an assistant-ui `AssistantRuntime`, so transport and persistence stay in the host application.
 
 The runtime peer is pinned to `@assistant-ui/react@0.15.18`, paired with
@@ -55,9 +71,24 @@ export function Toolbar() {
 
 ## Modules
 
+- `@asharca/ui/workspace-sidebar` provides `WorkspaceSidebar`: controlled `collapsed`
+  and `mobileOpen` states, `items`, `activeId`, `onSelect`, brand/workspace content
+  and a `footer` slot. Items accept `icon`, `label`, `badge`, and `disabled`.
+  Widths use `--workspace-sidebar-width` and `--workspace-sidebar-collapsed-width`.
+  The mobile breakpoint is 850px. Hosts own routing, persistence, the open trigger,
+  scrim, focus trapping/restoration, and background inertness for modal drawers;
+  `mobileCloseRef` exposes the built-in close button for focus management.
+
 - `@asharca/ui/controls` — buttons and native form controls.
+- `@asharca/ui/controls` also provides `Switch`, native `Slider`, and an additive `outline` button variant.
+- `@asharca/ui/avatar` — `Avatar`, `AvatarImage`, and `AvatarFallback`.
+- `@asharca/ui/workspace-tab-bar` — ToolPlane's `WorkspaceTabBar` with host-controlled selection, closing, pinning, drag reordering, and new-window callbacks. The showcase wires these actions to its sidebar and pages; route state stays in the host application.
+- `@asharca/ui/accordion` — `Accordion`, `AccordionItem`, `AccordionTrigger`, and `AccordionContent`.
+- `@asharca/ui/navigation` also provides Radix-backed `Tabs`, `TabsList`, `TabsTrigger`, and `TabsContent` with keyboard navigation. Existing `Tab` / `TabList` exports are unchanged.
+- `@asharca/ui/feedback` also provides native `Progress` and decorative `Skeleton`. Give progress bars and sliders an accessible label; label switches via `htmlFor` or `aria-label`.
+- `@asharca/ui/overlays` also provides `DropdownMenu`, its trigger, portal, content, item, group, label, and separator.
 - `@asharca/ui/forms` — submit, confirm-submit, and copy actions.
-- `@asharca/ui/layout` — page, header, toolbar, section, panel, card, empty state, entity, and data table.
+- `@asharca/ui/layout` — page, header, toolbar, section, panel, card, empty state, entity, and data table. `DataTable` supports controlled multi-select with `selectable`, `rowIds`, `selectedRowIds`, and `onSelectedRowIdsChange`.
 - `@asharca/ui/navigation` — tabs, chips, and pagination layout.
 - `@asharca/ui/feedback` — badges, status, alerts, and spinners.
 - `@asharca/ui/dialog` and `@asharca/ui/overlays` — Dialog, Popover, Tooltip, Context Menu, and Hover Card primitives.
@@ -115,8 +146,28 @@ Build the runtime with AI SDK, assistant-ui local runtime, or another adapter in
 
 `ConversationSidebar` conversations may also provide optional `meta` content and a `deleting` state, so hosts can keep domain badges and show async delete progress without replacing the list layout.
 
+Pass `onConversationOrderChange(groupId, conversationIds)` to enable same-group
+conversation drag ordering and accessible move-up/down buttons. The callback
+returns the full group order, including items hidden by search. Hosts own the
+reordered state and persistence; selection is unchanged. Disabled/deleting
+conversations cannot be moved. Omitting the callback preserves the default list.
+
 Theme defaults are scoped to package component roots. Override them with HSL-channel variables such as `--toolplane-ui-background`, `--toolplane-ui-foreground`, and `--toolplane-ui-brand`. The older `--chat-ui-*` variables remain supported; `--chat-ui-sidebar-width` and `--chat-ui-right-panel-width` still control chat layout. Add a `.dark` class to an ancestor, or `data-theme="dark"` to a component, to use the dark defaults.
 
+## Component workbench
+
+Run `pnpm dev` and open the local URL printed by Vite. The standalone showcase
+includes interactive controls, forms, tables, overlays, light/dark themes, and
+a local chat demo (no AI service or credentials required). Demo data is kept in
+memory and resets on reload.
+
+`pnpm build:showcase` type-checks and builds the site into `showcase-dist/`.
+The showcase is development-only and is not included in the npm package.
+It includes nine interactive examples with copyable code snippets. Profile photos
+in `showcase/public/avatars` are demo assets from Unsplash (photo IDs
+`1494790108377-be9c29b29330`, `1506794778202-cad84cf45f1d`, and
+`1534528741775-53994a69daeb`); member names and emails are fictional.
+
 ## Build and pack
 
 ```bash

package/dist/Accordion.d.ts

@@ -0,0 +1,5 @@
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+export declare const Accordion: import("react").ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Accordion.js

@@ -0,0 +1,29 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+import { ChevronDown } from 'lucide-react';
+export const Accordion = AccordionPrimitive.Root;
+export const AccordionItem = forwardRef(function AccordionItem(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(AccordionPrimitive.Item, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "accordion-item", className: `ui-accordion-item ${className !== null && className !== void 0 ? className : ''}`.trim() }));
+});
+export const AccordionTrigger = forwardRef(function AccordionTrigger(_a, ref) {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return _jsx(AccordionPrimitive.Header, { className: "ui-accordion-header", children: _jsxs(AccordionPrimitive.Trigger, Object.assign({}, props, { ref: ref, className: `ui-accordion-trigger ${className !== null && className !== void 0 ? className : ''}`.trim(), children: [children, _jsx(ChevronDown, { "aria-hidden": "true", className: "ui-accordion-chevron" })] })) });
+});
+export const AccordionContent = forwardRef(function AccordionContent(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(AccordionPrimitive.Content, Object.assign({}, props, { ref: ref, className: `ui-accordion-content ${className !== null && className !== void 0 ? className : ''}`.trim() }));
+});

package/dist/Avatar.d.ts

@@ -0,0 +1,4 @@
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const AvatarImage: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+export declare const AvatarFallback: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/Avatar.js

@@ -0,0 +1,27 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+export const Avatar = forwardRef(function Avatar(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(AvatarPrimitive.Root, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "avatar", className: `ui-avatar ${className !== null && className !== void 0 ? className : ''}`.trim() }));
+});
+export const AvatarImage = forwardRef(function AvatarImage(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(AvatarPrimitive.Image, Object.assign({}, props, { ref: ref, className: `ui-avatar-image ${className !== null && className !== void 0 ? className : ''}`.trim() }));
+});
+export const AvatarFallback = forwardRef(function AvatarFallback(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(AvatarPrimitive.Fallback, Object.assign({}, props, { ref: ref, className: `ui-avatar-fallback ${className !== null && className !== void 0 ? className : ''}`.trim() }));
+});

package/dist/ChatComposerToolbar.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+export type ChatComposerTool = {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    description?: string;
+    disabled?: boolean;
+    pressed?: boolean;
+    onSelect: () => void;
+};
+export type ChatComposerToolbarLabels = {
+    open: string;
+    customize: string;
+    close: string;
+    reset: string;
+    moveUp: (label: string) => string;
+    moveDown: (label: string) => string;
+};
+export type ChatComposerToolbarProps = {
+    tools: readonly ChatComposerTool[];
+    pinnedIds: readonly string[];
+    onPinnedIdsChange: (ids: string[]) => void;
+    disabled?: boolean;
+    labels?: Partial<ChatComposerToolbarLabels>;
+};
+export declare function ChatComposerToolbar({ tools, pinnedIds, onPinnedIdsChange, disabled, labels }: ChatComposerToolbarProps): import("react").JSX.Element;

package/dist/ChatComposerToolbar.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ArrowDown, ArrowUp, Plus, RotateCcw, SlidersHorizontal, X } from 'lucide-react';
+import { Button, IconButton } from "./Controls.js";
+import { Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle } from "./Dialog.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger } from "./Overlays.js";
+export function ChatComposerToolbar({ tools, pinnedIds, onPinnedIdsChange, disabled, labels }) {
+    const [customizing, setCustomizing] = useState(false);
+    const copy = Object.assign({ open: 'Open tools', customize: 'Customize toolbar', close: 'Close', reset: 'Reset toolbar', moveUp: (label) => `Move ${label} up`, moveDown: (label) => `Move ${label} down` }, labels);
+    const pinned = [...new Set(pinnedIds)].flatMap((id) => { var _a; return (_a = tools.find((tool) => tool.id === id)) !== null && _a !== void 0 ? _a : []; });
+    const ids = pinned.map((tool) => tool.id);
+    const unpinned = tools.filter((tool) => !ids.includes(tool.id));
+    const move = (index, offset) => {
+        const next = [...ids];
+        const [id] = next.splice(index, 1);
+        next.splice(index + offset, 0, id);
+        onPinnedIdsChange(next);
+    };
+    return _jsxs(_Fragment, { children: [_jsxs("div", { className: "ui-composer-toolbar", "data-chat-ui": "composer-toolbar", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "ui-composer-tool", "aria-label": copy.open, title: copy.open, disabled: disabled, children: _jsx(Plus, { size: 18 }) }) }), _jsx(DropdownMenuPortal, { children: _jsxs(DropdownMenuContent, { side: "top", align: "start", sideOffset: 8, className: "ui-composer-menu", "aria-label": copy.open, children: [unpinned.map((tool) => _jsxs(DropdownMenuItem, { disabled: disabled || tool.disabled, onSelect: tool.onSelect, children: [tool.icon, _jsxs("span", { children: [tool.label, tool.description && _jsx("small", { children: tool.description })] })] }, tool.id)), unpinned.length > 0 && _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: disabled, onSelect: () => setCustomizing(true), children: [_jsx(SlidersHorizontal, { size: 16 }), copy.customize] })] }) })] }), _jsx("div", { className: "ui-composer-shortcuts", children: pinned.map((tool) => _jsx("button", { type: "button", className: "ui-composer-tool", "data-composer-shortcut": tool.id, disabled: disabled || tool.disabled, "aria-label": tool.label, title: tool.label, "aria-pressed": tool.pressed, onClick: tool.onSelect, children: tool.icon }, tool.id)) })] }), _jsx(Dialog, { open: customizing, onOpenChange: setCustomizing, children: _jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogContent, { className: "ui-composer-customize", "aria-describedby": undefined, children: [_jsxs("header", { children: [_jsx(DialogTitle, { children: copy.customize }), _jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { variant: "ghost", label: copy.close, icon: _jsx(X, { size: 16 }) }) })] }), _jsx("div", { children: [...pinned, ...unpinned].map((tool) => {
+                                        const index = ids.indexOf(tool.id);
+                                        return _jsxs("div", { className: "ui-composer-option", children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: index >= 0, disabled: disabled, onChange: (event) => onPinnedIdsChange(event.target.checked ? [...ids, tool.id] : ids.filter((id) => id !== tool.id)) }), tool.icon, _jsx("span", { children: tool.label })] }), index >= 0 && _jsxs(_Fragment, { children: [_jsx(IconButton, { variant: "ghost", label: copy.moveUp(tool.label), icon: _jsx(ArrowUp, { size: 14 }), disabled: disabled || index === 0, onClick: () => move(index, -1) }), _jsx(IconButton, { variant: "ghost", label: copy.moveDown(tool.label), icon: _jsx(ArrowDown, { size: 14 }), disabled: disabled || index === ids.length - 1, onClick: () => move(index, 1) })] })] }, tool.id);
+                                    }) }), _jsx("footer", { children: _jsxs(Button, { variant: "outline", disabled: disabled || !ids.length, onClick: () => onPinnedIdsChange([]), children: [_jsx(RotateCcw, { size: 14 }), copy.reset] }) })] })] }) })] });
+}

package/dist/ChatThread.d.ts

@@ -69,6 +69,7 @@ export type ChatThreadProps = {
     composerEnd?: ReactNode;
     composerStatus?: ReactNode;
     composerTools?: ReactNode;
+    showAttachmentPicker?: boolean;
     disabled?: boolean;
     emptyState?: ReactNode;
     error?: ReactNode;

package/dist/ChatThread.js

@@ -18,7 +18,7 @@ import { code } from '@streamdown/code';
 import { Popover } from 'radix-ui';
 import remarkBreaks from 'remark-breaks';
 import { defaultRemarkPlugins } from 'streamdown';
-import { Bot, Box, Brain, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, CircleAlert, CirclePause, Copy, Globe2, Loader2, Maximize2, Minimize2, Paperclip, Pencil, Plug, Plus, RefreshCw, Send, Split, UserRound, Wrench, X, } from 'lucide-react';
+import { Bot, Box, Brain, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, CircleAlert, CirclePause, Copy, ArrowUp, Globe2, Loader2, Maximize2, Minimize2, Paperclip, Pencil, Plug, Plus, RefreshCw, Split, UserRound, Wrench, X, } from 'lucide-react';
 import { Button, IconButton } from "./Controls.js";
 import { hasMermaidFence } from "./chat-markdown.js";
 const MermaidAssistantText = lazy(() => import("./MermaidAssistantText.js"));
@@ -259,7 +259,7 @@ function ComposerExpand({ expanded, onToggle }) {
     const label = expanded ? labels.restoreComposer : labels.expandComposer;
     return (_jsx("div", { className: "absolute right-px top-px z-10 size-8", children: _jsx("button", { type: "button", onClick: onToggle, "aria-label": label, title: label, "aria-pressed": expanded, className: "pointer-events-none absolute right-1 top-1 flex size-[22px] -translate-y-2.5 translate-x-2.5 rotate-[-8deg] scale-80 items-center justify-center rounded-full bg-transparent text-muted-foreground opacity-0 transition-all duration-300 hover:bg-muted hover:text-foreground focus-visible:pointer-events-auto focus-visible:translate-x-0 focus-visible:translate-y-0 focus-visible:rotate-0 focus-visible:scale-100 focus-visible:opacity-100 group-focus-within/composer:pointer-events-auto group-focus-within/composer:translate-x-0 group-focus-within/composer:translate-y-0 group-focus-within/composer:rotate-0 group-focus-within/composer:scale-100 group-focus-within/composer:opacity-100 group-hover/composer:pointer-events-auto group-hover/composer:translate-x-0 group-hover/composer:translate-y-0 group-hover/composer:rotate-0 group-hover/composer:scale-100 group-hover/composer:opacity-100", children: _jsx(Icon, { className: "size-3" }) }) }));
 }
-function ChatThreadContent({ assistantName, allowAttachments, allowEdit, allowRegenerate, branchNavigation, busy, className, composerEnd, composerStatus, composerTools, components, disabled, emptyState, error, onBranchSelect, onBranchStart, onRegenerateMessage, }) {
+function ChatThreadContent({ assistantName, allowAttachments, allowEdit, allowRegenerate, branchNavigation, busy, className, composerEnd, composerStatus, composerTools, showAttachmentPicker = true, components, disabled, emptyState, error, onBranchSelect, onBranchStart, onRegenerateMessage, }) {
     const labels = useLabels();
     const [composerRows, setComposerRows] = useState(2);
     const composerInputRef = useRef(null);
@@ -276,7 +276,7 @@ function ChatThreadContent({ assistantName, allowAttachments, allowEdit, allowRe
     const blocked = disabled || busy;
     return (_jsxs(ThreadPrimitive.Root, { "data-chat-ui": "chat-thread", className: cx('flex min-h-0 flex-1 flex-col', className), children: [_jsxs(ThreadPrimitive.Viewport, { className: "relative flex min-h-0 flex-1 flex-col overflow-y-auto bg-background", children: [_jsxs("div", { className: "flex-1 py-1.5", children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { className: "flex min-h-full items-center justify-center px-6 pb-24", children: emptyState !== null && emptyState !== void 0 ? emptyState : (_jsxs("div", { className: "max-w-md text-center", children: [_jsx("div", { className: "mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(Bot, { className: "size-6" }) }), _jsx("h3", { className: "text-lg font-medium text-foreground", children: labels.startConversation })] })) }) }), _jsx("div", { className: "mx-auto flex w-full max-w-[53rem] flex-col gap-0 px-6", children: _jsx(ThreadPrimitive.Messages, { children: ({ message }) => message.role === 'user'
                                         ? (_jsx(UserMessage, { allowEdit: allowEdit, branch: branchByMessageId.get(message.id), busy: blocked, components: components, messageId: message.id, onBranchSelect: onBranchSelect }))
-                                        : (_jsx(AssistantMessage, { agentName: assistantName, allowRegenerate: allowRegenerate, branch: branchByMessageId.get(message.id), busy: blocked, components: components, messageId: message.id, onBranchSelect: onBranchSelect, onBranchStart: onBranchStart, onRegenerateMessage: onRegenerateMessage })) }) })] }), _jsx(ThreadPrimitive.ScrollToBottom, { "aria-label": labels.scrollToLatestMessage, title: labels.scrollToLatestMessage, className: "sticky bottom-3 z-10 mx-auto mb-3 flex size-9 shrink-0 items-center justify-center rounded-full border border-border bg-card text-muted-foreground hover:text-foreground disabled:invisible", children: _jsx(ChevronDown, { className: "size-4" }) })] }), _jsx("div", { className: "shrink-0 bg-background pb-3", children: _jsxs("div", { className: "mx-auto w-full max-w-[53rem] px-6", children: [error ? (_jsx("div", { role: "alert", className: "mb-2 rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2 text-sm text-red-700 dark:text-red-300", children: error })) : null, _jsx(ComposerPrimitive.Root, { "data-ui": "chat.composer", className: "group/composer relative rounded-[20px] border-[0.5px] border-border bg-card pt-2 shadow-sm transition-all duration-200 ease-in-out hover:border-foreground/25 focus-within:border-foreground/25", children: _jsx(ComposerPrimitive.AttachmentDropzone, { asChild: true, children: _jsxs("div", { className: "contents", children: [_jsx(ComposerExpand, { expanded: composerExpanded, onToggle: toggleComposer }), _jsx("div", { className: "flex flex-wrap gap-1.5 px-[15px] empty:hidden", children: _jsx(ComposerPrimitive.Attachments, { children: ({ attachment }) => _jsx(ComposerAttachment, { attachment: attachment }) }) }), _jsx(ComposerPrimitive.Input, { ref: composerInputRef, placeholder: labels.messagePlaceholder, disabled: blocked, rows: 2, minRows: composerRows, submitMode: "enter", className: cx('block min-h-[46px] w-full resize-none overflow-y-auto bg-transparent pb-0 pl-[15px] pr-11 pt-1.5 text-sm leading-[1.4] text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-60 [&::-webkit-scrollbar]:w-[3px]', composerExpanded ? 'max-h-[max(220px,50vh)]' : 'max-h-[max(220px,40vh)]') }), _jsxs("div", { className: "relative z-[2] flex min-h-10 items-center justify-between gap-4 px-2 py-[5px]", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(AttachmentPicker, { disabled: blocked, enabled: allowAttachments }), composerTools, composerStatus ? _jsx("div", { className: "min-w-0 text-[11px] text-muted-foreground", children: composerStatus }) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [composerEnd, _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { disabled: blocked || attachmentUploading, "aria-label": labels.send, title: attachmentUploading ? labels.processing : labels.send, className: "mr-0.5 mt-px flex size-[30px] shrink-0 items-center justify-center text-brand transition-all duration-200 disabled:cursor-not-allowed disabled:text-muted-foreground/50", children: _jsx(Send, { className: "size-[22px]" }) }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { "aria-label": labels.stop, title: labels.stop, className: "flex size-[30px] shrink-0 items-center justify-center rounded-full text-destructive hover:bg-muted", children: _jsx(CirclePause, { className: "size-5" }) }) })] })] })] }) }) })] }) })] }));
+                                        : (_jsx(AssistantMessage, { agentName: assistantName, allowRegenerate: allowRegenerate, branch: branchByMessageId.get(message.id), busy: blocked, components: components, messageId: message.id, onBranchSelect: onBranchSelect, onBranchStart: onBranchStart, onRegenerateMessage: onRegenerateMessage })) }) })] }), _jsx(ThreadPrimitive.ScrollToBottom, { "aria-label": labels.scrollToLatestMessage, title: labels.scrollToLatestMessage, className: "sticky bottom-3 z-10 mx-auto mb-3 flex size-9 shrink-0 items-center justify-center rounded-full border border-border bg-card text-muted-foreground hover:text-foreground disabled:invisible", children: _jsx(ChevronDown, { className: "size-4" }) })] }), _jsx("div", { className: "shrink-0 bg-background pb-3", children: _jsxs("div", { className: "mx-auto w-full max-w-[53rem] px-6", children: [error ? (_jsx("div", { role: "alert", className: "mb-2 rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2 text-sm text-red-700 dark:text-red-300", children: error })) : null, _jsx(ComposerPrimitive.Root, { "data-ui": "chat.composer", className: "group/composer relative rounded-[20px] border-[0.5px] border-border bg-card pt-2 shadow-sm transition-all duration-200 ease-in-out hover:border-foreground/25 focus-within:border-foreground/25", children: _jsx(ComposerPrimitive.AttachmentDropzone, { asChild: true, children: _jsxs("div", { className: "contents", children: [_jsx(ComposerExpand, { expanded: composerExpanded, onToggle: toggleComposer }), _jsx("div", { className: "flex flex-wrap gap-1.5 px-[15px] empty:hidden", children: _jsx(ComposerPrimitive.Attachments, { children: ({ attachment }) => _jsx(ComposerAttachment, { attachment: attachment }) }) }), _jsx(ComposerPrimitive.Input, { ref: composerInputRef, placeholder: labels.messagePlaceholder, disabled: blocked, rows: 2, minRows: composerRows, submitMode: "enter", className: cx('block min-h-[46px] w-full resize-none overflow-y-auto bg-transparent pb-0 pl-[15px] pr-11 pt-1.5 text-sm leading-[1.4] text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-60 [&::-webkit-scrollbar]:w-[3px]', composerExpanded ? 'max-h-[max(220px,50vh)]' : 'max-h-[max(220px,40vh)]') }), _jsxs("div", { className: "relative z-[2] flex min-h-10 items-center justify-between gap-4 px-2 py-[5px]", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [showAttachmentPicker && _jsx(AttachmentPicker, { disabled: blocked, enabled: allowAttachments }), composerTools, composerStatus ? _jsx("div", { className: "min-w-0 text-[11px] text-muted-foreground", children: composerStatus }) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [composerEnd, _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { disabled: blocked || attachmentUploading, "aria-label": labels.send, title: attachmentUploading ? labels.processing : labels.send, className: "mr-0.5 mt-px flex size-[30px] shrink-0 items-center justify-center rounded-full bg-brand text-brand-foreground transition-all duration-200 hover:bg-brand/85 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground/50", children: _jsx(ArrowUp, { className: "size-[17px]", strokeWidth: 2.5 }) }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { "aria-label": labels.stop, title: labels.stop, className: "flex size-[30px] shrink-0 items-center justify-center rounded-full text-destructive hover:bg-muted", children: _jsx(CirclePause, { className: "size-5" }) }) })] })] })] }) }) })] }) })] }));
 }
 export function ChatThread(_a) {
     var { runtime, assistantName, allowAttachments = false, allowEdit = false, allowRegenerate = true, branchNavigation = [], busy = false, disabled = false, labels: labelOverrides, transformUserText = (text) => text } = _a, props = __rest(_a, ["runtime", "assistantName", "allowAttachments", "allowEdit", "allowRegenerate", "branchNavigation", "busy", "disabled", "labels", "transformUserText"]);

package/dist/Controls.d.ts

@@ -1,5 +1,6 @@
 import { type ButtonHTMLAttributes, type ComponentPropsWithoutRef, type InputHTMLAttributes, type ReactNode, type SelectHTMLAttributes, type TextareaHTMLAttributes } from 'react';
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-secondary';
+import { Switch as SwitchPrimitive } from 'radix-ui';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'danger-secondary';
 export type ControlSize = 'sm' | 'md' | 'lg';
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
@@ -44,6 +45,10 @@ export declare const NativeSelect: import("react").ForwardRefExoticComponent<Sel
     controlSize?: ControlSize;
     wrapperClassName?: string;
 } & import("react").RefAttributes<HTMLSelectElement>>;
+export type SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>;
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
 export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
 export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
 export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
@@ -59,7 +64,7 @@ export type SearchInputProps = Omit<InputProps, 'defaultValue' | 'type' | 'value
     value: string;
     wrapperClassName?: string;
 };
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "type" | "value" | "defaultValue"> & {
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "type" | "defaultValue" | "value"> & {
     clearLabel?: string;
     label: string;
     onClear: () => void;

package/dist/Controls.js

@@ -13,13 +13,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, } from 'react';
 import { ChevronDown, Loader2, Search, X } from 'lucide-react';
-import { Slot } from 'radix-ui';
+import { Slot, Switch as SwitchPrimitive } from 'radix-ui';
 function cx(...classes) {
     return classes.filter(Boolean).join(' ');
 }
 const buttonVariants = {
     primary: 'ui-button-primary',
     secondary: 'ui-button-secondary',
+    outline: 'ui-button-secondary ui-button-outline',
     ghost: 'ui-button-ghost',
     danger: 'ui-button-primary ui-button-danger',
     'danger-secondary': 'ui-button-secondary ui-button-danger-secondary',
@@ -63,6 +64,14 @@ export const Select = forwardRef(function Select(_a, ref) {
     return (_jsxs("span", { "data-toolplane-ui": "select", className: cx('ui-select', wrapperClassName), children: [_jsx("select", Object.assign({}, props, { ref: ref, disabled: disabled, className: cx('ui-input ui-select-control', controlSize === 'sm' && 'ui-input-sm', controlSize === 'lg' && 'ui-input-lg', className), children: children })), _jsx(ChevronDown, { "aria-hidden": "true", className: cx('ui-select-chevron', disabled && 'opacity-40') })] }));
 });
 export const NativeSelect = Select;
+export const Switch = forwardRef(function Switch(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(SwitchPrimitive.Root, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "switch", className: cx('ui-switch', className), children: _jsx(SwitchPrimitive.Thumb, { className: "ui-switch-thumb" }) })));
+});
+export const Slider = forwardRef(function Slider(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx("input", Object.assign({}, props, { ref: ref, type: "range", "data-toolplane-ui": "slider", className: cx('ui-slider', className) }));
+});
 export const Checkbox = forwardRef(function Checkbox(_a, ref) {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (_jsx("input", Object.assign({}, props, { ref: ref, type: "checkbox", "data-toolplane-ui": "checkbox", className: cx('ui-checkbox', className) })));

package/dist/ConversationSidebar.d.ts

@@ -25,6 +25,8 @@ export type ConversationSidebarLabels = {
     deleteConversation: string;
     showConversations: string;
     hideConversations: string;
+    moveUp?: string;
+    moveDown?: string;
 };
 export declare const conversationSidebarDefaultLabels: ConversationSidebarLabels;
 export type ConversationSidebarProps = {
@@ -33,6 +35,7 @@ export type ConversationSidebarProps = {
     activeConversationId?: string | null;
     labels?: Partial<ConversationSidebarLabels>;
     className?: string;
+    onConversationOrderChange?: (groupId: string, conversationIds: string[]) => void;
     onSelectGroup?: (group: ConversationSidebarGroup) => void;
     onSelectConversation: (conversation: ConversationSidebarConversation, group: ConversationSidebarGroup) => void;
     onCreateGroup?: () => void;
@@ -40,4 +43,4 @@ export type ConversationSidebarProps = {
     onRenameConversation?: (conversation: ConversationSidebarConversation, group: ConversationSidebarGroup) => void;
     onDeleteConversation?: (conversation: ConversationSidebarConversation, group: ConversationSidebarGroup) => void;
 };
-export declare function ConversationSidebar({ groups, activeGroupId, activeConversationId, labels: labelsOverride, className, onSelectGroup, onSelectConversation, onCreateGroup, onCreateConversation, onRenameConversation, onDeleteConversation, }: ConversationSidebarProps): import("react").JSX.Element;
+export declare function ConversationSidebar({ groups, activeGroupId, activeConversationId, labels: labelsOverride, className, onSelectGroup, onSelectConversation, onCreateGroup, onCreateConversation, onRenameConversation, onDeleteConversation, onConversationOrderChange, }: ConversationSidebarProps): import("react").JSX.Element;

package/dist/ConversationSidebar.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useId, useMemo, useState } from 'react';
-import { Bot, ChevronRight, MessageSquare, Pencil, Plus, Trash2, } from 'lucide-react';
+import { useId, useMemo, useRef, useState } from 'react';
+import { Bot, ChevronRight, Pencil, Plus, Trash2, } from 'lucide-react';
 import { IconButton, SearchInput } from "./Controls.js";
 import { SidebarActionRail } from "./Sidebar.js";
 export const conversationSidebarDefaultLabels = {
@@ -18,14 +18,32 @@ export const conversationSidebarDefaultLabels = {
     deleteConversation: 'Delete conversation',
     showConversations: 'Show conversations',
     hideConversations: 'Hide conversations',
+    moveUp: 'Move up',
+    moveDown: 'Move down',
 };
 function cx(...classes) {
     return classes.filter(Boolean).join(' ');
 }
-export function ConversationSidebar({ groups, activeGroupId, activeConversationId, labels: labelsOverride, className, onSelectGroup, onSelectConversation, onCreateGroup, onCreateConversation, onRenameConversation, onDeleteConversation, }) {
+export function ConversationSidebar({ groups, activeGroupId, activeConversationId, labels: labelsOverride, className, onSelectGroup, onSelectConversation, onCreateGroup, onCreateConversation, onRenameConversation, onDeleteConversation, onConversationOrderChange, }) {
     const labels = Object.assign(Object.assign({}, conversationSidebarDefaultLabels), labelsOverride);
     const controlsId = useId();
     const [query, setQuery] = useState('');
+    const dragging = useRef(null);
+    const [dropRow, setDropRow] = useState(null);
+    function edgeFor(event) {
+        const rect = event.currentTarget.getBoundingClientRect();
+        return event.clientY < rect.top + rect.height / 2 ? 'before' : 'after';
+    }
+    function move(sourceId, targetId, group, edge) {
+        const source = group.conversations.find((item) => item.id === sourceId);
+        const target = group.conversations.find((item) => item.id === targetId);
+        if (!onConversationOrderChange || !source || !target || sourceId === targetId || source.disabled || source.deleting || target.disabled || target.deleting)
+            return;
+        const ids = group.conversations.map((item) => item.id).filter((id) => id !== sourceId);
+        ids.splice(ids.indexOf(targetId) + (edge === 'after' ? 1 : 0), 0, sourceId);
+        if (ids.some((id, index) => group.conversations[index].id !== id))
+            onConversationOrderChange(group.id, ids);
+    }
     const [collapsedGroupIds, setCollapsedGroupIds] = useState(() => new Set());
     const needle = query.trim().toLocaleLowerCase();
     const visibleGroups = useMemo(() => groups.flatMap((group) => {
@@ -59,9 +77,48 @@ export function ConversationSidebar({ groups, activeGroupId, activeConversationI
                                             const title = conversation.title || labels.untitledConversation;
                                             const selected = conversation.id === activeConversationId;
                                             const hasActions = Boolean(onRenameConversation || onDeleteConversation);
-                                            return (_jsx("li", { className: "relative py-0.5", "data-chat-ui": "sidebar-conversation", children: _jsxs("div", { className: cx('group group/sidebar-conversation flex h-8 min-w-0 items-center gap-1.5 rounded-lg px-2 transition-colors', selected
+                                            const index = group.conversations.findIndex((item) => item.id === conversation.id);
+                                            const canMove = Boolean(onConversationOrderChange && !conversation.disabled && !conversation.deleting);
+                                            return (_jsx("li", { className: "relative py-0.5", "data-chat-ui": "sidebar-conversation", "data-conversation-id": conversation.id, "data-drop-edge": (dropRow === null || dropRow === void 0 ? void 0 : dropRow.id) === conversation.id && dropRow.groupId === group.id ? dropRow.edge : undefined, draggable: canMove, onDragStart: (event) => {
+                                                    if (!canMove) {
+                                                        event.preventDefault();
+                                                        return;
+                                                    }
+                                                    event.stopPropagation();
+                                                    dragging.current = { id: conversation.id, groupId: group.id };
+                                                    event.dataTransfer.effectAllowed = 'move';
+                                                    event.dataTransfer.setData('text/plain', conversation.id);
+                                                }, onDragEnd: () => { dragging.current = null; setDropRow(null); }, onDragOver: (event) => {
+                                                    var _a;
+                                                    if (!canMove || ((_a = dragging.current) === null || _a === void 0 ? void 0 : _a.groupId) !== group.id || dragging.current.id === conversation.id)
+                                                        return;
+                                                    event.preventDefault();
+                                                    event.stopPropagation();
+                                                    event.dataTransfer.dropEffect = 'move';
+                                                    setDropRow({ id: conversation.id, groupId: group.id, edge: edgeFor(event) });
+                                                }, onDragLeave: (event) => {
+                                                    if (!event.currentTarget.contains(event.relatedTarget))
+                                                        setDropRow(null);
+                                                }, onDrop: (event) => {
+                                                    event.preventDefault();
+                                                    event.stopPropagation();
+                                                    const source = dragging.current;
+                                                    dragging.current = null;
+                                                    setDropRow(null);
+                                                    if ((source === null || source === void 0 ? void 0 : source.groupId) === group.id && canMove)
+                                                        move(source.id, conversation.id, group, edgeFor(event));
+                                                }, children: _jsxs("div", { className: cx('group group/sidebar-conversation flex h-8 min-w-0 items-center gap-1.5 rounded-lg px-2 transition-colors', selected
                                                         ? 'bg-muted font-medium text-foreground'
-                                                        : 'text-foreground/75 hover:bg-muted/60 hover:text-foreground'), children: [_jsxs("button", { type: "button", disabled: conversation.disabled, onClick: () => onSelectConversation(conversation, group), "aria-current": selected ? 'page' : undefined, title: title, className: "flex h-full min-w-0 flex-1 items-center gap-1.5 text-left text-[13px] disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx(MessageSquare, { className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: title }), conversation.meta ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0", children: conversation.meta })) : null] }), hasActions ? (_jsxs(SidebarActionRail, { active: conversation.deleting, children: [onRenameConversation ? (_jsx(IconButton, { icon: _jsx(Pencil, { className: "size-3" }), label: `${labels.renameConversation}: ${title}`, size: "sm", variant: "ghost", onClick: () => onRenameConversation(conversation, group), title: labels.renameConversation, className: "min-h-6 w-6 rounded-md text-muted-foreground hover:bg-background hover:text-foreground" })) : null, onDeleteConversation ? (_jsx(IconButton, { icon: _jsx(Trash2, { className: "size-3" }), label: `${labels.deleteConversation}: ${title}`, size: "sm", variant: "ghost", loading: conversation.deleting, disabled: conversation.deleting, onClick: () => onDeleteConversation(conversation, group), title: labels.deleteConversation, className: "min-h-6 w-6 rounded-md text-muted-foreground hover:bg-background hover:text-destructive" })) : null] })) : null] }) }, conversation.id));
+                                                        : 'text-foreground/75 hover:bg-muted/60 hover:text-foreground'), children: [_jsxs("button", { type: "button", disabled: conversation.disabled, onKeyDown: (event) => {
+                                                                if (!event.altKey || !['ArrowUp', 'ArrowDown'].includes(event.key) || !canMove)
+                                                                    return;
+                                                                const target = group.conversations[index + (event.key === 'ArrowUp' ? -1 : 1)];
+                                                                if (!target || target.disabled || target.deleting)
+                                                                    return;
+                                                                event.preventDefault();
+                                                                move(conversation.id, target.id, group, event.key === 'ArrowUp' ? 'before' : 'after');
+                                                            }, onClick: () => { if (!dragging.current)
+                                                                onSelectConversation(conversation, group); }, "aria-current": selected ? 'page' : undefined, title: title, className: "flex h-full min-w-0 flex-1 items-center gap-1.5 text-left text-[13px] disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: title }), conversation.meta ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0", children: conversation.meta })) : null] }), hasActions ? (_jsxs(SidebarActionRail, { active: conversation.deleting, children: [onRenameConversation ? (_jsx(IconButton, { icon: _jsx(Pencil, { className: "size-3" }), label: `${labels.renameConversation}: ${title}`, size: "sm", variant: "ghost", onClick: () => onRenameConversation(conversation, group), title: labels.renameConversation, className: "min-h-6 w-6 rounded-md text-muted-foreground hover:bg-background hover:text-foreground" })) : null, onDeleteConversation ? (_jsx(IconButton, { icon: _jsx(Trash2, { className: "size-3" }), label: `${labels.deleteConversation}: ${title}`, size: "sm", variant: "ghost", loading: conversation.deleting, disabled: conversation.deleting, onClick: () => onDeleteConversation(conversation, group), title: labels.deleteConversation, className: "min-h-6 w-6 rounded-md text-muted-foreground hover:bg-background hover:text-destructive" })) : null] })) : null] }) }, conversation.id));
                                         }) : (_jsx("li", { className: "flex h-8 items-center px-2 text-xs text-muted-foreground", children: labels.noConversations })) })) : null] }, group.id));
                         }) }), !visibleGroups.length ? (_jsx("p", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: needle ? labels.noResults : labels.noGroups })) : null] })] }));
 }

package/dist/Feedback.d.ts

@@ -1,4 +1,8 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type ProgressProps = ComponentPropsWithoutRef<'progress'>;
+export declare function Progress({ className, max, ...props }: ProgressProps): import("react").JSX.Element;
+export type SkeletonProps = ComponentPropsWithoutRef<'div'>;
+export declare function Skeleton({ className, ...props }: SkeletonProps): import("react").JSX.Element;
 export type FeedbackTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
 export type BadgeProps = ComponentPropsWithoutRef<'span'> & {
     tone?: FeedbackTone;

package/dist/Feedback.js

@@ -14,6 +14,14 @@ import { Loader2 } from 'lucide-react';
 function cx(...classes) {
     return classes.filter(Boolean).join(' ');
 }
+export function Progress(_a) {
+    var { className, max = 100 } = _a, props = __rest(_a, ["className", "max"]);
+    return _jsx("progress", Object.assign({}, props, { max: max, "data-toolplane-ui": "progress", className: cx('ui-progress', className) }));
+}
+export function Skeleton(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx("div", Object.assign({}, props, { "aria-hidden": "true", "data-toolplane-ui": "skeleton", className: cx('ui-skeleton', className) }));
+}
 const badgeTones = {
     neutral: 'bg-muted text-muted-foreground',
     brand: 'bg-brand-soft text-accent-foreground',

package/dist/Layout.d.ts

@@ -55,9 +55,14 @@ export type DataTableProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> &
     label?: string;
     minWidth?: string;
     panel?: boolean;
+    rowIds?: readonly string[];
+    rowLabels?: readonly ReactNode[];
+    selectedRowIds?: readonly string[];
+    onSelectedRowIdsChange?: (rowIds: string[]) => void;
+    selectable?: boolean;
     tableClassName?: string;
 };
-export declare function DataTable({ children, className, headers, label, minWidth, panel, tableClassName, ...props }: DataTableProps): import("react").JSX.Element;
+export declare function DataTable({ children, className, headers, label, minWidth, panel, rowIds, rowLabels, selectedRowIds, onSelectedRowIdsChange, selectable, tableClassName, ...props }: DataTableProps): import("react").JSX.Element;
 export type EntityProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
     description?: ReactNode;
     initials?: string;

package/dist/Layout.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useEffect, useRef } from 'react';
 function cx(...classes) {
     return classes.filter(Boolean).join(' ');
 }
@@ -39,9 +40,49 @@ export function EmptyState(_a) {
     var { actions, children, className, description, icon: IconComponent, title } = _a, props = __rest(_a, ["actions", "children", "className", "description", "icon", "title"]);
     return (_jsxs("div", Object.assign({}, props, { "data-toolplane-ui": "empty-state", className: cx('ui-empty', className), children: [IconComponent ? _jsx(IconComponent, { className: "mb-3 size-8 text-muted-foreground" }) : null, title ? _jsx("h2", { className: "text-lg font-semibold text-foreground", children: title }) : null, description ? (_jsx("div", { className: cx('text-sm text-muted-foreground', Boolean(title) && 'mt-1'), children: description })) : null, children ? _jsx("div", { className: "mt-6 w-full", children: children }) : null, actions ? _jsx("div", { className: "mt-5 flex flex-wrap items-center justify-center gap-2", children: actions }) : null] })));
 }
+function SelectionCheckbox(_a) {
+    var { indeterminate = false } = _a, props = __rest(_a, ["indeterminate"]);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current)
+            ref.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    return _jsx("input", Object.assign({}, props, { ref: ref, type: "checkbox", className: cx('ui-checkbox ui-table__checkbox', props.className) }));
+}
 export function DataTable(_a) {
-    var { children, className, headers, label, minWidth = '40rem', panel = true, tableClassName } = _a, props = __rest(_a, ["children", "className", "headers", "label", "minWidth", "panel", "tableClassName"]);
-    return (_jsx("div", Object.assign({}, props, { "data-toolplane-ui": "data-table", role: label ? 'region' : undefined, "aria-label": label, tabIndex: label ? 0 : undefined, className: cx(panel && 'ui-panel', 'relative overflow-x-auto overscroll-x-contain focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring', className), children: _jsxs("table", { className: cx('ui-table', tableClassName), style: { minWidth }, children: [_jsx("thead", { children: _jsx("tr", { children: headers.map((header, index) => (_jsx("th", { scope: "col", colSpan: header.colSpan, className: cx('px-4 py-3 font-medium', header.align === 'right' && 'text-right', header.className), children: header.label }, index))) }) }), _jsx("tbody", { className: "divide-y divide-border", children: children })] }) })));
+    var { children, className, headers, label, minWidth = '40rem', panel = true, rowIds, rowLabels, selectedRowIds = [], onSelectedRowIdsChange, selectable = false, tableClassName } = _a, props = __rest(_a, ["children", "className", "headers", "label", "minWidth", "panel", "rowIds", "rowLabels", "selectedRowIds", "onSelectedRowIdsChange", "selectable", "tableClassName"]);
+    const childList = Children.toArray(children);
+    const bodyChild = childList.length === 1 && isValidElement(childList[0]) && childList[0].type === 'tbody'
+        ? childList[0]
+        : undefined;
+    const rows = bodyChild ? bodyChild.props.children : children;
+    const selectableRows = selectable ? Children.toArray(rows).flatMap((child) => {
+        if (!isValidElement(child) || child.type !== 'tr')
+            return [];
+        return [child];
+    }) : [];
+    const ids = selectableRows.map((_, index) => { var _a; return (_a = rowIds === null || rowIds === void 0 ? void 0 : rowIds[index]) !== null && _a !== void 0 ? _a : String(index); });
+    const selected = new Set(selectedRowIds);
+    const allSelected = ids.length > 0 && ids.every((id) => selected.has(id));
+    const someSelected = ids.some((id) => selected.has(id));
+    const toggle = (id) => onSelectedRowIdsChange === null || onSelectedRowIdsChange === void 0 ? void 0 : onSelectedRowIdsChange(selected.has(id) ? selectedRowIds.filter((value) => value !== id) : [...selectedRowIds, id]);
+    const toggleAll = () => onSelectedRowIdsChange === null || onSelectedRowIdsChange === void 0 ? void 0 : onSelectedRowIdsChange(allSelected ? selectedRowIds.filter((id) => !ids.includes(id)) : [...new Set([...selectedRowIds, ...ids])]);
+    let rowIndex = 0;
+    const tableChildren = selectable
+        ? Children.map(rows, (child) => {
+            var _a;
+            if (!isValidElement(child) || child.type !== 'tr')
+                return child;
+            const row = child;
+            const id = ids[rowIndex];
+            const index = rowIndex++;
+            return cloneElement(row, {}, [
+                _jsx("td", { className: "ui-table__selection", children: _jsx(SelectionCheckbox, { checked: selected.has(id), onChange: () => toggle(id), "aria-label": `选择${(_a = rowLabels === null || rowLabels === void 0 ? void 0 : rowLabels[index]) !== null && _a !== void 0 ? _a : `第 ${index + 1} 行`}` }) }, "selection"),
+                ...Children.toArray(row.props.children),
+            ]);
+        })
+        : rows;
+    return (_jsx("div", Object.assign({}, props, { "data-toolplane-ui": "data-table", role: label ? 'region' : undefined, "aria-label": label, tabIndex: label ? 0 : undefined, className: cx(panel && 'ui-panel', 'relative overflow-x-auto overscroll-x-contain focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring', className), children: _jsxs("table", { className: cx('ui-table', tableClassName), style: { minWidth }, children: [_jsx("thead", { children: _jsxs("tr", { children: [selectable ? (_jsx("th", { scope: "col", className: "ui-table__selection", children: _jsx(SelectionCheckbox, { checked: allSelected, indeterminate: !allSelected && someSelected, onChange: toggleAll, "aria-label": "\u5168\u9009\u884C" }) })) : null, headers.map((header, index) => (_jsx("th", { scope: "col", colSpan: header.colSpan, className: cx('px-4 py-3 font-medium', header.align === 'right' && 'text-right', header.className), children: header.label }, index)))] }) }), _jsx("tbody", { className: cx('divide-y divide-border', bodyChild === null || bodyChild === void 0 ? void 0 : bodyChild.props.className), children: tableChildren })] }) })));
 }
 export function Entity(_a) {
     var { className, description, initials, mono = false, title } = _a, props = __rest(_a, ["className", "description", "initials", "mono", "title"]);

package/dist/Navigation.d.ts

@@ -1,4 +1,9 @@
+import { Tabs as TabsPrimitive } from 'radix-ui';
 import type { ButtonHTMLAttributes, ComponentPropsWithoutRef, ReactNode } from 'react';
+export declare const Tabs: import("react").ForwardRefExoticComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsList: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export type ChipProps = ComponentPropsWithoutRef<'span'> & {
     active?: boolean;
     asChild?: boolean;

package/dist/Navigation.js

@@ -11,10 +11,24 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Slot } from 'radix-ui';
+import { Slot, Tabs as TabsPrimitive } from 'radix-ui';
+import { forwardRef } from 'react';
 function cx(...classes) {
     return classes.filter(Boolean).join(' ');
 }
+export const Tabs = TabsPrimitive.Root;
+export const TabsList = forwardRef(function TabsList(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(TabsPrimitive.List, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "tabs-list", className: cx('ui-tabs-list', className) }));
+});
+export const TabsTrigger = forwardRef(function TabsTrigger(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(TabsPrimitive.Trigger, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "tabs-trigger", className: cx('ui-tabs-trigger', className) }));
+});
+export const TabsContent = forwardRef(function TabsContent(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(TabsPrimitive.Content, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "tabs-content", className: cx('ui-tabs-content', className) }));
+});
 export function Chip(_a) {
     var { active = false, asChild = false, className } = _a, props = __rest(_a, ["active", "asChild", "className"]);
     const Component = asChild ? Slot.Root : 'span';

package/dist/Overlays.d.ts

@@ -1,4 +1,12 @@
-import { ContextMenu as ContextMenuPrimitive, HoverCard as HoverCardPrimitive, Popover as PopoverPrimitive, Tooltip as TooltipPrimitive } from 'radix-ui';
+import { ContextMenu as ContextMenuPrimitive, DropdownMenu as DropdownMenuPrimitive, HoverCard as HoverCardPrimitive, Popover as PopoverPrimitive, Tooltip as TooltipPrimitive } from 'radix-ui';
+export declare const DropdownMenu: import("react").FC<DropdownMenuPrimitive.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuPortal: import("react").FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuContent: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuLabel: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Popover: import("react").FC<PopoverPrimitive.PopoverProps>;
 export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const PopoverPortal: import("react").FC<PopoverPrimitive.PopoverPortalProps>;

package/dist/Overlays.js

@@ -12,7 +12,27 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
-import { ContextMenu as ContextMenuPrimitive, HoverCard as HoverCardPrimitive, Popover as PopoverPrimitive, Tooltip as TooltipPrimitive, } from 'radix-ui';
+import { ContextMenu as ContextMenuPrimitive, DropdownMenu as DropdownMenuPrimitive, HoverCard as HoverCardPrimitive, Popover as PopoverPrimitive, Tooltip as TooltipPrimitive, } from 'radix-ui';
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuContent = forwardRef(function DropdownMenuContent(_a, ref) {
+    var { className, sideOffset = 6, collisionPadding = 8 } = _a, props = __rest(_a, ["className", "sideOffset", "collisionPadding"]);
+    return _jsx(DropdownMenuPrimitive.Content, Object.assign({}, props, { ref: ref, sideOffset: sideOffset, collisionPadding: collisionPadding, "data-toolplane-ui": "dropdown-menu", className: `ui-dropdown-menu ${className !== null && className !== void 0 ? className : ''}`.trim() }));
+});
+export const DropdownMenuItem = forwardRef(function DropdownMenuItem(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(DropdownMenuPrimitive.Item, Object.assign({}, props, { ref: ref, className: `ui-dropdown-item ${className !== null && className !== void 0 ? className : ''}`.trim() }));
+});
+export const DropdownMenuLabel = forwardRef(function DropdownMenuLabel(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(DropdownMenuPrimitive.Label, Object.assign({}, props, { ref: ref, className: `ui-dropdown-label ${className !== null && className !== void 0 ? className : ''}`.trim() }));
+});
+export const DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(DropdownMenuPrimitive.Separator, Object.assign({}, props, { ref: ref, className: `ui-dropdown-separator ${className !== null && className !== void 0 ? className : ''}`.trim() }));
+});
 export const Popover = PopoverPrimitive.Root;
 export const PopoverTrigger = PopoverPrimitive.Trigger;
 export const PopoverPortal = PopoverPrimitive.Portal;

package/dist/WorkspaceSidebar.d.ts

@@ -0,0 +1,64 @@
+import { type HTMLAttributes, type ReactNode, type Ref } from 'react';
+export type WorkspaceSidebarItem = {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    badge?: ReactNode;
+    disabled?: boolean;
+};
+export type WorkspaceSidebarProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'onSelect'> & {
+    brand: ReactNode;
+    brandIcon: ReactNode;
+    brandLabel: string;
+    onBrandClick?: () => void;
+    workspace?: {
+        icon: ReactNode;
+        name: string;
+        description?: string;
+        badge?: ReactNode;
+    };
+    footer?: ReactNode;
+    items: readonly WorkspaceSidebarItem[];
+    activeId?: string;
+    onSelect: (id: string) => void;
+    collapsed: boolean;
+    onCollapsedChange: (collapsed: boolean) => void;
+    mobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+    mobileCloseRef?: Ref<HTMLButtonElement>;
+    navigationLabel?: string;
+    sectionLabel?: string;
+    labels?: {
+        collapse?: string;
+        expand?: string;
+        close?: string;
+    };
+};
+export declare const WorkspaceSidebar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "onSelect"> & {
+    brand: ReactNode;
+    brandIcon: ReactNode;
+    brandLabel: string;
+    onBrandClick?: () => void;
+    workspace?: {
+        icon: ReactNode;
+        name: string;
+        description?: string;
+        badge?: ReactNode;
+    };
+    footer?: ReactNode;
+    items: readonly WorkspaceSidebarItem[];
+    activeId?: string;
+    onSelect: (id: string) => void;
+    collapsed: boolean;
+    onCollapsedChange: (collapsed: boolean) => void;
+    mobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+    mobileCloseRef?: Ref<HTMLButtonElement>;
+    navigationLabel?: string;
+    sectionLabel?: string;
+    labels?: {
+        collapse?: string;
+        expand?: string;
+        close?: string;
+    };
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/WorkspaceSidebar.js

@@ -0,0 +1,24 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { PanelLeftClose, PanelLeftOpen, X } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "./Overlays.js";
+export const WorkspaceSidebar = forwardRef(function WorkspaceSidebar(_a, ref) {
+    var _b, _c, _d, _e;
+    var { brand, brandIcon, brandLabel, onBrandClick, workspace, footer, items, activeId, onSelect, collapsed, onCollapsedChange, mobileOpen = false, onMobileOpenChange, mobileCloseRef, navigationLabel = 'Workspace navigation', sectionLabel, labels, className, id } = _a, props = __rest(_a, ["brand", "brandIcon", "brandLabel", "onBrandClick", "workspace", "footer", "items", "activeId", "onSelect", "collapsed", "onCollapsedChange", "mobileOpen", "onMobileOpenChange", "mobileCloseRef", "navigationLabel", "sectionLabel", "labels", "className", "id"]);
+    const generatedId = useId();
+    const sidebarId = id !== null && id !== void 0 ? id : generatedId;
+    const toggleLabel = collapsed ? (_b = labels === null || labels === void 0 ? void 0 : labels.expand) !== null && _b !== void 0 ? _b : 'Expand sidebar' : (_c = labels === null || labels === void 0 ? void 0 : labels.collapse) !== null && _c !== void 0 ? _c : 'Collapse sidebar';
+    return _jsxs("aside", Object.assign({}, props, { id: sidebarId, ref: ref, className: `tp-workspace-sidebar ${className !== null && className !== void 0 ? className : ''}`, "data-toolplane-ui": "workspace-sidebar", "data-collapsed": collapsed, "data-mobile-open": mobileOpen, children: [_jsxs("div", { className: "tp-workspace-sidebar__header", children: [_jsxs("button", { type: "button", className: "tp-workspace-sidebar__brand", "aria-label": brandLabel, onClick: onBrandClick, children: [brandIcon, _jsx("span", { children: brand })] }), _jsx("button", { type: "button", className: "tp-workspace-sidebar__toggle", "aria-label": toggleLabel, title: toggleLabel, "aria-controls": sidebarId, "aria-expanded": !collapsed, onClick: () => onCollapsedChange(!collapsed), children: collapsed ? _jsxs("span", { className: "tp-workspace-sidebar__expand", children: [brandIcon, _jsx(PanelLeftOpen, { size: 18 })] }) : _jsx(PanelLeftClose, { size: 18 }) }), _jsx("button", { type: "button", ref: mobileCloseRef, className: "tp-workspace-sidebar__mobile-close", "aria-label": (_d = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _d !== void 0 ? _d : 'Close navigation', title: (_e = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _e !== void 0 ? _e : 'Close navigation', onClick: () => onMobileOpenChange === null || onMobileOpenChange === void 0 ? void 0 : onMobileOpenChange(false), children: _jsx(X, { size: 18 }) })] }), sectionLabel && _jsx("div", { className: "tp-workspace-sidebar__section", children: sectionLabel }), _jsx(TooltipProvider, { children: _jsx("nav", { className: "tp-workspace-sidebar__nav", "aria-label": navigationLabel, children: items.map((item) => _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "tp-workspace-sidebar__item", disabled: item.disabled, "aria-label": item.label, "aria-current": activeId === item.id ? 'page' : undefined, onClick: () => onSelect(item.id), children: [_jsx("span", { className: "tp-workspace-sidebar__icon", children: item.icon }), _jsx("span", { className: "tp-workspace-sidebar__label", children: item.label }), _jsx("span", { className: "tp-workspace-sidebar__badge", children: item.badge })] }) }), collapsed && _jsx(TooltipPortal, { children: _jsx(TooltipContent, { side: "right", children: item.label }) })] }, item.id)) }) }), workspace && _jsxs("div", { className: "tp-workspace-sidebar__workspace", children: [_jsx("span", { className: "tp-workspace-sidebar__workspace-icon", children: workspace.icon }), _jsxs("span", { className: "tp-workspace-sidebar__workspace-text", children: [_jsx("strong", { children: workspace.name }), _jsx("small", { children: workspace.description })] }), _jsx("span", { className: "tp-workspace-sidebar__workspace-badge", children: workspace.badge })] }), footer && _jsx("div", { className: "tp-workspace-sidebar__footer", children: footer })] }));
+});

package/dist/WorkspaceTabBar.js

@@ -18,7 +18,7 @@ export function WorkspaceTabBar({ actions, activeTabId, labels: labelsOverride,
         var _a, _b;
         (_b = (_a = activeRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'nearest', inline: 'nearest' });
     }, [activeTabId, tabs.length]);
-    return (_jsxs("nav", { "aria-label": labels.navigation, "data-toolplane-ui": "workspace-tab-bar", className: "flex h-11 shrink-0 bg-shell px-2", children: [_jsxs("ol", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto py-1 [&::-webkit-scrollbar]:hidden", children: [tabs.map((tab) => (_jsx(WorkspaceTabButton, { tab: tab, active: tab.id === activeTabId, canClose: tabs.length > 1, draggingId: draggingId, labels: labels, onClose: onClose, onDragChange: setDraggingId, onNewWindow: onOpenInNewWindow, onReorder: onReorder, onSelect: onSelect, onTogglePinned: onTogglePinned, activeButtonRef: tab.id === activeTabId ? activeRef : undefined }, tab.id))), _jsx("li", { className: "shrink-0", children: _jsx("button", { type: "button", "aria-label": labels.newTab, title: labels.newTab, onClick: onNewTab, className: "ui-button-ghost ui-icon-button", children: _jsx(Plus, { className: "size-4" }) }) })] }), actions] }));
+    return (_jsxs("nav", { "aria-label": labels.navigation, "data-toolplane-ui": "workspace-tab-bar", className: "flex h-11 shrink-0 bg-shell px-2", children: [_jsxs("ol", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden py-1 [&::-webkit-scrollbar]:hidden", children: [tabs.map((tab) => (_jsx(WorkspaceTabButton, { tab: tab, active: tab.id === activeTabId, canClose: tabs.length > 1, draggingId: draggingId, labels: labels, onClose: onClose, onDragChange: setDraggingId, onNewWindow: onOpenInNewWindow, onReorder: onReorder, onSelect: onSelect, onTogglePinned: onTogglePinned, activeButtonRef: tab.id === activeTabId ? activeRef : undefined }, tab.id))), _jsx("li", { className: "shrink-0", children: _jsx("button", { type: "button", "aria-label": labels.newTab, title: labels.newTab, onClick: onNewTab, className: "ui-button-ghost ui-icon-button", children: _jsx(Plus, { className: "size-4" }) }) })] }), actions] }));
 }
 function WorkspaceTabButton({ active, activeButtonRef, canClose, draggingId, labels, onClose, onDragChange, onNewWindow, onReorder, onSelect, onTogglePinned, tab, }) {
     const dragAllowed = Boolean(draggingId && draggingId !== tab.id);
@@ -41,9 +41,13 @@ function WorkspaceTabButton({ active, activeButtonRef, canClose, draggingId, lab
             onReorder(draggingId, tab.id);
             onDragChange(null);
         }, className: `group flex h-[30px] min-w-24 max-w-56 shrink-0 items-center rounded-[10px] transition-[background-color,color,transform] duration-150 ${active ? 'bg-background text-foreground ring-1 ring-border/70' : 'text-muted-foreground hover:bg-accent/70 hover:text-foreground'} ${draggingId === tab.id ? 'scale-[0.98] opacity-50' : ''}`, children: [_jsxs("button", { ref: activeButtonRef, type: "button", "aria-current": active ? 'page' : undefined, title: tab.label, onAuxClick: (event) => {
-                    if (event.button === 1)
+                    if (event.button !== 1)
+                        return;
+                    event.preventDefault();
+                    if (canClose)
                         onClose(tab.id);
-                }, onClick: () => onSelect(tab.id), onDoubleClick: () => onClose(tab.id), className: "flex min-w-0 flex-1 items-center gap-1.5 px-2 text-left text-xs", children: [_jsx(Icon, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: tab.label })] }), _jsxs("div", { className: "mr-1 flex shrink-0 items-center", children: [_jsx("button", { type: "button", "aria-pressed": tab.pinned, "aria-label": tab.pinned ? labels.unpin(tab.label) : labels.pin(tab.label), title: tab.pinned ? labels.unpin(tab.label) : labels.pin(tab.label), onClick: (event) => {
+                }, onClick: () => onSelect(tab.id), onDoubleClick: () => { if (canClose)
+                    onClose(tab.id); }, className: "flex h-full min-w-0 flex-1 items-center gap-1.5 px-2 text-left text-xs", children: [_jsx(Icon, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: tab.label })] }), _jsxs("div", { className: "mr-1 flex shrink-0 items-center", children: [_jsx("button", { type: "button", "aria-pressed": tab.pinned, "aria-label": tab.pinned ? labels.unpin(tab.label) : labels.pin(tab.label), title: tab.pinned ? labels.unpin(tab.label) : labels.pin(tab.label), onClick: (event) => {
                             stop(event);
                             onTogglePinned(tab.id);
                         }, className: `flex size-[18px] items-center justify-center rounded-sm transition-colors hover:bg-foreground/10 ${tab.pinned ? (controls ? 'bg-brand-soft text-accent-foreground' : 'bg-brand-soft/50 text-accent-foreground/60 group-hover:bg-brand-soft group-hover:text-accent-foreground group-focus-within:bg-brand-soft group-focus-within:text-accent-foreground') : (controls ? '' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100')}`, children: _jsx(Pin, { className: `size-3 ${tab.pinned ? 'fill-current' : ''}` }) }), _jsxs("div", { className: `flex items-center transition-opacity ${controls ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'}`, children: [_jsx("button", { type: "button", "aria-label": labels.openInNewWindow(tab.label), title: labels.openInNewWindow(tab.label), onClick: (event) => {

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 export * from './Brand.js';
+export * from './Accordion.js';
+export * from './Avatar.js';
 export * from './ChatShell.js';
 export * from './ChatThread.js';
+export * from './ChatComposerToolbar.js';
 export * from './chat-markdown.js';
 export * from './ContentPage.js';
 export * from './Controls.js';
@@ -15,3 +18,4 @@ export * from './RotatingHeadline.js';
 export * from './SafeStreamdown.js';
 export * from './Sidebar.js';
 export * from './WorkspaceTabBar.js';
+export * from './WorkspaceSidebar.js';

package/dist/index.js

@@ -1,6 +1,9 @@
 export * from "./Brand.js";
+export * from "./Accordion.js";
+export * from "./Avatar.js";
 export * from "./ChatShell.js";
 export * from "./ChatThread.js";
+export * from "./ChatComposerToolbar.js";
 export * from "./chat-markdown.js";
 export * from "./ContentPage.js";
 export * from "./Controls.js";
@@ -15,3 +18,4 @@ export * from "./RotatingHeadline.js";
 export * from "./SafeStreamdown.js";
 export * from "./Sidebar.js";
 export * from "./WorkspaceTabBar.js";
+export * from "./WorkspaceSidebar.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asharca/ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Reusable ToolPlane components and chat UI for React applications.",
   "license": "MIT",
   "type": "module",
@@ -44,6 +44,22 @@
       "types": "./dist/Controls.d.ts",
       "import": "./dist/Controls.js"
     },
+    "./accordion": {
+      "types": "./dist/Accordion.d.ts",
+      "import": "./dist/Accordion.js"
+    },
+    "./avatar": {
+      "types": "./dist/Avatar.d.ts",
+      "import": "./dist/Avatar.js"
+    },
+    "./workspace-tab-bar": {
+      "types": "./dist/WorkspaceTabBar.d.ts",
+      "import": "./dist/WorkspaceTabBar.js"
+    },
+    "./workspace-sidebar": {
+      "types": "./dist/WorkspaceSidebar.d.ts",
+      "import": "./dist/WorkspaceSidebar.js"
+    },
     "./dialog": {
       "types": "./dist/Dialog.d.ts",
       "import": "./dist/Dialog.js"
@@ -72,6 +88,10 @@
       "types": "./dist/ChatShell.d.ts",
       "import": "./dist/ChatShell.js"
     },
+    "./chat-composer-toolbar": {
+      "types": "./dist/ChatComposerToolbar.d.ts",
+      "import": "./dist/ChatComposerToolbar.js"
+    },
     "./chat-thread": {
       "types": "./dist/ChatThread.d.ts",
       "import": "./dist/ChatThread.js"
@@ -83,7 +103,9 @@
     "./styles.css": "./src/styles.css"
   },
   "scripts": {
-    "lint": "eslint src tests",
+    "dev": "vite --config showcase/vite.config.ts",
+    "build:showcase": "tsc -p showcase/tsconfig.json && vite build --config showcase/vite.config.ts",
+    "lint": "eslint src tests showcase",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:package": "node scripts/check-package.mjs",
@@ -128,6 +150,7 @@
     "tailwindcss": "^4",
     "typescript": "^5",
     "typescript-eslint": "^8",
+    "vite": "^8.2.2",
     "vitest": "^4.1.9"
   }
 }

package/src/styles.css

@@ -7,6 +7,171 @@
 @source "../../../@streamdown/mermaid/dist/*.js";
 @source "./**/*.{ts,tsx}";
 
+@layer components {
+  .tp-workspace-sidebar { display: flex; flex-direction: column; flex-shrink: 0; position: relative; height: 100%; width: var(--workspace-sidebar-width, 256px); overflow: hidden; padding: 0 12px 14px; background: hsl(var(--shell)); color: hsl(var(--foreground)); transition: width 200ms ease-out, padding 200ms ease-out, transform 200ms ease-out; }
+  .tp-workspace-sidebar__header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 56px; gap: 4px; }
+  .tp-workspace-sidebar__brand { display: flex; align-items: center; gap: 9px; min-width: 0; white-space: nowrap; font-weight: 600; font-size: 20px; }
+  .tp-workspace-sidebar__brand svg { flex-shrink: 0; }
+  .tp-workspace-sidebar__toggle, .tp-workspace-sidebar__mobile-close { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 6px; color: hsl(var(--muted-foreground)); }
+  .tp-workspace-sidebar__toggle:hover, .tp-workspace-sidebar__mobile-close:hover { background: hsl(var(--muted)); }
+  .tp-workspace-sidebar__mobile-close { display: none; }
+  .tp-workspace-sidebar__expand { display: grid; place-items: center; width: 24px; height: 24px; }
+  .tp-workspace-sidebar__expand > svg { grid-area: 1 / 1; transition: opacity 150ms ease-out, transform 150ms ease-out; }
+  .tp-workspace-sidebar__expand > svg:last-child { opacity: 0; transform: scale(.75); }
+  .tp-workspace-sidebar__toggle:is(:hover,:focus-visible) .tp-workspace-sidebar__expand > svg:first-child { opacity: 0; transform: scale(.9); }
+  .tp-workspace-sidebar__toggle:is(:hover,:focus-visible) .tp-workspace-sidebar__expand > svg:last-child { opacity: 1; transform: scale(1); }
+  .tp-workspace-sidebar__workspace { height: 70px; display: flex; flex-shrink: 0; align-items: center; gap: 8px; margin-top: auto; padding: 12px 7px; overflow: hidden; transition: padding 200ms ease-out, gap 200ms ease-out; }
+  .tp-workspace-sidebar__workspace-icon { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid hsl(var(--border)); border-radius: 6px; background: hsl(var(--background)); font-size: 12px; }
+  .tp-workspace-sidebar__workspace-text { min-width: 0; flex: 1; }
+  .tp-workspace-sidebar__workspace-text strong { display: block; font-size: 11px; }
+  .tp-workspace-sidebar__workspace-text small { display: block; font-size: 10px; color: hsl(var(--muted-foreground)); }
+  .tp-workspace-sidebar__section { height: 28px; padding: 4px 12px; flex-shrink: 0; font-size: 10px; color: hsl(var(--muted-foreground)); }
+  .tp-workspace-sidebar__nav { display: grid; align-content: start; gap: 3px; overflow-y: auto; overflow-x: hidden; min-height: 0; }
+  .tp-workspace-sidebar__item { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; column-gap: 10px; width: 100%; height: 40px; padding: 0 12px; text-align: left; border-radius: 8px; color: hsl(var(--muted-foreground)); font-size: 12px; overflow: hidden; transition: height 200ms ease-out, border-radius 200ms ease-out, padding 200ms ease-out, column-gap 200ms ease-out; }
+  .tp-workspace-sidebar__icon { display: grid; place-items: center; width: 18px; height: 18px; }
+  .tp-workspace-sidebar__label, .tp-workspace-sidebar__badge, .tp-workspace-sidebar__workspace-text, .tp-workspace-sidebar__workspace-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 150ms ease-out, transform 150ms ease-out; }
+  .tp-workspace-sidebar__badge { font-size: 10px; }
+  .tp-workspace-sidebar__item:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
+  .tp-workspace-sidebar__item[aria-current="page"] { background: hsl(var(--brand-soft)); color: hsl(var(--foreground)); font-weight: 550; }
+  .tp-workspace-sidebar__item:disabled { opacity: .5; cursor: not-allowed; }
+  .tp-workspace-sidebar button:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
+  .tp-workspace-sidebar__footer { padding: 14px 7px 0; display: flex; align-items: center; gap: 9px; overflow: hidden; }
+  .tp-workspace-sidebar__footer > :first-child { flex-shrink: 0; }
+  .tp-workspace-sidebar__footer > :not(:first-child) { min-width: 0; white-space: nowrap; transition: opacity 150ms ease-out; }
+  .tp-workspace-sidebar__footer strong, .tp-workspace-sidebar__footer small { display: block; font-size: 11px; }
+  .tp-workspace-sidebar__footer small { color: hsl(var(--muted-foreground)); }
+  @media (min-width: 851px) {
+    .tp-workspace-sidebar[data-collapsed="true"] { width: var(--workspace-sidebar-collapsed-width, 64px); padding-inline: 8px; }
+    .tp-workspace-sidebar[data-collapsed="true"] .tp-workspace-sidebar__brand { display: none; }
+    .tp-workspace-sidebar[data-collapsed="true"] .tp-workspace-sidebar__header { justify-content: center; }
+    .tp-workspace-sidebar[data-collapsed="true"] .tp-workspace-sidebar__item { grid-template-columns: 18px 0px 0px; column-gap: 0; width: 36px; height: 36px; padding-inline: 9px; margin-inline: auto; border-radius: 50%; }
+    .tp-workspace-sidebar[data-collapsed="true"] :is(.tp-workspace-sidebar__label,.tp-workspace-sidebar__badge,.tp-workspace-sidebar__workspace-text,.tp-workspace-sidebar__workspace-badge,.tp-workspace-sidebar__section) { opacity: 0; transform: translateX(4px); }
+    .tp-workspace-sidebar[data-collapsed="true"] .tp-workspace-sidebar__workspace { gap: 0; padding-inline: 9px; }
+    .tp-workspace-sidebar[data-collapsed="true"] .tp-workspace-sidebar__workspace-badge { width: 0; }
+    .tp-workspace-sidebar[data-collapsed="true"] .tp-workspace-sidebar__footer { gap: 0; padding-inline: 9px; }
+    .tp-workspace-sidebar[data-collapsed="true"] .tp-workspace-sidebar__footer > :not(:first-child) { width: 0; opacity: 0; overflow: hidden; }
+  }
+  @media (max-width: 850px) {
+    .tp-workspace-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; transform: translateX(-100%); visibility: hidden; }
+    .tp-workspace-sidebar[data-mobile-open="true"] { transform: translateX(0); visibility: visible; }
+    .tp-workspace-sidebar__toggle { display: none; }
+    .tp-workspace-sidebar__mobile-close { display: grid; }
+  }
+  @media (prefers-reduced-motion: reduce) { .tp-workspace-sidebar, .tp-workspace-sidebar * { transition-duration: 0.01ms !important; } }
+  [data-chat-ui="sidebar-conversation"][data-drop-edge]::after { content: ""; position: absolute; left: .5rem; right: .5rem; height: 2px; background: hsl(var(--brand)); pointer-events: none; }
+  [data-chat-ui="sidebar-conversation"][data-drop-edge="before"]::after { top: 0; }
+  [data-chat-ui="sidebar-conversation"][data-drop-edge="after"]::after { bottom: 0; }
+  .ui-composer-toolbar { display: flex; align-items: center; gap: .375rem; min-width: 0; }
+  .ui-composer-tool { display: inline-flex; width: 30px; height: 30px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; color: hsl(var(--muted-foreground)); }
+  .ui-composer-tool svg, .ui-composer-menu svg, .ui-composer-option label svg { width: 17px; height: 17px; flex-shrink: 0; }
+  .ui-composer-tool:hover, .ui-composer-tool[aria-pressed="true"] { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
+  .ui-composer-tool:disabled { opacity: .4; cursor: not-allowed; }
+  .ui-composer-tool:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
+  .ui-composer-shortcuts { display: flex; align-items: center; gap: .25rem; min-width: 0; overflow-x: auto; padding: 3px; }
+  .ui-composer-menu { width: 16rem; border-radius: .5rem; }
+  .ui-composer-menu .ui-dropdown-item { gap: .625rem; padding: .5rem .625rem; }
+  .ui-composer-menu small { display: block; margin-top: .125rem; color: hsl(var(--muted-foreground)); font-size: .6875rem; }
+  .ui-composer-customize { max-width: 28rem; border-radius: .5rem; }
+  .ui-composer-customize header, .ui-composer-customize footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+  .ui-composer-customize footer { justify-content: flex-end; }
+  .ui-composer-option { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding-block: .25rem; border-bottom: 1px solid hsl(var(--border)); }
+  .ui-composer-option label { display: flex; align-items: center; gap: .625rem; min-width: 0; flex: 1; font-size: .875rem; overflow-wrap: anywhere; }
+  .ui-composer-option input { width: 16px; height: 16px; flex-shrink: 0; accent-color: hsl(var(--brand)); }
+  .ui-switch {
+    display: inline-flex;
+    width: 2.25rem;
+    height: 1.25rem;
+    flex: none;
+    align-items: center;
+    padding: 2px;
+    border: 0;
+    border-radius: 999px;
+    background: hsl(var(--input));
+    cursor: pointer;
+    transition: background-color 150ms ease;
+  }
+  .ui-switch[data-state="checked"] { background: hsl(var(--primary)); }
+  .ui-switch-thumb {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    background: hsl(var(--background));
+    box-shadow: 0 1px 2px #0002;
+    transition: transform 150ms ease;
+  }
+  .ui-switch-thumb[data-state="checked"] { transform: translateX(1rem); }
+  .ui-switch[dir="rtl"] .ui-switch-thumb[data-state="checked"] { transform: translateX(-1rem); }
+  .ui-slider {
+    width: 100%;
+    min-width: 0;
+    height: 1.5rem;
+    accent-color: hsl(var(--primary));
+    cursor: pointer;
+  }
+  .ui-switch:disabled, .ui-slider:disabled { cursor: not-allowed; opacity: .5; }
+  .ui-progress {
+    display: block;
+    width: 100%;
+    height: .375rem;
+    overflow: hidden;
+    border: 0;
+    border-radius: 999px;
+    appearance: none;
+    background: hsl(var(--muted));
+    color: hsl(var(--primary));
+    accent-color: hsl(var(--primary));
+  }
+  .ui-progress::-webkit-progress-bar { border-radius: inherit; background: hsl(var(--muted)); }
+  .ui-progress::-webkit-progress-value { border-radius: inherit; background: hsl(var(--primary)); }
+  .ui-progress::-moz-progress-bar { border-radius: inherit; background: hsl(var(--primary)); }
+  .ui-progress:indeterminate { appearance: auto; }
+  .ui-skeleton { min-height: 1rem; border-radius: .375rem; background: hsl(var(--muted)); animation: tp-skeleton-pulse 2s ease-in-out infinite; }
+  .ui-avatar {
+    display: inline-flex;
+    position: relative;
+    flex: none;
+    width: 2.25rem;
+    height: 2.25rem;
+    overflow: hidden;
+    border-radius: 50%;
+    vertical-align: middle;
+  }
+  .ui-avatar-image { width: 100%; height: 100%; object-fit: cover; }
+  .ui-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: .75rem; font-weight: 500; }
+  .ui-tabs-list { display: inline-flex; max-width: 100%; align-items: center; gap: .25rem; padding: .25rem; border-radius: .5rem; background: hsl(var(--muted)); overflow-x: auto; }
+  .ui-tabs-trigger { flex: 1 0 auto; border: 0; border-radius: .375rem; padding: .375rem .75rem; background: transparent; color: hsl(var(--muted-foreground)); font-size: .875rem; font-weight: 500; cursor: pointer; }
+  .ui-tabs-trigger[data-state="active"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px #0001; }
+  .ui-tabs-trigger:disabled { opacity: .5; cursor: not-allowed; }
+  .ui-tabs-content { margin-top: 1rem; min-width: 0; }
+  .ui-accordion-item { border-bottom: 1px solid hsl(var(--border)); }
+  .ui-accordion-item:last-child { border-bottom: 0; }
+  .ui-accordion-header { margin: 0; }
+  .ui-accordion-trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border: 0; background: transparent; color: hsl(var(--foreground)); font-size: .875rem; font-weight: 500; text-align: start; cursor: pointer; }
+  .ui-accordion-trigger:hover { text-decoration: underline; text-underline-offset: 4px; }
+  .ui-accordion-trigger:disabled { opacity: .5; cursor: not-allowed; }
+  .ui-accordion-chevron { width: 1rem; height: 1rem; flex: none; color: hsl(var(--muted-foreground)); transition: transform 150ms ease; }
+  .ui-accordion-trigger[data-state="open"] .ui-accordion-chevron { transform: rotate(180deg); }
+  .ui-accordion-content { padding-bottom: 1rem; color: hsl(var(--muted-foreground)); font-size: .875rem; line-height: 1.65; overflow-wrap: anywhere; }
+  .ui-dropdown-menu { z-index: 60; min-width: 12rem; max-width: calc(100vw - 1rem); max-height: var(--radix-dropdown-menu-content-available-height); overflow-y: auto; border: 1px solid hsl(var(--border)); border-radius: .5rem; background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); padding: .25rem; box-shadow: 0 4px 12px #0002; }
+  .ui-dropdown-item { display: flex; min-height: 2rem; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: .25rem; font-size: .875rem; outline: none; cursor: default; user-select: none; }
+  .ui-dropdown-item[data-highlighted] { background: hsl(var(--accent)); }
+  .ui-dropdown-item[data-disabled] { opacity: .5; pointer-events: none; }
+  .ui-dropdown-label { padding: .375rem .5rem; font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
+  .ui-dropdown-separator { height: 1px; margin: .25rem -.25rem; background: hsl(var(--border)); }
+  :is(.ui-switch, .ui-slider, .ui-tabs-trigger, .ui-tabs-content, .ui-accordion-trigger):focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
+  @media (pointer: coarse) {
+    .ui-switch { position: relative; }
+    .ui-switch::before { content: ""; position: absolute; inset: -.75rem -.25rem; }
+    .ui-slider, .ui-tabs-trigger, .ui-dropdown-item { min-height: 2.75rem; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ui-skeleton { animation: none; }
+    .ui-switch, .ui-switch-thumb, .ui-accordion-chevron { transition: none; }
+  }
+}
+
+@keyframes tp-skeleton-pulse { 50% { opacity: .45; } }
+
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
@@ -360,6 +525,16 @@
     background: hsl(var(--accent) / 0.62);
   }
 
+  .ui-table__selection {
+    width: 2.75rem;
+    padding: 0.75rem 0.875rem;
+    text-align: center;
+  }
+
+  .ui-table__checkbox {
+    margin: 0 auto;
+  }
+
   .ui-button-primary,
   .ui-button-secondary,
   .ui-button-ghost {
@@ -420,6 +595,16 @@
     color: hsl(var(--destructive-foreground));
   }
 
+  .ui-button-outline {
+    border-color: hsl(var(--border));
+    background: hsl(var(--background));
+  }
+
+  .ui-button-outline:hover:not(:disabled) {
+    border-color: hsl(var(--border));
+    background: hsl(var(--accent));
+  }
+
   .ui-button-danger:hover:not(:disabled) {
     border-color: color-mix(in hsl, hsl(var(--destructive)) 88%, black 12%);
     background: color-mix(in hsl, hsl(var(--destructive)) 88%, black 12%);