synstate-dom 0.4.0 → 0.5.0

package/dist/jsx-dev-runtime.d.mts

@@ -1,7 +1,7 @@
 /**
  * The module `"jsxImportSource": "synstate-dom"` makes TypeScript import for
- * `"jsx": "react-jsxdev"`. The extra arguments (`key`, source location) are
- * not used.
+ * `"jsx": "react-jsxdev"`. The extra arguments (`key`, source location) are not
+ * used.
  */
 export { Fragment, createMountable as jsxDEV, type JSX } from './jsx/index.mjs';
 //# sourceMappingURL=jsx-dev-runtime.d.mts.map

package/dist/scope/index.d.mts

@@ -0,0 +1,2 @@
+export * from './scope-effects.mjs';
+//# sourceMappingURL=index.d.mts.map

package/dist/scope/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../src/scope/index.mts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/scope/index.mjs

@@ -0,0 +1,2 @@
+export * from './scope-effects.mjs';
+//# sourceMappingURL=index.mjs.map

package/dist/scope/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../src/scope/index.mts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/scope/scope-effects.d.mts

@@ -0,0 +1,25 @@
+import { type Observable } from 'synstate';
+import type { StrictPick } from 'ts-type-forge';
+/**
+ * Calls `next` with every value of `source`, the current one first, until the
+ * current scope is disposed — what a component that is called once does in
+ * place of an effect.
+ */
+export declare const subscribeInScope: <A>(source: Observable<A>, next: (value: A) => void) => void;
+/** Listens to `type` on `target` until the current scope is disposed. */
+export declare const listenInScope: (target: Readonly<StrictPick<EventTarget, 'addEventListener' | 'removeEventListener'>>, type: string, listener: (event: Event) => void, options?: Readonly<{
+    capture?: boolean;
+    passive?: boolean;
+}>) => void;
+/**
+ * Makes the function that runs work once the update under way has finished:
+ * in a microtask, so before the next paint, with the DOM bound to the update
+ * already written — and nothing written to a state while another is still
+ * propagating, which synstate warns of. Work for a scope disposed by then is
+ * dropped.
+ *
+ * Also what runs after the first mount: a component's nodes are attached to the
+ * document only once the whole description they are in is mounted.
+ */
+export declare const createAfterUpdate: () => ((work: () => void) => void);
+//# sourceMappingURL=scope-effects.d.mts.map

package/dist/scope/scope-effects.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope-effects.d.mts","sourceRoot":"","sources":["../../src/scope/scope-effects.mts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,UACxB,UAAU,CAAC,CAAC,CAAC,QACf,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,KACvB,IAMF,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,aAAa,WAChB,QAAQ,CACd,UAAU,CAAC,WAAW,EAAE,kBAAkB,GAAG,qBAAqB,CAAC,CACpE,QACK,MAAM,YACF,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,YACtB,QAAQ,CAAC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,KAC3D,IAMF,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,QAAO,CAAC,CAAC,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,CAc/D,CAAC"}

package/dist/scope/scope-effects.mjs

@@ -0,0 +1,43 @@
+import { onScopeDispose } from 'synstate';
+
+
+
+
+
+export const subscribeInScope = (source, next) => {
+    const subscription = source.subscribe(next);
+    onScopeDispose(() => {
+        subscription.unsubscribe();
+    });
+};
+
+export const listenInScope = (target, type, listener, options) => {
+    target.addEventListener(type, listener, options);
+    onScopeDispose(() => {
+        target.removeEventListener(type, listener, options);
+    });
+};
+
+
+
+
+
+
+
+
+
+
+export const createAfterUpdate = () => {
+    let mut_alive = true;
+    onScopeDispose(() => {
+        mut_alive = false;
+    });
+    return (work) => {
+        queueMicrotask(() => {
+            if (mut_alive) {
+                work();
+            }
+        });
+    };
+};
+//# sourceMappingURL=scope-effects.mjs.map

package/dist/scope/scope-effects.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope-effects.mjs","sourceRoot":"","sources":["../../src/scope/scope-effects.mts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAmB,MAAM,UAAU,CAAC;AAG3D;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,MAAqB,EACrB,IAAwB,EAClB,EAAE;IACR,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAE5C,cAAc,CAAC,GAAG,EAAE;QAClB,YAAY,CAAC,WAAW,EAAE,CAAC;IAC7B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,yEAAyE;AACzE,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,MAEC,EACD,IAAY,EACZ,QAAgC,EAChC,OAA4D,EACtD,EAAE;IACR,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IAEjD,cAAc,CAAC,GAAG,EAAE;QAClB,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAiC,EAAE;IAClE,IAAI,SAAS,GAAG,IAAI,CAAC;IAErB,cAAc,CAAC,GAAG,EAAE;QAClB,SAAS,GAAG,KAAK,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,IAAI,EAAE,EAAE;QACd,cAAc,CAAC,GAAG,EAAE;YAClB,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,EAAE,CAAC;YACT,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synstate-dom",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Compiler-free fine-grained UI library that binds synstate observables directly to the DOM",
   "repository": {
     "type": "git",
@@ -44,21 +44,21 @@
   },
   "devDependencies": {
     "@vitest/browser-playwright": "5.0.5",
-    "eslint-config-typed": "5.20.1",
-    "eslint-plugin-ts-data-forge": "0.10.4",
-    "eslint-plugin-ts-fortress": "1.3.9",
-    "eslint-plugin-ts-type-forge": "0.8.14",
+    "eslint-config-typed": "7.3.0",
+    "eslint-plugin-ts-data-forge": "0.10.7",
+    "eslint-plugin-ts-fortress": "1.3.12",
+    "eslint-plugin-ts-type-forge": "0.8.17",
     "playwright": "1.64.1",
     "prettier": "3.9.10",
     "prettier-plugin-organize-imports": "4.3.0",
     "prettier-plugin-packagejson": "3.0.2",
-    "synstate": "6.1.0",
-    "ts-data-forge": "14.10.0",
+    "synstate": "6.1.1",
+    "ts-data-forge": "14.10.1",
     "ts-repo-utils": "10.7.1"
   },
   "peerDependencies": {
-    "synstate": ">=6.1.0",
-    "ts-data-forge": ">=14.10.0"
+    "synstate": ">=6.1.1",
+    "ts-data-forge": ">=14.10.1"
   },
   "engines": {
     "node": ">=22.23.4",

package/src/bind/bind-props.mts

@@ -8,12 +8,13 @@ import {
   propertyNames,
   viewTag,
 } from '../internal/index.mjs';
+import { listenInScope } from '../scope/index.mjs';
 
 /**
- * Binds every prop of an intrinsic element except `ref` and `children`
- * (SPEC.md 7): `class`, `style`, event handlers, the DOM properties of
- * `propertyNames`, and attributes for the rest. Subscriptions and listeners
- * are released when the current scope is disposed.
+ * Binds every prop of an intrinsic element except `ref` and `children` (SPEC.md
+ * 7): `class`, `style`, event handlers, the DOM properties of `propertyNames`,
+ * and attributes for the rest. Subscriptions and listeners are released when
+ * the current scope is disposed.
  */
 export const bindProps = (
   element: Element,
@@ -24,43 +25,42 @@ export const bindProps = (
   }
 };
 
-const bindProp = (element: Element, key: string, value: unknown): void => {
-  if (key === 'children' || key === 'ref' || !isBindable(value)) {
-    return;
-  }
-
-  if (key === 'class') {
-    bindClass(element, value);
-
-    return;
-  }
-
-  if (key === 'style') {
-    bindStyle(element, value);
+/**
+ * `true` writes an empty attribute, and `false`, `undefined` and `null` remove
+ * it.
+ */
+const writeAttribute = (
+  element: Element,
+  name: string,
+  value: unknown,
+): void => {
+  if (isBoolean(value)) {
+    element.toggleAttribute(name, value);
 
     return;
   }
 
-  if (isEventKey(key) && isEventHandler(value)) {
-    bindEvent(element, key.slice(2).toLowerCase(), value);
+  if (value === undefined || value === null) {
+    element.removeAttribute(name);
 
     return;
   }
 
-  if (propertyNameSet.has(key)) {
-    bindValue(value, (v) => {
-      Reflect.set(element, key, v);
-    });
-
-    return;
-  }
+  element.setAttribute(name, unknownToString(value));
+};
 
-  const name = attributeNameOf[key] ?? key;
+/**
+ * Every value is a `Bindable` at run time: what is neither an observable nor a
+ * view is a constant. An omitted prop is `undefined`, which is not.
+ */
+const isBindable = (value: unknown): value is Bindable<unknown> =>
+  value !== undefined && value !== null;
 
-  bindValue(value, (v) => {
-    writeAttribute(element, name, v);
-  });
-};
+/** `class` and `style` in their object form: neither an observable nor a view. */
+const isPlainObject = (
+  value: unknown,
+): value is ReadonlyRecord<string, unknown> =>
+  isRecord(value) && !isObservable(value) && !hasKey(value, viewTag);
 
 const bindClass = (element: Element, value: Bindable<unknown>): void => {
   if (!isPlainObject(value)) {
@@ -116,59 +116,162 @@ const bindStyle = (element: Element, value: Bindable<unknown>): void => {
   }
 };
 
-const bindEvent = (
-  element: Element,
-  type: string,
-  handler: EventListener,
-): void => {
-  element.addEventListener(type, handler);
+/**
+ * The radio buttons of `input`'s group: those of the same `name` and form in
+ * the same document or shadow root. Any other input is a group of its own.
+ */
+const radioGroupOf = (input: HTMLInputElement): readonly HTMLInputElement[] => {
+  const root = input.getRootNode();
+
+  if (
+    input.type !== 'radio' ||
+    input.name === '' ||
+    !(root instanceof Document || root instanceof ShadowRoot)
+  ) {
+    return [input];
+  }
 
-  onScopeDispose(() => {
-    element.removeEventListener(type, handler);
-  });
+  return Array.from(
+    root.querySelectorAll<HTMLInputElement>(
+      `input[type="radio"][name="${CSS.escape(input.name)}"]`,
+    ),
+  ).filter((radio) => radio.form === input.form);
 };
 
 /**
- * `true` writes an empty attribute, and `false`, `undefined` and `null`
- * remove it.
+ * The controlled properties of an element, created with the `change` listener
+ * that sets them back. The listener is a capturing one, which runs before the
+ * element's own handlers, so no handler on the element can stop it.
  */
-const writeAttribute = (
-  element: Element,
-  name: string,
-  value: unknown,
-): void => {
-  if (isBoolean(value)) {
-    element.toggleAttribute(name, value);
+const controlledOf = (element: HTMLInputElement): Controlled => {
+  const existing = controlled.get(element);
 
-    return;
+  if (existing !== undefined) {
+    return existing;
   }
 
-  if (value === undefined || value === null) {
-    element.removeAttribute(name);
+  const mut_restorers = new Map<ControlledKey, () => void>();
+
+  const created: Controlled = {
+    add: (key, restore) => {
+      mut_restorers.set(key, restore);
+    },
+    restore: () => {
+      for (const restore of mut_restorers.values()) {
+        restore();
+      }
+    },
+  } as const;
+
+  const onChange = (): void => {
+    requestAnimationFrame(() => {
+      for (const input of radioGroupOf(element)) {
+        controlled.get(input)?.restore();
+      }
+    });
+  };
 
-    return;
-  }
+  controlled.set(element, created);
 
-  element.setAttribute(name, unknownToString(value));
-};
+  listenInScope(element, 'change', onChange, { capture: true });
 
-const propertyNameSet: ReadonlySet<string> = new Set(propertyNames);
+  onScopeDispose(() => {
+    controlled.delete(element);
+  });
+
+  return created;
+};
 
 /**
- * Every value is a `Bindable` at run time: what is neither an observable nor
- * a view is a constant. An omitted prop is `undefined`, which is not.
+ * `checked` and `indeterminate` are controlled (SPEC.md 7.2): after a `change`,
+ * the element is drawn as the bound values again, so a change its owner did not
+ * take undoes itself. This waits for the next frame, after every handler of the
+ * event, the ancestors' included, has seen the user's change, and before it is
+ * painted. Checking a radio button unchecks the others of its group with no
+ * event on them, so a change on one sets back every bound button of the group.
  */
-const isBindable = (value: unknown): value is Bindable<unknown> =>
-  value !== undefined && value !== null;
+const bindControlled = (
+  element: HTMLInputElement,
+  key: ControlledKey,
+  value: Bindable<unknown>,
+): void => {
+  const mut_bound: { current: unknown } = { current: undefined };
 
-/** `class` and `style` in their object form: neither an observable nor a view. */
-const isPlainObject = (
-  value: unknown,
-): value is ReadonlyRecord<string, unknown> =>
-  isRecord(value) && !isObservable(value) && !hasKey(value, viewTag);
+  bindValue(value, (v) => {
+    mut_bound.current = v;
+
+    Reflect.set(element, key, v);
+  });
+
+  controlledOf(element).add(key, () => {
+    if (Reflect.get(element, key) !== mut_bound.current) {
+      Reflect.set(element, key, mut_bound.current);
+    }
+  });
+};
+
+type ControlledKey = 'checked' | 'indeterminate';
+
+type Controlled = Readonly<{
+  add: (key: ControlledKey, restore: () => void) => void;
+  /** Writes every bound property back to the element. */
+  restore: () => void;
+}>;
+
+const isControlledKey = (key: string): key is ControlledKey =>
+  key === 'checked' || key === 'indeterminate';
+
+/** The elements bound by {@link bindControlled}. */
+const controlled = new WeakMap<HTMLInputElement, Controlled>();
 
 /** `onClick`, `onPointerDown`: `on` and an upper-case letter. */
 const isEventKey = (key: string): boolean => /^on[A-Z]/u.test(key);
 
 const isEventHandler = (value: unknown): value is EventListener =>
   typeof value === 'function';
+
+const bindProp = (element: Element, key: string, value: unknown): void => {
+  if (key === 'children' || key === 'ref' || !isBindable(value)) {
+    return;
+  }
+
+  if (key === 'class') {
+    bindClass(element, value);
+
+    return;
+  }
+
+  if (key === 'style') {
+    bindStyle(element, value);
+
+    return;
+  }
+
+  if (isEventKey(key) && isEventHandler(value)) {
+    listenInScope(element, key.slice(2).toLowerCase(), value);
+
+    return;
+  }
+
+  if (isControlledKey(key) && element instanceof HTMLInputElement) {
+    bindControlled(element, key, value);
+
+    return;
+  }
+
+  if (propertyNameSet.has(key)) {
+    bindValue(value, (v) => {
+      Reflect.set(element, key, v);
+    });
+
+    return;
+  }
+
+  const name = attributeNameOf[key] ?? key;
+
+  bindValue(value, (v) => {
+    writeAttribute(element, name, v);
+  });
+};
+
+const propertyNameSet: ReadonlySet<string> = new Set(propertyNames);

package/src/constant/constant.mts

@@ -6,8 +6,8 @@ import { asConstant } from '../internal/index.mjs';
  * A value that is written once and never updated. A brand that exists only in
  * the type system: at run time it is the value itself.
  *
- * A slot that takes data accepts a `Constant<T>` but not a plain `T`, so that
- * a value read once and never updated (`count$.getSnapshot().value`) is a type
+ * A slot that takes data accepts a `Constant<T>` but not a plain `T`, so that a
+ * value read once and never updated (`count$.getSnapshot().value`) is a type
  * error rather than a binding that silently stays stale.
  */
 export type Constant<T> = Brand<T, 'synstate-dom/Constant'>;

package/src/constant/derive.mts

@@ -22,10 +22,10 @@ export const derive = <const BS extends NonEmptyTuple<Bindable<unknown>>, R>(
   bindables: BS,
   fn: (...values: BindableValues<BS>) => R,
 ): Bindable<R> => {
-  // `fn` is called with the value of each of `bindables`, position by
-  // position: the constants themselves, or their observables' values. The
-  // checker cannot follow a position through `Arr.map`, which carries one
-  // element type for the whole tuple.
+  // `fn` is called with the value of each of `bindables`, position by position:
+  // the constants themselves, or their observables' values. The checker cannot
+  // follow a position through `Arr.map`, which carries one element type for the
+  // whole tuple.
   // eslint-disable-next-line total-functions/no-unsafe-type-assertion -- see above
   const project = fn as (...values: readonly unknown[]) => R;
 

package/src/constant/view.mts

@@ -5,9 +5,9 @@ import { viewTag } from '../internal/index.mjs';
  * An observable and a function to apply to each of its values, bound without
  * creating a node in the graph. Made by {@link view}.
  *
- * The source's value type is hidden behind `open`, which hands the pair back
- * to a callback that is generic in it: whoever opens a view sees a source and
- * a function that agree with each other, with no assertion on either side.
+ * The source's value type is hidden behind `open`, which hands the pair back to
+ * a callback that is generic in it: whoever opens a view sees a source and a
+ * function that agree with each other, with no assertion on either side.
  */
 export type View<T> = Readonly<{
   [viewTag]: true;

package/src/control/for.mts

@@ -31,8 +31,8 @@ import { longestIncreasingSubsequence } from './longest-increasing-subsequence.m
  * nodes; the rows that stay are moved as little as the longest increasing
  * subsequence allows.
  *
- * `key` is required, as in React; `(_, i) => i` matches rows by position. A
- * key that appears twice is reported with `console.error`, and its later
+ * `key` is required, as in React; `(_, i) => i` matches rows by position. A key
+ * that appears twice is reported with `console.error`, and its later
  * occurrences are rebuilt on every update.
  */
 export const For = <T,>({
@@ -57,8 +57,8 @@ export const For = <T,>({
     );
 
     // `index$` is a node of its own in every row, visited on every update of
-    // `items`; a `children` that declares no second parameter is not given
-    // one, as Solid's `For` does.
+    // `items`; a `children` that declares no second parameter is not given one,
+    // as Solid's `For` does.
     const usesIndex = children.length >= 2;
 
     const callChildren: BivariantHack<
@@ -132,8 +132,8 @@ export const For = <T,>({
     /**
      * When no key stays, takes every row's nodes out in one range, rather than
      * one by one as each row's scope is disposed: clearing or replacing the
-     * whole list is then one DOM operation. The scopes are disposed after,
-     * and find their nodes already detached.
+     * whole list is then one DOM operation. The scopes are disposed after, and
+     * find their nodes already detached.
      */
     const removeAllAtOnceIfEveryKeyGoes = (
       previousOrder: readonly unknown[],
@@ -295,12 +295,12 @@ const toEntries = <T,>(
 };
 
 /**
- * One field of a row's entry, as a single child of `entries$`, where
- * `map`, `filter`, `withInitialValue` and `skipIfNoChange` would make four:
+ * One field of a row's entry, as a single child of `entries$`, where `map`,
+ * `filter`, `withInitialValue` and `skipIfNoChange` would make four:
  * creating and disposing a row costs roughly its number of nodes.
  *
- * A row whose key has gone keeps its last value; its scope is disposed in
- * the same update.
+ * A row whose key has gone keeps its last value; its scope is disposed in the
+ * same update.
  */
 const rowField = <T, A>(
   entries$: Observable<Entries<T>>,

package/src/control/if.mts

@@ -3,8 +3,8 @@ import { mountable, type JSX } from '../jsx/index.mjs';
 import { mountSwitch } from './mount-switch.mjs';
 
 /**
- * Mounts `then` while `cond` is `true` and `else` while it is `false`
- * (SPEC.md 8.2). Nothing is mounted for an omitted `else`.
+ * Mounts `then` while `cond` is `true` and `else` while it is `false` (SPEC.md
+ * 8.2). Nothing is mounted for an omitted `else`.
  *
  * Both branches are descriptions, so only the one chosen is mounted. A branch
  * is rebuilt only when `cond` flips; flipping disposes the previous branch's

package/src/control/longest-increasing-subsequence.mts

@@ -1,7 +1,7 @@
 /**
- * The positions in `values` of one longest strictly increasing subsequence,
- * in O(n log n). `For` keeps the rows at these positions in place and moves
- * only the others (SPEC.md 8.4).
+ * The positions in `values` of one longest strictly increasing subsequence, in
+ * O(n log n). `For` keeps the rows at these positions in place and moves only
+ * the others (SPEC.md 8.4).
  */
 export const longestIncreasingSubsequence = (
   values: readonly number[],

package/src/control/match-optional.mts

@@ -13,10 +13,10 @@ import { mountSwitch } from './mount-switch.mjs';
  * Mounts `some` while `value` holds a value and `none` while it is empty
  * (SPEC.md 8.3).
  *
- * `some` is called once per change from empty to present, with an observable
- * of the value narrowed to `T`. While the value stays present, new values flow
- * through that observable rather than rebuilding the branch. It is derived
- * from `value`, not written to, so nothing is written during propagation.
+ * `some` is called once per change from empty to present, with an observable of
+ * the value narrowed to `T`. While the value stays present, new values flow
+ * through that observable rather than rebuilding the branch. It is derived from
+ * `value`, not written to, so nothing is written during propagation.
  */
 export const MatchOptional = <T,>({
   value,

package/src/control/match-result.mts

@@ -10,13 +10,12 @@ import { mountable, type JSX } from '../jsx/index.mjs';
 import { mountSwitch } from './mount-switch.mjs';
 
 /**
- * Mounts `ok` while `value` is `Ok` and `err` while it is `Err`
- * (SPEC.md 8.3).
+ * Mounts `ok` while `value` is `Ok` and `err` while it is `Err` (SPEC.md 8.3).
  *
- * Each branch is called once per change of tag, with an observable of the
- * value narrowed to `S` or `E`; while the tag stays the same, new values flow
- * through that observable rather than rebuilding the branch. It is derived
- * from `value`, not written to, so nothing is written during propagation.
+ * Each branch is called once per change of tag, with an observable of the value
+ * narrowed to `S` or `E`; while the tag stays the same, new values flow through
+ * that observable rather than rebuilding the branch. It is derived from
+ * `value`, not written to, so nothing is written during propagation.
  */
 export const MatchResult = <S, E>({
   value,

package/src/control/mount-switch.mts

@@ -14,11 +14,11 @@ import { toNodes, type Mountable, type MountedNodes } from '../jsx/index.mjs';
  * the value of `value` (SPEC.md 8.1–8.3).
  *
  * The branch is rebuilt only when `keyOf` gives a different key: within the
- * same key the branch keeps its nodes and its scope, and it is up to the
- * branch to follow the value (`MatchOptional` hands it an observable derived
- * from `value`). Each branch is mounted in a scope of its own, a child of the
- * scope the switch was mounted in; disposing the branch's scope removes its
- * nodes, so the switch's own nodes stay accurate however often it switches.
+ * same key the branch keeps its nodes and its scope, and it is up to the branch
+ * to follow the value (`MatchOptional` hands it an observable derived from
+ * `value`). Each branch is mounted in a scope of its own, a child of the scope
+ * the switch was mounted in; disposing the branch's scope removes its nodes, so
+ * the switch's own nodes stay accurate however often it switches.
  *
  * `branch` runs inside the new scope, so whatever it creates belongs to the
  * branch.

package/src/control/portal.mts

@@ -3,8 +3,8 @@ import { mountChild, mountable, type Child, type JSX } from '../jsx/index.mjs';
 
 /**
  * Mounts `children` into `target` (`document.body` when omitted) rather than
- * where it is written (SPEC.md 8.6): for a modal, a tooltip or a toast that
- * has to escape an ancestor's `overflow: hidden` or `z-index`.
+ * where it is written (SPEC.md 8.6): for a modal, a tooltip or a toast that has
+ * to escape an ancestor's `overflow: hidden` or `z-index`.
  *
  * The children belong to the scope where `Portal` is written, so closing the
  * enclosing `If` branch removes them too. Nothing is left in the place it is

package/src/index.mts

@@ -2,3 +2,4 @@ export * from './constant/index.mjs';
 export * from './control/index.mjs';
 export * from './jsx/index.mjs';
 export * from './render.mjs';
+export * from './scope/index.mjs';