@uptrademedia/site-kit 1.0.1 → 1.0.4

package/dist/chunk-XQJX252G.mjs

@@ -0,0 +1,981 @@
+import { SitemapSync } from './chunk-WPSRS352.mjs';
+import { AnalyticsProvider } from './chunk-FKVJOT2F.mjs';
+import { EngageWidget } from './chunk-BGJLOJ7T.mjs';
+import { configureFormsApi } from './chunk-SMUFNQLM.mjs';
+import { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo, Suspense } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var SignalContext = createContext(null);
+function useSignal() {
+  const context = useContext(SignalContext);
+  if (!context) {
+    throw new Error("useSignal must be used within a SignalBridge");
+  }
+  return context;
+}
+function getApiConfig() {
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.uptrademedia.com" : "https://api.uptrademedia.com";
+  const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+  return { apiUrl, apiKey };
+}
+function getVisitorId() {
+  if (typeof window === "undefined") return "";
+  const key = "_uptrade_vid";
+  let visitorId = localStorage.getItem(key);
+  if (!visitorId) {
+    visitorId = crypto.randomUUID();
+    localStorage.setItem(key, visitorId);
+  }
+  return visitorId;
+}
+function getSessionId() {
+  if (typeof window === "undefined") return "";
+  const key = "_uptrade_sid";
+  let sessionId = sessionStorage.getItem(key);
+  if (!sessionId) {
+    sessionId = crypto.randomUUID();
+    sessionStorage.setItem(key, sessionId);
+  }
+  return sessionId;
+}
+function getDeviceType() {
+  if (typeof window === "undefined") return "desktop";
+  const ua = navigator.userAgent;
+  if (/tablet|ipad|playbook|silk/i.test(ua)) return "tablet";
+  if (/mobile|iphone|ipod|android|blackberry|opera mini|iemobile/i.test(ua)) return "mobile";
+  return "desktop";
+}
+function getBrowser() {
+  if (typeof window === "undefined") return "unknown";
+  const ua = navigator.userAgent;
+  if (ua.includes("Firefox")) return "Firefox";
+  if (ua.includes("Edg")) return "Edge";
+  if (ua.includes("Chrome")) return "Chrome";
+  if (ua.includes("Safari")) return "Safari";
+  return "Other";
+}
+function getOS() {
+  if (typeof window === "undefined") return "unknown";
+  const ua = navigator.userAgent;
+  if (ua.includes("Windows")) return "Windows";
+  if (ua.includes("Mac")) return "macOS";
+  if (ua.includes("iPhone") || ua.includes("iPad")) return "iOS";
+  if (ua.includes("Android")) return "Android";
+  if (ua.includes("Linux")) return "Linux";
+  return "Other";
+}
+function SignalBridge({
+  enabled = true,
+  realtime = true,
+  experiments = true,
+  behaviorTracking = true,
+  children
+}) {
+  const [config, setConfig] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const eventSourceRef = useRef(null);
+  const eventQueueRef = useRef([]);
+  const flushTimeoutRef = useRef(null);
+  const assignmentsRef = useRef(/* @__PURE__ */ new Map());
+  const pageLoadTimeRef = useRef(Date.now());
+  const scrollDepthRef = useRef(0);
+  const clickCountRef = useRef(0);
+  const { apiUrl, apiKey } = getApiConfig();
+  const fetchConfig = useCallback(async () => {
+    if (!apiKey || !enabled) {
+      setLoading(false);
+      return;
+    }
+    try {
+      const response = await fetch(`${apiUrl}/api/public/signal/config`, {
+        headers: {
+          "x-api-key": apiKey,
+          "x-visitor-id": getVisitorId()
+        }
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to fetch Signal config: ${response.statusText}`);
+      }
+      const data = await response.json();
+      setConfig(data.config);
+      setError(null);
+      if (experiments && data.config?.experiments) {
+        for (const exp of data.config.experiments) {
+          if (exp.status === "running") {
+            await loadExperimentAssignment(exp.id);
+          }
+        }
+      }
+    } catch (err) {
+      console.error("[Signal] Config fetch error:", err);
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiUrl, apiKey, enabled, experiments]);
+  const connectSSE = useCallback(() => {
+    if (!apiKey || !enabled || !realtime) return;
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+    const url = `${apiUrl}/api/public/signal/stream?key=${apiKey}`;
+    const eventSource = new EventSource(url);
+    eventSource.addEventListener("config_update", (e) => {
+      try {
+        const { config: newConfig, version } = JSON.parse(e.data);
+        setConfig((prev) => {
+          if (prev?.version !== version) {
+            console.log("[Signal] Config updated to version:", version);
+            return newConfig;
+          }
+          return prev;
+        });
+      } catch (err) {
+        console.error("[Signal] SSE parse error:", err);
+      }
+    });
+    eventSource.addEventListener("experiment_update", (e) => {
+      try {
+        const { experiment_id, action } = JSON.parse(e.data);
+        if (action === "started" || action === "updated") {
+          loadExperimentAssignment(experiment_id);
+        } else if (action === "stopped") {
+          assignmentsRef.current.delete(experiment_id);
+        }
+      } catch (err) {
+        console.error("[Signal] Experiment update error:", err);
+      }
+    });
+    eventSource.onerror = () => {
+      console.warn("[Signal] SSE connection error, reconnecting...");
+      eventSource.close();
+      setTimeout(connectSSE, 5e3);
+    };
+    eventSourceRef.current = eventSource;
+  }, [apiUrl, apiKey, enabled, realtime]);
+  const loadExperimentAssignment = useCallback(async (experimentId) => {
+    const storageKey = `_signal_exp_${experimentId}`;
+    const stored = localStorage.getItem(storageKey);
+    if (stored) {
+      try {
+        const assignment = JSON.parse(stored);
+        if (assignment.expires > Date.now()) {
+          assignmentsRef.current.set(experimentId, assignment);
+          return assignment;
+        }
+      } catch {
+      }
+    }
+    try {
+      const response = await fetch(`${apiUrl}/api/public/signal/experiment/${experimentId}`, {
+        headers: {
+          "x-api-key": apiKey,
+          "x-visitor-id": getVisitorId()
+        }
+      });
+      if (!response.ok) return null;
+      const assignment = await response.json();
+      localStorage.setItem(storageKey, JSON.stringify(assignment));
+      assignmentsRef.current.set(experimentId, assignment);
+      return assignment;
+    } catch (err) {
+      console.error("[Signal] Experiment assignment error:", err);
+      return null;
+    }
+  }, [apiUrl, apiKey]);
+  const getExperiment = useCallback((experimentId) => {
+    return assignmentsRef.current.get(experimentId) || null;
+  }, []);
+  const flushEvents = useCallback(async () => {
+    if (eventQueueRef.current.length === 0) return;
+    const events = [...eventQueueRef.current];
+    eventQueueRef.current = [];
+    try {
+      await fetch(`${apiUrl}/api/public/signal/events`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": apiKey
+        },
+        body: JSON.stringify({
+          visitor_id: getVisitorId(),
+          session_id: getSessionId(),
+          events
+        })
+      });
+    } catch (err) {
+      eventQueueRef.current = [...events, ...eventQueueRef.current];
+      console.error("[Signal] Event flush error:", err);
+    }
+  }, [apiUrl, apiKey]);
+  const trackEvent = useCallback((event) => {
+    if (!enabled || !apiKey) return;
+    const enrichedEvent = {
+      ...event,
+      page_url: window.location.href,
+      page_path: window.location.pathname,
+      referrer: document.referrer,
+      device_type: getDeviceType(),
+      browser: getBrowser(),
+      os: getOS(),
+      viewport_width: window.innerWidth,
+      viewport_height: window.innerHeight,
+      time_on_page: Date.now() - pageLoadTimeRef.current,
+      scroll_depth: scrollDepthRef.current,
+      click_count: clickCountRef.current,
+      experiments: Array.from(assignmentsRef.current.values()).map((a) => ({
+        experiment_id: a.experiment_id,
+        variant_key: a.variant_key
+      })),
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    eventQueueRef.current.push(enrichedEvent);
+    if (flushTimeoutRef.current) {
+      clearTimeout(flushTimeoutRef.current);
+    }
+    flushTimeoutRef.current = setTimeout(flushEvents, 1e3);
+  }, [enabled, apiKey, flushEvents]);
+  const trackOutcome = useCallback(async (outcome) => {
+    if (!enabled || !apiKey) return;
+    try {
+      await fetch(`${apiUrl}/api/public/signal/outcome`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": apiKey
+        },
+        body: JSON.stringify({
+          ...outcome,
+          visitor_id: getVisitorId(),
+          session_id: getSessionId(),
+          experiments: Array.from(assignmentsRef.current.keys()),
+          page_url: window.location.href,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        })
+      });
+    } catch (err) {
+      console.error("[Signal] Outcome tracking error:", err);
+    }
+  }, [apiUrl, apiKey, enabled]);
+  useEffect(() => {
+    if (!behaviorTracking || typeof window === "undefined") return;
+    const handleScroll = () => {
+      const scrollTop = window.scrollY;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const depth = docHeight > 0 ? Math.round(scrollTop / docHeight * 100) : 0;
+      scrollDepthRef.current = Math.max(scrollDepthRef.current, depth);
+    };
+    const handleClick = () => {
+      clickCountRef.current++;
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("click", handleClick);
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        flushEvents();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("beforeunload", flushEvents);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("click", handleClick);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener("beforeunload", flushEvents);
+    };
+  }, [behaviorTracking, flushEvents]);
+  useEffect(() => {
+    fetchConfig();
+  }, [fetchConfig]);
+  useEffect(() => {
+    if (config && realtime) {
+      connectSSE();
+    }
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+      }
+    };
+  }, [config, realtime, connectSSE]);
+  const contextValue = useMemo(() => ({
+    config,
+    loading,
+    error,
+    trackEvent,
+    trackOutcome,
+    getExperiment,
+    refreshConfig: fetchConfig
+  }), [config, loading, error, trackEvent, trackOutcome, getExperiment, fetchConfig]);
+  return /* @__PURE__ */ jsx(SignalContext.Provider, { value: contextValue, children });
+}
+function useSignalConfig() {
+  const { config } = useSignal();
+  return config;
+}
+function useSignalEvent() {
+  const { trackEvent } = useSignal();
+  return trackEvent;
+}
+function useSignalOutcome() {
+  const { trackOutcome } = useSignal();
+  return { trackOutcome };
+}
+function useSignalExperiment(experimentId) {
+  const { getExperiment, config } = useSignal();
+  const assignment = getExperiment(experimentId);
+  const experiment = config?.experiments?.find((e) => e.id === experimentId);
+  const isRunning = experiment?.status === "running";
+  return {
+    assignment: isRunning ? assignment : null,
+    variant: isRunning && assignment ? assignment.variant_key : null,
+    isControl: !assignment || assignment.variant_key === "control"
+  };
+}
+var SiteKitContext = createContext(null);
+function useSiteKit() {
+  const context = useContext(SiteKitContext);
+  if (!context) {
+    throw new Error("useSiteKit must be used within a SiteKitProvider");
+  }
+  return context;
+}
+function SiteKitProvider({
+  children,
+  apiUrl = "https://api.uptrademedia.com",
+  signalUrl = "https://signal.uptrademedia.com",
+  apiKey,
+  analytics,
+  engage,
+  forms,
+  signal,
+  debug = false
+}) {
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.__SITE_KIT_API_URL__ = apiUrl;
+      window.__SITE_KIT_SIGNAL_URL__ = signalUrl;
+      window.__SITE_KIT_API_KEY__ = apiKey;
+      window.__SITE_KIT_DEBUG__ = debug;
+    }
+    configureFormsApi({
+      baseUrl: apiUrl,
+      apiKey
+    });
+  }, [apiUrl, signalUrl, apiKey, debug]);
+  const contextValue = useMemo(
+    () => ({
+      apiUrl,
+      signalUrl,
+      apiKey,
+      analytics,
+      engage,
+      forms,
+      signal,
+      debug,
+      isReady: true
+    }),
+    [apiUrl, signalUrl, apiKey, analytics, engage, forms, signal, debug]
+  );
+  let content = /* @__PURE__ */ jsx(Fragment, { children });
+  if (signal?.enabled) {
+    content = /* @__PURE__ */ jsx(
+      SignalBridge,
+      {
+        enabled: signal.enabled,
+        realtime: signal.realtime !== false,
+        experiments: signal.experiments !== false,
+        behaviorTracking: signal.behaviorTracking !== false,
+        children: content
+      }
+    );
+  }
+  if (analytics?.enabled) {
+    content = /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      AnalyticsProvider,
+      {
+        apiUrl,
+        apiKey,
+        trackPageViews: analytics.trackPageViews !== false,
+        trackWebVitals: analytics.trackWebVitals !== false,
+        trackScrollDepth: analytics.trackScrollDepth !== false,
+        trackClicks: analytics.trackClicks !== false,
+        debug,
+        children: content
+      }
+    ) });
+  }
+  if (engage?.enabled) {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      content,
+      /* @__PURE__ */ jsx(
+        EngageWidget,
+        {
+          apiUrl,
+          apiKey,
+          position: engage.position || "bottom-right",
+          chatEnabled: engage.chatEnabled !== false
+        }
+      )
+    ] });
+  }
+  content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    content,
+    /* @__PURE__ */ jsx(SitemapSync, { debug })
+  ] });
+  return /* @__PURE__ */ jsx(SiteKitContext.Provider, { value: contextValue, children: content });
+}
+var isDevMode = () => {
+  if (typeof window === "undefined") return false;
+  return process.env.NODE_ENV === "development" || window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.search.includes("uptrade_dev=true");
+};
+function ManagedImage({
+  slotId,
+  pagePath,
+  alt,
+  className = "",
+  width,
+  height,
+  objectFit = "cover",
+  fallback,
+  placeholder,
+  onLoad,
+  onError,
+  priority,
+  style,
+  forceDevMode
+}) {
+  const context = useSiteKit();
+  const [imageData, setImageData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [showPicker, setShowPicker] = useState(false);
+  const [devMode] = useState(() => forceDevMode || isDevMode());
+  const currentPath = pagePath ?? (typeof window !== "undefined" ? window.location.pathname : "/");
+  const fetchImage = useCallback(async () => {
+    if (!context?.apiKey || !context?.apiUrl) {
+      setLoading(false);
+      return;
+    }
+    try {
+      const params = new URLSearchParams({ page_path: currentPath });
+      const res = await fetch(
+        `${context.apiUrl}/public/images/slot/${encodeURIComponent(slotId)}?${params}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": context.apiKey
+          }
+        }
+      );
+      if (!res.ok) {
+        throw new Error(`Failed to fetch image: ${res.status}`);
+      }
+      const data = await res.json();
+      setImageData(data.image);
+      setError(null);
+    } catch (err) {
+      console.error("[ManagedImage] Fetch error:", err);
+      setError(err instanceof Error ? err : new Error(String(err)));
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [context?.apiKey, context?.apiUrl, slotId, currentPath, onError]);
+  useEffect(() => {
+    fetchImage();
+  }, [fetchImage]);
+  const objectPosition = imageData ? `${imageData.focal_point_x}% ${imageData.focal_point_y}%` : "50% 50%";
+  const imageUrl = imageData?.public_url || imageData?.external_url || fallback;
+  const handleClick = (e) => {
+    if (devMode) {
+      e.preventDefault();
+      e.stopPropagation();
+      setShowPicker(true);
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `bg-gray-200 animate-pulse ${className}`,
+        style: {
+          width: width ?? "100%",
+          height: height ?? 200,
+          ...style
+        }
+      }
+    );
+  }
+  if (!imageUrl) {
+    if (placeholder) {
+      return /* @__PURE__ */ jsx(Fragment, { children: placeholder });
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: handleClick,
+        className: `
+          bg-gray-100 border-2 border-dashed border-gray-300 
+          flex items-center justify-center text-gray-400
+          ${devMode ? "cursor-pointer hover:border-blue-400 hover:text-blue-500 hover:bg-blue-50" : ""}
+          ${className}
+        `,
+        style: {
+          width: width ?? "100%",
+          height: height ?? 200,
+          ...style
+        },
+        title: devMode ? `Click to add image for slot: ${slotId}` : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-center p-4", children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-12 h-12 mx-auto mb-2",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 1.5,
+                    d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  }
+                )
+              }
+            ),
+            devMode && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Click to add image" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs mt-1", children: slotId })
+          ] }),
+          showPicker && /* @__PURE__ */ jsx(
+            ImagePickerModal,
+            {
+              slotId,
+              pagePath: currentPath,
+              config: context,
+              onClose: () => setShowPicker(false),
+              onSelect: () => {
+                setShowPicker(false);
+                fetchImage();
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative", style: { width, height }, children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imageUrl,
+        alt: imageData?.alt_text || alt || "",
+        title: imageData?.title || void 0,
+        className,
+        style: {
+          objectFit,
+          objectPosition,
+          width: width ?? "100%",
+          height: height ?? "auto",
+          ...style
+        },
+        onLoad,
+        onError: () => onError?.(new Error("Image failed to load")),
+        loading: priority ? "eager" : "lazy",
+        onClick: handleClick
+      }
+    ),
+    devMode && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/0 hover:bg-black/30 transition-colors cursor-pointer flex items-center justify-center opacity-0 hover:opacity-100",
+        onClick: handleClick,
+        children: /* @__PURE__ */ jsx("div", { className: "bg-white/90 px-3 py-1.5 rounded-lg shadow-lg text-sm font-medium text-gray-700", children: "Edit Image" })
+      }
+    ),
+    showPicker && /* @__PURE__ */ jsx(
+      ImagePickerModal,
+      {
+        slotId,
+        pagePath: currentPath,
+        config: context,
+        currentImage: imageData,
+        onClose: () => setShowPicker(false),
+        onSelect: () => {
+          setShowPicker(false);
+          fetchImage();
+        }
+      }
+    )
+  ] });
+}
+function ImagePickerModal({
+  slotId,
+  pagePath,
+  config,
+  currentImage,
+  onClose,
+  onSelect
+}) {
+  const [files, setFiles] = useState([]);
+  const [folders, setFolders] = useState([]);
+  const [currentFolder, setCurrentFolder] = useState("");
+  const [search, setSearch] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
+  const [altText, setAltText] = useState(currentImage?.alt_text || "");
+  const fetchFiles = useCallback(async () => {
+    if (!config?.apiKey || !config?.apiUrl) return;
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      if (currentFolder) params.set("folder", currentFolder);
+      if (search) params.set("search", search);
+      const res = await fetch(
+        `${config.apiUrl}/public/images/files?${params}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": config.apiKey
+          }
+        }
+      );
+      if (res.ok) {
+        const data = await res.json();
+        setFiles(data.files || []);
+        setFolders(data.folders || []);
+      }
+    } catch (err) {
+      console.error("[ImagePicker] Fetch error:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [config?.apiKey, config?.apiUrl, currentFolder, search]);
+  useEffect(() => {
+    fetchFiles();
+  }, [fetchFiles]);
+  const handleSelectFile = async (file) => {
+    if (!config?.apiKey || !config?.apiUrl) return;
+    try {
+      const res = await fetch(
+        `${config.apiUrl}/public/images/slot/${encodeURIComponent(slotId)}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": config.apiKey
+          },
+          body: JSON.stringify({
+            page_path: pagePath,
+            file_id: file.id,
+            alt_text: altText || file.filename
+          })
+        }
+      );
+      if (res.ok) {
+        onSelect();
+      }
+    } catch (err) {
+      console.error("[ImagePicker] Select error:", err);
+    }
+  };
+  const handleUpload = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file || !config?.apiKey || !config?.apiUrl) return;
+    setUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("slot_id", slotId);
+      formData.append("page_path", pagePath);
+      formData.append("folder", currentFolder || "Website/Images");
+      if (altText) formData.append("alt_text", altText);
+      const res = await fetch(`${config.apiUrl}/public/images/upload`, {
+        method: "POST",
+        headers: {
+          "x-api-key": config.apiKey
+        },
+        body: formData
+      });
+      if (res.ok) {
+        onSelect();
+      }
+    } catch (err) {
+      console.error("[ImagePicker] Upload error:", err);
+    } finally {
+      setUploading(false);
+    }
+  };
+  const handleClear = async () => {
+    if (!config?.apiKey || !config?.apiUrl) return;
+    try {
+      const params = new URLSearchParams({ page_path: pagePath });
+      await fetch(
+        `${config.apiUrl}/public/images/slot/${encodeURIComponent(slotId)}?${params}`,
+        {
+          method: "DELETE",
+          headers: {
+            "x-api-key": config.apiKey
+          }
+        }
+      );
+      onSelect();
+    } catch (err) {
+      console.error("[ImagePicker] Clear error:", err);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-[99999] bg-black/50 flex items-center justify-center p-4",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Select Image" }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
+                  "Slot: ",
+                  slotId
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "text-gray-400 hover:text-gray-600 p-2",
+                  children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "p-4 overflow-y-auto", style: { maxHeight: "calc(90vh - 180px)" }, children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-4 mb-4", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    placeholder: "Search images...",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    className: "w-full px-3 py-2 border rounded-lg text-sm"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("label", { className: "px-4 py-2 bg-blue-600 text-white rounded-lg cursor-pointer hover:bg-blue-700 text-sm font-medium flex items-center gap-2", children: [
+                  uploading ? "Uploading..." : "Upload New",
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "file",
+                      accept: "image/*",
+                      onChange: handleUpload,
+                      disabled: uploading,
+                      className: "hidden"
+                    }
+                  )
+                ] }),
+                currentImage?.file_id && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleClear,
+                    className: "px-4 py-2 border border-red-200 text-red-600 rounded-lg hover:bg-red-50 text-sm",
+                    children: "Remove"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Alt text for image...",
+                  value: altText,
+                  onChange: (e) => setAltText(e.target.value),
+                  className: "w-full px-3 py-2 border rounded-lg text-sm"
+                }
+              ) }),
+              folders.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mb-4 flex-wrap", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setCurrentFolder(""),
+                    className: `px-3 py-1 text-sm rounded-full ${!currentFolder ? "bg-blue-100 text-blue-700" : "bg-gray-100 hover:bg-gray-200"}`,
+                    children: "All"
+                  }
+                ),
+                folders.map((folder) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setCurrentFolder(folder),
+                    className: `px-3 py-1 text-sm rounded-full ${currentFolder === folder ? "bg-blue-100 text-blue-700" : "bg-gray-100 hover:bg-gray-200"}`,
+                    children: folder
+                  },
+                  folder
+                ))
+              ] }),
+              loading ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: [...Array(8)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "aspect-square bg-gray-200 rounded-lg animate-pulse" }, i)) }) : files.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-12 text-gray-500", children: [
+                /* @__PURE__ */ jsx("p", { children: "No images found" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "Upload a new image to get started" })
+              ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: files.map((file) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => handleSelectFile(file),
+                  className: `
+                    aspect-square rounded-lg overflow-hidden border-2 transition-all
+                    hover:border-blue-400 hover:shadow-lg
+                    ${currentImage?.file_id === file.id ? "border-blue-500 ring-2 ring-blue-200" : "border-gray-200"}
+                  `,
+                  children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: file.public_url,
+                      alt: file.filename,
+                      className: "w-full h-full object-cover"
+                    }
+                  )
+                },
+                file.id
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "p-4 border-t bg-gray-50 flex justify-end", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                className: "px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg text-sm",
+                children: "Cancel"
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/images/api.ts
+async function fetchManagedImage(config, slotId, pagePath) {
+  const params = new URLSearchParams();
+  if (pagePath) params.set("page_path", pagePath);
+  const res = await fetch(
+    `${config.apiUrl}/public/images/slot/${encodeURIComponent(slotId)}?${params}`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": config.apiKey
+      }
+    }
+  );
+  if (!res.ok) {
+    throw new Error(`Failed to fetch image: ${res.status}`);
+  }
+  return res.json();
+}
+async function fetchManagedImages(config, options) {
+  const params = new URLSearchParams();
+  if (options?.pagePath) params.set("page_path", options.pagePath);
+  if (options?.category) params.set("category", options.category);
+  if (options?.includePlaceholders) params.set("include_placeholders", "true");
+  const res = await fetch(
+    `${config.apiUrl}/public/images?${params}`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": config.apiKey
+      }
+    }
+  );
+  if (!res.ok) {
+    throw new Error(`Failed to fetch images: ${res.status}`);
+  }
+  return res.json();
+}
+async function listImageFiles(config, options) {
+  const params = new URLSearchParams();
+  if (options?.folder) params.set("folder", options.folder);
+  if (options?.search) params.set("search", options.search);
+  const res = await fetch(
+    `${config.apiUrl}/public/images/files?${params}`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": config.apiKey
+      }
+    }
+  );
+  if (!res.ok) {
+    throw new Error(`Failed to list files: ${res.status}`);
+  }
+  return res.json();
+}
+async function uploadImage(config, file, options) {
+  const formData = new FormData();
+  formData.append("file", file);
+  if (options?.slotId) formData.append("slot_id", options.slotId);
+  if (options?.pagePath) formData.append("page_path", options.pagePath);
+  if (options?.folder) formData.append("folder", options.folder);
+  if (options?.altText) formData.append("alt_text", options.altText);
+  const res = await fetch(`${config.apiUrl}/public/images/upload`, {
+    method: "POST",
+    headers: {
+      "x-api-key": config.apiKey
+    },
+    body: formData
+  });
+  if (!res.ok) {
+    throw new Error(`Failed to upload image: ${res.status}`);
+  }
+  return res.json();
+}
+async function assignImageToSlot(config, slotId, options) {
+  const res = await fetch(
+    `${config.apiUrl}/public/images/slot/${encodeURIComponent(slotId)}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": config.apiKey
+      },
+      body: JSON.stringify({
+        page_path: options.pagePath,
+        file_id: options.fileId,
+        external_url: options.externalUrl,
+        alt_text: options.altText,
+        title: options.title,
+        caption: options.caption,
+        focal_point_x: options.focalPointX,
+        focal_point_y: options.focalPointY,
+        aspect_ratio: options.aspectRatio
+      })
+    }
+  );
+  if (!res.ok) {
+    throw new Error(`Failed to assign image: ${res.status}`);
+  }
+  return res.json();
+}
+async function clearImageSlot(config, slotId, pagePath) {
+  const params = new URLSearchParams();
+  if (pagePath) params.set("page_path", pagePath);
+  const res = await fetch(
+    `${config.apiUrl}/public/images/slot/${encodeURIComponent(slotId)}?${params}`,
+    {
+      method: "DELETE",
+      headers: {
+        "x-api-key": config.apiKey
+      }
+    }
+  );
+  if (!res.ok) {
+    throw new Error(`Failed to clear slot: ${res.status}`);
+  }
+  return res.json();
+}
+
+export { ManagedImage, SignalBridge, SiteKitProvider, assignImageToSlot, clearImageSlot, fetchManagedImage, fetchManagedImages, listImageFiles, uploadImage, useSignal, useSignalConfig, useSignalEvent, useSignalExperiment, useSignalOutcome, useSiteKit };
+//# sourceMappingURL=chunk-XQJX252G.mjs.map
+//# sourceMappingURL=chunk-XQJX252G.mjs.map