@gradient-ui/gradient-engine 0.5.0

package/README.md

@@ -0,0 +1,208 @@
+# Gradient Engine
+
+Framework-free gradient generation engine used by Gradient UI.
+
+`@gradient-ui/gradient-engine` creates deterministic gradient models, CSS
+gradients, SVG gradients, canvas gradient descriptors, shadows, morph effects,
+animation CSS and material tokens. It does not touch the DOM by default, so it
+can be used from Vue, React, vanilla JavaScript, server builds or design-system
+tooling.
+
+## Install
+
+```bash
+npm install @gradient-ui/gradient-engine
+```
+
+## Quick Start
+
+```ts
+import {
+	createGradientFromColor,
+	createGradientMaterial
+} from '@gradient-ui/gradient-engine';
+
+const background = createGradientFromColor('#704aff', {
+	recipe: 'glare',
+	type: 'linear',
+	direction: 135
+});
+
+const material = createGradientMaterial('#704aff', {
+	preset: 'materialAction',
+	animation: {
+		preset: 'shift',
+		duration: 6000
+	}
+});
+```
+
+`createGradientFromColor` returns a ready-to-use CSS background value.
+`createGradientMaterial` returns a richer object for components: CSS variables,
+CSS text, optional keyframes, effects and the underlying gradient model.
+
+## API Layers
+
+The package is split into small subpath exports:
+
+```ts
+import { createGradientFromColor } from '@gradient-ui/gradient-engine/core';
+import { toCssGradient } from '@gradient-ui/gradient-engine/formatters';
+import { createGradientMorph } from '@gradient-ui/gradient-engine/effects';
+import { toGradientAnimationCSS } from '@gradient-ui/gradient-engine/animation';
+import { createGradientMaterial } from '@gradient-ui/gradient-engine/material';
+```
+
+- `core` creates palettes, recipes and gradient models.
+- `formatters` converts models to CSS, SVG and canvas-friendly output.
+- `effects` creates shadow, drop-shadow and morph effect values.
+- `animation` creates CSS keyframes and animation declarations.
+- `material` creates component-oriented tokens for UI libraries.
+
+## Recipes
+
+Gradient recipes describe color harmony, not rendering format.
+
+```ts
+createGradientFromColor('#704aff', { recipe: 'monochrome' });
+createGradientFromColor('#704aff', { recipe: 'complementary' });
+createGradientFromColor('#704aff', { recipe: 'split-complementary' });
+createGradientFromColor('#704aff', { recipe: 'analogous' });
+createGradientFromColor('#704aff', { recipe: 'triadic' });
+createGradientFromColor('#704aff', { recipe: 'tetradic' });
+createGradientFromColor('#704aff', { recipe: 'rectangle' });
+createGradientFromColor('#704aff', { recipe: 'square' });
+createGradientFromColor('#704aff', { recipe: 'duotone' });
+createGradientFromColor('#704aff', { recipe: 'glare' });
+```
+
+## Gradient Types
+
+```ts
+createGradientFromColor('#704aff', {
+	type: 'linear',
+	direction: 135
+});
+
+createGradientFromColor('#704aff', {
+	type: 'radial',
+	shape: 'circle',
+	position: '50% 45%'
+});
+
+createGradientFromColor('#704aff', {
+	type: 'conic',
+	position: '50% 50%'
+});
+```
+
+## Materials
+
+Materials are the bridge between the pure engine and component libraries.
+
+```ts
+const material = createGradientMaterial('#704aff', {
+	preset: 'materialAction',
+	recipe: 'glare',
+	effects: true,
+	animation: {
+		preset: 'shift',
+		duration: 6000
+	}
+});
+```
+
+The returned object is intentionally serializable:
+
+```ts
+material.id;
+material.className;
+material.style;
+material.cssVars;
+material.cssText;
+material.keyframes;
+material.gradient;
+material.effects;
+material.animation;
+```
+
+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.
+
+## SVG
+
+```ts
+import {
+	createGradientModelFromColor,
+	toSvgGradient
+} from '@gradient-ui/gradient-engine';
+
+const model = createGradientModelFromColor('#704aff', {
+	recipe: 'analogous',
+	type: 'linear'
+});
+
+const svg = toSvgGradient(model, {
+	id: 'brand-gradient'
+});
+```
+
+SVG helpers are for generated markup and definitions. They do not mount the SVG
+into the document.
+
+## Animations
+
+```ts
+import { toGradientAnimationCSS } from '@gradient-ui/gradient-engine';
+
+const animation = toGradientAnimationCSS({
+	name: 'hero-gradient',
+	preset: 'shift',
+	duration: 8000
+});
+```
+
+Available presets: `shift`, `pulse`, `rotate`, `hue-rotate`.
+
+Different surfaces should opt into animation carefully. For example, `rotate`
+is useful for large decorative surfaces, but usually too aggressive for compact
+buttons and borders.
+
+## Effects
+
+Effects are plain strings or serializable descriptions.
+
+```ts
+import {
+	createGradientBoxShadow,
+	createGradientDropShadow,
+	createGradientMorph
+} from '@gradient-ui/gradient-engine/effects';
+
+const boxShadow = createGradientBoxShadow('#704aff');
+const dropShadow = createGradientDropShadow('#704aff');
+const morph = createGradientMorph('#704aff', {
+	preset: 'liquid',
+	blobCount: 5
+});
+```
+
+The engine only creates values. DOM-specific mounting for SVG filters, style
+tags or animation lifecycles belongs in an adapter.
+
+## SSR
+
+The core package is SSR-safe because it has no browser side effects. For SSR,
+generate the material/model on the server, serialize `cssVars`, `cssText` and
+`keyframes`, then let the client adapter mount optional runtime effects such as
+morph SVG filters.
+
+## Version
+
+`0.5.0` is the first standalone release line for the engine extracted from
+Gradient UI.
+
+## License
+
+MIT

package/dist/animation.cjs

@@ -0,0 +1,60 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./utils-6iJ6IpZZ.cjs"),c=t=>`@keyframes ${t} {
+	0% {
+		background-position: 0% 50%;
+	}
+
+	50% {
+		background-position: 100% 50%;
+	}
+
+	100% {
+		background-position: 0% 50%;
+	}
+}`,f=t=>`@keyframes ${t} {
+	0%, 100% {
+		filter: saturate(1) brightness(1);
+	}
+
+	50% {
+		filter: saturate(1.22) brightness(1.08);
+	}
+}`,d=t=>`@keyframes ${t} {
+	0%, 100% {
+		filter: hue-rotate(0deg) saturate(1);
+	}
+
+	50% {
+		filter: hue-rotate(28deg) saturate(1.18);
+	}
+}`,l=t=>`@keyframes ${t} {
+	from {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+
+	to {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}`,o=(t={})=>{const e=t.name??"g-gradient-shift",n=m.toCssDuration(t.duration??6e3),r=t.easing??"ease-in-out",i=t.selector??".g-gradient-animated",a=t.preset??"shift";return{duration:n,easing:r,name:e,preset:a,selector:i}},s=(t={})=>{const{name:e,preset:n}=o(t);return n==="pulse"?f(e):n==="hue-rotate"?d(e):n==="rotate"?l(e):c(e)},g=(t={})=>{const{duration:e,easing:n,name:r,preset:i}=o(t);return`${r} ${e} ${i==="rotate"?"linear":n} infinite`},u=(t={})=>{const{duration:e,easing:n,name:r,preset:i,selector:a}=o(t);return i==="rotate"?`${a} {
+	position: relative;
+	overflow: hidden;
+}
+
+${a}::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 200%;
+	height: 200%;
+	min-width: 150vmax;
+	min-height: 150vmax;
+	background: inherit;
+	animation: ${r} ${e} linear infinite;
+	transform-origin: center;
+}`:i==="pulse"||i==="hue-rotate"?`${a} {
+	animation: ${r} ${e} ${n} infinite;
+}`:`${a} {
+	animation: ${r} ${e} ${n} infinite;
+	background-size: 220% 220%;
+}`},$=(t={})=>{const e=s(t),n=u(t);return`${e}
+${n}`};exports.getGradientAnimationOptions=o;exports.toGradientAnimationCSS=$;exports.toGradientAnimationKeyframes=s;exports.toGradientAnimationStyles=u;exports.toGradientAnimationValue=g;

package/dist/animation.mjs

@@ -0,0 +1,89 @@
+import { t as s } from "./utils-B_VQDGMy.js";
+const u = (t) => `@keyframes ${t} {
+	0% {
+		background-position: 0% 50%;
+	}
+
+	50% {
+		background-position: 100% 50%;
+	}
+
+	100% {
+		background-position: 0% 50%;
+	}
+}`, f = (t) => `@keyframes ${t} {
+	0%, 100% {
+		filter: saturate(1) brightness(1);
+	}
+
+	50% {
+		filter: saturate(1.22) brightness(1.08);
+	}
+}`, m = (t) => `@keyframes ${t} {
+	0%, 100% {
+		filter: hue-rotate(0deg) saturate(1);
+	}
+
+	50% {
+		filter: hue-rotate(28deg) saturate(1.18);
+	}
+}`, c = (t) => `@keyframes ${t} {
+	from {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+
+	to {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}`, o = (t = {}) => {
+  const e = t.name ?? "g-gradient-shift", n = s(t.duration ?? 6e3), r = t.easing ?? "ease-in-out", a = t.selector ?? ".g-gradient-animated", i = t.preset ?? "shift";
+  return {
+    duration: n,
+    easing: r,
+    name: e,
+    preset: i,
+    selector: a
+  };
+}, d = (t = {}) => {
+  const { name: e, preset: n } = o(t);
+  return n === "pulse" ? f(e) : n === "hue-rotate" ? m(e) : n === "rotate" ? c(e) : u(e);
+}, $ = (t = {}) => {
+  const { duration: e, easing: n, name: r, preset: a } = o(t);
+  return `${r} ${e} ${a === "rotate" ? "linear" : n} infinite`;
+}, g = (t = {}) => {
+  const { duration: e, easing: n, name: r, preset: a, selector: i } = o(t);
+  return a === "rotate" ? `${i} {
+	position: relative;
+	overflow: hidden;
+}
+
+${i}::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 200%;
+	height: 200%;
+	min-width: 150vmax;
+	min-height: 150vmax;
+	background: inherit;
+	animation: ${r} ${e} linear infinite;
+	transform-origin: center;
+}` : a === "pulse" || a === "hue-rotate" ? `${i} {
+	animation: ${r} ${e} ${n} infinite;
+}` : `${i} {
+	animation: ${r} ${e} ${n} infinite;
+	background-size: 220% 220%;
+}`;
+}, h = (t = {}) => {
+  const e = d(t), n = g(t);
+  return `${e}
+${n}`;
+};
+export {
+  o as getGradientAnimationOptions,
+  h as toGradientAnimationCSS,
+  d as toGradientAnimationKeyframes,
+  g as toGradientAnimationStyles,
+  $ as toGradientAnimationValue
+};

package/dist/core.cjs

@@ -0,0 +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;

package/dist/core.mjs

@@ -0,0 +1,16 @@
+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);
+export {
+  o as createGradient,
+  n as createGradientFromColor,
+  r as createGradientModel,
+  m as createGradientModelFromColor,
+  p as createRecipeStops,
+  f as defineGradientPreset,
+  g as defineGradientPresetRegistry,
+  l as getGradientPreset,
+  P as gradientPresets,
+  C as gradientRecipes
+};

package/dist/css-CaOuUhfh.js

@@ -0,0 +1,17 @@
+import { D as p, n as c, f as a, d as e, e as r, g as D } from "./utils-B_VQDGMy.js";
+const $ = (t, i = p) => `linear-gradient(${c(i)}, ${t.join(", ")})`, I = (t) => {
+  const i = t.stops.map(a).join(", ");
+  if (t.type === "radial") {
+    const s = t.shape ?? "ellipse", n = t.size ?? e, o = t.position ?? r;
+    return `radial-gradient(${s} ${n} at ${o}, ${i})`;
+  }
+  if (t.type === "conic") {
+    const s = c(t.direction), n = t.position ?? r, o = D(t.stops).map(a).join(", ");
+    return `conic-gradient(from ${s} at ${n}, ${o})`;
+  }
+  return $(t.stops.map(a), t.direction);
+};
+export {
+  $ as c,
+  I as t
+};

package/dist/css-YuAJQW13.cjs

@@ -0,0 +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;

package/dist/effects.cjs

@@ -0,0 +1,96 @@
+"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}
+  </filter>
+</svg>`},k=(t,r={})=>{const o=r.selector??".g-gradient-morph",{opacity:n}=y(r),d=v(t,r);return`${o} {
+	position: relative;
+	overflow: hidden;
+}
+
+${o}__blobs {
+	position: absolute;
+	inset: -18%;
+	opacity: ${n};
+	filter: ${C(r)};
+	mix-blend-mode: hard-light;
+}
+
+${o}__blob {
+	position: absolute;
+	transform: translate(-50%, -50%);
+	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
+	opacity: var(--g-gradient-morph-opacity);
+	filter: blur(var(--g-gradient-morph-blur));
+	border-radius: 999px;
+	background: radial-gradient(circle, var(--g-gradient-morph-blob-color) 0%, transparent 72%);
+	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}%;
+	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)};
+}`).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));
+	}
+}`},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;