@demokit-ai/react 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,13 +1,32 @@
-import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
-import { createDemoInterceptor } from '@demokit-ai/core';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
 // src/provider.tsx
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import {
+  createDemoInterceptor,
+  fetchCloudFixtures,
+  createRemoteFixtures
+} from "@demokit-ai/core";
+
+// src/context.ts
+import { createContext } from "react";
 var DemoModeContext = createContext(void 0);
 DemoModeContext.displayName = "DemoModeContext";
+
+// src/provider.tsx
+import { jsx } from "react/jsx-runtime";
 function DemoKitProvider({
   children,
   fixtures,
+  // Remote config
+  apiKey,
+  cloudUrl,
+  timeout,
+  retry,
+  maxRetries,
+  onRemoteLoad,
+  onRemoteError,
+  loadingFallback = null,
+  errorFallback,
+  // Standard props
   storageKey = "demokit-mode",
   initialEnabled = false,
   onDemoModeChange,
@@ -15,30 +34,91 @@ function DemoKitProvider({
 }) {
   const [isDemoMode, setIsDemoMode] = useState(initialEnabled);
   const [isHydrated, setIsHydrated] = useState(false);
+  const [isLoading, setIsLoading] = useState(!!apiKey);
+  const [remoteError, setRemoteError] = useState(null);
+  const [remoteVersion, setRemoteVersion] = useState(null);
   const interceptorRef = useRef(null);
   const initializedRef = useRef(false);
+  const remoteFixturesRef = useRef(null);
+  const refetchFnRef = useRef(null);
+  const setupInterceptor = useCallback(
+    (mergedFixtures) => {
+      interceptorRef.current?.destroy();
+      interceptorRef.current = createDemoInterceptor({
+        fixtures: mergedFixtures,
+        storageKey,
+        initialEnabled,
+        baseUrl,
+        onEnable: () => {
+          setIsDemoMode(true);
+          onDemoModeChange?.(true);
+        },
+        onDisable: () => {
+          setIsDemoMode(false);
+          onDemoModeChange?.(false);
+        }
+      });
+      const storedState = interceptorRef.current.isEnabled();
+      setIsDemoMode(storedState);
+      setIsHydrated(true);
+    },
+    [storageKey, initialEnabled, baseUrl, onDemoModeChange]
+  );
+  const fetchAndSetup = useCallback(async () => {
+    if (!apiKey) return;
+    setIsLoading(true);
+    setRemoteError(null);
+    try {
+      const response = await fetchCloudFixtures({
+        apiKey,
+        cloudUrl,
+        timeout,
+        retry,
+        maxRetries,
+        onLoad: onRemoteLoad,
+        onError: onRemoteError
+      });
+      const remoteFixtures = createRemoteFixtures(response, fixtures);
+      remoteFixturesRef.current = remoteFixtures;
+      setRemoteVersion(response.version);
+      setupInterceptor(remoteFixtures);
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      setRemoteError(err);
+      onRemoteError?.(err);
+      if (fixtures && Object.keys(fixtures).length > 0) {
+        setupInterceptor(fixtures);
+      } else {
+        setIsHydrated(true);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    apiKey,
+    cloudUrl,
+    timeout,
+    retry,
+    maxRetries,
+    fixtures,
+    onRemoteLoad,
+    onRemoteError,
+    setupInterceptor
+  ]);
+  refetchFnRef.current = fetchAndSetup;
   useEffect(() => {
     if (initializedRef.current) {
       return;
     }
     initializedRef.current = true;
-    interceptorRef.current = createDemoInterceptor({
-      fixtures,
-      storageKey,
-      initialEnabled,
-      baseUrl,
-      onEnable: () => {
-        setIsDemoMode(true);
-        onDemoModeChange?.(true);
-      },
-      onDisable: () => {
-        setIsDemoMode(false);
-        onDemoModeChange?.(false);
-      }
-    });
-    const storedState = interceptorRef.current.isEnabled();
-    setIsDemoMode(storedState);
-    setIsHydrated(true);
+    if (apiKey) {
+      fetchAndSetup();
+    } else if (fixtures) {
+      setupInterceptor(fixtures);
+    } else {
+      setIsHydrated(true);
+      setIsLoading(false);
+    }
     return () => {
       interceptorRef.current?.destroy();
       interceptorRef.current = null;
@@ -46,10 +126,14 @@ function DemoKitProvider({
     };
   }, []);
   useEffect(() => {
-    if (interceptorRef.current && isHydrated) {
-      interceptorRef.current.setFixtures(fixtures);
+    if (!isHydrated || isLoading) return;
+    if (apiKey && remoteFixturesRef.current) {
+      const merged = { ...remoteFixturesRef.current, ...fixtures };
+      interceptorRef.current?.setFixtures(merged);
+    } else if (fixtures) {
+      interceptorRef.current?.setFixtures(fixtures);
     }
-  }, [fixtures, isHydrated]);
+  }, [fixtures, isHydrated, isLoading, apiKey]);
   const enable = useCallback(() => {
     interceptorRef.current?.enable();
   }, []);
@@ -72,21 +156,55 @@ function DemoKitProvider({
   const getSession = useCallback(() => {
     return interceptorRef.current?.getSession() ?? null;
   }, []);
+  const refetch = useCallback(async () => {
+    if (!apiKey) {
+      console.warn("[DemoKit] refetch() called but no apiKey provided");
+      return;
+    }
+    await refetchFnRef.current?.();
+  }, [apiKey]);
   const value = useMemo(
     () => ({
       isDemoMode,
       isHydrated,
+      isLoading,
+      remoteError,
+      remoteVersion,
       enable,
       disable,
       toggle,
       setDemoMode,
       resetSession,
-      getSession
+      getSession,
+      refetch
     }),
-    [isDemoMode, isHydrated, enable, disable, toggle, setDemoMode, resetSession, getSession]
+    [
+      isDemoMode,
+      isHydrated,
+      isLoading,
+      remoteError,
+      remoteVersion,
+      enable,
+      disable,
+      toggle,
+      setDemoMode,
+      resetSession,
+      getSession,
+      refetch
+    ]
   );
+  if (isLoading && apiKey) {
+    return /* @__PURE__ */ jsx(DemoModeContext.Provider, { value, children: loadingFallback });
+  }
+  if (remoteError && errorFallback) {
+    const errorContent = typeof errorFallback === "function" ? errorFallback(remoteError) : errorFallback;
+    return /* @__PURE__ */ jsx(DemoModeContext.Provider, { value, children: errorContent });
+  }
   return /* @__PURE__ */ jsx(DemoModeContext.Provider, { value, children });
 }
+
+// src/hooks.ts
+import { useContext } from "react";
 function useDemoMode() {
   const context = useContext(DemoModeContext);
   if (context === void 0) {
@@ -105,8 +223,116 @@ function useIsHydrated() {
 function useDemoSession() {
   return useDemoMode().getSession();
 }
-function EyeIcon() {
+
+// src/powered-by.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ExternalLinkIcon({ size }) {
   return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+        /* @__PURE__ */ jsx2("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ jsx2("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+      ]
+    }
+  );
+}
+var sizeConfig = {
+  xs: {
+    fontSize: "10px",
+    padding: "2px 6px",
+    gap: "3px",
+    iconSize: 8
+  },
+  sm: {
+    fontSize: "11px",
+    padding: "3px 8px",
+    gap: "4px",
+    iconSize: 10
+  },
+  md: {
+    fontSize: "12px",
+    padding: "4px 10px",
+    gap: "5px",
+    iconSize: 12
+  }
+};
+var variantStyles = {
+  light: {
+    color: "rgba(120, 53, 15, 0.7)",
+    hoverColor: "rgba(120, 53, 15, 0.9)",
+    backgroundColor: "transparent",
+    hoverBackgroundColor: "rgba(217, 119, 6, 0.08)"
+  },
+  dark: {
+    color: "rgba(255, 255, 255, 0.6)",
+    hoverColor: "rgba(255, 255, 255, 0.9)",
+    backgroundColor: "transparent",
+    hoverBackgroundColor: "rgba(255, 255, 255, 0.1)"
+  }
+};
+function PoweredByBadge({
+  url = "https://demokit.ai",
+  variant = "light",
+  size = "sm",
+  className = "",
+  style
+}) {
+  const config = sizeConfig[size];
+  const colors = variantStyles[variant === "auto" ? "light" : variant];
+  const baseStyles = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: config.gap,
+    fontSize: config.fontSize,
+    padding: config.padding,
+    color: colors.color,
+    textDecoration: "none",
+    borderRadius: "4px",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontWeight: 500,
+    transition: "color 0.15s ease, background-color 0.15s ease",
+    whiteSpace: "nowrap",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: `demokit-powered-by ${className}`.trim(),
+      style: baseStyles,
+      onMouseOver: (e) => {
+        e.currentTarget.style.color = colors.hoverColor;
+        e.currentTarget.style.backgroundColor = colors.hoverBackgroundColor;
+      },
+      onMouseOut: (e) => {
+        e.currentTarget.style.color = colors.color;
+        e.currentTarget.style.backgroundColor = "transparent";
+      },
+      children: [
+        /* @__PURE__ */ jsx2("span", { children: "Powered by DemoKit" }),
+        /* @__PURE__ */ jsx2(ExternalLinkIcon, { size: config.iconSize })
+      ]
+    }
+  );
+}
+
+// src/banner.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function EyeIcon() {
+  return /* @__PURE__ */ jsxs2(
     "svg",
     {
       width: "20",
@@ -119,8 +345,8 @@ function EyeIcon() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+        /* @__PURE__ */ jsx3("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+        /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "3" })
       ]
     }
   );
@@ -171,6 +397,8 @@ function DemoModeBanner({
   demoLabel = "Demo Mode Active",
   description = "Changes are simulated and not saved",
   showIcon = true,
+  showPoweredBy = true,
+  poweredByUrl = "https://demokit.ai",
   style,
   onExit
 }) {
@@ -185,39 +413,221 @@ function DemoModeBanner({
       disable();
     }
   };
-  return /* @__PURE__ */ jsxs(
+  const effectiveShowPoweredBy = showPoweredBy;
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: `demokit-banner ${className}`.trim(),
-      style: { ...defaultStyles.container, ...style },
+      style: { ...defaultStyles.container, flexDirection: "column", gap: "4px", ...style },
       role: "status",
       "aria-live": "polite",
       children: [
-        /* @__PURE__ */ jsxs("div", { style: defaultStyles.content, children: [
-          showIcon && /* @__PURE__ */ jsx("span", { style: defaultStyles.icon, children: /* @__PURE__ */ jsx(EyeIcon, {}) }),
-          /* @__PURE__ */ jsx("span", { style: defaultStyles.label, children: demoLabel }),
-          description && /* @__PURE__ */ jsx("span", { style: defaultStyles.description, children: description })
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+          /* @__PURE__ */ jsxs2("div", { style: defaultStyles.content, children: [
+            showIcon && /* @__PURE__ */ jsx3("span", { style: defaultStyles.icon, children: /* @__PURE__ */ jsx3(EyeIcon, {}) }),
+            /* @__PURE__ */ jsx3("span", { style: defaultStyles.label, children: demoLabel }),
+            description && /* @__PURE__ */ jsx3("span", { style: defaultStyles.description, children: description })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: handleExit,
+              style: defaultStyles.button,
+              onMouseOver: (e) => {
+                e.currentTarget.style.backgroundColor = "rgba(217, 119, 6, 0.1)";
+              },
+              onMouseOut: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              type: "button",
+              children: exitLabel
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleExit,
-            style: defaultStyles.button,
-            onMouseOver: (e) => {
-              e.currentTarget.style.backgroundColor = "rgba(217, 119, 6, 0.1)";
-            },
-            onMouseOut: (e) => {
-              e.currentTarget.style.backgroundColor = "transparent";
-            },
-            type: "button",
-            children: exitLabel
-          }
-        )
+        effectiveShowPoweredBy && /* @__PURE__ */ jsx3("div", { style: { display: "flex", justifyContent: "flex-end", width: "100%" }, children: /* @__PURE__ */ jsx3(PoweredByBadge, { url: poweredByUrl, size: "xs" }) })
       ]
     }
   );
 }
 
-export { DemoKitProvider, DemoModeBanner, DemoModeContext, useDemoMode, useDemoSession, useIsDemoMode, useIsHydrated };
-//# sourceMappingURL=index.js.map
+// src/toggle.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var sizeConfig2 = {
+  sm: {
+    trackWidth: 36,
+    trackHeight: 20,
+    thumbSize: 16,
+    thumbOffset: 2,
+    fontSize: "12px",
+    padding: "8px 12px",
+    gap: "8px"
+  },
+  md: {
+    trackWidth: 44,
+    trackHeight: 24,
+    thumbSize: 20,
+    thumbOffset: 2,
+    fontSize: "14px",
+    padding: "12px 16px",
+    gap: "10px"
+  },
+  lg: {
+    trackWidth: 52,
+    trackHeight: 28,
+    thumbSize: 24,
+    thumbOffset: 2,
+    fontSize: "16px",
+    padding: "16px 20px",
+    gap: "12px"
+  }
+};
+var positionStyles = {
+  inline: {},
+  floating: {
+    position: "fixed",
+    zIndex: 9999,
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    borderRadius: "8px"
+  },
+  corner: {
+    position: "fixed",
+    bottom: "20px",
+    right: "20px",
+    zIndex: 9999,
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    borderRadius: "8px"
+  }
+};
+var defaultStyles2 = {
+  container: {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "4px",
+    backgroundColor: "#ffffff",
+    border: "1px solid rgba(0, 0, 0, 0.1)",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+  },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%"
+  },
+  label: {
+    fontWeight: 500,
+    color: "#1f2937",
+    userSelect: "none"
+  },
+  track: {
+    position: "relative",
+    borderRadius: "9999px",
+    cursor: "pointer",
+    transition: "background-color 0.2s ease",
+    flexShrink: 0
+  },
+  trackOff: {
+    backgroundColor: "#d1d5db"
+  },
+  trackOn: {
+    backgroundColor: "#d97706"
+  },
+  thumb: {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    backgroundColor: "#ffffff",
+    borderRadius: "50%",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
+    transition: "left 0.2s ease"
+  },
+  poweredByContainer: {
+    display: "flex",
+    justifyContent: "flex-end",
+    width: "100%"
+  }
+};
+function DemoModeToggle({
+  showLabel = true,
+  label = "Demo Mode",
+  showPoweredBy = true,
+  poweredByUrl = "https://demokit.ai",
+  position = "inline",
+  size = "md",
+  className = "",
+  style,
+  onChange
+}) {
+  const { isDemoMode, isHydrated, toggle } = useDemoMode();
+  if (!isHydrated) {
+    return null;
+  }
+  const config = sizeConfig2[size];
+  const posStyle = positionStyles[position];
+  const handleToggle = () => {
+    toggle();
+    onChange?.(!isDemoMode);
+  };
+  const thumbLeft = isDemoMode ? config.trackWidth - config.thumbSize - config.thumbOffset : config.thumbOffset;
+  const effectiveShowPoweredBy = showPoweredBy;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `demokit-toggle ${className}`.trim(),
+      style: {
+        ...defaultStyles2.container,
+        padding: config.padding,
+        ...posStyle,
+        ...style
+      },
+      role: "group",
+      "aria-label": "Demo mode toggle",
+      children: [
+        /* @__PURE__ */ jsxs3("div", { style: { ...defaultStyles2.row, gap: config.gap }, children: [
+          showLabel && /* @__PURE__ */ jsx4("span", { style: { ...defaultStyles2.label, fontSize: config.fontSize }, children: label }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": isDemoMode,
+              "aria-label": `${label}: ${isDemoMode ? "On" : "Off"}`,
+              onClick: handleToggle,
+              style: {
+                ...defaultStyles2.track,
+                ...isDemoMode ? defaultStyles2.trackOn : defaultStyles2.trackOff,
+                width: config.trackWidth,
+                height: config.trackHeight,
+                border: "none",
+                padding: 0
+              },
+              children: /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  style: {
+                    ...defaultStyles2.thumb,
+                    width: config.thumbSize,
+                    height: config.thumbSize,
+                    left: thumbLeft
+                  }
+                }
+              )
+            }
+          )
+        ] }),
+        effectiveShowPoweredBy && /* @__PURE__ */ jsx4("div", { style: defaultStyles2.poweredByContainer, children: /* @__PURE__ */ jsx4(PoweredByBadge, { url: poweredByUrl, size: "xs" }) })
+      ]
+    }
+  );
+}
+export {
+  DemoKitProvider,
+  DemoModeBanner,
+  DemoModeContext,
+  DemoModeToggle,
+  PoweredByBadge,
+  useDemoMode,
+  useDemoSession,
+  useIsDemoMode,
+  useIsHydrated
+};
 //# sourceMappingURL=index.js.map