@octane-xplat/ui 0.7.3 → 0.10.0

package/src/useSelect.tsx

@@ -0,0 +1,210 @@
+import { useEffect, useMemo, useRef, useState } from 'octane'
+import type { SelectOption, SelectProps } from './props'
+import {
+	filterSelectOptions,
+	groupSelectOptions,
+	sameSelection,
+	selectValues,
+	toggleVisibleSelection,
+} from './select-options'
+
+/** Shared finite-list state; platform leaves own focus, events, and hosting. */
+export function useSelect(props: SelectProps) {
+	const latest = useRef(props)
+	latest.current = props
+	const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false)
+	const [internalValue, setInternalValue] = useState(selectValues(props.defaultValue))
+	const [query, setQueryState] = useState('')
+	const [pending, setPending] = useState<string[] | null>(null)
+	const pendingRef = useRef(false)
+	const alive = useRef(true)
+	const blocked = props.isDisabled || props.isReadOnly
+	const requestedOpen = props.open ?? internalOpen
+	const open = requestedOpen && !blocked
+	const selected =
+		pending ?? (props.value !== undefined ? 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 allSelected = enabled.length > 0 && selectedCount === enabled.length
+	const selectAllState: 'checked' | 'indeterminate' | 'unchecked' = allSelected
+		? 'checked'
+		: selectedCount
+			? 'indeterminate'
+			: 'unchecked'
+
+	const busy = Boolean(props.isLoading || pending)
+
+	const setQuery = (next: string) => {
+		setQueryState(next)
+		latest.current.onChangeQuery?.(next)
+	}
+
+	const setOpen = (next: boolean) => {
+		if (next && (latest.current.isDisabled || latest.current.isReadOnly)) {
+			return
+		}
+
+		if (latest.current.open === undefined) {
+			setInternalOpen(next)
+		}
+
+		if (!next && query) {
+			setQuery('')
+		}
+
+		latest.current.onOpenChange?.(next)
+	}
+
+	useEffect(() => {
+		if (blocked && requestedOpen) {
+			setOpen(false)
+		}
+	}, [blocked, requestedOpen])
+
+	useEffect(() => {
+		if (!open && query) {
+			setQuery('')
+		}
+	}, [open])
+
+	useEffect(
+		() => () => {
+			alive.current = false
+		},
+		[],
+	)
+
+	const report = async (keys: string[]) => {
+		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 === undefined) {
+			setInternalValue(keys)
+		}
+
+		try {
+			current.onValueChange?.(value)
+			await action?.(value)
+		} catch (error) {
+			if (!alive.current) {
+				return
+			}
+
+			const nextProps = latest.current
+			if (nextProps.value === undefined || sameSelection(selectValues(nextProps.value), keys)) {
+				if (nextProps.value === undefined) {
+					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: SelectOption) => {
+		if (option.isDisabled || blocked || pendingRef.current) {
+			return
+		}
+
+		void 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
+		}
+
+		void report([])
+		props.onClear?.()
+		setOpen(false)
+	}
+
+	const selectAll = () => {
+		if (!props.multiple || !props.hasSelectAll || blocked || pendingRef.current) {
+			return
+		}
+
+		void 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],
+	)
+}

package/src/useSpeechRecognition.tsrx

@@ -0,0 +1,33 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useCallback } from 'octane';
+import type { UseSpeechRecognitionOptions, UseSpeechRecognitionReturn } from './props';
+
+const EMPTY: number[] = [0, 0, 0, 0, 0];
+const noop = () => {};
+
+/** Speech recognition is a browser API — native has no shared engine in
+ *  `ui` (a plugin-backed leaf package could host one). The contract is
+ *  honest rather than absent: `isSupported` is false and the controls are
+ *  inert no-ops. */
+export function useSpeechRecognition(
+	_options: UseSpeechRecognitionOptions = {},
+): UseSpeechRecognitionReturn {
+	const start = useCallback(noop, []);
+	const stop = useCallback(noop, []);
+	const abort = useCallback(noop, []);
+	const toggle = useCallback(noop, []);
+
+	return {
+		isSupported: false,
+		isListening: false,
+		isSpeaking: false,
+		volume: 0,
+		bands: EMPTY,
+		rawBands: EMPTY,
+		interimTranscript: '',
+		start,
+		stop,
+		abort,
+		toggle,
+	};
+}

package/src/useSpeechRecognition.web.tsrx

@@ -0,0 +1,293 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'octane';
+import type { UseSpeechRecognitionOptions, UseSpeechRecognitionReturn } from './props';
+
+type SpeechRecognitionInstance = {
+	lang: string;
+	continuous: boolean;
+	interimResults: boolean;
+	start: () => void;
+	stop: () => void;
+	abort: () => void;
+	onstart: (() => void) | null;
+	onend: (() => void) | null;
+	onresult: ((event: any) => void) | null;
+	onspeechstart: (() => void) | null;
+	onspeechend: (() => void) | null;
+	onerror: ((event: { error: string; message?: string }) => void) | null;
+	onnomatch: (() => void) | null;
+};
+
+type SpeechRecognitionConstructor = new () => SpeechRecognitionInstance;
+
+function getSpeechRecognition(): SpeechRecognitionConstructor | null {
+	if (typeof window === 'undefined') return null;
+	const w = window as any;
+	return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
+}
+
+interface VolumeAnalyser {
+	calibrate: () => void;
+	getVolume: () => number;
+	getBands: (count: number) => number[];
+	getRawBands: (count: number) => number[];
+	cleanup: () => void;
+}
+
+async function createVolumeAnalyser(getCtx: () => any): Promise<VolumeAnalyser | null> {
+	try {
+		const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+		const audioContext = getCtx();
+		const source = audioContext.createMediaStreamSource(stream);
+		const analyser = audioContext.createAnalyser();
+		analyser.fftSize = 256;
+		analyser.smoothingTimeConstant = 0.5;
+		source.connect(analyser);
+
+		const dataArray = new Uint8Array(analyser.frequencyBinCount);
+		const noiseFloor = new Float32Array(analyser.frequencyBinCount);
+		let calibrationSamples = 0;
+		const CALIBRATION_FRAMES = 60;
+
+		function calibrate() {
+			analyser.getByteFrequencyData(dataArray);
+			calibrationSamples++;
+			for (let i = 0; i < dataArray.length; i++) {
+				const val = dataArray[i] / 255;
+				if (val > noiseFloor[i]) noiseFloor[i] = val;
+			}
+		}
+
+		function getCleanBin(i: number): number {
+			const raw = dataArray[i] / 255;
+			if (calibrationSamples < CALIBRATION_FRAMES) return 0;
+			return Math.max(0, raw - noiseFloor[i] * 1.1);
+		}
+
+		const bandsFor = (count: number, clean: boolean) => {
+			analyser.getByteFrequencyData(dataArray);
+			if (clean && calibrationSamples < CALIBRATION_FRAMES) calibrate();
+			const bands: number[] = [];
+			const binCount = dataArray.length;
+			const voiceSplits = [3, 6, 11, 18, binCount];
+			const splits = count <= voiceSplits.length ? voiceSplits.slice(0, count) : voiceSplits;
+			let start = 1;
+			for (let b = 0; b < splits.length; b++) {
+				const end = splits[b];
+				let sum = 0;
+				for (let i = start; i < end; i++) {
+					sum += clean ? getCleanBin(i) : dataArray[i] / 255;
+				}
+
+				bands.push(sum / (end - start));
+				start = end;
+			}
+
+			return bands;
+		};
+
+		return {
+			calibrate,
+			getVolume: () => {
+				analyser.getByteFrequencyData(dataArray);
+				if (calibrationSamples < CALIBRATION_FRAMES) calibrate();
+				let sum = 0;
+				for (let i = 0; i < dataArray.length; i++) sum += getCleanBin(i);
+				return sum / dataArray.length;
+			},
+			getBands: (count) => bandsFor(count, true),
+			getRawBands: (count) => bandsFor(count, false),
+			cleanup: () => {
+				source.disconnect();
+				for (const track of stream.getTracks()) track.stop();
+			},
+		};
+	} catch {
+		return null;
+	}
+}
+
+let _sharedAudioCtx: any = null;
+
+function getDefaultAudioContext(): any {
+	if (!_sharedAudioCtx || _sharedAudioCtx.state === 'closed') {
+		_sharedAudioCtx = new AudioContext();
+	}
+
+	if (_sharedAudioCtx.state === 'suspended') {
+		void _sharedAudioCtx.resume();
+	}
+
+	return _sharedAudioCtx;
+}
+
+/** Web SpeechRecognition wrapper: start/stop/abort/toggle, interim +
+ *  final transcripts, live mic volume + voice bands via an AudioContext
+ *  analyser with noise-floor calibration. */
+export function useSpeechRecognition(
+	options: UseSpeechRecognitionOptions = {},
+): UseSpeechRecognitionReturn {
+	const {
+		lang,
+		continuous = true,
+		interimResults = true,
+		onTranscript,
+		onResult,
+		onError,
+		onStart,
+		onEnd,
+		audioContext: externalAudioContext,
+		transformTranscript,
+	} = options;
+
+	const getAudioContext = useCallback(
+		() => externalAudioContext ?? getDefaultAudioContext(),
+		[externalAudioContext],
+	);
+
+	const isSupported = useMemo(() => getSpeechRecognition() != null, []);
+	const [isListening, setIsListening] = useState(false);
+	const [isSpeaking, setIsSpeaking] = useState(false);
+	const [volume, setVolume] = useState(0);
+	const [bands, setBands] = useState<number[]>([0, 0, 0, 0, 0]);
+	const [rawBands, setRawBands] = useState<number[]>([0, 0, 0, 0, 0]);
+	const [interimTranscript, setInterimTranscript] = useState('');
+
+	const recognitionRef = useRef<SpeechRecognitionInstance | null>(null);
+	const getAudioContextRef = useRef(getAudioContext);
+	getAudioContextRef.current = getAudioContext;
+	const analyserRef = useRef<VolumeAnalyser | null>(null);
+	const rafRef = useRef(0);
+
+	const callbacksRef = useRef({ onTranscript, onResult, onError, onStart, onEnd, transformTranscript });
+	callbacksRef.current = { onTranscript, onResult, onError, onStart, onEnd, transformTranscript };
+
+	useEffect(
+		() => () => {
+			recognitionRef.current?.abort();
+			recognitionRef.current = null;
+			analyserRef.current?.cleanup();
+			analyserRef.current = null;
+			cancelAnimationFrame(rafRef.current);
+		},
+		[],
+	);
+
+	const startVolumePolling = useCallback(() => {
+		const poll = () => {
+			const a = analyserRef.current;
+			if (a) {
+				setVolume(a.getVolume());
+				setBands(a.getBands(5));
+				setRawBands(a.getRawBands(5));
+			}
+
+			rafRef.current = requestAnimationFrame(poll);
+		};
+
+		rafRef.current = requestAnimationFrame(poll);
+	}, []);
+
+	const stopVolumePolling = useCallback(() => {
+		cancelAnimationFrame(rafRef.current);
+		setVolume(0);
+		setBands([0, 0, 0, 0, 0]);
+		setRawBands([0, 0, 0, 0, 0]);
+		analyserRef.current?.cleanup();
+		analyserRef.current = null;
+	}, []);
+
+	const start = useCallback(() => {
+		const SR = getSpeechRecognition();
+		if (!SR) return;
+		recognitionRef.current?.abort();
+		const recognition = new SR();
+		if (lang) recognition.lang = lang;
+		recognition.continuous = continuous;
+		recognition.interimResults = interimResults;
+
+		recognition.onstart = () => {
+			setIsListening(true);
+			callbacksRef.current.onStart?.();
+			void createVolumeAnalyser(getAudioContextRef.current).then((a) => {
+				if (a) {
+					analyserRef.current = a;
+					startVolumePolling();
+				}
+			});
+		};
+
+		recognition.onend = () => {
+			setIsListening(false);
+			setIsSpeaking(false);
+			setInterimTranscript('');
+			stopVolumePolling();
+			callbacksRef.current.onEnd?.();
+		};
+
+		recognition.onspeechstart = () => setIsSpeaking(true);
+		recognition.onspeechend = () => setIsSpeaking(false);
+
+		recognition.onresult = (event: any) => {
+			let interim = '';
+			for (let i = event.resultIndex; i < event.results.length; i++) {
+				const result = event.results[i];
+				let transcript = result[0].transcript;
+				if (callbacksRef.current.transformTranscript) {
+					transcript = callbacksRef.current.transformTranscript(transcript);
+				}
+
+				if (result.isFinal) {
+					callbacksRef.current.onResult?.(transcript);
+					callbacksRef.current.onTranscript?.(transcript, true);
+					setInterimTranscript('');
+				} else {
+					interim += transcript;
+				}
+			}
+
+			if (interim) {
+				setInterimTranscript(interim);
+				callbacksRef.current.onTranscript?.(interim, false);
+			}
+		};
+
+		recognition.onerror = (event) => {
+			callbacksRef.current.onError?.({ error: event.error, message: event.message });
+		};
+
+		recognition.onnomatch = () => {
+			callbacksRef.current.onError?.({ error: 'no-speech', message: 'No speech detected' });
+		};
+
+		recognitionRef.current = recognition;
+		recognition.start();
+	}, [lang, continuous, interimResults, startVolumePolling, stopVolumePolling]);
+
+	const stop = useCallback(() => {
+		recognitionRef.current?.stop();
+	}, []);
+
+	const abort = useCallback(() => {
+		recognitionRef.current?.abort();
+		stopVolumePolling();
+	}, [stopVolumePolling]);
+
+	const toggle = useCallback(() => {
+		if (isListening) stop();
+		else start();
+	}, [isListening, start, stop]);
+
+	return {
+		isSupported,
+		isListening,
+		isSpeaking,
+		volume,
+		bands,
+		rawBands,
+		interimTranscript,
+		start,
+		stop,
+		abort,
+		toggle,
+	};
+}