@kitn.ai/ui 0.19.0 → 0.20.0

package/dist/test-utils/fake-clock.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Shared fake `requestAnimationFrame` + `performance.now()` clock for tests
+ * that need to drive time deterministically instead of racing real timers.
+ *
+ * requestAnimationFrame's timestamp and performance.now() share a time origin
+ * per spec, so production code can read either. Stubbing them off the same
+ * fake `now` keeps the two from silently disagreeing.
+ *
+ * The stub holds a REAL per-registration queue, matching a real browser: a
+ * single frame fires every callback that was pending BEFORE that frame, all
+ * with the SAME advanced `now`, in registration order -- so two
+ * independently-animating things under test (e.g. a `createTween`'s own step
+ * loop and `ShaderCanvas`'s separate `draw` loop, both requestAnimationFrame
+ * consumers, both mounted at once) tick together on one `advance()` call
+ * instead of the second silently stealing the first's slot.
+ *
+ * This used to be a single PENDING-callback slot, not a queue: a second
+ * consumer scheduling a new frame before `advance()` ran overwrote the
+ * first rather than queueing behind it. That was fine for anything that only
+ * ever has ONE thing pending at a time (the common case, e.g. bar/grid/radial's
+ * single sequencer tick, or a lone `createTween`), which is why switching to a
+ * queue does not change any of those. It was NOT fine for a mounted shader
+ * variant, where a tween and ShaderCanvas's `draw` are both independently
+ * pending at once: `draw` always registers last and re-arms itself every
+ * `advance()`, so it permanently "won" the single slot and the tween's step
+ * never fired -- silently defeating any test trying to prove something holds
+ * while UNIFORM VALUES genuinely change every frame (see
+ * `variant-custom.test.tsx`'s recompile-guard test for the concrete case this
+ * was fixed for).
+ *
+ * `cancelAnimationFrame` cancels by id now (each `requestAnimationFrame` call
+ * gets its own), not by clearing whatever happens to be in the single slot --
+ * required once more than one callback can be pending at a time, so a
+ * `cancelAnimationFrame(idA)` cannot accidentally drop a DIFFERENT pending
+ * callback `idB`.
+ *
+ * Call once per `describe` block (or at file scope for the whole file); it
+ * registers `beforeEach`/`afterEach` hooks scoped to wherever it is called,
+ * exactly like inlining the hooks would, and returns the driver bound to
+ * that scope's fake clock.
+ */
+export declare function installFakeClock(): {
+    advance: (ms: number) => void;
+    isFramePending: () => boolean;
+};

package/dist/variant-aurora-DVtGqVH6.js

@@ -0,0 +1,218 @@
+import{i as x,s as y,c as b,a as w,C as R,t as A}from"./register-impl-DQyejdfb.js";import{d as u,j as S,b as _,f as k,o as M}from"./kai.es.js";import{c as n,h as T,S as W,D as C}from"./create-tween-hvpmSuwW.js";const q=`
+const float PI = 3.14159265359;
+// Strand phase span: 0.5 + pi (fact sheet section 2's "sigma", the
+// midpoint of the interval [1, 2*pi] with the interpolation knob fixed
+// at 0.5).
+const float STRAND_SIGMA = 0.5 + PI;
+const int STRAND_COUNT = 36;
+
+// 4-octave directional-sine warp cascade. M0 and the per-octave rotation B
+// (cos 0.6, sin 0.8, an exact ~53.13 degree rotation) are fact sheet
+// section 2's stated matrices; M1/M2/M3 = B composed with the previous
+// octave's matrix, and each v_k is the first row of M_k. Hand-derived and
+// checked against the fact sheet's own listed v_0..v_3 below, not copied
+// from any source.
+const mat2 WARP_M0 = mat2(0.6, 0.25, -0.25, 0.9);
+const mat2 WARP_M1 = mat2(0.16, 0.63, -0.87, 0.34);
+const mat2 WARP_M2 = mat2(-0.408, 0.506, -0.794, -0.492);
+const mat2 WARP_M3 = mat2(-0.6496, -0.0228, -0.0828, -0.9304);
+const vec2 WARP_V0 = vec2(0.600, -0.250);
+const vec2 WARP_V1 = vec2(0.160, -0.870);
+const vec2 WARP_V2 = vec2(-0.408, -0.794);
+const vec2 WARP_V3 = vec2(-0.650, -0.083);
+
+// Displaces p through all 4 octaves. Octave k's phase carries k*tau, so
+// octave 0 is static in time and octave 3 moves fastest -- fine
+// corrugation slides across coarse folds, which reads as flowing wind
+// (fact sheet section 2, "Mechanism of the fold / wind").
+vec2 auroraWarp(vec2 p, float phi, float tau, float freq, float amp) {
+  vec2 x = p;
+  float f = freq;
+  float a = amp;
+
+  vec2 q = WARP_M0 * x;
+  vec2 w = sin(f * q + vec2(phi));
+  x += (a / f) * WARP_V0 * w;
+  f *= 1.4;
+  a *= 1.0 + 0.1 * (max(w.x, w.y) - 1.0);
+
+  q = WARP_M1 * x;
+  w = sin(f * q + vec2(tau + phi));
+  x += (a / f) * WARP_V1 * w;
+  f *= 1.4;
+  a *= 1.0 + 0.1 * (max(w.x, w.y) - 1.0);
+
+  q = WARP_M2 * x;
+  w = sin(f * q + vec2(2.0 * tau + phi));
+  x += (a / f) * WARP_V2 * w;
+  f *= 1.4;
+  a *= 1.0 + 0.1 * (max(w.x, w.y) - 1.0);
+
+  q = WARP_M3 * x;
+  w = sin(f * q + vec2(3.0 * tau + phi));
+  x += (a / f) * WARP_V3 * w;
+
+  return x;
+}
+
+vec3 auroraRgb2Hsv(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);
+  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + 1.0e-10)), d / (q.x + 1.0e-10), q.x);
+}
+
+vec3 auroraHsv2Rgb(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);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  // Fact sheet section 2: u in [0,1]^2, centered point p = u - 0.5, no
+  // aspect correction -- the element is forced square by CSS, so this is
+  // only correct on a square canvas (true for every audio-visualizer size).
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 p = uv - 0.5;
+
+  // Solid-body rotation of the sampling frame (module doc, departure 1).
+  // gl_FragCoord's y-up frame is mirrored against the screen's y-down one,
+  // so the sign here is what makes positive uRotation read CLOCKWISE on
+  // screen -- verified empirically against the audit's estimator (which
+  // measures +10 for uRotation = +10 deg/s with the wind frozen).
+  float rotA = -uRotation * iTime;
+  float rc = cos(rotA);
+  float rs = sin(rotA);
+  p = mat2(rc, -rs, rs, rc) * p;
+
+  // Negative tau: time-reversing the octave phases flips the wind's
+  // emergent angular drift from counter-clockwise (measured on the original)
+  // to the reference's clockwise, without touching any static property --
+  // lobes, radii, spectra are distribution-identical (module doc,
+  // departure 1).
+  float tau = -iTime * uSpeed;
+  float freq = max(2.0 + 13.0 * uComplexity, 1.0);
+  float amp = uAmplitude;
+  float ringRadius = uScale;
+
+  vec3 hsv = auroraRgb2Hsv(uColor);
+  // Chain-seed strand, phase -1/36 NOT scaled by STRAND_SIGMA (fact sheet
+  // section 2), so inter-strand spacing is defined for strand 1 too.
+  vec2 prevStrand = auroraWarp(p, -1.0 / float(STRAND_COUNT), tau, freq, amp);
+
+  vec3 accum = vec3(0.0);
+  for (int j = 1; j <= STRAND_COUNT; j++) {
+    float frac = float(j) / float(STRAND_COUNT);
+    float phi = frac * STRAND_SIGMA;
+    vec2 strand = auroraWarp(p, phi, tau, freq, amp);
+
+    // Signed distance to the (warped) ring, per strand: negative inside,
+    // positive outside -- the sign feeds the asymmetric edge width below.
+    float sd = length(strand) - ringRadius;
+    float dist = abs(sd);
+    // Inter-strand spacing through the chain: an analytic blur exactly
+    // proportional to how far this strand's warp has drifted from its
+    // neighbour's. Fanned regions (large spacing) fuse into soft veils;
+    // bunched regions (small spacing) stay crisp -- this is what turns 36
+    // discrete rings into an aurora (fact sheet section 2). The 2.3 growth
+    // rate (fact sheet's own is 2.0) and the 0.66x outer-side factor are
+    // the parity edge calibration: the reference holds a 10-90% rise of
+    // ~6-10px(2x) with the OUTER edge always the sharper of the two
+    // (module doc, departure 4).
+    float spacing = length(strand - prevStrand);
+    float edgeWidth = 0.01 + max(exp(2.3 * spacing) - 1.0, 0.001);
+    edgeWidth *= mix(1.0, 0.66, step(0.0, sd));
+    float coverage = 1.0 - smoothstep(0.0, 1.0, dist / edgeWidth);
+
+    // Fixed hue drift across the strand fan, matching the fact sheet's
+    // documented colorShift default (0.05 turns at weight 0.3, i.e. 0.015
+    // turns end to end); earliest strand shifts most.
+    vec3 strandColor = auroraHsv2Rgb(vec3(fract(hsv.x + (1.0 - frac) * 0.015), hsv.y, hsv.z));
+    accum += coverage * strandColor;
+    prevStrand = strand;
+  }
+
+  // Mean soft coverage across all 36 strands (fact sheet section 2's image
+  // accumulator I). The inverse-distance glow accumulator G is omitted: the
+  // fact sheet states its gain ships as 0, so it contributes nothing.
+  vec3 image = accum / float(STRAND_COUNT);
+
+  // Deterministic per-pixel dither, +/- 1/510, identical on all channels
+  // (fact sheet section 3). Kept as a plain vec3 offset, not pre-mixed into
+  // the image accumulator, so each branch can add it at the point the fact
+  // sheet actually specifies (see the dark branch below).
+  float n = fract(sin(dot(fragCoord, vec2(12.9898, 78.233))) * 43758.5453);
+  vec3 dither = vec3((n - 0.5) / 255.0);
+
+  float brightness = uIntensity;
+  vec3 rgb;
+  float alpha;
+
+  if (uTheme < 0.5) {
+    // Dark pipeline, parity-calibrated (module doc, departures 2 + 3).
+    // RGB1 = 1.2 * I, THEN add dither (fact sheet order: pre-gain first so
+    // the dither's written amplitude stays +/- 1/510), then floor at 0 --
+    // a negative dither on a near-black pixel would otherwise be blown up
+    // by the chroma-preserving rescale's division right below.
+    vec3 x1 = max(1.2 * image + dither, 0.0);
+
+    // Chroma-preserving tonemap: knee the MAX channel (11x/(1+11x) -- a
+    // steeper knee than the fact sheet's per-channel 4x/(1+4x)) and rescale
+    // the vector, so ribbon cores land on a stable brightness level largely
+    // independent of how thin the veils have fanned (the audit measured the
+    // per-channel map crushing spread-out states to ~half the reference's
+    // rendered brightness) while hue and saturation pass through untouched
+    // for the HSV shape-up to own.
+    float mxc = max(x1.r, max(x1.g, x1.b));
+    float tmMax = 11.0 * mxc / (1.0 + 11.0 * mxc);
+    vec3 tm = x1 * (tmMax / max(mxc, 1.0e-5));
+
+    // Rendered-colour calibration: hue +0.013 turns (audit target
+    // ~197.5deg for the default accent), saturation proportional to the
+    // caller's own (a desaturated accent stays desaturated) but rising
+    // with the pixel's value and capped at 0.98 -- Rob's reference:
+    // saturation RISES with brightness, and nothing is ever white.
+    vec3 hv = auroraRgb2Hsv(tm);
+    hv.x = fract(hv.x + 0.013);
+    hv.y = min(hv.y * (1.02 + 0.35 * hv.z), 0.98);
+    tm = auroraHsv2Rgb(hv);
+
+    // Brightness compression (departure 3): uIntensity DRIVES 0.5..2.5 at
+    // the thinking/connecting pulse but must RENDER inside roughly
+    // 0.5..0.65 mean brightness, never dropping the ring below visibility.
+    // Two compressive powers (colour flatter than alpha) plus a smoothstep
+    // alpha knee that lifts ribbon cores to full opacity while cutting the
+    // dim tails -- which is also what keeps the centre transparent and the
+    // edges crisp. max(brightness, 0.05) only guards pow() against a
+    // (contractually impossible) zero or negative uniform.
+    float bVal = pow(max(brightness, 0.05) / 1.5, 0.07);
+    float bAlpha = 0.97 * pow(max(brightness, 0.05) / 1.5, 0.09);
+    float luma = dot(tm, vec3(0.299, 0.587, 0.114));
+    // Clamped to [0,1] before the premultiply below, mirroring the light
+    // branch, so rgb * alpha <= alpha stays enforced for every input.
+    rgb = clamp(tm * bVal, 0.0, 1.0);
+    alpha = clamp(smoothstep(0.0, 0.50, luma) * bAlpha, 0.0, 1.0);
+  } else {
+    // Light pipeline (fact sheet section 4): RGB1 = I, then add dither;
+    // brightness curve on vector length, hue direction kept, saturation
+    // extrapolated 3x about gray.
+    vec3 x1 = image + dither;
+    float mag = length(x1);
+    vec3 dir = x1 / max(mag, 1.0e-5);
+    float mag2 = 2.0 * mag / (1.0 + 2.0 * mag);
+    vec3 x2 = dir * mag2;
+    float gray = dot(x2, vec3(0.2, 0.5, 0.1));
+    rgb = clamp(vec3(gray) + 3.0 * (x2 - vec3(gray)), 0.0, 1.0);
+    alpha = clamp(mag2 * clamp(brightness, 1.0, 2.0), 0.0, 1.0);
+  }
+
+  // PREMULTIPLIED output. Both branches above clamp their natural rgb to
+  // [0,1] before this line, which is what makes rgb * alpha <= alpha
+  // (componentwise) a property the code enforces unconditionally, not one
+  // that happens to hold for the inputs this was tested against. See the
+  // module doc above for why this departs from the fact sheet's own
+  // (deliberately non-premultiplied) pipeline.
+  fragColor = vec4(rgb * alpha, alpha);
+}
+`;var z=A("<div style=aspect-ratio:1>");function d(e){switch(e){case"listening":return{intensity:[1.5,2],speed:1,complexity:.7,amplitude:1,scale:.3,rotation:5.3};case"thinking":return{intensity:[.5,2.5],speed:1.5,complexity:1,amplitude:.5,scale:.3,rotation:9.4};case"connecting":return{intensity:[.5,2.5],speed:1.5,complexity:1,amplitude:.5,scale:.3,rotation:5.5};case"speaking":return{intensity:1.5,speed:3.5,complexity:1.25,amplitude:.75,scale:.3,rotation:-3.5};case"disconnected":return{intensity:1,speed:.5,complexity:.4,amplitude:1.2,scale:.2,rotation:0};default:return{intensity:1,speed:.5,complexity:.4,amplitude:1.2,scale:.2,rotation:0}}}function P(){var e;const[c,s]=k(!1);if(typeof matchMedia=="function"){const i=matchMedia("(prefers-color-scheme: dark)");s(i.matches);const o=r=>s(r.matches);(e=i.addEventListener)==null||e.call(i,"change",o),M(()=>{var r;return(r=i.removeEventListener)==null?void 0:r.call(i,"change",o)})}return c}function N(e){const c=n(1),s=n(.5),i=n(.4),o=n(1.2),r=n(.2),f=P(),m=()=>e.dark??f();u(()=>{const t=d(e.state),a=e.frozen?{duration:0}:{duration:.5,ease:"easeOut"},l=e.frozen?{duration:0}:{duration:.35,ease:"easeOut"},h=Array.isArray(t.intensity)&&e.frozen?t.intensity[0]:t.intensity;c.to(h,Array.isArray(t.intensity)?l:a),i.to(t.complexity,a),o.to(t.amplitude,a),r.to(t.scale,e.state==="listening"&&!e.frozen?{type:"spring",duration:1,bounce:.35}:a),s.to(e.frozen?0:t.speed,{duration:0})}),u(()=>{if(e.state!=="speaking")return;const t=e.volume;t>0&&(r.animating()||r.to(.2+.2*t))});const v=()=>e.frozen?0:d(e.state).rotation*Math.PI/180,g=()=>m()?0:1;return(()=>{var t=z();return x(t,S(W,{fragment:q,get precision(){return e.size==="icon"||e.size==="sm"?"mediump":"highp"},get uniforms(){return{uColor:{type:"3fv",value:T(e.color??C)},uIntensity:{type:"1f",value:c.value()},uSpeed:{type:"1f",value:s.value()},uComplexity:{type:"1f",value:i.value()},uAmplitude:{type:"1f",value:o.value()},uScale:{type:"1f",value:r.value()},uTheme:{type:"1f",value:g()},uRotation:{type:"1f",value:v()}}},get animateWhenNotVisible(){return e.animateWhenNotVisible},onError:a=>{/not available/i.test(a)?console.warn('<kai-audio-visualizer variant="aurora">: shader unavailable',a):console.error('<kai-audio-visualizer variant="aurora">: shader error',a),e.onUnavailable()}})),_(a=>{var l=e.state,h=e.class,p=`${R[e.size]}px`;return l!==a.e&&y(t,"data-kai-state",a.e=l),h!==a.t&&b(t,a.t=h),p!==a.a&&w(t,"height",a.a=p),a},{e:void 0,t:void 0,a:void 0}),t})()}export{d as auroraTargets,N as default};

package/dist/variant-custom-Dif-IV4u.js

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

package/dist/variant-wave-DbfNdvSi.js

@@ -0,0 +1,116 @@
+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=`
+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 W=y('<div style="aspect-ratio:1;mask-image:linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%)">');const q=.5,A=.05;function D(e){const o=r(0),i=r(0),s=r(1),n=()=>b(e.state),l=()=>e.frozen?{duration:0}:{duration:.2,ease:"easeOut"};v(()=>{const a=n(),t=Array.isArray(a.opacity)&&e.frozen?a.opacity[0]:a.opacity;s.to(t,e.frozen?{duration:0}:{duration:a.pulseDuration||.2})}),v(()=>{if(e.state==="speaking"){const t=e.volume;o.to(.015+.4*t,{duration:0}),i.to(20+60*t,{duration:0});return}const a=n();o.to(a.amplitude,l()),i.to(a.frequency,l())});const d=()=>e.size==="icon"||e.size==="sm"?2:1;return(()=>{var a=W();return p(a,w(S,{fragment:F,get precision(){return e.size==="icon"||e.size==="sm"?"mediump":"highp"},get uniforms(){return{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:s.value()},uLineWidth:{type:"1f",value:d()},uSmoothing:{type:"1f",value:q},uColor:{type:"3fv",value:z(e.color??U)},uColorShift:{type:"1f",value:A}}},get animateWhenNotVisible(){return e.animateWhenNotVisible},onError:t=>{console.warn('<kai-audio-visualizer variant="wave">: shader error',t),e.onUnavailable()}})),C(t=>{var c=e.state,u=e.class,f=`${g[e.size]}px`;return c!==t.e&&m(a,"data-kai-state",t.e=c),u!==t.t&&h(a,t.t=u),f!==t.a&&x(a,"height",t.a=f),t},{e:void 0,t:void 0,a:void 0}),a})()}export{D as default};

package/frameworks/react/index.tsx

@@ -114,6 +114,48 @@ export const Attachments = /*#__PURE__*/ createWebComponent<AttachmentsProps>(
   () => import('@kitn.ai/ui/elements/attachments'),
 );
 
+export interface AudioVisualizerProps extends WebComponentProps {
+  /** Look to render: `bar` (default), `grid`, `radial`, `wave`, `aurora`, `custom`. `aura` is accepted as a LiveKit-markup alias for `aurora`. Attribute: `variant`. */
+  variant?: string;
+  /** `idle` (default), `connecting`, `listening`, `thinking`, `speaking`, `disconnected` (connection down: the dead, flat look). LiveKit's room-lifecycle state names are accepted as aliases. Attribute: `state`. */
+  state?: string;
+  /** `icon` | `sm` | `md` (default) | `lg` | `xl`. Attribute: `size`. */
+  size?: string;
+  /** Bars to draw. Bar and radial only. Attribute: `bar-count`. */
+  barCount?: number;
+  /** Grid only: rows and columns of the (always square) grid. Attribute: `count`. */
+  count?: number;
+  /** Radial only: ring distance from center, in px. Attribute: `radius`. */
+  radius?: number;
+  /** Grid only: ring distance for the connecting animation, in cells. Attribute: `spread`. */
+  spread?: number;
+  /** Grid only: ms between scripted frames. Attribute: `interval`. */
+  interval?: number;
+  /** CSS color for the geometry, overriding the inherited `currentColor`. Attribute: `color`. */
+  color?: string;
+  /** Shader variants only: pattern density, 0..1. Attribute: `complexity`. */
+  complexity?: number;
+  /** Setting this makes the element an announced image (`role="img"`) instead of decorative (`aria-hidden`). Attribute: `label`. */
+  label?: string;
+  /** Live microphone or WebRTC audio to analyze. JS property only. */
+  stream?: MediaStream;
+  /** An `<audio>` or `<video>` element to tap for its audio. JS property only. */
+  audioElement?: HTMLMediaElement;
+  /** Pre-computed levels, 0..1. Set this and no AudioContext is ever built, which is what keeps headless/SSR rendering and browser-speech-synthesis playback (which exposes no audio node) free of Web Audio entirely. JS property only. A new array reference is required for each update; mutating the existing array in place will not re-render. */
+  bands?: number[];
+  /** Custom fragment shader for `variant="custom"`. JS property only. */
+  shader?: { fragment: string; uniforms?: Record<string, { type: "1f" | "1i" | "1fv" | "2f" | "3f" | "3fv" | "4f" | "4fv" | "Matrix2fv" | "Matrix3fv" | "Matrix4fv"; value: number | number[] }> };
+  /** Shader variants only: keep animating while scrolled off screen. Off by default, which stops drawing and releases the WebGL context until the element comes back (browsers ration contexts to roughly 16 a page). Does not override `prefers-reduced-motion`. Attribute: `animate-when-not-visible`. */
+  animateWhenNotVisible?: boolean;
+}
+
+export const AudioVisualizer = /*#__PURE__*/ createWebComponent<AudioVisualizerProps>(
+  'kai-audio-visualizer',
+  ["theme","variant","state","size","barCount","count","radius","spread","interval","color","complexity","label","stream","audioElement","bands","shader","animateWhenNotVisible"],
+  {  },
+  () => import('@kitn.ai/ui/elements/audio-visualizer'),
+);
+
 export interface AvatarProps extends WebComponentProps {
   /** Image URL/data-URI. When absent, the `fallback` initials show instead. */
   src?: string;

package/llms-full.txt

@@ -3,7 +3,7 @@
 
 # @kitn.ai/ui
 
-> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 79 custom elements, every one prefixed `kai-` (e.g. `<kai-chat>`, `<kai-artifact>`): streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 80 custom elements, every one prefixed `kai-` (e.g. `<kai-chat>`, `<kai-artifact>`): streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
 
 ## Install
 
@@ -37,7 +37,7 @@ Drop an element into any framework (React, Vue, plain HTML). Data in via JS prop
 - `<kai-prompt-input>` — standalone composer with send button.
 
 **Layer 2 — composable primitives** (`import { … } from '@kitn.ai/ui'`):
-All 79 elements are also exported individually. Use them for custom layouts or features `<kai-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
+All 80 elements are also exported individually. Use them for custom layouts or features `<kai-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
 
 ## Key rules for the web components
 
@@ -99,7 +99,7 @@ For Tailwind builds: `@import "@kitn.ai/ui/theme.css"` in your CSS.
 
 ## Docs
 
-- Full element reference (all 79 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
+- Full element reference (all 80 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
 - Machine-readable Custom Elements Manifest: https://unpkg.com/@kitn.ai/ui/dist/custom-elements.json
 - Working examples: https://github.com/kitn-ai/ui/tree/main/examples
 - Storybook: https://storybook.kitn.dev
@@ -173,7 +173,7 @@ The same rule applies to every array/object property (`models`, `context`, `sugg
 
 ---
 
-## Element reference (79 elements, generated from custom-elements.json)
+## Element reference (80 elements, generated from custom-elements.json)
 
 Every element also accepts the `theme` attribute. Array/object properties are marked with a `—` attribute: they must be set as JS properties.
 
@@ -267,6 +267,42 @@ Every element also accepts the `theme` attribute. Array/object properties are ma
 
 ---
 
+### `kai-audio-visualizer` / `AudioVisualizer`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `variant` | `variant` | `undefined \| string` | Look to render: `bar` (default), `grid`, `radial`, `wave`, `aurora`, `custom`. `aura` is accepted as a LiveKit-markup alias for `aurora`. Attribute: `variant`. |
+| `state` | `state` | `undefined \| string` | `idle` (default), `connecting`, `listening`, `thinking`, `speaking`, `disconnected` (connection down: the dead, flat look). LiveKit's room-lifecycle state names are accepted as aliases. Attribute: `state`. |
+| `size` | `size` | `undefined \| string` | `icon` \| `sm` \| `md` (default) \| `lg` \| `xl`. Attribute: `size`. |
+| `barCount` | `bar-count` | `undefined \| number` | Bars to draw. Bar and radial only. Attribute: `bar-count`. |
+| `count` | `count` | `undefined \| number` | Grid only: rows and columns of the (always square) grid. Attribute: `count`. |
+| `radius` | `radius` | `undefined \| number` | Radial only: ring distance from center, in px. Attribute: `radius`. |
+| `spread` | `spread` | `undefined \| number` | Grid only: ring distance for the connecting animation, in cells. Attribute: `spread`. |
+| `interval` | `interval` | `undefined \| number` | Grid only: ms between scripted frames. Attribute: `interval`. |
+| `color` | `color` | `undefined \| string` | CSS color for the geometry, overriding the inherited `currentColor`. Attribute: `color`. |
+| `complexity` | `complexity` | `undefined \| number` | Shader variants only: pattern density, 0..1. Attribute: `complexity`. |
+| `label` | `label` | `undefined \| string` | Setting this makes the element an announced image (`role="img"`) instead of decorative (`aria-hidden`). Attribute: `label`. |
+| `stream` | — | `undefined \| MediaStream` | Live microphone or WebRTC audio to analyze. JS property only. |
+| `audioElement` | — | `undefined \| HTMLMediaElement` | An `<audio>` or `<video>` element to tap for its audio. JS property only. |
+| `bands` | — | `undefined \| number[]` | Pre-computed levels, 0..1. Set this and no AudioContext is ever built, which is what keeps headless/SSR rendering and browser-speech-synthesis playback (which exposes no audio node) free of Web Audio entirely. JS property only. A new array reference is required for each update; mutating the existing array in place will not re-render. |
+| `shader` | — | `undefined \| { fragment: string; uniforms?: undefined \| Record<string, { type: "1f" \| "1i" \| "1fv" \| "2f" \| "3f" \| "3fv" \| "4f" \| "4fv" \| "Matrix2fv" \| "Matrix3fv" \| "Matrix4fv"; value: number \| number[] }> }` | Custom fragment shader for `variant="custom"`. JS property only. |
+| `animateWhenNotVisible` | `animate-when-not-visible` | `undefined \| false \| true` | Shader variants only: keep animating while scrolled off screen. Off by default, which stops drawing and releases the WebGL context until the element comes back (browsers ration contexts to roughly 16 a page). Does not override `prefers-reduced-motion`. Attribute: `animate-when-not-visible`. |
+
+_No events._
+
+**Styleable parts** (restyle from outside via `kai-audio-visualizer::part(name)`):
+
+| Part | Description |
+|---|---|
+| `::part(bar)` | A single bar in the `bar` variant, or a single spoke in the `radial` variant. Also carries `data-kai-index` and `data-kai-highlighted` ("true"/"false") for use inside the shadow root; to style the lit state from OUTSIDE, combine with the `highlighted` part below rather than an attribute selector. — `kai-audio-visualizer::part(bar) { border-radius: 2px } kai-audio-visualizer::part(bar highlighted) { background: var(--brand) }` |
+| `::part(cell)` | A single dot in the `grid` variant. Also carries `data-kai-index` and `data-kai-highlighted` ("true"/"false") for use inside the shadow root; to style the lit state from OUTSIDE, combine with the `highlighted` part below rather than an attribute selector. — `kai-audio-visualizer::part(cell) { border-radius: 9999px } kai-audio-visualizer::part(cell highlighted) { background: var(--brand) }` |
+| `::part(highlighted)` | A second part TOKEN present on a `bar` or `cell` exactly when the sequencer or live audio has it lit, not a standalone styleable element. Combine it in the same `::part()` argument: `::part(bar highlighted)` or `::part(cell highlighted)`. This is the external equivalent of the internal `data-kai-highlighted="true"` attribute, which a `::part()` selector cannot reach (an attribute selector cannot follow a pseudo-element). — `kai-audio-visualizer::part(bar highlighted) { background: var(--brand) } kai-audio-visualizer::part(cell highlighted) { background: var(--brand) }` |
+| `::part(canvas)` | The WebGL canvas backing the `wave` and `aurora` variants. Restyle its size or radius, or layer a mask/filter, from outside. — `kai-audio-visualizer::part(canvas) { border-radius: 0.75rem }` |
+
+---
+
 ### `kai-avatar` / `Avatar`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):

package/llms.txt

@@ -1,7 +1,7 @@
 <!-- AUTO-GENERATED by scripts/gen-llms.mjs — do not edit by hand. Run `npm run build`. -->
 # @kitn.ai/ui
 
-> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 79 custom elements, every one prefixed `kai-` (e.g. `<kai-chat>`, `<kai-artifact>`): streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 80 custom elements, every one prefixed `kai-` (e.g. `<kai-chat>`, `<kai-artifact>`): streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
 
 ## Install
 
@@ -35,7 +35,7 @@ Drop an element into any framework (React, Vue, plain HTML). Data in via JS prop
 - `<kai-prompt-input>` — standalone composer with send button.
 
 **Layer 2 — composable primitives** (`import { … } from '@kitn.ai/ui'`):
-All 79 elements are also exported individually. Use them for custom layouts or features `<kai-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
+All 80 elements are also exported individually. Use them for custom layouts or features `<kai-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
 
 ## Key rules for the web components
 
@@ -97,7 +97,7 @@ For Tailwind builds: `@import "@kitn.ai/ui/theme.css"` in your CSS.
 
 ## Docs
 
-- Full element reference (all 79 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
+- Full element reference (all 80 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
 - Machine-readable Custom Elements Manifest: https://unpkg.com/@kitn.ai/ui/dist/custom-elements.json
 - Working examples: https://github.com/kitn-ai/ui/tree/main/examples
 - Storybook: https://storybook.kitn.dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitn.ai/ui",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "nx": {
     "name": "ui",
     "targets": {
@@ -30,6 +30,7 @@
   "sideEffects": [
     "**/*.css",
     "./dist/kai.es.js",
+    "./dist/register-impl-*.js",
     "./dist/elements/*.js"
   ],
   "description": "Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.",
@@ -117,17 +118,19 @@
     "frameworks",
     "theme.css",
     "llms.txt",
-    "llms-full.txt"
+    "llms-full.txt",
+    "NOTICE"
   ],
   "scripts": {
     "prepublishOnly": "npm run build",
     "prebuild": "npm run build:css",
-    "build": "vite build --config vite.config.ts && vite build --config vite.config.provider.ts && vite build --config vite.config.react.ts && vite build --config vite.config.barrel.ts && vite build --config vite.config.state.ts && vite build --config vite.config.mcp.ts && npm run build:elements && node scripts/verify-elements-bundle.mjs && node scripts/verify-react-wrappers.mjs",
+    "build": "vite build --config vite.config.ts && vite build --config vite.config.provider.ts && vite build --config vite.config.react.ts && vite build --config vite.config.barrel.ts && vite build --config vite.config.state.ts && vite build --config vite.config.mcp.ts && npm run build:elements && node scripts/verify-elements-bundle.mjs && node scripts/verify-react-wrappers.mjs && node scripts/verify-shader-lazy.mjs",
     "build:elements": "node scripts/gen-elements-manifest.mjs && vite build --config vite.config.elements.ts && node scripts/gen-element-dts.mjs",
     "postbuild": "npm run build:theme && npm run build:api && npm run build:schemas",
     "build:theme": "node scripts/build-theme-tokens.mjs",
     "build:api": "node scripts/gen-element-api.mjs",
     "build:schemas": "node scripts/copy-card-schemas.mjs",
+    "verify:consumer": "node scripts/verify-consumer-sideeffects.mjs",
     "test": "vitest run",
     "test:react": "vitest run --config vitest.react.config.ts",
     "test:storybook": "vitest run --project=storybook",