@kitn.ai/ui 0.18.2 → 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/ui/resizable.d.ts

@@ -52,7 +52,13 @@ export interface ResizablePanelProps extends JSX.HTMLAttributes<HTMLDivElement>
 }
 declare function ResizablePanel(props: ResizablePanelProps): JSX.Element;
 export interface ResizableHandleProps extends JSX.HTMLAttributes<HTMLDivElement> {
-    withHandle?: boolean;
+    /**
+     * Divider affordance drawn inside the 8px grab zone:
+     * - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag.
+     * - `grip` — a dotted grip handle.
+     * - `none` — no visible divider (invisible hit-area only).
+     */
+    handle?: 'line' | 'grip' | 'none';
     onPanelResize?: (delta: number) => void;
     /** Keyboard nudge step in pixels (default 16). Home/End jump to min/max. */
     keyboardStep?: number;
@@ -67,8 +73,8 @@ export interface ResizableProps {
     orientation?: Orientation;
     /** Fired on drag-end / keyboard resize / visibility change with the current panel sizes (percent). */
     onChange?: (sizes: number[]) => void;
-    /** Show a visible grip on each interactive handle. */
-    withHandle?: boolean;
+    /** Divider affordance on each interactive handle: `line` (default), `grip`, or `none`. */
+    handle?: 'line' | 'grip' | 'none';
     class?: string;
     /** Which panel index is maximized (null = none). Hides the others. */
     maximizedIndex?: number | null;

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

@@ -11,6 +11,7 @@ import { createWebComponent, registerAll, type WebComponentProps } from './runti
 export { registerAll };
 export { useKaiChat } from './use-kai-chat';
 export type { UseKaiChatOptions, KaiChatController, ChatMessage } from './use-kai-chat';
+export { useVoiceInput } from './use-voice-input';
 
 
 export interface AgentCardProps extends WebComponentProps {
@@ -113,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;
@@ -1250,6 +1293,8 @@ export interface ResizableProps extends WebComponentProps {
   orientation?: "vertical" | "horizontal";
   /** Which item index is maximized (null = none). Declarative source of truth. */
   maximizedIndex?: null | number;
+  /** Divider affordance drawn inside each draggable handle's 8px grab zone: - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag. - `grip` — a dotted grip handle. - `none` — no visible divider, just the invisible hit-area. The full grab zone and keyboard/ARIA behavior are identical for all three. */
+  handle?: "none" | "line" | "grip";
   /** Fired on drag-end / keyboard resize / visibility change. `detail.sizes` = panel sizes in percent. */
   onChange?: (event: CustomEvent<{ sizes: number[] }>) => void;
   /** Observe layout maximize state. */
@@ -1258,7 +1303,7 @@ export interface ResizableProps extends WebComponentProps {
 
 export const Resizable = /*#__PURE__*/ createWebComponent<ResizableProps>(
   'kai-resizable',
-  ["theme","orientation","maximizedIndex"],
+  ["theme","orientation","maximizedIndex","handle"],
   { onChange: 'kai-change', onMaximizeChange: 'kai-maximize-change' },
   () => import('@kitn.ai/ui/elements/resizable'),
 );
@@ -1693,6 +1738,34 @@ export const ThinkingBar = /*#__PURE__*/ createWebComponent<ThinkingBarProps>(
   () => import('@kitn.ai/ui/elements/thinking-bar'),
 );
 
+export interface ThreadProps extends WebComponentProps {
+  /** The full message thread to render, newest last. Each entry carries its role, content, and optional reasoning/tools/attachments/actions/avatar. Set as a JS property (`el.messages = [...]`); a NEW array reference per streaming chunk re-renders (mutating in place does not). */
+  messages?: { id: string; role: "user" | "assistant"; content: string; reasoning?: { text: string; label?: string }; tools?: { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: Record<string, unknown>; output?: Record<string, unknown>; toolCallId?: string; errorText?: string }[]; attachments?: { id: string; type: "file" | "source-document"; filename?: string; mediaType?: string; url?: string; title?: string }[]; actions?: ("copy" | "like" | "dislike" | "regenerate" | "edit" | { id: string; label: string; icon?: string; tooltip?: string })[]; avatar?: { src?: string; fallback?: string; alt?: string }; feedback?: "like" | "dislike" }[];
+  /** Show a typing indicator on the pending assistant turn — set while awaiting the assistant's reply. */
+  loading?: boolean;
+  /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`). Defaults to `'sm'`. */
+  proseSize?: "sm" | "lg" | "xs" | "base";
+  /** Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`). */
+  codeTheme?: string;
+  /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true. */
+  codeHighlight?: boolean;
+  /** Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`). */
+  actionsReveal?: "always" | "hover";
+  /** Show the scroll-to-bottom button inside the scroll area. Default true. */
+  scrollButton?: boolean;
+  /** Extra classes applied to the thread's inner root. */
+  class?: string;
+  /** A message's action button was clicked. `action` is the built-in name (`copy` / `like` / `dislike` / `regenerate` / `edit`) or a custom id. `state` is present only for the toggleable feedback votes: `'on'` when a like/dislike is set, `'off'` when re-tapped to clear. */
+  onMessageAction?: (event: CustomEvent<{ messageId: string; action: string; state?: undefined | "on" | "off" }>) => void;
+}
+
+export const Thread = /*#__PURE__*/ createWebComponent<ThreadProps>(
+  'kai-thread',
+  ["theme","messages","loading","proseSize","codeTheme","codeHighlight","actionsReveal","scrollButton","class"],
+  { onMessageAction: 'kai-message-action' },
+  () => import('@kitn.ai/ui/elements/thread'),
+);
+
 export interface ToastRegionProps extends WebComponentProps {
   /** The toasts to render. Newest is shown on top. Set as a JS property (array); pass a new array reference to update. */
   toasts: { id: string; message: string; variant?: undefined | "error" | "info" | "success" | "warning" | "neutral"; appearance?: undefined | "pill" | "card"; inverse?: undefined | boolean; description?: undefined | string; action?: undefined | { label: string; onAction: () => void | false }; duration?: undefined | number; dismissible?: undefined | boolean; target?: undefined | HTMLElement }[];

package/frameworks/react/use-voice-input.tsx

@@ -0,0 +1,59 @@
+import { useCallback, useRef } from 'react';
+
+/** Minimal shape of a Web Speech recognition result event — enough to read the
+ *  first transcript. The full SpeechRecognition API isn't in TS's lib.dom yet. */
+interface SpeechResultEvent {
+  results: ArrayLike<ArrayLike<{ transcript: string }>>;
+}
+interface SpeechRecognitionLike {
+  lang: string;
+  interimResults: boolean;
+  onresult: ((event: SpeechResultEvent) => void) | null;
+  start(): void;
+}
+type SpeechRecognitionCtor = new () => SpeechRecognitionLike;
+
+/** Resolve the Chromium (`webkitSpeechRecognition`) or standard constructor, if any. */
+function getSpeechRecognition(): SpeechRecognitionCtor | undefined {
+  if (typeof window === 'undefined') return undefined;
+  const w = window as unknown as {
+    SpeechRecognition?: SpeechRecognitionCtor;
+    webkitSpeechRecognition?: SpeechRecognitionCtor;
+  };
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition;
+}
+
+/**
+ * Web Speech mic → one-shot transcript. Chromium-only (`webkitSpeechRecognition`);
+ * `supported` is false elsewhere so the caller can degrade gracefully. This hook is
+ * deliberately ONLY about speech recognition: it hands the raw transcript to
+ * `onTranscript` and lets the caller decide what to do with it (e.g. a composer mic
+ * button appends it to the live text). No composer or DOM knowledge.
+ *
+ * @param onTranscript called with the final recognized transcript.
+ * @returns `supported` (Chromium-only availability) and a referentially stable,
+ *   one-shot `start` (a no-op when unsupported).
+ */
+export function useVoiceInput(onTranscript: (transcript: string) => void): {
+  supported: boolean;
+  start: () => void;
+} {
+  // Latest-callback ref: keeps `start` stable while always calling the current
+  // `onTranscript` (no stale closure, no re-created handler each render).
+  const cbRef = useRef(onTranscript);
+  cbRef.current = onTranscript;
+
+  const supported = getSpeechRecognition() !== undefined;
+
+  const start = useCallback(() => {
+    const Recognition = getSpeechRecognition();
+    if (!Recognition) return;
+    const rec = new Recognition();
+    rec.lang = 'en-US';
+    rec.interimResults = false;
+    rec.onresult = (event) => cbRef.current(event.results[0][0].transcript);
+    rec.start();
+  }, []);
+
+  return { supported, start };
+}