@pathscale/ui 0.0.41 → 0.0.42

package/dist/index.js

@@ -7493,7 +7493,7 @@ const steps_Steps = Object.assign(Steps, {
     Step: Step
 });
 const steps = steps_Steps;
-var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="absolute inset-0 z-0"></div><div class="relative z-10 h-full w-full">'), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
+var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><svg class="absolute inset-0 w-full h-full z-0"viewBox="0 0 700 700"xmlns=http://www.w3.org/2000/svg><defs><linearGradient gradientTransform="rotate(63, 0.5, 0.5)"x1=50% y1=0% x2=50% y2=100%><stop stop-opacity=1 offset=0%></stop><stop stop-opacity=1 offset=100%></stop></linearGradient><filter x=-20% y=-20% width=140% height=140% filterUnits=objectBoundingBox primitiveUnits=userSpaceOnUse color-interpolation-filters=sRGB><feTurbulence type=fractalNoise numOctaves=2 seed=10 stitchTiles=stitch result=turbulence></feTurbulence><feGaussianBlur in=turbulence result=blur></feGaussianBlur><feBlend in=SourceGraphic in2=blur result=blend></feBlend></filter></defs><rect width=700 height=700></rect></svg><div class="relative z-10 h-full w-full">'), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
 function parseHSL(hslString) {
     const match = hslString.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
     if (!match) return null;
@@ -7509,10 +7509,19 @@ function interpolateHue(h1, h2, t) {
     else h2 += 360;
     return (h1 + (h2 - h1) * t + 360) % 360;
 }
+let instanceCounter = 0;
+function generateStableId() {
+    return `svg-bg-${++instanceCounter}-${Date.now()}`;
+}
 function SvgBackground(props) {
     const { colorStart = 'hsl(129, 100%, 72%)', colorEnd = 'hsl(227, 100%, 50%)', opacity = 1, blurIntensity = 36, turbulenceFrequency = 0.007, animated = false, animationSpeed = 1, class: className = '', style = {}, children, darkness = 0 } = props;
     const [animationTime, setAnimationTime] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(0);
     let animationFrame = null;
+    let gradientStop1Ref;
+    let gradientStop2Ref;
+    let turbulenceRef;
+    const gradientId = `gradient-${generateStableId()}`;
+    const filterId = `filter-${generateStableId()}`;
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
         if (animated) {
             const animate = ()=>{
@@ -7525,15 +7534,9 @@ function SvgBackground(props) {
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
         if (animationFrame) cancelAnimationFrame(animationFrame);
     });
-    const gradientId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>`svg-bg-gradient-${Math.random().toString(36).substr(2, 9)}`, void 0, {
-        equals: false
-    });
-    const filterId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>`svg-bg-filter-${Math.random().toString(36).substr(2, 9)}`, void 0, {
-        equals: false
-    });
     const startHSL = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>parseHSL(colorStart));
     const endHSL = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>parseHSL(colorEnd));
-    const animatedValues = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+    const animatedColors = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
         if (!animated) return {
             color1: colorStart,
             color2: colorEnd,
@@ -7579,7 +7582,6 @@ function SvgBackground(props) {
         }
         const turbFreq1 = turbulenceFrequency + 0.01 * turbulenceFrequency * turbMix1;
         const turbFreq2 = 0.4 * turbulenceFrequency + 0.01 * turbulenceFrequency * turbMix2;
-        if (Math.floor(10 * time) % 50 === 0) console.log(`Time: ${time.toFixed(2)}, Mix1: ${colorMix.toFixed(3)}, Mix2: ${colorMix2.toFixed(3)}, Combined: ${combinedWave.toFixed(3)}, C1: ${color1}, C2: ${color2}`);
         return {
             color1,
             color2,
@@ -7587,53 +7589,52 @@ function SvgBackground(props) {
             turbFreq2
         };
     });
-    const staticSvg = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
-        const values = animatedValues();
-        const svg = `
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700" width="700" height="700">
-        <defs>
-          <linearGradient gradientTransform="rotate(63, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="${gradientId()}">
-            <stop stop-color="${values.color1}" stop-opacity="1" offset="0%"></stop>
-            <stop stop-color="${values.color2}" stop-opacity="1" offset="100%"></stop>
-          </linearGradient>
-          <filter id="${filterId()}" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feTurbulence type="fractalNoise" baseFrequency="${values.turbFreq1} ${values.turbFreq2}" numOctaves="2" seed="10" stitchTiles="stitch" result="turbulence"></feTurbulence>
-            <feGaussianBlur stdDeviation="${blurIntensity} ${blurIntensity}" in="turbulence" edgeMode="duplicate" result="blur"></feGaussianBlur>
-            <feBlend mode="color-dodge" in="SourceGraphic" in2="blur" result="blend"></feBlend>
-          </filter>
-        </defs>
-        <rect width="700" height="700" fill="url(#${gradientId()})" filter="url(#${filterId()})"></rect>
-      </svg>
-    `;
-        return `data:image/svg+xml;base64,${btoa(svg)}`;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const colors = animatedColors();
+        if (gradientStop1Ref) gradientStop1Ref.setAttribute('stop-color', colors.color1);
+        if (gradientStop2Ref) gradientStop2Ref.setAttribute('stop-color', colors.color2);
+        if (turbulenceRef) turbulenceRef.setAttribute('baseFrequency', `${colors.turbFreq1} ${colors.turbFreq2}`);
     });
     const backgroundStyle = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
             position: 'relative',
-            ...style,
-            '--svg-bg': `url("${staticSvg()}")`
+            ...style
         }));
     return (()=>{
-        var _el$ = SvgBackground_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        var _el$ = SvgBackground_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$3.nextSibling, _el$10 = _el$2.nextSibling;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, `relative ${className}`);
-        _el$2.style.setProperty("background-image", "var(--svg-bg)");
-        _el$2.style.setProperty("background-size", "cover");
-        _el$2.style.setProperty("background-position", "center");
-        _el$2.style.setProperty("background-repeat", "no-repeat");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "id", gradientId);
+        var _ref$ = gradientStop1Ref;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$5) : gradientStop1Ref = _el$5;
+        var _ref$2 = gradientStop2Ref;
+        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$6) : gradientStop2Ref = _el$6;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$7, "id", filterId);
+        var _ref$3 = turbulenceRef;
+        "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$8) : turbulenceRef = _el$8;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$9, "stdDeviation", `${blurIntensity} ${blurIntensity}`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "mode", "color-dodge");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "fill", `url(#${gradientId})`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "filter", `url(#${filterId})`);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, darkness > 0 && (()=>{
-            var _el$4 = SvgBackground_tmpl$2();
-            _el$4.style.setProperty("background-color", `rgba(0, 0, 0, ${darkness})`);
-            _el$4.style.setProperty("pointer-events", "none");
-            return _el$4;
-        })(), _el$3);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, children);
+            var _el$11 = SvgBackground_tmpl$2();
+            _el$11.style.setProperty("background-color", `rgba(0, 0, 0, ${darkness})`);
+            _el$11.style.setProperty("pointer-events", "none");
+            return _el$11;
+        })(), _el$10);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, children);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = backgroundStyle(), _v$2 = opacity.toString();
+            var _v$ = backgroundStyle(), _v$2 = opacity.toString(), _v$3 = animatedColors().color1, _v$4 = animatedColors().color2, _v$5 = `${animatedColors().turbFreq1} ${animatedColors().turbFreq2}`;
             _p$.e = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$, _p$.e);
             _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$2.style.setProperty("opacity", _v$2) : _el$2.style.removeProperty("opacity"));
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "stop-color", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "stop-color", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$8, "baseFrequency", _p$.i = _v$5);
             return _p$;
         }, {
             e: void 0,
-            t: void 0
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0
         });
         return _el$;
     })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "author": "pathscale",
   "repository": {
     "type": "git",