@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/toc/index.cjs

@@ -0,0 +1,358 @@
+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_event = require("../../event-DDz-mMhM.cjs");
+const require_scroll = require("../../scroll-Dyd1QLrc.cjs");
+const require_array = require("../../array-BGtygd0o.cjs");
+const require_equal = require("../../equal-C927y7MN.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/toc/anatomy.ts
+const anatomy = require_create_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 = require_array.first(activeIds);
+	const lastActiveId = require_array.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 require_scroll.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": require_utils.toPx(rect?.y),
+					"--left": require_utils.toPx(rect?.x),
+					"--width": require_utils.toPx(rect?.width),
+					"--height": require_utils.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": require_dom_query.dataAttr(itemState.active),
+				"data-first": require_dom_query.dataAttr(itemState.first),
+				"data-last": require_dom_query.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": require_dom_query.dataAttr(itemState.active),
+				"aria-current": itemState.active ? "location" : void 0,
+				onClick(event) {
+					if (!prop("scrollEl")?.()) return;
+					if (event.defaultPrevented) return;
+					if (require_event.isDownloadingEvent(event)) return;
+					if (require_event.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 = require_dom_query.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 } = require_core.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, require_array.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, require_array.first(ids));
+					const lastEl = getItemEl(scope, require_array.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) => require_equal.isEqual(prev, nextRect) ? prev : nextRect);
+				};
+				exec();
+				const cleanups = [];
+				for (const id of activeIds) {
+					const el = getItemEl(scope, id);
+					if (el) cleanups.push(require_dom_query.resizeObserverBorderBox.observe(el, exec));
+				}
+				refs.set("indicatorCleanup", () => require_utils.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 (!require_equal.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 = require_create_props.createProps()([
+	"activeIds",
+	"autoScroll",
+	"defaultActiveIds",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"items",
+	"onActiveChange",
+	"rootMargin",
+	"scrollBehavior",
+	"scrollEl",
+	"threshold"
+]);
+const splitProps = require_utils.createSplitProps(props);
+const itemProps = require_create_props.createProps()(["item"]);
+const splitItemProps = require_utils.createSplitProps(itemProps);
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.itemProps = itemProps;
+exports.machine = machine;
+exports.props = props;
+exports.splitItemProps = splitItemProps;
+exports.splitProps = splitProps;

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

@@ -0,0 +1,98 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.cjs";
+import { M as Service, S as EventObject, T as Machine } from "../../index-BKgxIVbE.cjs";
+import { b as PropTypes, g as RequiredBy, m as Rect, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import "../../index-BF6G2RiC.cjs";
+//#region src/machines/toc/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "list" | "item" | "link" | "indicator" | "title">;
+//#endregion
+//#region src/machines/toc/types.d.ts
+interface TocItem {
+  value: string;
+  depth: number;
+}
+interface ActiveChangeDetails {
+  activeIds: string[];
+  activeItems: TocItem[];
+}
+interface ScrollToDetails {
+  behavior?: ScrollBehavior | undefined;
+}
+type ElementIds = Partial<{
+  root: string;
+  title: string;
+  list: string;
+  item: (value: string) => string;
+  link: (value: string) => string;
+  indicator: string;
+}>;
+interface TocProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  items: TocItem[];
+  rootMargin?: string | undefined;
+  threshold?: number | number[] | undefined;
+  scrollEl?: (() => HTMLElement | null) | undefined;
+  autoScroll?: boolean | undefined;
+  scrollBehavior?: ScrollBehavior | undefined;
+  onActiveChange?: ((details: ActiveChangeDetails) => void) | undefined;
+  activeIds?: string[] | undefined;
+  defaultActiveIds?: string[] | undefined;
+}
+type PropsWithDefault = "rootMargin" | "threshold" | "autoScroll" | "scrollBehavior" | "items";
+interface TocSchema {
+  state: "idle";
+  props: RequiredBy<TocProps, PropsWithDefault>;
+  context: {
+    activeIds: string[];
+    indicatorRect: Rect | null;
+  };
+  refs: {
+    visibilityMap: Map<string, boolean>;
+    indicatorCleanup: VoidFunction | null;
+  };
+  computed: {
+    activeItems: TocItem[];
+  };
+  action: string;
+  guard: string;
+  effect: string;
+  event: EventObject;
+}
+type TocService = Service<TocSchema>;
+type TocMachine = Machine<TocSchema>;
+interface ItemProps {
+  item: TocItem;
+}
+interface ItemState {
+  active: boolean;
+  first: boolean;
+  last: boolean;
+  depth: number;
+}
+interface TocApi<T extends PropTypes = PropTypes> {
+  activeIds: string[];
+  activeItems: TocItem[];
+  items: TocItem[];
+  setActiveIds(value: string[]): void;
+  scrollTo(value: string, details?: ScrollToDetails): void;
+  getItemState(props: ItemProps): ItemState;
+  getRootProps(): T["element"];
+  getTitleProps(): T["element"];
+  getListProps(): T["element"];
+  getItemProps(props: ItemProps): T["element"];
+  getLinkProps(props: ItemProps): T["element"];
+  getIndicatorProps(): T["element"];
+}
+//#endregion
+//#region src/machines/toc/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<TocSchema>, normalize: NormalizeProps<T>): TocApi<T>;
+//#endregion
+//#region src/machines/toc/machine.d.ts
+declare const machine: Machine<TocSchema>;
+//#endregion
+//#region src/machines/toc/props.d.ts
+declare const props: (keyof TocProps)[];
+declare const splitProps: <Props extends Partial<TocProps>>(props: Props) => [Partial<TocProps>, Omit<Props, keyof TocProps>];
+declare const itemProps: "item"[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, "item">];
+//#endregion
+export { type ActiveChangeDetails, type TocApi as Api, type ElementIds, type ItemProps, type ItemState, type TocMachine as Machine, type TocProps as Props, type ScrollToDetails, type TocService as Service, type TocItem, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

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

@@ -0,0 +1,98 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, S as EventObject, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, g as RequiredBy, m as Rect, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/toc/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "list" | "item" | "link" | "indicator" | "title">;
+//#endregion
+//#region src/machines/toc/types.d.ts
+interface TocItem {
+  value: string;
+  depth: number;
+}
+interface ActiveChangeDetails {
+  activeIds: string[];
+  activeItems: TocItem[];
+}
+interface ScrollToDetails {
+  behavior?: ScrollBehavior | undefined;
+}
+type ElementIds = Partial<{
+  root: string;
+  title: string;
+  list: string;
+  item: (value: string) => string;
+  link: (value: string) => string;
+  indicator: string;
+}>;
+interface TocProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  items: TocItem[];
+  rootMargin?: string | undefined;
+  threshold?: number | number[] | undefined;
+  scrollEl?: (() => HTMLElement | null) | undefined;
+  autoScroll?: boolean | undefined;
+  scrollBehavior?: ScrollBehavior | undefined;
+  onActiveChange?: ((details: ActiveChangeDetails) => void) | undefined;
+  activeIds?: string[] | undefined;
+  defaultActiveIds?: string[] | undefined;
+}
+type PropsWithDefault = "rootMargin" | "threshold" | "autoScroll" | "scrollBehavior" | "items";
+interface TocSchema {
+  state: "idle";
+  props: RequiredBy<TocProps, PropsWithDefault>;
+  context: {
+    activeIds: string[];
+    indicatorRect: Rect | null;
+  };
+  refs: {
+    visibilityMap: Map<string, boolean>;
+    indicatorCleanup: VoidFunction | null;
+  };
+  computed: {
+    activeItems: TocItem[];
+  };
+  action: string;
+  guard: string;
+  effect: string;
+  event: EventObject;
+}
+type TocService = Service<TocSchema>;
+type TocMachine = Machine<TocSchema>;
+interface ItemProps {
+  item: TocItem;
+}
+interface ItemState {
+  active: boolean;
+  first: boolean;
+  last: boolean;
+  depth: number;
+}
+interface TocApi<T extends PropTypes = PropTypes> {
+  activeIds: string[];
+  activeItems: TocItem[];
+  items: TocItem[];
+  setActiveIds(value: string[]): void;
+  scrollTo(value: string, details?: ScrollToDetails): void;
+  getItemState(props: ItemProps): ItemState;
+  getRootProps(): T["element"];
+  getTitleProps(): T["element"];
+  getListProps(): T["element"];
+  getItemProps(props: ItemProps): T["element"];
+  getLinkProps(props: ItemProps): T["element"];
+  getIndicatorProps(): T["element"];
+}
+//#endregion
+//#region src/machines/toc/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<TocSchema>, normalize: NormalizeProps<T>): TocApi<T>;
+//#endregion
+//#region src/machines/toc/machine.d.ts
+declare const machine: Machine<TocSchema>;
+//#endregion
+//#region src/machines/toc/props.d.ts
+declare const props: (keyof TocProps)[];
+declare const splitProps: <Props extends Partial<TocProps>>(props: Props) => [Partial<TocProps>, Omit<Props, keyof TocProps>];
+declare const itemProps: "item"[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, "item">];
+//#endregion
+export { type ActiveChangeDetails, type TocApi as Api, type ElementIds, type ItemProps, type ItemState, type TocMachine as Machine, type TocProps as Props, type ScrollToDetails, type TocService as Service, type TocItem, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };