@kitn.ai/ui 0.27.0 → 0.29.0

package/src/primitives/chat-config.tsx

@@ -1,103 +0,0 @@
-import { createContext, useContext, type Accessor, type JSX } from 'solid-js';
-
-export type ProseSize = 'xs' | 'sm' | 'base' | 'lg';
-
-export interface ChatConfigValue {
-  /** Prose/text size for messages, markdown, and UI elements */
-  proseSize: Accessor<ProseSize>;
-  /** Shiki theme for code blocks */
-  codeTheme: Accessor<string>;
-  /** Node the kit's overlays portal into; undefined → document.body */
-  portalMount: Accessor<HTMLElement | undefined>;
-  /** Whether code blocks are syntax-highlighted; false → plain text, no Shiki loaded */
-  codeHighlight: Accessor<boolean>;
-}
-
-const defaultConfig: ChatConfigValue = {
-  proseSize: () => 'sm' as ProseSize,
-  codeTheme: () => 'github-dark-dimmed',
-  portalMount: () => undefined,
-  codeHighlight: () => true,
-};
-
-const ChatConfigContext = createContext<ChatConfigValue>(defaultConfig);
-
-export interface ChatConfigProps {
-  proseSize?: ProseSize;
-  codeTheme?: string;
-  portalMount?: HTMLElement;
-  codeHighlight?: boolean;
-  children: JSX.Element;
-}
-
-/**
- * Provides chat-wide appearance settings to all child components.
- * Set once at the top level — MessageContent, Markdown, CodeBlock,
- * ConversationList, and PromptInput all read from this.
- */
-export function ChatConfig(props: ChatConfigProps) {
-  const value: ChatConfigValue = {
-    proseSize: () => props.proseSize ?? 'sm',
-    codeTheme: () => props.codeTheme ?? 'github-dark-dimmed',
-    portalMount: () => props.portalMount,
-    codeHighlight: () => props.codeHighlight ?? true,
-  };
-
-  return (
-    <ChatConfigContext.Provider value={value}>
-      {props.children}
-    </ChatConfigContext.Provider>
-  );
-}
-
-/** Read the current chat config. Returns defaults if no provider is present. */
-export function useChatConfig(): ChatConfigValue {
-  return useContext(ChatConfigContext)!;
-}
-
-/**
- * Maps prose size to the Tailwind Typography *size modifier* for consumers who
- * render their own `prose` block.
- *
- * The `prose-*` names are deliberately NOT re-pointed at the --kai-text-* scale.
- * They are not font sizes: each is a plugin-generated bundle of proportional
- * margins, list indents, heading ratios and line-heights for every nested
- * element, keyed to hardcoded rems, and they only do anything alongside `prose`
- * itself. There is no `prose-body` to alias them to, and collapsing them to a
- * bare font-size would throw away the vertical rhythm that is their whole job.
- * The kit's own markdown does not go through them at all — it renders through
- * `.chat-markdown` (theme.css), which is em-relative and therefore already
- * scales off whatever `textClass` sets.
- *
- * The one raw font-size here (`xs`) DOES join the semantic scale, so it stays in
- * step with `textClass('xs')`.
- */
-export function proseClass(size: ProseSize): string {
-  switch (size) {
-    case 'xs': return 'prose-sm text-meta';
-    case 'sm': return 'prose-sm';
-    case 'base': return '';
-    case 'lg': return 'prose-lg';
-  }
-}
-
-/**
- * Maps prose size to a text class for message content, markdown, and non-prose
- * chrome (sidebar, input).
- *
- * These are the kit's SEMANTIC type-scale utilities, not Tailwind's raw scale:
- * each resolves through a namespaced --kai-text-* token in theme.css, so a
- * consumer setting `--kai-text-body` moves the reading text. The public
- * `proseSize` strings ('xs' | 'sm' | 'base' | 'lg') are unchanged — this is an
- * internal re-point only. Sizes are byte-identical to the Tailwind classes they
- * replace (text-meta ≡ text-xs, text-body ≡ text-sm, text-title ≡ text-base),
- * so nothing moves until a token is actually overridden.
- */
-export function textClass(size: ProseSize): string {
-  switch (size) {
-    case 'xs': return 'text-meta';
-    case 'sm': return 'text-body';
-    case 'base': return 'text-title';
-    case 'lg': return 'text-lg';
-  }
-}

package/src/primitives/composer-model.ts

@@ -1,49 +0,0 @@
-export interface EntityRef {
-  kind: string;
-  id: string;
-  label: string;
-  icon?: string;
-  promptText?: string;
-  data?: Record<string, unknown>;
-}
-export type Segment =
-  | { type: 'text'; text: string }
-  | { type: 'entity'; entity: EntityRef };
-export type ComposerDoc = Segment[];
-
-export function normalizeValue(value: string | ComposerDoc | null | undefined): ComposerDoc {
-  if (value == null) return [];
-  if (typeof value === 'string') return value.length ? [{ type: 'text', text: value }] : [];
-  const out: ComposerDoc = [];
-  for (const seg of value) {
-    if (seg.type === 'text') {
-      if (!seg.text) continue;
-      const last = out[out.length - 1];
-      // Replace (don't mutate) the prior segment so every object in the returned
-      // doc is freshly built and never an aliased/held reference.
-      if (last && last.type === 'text') out[out.length - 1] = { type: 'text', text: last.text + seg.text };
-      else out.push({ type: 'text', text: seg.text });
-    } else {
-      out.push({ type: 'entity', entity: seg.entity });
-    }
-  }
-  return out;
-}
-
-export function serializeToText(
-  doc: ComposerDoc,
-  opts?: { entity?: (e: EntityRef) => string },
-): string {
-  let out = '';
-  for (const seg of doc) {
-    if (seg.type === 'text') out += seg.text;
-    else out += opts?.entity ? opts.entity(seg.entity) : (seg.entity.promptText ?? seg.entity.label);
-  }
-  return out;
-}
-export function entitiesOf(doc: ComposerDoc): EntityRef[] {
-  return doc.filter((s): s is Extract<Segment, { type: 'entity' }> => s.type === 'entity').map((s) => s.entity);
-}
-export function docIsEmpty(doc: ComposerDoc): boolean {
-  return doc.every((s) => s.type === 'text' && s.text.length === 0);
-}

package/src/primitives/composer-triggers.ts

@@ -1,35 +0,0 @@
-export interface ActiveTrigger { char: string; query: string; start: number; }
-
-export function detectTrigger(text: string, caret: number, chars: string[]): ActiveTrigger | null {
-  // Caret is a position within `text` (0..text.length). Out-of-range = no trigger.
-  if (caret < 0 || caret > text.length) return null;
-  for (let i = caret - 1; i >= 0; i--) {
-    const c = text[i];
-    if (/\s/.test(c)) return null; // hit whitespace before any trigger char
-    if (chars.includes(c)) {
-      const boundaryOk = i === 0 || /\s/.test(text[i - 1]);
-      if (!boundaryOk) return null;
-      return { char: c, query: text.slice(i + 1, caret), start: i };
-    }
-  }
-  return null;
-}
-
-/**
- * Wraps detectTrigger with a list of trigger definitions.
- * Returns { def, query, start } when a trigger is active, else null.
- * Accepts generic defs so it does not import from composer.tsx (no cycle).
- */
-export function activeTriggerFor<T extends { char: string; kind: string }>(
-  text: string,
-  caret: number,
-  defs: T[],
-): { def: T; query: string; start: number } | null {
-  if (!defs.length) return null;
-  const chars = defs.map((d) => d.char);
-  const hit = detectTrigger(text, caret, chars);
-  if (!hit) return null;
-  const def = defs.find((d) => d.char === hit.char);
-  if (!def) return null;
-  return { def, query: hit.query, start: hit.start };
-}

package/src/primitives/controllable.ts

@@ -1,21 +0,0 @@
-import { createSignal, type Accessor } from 'solid-js';
-
-/**
- * The controlled/uncontrolled state pattern, as a reusable signal.
- *
- * `controlled` is an accessor for the controlling prop: when it returns a value,
- * that value wins (controlled mode); when it returns `undefined`, the component
- * manages its own state seeded from `initial` (uncontrolled mode). The returned
- * setter always writes the internal value — harmless (masked) while controlled,
- * authoritative while uncontrolled — so a single call site works in both modes.
- *
- * Mirrors `props.value ?? internal()` used elsewhere in the kit, without effects.
- */
-export function createControllableSignal(
-  controlled: Accessor<boolean | undefined>,
-  initial: boolean,
-): [Accessor<boolean>, (value: boolean) => void] {
-  const [internal, setInternal] = createSignal(initial);
-  const value: Accessor<boolean> = () => controlled() ?? internal();
-  return [value, (v: boolean) => setInternal(v)];
-}

package/src/primitives/create-kai-chat.ts

@@ -1,66 +0,0 @@
-// src/primitives/create-kai-chat.ts
-import { createSignal } from 'solid-js';
-import type { ChatMessage } from '../elements/chat-types';
-import type { AttachmentData } from '../components/attachments';
-import {
-  appendMessage, updateMessage, removeMessage, addSuggestion, removeSuggestion,
-  createAssistantStream, onStreamSettled, type AssistantStream, type SetMessages,
-} from '../state';
-
-export interface CreateKaiChatOptions {
-  /** Seed messages, read once at creation and copied. Later changes are ignored — drive updates through the returned ops. */
-  initialMessages?: ChatMessage[];
-  /** Seed suggestions, read once at creation and copied. Later changes are ignored. */
-  initialSuggestions?: string[];
-  onSubmit?: (detail: { value: string; attachments: AttachmentData[] }) => void | Promise<void>;
-}
-
-/** Solid store: consumer-owned chat state + the same ergonomic ops as `useKaiChat`. */
-export interface KaiChatStore {
-  messages: () => ChatMessage[];
-  setMessages: SetMessages;
-  suggestions: () => string[];
-  loading: () => boolean;
-  append: (msg: ChatMessage) => void;
-  update: (id: string, patch: Partial<ChatMessage> | ((m: ChatMessage) => ChatMessage)) => void;
-  remove: (id: string) => void;
-  addSuggestion: (s: string) => void;
-  removeSuggestion: (s: string) => void;
-  clearSuggestions: () => void;
-  streamAssistant: (init?: Partial<ChatMessage>) => AssistantStream;
-  handleSubmit: (event: CustomEvent<{ value: string; attachments: AttachmentData[] }>) => void;
-  /** Spread onto `<kai-chat {...chat.bind} />` (reactive getters). Wire submit via `on:kai-submit={chat.handleSubmit}`. */
-  bind: { readonly messages: ChatMessage[]; readonly loading: boolean; readonly suggestions: string[] };
-}
-
-export function createKaiChat(options: CreateKaiChatOptions = {}): KaiChatStore {
-  // Copy the seed arrays so a caller mutating the array it passed in can't reach our state.
-  const [messages, setMessagesSignal] = createSignal<ChatMessage[]>([...(options.initialMessages ?? [])]);
-  const [suggestions, setSuggestions] = createSignal<string[]>([...(options.initialSuggestions ?? [])]);
-  const [loading, setLoading] = createSignal(false);
-
-  const setMessages: SetMessages = (updater) => setMessagesSignal((prev) => updater(prev));
-
-  return {
-    messages,
-    setMessages,
-    suggestions,
-    loading,
-    append: (msg) => setMessages((prev) => appendMessage(prev, msg)),
-    update: (id, patch) => setMessages((prev) => updateMessage(prev, id, patch)),
-    remove: (id) => setMessages((prev) => removeMessage(prev, id)),
-    addSuggestion: (s) => setSuggestions((prev) => addSuggestion(prev, s)),
-    removeSuggestion: (s) => setSuggestions((prev) => removeSuggestion(prev, s)),
-    clearSuggestions: () => setSuggestions([]),
-    streamAssistant: (init) => {
-      setLoading(true);
-      return onStreamSettled(createAssistantStream(setMessages, init), () => setLoading(false));
-    },
-    handleSubmit: (event) => { void options.onSubmit?.(event.detail); },
-    bind: {
-      get messages() { return messages(); },
-      get loading() { return loading(); },
-      get suggestions() { return suggestions(); },
-    },
-  };
-}

package/src/primitives/create-tween.ts

@@ -1,266 +0,0 @@
-import { createSignal, onCleanup, untrack, type Accessor } from 'solid-js';
-
-export type Transition =
-  | { duration: number; ease?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' }
-  | { type: 'spring'; duration: number; bounce: number };
-
-/**
- * Builds an easing function from a CSS-style cubic bezier. The curve's
- * endpoints are fixed at (0, 0) and (1, 1); (x1, y1) and (x2, y2) are the
- * two control points. Given a progress value `t` used as the curve's `x`,
- * solves `X(s) === t` for the curve parameter `s` via Newton-Raphson (a
- * handful of iterations converges for these curves), falls back to
- * bisection if the derivative gets too small or a step would leave
- * [0, 1], then returns `Y(s)`.
- */
-function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number {
-  const x = (s: number) => 3 * (1 - s) * (1 - s) * s * x1 + 3 * (1 - s) * s * s * x2 + s * s * s;
-  const y = (s: number) => 3 * (1 - s) * (1 - s) * s * y1 + 3 * (1 - s) * s * s * y2 + s * s * s;
-  const xDerivative = (s: number) =>
-    3 * (1 - s) * (1 - s) * x1 + 6 * (1 - s) * s * (x2 - x1) + 3 * s * s * (1 - x2);
-
-  function bisect(t: number): number {
-    let lo = 0;
-    let hi = 1;
-    for (let i = 0; i < 30; i++) {
-      const mid = (lo + hi) / 2;
-      if (x(mid) < t) lo = mid;
-      else hi = mid;
-    }
-    return (lo + hi) / 2;
-  }
-
-  return (t: number) => {
-    if (t <= 0) return 0;
-    if (t >= 1) return 1;
-
-    let s = t;
-    for (let i = 0; i < 8; i++) {
-      const derivative = xDerivative(s);
-      if (Math.abs(derivative) < 1e-6) return y(bisect(t));
-
-      const next = s - (x(s) - t) / derivative;
-      if (next <= 0 || next >= 1) return y(bisect(t));
-
-      s = next;
-    }
-    return y(s);
-  };
-}
-
-// Matches motion's named curves so the visualizers feel like their LiveKit
-// counterparts rather than a plausible-looking approximation.
-//
-// Every easing here is TOTAL: it clamps `t` into [0, 1] itself rather than
-// trusting its caller. `cubicBezier` already did (its Newton solve needs `t`
-// in range to converge); `linear` was the bare identity and passed anything
-// straight through. `step()` below clamps the top but not the bottom, so a
-// frame timestamp EARLIER than the origin `to()` captured yields a negative
-// `t` and, through an unclamped easing, a tween that runs backwards.
-//
-// That timestamp cannot occur in a browser -- requestAnimationFrame's
-// timestamp and `performance.now()` share a time origin per spec -- so this is
-// robustness, not a live bug. It does occur under vitest + jsdom, where the
-// two do not share an origin. The clamp lives in the easings rather than at
-// the `step()` call site so the tests can drive a negative `t` through each
-// curve individually and prove which ones guard.
-const EASINGS = {
-  linear: (t: number) => Math.min(1, Math.max(0, t)),
-  easeIn: cubicBezier(0.42, 0, 1, 1),
-  easeOut: cubicBezier(0, 0, 0.58, 1),
-  easeInOut: cubicBezier(0.42, 0, 0.58, 1),
-} as const;
-
-/**
- * Damped-spring position at normalized time `t` (0..1), settling at 1.
- *
- * `bounce` maps to the damping ratio: 0 is critically damped (no overshoot),
- * higher values overshoot more. Matches the feel of motion's spring defaults
- * closely enough for shader uniforms, without the dependency.
- *
- * `t` is clamped at 0 for the same reason the named easings are (see EASINGS),
- * and the failure here is far louder than theirs: the decay term is
- * `Math.exp(-zeta * omega * t)`, so a negative `t` makes it GROW rather than
- * decay. At t = -0.25 with bounce 0.4 this returned ~5.9 instead of something
- * in [0, ~1.3]. No top clamp: overshooting past 1 is what a spring is for.
- */
-function spring(t: number, bounce: number): number {
-  t = Math.max(0, t);
-  const zeta = Math.max(0.05, 1 - Math.min(0.95, bounce));
-  const omega = 10;
-  const damped = omega * Math.sqrt(Math.max(0, 1 - zeta * zeta));
-  return (
-    1 -
-    Math.exp(-zeta * omega * t) *
-      (Math.cos(damped * t) + ((zeta * omega) / (damped || 1)) * Math.sin(damped * t))
-  );
-}
-
-function isSpring(tr: Transition): tr is { type: 'spring'; duration: number; bounce: number } {
-  return 'type' in tr && tr.type === 'spring';
-}
-
-/**
- * A tweened number driven by requestAnimationFrame.
- *
- * Exists so shader uniforms can animate without pulling in a motion library.
- * CSS transitions cannot help here: uniforms are plain JS numbers handed to
- * WebGL every frame.
- *
- * `to()` interrupts whatever is in flight. An array target ping-pongs between
- * its two values forever, which is how the listening and thinking pulses read.
- * `duration: 0` (or no transition) sets instantly, which live volume needs so
- * the picture never lags the audio.
- *
- * `animating` is true exactly while a frame loop is armed: from an animated
- * `to()` until it lands (a ping-pong never lands, so it stays true), false
- * for instant sets and after dispose. It is a real signal on purpose -- the
- * aurora variant's volume-override effect reads it as its upstream-parity
- * "scale tween idle" guard, and being reactive means that effect re-runs
- * the moment a landing settles instead of waiting for the next volume tick.
- */
-export function createTween(initial: number): {
-  value: Accessor<number>;
-  animating: Accessor<boolean>;
-  to(target: number | [number, number], transition?: Transition): void;
-} {
-  const [value, setValue] = createSignal(initial);
-  const [animating, setAnimating] = createSignal(false);
-  let raf = 0;
-  let disposed = false;
-
-  /**
-   * `cancelAnimationFrame`, captured at SETUP.
-   *
-   * `stop()` below runs at dispose, and dispose is not guaranteed to happen
-   * while the page that mounted this tween is still standing -- a host can tear
-   * its DOM globals down in between (`component-register`'s
-   * `disconnectedCallback` defers a microtask; a test environment deletes the
-   * globals synchronously right after detaching). A bare `cancelAnimationFrame`
-   * there throws from a promise nobody holds, so it surfaces as an unhandled
-   * rejection that fails a run in which every test passed. See
-   * tests/components/teardown-without-dom-globals.test.tsx.
-   *
-   * The FUNCTION, not the view. The `const win = window` capture that fixes a
-   * bare `document` does nothing here: `window === globalThis` -- measured, in
-   * jsdom and in real Chromium/WebKit alike -- and the teardown deletes these
-   * keys off that very object, so `win.cancelAnimationFrame` is undefined by
-   * the time cleanup runs. It only trades the ReferenceError for a TypeError.
-   * `.bind` pins the receiver the WebIDL operation is specified on; Chromium
-   * and WebKit both accept a detached call (measured), so the bind is belt and
-   * braces against an engine that does not, at zero cost.
-   *
-   * GUARDED because "setup" for this primitive is the component body, and a
-   * server render executes component bodies. Node has no `cancelAnimationFrame`
-   * at all, so an unguarded capture here would trade the disposal crash for an
-   * SSR crash -- measured, not hypothesised. Nothing can be scheduled without
-   * `requestAnimationFrame` either, so the no-op fallback is exactly right.
-   */
-  const cancelFrame = typeof cancelAnimationFrame === 'function'
-    ? cancelAnimationFrame.bind(globalThis)
-    : () => {};
-
-  const stop = () => {
-    if (raf) cancelFrame(raf);
-    raf = 0;
-  };
-
-  onCleanup(() => {
-    disposed = true;
-    stop();
-    setAnimating(false);
-  });
-
-  function to(target: number | [number, number], transition?: Transition) {
-    stop();
-    if (disposed) return;
-
-    const pingPong = Array.isArray(target);
-    // Untracked: `.to()` is an imperative command ("animate to this
-    // target"), not a reactive read. Its normal caller is a createEffect
-    // reacting to some OTHER signal (e.g. state changing); reading this
-    // tween's own `value()` here without untrack() would make that effect
-    // implicitly depend on the tween's own signal too. That is invisible
-    // for a single tween (it would just restart itself every frame and
-    // still crawl toward the target) but is fatal the moment a caller
-    // creates a SECOND tween and `.to()`'s both from the same effect (see
-    // the wave shader variant, which does exactly this for amplitude and
-    // frequency): a browser fires one frame's queued
-    // requestAnimationFrame callbacks in the order they were registered, so
-    // the FIRST tween's step -- which runs first, and whose `setValue`
-    // synchronously re-triggers the (now-dependent) effect -- cancels the
-    // SECOND tween's already-queued step before the browser ever reaches
-    // it. That repeats identically every single frame, so the second
-    // tween's `step` never fires even once and its value never leaves its
-    // initial one, permanently, no matter how long the effect keeps
-    // "restarting" it.
-    const [a, b] = pingPong ? target : [untrack(value), target];
-
-    if (!transition || (!isSpring(transition) && transition.duration === 0)) {
-      setAnimating(false);
-      setValue(pingPong ? a : b);
-      return;
-    }
-
-    const durationMs = transition.duration * 1000;
-    if (durationMs <= 0) {
-      setAnimating(false);
-      setValue(b);
-      return;
-    }
-
-    if (typeof requestAnimationFrame === 'undefined') {
-      setAnimating(false);
-      setValue(b);
-      return;
-    }
-
-    const ease = isSpring(transition)
-      ? (t: number) => spring(t, transition.bounce)
-      : EASINGS[transition.ease ?? 'easeOut'];
-
-    // A ping-pong starts from its first value rather than wherever it was, so
-    // the pulse reads the same every time it restarts. `a` is already an
-    // untracked read of the current value (or the ping-pong's first target
-    // value) from above -- reused here instead of reading `value()` again.
-    let from = a;
-    let to_ = b;
-    if (pingPong) setValue(a);
-
-    // requestAnimationFrame's timestamp and performance.now() share a time
-    // origin per spec, so capturing the origin here, at the moment to() is
-    // called, is directly comparable to the `now` a later frame reports.
-    // That means elapsed time is measured from when this leg actually
-    // started, correct on the very first frame with no lazy-capture dance
-    // and no risk of an idle gap since the last tween being charged against
-    // this one.
-    let legStart = performance.now();
-    const step = (now: number) => {
-      const t = Math.min(1, (now - legStart) / durationMs);
-      setValue(from + (to_ - from) * ease(t));
-
-      if (t < 1) {
-        raf = requestAnimationFrame(step);
-        return;
-      }
-
-      if (!pingPong) {
-        setValue(to_);
-        raf = 0;
-        setAnimating(false);
-        return;
-      }
-
-      // Reverse and run again, from a fresh origin for the new leg.
-      setValue(to_);
-      [from, to_] = [to_, from];
-      legStart = performance.now();
-      raf = requestAnimationFrame(step);
-    };
-
-    setAnimating(true);
-    raf = requestAnimationFrame(step);
-  }
-
-  return { value, animating, to };
-}