@nebutra/ui 0.2.0 → 0.2.2

package/dist/layouts/index.js

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { motion } from 'framer-motion';
+import { useReducedMotion, motion } from 'framer-motion';
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -18,8 +18,8 @@ function BentoCard({ item }) {
     "div",
     {
       className: cn(
-        "group relative p-4 rounded-[var(--radius-xl)] overflow-hidden transition-all duration-300",
-        "border border-[var(--neutral-6)] dark:border-white/10 bg-white dark:bg-black",
+        "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:-translate-y-0.5 will-change-transform",
         item.colSpan === 2 ? "md:col-span-2" : "col-span-1",
@@ -41,14 +41,14 @@ function BentoCard({ item }) {
         ),
         /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col space-y-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-[var(--radius-lg)] flex items-center justify-center bg-black/5 dark:bg-white/10 group-hover:bg-gradient-to-br transition-all duration-300", children: item.icon }),
+            /* @__PURE__ */ jsx("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", children: item.icon }),
             /* @__PURE__ */ jsx(
               "span",
               {
                 className: cn(
                   "text-xs font-medium px-2 py-1 rounded-[var(--radius-lg)] backdrop-blur-sm",
-                  "bg-black/5 dark:bg-white/10 text-[var(--neutral-10)]",
-                  "transition-colors duration-300 group-hover:bg-black/10 dark:group-hover:bg-white/20"
+                  "bg-black/5 text-[var(--neutral-10)]",
+                  "transition-colors duration-300 group-hover:bg-black/10"
                 ),
                 children: item.status || "Active"
               }
@@ -65,7 +65,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 dark:bg-white/10 backdrop-blur-sm transition-all duration-200 hover:bg-black/10 dark:hover:bg-white/20",
+                className: "px-2 py-1 rounded-[var(--radius-md)] bg-black/5 backdrop-blur-sm transition-colors duration-200 hover:bg-black/10",
                 children: [
                   "#",
                   tag
@@ -391,6 +391,7 @@ var FloatingSpots = React.forwardRef(
     className,
     ...props
   }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
     const spots = React.useMemo(() => {
       return Array.from({ length: count }, (_, i) => ({
         id: i,
@@ -421,16 +422,17 @@ var FloatingSpots = React.forwardRef(
               width: spot.size,
               height: spot.size,
               backgroundColor: color,
+              opacity: shouldReduceMotion ? spot.opacity : void 0,
               filter: `blur(${blur}px)`,
               transform: "translate(-50%, -50%)"
             },
-            animate: {
+            animate: shouldReduceMotion ? { opacity: spot.opacity } : {
               x: [0, spot.driftX, 0, -spot.driftX / 2, 0],
               y: [0, spot.driftY / 2, spot.driftY, 0],
               opacity: [spot.opacity, spot.opacity * 1.3, spot.opacity],
               scale: [1, 1.1, 1]
             },
-            transition: {
+            transition: shouldReduceMotion ? { duration: 0 } : {
               duration: spot.duration,
               repeat: Infinity,
               ease: "easeInOut",

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-all duration-300\",\n        \"border border-[var(--neutral-6)] dark:border-white/10 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 dark:bg-white/10 group-hover:bg-gradient-to-br transition-all 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 dark:bg-white/10 text-[var(--neutral-10)]\",\n              \"transition-colors duration-300 group-hover:bg-black/10 dark:group-hover:bg-white/20\",\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 dark:bg-white/10 backdrop-blur-sm transition-all duration-200 hover:bg-black/10 dark:hover:bg-white/20\"\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 { motion } from \"framer-motion\";\nimport * as React from \"react\";\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=\"#0BF1C3\" />\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 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              filter: `blur(${blur}px)`,\n              transform: \"translate(-50%, -50%)\",\n            }}\n            animate={{\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            transition={{\n              duration: spot.duration,\n              repeat: Infinity,\n              ease: \"easeInOut\",\n              delay: spot.delay,\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 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"]}

package/dist/patterns/index.d.ts

@@ -1,7 +1,25 @@
-import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { HTMLAttributes, ReactNode, ComponentType } from 'react';
 import { Icon } from '@nebutra/icons';
 
+interface ArtifactShiftCardProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    contentClassName?: string;
+}
+interface ArtifactShiftCardPreviewProps extends HTMLAttributes<HTMLElement> {
+    filename: string;
+    language: string;
+    code: string;
+    label: string;
+    maxLines?: number;
+    signals?: readonly string[];
+}
+type ArtifactShiftCardFooterProps = HTMLAttributes<HTMLElement>;
+declare function ArtifactShiftCard({ className, contentClassName, children, ...props }: ArtifactShiftCardProps): react_jsx_runtime.JSX.Element;
+declare function ArtifactShiftCardPreview({ filename, language, code, label, maxLines, signals, className, ...props }: ArtifactShiftCardPreviewProps): react_jsx_runtime.JSX.Element;
+declare function ArtifactShiftCardFooter({ className, ...props }: ArtifactShiftCardFooterProps): react_jsx_runtime.JSX.Element;
+
 type CardVariant = "default" | "elevated" | "bordered" | "ghost" | "gradient";
 type CardPadding = "none" | "sm" | "md" | "lg";
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -48,6 +66,40 @@ interface CommandBoxProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const CommandBox: React.ForwardRefExoticComponent<CommandBoxProps & React.RefAttributes<HTMLDivElement>>;
 
+type DashboardMetricTone = "neutral" | "blue" | "green" | "amber";
+interface DashboardCommandSurfaceProps {
+    status?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+declare function DashboardCommandSurface({ status, title, description, actions, children, className, }: DashboardCommandSurfaceProps): react_jsx_runtime.JSX.Element;
+interface DashboardPanelProps {
+    title: ReactNode;
+    description?: ReactNode;
+    meta?: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    headerClassName?: string;
+}
+declare function DashboardPanel({ title, description, meta, action, children, className, headerClassName, }: DashboardPanelProps): react_jsx_runtime.JSX.Element;
+interface DashboardMetricTileProps {
+    label: ReactNode;
+    value: ReactNode;
+    detail?: ReactNode;
+    source?: ReactNode;
+    icon?: ComponentType<{
+        className?: string;
+        "aria-hidden"?: boolean;
+    }>;
+    tone?: DashboardMetricTone;
+    className?: string;
+}
+declare function DashboardMetricTile({ label, value, detail, source, icon: Icon, tone, className, }: DashboardMetricTileProps): react_jsx_runtime.JSX.Element;
+
 type GalleryCardIconTone = "neutral" | "blue" | "cyan" | "purple" | "amber" | "green" | "pink";
 type GalleryCardBadgeTone = "beta" | "new" | "owner" | "featured" | "coming-soon";
 interface GalleryCardMetadata {
@@ -101,6 +153,58 @@ declare namespace GalleryCard {
     var displayName: string;
 }
 
+type IconComponent = ComponentType<{
+    className?: string;
+    "aria-hidden"?: boolean;
+}>;
+type IconInput = IconComponent | ReactNode;
+interface KineticFeatureCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    icon?: IconInput;
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description: ReactNode;
+    children?: ReactNode;
+}
+interface KineticCodePreviewProps extends HTMLAttributes<HTMLDivElement> {
+    filename?: string;
+    language?: string;
+    lines: readonly string[];
+}
+interface KineticConsoleFrameProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    status?: ReactNode;
+    children: ReactNode;
+}
+type KineticStepRailProps = HTMLAttributes<HTMLDivElement>;
+interface KineticMorphSurfaceProps extends HTMLAttributes<HTMLDivElement> {
+    activeKey?: string | number;
+    children: ReactNode;
+}
+interface KineticSignalMarqueeProps extends HTMLAttributes<HTMLDivElement> {
+    eyebrow?: ReactNode;
+    children: ReactNode;
+}
+interface KineticCommandBoxProps extends HTMLAttributes<HTMLDivElement> {
+    command: string;
+    copyLabel: string;
+    copiedLabel: string;
+}
+interface KineticStepProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    icon?: IconComponent;
+    index: number;
+    title: ReactNode;
+    description: ReactNode;
+    phaseLabel?: string;
+}
+declare function KineticFeatureCard({ icon, eyebrow, title, description, children, className, ...props }: KineticFeatureCardProps): react_jsx_runtime.JSX.Element;
+declare function KineticCodePreview({ filename, language, lines, className, ...props }: KineticCodePreviewProps): react_jsx_runtime.JSX.Element;
+declare function KineticConsoleFrame({ title, status, children, className, ...props }: KineticConsoleFrameProps): react_jsx_runtime.JSX.Element;
+declare function KineticMorphSurface({ activeKey, className, children, ...props }: KineticMorphSurfaceProps): react_jsx_runtime.JSX.Element;
+declare function KineticSignalMarquee({ eyebrow, className, children, ...props }: KineticSignalMarqueeProps): react_jsx_runtime.JSX.Element;
+declare function KineticCommandBox({ command, copyLabel, copiedLabel, className, ...props }: KineticCommandBoxProps): react_jsx_runtime.JSX.Element;
+declare function KineticStepRail({ className, children, ...props }: KineticStepRailProps): react_jsx_runtime.JSX.Element;
+declare function KineticStep({ icon: Icon, index, title, description, phaseLabel, className, ...props }: KineticStepProps): react_jsx_runtime.JSX.Element;
+
 interface MarkdownEditorProps {
     value: string;
     onChange: (next: string) => void;
@@ -224,12 +328,34 @@ interface SidebarNavItem {
     /** Nested children — 1 level deep max */
     children?: SidebarNavItem[];
     disabled?: boolean;
+    /** Controlled expansion for parent items (with children). When provided
+     * together with onExpandedChange, the inner Collapsible runs as a
+     * controlled component. Falls back to uncontrolled otherwise. */
+    expanded?: boolean;
+    onExpandedChange?: (next: boolean) => void;
+}
+/** A single icon-button action rendered inline-right of the section label,
+ * revealed only on section hover/focus-within. Max 3 per section. */
+interface SidebarNavSectionAction {
+    id: string;
+    icon: SidebarNavIcon;
+    /** Accessible name (also used as title attribute). */
+    label: string;
+    /** Click handler — required unless `render` is provided. */
+    onClick?: () => void;
+    /** Optional wrapper to replace the default `<button>` rendering. Receives
+     * the default icon-button element so consumers can compose, e.g., a
+     * DropdownMenu trigger around it. When provided, `onClick` is ignored. */
+    render?: (defaultButton: React.ReactElement) => React.ReactNode;
 }
 interface SidebarNavSection {
     id: string;
     /** Group label, e.g. "MiniMax 实验室". Hidden when collapsed. */
     label?: string;
     items: SidebarNavItem[];
+    /** Hover/focus-revealed actions next to the section label. Skipped in
+     * collapsed mode and when empty. Limit to ≤ 3 to keep visual rhythm. */
+    actions?: SidebarNavSectionAction[];
 }
 interface SidebarNavRenderLinkProps {
     href: string;
@@ -360,4 +486,4 @@ interface WorkspaceSwitcherProps {
 }
 declare function WorkspaceSwitcher({ workspaces, activeWorkspaceId, onSwitch, variant, footerSlot, headerSlot, className, showRoleBadge, disabled, }: WorkspaceSwitcherProps): React.ReactElement;
 
-export { type AnswerType, type Author, Card, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardIcon, type CardIconProps, type CardProps, CardRoot, CardTitle, type CardTitleProps, CommandBox, type CommandBoxProps, GalleryCard, type GalleryCardAction, type GalleryCardBadge, type GalleryCardBadgeTone, type GalleryCardIconTone, type GalleryCardMetadata, type GalleryCardProps, type GalleryCardRenderLinkProps, MarkdownEditor, type MarkdownEditorProps, MarkdownRenderer, type MarkdownRendererProps, QAPage, type QAPageProps, type QuestionType, SidebarNav, type SidebarNavBadge, type SidebarNavBadgeTone, type SidebarNavIcon, type SidebarNavItem, type SidebarNavProps, type SidebarNavRenderLinkProps, type SidebarNavSection, Terminal, TerminalBody, type TerminalBodyProps, TerminalHeader, type TerminalHeaderProps, TerminalLine, type TerminalLineProps, type TerminalProps, TerminalRoot, UserInfo, type UserInfoProps, UserMenu, type UserMenuGroup, type UserMenuItem, type UserMenuProps, type UserMenuUser, VoteButtons, type VoteButtonsProps, type VoteType, type Workspace, type WorkspaceRole, WorkspaceSwitcher, type WorkspaceSwitcherProps };
+export { type AnswerType, ArtifactShiftCard, ArtifactShiftCardFooter, type ArtifactShiftCardFooterProps, ArtifactShiftCardPreview, type ArtifactShiftCardPreviewProps, type ArtifactShiftCardProps, type Author, Card, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardIcon, type CardIconProps, type CardProps, CardRoot, CardTitle, type CardTitleProps, CommandBox, type CommandBoxProps, DashboardCommandSurface, type DashboardCommandSurfaceProps, DashboardMetricTile, type DashboardMetricTileProps, DashboardPanel, type DashboardPanelProps, GalleryCard, type GalleryCardAction, type GalleryCardBadge, type GalleryCardBadgeTone, type GalleryCardIconTone, type GalleryCardMetadata, type GalleryCardProps, type GalleryCardRenderLinkProps, KineticCodePreview, type KineticCodePreviewProps, KineticCommandBox, type KineticCommandBoxProps, KineticConsoleFrame, type KineticConsoleFrameProps, KineticFeatureCard, type KineticFeatureCardProps, KineticMorphSurface, type KineticMorphSurfaceProps, KineticSignalMarquee, type KineticSignalMarqueeProps, KineticStep, type KineticStepProps, KineticStepRail, type KineticStepRailProps, MarkdownEditor, type MarkdownEditorProps, MarkdownRenderer, type MarkdownRendererProps, QAPage, type QAPageProps, type QuestionType, SidebarNav, type SidebarNavBadge, type SidebarNavBadgeTone, type SidebarNavIcon, type SidebarNavItem, type SidebarNavProps, type SidebarNavRenderLinkProps, type SidebarNavSection, type SidebarNavSectionAction, Terminal, TerminalBody, type TerminalBodyProps, TerminalHeader, type TerminalHeaderProps, TerminalLine, type TerminalLineProps, type TerminalProps, TerminalRoot, UserInfo, type UserInfoProps, UserMenu, type UserMenuGroup, type UserMenuItem, type UserMenuProps, type UserMenuUser, VoteButtons, type VoteButtonsProps, type VoteType, type Workspace, type WorkspaceRole, WorkspaceSwitcher, type WorkspaceSwitcherProps };