@theoremjs/react 0.3.4-next.596.g481e1de → 0.3.4-next.600.gb15be9a

package/package.json

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

package/ui/ShapedData.js

@@ -3,6 +3,7 @@ import { CodeBlock } from '@astryxdesign/core/CodeBlock';
 import { Collapsible, CollapsibleGroup } from '@astryxdesign/core/Collapsible';
 import { HStack } from '@astryxdesign/core/HStack';
 import { useLocale } from '@astryxdesign/core/i18n';
+import { useLightbox } from '@astryxdesign/core/Lightbox';
 import { Link } from '@astryxdesign/core/Link';
 import { List, ListItem } from '@astryxdesign/core/List';
 import { Markdown } from '@astryxdesign/core/Markdown';
@@ -10,14 +11,16 @@ import { MetadataList, MetadataListItem } from '@astryxdesign/core/MetadataList'
 import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl';
 import { Table } from '@astryxdesign/core/Table';
 import { Text } from '@astryxdesign/core/Text';
+import { Thumbnail } from '@astryxdesign/core/Thumbnail';
 import { Token } from '@astryxdesign/core/Token';
 import { VStack } from '@astryxdesign/core/VStack';
-import { fieldLabel, fieldReading, isPlain, isProse, isRow, json, MAX_ROWS, plainReading, rowHeading, shapeOf, splitFields, unpacked, withUnit, } from '@theoremjs/web/client';
+import { fieldLabel, fieldReading, isPlain, isProse, isRow, json, layoutChars, MAX_ROWS, plainReading, rowHeading, shapeOf, splitFields, unpacked, withUnit, } from '@theoremjs/web/client';
 import { Component, useMemo, useState } from 'react';
 import { Arrive, useArrive } from "./arrive.js";
 import { useLabels } from "./labels-provider.js";
 import { useMarkdownPlugins } from "./markdown-plugins.js";
 import { keyedByContent } from "./row-keys.js";
+import { VoiceNote } from "./VoiceNote.js";
 /** Each way a plain value reads, drawn. */
 function ProseReading({ text }) {
     return (_jsx(Markdown, { density: "compact", headingLevelStart: 4, plugins: useMarkdownPlugins(), children: text }));
@@ -128,6 +131,45 @@ function Fields({ row, depth, units }) {
                 // why: The top level's first section starts open: it's usually the payload. The rest wait to be asked for.
                 defaultValue: depth === 0 ? sections.slice(0, 1).map((shown) => shown.key) : [], children: sections.map((shown) => depth === 0 ? (_jsx(ArrivingFieldSection, { shown: shown, depth: depth }, shown.key)) : (_jsx(FieldSection, { shown: shown, depth: depth }, shown.key))) })), depth === 0 && fields ? _jsx(Arrive, { children: fields }) : null] }));
 }
+/** A media part's source: its base64 `data` as a data URL, or its `uri`. */
+function partSrc(part) {
+    return 'uri' in part ? part.uri : `data:${part.mimeType};base64,${part.data}`;
+}
+function viewable(part) {
+    return part.type === 'image' || part.type === 'video';
+}
+/** A list of parts in its own order; every image and video opens in one Lightbox, so the arrows walk them all. */
+function Parts({ parts }) {
+    const t = useLabels();
+    const shown = parts.slice(0, MAX_ROWS);
+    const media = [];
+    /** Each viewable part's place in the Lightbox, by its place in the list. */
+    const slides = new Map();
+    shown.forEach((part, index) => {
+        if (!viewable(part))
+            return;
+        slides.set(index, media.length);
+        const alt = t(part.type === 'image' ? '@theorem.data.image' : '@theorem.data.video', {
+            index: String(media.length + 1),
+        });
+        media.push({ src: partSrc(part), alt, type: part.type });
+    });
+    const lightbox = useLightbox({ media, hasZoom: true });
+    return (_jsxs(VStack, { gap: 2, children: [shown.map((part, index) => {
+                const key = String(index);
+                if (part.type === 'text')
+                    return _jsx(ProseReading, { text: part.text }, key);
+                const slide = slides.get(index);
+                const item = slide === undefined ? undefined : media[slide];
+                if (slide !== undefined && item) {
+                    return (_jsx(Thumbnail, { src: part.type === 'image' ? item.src : undefined, alt: item.alt, label: item.alt, onClick: () => lightbox.open(slide) }, key));
+                }
+                if (part.type === 'audio') {
+                    return _jsx(VoiceNote, { src: partSrc(part), mimeType: part.mimeType }, key);
+                }
+                return _jsx(Token, { label: part.mimeType, size: "sm" }, key);
+            }), _jsx(More, { total: parts.length }), lightbox.element] }));
+}
 /** Each shape a value takes, drawn. */
 const SHAPES = {
     json: (_, { value }) => _jsx(Json, { text: json(value) }),
@@ -138,6 +180,7 @@ const SHAPES = {
     table: ({ columns, rows }, { units }) => (_jsx(DataTable, { columns: columns, rows: rows, units: units })),
     rows: ({ items }, { depth }) => _jsx(Rows, { items: items, depth: depth }),
     fields: ({ row }, { depth, units }) => _jsx(Fields, { row: row, depth: depth, units: units }),
+    parts: ({ parts }) => _jsx(Parts, { parts: parts }),
 };
 function Node({ value: raw, depth, units, }) {
     const t = useLabels();
@@ -182,7 +225,9 @@ export function ShapedData({ value: raw, title, lead, ledKeys = [] }) {
         const left = Object.entries(value).filter(([key]) => !ledKeys.includes(key));
         return left.length ? Object.fromEntries(left) : undefined;
     }, [value, ledKeys]);
-    if (text.length > LARGE_JSON_CHARS) {
+    // why: Base64 media draws as a picture or a player, not as text, so only the rest counts toward the limit.
+    const tooLarge = useMemo(() => text.length > LARGE_JSON_CHARS && layoutChars(value) > LARGE_JSON_CHARS, [text, value]);
+    if (tooLarge) {
         const size = new Intl.NumberFormat(locale, {
             style: 'unit',
             unit: 'kilobyte',

package/ui/labels.d.ts

@@ -280,6 +280,16 @@ export declare const THEOREM_UI_CATALOG: {
         readonly description: "Rows past the shown ones, left to the JSON view.";
         readonly params: readonly ["count"];
     };
+    readonly '@theorem.data.image': {
+        readonly defaultMessage: "Image {index}";
+        readonly description: "An image in tool data, named by its place among the images and videos.";
+        readonly params: readonly ["index"];
+    };
+    readonly '@theorem.data.video': {
+        readonly defaultMessage: "Video {index}";
+        readonly description: "A video in tool data, named by its place among the images and videos.";
+        readonly params: readonly ["index"];
+    };
     readonly '@theorem.data.large': {
         readonly defaultMessage: "Too large to lay out — showing the first {size} of its JSON";
         readonly description: "A payload too big to draw by its shape, shown as the start of its JSON.";

package/ui/labels.js

@@ -255,6 +255,16 @@ export const THEOREM_UI_CATALOG = {
         description: 'Rows past the shown ones, left to the JSON view.',
         params: ['count'],
     },
+    '@theorem.data.image': {
+        defaultMessage: 'Image {index}',
+        description: 'An image in tool data, named by its place among the images and videos.',
+        params: ['index'],
+    },
+    '@theorem.data.video': {
+        defaultMessage: 'Video {index}',
+        description: 'A video in tool data, named by its place among the images and videos.',
+        params: ['index'],
+    },
     '@theorem.data.large': {
         defaultMessage: 'Too large to lay out — showing the first {size} of its JSON',
         description: 'A payload too big to draw by its shape, shown as the start of its JSON.',