@gradient-ui/gradient-engine 0.5.0 → 0.6.0

package/README.md

@@ -41,6 +41,10 @@ const material = createGradientMaterial('#704aff', {
 `createGradientMaterial` returns a richer object for components: CSS variables,
 CSS text, optional keyframes, effects and the underlying gradient model.
 
+Material output is memoized by seed and material options. Repeated calls with
+the same input reuse the same pure result instead of recalculating palettes,
+stops, shadows, morph blobs and keyframes.
+
 ## API Layers
 
 The package is split into small subpath exports:
@@ -130,6 +134,21 @@ This lets a Vue, React or vanilla adapter decide how to apply the result:
 inline styles, a generated stylesheet, CSS variables, SSR-injected CSS or a
 client runtime registry.
 
+The material cache is intentionally small and bounded. Use the cache helpers
+when a long-running tool needs explicit control:
+
+```ts
+import {
+	clearGradientMaterialCache,
+	getGradientMaterialCacheStats,
+	setGradientMaterialCacheLimit
+} from '@gradient-ui/gradient-engine/material';
+
+setGradientMaterialCacheLimit(256);
+console.log(getGradientMaterialCacheStats());
+clearGradientMaterialCache();
+```
+
 ## SVG
 
 ```ts
@@ -200,8 +219,9 @@ morph SVG filters.
 
 ## Version
 
-`0.5.0` is the first standalone release line for the engine extracted from
-Gradient UI.
+`0.5.0` was the first standalone release line for the engine extracted from
+Gradient UI. `0.6.0` adds the public morph blend-mode API used by the
+`0.5.0` core release line.
 
 ## License
 

package/dist/animation.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./utils-6iJ6IpZZ.cjs"),c=t=>`@keyframes ${t} {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./utils-D83DMCMa.cjs"),c=t=>`@keyframes ${t} {
 	0% {
 		background-position: 0% 50%;
 	}

package/dist/animation.mjs

@@ -1,4 +1,4 @@
-import { t as s } from "./utils-B_VQDGMy.js";
+import { t as s } from "./utils-BzSNCfat.js";
 const u = (t) => `@keyframes ${t} {
 	0% {
 		background-position: 0% 50%;

package/dist/core.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./presets-UIJJyagu.cjs"),i=require("./css-YuAJQW13.cjs"),a=(t,r={})=>i.toCssGradient(e.createGradientModel(t,r)),d=(t,r={})=>a(e.createPalette(t),r);exports.createGradientModel=e.createGradientModel;exports.createGradientModelFromColor=e.createGradientModelFromColor;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.createGradient=a;exports.createGradientFromColor=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./presets-BBLdqUE4.cjs"),d=require("./css-BVHXLMRl.cjs"),i=require("./types-BMLEvdee.cjs"),a=(t,r={})=>d.toCssGradient(e.createGradientModel(t,r)),n=(t,r={})=>a(e.createPalette(t),r);exports.createGradientModel=e.createGradientModel;exports.createGradientModelFromColor=e.createGradientModelFromColor;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.DEFAULT_GRADIENT_MORPH_BLEND_MODE=i.DEFAULT_GRADIENT_MORPH_BLEND_MODE;exports.GRADIENT_MORPH_BLEND_MODES=i.GRADIENT_MORPH_BLEND_MODES;exports.createGradient=a;exports.createGradientFromColor=n;

package/dist/core.mjs

@@ -1,16 +1,19 @@
-import { c as r, b as a } from "./presets-55krt4L_.js";
-import { a as m, d as p, e as f, f as g, g as l, h as P, i as C } from "./presets-55krt4L_.js";
-import { t as s } from "./css-CaOuUhfh.js";
-const o = (e, t = {}) => s(r(e, t)), n = (e, t = {}) => o(a(e), t);
+import { c as t, d as a } from "./presets-DYXLx_nN.js";
+import { a as m, f as p, g as D, h as f, i as E, j as P, k as R } from "./presets-DYXLx_nN.js";
+import { t as s } from "./css-DVaTTIqS.js";
+import { D as M, G as g } from "./types-BFr1fN-7.js";
+const o = (e, r = {}) => s(t(e, r)), n = (e, r = {}) => o(a(e), r);
 export {
+  M as DEFAULT_GRADIENT_MORPH_BLEND_MODE,
+  g as GRADIENT_MORPH_BLEND_MODES,
   o as createGradient,
   n as createGradientFromColor,
-  r as createGradientModel,
+  t as createGradientModel,
   m as createGradientModelFromColor,
   p as createRecipeStops,
-  f as defineGradientPreset,
-  g as defineGradientPresetRegistry,
-  l as getGradientPreset,
+  D as defineGradientPreset,
+  f as defineGradientPresetRegistry,
+  E as getGradientPreset,
   P as gradientPresets,
-  C as gradientRecipes
+  R as gradientRecipes
 };

package/dist/{css-YuAJQW13.cjs → css-BVHXLMRl.cjs}

@@ -1 +1 @@
-"use strict";const i=require("./utils-6iJ6IpZZ.cjs"),a=(t,n=i.DEFAULT_GRADIENT_DIRECTION)=>`linear-gradient(${i.normalizeDirection(n)}, ${t.join(", ")})`,e=t=>{const n=t.stops.map(i.formatStop).join(", ");if(t.type==="radial"){const o=t.shape??"ellipse",s=t.size??i.DEFAULT_GRADIENT_SIZE,r=t.position??i.DEFAULT_GRADIENT_POSITION;return`radial-gradient(${o} ${s} at ${r}, ${n})`}if(t.type==="conic"){const o=i.normalizeDirection(t.direction),s=t.position??i.DEFAULT_GRADIENT_POSITION,r=i.getConicStops(t.stops).map(i.formatStop).join(", ");return`conic-gradient(from ${o} at ${s}, ${r})`}return a(t.stops.map(i.formatStop),t.direction)};exports.createLinearGradient=a;exports.toCssGradient=e;
+"use strict";const i=require("./utils-D83DMCMa.cjs"),a=(t,n=i.DEFAULT_GRADIENT_DIRECTION)=>`linear-gradient(${i.normalizeDirection(n)}, ${t.join(", ")})`,e=t=>{const n=t.stops.map(i.formatStop).join(", ");if(t.type==="radial"){const o=t.shape??"ellipse",s=t.size??i.DEFAULT_GRADIENT_SIZE,r=t.position??i.DEFAULT_GRADIENT_POSITION;return`radial-gradient(${o} ${s} at ${r}, ${n})`}if(t.type==="conic"){const o=i.normalizeDirection(t.direction),s=t.position??i.DEFAULT_GRADIENT_POSITION,r=i.getConicStops(t.stops).map(i.formatStop).join(", ");return`conic-gradient(from ${o} at ${s}, ${r})`}return a(t.stops.map(i.formatStop),t.direction)};exports.createLinearGradient=a;exports.toCssGradient=e;

package/dist/{css-CaOuUhfh.js → css-DVaTTIqS.js}

@@ -1,4 +1,4 @@
-import { D as p, n as c, f as a, d as e, e as r, g as D } from "./utils-B_VQDGMy.js";
+import { D as p, n as c, f as a, d as e, e as r, h as D } from "./utils-BzSNCfat.js";
 const $ = (t, i = p) => `linear-gradient(${c(i)}, ${t.join(", ")})`, I = (t) => {
   const i = t.stops.map(a).join(", ");
   if (t.type === "radial") {

package/dist/design-tokens.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./utils-D83DMCMa.cjs");const e=require("./designTokens-C1WdzS3v.cjs");require("./material.cjs");exports.DEFAULT_SEED=e.DEFAULT_SEED;exports.createDesignTokens=e.createDesignTokens;exports.normalizeDesignTokenSeed=e.normalizeDesignTokenSeed;

package/dist/design-tokens.mjs

@@ -0,0 +1,8 @@
+import "./utils-BzSNCfat.js";
+import { D as r, a as s, n as i } from "./designTokens-BnzZfRES.js";
+import "./material.mjs";
+export {
+  r as DEFAULT_SEED,
+  s as createDesignTokens,
+  i as normalizeDesignTokenSeed
+};

package/dist/designTokens-BnzZfRES.js

@@ -0,0 +1,116 @@
+import { p as f, r as u, g as h, c as F } from "./utils-BzSNCfat.js";
+import { createGradient as c, createGradientFromColor as S } from "./core.mjs";
+import { e as m, C as T, t as $, l as k, m as y } from "./presets-DYXLx_nN.js";
+import { createGradientTokens as E } from "./material.mjs";
+const p = {
+  red: "#F44336",
+  pink: "#E91E63",
+  purple: "#9C27B0",
+  deepPurple: "#673AB7",
+  indigo: "#3F51B5",
+  blue: "#2196F3",
+  lightBlue: "#03A9F4",
+  cyan: "#00BCD4",
+  teal: "#009688",
+  green: "#4CAF50",
+  lightGreen: "#8BC34A",
+  lime: "#CDDC39",
+  yellow: "#FFEB3B",
+  amber: "#FFC107",
+  orange: "#FF9800",
+  deepOrange: "#FF5722",
+  brown: "#795548",
+  grey: "#9E9E9E",
+  blueGrey: "#607D8B"
+}, l = (e) => {
+  const n = f(e);
+  if (!n)
+    throw new Error(`Unsupported generated color: ${String(e)}`);
+  return u(n);
+}, D = (e) => `${e.charAt(0).toUpperCase()}${e.slice(1)}`, i = (e) => `on${D(e)}`, O = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), w = (e) => e.replace(
+  /-([a-z0-9])/g,
+  (n, o) => o.toUpperCase()
+), b = (e, n, o, r) => {
+  const { colors: t, onColors: a } = r;
+  for (const s of T) {
+    const C = t[s];
+    e[`${o}${s}`] = l(C), e[`${i(o)}${s}`] = l(a[s]), n[`${o}${s}`] = c(t, { shade: s });
+  }
+  e[o] = e[`${o}500`], e[i(o)] = e[`${i(o)}500`], n[o] = n[`${o}500`];
+}, P = (e) => typeof e == "object" && e !== null && "color" in e, A = (e) => P(e) ? e : { color: e }, B = (e, n, o, r) => {
+  e[o] = l(r.color), e[i(o)] = l(
+    r.onColor ?? h(r.color)
+  ), r.gradient !== !1 && (n[o] = r.gradient ?? S(r.color));
+}, j = (e, n, o, r, t) => {
+  const a = w(O(r)), s = A(t);
+  if (s.palette === !1) {
+    B(e, n, a, s);
+    return;
+  }
+  const C = m(s.color);
+  o[a] = C, b(e, n, a, C), s.onColor && (e[i(a)] = l(s.onColor)), s.gradient && (n[a] = s.gradient);
+}, z = (e, n = {}) => {
+  const o = {}, r = {}, t = {
+    source: m(e)
+  };
+  for (const [a, s] of Object.entries(p))
+    t[a] = m(s);
+  for (const [a, s] of Object.entries(t))
+    b(o, r, a, s);
+  for (const [a, s] of Object.entries(n.colors ?? {}))
+    j(o, r, t, a, s);
+  return r.main = c(t.source.colors), r.error = c(t.red.colors, { shade: 600 }), r.warning = c(t.amber.colors, { shade: 600 }), r.success = c(t.green.colors, { shade: 600 }), {
+    colors: o,
+    gradients: r,
+    palettes: t
+  };
+}, G = (e) => {
+  const n = f(e);
+  if (!n)
+    throw new Error(`Unsupported generated color: ${String(e)}`);
+  return u(n);
+}, g = (e, n) => {
+  const o = $(k(e)).schemes[n].toJSON();
+  return Object.fromEntries(
+    Object.entries(o).map(([r, t]) => [
+      r,
+      G(y(t))
+    ])
+  );
+}, U = (e, n) => {
+  const o = g(e, n), r = g(p.amber, n), t = g(p.green, n);
+  return {
+    ...o,
+    warning: r.primary,
+    onWarning: r.onPrimary,
+    warningContainer: r.primaryContainer,
+    onWarningContainer: r.onPrimaryContainer,
+    success: t.primary,
+    onSuccess: t.onPrimary,
+    successContainer: t.primaryContainer,
+    onSuccessContainer: t.onPrimaryContainer
+  };
+}, d = "#4e51ff", x = (e = d) => F(e, d), R = (e = {}) => {
+  const n = e.mode ?? "light", o = x(e.seed), r = z(o, {
+    colors: e.colors
+  });
+  return {
+    colorSystem: r,
+    gradientTokens: E(o, e.gradientTokens),
+    mode: n,
+    seed: o,
+    tokens: {
+      theme: U(o, n),
+      colors: r.colors,
+      gradients: r.gradients
+    }
+  };
+};
+export {
+  p as C,
+  d as D,
+  R as a,
+  U as b,
+  z as c,
+  x as n
+};

package/dist/designTokens-C1WdzS3v.cjs

@@ -0,0 +1 @@
+"use strict";const l=require("./utils-D83DMCMa.cjs"),i=require("./core.cjs"),c=require("./presets-BBLdqUE4.cjs"),E=require("./material.cjs"),m={red:"#F44336",pink:"#E91E63",purple:"#9C27B0",deepPurple:"#673AB7",indigo:"#3F51B5",blue:"#2196F3",lightBlue:"#03A9F4",cyan:"#00BCD4",teal:"#009688",green:"#4CAF50",lightGreen:"#8BC34A",lime:"#CDDC39",yellow:"#FFEB3B",amber:"#FFC107",orange:"#FF9800",deepOrange:"#FF5722",brown:"#795548",grey:"#9E9E9E",blueGrey:"#607D8B"},g=e=>{const n=l.parseColor(e);if(!n)throw new Error(`Unsupported generated color: ${String(e)}`);return l.rgbToChannels(n)},F=e=>`${e.charAt(0).toUpperCase()}${e.slice(1)}`,C=e=>`on${F(e)}`,f=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),k=e=>e.replace(/-([a-z0-9])/g,(n,r)=>r.toUpperCase()),S=(e,n,r,o)=>{const{colors:t,onColors:a}=o;for(const s of c.COLOR_SHADES){const d=t[s];e[`${r}${s}`]=g(d),e[`${C(r)}${s}`]=g(a[s]),n[`${r}${s}`]=i.createGradient(t,{shade:s})}e[r]=e[`${r}500`],e[C(r)]=e[`${C(r)}500`],n[r]=n[`${r}500`]},D=e=>typeof e=="object"&&e!==null&&"color"in e,$=e=>D(e)?e:{color:e},y=(e,n,r,o)=>{e[r]=g(o.color),e[C(r)]=g(o.onColor??l.getContrastingColor(o.color)),o.gradient!==!1&&(n[r]=o.gradient??i.createGradientFromColor(o.color))},O=(e,n,r,o,t)=>{const a=k(f(o)),s=$(t);if(s.palette===!1){y(e,n,a,s);return}const d=c.createPalettePair(s.color);r[a]=d,S(e,n,a,d),s.onColor&&(e[C(a)]=g(s.onColor)),s.gradient&&(n[a]=s.gradient)},T=(e,n={})=>{const r={},o={},t={source:c.createPalettePair(e)};for(const[a,s]of Object.entries(m))t[a]=c.createPalettePair(s);for(const[a,s]of Object.entries(t))S(r,o,a,s);for(const[a,s]of Object.entries(n.colors??{}))O(r,o,t,a,s);return o.main=i.createGradient(t.source.colors),o.error=i.createGradient(t.red.colors,{shade:600}),o.warning=i.createGradient(t.amber.colors,{shade:600}),o.success=i.createGradient(t.green.colors,{shade:600}),{colors:r,gradients:o,palettes:t}},P=e=>{const n=l.parseColor(e);if(!n)throw new Error(`Unsupported generated color: ${String(e)}`);return l.rgbToChannels(n)},p=(e,n)=>{const r=c.themeFromSourceColor(c.argbFromHex(e)).schemes[n].toJSON();return Object.fromEntries(Object.entries(r).map(([o,t])=>[o,P(c.hexFromArgb(t))]))},b=(e,n)=>{const r=p(e,n),o=p(m.amber,n),t=p(m.green,n);return{...r,warning:o.primary,onWarning:o.onPrimary,warningContainer:o.primaryContainer,onWarningContainer:o.onPrimaryContainer,success:t.primary,onSuccess:t.onPrimary,successContainer:t.primaryContainer,onSuccessContainer:t.onPrimaryContainer}},u="#4e51ff",h=(e=u)=>l.colorToHex(e,u),w=(e={})=>{const n=e.mode??"light",r=h(e.seed),o=T(r,{colors:e.colors});return{colorSystem:o,gradientTokens:E.createGradientTokens(r,e.gradientTokens),mode:n,seed:r,tokens:{theme:b(r,n),colors:o.colors,gradients:o.gradients}}};exports.COLOR_SEEDS=m;exports.DEFAULT_SEED=u;exports.createColorSystem=T;exports.createDesignTokens=w;exports.createSemanticTokens=b;exports.normalizeDesignTokenSeed=h;

package/dist/effects.cjs

@@ -1,23 +1,23 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./utils-6iJ6IpZZ.cjs"),N="http://www.w3.org/2000/svg",G={soft:{blobCount:5,blur:40,contrast:18,duration:12e3,opacity:.76,scale:1.05},liquid:{blobCount:6,blur:46,contrast:22,duration:9200,opacity:.82,scale:1.18},ripple:{blobCount:7,blur:34,contrast:20,duration:7200,opacity:.78,scale:.94}},y=(t={})=>{const r=G[t.preset??"soft"];return{blobCount:Math.max(2,Math.round(t.blobCount??r.blobCount)),blur:c.clamp(t.blur??r.blur,0,80),contrast:c.clamp(t.contrast??r.contrast,0,36),duration:t.duration??r.duration,id:t.id??"g-gradient-morph",opacity:c.clamp(t.opacity??r.opacity),scale:c.clamp(t.scale??r.scale,.4,2)}},T=(t,r)=>{var o,n;return((o=t.stops[r%t.stops.length])==null?void 0:o.color)??((n=t.stops[0])==null?void 0:n.color)??"currentColor"},X=t=>{if(typeof t=="number")return t;const r=Number.parseFloat(t);return Number.isFinite(r)?r:9e3},Y=(t,r)=>{const o=Math.sin((t+1)*12.9898+r*78.233)*43758.5453;return o-Math.floor(o)},g=(t,r,o,n)=>o+Y(t,r)*(n-o),m=t=>Number(t.toFixed(3)),M=[{animationName:"g-gradient-morph-drift",dx:20,dx2:8,dy:-8,dy2:16,originX:"50%",originY:"50%",scaleMid:1.16,scaleTo:1.04,x:6,y:58},{animationName:"g-gradient-morph-orbit",dx:-18,dx2:10,dy:18,dy2:-10,originX:"24%",originY:"68%",scaleMid:.96,scaleTo:1.12,x:44,y:20},{animationName:"g-gradient-morph-float",dx:-16,dx2:-8,dy:-12,dy2:18,originX:"50%",originY:"50%",scaleMid:1.2,scaleTo:1.08,x:74,y:58},{animationName:"g-gradient-morph-orbit",dx:12,dx2:-20,dy:14,dy2:6,originX:"70%",originY:"30%",scaleMid:1.04,scaleTo:1.18,x:88,y:25},{animationName:"g-gradient-morph-drift",dx:24,dx2:-12,dy:-16,dy2:-8,originX:"50%",originY:"50%",scaleMid:1.12,scaleTo:.98,x:30,y:78},{animationName:"g-gradient-morph-float",dx:-22,dx2:14,dy:10,dy2:-18,originX:"50%",originY:"50%",scaleMid:.94,scaleTo:1.1,x:104,y:82},{animationName:"g-gradient-morph-orbit",dx:14,dx2:-16,dy:-22,dy2:10,originX:"35%",originY:"35%",scaleMid:1.18,scaleTo:1.02,x:55,y:64},{animationName:"g-gradient-morph-drift",dx:-18,dx2:18,dy:-14,dy2:14,originX:"50%",originY:"50%",scaleMid:1.08,scaleTo:.96,x:18,y:24}],v=(t,r={})=>{const{blobCount:o,duration:n,scale:d}=y(r),a=X(n);return Array.from({length:o},(s,e)=>{const i=M[e%M.length],l=g(e,1,.88,1.16),p=g(e,2,.86,1.24),u=g(e,3,.72,1),$=g(e,4,0,4),x=(34+e%4*9)*d*l;return{animationName:i.animationName,blur:m($),color:T(t,e),delay:Math.round(e*-.19*a-g(e,5,0,900)),dx:m(i.dx*g(e,6,.84,1.18)),dx2:m(i.dx2*g(e,7,.82,1.22)),dy:m(i.dy*g(e,8,.84,1.18)),dy2:m(i.dy2*g(e,9,.82,1.22)),duration:Math.round(a*(1+e%3*.11)*p),opacity:m(u),originX:i.originX,originY:i.originY,rotateMid:Math.round(g(e,10,95,165)),rotateTo:Math.round(g(e,11,220,310)),scaleMid:i.scaleMid,scaleTo:i.scaleTo,size:m(x),x:i.x,y:i.y}})},C=(t={})=>`url(#${y(t).id}) blur(${y(t).blur}px)`,B=(t={})=>{const{blur:r,contrast:o,id:n}=y(t),d=Math.max(2,Math.round(r*.25)),a=-(o*.45),s=o<=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 ${o} ${a}" 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="${n}" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="${d}" result="g-gradient-morph-blur" />${s}
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./utils-D83DMCMa.cjs"),D=require("./css-BVHXLMRl.cjs"),S=require("./types-BMLEvdee.cjs"),_="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;"),X={soft:{blobCount:5,blur:40,contrast:18,duration:12e3,opacity:.76,scale:1.05},liquid:{blobCount:6,blur:46,contrast:22,duration:9200,opacity:.82,scale:1.18},ripple:{blobCount:7,blur:34,contrast:20,duration:7200,opacity:.78,scale:.94}},Y=new Set(S.GRADIENT_MORPH_BLEND_MODES),G=r=>Y.has(r),N=r=>r&&G(r)?r:S.DEFAULT_GRADIENT_MORPH_BLEND_MODE,y=(r={})=>{const a=X[r.preset??"soft"];return{blobCount:Math.max(2,Math.round(r.blobCount??a.blobCount)),blendMode:N(r.blendMode),blobOpacity:c.clamp(r.blobOpacity??1,0,1.6),blur:c.clamp(r.blur??a.blur,0,80),contrast:c.clamp(r.contrast??a.contrast,0,36),duration:r.duration??a.duration,id:r.id??"g-gradient-morph",opacity:c.clamp(r.opacity??a.opacity),scale:c.clamp(r.scale??a.scale,.4,2)}},L=(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"},E=r=>{if(typeof r=="number")return r;const a=Number.parseFloat(r);return Number.isFinite(a)?a:9e3},A=(r,a)=>{const t=Math.sin((r+1)*12.9898+a*78.233)*43758.5453;return t-Math.floor(t)},l=(r,a,t,i)=>t+A(r,a)*(i-t),h=r=>Number(r.toFixed(3)),w=[{animationName:"g-gradient-morph-drift",dx:20,dx2:8,dy:-8,dy2:16,originX:"50%",originY:"50%",scaleMid:1.16,scaleTo:1.04,x:6,y:58},{animationName:"g-gradient-morph-orbit",dx:-18,dx2:10,dy:18,dy2:-10,originX:"24%",originY:"68%",scaleMid:.96,scaleTo:1.12,x:44,y:20},{animationName:"g-gradient-morph-float",dx:-16,dx2:-8,dy:-12,dy2:18,originX:"50%",originY:"50%",scaleMid:1.2,scaleTo:1.08,x:74,y:58},{animationName:"g-gradient-morph-orbit",dx:12,dx2:-20,dy:14,dy2:6,originX:"70%",originY:"30%",scaleMid:1.04,scaleTo:1.18,x:88,y:25},{animationName:"g-gradient-morph-drift",dx:24,dx2:-12,dy:-16,dy2:-8,originX:"50%",originY:"50%",scaleMid:1.12,scaleTo:.98,x:30,y:78},{animationName:"g-gradient-morph-float",dx:-22,dx2:14,dy:10,dy2:-18,originX:"50%",originY:"50%",scaleMid:.94,scaleTo:1.1,x:104,y:82},{animationName:"g-gradient-morph-orbit",dx:14,dx2:-16,dy:-22,dy2:10,originX:"35%",originY:"35%",scaleMid:1.18,scaleTo:1.02,x:55,y:64},{animationName:"g-gradient-morph-drift",dx:-18,dx2:18,dy:-14,dy2:14,originX:"50%",originY:"50%",scaleMid:1.08,scaleTo:.96,x:18,y:24}],v=(r,a={})=>{const{blobCount:t,blobOpacity:i,duration:g,scale:d}=y(a),e=E(g);return Array.from({length:t},(m,n)=>{const s=w[n%w.length],p=l(n,1,.88,1.16),o=l(n,2,.86,1.24),$=c.clamp(l(n,3,.72,1)*i),f=l(n,4,0,4),x=(34+n%4*9)*d*p;return{animationName:s.animationName,blur:h(f),color:L(r,n),delay:Math.round(n*-.19*e-l(n,5,0,900)),dx:h(s.dx*l(n,6,.84,1.18)),dx2:h(s.dx2*l(n,7,.82,1.22)),dy:h(s.dy*l(n,8,.84,1.18)),dy2:h(s.dy2*l(n,9,.82,1.22)),duration:Math.round(e*(1+n%3*.11)*o),opacity:h($),originX:s.originX,originY:s.originY,rotateMid:Math.round(l(n,10,95,165)),rotateTo:Math.round(l(n,11,220,310)),scaleMid:s.scaleMid,scaleTo:s.scaleTo,size:h(x),x:s.x,y:s.y}})},M=(r={})=>`url(#${y(r).id}) blur(${y(r).blur}px)`,B=(r={})=>{const{blur:a,contrast:t,id:i}=y(r),g=Math.max(2,Math.round(a*.25)),d=-(t*.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" />
+    <feBlend in="SourceGraphic" in2="g-gradient-morph-goo" />`;return`<svg xmlns="${_}" 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}
   </filter>
-</svg>`},k=(t,r={})=>{const o=r.selector??".g-gradient-morph",{opacity:n}=y(r),d=v(t,r);return`${o} {
+</svg>`},P=(r,a={})=>{const t=a.selector??".g-gradient-morph",{blendMode:i,opacity:g}=y(a),d=v(r,a);return`${t} {
 	position: relative;
 	overflow: hidden;
 }
 
-${o}__blobs {
+${t}__blobs {
 	position: absolute;
 	inset: -18%;
-	opacity: ${n};
-	filter: ${C(r)};
-	mix-blend-mode: hard-light;
+	opacity: ${g};
+	filter: ${M(a)};
+	mix-blend-mode: ${i};
 }
 
-${o}__blob {
+${t}__blob {
 	position: absolute;
 	transform: translate(-50%, -50%);
 	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
@@ -28,27 +28,28 @@ ${o}__blob {
 	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
 }
 
-${d.map((a,s)=>`${o}__blob:nth-child(${s+1}) {
-	top: ${a.y}%;
-	left: ${a.x}%;
-	width: ${a.size}%;
+${d.map((e,m)=>`${t}__blob:nth-child(${m+1}) {
+	top: ${e.y}%;
+	left: ${e.x}%;
+	width: ${e.size}%;
 	aspect-ratio: 1;
-	--g-gradient-morph-blob-color: ${a.color};
-	--g-gradient-morph-x: ${a.dx}%;
-	--g-gradient-morph-x2: ${a.dx2}%;
-	--g-gradient-morph-y: ${a.dy}%;
-	--g-gradient-morph-y2: ${a.dy2}%;
-	--g-gradient-morph-origin-x: ${a.originX};
-	--g-gradient-morph-origin-y: ${a.originY};
-	--g-gradient-morph-animation: ${a.animationName};
-	--g-gradient-morph-blur: ${a.blur}px;
-	--g-gradient-morph-opacity: ${a.opacity};
-	--g-gradient-morph-rotate-mid: ${a.rotateMid}deg;
-	--g-gradient-morph-rotate-to: ${a.rotateTo}deg;
-	--g-gradient-morph-scale-mid: ${a.scaleMid};
-	--g-gradient-morph-scale: ${a.scaleTo};
-	animation-delay: ${a.delay}ms;
-	animation-duration: ${c.toCssDuration(a.duration)};
+	--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;
+	animation-delay: var(--g-gradient-morph-delay);
+	animation-duration: ${c.toCssDuration(e.duration)};
 }`).join(`
 
 `)}
@@ -93,4 +94,108 @@ ${d.map((a,s)=>`${o}__blob:nth-child(${s+1}) {
 	100% {
 		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));
 	}
-}`},S=(t,r)=>{const o=t.stops.filter(a=>a.position>=25&&a.position<=85),n=t.stops.filter(a=>!o.includes(a));return[...o,...n].sort((a,s)=>Math.abs(a.position-50)-Math.abs(s.position-50)).slice(0,r)},D=(t,r)=>t*([1,.54,.3,.18][r]??.12),h=(t,r)=>{const o=String(t).match(/^(-?\d*\.?\d+)(.*)$/);return o?`${Math.round(Number(o[1])*r*1e3)/1e3}${o[2]||"px"}`:null},b=(t,r,o)=>h(t,1/r)??(o===0?c.toCssLength(t):"0px"),L=(t,r)=>h(t,1/Math.sqrt(r))??c.toCssLength(t),_=(t,r={})=>{var f;const o=r.x??0,n=r.y??6,d=r.blur??14,a=r.spread??-3,s=r.opacity??.24,e=Math.max(1,Math.round(r.layers??2)),i=((f=S(t,1)[0])==null?void 0:f.color)??"#000000",l=`${c.toCssLength(o)} ${c.toCssLength(n)} ${c.toCssLength(d)} ${c.toCssLength(a)} ${c.toCssColor(i,s)}`;if(e===1)return l;const p=h(o,.35)??"0px",u=h(n,.35)??"2px",$=h(d,.3)??"4px",x=h(a,.5)??"-2px",w=Math.min(.18,s*.65);return`${`${p} ${u} ${$} ${x} ${c.toCssColor("#000000",w)}`}, ${l}`},F=(t,r={})=>{const o=r.x??0,n=r.y??6,d=r.blur??14,a=r.opacity??.42,s=Math.max(1,Math.round(r.layers??2)),e=L(d,s);return S(t,s).map((i,l)=>{const p=b(o,s,l),u=b(n,s,l);return`drop-shadow(${p} ${u} ${e} ${c.toCssColor(i.color,D(a,l))})`}).join(" ")};exports.createGradientMorphBlobs=v;exports.toGradientBoxShadow=_;exports.toGradientDropShadow=F;exports.toGradientMorphCSS=k;exports.toGradientMorphFilter=C;exports.toGradientMorphFilterMarkup=B;
+}`},z=(r,a={})=>{const t=a.id??"g-gradient-morph",i=a.width??360,g=a.height??240,d=a.rx??24,e=`${t}-filter`,m=M({...a,id:e}),n=v(r,a),{blendMode:s,opacity:p}=y(a);return`<svg xmlns="${_}" viewBox="0 0 ${i} ${g}" width="${i}" height="${g}" role="img">
+  <defs>
+    <clipPath id="${t}-clip">
+      <rect width="${i}" height="${g}" rx="${d}" />
+    </clipPath>
+  </defs>
+  <foreignObject width="${i}" height="${g}" clip-path="url(#${t}-clip)">
+    <div xmlns="${k}" class="g-gradient-material">
+      ${B({...a,id:`${t}-filter`})}
+      <style>
+.g-gradient-material {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	width: ${i}px;
+	height: ${g}px;
+	border-radius: ${d}px;
+}
+
+.g-gradient-material__surface {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	width: 100%;
+	height: 100%;
+	border-radius: ${d}px;
+	background: ${O(D.toCssGradient(r))};
+}
+
+.g-gradient-material__morph {
+	--g-gradient-material-morph-bleed: 18%;
+	position: absolute;
+	z-index: 1;
+	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: ${p};
+	filter: ${m};
+	mix-blend-mode: ${s};
+}
+
+.g-gradient-material__morph-blob {
+	position: absolute;
+	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
+	transform: translate(-50%, -50%);
+	aspect-ratio: 1;
+	border-radius: 999px;
+	opacity: var(--g-gradient-morph-opacity);
+	background: radial-gradient(circle, var(--g-gradient-morph-blob-color) 0%, transparent 72%);
+	filter: blur(var(--g-gradient-morph-blur));
+	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
+}
+
+${n.map((o,$)=>`.g-gradient-material__morph-blob:nth-child(${$+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;
+	animation-delay: var(--g-gradient-morph-delay);
+	animation-duration: ${c.toCssDuration(o.duration)};
+}`).join(`
+
+`)}
+
+@keyframes g-gradient-morph-drift {
+	0% { transform: translate(-50%, -50%) scale(0.92); }
+	42% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale-mid)); }
+}
+
+@keyframes g-gradient-morph-float {
+	0% { transform: translate(-50%, -50%) scale(1); }
+	50% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale-mid)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale)); }
+}
+
+@keyframes g-gradient-morph-orbit {
+	0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); }
+	50% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) rotate(var(--g-gradient-morph-rotate-mid)) scale(var(--g-gradient-morph-scale-mid)); }
+	100% { 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)); }
+}
+      </style>
+      <span class="g-gradient-material__surface">
+        <span class="g-gradient-material__morph">
+          ${n.map(()=>'<span class="g-gradient-material__morph-blob"></span>').join(`
+          `)}
+        </span>
+      </span>
+    </div>
+  </foreignObject>
+</svg>`},T=(r,a)=>{const t=r.stops.filter(d=>d.position>=25&&d.position<=85),i=r.stops.filter(d=>!t.includes(d));return[...t,...i].sort((d,e)=>Math.abs(d.position-50)-Math.abs(e.position-50)).slice(0,a)},F=(r,a)=>r*([1,.54,.3,.18][a]??.12),u=(r,a)=>{const t=String(r).match(/^(-?\d*\.?\d+)(.*)$/);return t?`${Math.round(Number(t[1])*a*1e3)/1e3}${t[2]||"px"}`:null},C=(r,a,t)=>u(r,1/a)??(t===0?c.toCssLength(r):"0px"),j=(r,a)=>u(r,1/Math.sqrt(a))??c.toCssLength(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??.24,m=Math.max(1,Math.round(a.layers??2)),n=((b=T(r,1)[0])==null?void 0:b.color)??"#000000",s=`${c.toCssLength(t)} ${c.toCssLength(i)} ${c.toCssLength(g)} ${c.toCssLength(d)} ${c.toCssColor(n,e)}`;if(m===1)return s;const p=u(t,.35)??"0px",o=u(i,.35)??"2px",$=u(g,.3)??"4px",f=u(d,.5)??"-2px",x=Math.min(.18,e*.65);return`${`${p} ${o} ${$} ${f} ${c.toCssColor("#000000",x)}`}, ${s}`},R=(r,a={})=>{const t=a.x??0,i=a.y??6,g=a.blur??14,d=a.opacity??.42,e=Math.max(1,Math.round(a.layers??2)),m=j(g,e);return T(r,e).map((n,s)=>{const p=C(t,e,s),o=C(i,e,s);return`drop-shadow(${p} ${o} ${m} ${c.toCssColor(n.color,F(d,s))})`}).join(" ")};exports.createGradientMorphBlobs=v;exports.isGradientMorphBlendMode=G;exports.resolveGradientMorphBlendMode=N;exports.toGradientBoxShadow=q;exports.toGradientDropShadow=R;exports.toGradientMorphCSS=P;exports.toGradientMorphFilter=M;exports.toGradientMorphFilterMarkup=B;exports.toGradientMorphMarkup=z;