{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shapes",
  "title": "Shapes",
  "description": "55 neubrutalist SVG shapes organized by category for badges, decorations, and visual accents",
  "dependencies": [],
  "registryDependencies": [
    "@boldkit/utils",
    "@boldkit/motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/shapes.tsx",
      "content": "/* eslint-disable react-refresh/only-export-components */\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n// ============================================================================\n// Types & Factory\n// ============================================================================\n\ntype ShapeAnimation =\n  | 'none'\n  // smooth presets\n  | 'spin' | 'pulse' | 'float' | 'wiggle' | 'bounce' | 'glitch'\n  // stepped presets — hard, non-interpolated motion (v3.5)\n  | 'spin-step' | 'pulse-hard' | 'marquee-stamp'\ntype ShapeSpeed = 'slow' | 'normal' | 'fast'\n\ninterface ShapeProps extends React.SVGProps<SVGSVGElement> {\n  size?: number\n  strokeWidth?: number\n  filled?: boolean\n  color?: string\n  animation?: ShapeAnimation\n  speed?: ShapeSpeed\n}\n\nfunction getAnimClass(animation?: ShapeAnimation, speed?: ShapeSpeed): string {\n  if (!animation || animation === 'none') return ''\n  const s = speed && speed !== 'normal' ? `-${speed}` : ''\n  return `shape-animate-${animation}${s}`\n}\n\n// ============================================================================\n// GEOMETRIC SHAPES - Basic polygons and mathematical forms\n// ============================================================================\n\nexport const TriangleShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-accent', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 5 L95 90 L5 90 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nTriangleShape.displayName = 'TriangleShape'\n\nexport const DiamondBadge = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-primary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 5 L95 50 L50 95 L5 50 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nDiamondBadge.displayName = 'DiamondBadge'\n\nexport const PentagonShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-primary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 5 L95 38 L77 90 L23 90 L5 38 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nPentagonShape.displayName = 'PentagonShape'\n\nexport const HexagonShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-secondary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M25 10 L75 10 L95 50 L75 90 L25 90 L5 50 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nHexagonShape.displayName = 'HexagonShape'\n\nexport const OctagonShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-accent', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M30 5 L70 5 L95 30 L95 70 L70 95 L30 95 L5 70 L5 30 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nOctagonShape.displayName = 'OctagonShape'\n\nexport const CrossShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-accent', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M35 5 L65 5 L65 35 L95 35 L95 65 L65 65 L65 95 L35 95 L35 65 L5 65 L5 35 L35 35 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nCrossShape.displayName = 'CrossShape'\n\nexport const TrapezoidShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.6}\n      viewBox=\"0 0 100 60\"\n      className={cn('text-secondary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M20 5 L80 5 L95 55 L5 55 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nTrapezoidShape.displayName = 'TrapezoidShape'\n\nexport const ParallelogramShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.5}\n      viewBox=\"0 0 100 50\"\n      className={cn('text-info', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M20 5 L95 5 L80 45 L5 45 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nParallelogramShape.displayName = 'ParallelogramShape'\n\n// ============================================================================\n// STAR SHAPES - Stars, bursts, and explosion effects\n// ============================================================================\n\nexport const Star4Shape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-info', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 0 L58 42 L100 50 L58 58 L50 100 L42 58 L0 50 L42 42 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nStar4Shape.displayName = 'Star4Shape'\n\nexport const Star5Shape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-accent', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 5 L61 38 L95 38 L68 59 L79 93 L50 72 L21 93 L32 59 L5 38 L39 38 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nStar5Shape.displayName = 'Star5Shape'\n\nexport const BurstShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-primary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 0 L58 35 L95 20 L68 45 L100 50 L68 55 L95 80 L58 65 L50 100 L42 65 L5 80 L32 55 L0 50 L32 45 L5 20 L42 35 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nBurstShape.displayName = 'BurstShape'\n\nexport const ExplosionShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-warning', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 5 L55 30 L80 15 L65 35 L95 35 L70 50 L95 65 L65 65 L80 85 L55 70 L50 95 L45 70 L20 85 L35 65 L5 65 L30 50 L5 35 L35 35 L20 15 L45 30 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nExplosionShape.displayName = 'ExplosionShape'\n\nexport const SplatShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-destructive', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 5 Q55 20 70 15 Q65 30 85 25 Q75 40 95 50 Q75 55 85 75 Q65 65 70 85 Q55 75 50 95 Q45 75 30 85 Q35 65 15 75 Q25 55 5 50 Q25 40 15 25 Q35 30 30 15 Q45 20 50 5 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nSplatShape.displayName = 'SplatShape'\n\nexport const LightningShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size * 0.6}\n      height={size}\n      viewBox=\"0 0 60 100\"\n      className={cn('text-warning', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M35 0 L5 55 L25 55 L15 100 L55 40 L35 40 L50 0 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nLightningShape.displayName = 'LightningShape'\n\n// ============================================================================\n// ORGANIC SHAPES - Blobs, waves, and natural forms\n// ============================================================================\n\nexport const BlobShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-secondary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 5 Q80 10 90 35 Q95 60 80 80 Q60 95 40 90 Q15 85 10 60 Q5 35 25 15 Q40 5 50 5 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nBlobShape.displayName = 'BlobShape'\n\nexport const WaveShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.5}\n      viewBox=\"0 0 100 50\"\n      className={cn('text-secondary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M0 25 Q12.5 0 25 25 Q37.5 50 50 25 Q62.5 0 75 25 Q87.5 50 100 25 L100 50 L0 50 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nWaveShape.displayName = 'WaveShape'\n\nexport const CloudShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.7}\n      viewBox=\"0 0 100 70\"\n      className={cn('text-info', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M25 60 Q5 60 5 45 Q5 30 20 30 Q20 15 40 15 Q55 10 65 20 Q75 10 90 25 Q100 35 90 50 Q95 65 75 65 L25 65 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nCloudShape.displayName = 'CloudShape'\n\nexport const HeartShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-destructive', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 90 L15 55 Q0 40 0 25 Q0 5 20 5 Q35 5 50 20 Q65 5 80 5 Q100 5 100 25 Q100 40 85 55 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nHeartShape.displayName = 'HeartShape'\n\n// ============================================================================\n// UI & BADGE SHAPES - Tags, badges, ribbons, and UI elements\n// ============================================================================\n\nexport const ArrowBadge = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.6}\n      viewBox=\"0 0 100 60\"\n      className={cn('text-accent', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M0 10 L70 10 L70 0 L100 30 L70 60 L70 50 L0 50 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nArrowBadge.displayName = 'ArrowBadge'\n\nexport const ZigzagBanner = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.5}\n      viewBox=\"0 0 100 50\"\n      className={cn('text-warning', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M0 0 L100 0 L100 35 L90 50 L80 35 L70 50 L60 35 L50 50 L40 35 L30 50 L20 35 L10 50 L0 35 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nZigzagBanner.displayName = 'ZigzagBanner'\n\nexport const RibbonShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.4}\n      viewBox=\"0 0 100 40\"\n      className={cn('text-primary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M0 10 L10 0 L10 10 L90 10 L90 0 L100 10 L100 30 L90 40 L90 30 L10 30 L10 40 L0 30 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nRibbonShape.displayName = 'RibbonShape'\n\nexport const ShieldShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-success', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 5 L90 20 L90 50 Q90 80 50 95 Q10 80 10 50 L10 20 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nShieldShape.displayName = 'ShieldShape'\n\nexport const TagShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.6}\n      viewBox=\"0 0 100 60\"\n      className={cn('text-warning', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M15 5 L85 5 L100 30 L85 55 L15 55 L0 30 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n      <circle cx=\"20\" cy=\"30\" r=\"6\" fill=\"hsl(var(--foreground))\" />\n    </svg>\n  )\n)\nTagShape.displayName = 'TagShape'\n\nexport const PriceTagShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.6}\n      viewBox=\"0 0 100 60\"\n      className={cn('text-accent', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M10 5 L75 5 L95 30 L75 55 L10 55 L10 5 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n      <circle cx=\"22\" cy=\"30\" r=\"8\" fill=\"none\" stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} />\n      <line x1=\"10\" y1=\"30\" x2=\"14\" y2=\"30\" stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} />\n    </svg>\n  )\n)\nPriceTagShape.displayName = 'PriceTagShape'\n\nexport const TicketShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.5}\n      viewBox=\"0 0 100 50\"\n      className={cn('text-success', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M5 0 L95 0 Q100 0 100 5 L100 20 Q90 20 90 25 Q90 30 100 30 L100 45 Q100 50 95 50 L5 50 Q0 50 0 45 L0 30 Q10 30 10 25 Q10 20 0 20 L0 5 Q0 0 5 0 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nTicketShape.displayName = 'TicketShape'\n\nexport const CouponShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.5}\n      viewBox=\"0 0 100 50\"\n      className={cn('text-success', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M5 5 L95 5 L95 15 Q90 15 90 20 Q90 25 95 25 L95 35 Q90 35 90 40 Q90 45 95 45 L5 45 L5 35 Q10 35 10 30 Q10 25 5 25 L5 15 Q10 15 10 10 Q10 5 5 5 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n      <line x1=\"35\" y1=\"10\" x2=\"35\" y2=\"40\" stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth - 1} strokeDasharray=\"4,4\" />\n    </svg>\n  )\n)\nCouponShape.displayName = 'CouponShape'\n\nexport const BookmarkShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size * 0.6}\n      height={size}\n      viewBox=\"0 0 60 100\"\n      className={cn('text-destructive', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M5 5 L55 5 L55 95 L30 75 L5 95 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nBookmarkShape.displayName = 'BookmarkShape'\n\nexport const FlagShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-warning', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path d=\"M10 5 L10 95\" fill=\"none\" stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} />\n      <path\n        d=\"M10 5 L90 5 L75 30 L90 55 L10 55 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nFlagShape.displayName = 'FlagShape'\n\nexport const PillShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.4}\n      viewBox=\"0 0 100 40\"\n      className={cn('text-primary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M20 5 L80 5 Q95 5 95 20 Q95 35 80 35 L20 35 Q5 35 5 20 Q5 5 20 5 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nPillShape.displayName = 'PillShape'\n\n// ============================================================================\n// COMMUNICATION SHAPES - Speech bubbles, cursors, and interactive elements\n// ============================================================================\n\nexport const SpeechBubble = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-card', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M10 10 L90 10 L90 65 L40 65 L20 90 L25 65 L10 65 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nSpeechBubble.displayName = 'SpeechBubble'\n\nexport const CursorShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size * 0.7}\n      height={size}\n      viewBox=\"0 0 70 100\"\n      className={cn('text-success', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M5 5 L5 85 L25 65 L45 95 L55 90 L35 60 L65 60 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nCursorShape.displayName = 'CursorShape'\n\nexport const EyeShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.6}\n      viewBox=\"0 0 100 60\"\n      className={cn('text-secondary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M5 30 Q25 5 50 5 Q75 5 95 30 Q75 55 50 55 Q25 55 5 30 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n      <circle cx=\"50\" cy=\"30\" r=\"12\" fill=\"hsl(var(--foreground))\" />\n    </svg>\n  )\n)\nEyeShape.displayName = 'EyeShape'\n\n// ============================================================================\n// NATURE & CELESTIAL SHAPES - Sun, moon, planet, rainbow, and natural forms\n// ============================================================================\n\nexport const SunShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-warning', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"22\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n      <path\n        d=\"M50 5 L54 22 L46 22 Z M50 95 L54 78 L46 78 Z M5 50 L22 46 L22 54 Z M95 50 L78 46 L78 54 Z M18 18 L32 28 L28 32 Z M82 18 L68 28 L72 32 Z M18 82 L28 68 L32 72 Z M82 82 L72 68 L68 72 Z\"\n        fill=\"hsl(var(--foreground))\"\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={Math.max(1, strokeWidth - 2)}\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n)\nSunShape.displayName = 'SunShape'\n\nexport const Star6Shape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-accent', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {/* 6-pointed star (hexagram) with 12 points alternating */}\n      <path\n        d=\"M50 2 L56 30 L85 15 L65 40 L98 50 L65 60 L85 85 L56 70 L50 98 L44 70 L15 85 L35 60 L2 50 L35 40 L15 15 L44 30 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nStar6Shape.displayName = 'Star6Shape'\n\nexport const CrescentShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-warning', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M70 10 Q90 30 90 55 Q90 80 65 92 Q80 75 80 55 Q80 30 60 15 Q55 12 70 10 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n)\nCrescentShape.displayName = 'CrescentShape'\n\nexport const RainbowShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.6}\n      viewBox=\"0 0 100 60\"\n      className={cn('text-primary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M5 55 Q5 10 50 10 Q95 10 95 55\"\n        fill=\"none\"\n        stroke={filled ? (color || \"hsl(var(--destructive))\") : 'none'}\n        strokeWidth={10}\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M15 55 Q15 22 50 22 Q85 22 85 55\"\n        fill=\"none\"\n        stroke={filled ? (color || \"hsl(var(--warning))\") : 'none'}\n        strokeWidth={10}\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M25 55 Q25 34 50 34 Q75 34 75 55\"\n        fill=\"none\"\n        stroke={filled ? (color || \"hsl(var(--info))\") : 'none'}\n        strokeWidth={10}\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M5 55 Q5 10 50 10 Q95 10 95 55\"\n        fill=\"none\"\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M15 55 Q15 22 50 22 Q85 22 85 55\"\n        fill=\"none\"\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M25 55 Q25 34 50 34 Q75 34 75 55\"\n        fill=\"none\"\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n)\nRainbowShape.displayName = 'RainbowShape'\n\nexport const PlanetShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-secondary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"28\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n      <ellipse\n        cx=\"50\"\n        cy=\"50\"\n        rx=\"45\"\n        ry=\"14\"\n        fill=\"none\"\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n        transform=\"rotate(-25 50 50)\"\n      />\n    </svg>\n  )\n)\nPlanetShape.displayName = 'PlanetShape'\n\nexport const UmbrellaShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-info', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 10 Q15 10 5 45 L25 45 Q25 30 35 30 Q40 30 40 45 L60 45 Q60 30 65 30 Q75 30 75 45 L95 45 Q85 10 50 10 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n      <path\n        d=\"M50 10 L50 80 Q50 92 40 92 Q32 92 32 85\"\n        fill=\"none\"\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n)\nUmbrellaShape.displayName = 'UmbrellaShape'\n\nexport const AppleShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-destructive', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 25 Q30 20 15 35 Q0 55 15 75 Q25 92 40 95 Q50 97 50 90 Q50 97 60 95 Q75 92 85 75 Q100 55 85 35 Q70 20 50 25 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n      <path\n        d=\"M50 25 Q55 10 60 5\"\n        fill=\"none\"\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M58 12 Q68 8 72 15 Q70 20 62 18\"\n        fill=\"hsl(var(--foreground))\"\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={Math.max(1, strokeWidth - 2)}\n      />\n    </svg>\n  )\n)\nAppleShape.displayName = 'AppleShape'\n\n// ============================================================================\n// DECORATIVE SHAPES - Scribbles, tears, and artistic effects\n// ============================================================================\n\nexport const ScribbleCircle = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-info', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n      <path\n        d=\"M20 50 Q30 30 50 25 Q70 20 80 40 Q85 60 70 75 Q50 90 30 75 Q15 60 20 50\"\n        fill=\"none\"\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth - 1}\n        strokeDasharray=\"5,5\"\n      />\n    </svg>\n  )\n)\nScribbleCircle.displayName = 'ScribbleCircle'\n\nexport const ScribbleUnderline = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.2}\n      viewBox=\"0 0 100 20\"\n      className={cn('text-primary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M2 12 Q10 8 20 14 Q30 18 40 10 Q50 6 60 14 Q70 18 80 10 Q90 6 98 12\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M5 16 Q15 10 25 16 Q35 20 45 12 Q55 8 65 16 Q75 20 85 12 Q95 8 98 14\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={strokeWidth - 1}\n        strokeLinecap=\"round\"\n        opacity=\"0.5\"\n      />\n    </svg>\n  )\n)\nScribbleUnderline.displayName = 'ScribbleUnderline'\n\nexport const PaperTearShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.3}\n      viewBox=\"0 0 100 30\"\n      className={cn('text-card', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M0 0 L100 0 L100 15 L95 20 L90 12 L85 22 L80 10 L75 25 L70 8 L65 20 L60 12 L55 28 L50 10 L45 22 L40 15 L35 25 L30 10 L25 20 L20 8 L15 18 L10 12 L5 22 L0 15 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nPaperTearShape.displayName = 'PaperTearShape'\n\n// ============================================================================\n// NEW SHAPES - Seals, Gears, and Wavy Forms\n// ============================================================================\n\nexport const SealShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-success', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M50 5 Q60 5 65 12 Q72 8 78 15 Q85 12 88 22 Q95 22 95 32 Q100 40 95 50 Q100 60 95 68 Q95 78 88 78 Q85 88 78 85 Q72 92 65 88 Q60 95 50 95 Q40 95 35 88 Q28 92 22 85 Q15 88 12 78 Q5 78 5 68 Q0 60 5 50 Q0 40 5 32 Q5 22 12 22 Q15 12 22 15 Q28 8 35 12 Q40 5 50 5 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nSealShape.displayName = 'SealShape'\n\nexport const GearShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      className={cn('text-muted-foreground', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <g transform=\"translate(0, 10)\">\n        <path\n          d=\"M42 8 L58 8 L60 18 L68 14 L76 22 L72 30 L82 34 L82 48 L72 50 L76 58 L68 66 L60 62 L58 72 L42 72 L40 62 L32 66 L24 58 L28 50 L18 48 L18 34 L28 30 L24 22 L32 14 L40 18 Z\"\n          fill={filled ? (color || 'currentColor') : 'none'}\n          stroke=\"hsl(var(--foreground))\"\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          cx=\"50\"\n          cy=\"40\"\n          r=\"12\"\n          fill=\"hsl(var(--background))\"\n          stroke=\"hsl(var(--foreground))\"\n          strokeWidth={strokeWidth}\n        />\n      </g>\n    </svg>\n  )\n)\nGearShape.displayName = 'GearShape'\n\nexport const WavyRectangleShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      width={size}\n      height={size * 0.7}\n      viewBox=\"0 0 100 70\"\n      className={cn('text-accent', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path\n        d=\"M10 15 Q15 10 20 15 Q25 20 30 15 Q35 10 40 15 Q45 20 50 15 Q55 10 60 15 Q65 20 70 15 Q75 10 80 15 Q85 20 90 15 L90 20 Q95 25 90 30 Q85 35 90 40 Q95 45 90 50 Q85 55 90 55 L90 60 Q85 65 80 60 Q75 55 70 60 Q65 65 60 60 Q55 55 50 60 Q45 65 40 60 Q35 55 30 60 Q25 65 20 60 Q15 55 10 60 L10 55 Q5 50 10 45 Q15 40 10 35 Q5 30 10 25 Q15 20 10 20 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\"\n        strokeWidth={strokeWidth}\n      />\n    </svg>\n  )\n)\nWavyRectangleShape.displayName = 'WavyRectangleShape'\n\n// ============================================================================\n// GEOMETRIC ADDITIONS — Regular polygons and ellipse\n// ============================================================================\n\nexport const RhombusShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg ref={ref} width={size} height={size} viewBox=\"0 0 100 100\"\n      className={cn('text-info', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}>\n      <path d=\"M50 5 L92 50 L50 95 L8 50 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} />\n    </svg>\n  )\n)\nRhombusShape.displayName = 'RhombusShape'\n\nexport const EllipseShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg ref={ref} width={size} height={size * 0.7} viewBox=\"0 0 100 70\"\n      className={cn('text-primary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}>\n      <ellipse cx=\"50\" cy=\"35\" rx=\"46\" ry=\"28\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} />\n      <line x1=\"4\" y1=\"35\" x2=\"96\" y2=\"35\" stroke=\"hsl(var(--foreground))\" strokeWidth={Math.max(1, strokeWidth - 1)} strokeDasharray=\"4,4\" />\n      <line x1=\"50\" y1=\"7\" x2=\"50\" y2=\"63\" stroke=\"hsl(var(--foreground))\" strokeWidth={Math.max(1, strokeWidth - 1)} strokeDasharray=\"4,4\" />\n    </svg>\n  )\n)\nEllipseShape.displayName = 'EllipseShape'\n\nexport const HeptagonShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg ref={ref} width={size} height={size} viewBox=\"0 0 100 100\"\n      className={cn('text-secondary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}>\n      {/* 7 vertices: k=0..6, angle = k*2π/7 - π/2 */}\n      <path d=\"M50 5 L85 22 L94 60 L70 91 L30 91 L6 60 L15 22 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} />\n    </svg>\n  )\n)\nHeptagonShape.displayName = 'HeptagonShape'\n\nexport const DecagonShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg ref={ref} width={size} height={size} viewBox=\"0 0 100 100\"\n      className={cn('text-accent', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}>\n      {/* 10 vertices: k=0..9, angle = k*π/5 - π/2 */}\n      <path d=\"M50 5 L76 14 L93 36 L93 64 L76 86 L50 95 L24 86 L7 64 L7 36 L24 14 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} />\n    </svg>\n  )\n)\nDecagonShape.displayName = 'DecagonShape'\n\n// ============================================================================\n// MATHEMATICAL SHAPES — Fractals, impossible figures, topological forms\n// ============================================================================\n\n/** Koch Snowflake iteration-2 path helper (runs once at module level, pure math) */\nfunction buildKochPath(): string {\n  let pts = [{ x: 50, y: 8 }, { x: 91, y: 73 }, { x: 9, y: 73 }]\n  const cos60 = 0.5, sin60 = Math.sqrt(3) / 2\n  for (let iter = 0; iter < 2; iter++) {\n    const next: { x: number; y: number }[] = []\n    for (let j = 0; j < pts.length; j++) {\n      const a = pts[j], b = pts[(j + 1) % pts.length]\n      const dx = (b.x - a.x) / 3, dy = (b.y - a.y) / 3\n      const p1 = { x: a.x + dx, y: a.y + dy }\n      const p2 = { x: a.x + 2 * dx, y: a.y + 2 * dy }\n      const peak = { x: p1.x + dx * cos60 + dy * sin60, y: p1.y - dx * sin60 + dy * cos60 }\n      next.push(a, p1, peak, p2)\n    }\n    pts = next\n  }\n  return pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(' ') + ' Z'\n}\nconst KOCH_PATH = buildKochPath()\n\nexport const KochSnowflakeShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg ref={ref} width={size} height={size} viewBox=\"0 0 100 100\"\n      className={cn('text-info', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}>\n      <path d={KOCH_PATH}\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} strokeLinejoin=\"round\" />\n    </svg>\n  )\n)\nKochSnowflakeShape.displayName = 'KochSnowflakeShape'\n\nexport const PenroseTriangleShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg ref={ref} width={size} height={size} viewBox=\"0 0 100 100\"\n      className={cn('text-warning', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}>\n      {/* Top beam */}\n      <path d=\"M50 8 L62 8 L38 50 L26 50 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} strokeLinejoin=\"round\" />\n      {/* Bottom-right beam */}\n      <path d=\"M62 8 L88 52 L76 52 L50 8 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} strokeLinejoin=\"round\" />\n      {/* Bottom beam */}\n      <path d=\"M26 50 L38 50 L76 52 L88 52 L82 62 L20 62 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} strokeLinejoin=\"round\" />\n    </svg>\n  )\n)\nPenroseTriangleShape.displayName = 'PenroseTriangleShape'\n\n/** Trefoil knot projection: x = sin(t)+2sin(2t), y = cos(t)-2cos(2t) */\nfunction buildTrefoilPath(): string {\n  const n = 120, scale = 14\n  let d = ''\n  for (let i = 0; i <= n; i++) {\n    const t = (i / n) * 2 * Math.PI\n    const x = 50 + scale * (Math.sin(t) + 2 * Math.sin(2 * t))\n    const y = 50 + scale * (Math.cos(t) - 2 * Math.cos(2 * t))\n    d += `${i === 0 ? 'M' : 'L'}${x.toFixed(2)} ${y.toFixed(2)} `\n  }\n  return d + 'Z'\n}\nconst TREFOIL_PATH = buildTrefoilPath()\n\nexport const TrefoilShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg ref={ref} width={size} height={size} viewBox=\"0 0 100 100\"\n      className={cn('text-primary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}>\n      <path d={TREFOIL_PATH}\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} strokeLinejoin=\"round\" />\n    </svg>\n  )\n)\nTrefoilShape.displayName = 'TrefoilShape'\n\n/** Fibonacci spiral: 8 quarter-circle arcs with φ-scaled radii */\nfunction buildFibonacciPath(): string {\n  const scale = 1.9\n  const arcs: { cx: number; cy: number; r: number; startAngle: number }[] = [\n    { cx: 51, cy: 51, r: 1, startAngle: Math.PI },\n    { cx: 51, cy: 50, r: 1, startAngle: Math.PI / 2 },\n    { cx: 50, cy: 50, r: 2, startAngle: 0 },\n    { cx: 50, cy: 52, r: 3, startAngle: -Math.PI / 2 },\n    { cx: 53, cy: 52, r: 5, startAngle: Math.PI },\n    { cx: 53, cy: 47, r: 8, startAngle: Math.PI / 2 },\n    { cx: 45, cy: 47, r: 13, startAngle: 0 },\n    { cx: 45, cy: 60, r: 21, startAngle: -Math.PI / 2 },\n  ]\n  let d = ''\n  arcs.forEach(({ cx, cy, r, startAngle }, i) => {\n    const endAngle = startAngle - Math.PI / 2\n    const sx = cx + r * scale * Math.cos(startAngle)\n    const sy = cy + r * scale * Math.sin(startAngle)\n    const ex = cx + r * scale * Math.cos(endAngle)\n    const ey = cy + r * scale * Math.sin(endAngle)\n    const R = r * scale\n    if (i === 0) d += `M${sx.toFixed(1)} ${sy.toFixed(1)} `\n    d += `A${R.toFixed(1)} ${R.toFixed(1)} 0 0 0 ${ex.toFixed(1)} ${ey.toFixed(1)} `\n  })\n  return d\n}\nconst FIBONACCI_PATH = buildFibonacciPath()\n\nexport const FibonacciSpiralShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled: _filled = false, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg ref={ref} width={size} height={size} viewBox=\"0 0 100 100\"\n      className={cn('text-accent', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}>\n      <path d={FIBONACCI_PATH}\n        fill=\"none\"\n        stroke={color || 'currentColor'}\n        strokeWidth={strokeWidth} strokeLinecap=\"round\" />\n    </svg>\n  )\n)\nFibonacciSpiralShape.displayName = 'FibonacciSpiralShape'\n\nexport const MobiusStripShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg ref={ref} width={size} height={size * 0.6} viewBox=\"0 0 100 60\"\n      className={cn('text-secondary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}>\n      <path d=\"M5 15 Q15 5 30 10 Q50 18 70 8 Q85 3 95 15 Q100 25 95 35 Q85 47 70 42 Q50 35 30 45 Q15 52 5 42 Q0 35 5 25 Q5 20 5 15 Z\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} strokeLinejoin=\"round\" />\n      <path d=\"M38 28 Q50 22 62 28 Q50 34 38 28 Z\"\n        fill=\"hsl(var(--background))\" stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} />\n    </svg>\n  )\n)\nMobiusStripShape.displayName = 'MobiusStripShape'\n\nexport const TorusShape = React.forwardRef<SVGSVGElement, ShapeProps>(\n  ({ size = 100, strokeWidth = 3, filled = true, color, animation = 'none', speed = 'normal', className, ...props }, ref) => (\n    <svg ref={ref} width={size} height={size} viewBox=\"0 0 100 100\"\n      className={cn('text-primary', getAnimClass(animation, speed), className)}\n      aria-hidden=\"true\"\n      {...props}>\n      <ellipse cx=\"50\" cy=\"50\" rx=\"45\" ry=\"20\"\n        fill={filled ? (color || 'currentColor') : 'none'}\n        stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} />\n      <ellipse cx=\"50\" cy=\"50\" rx=\"20\" ry=\"9\"\n        fill=\"hsl(var(--background))\" stroke=\"hsl(var(--foreground))\" strokeWidth={strokeWidth} />\n      <ellipse cx=\"50\" cy=\"55\" rx=\"45\" ry=\"20\"\n        fill=\"none\" stroke=\"hsl(var(--foreground))\" strokeWidth={Math.max(1, strokeWidth - 1)} strokeDasharray=\"4,4\" />\n    </svg>\n  )\n)\nTorusShape.displayName = 'TorusShape'\n\n// ============================================================================\n// SHAPE CATEGORIES - Grouped exports for easy access\n// ============================================================================\n\nexport const GeometricShapes = {\n  TriangleShape,\n  DiamondBadge,\n  PentagonShape,\n  HexagonShape,\n  OctagonShape,\n  CrossShape,\n  TrapezoidShape,\n  ParallelogramShape,\n  RhombusShape,\n  EllipseShape,\n  HeptagonShape,\n  DecagonShape,\n}\n\nexport const MathematicalShapes = {\n  KochSnowflakeShape,\n  PenroseTriangleShape,\n  TrefoilShape,\n  FibonacciSpiralShape,\n  MobiusStripShape,\n  TorusShape,\n}\n\nexport const StarShapes = {\n  Star4Shape,\n  Star5Shape,\n  Star6Shape,\n  BurstShape,\n  ExplosionShape,\n  SplatShape,\n  LightningShape,\n}\n\nexport const OrganicShapes = {\n  BlobShape,\n  WaveShape,\n  CloudShape,\n  HeartShape,\n  AppleShape,\n}\n\nexport const CelestialShapes = {\n  SunShape,\n  CrescentShape,\n  RainbowShape,\n  PlanetShape,\n  UmbrellaShape,\n}\n\nexport const BadgeShapes = {\n  ArrowBadge,\n  ZigzagBanner,\n  RibbonShape,\n  ShieldShape,\n  TagShape,\n  PriceTagShape,\n  TicketShape,\n  CouponShape,\n  BookmarkShape,\n  FlagShape,\n  PillShape,\n  SealShape,\n  WavyRectangleShape,\n}\n\nexport const MechanicalShapes = {\n  GearShape,\n}\n\nexport const CommunicationShapes = {\n  SpeechBubble,\n  CursorShape,\n  EyeShape,\n}\n\nexport const DecorativeShapes = {\n  ScribbleCircle,\n  ScribbleUnderline,\n  PaperTearShape,\n}\n\nexport const TicketShapes = {\n  WavyRectangleShape,\n}\n\n// ============================================================================\n// ALL SHAPES - Combined export for backwards compatibility\n// ============================================================================\n\nexport const shapes = {\n  // Geometric\n  TriangleShape,\n  DiamondBadge,\n  PentagonShape,\n  HexagonShape,\n  OctagonShape,\n  CrossShape,\n  TrapezoidShape,\n  ParallelogramShape,\n  // Stars & Bursts\n  Star4Shape,\n  Star5Shape,\n  Star6Shape,\n  BurstShape,\n  ExplosionShape,\n  SplatShape,\n  LightningShape,\n  // Organic\n  BlobShape,\n  WaveShape,\n  CloudShape,\n  HeartShape,\n  AppleShape,\n  // Celestial & Nature\n  SunShape,\n  CrescentShape,\n  RainbowShape,\n  PlanetShape,\n  UmbrellaShape,\n  // Badges & UI\n  ArrowBadge,\n  ZigzagBanner,\n  RibbonShape,\n  ShieldShape,\n  TagShape,\n  PriceTagShape,\n  TicketShape,\n  CouponShape,\n  BookmarkShape,\n  FlagShape,\n  PillShape,\n  SealShape,\n  WavyRectangleShape,\n  // Communication\n  SpeechBubble,\n  CursorShape,\n  EyeShape,\n  // Decorative\n  ScribbleCircle,\n  ScribbleUnderline,\n  PaperTearShape,\n  // Mechanical\n  GearShape,\n  // Geometric additions\n  RhombusShape,\n  EllipseShape,\n  HeptagonShape,\n  DecagonShape,\n  // Mathematical\n  KochSnowflakeShape,\n  PenroseTriangleShape,\n  TrefoilShape,\n  FibonacciSpiralShape,\n  MobiusStripShape,\n  TorusShape,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/shapes.tsx"
    }
  ],
  "type": "registry:ui"
}