@kitn.ai/ui 0.16.0 → 0.18.0

package/src/elements/prompt-input.tsx

@@ -2,29 +2,18 @@ import { createEffect, createSignal, onMount, onCleanup } from 'solid-js';
 import { defineWebComponent } from './define';
 import { DefaultPromptInput } from './default-input';
 import type { AttachmentData } from '../components/attachments';
-import type { SlashCommandItem } from '../components/slash-command';
 import type { CustomAction } from './chat-types';
-
-/** Parse a single light-DOM `<kai-slash-command>` element into a SlashCommandItem.
- *  Attribute mapping:
- *   - `command`     → SlashCommandItem.id       (required; empty string fallback)
- *   - textContent   → SlashCommandItem.label    (primary); `label` attr as fallback
- *   - `description` → SlashCommandItem.description
- *   - `category`    → SlashCommandItem.category
- */
-export function parseKaiSlashCommandElement(n: Element): SlashCommandItem {
-  return {
-    id: n.getAttribute('command') ?? '',
-    label: n.textContent?.trim() || n.getAttribute('label') || n.getAttribute('command') || '',
-    description: n.getAttribute('description') ?? undefined,
-    category: n.getAttribute('category') ?? undefined,
-  };
-}
+import type { TriggerDef, ComposerChange } from '../components/composer';
+import { type ComposerDoc, type EntityRef, normalizeValue, serializeToText, entitiesOf } from '../primitives/composer-model';
 
 interface Props extends Record<string, unknown> {
-  /** Controlled value of the input. When set, the host owns the text and must
-   *  update it on `kai-value-change`; leave unset for uncontrolled behavior. */
-  value?: string;
+  /** Value of the input, as a JS property. A **string** is the controlled text
+   *  mirror (the host owns it and updates on `kai-value-change`). A **ComposerDoc**
+   *  (array of text/entity segments) is a one-time **seed** that pre-populates
+   *  pills (skills/agents/plugins); the user then edits freely. Leave unset for
+   *  uncontrolled behavior. `kai-submit`/`kai-value-change` always emit `value`
+   *  as the flattened string (back-compat) plus the structured `doc` + `entities`. */
+  value?: string | ComposerDoc;
   /** Placeholder text shown in the empty input. */
   placeholder?: string;
   /** Disable the input and submit button entirely (non-interactive). */
@@ -38,13 +27,6 @@ interface Props extends Record<string, unknown> {
   /** What clicking a suggestion does: `'submit'` (default) sends it immediately
    *  as if typed and submitted; `'fill'` just places it in the input. */
   suggestionMode?: 'submit' | 'fill';
-  /** Slash commands — when set, typing `/` opens the command palette. Set as a
-   *  JS property. */
-  slashCommands?: SlashCommandItem[];
-  /** Command ids to highlight as active. */
-  slashActiveIds?: string[];
-  /** Single-line palette rows. */
-  slashCompact?: boolean;
   /** Show a Search (Globe) button in the left toolbar; clicking it fires a
    *  `search` event. */
   search?: boolean;
@@ -54,22 +36,45 @@ interface Props extends Record<string, unknown> {
   /** When set and `loading` is true, the send button is replaced by a Stop
    *  button (square icon, "Stop" aria-label). Clicking it fires `kai-stop`. */
   stoppable?: boolean;
+  /** Send-button visibility. `'always'` (default) always shows it; `'auto'` shows
+   *  it only when there's text/attachments (an empty composer hides it — Enter
+   *  still submits). To hide it entirely (Enter-only), it's pure CSS:
+   *  `::part(send){display:none}` — no prop needed. Restyle via `::part(send)`.
+   *  The Stop button (`stoppable` + `loading`) is unaffected. */
+  submit?: 'always' | 'auto';
+  /** When `false`, hides the built-in paperclip attach button even though the
+   *  element otherwise supports attachments. Use this when a `+` menu in
+   *  `toolbar-start` already exposes "Add files", to avoid a duplicate control.
+   *  Defaults to `true`. */
+  attach?: boolean;
   /** Attachments to seed the input with (so a consumer can pre-populate staged
    *  files without an upload). Set as a JS property; the element then manages its
    *  own attachment state from there (add via the paperclip, remove per chip). */
   attachments?: AttachmentData[];
+  /** Rich entity triggers — each `{ char, kind, items }` opens a caret-anchored
+   *  menu that inserts an atomic pill. Convention: `/` → skills, `@` → agents
+   *  (plugins are the grouping/provenance of those items). Set as a JS property. */
+  triggers?: TriggerDef[];
+  /** Default icon per entity kind (kind → image URL/data-URI) for pills/menu items
+   *  without their own `icon`. Overrides the built-in agent/plugin glyphs. JS property. */
+  kindIcons?: Record<string, string>;
 }
 
 /** Events fired by `<kai-prompt-input>`. */
 interface Events {
-  /** The user submitted the prompt (Enter or send button) with its attachments. */
-  'kai-submit': { value: string; attachments: AttachmentData[] };
-  /** The input text changed (fires on every keystroke). */
-  'kai-value-change': { value: string };
+  /** The user submitted the prompt (Enter or send button). `value` is the
+   *  flattened text (back-compat); `doc` is the structured document and
+   *  `entities` the inserted pills (skills/agents) for downstream expansion. */
+  'kai-submit': { value: string; doc: ComposerDoc; entities: EntityRef[]; attachments: AttachmentData[] };
+  /** The input changed (fires on every edit). Carries the flattened `value`
+   *  plus the structured `doc` + `entities`. */
+  'kai-value-change': { value: string; doc: ComposerDoc; entities: EntityRef[] };
+  /** The staged attachments changed — a file was added (via the paperclip) or
+   *  removed (per-chip ×). Carries the full current list so a consumer can react
+   *  in real time (validate, show upload progress, toggle the send button). */
+  'kai-attachments-change': { attachments: AttachmentData[] };
   /** A suggestion was clicked while `suggestion-mode="fill"`. */
   'kai-suggestion-click': { value: string };
-  /** A slash command was chosen from the palette. */
-  'kai-slash-select': { command: SlashCommandItem };
   /** The Search (Globe) toolbar button was clicked. */
   'kai-search': Record<string, never>;
   /** The Voice (Mic) toolbar button was clicked. */
@@ -88,15 +93,16 @@ defineWebComponent<Props, Events>('kai-prompt-input', {
   loading: false,
   suggestions: undefined,
   suggestionMode: 'submit',
-  slashCommands: undefined,
-  slashActiveIds: undefined,
-  slashCompact: false,
   search: false,
   voice: false,
   stoppable: false,
+  submit: 'always',
+  attach: true,
   attachments: undefined,
-}, (props, { dispatch, flag, element }) => {
-  const [internal, setInternal] = createSignal(props.value ?? '');
+  triggers: undefined,
+  kindIcons: undefined,
+}, (props, { dispatch, flag, element, expose }) => {
+  const [internal, setInternal] = createSignal<string | ComposerDoc>(props.value ?? '');
   // Seed staged attachments from the `attachments` property; the element manages
   // its own state from there (paperclip adds, per-chip remove deletes).
   const [attachments, setAttachments] = createSignal<AttachmentData[]>(props.attachments ?? []);
@@ -106,11 +112,10 @@ defineWebComponent<Props, Events>('kai-prompt-input', {
     if (props.attachments) setAttachments(props.attachments);
   });
 
-  // Read declarative <kai-action> and <kai-slash-command> children from light DOM —
-  // same pattern as kai-message. Shadow DOM with no <slot> suppresses them visually;
-  // they are invisible data carriers. One MutationObserver covers both element types.
+  // Read declarative <kai-action> children from light DOM — same pattern as
+  // kai-message. Shadow DOM with no <slot> suppresses them visually; they are
+  // invisible data carriers.
   const [toolbarActions, setToolbarActions] = createSignal<CustomAction[]>([]);
-  const [slottedSlashCommands, setSlottedSlashCommands] = createSignal<SlashCommandItem[]>([]);
   onMount(() => {
     const readActions = () => {
       const nodes = [...element.querySelectorAll('kai-action')];
@@ -121,22 +126,45 @@ defineWebComponent<Props, Events>('kai-prompt-input', {
         tooltip: n.getAttribute('tooltip') ?? undefined,
       })));
     };
-    const readSlashCommands = () => {
-      const nodes = [...element.querySelectorAll('kai-slash-command')];
-      setSlottedSlashCommands(nodes.map(parseKaiSlashCommandElement));
-    };
-    const readAll = () => { readActions(); readSlashCommands(); };
-    readAll();
-    const observer = new MutationObserver(readAll);
+    readActions();
+    const observer = new MutationObserver(readActions);
     observer.observe(element, { childList: true, attributes: true, subtree: true });
     onCleanup(() => observer.disconnect());
   });
 
-  const current = () => props.value ?? internal();
+  // A string `value` is controlled (the host owns it). A ComposerDoc `value` is a
+  // one-time seed: it lives in `internal` and the user's edits (which arrive as
+  // strings) replace it there, so the seed never fights the edits.
+  const current = (): string | ComposerDoc =>
+    typeof props.value === 'string' ? props.value : internal();
+
+  // Latest structured change from the composer (doc + entities). Captured before
+  // the string value-change fires (the bridge calls onComposerChange first), so
+  // the dispatched events can carry the doc. Reset to a text-only doc when a value
+  // is set that didn't come from the composer (e.g. a suggestion fill).
+  let lastChange: ComposerChange = { doc: [], text: '', entities: [] };
 
-  const handleChange = (v: string) => { setInternal(v); dispatch('kai-value-change', { value: v }); };
+  // Seed from a ComposerDoc `value`: push it into `internal` (so `current()`
+  // reflects the seed) and into `lastChange` (so a submit-WITHOUT-edit still
+  // carries the seeded doc + entities). Re-runs only when `value` is reassigned.
+  createEffect(() => {
+    const v = props.value;
+    if (v != null && typeof v !== 'string') {
+      const doc = normalizeValue(v);
+      setInternal(doc);
+      lastChange = { doc, text: serializeToText(doc), entities: entitiesOf(doc) };
+    }
+  });
+
+  const handleChange = (v: string) => {
+    setInternal(v);
+    if (v !== lastChange.text) lastChange = { doc: normalizeValue(v), text: v, entities: [] };
+    dispatch('kai-value-change', { value: v, doc: lastChange.doc, entities: lastChange.entities });
+  };
   const handleSubmit = () => {
-    dispatch('kai-submit', { value: current(), attachments: attachments() });
+    // `value` is always the flattened string (back-compat); a seeded doc is
+    // serialized. The structured `doc`/`entities` carry the pills.
+    dispatch('kai-submit', { value: serializeToText(normalizeValue(current())), doc: lastChange.doc, entities: lastChange.entities, attachments: attachments() });
     setAttachments([]);
   };
   const handleSuggestionClick = (v: string) => {
@@ -145,16 +173,36 @@ defineWebComponent<Props, Events>('kai-prompt-input', {
       dispatch('kai-suggestion-click', { value: v });
     } else {
       // Default: behave as if the user typed the suggestion and pressed submit.
-      dispatch('kai-submit', { value: v, attachments: attachments() });
+      dispatch('kai-submit', { value: v, doc: normalizeValue(v), entities: [], attachments: attachments() });
       setAttachments([]);
     }
   };
 
-  // Prop slash commands take precedence; slotted children are appended after.
-  const allSlashCommands = () => [
-    ...(props.slashCommands ?? []),
-    ...slottedSlashCommands(),
-  ];
+  // ── Imperative API (instance methods on the host) ──────────────────────────
+  // The input half of the interaction surface; counterpart to the kai-* events.
+  expose({
+    /** Focus the text editor inside the shadow root (not the hidden file input). */
+    focus: (options?: FocusOptions) => {
+      const root = element.shadowRoot;
+      const target =
+        root?.querySelector<HTMLElement>('[contenteditable]:not([contenteditable="false"]), textarea') ??
+        root?.querySelector<HTMLElement>('input:not([type="file"])');
+      target?.focus(options);
+    },
+    /** Blur the focused input control. */
+    blur: () =>
+      (element.shadowRoot?.activeElement as HTMLElement | null)?.blur(),
+    /** Clear the text and any staged attachments (fires kai-value-change /
+     *  kai-attachments-change so a controlled consumer can react). */
+    clear: () => {
+      handleChange('');
+      if (attachments().length) { setAttachments([]); dispatch('kai-attachments-change', { attachments: [] }); }
+    },
+    /** Send the current value programmatically — same path as Enter / the send
+     *  button (fires kai-submit, then clears staged attachments). Named `send`,
+     *  not `submit`, to avoid colliding with the `submit` prop. */
+    send: () => handleSubmit(),
+  });
 
   return (
     <DefaultPromptInput
@@ -163,22 +211,23 @@ defineWebComponent<Props, Events>('kai-prompt-input', {
       disabled={flag('disabled')}
       loading={flag('loading')}
       stoppable={flag('stoppable')}
+      submit={props.submit as 'always' | 'auto'}
+      attach={flag('attach')}
       suggestions={props.suggestions}
       attachments={attachments()}
-      slashCommands={allSlashCommands().length ? allSlashCommands() : undefined}
-      slashActiveIds={props.slashActiveIds}
-      slashCompact={flag('slashCompact')}
       search={flag('search')}
       voice={flag('voice')}
       toolbarActions={toolbarActions()}
+      triggers={props.triggers}
+      kindIcons={props.kindIcons as Record<string, string> | undefined}
+      onComposerChange={(c) => { lastChange = c; }}
       onValueChange={handleChange}
       onSubmit={handleSubmit}
       onSuggestionClick={handleSuggestionClick}
-      onAttachmentsChange={setAttachments}
+      onAttachmentsChange={(a) => { setAttachments(a); dispatch('kai-attachments-change', { attachments: a }); }}
       onSearch={() => dispatch('kai-search')}
       onVoice={() => dispatch('kai-voice')}
       onStop={() => dispatch('kai-stop')}
-      onSlashSelect={(command) => dispatch('kai-slash-select', { command })}
       onAction={(id) => dispatch('kai-toolbar-action', { action: id })}
     />
   );

package/src/elements/prompt-suggestions.tsx

@@ -2,7 +2,7 @@ import { For, createSignal, onMount, onCleanup } from 'solid-js';
 import { defineWebComponent } from './define';
 import { PromptSuggestion } from '../components/prompt-suggestion';
 
-type Item = string | { label: string; value?: string };
+type Item = string | { label: string; value?: string; icon?: string };
 
 interface Props extends Record<string, unknown> {
   /** The suggestions. Strings, or `{ label, value }` when the displayed text
@@ -10,9 +10,13 @@ interface Props extends Record<string, unknown> {
   suggestions: Item[];
   /** Chip style: `'outline'` (default), `'ghost'`, or `'default'` (filled). */
   variant?: 'outline' | 'ghost' | 'default';
-  /** Size preset for each chip. Defaults to the pill default (`'lg'`); pass
-   *  `'sm'` for smaller pills (or `'md'`). */
-  size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+  /** Row height for `layout="list"`: `'md'` (default) or `'lg'` for taller rows.
+   *  Chips are unaffected. */
+  size?: 'md' | 'lg';
+  /** Layout: `'chips'` (default) renders a wrapping row of rounded pills;
+   *  `'list'` renders a vertical, full-width "Ideas for you" list — each row
+   *  is left-aligned with a leading `icon`, a label, and a hover background. */
+  layout?: 'chips' | 'list';
   /** Full-width left-aligned rows instead of pills. */
   block?: boolean;
   /** Substring to highlight within each suggestion. */
@@ -27,18 +31,20 @@ interface Events {
 
 const labelOf = (s: Item) => (typeof s === 'string' ? s : s.label);
 const valueOf = (s: Item) => (typeof s === 'string' ? s : s.value ?? s.label);
+const iconOf = (s: Item) => (typeof s === 'string' ? undefined : s.icon);
 
 /** Parse a single `<kai-suggestion>` node into an `Item` descriptor. */
 export function parseSuggestionNode(n: Element): Item {
   const text = n.textContent?.trim() ?? '';
   const value = n.getAttribute('value') ?? text;
-  return { label: text, value };
+  return { label: text, value, icon: n.getAttribute('icon') ?? undefined };
 }
 
 /**
  * `<kai-suggestions>` — a row/list of suggestion chips. Data via the
- * `suggestions` property; `variant`/`block`/`highlight` attributes; emits
- * `select`.
+ * `suggestions` property; `variant`/`layout`/`block`/`highlight` attributes;
+ * emits `select`. `layout="list"` renders the vertical "Ideas for you" list
+ * (leading icon + label + hover background) instead of pills.
  *
  * Alternatively, declare chips as `<kai-suggestion>` child elements
  * (light-DOM data carriers — hidden by the Shadow DOM):
@@ -53,7 +59,8 @@ export function parseSuggestionNode(n: Element): Item {
 defineWebComponent<Props, Events>('kai-suggestions', {
   suggestions: [],
   variant: 'outline',
-  size: undefined,
+  size: 'md',
+  layout: 'chips',
   block: false,
   highlight: undefined,
 }, (props, { dispatch, flag, element }) => {
@@ -74,14 +81,23 @@ defineWebComponent<Props, Events>('kai-suggestions', {
   // Merge prop suggestions (first) with declarative children (after).
   const allSuggestions = () => [...(props.suggestions ?? []), ...slottedSuggestions()];
 
+  const isList = () => props.layout === 'list';
+
+  const containerClass = () =>
+    isList() ? 'flex flex-col gap-0.5'
+      : flag('block') ? 'flex flex-col gap-2'
+        : 'flex flex-wrap gap-2';
+
   return (
-    <div class={flag('block') ? 'flex flex-col gap-2' : 'flex flex-wrap gap-2'}>
+    <div class={containerClass()}>
       <For each={allSuggestions()}>
         {(s) => (
           <PromptSuggestion
             variant={props.variant}
             size={props.size}
+            icon={iconOf(s)}
             block={flag('block')}
+            list={isList()}
             highlight={props.highlight}
             onClick={() => dispatch('kai-select', { value: valueOf(s) })}
           >

package/src/elements/reasoning.tsx

@@ -1,46 +1,67 @@
 import { defineWebComponent } from './define';
-import { Reasoning, ReasoningTrigger, ReasoningContent } from '../components/reasoning';
+import { Reasoning, ReasoningTrigger, ReasoningContent, type ReasoningController } from '../components/reasoning';
 import { ChatConfig, useChatConfig } from '../primitives/chat-config';
+import { wireDisclosure } from './disclosure';
 
 interface Props extends Record<string, unknown> {
   /** The reasoning text to display. */
   text: string;
   /** Trigger label. */
   label?: string;
-  /** Controlled open state — set as a property (`el.open = true`). Omit for
-   *  uncontrolled (the trigger toggles it). */
+  /** Drive/observe open state (Shoelace-style: settable + reflected to the `open`
+   *  attribute; the element still self-manages on trigger click + while
+   *  streaming). Set `el.open = true`; listen for `kai-open-change`. */
   open?: boolean;
+  /** Initial open state on mount (uncontrolled seed). */
+  defaultOpen?: boolean;
   /** While true, auto-expands (and re-collapses when it flips false). */
   streaming?: boolean;
   /** Render `text` as markdown. */
   markdown?: boolean;
+  /** Gate the disclosure trigger — programmatic `show()/hide()/toggle()` still
+   *  work, but the trigger click no longer toggles. */
+  disabled?: boolean;
 }
 
 /** Events fired by `<kai-reasoning>`. */
 interface Events {
-  /** Open state changed (via the trigger or streaming auto-open). */
+  /** The reasoning block expanded or collapsed (via the trigger, streaming
+   *  auto-open, or a method). */
   'kai-open-change': { open: boolean };
 }
 
 /**
  * `<kai-reasoning>` — a collapsible reasoning/thinking block that auto-expands
- * while `streaming`. Text via the `text` property; `markdown`/`streaming` flags;
- * `open` is a controlled property; emits `kai-open-change`.
+ * while `streaming`. Text via the `text` property; `markdown`/`streaming` flags.
+ * Open state is the standard disclosure surface: settable+reflecting `open`,
+ * `kai-open-change`, and `show()`/`hide()`/`toggle()` (gated by `disabled`);
+ * seed with `defaultOpen`.
  */
 defineWebComponent<Props, Events>('kai-reasoning', {
   text: '',
   label: 'Reasoning',
   open: undefined,
+  defaultOpen: undefined,
   streaming: false,
   markdown: true,
-}, (props, { dispatch, flag }) => {
+  disabled: undefined,
+}, (props, ctx) => {
+  const { flag } = ctx;
   const outer = useChatConfig();
+  let api: ReasoningController | undefined;
+
+  // The standard disclosure surface: settable+reflecting `open`, kai-open-change,
+  // show/hide/toggle, disabled-gating. See ./disclosure. This is the SOLE emitter
+  // of kai-open-change — we no longer dispatch it from Reasoning's onOpenChange.
+  wireDisclosure(ctx, () => api, () => props.open);
+
   return (
     <ChatConfig portalMount={outer.portalMount()}>
       <Reasoning
-        open={props.open}
+        defaultOpen={flag('defaultOpen')}
         isStreaming={flag('streaming')}
-        onOpenChange={(open) => dispatch('kai-open-change', { open })}
+        disabled={flag('disabled')}
+        controllerRef={(a) => (api = a)}
       >
         <ReasoningTrigger>{props.label}</ReasoningTrigger>
         <ReasoningContent markdown={flag('markdown')}>{props.text}</ReasoningContent>

package/src/elements/register-impl.ts

@@ -22,9 +22,6 @@ import './context-meter';
 import './feedback-bar';
 import './chat-scope-picker';
 // Phase 3 — input ecosystem
-// (NB: SlashCommand is context-bound to PromptInput — it observes the input
-//  value via usePromptInput() — so it is NOT a standalone element. It will fold
-//  into <kai-prompt-input> as a `slash-commands` property in a later pass.)
 import './prompt-suggestions';
 import './file-upload';
 import './voice-input';
@@ -37,6 +34,13 @@ import './message-skills';
 import './source';
 import './response-stream';
 import './empty';
+import './status';
+import './nav';
+import './progress-bar';
+import './coachmark';
+import './tabs';
+import './voice-output';
+import './screen';
 import './chain-of-thought';
 import './resizable';
 import './file-tree';
@@ -44,6 +48,17 @@ import './artifact';
 import './scroll-button';
 import './popover';
 import './switch';
+import './button';
+import './avatar';
+import './badge';
+import './tooltip';
+import './notice';
+import './icon';
+import './separator';
+import './scroll-area';
+import './hover-card';
+import './skeleton';
+import './toast';
 // Generative-UI cards (Card Contract)
 import './card';
 import './form';
@@ -53,3 +68,26 @@ import './confirm-card';
 import './tasks';
 import './choice';
 import './cards';
+// Dual-response comparison (preference capture)
+import './compare';
+// Rich text composer with entity pills, trigger menus, and keyword highlighting
+import './composer';
+// W3 phase 2: cascading action menu from a JSON items-tree
+import './menu';
+// W4 phase 1: grouped filterable command/mention palette
+import './command';
+// Prompt dock + settings building blocks (graduated from SolidJS prototypes)
+import './prompt-dock';
+import './segmented';
+import './settings-group';
+import './setting-item';
+// Multi-agent workspace primitives (graduated from SolidJS prototypes)
+import './pane';
+import './pane-group';
+import './agent-card';
+import './dialog';
+// Input & search field family
+import './input';
+import './search';
+import './kbd';
+import './editable-label';

package/src/elements/register.ts

@@ -13,10 +13,27 @@
 // Registration is async (a microtask after this module loads). Consumers that
 // need the upgraded element (e.g. the React runtime) guard with
 // customElements.whenDefined(), which resolves once the impl chunk has run.
-if (typeof window !== 'undefined' && typeof customElements !== 'undefined') {
-  void import('./register-impl');
-}
+/** Resolves once the kai-* elements are registered (browser); inert on the server.
+ *  Await this instead of customElements.whenDefined for a single ready signal.
+ *
+ *  NOTE: this MUST stay an exported binding. A bare `void import('./register-impl')`
+ *  is a result-unused dynamic import that the single-entry register-all build
+ *  (vite.config.ts → dist/kai.es.js) tree-shakes away as dead code, leaving the
+ *  bundle with NOTHING registered. Exporting the promise keeps the import live. */
+export const elementsReady: Promise<unknown> =
+  typeof window !== 'undefined' && typeof customElements !== 'undefined'
+    ? import('./register-impl')
+    : Promise.resolve();
 
 export type { ChatMessage, ChatMessageAction } from './chat-types';
 export { configureCodeHighlighting, isCodeHighlightingEnabled } from '../primitives/highlighter';
 export type { CodeHighlightingOptions } from '../primitives/highlighter';
+
+// Imperative toast API — usable directly from the elements entry so consumers
+// who only import the web-components bundle still get `toast()`. The store is
+// SSR-safe (no DOM touched until the first toast is raised on the client).
+export { toast, configureToasts } from '../primitives/toast-store';
+export type {
+  ToastConfig,
+  ToastItem, ToastVariant, ToastAction, ToastOptions, ToastHandle,
+} from '../primitives/toast-store';

package/src/elements/remote.tsx

@@ -81,6 +81,10 @@ function buildWrappedPolicy(element: HTMLElement, userPolicy: CardPolicy | undef
       emit({ kind: 'dismiss', cardId });
       userPolicy?.onDismiss?.(cardId);
     },
+    onReopen(cardId) {
+      emit({ kind: 'reopen', cardId });
+      userPolicy?.onReopen?.(cardId);
+    },
     onError(cardId, message) {
       emit({ kind: 'error', cardId, message });
       userPolicy?.onError?.(cardId, message);