@asharca/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 asharca
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,136 @@
+# @asharca/ui
+
+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
+# or: npm install @asharca/ui
+```
+
+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.
+
+Import the stylesheet once from the host application's global Tailwind stylesheet:
+
+```css
+@import "tailwindcss";
+@import "@asharca/ui/styles.css";
+```
+
+The package stylesheet uses Tailwind's `@source` directive to scan the emitted `dist` files. Importing only the React components will leave their utility classes ungenerated.
+
+## Controls
+
+Import lightweight controls without loading the chat runtime:
+
+```tsx
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+import { Button, IconButton, Input, SearchInput } from '@asharca/ui/controls';
+
+export function Toolbar() {
+  const [query, setQuery] = useState('');
+  return <>
+    <Button variant="primary">Save</Button>
+    <IconButton icon={<Plus />} label="Add item" />
+    <Input name="title" aria-label="Title" />
+    <SearchInput
+      value={query}
+      label="Search conversations"
+      onChange={(event) => setQuery(event.target.value)}
+      onClear={() => setQuery('')}
+    />
+  </>;
+}
+```
+
+`Button` supports `primary`, `secondary`, `ghost`, `danger`, and `danger-secondary` variants, `sm`/`md`/`lg` sizes, a loading state, and `asChild` for framework links. Controls also include `Textarea`, `Select`/`NativeSelect`, `Checkbox`, `Radio`, and field labels/descriptions/errors. All controls forward native props and refs.
+
+## Modules
+
+- `@asharca/ui/controls` — buttons and native form controls.
+- `@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/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.
+- `@asharca/ui/chat-shell`, `@asharca/ui/chat-thread`, and `@asharca/ui/conversation-sidebar` — chat composition.
+- The root export also includes `ToolPlaneLogo`, `ContentPage`, `RotatingHeadline`, `SafeStreamdown`, `Breadcrumbs`, `NavigationTabs`, and `WorkspaceTabBar`.
+
+Next.js routing, translations, server actions, authentication, and domain data stay in the host. Pass those through children, labels, callbacks, and thin adapters.
+
+## Example
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import {
+  ChatShell,
+  ChatThread,
+  type ChatThreadProps,
+  ConversationSidebar,
+} from '@asharca/ui';
+
+export function ChatPage({ runtime }: { runtime: ChatThreadProps['runtime'] }) {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [mobilePane, setMobilePane] = useState<'sidebar' | 'chat'>('sidebar');
+
+  return (
+    <div className="h-dvh">
+      <ChatShell
+        sidebar={(
+          <ConversationSidebar
+            groups={[]}
+            onSelectConversation={() => setMobilePane('chat')}
+          />
+        )}
+        header={<strong>Support assistant</strong>}
+        sidebarOpen={sidebarOpen}
+        onSidebarOpenChange={setSidebarOpen}
+        mobilePane={mobilePane}
+        onMobilePaneChange={setMobilePane}
+        rightPanel={<div>Optional inspector</div>}
+      >
+        <ChatThread
+          runtime={runtime}
+          assistantName="Support assistant"
+        />
+      </ChatShell>
+    </div>
+  );
+}
+```
+
+Build the runtime with AI SDK, assistant-ui local runtime, or another adapter in the host. `sidebarOpen` controls the desktop column. `mobilePane` controls whether narrow screens show the sidebar or the chat. Set `rightPanelOpen={false}` to keep the optional desktop right panel closed, and pass `sidebarLabel` when the sidebar needs a named complementary landmark.
+
+`ChatThread` accepts an optional `components` map for host-specific rendering without replacing the thread layout. Use `AssistantText` for a custom Markdown renderer, `AssistantMessageBefore` / `AssistantMessageAfter` for per-message context, `AssistantActions` for extra message actions, and `SentAttachment` for a host preview flow.
+
+`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.
+
+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.
+
+## Build and pack
+
+```bash
+pnpm --filter @asharca/ui build
+pnpm --dir packages/ui pack
+```
+
+## Release
+
+This package is versioned independently from the ToolPlane application, like
+`packages/ai` in the Pi monorepo. To release a new version, update
+`packages/ui/package.json`, merge it, and create a matching `ui-vX.Y.Z` tag.
+The `publish-ui.yml` workflow builds and publishes that exact version to npm.
+
+Publishing requires access to the `@asharca` npm scope. Configure npm trusted
+publishing for `asharca/ToolPlane` and `publish-ui.yml`, allowing direct
+publishing with `npm publish`. The workflow uses OIDC rather than a long-lived
+npm token.
+
+## License
+
+MIT. See [LICENSE](./LICENSE). This license applies only to `packages/ui`, not
+to the rest of the ToolPlane repository.

package/dist/Brand.d.ts

@@ -0,0 +1,6 @@
+export type ToolPlaneLogoProps = {
+    svgSize?: number;
+    wordmarkClass?: string;
+    hideWordmarkOnMobile?: boolean;
+};
+export declare function ToolPlaneLogo({ svgSize, wordmarkClass, hideWordmarkOnMobile, }: ToolPlaneLogoProps): import("react").JSX.Element;

package/dist/Brand.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Layers3 } from 'lucide-react';
+export function ToolPlaneLogo({ svgSize = 28, wordmarkClass = 'text-2xl', hideWordmarkOnMobile = false, }) {
+    return (_jsxs("span", { "data-toolplane-ui": "logo", className: "inline-flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 items-center justify-center rounded-lg bg-brand-soft text-brand ring-1 ring-inset ring-brand/15 transition-colors group-hover:bg-brand group-hover:text-brand-foreground", style: { width: svgSize, height: svgSize }, children: _jsx(Layers3, { size: Math.round(svgSize * 0.57), strokeWidth: 1.9 }) }), _jsxs("span", { className: `${hideWordmarkOnMobile ? 'hidden sm:inline' : 'inline'} whitespace-nowrap font-sans font-semibold text-foreground ${wordmarkClass}`, children: ["Tool", _jsx("span", { className: "font-medium text-muted-foreground", children: "Plane" })] })] }));
+}

package/dist/ChatShell.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ChatShellMobilePane = 'sidebar' | 'chat';
+export type ChatShellLabels = {
+    showSidebar: string;
+    hideSidebar: string;
+};
+export declare const chatShellDefaultLabels: ChatShellLabels;
+export type ChatShellProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    sidebar: ReactNode;
+    sidebarLabel?: string;
+    header?: ReactNode;
+    children: ReactNode;
+    rightPanel?: ReactNode;
+    sidebarOpen: boolean;
+    onSidebarOpenChange: (open: boolean) => void;
+    mobilePane: ChatShellMobilePane;
+    onMobilePaneChange: (pane: ChatShellMobilePane) => void;
+    rightPanelOpen?: boolean;
+    labels?: Partial<ChatShellLabels>;
+};
+export declare function ChatShell({ sidebar, sidebarLabel, header, children, rightPanel, sidebarOpen, onSidebarOpenChange, mobilePane, onMobilePaneChange, rightPanelOpen, labels, className, ...props }: ChatShellProps): import("react").JSX.Element;

package/dist/ChatShell.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 { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { useId } from 'react';
+import { IconButton } from "./Controls.js";
+export const chatShellDefaultLabels = {
+    showSidebar: 'Show conversations',
+    hideSidebar: 'Hide conversations',
+};
+export function ChatShell(_a) {
+    var { sidebar, sidebarLabel, header, children, rightPanel, sidebarOpen, onSidebarOpenChange, mobilePane, onMobilePaneChange, rightPanelOpen = true, labels, className } = _a, props = __rest(_a, ["sidebar", "sidebarLabel", "header", "children", "rightPanel", "sidebarOpen", "onSidebarOpenChange", "mobilePane", "onMobilePaneChange", "rightPanelOpen", "labels", "className"]);
+    const copy = Object.assign(Object.assign({}, chatShellDefaultLabels), labels);
+    const showRightPanel = Boolean(rightPanel && rightPanelOpen);
+    const sidebarId = useId();
+    return (_jsx("div", Object.assign({}, props, { "data-chat-ui": "chat-shell", "data-mobile-pane": mobilePane, "data-right-panel-open": showRightPanel, "data-sidebar-open": sidebarOpen, className: `tp-chat-shell ${className !== null && className !== void 0 ? className : ''}`.trim(), children: _jsxs("div", { className: "tp-chat-shell__grid", children: [_jsxs("div", { id: sidebarId, className: "tp-chat-shell__sidebar", role: sidebarLabel ? 'complementary' : undefined, "aria-label": sidebarLabel, children: [_jsx("div", { className: "tp-chat-shell__sidebar-mobile-toolbar", children: _jsx(IconButton, { icon: _jsx(PanelLeftClose, { className: "tp-chat-shell__toggle-icon" }), label: copy.hideSidebar, size: "sm", variant: "ghost", "aria-controls": sidebarId, "aria-expanded": true, className: "tp-chat-shell__toggle", onClick: () => onMobilePaneChange('chat') }) }), _jsx("div", { className: "tp-chat-shell__sidebar-slot", children: sidebar })] }), _jsxs("section", { className: "tp-chat-shell__main", children: [_jsxs("div", { className: "tp-chat-shell__header", children: [_jsx(IconButton, { icon: sidebarOpen
+                                        ? _jsx(PanelLeftClose, { className: "tp-chat-shell__toggle-icon" })
+                                        : _jsx(PanelLeftOpen, { className: "tp-chat-shell__toggle-icon" }), label: sidebarOpen ? copy.hideSidebar : copy.showSidebar, size: "sm", variant: "ghost", "aria-controls": sidebarId, "aria-expanded": sidebarOpen, className: "tp-chat-shell__toggle tp-chat-shell__toggle--desktop", onClick: () => onSidebarOpenChange(!sidebarOpen) }), _jsx(IconButton, { icon: _jsx(PanelLeftOpen, { className: "tp-chat-shell__toggle-icon" }), label: copy.showSidebar, size: "sm", variant: "ghost", "aria-controls": sidebarId, "aria-expanded": mobilePane === 'sidebar', className: "tp-chat-shell__toggle tp-chat-shell__toggle--mobile", onClick: () => onMobilePaneChange('sidebar') }), _jsx("div", { className: "tp-chat-shell__header-slot", children: header })] }), _jsx("div", { className: "tp-chat-shell__content", children: children })] }), showRightPanel ? (_jsx("aside", { className: "tp-chat-shell__right-panel", children: rightPanel })) : null] }) })));
+}

package/dist/ChatThread.d.ts

@@ -0,0 +1,96 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type AssistantRuntime, type CompleteAttachment, type TextMessagePartProps } from '@assistant-ui/react';
+export type ChatBranchNavigation = {
+    messageId: string;
+    position: number;
+    total: number;
+    previousMessageId: string;
+    nextMessageId: string;
+};
+export type ChatThreadLabels = {
+    addAttachment: string;
+    allowTool: string;
+    attachment: string;
+    attachmentsUnavailable: string;
+    cancel: string;
+    composerTools: string;
+    conversationBranch: string;
+    copy: string;
+    edit: string;
+    expandComposer: string;
+    generatingReply: string;
+    messagePlaceholder: string;
+    next: string;
+    openComposerTools: string;
+    preparingReply: string;
+    previous: string;
+    processFailed: string;
+    processed: string;
+    processing: string;
+    regenerate: string;
+    rejectTool: string;
+    removeAttachment: (name: string) => string;
+    restoreComposer: string;
+    save: string;
+    scrollToLatestMessage: string;
+    send: string;
+    startBranch: string;
+    startConversation: string;
+    stop: string;
+    thinking: string;
+    thought: string;
+    toolApprovalDescription: string;
+    toolAwaitingApproval: string;
+    toolCompleted: string;
+    toolFailed: string;
+    toolInput: string;
+    toolKindMcp: string;
+    toolKindSandbox: string;
+    toolKindSkill: string;
+    toolKindSubagent: string;
+    toolKindTool: string;
+    toolKindWeb: string;
+    toolOutput: string;
+    toolRunning: string;
+    user: string;
+    usingTool: (toolName: string) => string;
+};
+export declare const chatThreadDefaultLabels: ChatThreadLabels;
+export type ChatThreadProps = {
+    runtime: AssistantRuntime;
+    assistantName: string;
+    allowAttachments?: boolean;
+    allowEdit?: boolean;
+    allowRegenerate?: boolean;
+    branchNavigation?: readonly ChatBranchNavigation[];
+    busy?: boolean;
+    className?: string;
+    components?: ChatThreadComponents;
+    composerEnd?: ReactNode;
+    composerStatus?: ReactNode;
+    composerTools?: ReactNode;
+    disabled?: boolean;
+    emptyState?: ReactNode;
+    error?: ReactNode;
+    labels?: Partial<ChatThreadLabels>;
+    onBranchSelect?: (messageId: string) => void | Promise<void>;
+    onBranchStart?: (messageId: string) => void | Promise<void>;
+    onRegenerateMessage?: (messageId: string) => void | Promise<void>;
+    transformUserText?: (text: string) => string;
+};
+export type ChatThreadComponents = {
+    AssistantText?: ComponentType<TextMessagePartProps>;
+    AssistantMessageBefore?: ComponentType<{
+        messageId: string;
+    }>;
+    AssistantMessageAfter?: ComponentType<{
+        messageId: string;
+    }>;
+    AssistantActions?: ComponentType<{
+        messageId: string;
+    }>;
+    SentAttachment?: ComponentType<{
+        attachment: CompleteAttachment;
+    }>;
+};
+export declare function ChatThread({ runtime, assistantName, allowAttachments, allowEdit, allowRegenerate, branchNavigation, busy, disabled, labels: labelOverrides, transformUserText, ...props }: ChatThreadProps): import("react").JSX.Element;