@copilotkit/channels-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) Atai Barkai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,197 @@
+# @copilotkit/channels-ui
+
+A pure **JSX runtime + intermediate representation (IR) + cross-platform
+component vocabulary** for authoring rich bot messages. No React, no agent
+runtime, no Slack — `@copilotkit/channels-ui` depends on nothing in the repo
+except `@copilotkit/shared` (for `StandardSchemaV1` types). That's what lets
+a platform adapter (e.g. `@copilotkit/channels-slack`) translate the same UI into
+Block Kit, while keeping the component layer tree-shakeable and testable in
+isolation.
+
+You author UI as JSX, it normalizes to one serializable IR (`BotNode[]`), and
+behavior props (`onClick` / `onSelect` / `onSubmit`) ride along on the nodes
+for the engine (`@copilotkit/channels`) to bind.
+
+## Install
+
+```sh
+pnpm add @copilotkit/channels-ui
+```
+
+To author components as JSX, point the TypeScript JSX factory at this package
+in the consuming project's `tsconfig.json`:
+
+```jsonc
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@copilotkit/channels-ui",
+  },
+}
+```
+
+This package ships `@copilotkit/channels-ui/jsx-runtime` (and
+`/jsx-dev-runtime`) exporting `jsx` / `jsxs` / `Fragment`. Author component
+files as `.tsx`.
+
+## Example
+
+```tsx
+import {
+  Message,
+  Header,
+  Section,
+  Actions,
+  Button,
+  renderToIR,
+} from "@copilotkit/channels-ui";
+
+function Greeting({ name }: { name: string }) {
+  return (
+    <Message>
+      <Header>Hello {name}</Header>
+      <Section>Pick an option — **bold** and `code` work too.</Section>
+      <Actions>
+        <Button
+          style="primary"
+          onClick={(ctx) => ctx.thread.post("you clicked!")}
+        >
+          Continue
+        </Button>
+      </Actions>
+    </Message>
+  );
+}
+
+const ir = renderToIR(<Greeting name="Ada" />);
+// ir is BotNode[] — hand it to an adapter, or let @copilotkit/channels post it.
+```
+
+`renderToIR(ui: Renderable): BotNode[]` recursively invokes any component
+function (passing its props) until only intrinsic string-typed nodes remain;
+strings in children become `{ type: "text", props: { value } }`; `Fragment`
+flattens its children. Components must be **pure functions of serializable
+props** — same props in, same tree out — which is what makes content-stable
+action binding and re-render rehydration possible in `@copilotkit/channels`.
+
+`Renderable` also accepts a `{ raw }` escape hatch, which `renderToIR` passes
+through as `{ type: "raw", props: { value } }` for adapters that want to
+short-circuit to a native payload.
+
+## Component vocabulary
+
+Each component is a thin function returning a `BotNode` with a stable
+intrinsic `type` string. An adapter maps these to native primitives.
+
+Every component has a fully-typed prop interface (`MessageProps`,
+`ButtonProps`, …, all exported), and the package ships its own `JSX` namespace
+(resolved via `jsxImportSource: "@copilotkit/channels-ui"`). So JSX is statically
+checked: unknown attributes, wrong prop values, and bad children are
+compile-time errors — `<Section bogus={1} />` or `<Button style="nope">` won't
+type-check. There are no lowercase intrinsic tags; the vocabulary is the
+capitalized component set below.
+
+| Component  | Purpose                                                                    |
+| ---------- | -------------------------------------------------------------------------- |
+| `Message`  | Root container for a single posted message — `accent`, `onReaction`.       |
+| `Header`   | Bold header / title row.                                                   |
+| `Section`  | A block of (markdown) body text.                                           |
+| `Markdown` | Explicit markdown text block.                                              |
+| `Field`    | One label/value cell inside `Fields` — optional `label`.                   |
+| `Fields`   | A grid of `Field`s (two-column key/value layout).                          |
+| `Context`  | Small, muted secondary text (footnotes, metadata).                         |
+| `Actions`  | Row container for interactive controls.                                    |
+| `Button`   | Clickable button — `onClick`, `value`, `style`, or `url` (link button).    |
+| `Select`   | Dropdown — `onSelect`, `placeholder`, `options: {label,value}[]`, `multi`. |
+| `Input`    | Text input — `onSubmit`, `placeholder`, `multiline`, `name`.               |
+| `Image`    | An image block.                                                            |
+| `Divider`  | A horizontal rule.                                                         |
+
+### Behavior props
+
+Interactive components carry handler props typed as `ClickHandler`:
+
+- `Button` → `onClick`
+- `Select` → `onSelect`
+- `Input` → `onSubmit`
+
+`Message` also takes `onReaction`, fired when a user reacts to the posted
+message (adds or removes). The first arg is the emoji; the second carries
+`added`/`user`/`rawEmoji` plus a `thread` and the reacted message's
+`messageRef` — the same surface an `onClick` gets, so a reaction can post new
+UI, swap the message in place, or run a HITL flow:
+
+```tsx
+<Message
+  onReaction={async (emoji, r) => {
+    if (!r.added) return;
+    if (emoji === "bug") await r.thread.post(<FileBug />); // post new UI
+    if (emoji === "white_check_mark")
+      await r.thread.update(r.messageRef, <Resolved />); // swap UI in place
+  }}
+>
+  …
+</Message>
+```
+
+It's durable on the same terms as a component `onClick`: when the `<Message>`
+comes from a component registered via `createBot({ components: [...] })` and a
+durable `store` is configured, a reaction after a restart re-renders the
+component to re-derive the handler. Inline handlers (and `<Message>` used
+directly) route in-process but don't survive a restart. For durable, filtered
+reaction routing across _all_ messages, use `bot.onReaction(...)`.
+
+A `ClickHandler` receives an `InteractionContext`, both generic over the
+clicked control's value type:
+
+```ts
+type ClickHandler<TValue = unknown> = (
+  ctx: InteractionContext<TValue>,
+) => void | Promise<void>;
+
+interface InteractionContext<TValue = unknown> {
+  thread: Thread;
+  message: IncomingMessage;
+  action: { id: string; value?: TValue };
+  values: Record<string, unknown>;
+  user: PlatformUser;
+  platform: string;
+}
+```
+
+`Button` is generic over its `value` prop, so `ctx.action.value` is **inferred**
+from `value` — `<Button value={{ confirmed: true }} onClick={(ctx) => ctx.action.value?.confirmed}>`
+type-checks with no cast. `Select`/`Input` resolve the value to `string`.
+
+The structural types `Thread`, `IncomingMessage`, `PlatformUser`,
+`MessageRef`, and `ClickHandler` are declared here for handler typing only —
+they're implemented at runtime by `@copilotkit/channels` and its adapters.
+`@copilotkit/channels-ui` has no runtime dependency on them.
+
+## `bind()` — the Tier-2 escape hatch
+
+Inline `onClick` handlers are bound by content (component identity + path +
+serializable props), so a handler can be re-derived after a restart by
+re-rendering the component. When a handler closes over data that **can't** be
+reconstructed from props, wrap it with `bind()` so the engine persists that
+small payload explicitly alongside the minted action id:
+
+```tsx
+import { bind } from "@copilotkit/channels-ui";
+
+<Button onClick={bind(handleChoice, { choiceId: "abc123" })}>Choose</Button>;
+```
+
+`bind(handler, args)` returns a tagged handler; the action registry stores
+`args` so a cold-path dispatch passes them back via `ctx.action.value`. Keep
+`args` small — it's the only handler-specific state that survives a restart.
+
+## Exports
+
+Runtime: `renderToIR`, `Fragment`, `bind`, and the vocabulary
+(`Message`, `Header`, `Section`, `Markdown`, `Field`, `Fields`, `Context`,
+`Actions`, `Button`, `Select`, `Input`, `Image`, `Divider`).
+Types: `BotNode`, `BotChildren`, `ComponentFn`, `Renderable`, `Thread`,
+`InteractionContext`, `PlatformUser`, `IncomingMessage`, `MessageRef`,
+`ClickHandler`, and the per-component prop types (`MessageProps`,
+`ButtonProps`, `SelectProps`, `TableProps`, `TableColumn`, …).

package/dist/bind.d.ts

@@ -0,0 +1,6 @@
+import type { ClickHandler } from "./types.js";
+export declare function bind(handler: ClickHandler, args: unknown): ClickHandler;
+export declare function isBound(h: unknown): boolean;
+export declare function getBoundArgs(h: unknown): unknown;
+export declare function getBoundHandler(h: unknown): ClickHandler | undefined;
+//# sourceMappingURL=bind.d.ts.map

package/dist/bind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind.d.ts","sourceRoot":"","sources":["../src/bind.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAsB,MAAM,YAAY,CAAC;AAMnE,wBAAgB,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,GAAG,YAAY,CAQvE;AACD,wBAAgB,OAAO,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,CAE3C;AACD,wBAAgB,YAAY,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,CAEhD;AACD,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,SAAS,CAEpE"}

package/dist/bind.js

@@ -0,0 +1,18 @@
+const BOUND = Symbol.for("copilotkit.bot-ui.bound");
+export function bind(handler, args) {
+    const wrapped = ((ctx) => handler({
+        ...ctx,
+        action: { ...ctx.action, value: args },
+    }));
+    wrapped[BOUND] = { handler, args };
+    return wrapped;
+}
+export function isBound(h) {
+    return typeof h === "function" && !!h[BOUND];
+}
+export function getBoundArgs(h) {
+    return h[BOUND]?.args;
+}
+export function getBoundHandler(h) {
+    return h[BOUND]?.handler;
+}

package/dist/bind.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=bind.test.d.ts.map

package/dist/bind.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind.test.d.ts","sourceRoot":"","sources":["../src/bind.test.ts"],"names":[],"mappings":""}

package/dist/bind.test.js

@@ -0,0 +1,14 @@
+import { describe, it, expect } from "vitest";
+import { bind, isBound, getBoundArgs, getBoundHandler } from "./bind.js";
+describe("bind", () => {
+    it("tags a handler with serializable args", () => {
+        const h = () => { };
+        const b = bind(h, { flightId: "x1" });
+        expect(isBound(b)).toBe(true);
+        expect(getBoundArgs(b)).toEqual({ flightId: "x1" });
+        expect(getBoundHandler(b)).toBe(h);
+    });
+    it("plain handler is not bound", () => {
+        expect(isBound(() => { })).toBe(false);
+    });
+});

package/dist/components.d.ts

@@ -0,0 +1,154 @@
+import type { BotNode } from "./ir.js";
+import type { ClickHandler, MessageReactionHandler } from "./types.js";
+/**
+ * Anything that can appear as a child in the component tree: nested elements,
+ * text, numbers, and conditionals (`false` / `null` / `undefined` render
+ * nothing), plus arrays thereof.
+ */
+export type BotChildren = BotNode | string | number | boolean | null | undefined | BotChildren[];
+/** Mixin for the container components that wrap children. */
+interface WithChildren {
+    children?: BotChildren;
+}
+export interface MessageProps extends WithChildren {
+    /** Accent color (hex, e.g. `#27AE60`) for the message's colored rail. */
+    accent?: string;
+    /**
+     * Called when a user reacts to this message (add or remove). The first arg is
+     * the emoji, e.g. `onReaction={(r) => r === "bug" ? triage() : ack()}`; the
+     * second carries `added`/`user`/`rawEmoji` plus a `thread` and the reacted
+     * message's `messageRef` — the same surface an `onClick` gets, so the handler
+     * can `thread.post(...)`, `thread.update(messageRef, ...)`, or run a HITL flow.
+     * Durable on the same terms as a component `onClick`: survives a restart when
+     * the `<Message>` comes from a registered component and a durable store is
+     * configured; inline handlers route in-process only.
+     */
+    onReaction?: MessageReactionHandler;
+}
+export interface HeaderProps extends WithChildren {
+}
+export interface SectionProps extends WithChildren {
+}
+export interface MarkdownProps extends WithChildren {
+}
+export interface FieldsProps extends WithChildren {
+}
+export interface FieldProps extends WithChildren {
+    /**
+     * Bold label rendered before the value (e.g. `<Field label="Status">Online</Field>`).
+     * Rendered on Discord, Slack, and Telegram; surfaces without a field label
+     * concept fall back to the value text alone.
+     */
+    label?: string;
+}
+export interface ContextProps extends WithChildren {
+}
+export interface ActionsProps extends WithChildren {
+}
+export interface ImageProps {
+    /** Image URL. */
+    url: string;
+    /** Alternative text for accessibility. */
+    alt?: string;
+}
+/** `<Divider />` takes no props or children. */
+export type DividerProps = {
+    children?: never;
+};
+export interface ButtonProps<TValue = unknown> extends WithChildren {
+    /**
+     * Inline handler run when the button is clicked (bound by the action
+     * registry). Its `ctx.action.value` is typed as `TValue`, inferred from
+     * `value`. Ignored when `url` is set (a link button doesn't dispatch).
+     */
+    onClick?: ClickHandler<TValue>;
+    /** Value echoed back to `onClick`/`awaitChoice` on click; drives `TValue`. */
+    value?: TValue;
+    /**
+     * Makes this a link button that opens `url` instead of dispatching a handler.
+     * Rendered natively on Slack, Discord, Teams, and Telegram; surfaces without
+     * link buttons skip it. When set, `onClick`/`value` are ignored.
+     */
+    url?: string;
+    /** Slack button accent. */
+    style?: "primary" | "danger";
+}
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export interface SelectProps {
+    /**
+     * Handler run on selection. `ctx.action.value` is the chosen option's `value`
+     * (a `string`), or a `string[]` of chosen values when `multi` is set.
+     */
+    onSelect?: ClickHandler<string | string[]>;
+    placeholder?: string;
+    options: SelectOption[];
+    /**
+     * Allow selecting multiple options. Rendered natively on Slack
+     * (`multi_static_select`), Discord (max-values), and Teams
+     * (`isMultiSelect`); surfaces that can only express a single choice
+     * (Telegram, WhatsApp) degrade to single-select. When set, `onSelect`
+     * receives a `string[]`.
+     */
+    multi?: boolean;
+}
+export interface InputProps {
+    /** Handler run on submit; `ctx.action.value` is the entered text. */
+    onSubmit?: ClickHandler<string>;
+    placeholder?: string;
+    multiline?: boolean;
+    name?: string;
+}
+export interface TableColumn {
+    header: string;
+    align?: "left" | "center" | "right";
+}
+export interface TableProps extends WithChildren {
+    columns?: TableColumn[];
+}
+export interface RowProps extends WithChildren {
+}
+export interface CellProps extends WithChildren {
+}
+/** The chart kinds a surface can render. Platforms that don't support a native
+ *  chart simply skip the node (the renderer is total). */
+export type ChartType = "verticalBar" | "horizontalBar" | "line" | "pie" | "donut";
+/** One `(label, value)` datum. `label` is the category/x value, `value` the
+ *  numeric y value (or the slice size for pie/donut). */
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+}
+export interface ChartProps {
+    /** Chart kind; defaults to `verticalBar`. */
+    type?: ChartType;
+    /** Title shown above the chart. */
+    title?: string;
+    /** Axis titles (cartesian charts only — bar/line; ignored for pie/donut). */
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+    /** The data to plot — one entry per category. */
+    data: ChartDataPoint[];
+}
+export declare const intrinsic: <P>(type: string) => (props: P) => BotNode;
+export declare const Message: (props: MessageProps) => BotNode;
+export declare const Header: (props: HeaderProps) => BotNode;
+export declare const Section: (props: SectionProps) => BotNode;
+export declare const Markdown: (props: MarkdownProps) => BotNode;
+export declare const Field: (props: FieldProps) => BotNode;
+export declare const Fields: (props: FieldsProps) => BotNode;
+export declare const Context: (props: ContextProps) => BotNode;
+export declare const Actions: (props: ActionsProps) => BotNode;
+export declare const Image: (props: ImageProps) => BotNode;
+export declare const Divider: (props: DividerProps) => BotNode;
+export declare const Chart: (props: ChartProps) => BotNode;
+export declare const Row: (props: RowProps) => BotNode;
+export declare const Cell: (props: CellProps) => BotNode;
+export declare function Button<TValue = unknown>(props: ButtonProps<TValue>): BotNode;
+export declare function Select(props: SelectProps): BotNode;
+export declare function Input(props: InputProps): BotNode;
+export declare function Table(props: TableProps): BotNode;
+export {};
+//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

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

package/dist/components.js

@@ -0,0 +1,32 @@
+// ---- Components ----------------------------------------------------------
+// `intrinsic` produces a typed component that lowers `<X .../>` to an IR node
+// of the given `type`; the generic `P` is what gives each tag its prop type.
+export const intrinsic = (type) => (props) => ({
+    type,
+    props: (props ?? {}),
+});
+export const Message = intrinsic("message");
+export const Header = intrinsic("header");
+export const Section = intrinsic("section");
+export const Markdown = intrinsic("markdown");
+export const Field = intrinsic("field");
+export const Fields = intrinsic("fields");
+export const Context = intrinsic("context");
+export const Actions = intrinsic("actions");
+export const Image = intrinsic("image");
+export const Divider = intrinsic("divider");
+export const Chart = intrinsic("chart");
+export const Row = intrinsic("row");
+export const Cell = intrinsic("cell");
+export function Button(props) {
+    return { type: "button", props: props };
+}
+export function Select(props) {
+    return { type: "select", props: props };
+}
+export function Input(props) {
+    return { type: "input", props: props };
+}
+export function Table(props) {
+    return { type: "table", props: props };
+}

package/dist/components.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=components.test.d.ts.map

package/dist/components.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.test.d.ts","sourceRoot":"","sources":["../src/components.test.tsx"],"names":[],"mappings":""}

package/dist/components.test.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@copilotkit/channels-ui/jsx-runtime";
+import { describe, it, expect } from "vitest";
+import { renderToIR } from "./render.js";
+import { Message, Header, Section, Actions, Button, Divider, Table, Row, Cell, Image, Select, Chart, } from "./components.js";
+/**
+ * Compile-time prop type guards. This arrow is never invoked — the assertions
+ * are validated by `tsc` (build / check-types). Each `@ts-expect-error` fails
+ * the type-check if the props ever stop being enforced (regression guard); the
+ * trailing valid cases fail if a legitimate usage is wrongly rejected.
+ */
+const __typeGuards = () => {
+    // @ts-expect-error unknown prop on a container component
+    _jsx(Section, { bogus: 1 });
+    // @ts-expect-error invalid Button.style value
+    _jsx(Button, { style: "nope", children: "x" });
+    // @ts-expect-error excess prop on Button
+    _jsx(Button, { extra: true, children: "x" });
+    // @ts-expect-error Message.accent must be a string
+    _jsx(Message, { accent: 1 });
+    // @ts-expect-error Divider takes no children
+    _jsx(Divider, { children: "x" });
+    // @ts-expect-error Image.url is required
+    _jsx(Image, { alt: "x" });
+    // @ts-expect-error Select.options is required
+    _jsx(Select, { placeholder: "p" });
+    // @ts-expect-error Chart.data is required
+    _jsx(Chart, { title: "x" });
+    // @ts-expect-error invalid Chart.type value
+    _jsx(Chart, { type: "scatter", data: [] });
+    // Valid usages — must type-check cleanly.
+    _jsxs(Section, { children: ["hello ", 42] });
+    _jsx(Message, { accent: "#27AE60", children: _jsx(Header, { children: "Title" }) });
+    _jsx(Button, { style: "primary", value: { ok: true }, onClick: () => { }, children: "Go" });
+    _jsx(Image, { url: "https://example.com/x.png", alt: "x" });
+    _jsx(Chart, { type: "line", title: "Revenue", xAxisTitle: "Month", yAxisTitle: "USD", data: [{ label: "Jan", value: 10 }] });
+    // Button.value flows into onClick: ctx.action.value is inferred, not unknown.
+    _jsx(Button, { value: { confirmed: true }, onClick: (ctx) => {
+            ctx.action.value?.confirmed;
+            // @ts-expect-error 'nope' is not on the inferred value type
+            ctx.action.value?.nope;
+        }, children: "Confirm" });
+};
+void __typeGuards;
+describe("component vocabulary", () => {
+    it("Message wraps children with intrinsic type 'message'", () => {
+        const out = renderToIR(_jsx(Message, { children: _jsx(Header, { children: "Hi" }) }));
+        expect(out[0].type).toBe("message");
+    });
+    it("Button carries onClick and style in props", () => {
+        const fn = () => { };
+        const out = renderToIR(_jsx(Actions, { children: _jsx(Button, { onClick: fn, style: "primary", children: "Go" }) }));
+        const actions = out[0];
+        const button = actions.props.children[0];
+        expect(button.type).toBe("button");
+        expect(button.props.onClick).toBe(fn);
+        expect(button.props.style).toBe("primary");
+    });
+    it("Divider renders with no children", () => {
+        const out = renderToIR(_jsx(Divider, {}));
+        expect(out[0]).toMatchObject({ type: "divider" });
+    });
+    it("Table carries columns and nests Row→Cell→text children", () => {
+        const out = renderToIR(_jsx(Table, { columns: [{ header: "Name" }, { header: "Status", align: "center" }], children: _jsxs(Row, { children: [_jsx(Cell, { children: "Ana" }), _jsx(Cell, { children: "Active" })] }) }));
+        const table = out[0];
+        expect(table.type).toBe("table");
+        expect(table.props.columns.length).toBe(2);
+        const rows = table.props.children;
+        const row = rows[0];
+        expect(row.type).toBe("row");
+        const cells = row.props.children;
+        expect(cells.length).toBe(2);
+        expect(cells[0].type).toBe("cell");
+        const cellText = cells[0].props.children[0];
+        expect(cellText).toMatchObject({ type: "text", props: { value: "Ana" } });
+    });
+    it("Chart carries type, title, axis titles, and data in props", () => {
+        const data = [
+            { label: "Jan", value: 10 },
+            { label: "Feb", value: 20 },
+        ];
+        const out = renderToIR(_jsx(Chart, { type: "line", title: "Revenue", yAxisTitle: "USD", data: data }));
+        const chart = out[0];
+        expect(chart.type).toBe("chart");
+        expect(chart.props.type).toBe("line");
+        expect(chart.props.title).toBe("Revenue");
+        expect(chart.props.yAxisTitle).toBe("USD");
+        expect(chart.props.data).toEqual(data);
+    });
+});

package/dist/emoji.d.ts

@@ -0,0 +1,104 @@
+/** Platforms that support a normalized emoji token. */
+export type EmojiPlatform = "slack" | "discord" | "telegram";
+export interface EmojiEntry {
+    /** Canonical cross-platform name (matches a `KnownEmoji`). */
+    name: KnownEmoji;
+    /** Unicode token — the native form for Discord and Telegram. */
+    unicode: string;
+    /** Slack shortcodes (no colons); index 0 is canonical, the rest are aliases. */
+    slack: string[];
+}
+/** Starter set; unknown emoji pass through unnormalized as `rawEmoji`. */
+export declare const EMOJI_TABLE: readonly [{
+    readonly name: "thumbs_up";
+    readonly unicode: "👍";
+    readonly slack: ["+1", "thumbsup"];
+}, {
+    readonly name: "thumbs_down";
+    readonly unicode: "👎";
+    readonly slack: ["-1", "thumbsdown"];
+}, {
+    readonly name: "heart";
+    readonly unicode: "❤️";
+    readonly slack: ["heart"];
+}, {
+    readonly name: "fire";
+    readonly unicode: "🔥";
+    readonly slack: ["fire"];
+}, {
+    readonly name: "eyes";
+    readonly unicode: "👀";
+    readonly slack: ["eyes"];
+}, {
+    readonly name: "bug";
+    readonly unicode: "🐛";
+    readonly slack: ["bug"];
+}, {
+    readonly name: "check";
+    readonly unicode: "✅";
+    readonly slack: ["white_check_mark", "heavy_check_mark"];
+}, {
+    readonly name: "cross";
+    readonly unicode: "❌";
+    readonly slack: ["x"];
+}, {
+    readonly name: "tada";
+    readonly unicode: "🎉";
+    readonly slack: ["tada"];
+}, {
+    readonly name: "rocket";
+    readonly unicode: "🚀";
+    readonly slack: ["rocket"];
+}, {
+    readonly name: "warning";
+    readonly unicode: "⚠️";
+    readonly slack: ["warning"];
+}, {
+    readonly name: "question";
+    readonly unicode: "❓";
+    readonly slack: ["question"];
+}, {
+    readonly name: "raised_hands";
+    readonly unicode: "🙌";
+    readonly slack: ["raised_hands"];
+}, {
+    readonly name: "clap";
+    readonly unicode: "👏";
+    readonly slack: ["clap"];
+}, {
+    readonly name: "pray";
+    readonly unicode: "🙏";
+    readonly slack: ["pray"];
+}, {
+    readonly name: "smile";
+    readonly unicode: "😄";
+    readonly slack: ["smile"];
+}, {
+    readonly name: "thinking";
+    readonly unicode: "🤔";
+    readonly slack: ["thinking_face"];
+}];
+export type KnownEmoji = (typeof EMOJI_TABLE)[number]["name"];
+/**
+ * Accepts a known canonical name (with autocomplete) or any string. Unknown
+ * strings pass through as a platform-native token (custom/server emoji).
+ */
+export type EmojiValue = KnownEmoji | (string & {});
+/** Typed accessor map, e.g. `emoji.thumbs_up`. Each value is its own name. */
+export declare const emoji: Record<KnownEmoji, KnownEmoji>;
+/**
+ * Resolves any known emoji form — canonical name, Slack shortcode/alias, or
+ * Unicode token — to the platform-native token, or `undefined` if unknown.
+ */
+export declare function toPlatformEmoji(value: EmojiValue, platform: EmojiPlatform): string | undefined;
+/**
+ * Resolve any known emoji form — canonical name, Slack shortcode/alias, or
+ * Unicode token (with or without VS16) — to its canonical name,
+ * platform-agnostically. Unknown tokens (e.g. custom/server emoji) pass through
+ * unchanged. Used to normalize caller-supplied reaction filters so they match
+ * the canonical names ingress produces.
+ */
+export declare function toCanonicalEmoji(value: EmojiValue): EmojiValue;
+/** Platform-native token → canonical name, or `undefined` if unrecognized. */
+export declare function normalizeEmoji(token: string, platform: EmojiPlatform): EmojiValue | undefined;
+//# sourceMappingURL=emoji.d.ts.map