@calliopelabs/ui 0.14.0 → 0.16.0

package/dist/agent/mock.d.ts

@@ -1,8 +1,9 @@
 /**
- * A mock AG-UI agent for Storybook and tests: a real `@ag-ui/client`
- * `HttpAgent` whose fetch is answered from a script instead of the network,
- * as a server-sent event stream. The client's own parser, verifier and
- * message bookkeeping run exactly as they do against a live endpoint.
+ * Agents from functions: `createFunctionAgent` adapts any function that
+ * produces AG-UI events (a non-AG-UI backend, wrapped), and `createMockAgent`
+ * plays recorded turns for Storybook and tests. Both are a real
+ * `@ag-ui/client` `HttpAgent` whose fetch is answered in the page as a
+ * server-sent event stream, never over the network.
  */
 import { HttpAgent } from "@ag-ui/client";
 import { type Message, type RunAgentInput } from "@ag-ui/core";
@@ -23,6 +24,27 @@ export interface MockAgentOptions {
     /** Every request's input, for a test to read. */
     onRequest?: (input: RunAgentInput) => void;
 }
+/**
+ * The events of one run, as a function produces them: a list, a promise of
+ * one, or an async iterable that yields them as they come. The run's start
+ * and finish are added unless the function emits them.
+ */
+export type AgentRunFunction = (input: RunAgentInput, signal: AbortSignal) => Iterable<AgUiEvent> | AsyncIterable<AgUiEvent> | Promise<Iterable<AgUiEvent>>;
+export interface FunctionAgentOptions {
+    threadId?: string;
+    initialMessages?: Message[];
+    initialState?: unknown;
+    /** Pause before each event, in ms (a recording played back at reading speed). */
+    delay?: number;
+}
+/**
+ * An AG-UI agent from a function: the adapter for a backend that does not
+ * speak AG-UI yet (a request and response endpoint, a custom stream), and
+ * the base of `createMockAgent`. It is a real `HttpAgent` whose transport is
+ * the function, so the client's parser, verifier and message bookkeeping run
+ * as they do against a live endpoint, and `stop` aborts `signal`.
+ */
+export declare function createFunctionAgent(run: AgentRunFunction, { threadId, initialMessages, initialState, delay }?: FunctionAgentOptions): HttpAgent;
 /** An agent that answers from `turns`, streaming each event as SSE. */
 export declare function createMockAgent({ turns, delay, threadId, initialMessages, initialState, onRequest, }: MockAgentOptions): HttpAgent;
 /** An assistant's streamed reply, in `chunks`, as the events that make it. */

package/dist/agent/mock.js

@@ -1,8 +1,9 @@
 /**
- * A mock AG-UI agent for Storybook and tests: a real `@ag-ui/client`
- * `HttpAgent` whose fetch is answered from a script instead of the network,
- * as a server-sent event stream. The client's own parser, verifier and
- * message bookkeeping run exactly as they do against a live endpoint.
+ * Agents from functions: `createFunctionAgent` adapts any function that
+ * produces AG-UI events (a non-AG-UI backend, wrapped), and `createMockAgent`
+ * plays recorded turns for Storybook and tests. Both are a real
+ * `@ag-ui/client` `HttpAgent` whose fetch is answered in the page as a
+ * server-sent event stream, never over the network.
  */
 import { HttpAgent } from "@ag-ui/client";
 import { EventType } from "@ag-ui/core";
@@ -16,56 +17,66 @@ const sleep = (ms, signal) => new Promise((resolve, reject) => {
         reject(new DOMException("Aborted", "AbortError"));
     }, { once: true });
 });
-/** Wraps a turn's events in its run's start and, unless they end it, its finish. */
-function framed(input, events) {
-    const ends = events.some((e) => e.type === EventType.RUN_FINISHED || e.type === EventType.RUN_ERROR);
-    return [
-        { type: EventType.RUN_STARTED, threadId: input.threadId, runId: input.runId },
-        ...events,
-        ...(ends
-            ? []
-            : [
-                {
-                    type: EventType.RUN_FINISHED,
-                    threadId: input.threadId,
-                    runId: input.runId,
-                },
-            ]),
-    ];
+async function* eventsOf(output) {
+    if (Symbol.asyncIterator in output)
+        yield* output;
+    else
+        yield* output;
 }
-/** An agent that answers from `turns`, streaming each event as SSE. */
-export function createMockAgent({ turns, delay = 30, threadId, initialMessages, initialState, onRequest, }) {
-    let turn = 0;
+/**
+ * An AG-UI agent from a function: the adapter for a backend that does not
+ * speak AG-UI yet (a request and response endpoint, a custom stream), and
+ * the base of `createMockAgent`. It is a real `HttpAgent` whose transport is
+ * the function, so the client's parser, verifier and message bookkeeping run
+ * as they do against a live endpoint, and `stop` aborts `signal`.
+ */
+export function createFunctionAgent(run, { threadId, initialMessages, initialState, delay = 0 } = {}) {
     const fetch = async (_url, init) => {
         const input = JSON.parse(String(init.body));
-        onRequest?.(input);
-        const index = turn++;
-        const script = turns[Math.min(index, turns.length - 1)] ?? [];
-        const events = framed(input, typeof script === "function" ? script(input, index) : script);
-        const signal = init.signal;
+        const signal = init.signal ?? new AbortController().signal;
         const body = new ReadableStream({
             async start(controller) {
                 try {
-                    for (const event of events) {
+                    let ended = false;
+                    controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: EventType.RUN_STARTED, threadId: input.threadId, runId: input.runId })}\n\n`));
+                    const output = run(input, signal);
+                    const source = output instanceof Promise ? await output : output;
+                    for await (const event of eventsOf(source)) {
                         if (delay > 0)
                             await sleep(delay, signal);
-                        else
-                            await Promise.resolve();
-                        if (signal?.aborted)
+                        if (signal.aborted)
                             throw new DOMException("Aborted", "AbortError");
+                        if (event.type === EventType.RUN_STARTED)
+                            continue;
+                        if (event.type === EventType.RUN_FINISHED || event.type === EventType.RUN_ERROR)
+                            ended = true;
                         controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
                     }
+                    if (!ended) {
+                        const finished = {
+                            type: EventType.RUN_FINISHED,
+                            threadId: input.threadId,
+                            runId: input.runId,
+                        };
+                        controller.enqueue(encoder.encode(`data: ${JSON.stringify(finished)}\n\n`));
+                    }
                     controller.close();
                 }
                 catch (error) {
-                    controller.error(error);
+                    if (signal.aborted)
+                        controller.error(error);
+                    else {
+                        const failed = {
+                            type: EventType.RUN_ERROR,
+                            message: error instanceof Error ? error.message : String(error),
+                        };
+                        controller.enqueue(encoder.encode(`data: ${JSON.stringify(failed)}\n\n`));
+                        controller.close();
+                    }
                 }
             },
         });
-        return new Response(body, {
-            status: 200,
-            headers: { "content-type": "text/event-stream" },
-        });
+        return new Response(body, { status: 200, headers: { "content-type": "text/event-stream" } });
     };
     return new HttpAgent({
         url: "https://agent.invalid/agui",
@@ -75,6 +86,26 @@ export function createMockAgent({ turns, delay = 30, threadId, initialMessages,
         ...(initialState !== undefined ? { initialState: initialState } : {}),
     });
 }
+/** An agent that answers from `turns`, streaming each event as SSE. */
+export function createMockAgent({ turns, delay = 30, threadId, initialMessages, initialState, onRequest, }) {
+    let turn = 0;
+    return createFunctionAgent(async function* (input) {
+        onRequest?.(input);
+        const index = turn++;
+        const script = turns[Math.min(index, turns.length - 1)] ?? [];
+        const events = typeof script === "function" ? script(input, index) : script;
+        // Yield once first, so even a delay of 0 streams instead of arriving in one piece.
+        for (const event of events) {
+            await Promise.resolve();
+            yield event;
+        }
+    }, {
+        delay,
+        ...(threadId ? { threadId } : {}),
+        ...(initialMessages ? { initialMessages } : {}),
+        ...(initialState !== undefined ? { initialState } : {}),
+    });
+}
 /** An assistant's streamed reply, in `chunks`, as the events that make it. */
 export function textEvents(messageId, ...chunks) {
     return [

package/dist/agent/renderers.d.ts

@@ -0,0 +1,49 @@
+import type * as React from "react";
+import { type AgUiInterrupt, type ChatToolCall } from "../chat/model.js";
+import type { CalliopeAgentApi } from "./AgentProvider.js";
+import type { AgentToolRenderProps } from "./tool.js";
+/** What a tool renderer draws from: the call, its arguments and result, and the agent. */
+export interface ToolRendererProps<Args = unknown> extends AgentToolRenderProps<Args> {
+    /** The result parsed as JSON, or as text when it is not JSON. */
+    result: unknown;
+    agent: CalliopeAgentApi;
+}
+/** What a custom-event renderer draws from: the latest value of its event, and the agent. */
+export interface CustomRendererProps<Value = unknown> {
+    name: string;
+    value: Value;
+    /** Every value the event has had under this key, oldest first. */
+    history: readonly Value[];
+    agent: CalliopeAgentApi;
+}
+/** What an interrupt renderer draws from: the open interrupt and how to answer it. */
+export interface InterruptRendererProps {
+    interrupt: AgUiInterrupt;
+    /** Answers it; the run resumes once every open interrupt has an answer. */
+    resolve: (payload?: unknown) => void;
+    cancel: () => void;
+    agent: CalliopeAgentApi;
+}
+export interface StateRendererProps<State = unknown> {
+    state: State;
+    setState: (state: State) => void;
+    agent: CalliopeAgentApi;
+}
+/**
+ * Generative UI: host components for what the agent emits. A tool call by
+ * name (the agent's backend tools as well as the browser's), an AG-UI
+ * `CUSTOM` event by name (drawn where it arrived; an event carrying an `id`
+ * in its value replaces its earlier values in place, so progress updates
+ * one card), an interrupt by reason, and the shared state.
+ */
+export interface AgentRenderers {
+    tools?: Readonly<Record<string, React.ComponentType<ToolRendererProps<any>>>>;
+    custom?: Readonly<Record<string, React.ComponentType<CustomRendererProps<any>>>>;
+    interrupts?: Readonly<Record<string, React.ComponentType<InterruptRendererProps>>>;
+    /** Draws the shared state above the conversation. */
+    state?: React.ComponentType<StateRendererProps<any>>;
+}
+/** Several registries as one; a later one wins a name. */
+export declare function mergeRenderers(...registries: (AgentRenderers | undefined)[]): AgentRenderers;
+/** A tool's result as a renderer reads it. */
+export declare function parseResult(call: ChatToolCall): unknown;

package/dist/agent/renderers.js

@@ -0,0 +1,27 @@
+import { parseToolCallArgs } from "../chat/model.js";
+/* eslint-enable @typescript-eslint/no-explicit-any */
+/** Several registries as one; a later one wins a name. */
+export function mergeRenderers(...registries) {
+    const merged = {
+        tools: {},
+        custom: {},
+        interrupts: {},
+    };
+    for (const r of registries) {
+        if (!r)
+            continue;
+        merged.tools = { ...merged.tools, ...r.tools };
+        merged.custom = { ...merged.custom, ...r.custom };
+        merged.interrupts = { ...merged.interrupts, ...r.interrupts };
+        if (r.state)
+            merged.state = r.state;
+    }
+    return merged;
+}
+/** A tool's result as a renderer reads it. */
+export function parseResult(call) {
+    if (call.result === undefined)
+        return undefined;
+    const parsed = parseToolCallArgs(call.result);
+    return parsed === undefined ? call.result : parsed;
+}

package/dist/appearance/brands.d.ts

@@ -163,6 +163,23 @@ export declare const loadrBrand: {
         readonly light: "paper";
     };
 };
+/**
+ * Calliope AI Deep Data Agent: the family amber on a warm umber sidebar, with
+ * charcoal and mist as its defaults. A separate product from Chat Studio, and
+ * kept visibly apart from it (Studio blue on black and paper), from Astrolift
+ * (green), Zentinelle (teal) and Loadr (blue).
+ */
+export declare const deepDataAgentBrand: {
+    readonly id: "deep-data-agent";
+    readonly name: "Deep Data Agent";
+    readonly accent: "amber";
+    readonly sidebar: "#1a150c";
+    readonly grounds: readonly ["charcoal", "black", "graphite", "paper", "mist"];
+    readonly defaultGround: {
+        readonly dark: "charcoal";
+        readonly light: "mist";
+    };
+};
 /**
  * Cykick: cyan on near-black with square corners, from
  * `ui/theme/native-themes.json` (primary, background, radius 0). Cykick's

package/dist/appearance/brands.js

@@ -101,6 +101,20 @@ export const loadrBrand = {
     grounds: ["black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "charcoal", light: "paper" },
 };
+/**
+ * Calliope AI Deep Data Agent: the family amber on a warm umber sidebar, with
+ * charcoal and mist as its defaults. A separate product from Chat Studio, and
+ * kept visibly apart from it (Studio blue on black and paper), from Astrolift
+ * (green), Zentinelle (teal) and Loadr (blue).
+ */
+export const deepDataAgentBrand = {
+    id: "deep-data-agent",
+    name: "Deep Data Agent",
+    accent: "amber",
+    sidebar: TOKENS.brand["deep-data-agent"].sidebar,
+    grounds: ["charcoal", "black", "graphite", "paper", "mist"],
+    defaultGround: { dark: "charcoal", light: "mist" },
+};
 /**
  * Cykick: cyan on near-black with square corners, from
  * `ui/theme/native-themes.json` (primary, background, radius 0). Cykick's

package/dist/chat/MessageBubble.js

@@ -22,5 +22,5 @@ export function MessageBubble({ message, renderContent, meta, className }) {
     const t = messages.chat;
     const speaker = message.name ?? t.role(message.role);
     const empty = message.content === "";
-    return (_jsxs("article", { "aria-label": t.messageFrom(speaker), "aria-busy": message.streaming || undefined, "data-slot": "message-bubble", "data-role": message.role, className: cn("flex min-w-0 flex-col gap-1", ROLE_CLASS[message.role], className), children: [(message.role !== "user" || meta) && (_jsxs("header", { className: "flex min-w-0 items-center gap-2 text-xs text-muted-foreground", children: [message.role !== "user" && _jsx("span", { className: "font-medium", children: speaker }), meta && _jsx("span", { className: "ml-auto flex items-center gap-2", children: meta })] })), message.streaming && empty ? (_jsxs("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(StatusDot, { tone: "info", pulse: true }), t.thinking] })) : (_jsxs("div", { className: "min-w-0 text-sm [overflow-wrap:anywhere]", children: [renderContent ? (renderContent(message.content, message)) : (_jsx("p", { className: "whitespace-pre-wrap", children: message.content })), message.streaming && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "ml-0.5 inline-block h-4 w-1.5 translate-y-0.5 bg-foreground/60 motion-safe:animate-pulse" }), _jsx("span", { className: "sr-only", children: t.writing })] }))] }))] }));
+    return (_jsxs("article", { "aria-label": t.messageFrom(speaker), "aria-busy": message.streaming || undefined, "data-slot": "message-bubble", "data-role": message.role, className: cn("flex min-w-0 flex-col gap-1", ROLE_CLASS[message.role], className), children: [(message.role !== "user" || meta) && (_jsxs("header", { className: "flex min-w-0 items-center gap-2 text-xs text-muted-foreground", children: [message.role !== "user" && _jsx("span", { className: "font-medium", children: speaker }), meta && _jsx("span", { className: "ml-auto flex items-center gap-2", children: meta })] })), message.streaming && empty ? (_jsxs("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(StatusDot, { tone: "info", pulse: true }), t.thinking] })) : (_jsxs("div", { className: "min-w-0 text-sm [overflow-wrap:break-word]", children: [renderContent ? (renderContent(message.content, message)) : (_jsx("p", { className: "whitespace-pre-wrap", children: message.content })), message.streaming && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "ml-0.5 inline-block h-4 w-1.5 translate-y-0.5 bg-foreground/60 motion-safe:animate-pulse" }), _jsx("span", { className: "sr-only", children: t.writing })] }))] }))] }));
 }

package/dist/chat/MessageList.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type ChatContentRenderer } from "./MessageBubble.js";
-import type { ChatToolCall, ChatView } from "./model.js";
+import type { ChatTimelineItem, ChatToolCall, ChatView } from "./model.js";
 import { type ToolCallCardProps } from "./ToolCallCard.js";
 export interface MessageListProps {
     /** The conversation: a `ChatView`, or the part of one the list reads. */
@@ -15,6 +15,13 @@ export interface MessageListProps {
     toolTitle?: (call: ChatToolCall) => string | undefined;
     onApprove?: ToolCallCardProps["onApprove"];
     onDeny?: ToolCallCardProps["onDeny"];
+    /**
+     * Draws something after a timeline item: generative UI an agent sent
+     * between messages (a progress card, an artifact). Called for each item.
+     */
+    renderAfter?: (item: ChatTimelineItem) => React.ReactNode;
+    /** Drawn after the whole conversation, before a failed run's error: what the run waits on. */
+    footer?: React.ReactNode;
     /** Offered beside a failed run's error. */
     onRetry?: () => void;
     /** The first page of history is loading. */
@@ -33,4 +40,4 @@ export interface MessageListProps {
  * changes, so a long conversation streams without virtualization; a host
  * with thousands of turns pages its history.
  */
-export declare function MessageList({ view, renderContent, renderToolCall, toolTitle, onApprove, onDeny, onRetry, loading, empty, label, className, }: MessageListProps): React.JSX.Element;
+export declare function MessageList({ view, renderContent, renderToolCall, renderAfter, footer, toolTitle, onApprove, onDeny, onRetry, loading, empty, label, className, }: MessageListProps): React.JSX.Element;

package/dist/chat/MessageList.js

@@ -21,7 +21,7 @@ const PINNED = 48;
  * changes, so a long conversation streams without virtualization; a host
  * with thousands of turns pages its history.
  */
-export function MessageList({ view, renderContent, renderToolCall, toolTitle, onApprove, onDeny, onRetry, loading = false, empty, label, className, }) {
+export function MessageList({ view, renderContent, renderToolCall, renderAfter, footer, toolTitle, onApprove, onDeny, onRetry, loading = false, empty, label, className, }) {
     const { messages } = useUI();
     const t = messages.chat;
     const scroller = React.useRef(null);
@@ -48,16 +48,19 @@ export function MessageList({ view, renderContent, renderToolCall, toolTitle, on
         body = empty ?? _jsx(EmptyState, { title: t.empty, description: t.emptyDescription });
     else
         body = (_jsxs(_Fragment, { children: [view.timeline.map((item) => {
+                    const after = renderAfter?.(item);
+                    let node = null;
                     if (item.kind === "message") {
                         const message = byId.messages.get(item.id);
-                        return message ? (_jsx(MemoBubble, { message: message, renderContent: renderContent }, `m:${item.id}`)) : null;
+                        node = message ? _jsx(MemoBubble, { message: message, renderContent: renderContent }) : null;
                     }
-                    const call = byId.calls.get(item.id);
-                    if (!call)
-                        return null;
-                    const custom = renderToolCall?.(call);
-                    return custom !== undefined ? (_jsx(React.Fragment, { children: custom }, `t:${item.id}`)) : (_jsx(MemoToolCall, { call: call, title: toolTitle?.(call), onApprove: onApprove, onDeny: onDeny }, `t:${item.id}`));
-                }), view.status === "error" && view.error && (_jsxs("div", { role: "alert", className: "flex min-w-0 flex-col gap-2 rounded-lg border border-danger-border bg-danger-bg px-3 py-2 text-sm text-danger-fg sm:flex-row sm:items-center", children: [_jsxs("p", { className: "min-w-0 flex-1 [overflow-wrap:anywhere]", children: [_jsx("span", { className: "font-medium", children: t.runFailed }), ": ", view.error.message] }), onRetry && (_jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: t.retry }))] }))] }));
+                    else {
+                        const call = byId.calls.get(item.id);
+                        const custom = call ? renderToolCall?.(call) : undefined;
+                        node = !call ? null : custom !== undefined ? (custom) : (_jsx(MemoToolCall, { call: call, title: toolTitle?.(call), onApprove: onApprove, onDeny: onDeny }));
+                    }
+                    return (_jsxs(React.Fragment, { children: [node, after] }, `${item.kind === "message" ? "m" : "t"}:${item.id}`));
+                }), footer, view.status === "error" && view.error && (_jsxs("div", { role: "alert", className: "flex min-w-0 flex-col gap-2 rounded-lg border border-danger-border bg-danger-bg px-3 py-2 text-sm text-danger-fg sm:flex-row sm:items-center", children: [_jsxs("p", { className: "min-w-0 flex-1 [overflow-wrap:anywhere]", children: [_jsx("span", { className: "font-medium", children: t.runFailed }), ": ", view.error.message] }), onRetry && (_jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: t.retry }))] }))] }));
     return (_jsxs("div", { "data-slot": "message-list", className: cn("relative flex min-h-0 flex-col", className), children: [_jsx("div", { ref: scroller, role: "log", "aria-label": label ?? t.conversation, "aria-busy": view.status === "running" || loading || undefined, 
                 // A scrolling region is reached by keyboard (WCAG 2.1.1).
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex

package/dist/css/appearance.js

@@ -64,7 +64,7 @@
   d.style.setProperty("--radius",
     (c.corners.indexOf(p.corners) > -1 ? p.corners : c.defaults.corners) + "px");
 };
-  var products = {"astrolift":{"product":"astrolift","key":"astrolift.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"emerald":{"mode":"dark","background":"#050b08"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"graphite","light":"mist","accent":"green","density":"compact","corners":2}},"zentinelle":{"product":"zentinelle","key":"zentinelle.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["teal","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"black","light":"mist","accent":"teal","density":"compact","corners":2}},"workbench":{"product":"workbench","key":"workbench.appearance","grounds":{"navy":{"mode":"dark","background":"#0b1120"},"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["workbench-blue","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"navy","light":"mist","accent":"workbench-blue","density":"compact","corners":2}},"chat-studio":{"product":"chat-studio","key":"chat-studio.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["studio-blue","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"black","light":"paper","accent":"studio-blue","density":"compact","corners":2}},"loadr":{"product":"loadr","key":"loadr.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["loadr-blue","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"charcoal","light":"paper","accent":"loadr-blue","density":"compact","corners":2}},"cykick":{"product":"cykick","key":"cykick.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["cykick-cyan","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"black","light":"mist","accent":"cykick-cyan","density":"compact","corners":0}}};
+  var products = {"astrolift":{"product":"astrolift","key":"astrolift.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"emerald":{"mode":"dark","background":"#050b08"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"graphite","light":"mist","accent":"green","density":"compact","corners":2}},"zentinelle":{"product":"zentinelle","key":"zentinelle.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["teal","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"black","light":"mist","accent":"teal","density":"compact","corners":2}},"workbench":{"product":"workbench","key":"workbench.appearance","grounds":{"navy":{"mode":"dark","background":"#0b1120"},"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["workbench-blue","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"navy","light":"mist","accent":"workbench-blue","density":"compact","corners":2}},"chat-studio":{"product":"chat-studio","key":"chat-studio.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["studio-blue","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"black","light":"paper","accent":"studio-blue","density":"compact","corners":2}},"loadr":{"product":"loadr","key":"loadr.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["loadr-blue","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"charcoal","light":"paper","accent":"loadr-blue","density":"compact","corners":2}},"cykick":{"product":"cykick","key":"cykick.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["cykick-cyan","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"black","light":"mist","accent":"cykick-cyan","density":"compact","corners":0}},"deep-data-agent":{"product":"deep-data-agent","key":"deep-data-agent.appearance","grounds":{"charcoal":{"mode":"dark","background":"#0e0f10"},"black":{"mode":"dark","background":"#000000"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"charcoal","light":"mist","accent":"amber","density":"compact","corners":2}}};
   var d = document.documentElement;
   var hex = /^#[0-9a-f]{6}$/;
   var has = function (o, k) {

package/dist/css/calliope.css

@@ -490,6 +490,11 @@
   --brand-on-primary: #ffffff;
 }
 
+/* Product: Deep Data Agent */
+[data-product="deep-data-agent"] {
+  --brand-sidebar: #1a150c;
+}
+
 /*
  * @calliopelabs/ui CSS layer: components.
  *

package/dist/css/tokens.css

@@ -489,3 +489,8 @@
   --brand-primary: #0e7490;
   --brand-on-primary: #ffffff;
 }
+
+/* Product: Deep Data Agent */
+[data-product="deep-data-agent"] {
+  --brand-sidebar: #1a150c;
+}

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { cn } from "./lib/cn.js";
 export { ACCENTS, ACCENT_KEYS, DENSITIES, DENSITY_KEYS, GROUNDS, GROUND_KEYS, MODE_TOKENS, SURFACES, type AccentSpec, type Density, type FamilyAccent, type Ground, type Mode, type StatusName, } from "./theme/tokens.js";
 export { MIN_NON_TEXT_CONTRAST, MIN_TEXT_CONTRAST, contrastRatio, luminance, } from "./theme/contrast.js";
 export { CORNERS, defineProduct, type BrandAccent, type Corners, type Product, type ProductAccent, type ProductConfig, type ProductTheme, } from "./appearance/product.js";
-export { astroliftBrand, chatStudioBrand, cykickBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "./appearance/brands.js";
+export { astroliftBrand, chatStudioBrand, cykickBrand, deepDataAgentBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "./appearance/brands.js";
 export { accentContrast, appearanceFromServer, applyAppearance, clearAppearance, inkFor, isCustomAccent, modeFor, normalize, normalizePartial, parseCustomAccent, readAppearance, resolveAppearance, writeAppearance, type Appearance, type CustomAccent, type OrgAppearancePolicy, type ResolvedAppearance, } from "./appearance/appearance.js";
 export { appearanceScript, bootConfig, productStyles, type BootConfig } from "./appearance/boot.js";
 export { BRAND_ACCENT_KEY, brandStyleVars, brandStyles, htmlAttributes, resolveRuntimeBrand, withBrand, type ResolvedRuntimeBrand, type RuntimeBrand, } from "./appearance/runtime-brand.js";
@@ -62,6 +62,11 @@ export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 export { Popover, PopoverAnchor, PopoverContent, PopoverHeader, PopoverTrigger, } from "./primitives/Popover.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/Tabs.js";
 export { Skeleton } from "./primitives/Skeleton.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/Tooltip.js";
+export { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, } from "./primitives/ContextMenu.js";
+export { ScrollArea, type ScrollAreaProps } from "./primitives/ScrollArea.js";
+export { Badge, badgeVariants, type BadgeProps } from "./primitives/Badge.js";
+export { ToastProvider, useToast, type ToastApi, type ToastOptions, type ToastProviderProps, } from "./primitives/Toast.js";
 export type { WorkflowAction, WorkflowAvailability, WorkflowModule, WorkflowPermissions, WorkflowScope, WorkflowStatus, WorkflowSummary, } from "./workflow/model.js";
 export { WorkflowCard, WorkflowCardSkeleton, type WorkflowCardActions, type WorkflowCardProps, } from "./workflow/WorkflowCard.js";
 export { WorkflowQuestionCard, type WorkflowQuestionCardProps, } from "./workflow/WorkflowQuestionCard.js";

package/dist/index.js

@@ -11,7 +11,7 @@ export { ACCENTS, ACCENT_KEYS, DENSITIES, DENSITY_KEYS, GROUNDS, GROUND_KEYS, MO
 export { MIN_NON_TEXT_CONTRAST, MIN_TEXT_CONTRAST, contrastRatio, luminance, } from "./theme/contrast.js";
 // Product and appearance
 export { CORNERS, defineProduct, } from "./appearance/product.js";
-export { astroliftBrand, chatStudioBrand, cykickBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "./appearance/brands.js";
+export { astroliftBrand, chatStudioBrand, cykickBrand, deepDataAgentBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "./appearance/brands.js";
 export { accentContrast, appearanceFromServer, applyAppearance, clearAppearance, inkFor, isCustomAccent, modeFor, normalize, normalizePartial, parseCustomAccent, readAppearance, resolveAppearance, writeAppearance, } from "./appearance/appearance.js";
 export { appearanceScript, bootConfig, productStyles } from "./appearance/boot.js";
 export { BRAND_ACCENT_KEY, brandStyleVars, brandStyles, htmlAttributes, resolveRuntimeBrand, withBrand, } from "./appearance/runtime-brand.js";
@@ -73,6 +73,11 @@ export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 export { Popover, PopoverAnchor, PopoverContent, PopoverHeader, PopoverTrigger, } from "./primitives/Popover.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/Tabs.js";
 export { Skeleton } from "./primitives/Skeleton.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/Tooltip.js";
+export { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, } from "./primitives/ContextMenu.js";
+export { ScrollArea } from "./primitives/ScrollArea.js";
+export { Badge, badgeVariants } from "./primitives/Badge.js";
+export { ToastProvider, useToast, } from "./primitives/Toast.js";
 export { WorkflowCard, WorkflowCardSkeleton, } from "./workflow/WorkflowCard.js";
 export { WorkflowQuestionCard, } from "./workflow/WorkflowQuestionCard.js";
 export { ANY_FILTER, DEFAULT_WORKFLOW_FILTERS, filterWorkflows, isFiltered, } from "./workflow/gallery.js";

package/dist/primitives/Badge.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+export declare const badgeVariants: (props?: ({
+    variant?: "neutral" | "outline" | "primary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {
+}
+/**
+ * A small count or label. Not a status: a state with a meaning (running,
+ * failed) is a StatusBadge, whose colours never follow the accent. A badge
+ * that is only a number needs words for a screen reader, so give it an
+ * `aria-label` ("3 unread") or put the noun beside it.
+ */
+export declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;

package/dist/primitives/Badge.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+export const badgeVariants = cva("inline-flex h-5 w-fit min-w-5 shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-1.5 text-xs font-medium whitespace-nowrap tabular-nums [&>svg]:pointer-events-none [&>svg]:size-3", {
+    variants: {
+        variant: {
+            /** Quiet: a count beside a label, a kind ("folder", "beta"). */
+            neutral: "border-transparent bg-secondary text-secondary-foreground",
+            /** The accent: a new count that wants attention. */
+            primary: "border-transparent bg-primary text-primary-foreground",
+            /** A hairline only, for dense rows. */
+            outline: "border-border bg-transparent text-muted-foreground",
+        },
+    },
+    defaultVariants: { variant: "neutral" },
+});
+/**
+ * A small count or label. Not a status: a state with a meaning (running,
+ * failed) is a StatusBadge, whose colours never follow the accent. A badge
+ * that is only a number needs words for a screen reader, so give it an
+ * `aria-label` ("3 unread") or put the noun beside it.
+ */
+export function Badge({ className, variant, ...props }) {
+    return (_jsx("span", { "data-slot": "badge", "data-variant": variant ?? "neutral", className: cn(badgeVariants({ variant }), className), ...props }));
+}

package/dist/primitives/ContextMenu.d.ts

@@ -0,0 +1,18 @@
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+import type * as React from "react";
+/**
+ * The right-click (and Shift+F10, and the context-menu key) menu. Every
+ * action in it must also be reachable another way: a toolbar button, a row
+ * menu or a shortcut, since touch and many keyboard users never open it.
+ */
+export declare function ContextMenu(props: React.ComponentProps<typeof ContextMenuPrimitive.Root>): React.JSX.Element;
+export declare function ContextMenuTrigger(props: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>): React.JSX.Element;
+export declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>): React.JSX.Element;
+export declare function ContextMenuGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.Group>): React.JSX.Element;
+export declare function ContextMenuItem({ className, variant, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+export declare function ContextMenuLabel({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Label>): React.JSX.Element;
+export declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>): React.JSX.Element;
+/** The item's keyboard shortcut, right-aligned. Decorative: the shortcut itself is the app's. */
+export declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;

package/dist/primitives/ContextMenu.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/**
+ * The right-click (and Shift+F10, and the context-menu key) menu. Every
+ * action in it must also be reachable another way: a toolbar button, a row
+ * menu or a shortcut, since touch and many keyboard users never open it.
+ */
+export function ContextMenu(props) {
+    return _jsx(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props });
+}
+export function ContextMenuTrigger(props) {
+    return _jsx(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", ...props });
+}
+export function ContextMenuContent({ className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Content, { "data-slot": "context-menu-content", className: cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-40 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[state=open]:animate-cui-fade-in", className), ...props }) }));
+}
+export function ContextMenuGroup(props) {
+    return _jsx(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props });
+}
+export function ContextMenuItem({ className, variant = "default", ...props }) {
+    return (_jsx(ContextMenuPrimitive.Item, { "data-slot": "context-menu-item", "data-variant": variant, className: cn("relative flex cursor-default items-center gap-1.5 rounded-lg px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[variant=destructive]:text-danger-fg data-[variant=destructive]:focus:bg-danger/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+export function ContextMenuLabel({ className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Label, { "data-slot": "context-menu-label", className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground", className), ...props }));
+}
+export function ContextMenuSeparator({ className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Separator, { "data-slot": "context-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+/** The item's keyboard shortcut, right-aligned. Decorative: the shortcut itself is the app's. */
+export function ContextMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "context-menu-shortcut", "aria-hidden": true, className: cn("ml-auto pl-4 font-mono text-xs text-muted-foreground", className), ...props }));
+}

package/dist/primitives/ScrollArea.d.ts

@@ -0,0 +1,16 @@
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import type * as React from "react";
+export interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {
+    /**
+     * Names the scrolling region. Given, the viewport is a focusable region so
+     * a keyboard can scroll it; leave it out when the content has its own
+     * focusable items (a list of links, a tree).
+     */
+    label?: string;
+    /** Which bars to draw. Defaults to vertical. */
+    orientation?: "vertical" | "horizontal" | "both";
+    viewportClassName?: string;
+}
+/** A scrolling box with thin, token-coloured bars that look the same on every platform. */
+export declare function ScrollArea({ className, viewportClassName, children, label, orientation, ...props }: ScrollAreaProps): React.JSX.Element;
+export declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element;