@kelnishi/satmouse-client 0.1.0

package/dist/react/index.js

@@ -0,0 +1,992 @@
+import { createContext, useRef, useState, useEffect, useMemo, useContext, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/react/context.tsx
+
+// src/core/emitter.ts
+var TypedEmitter = class {
+  listeners = /* @__PURE__ */ new Map();
+  on(event, listener) {
+    let set = this.listeners.get(event);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(event, set);
+    }
+    set.add(listener);
+    return this;
+  }
+  off(event, listener) {
+    this.listeners.get(event)?.delete(listener);
+    return this;
+  }
+  emit(event, ...args) {
+    const set = this.listeners.get(event);
+    if (set) {
+      for (const fn of set) {
+        fn(...args);
+      }
+    }
+  }
+  removeAllListeners() {
+    this.listeners.clear();
+  }
+};
+
+// src/core/discovery.ts
+async function fetchThingDescription(tdUrl) {
+  const res = await globalThis.fetch(tdUrl);
+  if (!res.ok) throw new Error(`Failed to fetch TD: HTTP ${res.status}`);
+  return res.json();
+}
+function resolveEndpoints(td) {
+  const result = {};
+  const spatialForms = td.events?.spatialData?.forms ?? [];
+  const wtForm = spatialForms.find((f) => f.subprotocol === "webtransport");
+  if (wtForm) {
+    result.webtransport = {
+      url: wtForm.href,
+      certHash: td["satmouse:certHash"]
+    };
+  }
+  const wsForm = spatialForms.find((f) => f.subprotocol === "websocket");
+  if (wsForm) {
+    result.websocket = { url: wsForm.href };
+  }
+  const deviceForm = td.properties?.deviceInfo?.forms?.[0];
+  if (deviceForm) {
+    result.deviceInfoUrl = deviceForm.href;
+  }
+  return result;
+}
+
+// src/core/decode.ts
+function decodeBinaryFrame(buffer) {
+  const ab = buffer instanceof ArrayBuffer ? buffer : buffer.buffer;
+  const offset = buffer instanceof Uint8Array ? buffer.byteOffset : 0;
+  const view = new DataView(ab, offset);
+  return {
+    translation: {
+      x: view.getInt16(8, true),
+      y: view.getInt16(10, true),
+      z: view.getInt16(12, true)
+    },
+    rotation: {
+      x: view.getInt16(14, true),
+      y: view.getInt16(16, true),
+      z: view.getInt16(18, true)
+    },
+    timestamp: view.getFloat64(0, true)
+  };
+}
+function decodeWsBinaryFrame(buffer) {
+  const bytes = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+  if (bytes.length < 1) return null;
+  const typePrefix = bytes[0];
+  if (typePrefix === 1 && bytes.length >= 25) {
+    return { type: "spatialData", data: decodeBinaryFrame(bytes.subarray(1, 25)) };
+  }
+  if (typePrefix === 2) {
+    const json = new TextDecoder().decode(bytes.subarray(1));
+    return { type: "buttonEvent", data: JSON.parse(json) };
+  }
+  return null;
+}
+function decodeButtonStream(buffer) {
+  const events = [];
+  let pos = 0;
+  while (pos + 4 <= buffer.length) {
+    const view = new DataView(buffer.buffer, buffer.byteOffset + pos);
+    const len = view.getUint32(0, true);
+    if (pos + 4 + len > buffer.length) break;
+    const json = new TextDecoder().decode(buffer.subarray(pos + 4, pos + 4 + len));
+    events.push(JSON.parse(json));
+    pos += 4 + len;
+  }
+  return { events, remainder: buffer.subarray(pos) };
+}
+
+// src/core/transports/webtransport.ts
+var WebTransportAdapter = class {
+  protocol = "webtransport";
+  onSpatialData = null;
+  onButtonEvent = null;
+  onClose = null;
+  onError = null;
+  transport = null;
+  url;
+  certHash;
+  constructor(url, certHash) {
+    this.url = url;
+    this.certHash = certHash;
+  }
+  async connect() {
+    if (typeof globalThis.WebTransport === "undefined") {
+      throw new Error("WebTransport is not available in this environment");
+    }
+    const options = {};
+    if (this.certHash) {
+      options.serverCertificateHashes = [
+        {
+          algorithm: "sha-256",
+          value: Uint8Array.from(atob(this.certHash), (c) => c.charCodeAt(0))
+        }
+      ];
+    }
+    this.transport = new globalThis.WebTransport(this.url, options);
+    await this.transport.ready;
+    this.readDatagrams();
+    this.readStreams();
+    this.transport.closed.then(() => this.onClose?.()).catch(() => this.onClose?.());
+  }
+  close() {
+    try {
+      this.transport?.close();
+    } catch {
+    }
+    this.transport = null;
+  }
+  async readDatagrams() {
+    const reader = this.transport.datagrams.readable.getReader();
+    try {
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        this.onSpatialData?.(decodeBinaryFrame(value));
+      }
+    } catch {
+    }
+  }
+  async readStreams() {
+    const reader = this.transport.incomingUnidirectionalStreams.getReader();
+    try {
+      while (true) {
+        const { value: stream, done } = await reader.read();
+        if (done) break;
+        this.readButtonStream(stream);
+      }
+    } catch {
+    }
+  }
+  async readButtonStream(stream) {
+    const reader = stream.getReader();
+    let buffer = new Uint8Array(0);
+    try {
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        const newBuf = new Uint8Array(buffer.length + value.length);
+        newBuf.set(buffer);
+        newBuf.set(value, buffer.length);
+        const { events, remainder } = decodeButtonStream(newBuf);
+        for (const event of events) {
+          this.onButtonEvent?.(event);
+        }
+        buffer = remainder;
+      }
+    } catch {
+    }
+  }
+};
+
+// src/core/transports/websocket.ts
+var WebSocketAdapter = class {
+  protocol = "websocket";
+  onSpatialData = null;
+  onButtonEvent = null;
+  onDeviceStatus = null;
+  onClose = null;
+  onError = null;
+  ws = null;
+  url;
+  subprotocol;
+  constructor(url, subprotocol = "satmouse-json") {
+    this.url = url;
+    this.subprotocol = subprotocol;
+  }
+  async connect() {
+    return new Promise((resolve, reject) => {
+      this.ws = new globalThis.WebSocket(this.url, this.subprotocol);
+      if (this.subprotocol === "satmouse-binary") {
+        this.ws.binaryType = "arraybuffer";
+      }
+      this.ws.onopen = () => resolve();
+      this.ws.onerror = () => {
+        reject(new Error(`WebSocket connection failed: ${this.url}`));
+      };
+      this.ws.onmessage = (event) => {
+        if (this.subprotocol === "satmouse-binary" && event.data instanceof ArrayBuffer) {
+          const decoded = decodeWsBinaryFrame(event.data);
+          if (decoded?.type === "spatialData") this.onSpatialData?.(decoded.data);
+          else if (decoded?.type === "buttonEvent") this.onButtonEvent?.(decoded.data);
+        } else if (typeof event.data === "string") {
+          try {
+            const msg = JSON.parse(event.data);
+            if (msg.type === "spatialData") this.onSpatialData?.(msg.data);
+            else if (msg.type === "buttonEvent") this.onButtonEvent?.(msg.data);
+            else if (msg.type === "deviceStatus") {
+              this.onDeviceStatus?.(msg.data.event, msg.data.device);
+            }
+          } catch {
+          }
+        }
+      };
+      this.ws.onclose = () => this.onClose?.();
+    });
+  }
+  close() {
+    try {
+      this.ws?.close();
+    } catch {
+    }
+    this.ws = null;
+  }
+};
+
+// src/core/connection.ts
+function parseSatMouseUri(uri) {
+  const url = new URL(uri);
+  const host = url.searchParams.get("host") ?? "localhost";
+  const wsPort = url.searchParams.get("wsPort") ?? "4444";
+  const wtPort = url.searchParams.get("wtPort") ?? "4443";
+  return {
+    tdUrl: `http://${host}:${wsPort}/td.json`,
+    wsUrl: `ws://${host}:${wsPort}/spatial`,
+    wtUrl: `https://${host}:${wtPort}`
+  };
+}
+var DEFAULT_OPTIONS = {
+  transports: ["webtransport", "websocket"],
+  reconnectDelay: 2e3,
+  wsSubprotocol: "satmouse-json"
+};
+var SatMouseConnection = class extends TypedEmitter {
+  options;
+  transport = null;
+  reconnectTimer = null;
+  intentionalClose = false;
+  deviceInfoUrl = null;
+  _state = "disconnected";
+  _protocol = "none";
+  get state() {
+    return this._state;
+  }
+  get protocol() {
+    return this._protocol;
+  }
+  constructor(options) {
+    super();
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+  }
+  async connect() {
+    this.intentionalClose = false;
+    this.setState("connecting", "none");
+    let wtUrl = this.options.wtUrl;
+    let wsUrl = this.options.wsUrl;
+    let certHash = this.options.certHash;
+    if (this.options.uri) {
+      const parsed = parseSatMouseUri(this.options.uri);
+      wtUrl = wtUrl ?? parsed.wtUrl;
+      wsUrl = wsUrl ?? parsed.wsUrl;
+      this.options.tdUrl = this.options.tdUrl ?? parsed.tdUrl;
+    }
+    if (!wtUrl && !wsUrl) {
+      const tdUrl = this.options.tdUrl ?? new URL("/td.json", globalThis.location?.origin ?? "http://localhost:4444").href;
+      try {
+        const td = await fetchThingDescription(tdUrl);
+        const endpoints = resolveEndpoints(td);
+        wtUrl = endpoints.webtransport?.url;
+        wsUrl = endpoints.websocket?.url;
+        certHash = certHash ?? endpoints.webtransport?.certHash;
+        this.deviceInfoUrl = endpoints.deviceInfoUrl ?? null;
+      } catch (err) {
+        this.emit("error", err instanceof Error ? err : new Error(String(err)));
+        wsUrl = `ws://${globalThis.location?.hostname ?? "localhost"}:${globalThis.location?.port ?? "4444"}/spatial`;
+      }
+    }
+    for (const proto of this.options.transports) {
+      if (proto === "webtransport" && wtUrl) {
+        try {
+          if (typeof globalThis.WebTransport === "undefined") continue;
+          const adapter = new WebTransportAdapter(wtUrl, certHash);
+          if (await this.tryTransport(adapter)) return;
+        } catch {
+          continue;
+        }
+      }
+      if (proto === "websocket" && wsUrl) {
+        try {
+          const adapter = new WebSocketAdapter(wsUrl, this.options.wsSubprotocol);
+          if (await this.tryTransport(adapter)) return;
+        } catch {
+          continue;
+        }
+      }
+    }
+    this.setState("disconnected", "none");
+    this.scheduleReconnect();
+  }
+  disconnect() {
+    this.intentionalClose = true;
+    this.clearReconnect();
+    this.transport?.close();
+    this.transport = null;
+    this.setState("disconnected", "none");
+  }
+  async fetchDeviceInfo() {
+    if (!this.deviceInfoUrl) return [];
+    const res = await globalThis.fetch(this.deviceInfoUrl);
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.devices ?? [];
+  }
+  async tryTransport(adapter) {
+    adapter.onSpatialData = (data) => this.emit("spatialData", data);
+    adapter.onButtonEvent = (data) => this.emit("buttonEvent", data);
+    adapter.onError = (err) => this.emit("error", err);
+    if ("onDeviceStatus" in adapter) {
+      adapter.onDeviceStatus = (event, device) => {
+        this.emit("deviceStatus", event, device);
+      };
+    }
+    adapter.onClose = () => {
+      this.transport = null;
+      this.setState("disconnected", "none");
+      if (!this.intentionalClose) this.scheduleReconnect();
+    };
+    try {
+      await adapter.connect();
+      this.transport = adapter;
+      this.setState("connected", adapter.protocol);
+      return true;
+    } catch (err) {
+      this.emit("error", err instanceof Error ? err : new Error(String(err)));
+      return false;
+    }
+  }
+  setState(state, protocol) {
+    if (this._state === state && this._protocol === protocol) return;
+    this._state = state;
+    this._protocol = protocol;
+    this.emit("stateChange", state, protocol);
+  }
+  scheduleReconnect() {
+    if (this.options.reconnectDelay <= 0 || this.intentionalClose) return;
+    this.clearReconnect();
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      this.connect();
+    }, this.options.reconnectDelay);
+  }
+  clearReconnect() {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+  }
+};
+
+// src/core/launch.ts
+var SCHEME_URL = "satmouse://launch";
+var PROJECT_URL = "https://github.com/kelnishi/SatMouse/releases/latest";
+function launchSatMouse(options) {
+  const schemeUrl = SCHEME_URL;
+  const fallbackUrl = PROJECT_URL;
+  const timeout = 2500;
+  return new Promise((resolve) => {
+    let launched = false;
+    const onBlur = () => {
+      launched = true;
+    };
+    globalThis.addEventListener("blur", onBlur);
+    const iframe = document.createElement("iframe");
+    iframe.style.display = "none";
+    iframe.src = schemeUrl;
+    document.body.appendChild(iframe);
+    setTimeout(() => {
+      globalThis.removeEventListener("blur", onBlur);
+      document.body.removeChild(iframe);
+      if (launched || document.hidden) {
+        resolve(true);
+      } else {
+        globalThis.location.href = fallbackUrl;
+        resolve(false);
+      }
+    }, timeout);
+  });
+}
+
+// src/utils/config.ts
+var DEFAULT_CONFIG = {
+  sensitivity: { translation: 1e-3, rotation: 1e-3 },
+  flip: { tx: false, ty: true, tz: true, rx: false, ry: true, rz: true },
+  deadZone: 0,
+  dominant: false,
+  axisRemap: { tx: "x", ty: "y", tz: "z", rx: "x", ry: "y", rz: "z" },
+  lockPosition: false,
+  lockRotation: false
+};
+function mergeConfig(base, partial) {
+  return {
+    ...base,
+    ...partial,
+    sensitivity: { ...base.sensitivity, ...partial.sensitivity },
+    flip: { ...base.flip, ...partial.flip },
+    axisRemap: { ...base.axisRemap, ...partial.axisRemap }
+  };
+}
+
+// src/utils/persistence.ts
+var STORAGE_KEY = "satmouse:settings";
+function getStorage(storage) {
+  if (storage) return storage;
+  try {
+    return globalThis.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+function saveSettings(config, storage) {
+  const s = getStorage(storage);
+  if (!s) return;
+  s.setItem(STORAGE_KEY, JSON.stringify(config));
+}
+function loadSettings(storage) {
+  const s = getStorage(storage);
+  if (!s) return null;
+  const raw = s.getItem(STORAGE_KEY);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+// src/utils/transforms.ts
+function applyFlip(data, flip) {
+  return {
+    ...data,
+    translation: {
+      x: flip.tx ? -data.translation.x : data.translation.x,
+      y: flip.ty ? -data.translation.y : data.translation.y,
+      z: flip.tz ? -data.translation.z : data.translation.z
+    },
+    rotation: {
+      x: flip.rx ? -data.rotation.x : data.rotation.x,
+      y: flip.ry ? -data.rotation.y : data.rotation.y,
+      z: flip.rz ? -data.rotation.z : data.rotation.z
+    }
+  };
+}
+function applySensitivity(data, sens) {
+  return {
+    ...data,
+    translation: {
+      x: data.translation.x * sens.translation,
+      y: data.translation.y * sens.translation,
+      z: data.translation.z * sens.translation
+    },
+    rotation: {
+      x: data.rotation.x * sens.rotation,
+      y: data.rotation.y * sens.rotation,
+      z: data.rotation.z * sens.rotation
+    }
+  };
+}
+function applyDominant(data) {
+  const axes = [
+    { group: "t", key: "x", v: Math.abs(data.translation.x) },
+    { group: "t", key: "y", v: Math.abs(data.translation.y) },
+    { group: "t", key: "z", v: Math.abs(data.translation.z) },
+    { group: "r", key: "x", v: Math.abs(data.rotation.x) },
+    { group: "r", key: "y", v: Math.abs(data.rotation.y) },
+    { group: "r", key: "z", v: Math.abs(data.rotation.z) }
+  ];
+  const max = axes.reduce((a, b) => b.v > a.v ? b : a);
+  const t = { x: 0, y: 0, z: 0 };
+  const r = { x: 0, y: 0, z: 0 };
+  if (max.group === "t") t[max.key] = data.translation[max.key];
+  else r[max.key] = data.rotation[max.key];
+  return { ...data, translation: t, rotation: r };
+}
+function applyDeadZone(data, threshold) {
+  const dz = (v) => Math.abs(v) < threshold ? 0 : v;
+  return {
+    ...data,
+    translation: { x: dz(data.translation.x), y: dz(data.translation.y), z: dz(data.translation.z) },
+    rotation: { x: dz(data.rotation.x), y: dz(data.rotation.y), z: dz(data.rotation.z) }
+  };
+}
+function applyAxisRemap(data, map) {
+  return {
+    ...data,
+    translation: {
+      x: 0,
+      y: 0,
+      z: 0,
+      [map.tx]: data.translation.x,
+      [map.ty]: data.translation.y,
+      [map.tz]: data.translation.z
+    },
+    rotation: {
+      x: 0,
+      y: 0,
+      z: 0,
+      [map.rx]: data.rotation.x,
+      [map.ry]: data.rotation.y,
+      [map.rz]: data.rotation.z
+    }
+  };
+}
+
+// src/utils/input-manager.ts
+var InputManager = class extends TypedEmitter {
+  connections = [];
+  storage;
+  _config;
+  get config() {
+    return this._config;
+  }
+  constructor(config, storage) {
+    super();
+    this.storage = storage;
+    const persisted = loadSettings(storage);
+    this._config = mergeConfig(DEFAULT_CONFIG, { ...config, ...persisted });
+  }
+  /** Add a connection to the managed set */
+  addConnection(connection) {
+    this.connections.push(connection);
+    this.wireConnection(connection);
+  }
+  /** Remove a connection */
+  removeConnection(connection) {
+    const idx = this.connections.indexOf(connection);
+    if (idx !== -1) this.connections.splice(idx, 1);
+    connection.removeAllListeners();
+  }
+  /** Connect all managed connections */
+  async connect() {
+    await Promise.all(this.connections.map((c) => c.connect()));
+  }
+  /** Disconnect all managed connections */
+  disconnect() {
+    for (const c of this.connections) c.disconnect();
+  }
+  /** Fetch device info from all connections */
+  async fetchDeviceInfo() {
+    const results = await Promise.all(this.connections.map((c) => c.fetchDeviceInfo()));
+    return results.flat();
+  }
+  /** Update configuration. Persists by default. */
+  updateConfig(partial, persist = true) {
+    this._config = mergeConfig(this._config, partial);
+    if (persist) saveSettings(this._config, this.storage);
+    this.emit("configChange", this._config);
+  }
+  /** Register a callback for processed spatial data. Returns unsubscribe function. */
+  onSpatialData(callback) {
+    this.on("spatialData", callback);
+    return () => this.off("spatialData", callback);
+  }
+  /** Register a callback for button events. Returns unsubscribe function. */
+  onButtonEvent(callback) {
+    this.on("buttonEvent", callback);
+    return () => this.off("buttonEvent", callback);
+  }
+  wireConnection(connection) {
+    connection.on("spatialData", (raw) => {
+      this.emit("rawSpatialData", raw);
+      const processed = this.processSpatialData(raw);
+      if (processed) this.emit("spatialData", processed);
+    });
+    connection.on("buttonEvent", (event) => this.emit("buttonEvent", event));
+    connection.on("stateChange", (state, proto) => this.emit("stateChange", state, proto));
+    connection.on("deviceStatus", (event, device) => this.emit("deviceStatus", event, device));
+  }
+  processSpatialData(raw) {
+    const cfg = this._config;
+    let data = raw;
+    if (cfg.deadZone > 0) data = applyDeadZone(data, cfg.deadZone);
+    if (cfg.dominant) data = applyDominant(data);
+    data = applyFlip(data, cfg.flip);
+    data = applyAxisRemap(data, cfg.axisRemap);
+    data = applySensitivity(data, cfg.sensitivity);
+    if (cfg.lockPosition) {
+      data = { ...data, translation: { x: 0, y: 0, z: 0 } };
+    }
+    if (cfg.lockRotation) {
+      data = { ...data, rotation: { x: 0, y: 0, z: 0 } };
+    }
+    return data;
+  }
+};
+var SatMouseContext = createContext(null);
+function SatMouseProvider({
+  connectOptions,
+  config: configOverrides,
+  autoConnect = true,
+  children
+}) {
+  const managerRef = useRef(null);
+  if (!managerRef.current) {
+    const connection = new SatMouseConnection(connectOptions);
+    const manager2 = new InputManager(configOverrides);
+    manager2.addConnection(connection);
+    managerRef.current = manager2;
+  }
+  const manager = managerRef.current;
+  const [state, setState] = useState("disconnected");
+  const [protocol, setProtocol] = useState("none");
+  const [config, setConfig] = useState(manager.config);
+  useEffect(() => {
+    const onState = (s, p) => {
+      setState(s);
+      setProtocol(p);
+    };
+    const onConfig = (c) => setConfig({ ...c });
+    manager.on("stateChange", onState);
+    manager.on("configChange", onConfig);
+    if (autoConnect) manager.connect();
+    return () => {
+      manager.off("stateChange", onState);
+      manager.off("configChange", onConfig);
+      manager.disconnect();
+    };
+  }, [manager, autoConnect]);
+  const value = useMemo(
+    () => ({
+      manager,
+      state,
+      protocol,
+      config,
+      updateConfig: (partial) => manager.updateConfig(partial)
+    }),
+    [manager, state, protocol, config]
+  );
+  return /* @__PURE__ */ jsx(SatMouseContext, { value, children });
+}
+function useSatMouse() {
+  const ctx = useContext(SatMouseContext);
+  if (!ctx) throw new Error("useSatMouse must be used within a <SatMouseProvider>");
+  return ctx;
+}
+function useSpatialData() {
+  const { manager } = useSatMouse();
+  const [data, setData] = useState(null);
+  const latestRef = useRef(null);
+  const rafRef = useRef(0);
+  useEffect(() => {
+    const unsub = manager.onSpatialData((d) => {
+      latestRef.current = d;
+      if (!rafRef.current) {
+        rafRef.current = requestAnimationFrame(() => {
+          rafRef.current = 0;
+          setData(latestRef.current);
+        });
+      }
+    });
+    return () => {
+      unsub();
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [manager]);
+  return data;
+}
+function useRawSpatialData() {
+  const { manager } = useSatMouse();
+  const [data, setData] = useState(null);
+  const latestRef = useRef(null);
+  const rafRef = useRef(0);
+  useEffect(() => {
+    const handler = (d) => {
+      latestRef.current = d;
+      if (!rafRef.current) {
+        rafRef.current = requestAnimationFrame(() => {
+          rafRef.current = 0;
+          setData(latestRef.current);
+        });
+      }
+    };
+    manager.on("rawSpatialData", handler);
+    return () => {
+      manager.off("rawSpatialData", handler);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [manager]);
+  return data;
+}
+function useButtonEvent(callback) {
+  const { manager } = useSatMouse();
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    const handler = (e) => callbackRef.current(e);
+    return manager.onButtonEvent(handler);
+  }, [manager]);
+}
+function ConnectionStatus({ className }) {
+  const { state, protocol } = useSatMouse();
+  return /* @__PURE__ */ jsxs("div", { className, "data-state": state, children: [
+    /* @__PURE__ */ jsx("span", { "data-role": "dot", "data-state": state }),
+    /* @__PURE__ */ jsx("span", { "data-role": "text", children: state === "connected" ? "Connected" : state === "connecting" ? "Connecting..." : "Disconnected" }),
+    protocol !== "none" && /* @__PURE__ */ jsx("span", { "data-role": "protocol", children: protocol })
+  ] });
+}
+function DeviceInfo({ className, timeout = 5e3 }) {
+  const { manager, state } = useSatMouse();
+  const [devices, setDevices] = useState([]);
+  const [fetchState, setFetchState] = useState("loading");
+  const timeoutRef = useRef(void 0);
+  const poll = useCallback(
+    (bridgeConnected) => {
+      if (!bridgeConnected) {
+        setFetchState("loading");
+        return;
+      }
+      setFetchState("loading");
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        setFetchState("empty");
+      }, timeout);
+      manager.fetchDeviceInfo().then((result) => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        setDevices(result);
+        setFetchState(result.length > 0 ? "connected" : "empty");
+      }).catch(() => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        setFetchState("error");
+      });
+    },
+    [manager, timeout]
+  );
+  useEffect(() => {
+    poll(state === "connected");
+    const onStatus = () => poll(true);
+    manager.on("deviceStatus", onStatus);
+    return () => {
+      manager.off("deviceStatus", onStatus);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [manager, state, poll]);
+  if (fetchState === "loading" && state !== "connected") {
+    return /* @__PURE__ */ jsxs("div", { className, "data-state": "loading", children: [
+      /* @__PURE__ */ jsx("span", { "data-role": "message", children: "Waiting for bridge..." }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-role": "launch",
+          onClick: () => launchSatMouse(),
+          role: "button",
+          tabIndex: 0,
+          children: "Launch SatMouse"
+        }
+      )
+    ] });
+  }
+  if (fetchState === "loading") {
+    return /* @__PURE__ */ jsx("div", { className, "data-state": "loading", children: /* @__PURE__ */ jsx("span", { "data-role": "message", children: "Detecting devices..." }) });
+  }
+  if (fetchState === "error" || fetchState === "empty") {
+    return /* @__PURE__ */ jsxs("div", { className, "data-state": "empty", children: [
+      /* @__PURE__ */ jsx("span", { "data-role": "message", children: "No device connected" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-role": "hint",
+          onClick: () => poll(state === "connected"),
+          role: "button",
+          tabIndex: 0,
+          children: "Click to retry"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className, "data-state": "connected", children: devices.map((d) => /* @__PURE__ */ jsxs("div", { "data-role": "device", children: [
+    /* @__PURE__ */ jsx("span", { "data-role": "model", children: d.model ?? d.name }),
+    /* @__PURE__ */ jsx("span", { "data-role": "vendor", children: d.vendor }),
+    /* @__PURE__ */ jsx("span", { "data-role": "connection", children: formatConnectionType(d.connectionType) })
+  ] }, d.id)) });
+}
+function formatConnectionType(type) {
+  switch (type) {
+    case "usb":
+      return "USB";
+    case "wireless":
+      return "Wireless";
+    case "bluetooth":
+      return "Bluetooth";
+    default:
+      return "";
+  }
+}
+var FLIP_AXES = ["tx", "ty", "tz", "rx", "ry", "rz"];
+function mapSlider(v) {
+  return 1e-4 * Math.pow(500, v / 100);
+}
+function unmapSlider(v) {
+  return 100 * Math.log(v / 1e-4) / Math.log(500);
+}
+function SettingsPanel({ className }) {
+  const { config, updateConfig } = useSatMouse();
+  const onFlip = useCallback(
+    (axis) => {
+      updateConfig({ flip: { ...config.flip, [axis]: !config.flip[axis] } });
+    },
+    [config.flip, updateConfig]
+  );
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("section", { "data-section": "sensitivity", children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        "Translation",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 100,
+            value: Math.round(unmapSlider(config.sensitivity.translation)),
+            onChange: (e) => updateConfig({ sensitivity: { ...config.sensitivity, translation: mapSlider(+e.target.value) } })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: config.sensitivity.translation.toFixed(4) })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "Rotation",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 100,
+            value: Math.round(unmapSlider(config.sensitivity.rotation)),
+            onChange: (e) => updateConfig({ sensitivity: { ...config.sensitivity, rotation: mapSlider(+e.target.value) } })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: config.sensitivity.rotation.toFixed(4) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("section", { "data-section": "flip", children: FLIP_AXES.map((axis) => /* @__PURE__ */ jsxs("label", { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: config.flip[axis],
+          onChange: () => onFlip(axis)
+        }
+      ),
+      axis.toUpperCase()
+    ] }, axis)) }),
+    /* @__PURE__ */ jsxs("section", { "data-section": "toggles", children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: config.lockPosition,
+            onChange: () => updateConfig({ lockPosition: !config.lockPosition })
+          }
+        ),
+        "Lock Position"
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: config.lockRotation,
+            onChange: () => updateConfig({ lockRotation: !config.lockRotation })
+          }
+        ),
+        "Lock Rotation"
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: config.dominant,
+            onChange: () => updateConfig({ dominant: !config.dominant })
+          }
+        ),
+        "Dominant"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("section", { "data-section": "deadzone", children: /* @__PURE__ */ jsxs("label", { children: [
+      "Dead Zone",
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: 100,
+          value: config.deadZone,
+          onChange: (e) => updateConfig({ deadZone: +e.target.value })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: config.deadZone })
+    ] }) })
+  ] });
+}
+function DebugPanel({ className }) {
+  const { state, protocol } = useSatMouse();
+  const raw = useRawSpatialData();
+  const [fps, setFps] = useState(0);
+  const countRef = useRef(0);
+  useEffect(() => {
+    countRef.current++;
+  });
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFps(countRef.current);
+      countRef.current = 0;
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { "data-role": "connection", children: [
+      /* @__PURE__ */ jsx("span", { "data-role": "label", children: "State" }),
+      /* @__PURE__ */ jsx("span", { "data-role": "value", children: state })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { "data-role": "connection", children: [
+      /* @__PURE__ */ jsx("span", { "data-role": "label", children: "Protocol" }),
+      /* @__PURE__ */ jsx("span", { "data-role": "value", children: protocol })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { "data-role": "connection", children: [
+      /* @__PURE__ */ jsx("span", { "data-role": "label", children: "Rate" }),
+      /* @__PURE__ */ jsxs("span", { "data-role": "value", children: [
+        fps,
+        " fps"
+      ] })
+    ] }),
+    raw && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { "data-role": "axis", children: [
+        /* @__PURE__ */ jsx("span", { children: "TX" }),
+        /* @__PURE__ */ jsx("span", { children: Math.round(raw.translation.x) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { "data-role": "axis", children: [
+        /* @__PURE__ */ jsx("span", { children: "TY" }),
+        /* @__PURE__ */ jsx("span", { children: Math.round(raw.translation.y) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { "data-role": "axis", children: [
+        /* @__PURE__ */ jsx("span", { children: "TZ" }),
+        /* @__PURE__ */ jsx("span", { children: Math.round(raw.translation.z) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { "data-role": "axis", children: [
+        /* @__PURE__ */ jsx("span", { children: "RX" }),
+        /* @__PURE__ */ jsx("span", { children: Math.round(raw.rotation.x) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { "data-role": "axis", children: [
+        /* @__PURE__ */ jsx("span", { children: "RY" }),
+        /* @__PURE__ */ jsx("span", { children: Math.round(raw.rotation.y) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { "data-role": "axis", children: [
+        /* @__PURE__ */ jsx("span", { children: "RZ" }),
+        /* @__PURE__ */ jsx("span", { children: Math.round(raw.rotation.z) })
+      ] })
+    ] })
+  ] });
+}
+
+export { ConnectionStatus, DebugPanel, DeviceInfo, SatMouseContext, SatMouseProvider, SettingsPanel, useButtonEvent, useRawSpatialData, useSatMouse, useSpatialData };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map