foldkit-primitives 0.15.3 → 0.16.0

package/dist/dom/fluid-hover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluid-hover.js","names":[],"sources":["../../src/dom/fluid-hover.ts"],"sourcesContent":["import { Effect, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\n\n/** The custom properties `FluidHover` writes on its container for a highlight named `name`. */\nexport const fluidHovered = (name: string) =>\n  ({\n    x: `--fk-${name}-x`,\n    y: `--fk-${name}-y`,\n    w: `--fk-${name}-w`,\n    h: `--fk-${name}-h`,\n    /** `1` while an item is highlighted, `0` once the pointer and focus have left. */\n    shown: `--fk-${name}-shown`,\n    /**\n     * `0` for the frame the highlight appears in, then `1`: a highlight's\n     * movement scales its duration by it, so it appears on its item rather\n     * than sliding in from where it last was.\n     */\n    moving: `--fk-${name}-moving`,\n  }) as const\n\n/**\n * The attribute `FluidHover` sets on its container, to the highlight's name,\n * while it runs: a stylist draws the highlight, and drops each item's own\n * hover, only under it.\n */\nexport const FLUID_HOVER_ATTRIBUTE = 'data-fluid-hover'\n\n/** The attribute that names, inside an item, the control a press in a gap reaches. */\nexport const FLUID_PRESS_ATTRIBUTE = 'data-fluid-press'\n\n/** The attribute on the item the highlight is shown on, for what CSS draws beside it. */\nexport const FLUID_LIT_ATTRIBUTE = 'data-fluid-lit'\n\n/**\n * The attribute `FluidHover` sets on its container, to the highlight's name,\n * while the item that highlight is on is held. A stylist draws the press on\n * the highlight (`data-fluid-held`) rather than on the item, whose own press\n * is hidden under it; a press in a gap marks it too where `gapClick` sends\n * that press to the lit item.\n */\nexport const FLUID_HELD_ATTRIBUTE = 'data-fluid-held'\n\nconst Axis = Schema.Literals(['x', 'y', 'xy'])\nexport type FluidAxis = typeof Axis.Type\n\n/** How far a point is from a rectangle along each axis: zero inside it. */\nconst gap = (low: number, high: number, at: number) => Math.max(low - at, 0, at - high)\n\n// On one axis the other only breaks ties, so a list's highlight never leaves\n// the row level with the pointer for a nearer edge of the next column.\nconst away: Record<FluidAxis, (dx: number, dy: number) => number> = {\n  x: (dx, dy) => dx * 1e6 + dy,\n  y: (dx, dy) => dy * 1e6 + dx,\n  xy: Math.hypot,\n}\n\nconst distance = (rect: DOMRect, x: number, y: number, axis: FluidAxis) =>\n  away[axis](gap(rect.left, rect.right, x), gap(rect.top, rect.bottom, y))\n\nconst isDisabled = (item: Element) =>\n  item.matches('[aria-disabled=\"true\"], [data-disabled]:not([data-disabled=\"false\"]), :disabled')\n\n/**\n * One highlight that follows the pointer across a container's items, as a\n * Mount, with no Message and no Model: which item the pointer is nearest is\n * presentation, known to the DOM and to no transition.\n *\n * The item nearest the pointer is the one highlighted, so the pointer in a gap\n * between two items still points at one, and the highlight moves from item to\n * item instead of blinking off between them. On the `y` axis nearness is read\n * vertically (a list), on `x` horizontally (a strip), on `xy` both (a grid). A\n * disabled item (`aria-disabled=\"true\"`, `data-disabled`, `:disabled`) is never\n * highlighted. An item reached by the keyboard (`:focus-visible`) is\n * highlighted too, and with `focused`, the item that selector finds from a\n * focused element that is no item (a tree's row, from its focused\n * `treeitem`, which also holds the rows beneath it); a touch highlights\n * nothing, since there is no pointer to\n * follow before the press.\n *\n * The container gets `--fk-<name>-x`, `-y`, `-w` and `-h` in pixels, relative\n * to its scroll box like `Measure`'s, and `-shown` and `-moving` (see\n * `fluidHovered`); a view draws the highlight as an absolutely placed child\n * that reads them. With `gapClick`, a click in a gap presses the highlighted\n * item: its descendant marked `data-fluid-press`, or the item itself; with\n * `gapReach` too, only a click within that many pixels of it, as a grid of\n * cards with wide gutters wants (Fluid Functionalism's uses 16). A popup\n * measured before it has a layout box keeps its last complete place, and\n * tries again for three frames, rather than drawing the highlight at zero.\n * The item the highlight is shown on carries `data-fluid-lit`, so a style\n * can change what sits beside it (a table hides the lines around the lit\n * row); its container carries `data-fluid-held` while that item is pressed.\n *\n * `follows` names the item the highlight sits on while the pointer is not\n * moving it: a menu marks the row its keys reach (`[data-active]`), and the\n * highlight goes there whenever that mark moves, so the keys and the pointer\n * light the same one. `from` names the item a fresh highlight grows out of,\n * as a tab's hover leaves the chosen tab. A highlight always fades where it\n * is: once the pointer leaves, nothing should move. It stays only for an item\n * the keyboard reached (`:focus-visible`), not one a click focused.\n */\nexport const FluidHover = Mount.defineStream('FluidHover', {\n  messages: [Schema.Never],\n  args: {\n    /** The highlight's name, which names the custom properties. */\n    name: Schema.String,\n    /** The selector of an item within the container. */\n    item: Schema.String,\n    axis: Axis,\n    gapClick: Schema.Boolean,\n    /** How far from the highlighted item, in pixels, a click in a gap still presses it. */\n    gapReach: Schema.optional(Schema.Number),\n    /** The selector of the item the highlight sits on while the pointer is not moving it. */\n    follows: Schema.optional(Schema.String),\n    /** The selector of the item a fresh highlight grows out of. */\n    from: Schema.optional(Schema.String),\n    /** The selector, run from a focused element outside any item, of the item it lights. */\n    focused: Schema.optional(Schema.String),\n  },\n  execute: ({ element, name, item: selector, axis, gapClick, gapReach, follows, from, focused }) =>\n    Stream.callback<never>(() =>\n      Effect.acquireRelease(\n        Effect.sync(() => {\n          const container = element as HTMLElement\n          const property = fluidHovered(name)\n          let active: Element | null = null\n          let followed: Element | null = null\n          let pointer: { readonly x: number; readonly y: number } | null = null\n          let frame: number | undefined\n\n          const origin = () => (from === undefined ? null : container.querySelector(from))\n          let retries = 0\n          const place = (at: Element | null = active) => {\n            if (at === null) return\n            const box = container.getBoundingClientRect()\n            const rect = at.getBoundingClientRect()\n            // No layout box yet (a popup still opening): keep the last place and look again.\n            if (rect.width === 0 && rect.height === 0) {\n              if (retries < 3) {\n                retries += 1\n                requestAnimationFrame(() => place(at))\n              }\n              return\n            }\n            retries = 0\n            const x = rect.left - box.left - container.clientLeft + container.scrollLeft\n            const y = rect.top - box.top - container.clientTop + container.scrollTop\n            container.style.setProperty(property.x, `${x}px`)\n            container.style.setProperty(property.y, `${y}px`)\n            container.style.setProperty(property.w, `${rect.width}px`)\n            container.style.setProperty(property.h, `${rect.height}px`)\n          }\n          /** Marks `item` as the lit one, and nothing else. */\n          const light = (item: Element | null) => {\n            container\n              .querySelectorAll(`[${FLUID_LIT_ATTRIBUTE}]`)\n              .forEach(each => each !== item && each.removeAttribute(FLUID_LIT_ATTRIBUTE))\n            item?.setAttribute(FLUID_LIT_ATTRIBUTE, '')\n          }\n          const show = (next: Element) => {\n            const appearing = container.style.getPropertyValue(property.shown) !== '1'\n            active = next\n            light(next)\n            const grows = appearing ? origin() : null\n            if (appearing) container.style.setProperty(property.moving, '0')\n            if (grows === null) {\n              place()\n              container.style.setProperty(property.shown, '1')\n            } else {\n              // Drawn first where it grows from, then moved: it travels out of that item.\n              place(grows)\n              requestAnimationFrame(() => {\n                if (active !== next) return\n                place()\n                container.style.setProperty(property.shown, '1')\n              })\n            }\n            if (appearing) {\n              // The frame after: by then the jump to the item has been drawn without moving.\n              requestAnimationFrame(() => container.style.setProperty(property.moving, '1'))\n            }\n          }\n          const hide = () => {\n            container.style.setProperty(property.shown, '0')\n            container.removeAttribute(FLUID_HELD_ATTRIBUTE)\n            light(null)\n          }\n          /** Whether the keyboard has an item focused, which the highlight then stays on. */\n          const keyed = () => {\n            const focused = document.activeElement\n            return (\n              focused !== null && container.contains(focused) && focused.matches(':focus-visible')\n            )\n          }\n          const nearest = (x: number, y: number) => {\n            let best: Element | null = null\n            let bestDistance = Infinity\n            for (const each of Array.from(container.querySelectorAll(selector))) {\n              if (isDisabled(each)) continue\n              const far = distance(each.getBoundingClientRect(), x, y, axis)\n              if (far < bestDistance) {\n                best = each\n                bestDistance = far\n              }\n            }\n            return best\n          }\n          const follow = () => {\n            frame = undefined\n            if (pointer === null) return\n            const next = nearest(pointer.x, pointer.y)\n            if (next === null) hide()\n            else if (next !== active || container.style.getPropertyValue(property.shown) !== '1')\n              show(next)\n          }\n\n          const move = (event: PointerEvent) => {\n            if (event.pointerType === 'touch') return\n            pointer = { x: event.clientX, y: event.clientY }\n            if (frame === undefined) frame = requestAnimationFrame(follow)\n          }\n          const leave = () => {\n            pointer = null\n            release()\n            if (!keyed()) hide()\n          }\n          const focus = (event: FocusEvent) => {\n            if (!(event.target instanceof Element) || !event.target.matches(':focus-visible')) {\n              return\n            }\n            const owner =\n              event.target.closest(selector) ??\n              (focused === undefined ? null : event.target.querySelector(focused))\n            if (owner !== null && container.contains(owner) && !isDisabled(owner)) show(owner)\n          }\n          const blur = (event: FocusEvent) => {\n            const to = event.relatedTarget\n            if (pointer === null && !(to instanceof Node && container.contains(to))) hide()\n          }\n          const reachOf = (item: Element, event: MouseEvent) =>\n            gapReach === undefined ||\n            distance(item.getBoundingClientRect(), event.clientX, event.clientY, 'xy') <= gapReach\n          /** Whether a click in a gap presses the lit item, within `gapReach` of it. */\n          const reaches = (item: Element, event: MouseEvent) => gapClick && reachOf(item, event)\n          const click = (event: MouseEvent) => {\n            if (active === null) return\n            if (container.style.getPropertyValue(property.shown) !== '1') return\n            const target = event.target\n            if (!(target instanceof Element) || target.closest(selector) !== null) return\n            if (!reaches(active, event)) return\n            const press = active.querySelector(`[${FLUID_PRESS_ATTRIBUTE}]`) ?? active\n            if (press instanceof HTMLElement) press.click()\n          }\n          const soon = () => {\n            if (active !== null) requestAnimationFrame(() => place())\n          }\n          /**\n           * Marks the container as held where the press is the lit item's: the\n           * item itself, or a gap a click there reaches through (`gapClick`). A\n           * press on another item is that item's, once the pointer has lit it.\n           */\n          const press = (event: PointerEvent) => {\n            if (event.button !== 0 || active === null) return\n            if (container.style.getPropertyValue(property.shown) !== '1') return\n            const target = event.target\n            if (!(target instanceof Element)) return\n            const inItem = target.closest(selector) !== null\n            if (inItem && !active.contains(target)) return\n            if (!inItem && !reaches(active, event)) return\n            container.setAttribute(FLUID_HELD_ATTRIBUTE, name)\n          }\n          const release = () => container.removeAttribute(FLUID_HELD_ATTRIBUTE)\n          /** The marked item moved: the highlight goes with it, or fades if it is gone. */\n          const marked = () => {\n            if (follows === undefined) return\n            const next = container.querySelector(follows)\n            if (next === followed) return\n            followed = next\n            if (next !== null && !isDisabled(next)) show(next)\n            else if (pointer === null && !keyed()) hide()\n          }\n\n          // Where there is no layout (jsdom has no ResizeObserver) nothing moves to\n          // follow, and a view drawn there is no worse for the highlight's absence.\n          const sizes = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(soon)\n          const marks = follows === undefined ? undefined : new MutationObserver(marked)\n          sizes?.observe(container)\n          marks?.observe(container, { subtree: true, childList: true, attributes: true })\n          container.addEventListener('pointermove', move, { passive: true })\n          container.addEventListener('pointerdown', press)\n          container.addEventListener('pointerleave', leave)\n          // Released outside the container, or cancelled by the browser (a\n          // scroll taking the gesture): the press ended either way.\n          window.addEventListener('pointerup', release)\n          window.addEventListener('pointercancel', release)\n          container.addEventListener('focusin', focus)\n          container.addEventListener('focusout', blur)\n          container.addEventListener('click', click)\n          container.addEventListener('scroll', soon, { passive: true })\n          window.addEventListener('resize', soon)\n          container.style.setProperty(property.shown, '0')\n          container.setAttribute(FLUID_HOVER_ATTRIBUTE, name)\n          marked()\n          return () => {\n            if (frame !== undefined) cancelAnimationFrame(frame)\n            sizes?.disconnect()\n            marks?.disconnect()\n            container.removeAttribute(FLUID_HOVER_ATTRIBUTE)\n            container.removeAttribute(FLUID_HELD_ATTRIBUTE)\n            light(null)\n            container.removeEventListener('pointermove', move)\n            container.removeEventListener('pointerdown', press)\n            container.removeEventListener('pointerleave', leave)\n            window.removeEventListener('pointerup', release)\n            window.removeEventListener('pointercancel', release)\n            container.removeEventListener('focusin', focus)\n            container.removeEventListener('focusout', blur)\n            container.removeEventListener('click', click)\n            container.removeEventListener('scroll', soon)\n            window.removeEventListener('resize', soon)\n          }\n        }),\n        stop => Effect.sync(stop),\n      ),\n    ),\n})\n"],"mappings":"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"}

package/dist/dom/focus-scope.d.ts

@@ -0,0 +1,21 @@
+import { Schema } from "effect";
+import * as Mount from "foldkit/mount";
+/** Tabbable descendants in DOM order: focusable, visible, and not `tabindex="-1"`. */
+export declare const tabbableWithin: (root: Element) => ReadonlyArray<HTMLElement>;
+/**
+ * A focus scope as a Mount: on insert it remembers what was focused, focuses
+ * an initial element inside, and with `contain` keeps Tab and Shift+Tab
+ * cycling inside; on unmount it gives focus back. Nothing crosses to the
+ * Model: which element had focus is a DOM fact, so this is element lifecycle,
+ * not state. It emits no Messages.
+ */
+export declare const FocusScope: Mount.MountDefinitionWithArgs<"FocusScope", {
+  /** Keep Tab, Shift+Tab, and a stray focus inside. */
+  contain: Schema.Boolean;
+  /** Give focus back to what had it, on unmount. */
+  restore: Schema.Boolean;
+  /** A selector inside the element to focus first; else the first tabbable
+   *  descendant, else the element itself when it is focusable. */
+  initialFocus: Schema.NullOr<Schema.String>;
+}, never>;
+//# sourceMappingURL=focus-scope.d.ts.map

package/dist/dom/focus-scope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-scope.d.ts","names":[],"sources":["../../src/dom/focus-scope.ts"],"mappings":";;;qBAmBa,iBAAc,MAAU,YAAU,cAAc;;;;;;;;qBAmBhD,YAAU,MAAA"}

package/dist/dom/focus-scope.js

@@ -0,0 +1,93 @@
+import { Effect, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+// src/dom/focus-scope.ts
+const FOCUSABLE = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]",
+	"[contenteditable=\"true\"]"
+].join(", ");
+const isVisible = (element) => {
+	const probe = element;
+	return element.closest("[hidden], [inert]") === null && (probe.checkVisibility?.() ?? true);
+};
+/** Tabbable descendants in DOM order: focusable, visible, and not `tabindex="-1"`. */
+const tabbableWithin = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter((element) => element.tabIndex >= 0 && isVisible(element));
+const focusFirst = (elements) => {
+	const first = elements[0];
+	if (first === void 0) return false;
+	first.focus();
+	return true;
+};
+/**
+* A focus scope as a Mount: on insert it remembers what was focused, focuses
+* an initial element inside, and with `contain` keeps Tab and Shift+Tab
+* cycling inside; on unmount it gives focus back. Nothing crosses to the
+* Model: which element had focus is a DOM fact, so this is element lifecycle,
+* not state. It emits no Messages.
+*/
+const FocusScope = Mount.defineStream("FocusScope", {
+	messages: [Schema.Never],
+	args: {
+		/** Keep Tab, Shift+Tab, and a stray focus inside. */
+		contain: Schema.Boolean,
+		/** Give focus back to what had it, on unmount. */
+		restore: Schema.Boolean,
+		/** A selector inside the element to focus first; else the first tabbable
+		*  descendant, else the element itself when it is focusable. */
+		initialFocus: Schema.NullOr(Schema.String)
+	},
+	execute: ({ element, contain, restore, initialFocus }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
+		const ownerDocument = element.ownerDocument;
+		const previous = ownerDocument.activeElement;
+		const initial = initialFocus === null ? null : element.querySelector(initialFocus);
+		if (initial !== null) initial.focus();
+		else if (!focusFirst(tabbableWithin(element)) && element instanceof HTMLElement) element.focus();
+		const onKeyDown = (event) => {
+			const key = event;
+			if (key.key !== "Tab") return;
+			const tabbable = tabbableWithin(element);
+			const first = tabbable[0];
+			const last = tabbable[tabbable.length - 1];
+			if (first === void 0 || last === void 0) {
+				key.preventDefault();
+				return;
+			}
+			const active = ownerDocument.activeElement;
+			if (key.shiftKey && (active === first || !element.contains(active))) {
+				key.preventDefault();
+				last.focus();
+			} else if (!key.shiftKey && (active === last || !element.contains(active))) {
+				key.preventDefault();
+				first.focus();
+			}
+		};
+		const onFocusIn = (event) => {
+			const target = event.target;
+			if (target instanceof Node && element.contains(target)) return;
+			focusFirst(tabbableWithin(element));
+		};
+		if (contain) {
+			element.addEventListener("keydown", onKeyDown);
+			ownerDocument.addEventListener("focusin", onFocusIn);
+		}
+		return {
+			previous,
+			onKeyDown,
+			onFocusIn,
+			ownerDocument
+		};
+	}), ({ previous, onKeyDown, onFocusIn, ownerDocument }) => Effect.sync(() => {
+		if (contain) {
+			element.removeEventListener("keydown", onKeyDown);
+			ownerDocument.removeEventListener("focusin", onFocusIn);
+		}
+		if (restore && previous instanceof HTMLElement && ownerDocument.contains(previous)) previous.focus();
+	})))
+});
+export { FocusScope, tabbableWithin };
+
+//# sourceMappingURL=focus-scope.js.map

package/dist/dom/focus-scope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-scope.js","names":[],"sources":["../../src/dom/focus-scope.ts"],"sourcesContent":["import { Effect, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\n\nconst FOCUSABLE = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]',\n  '[contenteditable=\"true\"]',\n].join(', ')\n\nconst isVisible = (element: Element): boolean => {\n  const probe = element as { checkVisibility?: () => boolean }\n  return element.closest('[hidden], [inert]') === null && (probe.checkVisibility?.() ?? true)\n}\n\n/** Tabbable descendants in DOM order: focusable, visible, and not `tabindex=\"-1\"`. */\nexport const tabbableWithin = (root: Element): ReadonlyArray<HTMLElement> =>\n  Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n    element => element.tabIndex >= 0 && isVisible(element),\n  )\n\nconst focusFirst = (elements: ReadonlyArray<HTMLElement>): boolean => {\n  const first = elements[0]\n  if (first === undefined) return false\n  first.focus()\n  return true\n}\n\n/**\n * A focus scope as a Mount: on insert it remembers what was focused, focuses\n * an initial element inside, and with `contain` keeps Tab and Shift+Tab\n * cycling inside; on unmount it gives focus back. Nothing crosses to the\n * Model: which element had focus is a DOM fact, so this is element lifecycle,\n * not state. It emits no Messages.\n */\nexport const FocusScope = Mount.defineStream('FocusScope', {\n  messages: [Schema.Never],\n  args: {\n    /** Keep Tab, Shift+Tab, and a stray focus inside. */\n    contain: Schema.Boolean,\n    /** Give focus back to what had it, on unmount. */\n    restore: Schema.Boolean,\n    /** A selector inside the element to focus first; else the first tabbable\n     *  descendant, else the element itself when it is focusable. */\n    initialFocus: Schema.NullOr(Schema.String),\n  },\n  execute: ({ element, contain, restore, initialFocus }) =>\n    Stream.callback<never>(() =>\n      Effect.acquireRelease(\n        Effect.sync(() => {\n          const ownerDocument = element.ownerDocument\n          const previous = ownerDocument.activeElement\n          const initial =\n            initialFocus === null ? null : element.querySelector<HTMLElement>(initialFocus)\n          if (initial !== null) initial.focus()\n          else if (!focusFirst(tabbableWithin(element)) && element instanceof HTMLElement) {\n            element.focus()\n          }\n          const onKeyDown = (event: Event) => {\n            const key = event as KeyboardEvent\n            if (key.key !== 'Tab') return\n            const tabbable = tabbableWithin(element)\n            const first = tabbable[0]\n            const last = tabbable[tabbable.length - 1]\n            if (first === undefined || last === undefined) {\n              key.preventDefault()\n              return\n            }\n            const active = ownerDocument.activeElement\n            if (key.shiftKey && (active === first || !element.contains(active))) {\n              key.preventDefault()\n              last.focus()\n            } else if (!key.shiftKey && (active === last || !element.contains(active))) {\n              key.preventDefault()\n              first.focus()\n            }\n          }\n          const onFocusIn = (event: Event) => {\n            const target = event.target\n            if (target instanceof Node && element.contains(target)) return\n            focusFirst(tabbableWithin(element))\n          }\n          if (contain) {\n            element.addEventListener('keydown', onKeyDown)\n            ownerDocument.addEventListener('focusin', onFocusIn)\n          }\n          return { previous, onKeyDown, onFocusIn, ownerDocument }\n        }),\n        ({ previous, onKeyDown, onFocusIn, ownerDocument }) =>\n          Effect.sync(() => {\n            if (contain) {\n              element.removeEventListener('keydown', onKeyDown)\n              ownerDocument.removeEventListener('focusin', onFocusIn)\n            }\n            if (restore && previous instanceof HTMLElement && ownerDocument.contains(previous)) {\n              previous.focus()\n            }\n          }),\n      ),\n    ),\n})\n"],"mappings":";;;AAGA,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,IAAI;AAEX,MAAM,aAAa,YAA8B;CAC/C,MAAM,QAAQ;CACd,OAAO,QAAQ,QAAQ,mBAAmB,MAAM,SAAS,MAAM,kBAAkB,KAAK;AACxF;;AAGA,MAAa,kBAAkB,SAC7B,MAAM,KAAK,KAAK,iBAA8B,SAAS,CAAC,CAAC,CAAC,QACxD,YAAW,QAAQ,YAAY,KAAK,UAAU,OAAO,CACvD;AAEF,MAAM,cAAc,aAAkD;CACpE,MAAM,QAAQ,SAAS;CACvB,IAAI,UAAU,KAAA,GAAW,OAAO;CAChC,MAAM,MAAM;CACZ,OAAO;AACT;;;;;;;;AASA,MAAa,aAAa,MAAM,aAAa,cAAc;CACzD,UAAU,CAAC,OAAO,KAAK;CACvB,MAAM;;EAEJ,SAAS,OAAO;;EAEhB,SAAS,OAAO;;;EAGhB,cAAc,OAAO,OAAO,OAAO,MAAM;CAC3C;CACA,UAAU,EAAE,SAAS,SAAS,SAAS,mBACrC,OAAO,eACL,OAAO,eACL,OAAO,WAAW;EAChB,MAAM,gBAAgB,QAAQ;EAC9B,MAAM,WAAW,cAAc;EAC/B,MAAM,UACJ,iBAAiB,OAAO,OAAO,QAAQ,cAA2B,YAAY;EAChF,IAAI,YAAY,MAAM,QAAQ,MAAM;OAC/B,IAAI,CAAC,WAAW,eAAe,OAAO,CAAC,KAAK,mBAAmB,aAClE,QAAQ,MAAM;EAEhB,MAAM,aAAa,UAAiB;GAClC,MAAM,MAAM;GACZ,IAAI,IAAI,QAAQ,OAAO;GACvB,MAAM,WAAW,eAAe,OAAO;GACvC,MAAM,QAAQ,SAAS;GACvB,MAAM,OAAO,SAAS,SAAS,SAAS;GACxC,IAAI,UAAU,KAAA,KAAa,SAAS,KAAA,GAAW;IAC7C,IAAI,eAAe;IACnB;GACF;GACA,MAAM,SAAS,cAAc;GAC7B,IAAI,IAAI,aAAa,WAAW,SAAS,CAAC,QAAQ,SAAS,MAAM,IAAI;IACnE,IAAI,eAAe;IACnB,KAAK,MAAM;GACb,OAAO,IAAI,CAAC,IAAI,aAAa,WAAW,QAAQ,CAAC,QAAQ,SAAS,MAAM,IAAI;IAC1E,IAAI,eAAe;IACnB,MAAM,MAAM;GACd;EACF;EACA,MAAM,aAAa,UAAiB;GAClC,MAAM,SAAS,MAAM;GACrB,IAAI,kBAAkB,QAAQ,QAAQ,SAAS,MAAM,GAAG;GACxD,WAAW,eAAe,OAAO,CAAC;EACpC;EACA,IAAI,SAAS;GACX,QAAQ,iBAAiB,WAAW,SAAS;GAC7C,cAAc,iBAAiB,WAAW,SAAS;EACrD;EACA,OAAO;GAAE;GAAU;GAAW;GAAW;EAAc;CACzD,CAAC,IACA,EAAE,UAAU,WAAW,WAAW,oBACjC,OAAO,WAAW;EAChB,IAAI,SAAS;GACX,QAAQ,oBAAoB,WAAW,SAAS;GAChD,cAAc,oBAAoB,WAAW,SAAS;EACxD;EACA,IAAI,WAAW,oBAAoB,eAAe,cAAc,SAAS,QAAQ,GAC/E,SAAS,MAAM;CAEnB,CAAC,CACL,CACF;AACJ,CAAC"}

package/dist/dom/follow-tab-stop.d.ts

@@ -0,0 +1,11 @@
+import * as Mount from "foldkit/mount";
+/**
+ * Keeps focus that is inside a container of roving tab stops on its stop, as a
+ * Mount: when a transition moves the stop (a row made current by a command the
+ * container did not see, such as a duplicate) or removes the focused
+ * descendant (a deleted row), focus goes to the descendant with
+ * `tabindex="0"`. It sends no Message. Focus outside the container is never
+ * taken, and focus the user moved away stays where it went.
+ */
+export declare const FollowTabStop: Mount.MountDefinitionNoArgs<"FollowTabStop", never>;
+//# sourceMappingURL=follow-tab-stop.d.ts.map

package/dist/dom/follow-tab-stop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"follow-tab-stop.d.ts","names":[],"sources":["../../src/dom/follow-tab-stop.ts"],"mappings":";;;;;;;;;qBAWa,eAAa,MAAA"}

package/dist/dom/follow-tab-stop.js

@@ -0,0 +1,54 @@
+import { Effect, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+// src/dom/follow-tab-stop.ts
+/**
+* Keeps focus that is inside a container of roving tab stops on its stop, as a
+* Mount: when a transition moves the stop (a row made current by a command the
+* container did not see, such as a duplicate) or removes the focused
+* descendant (a deleted row), focus goes to the descendant with
+* `tabindex="0"`. It sends no Message. Focus outside the container is never
+* taken, and focus the user moved away stays where it went.
+*/
+const FollowTabStop = Mount.defineStream("FollowTabStop", {
+	messages: [Schema.Never],
+	execute: ({ element }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
+		let within = element.contains(document.activeElement);
+		const entered = () => {
+			within = true;
+		};
+		const left = (event) => {
+			const next = event.relatedTarget;
+			if (next instanceof Node && element.contains(next)) return;
+			const from = event.target;
+			queueMicrotask(() => {
+				if (!(from instanceof Node) || from.isConnected) within = false;
+			});
+		};
+		const follow = () => {
+			if (!within) return;
+			const stop = element.querySelector("[tabindex=\"0\"]");
+			const focused = document.activeElement;
+			if (!(stop instanceof HTMLElement) || stop === focused) return;
+			const lost = focused === null || focused === document.body;
+			const passed = focused !== null && element.contains(focused) && focused.getAttribute("tabindex") === "-1";
+			if (lost || passed) stop.focus();
+		};
+		const changes = new MutationObserver(follow);
+		element.addEventListener("focusin", entered);
+		element.addEventListener("focusout", left);
+		changes.observe(element, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: ["tabindex"]
+		});
+		return () => {
+			changes.disconnect();
+			element.removeEventListener("focusin", entered);
+			element.removeEventListener("focusout", left);
+		};
+	}), (stop) => Effect.sync(stop)))
+});
+export { FollowTabStop };
+
+//# sourceMappingURL=follow-tab-stop.js.map

package/dist/dom/follow-tab-stop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"follow-tab-stop.js","names":[],"sources":["../../src/dom/follow-tab-stop.ts"],"sourcesContent":["import { Effect, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\n\n/**\n * Keeps focus that is inside a container of roving tab stops on its stop, as a\n * Mount: when a transition moves the stop (a row made current by a command the\n * container did not see, such as a duplicate) or removes the focused\n * descendant (a deleted row), focus goes to the descendant with\n * `tabindex=\"0\"`. It sends no Message. Focus outside the container is never\n * taken, and focus the user moved away stays where it went.\n */\nexport const FollowTabStop = Mount.defineStream('FollowTabStop', {\n  messages: [Schema.Never],\n  execute: ({ element }) =>\n    Stream.callback<never>(() =>\n      Effect.acquireRelease(\n        Effect.sync(() => {\n          let within = element.contains(document.activeElement)\n          const entered = () => {\n            within = true\n          }\n          const left = (event: Event) => {\n            const next = (event as FocusEvent).relatedTarget\n            if (next instanceof Node && element.contains(next)) return\n            const from = event.target\n            // Asked once the change that may have taken it away is done: a descendant\n            // removed with focus in it keeps the claim, one the user left does not.\n            queueMicrotask(() => {\n              if (!(from instanceof Node) || from.isConnected) within = false\n            })\n          }\n          const follow = () => {\n            if (!within) return\n            const stop = element.querySelector('[tabindex=\"0\"]')\n            const focused = document.activeElement\n            if (!(stop instanceof HTMLElement) || stop === focused) return\n            const lost = focused === null || focused === document.body\n            const passed =\n              focused !== null &&\n              element.contains(focused) &&\n              focused.getAttribute('tabindex') === '-1'\n            if (lost || passed) stop.focus()\n          }\n          const changes = new MutationObserver(follow)\n          element.addEventListener('focusin', entered)\n          element.addEventListener('focusout', left)\n          // A stop moved, or a descendant drawn or removed.\n          changes.observe(element, {\n            subtree: true,\n            childList: true,\n            attributes: true,\n            attributeFilter: ['tabindex'],\n          })\n          return () => {\n            changes.disconnect()\n            element.removeEventListener('focusin', entered)\n            element.removeEventListener('focusout', left)\n          }\n        }),\n        stop => Effect.sync(stop),\n      ),\n    ),\n})\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,gBAAgB,MAAM,aAAa,iBAAiB;CAC/D,UAAU,CAAC,OAAO,KAAK;CACvB,UAAU,EAAE,cACV,OAAO,eACL,OAAO,eACL,OAAO,WAAW;EAChB,IAAI,SAAS,QAAQ,SAAS,SAAS,aAAa;EACpD,MAAM,gBAAgB;GACpB,SAAS;EACX;EACA,MAAM,QAAQ,UAAiB;GAC7B,MAAM,OAAQ,MAAqB;GACnC,IAAI,gBAAgB,QAAQ,QAAQ,SAAS,IAAI,GAAG;GACpD,MAAM,OAAO,MAAM;GAGnB,qBAAqB;IACnB,IAAI,EAAE,gBAAgB,SAAS,KAAK,aAAa,SAAS;GAC5D,CAAC;EACH;EACA,MAAM,eAAe;GACnB,IAAI,CAAC,QAAQ;GACb,MAAM,OAAO,QAAQ,cAAc,kBAAgB;GACnD,MAAM,UAAU,SAAS;GACzB,IAAI,EAAE,gBAAgB,gBAAgB,SAAS,SAAS;GACxD,MAAM,OAAO,YAAY,QAAQ,YAAY,SAAS;GACtD,MAAM,SACJ,YAAY,QACZ,QAAQ,SAAS,OAAO,KACxB,QAAQ,aAAa,UAAU,MAAM;GACvC,IAAI,QAAQ,QAAQ,KAAK,MAAM;EACjC;EACA,MAAM,UAAU,IAAI,iBAAiB,MAAM;EAC3C,QAAQ,iBAAiB,WAAW,OAAO;EAC3C,QAAQ,iBAAiB,YAAY,IAAI;EAEzC,QAAQ,QAAQ,SAAS;GACvB,SAAS;GACT,WAAW;GACX,YAAY;GACZ,iBAAiB,CAAC,UAAU;EAC9B,CAAC;EACD,aAAa;GACX,QAAQ,WAAW;GACnB,QAAQ,oBAAoB,WAAW,OAAO;GAC9C,QAAQ,oBAAoB,YAAY,IAAI;EAC9C;CACF,CAAC,IACD,SAAQ,OAAO,KAAK,IAAI,CAC1B,CACF;AACJ,CAAC"}

package/dist/dom/image-decode.d.ts

@@ -0,0 +1,27 @@
+import { Schema } from "effect";
+import { Command } from "foldkit/command";
+export declare const ImageDecodeMessage: import("foldkit/message").MessageUnion<{
+  readonly Decoded: {
+    src: Schema.String;
+  };
+  readonly DecodeFailed: {
+    src: Schema.String;
+    message: Schema.String;
+  };
+}>;
+export type ImageDecodeMessage = typeof ImageDecodeMessage.Type;
+/** What to decode: a URL, or an `img`'s candidates, so the browser decodes the one it would draw. */
+export interface ImageSource {
+  readonly src: string;
+  readonly srcset?: string | undefined;
+  readonly sizes?: string | undefined;
+}
+/**
+ * Fetches and decodes `source` (`img.decode()`), yielding `Decoded` once it
+ * can be painted at once, or `DecodeFailed` when it cannot be fetched or read,
+ * or there is no document (a server render). Given `srcset` and `sizes`, as
+ * `foldkit-media`'s `Picture.Img` has them, the browser picks the candidate
+ * it would draw, so the decoded file is the one shown.
+ */
+export declare const decodeImage: (source: ImageSource) => Command<ImageDecodeMessage, never, never>;
+//# sourceMappingURL=image-decode.d.ts.map

package/dist/dom/image-decode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-decode.d.ts","names":[],"sources":["../../src/dom/image-decode.ts"],"mappings":";;qBAWa,8CAAkB;;IAClB,KAAG,OAAA;;;IACE,KAAG,OAAA;IAAiB,SAAO,OAAA;;;YAEjC,4BAA4B,mBAAmB;;iBAG1C;WACN;WACA;WACA;;;;;;;;;qBAUE,cAAW,QAAY,gBAAc,QAAQ"}

package/dist/dom/image-decode.js

@@ -0,0 +1,50 @@
+import { Effect, Schema } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+// src/dom/image-decode.ts
+/**
+* An image fetched and decoded before it is shown, as a Command: a lightbox
+* or a carousel asks for the next picture, and shows it on `Decoded`, so the
+* switch never passes through a blank frame. A Command, not a Mount: the
+* Model decides to show the image, so the Message that leads there carries
+* the news that it is ready.
+*/
+const ImageDecodeMessage = defineMessageUnion({
+	Decoded: { src: Schema.String },
+	DecodeFailed: {
+		src: Schema.String,
+		message: Schema.String
+	}
+});
+/**
+* Fetches and decodes `source` (`img.decode()`), yielding `Decoded` once it
+* can be painted at once, or `DecodeFailed` when it cannot be fetched or read,
+* or there is no document (a server render). Given `srcset` and `sizes`, as
+* `foldkit-media`'s `Picture.Img` has them, the browser picks the candidate
+* it would draw, so the decoded file is the one shown.
+*/
+const decodeImage = (source) => ({
+	name: "Image.decode",
+	args: { src: source.src },
+	effect: typeof document === "undefined" ? Effect.succeed(ImageDecodeMessage.DecodeFailed({
+		src: source.src,
+		message: "there is no document"
+	})) : Effect.matchEffect(Effect.tryPromise({
+		try: () => {
+			const image = new Image();
+			if (source.sizes !== void 0) image.sizes = source.sizes;
+			if (source.srcset !== void 0) image.srcset = source.srcset;
+			image.src = source.src;
+			return image.decode();
+		},
+		catch: (error) => error instanceof Error ? error.message : String(error)
+	}), {
+		onFailure: (message) => Effect.succeed(ImageDecodeMessage.DecodeFailed({
+			src: source.src,
+			message
+		})),
+		onSuccess: () => Effect.succeed(ImageDecodeMessage.Decoded({ src: source.src }))
+	})
+});
+export { ImageDecodeMessage, decodeImage };
+
+//# sourceMappingURL=image-decode.js.map

package/dist/dom/image-decode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-decode.js","names":[],"sources":["../../src/dom/image-decode.ts"],"sourcesContent":["/**\n * An image fetched and decoded before it is shown, as a Command: a lightbox\n * or a carousel asks for the next picture, and shows it on `Decoded`, so the\n * switch never passes through a blank frame. A Command, not a Mount: the\n * Model decides to show the image, so the Message that leads there carries\n * the news that it is ready.\n */\nimport { Effect, Schema } from 'effect'\nimport type { Command } from 'foldkit/command'\nimport { defineMessageUnion } from 'foldkit/message'\n\nexport const ImageDecodeMessage = defineMessageUnion({\n  Decoded: { src: Schema.String },\n  DecodeFailed: { src: Schema.String, message: Schema.String },\n})\nexport type ImageDecodeMessage = typeof ImageDecodeMessage.Type\n\n/** What to decode: a URL, or an `img`'s candidates, so the browser decodes the one it would draw. */\nexport interface ImageSource {\n  readonly src: string\n  readonly srcset?: string | undefined\n  readonly sizes?: string | undefined\n}\n\n/**\n * Fetches and decodes `source` (`img.decode()`), yielding `Decoded` once it\n * can be painted at once, or `DecodeFailed` when it cannot be fetched or read,\n * or there is no document (a server render). Given `srcset` and `sizes`, as\n * `foldkit-media`'s `Picture.Img` has them, the browser picks the candidate\n * it would draw, so the decoded file is the one shown.\n */\nexport const decodeImage = (source: ImageSource): Command<ImageDecodeMessage, never, never> => ({\n  name: 'Image.decode',\n  args: { src: source.src },\n  effect:\n    typeof document === 'undefined'\n      ? Effect.succeed(\n          ImageDecodeMessage.DecodeFailed({ src: source.src, message: 'there is no document' }),\n        )\n      : Effect.matchEffect(\n          Effect.tryPromise({\n            try: () => {\n              const image = new Image()\n              // Before `src`, so the browser chooses among the candidates, not the fallback.\n              if (source.sizes !== undefined) image.sizes = source.sizes\n              if (source.srcset !== undefined) image.srcset = source.srcset\n              image.src = source.src\n              return image.decode()\n            },\n            catch: error => (error instanceof Error ? error.message : String(error)),\n          }),\n          {\n            onFailure: message =>\n              Effect.succeed(ImageDecodeMessage.DecodeFailed({ src: source.src, message })),\n            onSuccess: () => Effect.succeed(ImageDecodeMessage.Decoded({ src: source.src })),\n          },\n        ),\n})\n"],"mappings":";;;;;;;;;;AAWA,MAAa,qBAAqB,mBAAmB;CACnD,SAAS,EAAE,KAAK,OAAO,OAAO;CAC9B,cAAc;EAAE,KAAK,OAAO;EAAQ,SAAS,OAAO;CAAO;AAC7D,CAAC;;;;;;;;AAiBD,MAAa,eAAe,YAAoE;CAC9F,MAAM;CACN,MAAM,EAAE,KAAK,OAAO,IAAI;CACxB,QACE,OAAO,aAAa,cAChB,OAAO,QACL,mBAAmB,aAAa;EAAE,KAAK,OAAO;EAAK,SAAS;CAAuB,CAAC,CACtF,IACA,OAAO,YACL,OAAO,WAAW;EAChB,WAAW;GACT,MAAM,QAAQ,IAAI,MAAM;GAExB,IAAI,OAAO,UAAU,KAAA,GAAW,MAAM,QAAQ,OAAO;GACrD,IAAI,OAAO,WAAW,KAAA,GAAW,MAAM,SAAS,OAAO;GACvD,MAAM,MAAM,OAAO;GACnB,OAAO,MAAM,OAAO;EACtB;EACA,QAAO,UAAU,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;CACxE,CAAC,GACD;EACE,YAAW,YACT,OAAO,QAAQ,mBAAmB,aAAa;GAAE,KAAK,OAAO;GAAK;EAAQ,CAAC,CAAC;EAC9E,iBAAiB,OAAO,QAAQ,mBAAmB,QAAQ,EAAE,KAAK,OAAO,IAAI,CAAC,CAAC;CACjF,CACF;AACR"}

package/dist/dom/index.d.ts

@@ -0,0 +1,24 @@
+export * from "./autofocus.js";
+export * from "./clipboard.js";
+export * from "./focus-scope.js";
+export * from "./input-mask.js";
+export * from "./keep-in-view.js";
+export * from "./layers.js";
+export * from "./move.js";
+export * from "./script-loader.js";
+export * from "./share.js";
+export * from "./targets.js";
+export * from "./pointer-drag.js";
+export * from "./measure.js";
+export * from "./editable-text.js";
+export * from "./follow-tab-stop.js";
+export * from "./scroll.js";
+export * from "./pointed-links.js";
+export * from "./fluid-hover.js";
+export * from "./keyboard-inset.js";
+export * from "./scroll-bars.js";
+export * from "./swipe.js";
+export * from "./scroll-settle.js";
+export * from "./pointer-position.js";
+export * from "./track-box.js";
+export * from "./image-decode.js";

package/dist/dom/index.js

@@ -0,0 +1,25 @@
+export * from "./autofocus.js";
+export * from "./clipboard.js";
+export * from "./focus-scope.js";
+export * from "./input-mask.js";
+export * from "./keep-in-view.js";
+export * from "./layers.js";
+export * from "./move.js";
+export * from "./script-loader.js";
+export * from "./share.js";
+export * from "./targets.js";
+export * from "./pointer-drag.js";
+export * from "./measure.js";
+export * from "./editable-text.js";
+export * from "./follow-tab-stop.js";
+export * from "./scroll.js";
+export * from "./pointed-links.js";
+export * from "./fluid-hover.js";
+export * from "./keyboard-inset.js";
+export * from "./scroll-bars.js";
+export * from "./swipe.js";
+export * from "./scroll-settle.js";
+export * from "./pointer-position.js";
+export * from "./track-box.js";
+export * from "./image-decode.js";
+export {};

package/dist/dom/input-mask.d.ts

@@ -0,0 +1,35 @@
+import { Schema } from "effect";
+import * as Mount from "foldkit/mount";
+/** What `InputMask` reports after each edit: the masked text shown, and the characters typed. */
+export declare const Input: Schema.TaggedStruct<"Input", {
+  readonly value: Schema.String;
+  readonly raw: Schema.String;
+}>;
+export type Input = typeof Input.Type;
+/**
+ * The mask as a pure function: `#` takes a digit, `A` a letter, `*` either, and
+ * any other character of the pattern is written in once input reaches past it.
+ * Input that fits no placeholder is skipped. `masked` is what the field shows;
+ * `raw` is only the characters typed.
+ */
+export declare const applyMask: (value: string, pattern: string) => {
+  readonly masked: string;
+  readonly raw: string;
+};
+/**
+ * An input mask as a Mount plus a pure mask function. The pattern language
+ * is three placeholders — `#` digit, `A` letter, `*` either, all ASCII —
+ * with every other character literal. Literals appear only once a later placeholder
+ * consumes input, so partial values never dangle a separator. The Mount
+ * rewrites the field, restores the caret approximately, and emits `Input`
+ * with both the masked and raw values; the parent owns the state, like any
+ * controlled input.
+ */
+export declare const InputMask: Mount.MountDefinitionWithArgs<"InputMask", {
+  pattern: Schema.String;
+}, {
+  readonly _tag: "Input";
+  readonly value: string;
+  readonly raw: string;
+}>;
+//# sourceMappingURL=input-mask.d.ts.map

package/dist/dom/input-mask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-mask.d.ts","names":[],"sources":["../../src/dom/input-mask.ts"],"mappings":";;;qBAIa,OAAK,OAAA;;;;YAIN,eAAe,MAAM;;;;;;;qBAiCpB,YAAS,eACP;WAED;WAAyB;;;;;;;;;;;qBA6C1B,WAAS,MAAA"}

package/dist/dom/input-mask.js

@@ -0,0 +1,90 @@
+import { Effect, Queue, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+// src/dom/input-mask.ts
+/** What `InputMask` reports after each edit: the masked text shown, and the characters typed. */
+const Input = Schema.TaggedStruct("Input", {
+	value: Schema.String,
+	raw: Schema.String
+});
+const isDigit = (char) => char >= "0" && char <= "9";
+const isLetter = (char) => char >= "a" && char <= "z" || char >= "A" && char <= "Z";
+const matches = (placeholder, char) => placeholder === "#" ? isDigit(char) : placeholder === "A" ? isLetter(char) : isDigit(char) || isLetter(char);
+const isPlaceholder = (char) => char === "#" || char === "A" || char === "*";
+/** Whether any placeholder at or after `from` consumes any input at or after `at`. */
+const fillable = (pattern, from, value, at) => {
+	for (let i = from; i < pattern.length; i++) {
+		const placeholder = pattern[i];
+		if (!isPlaceholder(placeholder)) continue;
+		for (let j = at; j < value.length; j++) if (matches(placeholder, value[j])) return true;
+	}
+	return false;
+};
+/**
+* The mask as a pure function: `#` takes a digit, `A` a letter, `*` either, and
+* any other character of the pattern is written in once input reaches past it.
+* Input that fits no placeholder is skipped. `masked` is what the field shows;
+* `raw` is only the characters typed.
+*/
+const applyMask = (value, pattern) => {
+	let masked = "";
+	let raw = "";
+	let at = 0;
+	for (let i = 0; i < pattern.length; i++) {
+		const slot = pattern[i];
+		if (isPlaceholder(slot)) {
+			while (at < value.length && !matches(slot, value[at])) at++;
+			if (at >= value.length) break;
+			masked += value[at];
+			raw += value[at];
+			at++;
+		} else if (fillable(pattern, i + 1, value, at)) masked += slot;
+		else break;
+	}
+	return {
+		masked,
+		raw
+	};
+};
+const asField = (element) => {
+	const field = element;
+	return typeof field.value === "string" && typeof field.addEventListener === "function" ? field : null;
+};
+/**
+* An input mask as a Mount plus a pure mask function. The pattern language
+* is three placeholders — `#` digit, `A` letter, `*` either, all ASCII —
+* with every other character literal. Literals appear only once a later placeholder
+* consumes input, so partial values never dangle a separator. The Mount
+* rewrites the field, restores the caret approximately, and emits `Input`
+* with both the masked and raw values; the parent owns the state, like any
+* controlled input.
+*/
+const InputMask = Mount.defineStream("InputMask", {
+	messages: [Input],
+	args: { pattern: Schema.String },
+	execute: ({ element, pattern }) => Stream.callback((queue) => Effect.gen(function* () {
+		const field = asField(element);
+		if (field === null) return;
+		const onInput = () => {
+			const { masked, raw } = applyMask(field.value, pattern);
+			if (masked !== field.value) {
+				const caret = field.selectionStart ?? masked.length;
+				field.value = masked;
+				const at = Math.min(caret, masked.length);
+				try {
+					field.setSelectionRange?.(at, at);
+				} catch {}
+			}
+			Queue.offerUnsafe(queue, Input.make({
+				value: masked,
+				raw
+			}));
+		};
+		yield* Effect.acquireRelease(Effect.sync(() => {
+			field.addEventListener("input", onInput);
+			return field;
+		}), (current) => Effect.sync(() => current.removeEventListener("input", onInput)));
+	}))
+});
+export { Input, InputMask, applyMask };
+
+//# sourceMappingURL=input-mask.js.map

package/dist/dom/input-mask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-mask.js","names":[],"sources":["../../src/dom/input-mask.ts"],"sourcesContent":["import { Effect, Queue, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\n\n/** What `InputMask` reports after each edit: the masked text shown, and the characters typed. */\nexport const Input = Schema.TaggedStruct('Input', {\n  value: Schema.String,\n  raw: Schema.String,\n})\nexport type Input = typeof Input.Type\n\nconst isDigit = (char: string): boolean => char >= '0' && char <= '9'\nconst isLetter = (char: string): boolean =>\n  (char >= 'a' && char <= 'z') || (char >= 'A' && char <= 'Z')\n\nconst matches = (placeholder: string, char: string): boolean =>\n  placeholder === '#'\n    ? isDigit(char)\n    : placeholder === 'A'\n      ? isLetter(char)\n      : isDigit(char) || isLetter(char)\n\nconst isPlaceholder = (char: string): boolean => char === '#' || char === 'A' || char === '*'\n\n/** Whether any placeholder at or after `from` consumes any input at or after `at`. */\nconst fillable = (pattern: string, from: number, value: string, at: number): boolean => {\n  for (let i = from; i < pattern.length; i++) {\n    const placeholder = pattern[i]!\n    if (!isPlaceholder(placeholder)) continue\n    for (let j = at; j < value.length; j++) {\n      if (matches(placeholder, value[j]!)) return true\n    }\n  }\n  return false\n}\n\n/**\n * The mask as a pure function: `#` takes a digit, `A` a letter, `*` either, and\n * any other character of the pattern is written in once input reaches past it.\n * Input that fits no placeholder is skipped. `masked` is what the field shows;\n * `raw` is only the characters typed.\n */\nexport const applyMask = (\n  value: string,\n  pattern: string,\n): { readonly masked: string; readonly raw: string } => {\n  let masked = ''\n  let raw = ''\n  let at = 0\n  for (let i = 0; i < pattern.length; i++) {\n    const slot = pattern[i]!\n    if (isPlaceholder(slot)) {\n      while (at < value.length && !matches(slot, value[at]!)) at++\n      if (at >= value.length) break\n      masked += value[at]!\n      raw += value[at]!\n      at++\n    } else if (fillable(pattern, i + 1, value, at)) {\n      masked += slot\n    } else {\n      break\n    }\n  }\n  return { masked, raw }\n}\n\ninterface MaskableField {\n  value: string\n  selectionStart: number | null\n  addEventListener(type: string, listener: () => void): void\n  removeEventListener(type: string, listener: () => void): void\n  setSelectionRange?(start: number, end: number): void\n}\n\nconst asField = (element: Element): MaskableField | null => {\n  const field = element as unknown as Partial<MaskableField>\n  return typeof field.value === 'string' && typeof field.addEventListener === 'function'\n    ? (field as MaskableField)\n    : null\n}\n\n/**\n * An input mask as a Mount plus a pure mask function. The pattern language\n * is three placeholders — `#` digit, `A` letter, `*` either, all ASCII —\n * with every other character literal. Literals appear only once a later placeholder\n * consumes input, so partial values never dangle a separator. The Mount\n * rewrites the field, restores the caret approximately, and emits `Input`\n * with both the masked and raw values; the parent owns the state, like any\n * controlled input.\n */\nexport const InputMask = Mount.defineStream('InputMask', {\n  messages: [Input],\n  args: { pattern: Schema.String },\n  execute: ({ element, pattern }) =>\n    Stream.callback<typeof Input.Type>(queue =>\n      Effect.gen(function* () {\n        const field = asField(element)\n        if (field === null) return\n        const onInput = () => {\n          const { masked, raw } = applyMask(field.value, pattern)\n          if (masked !== field.value) {\n            const caret = field.selectionStart ?? masked.length\n            field.value = masked\n            const at = Math.min(caret, masked.length)\n            try {\n              field.setSelectionRange?.(at, at)\n            } catch {\n              // Select-all style inputs reject ranges; the value still stands.\n            }\n          }\n          Queue.offerUnsafe(queue, Input.make({ value: masked, raw }))\n        }\n        yield* Effect.acquireRelease(\n          Effect.sync(() => {\n            field.addEventListener('input', onInput)\n            return field\n          }),\n          current => Effect.sync(() => current.removeEventListener('input', onInput)),\n        )\n      }),\n    ),\n})\n"],"mappings":";;;;AAIA,MAAa,QAAQ,OAAO,aAAa,SAAS;CAChD,OAAO,OAAO;CACd,KAAK,OAAO;AACd,CAAC;AAGD,MAAM,WAAW,SAA0B,QAAQ,OAAO,QAAQ;AAClE,MAAM,YAAY,SACf,QAAQ,OAAO,QAAQ,OAAS,QAAQ,OAAO,QAAQ;AAE1D,MAAM,WAAW,aAAqB,SACpC,gBAAgB,MACZ,QAAQ,IAAI,IACZ,gBAAgB,MACd,SAAS,IAAI,IACb,QAAQ,IAAI,KAAK,SAAS,IAAI;AAEtC,MAAM,iBAAiB,SAA0B,SAAS,OAAO,SAAS,OAAO,SAAS;;AAG1F,MAAM,YAAY,SAAiB,MAAc,OAAe,OAAwB;CACtF,KAAK,IAAI,IAAI,MAAM,IAAI,QAAQ,QAAQ,KAAK;EAC1C,MAAM,cAAc,QAAQ;EAC5B,IAAI,CAAC,cAAc,WAAW,GAAG;EACjC,KAAK,IAAI,IAAI,IAAI,IAAI,MAAM,QAAQ,KACjC,IAAI,QAAQ,aAAa,MAAM,EAAG,GAAG,OAAO;CAEhD;CACA,OAAO;AACT;;;;;;;AAQA,MAAa,aACX,OACA,YACsD;CACtD,IAAI,SAAS;CACb,IAAI,MAAM;CACV,IAAI,KAAK;CACT,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;EACvC,MAAM,OAAO,QAAQ;EACrB,IAAI,cAAc,IAAI,GAAG;GACvB,OAAO,KAAK,MAAM,UAAU,CAAC,QAAQ,MAAM,MAAM,GAAI,GAAG;GACxD,IAAI,MAAM,MAAM,QAAQ;GACxB,UAAU,MAAM;GAChB,OAAO,MAAM;GACb;EACF,OAAO,IAAI,SAAS,SAAS,IAAI,GAAG,OAAO,EAAE,GAC3C,UAAU;OAEV;CAEJ;CACA,OAAO;EAAE;EAAQ;CAAI;AACvB;AAUA,MAAM,WAAW,YAA2C;CAC1D,MAAM,QAAQ;CACd,OAAO,OAAO,MAAM,UAAU,YAAY,OAAO,MAAM,qBAAqB,aACvE,QACD;AACN;;;;;;;;;;AAWA,MAAa,YAAY,MAAM,aAAa,aAAa;CACvD,UAAU,CAAC,KAAK;CAChB,MAAM,EAAE,SAAS,OAAO,OAAO;CAC/B,UAAU,EAAE,SAAS,cACnB,OAAO,UAA4B,UACjC,OAAO,IAAI,aAAa;EACtB,MAAM,QAAQ,QAAQ,OAAO;EAC7B,IAAI,UAAU,MAAM;EACpB,MAAM,gBAAgB;GACpB,MAAM,EAAE,QAAQ,QAAQ,UAAU,MAAM,OAAO,OAAO;GACtD,IAAI,WAAW,MAAM,OAAO;IAC1B,MAAM,QAAQ,MAAM,kBAAkB,OAAO;IAC7C,MAAM,QAAQ;IACd,MAAM,KAAK,KAAK,IAAI,OAAO,OAAO,MAAM;IACxC,IAAI;KACF,MAAM,oBAAoB,IAAI,EAAE;IAClC,QAAQ,CAER;GACF;GACA,MAAM,YAAY,OAAO,MAAM,KAAK;IAAE,OAAO;IAAQ;GAAI,CAAC,CAAC;EAC7D;EACA,OAAO,OAAO,eACZ,OAAO,WAAW;GAChB,MAAM,iBAAiB,SAAS,OAAO;GACvC,OAAO;EACT,CAAC,IACD,YAAW,OAAO,WAAW,QAAQ,oBAAoB,SAAS,OAAO,CAAC,CAC5E;CACF,CAAC,CACH;AACJ,CAAC"}

package/dist/dom/keep-in-view.d.ts

@@ -0,0 +1,16 @@
+import { Schema } from "effect";
+import * as Mount from "foldkit/mount";
+/**
+ * Keeps what is marked in view as a Mount: whenever an element in the mounted
+ * one's subtree newly matches `selector`, such as the row just selected in a
+ * list, it is scrolled into view the least amount that shows it (`nearest`).
+ * The element keeps its identity and its focus: nothing is redrawn to move it.
+ *
+ * It watches with a `MutationObserver` for as long as it is mounted, which is as
+ * long as the list or canvas that can change what is marked.
+ */
+export declare const KeepInView: Mount.MountDefinitionWithArgs<"KeepInView", {
+  /** What is marked, as a selector within the element: `[aria-selected="true"]`. */
+  selector: Schema.String;
+}, never>;
+//# sourceMappingURL=keep-in-view.d.ts.map

package/dist/dom/keep-in-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keep-in-view.d.ts","names":[],"sources":["../../src/dom/keep-in-view.ts"],"mappings":";;;;;;;;;;;qBAYa,YAAU,MAAA"}

package/dist/dom/keep-in-view.js

@@ -0,0 +1,38 @@
+import { Effect, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+// src/dom/keep-in-view.ts
+/**
+* Keeps what is marked in view as a Mount: whenever an element in the mounted
+* one's subtree newly matches `selector`, such as the row just selected in a
+* list, it is scrolled into view the least amount that shows it (`nearest`).
+* The element keeps its identity and its focus: nothing is redrawn to move it.
+*
+* It watches with a `MutationObserver` for as long as it is mounted, which is as
+* long as the list or canvas that can change what is marked.
+*/
+const KeepInView = Mount.defineStream("KeepInView", {
+	messages: [Schema.Never],
+	args: { 
+	/** What is marked, as a selector within the element: `[aria-selected="true"]`. */
+selector: Schema.String },
+	execute: ({ element, selector }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
+		let marked = element.querySelector(selector);
+		const observer = new MutationObserver(() => {
+			const now = element.querySelector(selector);
+			if (now !== null && now !== marked && typeof now.scrollIntoView === "function") now.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+			marked = now;
+		});
+		observer.observe(element, {
+			subtree: true,
+			childList: true,
+			attributes: true
+		});
+		return observer;
+	}), (observer) => Effect.sync(() => observer.disconnect())))
+});
+export { KeepInView };
+
+//# sourceMappingURL=keep-in-view.js.map

package/dist/dom/keep-in-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keep-in-view.js","names":[],"sources":["../../src/dom/keep-in-view.ts"],"sourcesContent":["import { Effect, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\n\n/**\n * Keeps what is marked in view as a Mount: whenever an element in the mounted\n * one's subtree newly matches `selector`, such as the row just selected in a\n * list, it is scrolled into view the least amount that shows it (`nearest`).\n * The element keeps its identity and its focus: nothing is redrawn to move it.\n *\n * It watches with a `MutationObserver` for as long as it is mounted, which is as\n * long as the list or canvas that can change what is marked.\n */\nexport const KeepInView = Mount.defineStream('KeepInView', {\n  messages: [Schema.Never],\n  args: {\n    /** What is marked, as a selector within the element: `[aria-selected=\"true\"]`. */\n    selector: Schema.String,\n  },\n  execute: ({ element, selector }) =>\n    Stream.callback<never>(() =>\n      Effect.acquireRelease(\n        Effect.sync(() => {\n          let marked = element.querySelector(selector)\n          const observer = new MutationObserver(() => {\n            const now = element.querySelector(selector)\n            // Only a change of what is marked scrolls: the author's own scrolling stays.\n            // A DOM with no layout (jsdom, in a test) has no scrollIntoView and nothing to scroll.\n            if (now !== null && now !== marked && typeof now.scrollIntoView === 'function')\n              now.scrollIntoView({ block: 'nearest', inline: 'nearest' })\n            marked = now\n          })\n          observer.observe(element, { subtree: true, childList: true, attributes: true })\n          return observer\n        }),\n        observer => Effect.sync(() => observer.disconnect()),\n      ),\n    ),\n})\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,aAAa,MAAM,aAAa,cAAc;CACzD,UAAU,CAAC,OAAO,KAAK;CACvB,MAAM;;AAEJ,UAAU,OAAO,OACnB;CACA,UAAU,EAAE,SAAS,eACnB,OAAO,eACL,OAAO,eACL,OAAO,WAAW;EAChB,IAAI,SAAS,QAAQ,cAAc,QAAQ;EAC3C,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,MAAM,QAAQ,cAAc,QAAQ;GAG1C,IAAI,QAAQ,QAAQ,QAAQ,UAAU,OAAO,IAAI,mBAAmB,YAClE,IAAI,eAAe;IAAE,OAAO;IAAW,QAAQ;GAAU,CAAC;GAC5D,SAAS;EACX,CAAC;EACD,SAAS,QAAQ,SAAS;GAAE,SAAS;GAAM,WAAW;GAAM,YAAY;EAAK,CAAC;EAC9E,OAAO;CACT,CAAC,IACD,aAAY,OAAO,WAAW,SAAS,WAAW,CAAC,CACrD,CACF;AACJ,CAAC"}