@gradient-ui/gradient-engine 0.6.0 → 1.0.0

package/dist/effects.mjs

@@ -1,7 +1,7 @@
-import { t as S, b as h, k as u, j as M } from "./utils-BzSNCfat.js";
-import { t as B } from "./css-DVaTTIqS.js";
-import { D, G as X } from "./types-BFr1fN-7.js";
-const N = "http://www.w3.org/2000/svg", k = "http://www.w3.org/1999/xhtml", O = (r) => r.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), Y = {
+import { t as toCssDuration, b as clamp, j as toCssLength, k as toCssColor } from "./utils-VaqPefmS.js";
+import { t as toCssGradient } from "./css-B3xGfmW1.js";
+import { D as DEFAULT_GRADIENT_MORPH_BLEND_MODE, G as GRADIENT_MORPH_BLEND_MODES } from "./types-B0eCazk8.js";
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg", XHTML_NAMESPACE = "http://www.w3.org/1999/xhtml", escapeAttribute = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), morphPresets = {
   soft: {
     blobCount: 5,
     blur: 40,
@@ -26,33 +26,33 @@ const N = "http://www.w3.org/2000/svg", k = "http://www.w3.org/1999/xhtml", O =
     opacity: 0.78,
     scale: 0.94
   }
-}, E = new Set(X), A = (r) => E.has(r), z = (r) => r && A(r) ? r : D, $ = (r = {}) => {
-  const a = Y[r.preset ?? "soft"];
+}, gradientMorphBlendModeSet = new Set(GRADIENT_MORPH_BLEND_MODES), isGradientMorphBlendMode = (value) => gradientMorphBlendModeSet.has(value), resolveGradientMorphBlendMode = (value) => value && isGradientMorphBlendMode(value) ? value : DEFAULT_GRADIENT_MORPH_BLEND_MODE, getMorphOptions = (options = {}) => {
+  const preset = morphPresets[options.preset ?? "soft"];
   return {
     blobCount: Math.max(
       2,
-      Math.round(r.blobCount ?? a.blobCount)
+      Math.round(options.blobCount ?? preset.blobCount)
     ),
-    blendMode: z(r.blendMode),
-    blobOpacity: h(r.blobOpacity ?? 1, 0, 1.6),
-    blur: h(r.blur ?? a.blur, 0, 80),
-    contrast: h(r.contrast ?? a.contrast, 0, 36),
-    duration: r.duration ?? a.duration,
-    id: r.id ?? "g-gradient-morph",
-    opacity: h(r.opacity ?? a.opacity),
-    scale: h(r.scale ?? a.scale, 0.4, 2)
+    blendMode: resolveGradientMorphBlendMode(options.blendMode),
+    blobOpacity: clamp(options.blobOpacity ?? 1, 0, 1.6),
+    blur: clamp(options.blur ?? preset.blur, 0, 80),
+    contrast: clamp(options.contrast ?? preset.contrast, 0, 36),
+    duration: options.duration ?? preset.duration,
+    id: options.id ?? "g-gradient-morph",
+    opacity: clamp(options.opacity ?? preset.opacity),
+    scale: clamp(options.scale ?? preset.scale, 0.4, 2)
   };
-}, P = (r, a) => {
-  var t, i;
-  return ((t = r.stops[a % r.stops.length]) == null ? void 0 : t.color) ?? ((i = r.stops[0]) == null ? void 0 : i.color) ?? "currentColor";
-}, j = (r) => {
-  if (typeof r == "number") return r;
-  const a = Number.parseFloat(r);
-  return Number.isFinite(a) ? a : 9e3;
-}, L = (r, a) => {
-  const t = Math.sin((r + 1) * 12.9898 + a * 78.233) * 43758.5453;
-  return t - Math.floor(t);
-}, c = (r, a, t, i) => t + L(r, a) * (i - t), p = (r) => Number(r.toFixed(3)), w = [
+}, getBlobColor = (model, index) => {
+  var _a, _b;
+  return ((_a = model.stops[index % model.stops.length]) == null ? void 0 : _a.color) ?? ((_b = model.stops[0]) == null ? void 0 : _b.color) ?? "currentColor";
+}, getDurationMs = (duration) => {
+  if (typeof duration == "number") return duration;
+  const parsed = Number.parseFloat(duration);
+  return Number.isFinite(parsed) ? parsed : 9e3;
+}, getNoise = (index, salt) => {
+  const value = Math.sin((index + 1) * 12.9898 + salt * 78.233) * 43758.5453;
+  return value - Math.floor(value);
+}, getNoiseRange = (index, salt, min, max) => min + getNoise(index, salt) * (max - min), round = (value) => Number(value.toFixed(3)), blobPaths = [
   {
     animationName: "g-gradient-morph-drift",
     dx: 20,
@@ -157,61 +157,61 @@ const N = "http://www.w3.org/2000/svg", k = "http://www.w3.org/1999/xhtml", O =
     x: 18,
     y: 24
   }
-], C = (r, a = {}) => {
-  const { blobCount: t, blobOpacity: i, duration: g, scale: d } = $(a), e = j(g);
-  return Array.from({ length: t }, (l, n) => {
-    const s = w[n % w.length], m = c(n, 1, 0.88, 1.16), o = c(n, 2, 0.86, 1.24), f = h(c(n, 3, 0.72, 1) * i), x = c(n, 4, 0, 4), v = (34 + n % 4 * 9) * d * m;
+], createGradientMorphBlobs = (model, options = {}) => {
+  const { blobCount, blobOpacity, duration, scale } = getMorphOptions(options), durationMs = getDurationMs(duration);
+  return Array.from({ length: blobCount }, (_, index) => {
+    const path = blobPaths[index % blobPaths.length], sizeJitter = getNoiseRange(index, 1, 0.88, 1.16), durationJitter = getNoiseRange(index, 2, 0.86, 1.24), opacity = clamp(getNoiseRange(index, 3, 0.72, 1) * blobOpacity), blur = getNoiseRange(index, 4, 0, 4), size = (34 + index % 4 * 9) * scale * sizeJitter;
     return {
-      animationName: s.animationName,
-      blur: p(x),
-      color: P(r, n),
+      animationName: path.animationName,
+      blur: round(blur),
+      color: getBlobColor(model, index),
       delay: Math.round(
-        n * -0.19 * e - c(n, 5, 0, 900)
+        index * -0.19 * durationMs - getNoiseRange(index, 5, 0, 900)
       ),
-      dx: p(s.dx * c(n, 6, 0.84, 1.18)),
-      dx2: p(s.dx2 * c(n, 7, 0.82, 1.22)),
-      dy: p(s.dy * c(n, 8, 0.84, 1.18)),
-      dy2: p(s.dy2 * c(n, 9, 0.82, 1.22)),
+      dx: round(path.dx * getNoiseRange(index, 6, 0.84, 1.18)),
+      dx2: round(path.dx2 * getNoiseRange(index, 7, 0.82, 1.22)),
+      dy: round(path.dy * getNoiseRange(index, 8, 0.84, 1.18)),
+      dy2: round(path.dy2 * getNoiseRange(index, 9, 0.82, 1.22)),
       duration: Math.round(
-        e * (1 + n % 3 * 0.11) * o
+        durationMs * (1 + index % 3 * 0.11) * durationJitter
       ),
-      opacity: p(f),
-      originX: s.originX,
-      originY: s.originY,
-      rotateMid: Math.round(c(n, 10, 95, 165)),
-      rotateTo: Math.round(c(n, 11, 220, 310)),
-      scaleMid: s.scaleMid,
-      scaleTo: s.scaleTo,
-      size: p(v),
-      x: s.x,
-      y: s.y
+      opacity: round(opacity),
+      originX: path.originX,
+      originY: path.originY,
+      rotateMid: Math.round(getNoiseRange(index, 10, 95, 165)),
+      rotateTo: Math.round(getNoiseRange(index, 11, 220, 310)),
+      scaleMid: path.scaleMid,
+      scaleTo: path.scaleTo,
+      size: round(size),
+      x: path.x,
+      y: path.y
     };
   });
-}, T = (r = {}) => `url(#${$(r).id}) blur(${$(r).blur}px)`, F = (r = {}) => {
-  const { blur: a, contrast: t, id: i } = $(r), g = Math.max(2, Math.round(a * 0.25)), d = -(t * 0.45), e = t <= 0 ? "" : `
-    <feColorMatrix in="g-gradient-morph-blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${t} ${d}" result="g-gradient-morph-goo" />
+}, toGradientMorphFilter = (options = {}) => `url(#${getMorphOptions(options).id}) blur(${getMorphOptions(options).blur}px)`, toGradientMorphFilterMarkup = (options = {}) => {
+  const { blur, contrast, id } = getMorphOptions(options), gooBlur = Math.max(2, Math.round(blur * 0.25)), alphaOffset = -(contrast * 0.45), matrix = contrast <= 0 ? "" : `
+    <feColorMatrix in="g-gradient-morph-blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${contrast} ${alphaOffset}" result="g-gradient-morph-goo" />
     <feBlend in="SourceGraphic" in2="g-gradient-morph-goo" />`;
-  return `<svg xmlns="${N}" width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute;overflow:hidden;inline-size:0;block-size:0;">
-  <filter id="${i}" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="${g}" result="g-gradient-morph-blur" />${e}
+  return `<svg xmlns="${SVG_NAMESPACE}" width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute;overflow:hidden;inline-size:0;block-size:0;">
+  <filter id="${id}" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="${gooBlur}" result="g-gradient-morph-blur" />${matrix}
   </filter>
 </svg>`;
-}, V = (r, a = {}) => {
-  const t = a.selector ?? ".g-gradient-morph", { blendMode: i, opacity: g } = $(a), d = C(r, a);
-  return `${t} {
+}, toGradientMorphCSS = (model, options = {}) => {
+  const selector = options.selector ?? ".g-gradient-morph", { blendMode, opacity } = getMorphOptions(options), blobs = createGradientMorphBlobs(model, options);
+  return `${selector} {
 	position: relative;
 	overflow: hidden;
 }
 
-${t}__blobs {
+${selector}__blobs {
 	position: absolute;
 	inset: -18%;
-	opacity: ${g};
-	filter: ${T(a)};
-	mix-blend-mode: ${i};
+	opacity: ${opacity};
+	filter: ${toGradientMorphFilter(options)};
+	mix-blend-mode: ${blendMode};
 }
 
-${t}__blob {
+${selector}__blob {
 	position: absolute;
 	transform: translate(-50%, -50%);
 	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
@@ -222,29 +222,29 @@ ${t}__blob {
 	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
 }
 
-${d.map(
-    (e, l) => `${t}__blob:nth-child(${l + 1}) {
-	top: ${e.y}%;
-	left: ${e.x}%;
-	width: ${e.size}%;
+${blobs.map(
+    (blob, index) => `${selector}__blob:nth-child(${index + 1}) {
+	top: ${blob.y}%;
+	left: ${blob.x}%;
+	width: ${blob.size}%;
 	aspect-ratio: 1;
-	--g-gradient-morph-blob-color: ${e.color};
-	--g-gradient-morph-x: ${e.dx}%;
-	--g-gradient-morph-x2: ${e.dx2}%;
-	--g-gradient-morph-y: ${e.dy}%;
-	--g-gradient-morph-y2: ${e.dy2}%;
-	--g-gradient-morph-origin-x: ${e.originX};
-	--g-gradient-morph-origin-y: ${e.originY};
-	--g-gradient-morph-animation: ${e.animationName};
-	--g-gradient-morph-blur: ${e.blur}px;
-	--g-gradient-morph-opacity: ${e.opacity};
-	--g-gradient-morph-rotate-mid: ${e.rotateMid}deg;
-	--g-gradient-morph-rotate-to: ${e.rotateTo}deg;
-	--g-gradient-morph-scale-mid: ${e.scaleMid};
-	--g-gradient-morph-scale: ${e.scaleTo};
-	--g-gradient-morph-delay: ${e.delay}ms;
+	--g-gradient-morph-blob-color: ${blob.color};
+	--g-gradient-morph-x: ${blob.dx}%;
+	--g-gradient-morph-x2: ${blob.dx2}%;
+	--g-gradient-morph-y: ${blob.dy}%;
+	--g-gradient-morph-y2: ${blob.dy2}%;
+	--g-gradient-morph-origin-x: ${blob.originX};
+	--g-gradient-morph-origin-y: ${blob.originY};
+	--g-gradient-morph-animation: ${blob.animationName};
+	--g-gradient-morph-blur: ${blob.blur}px;
+	--g-gradient-morph-opacity: ${blob.opacity};
+	--g-gradient-morph-rotate-mid: ${blob.rotateMid}deg;
+	--g-gradient-morph-rotate-to: ${blob.rotateTo}deg;
+	--g-gradient-morph-scale-mid: ${blob.scaleMid};
+	--g-gradient-morph-scale: ${blob.scaleTo};
+	--g-gradient-morph-delay: ${blob.delay}ms;
 	animation-delay: var(--g-gradient-morph-delay);
-	animation-duration: ${S(e.duration)};
+	animation-duration: ${toCssDuration(blob.duration)};
 }`
   ).join(`
 
@@ -291,25 +291,25 @@ ${d.map(
 		transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) rotate(var(--g-gradient-morph-rotate-to)) scale(var(--g-gradient-morph-scale));
 	}
 }`;
-}, K = (r, a = {}) => {
-  const t = a.id ?? "g-gradient-morph", i = a.width ?? 360, g = a.height ?? 240, d = a.rx ?? 24, e = `${t}-filter`, l = T({ ...a, id: e }), n = C(r, a), { blendMode: s, opacity: m } = $(a);
-  return `<svg xmlns="${N}" viewBox="0 0 ${i} ${g}" width="${i}" height="${g}" role="img">
+}, toGradientMorphMarkup = (model, options = {}) => {
+  const id = options.id ?? "g-gradient-morph", width = options.width ?? 360, height = options.height ?? 240, rx = options.rx ?? 24, filterId = `${id}-filter`, filter = toGradientMorphFilter({ ...options, id: filterId }), blobs = createGradientMorphBlobs(model, options), { blendMode, opacity } = getMorphOptions(options);
+  return `<svg xmlns="${SVG_NAMESPACE}" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img">
   <defs>
-    <clipPath id="${t}-clip">
-      <rect width="${i}" height="${g}" rx="${d}" />
+    <clipPath id="${id}-clip">
+      <rect width="${width}" height="${height}" rx="${rx}" />
     </clipPath>
   </defs>
-  <foreignObject width="${i}" height="${g}" clip-path="url(#${t}-clip)">
-    <div xmlns="${k}" class="g-gradient-material">
-      ${F({ ...a, id: `${t}-filter` })}
+  <foreignObject width="${width}" height="${height}" clip-path="url(#${id}-clip)">
+    <div xmlns="${XHTML_NAMESPACE}" class="g-gradient-material">
+      ${toGradientMorphFilterMarkup({ ...options, id: `${id}-filter` })}
       <style>
 .g-gradient-material {
 	position: relative;
 	overflow: hidden;
 	display: flex;
-	width: ${i}px;
-	height: ${g}px;
-	border-radius: ${d}px;
+	width: ${width}px;
+	height: ${height}px;
+	border-radius: ${rx}px;
 }
 
 .g-gradient-material__surface {
@@ -318,8 +318,8 @@ ${d.map(
 	display: flex;
 	width: 100%;
 	height: 100%;
-	border-radius: ${d}px;
-	background: ${O(B(r))};
+	border-radius: ${rx}px;
+	background: ${escapeAttribute(toCssGradient(model))};
 }
 
 .g-gradient-material__morph {
@@ -329,9 +329,9 @@ ${d.map(
 	inset: calc(-1 * var(--g-gradient-material-morph-bleed));
 	width: calc(100% + 2 * var(--g-gradient-material-morph-bleed));
 	height: calc(100% + 2 * var(--g-gradient-material-morph-bleed));
-	opacity: ${m};
-	filter: ${l};
-	mix-blend-mode: ${s};
+	opacity: ${opacity};
+	filter: ${filter};
+	mix-blend-mode: ${blendMode};
 }
 
 .g-gradient-material__morph-blob {
@@ -346,28 +346,28 @@ ${d.map(
 	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
 }
 
-${n.map(
-    (o, f) => `.g-gradient-material__morph-blob:nth-child(${f + 1}) {
-	left: ${o.x}%;
-	top: ${o.y}%;
-	width: ${o.size}%;
-	--g-gradient-morph-blob-color: ${o.color};
-	--g-gradient-morph-x: ${o.dx}%;
-	--g-gradient-morph-x2: ${o.dx2}%;
-	--g-gradient-morph-y: ${o.dy}%;
-	--g-gradient-morph-y2: ${o.dy2}%;
-	--g-gradient-morph-origin-x: ${o.originX};
-	--g-gradient-morph-origin-y: ${o.originY};
-	--g-gradient-morph-animation: ${o.animationName};
-	--g-gradient-morph-blur: ${o.blur}px;
-	--g-gradient-morph-opacity: ${o.opacity};
-	--g-gradient-morph-rotate-mid: ${o.rotateMid}deg;
-	--g-gradient-morph-rotate-to: ${o.rotateTo}deg;
-	--g-gradient-morph-scale-mid: ${o.scaleMid};
-	--g-gradient-morph-scale: ${o.scaleTo};
-	--g-gradient-morph-delay: ${o.delay}ms;
+${blobs.map(
+    (blob, index) => `.g-gradient-material__morph-blob:nth-child(${index + 1}) {
+	left: ${blob.x}%;
+	top: ${blob.y}%;
+	width: ${blob.size}%;
+	--g-gradient-morph-blob-color: ${blob.color};
+	--g-gradient-morph-x: ${blob.dx}%;
+	--g-gradient-morph-x2: ${blob.dx2}%;
+	--g-gradient-morph-y: ${blob.dy}%;
+	--g-gradient-morph-y2: ${blob.dy2}%;
+	--g-gradient-morph-origin-x: ${blob.originX};
+	--g-gradient-morph-origin-y: ${blob.originY};
+	--g-gradient-morph-animation: ${blob.animationName};
+	--g-gradient-morph-blur: ${blob.blur}px;
+	--g-gradient-morph-opacity: ${blob.opacity};
+	--g-gradient-morph-rotate-mid: ${blob.rotateMid}deg;
+	--g-gradient-morph-rotate-to: ${blob.rotateTo}deg;
+	--g-gradient-morph-scale-mid: ${blob.scaleMid};
+	--g-gradient-morph-scale: ${blob.scaleTo};
+	--g-gradient-morph-delay: ${blob.delay}ms;
 	animation-delay: var(--g-gradient-morph-delay);
-	animation-duration: ${S(o.duration)};
+	animation-duration: ${toCssDuration(blob.duration)};
 }`
   ).join(`
 
@@ -393,46 +393,46 @@ ${n.map(
       </style>
       <span class="g-gradient-material__surface">
         <span class="g-gradient-material__morph">
-          ${n.map(() => '<span class="g-gradient-material__morph-blob"></span>').join(`
+          ${blobs.map(() => '<span class="g-gradient-material__morph-blob"></span>').join(`
           `)}
         </span>
       </span>
     </div>
   </foreignObject>
 </svg>`;
-}, G = (r, a) => {
-  const t = r.stops.filter(
-    (d) => d.position >= 25 && d.position <= 85
-  ), i = r.stops.filter(
-    (d) => !t.includes(d)
+}, getShadowStops = (model, layers) => {
+  const saturatedStops = model.stops.filter(
+    (stop) => stop.position >= 25 && stop.position <= 85
+  ), fallbackStops = model.stops.filter(
+    (stop) => !saturatedStops.includes(stop)
   );
-  return [...t, ...i].sort(
-    (d, e) => Math.abs(d.position - 50) - Math.abs(e.position - 50)
-  ).slice(0, a);
-}, R = (r, a) => r * ([1, 0.54, 0.3, 0.18][a] ?? 0.12), y = (r, a) => {
-  const t = String(r).match(/^(-?\d*\.?\d+)(.*)$/);
-  return t ? `${Math.round(Number(t[1]) * a * 1e3) / 1e3}${t[2] || "px"}` : null;
-}, _ = (r, a, t) => y(r, 1 / a) ?? (t === 0 ? u(r) : "0px"), q = (r, a) => y(r, 1 / Math.sqrt(a)) ?? u(r), Q = (r, a = {}) => {
-  var b;
-  const t = a.x ?? 0, i = a.y ?? 6, g = a.blur ?? 14, d = a.spread ?? -3, e = a.opacity ?? 0.24, l = Math.max(1, Math.round(a.layers ?? 2)), n = ((b = G(r, 1)[0]) == null ? void 0 : b.color) ?? "#000000", s = `${u(t)} ${u(i)} ${u(g)} ${u(d)} ${M(n, e)}`;
-  if (l === 1) return s;
-  const m = y(t, 0.35) ?? "0px", o = y(i, 0.35) ?? "2px", f = y(g, 0.3) ?? "4px", x = y(d, 0.5) ?? "-2px", v = Math.min(0.18, e * 0.65);
-  return `${`${m} ${o} ${f} ${x} ${M("#000000", v)}`}, ${s}`;
-}, W = (r, a = {}) => {
-  const t = a.x ?? 0, i = a.y ?? 6, g = a.blur ?? 14, d = a.opacity ?? 0.42, e = Math.max(1, Math.round(a.layers ?? 2)), l = q(g, e);
-  return G(r, e).map((n, s) => {
-    const m = _(t, e, s), o = _(i, e, s);
-    return `drop-shadow(${m} ${o} ${l} ${M(n.color, R(d, s))})`;
+  return [...saturatedStops, ...fallbackStops].sort(
+    (first, second) => Math.abs(first.position - 50) - Math.abs(second.position - 50)
+  ).slice(0, layers);
+}, getDropShadowLayerOpacity = (opacity, index) => opacity * ([1, 0.54, 0.3, 0.18][index] ?? 0.12), scaleSimpleCssLength = (value, factor) => {
+  const match = String(value).match(/^(-?\d*\.?\d+)(.*)$/);
+  return match ? `${Math.round(Number(match[1]) * factor * 1e3) / 1e3}${match[2] || "px"}` : null;
+}, getDistributedOffset = (value, layers, index) => scaleSimpleCssLength(value, 1 / layers) ?? (index === 0 ? toCssLength(value) : "0px"), getDistributedBlur = (value, layers) => scaleSimpleCssLength(value, 1 / Math.sqrt(layers)) ?? toCssLength(value), toGradientBoxShadow = (model, options = {}) => {
+  var _a;
+  const x = options.x ?? 0, y = options.y ?? 6, blur = options.blur ?? 14, spread = options.spread ?? -3, opacity = options.opacity ?? 0.24, layers = Math.max(1, Math.round(options.layers ?? 2)), dominantColor = ((_a = getShadowStops(model, 1)[0]) == null ? void 0 : _a.color) ?? "#000000", ambientShadow = `${toCssLength(x)} ${toCssLength(y)} ${toCssLength(blur)} ${toCssLength(spread)} ${toCssColor(dominantColor, opacity)}`;
+  if (layers === 1) return ambientShadow;
+  const contactX = scaleSimpleCssLength(x, 0.35) ?? "0px", contactY = scaleSimpleCssLength(y, 0.35) ?? "2px", contactBlur = scaleSimpleCssLength(blur, 0.3) ?? "4px", contactSpread = scaleSimpleCssLength(spread, 0.5) ?? "-2px", contactOpacity = Math.min(0.18, opacity * 0.65);
+  return `${`${contactX} ${contactY} ${contactBlur} ${contactSpread} ${toCssColor("#000000", contactOpacity)}`}, ${ambientShadow}`;
+}, toGradientDropShadow = (model, options = {}) => {
+  const x = options.x ?? 0, y = options.y ?? 6, blur = options.blur ?? 14, opacity = options.opacity ?? 0.42, layers = Math.max(1, Math.round(options.layers ?? 2)), distributedBlur = getDistributedBlur(blur, layers);
+  return getShadowStops(model, layers).map((stop, index) => {
+    const distributedX = getDistributedOffset(x, layers, index), distributedY = getDistributedOffset(y, layers, index);
+    return `drop-shadow(${distributedX} ${distributedY} ${distributedBlur} ${toCssColor(stop.color, getDropShadowLayerOpacity(opacity, index))})`;
   }).join(" ");
 };
 export {
-  C as createGradientMorphBlobs,
-  A as isGradientMorphBlendMode,
-  z as resolveGradientMorphBlendMode,
-  Q as toGradientBoxShadow,
-  W as toGradientDropShadow,
-  V as toGradientMorphCSS,
-  T as toGradientMorphFilter,
-  F as toGradientMorphFilterMarkup,
-  K as toGradientMorphMarkup
+  createGradientMorphBlobs,
+  isGradientMorphBlendMode,
+  resolveGradientMorphBlendMode,
+  toGradientBoxShadow,
+  toGradientDropShadow,
+  toGradientMorphCSS,
+  toGradientMorphFilter,
+  toGradientMorphFilterMarkup,
+  toGradientMorphMarkup
 };

package/dist/formatters.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("./css-BVHXLMRl.cjs"),h=require("./utils-D83DMCMa.cjs"),n=require("./svg-dGtLYnIJ.cjs"),M=(r,a,t={})=>{const c=t.width??r.canvas.width,s=t.height??r.canvas.height,e=c/2,i=s/2,v=Math.hypot(c,s)/2,o=((typeof a.direction=="number"?a.direction:Number.parseFloat(a.direction)||h.DEFAULT_GRADIENT_DIRECTION)-90)*Math.PI/180,S=c/2,f=s/2,u=Math.cos(o)*S,g=Math.sin(o)*f,y=a.type==="radial"?r.createRadialGradient(t.x0??e,t.y0??i,t.r0??0,t.x1??e,t.y1??i,t.r1??v):a.type==="conic"&&typeof r.createConicGradient=="function"?r.createConicGradient(t.startAngle??o,t.x0??e,t.y0??i):r.createLinearGradient(t.x0??e-u,t.y0??i-g,t.x1??e+u,t.y1??i+g),C=a.type==="conic"?h.getConicStops(a.stops):a.stops;for(const d of C)y.addColorStop(d.position/100,h.toCssColor(d.color,d.opacity));return y};exports.createLinearGradient=G.createLinearGradient;exports.toCssGradient=G.toCssGradient;exports.toSvgGradient=n.toSvgGradient;exports.toSvgGradientMarkup=n.toSvgGradientMarkup;exports.toSvgPathAnimationMarkup=n.toSvgPathAnimationMarkup;exports.toSvgSourceAnimationMarkup=n.toSvgSourceAnimationMarkup;exports.toCanvasGradient=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const css=require("./css-CREh0Awz.cjs"),utils=require("./utils-Bry9BTmj.cjs"),svg=require("./svg-BtMrj3fP.cjs"),toCanvasGradient=(context,model,options={})=>{const width=options.width??context.canvas.width,height=options.height??context.canvas.height,centerX=width/2,centerY=height/2,maxRadius=Math.hypot(width,height)/2,radians=((typeof model.direction=="number"?model.direction:Number.parseFloat(model.direction)||utils.DEFAULT_GRADIENT_DIRECTION)-90)*Math.PI/180,halfWidth=width/2,halfHeight=height/2,xOffset=Math.cos(radians)*halfWidth,yOffset=Math.sin(radians)*halfHeight,gradient=model.type==="radial"?context.createRadialGradient(options.x0??centerX,options.y0??centerY,options.r0??0,options.x1??centerX,options.y1??centerY,options.r1??maxRadius):model.type==="conic"&&typeof context.createConicGradient=="function"?context.createConicGradient(options.startAngle??radians,options.x0??centerX,options.y0??centerY):context.createLinearGradient(options.x0??centerX-xOffset,options.y0??centerY-yOffset,options.x1??centerX+xOffset,options.y1??centerY+yOffset),stops=model.type==="conic"?utils.getConicStops(model.stops):model.stops;for(const stop of stops)gradient.addColorStop(stop.position/100,utils.toCssColor(stop.color,stop.opacity));return gradient};exports.createLinearGradient=css.createLinearGradient;exports.toCssGradient=css.toCssGradient;exports.toSvgGradient=svg.toSvgGradient;exports.toSvgGradientMarkup=svg.toSvgGradientMarkup;exports.toSvgPathAnimationMarkup=svg.toSvgPathAnimationMarkup;exports.toSvgSourceAnimationMarkup=svg.toSvgSourceAnimationMarkup;exports.toCanvasGradient=toCanvasGradient;

package/dist/formatters.mjs

@@ -1,37 +1,37 @@
-import { c as I, t as R } from "./css-DVaTTIqS.js";
-import { D as C, h as p, j as v } from "./utils-BzSNCfat.js";
-import { t as k, a as w, b as E, c as L } from "./svg-hZus3ztj.js";
-const x = (r, a, t = {}) => {
-  const i = t.width ?? r.canvas.width, n = t.height ?? r.canvas.height, e = i / 2, c = n / 2, y = Math.hypot(i, n) / 2, s = ((typeof a.direction == "number" ? a.direction : Number.parseFloat(a.direction) || C) - 90) * Math.PI / 180, g = i / 2, G = n / 2, h = Math.cos(s) * g, d = Math.sin(s) * G, f = a.type === "radial" ? r.createRadialGradient(
-    t.x0 ?? e,
-    t.y0 ?? c,
-    t.r0 ?? 0,
-    t.x1 ?? e,
-    t.y1 ?? c,
-    t.r1 ?? y
-  ) : a.type === "conic" && typeof r.createConicGradient == "function" ? r.createConicGradient(
-    t.startAngle ?? s,
-    t.x0 ?? e,
-    t.y0 ?? c
-  ) : r.createLinearGradient(
-    t.x0 ?? e - h,
-    t.y0 ?? c - d,
-    t.x1 ?? e + h,
-    t.y1 ?? c + d
-  ), u = a.type === "conic" ? p(a.stops) : a.stops;
-  for (const o of u)
-    f.addColorStop(
-      o.position / 100,
-      v(o.color, o.opacity)
+import { c, t } from "./css-B3xGfmW1.js";
+import { D as DEFAULT_GRADIENT_DIRECTION, h as getConicStops, k as toCssColor } from "./utils-VaqPefmS.js";
+import { t as t2, a, b, c as c2 } from "./svg-B2CaHCLv.js";
+const toCanvasGradient = (context, model, options = {}) => {
+  const width = options.width ?? context.canvas.width, height = options.height ?? context.canvas.height, centerX = width / 2, centerY = height / 2, maxRadius = Math.hypot(width, height) / 2, radians = ((typeof model.direction == "number" ? model.direction : Number.parseFloat(model.direction) || DEFAULT_GRADIENT_DIRECTION) - 90) * Math.PI / 180, halfWidth = width / 2, halfHeight = height / 2, xOffset = Math.cos(radians) * halfWidth, yOffset = Math.sin(radians) * halfHeight, gradient = model.type === "radial" ? context.createRadialGradient(
+    options.x0 ?? centerX,
+    options.y0 ?? centerY,
+    options.r0 ?? 0,
+    options.x1 ?? centerX,
+    options.y1 ?? centerY,
+    options.r1 ?? maxRadius
+  ) : model.type === "conic" && typeof context.createConicGradient == "function" ? context.createConicGradient(
+    options.startAngle ?? radians,
+    options.x0 ?? centerX,
+    options.y0 ?? centerY
+  ) : context.createLinearGradient(
+    options.x0 ?? centerX - xOffset,
+    options.y0 ?? centerY - yOffset,
+    options.x1 ?? centerX + xOffset,
+    options.y1 ?? centerY + yOffset
+  ), stops = model.type === "conic" ? getConicStops(model.stops) : model.stops;
+  for (const stop of stops)
+    gradient.addColorStop(
+      stop.position / 100,
+      toCssColor(stop.color, stop.opacity)
     );
-  return f;
+  return gradient;
 };
 export {
-  I as createLinearGradient,
-  x as toCanvasGradient,
-  R as toCssGradient,
-  k as toSvgGradient,
-  w as toSvgGradientMarkup,
-  E as toSvgPathAnimationMarkup,
-  L as toSvgSourceAnimationMarkup
+  c as createLinearGradient,
+  toCanvasGradient,
+  t as toCssGradient,
+  t2 as toSvgGradient,
+  a as toSvgGradientMarkup,
+  b as toSvgPathAnimationMarkup,
+  c2 as toSvgSourceAnimationMarkup
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./core.cjs"),o=require("./utils-D83DMCMa.cjs"),r=require("./designTokens-C1WdzS3v.cjs"),e=require("./presets-BBLdqUE4.cjs"),d=require("./css-BVHXLMRl.cjs"),c=require("./formatters.cjs"),i=require("./svg-dGtLYnIJ.cjs"),t=require("./effects.cjs"),G=require("./animation.cjs"),a=require("./material.cjs"),s=require("./types-BMLEvdee.cjs");exports.createGradient=n.createGradient;exports.createGradientFromColor=n.createGradientFromColor;exports.colorToHex=o.colorToHex;exports.getContrastingColor=o.getContrastingColor;exports.parseColor=o.parseColor;exports.rgbToChannels=o.rgbToChannels;exports.rgbToHex=o.rgbToHex;exports.COLOR_SEEDS=r.COLOR_SEEDS;exports.DEFAULT_SEED=r.DEFAULT_SEED;exports.createColorSystem=r.createColorSystem;exports.createDesignTokens=r.createDesignTokens;exports.createSemanticTokens=r.createSemanticTokens;exports.normalizeDesignTokenSeed=r.normalizeDesignTokenSeed;exports.COLOR_SHADES=e.COLOR_SHADES;exports.ON_SHADE_TONES=e.ON_SHADE_TONES;exports.SHADE_TONES=e.SHADE_TONES;exports.createGradientModel=e.createGradientModel;exports.createGradientModelFromColor=e.createGradientModelFromColor;exports.createOnPalette=e.createOnPalette;exports.createPalette=e.createPalette;exports.createPalettePair=e.createPalettePair;exports.createRecipeStops=e.createRecipeStops;exports.defineGradientPreset=e.defineGradientPreset;exports.defineGradientPresetRegistry=e.defineGradientPresetRegistry;exports.getGradientPreset=e.getGradientPreset;exports.gradientPresets=e.gradientPresets;exports.gradientRecipes=e.gradientRecipes;exports.createLinearGradient=d.createLinearGradient;exports.toCssGradient=d.toCssGradient;exports.toCanvasGradient=c.toCanvasGradient;exports.toSvgGradient=i.toSvgGradient;exports.toSvgGradientMarkup=i.toSvgGradientMarkup;exports.toSvgPathAnimationMarkup=i.toSvgPathAnimationMarkup;exports.toSvgSourceAnimationMarkup=i.toSvgSourceAnimationMarkup;exports.createGradientMorphBlobs=t.createGradientMorphBlobs;exports.isGradientMorphBlendMode=t.isGradientMorphBlendMode;exports.resolveGradientMorphBlendMode=t.resolveGradientMorphBlendMode;exports.toGradientBoxShadow=t.toGradientBoxShadow;exports.toGradientDropShadow=t.toGradientDropShadow;exports.toGradientMorphCSS=t.toGradientMorphCSS;exports.toGradientMorphFilter=t.toGradientMorphFilter;exports.toGradientMorphFilterMarkup=t.toGradientMorphFilterMarkup;exports.toGradientMorphMarkup=t.toGradientMorphMarkup;exports.toGradientAnimationCSS=G.toGradientAnimationCSS;exports.clearGradientMaterialCache=a.clearGradientMaterialCache;exports.createGradientMaterial=a.createGradientMaterial;exports.createGradientPreset=a.createGradientPreset;exports.createGradientTokens=a.createGradientTokens;exports.getGradientMaterialCacheStats=a.getGradientMaterialCacheStats;exports.setGradientMaterialCacheLimit=a.setGradientMaterialCacheLimit;exports.DEFAULT_GRADIENT_MORPH_BLEND_MODE=s.DEFAULT_GRADIENT_MORPH_BLEND_MODE;exports.GRADIENT_MORPH_BLEND_MODES=s.GRADIENT_MORPH_BLEND_MODES;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const core=require("./core.cjs"),utils=require("./utils-Bry9BTmj.cjs"),designTokens=require("./designTokens-DsIk5RSi.cjs"),presets=require("./presets-DA-6KYJh.cjs"),css=require("./css-CREh0Awz.cjs"),formatters=require("./formatters.cjs"),svg=require("./svg-BtMrj3fP.cjs"),effects=require("./effects.cjs"),animation=require("./animation.cjs"),material=require("./material.cjs"),types=require("./types-BFkUlDkW.cjs");exports.createGradient=core.createGradient;exports.createGradientFromColor=core.createGradientFromColor;exports.colorToHex=utils.colorToHex;exports.getContrastingColor=utils.getContrastingColor;exports.parseColor=utils.parseColor;exports.rgbToChannels=utils.rgbToChannels;exports.rgbToHex=utils.rgbToHex;exports.COLOR_SEEDS=designTokens.COLOR_SEEDS;exports.DEFAULT_SEED=designTokens.DEFAULT_SEED;exports.createColorSystem=designTokens.createColorSystem;exports.createDesignTokens=designTokens.createDesignTokens;exports.createSemanticTokens=designTokens.createSemanticTokens;exports.normalizeDesignTokenSeed=designTokens.normalizeDesignTokenSeed;exports.COLOR_SHADES=presets.COLOR_SHADES;exports.ON_SHADE_TONES=presets.ON_SHADE_TONES;exports.SHADE_TONES=presets.SHADE_TONES;exports.createGradientModel=presets.createGradientModel;exports.createGradientModelFromColor=presets.createGradientModelFromColor;exports.createOnPalette=presets.createOnPalette;exports.createPalette=presets.createPalette;exports.createPalettePair=presets.createPalettePair;exports.createRecipeStops=presets.createRecipeStops;exports.defineGradientPreset=presets.defineGradientPreset;exports.defineGradientPresetRegistry=presets.defineGradientPresetRegistry;exports.getGradientPreset=presets.getGradientPreset;exports.gradientPresets=presets.gradientPresets;exports.gradientRecipes=presets.gradientRecipes;exports.createLinearGradient=css.createLinearGradient;exports.toCssGradient=css.toCssGradient;exports.toCanvasGradient=formatters.toCanvasGradient;exports.toSvgGradient=svg.toSvgGradient;exports.toSvgGradientMarkup=svg.toSvgGradientMarkup;exports.toSvgPathAnimationMarkup=svg.toSvgPathAnimationMarkup;exports.toSvgSourceAnimationMarkup=svg.toSvgSourceAnimationMarkup;exports.createGradientMorphBlobs=effects.createGradientMorphBlobs;exports.isGradientMorphBlendMode=effects.isGradientMorphBlendMode;exports.resolveGradientMorphBlendMode=effects.resolveGradientMorphBlendMode;exports.toGradientBoxShadow=effects.toGradientBoxShadow;exports.toGradientDropShadow=effects.toGradientDropShadow;exports.toGradientMorphCSS=effects.toGradientMorphCSS;exports.toGradientMorphFilter=effects.toGradientMorphFilter;exports.toGradientMorphFilterMarkup=effects.toGradientMorphFilterMarkup;exports.toGradientMorphMarkup=effects.toGradientMorphMarkup;exports.toGradientAnimationCSS=animation.toGradientAnimationCSS;exports.clearGradientMaterialCache=material.clearGradientMaterialCache;exports.createGradientMaterial=material.createGradientMaterial;exports.createGradientPreset=material.createGradientPreset;exports.createGradientTokens=material.createGradientTokens;exports.getGradientMaterialCacheStats=material.getGradientMaterialCacheStats;exports.setGradientMaterialCacheLimit=material.setGradientMaterialCacheLimit;exports.DEFAULT_GRADIENT_MORPH_BLEND_MODE=types.DEFAULT_GRADIENT_MORPH_BLEND_MODE;exports.GRADIENT_MORPH_BLEND_MODES=types.GRADIENT_MORPH_BLEND_MODES;