@kitn.ai/ui 0.28.0 → 0.29.0

package/src/components/audio-visualizer/variant-radial.tsx

@@ -1,163 +0,0 @@
-import { Index, type JSX } from 'solid-js';
-import { cn } from '../../utils/cn';
-import { normalizeVolumeBands } from '../../primitives/audio-bands';
-import { useSequencer } from '../../primitives/use-sequencer';
-import { radialSequence, radialInterval } from '../../primitives/visualizer-sequences';
-import { CONTAINER_HEIGHT, RADIAL_RADIUS, defaultRadialBarCount } from './sizes';
-import { amplitudeRenderState, type VariantProps } from './variant-bar';
-
-/**
- * Bars arranged around a circle, growing outward with the audio.
- *
- * Ported from livekit/components-js
- * `packages/shadcn/components/agents-ui/agent-audio-visualizer-radial.tsx`
- * (Apache License 2.0).
- */
-export function RadialVisualizer(
-  props: VariantProps & { barCount?: number; radius?: number },
-): JSX.Element {
-  // Floored at 1: at barCount 0, dotSize below divides by zero (Infinity),
-  // and 0 % 4 === 0 slips past the divisibility warning silently. The
-  // dispatcher only ever passes positive counts today, but the element
-  // facade exposes `bar-count` as a consumer-facing attribute next.
-  const count = () => Math.max(1, props.barCount ?? defaultRadialBarCount(props.size));
-  const radius = () => props.radius ?? RADIAL_RADIUS[props.size];
-
-  // Upstream warns when the ring cannot split into four even quadrants -- not
-  // a hard requirement (any count still renders), just a symmetry hint. This
-  // is a plain statement, not inside a `createEffect`: a Solid component body
-  // runs once per mount (unlike React, there is no re-render to guard
-  // against), so it already fires exactly once for this instance and never
-  // again, including across unrelated reactive updates to other props.
-  if (count() % 4 !== 0) {
-    console.warn(
-      `<kai-audio-visualizer variant="radial">: barCount ${count()} is not divisible by 4. ` +
-        `The ring will look asymmetric.`,
-    );
-  }
-
-  // Chord length at this radius: keeps neighbouring dots from touching however
-  // many bars are on the ring.
-  const dotSize = () => (radius() * Math.PI) / count();
-
-  // The state the rendering follows: `listeningAmplitude` folds `listening`
-  // into the speaking presentation. See amplitudeRenderState in variant-bar.
-  const renderState = () => amplitudeRenderState(props.state, props.listeningAmplitude);
-
-  // Frozen (reduced motion) parks the sequence on frame 0 rather than stopping
-  // the component: the shape still reads, it just does not move.
-  const tick = useSequencer(() => (props.frozen ? Infinity : radialInterval(renderState())));
-  const sequence = () => radialSequence(renderState(), count());
-
-  // `thinking` parks the sequencer itself (radialInterval returns Infinity)
-  // and spins the whole ring in CSS instead, so every bar reads as lit rather
-  // than following the scripted highlight groups meant for `listening`
-  // (radialSequence's `thinking` case reuses those groups for a different
-  // purpose: they interleave the ring so it still looks even while rotating,
-  // not so a subset blinks).
-  const highlighted = () =>
-    renderState() === 'thinking'
-      ? Array.from({ length: count() }, (_, i) => i)
-      : (sequence()[tick() % sequence().length] ?? []);
-
-  // Bands only mean anything while speaking (or listening under the
-  // `listeningAmplitude` opt-in, folded in by renderState). Everywhere else
-  // the sequence is the whole story, so a stale level never leaks into a
-  // scripted state (same guard as the other two variants, so the
-  // render-prop's `value` means one thing across every variant).
-  const levels = () =>
-    renderState() === 'speaking'
-      ? normalizeVolumeBands(props.bands, count())
-      : new Array(count()).fill(0);
-
-  const spinning = () => renderState() === 'thinking' && !props.frozen;
-
-  return (
-    <div
-      data-kai-state={props.state}
-      class={cn('relative flex items-center justify-center', spinning() && 'animate-spin', props.class)}
-      style={{
-        height: `${CONTAINER_HEIGHT[props.size]}px`,
-        'aspect-ratio': '1',
-        ...(spinning() ? { 'animation-duration': '5s' } : {}),
-        ...(props.color ? { color: props.color } : {}),
-      }}
-    >
-      {/*
-        <Index>, not <For>, matching the other two variants: Solid's <For>
-        keys nodes by `===` on the array VALUE, and `levels()` is an array of
-        plain numbers that changes on nearly every frame while speaking. That
-        would tear down and recreate every spoke each frame instead of
-        patching it in place, defeating the height/colour transition below
-        right at the listening -> speaking boundary. <Index> maps by POSITION
-        instead, so each spoke's DOM node is created once and its `level`
-        accessor updates in place. See the note in variant-bar.tsx.
-      */}
-      <Index each={levels()}>
-        {(level, i) => {
-          // `i` is a plain number here (stable per position under <Index>),
-          // not an accessor -- do not call it as `i()`. `highlighted`/`value`
-          // ARE live accessors: this callback runs once per position, so
-          // anything a consumer's render-prop wants to stay current must call
-          // these itself rather than close over a one-time snapshot.
-          const item = {
-            index: i,
-            highlighted: () => highlighted().includes(i),
-            value: () => level(),
-          };
-          return (
-            <div
-              data-kai-spoke
-              class="absolute top-1/2 left-1/2 h-1 w-1 -translate-x-1/2 -translate-y-1/2"
-              style={{
-                'transform-origin': 'center',
-                transform: `rotate(${(i / count()) * Math.PI * 2}rad) translateY(${radius()}px)`,
-              }}
-            >
-              {/*
-                Unlike bar/grid, the render-prop's output does NOT become the
-                positioned element itself: it renders INSIDE this wrapper's
-                rotate+translateY placement, since something has to place the
-                spoke on the ring even when the caller owns its markup. See
-                the `children` doc on VariantProps in variant-bar.tsx.
-              */}
-              {props.children?.(item) ?? (
-                // The lit state is a SECOND part TOKEN (`part(bar highlighted)`),
-                // not a `data-*` attribute selector on `::part(bar)`: a CSS
-                // attribute selector cannot follow a pseudo-element, so
-                // `::part(bar)[data-kai-highlighted="true"]` never matches
-                // anything from outside the shadow root. `data-kai-highlighted`
-                // stays on the element for the render-prop and for styling
-                // from inside the shadow root; `part` is the external seam.
-                <div
-                  part={item.highlighted() ? 'bar highlighted' : 'bar'}
-                  data-kai-index={item.index}
-                  data-kai-highlighted={item.highlighted()}
-                  class={cn(
-                    'origin-bottom rounded-full bg-current/10',
-                    'data-[kai-highlighted=true]:bg-current',
-                  )}
-                  style={{
-                    width: `${dotSize()}px`,
-                    'min-height': `${dotSize()}px`,
-                    // x10 so a mid-level band reaches a readable length; upstream's factor.
-                    height: `${dotSize() * 10 * level()}px`,
-                    // Deliberate, approved divergence from upstream: see the
-                    // matching comment in variant-bar.tsx. `150ms` for
-                    // colour is unchanged from upstream's constant; only the
-                    // new `100ms` height transition is our addition, and
-                    // `frozen` disables both together rather than leaving
-                    // colour still animating for a reduced-motion user.
-                    transition: props.frozen
-                      ? 'none'
-                      : 'height 100ms ease-linear, background-color 150ms ease-linear',
-                  }}
-                />
-              )}
-            </div>
-          );
-        }}
-      </Index>
-    </div>
-  );
-}

package/src/components/audio-visualizer/variant-wave.tsx

@@ -1,130 +0,0 @@
-import { createEffect, type JSX } from 'solid-js';
-import { ShaderCanvas, hexToRgb, DEFAULT_SHADER_COLOR } from './shader-canvas';
-import { createTween } from '../../primitives/create-tween';
-import { waveTargets } from '../../primitives/visualizer-sequences';
-import { CONTAINER_HEIGHT } from './sizes';
-import { amplitudeRenderState } from './variant-bar';
-import type { ShaderVariantProps } from './index';
-import waveShader from './wave.glsl';
-
-// Upstream defaults that aren't exposed as public props anywhere in this
-// component's contract (`ShaderVariantProps` has no `blur`/`colorShift`
-// field, and the dispatcher never forwards either) -- so they stay fixed
-// rather than becoming half-wired knobs nothing can reach.
-const BLUR = 0.5;
-const COLOR_SHIFT = 0.05;
-
-/**
- * A flowing oscilloscope line.
- *
- * Ported from livekit/components-js `agent-audio-visualizer-wave.tsx`
- * (Apache License 2.0). The shader itself (`wave.glsl.ts`) is copied
- * verbatim; this wrapper replaces upstream's React component and its
- * `motion` dependency with Solid signals and `createTween`.
- */
-export default function WaveVisualizer(props: ShaderVariantProps): JSX.Element {
-  const amplitude = createTween(0);
-  const frequency = createTween(0);
-  const opacity = createTween(1);
-
-  // The state the rendering follows: `listeningAmplitude` folds `listening`
-  // into the speaking presentation (live-volume amplitude/frequency). See
-  // amplitudeRenderState in variant-bar. `data-kai-state` keeps the real state.
-  const renderState = () => amplitudeRenderState(props.state, props.listeningAmplitude);
-  const targets = () => waveTargets(renderState());
-
-  // Reduced motion: land on the target immediately and skip every pulse.
-  const transition = () =>
-    props.frozen ? { duration: 0 } : { duration: 0.2, ease: 'easeOut' as const };
-
-  // Opacity alone: it only follows state/frozen, so a volume tick (nearly
-  // every animation frame while speaking) never restarts the pulse's tween.
-  createEffect(() => {
-    const t = targets();
-    // A pulse is an array target ([from, to], see createTween's ping-pong).
-    // Reduced motion collapses it to its first value so the line holds
-    // still instead of breathing.
-    const fade = Array.isArray(t.opacity) && props.frozen ? t.opacity[0] : t.opacity;
-    opacity.to(fade, props.frozen ? { duration: 0 } : { duration: t.pulseDuration || 0.2 });
-  });
-
-  // Amplitude and frequency share ONE effect -- a single writer -- on
-  // purpose. They used to be split like opacity above: a state effect
-  // tweening toward the base target over 0.2s, plus a separate effect
-  // applying the live-volume override instantly while speaking. Both re-run
-  // on a state flip, and Solid re-runs sibling effects in the order they sit
-  // in the signal's observer list, which REORDERS as effects re-subscribe
-  // over their lifetimes -- so whichever happened to run last won. Under a
-  // loaded main thread the base tween could land AFTER the override,
-  // parking a speaking line at the 0.025 baseline until the next volume
-  // change; with live audio that self-heals within one ~33ms tick, but
-  // static drive (a pinned `bands`/`volume` override, upstream's #1399 prop
-  // mode) never ticks again, so it stalled visibly (measured on the parity
-  // harness, 2/2 under load). This is NOT the benign two-effect shape the
-  // Task 12 review ruled acceptable elsewhere -- that ruling covered
-  // effects with DISJOINT writers; these two wrote the same tweens. One
-  // effect, one writer, ordering can no longer matter. Same effect-race
-  // class as b5795ac's shared() finding.
-  createEffect(() => {
-    if (renderState() === 'speaking') {
-      // Live volume drives amplitude and frequency instantly while
-      // speaking, so the line never lags the audio -- and lands at the
-      // override immediately on re-entry, matching upstream's same-commit
-      // effect ordering. `volume` is only tracked in this branch, so
-      // volume ticks do not re-run the state-target path below.
-      const v = props.volume;
-      amplitude.to(0.015 + 0.4 * v, { duration: 0 });
-      frequency.to(20 + 60 * v, { duration: 0 });
-      return;
-    }
-    const t = targets();
-    amplitude.to(t.amplitude, transition());
-    frequency.to(t.frequency, transition());
-  });
-
-  const lineWidth = () => (props.size === 'icon' || props.size === 'sm' ? 2 : 1);
-
-  return (
-    <div
-      data-kai-state={props.state}
-      class={props.class}
-      style={{
-        height: `${CONTAINER_HEIGHT[props.size]}px`,
-        'aspect-ratio': '1',
-        'mask-image':
-          'linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%)',
-      }}
-    >
-      <ShaderCanvas
-        fragment={waveShader}
-        // Shaders are expensive on phones; mediump halves the cost with no
-        // visible difference on a line this thin.
-        precision={props.size === 'icon' || props.size === 'sm' ? 'mediump' : 'highp'}
-        uniforms={{
-          // uSpeed drives the shader's own time-based phase animation, not a
-          // tween -- so frozen (prefers-reduced-motion) must zero it directly
-          // rather than relying on any tween's instant-landing logic. uAmplitude
-          // and uFrequency stay as their frozen-collapsed values: they shape a
-          // static wave, they do not move it, so the result is a still picture
-          // of the wave rather than a flat line.
-          uSpeed: { type: '1f', value: props.frozen ? 0 : targets().speed },
-          uAmplitude: { type: '1f', value: amplitude.value() },
-          uFrequency: { type: '1f', value: frequency.value() },
-          uMix: { type: '1f', value: opacity.value() },
-          uLineWidth: { type: '1f', value: lineWidth() },
-          uSmoothing: { type: '1f', value: BLUR },
-          uColor: { type: '3fv', value: hexToRgb(props.color ?? DEFAULT_SHADER_COLOR) },
-          uColorShift: { type: '1f', value: COLOR_SHIFT },
-        }}
-        animateWhenNotVisible={props.animateWhenNotVisible}
-        onError={(message) => {
-          console.warn('<kai-audio-visualizer variant="wave">: shader error', message);
-          // A missing WebGL context and a compile/link failure both mean
-          // this shader cannot render at all -- no branching, both fall
-          // back to the dispatcher's bar visualizer.
-          props.onUnavailable();
-        }}
-      />
-    </div>
-  );
-}

package/src/components/audio-visualizer/wave.glsl.ts

@@ -1,130 +0,0 @@
-/**
- * Oscilloscope wave fragment shader.
- *
- * Copied verbatim from livekit/components-js
- * `packages/shadcn/components/agents-ui/agent-audio-visualizer-wave.tsx`
- * (Apache License 2.0). Unmodified apart from being extracted to its own
- * module: no GLSL lines were added, removed, or reformatted. The source
- * contained no `uniform ...;` declarations to strip -- `uFrequency`,
- * `uSpeed`, `uAmplitude`, `uLineWidth`, `uSmoothing`, `uColor`,
- * `uColorShift`, and `uMix` are all bound by the caller (see uses of
- * `ShaderCanvas` below), which is what declares them.
- *
- * Uniforms are declared by ShaderCanvas. Do not declare them here.
- */
-export default `
-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);
-}`;

package/src/components/card-fallback.tsx

@@ -1,60 +0,0 @@
-// src/components/card-fallback.tsx
-// Rendered by the dispatcher when an envelope cannot be rendered: its `type` has no
-// registered card, or its `data` failed HARD validation against the built-in schema
-// for that type (see primitives/card-validate-cards.ts for what "hard" means).
-// Visual: reuses the Card chrome so it sits naturally in a card stream.
-import { Show, type JSX } from 'solid-js';
-import { Card } from './card';
-import { AlertTriangle } from 'lucide-solid';
-
-export interface CardFallbackProps {
-  /** The envelope type, shown to aid debugging. */
-  type: string;
-  /** The envelope id (for parity with cards; not displayed). */
-  cardId?: string;
-  /**
-   * Why this card could not render, when the type WAS known but the data was not
-   * usable. Carries the failing field paths verbatim, e.g.
-   * `(root).actions: fewer than minItems 1`.
-   *
-   * Absent means the older case: an unrecognized type. The two are told apart by
-   * this prop rather than by a mode flag so a caller cannot ask for the diagnostic
-   * and forget to supply the diagnosis.
-   */
-  reason?: string;
-}
-
-/** Inert, themed fallback for a card that cannot render. Emits nothing itself:
- *  the dispatcher emits the contract `error` event alongside rendering this. */
-export function CardFallback(props: CardFallbackProps): JSX.Element {
-  return (
-    <Card>
-      <Show
-        when={props.reason}
-        fallback={
-          <div data-card-fallback role="alert" class="flex items-center gap-2 p-4 text-sm text-muted-foreground">
-            <AlertTriangle class="size-4 shrink-0 text-destructive dark:text-red-400" aria-hidden="true" />
-            <span>
-              Unsupported card type: <code class="font-mono">{props.type}</code>
-            </span>
-          </div>
-        }
-      >
-        {(reason) => (
-          <div
-            data-card-fallback
-            data-card-invalid
-            role="alert"
-            class="flex items-start gap-2 p-4 text-sm text-muted-foreground"
-          >
-            <AlertTriangle class="size-4 shrink-0 translate-y-0.5 text-destructive dark:text-red-400" aria-hidden="true" />
-            <span class="min-w-0">
-              Invalid <code class="font-mono">{props.type}</code> card:{' '}
-              <code data-card-invalid-reason class="font-mono break-words">{reason()}</code>
-            </span>
-          </div>
-        )}
-      </Show>
-    </Card>
-  );
-}