@theoremjs/react 0.0.0-stage → 0.3.0

package/ui/disclosure-motion.js

@@ -0,0 +1,163 @@
+import { useEffect } from 'react';
+/**
+ * Easing for disclosures whose panel mounts on open and unmounts on close
+ * (ChatToolCalls row details, TreeList branches): CSS can't ease an element
+ * that's already gone, so a close is held until the panel has eased shut,
+ * then replayed; an open eases the new panel up from nothing. Panels that
+ * carry their own transition (the themed Collapsible) are left alone.
+ */
+/** The panel a disclosure trigger shows: its aria-controls target, or a tree item's group. */
+function panelOf(trigger) {
+    const id = trigger.getAttribute('aria-controls');
+    if (id)
+        return document.getElementById(id);
+    return trigger.closest('[role="treeitem"]')?.querySelector(':scope > [role="group"]') ?? null;
+}
+function ownsMotion(panel) {
+    return getComputedStyle(panel).transitionDuration.split(',').some((d) => Number.parseFloat(d) > 0);
+}
+function isToggleKey(event) {
+    return !(event instanceof KeyboardEvent) || event.key === 'Enter' || event.key === ' ';
+}
+/**
+ * The element pressed and the disclosure trigger it sits in, when that trigger is under `root`. In a
+ * tree, the press is the row's own: a leaf's row toggles nothing, and a row with an action of its own
+ * (a label that selects it, a button at its end) toggles only at its chevron.
+ */
+function pressedToggle(event, root) {
+    if (!(event.target instanceof Element))
+        return undefined;
+    const row = event.target.closest('[role="treeitem"]');
+    const trigger = row ? treeToggle(event.target, row) : event.target.closest('[aria-expanded]');
+    if (!trigger || !root.contains(trigger))
+        return undefined;
+    return { target: event.target, trigger };
+}
+/** The tree row a press toggles: none for a leaf, and for a row with an action of its own, only a press at its chevron. */
+function treeToggle(target, row) {
+    if (!row.hasAttribute('aria-expanded'))
+        return undefined;
+    if (target.closest('[data-tree-toggle]') !== null)
+        return row;
+    const acts = row.querySelector(':scope > div :is(button:not([data-tree-toggle]), a[href])') !== null;
+    return acts ? undefined : row;
+}
+/** Stops the event: the component does not see it. */
+function hold(event) {
+    event.stopPropagation();
+    event.preventDefault();
+}
+/** A copy of the pressed key or click, to send once the panel has eased shut. */
+function replayOf(event) {
+    return event instanceof KeyboardEvent
+        ? new KeyboardEvent(event.type, { key: event.key, bubbles: true, cancelable: true })
+        : new MouseEvent(event.type, { bubbles: true, cancelable: true });
+}
+/** CSS time (`0.3s`, `300ms`) in milliseconds. */
+function ms(time) {
+    const value = Number.parseFloat(time);
+    return time.trim().endsWith('ms') ? value : value * 1000;
+}
+/** Eases a panel's height between shut and its natural height, the theme's medium duration and standard curve. */
+function ease(panel, direction) {
+    const style = getComputedStyle(panel);
+    const open = {
+        height: `${String(panel.getBoundingClientRect().height)}px`,
+        paddingTop: style.paddingTop,
+        paddingBottom: style.paddingBottom,
+    };
+    const shut = { height: '0px', paddingTop: '0px', paddingBottom: '0px' };
+    const frames = direction === 'open' ? [shut, open] : [open, shut];
+    for (const animation of panel.getAnimations())
+        animation.cancel();
+    return panel.animate(frames.map((frame) => ({ ...frame, boxSizing: 'border-box', overflow: 'clip' })), {
+        duration: ms(style.getPropertyValue('--duration-medium')),
+        easing: style.getPropertyValue('--ease-standard').trim(),
+        // A shut panel stays shut until its unmount; an open one hands back to its natural height.
+        fill: direction === 'close' ? 'forwards' : 'none',
+    });
+}
+/** Every animation on a panel, settled; a cancelled one rejects `finished`, so settle rather than await all. */
+function settled(panel) {
+    return Promise.allSettled(panel.getAnimations().map((animation) => animation.finished));
+}
+/**
+ * Eases every disclosure under `ref` open and shut. `onOpened` runs once the
+ * new panel is in the DOM, with a promise for its motion finishing.
+ */
+export function useDisclosureMotion(ref, onOpened) {
+    useEffect(() => {
+        const root = ref.current;
+        if (!root)
+            return;
+        const still = matchMedia('(prefers-reduced-motion: reduce)');
+        const closing = new WeakSet();
+        const replaying = new WeakSet();
+        // The trigger the reader just pressed to open; opens the page makes itself aren't eased or followed.
+        let opening;
+        /** The trigger the reader pressed opens: note it until the toggle commits, within this event. */
+        const noteOpening = (trigger) => {
+            opening = trigger;
+            // A stale note must not claim a later change.
+            setTimeout(() => {
+                if (opening === trigger)
+                    opening = undefined;
+            });
+        };
+        /** The panel a close should ease shut first; none when motion is off or the panel eases itself. */
+        const panelToEase = (trigger) => {
+            const panel = panelOf(trigger);
+            return panel && !still.matches && !ownsMotion(panel) ? panel : undefined;
+        };
+        // Capture, before the component toggles: note what the trigger was, and hold a close.
+        const before = (event) => {
+            if (!isToggleKey(event) || replaying.has(event))
+                return;
+            const pressed = pressedToggle(event, root);
+            if (!pressed)
+                return;
+            const { target, trigger } = pressed;
+            if (closing.has(trigger)) {
+                hold(event);
+                return;
+            }
+            if (trigger.getAttribute('aria-expanded') !== 'true') {
+                noteOpening(trigger);
+                return;
+            }
+            const panel = panelToEase(trigger);
+            if (!panel)
+                return;
+            hold(event);
+            closing.add(trigger);
+            const replay = replayOf(event);
+            void ease(panel, 'close').finished.then(() => {
+                closing.delete(trigger);
+                replaying.add(replay);
+                target.dispatchEvent(replay);
+            });
+        };
+        // After the component commits the toggle (a component may stop the event, so
+        // watch the attribute rather than wait for the event to bubble): ease the new panel.
+        const opened = new MutationObserver(() => {
+            const trigger = opening;
+            if (!trigger || trigger.getAttribute('aria-expanded') !== 'true')
+                return;
+            opening = undefined;
+            const panel = panelOf(trigger);
+            if (!panel)
+                return;
+            if (!still.matches && !ownsMotion(panel))
+                ease(panel, 'open');
+            onOpened?.(trigger, panel, settled(panel));
+        });
+        opened.observe(root, { subtree: true, attributeFilter: ['aria-expanded'] });
+        root.addEventListener('click', before, true);
+        root.addEventListener('keydown', before, true);
+        return () => {
+            opened.disconnect();
+            root.removeEventListener('click', before, true);
+            root.removeEventListener('keydown', before, true);
+        };
+    }, [ref, onOpened]);
+}

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,37 @@
+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, 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,
+};
+/** 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,25 @@
+/**
+ * Astryx UI for Theorem — `<TheoremChat />` plus the pieces it is built from,
+ * `<TheoremDecision />` for decision 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 { InkWaveform, type InkWaveformProps } from '../components/InkWaveform.tsx';
+export { ChatComposerBar, type ChatComposerBarProps } from './ChatComposerBar.tsx';
+export { ChatTranscript, type ChatTranscriptProps } from './ChatTranscript.tsx';
+export { TheoremDecisionAnswers, type TheoremDecisionAnswersProps } from './DecisionAnswers.tsx';
+export { TheoremDecision, type TheoremDecisionProps } from './TheoremDecision.tsx';
+export { TheoremHost, type TheoremHostProps } from './TheoremHost.tsx';
+export { DEFAULT_CHAT_MAX_WIDTH, TheoremChat, type TheoremChatHandle, type TheoremChatProps, } from './TheoremChat.tsx';
+export { ApprovalCard, type ApprovalCardProps, AuthChallengeCard, type AuthChallengeCardProps, type ToolDecision, } from './ToolGateCard.tsx';
+export { ToolResult } from './ToolResult.tsx';
+export { tablerIcons, theoremTheme } from './built/theorem.js';
+export { useDisclosureMotion } from './disclosure-motion.ts';
+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 { TheoremThemeProvider, type TheoremThemeProviderProps } from './theme.tsx';

package/ui/index.js

@@ -0,0 +1,29 @@
+/**
+ * Astryx UI for Theorem — `<TheoremChat />` plus the pieces it is built from,
+ * `<TheoremDecision />` for decision 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
+ */
+// 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 { InkWaveform } from "../components/InkWaveform.js";
+export { ChatComposerBar } from "./ChatComposerBar.js";
+export { ChatTranscript } from "./ChatTranscript.js";
+export { TheoremDecisionAnswers } from "./DecisionAnswers.js";
+export { TheoremDecision } from "./TheoremDecision.js";
+export { TheoremHost } from "./TheoremHost.js";
+export { DEFAULT_CHAT_MAX_WIDTH, TheoremChat, } from "./TheoremChat.js";
+export { ApprovalCard, AuthChallengeCard, } from "./ToolGateCard.js";
+export { ToolResult } from "./ToolResult.js";
+export { tablerIcons, theoremTheme } from './built/theorem.js';
+export { useDisclosureMotion } from "./disclosure-motion.js";
+export { composerDrawerLabel, liveStateLabel, THEOREM_UI_CATALOG, voiceNoteName, workStatusLabel, } from "./labels.js";
+export { TheoremLabelsProvider, useLabels } from "./labels-provider.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,61 @@
+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();
+}