foldkit 0.89.0 → 0.90.1

package/dist/devTools/overlay.js

@@ -3,7 +3,7 @@ import { Array as Array_, Context, Effect, Equal, Function, HashSet, Match as M,
 import * as Command from '../command/index.js';
 import { lockScroll, unlockScroll } from '../dom/scrollLock.js';
 import { OptionExt } from '../effectExtensions/index.js';
-import { createKeyedLazy, createLazy, html, } from '../html/index.js';
+import { DEVTOOLS_HOST_ID, createKeyedLazy, createLazy, html, } from '../html/index.js';
 import { m } from '../message/index.js';
 import { makeProgram } from '../runtime/runtime.js';
 import { makeSubscriptions } from '../runtime/subscription.js';
@@ -19,13 +19,17 @@ const DisplayCommand = S.Struct({
     name: S.String,
     args: S.Option(S.Record(S.String, S.Unknown)),
 });
+const DisplayMount = S.Struct({
+    name: S.String,
+    args: S.Option(S.Record(S.String, S.Unknown)),
+});
 const DisplayEntry = S.Struct({
     tag: S.String,
     submodelPath: S.Array(S.String),
     maybeLeafTag: S.Option(S.String),
     commands: S.Array(DisplayCommand),
-    mountStartNames: S.Array(S.String),
-    mountEndNames: S.Array(S.String),
+    mountStarts: S.Array(DisplayMount),
+    mountEnds: S.Array(DisplayMount),
     timestamp: S.Number,
     isModelChanged: S.Boolean,
 });
@@ -54,7 +58,7 @@ const Model = S.Struct({
     isMobile: S.Boolean,
     entries: S.Array(DisplayEntry),
     initCommands: S.Array(DisplayCommand),
-    initMountStartNames: S.Array(S.String),
+    initMountStarts: S.Array(DisplayMount),
     startIndex: S.Number,
     isPaused: S.Boolean,
     pausedAtIndex: S.Number,
@@ -74,7 +78,7 @@ const Flags = S.Struct({
     isMobile: S.Boolean,
     entries: S.Array(DisplayEntry),
     initCommands: S.Array(DisplayCommand),
-    initMountStartNames: S.Array(S.String),
+    initMountStarts: S.Array(DisplayMount),
     startIndex: S.Number,
     isPaused: S.Boolean,
     pausedAtIndex: S.Number,
@@ -107,7 +111,7 @@ const GotInspectorTabsMessage = m('GotInspectorTabsMessage', {
 const ReceivedStoreUpdate = m('ReceivedStoreUpdate', {
     entries: S.Array(DisplayEntry),
     initCommands: S.Array(DisplayCommand),
-    initMountStartNames: S.Array(S.String),
+    initMountStarts: S.Array(DisplayMount),
     startIndex: S.Number,
     isPaused: S.Boolean,
     pausedAtIndex: S.Number,
@@ -154,6 +158,10 @@ const toDisplayCommand = (command) => ({
     name: command.name,
     args: Option.fromNullishOr(command.args),
 });
+const toDisplayMount = (mount) => ({
+    name: mount.name,
+    args: Option.fromNullishOr(mount.args),
+});
 const toDisplayEntries = ({ entries }) => Array_.map(entries, entry => {
     const { submodelPath, maybeLeafTag } = extractSubmodelInfo(entry.tag, entry.message);
     return {
@@ -161,8 +169,8 @@ const toDisplayEntries = ({ entries }) => Array_.map(entries, entry => {
         submodelPath,
         maybeLeafTag,
         commands: Array_.map(entry.commands, toDisplayCommand),
-        mountStartNames: entry.mountStartNames,
-        mountEndNames: entry.mountEndNames,
+        mountStarts: Array_.map(entry.mountStarts, toDisplayMount),
+        mountEnds: Array_.map(entry.mountEnds, toDisplayMount),
         timestamp: entry.timestamp,
         isModelChanged: entry.isModelChanged,
     };
@@ -170,7 +178,7 @@ const toDisplayEntries = ({ entries }) => Array_.map(entries, entry => {
 const toDisplayState = (state) => ({
     entries: toDisplayEntries(state),
     initCommands: Array_.map(state.initCommands, toDisplayCommand),
-    initMountStartNames: state.initMountStartNames,
+    initMountStarts: Array_.map(state.initMountStarts, toDisplayMount),
     startIndex: state.startIndex,
     isPaused: state.isPaused,
     pausedAtIndex: state.pausedAtIndex,
@@ -326,7 +334,7 @@ const makeUpdate = (store, shadow, mode) => {
             }),
             [],
         ],
-        ReceivedStoreUpdate: ({ entries, initCommands, initMountStartNames, startIndex, isPaused, pausedAtIndex, }) => {
+        ReceivedStoreUpdate: ({ entries, initCommands, initMountStarts, startIndex, isPaused, pausedAtIndex, }) => {
             const shouldFollowLatest = M.value(mode).pipe(M.when('TimeTravel', () => !isPaused), M.when('Inspect', () => model.isFollowingLatest), M.exhaustive);
             const latestIndex = Array_.match(entries, {
                 onEmpty: () => INIT_INDEX,
@@ -338,7 +346,7 @@ const makeUpdate = (store, shadow, mode) => {
                 evo(model, {
                     entries: () => entries,
                     initCommands: () => initCommands,
-                    initMountStartNames: () => initMountStartNames,
+                    initMountStarts: () => initMountStarts,
                     startIndex: () => startIndex,
                     isPaused: () => isPaused,
                     pausedAtIndex: () => pausedAtIndex,
@@ -414,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;
@@ -484,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,
@@ -504,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, [
@@ -546,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) => {
@@ -571,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',
@@ -580,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) => {
@@ -611,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),
                 ]),
             ]);
@@ -653,58 +661,77 @@ 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) => {
         const selectedIndex = selectedHistoryIndex(model);
         if (selectedIndex === INIT_INDEX) {
-            return { starts: model.initMountStartNames, ends: NO_MOUNTS };
+            return { starts: model.initMountStarts, ends: NO_MOUNTS };
         }
         else {
             return pipe(model.entries, Array_.get(selectedIndex - model.startIndex), Option.match({
                 onNone: () => ({ starts: NO_MOUNTS, ends: NO_MOUNTS }),
                 onSome: entry => ({
-                    starts: entry.mountStartNames,
-                    ends: entry.mountEndNames,
+                    starts: entry.mountStarts,
+                    ends: entry.mountEnds,
                 }),
             }));
         }
     };
-    const mountListSection = (label, names) => 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 flattenMount = (mount, sectionLabel, index, expandedPaths) => {
+        const taggedValue = Option.match(mount.args, {
+            onNone: () => ({ _tag: mount.name }),
+            onSome: argsValue => ({ ...argsValue, _tag: mount.name }),
+        });
+        const rootPath = `mount-${sectionLabel}-${index}`;
+        const nodes = [];
+        flattenTree({
+            value: toInspectableValue(taggedValue),
+            treePath: rootPath,
+            rootPath,
+            expandedPaths,
+            changedPaths: HashSet.empty(),
+            affectedPaths: HashSet.empty(),
+            depth: 0,
+            key: '',
+            accumulator: nodes,
+            indentRootChildren: false,
+        });
+        return nodes;
+    };
+    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(names, (name, index) => div([
-            Class('flex items-center px-2 py-1 text-base font-mono text-dt border-b gap-1.5'),
-        ], [
-            span([Class(indexClass)], [String(index + 1)]),
-            span([Class('json-tag')], [name]),
+        ...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) => {
+    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)]
+                ? [mountListSection('Started', starts, expandedPaths)]
                 : []),
             ...(Array_.isReadonlyArrayNonEmpty(ends)
-                ? [mountListSection('Ended', ends)]
+                ? [mountListSection('Ended', ends, expandedPaths)]
                 : []),
         ]);
     };
@@ -723,10 +750,14 @@ const makeView = (position, mode, maybeBanner) => {
         model.expandedPaths,
     ])), M.when('Mounts', () => {
         const { starts, ends } = selectedMountActivity(model);
-        return lazyTabContent('Mounts', mountsTabContent, [starts, ends]);
+        return lazyTabContent('Mounts', mountsTabContent, [
+            starts,
+            ends,
+            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,
@@ -734,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-h.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),
@@ -750,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 actionButtonClass = 'dt-resume-h.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) => {
@@ -805,27 +836,27 @@ 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'),
                     ], []),
                 ]),
             ]),
-            buttonClassName: 'dt-filter-button',
+            buttonClassName: 'dt-filter-h.button',
             itemsClassName: 'dt-filter-items',
             className: 'dt-filter-wrapper',
             backdropClassName: 'dt-filter-backdrop',
@@ -834,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) => {
@@ -918,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,
@@ -941,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)],
@@ -959,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),
@@ -970,7 +1001,6 @@ const makeView = (position, mode, maybeBanner) => {
     });
 };
 // CREATE
-const DEVTOOLS_HOST_ID = 'foldkit-devtools';
 const createShadowContainer = () => {
     const existingHost = document.getElementById(DEVTOOLS_HOST_ID);
     if (existingHost) {
@@ -978,6 +1008,14 @@ const createShadowContainer = () => {
     }
     const host = document.createElement('div');
     host.id = DEVTOOLS_HOST_ID;
+    host.addEventListener('pointerdown', event => {
+        const activeElement = document.activeElement;
+        if (activeElement !== null &&
+            activeElement !== host &&
+            activeElement !== document.body) {
+            event.preventDefault();
+        }
+    }, { capture: true });
     document.body.appendChild(host);
     const shadow = host.attachShadow({ mode: 'open' });
     const styleElement = document.createElement('style');