@theoremjs/react 0.0.0-stage → 0.3.1

package/ui/glide.js

@@ -0,0 +1,44 @@
+import { useLayoutEffect, useRef } from 'react';
+/** Reads an Astryx duration token ("410ms" / "0.4s") as milliseconds. */
+function tokenMs(value, fallback) {
+    const n = Number.parseFloat(value);
+    if (Number.isNaN(n))
+        return fallback;
+    return value.trim().endsWith('ms') ? n : n * 1_000;
+}
+/**
+ * Eases an element from where it sat while `held` to where it lands once `held`
+ * turns false (FLIP). Astryx has no layout-transition helper, so this uses its
+ * `--duration-medium` / `--ease-standard` tokens. `onLand` runs as it lands.
+ */
+export function useGlide(held, onLand) {
+    const ref = useRef(null);
+    const heldTop = useRef(null);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (held) {
+            heldTop.current = el.getBoundingClientRect().top;
+            return;
+        }
+        const from = heldTop.current;
+        if (from === null)
+            return;
+        heldTop.current = null;
+        onLand?.();
+        glideFrom(el, from);
+    });
+    return ref;
+}
+/** Slides `el` from where it was held, `from`, to where it now sits, unless motion is reduced. */
+function glideFrom(el, from) {
+    const delta = from - el.getBoundingClientRect().top;
+    if (delta === 0 || globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches)
+        return;
+    const tokens = getComputedStyle(el);
+    el.animate([{ transform: `translateY(${String(delta)}px)` }, { transform: 'none' }], {
+        duration: tokenMs(tokens.getPropertyValue('--duration-medium'), 410),
+        easing: tokens.getPropertyValue('--ease-standard').trim() || 'ease-out',
+    });
+}

package/ui/icons.d.ts

@@ -0,0 +1,4 @@
+import type { IconName } from '@astryxdesign/core/Icon';
+import { type ReactNode } from 'react';
+/** Astryx semantic icon registry drawn from Tabler (replaces neutral's lucide set). */
+export declare const tablerIcons: Record<IconName, ReactNode>;

package/ui/icons.js

@@ -0,0 +1,38 @@
+import { IconAlertTriangle, IconArrowDown, IconArrowsSort, IconArrowUp, IconCalendar, IconCheck, IconChecks, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight, IconCircleCheck, IconCircleX, IconClock, IconColumns, IconCopy, IconDots, IconExternalLink, IconEyeOff, IconFilter, IconInfoCircle, IconMenu2, IconMicrophone, IconPlayerStopFilled, IconSearch, IconTool, IconUpload, IconX, } from '@tabler/icons-react';
+import { createElement } from 'react';
+const TABLER_BY_NAME = {
+    close: IconX,
+    chevronDown: IconChevronDown,
+    chevronLeft: IconChevronLeft,
+    chevronRight: IconChevronRight,
+    chevronsLeft: IconChevronsLeft,
+    chevronsRight: IconChevronsRight,
+    check: IconCheck,
+    success: IconCircleCheck,
+    error: IconCircleX,
+    warning: IconAlertTriangle,
+    info: IconInfoCircle,
+    calendar: IconCalendar,
+    clock: IconClock,
+    externalLink: IconExternalLink,
+    menu: IconMenu2,
+    moreHorizontal: IconDots,
+    search: IconSearch,
+    arrowUp: IconArrowUp,
+    arrowDown: IconArrowDown,
+    arrowsUpDown: IconArrowsSort,
+    funnel: IconFilter,
+    eyeSlash: IconEyeOff,
+    viewColumns: IconColumns,
+    copy: IconCopy,
+    checkDouble: IconChecks,
+    wrench: IconTool,
+    stop: IconPlayerStopFilled,
+    microphone: IconMicrophone,
+    upload: IconUpload,
+};
+/** Astryx semantic icon registry drawn from Tabler (replaces neutral's lucide set). */
+export const tablerIcons = Object.fromEntries(Object.entries(TABLER_BY_NAME).map(([name, Glyph]) => [
+    name,
+    createElement(Glyph, { size: '1em', stroke: 1.75, 'aria-hidden': true }),
+]));

package/ui/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Astryx UI for Theorem — `<TheoremChat />` plus the pieces it is built from,
+ * `<TheoremDecision />` for decision profiles, `<TheoremEmbedding />` for
+ * embedding profiles, and `<TheoremHost />` for host profiles.
+ *
+ * Styling is Astryx: pass `theme` (any `defineTheme` result, e.g. one that
+ * `extends: theoremTheme`) or wrap your app in your own `<Theme>`.
+ *
+ * @module
+ */
+export type { InkWaveStatus } from '../client/ink-waveform.ts';
+export type { LiveCallOptions, PageTool, PageToolAnswer, PageTools, } from '../client/live/live-page-tool.ts';
+export { useLiveCaptionLog } from '../client/live/use-live-caption-log.ts';
+export { InkWaveform, type InkWaveformProps, type InkWaveLevels, } from '../components/InkWaveform.tsx';
+export { useLiveRunnerModel } from '../components/live/use-live-runner-model.ts';
+export { theoremTheme } from './built/theorem.js';
+export { ChatComposerBar, type ChatComposerBarProps, EFFORT_ICON, type LiveComposerBarProps, } from './ChatComposerBar.tsx';
+export { ChatTranscript, type ChatTranscriptProps } from './ChatTranscript.tsx';
+export { ConsoleFrame, type ConsoleFrameProps, type ConsolePageProps, RequestCard, ResponseColumn, RunBar, useBytes, } from './ConsoleFrame.tsx';
+export { TheoremDecisionAnswers, type TheoremDecisionAnswersProps } from './DecisionAnswers.tsx';
+export { useDisclosureMotion } from './disclosure-motion.ts';
+export { EmbeddingSpaceView, type EmbeddingSpaceViewProps } from './EmbeddingSpace.tsx';
+export { tablerIcons } from './icons.ts';
+export { LiveCaptionsPanel, type LiveCaptionsPanelProps } from './LiveCaptionsPanel.tsx';
+export { composerDrawerLabel, type LabelText, liveStateLabel, THEOREM_UI_CATALOG, type TheoremLabelKey, type TheoremLabelOverrides, type TheoremLabels, type TheoremLabelValues, type TheoremUiCatalog, voiceNoteName, workStatusLabel, } from './labels.ts';
+export { TheoremLabelsProvider, type TheoremLabelsProviderProps, useLabels, } from './labels-provider.tsx';
+export { PaneFailure, PaneLoading, PaneState } from './PaneState.tsx';
+export { InPlace, PaneLayout, PanePanel, Prose, RaisedPane } from './SidePanel.tsx';
+export { DEFAULT_CHAT_MAX_WIDTH, TheoremChat, type TheoremChatHandle, type TheoremChatProps, } from './TheoremChat.tsx';
+export { TheoremDecision, type TheoremDecisionProps } from './TheoremDecision.tsx';
+export { TheoremEmbedding, type TheoremEmbeddingProps } from './TheoremEmbedding.tsx';
+export { TheoremHost, type TheoremHostProps } from './TheoremHost.tsx';
+export { ApprovalCard, type ApprovalCardProps, AuthChallengeCard, type AuthChallengeCardProps, type ToolDecision, } from './ToolGateCard.tsx';
+export { ToolResult } from './ToolResult.tsx';
+export { TraceGuardrailsView, TracePlacement, useTraceInspector } from './TraceInspectorPanel.tsx';
+export { TheoremThemeProvider, type TheoremThemeProviderProps } from './theme.tsx';

package/ui/index.js

@@ -0,0 +1,39 @@
+/**
+ * Astryx UI for Theorem — `<TheoremChat />` plus the pieces it is built from,
+ * `<TheoremDecision />` for decision profiles, `<TheoremEmbedding />` for
+ * embedding profiles, and `<TheoremHost />` for host profiles.
+ *
+ * Styling is Astryx: pass `theme` (any `defineTheme` result, e.g. one that
+ * `extends: theoremTheme`) or wrap your app in your own `<Theme>`.
+ *
+ * @module
+ */
+// why: Astryx's documented order: reset → components → theme. The reset lives in
+// `@layer reset`, so any unlayered host CSS still wins over it.
+import '@astryxdesign/core/reset.css';
+import '@astryxdesign/core/astryx.css';
+import './built/theme.css';
+export { useLiveCaptionLog } from "../client/live/use-live-caption-log.js";
+export { InkWaveform, } from "../components/InkWaveform.js";
+export { useLiveRunnerModel } from "../components/live/use-live-runner-model.js";
+export { theoremTheme } from './built/theorem.js';
+export { ChatComposerBar, EFFORT_ICON, } from "./ChatComposerBar.js";
+export { ChatTranscript } from "./ChatTranscript.js";
+export { ConsoleFrame, RequestCard, ResponseColumn, RunBar, useBytes, } from "./ConsoleFrame.js";
+export { TheoremDecisionAnswers } from "./DecisionAnswers.js";
+export { useDisclosureMotion } from "./disclosure-motion.js";
+export { EmbeddingSpaceView } from "./EmbeddingSpace.js";
+export { tablerIcons } from "./icons.js";
+export { LiveCaptionsPanel } from "./LiveCaptionsPanel.js";
+export { composerDrawerLabel, liveStateLabel, THEOREM_UI_CATALOG, voiceNoteName, workStatusLabel, } from "./labels.js";
+export { TheoremLabelsProvider, useLabels, } from "./labels-provider.js";
+export { PaneFailure, PaneLoading, PaneState } from "./PaneState.js";
+export { InPlace, PaneLayout, PanePanel, Prose, RaisedPane } from "./SidePanel.js";
+export { DEFAULT_CHAT_MAX_WIDTH, TheoremChat, } from "./TheoremChat.js";
+export { TheoremDecision } from "./TheoremDecision.js";
+export { TheoremEmbedding } from "./TheoremEmbedding.js";
+export { TheoremHost } from "./TheoremHost.js";
+export { ApprovalCard, AuthChallengeCard, } from "./ToolGateCard.js";
+export { ToolResult } from "./ToolResult.js";
+export { TraceGuardrailsView, TracePlacement, useTraceInspector } from "./TraceInspectorPanel.js";
+export { TheoremThemeProvider } from "./theme.js";

package/ui/labels-provider.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import { type LabelText, type TheoremLabels } from './labels.ts';
+export type TheoremLabelsProviderProps = {
+    /** Replacements by locale for any `@theorem.*` or `@astryx.*` line; checked on mount. */
+    labels?: TheoremLabels;
+    children: ReactNode;
+};
+/**
+ * Makes Theorem's lines resolvable under the host's Astryx locale, messages
+ * and overrides (or Astryx's `en` default), adding `labels` on top. Every
+ * exported component renders one, so none shows a raw key; nested ones pass
+ * straight through.
+ */
+export declare function TheoremLabelsProvider({ labels, children }: TheoremLabelsProviderProps): import("react").JSX.Element;
+/** The default UI's words, from the nearest Theorem labels provider. */
+export declare function useLabels(): LabelText;

package/ui/labels-provider.js

@@ -0,0 +1,64 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { InternationalizationContext, InternationalizationProvider, useTranslator, } from '@astryxdesign/core/i18n';
+import { use, useMemo } from 'react';
+import { assertLabelOverrides, THEOREM_UI_CATALOG, } from "./labels.js";
+/** Message tables this module built, by the base language their catalog sits under. */
+const WITH_CATALOG = new WeakMap();
+/** `en-GB` → `en`: the last step of Astryx's locale fallback chain. */
+function baseLanguage(locale) {
+    try {
+        return new Intl.Locale(locale).language;
+    }
+    catch {
+        return locale.split('-')[0] ?? locale;
+    }
+}
+/**
+ * The host's messages with Theorem's catalog under the locale's base language,
+ * beneath the host's own entries there — so a host translation wins and a
+ * missing one falls back to the default line, never to the raw key.
+ */
+function withCatalog(messages, locale) {
+    const base = baseLanguage(locale);
+    if (WITH_CATALOG.get(messages) === base)
+        return messages;
+    const next = {
+        ...messages,
+        [base]: { ...THEOREM_UI_CATALOG, ...messages[base] },
+    };
+    WITH_CATALOG.set(next, base);
+    return next;
+}
+/** The host's overrides, then `labels` over them, locale by locale. */
+function withLabels(host, labels) {
+    if (!labels)
+        return host;
+    const merged = {};
+    for (const [locale, table] of [...Object.entries(host ?? {}), ...Object.entries(labels)]) {
+        merged[locale] = { ...merged[locale], ...table };
+    }
+    return merged;
+}
+/**
+ * Makes Theorem's lines resolvable under the host's Astryx locale, messages
+ * and overrides (or Astryx's `en` default), adding `labels` on top. Every
+ * exported component renders one, so none shows a raw key; nested ones pass
+ * straight through.
+ */
+export function TheoremLabelsProvider({ labels, children }) {
+    const host = use(InternationalizationContext);
+    const messages = useMemo(() => withCatalog(host.messages, host.locale), [host.messages, host.locale]);
+    const overrides = useMemo(() => {
+        assertLabelOverrides(host.overrides ?? {}, false);
+        if (labels)
+            assertLabelOverrides(labels, true);
+        return withLabels(host.overrides, labels);
+    }, [host.overrides, labels]);
+    if (messages === host.messages && overrides === host.overrides)
+        return _jsx(_Fragment, { children: children });
+    return (_jsx(InternationalizationProvider, { locale: host.locale, dir: host.direction, messages: messages, overrides: overrides, children: children }));
+}
+/** The default UI's words, from the nearest Theorem labels provider. */
+export function useLabels() {
+    return useTranslator();
+}