@octane-xplat/ui 0.9.0 → 0.11.0

package/dist/web/useChatStreamScroll.web.tsrx.js

@@ -0,0 +1,208 @@
+import { hookSlots, useEffect, useRef, useState } from "octane";
+import { memoPublish, memoSlot, memoTake1, memoTake2, memoTake3, memoTake4 } from "octane/internal/client";
+//#region src/useChatStreamScroll.web.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(20);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
+var _h$11 = /* @__PURE__ */ Symbol(_hs$ + 11);
+var _h$12 = /* @__PURE__ */ Symbol(_hs$ + 12);
+var _h$13 = /* @__PURE__ */ Symbol(_hs$ + 13);
+var _h$14 = /* @__PURE__ */ Symbol(_hs$ + 14);
+var _h$15 = /* @__PURE__ */ Symbol(_hs$ + 15);
+var _h$16 = /* @__PURE__ */ Symbol(_hs$ + 16);
+var _h$17 = /* @__PURE__ */ Symbol(_hs$ + 17);
+var _h$18 = /* @__PURE__ */ Symbol(_hs$ + 18);
+var _h$19 = /* @__PURE__ */ Symbol(_hs$ + 19);
+var SIXTY_FPS_MS = 1e3 / 60;
+var FOLLOWING_ATTR = "data-vx-chat-following";
+var FOLLOWING_STYLE_ATTR = "data-vx-chat-following-style";
+function ensureFollowingStyle() {
+	if (typeof document === "undefined" || document.head.querySelector(`[${FOLLOWING_STYLE_ATTR}]`)) return;
+	const style = document.createElement("style");
+	style.setAttribute(FOLLOWING_STYLE_ATTR, "");
+	style.textContent = `[${FOLLOWING_ATTR}]{overflow-anchor:none !important}`;
+	document.head.appendChild(style);
+}
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useChatStreamScroll({ scrollRef, enabled = true, lockThreshold = 10, buttonThreshold = 100, damping = .7, stiffness = .05, mass = 1.25 }) {
+	let __hks, __hkd0, __hke, __hks$, __hkd0$, __hkd1, __hkd2, __hkd3, __hke$, __hks$2, __hkd0$2, __hke$2, __hks$3, __hkd0$3, __hkd1$, __hke$3, __hks$4, __hkd0$4, __hkd1$2, __hkd2$, __hke$4, __hks$5, __hkd0$5, __hke$5, __hks$6, __hkd0$6, __hkd1$3, __hke$6, __hks$7, __hkd0$7, __hkd1$4, __hke$7, __hks$8, __hkd0$8, __hke$8, __hks$9, __hkd0$9, __hkd1$5, __hkd2$2, __hkd3$, __hke$9;
+	const [isScrolledUp, setIsScrolledUp] = useState(false, _h$0);
+	const [isLocked, setIsLocked] = useState(true, _h$1);
+	const lockedRef = useRef(true, _h$2);
+	const initialFillPendingRef = useRef(true, _h$3);
+	const velocityRef = useRef(0, _h$4);
+	const animatingRef = useRef(false, _h$5);
+	const lastTickRef = useRef(void 0, _h$6);
+	const rafRef = useRef(0, _h$7);
+	const lastScrollTopRef = useRef(0, _h$8);
+	const setLocked = (__hkd0 = scrollRef, __hks = memoSlot(_h$9, "useCallback"), __hke = memoTake1(__hks, __hkd0), __hke === null ? memoPublish(__hks, (locked) => {
+		lockedRef.current = locked;
+		setIsLocked(locked);
+		scrollRef.current?.toggleAttribute?.(FOLLOWING_ATTR, locked);
+	}, __hkd0) : __hke.value);
+	const animate = (__hkd0$ = scrollRef, __hkd1 = damping, __hkd2 = stiffness, __hkd3 = mass, __hks$ = memoSlot(_h$10, "useCallback"), __hke$ = memoTake4(__hks$, __hkd0$, __hkd1, __hkd2, __hkd3), __hke$ === null ? memoPublish(__hks$, () => {
+		const el = scrollRef.current;
+		if (!el || !lockedRef.current) {
+			animatingRef.current = false;
+			lastTickRef.current = void 0;
+			velocityRef.current = 0;
+			return;
+		}
+		if (el.scrollHeight <= el.clientHeight) {
+			animatingRef.current = false;
+			lastTickRef.current = void 0;
+			velocityRef.current = 0;
+			return;
+		}
+		const target = el.scrollHeight - el.clientHeight;
+		const diff = target - el.scrollTop;
+		if (Math.abs(diff) < .5 && Math.abs(velocityRef.current) < .1) {
+			el.scrollTop = target;
+			animatingRef.current = false;
+			lastTickRef.current = void 0;
+			velocityRef.current = 0;
+			return;
+		}
+		const now = performance.now();
+		const tickDelta = lastTickRef.current ? (now - lastTickRef.current) / SIXTY_FPS_MS : 1;
+		lastTickRef.current = now;
+		velocityRef.current = (damping * velocityRef.current + stiffness * diff) / mass;
+		el.scrollTop += velocityRef.current * tickDelta;
+		lastScrollTopRef.current = el.scrollTop;
+		rafRef.current = requestAnimationFrame(animate);
+	}, __hkd0$, __hkd1, __hkd2, __hkd3) : __hke$.value);
+	const jumpToBottom = (__hkd0$2 = scrollRef, __hks$2 = memoSlot(_h$11, "useCallback"), __hke$2 = memoTake1(__hks$2, __hkd0$2), __hke$2 === null ? memoPublish(__hks$2, () => {
+		const el = scrollRef.current;
+		if (!el) return;
+		cancelAnimationFrame(rafRef.current);
+		animatingRef.current = false;
+		velocityRef.current = 0;
+		lastTickRef.current = void 0;
+		el.scrollTop = el.scrollHeight - el.clientHeight;
+		lastScrollTopRef.current = el.scrollTop;
+	}, __hkd0$2) : __hke$2.value);
+	const startAnimation = (__hkd0$3 = animate, __hkd1$ = jumpToBottom, __hks$3 = memoSlot(_h$12, "useCallback"), __hke$3 = memoTake2(__hks$3, __hkd0$3, __hkd1$), __hke$3 === null ? memoPublish(__hks$3, () => {
+		if (!lockedRef.current) return;
+		if (prefersReducedMotion()) {
+			jumpToBottom();
+			return;
+		}
+		if (!animatingRef.current) {
+			animatingRef.current = true;
+			lastTickRef.current = void 0;
+			rafRef.current = requestAnimationFrame(animate);
+		}
+	}, __hkd0$3, __hkd1$) : __hke$3.value);
+	const scrollToBottom = (__hkd0$4 = setLocked, __hkd1$2 = startAnimation, __hkd2$ = jumpToBottom, __hks$4 = memoSlot(_h$13, "useCallback"), __hke$4 = memoTake3(__hks$4, __hkd0$4, __hkd1$2, __hkd2$), __hke$4 === null ? memoPublish(__hks$4, (options) => {
+		setLocked(true);
+		setIsScrolledUp(false);
+		initialFillPendingRef.current = false;
+		if (options?.behavior === "instant") {
+			jumpToBottom();
+			return;
+		}
+		startAnimation();
+	}, __hkd0$4, __hkd1$2, __hkd2$) : __hke$4.value);
+	const scrollToMessage = (__hkd0$5 = scrollRef, __hks$5 = memoSlot(_h$14, "useCallback"), __hke$5 = memoTake1(__hks$5, __hkd0$5), __hke$5 === null ? memoPublish(__hks$5, (el) => {
+		const container = scrollRef.current;
+		if (!container) return;
+		const containerRect = container.getBoundingClientRect();
+		const offset = el.getBoundingClientRect().top - containerRect.top + container.scrollTop;
+		container.scrollTo({
+			top: offset,
+			behavior: "instant"
+		});
+		lastScrollTopRef.current = container.scrollTop;
+	}, __hkd0$5) : __hke$5.value);
+	const scrollToLastMessage = (__hkd0$6 = scrollRef, __hkd1$3 = scrollToMessage, __hks$6 = memoSlot(_h$15, "useCallback"), __hke$6 = memoTake2(__hks$6, __hkd0$6, __hkd1$3), __hke$6 === null ? memoPublish(__hks$6, () => {
+		const container = scrollRef.current;
+		if (!container) return;
+		const messages = container.getElementsByClassName("vx-chatmsg");
+		const last = messages[messages.length - 1];
+		if (last) scrollToMessage(last);
+	}, __hkd0$6, __hkd1$3) : __hke$6.value);
+	const lock = (__hkd0$7 = setLocked, __hkd1$4 = startAnimation, __hks$7 = memoSlot(_h$16, "useCallback"), __hke$7 = memoTake2(__hks$7, __hkd0$7, __hkd1$4), __hke$7 === null ? memoPublish(__hks$7, () => {
+		setLocked(true);
+		setIsScrolledUp(false);
+		startAnimation();
+	}, __hkd0$7, __hkd1$4) : __hke$7.value);
+	const unlock = (__hkd0$8 = setLocked, __hks$8 = memoSlot(_h$17, "useCallback"), __hke$8 = memoTake1(__hks$8, __hkd0$8), __hke$8 === null ? memoPublish(__hks$8, () => {
+		setLocked(false);
+		animatingRef.current = false;
+	}, __hkd0$8) : __hke$8.value);
+	const scrollIfLocked = (__hkd0$9 = enabled, __hkd1$5 = startAnimation, __hkd2$2 = jumpToBottom, __hkd3$ = scrollRef, __hks$9 = memoSlot(_h$18, "useCallback"), __hke$9 = memoTake4(__hks$9, __hkd0$9, __hkd1$5, __hkd2$2, __hkd3$), __hke$9 === null ? memoPublish(__hks$9, () => {
+		if (!enabled || !lockedRef.current) return;
+		const el = scrollRef.current;
+		if (initialFillPendingRef.current && el && el.scrollHeight > el.clientHeight) {
+			initialFillPendingRef.current = false;
+			jumpToBottom();
+			return;
+		}
+		startAnimation();
+	}, __hkd0$9, __hkd1$5, __hkd2$2, __hkd3$) : __hke$9.value);
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el || !enabled) return;
+		lastScrollTopRef.current = el.scrollTop;
+		ensureFollowingStyle();
+		el.toggleAttribute(FOLLOWING_ATTR, lockedRef.current);
+		const onScroll = () => {
+			const { scrollTop, scrollHeight, offsetHeight } = el;
+			const dist = scrollHeight - scrollTop - offsetHeight;
+			setIsScrolledUp(dist > buttonThreshold);
+			const isScrollingUp = scrollTop < lastScrollTopRef.current;
+			lastScrollTopRef.current = scrollTop;
+			const landedAtBottom = scrollHeight - scrollTop - el.clientHeight < 1;
+			if (isScrollingUp && !landedAtBottom && lockedRef.current) {
+				setLocked(false);
+				animatingRef.current = false;
+			}
+		};
+		const onScrollEnd = () => {
+			if (el.scrollHeight - el.scrollTop - el.offsetHeight <= lockThreshold) setLocked(true);
+		};
+		el.addEventListener("scroll", onScroll, { passive: true });
+		el.addEventListener("scrollend", onScrollEnd);
+		requestAnimationFrame(() => {
+			if (el.scrollHeight > el.clientHeight) {
+				el.scrollTop = el.scrollHeight - el.clientHeight;
+				lastScrollTopRef.current = el.scrollTop;
+				initialFillPendingRef.current = false;
+			}
+		});
+		return () => {
+			el.removeEventListener("scroll", onScroll);
+			el.removeEventListener("scrollend", onScrollEnd);
+			el.removeAttribute(FOLLOWING_ATTR);
+		};
+	}, [
+		scrollRef,
+		enabled,
+		lockThreshold,
+		buttonThreshold,
+		setLocked
+	], _h$19);
+	return {
+		isScrolledUp,
+		isLocked,
+		scrollToBottom,
+		scrollToMessage,
+		lock,
+		unlock,
+		scrollIfLocked,
+		scrollToLastMessage
+	};
+}
+//#endregion
+export { useChatStreamScroll };

package/dist/web/useMeasure.web.tsrx.js

@@ -20,7 +20,7 @@ function useMeasure(options = {}) {
 	const [element, setElement] = useState(null, _h$0);
 	const [bounds, setBounds] = useState(null, _h$1);
 	const observe = options.observe ?? true;
-	const bind = (__hks = memoSlot(_h$2, "useCallback"), __hke = memoTake0(__hks), __hke === null ? memoPublish(__hks, (next) => {
+	const ref = (__hks = memoSlot(_h$2, "useCallback"), __hke = memoTake0(__hks), __hke === null ? memoPublish(__hks, (next) => {
 		setElement((current) => current === next ? current : next);
 	}) : __hke.value);
 	useEffect(() => {
@@ -42,7 +42,7 @@ function useMeasure(options = {}) {
 		};
 	}, [element, observe], _h$3);
 	return {
-		bind,
+		ref,
 		bounds
 	};
 }

package/dist/web/useMediaQuery.web.tsrx.js

@@ -0,0 +1,22 @@
+import { hookSlots, useSyncExternalStore } from "octane";
+import { memoPublish, memoSlot, memoTake1 } from "octane/internal/client";
+//#region src/useMediaQuery.web.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+function useMediaQuery(query, options) {
+	let __hks, __hkd0, __hke;
+	const subscribe = (__hkd0 = query, __hks = memoSlot(_h$0, "useCallback"), __hke = memoTake1(__hks, __hkd0), __hke === null ? memoPublish(__hks, (cb) => {
+		if (typeof matchMedia !== "function") return () => {};
+		const mq = matchMedia(query);
+		if (mq.addEventListener) {
+			mq.addEventListener("change", cb);
+			return () => mq.removeEventListener("change", cb);
+		}
+		mq.addListener?.(cb);
+		return () => mq.removeListener?.(cb);
+	}, __hkd0) : __hke.value);
+	return useSyncExternalStore(subscribe, () => typeof matchMedia === "function" ? matchMedia(query).matches : options?.defaultIsMobile ?? false, _h$1);
+}
+//#endregion
+export { useMediaQuery };

package/dist/web/useResizable.web.tsrx.js

@@ -0,0 +1,71 @@
+import { createResizableRegion } from "./resize-state.js";
+import { webBasisSource } from "./resize-basis.web.js";
+import { hookSlots, useEffect, useRef, useSyncExternalStore } from "octane";
+//#region src/useResizable.web.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+function useResizable(config) {
+	const isMulti = "regions" in config;
+	const state = useRef(null, _h$0);
+	if (state.current == null) {
+		const machines = /* @__PURE__ */ new Map();
+		if (isMulti) {
+			const multi = config;
+			for (const [key, regionConfig] of Object.entries(multi.regions)) machines.set(key, createResizableRegion({
+				...regionConfig,
+				containerRef: multi.containerRef,
+				direction: multi.direction
+			}, webBasisSource, multi.autoSaveId ? `${multi.autoSaveId}:${key}` : void 0));
+			state.current = {
+				machines,
+				order: Object.keys(multi.regions)
+			};
+		} else {
+			const single = config;
+			machines.set("default", createResizableRegion(single, webBasisSource));
+			state.current = {
+				machines,
+				order: ["default"]
+			};
+		}
+	}
+	for (const [key, machine] of state.current.machines) {
+		const single = config.regions?.[key];
+		machine.update(isMulti ? {
+			...single,
+			containerRef: config.containerRef,
+			direction: config.direction
+		} : config);
+	}
+	const snapshotRef = useRef([], _h$1);
+	useSyncExternalStore((cb) => {
+		const unsubs = Array.from(state.current.machines.values()).map((m) => m.subscribe(cb));
+		return () => unsubs.forEach((u) => u());
+	}, () => {
+		const next = Array.from(state.current.machines.values()).map((m) => m.getSnapshot());
+		const prev = snapshotRef.current;
+		if (prev.length === next.length && prev.every((p, i) => p === next[i])) return prev;
+		snapshotRef.current = next;
+		return next;
+	}, _h$2);
+	const containerRef = config.containerRef;
+	const direction = config.direction ?? "horizontal";
+	useEffect(() => {
+		const remeasure = () => {
+			for (const machine of state.current.machines.values()) machine.remeasure();
+		};
+		remeasure();
+		return webBasisSource.observe(containerRef, direction, remeasure);
+	}, [containerRef, direction], _h$3);
+	if (isMulti) {
+		const result = {};
+		for (const key of state.current.order) result[key] = state.current.machines.get(key).region;
+		return result;
+	}
+	return state.current.machines.get("default").region;
+}
+//#endregion
+export { useResizable };

package/dist/web/useSelect.js

@@ -0,0 +1,133 @@
+import { filterSelectOptions, groupSelectOptions, sameSelection, selectValues, toggleVisibleSelection } from "./select-options.js";
+import { hookSlots, useEffect, useMemo, useRef, useState } from "octane";
+//#region src/useSelect.tsx
+var _hs$ = /* @__PURE__ */ hookSlots(11);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
+function useSelect(props) {
+	const latest = useRef(props, _h$0);
+	latest.current = props;
+	const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false, _h$1);
+	const [internalValue, setInternalValue] = useState(selectValues(props.defaultValue), _h$2);
+	const [query, setQueryState] = useState("", _h$3);
+	const [pending, setPending] = useState(null, _h$4);
+	const pendingRef = useRef(false, _h$5);
+	const alive = useRef(true, _h$6);
+	const blocked = props.isDisabled || props.isReadOnly;
+	const requestedOpen = props.open ?? internalOpen;
+	const open = requestedOpen && !blocked;
+	const selected = pending ?? (props.value !== void 0 ? selectValues(props.value) : internalValue);
+	const groups = groupSelectOptions(filterSelectOptions(props.options, props.searchable ? query : ""));
+	const shown = groups.flatMap((group) => group.options);
+	const enabled = shown.filter((option) => !option.isDisabled);
+	const selectedCount = enabled.filter((option) => selected.includes(option.value)).length;
+	const selectAllState = enabled.length > 0 && selectedCount === enabled.length ? "checked" : selectedCount ? "indeterminate" : "unchecked";
+	const busy = Boolean(props.isLoading || pending);
+	const setQuery = (next) => {
+		setQueryState(next);
+		latest.current.onChangeQuery?.(next);
+	};
+	const setOpen = (next) => {
+		if (next && (latest.current.isDisabled || latest.current.isReadOnly)) return;
+		if (latest.current.open === void 0) setInternalOpen(next);
+		if (!next && query) setQuery("");
+		latest.current.onOpenChange?.(next);
+	};
+	useEffect(() => {
+		if (blocked && requestedOpen) setOpen(false);
+	}, [blocked, requestedOpen], _h$7);
+	useEffect(() => {
+		if (!open && query) setQuery("");
+	}, [open], _h$8);
+	useEffect(() => () => {
+		alive.current = false;
+	}, [], _h$9);
+	const report = async (keys) => {
+		const current = latest.current;
+		if (current.isDisabled || current.isReadOnly || pendingRef.current) return;
+		const previous = selected;
+		const value = current.multiple ? keys : keys[0] ?? null;
+		const action = current.changeAction;
+		if (action) {
+			pendingRef.current = true;
+			setPending(keys);
+		}
+		if (current.value === void 0) setInternalValue(keys);
+		try {
+			current.onValueChange?.(value);
+			await action?.(value);
+		} catch (error) {
+			if (!alive.current) return;
+			const nextProps = latest.current;
+			if (nextProps.value === void 0 || sameSelection(selectValues(nextProps.value), keys)) {
+				if (nextProps.value === void 0) setInternalValue(previous);
+				nextProps.onValueChange?.(nextProps.multiple ? previous : previous[0] ?? null);
+			}
+			nextProps.onChangeError?.(error);
+		} finally {
+			pendingRef.current = false;
+			if (alive.current) setPending(null);
+		}
+	};
+	const pick = (option) => {
+		if (option.isDisabled || blocked || pendingRef.current) return;
+		report(props.multiple ? selected.includes(option.value) ? selected.filter((value) => value !== option.value) : [...selected, option.value] : [option.value]);
+		if (!props.multiple) setOpen(false);
+	};
+	const clear = () => {
+		if (!props.hasClear || blocked || pendingRef.current) return;
+		report([]);
+		props.onClear?.();
+		setOpen(false);
+	};
+	const selectAll = () => {
+		if (!props.multiple || !props.hasSelectAll || blocked || pendingRef.current) return;
+		report(toggleVisibleSelection(selected, shown));
+	};
+	const items = selected.map((value) => ({
+		value,
+		label: props.options.find((option) => option.value === value)?.label ?? value
+	}));
+	const triggerText = items.length ? props.formatValue?.(items) ?? (props.multiple && props.triggerDisplay === "count" ? `${items.length} selected` : items.map((item) => item.label).join(", ")) : props.placeholder ?? "";
+	const emptyText = query ? props.emptySearchText ?? "No results found" : props.emptyText ?? "No options";
+	const announcement = busy ? "Loading…" : query ? `${shown.length} results. ${shown.length ? "" : emptyText}` : props.multiple ? `${selected.length} selected` : "";
+	return useMemo(() => ({
+		open,
+		selected,
+		query,
+		groups,
+		shown,
+		enabled,
+		selectAllState,
+		busy,
+		pending: pending !== null,
+		blocked: Boolean(blocked),
+		triggerText,
+		emptyText,
+		announcement,
+		setOpen,
+		setQuery,
+		pick,
+		clear,
+		selectAll
+	}), [
+		open,
+		selected,
+		query,
+		props,
+		pending,
+		internalValue,
+		internalOpen
+	], _h$10);
+}
+//#endregion
+export { useSelect };