foldkit 0.90.0 → 0.90.1

package/README.md

@@ -92,26 +92,35 @@ const init: Runtime.ProgramInit<Model, Message> = () => [{ count: 0 }, []]
 
 // VIEW
 
-const { div, button, Class, OnClick } = html<Message>()
+const h = html<Message>()
 
 const view = (model: Model): Html =>
-  div(
+  h.div(
     [
-      Class(
+      h.Class(
         'min-h-screen bg-white flex flex-col items-center justify-center gap-6 p-6',
       ),
     ],
     [
-      div(
-        [Class('text-6xl font-bold text-gray-800')],
+      h.div(
+        [h.Class('text-6xl font-bold text-gray-800')],
         [model.count.toString()],
       ),
-      div(
-        [Class('flex flex-wrap justify-center gap-4')],
+      h.div(
+        [h.Class('flex flex-wrap justify-center gap-4')],
         [
-          button([OnClick(ClickedDecrement()), Class(buttonStyle)], ['-']),
-          button([OnClick(ClickedReset()), Class(buttonStyle)], ['Reset']),
-          button([OnClick(ClickedIncrement()), Class(buttonStyle)], ['+']),
+          h.button(
+            [h.OnClick(ClickedDecrement()), h.Class(buttonStyle)],
+            ['-'],
+          ),
+          h.button(
+            [h.OnClick(ClickedReset()), h.Class(buttonStyle)],
+            ['Reset'],
+          ),
+          h.button(
+            [h.OnClick(ClickedIncrement()), h.Class(buttonStyle)],
+            ['+'],
+          ),
         ],
       ),
     ],

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;;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;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-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),
@@ -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 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) => {
@@ -836,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',
@@ -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),