@willa-ui/shared 0.0.1-alpha.8d8fe96 → 0.0.3-alpha.2739b3e

package/dist/index.mjs

@@ -1,9 +1,16 @@
 /*!
- * @willa-ui/shared.js v0.0.1-alpha.8d8fe96
+ * @willa-ui/shared.js v0.0.3-alpha.2739b3e
  * (c) 2026 chentao.arthur
  */
-import { isValidElement } from "react";
+import { isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import hljs from "highlight.js";
 import { isArray, isNil, isString } from "aidly";
+//#region src/css.ts
+function formatCssSize(value) {
+	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
+	if (typeof value === "string") return value.trim() || void 0;
+}
+//#endregion
 //#region src/clipboard.ts
 async function copyToClipboard(text) {
 	if (!text) return false;
@@ -29,6 +36,390 @@ async function copyToClipboard(text) {
 	}
 }
 //#endregion
+//#region src/controllableState.ts
+function useControllableState(options) {
+	const { value, defaultValue, onChange } = options;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const controlled = value !== void 0;
+	const currentValue = controlled ? value : uncontrolledValue;
+	return [
+		currentValue,
+		useCallback((nextValue) => {
+			const resolvedValue = resolveStateAction(nextValue, currentValue);
+			if (!controlled) setUncontrolledValue(resolvedValue);
+			onChange?.(resolvedValue);
+		}, [
+			controlled,
+			currentValue,
+			onChange
+		]),
+		controlled
+	];
+}
+const resolveStateAction = (value, previousValue) => {
+	if (typeof value === "function") return value(previousValue);
+	return value;
+};
+//#endregion
+//#region src/viewport.ts
+const MOBILE_BREAKPOINT = 640;
+function isMobileViewport(viewportWidth) {
+	return viewportWidth <= 640;
+}
+function isMobile() {
+	if (typeof window === "undefined") return false;
+	return isMobileViewport(window.innerWidth);
+}
+//#endregion
+//#region src/copy.ts
+function useCopyToClipboard(options = {}) {
+	const { resetDuration = 1200, onCopy } = options;
+	const [status, setStatus] = useState("idle");
+	const timerRef = useRef(null);
+	const clearTimer = useCallback(() => {
+		if (timerRef.current === null) return;
+		window.clearTimeout(timerRef.current);
+		timerRef.current = null;
+	}, []);
+	const startFeedback = useCallback((nextStatus, duration = resetDuration) => {
+		clearTimer();
+		setStatus(nextStatus);
+		if (nextStatus === "idle" || duration <= 0) return;
+		timerRef.current = window.setTimeout(() => {
+			setStatus("idle");
+			timerRef.current = null;
+		}, duration);
+	}, [clearTimer, resetDuration]);
+	const reset = useCallback(() => {
+		startFeedback("idle", 0);
+	}, [startFeedback]);
+	const copy = useCallback(async (text, actionOptions = {}) => {
+		startFeedback("idle", 0);
+		const ok = await copyToClipboard(text);
+		startFeedback(ok ? "copied" : "failed", actionOptions.resetDuration);
+		if (ok) {
+			onCopy?.(text);
+			actionOptions.onCopy?.(text);
+		}
+		return ok;
+	}, [onCopy, startFeedback]);
+	useEffect(() => {
+		return () => {
+			clearTimer();
+		};
+	}, [clearTimer]);
+	return {
+		status,
+		copied: status === "copied",
+		failed: status === "failed",
+		copy,
+		reset
+	};
+}
+//#endregion
+//#region src/codeHighlight.ts
+const parseCodeMeta = (className) => {
+	const [rawLanguage = "text", rawMeta = ""] = (/language-([^\s]+)/.exec(className ?? "")?.[1] ?? "text").split("--meta-");
+	const highlightLines = /* @__PURE__ */ new Set();
+	const normalizedMeta = rawMeta.replace(/_/g, " ");
+	const showLineNumbers = /(?:^|[^A-Za-z0-9-])ln(?:$|[^A-Za-z0-9-])/.test(normalizedMeta);
+	for (const match of rawMeta.matchAll(/\{([^}]+)\}/g)) addCodeHighlightRange(highlightLines, match[1]);
+	return {
+		rawLanguage,
+		highlightLines,
+		showLineNumbers
+	};
+};
+const normalizeHljsLanguage = (language) => {
+	const key = language.toLowerCase();
+	return {
+		c: "c",
+		cc: "cpp",
+		"c++": "cpp",
+		cpp: "cpp",
+		cxx: "cpp",
+		css: "css",
+		go: "go",
+		golang: "go",
+		html: "xml",
+		js: "javascript",
+		jsx: "javascript",
+		rs: "rust",
+		rust: "rust",
+		ts: "typescript",
+		tsx: "typescript",
+		sh: "bash",
+		bash: "bash",
+		shell: "bash",
+		yml: "yaml",
+		md: "markdown"
+	}[key] ?? key;
+};
+const highlightCodeToHtml = (code, rawLanguage) => {
+	const language = normalizeHljsLanguage(rawLanguage);
+	if (hljs.getLanguage(language)) return {
+		html: hljs.highlight(code, { language }).value,
+		display: rawLanguage
+	};
+	const result = hljs.highlightAuto(code);
+	return {
+		html: result.value,
+		display: result.language ?? rawLanguage
+	};
+};
+const createCodeHighlightLines = (ranges) => {
+	const highlightLines = /* @__PURE__ */ new Set();
+	for (const range of ranges ?? []) if (typeof range === "number") {
+		if (!Number.isInteger(range) || range <= 0) continue;
+		highlightLines.add(range);
+	} else addCodeHighlightRange(highlightLines, range.join("-"));
+	return highlightLines;
+};
+const addCodeHighlightRange = (highlightLines, value) => {
+	for (const part of value.split(",")) {
+		const rangeMatch = /^\s*(\d+)(?:-(\d+))?\s*$/.exec(part);
+		if (!rangeMatch) continue;
+		const start = Number(rangeMatch[1]);
+		const end = Number(rangeMatch[2] ?? rangeMatch[1]);
+		if (!Number.isInteger(start) || !Number.isInteger(end)) continue;
+		for (let line = start; line <= end; line += 1) if (line > 0) highlightLines.add(line);
+	}
+};
+//#endregion
+//#region src/dom.ts
+const focusableSelector = [
+	"a[href]",
+	"button:not([disabled])",
+	"textarea:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"[tabindex]:not([tabindex='-1'])"
+].join(",");
+function getFocusableElements(container) {
+	return Array.from(container.querySelectorAll(focusableSelector));
+}
+//#endregion
+//#region src/number.ts
+function clampNumber(value, min, max) {
+	if (max < min) return min;
+	return Math.min(Math.max(value, min), max);
+}
+function createNumberRange(start, end) {
+	if (end < start) return [];
+	return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}
+//#endregion
+//#region src/floating.ts
+function getFloatingPanelPosition(options) {
+	const { anchorRect, anchorPoint, floatingRect, side = "bottom", align = "start", offset = 0, viewportWidth, viewportHeight, viewportPadding = 8, matchAnchorMinWidth = false } = options;
+	const resolvedViewportWidth = viewportWidth ?? (typeof window === "undefined" ? 0 : window.innerWidth);
+	const resolvedViewportHeight = viewportHeight ?? (typeof window === "undefined" ? 0 : window.innerHeight);
+	const floatingWidth = floatingRect.width;
+	const floatingHeight = floatingRect.height;
+	const basePosition = anchorPoint ? {
+		top: anchorPoint.y,
+		left: anchorPoint.x
+	} : getAnchoredPanelPosition({
+		anchorRect: anchorRect ?? createPointRect({
+			x: 0,
+			y: 0
+		}),
+		floatingRect,
+		side,
+		align,
+		offset
+	});
+	const maxLeft = Math.max(viewportPadding, resolvedViewportWidth - floatingWidth - viewportPadding);
+	const maxTop = Math.max(viewportPadding, resolvedViewportHeight - floatingHeight - viewportPadding);
+	const position = {
+		top: clampNumber(basePosition.top, viewportPadding, maxTop),
+		left: clampNumber(basePosition.left, viewportPadding, maxLeft)
+	};
+	if (anchorRect && matchAnchorMinWidth) position.minWidth = Math.min(anchorRect.width, resolvedViewportWidth - viewportPadding * 2);
+	return position;
+}
+const getAnchoredPanelPosition = (options) => {
+	const { anchorRect, floatingRect, side, align, offset } = options;
+	const centerLeft = anchorRect.left + anchorRect.width / 2 - floatingRect.width / 2;
+	const centerTop = anchorRect.top + anchorRect.height / 2 - floatingRect.height / 2;
+	if (side === "top" || side === "bottom") return {
+		top: side === "top" ? anchorRect.top - floatingRect.height - offset : anchorRect.bottom + offset,
+		left: getAlignedPosition({
+			start: anchorRect.left,
+			end: anchorRect.right,
+			size: floatingRect.width,
+			center: centerLeft,
+			align
+		})
+	};
+	return {
+		top: getAlignedPosition({
+			start: anchorRect.top,
+			end: anchorRect.bottom,
+			size: floatingRect.height,
+			center: centerTop,
+			align
+		}),
+		left: side === "left" ? anchorRect.left - floatingRect.width - offset : anchorRect.right + offset
+	};
+};
+const getAlignedPosition = (options) => {
+	const { start, end, size, center, align } = options;
+	if (align === "start") return start;
+	if (align === "end") return end - size;
+	return center;
+};
+const createPointRect = (point) => ({
+	top: point.y,
+	right: point.x,
+	bottom: point.y,
+	left: point.x,
+	width: 0,
+	height: 0
+});
+//#endregion
+//#region src/floatingLayer.ts
+function useFloatingLayer(options) {
+	const { open, triggerRef, floatingRef, anchorRect, anchorPoint, getAnchorRect, getAnchorPoint, side = "bottom", align = "start", offset = 0, viewportPadding = 8, minWidth, fallbackWidth, fallbackHeight = 0, matchAnchorWidth = false, matchAnchorMinWidth = false, fullWidthBelow, applyResolvedWidth = false, flipToFit = false, outsideRefs, closeOnOutsidePointerDown = true, restoreFocus = false, onClose, onOpenAutoFocus } = options;
+	const [position, setPosition] = useState();
+	const previousFocusRef = useRef(null);
+	const updatePosition = useCallback(() => {
+		const triggerElement = triggerRef?.current;
+		const floatingElement = floatingRef.current;
+		if (!floatingElement || typeof window === "undefined") return;
+		const resolvedAnchorRect = getAnchorRect?.() ?? anchorRect ?? triggerElement?.getBoundingClientRect();
+		const resolvedAnchorPoint = getAnchorPoint?.() ?? anchorPoint ?? null;
+		const viewportWidth = window.innerWidth;
+		const maxWidth = Math.max(0, viewportWidth - viewportPadding * 2);
+		const rawFloatingWidth = floatingElement.offsetWidth || resolvedAnchorRect?.width || fallbackWidth || 0;
+		const floatingHeight = floatingElement.offsetHeight || fallbackHeight;
+		const resolvedSide = flipToFit && resolvedAnchorRect && !resolvedAnchorPoint ? getFloatingLayerFitSide({
+			anchorRect: resolvedAnchorRect,
+			floatingHeight,
+			side,
+			viewportHeight: window.innerHeight,
+			viewportPadding
+		}) : side;
+		const floatingWidth = resolveFloatingLayerWidth({
+			anchorWidth: resolvedAnchorRect?.width,
+			floatingWidth: rawFloatingWidth,
+			fullWidthBelow,
+			matchAnchorWidth,
+			maxWidth,
+			minWidth,
+			viewportWidth
+		});
+		setPosition({
+			...getFloatingPanelPosition({
+				anchorPoint: resolvedAnchorPoint ?? void 0,
+				anchorRect: resolvedAnchorPoint ? void 0 : resolvedAnchorRect,
+				floatingRect: {
+					width: floatingWidth,
+					height: floatingHeight
+				},
+				side: resolvedSide,
+				align,
+				offset,
+				viewportPadding,
+				matchAnchorMinWidth: matchAnchorMinWidth && !matchAnchorWidth && !resolvedAnchorPoint
+			}),
+			anchorRect: resolvedAnchorRect ?? void 0,
+			width: applyResolvedWidth || matchAnchorWidth || minWidth !== void 0 ? floatingWidth : void 0
+		});
+	}, [
+		align,
+		anchorRect,
+		anchorPoint,
+		fallbackHeight,
+		fallbackWidth,
+		flipToFit,
+		floatingRef,
+		fullWidthBelow,
+		getAnchorRect,
+		getAnchorPoint,
+		matchAnchorMinWidth,
+		matchAnchorWidth,
+		minWidth,
+		offset,
+		applyResolvedWidth,
+		side,
+		triggerRef,
+		viewportPadding
+	]);
+	useEffect(() => {
+		if (!open || typeof window === "undefined") return;
+		const ownerDocument = floatingRef.current?.ownerDocument ?? triggerRef?.current?.ownerDocument ?? document;
+		if (restoreFocus) previousFocusRef.current = ownerDocument.activeElement instanceof HTMLElement ? ownerDocument.activeElement : null;
+		updatePosition();
+		const frame = window.requestAnimationFrame(updatePosition);
+		const focusTimer = onOpenAutoFocus === void 0 ? void 0 : window.setTimeout(onOpenAutoFocus, 0);
+		const handlePointerDown = (event) => {
+			if (!closeOnOutsidePointerDown) return;
+			const target = event.target;
+			if (!(target instanceof Node)) return;
+			if (containsPointerTarget(target, [
+				triggerRef,
+				floatingRef,
+				...outsideRefs ?? []
+			])) return;
+			onClose?.();
+		};
+		const handleWindowUpdate = () => {
+			updatePosition();
+		};
+		ownerDocument.addEventListener("pointerdown", handlePointerDown);
+		window.addEventListener("resize", handleWindowUpdate);
+		window.addEventListener("scroll", handleWindowUpdate, true);
+		return () => {
+			window.cancelAnimationFrame(frame);
+			if (focusTimer !== void 0) window.clearTimeout(focusTimer);
+			ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+			window.removeEventListener("resize", handleWindowUpdate);
+			window.removeEventListener("scroll", handleWindowUpdate, true);
+			if (restoreFocus) {
+				previousFocusRef.current?.focus();
+				previousFocusRef.current = null;
+			}
+		};
+	}, [
+		closeOnOutsidePointerDown,
+		floatingRef,
+		onClose,
+		onOpenAutoFocus,
+		open,
+		outsideRefs,
+		restoreFocus,
+		triggerRef,
+		updatePosition
+	]);
+	useEffect(() => {
+		if (open) return;
+		setPosition(void 0);
+	}, [open]);
+	return {
+		position,
+		updatePosition
+	};
+}
+const getFloatingLayerFitSide = (options) => {
+	const { anchorRect, floatingHeight, side, viewportHeight, viewportPadding } = options;
+	if (side !== "top" && side !== "bottom") return side;
+	const topSpace = anchorRect.top - viewportPadding;
+	const bottomSpace = viewportHeight - anchorRect.bottom - viewportPadding;
+	if (side === "top") return topSpace >= floatingHeight || topSpace >= bottomSpace ? "top" : "bottom";
+	return bottomSpace >= floatingHeight || bottomSpace >= topSpace ? "bottom" : "top";
+};
+const resolveFloatingLayerWidth = (options) => {
+	const { anchorWidth, floatingWidth, fullWidthBelow, matchAnchorWidth, maxWidth, minWidth, viewportWidth } = options;
+	if (fullWidthBelow !== void 0 && viewportWidth <= fullWidthBelow) return maxWidth;
+	if (matchAnchorWidth && anchorWidth !== void 0) return Math.min(Math.max(anchorWidth, minWidth ?? anchorWidth), maxWidth);
+	if (minWidth !== void 0) return Math.min(Math.max(floatingWidth, minWidth), maxWidth);
+	return floatingWidth;
+};
+const containsPointerTarget = (target, refs) => {
+	return refs.some((ref) => ref?.current?.contains(target));
+};
+//#endregion
 //#region src/nodes.ts
 const toNodeArray = (children) => {
 	return (isArray(children) ? children : [children]).filter((item) => {
@@ -46,6 +437,184 @@ function isMediaOnlyParagraph(children) {
 	return Boolean(node.type.__willaMediaElement);
 }
 //#endregion
+//#region src/refs.ts
+function assignRef(ref, value) {
+	if (!ref) return;
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	ref.current = value;
+}
+function composeRefs(...refs) {
+	return (value) => {
+		refs.forEach((ref) => assignRef(ref, value));
+	};
+}
+//#endregion
+//#region src/media.ts
+function resolveMediaAsset(props, assetPath) {
+	if (!assetPath) return void 0;
+	return props.resolveAssetUrl ? props.resolveAssetUrl(props.articleSourcePath ?? "", assetPath) : assetPath;
+}
+function resolveMediaVolume(volume) {
+	if (volume === void 0) return void 0;
+	if (!Number.isFinite(volume)) return void 0;
+	return clampNumber(volume, 0, 1);
+}
+//#endregion
+//#region src/file.ts
+const createObjectFileItem = (file) => {
+	return {
+		id: `${file.name}-${file.size}-${file.lastModified}-${Math.random().toString(36).slice(2)}`,
+		file,
+		url: URL.createObjectURL(file),
+		kind: resolveFileKind(file)
+	};
+};
+const resolveFileKind = (file) => {
+	if (file.type.startsWith("image/")) return "image";
+	if (file.type.startsWith("audio/")) return "audio";
+	if (file.type.startsWith("video/")) return "video";
+	return "file";
+};
+const resolveFilePreviewType = (options) => {
+	if (options.type !== "auto") return options.type;
+	const mimeType = options.mimeType?.toLowerCase() ?? "";
+	const extension = getFileExtension(options.name);
+	if (mimeType.startsWith("image/") || imageExtensions.has(extension)) return "image";
+	if (mimeType.startsWith("video/") || videoExtensions.has(extension)) return "video";
+	if (mimeType.startsWith("audio/") || audioExtensions.has(extension)) return "audio";
+	if (mimeType === "application/pdf" || extension === "pdf") return "pdf";
+	if (mimeType === "text/csv" || extension === "csv") return "csv";
+	if (codeExtensions.has(extension)) return "code";
+	if (mimeType.startsWith("text/") || textExtensions.has(extension)) return "text";
+	return "download";
+};
+const getFileExtension = (name) => {
+	return name.trim().toLowerCase().split(".").filter(Boolean).pop() ?? "";
+};
+const getFileCodeLanguage = (name) => {
+	const extension = getFileExtension(name);
+	return codeLanguageByExtension[extension] ?? extension;
+};
+const resolveFileKindLabel = (kind) => {
+	if (kind === "image") return "图片";
+	if (kind === "audio") return "音频";
+	if (kind === "video") return "视频";
+	return "文件";
+};
+const formatFileSize = (size) => {
+	if (size <= 0) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB"
+	];
+	const unitIndex = Math.min(Math.floor(Math.log(size) / Math.log(1024)), units.length - 1);
+	const value = size / 1024 ** unitIndex;
+	const fractionDigits = value >= 10 || unitIndex === 0 ? 0 : 1;
+	return `${value.toFixed(fractionDigits)} ${units[unitIndex]}`;
+};
+const normalizeFileProgress = (progress) => {
+	if (typeof progress !== "number" || Number.isNaN(progress)) return;
+	return Math.min(100, Math.max(0, progress));
+};
+const resolveFilePreviewMode = (itemMode, fallbackMode) => itemMode ?? fallbackMode;
+const canOpenFilePreviewDialog = (options) => {
+	const { disabled, href, previewMode, status = "ready" } = options;
+	return previewMode === "dialog" && Boolean(href) && status === "ready" && !disabled;
+};
+const imageExtensions = new Set([
+	"avif",
+	"gif",
+	"jpeg",
+	"jpg",
+	"png",
+	"webp"
+]);
+const videoExtensions = new Set([
+	"mov",
+	"mp4",
+	"webm"
+]);
+const audioExtensions = new Set([
+	"aac",
+	"flac",
+	"m4a",
+	"mp3",
+	"ogg",
+	"wav"
+]);
+const codeExtensions = new Set([
+	"bash",
+	"c",
+	"cpp",
+	"css",
+	"diff",
+	"go",
+	"html",
+	"java",
+	"js",
+	"json",
+	"jsx",
+	"md",
+	"py",
+	"rs",
+	"sh",
+	"sql",
+	"ts",
+	"tsx",
+	"xml",
+	"yaml",
+	"yml"
+]);
+const textExtensions = new Set(["log", "txt"]);
+const codeLanguageByExtension = {
+	bash: "bash",
+	c: "c",
+	cpp: "cpp",
+	css: "css",
+	diff: "diff",
+	go: "go",
+	html: "html",
+	java: "java",
+	js: "javascript",
+	json: "json",
+	jsx: "jsx",
+	md: "markdown",
+	py: "python",
+	rs: "rust",
+	sh: "bash",
+	sql: "sql",
+	ts: "typescript",
+	tsx: "tsx",
+	xml: "xml",
+	yaml: "yaml",
+	yml: "yaml"
+};
+//#endregion
+//#region src/request.ts
+const pendingJsonRequests = /* @__PURE__ */ new Map();
+function isAbortError(error) {
+	return error !== null && typeof error === "object" && "name" in error && error.name === "AbortError";
+}
+async function requestJson(input, options = {}) {
+	const { createError, dedupeKey, ...requestInit } = options;
+	const cachedRequest = dedupeKey ? pendingJsonRequests.get(dedupeKey) : null;
+	if (cachedRequest) return cachedRequest;
+	const request = fetch(input, requestInit).then(async (response) => {
+		if (!response.ok) throw createError ? await createError(response) : /* @__PURE__ */ new Error(`Request failed with status ${response.status}.`);
+		return response.json();
+	});
+	if (dedupeKey) {
+		pendingJsonRequests.set(dedupeKey, request);
+		request.then(() => pendingJsonRequests.delete(dedupeKey), () => pendingJsonRequests.delete(dedupeKey));
+	}
+	return request;
+}
+//#endregion
 //#region src/heading.ts
 const toHeadingSlug = (value) => {
 	return value.trim().replace(/\[[^\]]*\]\([^)]*\)/g, (m) => {
@@ -93,4 +662,83 @@ function extractHeadings(source) {
 	return headings;
 }
 //#endregion
-export { copyToClipboard, createHeadingIdFactory, extractHeadings, flattenText, isMediaOnlyParagraph };
+//#region src/virtualScroll.ts
+const getVirtualScrollWindow = (options) => {
+	const { itemCount, itemHeight, overscan, scrollTop, viewportHeight } = options;
+	if (itemCount <= 0) return {
+		startIndex: 0,
+		endIndex: 0,
+		paddingTop: 0,
+		paddingBottom: 0,
+		totalHeight: 0
+	};
+	const safeItemHeight = Math.max(1, itemHeight);
+	const visibleCount = Math.ceil(Math.max(0, viewportHeight) / safeItemHeight);
+	const startIndex = clampNumber(Math.floor(scrollTop / safeItemHeight) - overscan, 0, Math.max(itemCount - 1, 0));
+	const endIndex = clampNumber(startIndex + visibleCount + overscan * 2, 0, itemCount);
+	return {
+		startIndex,
+		endIndex,
+		paddingTop: startIndex * safeItemHeight,
+		paddingBottom: Math.max(0, itemCount - endIndex) * safeItemHeight,
+		totalHeight: itemCount * safeItemHeight
+	};
+};
+const useVirtualScrollWindow = (options) => {
+	const { enabled = false, itemCount, itemHeight, overscan = 4, container } = options;
+	const [metrics, setMetrics] = useState({
+		scrollTop: 0,
+		viewportHeight: 0
+	});
+	useEffect(() => {
+		if (!enabled || !container) return;
+		let frame = 0;
+		const update = () => {
+			frame = 0;
+			setMetrics({
+				scrollTop: container.scrollTop,
+				viewportHeight: container.clientHeight
+			});
+		};
+		const schedule = () => {
+			if (frame) return;
+			frame = window.requestAnimationFrame(update);
+		};
+		update();
+		container.addEventListener("scroll", schedule, { passive: true });
+		const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(schedule);
+		resizeObserver?.observe(container);
+		window.addEventListener("resize", schedule);
+		return () => {
+			if (frame) window.cancelAnimationFrame(frame);
+			container.removeEventListener("scroll", schedule);
+			resizeObserver?.disconnect();
+			window.removeEventListener("resize", schedule);
+		};
+	}, [container, enabled]);
+	return useMemo(() => {
+		if (!enabled) return {
+			startIndex: 0,
+			endIndex: itemCount,
+			paddingTop: 0,
+			paddingBottom: 0,
+			totalHeight: itemCount * itemHeight
+		};
+		return getVirtualScrollWindow({
+			itemCount,
+			itemHeight,
+			overscan,
+			scrollTop: metrics.scrollTop,
+			viewportHeight: metrics.viewportHeight
+		});
+	}, [
+		enabled,
+		itemCount,
+		itemHeight,
+		metrics.scrollTop,
+		metrics.viewportHeight,
+		overscan
+	]);
+};
+//#endregion
+export { MOBILE_BREAKPOINT, assignRef, canOpenFilePreviewDialog, clampNumber, composeRefs, copyToClipboard, createCodeHighlightLines, createHeadingIdFactory, createNumberRange, createObjectFileItem, extractHeadings, flattenText, formatCssSize, formatFileSize, getFileCodeLanguage, getFileExtension, getFloatingPanelPosition, getFocusableElements, getVirtualScrollWindow, highlightCodeToHtml, isAbortError, isMediaOnlyParagraph, isMobile, isMobileViewport, normalizeFileProgress, normalizeHljsLanguage, parseCodeMeta, requestJson, resolveFileKind, resolveFileKindLabel, resolveFilePreviewMode, resolveFilePreviewType, resolveMediaAsset, resolveMediaVolume, useControllableState, useCopyToClipboard, useFloatingLayer, useVirtualScrollWindow };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@willa-ui/shared",
-  "version": "0.0.1-alpha.8d8fe96",
+  "version": "0.0.3-alpha.2739b3e",
   "description": "Shared utilities and types for Willa UI.",
   "author": "chentao.arthur",
   "license": "MIT",
@@ -24,7 +24,8 @@
     "dist"
   ],
   "dependencies": {
-    "aidly": "1.37.0"
+    "aidly": "1.37.0",
+    "highlight.js": "11.11.1"
   },
   "peerDependencies": {
     "react": "19.2.6"
@@ -32,7 +33,7 @@
   "devDependencies": {
     "@types/react": "19.2.14",
     "@vitest/coverage-v8": "1.6.0",
-    "auklet": "0.0.29",
+    "auklet": "0.2.5",
     "vitest": "1.6.0",
     "typescript": "6.0.3"
   },