@thesage/ui 0.0.9

package/dist/hooks.js

@@ -0,0 +1,1342 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  useForm: () => useForm,
+  useMotionPreference: () => useMotionPreference,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(hooks_exports);
+
+// src/lib/store/theme.ts
+var import_zustand = require("zustand");
+var import_middleware = require("zustand/middleware");
+var useThemeStore = (0, import_zustand.create)()(
+  (0, import_middleware.persist)(
+    (set, get) => ({
+      // Defaults
+      theme: "volt",
+      mode: "dark",
+      // Actions
+      setTheme: (theme) => set({ theme }),
+      setMode: (mode) => set({ mode }),
+      toggleMode: () => set((state) => ({ mode: state.mode === "light" ? "dark" : "light" })),
+      // Computed
+      get themeConfig() {
+        const state = get();
+        return { name: state.theme, mode: state.mode };
+      }
+    }),
+    {
+      name: "ecosystem-theme",
+      // Only persist theme and mode
+      partialize: (state) => ({
+        theme: state.theme,
+        mode: state.mode
+      })
+    }
+  )
+);
+
+// src/hooks/useTheme.ts
+function useTheme() {
+  return useThemeStore();
+}
+
+// src/hooks/useMotionPreference.ts
+var import_react = require("react");
+
+// src/lib/store/customizer.ts
+var import_zustand2 = require("zustand");
+var import_middleware2 = require("zustand/middleware");
+
+// ../tokens/src/base.ts
+var baseTokens = {
+  /**
+   * Spacing scale (based on 4px grid)
+   */
+  spacing: {
+    "0": "0",
+    "0.5": "0.125rem",
+    // 2px
+    "1": "0.25rem",
+    // 4px
+    "2": "0.5rem",
+    // 8px
+    "3": "0.75rem",
+    // 12px
+    "4": "1rem",
+    // 16px
+    "5": "1.25rem",
+    // 20px
+    "6": "1.5rem",
+    // 24px
+    "8": "2rem",
+    // 32px
+    "10": "2.5rem",
+    // 40px
+    "12": "3rem",
+    // 48px
+    "16": "4rem",
+    // 64px
+    "20": "5rem",
+    // 80px
+    "24": "6rem",
+    // 96px
+    "32": "8rem"
+    // 128px
+  },
+  /**
+   * Typography scales
+   */
+  fontSize: {
+    "xs": "0.75rem",
+    // 12px
+    "sm": "0.875rem",
+    // 14px
+    "base": "1rem",
+    // 16px
+    "lg": "1.125rem",
+    // 18px
+    "xl": "1.25rem",
+    // 20px
+    "2xl": "1.5rem",
+    // 24px
+    "3xl": "1.875rem",
+    // 30px
+    "4xl": "2.25rem",
+    // 36px
+    "5xl": "3rem",
+    // 48px
+    "6xl": "3.75rem",
+    // 60px
+    "7xl": "4.5rem",
+    // 72px
+    "8xl": "6rem"
+    // 96px
+  },
+  fontWeight: {
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900"
+  },
+  lineHeight: {
+    none: "1",
+    tight: "1.25",
+    snug: "1.375",
+    normal: "1.5",
+    relaxed: "1.625",
+    loose: "2"
+  },
+  /**
+   * Border radius
+   */
+  borderRadius: {
+    none: "0",
+    sm: "0.125rem",
+    // 2px
+    DEFAULT: "0.25rem",
+    // 4px
+    md: "0.375rem",
+    // 6px
+    lg: "0.5rem",
+    // 8px
+    xl: "0.75rem",
+    // 12px
+    "2xl": "1rem",
+    // 16px
+    "3xl": "1.5rem",
+    // 24px
+    full: "9999px"
+  },
+  /**
+   * Motion durations (base values - themes can override)
+   */
+  duration: {
+    instant: "0ms",
+    fast: "150ms",
+    normal: "300ms",
+    slow: "500ms",
+    slower: "800ms"
+  },
+  /**
+   * Easing curves (base values - themes can override)
+   */
+  ease: {
+    linear: "linear",
+    in: "cubic-bezier(0.4, 0, 1, 1)",
+    out: "cubic-bezier(0, 0, 0.2, 1)",
+    inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  /**
+   * Z-index scale
+   */
+  zIndex: {
+    "auto": "auto",
+    "0": "0",
+    "10": "10",
+    "20": "20",
+    "30": "30",
+    "40": "40",
+    "50": "50",
+    dropdown: "1000",
+    sticky: "1020",
+    fixed: "1030",
+    modalBackdrop: "1040",
+    modal: "1050",
+    popover: "1060",
+    tooltip: "1070"
+  },
+  /**
+   * Focus ring configuration
+   */
+  focus: {
+    width: "2px",
+    offset: "2px",
+    style: "solid"
+  }
+};
+var spacing = {
+  xs: baseTokens.spacing["1"],
+  // 4px  — Tight internal padding
+  sm: baseTokens.spacing["2"],
+  // 8px  — Default gap
+  md: baseTokens.spacing["4"],
+  // 16px — Section padding
+  lg: baseTokens.spacing["6"],
+  // 24px — Card padding
+  xl: baseTokens.spacing["8"],
+  // 32px — Section margins
+  "2xl": baseTokens.spacing["12"],
+  // 48px — Page sections
+  "3xl": baseTokens.spacing["16"]
+  // 64px — Major divisions
+};
+var typography = {
+  fonts: {
+    sans: "var(--font-body)",
+    serif: "var(--font-heading)",
+    mono: "var(--font-mono)"
+  },
+  sizes: {
+    xs: baseTokens.fontSize.xs,
+    // 12px — Fine print
+    sm: baseTokens.fontSize.sm,
+    // 14px — Secondary text
+    base: baseTokens.fontSize.base,
+    // 16px — Body text
+    lg: baseTokens.fontSize.lg,
+    // 18px — Lead paragraphs
+    xl: baseTokens.fontSize.xl,
+    // 20px — Section headers
+    "2xl": baseTokens.fontSize["2xl"],
+    // 24px — Page headers
+    "3xl": baseTokens.fontSize["3xl"]
+    // 30px — Hero text
+  },
+  weights: {
+    normal: baseTokens.fontWeight.normal,
+    // 400
+    medium: baseTokens.fontWeight.medium,
+    // 500
+    semibold: baseTokens.fontWeight.semibold,
+    // 600
+    bold: baseTokens.fontWeight.bold
+    // 700
+  },
+  leading: {
+    tight: baseTokens.lineHeight.tight,
+    // 1.25 — Headings
+    normal: baseTokens.lineHeight.normal,
+    // 1.5  — Body
+    relaxed: baseTokens.lineHeight.relaxed
+    // 1.625 — Spacious reading
+  }
+};
+var motion = {
+  duration: baseTokens.duration,
+  easing: {
+    default: baseTokens.ease.out,
+    // Most transitions
+    spring: "cubic-bezier(0.16, 1, 0.3, 1)",
+    // Playful interactions
+    linear: baseTokens.ease.linear
+    // Progress indicators
+  }
+};
+
+// ../tokens/src/typography.ts
+var fontSizes = {
+  // Body text scale
+  xs: { base: "0.75rem", mobile: "0.75rem" },
+  // 12px
+  sm: { base: "0.875rem", mobile: "0.875rem" },
+  // 14px
+  base: { base: "1rem", mobile: "1rem" },
+  // 16px
+  lg: { base: "1.125rem", mobile: "1rem" },
+  // 18px / 16px mobile
+  xl: { base: "1.25rem", mobile: "1.125rem" },
+  // 20px / 18px mobile
+  "2xl": { base: "1.5rem", mobile: "1.25rem" },
+  // 24px / 20px mobile
+  "3xl": { base: "1.875rem", mobile: "1.5rem" },
+  // 30px / 24px mobile
+  // Heading scale (h6 → h1)
+  "4xl": { base: "2.25rem", mobile: "1.875rem" },
+  // 36px / 30px - h3
+  "5xl": { base: "3rem", mobile: "2.25rem" },
+  // 48px / 36px - h2
+  "6xl": { base: "3.75rem", mobile: "2.5rem" },
+  // 60px / 40px - h1
+  "7xl": { base: "4.5rem", mobile: "3rem" },
+  // 72px / 48px - Display
+  "8xl": { base: "6rem", mobile: "3.75rem" },
+  // 96px / 60px - Hero
+  "9xl": { base: "8rem", mobile: "4.5rem" }
+  // 128px / 72px - Ultra
+};
+var fontWeights = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900"
+};
+var lineHeights = {
+  none: "1",
+  tight: "1.25",
+  snug: "1.375",
+  normal: "1.5",
+  relaxed: "1.625",
+  loose: "1.75",
+  extraloose: "2"
+};
+var letterSpacing = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0",
+  wide: "0.025em",
+  wider: "0.05em",
+  widest: "0.1em"
+};
+var typePresets = {
+  "display-large": {
+    size: fontSizes["8xl"],
+    weight: fontWeights.bold,
+    lineHeight: lineHeights.none,
+    letterSpacing: letterSpacing.tighter,
+    description: "Large hero text, landing pages"
+  },
+  "display": {
+    size: fontSizes["7xl"],
+    weight: fontWeights.bold,
+    lineHeight: lineHeights.tight,
+    letterSpacing: letterSpacing.tight,
+    description: "Hero sections, major headings"
+  },
+  "heading-1": {
+    size: fontSizes["6xl"],
+    weight: fontWeights.bold,
+    lineHeight: lineHeights.tight,
+    letterSpacing: letterSpacing.tight,
+    description: "Page titles, h1"
+  },
+  "heading-2": {
+    size: fontSizes["5xl"],
+    weight: fontWeights.bold,
+    lineHeight: lineHeights.tight,
+    letterSpacing: letterSpacing.normal,
+    description: "Section titles, h2"
+  },
+  "heading-3": {
+    size: fontSizes["4xl"],
+    weight: fontWeights.semibold,
+    lineHeight: lineHeights.snug,
+    letterSpacing: letterSpacing.normal,
+    description: "Subsection titles, h3"
+  },
+  "heading-4": {
+    size: fontSizes["2xl"],
+    weight: fontWeights.semibold,
+    lineHeight: lineHeights.snug,
+    letterSpacing: letterSpacing.normal,
+    description: "Component titles, h4"
+  },
+  "heading-5": {
+    size: fontSizes.xl,
+    weight: fontWeights.medium,
+    lineHeight: lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+    description: "Small headings, h5"
+  },
+  "heading-6": {
+    size: fontSizes.lg,
+    weight: fontWeights.medium,
+    lineHeight: lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+    description: "Tiny headings, h6"
+  },
+  "body-large": {
+    size: fontSizes.lg,
+    weight: fontWeights.normal,
+    lineHeight: lineHeights.relaxed,
+    letterSpacing: letterSpacing.normal,
+    description: "Lead paragraphs, intro text"
+  },
+  "body": {
+    size: fontSizes.base,
+    weight: fontWeights.normal,
+    lineHeight: lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+    description: "Default body text"
+  },
+  "body-small": {
+    size: fontSizes.sm,
+    weight: fontWeights.normal,
+    lineHeight: lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+    description: "Small body text, fine print"
+  },
+  "caption": {
+    size: fontSizes.xs,
+    weight: fontWeights.normal,
+    lineHeight: lineHeights.snug,
+    letterSpacing: letterSpacing.wide,
+    description: "Captions, labels, metadata"
+  },
+  "overline": {
+    size: fontSizes.xs,
+    weight: fontWeights.semibold,
+    lineHeight: lineHeights.normal,
+    letterSpacing: letterSpacing.widest,
+    description: "Eyebrows, categories, all-caps labels"
+  }
+};
+
+// ../tokens/src/color-utils.ts
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+function hexToHSL(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return { h: 0, s: 0, l: 0 };
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s = 0, l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function hslToHex(h, s, l) {
+  h = h / 360;
+  s = s / 100;
+  l = l / 100;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p2, q2, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+      if (t < 1 / 2) return q2;
+      if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+      return p2;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  const toHex = (x) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function adjustLightness(hex, percent) {
+  const hsl = hexToHSL(hex);
+  const newL = Math.max(0, Math.min(100, hsl.l + percent));
+  return hslToHex(hsl.h, hsl.s, newL);
+}
+function adjustSaturation(hex, percent) {
+  const hsl = hexToHSL(hex);
+  const newS = Math.max(0, Math.min(100, hsl.s + percent));
+  return hslToHex(hsl.h, newS, hsl.l);
+}
+function rotateHue(hex, degrees) {
+  const hsl = hexToHSL(hex);
+  const newH = (hsl.h + degrees) % 360;
+  return hslToHex(newH, hsl.s, hsl.l);
+}
+function adjustOpacity(hex, opacity) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+}
+function getLuminance(r, g, b) {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const srgb = c / 255;
+    return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function getContrastRatio(hex1, hex2) {
+  const rgb1 = hexToRgb(hex1);
+  const rgb2 = hexToRgb(hex2);
+  if (!rgb1 || !rgb2) return 0;
+  const lum1 = getLuminance(rgb1.r, rgb1.g, rgb1.b);
+  const lum2 = getLuminance(rgb2.r, rgb2.g, rgb2.b);
+  const lighter = Math.max(lum1, lum2);
+  const darker = Math.min(lum1, lum2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function getOptimalForeground(bgHex, whiteHex = "#ffffff", blackHex = "#000000") {
+  const whiteRatio = getContrastRatio(bgHex, whiteHex);
+  const blackRatio = getContrastRatio(bgHex, blackHex);
+  return whiteRatio > blackRatio ? whiteHex : blackHex;
+}
+
+// ../tokens/src/token-graph.ts
+var primaryColorDerivations = {
+  // Links use primary color
+  "--color-link": {
+    source: "--color-primary",
+    transform: (primary) => primary,
+    description: "Links inherit primary brand color"
+  },
+  // Focus ring uses primary color
+  "--color-ring": {
+    source: "--color-primary",
+    transform: (primary) => primary,
+    description: "Focus rings use primary for brand consistency"
+  },
+  // Link hover is slightly darker primary
+  "--color-link-hover": {
+    source: "--color-primary",
+    transform: (primary) => adjustLightness(primary, -10),
+    description: "Link hover is 10% darker for visual feedback"
+  },
+  // Chart primary series
+  "--chart-1": {
+    source: "--color-primary",
+    transform: (primary) => primary,
+    description: "First chart series uses primary"
+  },
+  // Chart secondary series (lighter tint)
+  "--chart-2": {
+    source: "--color-primary",
+    transform: (primary) => adjustLightness(primary, 20),
+    description: "Second chart series is lighter tint of primary"
+  },
+  // Chart tertiary series (darker shade)
+  "--chart-3": {
+    source: "--color-primary",
+    transform: (primary) => adjustLightness(primary, -15),
+    description: "Third chart series is darker shade of primary"
+  },
+  // Chart quaternary (desaturated primary)
+  "--chart-4": {
+    source: "--color-primary",
+    transform: (primary) => adjustSaturation(primary, -30),
+    description: "Fourth chart series is muted primary"
+  },
+  // Chart quinary (complementary color)
+  "--chart-5": {
+    source: "--color-primary",
+    transform: (primary) => rotateHue(primary, 180),
+    description: "Fifth chart series is complementary to primary"
+  }
+};
+var secondaryColorDerivations = {
+  // Hover states
+  "--color-hover": {
+    source: "--color-secondary",
+    transform: (secondary) => secondary,
+    description: "Hover backgrounds use secondary"
+  },
+  // Active states
+  "--color-active": {
+    source: "--color-secondary",
+    transform: (secondary) => adjustLightness(secondary, -5),
+    description: "Active state is slightly darker secondary"
+  },
+  // Muted backgrounds
+  "--color-muted": {
+    source: "--color-secondary",
+    transform: (secondary) => secondary,
+    description: "Muted sections use secondary color"
+  }
+};
+var accentColorDerivations = {
+  // Info semantic color uses accent
+  "--color-info": {
+    source: "--color-accent",
+    transform: (accent) => accent,
+    description: "Info semantic color uses accent"
+  },
+  // Info foreground calculated for contrast
+  "--color-info-foreground": {
+    source: "--color-accent",
+    transform: (accent) => getOptimalForeground(accent),
+    description: "Info foreground calculated for contrast"
+  }
+};
+var modeSpecificDerivations = {
+  "--color-primary-muted": {
+    light: {
+      source: "--color-primary",
+      transform: (primary) => adjustLightness(primary, 40),
+      description: "Muted primary for light backgrounds"
+    },
+    dark: {
+      source: "--color-primary",
+      transform: (primary) => adjustLightness(primary, -20),
+      description: "Muted primary for dark backgrounds"
+    }
+  },
+  "--color-primary-subtle": {
+    light: {
+      source: "--color-primary",
+      transform: (primary) => adjustOpacity(primary, 0.1),
+      description: "Subtle primary background for light mode"
+    },
+    dark: {
+      source: "--color-primary",
+      transform: (primary) => adjustOpacity(primary, 0.2),
+      description: "Subtle primary background for dark mode"
+    }
+  }
+};
+function computeDerivedTokens(sourceToken, sourceValue, mode) {
+  const derived = {};
+  Object.entries(primaryColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  Object.entries(secondaryColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  Object.entries(accentColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  Object.entries(modeSpecificDerivations).forEach(([token, configs]) => {
+    const config = configs[mode];
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  return derived;
+}
+
+// src/lib/colors.ts
+var colorTokens = {
+  // Background colors
+  background: "var(--color-background)",
+  backgroundSecondary: "var(--color-background-secondary)",
+  backgroundTertiary: "var(--color-background-tertiary)",
+  surface: "var(--color-surface)",
+  // Foreground/Text colors
+  foreground: "var(--color-foreground)",
+  foregroundSecondary: "var(--color-foreground-secondary)",
+  foregroundTertiary: "var(--color-foreground-tertiary)",
+  textPrimary: "var(--color-text-primary)",
+  textSecondary: "var(--color-text-secondary)",
+  textMuted: "var(--color-text-muted)",
+  // Brand colors
+  primary: "var(--color-primary)",
+  primaryForeground: "var(--color-primary-foreground)",
+  secondary: "var(--color-secondary)",
+  secondaryForeground: "var(--color-secondary-foreground)",
+  accent: "var(--color-accent)",
+  accentForeground: "var(--color-accent-foreground)",
+  // Semantic colors
+  success: "var(--color-success)",
+  successForeground: "var(--color-success-foreground)",
+  warning: "var(--color-warning)",
+  warningForeground: "var(--color-warning-foreground)",
+  error: "var(--color-error)",
+  errorForeground: "var(--color-error-foreground)",
+  info: "var(--color-info)",
+  infoForeground: "var(--color-info-foreground)",
+  // Borders
+  border: "var(--color-border)",
+  borderSubtle: "var(--color-border-subtle)",
+  // Interactive states
+  hover: "var(--color-hover)",
+  active: "var(--color-active)",
+  focus: "var(--color-focus)",
+  // Links
+  link: "var(--color-link)",
+  linkHover: "var(--color-link-hover)",
+  linkHoverForeground: "var(--color-link-hover-foreground)"
+};
+var semanticColors = {
+  /**
+   * Status colors for indicating states
+   */
+  status: {
+    success: {
+      bg: colorTokens.success,
+      fg: colorTokens.successForeground
+    },
+    warning: {
+      bg: colorTokens.warning,
+      fg: colorTokens.warningForeground
+    },
+    error: {
+      bg: colorTokens.error,
+      fg: colorTokens.errorForeground
+    },
+    info: {
+      bg: colorTokens.info,
+      fg: colorTokens.infoForeground
+    }
+  },
+  /**
+   * Brand colors for primary UI elements
+   */
+  brand: {
+    primary: {
+      bg: colorTokens.primary,
+      fg: colorTokens.primaryForeground
+    },
+    secondary: {
+      bg: colorTokens.secondary,
+      fg: colorTokens.secondaryForeground
+    },
+    accent: {
+      bg: colorTokens.accent,
+      fg: colorTokens.accentForeground
+    }
+  },
+  /**
+   * Interactive state colors
+   */
+  interactive: {
+    default: {
+      bg: colorTokens.background,
+      fg: colorTokens.foreground
+    },
+    hover: {
+      bg: colorTokens.hover,
+      fg: colorTokens.foreground
+    },
+    active: {
+      bg: colorTokens.active,
+      fg: colorTokens.foreground
+    },
+    focus: {
+      border: colorTokens.focus
+    }
+  }
+};
+function hexToRgb2(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+function getLuminance2(r, g, b) {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const srgb = c / 255;
+    return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function getContrastRatio2(hex1, hex2) {
+  const rgb1 = hexToRgb2(hex1);
+  const rgb2 = hexToRgb2(hex2);
+  if (!rgb1 || !rgb2) return 0;
+  const lum1 = getLuminance2(rgb1.r, rgb1.g, rgb1.b);
+  const lum2 = getLuminance2(rgb2.r, rgb2.g, rgb2.b);
+  const lighter = Math.max(lum1, lum2);
+  const darker = Math.min(lum1, lum2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function hexToHSL2(hex) {
+  const rgb = hexToRgb2(hex);
+  if (!rgb) return { h: 0, s: 0, l: 0 };
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s = 0, l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function hslToHex2(h, s, l) {
+  h = h / 360;
+  s = s / 100;
+  l = l / 100;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p2, q2, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+      if (t < 1 / 2) return q2;
+      if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+      return p2;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  const toHex = (x) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function getOptimalForeground2(bgHex, whiteHex = "#ffffff", blackHex = "#000000") {
+  const whiteRatio = getContrastRatio2(bgHex, whiteHex);
+  const blackRatio = getContrastRatio2(bgHex, blackHex);
+  return whiteRatio > blackRatio ? whiteHex : blackHex;
+}
+function generateColorScale(baseHex) {
+  const hsl = hexToHSL2(baseHex);
+  return {
+    50: hslToHex2(hsl.h, Math.max(hsl.s - 10, 20), 95),
+    100: hslToHex2(hsl.h, Math.max(hsl.s - 5, 30), 90),
+    200: hslToHex2(hsl.h, hsl.s, 80),
+    300: hslToHex2(hsl.h, hsl.s, 70),
+    400: hslToHex2(hsl.h, hsl.s, 60),
+    500: baseHex,
+    // Base color
+    600: hslToHex2(hsl.h, Math.min(hsl.s + 5, 100), 45),
+    700: hslToHex2(hsl.h, Math.min(hsl.s + 10, 100), 35),
+    800: hslToHex2(hsl.h, Math.min(hsl.s + 15, 100), 25),
+    900: hslToHex2(hsl.h, Math.min(hsl.s + 20, 100), 15)
+  };
+}
+
+// src/lib/store/customizer.ts
+var useCustomizer = (0, import_zustand2.create)()(
+  (0, import_middleware2.persist)(
+    (set, get) => ({
+      motion: 5,
+      prefersReducedMotion: false,
+      customizationMode: "simple",
+      customColors: {},
+      savedPalettes: [],
+      customFontThemes: {},
+      savedFontThemes: [],
+      setMotion: (level) => set({ motion: level }),
+      setPrefersReducedMotion: (value) => set({ prefersReducedMotion: value }),
+      setCustomizationMode: (mode) => set({ customizationMode: mode }),
+      setCustomPrimaryColor: (theme, mode, hexColor) => {
+        const state = get();
+        const currentPalette = state.customColors[theme]?.[mode];
+        const scale = generateColorScale(hexColor);
+        const primaryForeground = getOptimalForeground2(hexColor);
+        const derivedTokens = computeDerivedTokens("--color-primary", hexColor, mode);
+        const isSimple = state.customizationMode === "simple";
+        const palette = {
+          primary: hexColor,
+          primaryForeground,
+          secondary: isSimple ? void 0 : currentPalette?.secondary,
+          secondaryForeground: isSimple ? void 0 : currentPalette?.secondaryForeground,
+          accent: isSimple ? void 0 : currentPalette?.accent,
+          accentForeground: isSimple ? void 0 : currentPalette?.accentForeground,
+          scale,
+          derivedTokens
+        };
+        set((state2) => ({
+          customColors: {
+            ...state2.customColors,
+            [theme]: {
+              ...state2.customColors[theme],
+              [mode]: palette
+            }
+          }
+        }));
+      },
+      setCustomSecondaryColor: (theme, mode, hexColor) => {
+        const state = get();
+        const currentPalette = state.customColors[theme]?.[mode];
+        if (!currentPalette) return;
+        const secondaryForeground = getOptimalForeground2(hexColor);
+        const derivedTokens = computeDerivedTokens("--color-secondary", hexColor, mode);
+        set((state2) => ({
+          customColors: {
+            ...state2.customColors,
+            [theme]: {
+              ...state2.customColors[theme],
+              [mode]: {
+                ...currentPalette,
+                secondary: hexColor,
+                secondaryForeground,
+                derivedTokens: {
+                  ...currentPalette.derivedTokens,
+                  ...derivedTokens
+                }
+              }
+            }
+          }
+        }));
+      },
+      setCustomAccentColor: (theme, mode, hexColor) => {
+        const state = get();
+        const currentPalette = state.customColors[theme]?.[mode];
+        if (!currentPalette) return;
+        const accentForeground = getOptimalForeground2(hexColor);
+        const derivedTokens = computeDerivedTokens("--color-accent", hexColor, mode);
+        set((state2) => ({
+          customColors: {
+            ...state2.customColors,
+            [theme]: {
+              ...state2.customColors[theme],
+              [mode]: {
+                ...currentPalette,
+                accent: hexColor,
+                accentForeground,
+                derivedTokens: {
+                  ...currentPalette.derivedTokens,
+                  ...derivedTokens
+                }
+              }
+            }
+          }
+        }));
+      },
+      applyColorPalette: (theme, mode, colors) => {
+        const scale = generateColorScale(colors.primary);
+        const primaryForeground = getOptimalForeground2(colors.primary);
+        let derivedTokens = computeDerivedTokens("--color-primary", colors.primary, mode);
+        let secondary = colors.secondary;
+        let secondaryForeground = secondary ? getOptimalForeground2(secondary) : void 0;
+        if (secondary) {
+          const secondaryDerived = computeDerivedTokens("--color-secondary", secondary, mode);
+          derivedTokens = { ...derivedTokens, ...secondaryDerived };
+        }
+        let accent = colors.accent;
+        let accentForeground = accent ? getOptimalForeground2(accent) : void 0;
+        if (accent) {
+          const accentDerived = computeDerivedTokens("--color-accent", accent, mode);
+          derivedTokens = { ...derivedTokens, ...accentDerived };
+        }
+        const palette = {
+          name: colors.name,
+          description: colors.description,
+          primary: colors.primary,
+          primaryForeground,
+          secondary,
+          secondaryForeground,
+          accent,
+          accentForeground,
+          scale,
+          derivedTokens
+        };
+        set((state) => ({
+          customColors: {
+            ...state.customColors,
+            [theme]: {
+              ...state.customColors[theme],
+              [mode]: palette
+            }
+          }
+        }));
+      },
+      resetCustomColors: (theme, mode) => {
+        if (mode) {
+          set((state) => ({
+            customColors: {
+              ...state.customColors,
+              [theme]: {
+                ...state.customColors[theme],
+                [mode]: void 0
+              }
+            }
+          }));
+        } else {
+          set((state) => {
+            const { [theme]: _, ...rest } = state.customColors;
+            return { customColors: rest };
+          });
+        }
+      },
+      getActiveColorPalette: (theme, mode) => {
+        return get().customColors[theme]?.[mode] || null;
+      },
+      // Saved palette management
+      savePalette: (paletteData) => {
+        const id = `custom-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const newPalette = {
+          ...paletteData,
+          id,
+          category: "custom",
+          createdAt: Date.now()
+        };
+        set((state) => ({
+          savedPalettes: [...state.savedPalettes, newPalette]
+        }));
+      },
+      updatePalette: (id, updates) => {
+        set((state) => ({
+          savedPalettes: state.savedPalettes.map(
+            (p) => p.id === id ? { ...p, ...updates } : p
+          )
+        }));
+      },
+      renamePalette: (id, newName) => {
+        set((state) => ({
+          savedPalettes: state.savedPalettes.map(
+            (p) => p.id === id ? { ...p, name: newName } : p
+          )
+        }));
+      },
+      deletePalette: (id) => {
+        set((state) => ({
+          savedPalettes: state.savedPalettes.filter((p) => p.id !== id)
+        }));
+      },
+      reorderPalettes: (palettes) => {
+        set({ savedPalettes: palettes });
+      },
+      getSavedPalettes: () => {
+        return get().savedPalettes;
+      },
+      // Font theme management
+      applyFontTheme: (theme, mode, fontTheme) => {
+        set((state) => ({
+          customFontThemes: {
+            ...state.customFontThemes,
+            [theme]: {
+              ...state.customFontThemes[theme],
+              [mode]: fontTheme
+            }
+          }
+        }));
+      },
+      resetCustomFonts: (theme, mode) => {
+        if (mode) {
+          set((state) => ({
+            customFontThemes: {
+              ...state.customFontThemes,
+              [theme]: {
+                ...state.customFontThemes[theme],
+                [mode]: void 0
+              }
+            }
+          }));
+        } else {
+          set((state) => {
+            const { [theme]: _, ...rest } = state.customFontThemes;
+            return { customFontThemes: rest };
+          });
+        }
+      },
+      getActiveFontTheme: (theme, mode) => {
+        return get().customFontThemes[theme]?.[mode] || null;
+      },
+      // Saved font theme management
+      saveFontTheme: (fontThemeData) => {
+        const id = `font-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const newFontTheme = {
+          ...fontThemeData,
+          id,
+          category: "custom",
+          createdAt: Date.now(),
+          isCustom: true
+        };
+        set((state) => ({
+          savedFontThemes: [...state.savedFontThemes, newFontTheme]
+        }));
+      },
+      updateFontTheme: (id, updates) => {
+        set((state) => ({
+          savedFontThemes: state.savedFontThemes.map(
+            (ft) => ft.id === id ? { ...ft, ...updates } : ft
+          )
+        }));
+      },
+      renameFontTheme: (id, newName) => {
+        set((state) => ({
+          savedFontThemes: state.savedFontThemes.map(
+            (ft) => ft.id === id ? { ...ft, name: newName } : ft
+          )
+        }));
+      },
+      deleteFontTheme: (id) => {
+        set((state) => ({
+          savedFontThemes: state.savedFontThemes.filter((ft) => ft.id !== id)
+        }));
+      },
+      reorderFontThemes: (fontThemes) => {
+        set({ savedFontThemes: fontThemes });
+      },
+      getSavedFontThemes: () => {
+        return get().savedFontThemes;
+      }
+    }),
+    {
+      name: "ecosystem-customizer",
+      version: 4,
+      partialize: (state) => ({
+        motion: state.motion,
+        prefersReducedMotion: state.prefersReducedMotion,
+        customizationMode: state.customizationMode,
+        customColors: state.customColors,
+        savedPalettes: state.savedPalettes,
+        customFontThemes: state.customFontThemes,
+        savedFontThemes: state.savedFontThemes
+      })
+    }
+  )
+);
+
+// src/hooks/useMotionPreference.ts
+function useMotionPreference() {
+  const { motion: motion2, prefersReducedMotion, setPrefersReducedMotion } = useCustomizer();
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = (e) => {
+      setPrefersReducedMotion(e.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [setPrefersReducedMotion]);
+  return {
+    scale: motion2,
+    shouldAnimate: motion2 > 0 && !prefersReducedMotion,
+    prefersReducedMotion
+  };
+}
+
+// src/hooks/useForm.ts
+var import_react2 = require("react");
+
+// src/lib/validation.ts
+function validateField(value, rules) {
+  if (rules.required) {
+    const isEmpty = value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0;
+    if (isEmpty) {
+      return typeof rules.required === "string" ? rules.required : "This field is required";
+    }
+  }
+  if (!value && !rules.required) {
+    return void 0;
+  }
+  if (rules.minLength && value.length < rules.minLength.value) {
+    return rules.minLength.message;
+  }
+  if (rules.maxLength && value.length > rules.maxLength.value) {
+    return rules.maxLength.message;
+  }
+  if (rules.pattern && !rules.pattern.value.test(value)) {
+    return rules.pattern.message;
+  }
+  if (rules.custom) {
+    for (const rule of rules.custom) {
+      if (!rule.validate(value)) {
+        return rule.message;
+      }
+    }
+  }
+  return void 0;
+}
+function validateForm(values, validations) {
+  const errors = {};
+  for (const [field, rules] of Object.entries(validations)) {
+    const error = validateField(values[field], rules);
+    if (error) {
+      errors[field] = error;
+    }
+  }
+  return errors;
+}
+
+// src/hooks/useForm.ts
+function useForm({
+  initialValues,
+  validations = {},
+  onSubmit,
+  validateOn = "onBlur"
+}) {
+  const [values, setValues] = (0, import_react2.useState)(initialValues);
+  const [errors, setErrors] = (0, import_react2.useState)({});
+  const [isSubmitting, setIsSubmitting] = (0, import_react2.useState)(false);
+  const [isDirty, setIsDirty] = (0, import_react2.useState)(false);
+  const setValue = (0, import_react2.useCallback)((name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    setIsDirty(true);
+  }, []);
+  const setError = (0, import_react2.useCallback)((name, error) => {
+    setErrors((prev) => ({ ...prev, [name]: error }));
+  }, []);
+  const validateFieldByName = (0, import_react2.useCallback)(
+    (name) => {
+      const fieldRules = validations[name];
+      if (!fieldRules) return;
+      const error = validateField(values[name], fieldRules);
+      setError(name, error);
+      return !error;
+    },
+    [values, validations, setError]
+  );
+  const handleChange = (0, import_react2.useCallback)(
+    (e) => {
+      const { name, value, type } = e.target;
+      const fieldValue = type === "checkbox" ? e.target.checked : value;
+      setValue(name, fieldValue);
+      if (validateOn === "onChange") {
+        validateFieldByName(name);
+      }
+    },
+    [setValue, validateOn, validateFieldByName]
+  );
+  const handleBlur = (0, import_react2.useCallback)(
+    (e) => {
+      const { name } = e.target;
+      if (validateOn === "onBlur") {
+        validateFieldByName(name);
+      }
+    },
+    [validateOn, validateFieldByName]
+  );
+  const validate = (0, import_react2.useCallback)(() => {
+    const formErrors = validateForm(values, validations);
+    setErrors(formErrors);
+    return Object.keys(formErrors).length === 0;
+  }, [values, validations]);
+  const handleSubmit = (0, import_react2.useCallback)(
+    async (e) => {
+      e?.preventDefault();
+      const isValid = validate();
+      if (!isValid) return;
+      if (onSubmit) {
+        setIsSubmitting(true);
+        try {
+          await onSubmit(values);
+        } finally {
+          setIsSubmitting(false);
+        }
+      }
+    },
+    [validate, onSubmit, values]
+  );
+  const reset = (0, import_react2.useCallback)(() => {
+    setValues(initialValues);
+    setErrors({});
+    setIsDirty(false);
+    setIsSubmitting(false);
+  }, [initialValues]);
+  const getFieldProps = (0, import_react2.useCallback)(
+    (name) => ({
+      name,
+      value: values[name] ?? "",
+      onChange: handleChange,
+      onBlur: handleBlur,
+      error: !!errors[name]
+    }),
+    [values, errors, handleChange, handleBlur]
+  );
+  return {
+    values,
+    errors,
+    isSubmitting,
+    isDirty,
+    setValue,
+    setError,
+    handleChange,
+    handleBlur,
+    handleSubmit,
+    reset,
+    validate,
+    getFieldProps
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useForm,
+  useMotionPreference,
+  useTheme
+});
+//# sourceMappingURL=hooks.js.map