@theoremjs/react 0.3.0 → 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.js

@@ -1,4 +1,4 @@
-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 { 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,
@@ -29,6 +29,7 @@ const TABLER_BY_NAME = {
     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]) => [

package/ui/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * Astryx UI for Theorem — `<TheoremChat />` plus the pieces it is built from,
- * `<TheoremDecision />` for decision profiles, and `<TheoremHost />` for host
- * profiles.
+ * `<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>`.
@@ -9,17 +9,28 @@
  * @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 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 { 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 { TraceGuardrailsView, TracePlacement, useTraceInspector } from './TraceInspectorPanel.tsx';
 export { TheoremThemeProvider, type TheoremThemeProviderProps } from './theme.tsx';

package/ui/index.js

@@ -1,29 +1,39 @@
 /**
  * Astryx UI for Theorem — `<TheoremChat />` plus the pieces it is built from,
- * `<TheoremDecision />` for decision profiles, and `<TheoremHost />` for host
- * profiles.
+ * `<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
  */
-// Astryx's documented order: reset → components → theme. The reset lives in
+// 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 { InkWaveform } from "../components/InkWaveform.js";
-export { ChatComposerBar } from "./ChatComposerBar.js";
+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 { 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 { TraceGuardrailsView, TracePlacement, useTraceInspector } from "./TraceInspectorPanel.js";
 export { TheoremThemeProvider } from "./theme.js";

package/ui/labels-provider.js

@@ -1,7 +1,7 @@
 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";
+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. */
@@ -22,7 +22,10 @@ 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] } };
+    const next = {
+        ...messages,
+        [base]: { ...THEOREM_UI_CATALOG, ...messages[base] },
+    };
     WITH_CATALOG.set(next, base);
     return next;
 }