@theoremjs/react 0.0.0-stage → 0.3.1

package/ui/markdown-plugins.d.ts

@@ -0,0 +1,9 @@
+import type { MarkdownPluginEntry } from '@astryxdesign/core/Markdown/plugins';
+import { type ReactNode } from 'react';
+/** The Markdown plugins the host asked for, or none: one array, so every `Markdown` below shares it. */
+export declare function useMarkdownPlugins(): readonly MarkdownPluginEntry[] | undefined;
+/** Labels untagged code fences in the Markdown beneath it, when `detectCodeLanguage` is on. */
+export declare function MarkdownPluginsProvider({ detectCodeLanguage, children, }: {
+    detectCodeLanguage?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/ui/markdown-plugins.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use } from 'react';
+import { codeLanguagePlugin } from "./code-language.js";
+const PLUGINS = [codeLanguagePlugin];
+const MarkdownPluginsContext = createContext(undefined);
+/** The Markdown plugins the host asked for, or none: one array, so every `Markdown` below shares it. */
+export function useMarkdownPlugins() {
+    return use(MarkdownPluginsContext);
+}
+/** Labels untagged code fences in the Markdown beneath it, when `detectCodeLanguage` is on. */
+export function MarkdownPluginsProvider({ detectCodeLanguage, children, }) {
+    return (_jsx(MarkdownPluginsContext, { value: detectCodeLanguage ? PLUGINS : undefined, children: children }));
+}

package/ui/mcp-icon.d.ts

@@ -0,0 +1,6 @@
+import type { SVGProps } from 'react';
+/**
+ * Model Context Protocol mark (from Simple Icons, CC0), filled in the current colour.
+ * Tabler has no MCP icon; this marks MCP tools beside Tabler's glyphs for the other kinds.
+ */
+export declare function IconMcp(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/ui/mcp-icon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Model Context Protocol mark (from Simple Icons, CC0), filled in the current colour.
+ * Tabler has no MCP icon; this marks MCP tools beside Tabler's glyphs for the other kinds.
+ */
+export function IconMcp(props) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, ...props, children: _jsx("path", { d: "M13.85 0a4.16 4.16 0 0 0-2.95 1.217L1.456 10.66a.835.835 0 0 0 0 1.18.835.835 0 0 0 1.18 0l9.442-9.442a2.49 2.49 0 0 1 3.541 0 2.49 2.49 0 0 1 0 3.541L8.59 12.97l-.1.1a.835.835 0 0 0 0 1.18.835.835 0 0 0 1.18 0l.1-.098 7.03-7.034a2.49 2.49 0 0 1 3.542 0l.049.05a2.49 2.49 0 0 1 0 3.54l-8.54 8.54a1.96 1.96 0 0 0 0 2.755l1.753 1.753a.835.835 0 0 0 1.18 0 .835.835 0 0 0 0-1.18l-1.753-1.753a.266.266 0 0 1 0-.394l8.54-8.54a4.185 4.185 0 0 0 0-5.9l-.05-.05a4.16 4.16 0 0 0-2.95-1.218c-.2 0-.401.02-.6.048a4.17 4.17 0 0 0-1.17-3.552A4.16 4.16 0 0 0 13.85 0m0 3.333a.84.84 0 0 0-.59.245L6.275 10.56a4.186 4.186 0 0 0 0 5.902 4.186 4.186 0 0 0 5.902 0L19.16 9.48a.835.835 0 0 0 0-1.18.835.835 0 0 0-1.18 0l-6.985 6.984a2.49 2.49 0 0 1-3.54 0 2.49 2.49 0 0 1 0-3.54l6.983-6.985a.835.835 0 0 0 0-1.18.84.84 0 0 0-.59-.245" }) }));
+}

package/ui/row-keys.d.ts

@@ -0,0 +1,19 @@
+/** One item of a list with the React key it renders under. */
+export type KeyedRow<T> = {
+    item: T;
+    index: number;
+    key: string;
+};
+/**
+ * Keys a read-only list by what each item says, so a repeated item is told apart by how many
+ * times it has appeared before. `base` must return the same text for the same item.
+ */
+export declare function keyedByContent<T>(items: readonly T[], base: (item: T) => string): KeyedRow<T>[];
+/**
+ * Keys an editable list by identity: a row keeps its key while its text changes, and `drop`
+ * retires the key of a removed row so the rows after it keep theirs.
+ */
+export declare function useKeyedRows<T>(items: readonly T[]): {
+    rows: KeyedRow<T>[];
+    drop: (index: number) => void;
+};

package/ui/row-keys.js

@@ -0,0 +1,33 @@
+import { useRef } from 'react';
+/**
+ * Keys a read-only list by what each item says, so a repeated item is told apart by how many
+ * times it has appeared before. `base` must return the same text for the same item.
+ */
+export function keyedByContent(items, base) {
+    const seen = new Map();
+    return items.map((item, index) => {
+        const text = base(item);
+        const count = seen.get(text) ?? 0;
+        seen.set(text, count + 1);
+        return { item, index, key: `${text}#${String(count)}` };
+    });
+}
+/**
+ * Keys an editable list by identity: a row keeps its key while its text changes, and `drop`
+ * retires the key of a removed row so the rows after it keep theirs.
+ */
+export function useKeyedRows(items) {
+    const keys = useRef([]);
+    const minted = useRef(0);
+    while (keys.current.length < items.length) {
+        keys.current.push(String(minted.current));
+        minted.current += 1;
+    }
+    keys.current.length = items.length;
+    return {
+        rows: items.map((item, index) => ({ item, index, key: keys.current[index] ?? '' })),
+        drop: (index) => {
+            keys.current.splice(index, 1);
+        },
+    };
+}

package/ui/theme.d.ts

@@ -0,0 +1,10 @@
+import { type DefinedTheme } from '@astryxdesign/core/theme';
+import { type ReactNode } from 'react';
+export type TheoremThemeProviderProps = {
+    /** Force a theme. Omit to inherit the host's `<Theme>`, or fall back to {@link theoremTheme}. */
+    theme?: DefinedTheme;
+    mode?: 'system' | 'light' | 'dark';
+    children: ReactNode;
+};
+/** Wraps children in the Theorem theme unless the host already provides an Astryx theme. */
+export declare function TheoremThemeProvider({ theme, mode, children, }: TheoremThemeProviderProps): import("react").JSX.Element;

package/ui/theme.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Theme, ThemeContext } from '@astryxdesign/core/theme';
+import { use } from 'react';
+import { theoremTheme } from './built/theorem.js';
+/** Wraps children in the Theorem theme unless the host already provides an Astryx theme. */
+export function TheoremThemeProvider({ theme, mode = 'system', children, }) {
+    // why: Ask the React tree, not `useThemeName()`: outside a Theme that falls back to
+    // the <html> attribute our own Theme sets, which would unmount it in a loop.
+    const hostTheme = use(ThemeContext);
+    if (hostTheme != null && !theme)
+        return _jsx(_Fragment, { children: children });
+    return (_jsx(Theme, { theme: theme ?? theoremTheme, mode: mode, children: children }));
+}

package/ui/theorem-theme.d.ts

@@ -0,0 +1,10 @@
+import { type DefinedTheme } from '@astryxdesign/core/theme';
+/**
+ * Default Theorem look: Astryx neutral (its radius scale, palettes, type)
+ * with Tabler icons. Extend it like any Astryx theme:
+ *
+ * ```ts
+ * defineTheme({ name: 'mine', extends: theoremTheme, tokens: { '--color-accent': '#5b5bd6' } })
+ * ```
+ */
+export declare const theoremTheme: DefinedTheme;

package/ui/theorem-theme.js

@@ -0,0 +1,105 @@
+import { defineTheme } from '@astryxdesign/core/theme';
+import { neutralTheme } from '@astryxdesign/theme-neutral/built';
+import { tablerIcons } from "./icons.js";
+/**
+ * Default Theorem look: Astryx neutral (its radius scale, palettes, type)
+ * with Tabler icons. Extend it like any Astryx theme:
+ *
+ * ```ts
+ * defineTheme({ name: 'mine', extends: theoremTheme, tokens: { '--color-accent': '#5b5bd6' } })
+ * ```
+ */
+export const theoremTheme = defineTheme({
+    name: 'theorem',
+    extends: neutralTheme,
+    icons: tablerIcons,
+    components: {
+        // why: Media keeps a margin from the viewport edges, over a lighter scrim than
+        // Astryx's shared --color-overlay (dialogs keep theirs).
+        lightbox: {
+            base: {
+                padding: 'var(--spacing-12)',
+                '::backdrop': { backgroundColor: 'light-dark(#00000059, #00000099)' },
+            },
+        },
+        // why: Collapsible shows and hides without motion; ease its height with the
+        // same --duration-medium / --ease-standard as ChatToolCalls and the
+        // composer drawer. Closed = the trigger before it reads aria-expanded="false".
+        'collapsible-content': {
+            base: {
+                display: 'block',
+                overflow: 'clip',
+                interpolateSize: 'allow-keywords',
+                transition: 'height var(--duration-medium) var(--ease-standard), padding-top var(--duration-medium) var(--ease-standard), content-visibility var(--duration-medium) allow-discrete',
+                ':where([aria-expanded="false"] + *)': {
+                    height: '0',
+                    paddingTop: '0',
+                    contentVisibility: 'hidden',
+                },
+            },
+        },
+        // why: A source's favicon sits bare beside its title, without the ring
+        // Astryx draws around a citation icon. Nested keys must open with a
+        // pseudo-class, so `:where(*)` (the citation itself) leads the child rules.
+        citation: {
+            base: {
+                ':where(*) > [aria-hidden="true"]': {
+                    backgroundColor: 'transparent',
+                    borderWidth: '0',
+                    borderRadius: '0',
+                },
+                ':where(*) > [aria-hidden="true"] > img': { width: '100%', height: '100%' },
+            },
+        },
+        // why: A call row's name is code type and its target or error note is body type;
+        // centered, their different metrics sit their text on different lines.
+        // Share a baseline instead (the status icon and chevron stay centered).
+        'chat-tool-calls': {
+            base: {
+                ':where(*) [role="button"][aria-expanded] > span:not(:first-child):not(:has(svg))': {
+                    alignSelf: 'baseline',
+                },
+            },
+        },
+        // why: A card that waits on the user sits in the transcript as a turn of its
+        // own, so it takes the surface of the user's message bubble.
+        card: {
+            'variant:bubble': {
+                backgroundColor: 'var(--color-neutral)',
+                borderRadius: 'var(--radius-chat)',
+                paddingBlock: 'var(--spacing-3)',
+                paddingInline: 'var(--spacing-4)',
+            },
+        },
+        // why: A code block sits among cards and panels, so it takes a card's corner
+        // (--radius-container) rather than the smaller element radius Astryx gives it.
+        'code-block': {
+            'container:card': { borderRadius: 'var(--radius-container)' },
+        },
+        'layout-panel': {
+            base: {
+                ':where([role="complementary"])': {
+                    transition: 'width var(--duration-medium) var(--ease-standard)',
+                },
+                // why: While its ResizeHandle drags, follow the pointer. An end panel's
+                // handle is the sibling before it; a start panel's handle is the sibling after it.
+                ':where([data-resizing] + [role="complementary"], [role="complementary"]:has(+ [data-resizing]))': {
+                    transition: 'none',
+                },
+            },
+        },
+    },
+    adaptations: {
+        rules: [
+            {
+                when: { motion: 'reduce' },
+                value: {
+                    components: {
+                        'collapsible-content': { base: { transition: 'none' } },
+                        'layout-panel': { base: { ':where([role="complementary"])': { transition: 'none' } } },
+                    },
+                },
+            },
+        ],
+    },
+});

package/ui/trace-palette.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The trace panel's colour for a failed step: oxblood, a light-dark pair that is deep in light
+ * mode and softened, not brightened, in dark.
+ *
+ * @module
+ */
+export declare const TRACE_HUE: {
+    /** Oxblood: whatever failed. */
+    readonly oxblood: "light-dark(#8e2a28, #cd5f55)";
+};

package/ui/trace-palette.js

@@ -0,0 +1,10 @@
+/**
+ * The trace panel's colour for a failed step: oxblood, a light-dark pair that is deep in light
+ * mode and softened, not brightened, in dark.
+ *
+ * @module
+ */
+export const TRACE_HUE = {
+    /** Oxblood: whatever failed. */
+    oxblood: 'light-dark(#8e2a28, #cd5f55)',
+};

package/ui/trace-patterns.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
+import type { TraceActor } from '../client/trace-story.ts';
+/**
+ * The trace charts' fills, one per series in order: the first is clear (a
+ * solid), the second a fine hatch, and the rest shades of deep navy (#0D1E37).
+ * Only a failure leaves the ramp, for oxblood. Also the card each chart
+ * sits in, which decision answers share.
+ *
+ * @module
+ */
+export type TraceFill = 'clear' | 'hatch' | 'shade1' | 'shade2' | 'shade3' | 'failed';
+/** Corner radius of every bar, in pixels. */
+export declare const TRACE_RADIUS = 4;
+/** Paints the gap between stacked segments: the chart card's own background. */
+export declare const TRACE_GAP = "var(--color-background-surface)";
+/** Each actor's fill: the model clear, tools hatched, the rest in shades. */
+export declare const ACTOR_FILL: Readonly<Record<TraceActor, TraceFill>>;
+/** The paint for a fill; the hatch lives in {@link TracePatterns}. */
+export declare function traceFill(fill: TraceFill): string;
+/** The hatch, once per panel; charts anywhere in the document refer to it by id. */
+export declare function TracePatterns(): import("react").JSX.Element;
+/** A legend's key: a small rounded square in the fill. */
+export declare function TraceSwatch({ fill }: {
+    fill: TraceFill;
+}): import("react").JSX.Element;
+/** Every console card, request, response and result alike: one ground and one radius. A flush page points the ground at the muted one. */
+export declare const CONSOLE_CARD: CSSProperties;
+/** A chart's content: its name, one figure that answers it, then the chart and its key. */
+export declare function ChartBody({ title, value, note, aside, detail, children, }: {
+    title: string;
+    value: ReactNode;
+    note?: ReactNode;
+    /** A line under the title that says more, cut to two lines with the rest on hover. */
+    detail?: string;
+    /** A control beside the title, such as a switch between views. */
+    aside?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** A chart as a card. */
+export declare function ChartCard(props: ComponentProps<typeof ChartBody>): import("react").JSX.Element;

package/ui/trace-patterns.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '@astryxdesign/core/Card';
+import { HStack } from '@astryxdesign/core/HStack';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Text } from '@astryxdesign/core/Text';
+import { VStack } from '@astryxdesign/core/VStack';
+const SOLID = {
+    clear: 'light-dark(#0d1e37, #b4c6e2)',
+    shade1: 'light-dark(#3b5580, #6582ad)',
+    shade2: 'light-dark(#7f95b7, #3b5078)',
+    shade3: 'light-dark(#bcc8da, #22345a)',
+    failed: 'light-dark(#8e2a28, #cd5f55)',
+};
+const HATCH_BASE = 'light-dark(#e4e7ec, #2b2f36)';
+const HATCH_STRIPE = 'light-dark(#9aa3b1, #6b727d)';
+/** Text that leads a chart's headline, in the clear series' colour. */
+const TRACE_ACCENT = SOLID.clear;
+/** Corner radius of every bar, in pixels. */
+export const TRACE_RADIUS = 4;
+/** Paints the gap between stacked segments: the chart card's own background. */
+export const TRACE_GAP = 'var(--color-background-surface)';
+/** Each actor's fill: the model clear, tools hatched, the rest in shades. */
+export const ACTOR_FILL = {
+    model: 'clear',
+    tool: 'hatch',
+    host: 'shade1',
+    theorem: 'shade2',
+    user: 'shade3',
+    error: 'failed',
+};
+/** The paint for a fill; the hatch lives in {@link TracePatterns}. */
+export function traceFill(fill) {
+    return fill === 'hatch' ? 'url(#trace-fill-hatch)' : SOLID[fill];
+}
+/** The hatch, once per panel; charts anywhere in the document refer to it by id. */
+export function TracePatterns() {
+    return (_jsx("svg", { "aria-hidden": true, width: 0, height: 0, style: { position: 'absolute' }, children: _jsx("defs", { children: _jsxs("pattern", { id: "trace-fill-hatch", width: 3, height: 3, patternUnits: "userSpaceOnUse", patternTransform: "rotate(45)", children: [_jsx("rect", { width: 3, height: 3, fill: HATCH_BASE }), _jsx("line", { x1: 0, y1: 0, x2: 0, y2: 3, stroke: HATCH_STRIPE, strokeWidth: 1.2 })] }) }) }));
+}
+/** A legend's key: a small rounded square in the fill. */
+export function TraceSwatch({ fill }) {
+    return (_jsx("svg", { "aria-hidden": true, width: 10, height: 10, style: { display: 'block', flexShrink: 0 }, children: _jsx("rect", { width: 10, height: 10, rx: 2, fill: traceFill(fill) }) }));
+}
+/** Every console card, request, response and result alike: one ground and one radius. A flush page points the ground at the muted one. */
+export const CONSOLE_CARD = {
+    background: 'var(--theorem-console-card, var(--color-background-surface))',
+    borderRadius: 'var(--radius-page)',
+};
+/** A chart's content: its name, one figure that answers it, then the chart and its key. */
+export function ChartBody({ title, value, note, aside, detail, children, }) {
+    const titled = (_jsx(Text, { type: "supporting", color: "secondary", children: title }));
+    const heading = detail ? (_jsxs(VStack, { gap: 1, children: [titled, _jsx(Text, { type: "supporting", maxLines: 2, children: detail })] })) : (titled);
+    return (_jsxs(VStack, { gap: 3, children: [aside ? (_jsxs(HStack, { gap: 3, vAlign: "center", children: [_jsx(StackItem, { size: "fill", children: heading }), aside] })) : (heading), _jsxs("div", { style: { display: 'flex', alignItems: 'baseline', flexWrap: 'wrap', columnGap: 8 }, children: [_jsx(Text, { size: "2xl", weight: "medium", hasTabularNumbers: true, children: value }), note ? (_jsx(Text, { type: "supporting", hasTabularNumbers: true, children: _jsx("span", { style: { color: TRACE_ACCENT }, children: note }) })) : null] }), children] }));
+}
+/** A chart as a card. */
+export function ChartCard(props) {
+    return (_jsx(Card, { variant: "muted", padding: 4, style: CONSOLE_CARD, children: _jsx(ChartBody, { ...props }) }));
+}

package/ui/transcript-copy-text.d.ts

@@ -0,0 +1,4 @@
+import type { TranscriptBlock } from '@theoremjs/agents/interface';
+import type { LabelText } from './labels.ts';
+/** Plain text copied from a transcript block. */
+export declare function transcriptBlockCopyText(t: LabelText, block: TranscriptBlock): string;

package/ui/transcript-copy-text.js

@@ -0,0 +1,40 @@
+/** Plain text copied from a transcript block. */
+export function transcriptBlockCopyText(t, block) {
+    switch (block.kind) {
+        case 'user-text':
+            return block.text;
+        case 'user-attachment':
+        case 'user-voice':
+            return block.name;
+        case 'thought':
+            return block.text;
+        case 'text':
+            return block.text;
+        case 'tool': {
+            const lines = [t('@theorem.transcript.copy_text.tool', { name: block.tool.name })];
+            const { state } = block.tool;
+            if (state?.phase === 'complete' && state.output !== undefined) {
+                lines.push(JSON.stringify(state.output, null, 2));
+            }
+            else if (state?.phase === 'error') {
+                lines.push(JSON.stringify(state.failure, null, 2));
+            }
+            return lines.join('\n\n');
+        }
+        case 'structured':
+            return JSON.stringify(block.value, null, 2);
+        case 'media':
+            return block.url ?? t('@theorem.transcript.copy_text.media', { mimeType: block.mimeType });
+        case 'grounding':
+            return JSON.stringify(block.grounding, null, 2);
+        case 'citation':
+            return JSON.stringify(block.sources, null, 2);
+        case 'evidence':
+            return JSON.stringify(block.evidence, null, 2);
+        case 'error':
+            return block.message;
+        case 'guardrail':
+        case 'turn-done':
+            return '';
+    }
+}

package/ui/wall-columns.d.ts

@@ -0,0 +1,8 @@
+/** How many columns at least `minWidth` wide fit across `width`, `gap` apart. Never fewer than one. */
+export declare function columnCount(width: number, minWidth: number, gap: number): number;
+/**
+ * Each card, in order, into the column that is shortest so far, by the
+ * cards' heights and the gap under each. A card not measured yet counts as
+ * no height, so unmeasured cards are dealt out in turn.
+ */
+export declare function wallColumns(heights: readonly (number | undefined)[], count: number, gap: number): number[][];

package/ui/wall-columns.js

@@ -0,0 +1,19 @@
+/** How many columns at least `minWidth` wide fit across `width`, `gap` apart. Never fewer than one. */
+export function columnCount(width, minWidth, gap) {
+    return Math.max(1, Math.floor((width + gap) / (minWidth + gap)));
+}
+/**
+ * Each card, in order, into the column that is shortest so far, by the
+ * cards' heights and the gap under each. A card not measured yet counts as
+ * no height, so unmeasured cards are dealt out in turn.
+ */
+export function wallColumns(heights, count, gap) {
+    const columns = Array.from({ length: count }, () => []);
+    const tall = Array.from({ length: count }, () => 0);
+    heights.forEach((height, card) => {
+        const at = tall.indexOf(Math.min(...tall));
+        columns[at]?.push(card);
+        tall[at] = (tall[at] ?? 0) + (height ?? 0) + gap;
+    });
+    return columns;
+}