foldkit 0.100.1 → 0.102.0

package/dist/devTools/overlay.js

@@ -3,10 +3,10 @@ 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 { DEVTOOLS_HOST_ID, createKeyedLazy, createLazy, html, } from '../html/index.js';
+import { DEVTOOLS_HOST_ID, childAttributes, 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';
+import * as Subscription from '../runtime/subscription.js';
 import { evo } from '../struct/index.js';
 import * as Listbox from '../ui/listbox/public.js';
 import * as Slider from '../ui/slider/public.js';
@@ -15,6 +15,7 @@ import { overlayStyles } from './overlay-styles.js';
 import { toInspectableValue } from './serialize.js';
 import { INIT_INDEX, } from './store.js';
 import { GOT_MESSAGE_PATTERN, extractSubmodelInfo, isTagged, } from './submodelPath.js';
+const SubmodelFilterListbox = Listbox.create();
 // MODEL
 const DisplayCommand = S.Struct({
     name: S.String,
@@ -43,6 +44,13 @@ const InspectorTabsModel = S.Struct({
     focusedIndex: S.Number,
     activationMode: S.Literals(['Automatic', 'Manual']),
 });
+const INSPECTOR_TABS = [
+    'Model',
+    'Message',
+    'Commands',
+    'Mounts',
+];
+const InspectorTabs = Tabs.create();
 /**
  * `S.Unknown` whose equivalence is reference equality. Effect 4's default
  * equivalence for `S.Unknown` is `Equal.equals`, which walks the value
@@ -133,9 +141,6 @@ const ReceivedStoreUpdate = m('ReceivedStoreUpdate', {
 const GotSubmodelFilterMessage = m('GotSubmodelFilterMessage', {
     message: Listbox.Message,
 });
-const SelectedSubmodelFilter = m('SelectedSubmodelFilter', {
-    tag: S.String,
-});
 // NOTE: suspend for the same init-order reason as scrubberSlider above.
 const GotScrubberSliderMessage = m('GotScrubberSliderMessage', {
     message: S.suspend(() => Slider.Message),
@@ -160,7 +165,6 @@ const Message = S.Union([
     GotInspectorTabsMessage,
     ReceivedStoreUpdate,
     GotSubmodelFilterMessage,
-    SelectedSubmodelFilter,
     GotScrubberSliderMessage,
 ]);
 // HELPERS
@@ -224,7 +228,6 @@ const objectPreview = (value) => pipe(value, Record.keys, Array_.filter(key => k
     },
 }));
 const collapsedPreview = (value) => M.value(value).pipe(M.when(Array.isArray, array => `(${array.length})`), M.when(Predicate.isObject, objectPreview), M.orElse(() => ''));
-// UPDATE
 class StoreService extends Context.Service()('foldkit/DevToolsStore') {
 }
 class ShadowRootService extends Context.Service()('foldkit/DevToolsShadowRoot') {
@@ -361,14 +364,14 @@ const makeUpdate = (store, shadow, mode) => {
             [],
         ],
         GotInspectorTabsMessage: ({ message: tabsMessage }) => {
-            const [nextTabsModel, tabsCommands] = Tabs.update(model.inspectorTabs, 
+            const [nextTabsModel, tabsCommands] = InspectorTabs.update(model.inspectorTabs, 
             /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
             tabsMessage);
             return [
                 evo(model, {
                     inspectorTabs: () => nextTabsModel,
                 }),
-                tabsCommands.map(Command.mapEffect(Effect.map(innerMessage => GotInspectorTabsMessage({ message: innerMessage })))),
+                Command.mapMessages(tabsCommands, innerMessage => GotInspectorTabsMessage({ message: innerMessage })),
             ];
         },
         ToggledTreeNode: ({ path }) => [
@@ -409,7 +412,7 @@ const makeUpdate = (store, shadow, mode) => {
                         const targetSliderValue = isPaused
                             ? hostIndexToSliderValue(pausedAtIndex, startIndex)
                             : sliderMax;
-                        return Slider.setValue(Slider.setRange(current, { min: 0, max: sliderMax }), targetSliderValue);
+                        return Slider.reflectValue(Slider.reflectRange(current, { min: 0, max: sliderMax }), targetSliderValue);
                     },
                 }),
                 [
@@ -419,27 +422,27 @@ const makeUpdate = (store, shadow, mode) => {
             ];
         },
         GotSubmodelFilterMessage: ({ message: listboxMessage }) => {
-            const [nextListboxModel, listboxCommands] = Listbox.update(model.submodelFilterListbox, listboxMessage);
-            return [
-                evo(model, {
-                    submodelFilterListbox: () => nextListboxModel,
-                }),
-                listboxCommands.map(Command.mapEffect(Effect.map(innerMessage => GotSubmodelFilterMessage({ message: innerMessage })))),
-            ];
-        },
-        SelectedSubmodelFilter: ({ tag }) => {
-            const [nextListbox, listboxCommands] = Listbox.selectItem(model.submodelFilterListbox, tag);
-            return [
-                evo(model, {
-                    maybeSubmodelFilter: () => Option.liftPredicate(tag, String_.isNonEmpty),
-                    submodelFilterListbox: () => nextListbox,
-                }),
-                listboxCommands.map(Command.mapEffect(Effect.map(innerMessage => GotSubmodelFilterMessage({ message: innerMessage })))),
-            ];
+            const [nextListboxModel, listboxCommands, maybeOutMessage] = SubmodelFilterListbox.update(model.submodelFilterListbox, listboxMessage);
+            const mappedCommands = Command.mapMessages(listboxCommands, innerMessage => GotSubmodelFilterMessage({ message: innerMessage }));
+            return Option.match(maybeOutMessage, {
+                onNone: () => [
+                    evo(model, { submodelFilterListbox: () => nextListboxModel }),
+                    mappedCommands,
+                ],
+                onSome: M.type().pipe(M.withReturnType(), M.tagsExhaustive({
+                    Selected: ({ value }) => [
+                        evo(model, {
+                            maybeSubmodelFilter: () => Option.liftPredicate(value, String_.isNonEmpty),
+                            submodelFilterListbox: () => nextListboxModel,
+                        }),
+                        mappedCommands,
+                    ],
+                })),
+            });
         },
         GotScrubberSliderMessage: ({ message: sliderMessage }) => {
             const [nextSlider, sliderCommands, maybeOutMessage] = Slider.update(model.scrubberSlider, sliderMessage);
-            const mappedSliderCommands = sliderCommands.map(Command.mapEffect(Effect.map(innerMessage => GotScrubberSliderMessage({ message: innerMessage }))));
+            const mappedSliderCommands = Command.mapMessages(sliderCommands, innerMessage => GotScrubberSliderMessage({ message: innerMessage }));
             const additionalCommands = Option.match(maybeOutMessage, {
                 onNone: () => [],
                 onSome: outMessage => M.value(outMessage).pipe(M.tagsExhaustive({
@@ -457,47 +460,27 @@ const makeUpdate = (store, shadow, mode) => {
     }), M.tag('CompletedJump', 'CompletedResume', 'CompletedClear', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => [model, []]), M.exhaustive);
 };
 // SUBSCRIPTION
-const ScrubberDragActivity = S.Literals(['Idle', 'Active']);
-const SubscriptionDependencies = S.Struct({
-    storeUpdates: S.Boolean,
-    mobileBreakpoint: S.Null,
-    scrubberPointer: S.Struct({
-        dragActivity: ScrubberDragActivity,
-        id: S.String,
-        min: S.Number,
-        max: S.Number,
-    }),
-    scrubberEscape: S.Struct({
-        dragActivity: ScrubberDragActivity,
-    }),
-});
 const makeOverlaySubscriptions = (store, shadow) => {
     const sliderSubscriptions = Slider.subscriptionsForRoot(() => shadow);
-    return makeSubscriptions(SubscriptionDependencies)({
-        storeUpdates: {
-            modelToDependencies: () => true,
-            dependenciesToStream: () => Stream.concat(Stream.fromEffect(SubscriptionRef.get(store.stateRef).pipe(Effect.map(state => ReceivedStoreUpdate(toDisplayState(state))))), Stream.map(SubscriptionRef.changes(store.stateRef), state => ReceivedStoreUpdate(toDisplayState(state)))),
-        },
-        mobileBreakpoint: {
-            modelToDependencies: () => null,
-            dependenciesToStream: () => Stream.callback(queue => Effect.acquireRelease(Effect.sync(() => {
-                const mediaQuery = window.matchMedia(MOBILE_BREAKPOINT_QUERY);
-                const handler = (event) => {
-                    Queue.offerUnsafe(queue, CrossedMobileBreakpoint({ isMobile: event.matches }));
-                };
-                mediaQuery.addEventListener('change', handler);
-                return { mediaQuery, handler };
-            }), ({ mediaQuery, handler }) => Effect.sync(() => mediaQuery.removeEventListener('change', handler))).pipe(Effect.flatMap(() => Effect.never))),
-        },
-        scrubberPointer: {
-            modelToDependencies: model => sliderSubscriptions.dragPointer.modelToDependencies(model.scrubberSlider),
-            dependenciesToStream: (deps, readDeps) => Stream.map(sliderSubscriptions.dragPointer.dependenciesToStream(deps, readDeps), message => GotScrubberSliderMessage({ message })),
-        },
-        scrubberEscape: {
-            modelToDependencies: model => sliderSubscriptions.dragEscape.modelToDependencies(model.scrubberSlider),
-            dependenciesToStream: (deps, readDeps) => Stream.map(sliderSubscriptions.dragEscape.dependenciesToStream(deps, readDeps), message => GotScrubberSliderMessage({ message })),
-        },
+    const scrubberSubscriptions = Subscription.lift({
+        scrubberPointer: sliderSubscriptions.dragPointer,
+        scrubberEscape: sliderSubscriptions.dragEscape,
+    })({
+        toChildModel: model => model.scrubberSlider,
+        toParentMessage: message => GotScrubberSliderMessage({ message }),
     });
+    const ownSubscriptions = Subscription.make()(_entry => ({
+        storeUpdates: Subscription.persistent(Stream.concat(Stream.fromEffect(SubscriptionRef.get(store.stateRef).pipe(Effect.map(state => ReceivedStoreUpdate(toDisplayState(state))))), Stream.map(SubscriptionRef.changes(store.stateRef), state => ReceivedStoreUpdate(toDisplayState(state))))),
+        mobileBreakpoint: Subscription.persistent(Stream.callback(queue => Effect.acquireRelease(Effect.sync(() => {
+            const mediaQuery = window.matchMedia(MOBILE_BREAKPOINT_QUERY);
+            const handler = (event) => {
+                Queue.offerUnsafe(queue, CrossedMobileBreakpoint({ isMobile: event.matches }));
+            };
+            mediaQuery.addEventListener('change', handler);
+            return { mediaQuery, handler };
+        }), ({ mediaQuery, handler }) => Effect.sync(() => mediaQuery.removeEventListener('change', handler))).pipe(Effect.flatMap(() => Effect.never)))),
+    }));
+    return Subscription.aggregate()(ownSubscriptions, scrubberSubscriptions);
 };
 // VIEW
 const indexClass = 'text-2xs text-dt-muted font-mono min-w-5';
@@ -522,14 +505,23 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     const lazyTabContent = createKeyedLazy();
     const lazyMessageList = createLazy();
     // JSON TREE
-    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 leafValueView = (value) => M.value(value).pipe(M.when(Predicate.isNull, () => h.span([h.Key('value'), h.Class('json-null italic')], ['null'])), M.when(Predicate.isUndefined, () => h.span([h.Key('value'), h.Class('json-null italic')], ['undefined'])), M.when(Predicate.isString, stringValue => h.span([h.Key('value'), h.Class('json-string')], [`"${stringValue}"`])), M.when(Predicate.isNumber, numberValue => h.span([h.Key('value'), h.Class('json-number')], [String(numberValue)])), M.when(Predicate.isBoolean, booleanValue => h.span([h.Key('value'), h.Class('json-boolean')], [String(booleanValue)])), M.orElse(unknownValue => h.span([h.Key('value'), h.Class('json-null')], [String(unknownValue)])));
+    // NOTE: each row-child view declares an explicit key. snabbdom's
+    // `sameVnode` only checks `key + sel`, and foldkit element vnodes carry
+    // `sel = tagName` with classes stored in `data.class`. Without per-role
+    // keys, two unkeyed spans with different classes (e.g. `.json-key` and
+    // `.diff-dot`) are sameVnode to snabbdom, so a single DOM span gets
+    // recycled across roles as rows transition shape \u2014 and the text-node
+    // children from the old role can leak into the new role's element.
+    // Keying by role pins each slot to its own DOM element.
+    const keyView = (key) => h.span([h.Key('key'), 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) => h.svg([
+        h.Key('arrow'),
         h.AriaHidden(true),
         h.Class('json-arrow shrink-0'),
-        h.Xmlns('http://www.w3.org/2000/h.svg'),
+        h.Xmlns('http://www.w3.org/2000/svg'),
         h.Fill('none'),
         h.ViewBox('0 0 24 24'),
         h.StrokeWidth('2'),
@@ -541,8 +533,8 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             h.D(isExpanded ? CHEVRON_DOWN : CHEVRON_RIGHT),
         ], []),
     ]);
-    const tagLabelView = (tag) => h.span([h.Class('json-tag')], [tag]);
-    const diffDotView = h.span([h.Class('diff-dot')], []);
+    const tagLabelView = (tag) => h.span([h.Key('tag'), h.Class('json-tag')], [tag]);
+    const diffDotView = h.span([h.Key('diffdot'), 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;
@@ -619,7 +611,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             ...(!isRoot && hasDiffDot ? [diffDotView] : []),
             ...(String_.isNonEmpty(key) ? [keyView(key)] : []),
             ...(String_.isNonEmpty(tag) ? [tagLabelView(tag)] : []),
-            h.span([h.Class('json-preview')], [preview]),
+            h.span([h.Key('value'), h.Class('json-preview')], [preview]),
         ]);
     };
     const renderFlatNode = (node) => lazyTreeNode(node.treePath, flatNodeView, [
@@ -673,15 +665,9 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     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',
-        'Message',
-        'Commands',
-        'Mounts',
-    ];
     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']);
+    ], ['init: no Message']);
     const modelTabContent = (inspectedModel, expandedPaths, changedPaths, affectedPaths) => treeView(inspectedModel, 'root', expandedPaths, changedPaths, affectedPaths, Option.none(), true);
     const unwrapIfFiltered = (message, maybeSubmodelFilter) => {
         if (Option.isNone(maybeSubmodelFilter)) {
@@ -856,25 +842,36 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     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({
+        h.submodel({
+            slotId: model.inspectorTabs.id,
             model: model.inspectorTabs,
-            toParentMessage: tabsMessage => GotInspectorTabsMessage({ message: tabsMessage }),
-            tabs: INSPECTOR_TABS,
-            tabListAriaLabel: 'Inspector tabs',
-            persistPanels: true,
-            attributes: [h.Class('flex flex-col flex-1 min-h-0')],
-            tabListAttributes: [h.Class('flex border-b shrink-0')],
-            tabToConfig: (tab, { isActive }) => ({
-                buttonAttributes: [
-                    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: 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),
-                }),
-            }),
+            view: InspectorTabs.view,
+            viewInputs: {
+                tabs: INSPECTOR_TABS,
+                ariaLabel: 'Inspector tabs',
+                toView: ({ tablist, tabs, activeIndex }) => h.div([h.Class('flex flex-col flex-1 min-h-0')], [
+                    h.div([...tablist, h.Class('flex border-b shrink-0')], tabs.map(tab => h.button([
+                        ...tab.tab,
+                        h.Class(clsx('dt-tab-button cursor-pointer text-base font-mono px-3 py-1', tab.isActive
+                            ? 'text-dt dt-tab-active'
+                            : 'text-dt-muted')),
+                    ], [h.span([], [tab.value])]))),
+                    ...tabs.map(tab => h.div([
+                        ...tab.panel,
+                        h.Class('flex flex-col flex-1 min-h-0 min-w-0'),
+                        h.Hidden(tab.index !== activeIndex),
+                        ...(tab.index === activeIndex
+                            ? []
+                            : [h.Style({ display: 'none' })]),
+                    ], [
+                        Option.match(model.maybeInspectedModel, {
+                            onNone: () => emptyInspectorView,
+                            onSome: inspectedModel => inspectorTabContent(model, tab.value, inspectedModel),
+                        }),
+                    ])),
+                ]),
+            },
+            toParentMessage: message => GotInspectorTabsMessage({ message }),
         }),
     ]);
     // MESSAGE LIST
@@ -886,7 +883,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         model.isOpen
             ? h.svg([
                 h.AriaHidden(true),
-                h.Xmlns('http://www.w3.org/2000/h.svg'),
+                h.Xmlns('http://www.w3.org/2000/svg'),
                 h.Fill('none'),
                 h.ViewBox('0 0 24 24'),
                 h.StrokeWidth('1.5'),
@@ -912,7 +909,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     const checkIconView = h.svg([
         h.AriaHidden(true),
         h.Class('dt-filter-check shrink-0'),
-        h.Xmlns('http://www.w3.org/2000/h.svg'),
+        h.Xmlns('http://www.w3.org/2000/svg'),
         h.Fill('none'),
         h.ViewBox('0 0 24 24'),
         h.StrokeWidth('2'),
@@ -925,7 +922,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     const arrowUpIconView = h.svg([
         h.AriaHidden(true),
         h.Class('dt-scroll-pill-icon shrink-0'),
-        h.Xmlns('http://www.w3.org/2000/h.svg'),
+        h.Xmlns('http://www.w3.org/2000/svg'),
         h.Fill('none'),
         h.ViewBox('0 0 24 24'),
         h.StrokeWidth('2'),
@@ -946,38 +943,41 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             onNone: () => 'All Messages',
             onSome: submodelLabel,
         });
-        return Listbox.view({
+        return h.submodel({
+            slotId: 'submodel-filter',
             model: model.submodelFilterListbox,
-            toParentMessage: message => GotSubmodelFilterMessage({ message }),
-            onSelectedItem: tag => SelectedSubmodelFilter({ tag }),
-            items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
-            itemToConfig: item => ({
-                className: 'dt-filter-item',
-                content: h.div([h.Class('flex items-center gap-2')], [checkIconView, h.span([], [filterItemLabel(item)])]),
-            }),
-            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'),
-                ], [
-                    h.path([
-                        h.D(CHEVRON_DOWN),
-                        h.StrokeLinecap('round'),
-                        h.StrokeLinejoin('round'),
-                    ], []),
+            view: SubmodelFilterListbox.view,
+            viewInputs: {
+                items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
+                itemToConfig: item => ({
+                    className: 'dt-filter-item',
+                    content: h.div([h.Class('flex items-center gap-2')], [checkIconView, h.span([], [filterItemLabel(item)])]),
+                }),
+                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/svg'),
+                        h.Fill('none'),
+                        h.ViewBox('0 0 24 24'),
+                        h.StrokeWidth('2'),
+                        h.Stroke('currentColor'),
+                    ], [
+                        h.path([
+                            h.D(CHEVRON_DOWN),
+                            h.StrokeLinecap('round'),
+                            h.StrokeLinejoin('round'),
+                        ], []),
+                    ]),
                 ]),
-            ]),
-            buttonClassName: 'dt-filter-button',
-            itemsClassName: 'dt-filter-items',
-            className: 'dt-filter-wrapper',
-            attributes: [h.Key('submodel-filter')],
-            backdropClassName: 'dt-filter-backdrop',
+                buttonClassName: 'dt-filter-button',
+                itemsClassName: 'dt-filter-items',
+                className: 'dt-filter-wrapper',
+                attributes: childAttributes([h.Key('submodel-filter')]),
+                backdropClassName: 'dt-filter-backdrop',
+            },
+            toParentMessage: message => GotSubmodelFilterMessage({ message }),
         });
     };
     const headerView = (model) => {
@@ -1020,7 +1020,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     const pauseIconView = h.svg([
         h.AriaHidden(true),
         h.Class('dt-pause-icon'),
-        h.Xmlns('http://www.w3.org/2000/h.svg'),
+        h.Xmlns('http://www.w3.org/2000/svg'),
         h.Fill('none'),
         h.ViewBox('0 0 24 24'),
         h.StrokeWidth('2.5'),
@@ -1100,28 +1100,35 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         const current = String(model.scrubberSlider.value).padStart(3, '0');
         return `${current} / ${total}`;
     };
-    const scrubberView = (model) => Slider.view({
+    const scrubberView = (model) => h.submodel({
+        slotId: model.scrubberSlider.id,
         model: model.scrubberSlider,
-        toParentMessage: message => GotScrubberSliderMessage({ message }),
-        ariaLabel: 'Session scrubber',
-        getTrackRoot: () => shadow,
-        formatValue: value => (value === 0 ? 'init' : `Message ${String(value)}`),
-        toView: attributes => h.div([
-            h.Class('dt-scrubber-row flex items-center gap-3 px-3 py-2 border-t shrink-0'),
-        ], [
-            h.div([
-                ...attributes.root,
-                h.Class('dt-scrubber-control flex-1 flex items-center'),
+        view: Slider.view,
+        viewInputs: {
+            ariaLabel: 'Session scrubber',
+            getTrackRoot: () => shadow,
+            formatValue: value => value === 0 ? 'init' : `Message ${String(value)}`,
+            toView: attributes => h.div([
+                h.Class('dt-scrubber-row flex items-center gap-3 px-3 py-2 border-t shrink-0'),
             ], [
-                h.div([...attributes.track, h.Class('dt-scrubber-track')], [
-                    h.div([...attributes.filledTrack, h.Class('dt-scrubber-fill')], []),
-                    h.div([...attributes.thumb, h.Class('dt-scrubber-thumb')], []),
+                h.div([
+                    ...attributes.root,
+                    h.Class('dt-scrubber-control flex-1 flex items-center'),
+                ], [
+                    h.div([...attributes.track, h.Class('dt-scrubber-track')], [
+                        h.div([
+                            ...attributes.filledTrack,
+                            h.Class('dt-scrubber-fill'),
+                        ], []),
+                        h.div([...attributes.thumb, h.Class('dt-scrubber-thumb')], []),
+                    ]),
                 ]),
+                h.span([
+                    h.Class('dt-scrubber-position text-2xs text-dt-muted font-mono shrink-0 tabular-nums'),
+                ], [scrubberPositionLabel(model)]),
             ]),
-            h.span([
-                h.Class('dt-scrubber-position text-2xs text-dt-muted font-mono shrink-0 tabular-nums'),
-            ], [scrubberPositionLabel(model)]),
-        ]),
+        },
+        toParentMessage: message => GotScrubberSliderMessage({ message }),
     });
     // PANEL
     const isScrubberVisible = mode === 'TimeTravel';

package/dist/dom/dom.d.ts

@@ -31,7 +31,7 @@ import { ElementNotFound } from './error.js';
  *
  * @example
  * ```typescript
- * Dom.focus('#email-input').pipe(Effect.ignore, Effect.as(CompletedFocusInput()))
+ * Dom.focus('#email-input')
  * Dom.focus('#section', { preventScroll: true, makeFocusable: true })
  * ```
  */
@@ -50,8 +50,8 @@ export declare const focus: (selector: string, options?: Readonly<{
  *
  * @example
  * ```typescript
- * Dom.showModal('#my-dialog').pipe(Effect.ignore, Effect.as(CompletedShowDialog()))
- * Dom.showModal('#my-dialog', { focusSelector: '#search-input' }).pipe(Effect.ignore, Effect.as(CompletedShowDialog()))
+ * Dom.showModal('#my-dialog')
+ * Dom.showModal('#my-dialog', { focusSelector: '#search-input' })
  * ```
  */
 export declare const showModal: (selector: string, options?: Readonly<{
@@ -64,7 +64,7 @@ export declare const showModal: (selector: string, options?: Readonly<{
  *
  * @example
  * ```typescript
- * Dom.closeModal('#my-dialog').pipe(Effect.ignore, Effect.as(CompletedCloseDialog()))
+ * Dom.closeModal('#my-dialog')
  * ```
  */
 export declare const closeModal: (selector: string) => Effect.Effect<void, ElementNotFound>;
@@ -74,7 +74,7 @@ export declare const closeModal: (selector: string) => Effect.Effect<void, Eleme
  *
  * @example
  * ```typescript
- * Dom.clickElement('#menu-item-2').pipe(Effect.ignore, Effect.as(CompletedClickItem()))
+ * Dom.clickElement('#menu-item-2')
  * ```
  */
 export declare const clickElement: (selector: string) => Effect.Effect<void, ElementNotFound>;
@@ -89,7 +89,7 @@ export declare const clickElement: (selector: string) => Effect.Effect<void, Ele
  *
  * @example
  * ```typescript
- * Dom.scrollIntoView('#active-item').pipe(Effect.ignore, Effect.as(CompletedScrollIntoView()))
+ * Dom.scrollIntoView('#active-item')
  * Dom.scrollIntoView('#section-2', { block: 'start' })
  * ```
  */
@@ -113,10 +113,7 @@ export declare const scrollIntoView: (selector: string, options?: Readonly<{
  *
  * @example
  * ```typescript
- * Dom.scrollIntoViewAfterPaint('#overview').pipe(
- *   Effect.ignore,
- *   Effect.as(CompletedScrollIntoViewAfterPaint()),
- * )
+ * Dom.scrollIntoViewAfterPaint('#overview')
  * Dom.scrollIntoViewAfterPaint(`#${hash}`, { block: 'start' })
  * ```
  */
@@ -131,7 +128,7 @@ export type FocusDirection = 'Next' | 'Previous';
  *
  * @example
  * ```typescript
- * Dom.advanceFocus('#menu-button', 'Next').pipe(Effect.ignore, Effect.as(CompletedAdvanceFocus()))
+ * Dom.advanceFocus('#menu-button', 'Next')
  * ```
  */
 export declare const advanceFocus: (selector: string, direction: FocusDirection) => Effect.Effect<void, ElementNotFound>;

package/dist/dom/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/dom/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EAMP,MAAM,QAAQ,CAAA;AAGf,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AA6B5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,KAAK,GAChB,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,KACvE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAQlC,CAAA;AAEJ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,GACpB,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,aAAa,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,KAC7C,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAgDlC,CAAA;AAuBJ;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GACrB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAclC,CAAA;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKlC,CAAA;AAEJ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,KAAK,CAAC,EAAE,qBAAqB,CAAA;CAAE,CAAC,KACpD,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKlC,CAAA;AAEJ;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,KAAK,CAAC,EAAE,qBAAqB,CAAA;CAAE,CAAC,KACpD,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKlC,CAAA;AAEJ,yEAAyE;AACzE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAA;AAEhD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,EAChB,WAAW,cAAc,KACxB,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAiClC,CAAA"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/dom/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EAMP,MAAM,QAAQ,CAAA;AAGf,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AA6B5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,KAAK,GAChB,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,KACvE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAQlC,CAAA;AAEJ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,GACpB,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,aAAa,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,KAC7C,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAgDlC,CAAA;AAuBJ;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GACrB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAclC,CAAA;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKlC,CAAA;AAEJ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,KAAK,CAAC,EAAE,qBAAqB,CAAA;CAAE,CAAC,KACpD,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKlC,CAAA;AAEJ;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,KAAK,CAAC,EAAE,qBAAqB,CAAA;CAAE,CAAC,KACpD,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKlC,CAAA;AAEJ,yEAAyE;AACzE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAA;AAEhD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,EAChB,WAAW,cAAc,KACxB,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAiClC,CAAA"}

package/dist/dom/dom.js

@@ -49,7 +49,7 @@ const queryHTMLElement = (selector) => Effect.suspend(() => {
  *
  * @example
  * ```typescript
- * Dom.focus('#email-input').pipe(Effect.ignore, Effect.as(CompletedFocusInput()))
+ * Dom.focus('#email-input')
  * Dom.focus('#section', { preventScroll: true, makeFocusable: true })
  * ```
  */
@@ -72,8 +72,8 @@ export const focus = (selector, options) => Effect.gen(function* () {
  *
  * @example
  * ```typescript
- * Dom.showModal('#my-dialog').pipe(Effect.ignore, Effect.as(CompletedShowDialog()))
- * Dom.showModal('#my-dialog', { focusSelector: '#search-input' }).pipe(Effect.ignore, Effect.as(CompletedShowDialog()))
+ * Dom.showModal('#my-dialog')
+ * Dom.showModal('#my-dialog', { focusSelector: '#search-input' })
  * ```
  */
 export const showModal = (selector, options) => Effect.gen(function* () {
@@ -132,7 +132,7 @@ const trapFocusWithinDialog = (event, dialog) => {
  *
  * @example
  * ```typescript
- * Dom.closeModal('#my-dialog').pipe(Effect.ignore, Effect.as(CompletedCloseDialog()))
+ * Dom.closeModal('#my-dialog')
  * ```
  */
 export const closeModal = (selector) => Effect.suspend(() => {
@@ -155,7 +155,7 @@ export const closeModal = (selector) => Effect.suspend(() => {
  *
  * @example
  * ```typescript
- * Dom.clickElement('#menu-item-2').pipe(Effect.ignore, Effect.as(CompletedClickItem()))
+ * Dom.clickElement('#menu-item-2')
  * ```
  */
 export const clickElement = (selector) => Effect.gen(function* () {
@@ -174,7 +174,7 @@ export const clickElement = (selector) => Effect.gen(function* () {
  *
  * @example
  * ```typescript
- * Dom.scrollIntoView('#active-item').pipe(Effect.ignore, Effect.as(CompletedScrollIntoView()))
+ * Dom.scrollIntoView('#active-item')
  * Dom.scrollIntoView('#section-2', { block: 'start' })
  * ```
  */
@@ -200,10 +200,7 @@ export const scrollIntoView = (selector, options) => Effect.gen(function* () {
  *
  * @example
  * ```typescript
- * Dom.scrollIntoViewAfterPaint('#overview').pipe(
- *   Effect.ignore,
- *   Effect.as(CompletedScrollIntoViewAfterPaint()),
- * )
+ * Dom.scrollIntoViewAfterPaint('#overview')
  * Dom.scrollIntoViewAfterPaint(`#${hash}`, { block: 'start' })
  * ```
  */
@@ -218,7 +215,7 @@ export const scrollIntoViewAfterPaint = (selector, options) => Effect.gen(functi
  *
  * @example
  * ```typescript
- * Dom.advanceFocus('#menu-button', 'Next').pipe(Effect.ignore, Effect.as(CompletedAdvanceFocus()))
+ * Dom.advanceFocus('#menu-button', 'Next')
  * ```
  */
 export const advanceFocus = (selector, direction) => Effect.gen(function* () {

package/dist/dom/elementMovement.d.ts

@@ -12,9 +12,7 @@ import { Effect } from 'effect';
  *
  * @example
  * ```typescript
- * Dom.detectElementMovement('#menu-button').pipe(
- *   Effect.as(DetectedButtonMovement()),
- * )
+ * Dom.detectElementMovement('#menu-button')
  * ```
  */
 export declare const detectElementMovement: (selector: string) => Effect.Effect<void>;

package/dist/dom/elementMovement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elementMovement.d.ts","sourceRoot":"","sources":["../../src/dom/elementMovement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAM/B;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,qBAAqB,GAAI,UAAU,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAmCvE,CAAA"}
+{"version":3,"file":"elementMovement.d.ts","sourceRoot":"","sources":["../../src/dom/elementMovement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAM/B;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,qBAAqB,GAAI,UAAU,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAmCvE,CAAA"}

package/dist/dom/elementMovement.js

@@ -14,9 +14,7 @@ const rectToPosition = (rect) => `${rect.x},${rect.y}`;
  *
  * @example
  * ```typescript
- * Dom.detectElementMovement('#menu-button').pipe(
- *   Effect.as(DetectedButtonMovement()),
- * )
+ * Dom.detectElementMovement('#menu-button')
  * ```
  */
 export const detectElementMovement = (selector) => Effect.gen(function* () {