@octane-xplat/ui 0.7.3 → 0.10.0

package/dist/native/useChatPasteAsToken.tsrx.js

@@ -0,0 +1,25 @@
+import { hookSlots, useCallback } from "@nativescript-community/octane";
+//#region src/useChatPasteAsToken.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function defaultToToken(text) {
+	const lines = text.split("\n").length;
+	const chars = text.length;
+	return {
+		value: text,
+		label: lines > 1 ? `${lines} lines, ${chars} chars` : `${chars} chars`,
+		variant: "neutral"
+	};
+}
+function useChatPasteAsToken({ inputRef, threshold = 200, toToken = defaultToToken }) {
+	return { onPaste: useCallback((_event, text) => {
+		if (text.length <= threshold) return false;
+		inputRef.current?.insertToken(toToken(text));
+		return true;
+	}, [
+		inputRef,
+		threshold,
+		toToken
+	], _h$0) };
+}
+//#endregion
+export { useChatPasteAsToken };

package/dist/native/useChatStreamScroll.tsrx.js

@@ -0,0 +1,136 @@
+import { hookSlots, useCallback, useEffect, useRef, useState } from "@nativescript-community/octane";
+//#region src/useChatStreamScroll.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(15);
+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);
+function useChatStreamScroll({ scrollRef, enabled = true, lockThreshold = 10, buttonThreshold = 100 }) {
+	const [isScrolledUp, setIsScrolledUp] = useState(false, _h$0);
+	const [isLocked, setIsLocked] = useState(true, _h$1);
+	const lockedRef = useRef(true, _h$2);
+	const lastOffsetRef = useRef(0, _h$3);
+	const initialFillPendingRef = useRef(true, _h$4);
+	const setLocked = useCallback((locked) => {
+		lockedRef.current = locked;
+		setIsLocked(locked);
+	}, [], _h$5);
+	const bottomOffset = useCallback(() => {
+		const el = scrollRef.current;
+		return el ? Math.max(0, el.scrollableHeight ?? 0) : 0;
+	}, [scrollRef], _h$6);
+	const jumpToBottom = useCallback(() => {
+		const el = scrollRef.current;
+		if (!el?.scrollToVerticalOffset) return;
+		const target = bottomOffset();
+		el.scrollToVerticalOffset(target, false);
+		lastOffsetRef.current = target;
+	}, [scrollRef, bottomOffset], _h$7);
+	const scrollToBottom = useCallback((options) => {
+		setLocked(true);
+		setIsScrolledUp(false);
+		initialFillPendingRef.current = false;
+		const el = scrollRef.current;
+		if (!el?.scrollToVerticalOffset) return;
+		const target = bottomOffset();
+		el.scrollToVerticalOffset(target, options?.behavior !== "instant");
+		lastOffsetRef.current = target;
+	}, [
+		setLocked,
+		scrollRef,
+		bottomOffset
+	], _h$8);
+	const scrollToMessage = useCallback((el) => {
+		const container = scrollRef.current;
+		if (!container?.scrollToVerticalOffset || !el?.getLocationRelativeTo) return;
+		const point = el.getLocationRelativeTo(container);
+		if (!point) return;
+		const target = container.verticalOffset + point.y;
+		container.scrollToVerticalOffset(Math.max(0, target), false);
+		lastOffsetRef.current = target;
+	}, [scrollRef], _h$9);
+	const scrollToLastMessage = useCallback(() => {
+		const container = scrollRef.current;
+		const content = container?.getChildAt ? container.getChildAt(0) : null;
+		if (!content?.getChildrenCount) return;
+		const count = content.getChildrenCount();
+		const last = count > 0 ? content.getChildAt(count - 1) : null;
+		if (last) scrollToMessage(last);
+	}, [scrollRef, scrollToMessage], _h$10);
+	const lock = useCallback(() => {
+		setLocked(true);
+		setIsScrolledUp(false);
+		scrollToBottom();
+	}, [setLocked, scrollToBottom], _h$11);
+	const unlock = useCallback(() => {
+		setLocked(false);
+	}, [setLocked], _h$12);
+	const scrollIfLocked = useCallback(() => {
+		if (!enabled || !lockedRef.current) return;
+		const el = scrollRef.current;
+		if (!el?.scrollToVerticalOffset) return;
+		if (initialFillPendingRef.current && el.scrollableHeight > 0) {
+			initialFillPendingRef.current = false;
+			jumpToBottom();
+			return;
+		}
+		el.scrollToVerticalOffset(bottomOffset(), true);
+	}, [
+		enabled,
+		scrollRef,
+		jumpToBottom,
+		bottomOffset
+	], _h$13);
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el?.on || !enabled) return;
+		lastOffsetRef.current = el.verticalOffset ?? 0;
+		const onScroll = () => {
+			const offset = el.verticalOffset ?? 0;
+			const dist = (el.scrollableHeight ?? 0) - offset;
+			setIsScrolledUp(dist > buttonThreshold);
+			const isScrollingUp = offset < lastOffsetRef.current;
+			lastOffsetRef.current = offset;
+			if (isScrollingUp && dist > 1 && lockedRef.current) setLocked(false);
+			if (dist <= lockThreshold) setLocked(true);
+		};
+		el.on("scroll", onScroll);
+		setTimeout(() => {
+			if ((el.scrollableHeight ?? 0) > 0 && lockedRef.current) {
+				jumpToBottom();
+				initialFillPendingRef.current = false;
+			}
+		}, 0);
+		return () => el.off("scroll", onScroll);
+	}, [
+		scrollRef,
+		enabled,
+		lockThreshold,
+		buttonThreshold,
+		setLocked,
+		jumpToBottom
+	], _h$14);
+	return {
+		isScrolledUp,
+		isLocked,
+		scrollToBottom,
+		scrollToMessage,
+		lock,
+		unlock,
+		scrollIfLocked,
+		scrollToLastMessage
+	};
+}
+//#endregion
+export { useChatStreamScroll };

package/dist/native/useMeasure.tsrx.js

@@ -20,7 +20,7 @@ function useMeasure(options = {}) {
 	const [bounds, setBounds] = useState(null, _h$0);
 	const detach = useRef(null, _h$1);
 	const observe = options.observe ?? true;
-	const bind = useCallback((view) => {
+	const ref = useCallback((view) => {
 		detach.current?.();
 		detach.current = null;
 		if (!view) {
@@ -55,7 +55,7 @@ function useMeasure(options = {}) {
 	}, [observe], _h$2);
 	useEffect(() => () => detach.current?.(), [], _h$3);
 	return {
-		bind,
+		ref,
 		bounds
 	};
 }

package/dist/native/useResizable.tsrx.js

@@ -0,0 +1,71 @@
+import { createResizableRegion } from "./resize-state.js";
+import { nativeBasisSource } from "./resize-basis.js";
+import { hookSlots, useEffect, useRef, useSyncExternalStore } from "@nativescript-community/octane";
+//#region src/useResizable.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
+			}, nativeBasisSource, multi.autoSaveId ? `${multi.autoSaveId}:${key}` : void 0));
+			state.current = {
+				machines,
+				order: Object.keys(multi.regions)
+			};
+		} else {
+			const single = config;
+			machines.set("default", createResizableRegion(single, nativeBasisSource));
+			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 nativeBasisSource.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/native/useSelect.js

@@ -0,0 +1,133 @@
+import { filterSelectOptions, groupSelectOptions, sameSelection, selectValues, toggleVisibleSelection } from "./select-options.js";
+import { hookSlots, useEffect, useMemo, useRef, useState } from "@nativescript-community/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 };

package/dist/native/useSpeechRecognition.tsrx.js

@@ -0,0 +1,32 @@
+import { hookSlots, useCallback } from "@nativescript-community/octane";
+//#region src/useSpeechRecognition.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);
+var EMPTY = [
+	0,
+	0,
+	0,
+	0,
+	0
+];
+var noop = () => {};
+function useSpeechRecognition(_options = {}) {
+	return {
+		isSupported: false,
+		isListening: false,
+		isSpeaking: false,
+		volume: 0,
+		bands: EMPTY,
+		rawBands: EMPTY,
+		interimTranscript: "",
+		start: useCallback(noop, [], _h$0),
+		stop: useCallback(noop, [], _h$1),
+		abort: useCallback(noop, [], _h$2),
+		toggle: useCallback(noop, [], _h$3)
+	};
+}
+//#endregion
+export { useSpeechRecognition };