sovrium 0.0.2

package/src/domain/models/app/theme/animations.ts

@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import { Schema } from 'effect'
+import {
+  DurationSchema,
+  EasingFunctionSchema,
+} from '@/domain/models/app/page/common/interactions/hover-interaction'
+
+/**
+ * Animation configuration object
+ *
+ * Detailed animation config with duration, easing, delay, and keyframes.
+ *
+ * @example
+ * ```typescript
+ * const config = {
+ *   enabled: true,
+ *   duration: '300ms',
+ *   easing: 'ease-in-out',
+ *   delay: '0ms',
+ * }
+ * ```
+ *
+ * @see specs/app/theme/animations/animations.schema.json#/patternProperties/.../oneOf[2]
+ */
+export const AnimationConfigObjectSchema = Schema.Struct({
+  enabled: Schema.optional(Schema.Boolean),
+  duration: Schema.optional(DurationSchema),
+  easing: Schema.optional(EasingFunctionSchema),
+  delay: Schema.optional(DurationSchema),
+  keyframes: Schema.optional(Schema.Record({ key: Schema.String, value: Schema.Unknown })),
+}).pipe(
+  Schema.annotations({
+    title: 'Animation Configuration Object',
+    description: 'Detailed animation configuration',
+  })
+)
+
+/**
+ * Animation value (boolean, string, or object)
+ *
+ * Flexible animation configuration:
+ * - Boolean: Simple enable/disable (true/false)
+ * - String: CSS animation value or class name
+ * - Object: Detailed config (duration, easing, delay, keyframes)
+ *
+ * @example
+ * ```typescript
+ * const simple = true
+ * const className = 'animate-fade-in'
+ * const detailed = {
+ *   enabled: true,
+ *   duration: '300ms',
+ *   easing: 'ease-in-out',
+ * }
+ * ```
+ *
+ * @see specs/app/theme/animations/animations.schema.json#/patternProperties/.../oneOf
+ */
+export const AnimationValueSchema = Schema.Union(
+  Schema.Boolean,
+  Schema.String,
+  AnimationConfigObjectSchema
+).pipe(
+  Schema.annotations({
+    title: 'Animation Value',
+    description: 'Animation configuration (boolean, string, or object)',
+  })
+)
+
+/**
+ * Duration design tokens schema
+ *
+ * Map of duration token names to CSS duration values.
+ *
+ * @example
+ * ```typescript
+ * const durations = {
+ *   fast: '200ms',
+ *   normal: '300ms',
+ *   slow: '500ms',
+ * }
+ * ```
+ */
+const DurationTokensSchema = Schema.Record({
+  key: Schema.String.pipe(
+    Schema.pattern(/^[a-zA-Z][a-zA-Z0-9]*$/, {
+      message: () =>
+        'Duration key must start with a letter and contain only alphanumeric characters',
+    })
+  ),
+  value: DurationSchema,
+})
+
+/**
+ * Easing function design tokens schema
+ *
+ * Map of easing token names to CSS easing functions.
+ *
+ * @example
+ * ```typescript
+ * const easings = {
+ *   smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',
+ *   bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+ * }
+ * ```
+ */
+const EasingTokensSchema = Schema.Record({
+  key: Schema.String.pipe(
+    Schema.pattern(/^[a-zA-Z][a-zA-Z0-9]*$/, {
+      message: () => 'Easing key must start with a letter and contain only alphanumeric characters',
+    })
+  ),
+  value: EasingFunctionSchema,
+})
+
+/**
+ * Keyframes design tokens schema
+ *
+ * Map of keyframe animation names to CSS keyframe definitions.
+ *
+ * @example
+ * ```typescript
+ * const keyframes = {
+ *   fadeIn: {
+ *     from: { opacity: '0' },
+ *     to: { opacity: '1' },
+ *   },
+ *   colorPulse: {
+ *     '0%': { backgroundColor: '$colors.primary' },
+ *     '50%': { backgroundColor: '$colors.accent' },
+ *     '100%': { backgroundColor: '$colors.primary' },
+ *   },
+ * }
+ * ```
+ */
+const KeyframesTokensSchema = Schema.Record({
+  key: Schema.String.pipe(
+    Schema.pattern(/^[a-zA-Z][a-zA-Z0-9]*$/, {
+      message: () =>
+        'Keyframe key must start with a letter and contain only alphanumeric characters',
+    })
+  ),
+  value: Schema.Record({ key: Schema.String, value: Schema.Unknown }),
+})
+
+/**
+ * Animation configuration (animation and transition design tokens)
+ *
+ * Supports two formats:
+ * 1. Nested design tokens (duration, easing, keyframes)
+ * 2. Legacy flat animation names
+ *
+ * @example
+ * ```typescript
+ * // Nested design tokens
+ * const animations = {
+ *   duration: { fast: '200ms', normal: '300ms', slow: '500ms' },
+ *   easing: { smooth: 'cubic-bezier(0.4, 0, 0.2, 1)', bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)' },
+ *   keyframes: {
+ *     fadeIn: { from: { opacity: '0' }, to: { opacity: '1' } },
+ *     colorPulse: { '0%': { backgroundColor: '$colors.primary' }, '50%': { backgroundColor: '$colors.accent' }, '100%': { backgroundColor: '$colors.primary' } },
+ *   },
+ * }
+ *
+ * // Legacy flat animations
+ * const animations = {
+ *   fadeIn: true,
+ *   slideUp: 'animate-slide-up',
+ *   modalOpen: { enabled: true, duration: '300ms', easing: 'ease-in-out' },
+ * }
+ * ```
+ *
+ * @see specs/app/theme/animations/animations.schema.json
+ */
+export const AnimationsConfigSchema = Schema.Record({
+  key: Schema.String.pipe(
+    Schema.pattern(/^[a-zA-Z][a-zA-Z0-9]*$/, {
+      message: () =>
+        'Animation key must start with a letter and contain only alphanumeric characters',
+    }),
+    Schema.annotations({
+      title: 'Animation Key',
+      description: 'Animation name (alphanumeric)',
+      examples: ['fadeIn', 'slideUp', 'modalOpen', 'duration', 'easing', 'keyframes'],
+    })
+  ),
+  value: Schema.Union(
+    AnimationValueSchema,
+    DurationTokensSchema,
+    EasingTokensSchema,
+    KeyframesTokensSchema
+  ),
+}).pipe(
+  Schema.annotations({
+    title: 'Animation Configuration',
+    description: 'Animation and transition design tokens',
+  })
+)
+
+export type AnimationConfigObject = Schema.Schema.Type<typeof AnimationConfigObjectSchema>
+export type AnimationValue = Schema.Schema.Type<typeof AnimationValueSchema>
+export type AnimationsConfig = Schema.Schema.Type<typeof AnimationsConfigSchema>

package/src/domain/models/app/theme/border-radius.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import { Schema } from 'effect'
+
+/**
+ * Border radius configuration (design tokens for rounded corners)
+ *
+ * Map of semantic radius names to CSS border-radius values.
+ * Supports progressive rounding scale:
+ * - none: 0 (sharp corners)
+ * - sm, md, lg, xl, 2xl, 3xl: progressive rounding
+ * - full: 9999px (perfect circles/pills)
+ *
+ * @example
+ * ```typescript
+ * const borderRadius = {
+ *   none: '0',
+ *   sm: '0.125rem',
+ *   md: '0.375rem',
+ *   lg: '0.5rem',
+ *   full: '9999px',
+ * }
+ * ```
+ *
+ * @see specs/app/theme/border-radius/border-radius.schema.json
+ */
+export const BorderRadiusConfigSchema = Schema.Record({
+  key: Schema.String.pipe(
+    Schema.pattern(/^(DEFAULT|[a-z0-9]+(-[a-z0-9]+)*)$/, {
+      message: () =>
+        'Border radius key must be DEFAULT or use kebab-case format (lowercase letters/numbers)',
+    }),
+    Schema.annotations({
+      title: 'Border Radius Key',
+      description: 'Semantic radius name (kebab-case with numbers) or DEFAULT for base radius',
+      examples: ['DEFAULT', 'none', 'sm', 'md', 'lg', '2xl', '3xl', 'full'],
+    })
+  ),
+  value: Schema.String.pipe(
+    Schema.annotations({
+      title: 'Border Radius Value',
+      description: 'CSS border-radius value',
+      examples: ['0', '0.125rem', '0.5rem', '9999px'],
+    })
+  ),
+}).pipe(
+  Schema.annotations({
+    title: 'Border Radius',
+    description: 'Border radius design tokens',
+  })
+)
+
+export type BorderRadiusConfig = Schema.Schema.Type<typeof BorderRadiusConfigSchema>

package/src/domain/models/app/theme/breakpoints.ts

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import { Schema } from 'effect'
+
+/**
+ * Breakpoints configuration (responsive design breakpoints)
+ *
+ * Map of breakpoint names to pixel values.
+ * Standard Tailwind breakpoints:
+ * - sm: 640px (mobile)
+ * - md: 768px (tablet)
+ * - lg: 1024px (laptop)
+ * - xl: 1280px (desktop)
+ * - 2xl: 1536px (large desktop)
+ *
+ * @example
+ * ```typescript
+ * const breakpoints = {
+ *   sm: '640px',
+ *   md: '768px',
+ *   lg: '1024px',
+ *   xl: '1280px',
+ *   '2xl': '1536px',
+ * }
+ * ```
+ *
+ * @see specs/app/theme/breakpoints/breakpoints.schema.json
+ */
+export const BreakpointsConfigSchema = Schema.Record({
+  key: Schema.String.pipe(
+    Schema.pattern(/^[a-z0-9]+$/, {
+      message: () => 'Breakpoint key must be lowercase alphanumeric',
+    }),
+    Schema.annotations({
+      title: 'Breakpoint Key',
+      description: 'Breakpoint name (lowercase alphanumeric)',
+      examples: ['sm', 'md', 'lg', 'xl', '2xl'],
+    })
+  ),
+  value: Schema.String.pipe(
+    Schema.pattern(/^[0-9]+px$/, {
+      message: () => 'Breakpoint value must be in pixels (e.g., "640px")',
+    }),
+    Schema.annotations({
+      title: 'Breakpoint Value',
+      description: 'Breakpoint value in pixels',
+      examples: ['640px', '768px', '1024px', '1280px'],
+    })
+  ),
+}).pipe(
+  Schema.annotations({
+    title: 'Breakpoints',
+    description: 'Responsive design breakpoints',
+  })
+)
+
+export type BreakpointsConfig = Schema.Schema.Type<typeof BreakpointsConfigSchema>

package/src/domain/models/app/theme/colors.ts

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import { Schema } from 'effect'
+
+/**
+ * Color name in kebab-case format
+ *
+ * Supports semantic naming (primary, secondary) and variants:
+ * - Base colors: primary, secondary, success, danger
+ * - Variants: primary-hover, primary-light, primary-dark
+ * - Numbered scales: gray-100, gray-200, ..., gray-900
+ *
+ * @example
+ * ```typescript
+ * const base = 'primary'
+ * const variant = 'primary-hover'
+ * const scale = 'gray-500'
+ * ```
+ *
+ * @see specs/app/theme/colors/colors.schema.json#/patternProperties
+ */
+export const ColorNameSchema = Schema.String.pipe(
+  Schema.pattern(/^[a-z]+[a-z0-9]*(-[a-z0-9]+)*$/, {
+    message: () =>
+      'Color name must use kebab-case format: lowercase letters and numbers separated by hyphens (e.g., "primary", "text-muted", "gray-500")',
+  }),
+  Schema.annotations({
+    title: 'Color Name',
+    description: 'Color name in kebab-case format',
+    examples: ['primary', 'primary-hover', 'gray-500', 'text-muted'],
+  })
+)
+
+/**
+ * Color value in various CSS formats
+ *
+ * Supports multiple color formats:
+ * - Hex 6-digit: #007bff (standard)
+ * - Hex 8-digit: #007bff80 (with alpha channel)
+ * - RGB: rgb(255, 0, 0)
+ * - RGBA: rgba(255, 0, 0, 0.5)
+ * - HSL: hsl(210, 100%, 50%)
+ * - HSLA: hsla(210, 100%, 50%, 0.8)
+ *
+ * @example
+ * ```typescript
+ * const hex6 = '#007bff'
+ * const hex8 = '#007bff80'  // 50% opacity
+ * const rgb = 'rgb(0, 123, 255)'
+ * const hsl = 'hsl(210, 100%, 50%)'
+ * ```
+ *
+ * @see specs/app/theme/colors/colors.schema.json#/patternProperties/.../pattern
+ */
+export const ColorValueSchema = Schema.String.pipe(
+  Schema.pattern(/^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{8}$|^rgb\(|^rgba\(|^hsl\(|^hsla\(/, {
+    message: () => 'Color value must be in hex (#RRGGBB or #RRGGBBAA), rgb(a), or hsl(a) format',
+  }),
+  Schema.annotations({
+    title: 'Color Value',
+    description: 'Color value in hex, rgb, rgba, hsl, or hsla format',
+    examples: ['#007bff', '#007bff80', 'rgb(0, 123, 255)', 'hsl(210, 100%, 50%)'],
+  })
+)
+
+/**
+ * Color palette (design tokens)
+ *
+ * Map of semantic color names to CSS color values.
+ * Supports comprehensive color systems with:
+ * - Semantic colors (primary, secondary, success, danger, warning, info)
+ * - Variants (hover states, light/dark tints)
+ * - Numbered scales (gray-100 to gray-900)
+ * - Multiple formats (hex, rgb, hsl with optional alpha)
+ *
+ * @example
+ * ```typescript
+ * const colors = {
+ *   primary: '#007bff',
+ *   'primary-hover': '#0056b3',
+ *   'primary-light': '#e7f1ff',
+ *   secondary: '#6c757d',
+ *   success: '#28a745',
+ *   danger: '#dc3545',
+ *   'gray-100': '#f8f9fa',
+ *   'gray-500': '#adb5bd',
+ *   'gray-900': '#212529',
+ * }
+ * ```
+ *
+ * @see specs/app/theme/colors/colors.schema.json
+ */
+export const ColorsConfigSchema = Schema.Record({
+  key: ColorNameSchema,
+  value: ColorValueSchema,
+}).pipe(
+  Schema.annotations({
+    title: 'Color Palette',
+    description: 'Color design tokens with support for semantic naming and variants',
+  })
+)
+
+export type ColorName = Schema.Schema.Type<typeof ColorNameSchema>
+export type ColorValue = Schema.Schema.Type<typeof ColorValueSchema>
+export type ColorsConfig = Schema.Schema.Type<typeof ColorsConfigSchema>

package/src/domain/models/app/theme/fonts.ts

@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import { Schema } from 'effect'
+
+/**
+ * Font weight (100-900 in increments of 100)
+ */
+export const FontWeightSchema = Schema.Literal(100, 200, 300, 400, 500, 600, 700, 800, 900).pipe(
+  Schema.annotations({
+    title: 'Font Weight',
+    description: 'Font weight value (100-900 in increments of 100)',
+  })
+)
+
+/**
+ * Font style (normal, italic, oblique)
+ */
+export const FontStyleSchema = Schema.Literal('normal', 'italic', 'oblique').pipe(
+  Schema.annotations({
+    title: 'Font Style',
+    description: 'Font style',
+  })
+)
+
+/**
+ * Text transformation (none, uppercase, lowercase, capitalize)
+ */
+export const FontTransformSchema = Schema.Literal(
+  'none',
+  'uppercase',
+  'lowercase',
+  'capitalize'
+).pipe(
+  Schema.annotations({
+    title: 'Text Transform',
+    description: 'Text transformation',
+  })
+)
+
+/**
+ * Font category name (alphabetic characters only: title, body, mono, etc.)
+ */
+export const FontCategoryKeySchema = Schema.String.pipe(
+  Schema.pattern(/^[a-zA-Z]+$/, {
+    message: () => 'Font category key must contain only alphabetic characters (a-zA-Z)',
+  }),
+  Schema.annotations({
+    title: 'Font Category Key',
+    description: 'Semantic font category name (alphabetic characters only)',
+    examples: ['title', 'body', 'mono', 'heading', 'label'],
+  })
+)
+
+/**
+ * Individual font configuration (family, fallback, weights, style, size, lineHeight, letterSpacing, transform, url)
+ *
+ * @see specs/app/theme/fonts/fonts.schema.json#/patternProperties/...
+ */
+export const FontConfigItemSchema = Schema.Struct({
+  family: Schema.String.pipe(
+    Schema.annotations({
+      title: 'Font Family',
+      description: 'Primary font family name',
+    })
+  ),
+  fallback: Schema.optional(
+    Schema.String.pipe(
+      Schema.annotations({
+        title: 'Fallback Font Stack',
+        description: 'Fallback font stack',
+        examples: ['system-ui, sans-serif', 'Georgia, serif', 'monospace'],
+      })
+    )
+  ),
+  weights: Schema.optional(
+    Schema.Array(FontWeightSchema).pipe(
+      Schema.annotations({
+        title: 'Font Weights',
+        description: 'Available font weights',
+        examples: [
+          [400, 700],
+          [300, 400, 500, 600, 700],
+        ],
+      })
+    )
+  ),
+  style: Schema.optional(
+    FontStyleSchema.pipe(
+      Schema.annotations({
+        default: 'normal',
+      })
+    )
+  ),
+  size: Schema.optional(
+    Schema.String.pipe(
+      Schema.annotations({
+        title: 'Font Size',
+        description: 'Default font size',
+        examples: ['16px', '1rem', '14px'],
+      })
+    )
+  ),
+  lineHeight: Schema.optional(
+    Schema.String.pipe(
+      Schema.annotations({
+        title: 'Line Height',
+        description: 'Default line height',
+        examples: ['1.5', '1.75', '24px'],
+      })
+    )
+  ),
+  letterSpacing: Schema.optional(
+    Schema.String.pipe(
+      Schema.annotations({
+        title: 'Letter Spacing',
+        description: 'Letter spacing',
+        examples: ['0', '0.05em', '-0.01em'],
+      })
+    )
+  ),
+  transform: Schema.optional(FontTransformSchema),
+  url: Schema.optional(
+    Schema.String.pipe(
+      Schema.annotations({
+        title: 'Font URL',
+        description: 'Font file URL or Google Fonts URL',
+        examples: ['https://fonts.googleapis.com/css2?family=Inter', '/fonts/bely-display.woff2'],
+      })
+    )
+  ),
+}).pipe(
+  Schema.annotations({
+    title: 'Font Configuration Item',
+    description: 'Individual font configuration with family and optional properties',
+  })
+)
+
+/**
+ * Font configuration (map of semantic font categories to font configurations)
+ *
+ * @see specs/app/theme/fonts/fonts.schema.json
+ */
+export const FontsConfigSchema = Schema.Record({
+  key: FontCategoryKeySchema,
+  value: FontConfigItemSchema,
+}).pipe(
+  Schema.annotations({
+    title: 'Font Configuration',
+    description: 'Typography design tokens for font families and styles',
+  })
+)
+
+// Type exports
+export type FontWeight = Schema.Schema.Type<typeof FontWeightSchema>
+export type FontStyle = Schema.Schema.Type<typeof FontStyleSchema>
+export type FontTransform = Schema.Schema.Type<typeof FontTransformSchema>
+export type FontCategoryKey = Schema.Schema.Type<typeof FontCategoryKeySchema>
+export type FontConfigItem = Schema.Schema.Type<typeof FontConfigItemSchema>
+export type FontsConfig = Schema.Schema.Type<typeof FontsConfigSchema>

package/src/domain/models/app/theme/shadows.ts

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import { Schema } from 'effect'
+
+/**
+ * Shadow configuration (box shadow design tokens)
+ *
+ * Map of semantic shadow names to CSS box-shadow values.
+ * Supports elevation system:
+ * - sm, md, lg, xl, 2xl: progressive depth
+ * - inner: inset shadows
+ * - none: no shadow
+ *
+ * @example
+ * ```typescript
+ * const shadows = {
+ *   sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+ *   md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+ *   lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
+ *   inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+ *   none: '0 0 #0000',
+ * }
+ * ```
+ *
+ * @see specs/app/theme/shadows/shadows.schema.json
+ */
+export const ShadowsConfigSchema = Schema.Record({
+  key: Schema.String.pipe(
+    Schema.pattern(/^[a-z0-9]+(-[a-z0-9]+)*$/, {
+      message: () => 'Shadow key must use kebab-case format (lowercase letters/numbers)',
+    }),
+    Schema.annotations({
+      title: 'Shadow Key',
+      description: 'Semantic shadow name (kebab-case with numbers)',
+      examples: ['sm', 'md', 'lg', 'xl', '2xl', 'inner', 'none'],
+    })
+  ),
+  value: Schema.String.pipe(
+    Schema.annotations({
+      title: 'Shadow Value',
+      description: 'CSS box-shadow value',
+      examples: [
+        '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+        'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+      ],
+    })
+  ),
+}).pipe(
+  Schema.annotations({
+    title: 'Shadows',
+    description: 'Box shadow design tokens',
+  })
+)
+
+export type ShadowsConfig = Schema.Schema.Type<typeof ShadowsConfigSchema>