@kitn.ai/ui 0.20.1 → 0.22.0

package/dist/variant-custom-D6Rtvneb.js

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

package/dist/{variant-wave-DbfNdvSi.js → variant-wave-BUQtkryq.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-AxIlqjo7.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-qs-jjvNA.js";const F=`
 const float TAU = 6.28318530718;
 
 // Noise for dithering

package/dist/variant-wave-BVYnqy9L.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-DmTUaXWE.js";
+import { C as z, w as U } from "./solid-BGYSJyHG.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-DXC6_LcH.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-COnPwAQN.js";
+import { C as y, w as b } from "./solid-Dt2nEwfl.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
+};