@tachui/core 0.8.0-alpha → 0.8.5-alpha

package/dist/index-JQ1sW1SK.js

@@ -0,0 +1,2049 @@
+import "@tachui/types/gradients";
+import { gradientToCSS as v } from "./gradients/css-generator.js";
+class D {
+  constructor(t) {
+    this.name = t;
+  }
+}
+class U extends D {
+  constructor(t, r) {
+    super(t), this.definitions = r;
+  }
+  resolve() {
+    const t = this.getCurrentTheme(), r = this.definitions[t] || this.definitions.light;
+    return v(r);
+  }
+  getCurrentTheme() {
+    return typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+}
+function at(e) {
+  return new U("gradient-asset", e);
+}
+var z = Object.defineProperty, q = (e, t, r) => t in e ? z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, R = (e, t, r) => q(e, typeof t != "symbol" ? t + "" : t, r);
+class _ extends D {
+  constructor(t, r) {
+    super(t), this.stateGradients = r, R(this, "currentState", "default"), R(this, "animationOptions"), R(this, "resolvedGradientCache", /* @__PURE__ */ new Map()), R(this, "isTransitioning", !1), this.animationOptions = r.animation || {
+      duration: 300,
+      easing: "ease",
+      delay: 0
+    }, this.preResolveGradients();
+  }
+  /**
+   * Set the current interaction state
+   */
+  setState(t) {
+    t !== this.currentState && this.stateGradients[t] && !this.isTransitioning && (this.currentState = t, this.animationOptions.duration && this.animationOptions.duration > 0 && (this.isTransitioning = !0, setTimeout(() => {
+      this.isTransitioning = !1;
+    }, this.animationOptions.duration + (this.animationOptions.delay || 0))));
+  }
+  /**
+   * Get the current state
+   */
+  getState() {
+    return this.currentState;
+  }
+  /**
+   * Resolve the current gradient to CSS
+   */
+  resolve() {
+    const t = this.currentState;
+    if (this.resolvedGradientCache.has(t))
+      return this.resolvedGradientCache.get(t);
+    const r = this.stateGradients[this.currentState] || this.stateGradients.default, n = this.resolveGradientValue(r);
+    return this.resolvedGradientCache.set(t, n), n;
+  }
+  /**
+   * Get gradient for a specific state without changing current state
+   */
+  getStateGradient(t) {
+    const r = this.stateGradients[t] || this.stateGradients.default;
+    return this.resolveGradientValue(r);
+  }
+  /**
+   * Get animation CSS properties for transitions
+   */
+  getAnimationCSS() {
+    const { duration: t, easing: r, delay: n } = this.animationOptions;
+    return `transition: background ${t}ms ${r} ${n || 0}ms;`;
+  }
+  /**
+   * Get all available states
+   */
+  getAvailableStates() {
+    return Object.keys(this.stateGradients).filter(
+      (t) => this.stateGradients[t] !== void 0
+    );
+  }
+  /**
+   * Check if a state is available
+   */
+  hasState(t) {
+    return t in this.stateGradients && this.stateGradients[t] !== void 0;
+  }
+  /**
+   * Update animation options
+   */
+  setAnimation(t) {
+    this.animationOptions = { ...this.animationOptions, ...t };
+  }
+  resolveGradientValue(t) {
+    return typeof t == "string" ? t : this.isAsset(t) ? t.resolve() : this.isGradientDefinition(t) ? v(t) : "";
+  }
+  isAsset(t) {
+    return t && typeof t == "object" && typeof t.resolve == "function";
+  }
+  isGradientDefinition(t) {
+    return t && typeof t == "object" && "type" in t && "options" in t;
+  }
+  /**
+   * Pre-resolve all gradients to improve runtime performance
+   */
+  preResolveGradients() {
+    Object.keys(this.stateGradients).forEach((t) => {
+      const r = t;
+      if (r !== "animation" && this.stateGradients[r]) {
+        const n = this.resolveGradientValue(this.stateGradients[r]);
+        this.resolvedGradientCache.set(r, n);
+      }
+    });
+  }
+  /**
+   * Clear the gradient cache (useful when gradients change dynamically)
+   */
+  clearCache() {
+    this.resolvedGradientCache.clear(), this.preResolveGradients();
+  }
+  /**
+   * Force update animation options and clear cache if needed
+   */
+  updateStateGradients(t) {
+    this.stateGradients = t, this.animationOptions = t.animation || this.animationOptions, this.clearCache();
+  }
+}
+function m(e, t) {
+  return new _(e, t);
+}
+const f = {
+  // iOS-style colors
+  ios: {
+    blue: ["#007AFF", "#0051D2"],
+    green: ["#30D158", "#248A3D"],
+    red: ["#FF3B30", "#CC2E26"]
+  },
+  // Material Design colors
+  material: {
+    blue: ["#2196F3", "#1976D2"]
+  },
+  // Modern web gradients
+  modern: {
+    ocean: ["#667eea", "#764ba2"],
+    sunset: ["#ff7e5f", "#feb47b"],
+    aurora: ["#4facfe", "#00f2fe"]
+  },
+  // Neutral gradients
+  neutral: {
+    lightGray: ["#f8f9fa", "#e9ecef"],
+    darkGray: ["#495057", "#212529"]
+  }
+}, T = {
+  // Direction-based presets
+  vertical: (e) => i({
+    colors: e,
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  horizontal: (e) => i({
+    colors: e,
+    startPoint: "leading",
+    endPoint: "trailing"
+  }),
+  diagonal: (e) => i({
+    colors: e,
+    startPoint: "topLeading",
+    endPoint: "bottomTrailing"
+  }),
+  diagonalReverse: (e) => i({
+    colors: e,
+    startPoint: "topTrailing",
+    endPoint: "bottomLeading"
+  }),
+  // Popular gradient patterns
+  iosBlue: () => i({
+    colors: [...f.ios.blue],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  materialBlue: () => i({
+    colors: [...f.material.blue],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  ocean: () => i({
+    colors: [...f.modern.ocean],
+    startPoint: "topLeading",
+    endPoint: "bottomTrailing"
+  }),
+  sunset: () => i({
+    colors: [...f.modern.sunset],
+    startPoint: "leading",
+    endPoint: "trailing"
+  }),
+  aurora: () => i({
+    colors: [...f.modern.aurora],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  // Multi-color gradients
+  rainbow: () => i({
+    colors: ["#ff0000", "#ff7f00", "#ffff00", "#00ff00", "#0000ff", "#8f00ff"],
+    startPoint: "leading",
+    endPoint: "trailing",
+    stops: [0, 16.66, 33.33, 50, 66.66, 83.33, 100]
+  }),
+  prism: () => i({
+    colors: ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#feca57"],
+    startPoint: "topLeading",
+    endPoint: "bottomTrailing"
+  }),
+  // Card and surface gradients
+  cardLight: () => i({
+    colors: [...f.neutral.lightGray],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  cardDark: () => i({
+    colors: [...f.neutral.darkGray],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  glass: () => i({
+    colors: ["rgba(255, 255, 255, 0.25)", "rgba(255, 255, 255, 0.05)"],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  frosted: () => i({
+    colors: ["rgba(255, 255, 255, 0.1)", "rgba(255, 255, 255, 0.3)"],
+    startPoint: "topLeading",
+    endPoint: "bottomTrailing"
+  })
+}, A = {
+  primaryButton: () => ({
+    default: T.iosBlue(),
+    hover: i({
+      colors: ["#1A8FFF", "#0062E3"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    active: i({
+      colors: ["#0066CC", "#004499"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    disabled: "#CCCCCC",
+    animation: {
+      duration: 150,
+      easing: "ease-out"
+    }
+  }),
+  secondaryButton: () => ({
+    default: T.cardLight(),
+    hover: i({
+      colors: ["#e9ecef", "#dee2e6"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    active: i({
+      colors: ["#dee2e6", "#ced4da"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    animation: {
+      duration: 100,
+      easing: "ease-out"
+    }
+  }),
+  dangerButton: () => ({
+    default: i({
+      colors: [...f.ios.red],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    hover: i({
+      colors: ["#FF5A52", "#D13029"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    active: i({
+      colors: ["#E6342C", "#B32821"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    disabled: "#CCCCCC",
+    animation: {
+      duration: 120,
+      easing: "ease-out"
+    }
+  }),
+  successButton: () => ({
+    default: i({
+      colors: [...f.ios.green],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    hover: i({
+      colors: ["#40D866", "#2C8F45"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    active: i({
+      colors: ["#28B946", "#1F7A35"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    disabled: "#CCCCCC",
+    animation: {
+      duration: 120,
+      easing: "ease-out"
+    }
+  }),
+  hoverCard: () => ({
+    default: "#FFFFFF",
+    hover: T.glass(),
+    animation: {
+      duration: 200,
+      easing: "ease"
+    }
+  }),
+  focusInput: () => ({
+    default: "#FFFFFF",
+    focus: i({
+      colors: ["#F0F8FF", "#E6F3FF"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    disabled: "#F5F5F5",
+    animation: {
+      duration: 100,
+      easing: "ease-in-out"
+    }
+  })
+}, st = {
+  /**
+   * Create a theme-responsive gradient that switches between light and dark variants
+   */
+  createThemeGradient: (e, t) => e,
+  /**
+   * Auto-generate dark mode variant of a gradient
+   */
+  createDarkVariant: (e) => e
+}, lt = {
+  /**
+   * Reverse the colors in a gradient
+   */
+  reverse: (e) => {
+    const t = { ...e };
+    return "colors" in t.options && (t.options = {
+      ...t.options,
+      colors: [...t.options.colors].reverse()
+    }), t;
+  },
+  /**
+   * Rotate a linear gradient by swapping start and end points
+   */
+  rotate: (e) => ({
+    ...e,
+    startPoint: e.endPoint,
+    endPoint: e.startPoint
+  }),
+  /**
+   * Add transparency to gradient colors
+   */
+  withOpacity: (e, t) => e,
+  /**
+   * Blend two gradients together
+   */
+  blend: (e, t, r = 0.5) => e
+};
+({
+  ...T,
+  ...A
+});
+const b = {
+  /**
+   * Check if value is a valid gradient definition
+   */
+  isGradientDefinition(e) {
+    if (!e || typeof e != "object") return !1;
+    const t = e;
+    return typeof t.type == "string" && ["linear", "radial", "angular", "conic", "repeating-linear", "repeating-radial", "elliptical"].includes(t.type) && t.options !== void 0 && typeof t.options == "object" && t.options !== null;
+  },
+  /**
+   * Check if value is a linear gradient
+   */
+  isLinearGradient(e) {
+    return this.isGradientDefinition(e) && e.type === "linear";
+  },
+  /**
+   * Check if value is a radial gradient
+   */
+  isRadialGradient(e) {
+    return this.isGradientDefinition(e) && e.type === "radial";
+  },
+  /**
+   * Check if value is an angular gradient
+   */
+  isAngularGradient(e) {
+    return this.isGradientDefinition(e) && e.type === "angular";
+  },
+  /**
+   * Check if value is a state gradient configuration
+   */
+  isStateGradientOptions(e) {
+    if (!e || typeof e != "object") return !1;
+    const t = e;
+    return "default" in t && t.default !== void 0;
+  },
+  /**
+   * Check if value is a stateful background value
+   */
+  isStatefulBackgroundValue(e) {
+    return !!(typeof e == "string" || this.isGradientDefinition(e) || this.isAsset(e) || this.isStateGradientOptions(e));
+  },
+  /**
+   * Check if value is an Asset
+   */
+  isAsset(e) {
+    return e !== null && typeof e == "object" && "resolve" in e && typeof e.resolve == "function";
+  },
+  /**
+   * Check if value is a valid gradient start point
+   */
+  isGradientStartPoint(e) {
+    return typeof e == "string" && [
+      "top",
+      "bottom",
+      "leading",
+      "trailing",
+      "center",
+      "topLeading",
+      "topTrailing",
+      "bottomLeading",
+      "bottomTrailing"
+    ].includes(e);
+  },
+  /**
+   * Check if value is a valid gradient center
+   */
+  isGradientCenter(e) {
+    return typeof e == "string" ? ["center", "top", "bottom", "leading", "trailing"].includes(e) : Array.isArray(e) ? e.length === 2 && typeof e[0] == "number" && typeof e[1] == "number" : !1;
+  }
+}, w = {
+  /**
+   * Validate color format (hex, rgb, rgba, hsl, hsla, named colors, CSS custom properties)
+   */
+  validateColor(e) {
+    return b.isAsset(e) ? { valid: !0 } : typeof e != "string" ? { valid: !1, error: "Color must be a string or Asset" } : /^(transparent|inherit|initial|unset|currentcolor)$/i.test(e) ? { valid: !0 } : /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e) ? { valid: !0 } : /^rgba?\(\s*(\d+(?:\.\d+)?%?)\s*,\s*(\d+(?:\.\d+)?%?)\s*,\s*(\d+(?:\.\d+)?%?)\s*(?:,\s*(\d+(?:\.\d+)?%?))?\s*\)$/i.test(e) ? { valid: !0 } : /^hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?%)\s*,\s*(\d+(?:\.\d+)?%)\s*(?:,\s*(\d+(?:\.\d+)?%?))?\s*\)$/i.test(e) ? { valid: !0 } : /^var\(--[a-zA-Z][a-zA-Z0-9-]*\)$/.test(e) ? { valid: !0 } : { valid: !1, error: `Invalid color format: ${e}` };
+  },
+  /**
+   * Validate gradient colors array
+   */
+  validateColors(e) {
+    const t = [];
+    return Array.isArray(e) ? e.length < 2 ? { valid: !1, errors: ["Gradient must have at least 2 colors"] } : (e.forEach((r, n) => {
+      const o = this.validateColor(r);
+      o.valid || t.push(`Color at index ${n}: ${o.error}`);
+    }), { valid: t.length === 0, errors: t }) : { valid: !1, errors: ["Colors must be an array"] };
+  },
+  /**
+   * Validate color stops array
+   */
+  validateStops(e, t) {
+    if (!Array.isArray(e))
+      return { valid: !1, error: "Stops must be an array" };
+    if (e.length !== t)
+      return { valid: !1, error: "Stops array length must match colors array length" };
+    for (let r = 0; r < e.length; r++) {
+      const n = e[r];
+      if (typeof n != "number")
+        return { valid: !1, error: `Stop at index ${r} must be a number` };
+      if (n < 0 || n > 100)
+        return { valid: !1, error: `Stop at index ${r} must be between 0 and 100` };
+      if (r > 0 && n < e[r - 1])
+        return { valid: !1, error: `Stops must be in ascending order. Stop at index ${r} (${n}) is less than previous stop (${e[r - 1]})` };
+    }
+    return { valid: !0 };
+  },
+  /**
+   * Validate linear gradient options
+   */
+  validateLinearGradient(e) {
+    const t = [], r = this.validateColors(e.colors);
+    if (r.valid || t.push(...r.errors), e.stops) {
+      const n = this.validateStops(e.stops, e.colors.length);
+      n.valid || t.push(n.error);
+    }
+    return b.isGradientStartPoint(e.startPoint) || t.push(`Invalid startPoint: ${e.startPoint}`), b.isGradientStartPoint(e.endPoint) || t.push(`Invalid endPoint: ${e.endPoint}`), e.angle !== void 0 && (typeof e.angle != "number" ? t.push("Angle must be a number") : (e.angle < 0 || e.angle > 360) && t.push("Angle must be between 0 and 360 degrees")), { valid: t.length === 0, errors: t };
+  },
+  /**
+   * Validate radial gradient options
+   */
+  validateRadialGradient(e) {
+    const t = [], r = this.validateColors(e.colors);
+    if (r.valid || t.push(...r.errors), e.stops) {
+      const n = this.validateStops(e.stops, e.colors.length);
+      n.valid || t.push(n.error);
+    }
+    return b.isGradientCenter(e.center) || t.push(`Invalid center: ${e.center}`), (typeof e.startRadius != "number" || e.startRadius < 0) && t.push("startRadius must be a non-negative number"), (typeof e.endRadius != "number" || e.endRadius < 0) && t.push("endRadius must be a non-negative number"), e.startRadius >= e.endRadius && t.push("endRadius must be greater than startRadius"), e.shape && !["circle", "ellipse"].includes(e.shape) && t.push(`Invalid shape: ${e.shape}. Must be 'circle' or 'ellipse'`), { valid: t.length === 0, errors: t };
+  },
+  /**
+   * Validate angular gradient options
+   */
+  validateAngularGradient(e) {
+    const t = [], r = this.validateColors(e.colors);
+    return r.valid || t.push(...r.errors), b.isGradientCenter(e.center) || t.push(`Invalid center: ${e.center}`), typeof e.startAngle != "number" && t.push("startAngle must be a number"), typeof e.endAngle != "number" && t.push("endAngle must be a number"), { valid: t.length === 0, errors: t };
+  },
+  /**
+   * Validate animation options
+   */
+  validateAnimationOptions(e) {
+    const t = [];
+    return e.duration !== void 0 && (typeof e.duration != "number" || e.duration < 0) && t.push("Duration must be a non-negative number"), e.delay !== void 0 && (typeof e.delay != "number" || e.delay < 0) && t.push("Delay must be a non-negative number"), e.easing !== void 0 && typeof e.easing != "string" && t.push("Easing must be a string"), { valid: t.length === 0, errors: t };
+  },
+  /**
+   * Validate state gradient options
+   */
+  validateStateGradientOptions(e) {
+    const t = [];
+    if (e.default || t.push("Default state is required"), ["default", "hover", "active", "focus", "disabled"].forEach((n) => {
+      const o = e[n];
+      o && !b.isStatefulBackgroundValue(o) && t.push(`Invalid ${n} state value`);
+    }), e.animation) {
+      const n = this.validateAnimationOptions(e.animation);
+      n.valid || t.push(...n.errors.map((o) => `Animation: ${o}`));
+    }
+    return { valid: t.length === 0, errors: t };
+  },
+  /**
+   * Comprehensive gradient validation
+   */
+  validateGradient(e) {
+    if (!b.isGradientDefinition(e))
+      return { valid: !1, errors: ["Invalid gradient definition structure"] };
+    switch (e.type) {
+      case "linear":
+        return this.validateLinearGradient(e.options);
+      case "radial":
+        return this.validateRadialGradient(e.options);
+      case "angular":
+      case "conic":
+        return this.validateAngularGradient(e.options);
+      default:
+        return { valid: !1, errors: [`Unsupported gradient type: ${e.type}`] };
+    }
+  }
+}, ct = (e) => {
+  const t = w.validateGradient(e);
+  if (!t.valid)
+    throw new Error(`Invalid gradient: ${t.errors.join(", ")}`);
+  return e;
+}, dt = (e) => {
+  const t = w.validateStateGradientOptions(e);
+  if (!t.valid)
+    throw new Error(`Invalid state gradient: ${t.errors.join(", ")}`);
+  return e;
+}, ut = {
+  /**
+   * Assert gradient is valid (throws in development, no-op in production)
+   */
+  assertValidGradient(e) {
+    if (process.env.NODE_ENV === "development") {
+      const t = w.validateGradient(e);
+      if (!t.valid)
+        throw console.error("Invalid gradient:", e), console.error("Validation errors:", t.errors), new Error(`Invalid gradient: ${t.errors.join(", ")}`);
+    }
+  },
+  /**
+   * Warn about potential gradient issues
+   */
+  warnGradientIssues(e) {
+    process.env.NODE_ENV === "development" && "colors" in e.options && e.options.colors.length > 5 && console.warn("Gradient has many colors which may impact performance:", e);
+  }
+};
+var J = Object.defineProperty, W = (e, t, r) => t in e ? J(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, F = (e, t, r) => W(e, typeof t != "symbol" ? t + "" : t, r);
+class M extends D {
+  constructor(t, r, n) {
+    super(t), this.reactiveDefinition = r, F(this, "currentGradient"), F(this, "subscriptions", []), F(this, "updateCallback"), this.updateCallback = n, this.currentGradient = this.resolveStaticGradient(), this.setupSignalSubscriptions();
+  }
+  /**
+   * Resolve current gradient to CSS
+   */
+  resolve() {
+    return this.gradientToCSS(this.currentGradient);
+  }
+  /**
+   * Get current static gradient (resolved from signals)
+   */
+  getCurrentGradient() {
+    return this.currentGradient;
+  }
+  /**
+   * Update the reactive definition and re-subscribe to signals
+   */
+  updateDefinition(t) {
+    this.cleanup(), this.reactiveDefinition = t, this.currentGradient = this.resolveStaticGradient(), this.setupSignalSubscriptions(), this.notifyUpdate();
+  }
+  /**
+   * Clean up signal subscriptions
+   */
+  cleanup() {
+    this.subscriptions.forEach((t) => t()), this.subscriptions = [];
+  }
+  resolveStaticGradient() {
+    const { type: t, options: r } = this.reactiveDefinition;
+    switch (t) {
+      case "linear":
+        return i(
+          this.resolveLinearOptions(r)
+        );
+      case "radial":
+        return g(
+          this.resolveRadialOptions(r)
+        );
+      case "angular":
+      case "conic":
+        return B(
+          this.resolveAngularOptions(r)
+        );
+      default:
+        throw new Error(`Unsupported reactive gradient type: ${t}`);
+    }
+  }
+  resolveLinearOptions(t) {
+    return {
+      colors: t.colors.map((r) => this.resolveValue(r)),
+      stops: t.stops?.map((r) => this.resolveValue(r)),
+      startPoint: this.resolveValue(t.startPoint),
+      endPoint: this.resolveValue(t.endPoint),
+      angle: t.angle ? this.resolveValue(t.angle) : void 0
+    };
+  }
+  resolveRadialOptions(t) {
+    return {
+      colors: t.colors.map((r) => this.resolveValue(r)),
+      stops: t.stops?.map((r) => this.resolveValue(r)),
+      center: this.resolveValue(t.center),
+      startRadius: this.resolveValue(t.startRadius),
+      endRadius: this.resolveValue(t.endRadius),
+      shape: t.shape ? this.resolveValue(t.shape) : void 0
+    };
+  }
+  resolveAngularOptions(t) {
+    return {
+      colors: t.colors.map((r) => this.resolveValue(r)),
+      stops: t.stops?.map((r) => this.resolveValue(r)),
+      center: this.resolveValue(t.center),
+      startAngle: this.resolveValue(t.startAngle),
+      endAngle: this.resolveValue(t.endAngle)
+    };
+  }
+  resolveValue(t) {
+    return this.isSignal(t) ? t.value : t;
+  }
+  isSignal(t) {
+    return t !== null && typeof t == "object" && "value" in t && "subscribe" in t;
+  }
+  setupSignalSubscriptions() {
+    this.subscribeToSignalsInOptions(this.reactiveDefinition.options);
+  }
+  subscribeToSignalsInOptions(t) {
+    for (const [r, n] of Object.entries(t))
+      if (Array.isArray(n))
+        n.forEach((o) => {
+          if (this.isSignal(o)) {
+            const a = o.subscribe(
+              () => this.handleSignalChange()
+            );
+            this.subscriptions.push(a);
+          }
+        });
+      else if (this.isSignal(n)) {
+        const o = n.subscribe(
+          () => this.handleSignalChange()
+        );
+        this.subscriptions.push(o);
+      }
+  }
+  handleSignalChange() {
+    this.currentGradient = this.resolveStaticGradient(), this.notifyUpdate();
+  }
+  notifyUpdate() {
+    this.updateCallback && this.updateCallback();
+  }
+  gradientToCSS(t) {
+    return v(t);
+  }
+}
+class d extends _ {
+  constructor(t, r, n) {
+    const o = d.resolveStateOptions(
+      r
+    );
+    super(t, o), this.reactiveStateGradients = r, this.updateCallback = n, F(this, "reactiveSubscriptions", []), this.setupStateSignalSubscriptions();
+  }
+  /**
+   * Update reactive state configuration
+   */
+  updateReactiveState(t) {
+    this.cleanupStateSubscriptions(), this.reactiveStateGradients = t;
+    const r = d.resolveStateOptions(t);
+    this.updateStateGradients(r), this.setupStateSignalSubscriptions(), this.notifyStateUpdate();
+  }
+  /**
+   * Clean up signal subscriptions
+   */
+  cleanupStateSubscriptions() {
+    this.reactiveSubscriptions.forEach((t) => t()), this.reactiveSubscriptions = [];
+  }
+  static resolveStateOptions(t) {
+    const r = {
+      default: d.resolveValue(
+        t.default
+      ),
+      animation: t.animation
+    };
+    return t.hover && (r.hover = d.resolveValue(
+      t.hover
+    )), t.active && (r.active = d.resolveValue(
+      t.active
+    )), t.focus && (r.focus = d.resolveValue(
+      t.focus
+    )), t.disabled && (r.disabled = d.resolveValue(
+      t.disabled
+    )), r;
+  }
+  static resolveValue(t) {
+    return t !== null && typeof t == "object" && "value" in t && "subscribe" in t ? t.value : t;
+  }
+  static isSignal(t) {
+    return t !== null && typeof t == "object" && "value" in t && "subscribe" in t;
+  }
+  setupStateSignalSubscriptions() {
+    Object.entries(this.reactiveStateGradients).forEach(([t, r]) => {
+      if (t !== "animation" && d.isSignal(r)) {
+        const n = r.subscribe(
+          () => this.handleStateSignalChange()
+        );
+        this.reactiveSubscriptions.push(n);
+      }
+    });
+  }
+  handleStateSignalChange() {
+    const t = d.resolveStateOptions(
+      this.reactiveStateGradients
+    );
+    this.updateStateGradients(t), this.notifyStateUpdate();
+  }
+  notifyStateUpdate() {
+    this.updateCallback && this.updateCallback();
+  }
+}
+const O = {
+  /**
+   * Create a reactive linear gradient
+   */
+  linear: (e, t) => new M(
+    "reactive-linear",
+    { type: "linear", options: e, __reactive: !0 },
+    t
+  ),
+  /**
+   * Create a reactive radial gradient
+   */
+  radial: (e, t) => new M(
+    "reactive-radial",
+    { type: "radial", options: e, __reactive: !0 },
+    t
+  ),
+  /**
+   * Create a reactive angular gradient
+   */
+  angular: (e, t) => new M(
+    "reactive-angular",
+    { type: "angular", options: e, __reactive: !0 },
+    t
+  ),
+  /**
+   * Create a reactive state gradient
+   */
+  state: (e, t, r) => new d(e, t, r)
+}, ft = {
+  /**
+   * Create an animated gradient that cycles through colors
+   */
+  createAnimatedGradient: (e, t = 3e3) => {
+    const r = {
+      value: e[0],
+      subscribe: (n) => () => {
+      }
+    };
+    return O.linear({
+      colors: [r, e[1]],
+      startPoint: "top",
+      endPoint: "bottom"
+    });
+  },
+  /**
+   * Create a progress gradient that fills based on a signal
+   */
+  createProgressGradient: (e, t = "#007AFF") => O.linear({
+    colors: [t, "transparent"],
+    stops: [e, e],
+    // Both stops use the same signal
+    startPoint: "leading",
+    endPoint: "trailing"
+  }),
+  /**
+   * Create a data-driven gradient that reflects numeric values
+   */
+  createDataGradient: (e, t, r, n = ["#ff0000", "#ffff00", "#00ff00"]) => O.linear({
+    colors: n,
+    startPoint: "top",
+    endPoint: "bottom"
+  })
+}, pt = {
+  /**
+   * Check if a background value is reactive
+   */
+  isReactiveBackground: (e) => e instanceof M || e instanceof d,
+  /**
+   * Create a reactive background from a signal
+   */
+  fromSignal: (e) => O.state("signal-background", {
+    default: e
+  })
+}, s = {
+  /**
+   * Parse hex color to RGB components
+   */
+  hexToRgb: (e) => {
+    const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
+    return t ? {
+      r: parseInt(t[1], 16),
+      g: parseInt(t[2], 16),
+      b: parseInt(t[3], 16)
+    } : null;
+  },
+  /**
+   * Convert RGB to hex
+   */
+  rgbToHex: (e, t, r) => "#" + ((1 << 24) + (e << 16) + (t << 8) + r).toString(16).slice(1),
+  /**
+   * Add transparency to a color
+   */
+  withAlpha: (e, t) => {
+    if (e.startsWith("#")) {
+      const r = s.hexToRgb(e);
+      if (r)
+        return `rgba(${r.r}, ${r.g}, ${r.b}, ${t})`;
+    }
+    return e.startsWith("rgb(") ? e.replace("rgb(", "rgba(").replace(")", `, ${t})`) : e.startsWith("rgba(") ? e.replace(/,\s*[\d.]+\)$/, `, ${t})`) : e;
+  },
+  /**
+   * Blend two colors
+   */
+  blendColors: (e, t, r = 0.5) => {
+    const n = s.hexToRgb(e), o = s.hexToRgb(t);
+    if (!n || !o) return e;
+    const a = Math.round(n.r * (1 - r) + o.r * r), l = Math.round(n.g * (1 - r) + o.g * r), u = Math.round(n.b * (1 - r) + o.b * r);
+    return s.rgbToHex(a, l, u);
+  },
+  /**
+   * Generate color variations (lighter/darker)
+   */
+  lighten: (e, t = 0.2) => s.blendColors(e, "#ffffff", t),
+  darken: (e, t = 0.2) => s.blendColors(e, "#000000", t),
+  /**
+   * Generate complementary color
+   */
+  complement: (e) => {
+    const t = s.hexToRgb(e);
+    return t ? s.rgbToHex(255 - t.r, 255 - t.g, 255 - t.b) : e;
+  },
+  /**
+   * Get contrast ratio between two colors
+   */
+  getContrastRatio: (e, t) => {
+    const r = (u) => {
+      const h = s.hexToRgb(u);
+      if (!h) return 0;
+      const [x, I, j] = [h.r, h.g, h.b].map((y) => (y = y / 255, y <= 0.03928 ? y / 12.92 : Math.pow((y + 0.055) / 1.055, 2.4)));
+      return 0.2126 * x + 0.7152 * I + 0.0722 * j;
+    }, n = r(e), o = r(t), a = Math.max(n, o), l = Math.min(n, o);
+    return (a + 0.05) / (l + 0.05);
+  }
+}, k = {
+  /**
+   * Reverse gradient colors
+   */
+  reverse: (e) => {
+    const t = { ...e };
+    return "colors" in t.options && (t.options = {
+      ...t.options,
+      colors: [...t.options.colors].reverse(),
+      stops: t.options.stops ? [...t.options.stops].reverse() : void 0
+    }), t;
+  },
+  /**
+   * Rotate linear gradient direction
+   */
+  rotateLinear: (e, t) => {
+    if (e.type !== "linear") return e;
+    const r = e.options;
+    return {
+      ...e,
+      options: {
+        ...r,
+        angle: (r.angle || 0) + t
+      }
+    };
+  },
+  /**
+   * Scale radial gradient
+   */
+  scaleRadial: (e, t) => {
+    if (e.type !== "radial") return e;
+    const r = e.options;
+    return {
+      ...e,
+      options: {
+        ...r,
+        startRadius: r.startRadius * t,
+        endRadius: r.endRadius * t
+      }
+    };
+  },
+  /**
+   * Add transparency to entire gradient
+   */
+  withOpacity: (e, t) => {
+    const r = { ...e };
+    return "colors" in r.options && (r.options = {
+      ...r.options,
+      colors: r.options.colors.map(
+        (n) => typeof n == "string" ? s.withAlpha(n, t) : n
+      )
+    }), r;
+  },
+  /**
+   * Mirror a linear gradient (swap start and end points)
+   */
+  mirror: (e) => {
+    if (e.type !== "linear") return e;
+    const t = e.options;
+    return {
+      ...e,
+      options: {
+        ...t,
+        startPoint: t.endPoint,
+        endPoint: t.startPoint
+      }
+    };
+  },
+  /**
+   * Convert linear gradient to radial
+   */
+  toRadial: (e, t = 100) => {
+    if (e.type !== "linear") return e;
+    const r = e.options;
+    return g({
+      colors: r.colors,
+      stops: r.stops,
+      center: "center",
+      startRadius: 0,
+      endRadius: t
+    });
+  },
+  /**
+   * Convert to angular/conic gradient
+   */
+  toAngular: (e) => "colors" in e.options ? B({
+    colors: e.options.colors,
+    stops: e.options.stops,
+    center: "center",
+    startAngle: 0,
+    endAngle: 360
+  }) : e
+}, p = {
+  /**
+   * Get gradient color count
+   */
+  getColorCount: (e) => "colors" in e.options ? e.options.colors.length : 0,
+  /**
+   * Extract colors from gradient
+   */
+  extractColors: (e) => "colors" in e.options ? [...e.options.colors] : [],
+  /**
+   * Get gradient complexity score (for performance optimization)
+   */
+  getComplexityScore: (e) => {
+    let t = 0;
+    switch ("colors" in e.options && (t += e.options.colors.length * 2, t += e.options.stops ? e.options.stops.length : 0), e.type) {
+      case "linear":
+        t += 1;
+        break;
+      case "radial":
+        t += 3;
+        break;
+      case "angular":
+        t += 4;
+        break;
+      case "repeating-linear":
+        t += 5;
+        break;
+      case "repeating-radial":
+        t += 6;
+        break;
+    }
+    return t;
+  },
+  /**
+   * Check if gradient has transparency
+   */
+  hasTransparency: (e) => "colors" in e.options ? e.options.colors.some(
+    (t) => typeof t == "string" && (t.includes("rgba") || t.includes("transparent") || t.includes("hsla"))
+  ) : !1,
+  /**
+   * Estimate rendering performance impact
+   */
+  getPerformanceImpact: (e) => {
+    const t = p.getComplexityScore(e);
+    return t <= 5 ? "low" : t <= 10 ? "medium" : "high";
+  }
+}, K = {
+  /**
+   * Generate rainbow gradient
+   */
+  rainbow: (e = 6) => {
+    const t = [];
+    for (let r = 0; r < e; r++) {
+      const n = r * 360 / e;
+      t.push(`hsl(${n}, 100%, 50%)`);
+    }
+    return i({
+      colors: t,
+      startPoint: "leading",
+      endPoint: "trailing"
+    });
+  },
+  /**
+   * Generate monochromatic gradient
+   */
+  monochromatic: (e, t = 5) => {
+    const r = [];
+    for (let n = 0; n < t; n++) {
+      const o = n / (t - 1);
+      o < 0.5 ? r.push(s.lighten(e, 0.4 - o * 0.8)) : r.push(s.darken(e, (o - 0.5) * 0.8));
+    }
+    return i({
+      colors: r,
+      startPoint: "top",
+      endPoint: "bottom"
+    });
+  },
+  /**
+   * Generate analogous color gradient
+   */
+  analogous: (e, t = 60) => i({
+    colors: [e, s.lighten(e, 0.2), s.darken(e, 0.2)],
+    startPoint: "topLeading",
+    endPoint: "bottomTrailing"
+  }),
+  /**
+   * Generate complementary gradient
+   */
+  complementary: (e, t) => {
+    const r = t || s.complement(e);
+    return i({
+      colors: [e, r],
+      startPoint: "topLeading",
+      endPoint: "bottomTrailing"
+    });
+  },
+  /**
+   * Generate sunset gradient
+   */
+  sunset: () => i({
+    colors: ["#ff7e5f", "#feb47b", "#ff6b6b", "#c44569"],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  /**
+   * Generate ocean gradient
+   */
+  ocean: () => i({
+    colors: ["#667eea", "#764ba2", "#667eea"],
+    startPoint: "topLeading",
+    endPoint: "bottomTrailing"
+  })
+}, Z = {
+  /**
+   * Create hover effect gradient
+   */
+  createHoverEffect: (e, t = 0.1) => {
+    const r = k.withOpacity(
+      k.reverse(e),
+      1 - t
+    );
+    return {
+      default: e,
+      hover: r,
+      animation: {
+        duration: 200,
+        easing: "ease-out"
+      }
+    };
+  },
+  /**
+   * Create button gradient states
+   */
+  createButtonStates: (e, t = "primary") => {
+    const n = {
+      primary: { base: e, hover: s.lighten(e, 0.1), active: s.darken(e, 0.1) },
+      secondary: { base: "#f8f9fa", hover: "#e9ecef", active: "#dee2e6" },
+      danger: { base: "#dc3545", hover: s.lighten("#dc3545", 0.1), active: s.darken("#dc3545", 0.1) }
+    }[t];
+    return {
+      default: i({
+        colors: [n.base, s.darken(n.base, 0.05)],
+        startPoint: "top",
+        endPoint: "bottom"
+      }),
+      hover: i({
+        colors: [n.hover, s.darken(n.hover, 0.05)],
+        startPoint: "top",
+        endPoint: "bottom"
+      }),
+      active: i({
+        colors: [n.active, s.darken(n.active, 0.05)],
+        startPoint: "top",
+        endPoint: "bottom"
+      }),
+      disabled: "#cccccc",
+      animation: {
+        duration: 150,
+        easing: "ease-out"
+      }
+    };
+  },
+  /**
+   * Create card hover effect
+   */
+  createCardHover: (e = "#ffffff") => ({
+    default: e,
+    hover: i({
+      colors: [
+        s.withAlpha("#ffffff", 0.1),
+        s.withAlpha("#f8f9fa", 0.1)
+      ],
+      startPoint: "topLeading",
+      endPoint: "bottomTrailing"
+    }),
+    animation: {
+      duration: 200,
+      easing: "ease"
+    }
+  })
+}, Q = {
+  /**
+   * Generate CSS custom properties for gradient
+   */
+  toCustomProperties: (e, t = "gradient") => {
+    const r = v(e);
+    return {
+      [`--${t}-background`]: r
+    };
+  },
+  /**
+   * Generate fallback CSS for older browsers
+   */
+  withFallback: (e, t) => {
+    const r = v(e);
+    return `background: ${t}; background: ${r};`;
+  },
+  /**
+   * Optimize CSS for performance
+   */
+  optimize: (e) => e.replace(/\s+/g, " ").replace(/,\s+/g, ",").replace(/:\s+/g, ":").trim()
+}, c = {
+  ...s,
+  ...k,
+  ...p,
+  ...K,
+  ...Z,
+  ...Q,
+  /**
+   * Convert any background value to CSS
+   */
+  toCSS: (e) => typeof e == "string" ? e : "resolve" in e && typeof e.resolve == "function" ? e.resolve() : "type" in e && "options" in e ? v(e) : "default" in e ? c.toCSS(e.default) : "transparent",
+  /**
+   * Deep clone gradient definition
+   */
+  clone: (e) => JSON.parse(JSON.stringify(e)),
+  /**
+   * Compare two gradients for equality
+   */
+  equals: (e, t) => JSON.stringify(e) === JSON.stringify(t)
+}, G = {
+  /**
+   * iOS-style primary button
+   */
+  iosPrimary: () => ({
+    default: i({
+      colors: ["#007AFF", "#0051D2"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    hover: i({
+      colors: ["#1A8FFF", "#0062E3"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    active: i({
+      colors: ["#0066CC", "#004499"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    disabled: "#CCCCCC",
+    animation: { duration: 150, easing: "ease-out" }
+  }),
+  /**
+   * Material Design raised button
+   */
+  materialRaised: () => ({
+    default: i({
+      colors: ["#2196F3", "#1976D2"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    hover: i({
+      colors: ["#42A5F5", "#1E88E5"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    active: i({
+      colors: ["#1565C0", "#0D47A1"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    animation: { duration: 200, easing: "cubic-bezier(0.4, 0, 0.2, 1)" }
+  }),
+  /**
+   * Glass morphism button
+   */
+  glassMorphism: () => ({
+    default: i({
+      colors: ["rgba(255, 255, 255, 0.25)", "rgba(255, 255, 255, 0.05)"],
+      startPoint: "topLeading",
+      endPoint: "bottomTrailing"
+    }),
+    hover: i({
+      colors: ["rgba(255, 255, 255, 0.35)", "rgba(255, 255, 255, 0.15)"],
+      startPoint: "topLeading",
+      endPoint: "bottomTrailing"
+    }),
+    active: i({
+      colors: ["rgba(255, 255, 255, 0.15)", "rgba(255, 255, 255, 0.25)"],
+      startPoint: "topLeading",
+      endPoint: "bottomTrailing"
+    }),
+    animation: { duration: 250, easing: "ease" }
+  }),
+  /**
+   * Neon glow button
+   */
+  neonGlow: (e = "#00ff88") => ({
+    default: i({
+      colors: [e, c.darken(e, 0.3)],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    hover: g({
+      colors: [c.lighten(e, 0.2), e, c.darken(e, 0.4)],
+      center: "center",
+      startRadius: 0,
+      endRadius: 60
+    }),
+    active: i({
+      colors: [c.darken(e, 0.2), c.darken(e, 0.4)],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    animation: { duration: 300, easing: "ease-in-out" }
+  }),
+  /**
+   * Gradient call-to-action button
+   */
+  ctaButton: () => ({
+    default: i({
+      colors: ["#ff416c", "#ff4b2b"],
+      startPoint: "topLeading",
+      endPoint: "bottomTrailing"
+    }),
+    hover: i({
+      colors: ["#ff6b9d", "#ff6347"],
+      startPoint: "topLeading",
+      endPoint: "bottomTrailing"
+    }),
+    active: i({
+      colors: ["#e63946", "#d62828"],
+      startPoint: "topLeading",
+      endPoint: "bottomTrailing"
+    }),
+    animation: { duration: 175, easing: "ease-out" }
+  })
+}, P = {
+  /**
+   * Subtle card hover effect
+   */
+  subtleHover: () => ({
+    default: "#ffffff",
+    hover: i({
+      colors: ["#f8f9fa", "#ffffff"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    animation: { duration: 200, easing: "ease" }
+  }),
+  /**
+   * Dark mode card
+   */
+  darkCard: () => ({
+    default: i({
+      colors: ["#2d3748", "#1a202c"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    hover: i({
+      colors: ["#4a5568", "#2d3748"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    animation: { duration: 250, easing: "ease-in-out" }
+  }),
+  /**
+   * Hero card with rich gradient
+   */
+  heroCard: () => i({
+    colors: [
+      "#667eea",
+      "#764ba2",
+      "rgba(118, 75, 162, 0.8)"
+    ],
+    startPoint: "topLeading",
+    endPoint: "bottomTrailing"
+  }),
+  /**
+   * Pricing card with accent
+   */
+  pricingCard: (e = "#007AFF") => i({
+    colors: [
+      "#ffffff",
+      "#f8f9fa",
+      c.withAlpha(e, 0.05)
+    ],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  /**
+   * Testimonial card
+   */
+  testimonialCard: () => i({
+    colors: [
+      "rgba(255, 255, 255, 0.9)",
+      "rgba(248, 249, 250, 0.9)",
+      "rgba(233, 236, 239, 0.9)"
+    ],
+    startPoint: "topLeading",
+    endPoint: "bottomTrailing"
+  })
+}, X = {
+  /**
+   * App header gradient
+   */
+  appHeader: () => i({
+    colors: ["#667eea", "#764ba2"],
+    startPoint: "leading",
+    endPoint: "trailing"
+  }),
+  /**
+   * Tab bar gradient
+   */
+  tabBar: () => ({
+    default: i({
+      colors: ["#f8f9fa", "#e9ecef"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    hover: i({
+      colors: ["#e9ecef", "#dee2e6"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    animation: { duration: 150, easing: "ease-out" }
+  }),
+  /**
+   * Sidebar gradient
+   */
+  sidebar: () => i({
+    colors: [
+      "#2d3748",
+      "#1a202c",
+      "#171923"
+    ],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  /**
+   * Navigation breadcrumb
+   */
+  breadcrumb: () => ({
+    default: "transparent",
+    hover: i({
+      colors: ["rgba(0, 122, 255, 0.1)", "rgba(0, 122, 255, 0.05)"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    animation: { duration: 100, easing: "ease-out" }
+  })
+}, S = {
+  /**
+   * Text input focus effect
+   */
+  textInputFocus: () => ({
+    default: "#ffffff",
+    focus: i({
+      colors: ["#f0f8ff", "#e6f3ff"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    disabled: "#f5f5f5",
+    animation: { duration: 100, easing: "ease-in-out" }
+  }),
+  /**
+   * Form section background
+   */
+  formSection: () => i({
+    colors: [
+      "rgba(248, 249, 250, 0.8)",
+      "rgba(255, 255, 255, 0.8)",
+      "rgba(248, 249, 250, 0.8)"
+    ],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  /**
+   * Submit button gradient
+   */
+  submitButton: () => ({
+    default: i({
+      colors: ["#30d158", "#248a3d"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    hover: i({
+      colors: ["#40d866", "#2c8f45"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    active: i({
+      colors: ["#28b946", "#1f7a35"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    animation: { duration: 120, easing: "ease-out" }
+  }),
+  /**
+   * Error state input
+   */
+  errorInput: () => ({
+    default: i({
+      colors: ["rgba(255, 59, 48, 0.1)", "rgba(255, 59, 48, 0.05)"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    focus: i({
+      colors: ["rgba(255, 59, 48, 0.15)", "rgba(255, 59, 48, 0.08)"],
+      startPoint: "top",
+      endPoint: "bottom"
+    }),
+    animation: { duration: 150, easing: "ease-in-out" }
+  })
+}, Y = {
+  /**
+   * Metric card with positive trend
+   */
+  positiveMetric: () => i({
+    colors: ["#d4edda", "#c3e6cb", "#b8dacc"],
+    startPoint: "topLeading",
+    endPoint: "bottomTrailing"
+  }),
+  /**
+   * Metric card with negative trend
+   */
+  negativeMetric: () => i({
+    colors: ["#f8d7da", "#f5c6cb", "#f1b0b7"],
+    startPoint: "topLeading",
+    endPoint: "bottomTrailing"
+  }),
+  /**
+   * Chart background
+   */
+  chartBackground: () => i({
+    colors: [
+      "rgba(255, 255, 255, 0.95)",
+      "rgba(248, 249, 250, 0.95)",
+      "rgba(255, 255, 255, 0.95)"
+    ],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  /**
+   * Progress bar gradient
+   */
+  progressBar: (e = "#007AFF") => i({
+    colors: [
+      c.lighten(e, 0.1),
+      e,
+      c.darken(e, 0.1)
+    ],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  /**
+   * Status indicator gradients
+   */
+  statusSuccess: () => g({
+    colors: ["#30d158", "#248a3d", "rgba(36, 138, 61, 0.8)"],
+    center: "center",
+    startRadius: 0,
+    endRadius: 25
+  }),
+  statusWarning: () => g({
+    colors: ["#ff9500", "#cc7700", "rgba(204, 119, 0, 0.8)"],
+    center: "center",
+    startRadius: 0,
+    endRadius: 25
+  }),
+  statusError: () => g({
+    colors: ["#ff3b30", "#cc2e26", "rgba(204, 46, 38, 0.8)"],
+    center: "center",
+    startRadius: 0,
+    endRadius: 25
+  })
+}, tt = {
+  /**
+   * Shimmer loading effect
+   */
+  shimmer: () => i({
+    colors: [
+      "rgba(255, 255, 255, 0)",
+      "rgba(255, 255, 255, 0.4)",
+      "rgba(255, 255, 255, 0.8)",
+      "rgba(255, 255, 255, 0.4)",
+      "rgba(255, 255, 255, 0)"
+    ],
+    startPoint: "leading",
+    endPoint: "trailing",
+    stops: [0, 25, 50, 75, 100]
+  }),
+  /**
+   * Skeleton loading gradient
+   */
+  skeleton: () => i({
+    colors: ["#f6f7f8", "#edeef1", "#f6f7f8"],
+    startPoint: "leading",
+    endPoint: "trailing"
+  }),
+  /**
+   * Pulse animation gradient
+   */
+  pulse: (e = "#007AFF") => g({
+    colors: [
+      c.withAlpha(e, 0.8),
+      c.withAlpha(e, 0.4),
+      c.withAlpha(e, 0.1),
+      "transparent"
+    ],
+    center: "center",
+    startRadius: 0,
+    endRadius: 100
+  }),
+  /**
+   * Spinner gradient
+   */
+  spinner: () => B({
+    colors: [
+      "#007AFF",
+      "rgba(0, 122, 255, 0.8)",
+      "rgba(0, 122, 255, 0.4)",
+      "rgba(0, 122, 255, 0.1)",
+      "transparent",
+      "transparent",
+      "#007AFF"
+    ],
+    center: "center",
+    startAngle: 0,
+    endAngle: 360
+  })
+}, $ = {
+  /**
+   * App background gradient
+   */
+  appBackground: () => i({
+    colors: [
+      "#f8f9fa",
+      "#ffffff",
+      "#f8f9fa"
+    ],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  /**
+   * Dark mode app background
+   */
+  darkAppBackground: () => i({
+    colors: [
+      "#1a1a1a",
+      "#0f0f0f",
+      "#1a1a1a"
+    ],
+    startPoint: "top",
+    endPoint: "bottom"
+  }),
+  /**
+   * Modal backdrop
+   */
+  modalBackdrop: () => g({
+    colors: [
+      "rgba(0, 0, 0, 0.4)",
+      "rgba(0, 0, 0, 0.6)",
+      "rgba(0, 0, 0, 0.8)"
+    ],
+    center: "center",
+    startRadius: 0,
+    endRadius: 300
+  }),
+  /**
+   * Hero section background
+   */
+  heroSection: () => i({
+    colors: [
+      "#667eea",
+      "#764ba2",
+      "#667eea"
+    ],
+    startPoint: "topLeading",
+    endPoint: "bottomTrailing"
+  }),
+  /**
+   * Footer gradient
+   */
+  footer: () => i({
+    colors: [
+      "#2d3748",
+      "#1a202c"
+    ],
+    startPoint: "top",
+    endPoint: "bottom"
+  })
+}, N = {
+  /**
+   * iOS theme gradients
+   */
+  ios: {
+    primary: G.iosPrimary,
+    secondary: () => A.secondaryButton(),
+    card: P.subtleHover,
+    input: S.textInputFocus,
+    background: $.appBackground
+  },
+  /**
+   * Material Design theme gradients
+   */
+  material: {
+    primary: G.materialRaised,
+    secondary: () => A.secondaryButton(),
+    card: P.subtleHover,
+    input: S.textInputFocus,
+    background: $.appBackground
+  },
+  /**
+   * Modern/Glass theme gradients
+   */
+  modern: {
+    primary: G.glassMorphism,
+    secondary: G.glassMorphism,
+    card: () => P.subtleHover(),
+    input: S.textInputFocus,
+    background: () => i({
+      colors: [
+        "rgba(255, 255, 255, 0.95)",
+        "rgba(248, 249, 250, 0.95)"
+      ],
+      startPoint: "top",
+      endPoint: "bottom"
+    })
+  }
+}, et = (e = "ios") => {
+  const t = N[e];
+  return {
+    Button: {
+      primary: m("button-primary", t.primary()),
+      secondary: m("button-secondary", t.secondary()),
+      danger: m("button-danger", A.dangerButton()),
+      success: m("button-success", A.successButton())
+    },
+    Card: {
+      default: m("card-default", t.card()),
+      hero: m("card-hero", {
+        default: P.heroCard(),
+        hover: c.reverse(P.heroCard()),
+        animation: { duration: 300, easing: "ease-in-out" }
+      })
+    },
+    Input: {
+      default: m("input-default", t.input()),
+      error: m("input-error", S.errorInput())
+    },
+    Background: {
+      app: t.background(),
+      modal: $.modalBackdrop()
+    }
+  };
+}, ht = {
+  Button: G,
+  Card: P,
+  Navigation: X,
+  Form: S,
+  Dashboard: Y,
+  Animation: tt,
+  Background: $,
+  Themed: N,
+  createComponentGradients: et
+};
+var rt = Object.defineProperty, nt = (e, t, r) => t in e ? rt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, V = (e, t, r) => nt(e, typeof t != "symbol" ? t + "" : t, r);
+const H = class C {
+  constructor() {
+    V(this, "metrics", /* @__PURE__ */ new Map()), V(this, "enabled", process.env.NODE_ENV === "development"), V(this, "totalMetrics", {
+      totalGradients: 0,
+      totalResolutions: 0,
+      totalCacheHits: 0,
+      totalCacheMisses: 0,
+      averageComplexity: 0,
+      memoryPressure: 0
+    });
+  }
+  static getInstance() {
+    return C.instance || (C.instance = new C()), C.instance;
+  }
+  /**
+   * Enable or disable performance monitoring
+   */
+  setEnabled(t) {
+    this.enabled = t;
+  }
+  /**
+   * Track gradient creation
+   */
+  trackCreation(t, r) {
+    if (!this.enabled) return;
+    const n = performance.now(), o = p.getComplexityScore(r), l = {
+      creationTime: performance.now() - n,
+      resolutionTime: 0,
+      cssGenerationTime: 0,
+      memoryUsage: this.estimateMemoryUsage(r),
+      cacheHits: 0,
+      cacheMisses: 0,
+      complexityScore: o,
+      renderCount: 0
+    };
+    this.metrics.set(t, l), this.updateTotalMetrics();
+  }
+  /**
+   * Track gradient resolution (conversion to CSS)
+   */
+  trackResolution(t, r = !1) {
+    if (!this.enabled) return;
+    const n = performance.now(), o = this.metrics.get(t);
+    if (o) {
+      const a = performance.now();
+      o.resolutionTime += a - n, o.renderCount++, r ? (o.cacheHits++, this.totalMetrics.totalCacheHits++) : (o.cacheMisses++, this.totalMetrics.totalCacheMisses++), this.totalMetrics.totalResolutions++;
+    }
+  }
+  /**
+   * Track CSS generation time
+   */
+  trackCSSGeneration(t, r) {
+    if (!this.enabled) return;
+    const n = this.metrics.get(t);
+    n && (n.cssGenerationTime += r);
+  }
+  /**
+   * Get performance metrics for a specific gradient
+   */
+  getMetrics(t) {
+    return this.metrics.get(t);
+  }
+  /**
+   * Get overall performance summary
+   */
+  getSummary() {
+    const r = Array.from(this.metrics.entries()).sort((a, l) => {
+      const [, u] = a, [, h] = l, x = u.cacheHits / (u.cacheHits + u.cacheMisses + 1);
+      return h.cacheHits / (h.cacheHits + h.cacheMisses + 1) - x;
+    }), n = r.slice(0, 5).map(([a, l]) => ({ id: a, metrics: l })), o = r.slice(-5).map(([a, l]) => ({ id: a, metrics: l }));
+    return {
+      totalMetrics: this.totalMetrics,
+      topPerformers: n,
+      poorPerformers: o,
+      recommendations: this.generateRecommendations()
+    };
+  }
+  /**
+   * Reset all metrics
+   */
+  reset() {
+    this.metrics.clear(), this.totalMetrics = {
+      totalGradients: 0,
+      totalResolutions: 0,
+      totalCacheHits: 0,
+      totalCacheMisses: 0,
+      averageComplexity: 0,
+      memoryPressure: 0
+    };
+  }
+  /**
+   * Export metrics to JSON for analysis
+   */
+  exportMetrics() {
+    return JSON.stringify({
+      totalMetrics: this.totalMetrics,
+      gradientMetrics: Object.fromEntries(this.metrics),
+      timestamp: Date.now(),
+      environment: {
+        userAgent: typeof navigator < "u" ? navigator.userAgent : "Node.js",
+        memory: typeof performance < "u" && "memory" in performance ? performance.memory : null
+      }
+    }, null, 2);
+  }
+  estimateMemoryUsage(t) {
+    let r = 0;
+    r += 100, "colors" in t.options && (r += t.options.colors.length * 20, r += t.options.stops ? t.options.stops.length * 8 : 0);
+    const n = p.getComplexityScore(t);
+    return r += n * 10, r;
+  }
+  updateTotalMetrics() {
+    this.totalMetrics.totalGradients = this.metrics.size;
+    const t = Array.from(this.metrics.values()).map((n) => n.complexityScore);
+    this.totalMetrics.averageComplexity = t.length > 0 ? t.reduce((n, o) => n + o, 0) / t.length : 0;
+    const r = Array.from(this.metrics.values()).reduce((n, o) => n + o.memoryUsage, 0);
+    this.totalMetrics.memoryPressure = r;
+  }
+  generateRecommendations() {
+    const t = [];
+    this.totalMetrics.totalCacheHits / (this.totalMetrics.totalCacheHits + this.totalMetrics.totalCacheMisses) < 0.7 && t.push("Consider using StateGradientAsset for frequently used gradients to improve caching"), this.totalMetrics.averageComplexity > 8 && t.push("Average gradient complexity is high. Consider simplifying gradients or using presets"), this.totalMetrics.memoryPressure > 5e4 && t.push("High memory usage detected. Consider cleanup of unused gradients");
+    const n = Array.from(this.metrics.entries()).filter(([, o]) => o.renderCount > 100);
+    return n.length > 0 && t.push(`${n.length} gradients are rendered frequently. Ensure they use caching`), t;
+  }
+};
+V(H, "instance");
+let E = H;
+const L = {
+  /**
+   * Validate and debug a gradient configuration
+   */
+  debugGradient: (e) => {
+    const t = w.validateGradient(e), r = p.getComplexityScore(e), n = p.getPerformanceImpact(e), o = [];
+    r > 10 && o.push("High complexity gradient may impact performance"), p.hasTransparency(e) && o.push("Gradient uses transparency which may affect compositing performance"), p.getColorCount(e) > 5 && o.push("Many colors in gradient may cause banding on some devices");
+    const a = [];
+    n === "high" && (a.push("Consider simplifying the gradient or using a preset"), a.push("Cache this gradient if used frequently")), r > 15 && a.push("Consider breaking complex gradient into simpler components");
+    let l = "";
+    try {
+      l = v(e);
+    } catch (u) {
+      l = `Error generating CSS: ${u.message}`;
+    }
+    return {
+      isValid: t.valid,
+      errors: t.errors,
+      warnings: o,
+      performance: {
+        complexity: r,
+        impact: n,
+        recommendations: a
+      },
+      cssOutput: l
+    };
+  },
+  /**
+   * Debug state gradient configuration
+   */
+  debugStateGradient: (e) => {
+    const t = w.validateStateGradientOptions(e), r = [], n = {};
+    return Object.entries(e).forEach(([o, a]) => {
+      o !== "animation" && (n[o] = {
+        type: typeof a == "string" ? "string" : a && "type" in a ? "gradient" : "asset",
+        complexity: a && typeof a == "object" && "type" in a ? p.getComplexityScore(a) : 1
+      });
+    }), e.animation && (e.animation.duration && e.animation.duration > 500 && r.push("Long animation duration may feel sluggish"), e.animation.duration && e.animation.duration < 50 && r.push("Very short animation duration may not be noticeable")), {
+      isValid: t.valid,
+      errors: t.errors,
+      warnings: r,
+      stateAnalysis: n
+    };
+  },
+  /**
+   * Performance profiler for gradient operations
+   */
+  profileOperation: (e, t) => {
+    if (process.env.NODE_ENV !== "development")
+      return t();
+    const r = performance.now(), n = t(), o = performance.now();
+    return console.log(`Gradient operation "${e}" took ${(o - r).toFixed(2)}ms`), n;
+  },
+  /**
+   * CSS analyzer for generated gradients
+   */
+  analyzeCSS: (e) => {
+    const t = [], r = [];
+    let n = !1;
+    return e.includes("conic-gradient") && (t.push("Chrome 69+", "Firefox 83+", "Safari 12.1+"), n = !0), e.includes("linear-gradient") && t.push("All modern browsers"), e.includes("radial-gradient") && t.push("All modern browsers"), (e.match(/#[0-9a-f]{6}|rgb\([^)]+\)|hsl\([^)]+\)/gi) || []).length > 5 && r.push("Many colors may cause performance impact on low-end devices"), e.includes("repeating-") && r.push("Repeating gradients can be GPU-intensive"), {
+      browserSupport: t,
+      fallbackRecommended: n,
+      performanceNotes: r
+    };
+  }
+}, mt = {
+  /**
+   * Log gradient information to console (development only)
+   */
+  inspect: (e, t) => {
+    if (process.env.NODE_ENV === "development") {
+      if (console.group(`🎨 Gradient Inspector${t ? ` - ${t}` : ""}`), "type" in e) {
+        const r = L.debugGradient(e);
+        console.log("Type:", e.type), console.log("Valid:", r.isValid), console.log("Complexity:", r.performance.complexity), console.log("Performance Impact:", r.performance.impact), console.log("CSS:", r.cssOutput), r.errors.length > 0 && console.error("Errors:", r.errors), r.warnings.length > 0 && console.warn("Warnings:", r.warnings);
+      } else {
+        const r = L.debugStateGradient(e);
+        console.log("Type: State Gradient"), console.log("Valid:", r.isValid), console.log("States:", Object.keys(r.stateAnalysis)), console.table(r.stateAnalysis), r.errors.length > 0 && console.error("Errors:", r.errors), r.warnings.length > 0 && console.warn("Warnings:", r.warnings);
+      }
+      console.groupEnd();
+    }
+  },
+  /**
+   * Track gradient usage in components
+   */
+  trackUsage: (e, t) => {
+    if (process.env.NODE_ENV !== "development") return;
+    E.getInstance().trackCreation(`${e}-${t}`, {
+      type: "linear",
+      options: { colors: ["#000", "#fff"], startPoint: "top", endPoint: "bottom" }
+    });
+  },
+  /**
+   * Generate performance report
+   */
+  generateReport: () => {
+    if (process.env.NODE_ENV !== "development") return;
+    const t = E.getInstance().getSummary();
+    console.group("📊 Gradient Performance Report"), console.table(t.totalMetrics), t.recommendations.length > 0 && (console.group("💡 Recommendations"), t.recommendations.forEach((r) => console.log(`• ${r}`)), console.groupEnd()), t.poorPerformers.length > 0 && (console.group("⚠️ Poor Performers"), console.table(t.poorPerformers.map((r) => ({ id: r.id, ...r.metrics }))), console.groupEnd()), console.groupEnd();
+  }
+}, gt = E.getInstance();
+function i(e) {
+  return {
+    type: "linear",
+    options: e
+  };
+}
+function g(e) {
+  return {
+    type: "radial",
+    options: e
+  };
+}
+function B(e) {
+  return {
+    type: "angular",
+    options: e
+  };
+}
+function bt(e) {
+  return {
+    type: "conic",
+    options: e
+  };
+}
+function vt(e) {
+  return {
+    type: "repeating-linear",
+    options: e
+  };
+}
+function Pt(e) {
+  return {
+    type: "repeating-radial",
+    options: e
+  };
+}
+function yt(e) {
+  return {
+    type: "elliptical",
+    options: e
+  };
+}
+export {
+  D as A,
+  G as B,
+  bt as C,
+  ut as D,
+  yt as E,
+  S as F,
+  lt as G,
+  ht as H,
+  A as I,
+  E as J,
+  L as K,
+  i as L,
+  mt as M,
+  X as N,
+  gt as O,
+  g as R,
+  Z as S,
+  st as T,
+  B as a,
+  vt as b,
+  Pt as c,
+  T as d,
+  c as e,
+  s as f,
+  p as g,
+  U as h,
+  at as i,
+  _ as j,
+  m as k,
+  b as l,
+  w as m,
+  ct as n,
+  dt as o,
+  M as p,
+  d as q,
+  O as r,
+  ft as s,
+  pt as t,
+  P as u,
+  Y as v,
+  tt as w,
+  $ as x,
+  N as y,
+  et as z
+};