site-builder/craft/src/constants/presets.ts

export const TEXT_COLORS = [
  { label: 'Dark', value: '#1f2937' },
  { label: 'Medium', value: '#374151' },
  { label: 'Light', value: '#6b7280' },
  { label: 'White', value: '#ffffff' },
  { label: 'Blue', value: '#3b82f6' },
  { label: 'Green', value: '#10b981' },
  { label: 'Red', value: '#ef4444' },
  { label: 'Orange', value: '#f59e0b' },
];

export const BG_COLORS = [
  { label: 'White', value: '#ffffff' },
  { label: 'Off-white', value: '#f9fafb' },
  { label: 'Dark', value: '#1f2937' },
  { label: 'Darker', value: '#111827' },
  { label: 'Blue', value: '#3b82f6' },
  { label: 'Green', value: '#10b981' },
  { label: 'Purple', value: '#8b5cf6' },
  { label: 'Pink', value: '#ec4899' },
];

export const FONT_FAMILIES = [
  { label: 'Inter', value: 'Inter, sans-serif' },
  { label: 'Roboto', value: 'Roboto, sans-serif' },
  { label: 'Open Sans', value: 'Open Sans, sans-serif' },
  { label: 'Poppins', value: 'Poppins, sans-serif' },
  { label: 'Montserrat', value: 'Montserrat, sans-serif' },
  { label: 'Playfair', value: 'Playfair Display, serif' },
  { label: 'Merriweather', value: 'Merriweather, serif' },
  { label: 'Source Code', value: 'Source Code Pro, monospace' },
];

export const TEXT_SIZES = [
  { label: 'XS', value: '12px' },
  { label: 'S', value: '14px' },
  { label: 'M', value: '16px' },
  { label: 'L', value: '20px' },
  { label: 'XL', value: '24px' },
  { label: '2XL', value: '32px' },
];

export const FONT_WEIGHTS = [
  { label: 'Light', value: '300' },
  { label: 'Normal', value: '400' },
  { label: 'Medium', value: '500' },
  { label: 'Semi', value: '600' },
  { label: 'Bold', value: '700' },
];

export const SPACING_PRESETS = [
  { label: 'None', value: '0' },
  { label: 'S', value: '8px' },
  { label: 'M', value: '16px' },
  { label: 'L', value: '24px' },
  { label: 'XL', value: '32px' },
];

export const RADIUS_PRESETS = [
  { label: 'None', value: '0' },
  { label: 'S', value: '8px' },
  { label: 'M', value: '16px' },
  { label: 'L', value: '32px' },
  { label: 'Full', value: '9999px' },
];

// Images need a larger radius scale than buttons/containers to be visually
// distinct on typical photo dimensions.
export const IMAGE_RADIUS_PRESETS = [
  { label: 'None', value: '0' },
  { label: 'S', value: '24px' },
  { label: 'M', value: '48px' },
  { label: 'L', value: '96px' },
  { label: 'Full', value: '9999px' },
];

export const GRADIENTS = [
  { label: 'Purple Dream', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
  { label: 'Pink Sunset', value: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
  { label: 'Ocean Blue', value: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
  { label: 'Green Teal', value: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
  { label: 'Warm Sunrise', value: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
  { label: 'Soft Pastel', value: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)' },
  { label: 'Peach', value: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)' },
  { label: 'Warm Sand', value: 'linear-gradient(135deg, #f5af19 0%, #f12711 100%)' },
  { label: 'Dark Purple', value: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)' },
  { label: 'Dark Blue', value: 'linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%)' },
  { label: 'Dark Gray', value: 'linear-gradient(135deg, #1f2937 0%, #111827 100%)' },
  { label: 'None', value: 'none' },
];

export const DEVICE_WIDTHS: Record<string, string> = {
  desktop: '100%',
  tablet: '768px',
  mobile: '375px',
};

/* ---------- ENH-Foundation shared presets ----------
   Consumed by the reusable StylePanel controls in
   src/panels/right/styles/shared.tsx (SizeControl, AspectRatioControl,
   BorderControl, etc). Kept in the `{ label, value }` shape used throughout
   this file so they drop straight into PresetButtonGrid / ColorSwatchGrid. */

// Width/height preset row used by SizeControl (image + video sizing).
export const SIZE_PRESETS = [
  { label: '25%', value: '25%' },
  { label: '50%', value: '50%' },
  { label: '75%', value: '75%' },
  { label: '100%', value: '100%' },
  { label: 'Auto', value: 'auto' },
  { label: 'Full', value: '100vw' },
];

// CSS `aspect-ratio` values. 'Original' (empty string) clears the property.
export const ASPECT_RATIOS = [
  { label: 'Original', value: '' },
  { label: '1:1', value: '1 / 1' },
  { label: '4:3', value: '4 / 3' },
  { label: '3:2', value: '3 / 2' },
  { label: '16:9', value: '16 / 9' },
  { label: '4:5', value: '4 / 5' },
  { label: '9:16', value: '9 / 16' },
];

// box-shadow presets; 'Colored' is the color-aware option (accent-tinted).
export const SHADOW_PRESETS = [
  { label: 'None', value: 'none' },
  { label: 'S', value: '0 1px 2px rgba(0,0,0,0.08)' },
  { label: 'M', value: '0 4px 8px rgba(0,0,0,0.12)' },
  { label: 'L', value: '0 10px 24px rgba(0,0,0,0.18)' },
  { label: 'Colored', value: '0 8px 20px rgba(59,130,246,0.35)' },
];

export const LINE_HEIGHTS = [
  { label: 'Tight', value: '1.1' },
  { label: 'Snug', value: '1.25' },
  { label: 'Normal', value: '1.5' },
  { label: 'Relaxed', value: '1.75' },
  { label: 'Loose', value: '2' },
];

export const LETTER_SPACINGS = [
  { label: 'Tight', value: '-0.02em' },
  { label: 'Normal', value: 'normal' },
  { label: 'Wide', value: '0.05em' },
  { label: 'Wider', value: '0.1em' },
];

export const OBJECT_FIT = [
  { label: 'Cover', value: 'cover' },
  { label: 'Contain', value: 'contain' },
  { label: 'Fill', value: 'fill' },
  { label: 'None', value: 'none' },
];

export const BORDER_STYLES = [
  { label: 'None', value: 'none' },
  { label: 'Solid', value: 'solid' },
  { label: 'Dashed', value: 'dashed' },
  { label: 'Dotted', value: 'dotted' },
];