@zaflun/lumio-sdk 0.1.0

package/dist/index.js

@@ -0,0 +1,876 @@
+// src/core/lumio.tsx
+import { createRoot } from "react-dom/client";
+var RENDER_TIMEOUT_MS = 1e4;
+var hasRendered = false;
+var renderTimeout = null;
+function startRenderTimeout() {
+  if (renderTimeout) return;
+  renderTimeout = setTimeout(() => {
+    if (!hasRendered) {
+      console.error(
+        "[Lumio SDK] Extension did not call Lumio.render() within 10 seconds. Terminating."
+      );
+      window.parent.postMessage(
+        {
+          type: "ERROR",
+          code: "RENDER_TIMEOUT",
+          message: "Extension did not render within 10 seconds"
+        },
+        "*"
+      );
+    }
+  }, RENDER_TIMEOUT_MS);
+}
+if (typeof window !== "undefined") {
+  startRenderTimeout();
+}
+var Lumio = {
+  render(element, options) {
+    hasRendered = true;
+    if (renderTimeout) {
+      clearTimeout(renderTimeout);
+      renderTimeout = null;
+    }
+    let rootElement = document.getElementById("lumio-root");
+    if (!rootElement) {
+      rootElement = document.createElement("div");
+      rootElement.id = "lumio-root";
+      document.body.appendChild(rootElement);
+    }
+    const root = createRoot(rootElement);
+    root.render(element);
+    window.parent.postMessage({ type: "READY" }, "*");
+    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 }) {
+  return React.createElement("Box", { style }, children);
+}
+
+// src/components/VStack.tsx
+import React2 from "react";
+function VStack({ children, gap, style }) {
+  return React2.createElement("VStack", { gap, style }, children);
+}
+
+// src/components/HStack.tsx
+import React3 from "react";
+function HStack({ children, gap, style }) {
+  return React3.createElement("HStack", { gap, style }, children);
+}
+
+// src/components/CompactView.tsx
+import React4 from "react";
+function CompactView({ title, children }) {
+  return React4.createElement("CompactView", { title }, children);
+}
+
+// src/components/List.tsx
+import React5 from "react";
+function List({ items, renderItem, emptyText }) {
+  if (items.length === 0) {
+    return React5.createElement("List", { emptyText, items: [] });
+  }
+  const children = items.map((item, index) => renderItem(item, index));
+  return React5.createElement("List", { items, emptyText }, ...children);
+}
+
+// src/components/Text.tsx
+import React6 from "react";
+function Text({ content, variant = "default" }) {
+  return React6.createElement("Text", { content, variant });
+}
+
+// src/components/Image.tsx
+import React7 from "react";
+function Image({ src, alt, objectFit }) {
+  return React7.createElement("Image", { src, alt, objectFit });
+}
+
+// src/components/Button.tsx
+import React8 from "react";
+function Button({ label, onClick, variant = "default", disabled = false }) {
+  return React8.createElement("Button", { label, onClick, variant, disabled });
+}
+
+// src/components/Toggle.tsx
+import React9 from "react";
+function Toggle({ label, checked, onChange }) {
+  return React9.createElement("Toggle", { label, checked, onChange });
+}
+
+// src/components/TextField.tsx
+import React10 from "react";
+function TextField({ label, value, onChange, placeholder }) {
+  return React10.createElement("TextField", { label, value, onChange, placeholder });
+}
+
+// src/components/TextArea.tsx
+import React11 from "react";
+function TextArea({ label, value, onChange, placeholder, rows = 3 }) {
+  return React11.createElement("TextArea", { label, value, onChange, placeholder, rows });
+}
+
+// src/components/NumberField.tsx
+import React12 from "react";
+function NumberField({ label, value, onChange, min, max, step }) {
+  return React12.createElement("NumberField", { label, value, onChange, min, max, step });
+}
+
+// src/components/Dropdown.tsx
+import React13 from "react";
+function Dropdown({ label, value, options, onChange }) {
+  return React13.createElement("Dropdown", { label, value, options, onChange });
+}
+
+// src/components/Slider.tsx
+import React14 from "react";
+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/renderer/bridge-context.ts
+var bridgeInstance = null;
+function getBridge() {
+  if (!bridgeInstance) {
+    bridgeInstance = new WorkerBridge();
+  }
+  return bridgeInstance;
+}
+
+// src/hooks/useExtensionStorage.ts
+import { HOST_METHODS, WORKER_METHODS } from "@zaflun/lumio-protocol";
+function useExtensionStorage(key, initialValue) {
+  const [storage, setStorageState] = useState(initialValue);
+  useEffect(() => {
+    const bridge = getBridge();
+    const unsub = bridge.onNotification(
+      HOST_METHODS.STORAGE_UPDATE,
+      (params) => {
+        const p = params;
+        if (p.key === key) {
+          setStorageState(p.value);
+        }
+      }
+    );
+    bridge.request(WORKER_METHODS.STORAGE_GET, { key }).then((result) => {
+      const r = result;
+      if (r && r.value !== void 0) {
+        setStorageState(r.value);
+      }
+    }).catch(() => {
+    });
+    return unsub;
+  }, [key]);
+  const setStorage = useCallback(
+    (value) => {
+      setStorageState(value);
+      const bridge = getBridge();
+      bridge.notify(WORKER_METHODS.STORAGE_SET, { key, value });
+    },
+    [key]
+  );
+  return [storage, setStorage];
+}
+
+// src/hooks/useVisionState.ts
+import { useState as useState2, useCallback as useCallback2 } from "react";
+import { WORKER_METHODS as WORKER_METHODS2 } from "@zaflun/lumio-protocol";
+function useVisionState(key, defaultValue) {
+  const [value, setValueState] = useState2(defaultValue);
+  const setValue = useCallback2(
+    (newValue) => {
+      setValueState(newValue);
+      const bridge = getBridge();
+      bridge.notify(WORKER_METHODS2.STORAGE_SET, { key, value: newValue });
+    },
+    [key]
+  );
+  return [value, setValue];
+}
+
+// src/hooks/useExtensionContext.ts
+import { useState as useState3, useEffect as useEffect2 } from "react";
+import { HOST_METHODS as HOST_METHODS2 } from "@zaflun/lumio-protocol";
+var defaultContext = {
+  extensionId: null,
+  target: null,
+  overlayId: null,
+  interactiveUrl: null
+};
+function useExtensionContext() {
+  const [context, setContext] = useState3(defaultContext);
+  useEffect2(() => {
+    const bridge = getBridge();
+    const unsub = bridge.onNotification(
+      HOST_METHODS2.LIFECYCLE_INIT,
+      (params) => {
+        const p = params;
+        setContext({
+          extensionId: p.extensionId ?? null,
+          target: p.target ?? null,
+          overlayId: p.installId ?? null,
+          interactiveUrl: p.interactiveUrl ?? null
+        });
+      }
+    );
+    return unsub;
+  }, []);
+  return context;
+}
+
+// src/hooks/useLumioEvent.ts
+import { useState as useState4, useEffect as useEffect3 } from "react";
+import { HOST_METHODS as HOST_METHODS3 } from "@zaflun/lumio-protocol";
+function useLumioEvent(eventType) {
+  const [eventData, setEventData] = useState4(null);
+  useEffect3(() => {
+    const bridge = getBridge();
+    const unsub = bridge.onNotification(
+      HOST_METHODS3.EVENT_PLATFORM,
+      (params) => {
+        const p = params;
+        if (p.eventType === eventType) {
+          setEventData(p.data ?? null);
+        }
+      }
+    );
+    return unsub;
+  }, [eventType]);
+  return eventData;
+}
+
+// src/hooks/useLumioConfig.ts
+import { useState as useState5, useEffect as useEffect4, useCallback as useCallback3 } from "react";
+import { HOST_METHODS as HOST_METHODS4 } from "@zaflun/lumio-protocol";
+function useLumioConfig() {
+  const [config, setConfigState] = useState5({});
+  useEffect4(() => {
+    const bridge = getBridge();
+    const unsub = bridge.onNotification(
+      HOST_METHODS4.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
+        });
+      }
+    );
+    return unsub;
+  }, []);
+  const setConfig = useCallback3(
+    (newConfig) => {
+      setConfigState(newConfig);
+    },
+    []
+  );
+  return [config, setConfig];
+}
+
+// src/hooks/useLumioTheme.ts
+import { useState as useState6, useEffect as useEffect5 } from "react";
+import { HOST_METHODS as HOST_METHODS5 } from "@zaflun/lumio-protocol";
+var DEFAULT_THEME = {
+  colors: {
+    primary: "#6366f1",
+    secondary: "#8b5cf6",
+    accent: "#06b6d4",
+    background: "transparent",
+    surface: "rgba(15, 23, 42, 0.8)",
+    text: "#f8fafc",
+    muted: "#94a3b8",
+    border: "rgba(148, 163, 184, 0.2)"
+  },
+  fonts: {
+    heading: "inherit",
+    body: "inherit"
+  },
+  borderRadius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px"
+  },
+  spacing: 8
+};
+function useLumioTheme() {
+  const [theme, setTheme] = useState6(DEFAULT_THEME);
+  useEffect5(() => {
+    const bridge = getBridge();
+    const unsubInit = bridge.onNotification(
+      HOST_METHODS5.LIFECYCLE_INIT,
+      (params) => {
+        const p = params;
+        if (p.theme) {
+          setTheme((prev) => ({ ...prev, ...p.theme }));
+        }
+      }
+    );
+    const unsubTheme = bridge.onNotification(
+      HOST_METHODS5.THEME_CHANGE,
+      (params) => {
+        const p = params;
+        if (p.theme) {
+          setTheme((prev) => ({ ...prev, ...p.theme }));
+        }
+      }
+    );
+    return () => {
+      unsubInit();
+      unsubTheme();
+    };
+  }, []);
+  return theme;
+}
+
+// src/hooks/useLumioIdentity.ts
+import { useState as useState7, useEffect as useEffect6 } from "react";
+import { HOST_METHODS as HOST_METHODS6 } from "@zaflun/lumio-protocol";
+var defaultIdentity = {
+  userId: null,
+  accountId: null,
+  role: null
+};
+function useLumioIdentity() {
+  const [identity, setIdentity] = useState7(defaultIdentity);
+  useEffect6(() => {
+    const bridge = getBridge();
+    const unsub = bridge.onNotification(
+      HOST_METHODS6.LIFECYCLE_INIT,
+      (params) => {
+        const p = params;
+        setIdentity({
+          userId: p.userId ?? null,
+          accountId: p.accountId ?? null,
+          role: p.role ?? null
+        });
+      }
+    );
+    return unsub;
+  }, []);
+  return identity;
+}
+
+// src/hooks/useLumioAction.ts
+import { useState as useState8, useCallback as useCallback4, useRef } from "react";
+function useLumioAction(action) {
+  const [data, setData] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(false);
+  const [error, setError] = useState8(null);
+  const actionRef = useRef(action);
+  actionRef.current = action;
+  const execute = useCallback4(
+    (params = {}) => {
+      setIsLoading(true);
+      setError(null);
+      const bridge = getBridge();
+      bridge.request("action.execute", { action, params }).then((result) => {
+        setIsLoading(false);
+        setData(result ?? null);
+        setError(null);
+      }).catch((err) => {
+        setIsLoading(false);
+        setError(err instanceof Error ? err.message : "Unknown error");
+        setData(null);
+      });
+    },
+    [action]
+  );
+  return { execute, data, isLoading, error };
+}
+
+// src/hooks/useQuery.ts
+import { useState as useState9, useEffect as useEffect7, useCallback as useCallback5, useRef as useRef2 } from "react";
+import { WORKER_METHODS as WORKER_METHODS3 } from "@zaflun/lumio-protocol";
+function useQuery(functionName, params) {
+  const [data, setData] = useState9(null);
+  const [isLoading, setIsLoading] = useState9(false);
+  const [error, setError] = useState9(null);
+  const fnRef = useRef2(functionName);
+  fnRef.current = functionName;
+  const sendQuery = useCallback5(() => {
+    setIsLoading(true);
+    setError(null);
+    const bridge = getBridge();
+    bridge.request(WORKER_METHODS3.SERVER_QUERY, { fn: functionName, params: params ?? {} }).then((result) => {
+      setIsLoading(false);
+      setData(result ?? null);
+      setError(null);
+    }).catch((err) => {
+      setIsLoading(false);
+      setError(err instanceof Error ? err.message : "Unknown error");
+      setData(null);
+    });
+  }, [functionName, params]);
+  useEffect7(() => {
+    sendQuery();
+  }, [functionName]);
+  return { data, isLoading, error, refetch: sendQuery };
+}
+
+// src/hooks/useMutation.ts
+import { useState as useState10, useCallback as useCallback6 } from "react";
+import { WORKER_METHODS as WORKER_METHODS4 } 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(
+    (params = {}) => {
+      setIsLoading(true);
+      setError(null);
+      const bridge = getBridge();
+      return bridge.request(WORKER_METHODS4.SERVER_MUTATION, { fn: functionName, params }).then((result) => {
+        setIsLoading(false);
+        setData(result ?? null);
+        setError(null);
+        return result;
+      }).catch((err) => {
+        setIsLoading(false);
+        const message = err instanceof Error ? err.message : "Unknown error";
+        setError(message);
+        setData(null);
+        throw err;
+      });
+    },
+    [functionName]
+  );
+  const mutateAsync = useCallback6(
+    (params) => sendMutation(params),
+    [sendMutation]
+  );
+  const mutate = useCallback6(
+    (params) => {
+      sendMutation(params).catch(() => {
+      });
+    },
+    [sendMutation]
+  );
+  return { mutate, mutateAsync, data, isLoading, error };
+}
+
+// src/animation/keyframes.ts
+var registry = /* @__PURE__ */ new Map();
+var counter = 0;
+function camelToKebab(str) {
+  return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+}
+function keyframesToCSS(name, def) {
+  const stops = Object.entries(def).map(([stop, block]) => {
+    const props = Object.entries(block).map(([prop, value]) => `  ${camelToKebab(prop)}: ${value};`).join("\n");
+    return `  ${stop} {
+${props}
+  }`;
+  }).join("\n");
+  return `@keyframes ${name} {
+${stops}
+}`;
+}
+function defineKeyframes(definition) {
+  const hash = JSON.stringify(definition);
+  const existing = registry.get(hash);
+  if (existing !== void 0) {
+    return existing;
+  }
+  const name = `lumio-kf-${counter++}`;
+  registry.set(hash, name);
+  return name;
+}
+function getRegisteredCSS() {
+  const parts = [];
+  for (const [hash, name] of registry.entries()) {
+    const def = JSON.parse(hash);
+    parts.push(keyframesToCSS(name, def));
+  }
+  return parts.join("\n\n");
+}
+function flushKeyframes() {
+  const css = getRegisteredCSS();
+  if (!css) return;
+  try {
+    getBridge().notify("ui.keyframes", { css });
+  } catch {
+  }
+}
+
+// src/animation/presets.ts
+var ANIMATION_PRESETS = {
+  // Basic
+  fadeIn: { from: { opacity: "0" }, to: { opacity: "1" } },
+  fadeOut: { from: { opacity: "1" }, to: { opacity: "0" } },
+  zoomIn: { from: { opacity: "0", transform: "scale(0.5)" }, to: { opacity: "1", transform: "scale(1)" } },
+  zoomOut: { from: { opacity: "1", transform: "scale(1)" }, to: { opacity: "0", transform: "scale(0.5)" } },
+  // Slide In/Out
+  slideLeftIn: { from: { opacity: "0", transform: "translateX(-100%)" }, to: { opacity: "1", transform: "translateX(0)" } },
+  slideLeftOut: { from: { opacity: "1", transform: "translateX(0)" }, to: { opacity: "0", transform: "translateX(-100%)" } },
+  slideRightIn: { from: { opacity: "0", transform: "translateX(100%)" }, to: { opacity: "1", transform: "translateX(0)" } },
+  slideRightOut: { from: { opacity: "1", transform: "translateX(0)" }, to: { opacity: "0", transform: "translateX(100%)" } },
+  slideUpIn: { from: { opacity: "0", transform: "translateY(-100%)" }, to: { opacity: "1", transform: "translateY(0)" } },
+  slideUpOut: { from: { opacity: "1", transform: "translateY(0)" }, to: { opacity: "0", transform: "translateY(-100%)" } },
+  slideDownIn: { from: { opacity: "0", transform: "translateY(100%)" }, to: { opacity: "1", transform: "translateY(0)" } },
+  slideDownOut: { from: { opacity: "1", transform: "translateY(0)" }, to: { opacity: "0", transform: "translateY(100%)" } },
+  // Push In/Out (no opacity change)
+  pushLeftIn: { from: { transform: "translateX(100%)" }, to: { transform: "translateX(0)" } },
+  pushLeftOut: { from: { transform: "translateX(0)" }, to: { transform: "translateX(-100%)" } },
+  pushRightIn: { from: { transform: "translateX(-100%)" }, to: { transform: "translateX(0)" } },
+  pushRightOut: { from: { transform: "translateX(0)" }, to: { transform: "translateX(100%)" } },
+  pushUpIn: { from: { transform: "translateY(100%)" }, to: { transform: "translateY(0)" } },
+  pushUpOut: { from: { transform: "translateY(0)" }, to: { transform: "translateY(-100%)" } },
+  pushDownIn: { from: { transform: "translateY(-100%)" }, to: { transform: "translateY(0)" } },
+  pushDownOut: { from: { transform: "translateY(0)" }, to: { transform: "translateY(100%)" } },
+  // Loop
+  pulse: {
+    "0%": { transform: "scale(1)" },
+    "50%": { transform: "scale(1.05)" },
+    "100%": { transform: "scale(1)" }
+  },
+  bounce: {
+    "0%": { transform: "translateY(0)" },
+    "50%": { transform: "translateY(-10px)" },
+    "100%": { transform: "translateY(0)" }
+  }
+};
+function getPreset(name) {
+  return defineKeyframes(ANIMATION_PRESETS[name]);
+}
+
+// src/animation/Animated.tsx
+import React15, { useEffect as useEffect8, useRef as useRef3, useState as useState11 } from "react";
+function resolveAnimation(name) {
+  if (name === void 0) return void 0;
+  try {
+    return getPreset(name);
+  } catch {
+    return name;
+  }
+}
+function Animated({
+  children,
+  in: inProp,
+  out: outProp,
+  loop: loopProp,
+  duration = 300,
+  loopDuration = 1e3,
+  easing = "ease",
+  delay = 0,
+  visible = true,
+  onAnimationEnd
+}) {
+  const [phase, setPhase] = useState11(() => visible ? "in" : "idle");
+  const prevVisibleRef = useRef3(visible);
+  const timerRef = useRef3(null);
+  function clearTimer() {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }
+  useEffect8(() => {
+    const prevVisible = prevVisibleRef.current;
+    prevVisibleRef.current = visible;
+    if (visible && !prevVisible) {
+      clearTimer();
+      setPhase("in");
+    } else if (!visible && prevVisible) {
+      clearTimer();
+      setPhase("out");
+    }
+  }, [visible]);
+  useEffect8(() => {
+    if (phase === "in") {
+      const totalDuration = duration + delay;
+      if (loopProp !== void 0) {
+        timerRef.current = setTimeout(() => {
+          setPhase("loop");
+        }, totalDuration);
+      } else {
+        if (onAnimationEnd) {
+          timerRef.current = setTimeout(() => {
+            onAnimationEnd();
+          }, totalDuration);
+        }
+      }
+    } else if (phase === "out" && onAnimationEnd) {
+      const totalDuration = duration + delay;
+      timerRef.current = setTimeout(() => {
+        onAnimationEnd();
+      }, totalDuration);
+    }
+    return () => clearTimer();
+  }, [phase]);
+  const animationStyles = {};
+  if (phase === "in" && inProp !== void 0) {
+    const animName = resolveAnimation(inProp);
+    if (animName !== void 0) {
+      animationStyles.animationName = animName;
+      animationStyles.animationDuration = `${duration}ms`;
+      animationStyles.animationTimingFunction = easing;
+      animationStyles.animationDelay = `${delay}ms`;
+      animationStyles.animationFillMode = "forwards";
+      animationStyles.animationIterationCount = 1;
+    }
+  } else if (phase === "loop" && loopProp !== void 0) {
+    const animName = resolveAnimation(loopProp);
+    if (animName !== void 0) {
+      animationStyles.animationName = animName;
+      animationStyles.animationDuration = `${loopDuration}ms`;
+      animationStyles.animationTimingFunction = easing;
+      animationStyles.animationDelay = "0ms";
+      animationStyles.animationFillMode = "forwards";
+      animationStyles.animationIterationCount = "infinite";
+    }
+  } else if (phase === "out" && outProp !== void 0) {
+    const animName = resolveAnimation(outProp);
+    if (animName !== void 0) {
+      animationStyles.animationName = animName;
+      animationStyles.animationDuration = `${duration}ms`;
+      animationStyles.animationTimingFunction = easing;
+      animationStyles.animationDelay = `${delay}ms`;
+      animationStyles.animationFillMode = "forwards";
+      animationStyles.animationIterationCount = 1;
+    }
+  }
+  return React15.createElement("Box", { style: animationStyles }, children);
+}
+
+// src/animation/useAnimation.ts
+import { useState as useState12, useCallback as useCallback7 } from "react";
+function resolvePreset(name) {
+  try {
+    return getPreset(name);
+  } catch {
+    return name;
+  }
+}
+function useAnimation() {
+  const [isAnimating, setIsAnimating] = useState12(false);
+  const [currentAnimation, setCurrentAnimation] = useState12(null);
+  const [style, setStyle] = useState12({});
+  const trigger = useCallback7((preset, duration = 300) => {
+    const animationName = resolvePreset(preset);
+    setIsAnimating(true);
+    setCurrentAnimation(preset);
+    setStyle({
+      animationName,
+      animationDuration: `${duration}ms`,
+      animationFillMode: "forwards"
+    });
+    return animationName;
+  }, []);
+  const reset = useCallback7(() => {
+    setIsAnimating(false);
+    setCurrentAnimation(null);
+    setStyle({});
+  }, []);
+  return { trigger, reset, isAnimating, currentAnimation, style };
+}
+
+// src/fonts/localFont.ts
+var registeredFonts = [];
+function formatFromPath(path) {
+  const lower = path.toLowerCase();
+  if (lower.endsWith(".woff2")) return "woff2";
+  if (lower.endsWith(".woff")) return "woff";
+  return "truetype";
+}
+function buildFontFace(family, src, display, weight, style) {
+  const format = formatFromPath(src);
+  const lines = [
+    "@font-face {",
+    `  font-family: "${family}";`,
+    `  src: url("${src}") format("${format}");`,
+    `  font-display: ${display};`
+  ];
+  if (weight !== void 0) {
+    lines.push(`  font-weight: ${weight};`);
+  }
+  if (style !== void 0) {
+    lines.push(`  font-style: ${style};`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+function localFont(options) {
+  const { src, family, weight, style, display = "swap", fallback } = options;
+  const blocks = [];
+  if (typeof src === "string") {
+    blocks.push(buildFontFace(family, src, display, weight, style));
+  } else {
+    for (const source of src) {
+      blocks.push(
+        buildFontFace(
+          family,
+          source.path,
+          display,
+          source.weight ?? weight,
+          source.style ?? style
+        )
+      );
+    }
+  }
+  for (const block of blocks) {
+    registeredFonts.push(block);
+  }
+  const css = blocks.join("\n\n");
+  try {
+    getBridge().notify("ui.keyframes", { css });
+  } catch {
+  }
+  const families = [family, ...fallback ?? []].join(", ");
+  return { fontFamily: families };
+}
+export {
+  ANIMATION_PRESETS,
+  Animated,
+  Box,
+  Button,
+  CompactView,
+  Dropdown,
+  HStack,
+  Image,
+  List,
+  Lumio,
+  NumberField,
+  Slider,
+  Text,
+  TextArea,
+  TextField,
+  Toggle,
+  VStack,
+  WorkerBridge,
+  defineKeyframes,
+  flushKeyframes,
+  getPreset,
+  localFont,
+  useAnimation,
+  useExtensionContext,
+  useExtensionStorage,
+  useLumioAction,
+  useLumioConfig,
+  useLumioEvent,
+  useLumioIdentity,
+  useLumioTheme,
+  useMutation,
+  useQuery,
+  useVisionState
+};