@zaflun/lumio-sdk 0.6.3 → 0.10.0

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import React, { CSSProperties } from 'react';
-import { LumioEventType, LumioActionType, Sound } from '@zaflun/lumio-protocol';
+import { LumioEventType, LumioEventPayloadMap, LumioActionType, Sound } from '@zaflun/lumio-protocol';
 export { Sound } from '@zaflun/lumio-protocol';
 
 interface RenderOptions {
-    target: "editor" | "layer" | "interactive";
+    target: "editor" | "layer";
 }
 declare const Lumio: {
     render(element: React.ReactElement, options: RenderOptions): void;
@@ -338,19 +338,37 @@ declare function useVisionState<T>(key: string, defaultValue: T): [T, (value: T)
 
 interface ExtensionContext {
     extensionId: string | null;
-    target: "editor" | "layer" | "interactive" | null;
+    target: "editor" | "layer" | null;
     overlayId: string | null;
-    interactiveUrl: string | null;
 }
+/**
+ * The install this surface renders. Set from `lifecycle.init`, which the host
+ * sends before the bundle runs, so the first render already has it.
+ */
 declare function useExtensionContext(): ExtensionContext;
 
-declare function useLumioEvent(eventType: LumioEventType): unknown | null;
+/**
+ * The latest payload of one platform event type, or `null` until the first
+ * one arrives. The payload type follows `type`, e.g.
+ * `useLumioEvent("twitch:cheer")?.bits` is a `number`.
+ */
+declare function useLumioEvent<K extends LumioEventType>(eventType: K): LumioEventPayloadMap[K] | null;
+
+/**
+ * Calls `cb` with the payload of every message a handler of this install
+ * pushes on `topic` with `ctx.realtime.push(topic, payload)`. Runs on every
+ * rendered surface of the install (editor and layer). The host delivers what
+ * arrives while the surface is open; nothing is replayed.
+ *
+ * `cb` may change between renders without re-subscribing.
+ */
+declare function useRealtime<T = unknown>(topic: string, cb: (payload: T) => void): void;
 
 interface LumioConfig {
     extension_id?: string;
     install_id?: string;
     account_id?: string;
-    target?: "editor" | "layer" | "interactive";
+    target?: "editor" | "layer";
     permissions?: string[];
     settings?: Record<string, unknown>;
 }
@@ -361,6 +379,11 @@ declare global {
         __lumio_on_config?: (fn: (config: LumioConfig) => void) => () => void;
     }
 }
+/**
+ * The install's config. Starts from `lifecycle.init`, which the host sends
+ * before the bundle runs, so the first render already has it. A
+ * `config.update` from the host replaces only the fields it carries.
+ */
 declare function useLumioConfig(): [LumioConfig, (configOrUpdater: LumioConfig | ((prev: LumioConfig) => LumioConfig)) => void];
 
 interface OverlayTheme {
@@ -389,11 +412,12 @@ interface OverlayTheme {
  * Returns the active overlay/widget theme variables.
  *
  * Extensions use this to style themselves consistently with the
- * overlay or widget they're rendered in. Only relevant for `layer`
- * and `interactive` targets (stream overlay, widget pages).
+ * overlay or widget they're rendered in. Only relevant for the `layer`
+ * target (stream overlay, widget pages).
  *
- * Theme is provided via lifecycle.init and updated via theme.change when
- * the user switches the overlay/widget theme.
+ * The theme comes from `lifecycle.init`, which the host sends before the
+ * bundle runs, so the first render already has it. A `theme.change` from the
+ * host updates it.
  */
 declare function useLumioTheme(): OverlayTheme;
 
@@ -402,10 +426,15 @@ interface LumioIdentity {
     accountId: string | null;
     role: string | null;
 }
+/**
+ * Who this surface renders for. Set from `lifecycle.init`, which the host
+ * sends before the bundle runs, so the first render already has it.
+ */
 declare function useLumioIdentity(): LumioIdentity;
 
 interface UseLumioActionResult {
-    execute: (params?: Record<string, unknown>) => void;
+    /** Runs the action. Resolves once it settled; a failure lands in `error`, never as a rejection. */
+    execute: (params?: Record<string, unknown>) => Promise<void>;
     data: unknown | null;
     isLoading: boolean;
     error: string | null;
@@ -690,4 +719,4 @@ interface LocalFontDefinition {
 }
 declare function localFont(options: LocalFontOptions): LocalFontDefinition;
 
-export { ANIMATION_PRESETS, Animated, type AnimatedProps, type AnimationPresetName, Box, type BoxProps, Button, type ButtonProps, CompactView, type CompactViewProps, Dropdown, type DropdownOption, type DropdownProps, EditorButton, type EditorButtonProps, EditorChannelRow, type EditorChannelRowProps, EditorCheckbox, type EditorCheckboxProps, EditorColorPicker, type EditorColorPickerProps, EditorDivider, EditorFontPicker, type EditorFontPickerProps, EditorFontRow, type EditorFontRowProps, EditorGroup, type EditorGroupProps, EditorInfo, type EditorInfoProps, EditorInput, type EditorInputProps, EditorLabel, type EditorLabelProps, EditorSelect, type EditorSelectOption, type EditorSelectProps, EditorSlider, type EditorSliderProps, EditorTextarea, type EditorTextareaProps, type ExtensionContext, type FontDisplay, type FontSource, HStack, type HStackProps, IconDisplay, type IconDisplayProps, IconPicker, type IconPickerProps, type IconPickerSize, type IconSource, type IconValue, Image, type ImageProps, type KeyframeBlock, type KeyframeDefinition, List, type ListProps, type LocalFontDefinition, type LocalFontOptions, Lumio, type LumioConfig, type LumioIdentity, NumberField, type NumberFieldProps, type OverlayTheme, type RenderOptions, Slider, type SliderProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Toggle, type ToggleProps, type UseAnimationResult, type UseIconPickerOptions, type UseIconPickerResult, type UseLumioActionResult, type UseLumioSoundResult, type UseMutationResult, type UseQueryResult, VStack, type VStackProps, type VisionStyle, WorkerBridge, defineKeyframes, flushKeyframes, getPreset, localFont, useAnimation, useEditorAction, useExtensionContext, useExtensionStorage, useIconPicker, useLumioAction, useLumioConfig, useLumioEvent, useLumioIdentity, useLumioSound, useLumioTheme, useMutation, useQuery, useVisionState };
+export { ANIMATION_PRESETS, Animated, type AnimatedProps, type AnimationPresetName, Box, type BoxProps, Button, type ButtonProps, CompactView, type CompactViewProps, Dropdown, type DropdownOption, type DropdownProps, EditorButton, type EditorButtonProps, EditorChannelRow, type EditorChannelRowProps, EditorCheckbox, type EditorCheckboxProps, EditorColorPicker, type EditorColorPickerProps, EditorDivider, EditorFontPicker, type EditorFontPickerProps, EditorFontRow, type EditorFontRowProps, EditorGroup, type EditorGroupProps, EditorInfo, type EditorInfoProps, EditorInput, type EditorInputProps, EditorLabel, type EditorLabelProps, EditorSelect, type EditorSelectOption, type EditorSelectProps, EditorSlider, type EditorSliderProps, EditorTextarea, type EditorTextareaProps, type ExtensionContext, type FontDisplay, type FontSource, HStack, type HStackProps, IconDisplay, type IconDisplayProps, IconPicker, type IconPickerProps, type IconPickerSize, type IconSource, type IconValue, Image, type ImageProps, type KeyframeBlock, type KeyframeDefinition, List, type ListProps, type LocalFontDefinition, type LocalFontOptions, Lumio, type LumioConfig, type LumioIdentity, NumberField, type NumberFieldProps, type OverlayTheme, type RenderOptions, Slider, type SliderProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Toggle, type ToggleProps, type UseAnimationResult, type UseIconPickerOptions, type UseIconPickerResult, type UseLumioActionResult, type UseLumioSoundResult, type UseMutationResult, type UseQueryResult, VStack, type VStackProps, type VisionStyle, WorkerBridge, defineKeyframes, flushKeyframes, getPreset, localFont, useAnimation, useEditorAction, useExtensionContext, useExtensionStorage, useIconPicker, useLumioAction, useLumioConfig, useLumioEvent, useLumioIdentity, useLumioSound, useLumioTheme, useMutation, useQuery, useRealtime, useVisionState };

package/dist/index.js

@@ -1,8 +1,23 @@
+import {
+  WorkerBridge,
+  getBridge,
+  getInitParams
+} from "./chunk-GVAYWB5X.js";
+
 // src/core/lumio.tsx
 import { createRoot } from "react-dom/client";
 var RENDER_TIMEOUT_MS = 1e4;
 var hasRendered = false;
 var renderTimeout = null;
+function hostOrigin() {
+  try {
+    if (typeof document !== "undefined" && document.referrer) {
+      return new URL(document.referrer).origin;
+    }
+  } catch {
+  }
+  return "*";
+}
 function startRenderTimeout() {
   if (renderTimeout) return;
   renderTimeout = setTimeout(() => {
@@ -16,7 +31,7 @@ function startRenderTimeout() {
           code: "RENDER_TIMEOUT",
           message: "Extension did not render within 10 seconds"
         },
-        "*"
+        hostOrigin()
       );
     }
   }, RENDER_TIMEOUT_MS);
@@ -39,121 +54,11 @@ var Lumio = {
     }
     const root = createRoot(rootElement);
     root.render(element);
-    window.parent.postMessage({ type: "READY" }, "*");
+    window.parent.postMessage({ type: "READY" }, hostOrigin());
     void options;
   }
 };
 
-// src/bridge/WorkerBridge.ts
-var WorkerBridge = class {
-  notificationHandlers = /* @__PURE__ */ new Map();
-  requestHandlers = /* @__PURE__ */ new Map();
-  pendingRequests = /* @__PURE__ */ new Map();
-  requestCounter = 0;
-  requestTimeout;
-  messageListener = null;
-  destroyed = false;
-  constructor(options) {
-    this.requestTimeout = options?.requestTimeout ?? 3e4;
-    this.messageListener = this.handleMessage.bind(this);
-    globalThis.addEventListener("message", this.messageListener);
-  }
-  notify(method, params) {
-    const msg = {
-      jsonrpc: "2.0",
-      method,
-      ...params !== void 0 ? { params } : {}
-    };
-    globalThis.postMessage(msg);
-  }
-  request(method, params) {
-    const id = `req_${++this.requestCounter}`;
-    const msg = {
-      jsonrpc: "2.0",
-      id,
-      method,
-      ...params !== void 0 ? { params } : {}
-    };
-    return new Promise((resolve, reject) => {
-      const timer = setTimeout(() => {
-        this.pendingRequests.delete(id);
-        reject(new Error("Request timeout"));
-      }, this.requestTimeout);
-      this.pendingRequests.set(id, { resolve, reject, timer });
-      globalThis.postMessage(msg);
-    });
-  }
-  onNotification(method, handler) {
-    if (!this.notificationHandlers.has(method)) {
-      this.notificationHandlers.set(method, /* @__PURE__ */ new Set());
-    }
-    this.notificationHandlers.get(method).add(handler);
-    return () => {
-      this.notificationHandlers.get(method)?.delete(handler);
-    };
-  }
-  onRequest(method, handler) {
-    this.requestHandlers.set(method, handler);
-  }
-  destroy() {
-    this.destroyed = true;
-    if (this.messageListener) {
-      globalThis.removeEventListener("message", this.messageListener);
-      this.messageListener = null;
-    }
-    for (const { timer, reject } of this.pendingRequests.values()) {
-      if (timer) clearTimeout(timer);
-      reject(new Error("Bridge destroyed"));
-    }
-    this.pendingRequests.clear();
-    this.notificationHandlers.clear();
-    this.requestHandlers.clear();
-  }
-  handleMessage(event) {
-    if (this.destroyed) return;
-    const data = event.data;
-    if (!data || typeof data !== "object" || data.jsonrpc !== "2.0") return;
-    if ("id" in data && !("method" in data)) {
-      const pending = this.pendingRequests.get(data.id);
-      if (pending) {
-        this.pendingRequests.delete(data.id);
-        if (pending.timer) clearTimeout(pending.timer);
-        if (data.error) {
-          pending.reject(new Error(data.error.message));
-        } else {
-          pending.resolve(data.result);
-        }
-      }
-      return;
-    }
-    if ("id" in data && "method" in data) {
-      const handler = this.requestHandlers.get(data.method);
-      if (handler) {
-        handler(data.params).then((result) => {
-          const response = { jsonrpc: "2.0", id: data.id, result };
-          globalThis.postMessage(response);
-        }).catch((err) => {
-          const response = {
-            jsonrpc: "2.0",
-            id: data.id,
-            error: { code: -32603, message: err.message }
-          };
-          globalThis.postMessage(response);
-        });
-      }
-      return;
-    }
-    if ("method" in data && !("id" in data)) {
-      const handlers = this.notificationHandlers.get(data.method);
-      if (handlers) {
-        for (const handler of handlers) {
-          handler(data.params);
-        }
-      }
-    }
-  }
-};
-
 // src/components/Box.tsx
 import React from "react";
 function Box({ children, style }) {
@@ -352,17 +257,6 @@ function EditorChannelRow(props) {
 
 // src/hooks/useEditorAction.ts
 import { useCallback } from "react";
-
-// src/renderer/bridge-context.ts
-var bridgeInstance = null;
-function getBridge() {
-  if (!bridgeInstance) {
-    bridgeInstance = new WorkerBridge();
-  }
-  return bridgeInstance;
-}
-
-// src/hooks/useEditorAction.ts
 function useEditorAction() {
   const dispatch = useCallback((action, payload) => {
     const bridge = getBridge();
@@ -473,24 +367,25 @@ import { HOST_METHODS as HOST_METHODS3 } from "@zaflun/lumio-protocol";
 var defaultContext = {
   extensionId: null,
   target: null,
-  overlayId: null,
-  interactiveUrl: null
+  overlayId: null
 };
+function fromInit(p) {
+  return {
+    extensionId: p.extensionId ?? null,
+    target: p.target ?? null,
+    overlayId: p.installId ?? null
+  };
+}
 function useExtensionContext() {
-  const [context, setContext] = useState4(defaultContext);
+  const [context, setContext] = useState4(() => {
+    const init = getInitParams();
+    return init ? fromInit(init) : defaultContext;
+  });
   useEffect3(() => {
     const bridge = getBridge();
     const unsub = bridge.onNotification(
       HOST_METHODS3.LIFECYCLE_INIT,
-      (params) => {
-        const p = params;
-        setContext({
-          extensionId: p.extensionId ?? null,
-          target: p.target ?? null,
-          overlayId: p.installId ?? null,
-          interactiveUrl: p.interactiveUrl ?? null
-        });
-      }
+      (params) => setContext(fromInit(params))
     );
     return unsub;
   }, []);
@@ -501,7 +396,9 @@ function useExtensionContext() {
 import { useState as useState5, useEffect as useEffect4 } from "react";
 import { HOST_METHODS as HOST_METHODS4 } from "@zaflun/lumio-protocol";
 function useLumioEvent(eventType) {
-  const [eventData, setEventData] = useState5(null);
+  const [eventData, setEventData] = useState5(
+    null
+  );
   useEffect4(() => {
     const bridge = getBridge();
     const unsub = bridge.onNotification(
@@ -518,18 +415,46 @@ function useLumioEvent(eventType) {
   return eventData;
 }
 
+// src/hooks/useRealtime.ts
+import { useEffect as useEffect5, useRef } from "react";
+import { HOST_METHODS as HOST_METHODS5 } from "@zaflun/lumio-protocol";
+function useRealtime(topic, cb) {
+  const cbRef = useRef(cb);
+  cbRef.current = cb;
+  useEffect5(() => {
+    const bridge = getBridge();
+    return bridge.onNotification(HOST_METHODS5.SERVER_REALTIME, (params) => {
+      const p = params;
+      if (p && p.topic === topic) {
+        cbRef.current(p.payload);
+      }
+    });
+  }, [topic]);
+}
+
 // src/hooks/useLumioConfig.ts
-import { useState as useState6, useEffect as useEffect5, useCallback as useCallback5 } from "react";
-import { HOST_METHODS as HOST_METHODS5, WORKER_METHODS as WORKER_METHODS3 } from "@zaflun/lumio-protocol";
+import { useState as useState6, useEffect as useEffect6, useCallback as useCallback5 } from "react";
+import { HOST_METHODS as HOST_METHODS6, WORKER_METHODS as WORKER_METHODS3 } from "@zaflun/lumio-protocol";
 function hasShim() {
   return typeof window !== "undefined" && typeof window.__lumio_config === "function";
 }
+function fromInit2(p) {
+  return {
+    extension_id: p.extensionId,
+    install_id: p.installId,
+    account_id: p.accountId,
+    target: p.target,
+    permissions: p.permissions,
+    settings: p.settings
+  };
+}
 function useLumioConfig() {
   const [config, setConfigState] = useState6(() => {
     if (hasShim()) return window.__lumio_config();
-    return {};
+    const init = getInitParams();
+    return init ? fromInit2(init) : {};
   });
-  useEffect5(() => {
+  useEffect6(() => {
     if (hasShim()) {
       const unsub2 = window.__lumio_on_config((newConfig) => {
         setConfigState(newConfig);
@@ -539,24 +464,14 @@ function useLumioConfig() {
     }
     const bridge = getBridge();
     const unsub = bridge.onNotification(
-      HOST_METHODS5.LIFECYCLE_INIT,
-      (params) => {
-        const p = params;
-        setConfigState({
-          extension_id: p.extensionId,
-          install_id: p.installId,
-          account_id: p.accountId,
-          target: p.target,
-          permissions: p.permissions,
-          settings: p.settings
-        });
-      }
+      HOST_METHODS6.LIFECYCLE_INIT,
+      (params) => setConfigState(fromInit2(params))
     );
     const unsubConfig = bridge.onNotification(
-      HOST_METHODS5.CONFIG_UPDATE,
+      HOST_METHODS6.CONFIG_UPDATE,
       (params) => {
         const p = params;
-        setConfigState(p);
+        setConfigState((prev) => ({ ...prev, ...p }));
       }
     );
     return () => {
@@ -583,8 +498,8 @@ function useLumioConfig() {
 }
 
 // src/hooks/useLumioTheme.ts
-import { useState as useState7, useEffect as useEffect6 } from "react";
-import { HOST_METHODS as HOST_METHODS6 } from "@zaflun/lumio-protocol";
+import { useState as useState7, useEffect as useEffect7 } from "react";
+import { HOST_METHODS as HOST_METHODS7 } from "@zaflun/lumio-protocol";
 var DEFAULT_THEME = {
   colors: {
     primary: "#6366f1",
@@ -608,11 +523,14 @@ var DEFAULT_THEME = {
   spacing: 8
 };
 function useLumioTheme() {
-  const [theme, setTheme] = useState7(DEFAULT_THEME);
-  useEffect6(() => {
+  const [theme, setTheme] = useState7(() => {
+    const initTheme = getInitParams()?.theme;
+    return initTheme ? { ...DEFAULT_THEME, ...initTheme } : DEFAULT_THEME;
+  });
+  useEffect7(() => {
     const bridge = getBridge();
     const unsubInit = bridge.onNotification(
-      HOST_METHODS6.LIFECYCLE_INIT,
+      HOST_METHODS7.LIFECYCLE_INIT,
       (params) => {
         const p = params;
         if (p.theme) {
@@ -621,7 +539,7 @@ function useLumioTheme() {
       }
     );
     const unsubTheme = bridge.onNotification(
-      HOST_METHODS6.THEME_CHANGE,
+      HOST_METHODS7.THEME_CHANGE,
       (params) => {
         const p = params;
         if (p.theme) {
@@ -638,27 +556,30 @@ function useLumioTheme() {
 }
 
 // src/hooks/useLumioIdentity.ts
-import { useState as useState8, useEffect as useEffect7 } from "react";
-import { HOST_METHODS as HOST_METHODS7 } from "@zaflun/lumio-protocol";
+import { useState as useState8, useEffect as useEffect8 } from "react";
+import { HOST_METHODS as HOST_METHODS8 } from "@zaflun/lumio-protocol";
 var defaultIdentity = {
   userId: null,
   accountId: null,
   role: null
 };
+function fromInit3(p) {
+  return {
+    userId: p.userId ?? null,
+    accountId: p.accountId ?? null,
+    role: p.role ?? null
+  };
+}
 function useLumioIdentity() {
-  const [identity, setIdentity] = useState8(defaultIdentity);
-  useEffect7(() => {
+  const [identity, setIdentity] = useState8(() => {
+    const init = getInitParams();
+    return init ? fromInit3(init) : defaultIdentity;
+  });
+  useEffect8(() => {
     const bridge = getBridge();
     const unsub = bridge.onNotification(
-      HOST_METHODS7.LIFECYCLE_INIT,
-      (params) => {
-        const p = params;
-        setIdentity({
-          userId: p.userId ?? null,
-          accountId: p.accountId ?? null,
-          role: p.role ?? null
-        });
-      }
+      HOST_METHODS8.LIFECYCLE_INIT,
+      (params) => setIdentity(fromInit3(params))
     );
     return unsub;
   }, []);
@@ -666,27 +587,27 @@ function useLumioIdentity() {
 }
 
 // src/hooks/useLumioAction.ts
-import { useState as useState9, useCallback as useCallback6, useRef } from "react";
+import { useState as useState9, useCallback as useCallback6 } from "react";
+import { WORKER_METHODS as WORKER_METHODS4 } from "@zaflun/lumio-protocol";
 function useLumioAction(action) {
   const [data, setData] = useState9(null);
   const [isLoading, setIsLoading] = useState9(false);
   const [error, setError] = useState9(null);
-  const actionRef = useRef(action);
-  actionRef.current = action;
   const execute = useCallback6(
-    (params = {}) => {
+    async (params = {}) => {
       setIsLoading(true);
       setError(null);
-      const bridge = getBridge();
-      bridge.request("action.execute", { action, params }).then((result) => {
-        setIsLoading(false);
-        setData(result ?? null);
+      const request = { action, params };
+      try {
+        const result = await getBridge().request(WORKER_METHODS4.ACTION_EXECUTE, request);
+        setData(result?.data ?? null);
         setError(null);
-      }).catch((err) => {
-        setIsLoading(false);
+      } catch (err) {
         setError(err instanceof Error ? err.message : "Unknown error");
         setData(null);
-      });
+      } finally {
+        setIsLoading(false);
+      }
     },
     [action]
   );
@@ -695,27 +616,27 @@ function useLumioAction(action) {
 
 // src/hooks/useLumioSound.ts
 import { useCallback as useCallback7 } from "react";
-import { WORKER_METHODS as WORKER_METHODS4 } from "@zaflun/lumio-protocol";
+import { WORKER_METHODS as WORKER_METHODS5 } from "@zaflun/lumio-protocol";
 function useLumioSound() {
   const playSound = useCallback7(async (soundId, volume) => {
     const bridge = getBridge();
-    await bridge.request(WORKER_METHODS4.SOUND_PLAY, { sound_id: soundId, volume });
+    await bridge.request(WORKER_METHODS5.SOUND_PLAY, { sound_id: soundId, volume });
   }, []);
   const stopSound = useCallback7(async (soundId) => {
     const bridge = getBridge();
-    await bridge.request(WORKER_METHODS4.SOUND_STOP, { sound_id: soundId });
+    await bridge.request(WORKER_METHODS5.SOUND_STOP, { sound_id: soundId });
   }, []);
   const getSounds = useCallback7(async () => {
     const bridge = getBridge();
-    const result = await bridge.request(WORKER_METHODS4.SOUND_LIST, {});
+    const result = await bridge.request(WORKER_METHODS5.SOUND_LIST, {});
     return result ?? [];
   }, []);
   return { playSound, stopSound, getSounds };
 }
 
 // src/hooks/useQuery.ts
-import { useState as useState10, useEffect as useEffect8, useCallback as useCallback8, useRef as useRef2 } from "react";
-import { WORKER_METHODS as WORKER_METHODS5 } from "@zaflun/lumio-protocol";
+import { useState as useState10, useEffect as useEffect9, useCallback as useCallback8, useRef as useRef2 } from "react";
+import { WORKER_METHODS as WORKER_METHODS6 } from "@zaflun/lumio-protocol";
 function useQuery(functionName, params) {
   const [data, setData] = useState10(null);
   const [isLoading, setIsLoading] = useState10(false);
@@ -726,7 +647,7 @@ function useQuery(functionName, params) {
     setIsLoading(true);
     setError(null);
     const bridge = getBridge();
-    bridge.request(WORKER_METHODS5.SERVER_QUERY, { fn: functionName, params: params ?? {} }).then((result) => {
+    bridge.request(WORKER_METHODS6.SERVER_QUERY, { fn: functionName, params: params ?? {} }).then((result) => {
       setIsLoading(false);
       setData(result ?? null);
       setError(null);
@@ -736,7 +657,7 @@ function useQuery(functionName, params) {
       setData(null);
     });
   }, [functionName, params]);
-  useEffect8(() => {
+  useEffect9(() => {
     sendQuery();
   }, [sendQuery]);
   return { data, isLoading, error, refetch: sendQuery };
@@ -744,7 +665,7 @@ function useQuery(functionName, params) {
 
 // src/hooks/useMutation.ts
 import { useState as useState11, useCallback as useCallback9 } from "react";
-import { WORKER_METHODS as WORKER_METHODS6 } from "@zaflun/lumio-protocol";
+import { WORKER_METHODS as WORKER_METHODS7 } from "@zaflun/lumio-protocol";
 function useMutation(functionName) {
   const [data, setData] = useState11(null);
   const [isLoading, setIsLoading] = useState11(false);
@@ -754,7 +675,7 @@ function useMutation(functionName) {
       setIsLoading(true);
       setError(null);
       const bridge = getBridge();
-      return bridge.request(WORKER_METHODS6.SERVER_MUTATION, { fn: functionName, params }).then((result) => {
+      return bridge.request(WORKER_METHODS7.SERVER_MUTATION, { fn: functionName, params }).then((result) => {
         setIsLoading(false);
         setData(result ?? null);
         setError(null);
@@ -869,7 +790,7 @@ function getPreset(name) {
 }
 
 // src/animation/Animated.tsx
-import React31, { useEffect as useEffect9, useRef as useRef3, useState as useState12 } from "react";
+import React31, { useEffect as useEffect10, useRef as useRef3, useState as useState12 } from "react";
 function resolveAnimation(name) {
   if (name === void 0) return void 0;
   try {
@@ -899,7 +820,7 @@ function Animated({
       timerRef.current = null;
     }
   }
-  useEffect9(() => {
+  useEffect10(() => {
     const prevVisible = prevVisibleRef.current;
     prevVisibleRef.current = visible;
     if (visible && !prevVisible) {
@@ -910,7 +831,7 @@ function Animated({
       setPhase("out");
     }
   }, [visible]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (phase === "in") {
       const totalDuration = duration + delay;
       if (loopProp !== void 0) {
@@ -1007,12 +928,21 @@ function formatFromPath(path) {
   if (lower.endsWith(".woff")) return "woff";
   return "truetype";
 }
+var FAMILY_RE = /^[\w -]+$/;
+function escapeCssUrl(src) {
+  return src.replace(/[\\"\n\r\f]/g, (c) => `\\${c}`);
+}
 function buildFontFace(family, src, display, weight, style) {
+  if (!FAMILY_RE.test(family)) {
+    throw new Error(
+      `Invalid font family "${family}": only letters, digits, spaces, "-" and "_" are allowed.`
+    );
+  }
   const format = formatFromPath(src);
   const lines = [
     "@font-face {",
     `  font-family: "${family}";`,
-    `  src: url("${src}") format("${format}");`,
+    `  src: url("${escapeCssUrl(src)}") format("${format}");`,
     `  font-display: ${display};`
   ];
   if (weight !== void 0) {
@@ -1105,5 +1035,6 @@ export {
   useLumioTheme,
   useMutation,
   useQuery,
+  useRealtime,
   useVisionState
 };