@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/toc/index.js

@@ -0,0 +1,351 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { S as getWindow, r as resizeObserverBorderBox, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { f as isDownloadingEvent, g as isOpeningInNewTab } from "../../event-bTItRgiw.js";
+import { r as scrollToElement } from "../../scroll-CVJ40w2e.js";
+import { f as last, o as first } from "../../array-C4KbHsha.js";
+import { t as isEqual } from "../../equal-DtrP8DPh.js";
+import { F as toPx, L as callAll, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { i as setup } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/toc/anatomy.ts
+const anatomy = createAnatomy("toc").parts("root", "title", "list", "item", "link", "indicator");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/toc/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `toc:${ctx.id}`;
+const getTitleId = (ctx) => ctx.ids?.title ?? `toc:${ctx.id}:title`;
+const getListId = (ctx) => ctx.ids?.list ?? `toc:${ctx.id}:list`;
+const getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `toc:${ctx.id}:item-${value}`;
+const getLinkId = (ctx, value) => ctx.ids?.link?.(value) ?? `toc:${ctx.id}:link-${value}`;
+const getIndicatorId = (ctx) => ctx.ids?.indicator ?? `toc:${ctx.id}:indicator`;
+const getListEl = (ctx) => ctx.getById(getListId(ctx));
+const getItemEl = (ctx, value) => {
+	if (value == null) return null;
+	return ctx.getById(getItemId(ctx, value));
+};
+const getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+/**
+* Get the heading element in the document by its slug/id.
+* This queries the actual document, not the TOC container.
+*/
+const getHeadingEl = (ctx, value) => {
+	return ctx.getDoc().getElementById(value);
+};
+//#endregion
+//#region src/machines/toc/connect.ts
+function connect(service, normalize) {
+	const { send, context, scope, computed, prop } = service;
+	const items = prop("items");
+	const activeItems = computed("activeItems");
+	const activeIds = context.get("activeIds");
+	const firstActiveId = first(activeIds);
+	const lastActiveId = last(activeIds);
+	function scrollTo(value, details) {
+		const headingEl = getHeadingEl(scope, value);
+		if (!headingEl) return false;
+		const behavior = details?.behavior ?? prop("scrollBehavior");
+		const scrollEl = prop("scrollEl")?.();
+		if (!scrollEl) {
+			headingEl.scrollIntoView({
+				behavior,
+				block: "start"
+			});
+			return true;
+		}
+		return scrollToElement(headingEl, {
+			rootEl: scrollEl,
+			behavior
+		});
+	}
+	function getItemState(props) {
+		const { item } = props;
+		return {
+			active: activeIds.includes(item.value),
+			first: item.value === firstActiveId,
+			last: item.value === lastActiveId,
+			depth: item.depth
+		};
+	}
+	return {
+		activeIds,
+		activeItems,
+		items,
+		setActiveIds(value) {
+			send({
+				type: "ACTIVE_IDS.SET",
+				value
+			});
+		},
+		scrollTo(value, details) {
+			scrollTo(value, details);
+		},
+		getItemState,
+		getRootProps() {
+			const rect = context.get("indicatorRect");
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				dir: prop("dir"),
+				"aria-labelledby": getTitleId(scope),
+				style: {
+					"--top": toPx(rect?.y),
+					"--left": toPx(rect?.x),
+					"--width": toPx(rect?.width),
+					"--height": toPx(rect?.height)
+				}
+			});
+		},
+		getTitleProps() {
+			return normalize.element({
+				...parts.title.attrs,
+				id: getTitleId(scope),
+				dir: prop("dir")
+			});
+		},
+		getListProps() {
+			return normalize.element({
+				...parts.list.attrs,
+				id: getListId(scope),
+				dir: prop("dir")
+			});
+		},
+		getItemProps(props) {
+			const { item } = props;
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.item.attrs,
+				id: getItemId(scope, item.value),
+				dir: prop("dir"),
+				"data-value": item.value,
+				"data-depth": String(itemState.depth),
+				"data-active": dataAttr(itemState.active),
+				"data-first": dataAttr(itemState.first),
+				"data-last": dataAttr(itemState.last),
+				style: { "--depth": itemState.depth }
+			});
+		},
+		getLinkProps(props) {
+			const { item } = props;
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.link.attrs,
+				id: getLinkId(scope, item.value),
+				dir: prop("dir"),
+				"data-value": item.value,
+				"data-active": dataAttr(itemState.active),
+				"aria-current": itemState.active ? "location" : void 0,
+				onClick(event) {
+					if (!prop("scrollEl")?.()) return;
+					if (event.defaultPrevented) return;
+					if (isDownloadingEvent(event)) return;
+					if (isOpeningInNewTab(event)) return;
+					const value = getSamePageHash(event.currentTarget);
+					if (!value) return;
+					if (!scrollTo(value)) return;
+					event.preventDefault();
+					pushHash(scope.getWin(), value);
+				}
+			});
+		},
+		getIndicatorProps() {
+			const rect = context.get("indicatorRect");
+			return normalize.element({
+				...parts.indicator.attrs,
+				id: getIndicatorId(scope),
+				hidden: isRectEmpty(rect),
+				style: { position: "absolute" }
+			});
+		}
+	};
+}
+const isRectEmpty = (rect) => rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+const getSamePageHash = (el) => {
+	const href = el.getAttribute("href");
+	if (!href) return null;
+	const win = getWindow(el);
+	const url = new win.URL(href, win.location.href);
+	if (url.origin !== win.location.origin) return null;
+	if (url.pathname !== win.location.pathname) return null;
+	if (url.search !== win.location.search) return null;
+	try {
+		return decodeURIComponent(url.hash.slice(1)) || null;
+	} catch {
+		return null;
+	}
+};
+const pushHash = (win, value) => {
+	const oldURL = win.location.href;
+	win.history.pushState(null, "", `#${value}`);
+	win.dispatchEvent(new win.HashChangeEvent("hashchange", {
+		oldURL,
+		newURL: win.location.href
+	}));
+};
+//#endregion
+//#region src/machines/toc/machine.ts
+const { createMachine } = setup();
+const machine = createMachine({
+	props({ props }) {
+		return {
+			dir: "ltr",
+			rootMargin: "-20px 0% -40% 0%",
+			threshold: 0,
+			autoScroll: true,
+			scrollBehavior: "smooth",
+			items: [],
+			...props
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			activeIds: bindable(() => ({
+				defaultValue: prop("defaultActiveIds") ?? [],
+				value: prop("activeIds")
+			})),
+			indicatorRect: bindable(() => ({ defaultValue: null }))
+		};
+	},
+	refs() {
+		return {
+			visibilityMap: /* @__PURE__ */ new Map(),
+			indicatorCleanup: null
+		};
+	},
+	computed: { activeItems({ context, prop }) {
+		const ids = context.get("activeIds");
+		return prop("items").filter((item) => ids.includes(item.value));
+	} },
+	watch({ context, track, action }) {
+		track([() => context.get("activeIds").join()], () => {
+			action(["autoScrollToc", "syncIndicatorRect"]);
+		});
+	},
+	entry: ["syncIndicatorRect"],
+	exit: ["cleanupIndicatorObserver"],
+	on: { "ACTIVE_IDS.SET": { actions: ["setActiveIds"] } },
+	states: { idle: { effects: ["trackHeadingVisibility"] } },
+	implementations: {
+		actions: {
+			setActiveIds(params) {
+				const { context, event } = params;
+				context.set("activeIds", event.value);
+				invokeOnActiveChange(params);
+			},
+			autoScrollToc({ context, scope, prop }) {
+				if (!prop("autoScroll")) return;
+				getItemEl(scope, first(context.get("activeIds")))?.scrollIntoView({
+					behavior: prop("scrollBehavior"),
+					block: "nearest"
+				});
+			},
+			cleanupIndicatorObserver({ refs }) {
+				refs.get("indicatorCleanup")?.();
+			},
+			syncIndicatorRect({ context, refs, scope }) {
+				refs.get("indicatorCleanup")?.();
+				if (!getIndicatorEl(scope)) return;
+				const activeIds = context.get("activeIds");
+				if (activeIds.length === 0) {
+					context.set("indicatorRect", null);
+					return;
+				}
+				const exec = () => {
+					const ids = context.get("activeIds");
+					if (ids.length === 0) {
+						context.set("indicatorRect", null);
+						return;
+					}
+					const firstEl = getItemEl(scope, first(ids));
+					const lastEl = getItemEl(scope, last(ids));
+					if (!firstEl) return;
+					const listEl = getListEl(scope);
+					const listRect = listEl?.getBoundingClientRect();
+					const firstRect = firstEl.getBoundingClientRect();
+					const offsetY = listRect ? firstRect.top - listRect.top + listEl.scrollTop : firstRect.top;
+					const offsetX = listRect ? firstRect.left - listRect.left + listEl.scrollLeft : firstRect.left;
+					let height;
+					if (lastEl && lastEl !== firstEl) {
+						const lastRect = lastEl.getBoundingClientRect();
+						height = lastRect.top + lastRect.height - firstRect.top;
+					} else height = firstRect.height;
+					const nextRect = {
+						x: offsetX,
+						y: offsetY,
+						width: firstRect.width,
+						height
+					};
+					context.set("indicatorRect", (prev) => isEqual(prev, nextRect) ? prev : nextRect);
+				};
+				exec();
+				const cleanups = [];
+				for (const id of activeIds) {
+					const el = getItemEl(scope, id);
+					if (el) cleanups.push(resizeObserverBorderBox.observe(el, exec));
+				}
+				refs.set("indicatorCleanup", () => callAll(...cleanups));
+			}
+		},
+		effects: { trackHeadingVisibility(params) {
+			const { scope, prop, context, refs } = params;
+			const items = prop("items");
+			if (items.length === 0) return;
+			const visibilityMap = refs.get("visibilityMap");
+			const observerOptions = {
+				rootMargin: prop("rootMargin"),
+				threshold: prop("threshold")
+			};
+			const scrollEl = prop("scrollEl")?.();
+			if (scrollEl) observerOptions.root = scrollEl;
+			const observer = new (scope.getWin()).IntersectionObserver((entries) => {
+				for (const entry of entries) visibilityMap.set(entry.target.id, entry.isIntersecting);
+				const nextActiveIds = [];
+				for (const item of items) if (visibilityMap.get(item.value)) nextActiveIds.push(item.value);
+				if (nextActiveIds.length === 0) return;
+				if (!isEqual(context.get("activeIds"), nextActiveIds)) {
+					context.set("activeIds", nextActiveIds);
+					invokeOnActiveChange(params);
+				}
+			}, observerOptions);
+			for (const item of items) {
+				const headingEl = getHeadingEl(scope, item.value);
+				if (headingEl) observer.observe(headingEl);
+			}
+			return () => {
+				observer.disconnect();
+				visibilityMap.clear();
+			};
+		} }
+	}
+});
+function invokeOnActiveChange(params) {
+	const { context, computed, prop } = params;
+	prop("onActiveChange")?.({
+		activeIds: context.get("activeIds"),
+		activeItems: computed("activeItems")
+	});
+}
+//#endregion
+//#region src/machines/toc/props.ts
+const props = createProps()([
+	"activeIds",
+	"autoScroll",
+	"defaultActiveIds",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"items",
+	"onActiveChange",
+	"rootMargin",
+	"scrollBehavior",
+	"scrollEl",
+	"threshold"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["item"]);
+const splitItemProps = createSplitProps(itemProps);
+//#endregion
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/dist/machines/toggle/index.cjs

@@ -0,0 +1,99 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_create_anatomy = require("../../create-anatomy-BwDn25ph.cjs");
+const require_dom_query = require("../../dom-query-CQzY93XU.cjs");
+const require_utils = require("../../utils-BH-oBBz2.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/toggle/anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("toggle", ["root", "indicator"]);
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/toggle/connect.ts
+function connect(service, normalize) {
+	const { context, prop, send } = service;
+	const pressed = context.get("pressed");
+	return {
+		pressed,
+		disabled: !!prop("disabled"),
+		setPressed(value) {
+			send({
+				type: "PRESS.SET",
+				value
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				type: "button",
+				...parts.root.attrs,
+				disabled: prop("disabled"),
+				"aria-pressed": pressed,
+				"data-state": pressed ? "on" : "off",
+				"data-pressed": require_dom_query.dataAttr(pressed),
+				"data-disabled": require_dom_query.dataAttr(prop("disabled")),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (prop("disabled")) return;
+					send({ type: "PRESS.TOGGLE" });
+				}
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				...parts.indicator.attrs,
+				"data-disabled": require_dom_query.dataAttr(prop("disabled")),
+				"data-pressed": require_dom_query.dataAttr(pressed),
+				"data-state": pressed ? "on" : "off"
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/toggle/machine.ts
+const machine = require_core.createMachine({
+	props({ props }) {
+		return {
+			defaultPressed: false,
+			...props
+		};
+	},
+	context({ prop, bindable }) {
+		return { pressed: bindable(() => ({
+			value: prop("pressed"),
+			defaultValue: prop("defaultPressed"),
+			onChange(value) {
+				prop("onPressedChange")?.(value);
+			}
+		})) };
+	},
+	initialState() {
+		return "idle";
+	},
+	on: {
+		"PRESS.TOGGLE": { actions: ["togglePressed"] },
+		"PRESS.SET": { actions: ["setPressed"] }
+	},
+	states: { idle: {} },
+	implementations: { actions: {
+		togglePressed({ context }) {
+			context.set("pressed", !context.get("pressed"));
+		},
+		setPressed({ context, event }) {
+			context.set("pressed", event.value);
+		}
+	} }
+});
+//#endregion
+//#region src/machines/toggle/props.ts
+const props = require_create_props.createProps()([
+	"defaultPressed",
+	"pressed",
+	"onPressedChange",
+	"disabled"
+]);
+const splitProps = require_utils.createSplitProps(props);
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;

package/dist/machines/toggle/index.d.cts

@@ -0,0 +1,46 @@
+import { t as Anatomy } from "../../anatomy-DMuSMbOP.cjs";
+import { M as Service, S as EventObject, T as Machine } from "../../index-BKgxIVbE.cjs";
+import { b as PropTypes, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import "../../index-BF6G2RiC.cjs";
+//#region src/machines/toggle/anatomy.d.ts
+declare const anatomy: Anatomy<"root" | "indicator">;
+//#endregion
+//#region src/machines/toggle/types.d.ts
+interface ToggleProps {
+  disabled?: boolean | undefined;
+  defaultPressed?: boolean | undefined;
+  pressed?: boolean | undefined;
+  onPressedChange?: ((pressed: boolean) => void) | undefined;
+}
+interface ToggleSchema {
+  state: "idle";
+  props: ToggleProps;
+  context: {
+    pressed: boolean;
+  };
+  event: EventObject;
+  action: string;
+  guard: string;
+  effect: string;
+}
+type ToggleService = Service<ToggleSchema>;
+type ToggleMachine = Machine<ToggleSchema>;
+interface ToggleApi<T extends PropTypes = PropTypes> {
+  pressed: boolean;
+  disabled: boolean;
+  setPressed: (pressed: boolean) => void;
+  getRootProps: () => T["element"];
+  getIndicatorProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/toggle/connect.d.ts
+declare function connect<T extends PropTypes>(service: ToggleService, normalize: NormalizeProps<T>): ToggleApi<T>;
+//#endregion
+//#region src/machines/toggle/machine.d.ts
+declare const machine: Machine<ToggleSchema>;
+//#endregion
+//#region src/machines/toggle/props.d.ts
+declare const props: (keyof ToggleProps)[];
+declare const splitProps: <Props extends Partial<ToggleProps>>(props: Props) => [Partial<ToggleProps>, Omit<Props, keyof ToggleProps>];
+//#endregion
+export { type ToggleApi as Api, type ToggleMachine as Machine, type ToggleProps as Props, type ToggleService as Service, anatomy, connect, machine, props, splitProps };

package/dist/machines/toggle/index.d.ts

@@ -0,0 +1,46 @@
+import { t as Anatomy } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, S as EventObject, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/toggle/anatomy.d.ts
+declare const anatomy: Anatomy<"root" | "indicator">;
+//#endregion
+//#region src/machines/toggle/types.d.ts
+interface ToggleProps {
+  disabled?: boolean | undefined;
+  defaultPressed?: boolean | undefined;
+  pressed?: boolean | undefined;
+  onPressedChange?: ((pressed: boolean) => void) | undefined;
+}
+interface ToggleSchema {
+  state: "idle";
+  props: ToggleProps;
+  context: {
+    pressed: boolean;
+  };
+  event: EventObject;
+  action: string;
+  guard: string;
+  effect: string;
+}
+type ToggleService = Service<ToggleSchema>;
+type ToggleMachine = Machine<ToggleSchema>;
+interface ToggleApi<T extends PropTypes = PropTypes> {
+  pressed: boolean;
+  disabled: boolean;
+  setPressed: (pressed: boolean) => void;
+  getRootProps: () => T["element"];
+  getIndicatorProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/toggle/connect.d.ts
+declare function connect<T extends PropTypes>(service: ToggleService, normalize: NormalizeProps<T>): ToggleApi<T>;
+//#endregion
+//#region src/machines/toggle/machine.d.ts
+declare const machine: Machine<ToggleSchema>;
+//#endregion
+//#region src/machines/toggle/props.d.ts
+declare const props: (keyof ToggleProps)[];
+declare const splitProps: <Props extends Partial<ToggleProps>>(props: Props) => [Partial<ToggleProps>, Omit<Props, keyof ToggleProps>];
+//#endregion
+export { type ToggleApi as Api, type ToggleMachine as Machine, type ToggleProps as Props, type ToggleService as Service, anatomy, connect, machine, props, splitProps };

package/dist/machines/toggle/index.js

@@ -0,0 +1,94 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/toggle/anatomy.ts
+const anatomy = createAnatomy("toggle", ["root", "indicator"]);
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/toggle/connect.ts
+function connect(service, normalize) {
+	const { context, prop, send } = service;
+	const pressed = context.get("pressed");
+	return {
+		pressed,
+		disabled: !!prop("disabled"),
+		setPressed(value) {
+			send({
+				type: "PRESS.SET",
+				value
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				type: "button",
+				...parts.root.attrs,
+				disabled: prop("disabled"),
+				"aria-pressed": pressed,
+				"data-state": pressed ? "on" : "off",
+				"data-pressed": dataAttr(pressed),
+				"data-disabled": dataAttr(prop("disabled")),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (prop("disabled")) return;
+					send({ type: "PRESS.TOGGLE" });
+				}
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				...parts.indicator.attrs,
+				"data-disabled": dataAttr(prop("disabled")),
+				"data-pressed": dataAttr(pressed),
+				"data-state": pressed ? "on" : "off"
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/toggle/machine.ts
+const machine = createMachine({
+	props({ props }) {
+		return {
+			defaultPressed: false,
+			...props
+		};
+	},
+	context({ prop, bindable }) {
+		return { pressed: bindable(() => ({
+			value: prop("pressed"),
+			defaultValue: prop("defaultPressed"),
+			onChange(value) {
+				prop("onPressedChange")?.(value);
+			}
+		})) };
+	},
+	initialState() {
+		return "idle";
+	},
+	on: {
+		"PRESS.TOGGLE": { actions: ["togglePressed"] },
+		"PRESS.SET": { actions: ["setPressed"] }
+	},
+	states: { idle: {} },
+	implementations: { actions: {
+		togglePressed({ context }) {
+			context.set("pressed", !context.get("pressed"));
+		},
+		setPressed({ context, event }) {
+			context.set("pressed", event.value);
+		}
+	} }
+});
+//#endregion
+//#region src/machines/toggle/props.ts
+const props = createProps()([
+	"defaultPressed",
+	"pressed",
+	"onPressedChange",
+	"disabled"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };