@demokit-ai/next 0.0.1

package/dist/client.cjs

@@ -0,0 +1,152 @@
+'use strict';
+
+var react$1 = require('react');
+var react = require('@demokit-ai/react');
+var jsxRuntime = require('react/jsx-runtime');
+var navigation = require('next/navigation');
+
+// src/client/provider.tsx
+function getDemoModeFromCookie(cookieName) {
+  if (typeof document === "undefined") return false;
+  const cookies = document.cookie.split(";");
+  const demoCookie = cookies.find((c) => c.trim().startsWith(`${cookieName}=`));
+  return demoCookie !== void 0;
+}
+function getScenarioFromCookie(cookieName) {
+  if (typeof document === "undefined") return null;
+  const cookies = document.cookie.split(";");
+  const demoCookie = cookies.find((c) => c.trim().startsWith(`${cookieName}=`));
+  if (!demoCookie) return null;
+  const value = demoCookie.split("=")[1]?.trim();
+  if (!value || value === "true") return null;
+  return value;
+}
+function DemoKitNextProvider({
+  children,
+  fixtures,
+  scenarios = {},
+  storageKey = "demokit-mode",
+  cookieName = "demokit-mode",
+  initialEnabled,
+  baseUrl
+}) {
+  const [isHydrated, setIsHydrated] = react$1.useState(false);
+  const [scenario, setScenario] = react$1.useState(null);
+  react$1.useEffect(() => {
+    getDemoModeFromCookie(cookieName);
+    const cookieScenario = getScenarioFromCookie(cookieName);
+    setScenario(cookieScenario);
+    setIsHydrated(true);
+  }, [cookieName]);
+  const activeFixtures = react$1.useMemo(() => {
+    if (scenario && scenarios[scenario]) {
+      return { ...fixtures, ...scenarios[scenario] };
+    }
+    return fixtures;
+  }, [fixtures, scenarios, scenario]);
+  const enabled = react$1.useMemo(() => {
+    if (initialEnabled !== void 0) {
+      return initialEnabled;
+    }
+    if (!isHydrated) {
+      return false;
+    }
+    return getDemoModeFromCookie(cookieName);
+  }, [initialEnabled, isHydrated, cookieName]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.DemoKitProvider,
+    {
+      fixtures: activeFixtures,
+      storageKey,
+      initialEnabled: enabled,
+      baseUrl,
+      children
+    }
+  );
+}
+function useNextDemoMode(options = {}) {
+  const { urlParam = "demo" } = options;
+  const demoMode = react.useDemoMode();
+  const router = navigation.useRouter();
+  const searchParams = navigation.useSearchParams();
+  const enableWithScenario = react$1.useCallback(
+    (scenario) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(urlParam, scenario);
+      router.push(`?${params.toString()}`);
+    },
+    [router, searchParams, urlParam]
+  );
+  const enableDemo = react$1.useCallback(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set(urlParam, "true");
+    router.push(`?${params.toString()}`);
+  }, [router, searchParams, urlParam]);
+  const disableDemo = react$1.useCallback(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set(urlParam, "false");
+    router.push(`?${params.toString()}`);
+  }, [router, searchParams, urlParam]);
+  const currentScenario = searchParams.get(urlParam);
+  const isScenario = currentScenario !== null && currentScenario !== "true" && currentScenario !== "false" && currentScenario !== "1" && currentScenario !== "0";
+  return {
+    ...demoMode,
+    enableWithScenario,
+    enableDemo,
+    disableDemo,
+    currentScenario: isScenario ? currentScenario : null
+  };
+}
+function useIsNextDemoMode() {
+  return useNextDemoMode().isDemoMode;
+}
+function NextDemoModeBanner({
+  showScenario = true,
+  onExit,
+  description,
+  ...props
+}) {
+  const { currentScenario, disableDemo, isDemoMode, isHydrated } = useNextDemoMode();
+  if (!isHydrated || !isDemoMode) {
+    return null;
+  }
+  let bannerDescription = description ?? "Changes are simulated and not saved";
+  if (showScenario && currentScenario) {
+    bannerDescription = `Scenario: ${currentScenario} \u2022 ${bannerDescription}`;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.DemoModeBanner,
+    {
+      ...props,
+      description: bannerDescription,
+      onExit: onExit ?? disableDemo
+    }
+  );
+}
+
+Object.defineProperty(exports, "DemoModeBanner", {
+  enumerable: true,
+  get: function () { return react.DemoModeBanner; }
+});
+Object.defineProperty(exports, "useDemoMode", {
+  enumerable: true,
+  get: function () { return react.useDemoMode; }
+});
+Object.defineProperty(exports, "useDemoSession", {
+  enumerable: true,
+  get: function () { return react.useDemoSession; }
+});
+Object.defineProperty(exports, "useIsDemoMode", {
+  enumerable: true,
+  get: function () { return react.useIsDemoMode; }
+});
+Object.defineProperty(exports, "useIsHydrated", {
+  enumerable: true,
+  get: function () { return react.useIsHydrated; }
+});
+exports.DemoKitNextProvider = DemoKitNextProvider;
+exports.NextDemoModeBanner = NextDemoModeBanner;
+exports.useIsNextDemoMode = useIsNextDemoMode;
+exports.useNextDemoMode = useNextDemoMode;
+//# sourceMappingURL=client.cjs.map
+//# sourceMappingURL=client.cjs.map

package/dist/client.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/client/provider.tsx","../src/client/hooks.ts","../src/client/banner.tsx"],"names":["useState","useEffect","useMemo","jsx","DemoKitProvider","useDemoMode","useRouter","useSearchParams","useCallback","DemoModeBanner"],"mappings":"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","file":"client.cjs","sourcesContent":["'use client'\n\nimport { useEffect, useState, useMemo } from 'react'\nimport { DemoKitProvider, type DemoKitProviderProps } from '@demokit-ai/react'\nimport type { DemoKitNextProviderProps } from '../types'\n\n/**\n * Get initial demo mode state from cookie\n */\nfunction getDemoModeFromCookie(cookieName: string): boolean {\n  if (typeof document === 'undefined') return false\n\n  const cookies = document.cookie.split(';')\n  const demoCookie = cookies.find((c) => c.trim().startsWith(`${cookieName}=`))\n\n  return demoCookie !== undefined\n}\n\n/**\n * Get scenario from cookie\n */\nfunction getScenarioFromCookie(cookieName: string): string | null {\n  if (typeof document === 'undefined') return null\n\n  const cookies = document.cookie.split(';')\n  const demoCookie = cookies.find((c) => c.trim().startsWith(`${cookieName}=`))\n\n  if (!demoCookie) return null\n\n  const value = demoCookie.split('=')[1]?.trim()\n  if (!value || value === 'true') return null\n\n  return value\n}\n\n/**\n * Next.js-aware DemoKit provider\n *\n * This provider:\n * - Reads initial state from cookies (set by middleware)\n * - Supports scenario switching\n * - Works with both App Router and Pages Router\n *\n * @example\n * // app/providers.tsx\n * 'use client'\n *\n * import { DemoKitNextProvider } from '@demokit-ai/next/client'\n * import { fixtures, scenarios } from '@/lib/demo-fixtures'\n *\n * export function Providers({ children }: { children: React.ReactNode }) {\n *   return (\n *     <DemoKitNextProvider\n *       fixtures={fixtures}\n *       scenarios={scenarios}\n *     >\n *       {children}\n *     </DemoKitNextProvider>\n *   )\n * }\n */\nexport function DemoKitNextProvider({\n  children,\n  fixtures,\n  scenarios = {},\n  storageKey = 'demokit-mode',\n  cookieName = 'demokit-mode',\n  initialEnabled,\n  baseUrl,\n}: DemoKitNextProviderProps) {\n  const [isHydrated, setIsHydrated] = useState(false)\n  const [scenario, setScenario] = useState<string | null>(null)\n\n  // Read initial state from cookie on mount\n  useEffect(() => {\n    const cookieEnabled = getDemoModeFromCookie(cookieName)\n    const cookieScenario = getScenarioFromCookie(cookieName)\n    setScenario(cookieScenario)\n    setIsHydrated(true)\n  }, [cookieName])\n\n  // Merge fixtures with scenario fixtures\n  const activeFixtures = useMemo(() => {\n    if (scenario && scenarios[scenario]) {\n      return { ...fixtures, ...scenarios[scenario] }\n    }\n    return fixtures\n  }, [fixtures, scenarios, scenario])\n\n  // Determine initial enabled state\n  const enabled = useMemo(() => {\n    if (initialEnabled !== undefined) {\n      return initialEnabled\n    }\n    if (!isHydrated) {\n      return false\n    }\n    return getDemoModeFromCookie(cookieName)\n  }, [initialEnabled, isHydrated, cookieName])\n\n  return (\n    <DemoKitProvider\n      fixtures={activeFixtures}\n      storageKey={storageKey}\n      initialEnabled={enabled}\n      baseUrl={baseUrl}\n    >\n      {children}\n    </DemoKitProvider>\n  )\n}\n","'use client'\n\nimport { useCallback } from 'react'\nimport { useDemoMode } from '@demokit-ai/react'\nimport { useRouter, useSearchParams } from 'next/navigation'\n\n/**\n * Hook for Next.js-specific demo mode controls\n *\n * Extends useDemoMode with URL-based scenario switching\n *\n * @example\n * function DemoControls() {\n *   const { isDemoMode, enableWithScenario, disableDemo, currentScenario } = useNextDemoMode()\n *\n *   return (\n *     <div>\n *       <button onClick={() => enableWithScenario('empty-state')}>\n *         Empty State Demo\n *       </button>\n *       <button onClick={() => enableWithScenario('error-state')}>\n *         Error State Demo\n *       </button>\n *       <button onClick={disableDemo}>\n *         Exit Demo\n *       </button>\n *       {currentScenario && <span>Scenario: {currentScenario}</span>}\n *     </div>\n *   )\n * }\n */\nexport function useNextDemoMode(options: { urlParam?: string } = {}) {\n  const { urlParam = 'demo' } = options\n  const demoMode = useDemoMode()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n\n  /**\n   * Enable demo mode with a specific scenario via URL\n   */\n  const enableWithScenario = useCallback(\n    (scenario: string) => {\n      const params = new URLSearchParams(searchParams.toString())\n      params.set(urlParam, scenario)\n      router.push(`?${params.toString()}`)\n    },\n    [router, searchParams, urlParam]\n  )\n\n  /**\n   * Enable demo mode without a scenario\n   */\n  const enableDemo = useCallback(() => {\n    const params = new URLSearchParams(searchParams.toString())\n    params.set(urlParam, 'true')\n    router.push(`?${params.toString()}`)\n  }, [router, searchParams, urlParam])\n\n  /**\n   * Disable demo mode via URL\n   */\n  const disableDemo = useCallback(() => {\n    const params = new URLSearchParams(searchParams.toString())\n    params.set(urlParam, 'false')\n    router.push(`?${params.toString()}`)\n  }, [router, searchParams, urlParam])\n\n  /**\n   * Get current scenario from URL\n   */\n  const currentScenario = searchParams.get(urlParam)\n  const isScenario =\n    currentScenario !== null &&\n    currentScenario !== 'true' &&\n    currentScenario !== 'false' &&\n    currentScenario !== '1' &&\n    currentScenario !== '0'\n\n  return {\n    ...demoMode,\n    enableWithScenario,\n    enableDemo,\n    disableDemo,\n    currentScenario: isScenario ? currentScenario : null,\n  }\n}\n\n/**\n * Hook to check if we're in demo mode on the client\n * Shorthand for useNextDemoMode().isDemoMode\n */\nexport function useIsNextDemoMode(): boolean {\n  return useNextDemoMode().isDemoMode\n}\n\n// Re-export base hooks from @demokit-ai/react\nexport { useDemoMode, useIsDemoMode, useIsHydrated, useDemoSession } from '@demokit-ai/react'\n","'use client'\n\nimport { DemoModeBanner, type DemoModeBannerProps } from '@demokit-ai/react'\nimport { useNextDemoMode } from './hooks'\n\nexport interface NextDemoModeBannerProps extends Omit<DemoModeBannerProps, 'onExit'> {\n  /**\n   * Whether to include the current scenario in the banner\n   * @default true\n   */\n  showScenario?: boolean\n\n  /**\n   * Custom exit handler\n   * If not provided, will use URL-based navigation\n   */\n  onExit?: () => void\n}\n\n/**\n * Demo mode banner for Next.js\n *\n * Extends DemoModeBanner with scenario display and URL-based exit\n *\n * @example\n * // In your layout\n * <NextDemoModeBanner />\n *\n * // With custom labels\n * <NextDemoModeBanner\n *   demoLabel=\"Preview Mode\"\n *   exitLabel=\"Exit Preview\"\n *   showScenario={true}\n * />\n */\nexport function NextDemoModeBanner({\n  showScenario = true,\n  onExit,\n  description,\n  ...props\n}: NextDemoModeBannerProps) {\n  const { currentScenario, disableDemo, isDemoMode, isHydrated } = useNextDemoMode()\n\n  // Don't render if not hydrated or not in demo mode\n  if (!isHydrated || !isDemoMode) {\n    return null\n  }\n\n  // Build description with scenario\n  let bannerDescription = description ?? 'Changes are simulated and not saved'\n  if (showScenario && currentScenario) {\n    bannerDescription = `Scenario: ${currentScenario} • ${bannerDescription}`\n  }\n\n  return (\n    <DemoModeBanner\n      {...props}\n      description={bannerDescription}\n      onExit={onExit ?? disableDemo}\n    />\n  )\n}\n\n// Re-export base banner\nexport { DemoModeBanner } from '@demokit-ai/react'\n"]}

package/dist/client.d.cts

@@ -0,0 +1,114 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as DemoKitNextProviderProps } from './types-Cvq5JUP1.cjs';
+import * as _demokit_ai_core from '@demokit-ai/core';
+import { DemoModeBannerProps } from '@demokit-ai/react';
+export { DemoModeBanner, useDemoMode, useDemoSession, useIsDemoMode, useIsHydrated } from '@demokit-ai/react';
+import 'react';
+import 'next/server';
+
+/**
+ * Next.js-aware DemoKit provider
+ *
+ * This provider:
+ * - Reads initial state from cookies (set by middleware)
+ * - Supports scenario switching
+ * - Works with both App Router and Pages Router
+ *
+ * @example
+ * // app/providers.tsx
+ * 'use client'
+ *
+ * import { DemoKitNextProvider } from '@demokit-ai/next/client'
+ * import { fixtures, scenarios } from '@/lib/demo-fixtures'
+ *
+ * export function Providers({ children }: { children: React.ReactNode }) {
+ *   return (
+ *     <DemoKitNextProvider
+ *       fixtures={fixtures}
+ *       scenarios={scenarios}
+ *     >
+ *       {children}
+ *     </DemoKitNextProvider>
+ *   )
+ * }
+ */
+declare function DemoKitNextProvider({ children, fixtures, scenarios, storageKey, cookieName, initialEnabled, baseUrl, }: DemoKitNextProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Hook for Next.js-specific demo mode controls
+ *
+ * Extends useDemoMode with URL-based scenario switching
+ *
+ * @example
+ * function DemoControls() {
+ *   const { isDemoMode, enableWithScenario, disableDemo, currentScenario } = useNextDemoMode()
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => enableWithScenario('empty-state')}>
+ *         Empty State Demo
+ *       </button>
+ *       <button onClick={() => enableWithScenario('error-state')}>
+ *         Error State Demo
+ *       </button>
+ *       <button onClick={disableDemo}>
+ *         Exit Demo
+ *       </button>
+ *       {currentScenario && <span>Scenario: {currentScenario}</span>}
+ *     </div>
+ *   )
+ * }
+ */
+declare function useNextDemoMode(options?: {
+    urlParam?: string;
+}): {
+    enableWithScenario: (scenario: string) => void;
+    enableDemo: () => void;
+    disableDemo: () => void;
+    currentScenario: string | null;
+    isDemoMode: boolean;
+    isHydrated: boolean;
+    enable(): void;
+    disable(): void;
+    toggle(): void;
+    setDemoMode(enabled: boolean): void;
+    resetSession(): void;
+    getSession(): _demokit_ai_core.SessionState | null;
+};
+/**
+ * Hook to check if we're in demo mode on the client
+ * Shorthand for useNextDemoMode().isDemoMode
+ */
+declare function useIsNextDemoMode(): boolean;
+
+interface NextDemoModeBannerProps extends Omit<DemoModeBannerProps, 'onExit'> {
+    /**
+     * Whether to include the current scenario in the banner
+     * @default true
+     */
+    showScenario?: boolean;
+    /**
+     * Custom exit handler
+     * If not provided, will use URL-based navigation
+     */
+    onExit?: () => void;
+}
+/**
+ * Demo mode banner for Next.js
+ *
+ * Extends DemoModeBanner with scenario display and URL-based exit
+ *
+ * @example
+ * // In your layout
+ * <NextDemoModeBanner />
+ *
+ * // With custom labels
+ * <NextDemoModeBanner
+ *   demoLabel="Preview Mode"
+ *   exitLabel="Exit Preview"
+ *   showScenario={true}
+ * />
+ */
+declare function NextDemoModeBanner({ showScenario, onExit, description, ...props }: NextDemoModeBannerProps): react_jsx_runtime.JSX.Element | null;
+
+export { DemoKitNextProvider, NextDemoModeBanner, type NextDemoModeBannerProps, useIsNextDemoMode, useNextDemoMode };

package/dist/client.d.ts

@@ -0,0 +1,114 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as DemoKitNextProviderProps } from './types-Cvq5JUP1.js';
+import * as _demokit_ai_core from '@demokit-ai/core';
+import { DemoModeBannerProps } from '@demokit-ai/react';
+export { DemoModeBanner, useDemoMode, useDemoSession, useIsDemoMode, useIsHydrated } from '@demokit-ai/react';
+import 'react';
+import 'next/server';
+
+/**
+ * Next.js-aware DemoKit provider
+ *
+ * This provider:
+ * - Reads initial state from cookies (set by middleware)
+ * - Supports scenario switching
+ * - Works with both App Router and Pages Router
+ *
+ * @example
+ * // app/providers.tsx
+ * 'use client'
+ *
+ * import { DemoKitNextProvider } from '@demokit-ai/next/client'
+ * import { fixtures, scenarios } from '@/lib/demo-fixtures'
+ *
+ * export function Providers({ children }: { children: React.ReactNode }) {
+ *   return (
+ *     <DemoKitNextProvider
+ *       fixtures={fixtures}
+ *       scenarios={scenarios}
+ *     >
+ *       {children}
+ *     </DemoKitNextProvider>
+ *   )
+ * }
+ */
+declare function DemoKitNextProvider({ children, fixtures, scenarios, storageKey, cookieName, initialEnabled, baseUrl, }: DemoKitNextProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Hook for Next.js-specific demo mode controls
+ *
+ * Extends useDemoMode with URL-based scenario switching
+ *
+ * @example
+ * function DemoControls() {
+ *   const { isDemoMode, enableWithScenario, disableDemo, currentScenario } = useNextDemoMode()
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => enableWithScenario('empty-state')}>
+ *         Empty State Demo
+ *       </button>
+ *       <button onClick={() => enableWithScenario('error-state')}>
+ *         Error State Demo
+ *       </button>
+ *       <button onClick={disableDemo}>
+ *         Exit Demo
+ *       </button>
+ *       {currentScenario && <span>Scenario: {currentScenario}</span>}
+ *     </div>
+ *   )
+ * }
+ */
+declare function useNextDemoMode(options?: {
+    urlParam?: string;
+}): {
+    enableWithScenario: (scenario: string) => void;
+    enableDemo: () => void;
+    disableDemo: () => void;
+    currentScenario: string | null;
+    isDemoMode: boolean;
+    isHydrated: boolean;
+    enable(): void;
+    disable(): void;
+    toggle(): void;
+    setDemoMode(enabled: boolean): void;
+    resetSession(): void;
+    getSession(): _demokit_ai_core.SessionState | null;
+};
+/**
+ * Hook to check if we're in demo mode on the client
+ * Shorthand for useNextDemoMode().isDemoMode
+ */
+declare function useIsNextDemoMode(): boolean;
+
+interface NextDemoModeBannerProps extends Omit<DemoModeBannerProps, 'onExit'> {
+    /**
+     * Whether to include the current scenario in the banner
+     * @default true
+     */
+    showScenario?: boolean;
+    /**
+     * Custom exit handler
+     * If not provided, will use URL-based navigation
+     */
+    onExit?: () => void;
+}
+/**
+ * Demo mode banner for Next.js
+ *
+ * Extends DemoModeBanner with scenario display and URL-based exit
+ *
+ * @example
+ * // In your layout
+ * <NextDemoModeBanner />
+ *
+ * // With custom labels
+ * <NextDemoModeBanner
+ *   demoLabel="Preview Mode"
+ *   exitLabel="Exit Preview"
+ *   showScenario={true}
+ * />
+ */
+declare function NextDemoModeBanner({ showScenario, onExit, description, ...props }: NextDemoModeBannerProps): react_jsx_runtime.JSX.Element | null;
+
+export { DemoKitNextProvider, NextDemoModeBanner, type NextDemoModeBannerProps, useIsNextDemoMode, useNextDemoMode };

package/dist/client.js

@@ -0,0 +1,128 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { DemoKitProvider, useDemoMode, DemoModeBanner } from '@demokit-ai/react';
+export { DemoModeBanner, useDemoMode, useDemoSession, useIsDemoMode, useIsHydrated } from '@demokit-ai/react';
+import { jsx } from 'react/jsx-runtime';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+// src/client/provider.tsx
+function getDemoModeFromCookie(cookieName) {
+  if (typeof document === "undefined") return false;
+  const cookies = document.cookie.split(";");
+  const demoCookie = cookies.find((c) => c.trim().startsWith(`${cookieName}=`));
+  return demoCookie !== void 0;
+}
+function getScenarioFromCookie(cookieName) {
+  if (typeof document === "undefined") return null;
+  const cookies = document.cookie.split(";");
+  const demoCookie = cookies.find((c) => c.trim().startsWith(`${cookieName}=`));
+  if (!demoCookie) return null;
+  const value = demoCookie.split("=")[1]?.trim();
+  if (!value || value === "true") return null;
+  return value;
+}
+function DemoKitNextProvider({
+  children,
+  fixtures,
+  scenarios = {},
+  storageKey = "demokit-mode",
+  cookieName = "demokit-mode",
+  initialEnabled,
+  baseUrl
+}) {
+  const [isHydrated, setIsHydrated] = useState(false);
+  const [scenario, setScenario] = useState(null);
+  useEffect(() => {
+    getDemoModeFromCookie(cookieName);
+    const cookieScenario = getScenarioFromCookie(cookieName);
+    setScenario(cookieScenario);
+    setIsHydrated(true);
+  }, [cookieName]);
+  const activeFixtures = useMemo(() => {
+    if (scenario && scenarios[scenario]) {
+      return { ...fixtures, ...scenarios[scenario] };
+    }
+    return fixtures;
+  }, [fixtures, scenarios, scenario]);
+  const enabled = useMemo(() => {
+    if (initialEnabled !== void 0) {
+      return initialEnabled;
+    }
+    if (!isHydrated) {
+      return false;
+    }
+    return getDemoModeFromCookie(cookieName);
+  }, [initialEnabled, isHydrated, cookieName]);
+  return /* @__PURE__ */ jsx(
+    DemoKitProvider,
+    {
+      fixtures: activeFixtures,
+      storageKey,
+      initialEnabled: enabled,
+      baseUrl,
+      children
+    }
+  );
+}
+function useNextDemoMode(options = {}) {
+  const { urlParam = "demo" } = options;
+  const demoMode = useDemoMode();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const enableWithScenario = useCallback(
+    (scenario) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(urlParam, scenario);
+      router.push(`?${params.toString()}`);
+    },
+    [router, searchParams, urlParam]
+  );
+  const enableDemo = useCallback(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set(urlParam, "true");
+    router.push(`?${params.toString()}`);
+  }, [router, searchParams, urlParam]);
+  const disableDemo = useCallback(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set(urlParam, "false");
+    router.push(`?${params.toString()}`);
+  }, [router, searchParams, urlParam]);
+  const currentScenario = searchParams.get(urlParam);
+  const isScenario = currentScenario !== null && currentScenario !== "true" && currentScenario !== "false" && currentScenario !== "1" && currentScenario !== "0";
+  return {
+    ...demoMode,
+    enableWithScenario,
+    enableDemo,
+    disableDemo,
+    currentScenario: isScenario ? currentScenario : null
+  };
+}
+function useIsNextDemoMode() {
+  return useNextDemoMode().isDemoMode;
+}
+function NextDemoModeBanner({
+  showScenario = true,
+  onExit,
+  description,
+  ...props
+}) {
+  const { currentScenario, disableDemo, isDemoMode, isHydrated } = useNextDemoMode();
+  if (!isHydrated || !isDemoMode) {
+    return null;
+  }
+  let bannerDescription = description ?? "Changes are simulated and not saved";
+  if (showScenario && currentScenario) {
+    bannerDescription = `Scenario: ${currentScenario} \u2022 ${bannerDescription}`;
+  }
+  return /* @__PURE__ */ jsx(
+    DemoModeBanner,
+    {
+      ...props,
+      description: bannerDescription,
+      onExit: onExit ?? disableDemo
+    }
+  );
+}
+
+export { DemoKitNextProvider, NextDemoModeBanner, useIsNextDemoMode, useNextDemoMode };
+//# sourceMappingURL=client.js.map
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/client/provider.tsx","../src/client/hooks.ts","../src/client/banner.tsx"],"names":["jsx"],"mappings":"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","file":"client.js","sourcesContent":["'use client'\n\nimport { useEffect, useState, useMemo } from 'react'\nimport { DemoKitProvider, type DemoKitProviderProps } from '@demokit-ai/react'\nimport type { DemoKitNextProviderProps } from '../types'\n\n/**\n * Get initial demo mode state from cookie\n */\nfunction getDemoModeFromCookie(cookieName: string): boolean {\n  if (typeof document === 'undefined') return false\n\n  const cookies = document.cookie.split(';')\n  const demoCookie = cookies.find((c) => c.trim().startsWith(`${cookieName}=`))\n\n  return demoCookie !== undefined\n}\n\n/**\n * Get scenario from cookie\n */\nfunction getScenarioFromCookie(cookieName: string): string | null {\n  if (typeof document === 'undefined') return null\n\n  const cookies = document.cookie.split(';')\n  const demoCookie = cookies.find((c) => c.trim().startsWith(`${cookieName}=`))\n\n  if (!demoCookie) return null\n\n  const value = demoCookie.split('=')[1]?.trim()\n  if (!value || value === 'true') return null\n\n  return value\n}\n\n/**\n * Next.js-aware DemoKit provider\n *\n * This provider:\n * - Reads initial state from cookies (set by middleware)\n * - Supports scenario switching\n * - Works with both App Router and Pages Router\n *\n * @example\n * // app/providers.tsx\n * 'use client'\n *\n * import { DemoKitNextProvider } from '@demokit-ai/next/client'\n * import { fixtures, scenarios } from '@/lib/demo-fixtures'\n *\n * export function Providers({ children }: { children: React.ReactNode }) {\n *   return (\n *     <DemoKitNextProvider\n *       fixtures={fixtures}\n *       scenarios={scenarios}\n *     >\n *       {children}\n *     </DemoKitNextProvider>\n *   )\n * }\n */\nexport function DemoKitNextProvider({\n  children,\n  fixtures,\n  scenarios = {},\n  storageKey = 'demokit-mode',\n  cookieName = 'demokit-mode',\n  initialEnabled,\n  baseUrl,\n}: DemoKitNextProviderProps) {\n  const [isHydrated, setIsHydrated] = useState(false)\n  const [scenario, setScenario] = useState<string | null>(null)\n\n  // Read initial state from cookie on mount\n  useEffect(() => {\n    const cookieEnabled = getDemoModeFromCookie(cookieName)\n    const cookieScenario = getScenarioFromCookie(cookieName)\n    setScenario(cookieScenario)\n    setIsHydrated(true)\n  }, [cookieName])\n\n  // Merge fixtures with scenario fixtures\n  const activeFixtures = useMemo(() => {\n    if (scenario && scenarios[scenario]) {\n      return { ...fixtures, ...scenarios[scenario] }\n    }\n    return fixtures\n  }, [fixtures, scenarios, scenario])\n\n  // Determine initial enabled state\n  const enabled = useMemo(() => {\n    if (initialEnabled !== undefined) {\n      return initialEnabled\n    }\n    if (!isHydrated) {\n      return false\n    }\n    return getDemoModeFromCookie(cookieName)\n  }, [initialEnabled, isHydrated, cookieName])\n\n  return (\n    <DemoKitProvider\n      fixtures={activeFixtures}\n      storageKey={storageKey}\n      initialEnabled={enabled}\n      baseUrl={baseUrl}\n    >\n      {children}\n    </DemoKitProvider>\n  )\n}\n","'use client'\n\nimport { useCallback } from 'react'\nimport { useDemoMode } from '@demokit-ai/react'\nimport { useRouter, useSearchParams } from 'next/navigation'\n\n/**\n * Hook for Next.js-specific demo mode controls\n *\n * Extends useDemoMode with URL-based scenario switching\n *\n * @example\n * function DemoControls() {\n *   const { isDemoMode, enableWithScenario, disableDemo, currentScenario } = useNextDemoMode()\n *\n *   return (\n *     <div>\n *       <button onClick={() => enableWithScenario('empty-state')}>\n *         Empty State Demo\n *       </button>\n *       <button onClick={() => enableWithScenario('error-state')}>\n *         Error State Demo\n *       </button>\n *       <button onClick={disableDemo}>\n *         Exit Demo\n *       </button>\n *       {currentScenario && <span>Scenario: {currentScenario}</span>}\n *     </div>\n *   )\n * }\n */\nexport function useNextDemoMode(options: { urlParam?: string } = {}) {\n  const { urlParam = 'demo' } = options\n  const demoMode = useDemoMode()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n\n  /**\n   * Enable demo mode with a specific scenario via URL\n   */\n  const enableWithScenario = useCallback(\n    (scenario: string) => {\n      const params = new URLSearchParams(searchParams.toString())\n      params.set(urlParam, scenario)\n      router.push(`?${params.toString()}`)\n    },\n    [router, searchParams, urlParam]\n  )\n\n  /**\n   * Enable demo mode without a scenario\n   */\n  const enableDemo = useCallback(() => {\n    const params = new URLSearchParams(searchParams.toString())\n    params.set(urlParam, 'true')\n    router.push(`?${params.toString()}`)\n  }, [router, searchParams, urlParam])\n\n  /**\n   * Disable demo mode via URL\n   */\n  const disableDemo = useCallback(() => {\n    const params = new URLSearchParams(searchParams.toString())\n    params.set(urlParam, 'false')\n    router.push(`?${params.toString()}`)\n  }, [router, searchParams, urlParam])\n\n  /**\n   * Get current scenario from URL\n   */\n  const currentScenario = searchParams.get(urlParam)\n  const isScenario =\n    currentScenario !== null &&\n    currentScenario !== 'true' &&\n    currentScenario !== 'false' &&\n    currentScenario !== '1' &&\n    currentScenario !== '0'\n\n  return {\n    ...demoMode,\n    enableWithScenario,\n    enableDemo,\n    disableDemo,\n    currentScenario: isScenario ? currentScenario : null,\n  }\n}\n\n/**\n * Hook to check if we're in demo mode on the client\n * Shorthand for useNextDemoMode().isDemoMode\n */\nexport function useIsNextDemoMode(): boolean {\n  return useNextDemoMode().isDemoMode\n}\n\n// Re-export base hooks from @demokit-ai/react\nexport { useDemoMode, useIsDemoMode, useIsHydrated, useDemoSession } from '@demokit-ai/react'\n","'use client'\n\nimport { DemoModeBanner, type DemoModeBannerProps } from '@demokit-ai/react'\nimport { useNextDemoMode } from './hooks'\n\nexport interface NextDemoModeBannerProps extends Omit<DemoModeBannerProps, 'onExit'> {\n  /**\n   * Whether to include the current scenario in the banner\n   * @default true\n   */\n  showScenario?: boolean\n\n  /**\n   * Custom exit handler\n   * If not provided, will use URL-based navigation\n   */\n  onExit?: () => void\n}\n\n/**\n * Demo mode banner for Next.js\n *\n * Extends DemoModeBanner with scenario display and URL-based exit\n *\n * @example\n * // In your layout\n * <NextDemoModeBanner />\n *\n * // With custom labels\n * <NextDemoModeBanner\n *   demoLabel=\"Preview Mode\"\n *   exitLabel=\"Exit Preview\"\n *   showScenario={true}\n * />\n */\nexport function NextDemoModeBanner({\n  showScenario = true,\n  onExit,\n  description,\n  ...props\n}: NextDemoModeBannerProps) {\n  const { currentScenario, disableDemo, isDemoMode, isHydrated } = useNextDemoMode()\n\n  // Don't render if not hydrated or not in demo mode\n  if (!isHydrated || !isDemoMode) {\n    return null\n  }\n\n  // Build description with scenario\n  let bannerDescription = description ?? 'Changes are simulated and not saved'\n  if (showScenario && currentScenario) {\n    bannerDescription = `Scenario: ${currentScenario} • ${bannerDescription}`\n  }\n\n  return (\n    <DemoModeBanner\n      {...props}\n      description={bannerDescription}\n      onExit={onExit ?? disableDemo}\n    />\n  )\n}\n\n// Re-export base banner\nexport { DemoModeBanner } from '@demokit-ai/react'\n"]}

package/dist/index.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+// src/config.ts
+function defineFixtures(fixtures) {
+  return fixtures;
+}
+function defineScenarios(scenarios) {
+  return scenarios;
+}
+function createScenario(scenario) {
+  return scenario;
+}
+function mergeFixtures(...fixtureMaps) {
+  return Object.assign({}, ...fixtureMaps);
+}
+function createDemoConfig(config) {
+  return {
+    storageKey: "demokit-mode",
+    cookieName: "demokit-mode",
+    urlParam: "demo",
+    ...config
+  };
+}
+
+exports.createDemoConfig = createDemoConfig;
+exports.createScenario = createScenario;
+exports.defineFixtures = defineFixtures;
+exports.defineScenarios = defineScenarios;
+exports.mergeFixtures = mergeFixtures;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/config.ts"],"names":[],"mappings":";;;AAqBO,SAAS,eAAqC,QAAA,EAAgB;AACnE,EAAA,OAAO,QAAA;AACT;AAuBO,SAAS,gBAAsD,SAAA,EAAiB;AACrF,EAAA,OAAO,SAAA;AACT;AAcO,SAAS,eAAe,QAAA,EAAsC;AACnE,EAAA,OAAO,QAAA;AACT;AAYO,SAAS,iBAAiB,WAAA,EAAuC;AACtE,EAAA,OAAO,MAAA,CAAO,MAAA,CAAO,EAAC,EAAG,GAAG,WAAW,CAAA;AACzC;AAkBO,SAAS,iBAAiB,MAAA,EAA8C;AAC7E,EAAA,OAAO;AAAA,IACL,UAAA,EAAY,cAAA;AAAA,IACZ,UAAA,EAAY,cAAA;AAAA,IACZ,QAAA,EAAU,MAAA;AAAA,IACV,GAAG;AAAA,GACL;AACF","file":"index.cjs","sourcesContent":["import type { FixtureMap, FixtureHandler } from '@demokit-ai/core'\nimport type { DemoKitNextConfig, DemoScenario } from './types'\n\n/**\n * Helper to define fixtures with type safety\n *\n * @example\n * const fixtures = defineFixtures({\n *   'GET /api/users': () => [\n *     { id: '1', name: 'Demo User' },\n *   ],\n *   'GET /api/users/:id': ({ params }) => ({\n *     id: params.id,\n *     name: `User ${params.id}`,\n *   }),\n *   'POST /api/users': async ({ body }) => ({\n *     id: crypto.randomUUID(),\n *     ...body,\n *   }),\n * })\n */\nexport function defineFixtures<T extends FixtureMap>(fixtures: T): T {\n  return fixtures\n}\n\n/**\n * Helper to define scenarios with type safety\n *\n * @example\n * const scenarios = defineScenarios({\n *   'empty-state': {\n *     'GET /api/users': () => [],\n *     'GET /api/projects': () => [],\n *   },\n *   'error-state': {\n *     'GET /api/users': () => {\n *       throw new Error('API Error')\n *     },\n *   },\n *   'new-user': {\n *     'GET /api/users': () => [\n *       { id: '1', name: 'Welcome, New User!', isNew: true },\n *     ],\n *   },\n * })\n */\nexport function defineScenarios<T extends Record<string, FixtureMap>>(scenarios: T): T {\n  return scenarios\n}\n\n/**\n * Helper to create a scenario object\n *\n * @example\n * const emptyStateScenario = createScenario({\n *   name: 'empty-state',\n *   description: 'Shows the app with no data',\n *   fixtures: {\n *     'GET /api/users': () => [],\n *   },\n * })\n */\nexport function createScenario(scenario: DemoScenario): DemoScenario {\n  return scenario\n}\n\n/**\n * Merge multiple fixture maps\n *\n * @example\n * const allFixtures = mergeFixtures(\n *   baseFixtures,\n *   usersFixtures,\n *   projectsFixtures\n * )\n */\nexport function mergeFixtures(...fixtureMaps: FixtureMap[]): FixtureMap {\n  return Object.assign({}, ...fixtureMaps)\n}\n\n/**\n * Create a complete DemoKit Next.js configuration\n *\n * @example\n * // lib/demo.ts\n * import { createDemoConfig, defineFixtures, defineScenarios } from '@demokit-ai/next'\n *\n * export const demoConfig = createDemoConfig({\n *   fixtures: defineFixtures({\n *     'GET /api/users': () => [{ id: '1', name: 'Demo User' }],\n *   }),\n *   scenarios: defineScenarios({\n *     'empty': { 'GET /api/users': () => [] },\n *   }),\n * })\n */\nexport function createDemoConfig(config: DemoKitNextConfig): DemoKitNextConfig {\n  return {\n    storageKey: 'demokit-mode',\n    cookieName: 'demokit-mode',\n    urlParam: 'demo',\n    ...config,\n  }\n}\n"]}