foldkit-primitives 0.15.3 → 0.16.0

package/dist/dom/swipe.js

@@ -0,0 +1,291 @@
+import { Effect, Queue, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+// src/dom/swipe.ts
+const SwipeStarted = Schema.TaggedStruct("SwipeStarted", {
+	pointerId: Schema.Number,
+	pointerType: Schema.String,
+	/** The border box of what `measure` names (the element itself by default), as the swipe starts. */
+	width: Schema.Number,
+	height: Schema.Number
+});
+const Swiped = Schema.TaggedStruct("Swiped", {
+	pointerId: Schema.Number,
+	/** From where the pointer went down, in CSS pixels. */
+	deltaX: Schema.Number,
+	deltaY: Schema.Number
+});
+const SwipeEnded = Schema.TaggedStruct("SwipeEnded", {
+	pointerId: Schema.Number,
+	/** From where the pointer went down to where it came up, in CSS pixels. */
+	deltaX: Schema.Number,
+	deltaY: Schema.Number,
+	/**
+	* How fast the pointer was moving as it came up, in pixels a millisecond,
+	* over the last `SWIPE_WINDOW` milliseconds: 0 when it rested there first.
+	*/
+	velocityX: Schema.Number,
+	velocityY: Schema.Number,
+	/** `false` when the pointer was cancelled or capture was lost. */
+	completed: Schema.Boolean
+});
+/** How far back, in milliseconds, the release velocity looks. */
+const SWIPE_WINDOW = 100;
+/**
+* What a swipe never starts on when its element `scrolls`: a field whose own
+* drag selects text or moves a thumb, and anything marked `data-no-swipe`.
+*/
+const NO_SWIPE = "input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [data-no-swipe]";
+/** Every element a Swipe is mounted on: a touch inside one is that one's, not an outer one's. */
+const owners = /* @__PURE__ */ new WeakSet();
+/**
+* The velocity of the samples within `SWIPE_WINDOW` of the last: the way
+* from the oldest of them to the last over the time between. A pointer that
+* came to rest before the last sample has no recent way to measure, so 0.
+*/
+const velocityOf = (samples) => {
+	const last = samples.at(-1);
+	if (last === void 0) return {
+		x: 0,
+		y: 0
+	};
+	const first = samples.find((sample) => last.at - sample.at <= 100) ?? last;
+	const elapsed = last.at - first.at;
+	return elapsed <= 0 ? {
+		x: 0,
+		y: 0
+	} : {
+		x: (last.x - first.x) / elapsed,
+		y: (last.y - first.y) / elapsed
+	};
+};
+/**
+* Whether anything from `target` up to `root` can still scroll along `axis`
+* the way a finger moving `along` (positive is down or right) pulls it: a
+* finger going down scrolls content toward its start.
+*/
+const canScroll = (target, root, axis, along) => {
+	for (let at = target; at !== null; at = at.parentElement) {
+		const overflow = getComputedStyle(at)[axis === "y" ? "overflowY" : "overflowX"];
+		if (overflow === "auto" || overflow === "scroll") {
+			const position = Math.abs(axis === "y" ? at.scrollTop : at.scrollLeft);
+			const room = axis === "y" ? at.scrollHeight - at.clientHeight : at.scrollWidth - at.clientWidth;
+			if (room > 1 && (along > 0 ? position > .5 : position < room - .5)) return true;
+		}
+		if (at === root) return false;
+	}
+	return false;
+};
+/**
+* `Move` with the speed of its release, for a gesture that a flick ends
+* (a sheet dragged to dismiss, a card swiped away): a primary-button pointer
+* down (or, given a `slop`, its first move past it) captures the pointer,
+* each move reports the delta from where it was pressed, and up reports the
+* last delta with the velocity over the last `SWIPE_WINDOW` milliseconds, by
+* the events' own time stamps. Cancel or lost capture ends it incomplete.
+* The start reports the size of what is moved, so a distance can be read as
+* a share of it. What a delta or a speed means is the parent's `update`.
+* Capture is released with the Mount.
+*
+* Given `scrolls`, the element holds content that scrolls (a sheet's panel),
+* and a touch is followed by touch events, whose move can still refuse the
+* browser's scroll once the touch is under way, where a pointer's cannot:
+* past the slop, a touch that runs along the axis and finds nothing under it
+* that can scroll further its way swipes, and the browser scrolls any other.
+* A touch inside an element with a Swipe of its own (a handle in the panel)
+* is that one's, and none starts on a field or on `data-no-swipe`
+* (`NO_SWIPE`).
+*/
+const Swipe = Mount.defineStream("Swipe", {
+	messages: [
+		SwipeStarted,
+		Swiped,
+		SwipeEnded
+	],
+	args: {
+		/**
+		* The nearest ancestor matching this selector is measured as the swipe
+		* starts, for what the swipe moves (a sheet's panel, dragged by its
+		* handle). Default: the element itself.
+		*/
+		measure: Schema.optional(Schema.String),
+		/**
+		* How far, in pixels, a press must move before it is a swipe. Until
+		* then nothing is captured or reported, so a press that stays put is
+		* still a click on whatever is under it (a tab inside a drag grip).
+		* Default 0: the press itself starts the swipe; with `scrolls`, the
+		* first move decides.
+		*/
+		slop: Schema.optional(Schema.Number),
+		/** The axis the element's content scrolls along, which a touch yields to; see above. */
+		scrolls: Schema.optional(Schema.Literals(["x", "y"])),
+		/** Follows touches alone: a mouse or a pen is left to the page (and to a handle's own Swipe). */
+		touchOnly: Schema.optional(Schema.Boolean)
+	},
+	execute: ({ element, measure, slop = 0, scrolls, touchOnly = false }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		const target = element;
+		let active = null;
+		const offer = (fact) => Queue.offerUnsafe(queue, fact);
+		const sampleOf = (at, x = 0, y = 0) => ({
+			at,
+			x,
+			y
+		});
+		const end = (pointerId, last, completed, captured) => {
+			if (active === null || active.pointerId !== pointerId) return;
+			const { samples, started } = active;
+			active = null;
+			if (!started) return;
+			if (captured) try {
+				target.releasePointerCapture?.(pointerId);
+			} catch {}
+			const final = completed ? last : samples.at(-1) ?? last;
+			const all = completed ? [...samples, final] : samples;
+			const start = all[0] ?? final;
+			const velocity = completed ? velocityOf(all) : {
+				x: 0,
+				y: 0
+			};
+			offer(SwipeEnded.make({
+				pointerId,
+				deltaX: final.x - start.x,
+				deltaY: final.y - start.y,
+				velocityX: velocity.x,
+				velocityY: velocity.y,
+				completed
+			}));
+		};
+		const begin = (pointer, capture) => {
+			pointer.started = true;
+			if (capture) try {
+				target.setPointerCapture?.(pointer.pointerId);
+			} catch {}
+			const box = (measure === void 0 ? element : element.closest(measure) ?? element).getBoundingClientRect();
+			offer(SwipeStarted.make({
+				pointerId: pointer.pointerId,
+				pointerType: pointer.pointerType,
+				width: box.width,
+				height: box.height
+			}));
+		};
+		const moved = (pointer, sample) => {
+			const start = pointer.samples[0] ?? sample;
+			pointer.samples = [
+				start,
+				...pointer.samples.slice(1).filter((each) => sample.at - each.at <= 100),
+				sample
+			];
+			offer(Swiped.make({
+				pointerId: pointer.pointerId,
+				deltaX: sample.x - start.x,
+				deltaY: sample.y - start.y
+			}));
+		};
+		const ownTouch = (from) => {
+			if (!(from instanceof Element)) return false;
+			const field = from.closest(NO_SWIPE);
+			if (field !== null && element.contains(field)) return false;
+			for (let at = from; at !== null && at !== element; at = at.parentElement) if (owners.has(at)) return false;
+			return true;
+		};
+		const touchOf = (event, id) => Array.from(event.changedTouches).find((touch) => touch.identifier === id);
+		let touched = null;
+		const pointerListeners = [
+			["pointerdown", (event) => {
+				const pointer = event;
+				const type = pointer.pointerType ?? "mouse";
+				if (scrolls !== void 0 && type === "touch") return;
+				if (touchOnly && type !== "touch") return;
+				if ((pointer.button ?? 0) !== 0 || active !== null) return;
+				active = {
+					pointerId: pointer.pointerId ?? 0,
+					pointerType: type,
+					samples: [sampleOf(pointer.timeStamp, pointer.clientX, pointer.clientY)],
+					started: false
+				};
+				if (slop <= 0) begin(active, true);
+			}],
+			["pointermove", (event) => {
+				const pointer = event;
+				if (active === null || active.pointerId !== (pointer.pointerId ?? 0)) return;
+				const sample = sampleOf(pointer.timeStamp, pointer.clientX, pointer.clientY);
+				if (!active.started) {
+					const start = active.samples[0] ?? sample;
+					if (Math.hypot(sample.x - start.x, sample.y - start.y) < slop) return;
+					begin(active, true);
+				}
+				moved(active, sample);
+			}],
+			...[
+				"pointerup",
+				"pointercancel",
+				"lostpointercapture"
+			].map((type) => [type, (event) => {
+				const pointer = event;
+				if (active?.pointerType === "touch" && scrolls !== void 0) return;
+				end(pointer.pointerId ?? 0, sampleOf(pointer.timeStamp, pointer.clientX, pointer.clientY), type === "pointerup", true);
+			}])
+		];
+		const touchListeners = scrolls === void 0 ? [] : [
+			["touchstart", (event) => {
+				const touches = event;
+				const touch = touches.changedTouches[0];
+				if (active !== null || touches.touches.length !== 1 || touch === void 0) return;
+				if (!ownTouch(touches.target)) return;
+				touched = touches.target;
+				active = {
+					pointerId: touch.identifier,
+					pointerType: "touch",
+					samples: [sampleOf(touches.timeStamp, touch.clientX, touch.clientY)],
+					started: false
+				};
+			}],
+			["touchmove", (event) => {
+				const touches = event;
+				if (active === null) return;
+				const touch = touchOf(touches, active.pointerId);
+				if (touch === void 0) return;
+				const sample = sampleOf(touches.timeStamp, touch.clientX, touch.clientY);
+				if (!active.started) {
+					const start = active.samples[0] ?? sample;
+					const dx = sample.x - start.x;
+					const dy = sample.y - start.y;
+					if (Math.hypot(dx, dy) < Math.max(slop, 1)) return;
+					const along = scrolls === "y" ? dy : dx;
+					if (Math.abs(scrolls === "y" ? dx : dy) > Math.abs(along) || canScroll(touched ?? element, element, scrolls, along) || !touches.cancelable) {
+						active = null;
+						return;
+					}
+					begin(active, false);
+				}
+				touches.preventDefault();
+				moved(active, sample);
+			}],
+			...["touchend", "touchcancel"].map((type) => [type, (event) => {
+				const touches = event;
+				if (active === null) return;
+				const touch = touchOf(touches, active.pointerId);
+				if (touch === void 0) return;
+				end(active.pointerId, sampleOf(touches.timeStamp, touch.clientX, touch.clientY), type === "touchend", false);
+			}])
+		];
+		owners.add(element);
+		for (const [type, listener] of pointerListeners) element.addEventListener(type, listener);
+		for (const [type, listener] of touchListeners) element.addEventListener(type, listener, { passive: false });
+		return {
+			pointerListeners,
+			touchListeners,
+			current: () => active
+		};
+	}), ({ pointerListeners, touchListeners, current }) => Effect.sync(() => {
+		owners.delete(element);
+		for (const [type, listener] of pointerListeners) element.removeEventListener(type, listener);
+		for (const [type, listener] of touchListeners) element.removeEventListener(type, listener);
+		const pointer = current();
+		if (pointer !== null && !(pointer.pointerType === "touch" && scrolls !== void 0)) try {
+			element.releasePointerCapture?.(pointer.pointerId);
+		} catch {}
+	})))
+});
+export { NO_SWIPE, SWIPE_WINDOW, Swipe, SwipeEnded, SwipeStarted, Swiped, canScroll, velocityOf };
+
+//# sourceMappingURL=swipe.js.map

package/dist/dom/swipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipe.js","names":[],"sources":["../../src/dom/swipe.ts"],"sourcesContent":["import { Effect, Queue, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\n\nexport const SwipeStarted = Schema.TaggedStruct('SwipeStarted', {\n  pointerId: Schema.Number,\n  pointerType: Schema.String,\n  /** The border box of what `measure` names (the element itself by default), as the swipe starts. */\n  width: Schema.Number,\n  height: Schema.Number,\n})\nexport type SwipeStarted = typeof SwipeStarted.Type\n\nexport const Swiped = Schema.TaggedStruct('Swiped', {\n  pointerId: Schema.Number,\n  /** From where the pointer went down, in CSS pixels. */\n  deltaX: Schema.Number,\n  deltaY: Schema.Number,\n})\nexport type Swiped = typeof Swiped.Type\n\nexport const SwipeEnded = Schema.TaggedStruct('SwipeEnded', {\n  pointerId: Schema.Number,\n  /** From where the pointer went down to where it came up, in CSS pixels. */\n  deltaX: Schema.Number,\n  deltaY: Schema.Number,\n  /**\n   * How fast the pointer was moving as it came up, in pixels a millisecond,\n   * over the last `SWIPE_WINDOW` milliseconds: 0 when it rested there first.\n   */\n  velocityX: Schema.Number,\n  velocityY: Schema.Number,\n  /** `false` when the pointer was cancelled or capture was lost. */\n  completed: Schema.Boolean,\n})\nexport type SwipeEnded = typeof SwipeEnded.Type\n\nexport type SwipeFact = SwipeStarted | Swiped | SwipeEnded\n\n/** How far back, in milliseconds, the release velocity looks. */\nexport const SWIPE_WINDOW = 100\n\n/**\n * What a swipe never starts on when its element `scrolls`: a field whose own\n * drag selects text or moves a thumb, and anything marked `data-no-swipe`.\n */\nexport const NO_SWIPE =\n  'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [data-no-swipe]'\n\ntype PointerLike = Event & {\n  readonly pointerId?: number\n  readonly button?: number\n  readonly pointerType?: string\n  readonly clientX?: number\n  readonly clientY?: number\n}\n\ntype Capturing = Element & {\n  setPointerCapture?: (pointerId: number) => void\n  releasePointerCapture?: (pointerId: number) => void\n}\n\ninterface Sample {\n  readonly at: number\n  readonly x: number\n  readonly y: number\n}\n\n/** A pointer or a touch being followed, from where it went down. */\ninterface Active {\n  readonly pointerId: number\n  readonly pointerType: string\n  samples: Array<Sample>\n  started: boolean\n}\n\n/** Every element a Swipe is mounted on: a touch inside one is that one's, not an outer one's. */\nconst owners = new WeakSet<Element>()\n\n/**\n * The velocity of the samples within `SWIPE_WINDOW` of the last: the way\n * from the oldest of them to the last over the time between. A pointer that\n * came to rest before the last sample has no recent way to measure, so 0.\n */\nexport const velocityOf = (samples: ReadonlyArray<Sample>): { x: number; y: number } => {\n  const last = samples.at(-1)\n  if (last === undefined) return { x: 0, y: 0 }\n  const first = samples.find(sample => last.at - sample.at <= SWIPE_WINDOW) ?? last\n  const elapsed = last.at - first.at\n  return elapsed <= 0\n    ? { x: 0, y: 0 }\n    : { x: (last.x - first.x) / elapsed, y: (last.y - first.y) / elapsed }\n}\n\n/**\n * Whether anything from `target` up to `root` can still scroll along `axis`\n * the way a finger moving `along` (positive is down or right) pulls it: a\n * finger going down scrolls content toward its start.\n */\nexport const canScroll = (\n  target: Element,\n  root: Element,\n  axis: 'x' | 'y',\n  along: number,\n): boolean => {\n  for (let at: Element | null = target; at !== null; at = at.parentElement) {\n    const overflow = getComputedStyle(at)[axis === 'y' ? 'overflowY' : 'overflowX']\n    if (overflow === 'auto' || overflow === 'scroll') {\n      const position = Math.abs(axis === 'y' ? at.scrollTop : at.scrollLeft)\n      const room =\n        axis === 'y' ? at.scrollHeight - at.clientHeight : at.scrollWidth - at.clientWidth\n      if (room > 1 && (along > 0 ? position > 0.5 : position < room - 0.5)) return true\n    }\n    if (at === root) return false\n  }\n  return false\n}\n\n/**\n * `Move` with the speed of its release, for a gesture that a flick ends\n * (a sheet dragged to dismiss, a card swiped away): a primary-button pointer\n * down (or, given a `slop`, its first move past it) captures the pointer,\n * each move reports the delta from where it was pressed, and up reports the\n * last delta with the velocity over the last `SWIPE_WINDOW` milliseconds, by\n * the events' own time stamps. Cancel or lost capture ends it incomplete.\n * The start reports the size of what is moved, so a distance can be read as\n * a share of it. What a delta or a speed means is the parent's `update`.\n * Capture is released with the Mount.\n *\n * Given `scrolls`, the element holds content that scrolls (a sheet's panel),\n * and a touch is followed by touch events, whose move can still refuse the\n * browser's scroll once the touch is under way, where a pointer's cannot:\n * past the slop, a touch that runs along the axis and finds nothing under it\n * that can scroll further its way swipes, and the browser scrolls any other.\n * A touch inside an element with a Swipe of its own (a handle in the panel)\n * is that one's, and none starts on a field or on `data-no-swipe`\n * (`NO_SWIPE`).\n */\nexport const Swipe = Mount.defineStream('Swipe', {\n  messages: [SwipeStarted, Swiped, SwipeEnded],\n  args: {\n    /**\n     * The nearest ancestor matching this selector is measured as the swipe\n     * starts, for what the swipe moves (a sheet's panel, dragged by its\n     * handle). Default: the element itself.\n     */\n    measure: Schema.optional(Schema.String),\n    /**\n     * How far, in pixels, a press must move before it is a swipe. Until\n     * then nothing is captured or reported, so a press that stays put is\n     * still a click on whatever is under it (a tab inside a drag grip).\n     * Default 0: the press itself starts the swipe; with `scrolls`, the\n     * first move decides.\n     */\n    slop: Schema.optional(Schema.Number),\n    /** The axis the element's content scrolls along, which a touch yields to; see above. */\n    scrolls: Schema.optional(Schema.Literals(['x', 'y'])),\n    /** Follows touches alone: a mouse or a pen is left to the page (and to a handle's own Swipe). */\n    touchOnly: Schema.optional(Schema.Boolean),\n  },\n  execute: ({ element, measure, slop = 0, scrolls, touchOnly = false }) =>\n    Stream.callback<SwipeFact>(queue =>\n      Effect.acquireRelease(\n        Effect.sync(() => {\n          const target = element as Capturing\n          let active: Active | null = null\n          const offer = (fact: SwipeFact) => Queue.offerUnsafe(queue, fact)\n          const sampleOf = (at: number, x = 0, y = 0): Sample => ({ at, x, y })\n          const end = (pointerId: number, last: Sample, completed: boolean, captured: boolean) => {\n            if (active === null || active.pointerId !== pointerId) return\n            const { samples, started } = active\n            active = null\n            // A press that never moved past the slop was a click, not a swipe.\n            if (!started) return\n            if (captured) {\n              try {\n                target.releasePointerCapture?.(pointerId)\n              } catch {\n                // Capture may already be gone; the end is still reported.\n              }\n            }\n            // A lost capture or a cancel carries no place: the last move's stands.\n            const final = completed ? last : (samples.at(-1) ?? last)\n            const all = completed ? [...samples, final] : samples\n            const start = all[0] ?? final\n            const velocity = completed ? velocityOf(all) : { x: 0, y: 0 }\n            offer(\n              SwipeEnded.make({\n                pointerId,\n                deltaX: final.x - start.x,\n                deltaY: final.y - start.y,\n                velocityX: velocity.x,\n                velocityY: velocity.y,\n                completed,\n              }),\n            )\n          }\n          // Report the size of what is moved; a pointer's swipe also captures it.\n          const begin = (pointer: Active, capture: boolean) => {\n            pointer.started = true\n            if (capture) {\n              try {\n                target.setPointerCapture?.(pointer.pointerId)\n              } catch {\n                // Without capture the move still reports while over the element.\n              }\n            }\n            const moved = measure === undefined ? element : (element.closest(measure) ?? element)\n            const box = moved.getBoundingClientRect()\n            offer(\n              SwipeStarted.make({\n                pointerId: pointer.pointerId,\n                pointerType: pointer.pointerType,\n                width: box.width,\n                height: box.height,\n              }),\n            )\n          }\n          const moved = (pointer: Active, sample: Sample) => {\n            const start = pointer.samples[0] ?? sample\n            // Only what the velocity can still read, and where it began.\n            pointer.samples = [\n              start,\n              ...pointer.samples.slice(1).filter(each => sample.at - each.at <= SWIPE_WINDOW),\n              sample,\n            ]\n            offer(\n              Swiped.make({\n                pointerId: pointer.pointerId,\n                deltaX: sample.x - start.x,\n                deltaY: sample.y - start.y,\n              }),\n            )\n          }\n          // A touch this Swipe follows: started in it, on nothing of another Swipe's or NO_SWIPE.\n          const ownTouch = (from: EventTarget | null): from is Element => {\n            if (!(from instanceof Element)) return false\n            const field = from.closest(NO_SWIPE)\n            if (field !== null && element.contains(field)) return false\n            for (\n              let at: Element | null = from;\n              at !== null && at !== element;\n              at = at.parentElement\n            )\n              if (owners.has(at)) return false\n            return true\n          }\n          const touchOf = (event: TouchEvent, id: number) =>\n            Array.from(event.changedTouches).find(touch => touch.identifier === id)\n          let touched: Element | null = null\n          const pointerListeners: ReadonlyArray<readonly [string, (event: Event) => void]> = [\n            [\n              'pointerdown',\n              event => {\n                const pointer = event as PointerLike\n                const type = pointer.pointerType ?? 'mouse'\n                // Touch events follow a touch when the content scrolls.\n                if (scrolls !== undefined && type === 'touch') return\n                if (touchOnly && type !== 'touch') return\n                if ((pointer.button ?? 0) !== 0 || active !== null) return\n                active = {\n                  pointerId: pointer.pointerId ?? 0,\n                  pointerType: type,\n                  samples: [sampleOf(pointer.timeStamp, pointer.clientX, pointer.clientY)],\n                  started: false,\n                }\n                if (slop <= 0) begin(active, true)\n              },\n            ],\n            [\n              'pointermove',\n              event => {\n                const pointer = event as PointerLike\n                if (active === null || active.pointerId !== (pointer.pointerId ?? 0)) return\n                const sample = sampleOf(pointer.timeStamp, pointer.clientX, pointer.clientY)\n                if (!active.started) {\n                  const start = active.samples[0] ?? sample\n                  if (Math.hypot(sample.x - start.x, sample.y - start.y) < slop) return\n                  begin(active, true)\n                }\n                moved(active, sample)\n              },\n            ],\n            ...(['pointerup', 'pointercancel', 'lostpointercapture'] as const).map(\n              type =>\n                [\n                  type,\n                  (event: Event) => {\n                    const pointer = event as PointerLike\n                    if (active?.pointerType === 'touch' && scrolls !== undefined) return\n                    end(\n                      pointer.pointerId ?? 0,\n                      sampleOf(pointer.timeStamp, pointer.clientX, pointer.clientY),\n                      type === 'pointerup',\n                      true,\n                    )\n                  },\n                ] as const,\n            ),\n          ]\n          const touchListeners: ReadonlyArray<readonly [string, (event: Event) => void]> =\n            scrolls === undefined\n              ? []\n              : [\n                  [\n                    'touchstart',\n                    event => {\n                      const touches = event as TouchEvent\n                      const touch = touches.changedTouches[0]\n                      if (active !== null || touches.touches.length !== 1 || touch === undefined)\n                        return\n                      if (!ownTouch(touches.target)) return\n                      touched = touches.target as Element\n                      active = {\n                        pointerId: touch.identifier,\n                        pointerType: 'touch',\n                        samples: [sampleOf(touches.timeStamp, touch.clientX, touch.clientY)],\n                        started: false,\n                      }\n                    },\n                  ],\n                  [\n                    'touchmove',\n                    event => {\n                      const touches = event as TouchEvent\n                      if (active === null) return\n                      const touch = touchOf(touches, active.pointerId)\n                      if (touch === undefined) return\n                      const sample = sampleOf(touches.timeStamp, touch.clientX, touch.clientY)\n                      if (!active.started) {\n                        const start = active.samples[0] ?? sample\n                        const dx = sample.x - start.x\n                        const dy = sample.y - start.y\n                        if (Math.hypot(dx, dy) < Math.max(slop, 1)) return\n                        const along = scrolls === 'y' ? dy : dx\n                        const across = scrolls === 'y' ? dx : dy\n                        // Across the axis, into content that scrolls, or already\n                        // the browser's: the page's, and followed no further.\n                        if (\n                          Math.abs(across) > Math.abs(along) ||\n                          canScroll(touched ?? element, element, scrolls, along) ||\n                          !touches.cancelable\n                        ) {\n                          active = null\n                          return\n                        }\n                        begin(active, false)\n                      }\n                      touches.preventDefault()\n                      moved(active, sample)\n                    },\n                  ],\n                  ...(['touchend', 'touchcancel'] as const).map(\n                    type =>\n                      [\n                        type,\n                        (event: Event) => {\n                          const touches = event as TouchEvent\n                          if (active === null) return\n                          const touch = touchOf(touches, active.pointerId)\n                          if (touch === undefined) return\n                          end(\n                            active.pointerId,\n                            sampleOf(touches.timeStamp, touch.clientX, touch.clientY),\n                            type === 'touchend',\n                            false,\n                          )\n                        },\n                      ] as const,\n                  ),\n                ]\n          owners.add(element)\n          for (const [type, listener] of pointerListeners) element.addEventListener(type, listener)\n          // Not passive: a move that swipes refuses the browser's scroll.\n          for (const [type, listener] of touchListeners)\n            element.addEventListener(type, listener, { passive: false })\n          return { pointerListeners, touchListeners, current: () => active }\n        }),\n        ({ pointerListeners, touchListeners, current }) =>\n          Effect.sync(() => {\n            owners.delete(element)\n            for (const [type, listener] of pointerListeners)\n              element.removeEventListener(type, listener)\n            for (const [type, listener] of touchListeners)\n              element.removeEventListener(type, listener)\n            const pointer = current()\n            if (pointer !== null && !(pointer.pointerType === 'touch' && scrolls !== undefined)) {\n              try {\n                ;(element as Capturing).releasePointerCapture?.(pointer.pointerId)\n              } catch {\n                // Already released.\n              }\n            }\n          }),\n      ),\n    ),\n})\n"],"mappings":"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"}

package/dist/dom/targets.d.ts

@@ -0,0 +1,45 @@
+import { Schema } from "effect";
+import * as Mount from "foldkit/mount";
+export declare const TargetHovered: Schema.TaggedStruct<"TargetHovered", {
+  /** The marked descendant under the pointer, or `null` when there is none. */
+  readonly id: Schema.NullOr<Schema.String>;
+}>;
+export type TargetHovered = typeof TargetHovered.Type;
+export declare const TargetPressed: Schema.TaggedStruct<"TargetPressed", {
+  readonly id: Schema.String;
+  readonly shiftKey: Schema.Boolean;
+  readonly altKey: Schema.Boolean;
+  readonly ctrlKey: Schema.Boolean;
+  readonly metaKey: Schema.Boolean;
+}>;
+export type TargetPressed = typeof TargetPressed.Type;
+export type TargetFact = TargetHovered | TargetPressed;
+/** The id of the nearest marked element at or above `from`, inside `container`. */
+export declare const targetOf: (container: Element, from: EventTarget | null, attribute: string) => string | null;
+/**
+ * Which marked descendant of an element the pointer is over, and which one was
+ * pressed, as a Mount: one set of listeners on the container, not one per item.
+ * A descendant is marked by an attribute whose value is its id, such as a
+ * canvas's `data-composition-node` or a table's `data-row`. The nearest marked
+ * ancestor of the event's target, inside the container, is the one reported.
+ *
+ * What hovering or pressing means (a selection, an outline, a menu) is the
+ * parent's `update`.
+ */
+export declare const Targets: Mount.MountDefinitionWithArgs<"Targets", {
+  /** The attribute that marks a descendant, holding its id. */
+  attribute: Schema.String;
+  /** Prevent a press's default, such as a link navigating inside an editor's canvas. */
+  preventDefault: Schema.Boolean;
+}, {
+  readonly _tag: "TargetHovered";
+  readonly id: string | null;
+} | {
+  readonly _tag: "TargetPressed";
+  readonly id: string;
+  readonly shiftKey: boolean;
+  readonly altKey: boolean;
+  readonly ctrlKey: boolean;
+  readonly metaKey: boolean;
+}>;
+//# sourceMappingURL=targets.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"targets.d.ts","names":[],"sources":["../../src/dom/targets.ts"],"mappings":";;qBAGa,eAAa,OAAA;;;;YAId,uBAAuB,cAAc;qBAEpC,eAAa,OAAA;;;;;;;YAOd,uBAAuB,cAAc;YAErC,aAAa,gBAAgB;;qBAU5B,WAAQ,WAAe,SAAO,MAAQ,oBAAkB;;;;;;;;;;;qBAgBxD,SAAO,MAAA"}

package/dist/dom/targets.js

@@ -0,0 +1,70 @@
+import { Effect, Queue, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+// src/dom/targets.ts
+const TargetHovered = Schema.TaggedStruct("TargetHovered", { 
+/** The marked descendant under the pointer, or `null` when there is none. */
+id: Schema.NullOr(Schema.String) });
+const TargetPressed = Schema.TaggedStruct("TargetPressed", {
+	id: Schema.String,
+	shiftKey: Schema.Boolean,
+	altKey: Schema.Boolean,
+	ctrlKey: Schema.Boolean,
+	metaKey: Schema.Boolean
+});
+/** The id of the nearest marked element at or above `from`, inside `container`. */
+const targetOf = (container, from, attribute) => {
+	if (!(from instanceof Element)) return null;
+	const marked = from.closest(`[${attribute}]`);
+	return marked !== null && container.contains(marked) ? marked.getAttribute(attribute) : null;
+};
+/**
+* Which marked descendant of an element the pointer is over, and which one was
+* pressed, as a Mount: one set of listeners on the container, not one per item.
+* A descendant is marked by an attribute whose value is its id, such as a
+* canvas's `data-composition-node` or a table's `data-row`. The nearest marked
+* ancestor of the event's target, inside the container, is the one reported.
+*
+* What hovering or pressing means (a selection, an outline, a menu) is the
+* parent's `update`.
+*/
+const Targets = Mount.defineStream("Targets", {
+	messages: [TargetHovered, TargetPressed],
+	args: {
+		/** The attribute that marks a descendant, holding its id. */
+		attribute: Schema.String,
+		/** Prevent a press's default, such as a link navigating inside an editor's canvas. */
+		preventDefault: Schema.Boolean
+	},
+	execute: ({ element, attribute, preventDefault }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		let hovered = null;
+		const hover = (id) => {
+			if (id === hovered) return;
+			hovered = id;
+			Queue.offerUnsafe(queue, TargetHovered.make({ id }));
+		};
+		const listeners = [
+			["pointerover", (event) => hover(targetOf(element, event.target, attribute))],
+			["pointerleave", () => hover(null)],
+			["click", (event) => {
+				const id = targetOf(element, event.target, attribute);
+				if (id === null) return;
+				if (preventDefault) event.preventDefault();
+				const modified = event;
+				Queue.offerUnsafe(queue, TargetPressed.make({
+					id,
+					shiftKey: modified.shiftKey === true,
+					altKey: modified.altKey === true,
+					ctrlKey: modified.ctrlKey === true,
+					metaKey: modified.metaKey === true
+				}));
+			}]
+		];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return listeners;
+	}), (listeners) => Effect.sync(() => {
+		for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+	})))
+});
+export { TargetHovered, TargetPressed, Targets, targetOf };
+
+//# sourceMappingURL=targets.js.map

package/dist/dom/targets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"targets.js","names":[],"sources":["../../src/dom/targets.ts"],"sourcesContent":["import { Effect, Queue, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\n\nexport const TargetHovered = Schema.TaggedStruct('TargetHovered', {\n  /** The marked descendant under the pointer, or `null` when there is none. */\n  id: Schema.NullOr(Schema.String),\n})\nexport type TargetHovered = typeof TargetHovered.Type\n\nexport const TargetPressed = Schema.TaggedStruct('TargetPressed', {\n  id: Schema.String,\n  shiftKey: Schema.Boolean,\n  altKey: Schema.Boolean,\n  ctrlKey: Schema.Boolean,\n  metaKey: Schema.Boolean,\n})\nexport type TargetPressed = typeof TargetPressed.Type\n\nexport type TargetFact = TargetHovered | TargetPressed\n\ntype Modified = Event & {\n  readonly shiftKey?: boolean\n  readonly altKey?: boolean\n  readonly ctrlKey?: boolean\n  readonly metaKey?: boolean\n}\n\n/** The id of the nearest marked element at or above `from`, inside `container`. */\nexport const targetOf = (container: Element, from: EventTarget | null, attribute: string) => {\n  if (!(from instanceof Element)) return null\n  const marked = from.closest(`[${attribute}]`)\n  return marked !== null && container.contains(marked) ? marked.getAttribute(attribute) : null\n}\n\n/**\n * Which marked descendant of an element the pointer is over, and which one was\n * pressed, as a Mount: one set of listeners on the container, not one per item.\n * A descendant is marked by an attribute whose value is its id, such as a\n * canvas's `data-composition-node` or a table's `data-row`. The nearest marked\n * ancestor of the event's target, inside the container, is the one reported.\n *\n * What hovering or pressing means (a selection, an outline, a menu) is the\n * parent's `update`.\n */\nexport const Targets = Mount.defineStream('Targets', {\n  messages: [TargetHovered, TargetPressed],\n  args: {\n    /** The attribute that marks a descendant, holding its id. */\n    attribute: Schema.String,\n    /** Prevent a press's default, such as a link navigating inside an editor's canvas. */\n    preventDefault: Schema.Boolean,\n  },\n  execute: ({ element, attribute, preventDefault }) =>\n    Stream.callback<TargetFact>(queue =>\n      Effect.acquireRelease(\n        Effect.sync(() => {\n          let hovered: string | null = null\n          const hover = (id: string | null) => {\n            if (id === hovered) return\n            hovered = id\n            Queue.offerUnsafe(queue, TargetHovered.make({ id }))\n          }\n          const listeners: ReadonlyArray<readonly [string, (event: Event) => void]> = [\n            ['pointerover', event => hover(targetOf(element, event.target, attribute))],\n            ['pointerleave', () => hover(null)],\n            [\n              'click',\n              event => {\n                const id = targetOf(element, event.target, attribute)\n                if (id === null) return\n                if (preventDefault) event.preventDefault()\n                const modified = event as Modified\n                Queue.offerUnsafe(\n                  queue,\n                  TargetPressed.make({\n                    id,\n                    shiftKey: modified.shiftKey === true,\n                    altKey: modified.altKey === true,\n                    ctrlKey: modified.ctrlKey === true,\n                    metaKey: modified.metaKey === true,\n                  }),\n                )\n              },\n            ],\n          ]\n          for (const [type, listener] of listeners) element.addEventListener(type, listener)\n          return listeners\n        }),\n        listeners =>\n          Effect.sync(() => {\n            for (const [type, listener] of listeners) element.removeEventListener(type, listener)\n          }),\n      ),\n    ),\n})\n"],"mappings":";;;AAGA,MAAa,gBAAgB,OAAO,aAAa,iBAAiB;;AAEhE,IAAI,OAAO,OAAO,OAAO,MAAM,EACjC,CAAC;AAGD,MAAa,gBAAgB,OAAO,aAAa,iBAAiB;CAChE,IAAI,OAAO;CACX,UAAU,OAAO;CACjB,QAAQ,OAAO;CACf,SAAS,OAAO;CAChB,SAAS,OAAO;AAClB,CAAC;;AAaD,MAAa,YAAY,WAAoB,MAA0B,cAAsB;CAC3F,IAAI,EAAE,gBAAgB,UAAU,OAAO;CACvC,MAAM,SAAS,KAAK,QAAQ,IAAI,UAAU,EAAE;CAC5C,OAAO,WAAW,QAAQ,UAAU,SAAS,MAAM,IAAI,OAAO,aAAa,SAAS,IAAI;AAC1F;;;;;;;;;;;AAYA,MAAa,UAAU,MAAM,aAAa,WAAW;CACnD,UAAU,CAAC,eAAe,aAAa;CACvC,MAAM;;EAEJ,WAAW,OAAO;;EAElB,gBAAgB,OAAO;CACzB;CACA,UAAU,EAAE,SAAS,WAAW,qBAC9B,OAAO,UAAqB,UAC1B,OAAO,eACL,OAAO,WAAW;EAChB,IAAI,UAAyB;EAC7B,MAAM,SAAS,OAAsB;GACnC,IAAI,OAAO,SAAS;GACpB,UAAU;GACV,MAAM,YAAY,OAAO,cAAc,KAAK,EAAE,GAAG,CAAC,CAAC;EACrD;EACA,MAAM,YAAsE;GAC1E,CAAC,gBAAe,UAAS,MAAM,SAAS,SAAS,MAAM,QAAQ,SAAS,CAAC,CAAC;GAC1E,CAAC,sBAAsB,MAAM,IAAI,CAAC;GAClC,CACE,UACA,UAAS;IACP,MAAM,KAAK,SAAS,SAAS,MAAM,QAAQ,SAAS;IACpD,IAAI,OAAO,MAAM;IACjB,IAAI,gBAAgB,MAAM,eAAe;IACzC,MAAM,WAAW;IACjB,MAAM,YACJ,OACA,cAAc,KAAK;KACjB;KACA,UAAU,SAAS,aAAa;KAChC,QAAQ,SAAS,WAAW;KAC5B,SAAS,SAAS,YAAY;KAC9B,SAAS,SAAS,YAAY;IAChC,CAAC,CACH;GACF,CACF;EACF;EACA,KAAK,MAAM,CAAC,MAAM,aAAa,WAAW,QAAQ,iBAAiB,MAAM,QAAQ;EACjF,OAAO;CACT,CAAC,IACD,cACE,OAAO,WAAW;EAChB,KAAK,MAAM,CAAC,MAAM,aAAa,WAAW,QAAQ,oBAAoB,MAAM,QAAQ;CACtF,CAAC,CACL,CACF;AACJ,CAAC"}

package/dist/dom/track-box.d.ts

@@ -0,0 +1,61 @@
+import { Schema } from "effect";
+import * as Mount from "foldkit/mount";
+/** The attribute on the mounted element naming the element `TrackBox` follows, by id. */
+export declare const TRACK_TARGET_ATTRIBUTE = "data-target";
+/** The custom properties `TrackBox` writes for `name`, as `measured` names `Measure`'s. */
+export declare const trackedBox: (name: string) => {
+  readonly x: `--fk-${string}-x`;
+  readonly y: `--fk-${string}-y`;
+  readonly w: `--fk-${string}-w`;
+  readonly h: `--fk-${string}-h`;
+  readonly radius: `--fk-${string}-radius`;
+};
+/** Sent as the followed element changes: its id, and whether it is on the page. */
+export declare const TrackedTarget: Schema.TaggedStruct<"TrackedTarget", {
+  readonly target: Schema.String;
+  readonly found: Schema.Boolean;
+}>;
+export type TrackedTarget = typeof TrackedTarget.Type;
+/**
+ * The radius a box of `width` by `height` draws for a computed
+ * `border-top-left-radius` of `value` (`8px`, `50%`, `8px 4px`): its
+ * horizontal length in pixels, a share of the width for a percentage, and
+ * never more than half the shorter side, where the browser stops it.
+ */
+export declare const cornerRadius: (value: string, width: number, height: number) => number;
+/**
+ * Follows another element's box, as a Mount: the element whose id is the
+ * mounted element's `data-target` (`TRACK_TARGET_ATTRIBUTE`). Its box in
+ * viewport pixels is written on the mounted element as `--fk-<name>-x`,
+ * `-y`, `-w` and `-h`, and with `radius`, its top left corner's radius as
+ * `--fk-<name>-radius` (`cornerRadius`), so a fixed overlay drawn from them
+ * (a tour's cutout, a coach mark's ring) sits over it. While nothing is
+ * followed they are removed, so a stylist's fallbacks apply.
+ *
+ * The box is read again on a scroll anywhere (heard on the way down, since
+ * `scroll` does not bubble), a window resize, the followed element's own
+ * resize, and any change to the document's elements, which is also how a
+ * target drawn anew under the same id is found. `data-target` is read again
+ * whenever it changes, so one element can glide from target to target
+ * without being drawn again, which a Mount's args, read once, could not do.
+ * What moves the target by any other way (a stylesheet added) is seen at the
+ * next of these.
+ *
+ * Whether a target is on the page is the parent's to act on (a tour shows
+ * the step in the middle instead), so each change of the target or of
+ * whether it is found sends `TrackedTarget`, starting with the first one.
+ * Since it sends a Message, a component may draw it by default: a Scene test
+ * resolves it with what the parent maps it to. An empty `data-target` follows
+ * nothing and sends nothing.
+ */
+export declare const TrackBox: Mount.MountDefinitionWithArgs<"TrackBox", {
+  /** The custom properties' prefix: `tour` writes `--fk-tour-x`. */
+  name: Schema.String;
+  /** Whether to write the target's corner radius too; it reads the target's computed style. */
+  radius: Schema.optional<Schema.Boolean>;
+}, {
+  readonly _tag: "TrackedTarget";
+  readonly target: string;
+  readonly found: boolean;
+}>;
+//# sourceMappingURL=track-box.d.ts.map

package/dist/dom/track-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-box.d.ts","names":[],"sources":["../../src/dom/track-box.ts"],"mappings":";;;qBAIa;;qBAGA,aAAU;WAEnB;WACA;WACA;WACA;WACA;;;qBAIS,eAAa,OAAA;;;;YAId,uBAAuB,cAAc;;;;;;;qBAQpC,eAAY,eAAiB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiC5C,UAAQ,MAAA"}