@kitn.ai/ui 0.20.0 → 0.21.0

package/dist/variant-custom-DWSSgmd2.js

@@ -0,0 +1,170 @@
+import { createComponent as c, ssr as m, ssrAttribute as o, escape as u, ssrStyle as d } from "solid-js/web";
+import { createEffect as v, createMemo as g, Show as y } from "solid-js";
+import { c as b, D as x, S as $, h as S } from "./create-tween-D3Y5qiij.js";
+import { s as z, C as A } from "./solid-BdENBcEq.js";
+var h = ["<div", ' style="', '"></div>'], C = ["<div", ' style="', '">', "</div>"];
+const E = {
+  "1f": !0,
+  "1i": !0,
+  "1fv": !0,
+  "2f": !0,
+  "3f": !0,
+  "3fv": !0,
+  "4f": !0,
+  "4fv": !0,
+  Matrix2fv: !0,
+  Matrix3fv: !0,
+  Matrix4fv: !0
+}, k = /* @__PURE__ */ new Set(["1f", "1i"]), w = {
+  "2f": 2,
+  "3f": 3,
+  "4f": 4,
+  Matrix2fv: 4,
+  Matrix3fv: 9,
+  Matrix4fv: 16
+};
+function N(e, t) {
+  if (t == null || typeof t != "object")
+    return `uniform "${e}" is not a valid declaration (expected an object with "type" and "value").`;
+  if (E[t.type] !== !0)
+    return `uniform "${e}" has an unrecognized type "${String(t.type)}".`;
+  if (k.has(t.type))
+    return typeof t.value != "number" || !Number.isFinite(t.value) ? `uniform "${e}" is declared "${t.type}" (a number) but its value is not a finite number.` : void 0;
+  if (!Array.isArray(t.value) || t.value.some((n) => typeof n != "number" || !Number.isFinite(n)))
+    return `uniform "${e}" is declared "${t.type}" (an array) but its value is not an array of finite numbers.`;
+  const a = w[t.type];
+  if (a !== void 0 && t.value.length !== a)
+    return `uniform "${e}" is declared "${t.type}", which takes exactly ${a} numbers, but its value has ${t.value.length}.`;
+}
+function _(e, t) {
+  const a = e.bands.length ? e.bands : [0], n = {
+    uColor: {
+      type: "3fv",
+      value: S(e.color)
+    },
+    uIntensity: {
+      type: "1f",
+      value: e.intensity
+    },
+    uSpeed: {
+      type: "1f",
+      value: e.speed
+    },
+    uComplexity: {
+      type: "1f",
+      value: e.complexity
+    },
+    uVolume: {
+      type: "1f",
+      value: e.volume
+    },
+    uBands: {
+      type: "1fv",
+      value: a,
+      arraySize: a.length
+    }
+  };
+  if (!t) return n;
+  for (const [s, l] of Object.entries(t)) {
+    const r = N(s, l);
+    if (r) throw new Error(r);
+  }
+  return {
+    ...n,
+    ...t
+  };
+}
+function F(e) {
+  const t = b(0.3), a = b(1);
+  v(() => {
+    const r = z(e.state);
+    if (e.state === "speaking")
+      t.to(0.3 + 0.7 * e.volume, {
+        duration: 0
+      });
+    else {
+      const i = e.frozen ? {
+        duration: 0
+      } : {
+        duration: 0.5,
+        ease: "easeOut"
+      };
+      t.to(Array.isArray(r.intensity) && e.frozen ? r.intensity[0] : r.intensity, i);
+    }
+    a.to(e.frozen ? 0 : r.speed, {
+      duration: 0
+    });
+  });
+  const n = g(() => {
+    var r;
+    try {
+      return {
+        uniforms: _({
+          color: e.color ?? x,
+          intensity: t.value(),
+          speed: a.value(),
+          complexity: e.complexity ?? 0.5,
+          volume: e.volume,
+          bands: e.bands
+        }, (r = e.shader) == null ? void 0 : r.uniforms)
+      };
+    } catch (i) {
+      return {
+        error: i instanceof Error ? i.message : String(i)
+      };
+    }
+  });
+  let s = !1;
+  v(() => {
+    const {
+      error: r
+    } = n();
+    if (!r) {
+      s = !1;
+      return;
+    }
+    s || (s = !0, console.error(`<kai-audio-visualizer variant="custom">: ${r}`), e.onUnavailable());
+  });
+  const l = () => ({
+    height: `${A[e.size]}px`,
+    "aspect-ratio": "1"
+  });
+  return c(y, {
+    get when() {
+      var r;
+      return (r = e.shader) == null ? void 0 : r.fragment;
+    },
+    get fallback() {
+      return m(h, o("data-kai-state", u(e.state, !0), !1) + o("class", u(e.class, !0), !1), d(l()));
+    },
+    children: (r) => c(y, {
+      get when() {
+        return n().uniforms;
+      },
+      get fallback() {
+        return m(h, o("data-kai-state", u(e.state, !0), !1) + o("class", u(e.class, !0), !1), d(l()));
+      },
+      children: (i) => m(C, o("data-kai-state", u(e.state, !0), !1) + o("class", u(e.class, !0), !1), d(l()), u(c($, {
+        get fragment() {
+          return r();
+        },
+        get precision() {
+          return e.size === "icon" || e.size === "sm" ? "mediump" : "highp";
+        },
+        get uniforms() {
+          return i();
+        },
+        get animateWhenNotVisible() {
+          return e.animateWhenNotVisible;
+        },
+        onError: (f) => {
+          /not available/i.test(f) ? console.warn('<kai-audio-visualizer variant="custom">: shader unavailable', f) : console.error('<kai-audio-visualizer variant="custom">: shader error', f), e.onUnavailable();
+        }
+      })))
+    })
+  });
+}
+export {
+  _ as customUniforms,
+  F as default
+};

package/dist/variant-wave-C3-45cL6.js

@@ -0,0 +1,218 @@
+import { insert as m, createComponent as h, effect as p, setAttribute as x, className as g, setStyleProperty as y, template as b } from "solid-js/web";
+import { createEffect as v } from "solid-js";
+import { c as r, S as w, h as C, D as S } from "./create-tween-DGKY1FDY.js";
+import { C as z, w as U } from "./solid-BCJUQqwS.js";
+const A = `
+const float TAU = 6.28318530718;
+
+// Noise for dithering
+vec2 randFibo(vec2 p) {
+  p = fract(p * vec2(443.897, 441.423));
+  p += dot(p, p.yx + 19.19);
+  return fract((p.xx + p.yx) * p.xy);
+}
+
+// Luma for alpha
+float luma(vec3 color) {
+  return dot(color, vec3(0.299, 0.587, 0.114));
+}
+
+// RGB to HSV
+vec3 rgb2hsv(vec3 c) {
+  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+  float d = q.x - min(q.w, q.y);
+  float e = 1.0e-10;
+  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+}
+
+// HSV to RGB
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+// Bell curve function for attenuation from center with rounded top
+float bellCurve(float distanceFromCenter, float maxDistance) {
+  float normalizedDistance = distanceFromCenter / maxDistance;
+  // Use cosine with high power for smooth rounded top
+  return pow(cos(normalizedDistance * (3.14159265359 / 4.0)), 16.0);
+}
+
+// Calculate the sine wave
+float oscilloscopeWave(float x, float centerX, float time) {
+  float relativeX = x - centerX;
+  float maxDistance = centerX;
+  float distanceFromCenter = abs(relativeX);
+
+  // Apply bell curve for amplitude attenuation
+  float bell = bellCurve(distanceFromCenter, maxDistance);
+
+  // Calculate wave with uniforms and bell curve attenuation
+  float wave = sin(relativeX * uFrequency + time * uSpeed) * uAmplitude * bell;
+
+  return wave;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 pos = uv - 0.5;
+
+  // Calculate center and positions
+  float centerX = 0.5;
+  float centerY = 0.5;
+  float x = uv.x;
+  float y = uv.y;
+
+  // Convert line width from pixels to UV space
+  // Use the average of width and height to handle aspect ratio
+  float pixelSize = 2.0 / (iResolution.x + iResolution.y);
+  float lineWidthUV = uLineWidth * pixelSize;
+  float smoothingUV = uSmoothing * pixelSize;
+
+  // Find minimum distance to the wave by sampling nearby points
+  // This gives us consistent line width without high-frequency artifacts
+  const int NUM_SAMPLES = 50; // Must be const for GLSL loop
+  float minDist = 1000.0;
+  float sampleRange = 0.02; // Range to search for closest point
+
+  for(int i = 0; i < NUM_SAMPLES; i++) {
+    float offset = (float(i) / float(NUM_SAMPLES - 1) - 0.5) * sampleRange;
+    float sampleX = x + offset;
+    float waveY = centerY + oscilloscopeWave(sampleX, centerX, iTime);
+
+    // Calculate distance from current pixel to this point on the wave
+    vec2 wavePoint = vec2(sampleX, waveY);
+    vec2 currentPoint = vec2(x, y);
+    float dist = distance(currentPoint, wavePoint);
+
+    minDist = min(minDist, dist);
+  }
+
+  // Solid line with smooth edges using minimum distance
+  float line = smoothstep(lineWidthUV + smoothingUV, lineWidthUV - smoothingUV, minDist);
+
+  vec3 color = uColor;
+  if(abs(uColorShift) > 0.01) {
+    // Keep the center 50% at base color, then ramp shift across outer 25% on each side.
+    float centerBandHalfWidth = 0.2;
+    float edgeBandWidth = 0.5;
+    float distanceFromCenter = abs(x - centerX);
+    float edgeFactor = clamp((distanceFromCenter - centerBandHalfWidth) / edgeBandWidth, 0.0, 1.0);
+    vec3 hsv = rgb2hsv(color);
+    // Hue shift is zero in the center band and strongest at far edges.
+    hsv.x = fract(hsv.x + edgeFactor * uColorShift * 0.3);
+    color = hsv2rgb(hsv);
+  }
+
+  // Apply line intensity
+  color *= line;
+
+  // Add dithering for smoother gradients
+  // color += (randFibo(fragCoord).x - 0.5) / 255.0;
+
+  // Calculate alpha based on line intensity
+  float alpha = line * uMix;
+
+  fragColor = vec4(color * uMix, alpha);
+}`;
+var F = /* @__PURE__ */ b('<div style="aspect-ratio:1;mask-image:linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%)">');
+const W = 0.5, q = 0.05;
+function X(e) {
+  const o = r(0), i = r(0), l = r(1), n = () => U(e.state), c = () => e.frozen ? {
+    duration: 0
+  } : {
+    duration: 0.2,
+    ease: "easeOut"
+  };
+  v(() => {
+    const a = n(), t = Array.isArray(a.opacity) && e.frozen ? a.opacity[0] : a.opacity;
+    l.to(t, e.frozen ? {
+      duration: 0
+    } : {
+      duration: a.pulseDuration || 0.2
+    });
+  }), v(() => {
+    if (e.state === "speaking") {
+      const t = e.volume;
+      o.to(0.015 + 0.4 * t, {
+        duration: 0
+      }), i.to(20 + 60 * t, {
+        duration: 0
+      });
+      return;
+    }
+    const a = n();
+    o.to(a.amplitude, c()), i.to(a.frequency, c());
+  });
+  const d = () => e.size === "icon" || e.size === "sm" ? 2 : 1;
+  return (() => {
+    var a = F();
+    return m(a, h(w, {
+      fragment: A,
+      get precision() {
+        return e.size === "icon" || e.size === "sm" ? "mediump" : "highp";
+      },
+      get uniforms() {
+        return {
+          // uSpeed drives the shader's own time-based phase animation, not a
+          // tween -- so frozen (prefers-reduced-motion) must zero it directly
+          // rather than relying on any tween's instant-landing logic. uAmplitude
+          // and uFrequency stay as their frozen-collapsed values: they shape a
+          // static wave, they do not move it, so the result is a still picture
+          // of the wave rather than a flat line.
+          uSpeed: {
+            type: "1f",
+            value: e.frozen ? 0 : n().speed
+          },
+          uAmplitude: {
+            type: "1f",
+            value: o.value()
+          },
+          uFrequency: {
+            type: "1f",
+            value: i.value()
+          },
+          uMix: {
+            type: "1f",
+            value: l.value()
+          },
+          uLineWidth: {
+            type: "1f",
+            value: d()
+          },
+          uSmoothing: {
+            type: "1f",
+            value: W
+          },
+          uColor: {
+            type: "3fv",
+            value: C(e.color ?? S)
+          },
+          uColorShift: {
+            type: "1f",
+            value: q
+          }
+        };
+      },
+      get animateWhenNotVisible() {
+        return e.animateWhenNotVisible;
+      },
+      onError: (t) => {
+        console.warn('<kai-audio-visualizer variant="wave">: shader error', t), e.onUnavailable();
+      }
+    })), p((t) => {
+      var s = e.state, u = e.class, f = `${z[e.size]}px`;
+      return s !== t.e && x(a, "data-kai-state", t.e = s), u !== t.t && g(a, t.t = u), f !== t.a && y(a, "height", t.a = f), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), a;
+  })();
+}
+export {
+  X as default
+};

package/dist/{variant-wave-DbfNdvSi.js → variant-wave-CEODq-9q.js}

@@ -1,4 +1,4 @@
-import{i as p,s as m,c as h,a as x,C as g,t as y,w as b}from"./register-impl-DQyejdfb.js";import{d as v,j as w,b as C}from"./kai.es.js";import{c as r,h as z,S,D as U}from"./create-tween-hvpmSuwW.js";const F=`
+import{i as p,s as m,c as h,a as x,C as g,t as y,w as b}from"./register-impl-bzrZ44ft.js";import{d as v,j as w,b as C}from"./kai.es.js";import{c as r,h as z,S,D as U}from"./create-tween-paho5Rh-.js";const F=`
 const float TAU = 6.28318530718;
 
 // Noise for dithering

package/dist/variant-wave-jdXBnCUZ.js

@@ -0,0 +1,208 @@
+import { ssr as m, ssrAttribute as f, escape as o, ssrStyleProperty as l, createComponent as h } from "solid-js/web";
+import { createEffect as d } from "solid-js";
+import { c, S as p, h as x, D as g } from "./create-tween-D3Y5qiij.js";
+import { C as y, w as b } from "./solid-BdENBcEq.js";
+const w = `
+const float TAU = 6.28318530718;
+
+// Noise for dithering
+vec2 randFibo(vec2 p) {
+  p = fract(p * vec2(443.897, 441.423));
+  p += dot(p, p.yx + 19.19);
+  return fract((p.xx + p.yx) * p.xy);
+}
+
+// Luma for alpha
+float luma(vec3 color) {
+  return dot(color, vec3(0.299, 0.587, 0.114));
+}
+
+// RGB to HSV
+vec3 rgb2hsv(vec3 c) {
+  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+  float d = q.x - min(q.w, q.y);
+  float e = 1.0e-10;
+  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+}
+
+// HSV to RGB
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+// Bell curve function for attenuation from center with rounded top
+float bellCurve(float distanceFromCenter, float maxDistance) {
+  float normalizedDistance = distanceFromCenter / maxDistance;
+  // Use cosine with high power for smooth rounded top
+  return pow(cos(normalizedDistance * (3.14159265359 / 4.0)), 16.0);
+}
+
+// Calculate the sine wave
+float oscilloscopeWave(float x, float centerX, float time) {
+  float relativeX = x - centerX;
+  float maxDistance = centerX;
+  float distanceFromCenter = abs(relativeX);
+
+  // Apply bell curve for amplitude attenuation
+  float bell = bellCurve(distanceFromCenter, maxDistance);
+
+  // Calculate wave with uniforms and bell curve attenuation
+  float wave = sin(relativeX * uFrequency + time * uSpeed) * uAmplitude * bell;
+
+  return wave;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 pos = uv - 0.5;
+
+  // Calculate center and positions
+  float centerX = 0.5;
+  float centerY = 0.5;
+  float x = uv.x;
+  float y = uv.y;
+
+  // Convert line width from pixels to UV space
+  // Use the average of width and height to handle aspect ratio
+  float pixelSize = 2.0 / (iResolution.x + iResolution.y);
+  float lineWidthUV = uLineWidth * pixelSize;
+  float smoothingUV = uSmoothing * pixelSize;
+
+  // Find minimum distance to the wave by sampling nearby points
+  // This gives us consistent line width without high-frequency artifacts
+  const int NUM_SAMPLES = 50; // Must be const for GLSL loop
+  float minDist = 1000.0;
+  float sampleRange = 0.02; // Range to search for closest point
+
+  for(int i = 0; i < NUM_SAMPLES; i++) {
+    float offset = (float(i) / float(NUM_SAMPLES - 1) - 0.5) * sampleRange;
+    float sampleX = x + offset;
+    float waveY = centerY + oscilloscopeWave(sampleX, centerX, iTime);
+
+    // Calculate distance from current pixel to this point on the wave
+    vec2 wavePoint = vec2(sampleX, waveY);
+    vec2 currentPoint = vec2(x, y);
+    float dist = distance(currentPoint, wavePoint);
+
+    minDist = min(minDist, dist);
+  }
+
+  // Solid line with smooth edges using minimum distance
+  float line = smoothstep(lineWidthUV + smoothingUV, lineWidthUV - smoothingUV, minDist);
+
+  vec3 color = uColor;
+  if(abs(uColorShift) > 0.01) {
+    // Keep the center 50% at base color, then ramp shift across outer 25% on each side.
+    float centerBandHalfWidth = 0.2;
+    float edgeBandWidth = 0.5;
+    float distanceFromCenter = abs(x - centerX);
+    float edgeFactor = clamp((distanceFromCenter - centerBandHalfWidth) / edgeBandWidth, 0.0, 1.0);
+    vec3 hsv = rgb2hsv(color);
+    // Hue shift is zero in the center band and strongest at far edges.
+    hsv.x = fract(hsv.x + edgeFactor * uColorShift * 0.3);
+    color = hsv2rgb(hsv);
+  }
+
+  // Apply line intensity
+  color *= line;
+
+  // Add dithering for smoother gradients
+  // color += (randFibo(fragCoord).x - 0.5) / 255.0;
+
+  // Calculate alpha based on line intensity
+  float alpha = line * uMix;
+
+  fragColor = vec4(color * uMix, alpha);
+}`;
+var C = ["<div", ' style="', '">', "</div>"];
+const S = 0.5, z = 0.05;
+function q(e) {
+  const i = c(0), n = c(0), s = c(1), r = () => b(e.state), u = () => e.frozen ? {
+    duration: 0
+  } : {
+    duration: 0.2,
+    ease: "easeOut"
+  };
+  d(() => {
+    const t = r(), a = Array.isArray(t.opacity) && e.frozen ? t.opacity[0] : t.opacity;
+    s.to(a, e.frozen ? {
+      duration: 0
+    } : {
+      duration: t.pulseDuration || 0.2
+    });
+  }), d(() => {
+    if (e.state === "speaking") {
+      const a = e.volume;
+      i.to(0.015 + 0.4 * a, {
+        duration: 0
+      }), n.to(20 + 60 * a, {
+        duration: 0
+      });
+      return;
+    }
+    const t = r();
+    i.to(t.amplitude, u()), n.to(t.frequency, u());
+  });
+  const v = () => e.size === "icon" || e.size === "sm" ? 2 : 1;
+  return m(C, f("data-kai-state", o(e.state, !0), !1) + f("class", o(e.class, !0), !1), l("height:", `${o(y[e.size], !0)}px`) + l(";aspect-ratio:", "1") + l(";mask-image:", "linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%)"), o(h(p, {
+    fragment: w,
+    get precision() {
+      return e.size === "icon" || e.size === "sm" ? "mediump" : "highp";
+    },
+    get uniforms() {
+      return {
+        // uSpeed drives the shader's own time-based phase animation, not a
+        // tween -- so frozen (prefers-reduced-motion) must zero it directly
+        // rather than relying on any tween's instant-landing logic. uAmplitude
+        // and uFrequency stay as their frozen-collapsed values: they shape a
+        // static wave, they do not move it, so the result is a still picture
+        // of the wave rather than a flat line.
+        uSpeed: {
+          type: "1f",
+          value: e.frozen ? 0 : r().speed
+        },
+        uAmplitude: {
+          type: "1f",
+          value: i.value()
+        },
+        uFrequency: {
+          type: "1f",
+          value: n.value()
+        },
+        uMix: {
+          type: "1f",
+          value: s.value()
+        },
+        uLineWidth: {
+          type: "1f",
+          value: v()
+        },
+        uSmoothing: {
+          type: "1f",
+          value: S
+        },
+        uColor: {
+          type: "3fv",
+          value: x(e.color ?? g)
+        },
+        uColorShift: {
+          type: "1f",
+          value: z
+        }
+      };
+    },
+    get animateWhenNotVisible() {
+      return e.animateWhenNotVisible;
+    },
+    onError: (t) => {
+      console.warn('<kai-audio-visualizer variant="wave">: shader error', t), e.onUnavailable();
+    }
+  })));
+}
+export {
+  q as default
+};