@belonguniverseai/react-sdk 0.1.0

package/dist/components/ai-elements/reasoning.d.ts

@@ -0,0 +1,26 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
+import { ComponentProps, ReactNode } from 'react';
+interface ReasoningContextValue {
+    isStreaming: boolean;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    duration: number | undefined;
+}
+export declare const useReasoning: () => ReasoningContextValue;
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    duration?: number;
+};
+export declare const Reasoning: import('react').MemoExoticComponent<({ className, isStreaming, open, defaultOpen, onOpenChange, duration: durationProp, children, ...props }: ReasoningProps) => import("react").JSX.Element>;
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+export declare const ReasoningTrigger: import('react').MemoExoticComponent<({ className, children, getThinkingMessage, ...props }: ReasoningTriggerProps) => import("react").JSX.Element>;
+export type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {
+    children: string;
+};
+export declare const ReasoningContent: import('react').MemoExoticComponent<({ className, children, ...props }: ReasoningContentProps) => import("react").JSX.Element>;
+export {};

package/dist/components/ai-elements/shell-highlight.d.ts

@@ -0,0 +1,3 @@
+export declare const ShellHighlight: ({ code }: {
+    readonly code: string;
+}) => import("react").JSX.Element;

package/dist/components/ai-elements/shimmer.d.ts

@@ -0,0 +1,9 @@
+import { ElementType } from 'react';
+export interface TextShimmerProps {
+    children: string;
+    as?: ElementType;
+    className?: string;
+    duration?: number;
+    spread?: number;
+}
+export declare const Shimmer: import('react').MemoExoticComponent<({ children, as: Component, className, duration, spread, }: TextShimmerProps) => import("react").JSX.Element>;

package/dist/components/ai-elements/suggestion.d.ts

@@ -0,0 +1,10 @@
+import { Button } from '../ui/button';
+import { ScrollArea } from '../ui/scroll-area';
+import { ComponentProps } from 'react';
+export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
+export declare const Suggestions: ({ className, children, ...props }: SuggestionsProps) => import("react").JSX.Element;
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+    suggestion: string;
+    onClick?: (suggestion: string) => void;
+};
+export declare const Suggestion: ({ suggestion, onClick, className, variant, size, children, ...props }: SuggestionProps) => import("react").JSX.Element;

package/dist/components/ai-elements/task.d.ts

@@ -0,0 +1,14 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
+import { ComponentProps, ReactNode } from 'react';
+export type TaskItemFileProps = ComponentProps<"div">;
+export declare const TaskItemFile: ({ children, className, ...props }: TaskItemFileProps) => import("react").JSX.Element;
+export type TaskItemProps = ComponentProps<"div">;
+export declare const TaskItem: ({ children, className, ...props }: TaskItemProps) => import("react").JSX.Element;
+export type TaskProps = ComponentProps<typeof Collapsible>;
+export declare const Task: ({ defaultOpen, className, ...props }: TaskProps) => import("react").JSX.Element;
+export type TaskTriggerProps = Omit<ComponentProps<typeof CollapsibleTrigger>, "title"> & {
+    title: ReactNode;
+};
+export declare const TaskTrigger: ({ children, className, title, ...props }: TaskTriggerProps) => import("react").JSX.Element;
+export type TaskContentProps = ComponentProps<typeof CollapsibleContent>;
+export declare const TaskContent: ({ children, className, ...props }: TaskContentProps) => import("react").JSX.Element;

package/dist/components/ai-elements/terminal-task.d.ts

@@ -0,0 +1,5 @@
+import { SandboxCommandData, ToolCallData } from '../../stream/belong-data-parts.ts';
+export declare const TerminalTask: ({ command, output, }: {
+    readonly command: ToolCallData;
+    readonly output: SandboxCommandData | null;
+}) => import("react").JSX.Element;

package/dist/components/ai-elements/tool.d.ts

@@ -0,0 +1,31 @@
+import { Collapsible, CollapsibleContent } from '../ui/collapsible';
+import { DynamicToolUIPart, ToolUIPart } from 'ai';
+import { ComponentProps } from 'react';
+export type ToolProps = ComponentProps<typeof Collapsible>;
+export declare const Tool: ({ className, ...props }: ToolProps) => import("react").JSX.Element;
+export type ToolPart = ToolUIPart | DynamicToolUIPart;
+export type ToolHeaderProps = {
+    title?: string;
+    className?: string;
+} & ({
+    type: ToolUIPart["type"];
+    state: ToolUIPart["state"];
+    toolName?: never;
+} | {
+    type: DynamicToolUIPart["type"];
+    state: DynamicToolUIPart["state"];
+    toolName: string;
+});
+export declare const getStatusBadge: (status: ToolPart["state"]) => import("react").JSX.Element;
+export declare const ToolHeader: ({ className, title, type, state, toolName, ...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: ToolPart["input"];
+};
+export declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => import("react").JSX.Element;
+export type ToolOutputProps = ComponentProps<"div"> & {
+    output: ToolPart["output"];
+    errorText: ToolPart["errorText"];
+};
+export declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => import("react").JSX.Element | null;

package/dist/components/embed/AgentGrantCard.d.ts

@@ -0,0 +1,25 @@
+import { BelongThemeBrand, BelongThemePalette } from '../../types/public.ts';
+/**
+ * The agent-grant consent surface, rendered above the chat thread.
+ * Non-blocking: chat works without a grant (the agent falls back to
+ * device login in the terminal); this card just offers/states the
+ * delegated CLI session.
+ *
+ *   none / expired / revoked → consent (or re-consent) prompt
+ *   active                   → slim "connected until <time>" row + revoke
+ *   unconfigured embed       → renders nothing (host didn't pass a scope)
+ *
+ * The scope (the host's active workspace) is re-read from the page URL
+ * (SPA pushState doesn't fire events, so poll): switching workspace
+ * re-keys the status query — a grant is single-workspace, so the new
+ * workspace prompts its own consent, and dismissal is per-workspace.
+ *
+ * The Allow click POSTs with the same host web JWT every API call
+ * carries; only status + expiry ever come back — never tokens.
+ */
+type AgentGrantCardProps = {
+    readonly palette: BelongThemePalette;
+    readonly brand: BelongThemeBrand;
+};
+export declare function AgentGrantCard({ palette, brand }: AgentGrantCardProps): import("react").JSX.Element | null;
+export {};

package/dist/components/embed/AtMentionMenu.d.ts

@@ -0,0 +1,13 @@
+import { WorkspaceFile } from '../../api/workspace-files.ts';
+import { ComposerPickerProps } from './ComposerMenu';
+/**
+ * The `@`-mention file picker shown above the composer when the user types `@`
+ * (BEL-89) — the sibling of {@link SlashCommandMenu}. Purely presentational: the
+ * parent owns the filtered list, highlight, and select. Each row shows the
+ * filename prominently with its directory muted alongside, so duplicate basenames
+ * in different folders stay distinguishable. Built on the shared
+ * {@link ComposerMenu} chrome (see there for focus / aria behavior).
+ */
+export declare function AtMentionMenu({ files, highlightedIndex, onSelect, onHighlight, }: {
+    files: readonly WorkspaceFile[];
+} & ComposerPickerProps): import("react").JSX.Element;

package/dist/components/embed/BelongMark.d.ts

@@ -0,0 +1,4 @@
+export declare function BelongMark({ size, className }: {
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/embed/BrandMark.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Renders the active brand mark. When the theme supplies a `logo` data-URL we
+ * render it in an `<img>` (SVG-in-img can't execute script — safe). With no
+ * logo (or an empty string) we fall back to the built-in Belong mark.
+ */
+export declare function BrandMark({ logo, size, alt, className, }: {
+    logo?: string;
+    size?: number;
+    alt?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/embed/CapabilityHints.d.ts

@@ -0,0 +1 @@
+export declare function CapabilityHints(): import("react").JSX.Element;

package/dist/components/embed/ComposerMenu.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+/**
+ * The popover chrome shared by the composer's two pickers — `SlashCommandMenu`
+ * (`/`) and `AtMentionMenu` (`@`): a listbox floating just above the composer,
+ * plus its option rows. Both pickers are purely presentational (the parent owns
+ * the filtered list, highlight, and select); keeping the wrapper + row markup in
+ * one place stops them drifting and keeps the popover styling DRY.
+ *
+ * `onPointerDown` preventDefault on a row keeps composer focus, so insert +
+ * refocus stays seamless. Each picker passes its own ids / test-ids / aria-label
+ * (consumed by the composer's `aria-controls` + `aria-activedescendant`) and a
+ * `layout` for the only part that differs — the row's flex direction/gap.
+ */
+/** The highlight + select callbacks both composer pickers take from the parent. */
+export type ComposerPickerProps = {
+    highlightedIndex: number;
+    onSelect: (value: string) => void;
+    onHighlight: (index: number) => void;
+};
+export declare function ComposerMenu({ id, testId, ariaLabel, children, }: {
+    id: string;
+    testId: string;
+    ariaLabel: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function ComposerMenuOption({ id, testId, selected, index, layout, onSelect, onHighlight, children, }: {
+    id: string;
+    testId: string;
+    selected: boolean;
+    index: number;
+    /** Row layout classes — the only part that differs between the two pickers. */
+    layout: string;
+    onSelect: () => void;
+    onHighlight: (index: number) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/embed/CsvTable.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Render CSV text as a scrollable table instead of a raw monospace dump.
+ *
+ * The first row is treated as the header; a sticky header + sticky row-number
+ * gutter keep orientation while scrolling the (often wide) body. Cells don't
+ * wrap, so wide sheets scroll horizontally rather than smearing into tall rows.
+ */
+export declare const CsvTable: ({ text }: {
+    readonly text: string;
+}) => import("react").JSX.Element;

package/dist/components/embed/EmbedAvatar.d.ts

@@ -0,0 +1,35 @@
+import { BelongTheme, BelongThemePalette, PresetName } from '../../types/public.ts';
+/**
+ * Logged-in user avatar (rail top). Opens a menu: "Signed in as …", the theme
+ * controls (Dark mode + Move to left/right — kept here because this dock has a
+ * multi-brand theme store), a Voice group (push-to-talk key rebinding, shown
+ * only when the browser supports mic capture), an Appearance group (accent
+ * colour + custom CSS), then Log out. Gradient is brand-driven (Ocean → Deep
+ * Sea) via the active palette.
+ */
+export declare function EmbedAvatar({ user, size, theme, palette, side, sessionId, voiceSupported, accent, cssVars, presets, activePreset, onToggleMode, onToggleSide, onAccentChange, onAccentReset, onCssVarsChange, onApplyPreset, onLogout, }: {
+    user: string | null;
+    size?: number;
+    theme: BelongTheme;
+    palette: BelongThemePalette;
+    side: "left" | "right";
+    /** Active chat session id (null when no conversation is open yet). Shown in
+     *  the menu under the build stamp and copyable for telemetry correlation. */
+    sessionId: string | null;
+    /** Browser supports mic capture — gates the Voice (push-to-talk) section. */
+    voiceSupported: boolean;
+    accent: string | null;
+    cssVars: Record<string, string>;
+    presets: readonly {
+        name: PresetName;
+        label: string;
+    }[];
+    activePreset: PresetName;
+    onToggleMode: () => void;
+    onToggleSide: () => void;
+    onAccentChange: (c: string) => void;
+    onAccentReset: () => void;
+    onCssVarsChange: (v: Record<string, string>) => void;
+    onApplyPreset: (name: PresetName) => void;
+    onLogout: () => void;
+}): import("react").JSX.Element;

package/dist/components/embed/EmbedComposer.d.ts

@@ -0,0 +1,31 @@
+import { PromptInputMessage } from '../ai-elements/prompt-input';
+import { BelongTheme, BelongThemePalette } from '../../types/public.ts';
+import { ChatMode } from '../../embed/chat-mode.ts';
+import { SkillSummary } from '../../api/skills.ts';
+import { WorkspaceFile } from '../../api/workspace-files.ts';
+import { UsageMeterProps } from './UsageMeter.tsx';
+export declare function EmbedComposer({ draft, status, submitting, disabled, voiceSupported, voiceConfigured, listening, theme, palette, skills, workspaceFiles, mode, onModeChange, onDraftChange, onMentionOpen, onSubmit, onStop, usage, }: Readonly<{
+    draft: string;
+    status: "submitted" | "streaming" | "ready" | "error";
+    submitting: boolean;
+    disabled: boolean;
+    voiceSupported: boolean;
+    /** False once the backend answered "voice keys not configured" (§C6c). */
+    voiceConfigured: boolean;
+    listening: boolean;
+    /** Full theme — the mode menu portals outside the dock root (themeToPortalStyle). */
+    theme: BelongTheme;
+    palette: BelongThemePalette;
+    skills: readonly SkillSummary[];
+    /** Files in the shared `~/workspace` tree — the `@`-mention picker's options (BEL-89). */
+    workspaceFiles: readonly WorkspaceFile[];
+    mode: ChatMode;
+    onModeChange: (mode: ChatMode) => void;
+    onDraftChange: (v: string) => void;
+    /** Called when a fresh `@` token opens — a hook to refresh the file list (BEL-89). */
+    onMentionOpen?: () => void;
+    onSubmit: (message: PromptInputMessage) => void | Promise<void>;
+    onStop: () => void;
+    /** F3 — context/cost meter data (null hides the meter). */
+    usage: UsageMeterProps["usage"];
+}>): import("react").JSX.Element;

package/dist/components/embed/EmbedConversation.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Belong-styled conversation frame. The chat route passes the rendered message
+ * list as children (keeping its useChat mapping + PartRenderer dispatch); this
+ * wrapper adds the centered mic-status chip and the streaming "working…" + Stop
+ * row.
+ */
+export declare function EmbedConversation({ micOn, streaming, agentName, scrollResize, onStop, onClear, clearDisabled, children, }: Readonly<{
+    micOn: boolean;
+    streaming: boolean;
+    /**
+     * BEL-106 — the active agent's display name (the brand name shown in the
+     * header, e.g. "Simetrik"). Drives the streaming "<name> is working…" line so
+     * it names the tenant agent rather than always "Belong". Defaults to "Belong".
+     */
+    agentName?: string;
+    /**
+     * Stick-to-bottom growth animation: the chat route keeps this "instant"
+     * while restored history fills the list (open AT the bottom, no visible
+     * glide), then settles it to "smooth" for live streaming growth.
+     */
+    scrollResize: "instant" | "smooth";
+    onStop: () => void;
+    /**
+     * BEL-62 — clear the VISIBLE chat (the agent keeps the full context). Renders
+     * a small eraser button in the conversation toolbar; omitted when undefined.
+     */
+    onClear?: () => void;
+    /** Disable the clear button while a clear request is in flight. */
+    clearDisabled?: boolean;
+    children: React.ReactNode;
+}>): import("react").JSX.Element;

package/dist/components/embed/EmbedFiles.d.ts

@@ -0,0 +1,28 @@
+export interface WorkspaceFile {
+    readonly name: string;
+    readonly sizeBytes: number;
+    readonly modifiedAt: string;
+}
+/**
+ * Belong-styled workspace browser. Presentational — DocumentsRoute owns the
+ * data + upload handlers and passes them in. Mirrors the reference Files look
+ * (/workspace breadcrumb + refresh, icon list, calm empty state) over the
+ * existing sandbox-uploads backend. No inline content viewer: belong-cloud has
+ * no read-content endpoint (list + upload only).
+ */
+export declare function EmbedFiles({ files, query, loading, busy, error, dragActive, fmtAge, fmtSize, onQueryChange, onRefresh, onBrowse, onDragOver, onDragLeave, onDrop, }: {
+    files: readonly WorkspaceFile[];
+    query: string;
+    loading: boolean;
+    busy: boolean;
+    error: string | null;
+    dragActive: boolean;
+    fmtAge: (iso: string) => string;
+    fmtSize: (bytes: number) => string;
+    onQueryChange: (v: string) => void;
+    onRefresh: () => void;
+    onBrowse: () => void;
+    onDragOver: (e: React.DragEvent) => void;
+    onDragLeave: () => void;
+    onDrop: (e: React.DragEvent) => void;
+}): import("react").JSX.Element;

package/dist/components/embed/EmbedHeader.d.ts

@@ -0,0 +1,11 @@
+import { BelongThemeBrand, BelongThemePalette } from '../../types/public.ts';
+/**
+ * Slim brand bar at the top of the chat: the mark + the brand/view title, with
+ * a small "by Belong" tagline when a tenant brand is active. Action controls
+ * live in the rail (EmbedRail), not here.
+ */
+export declare function EmbedHeader({ title, palette, brand, }: {
+    title: string;
+    palette: BelongThemePalette;
+    brand: BelongThemeBrand;
+}): import("react").JSX.Element;

package/dist/components/embed/EmbedLogin.d.ts

@@ -0,0 +1,11 @@
+import { BelongThemeBrand, BelongThemePalette } from '../../types/public.ts';
+/**
+ * Shown when there is no auth token yet. Identity comes from the host's
+ * Auth0/JWT token, so this is a welcome + "Sign in" CTA that triggers the
+ * host's sign-in (no name entry). Once a token arrives, the shell renders chat.
+ */
+export declare function EmbedLogin({ palette, brand, onSignIn, }: {
+    palette: BelongThemePalette;
+    brand: BelongThemeBrand;
+    onSignIn: () => void;
+}): import("react").JSX.Element;

package/dist/components/embed/EmbedRail.d.ts

@@ -0,0 +1,49 @@
+import { SessionSummary } from './EmbedSessions';
+import { PlanProgress } from '../../stream/plan-progress.ts';
+import { BelongTheme, BelongThemePalette, PresetName } from '../../types/public.ts';
+export type EmbedView = "chat" | "files";
+/**
+ * 52px rail. Top: user avatar (account + theme controls). Middle: Chat /
+ * Files nav (active = Ocean primary fill, brand-driven). Bottom
+ * (when expanded): the chat action cluster — Chats (sessions), TTS speaker,
+ * expand-to-modal — then the collapse toggle. Active fill + brand colours come
+ * from `palette` so a host brand push re-themes everything.
+ */
+export declare function EmbedRail({ view, collapsed, user, theme, palette, sessions, activeId, planProgress, speakEnabled, ttsSupported, voiceSupported, accent, cssVars, presets, activePreset, onSelectView, onToggleCollapse, onToggleMode, onToggleSide, onAccentChange, onAccentReset, onCssVarsChange, onApplyPreset, onLogout, onNewSession, onSelectSession, onDeleteSession, onSessionsOpen, onToggleSpeak, onExpand, }: {
+    view: EmbedView;
+    collapsed: boolean;
+    user: string | null;
+    theme: BelongTheme;
+    palette: BelongThemePalette;
+    sessions: readonly SessionSummary[];
+    activeId: string | null;
+    /** Active plan execution progress (null when no plan is running). Drives
+     *  the small ring on the Chat icon so long runs stay visible off-chat. */
+    planProgress: PlanProgress | null;
+    speakEnabled: boolean;
+    ttsSupported: boolean;
+    /** Browser supports mic capture — gates the avatar menu's Voice section. */
+    voiceSupported: boolean;
+    accent: string | null;
+    cssVars: Record<string, string>;
+    presets: readonly {
+        name: PresetName;
+        label: string;
+    }[];
+    activePreset: PresetName;
+    onSelectView: (v: EmbedView) => void;
+    onToggleCollapse: () => void;
+    onToggleMode: () => void;
+    onToggleSide: () => void;
+    onAccentChange: (c: string) => void;
+    onAccentReset: () => void;
+    onCssVarsChange: (v: Record<string, string>) => void;
+    onApplyPreset: (name: PresetName) => void;
+    onLogout: () => void;
+    onNewSession: () => void;
+    onSelectSession: (id: string) => void;
+    onDeleteSession: (id: string) => void;
+    onSessionsOpen?: () => void;
+    onToggleSpeak: () => void;
+    onExpand: () => void;
+}): import("react").JSX.Element;

package/dist/components/embed/EmbedSessions.d.ts

@@ -0,0 +1,23 @@
+import { BelongTheme } from '../../types/public.ts';
+export interface SessionSummary {
+    readonly sessionId: string;
+    readonly title: string | null;
+    readonly updatedAt: string;
+}
+/**
+ * Header control to start a new chat, switch to a recent session, or delete
+ * one via an inline trash → confirm flow. Supports new chat, switch, and
+ * per-row delete (inline confirm).
+ */
+export declare function EmbedSessions({ sessions, activeId, theme, side, onNew, onSelect, onDelete, onOpen, }: {
+    sessions: readonly SessionSummary[];
+    activeId: string | null;
+    theme: BelongTheme;
+    /** Which way the menu opens — toward the panel from the rail edge. */
+    side?: "left" | "right";
+    onNew: () => void;
+    onSelect: (id: string) => void;
+    onDelete: (id: string) => void;
+    /** Fired when the menu opens — the dock refetches the list so it's fresh. */
+    onOpen?: () => void;
+}): import("react").JSX.Element;

package/dist/components/embed/FilePreview.d.ts

@@ -0,0 +1,12 @@
+export type FilePreviewProps = {
+    /** Where the bytes live (auth'd; the dock adds the bearer header). */
+    readonly contentUrl: string;
+    readonly filename: string;
+    readonly mimeType: string;
+    /** Heavy (pdf/office) preview needs the files-converter endpoints, keyed by
+     *  fileId. Absent → heavy kinds fall back to the download card. */
+    readonly heavy?: {
+        readonly fileId: string;
+    } | undefined;
+};
+export declare const FilePreview: ({ contentUrl, filename, mimeType, heavy }: FilePreviewProps) => import("react").JSX.Element | null;

package/dist/components/embed/FilePreviewDialog.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The shared "preview a file in a modal" shell — the dock surfaces (chat
+ * attachment chip, the workspace file tree, the uploaded-files list) all open
+ * the same Dialog + FilePreview; only the trigger differs, which each caller
+ * owns. Open state is caller-controlled so the trigger can live anywhere.
+ */
+type FilePreviewDialogProps = {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly contentUrl: string;
+    readonly filename: string;
+    readonly mimeType: string;
+    /** Heavy (pdf/office) preview — present only for files-converter sources. */
+    readonly heavy?: {
+        readonly fileId: string;
+    } | undefined;
+};
+export declare const FilePreviewDialog: ({ open, onOpenChange, contentUrl, filename, mimeType, heavy, }: FilePreviewDialogProps) => import("react").JSX.Element;
+export {};

package/dist/components/embed/MentionInput.d.ts

@@ -0,0 +1,23 @@
+import { KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';
+import { BelongThemePalette } from '../../types/public.ts';
+export type MentionInputHandle = {
+    focus: () => void;
+    getCaret: () => number | null;
+    /** Pin where the caret lands after the NEXT controlled value change. */
+    setPendingCaret: (offset: number) => void;
+    element: HTMLDivElement | null;
+};
+export declare function MentionInput({ value, palette, placeholder, disabled, className, ariaProps, onChange, onCaretChange, onKeyDown, handleRef, }: {
+    value: string;
+    palette: BelongThemePalette;
+    placeholder: string;
+    disabled: boolean;
+    className?: string;
+    ariaProps?: Readonly<Record<string, string | boolean>>;
+    /** Fires on edit with the serialized draft + the caret offset. */
+    onChange: (text: string, caret: number) => void;
+    /** Fires on caret-only moves (selection change). */
+    onCaretChange: (caret: number) => void;
+    onKeyDown: (e: ReactKeyboardEvent<HTMLDivElement>) => void;
+    handleRef?: Ref<MentionInputHandle>;
+}): import("react").JSX.Element;

package/dist/components/embed/MentionPill.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The inline `@`-reference pill (BEL-89). The presentational twin of the
+ * composer chip built imperatively in {@link MentionInput} (`buildChip`): same
+ * file-type icon + filename, same rounded accent-tinted box, same inline flow —
+ * so a `@<path>` reference looks identical whether it's being typed in the
+ * composer or read back in a sent message bubble.
+ *
+ * The composer chip lives in a contentEditable and is built as raw DOM; this is
+ * the React rendering for the message feed. The two intentionally share the
+ * SAME visual recipe (icon via {@link fileTypeIconSvg}, filename via
+ * {@link basename}, accent tints) rather than the markup — one is a DOM node, the
+ * other a React node — but any future style tweak should be mirrored across both.
+ *
+ * Colors come from the cascading `--color-primary` CSS var (projected onto the
+ * dock root by `themeToCssVars`), the var-backed equivalent of the composer
+ * chip's `palette.primary`, so the pill re-themes per tenant with no palette prop
+ * threaded through the renderer. The icon SVG is our own static markup (path
+ * picked purely by file extension, no user data interpolated), so rendering it
+ * via `dangerouslySetInnerHTML` carries the same safety guarantee the composer
+ * chip relies on; the filename is set as a text child, never as HTML.
+ */
+/** One `@<path>` reference rendered as an inline pill (icon + filename). */
+export declare function MentionPill({ path }: {
+    readonly path: string;
+}): import("react").JSX.Element;

package/dist/components/embed/OnboardingOverlay.d.ts

@@ -0,0 +1,21 @@
+import { RefObject } from 'react';
+import { BelongThemeBrand, BelongThemePalette } from '../../types/public.ts';
+/**
+ * First-run onboarding orchestrator, mounted at the dock root.
+ *
+ * Auto-starts the welcome card the first time a NEW user has the dock open on
+ * chat (`active`) and hasn't completed the current onboarding version — a
+ * returning user reads `shouldOfferOnboarding() === false` and sees nothing. The
+ * store phase drives which surface renders; "Ver tutorial de nuevo" in the
+ * avatar menu re-enters `welcome` via `startOnboarding`, even for already-
+ * onboarded users.
+ *
+ * `active` folds in the gates that need React context (authed + on the chat
+ * view + not collapsed); the persistence gate lives in `shouldOfferOnboarding`.
+ */
+export declare function OnboardingOverlay({ dockRef, brand, palette, active, }: {
+    dockRef: RefObject<HTMLElement | null>;
+    brand: BelongThemeBrand;
+    palette: BelongThemePalette;
+    active: boolean;
+}): import("react").JSX.Element | null;

package/dist/components/embed/OnboardingTour.d.ts

@@ -0,0 +1,24 @@
+import { RefObject } from 'react';
+import { BelongThemePalette } from '../../types/public.ts';
+import { TourStep } from '../../embed/onboarding-steps.ts';
+import { TourLabels } from '../../embed/copy.ts';
+/**
+ * The spotlight coach-mark engine. For the active step it resolves the step's
+ * anchor INSIDE the dock root, paints a dimming layer with a bright cut-out over
+ * the control (a clipped `box-shadow` ring — clipped to the dock by the dock
+ * root's `overflow-hidden`, so the host app is never dimmed), and floats a
+ * tooltip with progress dots and Back / Skip / Next.
+ *
+ * An anchor that never mounts (feature gated, rail collapsed) is skipped after a
+ * short wait via `onNext`, so a missing control never blocks the tour.
+ */
+export declare function OnboardingTour({ dockRef, steps, stepIndex, palette, labels, onNext, onPrev, onSkip, }: {
+    dockRef: RefObject<HTMLElement | null>;
+    steps: readonly TourStep[];
+    stepIndex: number;
+    palette: BelongThemePalette;
+    labels: TourLabels;
+    onNext: () => void;
+    onPrev: () => void;
+    onSkip: () => void;
+}): import("react").JSX.Element | null;

package/dist/components/embed/OnboardingWelcome.d.ts

@@ -0,0 +1,23 @@
+import { BelongThemeBrand, BelongThemePalette } from '../../types/public.ts';
+import { WelcomeCardCopy } from '../../embed/copy.ts';
+import { Locale } from '../../embed/locale.ts';
+/**
+ * First-run welcome card — the single branded screen a new user sees before
+ * anything else: who the assistant is, three headline capabilities, and one
+ * choice — take the 30-second tour, or explore alone. Both paths dismiss the
+ * card; "explore alone" also marks onboarding complete (handled by the caller's
+ * `onSkip`). Presentational: it reads `brand` + `palette` and calls back, so it
+ * stories and tests without the store.
+ *
+ * Scoped to the dock (absolute inset-0 inside the dock root), so the dim
+ * backdrop never reaches the host app and the card inherits the projected theme.
+ */
+export declare function OnboardingWelcome({ brand, palette, copy, locale, onSelectLocale, onStartTour, onSkip, }: {
+    brand: BelongThemeBrand;
+    palette: BelongThemePalette;
+    copy: WelcomeCardCopy;
+    locale: Locale;
+    onSelectLocale: (locale: Locale) => void;
+    onStartTour: () => void;
+    onSkip: () => void;
+}): import("react").JSX.Element;

package/dist/components/embed/PlanCue.d.ts

@@ -0,0 +1,9 @@
+import { PlanProgress } from '../../stream/plan-progress.ts';
+export type PlanCueProps = {
+    readonly title: string;
+    readonly progress: PlanProgress | null;
+    readonly onOpen: () => void;
+};
+/** Slim one-line chip in the chat: opens the Plan panel. Replaces the old
+ *  pinned-above-chat card (the full card now lives in the Plan view). */
+export declare const PlanCue: ({ title, progress, onOpen }: PlanCueProps) => import("react").JSX.Element;

package/dist/components/embed/PlanPanel.d.ts

@@ -0,0 +1,13 @@
+export type PlanPanelProps = {
+    /** The CHAT dock's side. The plan panel docks on the SAME side, abutting it. */
+    readonly chatSide: "left" | "right";
+    /** Live chat dock width (px). The panel is offset by this so it sits
+     *  immediately beside the chat rather than across the viewport. */
+    readonly chatDockWidthPx: number;
+};
+/**
+ * The plan as a separate surface docked beside the chat dock, offset by the
+ * live dock width so the two read as one combined surface. Open state + width
+ * come from plan-panel-store; the plan itself from plan-store.
+ */
+export declare const PlanPanel: ({ chatSide, chatDockWidthPx }: PlanPanelProps) => import("react").JSX.Element | null;