@theoremjs/react 0.3.4-next.620.g9fe1aff → 0.3.4-next.624.g1a1ecd4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.620.g9fe1aff",
+  "version": "0.3.4-next.624.g1a1ecd4",
   "description": "React bindings for Theorem: headless hooks + transport, an Astryx chat UI, and a Web-standard server handler.",
   "license": "MIT",
   "type": "module",
@@ -60,8 +60,8 @@
     "@stylexjs/stylex": "0.19.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@theoremjs/agents": "^0.3.4-next.620.g9fe1aff",
-    "@theoremjs/web": "^0.3.4-next.620.g9fe1aff"
+    "@theoremjs/agents": "^0.3.4-next.624.g1a1ecd4",
+    "@theoremjs/web": "^0.3.4-next.624.g1a1ecd4"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/ConsoleFrame.js

@@ -13,7 +13,7 @@ import { TextArea } from '@astryxdesign/core/TextArea';
 import { VStack } from '@astryxdesign/core/VStack';
 import { Children, createContext, use, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
 import { useLabels } from "./labels-provider.js";
-import { PANEL_EDGE, PanelBody, PanelScroll, paneEdge, RAISED, SidePanel, SidePanelHeader, } from "./SidePanel.js";
+import { PANEL_EDGE, PanelBody, PanelScroll, paneEdge, RaisedFrame, SidePanel, SidePanelHeader, } from "./SidePanel.js";
 import { textRows } from "./StateFields.js";
 import { WithTrace } from "./TraceInspectorPanel.js";
 import { CONSOLE_CARD } from "./trace-patterns.js";
@@ -39,7 +39,11 @@ function useNarrow() {
  * `wide` is a pair stacked on a narrow page, which takes the page's width.
  */
 function ConsoleSingle({ flush, wide, maxWidth, children, }) {
-    return (_jsx(VStack, { height: "100%", paddingInlineStart: PANEL_EDGE, style: { ...(flush ? FLUSH_CARD : undefined), paddingInlineEnd: paneEdge(PANEL_EDGE) }, children: _jsx(Card, { variant: "transparent", height: "100%", padding: 0, style: flush ? { overflowY: 'auto' } : { ...RAISED, overflowY: 'auto' }, children: _jsx(Center, { axis: "horizontal", width: "100%", minHeight: "100%", children: _jsx(VStack, { width: "100%", maxWidth: wide ? undefined : maxWidth, gap: 3, padding: 4, children: children }) }) }) }));
+    const column = (_jsx(Center, { axis: "horizontal", width: "100%", minHeight: "100%", children: _jsx(VStack, { width: "100%", maxWidth: wide ? undefined : maxWidth, gap: 3, padding: 4, children: children }) }));
+    if (!flush)
+        return _jsx(RaisedFrame, { isScrollable: true, children: column });
+    // why: A flush page is already the raised panel, so it takes no block inset of its own.
+    return (_jsx(VStack, { height: "100%", paddingInlineStart: PANEL_EDGE, style: { ...FLUSH_CARD, paddingInlineEnd: paneEdge(PANEL_EDGE) }, children: _jsx(Card, { variant: "transparent", height: "100%", padding: 0, style: { overflowY: 'auto' }, children: column }) }));
 }
 /**
  * A console's page, for decisions and hosts alike: the trace toggle floats over

package/ui/SidePanel.d.ts

@@ -22,12 +22,13 @@ export type SidePanelLabels = {
     resize: string;
 };
 /** Shows or hides one side panel (`panelId` from useSidePanel). */
-export declare function SidePanelToggle({ labels, icon, panelId, open, onToggle, }: {
+export declare function SidePanelToggle({ labels, icon, panelId, open, onToggle, size, }: {
     labels: SidePanelLabels;
     icon: ReactNode;
     panelId: string;
     open: boolean;
     onToggle: () => void;
+    size?: 'sm';
 }): import("react").JSX.Element;
 export type SidePanelProps = {
     id?: string;
@@ -50,12 +51,6 @@ export type SidePanelProps = {
     className?: string;
     children?: ReactNode;
 };
-/** Page corners like the host's raised panels, no border or shadow; the card fill, so surface-filled cards read on it. */
-export declare const RAISED: {
-    background: string;
-    borderRadius: string;
-    overflow: string;
-};
 /** A docked panel's inset: 12px off the outer edge, 16px off the bottom (the page inset). */
 export declare const PANEL_EDGE = 3;
 export declare const PANEL_BOTTOM = 4;
@@ -95,6 +90,11 @@ export declare function useWidth(): {
     ref: (node: HTMLDivElement | null) => (() => void) | undefined;
     width: number;
 };
+/** The raised card a pane fills its place with, inset from every edge. */
+export declare function RaisedFrame({ isScrollable, children, }: {
+    isScrollable?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
 /**
  * A raised pane that fills its place, inset from the sides. Its content is
  * told whether the pane is wide enough for two readable columns.

package/ui/SidePanel.js

@@ -45,12 +45,12 @@ export function SidePanelHeader({ children, floating = false, }) {
     return (_jsx(LayoutHeader, { hasDivider: false, children: _jsx(HStack, { hAlign: "end", gap: 1, children: children }) }));
 }
 /** Shows or hides one side panel (`panelId` from useSidePanel). */
-export function SidePanelToggle({ labels, icon, panelId, open, onToggle, }) {
+export function SidePanelToggle({ labels, icon, panelId, open, onToggle, size, }) {
     const action = open ? labels.hide : labels.show;
-    return (_jsx(IconButton, { label: action, tooltip: action, variant: open ? 'secondary' : 'ghost', "aria-expanded": open, "aria-controls": panelId, icon: icon, onClick: onToggle }));
+    return (_jsx(IconButton, { label: action, size: size, tooltip: action, variant: open ? 'secondary' : 'ghost', "aria-expanded": open, "aria-controls": panelId, icon: icon, onClick: onToggle }));
 }
 /** Page corners like the host's raised panels, no border or shadow; the card fill, so surface-filled cards read on it. */
-export const RAISED = {
+const RAISED = {
     background: 'var(--theorem-pane-background, var(--color-background-card))',
     borderRadius: 'var(--radius-page)',
     overflow: 'hidden',
@@ -100,16 +100,20 @@ export function useWidth() {
     }, []);
     return { ref, width };
 }
+/** The raised card a pane fills its place with, inset from every edge. */
+export function RaisedFrame({ isScrollable = false, children, }) {
+    return (_jsx(VStack, { height: "100%", paddingInlineStart: PANEL_EDGE, paddingBlockStart: PANEL_EDGE, style: {
+            paddingInlineEnd: paneEdge(PANEL_EDGE),
+            paddingBlockEnd: paneEdge(PANEL_EDGE),
+        }, children: _jsx(Card, { variant: "transparent", height: "100%", padding: 0, style: isScrollable ? { ...RAISED, overflowY: 'auto' } : RAISED, children: children }) }));
+}
 /**
  * A raised pane that fills its place, inset from the sides. Its content is
  * told whether the pane is wide enough for two readable columns.
  */
 export function RaisedPane({ id, header, children, }) {
     const { ref, width } = useWidth();
-    return (_jsx(Layout, { height: "fill", style: { position: 'relative' }, header: header, content: _jsx(LayoutContent, { padding: 0, isScrollable: false, children: _jsx(VStack, { height: "100%", paddingInlineStart: PANEL_EDGE, paddingBlockStart: PANEL_EDGE, style: {
-                    paddingInlineEnd: paneEdge(PANEL_EDGE),
-                    paddingBlockEnd: paneEdge(PANEL_EDGE),
-                }, children: _jsx(Card, { variant: "transparent", height: "100%", padding: 0, style: RAISED, children: _jsx("div", { id: id, ref: ref, style: { height: '100%' }, children: children(isSidePanelWide(width)) }) }) }) }) }));
+    return (_jsx(Layout, { height: "fill", style: { position: 'relative' }, header: header, content: _jsx(LayoutContent, { padding: 0, isScrollable: false, children: _jsx(RaisedFrame, { children: _jsx("div", { id: id, ref: ref, style: { height: '100%' }, children: children(isSidePanelWide(width)) }) }) }) }));
 }
 /** A raised pane's content. Narrow, the detail takes the overview's place; wide, it sits beside it. */
 export function PaneLayout({ isWide, label, detailLabel, lead, overview, detail, }) {

package/ui/TraceInspector.d.ts

@@ -2,9 +2,11 @@ import type { TraceRecord } from '@theoremjs/agents';
 import type { TraceFeed } from '@theoremjs/web/client';
 import { type ReactNode } from 'react';
 /** The inspector over the records a feed has delivered; the panel loads this module when it first opens. */
-export declare function TraceFeedBody({ traces, isWide, }: {
+export declare function TraceFeedBody({ traces, isWide, end, }: {
     traces: TraceFeed | undefined;
     isWide: boolean;
+    /** Drawn after the turn arrows: the panel's toggle. */
+    end?: ReactNode;
 }): import("react").JSX.Element;
 /**
  * Only what the records say of guardrails: how long the checks took, how many

package/ui/TraceInspector.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Badge } from '@astryxdesign/core/Badge';
 import { EmptyState } from '@astryxdesign/core/EmptyState';
 import { HStack } from '@astryxdesign/core/HStack';
@@ -143,9 +143,9 @@ function TurnOverview({ turns, index, onPick, onBack, selectedId, onSelect, end,
     const tools = traceSpans([root]).filter((node) => node.meta.type === 'tool').length;
     return (_jsxs(VStack, { gap: 5, padding: 4, children: [_jsx(TurnPicker, { turns: turns, index: index, onChange: onPick, onBack: onBack, end: end }), _jsxs(VStack, { gap: 3, children: [_jsx(TurnStats, { totals: turn.totals, tools: tools, latency: latency }), _jsx(TraceCharts, { root: root, split: turn.split, onSelect: onSelect })] }), _jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.timeline') }), _jsx(PowerSearch, { config: config, filters: filters, onChange: setFilters, label: t('@theorem.panel.trace.search'), isLabelHidden: true, placeholder: t('@theorem.panel.trace.search.placeholder'), resultCount: matches?.size, size: "sm" }), _jsx(TraceWaterfall, { root: root, selectedId: selectedId, matches: matches, onSelect: onSelect }, root.id)] }), story.length > 0 ? (_jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.story') }), _jsx(TraceStory, { steps: story, selectedId: selectedId, matches: matches, onSelect: onSelect })] })) : null, guardrails.length > 0 ? (_jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.guardrails') }), _jsx(TraceGuardrails, { checks: guardrails, onSelect: onSelect })] })) : null] }));
 }
-function EmptyTrace() {
+function EmptyTrace({ end }) {
     const { t } = useTraceFormat();
-    return (_jsx(VStack, { height: "100%", vAlign: "center", padding: 4, children: _jsx(EmptyState, { icon: _jsx(Icon, { icon: IconActivity, size: "lg", color: "secondary" }), title: t('@theorem.panel.trace.empty.title'), description: t('@theorem.panel.trace.empty.description'), isCompact: true }) }));
+    return (_jsxs(VStack, { height: "100%", vAlign: "center", padding: 4, children: [end ? _jsx(HStack, { justify: "end", children: end }) : null, _jsx(EmptyState, { icon: _jsx(Icon, { icon: IconActivity, size: "lg", color: "secondary" }), title: t('@theorem.panel.trace.empty.title'), description: t('@theorem.panel.trace.empty.description'), isCompact: true })] }));
 }
 /** The open span of the open turn; opening another turn closes it. */
 function useOpenSpan(turns) {
@@ -207,19 +207,19 @@ function TraceDownload({ records }) {
  * The panel's content. Narrow, the turn fills it and a span opens in its
  * place; wide, an open span sits beside the turn.
  */
-function TraceInspectorBody({ records, isWide, }) {
+function TraceInspectorBody({ records, isWide, end, }) {
     const tree = useMemo(() => traceTree(records), [records]);
     const turns = useMemo(() => traceTurns(tree), [tree]);
     const { t } = useTraceFormat();
     const { index, root, open, select, close, pick } = useOpenSpan(turns);
     if (turns.length === 0)
-        return _jsx(EmptyTrace, {});
-    const overview = (_jsx(Overview, { turns: turns, index: index, pick: pick, selectedId: open?.id, select: select, end: _jsx(TraceDownload, { records: records }) }));
+        return _jsx(EmptyTrace, { end: end });
+    const overview = (_jsx(Overview, { turns: turns, index: index, pick: pick, selectedId: open?.id, select: select, end: _jsxs(_Fragment, { children: [_jsx(TraceDownload, { records: records }), end] }) }));
     return (_jsx(PaneLayout, { isWide: isWide, label: t('@theorem.panel.trace.name'), detailLabel: open?.meta.label ?? '', lead: _jsx(TracePatterns, {}), overview: overview, detail: open && (_jsx(SpanPane, { open: open, turnStartMs: root?.startMs ?? 0, isWide: isWide, onBack: close, onOpen: select })) }));
 }
 /** The inspector over the records a feed has delivered; the panel loads this module when it first opens. */
-export function TraceFeedBody({ traces, isWide, }) {
-    return _jsx(TraceInspectorBody, { records: useTraceRecords(traces), isWide: isWide });
+export function TraceFeedBody({ traces, isWide, end, }) {
+    return _jsx(TraceInspectorBody, { records: useTraceRecords(traces), isWide: isWide, end: end });
 }
 /**
  * Only what the records say of guardrails: how long the checks took, how many

package/ui/TraceInspectorPanel.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from '@astryxdesign/core/Icon';
 import { IconActivity } from '@tabler/icons-react';
 import { cloneElement, createContext, isValidElement, lazy, Suspense, use, useCallback, useId, useRef, useState, } from 'react';
@@ -13,8 +13,8 @@ const TracePlacementContext = createContext('replace');
 export function TracePlacement({ value, children, }) {
     return _jsx(TracePlacementContext, { value: value, children: children });
 }
-function TraceView({ id, header, traces, }) {
-    return (_jsx(RaisedPane, { id: id, header: header, children: (isWide) => (_jsx(Suspense, { fallback: null, children: _jsx(TraceFeedBody, { traces: traces, isWide: isWide }) })) }));
+function TraceView({ id, toggle, traces, }) {
+    return (_jsx(RaisedPane, { id: id, children: (isWide) => (_jsx(Suspense, { fallback: _jsx(SidePanelHeader, { floating: true, children: toggle }), children: _jsx(TraceFeedBody, { traces: traces, isWide: isWide, end: toggle }) })) }));
 }
 /**
  * The trace inspector, offered when the profile records traces. By default the
@@ -39,21 +39,21 @@ export function useTraceInspector(iface, traces, open) {
     if (iface.observability?.record !== true)
         return { toggle: null, view: null, labels, offered: false };
     const isOpen = open ?? own;
-    const toggle = open === undefined ? (_jsx(SidePanelToggle, { labels: labels, icon: _jsx(Icon, { icon: IconActivity }), panelId: id, open: isOpen, onToggle: () => setOwn((value) => !value) })) : null;
-    const view = isOpen ? openTrace(placement === 'panel', id, traces, toggle) : null;
+    const toggleOf = (size) => open === undefined ? (_jsx(SidePanelToggle, { labels: labels, icon: _jsx(Icon, { icon: IconActivity }), panelId: id, open: isOpen, size: size, onToggle: () => setOwn((value) => !value) })) : null;
+    const toggle = toggleOf();
+    const view = isOpen ? openTrace(placement === 'panel', id, traces, toggleOf('sm')) : null;
     return { toggle, view, labels, offered: true };
 }
-/** The open trace: filling the host's docked panel, or as its own panel; the toggle on top. */
+/** The open trace: filling the host's docked panel, or as its own panel; the toggle sits in its top row. */
 function openTrace(docked, id, traces, toggle) {
-    const header = toggle ? _jsx(SidePanelHeader, { floating: true, children: toggle }) : null;
     if (docked)
-        return _jsx(TraceFill, { id: id, header: header, traces: traces });
-    return _jsx(TraceView, { id: id, header: header, traces: traces });
+        return _jsx(TraceFill, { id: id, toggle: toggle, traces: traces });
+    return _jsx(TraceView, { id: id, toggle: toggle, traces: traces });
 }
 /** The trace body, filling the docked panel. The panel supplies the raised card. */
-function TraceFill({ id, header, traces, }) {
+function TraceFill({ id, toggle, traces, }) {
     const { ref, width } = useWidth();
-    return (_jsxs("div", { id: id, ref: ref, style: { height: '100%', position: 'relative' }, children: [header, _jsx(Suspense, { fallback: null, children: _jsx(TraceFeedBody, { traces: traces, isWide: isSidePanelWide(width) }) })] }));
+    return (_jsx("div", { id: id, ref: ref, style: { height: '100%', position: 'relative' }, children: _jsx(Suspense, { fallback: _jsx(SidePanelHeader, { floating: true, children: toggle }), children: _jsx(TraceFeedBody, { traces: traces, isWide: isSidePanelWide(width), end: toggle }) }) }));
 }
 /** The surface, with the trace docked at its inline end. A host-driven trace stays in place. */
 function TraceDock({ inspector, children }) {