@theoremjs/react 0.0.0-stage → 0.3.0

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,83 @@
+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: {
+        // 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)' },
+            },
+        },
+        // 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' },
+            },
+        },
+        // 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%' },
+            },
+        },
+        // 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',
+                },
+            },
+        },
+        // Side panels (SidePanel's LayoutPanels) slide open and closed by easing
+        // their width, pushing the content over.
+        'layout-panel': {
+            base: {
+                ':where([role="complementary"])': {
+                    transition: 'width var(--duration-medium) var(--ease-standard)',
+                },
+                // While its ResizeHandle (the sibling before it) drags, follow the pointer.
+                ':where([data-resizing] + [role="complementary"])': {
+                    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,24 @@
+/**
+ * The trace panel's colours, taken from Theorem's landscape stills rather than
+ * the stock hues: deep royal navy, antique brass, fjord teal, heather, warm
+ * stone, and moss and oxblood kept for how a step ended. Each is a
+ * light-dark pair, deep in light mode and softened, not brightened, in dark.
+ *
+ * @module
+ */
+export declare const TRACE_HUE: {
+    /** Royal navy: the model. */
+    readonly navy: "light-dark(#152350, #2b4596)";
+    /** Antique brass: tools. */
+    readonly brass: "light-dark(#6f5520, #b39150)";
+    /** Deep fjord teal: the host. */
+    readonly fjord: "light-dark(#24595c, #5f9a9c)";
+    /** Moss green: what succeeded. */
+    readonly moss: "light-dark(#3d5f2c, #7c9f5a)";
+    /** Heather: Theorem itself (guardrails, gates, the turn). */
+    readonly heather: "light-dark(#54447e, #9585bf)";
+    /** Warm stone: the person, and time nothing else accounts for. */
+    readonly stone: "light-dark(#6d6861, #a39d93)";
+    /** Oxblood: whatever failed. */
+    readonly oxblood: "light-dark(#8e2a28, #cd5f55)";
+};

package/ui/trace-palette.js

@@ -0,0 +1,24 @@
+/**
+ * The trace panel's colours, taken from Theorem's landscape stills rather than
+ * the stock hues: deep royal navy, antique brass, fjord teal, heather, warm
+ * stone, and moss and oxblood kept for how a step ended. Each is a
+ * light-dark pair, deep in light mode and softened, not brightened, in dark.
+ *
+ * @module
+ */
+export const TRACE_HUE = {
+    /** Royal navy: the model. */
+    navy: 'light-dark(#152350, #2b4596)',
+    /** Antique brass: tools. */
+    brass: 'light-dark(#6f5520, #b39150)',
+    /** Deep fjord teal: the host. */
+    fjord: 'light-dark(#24595c, #5f9a9c)',
+    /** Moss green: what succeeded. */
+    moss: 'light-dark(#3d5f2c, #7c9f5a)',
+    /** Heather: Theorem itself (guardrails, gates, the turn). */
+    heather: 'light-dark(#54447e, #9585bf)',
+    /** Warm stone: the person, and time nothing else accounts for. */
+    stone: 'light-dark(#6d6861, #a39d93)',
+    /** Oxblood: whatever failed. */
+    oxblood: 'light-dark(#8e2a28, #cd5f55)',
+};

package/ui/trace-patterns.d.ts

@@ -0,0 +1,32 @@
+import type { 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;
+/** A chart as a card: its name, one figure that answers it, then the chart and its key. */
+export declare function ChartCard({ title, value, note, children }: {
+    title: string;
+    value: ReactNode;
+    note?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/ui/trace-patterns.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '@astryxdesign/core/Card';
+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) }) }));
+}
+/** A chart as a card: its name, one figure that answers it, then the chart and its key. */
+export function ChartCard({ title, value, note, children }) {
+    return (_jsx(Card, { variant: "muted", padding: 4, style: { background: 'var(--color-background-surface)' }, children: _jsxs(VStack, { gap: 3, children: [_jsx(Text, { type: "supporting", color: "secondary", children: title }), _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] }) }));
+}

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,39 @@
+/** 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 'turn-done':
+            return '';
+    }
+}