@theoremjs/studio 0.3.4-next.456.gff60088 → 0.3.4-next.458.gbf7b487

package/ui/tree-map.css

@@ -13,3 +13,46 @@
 .studio-tree-map-lines .map-line {
   stroke: color-mix(in srgb, var(--color-border-emphasized) 60%, var(--color-background-surface));
 }
+
+/*
+ * Feeds draw in as the loader's map draws (read-map.css), one after another: the line from the
+ * tree, then the token at its end. Hidden, they leave in the reverse order.
+ * invariant: Transitions, not keyframes, so drawing and leaving both ease, and a turn mid-draw
+ * goes back from where it is.
+ */
+.studio-tree-map {
+  --feed-step: 70ms;
+}
+
+.studio-tree-map-lines [data-feed] {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+  transition: stroke-dashoffset var(--duration-medium, 240ms) var(--ease-standard, ease-out)
+    calc(var(--feed-i) * var(--feed-step));
+}
+
+.studio-tree-map > [data-feed] {
+  transition: opacity var(--duration-medium, 240ms) var(--ease-standard, ease-out)
+    calc(var(--feed-i) * var(--feed-step) + var(--duration-medium, 240ms));
+}
+
+.studio-tree-map[data-feeds="hidden"] > [data-feed] {
+  opacity: 0;
+  transition-delay: calc((var(--feed-n) - var(--feed-i)) * var(--feed-step));
+}
+
+.studio-tree-map[data-feeds="hidden"] .studio-tree-map-lines [data-feed] {
+  stroke-dashoffset: var(--feed-from);
+  transition-delay: calc(
+    (var(--feed-n) - var(--feed-i)) *
+    var(--feed-step) +
+    var(--duration-medium, 240ms)
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .studio-tree-map-lines [data-feed],
+  .studio-tree-map > [data-feed] {
+    transition: none;
+  }
+}

package/ui/tree-map.d.ts

@@ -3,5 +3,11 @@ export interface StudioTreeMapProps {
     workspace: StudioWorkspace;
     /** The keys of the agents to draw, in the workspace's order; every agent when unset. */
     agents?: readonly string[] | undefined;
+    /**
+     * Whether what feeds the tree is drawn beside it. Turned on, each feed draws in after the one
+     * before, its line from the tree first, as the loader's map draws; turned off, they leave in the
+     * reverse order. Shown when unset.
+     */
+    feeds?: 'shown' | 'hidden' | undefined;
 }
-export declare function StudioTreeMap({ workspace, agents }: StudioTreeMapProps): import("react").JSX.Element;
+export declare function StudioTreeMap({ workspace, agents, feeds: shown }: StudioTreeMapProps): import("react").JSX.Element;

package/ui/tree-map.js

@@ -142,7 +142,9 @@ function linePath(from, to) {
     const x = from.x + TRUNK;
     return `M ${x} ${from.y + HALF} V ${to.y - TURN} Q ${x} ${to.y} ${x + TURN} ${to.y} H ${to.x - LINE_GAP}`;
 }
-export function StudioTreeMap({ workspace, agents }) {
+/** The order a feed draws in, and which end its line starts from: 1 the path's start, -1 its end. */
+const feedStyle = (index, from = 1) => ({ '--feed-i': index, '--feed-from': from });
+export function StudioTreeMap({ workspace, agents, feeds: shown = 'shown' }) {
     const root = useRef(null);
     const rows = rowsOf(workspace, agents);
     const feeds = feedsOf(workspace, rows);
@@ -166,12 +168,14 @@ export function StudioTreeMap({ workspace, agents }) {
         return above && feed.depth <= above.depth ? [railFor(feed, above)] : [];
     });
     const width = Math.max(GUESS, ...feeds.map(feedRight), ...rails) + PAD;
-    return (_jsxs("div", { ref: root, className: "studio-tree-map", style: { width, height }, children: [_jsxs("svg", { className: "studio-tree-map-lines", width: width, height: height, "aria-hidden": "true", children: [rows.map((row) => row.parent && (_jsx("path", { className: "map-line", d: linePath(row.parent, row) }, rowId(row)))), feeds.flatMap((feed) => feed.into.map((id) => {
+    const order = new Map(feeds.map((feed, index) => [feed.id, index]));
+    return (_jsxs("div", { ref: root, className: "studio-tree-map", "data-feeds": shown, style: { width, height, '--feed-n': feeds.length }, children: [_jsxs("svg", { className: "studio-tree-map-lines", width: width, height: height, "aria-hidden": "true", children: [rows.map((row) => row.parent && (_jsx("path", { className: "map-line", d: linePath(row.parent, row) }, rowId(row)))), feeds.flatMap((feed) => feed.into.map((id) => {
                         const row = byId.get(id);
                         if (!row)
                             return null;
                         const { d } = mapCurve({ x: feedX - LINE_GAP, y: feed.y }, { x: right(row) + LINE_GAP, y: row.y });
-                        return _jsx("path", { className: "map-line", d: d }, `${feed.id}>${id}`);
+                        // The line runs from the feed to the row; it draws from the row.
+                        return (_jsx("path", { className: "map-line", d: d, pathLength: 1, "data-feed": "", style: feedStyle(order.get(feed.id) ?? 0, -1) }, `${feed.id}>${id}`));
                     })), feeds.map((feed) => {
                         const above = feed.under === undefined ? undefined : feedById.get(feed.under);
                         if (above === undefined)
@@ -182,9 +186,10 @@ export function StudioTreeMap({ workspace, agents }) {
                         const d = feed.depth > above.depth
                             ? linePath(from, { x: feedLeft(feed), y: feed.y })
                             : sidePath({ x: feedRight(feed) + LINE_GAP, y: feed.y }, { x: feedRight(above) + LINE_GAP, y: above.y }, railFor(feed, above));
-                        return _jsx("path", { className: "map-line", d: d }, `${feed.id}^`);
+                        // A turn in runs from the feed above; a line round the side runs from this one.
+                        return (_jsx("path", { className: "map-line", d: d, pathLength: 1, "data-feed": "", style: feedStyle(order.get(feed.id) ?? 0, feed.depth > above.depth ? 1 : -1) }, `${feed.id}^`));
                     })] }), rows.map((row) => {
                 const draft = drafts.get(row.agent) ?? createBlankDraft();
                 return (_jsx(MapToken, { id: rowId(row), label: row.node.label, icon: nodeIcon(draft, row.node.ref), x: row.x, y: row.y }, rowId(row)));
-            }), feeds.map((feed) => (_jsx(MapToken, { id: feed.id, label: feed.label, icon: feed.icon, x: feedLeft(feed), y: feed.y }, feed.id)))] }));
+            }), feeds.map((feed) => (_jsx(MapToken, { id: feed.id, label: feed.label, icon: feed.icon, x: feedLeft(feed), y: feed.y, "data-feed": "", style: feedStyle(order.get(feed.id) ?? 0) }, feed.id)))] }));
 }