foldkit-primitives 0.15.3 → 0.16.0

package/dist/dom/pointer-position.js

@@ -0,0 +1,173 @@
+import { Effect, Option, Queue, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+// src/dom/pointer-position.ts
+/**
+* A place in an element's padding box, in CSS pixels from its top left
+* corner, and the pointer's pressure there (0 to 1; a mouse reads 0.5 while
+* a button is down). A captured pointer can be outside the box, so `x` and
+* `y` can be negative or past its size.
+*/
+const PointerPoint = Schema.Struct({
+	x: Schema.Number,
+	y: Schema.Number,
+	pressure: Schema.Number
+});
+/** The padding box's size at the event, in CSS pixels. */
+const Size = {
+	width: Schema.Number,
+	height: Schema.Number
+};
+const PointerPressed = Schema.TaggedStruct("PointerPressed", {
+	...Size,
+	point: PointerPoint,
+	/** `mouse`, `pen` or `touch`, as the browser names it. */
+	pointerType: Schema.String
+});
+const PointerMoved = Schema.TaggedStruct("PointerMoved", {
+	...Size,
+	/** Where the pointer is now. */
+	point: PointerPoint,
+	/**
+	* Every place it passed since the last move, ending with `point`: the
+	* browser's coalesced events, so a fast stroke keeps its curve. Just
+	* `point` where the browser coalesces none.
+	*/
+	points: Schema.Array(PointerPoint)
+});
+const PointerReleased = Schema.TaggedStruct("PointerReleased", { 
+/** `false` when the pointer was cancelled, lost its capture, or pressed again unreleased. */
+completed: Schema.Boolean });
+/**
+* The padding box of an element whose border box is `rect`: inside its
+* border, padding included. An absolutely positioned child (a thumb, a
+* stroke) is laid out against it, so a place read here is where that child
+* sits, whatever padding a stylist adds.
+*/
+const paddingBoxOf = (layout) => {
+	const { rect, border } = layout;
+	return {
+		left: rect.left + border.left,
+		top: rect.top + border.top,
+		width: Math.max(0, rect.width - border.left - border.right),
+		height: Math.max(0, rect.height - border.top - border.bottom)
+	};
+};
+const borderOf = (style) => ({
+	top: parseFloat(style.borderTopWidth),
+	right: parseFloat(style.borderRightWidth),
+	bottom: parseFloat(style.borderBottomWidth),
+	left: parseFloat(style.borderLeftWidth)
+});
+/**
+* An element's padding box now, in the viewport, as `PointerPosition`
+* measures it: for a size kept beside its places, which a `ResizeObserver`'s
+* content box does not match once the element has padding. Read from the
+* bounding rectangle and the computed border, since `clientWidth` and
+* `clientLeft` round to whole pixels.
+*/
+const measurePaddingBox = (element) => paddingBoxOf({
+	rect: element.getBoundingClientRect(),
+	border: borderOf(getComputedStyle(element))
+});
+const pointIn = (box, event) => ({
+	x: event.clientX - box.left,
+	y: event.clientY - box.top,
+	pressure: event.pressure
+});
+/**
+* Where one pointer is inside an element, as a Mount, for a surface the
+* pointer draws on or points into (a color area, a dial, a signature pad): a
+* primary press, each move until the release, and the release, each with
+* the place in the element's padding box and the box's size. The box is
+* measured at each event, so an element that moved or resized is followed.
+* Coordinates are raw, left to right and top down whatever the direction:
+* what a place means (a share, an angle, a reading direction) is the parent's.
+*
+* The pointer is captured from press to release, so a drag that leaves the
+* element is still heard, and the moves and the release are listened to only
+* meanwhile. A press keeps the browser's own focus and text selection away,
+* and a second pointer while one is down is ignored.
+*/
+const PointerPosition = Mount.defineStream("PointerPosition", {
+	messages: [
+		PointerPressed,
+		PointerMoved,
+		PointerReleased
+	],
+	args: { 
+	/**
+	* A descendant to focus on a press, found by this selector (a thumb), so
+	* the keys go on from where the pointer left it.
+	*/
+focus: Schema.optionalKey(Schema.String) },
+	execute: ({ element, focus }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		const offer = (fact) => Queue.offerUnsafe(queue, fact);
+		let held = Option.none();
+		const ours = (event) => event instanceof PointerEvent && Option.contains(held, event.pointerId);
+		const release = () => {
+			if (Option.isNone(held)) return;
+			const pointerId = held.value;
+			held = Option.none();
+			for (const [type, listener] of during) element.removeEventListener(type, listener);
+			try {
+				element.releasePointerCapture(pointerId);
+			} catch {}
+		};
+		const end = (completed) => (event) => {
+			if (!ours(event)) return;
+			release();
+			offer(PointerReleased.make({ completed }));
+		};
+		const move = (event) => {
+			if (!ours(event)) return;
+			const box = measurePaddingBox(element);
+			const point = pointIn(box, event);
+			const coalesced = event.getCoalescedEvents?.() ?? [];
+			offer(PointerMoved.make({
+				width: box.width,
+				height: box.height,
+				point,
+				points: coalesced.length > 0 ? coalesced.map((one) => pointIn(box, one)) : [point]
+			}));
+		};
+		const during = [
+			["pointermove", move],
+			["pointerup", end(true)],
+			["pointercancel", end(false)],
+			["lostpointercapture", end(false)]
+		];
+		const down = (event) => {
+			if (!(event instanceof PointerEvent) || event.button !== 0) return;
+			if (Option.isSome(held)) {
+				if (!ours(event)) return;
+				release();
+				offer(PointerReleased.make({ completed: false }));
+			}
+			held = Option.some(event.pointerId);
+			for (const [type, listener] of during) element.addEventListener(type, listener);
+			try {
+				element.setPointerCapture(event.pointerId);
+			} catch {}
+			event.preventDefault();
+			if (focus !== void 0) {
+				const into = element.querySelector(focus);
+				if (into instanceof HTMLElement) into.focus();
+			}
+			const box = measurePaddingBox(element);
+			offer(PointerPressed.make({
+				width: box.width,
+				height: box.height,
+				point: pointIn(box, event),
+				pointerType: event.pointerType
+			}));
+		};
+		element.addEventListener("pointerdown", down);
+		return () => {
+			element.removeEventListener("pointerdown", down);
+			release();
+		};
+	}), (stop) => Effect.sync(stop)))
+});
+export { PointerMoved, PointerPoint, PointerPosition, PointerPressed, PointerReleased, measurePaddingBox, paddingBoxOf };
+
+//# sourceMappingURL=pointer-position.js.map

package/dist/dom/pointer-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer-position.js","names":[],"sources":["../../src/dom/pointer-position.ts"],"sourcesContent":["import { Effect, Option, Queue, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\n\n/**\n * A place in an element's padding box, in CSS pixels from its top left\n * corner, and the pointer's pressure there (0 to 1; a mouse reads 0.5 while\n * a button is down). A captured pointer can be outside the box, so `x` and\n * `y` can be negative or past its size.\n */\nexport const PointerPoint = Schema.Struct({\n  x: Schema.Number,\n  y: Schema.Number,\n  pressure: Schema.Number,\n})\nexport type PointerPoint = typeof PointerPoint.Type\n\n/** The padding box's size at the event, in CSS pixels. */\nconst Size = { width: Schema.Number, height: Schema.Number }\n\nexport const PointerPressed = Schema.TaggedStruct('PointerPressed', {\n  ...Size,\n  point: PointerPoint,\n  /** `mouse`, `pen` or `touch`, as the browser names it. */\n  pointerType: Schema.String,\n})\nexport type PointerPressed = typeof PointerPressed.Type\n\nexport const PointerMoved = Schema.TaggedStruct('PointerMoved', {\n  ...Size,\n  /** Where the pointer is now. */\n  point: PointerPoint,\n  /**\n   * Every place it passed since the last move, ending with `point`: the\n   * browser's coalesced events, so a fast stroke keeps its curve. Just\n   * `point` where the browser coalesces none.\n   */\n  points: Schema.Array(PointerPoint),\n})\nexport type PointerMoved = typeof PointerMoved.Type\n\nexport const PointerReleased = Schema.TaggedStruct('PointerReleased', {\n  /** `false` when the pointer was cancelled, lost its capture, or pressed again unreleased. */\n  completed: Schema.Boolean,\n})\nexport type PointerReleased = typeof PointerReleased.Type\n\nexport type PointerFact = PointerPressed | PointerMoved | PointerReleased\n\ninterface Sides {\n  readonly top: number\n  readonly right: number\n  readonly bottom: number\n  readonly left: number\n}\n\nexport interface Rect {\n  readonly left: number\n  readonly top: number\n  readonly width: number\n  readonly height: number\n}\n\n/**\n * The padding box of an element whose border box is `rect`: inside its\n * border, padding included. An absolutely positioned child (a thumb, a\n * stroke) is laid out against it, so a place read here is where that child\n * sits, whatever padding a stylist adds.\n */\nexport const paddingBoxOf = (layout: { readonly rect: Rect; readonly border: Sides }): Rect => {\n  const { rect, border } = layout\n  return {\n    left: rect.left + border.left,\n    top: rect.top + border.top,\n    width: Math.max(0, rect.width - border.left - border.right),\n    height: Math.max(0, rect.height - border.top - border.bottom),\n  }\n}\n\nconst borderOf = (style: CSSStyleDeclaration): Sides => ({\n  top: parseFloat(style.borderTopWidth),\n  right: parseFloat(style.borderRightWidth),\n  bottom: parseFloat(style.borderBottomWidth),\n  left: parseFloat(style.borderLeftWidth),\n})\n\n/**\n * An element's padding box now, in the viewport, as `PointerPosition`\n * measures it: for a size kept beside its places, which a `ResizeObserver`'s\n * content box does not match once the element has padding. Read from the\n * bounding rectangle and the computed border, since `clientWidth` and\n * `clientLeft` round to whole pixels.\n */\nexport const measurePaddingBox = (element: Element): Rect =>\n  paddingBoxOf({\n    rect: element.getBoundingClientRect(),\n    border: borderOf(getComputedStyle(element)),\n  })\n\nconst pointIn = (box: Rect, event: PointerEvent): PointerPoint => ({\n  x: event.clientX - box.left,\n  y: event.clientY - box.top,\n  pressure: event.pressure,\n})\n\n/**\n * Where one pointer is inside an element, as a Mount, for a surface the\n * pointer draws on or points into (a color area, a dial, a signature pad): a\n * primary press, each move until the release, and the release, each with\n * the place in the element's padding box and the box's size. The box is\n * measured at each event, so an element that moved or resized is followed.\n * Coordinates are raw, left to right and top down whatever the direction:\n * what a place means (a share, an angle, a reading direction) is the parent's.\n *\n * The pointer is captured from press to release, so a drag that leaves the\n * element is still heard, and the moves and the release are listened to only\n * meanwhile. A press keeps the browser's own focus and text selection away,\n * and a second pointer while one is down is ignored.\n */\nexport const PointerPosition = Mount.defineStream('PointerPosition', {\n  messages: [PointerPressed, PointerMoved, PointerReleased],\n  args: {\n    /**\n     * A descendant to focus on a press, found by this selector (a thumb), so\n     * the keys go on from where the pointer left it.\n     */\n    focus: Schema.optionalKey(Schema.String),\n  },\n  execute: ({ element, focus }) =>\n    Stream.callback<PointerFact>(queue =>\n      Effect.acquireRelease(\n        Effect.sync(() => {\n          const offer = (fact: PointerFact) => Queue.offerUnsafe(queue, fact)\n          let held: Option.Option<number> = Option.none()\n          const ours = (event: Event): event is PointerEvent =>\n            event instanceof PointerEvent && Option.contains(held, event.pointerId)\n\n          const release = () => {\n            if (Option.isNone(held)) return\n            const pointerId = held.value\n            held = Option.none()\n            for (const [type, listener] of during) element.removeEventListener(type, listener)\n            try {\n              element.releasePointerCapture(pointerId)\n            } catch {\n              // Capture may already be gone with the pointer.\n            }\n          }\n          const end = (completed: boolean) => (event: Event) => {\n            if (!ours(event)) return\n            release()\n            offer(PointerReleased.make({ completed }))\n          }\n          const move = (event: Event) => {\n            if (!ours(event)) return\n            const box = measurePaddingBox(element)\n            const point = pointIn(box, event)\n            // Safari coalesces none and has no method for it.\n            const coalesced = event.getCoalescedEvents?.() ?? []\n            offer(\n              PointerMoved.make({\n                width: box.width,\n                height: box.height,\n                point,\n                points: coalesced.length > 0 ? coalesced.map(one => pointIn(box, one)) : [point],\n              }),\n            )\n          }\n          const during: ReadonlyArray<readonly [string, (event: Event) => void]> = [\n            ['pointermove', move],\n            ['pointerup', end(true)],\n            ['pointercancel', end(false)],\n            ['lostpointercapture', end(false)],\n          ]\n\n          const down = (event: Event) => {\n            if (!(event instanceof PointerEvent) || event.button !== 0) return\n            if (Option.isSome(held)) {\n              if (!ours(event)) return\n              // The same pointer down again: its release went where nothing heard it.\n              release()\n              offer(PointerReleased.make({ completed: false }))\n            }\n            held = Option.some(event.pointerId)\n            for (const [type, listener] of during) element.addEventListener(type, listener)\n            try {\n              element.setPointerCapture(event.pointerId)\n            } catch {\n              // A pointer the browser no longer tracks cannot be captured; its moves over the element still come.\n            }\n            // Kept from the browser's own focus and text selection, and from the mouse events a touch also sends.\n            event.preventDefault()\n            if (focus !== undefined) {\n              const into = element.querySelector(focus)\n              if (into instanceof HTMLElement) into.focus()\n            }\n            const box = measurePaddingBox(element)\n            offer(\n              PointerPressed.make({\n                width: box.width,\n                height: box.height,\n                point: pointIn(box, event),\n                pointerType: event.pointerType,\n              }),\n            )\n          }\n          element.addEventListener('pointerdown', down)\n          return () => {\n            element.removeEventListener('pointerdown', down)\n            release()\n          }\n        }),\n        stop => Effect.sync(stop),\n      ),\n    ),\n})\n"],"mappings":";;;;;;;;;AASA,MAAa,eAAe,OAAO,OAAO;CACxC,GAAG,OAAO;CACV,GAAG,OAAO;CACV,UAAU,OAAO;AACnB,CAAC;;AAID,MAAM,OAAO;CAAE,OAAO,OAAO;CAAQ,QAAQ,OAAO;AAAO;AAE3D,MAAa,iBAAiB,OAAO,aAAa,kBAAkB;CAClE,GAAG;CACH,OAAO;;CAEP,aAAa,OAAO;AACtB,CAAC;AAGD,MAAa,eAAe,OAAO,aAAa,gBAAgB;CAC9D,GAAG;;CAEH,OAAO;;;;;;CAMP,QAAQ,OAAO,MAAM,YAAY;AACnC,CAAC;AAGD,MAAa,kBAAkB,OAAO,aAAa,mBAAmB;;AAEpE,WAAW,OAAO,QACpB,CAAC;;;;;;;AAyBD,MAAa,gBAAgB,WAAkE;CAC7F,MAAM,EAAE,MAAM,WAAW;CACzB,OAAO;EACL,MAAM,KAAK,OAAO,OAAO;EACzB,KAAK,KAAK,MAAM,OAAO;EACvB,OAAO,KAAK,IAAI,GAAG,KAAK,QAAQ,OAAO,OAAO,OAAO,KAAK;EAC1D,QAAQ,KAAK,IAAI,GAAG,KAAK,SAAS,OAAO,MAAM,OAAO,MAAM;CAC9D;AACF;AAEA,MAAM,YAAY,WAAuC;CACvD,KAAK,WAAW,MAAM,cAAc;CACpC,OAAO,WAAW,MAAM,gBAAgB;CACxC,QAAQ,WAAW,MAAM,iBAAiB;CAC1C,MAAM,WAAW,MAAM,eAAe;AACxC;;;;;;;;AASA,MAAa,qBAAqB,YAChC,aAAa;CACX,MAAM,QAAQ,sBAAsB;CACpC,QAAQ,SAAS,iBAAiB,OAAO,CAAC;AAC5C,CAAC;AAEH,MAAM,WAAW,KAAW,WAAuC;CACjE,GAAG,MAAM,UAAU,IAAI;CACvB,GAAG,MAAM,UAAU,IAAI;CACvB,UAAU,MAAM;AAClB;;;;;;;;;;;;;;;AAgBA,MAAa,kBAAkB,MAAM,aAAa,mBAAmB;CACnE,UAAU;EAAC;EAAgB;EAAc;CAAe;CACxD,MAAM;;;;;AAKJ,OAAO,OAAO,YAAY,OAAO,MAAM,EACzC;CACA,UAAU,EAAE,SAAS,YACnB,OAAO,UAAsB,UAC3B,OAAO,eACL,OAAO,WAAW;EAChB,MAAM,SAAS,SAAsB,MAAM,YAAY,OAAO,IAAI;EAClE,IAAI,OAA8B,OAAO,KAAK;EAC9C,MAAM,QAAQ,UACZ,iBAAiB,gBAAgB,OAAO,SAAS,MAAM,MAAM,SAAS;EAExE,MAAM,gBAAgB;GACpB,IAAI,OAAO,OAAO,IAAI,GAAG;GACzB,MAAM,YAAY,KAAK;GACvB,OAAO,OAAO,KAAK;GACnB,KAAK,MAAM,CAAC,MAAM,aAAa,QAAQ,QAAQ,oBAAoB,MAAM,QAAQ;GACjF,IAAI;IACF,QAAQ,sBAAsB,SAAS;GACzC,QAAQ,CAER;EACF;EACA,MAAM,OAAO,eAAwB,UAAiB;GACpD,IAAI,CAAC,KAAK,KAAK,GAAG;GAClB,QAAQ;GACR,MAAM,gBAAgB,KAAK,EAAE,UAAU,CAAC,CAAC;EAC3C;EACA,MAAM,QAAQ,UAAiB;GAC7B,IAAI,CAAC,KAAK,KAAK,GAAG;GAClB,MAAM,MAAM,kBAAkB,OAAO;GACrC,MAAM,QAAQ,QAAQ,KAAK,KAAK;GAEhC,MAAM,YAAY,MAAM,qBAAqB,KAAK,CAAC;GACnD,MACE,aAAa,KAAK;IAChB,OAAO,IAAI;IACX,QAAQ,IAAI;IACZ;IACA,QAAQ,UAAU,SAAS,IAAI,UAAU,KAAI,QAAO,QAAQ,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK;GACjF,CAAC,CACH;EACF;EACA,MAAM,SAAmE;GACvE,CAAC,eAAe,IAAI;GACpB,CAAC,aAAa,IAAI,IAAI,CAAC;GACvB,CAAC,iBAAiB,IAAI,KAAK,CAAC;GAC5B,CAAC,sBAAsB,IAAI,KAAK,CAAC;EACnC;EAEA,MAAM,QAAQ,UAAiB;GAC7B,IAAI,EAAE,iBAAiB,iBAAiB,MAAM,WAAW,GAAG;GAC5D,IAAI,OAAO,OAAO,IAAI,GAAG;IACvB,IAAI,CAAC,KAAK,KAAK,GAAG;IAElB,QAAQ;IACR,MAAM,gBAAgB,KAAK,EAAE,WAAW,MAAM,CAAC,CAAC;GAClD;GACA,OAAO,OAAO,KAAK,MAAM,SAAS;GAClC,KAAK,MAAM,CAAC,MAAM,aAAa,QAAQ,QAAQ,iBAAiB,MAAM,QAAQ;GAC9E,IAAI;IACF,QAAQ,kBAAkB,MAAM,SAAS;GAC3C,QAAQ,CAER;GAEA,MAAM,eAAe;GACrB,IAAI,UAAU,KAAA,GAAW;IACvB,MAAM,OAAO,QAAQ,cAAc,KAAK;IACxC,IAAI,gBAAgB,aAAa,KAAK,MAAM;GAC9C;GACA,MAAM,MAAM,kBAAkB,OAAO;GACrC,MACE,eAAe,KAAK;IAClB,OAAO,IAAI;IACX,QAAQ,IAAI;IACZ,OAAO,QAAQ,KAAK,KAAK;IACzB,aAAa,MAAM;GACrB,CAAC,CACH;EACF;EACA,QAAQ,iBAAiB,eAAe,IAAI;EAC5C,aAAa;GACX,QAAQ,oBAAoB,eAAe,IAAI;GAC/C,QAAQ;EACV;CACF,CAAC,IACD,SAAQ,OAAO,KAAK,IAAI,CAC1B,CACF;AACJ,CAAC"}

package/dist/dom/script-loader.d.ts

@@ -0,0 +1,12 @@
+import { Schema } from "effect";
+import { Command } from "foldkit/command";
+export declare const ScriptMessage: import("foldkit/message").MessageUnion<{
+  readonly Loaded: {};
+  readonly LoadFailed: {
+    message: Schema.String;
+  };
+}>;
+export type ScriptMessage = typeof ScriptMessage.Type;
+/** Loads a script by URL, once per URL. */
+export declare const loadScript: (src: string) => Command<ScriptMessage, never, never>;
+//# sourceMappingURL=script-loader.d.ts.map

package/dist/dom/script-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"script-loader.d.ts","names":[],"sources":["../../src/dom/script-loader.ts"],"mappings":";;qBAWa,yCAAa;;;IAEV,SAAO,OAAA;;;YAEX,uBAAuB,cAAc;;qBASpC,aAAU,gBAAkB,QAAQ"}

package/dist/dom/script-loader.js

@@ -0,0 +1,54 @@
+import { Effect, Schema } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+// src/dom/script-loader.ts
+/**
+* Script loading as a Command: appends a `src` script to the head unless one
+* is already there. Idempotent by URL — concurrent placements collapse onto
+* the first tag instead of fetching twice. Yields `Loaded` on success and
+* `LoadFailed` otherwise (network error, no document), so `update` handles
+* both outcomes as Messages.
+*/
+const ScriptMessage = defineMessageUnion({
+	Loaded: {},
+	LoadFailed: { message: Schema.String }
+});
+const failMessage = (error) => error instanceof Error ? error.message : String(error);
+const inflight = /* @__PURE__ */ new Map();
+/** Loads a script by URL, once per URL. */
+const loadScript = (src) => ({
+	name: "Script.load",
+	args: { src },
+	effect: Effect.matchEffect(Effect.tryPromise({
+		try: () => {
+			if (typeof document === "undefined") return Promise.reject(/* @__PURE__ */ new Error("script loading is unavailable"));
+			const running = inflight.get(src);
+			if (running !== void 0) return running;
+			if (Array.from(document.getElementsByTagName("script")).some((element) => element.getAttribute("src") === src)) return Promise.resolve();
+			const tracked = new Promise((resolve, reject) => {
+				const element = document.createElement("script");
+				element.src = src;
+				element.async = true;
+				element.onload = () => resolve();
+				element.onerror = () => {
+					element.remove();
+					reject(/* @__PURE__ */ new Error(`failed to load script: ${src}`));
+				};
+				document.head.appendChild(element);
+			}).then(() => {
+				inflight.delete(src);
+			}, (error) => {
+				inflight.delete(src);
+				throw error;
+			});
+			inflight.set(src, tracked);
+			return tracked;
+		},
+		catch: (error) => error
+	}), {
+		onFailure: (error) => Effect.succeed(ScriptMessage.LoadFailed({ message: failMessage(error) })),
+		onSuccess: () => Effect.succeed(ScriptMessage.Loaded())
+	})
+});
+export { ScriptMessage, loadScript };
+
+//# sourceMappingURL=script-loader.js.map

package/dist/dom/script-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"script-loader.js","names":[],"sources":["../../src/dom/script-loader.ts"],"sourcesContent":["/**\n * Script loading as a Command: appends a `src` script to the head unless one\n * is already there. Idempotent by URL — concurrent placements collapse onto\n * the first tag instead of fetching twice. Yields `Loaded` on success and\n * `LoadFailed` otherwise (network error, no document), so `update` handles\n * both outcomes as Messages.\n */\nimport { Effect, Schema } from 'effect'\nimport type { Command } from 'foldkit/command'\nimport { defineMessageUnion } from 'foldkit/message'\n\nexport const ScriptMessage = defineMessageUnion({\n  Loaded: {},\n  LoadFailed: { message: Schema.String },\n})\nexport type ScriptMessage = typeof ScriptMessage.Type\n\nconst failMessage = (error: unknown): string =>\n  error instanceof Error ? error.message : String(error)\n\n// Tags still fetching, by URL: concurrent loads share one tag and its fate.\nconst inflight = new Map<string, Promise<void>>()\n\n/** Loads a script by URL, once per URL. */\nexport const loadScript = (src: string): Command<ScriptMessage, never, never> => ({\n  name: 'Script.load',\n  args: { src },\n  effect: Effect.matchEffect(\n    Effect.tryPromise({\n      try: () => {\n        if (typeof document === 'undefined') {\n          return Promise.reject(new Error('script loading is unavailable'))\n        }\n        // Concurrent loads share one tag and its fate, instead of racing\n        // past the presence check and fetching twice: the in-flight entry\n        // is checked before presence, in the same synchronous block that\n        // appends, so a second load cannot slip between them.\n        const running = inflight.get(src)\n        if (running !== undefined) return running\n        // getAttribute, not .src: the property resolves to an absolute URL\n        // and would never equal the given string.\n        const present = Array.from(document.getElementsByTagName('script')).some(\n          element => element.getAttribute('src') === src,\n        )\n        if (present) return Promise.resolve()\n        const completion = new Promise<void>((resolve, reject) => {\n          const element = document.createElement('script')\n          element.src = src\n          element.async = true\n          element.onload = () => resolve()\n          element.onerror = () => {\n            // A dead tag must not satisfy later presence checks.\n            element.remove()\n            reject(new Error(`failed to load script: ${src}`))\n          }\n          document.head.appendChild(element)\n        })\n        const tracked = completion.then(\n          () => {\n            inflight.delete(src)\n          },\n          (error: unknown) => {\n            inflight.delete(src)\n            throw error\n          },\n        )\n        inflight.set(src, tracked)\n        return tracked\n      },\n      catch: (error: unknown) => error,\n    }),\n    {\n      onFailure: error => Effect.succeed(ScriptMessage.LoadFailed({ message: failMessage(error) })),\n      onSuccess: () => Effect.succeed(ScriptMessage.Loaded()),\n    },\n  ),\n})\n"],"mappings":";;;;;;;;;;AAWA,MAAa,gBAAgB,mBAAmB;CAC9C,QAAQ,CAAC;CACT,YAAY,EAAE,SAAS,OAAO,OAAO;AACvC,CAAC;AAGD,MAAM,eAAe,UACnB,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;AAGvD,MAAM,2BAAW,IAAI,IAA2B;;AAGhD,MAAa,cAAc,SAAuD;CAChF,MAAM;CACN,MAAM,EAAE,IAAI;CACZ,QAAQ,OAAO,YACb,OAAO,WAAW;EAChB,WAAW;GACT,IAAI,OAAO,aAAa,aACtB,OAAO,QAAQ,uBAAO,IAAI,MAAM,+BAA+B,CAAC;GAMlE,MAAM,UAAU,SAAS,IAAI,GAAG;GAChC,IAAI,YAAY,KAAA,GAAW,OAAO;GAMlC,IAHgB,MAAM,KAAK,SAAS,qBAAqB,QAAQ,CAAC,CAAC,CAAC,MAClE,YAAW,QAAQ,aAAa,KAAK,MAAM,GAEnC,GAAG,OAAO,QAAQ,QAAQ;GAapC,MAAM,UAAU,IAZO,SAAe,SAAS,WAAW;IACxD,MAAM,UAAU,SAAS,cAAc,QAAQ;IAC/C,QAAQ,MAAM;IACd,QAAQ,QAAQ;IAChB,QAAQ,eAAe,QAAQ;IAC/B,QAAQ,gBAAgB;KAEtB,QAAQ,OAAO;KACf,uBAAO,IAAI,MAAM,0BAA0B,KAAK,CAAC;IACnD;IACA,SAAS,KAAK,YAAY,OAAO;GACnC,CACyB,CAAC,CAAC,WACnB;IACJ,SAAS,OAAO,GAAG;GACrB,IACC,UAAmB;IAClB,SAAS,OAAO,GAAG;IACnB,MAAM;GACR,CACF;GACA,SAAS,IAAI,KAAK,OAAO;GACzB,OAAO;EACT;EACA,QAAQ,UAAmB;CAC7B,CAAC,GACD;EACE,YAAW,UAAS,OAAO,QAAQ,cAAc,WAAW,EAAE,SAAS,YAAY,KAAK,EAAE,CAAC,CAAC;EAC5F,iBAAiB,OAAO,QAAQ,cAAc,OAAO,CAAC;CACxD,CACF;AACF"}

package/dist/dom/scroll-bars.d.ts

@@ -0,0 +1,52 @@
+import { Schema } from "effect";
+import * as Mount from "foldkit/mount";
+/**
+ * The attribute that marks a bar beside a scroller `ScrollBars` runs on, set
+ * to the axis it shows: `block` (the up-and-down bar) or `inline`.
+ */
+export declare const SCROLL_BAR_ATTRIBUTE = "data-scroll-bar";
+/**
+ * The attribute `ScrollBars` sets on its scroller while it draws the bars, so a
+ * style hides the native bar only then: with no Mount running (a coarse
+ * pointer, a page not yet hydrated) the browser's bar stays.
+ */
+export declare const SCROLL_OVERLAID_ATTRIBUTE = "data-scroll-overlaid";
+/**
+ * The custom properties `ScrollBars` writes on each bar, in pixels, for its
+ * thumb to read: how far along the bar the thumb starts, and how long it is.
+ * Physical: an inline bar's offset is from its left edge in either direction.
+ */
+export declare const scrollThumb: {
+  readonly offset: '--fk-scroll-thumb-offset';
+  readonly size: '--fk-scroll-thumb-size';
+};
+/**
+ * An overlay scrollbar as a Mount, with no Message and no Model: where a
+ * scroller is scrolled is the browser's, and the bar only shows it.
+ *
+ * It runs on the scroller (or on an element holding it, named by `scroller`,
+ * when the scroller carries another Mount) and drives the bars drawn beside
+ * it: the scroller's parent's children marked `data-scroll-bar` (`block` or
+ * `inline`), which a style lays over the scroller's edge. Each bar gets `data-scrollable` while its axis has
+ * more to scroll, `data-shown` while the scroller scrolls or the pointer moves
+ * over it, until `idle` milliseconds pass with neither (or longer, while the
+ * pointer rests on a bar), and `data-dragging` while its thumb is dragged; and
+ * `--fk-scroll-thumb-offset` and `-size` (see `scrollThumb`). Pressing a bar
+ * off its thumb moves the thumb there, then drags it.
+ *
+ * It does nothing where the primary pointer is coarse or cannot hover, decided
+ * when it mounts: touch keeps the browser's bar and its physics. Otherwise the
+ * scroller gets `data-scroll-overlaid`, for a style to hide the native bar.
+ * How the bar looks, rests, widens and fades is the style's.
+ */
+export declare const ScrollBars: Mount.MountDefinitionWithArgs<"ScrollBars", {
+  /** How long, in milliseconds, the bars stay after the last scroll or move. Default 600. */
+  idle: Schema.optional<Schema.Number>;
+  /**
+   * The scroller, as a selector within the element, when it cannot hold this
+   * Mount itself (another component's, with a Mount of its own); looked for
+   * once, when it mounts. Default: the element is the scroller.
+   */
+  scroller: Schema.optional<Schema.String>;
+}, never>;
+//# sourceMappingURL=scroll-bars.d.ts.map

package/dist/dom/scroll-bars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-bars.d.ts","names":[],"sources":["../../src/dom/scroll-bars.ts"],"mappings":";;;;;;qBAOa;;;;;;qBAOA;;;;;;qBAOA;WACX;WACA;;;;;;;;;;;;;;;;;;;;;qBA6BW,YAAU,MAAA"}

package/dist/dom/scroll-bars.js

@@ -0,0 +1,259 @@
+import { Effect, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+// src/dom/scroll-bars.ts
+/**
+* The attribute that marks a bar beside a scroller `ScrollBars` runs on, set
+* to the axis it shows: `block` (the up-and-down bar) or `inline`.
+*/
+const SCROLL_BAR_ATTRIBUTE = "data-scroll-bar";
+/**
+* The attribute `ScrollBars` sets on its scroller while it draws the bars, so a
+* style hides the native bar only then: with no Mount running (a coarse
+* pointer, a page not yet hydrated) the browser's bar stays.
+*/
+const SCROLL_OVERLAID_ATTRIBUTE = "data-scroll-overlaid";
+/**
+* The custom properties `ScrollBars` writes on each bar, in pixels, for its
+* thumb to read: how far along the bar the thumb starts, and how long it is.
+* Physical: an inline bar's offset is from its left edge in either direction.
+*/
+const scrollThumb = {
+	offset: "--fk-scroll-thumb-offset",
+	size: "--fk-scroll-thumb-size"
+};
+/** The shortest a thumb is drawn, however long the content, so it stays a target. */
+const SHORTEST = 20;
+const FINE_POINTER = "(hover: hover) and (pointer: fine)";
+/**
+* An overlay scrollbar as a Mount, with no Message and no Model: where a
+* scroller is scrolled is the browser's, and the bar only shows it.
+*
+* It runs on the scroller (or on an element holding it, named by `scroller`,
+* when the scroller carries another Mount) and drives the bars drawn beside
+* it: the scroller's parent's children marked `data-scroll-bar` (`block` or
+* `inline`), which a style lays over the scroller's edge. Each bar gets `data-scrollable` while its axis has
+* more to scroll, `data-shown` while the scroller scrolls or the pointer moves
+* over it, until `idle` milliseconds pass with neither (or longer, while the
+* pointer rests on a bar), and `data-dragging` while its thumb is dragged; and
+* `--fk-scroll-thumb-offset` and `-size` (see `scrollThumb`). Pressing a bar
+* off its thumb moves the thumb there, then drags it.
+*
+* It does nothing where the primary pointer is coarse or cannot hover, decided
+* when it mounts: touch keeps the browser's bar and its physics. Otherwise the
+* scroller gets `data-scroll-overlaid`, for a style to hide the native bar.
+* How the bar looks, rests, widens and fades is the style's.
+*/
+const ScrollBars = Mount.defineStream("ScrollBars", {
+	messages: [Schema.Never],
+	args: {
+		/** How long, in milliseconds, the bars stay after the last scroll or move. Default 600. */
+		idle: Schema.optional(Schema.Number),
+		/**
+		* The scroller, as a selector within the element, when it cannot hold this
+		* Mount itself (another component's, with a Mount of its own); looked for
+		* once, when it mounts. Default: the element is the scroller.
+		*/
+		scroller: Schema.optional(Schema.String)
+	},
+	execute: ({ element, idle = 600, scroller: within }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
+		if (typeof matchMedia !== "function" || !matchMedia(FINE_POINTER).matches) return () => {};
+		const found = within === void 0 ? element : element.querySelector(within);
+		if (!(found instanceof HTMLElement)) return () => {};
+		const scroller = found;
+		const area = scroller.parentElement;
+		if (area === null) return () => {};
+		const isBar = (child) => child instanceof HTMLElement && child.hasAttribute("data-scroll-bar");
+		/** Looked for at each use, so a redraw that replaced a bar is followed. */
+		const bars = () => Array.from(area.children).filter(isBar);
+		const axisOf = (bar) => bar.getAttribute("data-scroll-bar") === "inline" ? "inline" : "block";
+		/** The scroller along one axis, with the start measured from the top or the left. */
+		const extent = (axis) => {
+			if (axis === "block") return {
+				view: scroller.clientHeight,
+				content: scroller.scrollHeight,
+				start: scroller.scrollTop
+			};
+			const room = scroller.scrollWidth - scroller.clientWidth;
+			const rtl = getComputedStyle(scroller).direction === "rtl";
+			return {
+				view: scroller.clientWidth,
+				content: scroller.scrollWidth,
+				start: rtl ? room + scroller.scrollLeft : scroller.scrollLeft
+			};
+		};
+		const scrollTo = (axis, start) => {
+			if (axis === "block") {
+				scroller.scrollTop = start;
+				return;
+			}
+			const room = scroller.scrollWidth - scroller.clientWidth;
+			const rtl = getComputedStyle(scroller).direction === "rtl";
+			scroller.scrollLeft = rtl ? start - room : start;
+		};
+		const trackOf = (bar, axis) => axis === "block" ? bar.clientHeight : bar.clientWidth;
+		/** Where the thumb is along its bar, or nothing while the axis has nothing to scroll. */
+		const thumbOf = (bar, axis) => {
+			const { view, content, start } = extent(axis);
+			const track = trackOf(bar, axis);
+			if (content - view < 1 || track <= 0) return null;
+			const size = Math.min(track, Math.max(SHORTEST, track * view / content));
+			return {
+				track,
+				size,
+				offset: (track - size) * start / (content - view),
+				room: content - view
+			};
+		};
+		const set = (bar, name, value) => {
+			if (bar.style.getPropertyValue(name) !== value) bar.style.setProperty(name, value);
+		};
+		const mark = (bar, name, on) => {
+			if (bar.hasAttribute(name) !== on) bar.toggleAttribute(name, on);
+		};
+		let frame;
+		const update = () => {
+			if (frame !== void 0) cancelAnimationFrame(frame);
+			frame = void 0;
+			for (const bar of bars()) {
+				const axis = axisOf(bar);
+				const { view, content } = extent(axis);
+				mark(bar, "data-scrollable", content - view >= 1);
+				const thumb = thumbOf(bar, axis);
+				if (thumb === null) continue;
+				set(bar, scrollThumb.offset, `${thumb.offset}px`);
+				set(bar, scrollThumb.size, `${thumb.size}px`);
+			}
+		};
+		const soon = () => {
+			if (frame === void 0) frame = requestAnimationFrame(update);
+		};
+		let hiding;
+		let resting = null;
+		/** Ends the drag under way, if one is. */
+		let dragging = null;
+		const hide = () => {
+			hiding = void 0;
+			if (resting !== null || dragging !== null) return;
+			for (const bar of bars()) mark(bar, "data-shown", false);
+		};
+		const show = () => {
+			for (const bar of bars()) mark(bar, "data-shown", true);
+			if (hiding !== void 0) clearTimeout(hiding);
+			hiding = setTimeout(hide, idle);
+		};
+		const scrolled = () => {
+			update();
+			show();
+		};
+		const moved = (event) => {
+			if (event.pointerType !== "touch") show();
+		};
+		const entered = (event) => {
+			if (event.pointerType === "touch") return;
+			area.addEventListener("pointermove", moved, { passive: true });
+			show();
+		};
+		const left = () => {
+			area.removeEventListener("pointermove", moved);
+			resting = null;
+			if (hiding === void 0) hiding = setTimeout(hide, idle);
+		};
+		const over = (event) => {
+			const target = event.target;
+			resting = target instanceof Element ? bars().find((bar) => bar.contains(target)) ?? null : null;
+		};
+		const pressed = (event) => {
+			if (event.button !== 0 || event.pointerType === "touch" || dragging !== null) return;
+			const target = event.target;
+			if (!(target instanceof Element)) return;
+			const bar = bars().find((each) => each.contains(target));
+			if (bar === void 0) return;
+			const axis = axisOf(bar);
+			const thumb = thumbOf(bar, axis);
+			if (thumb === null) return;
+			event.preventDefault();
+			const along = (at) => {
+				const box = bar.getBoundingClientRect();
+				return axis === "block" ? at.clientY - box.top - bar.clientTop : at.clientX - box.left - bar.clientLeft;
+			};
+			const at = along(event);
+			const onThumb = at >= thumb.offset && at <= thumb.offset + thumb.size;
+			const grab = onThumb ? at - thumb.offset : thumb.size / 2;
+			const follow = (to) => {
+				const current = thumbOf(bar, axis);
+				if (current === null) return;
+				const offset = Math.min(Math.max(along(to) - grab, 0), current.track - current.size);
+				scrollTo(axis, offset / (current.track - current.size) * current.room);
+			};
+			const id = event.pointerId;
+			const move = (to) => {
+				if (to.pointerId === id) follow(to);
+			};
+			const end = (to) => {
+				if (to.pointerId === id) stop();
+			};
+			const owner = bar.ownerDocument;
+			const stop = () => {
+				owner.removeEventListener("pointermove", move);
+				owner.removeEventListener("pointerup", end);
+				owner.removeEventListener("pointercancel", end);
+				mark(bar, "data-dragging", false);
+				dragging = null;
+				show();
+			};
+			owner.addEventListener("pointermove", move);
+			owner.addEventListener("pointerup", end);
+			owner.addEventListener("pointercancel", end);
+			mark(bar, "data-dragging", true);
+			dragging = stop;
+			show();
+			if (!onThumb) follow(event);
+		};
+		const sizes = new ResizeObserver(soon);
+		const changes = new MutationObserver((records) => {
+			for (const record of records) {
+				for (const node of Array.from(record.removedNodes)) if (node instanceof Element) sizes.unobserve(node);
+				for (const node of Array.from(record.addedNodes)) if (node instanceof Element && (record.target === scroller || isBar(node))) sizes.observe(node);
+			}
+			soon();
+		});
+		sizes.observe(scroller);
+		for (const child of Array.from(scroller.children)) sizes.observe(child);
+		for (const bar of bars()) sizes.observe(bar);
+		changes.observe(scroller, { childList: true });
+		changes.observe(area, { childList: true });
+		scroller.addEventListener("scroll", scrolled, { passive: true });
+		area.addEventListener("pointerenter", entered);
+		area.addEventListener("pointerleave", left);
+		area.addEventListener("pointerover", over);
+		area.addEventListener("pointerdown", pressed);
+		scroller.setAttribute(SCROLL_OVERLAID_ATTRIBUTE, "");
+		update();
+		return () => {
+			dragging?.();
+			if (frame !== void 0) cancelAnimationFrame(frame);
+			if (hiding !== void 0) clearTimeout(hiding);
+			sizes.disconnect();
+			changes.disconnect();
+			scroller.removeEventListener("scroll", scrolled);
+			area.removeEventListener("pointerenter", entered);
+			area.removeEventListener("pointerleave", left);
+			area.removeEventListener("pointerover", over);
+			area.removeEventListener("pointerdown", pressed);
+			area.removeEventListener("pointermove", moved);
+			scroller.removeAttribute(SCROLL_OVERLAID_ATTRIBUTE);
+			for (const bar of bars()) {
+				for (const name of [
+					"data-scrollable",
+					"data-shown",
+					"data-dragging"
+				]) bar.removeAttribute(name);
+				bar.style.removeProperty(scrollThumb.offset);
+				bar.style.removeProperty(scrollThumb.size);
+			}
+		};
+	}), (stop) => Effect.sync(stop)))
+});
+export { SCROLL_BAR_ATTRIBUTE, SCROLL_OVERLAID_ATTRIBUTE, ScrollBars, scrollThumb };
+
+//# sourceMappingURL=scroll-bars.js.map

package/dist/dom/scroll-bars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-bars.js","names":[],"sources":["../../src/dom/scroll-bars.ts"],"sourcesContent":["import { Effect, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\n\n/**\n * The attribute that marks a bar beside a scroller `ScrollBars` runs on, set\n * to the axis it shows: `block` (the up-and-down bar) or `inline`.\n */\nexport const SCROLL_BAR_ATTRIBUTE = 'data-scroll-bar'\n\n/**\n * The attribute `ScrollBars` sets on its scroller while it draws the bars, so a\n * style hides the native bar only then: with no Mount running (a coarse\n * pointer, a page not yet hydrated) the browser's bar stays.\n */\nexport const SCROLL_OVERLAID_ATTRIBUTE = 'data-scroll-overlaid'\n\n/**\n * The custom properties `ScrollBars` writes on each bar, in pixels, for its\n * thumb to read: how far along the bar the thumb starts, and how long it is.\n * Physical: an inline bar's offset is from its left edge in either direction.\n */\nexport const scrollThumb = {\n  offset: '--fk-scroll-thumb-offset',\n  size: '--fk-scroll-thumb-size',\n} as const\n\n/** The shortest a thumb is drawn, however long the content, so it stays a target. */\nconst SHORTEST = 20\n\nconst FINE_POINTER = '(hover: hover) and (pointer: fine)'\n\ntype Axis = 'block' | 'inline'\n\n/**\n * An overlay scrollbar as a Mount, with no Message and no Model: where a\n * scroller is scrolled is the browser's, and the bar only shows it.\n *\n * It runs on the scroller (or on an element holding it, named by `scroller`,\n * when the scroller carries another Mount) and drives the bars drawn beside\n * it: the scroller's parent's children marked `data-scroll-bar` (`block` or\n * `inline`), which a style lays over the scroller's edge. Each bar gets `data-scrollable` while its axis has\n * more to scroll, `data-shown` while the scroller scrolls or the pointer moves\n * over it, until `idle` milliseconds pass with neither (or longer, while the\n * pointer rests on a bar), and `data-dragging` while its thumb is dragged; and\n * `--fk-scroll-thumb-offset` and `-size` (see `scrollThumb`). Pressing a bar\n * off its thumb moves the thumb there, then drags it.\n *\n * It does nothing where the primary pointer is coarse or cannot hover, decided\n * when it mounts: touch keeps the browser's bar and its physics. Otherwise the\n * scroller gets `data-scroll-overlaid`, for a style to hide the native bar.\n * How the bar looks, rests, widens and fades is the style's.\n */\nexport const ScrollBars = Mount.defineStream('ScrollBars', {\n  messages: [Schema.Never],\n  args: {\n    /** How long, in milliseconds, the bars stay after the last scroll or move. Default 600. */\n    idle: Schema.optional(Schema.Number),\n    /**\n     * The scroller, as a selector within the element, when it cannot hold this\n     * Mount itself (another component's, with a Mount of its own); looked for\n     * once, when it mounts. Default: the element is the scroller.\n     */\n    scroller: Schema.optional(Schema.String),\n  },\n  execute: ({ element, idle = 600, scroller: within }) =>\n    Stream.callback<never>(() =>\n      Effect.acquireRelease(\n        Effect.sync(() => {\n          if (typeof matchMedia !== 'function' || !matchMedia(FINE_POINTER).matches) {\n            return () => {}\n          }\n          const found = within === undefined ? element : element.querySelector(within)\n          if (!(found instanceof HTMLElement)) return () => {}\n          const scroller = found\n          const area = scroller.parentElement\n          if (area === null) return () => {}\n\n          const isBar = (child: Element): child is HTMLElement =>\n            child instanceof HTMLElement && child.hasAttribute(SCROLL_BAR_ATTRIBUTE)\n          /** Looked for at each use, so a redraw that replaced a bar is followed. */\n          const bars = () => Array.from(area.children).filter(isBar)\n          const axisOf = (bar: HTMLElement): Axis =>\n            bar.getAttribute(SCROLL_BAR_ATTRIBUTE) === 'inline' ? 'inline' : 'block'\n\n          /** The scroller along one axis, with the start measured from the top or the left. */\n          const extent = (axis: Axis) => {\n            if (axis === 'block') {\n              return {\n                view: scroller.clientHeight,\n                content: scroller.scrollHeight,\n                start: scroller.scrollTop,\n              }\n            }\n            const room = scroller.scrollWidth - scroller.clientWidth\n            // A right-to-left scroller counts from 0 at the right down to minus its room.\n            const rtl = getComputedStyle(scroller).direction === 'rtl'\n            return {\n              view: scroller.clientWidth,\n              content: scroller.scrollWidth,\n              start: rtl ? room + scroller.scrollLeft : scroller.scrollLeft,\n            }\n          }\n          const scrollTo = (axis: Axis, start: number) => {\n            if (axis === 'block') {\n              scroller.scrollTop = start\n              return\n            }\n            const room = scroller.scrollWidth - scroller.clientWidth\n            const rtl = getComputedStyle(scroller).direction === 'rtl'\n            scroller.scrollLeft = rtl ? start - room : start\n          }\n          const trackOf = (bar: HTMLElement, axis: Axis) =>\n            axis === 'block' ? bar.clientHeight : bar.clientWidth\n          /** Where the thumb is along its bar, or nothing while the axis has nothing to scroll. */\n          const thumbOf = (bar: HTMLElement, axis: Axis) => {\n            const { view, content, start } = extent(axis)\n            const track = trackOf(bar, axis)\n            if (content - view < 1 || track <= 0) return null\n            const size = Math.min(track, Math.max(SHORTEST, (track * view) / content))\n            const offset = ((track - size) * start) / (content - view)\n            return { track, size, offset, room: content - view }\n          }\n          const set = (bar: HTMLElement, name: string, value: string) => {\n            if (bar.style.getPropertyValue(name) !== value) bar.style.setProperty(name, value)\n          }\n          const mark = (bar: HTMLElement, name: string, on: boolean) => {\n            if (bar.hasAttribute(name) !== on) bar.toggleAttribute(name, on)\n          }\n\n          let frame: number | undefined\n          const update = () => {\n            if (frame !== undefined) cancelAnimationFrame(frame)\n            frame = undefined\n            for (const bar of bars()) {\n              const axis = axisOf(bar)\n              const { view, content } = extent(axis)\n              // Marked first: a style draws no bar until it is, so it has no length before.\n              mark(bar, 'data-scrollable', content - view >= 1)\n              const thumb = thumbOf(bar, axis)\n              if (thumb === null) continue\n              set(bar, scrollThumb.offset, `${thumb.offset}px`)\n              set(bar, scrollThumb.size, `${thumb.size}px`)\n            }\n          }\n          const soon = () => {\n            if (frame === undefined) frame = requestAnimationFrame(update)\n          }\n\n          let hiding: ReturnType<typeof setTimeout> | undefined\n          let resting: HTMLElement | null = null\n          /** Ends the drag under way, if one is. */\n          let dragging: (() => void) | null = null\n          const hide = () => {\n            hiding = undefined\n            // A bar the pointer rests on, or one being dragged, stays until it is left.\n            if (resting !== null || dragging !== null) return\n            for (const bar of bars()) mark(bar, 'data-shown', false)\n          }\n          const show = () => {\n            for (const bar of bars()) mark(bar, 'data-shown', true)\n            if (hiding !== undefined) clearTimeout(hiding)\n            hiding = setTimeout(hide, idle)\n          }\n\n          const scrolled = () => {\n            update()\n            show()\n          }\n          // Listened to only while the pointer is over the area.\n          const moved = (event: PointerEvent) => {\n            if (event.pointerType !== 'touch') show()\n          }\n          const entered = (event: PointerEvent) => {\n            if (event.pointerType === 'touch') return\n            area.addEventListener('pointermove', moved, { passive: true })\n            show()\n          }\n          const left = () => {\n            area.removeEventListener('pointermove', moved)\n            resting = null\n            // A hide that came while the pointer rested on a bar waited for this.\n            if (hiding === undefined) hiding = setTimeout(hide, idle)\n          }\n          const over = (event: PointerEvent) => {\n            const target = event.target\n            resting =\n              target instanceof Element ? (bars().find(bar => bar.contains(target)) ?? null) : null\n          }\n\n          const pressed = (event: PointerEvent) => {\n            if (event.button !== 0 || event.pointerType === 'touch' || dragging !== null) return\n            const target = event.target\n            if (!(target instanceof Element)) return\n            const bar = bars().find(each => each.contains(target))\n            if (bar === undefined) return\n            const axis = axisOf(bar)\n            const thumb = thumbOf(bar, axis)\n            if (thumb === null) return\n            // The bar takes the press: no text selected, no focus moved off the scroller.\n            event.preventDefault()\n            const along = (at: PointerEvent) => {\n              const box = bar.getBoundingClientRect()\n              return axis === 'block'\n                ? at.clientY - box.top - bar.clientTop\n                : at.clientX - box.left - bar.clientLeft\n            }\n            const at = along(event)\n            const onThumb = at >= thumb.offset && at <= thumb.offset + thumb.size\n            // Held where it was taken, or by its middle when the press jumped it there.\n            const grab = onThumb ? at - thumb.offset : thumb.size / 2\n            const follow = (to: PointerEvent) => {\n              const current = thumbOf(bar, axis)\n              if (current === null) return\n              const offset = Math.min(Math.max(along(to) - grab, 0), current.track - current.size)\n              scrollTo(axis, (offset / (current.track - current.size)) * current.room)\n            }\n            const id = event.pointerId\n            const move = (to: PointerEvent) => {\n              if (to.pointerId === id) follow(to)\n            }\n            const end = (to: PointerEvent) => {\n              if (to.pointerId === id) stop()\n            }\n            // On the document, for the drag alone: the pointer leaves the bar as it drags.\n            const owner = bar.ownerDocument\n            const stop = () => {\n              owner.removeEventListener('pointermove', move)\n              owner.removeEventListener('pointerup', end)\n              owner.removeEventListener('pointercancel', end)\n              mark(bar, 'data-dragging', false)\n              dragging = null\n              show()\n            }\n            owner.addEventListener('pointermove', move)\n            owner.addEventListener('pointerup', end)\n            owner.addEventListener('pointercancel', end)\n            mark(bar, 'data-dragging', true)\n            dragging = stop\n            show()\n            if (!onThumb) follow(event)\n          }\n\n          // Both made before anything observes: where one is missing, the Mount\n          // fails with nothing attached.\n          const sizes = new ResizeObserver(soon)\n          // The content's size moves the thumb as much as the scroller's, so each\n          // child of the scroller is watched, and each bar for its track. Only what\n          // a change added or removed is watched or let go: a virtual list swaps\n          // a row or two each frame it scrolls, out of many.\n          const changes = new MutationObserver(records => {\n            for (const record of records) {\n              for (const node of Array.from(record.removedNodes)) {\n                if (node instanceof Element) sizes.unobserve(node)\n              }\n              for (const node of Array.from(record.addedNodes)) {\n                if (node instanceof Element && (record.target === scroller || isBar(node))) {\n                  sizes.observe(node)\n                }\n              }\n            }\n            soon()\n          })\n          sizes.observe(scroller)\n          for (const child of Array.from(scroller.children)) sizes.observe(child)\n          for (const bar of bars()) sizes.observe(bar)\n          changes.observe(scroller, { childList: true })\n          changes.observe(area, { childList: true })\n          scroller.addEventListener('scroll', scrolled, { passive: true })\n          area.addEventListener('pointerenter', entered)\n          area.addEventListener('pointerleave', left)\n          area.addEventListener('pointerover', over)\n          area.addEventListener('pointerdown', pressed)\n          scroller.setAttribute(SCROLL_OVERLAID_ATTRIBUTE, '')\n          update()\n          return () => {\n            // Ended first: ending a drag shows the bars, which sets a hide to clear.\n            dragging?.()\n            if (frame !== undefined) cancelAnimationFrame(frame)\n            if (hiding !== undefined) clearTimeout(hiding)\n            sizes.disconnect()\n            changes.disconnect()\n            scroller.removeEventListener('scroll', scrolled)\n            area.removeEventListener('pointerenter', entered)\n            area.removeEventListener('pointerleave', left)\n            area.removeEventListener('pointerover', over)\n            area.removeEventListener('pointerdown', pressed)\n            area.removeEventListener('pointermove', moved)\n            scroller.removeAttribute(SCROLL_OVERLAID_ATTRIBUTE)\n            for (const bar of bars()) {\n              for (const name of ['data-scrollable', 'data-shown', 'data-dragging'])\n                bar.removeAttribute(name)\n              bar.style.removeProperty(scrollThumb.offset)\n              bar.style.removeProperty(scrollThumb.size)\n            }\n          }\n        }),\n        stop => Effect.sync(stop),\n      ),\n    ),\n})\n"],"mappings":"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"}