@theoremjs/react 0.3.4-next.600.gb15be9a → 0.3.4-next.602.gb5a7fab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.600.gb15be9a",
+  "version": "0.3.4-next.602.gb5a7fab",
   "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.600.gb15be9a",
-    "@theoremjs/web": "^0.3.4-next.600.gb15be9a"
+    "@theoremjs/agents": "^0.3.4-next.602.gb5a7fab",
+    "@theoremjs/web": "^0.3.4-next.602.gb5a7fab"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/ConsoleFrame.js

@@ -10,7 +10,7 @@ import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/Segme
 import { Text } from '@astryxdesign/core/Text';
 import { TextArea } from '@astryxdesign/core/TextArea';
 import { VStack } from '@astryxdesign/core/VStack';
-import { Children, createContext, use, useMemo, useRef, useSyncExternalStore, } from 'react';
+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 { textRows } from "./StateFields.js";
@@ -56,7 +56,7 @@ function ConsoleBody({ layoutRef, flush, columns, maxWidth, requestLabel, childr
     const drawn = Children.toArray(children).length;
     const paired = columns && drawn > 1;
     if (paired && !narrow) {
-        return (_jsx(ConsoleColumns, { requestLabel: requestLabel, basisWidth: layoutRef.current?.clientWidth ?? 0, children: children }));
+        return (_jsx(ConsoleColumns, { requestLabel: requestLabel, layoutRef: layoutRef, children: children }));
     }
     return (_jsx(ConsoleSingle, { flush: flush, wide: paired, maxWidth: maxWidth, children: children }));
 }
@@ -66,7 +66,7 @@ function ConsoleBody({ layoutRef, flush, columns, maxWidth, requestLabel, childr
  * against this inner layout, not the page, so a trace docked outside the pair
  * cannot take the request's share.
  */
-function ConsoleColumns({ requestLabel = 'Request', basisWidth, children, }) {
+function ConsoleColumns({ requestLabel = 'Request', layoutRef, children, }) {
     const t = useLabels();
     const pairRef = useRef(null);
     // why: a percentage default resolves against a 1200px stand-in until the pair
@@ -74,6 +74,8 @@ function ConsoleColumns({ requestLabel = 'Request', basisWidth, children, }) {
     // reflowing the request. This layout is already on screen, so the first
     // width is two fifths of it. 70% leaves the response a readable share, and a
     // percentage maximum follows the pair when the trace opens.
+    // why: Read once. Reading layout on every render forces a reflow of each streamed event's commit.
+    const [basisWidth] = useState(() => layoutRef.current?.clientWidth ?? 0);
     const requestPanel = useResizable({
         defaultSize: basisWidth > 0 ? Math.round(basisWidth * 0.4) : '40%',
         minSize: 280,