foldkit 0.90.0 → 0.91.0

package/dist/canvas/view.js

@@ -0,0 +1,97 @@
+import { Array, Effect, Predicate, Record, String, pipe } from 'effect';
+import { h } from 'snabbdom';
+import { Dispatch } from '../runtime/index.js';
+import { paintScene } from './paint.js';
+/**
+ * Per-element 2D context cache. Keyed by the live `<canvas>` element so the
+ * postpatch hook reads the same context the insert hook captured. `WeakMap`
+ * lets the entry be reclaimed if the element is removed.
+ */
+const contextStore = new WeakMap();
+const toCanvasPoint = (canvas, event) => {
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = rect.width === 0 ? 1 : canvas.width / rect.width;
+    const scaleY = rect.height === 0 ? 1 : canvas.height / rect.height;
+    return {
+        x: (event.clientX - rect.left) * scaleX,
+        y: (event.clientY - rect.top) * scaleY,
+    };
+};
+const classesFromClassName = (className) => pipe(className, String.split(/\s+/), Array.filter(String.isNonEmpty), Record.fromIterableWith(name => [name, true]));
+/**
+ * A virtual DOM `<canvas>` element backed by a declarative scene description.
+ * The insert hook captures the 2D context and paints the initial scene; the
+ * postpatch hook re-paints on every render. The canvas is a pure function of
+ * `shapes`. Same shapes produce the same pixels.
+ *
+ * @example
+ * ```typescript
+ * Canvas.view<Message>({
+ *   width: 400,
+ *   height: 300,
+ *   shapes: [
+ *     Canvas.Rect({ x: 0, y: 0, width: 400, height: 300, fill: '#000' }),
+ *     Canvas.Circle({ x: 200, y: 150, radius: 50, fill: '#f0a' }),
+ *   ],
+ *   onPointerDown: ({ x, y }) => ClickedCanvas({ x, y }),
+ * })
+ * ```
+ */
+export const view = (config) => Effect.gen(function* () {
+    const { dispatchSync } = yield* Dispatch;
+    const { width, height, shapes, className, onPointerDown, onPointerMove, onPointerUp, } = config;
+    const pointerListener = (toMessage) => (event) => {
+        const target = event.currentTarget;
+        if (target instanceof HTMLCanvasElement) {
+            dispatchSync(toMessage(toCanvasPoint(target, event)));
+        }
+    };
+    const listeners = {
+        ...(onPointerDown !== undefined && {
+            pointerdown: pointerListener(onPointerDown),
+        }),
+        ...(onPointerMove !== undefined && {
+            pointermove: pointerListener(onPointerMove),
+        }),
+        ...(onPointerUp !== undefined && {
+            pointerup: pointerListener(onPointerUp),
+        }),
+    };
+    const data = {
+        props: { width, height },
+        on: listeners,
+        ...(className !== undefined && {
+            class: classesFromClassName(className),
+        }),
+        hook: {
+            insert: vnode => {
+                if (!(vnode.elm instanceof HTMLCanvasElement)) {
+                    return;
+                }
+                const canvas = vnode.elm;
+                const nullableContext = canvas.getContext('2d');
+                if (Predicate.isNull(nullableContext)) {
+                    return;
+                }
+                contextStore.set(canvas, nullableContext);
+                paintScene(nullableContext, width, height, shapes);
+            },
+            postpatch: (_oldVnode, vnode) => {
+                if (!(vnode.elm instanceof HTMLCanvasElement)) {
+                    return;
+                }
+                const nullableContext = contextStore.get(vnode.elm);
+                if (nullableContext === undefined) {
+                    return;
+                }
+                paintScene(nullableContext, width, height, shapes);
+            },
+            destroy: vnode => {
+                if (vnode.elm instanceof HTMLCanvasElement) {
+                    contextStore.delete(vnode.elm);
+                }
+            },
+        },
+    };
+    return h('canvas', data);
+});

package/dist/devTools/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devTools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAa9C,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAO3E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAElB,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,YAAY,CAAA;;oFAiYJ,CAAC;;;;;;;;;;;;;AAtIhB,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAWjD,eAAO,MAAM,MAAM;;;;wBAUlB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBAYzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AAugDD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCAoDhC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devTools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAa9C,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAO3E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAElB,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,YAAY,CAAA;;oFA+XH,CAAC;;;;;;;;;;;;;AApIjB,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAWjD,eAAO,MAAM,MAAM;;;;wBAUlB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBAYzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AA2/CD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCAoDhC,CAAA"}

package/dist/devTools/overlay.js

@@ -422,34 +422,34 @@ const PANEL_POSITION_CLASS = {
     TopLeft: 'dt-panel-tl',
 };
 const makeView = (position, mode, maybeBanner) => {
-    const { div, header, span, ul, button, svg, path, keyed, Key, Class, Style, OnClick, AriaHidden, Xmlns, Fill, ViewBox, StrokeWidth, Stroke, StrokeLinecap, StrokeLinejoin, D, } = html();
+    const h = html();
     const lazyTreeNode = createKeyedLazy();
     const lazyMessageRow = createKeyedLazy();
     const lazyTabContent = createKeyedLazy();
     const lazyMessageList = createLazy();
     // JSON TREE
-    const leafValueView = (value) => M.value(value).pipe(M.when(Predicate.isNull, () => span([Class('json-null italic')], ['null'])), M.when(Predicate.isUndefined, () => span([Class('json-null italic')], ['undefined'])), M.when(Predicate.isString, stringValue => span([Class('json-string')], [`"${stringValue}"`])), M.when(Predicate.isNumber, numberValue => span([Class('json-number')], [String(numberValue)])), M.when(Predicate.isBoolean, booleanValue => span([Class('json-boolean')], [String(booleanValue)])), M.orElse(unknownValue => span([Class('json-null')], [String(unknownValue)])));
-    const keyView = (key) => span([Class('json-key')], [`${key}:\u00a0`]);
+    const leafValueView = (value) => M.value(value).pipe(M.when(Predicate.isNull, () => h.span([h.Class('json-null italic')], ['null'])), M.when(Predicate.isUndefined, () => h.span([h.Class('json-null italic')], ['undefined'])), M.when(Predicate.isString, stringValue => h.span([h.Class('json-string')], [`"${stringValue}"`])), M.when(Predicate.isNumber, numberValue => h.span([h.Class('json-number')], [String(numberValue)])), M.when(Predicate.isBoolean, booleanValue => h.span([h.Class('json-boolean')], [String(booleanValue)])), M.orElse(unknownValue => h.span([h.Class('json-null')], [String(unknownValue)])));
+    const keyView = (key) => h.span([h.Class('json-key')], [`${key}:\u00a0`]);
     const CHEVRON_RIGHT = 'M8.25 4.5l7.5 7.5-7.5 7.5';
     const CHEVRON_DOWN = 'M19.5 8.25l-7.5 7.5-7.5-7.5';
-    const arrowView = (isExpanded) => svg([
-        AriaHidden(true),
-        Class('json-arrow shrink-0'),
-        Xmlns('http://www.w3.org/2000/svg'),
-        Fill('none'),
-        ViewBox('0 0 24 24'),
-        StrokeWidth('2'),
-        Stroke('currentColor'),
+    const arrowView = (isExpanded) => h.svg([
+        h.AriaHidden(true),
+        h.Class('json-arrow shrink-0'),
+        h.Xmlns('http://www.w3.org/2000/h.svg'),
+        h.Fill('none'),
+        h.ViewBox('0 0 24 24'),
+        h.StrokeWidth('2'),
+        h.Stroke('currentColor'),
     ], [
-        path([
-            StrokeLinecap('round'),
-            StrokeLinejoin('round'),
-            D(isExpanded ? CHEVRON_DOWN : CHEVRON_RIGHT),
+        h.path([
+            h.StrokeLinecap('round'),
+            h.StrokeLinejoin('round'),
+            h.D(isExpanded ? CHEVRON_DOWN : CHEVRON_RIGHT),
         ], []),
     ]);
-    const tagLabelView = (tag) => span([Class('json-tag')], [tag]);
-    const diffDotView = span([Class('diff-dot')], []);
-    const inlineDiffDotView = span([Class('diff-dot-inline')], []);
+    const tagLabelView = (tag) => h.span([h.Class('json-tag')], [tag]);
+    const diffDotView = h.span([h.Class('diff-dot')], []);
+    const inlineDiffDotView = h.span([h.Class('diff-dot-inline')], []);
     const flattenTree = ({ value, treePath, depth, key, ...shared }) => {
         const { rootPath, expandedPaths, changedPaths, affectedPaths, accumulator, indentRootChildren, } = shared;
         const isRoot = treePath === rootPath;
@@ -492,12 +492,12 @@ const makeView = (position, mode, maybeBanner) => {
         }
     };
     const flatNodeView = (value, treePath, depth, key, nodeIsExpandable, isExpanded, isChanged, isAffected, isRoot, tag) => {
-        const indent = Style({ paddingLeft: `${depth * TREE_INDENT_PX}px` });
+        const indent = h.Style({ paddingLeft: `${depth * TREE_INDENT_PX}px` });
         const hasDiffDot = isChanged || isAffected;
         if (!nodeIsExpandable) {
-            return div([
-                Key(treePath),
-                Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', {
+            return h.div([
+                h.Key(treePath),
+                h.Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', {
                     'diff-changed': isChanged,
                 })),
                 indent,
@@ -512,20 +512,20 @@ const makeView = (position, mode, maybeBanner) => {
                 ? `(${value.length})`
                 : ''
             : collapsedPreview(value);
-        return div([
-            Key(treePath),
-            Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', {
+        return h.div([
+            h.Key(treePath),
+            h.Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', {
                 'tree-row-expandable cursor-pointer': !isRoot,
                 'diff-changed': isChanged,
             })),
             indent,
-            ...(isRoot ? [] : [OnClick(ToggledTreeNode({ path: treePath }))]),
+            ...(isRoot ? [] : [h.OnClick(ToggledTreeNode({ path: treePath }))]),
         ], [
             ...(isRoot ? [] : [arrowView(isExpanded)]),
             ...(!isRoot && hasDiffDot ? [diffDotView] : []),
             ...(String_.isNonEmpty(key) ? [keyView(key)] : []),
             ...(String_.isNonEmpty(tag) ? [tagLabelView(tag)] : []),
-            span([Class('json-preview')], [preview]),
+            h.span([h.Class('json-preview')], [preview]),
         ]);
     };
     const renderFlatNode = (node) => lazyTreeNode(node.treePath, flatNodeView, [
@@ -554,8 +554,8 @@ const makeView = (position, mode, maybeBanner) => {
             accumulator: nodes,
             indentRootChildren,
         });
-        return div([
-            Class('inspector-tree flex-1 overflow-auto min-h-0 min-w-0 overscroll-none'),
+        return h.div([
+            h.Class('inspector-tree flex-1 overflow-auto min-h-0 min-w-0 overscroll-none'),
         ], nodes.map(renderFlatNode));
     };
     const inspectedTimestamp = (model) => {
@@ -579,8 +579,8 @@ const makeView = (position, mode, maybeBanner) => {
                 : `+${remainingMs.toFixed(1)}ms`;
         }), Option.getOrElse(() => ''));
     };
-    const emptyInspectorView = div([
-        Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
+    const emptyInspectorView = h.div([
+        h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
     ], ['Click a message to inspect']);
     const INSPECTOR_TABS = [
         'Model',
@@ -588,8 +588,8 @@ const makeView = (position, mode, maybeBanner) => {
         'Commands',
         'Mounts',
     ];
-    const noMessageView = div([
-        Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
+    const noMessageView = h.div([
+        h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
     ], ['init — no Message']);
     const modelTabContent = (inspectedModel, expandedPaths, changedPaths, affectedPaths) => treeView(inspectedModel, 'root', expandedPaths, changedPaths, affectedPaths, Option.none(), true);
     const unwrapIfFiltered = (message, maybeSubmodelFilter) => {
@@ -619,11 +619,11 @@ const makeView = (position, mode, maybeBanner) => {
         onNone: () => noMessageView,
         onSome: rawMessage => {
             const message = unwrapIfFiltered(rawMessage, maybeSubmodelFilter);
-            return div([Class('flex flex-col flex-1 min-h-0 min-w-0')], [
-                div([
-                    Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
+            return h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0')], [
+                h.div([
+                    h.Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
                 ], [timestamp]),
-                div([Class('flex flex-col flex-1 min-h-0 min-w-0 pt-1 pl-1')], [
+                h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0 pt-1 pl-1')], [
                     treeView(message, 'root', expandedPaths, HashSet.empty(), HashSet.empty(), Option.none(), false),
                 ]),
             ]);
@@ -661,14 +661,14 @@ const makeView = (position, mode, maybeBanner) => {
         return nodes;
     };
     const commandsTabContent = (commands, expandedPaths) => Array_.match(commands, {
-        onEmpty: () => div([
-            Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
+        onEmpty: () => h.div([
+            h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
         ], ['No Commands returned']),
-        onNonEmpty: commandList => div([
-            Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
-        ], Array_.map(commandList, (command, index) => div([Class('flex items-start px-2 py-1 border-b gap-1.5')], [
-            span([Class(indexClass)], [String(index + 1)]),
-            div([Class('flex flex-col flex-1 min-w-0')], Array_.map(flattenCommand(command, index, expandedPaths), renderFlatNode)),
+        onNonEmpty: commandList => h.div([
+            h.Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
+        ], Array_.map(commandList, (command, index) => h.div([h.Class('flex items-start px-2 py-1 border-b gap-1.5')], [
+            h.span([h.Class(indexClass)], [String(index + 1)]),
+            h.div([h.Class('flex flex-col flex-1 min-w-0')], Array_.map(flattenCommand(command, index, expandedPaths), renderFlatNode)),
         ]))),
     });
     const selectedMountActivity = (model) => {
@@ -707,25 +707,25 @@ const makeView = (position, mode, maybeBanner) => {
         });
         return nodes;
     };
-    const mountListSection = (label, mounts, expandedPaths) => div([Class('flex flex-col shrink-0')], [
-        div([
-            Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
+    const mountListSection = (label, mounts, expandedPaths) => h.div([h.Class('flex flex-col shrink-0')], [
+        h.div([
+            h.Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
         ], [label]),
-        ...Array_.map(mounts, (mount, index) => div([Class('flex items-start px-2 py-1 border-b gap-1.5')], [
-            span([Class(indexClass)], [String(index + 1)]),
-            div([Class('flex flex-col flex-1 min-w-0')], Array_.map(flattenMount(mount, label, index, expandedPaths), renderFlatNode)),
+        ...Array_.map(mounts, (mount, index) => h.div([h.Class('flex items-start px-2 py-1 border-b gap-1.5')], [
+            h.span([h.Class(indexClass)], [String(index + 1)]),
+            h.div([h.Class('flex flex-col flex-1 min-w-0')], Array_.map(flattenMount(mount, label, index, expandedPaths), renderFlatNode)),
         ])),
     ]);
     const mountsTabContent = (starts, ends, expandedPaths) => {
         const hasAny = Array_.isReadonlyArrayNonEmpty(starts) ||
             Array_.isReadonlyArrayNonEmpty(ends);
         if (!hasAny) {
-            return div([
-                Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
+            return h.div([
+                h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
             ], ['No Mounts during this render']);
         }
-        return div([
-            Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
+        return h.div([
+            h.Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
         ], [
             ...(Array_.isReadonlyArrayNonEmpty(starts)
                 ? [mountListSection('Started', starts, expandedPaths)]
@@ -756,8 +756,8 @@ const makeView = (position, mode, maybeBanner) => {
             model.expandedPaths,
         ]);
     }), M.exhaustive);
-    const inspectorPaneView = (model) => div([
-        Class('flex flex-col border-l min-w-0 min-h-0 flex-1 dt-inspector-pane'),
+    const inspectorPaneView = (model) => h.div([
+        h.Class('flex flex-col border-l min-w-0 min-h-0 flex-1 dt-inspector-pane'),
     ], [
         Tabs.view({
             model: model.inspectorTabs,
@@ -765,14 +765,14 @@ const makeView = (position, mode, maybeBanner) => {
             tabs: INSPECTOR_TABS,
             tabListAriaLabel: 'Inspector tabs',
             persistPanels: true,
-            attributes: [Class('flex flex-col flex-1 min-h-0')],
-            tabListAttributes: [Class('flex border-b shrink-0')],
+            attributes: [h.Class('flex flex-col flex-1 min-h-0')],
+            tabListAttributes: [h.Class('flex border-b shrink-0')],
             tabToConfig: (tab, { isActive }) => ({
                 buttonAttributes: [
-                    Class(clsx('dt-tab-button cursor-pointer text-base font-mono px-3 py-1', isActive ? 'text-dt dt-tab-active' : 'text-dt-muted')),
+                    h.Class(clsx('dt-tab-button cursor-pointer text-base font-mono px-3 py-1', isActive ? 'text-dt dt-tab-active' : 'text-dt-muted')),
                 ],
-                buttonContent: span([], [tab]),
-                panelAttributes: [Class('flex flex-col flex-1 min-h-0 min-w-0')],
+                buttonContent: h.span([], [tab]),
+                panelAttributes: [h.Class('flex flex-col flex-1 min-h-0 min-w-0')],
                 panelContent: Option.match(model.maybeInspectedModel, {
                     onNone: () => emptyInspectorView,
                     onSome: inspectedModel => inspectorTabContent(model, tab, inspectedModel),
@@ -781,47 +781,47 @@ const makeView = (position, mode, maybeBanner) => {
         }),
     ]);
     // MESSAGE LIST
-    const badgeView = (model) => button([
-        Class(clsx('fixed bg-dt-bg text-dt cursor-pointer flex flex-col items-center justify-center font-mono outline-none dt-badge', BADGE_POSITION_CLASS[position], model.isPaused ? 'dt-badge-paused' : 'dt-badge-accent')),
-        Style({ width: '22px', height: '56px', fontSize: '10px' }),
-        OnClick(ClickedToggle()),
+    const badgeView = (model) => h.button([
+        h.Class(clsx('fixed bg-dt-bg text-dt cursor-pointer flex flex-col items-center justify-center font-mono outline-none dt-badge', BADGE_POSITION_CLASS[position], model.isPaused ? 'dt-badge-paused' : 'dt-badge-accent')),
+        h.Style({ width: '22px', height: '56px', fontSize: '10px' }),
+        h.OnClick(ClickedToggle()),
     ], [
         model.isOpen
-            ? svg([
-                AriaHidden(true),
-                Xmlns('http://www.w3.org/2000/svg'),
-                Fill('none'),
-                ViewBox('0 0 24 24'),
-                StrokeWidth('1.5'),
-                Stroke('currentColor'),
-                Style({ width: '12px', height: '12px' }),
+            ? h.svg([
+                h.AriaHidden(true),
+                h.Xmlns('http://www.w3.org/2000/h.svg'),
+                h.Fill('none'),
+                h.ViewBox('0 0 24 24'),
+                h.StrokeWidth('1.5'),
+                h.Stroke('currentColor'),
+                h.Style({ width: '12px', height: '12px' }),
             ], [
-                path([
-                    StrokeLinecap('round'),
-                    StrokeLinejoin('round'),
-                    D('M6 18L18 6M6 6l12 12'),
+                h.path([
+                    h.StrokeLinecap('round'),
+                    h.StrokeLinejoin('round'),
+                    h.D('M6 18L18 6M6 6l12 12'),
                 ], []),
             ])
-            : div([
-                Class(clsx('flex flex-col items-center gap-0.5 font-semibold tracking-wider leading-none', model.isPaused ? 'text-dt-bg' : 'text-dt-muted')),
-            ], [span([], ['D']), span([], ['E']), span([], ['V'])]),
+            : h.div([
+                h.Class(clsx('flex flex-col items-center gap-0.5 font-semibold tracking-wider leading-none', model.isPaused ? 'text-dt-bg' : 'text-dt-muted')),
+            ], [h.span([], ['D']), h.span([], ['E']), h.span([], ['V'])]),
     ]);
     const headerClass = 'flex items-center justify-between px-3 py-1.5 border-b shrink-0';
     const actionButtonClass = 'dt-resume-button bg-transparent border-none text-dt-live cursor-pointer text-base font-mono font-medium';
     const statusClass = 'text-base font-mono';
-    const clearHistoryButton = button([Class(headerButtonClass), OnClick(ClickedClear())], ['Clear history']);
+    const clearHistoryButton = h.button([h.Class(headerButtonClass), h.OnClick(ClickedClear())], ['Clear history']);
     const submodelLabel = (tag) => pipe(tag, String_.replace(/^Got/, ''), String_.replace(/Message$/, ''));
     const CHECK_ICON = 'M4.5 12.75l6 6 9-13.5';
-    const checkIconView = svg([
-        AriaHidden(true),
-        Class('dt-filter-check shrink-0'),
-        Xmlns('http://www.w3.org/2000/svg'),
-        Fill('none'),
-        ViewBox('0 0 24 24'),
-        StrokeWidth('2'),
-        Stroke('currentColor'),
+    const checkIconView = h.svg([
+        h.AriaHidden(true),
+        h.Class('dt-filter-check shrink-0'),
+        h.Xmlns('http://www.w3.org/2000/h.svg'),
+        h.Fill('none'),
+        h.ViewBox('0 0 24 24'),
+        h.StrokeWidth('2'),
+        h.Stroke('currentColor'),
     ], [
-        path([D(CHECK_ICON), StrokeLinecap('round'), StrokeLinejoin('round')], []),
+        h.path([h.D(CHECK_ICON), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
     ]);
     const filterItemLabel = (item) => String_.isNonEmpty(item) ? submodelLabel(item) : 'All Messages';
     const submodelFilterView = (model) => {
@@ -836,23 +836,23 @@ const makeView = (position, mode, maybeBanner) => {
             items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
             itemToConfig: item => ({
                 className: 'dt-filter-item',
-                content: div([Class('flex items-center gap-2')], [checkIconView, span([], [filterItemLabel(item)])]),
+                content: h.div([h.Class('flex items-center gap-2')], [checkIconView, h.span([], [filterItemLabel(item)])]),
             }),
-            buttonContent: span([Class('flex flex-1 items-center justify-between')], [
-                span([], [buttonLabel]),
-                svg([
-                    AriaHidden(true),
-                    Class('json-arrow shrink-0'),
-                    Xmlns('http://www.w3.org/2000/svg'),
-                    Fill('none'),
-                    ViewBox('0 0 24 24'),
-                    StrokeWidth('2'),
-                    Stroke('currentColor'),
+            buttonContent: h.span([h.Class('flex flex-1 items-center justify-between')], [
+                h.span([], [buttonLabel]),
+                h.svg([
+                    h.AriaHidden(true),
+                    h.Class('json-arrow shrink-0'),
+                    h.Xmlns('http://www.w3.org/2000/h.svg'),
+                    h.Fill('none'),
+                    h.ViewBox('0 0 24 24'),
+                    h.StrokeWidth('2'),
+                    h.Stroke('currentColor'),
                 ], [
-                    path([
-                        D(CHEVRON_DOWN),
-                        StrokeLinecap('round'),
-                        StrokeLinejoin('round'),
+                    h.path([
+                        h.D(CHEVRON_DOWN),
+                        h.StrokeLinecap('round'),
+                        h.StrokeLinejoin('round'),
                     ], []),
                 ]),
             ]),
@@ -865,60 +865,60 @@ const makeView = (position, mode, maybeBanner) => {
     const headerView = (model) => {
         const { status, maybeAction } = M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => model.isPaused
             ? {
-                status: span([Class(`${statusClass} text-dt-paused`)], [
+                status: h.span([h.Class(`${statusClass} text-dt-paused`)], [
                     model.pausedAtIndex === INIT_INDEX
                         ? 'Paused (init)'
                         : `Paused (${model.pausedAtIndex + 1})`,
                 ]),
-                maybeAction: Option.some(button([Class(actionButtonClass), OnClick(ClickedResume())], ['Resume →'])),
+                maybeAction: Option.some(h.button([h.Class(actionButtonClass), h.OnClick(ClickedResume())], ['Resume →'])),
             }
             : {
-                status: span([Class(`${statusClass} text-dt-live font-medium`)], ['Live']),
+                status: h.span([h.Class(`${statusClass} text-dt-live font-medium`)], ['Live']),
                 maybeAction: Option.none(),
             }), M.when('Inspect', () => ({
-            status: span([Class(`${statusClass} text-dt-accent`)], [
+            status: h.span([h.Class(`${statusClass} text-dt-accent`)], [
                 model.selectedIndex === INIT_INDEX
                     ? 'Inspecting (init)'
                     : `Inspecting (${model.selectedIndex + 1})`,
             ]),
-            maybeAction: OptionExt.when(!model.isFollowingLatest, button([Class(actionButtonClass), OnClick(ClickedFollowLatest())], ['Follow Latest →'])),
+            maybeAction: OptionExt.when(!model.isFollowingLatest, h.button([h.Class(actionButtonClass), h.OnClick(ClickedFollowLatest())], ['Follow Latest →'])),
         })), M.exhaustive);
-        return header([Class(headerClass)], [status, ...Option.toArray(maybeAction), clearHistoryButton]);
+        return h.header([h.Class(headerClass)], [status, ...Option.toArray(maybeAction), clearHistoryButton]);
     };
-    const initRowView = (isSelected, isPausedHere) => keyed('li')('init', [
-        Class(clsx(ROW_BASE, { selected: isSelected })),
-        OnClick(ClickedRow({ index: INIT_INDEX })),
+    const initRowView = (isSelected, isPausedHere) => h.keyed('li')('init', [
+        h.Class(clsx(ROW_BASE, { selected: isSelected })),
+        h.OnClick(ClickedRow({ index: INIT_INDEX })),
     ], [
-        ...OptionExt.when(mode === 'TimeTravel', span([Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
-        span([Class('dot-column')], []),
-        span([Class(indexClass)], []),
-        span([Class('text-base text-dt-muted font-mono')], ['init']),
+        ...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
+        h.span([h.Class('dot-column')], []),
+        h.span([h.Class(indexClass)], []),
+        h.span([h.Class('text-base text-dt-muted font-mono')], ['init']),
     ]);
-    const pauseIconView = svg([
-        AriaHidden(true),
-        Class('dt-pause-icon'),
-        Xmlns('http://www.w3.org/2000/svg'),
-        Fill('none'),
-        ViewBox('0 0 24 24'),
-        StrokeWidth('2.5'),
-        Stroke('currentColor'),
+    const pauseIconView = h.svg([
+        h.AriaHidden(true),
+        h.Class('dt-pause-icon'),
+        h.Xmlns('http://www.w3.org/2000/h.svg'),
+        h.Fill('none'),
+        h.ViewBox('0 0 24 24'),
+        h.StrokeWidth('2.5'),
+        h.Stroke('currentColor'),
     ], [
-        path([
-            StrokeLinecap('round'),
-            StrokeLinejoin('round'),
-            D('M5.75 3v18M18.25 3v18'),
+        h.path([
+            h.StrokeLinecap('round'),
+            h.StrokeLinejoin('round'),
+            h.D('M5.75 3v18M18.25 3v18'),
         ], []),
     ]);
-    const messageRowView = (tag, absoluteIndex, isSelected, isPausedHere, timeDelta, isModelChanged) => keyed('li')(String(absoluteIndex), [
-        Class(clsx(ROW_BASE, { selected: isSelected })),
-        OnClick(ClickedRow({ index: absoluteIndex })),
+    const messageRowView = (tag, absoluteIndex, isSelected, isPausedHere, timeDelta, isModelChanged) => h.keyed('li')(String(absoluteIndex), [
+        h.Class(clsx(ROW_BASE, { selected: isSelected })),
+        h.OnClick(ClickedRow({ index: absoluteIndex })),
     ], [
-        ...OptionExt.when(mode === 'TimeTravel', span([Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
-        span([Class('dot-column')], isModelChanged ? [inlineDiffDotView] : []),
-        span([Class(indexClass)], [String(absoluteIndex + 1)]),
-        span([Class('text-base text-dt font-mono flex-1 truncate')], [tag]),
-        span([
-            Class('text-2xs text-dt-muted font-mono shrink-0 text-right min-w-5'),
+        ...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
+        h.span([h.Class('dot-column')], isModelChanged ? [inlineDiffDotView] : []),
+        h.span([h.Class(indexClass)], [String(absoluteIndex + 1)]),
+        h.span([h.Class('text-base text-dt font-mono flex-1 truncate')], [tag]),
+        h.span([
+            h.Class('text-2xs text-dt-muted font-mono shrink-0 text-right min-w-5'),
         ], [formatTimeDelta(timeDelta)]),
     ]);
     const messageListBody = (entries, startIndex, selectedIndex, isPaused, pausedAtIndex, maybeFilterTag) => {
@@ -949,7 +949,7 @@ const makeView = (position, mode, maybeBanner) => {
                 entry.isModelChanged,
             ]);
         }), Array_.reverse);
-        return ul([Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none')], isFiltered
+        return h.ul([h.Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none')], isFiltered
             ? messageRows
             : [
                 ...messageRows,
@@ -972,15 +972,15 @@ const makeView = (position, mode, maybeBanner) => {
         ]);
     };
     // PANEL
-    const panelView = (model) => keyed('div')('dt-panel', [
-        Class(clsx('fixed dt-panel dt-panel-wide bg-dt-bg border rounded-lg flex flex-col overflow-hidden font-mono text-dt', PANEL_POSITION_CLASS[position])),
+    const panelView = (model) => h.keyed('div')('dt-panel', [
+        h.Class(clsx('fixed dt-panel dt-panel-wide bg-dt-bg border rounded-lg flex flex-col overflow-hidden font-mono text-dt', PANEL_POSITION_CLASS[position])),
     ], [
-        ...Option.map(maybeBanner, banner => div([
-            Class('px-3 py-2 border-b text-sm text-dt-muted font-mono shrink-0 leading-snug'),
+        ...Option.map(maybeBanner, banner => h.div([
+            h.Class('px-3 py-2 border-b text-sm text-dt-muted font-mono shrink-0 leading-snug'),
         ], [banner])).pipe(Option.toArray),
         headerView(model),
-        div([Class('flex flex-1 min-h-0 dt-content')], [
-            div([Class('flex flex-col min-h-0 dt-message-pane')], [
+        h.div([h.Class('flex flex-1 min-h-0 dt-content')], [
+            h.div([h.Class('flex flex-col min-h-0 dt-message-pane')], [
                 ...Array_.match(model.submodelTags, {
                     onEmpty: () => [],
                     onNonEmpty: () => [submodelFilterView(model)],
@@ -990,10 +990,10 @@ const makeView = (position, mode, maybeBanner) => {
             inspectorPaneView(model),
         ]),
     ]);
-    const interactionBlocker = div([Class('dt-interaction-blocker')], []);
+    const interactionBlocker = h.div([h.Class('dt-interaction-blocker')], []);
     return (model) => ({
         title: 'Foldkit DevTools',
-        body: div([], [
+        body: h.div([], [
             ...OptionExt.when(model.isPaused && mode === 'TimeTravel', interactionBlocker).pipe(Option.toArray),
             ...OptionExt.when(model.isOpen, panelView(model)).pipe(Option.toArray),
             badgeView(model),

package/dist/devTools/store.d.ts

@@ -38,7 +38,7 @@ export type StoreState = Readonly<{
 export type Bridge = Readonly<{
     replay: (model: unknown, message: unknown) => unknown;
     render: (model: unknown) => Effect.Effect<void>;
-    getCurrentModel: Effect.Effect<unknown>;
+    markRenderPending: Effect.Effect<void>;
 }>;
 export declare const createDevToolsStore: (bridge: Bridge, maxEntries?: number) => Effect.Effect<DevToolsStore>;
 export type DevToolsStore = Readonly<{

package/dist/devTools/store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/devTools/store.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/devTools/store.ts"],"names":[],"mappings":"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"}

package/dist/devTools/store.js

@@ -187,12 +187,11 @@ export const createDevToolsStore = (bridge, maxEntries = DEFAULT_MAX_ENTRIES) =>
         });
     });
     const resume = Effect.gen(function* () {
-        const currentModel = yield* bridge.getCurrentModel;
-        yield* bridge.render(currentModel);
         yield* SubscriptionRef.update(stateRef, state => ({
             ...state,
             isPaused: false,
         }));
+        yield* bridge.markRenderPending;
     });
     const clear = SubscriptionRef.update(stateRef, state => ({
         ...emptyState,