@nebutra/ui 0.2.2 → 0.2.3

package/dist/layouts/index.d.ts

@@ -121,10 +121,88 @@ interface SectionThemeConfig {
  * Some use specific hex colors for artistic effect (exempt from Primer
  * strict compliance per WARP.md).
  */
-declare const sectionThemes: Record<string, SectionThemeConfig>;
+declare const sectionThemeDefs: {
+    hero: {
+        backgroundColor: string;
+        pattern: "floating";
+        patternColor: string;
+        patternOpacity: number;
+        gradient: string;
+    };
+    architecture: {
+        backgroundColor: string;
+        pattern: "dots";
+        patternColor: string;
+        patternOpacity: number;
+    };
+    aiNative: {
+        backgroundColor: string;
+        pattern: "dots";
+        patternColor: string;
+        patternOpacity: number;
+        accentColor: string;
+        gradient: string;
+    };
+    features: {
+        backgroundColor: string;
+        pattern: "crosses";
+        patternColor: string;
+        patternOpacity: number;
+    };
+    multiTenant: {
+        backgroundColor: string;
+        pattern: "grid";
+        patternColor: string;
+        patternOpacity: number;
+        accentColor: string;
+    };
+    testimonials: {
+        backgroundColor: string;
+        pattern: "floating";
+        patternColor: string;
+        patternOpacity: number;
+        gradient: string;
+    };
+    vision: {
+        backgroundColor: string;
+        pattern: "none";
+        gradient: string;
+    };
+    pricing: {
+        backgroundColor: string;
+        pattern: "dots";
+        patternColor: string;
+        patternOpacity: number;
+    };
+    cta: {
+        backgroundColor: string;
+        pattern: "dots";
+        patternColor: string;
+        patternOpacity: number;
+        gradient: string;
+    };
+    stats: {
+        backgroundColor: string;
+        pattern: "crosses";
+        patternColor: string;
+        patternOpacity: number;
+    };
+    terminal: {
+        backgroundColor: string;
+        pattern: "none";
+    };
+};
+/** Names of the predefined section themes. */
+type SectionThemeName = keyof typeof sectionThemeDefs;
+/**
+ * Predefined themes, keyed by a closed union so that `sectionThemes[name]`
+ * is known to exist. Declaring this as `Record<string, …>` would erase the
+ * literal keys and make every lookup `SectionThemeConfig | undefined`.
+ */
+declare const sectionThemes: Record<SectionThemeName, SectionThemeConfig>;
 interface ThemedSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
     /** Theme preset name or custom config */
-    theme: keyof typeof sectionThemes | SectionThemeConfig;
+    theme: SectionThemeName | SectionThemeConfig;
     /** Section content */
     children: React.ReactNode;
     /** Custom CSS variables for the section */

package/dist/layouts/index.js

@@ -10,7 +10,16 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 function BentoGrid({ items, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 md:grid-cols-3 gap-3 p-4 max-w-7xl mx-auto", className), children: items.map((item, index) => /* @__PURE__ */ jsx(BentoCard, { item }, index)) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-1 md:grid-cols-3 gap-3 p-4 max-w-[var(--container-wide)] mx-auto",
+        className
+      ),
+      children: items.map((item, index) => /* @__PURE__ */ jsx(BentoCard, { item }, index))
+    }
+  );
 }
 BentoGrid.displayName = "BentoGrid";
 function BentoCard({ item }) {
@@ -20,13 +29,10 @@ function BentoCard({ item }) {
       className: cn(
         "group relative p-4 rounded-[var(--radius-xl)] overflow-hidden transition-[box-shadow,transform] duration-300 motion-reduce:transition-none motion-reduce:transform-none",
         "border border-[var(--neutral-6)] bg-white dark:bg-black",
-        "hover:shadow-[0_2px_12px_rgba(0,0,0,0.03)] dark:hover:shadow-[0_2px_12px_rgba(255,255,255,0.03)]",
+        "hover:shadow-ambient-sm",
         "hover:-translate-y-0.5 will-change-transform",
         item.colSpan === 2 ? "md:col-span-2" : "col-span-1",
-        item.hasPersistentHover && [
-          "shadow-[0_2px_12px_rgba(0,0,0,0.03)] -translate-y-0.5",
-          "dark:shadow-[0_2px_12px_rgba(255,255,255,0.03)]"
-        ]
+        item.hasPersistentHover && ["shadow-ambient-sm -translate-y-0.5"]
       ),
       children: [
         /* @__PURE__ */ jsx(
@@ -65,7 +71,7 @@ function BentoCard({ item }) {
             /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-2 text-xs text-[var(--neutral-9)]", children: item.tags?.map((tag, i) => /* @__PURE__ */ jsxs(
               "span",
               {
-                className: "px-2 py-1 rounded-[var(--radius-md)] bg-black/5 backdrop-blur-sm transition-colors duration-200 hover:bg-black/10",
+                className: "px-2 py-1 rounded-[var(--radius-md)] bg-black/5 backdrop-blur-sm transition-colors duration-micro hover:bg-black/10",
                 children: [
                   "#",
                   tag
@@ -91,9 +97,13 @@ function BentoCard({ item }) {
 }
 var maxWidthMap = {
   sm: "max-w-3xl",
-  md: "max-w-5xl",
-  lg: "max-w-6xl",
-  xl: "max-w-7xl",
+  // 768px
+  md: "max-w-[var(--container-text)]",
+  // 896px
+  lg: "max-w-[var(--container-content)]",
+  // 1152px
+  xl: "max-w-[var(--container-wide)]",
+  // 1400px
   full: "max-w-none"
 };
 var verticalSpacingMap = {
@@ -446,7 +456,7 @@ var FloatingSpots = React.forwardRef(
   }
 );
 FloatingSpots.displayName = "FloatingSpots";
-var sectionThemes = {
+var sectionThemeDefs = {
   // Hero: "Cosmic Launch" - Deep blue gradient with floating particles
   hero: {
     backgroundColor: "bg-background",
@@ -531,6 +541,7 @@ var sectionThemes = {
     pattern: "none"
   }
 };
+var sectionThemes = sectionThemeDefs;
 var ThemedSection = React.forwardRef(
   ({ theme, children, className, cssVars, showPattern = true, ...props }, ref) => {
     const config = typeof theme === "string" ? sectionThemes[theme] : theme;

package/dist/layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/cn.ts","../../src/layouts/bento-grid.tsx","../../src/layouts/SectionContainer.tsx","../../src/decorations/GridPattern.tsx","../../src/decorations/patterns/CrossPattern.tsx","../../src/decorations/patterns/DotMatrix.tsx","../../src/decorations/patterns/FloatingSpots.tsx","../../src/layouts/SectionTheme.tsx"],"names":["jsx","React2","jsxs","React3","React4","React5","React6"],"mappings":"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","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport interface BentoItem {\n  /** Card title */\n  title: string;\n  /** Card description */\n  description: string;\n  /** Icon element to display */\n  icon: React.ReactNode;\n  /** Status badge text */\n  status?: string;\n  /** Array of tag strings */\n  tags?: string[];\n  /** Meta information (version, count, etc.) */\n  meta?: string;\n  /** Call-to-action text */\n  cta?: string;\n  /** Column span (1 or 2) */\n  colSpan?: 1 | 2;\n  /** Whether to show hover state persistently */\n  hasPersistentHover?: boolean;\n}\n\nexport interface BentoGridProps {\n  /** Array of bento items to display */\n  items: BentoItem[];\n  /** Additional className */\n  className?: string;\n}\n\n/**\n * BentoGrid - Feature showcase grid layout\n *\n * A responsive grid layout for displaying feature cards with icons,\n * descriptions, tags, and status badges. Supports variable column spans.\n *\n * @example\n * ```tsx\n * <BentoGrid\n *   items={[\n *     {\n *       title: \"Analytics\",\n *       description: \"Real-time metrics\",\n *       icon: <TrendingUp className=\"w-4 h-4\" />,\n *       status: \"Live\",\n *       tags: [\"Stats\", \"AI\"],\n *       colSpan: 2,\n *     },\n *     // ...\n *   ]}\n * />\n * ```\n */\nexport function BentoGrid({ items, className }: BentoGridProps) {\n  return (\n    <div className={cn(\"grid grid-cols-1 md:grid-cols-3 gap-3 p-4 max-w-7xl mx-auto\", className)}>\n      {items.map((item, index) => (\n        <BentoCard key={index} item={item} />\n      ))}\n    </div>\n  );\n}\n\nBentoGrid.displayName = \"BentoGrid\";\n\ninterface BentoCardProps {\n  item: BentoItem;\n}\n\nfunction BentoCard({ item }: BentoCardProps) {\n  return (\n    <div\n      className={cn(\n        \"group relative p-4 rounded-[var(--radius-xl)] overflow-hidden transition-[box-shadow,transform] duration-300 motion-reduce:transition-none motion-reduce:transform-none\",\n        \"border border-[var(--neutral-6)] bg-white dark:bg-black\",\n        \"hover:shadow-[0_2px_12px_rgba(0,0,0,0.03)] dark:hover:shadow-[0_2px_12px_rgba(255,255,255,0.03)]\",\n        \"hover:-translate-y-0.5 will-change-transform\",\n        item.colSpan === 2 ? \"md:col-span-2\" : \"col-span-1\",\n        item.hasPersistentHover && [\n          \"shadow-[0_2px_12px_rgba(0,0,0,0.03)] -translate-y-0.5\",\n          \"dark:shadow-[0_2px_12px_rgba(255,255,255,0.03)]\",\n        ],\n      )}\n    >\n      {/* Background pattern */}\n      <div\n        className={cn(\n          \"absolute inset-0 transition-opacity duration-300\",\n          item.hasPersistentHover ? \"opacity-100\" : \"opacity-0 group-hover:opacity-100\",\n        )}\n      >\n        <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.02)_1px,transparent_1px)] dark:bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[length:4px_4px]\" />\n      </div>\n\n      <div className=\"relative flex flex-col space-y-3\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between\">\n          <div className=\"w-8 h-8 rounded-[var(--radius-lg)] flex items-center justify-center bg-black/5 group-hover:bg-gradient-to-br transition-[background-color,background-image] duration-300\">\n            {item.icon}\n          </div>\n          <span\n            className={cn(\n              \"text-xs font-medium px-2 py-1 rounded-[var(--radius-lg)] backdrop-blur-sm\",\n              \"bg-black/5 text-[var(--neutral-10)]\",\n              \"transition-colors duration-300 group-hover:bg-black/10\",\n            )}\n          >\n            {item.status || \"Active\"}\n          </span>\n        </div>\n\n        {/* Content */}\n        <div className=\"space-y-2\">\n          <h3 className=\"font-medium text-[var(--neutral-12)] tracking-tight text-[15px]\">\n            {item.title}\n            {item.meta && (\n              <span className=\"ml-2 text-xs text-[var(--neutral-9)] font-normal\">{item.meta}</span>\n            )}\n          </h3>\n          <p className=\"text-sm text-[var(--neutral-10)] leading-snug font-[425]\">\n            {item.description}\n          </p>\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex items-center justify-between mt-2\">\n          <div className=\"flex items-center space-x-2 text-xs text-[var(--neutral-9)]\">\n            {item.tags?.map((tag, i) => (\n              <span\n                key={i}\n                className=\"px-2 py-1 rounded-[var(--radius-md)] bg-black/5 backdrop-blur-sm transition-colors duration-200 hover:bg-black/10\"\n              >\n                #{tag}\n              </span>\n            ))}\n          </div>\n          <span className=\"text-xs text-[var(--neutral-9)] opacity-0 group-hover:opacity-100 transition-opacity\">\n            {item.cta || \"Explore →\"}\n          </span>\n        </div>\n      </div>\n\n      {/* Border gradient */}\n      <div\n        className={cn(\n          \"absolute inset-0 -z-10 rounded-[var(--radius-xl)] p-px bg-gradient-to-br from-transparent via-gray-100/50 to-transparent dark:via-white/10 transition-opacity duration-300\",\n          item.hasPersistentHover ? \"opacity-100\" : \"opacity-0 group-hover:opacity-100\",\n        )}\n      />\n    </div>\n  );\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\n/* ─────────────────────────────────────────────────────────────────────────────\n * SectionContainer Component\n *\n * A standardized section wrapper that enforces consistent vertical rhythm,\n * max-width constraints, and responsive padding across the landing page.\n *\n * Usage:\n * <SectionContainer>\n *   <SectionContainer.Header>\n *     <h2>Section Title</h2>\n *   </SectionContainer.Header>\n *   <SectionContainer.Content>\n *     Main content...\n *   </SectionContainer.Content>\n * </SectionContainer>\n * ───────────────────────────────────────────────────────────────────────────── */\n\ntype SectionSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\ntype SectionSpacing = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst maxWidthMap: Record<SectionSize, string> = {\n  sm: \"max-w-3xl\",\n  md: \"max-w-5xl\",\n  lg: \"max-w-6xl\",\n  xl: \"max-w-7xl\",\n  full: \"max-w-none\",\n};\n\nconst verticalSpacingMap: Record<SectionSpacing, string> = {\n  sm: \"py-12 md:py-16\",\n  md: \"py-16 md:py-24\",\n  lg: \"py-24 md:py-32\",\n  xl: \"py-32 md:py-48\",\n};\n\n/* ─────────────────────────────────────────────────────────────────────────── */\n\nexport interface SectionContainerProps extends React.HTMLAttributes<HTMLElement> {\n  as?: \"section\" | \"div\" | \"article\";\n  size?: SectionSize;\n  spacing?: SectionSpacing;\n  centered?: boolean;\n  noPadding?: boolean;\n}\n\nconst SectionContainerRoot = React.forwardRef<HTMLElement, SectionContainerProps>(\n  (\n    {\n      className,\n      as: Component = \"section\",\n      size = \"lg\",\n      spacing: verticalSpacing = \"md\",\n      centered = true,\n      noPadding = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Component\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={cn(\n          \"relative w-full\",\n          !noPadding && \"px-4 sm:px-6 lg:px-8\",\n          verticalSpacingMap[verticalSpacing],\n          className,\n        )}\n        {...props}\n      >\n        <div className={cn(\"w-full\", maxWidthMap[size], centered && \"mx-auto\")}>{children}</div>\n      </Component>\n    );\n  },\n);\nSectionContainerRoot.displayName = \"SectionContainer\";\n\n/* ─────────────────────────────────────────────────────────────────────────── */\n\nexport interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  centered?: boolean;\n  spacing?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst SectionHeader = React.forwardRef<HTMLDivElement, SectionHeaderProps>(\n  ({ className, centered = true, spacing = \"md\", children, ...props }, ref) => {\n    const spacingMap = {\n      sm: \"mb-8\",\n      md: \"mb-12\",\n      lg: \"mb-16\",\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(spacingMap[spacing], centered && \"text-center\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nSectionHeader.displayName = \"SectionContainer.Header\";\n\n/* ─────────────────────────────────────────────────────────────────────────── */\n\nexport type SectionContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst SectionContent = React.forwardRef<HTMLDivElement, SectionContentProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"relative\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nSectionContent.displayName = \"SectionContainer.Content\";\n\n/* ─────────────────────────────────────────────────────────────────────────── */\n\nexport interface SectionFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  centered?: boolean;\n  spacing?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst SectionFooter = React.forwardRef<HTMLDivElement, SectionFooterProps>(\n  ({ className, centered = true, spacing = \"md\", children, ...props }, ref) => {\n    const spacingMap = {\n      sm: \"mt-8\",\n      md: \"mt-12\",\n      lg: \"mt-16\",\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(spacingMap[spacing], centered && \"text-center\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nSectionFooter.displayName = \"SectionContainer.Footer\";\n\n/* ─────────────────────────────────────────────────────────────────────────── */\n\n// Compound component assembly\nexport const SectionContainer = Object.assign(SectionContainerRoot, {\n  Header: SectionHeader,\n  Content: SectionContent,\n  Footer: SectionFooter,\n});\n\n// Named exports\nexport { SectionContainerRoot, SectionContent, SectionFooter, SectionHeader };\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\n/* ─────────────────────────────────────────────────────────────────────────────\n * GridPattern Component\n *\n * A decorative SVG grid background pattern.\n *\n * Usage:\n * <GridPattern /> // Default grid\n * <GridPattern variant=\"dots\" /> // Dot pattern\n * <GridPattern fade=\"top\" /> // Fade from top\n * ───────────────────────────────────────────────────────────────────────────── */\n\nexport interface GridPatternProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"lines\" | \"dots\" | \"crosses\";\n  size?: number;\n  strokeWidth?: number;\n  fade?: \"none\" | \"top\" | \"bottom\" | \"both\" | \"radial\";\n  color?: string;\n}\n\nexport const GridPattern = React.forwardRef<HTMLDivElement, GridPatternProps>(\n  (\n    {\n      className,\n      variant = \"lines\",\n      size = 32,\n      strokeWidth = 1,\n      fade = \"none\",\n      color = \"currentColor\",\n      ...props\n    },\n    ref,\n  ) => {\n    const patternId = React.useId();\n    const maskId = React.useId();\n\n    const renderPattern = () => {\n      switch (variant) {\n        case \"dots\":\n          return <circle cx={size / 2} cy={size / 2} r={strokeWidth} fill={color} />;\n        case \"crosses\": {\n          const crossSize = 6;\n          const cx = size / 2;\n          const cy = size / 2;\n          return (\n            <>\n              <line\n                x1={cx - crossSize / 2}\n                y1={cy}\n                x2={cx + crossSize / 2}\n                y2={cy}\n                stroke={color}\n                strokeWidth={strokeWidth}\n              />\n              <line\n                x1={cx}\n                y1={cy - crossSize / 2}\n                x2={cx}\n                y2={cy + crossSize / 2}\n                stroke={color}\n                strokeWidth={strokeWidth}\n              />\n            </>\n          );\n        }\n        default:\n          return (\n            <path\n              d={`M ${size} 0 L 0 0 0 ${size}`}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={strokeWidth}\n            />\n          );\n      }\n    };\n\n    const getMaskGradient = () => {\n      switch (fade) {\n        case \"top\":\n          return (\n            <linearGradient id={maskId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"0\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"1\" />\n            </linearGradient>\n          );\n        case \"bottom\":\n          return (\n            <linearGradient id={maskId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n            </linearGradient>\n          );\n        case \"both\":\n          return (\n            <linearGradient id={maskId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"0\" />\n              <stop offset=\"50%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n            </linearGradient>\n          );\n        case \"radial\":\n          return (\n            <radialGradient id={maskId} cx=\"50%\" cy=\"50%\" r=\"50%\">\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n            </radialGradient>\n          );\n        default:\n          return null;\n      }\n    };\n\n    const maskGradient = getMaskGradient();\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"pointer-events-none absolute inset-0 overflow-hidden text-border/40\",\n          className,\n        )}\n        aria-hidden=\"true\"\n        {...props}\n      >\n        <svg aria-hidden=\"true\" className=\"absolute inset-0 h-full w-full\">\n          <defs>\n            <pattern\n              id={patternId}\n              x=\"0\"\n              y=\"0\"\n              width={size}\n              height={size}\n              patternUnits=\"userSpaceOnUse\"\n            >\n              {renderPattern()}\n            </pattern>\n            {maskGradient}\n          </defs>\n\n          {fade !== \"none\" ? (\n            <>\n              <mask id={`${maskId}-mask`}>\n                <rect width=\"100%\" height=\"100%\" fill={`url(#${maskId})`} />\n              </mask>\n              <rect\n                width=\"100%\"\n                height=\"100%\"\n                fill={`url(#${patternId})`}\n                mask={`url(#${maskId}-mask)`}\n              />\n            </>\n          ) : (\n            <rect width=\"100%\" height=\"100%\" fill={`url(#${patternId})`} />\n          )}\n        </svg>\n      </div>\n    );\n  },\n);\nGridPattern.displayName = \"GridPattern\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface CrossPatternProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Size of each cross in pixels (default: 6) */\n  crossSize?: number;\n  /** Gap between crosses in pixels (default: 32) */\n  gap?: number;\n  /** Line thickness in pixels (default: 1) */\n  strokeWidth?: number;\n  /**\n   * Cross color. Accepts any valid CSS color value.\n   * - Use \"currentColor\" to inherit text color (default)\n   * - Use CSS variables: \"hsl(var(--border))\" for theme compatibility\n   */\n  color?: string;\n  /** Opacity 0-1 (default: 0.03) */\n  opacity?: number;\n}\n\n/**\n * CrossPattern - A subtle cross/plus sign background pattern.\n *\n * Creates a technical, grid-like pattern with small crosses.\n * Ideal for feature sections and technical content areas.\n *\n * @example\n * // Using currentColor (inherits text color)\n * <CrossPattern opacity={0.03} />\n *\n * @example\n * // Using semantic CSS variables\n * <CrossPattern color=\"hsl(var(--muted-foreground))\" opacity={0.05} />\n */\nexport const CrossPattern = React.forwardRef<HTMLDivElement, CrossPatternProps>(\n  (\n    {\n      crossSize = 6,\n      gap = 32,\n      strokeWidth = 1,\n      color = \"currentColor\",\n      opacity = 0.03,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const patternSize = crossSize + gap;\n    const halfCross = crossSize / 2;\n    const halfStroke = strokeWidth / 2;\n\n    // SVG pattern for crosses\n    const svgPattern = `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${patternSize}\" height=\"${patternSize}\" viewBox=\"0 0 ${patternSize} ${patternSize}\">\n      <rect \n        x=\"${halfCross - halfStroke}\" \n        y=\"0\" \n        width=\"${strokeWidth}\" \n        height=\"${crossSize}\" \n        fill=\"${color}\" \n      />\n      <rect \n        x=\"0\" \n        y=\"${halfCross - halfStroke}\" \n        width=\"${crossSize}\" \n        height=\"${strokeWidth}\" \n        fill=\"${color}\" \n      />\n    </svg>\n  `.trim();\n\n    const encodedSvg = encodeURIComponent(svgPattern);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"absolute inset-0 pointer-events-none\", className)}\n        style={{\n          backgroundImage: `url(\"data:image/svg+xml,${encodedSvg}\")`,\n          backgroundSize: `${patternSize}px ${patternSize}px`,\n          opacity,\n        }}\n        aria-hidden=\"true\"\n        {...props}\n      />\n    );\n  },\n);\n\nCrossPattern.displayName = \"CrossPattern\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface DotMatrixProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Dot size in pixels (default: 2) */\n  dotSize?: number;\n  /** Gap between dots in pixels (default: 16) */\n  gap?: number;\n  /**\n   * Dot color. Accepts any valid CSS color value.\n   * - Use \"currentColor\" to inherit text color (default)\n   * - Use CSS variables: \"hsl(var(--border))\" for theme compatibility\n   */\n  color?: string;\n  /** Opacity 0-1 (default: 0.04) */\n  opacity?: number;\n}\n\n/**\n * DotMatrix - A subtle dot grid background pattern.\n *\n * Creates a minimal, high-density dot pattern that adds texture\n * without cognitive load. Ideal for hero sections and CTAs.\n *\n * @example\n * // Using currentColor (inherits text color)\n * <DotMatrix opacity={0.04} />\n *\n * @example\n * // Using semantic CSS variables\n * <DotMatrix color=\"hsl(var(--border))\" opacity={0.06} />\n */\nexport const DotMatrix = React.forwardRef<HTMLDivElement, DotMatrixProps>(\n  ({ dotSize = 2, gap = 16, color = \"currentColor\", opacity = 0.04, className, ...props }, ref) => {\n    const patternSize = dotSize + gap;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"absolute inset-0 pointer-events-none\", className)}\n        style={{\n          backgroundImage: `radial-gradient(circle, ${color} ${dotSize / 2}px, transparent ${dotSize / 2}px)`,\n          backgroundSize: `${patternSize}px ${patternSize}px`,\n          backgroundPosition: `${gap / 2}px ${gap / 2}px`,\n          opacity,\n        }}\n        aria-hidden=\"true\"\n        {...props}\n      />\n    );\n  },\n);\n\nDotMatrix.displayName = \"DotMatrix\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { motion, useReducedMotion } from \"../../shared/animation/motion\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface FloatingSpotsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Number of floating spots (default: 12) */\n  count?: number;\n  /** Minimum spot size in pixels (default: 40) */\n  minSize?: number;\n  /** Maximum spot size in pixels (default: 120) */\n  maxSize?: number;\n  /**\n   * Spot color.\n   * Use CSS custom properties for theme compatibility:\n   * - \"hsl(var(--accent))\" for accent color\n   * - \"hsl(var(--primary))\" for primary brand color\n   */\n  color?: string;\n  /** Minimum opacity 0-1 (default: 0.05) */\n  minOpacity?: number;\n  /** Maximum opacity 0-1 (default: 0.15) */\n  maxOpacity?: number;\n  /** Animation cycle duration in seconds (default: 20) */\n  cycleDuration?: number;\n  /** Blur amount in pixels (default: 40) */\n  blur?: number;\n}\n\ninterface Spot {\n  id: number;\n  x: number;\n  y: number;\n  size: number;\n  opacity: number;\n  duration: number;\n  delay: number;\n  driftX: number;\n  driftY: number;\n}\n\n/**\n * FloatingSpots - Animated floating light spots for ambient depth.\n *\n * Creates softly glowing, slowly drifting light spots that add\n * atmospheric depth to sections. Uses subtle blur for ethereal effect.\n *\n * @example\n * // Using semantic CSS variables (recommended)\n * <FloatingSpots color=\"hsl(var(--accent))\" />\n *\n * @example\n * // Using custom hex colors (for decorative/artistic purposes)\n * <FloatingSpots color=\"hsl(var(--primary))\" />\n */\nexport const FloatingSpots = React.forwardRef<HTMLDivElement, FloatingSpotsProps>(\n  (\n    {\n      count = 12,\n      minSize = 40,\n      maxSize = 120,\n      color = \"hsl(var(--accent))\",\n      minOpacity = 0.05,\n      maxOpacity = 0.15,\n      cycleDuration = 20,\n      blur = 40,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const shouldReduceMotion = useReducedMotion();\n    const spots = React.useMemo<Spot[]>(() => {\n      return Array.from({ length: count }, (_, i) => ({\n        id: i,\n        x: Math.random() * 100,\n        y: Math.random() * 100,\n        size: minSize + Math.random() * (maxSize - minSize),\n        opacity: minOpacity + Math.random() * (maxOpacity - minOpacity),\n        duration: cycleDuration * (0.8 + Math.random() * 0.4),\n        delay: Math.random() * -cycleDuration,\n        driftX: (Math.random() - 0.5) * 30,\n        driftY: (Math.random() - 0.5) * 30,\n      }));\n    }, [count, minSize, maxSize, minOpacity, maxOpacity, cycleDuration]);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"absolute inset-0 overflow-hidden pointer-events-none\", className)}\n        aria-hidden=\"true\"\n        {...props}\n      >\n        {spots.map((spot) => (\n          <motion.div\n            key={spot.id}\n            className=\"absolute rounded-full\"\n            style={{\n              left: `${spot.x}%`,\n              top: `${spot.y}%`,\n              width: spot.size,\n              height: spot.size,\n              backgroundColor: color,\n              opacity: shouldReduceMotion ? spot.opacity : undefined,\n              filter: `blur(${blur}px)`,\n              transform: \"translate(-50%, -50%)\",\n            }}\n            animate={\n              shouldReduceMotion\n                ? { opacity: spot.opacity }\n                : {\n                    x: [0, spot.driftX, 0, -spot.driftX / 2, 0],\n                    y: [0, spot.driftY / 2, spot.driftY, 0],\n                    opacity: [spot.opacity, spot.opacity * 1.3, spot.opacity],\n                    scale: [1, 1.1, 1],\n                  }\n            }\n            transition={\n              shouldReduceMotion\n                ? { duration: 0 }\n                : {\n                    duration: spot.duration,\n                    repeat: Infinity,\n                    ease: \"easeInOut\",\n                    delay: spot.delay,\n                  }\n            }\n          />\n        ))}\n      </div>\n    );\n  },\n);\n\nFloatingSpots.displayName = \"FloatingSpots\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { GridPattern } from \"../decorations/GridPattern\";\nimport { CrossPattern, DotMatrix, FloatingSpots } from \"../decorations/patterns\";\nimport { cn } from \"../utils/cn\";\n\n/**\n * Section theme configuration.\n *\n * Note: For decorative/artistic purposes, themes may use hex colors as they\n * represent specific visual identities. These are exempt from strict Primer\n * compliance per WARP.md \"Exemptions\" section.\n */\nexport interface SectionThemeConfig {\n  /** Background color class (Tailwind) */\n  backgroundColor?: string;\n  /** Pattern type to use */\n  pattern?: \"dots\" | \"crosses\" | \"grid\" | \"floating\" | \"none\";\n  /**\n   * Pattern color.\n   * - Use \"currentColor\" to inherit from context\n   * - Use \"hsl(var(--accent))\" for semantic colors\n   * - Hex colors are allowed for artistic/decorative themes\n   */\n  patternColor?: string;\n  /** Pattern opacity 0-1 */\n  patternOpacity?: number;\n  /**\n   * Accent color for highlights.\n   * Hex colors are allowed for artistic/decorative themes.\n   */\n  accentColor?: string;\n  /** Additional gradient overlay (Tailwind class) */\n  gradient?: string;\n  /** Custom pattern props */\n  patternProps?: Record<string, unknown>;\n}\n\n/**\n * Predefined section themes based on DESIGN.md Section 11.5.\n *\n * These themes define visual territories for different sections.\n * Some use specific hex colors for artistic effect (exempt from Primer\n * strict compliance per WARP.md).\n */\nexport const sectionThemes: Record<string, SectionThemeConfig> = {\n  // Hero: \"Cosmic Launch\" - Deep blue gradient with floating particles\n  hero: {\n    backgroundColor: \"bg-background\",\n    pattern: \"floating\",\n    patternColor: \"hsl(var(--accent))\",\n    patternOpacity: 0.1,\n    gradient: \"bg-gradient-to-b from-primary/5 via-transparent to-transparent\",\n  },\n\n  // Architecture: \"Terminal Matrix\" - Monochrome with subtle pattern\n  architecture: {\n    backgroundColor: \"bg-[var(--neutral-1)]\",\n    pattern: \"dots\",\n    patternColor: \"currentColor\",\n    patternOpacity: 0.03,\n  },\n\n  // AI-Native: \"Neon Network\" - Dark with neon accents\n  aiNative: {\n    backgroundColor: \"bg-background\",\n    pattern: \"dots\",\n    patternColor: \"hsl(var(--accent))\",\n    patternOpacity: 0.04,\n    accentColor: \"hsl(var(--accent))\",\n    gradient: \"bg-gradient-to-br from-cyan-500/5 via-transparent to-fuchsia-500/5\",\n  },\n\n  // Features: \"Capability Map\" - Subtle tech pattern\n  features: {\n    backgroundColor: \"bg-background\",\n    pattern: \"crosses\",\n    patternColor: \"currentColor\",\n    patternOpacity: 0.03,\n  },\n\n  // Multi-tenant: \"Access Graph\" - Amber isolation lines\n  // Note: Uses specific amber for visual territory (exempt)\n  multiTenant: {\n    backgroundColor: \"bg-background\",\n    pattern: \"grid\",\n    patternColor: \"hsl(var(--warning, 43 96% 56%))\", // Warning/amber semantic\n    patternOpacity: 0.03,\n    accentColor: \"hsl(var(--warning, 43 96% 56%))\",\n  },\n\n  // Testimonials: \"Depth Gallery\" - Warm neutrals with vignette\n  testimonials: {\n    backgroundColor: \"bg-background\",\n    pattern: \"floating\",\n    patternColor: \"hsl(var(--warning, 48 96% 58%))\", // Warm yellow\n    patternOpacity: 0.05,\n    gradient:\n      \"bg-[radial-gradient(ellipse_at_center,transparent_0%,hsl(var(--background)/0.4)_100%)]\",\n  },\n\n  // Vision: \"Contemplation Space\" - Maximum whitespace\n  vision: {\n    backgroundColor: \"bg-background\",\n    pattern: \"none\",\n    gradient: \"bg-gradient-to-b from-transparent via-primary/[0.02] to-transparent\",\n  },\n\n  // Pricing: \"Symmetry Order\" - Clean, minimal\n  pricing: {\n    backgroundColor: \"bg-background\",\n    pattern: \"dots\",\n    patternColor: \"currentColor\",\n    patternOpacity: 0.02,\n  },\n\n  // CTA: \"Action Climax\" - Emphasis with gradient\n  cta: {\n    backgroundColor: \"bg-background\",\n    pattern: \"dots\",\n    patternColor: \"hsl(var(--primary))\",\n    patternOpacity: 0.04,\n    gradient: \"bg-gradient-to-t from-primary/10 via-transparent to-transparent\",\n  },\n\n  // Stats: \"Data Visualization\" - Clean with subtle pattern\n  stats: {\n    backgroundColor: \"bg-muted/30\",\n    pattern: \"crosses\",\n    patternColor: \"currentColor\",\n    patternOpacity: 0.02,\n  },\n\n  // Terminal: \"Developer Immersion\" - Code environment feel\n  terminal: {\n    backgroundColor: \"bg-[var(--neutral-1)]\",\n    pattern: \"none\",\n  },\n};\n\nexport interface ThemedSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, \"children\"> {\n  /** Theme preset name or custom config */\n  theme: keyof typeof sectionThemes | SectionThemeConfig;\n  /** Section content */\n  children: React.ReactNode;\n  /** Custom CSS variables for the section */\n  cssVars?: Record<string, string>;\n  /** Whether to include pattern (default: true) */\n  showPattern?: boolean;\n}\n\n/**\n * ThemedSection - A section wrapper that applies visual territory theming.\n *\n * Applies consistent background patterns, colors, and gradients based on\n * predefined themes or custom configurations.\n *\n * @example\n * <ThemedSection theme=\"architecture\">\n *   <h2>Architecture</h2>\n *   <CodeBlock />\n * </ThemedSection>\n *\n * @example\n * <ThemedSection\n *   theme={{\n *     backgroundColor: \"bg-[var(--neutral-2)]\",\n *     pattern: \"grid\",\n *     patternColor: \"hsl(var(--accent))\",\n *     patternOpacity: 0.05,\n *   }}\n * >\n *   Custom themed content\n * </ThemedSection>\n */\nexport const ThemedSection = React.forwardRef<HTMLElement, ThemedSectionProps>(\n  ({ theme, children, className, cssVars, showPattern = true, ...props }, ref) => {\n    const config = typeof theme === \"string\" ? sectionThemes[theme] : theme;\n\n    const renderPattern = () => {\n      if (!showPattern || config.pattern === \"none\") return null;\n\n      const baseProps = {\n        className: \"absolute inset-0 z-0\",\n      };\n\n      switch (config.pattern) {\n        case \"dots\":\n          return (\n            <DotMatrix\n              {...baseProps}\n              color={config.patternColor}\n              opacity={config.patternOpacity}\n              {...(config.patternProps as object)}\n            />\n          );\n        case \"crosses\":\n          return (\n            <CrossPattern\n              {...baseProps}\n              color={config.patternColor}\n              opacity={config.patternOpacity}\n              {...(config.patternProps as object)}\n            />\n          );\n        case \"grid\":\n          return (\n            <GridPattern\n              {...baseProps}\n              color={config.patternColor}\n              className={cn(baseProps.className, `opacity-[${config.patternOpacity}]`)}\n              {...(config.patternProps as object)}\n            />\n          );\n        case \"floating\":\n          return (\n            <FloatingSpots\n              {...baseProps}\n              color={config.patternColor}\n              maxOpacity={config.patternOpacity}\n              {...(config.patternProps as object)}\n            />\n          );\n        default:\n          return null;\n      }\n    };\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\"relative overflow-hidden\", config.backgroundColor, className)}\n        style={cssVars as React.CSSProperties}\n        {...props}\n      >\n        {/* Pattern layer */}\n        {renderPattern()}\n\n        {/* Gradient overlay */}\n        {config.gradient && (\n          <div\n            className={cn(\"absolute inset-0 z-0 pointer-events-none\", config.gradient)}\n            aria-hidden=\"true\"\n          />\n        )}\n\n        {/* Content layer */}\n        <div className=\"relative z-10\">{children}</div>\n      </section>\n    );\n  },\n);\n\nThemedSection.displayName = \"ThemedSection\";\n"]}
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/layouts/bento-grid.tsx","../../src/layouts/SectionContainer.tsx","../../src/decorations/GridPattern.tsx","../../src/decorations/patterns/CrossPattern.tsx","../../src/decorations/patterns/DotMatrix.tsx","../../src/decorations/patterns/FloatingSpots.tsx","../../src/layouts/SectionTheme.tsx"],"names":["jsx","React2","jsxs","React3","React4","React5","React6"],"mappings":"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","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport interface BentoItem {\n  /** Card title */\n  title: string;\n  /** Card description */\n  description: string;\n  /** Icon element to display */\n  icon: React.ReactNode;\n  /** Status badge text */\n  status?: string;\n  /** Array of tag strings */\n  tags?: string[];\n  /** Meta information (version, count, etc.) */\n  meta?: string;\n  /** Call-to-action text */\n  cta?: string;\n  /** Column span (1 or 2) */\n  colSpan?: 1 | 2;\n  /** Whether to show hover state persistently */\n  hasPersistentHover?: boolean;\n}\n\nexport interface BentoGridProps {\n  /** Array of bento items to display */\n  items: BentoItem[];\n  /** Additional className */\n  className?: string;\n}\n\n/**\n * BentoGrid - Feature showcase grid layout\n *\n * A responsive grid layout for displaying feature cards with icons,\n * descriptions, tags, and status badges. Supports variable column spans.\n *\n * @example\n * ```tsx\n * <BentoGrid\n *   items={[\n *     {\n *       title: \"Analytics\",\n *       description: \"Real-time metrics\",\n *       icon: <TrendingUp className=\"w-4 h-4\" />,\n *       status: \"Live\",\n *       tags: [\"Stats\", \"AI\"],\n *       colSpan: 2,\n *     },\n *     // ...\n *   ]}\n * />\n * ```\n */\nexport function BentoGrid({ items, className }: BentoGridProps) {\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-1 md:grid-cols-3 gap-3 p-4 max-w-[var(--container-wide)] mx-auto\",\n        className,\n      )}\n    >\n      {items.map((item, index) => (\n        <BentoCard key={index} item={item} />\n      ))}\n    </div>\n  );\n}\n\nBentoGrid.displayName = \"BentoGrid\";\n\ninterface BentoCardProps {\n  item: BentoItem;\n}\n\nfunction BentoCard({ item }: BentoCardProps) {\n  return (\n    <div\n      className={cn(\n        \"group relative p-4 rounded-[var(--radius-xl)] overflow-hidden transition-[box-shadow,transform] duration-300 motion-reduce:transition-none motion-reduce:transform-none\",\n        \"border border-[var(--neutral-6)] bg-white dark:bg-black\",\n        \"hover:shadow-ambient-sm\",\n        \"hover:-translate-y-0.5 will-change-transform\",\n        item.colSpan === 2 ? \"md:col-span-2\" : \"col-span-1\",\n        item.hasPersistentHover && [\"shadow-ambient-sm -translate-y-0.5\"],\n      )}\n    >\n      {/* Background pattern */}\n      <div\n        className={cn(\n          \"absolute inset-0 transition-opacity duration-300\",\n          item.hasPersistentHover ? \"opacity-100\" : \"opacity-0 group-hover:opacity-100\",\n        )}\n      >\n        <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.02)_1px,transparent_1px)] dark:bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[length:4px_4px]\" />\n      </div>\n\n      <div className=\"relative flex flex-col space-y-3\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between\">\n          <div className=\"w-8 h-8 rounded-[var(--radius-lg)] flex items-center justify-center bg-black/5 group-hover:bg-gradient-to-br transition-[background-color,background-image] duration-300\">\n            {item.icon}\n          </div>\n          <span\n            className={cn(\n              \"text-xs font-medium px-2 py-1 rounded-[var(--radius-lg)] backdrop-blur-sm\",\n              \"bg-black/5 text-[var(--neutral-10)]\",\n              \"transition-colors duration-300 group-hover:bg-black/10\",\n            )}\n          >\n            {item.status || \"Active\"}\n          </span>\n        </div>\n\n        {/* Content */}\n        <div className=\"space-y-2\">\n          <h3 className=\"font-medium text-[var(--neutral-12)] tracking-tight text-[15px]\">\n            {item.title}\n            {item.meta && (\n              <span className=\"ml-2 text-xs text-[var(--neutral-9)] font-normal\">{item.meta}</span>\n            )}\n          </h3>\n          <p className=\"text-sm text-[var(--neutral-10)] leading-snug font-[425]\">\n            {item.description}\n          </p>\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex items-center justify-between mt-2\">\n          <div className=\"flex items-center space-x-2 text-xs text-[var(--neutral-9)]\">\n            {item.tags?.map((tag, i) => (\n              <span\n                key={i}\n                className=\"px-2 py-1 rounded-[var(--radius-md)] bg-black/5 backdrop-blur-sm transition-colors duration-micro hover:bg-black/10\"\n              >\n                #{tag}\n              </span>\n            ))}\n          </div>\n          <span className=\"text-xs text-[var(--neutral-9)] opacity-0 group-hover:opacity-100 transition-opacity\">\n            {item.cta || \"Explore →\"}\n          </span>\n        </div>\n      </div>\n\n      {/* Border gradient */}\n      <div\n        className={cn(\n          \"absolute inset-0 -z-10 rounded-[var(--radius-xl)] p-px bg-gradient-to-br from-transparent via-gray-100/50 to-transparent dark:via-white/10 transition-opacity duration-300\",\n          item.hasPersistentHover ? \"opacity-100\" : \"opacity-0 group-hover:opacity-100\",\n        )}\n      />\n    </div>\n  );\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\n/* ─────────────────────────────────────────────────────────────────────────────\n * SectionContainer Component\n *\n * A standardized section wrapper that enforces consistent vertical rhythm,\n * max-width constraints, and responsive padding across the landing page.\n *\n * Usage:\n * <SectionContainer>\n *   <SectionContainer.Header>\n *     <h2>Section Title</h2>\n *   </SectionContainer.Header>\n *   <SectionContainer.Content>\n *     Main content...\n *   </SectionContainer.Content>\n * </SectionContainer>\n * ───────────────────────────────────────────────────────────────────────────── */\n\ntype SectionSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\ntype SectionSpacing = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * Sizes resolve to the container contract in @nebutra/tokens. `lg` keeps its\n * 1152px width (max-w-6xl was already the content width); `md` and `xl` moved\n * off max-w-5xl / max-w-7xl, which the contract forbids.\n */\nconst maxWidthMap: Record<SectionSize, string> = {\n  sm: \"max-w-3xl\", // 768px\n  md: \"max-w-[var(--container-text)]\", // 896px\n  lg: \"max-w-[var(--container-content)]\", // 1152px\n  xl: \"max-w-[var(--container-wide)]\", // 1400px\n  full: \"max-w-none\",\n};\n\nconst verticalSpacingMap: Record<SectionSpacing, string> = {\n  sm: \"py-12 md:py-16\",\n  md: \"py-16 md:py-24\",\n  lg: \"py-24 md:py-32\",\n  xl: \"py-32 md:py-48\",\n};\n\n/* ─────────────────────────────────────────────────────────────────────────── */\n\nexport interface SectionContainerProps extends React.HTMLAttributes<HTMLElement> {\n  as?: \"section\" | \"div\" | \"article\";\n  size?: SectionSize;\n  spacing?: SectionSpacing;\n  centered?: boolean;\n  noPadding?: boolean;\n}\n\nconst SectionContainerRoot = React.forwardRef<HTMLElement, SectionContainerProps>(\n  (\n    {\n      className,\n      as: Component = \"section\",\n      size = \"lg\",\n      spacing: verticalSpacing = \"md\",\n      centered = true,\n      noPadding = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Component\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={cn(\n          \"relative w-full\",\n          !noPadding && \"px-4 sm:px-6 lg:px-8\",\n          verticalSpacingMap[verticalSpacing],\n          className,\n        )}\n        {...props}\n      >\n        <div className={cn(\"w-full\", maxWidthMap[size], centered && \"mx-auto\")}>{children}</div>\n      </Component>\n    );\n  },\n);\nSectionContainerRoot.displayName = \"SectionContainer\";\n\n/* ─────────────────────────────────────────────────────────────────────────── */\n\nexport interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  centered?: boolean;\n  spacing?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst SectionHeader = React.forwardRef<HTMLDivElement, SectionHeaderProps>(\n  ({ className, centered = true, spacing = \"md\", children, ...props }, ref) => {\n    const spacingMap = {\n      sm: \"mb-8\",\n      md: \"mb-12\",\n      lg: \"mb-16\",\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(spacingMap[spacing], centered && \"text-center\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nSectionHeader.displayName = \"SectionContainer.Header\";\n\n/* ─────────────────────────────────────────────────────────────────────────── */\n\nexport type SectionContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst SectionContent = React.forwardRef<HTMLDivElement, SectionContentProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"relative\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nSectionContent.displayName = \"SectionContainer.Content\";\n\n/* ─────────────────────────────────────────────────────────────────────────── */\n\nexport interface SectionFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  centered?: boolean;\n  spacing?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst SectionFooter = React.forwardRef<HTMLDivElement, SectionFooterProps>(\n  ({ className, centered = true, spacing = \"md\", children, ...props }, ref) => {\n    const spacingMap = {\n      sm: \"mt-8\",\n      md: \"mt-12\",\n      lg: \"mt-16\",\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(spacingMap[spacing], centered && \"text-center\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nSectionFooter.displayName = \"SectionContainer.Footer\";\n\n/* ─────────────────────────────────────────────────────────────────────────── */\n\n// Compound component assembly\nexport const SectionContainer = Object.assign(SectionContainerRoot, {\n  Header: SectionHeader,\n  Content: SectionContent,\n  Footer: SectionFooter,\n});\n\n// Named exports\nexport { SectionContainerRoot, SectionContent, SectionFooter, SectionHeader };\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\n/* ─────────────────────────────────────────────────────────────────────────────\n * GridPattern Component\n *\n * A decorative SVG grid background pattern.\n *\n * Usage:\n * <GridPattern /> // Default grid\n * <GridPattern variant=\"dots\" /> // Dot pattern\n * <GridPattern fade=\"top\" /> // Fade from top\n * ───────────────────────────────────────────────────────────────────────────── */\n\nexport interface GridPatternProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"lines\" | \"dots\" | \"crosses\";\n  size?: number;\n  strokeWidth?: number;\n  fade?: \"none\" | \"top\" | \"bottom\" | \"both\" | \"radial\";\n  color?: string | undefined;\n}\n\nexport const GridPattern = React.forwardRef<HTMLDivElement, GridPatternProps>(\n  (\n    {\n      className,\n      variant = \"lines\",\n      size = 32,\n      strokeWidth = 1,\n      fade = \"none\",\n      color = \"currentColor\",\n      ...props\n    },\n    ref,\n  ) => {\n    const patternId = React.useId();\n    const maskId = React.useId();\n\n    const renderPattern = () => {\n      switch (variant) {\n        case \"dots\":\n          return <circle cx={size / 2} cy={size / 2} r={strokeWidth} fill={color} />;\n        case \"crosses\": {\n          const crossSize = 6;\n          const cx = size / 2;\n          const cy = size / 2;\n          return (\n            <>\n              <line\n                x1={cx - crossSize / 2}\n                y1={cy}\n                x2={cx + crossSize / 2}\n                y2={cy}\n                stroke={color}\n                strokeWidth={strokeWidth}\n              />\n              <line\n                x1={cx}\n                y1={cy - crossSize / 2}\n                x2={cx}\n                y2={cy + crossSize / 2}\n                stroke={color}\n                strokeWidth={strokeWidth}\n              />\n            </>\n          );\n        }\n        default:\n          return (\n            <path\n              d={`M ${size} 0 L 0 0 0 ${size}`}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={strokeWidth}\n            />\n          );\n      }\n    };\n\n    const getMaskGradient = () => {\n      switch (fade) {\n        case \"top\":\n          return (\n            <linearGradient id={maskId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"0\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"1\" />\n            </linearGradient>\n          );\n        case \"bottom\":\n          return (\n            <linearGradient id={maskId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n            </linearGradient>\n          );\n        case \"both\":\n          return (\n            <linearGradient id={maskId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"0\" />\n              <stop offset=\"50%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n            </linearGradient>\n          );\n        case \"radial\":\n          return (\n            <radialGradient id={maskId} cx=\"50%\" cy=\"50%\" r=\"50%\">\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n            </radialGradient>\n          );\n        default:\n          return null;\n      }\n    };\n\n    const maskGradient = getMaskGradient();\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"pointer-events-none absolute inset-0 overflow-hidden text-border/40\",\n          className,\n        )}\n        aria-hidden=\"true\"\n        {...props}\n      >\n        <svg aria-hidden=\"true\" className=\"absolute inset-0 h-full w-full\">\n          <defs>\n            <pattern\n              id={patternId}\n              x=\"0\"\n              y=\"0\"\n              width={size}\n              height={size}\n              patternUnits=\"userSpaceOnUse\"\n            >\n              {renderPattern()}\n            </pattern>\n            {maskGradient}\n          </defs>\n\n          {fade !== \"none\" ? (\n            <>\n              <mask id={`${maskId}-mask`}>\n                <rect width=\"100%\" height=\"100%\" fill={`url(#${maskId})`} />\n              </mask>\n              <rect\n                width=\"100%\"\n                height=\"100%\"\n                fill={`url(#${patternId})`}\n                mask={`url(#${maskId}-mask)`}\n              />\n            </>\n          ) : (\n            <rect width=\"100%\" height=\"100%\" fill={`url(#${patternId})`} />\n          )}\n        </svg>\n      </div>\n    );\n  },\n);\nGridPattern.displayName = \"GridPattern\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface CrossPatternProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Size of each cross in pixels (default: 6) */\n  crossSize?: number;\n  /** Gap between crosses in pixels (default: 32) */\n  gap?: number;\n  /** Line thickness in pixels (default: 1) */\n  strokeWidth?: number;\n  /**\n   * Cross color. Accepts any valid CSS color value.\n   * - Use \"currentColor\" to inherit text color (default)\n   * - Use CSS variables: \"hsl(var(--border))\" for theme compatibility\n   */\n  color?: string | undefined;\n  /** Opacity 0-1 (default: 0.03) */\n  opacity?: number | undefined;\n}\n\n/**\n * CrossPattern - A subtle cross/plus sign background pattern.\n *\n * Creates a technical, grid-like pattern with small crosses.\n * Ideal for feature sections and technical content areas.\n *\n * @example\n * // Using currentColor (inherits text color)\n * <CrossPattern opacity={0.03} />\n *\n * @example\n * // Using semantic CSS variables\n * <CrossPattern color=\"hsl(var(--muted-foreground))\" opacity={0.05} />\n */\nexport const CrossPattern = React.forwardRef<HTMLDivElement, CrossPatternProps>(\n  (\n    {\n      crossSize = 6,\n      gap = 32,\n      strokeWidth = 1,\n      color = \"currentColor\",\n      opacity = 0.03,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const patternSize = crossSize + gap;\n    const halfCross = crossSize / 2;\n    const halfStroke = strokeWidth / 2;\n\n    // SVG pattern for crosses\n    const svgPattern = `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${patternSize}\" height=\"${patternSize}\" viewBox=\"0 0 ${patternSize} ${patternSize}\">\n      <rect \n        x=\"${halfCross - halfStroke}\" \n        y=\"0\" \n        width=\"${strokeWidth}\" \n        height=\"${crossSize}\" \n        fill=\"${color}\" \n      />\n      <rect \n        x=\"0\" \n        y=\"${halfCross - halfStroke}\" \n        width=\"${crossSize}\" \n        height=\"${strokeWidth}\" \n        fill=\"${color}\" \n      />\n    </svg>\n  `.trim();\n\n    const encodedSvg = encodeURIComponent(svgPattern);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"absolute inset-0 pointer-events-none\", className)}\n        style={{\n          backgroundImage: `url(\"data:image/svg+xml,${encodedSvg}\")`,\n          backgroundSize: `${patternSize}px ${patternSize}px`,\n          opacity,\n        }}\n        aria-hidden=\"true\"\n        {...props}\n      />\n    );\n  },\n);\n\nCrossPattern.displayName = \"CrossPattern\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface DotMatrixProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Dot size in pixels (default: 2) */\n  dotSize?: number;\n  /** Gap between dots in pixels (default: 16) */\n  gap?: number;\n  /**\n   * Dot color. Accepts any valid CSS color value.\n   * - Use \"currentColor\" to inherit text color (default)\n   * - Use CSS variables: \"hsl(var(--border))\" for theme compatibility\n   */\n  color?: string | undefined;\n  /** Opacity 0-1 (default: 0.04) */\n  opacity?: number | undefined;\n}\n\n/**\n * DotMatrix - A subtle dot grid background pattern.\n *\n * Creates a minimal, high-density dot pattern that adds texture\n * without cognitive load. Ideal for hero sections and CTAs.\n *\n * @example\n * // Using currentColor (inherits text color)\n * <DotMatrix opacity={0.04} />\n *\n * @example\n * // Using semantic CSS variables\n * <DotMatrix color=\"hsl(var(--border))\" opacity={0.06} />\n */\nexport const DotMatrix = React.forwardRef<HTMLDivElement, DotMatrixProps>(\n  ({ dotSize = 2, gap = 16, color = \"currentColor\", opacity = 0.04, className, ...props }, ref) => {\n    const patternSize = dotSize + gap;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"absolute inset-0 pointer-events-none\", className)}\n        style={{\n          backgroundImage: `radial-gradient(circle, ${color} ${dotSize / 2}px, transparent ${dotSize / 2}px)`,\n          backgroundSize: `${patternSize}px ${patternSize}px`,\n          backgroundPosition: `${gap / 2}px ${gap / 2}px`,\n          opacity,\n        }}\n        aria-hidden=\"true\"\n        {...props}\n      />\n    );\n  },\n);\n\nDotMatrix.displayName = \"DotMatrix\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { motion, useReducedMotion } from \"../../shared/animation/motion\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface FloatingSpotsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Number of floating spots (default: 12) */\n  count?: number;\n  /** Minimum spot size in pixels (default: 40) */\n  minSize?: number;\n  /** Maximum spot size in pixels (default: 120) */\n  maxSize?: number;\n  /**\n   * Spot color.\n   * Use CSS custom properties for theme compatibility:\n   * - \"hsl(var(--accent))\" for accent color\n   * - \"hsl(var(--primary))\" for primary brand color\n   */\n  color?: string | undefined;\n  /** Minimum opacity 0-1 (default: 0.05) */\n  minOpacity?: number | undefined;\n  /** Maximum opacity 0-1 (default: 0.15) */\n  maxOpacity?: number | undefined;\n  /** Animation cycle duration in seconds (default: 20) */\n  cycleDuration?: number;\n  /** Blur amount in pixels (default: 40) */\n  blur?: number;\n}\n\ninterface Spot {\n  id: number;\n  x: number;\n  y: number;\n  size: number;\n  opacity: number;\n  duration: number;\n  delay: number;\n  driftX: number;\n  driftY: number;\n}\n\n/**\n * FloatingSpots - Animated floating light spots for ambient depth.\n *\n * Creates softly glowing, slowly drifting light spots that add\n * atmospheric depth to sections. Uses subtle blur for ethereal effect.\n *\n * @example\n * // Using semantic CSS variables (recommended)\n * <FloatingSpots color=\"hsl(var(--accent))\" />\n *\n * @example\n * // Using custom hex colors (for decorative/artistic purposes)\n * <FloatingSpots color=\"hsl(var(--primary))\" />\n */\nexport const FloatingSpots = React.forwardRef<HTMLDivElement, FloatingSpotsProps>(\n  (\n    {\n      count = 12,\n      minSize = 40,\n      maxSize = 120,\n      color = \"hsl(var(--accent))\",\n      minOpacity = 0.05,\n      maxOpacity = 0.15,\n      cycleDuration = 20,\n      blur = 40,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const shouldReduceMotion = useReducedMotion();\n    const spots = React.useMemo<Spot[]>(() => {\n      return Array.from({ length: count }, (_, i) => ({\n        id: i,\n        x: Math.random() * 100,\n        y: Math.random() * 100,\n        size: minSize + Math.random() * (maxSize - minSize),\n        opacity: minOpacity + Math.random() * (maxOpacity - minOpacity),\n        duration: cycleDuration * (0.8 + Math.random() * 0.4),\n        delay: Math.random() * -cycleDuration,\n        driftX: (Math.random() - 0.5) * 30,\n        driftY: (Math.random() - 0.5) * 30,\n      }));\n    }, [count, minSize, maxSize, minOpacity, maxOpacity, cycleDuration]);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"absolute inset-0 overflow-hidden pointer-events-none\", className)}\n        aria-hidden=\"true\"\n        {...props}\n      >\n        {spots.map((spot) => (\n          <motion.div\n            key={spot.id}\n            className=\"absolute rounded-full\"\n            style={{\n              left: `${spot.x}%`,\n              top: `${spot.y}%`,\n              width: spot.size,\n              height: spot.size,\n              backgroundColor: color,\n              opacity: shouldReduceMotion ? spot.opacity : undefined,\n              filter: `blur(${blur}px)`,\n              transform: \"translate(-50%, -50%)\",\n            }}\n            animate={\n              shouldReduceMotion\n                ? { opacity: spot.opacity }\n                : {\n                    x: [0, spot.driftX, 0, -spot.driftX / 2, 0],\n                    y: [0, spot.driftY / 2, spot.driftY, 0],\n                    opacity: [spot.opacity, spot.opacity * 1.3, spot.opacity],\n                    scale: [1, 1.1, 1],\n                  }\n            }\n            transition={\n              shouldReduceMotion\n                ? { duration: 0 }\n                : {\n                    duration: spot.duration,\n                    repeat: Infinity,\n                    ease: \"easeInOut\",\n                    delay: spot.delay,\n                  }\n            }\n          />\n        ))}\n      </div>\n    );\n  },\n);\n\nFloatingSpots.displayName = \"FloatingSpots\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { GridPattern } from \"../decorations/GridPattern\";\nimport { CrossPattern, DotMatrix, FloatingSpots } from \"../decorations/patterns\";\nimport { cn } from \"../utils/cn\";\n\n/**\n * Section theme configuration.\n *\n * Note: For decorative/artistic purposes, themes may use hex colors as they\n * represent specific visual identities. These are exempt from strict Primer\n * compliance per WARP.md \"Exemptions\" section.\n */\nexport interface SectionThemeConfig {\n  /** Background color class (Tailwind) */\n  backgroundColor?: string;\n  /** Pattern type to use */\n  pattern?: \"dots\" | \"crosses\" | \"grid\" | \"floating\" | \"none\";\n  /**\n   * Pattern color.\n   * - Use \"currentColor\" to inherit from context\n   * - Use \"hsl(var(--accent))\" for semantic colors\n   * - Hex colors are allowed for artistic/decorative themes\n   */\n  patternColor?: string;\n  /** Pattern opacity 0-1 */\n  patternOpacity?: number;\n  /**\n   * Accent color for highlights.\n   * Hex colors are allowed for artistic/decorative themes.\n   */\n  accentColor?: string;\n  /** Additional gradient overlay (Tailwind class) */\n  gradient?: string;\n  /** Custom pattern props */\n  patternProps?: Record<string, unknown>;\n}\n\n/**\n * Predefined section themes based on DESIGN.md Section 11.5.\n *\n * These themes define visual territories for different sections.\n * Some use specific hex colors for artistic effect (exempt from Primer\n * strict compliance per WARP.md).\n */\nconst sectionThemeDefs = {\n  // Hero: \"Cosmic Launch\" - Deep blue gradient with floating particles\n  hero: {\n    backgroundColor: \"bg-background\",\n    pattern: \"floating\",\n    patternColor: \"hsl(var(--accent))\",\n    patternOpacity: 0.1,\n    gradient: \"bg-gradient-to-b from-primary/5 via-transparent to-transparent\",\n  },\n\n  // Architecture: \"Terminal Matrix\" - Monochrome with subtle pattern\n  architecture: {\n    backgroundColor: \"bg-[var(--neutral-1)]\",\n    pattern: \"dots\",\n    patternColor: \"currentColor\",\n    patternOpacity: 0.03,\n  },\n\n  // AI-Native: \"Neon Network\" - Dark with neon accents\n  aiNative: {\n    backgroundColor: \"bg-background\",\n    pattern: \"dots\",\n    patternColor: \"hsl(var(--accent))\",\n    patternOpacity: 0.04,\n    accentColor: \"hsl(var(--accent))\",\n    gradient: \"bg-gradient-to-br from-cyan-500/5 via-transparent to-fuchsia-500/5\",\n  },\n\n  // Features: \"Capability Map\" - Subtle tech pattern\n  features: {\n    backgroundColor: \"bg-background\",\n    pattern: \"crosses\",\n    patternColor: \"currentColor\",\n    patternOpacity: 0.03,\n  },\n\n  // Multi-tenant: \"Access Graph\" - Amber isolation lines\n  // Note: Uses specific amber for visual territory (exempt)\n  multiTenant: {\n    backgroundColor: \"bg-background\",\n    pattern: \"grid\",\n    patternColor: \"hsl(var(--warning, 43 96% 56%))\", // Warning/amber semantic\n    patternOpacity: 0.03,\n    accentColor: \"hsl(var(--warning, 43 96% 56%))\",\n  },\n\n  // Testimonials: \"Depth Gallery\" - Warm neutrals with vignette\n  testimonials: {\n    backgroundColor: \"bg-background\",\n    pattern: \"floating\",\n    patternColor: \"hsl(var(--warning, 48 96% 58%))\", // Warm yellow\n    patternOpacity: 0.05,\n    gradient:\n      \"bg-[radial-gradient(ellipse_at_center,transparent_0%,hsl(var(--background)/0.4)_100%)]\",\n  },\n\n  // Vision: \"Contemplation Space\" - Maximum whitespace\n  vision: {\n    backgroundColor: \"bg-background\",\n    pattern: \"none\",\n    gradient: \"bg-gradient-to-b from-transparent via-primary/[0.02] to-transparent\",\n  },\n\n  // Pricing: \"Symmetry Order\" - Clean, minimal\n  pricing: {\n    backgroundColor: \"bg-background\",\n    pattern: \"dots\",\n    patternColor: \"currentColor\",\n    patternOpacity: 0.02,\n  },\n\n  // CTA: \"Action Climax\" - Emphasis with gradient\n  cta: {\n    backgroundColor: \"bg-background\",\n    pattern: \"dots\",\n    patternColor: \"hsl(var(--primary))\",\n    patternOpacity: 0.04,\n    gradient: \"bg-gradient-to-t from-primary/10 via-transparent to-transparent\",\n  },\n\n  // Stats: \"Data Visualization\" - Clean with subtle pattern\n  stats: {\n    backgroundColor: \"bg-muted/30\",\n    pattern: \"crosses\",\n    patternColor: \"currentColor\",\n    patternOpacity: 0.02,\n  },\n\n  // Terminal: \"Developer Immersion\" - Code environment feel\n  terminal: {\n    backgroundColor: \"bg-[var(--neutral-1)]\",\n    pattern: \"none\",\n  },\n} satisfies Record<string, SectionThemeConfig>;\n\n/** Names of the predefined section themes. */\nexport type SectionThemeName = keyof typeof sectionThemeDefs;\n\n/**\n * Predefined themes, keyed by a closed union so that `sectionThemes[name]`\n * is known to exist. Declaring this as `Record<string, …>` would erase the\n * literal keys and make every lookup `SectionThemeConfig | undefined`.\n */\nexport const sectionThemes: Record<SectionThemeName, SectionThemeConfig> = sectionThemeDefs;\n\nexport interface ThemedSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, \"children\"> {\n  /** Theme preset name or custom config */\n  theme: SectionThemeName | SectionThemeConfig;\n  /** Section content */\n  children: React.ReactNode;\n  /** Custom CSS variables for the section */\n  cssVars?: Record<string, string>;\n  /** Whether to include pattern (default: true) */\n  showPattern?: boolean;\n}\n\n/**\n * ThemedSection - A section wrapper that applies visual territory theming.\n *\n * Applies consistent background patterns, colors, and gradients based on\n * predefined themes or custom configurations.\n *\n * @example\n * <ThemedSection theme=\"architecture\">\n *   <h2>Architecture</h2>\n *   <CodeBlock />\n * </ThemedSection>\n *\n * @example\n * <ThemedSection\n *   theme={{\n *     backgroundColor: \"bg-[var(--neutral-2)]\",\n *     pattern: \"grid\",\n *     patternColor: \"hsl(var(--accent))\",\n *     patternOpacity: 0.05,\n *   }}\n * >\n *   Custom themed content\n * </ThemedSection>\n */\nexport const ThemedSection = React.forwardRef<HTMLElement, ThemedSectionProps>(\n  ({ theme, children, className, cssVars, showPattern = true, ...props }, ref) => {\n    const config = typeof theme === \"string\" ? sectionThemes[theme] : theme;\n\n    const renderPattern = () => {\n      if (!showPattern || config.pattern === \"none\") return null;\n\n      const baseProps = {\n        className: \"absolute inset-0 z-0\",\n      };\n\n      switch (config.pattern) {\n        case \"dots\":\n          return (\n            <DotMatrix\n              {...baseProps}\n              color={config.patternColor}\n              opacity={config.patternOpacity}\n              {...(config.patternProps as object)}\n            />\n          );\n        case \"crosses\":\n          return (\n            <CrossPattern\n              {...baseProps}\n              color={config.patternColor}\n              opacity={config.patternOpacity}\n              {...(config.patternProps as object)}\n            />\n          );\n        case \"grid\":\n          return (\n            <GridPattern\n              {...baseProps}\n              color={config.patternColor}\n              className={cn(baseProps.className, `opacity-[${config.patternOpacity}]`)}\n              {...(config.patternProps as object)}\n            />\n          );\n        case \"floating\":\n          return (\n            <FloatingSpots\n              {...baseProps}\n              color={config.patternColor}\n              maxOpacity={config.patternOpacity}\n              {...(config.patternProps as object)}\n            />\n          );\n        default:\n          return null;\n      }\n    };\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\"relative overflow-hidden\", config.backgroundColor, className)}\n        style={cssVars as React.CSSProperties}\n        {...props}\n      >\n        {/* Pattern layer */}\n        {renderPattern()}\n\n        {/* Gradient overlay */}\n        {config.gradient && (\n          <div\n            className={cn(\"absolute inset-0 z-0 pointer-events-none\", config.gradient)}\n            aria-hidden=\"true\"\n          />\n        )}\n\n        {/* Content layer */}\n        <div className=\"relative z-10\">{children}</div>\n      </section>\n    );\n  },\n);\n\nThemedSection.displayName = \"ThemedSection\";\n"]}

package/dist/patterns/index.d.ts

@@ -360,10 +360,10 @@ interface SidebarNavSection {
 interface SidebarNavRenderLinkProps {
     href: string;
     children: React.ReactNode;
-    className?: string;
+    className?: string | undefined;
     "aria-current"?: "page" | undefined;
-    "aria-label"?: string;
-    onClick?: () => void;
+    "aria-label"?: string | undefined;
+    onClick?: (() => void) | undefined;
 }
 interface SidebarNavProps {
     sections: SidebarNavSection[];