@kitn.ai/ui 0.20.0 → 0.21.0

package/dist/ui/dropdown.d.ts

@@ -1,12 +1,12 @@
 import { JSX, Accessor } from 'solid-js';
-import { AsTag } from './overlay';
+import { AsTag } from './overlay.js';
 /** Imperative open controller, handed to a parent (e.g. the kai-menu facade) via
  *  `controllerRef` so it can drive/observe the Dropdown's open state. */
 export interface DropdownController {
     open: Accessor<boolean>;
     setOpen: (v: boolean) => void;
 }
-export declare function Dropdown(props: {
+export interface DropdownProps {
     children: JSX.Element;
     /** Initial open state (uncontrolled seed). */
     defaultOpen?: boolean;
@@ -14,40 +14,65 @@ export declare function Dropdown(props: {
     disabled?: boolean;
     /** Receive the open controller (open accessor + setOpen) once mounted. */
     controllerRef?: (api: DropdownController) => void;
-}): JSX.Element;
-export declare function DropdownTrigger(props: {
+}
+export interface DropdownTriggerProps {
+    /** Render as a different tag/component; defaults to a button. */
     as?: AsTag;
     children?: JSX.Element;
     class?: string;
-    [k: string]: any;
-}): JSX.Element;
-export declare function DropdownContent(props: {
+    /** Remaining attributes are spread onto the rendered trigger. */
+    [k: string]: unknown;
+}
+export interface DropdownContentProps {
     children: JSX.Element;
     class?: string;
-}): JSX.Element;
-export declare function DropdownItem(props: {
+}
+export interface DropdownItemProps {
     children: JSX.Element;
     class?: string;
     onSelect?: () => void;
     disabled?: boolean;
-}): JSX.Element;
+}
+export interface DropdownSeparatorProps {
+    class?: string;
+}
+export interface DropdownLabelProps {
+    children: JSX.Element;
+    class?: string;
+}
+export interface DropdownCheckboxItemProps extends DropdownItemProps {
+    checked?: boolean;
+}
+export interface DropdownRadioItemProps extends DropdownItemProps {
+    checked?: boolean;
+}
+export interface DropdownSubProps {
+    children: JSX.Element;
+}
+export interface DropdownSubTriggerProps {
+    children: JSX.Element;
+    class?: string;
+}
+export interface DropdownSubContentProps {
+    children: JSX.Element;
+    class?: string;
+}
+export declare function Dropdown(props: DropdownProps): JSX.Element;
+export declare function DropdownTrigger(props: DropdownTriggerProps): JSX.Element;
+export declare function DropdownContent(props: DropdownContentProps): JSX.Element;
+export declare function DropdownItem(props: DropdownItemProps): JSX.Element;
 /**
  * A thin, non-interactive divider between groups of items.
  * a11y: `role="separator"` — exposed to AT as a group boundary; not in the
  * roving-focus tab order (the `[role="menuitem"]` query skips it).
  */
-export declare function DropdownSeparator(props: {
-    class?: string;
-}): JSX.Element;
+export declare function DropdownSeparator(props: DropdownSeparatorProps): JSX.Element;
 /**
  * A non-interactive section header.
  * a11y: a plain muted label — NOT a menuitem and NOT focusable, so roving focus
  * skips it; it labels the items that follow visually only (`select-none`).
  */
-export declare function DropdownLabel(props: {
-    children: JSX.Element;
-    class?: string;
-}): JSX.Element;
+export declare function DropdownLabel(props: DropdownLabelProps): JSX.Element;
 /**
  * A togglable menu item.
  * a11y: `role="menuitemcheckbox"` + `aria-checked`. Activating fires `onSelect`
@@ -56,13 +81,7 @@ export declare function DropdownLabel(props: {
  * present — aligns with the plain items above it instead of being pushed in by a
  * reserved leading check column.
  */
-export declare function DropdownCheckboxItem(props: {
-    children: JSX.Element;
-    class?: string;
-    checked?: boolean;
-    onSelect?: () => void;
-    disabled?: boolean;
-}): JSX.Element;
+export declare function DropdownCheckboxItem(props: DropdownCheckboxItemProps): JSX.Element;
 /**
  * A single-select (radio) menu item.
  * a11y: `role="menuitemradio"` + `aria-checked`. Behaves like the checkbox item —
@@ -71,13 +90,7 @@ export declare function DropdownCheckboxItem(props: {
  * content aligns with plain items. Group membership is the consumer's concern;
  * this primitive just renders the selected state and reports the click.
  */
-export declare function DropdownRadioItem(props: {
-    children: JSX.Element;
-    class?: string;
-    checked?: boolean;
-    onSelect?: () => void;
-    disabled?: boolean;
-}): JSX.Element;
+export declare function DropdownRadioItem(props: DropdownRadioItemProps): JSX.Element;
 /**
  * A nested menu group. Mirrors the `Dropdown` context shape with its own open
  * signal + trigger/content refs, plus a small close-delay so a pointer can cross
@@ -87,9 +100,7 @@ export declare function DropdownRadioItem(props: {
  * (Escape/outside-click/select), `useDismiss` on the parent unmounts the whole
  * content tree, which tears this provider down and drops the sub with it.
  */
-export declare function DropdownSub(props: {
-    children: JSX.Element;
-}): JSX.Element;
+export declare function DropdownSub(props: DropdownSubProps): JSX.Element;
 /**
  * The item that opens a submenu.
  * a11y: `role="menuitem"` + `aria-haspopup="menu"` + `aria-expanded`, trailing
@@ -97,10 +108,7 @@ export declare function DropdownSub(props: {
  * keyboard-open also moves focus into the sub's first item. ArrowRight/Enter are
  * swallowed so the parent menu doesn't also act on them.
  */
-export declare function DropdownSubTrigger(props: {
-    children: JSX.Element;
-    class?: string;
-}): JSX.Element;
+export declare function DropdownSubTrigger(props: DropdownSubTriggerProps): JSX.Element;
 /**
  * The submenu surface — same portal/positioning/roving-focus core as
  * DropdownContent, anchored `right-start` off its trigger.
@@ -108,7 +116,4 @@ export declare function DropdownSubTrigger(props: {
  * ArrowUp/Down/Home/End rove within; typeahead included (matches DropdownContent).
  * Keyboard-open focuses the first item.
  */
-export declare function DropdownSubContent(props: {
-    children: JSX.Element;
-    class?: string;
-}): JSX.Element;
+export declare function DropdownSubContent(props: DropdownSubContentProps): JSX.Element;

package/dist/ui/pane-group.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'solid-js';
-import { PaneStatusTone } from './pane';
+import { PaneStatusTone } from './pane.js';
 /** The work state of a tab's agent/process, mapped to the kit's tool / status
  *  hues — the SAME vocabulary as {@link './pane'.PaneStatus} and the AgentCard:
  *  working = blue, idle = muted, done = green, error = red, blocked = amber. */

package/dist/variant-aurora-1wMcXRUS.js

@@ -0,0 +1,381 @@
+import { ssr as b, ssrAttribute as h, escape as l, ssrStyleProperty as d, createComponent as w } from "solid-js/web";
+import { createEffect as u, createSignal as R, onCleanup as A } from "solid-js";
+import { c, S, h as _, D as k } from "./create-tween-D3Y5qiij.js";
+import { C } from "./solid-BdENBcEq.js";
+const T = `
+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 M = ["<div", ' style="', '">', "</div>"];
+function p(e) {
+  switch (e) {
+    case "listening":
+      return {
+        intensity: [1.5, 2],
+        speed: 1,
+        complexity: 0.7,
+        amplitude: 1,
+        scale: 0.3,
+        rotation: 5.3
+      };
+    case "thinking":
+      return {
+        intensity: [0.5, 2.5],
+        speed: 1.5,
+        complexity: 1,
+        amplitude: 0.5,
+        scale: 0.3,
+        rotation: 9.4
+      };
+    case "connecting":
+      return {
+        intensity: [0.5, 2.5],
+        speed: 1.5,
+        complexity: 1,
+        amplitude: 0.5,
+        scale: 0.3,
+        // Clockwise like every other transitional state -- see the doc note
+        // above for the 2026-08-10 direction-unify rationale.
+        rotation: 5.5
+      };
+    case "speaking":
+      return {
+        intensity: 1.5,
+        speed: 3.5,
+        complexity: 1.25,
+        amplitude: 0.75,
+        scale: 0.3,
+        rotation: -3.5
+      };
+    // Dead-connection look: mirrors idle's resting targets for now. A
+    // dedicated arm so the pending LiveKit measurement (their aura may dim
+    // differently at disconnected) can adjust it in one line.
+    case "disconnected":
+      return {
+        intensity: 1,
+        speed: 0.5,
+        complexity: 0.4,
+        amplitude: 1.2,
+        scale: 0.2,
+        rotation: 0
+      };
+    case "idle":
+    default:
+      return {
+        intensity: 1,
+        speed: 0.5,
+        complexity: 0.4,
+        amplitude: 1.2,
+        scale: 0.2,
+        rotation: 0
+      };
+  }
+}
+function W() {
+  var s;
+  const [e, r] = R(!1);
+  if (typeof matchMedia == "function") {
+    const a = matchMedia("(prefers-color-scheme: dark)");
+    r(a.matches);
+    const o = (i) => r(i.matches);
+    (s = a.addEventListener) == null || s.call(a, "change", o), A(() => {
+      var i;
+      return (i = a.removeEventListener) == null ? void 0 : i.call(a, "change", o);
+    });
+  }
+  return e;
+}
+function I(e) {
+  const r = c(1), s = c(0.5), a = c(0.4), o = c(1.2), i = c(0.2), f = W(), m = () => e.dark ?? f();
+  u(() => {
+    const t = p(e.state), n = e.frozen ? {
+      duration: 0
+    } : {
+      duration: 0.5,
+      ease: "easeOut"
+    }, x = e.frozen ? {
+      duration: 0
+    } : {
+      duration: 0.35,
+      ease: "easeOut"
+    }, y = Array.isArray(t.intensity) && e.frozen ? t.intensity[0] : t.intensity;
+    r.to(y, Array.isArray(t.intensity) ? x : n), a.to(t.complexity, n), o.to(t.amplitude, n), i.to(t.scale, e.state === "listening" && !e.frozen ? {
+      type: "spring",
+      duration: 1,
+      bounce: 0.35
+    } : n), s.to(e.frozen ? 0 : t.speed, {
+      duration: 0
+    });
+  }), u(() => {
+    if (e.state !== "speaking") return;
+    const t = e.volume;
+    t > 0 && (i.animating() || i.to(0.2 + 0.2 * t));
+  });
+  const v = () => e.frozen ? 0 : p(e.state).rotation * Math.PI / 180, g = () => m() ? 0 : 1;
+  return b(M, h("data-kai-state", l(e.state, !0), !1) + h("class", l(e.class, !0), !1), d("height:", `${l(C[e.size], !0)}px`) + d(";aspect-ratio:", "1"), l(w(S, {
+    fragment: T,
+    get precision() {
+      return e.size === "icon" || e.size === "sm" ? "mediump" : "highp";
+    },
+    get uniforms() {
+      return {
+        uColor: {
+          type: "3fv",
+          value: _(e.color ?? k)
+        },
+        uIntensity: {
+          type: "1f",
+          value: r.value()
+        },
+        uSpeed: {
+          type: "1f",
+          value: s.value()
+        },
+        uComplexity: {
+          type: "1f",
+          value: a.value()
+        },
+        uAmplitude: {
+          type: "1f",
+          value: o.value()
+        },
+        uScale: {
+          type: "1f",
+          value: i.value()
+        },
+        uTheme: {
+          type: "1f",
+          value: g()
+        },
+        uRotation: {
+          type: "1f",
+          value: v()
+        }
+      };
+    },
+    get animateWhenNotVisible() {
+      return e.animateWhenNotVisible;
+    },
+    onError: (t) => {
+      /not available/i.test(t) ? console.warn('<kai-audio-visualizer variant="aurora">: shader unavailable', t) : console.error('<kai-audio-visualizer variant="aurora">: shader error', t), e.onUnavailable();
+    }
+  })));
+}
+export {
+  p as auroraTargets,
+  I as default
+};