@asharca/ui 0.1.1 → 0.2.0

package/README.md

@@ -5,12 +5,18 @@ Reusable React controls, chat thread, conversation sidebar, and responsive shell
 ## Install
 
 ```bash
-pnpm add @asharca/ui
-# or: npm install @asharca/ui
+pnpm add @asharca/ui @assistant-ui/react@0.15.18
+# or: npm install @asharca/ui @assistant-ui/react@0.15.18
 ```
 
 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
+`@assistant-ui/react-streamdown@0.3.13`. These are the latest releases verified on
+September 5, 2026. Older runtime versions are not supported. Hosts that also use
+the Streamdown adapter should use `0.3.13` so the renderer and host share the same
+assistant-ui context. No package patch or legacy runtime hook is required.
+
 Import the stylesheet once from the host application's global Tailwind stylesheet:
 
 ```css
@@ -114,32 +120,50 @@ Theme defaults are scoped to package component roots. Override them with HSL-cha
 ## Build and pack
 
 ```bash
-pnpm --filter @asharca/ui build
-pnpm --dir packages/ui pack
+pnpm install --frozen-lockfile
+pnpm lint
+pnpm build
+pnpm test
+pnpm test:package
+pnpm pack
 ```
 
+Development uses Node 24 and pnpm. Tests run without ToolPlane, Next.js,
+Postgres, or Docker. `test:package` installs the tarball into a temporary consumer
+with strict peer checking and verifies imports, rendering, CSS, and Tailwind
+source scanning.
+
 ## Release
 
-This package is versioned independently from the ToolPlane application. To
-release a new version, update `packages/ui/package.json`, commit and push the
-changes, then tag that release commit. Replace `X.Y.Z` with the package version:
+This package is maintained in `asharca/ui`, independently from ToolPlane.
+Changes go through a PR with required CI checks; merging to `main` does not
+repeat the full CI run. CI can also be started manually.
+
+To release, update `package.json` in a PR, merge it, and tag the merged commit
+on `main`. Replace `X.Y.Z` with the package version:
 
 ```bash
 git tag ui-vX.Y.Z
 git push origin ui-vX.Y.Z
 ```
 
-The `publish-ui.yml` workflow builds and tests the tagged commit, then publishes
-that exact version to npm with provenance. It does not merge branches or trigger
-the ToolPlane application's separate `vX.Y.Z` release workflow. Published npm
-versions are immutable; use a new version and tag for each release.
+The `publish-ui.yml` workflow checks that the tag matches the package version
+and belongs to `main`, builds and tests the tagged commit, verifies the tarball,
+then publishes that exact version to npm with provenance. Published npm versions
+are immutable; use a new version and tag for each release.
 
 Publishing requires access to the `@asharca` npm scope. Configure npm trusted
-publishing for `asharca/ToolPlane` and `publish-ui.yml`, allowing direct
+publishing for `asharca/ui` and `publish-ui.yml`, allowing direct
 publishing with `npm publish`. The workflow uses OIDC rather than a long-lived
 npm token. No `NPM_TOKEN` or `NODE_AUTH_TOKEN` repository secret is needed.
 
+Version `0.2.0` is the first release from this repository. It requires
+`@assistant-ui/react@0.15.18`; consumers upgrading from `0.1.x` must update that
+runtime peer as well. Component exports and CSS variables are unchanged by the
+repository migration. Consuming applications update their dependency and rebuild
+to adopt a release.
+
 ## License
 
-MIT. See [LICENSE](./LICENSE). This license applies only to `packages/ui`, not
-to the rest of the ToolPlane repository.
+MIT. See [LICENSE](./LICENSE). This repository preserves the history of the UI
+package extracted from ToolPlane; it does not license the rest of ToolPlane.

package/dist/ChatThread.js

@@ -11,8 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, lazy, Suspense, useCallback, useContext, useMemo, useRef, useState, } from 'react';
-import { ActionBarPrimitive, AssistantRuntimeProvider, AttachmentPrimitive, ChainOfThoughtPrimitive, ComposerPrimitive, MessagePrimitive, ThreadPrimitive, useAuiState, useComposerRuntime, useMessagePartText, } from '@assistant-ui/react';
+import { createContext, lazy, Suspense, useContext, useMemo, useRef, useState, } from 'react';
+import { ActionBarPrimitive, AssistantRuntimeProvider, AttachmentPrimitive, ChainOfThoughtPrimitive, ComposerPrimitive, MessagePrimitive, ThreadPrimitive, useAuiState, useMessagePartText, } from '@assistant-ui/react';
 import { StreamdownTextPrimitive } from '@assistant-ui/react-streamdown';
 import { code } from '@streamdown/code';
 import { Popover } from 'radix-ui';
@@ -230,28 +230,7 @@ function ComposerAttachment({ attachment }) {
 }
 function AttachmentPicker({ disabled, enabled }) {
     const labels = useLabels();
-    const composer = useComposerRuntime();
-    const openPicker = useCallback(() => {
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.multiple = true;
-        input.hidden = true;
-        const accept = composer.getState().attachmentAccept;
-        if (accept && accept !== '*')
-            input.accept = accept;
-        const removeInput = () => input.remove();
-        input.onchange = () => {
-            var _a;
-            for (const file of Array.from((_a = input.files) !== null && _a !== void 0 ? _a : [])) {
-                void composer.addAttachment(file).catch(() => undefined);
-            }
-            removeInput();
-        };
-        input.oncancel = removeInput;
-        document.body.appendChild(input);
-        input.click();
-    }, [composer]);
-    return (_jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(IconButton, { icon: _jsx(Plus, { className: "size-[18px]" }), label: labels.openComposerTools, size: "sm", variant: "ghost", disabled: disabled, className: "size-[30px] min-h-[30px] shrink-0 rounded-full" }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { side: "top", align: "start", sideOffset: 8, collisionPadding: 12, "aria-label": labels.composerTools, className: "z-50 w-64 rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-xl", children: _jsx(Popover.Close, { asChild: true, children: _jsxs("button", { type: "button", disabled: !enabled, onClick: openPicker, className: "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx(Paperclip, { className: "size-4 shrink-0" }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block", children: labels.addAttachment }), !enabled ? _jsx("span", { className: "mt-0.5 block text-[11px] text-muted-foreground", children: labels.attachmentsUnavailable }) : null] })] }) }) }) })] }));
+    return (_jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(IconButton, { icon: _jsx(Plus, { className: "size-[18px]" }), label: labels.openComposerTools, size: "sm", variant: "ghost", disabled: disabled, className: "size-[30px] min-h-[30px] shrink-0 rounded-full" }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { side: "top", align: "start", sideOffset: 8, collisionPadding: 12, "aria-label": labels.composerTools, className: "z-50 w-64 rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-xl", children: _jsx(Popover.Close, { asChild: true, children: _jsxs(ComposerPrimitive.AddAttachment, { multiple: true, disabled: !enabled, className: "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx(Paperclip, { className: "size-4 shrink-0" }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block", children: labels.addAttachment }), !enabled ? _jsx("span", { className: "mt-0.5 block text-[11px] text-muted-foreground", children: labels.attachmentsUnavailable }) : null] })] }) }) }) })] }));
 }
 function BranchNavigator({ branch, disabled, onSelect, }) {
     const labels = useLabels();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asharca/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Reusable ToolPlane components and chat UI for React applications.",
   "license": "MIT",
   "type": "module",
@@ -16,13 +16,13 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/asharca/ToolPlane.git",
-    "directory": "packages/ui"
+    "url": "git+https://github.com/asharca/ui.git"
   },
-  "homepage": "https://github.com/asharca/ToolPlane/tree/main/packages/ui",
+  "homepage": "https://github.com/asharca/ui#readme",
   "bugs": {
-    "url": "https://github.com/asharca/ToolPlane/issues"
+    "url": "https://github.com/asharca/ui/issues"
   },
+  "packageManager": "pnpm@10.32.1",
   "engines": {
     "node": ">=20"
   },
@@ -83,6 +83,10 @@
     "./styles.css": "./src/styles.css"
   },
   "scripts": {
+    "lint": "eslint src tests",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:package": "node scripts/check-package.mjs",
     "build": "node --input-type=module -e \"import { rmSync } from 'node:fs'; rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.json",
     "postbuild": "node --input-type=module -e \"import { readFileSync, writeFileSync } from 'node:fs'; const path = 'dist/index.d.ts'; writeFileSync(path, readFileSync(path, 'utf8').replaceAll('.tsx', '.js').replaceAll('.ts', '.js'))\"",
     "prepack": "pnpm build"
@@ -91,18 +95,39 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.14.26",
+    "@assistant-ui/react": "0.15.18",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0"
   },
   "dependencies": {
-    "@assistant-ui/react-streamdown": "0.3.5",
+    "@assistant-ui/react-streamdown": "0.3.13",
     "@streamdown/code": "^1.1.1",
     "@streamdown/mermaid": "^1.0.2",
     "lucide-react": "^1.21.0",
     "radix-ui": "1.6.2",
     "remark-breaks": "^4.0.0",
     "streamdown": "^2.5.0"
+  },
+  "devDependencies": {
+    "@assistant-ui/react": "0.15.18",
+    "@tailwindcss/postcss": "^4",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.3",
+    "eslint": "^10",
+    "eslint-plugin-react-hooks": "^7",
+    "jsdom": "^29.1.1",
+    "postcss": "^8",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tailwindcss": "^4",
+    "typescript": "^5",
+    "typescript-eslint": "^8",
+    "vitest": "^4.1.9"
   }
 }