foldkit 0.132.0 → 0.134.0

package/dist/runtime/runtime.js

@@ -3,7 +3,7 @@ import { BrowserRuntime } from '@effect/platform-browser';
 import { __CurrentRegistry as __CurrentInterruptRegistry, __makeRegistry as __makeInterruptRegistry, } from '../command/interruptible/index.js';
 import { createDevToolsStore, } from '../devTools/store.js';
 import { startWebSocketBridge } from '../devTools/webSocketBridge.js';
-import { __beginRender as beginHtmlRender, __beginReplayRender as beginReplayHtmlRender, __clearRuntime as clearHtmlRuntime, __createBoundaryRegistry as createHtmlBoundaryRegistry, __endReplayRender as endReplayHtmlRender, __setRuntime as setHtmlRuntime, } from '../html/index.js';
+import { __beginRender as beginHtmlRender, __beginReplayRender as beginReplayHtmlRender, __clearRuntime as clearHtmlRuntime, __createBoundaryRegistry as createHtmlBoundaryRegistry, __endReplayRender as endReplayHtmlRender, __htmlBuilder as htmlBuilderFor, __setRuntime as setHtmlRuntime, } from '../html/index.js';
 import { MountTracker } from '../mount/index.js';
 import { __CurrentPortChannels, __makeInboundChannel, } from '../port/index.js';
 import { fromString as urlFromString } from '../url/index.js';
@@ -310,6 +310,7 @@ const validatePorts = (ports) => {
 const runtimeInternals = new WeakMap();
 const makeRuntime = ({ ports, Model, flags: resolveFlags, init, update, view, manageDocument, subscriptions, container, routing: routingConfig, crash, slow, freezeModel, preserveScroll, resources, managedResources, devTools, }) => {
     const isSlowVisible = (show) => Match.value(show).pipe(Match.when('Always', () => true), Match.when('Development', () => !!import.meta.hot), Match.exhaustive);
+    const htmlBuilder = htmlBuilderFor();
     const resolvedSlow = __resolveSlowConfig(slow, isSlowVisible);
     const resolvedSlowView = Option.flatMap(resolvedSlow, ({ view }) => view);
     const resolvedSlowUpdate = Option.flatMap(resolvedSlow, ({ update }) => update);
@@ -820,7 +821,7 @@ const makeRuntime = ({ ports, Model, flags: resolveFlags, init, update, view, ma
                 beginHtmlRender(boundaryRegistry);
                 setHtmlRuntime(dispatchService.dispatchSync, runtimeContext, boundaryRegistry);
                 try {
-                    return view(model);
+                    return view(model, htmlBuilder);
                 }
                 finally {
                     clearHtmlRuntime();
@@ -1001,7 +1002,7 @@ const makeRuntime = ({ ports, Model, flags: resolveFlags, init, update, view, ma
                 beginHtmlRender(boundaryRegistry);
                 setHtmlRuntime(dispatch.dispatchSync, liveRenderContext, boundaryRegistry);
                 try {
-                    return view(model);
+                    return view(model, htmlBuilder);
                 }
                 finally {
                     clearHtmlRuntime();
@@ -1185,6 +1186,11 @@ const currentLocationUrl = () => {
     const { origin, pathname, search } = window.location;
     return `${origin}${pathname}${search}`;
 };
+const textDirectionForHtmlElement = {
+    Ltr: 'ltr',
+    Rtl: 'rtl',
+    Auto: 'auto',
+};
 const documentMetadataElements = new WeakMap();
 const metadataElementsForDocument = () => {
     let elements = documentMetadataElements.get(document);
@@ -1215,6 +1221,17 @@ const applyDocumentMetadata = (nextDocument, mountedRoot) => {
     if (document.title !== nextDocument.title) {
         document.title = nextDocument.title;
     }
+    const { documentElement } = document;
+    if (nextDocument.lang !== undefined &&
+        documentElement.lang !== nextDocument.lang) {
+        documentElement.lang = nextDocument.lang;
+    }
+    if (nextDocument.dir !== undefined) {
+        const dir = textDirectionForHtmlElement[nextDocument.dir];
+        if (documentElement.dir !== dir) {
+            documentElement.dir = dir;
+        }
+    }
     const canonical = nextDocument.canonical ?? currentLocationUrl();
     const ogUrl = nextDocument.ogUrl ?? canonical;
     const metadataElements = metadataElementsForDocument();
@@ -1250,7 +1267,7 @@ const renderCrashView = (context, crash, container, vnodeSlot, manageDocument) =
         let crashDocument;
         try {
             crashDocument = crash?.view
-                ? crash.view(context)
+                ? crash.view(context, htmlBuilderFor())
                 : defaultCrashView(context);
         }
         finally {
@@ -1361,9 +1378,9 @@ const toCrashConfig = (crash) => {
     const elementCrashView = crash.view;
     return {
         ...(Predicate.isNotUndefined(elementCrashView) && {
-            view: (context) => ({
+            view: (context, h) => ({
                 title: '',
-                body: elementCrashView(context),
+                body: elementCrashView(context, h),
             }),
         }),
         ...(Predicate.isNotUndefined(crash.report) && {
@@ -1380,9 +1397,9 @@ export function makeElement(config) {
     }
     const hasFlags = 'Flags' in config;
     const elementView = config.view;
-    const view = (model) => ({
+    const view = (model, h) => ({
         title: '',
-        body: elementView(model),
+        body: elementView(model, h),
     });
     const crash = toCrashConfig(config.crash);
     const baseConfig = {

package/dist/test/apps/attributes.d.ts

@@ -1,5 +1,5 @@
 import { Schema as S } from 'effect';
-import type { Attribute, Html } from '../../html/index.js';
+import type { Attribute, Html, HtmlBuilder } from '../../html/index.js';
 export declare const IgnoredInteraction: import("../../schema/index.js").CallableTaggedStruct<"IgnoredInteraction", {}>;
 export declare const Message: S.Union<readonly [import("../../schema/index.js").CallableTaggedStruct<"IgnoredInteraction", {}>]>;
 export type Message = typeof Message.Type;
@@ -8,5 +8,5 @@ export type Model = Readonly<{
 }>;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
 export declare const testId = "attribute-host";
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=attributes.d.ts.map

package/dist/test/apps/attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../../src/test/apps/attributes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAM1D,eAAO,MAAM,kBAAkB,gFAA0B,CAAA;AAEzD,eAAO,MAAM,OAAO,oGAAgC,CAAA;AACpD,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAAE,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC,CAAA;AAI/D,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAMrC,CAAA;AAMH,eAAO,MAAM,MAAM,mBAAU,CAAA;AAE7B,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAInC,CAAA"}
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../../src/test/apps/attributes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAKvE,eAAO,MAAM,kBAAkB,gFAA0B,CAAA;AAEzD,eAAO,MAAM,OAAO,oGAAgC,CAAA;AACpD,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAAE,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC,CAAA;AAI/D,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAMrC,CAAA;AAMH,eAAO,MAAM,MAAM,mBAAU,CAAA;AAE7B,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAE5D,CAAA"}

package/dist/test/apps/attributes.js

@@ -1,5 +1,4 @@
 import { Match as M, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MESSAGE
 export const IgnoredInteraction = m('IgnoredInteraction');
@@ -11,7 +10,6 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
 // VIEW
 const TEST_ID = 'attribute-host';
 export const testId = TEST_ID;
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([h.DataAttribute('testid', TEST_ID), model.attribute], []);
 };

package/dist/test/apps/bubbling.d.ts

@@ -1,5 +1,5 @@
 import { Schema as S } from 'effect';
-import { type Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly clicks: S.Number;
     readonly doubleClicks: S.Number;
@@ -9,6 +9,6 @@ declare const Message: S.Union<readonly [import("../../schema/index.js").Callabl
 type Message = typeof Message.Type;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 export {};
 //# sourceMappingURL=bubbling.d.ts.map

package/dist/test/apps/bubbling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bubbling.d.ts","sourceRoot":"","sources":["../../../src/test/apps/bubbling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,EAAE,KAAK,IAAI,EAAQ,MAAM,qBAAqB,CAAA;AAKrD,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAOrC,QAAA,MAAM,OAAO,sLAAsD,CAAA;AACnE,KAAK,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIlC,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAUrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAgBnC,CAAA"}
+{"version":3,"file":"bubbling.d.ts","sourceRoot":"","sources":["../../../src/test/apps/bubbling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAOrC,QAAA,MAAM,OAAO,sLAAsD,CAAA;AACnE,KAAK,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIlC,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAUrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAc5D,CAAA"}

package/dist/test/apps/bubbling.js

@@ -1,5 +1,4 @@
 import { Match as M, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({
@@ -24,8 +23,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([], [
         h.div([h.Role('option'), h.OnClick(ClickedContainer())], [h.span([], [`clicks=${model.clicks}`])]),
         h.div([h.Role('listitem'), h.OnDoubleClick(DoubleClickedContainer())], [h.span([], [`dbl=${model.doubleClicks}`])]),

package/dist/test/apps/counter.d.ts

@@ -1,6 +1,6 @@
 import { Effect, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { type Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly count: S.Number;
     readonly log: S.$Array<S.Number>;
@@ -41,5 +41,5 @@ export declare const FetchCountById: Command.CommandDefinitionWithArgs<"FetchCou
 }, never, never>>;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=counter.d.ts.map

package/dist/test/apps/counter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../../../src/test/apps/counter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAE,KAAK,IAAI,EAAQ,MAAM,qBAAqB,CAAA;AAKrD,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,gBAAgB;;EAA0C,CAAA;AACvE,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,qBAAqB,mFAA6B,CAAA;AAC/D,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,mBAAmB;;EAAgD,CAAA;AAChF,eAAO,MAAM,gBAAgB;;EAA6C,CAAA;AAE1E,eAAO,MAAM,OAAO;;;;;;IAUlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,UAAU;;;iBAIgC,CAAA;AAEvD,eAAO,MAAM,cAAc;;;;;iBAKyC,CAAA;AAIpE,eAAO,MAAM,YAAY,EAAE,KAA6B,CAAA;AAIxD,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAiCxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAiBnC,CAAA"}
+{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../../../src/test/apps/counter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,gBAAgB;;EAA0C,CAAA;AACvE,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,qBAAqB,mFAA6B,CAAA;AAC/D,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,mBAAmB;;EAAgD,CAAA;AAChF,eAAO,MAAM,gBAAgB;;EAA6C,CAAA;AAE1E,eAAO,MAAM,OAAO;;;;;;IAUlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,UAAU;;;iBAIgC,CAAA;AAEvD,eAAO,MAAM,cAAc;;;;;iBAKyC,CAAA;AAIpE,eAAO,MAAM,YAAY,EAAE,KAA6B,CAAA;AAIxD,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAiCxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAe5D,CAAA"}

package/dist/test/apps/counter.js

@@ -1,6 +1,5 @@
 import { Effect, Match as M, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({
@@ -63,8 +62,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     FailedFetchCount: () => [model, []],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([], [
         h.span([h.Role('status')], [`count: ${model.count}`]),
         h.button([h.OnClick(StartedThreeFetches()), h.Role('button')], ['Start three fetches']),

package/dist/test/apps/crashOnRender.d.ts

@@ -1,6 +1,6 @@
 import { Effect, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { type Document } from '../../html/index.js';
+import type { Document, HtmlBuilder } from '../../html/index.js';
 export declare const RawSource: S.Struct<{
     readonly kind: S.Literal<"Book">;
     readonly id: S.String;
@@ -60,5 +60,5 @@ export declare const validSources: ReadonlyArray<RawSource>;
 export declare const malformedSources: ReadonlyArray<RawSource>;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-export declare const view: (model: Model) => Document;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Document;
 //# sourceMappingURL=crashOnRender.d.ts.map

package/dist/test/apps/crashOnRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crashOnRender.d.ts","sourceRoot":"","sources":["../../../src/test/apps/crashOnRender.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAE/D,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAE,KAAK,QAAQ,EAAQ,MAAM,qBAAqB,CAAA;AAMzD,eAAO,MAAM,SAAS;;;EAGpB,CAAA;AACF,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,IAAI,CAAA;AAK7C,eAAO,MAAM,MAAM;;;EAGjB,CAAA;AACF,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AAEvC,eAAO,MAAM,KAAK;;;;;EAEhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,aAAa;;;;;EAAsD,CAAA;AAChF,eAAO,MAAM,cAAc;;;;;EAA0C,CAAA;AACrE,eAAO,MAAM,oBAAoB;;EAA8C,CAAA;AAE/E,eAAO,MAAM,OAAO;;;;;;;;;;;;IAKlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAMzC,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,SAAS,CAGpD,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;iBAGoC,CAAA;AAI9D,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,SAAS,CAEjD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC,SAAS,CAErD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAiC,CAAA;AAI5D,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAiBxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,QA8BnC,CAAA"}
+{"version":3,"file":"crashOnRender.d.ts","sourceRoot":"","sources":["../../../src/test/apps/crashOnRender.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAE/D,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAMhE,eAAO,MAAM,SAAS;;;EAGpB,CAAA;AACF,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,IAAI,CAAA;AAK7C,eAAO,MAAM,MAAM;;;EAGjB,CAAA;AACF,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AAEvC,eAAO,MAAM,KAAK;;;;;EAEhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,aAAa;;;;;EAAsD,CAAA;AAChF,eAAO,MAAM,cAAc;;;;;EAA0C,CAAA;AACrE,eAAO,MAAM,oBAAoB;;EAA8C,CAAA;AAE/E,eAAO,MAAM,OAAO;;;;;;;;;;;;IAKlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAMzC,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,SAAS,CAGpD,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;iBAGoC,CAAA;AAI9D,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,SAAS,CAEjD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC,SAAS,CAErD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAiC,CAAA;AAI5D,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAiBxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,QA4B5D,CAAA"}

package/dist/test/apps/crashOnRender.js

@@ -1,6 +1,5 @@
 import { Array, Effect, Match as M, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 import { evo } from '../../struct/index.js';
 // MODEL
@@ -59,8 +58,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     },
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     const body = h.div([], [
         h.button([h.OnClick(ClickedReload()), h.Role('button')], ['Reload']),
         h.button([h.OnClick(SubmittedNewSourceId({ id: '' })), h.Role('button')], ['Add source']),

package/dist/test/apps/drafts.d.ts

@@ -1,7 +1,7 @@
 import { Effect, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
 import * as Interruptible from '../../command/interruptible/index.js';
-import { type Document } from '../../html/index.js';
+import type { Document, HtmlBuilder } from '../../html/index.js';
 export declare const SaveStatus: S.Literals<readonly ["Editing", "Saving", "Saved"]>;
 export type SaveStatus = typeof SaveStatus.Type;
 export declare const Model: S.Struct<{
@@ -29,5 +29,5 @@ export declare const SaveDraft: Interruptible.DefinitionWithArgsNameKeyed<"SaveD
 }, never, never>>;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-export declare const view: (model: Model) => Document;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Document;
 //# sourceMappingURL=drafts.d.ts.map

package/dist/test/apps/drafts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drafts.d.ts","sourceRoot":"","sources":["../../../src/test/apps/drafts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,KAAK,aAAa,MAAM,sCAAsC,CAAA;AACrE,OAAO,EAAE,KAAK,QAAQ,EAAQ,MAAM,qBAAqB,CAAA;AAMzD,eAAO,MAAM,UAAU,qDAA6C,CAAA;AACpE,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAE/C,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,kBAAkB;;EAE7B,CAAA;AAEF,eAAO,MAAM,OAAO;;IAAkD,CAAA;AACtE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,aAAa;;EAAmC,CAAA;AAC7D,MAAM,MAAM,aAAa,GAAG,OAAO,aAAa,CAAC,IAAI,CAAA;AAErD,eAAO,MAAM,SAAS;;;;;iBAIwD,CAAA;AAI9E,eAAO,MAAM,YAAY,EAAE,KAA0C,CAAA;AAIrE,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAYxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,QAYnC,CAAA"}
+{"version":3,"file":"drafts.d.ts","sourceRoot":"","sources":["../../../src/test/apps/drafts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,KAAK,aAAa,MAAM,sCAAsC,CAAA;AACrE,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAMhE,eAAO,MAAM,UAAU,qDAA6C,CAAA;AACpE,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAE/C,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,kBAAkB;;EAE7B,CAAA;AAEF,eAAO,MAAM,OAAO;;IAAkD,CAAA;AACtE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,aAAa;;EAAmC,CAAA;AAC7D,MAAM,MAAM,aAAa,GAAG,OAAO,aAAa,CAAC,IAAI,CAAA;AAErD,eAAO,MAAM,SAAS;;;;;iBAIwD,CAAA;AAI9E,eAAO,MAAM,YAAY,EAAE,KAA0C,CAAA;AAIrE,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAYxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,QAU5D,CAAA"}

package/dist/test/apps/drafts.js

@@ -1,6 +1,5 @@
 import { Effect, Match as M, Schema as S } from 'effect';
 import * as Interruptible from '../../command/interruptible/index.js';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 import { evo } from '../../struct/index.js';
 // MODEL
@@ -29,8 +28,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     SucceededSaveDraft: () => [evo(model, { status: () => 'Saved' }), []],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     const body = h.div([], [
         h.button([h.OnClick(ClickedSaveDraft())], ['Save draft']),
         h.span([], [`draft: ${model.status}`]),

package/dist/test/apps/fileUpload.d.ts

@@ -1,6 +1,6 @@
 import { Schema as S } from 'effect';
 import { File } from '../../file/index.js';
-import { type Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export type Model = Readonly<{
     receivedFiles: ReadonlyArray<File>;
 }>;
@@ -13,5 +13,5 @@ export declare const Message: S.Union<readonly [import("../../schema/index.js").
 }>]>;
 export type Message = typeof Message.Type;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=fileUpload.d.ts.map

package/dist/test/apps/fileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fileUpload.d.ts","sourceRoot":"","sources":["../../../src/test/apps/fileUpload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAE,KAAK,IAAI,EAAQ,MAAM,qBAAqB,CAAA;AAKrD,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;CACnC,CAAC,CAAA;AAEF,eAAO,MAAM,YAAY,EAAE,KAA6B,CAAA;AAIxD,eAAO,MAAM,aAAa;;EAA+C,CAAA;AAEzE,eAAO,MAAM,OAAO;;IAA2B,CAAA;AAC/C,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAMrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IA8BnC,CAAA"}
+{"version":3,"file":"fileUpload.d.ts","sourceRoot":"","sources":["../../../src/test/apps/fileUpload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;CACnC,CAAC,CAAA;AAEF,eAAO,MAAM,YAAY,EAAE,KAA6B,CAAA;AAIxD,eAAO,MAAM,aAAa;;EAA+C,CAAA;AAEzE,eAAO,MAAM,OAAO;;IAA2B,CAAA;AAC/C,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAMrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IA4B5D,CAAA"}

package/dist/test/apps/fileUpload.js

@@ -1,6 +1,5 @@
 import { Match as M, Schema as S } from 'effect';
 import { File } from '../../file/index.js';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 export const initialModel = { receivedFiles: [] };
 // MESSAGE
@@ -11,8 +10,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ReceivedFiles: ({ files }) => [{ ...model, receivedFiles: files }, []],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([], [
         h.input([
             h.Key('file-input'),

package/dist/test/apps/interactions.d.ts

@@ -1,5 +1,5 @@
 import { Schema as S } from 'effect';
-import { type Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly clicks: S.Number;
     readonly doubleClicks: S.Number;
@@ -22,5 +22,5 @@ export declare const Message: S.Union<readonly [import("../../schema/index.js").
 export type Message = typeof Message.Type;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=interactions.d.ts.map

package/dist/test/apps/interactions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../../../src/test/apps/interactions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,EAAE,KAAK,IAAI,EAAQ,MAAM,qBAAqB,CAAA;AAKrD,eAAO,MAAM,KAAK;;;;;;EAMhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,aAAa;;EAA0C,CAAA;AAEpE,eAAO,MAAM,OAAO;;IAOlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAcrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IA8BnC,CAAA"}
+{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../../../src/test/apps/interactions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,eAAO,MAAM,KAAK;;;;;;EAMhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,aAAa;;EAA0C,CAAA;AAEpE,eAAO,MAAM,OAAO;;IAOlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAcrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IA4B5D,CAAA"}

package/dist/test/apps/interactions.js

@@ -1,5 +1,4 @@
 import { Match as M, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({
@@ -45,8 +44,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ChangedSelect: ({ value }) => [{ ...model, changed: value }, []],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([], [
         h.button([
             h.OnClick(ClickedButton()),

package/dist/test/apps/keypress.d.ts

@@ -1,5 +1,5 @@
 import { Schema as S } from 'effect';
-import type { Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly lastKey: S.String;
     readonly isShifted: S.Boolean;
@@ -19,5 +19,5 @@ export declare const Message: S.Union<readonly [import("../../schema/index.js").
 export type Message = typeof Message.Type;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=keypress.d.ts.map

package/dist/test/apps/keypress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keypress.d.ts","sourceRoot":"","sources":["../../../src/test/apps/keypress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAM/C,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,UAAU;;EAAqC,CAAA;AAC5D,eAAO,MAAM,eAAe;;EAA0C,CAAA;AAEtE,eAAO,MAAM,OAAO;;;;IAAyC,CAAA;AAC7D,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAarC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAoBnC,CAAA"}
+{"version":3,"file":"keypress.d.ts","sourceRoot":"","sources":["../../../src/test/apps/keypress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,UAAU;;EAAqC,CAAA;AAC5D,eAAO,MAAM,eAAe;;EAA0C,CAAA;AAEtE,eAAO,MAAM,OAAO;;;;IAAyC,CAAA;AAC7D,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAarC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAkB5D,CAAA"}

package/dist/test/apps/keypress.js

@@ -1,5 +1,4 @@
 import { Match as M, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({
@@ -27,8 +26,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([
         h.Id('key-app'),
         h.Role('application'),

package/dist/test/apps/login.d.ts

@@ -1,6 +1,6 @@
 import { Effect, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { type Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly email: S.String;
     readonly password: S.String;
@@ -39,5 +39,5 @@ export declare const Authenticate: Command.CommandDefinitionNoArgs<"Authenticate
 }, never, never>>;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=login.d.ts.map

package/dist/test/apps/login.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"login.d.ts","sourceRoot":"","sources":["../../../src/test/apps/login.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAE,KAAK,IAAI,EAAQ,MAAM,qBAAqB,CAAA;AAKrD,eAAO,MAAM,KAAK;;;;;;EAMhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,YAAY;;EAAyC,CAAA;AAClE,eAAO,MAAM,eAAe;;EAA4C,CAAA;AACxE,eAAO,MAAM,cAAc,4EAAsB,CAAA;AACjD,eAAO,MAAM,qBAAqB;;EAEhC,CAAA;AACF,eAAO,MAAM,kBAAkB;;EAA+C,CAAA;AAC9E,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAE/C,eAAO,MAAM,OAAO;;;;;;;;+EAOlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY;;;iBAIyC,CAAA;AAIlE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAyBxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAgFnC,CAAA"}
+{"version":3,"file":"login.d.ts","sourceRoot":"","sources":["../../../src/test/apps/login.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,eAAO,MAAM,KAAK;;;;;;EAMhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,YAAY;;EAAyC,CAAA;AAClE,eAAO,MAAM,eAAe;;EAA4C,CAAA;AACxE,eAAO,MAAM,cAAc,4EAAsB,CAAA;AACjD,eAAO,MAAM,qBAAqB;;EAEhC,CAAA;AACF,eAAO,MAAM,kBAAkB;;EAA+C,CAAA;AAC9E,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAE/C,eAAO,MAAM,OAAO;;;;;;;;+EAOlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY;;;iBAIyC,CAAA;AAIlE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAyBxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IA8E5D,CAAA"}

package/dist/test/apps/login.js

@@ -1,6 +1,5 @@
 import { Effect, Match as M, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({
@@ -59,8 +58,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([h.Id('app')], [
         M.value(model.status).pipe(M.withReturnType(), M.when('Submitting', () => h.form([h.Class('login-form'), h.Disabled(true)], [h.button([h.Type('submit'), h.Disabled(true)], ['Signing in...'])])), M.when('LoggedIn', () => h.div([
             h.Class('logged-in'),

package/dist/test/apps/logoutButton.d.ts

@@ -1,5 +1,5 @@
 import { Option, Schema as S } from 'effect';
-import type { Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly label: S.String;
 }>;
@@ -13,5 +13,5 @@ export declare const OutMessage: S.Union<readonly [import("../../schema/index.js
 export type OutMessage = typeof OutMessage.Type;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>, Option.Option<OutMessage>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=logoutButton.d.ts.map

package/dist/test/apps/logoutButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logoutButton.d.ts","sourceRoot":"","sources":["../../../src/test/apps/logoutButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAM/C,eAAO,MAAM,KAAK;;EAAgC,CAAA;AAClD,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,eAAe,6EAAuB,CAAA;AAEnD,eAAO,MAAM,OAAO,4KAA4C,CAAA;AAChE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,eAAe,6EAAuB,CAAA;AAEnD,eAAO,MAAM,UAAU,iGAA6B,CAAA;AACpD,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAI/C,eAAO,MAAM,YAAY,EAAE,KAA4B,CAAA;AAIvD,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAShE,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAOnC,CAAA"}
+{"version":3,"file":"logoutButton.d.ts","sourceRoot":"","sources":["../../../src/test/apps/logoutButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,eAAO,MAAM,KAAK;;EAAgC,CAAA;AAClD,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,eAAe,6EAAuB,CAAA;AAEnD,eAAO,MAAM,OAAO,4KAA4C,CAAA;AAChE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,eAAe,6EAAuB,CAAA;AAEnD,eAAO,MAAM,UAAU,iGAA6B,CAAA;AACpD,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAI/C,eAAO,MAAM,YAAY,EAAE,KAA4B,CAAA;AAIvD,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAShE,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAK5D,CAAA"}

package/dist/test/apps/logoutButton.js

@@ -1,5 +1,4 @@
 import { Match as M, Option, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({ label: S.String });
@@ -18,7 +17,6 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     CompletedAction: () => [model, [], Option.none()],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([], [h.button([h.OnClick(ClickedLogout()), h.Role('button')], [model.label])]);
 };

package/dist/test/apps/mountPanel.d.ts

@@ -1,5 +1,5 @@
 import { Schema as S } from 'effect';
-import type { Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 import * as Mount from '../../mount/index.js';
 export declare const Model: S.Struct<{
     readonly isOpen: S.Boolean;
@@ -45,14 +45,14 @@ export declare const ScrollList: Mount.MountDefinitionWithArgs<"ScrollList", {
 }>;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 /** A view that always renders both the toggle button and the panel, exposing
  *  two MeasurePanel mounts simultaneously so we can exercise the (name,
  *  occurrence) tracking. */
-export declare const twoPanelView: (model: Model) => Html;
+export declare const twoPanelView: (model: Model, h: HtmlBuilder<Message>) => Html;
 /** A view that renders an arg-bearing Mount so Scene tests can exercise
  *  Instance-based mount matching (matcher's args structurally equal the
  *  pending Mount's args). The chosen `offset` flows through `ScrollList`'s
  *  args and is observable on the rendered Mount marker. */
-export declare const scrollListView: (offset: number) => Html;
+export declare const scrollListView: (offset: number, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=mountPanel.d.ts.map

package/dist/test/apps/mountPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mountPanel.d.ts","sourceRoot":"","sources":["../../../src/test/apps/mountPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAGhE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAE/C,OAAO,KAAK,KAAK,MAAM,sBAAsB,CAAA;AAI7C,eAAO,MAAM,KAAK;;;;EAIhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,aAAa;;EAA0C,CAAA;AACpE,eAAO,MAAM,oBAAoB,kFAA4B,CAAA;AAC7D,eAAO,MAAM,kBAAkB;;EAAgD,CAAA;AAC/E,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,UAAU;;EAAwC,CAAA;AAE/D,eAAO,MAAM,OAAO;;;;;;IAOlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAWzC,eAAO,MAAM,YAAY;;;;;;EAI6B,CAAA;AAEtD,eAAO,MAAM,WAAW;;EAGuB,CAAA;AAE/C,eAAO,MAAM,UAAU;;;;;EAatB,CAAA;AAID,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAcrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IA8BnC,CAAA;AAED;;4BAE4B;AAC5B,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,KAAG,IAc3C,CAAA;AAED;;;2DAG2D;AAC3D,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,KAAG,IAO/C,CAAA"}
+{"version":3,"file":"mountPanel.d.ts","sourceRoot":"","sources":["../../../src/test/apps/mountPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhE,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAE5D,OAAO,KAAK,KAAK,MAAM,sBAAsB,CAAA;AAI7C,eAAO,MAAM,KAAK;;;;EAIhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,aAAa;;EAA0C,CAAA;AACpE,eAAO,MAAM,oBAAoB,kFAA4B,CAAA;AAC7D,eAAO,MAAM,kBAAkB;;EAAgD,CAAA;AAC/E,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,UAAU;;EAAwC,CAAA;AAE/D,eAAO,MAAM,OAAO;;;;;;IAOlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAWzC,eAAO,MAAM,YAAY;;;;;;EAI6B,CAAA;AAEtD,eAAO,MAAM,WAAW;;EAGuB,CAAA;AAE/C,eAAO,MAAM,UAAU;;;;;EAatB,CAAA;AAID,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAcrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IA4B5D,CAAA;AAED;;4BAE4B;AAC5B,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAYpE,CAAA;AAED;;;2DAG2D;AAC3D,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EACd,GAAG,WAAW,CAAC,OAAO,CAAC,KACtB,IAKF,CAAA"}

package/dist/test/apps/mountPanel.js

@@ -1,5 +1,4 @@
 import { Effect, Match as M, Option, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 import * as Mount from '../../mount/index.js';
 // MODEL
@@ -57,8 +56,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ScrolledTo: () => [model, []],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([h.Class('panel-test')], [
         h.button([h.Key('toggle'), h.OnClick(ClickedToggle()), h.OnMount(FocusButton())], [model.isOpen ? 'Close' : 'Open']),
         ...(model.isOpen
@@ -78,8 +76,7 @@ export const view = (model) => {
 /** A view that always renders both the toggle button and the panel, exposing
  *  two MeasurePanel mounts simultaneously so we can exercise the (name,
  *  occurrence) tracking. */
-export const twoPanelView = (model) => {
-    const h = html();
+export const twoPanelView = (model, h) => {
     return h.div([h.Class('two-panels')], [
         h.div([h.Key('panel-a'), h.OnMount(MeasurePanel())], [h.span([], ['A'])]),
         h.div([h.Key('panel-b'), h.OnMount(MeasurePanel())], [h.span([], ['B'])]),
@@ -90,7 +87,6 @@ export const twoPanelView = (model) => {
  *  Instance-based mount matching (matcher's args structurally equal the
  *  pending Mount's args). The chosen `offset` flows through `ScrollList`'s
  *  args and is observable on the rendered Mount marker. */
-export const scrollListView = (offset) => {
-    const h = html();
+export const scrollListView = (offset, h) => {
     return h.div([h.Class('scroll-list')], [h.div([h.Key('list'), h.OnMount(ScrollList({ offset }))], [])]);
 };

package/dist/test/apps/multiRole.d.ts

@@ -1,5 +1,5 @@
 import { Schema as S } from 'effect';
-import { type Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly clicks: S.Number;
 }>;
@@ -9,5 +9,5 @@ export declare const Message: S.Union<readonly [import("../../schema/index.js").
 export type Message = typeof Message.Type;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=multiRole.d.ts.map

package/dist/test/apps/multiRole.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiRole.d.ts","sourceRoot":"","sources":["../../../src/test/apps/multiRole.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,EAAE,KAAK,IAAI,EAAQ,MAAM,qBAAqB,CAAA;AAKrD,eAAO,MAAM,KAAK;;EAAiC,CAAA;AACnD,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,eAAe,6EAAuB,CAAA;AAEnD,eAAO,MAAM,OAAO,iGAA6B,CAAA;AACjD,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAAqB,CAAA;AAIhD,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAMrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAYnC,CAAA"}
+{"version":3,"file":"multiRole.d.ts","sourceRoot":"","sources":["../../../src/test/apps/multiRole.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,eAAO,MAAM,KAAK;;EAAiC,CAAA;AACnD,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,eAAe,6EAAuB,CAAA;AAEnD,eAAO,MAAM,OAAO,iGAA6B,CAAA;AACjD,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAAqB,CAAA;AAIhD,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAMrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAU5D,CAAA"}

package/dist/test/apps/multiRole.js

@@ -1,5 +1,4 @@
 import { Match as M, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({ clicks: S.Number });
@@ -13,8 +12,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ClickedFallback: () => [{ ...model, clicks: model.clicks + 1 }, []],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([], [
         h.div([h.Role('doc-subtitle heading'), h.OnClick(ClickedFallback())], [`Fallback element clicks=${model.clicks}`]),
     ]);