@speechos/react 1.0.0 → 1.0.3

package/dist/index.cjs

@@ -56,13 +56,9 @@ function SpeechOSProvider({ config, children }) {
 			stopDictation: () => __speechos_core.speechOS.stopDictation(),
 			edit: (text) => __speechos_core.speechOS.edit(text),
 			stopEdit: () => __speechos_core.speechOS.stopEdit(),
+			command: (commands) => __speechos_core.speechOS.command(commands),
+			stopCommand: () => __speechos_core.speechOS.stopCommand(),
 			cancel: () => __speechos_core.speechOS.cancel(),
-			connect: () => __speechos_core.speechOS.connect(),
-			disconnect: () => __speechos_core.speechOS.disconnect(),
-			enableMicrophone: () => __speechos_core.speechOS.enableMicrophone(),
-			waitUntilReady: () => __speechos_core.speechOS.waitUntilReady(),
-			stopAndGetTranscript: () => __speechos_core.speechOS.stopAndGetTranscript(),
-			stopAndEdit: (originalText) => __speechos_core.speechOS.stopAndEdit(originalText),
 			on: (event, callback) => __speechos_core.events.on(event, callback),
 			off: (event, callback) => {
 				console.warn("SpeechOS: Use the unsubscribe function returned by on() instead of off()");
@@ -212,11 +208,11 @@ function useSpeechOSEvents(event, callback) {
 * @returns Dictation controls and state
 */
 function useDictation() {
-	const { state: state$1, dictate, stopDictation, cancel } = useSpeechOSContext();
+	const { state: state$2, dictate, stopDictation, cancel } = useSpeechOSContext();
 	const [transcript, setTranscript] = (0, react.useState)(null);
 	const [error, setError] = (0, react.useState)(null);
-	const isRecording = state$1.recordingState === "recording";
-	const isProcessing = state$1.recordingState === "processing";
+	const isRecording = state$2.recordingState === "recording";
+	const isProcessing = state$2.recordingState === "processing";
 	const start = (0, react.useCallback)(async () => {
 		setError(null);
 		try {
@@ -292,12 +288,12 @@ function useDictation() {
 * @returns Edit controls and state
 */
 function useEdit() {
-	const { state: state$1, edit, stopEdit, cancel } = useSpeechOSContext();
+	const { state: state$2, edit, stopEdit, cancel } = useSpeechOSContext();
 	const [originalText, setOriginalText] = (0, react.useState)(null);
 	const [result, setResult] = (0, react.useState)(null);
 	const [error, setError] = (0, react.useState)(null);
-	const isEditing = state$1.recordingState === "recording" && state$1.activeAction === "edit";
-	const isProcessing = state$1.recordingState === "processing";
+	const isEditing = state$2.recordingState === "recording" && state$2.activeAction === "edit";
+	const isProcessing = state$2.recordingState === "processing";
 	const start = (0, react.useCallback)(async (textToEdit) => {
 		setError(null);
 		setOriginalText(textToEdit);
@@ -338,92 +334,152 @@ function useEdit() {
 }
 
 //#endregion
-//#region src/hooks/useTranscription.ts
+//#region src/hooks/useCommand.ts
 /**
-* Low-level hook for granular transcription control
+* Simplified hook for voice command workflows
 *
-* Use this when you need fine-grained control over the LiveKit
-* connection lifecycle. For most use cases, prefer useDictation()
-* or useEdit() which provide simpler interfaces.
+* Provides an easy-to-use interface for voice command matching
+* with automatic state management.
 *
 * @example
 * ```tsx
-* function CustomVoiceUI() {
-*   const {
-*     connect,
-*     waitUntilReady,
-*     enableMicrophone,
-*     getTranscript,
-*     disconnect,
-*     isConnected,
-*     isMicEnabled,
-*     recordingState,
-*   } = useTranscription();
-*
-*   const handleRecord = async () => {
-*     // Step 1: Connect to LiveKit
-*     await connect();
+* const commands = [
+*   { name: 'scroll_down', description: 'Scroll the page down' },
+*   { name: 'open_settings', description: 'Open the settings modal' },
+*   {
+*     name: 'search',
+*     description: 'Search for something',
+*     arguments: [{ name: 'query', description: 'The search query' }]
+*   },
+* ];
+*
+* function VoiceCommands() {
+*   const { start, stop, isListening, isProcessing, result, error } = useCommand();
+*
+*   const handleCommand = async () => {
+*     await start(commands);
+*   };
 *
-*     // Step 2: Wait for agent to be ready
-*     await waitUntilReady();
+*   const handleStop = async () => {
+*     const matched = await stop();
+*     if (matched) {
+*       console.log('Matched command:', matched.name, matched.arguments);
+*     }
+*   };
 *
-*     // Step 3: Enable microphone
-*     await enableMicrophone();
+*   return (
+*     <div>
+*       <button onClick={isListening ? handleStop : handleCommand} disabled={isProcessing}>
+*         {isListening ? 'Execute' : 'Say Command'}
+*       </button>
+*       {isProcessing && <span>Processing...</span>}
+*       {result && <p>Command: {result.name}</p>}
+*       {error && <p style={{ color: 'red' }}>{error}</p>}
+*     </div>
+*   );
+* }
+* ```
 *
-*     // ... user speaks ...
+* @returns Command controls and state
+*/
+function useCommand() {
+	const { state: state$2, command, stopCommand } = useSpeechOSContext();
+	const [result, setResult] = (0, react.useState)(null);
+	const [error, setError] = (0, react.useState)(null);
+	const isListening = state$2.recordingState === "recording" && state$2.activeAction === "command";
+	const isProcessing = state$2.recordingState === "processing";
+	const start = (0, react.useCallback)(async (commands) => {
+		setError(null);
+		try {
+			await command(commands);
+		} catch (err) {
+			const message = err instanceof Error ? err.message : "Failed to start command";
+			setError(message);
+		}
+	}, [command]);
+	const stop = (0, react.useCallback)(async () => {
+		try {
+			const commandResult = await stopCommand();
+			setResult(commandResult);
+			setError(null);
+			return commandResult;
+		} catch (err) {
+			const message = err instanceof Error ? err.message : "Failed to process command";
+			setError(message);
+			throw err;
+		}
+	}, [stopCommand]);
+	const clear = (0, react.useCallback)(() => {
+		setResult(null);
+		setError(null);
+	}, []);
+	return {
+		start,
+		stop,
+		isListening,
+		isProcessing,
+		result,
+		error,
+		clear
+	};
+}
+
+//#endregion
+//#region src/hooks/useSpeechOSWidget.ts
+/**
+* Hook for programmatic widget control
 *
-*     // Step 4: Get transcript
-*     const text = await getTranscript();
-*     console.log('Transcribed:', text);
+* Use this hook when you want to control the widget manually instead of
+* relying on automatic form field detection.
 *
-*     // Step 5: Cleanup
-*     await disconnect();
-*   };
+* @example
+* ```tsx
+* function MyComponent() {
+*   const { showFor, hide, isVisible } = useSpeechOSWidget();
+*   const textareaRef = useRef<HTMLTextAreaElement>(null);
 *
 *   return (
 *     <div>
-*       <p>Connected: {isConnected ? 'Yes' : 'No'}</p>
-*       <p>Mic: {isMicEnabled ? 'On' : 'Off'}</p>
-*       <p>State: {recordingState}</p>
-*       <button onClick={handleRecord}>Record</button>
+*       <textarea ref={textareaRef} />
+*       <button onClick={() => showFor(textareaRef.current!)}>
+*         Enable Voice Input
+*       </button>
+*       {isVisible && (
+*         <button onClick={hide}>Hide Widget</button>
+*       )}
 *     </div>
 *   );
 * }
 * ```
-*
-* @returns Low-level transcription controls and state
 */
-function useTranscription() {
-	const { state: state$1, connect: contextConnect, waitUntilReady: contextWaitUntilReady, enableMicrophone: contextEnableMicrophone, stopAndGetTranscript, stopAndEdit, disconnect: contextDisconnect, cancel } = useSpeechOSContext();
-	const connect = (0, react.useCallback)(async () => {
-		await contextConnect();
-	}, [contextConnect]);
-	const waitUntilReady = (0, react.useCallback)(async () => {
-		await contextWaitUntilReady();
-	}, [contextWaitUntilReady]);
-	const enableMicrophone = (0, react.useCallback)(async () => {
-		await contextEnableMicrophone();
-	}, [contextEnableMicrophone]);
-	const getTranscript = (0, react.useCallback)(async () => {
-		return await stopAndGetTranscript();
-	}, [stopAndGetTranscript]);
-	const getEdit = (0, react.useCallback)(async (originalText) => {
-		return await stopAndEdit(originalText);
-	}, [stopAndEdit]);
-	const disconnect = (0, react.useCallback)(async () => {
-		await contextDisconnect();
-	}, [contextDisconnect]);
+function useSpeechOSWidget() {
+	const speechOSState = useSpeechOSState();
+	const showFor = (0, react.useCallback)((element) => {
+		__speechos_core.state.setFocusedElement(element);
+		__speechos_core.state.show();
+	}, []);
+	const attachTo = (0, react.useCallback)((element) => {
+		__speechos_core.state.setFocusedElement(element);
+		__speechos_core.state.show();
+	}, []);
+	const detach = (0, react.useCallback)(() => {
+		__speechos_core.state.setFocusedElement(null);
+	}, []);
+	const show = (0, react.useCallback)(() => {
+		__speechos_core.state.show();
+	}, []);
+	const hide = (0, react.useCallback)(() => {
+		__speechos_core.state.hide();
+	}, []);
 	return {
-		connect,
-		waitUntilReady,
-		enableMicrophone,
-		getTranscript,
-		getEdit,
-		disconnect,
-		cancel,
-		isConnected: state$1.isConnected,
-		isMicEnabled: state$1.isMicEnabled,
-		recordingState: state$1.recordingState
+		showFor,
+		attachTo,
+		detach,
+		show,
+		hide,
+		isVisible: speechOSState.isVisible,
+		isExpanded: speechOSState.isExpanded,
+		focusedElement: speechOSState.focusedElement
 	};
 }
 
@@ -457,7 +513,7 @@ function useTranscription() {
 * }
 * ```
 */
-function SpeechOSWidget({ apiKey, userId, position = "bottom-center", host, zIndex, debug, onTranscription, onEdit, onError, onShow, onHide, className }) {
+function SpeechOSWidget({ apiKey, userId, host, zIndex, debug, onTranscription, onEdit, onError, onShow, onHide, className }) {
 	const containerRef = (0, react.useRef)(null);
 	const widgetRef = (0, react.useRef)(null);
 	const { init, isInitialized } = useSpeechOSContext();
@@ -466,8 +522,6 @@ function SpeechOSWidget({ apiKey, userId, position = "bottom-center", host, zInd
 			apiKey,
 			userId,
 			host,
-			position,
-			zIndex,
 			debug
 		});
 	}, [
@@ -476,8 +530,6 @@ function SpeechOSWidget({ apiKey, userId, position = "bottom-center", host, zInd
 		apiKey,
 		userId,
 		host,
-		position,
-		zIndex,
 		debug
 	]);
 	(0, react.useEffect)(() => {
@@ -515,7 +567,6 @@ function SpeechOSWidget({ apiKey, userId, position = "bottom-center", host, zInd
 			return;
 		}
 		const widget = document.createElement("speechos-widget");
-		widget.setAttribute("position", position);
 		containerRef.current.appendChild(widget);
 		widgetRef.current = widget;
 		return () => {
@@ -524,7 +575,7 @@ function SpeechOSWidget({ apiKey, userId, position = "bottom-center", host, zInd
 				widgetRef.current = null;
 			}
 		};
-	}, [position]);
+	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: containerRef,
 		className,
@@ -541,10 +592,11 @@ exports.SpeechOSContext = SpeechOSContext;
 exports.SpeechOSProvider = SpeechOSProvider;
 exports.SpeechOSWidget = SpeechOSWidget;
 exports.VERSION = VERSION;
+exports.useCommand = useCommand;
 exports.useDictation = useDictation;
 exports.useEdit = useEdit;
 exports.useSpeechOS = useSpeechOS;
 exports.useSpeechOSContext = useSpeechOSContext;
 exports.useSpeechOSEvents = useSpeechOSEvents;
 exports.useSpeechOSState = useSpeechOSState;
-exports.useTranscription = useTranscription;
+exports.useSpeechOSWidget = useSpeechOSWidget;

package/dist/index.d.cts

@@ -35,25 +35,10 @@
  * }
  * ```
  *
- * @example Low-level usage
- * ```tsx
- * import { useSpeechOS } from '@speechos/react';
- *
- * function CustomUI() {
- *   const { connect, waitUntilReady, enableMicrophone, stopAndGetTranscript } = useSpeechOS();
- *
- *   const handleRecord = async () => {
- *     await connect();
- *     await waitUntilReady();
- *     await enableMicrophone();
- *     // ... recording ...
- *     const text = await stopAndGetTranscript();
- *   };
- * }
- * ```
  */
-export { SpeechOSProvider, SpeechOSContext, useSpeechOSContext, type SpeechOSContextValue, type SpeechOSProviderProps, } from "./context.js";
-export { useSpeechOS, useSpeechOSState, useSpeechOSEvents, useDictation, useEdit, useTranscription, type UseDictationResult, type UseEditResult, type UseTranscriptionResult, } from "./hooks/index.js";
-export { SpeechOSWidget, type SpeechOSWidgetProps } from "./components/index.js";
-export type { SpeechOSConfig, SpeechOSState, SpeechOSAction, SpeechOSEventMap, RecordingState, UnsubscribeFn, } from "@speechos/core";
+export { SpeechOSProvider, SpeechOSContext, useSpeechOSContext, type SpeechOSContextValue, type SpeechOSProviderProps, type SpeechOSReactConfig, } from "./context.js";
+export { useSpeechOS, useSpeechOSState, useSpeechOSEvents, useDictation, useEdit, useCommand, useSpeechOSWidget, type UseDictationResult, type UseEditResult, type UseCommandResult, type UseSpeechOSWidgetResult, } from "./hooks/index.js";
+export { SpeechOSWidget, type SpeechOSWidgetProps, } from "./components/index.js";
+export type { SpeechOSCoreConfig, SpeechOSState, SpeechOSAction, SpeechOSEventMap, RecordingState, UnsubscribeFn, CommandArgument, CommandDefinition, CommandResult, } from "@speechos/core";
+export type { SpeechOSCoreConfig as SpeechOSConfig } from "@speechos/core";
 export declare const VERSION = "0.1.0";

package/dist/index.d.ts

@@ -35,25 +35,10 @@
  * }
  * ```
  *
- * @example Low-level usage
- * ```tsx
- * import { useSpeechOS } from '@speechos/react';
- *
- * function CustomUI() {
- *   const { connect, waitUntilReady, enableMicrophone, stopAndGetTranscript } = useSpeechOS();
- *
- *   const handleRecord = async () => {
- *     await connect();
- *     await waitUntilReady();
- *     await enableMicrophone();
- *     // ... recording ...
- *     const text = await stopAndGetTranscript();
- *   };
- * }
- * ```
  */
-export { SpeechOSProvider, SpeechOSContext, useSpeechOSContext, type SpeechOSContextValue, type SpeechOSProviderProps, } from "./context.js";
-export { useSpeechOS, useSpeechOSState, useSpeechOSEvents, useDictation, useEdit, useTranscription, type UseDictationResult, type UseEditResult, type UseTranscriptionResult, } from "./hooks/index.js";
-export { SpeechOSWidget, type SpeechOSWidgetProps } from "./components/index.js";
-export type { SpeechOSConfig, SpeechOSState, SpeechOSAction, SpeechOSEventMap, RecordingState, UnsubscribeFn, } from "@speechos/core";
+export { SpeechOSProvider, SpeechOSContext, useSpeechOSContext, type SpeechOSContextValue, type SpeechOSProviderProps, type SpeechOSReactConfig, } from "./context.js";
+export { useSpeechOS, useSpeechOSState, useSpeechOSEvents, useDictation, useEdit, useCommand, useSpeechOSWidget, type UseDictationResult, type UseEditResult, type UseCommandResult, type UseSpeechOSWidgetResult, } from "./hooks/index.js";
+export { SpeechOSWidget, type SpeechOSWidgetProps, } from "./components/index.js";
+export type { SpeechOSCoreConfig, SpeechOSState, SpeechOSAction, SpeechOSEventMap, RecordingState, UnsubscribeFn, CommandArgument, CommandDefinition, CommandResult, } from "@speechos/core";
+export type { SpeechOSCoreConfig as SpeechOSConfig } from "@speechos/core";
 export declare const VERSION = "0.1.0";

package/dist/index.js

@@ -33,13 +33,9 @@ function SpeechOSProvider({ config, children }) {
 			stopDictation: () => speechOS.stopDictation(),
 			edit: (text) => speechOS.edit(text),
 			stopEdit: () => speechOS.stopEdit(),
+			command: (commands) => speechOS.command(commands),
+			stopCommand: () => speechOS.stopCommand(),
 			cancel: () => speechOS.cancel(),
-			connect: () => speechOS.connect(),
-			disconnect: () => speechOS.disconnect(),
-			enableMicrophone: () => speechOS.enableMicrophone(),
-			waitUntilReady: () => speechOS.waitUntilReady(),
-			stopAndGetTranscript: () => speechOS.stopAndGetTranscript(),
-			stopAndEdit: (originalText) => speechOS.stopAndEdit(originalText),
 			on: (event, callback) => events.on(event, callback),
 			off: (event, callback) => {
 				console.warn("SpeechOS: Use the unsubscribe function returned by on() instead of off()");
@@ -315,92 +311,152 @@ function useEdit() {
 }
 
 //#endregion
-//#region src/hooks/useTranscription.ts
+//#region src/hooks/useCommand.ts
 /**
-* Low-level hook for granular transcription control
+* Simplified hook for voice command workflows
 *
-* Use this when you need fine-grained control over the LiveKit
-* connection lifecycle. For most use cases, prefer useDictation()
-* or useEdit() which provide simpler interfaces.
+* Provides an easy-to-use interface for voice command matching
+* with automatic state management.
 *
 * @example
 * ```tsx
-* function CustomVoiceUI() {
-*   const {
-*     connect,
-*     waitUntilReady,
-*     enableMicrophone,
-*     getTranscript,
-*     disconnect,
-*     isConnected,
-*     isMicEnabled,
-*     recordingState,
-*   } = useTranscription();
-*
-*   const handleRecord = async () => {
-*     // Step 1: Connect to LiveKit
-*     await connect();
+* const commands = [
+*   { name: 'scroll_down', description: 'Scroll the page down' },
+*   { name: 'open_settings', description: 'Open the settings modal' },
+*   {
+*     name: 'search',
+*     description: 'Search for something',
+*     arguments: [{ name: 'query', description: 'The search query' }]
+*   },
+* ];
+*
+* function VoiceCommands() {
+*   const { start, stop, isListening, isProcessing, result, error } = useCommand();
+*
+*   const handleCommand = async () => {
+*     await start(commands);
+*   };
 *
-*     // Step 2: Wait for agent to be ready
-*     await waitUntilReady();
+*   const handleStop = async () => {
+*     const matched = await stop();
+*     if (matched) {
+*       console.log('Matched command:', matched.name, matched.arguments);
+*     }
+*   };
 *
-*     // Step 3: Enable microphone
-*     await enableMicrophone();
+*   return (
+*     <div>
+*       <button onClick={isListening ? handleStop : handleCommand} disabled={isProcessing}>
+*         {isListening ? 'Execute' : 'Say Command'}
+*       </button>
+*       {isProcessing && <span>Processing...</span>}
+*       {result && <p>Command: {result.name}</p>}
+*       {error && <p style={{ color: 'red' }}>{error}</p>}
+*     </div>
+*   );
+* }
+* ```
 *
-*     // ... user speaks ...
+* @returns Command controls and state
+*/
+function useCommand() {
+	const { state: state$1, command, stopCommand } = useSpeechOSContext();
+	const [result, setResult] = useState(null);
+	const [error, setError] = useState(null);
+	const isListening = state$1.recordingState === "recording" && state$1.activeAction === "command";
+	const isProcessing = state$1.recordingState === "processing";
+	const start = useCallback(async (commands) => {
+		setError(null);
+		try {
+			await command(commands);
+		} catch (err) {
+			const message = err instanceof Error ? err.message : "Failed to start command";
+			setError(message);
+		}
+	}, [command]);
+	const stop = useCallback(async () => {
+		try {
+			const commandResult = await stopCommand();
+			setResult(commandResult);
+			setError(null);
+			return commandResult;
+		} catch (err) {
+			const message = err instanceof Error ? err.message : "Failed to process command";
+			setError(message);
+			throw err;
+		}
+	}, [stopCommand]);
+	const clear = useCallback(() => {
+		setResult(null);
+		setError(null);
+	}, []);
+	return {
+		start,
+		stop,
+		isListening,
+		isProcessing,
+		result,
+		error,
+		clear
+	};
+}
+
+//#endregion
+//#region src/hooks/useSpeechOSWidget.ts
+/**
+* Hook for programmatic widget control
 *
-*     // Step 4: Get transcript
-*     const text = await getTranscript();
-*     console.log('Transcribed:', text);
+* Use this hook when you want to control the widget manually instead of
+* relying on automatic form field detection.
 *
-*     // Step 5: Cleanup
-*     await disconnect();
-*   };
+* @example
+* ```tsx
+* function MyComponent() {
+*   const { showFor, hide, isVisible } = useSpeechOSWidget();
+*   const textareaRef = useRef<HTMLTextAreaElement>(null);
 *
 *   return (
 *     <div>
-*       <p>Connected: {isConnected ? 'Yes' : 'No'}</p>
-*       <p>Mic: {isMicEnabled ? 'On' : 'Off'}</p>
-*       <p>State: {recordingState}</p>
-*       <button onClick={handleRecord}>Record</button>
+*       <textarea ref={textareaRef} />
+*       <button onClick={() => showFor(textareaRef.current!)}>
+*         Enable Voice Input
+*       </button>
+*       {isVisible && (
+*         <button onClick={hide}>Hide Widget</button>
+*       )}
 *     </div>
 *   );
 * }
 * ```
-*
-* @returns Low-level transcription controls and state
 */
-function useTranscription() {
-	const { state: state$1, connect: contextConnect, waitUntilReady: contextWaitUntilReady, enableMicrophone: contextEnableMicrophone, stopAndGetTranscript, stopAndEdit, disconnect: contextDisconnect, cancel } = useSpeechOSContext();
-	const connect = useCallback(async () => {
-		await contextConnect();
-	}, [contextConnect]);
-	const waitUntilReady = useCallback(async () => {
-		await contextWaitUntilReady();
-	}, [contextWaitUntilReady]);
-	const enableMicrophone = useCallback(async () => {
-		await contextEnableMicrophone();
-	}, [contextEnableMicrophone]);
-	const getTranscript = useCallback(async () => {
-		return await stopAndGetTranscript();
-	}, [stopAndGetTranscript]);
-	const getEdit = useCallback(async (originalText) => {
-		return await stopAndEdit(originalText);
-	}, [stopAndEdit]);
-	const disconnect = useCallback(async () => {
-		await contextDisconnect();
-	}, [contextDisconnect]);
+function useSpeechOSWidget() {
+	const speechOSState = useSpeechOSState();
+	const showFor = useCallback((element) => {
+		state.setFocusedElement(element);
+		state.show();
+	}, []);
+	const attachTo = useCallback((element) => {
+		state.setFocusedElement(element);
+		state.show();
+	}, []);
+	const detach = useCallback(() => {
+		state.setFocusedElement(null);
+	}, []);
+	const show = useCallback(() => {
+		state.show();
+	}, []);
+	const hide = useCallback(() => {
+		state.hide();
+	}, []);
 	return {
-		connect,
-		waitUntilReady,
-		enableMicrophone,
-		getTranscript,
-		getEdit,
-		disconnect,
-		cancel,
-		isConnected: state$1.isConnected,
-		isMicEnabled: state$1.isMicEnabled,
-		recordingState: state$1.recordingState
+		showFor,
+		attachTo,
+		detach,
+		show,
+		hide,
+		isVisible: speechOSState.isVisible,
+		isExpanded: speechOSState.isExpanded,
+		focusedElement: speechOSState.focusedElement
 	};
 }
 
@@ -434,7 +490,7 @@ function useTranscription() {
 * }
 * ```
 */
-function SpeechOSWidget({ apiKey, userId, position = "bottom-center", host, zIndex, debug, onTranscription, onEdit, onError, onShow, onHide, className }) {
+function SpeechOSWidget({ apiKey, userId, host, zIndex, debug, onTranscription, onEdit, onError, onShow, onHide, className }) {
 	const containerRef = useRef(null);
 	const widgetRef = useRef(null);
 	const { init, isInitialized } = useSpeechOSContext();
@@ -443,8 +499,6 @@ function SpeechOSWidget({ apiKey, userId, position = "bottom-center", host, zInd
 			apiKey,
 			userId,
 			host,
-			position,
-			zIndex,
 			debug
 		});
 	}, [
@@ -453,8 +507,6 @@ function SpeechOSWidget({ apiKey, userId, position = "bottom-center", host, zInd
 		apiKey,
 		userId,
 		host,
-		position,
-		zIndex,
 		debug
 	]);
 	useEffect(() => {
@@ -492,7 +544,6 @@ function SpeechOSWidget({ apiKey, userId, position = "bottom-center", host, zInd
 			return;
 		}
 		const widget = document.createElement("speechos-widget");
-		widget.setAttribute("position", position);
 		containerRef.current.appendChild(widget);
 		widgetRef.current = widget;
 		return () => {
@@ -501,7 +552,7 @@ function SpeechOSWidget({ apiKey, userId, position = "bottom-center", host, zInd
 				widgetRef.current = null;
 			}
 		};
-	}, [position]);
+	}, []);
 	return /* @__PURE__ */ jsx("div", {
 		ref: containerRef,
 		className,
@@ -514,4 +565,4 @@ function SpeechOSWidget({ apiKey, userId, position = "bottom-center", host, zInd
 const VERSION = "0.1.0";
 
 //#endregion
-export { SpeechOSContext, SpeechOSProvider, SpeechOSWidget, VERSION, useDictation, useEdit, useSpeechOS, useSpeechOSContext, useSpeechOSEvents, useSpeechOSState, useTranscription };
+export { SpeechOSContext, SpeechOSProvider, SpeechOSWidget, VERSION, useCommand, useDictation, useEdit, useSpeechOS, useSpeechOSContext, useSpeechOSEvents, useSpeechOSState, useSpeechOSWidget };