@theoremjs/react 0.3.4-next.622.g75b9875 → 0.3.4-next.626.g7105a87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.622.g75b9875",
+  "version": "0.3.4-next.626.g7105a87",
   "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.622.g75b9875",
-    "@theoremjs/web": "^0.3.4-next.622.g75b9875"
+    "@theoremjs/agents": "^0.3.4-next.626.g7105a87",
+    "@theoremjs/web": "^0.3.4-next.626.g7105a87"
   },
   "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, 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(PanelBody, { inset: "all", padding: 0, 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/LiveRunner.js

@@ -20,7 +20,7 @@ import { useLiveRunnerModel } from "../components/live/use-live-runner-model.js"
 import { LiveCaptionsPanel } from "./LiveCaptionsPanel.js";
 import { liveStateLabel } from "./labels.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
-import { PANEL_BOTTOM, PANEL_EDGE, SidePanel, SidePanelHeader, SidePanelToggle, useSidePanel, } from "./SidePanel.js";
+import { PANEL_EDGE, SidePanel, SidePanelHeader, SidePanelToggle, useSidePanel, } from "./SidePanel.js";
 import { DEFAULT_CHAT_MAX_WIDTH } from "./TheoremChat.js";
 import { ApprovalCard, AuthChallengeCard, GATE_CARD_WIDTH } from "./ToolGateCard.js";
 import { useTraceInspector, WithTrace } from "./TraceInspectorPanel.js";
@@ -55,7 +55,7 @@ function LiveRunnerBody({ iface, connection, trace, slots, context, pageTools, }
     if (!model.callStarted) {
         return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", header: _jsx(SidePanelHeader, { children: inspector.toggle }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(LiveLanding, { model: model }) }) }) }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", header: _jsx(SidePanelHeader, { children: inspector.toggle }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(Layout, { height: "fill", end: _jsx(SidePanel, { id: captions.id, labels: captionLabels, resizable: captions.resizable, open: captions.open, children: _jsx(LiveCaptions, { model: model }) }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(VStack, { height: "100%", paddingInline: PANEL_EDGE, paddingBlockEnd: PANEL_BOTTOM, children: _jsx(LiveStage, { model: model, captionsToggle: captionsToggle }) }) }) }) }) }) }), _jsx(LiveToolGateDialog, { prompt: model.gatePrompt, agent: t('@theorem.agent.handle', { handle: model.handle }), onResolve: model.resolveGateDecision })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", header: _jsx(SidePanelHeader, { children: inspector.toggle }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(Layout, { height: "fill", end: _jsx(SidePanel, { id: captions.id, labels: captionLabels, resizable: captions.resizable, open: captions.open, children: _jsx(LiveCaptions, { model: model }) }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(VStack, { height: "100%", padding: PANEL_EDGE, children: _jsx(LiveStage, { model: model, captionsToggle: captionsToggle }) }) }) }) }) }) }), _jsx(LiveToolGateDialog, { prompt: model.gatePrompt, agent: t('@theorem.agent.handle', { handle: model.handle }), onResolve: model.resolveGateDecision })] }));
 }
 /**
  * Before a call: the chat landing's greeting, with call buttons where the

package/ui/SidePanel.d.ts

@@ -51,29 +51,23 @@ 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). */
+/** A raised panel's inset: 12px off the page's edges. */
 export declare const PANEL_EDGE = 3;
-export declare const PANEL_BOTTOM = 4;
 /**
  * A raised pane's gap from the page's end or bottom edge: `--theorem-pane-edge` where a host
  * sets it (0 where the host already insets its page), else `spacing`.
  */
-export declare function paneEdge(spacing: typeof PANEL_EDGE | typeof PANEL_BOTTOM): string;
-/** The raised card every docked panel and the content beside one share. */
-export declare function PanelBody({ padding, inset, className, children, }: {
+export declare function paneEdge(spacing: typeof PANEL_EDGE): string;
+/** The raised card every pane, docked panel and console shares, inset the same from top and bottom. */
+export declare function PanelBody({ padding, inset, isScrollable, className, children, }: {
     padding?: 0;
     /**
      * `end` insets the trailing edge (a panel docked there, or the content
      * filling beside a start panel). `start` insets the leading edge. `beside`
-     * insets both.
+     * and `all` inset both.
      */
-    inset?: 'end' | 'start' | 'beside';
+    inset?: 'end' | 'start' | 'beside' | 'all';
+    isScrollable?: boolean;
     className?: string;
     children?: ReactNode;
 }): import("react").JSX.Element;

package/ui/SidePanel.js

@@ -50,14 +50,13 @@ export function SidePanelToggle({ labels, icon, panelId, open, onToggle, size, }
     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',
 };
-/** A docked panel's inset: 12px off the outer edge, 16px off the bottom (the page inset). */
+/** A raised panel's inset: 12px off the page's edges. */
 export const PANEL_EDGE = 3;
-export const PANEL_BOTTOM = 4;
 /**
  * A raised pane's gap from the page's end or bottom edge: `--theorem-pane-edge` where a host
  * sets it (0 where the host already insets its page), else `spacing`.
@@ -65,12 +64,12 @@ export const PANEL_BOTTOM = 4;
 export function paneEdge(spacing) {
     return `var(--theorem-pane-edge, var(--spacing-${String(spacing)}))`;
 }
-/** The raised card every docked panel and the content beside one share. */
-export function PanelBody({ padding, inset = 'end', className, children, }) {
-    return (_jsx(VStack, { height: "100%", className: className, paddingInlineStart: inset === 'end' ? undefined : PANEL_EDGE, style: {
+/** The raised card every pane, docked panel and console shares, inset the same from top and bottom. */
+export function PanelBody({ padding, inset = 'end', isScrollable = false, className, children, }) {
+    return (_jsx(VStack, { height: "100%", className: className, paddingInlineStart: inset === 'end' ? undefined : PANEL_EDGE, paddingBlockStart: PANEL_EDGE, style: {
             paddingInlineEnd: inset === 'start' ? undefined : paneEdge(PANEL_EDGE),
-            paddingBlockEnd: paneEdge(PANEL_BOTTOM),
-        }, children: _jsx(Card, { variant: "transparent", height: "100%", padding: padding, style: RAISED, children: children }) }));
+            paddingBlockEnd: paneEdge(PANEL_EDGE),
+        }, children: _jsx(Card, { variant: "transparent", height: "100%", padding: padding, style: isScrollable ? { ...RAISED, overflowY: 'auto' } : RAISED, children: children }) }));
 }
 /** The scroll inside a panel card. The same area the trace uses, so a short body sizes to its rows. */
 export function PanelScroll({ label, padding, children, }) {
@@ -106,10 +105,7 @@ export function useWidth() {
  */
 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(PanelBody, { inset: "all", padding: 0, 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, }) {