@delmaredigital/payload-puck 0.1.1 → 0.1.3

package/dist/AccordionClient.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/fields/shared.ts","../src/hooks/useScrollAnimation.ts","../src/components/AnimatedWrapper.tsx","../src/components/AccordionClient.tsx"],"names":["jsx","useState"],"mappings":"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","file":"AccordionClient.mjs","sourcesContent":["/**\n * Shared Puck Field Definitions\n *\n * Reusable field configurations and CSS utility maps for Puck components.\n * These ensure consistency across all components.\n */\n\nimport type { Field } from '@measured/puck'\nimport type React from 'react'\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Combines class names, filtering out falsy values\n * A simple alternative to clsx/classnames for bundling purposes\n */\nexport function cn(...classes: (string | boolean | undefined | null)[]): string {\n  return classes.filter(Boolean).join(' ')\n}\n\n// =============================================================================\n// Custom Style Types\n// =============================================================================\n\nexport interface ColorValue {\n  hex: string\n  opacity?: number\n}\n\nexport interface PaddingValue {\n  top: number\n  right: number\n  bottom: number\n  left: number\n  unit: 'px' | 'rem' | 'em' | '%'\n  /** Whether all sides are linked (sync together). Defaults to true if not set. */\n  linked?: boolean\n}\n\nexport interface BorderValue {\n  style: 'none' | 'solid' | 'dashed' | 'dotted'\n  width: number\n  color: ColorValue | null\n  radius: number\n  sides: {\n    top: boolean\n    right: boolean\n    bottom: boolean\n    left: boolean\n  }\n}\n\nexport interface WidthValue {\n  mode: 'full' | 'contained' | 'custom'\n  maxWidth: number\n  unit: 'px' | 'rem' | '%' | 'vw'\n  alignment: 'left' | 'center' | 'right'\n}\n\n// =============================================================================\n// Dimensions Types (Enhanced Width + Height)\n// =============================================================================\n\nexport type DimensionsUnit = 'px' | 'rem' | '%' | 'vw' | 'vh'\nexport type DimensionsMode = 'full' | 'contained' | 'custom'\nexport type ContentAlignment = 'left' | 'center' | 'right'\n\n/**\n * Represents a single dimension constraint (min or max for width or height)\n */\nexport interface DimensionConstraint {\n  value: number\n  unit: DimensionsUnit\n  enabled: boolean\n}\n\n/**\n * Full dimensions configuration value - replaces/extends WidthValue\n * Supports min/max constraints for both width and height\n */\nexport interface DimensionsValue {\n  /** Width mode: full (100%), contained (centered max-width), or custom */\n  mode: DimensionsMode\n  /** Content alignment within the container */\n  alignment: ContentAlignment\n  /** Minimum width constraint (optional) */\n  minWidth?: DimensionConstraint | null\n  /** Maximum width constraint (required for backward compat) */\n  maxWidth: DimensionConstraint\n  /** Minimum height constraint (optional) */\n  minHeight?: DimensionConstraint | null\n  /** Maximum height constraint (optional) */\n  maxHeight?: DimensionConstraint | null\n  /** UI state: whether advanced mode is expanded */\n  advancedMode?: boolean\n}\n\n/**\n * Type guard to detect legacy WidthValue format\n */\nexport function isLegacyWidthValue(value: unknown): value is WidthValue {\n  if (!value || typeof value !== 'object') return false\n  const v = value as Record<string, unknown>\n  return (\n    typeof v.maxWidth === 'number' &&\n    typeof v.unit === 'string' &&\n    typeof v.mode === 'string' &&\n    !('minWidth' in v) &&\n    !('minHeight' in v) &&\n    !('maxHeight' in v)\n  )\n}\n\n/**\n * Migrate legacy WidthValue to new DimensionsValue format\n */\nexport function migrateWidthValue(legacy: WidthValue): DimensionsValue {\n  return {\n    mode: legacy.mode,\n    alignment: legacy.alignment,\n    maxWidth: {\n      value: legacy.maxWidth,\n      unit: legacy.unit,\n      enabled: true,\n    },\n    advancedMode: false,\n  }\n}\n\n// =============================================================================\n// Background Types\n// =============================================================================\n\nexport interface GradientStop {\n  color: ColorValue\n  position: number // 0-100%\n}\n\nexport interface GradientValue {\n  type: 'linear' | 'radial'\n  angle: number // 0-360 for linear\n  stops: GradientStop[]\n  radialShape?: 'circle' | 'ellipse'\n  radialPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right'\n}\n\n/**\n * Gradient mask for fading images to transparent\n */\nexport interface GradientMask {\n  enabled: boolean\n  direction:\n    | 'to-top'\n    | 'to-bottom'\n    | 'to-left'\n    | 'to-right'\n    | 'to-top-left'\n    | 'to-top-right'\n    | 'to-bottom-left'\n    | 'to-bottom-right'\n    | 'from-center' // Radial gradient from center outward\n  startOpacity: number // 0-100, typically 100 (fully visible)\n  endOpacity: number // 0-100, typically 0 (fully transparent)\n  startPosition: number // 0-100%, where fade begins\n  endPosition: number // 0-100%, where fade ends\n}\n\nexport interface BackgroundImageValue {\n  media: import('./MediaField').MediaReference | null\n  size: 'cover' | 'contain' | 'auto'\n  position:\n    | 'center'\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n  repeat: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y'\n  attachment: 'scroll' | 'fixed'\n  /** Overall image opacity 0-100 (default 100) */\n  opacity?: number\n  /** Gradient mask for fade to transparent effect */\n  mask?: GradientMask\n}\n\n/**\n * Overlay layer for images (Divi-style)\n * Renders a color or gradient on top of the background image\n */\nexport interface BackgroundOverlay {\n  enabled: boolean\n  type: 'solid' | 'gradient'\n  solid?: ColorValue | null\n  gradient?: GradientValue | null\n}\n\nexport interface BackgroundValue {\n  type: 'none' | 'solid' | 'gradient' | 'image'\n  solid?: ColorValue | null\n  gradient?: GradientValue | null\n  image?: BackgroundImageValue | null\n  /** Overlay layer, only used when type === 'image' */\n  overlay?: BackgroundOverlay | null\n}\n\n// =============================================================================\n// Visibility Field\n// =============================================================================\n\nexport const visibilityField: Field = {\n  type: 'select',\n  label: 'Visibility',\n  options: [\n    { label: 'Always Visible', value: 'always' },\n    { label: 'Authenticated Users Only', value: 'authenticatedOnly' },\n    { label: 'Guests Only', value: 'guestOnly' },\n  ],\n}\n\n// =============================================================================\n// Button Style Field\n// =============================================================================\n\nexport const buttonStyleField: Field = {\n  type: 'select',\n  label: 'Button Style',\n  options: [\n    { label: 'Primary', value: 'primary' },\n    { label: 'Secondary', value: 'secondary' },\n    { label: 'Outline', value: 'outline' },\n    { label: 'Ghost', value: 'ghost' },\n    { label: 'Link', value: 'link' },\n  ],\n}\n\n// =============================================================================\n// Button Variant Field\n// =============================================================================\n\nexport const buttonVariantField: Field = {\n  type: 'select',\n  label: 'Button Variant',\n  options: [\n    { label: 'Default', value: 'default' },\n    { label: 'Destructive', value: 'destructive' },\n    { label: 'Outline', value: 'outline' },\n    { label: 'Secondary', value: 'secondary' },\n    { label: 'Ghost', value: 'ghost' },\n    { label: 'Link', value: 'link' },\n  ],\n}\n\n// =============================================================================\n// Button Size Field\n// =============================================================================\n\nexport const buttonSizeField: Field = {\n  type: 'select',\n  label: 'Size',\n  options: [\n    { label: 'Small', value: 'sm' },\n    { label: 'Default', value: 'default' },\n    { label: 'Large', value: 'lg' },\n    { label: 'Icon', value: 'icon' },\n  ],\n}\n\n// =============================================================================\n// Background Color Field (Preset Palette)\n// =============================================================================\n\nexport const backgroundColorField: Field = {\n  type: 'select',\n  label: 'Background Color',\n  options: [\n    { label: 'None', value: 'none' },\n    { label: 'Background', value: 'background' },\n    { label: 'Card', value: 'card' },\n    { label: 'Muted', value: 'muted' },\n    { label: 'Primary', value: 'primary' },\n    { label: 'Secondary', value: 'secondary' },\n    { label: 'Accent', value: 'accent' },\n  ],\n}\n\n// =============================================================================\n// Text Color Field (Preset Palette)\n// =============================================================================\n\nexport const textColorField: Field = {\n  type: 'select',\n  label: 'Text Color',\n  options: [\n    { label: 'Theme (Auto)', value: 'default' },\n    { label: 'Foreground', value: 'foreground' },\n    { label: 'Muted', value: 'muted-foreground' },\n    { label: 'Primary', value: 'primary' },\n    { label: 'Secondary', value: 'secondary-foreground' },\n  ],\n}\n\n// =============================================================================\n// Gap/Spacing Field\n// =============================================================================\n\nexport const gapField: Field = {\n  type: 'select',\n  label: 'Gap',\n  options: [\n    { label: 'None', value: 'none' },\n    { label: 'Extra Small', value: 'xs' },\n    { label: 'Small', value: 'sm' },\n    { label: 'Medium', value: 'md' },\n    { label: 'Large', value: 'lg' },\n    { label: 'Extra Large', value: 'xl' },\n    { label: '2XL', value: '2xl' },\n  ],\n}\n\n// =============================================================================\n// Shadow Field\n// =============================================================================\n\nexport const shadowField: Field = {\n  type: 'select',\n  label: 'Shadow',\n  options: [\n    { label: 'None', value: 'none' },\n    { label: 'Small', value: 'sm' },\n    { label: 'Medium', value: 'md' },\n    { label: 'Large', value: 'lg' },\n    { label: 'Extra Large', value: 'xl' },\n    { label: '2XL', value: '2xl' },\n  ],\n}\n\n// =============================================================================\n// Spacer Height Field\n// =============================================================================\n\nexport const spacerHeightField: Field = {\n  type: 'select',\n  label: 'Height',\n  options: [\n    { label: 'Extra Small (8px)', value: 'xs' },\n    { label: 'Small (16px)', value: 'sm' },\n    { label: 'Medium (32px)', value: 'md' },\n    { label: 'Large (48px)', value: 'lg' },\n    { label: 'Extra Large (64px)', value: 'xl' },\n    { label: '2XL (96px)', value: '2xl' },\n    { label: '3XL (128px)', value: '3xl' },\n  ],\n}\n\n// =============================================================================\n// Heading Level Field\n// =============================================================================\n\nexport const headingLevelField: Field = {\n  type: 'select',\n  label: 'Heading Level',\n  options: [\n    { label: 'H1', value: 'h1' },\n    { label: 'H2', value: 'h2' },\n    { label: 'H3', value: 'h3' },\n    { label: 'H4', value: 'h4' },\n    { label: 'H5', value: 'h5' },\n    { label: 'H6', value: 'h6' },\n  ],\n}\n\n// =============================================================================\n// Text Size Field\n// =============================================================================\n\nexport const textSizeField: Field = {\n  type: 'select',\n  label: 'Text Size',\n  options: [\n    { label: 'Extra Small', value: 'xs' },\n    { label: 'Small', value: 'sm' },\n    { label: 'Base', value: 'base' },\n    { label: 'Large', value: 'lg' },\n    { label: 'Extra Large', value: 'xl' },\n    { label: '2XL', value: '2xl' },\n  ],\n}\n\n// =============================================================================\n// Aspect Ratio Field\n// =============================================================================\n\nexport const aspectRatioField: Field = {\n  type: 'select',\n  label: 'Aspect Ratio',\n  options: [\n    { label: 'Auto', value: 'auto' },\n    { label: 'Square (1:1)', value: 'square' },\n    { label: 'Video (16:9)', value: 'video' },\n    { label: 'Portrait (3:4)', value: 'portrait' },\n    { label: 'Landscape (4:3)', value: 'landscape' },\n    { label: 'Wide (21:9)', value: 'wide' },\n  ],\n}\n\n// =============================================================================\n// Divider Style Field\n// =============================================================================\n\nexport const dividerStyleField: Field = {\n  type: 'select',\n  label: 'Style',\n  options: [\n    { label: 'Solid', value: 'solid' },\n    { label: 'Dashed', value: 'dashed' },\n    { label: 'Dotted', value: 'dotted' },\n  ],\n}\n\n// =============================================================================\n// Border Radius Field\n// =============================================================================\n\nexport const borderRadiusField: Field = {\n  type: 'select',\n  label: 'Border Radius',\n  options: [\n    { label: 'None', value: 'none' },\n    { label: 'Small', value: 'sm' },\n    { label: 'Medium', value: 'md' },\n    { label: 'Large', value: 'lg' },\n    { label: 'Extra Large', value: 'xl' },\n    { label: '2XL', value: '2xl' },\n    { label: 'Full', value: 'full' },\n  ],\n}\n\n// =============================================================================\n// Columns Count Field\n// =============================================================================\n\nexport const columnsCountField: Field = {\n  type: 'select',\n  label: 'Columns',\n  options: [\n    { label: '1 Column', value: '1' },\n    { label: '2 Columns', value: '2' },\n    { label: '3 Columns', value: '3' },\n    { label: '4 Columns', value: '4' },\n    { label: '5 Columns', value: '5' },\n    { label: '6 Columns', value: '6' },\n  ],\n}\n\n// =============================================================================\n// Flex Direction Field\n// =============================================================================\n\nexport const flexDirectionField: Field = {\n  type: 'select',\n  label: 'Direction',\n  options: [\n    { label: 'Row (Horizontal)', value: 'row' },\n    { label: 'Column (Vertical)', value: 'column' },\n    { label: 'Row Reverse', value: 'row-reverse' },\n    { label: 'Column Reverse', value: 'column-reverse' },\n  ],\n}\n\n// =============================================================================\n// Flex Wrap Field\n// =============================================================================\n\nexport const flexWrapField: Field = {\n  type: 'select',\n  label: 'Wrap',\n  options: [\n    { label: 'No Wrap', value: 'nowrap' },\n    { label: 'Wrap', value: 'wrap' },\n    { label: 'Wrap Reverse', value: 'wrap-reverse' },\n  ],\n}\n\n// =============================================================================\n// CSS Class Mappings\n// =============================================================================\n\n/**\n * Maps alignment values to Tailwind classes\n */\nexport const alignmentMap: Record<string, string> = {\n  left: 'text-left',\n  center: 'text-center',\n  right: 'text-right',\n}\n\n/**\n * Maps background color values to Tailwind classes\n */\nexport const bgColorMap: Record<string, string> = {\n  none: '',\n  background: 'bg-background',\n  card: 'bg-card',\n  muted: 'bg-muted',\n  primary: 'bg-primary',\n  secondary: 'bg-secondary',\n  accent: 'bg-accent',\n}\n\n/**\n * Maps text color values to Tailwind classes\n */\nexport const textColorMap: Record<string, string> = {\n  default: 'text-inherit',\n  foreground: 'text-foreground',\n  'muted-foreground': 'text-muted-foreground',\n  primary: 'text-primary',\n  'secondary-foreground': 'text-secondary-foreground',\n}\n\n/**\n * Maps gap values to Tailwind classes\n */\nexport const gapMap: Record<string, string> = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-4',\n  lg: 'gap-6',\n  xl: 'gap-8',\n  '2xl': 'gap-12',\n}\n\n/**\n * Maps shadow values to Tailwind classes\n */\nexport const shadowMap: Record<string, string> = {\n  none: '',\n  sm: 'shadow-sm',\n  md: 'shadow-md',\n  lg: 'shadow-lg',\n  xl: 'shadow-xl',\n  '2xl': 'shadow-2xl',\n}\n\n/**\n * Maps spacer height values to Tailwind classes\n */\nexport const spacerHeightMap: Record<string, string> = {\n  xs: 'h-2',\n  sm: 'h-4',\n  md: 'h-8',\n  lg: 'h-12',\n  xl: 'h-16',\n  '2xl': 'h-24',\n  '3xl': 'h-32',\n}\n\n/**\n * Maps heading level to Tailwind classes\n */\nexport const headingLevelMap: Record<string, string> = {\n  h1: 'text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight',\n  h2: 'text-3xl md:text-4xl font-bold tracking-tight',\n  h3: 'text-2xl md:text-3xl font-semibold',\n  h4: 'text-xl md:text-2xl font-semibold',\n  h5: 'text-lg md:text-xl font-medium',\n  h6: 'text-base md:text-lg font-medium',\n}\n\n/**\n * Maps text size to Tailwind classes\n */\nexport const textSizeMap: Record<string, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  base: 'text-base',\n  lg: 'text-lg',\n  xl: 'text-xl',\n  '2xl': 'text-2xl',\n}\n\n/**\n * Maps aspect ratio to Tailwind classes\n */\nexport const aspectRatioMap: Record<string, string> = {\n  auto: '',\n  square: 'aspect-square',\n  video: 'aspect-video',\n  portrait: 'aspect-[3/4]',\n  landscape: 'aspect-[4/3]',\n  wide: 'aspect-[21/9]',\n}\n\n/**\n * Maps divider style to Tailwind classes\n */\nexport const dividerStyleMap: Record<string, string> = {\n  solid: 'border-solid',\n  dashed: 'border-dashed',\n  dotted: 'border-dotted',\n}\n\n/**\n * Maps border radius to Tailwind classes\n */\nexport const borderRadiusMap: Record<string, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  full: 'rounded-full',\n}\n\n/**\n * Maps columns count to Tailwind grid classes (responsive)\n */\nexport const columnsCountMap: Record<string, string> = {\n  '1': 'grid-cols-1',\n  '2': 'grid-cols-1 md:grid-cols-2',\n  '3': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\n  '4': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',\n  '5': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',\n  '6': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',\n}\n\n/**\n * Maps flex direction to Tailwind classes\n */\nexport const flexDirectionMap: Record<string, string> = {\n  row: 'flex-row',\n  column: 'flex-col',\n  'row-reverse': 'flex-row-reverse',\n  'column-reverse': 'flex-col-reverse',\n}\n\n/**\n * Maps justify content to Tailwind classes\n * Supports both short (start) and full (flex-start) values\n */\nexport const justifyContentMap: Record<string, string> = {\n  start: 'justify-start',\n  'flex-start': 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  'flex-end': 'justify-end',\n  between: 'justify-between',\n  'space-between': 'justify-between',\n  around: 'justify-around',\n  'space-around': 'justify-around',\n  evenly: 'justify-evenly',\n  'space-evenly': 'justify-evenly',\n}\n\n/**\n * Maps align items to Tailwind classes\n * Supports both short (start) and full (flex-start) values\n */\nexport const alignItemsMap: Record<string, string> = {\n  start: 'items-start',\n  'flex-start': 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  'flex-end': 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline',\n}\n\n/**\n * Maps self-alignment to Tailwind classes (for grid/flex item alignment)\n * Used by components like TextImageSplit for vertical self-alignment\n */\nexport const selfAlignmentMap: Record<string, string> = {\n  start: 'self-start',\n  'flex-start': 'self-start',\n  center: 'self-center',\n  end: 'self-end',\n  'flex-end': 'self-end',\n  stretch: 'self-stretch',\n  auto: 'self-auto',\n}\n\n/**\n * Maps flex wrap to Tailwind classes\n */\nexport const flexWrapMap: Record<string, string> = {\n  nowrap: 'flex-nowrap',\n  wrap: 'flex-wrap',\n  'wrap-reverse': 'flex-wrap-reverse',\n}\n\n// =============================================================================\n// Custom Style Value Utilities\n// =============================================================================\n\n/**\n * Convert hex color to RGB components\n */\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const clean = hex.replace(/^#/, '')\n  if (clean.length !== 6) return null\n\n  const r = parseInt(clean.substring(0, 2), 16)\n  const g = parseInt(clean.substring(2, 4), 16)\n  const b = parseInt(clean.substring(4, 6), 16)\n\n  if (isNaN(r) || isNaN(g) || isNaN(b)) return null\n\n  return { r, g, b }\n}\n\n/**\n * Convert ColorValue to CSS rgba string\n */\nexport function colorValueToCSS(color: ColorValue | null | undefined): string | undefined {\n  if (!color?.hex) return undefined\n\n  const rgb = hexToRgb(color.hex)\n  if (!rgb) return color.hex\n\n  const opacity = (color.opacity ?? 100) / 100\n\n  if (opacity === 1) {\n    return color.hex\n  }\n\n  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`\n}\n\n/**\n * Convert PaddingValue to CSS padding string\n */\nexport function paddingValueToCSS(padding: PaddingValue | null | undefined): string | undefined {\n  if (!padding) return undefined\n\n  const { top, right, bottom, left, unit } = padding\n\n  if (top === right && right === bottom && bottom === left) {\n    return `${top}${unit}`\n  }\n\n  if (top === bottom && left === right) {\n    return `${top}${unit} ${right}${unit}`\n  }\n\n  if (left === right) {\n    return `${top}${unit} ${right}${unit} ${bottom}${unit}`\n  }\n\n  return `${top}${unit} ${right}${unit} ${bottom}${unit} ${left}${unit}`\n}\n\n/**\n * Convert PaddingValue to CSS margin string (same structure, different property)\n */\nexport function marginValueToCSS(margin: PaddingValue | null | undefined): string | undefined {\n  if (!margin) return undefined\n\n  const { top, right, bottom, left, unit } = margin\n\n  if (top === right && right === bottom && bottom === left) {\n    return `${top}${unit}`\n  }\n\n  if (top === bottom && left === right) {\n    return `${top}${unit} ${right}${unit}`\n  }\n\n  if (left === right) {\n    return `${top}${unit} ${right}${unit} ${bottom}${unit}`\n  }\n\n  return `${top}${unit} ${right}${unit} ${bottom}${unit} ${left}${unit}`\n}\n\n/**\n * Convert BorderValue to CSS properties object\n */\nexport function borderValueToCSS(border: BorderValue | null | undefined): React.CSSProperties | undefined {\n  if (!border || border.style === 'none') return undefined\n\n  const color = colorValueToCSS(border.color) || '#000000'\n  const style: React.CSSProperties = {}\n\n  if (border.sides.top) {\n    style.borderTopWidth = `${border.width}px`\n    style.borderTopStyle = border.style\n    style.borderTopColor = color\n  }\n\n  if (border.sides.right) {\n    style.borderRightWidth = `${border.width}px`\n    style.borderRightStyle = border.style\n    style.borderRightColor = color\n  }\n\n  if (border.sides.bottom) {\n    style.borderBottomWidth = `${border.width}px`\n    style.borderBottomStyle = border.style\n    style.borderBottomColor = color\n  }\n\n  if (border.sides.left) {\n    style.borderLeftWidth = `${border.width}px`\n    style.borderLeftStyle = border.style\n    style.borderLeftColor = color\n  }\n\n  if (border.radius > 0) {\n    style.borderRadius = `${border.radius}px`\n  }\n\n  return Object.keys(style).length > 0 ? style : undefined\n}\n\n/**\n * Convert WidthValue to CSS properties object\n */\nexport function widthValueToCSS(width: WidthValue | null | undefined): React.CSSProperties | undefined {\n  if (!width) return undefined\n\n  const style: React.CSSProperties = {}\n\n  if (width.mode === 'full') {\n    style.width = '100%'\n    style.maxWidth = '100%'\n  } else {\n    style.maxWidth = `${width.maxWidth}${width.unit}`\n    style.width = '100%'\n  }\n\n  switch (width.alignment) {\n    case 'left':\n      style.marginLeft = '0'\n      style.marginRight = 'auto'\n      break\n    case 'center':\n      style.marginLeft = 'auto'\n      style.marginRight = 'auto'\n      break\n    case 'right':\n      style.marginLeft = 'auto'\n      style.marginRight = '0'\n      break\n  }\n\n  return style\n}\n\n/**\n * Convert DimensionsValue to CSS properties object\n * Handles both legacy WidthValue and new DimensionsValue formats\n */\nexport function dimensionsValueToCSS(\n  dimensions: DimensionsValue | WidthValue | null | undefined\n): React.CSSProperties | undefined {\n  if (!dimensions) return undefined\n\n  // Handle legacy WidthValue format\n  if (isLegacyWidthValue(dimensions)) {\n    return widthValueToCSS(dimensions)\n  }\n\n  const dim = dimensions as DimensionsValue\n  const style: React.CSSProperties = {}\n\n  // Width handling based on mode\n  if (dim.mode === 'full') {\n    style.width = '100%'\n    style.maxWidth = '100%'\n  } else {\n    style.width = '100%'\n\n    // Max Width (required)\n    if (dim.maxWidth?.enabled !== false && dim.maxWidth?.value > 0) {\n      style.maxWidth = `${dim.maxWidth.value}${dim.maxWidth.unit}`\n    }\n\n    // Min Width (optional)\n    if (dim.minWidth?.enabled && dim.minWidth.value > 0) {\n      style.minWidth = `${dim.minWidth.value}${dim.minWidth.unit}`\n    }\n  }\n\n  // Height handling (applies to all modes)\n  if (dim.minHeight?.enabled && dim.minHeight.value > 0) {\n    style.minHeight = `${dim.minHeight.value}${dim.minHeight.unit}`\n  }\n\n  if (dim.maxHeight?.enabled && dim.maxHeight.value > 0) {\n    style.maxHeight = `${dim.maxHeight.value}${dim.maxHeight.unit}`\n  }\n\n  // Alignment (via margin)\n  switch (dim.alignment) {\n    case 'left':\n      style.marginLeft = '0'\n      style.marginRight = 'auto'\n      break\n    case 'center':\n      style.marginLeft = 'auto'\n      style.marginRight = 'auto'\n      break\n    case 'right':\n      style.marginLeft = 'auto'\n      style.marginRight = '0'\n      break\n  }\n\n  return style\n}\n\n/**\n * Get human-readable summary of dimensions\n */\nexport function getDimensionsSummary(dim: DimensionsValue | null | undefined): string {\n  if (!dim) return 'auto'\n\n  if (dim.mode === 'full') return '100%'\n\n  const parts: string[] = []\n\n  if (dim.maxWidth?.enabled && dim.maxWidth.value > 0) {\n    parts.push(`max: ${dim.maxWidth.value}${dim.maxWidth.unit}`)\n  }\n\n  if (dim.minWidth?.enabled && dim.minWidth.value > 0) {\n    parts.push(`min: ${dim.minWidth.value}${dim.minWidth.unit}`)\n  }\n\n  if (dim.maxHeight?.enabled && dim.maxHeight.value > 0) {\n    parts.push(`h-max: ${dim.maxHeight.value}${dim.maxHeight.unit}`)\n  }\n\n  if (dim.minHeight?.enabled && dim.minHeight.value > 0) {\n    parts.push(`h-min: ${dim.minHeight.value}${dim.minHeight.unit}`)\n  }\n\n  return parts.length > 0 ? parts.join(' | ') : 'auto'\n}\n\n/**\n * Combined style generator for layout components\n */\nexport function getCustomStyleObject(options: {\n  backgroundColor?: ColorValue | null\n  textColor?: ColorValue | null\n  padding?: PaddingValue | null\n  margin?: PaddingValue | null\n  border?: BorderValue | null\n  width?: WidthValue | null\n}): React.CSSProperties {\n  const style: React.CSSProperties = {}\n\n  const bgColor = colorValueToCSS(options.backgroundColor)\n  if (bgColor) {\n    style.backgroundColor = bgColor\n  }\n\n  const txtColor = colorValueToCSS(options.textColor)\n  if (txtColor) {\n    style.color = txtColor\n  }\n\n  const paddingCSS = paddingValueToCSS(options.padding)\n  if (paddingCSS) {\n    style.padding = paddingCSS\n  }\n\n  const marginCSS = marginValueToCSS(options.margin)\n  if (marginCSS) {\n    style.margin = marginCSS\n  }\n\n  const borderCSS = borderValueToCSS(options.border)\n  if (borderCSS) {\n    Object.assign(style, borderCSS)\n  }\n\n  const widthCSS = widthValueToCSS(options.width)\n  if (widthCSS) {\n    Object.assign(style, widthCSS)\n  }\n\n  return style\n}\n\n/**\n * Convert GradientValue to CSS gradient string\n */\nexport function gradientValueToCSS(gradient: GradientValue | null | undefined): string {\n  if (!gradient?.stops || gradient.stops.length === 0) {\n    return 'transparent'\n  }\n\n  // Sort stops by position\n  const sortedStops = [...gradient.stops].sort((a, b) => a.position - b.position)\n\n  // Convert stops to CSS format\n  const stopsCSS = sortedStops\n    .map((stop) => {\n      const color = colorValueToCSS(stop.color) || 'transparent'\n      return `${color} ${stop.position}%`\n    })\n    .join(', ')\n\n  if (gradient.type === 'radial') {\n    const shape = gradient.radialShape || 'circle'\n    const position = gradient.radialPosition || 'center'\n    return `radial-gradient(${shape} at ${position}, ${stopsCSS})`\n  }\n\n  // Linear gradient\n  return `linear-gradient(${gradient.angle}deg, ${stopsCSS})`\n}\n\n/**\n * Convert position value to CSS background-position\n */\nfunction positionToCSS(\n  position: BackgroundImageValue['position'] | undefined\n): string {\n  const positionMap: Record<NonNullable<BackgroundImageValue['position']>, string> = {\n    center: 'center',\n    top: 'top',\n    bottom: 'bottom',\n    left: 'left',\n    right: 'right',\n    'top-left': 'top left',\n    'top-right': 'top right',\n    'bottom-left': 'bottom left',\n    'bottom-right': 'bottom right',\n  }\n  return position ? positionMap[position] || 'center' : 'center'\n}\n\n/**\n * Convert GradientMask direction to CSS gradient direction\n */\nfunction maskDirectionToCSS(direction: GradientMask['direction']): string {\n  const directionMap: Record<GradientMask['direction'], string> = {\n    'to-top': 'to top',\n    'to-bottom': 'to bottom',\n    'to-left': 'to left',\n    'to-right': 'to right',\n    'to-top-left': 'to top left',\n    'to-top-right': 'to top right',\n    'to-bottom-left': 'to bottom left',\n    'to-bottom-right': 'to bottom right',\n    'from-center': 'radial', // Not used for linear, handled separately in maskToCSS\n  }\n  return directionMap[direction] || 'to bottom'\n}\n\n/**\n * Convert GradientMask to CSS mask-image string\n */\nfunction maskToCSS(mask: GradientMask): string {\n  const startAlpha = (mask.startOpacity ?? 100) / 100\n  const endAlpha = (mask.endOpacity ?? 0) / 100\n\n  // Handle radial gradient for \"from-center\"\n  if (mask.direction === 'from-center') {\n    return `radial-gradient(circle at center, rgba(0,0,0,${startAlpha}) ${mask.startPosition}%, rgba(0,0,0,${endAlpha}) ${mask.endPosition}%)`\n  }\n\n  // Linear gradient for directional fades\n  const direction = maskDirectionToCSS(mask.direction)\n  return `linear-gradient(${direction}, rgba(0,0,0,${startAlpha}) ${mask.startPosition}%, rgba(0,0,0,${endAlpha}) ${mask.endPosition}%)`\n}\n\n/**\n * Result of background CSS conversion\n * Includes both styles and metadata for consumer components\n */\nexport interface BackgroundCSSResult {\n  /** CSS properties to apply directly */\n  styles: React.CSSProperties\n  /** Image opacity (0-1) - consumer should apply via wrapper if needed */\n  imageOpacity?: number\n}\n\n/**\n * Convert BackgroundValue to CSS properties object\n * Returns both styles and metadata for advanced features like image opacity\n */\nexport function backgroundValueToCSS(\n  bg: BackgroundValue | null | undefined\n): React.CSSProperties {\n  if (!bg || bg.type === 'none') {\n    return {}\n  }\n\n  const style: React.CSSProperties = {}\n\n  switch (bg.type) {\n    case 'solid':\n      if (bg.solid?.hex) {\n        style.backgroundColor = colorValueToCSS(bg.solid)\n      }\n      break\n\n    case 'gradient':\n      if (bg.gradient && bg.gradient.stops && bg.gradient.stops.length > 0) {\n        style.background = gradientValueToCSS(bg.gradient)\n      }\n      break\n\n    case 'image':\n      if (bg.image?.media?.url) {\n        const imageUrl = bg.image.media.url\n        const size = bg.image.size || 'cover'\n        const position = positionToCSS(bg.image.position)\n        const repeat = bg.image.repeat || 'no-repeat'\n        const attachment = bg.image.attachment || 'scroll'\n\n        // Check if overlay is enabled\n        if (bg.overlay?.enabled) {\n          // Layer overlay on top of image using CSS multiple backgrounds\n          // Use only backgroundImage to avoid shorthand/longhand conflicts\n          const overlayCSS =\n            bg.overlay.type === 'solid'\n              ? colorValueToCSS(bg.overlay.solid)\n              : gradientValueToCSS(bg.overlay.gradient)\n\n          // CSS background layering: first layer is on top\n          // For solid color overlay, we need to use a gradient to make it a proper layer\n          if (bg.overlay.type === 'solid' && overlayCSS) {\n            style.backgroundImage = `linear-gradient(${overlayCSS}, ${overlayCSS}), url(${imageUrl})`\n          } else {\n            style.backgroundImage = `${overlayCSS}, url(${imageUrl})`\n          }\n          // Use comma-separated values for each layer\n          style.backgroundSize = `auto, ${size}`\n          style.backgroundPosition = `center, ${position}`\n          style.backgroundRepeat = `no-repeat, ${repeat}`\n          style.backgroundAttachment = `scroll, ${attachment}`\n        } else {\n          // No overlay, just the image\n          style.backgroundImage = `url(${imageUrl})`\n          style.backgroundSize = size\n          style.backgroundPosition = position\n          style.backgroundRepeat = repeat\n          style.backgroundAttachment = attachment\n        }\n\n        // Apply gradient mask if enabled\n        if (bg.image.mask?.enabled) {\n          const maskCSS = maskToCSS(bg.image.mask)\n          style.maskImage = maskCSS\n          // Webkit prefix for Safari support\n          ;(style as Record<string, string>).WebkitMaskImage = maskCSS\n        }\n      }\n      break\n  }\n\n  return style\n}\n\n/**\n * Get image opacity from BackgroundValue (for consumer wrapper components)\n * Returns undefined if no image or opacity is 100%\n */\nexport function getBackgroundImageOpacity(\n  bg: BackgroundValue | null | undefined\n): number | undefined {\n  if (!bg || bg.type !== 'image' || !bg.image) return undefined\n  const opacity = bg.image.opacity ?? 100\n  return opacity < 100 ? opacity / 100 : undefined\n}\n\n/**\n * Check if any custom style values are set\n */\nexport function hasCustomStyles(options: {\n  backgroundColor?: ColorValue | null\n  textColor?: ColorValue | null\n  padding?: PaddingValue | null\n  margin?: PaddingValue | null\n  border?: BorderValue | null\n  width?: WidthValue | null\n}): boolean {\n  return !!(\n    options.backgroundColor?.hex ||\n    options.textColor?.hex ||\n    options.padding ||\n    options.margin ||\n    (options.border && options.border.style !== 'none') ||\n    options.width\n  )\n}\n\n// =============================================================================\n// Transform Types\n// =============================================================================\n\nexport type TransformOrigin =\n  | 'center'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\nexport interface TransformValue {\n  rotate: number // -360 to 360\n  scaleX: number // 0.1 to 3\n  scaleY: number // 0.1 to 3\n  scaleLocked: boolean // When true, X and Y sync\n  skewX: number // -45 to 45\n  skewY: number // -45 to 45\n  translateX: number\n  translateY: number\n  translateUnit: 'px' | 'rem' | '%'\n  origin: TransformOrigin\n\n  // Optional 3D\n  enable3D: boolean\n  perspective?: number // 100-2000px\n  rotateX?: number // -180 to 180\n  rotateY?: number // -180 to 180\n}\n\n/**\n * Default transform value\n */\nexport const DEFAULT_TRANSFORM: TransformValue = {\n  rotate: 0,\n  scaleX: 1,\n  scaleY: 1,\n  scaleLocked: true,\n  skewX: 0,\n  skewY: 0,\n  translateX: 0,\n  translateY: 0,\n  translateUnit: 'px',\n  origin: 'center',\n  enable3D: false,\n  perspective: 1000,\n  rotateX: 0,\n  rotateY: 0,\n}\n\n/**\n * Convert TransformOrigin to CSS transform-origin value\n */\nfunction transformOriginToCSS(origin: TransformOrigin): string {\n  const originMap: Record<TransformOrigin, string> = {\n    center: 'center',\n    top: 'top',\n    bottom: 'bottom',\n    left: 'left',\n    right: 'right',\n    'top-left': 'top left',\n    'top-right': 'top right',\n    'bottom-left': 'bottom left',\n    'bottom-right': 'bottom right',\n  }\n  return originMap[origin] || 'center'\n}\n\n/**\n * Convert TransformValue to CSS properties object\n */\nexport function transformValueToCSS(\n  transform: TransformValue | null | undefined\n): React.CSSProperties | undefined {\n  if (!transform) return undefined\n\n  const style: React.CSSProperties = {}\n  const transforms: string[] = []\n\n  // Handle 3D perspective\n  if (transform.enable3D && transform.perspective) {\n    style.perspective = `${transform.perspective}px`\n  }\n\n  // Build transform string\n  // Translate\n  if (transform.translateX !== 0 || transform.translateY !== 0) {\n    transforms.push(\n      `translate(${transform.translateX}${transform.translateUnit}, ${transform.translateY}${transform.translateUnit})`\n    )\n  }\n\n  // Rotate (2D)\n  if (transform.rotate !== 0) {\n    transforms.push(`rotate(${transform.rotate}deg)`)\n  }\n\n  // 3D rotations\n  if (transform.enable3D) {\n    if (transform.rotateX && transform.rotateX !== 0) {\n      transforms.push(`rotateX(${transform.rotateX}deg)`)\n    }\n    if (transform.rotateY && transform.rotateY !== 0) {\n      transforms.push(`rotateY(${transform.rotateY}deg)`)\n    }\n  }\n\n  // Scale\n  if (transform.scaleX !== 1 || transform.scaleY !== 1) {\n    if (transform.scaleX === transform.scaleY) {\n      transforms.push(`scale(${transform.scaleX})`)\n    } else {\n      transforms.push(`scale(${transform.scaleX}, ${transform.scaleY})`)\n    }\n  }\n\n  // Skew\n  if (transform.skewX !== 0 || transform.skewY !== 0) {\n    if (transform.skewX !== 0 && transform.skewY !== 0) {\n      transforms.push(`skew(${transform.skewX}deg, ${transform.skewY}deg)`)\n    } else if (transform.skewX !== 0) {\n      transforms.push(`skewX(${transform.skewX}deg)`)\n    } else {\n      transforms.push(`skewY(${transform.skewY}deg)`)\n    }\n  }\n\n  // Apply transform if we have any\n  if (transforms.length > 0) {\n    style.transform = transforms.join(' ')\n  }\n\n  // Transform origin\n  if (transform.origin !== 'center') {\n    style.transformOrigin = transformOriginToCSS(transform.origin)\n  }\n\n  // Add transform-style for 3D\n  if (transform.enable3D) {\n    style.transformStyle = 'preserve-3d'\n  }\n\n  return Object.keys(style).length > 0 ? style : undefined\n}\n\n// =============================================================================\n// Responsive Field Types\n// =============================================================================\n\nexport type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/**\n * Responsive value that can have different values at different breakpoints.\n * XS (extra small) is required, other breakpoints are optional overrides.\n */\nexport interface ResponsiveValue<T> {\n  xs: T\n  sm?: T\n  md?: T\n  lg?: T\n  xl?: T\n}\n\n/**\n * Breakpoint configuration with labels and pixel values\n */\nexport const BREAKPOINTS: Array<{\n  key: Breakpoint\n  label: string\n  minWidth: number | null\n}> = [\n  { key: 'xs', label: 'XS', minWidth: null },\n  { key: 'sm', label: 'SM', minWidth: 640 },\n  { key: 'md', label: 'MD', minWidth: 768 },\n  { key: 'lg', label: 'LG', minWidth: 1024 },\n  { key: 'xl', label: 'XL', minWidth: 1280 },\n]\n\n// =============================================================================\n// Responsive CSS Helpers\n// =============================================================================\n\n/**\n * Type guard to check if a value is a ResponsiveValue (has breakpoint structure)\n */\nexport function isResponsiveValue<T>(value: unknown): value is ResponsiveValue<T> {\n  if (!value || typeof value !== 'object') return false\n  return 'xs' in value\n}\n\n/**\n * Converts a camelCase property name to kebab-case CSS property\n */\nfunction camelToKebab(str: string): string {\n  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)\n}\n\n/**\n * Converts React.CSSProperties to a CSS string for use in style tags\n */\nexport function cssPropertiesToString(styles: React.CSSProperties): string {\n  return Object.entries(styles)\n    .filter(([, value]) => value !== undefined && value !== null && value !== '')\n    .map(([key, value]) => `${camelToKebab(key)}: ${value}`)\n    .join('; ')\n}\n\n/**\n * Result of converting a responsive value to CSS\n */\nexport interface ResponsiveCSSResult {\n  /** Base styles to apply as inline styles */\n  baseStyles: React.CSSProperties\n  /** CSS media queries to render in a <style> tag */\n  mediaQueryCSS: string\n}\n\n/**\n * Converts a ResponsiveValue to CSS with media queries.\n * Works with any value type that has a CSS converter function.\n *\n * @param value - The responsive or non-responsive value\n * @param converter - Function to convert the value type to CSSProperties\n * @param uniqueId - Unique class name for targeting in media queries\n * @returns Object with baseStyles (inline) and mediaQueryCSS (for <style> tag)\n *\n * @example\n * ```tsx\n * const { baseStyles, mediaQueryCSS } = responsiveValueToCSS(\n *   dimensions,\n *   dimensionsValueToCSS,\n *   'container-abc123'\n * )\n *\n * return (\n *   <>\n *     {mediaQueryCSS && <style>{mediaQueryCSS}</style>}\n *     <div className=\"container-abc123\" style={baseStyles}>...</div>\n *   </>\n * )\n * ```\n */\nexport function responsiveValueToCSS<T>(\n  value: ResponsiveValue<T> | T | null | undefined,\n  converter: (v: T) => React.CSSProperties | undefined,\n  uniqueId: string\n): ResponsiveCSSResult {\n  // Handle null/undefined\n  if (value === null || value === undefined) {\n    return { baseStyles: {}, mediaQueryCSS: '' }\n  }\n\n  // If not responsive (single value), return as base styles only\n  if (!isResponsiveValue<T>(value)) {\n    const styles = converter(value as T)\n    return {\n      baseStyles: styles || {},\n      mediaQueryCSS: '',\n    }\n  }\n\n  // Generate media queries for each breakpoint\n  const mediaQueries: string[] = []\n  let baseStyles: React.CSSProperties = {}\n\n  BREAKPOINTS.forEach((bp) => {\n    const bpValue = value[bp.key]\n    if (bpValue === undefined) return\n\n    const cssProps = converter(bpValue)\n    if (!cssProps) return\n\n    if (bp.key === 'xs') {\n      baseStyles = cssProps\n    } else {\n      const styleString = cssPropertiesToString(cssProps)\n      if (styleString) {\n        mediaQueries.push(\n          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { ${styleString} } }`\n        )\n      }\n    }\n  })\n\n  return { baseStyles, mediaQueryCSS: mediaQueries.join('\\n') }\n}\n\n/**\n * Visibility value for show/hide per breakpoint\n */\nexport interface VisibilityValue {\n  /** XS (extra small) visibility - true = visible, false = hidden (default: true) */\n  xs: boolean\n  /** Small screens (640px+) */\n  sm?: boolean\n  /** Override for medium screens (768px+) */\n  md?: boolean\n  /** Override for large screens (1024px+) */\n  lg?: boolean\n  /** Override for extra large screens (1280px+) */\n  xl?: boolean\n}\n\n/**\n * Default visibility value (visible at all breakpoints)\n */\nexport const DEFAULT_VISIBILITY: VisibilityValue = {\n  xs: true,\n  sm: true,\n  md: true,\n  lg: true,\n  xl: true,\n}\n\n/**\n * Converts a VisibilityValue to CSS with display: none media queries.\n * Each breakpoint is independent - generates targeted media queries for hidden breakpoints.\n *\n * @param visibility - The visibility settings per breakpoint\n * @param uniqueId - Unique class name for targeting in media queries\n * @returns CSS media queries string for hiding at specific breakpoints\n */\nexport function visibilityValueToCSS(\n  visibility: VisibilityValue | null | undefined,\n  uniqueId: string\n): string {\n  if (!visibility) return ''\n\n  const mediaQueries: string[] = []\n\n  // Breakpoint min-widths for range calculations\n  const breakpointWidths: Record<Breakpoint, number | null> = {\n    xs: null, // 0px\n    sm: 640,\n    md: 768,\n    lg: 1024,\n    xl: 1280,\n  }\n\n  // Get next breakpoint's min-width for max-width calculation\n  const getNextBreakpointWidth = (bp: Breakpoint): number | null => {\n    const order: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl']\n    const index = order.indexOf(bp)\n    if (index === -1 || index === order.length - 1) return null\n    return breakpointWidths[order[index + 1]]\n  }\n\n  // XS (0 to 639px)\n  if (visibility.xs === false) {\n    const nextWidth = getNextBreakpointWidth('xs')\n    if (nextWidth) {\n      mediaQueries.push(`@media (max-width: ${nextWidth - 1}px) { .${uniqueId} { display: none; } }`)\n    } else {\n      mediaQueries.push(`.${uniqueId} { display: none; }`)\n    }\n  }\n\n  // Other breakpoints (sm, md, lg, xl)\n  BREAKPOINTS.slice(1).forEach((bp) => {\n    if (visibility[bp.key] === false) {\n      const minWidth = breakpointWidths[bp.key]\n      const maxWidth = getNextBreakpointWidth(bp.key)\n\n      if (minWidth && maxWidth) {\n        // Range query (e.g., sm: 640-767px)\n        mediaQueries.push(\n          `@media (min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px) { .${uniqueId} { display: none; } }`\n        )\n      } else if (minWidth) {\n        // Last breakpoint (xl: 1280px+)\n        mediaQueries.push(\n          `@media (min-width: ${minWidth}px) { .${uniqueId} { display: none; } }`\n        )\n      }\n    }\n  })\n\n  return mediaQueries.join('\\n')\n}\n\n// =============================================================================\n// Animation Types\n// =============================================================================\n\n/** Standard CSS easing functions */\nexport type EasingFunction = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'\n\n/** Advanced easing with spring/bounce effects via cubic-bezier approximations */\nexport type AdvancedEasingFunction =\n  | EasingFunction\n  | 'spring'\n  | 'spring-gentle'\n  | 'bounce'\n  | 'bounce-in'\n  | 'bounce-out'\n  | 'back-in'\n  | 'back-out'\n  | 'back-in-out'\n  | 'elastic'\n\n/** Map advanced easing to CSS cubic-bezier values */\nexport const EASING_CSS_MAP: Record<AdvancedEasingFunction, string> = {\n  linear: 'linear',\n  ease: 'ease',\n  'ease-in': 'ease-in',\n  'ease-out': 'ease-out',\n  'ease-in-out': 'ease-in-out',\n  spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n  'spring-gentle': 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n  bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n  'bounce-in': 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',\n  'bounce-out': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n  'back-in': 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',\n  'back-out': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n  'back-in-out': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n  elastic: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)',\n}\n\n/** Transform origin for animations (3x3 grid) */\nexport type AnimationOrigin =\n  | 'center'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\n/** Stagger direction for child animations */\nexport type StaggerDirection = 'forward' | 'reverse' | 'center' | 'edges'\n\n/** Configuration for staggered child animations */\nexport interface StaggerConfig {\n  enabled: boolean\n  /** Delay between each child element (ms) */\n  delay: number\n  /** Maximum total delay to prevent very long animations */\n  maxDelay?: number\n  /** Direction of stagger effect */\n  direction: StaggerDirection\n}\n\n/** Animation categories for UI organization */\nexport type AnimationCategory =\n  | 'fade'\n  | 'scale'\n  | 'slide'\n  | 'blur'\n  | 'rotate'\n  | 'bounce'\n  | 'flip'\n  | 'zoom'\n\n/**\n * Extended entrance animation presets (27 total)\n * Organized by category for the UI dropdown\n */\nexport type EntranceAnimation =\n  // None\n  | 'none'\n  // Fade (6)\n  | 'fade-in'\n  | 'fade-up'\n  | 'fade-down'\n  | 'fade-left'\n  | 'fade-right'\n  | 'fade-scale'\n  // Scale (4)\n  | 'scale-in'\n  | 'scale-up'\n  | 'scale-down'\n  | 'scale-out'\n  // Slide (4)\n  | 'slide-up'\n  | 'slide-down'\n  | 'slide-left'\n  | 'slide-right'\n  // Blur (3)\n  | 'blur-in'\n  | 'blur-up'\n  | 'blur-down'\n  // Rotate (3)\n  | 'rotate-in'\n  | 'rotate-up'\n  | 'rotate-down'\n  // Bounce (3)\n  | 'bounce-in'\n  | 'bounce-up'\n  | 'bounce-down'\n  // Flip (2)\n  | 'flip-x'\n  | 'flip-y'\n  // Zoom (2)\n  | 'zoom-in'\n  | 'zoom-out'\n\n/**\n * Animation presets organized by category for UI\n */\nexport const ANIMATION_CATEGORIES: Array<{\n  category: AnimationCategory | 'none'\n  label: string\n  animations: EntranceAnimation[]\n}> = [\n  { category: 'none', label: 'None', animations: ['none'] },\n  { category: 'fade', label: 'Fade', animations: ['fade-in', 'fade-up', 'fade-down', 'fade-left', 'fade-right', 'fade-scale'] },\n  { category: 'scale', label: 'Scale', animations: ['scale-in', 'scale-up', 'scale-down', 'scale-out'] },\n  { category: 'slide', label: 'Slide', animations: ['slide-up', 'slide-down', 'slide-left', 'slide-right'] },\n  { category: 'blur', label: 'Blur', animations: ['blur-in', 'blur-up', 'blur-down'] },\n  { category: 'rotate', label: 'Rotate', animations: ['rotate-in', 'rotate-up', 'rotate-down'] },\n  { category: 'bounce', label: 'Bounce', animations: ['bounce-in', 'bounce-up', 'bounce-down'] },\n  { category: 'flip', label: 'Flip', animations: ['flip-x', 'flip-y'] },\n  { category: 'zoom', label: 'Zoom', animations: ['zoom-in', 'zoom-out'] },\n]\n\nexport interface AnimationValue {\n  mode: 'preset' | 'custom'\n\n  // Preset mode\n  entrance?: EntranceAnimation\n  entranceDuration?: number // ms\n  entranceDelay?: number // ms\n\n  // Intensity controls (context-aware based on animation type)\n  /** Distance for translate animations (8-200px) */\n  distance?: number\n  /** Starting scale for scale animations (0.1-2) */\n  scaleFrom?: number\n  /** Rotation angle for rotate animations (-180 to 180deg) */\n  rotateAngle?: number\n  /** Blur amount for blur animations (0-50px) */\n  blurAmount?: number\n\n  // Transform origin (affects scale/rotate)\n  origin?: AnimationOrigin\n\n  // Advanced easing\n  easing?: AdvancedEasingFunction\n\n  // Stagger for child elements\n  stagger?: StaggerConfig\n\n  // Custom transition mode\n  duration?: number // 0-2000ms\n  delay?: number // 0-2000ms\n\n  // Scroll trigger\n  triggerOnScroll?: boolean\n  triggerThreshold?: number // 0-1\n  triggerOnce?: boolean\n  /** Margin around viewport for earlier/later triggering (e.g., \"0px 0px -100px 0px\") */\n  triggerMargin?: string\n}\n\n// =============================================================================\n// Animation CSS Utilities\n// =============================================================================\n\n/**\n * Convert AnimationOrigin to CSS transform-origin value\n */\nfunction animationOriginToCSS(origin: AnimationOrigin | undefined): string {\n  if (!origin) return 'center'\n  const originMap: Record<AnimationOrigin, string> = {\n    center: 'center',\n    top: 'top',\n    bottom: 'bottom',\n    left: 'left',\n    right: 'right',\n    'top-left': 'top left',\n    'top-right': 'top right',\n    'bottom-left': 'bottom left',\n    'bottom-right': 'bottom right',\n  }\n  return originMap[origin] || 'center'\n}\n\n/**\n * Convert AnimationValue to CSS transition property (for custom mode)\n * Returns undefined for preset mode - use getEntranceAnimationStyles instead\n */\nexport function animationValueToCSS(anim: AnimationValue | null): React.CSSProperties | undefined {\n  if (!anim || anim.mode !== 'custom') return undefined\n\n  const duration = anim.duration ?? 300\n  const delay = anim.delay ?? 0\n  const easing = anim.easing ?? 'ease'\n  const easingCSS = EASING_CSS_MAP[easing] || 'ease'\n\n  return {\n    transition: `all ${duration}ms ${easingCSS} ${delay}ms`,\n    transitionProperty: 'opacity, transform, filter, background-color, color, border-color, box-shadow',\n  }\n}\n\n/**\n * Get initial and animate styles for entrance animations\n * Returns inline CSS style objects that work without Tailwind compilation\n * Supports all 27 animation presets with customizable intensity\n */\nexport function getEntranceAnimationStyles(anim: AnimationValue | null): {\n  initial: React.CSSProperties\n  animate: React.CSSProperties\n  duration: number\n  delay: number\n  easing: string\n  origin: string\n} {\n  const defaultResult = {\n    initial: {} as React.CSSProperties,\n    animate: {} as React.CSSProperties,\n    duration: 500,\n    delay: 0,\n    easing: 'ease',\n    origin: 'center',\n  }\n\n  if (!anim || anim.mode !== 'preset' || anim.entrance === 'none') {\n    return defaultResult\n  }\n\n  const duration = anim.entranceDuration ?? 500\n  const delay = anim.entranceDelay ?? 0\n  const easing = EASING_CSS_MAP[anim.easing ?? 'ease'] || 'ease'\n  const origin = animationOriginToCSS(anim.origin)\n\n  // Intensity values with defaults\n  const distance = anim.distance ?? 24 // px\n  const scaleFrom = anim.scaleFrom ?? 0.9\n  const rotateAngle = anim.rotateAngle ?? 15 // degrees\n  const blurAmount = anim.blurAmount ?? 8 // px\n\n  // Build animation styles based on preset\n  const entrance = anim.entrance ?? 'none'\n\n  let initial: React.CSSProperties = {}\n  let animate: React.CSSProperties = {}\n\n  switch (entrance) {\n    // ==================== FADE (6) ====================\n    case 'fade-in':\n      initial = { opacity: 0 }\n      animate = { opacity: 1 }\n      break\n\n    case 'fade-up':\n      initial = { opacity: 0, transform: `translateY(${distance}px)` }\n      animate = { opacity: 1, transform: 'translateY(0)' }\n      break\n\n    case 'fade-down':\n      initial = { opacity: 0, transform: `translateY(-${distance}px)` }\n      animate = { opacity: 1, transform: 'translateY(0)' }\n      break\n\n    case 'fade-left':\n      initial = { opacity: 0, transform: `translateX(${distance}px)` }\n      animate = { opacity: 1, transform: 'translateX(0)' }\n      break\n\n    case 'fade-right':\n      initial = { opacity: 0, transform: `translateX(-${distance}px)` }\n      animate = { opacity: 1, transform: 'translateX(0)' }\n      break\n\n    case 'fade-scale':\n      initial = { opacity: 0, transform: `scale(${scaleFrom})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    // ==================== SCALE (4) ====================\n    case 'scale-in':\n      initial = { opacity: 0, transform: `scale(${scaleFrom})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    case 'scale-up':\n      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(${distance}px)` }\n      animate = { opacity: 1, transform: 'scale(1) translateY(0)' }\n      break\n\n    case 'scale-down':\n      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(-${distance}px)` }\n      animate = { opacity: 1, transform: 'scale(1) translateY(0)' }\n      break\n\n    case 'scale-out':\n      // Scales from larger to normal\n      initial = { opacity: 0, transform: `scale(${2 - scaleFrom})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    // ==================== SLIDE (4) ====================\n    case 'slide-up':\n      initial = { transform: `translateY(${distance}px)` }\n      animate = { transform: 'translateY(0)' }\n      break\n\n    case 'slide-down':\n      initial = { transform: `translateY(-${distance}px)` }\n      animate = { transform: 'translateY(0)' }\n      break\n\n    case 'slide-left':\n      initial = { transform: `translateX(${distance}px)` }\n      animate = { transform: 'translateX(0)' }\n      break\n\n    case 'slide-right':\n      initial = { transform: `translateX(-${distance}px)` }\n      animate = { transform: 'translateX(0)' }\n      break\n\n    // ==================== BLUR (3) ====================\n    case 'blur-in':\n      initial = { opacity: 0, filter: `blur(${blurAmount}px)` }\n      animate = { opacity: 1, filter: 'blur(0)' }\n      break\n\n    case 'blur-up':\n      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(${distance}px)` }\n      animate = { opacity: 1, filter: 'blur(0)', transform: 'translateY(0)' }\n      break\n\n    case 'blur-down':\n      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(-${distance}px)` }\n      animate = { opacity: 1, filter: 'blur(0)', transform: 'translateY(0)' }\n      break\n\n    // ==================== ROTATE (3) ====================\n    case 'rotate-in':\n      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) scale(${scaleFrom})` }\n      animate = { opacity: 1, transform: 'rotate(0) scale(1)' }\n      break\n\n    case 'rotate-up':\n      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) translateY(${distance}px)` }\n      animate = { opacity: 1, transform: 'rotate(0) translateY(0)' }\n      break\n\n    case 'rotate-down':\n      initial = { opacity: 0, transform: `rotate(-${rotateAngle}deg) translateY(-${distance}px)` }\n      animate = { opacity: 1, transform: 'rotate(0) translateY(0)' }\n      break\n\n    // ==================== BOUNCE (3) ====================\n    // These use spring/bounce easing by default for the effect\n    case 'bounce-in':\n      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.8})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    case 'bounce-up':\n      initial = { opacity: 0, transform: `translateY(${distance * 1.5}px)` }\n      animate = { opacity: 1, transform: 'translateY(0)' }\n      break\n\n    case 'bounce-down':\n      initial = { opacity: 0, transform: `translateY(-${distance * 1.5}px)` }\n      animate = { opacity: 1, transform: 'translateY(0)' }\n      break\n\n    // ==================== FLIP (2) ====================\n    // Flip uses perspective in transform for proper 3D effect\n    // Starts from -90deg (tilted back) so the flip motion is visible\n    case 'flip-x':\n      initial = {\n        transform: 'perspective(1000px) rotateX(-90deg)',\n        opacity: 0.2,\n        backfaceVisibility: 'hidden',\n      }\n      animate = {\n        transform: 'perspective(1000px) rotateX(0deg)',\n        opacity: 1,\n        backfaceVisibility: 'hidden',\n      }\n      break\n\n    case 'flip-y':\n      initial = {\n        transform: 'perspective(1000px) rotateY(-90deg)',\n        opacity: 0.2,\n        backfaceVisibility: 'hidden',\n      }\n      animate = {\n        transform: 'perspective(1000px) rotateY(0deg)',\n        opacity: 1,\n        backfaceVisibility: 'hidden',\n      }\n      break\n\n    // ==================== ZOOM (2) ====================\n    case 'zoom-in':\n      // Starts small, zooms to full size\n      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.5})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    case 'zoom-out':\n      // Starts large, zooms down to full size\n      initial = { opacity: 0, transform: `scale(${2.5 - scaleFrom})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    default:\n      break\n  }\n\n  return {\n    initial,\n    animate,\n    duration,\n    delay,\n    easing,\n    origin,\n  }\n}\n\n/**\n * Get default easing for animation category\n * Bounce animations default to bounce easing, etc.\n */\nexport function getDefaultEasingForAnimation(entrance: EntranceAnimation): AdvancedEasingFunction {\n  if (entrance.startsWith('bounce-')) return 'bounce'\n  if (entrance.startsWith('flip-')) return 'back-out'\n  if (entrance.startsWith('zoom-')) return 'ease-out'\n  return 'ease'\n}\n\n/**\n * Get CSS custom properties for animation timing\n * Useful for CSS-only animations with custom properties\n */\nexport function getAnimationCSSVariables(anim: AnimationValue | null): Record<string, string> {\n  if (!anim) return {}\n\n  const isPreset = anim.mode === 'preset'\n  const duration = isPreset ? (anim.entranceDuration ?? 500) : (anim.duration ?? 300)\n  const delay = isPreset ? (anim.entranceDelay ?? 0) : (anim.delay ?? 0)\n  const easing = anim.easing ?? 'ease'\n  const easingCSS = EASING_CSS_MAP[easing] || 'ease'\n\n  return {\n    '--animation-duration': `${duration}ms`,\n    '--animation-delay': `${delay}ms`,\n    '--animation-easing': easingCSS,\n  }\n}\n\n/**\n * Generate stagger delay for a specific child index\n * Accounts for direction (forward, reverse, center, edges)\n */\nexport function getStaggerDelay(config: StaggerConfig, index: number, totalChildren: number): number {\n  if (!config.enabled || totalChildren <= 1) return 0\n\n  let effectiveIndex: number\n\n  switch (config.direction) {\n    case 'forward':\n      effectiveIndex = index\n      break\n    case 'reverse':\n      effectiveIndex = totalChildren - 1 - index\n      break\n    case 'center': {\n      // Center starts from middle, animates outward\n      const center = (totalChildren - 1) / 2\n      effectiveIndex = Math.abs(index - center)\n      break\n    }\n    case 'edges': {\n      // Edges starts from outside, animates inward\n      const center = (totalChildren - 1) / 2\n      effectiveIndex = center - Math.abs(index - center)\n      break\n    }\n    default:\n      effectiveIndex = index\n  }\n\n  const delay = effectiveIndex * config.delay\n\n  // Cap at max delay if specified\n  if (config.maxDelay && delay > config.maxDelay) {\n    return config.maxDelay\n  }\n\n  return delay\n}\n\n/**\n * Generate CSS styles for staggered children\n * Returns an object with CSS custom properties for each child\n */\nexport function generateStaggerStyles(\n  config: StaggerConfig | undefined,\n  totalChildren: number\n): React.CSSProperties[] {\n  if (!config?.enabled || totalChildren <= 1) {\n    return Array(totalChildren).fill({})\n  }\n\n  return Array.from({ length: totalChildren }, (_, i) => {\n    const delay = getStaggerDelay(config, i, totalChildren)\n    return {\n      '--stagger-delay': `${delay}ms`,\n      transitionDelay: `${delay}ms`,\n    } as React.CSSProperties\n  })\n}\n\n/**\n * Check which intensity controls are relevant for an animation type\n */\nexport function getRelevantIntensityControls(entrance: EntranceAnimation): {\n  showDistance: boolean\n  showScale: boolean\n  showRotate: boolean\n  showBlur: boolean\n} {\n  const hasTranslate = [\n    'fade-up', 'fade-down', 'fade-left', 'fade-right',\n    'scale-up', 'scale-down',\n    'slide-up', 'slide-down', 'slide-left', 'slide-right',\n    'blur-up', 'blur-down',\n    'rotate-up', 'rotate-down',\n    'bounce-up', 'bounce-down',\n  ].includes(entrance)\n\n  const hasScale = [\n    'fade-scale',\n    'scale-in', 'scale-up', 'scale-down', 'scale-out',\n    'rotate-in',\n    'bounce-in',\n    'zoom-in', 'zoom-out',\n  ].includes(entrance)\n\n  const hasRotate = [\n    'rotate-in', 'rotate-up', 'rotate-down',\n  ].includes(entrance)\n\n  const hasBlur = [\n    'blur-in', 'blur-up', 'blur-down',\n  ].includes(entrance)\n\n  return {\n    showDistance: hasTranslate,\n    showScale: hasScale,\n    showRotate: hasRotate,\n    showBlur: hasBlur,\n  }\n}\n\n/**\n * Default animation value\n */\nexport const DEFAULT_ANIMATION: AnimationValue = {\n  mode: 'preset',\n  entrance: 'none',\n  entranceDuration: 500,\n  entranceDelay: 0,\n  distance: 24,\n  scaleFrom: 0.9,\n  rotateAngle: 15,\n  blurAmount: 8,\n  origin: 'center',\n  easing: 'ease',\n  triggerOnScroll: true,\n  triggerThreshold: 0.1,\n  triggerOnce: true,\n}\n\n// =============================================================================\n// Layout Components Disallow List (prevent recursion in slots)\n// =============================================================================\n\nexport const layoutComponentsDisallow = [\n  'Container',\n  'Flex',\n  'Grid',\n  'Section',\n]\n\n","'use client'\n\n/**\n * useScrollAnimation - Hook for scroll-triggered animations\n *\n * Uses IntersectionObserver to detect when an element enters the viewport.\n * Perfect for triggering entrance animations, lazy loading, or scroll-based effects.\n */\n\nimport { useRef, useState, useEffect, useCallback } from 'react'\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface UseScrollAnimationOptions {\n  /**\n   * Whether to trigger animation on scroll into view.\n   * If false, isInView will always be true.\n   * @default true\n   */\n  triggerOnScroll?: boolean\n\n  /**\n   * Threshold for intersection (0-1).\n   * 0 = trigger as soon as any pixel is visible.\n   * 1 = trigger only when fully visible.\n   * @default 0.1\n   */\n  threshold?: number\n\n  /**\n   * Whether to only trigger once.\n   * If true, hasAnimated will stay true after first trigger.\n   * @default true\n   */\n  once?: boolean\n\n  /**\n   * Root margin for intersection observer.\n   * Allows triggering before/after the element enters the viewport.\n   * @example \"-50px\" // Trigger 50px before entering viewport\n   * @example \"100px 0px\" // 100px top/bottom, 0px left/right\n   * @default \"0px\"\n   */\n  rootMargin?: string\n\n  /**\n   * Delay in milliseconds before setting isInView to true.\n   * Useful for staggering animations.\n   * @default 0\n   */\n  delay?: number\n}\n\nexport interface UseScrollAnimationResult<T extends HTMLElement = HTMLElement> {\n  /**\n   * Ref to attach to the element you want to observe\n   */\n  ref: React.RefObject<T | null>\n\n  /**\n   * Whether the element is currently in view\n   */\n  isInView: boolean\n\n  /**\n   * Whether the element has ever been in view\n   * (useful for once-only animations)\n   */\n  hasAnimated: boolean\n\n  /**\n   * Manually reset the animation state\n   */\n  reset: () => void\n}\n\n// =============================================================================\n// Hook Implementation\n// =============================================================================\n\nexport function useScrollAnimation<T extends HTMLElement = HTMLElement>(\n  options: UseScrollAnimationOptions = {}\n): UseScrollAnimationResult<T> {\n  const {\n    triggerOnScroll = true,\n    threshold = 0.1,\n    once = true,\n    rootMargin = '0px',\n    delay = 0,\n  } = options\n\n  const ref = useRef<T | null>(null)\n  // Always start with isInView: false to allow initial → animate transition\n  const [isInView, setIsInView] = useState(false)\n  const [hasAnimated, setHasAnimated] = useState(false)\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const hasMountedRef = useRef(false)\n\n  // Reset function\n  const reset = useCallback(() => {\n    setIsInView(false)\n    setHasAnimated(false)\n    hasMountedRef.current = false\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current)\n      timeoutRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    // If not triggering on scroll, animate immediately after mount\n    // Use requestAnimationFrame to ensure the initial state is rendered first\n    if (!triggerOnScroll) {\n      // Skip if already mounted (prevents re-triggering on re-renders)\n      if (hasMountedRef.current) return\n      hasMountedRef.current = true\n\n      // Use double RAF to ensure browser has painted initial state\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          if (delay > 0) {\n            timeoutRef.current = setTimeout(() => {\n              setIsInView(true)\n              setHasAnimated(true)\n            }, delay)\n          } else {\n            setIsInView(true)\n            setHasAnimated(true)\n          }\n        })\n      })\n      return\n    }\n\n    // If once mode and already animated, skip observer setup\n    if (once && hasAnimated) {\n      return\n    }\n\n    const element = ref.current\n    if (!element) return\n\n    // Check if IntersectionObserver is available (SSR safety)\n    if (typeof IntersectionObserver === 'undefined') {\n      setIsInView(true)\n      setHasAnimated(true)\n      return\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const [entry] = entries\n        const inView = entry.isIntersecting\n\n        if (inView) {\n          if (delay > 0) {\n            // Apply delay before setting isInView\n            timeoutRef.current = setTimeout(() => {\n              setIsInView(true)\n              setHasAnimated(true)\n            }, delay)\n          } else {\n            setIsInView(true)\n            setHasAnimated(true)\n          }\n\n          // If once mode, disconnect observer after triggering\n          if (once) {\n            observer.disconnect()\n          }\n        } else if (!once) {\n          // Only update isInView to false if not in once mode\n          if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current)\n            timeoutRef.current = null\n          }\n          setIsInView(false)\n        }\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = null\n      }\n    }\n  }, [triggerOnScroll, threshold, once, rootMargin, delay, hasAnimated])\n\n  return {\n    ref,\n    isInView,\n    hasAnimated,\n    reset,\n  }\n}\n","'use client'\n\n/**\n * AnimatedWrapper - Client component for scroll-triggered animations\n *\n * Wraps children with animation support using IntersectionObserver.\n * Handles both preset entrance animations and custom transitions.\n * Supports 27 animation presets with customizable intensity, easing, and origin.\n */\n\nimport type { ReactNode, CSSProperties, ElementType } from 'react'\nimport { useScrollAnimation } from '../hooks/useScrollAnimation'\nimport {\n  getEntranceAnimationStyles,\n  animationValueToCSS,\n  type AnimationValue,\n} from '../fields/shared'\n\nexport interface AnimatedWrapperProps {\n  /** Animation configuration from the component */\n  animation: AnimationValue | null | undefined\n  /** Child content to animate */\n  children: ReactNode\n  /** Additional CSS classes */\n  className?: string\n  /** Inline styles */\n  style?: CSSProperties\n  /** HTML element to render as (default: 'div') */\n  as?: ElementType\n}\n\n/**\n * Wraps children with scroll-triggered animation support.\n *\n * For preset animations: Applies initial/animate inline styles\n * when element enters viewport.\n *\n * For custom animations: Applies CSS transition properties.\n *\n * If no animation is set, renders children without a wrapper div.\n */\nexport function AnimatedWrapper({\n  animation,\n  children,\n  className,\n  style,\n  as: Component = 'div',\n}: AnimatedWrapperProps) {\n  // Check if animation should be applied\n  const hasAnimation = animation && (\n    (animation.mode === 'preset' && animation.entrance && animation.entrance !== 'none') ||\n    animation.mode === 'custom'\n  )\n\n  // If no animation, render children directly without wrapper\n  if (!hasAnimation) {\n    // If there's a className or style, we still need to wrap\n    if (className || style) {\n      return <Component className={className} style={style}>{children}</Component>\n    }\n    return <>{children}</>\n  }\n\n  // Use the scroll animation hook\n  const { ref, isInView } = useScrollAnimation({\n    triggerOnScroll: animation.triggerOnScroll ?? true,\n    threshold: animation.triggerThreshold ?? 0.1,\n    once: animation.triggerOnce ?? true,\n    rootMargin: animation.triggerMargin,\n  })\n\n  // Handle preset entrance animations\n  if (animation.mode === 'preset') {\n    const { initial, animate, duration, delay, easing, origin } = getEntranceAnimationStyles(animation)\n\n    // Apply initial or animate styles based on visibility\n    const animationStyles = isInView ? animate : initial\n\n    // Build transition string with all relevant properties\n    const transitionProperties = [\n      `opacity ${duration}ms ${easing} ${delay}ms`,\n      `transform ${duration}ms ${easing} ${delay}ms`,\n      `filter ${duration}ms ${easing} ${delay}ms`,\n    ].join(', ')\n\n    return (\n      <Component\n        ref={ref}\n        className={className}\n        style={{\n          ...style,\n          ...animationStyles,\n          transition: transitionProperties,\n          transformOrigin: origin,\n        }}\n      >\n        {children}\n      </Component>\n    )\n  }\n\n  // Handle custom transition mode\n  const customStyles = animationValueToCSS(animation)\n\n  return (\n    <Component\n      ref={ref}\n      className={className}\n      style={{\n        ...style,\n        ...customStyles,\n        // Apply opacity for visibility-based transitions\n        opacity: isInView ? 1 : 0,\n      }}\n    >\n      {children}\n    </Component>\n  )\n}\n","'use client'\n\n/**\n * AccordionClient - Client component for accordion interactivity\n *\n * This is the actual interactive accordion that uses useState.\n * Imported by the server-safe AccordionConfig to enable client-side expansion.\n */\n\nimport { useState } from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport {\n  marginValueToCSS,\n  paddingValueToCSS,\n  dimensionsValueToCSS,\n  backgroundValueToCSS,\n  transformValueToCSS,\n  colorValueToCSS,\n  cn,\n  type PaddingValue,\n  type DimensionsValue,\n  type BackgroundValue,\n  type AnimationValue,\n  type TransformValue,\n  type ColorValue,\n} from '../fields/shared'\nimport { AnimatedWrapper } from './AnimatedWrapper'\n\ninterface AccordionItemData {\n  title: string\n  content: string\n  defaultOpen: boolean\n}\n\nexport interface AccordionClientProps {\n  items: AccordionItemData[]\n  allowMultiple: boolean\n  textColor: ColorValue | null\n  margin: PaddingValue | null\n  background: BackgroundValue | null\n  dimensions: DimensionsValue | null\n  transform: TransformValue | null\n  animation: AnimationValue | null\n  customPadding: PaddingValue | null\n}\n\n// Accordion Item Component\nfunction AccordionItem({\n  item,\n  isOpen,\n  onToggle,\n  textColorCSS,\n}: {\n  item: AccordionItemData\n  isOpen: boolean\n  onToggle: () => void\n  textColorCSS?: string\n}) {\n  const textStyle: React.CSSProperties = textColorCSS ? { color: textColorCSS } : {}\n\n  return (\n    <div className=\"border-b border-border last:border-b-0\">\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        className=\"flex w-full items-center justify-between py-4 px-4 text-left font-medium transition-all hover:bg-muted/50 text-foreground\"\n        style={textStyle}\n      >\n        <span>{item.title}</span>\n        <ChevronDown\n          className={cn(\n            'h-4 w-4 shrink-0 transition-transform duration-200',\n            isOpen && 'rotate-180'\n          )}\n        />\n      </button>\n      <div\n        className={cn(\n          'overflow-hidden transition-all duration-200',\n          isOpen ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'\n        )}\n      >\n        <div\n          className=\"px-4 pb-4 text-muted-foreground\"\n          style={textColorCSS ? { color: textColorCSS } : undefined}\n        >\n          {item.content}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport function AccordionClient({\n  items,\n  allowMultiple,\n  textColor,\n  margin,\n  background,\n  dimensions,\n  transform,\n  animation,\n  customPadding,\n}: AccordionClientProps) {\n  // Initialize open states from defaultOpen values\n  const [openItems, setOpenItems] = useState<Set<number>>(() => {\n    const initialOpen = new Set<number>()\n    items?.forEach((item, index) => {\n      if (item.defaultOpen) {\n        initialOpen.add(index)\n      }\n    })\n    return initialOpen\n  })\n\n  const handleToggle = (index: number) => {\n    setOpenItems((prev) => {\n      const newSet = new Set(prev)\n      if (newSet.has(index)) {\n        newSet.delete(index)\n      } else {\n        if (!allowMultiple) {\n          newSet.clear()\n        }\n        newSet.add(index)\n      }\n      return newSet\n    })\n  }\n\n  const textColorCSS = colorValueToCSS(textColor)\n  const dimensionsStyles = dimensionsValueToCSS(dimensions)\n\n  // Theme-aware classes - uses CSS variables for colors\n  const accordionClasses = 'rounded-lg border border-border overflow-hidden bg-card'\n\n  const backgroundStyles = backgroundValueToCSS(background)\n  // Only apply background styles if explicitly set, otherwise let bg-card handle it\n  const accordionStyle: React.CSSProperties = backgroundStyles && Object.keys(backgroundStyles).length > 0\n    ? backgroundStyles\n    : {}\n\n  const style: React.CSSProperties = {\n    ...dimensionsStyles,\n  }\n  const marginCSS = marginValueToCSS(margin)\n  if (marginCSS) {\n    style.margin = marginCSS\n  }\n  const paddingCSS = paddingValueToCSS(customPadding)\n  if (paddingCSS) {\n    style.padding = paddingCSS\n  }\n  const transformStyles = transformValueToCSS(transform)\n  if (transformStyles) {\n    Object.assign(style, transformStyles)\n  }\n\n  if (!items || items.length === 0) {\n    return (\n      <AnimatedWrapper animation={animation}>\n        <div className=\"px-4\" style={Object.keys(style).length > 0 ? style : undefined}>\n          <div className={accordionClasses} style={accordionStyle}>\n            <div className=\"p-4 text-center text-muted-foreground\">\n              No accordion items. Add items in the editor.\n            </div>\n          </div>\n        </div>\n      </AnimatedWrapper>\n    )\n  }\n\n  return (\n    <AnimatedWrapper animation={animation}>\n      <div className=\"px-4\" style={Object.keys(style).length > 0 ? style : undefined}>\n        <div className={accordionClasses} style={accordionStyle}>\n          {items.map((item, index) => (\n            <AccordionItem\n              key={index}\n              item={item}\n              isOpen={openItems.has(index)}\n              onToggle={() => handleToggle(index)}\n              textColorCSS={textColorCSS}\n            />\n          ))}\n        </div>\n      </div>\n    </AnimatedWrapper>\n  )\n}\n"]}

package/dist/AnimatedWrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/useScrollAnimation.ts","../src/fields/shared.ts","../src/components/AnimatedWrapper.tsx"],"names":["useRef","useState","useCallback","useEffect","jsx"],"mappings":"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","file":"AnimatedWrapper.js","sourcesContent":["'use client'\n\n/**\n * useScrollAnimation - Hook for scroll-triggered animations\n *\n * Uses IntersectionObserver to detect when an element enters the viewport.\n * Perfect for triggering entrance animations, lazy loading, or scroll-based effects.\n */\n\nimport { useRef, useState, useEffect, useCallback } from 'react'\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface UseScrollAnimationOptions {\n  /**\n   * Whether to trigger animation on scroll into view.\n   * If false, isInView will always be true.\n   * @default true\n   */\n  triggerOnScroll?: boolean\n\n  /**\n   * Threshold for intersection (0-1).\n   * 0 = trigger as soon as any pixel is visible.\n   * 1 = trigger only when fully visible.\n   * @default 0.1\n   */\n  threshold?: number\n\n  /**\n   * Whether to only trigger once.\n   * If true, hasAnimated will stay true after first trigger.\n   * @default true\n   */\n  once?: boolean\n\n  /**\n   * Root margin for intersection observer.\n   * Allows triggering before/after the element enters the viewport.\n   * @example \"-50px\" // Trigger 50px before entering viewport\n   * @example \"100px 0px\" // 100px top/bottom, 0px left/right\n   * @default \"0px\"\n   */\n  rootMargin?: string\n\n  /**\n   * Delay in milliseconds before setting isInView to true.\n   * Useful for staggering animations.\n   * @default 0\n   */\n  delay?: number\n}\n\nexport interface UseScrollAnimationResult<T extends HTMLElement = HTMLElement> {\n  /**\n   * Ref to attach to the element you want to observe\n   */\n  ref: React.RefObject<T | null>\n\n  /**\n   * Whether the element is currently in view\n   */\n  isInView: boolean\n\n  /**\n   * Whether the element has ever been in view\n   * (useful for once-only animations)\n   */\n  hasAnimated: boolean\n\n  /**\n   * Manually reset the animation state\n   */\n  reset: () => void\n}\n\n// =============================================================================\n// Hook Implementation\n// =============================================================================\n\nexport function useScrollAnimation<T extends HTMLElement = HTMLElement>(\n  options: UseScrollAnimationOptions = {}\n): UseScrollAnimationResult<T> {\n  const {\n    triggerOnScroll = true,\n    threshold = 0.1,\n    once = true,\n    rootMargin = '0px',\n    delay = 0,\n  } = options\n\n  const ref = useRef<T | null>(null)\n  // Always start with isInView: false to allow initial → animate transition\n  const [isInView, setIsInView] = useState(false)\n  const [hasAnimated, setHasAnimated] = useState(false)\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const hasMountedRef = useRef(false)\n\n  // Reset function\n  const reset = useCallback(() => {\n    setIsInView(false)\n    setHasAnimated(false)\n    hasMountedRef.current = false\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current)\n      timeoutRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    // If not triggering on scroll, animate immediately after mount\n    // Use requestAnimationFrame to ensure the initial state is rendered first\n    if (!triggerOnScroll) {\n      // Skip if already mounted (prevents re-triggering on re-renders)\n      if (hasMountedRef.current) return\n      hasMountedRef.current = true\n\n      // Use double RAF to ensure browser has painted initial state\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          if (delay > 0) {\n            timeoutRef.current = setTimeout(() => {\n              setIsInView(true)\n              setHasAnimated(true)\n            }, delay)\n          } else {\n            setIsInView(true)\n            setHasAnimated(true)\n          }\n        })\n      })\n      return\n    }\n\n    // If once mode and already animated, skip observer setup\n    if (once && hasAnimated) {\n      return\n    }\n\n    const element = ref.current\n    if (!element) return\n\n    // Check if IntersectionObserver is available (SSR safety)\n    if (typeof IntersectionObserver === 'undefined') {\n      setIsInView(true)\n      setHasAnimated(true)\n      return\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const [entry] = entries\n        const inView = entry.isIntersecting\n\n        if (inView) {\n          if (delay > 0) {\n            // Apply delay before setting isInView\n            timeoutRef.current = setTimeout(() => {\n              setIsInView(true)\n              setHasAnimated(true)\n            }, delay)\n          } else {\n            setIsInView(true)\n            setHasAnimated(true)\n          }\n\n          // If once mode, disconnect observer after triggering\n          if (once) {\n            observer.disconnect()\n          }\n        } else if (!once) {\n          // Only update isInView to false if not in once mode\n          if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current)\n            timeoutRef.current = null\n          }\n          setIsInView(false)\n        }\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = null\n      }\n    }\n  }, [triggerOnScroll, threshold, once, rootMargin, delay, hasAnimated])\n\n  return {\n    ref,\n    isInView,\n    hasAnimated,\n    reset,\n  }\n}\n","/**\n * Shared Puck Field Definitions\n *\n * Reusable field configurations and CSS utility maps for Puck components.\n * These ensure consistency across all components.\n */\n\nimport type { Field } from '@measured/puck'\nimport type React from 'react'\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Combines class names, filtering out falsy values\n * A simple alternative to clsx/classnames for bundling purposes\n */\nexport function cn(...classes: (string | boolean | undefined | null)[]): string {\n  return classes.filter(Boolean).join(' ')\n}\n\n// =============================================================================\n// Custom Style Types\n// =============================================================================\n\nexport interface ColorValue {\n  hex: string\n  opacity?: number\n}\n\nexport interface PaddingValue {\n  top: number\n  right: number\n  bottom: number\n  left: number\n  unit: 'px' | 'rem' | 'em' | '%'\n  /** Whether all sides are linked (sync together). Defaults to true if not set. */\n  linked?: boolean\n}\n\nexport interface BorderValue {\n  style: 'none' | 'solid' | 'dashed' | 'dotted'\n  width: number\n  color: ColorValue | null\n  radius: number\n  sides: {\n    top: boolean\n    right: boolean\n    bottom: boolean\n    left: boolean\n  }\n}\n\nexport interface WidthValue {\n  mode: 'full' | 'contained' | 'custom'\n  maxWidth: number\n  unit: 'px' | 'rem' | '%' | 'vw'\n  alignment: 'left' | 'center' | 'right'\n}\n\n// =============================================================================\n// Dimensions Types (Enhanced Width + Height)\n// =============================================================================\n\nexport type DimensionsUnit = 'px' | 'rem' | '%' | 'vw' | 'vh'\nexport type DimensionsMode = 'full' | 'contained' | 'custom'\nexport type ContentAlignment = 'left' | 'center' | 'right'\n\n/**\n * Represents a single dimension constraint (min or max for width or height)\n */\nexport interface DimensionConstraint {\n  value: number\n  unit: DimensionsUnit\n  enabled: boolean\n}\n\n/**\n * Full dimensions configuration value - replaces/extends WidthValue\n * Supports min/max constraints for both width and height\n */\nexport interface DimensionsValue {\n  /** Width mode: full (100%), contained (centered max-width), or custom */\n  mode: DimensionsMode\n  /** Content alignment within the container */\n  alignment: ContentAlignment\n  /** Minimum width constraint (optional) */\n  minWidth?: DimensionConstraint | null\n  /** Maximum width constraint (required for backward compat) */\n  maxWidth: DimensionConstraint\n  /** Minimum height constraint (optional) */\n  minHeight?: DimensionConstraint | null\n  /** Maximum height constraint (optional) */\n  maxHeight?: DimensionConstraint | null\n  /** UI state: whether advanced mode is expanded */\n  advancedMode?: boolean\n}\n\n/**\n * Type guard to detect legacy WidthValue format\n */\nexport function isLegacyWidthValue(value: unknown): value is WidthValue {\n  if (!value || typeof value !== 'object') return false\n  const v = value as Record<string, unknown>\n  return (\n    typeof v.maxWidth === 'number' &&\n    typeof v.unit === 'string' &&\n    typeof v.mode === 'string' &&\n    !('minWidth' in v) &&\n    !('minHeight' in v) &&\n    !('maxHeight' in v)\n  )\n}\n\n/**\n * Migrate legacy WidthValue to new DimensionsValue format\n */\nexport function migrateWidthValue(legacy: WidthValue): DimensionsValue {\n  return {\n    mode: legacy.mode,\n    alignment: legacy.alignment,\n    maxWidth: {\n      value: legacy.maxWidth,\n      unit: legacy.unit,\n      enabled: true,\n    },\n    advancedMode: false,\n  }\n}\n\n// =============================================================================\n// Background Types\n// =============================================================================\n\nexport interface GradientStop {\n  color: ColorValue\n  position: number // 0-100%\n}\n\nexport interface GradientValue {\n  type: 'linear' | 'radial'\n  angle: number // 0-360 for linear\n  stops: GradientStop[]\n  radialShape?: 'circle' | 'ellipse'\n  radialPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right'\n}\n\n/**\n * Gradient mask for fading images to transparent\n */\nexport interface GradientMask {\n  enabled: boolean\n  direction:\n    | 'to-top'\n    | 'to-bottom'\n    | 'to-left'\n    | 'to-right'\n    | 'to-top-left'\n    | 'to-top-right'\n    | 'to-bottom-left'\n    | 'to-bottom-right'\n    | 'from-center' // Radial gradient from center outward\n  startOpacity: number // 0-100, typically 100 (fully visible)\n  endOpacity: number // 0-100, typically 0 (fully transparent)\n  startPosition: number // 0-100%, where fade begins\n  endPosition: number // 0-100%, where fade ends\n}\n\nexport interface BackgroundImageValue {\n  media: import('./MediaField').MediaReference | null\n  size: 'cover' | 'contain' | 'auto'\n  position:\n    | 'center'\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n  repeat: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y'\n  attachment: 'scroll' | 'fixed'\n  /** Overall image opacity 0-100 (default 100) */\n  opacity?: number\n  /** Gradient mask for fade to transparent effect */\n  mask?: GradientMask\n}\n\n/**\n * Overlay layer for images (Divi-style)\n * Renders a color or gradient on top of the background image\n */\nexport interface BackgroundOverlay {\n  enabled: boolean\n  type: 'solid' | 'gradient'\n  solid?: ColorValue | null\n  gradient?: GradientValue | null\n}\n\nexport interface BackgroundValue {\n  type: 'none' | 'solid' | 'gradient' | 'image'\n  solid?: ColorValue | null\n  gradient?: GradientValue | null\n  image?: BackgroundImageValue | null\n  /** Overlay layer, only used when type === 'image' */\n  overlay?: BackgroundOverlay | null\n}\n\n// =============================================================================\n// Visibility Field\n// =============================================================================\n\nexport const visibilityField: Field = {\n  type: 'select',\n  label: 'Visibility',\n  options: [\n    { label: 'Always Visible', value: 'always' },\n    { label: 'Authenticated Users Only', value: 'authenticatedOnly' },\n    { label: 'Guests Only', value: 'guestOnly' },\n  ],\n}\n\n// =============================================================================\n// Button Style Field\n// =============================================================================\n\nexport const buttonStyleField: Field = {\n  type: 'select',\n  label: 'Button Style',\n  options: [\n    { label: 'Primary', value: 'primary' },\n    { label: 'Secondary', value: 'secondary' },\n    { label: 'Outline', value: 'outline' },\n    { label: 'Ghost', value: 'ghost' },\n    { label: 'Link', value: 'link' },\n  ],\n}\n\n// =============================================================================\n// Button Variant Field\n// =============================================================================\n\nexport const buttonVariantField: Field = {\n  type: 'select',\n  label: 'Button Variant',\n  options: [\n    { label: 'Default', value: 'default' },\n    { label: 'Destructive', value: 'destructive' },\n    { label: 'Outline', value: 'outline' },\n    { label: 'Secondary', value: 'secondary' },\n    { label: 'Ghost', value: 'ghost' },\n    { label: 'Link', value: 'link' },\n  ],\n}\n\n// =============================================================================\n// Button Size Field\n// =============================================================================\n\nexport const buttonSizeField: Field = {\n  type: 'select',\n  label: 'Size',\n  options: [\n    { label: 'Small', value: 'sm' },\n    { label: 'Default', value: 'default' },\n    { label: 'Large', value: 'lg' },\n    { label: 'Icon', value: 'icon' },\n  ],\n}\n\n// =============================================================================\n// Background Color Field (Preset Palette)\n// =============================================================================\n\nexport const backgroundColorField: Field = {\n  type: 'select',\n  label: 'Background Color',\n  options: [\n    { label: 'None', value: 'none' },\n    { label: 'Background', value: 'background' },\n    { label: 'Card', value: 'card' },\n    { label: 'Muted', value: 'muted' },\n    { label: 'Primary', value: 'primary' },\n    { label: 'Secondary', value: 'secondary' },\n    { label: 'Accent', value: 'accent' },\n  ],\n}\n\n// =============================================================================\n// Text Color Field (Preset Palette)\n// =============================================================================\n\nexport const textColorField: Field = {\n  type: 'select',\n  label: 'Text Color',\n  options: [\n    { label: 'Theme (Auto)', value: 'default' },\n    { label: 'Foreground', value: 'foreground' },\n    { label: 'Muted', value: 'muted-foreground' },\n    { label: 'Primary', value: 'primary' },\n    { label: 'Secondary', value: 'secondary-foreground' },\n  ],\n}\n\n// =============================================================================\n// Gap/Spacing Field\n// =============================================================================\n\nexport const gapField: Field = {\n  type: 'select',\n  label: 'Gap',\n  options: [\n    { label: 'None', value: 'none' },\n    { label: 'Extra Small', value: 'xs' },\n    { label: 'Small', value: 'sm' },\n    { label: 'Medium', value: 'md' },\n    { label: 'Large', value: 'lg' },\n    { label: 'Extra Large', value: 'xl' },\n    { label: '2XL', value: '2xl' },\n  ],\n}\n\n// =============================================================================\n// Shadow Field\n// =============================================================================\n\nexport const shadowField: Field = {\n  type: 'select',\n  label: 'Shadow',\n  options: [\n    { label: 'None', value: 'none' },\n    { label: 'Small', value: 'sm' },\n    { label: 'Medium', value: 'md' },\n    { label: 'Large', value: 'lg' },\n    { label: 'Extra Large', value: 'xl' },\n    { label: '2XL', value: '2xl' },\n  ],\n}\n\n// =============================================================================\n// Spacer Height Field\n// =============================================================================\n\nexport const spacerHeightField: Field = {\n  type: 'select',\n  label: 'Height',\n  options: [\n    { label: 'Extra Small (8px)', value: 'xs' },\n    { label: 'Small (16px)', value: 'sm' },\n    { label: 'Medium (32px)', value: 'md' },\n    { label: 'Large (48px)', value: 'lg' },\n    { label: 'Extra Large (64px)', value: 'xl' },\n    { label: '2XL (96px)', value: '2xl' },\n    { label: '3XL (128px)', value: '3xl' },\n  ],\n}\n\n// =============================================================================\n// Heading Level Field\n// =============================================================================\n\nexport const headingLevelField: Field = {\n  type: 'select',\n  label: 'Heading Level',\n  options: [\n    { label: 'H1', value: 'h1' },\n    { label: 'H2', value: 'h2' },\n    { label: 'H3', value: 'h3' },\n    { label: 'H4', value: 'h4' },\n    { label: 'H5', value: 'h5' },\n    { label: 'H6', value: 'h6' },\n  ],\n}\n\n// =============================================================================\n// Text Size Field\n// =============================================================================\n\nexport const textSizeField: Field = {\n  type: 'select',\n  label: 'Text Size',\n  options: [\n    { label: 'Extra Small', value: 'xs' },\n    { label: 'Small', value: 'sm' },\n    { label: 'Base', value: 'base' },\n    { label: 'Large', value: 'lg' },\n    { label: 'Extra Large', value: 'xl' },\n    { label: '2XL', value: '2xl' },\n  ],\n}\n\n// =============================================================================\n// Aspect Ratio Field\n// =============================================================================\n\nexport const aspectRatioField: Field = {\n  type: 'select',\n  label: 'Aspect Ratio',\n  options: [\n    { label: 'Auto', value: 'auto' },\n    { label: 'Square (1:1)', value: 'square' },\n    { label: 'Video (16:9)', value: 'video' },\n    { label: 'Portrait (3:4)', value: 'portrait' },\n    { label: 'Landscape (4:3)', value: 'landscape' },\n    { label: 'Wide (21:9)', value: 'wide' },\n  ],\n}\n\n// =============================================================================\n// Divider Style Field\n// =============================================================================\n\nexport const dividerStyleField: Field = {\n  type: 'select',\n  label: 'Style',\n  options: [\n    { label: 'Solid', value: 'solid' },\n    { label: 'Dashed', value: 'dashed' },\n    { label: 'Dotted', value: 'dotted' },\n  ],\n}\n\n// =============================================================================\n// Border Radius Field\n// =============================================================================\n\nexport const borderRadiusField: Field = {\n  type: 'select',\n  label: 'Border Radius',\n  options: [\n    { label: 'None', value: 'none' },\n    { label: 'Small', value: 'sm' },\n    { label: 'Medium', value: 'md' },\n    { label: 'Large', value: 'lg' },\n    { label: 'Extra Large', value: 'xl' },\n    { label: '2XL', value: '2xl' },\n    { label: 'Full', value: 'full' },\n  ],\n}\n\n// =============================================================================\n// Columns Count Field\n// =============================================================================\n\nexport const columnsCountField: Field = {\n  type: 'select',\n  label: 'Columns',\n  options: [\n    { label: '1 Column', value: '1' },\n    { label: '2 Columns', value: '2' },\n    { label: '3 Columns', value: '3' },\n    { label: '4 Columns', value: '4' },\n    { label: '5 Columns', value: '5' },\n    { label: '6 Columns', value: '6' },\n  ],\n}\n\n// =============================================================================\n// Flex Direction Field\n// =============================================================================\n\nexport const flexDirectionField: Field = {\n  type: 'select',\n  label: 'Direction',\n  options: [\n    { label: 'Row (Horizontal)', value: 'row' },\n    { label: 'Column (Vertical)', value: 'column' },\n    { label: 'Row Reverse', value: 'row-reverse' },\n    { label: 'Column Reverse', value: 'column-reverse' },\n  ],\n}\n\n// =============================================================================\n// Flex Wrap Field\n// =============================================================================\n\nexport const flexWrapField: Field = {\n  type: 'select',\n  label: 'Wrap',\n  options: [\n    { label: 'No Wrap', value: 'nowrap' },\n    { label: 'Wrap', value: 'wrap' },\n    { label: 'Wrap Reverse', value: 'wrap-reverse' },\n  ],\n}\n\n// =============================================================================\n// CSS Class Mappings\n// =============================================================================\n\n/**\n * Maps alignment values to Tailwind classes\n */\nexport const alignmentMap: Record<string, string> = {\n  left: 'text-left',\n  center: 'text-center',\n  right: 'text-right',\n}\n\n/**\n * Maps background color values to Tailwind classes\n */\nexport const bgColorMap: Record<string, string> = {\n  none: '',\n  background: 'bg-background',\n  card: 'bg-card',\n  muted: 'bg-muted',\n  primary: 'bg-primary',\n  secondary: 'bg-secondary',\n  accent: 'bg-accent',\n}\n\n/**\n * Maps text color values to Tailwind classes\n */\nexport const textColorMap: Record<string, string> = {\n  default: 'text-inherit',\n  foreground: 'text-foreground',\n  'muted-foreground': 'text-muted-foreground',\n  primary: 'text-primary',\n  'secondary-foreground': 'text-secondary-foreground',\n}\n\n/**\n * Maps gap values to Tailwind classes\n */\nexport const gapMap: Record<string, string> = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-4',\n  lg: 'gap-6',\n  xl: 'gap-8',\n  '2xl': 'gap-12',\n}\n\n/**\n * Maps shadow values to Tailwind classes\n */\nexport const shadowMap: Record<string, string> = {\n  none: '',\n  sm: 'shadow-sm',\n  md: 'shadow-md',\n  lg: 'shadow-lg',\n  xl: 'shadow-xl',\n  '2xl': 'shadow-2xl',\n}\n\n/**\n * Maps spacer height values to Tailwind classes\n */\nexport const spacerHeightMap: Record<string, string> = {\n  xs: 'h-2',\n  sm: 'h-4',\n  md: 'h-8',\n  lg: 'h-12',\n  xl: 'h-16',\n  '2xl': 'h-24',\n  '3xl': 'h-32',\n}\n\n/**\n * Maps heading level to Tailwind classes\n */\nexport const headingLevelMap: Record<string, string> = {\n  h1: 'text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight',\n  h2: 'text-3xl md:text-4xl font-bold tracking-tight',\n  h3: 'text-2xl md:text-3xl font-semibold',\n  h4: 'text-xl md:text-2xl font-semibold',\n  h5: 'text-lg md:text-xl font-medium',\n  h6: 'text-base md:text-lg font-medium',\n}\n\n/**\n * Maps text size to Tailwind classes\n */\nexport const textSizeMap: Record<string, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  base: 'text-base',\n  lg: 'text-lg',\n  xl: 'text-xl',\n  '2xl': 'text-2xl',\n}\n\n/**\n * Maps aspect ratio to Tailwind classes\n */\nexport const aspectRatioMap: Record<string, string> = {\n  auto: '',\n  square: 'aspect-square',\n  video: 'aspect-video',\n  portrait: 'aspect-[3/4]',\n  landscape: 'aspect-[4/3]',\n  wide: 'aspect-[21/9]',\n}\n\n/**\n * Maps divider style to Tailwind classes\n */\nexport const dividerStyleMap: Record<string, string> = {\n  solid: 'border-solid',\n  dashed: 'border-dashed',\n  dotted: 'border-dotted',\n}\n\n/**\n * Maps border radius to Tailwind classes\n */\nexport const borderRadiusMap: Record<string, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  full: 'rounded-full',\n}\n\n/**\n * Maps columns count to Tailwind grid classes (responsive)\n */\nexport const columnsCountMap: Record<string, string> = {\n  '1': 'grid-cols-1',\n  '2': 'grid-cols-1 md:grid-cols-2',\n  '3': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\n  '4': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',\n  '5': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',\n  '6': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',\n}\n\n/**\n * Maps flex direction to Tailwind classes\n */\nexport const flexDirectionMap: Record<string, string> = {\n  row: 'flex-row',\n  column: 'flex-col',\n  'row-reverse': 'flex-row-reverse',\n  'column-reverse': 'flex-col-reverse',\n}\n\n/**\n * Maps justify content to Tailwind classes\n * Supports both short (start) and full (flex-start) values\n */\nexport const justifyContentMap: Record<string, string> = {\n  start: 'justify-start',\n  'flex-start': 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  'flex-end': 'justify-end',\n  between: 'justify-between',\n  'space-between': 'justify-between',\n  around: 'justify-around',\n  'space-around': 'justify-around',\n  evenly: 'justify-evenly',\n  'space-evenly': 'justify-evenly',\n}\n\n/**\n * Maps align items to Tailwind classes\n * Supports both short (start) and full (flex-start) values\n */\nexport const alignItemsMap: Record<string, string> = {\n  start: 'items-start',\n  'flex-start': 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  'flex-end': 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline',\n}\n\n/**\n * Maps self-alignment to Tailwind classes (for grid/flex item alignment)\n * Used by components like TextImageSplit for vertical self-alignment\n */\nexport const selfAlignmentMap: Record<string, string> = {\n  start: 'self-start',\n  'flex-start': 'self-start',\n  center: 'self-center',\n  end: 'self-end',\n  'flex-end': 'self-end',\n  stretch: 'self-stretch',\n  auto: 'self-auto',\n}\n\n/**\n * Maps flex wrap to Tailwind classes\n */\nexport const flexWrapMap: Record<string, string> = {\n  nowrap: 'flex-nowrap',\n  wrap: 'flex-wrap',\n  'wrap-reverse': 'flex-wrap-reverse',\n}\n\n// =============================================================================\n// Custom Style Value Utilities\n// =============================================================================\n\n/**\n * Convert hex color to RGB components\n */\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const clean = hex.replace(/^#/, '')\n  if (clean.length !== 6) return null\n\n  const r = parseInt(clean.substring(0, 2), 16)\n  const g = parseInt(clean.substring(2, 4), 16)\n  const b = parseInt(clean.substring(4, 6), 16)\n\n  if (isNaN(r) || isNaN(g) || isNaN(b)) return null\n\n  return { r, g, b }\n}\n\n/**\n * Convert ColorValue to CSS rgba string\n */\nexport function colorValueToCSS(color: ColorValue | null | undefined): string | undefined {\n  if (!color?.hex) return undefined\n\n  const rgb = hexToRgb(color.hex)\n  if (!rgb) return color.hex\n\n  const opacity = (color.opacity ?? 100) / 100\n\n  if (opacity === 1) {\n    return color.hex\n  }\n\n  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`\n}\n\n/**\n * Convert PaddingValue to CSS padding string\n */\nexport function paddingValueToCSS(padding: PaddingValue | null | undefined): string | undefined {\n  if (!padding) return undefined\n\n  const { top, right, bottom, left, unit } = padding\n\n  if (top === right && right === bottom && bottom === left) {\n    return `${top}${unit}`\n  }\n\n  if (top === bottom && left === right) {\n    return `${top}${unit} ${right}${unit}`\n  }\n\n  if (left === right) {\n    return `${top}${unit} ${right}${unit} ${bottom}${unit}`\n  }\n\n  return `${top}${unit} ${right}${unit} ${bottom}${unit} ${left}${unit}`\n}\n\n/**\n * Convert PaddingValue to CSS margin string (same structure, different property)\n */\nexport function marginValueToCSS(margin: PaddingValue | null | undefined): string | undefined {\n  if (!margin) return undefined\n\n  const { top, right, bottom, left, unit } = margin\n\n  if (top === right && right === bottom && bottom === left) {\n    return `${top}${unit}`\n  }\n\n  if (top === bottom && left === right) {\n    return `${top}${unit} ${right}${unit}`\n  }\n\n  if (left === right) {\n    return `${top}${unit} ${right}${unit} ${bottom}${unit}`\n  }\n\n  return `${top}${unit} ${right}${unit} ${bottom}${unit} ${left}${unit}`\n}\n\n/**\n * Convert BorderValue to CSS properties object\n */\nexport function borderValueToCSS(border: BorderValue | null | undefined): React.CSSProperties | undefined {\n  if (!border || border.style === 'none') return undefined\n\n  const color = colorValueToCSS(border.color) || '#000000'\n  const style: React.CSSProperties = {}\n\n  if (border.sides.top) {\n    style.borderTopWidth = `${border.width}px`\n    style.borderTopStyle = border.style\n    style.borderTopColor = color\n  }\n\n  if (border.sides.right) {\n    style.borderRightWidth = `${border.width}px`\n    style.borderRightStyle = border.style\n    style.borderRightColor = color\n  }\n\n  if (border.sides.bottom) {\n    style.borderBottomWidth = `${border.width}px`\n    style.borderBottomStyle = border.style\n    style.borderBottomColor = color\n  }\n\n  if (border.sides.left) {\n    style.borderLeftWidth = `${border.width}px`\n    style.borderLeftStyle = border.style\n    style.borderLeftColor = color\n  }\n\n  if (border.radius > 0) {\n    style.borderRadius = `${border.radius}px`\n  }\n\n  return Object.keys(style).length > 0 ? style : undefined\n}\n\n/**\n * Convert WidthValue to CSS properties object\n */\nexport function widthValueToCSS(width: WidthValue | null | undefined): React.CSSProperties | undefined {\n  if (!width) return undefined\n\n  const style: React.CSSProperties = {}\n\n  if (width.mode === 'full') {\n    style.width = '100%'\n    style.maxWidth = '100%'\n  } else {\n    style.maxWidth = `${width.maxWidth}${width.unit}`\n    style.width = '100%'\n  }\n\n  switch (width.alignment) {\n    case 'left':\n      style.marginLeft = '0'\n      style.marginRight = 'auto'\n      break\n    case 'center':\n      style.marginLeft = 'auto'\n      style.marginRight = 'auto'\n      break\n    case 'right':\n      style.marginLeft = 'auto'\n      style.marginRight = '0'\n      break\n  }\n\n  return style\n}\n\n/**\n * Convert DimensionsValue to CSS properties object\n * Handles both legacy WidthValue and new DimensionsValue formats\n */\nexport function dimensionsValueToCSS(\n  dimensions: DimensionsValue | WidthValue | null | undefined\n): React.CSSProperties | undefined {\n  if (!dimensions) return undefined\n\n  // Handle legacy WidthValue format\n  if (isLegacyWidthValue(dimensions)) {\n    return widthValueToCSS(dimensions)\n  }\n\n  const dim = dimensions as DimensionsValue\n  const style: React.CSSProperties = {}\n\n  // Width handling based on mode\n  if (dim.mode === 'full') {\n    style.width = '100%'\n    style.maxWidth = '100%'\n  } else {\n    style.width = '100%'\n\n    // Max Width (required)\n    if (dim.maxWidth?.enabled !== false && dim.maxWidth?.value > 0) {\n      style.maxWidth = `${dim.maxWidth.value}${dim.maxWidth.unit}`\n    }\n\n    // Min Width (optional)\n    if (dim.minWidth?.enabled && dim.minWidth.value > 0) {\n      style.minWidth = `${dim.minWidth.value}${dim.minWidth.unit}`\n    }\n  }\n\n  // Height handling (applies to all modes)\n  if (dim.minHeight?.enabled && dim.minHeight.value > 0) {\n    style.minHeight = `${dim.minHeight.value}${dim.minHeight.unit}`\n  }\n\n  if (dim.maxHeight?.enabled && dim.maxHeight.value > 0) {\n    style.maxHeight = `${dim.maxHeight.value}${dim.maxHeight.unit}`\n  }\n\n  // Alignment (via margin)\n  switch (dim.alignment) {\n    case 'left':\n      style.marginLeft = '0'\n      style.marginRight = 'auto'\n      break\n    case 'center':\n      style.marginLeft = 'auto'\n      style.marginRight = 'auto'\n      break\n    case 'right':\n      style.marginLeft = 'auto'\n      style.marginRight = '0'\n      break\n  }\n\n  return style\n}\n\n/**\n * Get human-readable summary of dimensions\n */\nexport function getDimensionsSummary(dim: DimensionsValue | null | undefined): string {\n  if (!dim) return 'auto'\n\n  if (dim.mode === 'full') return '100%'\n\n  const parts: string[] = []\n\n  if (dim.maxWidth?.enabled && dim.maxWidth.value > 0) {\n    parts.push(`max: ${dim.maxWidth.value}${dim.maxWidth.unit}`)\n  }\n\n  if (dim.minWidth?.enabled && dim.minWidth.value > 0) {\n    parts.push(`min: ${dim.minWidth.value}${dim.minWidth.unit}`)\n  }\n\n  if (dim.maxHeight?.enabled && dim.maxHeight.value > 0) {\n    parts.push(`h-max: ${dim.maxHeight.value}${dim.maxHeight.unit}`)\n  }\n\n  if (dim.minHeight?.enabled && dim.minHeight.value > 0) {\n    parts.push(`h-min: ${dim.minHeight.value}${dim.minHeight.unit}`)\n  }\n\n  return parts.length > 0 ? parts.join(' | ') : 'auto'\n}\n\n/**\n * Combined style generator for layout components\n */\nexport function getCustomStyleObject(options: {\n  backgroundColor?: ColorValue | null\n  textColor?: ColorValue | null\n  padding?: PaddingValue | null\n  margin?: PaddingValue | null\n  border?: BorderValue | null\n  width?: WidthValue | null\n}): React.CSSProperties {\n  const style: React.CSSProperties = {}\n\n  const bgColor = colorValueToCSS(options.backgroundColor)\n  if (bgColor) {\n    style.backgroundColor = bgColor\n  }\n\n  const txtColor = colorValueToCSS(options.textColor)\n  if (txtColor) {\n    style.color = txtColor\n  }\n\n  const paddingCSS = paddingValueToCSS(options.padding)\n  if (paddingCSS) {\n    style.padding = paddingCSS\n  }\n\n  const marginCSS = marginValueToCSS(options.margin)\n  if (marginCSS) {\n    style.margin = marginCSS\n  }\n\n  const borderCSS = borderValueToCSS(options.border)\n  if (borderCSS) {\n    Object.assign(style, borderCSS)\n  }\n\n  const widthCSS = widthValueToCSS(options.width)\n  if (widthCSS) {\n    Object.assign(style, widthCSS)\n  }\n\n  return style\n}\n\n/**\n * Convert GradientValue to CSS gradient string\n */\nexport function gradientValueToCSS(gradient: GradientValue | null | undefined): string {\n  if (!gradient?.stops || gradient.stops.length === 0) {\n    return 'transparent'\n  }\n\n  // Sort stops by position\n  const sortedStops = [...gradient.stops].sort((a, b) => a.position - b.position)\n\n  // Convert stops to CSS format\n  const stopsCSS = sortedStops\n    .map((stop) => {\n      const color = colorValueToCSS(stop.color) || 'transparent'\n      return `${color} ${stop.position}%`\n    })\n    .join(', ')\n\n  if (gradient.type === 'radial') {\n    const shape = gradient.radialShape || 'circle'\n    const position = gradient.radialPosition || 'center'\n    return `radial-gradient(${shape} at ${position}, ${stopsCSS})`\n  }\n\n  // Linear gradient\n  return `linear-gradient(${gradient.angle}deg, ${stopsCSS})`\n}\n\n/**\n * Convert position value to CSS background-position\n */\nfunction positionToCSS(\n  position: BackgroundImageValue['position'] | undefined\n): string {\n  const positionMap: Record<NonNullable<BackgroundImageValue['position']>, string> = {\n    center: 'center',\n    top: 'top',\n    bottom: 'bottom',\n    left: 'left',\n    right: 'right',\n    'top-left': 'top left',\n    'top-right': 'top right',\n    'bottom-left': 'bottom left',\n    'bottom-right': 'bottom right',\n  }\n  return position ? positionMap[position] || 'center' : 'center'\n}\n\n/**\n * Convert GradientMask direction to CSS gradient direction\n */\nfunction maskDirectionToCSS(direction: GradientMask['direction']): string {\n  const directionMap: Record<GradientMask['direction'], string> = {\n    'to-top': 'to top',\n    'to-bottom': 'to bottom',\n    'to-left': 'to left',\n    'to-right': 'to right',\n    'to-top-left': 'to top left',\n    'to-top-right': 'to top right',\n    'to-bottom-left': 'to bottom left',\n    'to-bottom-right': 'to bottom right',\n    'from-center': 'radial', // Not used for linear, handled separately in maskToCSS\n  }\n  return directionMap[direction] || 'to bottom'\n}\n\n/**\n * Convert GradientMask to CSS mask-image string\n */\nfunction maskToCSS(mask: GradientMask): string {\n  const startAlpha = (mask.startOpacity ?? 100) / 100\n  const endAlpha = (mask.endOpacity ?? 0) / 100\n\n  // Handle radial gradient for \"from-center\"\n  if (mask.direction === 'from-center') {\n    return `radial-gradient(circle at center, rgba(0,0,0,${startAlpha}) ${mask.startPosition}%, rgba(0,0,0,${endAlpha}) ${mask.endPosition}%)`\n  }\n\n  // Linear gradient for directional fades\n  const direction = maskDirectionToCSS(mask.direction)\n  return `linear-gradient(${direction}, rgba(0,0,0,${startAlpha}) ${mask.startPosition}%, rgba(0,0,0,${endAlpha}) ${mask.endPosition}%)`\n}\n\n/**\n * Result of background CSS conversion\n * Includes both styles and metadata for consumer components\n */\nexport interface BackgroundCSSResult {\n  /** CSS properties to apply directly */\n  styles: React.CSSProperties\n  /** Image opacity (0-1) - consumer should apply via wrapper if needed */\n  imageOpacity?: number\n}\n\n/**\n * Convert BackgroundValue to CSS properties object\n * Returns both styles and metadata for advanced features like image opacity\n */\nexport function backgroundValueToCSS(\n  bg: BackgroundValue | null | undefined\n): React.CSSProperties {\n  if (!bg || bg.type === 'none') {\n    return {}\n  }\n\n  const style: React.CSSProperties = {}\n\n  switch (bg.type) {\n    case 'solid':\n      if (bg.solid?.hex) {\n        style.backgroundColor = colorValueToCSS(bg.solid)\n      }\n      break\n\n    case 'gradient':\n      if (bg.gradient && bg.gradient.stops && bg.gradient.stops.length > 0) {\n        style.background = gradientValueToCSS(bg.gradient)\n      }\n      break\n\n    case 'image':\n      if (bg.image?.media?.url) {\n        const imageUrl = bg.image.media.url\n        const size = bg.image.size || 'cover'\n        const position = positionToCSS(bg.image.position)\n        const repeat = bg.image.repeat || 'no-repeat'\n        const attachment = bg.image.attachment || 'scroll'\n\n        // Check if overlay is enabled\n        if (bg.overlay?.enabled) {\n          // Layer overlay on top of image using CSS multiple backgrounds\n          // Use only backgroundImage to avoid shorthand/longhand conflicts\n          const overlayCSS =\n            bg.overlay.type === 'solid'\n              ? colorValueToCSS(bg.overlay.solid)\n              : gradientValueToCSS(bg.overlay.gradient)\n\n          // CSS background layering: first layer is on top\n          // For solid color overlay, we need to use a gradient to make it a proper layer\n          if (bg.overlay.type === 'solid' && overlayCSS) {\n            style.backgroundImage = `linear-gradient(${overlayCSS}, ${overlayCSS}), url(${imageUrl})`\n          } else {\n            style.backgroundImage = `${overlayCSS}, url(${imageUrl})`\n          }\n          // Use comma-separated values for each layer\n          style.backgroundSize = `auto, ${size}`\n          style.backgroundPosition = `center, ${position}`\n          style.backgroundRepeat = `no-repeat, ${repeat}`\n          style.backgroundAttachment = `scroll, ${attachment}`\n        } else {\n          // No overlay, just the image\n          style.backgroundImage = `url(${imageUrl})`\n          style.backgroundSize = size\n          style.backgroundPosition = position\n          style.backgroundRepeat = repeat\n          style.backgroundAttachment = attachment\n        }\n\n        // Apply gradient mask if enabled\n        if (bg.image.mask?.enabled) {\n          const maskCSS = maskToCSS(bg.image.mask)\n          style.maskImage = maskCSS\n          // Webkit prefix for Safari support\n          ;(style as Record<string, string>).WebkitMaskImage = maskCSS\n        }\n      }\n      break\n  }\n\n  return style\n}\n\n/**\n * Get image opacity from BackgroundValue (for consumer wrapper components)\n * Returns undefined if no image or opacity is 100%\n */\nexport function getBackgroundImageOpacity(\n  bg: BackgroundValue | null | undefined\n): number | undefined {\n  if (!bg || bg.type !== 'image' || !bg.image) return undefined\n  const opacity = bg.image.opacity ?? 100\n  return opacity < 100 ? opacity / 100 : undefined\n}\n\n/**\n * Check if any custom style values are set\n */\nexport function hasCustomStyles(options: {\n  backgroundColor?: ColorValue | null\n  textColor?: ColorValue | null\n  padding?: PaddingValue | null\n  margin?: PaddingValue | null\n  border?: BorderValue | null\n  width?: WidthValue | null\n}): boolean {\n  return !!(\n    options.backgroundColor?.hex ||\n    options.textColor?.hex ||\n    options.padding ||\n    options.margin ||\n    (options.border && options.border.style !== 'none') ||\n    options.width\n  )\n}\n\n// =============================================================================\n// Transform Types\n// =============================================================================\n\nexport type TransformOrigin =\n  | 'center'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\nexport interface TransformValue {\n  rotate: number // -360 to 360\n  scaleX: number // 0.1 to 3\n  scaleY: number // 0.1 to 3\n  scaleLocked: boolean // When true, X and Y sync\n  skewX: number // -45 to 45\n  skewY: number // -45 to 45\n  translateX: number\n  translateY: number\n  translateUnit: 'px' | 'rem' | '%'\n  origin: TransformOrigin\n\n  // Optional 3D\n  enable3D: boolean\n  perspective?: number // 100-2000px\n  rotateX?: number // -180 to 180\n  rotateY?: number // -180 to 180\n}\n\n/**\n * Default transform value\n */\nexport const DEFAULT_TRANSFORM: TransformValue = {\n  rotate: 0,\n  scaleX: 1,\n  scaleY: 1,\n  scaleLocked: true,\n  skewX: 0,\n  skewY: 0,\n  translateX: 0,\n  translateY: 0,\n  translateUnit: 'px',\n  origin: 'center',\n  enable3D: false,\n  perspective: 1000,\n  rotateX: 0,\n  rotateY: 0,\n}\n\n/**\n * Convert TransformOrigin to CSS transform-origin value\n */\nfunction transformOriginToCSS(origin: TransformOrigin): string {\n  const originMap: Record<TransformOrigin, string> = {\n    center: 'center',\n    top: 'top',\n    bottom: 'bottom',\n    left: 'left',\n    right: 'right',\n    'top-left': 'top left',\n    'top-right': 'top right',\n    'bottom-left': 'bottom left',\n    'bottom-right': 'bottom right',\n  }\n  return originMap[origin] || 'center'\n}\n\n/**\n * Convert TransformValue to CSS properties object\n */\nexport function transformValueToCSS(\n  transform: TransformValue | null | undefined\n): React.CSSProperties | undefined {\n  if (!transform) return undefined\n\n  const style: React.CSSProperties = {}\n  const transforms: string[] = []\n\n  // Handle 3D perspective\n  if (transform.enable3D && transform.perspective) {\n    style.perspective = `${transform.perspective}px`\n  }\n\n  // Build transform string\n  // Translate\n  if (transform.translateX !== 0 || transform.translateY !== 0) {\n    transforms.push(\n      `translate(${transform.translateX}${transform.translateUnit}, ${transform.translateY}${transform.translateUnit})`\n    )\n  }\n\n  // Rotate (2D)\n  if (transform.rotate !== 0) {\n    transforms.push(`rotate(${transform.rotate}deg)`)\n  }\n\n  // 3D rotations\n  if (transform.enable3D) {\n    if (transform.rotateX && transform.rotateX !== 0) {\n      transforms.push(`rotateX(${transform.rotateX}deg)`)\n    }\n    if (transform.rotateY && transform.rotateY !== 0) {\n      transforms.push(`rotateY(${transform.rotateY}deg)`)\n    }\n  }\n\n  // Scale\n  if (transform.scaleX !== 1 || transform.scaleY !== 1) {\n    if (transform.scaleX === transform.scaleY) {\n      transforms.push(`scale(${transform.scaleX})`)\n    } else {\n      transforms.push(`scale(${transform.scaleX}, ${transform.scaleY})`)\n    }\n  }\n\n  // Skew\n  if (transform.skewX !== 0 || transform.skewY !== 0) {\n    if (transform.skewX !== 0 && transform.skewY !== 0) {\n      transforms.push(`skew(${transform.skewX}deg, ${transform.skewY}deg)`)\n    } else if (transform.skewX !== 0) {\n      transforms.push(`skewX(${transform.skewX}deg)`)\n    } else {\n      transforms.push(`skewY(${transform.skewY}deg)`)\n    }\n  }\n\n  // Apply transform if we have any\n  if (transforms.length > 0) {\n    style.transform = transforms.join(' ')\n  }\n\n  // Transform origin\n  if (transform.origin !== 'center') {\n    style.transformOrigin = transformOriginToCSS(transform.origin)\n  }\n\n  // Add transform-style for 3D\n  if (transform.enable3D) {\n    style.transformStyle = 'preserve-3d'\n  }\n\n  return Object.keys(style).length > 0 ? style : undefined\n}\n\n// =============================================================================\n// Responsive Field Types\n// =============================================================================\n\nexport type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/**\n * Responsive value that can have different values at different breakpoints.\n * XS (extra small) is required, other breakpoints are optional overrides.\n */\nexport interface ResponsiveValue<T> {\n  xs: T\n  sm?: T\n  md?: T\n  lg?: T\n  xl?: T\n}\n\n/**\n * Breakpoint configuration with labels and pixel values\n */\nexport const BREAKPOINTS: Array<{\n  key: Breakpoint\n  label: string\n  minWidth: number | null\n}> = [\n  { key: 'xs', label: 'XS', minWidth: null },\n  { key: 'sm', label: 'SM', minWidth: 640 },\n  { key: 'md', label: 'MD', minWidth: 768 },\n  { key: 'lg', label: 'LG', minWidth: 1024 },\n  { key: 'xl', label: 'XL', minWidth: 1280 },\n]\n\n// =============================================================================\n// Responsive CSS Helpers\n// =============================================================================\n\n/**\n * Type guard to check if a value is a ResponsiveValue (has breakpoint structure)\n */\nexport function isResponsiveValue<T>(value: unknown): value is ResponsiveValue<T> {\n  if (!value || typeof value !== 'object') return false\n  return 'xs' in value\n}\n\n/**\n * Converts a camelCase property name to kebab-case CSS property\n */\nfunction camelToKebab(str: string): string {\n  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)\n}\n\n/**\n * Converts React.CSSProperties to a CSS string for use in style tags\n */\nexport function cssPropertiesToString(styles: React.CSSProperties): string {\n  return Object.entries(styles)\n    .filter(([, value]) => value !== undefined && value !== null && value !== '')\n    .map(([key, value]) => `${camelToKebab(key)}: ${value}`)\n    .join('; ')\n}\n\n/**\n * Result of converting a responsive value to CSS\n */\nexport interface ResponsiveCSSResult {\n  /** Base styles to apply as inline styles */\n  baseStyles: React.CSSProperties\n  /** CSS media queries to render in a <style> tag */\n  mediaQueryCSS: string\n}\n\n/**\n * Converts a ResponsiveValue to CSS with media queries.\n * Works with any value type that has a CSS converter function.\n *\n * @param value - The responsive or non-responsive value\n * @param converter - Function to convert the value type to CSSProperties\n * @param uniqueId - Unique class name for targeting in media queries\n * @returns Object with baseStyles (inline) and mediaQueryCSS (for <style> tag)\n *\n * @example\n * ```tsx\n * const { baseStyles, mediaQueryCSS } = responsiveValueToCSS(\n *   dimensions,\n *   dimensionsValueToCSS,\n *   'container-abc123'\n * )\n *\n * return (\n *   <>\n *     {mediaQueryCSS && <style>{mediaQueryCSS}</style>}\n *     <div className=\"container-abc123\" style={baseStyles}>...</div>\n *   </>\n * )\n * ```\n */\nexport function responsiveValueToCSS<T>(\n  value: ResponsiveValue<T> | T | null | undefined,\n  converter: (v: T) => React.CSSProperties | undefined,\n  uniqueId: string\n): ResponsiveCSSResult {\n  // Handle null/undefined\n  if (value === null || value === undefined) {\n    return { baseStyles: {}, mediaQueryCSS: '' }\n  }\n\n  // If not responsive (single value), return as base styles only\n  if (!isResponsiveValue<T>(value)) {\n    const styles = converter(value as T)\n    return {\n      baseStyles: styles || {},\n      mediaQueryCSS: '',\n    }\n  }\n\n  // Generate media queries for each breakpoint\n  const mediaQueries: string[] = []\n  let baseStyles: React.CSSProperties = {}\n\n  BREAKPOINTS.forEach((bp) => {\n    const bpValue = value[bp.key]\n    if (bpValue === undefined) return\n\n    const cssProps = converter(bpValue)\n    if (!cssProps) return\n\n    if (bp.key === 'xs') {\n      baseStyles = cssProps\n    } else {\n      const styleString = cssPropertiesToString(cssProps)\n      if (styleString) {\n        mediaQueries.push(\n          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { ${styleString} } }`\n        )\n      }\n    }\n  })\n\n  return { baseStyles, mediaQueryCSS: mediaQueries.join('\\n') }\n}\n\n/**\n * Visibility value for show/hide per breakpoint\n */\nexport interface VisibilityValue {\n  /** XS (extra small) visibility - true = visible, false = hidden (default: true) */\n  xs: boolean\n  /** Small screens (640px+) */\n  sm?: boolean\n  /** Override for medium screens (768px+) */\n  md?: boolean\n  /** Override for large screens (1024px+) */\n  lg?: boolean\n  /** Override for extra large screens (1280px+) */\n  xl?: boolean\n}\n\n/**\n * Default visibility value (visible at all breakpoints)\n */\nexport const DEFAULT_VISIBILITY: VisibilityValue = {\n  xs: true,\n  sm: true,\n  md: true,\n  lg: true,\n  xl: true,\n}\n\n/**\n * Converts a VisibilityValue to CSS with display: none media queries.\n * Each breakpoint is independent - generates targeted media queries for hidden breakpoints.\n *\n * @param visibility - The visibility settings per breakpoint\n * @param uniqueId - Unique class name for targeting in media queries\n * @returns CSS media queries string for hiding at specific breakpoints\n */\nexport function visibilityValueToCSS(\n  visibility: VisibilityValue | null | undefined,\n  uniqueId: string\n): string {\n  if (!visibility) return ''\n\n  const mediaQueries: string[] = []\n\n  // Breakpoint min-widths for range calculations\n  const breakpointWidths: Record<Breakpoint, number | null> = {\n    xs: null, // 0px\n    sm: 640,\n    md: 768,\n    lg: 1024,\n    xl: 1280,\n  }\n\n  // Get next breakpoint's min-width for max-width calculation\n  const getNextBreakpointWidth = (bp: Breakpoint): number | null => {\n    const order: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl']\n    const index = order.indexOf(bp)\n    if (index === -1 || index === order.length - 1) return null\n    return breakpointWidths[order[index + 1]]\n  }\n\n  // XS (0 to 639px)\n  if (visibility.xs === false) {\n    const nextWidth = getNextBreakpointWidth('xs')\n    if (nextWidth) {\n      mediaQueries.push(`@media (max-width: ${nextWidth - 1}px) { .${uniqueId} { display: none; } }`)\n    } else {\n      mediaQueries.push(`.${uniqueId} { display: none; }`)\n    }\n  }\n\n  // Other breakpoints (sm, md, lg, xl)\n  BREAKPOINTS.slice(1).forEach((bp) => {\n    if (visibility[bp.key] === false) {\n      const minWidth = breakpointWidths[bp.key]\n      const maxWidth = getNextBreakpointWidth(bp.key)\n\n      if (minWidth && maxWidth) {\n        // Range query (e.g., sm: 640-767px)\n        mediaQueries.push(\n          `@media (min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px) { .${uniqueId} { display: none; } }`\n        )\n      } else if (minWidth) {\n        // Last breakpoint (xl: 1280px+)\n        mediaQueries.push(\n          `@media (min-width: ${minWidth}px) { .${uniqueId} { display: none; } }`\n        )\n      }\n    }\n  })\n\n  return mediaQueries.join('\\n')\n}\n\n// =============================================================================\n// Animation Types\n// =============================================================================\n\n/** Standard CSS easing functions */\nexport type EasingFunction = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'\n\n/** Advanced easing with spring/bounce effects via cubic-bezier approximations */\nexport type AdvancedEasingFunction =\n  | EasingFunction\n  | 'spring'\n  | 'spring-gentle'\n  | 'bounce'\n  | 'bounce-in'\n  | 'bounce-out'\n  | 'back-in'\n  | 'back-out'\n  | 'back-in-out'\n  | 'elastic'\n\n/** Map advanced easing to CSS cubic-bezier values */\nexport const EASING_CSS_MAP: Record<AdvancedEasingFunction, string> = {\n  linear: 'linear',\n  ease: 'ease',\n  'ease-in': 'ease-in',\n  'ease-out': 'ease-out',\n  'ease-in-out': 'ease-in-out',\n  spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n  'spring-gentle': 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n  bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n  'bounce-in': 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',\n  'bounce-out': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n  'back-in': 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',\n  'back-out': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n  'back-in-out': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n  elastic: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)',\n}\n\n/** Transform origin for animations (3x3 grid) */\nexport type AnimationOrigin =\n  | 'center'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\n/** Stagger direction for child animations */\nexport type StaggerDirection = 'forward' | 'reverse' | 'center' | 'edges'\n\n/** Configuration for staggered child animations */\nexport interface StaggerConfig {\n  enabled: boolean\n  /** Delay between each child element (ms) */\n  delay: number\n  /** Maximum total delay to prevent very long animations */\n  maxDelay?: number\n  /** Direction of stagger effect */\n  direction: StaggerDirection\n}\n\n/** Animation categories for UI organization */\nexport type AnimationCategory =\n  | 'fade'\n  | 'scale'\n  | 'slide'\n  | 'blur'\n  | 'rotate'\n  | 'bounce'\n  | 'flip'\n  | 'zoom'\n\n/**\n * Extended entrance animation presets (27 total)\n * Organized by category for the UI dropdown\n */\nexport type EntranceAnimation =\n  // None\n  | 'none'\n  // Fade (6)\n  | 'fade-in'\n  | 'fade-up'\n  | 'fade-down'\n  | 'fade-left'\n  | 'fade-right'\n  | 'fade-scale'\n  // Scale (4)\n  | 'scale-in'\n  | 'scale-up'\n  | 'scale-down'\n  | 'scale-out'\n  // Slide (4)\n  | 'slide-up'\n  | 'slide-down'\n  | 'slide-left'\n  | 'slide-right'\n  // Blur (3)\n  | 'blur-in'\n  | 'blur-up'\n  | 'blur-down'\n  // Rotate (3)\n  | 'rotate-in'\n  | 'rotate-up'\n  | 'rotate-down'\n  // Bounce (3)\n  | 'bounce-in'\n  | 'bounce-up'\n  | 'bounce-down'\n  // Flip (2)\n  | 'flip-x'\n  | 'flip-y'\n  // Zoom (2)\n  | 'zoom-in'\n  | 'zoom-out'\n\n/**\n * Animation presets organized by category for UI\n */\nexport const ANIMATION_CATEGORIES: Array<{\n  category: AnimationCategory | 'none'\n  label: string\n  animations: EntranceAnimation[]\n}> = [\n  { category: 'none', label: 'None', animations: ['none'] },\n  { category: 'fade', label: 'Fade', animations: ['fade-in', 'fade-up', 'fade-down', 'fade-left', 'fade-right', 'fade-scale'] },\n  { category: 'scale', label: 'Scale', animations: ['scale-in', 'scale-up', 'scale-down', 'scale-out'] },\n  { category: 'slide', label: 'Slide', animations: ['slide-up', 'slide-down', 'slide-left', 'slide-right'] },\n  { category: 'blur', label: 'Blur', animations: ['blur-in', 'blur-up', 'blur-down'] },\n  { category: 'rotate', label: 'Rotate', animations: ['rotate-in', 'rotate-up', 'rotate-down'] },\n  { category: 'bounce', label: 'Bounce', animations: ['bounce-in', 'bounce-up', 'bounce-down'] },\n  { category: 'flip', label: 'Flip', animations: ['flip-x', 'flip-y'] },\n  { category: 'zoom', label: 'Zoom', animations: ['zoom-in', 'zoom-out'] },\n]\n\nexport interface AnimationValue {\n  mode: 'preset' | 'custom'\n\n  // Preset mode\n  entrance?: EntranceAnimation\n  entranceDuration?: number // ms\n  entranceDelay?: number // ms\n\n  // Intensity controls (context-aware based on animation type)\n  /** Distance for translate animations (8-200px) */\n  distance?: number\n  /** Starting scale for scale animations (0.1-2) */\n  scaleFrom?: number\n  /** Rotation angle for rotate animations (-180 to 180deg) */\n  rotateAngle?: number\n  /** Blur amount for blur animations (0-50px) */\n  blurAmount?: number\n\n  // Transform origin (affects scale/rotate)\n  origin?: AnimationOrigin\n\n  // Advanced easing\n  easing?: AdvancedEasingFunction\n\n  // Stagger for child elements\n  stagger?: StaggerConfig\n\n  // Custom transition mode\n  duration?: number // 0-2000ms\n  delay?: number // 0-2000ms\n\n  // Scroll trigger\n  triggerOnScroll?: boolean\n  triggerThreshold?: number // 0-1\n  triggerOnce?: boolean\n  /** Margin around viewport for earlier/later triggering (e.g., \"0px 0px -100px 0px\") */\n  triggerMargin?: string\n}\n\n// =============================================================================\n// Animation CSS Utilities\n// =============================================================================\n\n/**\n * Convert AnimationOrigin to CSS transform-origin value\n */\nfunction animationOriginToCSS(origin: AnimationOrigin | undefined): string {\n  if (!origin) return 'center'\n  const originMap: Record<AnimationOrigin, string> = {\n    center: 'center',\n    top: 'top',\n    bottom: 'bottom',\n    left: 'left',\n    right: 'right',\n    'top-left': 'top left',\n    'top-right': 'top right',\n    'bottom-left': 'bottom left',\n    'bottom-right': 'bottom right',\n  }\n  return originMap[origin] || 'center'\n}\n\n/**\n * Convert AnimationValue to CSS transition property (for custom mode)\n * Returns undefined for preset mode - use getEntranceAnimationStyles instead\n */\nexport function animationValueToCSS(anim: AnimationValue | null): React.CSSProperties | undefined {\n  if (!anim || anim.mode !== 'custom') return undefined\n\n  const duration = anim.duration ?? 300\n  const delay = anim.delay ?? 0\n  const easing = anim.easing ?? 'ease'\n  const easingCSS = EASING_CSS_MAP[easing] || 'ease'\n\n  return {\n    transition: `all ${duration}ms ${easingCSS} ${delay}ms`,\n    transitionProperty: 'opacity, transform, filter, background-color, color, border-color, box-shadow',\n  }\n}\n\n/**\n * Get initial and animate styles for entrance animations\n * Returns inline CSS style objects that work without Tailwind compilation\n * Supports all 27 animation presets with customizable intensity\n */\nexport function getEntranceAnimationStyles(anim: AnimationValue | null): {\n  initial: React.CSSProperties\n  animate: React.CSSProperties\n  duration: number\n  delay: number\n  easing: string\n  origin: string\n} {\n  const defaultResult = {\n    initial: {} as React.CSSProperties,\n    animate: {} as React.CSSProperties,\n    duration: 500,\n    delay: 0,\n    easing: 'ease',\n    origin: 'center',\n  }\n\n  if (!anim || anim.mode !== 'preset' || anim.entrance === 'none') {\n    return defaultResult\n  }\n\n  const duration = anim.entranceDuration ?? 500\n  const delay = anim.entranceDelay ?? 0\n  const easing = EASING_CSS_MAP[anim.easing ?? 'ease'] || 'ease'\n  const origin = animationOriginToCSS(anim.origin)\n\n  // Intensity values with defaults\n  const distance = anim.distance ?? 24 // px\n  const scaleFrom = anim.scaleFrom ?? 0.9\n  const rotateAngle = anim.rotateAngle ?? 15 // degrees\n  const blurAmount = anim.blurAmount ?? 8 // px\n\n  // Build animation styles based on preset\n  const entrance = anim.entrance ?? 'none'\n\n  let initial: React.CSSProperties = {}\n  let animate: React.CSSProperties = {}\n\n  switch (entrance) {\n    // ==================== FADE (6) ====================\n    case 'fade-in':\n      initial = { opacity: 0 }\n      animate = { opacity: 1 }\n      break\n\n    case 'fade-up':\n      initial = { opacity: 0, transform: `translateY(${distance}px)` }\n      animate = { opacity: 1, transform: 'translateY(0)' }\n      break\n\n    case 'fade-down':\n      initial = { opacity: 0, transform: `translateY(-${distance}px)` }\n      animate = { opacity: 1, transform: 'translateY(0)' }\n      break\n\n    case 'fade-left':\n      initial = { opacity: 0, transform: `translateX(${distance}px)` }\n      animate = { opacity: 1, transform: 'translateX(0)' }\n      break\n\n    case 'fade-right':\n      initial = { opacity: 0, transform: `translateX(-${distance}px)` }\n      animate = { opacity: 1, transform: 'translateX(0)' }\n      break\n\n    case 'fade-scale':\n      initial = { opacity: 0, transform: `scale(${scaleFrom})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    // ==================== SCALE (4) ====================\n    case 'scale-in':\n      initial = { opacity: 0, transform: `scale(${scaleFrom})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    case 'scale-up':\n      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(${distance}px)` }\n      animate = { opacity: 1, transform: 'scale(1) translateY(0)' }\n      break\n\n    case 'scale-down':\n      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(-${distance}px)` }\n      animate = { opacity: 1, transform: 'scale(1) translateY(0)' }\n      break\n\n    case 'scale-out':\n      // Scales from larger to normal\n      initial = { opacity: 0, transform: `scale(${2 - scaleFrom})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    // ==================== SLIDE (4) ====================\n    case 'slide-up':\n      initial = { transform: `translateY(${distance}px)` }\n      animate = { transform: 'translateY(0)' }\n      break\n\n    case 'slide-down':\n      initial = { transform: `translateY(-${distance}px)` }\n      animate = { transform: 'translateY(0)' }\n      break\n\n    case 'slide-left':\n      initial = { transform: `translateX(${distance}px)` }\n      animate = { transform: 'translateX(0)' }\n      break\n\n    case 'slide-right':\n      initial = { transform: `translateX(-${distance}px)` }\n      animate = { transform: 'translateX(0)' }\n      break\n\n    // ==================== BLUR (3) ====================\n    case 'blur-in':\n      initial = { opacity: 0, filter: `blur(${blurAmount}px)` }\n      animate = { opacity: 1, filter: 'blur(0)' }\n      break\n\n    case 'blur-up':\n      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(${distance}px)` }\n      animate = { opacity: 1, filter: 'blur(0)', transform: 'translateY(0)' }\n      break\n\n    case 'blur-down':\n      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(-${distance}px)` }\n      animate = { opacity: 1, filter: 'blur(0)', transform: 'translateY(0)' }\n      break\n\n    // ==================== ROTATE (3) ====================\n    case 'rotate-in':\n      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) scale(${scaleFrom})` }\n      animate = { opacity: 1, transform: 'rotate(0) scale(1)' }\n      break\n\n    case 'rotate-up':\n      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) translateY(${distance}px)` }\n      animate = { opacity: 1, transform: 'rotate(0) translateY(0)' }\n      break\n\n    case 'rotate-down':\n      initial = { opacity: 0, transform: `rotate(-${rotateAngle}deg) translateY(-${distance}px)` }\n      animate = { opacity: 1, transform: 'rotate(0) translateY(0)' }\n      break\n\n    // ==================== BOUNCE (3) ====================\n    // These use spring/bounce easing by default for the effect\n    case 'bounce-in':\n      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.8})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    case 'bounce-up':\n      initial = { opacity: 0, transform: `translateY(${distance * 1.5}px)` }\n      animate = { opacity: 1, transform: 'translateY(0)' }\n      break\n\n    case 'bounce-down':\n      initial = { opacity: 0, transform: `translateY(-${distance * 1.5}px)` }\n      animate = { opacity: 1, transform: 'translateY(0)' }\n      break\n\n    // ==================== FLIP (2) ====================\n    // Flip uses perspective in transform for proper 3D effect\n    // Starts from -90deg (tilted back) so the flip motion is visible\n    case 'flip-x':\n      initial = {\n        transform: 'perspective(1000px) rotateX(-90deg)',\n        opacity: 0.2,\n        backfaceVisibility: 'hidden',\n      }\n      animate = {\n        transform: 'perspective(1000px) rotateX(0deg)',\n        opacity: 1,\n        backfaceVisibility: 'hidden',\n      }\n      break\n\n    case 'flip-y':\n      initial = {\n        transform: 'perspective(1000px) rotateY(-90deg)',\n        opacity: 0.2,\n        backfaceVisibility: 'hidden',\n      }\n      animate = {\n        transform: 'perspective(1000px) rotateY(0deg)',\n        opacity: 1,\n        backfaceVisibility: 'hidden',\n      }\n      break\n\n    // ==================== ZOOM (2) ====================\n    case 'zoom-in':\n      // Starts small, zooms to full size\n      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.5})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    case 'zoom-out':\n      // Starts large, zooms down to full size\n      initial = { opacity: 0, transform: `scale(${2.5 - scaleFrom})` }\n      animate = { opacity: 1, transform: 'scale(1)' }\n      break\n\n    default:\n      break\n  }\n\n  return {\n    initial,\n    animate,\n    duration,\n    delay,\n    easing,\n    origin,\n  }\n}\n\n/**\n * Get default easing for animation category\n * Bounce animations default to bounce easing, etc.\n */\nexport function getDefaultEasingForAnimation(entrance: EntranceAnimation): AdvancedEasingFunction {\n  if (entrance.startsWith('bounce-')) return 'bounce'\n  if (entrance.startsWith('flip-')) return 'back-out'\n  if (entrance.startsWith('zoom-')) return 'ease-out'\n  return 'ease'\n}\n\n/**\n * Get CSS custom properties for animation timing\n * Useful for CSS-only animations with custom properties\n */\nexport function getAnimationCSSVariables(anim: AnimationValue | null): Record<string, string> {\n  if (!anim) return {}\n\n  const isPreset = anim.mode === 'preset'\n  const duration = isPreset ? (anim.entranceDuration ?? 500) : (anim.duration ?? 300)\n  const delay = isPreset ? (anim.entranceDelay ?? 0) : (anim.delay ?? 0)\n  const easing = anim.easing ?? 'ease'\n  const easingCSS = EASING_CSS_MAP[easing] || 'ease'\n\n  return {\n    '--animation-duration': `${duration}ms`,\n    '--animation-delay': `${delay}ms`,\n    '--animation-easing': easingCSS,\n  }\n}\n\n/**\n * Generate stagger delay for a specific child index\n * Accounts for direction (forward, reverse, center, edges)\n */\nexport function getStaggerDelay(config: StaggerConfig, index: number, totalChildren: number): number {\n  if (!config.enabled || totalChildren <= 1) return 0\n\n  let effectiveIndex: number\n\n  switch (config.direction) {\n    case 'forward':\n      effectiveIndex = index\n      break\n    case 'reverse':\n      effectiveIndex = totalChildren - 1 - index\n      break\n    case 'center': {\n      // Center starts from middle, animates outward\n      const center = (totalChildren - 1) / 2\n      effectiveIndex = Math.abs(index - center)\n      break\n    }\n    case 'edges': {\n      // Edges starts from outside, animates inward\n      const center = (totalChildren - 1) / 2\n      effectiveIndex = center - Math.abs(index - center)\n      break\n    }\n    default:\n      effectiveIndex = index\n  }\n\n  const delay = effectiveIndex * config.delay\n\n  // Cap at max delay if specified\n  if (config.maxDelay && delay > config.maxDelay) {\n    return config.maxDelay\n  }\n\n  return delay\n}\n\n/**\n * Generate CSS styles for staggered children\n * Returns an object with CSS custom properties for each child\n */\nexport function generateStaggerStyles(\n  config: StaggerConfig | undefined,\n  totalChildren: number\n): React.CSSProperties[] {\n  if (!config?.enabled || totalChildren <= 1) {\n    return Array(totalChildren).fill({})\n  }\n\n  return Array.from({ length: totalChildren }, (_, i) => {\n    const delay = getStaggerDelay(config, i, totalChildren)\n    return {\n      '--stagger-delay': `${delay}ms`,\n      transitionDelay: `${delay}ms`,\n    } as React.CSSProperties\n  })\n}\n\n/**\n * Check which intensity controls are relevant for an animation type\n */\nexport function getRelevantIntensityControls(entrance: EntranceAnimation): {\n  showDistance: boolean\n  showScale: boolean\n  showRotate: boolean\n  showBlur: boolean\n} {\n  const hasTranslate = [\n    'fade-up', 'fade-down', 'fade-left', 'fade-right',\n    'scale-up', 'scale-down',\n    'slide-up', 'slide-down', 'slide-left', 'slide-right',\n    'blur-up', 'blur-down',\n    'rotate-up', 'rotate-down',\n    'bounce-up', 'bounce-down',\n  ].includes(entrance)\n\n  const hasScale = [\n    'fade-scale',\n    'scale-in', 'scale-up', 'scale-down', 'scale-out',\n    'rotate-in',\n    'bounce-in',\n    'zoom-in', 'zoom-out',\n  ].includes(entrance)\n\n  const hasRotate = [\n    'rotate-in', 'rotate-up', 'rotate-down',\n  ].includes(entrance)\n\n  const hasBlur = [\n    'blur-in', 'blur-up', 'blur-down',\n  ].includes(entrance)\n\n  return {\n    showDistance: hasTranslate,\n    showScale: hasScale,\n    showRotate: hasRotate,\n    showBlur: hasBlur,\n  }\n}\n\n/**\n * Default animation value\n */\nexport const DEFAULT_ANIMATION: AnimationValue = {\n  mode: 'preset',\n  entrance: 'none',\n  entranceDuration: 500,\n  entranceDelay: 0,\n  distance: 24,\n  scaleFrom: 0.9,\n  rotateAngle: 15,\n  blurAmount: 8,\n  origin: 'center',\n  easing: 'ease',\n  triggerOnScroll: true,\n  triggerThreshold: 0.1,\n  triggerOnce: true,\n}\n\n// =============================================================================\n// Layout Components Disallow List (prevent recursion in slots)\n// =============================================================================\n\nexport const layoutComponentsDisallow = [\n  'Container',\n  'Flex',\n  'Grid',\n  'Section',\n]\n\n","'use client'\n\n/**\n * AnimatedWrapper - Client component for scroll-triggered animations\n *\n * Wraps children with animation support using IntersectionObserver.\n * Handles both preset entrance animations and custom transitions.\n * Supports 27 animation presets with customizable intensity, easing, and origin.\n */\n\nimport type { ReactNode, CSSProperties, ElementType } from 'react'\nimport { useScrollAnimation } from '../hooks/useScrollAnimation'\nimport {\n  getEntranceAnimationStyles,\n  animationValueToCSS,\n  type AnimationValue,\n} from '../fields/shared'\n\nexport interface AnimatedWrapperProps {\n  /** Animation configuration from the component */\n  animation: AnimationValue | null | undefined\n  /** Child content to animate */\n  children: ReactNode\n  /** Additional CSS classes */\n  className?: string\n  /** Inline styles */\n  style?: CSSProperties\n  /** HTML element to render as (default: 'div') */\n  as?: ElementType\n}\n\n/**\n * Wraps children with scroll-triggered animation support.\n *\n * For preset animations: Applies initial/animate inline styles\n * when element enters viewport.\n *\n * For custom animations: Applies CSS transition properties.\n *\n * If no animation is set, renders children without a wrapper div.\n */\nexport function AnimatedWrapper({\n  animation,\n  children,\n  className,\n  style,\n  as: Component = 'div',\n}: AnimatedWrapperProps) {\n  // Check if animation should be applied\n  const hasAnimation = animation && (\n    (animation.mode === 'preset' && animation.entrance && animation.entrance !== 'none') ||\n    animation.mode === 'custom'\n  )\n\n  // If no animation, render children directly without wrapper\n  if (!hasAnimation) {\n    // If there's a className or style, we still need to wrap\n    if (className || style) {\n      return <Component className={className} style={style}>{children}</Component>\n    }\n    return <>{children}</>\n  }\n\n  // Use the scroll animation hook\n  const { ref, isInView } = useScrollAnimation({\n    triggerOnScroll: animation.triggerOnScroll ?? true,\n    threshold: animation.triggerThreshold ?? 0.1,\n    once: animation.triggerOnce ?? true,\n    rootMargin: animation.triggerMargin,\n  })\n\n  // Handle preset entrance animations\n  if (animation.mode === 'preset') {\n    const { initial, animate, duration, delay, easing, origin } = getEntranceAnimationStyles(animation)\n\n    // Apply initial or animate styles based on visibility\n    const animationStyles = isInView ? animate : initial\n\n    // Build transition string with all relevant properties\n    const transitionProperties = [\n      `opacity ${duration}ms ${easing} ${delay}ms`,\n      `transform ${duration}ms ${easing} ${delay}ms`,\n      `filter ${duration}ms ${easing} ${delay}ms`,\n    ].join(', ')\n\n    return (\n      <Component\n        ref={ref}\n        className={className}\n        style={{\n          ...style,\n          ...animationStyles,\n          transition: transitionProperties,\n          transformOrigin: origin,\n        }}\n      >\n        {children}\n      </Component>\n    )\n  }\n\n  // Handle custom transition mode\n  const customStyles = animationValueToCSS(animation)\n\n  return (\n    <Component\n      ref={ref}\n      className={className}\n      style={{\n        ...style,\n        ...customStyles,\n        // Apply opacity for visibility-based transitions\n        opacity: isInView ? 1 : 0,\n      }}\n    >\n      {children}\n    </Component>\n  )\n}\n"]}