@theoremjs/studio 0.3.4-next.482.g7e608f2 → 0.3.4-next.508.geda6db0

package/ui/map-token.css

@@ -9,3 +9,28 @@
   stroke: var(--color-border-emphasized);
   stroke-width: 1.5;
 }
+
+/* A line drawing in runs out from the node it leaves, as the loader's map draws: its own pace, not
+   the scroll's. */
+.map-line-drawing {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: map-line-draw var(--duration-medium, 240ms) var(--ease-standard, ease-out) forwards;
+}
+
+/* A token drawing in shows over the same span. */
+.map-token-drawing {
+  animation: map-draw-in var(--duration-medium, 240ms) var(--ease-standard, ease-out) both;
+}
+
+@keyframes map-line-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes map-draw-in {
+  from {
+    opacity: 0;
+  }
+}

package/ui/node-icon.js

@@ -1,5 +1,5 @@
 import { IconTool } from '@tabler/icons-react';
-import { IconTypeSafe, modelFamilyMark } from "./brand-icons.js";
+import { modelFamilyMark } from "./brand-icons.js";
 import { FACET_ICON } from "./lib/facet-icons.js";
 import { PROFILE_TYPE_ICON, toolTypeIcon } from "./lib/type-icons.js";
 /** A node's icon; Identity shows the profile type's once one is picked. */
@@ -11,9 +11,6 @@ export function nodeIcon(draft, ref) {
         const binding = draft.modelBindings.find((each) => each.key === ref.key);
         if (!binding)
             return FACET_ICON.modelBinding;
-        const definition = draft.providers.find((each) => each.id === binding.provider)?.definition;
-        if (definition === 'typesafe')
-            return IconTypeSafe;
         return modelFamilyMark(binding.apiId) ?? FACET_ICON.modelBinding;
     }
     if (ref.facet !== 'toolSpec')

package/ui/profile-editor.js

@@ -2531,7 +2531,7 @@ function DecisionImageRow({ image, index, onRename, onRemove, }) {
     const reference = `<${image.name}>`;
     return (_jsxs(InspectorRow, { label: label, path: "decision.images.name", hasIssue: status !== undefined, children: [_jsx(Thumbnail, { src: `data:${image.mimeType};base64,${image.data}`, label: `Questions write it as ${reference}` }), _jsx(StackItem, { size: "fill", children: _jsx(TextInput, { label: `${label} name`, isLabelHidden: true, size: "sm", status: status, value: image.name, onChange: onRename }) }), _jsx(Tooltip, { content: `Remove ${reference}. A question that names it then has no image to read.`, children: _jsx(IconButton, { label: `Remove ${reference}`, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconX, size: "sm" }), onClick: onRemove }) })] }));
 }
-/** The pictures every decision sends, each under the name its questions write, and a drop to add more. */
+/** The pictures a decision can send, each under the name its questions write, and a drop to add more. */
 function DecisionImagesSection({ draft, setDraft }) {
     const keys = useLentKeys();
     const { reading, changeAction } = useFilesRead(async (picked) => {

package/ui/read-map.css

@@ -11,20 +11,9 @@
   pointer-events: none;
 }
 
-/* The line draws in from the node it leaves. */
-.read-map-line {
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
-  animation: read-map-line-in var(--duration-medium, 240ms) var(--ease-standard, ease-out) forwards;
-}
-
 .read-map-dot {
   fill: var(--color-text-secondary);
-  animation: read-map-in var(--duration-fast, 120ms) var(--ease-standard, ease-out) both;
-}
-
-.read-map-node {
-  animation: read-map-in var(--duration-medium, 240ms) var(--ease-standard, ease-out) both;
+  animation: map-draw-in var(--duration-fast, 120ms) var(--ease-standard, ease-out) both;
 }
 
 .read-map-foot {
@@ -34,15 +23,3 @@
   gap: 16px;
   justify-content: space-between;
 }
-
-@keyframes read-map-line-in {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes read-map-in {
-  from {
-    opacity: 0;
-  }
-}

package/ui/read-map.js

@@ -4,6 +4,7 @@ import { IconFileCode, IconFolder } from '@tabler/icons-react';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { mapCurve } from "../map-line.js";
 import { readMap } from "./lib/read-map.js";
+import { ease } from "./lib/tree-map-layout.js";
 import { AGENT_ICON, profileTypeIcon, toolTypeIcon } from "./lib/type-icons.js";
 import { MapToken, useTokenWidths } from "./map-token.js";
 import './read-map.css';
@@ -15,6 +16,8 @@ const LAG_MS = 500;
 const CATCH_UP_MS = 900;
 /** The map shows for at least this long, so a quick read can still be seen. */
 const SHOWN_MS = 2000;
+/** How long a node already drawn takes to glide to where a new folder moves it. */
+const GLIDE_MS = 240;
 /** The panel's own padding, step 4. */
 const PAD = 16;
 const ROW = 30;
@@ -127,6 +130,50 @@ function lineTo(from, fromWidth, to, dots) {
         dots: Array.from({ length: dots }, (_, index) => curve.at((index + 1) / (dots + 1))),
     };
 }
+/** Where a glide stands at a time: eased from where it was to where it goes. */
+function glideAt({ from, to, at }, now) {
+    const part = ease(Math.min(1, (now - at) / GLIDE_MS));
+    return { x: from.x + (to.x - from.x) * part, y: from.y + (to.y - from.y) * part };
+}
+/**
+ * The nodes where they stand now: a node drawn shows where it is laid out, and one a later folder
+ * moves glides there from where it stood, its lines with it, rather than jumping.
+ */
+function useGlided(placed) {
+    const glides = useRef(new Map());
+    const [now, setNow] = useState(() => performance.now());
+    useLayoutEffect(() => {
+        const at = performance.now();
+        let moving = false;
+        for (const { node, x, y } of placed) {
+            const last = glides.current.get(node.id);
+            if (last && last.to.x === x && last.to.y === y) {
+                moving ||= at - last.at < GLIDE_MS;
+                continue;
+            }
+            glides.current.set(node.id, {
+                from: last ? glideAt(last, at) : { x, y },
+                to: { x, y },
+                at: last ? at : 0,
+            });
+            moving ||= last !== undefined;
+        }
+        if (!moving)
+            return;
+        let frame = 0;
+        const tick = (time) => {
+            setNow(time);
+            if (time - at < GLIDE_MS)
+                frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frame);
+    }, [placed]);
+    return placed.map((each) => {
+        const glide = glides.current.get(each.node.id);
+        return glide ? { ...each, ...glideAt(glide, now) } : each;
+    });
+}
 export function ReadMap({ reading, onDrawn }) {
     const drawn = useDrawn(reading, onDrawn);
     const { ref, size } = useSize();
@@ -149,8 +196,9 @@ export function ReadMap({ reading, onDrawn }) {
         }));
     }, [map, size, drawn.steps]);
     const widths = useTokenWidths(ref, placed);
-    const byId = new Map(placed.map((each) => [each.node.id, each]));
-    return (_jsxs("div", { ref: ref, className: "read-map", "aria-hidden": "true", children: [_jsx("svg", { className: "read-map-lines", "aria-hidden": "true", width: size?.width ?? 0, height: size?.height ?? 0, children: placed.map((to) => {
+    const shown = useGlided(placed);
+    const byId = new Map(shown.map((each) => [each.node.id, each]));
+    return (_jsxs("div", { ref: ref, className: "read-map", "aria-hidden": "true", children: [_jsx("svg", { className: "read-map-lines", "aria-hidden": "true", width: size?.width ?? 0, height: size?.height ?? 0, children: shown.map((to) => {
                     const from = to.node.parent === undefined ? undefined : byId.get(to.node.parent);
                     const width = from && widths[from.node.id];
                     if (!from || width === undefined)
@@ -158,6 +206,6 @@ export function ReadMap({ reading, onDrawn }) {
                     const read = to.node.own.filter((step) => step < drawn.steps).length;
                     const dots = Math.ceil((Math.min(DOTS, to.node.own.length) * read) / Math.max(1, to.node.own.length));
                     const line = lineTo(from, width, to, Math.min(DOTS, to.node.own.length));
-                    return (_jsxs("g", { children: [_jsx("path", { className: "map-line read-map-line", d: line.d, pathLength: 1 }), line.dots.slice(0, dots).map(({ x, y }, index) => (_jsx("circle", { className: "read-map-dot", cx: x, cy: y, r: 2.5 }, index)))] }, to.node.id));
-                }) }), placed.map(({ node, x, y }) => (_jsx(MapToken, { className: "read-map-node", id: node.id, label: short(node.label), icon: nodeIcon(node), x: x, y: y }, node.id))), _jsxs("div", { className: "read-map-foot", children: [_jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: saying(steps, drawn.steps) }), _jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: tally(steps, drawn.steps) })] })] }));
+                    return (_jsxs("g", { children: [_jsx("path", { className: "map-line map-line-drawing", d: line.d, pathLength: 1 }), line.dots.slice(0, dots).map(({ x, y }, index) => (_jsx("circle", { className: "read-map-dot", cx: x, cy: y, r: 2.5 }, index)))] }, to.node.id));
+                }) }), shown.map(({ node, x, y }) => (_jsx(MapToken, { className: "map-token-drawing", id: node.id, label: short(node.label), icon: nodeIcon(node), x: x, y: y }, node.id))), _jsxs("div", { className: "read-map-foot", children: [_jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: saying(steps, drawn.steps) }), _jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: tally(steps, drawn.steps) })] })] }));
 }

package/ui/studio-map.js

@@ -19,7 +19,7 @@ import { TextInput } from '@astryxdesign/core/TextInput';
 import { IconArrowsMaximize, IconArrowsMinimize, IconCloud, IconCode, IconExternalLink, IconEye, IconFocus2, IconLayoutGrid, IconSearch, IconX, } from '@tabler/icons-react';
 import { useEffect, useMemo, useRef, useState, } from 'react';
 import { mapFamily, mapFound, mapLayout, mapLinkWords, mapNoteLines, workspaceMap, } from "../mod.js";
-import { IconTypeSafe, modelFamilyMark } from "./brand-icons.js";
+import { modelFamilyMark } from "./brand-icons.js";
 import { FACET_ICON } from "./lib/facet-icons.js";
 import { readKeptMap, writeKeptMap } from "./lib/studio-map-kept.js";
 import { useProject } from "./lib/studio-project.js";
@@ -53,8 +53,6 @@ function nodeIcon({ kind, type, note }) {
     if (kind === 'tool')
         return toolTypeIcon(type ?? '');
     // A model's note is its API model id, which names the family.
-    if (kind === 'model' && type === 'typesafe')
-        return IconTypeSafe;
     if (kind === 'model')
         return modelFamilyMark(note) ?? FACET_ICON.modelBinding;
     if (kind === 'provider')

package/ui/tree-map.css

@@ -16,6 +16,15 @@
   stroke: color-mix(in srgb, var(--color-border-emphasized) 60%, var(--color-background-surface));
 }
 
+/* Grown, a title over each column, and what the column is under it. */
+.studio-tree-map-heading {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 .studio-tree-map[data-draggable] {
   cursor: grab;
   touch-action: none;

package/ui/tree-map.d.ts

@@ -1,3 +1,4 @@
+import { type MapPlace } from '../map-line.ts';
 import { type StudioWorkspace } from '../mod.ts';
 import { type Box } from './lib/tree-map-layout.ts';
 export interface StudioTreeMapProps {
@@ -5,18 +6,38 @@ export interface StudioTreeMapProps {
     /** The keys of the agents to draw, in the workspace's order; every agent when unset. */
     agents?: readonly string[] | undefined;
     /**
-     * How far the tree has grown, from 0 to 1. As it grows each agent drifts into a zone of its own
-     * and what feeds the tree spreads into its columns. What growing adds draws in as its room opens,
-     * its line and then its token: the protocols under each provider, what branches off a tool, the
-     * runner's steps, and the tool runner with its checks. Shrinking takes it all back the same way.
+     * How far the tree has grown, from 0 to 1. As it grows the map grows to its size, then draws out
+     * from the tree's agents as one pen would, at an even pace: each line runs out from the node it
+     * leaves, and the node at its end shows as the line reaches it, drifting the last of the way along
+     * it. Nothing moves before the drawing comes to it: what the map shows closed glides into place
+     * once its line reaches it, its line with it, or, where something would show where it stands, sets
+     * off just before that shows and goes slower, so its line catches it as it lands.
+     * Shrinking takes it all back the same way.
      */
     grow?: number | undefined;
     /**
      * The box the map fills grown: its rows and gaps stretch to fill it, and it stands in the middle
-     * of it. When the map cannot fit, it eases smaller as it grows until all of it does.
+     * of it.
      */
     fit?: Box | undefined;
+    /**
+     * The box the map stands in now, when it changes as the map grows: closed and grown, the map
+     * stands in the middle of it, eased smaller where it would not fit. `fit` by default.
+     */
+    room?: Box | undefined;
+    /**
+     * The keys of the agents the map shows closed, when not `agents`. Growing takes away what the
+     * tree does not draw, and an agent the tree draws as an agent tool's agent glides into it.
+     */
+    still?: readonly string[] | undefined;
+    /**
+     * Where the tokens the map shows closed stand, by id, in the map's own pixels, for a map that
+     * grows out of something else: closed, the map stands at its own size from the top left of what
+     * holds it, these tokens where they are given and nothing else; growing, the tree draws out round
+     * them, and each glides to where it stands grown as the drawing comes to it. In place of `still`.
+     */
+    closed?: ReadonlyMap<string, MapPlace> | undefined;
     /** A token dragged moves to where it is dropped, its lines with it; the field dragged moves the whole map. */
     draggable?: boolean | undefined;
 }
-export declare function StudioTreeMap({ workspace, agents, grow, fit, draggable, }: StudioTreeMapProps): import("react").JSX.Element;
+export declare function StudioTreeMap({ workspace, agents, grow, fit, room, still, closed: given, draggable, }: StudioTreeMapProps): import("react").JSX.Element;