cursor-buddy 0.0.1

package/dist/client/index.mjs

@@ -0,0 +1,1123 @@
+"use client";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useActor } from "@xstate/react";
+import { useStore } from "@nanostores/react";
+import { assign, setup } from "xstate";
+import { atom } from "nanostores";
+import html2canvas from "html2canvas-pro";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/client/context.ts
+const CursorBuddyContext = createContext(null);
+//#endregion
+//#region src/core/machine.ts
+/**
+* XState machine for the voice interaction flow.
+*
+* States: idle → listening → processing → responding → idle
+*
+* This enforces valid state transitions and provides hooks for
+* actions (start/stop mic, capture screenshot, play TTS, etc.)
+*/
+const cursorBuddyMachine = setup({
+	types: {
+		context: {},
+		events: {}
+	},
+	actions: {
+		clearTranscript: assign({ transcript: "" }),
+		clearResponse: assign({ response: "" }),
+		clearError: assign({ error: null }),
+		setTranscript: assign(({ event }) => {
+			if (event.type === "TRANSCRIPTION_COMPLETE") return { transcript: event.transcript };
+			return {};
+		}),
+		setResponse: assign(({ event }) => {
+			if (event.type === "AI_RESPONSE_COMPLETE") return { response: event.response };
+			return {};
+		}),
+		appendResponseChunk: assign(({ context, event }) => {
+			if (event.type === "AI_RESPONSE_CHUNK") return { response: context.response + event.text };
+			return {};
+		}),
+		setError: assign(({ event }) => {
+			if (event.type === "ERROR") return { error: event.error };
+			return {};
+		})
+	}
+}).createMachine({
+	id: "cursorBuddy",
+	initial: "idle",
+	context: {
+		transcript: "",
+		response: "",
+		error: null
+	},
+	states: {
+		idle: {
+			entry: ["clearError"],
+			on: { HOTKEY_PRESSED: {
+				target: "listening",
+				actions: ["clearTranscript", "clearResponse"]
+			} }
+		},
+		listening: { on: {
+			HOTKEY_RELEASED: { target: "processing" },
+			CANCEL: { target: "idle" },
+			ERROR: {
+				target: "idle",
+				actions: ["setError"]
+			}
+		} },
+		processing: { on: {
+			TRANSCRIPTION_COMPLETE: { actions: ["setTranscript"] },
+			AI_RESPONSE_CHUNK: { actions: ["appendResponseChunk"] },
+			AI_RESPONSE_COMPLETE: {
+				target: "responding",
+				actions: ["setResponse"]
+			},
+			ERROR: {
+				target: "idle",
+				actions: ["setError"]
+			},
+			CANCEL: { target: "idle" }
+		} },
+		responding: { on: {
+			TTS_COMPLETE: { target: "idle" },
+			POINTING_COMPLETE: {},
+			CANCEL: { target: "idle" },
+			ERROR: {
+				target: "idle",
+				actions: ["setError"]
+			}
+		} }
+	}
+});
+//#endregion
+//#region src/core/atoms.ts
+/**
+* Nanostores atoms for reactive values that don't need state machine semantics.
+* These update frequently (e.g., 60fps audio levels) and are framework-agnostic.
+*/
+const $audioLevel = atom(0);
+const $cursorPosition = atom({
+	x: 0,
+	y: 0
+});
+const $buddyPosition = atom({
+	x: 0,
+	y: 0
+});
+const $buddyRotation = atom(0);
+const $buddyScale = atom(1);
+const $pointingTarget = atom(null);
+const $isEnabled = atom(true);
+const $isSpeaking = atom(false);
+const $conversationHistory = atom([]);
+//#endregion
+//#region src/core/pointing.ts
+/**
+* Parses [POINT:x,y:label] tags from AI responses.
+* Format matches the Swift Clicky app for consistency.
+*/
+const POINTING_TAG_REGEX = /\[POINT:(\d+),(\d+):([^\]]+)\]\s*$/;
+/**
+* Extract pointing target from response text.
+* Returns null if no valid POINT tag is found at the end.
+*/
+function parsePointingTag(response) {
+	const match = response.match(POINTING_TAG_REGEX);
+	if (!match) return null;
+	return {
+		x: parseInt(match[1], 10),
+		y: parseInt(match[2], 10),
+		label: match[3].trim()
+	};
+}
+/**
+* Remove POINT tag from response text for display/TTS.
+*/
+function stripPointingTag(response) {
+	return response.replace(POINTING_TAG_REGEX, "").trim();
+}
+//#endregion
+//#region src/core/bezier.ts
+/**
+* Bezier flight animation for cursor pointing.
+*/
+/**
+* Quadratic bezier curve: B(t) = (1-t)²P₀ + 2(1-t)t·P₁ + t²P₂
+*/
+function quadraticBezier(p0, p1, p2, t) {
+	const oneMinusT = 1 - t;
+	return {
+		x: oneMinusT * oneMinusT * p0.x + 2 * oneMinusT * t * p1.x + t * t * p2.x,
+		y: oneMinusT * oneMinusT * p0.y + 2 * oneMinusT * t * p1.y + t * t * p2.y
+	};
+}
+/**
+* Bezier tangent (derivative): B'(t) = 2(1-t)(P₁-P₀) + 2t(P₂-P₁)
+*/
+function bezierTangent(p0, p1, p2, t) {
+	const oneMinusT = 1 - t;
+	return {
+		x: 2 * oneMinusT * (p1.x - p0.x) + 2 * t * (p2.x - p1.x),
+		y: 2 * oneMinusT * (p1.y - p0.y) + 2 * t * (p2.y - p1.y)
+	};
+}
+/**
+* Ease-in-out cubic for smooth acceleration/deceleration
+*/
+function easeInOutCubic(t) {
+	return t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+/**
+* Animate cursor along a parabolic bezier arc from start to end.
+* Used when the AI points at a UI element.
+*
+* @param from - Starting position
+* @param to - Target position
+* @param durationMs - Flight duration in milliseconds
+* @param callbacks - Frame and completion callbacks
+* @returns Cancel function to stop the animation
+*/
+function animateBezierFlight(from, to, durationMs, callbacks) {
+	const startTime = performance.now();
+	const distance = Math.hypot(to.x - from.x, to.y - from.y);
+	const controlPoint = {
+		x: (from.x + to.x) / 2,
+		y: Math.min(from.y, to.y) - distance * .2
+	};
+	let animationFrameId;
+	function animate(now) {
+		const elapsed = now - startTime;
+		const linearProgress = Math.min(elapsed / durationMs, 1);
+		const easedProgress = easeInOutCubic(linearProgress);
+		const position = quadraticBezier(from, controlPoint, to, easedProgress);
+		const tangent = bezierTangent(from, controlPoint, to, easedProgress);
+		const rotation = Math.atan2(tangent.y, tangent.x);
+		const scale = 1 + Math.sin(linearProgress * Math.PI) * .3;
+		callbacks.onFrame(position, rotation, scale);
+		if (linearProgress < 1) animationFrameId = requestAnimationFrame(animate);
+		else callbacks.onComplete();
+	}
+	animationFrameId = requestAnimationFrame(animate);
+	return () => cancelAnimationFrame(animationFrameId);
+}
+//#endregion
+//#region src/client/utils/audio-worklet.ts
+/**
+* AudioWorklet processor code for voice capture.
+* Inlined as a blob URL to avoid separate file serving requirements.
+*/
+const workletCode = `
+class AudioCaptureProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super()
+    this.isRecording = true
+  }
+
+  process(inputs) {
+    if (!this.isRecording) return false
+
+    const input = inputs[0]
+    if (input && input.length > 0) {
+      const channelData = input[0]
+
+      // Send audio data to main thread
+      this.port.postMessage({
+        type: "audio",
+        data: new Float32Array(channelData)
+      })
+
+      // Calculate RMS for audio level visualization
+      let sum = 0
+      for (let i = 0; i < channelData.length; i++) {
+        sum += channelData[i] * channelData[i]
+      }
+      const rms = Math.sqrt(sum / channelData.length)
+      this.port.postMessage({ type: "level", rms })
+    }
+
+    return true
+  }
+}
+
+registerProcessor("audio-capture-processor", AudioCaptureProcessor)
+`;
+let cachedBlobURL = null;
+/**
+* Create a blob URL for the audio worklet processor.
+* Caches the URL to avoid creating multiple blobs.
+*/
+function createWorkletBlobURL() {
+	if (!cachedBlobURL) {
+		const blob = new Blob([workletCode], { type: "application/javascript" });
+		cachedBlobURL = URL.createObjectURL(blob);
+	}
+	return cachedBlobURL;
+}
+//#endregion
+//#region src/client/utils/audio.ts
+/**
+* Audio conversion utilities for voice capture.
+* Converts Float32 audio data to WAV format for server transcription.
+*/
+/**
+* Merge multiple Float32Array chunks into a single array
+*/
+function mergeAudioChunks(chunks) {
+	const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
+	const result = new Float32Array(totalLength);
+	let offset = 0;
+	for (const chunk of chunks) {
+		result.set(chunk, offset);
+		offset += chunk.length;
+	}
+	return result;
+}
+/**
+* Convert Float32 audio data to 16-bit PCM
+*/
+function floatTo16BitPCM(output, offset, input) {
+	for (let i = 0; i < input.length; i++, offset += 2) {
+		const sample = Math.max(-1, Math.min(1, input[i]));
+		output.setInt16(offset, sample < 0 ? sample * 32768 : sample * 32767, true);
+	}
+}
+/**
+* Write a string to a DataView
+*/
+function writeString(view, offset, string) {
+	for (let i = 0; i < string.length; i++) view.setUint8(offset + i, string.charCodeAt(i));
+}
+/**
+* Encode Float32 audio data as a WAV file
+*/
+function encodeWAV(samples, sampleRate) {
+	const numChannels = 1;
+	const bitsPerSample = 16;
+	const bytesPerSample = bitsPerSample / 8;
+	const blockAlign = numChannels * bytesPerSample;
+	const dataLength = samples.length * bytesPerSample;
+	const buffer = new ArrayBuffer(44 + dataLength);
+	const view = new DataView(buffer);
+	writeString(view, 0, "RIFF");
+	view.setUint32(4, 36 + dataLength, true);
+	writeString(view, 8, "WAVE");
+	writeString(view, 12, "fmt ");
+	view.setUint32(16, 16, true);
+	view.setUint16(20, 1, true);
+	view.setUint16(22, numChannels, true);
+	view.setUint32(24, sampleRate, true);
+	view.setUint32(28, sampleRate * blockAlign, true);
+	view.setUint16(32, blockAlign, true);
+	view.setUint16(34, bitsPerSample, true);
+	writeString(view, 36, "data");
+	view.setUint32(40, dataLength, true);
+	floatTo16BitPCM(view, 44, samples);
+	return new Blob([buffer], { type: "audio/wav" });
+}
+//#endregion
+//#region src/client/hooks/useVoiceCapture.ts
+const SAMPLE_RATE = 16e3;
+const AUDIO_LEVEL_BOOST = 10.2;
+/**
+* Hook for voice capture using AudioWorkletNode.
+* Updates $audioLevel atom for waveform visualization.
+*/
+function useVoiceCapture() {
+	const [isRecording, setIsRecording] = useState(false);
+	const [error, setError] = useState(null);
+	const audioContextRef = useRef(null);
+	const workletNodeRef = useRef(null);
+	const streamRef = useRef(null);
+	const chunksRef = useRef([]);
+	return {
+		start: useCallback(async () => {
+			setError(null);
+			chunksRef.current = [];
+			try {
+				const stream = await navigator.mediaDevices.getUserMedia({ audio: {
+					sampleRate: SAMPLE_RATE,
+					channelCount: 1,
+					echoCancellation: true,
+					noiseSuppression: true
+				} });
+				streamRef.current = stream;
+				const audioContext = new AudioContext({ sampleRate: SAMPLE_RATE });
+				audioContextRef.current = audioContext;
+				const workletURL = createWorkletBlobURL();
+				await audioContext.audioWorklet.addModule(workletURL);
+				const source = audioContext.createMediaStreamSource(stream);
+				const workletNode = new AudioWorkletNode(audioContext, "audio-capture-processor");
+				workletNodeRef.current = workletNode;
+				workletNode.port.onmessage = (event) => {
+					const { type, data, rms } = event.data;
+					if (type === "audio") chunksRef.current.push(data);
+					else if (type === "level") {
+						const boostedLevel = Math.min(rms * AUDIO_LEVEL_BOOST, 1);
+						$audioLevel.set(boostedLevel);
+					}
+				};
+				source.connect(workletNode);
+				setIsRecording(true);
+			} catch (err) {
+				const captureError = err instanceof Error ? err : /* @__PURE__ */ new Error("Microphone access failed");
+				setError(captureError);
+				throw captureError;
+			}
+		}, []),
+		stop: useCallback(async () => {
+			if (streamRef.current) {
+				streamRef.current.getTracks().forEach((track) => track.stop());
+				streamRef.current = null;
+			}
+			if (workletNodeRef.current) {
+				workletNodeRef.current.disconnect();
+				workletNodeRef.current = null;
+			}
+			if (audioContextRef.current) {
+				await audioContextRef.current.close();
+				audioContextRef.current = null;
+			}
+			$audioLevel.set(0);
+			const wavBlob = encodeWAV(mergeAudioChunks(chunksRef.current), SAMPLE_RATE);
+			chunksRef.current = [];
+			setIsRecording(false);
+			return wavBlob;
+		}, []),
+		isRecording,
+		error
+	};
+}
+//#endregion
+//#region src/client/utils/screenshot.ts
+const MAX_WIDTH = 1280;
+function getCaptureMetrics() {
+	return {
+		viewportWidth: window.innerWidth,
+		viewportHeight: window.innerHeight
+	};
+}
+/**
+* Resize canvas to max width while maintaining aspect ratio
+*/
+function resizeCanvas(canvas, maxWidth) {
+	if (canvas.width <= maxWidth) return canvas;
+	const scale = maxWidth / canvas.width;
+	const resized = document.createElement("canvas");
+	resized.width = maxWidth;
+	resized.height = Math.round(canvas.height * scale);
+	const ctx = resized.getContext("2d");
+	if (ctx) ctx.drawImage(canvas, 0, 0, resized.width, resized.height);
+	return resized;
+}
+/**
+* Create a fallback canvas when screenshot capture fails.
+* Returns a simple gray canvas with an error message.
+*/
+function createFallbackCanvas() {
+	const canvas = document.createElement("canvas");
+	canvas.width = Math.min(window.innerWidth, MAX_WIDTH);
+	canvas.height = Math.round(window.innerHeight / window.innerWidth * canvas.width);
+	const ctx = canvas.getContext("2d");
+	if (ctx) {
+		ctx.fillStyle = "#f0f0f0";
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = "#666";
+		ctx.font = "16px sans-serif";
+		ctx.textAlign = "center";
+		ctx.fillText("Screenshot unavailable", canvas.width / 2, canvas.height / 2);
+	}
+	return canvas;
+}
+/**
+* Capture a screenshot of the current viewport.
+* Uses html2canvas to render the DOM to a canvas, then exports as JPEG.
+* Falls back to a placeholder if capture fails (e.g., due to unsupported CSS).
+*/
+async function captureViewport() {
+	const captureMetrics = getCaptureMetrics();
+	let canvas;
+	try {
+		canvas = await html2canvas(document.body, {
+			scale: 1,
+			useCORS: true,
+			logging: false,
+			width: captureMetrics.viewportWidth,
+			height: captureMetrics.viewportHeight,
+			x: window.scrollX,
+			y: window.scrollY
+		});
+	} catch (err) {
+		canvas = createFallbackCanvas();
+	}
+	const resized = resizeCanvas(canvas, MAX_WIDTH);
+	return {
+		imageData: resized.toDataURL("image/jpeg", .8),
+		width: resized.width,
+		height: resized.height,
+		viewportWidth: captureMetrics.viewportWidth,
+		viewportHeight: captureMetrics.viewportHeight
+	};
+}
+//#endregion
+//#region src/client/hooks/useScreenCapture.ts
+/**
+* Hook for capturing viewport screenshots.
+*/
+function useScreenCapture() {
+	const [isCapturing, setIsCapturing] = useState(false);
+	const [lastCapture, setLastCapture] = useState(null);
+	const [error, setError] = useState(null);
+	return {
+		capture: useCallback(async () => {
+			setIsCapturing(true);
+			setError(null);
+			try {
+				const result = await captureViewport();
+				setLastCapture(result);
+				return result;
+			} catch (err) {
+				const captureError = err instanceof Error ? err : /* @__PURE__ */ new Error("Screenshot capture failed");
+				setError(captureError);
+				throw captureError;
+			} finally {
+				setIsCapturing(false);
+			}
+		}, []),
+		isCapturing,
+		lastCapture,
+		error
+	};
+}
+//#endregion
+//#region src/client/hooks/useCursorPosition.ts
+/**
+* Hook that tracks mouse cursor position and updates the $cursorPosition atom.
+* Should be used once at the provider level.
+*/
+function useCursorPosition() {
+	useEffect(() => {
+		function handleMouseMove(event) {
+			$cursorPosition.set({
+				x: event.clientX,
+				y: event.clientY
+			});
+		}
+		window.addEventListener("mousemove", handleMouseMove);
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+		};
+	}, []);
+}
+//#endregion
+//#region src/client/styles.css?inline
+var styles_default = "/**\n * Cursor Buddy Styles\n *\n * Customize by overriding CSS variables in your own stylesheet:\n *\n * :root {\n *   --cursor-buddy-color-idle: #8b5cf6;\n * }\n */\n\n:root {\n  /* Cursor colors by state */\n  --cursor-buddy-color-idle: #3b82f6;\n  --cursor-buddy-color-listening: #ef4444;\n  --cursor-buddy-color-processing: #eab308;\n  --cursor-buddy-color-responding: #22c55e;\n  --cursor-buddy-cursor-stroke: #ffffff;\n  --cursor-buddy-cursor-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n\n  /* Speech bubble */\n  --cursor-buddy-bubble-bg: #ffffff;\n  --cursor-buddy-bubble-text: #1f2937;\n  --cursor-buddy-bubble-radius: 8px;\n  --cursor-buddy-bubble-padding: 8px 12px;\n  --cursor-buddy-bubble-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  --cursor-buddy-bubble-max-width: 200px;\n  --cursor-buddy-bubble-font-size: 14px;\n\n  /* Waveform */\n  --cursor-buddy-waveform-color: #ef4444;\n  --cursor-buddy-waveform-bar-width: 4px;\n  --cursor-buddy-waveform-bar-radius: 2px;\n  --cursor-buddy-waveform-gap: 3px;\n\n  /* Overlay */\n  --cursor-buddy-z-index: 2147483647;\n\n  /* Animation durations */\n  --cursor-buddy-transition-fast: 0.1s;\n  --cursor-buddy-transition-normal: 0.2s;\n  --cursor-buddy-animation-duration: 0.3s;\n}\n\n/* Overlay container */\n.cursor-buddy-overlay {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  isolation: isolate;\n  z-index: var(--cursor-buddy-z-index);\n}\n\n/* Buddy container (cursor + accessories) */\n.cursor-buddy-container {\n  position: absolute;\n  transform: translate(-16px, -16px);\n}\n\n/* Cursor SVG */\n.cursor-buddy-cursor {\n  transition: transform var(--cursor-buddy-transition-fast) ease-out;\n  filter: drop-shadow(var(--cursor-buddy-cursor-shadow));\n}\n\n.cursor-buddy-cursor polygon {\n  stroke: var(--cursor-buddy-cursor-stroke);\n  stroke-width: 2;\n  transition: fill var(--cursor-buddy-transition-normal) ease-out;\n}\n\n.cursor-buddy-cursor--idle polygon {\n  fill: var(--cursor-buddy-color-idle);\n}\n\n.cursor-buddy-cursor--listening polygon {\n  fill: var(--cursor-buddy-color-listening);\n}\n\n.cursor-buddy-cursor--processing polygon {\n  fill: var(--cursor-buddy-color-processing);\n}\n\n.cursor-buddy-cursor--responding polygon {\n  fill: var(--cursor-buddy-color-responding);\n}\n\n/* Cursor pulse animation during listening */\n.cursor-buddy-cursor--listening {\n  animation: cursor-buddy-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes cursor-buddy-pulse {\n  0%,\n  100% {\n    filter: drop-shadow(var(--cursor-buddy-cursor-shadow));\n  }\n  50% {\n    filter: drop-shadow(0 0 8px var(--cursor-buddy-color-listening));\n  }\n}\n\n/* Processing spinner effect */\n.cursor-buddy-cursor--processing {\n  animation: cursor-buddy-spin-subtle 2s linear infinite;\n}\n\n@keyframes cursor-buddy-spin-subtle {\n  0% {\n    filter: drop-shadow(var(--cursor-buddy-cursor-shadow)) hue-rotate(0deg);\n  }\n  100% {\n    filter: drop-shadow(var(--cursor-buddy-cursor-shadow)) hue-rotate(360deg);\n  }\n}\n\n/* Speech bubble */\n.cursor-buddy-bubble {\n  position: absolute;\n  left: 40px;\n  top: -8px;\n  pointer-events: auto;\n  cursor: pointer;\n  max-width: var(--cursor-buddy-bubble-max-width);\n  padding: var(--cursor-buddy-bubble-padding);\n  background-color: var(--cursor-buddy-bubble-bg);\n  color: var(--cursor-buddy-bubble-text);\n  border-radius: var(--cursor-buddy-bubble-radius);\n  box-shadow: var(--cursor-buddy-bubble-shadow);\n  font-size: var(--cursor-buddy-bubble-font-size);\n  line-height: 1.4;\n  width: max-content;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  user-select: none;\n  animation: cursor-buddy-fade-in var(--cursor-buddy-animation-duration)\n    ease-out;\n}\n\n@keyframes cursor-buddy-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Waveform container */\n.cursor-buddy-waveform {\n  position: absolute;\n  left: 40px;\n  top: 4px;\n  display: flex;\n  align-items: center;\n  gap: var(--cursor-buddy-waveform-gap);\n  height: 24px;\n  animation: cursor-buddy-fade-in var(--cursor-buddy-animation-duration)\n    ease-out;\n}\n\n/* Waveform bars */\n.cursor-buddy-waveform-bar {\n  width: var(--cursor-buddy-waveform-bar-width);\n  background-color: var(--cursor-buddy-waveform-color);\n  border-radius: var(--cursor-buddy-waveform-bar-radius);\n  transition: height 0.05s ease-out;\n}\n\n/* Fade out animation (applied via JS) */\n.cursor-buddy-fade-out {\n  animation: cursor-buddy-fade-out var(--cursor-buddy-animation-duration)\n    ease-out forwards;\n}\n\n@keyframes cursor-buddy-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n";
+//#endregion
+//#region src/client/utils/inject-styles.ts
+const STYLE_ID = "cursor-buddy-styles";
+let injected = false;
+/**
+* Inject cursor buddy styles into the document head.
+* Safe to call multiple times - will only inject once.
+* No-op during SSR.
+*/
+function injectStyles() {
+	if (typeof document === "undefined") return;
+	if (injected) return;
+	if (document.getElementById(STYLE_ID)) {
+		injected = true;
+		return;
+	}
+	const head = document.head || document.getElementsByTagName("head")[0];
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = styles_default;
+	if (head.firstChild) head.insertBefore(style, head.firstChild);
+	else head.appendChild(style);
+	injected = true;
+}
+//#endregion
+//#region src/client/CursorBuddyProvider.tsx
+const POINTING_LOCK_TIMEOUT_MS = 1e4;
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function mapPointToViewport(target, screenshot) {
+	if (screenshot.width <= 0 || screenshot.height <= 0) return target;
+	const scaleX = screenshot.viewportWidth / screenshot.width;
+	const scaleY = screenshot.viewportHeight / screenshot.height;
+	return {
+		...target,
+		x: clamp(Math.round(target.x * scaleX), 0, Math.max(screenshot.viewportWidth - 1, 0)),
+		y: clamp(Math.round(target.y * scaleY), 0, Math.max(screenshot.viewportHeight - 1, 0))
+	};
+}
+function CursorBuddyProvider({ endpoint, muted = false, onTranscript, onResponse, onPoint, onStateChange, onError, children }) {
+	const [snapshot, send] = useActor(cursorBuddyMachine);
+	const voiceCapture = useVoiceCapture();
+	const screenCapture = useScreenCapture();
+	useCursorPosition();
+	useEffect(() => {
+		injectStyles();
+	}, []);
+	const audioLevel = useStore($audioLevel);
+	const isEnabled = useStore($isEnabled);
+	const isSpeaking = useStore($isSpeaking);
+	useStore($pointingTarget);
+	const cursorPosition = useStore($cursorPosition);
+	const [pointerMode, setPointerMode] = useState("follow");
+	const audioRef = useRef(null);
+	const cancelPointingRef = useRef(null);
+	const dismissPointingTimeoutRef = useRef(null);
+	const isRecordingRef = useRef(false);
+	const state = snapshot.value;
+	const transcript = snapshot.context.transcript;
+	const response = snapshot.context.response;
+	const error = snapshot.context.error;
+	const isPointing = pointerMode !== "follow";
+	useEffect(() => {
+		onStateChange?.(state);
+	}, [state, onStateChange]);
+	useEffect(() => {
+		if (error) onError?.(error);
+	}, [error, onError]);
+	const clearPointingTimeout = useCallback(() => {
+		if (dismissPointingTimeoutRef.current !== null) {
+			window.clearTimeout(dismissPointingTimeoutRef.current);
+			dismissPointingTimeoutRef.current = null;
+		}
+	}, []);
+	const cancelPointingAnimation = useCallback(() => {
+		if (cancelPointingRef.current) {
+			cancelPointingRef.current();
+			cancelPointingRef.current = null;
+		}
+	}, []);
+	const releasePointingLock = useCallback(() => {
+		clearPointingTimeout();
+		cancelPointingAnimation();
+		setPointerMode("follow");
+		$pointingTarget.set(null);
+		$buddyPosition.set($cursorPosition.get());
+		$buddyRotation.set(0);
+		$buddyScale.set(1);
+	}, [cancelPointingAnimation, clearPointingTimeout]);
+	const schedulePointingRelease = useCallback(() => {
+		clearPointingTimeout();
+		dismissPointingTimeoutRef.current = window.setTimeout(() => {
+			dismissPointingTimeoutRef.current = null;
+			releasePointingLock();
+		}, POINTING_LOCK_TIMEOUT_MS);
+	}, [clearPointingTimeout, releasePointingLock]);
+	useEffect(() => {
+		if (pointerMode === "follow") {
+			$buddyPosition.set(cursorPosition);
+			$buddyRotation.set(0);
+			$buddyScale.set(1);
+		}
+	}, [pointerMode, cursorPosition]);
+	useEffect(() => {
+		return () => {
+			clearPointingTimeout();
+			cancelPointingAnimation();
+		};
+	}, [cancelPointingAnimation, clearPointingTimeout]);
+	const handlePointing = useCallback((target) => {
+		clearPointingTimeout();
+		cancelPointingAnimation();
+		$pointingTarget.set(target);
+		setPointerMode("flying");
+		schedulePointingRelease();
+		const startPos = $buddyPosition.get();
+		const endPos = {
+			x: target.x,
+			y: target.y
+		};
+		cancelPointingRef.current = animateBezierFlight(startPos, endPos, 800, {
+			onFrame: (position, rotation, scale) => {
+				$buddyPosition.set(position);
+				$buddyRotation.set(rotation);
+				$buddyScale.set(scale);
+			},
+			onComplete: () => {
+				cancelPointingRef.current = null;
+				setPointerMode("anchored");
+				$buddyPosition.set(endPos);
+				$buddyRotation.set(0);
+				$buddyScale.set(1);
+				send({ type: "POINTING_COMPLETE" });
+			}
+		});
+	}, [
+		cancelPointingAnimation,
+		clearPointingTimeout,
+		schedulePointingRelease,
+		send
+	]);
+	const startListening = useCallback(async () => {
+		if (!isEnabled || isRecordingRef.current) return;
+		try {
+			releasePointingLock();
+			isRecordingRef.current = true;
+			send({ type: "HOTKEY_PRESSED" });
+			await voiceCapture.start();
+		} catch (err) {
+			isRecordingRef.current = false;
+			send({
+				type: "ERROR",
+				error: err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to start recording")
+			});
+		}
+	}, [
+		isEnabled,
+		releasePointingLock,
+		send,
+		voiceCapture
+	]);
+	const stopListening = useCallback(async () => {
+		if (!isRecordingRef.current) return;
+		isRecordingRef.current = false;
+		try {
+			send({ type: "HOTKEY_RELEASED" });
+			const audioBlob = await voiceCapture.stop();
+			const screenshot = await screenCapture.capture();
+			const formData = new FormData();
+			formData.append("audio", audioBlob, "recording.wav");
+			const transcribeResponse = await fetch(`${endpoint}/transcribe`, {
+				method: "POST",
+				body: formData
+			});
+			if (!transcribeResponse.ok) throw new Error("Transcription failed");
+			const { text: transcriptText } = await transcribeResponse.json();
+			send({
+				type: "TRANSCRIPTION_COMPLETE",
+				transcript: transcriptText
+			});
+			onTranscript?.(transcriptText);
+			const history = $conversationHistory.get();
+			const chatResponse = await fetch(`${endpoint}/chat`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					screenshot: screenshot.imageData,
+					capture: {
+						width: screenshot.width,
+						height: screenshot.height
+					},
+					transcript: transcriptText,
+					history
+				})
+			});
+			if (!chatResponse.ok) throw new Error("Chat request failed");
+			const reader = chatResponse.body?.getReader();
+			if (!reader) throw new Error("No response body");
+			const decoder = new TextDecoder();
+			let fullResponse = "";
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				const chunk = decoder.decode(value, { stream: true });
+				fullResponse += chunk;
+				send({
+					type: "AI_RESPONSE_CHUNK",
+					text: chunk
+				});
+			}
+			const rawPointTarget = parsePointingTag(fullResponse);
+			const pointTarget = rawPointTarget ? mapPointToViewport(rawPointTarget, screenshot) : null;
+			const cleanResponse = stripPointingTag(fullResponse);
+			send({
+				type: "AI_RESPONSE_COMPLETE",
+				response: cleanResponse
+			});
+			onResponse?.(cleanResponse);
+			const newHistory = [
+				...history,
+				{
+					role: "user",
+					content: transcriptText
+				},
+				{
+					role: "assistant",
+					content: cleanResponse
+				}
+			];
+			$conversationHistory.set(newHistory);
+			if (pointTarget) {
+				onPoint?.(pointTarget);
+				handlePointing(pointTarget);
+			}
+			if (!muted && cleanResponse) await playTTS(cleanResponse);
+			send({ type: "TTS_COMPLETE" });
+		} catch (err) {
+			send({
+				type: "ERROR",
+				error: err instanceof Error ? err : /* @__PURE__ */ new Error("Processing failed")
+			});
+		}
+	}, [
+		send,
+		voiceCapture,
+		screenCapture,
+		endpoint,
+		muted,
+		onTranscript,
+		onResponse,
+		onPoint,
+		handlePointing
+	]);
+	const playTTS = useCallback(async (text) => {
+		$isSpeaking.set(true);
+		try {
+			const response = await fetch(`${endpoint}/tts`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ text })
+			});
+			if (!response.ok) throw new Error("TTS request failed");
+			const audioBlob = await response.blob();
+			const audioUrl = URL.createObjectURL(audioBlob);
+			const audio = new Audio(audioUrl);
+			audioRef.current = audio;
+			await new Promise((resolve, reject) => {
+				audio.onended = () => {
+					URL.revokeObjectURL(audioUrl);
+					resolve();
+				};
+				audio.onerror = () => {
+					URL.revokeObjectURL(audioUrl);
+					reject(/* @__PURE__ */ new Error("Audio playback failed"));
+				};
+				audio.play();
+			});
+		} finally {
+			$isSpeaking.set(false);
+			audioRef.current = null;
+		}
+	}, [endpoint]);
+	const speak = useCallback(async (text) => {
+		if (muted) return;
+		await playTTS(text);
+	}, [muted, playTTS]);
+	const pointAt = useCallback((x, y, label) => {
+		handlePointing({
+			x,
+			y,
+			label
+		});
+	}, [handlePointing]);
+	const dismissPointing = useCallback(() => {
+		releasePointingLock();
+	}, [releasePointingLock]);
+	const setEnabled = useCallback((enabled) => {
+		$isEnabled.set(enabled);
+	}, []);
+	const reset = useCallback(() => {
+		if (audioRef.current) {
+			audioRef.current.pause();
+			audioRef.current = null;
+		}
+		isRecordingRef.current = false;
+		$isSpeaking.set(false);
+		releasePointingLock();
+		send({ type: "CANCEL" });
+	}, [releasePointingLock, send]);
+	const contextValue = useMemo(() => ({
+		state,
+		transcript,
+		response,
+		audioLevel,
+		isEnabled,
+		isSpeaking,
+		isPointing,
+		error,
+		startListening,
+		stopListening,
+		setEnabled,
+		speak,
+		pointAt,
+		dismissPointing,
+		reset
+	}), [
+		state,
+		transcript,
+		response,
+		audioLevel,
+		isEnabled,
+		isSpeaking,
+		isPointing,
+		error,
+		startListening,
+		stopListening,
+		setEnabled,
+		speak,
+		pointAt,
+		dismissPointing,
+		reset
+	]);
+	return /* @__PURE__ */ jsx(CursorBuddyContext.Provider, {
+		value: contextValue,
+		children
+	});
+}
+//#endregion
+//#region src/client/hooks/useCursorBuddy.ts
+/**
+* Hook to access cursor buddy state and actions.
+* Must be used within a CursorBuddyProvider.
+*/
+function useCursorBuddy() {
+	const context = useContext(CursorBuddyContext);
+	if (!context) throw new Error("useCursorBuddy must be used within a CursorBuddyProvider");
+	return context;
+}
+//#endregion
+//#region src/client/components/Cursor.tsx
+/**
+* Default cursor component - a colored triangle pointer.
+* Color and animations change based on voice state via CSS classes.
+*/
+function DefaultCursor({ state, rotation, scale }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "32",
+		height: "32",
+		viewBox: "0 0 32 32",
+		className: `cursor-buddy-cursor ${`cursor-buddy-cursor--${state}`}`,
+		style: { transform: `rotate(${rotation}rad) scale(${scale})` },
+		children: /* @__PURE__ */ jsx("polygon", { points: "16,4 28,28 16,22 4,28" })
+	});
+}
+//#endregion
+//#region src/client/components/SpeechBubble.tsx
+/**
+* Default speech bubble component.
+* Displays pointing label or response text next to the cursor.
+*/
+function DefaultSpeechBubble({ text, isVisible, onClick }) {
+	if (!isVisible || !text) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "cursor-buddy-bubble",
+		onClick,
+		onKeyDown: (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				onClick?.();
+			}
+		},
+		role: "button",
+		tabIndex: 0,
+		children: text
+	});
+}
+//#endregion
+//#region src/client/components/Waveform.tsx
+const BAR_COUNT = 5;
+/**
+* Default waveform component.
+* Shows audio level visualization during recording.
+*/
+function DefaultWaveform({ audioLevel, isListening }) {
+	if (!isListening) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "cursor-buddy-waveform",
+		children: Array.from({ length: BAR_COUNT }).map((_, i) => {
+			const baseHeight = 4;
+			const variance = Math.sin(i / BAR_COUNT * Math.PI) * .5 + .5;
+			return /* @__PURE__ */ jsx("div", {
+				className: "cursor-buddy-waveform-bar",
+				style: { height: `${baseHeight + audioLevel * 16 * variance}px` }
+			}, i);
+		})
+	});
+}
+//#endregion
+//#region src/client/components/Overlay.tsx
+/**
+* Overlay component that renders the cursor, speech bubble, and waveform.
+* Uses React portal to render at the document body level.
+*/
+function Overlay({ cursor, speechBubble, waveform, container }) {
+	const [isMounted, setIsMounted] = useState(false);
+	useEffect(() => setIsMounted(true), []);
+	const { state, isPointing, isEnabled, dismissPointing } = useCursorBuddy();
+	const buddyPosition = useStore($buddyPosition);
+	const buddyRotation = useStore($buddyRotation);
+	const buddyScale = useStore($buddyScale);
+	const audioLevel = useStore($audioLevel);
+	const pointingTarget = useStore($pointingTarget);
+	if (!isMounted || !isEnabled) return null;
+	const cursorProps = {
+		state,
+		isPointing,
+		rotation: buddyRotation,
+		scale: buddyScale
+	};
+	const speechBubbleProps = {
+		text: pointingTarget?.label ?? "",
+		isVisible: isPointing && !!pointingTarget,
+		onClick: dismissPointing
+	};
+	const waveformProps = {
+		audioLevel,
+		isListening: state === "listening"
+	};
+	const cursorElement = typeof cursor === "function" ? cursor(cursorProps) : cursor ? cursor : /* @__PURE__ */ jsx(DefaultCursor, { ...cursorProps });
+	const speechBubbleElement = speechBubble ? speechBubble(speechBubbleProps) : /* @__PURE__ */ jsx(DefaultSpeechBubble, { ...speechBubbleProps });
+	const waveformElement = waveform ? waveform(waveformProps) : /* @__PURE__ */ jsx(DefaultWaveform, { ...waveformProps });
+	const overlayContent = /* @__PURE__ */ jsx("div", {
+		className: "cursor-buddy-overlay",
+		"data-cursor-buddy-overlay": true,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "cursor-buddy-container",
+			style: {
+				left: buddyPosition.x,
+				top: buddyPosition.y
+			},
+			children: [
+				cursorElement,
+				state === "listening" && waveformElement,
+				isPointing && speechBubbleElement
+			]
+		})
+	});
+	const portalContainer = container ?? (typeof document !== "undefined" ? document.body : null);
+	if (!portalContainer) return null;
+	return createPortal(overlayContent, portalContainer);
+}
+//#endregion
+//#region src/client/hooks/useHotkey.ts
+/**
+* Parse a hotkey string like "ctrl+alt" into modifier flags
+*/
+function parseHotkey(hotkey) {
+	const parts = hotkey.toLowerCase().split("+");
+	return {
+		ctrl: parts.includes("ctrl") || parts.includes("control"),
+		alt: parts.includes("alt") || parts.includes("option"),
+		shift: parts.includes("shift"),
+		meta: parts.includes("meta") || parts.includes("cmd") || parts.includes("command")
+	};
+}
+/**
+* Check if a keyboard event matches the required modifiers
+*/
+function matchesHotkey(event, modifiers) {
+	return event.ctrlKey === modifiers.ctrl && event.altKey === modifiers.alt && event.shiftKey === modifiers.shift && event.metaKey === modifiers.meta;
+}
+/**
+* Hook for detecting push-to-talk hotkey press/release.
+*
+* @param hotkey - Hotkey string like "ctrl+alt" or "ctrl+shift"
+* @param onPress - Called when hotkey is pressed
+* @param onRelease - Called when hotkey is released
+* @param enabled - Whether the hotkey listener is active (default: true)
+*/
+function useHotkey(hotkey, onPress, onRelease, enabled = true) {
+	const isPressedRef = useRef(false);
+	const modifiersRef = useRef(parseHotkey(hotkey));
+	const onPressRef = useRef(onPress);
+	const onReleaseRef = useRef(onRelease);
+	onPressRef.current = onPress;
+	onReleaseRef.current = onRelease;
+	useEffect(() => {
+		modifiersRef.current = parseHotkey(hotkey);
+	}, [hotkey]);
+	useEffect(() => {
+		if (!enabled) {
+			if (isPressedRef.current) {
+				isPressedRef.current = false;
+				onReleaseRef.current();
+			}
+			return;
+		}
+		function handleKeyDown(event) {
+			if (matchesHotkey(event, modifiersRef.current) && !isPressedRef.current) {
+				isPressedRef.current = true;
+				event.preventDefault();
+				onPressRef.current();
+			}
+		}
+		function handleKeyUp(event) {
+			if (isPressedRef.current && !matchesHotkey(event, modifiersRef.current)) {
+				isPressedRef.current = false;
+				onReleaseRef.current();
+			}
+		}
+		function handleBlur() {
+			if (isPressedRef.current) {
+				isPressedRef.current = false;
+				onReleaseRef.current();
+			}
+		}
+		window.addEventListener("keydown", handleKeyDown);
+		window.addEventListener("keyup", handleKeyUp);
+		window.addEventListener("blur", handleBlur);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			window.removeEventListener("keyup", handleKeyUp);
+			window.removeEventListener("blur", handleBlur);
+		};
+	}, [enabled]);
+}
+//#endregion
+//#region src/client/CursorBuddy.tsx
+/**
+* Internal component that sets up hotkey handling
+*/
+function CursorBuddyInner({ hotkey = "ctrl+alt", cursor, speechBubble, waveform, container }) {
+	const { startListening, stopListening, isEnabled } = useCursorBuddy();
+	useHotkey(hotkey, startListening, stopListening, isEnabled);
+	return /* @__PURE__ */ jsx(Overlay, {
+		cursor,
+		speechBubble,
+		waveform,
+		container
+	});
+}
+/**
+* Drop-in cursor buddy component.
+*
+* Adds an AI-powered cursor companion to your app. Users hold the hotkey
+* (default: Ctrl+Alt) to speak. The SDK captures a screenshot, transcribes
+* the speech, sends it to the AI, speaks the response, and can point at
+* elements on screen.
+*
+* @example
+* ```tsx
+* import { CursorBuddy } from "cursor-buddy/client"
+*
+* function App() {
+*   return (
+*     <>
+*       <YourApp />
+*       <CursorBuddy endpoint="/api/cursor-buddy" />
+*     </>
+*   )
+* }
+* ```
+*/
+function CursorBuddy({ endpoint, hotkey, muted, container, cursor, speechBubble, waveform, onTranscript, onResponse, onPoint, onStateChange, onError }) {
+	return /* @__PURE__ */ jsx(CursorBuddyProvider, {
+		endpoint,
+		muted,
+		onTranscript,
+		onResponse,
+		onPoint,
+		onStateChange,
+		onError,
+		children: /* @__PURE__ */ jsx(CursorBuddyInner, {
+			hotkey,
+			cursor,
+			speechBubble,
+			waveform,
+			container
+		})
+	});
+}
+//#endregion
+export { CursorBuddy, CursorBuddyProvider, useCursorBuddy };
+
+//# sourceMappingURL=index.mjs.map