@theoremjs/react 0.3.4-next.622.g75b9875 → 0.3.4-next.624.g1a1ecd4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.622.g75b9875",
+  "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.622.g75b9875",
-    "@theoremjs/web": "^0.3.4-next.622.g75b9875"
+    "@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

@@ -51,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;
@@ -96,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

@@ -50,7 +50,7 @@ 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',
@@ -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, }) {