@demokit-ai/react 0.0.1

package/dist/index.cjs

@@ -0,0 +1,231 @@
+'use strict';
+
+var react = require('react');
+var core = require('@demokit-ai/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/provider.tsx
+var DemoModeContext = react.createContext(void 0);
+DemoModeContext.displayName = "DemoModeContext";
+function DemoKitProvider({
+  children,
+  fixtures,
+  storageKey = "demokit-mode",
+  initialEnabled = false,
+  onDemoModeChange,
+  baseUrl
+}) {
+  const [isDemoMode, setIsDemoMode] = react.useState(initialEnabled);
+  const [isHydrated, setIsHydrated] = react.useState(false);
+  const interceptorRef = react.useRef(null);
+  const initializedRef = react.useRef(false);
+  react.useEffect(() => {
+    if (initializedRef.current) {
+      return;
+    }
+    initializedRef.current = true;
+    interceptorRef.current = core.createDemoInterceptor({
+      fixtures,
+      storageKey,
+      initialEnabled,
+      baseUrl,
+      onEnable: () => {
+        setIsDemoMode(true);
+        onDemoModeChange?.(true);
+      },
+      onDisable: () => {
+        setIsDemoMode(false);
+        onDemoModeChange?.(false);
+      }
+    });
+    const storedState = interceptorRef.current.isEnabled();
+    setIsDemoMode(storedState);
+    setIsHydrated(true);
+    return () => {
+      interceptorRef.current?.destroy();
+      interceptorRef.current = null;
+      initializedRef.current = false;
+    };
+  }, []);
+  react.useEffect(() => {
+    if (interceptorRef.current && isHydrated) {
+      interceptorRef.current.setFixtures(fixtures);
+    }
+  }, [fixtures, isHydrated]);
+  const enable = react.useCallback(() => {
+    interceptorRef.current?.enable();
+  }, []);
+  const disable = react.useCallback(() => {
+    interceptorRef.current?.disable();
+  }, []);
+  const toggle = react.useCallback(() => {
+    interceptorRef.current?.toggle();
+  }, []);
+  const setDemoMode = react.useCallback((enabled) => {
+    if (enabled) {
+      interceptorRef.current?.enable();
+    } else {
+      interceptorRef.current?.disable();
+    }
+  }, []);
+  const resetSession = react.useCallback(() => {
+    interceptorRef.current?.resetSession();
+  }, []);
+  const getSession = react.useCallback(() => {
+    return interceptorRef.current?.getSession() ?? null;
+  }, []);
+  const value = react.useMemo(
+    () => ({
+      isDemoMode,
+      isHydrated,
+      enable,
+      disable,
+      toggle,
+      setDemoMode,
+      resetSession,
+      getSession
+    }),
+    [isDemoMode, isHydrated, enable, disable, toggle, setDemoMode, resetSession, getSession]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DemoModeContext.Provider, { value, children });
+}
+function useDemoMode() {
+  const context = react.useContext(DemoModeContext);
+  if (context === void 0) {
+    throw new Error(
+      "useDemoMode must be used within a DemoKitProvider. Make sure to wrap your app with <DemoKitProvider>."
+    );
+  }
+  return context;
+}
+function useIsDemoMode() {
+  return useDemoMode().isDemoMode;
+}
+function useIsHydrated() {
+  return useDemoMode().isHydrated;
+}
+function useDemoSession() {
+  return useDemoMode().getSession();
+}
+function EyeIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })
+      ]
+    }
+  );
+}
+var defaultStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px 16px",
+    backgroundColor: "#fef3c7",
+    borderBottom: "1px solid rgba(217, 119, 6, 0.2)",
+    fontSize: "14px",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+  },
+  content: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  icon: {
+    color: "#d97706",
+    flexShrink: 0
+  },
+  label: {
+    fontWeight: 600,
+    color: "#78350f"
+  },
+  description: {
+    color: "rgba(120, 53, 15, 0.7)",
+    fontSize: "12px"
+  },
+  button: {
+    padding: "4px 12px",
+    fontSize: "14px",
+    backgroundColor: "transparent",
+    border: "1px solid rgba(217, 119, 6, 0.3)",
+    borderRadius: "4px",
+    cursor: "pointer",
+    color: "#78350f",
+    fontFamily: "inherit",
+    transition: "background-color 0.15s ease"
+  }
+};
+function DemoModeBanner({
+  className = "",
+  exitLabel = "Exit Demo Mode",
+  demoLabel = "Demo Mode Active",
+  description = "Changes are simulated and not saved",
+  showIcon = true,
+  style,
+  onExit
+}) {
+  const { isDemoMode, isHydrated, disable } = useDemoMode();
+  if (!isHydrated || !isDemoMode) {
+    return null;
+  }
+  const handleExit = () => {
+    if (onExit) {
+      onExit();
+    } else {
+      disable();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `demokit-banner ${className}`.trim(),
+      style: { ...defaultStyles.container, ...style },
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles.content, children: [
+          showIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: defaultStyles.icon, children: /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: defaultStyles.label, children: demoLabel }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("span", { style: defaultStyles.description, children: description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.DemoKitProvider = DemoKitProvider;
+exports.DemoModeBanner = DemoModeBanner;
+exports.DemoModeContext = DemoModeContext;
+exports.useDemoMode = useDemoMode;
+exports.useDemoSession = useDemoSession;
+exports.useIsDemoMode = useIsDemoMode;
+exports.useIsHydrated = useIsHydrated;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.ts","../src/provider.tsx","../src/hooks.ts","../src/banner.tsx"],"names":["createContext","useState","useRef","useEffect","createDemoInterceptor","useCallback","useMemo","jsx","useContext","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import { createContext } from 'react'\nimport type { DemoModeContextValue } from './types'\n\n/**\n * React context for demo mode state\n * @internal\n */\nexport const DemoModeContext = createContext<DemoModeContextValue | undefined>(undefined)\n\nDemoModeContext.displayName = 'DemoModeContext'\n","'use client'\n\nimport { useState, useEffect, useCallback, useMemo, useRef } from 'react'\nimport { createDemoInterceptor, type DemoInterceptor, type SessionState } from '@demokit-ai/core'\nimport { DemoModeContext } from './context'\nimport type { DemoKitProviderProps, DemoModeContextValue } from './types'\n\n/**\n * Provider component that enables demo mode functionality\n *\n * Wraps your app to provide demo mode state and controls.\n * Handles SSR hydration safely and persists state to localStorage.\n *\n * @example\n * const fixtures = {\n *   'GET /api/users': () => [{ id: '1', name: 'Demo User' }],\n *   'GET /api/users/:id': ({ params }) => ({ id: params.id, name: 'Demo User' }),\n * }\n *\n * function App() {\n *   return (\n *     <DemoKitProvider\n *       fixtures={fixtures}\n *       onDemoModeChange={(enabled) => console.log('Demo mode:', enabled)}\n *     >\n *       <YourApp />\n *     </DemoKitProvider>\n *   )\n * }\n */\nexport function DemoKitProvider({\n  children,\n  fixtures,\n  storageKey = 'demokit-mode',\n  initialEnabled = false,\n  onDemoModeChange,\n  baseUrl,\n}: DemoKitProviderProps) {\n  // Start with initialEnabled for SSR to avoid hydration mismatch\n  const [isDemoMode, setIsDemoMode] = useState(initialEnabled)\n  const [isHydrated, setIsHydrated] = useState(false)\n\n  // Keep a ref to the interceptor instance\n  const interceptorRef = useRef<DemoInterceptor | null>(null)\n\n  // Track if we've initialized\n  const initializedRef = useRef(false)\n\n  // Initialize interceptor on mount (client-side only)\n  useEffect(() => {\n    if (initializedRef.current) {\n      return\n    }\n    initializedRef.current = true\n\n    interceptorRef.current = createDemoInterceptor({\n      fixtures,\n      storageKey,\n      initialEnabled,\n      baseUrl,\n      onEnable: () => {\n        setIsDemoMode(true)\n        onDemoModeChange?.(true)\n      },\n      onDisable: () => {\n        setIsDemoMode(false)\n        onDemoModeChange?.(false)\n      },\n    })\n\n    // Sync state from storage after hydration\n    const storedState = interceptorRef.current.isEnabled()\n    setIsDemoMode(storedState)\n\n    // Mark as hydrated\n    setIsHydrated(true)\n\n    return () => {\n      interceptorRef.current?.destroy()\n      interceptorRef.current = null\n      initializedRef.current = false\n    }\n  }, []) // Empty deps - only run once on mount\n\n  // Update fixtures if they change\n  useEffect(() => {\n    if (interceptorRef.current && isHydrated) {\n      interceptorRef.current.setFixtures(fixtures)\n    }\n  }, [fixtures, isHydrated])\n\n  const enable = useCallback(() => {\n    interceptorRef.current?.enable()\n  }, [])\n\n  const disable = useCallback(() => {\n    interceptorRef.current?.disable()\n  }, [])\n\n  const toggle = useCallback(() => {\n    interceptorRef.current?.toggle()\n  }, [])\n\n  const setDemoMode = useCallback((enabled: boolean) => {\n    if (enabled) {\n      interceptorRef.current?.enable()\n    } else {\n      interceptorRef.current?.disable()\n    }\n  }, [])\n\n  const resetSession = useCallback(() => {\n    interceptorRef.current?.resetSession()\n  }, [])\n\n  const getSession = useCallback((): SessionState | null => {\n    return interceptorRef.current?.getSession() ?? null\n  }, [])\n\n  const value = useMemo<DemoModeContextValue>(\n    () => ({\n      isDemoMode,\n      isHydrated,\n      enable,\n      disable,\n      toggle,\n      setDemoMode,\n      resetSession,\n      getSession,\n    }),\n    [isDemoMode, isHydrated, enable, disable, toggle, setDemoMode, resetSession, getSession]\n  )\n\n  return (\n    <DemoModeContext.Provider value={value}>\n      {children}\n    </DemoModeContext.Provider>\n  )\n}\n","'use client'\n\nimport { useContext } from 'react'\nimport { DemoModeContext } from './context'\nimport type { DemoModeContextValue } from './types'\n\n/**\n * Hook to access demo mode state and controls\n *\n * @returns Demo mode context value with state and control methods\n * @throws Error if used outside of DemoKitProvider\n *\n * @example\n * function MyComponent() {\n *   const { isDemoMode, isHydrated, toggle } = useDemoMode()\n *\n *   // Wait for hydration before rendering demo-dependent UI\n *   if (!isHydrated) {\n *     return <Loading />\n *   }\n *\n *   return (\n *     <div>\n *       <p>Demo mode: {isDemoMode ? 'ON' : 'OFF'}</p>\n *       <button onClick={toggle}>Toggle</button>\n *     </div>\n *   )\n * }\n */\nexport function useDemoMode(): DemoModeContextValue {\n  const context = useContext(DemoModeContext)\n\n  if (context === undefined) {\n    throw new Error(\n      'useDemoMode must be used within a DemoKitProvider. ' +\n        'Make sure to wrap your app with <DemoKitProvider>.'\n    )\n  }\n\n  return context\n}\n\n/**\n * Hook to check if demo mode is enabled\n * Shorthand for useDemoMode().isDemoMode\n *\n * @returns Whether demo mode is enabled\n */\nexport function useIsDemoMode(): boolean {\n  return useDemoMode().isDemoMode\n}\n\n/**\n * Hook to check if the component has hydrated\n * Shorthand for useDemoMode().isHydrated\n *\n * @returns Whether the component has hydrated\n */\nexport function useIsHydrated(): boolean {\n  return useDemoMode().isHydrated\n}\n\n/**\n * Hook to access the session state\n * Shorthand for useDemoMode().getSession()\n *\n * @returns The session state, or null if not yet initialized\n *\n * @example\n * function MyComponent() {\n *   const session = useDemoSession()\n *\n *   const cart = session?.get<CartItem[]>('cart') || []\n *   const addToCart = (item: CartItem) => {\n *     session?.set('cart', [...cart, item])\n *   }\n *\n *   return <CartView items={cart} onAdd={addToCart} />\n * }\n */\nexport function useDemoSession() {\n  return useDemoMode().getSession()\n}\n","'use client'\n\nimport { useDemoMode } from './hooks'\nimport type { DemoModeBannerProps } from './types'\n\n/**\n * Eye icon SVG component\n */\nfunction EyeIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  )\n}\n\n/**\n * Default styles for the banner\n */\nconst defaultStyles = {\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '8px 16px',\n    backgroundColor: '#fef3c7',\n    borderBottom: '1px solid rgba(217, 119, 6, 0.2)',\n    fontSize: '14px',\n    fontFamily:\n      '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif',\n  } as React.CSSProperties,\n  content: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  } as React.CSSProperties,\n  icon: {\n    color: '#d97706',\n    flexShrink: 0,\n  } as React.CSSProperties,\n  label: {\n    fontWeight: 600,\n    color: '#78350f',\n  } as React.CSSProperties,\n  description: {\n    color: 'rgba(120, 53, 15, 0.7)',\n    fontSize: '12px',\n  } as React.CSSProperties,\n  button: {\n    padding: '4px 12px',\n    fontSize: '14px',\n    backgroundColor: 'transparent',\n    border: '1px solid rgba(217, 119, 6, 0.3)',\n    borderRadius: '4px',\n    cursor: 'pointer',\n    color: '#78350f',\n    fontFamily: 'inherit',\n    transition: 'background-color 0.15s ease',\n  } as React.CSSProperties,\n}\n\n/**\n * A ready-to-use banner component that shows when demo mode is active\n *\n * Displays a prominent amber banner with a label, description, and exit button.\n * Automatically hides when demo mode is disabled or before hydration.\n *\n * @example\n * function App() {\n *   return (\n *     <DemoKitProvider fixtures={fixtures}>\n *       <DemoModeBanner />\n *       <YourApp />\n *     </DemoKitProvider>\n *   )\n * }\n *\n * @example Custom labels\n * <DemoModeBanner\n *   demoLabel=\"Preview Mode\"\n *   description=\"You're viewing sample data\"\n *   exitLabel=\"Exit Preview\"\n * />\n */\nexport function DemoModeBanner({\n  className = '',\n  exitLabel = 'Exit Demo Mode',\n  demoLabel = 'Demo Mode Active',\n  description = 'Changes are simulated and not saved',\n  showIcon = true,\n  style,\n  onExit,\n}: DemoModeBannerProps) {\n  const { isDemoMode, isHydrated, disable } = useDemoMode()\n\n  // Don't render until hydrated to avoid hydration mismatch\n  if (!isHydrated || !isDemoMode) {\n    return null\n  }\n\n  const handleExit = () => {\n    if (onExit) {\n      onExit()\n    } else {\n      disable()\n    }\n  }\n\n  return (\n    <div\n      className={`demokit-banner ${className}`.trim()}\n      style={{ ...defaultStyles.container, ...style }}\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <div style={defaultStyles.content}>\n        {showIcon && (\n          <span style={defaultStyles.icon}>\n            <EyeIcon />\n          </span>\n        )}\n        <span style={defaultStyles.label}>{demoLabel}</span>\n        {description && <span style={defaultStyles.description}>{description}</span>}\n      </div>\n      <button\n        onClick={handleExit}\n        style={defaultStyles.button}\n        onMouseOver={(e) => {\n          e.currentTarget.style.backgroundColor = 'rgba(217, 119, 6, 0.1)'\n        }}\n        onMouseOut={(e) => {\n          e.currentTarget.style.backgroundColor = 'transparent'\n        }}\n        type=\"button\"\n      >\n        {exitLabel}\n      </button>\n    </div>\n  )\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,235 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _demokit_ai_core from '@demokit-ai/core';
+import { FixtureMap, SessionState } from '@demokit-ai/core';
+export { FixtureHandler, FixtureMap, RequestContext, SessionState } from '@demokit-ai/core';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Props for the DemoKitProvider component
+ */
+interface DemoKitProviderProps {
+    /**
+     * Child components to render
+     */
+    children: ReactNode;
+    /**
+     * Map of URL patterns to fixture handlers
+     */
+    fixtures: FixtureMap;
+    /**
+     * localStorage key for persisting demo mode state
+     * @default 'demokit-mode'
+     */
+    storageKey?: string;
+    /**
+     * Whether demo mode should be initially enabled
+     * If not provided, will read from localStorage
+     * @default false
+     */
+    initialEnabled?: boolean;
+    /**
+     * Callback invoked when demo mode state changes
+     */
+    onDemoModeChange?: (enabled: boolean) => void;
+    /**
+     * Base URL to use for relative URL parsing
+     * @default 'http://localhost'
+     */
+    baseUrl?: string;
+}
+/**
+ * Value provided by the DemoMode context
+ */
+interface DemoModeContextValue {
+    /**
+     * Whether demo mode is currently enabled
+     */
+    isDemoMode: boolean;
+    /**
+     * Whether the component has hydrated (for SSR safety)
+     * Always check this before rendering demo-dependent UI
+     */
+    isHydrated: boolean;
+    /**
+     * Enable demo mode
+     */
+    enable(): void;
+    /**
+     * Disable demo mode
+     */
+    disable(): void;
+    /**
+     * Toggle demo mode and return the new state
+     */
+    toggle(): void;
+    /**
+     * Set demo mode to a specific state
+     */
+    setDemoMode(enabled: boolean): void;
+    /**
+     * Reset the session state, clearing all stored data
+     * Call this to manually reset the demo session without page refresh
+     */
+    resetSession(): void;
+    /**
+     * Get the current session state instance
+     * Useful for inspecting or manipulating session state directly
+     * Returns null if the interceptor hasn't been initialized yet
+     */
+    getSession(): SessionState | null;
+}
+/**
+ * Props for the DemoModeBanner component
+ */
+interface DemoModeBannerProps {
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Label for the exit button
+     * @default 'Exit Demo Mode'
+     */
+    exitLabel?: string;
+    /**
+     * Label shown when demo mode is active
+     * @default 'Demo Mode Active'
+     */
+    demoLabel?: string;
+    /**
+     * Description shown in the banner
+     * @default 'Changes are simulated and not saved'
+     */
+    description?: string;
+    /**
+     * Whether to show the eye icon
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Custom styles for the banner container
+     */
+    style?: React.CSSProperties;
+    /**
+     * Callback when exit button is clicked
+     * If not provided, will call disable() from context
+     */
+    onExit?: () => void;
+}
+
+/**
+ * Provider component that enables demo mode functionality
+ *
+ * Wraps your app to provide demo mode state and controls.
+ * Handles SSR hydration safely and persists state to localStorage.
+ *
+ * @example
+ * const fixtures = {
+ *   'GET /api/users': () => [{ id: '1', name: 'Demo User' }],
+ *   'GET /api/users/:id': ({ params }) => ({ id: params.id, name: 'Demo User' }),
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DemoKitProvider
+ *       fixtures={fixtures}
+ *       onDemoModeChange={(enabled) => console.log('Demo mode:', enabled)}
+ *     >
+ *       <YourApp />
+ *     </DemoKitProvider>
+ *   )
+ * }
+ */
+declare function DemoKitProvider({ children, fixtures, storageKey, initialEnabled, onDemoModeChange, baseUrl, }: DemoKitProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Hook to access demo mode state and controls
+ *
+ * @returns Demo mode context value with state and control methods
+ * @throws Error if used outside of DemoKitProvider
+ *
+ * @example
+ * function MyComponent() {
+ *   const { isDemoMode, isHydrated, toggle } = useDemoMode()
+ *
+ *   // Wait for hydration before rendering demo-dependent UI
+ *   if (!isHydrated) {
+ *     return <Loading />
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Demo mode: {isDemoMode ? 'ON' : 'OFF'}</p>
+ *       <button onClick={toggle}>Toggle</button>
+ *     </div>
+ *   )
+ * }
+ */
+declare function useDemoMode(): DemoModeContextValue;
+/**
+ * Hook to check if demo mode is enabled
+ * Shorthand for useDemoMode().isDemoMode
+ *
+ * @returns Whether demo mode is enabled
+ */
+declare function useIsDemoMode(): boolean;
+/**
+ * Hook to check if the component has hydrated
+ * Shorthand for useDemoMode().isHydrated
+ *
+ * @returns Whether the component has hydrated
+ */
+declare function useIsHydrated(): boolean;
+/**
+ * Hook to access the session state
+ * Shorthand for useDemoMode().getSession()
+ *
+ * @returns The session state, or null if not yet initialized
+ *
+ * @example
+ * function MyComponent() {
+ *   const session = useDemoSession()
+ *
+ *   const cart = session?.get<CartItem[]>('cart') || []
+ *   const addToCart = (item: CartItem) => {
+ *     session?.set('cart', [...cart, item])
+ *   }
+ *
+ *   return <CartView items={cart} onAdd={addToCart} />
+ * }
+ */
+declare function useDemoSession(): _demokit_ai_core.SessionState | null;
+
+/**
+ * A ready-to-use banner component that shows when demo mode is active
+ *
+ * Displays a prominent amber banner with a label, description, and exit button.
+ * Automatically hides when demo mode is disabled or before hydration.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <DemoKitProvider fixtures={fixtures}>
+ *       <DemoModeBanner />
+ *       <YourApp />
+ *     </DemoKitProvider>
+ *   )
+ * }
+ *
+ * @example Custom labels
+ * <DemoModeBanner
+ *   demoLabel="Preview Mode"
+ *   description="You're viewing sample data"
+ *   exitLabel="Exit Preview"
+ * />
+ */
+declare function DemoModeBanner({ className, exitLabel, demoLabel, description, showIcon, style, onExit, }: DemoModeBannerProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * React context for demo mode state
+ * @internal
+ */
+declare const DemoModeContext: react.Context<DemoModeContextValue | undefined>;
+
+export { DemoKitProvider, type DemoKitProviderProps, DemoModeBanner, type DemoModeBannerProps, DemoModeContext, type DemoModeContextValue, useDemoMode, useDemoSession, useIsDemoMode, useIsHydrated };

package/dist/index.d.ts

@@ -0,0 +1,235 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _demokit_ai_core from '@demokit-ai/core';
+import { FixtureMap, SessionState } from '@demokit-ai/core';
+export { FixtureHandler, FixtureMap, RequestContext, SessionState } from '@demokit-ai/core';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Props for the DemoKitProvider component
+ */
+interface DemoKitProviderProps {
+    /**
+     * Child components to render
+     */
+    children: ReactNode;
+    /**
+     * Map of URL patterns to fixture handlers
+     */
+    fixtures: FixtureMap;
+    /**
+     * localStorage key for persisting demo mode state
+     * @default 'demokit-mode'
+     */
+    storageKey?: string;
+    /**
+     * Whether demo mode should be initially enabled
+     * If not provided, will read from localStorage
+     * @default false
+     */
+    initialEnabled?: boolean;
+    /**
+     * Callback invoked when demo mode state changes
+     */
+    onDemoModeChange?: (enabled: boolean) => void;
+    /**
+     * Base URL to use for relative URL parsing
+     * @default 'http://localhost'
+     */
+    baseUrl?: string;
+}
+/**
+ * Value provided by the DemoMode context
+ */
+interface DemoModeContextValue {
+    /**
+     * Whether demo mode is currently enabled
+     */
+    isDemoMode: boolean;
+    /**
+     * Whether the component has hydrated (for SSR safety)
+     * Always check this before rendering demo-dependent UI
+     */
+    isHydrated: boolean;
+    /**
+     * Enable demo mode
+     */
+    enable(): void;
+    /**
+     * Disable demo mode
+     */
+    disable(): void;
+    /**
+     * Toggle demo mode and return the new state
+     */
+    toggle(): void;
+    /**
+     * Set demo mode to a specific state
+     */
+    setDemoMode(enabled: boolean): void;
+    /**
+     * Reset the session state, clearing all stored data
+     * Call this to manually reset the demo session without page refresh
+     */
+    resetSession(): void;
+    /**
+     * Get the current session state instance
+     * Useful for inspecting or manipulating session state directly
+     * Returns null if the interceptor hasn't been initialized yet
+     */
+    getSession(): SessionState | null;
+}
+/**
+ * Props for the DemoModeBanner component
+ */
+interface DemoModeBannerProps {
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Label for the exit button
+     * @default 'Exit Demo Mode'
+     */
+    exitLabel?: string;
+    /**
+     * Label shown when demo mode is active
+     * @default 'Demo Mode Active'
+     */
+    demoLabel?: string;
+    /**
+     * Description shown in the banner
+     * @default 'Changes are simulated and not saved'
+     */
+    description?: string;
+    /**
+     * Whether to show the eye icon
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Custom styles for the banner container
+     */
+    style?: React.CSSProperties;
+    /**
+     * Callback when exit button is clicked
+     * If not provided, will call disable() from context
+     */
+    onExit?: () => void;
+}
+
+/**
+ * Provider component that enables demo mode functionality
+ *
+ * Wraps your app to provide demo mode state and controls.
+ * Handles SSR hydration safely and persists state to localStorage.
+ *
+ * @example
+ * const fixtures = {
+ *   'GET /api/users': () => [{ id: '1', name: 'Demo User' }],
+ *   'GET /api/users/:id': ({ params }) => ({ id: params.id, name: 'Demo User' }),
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DemoKitProvider
+ *       fixtures={fixtures}
+ *       onDemoModeChange={(enabled) => console.log('Demo mode:', enabled)}
+ *     >
+ *       <YourApp />
+ *     </DemoKitProvider>
+ *   )
+ * }
+ */
+declare function DemoKitProvider({ children, fixtures, storageKey, initialEnabled, onDemoModeChange, baseUrl, }: DemoKitProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Hook to access demo mode state and controls
+ *
+ * @returns Demo mode context value with state and control methods
+ * @throws Error if used outside of DemoKitProvider
+ *
+ * @example
+ * function MyComponent() {
+ *   const { isDemoMode, isHydrated, toggle } = useDemoMode()
+ *
+ *   // Wait for hydration before rendering demo-dependent UI
+ *   if (!isHydrated) {
+ *     return <Loading />
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Demo mode: {isDemoMode ? 'ON' : 'OFF'}</p>
+ *       <button onClick={toggle}>Toggle</button>
+ *     </div>
+ *   )
+ * }
+ */
+declare function useDemoMode(): DemoModeContextValue;
+/**
+ * Hook to check if demo mode is enabled
+ * Shorthand for useDemoMode().isDemoMode
+ *
+ * @returns Whether demo mode is enabled
+ */
+declare function useIsDemoMode(): boolean;
+/**
+ * Hook to check if the component has hydrated
+ * Shorthand for useDemoMode().isHydrated
+ *
+ * @returns Whether the component has hydrated
+ */
+declare function useIsHydrated(): boolean;
+/**
+ * Hook to access the session state
+ * Shorthand for useDemoMode().getSession()
+ *
+ * @returns The session state, or null if not yet initialized
+ *
+ * @example
+ * function MyComponent() {
+ *   const session = useDemoSession()
+ *
+ *   const cart = session?.get<CartItem[]>('cart') || []
+ *   const addToCart = (item: CartItem) => {
+ *     session?.set('cart', [...cart, item])
+ *   }
+ *
+ *   return <CartView items={cart} onAdd={addToCart} />
+ * }
+ */
+declare function useDemoSession(): _demokit_ai_core.SessionState | null;
+
+/**
+ * A ready-to-use banner component that shows when demo mode is active
+ *
+ * Displays a prominent amber banner with a label, description, and exit button.
+ * Automatically hides when demo mode is disabled or before hydration.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <DemoKitProvider fixtures={fixtures}>
+ *       <DemoModeBanner />
+ *       <YourApp />
+ *     </DemoKitProvider>
+ *   )
+ * }
+ *
+ * @example Custom labels
+ * <DemoModeBanner
+ *   demoLabel="Preview Mode"
+ *   description="You're viewing sample data"
+ *   exitLabel="Exit Preview"
+ * />
+ */
+declare function DemoModeBanner({ className, exitLabel, demoLabel, description, showIcon, style, onExit, }: DemoModeBannerProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * React context for demo mode state
+ * @internal
+ */
+declare const DemoModeContext: react.Context<DemoModeContextValue | undefined>;
+
+export { DemoKitProvider, type DemoKitProviderProps, DemoModeBanner, type DemoModeBannerProps, DemoModeContext, type DemoModeContextValue, useDemoMode, useDemoSession, useIsDemoMode, useIsHydrated };

package/dist/index.js

@@ -0,0 +1,223 @@
+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
+var DemoModeContext = createContext(void 0);
+DemoModeContext.displayName = "DemoModeContext";
+function DemoKitProvider({
+  children,
+  fixtures,
+  storageKey = "demokit-mode",
+  initialEnabled = false,
+  onDemoModeChange,
+  baseUrl
+}) {
+  const [isDemoMode, setIsDemoMode] = useState(initialEnabled);
+  const [isHydrated, setIsHydrated] = useState(false);
+  const interceptorRef = useRef(null);
+  const initializedRef = useRef(false);
+  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);
+    return () => {
+      interceptorRef.current?.destroy();
+      interceptorRef.current = null;
+      initializedRef.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (interceptorRef.current && isHydrated) {
+      interceptorRef.current.setFixtures(fixtures);
+    }
+  }, [fixtures, isHydrated]);
+  const enable = useCallback(() => {
+    interceptorRef.current?.enable();
+  }, []);
+  const disable = useCallback(() => {
+    interceptorRef.current?.disable();
+  }, []);
+  const toggle = useCallback(() => {
+    interceptorRef.current?.toggle();
+  }, []);
+  const setDemoMode = useCallback((enabled) => {
+    if (enabled) {
+      interceptorRef.current?.enable();
+    } else {
+      interceptorRef.current?.disable();
+    }
+  }, []);
+  const resetSession = useCallback(() => {
+    interceptorRef.current?.resetSession();
+  }, []);
+  const getSession = useCallback(() => {
+    return interceptorRef.current?.getSession() ?? null;
+  }, []);
+  const value = useMemo(
+    () => ({
+      isDemoMode,
+      isHydrated,
+      enable,
+      disable,
+      toggle,
+      setDemoMode,
+      resetSession,
+      getSession
+    }),
+    [isDemoMode, isHydrated, enable, disable, toggle, setDemoMode, resetSession, getSession]
+  );
+  return /* @__PURE__ */ jsx(DemoModeContext.Provider, { value, children });
+}
+function useDemoMode() {
+  const context = useContext(DemoModeContext);
+  if (context === void 0) {
+    throw new Error(
+      "useDemoMode must be used within a DemoKitProvider. Make sure to wrap your app with <DemoKitProvider>."
+    );
+  }
+  return context;
+}
+function useIsDemoMode() {
+  return useDemoMode().isDemoMode;
+}
+function useIsHydrated() {
+  return useDemoMode().isHydrated;
+}
+function useDemoSession() {
+  return useDemoMode().getSession();
+}
+function EyeIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      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" })
+      ]
+    }
+  );
+}
+var defaultStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px 16px",
+    backgroundColor: "#fef3c7",
+    borderBottom: "1px solid rgba(217, 119, 6, 0.2)",
+    fontSize: "14px",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+  },
+  content: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  icon: {
+    color: "#d97706",
+    flexShrink: 0
+  },
+  label: {
+    fontWeight: 600,
+    color: "#78350f"
+  },
+  description: {
+    color: "rgba(120, 53, 15, 0.7)",
+    fontSize: "12px"
+  },
+  button: {
+    padding: "4px 12px",
+    fontSize: "14px",
+    backgroundColor: "transparent",
+    border: "1px solid rgba(217, 119, 6, 0.3)",
+    borderRadius: "4px",
+    cursor: "pointer",
+    color: "#78350f",
+    fontFamily: "inherit",
+    transition: "background-color 0.15s ease"
+  }
+};
+function DemoModeBanner({
+  className = "",
+  exitLabel = "Exit Demo Mode",
+  demoLabel = "Demo Mode Active",
+  description = "Changes are simulated and not saved",
+  showIcon = true,
+  style,
+  onExit
+}) {
+  const { isDemoMode, isHydrated, disable } = useDemoMode();
+  if (!isHydrated || !isDemoMode) {
+    return null;
+  }
+  const handleExit = () => {
+    if (onExit) {
+      onExit();
+    } else {
+      disable();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `demokit-banner ${className}`.trim(),
+      style: { ...defaultStyles.container, ...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__ */ 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
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { DemoKitProvider, DemoModeBanner, DemoModeContext, useDemoMode, useDemoSession, useIsDemoMode, useIsHydrated };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.ts","../src/provider.tsx","../src/hooks.ts","../src/banner.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { createContext } from 'react'\nimport type { DemoModeContextValue } from './types'\n\n/**\n * React context for demo mode state\n * @internal\n */\nexport const DemoModeContext = createContext<DemoModeContextValue | undefined>(undefined)\n\nDemoModeContext.displayName = 'DemoModeContext'\n","'use client'\n\nimport { useState, useEffect, useCallback, useMemo, useRef } from 'react'\nimport { createDemoInterceptor, type DemoInterceptor, type SessionState } from '@demokit-ai/core'\nimport { DemoModeContext } from './context'\nimport type { DemoKitProviderProps, DemoModeContextValue } from './types'\n\n/**\n * Provider component that enables demo mode functionality\n *\n * Wraps your app to provide demo mode state and controls.\n * Handles SSR hydration safely and persists state to localStorage.\n *\n * @example\n * const fixtures = {\n *   'GET /api/users': () => [{ id: '1', name: 'Demo User' }],\n *   'GET /api/users/:id': ({ params }) => ({ id: params.id, name: 'Demo User' }),\n * }\n *\n * function App() {\n *   return (\n *     <DemoKitProvider\n *       fixtures={fixtures}\n *       onDemoModeChange={(enabled) => console.log('Demo mode:', enabled)}\n *     >\n *       <YourApp />\n *     </DemoKitProvider>\n *   )\n * }\n */\nexport function DemoKitProvider({\n  children,\n  fixtures,\n  storageKey = 'demokit-mode',\n  initialEnabled = false,\n  onDemoModeChange,\n  baseUrl,\n}: DemoKitProviderProps) {\n  // Start with initialEnabled for SSR to avoid hydration mismatch\n  const [isDemoMode, setIsDemoMode] = useState(initialEnabled)\n  const [isHydrated, setIsHydrated] = useState(false)\n\n  // Keep a ref to the interceptor instance\n  const interceptorRef = useRef<DemoInterceptor | null>(null)\n\n  // Track if we've initialized\n  const initializedRef = useRef(false)\n\n  // Initialize interceptor on mount (client-side only)\n  useEffect(() => {\n    if (initializedRef.current) {\n      return\n    }\n    initializedRef.current = true\n\n    interceptorRef.current = createDemoInterceptor({\n      fixtures,\n      storageKey,\n      initialEnabled,\n      baseUrl,\n      onEnable: () => {\n        setIsDemoMode(true)\n        onDemoModeChange?.(true)\n      },\n      onDisable: () => {\n        setIsDemoMode(false)\n        onDemoModeChange?.(false)\n      },\n    })\n\n    // Sync state from storage after hydration\n    const storedState = interceptorRef.current.isEnabled()\n    setIsDemoMode(storedState)\n\n    // Mark as hydrated\n    setIsHydrated(true)\n\n    return () => {\n      interceptorRef.current?.destroy()\n      interceptorRef.current = null\n      initializedRef.current = false\n    }\n  }, []) // Empty deps - only run once on mount\n\n  // Update fixtures if they change\n  useEffect(() => {\n    if (interceptorRef.current && isHydrated) {\n      interceptorRef.current.setFixtures(fixtures)\n    }\n  }, [fixtures, isHydrated])\n\n  const enable = useCallback(() => {\n    interceptorRef.current?.enable()\n  }, [])\n\n  const disable = useCallback(() => {\n    interceptorRef.current?.disable()\n  }, [])\n\n  const toggle = useCallback(() => {\n    interceptorRef.current?.toggle()\n  }, [])\n\n  const setDemoMode = useCallback((enabled: boolean) => {\n    if (enabled) {\n      interceptorRef.current?.enable()\n    } else {\n      interceptorRef.current?.disable()\n    }\n  }, [])\n\n  const resetSession = useCallback(() => {\n    interceptorRef.current?.resetSession()\n  }, [])\n\n  const getSession = useCallback((): SessionState | null => {\n    return interceptorRef.current?.getSession() ?? null\n  }, [])\n\n  const value = useMemo<DemoModeContextValue>(\n    () => ({\n      isDemoMode,\n      isHydrated,\n      enable,\n      disable,\n      toggle,\n      setDemoMode,\n      resetSession,\n      getSession,\n    }),\n    [isDemoMode, isHydrated, enable, disable, toggle, setDemoMode, resetSession, getSession]\n  )\n\n  return (\n    <DemoModeContext.Provider value={value}>\n      {children}\n    </DemoModeContext.Provider>\n  )\n}\n","'use client'\n\nimport { useContext } from 'react'\nimport { DemoModeContext } from './context'\nimport type { DemoModeContextValue } from './types'\n\n/**\n * Hook to access demo mode state and controls\n *\n * @returns Demo mode context value with state and control methods\n * @throws Error if used outside of DemoKitProvider\n *\n * @example\n * function MyComponent() {\n *   const { isDemoMode, isHydrated, toggle } = useDemoMode()\n *\n *   // Wait for hydration before rendering demo-dependent UI\n *   if (!isHydrated) {\n *     return <Loading />\n *   }\n *\n *   return (\n *     <div>\n *       <p>Demo mode: {isDemoMode ? 'ON' : 'OFF'}</p>\n *       <button onClick={toggle}>Toggle</button>\n *     </div>\n *   )\n * }\n */\nexport function useDemoMode(): DemoModeContextValue {\n  const context = useContext(DemoModeContext)\n\n  if (context === undefined) {\n    throw new Error(\n      'useDemoMode must be used within a DemoKitProvider. ' +\n        'Make sure to wrap your app with <DemoKitProvider>.'\n    )\n  }\n\n  return context\n}\n\n/**\n * Hook to check if demo mode is enabled\n * Shorthand for useDemoMode().isDemoMode\n *\n * @returns Whether demo mode is enabled\n */\nexport function useIsDemoMode(): boolean {\n  return useDemoMode().isDemoMode\n}\n\n/**\n * Hook to check if the component has hydrated\n * Shorthand for useDemoMode().isHydrated\n *\n * @returns Whether the component has hydrated\n */\nexport function useIsHydrated(): boolean {\n  return useDemoMode().isHydrated\n}\n\n/**\n * Hook to access the session state\n * Shorthand for useDemoMode().getSession()\n *\n * @returns The session state, or null if not yet initialized\n *\n * @example\n * function MyComponent() {\n *   const session = useDemoSession()\n *\n *   const cart = session?.get<CartItem[]>('cart') || []\n *   const addToCart = (item: CartItem) => {\n *     session?.set('cart', [...cart, item])\n *   }\n *\n *   return <CartView items={cart} onAdd={addToCart} />\n * }\n */\nexport function useDemoSession() {\n  return useDemoMode().getSession()\n}\n","'use client'\n\nimport { useDemoMode } from './hooks'\nimport type { DemoModeBannerProps } from './types'\n\n/**\n * Eye icon SVG component\n */\nfunction EyeIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  )\n}\n\n/**\n * Default styles for the banner\n */\nconst defaultStyles = {\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '8px 16px',\n    backgroundColor: '#fef3c7',\n    borderBottom: '1px solid rgba(217, 119, 6, 0.2)',\n    fontSize: '14px',\n    fontFamily:\n      '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif',\n  } as React.CSSProperties,\n  content: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  } as React.CSSProperties,\n  icon: {\n    color: '#d97706',\n    flexShrink: 0,\n  } as React.CSSProperties,\n  label: {\n    fontWeight: 600,\n    color: '#78350f',\n  } as React.CSSProperties,\n  description: {\n    color: 'rgba(120, 53, 15, 0.7)',\n    fontSize: '12px',\n  } as React.CSSProperties,\n  button: {\n    padding: '4px 12px',\n    fontSize: '14px',\n    backgroundColor: 'transparent',\n    border: '1px solid rgba(217, 119, 6, 0.3)',\n    borderRadius: '4px',\n    cursor: 'pointer',\n    color: '#78350f',\n    fontFamily: 'inherit',\n    transition: 'background-color 0.15s ease',\n  } as React.CSSProperties,\n}\n\n/**\n * A ready-to-use banner component that shows when demo mode is active\n *\n * Displays a prominent amber banner with a label, description, and exit button.\n * Automatically hides when demo mode is disabled or before hydration.\n *\n * @example\n * function App() {\n *   return (\n *     <DemoKitProvider fixtures={fixtures}>\n *       <DemoModeBanner />\n *       <YourApp />\n *     </DemoKitProvider>\n *   )\n * }\n *\n * @example Custom labels\n * <DemoModeBanner\n *   demoLabel=\"Preview Mode\"\n *   description=\"You're viewing sample data\"\n *   exitLabel=\"Exit Preview\"\n * />\n */\nexport function DemoModeBanner({\n  className = '',\n  exitLabel = 'Exit Demo Mode',\n  demoLabel = 'Demo Mode Active',\n  description = 'Changes are simulated and not saved',\n  showIcon = true,\n  style,\n  onExit,\n}: DemoModeBannerProps) {\n  const { isDemoMode, isHydrated, disable } = useDemoMode()\n\n  // Don't render until hydrated to avoid hydration mismatch\n  if (!isHydrated || !isDemoMode) {\n    return null\n  }\n\n  const handleExit = () => {\n    if (onExit) {\n      onExit()\n    } else {\n      disable()\n    }\n  }\n\n  return (\n    <div\n      className={`demokit-banner ${className}`.trim()}\n      style={{ ...defaultStyles.container, ...style }}\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <div style={defaultStyles.content}>\n        {showIcon && (\n          <span style={defaultStyles.icon}>\n            <EyeIcon />\n          </span>\n        )}\n        <span style={defaultStyles.label}>{demoLabel}</span>\n        {description && <span style={defaultStyles.description}>{description}</span>}\n      </div>\n      <button\n        onClick={handleExit}\n        style={defaultStyles.button}\n        onMouseOver={(e) => {\n          e.currentTarget.style.backgroundColor = 'rgba(217, 119, 6, 0.1)'\n        }}\n        onMouseOut={(e) => {\n          e.currentTarget.style.backgroundColor = 'transparent'\n        }}\n        type=\"button\"\n      >\n        {exitLabel}\n      </button>\n    </div>\n  )\n}\n"]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@demokit-ai/react",
+  "version": "0.0.1",
+  "description": "React bindings for DemoKit - provider, hooks, and components",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@demokit-ai/core": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "keywords": [
+    "demo",
+    "mock",
+    "react",
+    "provider",
+    "hooks",
+    "saas"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/demokit",
+    "directory": "packages/react"
+  },
+  "sideEffects": false
+}