@epiccontext/mcp 0.1.41 → 0.1.43

package/dist/templates/storybook.js

@@ -0,0 +1,991 @@
+/**
+ * Storybook Template
+ *
+ * This file contains the complete Storybook template with EpicContext authentication middleware.
+ * The template is bundled as string constants to ensure it's included in the npm package.
+ */
+/**
+ * Get all Storybook template files
+ * Files are organized to be written to CONTEXT/design-system/storybook/
+ */
+export function getStorybookTemplateFiles() {
+    return [
+        // Package configuration
+        {
+            path: "package.json",
+            content: `{
+  "name": "@epiccontext/storybook-template",
+  "version": "1.0.0",
+  "private": true,
+  "description": "EpicContext Storybook template with authentication middleware",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build && node scripts/postbuild.mjs",
+    "preview": "npx serve storybook-static"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.460.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/addon-interactions": "^8.4.0",
+    "@storybook/addon-links": "^8.4.0",
+    "@storybook/blocks": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@storybook/test": "^8.4.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "storybook": "^8.4.0",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}
+`,
+        },
+        // TypeScript configuration
+        {
+            path: "tsconfig.json",
+            content: `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
+`,
+        },
+        // Tailwind configuration
+        {
+            path: "tailwind.config.ts",
+            content: `import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./stories/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default config;
+`,
+        },
+        // PostCSS configuration
+        {
+            path: "postcss.config.js",
+            content: `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`,
+        },
+        // Vercel configuration
+        {
+            path: "vercel.json",
+            content: `{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "npm run build",
+  "installCommand": "npm install",
+  "framework": null
+}
+`,
+        },
+        // Git ignore
+        {
+            path: ".gitignore",
+            content: `# Dependencies
+node_modules/
+
+# Build output
+storybook-static/
+dist/
+.vercel/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+
+# Cache
+.cache/
+`,
+        },
+        // README
+        {
+            path: "README.md",
+            content: `# Design System Storybook
+
+This is your project's design system, powered by Storybook with EpicContext authentication.
+
+## Quick Start
+
+\`\`\`bash
+# Install dependencies
+npm install
+
+# Start Storybook (development)
+npm run dev
+
+# Build for production
+npm run build
+\`\`\`
+
+## Adding Components
+
+1. Create a \`components/ui/\` folder
+2. Add your component (e.g., \`Button.tsx\`)
+3. Add a story file (e.g., \`Button.stories.tsx\`)
+4. Components will appear in Storybook automatically
+
+## Deploying to Vercel
+
+1. Push this folder to a GitHub repository
+2. Connect it to Vercel
+3. Add environment variables:
+   - \`EPICCONTEXT_STORYBOOK_SECRET\` - Get from EpicContext settings
+   - \`EPICCONTEXT_APP_URL\` - Your EpicContext instance URL
+4. Deploy!
+
+## Authentication
+
+When deployed with the environment variables set, your Storybook is protected.
+Only team members logged into EpicContext can access it.
+
+During local development, authentication is bypassed.
+
+## Customization
+
+- **Design tokens**: Edit \`styles/globals.css\`
+- **Tailwind config**: Edit \`tailwind.config.ts\`
+- **Storybook config**: Edit \`.storybook/main.ts\` and \`.storybook/preview.ts\`
+
+## Structure
+
+\`\`\`
+storybook/
+├── .storybook/       # Storybook configuration
+├── components/       # Your components (create this)
+├── lib/              # Utilities
+├── stories/          # Documentation pages
+├── styles/           # CSS and design tokens
+├── scripts/          # Build scripts
+└── middleware.js     # EpicContext auth
+\`\`\`
+`,
+        },
+        // Storybook main config
+        {
+            path: ".storybook/main.ts",
+            content: `import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+  viteFinal: async (config) => {
+    // Add path aliases to match component imports
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      // Local paths - create components folder and add components here
+      "@/components": new URL("../components", import.meta.url).pathname,
+      "@/lib": new URL("../lib", import.meta.url).pathname,
+      // Next.js mocks for Storybook (allows using Next.js components)
+      "next/navigation": new URL("../lib/next-mocks.ts", import.meta.url).pathname,
+      "next/link": new URL("../lib/next-mocks.ts", import.meta.url).pathname,
+      "next/dynamic": new URL("../lib/next-mocks.ts", import.meta.url).pathname,
+    };
+    return config;
+  },
+};
+
+export default config;
+`,
+        },
+        // Storybook preview config
+        {
+            path: ".storybook/preview.ts",
+            content: `import type { Preview } from "@storybook/react";
+import "../styles/globals.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      toc: true,
+    },
+  },
+  decorators: [],
+};
+
+export default preview;
+`,
+        },
+        // Global styles
+        {
+            path: "styles/globals.css",
+            content: `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Utility classes for Storybook stories */
+.story-container {
+  @apply p-6;
+}
+
+.story-grid {
+  @apply grid gap-4;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.story-row {
+  @apply flex gap-4 flex-wrap items-center;
+}
+
+.story-stack {
+  @apply flex flex-col gap-4;
+}
+`,
+        },
+        // Lib utilities
+        {
+            path: "lib/utils.ts",
+            content: `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`,
+        },
+        // Next.js mocks for Storybook
+        {
+            path: "lib/next-mocks.ts",
+            content: `// Mock implementations for Next.js features in Storybook
+// These mocks allow components that use Next.js features to render in Storybook
+
+import * as React from "react";
+
+// next/navigation mocks
+export const useRouter = () => ({
+  push: () => {},
+  replace: () => {},
+  prefetch: () => {},
+  back: () => {},
+  forward: () => {},
+  refresh: () => {},
+});
+
+export const usePathname = () => "/";
+export const useSearchParams = () => new URLSearchParams();
+export const useParams = () => ({});
+
+// next/link mock - just renders an anchor tag
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  children?: React.ReactNode;
+}
+
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ href, children, ...props }, ref) => {
+    return React.createElement("a", { ...props, href, ref }, children);
+  }
+);
+Link.displayName = "Link";
+
+// next/dynamic mock - returns the component directly
+function dynamicImpl<T>(
+  loader: () => Promise<{ default: React.ComponentType<T> }>,
+  options?: { loading?: () => React.ReactNode; ssr?: boolean }
+) {
+  const LazyComponent = React.lazy(loader);
+
+  return function DynamicComponent(props: T) {
+    return React.createElement(
+      React.Suspense,
+      { fallback: options?.loading?.() ?? null },
+      React.createElement(LazyComponent, props as React.Attributes & T)
+    );
+  };
+}
+
+export { dynamicImpl as dynamic };
+export default dynamicImpl;
+`,
+        },
+        // Introduction story
+        {
+            path: "stories/Introduction.mdx",
+            content: `{/* Introduction.mdx */}
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Introduction" />
+
+# Welcome to Your Design System
+
+This is your project's Storybook - a living design system that documents your UI components.
+
+## Getting Started
+
+1. **Install dependencies**: Run \`npm install\` in this folder
+2. **Add your first component** in the \`components/\` folder
+3. **Create a story** in the same folder to document it
+4. **Run Storybook** with \`npm run dev\`
+
+## How to Create Components
+
+Create a component file like \`components/ui/Button.tsx\`:
+
+\`\`\`tsx
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "destructive" | "outline";
+}
+
+export function Button({ className, variant = "default", ...props }: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        "px-4 py-2 rounded-md font-medium transition-colors",
+        variant === "default" && "bg-primary text-primary-foreground hover:bg-primary/90",
+        variant === "destructive" && "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        variant === "outline" && "border border-input bg-background hover:bg-accent",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+\`\`\`
+
+Then create a story file \`components/ui/Button.stories.tsx\`:
+
+\`\`\`tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive", "outline"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: "Click me",
+    variant: "default",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: "Delete",
+    variant: "destructive",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: "Cancel",
+    variant: "outline",
+  },
+};
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+storybook/
+├── .storybook/           # Storybook configuration
+│   ├── main.ts           # Addons and build config
+│   └── preview.ts        # Global decorators and parameters
+├── components/           # Your components (create this folder)
+│   └── ui/               # UI components + stories
+├── lib/
+│   ├── utils.ts          # Utility functions (cn)
+│   └── next-mocks.ts     # Next.js mocks for Storybook
+├── stories/
+│   └── Introduction.mdx  # This file
+├── styles/
+│   └── globals.css       # Tailwind + design tokens
+├── middleware.js         # EpicContext authentication
+├── tailwind.config.ts    # Tailwind configuration
+└── package.json
+\`\`\`
+
+## Design Tokens
+
+All tokens are defined in \`styles/globals.css\` using CSS custom properties:
+
+- **Colors**: Primary, secondary, muted, accent, destructive
+- **Backgrounds**: background, card, popover
+- **Border**: border, input, ring
+- **Radius**: lg, md, sm
+
+Light and dark themes are fully supported. Customize these tokens to match your brand.
+
+## Authentication
+
+This Storybook is protected by EpicContext authentication. Users must be logged into your EpicContext organization to view it when deployed.
+
+### Local Development
+
+During local development (\`npm run dev\`), authentication is bypassed so you can work freely.
+
+### Deploying to Vercel
+
+1. Push this folder to a GitHub repository
+2. Connect it to Vercel
+3. Set environment variables:
+   - \`EPICCONTEXT_STORYBOOK_SECRET\` - Get from EpicContext settings
+   - \`EPICCONTEXT_APP_URL\` - Your EpicContext instance URL
+4. Deploy!
+
+The middleware will automatically protect your Storybook and redirect unauthenticated users to log in.
+
+## Next Steps
+
+- [ ] Create a \`components/ui\` folder
+- [ ] Add your first component (Button is a great start)
+- [ ] Document it with a story file
+- [ ] Deploy to Vercel
+- [ ] Link the URL in EpicContext Design System section
+
+---
+
+Built with [Storybook](https://storybook.js.org) | Secured by [EpicContext](https://epiccontext.com)
+`,
+        },
+        // Post-build script for Vercel
+        {
+            path: "scripts/postbuild.mjs",
+            content: `/**
+ * Post-build script for Vercel Build Output API v3
+ *
+ * This script restructures the Storybook build output into Vercel's
+ * Build Output API format, enabling Edge Middleware for authentication.
+ */
+
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.resolve(__dirname, "..");
+const storybookOutput = path.join(rootDir, "storybook-static");
+const vercelOutput = path.join(rootDir, ".vercel", "output");
+
+console.log("Setting up Vercel Build Output API v3...");
+
+// Clean and create output directory
+if (fs.existsSync(vercelOutput)) {
+  fs.rmSync(vercelOutput, { recursive: true });
+}
+fs.mkdirSync(path.join(vercelOutput, "static"), { recursive: true });
+fs.mkdirSync(path.join(vercelOutput, "functions", "middleware.func"), {
+  recursive: true,
+});
+
+// Copy static files recursively
+console.log("Copying static files...");
+const copyRecursive = (src, dest) => {
+  if (!fs.existsSync(src)) return;
+
+  if (fs.statSync(src).isDirectory()) {
+    fs.mkdirSync(dest, { recursive: true });
+    for (const file of fs.readdirSync(src)) {
+      copyRecursive(path.join(src, file), path.join(dest, file));
+    }
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+};
+
+copyRecursive(storybookOutput, path.join(vercelOutput, "static"));
+
+// Copy middleware function
+console.log("Setting up Edge Middleware...");
+fs.copyFileSync(
+  path.join(rootDir, "middleware.js"),
+  path.join(vercelOutput, "functions", "middleware.func", "index.js")
+);
+
+// Write the function config
+fs.writeFileSync(
+  path.join(vercelOutput, "functions", "middleware.func", ".vc-config.json"),
+  JSON.stringify(
+    {
+      runtime: "edge",
+      entrypoint: "index.js",
+    },
+    null,
+    2
+  )
+);
+
+// Create the main config.json
+console.log("Writing config.json...");
+fs.writeFileSync(
+  path.join(vercelOutput, "config.json"),
+  JSON.stringify(
+    {
+      version: 3,
+      routes: [
+        // Static assets - bypass middleware, serve directly
+        {
+          src: "^/assets/.*",
+          headers: { "Cache-Control": "public, max-age=31536000, immutable" },
+          continue: true,
+        },
+        {
+          src: "^/sb-.*",
+          continue: true,
+        },
+        {
+          src: ".*\\\\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot|json|map)$",
+          continue: true,
+        },
+        // HTML requests go through middleware
+        {
+          src: "^/(?!assets|sb-).*$",
+          middlewarePath: "middleware",
+          continue: true,
+        },
+        // Serve static files
+        { handle: "filesystem" },
+        // Fallback to index.html for SPA routing
+        {
+          src: "/(.*)",
+          dest: "/index.html",
+        },
+      ],
+    },
+    null,
+    2
+  )
+);
+
+console.log("Vercel Build Output API setup complete!");
+console.log("  Static files: .vercel/output/static");
+console.log("  Middleware: .vercel/output/functions/middleware.func");
+console.log("  Config: .vercel/output/config.json");
+`,
+        },
+        // Authentication middleware
+        {
+            path: "middleware.js",
+            content: `/**
+ * EpicContext Storybook Authentication Middleware
+ *
+ * Vercel Edge Middleware for non-Next.js projects.
+ * Protects Storybook by validating JWT tokens from EpicContext.
+ */
+
+export const config = {
+  // Match all paths - we'll filter inside the middleware
+  matcher: ["/(.*)", "/"],
+};
+
+const COOKIE_NAME = "epiccontext_storybook_token";
+const COOKIE_MAX_AGE = 60 * 60 * 24; // 24 hours
+
+function base64UrlDecode(data) {
+  const padded = data + "=".repeat((4 - (data.length % 4)) % 4);
+  return atob(padded.replace(/-/g, "+").replace(/_/g, "/"));
+}
+
+async function createSignature(data, secret) {
+  const encoder = new TextEncoder();
+  const keyData = encoder.encode(secret);
+  const messageData = encoder.encode(data);
+
+  const cryptoKey = await crypto.subtle.importKey(
+    "raw",
+    keyData,
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"]
+  );
+
+  const signature = await crypto.subtle.sign("HMAC", cryptoKey, messageData);
+  const base64 = btoa(String.fromCharCode(...new Uint8Array(signature)));
+  return base64.replace(/\\+/g, "-").replace(/\\//g, "_").replace(/=/g, "");
+}
+
+async function deriveSecret(secret) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(\`epiccontext-storybook:\${secret}\`);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+  const hashArray = new Uint8Array(hashBuffer);
+  return Array.from(hashArray)
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+async function validateToken(token, secret, expectedAudience) {
+  try {
+    const parts = token.split(".");
+    if (parts.length !== 3) {
+      return { valid: false, error: "Invalid token format" };
+    }
+
+    const [encodedHeader, encodedPayload, signature] = parts;
+    const derivedSecret = await deriveSecret(secret);
+
+    const expectedSignature = await createSignature(
+      \`\${encodedHeader}.\${encodedPayload}\`,
+      derivedSecret
+    );
+
+    if (signature !== expectedSignature) {
+      return { valid: false, error: "Invalid signature" };
+    }
+
+    const payload = JSON.parse(base64UrlDecode(encodedPayload));
+
+    if (payload.iss !== "epiccontext") {
+      return { valid: false, error: "Invalid issuer" };
+    }
+
+    const now = Math.floor(Date.now() / 1000);
+    if (payload.exp < now) {
+      return { valid: false, error: "Token expired" };
+    }
+
+    if (expectedAudience && payload.aud !== expectedAudience) {
+      return { valid: false, error: "Invalid audience" };
+    }
+
+    return { valid: true, payload };
+  } catch (e) {
+    return { valid: false, error: "Token parsing failed" };
+  }
+}
+
+function getEpicContextUrl() {
+  try {
+    return process.env.EPICCONTEXT_APP_URL || "https://epic-context.vercel.app";
+  } catch {
+    return "https://epic-context.vercel.app";
+  }
+}
+
+function getSecret() {
+  try {
+    return process.env.EPICCONTEXT_STORYBOOK_SECRET || null;
+  } catch {
+    return null;
+  }
+}
+
+function parseCookies(cookieHeader) {
+  if (!cookieHeader) return {};
+  return Object.fromEntries(
+    cookieHeader.split(";").map((cookie) => {
+      const [key, ...val] = cookie.trim().split("=");
+      return [key, val.join("=")];
+    })
+  );
+}
+
+// Static file extensions that should bypass authentication
+const STATIC_EXTENSIONS = [
+  '.js', '.css', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg',
+  '.ico', '.woff', '.woff2', '.ttf', '.eot', '.map', '.txt'
+];
+
+// Paths that should bypass authentication
+const BYPASS_PATHS = [
+  '/assets/', '/sb-', '/static/', '/_next/', '/favicon'
+];
+
+function shouldBypassAuth(pathname) {
+  const hasStaticExtension = STATIC_EXTENSIONS.some(ext => pathname.endsWith(ext));
+  if (hasStaticExtension) return true;
+
+  const isBypassPath = BYPASS_PATHS.some(path => pathname.startsWith(path));
+  if (isBypassPath) return true;
+
+  return false;
+}
+
+export default async function middleware(request) {
+  const url = new URL(request.url);
+  const pathname = url.pathname;
+
+  // Skip authentication for static files and internal Storybook paths
+  if (shouldBypassAuth(pathname)) {
+    return undefined;
+  }
+
+  const secret = getSecret();
+
+  // If no secret configured, allow access (development mode)
+  if (!secret) {
+    console.warn(
+      "EPICCONTEXT_STORYBOOK_SECRET not set - Storybook is unprotected"
+    );
+    return undefined;
+  }
+
+  const hostname = url.hostname;
+
+  // Check for token in URL params
+  const tokenFromUrl = url.searchParams.get("token");
+
+  // Check for token in cookie
+  const cookieHeader = request.headers.get("cookie");
+  const cookies = parseCookies(cookieHeader);
+  const tokenFromCookie = cookies[COOKIE_NAME];
+
+  const token = tokenFromUrl || tokenFromCookie;
+
+  if (!token) {
+    // No token - redirect to EpicContext login
+    const epicContextUrl = getEpicContextUrl();
+    const redirectUrl = new URL("/auth/storybook", epicContextUrl);
+    redirectUrl.searchParams.set("redirect", request.url);
+
+    return Response.redirect(redirectUrl.toString(), 302);
+  }
+
+  // Validate the token
+  const result = await validateToken(token, secret, hostname);
+
+  if (!result.valid) {
+    // Invalid token - redirect to EpicContext with error
+    const epicContextUrl = getEpicContextUrl();
+    const errorUrl = new URL("/auth/storybook/error", epicContextUrl);
+    errorUrl.searchParams.set("error", result.error || "Invalid token");
+    errorUrl.searchParams.set("redirect", request.url);
+
+    return Response.redirect(errorUrl.toString(), 302);
+  }
+
+  // Token is valid
+  // If token came from URL, set cookie and redirect to clean URL
+  if (tokenFromUrl && !tokenFromCookie) {
+    const cleanUrl = new URL(request.url);
+    cleanUrl.searchParams.delete("token");
+
+    const isSecure = url.protocol === "https:";
+    const cookieValue = \`\${COOKIE_NAME}=\${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=\${COOKIE_MAX_AGE}\${isSecure ? "; Secure" : ""}\`;
+
+    return new Response(null, {
+      status: 302,
+      headers: {
+        "Location": cleanUrl.toString(),
+        "Set-Cookie": cookieValue,
+      },
+    });
+  }
+
+  // Continue to static files
+  return undefined;
+}
+`,
+        },
+        // Empty public folder placeholder
+        {
+            path: "public/.gitkeep",
+            content: `# This folder contains static assets for Storybook
+# Add images, fonts, or other assets here
+`,
+        },
+    ];
+}
+//# sourceMappingURL=storybook.js.map