@zaflun/lumio-sdk 0.3.0 → 0.6.6

package/dist/index.js

@@ -3,6 +3,15 @@ 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 +25,7 @@ function startRenderTimeout() {
           code: "RENDER_TIMEOUT",
           message: "Extension did not render within 10 seconds"
         },
-        "*"
+        hostOrigin()
       );
     }
   }, RENDER_TIMEOUT_MS);
@@ -39,7 +48,7 @@ var Lumio = {
     }
     const root = createRoot(rootElement);
     root.render(element);
-    window.parent.postMessage({ type: "READY" }, "*");
+    window.parent.postMessage({ type: "READY" }, hostOrigin());
     void options;
   }
 };
@@ -242,8 +251,116 @@ function Slider({ label, value, onChange, min, max, step = 1 }) {
   return React14.createElement("Slider", { label, value, onChange, min, max, step });
 }
 
-// src/hooks/useExtensionStorage.ts
-import { useState, useEffect, useCallback } from "react";
+// src/components/IconPicker.tsx
+import React15 from "react";
+function IconPicker({
+  value,
+  onChange,
+  sources,
+  size,
+  placeholder
+}) {
+  return React15.createElement("IconPicker", {
+    value,
+    onChange,
+    sources,
+    size,
+    placeholder
+  });
+}
+
+// src/components/IconDisplay.tsx
+import React16 from "react";
+function IconDisplay({ icon, size, className }) {
+  return React16.createElement("IconDisplay", { icon, size, className });
+}
+
+// src/components/EditorInput.tsx
+import React17 from "react";
+function EditorInput({ value, onChange, placeholder, type, min, max, step, unit, label, id }) {
+  return React17.createElement("EditorInput", { value, onChange, placeholder, type, min, max, step, unit, label, id });
+}
+
+// src/components/EditorTextarea.tsx
+import React18 from "react";
+function EditorTextarea({ value, onChange, placeholder, rows, label, id }) {
+  return React18.createElement("EditorTextarea", { value, onChange, placeholder, rows, label, id });
+}
+
+// src/components/EditorSelect.tsx
+import React19 from "react";
+function EditorSelect({ value, onChange, options, label, id }) {
+  return React19.createElement("EditorSelect", { value, onChange, options, label, id });
+}
+
+// src/components/EditorCheckbox.tsx
+import React20 from "react";
+function EditorCheckbox({ checked, onChange, label, id }) {
+  return React20.createElement("EditorCheckbox", { checked, onChange, label, id });
+}
+
+// src/components/EditorSlider.tsx
+import React21 from "react";
+function EditorSlider({ value, onChange, min, max, step, unit, label, id }) {
+  return React21.createElement("EditorSlider", { value, onChange, min, max, step, unit, label, id });
+}
+
+// src/components/EditorColorPicker.tsx
+import React22 from "react";
+function EditorColorPicker(props) {
+  return React22.createElement("EditorColorPicker", props);
+}
+
+// src/components/EditorGroup.tsx
+import React23 from "react";
+function EditorGroup({ label, collapsed, children }) {
+  return React23.createElement("EditorGroup", { label, collapsed }, children);
+}
+
+// src/components/EditorLabel.tsx
+import React24 from "react";
+function EditorLabel({ text, htmlFor, required }) {
+  return React24.createElement("EditorLabel", { text, htmlFor, required });
+}
+
+// src/components/EditorDivider.tsx
+import React25 from "react";
+function EditorDivider() {
+  return React25.createElement("EditorDivider", {});
+}
+
+// src/components/EditorInfo.tsx
+import React26 from "react";
+function EditorInfo({ content }) {
+  return React26.createElement("EditorInfo", { content });
+}
+
+// src/components/EditorFontRow.tsx
+import React27 from "react";
+function EditorFontRow(props) {
+  return React27.createElement("EditorFontRow", props);
+}
+
+// src/components/EditorButton.tsx
+import React28 from "react";
+function EditorButton(props) {
+  return React28.createElement("EditorButton", props);
+}
+
+// src/components/EditorFontPicker.tsx
+import React29 from "react";
+function EditorFontPicker(props) {
+  return React29.createElement("EditorFontPicker", props);
+}
+
+// src/components/EditorChannelRow.tsx
+import React30 from "react";
+function EditorChannelRow(props) {
+  return React30.createElement("EditorChannelRow", props);
+}
+
+// src/hooks/useEditorAction.ts
+import { useCallback } from "react";
 
 // src/renderer/bridge-context.ts
 var bridgeInstance = null;
@@ -254,10 +371,44 @@ function getBridge() {
   return bridgeInstance;
 }
 
+// src/hooks/useEditorAction.ts
+function useEditorAction() {
+  const dispatch = useCallback((action, payload) => {
+    const bridge = getBridge();
+    bridge.notify("ui.action", { action, ...payload });
+  }, []);
+  return { dispatch };
+}
+
+// src/hooks/useIconPicker.ts
+import { useState, useCallback as useCallback2 } from "react";
+var DEFAULT_SOURCES = ["lucide", "emoji", "emote", "upload"];
+function useIconPicker(options) {
+  const sources = options?.sources ?? DEFAULT_SOURCES;
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState(null);
+  const open = useCallback2(() => setIsOpen(true), []);
+  const close = useCallback2(() => setIsOpen(false), []);
+  const select = useCallback2(
+    (icon) => {
+      setSelected(icon);
+      setIsOpen(false);
+      options?.onSelect?.(icon);
+    },
+    [options?.onSelect]
+  );
+  const clear = useCallback2(() => {
+    setSelected(null);
+    options?.onSelect?.(null);
+  }, [options?.onSelect]);
+  return { isOpen, selected, open, close, select, clear, sources };
+}
+
 // src/hooks/useExtensionStorage.ts
+import { useState as useState2, useEffect, useCallback as useCallback3 } from "react";
 import { HOST_METHODS, WORKER_METHODS } from "@zaflun/lumio-protocol";
 function useExtensionStorage(key, initialValue) {
-  const [storage, setStorageState] = useState(initialValue);
+  const [storage, setStorageState] = useState2(initialValue);
   useEffect(() => {
     const bridge = getBridge();
     const unsub = bridge.onNotification(
@@ -278,7 +429,7 @@ function useExtensionStorage(key, initialValue) {
     });
     return unsub;
   }, [key]);
-  const setStorage = useCallback(
+  const setStorage = useCallback3(
     (value) => {
       setStorageState(value);
       const bridge = getBridge();
@@ -290,10 +441,10 @@ function useExtensionStorage(key, initialValue) {
 }
 
 // src/hooks/useVisionState.ts
-import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { useState as useState3, useEffect as useEffect2, useCallback as useCallback4 } from "react";
 import { HOST_METHODS as HOST_METHODS2, WORKER_METHODS as WORKER_METHODS2 } from "@zaflun/lumio-protocol";
 function useVisionState(key, defaultValue) {
-  const [value, setValueState] = useState2(defaultValue);
+  const [value, setValueState] = useState3(defaultValue);
   useEffect2(() => {
     const bridge = getBridge();
     const unsub = bridge.onNotification(
@@ -314,7 +465,7 @@ function useVisionState(key, defaultValue) {
     });
     return unsub;
   }, [key]);
-  const setValue = useCallback2(
+  const setValue = useCallback4(
     (newValue) => {
       setValueState(newValue);
       const bridge = getBridge();
@@ -326,7 +477,7 @@ function useVisionState(key, defaultValue) {
 }
 
 // src/hooks/useExtensionContext.ts
-import { useState as useState3, useEffect as useEffect3 } from "react";
+import { useState as useState4, useEffect as useEffect3 } from "react";
 import { HOST_METHODS as HOST_METHODS3 } from "@zaflun/lumio-protocol";
 var defaultContext = {
   extensionId: null,
@@ -335,7 +486,7 @@ var defaultContext = {
   interactiveUrl: null
 };
 function useExtensionContext() {
-  const [context, setContext] = useState3(defaultContext);
+  const [context, setContext] = useState4(defaultContext);
   useEffect3(() => {
     const bridge = getBridge();
     const unsub = bridge.onNotification(
@@ -356,10 +507,10 @@ function useExtensionContext() {
 }
 
 // src/hooks/useLumioEvent.ts
-import { useState as useState4, useEffect as useEffect4 } from "react";
+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] = useState4(null);
+  const [eventData, setEventData] = useState5(null);
   useEffect4(() => {
     const bridge = getBridge();
     const unsub = bridge.onNotification(
@@ -377,11 +528,24 @@ function useLumioEvent(eventType) {
 }
 
 // src/hooks/useLumioConfig.ts
-import { useState as useState5, useEffect as useEffect5, useCallback as useCallback3 } from "react";
-import { HOST_METHODS as HOST_METHODS5 } from "@zaflun/lumio-protocol";
+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";
+function hasShim() {
+  return typeof window !== "undefined" && typeof window.__lumio_config === "function";
+}
 function useLumioConfig() {
-  const [config, setConfigState] = useState5({});
+  const [config, setConfigState] = useState6(() => {
+    if (hasShim()) return window.__lumio_config();
+    return {};
+  });
   useEffect5(() => {
+    if (hasShim()) {
+      const unsub2 = window.__lumio_on_config((newConfig) => {
+        setConfigState(newConfig);
+      });
+      setConfigState(window.__lumio_config());
+      return unsub2;
+    }
     const bridge = getBridge();
     const unsub = bridge.onNotification(
       HOST_METHODS5.LIFECYCLE_INIT,
@@ -397,11 +561,30 @@ function useLumioConfig() {
         });
       }
     );
-    return unsub;
+    const unsubConfig = bridge.onNotification(
+      HOST_METHODS5.CONFIG_UPDATE,
+      (params) => {
+        const p = params;
+        setConfigState(p);
+      }
+    );
+    return () => {
+      unsub();
+      unsubConfig();
+    };
   }, []);
-  const setConfig = useCallback3(
-    (newConfig) => {
-      setConfigState(newConfig);
+  const setConfig = useCallback5(
+    (newConfigOrUpdater) => {
+      setConfigState((prev) => {
+        const next = typeof newConfigOrUpdater === "function" ? newConfigOrUpdater(prev) : newConfigOrUpdater;
+        if (hasShim()) {
+          window.__lumio_set_config(next);
+        } else {
+          const bridge = getBridge();
+          bridge.notify(WORKER_METHODS3.CONFIG_UPDATE, next);
+        }
+        return next;
+      });
     },
     []
   );
@@ -409,7 +592,7 @@ function useLumioConfig() {
 }
 
 // src/hooks/useLumioTheme.ts
-import { useState as useState6, useEffect as useEffect6 } from "react";
+import { useState as useState7, useEffect as useEffect6 } from "react";
 import { HOST_METHODS as HOST_METHODS6 } from "@zaflun/lumio-protocol";
 var DEFAULT_THEME = {
   colors: {
@@ -434,7 +617,7 @@ var DEFAULT_THEME = {
   spacing: 8
 };
 function useLumioTheme() {
-  const [theme, setTheme] = useState6(DEFAULT_THEME);
+  const [theme, setTheme] = useState7(DEFAULT_THEME);
   useEffect6(() => {
     const bridge = getBridge();
     const unsubInit = bridge.onNotification(
@@ -464,7 +647,7 @@ function useLumioTheme() {
 }
 
 // src/hooks/useLumioIdentity.ts
-import { useState as useState7, useEffect as useEffect7 } from "react";
+import { useState as useState8, useEffect as useEffect7 } from "react";
 import { HOST_METHODS as HOST_METHODS7 } from "@zaflun/lumio-protocol";
 var defaultIdentity = {
   userId: null,
@@ -472,7 +655,7 @@ var defaultIdentity = {
   role: null
 };
 function useLumioIdentity() {
-  const [identity, setIdentity] = useState7(defaultIdentity);
+  const [identity, setIdentity] = useState8(defaultIdentity);
   useEffect7(() => {
     const bridge = getBridge();
     const unsub = bridge.onNotification(
@@ -492,14 +675,14 @@ function useLumioIdentity() {
 }
 
 // src/hooks/useLumioAction.ts
-import { useState as useState8, useCallback as useCallback4, useRef } from "react";
+import { useState as useState9, useCallback as useCallback6, useRef } from "react";
 function useLumioAction(action) {
-  const [data, setData] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(false);
-  const [error, setError] = useState8(null);
+  const [data, setData] = useState9(null);
+  const [isLoading, setIsLoading] = useState9(false);
+  const [error, setError] = useState9(null);
   const actionRef = useRef(action);
   actionRef.current = action;
-  const execute = useCallback4(
+  const execute = useCallback6(
     (params = {}) => {
       setIsLoading(true);
       setError(null);
@@ -519,20 +702,40 @@ function useLumioAction(action) {
   return { execute, data, isLoading, error };
 }
 
+// src/hooks/useLumioSound.ts
+import { useCallback as useCallback7 } from "react";
+import { WORKER_METHODS as WORKER_METHODS4 } 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 });
+  }, []);
+  const stopSound = useCallback7(async (soundId) => {
+    const bridge = getBridge();
+    await bridge.request(WORKER_METHODS4.SOUND_STOP, { sound_id: soundId });
+  }, []);
+  const getSounds = useCallback7(async () => {
+    const bridge = getBridge();
+    const result = await bridge.request(WORKER_METHODS4.SOUND_LIST, {});
+    return result ?? [];
+  }, []);
+  return { playSound, stopSound, getSounds };
+}
+
 // src/hooks/useQuery.ts
-import { useState as useState9, useEffect as useEffect8, useCallback as useCallback5, useRef as useRef2 } from "react";
-import { WORKER_METHODS as WORKER_METHODS3 } from "@zaflun/lumio-protocol";
+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";
 function useQuery(functionName, params) {
-  const [data, setData] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(false);
-  const [error, setError] = useState9(null);
+  const [data, setData] = useState10(null);
+  const [isLoading, setIsLoading] = useState10(false);
+  const [error, setError] = useState10(null);
   const fnRef = useRef2(functionName);
   fnRef.current = functionName;
-  const sendQuery = useCallback5(() => {
+  const sendQuery = useCallback8(() => {
     setIsLoading(true);
     setError(null);
     const bridge = getBridge();
-    bridge.request(WORKER_METHODS3.SERVER_QUERY, { fn: functionName, params: params ?? {} }).then((result) => {
+    bridge.request(WORKER_METHODS5.SERVER_QUERY, { fn: functionName, params: params ?? {} }).then((result) => {
       setIsLoading(false);
       setData(result ?? null);
       setError(null);
@@ -549,18 +752,18 @@ function useQuery(functionName, params) {
 }
 
 // src/hooks/useMutation.ts
-import { useState as useState10, useCallback as useCallback6 } from "react";
-import { WORKER_METHODS as WORKER_METHODS4 } from "@zaflun/lumio-protocol";
+import { useState as useState11, useCallback as useCallback9 } from "react";
+import { WORKER_METHODS as WORKER_METHODS6 } from "@zaflun/lumio-protocol";
 function useMutation(functionName) {
-  const [data, setData] = useState10(null);
-  const [isLoading, setIsLoading] = useState10(false);
-  const [error, setError] = useState10(null);
-  const sendMutation = useCallback6(
+  const [data, setData] = useState11(null);
+  const [isLoading, setIsLoading] = useState11(false);
+  const [error, setError] = useState11(null);
+  const sendMutation = useCallback9(
     (params = {}) => {
       setIsLoading(true);
       setError(null);
       const bridge = getBridge();
-      return bridge.request(WORKER_METHODS4.SERVER_MUTATION, { fn: functionName, params }).then((result) => {
+      return bridge.request(WORKER_METHODS6.SERVER_MUTATION, { fn: functionName, params }).then((result) => {
         setIsLoading(false);
         setData(result ?? null);
         setError(null);
@@ -575,11 +778,11 @@ function useMutation(functionName) {
     },
     [functionName]
   );
-  const mutateAsync = useCallback6(
+  const mutateAsync = useCallback9(
     (params) => sendMutation(params),
     [sendMutation]
   );
-  const mutate = useCallback6(
+  const mutate = useCallback9(
     (params) => {
       sendMutation(params).catch(() => {
       });
@@ -675,7 +878,7 @@ function getPreset(name) {
 }
 
 // src/animation/Animated.tsx
-import React15, { useEffect as useEffect9, useRef as useRef3, useState as useState11 } from "react";
+import React31, { useEffect as useEffect9, useRef as useRef3, useState as useState12 } from "react";
 function resolveAnimation(name) {
   if (name === void 0) return void 0;
   try {
@@ -696,7 +899,7 @@ function Animated({
   visible = true,
   onAnimationEnd
 }) {
-  const [phase, setPhase] = useState11(() => visible ? "in" : "idle");
+  const [phase, setPhase] = useState12(() => visible ? "in" : "idle");
   const prevVisibleRef = useRef3(visible);
   const timerRef = useRef3(null);
   function clearTimer() {
@@ -770,11 +973,11 @@ function Animated({
       animationStyles.animationIterationCount = 1;
     }
   }
-  return React15.createElement("Box", { style: animationStyles }, children);
+  return React31.createElement("Box", { style: animationStyles }, children);
 }
 
 // src/animation/useAnimation.ts
-import { useState as useState12, useCallback as useCallback7 } from "react";
+import { useState as useState13, useCallback as useCallback10 } from "react";
 function resolvePreset(name) {
   try {
     return getPreset(name);
@@ -783,10 +986,10 @@ function resolvePreset(name) {
   }
 }
 function useAnimation() {
-  const [isAnimating, setIsAnimating] = useState12(false);
-  const [currentAnimation, setCurrentAnimation] = useState12(null);
-  const [style, setStyle] = useState12({});
-  const trigger = useCallback7((preset, duration = 300) => {
+  const [isAnimating, setIsAnimating] = useState13(false);
+  const [currentAnimation, setCurrentAnimation] = useState13(null);
+  const [style, setStyle] = useState13({});
+  const trigger = useCallback10((preset, duration = 300) => {
     const animationName = resolvePreset(preset);
     setIsAnimating(true);
     setCurrentAnimation(preset);
@@ -797,7 +1000,7 @@ function useAnimation() {
     });
     return animationName;
   }, []);
-  const reset = useCallback7(() => {
+  const reset = useCallback10(() => {
     setIsAnimating(false);
     setCurrentAnimation(null);
     setStyle({});
@@ -813,12 +1016,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) {
@@ -866,7 +1078,23 @@ export {
   Button,
   CompactView,
   Dropdown,
+  EditorButton,
+  EditorChannelRow,
+  EditorCheckbox,
+  EditorColorPicker,
+  EditorDivider,
+  EditorFontPicker,
+  EditorFontRow,
+  EditorGroup,
+  EditorInfo,
+  EditorInput,
+  EditorLabel,
+  EditorSelect,
+  EditorSlider,
+  EditorTextarea,
   HStack,
+  IconDisplay,
+  IconPicker,
   Image,
   List,
   Lumio,
@@ -883,12 +1111,15 @@ export {
   getPreset,
   localFont,
   useAnimation,
+  useEditorAction,
   useExtensionContext,
   useExtensionStorage,
+  useIconPicker,
   useLumioAction,
   useLumioConfig,
   useLumioEvent,
   useLumioIdentity,
+  useLumioSound,
   useLumioTheme,
   useMutation,
   useQuery,