@jini-ai/chat 0.1.0

package/dist/react/slots.d.ts

@@ -0,0 +1,215 @@
+/**
+ * @module slots
+ *
+ * The slot/adapter interfaces a host injects into `<JiniChatProvider>` (or
+ * passes directly to a headless hook) to supply everything this package
+ * deliberately does not own: project/workspace file access, model/agent
+ * optional picker overrides, composer extension points, attachment rendering,
+ * analytics, and i18n. Every OD-domain widget (OdCard, design-toolbox, brand-browser,
+ * plugin folders, sketch preview, comments/annotation, AMR billing,
+ * model/agent picker, file preview) is a host concern reached through one of
+ * these slots — see `ADS-memory/reports/jini-port/recon/r4b-webui-design.md` §2, which
+ * this module implements field-for-field.
+ *
+ * Only `import type { ReactNode }` is used here (no JSX, no React runtime
+ * value import), so this file stays at the package's top level per the
+ * react-layout policy in `ADS-memory/reports/jini-port/god-components-extraction-plan.md`
+ * — everything that actually renders (hooks, components) lives under
+ * `react/`.
+ */
+import type { ReactNode } from 'react';
+import type { ChatAttachment } from '../core/index.js';
+import type { ArtifactFile } from './artifact-types.js';
+import type { FeedbackChange, OnFeedback } from '../core/index.js';
+export type { FeedbackChange, OnFeedback };
+/**
+ * Replaces OD's threaded `Project`/`ProjectFile`/`Workspace` props
+ * (`providers/registry.projectFileUrl`/`projectRawUrl`) with one injected
+ * value a host supplies once, high in its tree.
+ */
+export interface ProjectContextValue {
+    projectId: string | null;
+    files: ArtifactFile[];
+    resolveFileUrl: (path: string) => string;
+    resolveRawUrl: (path: string) => string;
+    uploadFiles?: (files: File[]) => Promise<ChatAttachment[]>;
+    linkedDirs?: string[];
+}
+/** One selectable agent/model entry a host's picker UI lists. */
+export interface AgentOption {
+    id: string;
+    label: string;
+    description?: string;
+    models?: string[];
+}
+export interface AgentSelection {
+    agentId: string;
+    model?: string;
+    sessionMode?: string;
+}
+/**
+ * Optional custom model/agent picker slot for lower-level Composer consumers.
+ * The self-contained `ChatPane` exports its own default `AgentRuntimePicker`;
+ * this slot remains useful when composing the headless primitives directly.
+ */
+export interface ModelAgentPickerSlot {
+    value: AgentSelection;
+    onChange: (next: AgentSelection) => void;
+    render?: (props: {
+        value: AgentSelection;
+        onChange: (next: AgentSelection) => void;
+        agents: AgentOption[];
+    }) => ReactNode;
+}
+/** Generalizes `ComposerPlusMenu`/`LibraryPicker`/Figma-import/plugin entries. */
+export interface ComposerPlusItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onSelect: () => void | Promise<ChatAttachment | null>;
+}
+/**
+ * Declares that a `ComposerDiscoveryItem` accepts a trailing argument, e.g. `/mcp <server-id>`.
+ * Read only for its PRESENCE and `required` flag — never a typed value, never a host taxonomy,
+ * same law as `kind` below. `placeholder` is menu chrome (e.g. `<query>`); `required` only gates
+ * whether Enter/Tab may invoke with an empty argument, never what the argument means.
+ */
+export interface ComposerDiscoveryArgument {
+    placeholder: string;
+    required?: boolean;
+}
+/**
+ * One provider-neutral resource the host wants the composer to expose.
+ *
+ * `kind` is intentionally an open string: Jini filters and renders the value but never switches
+ * on a host-owned taxonomy such as "plugin" or "skill". `insertText` is the text Jini places in
+ * the draft when the item is selected; hosts that need a side effect can use
+ * `onDiscoverySelect` without coupling the package to an inventory provider.
+ */
+export interface ComposerDiscoveryItem {
+    id: string;
+    label: string;
+    description?: string;
+    kind?: string;
+    keywords?: readonly string[];
+    insertText?: string;
+    /**
+     * Stable, untranslated word matched against typed input after `/`, e.g. `"mcp"` for `/mcp`.
+     * An item with no `command` never participates in slash-argument grammar — it keeps today's
+     * macro behavior exactly (plus-menu and fuzzy label/description/kind/keyword matching only).
+     * Kept separate from `label`, which is translated at render time and therefore unsafe as a
+     * match key the instant a second locale exists.
+     */
+    command?: string;
+    /** See {@link ComposerDiscoveryArgument}. Absent for a command with no trailing argument. */
+    argument?: ComposerDiscoveryArgument;
+    /**
+     * Presence-only signal that the host treats this item's effect as consequential enough to
+     * warrant confirmation before it commits. Jini never disables or gates selection on this — it
+     * is the host's own concern once `onDiscoverySelect` runs; the package may render it as a cue.
+     */
+    needsConfirmation?: boolean;
+}
+/** A labelled group in the composer's add menu and slash autocomplete. */
+export interface ComposerDiscoveryGroup {
+    id: string;
+    label: string;
+    items: readonly ComposerDiscoveryItem[];
+}
+export interface ComposerDiscoverySelection {
+    item: ComposerDiscoveryItem;
+    source: 'plus' | 'slash';
+    /**
+     * Present only when `item.command` is set and a selection was resolved past the "still
+     * completing the command word" stage (see `resolveComposerSlashInvocation` in
+     * `composer-discovery.ts`): `null` when no separator was typed (`/mcp`), `''` when a separator
+     * was typed with nothing after it (`/mcp `), otherwise the verbatim trailing text.
+     */
+    argument?: string | null;
+}
+/** A host effect's synchronous or resolved return value. Absent/`void` leaves the draft untouched. */
+export interface ComposerDiscoveryOutcome {
+    /** Replace the draft only when the host explicitly supplies this property. */
+    draft?: string;
+}
+/** One `@`-mention entry an OD skill/file/plugin picker (or any host source) supplies. */
+export interface MentionResult {
+    id: string;
+    label: string;
+    description?: string;
+    insertText?: string;
+}
+export interface MentionSource {
+    id: string;
+    label: string;
+    /** Trigger character(s), e.g. `'@'`. Defaults to `'@'` when omitted. */
+    trigger?: string;
+    search: (query: string) => MentionResult[] | Promise<MentionResult[]>;
+}
+export interface ComposerSlots {
+    plusMenuItems?: ComposerPlusItem[];
+    /** Data-only host inventory rendered by the generic grouped add and slash primitives. */
+    discoveryGroups?: readonly ComposerDiscoveryGroup[];
+    /**
+     * Optional host effect invoked after Jini applies the selected item's draft insertion (for a
+     * plain macro item) or, for a `command`-bearing item, once an invocation is resolved (see
+     * `ComposerDiscoverySelection.argument`). The host may return a {@link ComposerDiscoveryOutcome}
+     * to set the final draft — e.g. replacing `/search cats` with the composed instruction text a
+     * tool call produced — without owning any part of the trigger/filter/keyboard mechanism.
+     */
+    onDiscoverySelect?: (selection: ComposerDiscoverySelection) => void | ComposerDiscoveryOutcome | Promise<void | ComposerDiscoveryOutcome>;
+    mentionSources?: MentionSource[];
+    /**
+     * The composer's pinned-context zone: whatever a host wants pinned above the input — a
+     * SessionModeToggle/DesignSystemSwitchPicker-equivalent, selected plugins, MCP servers, or
+     * anything else a future host adds. Deliberately not typed or named after any one of those; this
+     * package renders and animates the zone (see `CHAT_PANE_STYLES`'s `.jini-composer-leading`
+     * rules) without knowing what a "plugin" or "MCP" is. `undefined`/`null`/absent renders nothing
+     * — no reserved space, no seam, no motion — so an idle composer looks exactly like one with no
+     * such prop at all.
+     *
+     * `ChatPane` consumers: read this through its own top-level `leadingAccessory` prop instead —
+     * `ChatPaneProps['composerSlots']` excludes this key (see that type's doc) because `ChatPane`
+     * always assembles this slot from that prop alone.
+     */
+    leadingAccessories?: ReactNode;
+    /** Host controls rendered before the send action, such as an agent/model picker. */
+    footerAccessories?: ReactNode;
+    onAttach?: (a: ChatAttachment) => void;
+    annotationAdapter?: AnnotationAdapter;
+}
+export interface AttachmentTraySlot {
+    attachments: ChatAttachment[];
+    onRemove: (id: string) => void;
+    /** Host renders exotic attachment kinds it knows about; falls back to the built-in chip. */
+    renderItem?: (a: ChatAttachment) => ReactNode;
+}
+/** Optional comment/annotation bridge (OD's `comments.ts` + `PreviewDrawOverlay`). */
+export interface AnnotationAdapter {
+    enabled: boolean;
+    toAttachment: (selection: unknown) => ChatAttachment;
+    displayName: (a: ChatAttachment) => string;
+}
+/** Host-supplied file-preview UI (OD's `FileViewer`/`FileWorkspace` are product-specific). */
+export interface FilePreviewSlot {
+    render: (props: {
+        file: ArtifactFile;
+        onClose?: () => void;
+    }) => ReactNode;
+}
+/** Default no-op; a host wires its own analytics provider through this shape. */
+export interface AnalyticsAdapter {
+    track: (event: string, props?: Record<string, unknown>) => void;
+}
+/**
+ * Default passthrough (`t(key)` returns `key`); a host supplies a real
+ * dictionary-backed translator. Every user-facing string in this package's
+ * components is wrapped in `useT()`'s `t()` — the English string itself is
+ * the key, per the i18n policy in
+ * `ADS-memory/reports/jini-port/god-components-extraction-plan.md`.
+ */
+export interface I18nAdapter {
+    t: (key: string, vars?: Record<string, string | number>) => string;
+    locale: string;
+}
+//# sourceMappingURL=slots.d.ts.map

package/dist/react/slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../src/react/slots.ts"],"names":[],"mappings":"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"}

package/dist/react/slots.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=slots.js.map

package/dist/react/slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../src/react/slots.ts"],"names":[],"mappings":""}

package/dist/react/styles/reference.css

@@ -0,0 +1,298 @@
+/**
+ * @jini-ai/chat-react reference stylesheet — structural layout only.
+ *
+ * NOT applied by default and not exported by package.json — see this package's README for why.
+ * Kept here as a documented starting point for a host writing their own CSS against this
+ * package's `jini-*` class names, not as something to `import` as-is.
+ *
+ * Every rule here exists because, without it, a plain-HTML default (inline elements that don't
+ * stack, an inline-block that doesn't shrink to fit a narrow parent, a block box that forces a
+ * line break next to a sibling) produces a visibly broken layout — not because it looks nicer.
+ * No colors, fonts, borders, or spacing/gap values: that stays a host decision. Selectors are
+ * flat single classes with no `.jini-chat-pane` nesting, so they apply whether these components
+ * are composed directly (this package's own README usage example) or through the
+ * batteries-included `<ChatPane>`.
+ */
+
+/* ---- Composer (react/components/Composer.tsx) ---- */
+
+/* A bare <textarea> has an intrinsic ~20-character width (the `cols` default) and sits as an
+   inline-block box between its block siblings — without this it renders far narrower than its
+   container, not full width. */
+.jini-composer-input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* The footer's children (.jini-composer-attachment-picker, .jini-composer-footer-accessories,
+   .jini-composer-plus-menu are <div>s; .jini-composer-send is a <button>) are a mix of block and
+   inline-block boxes — without flex, the block ones each force their own line, stacking the
+   footer into several rows instead of one. */
+.jini-composer-footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* Lets a long agent name inside (e.g. an AgentRuntimePicker trigger) shrink and ellipsis instead
+   of forcing the row wider — flex items default to min-width:auto, which blocks shrinking below
+   content size unless every ancestor in the chain opts out. Docked into a narrow sidebar (< 400px)
+   is exactly where this stops being cosmetic. */
+.jini-composer-footer-accessories {
+  min-width: 0;
+}
+
+/* The grouped add menu and slash autocomplete anchor to the composer rather than escaping the
+   host's layout. Visual tokens remain the host's responsibility. */
+.jini-composer,
+.jini-composer-discovery {
+  position: relative;
+}
+
+.jini-composer-discovery-menu,
+.jini-composer-slash-menu {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.jini-composer-discovery-menu { inset-inline-start: 0; bottom: 100%; }
+.jini-composer-slash-menu { inset-inline: 0; bottom: 100%; }
+.jini-composer-discovery-group { display: flex; flex-direction: column; }
+.jini-composer-discovery-item { display: flex; flex-direction: column; align-items: flex-start; }
+.jini-composer-discovery-item.is-active {
+  font-weight: 600;
+  outline: 1px solid currentColor;
+  outline-offset: -1px;
+}
+
+/* Stays in the DOM (not display:none) so the button that triggers it via ref.click() keeps
+   working, but hidden the same way any visually-hidden-but-functional control is — never with
+   opacity/visibility alone — so the browser's native file-input chrome never paints over the
+   custom attach button. */
+.jini-composer-file-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+/* Without this, "still uploading"/"still scanning" never visibly spins — the element just sits
+   static, which defeats the one thing a spinner icon exists to communicate. */
+.jini-composer-spinner,
+.jini-runtime-spinner,
+.jini-icon-spin {
+  animation: jini-chat-react-spin 0.8s linear infinite;
+}
+
+@keyframes jini-chat-react-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ---- AttachmentTray (react/components/AttachmentTray.tsx) ---- */
+
+/* Each chip is a <div> (block) — without flex, chips stack one per line instead of forming a row. */
+.jini-attachment-tray {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+/* Once .jini-attachment-chip-body below becomes a flex container, its outer display becomes
+   block; without flex here too, that now-block body forces the remove button onto a separate
+   line instead of sitting beside it. */
+.jini-attachment-chip {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.jini-attachment-remove,
+.jini-attachment-chip-icon {
+  flex: 0 0 auto;
+}
+
+/* chip-body is a <span> wrapping an icon <span> and a copy <span> — both inline by default, so
+   without flex here the (post-fix, block-level) copy element drops to its own line under the
+   icon instead of sitting beside it. */
+.jini-attachment-chip-body {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+/* The name/size pair are sibling inline elements (<span>/<small>) — without flex-direction:
+   column they render on the same line ("filename.png 24 KB") instead of stacked. */
+.jini-attachment-chip-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.jini-attachment-chip-name,
+.jini-attachment-chip-size {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ---- MessageList (react/components/MessageList.tsx) ---- */
+
+/* The intended scrollback region; min-height:0 relaxes the default min-height:auto that would
+   otherwise block it from shrinking inside a flex/grid parent instead of scrolling. */
+.jini-message-list {
+  overflow-y: auto;
+  min-height: 0;
+}
+
+/* ---- ChatPane (features/chat-pane/react/components/ChatPane.tsx) ---- */
+
+/*
+ * The two traps from tovu-learnings.md §7:
+ *
+ * __controls wraps the suggestions row, status banners, and composer area (via
+ * ChatPaneComposerArea's fragment) as siblings. It renders with no inline style at all, so a
+ * consumer who reasonably adds `display: flex` for gap/alignment (a natural first guess for a
+ * composer-area wrapper) gets the browser's row default — suggestions and the composer end up
+ * side by side, squeezing the composer into a sliver. Column is the direction the actual content
+ * needs regardless of who styles it.
+ *
+ * __drop-target (the file-drag-drop wrapper the composer renders inside,
+ * data-testid="chat-pane-file-drop-target") is a flex child of __controls once the above is
+ * fixed. Without flex:1 it shrink-wraps to its content's intrinsic width instead of filling the
+ * row — invisible in a full-width page layout (enough slack that shrink-to-content and
+ * fill-available look the same), real once the pane is docked into a narrower container (e.g. a
+ * 380px sidebar panel).
+ */
+.jini-chat-pane__controls {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.jini-chat-pane__drop-target {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+/* .jini-chat-pane__heading is a <div> (block), .jini-chat-pane__new-thread is a <button>
+   (inline-block) — without flex the heading forces the button onto its own line below it. */
+.jini-chat-pane__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.jini-chat-pane__heading {
+  min-width: 0;
+}
+
+.jini-chat-pane__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The plain-text fallback branch (no working-directory picker slot) renders a <strong>/<code>
+   pair; flex + min-width:0 on the row and flex:1 + min-width:0 on the code element are what let
+   a long path actually ellipsis instead of overflowing once the pane narrows. */
+.jini-chat-pane__workdir {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.jini-chat-pane__workdir code {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ---- AgentRuntimePicker (features/chat-pane/react/components/AgentRuntimePicker.tsx) ---- */
+
+/* An inline-flex element shrink-wraps its content by default and does not shrink to fit a
+   narrower parent on its own (unlike a flex item, which min-width:0 already covers elsewhere in
+   this file) — max-width:100% is what stops the trigger from overflowing .jini-runtime-picker
+   once the agent name + model name are wider than the space available, the same "docked into a
+   380px sidebar" scenario the two named traps above describe. */
+.jini-runtime-picker {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.jini-runtime-trigger {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Both wrap a sibling <strong>/<small> pair — inline by default, so without flex-direction:
+   column the agent name and model/status line render on the same line instead of stacked. */
+.jini-runtime-trigger__copy,
+.jini-runtime-agent__copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.jini-runtime-agent__copy {
+  flex: 1;
+}
+
+.jini-runtime-trigger__copy strong,
+.jini-runtime-trigger__copy small,
+.jini-runtime-agent__copy strong,
+.jini-runtime-agent__copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jini-runtime-agent-icon,
+.jini-runtime-trigger__chevron,
+.jini-runtime-check {
+  flex: 0 0 auto;
+}
+
+/* Each is a <button> (inline-block) holding an icon + label(s) as inline siblings — flex gives
+   it both a full-width row (so a list of these reads as uniform rows, not content-sized buttons
+   sitting side by side) and lays out its own icon/label/meta children in a line. */
+.jini-runtime-mode,
+.jini-runtime-agent,
+.jini-runtime-rescan {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.jini-runtime-mode__meta,
+.jini-runtime-agent__status {
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+/* Sibling <strong>/<span> pair — inline by default, needs flex-direction:column to stack. */
+.jini-runtime-popover__head {
+  display: flex;
+  flex-direction: column;
+}
+
+/* A <label> wrapping a <span> and a <select> — <label> is inline by default, so without
+   flex-direction:column the "Model"/"Reasoning" text and the dropdown render on the same line
+   instead of label-above-input; multiple sibling <label>s also need this to stack as separate
+   rows rather than flow inline next to each other. */
+.jini-runtime-select {
+  display: flex;
+  flex-direction: column;
+}

package/dist/react/tool-renderer-registry.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @module tool-renderer-registry
+ *
+ * Per-tool renderer registry — ships "as-is" per
+ * `ADS-memory/reports/jini-port/recon/r4b-webui-design.md` §2 ("SHIP AS-IS, runtime/tool-renderers.ts").
+ * Origin: `apps/web/src/runtime/tool-renderers.ts`'s registration mechanism
+ * (verified 0 OD product references — the pure `deriveToolStatus`/
+ * `toRenderProps` half of that file already lives in `@jini-ai/chat/core`'s
+ * `tools.ts`; this module is only the React-typed registry half chat-core
+ * deliberately did not port).
+ *
+ * The open-design analogue of CopilotKit's `useCopilotAction({ render })`
+ * and AG-UI's tool render-prop contract. `<ToolCard>` consults this registry
+ * before its own built-in family cards, so a host (or a skill/plugin) can
+ * override or extend tool rendering without forking the component.
+ */
+import type { ReactNode } from 'react';
+import type { ToolRenderProps } from '../core/index.js';
+/**
+ * Tool render callback. Mirrors AG-UI's `({ status, args, result, ... })`
+ * render-prop shape.
+ *
+ * The callback runs inside `<ToolCard>`'s render — it is not mounted as its
+ * own component, so it must be hook-free. If you need hooks, return a
+ * component element instead: `(props) => <MyHookfulCard {...props} />`.
+ *
+ * Returning `null`/`undefined`/`false` defers to `<ToolCard>`'s next lookup
+ * step (a built-in family card, then the generic fallback).
+ */
+export type ToolRenderer = (props: ToolRenderProps) => ReactNode;
+/**
+ * Register a renderer for a tool name. Returns an unregister handle so
+ * tests / hot-reloads can dispose cleanly. Names are matched case-sensitively
+ * against `tool_use.name`. Re-registering the same name overwrites — last
+ * writer wins.
+ */
+export declare function registerToolRenderer(name: string, renderer: ToolRenderer): () => void;
+export declare function getToolRenderer(name: string): ToolRenderer | undefined;
+/** Visible mainly for tests. */
+export declare function clearToolRenderers(): void;
+//# sourceMappingURL=tool-renderer-registry.d.ts.map

package/dist/react/tool-renderer-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-renderer-registry.d.ts","sourceRoot":"","sources":["../../src/react/tool-renderer-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;AAIjE;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,GAAG,MAAM,IAAI,CAKrF;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAEtE;AAED,gCAAgC;AAChC,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC"}

package/dist/react/tool-renderer-registry.js

@@ -0,0 +1,22 @@
+const renderers = new Map();
+/**
+ * Register a renderer for a tool name. Returns an unregister handle so
+ * tests / hot-reloads can dispose cleanly. Names are matched case-sensitively
+ * against `tool_use.name`. Re-registering the same name overwrites — last
+ * writer wins.
+ */
+export function registerToolRenderer(name, renderer) {
+    renderers.set(name, renderer);
+    return () => {
+        if (renderers.get(name) === renderer)
+            renderers.delete(name);
+    };
+}
+export function getToolRenderer(name) {
+    return renderers.get(name);
+}
+/** Visible mainly for tests. */
+export function clearToolRenderers() {
+    renderers.clear();
+}
+//# sourceMappingURL=tool-renderer-registry.js.map

package/dist/react/tool-renderer-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-renderer-registry.js","sourceRoot":"","sources":["../../src/react/tool-renderer-registry.ts"],"names":[],"mappings":"AAgCA,MAAM,SAAS,GAAG,IAAI,GAAG,EAAwB,CAAC;AAElD;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,IAAY,EAAE,QAAsB;IACvE,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC9B,OAAO,GAAG,EAAE;QACV,IAAI,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,QAAQ;YAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/D,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAY;IAC1C,OAAO,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAC7B,CAAC;AAED,gCAAgC;AAChC,MAAM,UAAU,kBAAkB;IAChC,SAAS,CAAC,KAAK,EAAE,CAAC;AACpB,CAAC"}

package/dist/react/util/defined-props.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Drops keys whose value is `undefined`, preserving required keys as required.
+ *
+ * `tsconfig.base.json` sets `exactOptionalPropertyTypes: true`, so `{ placeholder: undefined }` is
+ * NOT assignable to `{ placeholder?: string }` — the property has to be absent, not present-and-
+ * undefined. Forwarding a handful of optional props therefore costs one
+ * `...(x === undefined ? {} : { x })` ternary each, and those ternaries were the single largest
+ * contributor to this feature's complexity scores (14 of `ChatPane`'s 52 cyclomatic points, 10 of
+ * `useChatPane`'s 15). This collapses all of them into one branch, here.
+ */
+/**
+ * `T` with `undefined` removed from every value type, and only the keys that admitted `undefined`
+ * made optional. Keys that never admitted it stay required, so a caller cannot accidentally launder
+ * a required prop into an optional one by routing it through {@link definedProps}.
+ */
+export type DefinedProps<T> = {
+    [K in keyof T as undefined extends T[K] ? never : K]: T[K];
+} & {
+    [K in keyof T as undefined extends T[K] ? K : never]?: Exclude<T[K], undefined>;
+};
+/**
+ * Returns `source` without its `undefined`-valued keys.
+ *
+ * `null` is preserved — it is a meaningful value for props like `workingDirectory`, where `null`
+ * means "explicitly none" and `undefined` means "not supplied". Collapsing the two would silently
+ * change which of a controlled/uncontrolled pair wins.
+ *
+ * @complexity Time: O(n) in the key count; space: O(n) for the returned object.
+ */
+export declare function definedProps<T extends object>(source: T): DefinedProps<T>;
+//# sourceMappingURL=defined-props.d.ts.map

package/dist/react/util/defined-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defined-props.d.ts","sourceRoot":"","sources":["../../../src/react/util/defined-props.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;;;GAIG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,IACtB;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,GAC9D;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;CAAE,CAAC;AAExF;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAMzE"}

package/dist/react/util/defined-props.js

@@ -0,0 +1,28 @@
+/**
+ * Drops keys whose value is `undefined`, preserving required keys as required.
+ *
+ * `tsconfig.base.json` sets `exactOptionalPropertyTypes: true`, so `{ placeholder: undefined }` is
+ * NOT assignable to `{ placeholder?: string }` — the property has to be absent, not present-and-
+ * undefined. Forwarding a handful of optional props therefore costs one
+ * `...(x === undefined ? {} : { x })` ternary each, and those ternaries were the single largest
+ * contributor to this feature's complexity scores (14 of `ChatPane`'s 52 cyclomatic points, 10 of
+ * `useChatPane`'s 15). This collapses all of them into one branch, here.
+ */
+/**
+ * Returns `source` without its `undefined`-valued keys.
+ *
+ * `null` is preserved — it is a meaningful value for props like `workingDirectory`, where `null`
+ * means "explicitly none" and `undefined` means "not supplied". Collapsing the two would silently
+ * change which of a controlled/uncontrolled pair wins.
+ *
+ * @complexity Time: O(n) in the key count; space: O(n) for the returned object.
+ */
+export function definedProps(source) {
+    const result = {};
+    for (const [key, value] of Object.entries(source)) {
+        if (value !== undefined)
+            result[key] = value;
+    }
+    return result;
+}
+//# sourceMappingURL=defined-props.js.map

package/dist/react/util/defined-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defined-props.js","sourceRoot":"","sources":["../../../src/react/util/defined-props.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAWH;;;;;;;;GAQG;AACH,MAAM,UAAU,YAAY,CAAmB,MAAS;IACtD,MAAM,MAAM,GAA4B,EAAE,CAAC;IAC3C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QAClD,IAAI,KAAK,KAAK,SAAS;YAAE,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAC/C,CAAC;IACD,OAAO,MAAyB,CAAC;AACnC,CAAC"}