@ocai/app-sdk-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ocean AI, LLC
+
+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/dist/chat/actions.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { Button } from '../internal/button';
+export type ActionsProps = ComponentProps<"div">;
+export declare const Actions: ({ className, children, ...props }: ActionsProps) => import("react").JSX.Element;
+export type ActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+};
+export declare const Action: ({ tooltip, children, label, className, variant, size, ...props }: ActionProps) => import("react").JSX.Element;

package/dist/chat/message.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+export type MessageContentVariant = "user" | "assistant";
+export type MessageContentProps = HTMLAttributes<HTMLDivElement> & {
+    variant?: MessageContentVariant;
+};
+export declare const MessageContent: ({ children, className, variant, ...props }: MessageContentProps) => import("react").JSX.Element;

package/dist/chat/reasoning.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from 'react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../internal/collapsible';
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+    duration?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+export declare const Reasoning: import('react').MemoExoticComponent<({ className, isStreaming, duration, open, defaultOpen, onOpenChange, children, ...props }: ReasoningProps) => import("react").JSX.Element>;
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    variant?: "reasoning" | "tools";
+    label?: string;
+};
+export declare const ReasoningTrigger: import('react').MemoExoticComponent<({ className, children, variant, label, ...props }: ReasoningTriggerProps) => import("react").JSX.Element>;
+export declare const reasoningTextClassName = "grid gap-1 text-sm text-muted-foreground/80 **:text-sm [&_code]:bg-transparent [&_code]:p-0 [&_code]:font-semibold [&_code]:text-foreground [&_li]:my-0 [&_ol]:my-1 [&_p]:my-0 [&_ul]:my-1";
+export declare const ReasoningContent: import('react').MemoExoticComponent<({ className, ...props }: ComponentProps<typeof CollapsibleContent>) => import("react").JSX.Element>;

package/dist/chat/response.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+import { Streamdown } from 'streamdown';
+type ResponseProps = ComponentProps<typeof Streamdown>;
+export declare function Response({ className, ...props }: ResponseProps): import("react").JSX.Element;
+export {};

package/dist/chat/tool.d.ts

@@ -0,0 +1,23 @@
+import { ToolUIPart } from 'ai';
+import { ComponentProps, ReactNode } from 'react';
+import { Collapsible, CollapsibleContent } from '../internal/collapsible';
+export type ToolProps = ComponentProps<typeof Collapsible>;
+export declare const Tool: ({ className, ...props }: ToolProps) => import("react").JSX.Element;
+export type ToolHeaderProps = {
+    type: ToolUIPart["type"];
+    state: ToolUIPart["state"];
+    title?: string;
+    className?: string;
+};
+export declare const ToolHeader: ({ className, type, state, title, ...props }: ToolHeaderProps) => import("react").JSX.Element;
+export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+export declare const ToolContent: ({ className, ...props }: ToolContentProps) => import("react").JSX.Element;
+export type ToolInputProps = ComponentProps<"div"> & {
+    input: ToolUIPart["input"];
+};
+export declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => import("react").JSX.Element;
+export type ToolOutputProps = ComponentProps<"div"> & {
+    output: ReactNode;
+    errorText: ToolUIPart["errorText"];
+};
+export declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => import("react").JSX.Element | null;

package/dist/chat.css

@@ -0,0 +1,75 @@
+/* @ocai/app-sdk-ui/chat.css — AI-chat markdown → Notion/Rune-block look
+   (prototype: tables + code shell).
+
+   Consume by importing INSIDE your Tailwind v4 entry stylesheet, after
+   tokens.css, so the @apply rules below are compiled by the app's own
+   Tailwind pass against that app's theme tokens:
+
+     @import "tailwindcss";
+     @import "@ocai/app-sdk-ui/tokens.css";
+     @import "@ocai/app-sdk-ui/chat.css";
+
+   A plain <link> or JS-side import will NOT work — Tailwind must see the
+   @apply rules to resolve text-sm and friends.
+
+   Streamdown tags every rendered element with `data-streamdown="<name>"` as
+   its styling hook (no shadow DOM, no separate stylesheet), so we restyle
+   purely in CSS. Scoped to `.ocui-md`, which this package's Response
+   component (chat/response.tsx) sets on the Streamdown root; the compound
+   `.ocui-md [data-streamdown=…]` selector (specificity 0,2,0) out-specifies
+   Streamdown's own single-class utilities within this same `utilities`
+   layer. We touch the table grid and the code-block SHELL (border + header)
+   only — the shiki-highlighted code body is left alone so syntax colors
+   survive. */
+@layer utilities {
+  /* --- Tables: Notion-style bordered grid (header row tinted, 1px cell
+     borders, per-column min/max width, horizontal scroll on overflow) --- */
+  /* Streamdown nests the <table> in TWO "card" wrappers: the outer
+     `table-wrapper` (rounded-lg border bg-sidebar p-2 — hosted the now-removed
+     controls) AND an inner MarkdownTable div (rounded-md border bg-background)
+     that directly wraps the <table>. The inner one carries NO data-streamdown
+     hook, so we target it as "the div directly containing the table" via :has.
+     Flatten both cards (controls already off via controls={{ table: false }})
+     so only the 1px cell grid shows; the outer keeps the my-4 block spacing. */
+  .ocui-md [data-streamdown="table-wrapper"] {
+    @apply my-4 w-full gap-0 rounded-none border-0 bg-transparent p-0;
+  }
+  .ocui-md div:has(> [data-streamdown="table"]) {
+    @apply w-full overflow-x-auto rounded-none border-0 bg-transparent;
+  }
+  .ocui-md [data-streamdown="table"] {
+    @apply w-full border-collapse rounded-none text-sm;
+  }
+  /* Match the rune editor's native table palette exactly. rune-react declares
+     --rune-table-header-bg (5% fg) and --rune-table-border (10% fg) only inside
+     .rune-editor — out of reach in chat — so we mirror the same recipe off the
+     global --foreground / --background seeds, which keeps it identical to the
+     editor table in BOTH light and dark (bg-muted drifted to 15% in dark). */
+  .ocui-md [data-streamdown="table-header"] {
+    @apply bg-transparent;
+  }
+  .ocui-md [data-streamdown="table-header-cell"],
+  .ocui-md [data-streamdown="table-cell"] {
+    border: 1px solid color-mix(in oklab, var(--foreground) 10%, var(--background));
+    @apply px-3 py-1.5 text-left align-top;
+    min-width: 120px;
+    max-width: 280px;
+  }
+  .ocui-md [data-streamdown="table-header-cell"] {
+    background: color-mix(in oklab, var(--foreground) 5%, var(--background));
+    @apply font-medium text-foreground;
+  }
+
+  /* --- Code block: Rune-style shell only. Container gets the rounded border;
+     the header strip (language label + copy/download) gets a tinted bar; the
+     `code-block-body` (shiki) keeps its own background + token colors. --- */
+  .ocui-md [data-streamdown="code-block"] {
+    @apply my-4 overflow-hidden rounded-lg border border-border;
+  }
+  .ocui-md [data-streamdown="code-block-header"] {
+    @apply border-b border-border bg-muted/50 px-3 py-1 text-xs text-muted-foreground;
+  }
+  .ocui-md [data-streamdown="code-block-body"] {
+    @apply text-sm;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { Response } from './chat/response';
+export { MessageContent, type MessageContentProps, type MessageContentVariant, } from './chat/message';
+export { Reasoning, ReasoningContent, ReasoningTrigger, reasoningTextClassName, type ReasoningProps, type ReasoningTriggerProps, } from './chat/reasoning';
+export { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, type ToolContentProps, type ToolHeaderProps, type ToolInputProps, type ToolOutputProps, type ToolProps, } from './chat/tool';
+export { Action, Actions, type ActionProps, type ActionsProps, } from './chat/actions';

package/dist/index.js

@@ -0,0 +1,286 @@
+"use client";
+import { createMathPlugin as e } from "@streamdown/math";
+import { Streamdown as t } from "streamdown";
+import { clsx as n } from "clsx";
+import { twMerge as r } from "tailwind-merge";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { CheckIcon as s, ChevronDownIcon as c, ClockIcon as l, Loader2Icon as u, WrenchIcon as d, XIcon as f } from "lucide-react";
+import { createContext as p, memo as m, useContext as h, useEffect as g, useState as _ } from "react";
+import { Collapsible as v, Slot as y, Tooltip as b } from "radix-ui";
+import { cva as x } from "class-variance-authority";
+//#region src/lib/cn.ts
+function S(...e) {
+	return r(n(e));
+}
+//#endregion
+//#region src/chat/response.tsx
+var C = e({ singleDollarTextMath: !0 });
+function w({ className: e, ...n }) {
+	return /* @__PURE__ */ a(t, {
+		className: S("ocui-md size-full text-base font-normal leading-6 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_code]:whitespace-pre-wrap [&_code]:wrap-break-word [&_pre]:max-w-full [&_pre]:overflow-x-auto", e),
+		plugins: { math: C },
+		controls: { table: !1 },
+		...n
+	});
+}
+//#endregion
+//#region src/chat/message.tsx
+var T = {
+	user: "w-fit wrap-break-word rounded-md bg-card px-3 py-1.5 text-primary",
+	assistant: "bg-transparent px-0 py-0 text-left text-foreground"
+}, E = ({ children: e, className: t, variant: n = "user", ...r }) => /* @__PURE__ */ a("div", {
+	className: S("flex flex-col gap-2 overflow-hidden text-base font-normal leading-6", T[n], t),
+	...r,
+	children: e
+});
+//#endregion
+//#region src/internal/collapsible.tsx
+function D({ ...e }) {
+	return /* @__PURE__ */ a(v.Root, {
+		"data-slot": "collapsible",
+		...e
+	});
+}
+function O({ ...e }) {
+	return /* @__PURE__ */ a(v.CollapsibleTrigger, {
+		"data-slot": "collapsible-trigger",
+		...e
+	});
+}
+function k({ ...e }) {
+	return /* @__PURE__ */ a(v.CollapsibleContent, {
+		"data-slot": "collapsible-content",
+		...e
+	});
+}
+//#endregion
+//#region src/chat/reasoning.tsx
+function A({ prop: e, defaultProp: t, onChange: n }) {
+	let [r, i] = _(t), a = e !== void 0;
+	return [a ? e : r, (e) => {
+		a || i(e), n?.(e);
+	}];
+}
+var j = p(null), M = () => {
+	let e = h(j);
+	if (!e) throw Error("Reasoning components must be used within Reasoning");
+	return e;
+}, N = 500, P = m(({ className: e, isStreaming: t = !1, duration: n = 0, open: r, defaultOpen: i = !0, onOpenChange: o, children: s, ...c }) => {
+	let [l, u] = A({
+		prop: r,
+		defaultProp: i,
+		onChange: o
+	}), [d, f] = _(!1);
+	return g(() => {
+		if (i && !t && l && !d) {
+			let e = setTimeout(() => {
+				u(!1), f(!0);
+			}, N);
+			return () => clearTimeout(e);
+		}
+	}, [
+		t,
+		l,
+		i,
+		u,
+		d
+	]), /* @__PURE__ */ a(j.Provider, {
+		value: {
+			isStreaming: t,
+			isOpen: l,
+			setIsOpen: u,
+			duration: n
+		},
+		children: /* @__PURE__ */ a(D, {
+			className: S("not-prose", e),
+			onOpenChange: u,
+			open: l,
+			...c,
+			children: s
+		})
+	});
+});
+function F({ variant: e, isStreaming: t, duration: n }) {
+	let r = e === "tools";
+	return t ? r ? "Working…" : "Thinking…" : n > 0 ? r ? `Worked for ${n}s` : `Thought for ${n}s` : r ? "Worked" : "Thought";
+}
+var I = m(({ className: e, children: t, variant: n = "reasoning", label: r, ...s }) => {
+	let { isStreaming: l, isOpen: u, duration: f } = M(), p = r ?? F({
+		variant: n,
+		isStreaming: l,
+		duration: f
+	});
+	return /* @__PURE__ */ a(O, {
+		className: S("flex items-center gap-1 rounded-md px-1.5 py-0.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", e),
+		...s,
+		children: t ?? /* @__PURE__ */ o(i, { children: [
+			n === "tools" && /* @__PURE__ */ a(d, { className: "size-3" }),
+			/* @__PURE__ */ a("span", {
+				className: S(l && "animate-pulse"),
+				children: p
+			}),
+			/* @__PURE__ */ a(c, { className: S("size-2.5 transition-transform", u ? "rotate-180" : "rotate-0") })
+		] })
+	});
+}), L = "grid gap-1 text-sm text-muted-foreground/80 **:text-sm [&_code]:bg-transparent [&_code]:p-0 [&_code]:font-semibold [&_code]:text-foreground [&_li]:my-0 [&_ol]:my-1 [&_p]:my-0 [&_ul]:my-1", R = m(({ className: e, ...t }) => /* @__PURE__ */ a(k, {
+	className: S(L, "mt-1.5", e),
+	...t
+}));
+P.displayName = "Reasoning", I.displayName = "ReasoningTrigger", R.displayName = "ReasoningContent";
+//#endregion
+//#region src/chat/tool.tsx
+var z = ({ className: e, ...t }) => /* @__PURE__ */ a(D, {
+	className: S("not-prose w-full rounded-md border border-border", e),
+	...t
+}), B = {
+	"input-streaming": "Pending",
+	"input-available": "Running",
+	"approval-requested": "Pending",
+	"approval-responded": "Approved",
+	"output-available": "Completed",
+	"output-error": "Error",
+	"output-denied": "Denied"
+}, V = {
+	"input-streaming": /* @__PURE__ */ a(u, { className: "size-3.5 animate-spin" }),
+	"input-available": /* @__PURE__ */ a(u, { className: "size-3.5 animate-spin" }),
+	"approval-requested": /* @__PURE__ */ a(l, { className: "size-3.5" }),
+	"approval-responded": /* @__PURE__ */ a(s, { className: "size-3.5" }),
+	"output-available": /* @__PURE__ */ a(s, { className: "size-3.5" }),
+	"output-error": /* @__PURE__ */ a(f, { className: "size-3.5 text-destructive" }),
+	"output-denied": /* @__PURE__ */ a(f, { className: "size-3.5 text-destructive" })
+}, H = ({ state: e }) => /* @__PURE__ */ o("span", {
+	className: "flex shrink-0 items-center gap-1 text-xs text-muted-foreground",
+	children: [V[e], B[e]]
+}), U = ({ className: e, type: t, state: n, title: r, ...i }) => /* @__PURE__ */ o(O, {
+	className: S("group flex w-full min-w-0 items-center justify-between gap-2 rounded-md p-2.5 transition-colors hover:bg-muted/50", e),
+	...i,
+	children: [/* @__PURE__ */ o("div", {
+		className: "flex min-w-0 flex-1 items-center gap-2",
+		children: [/* @__PURE__ */ a(d, { className: "size-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ a("span", {
+			className: "truncate text-sm font-medium",
+			children: r ?? t
+		})]
+	}), /* @__PURE__ */ o("div", {
+		className: "flex shrink-0 items-center gap-2",
+		children: [/* @__PURE__ */ a(H, { state: n }), /* @__PURE__ */ a(c, { className: "size-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })]
+	})]
+}), W = ({ className: e, ...t }) => /* @__PURE__ */ a(k, {
+	className: S("data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in", e),
+	...t
+}), G = ({ className: e, input: t, ...n }) => /* @__PURE__ */ o("div", {
+	className: S("space-y-1.5 overflow-hidden px-2.5 pb-2.5", e),
+	...n,
+	children: [/* @__PURE__ */ a("h4", {
+		className: "text-xs font-medium tracking-wide text-muted-foreground uppercase",
+		children: "Parameters"
+	}), /* @__PURE__ */ a("pre", {
+		className: "overflow-x-auto rounded-md bg-muted/50 p-2.5 font-mono text-xs",
+		children: JSON.stringify(t, null, 2)
+	})]
+}), K = ({ className: e, output: t, errorText: n, ...r }) => t || n ? /* @__PURE__ */ o("div", {
+	className: S("space-y-1.5 px-2.5 pb-2.5", e),
+	...r,
+	children: [/* @__PURE__ */ a("h4", {
+		className: "text-xs font-medium tracking-wide text-muted-foreground uppercase",
+		children: n ? "Error" : "Result"
+	}), /* @__PURE__ */ o("div", {
+		className: S("overflow-x-auto rounded-md text-xs [&_table]:w-full", n ? "bg-destructive/10 p-2.5 text-destructive" : "bg-muted/50 p-2.5 text-foreground"),
+		children: [n && /* @__PURE__ */ a("div", { children: n }), t && /* @__PURE__ */ a("div", { children: t })]
+	})]
+}) : null, q = x("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-7 gap-1.5 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-6 gap-1 rounded-[min(var(--radius-md),12px)] px-2 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-7",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-6 rounded-[min(var(--radius-md),12px)]",
+			"icon-lg": "size-8"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function J({ className: e, variant: t = "default", size: n = "default", asChild: r = !1, ...i }) {
+	return /* @__PURE__ */ a(r ? y.Root : "button", {
+		"data-slot": "button",
+		"data-variant": t,
+		"data-size": n,
+		className: S(q({
+			variant: t,
+			size: n,
+			className: e
+		})),
+		...i
+	});
+}
+//#endregion
+//#region src/internal/tooltip.tsx
+function Y({ delayDuration: e = 0, ...t }) {
+	return /* @__PURE__ */ a(b.Provider, {
+		"data-slot": "tooltip-provider",
+		delayDuration: e,
+		...t
+	});
+}
+function X({ ...e }) {
+	return /* @__PURE__ */ a(b.Root, {
+		"data-slot": "tooltip",
+		...e
+	});
+}
+function Z({ ...e }) {
+	return /* @__PURE__ */ a(b.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...e
+	});
+}
+function Q({ className: e, sideOffset: t = 0, children: n, ...r }) {
+	return /* @__PURE__ */ a(b.Portal, { children: /* @__PURE__ */ o(b.Content, {
+		"data-slot": "tooltip-content",
+		sideOffset: t,
+		className: S("z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:animate-in data-[state=instant-open]:fade-in-0 data-[state=instant-open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", e),
+		...r,
+		children: [n, /* @__PURE__ */ a(b.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] border-r border-b border-border bg-popover fill-popover" })]
+	}) });
+}
+//#endregion
+//#region src/chat/actions.tsx
+var $ = ({ className: e, children: t, ...n }) => /* @__PURE__ */ a("div", {
+	className: S("flex items-center", e),
+	...n,
+	children: t
+}), ee = ({ tooltip: e, children: t, label: n, className: r, variant: i = "ghost", size: s = "icon", ...c }) => {
+	let l = /* @__PURE__ */ o(J, {
+		className: S("relative", r),
+		size: s,
+		type: "button",
+		variant: i,
+		...c,
+		children: [t, /* @__PURE__ */ a("span", {
+			className: "sr-only",
+			children: n || e
+		})]
+	});
+	return e ? /* @__PURE__ */ a(Y, {
+		delayDuration: 300,
+		children: /* @__PURE__ */ o(X, { children: [/* @__PURE__ */ a(Z, {
+			asChild: !0,
+			children: l
+		}), /* @__PURE__ */ a(Q, { children: /* @__PURE__ */ a("p", { children: e }) })] })
+	}) : l;
+};
+//#endregion
+export { ee as Action, $ as Actions, E as MessageContent, P as Reasoning, R as ReasoningContent, I as ReasoningTrigger, w as Response, z as Tool, W as ToolContent, U as ToolHeader, G as ToolInput, K as ToolOutput, L as reasoningTextClassName };

package/dist/internal/button.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Button, buttonVariants };

package/dist/internal/collapsible.d.ts

@@ -0,0 +1,6 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
+import type * as React from "react";
+declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): React.JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): React.JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): React.JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/internal/tooltip.d.ts

@@ -0,0 +1,7 @@
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import * as React from "react";
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/lib/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/tokens.css

@@ -0,0 +1,158 @@
+/*
+ * @ocai/app-sdk-ui/tokens.css — OceanAI shared design tokens.
+ *
+ * Consume by importing INSIDE your Tailwind v4 entry stylesheet, after
+ * tailwindcss itself, so the @theme block below is compiled by the app's
+ * Tailwind pass:
+ *
+ *   @import "tailwindcss";
+ *   @import "@ocai/app-sdk-ui/tokens.css";
+ *
+ * A plain <link> or JS-side import will NOT work — Tailwind must see the
+ * @theme block to generate `bg-background` and friends.
+ *
+ * Dark mode keys off a `.dark` ancestor class (both OceanAI apps toggle a
+ * class on <html>).
+ *
+ * Theming model: two grayscale seeds (--background, --foreground) drive the
+ * whole chromeless set via color-mix(in oklab, fg X%, bg). Tokens that carry
+ * chroma (--destructive, --chart-*) stay literal. Light is the authoritative
+ * set; .dark overrides the seeds and re-tunes percentages where the recipe
+ * hits different optima on a dark surface.
+ *
+ * Derivation for a target lightness L:  X = (L_target − L_bg) / (L_fg − L_bg)
+ *
+ * Apps re-theme by overriding the two seeds after this import; everything
+ * else tracks automatically. The chatbot's original hand-authored palette is
+ * this exact derivation with seeds fg 0.145 (light) and bg 0.145 / fg 0.985
+ * (dark) — override only the seeds and it renders visually identical.
+ */
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  /* The two seeds. Everything chromeless below derives from these. */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.293 0 0);
+
+  --radius: 0.625rem;
+
+  --card: var(--background);
+  --card-foreground: var(--foreground);
+  --popover: var(--background);
+  --popover-foreground: var(--foreground);
+
+  --primary: color-mix(in oklab, var(--foreground) 93%, var(--background));
+  --primary-foreground: color-mix(in oklab, var(--foreground) 2%, var(--background));
+
+  --secondary: color-mix(in oklab, var(--foreground) 4%, var(--background));
+  --secondary-foreground: color-mix(in oklab, var(--foreground) 93%, var(--background));
+
+  --muted: color-mix(in oklab, var(--foreground) 4%, var(--background));
+  --muted-foreground: color-mix(in oklab, var(--foreground) 52%, var(--background));
+
+  --accent: color-mix(in oklab, var(--foreground) 4%, var(--background));
+  --accent-foreground: color-mix(in oklab, var(--foreground) 93%, var(--background));
+
+  --border: color-mix(in oklab, var(--foreground) 9%, var(--background));
+  --input: color-mix(in oklab, var(--foreground) 9%, var(--background));
+
+  /* Neutral by default. Apps with a brand accent point this at it
+     (zyler: `--ring: var(--editor-accent)`). */
+  --ring: color-mix(in oklab, var(--foreground) 42%, var(--background));
+
+  --destructive: oklch(0.577 0.245 27.325);
+
+  /* Chart series colors carry chroma — literal, not seed-derived. */
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --sidebar: color-mix(in oklab, var(--foreground) 2%, var(--background));
+  /* Aliases resolve at use time, so the .dark block below doesn't need to
+     repeat them — they track their target's dark value automatically. */
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+.dark {
+  --background: oklch(0.213 0 0);
+  --foreground: oklch(0.952 0 0);
+
+  --card: color-mix(in oklab, var(--foreground) 7%, var(--background));
+  --popover: color-mix(in oklab, var(--foreground) 7%, var(--background));
+
+  --primary: color-mix(in oklab, var(--foreground) 93%, var(--background));
+  --primary-foreground: color-mix(in oklab, var(--foreground) 7%, var(--background));
+
+  --secondary: color-mix(in oklab, var(--foreground) 15%, var(--background));
+  --secondary-foreground: var(--foreground);
+
+  --muted: color-mix(in oklab, var(--foreground) 15%, var(--background));
+  --muted-foreground: color-mix(in oklab, var(--foreground) 67%, var(--background));
+
+  --accent: color-mix(in oklab, var(--foreground) 15%, var(--background));
+  --accent-foreground: var(--foreground);
+
+  /* Solid (not alpha) so every divider reads the same lightness regardless
+     of the surface underneath — 18% against bg lands at oklch L≈0.35.
+     --input stays alpha: input chrome reads as a translucent surface, not a
+     hairline divider. */
+  --border: color-mix(in oklab, var(--foreground) 18%, var(--background));
+  --input: color-mix(in oklab, var(--foreground) 15%, transparent);
+
+  --ring: color-mix(in oklab, var(--foreground) 49%, var(--background));
+
+  --destructive: oklch(0.704 0.191 22.216);
+
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  --sidebar: color-mix(in oklab, var(--foreground) 7%, var(--background));
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@ocai/app-sdk-ui",
+  "version": "0.1.0",
+  "description": "Shared design tokens and AI-app UI primitives for OceanAI products.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./chat.css": "./dist/chat.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.map"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ocai-labs/app-sdk-ui.git",
+    "directory": "packages/ui"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "@streamdown/math": "^1.0.0",
+    "ai": "^6.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "streamdown": "^2.5.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.14.0",
+    "radix-ui": "^1.4.3",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@streamdown/math": "^1.0.2",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "ai": "^6.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "streamdown": "^2.5.0",
+    "typescript": "~5.6.0",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build && cp src/tokens.css src/chat/chat.css dist/",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}