@theoremjs/react 0.3.4-next.608.gd007c52 → 0.3.4-next.610.g6ddf39d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.608.gd007c52",
+  "version": "0.3.4-next.610.g6ddf39d",
   "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.608.gd007c52",
-    "@theoremjs/web": "^0.3.4-next.608.gd007c52"
+    "@theoremjs/agents": "^0.3.4-next.610.g6ddf39d",
+    "@theoremjs/web": "^0.3.4-next.610.g6ddf39d"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/CardWall.js

@@ -22,6 +22,21 @@ export function CardWall({ minWidth, children }) {
     const wallRef = useRef(null);
     const slots = useRef([]);
     const observer = useRef(null);
+    const slotRefs = useRef([]);
+    // why: One callback per place, so a re-render does not detach and watch every slot again.
+    const slotRef = (at) => {
+        slotRefs.current[at] ??= (slot) => {
+            slots.current[at] = slot;
+            // why: A card that mounts later is measured once it is watched.
+            if (slot)
+                observer.current?.observe(slot);
+            return () => {
+                if (slot)
+                    observer.current?.unobserve(slot);
+            };
+        };
+        return slotRefs.current[at];
+    };
     const [wall, setWall] = useState({ width: 0, gap: 0, heights: [] });
     const count = columnCount(wall.width, minWidth, wall.gap);
     const columnWidth = (wall.width - wall.gap * (count - 1)) / count;
@@ -55,16 +70,7 @@ export function CardWall({ minWidth, children }) {
     }, []);
     return (_jsx(VStack, { ref: wallRef, gap: 3, style: isPlaced ? { position: 'relative', height } : undefined, children: cards.map((card, at) => {
             const place = places[at];
-            return (_jsx("div", { ref: (slot) => {
-                    slots.current[at] = slot;
-                    // why: A card that mounts later is measured once it is watched.
-                    if (slot)
-                        observer.current?.observe(slot);
-                    return () => {
-                        if (slot)
-                            observer.current?.unobserve(slot);
-                    };
-                }, style: isPlaced && place
+            return (_jsx("div", { ref: slotRef(at), style: isPlaced && place
                     ? {
                         position: 'absolute',
                         top: place.top,

package/ui/ToolResult.js

@@ -32,7 +32,7 @@ function ResultLead({ layout, parts = [], }) {
     if (!hasLead(layout, media))
         return null;
     const { images, audio } = media;
-    return (_jsxs(VStack, { gap: 3, children: [_jsxs(CardWall, { minWidth: CARD_PX, children: [layout.figures.map((figure) => (_jsx(Arrive, { children: _jsx(ChartCard, { title: figure.label, value: withUnit(decimal.format(figure.value), figure.unit) }) }, `figure:${figure.key}`))), layout.charts.map((chart) => (_jsx(Arrive, { children: _jsx(Suspense, { fallback: _jsx(Skeleton, { height: CHART_CARD_PX }), children: _jsx(ToolResultChart, { chart: chart }) }) }, `chart:${chart.key}`))), images.map((image, index) => (_jsx(Arrive, { children: _jsx(ClickableCard, { label: image.alt || 'Open image', padding: 0, onClick: () => setOpen(index), children: _jsx(AspectRatio, { ratio: 4 / 3, fit: "cover", children: _jsx("img", { src: image.src, alt: image.alt, loading: "lazy" }) }) }) }, `image:${image.src}`)))] }), images.length > 0 ? (_jsx(Lightbox, { isOpen: open !== null, onOpenChange: (isOpen) => {
+    return (_jsxs(VStack, { gap: 3, children: [_jsxs(CardWall, { minWidth: CARD_PX, children: [layout.figures.map((figure) => (_jsx(Arrive, { children: _jsx(ChartCard, { title: figure.label, value: withUnit(decimal.format(figure.value), figure.unit) }) }, `figure:${figure.key}`))), layout.charts.map((chart) => (_jsx(Suspense, { fallback: _jsx(Arrive, { children: _jsx(Skeleton, { height: CHART_CARD_PX }) }), children: _jsx(Arrive, { children: _jsx(ToolResultChart, { chart: chart }) }) }, `chart:${chart.key}`))), images.map((image, index) => (_jsx(Arrive, { children: _jsx(ClickableCard, { label: image.alt || 'Open image', padding: 0, onClick: () => setOpen(index), children: _jsx(AspectRatio, { ratio: 4 / 3, fit: "cover", children: _jsx("img", { src: image.src, alt: image.alt, loading: "lazy" }) }) }) }, `image:${image.src}`)))] }), images.length > 0 ? (_jsx(Lightbox, { isOpen: open !== null, onOpenChange: (isOpen) => {
                     if (!isOpen)
                         setOpen(null);
                 }, media: images.map((image) => ({ src: image.src, alt: image.alt })), index: open ?? 0, onIndexChange: setOpen })) : null, keyedByContent(audio, (clip) => clip.src).map(({ item: clip, key }) => (_jsx(Arrive, { children: _jsx(VoiceNote, { src: clip.src, mimeType: clip.mimeType }) }, key)))] }));