@kitn.ai/ui 0.15.1 → 0.17.0

package/src/primitives/card-recovery.ts

@@ -0,0 +1,149 @@
+// src/primitives/card-recovery.ts
+// Recovery glue for the card dismiss/reopen flow. `dismissRecovery` builds the
+// `{ onDismiss, onReopen }` half of a CardPolicy for a host that keeps its cards in
+// some store: it writes a `dismissed` resolution onto the matching envelope (a NEW
+// array reference, never an in-place mutation, so a Solid/React host re-renders),
+// optionally shows an injected "Dismissed · Undo" toast (Undo restores the prior
+// resolution), and on reopen decides — via `isReopenable` — whether the card comes
+// back live (resolution cleared) or `expired`.
+//
+// The toast is an INJECTED ADAPTER, never an import — cards (and this helper) stay
+// decoupled from the toast module. The re-appear rule is the host's: "the agent
+// already proceeded" is a host fact, surfaced through `isReopenable`.
+import type { CardEnvelope, CardPolicy, CardResolution } from './card-contract';
+
+/** The minimal toast surface this helper needs. Inject a real adapter (e.g. one
+ *  backed by `kai-toast-region`) — this module never imports the toast itself. */
+export interface RecoveryToast {
+  show(opts: {
+    message: string;
+    action?: { label: string; onClick: () => void };
+    durationMs?: number;
+  }): { dismiss(): void };
+}
+
+/** Context handed to a custom `isReopenable` predicate. */
+export interface ReopenEnv {
+  cardId: string;
+  /** The card's current resolution at reopen time (should be `dismissed`). */
+  resolution: CardResolution | undefined;
+  /** `Date.now()` at reopen time (injected for testability). */
+  now: number;
+}
+
+export interface DismissRecoveryOptions {
+  /** Read the current cards array. */
+  get: () => CardEnvelope[];
+  /** Write the next cards array (a NEW reference). */
+  set: (next: CardEnvelope[]) => void;
+  /** Optional injected toast adapter for the "Dismissed · Undo" affordance. */
+  toast?: RecoveryToast;
+  /** Override the default re-openable rule. Return false to expire instead. */
+  isReopenable?: (env: ReopenEnv) => boolean;
+  /** A dismissed card older than this (ms since `dismissed.at`) is no longer
+   *  re-openable (→ expired). Omit/Infinity = never stale. */
+  staleAfterMs?: number;
+  /** Auto-dismiss the Undo toast after this long. Default 6000ms. */
+  undoMs?: number;
+  /** Injected clock (defaults to Date.now); keeps the helper testable. */
+  now?: () => number;
+}
+
+/** The terminal resolution kinds that block a reopen (a finished card can't come back). */
+const TERMINAL_KINDS = new Set<CardResolution['kind']>(['action', 'submit', 'expired']);
+
+/** Default re-openable rule: a card can come back unless it carries a terminal
+ *  resolution OR it has gone stale (`staleAfterMs` elapsed since `dismissed.at`).
+ *  A `dismissed` card with no/invalid `at` is always re-openable. */
+export function defaultIsReopenable(env: ReopenEnv, staleAfterMs?: number): boolean {
+  const r = env.resolution;
+  if (r && TERMINAL_KINDS.has(r.kind)) return false;
+  if (
+    staleAfterMs !== undefined &&
+    Number.isFinite(staleAfterMs) &&
+    r?.kind === 'dismissed' &&
+    typeof r.at === 'string'
+  ) {
+    const at = Date.parse(r.at);
+    if (!Number.isNaN(at) && env.now - at >= staleAfterMs) return false;
+  }
+  return true;
+}
+
+/** Return a new cards array with `cardId`'s envelope stamped with `resolution`
+ *  (or cleared when `resolution` is undefined). Same reference if nothing changed. */
+function withResolution(
+  cards: CardEnvelope[],
+  cardId: string,
+  resolution: CardResolution | undefined,
+): CardEnvelope[] {
+  let changed = false;
+  const next = cards.map((c) => {
+    if (c.id !== cardId) return c;
+    changed = true;
+    if (resolution === undefined) {
+      if (c.resolution === undefined) return c;
+      const { resolution: _drop, ...rest } = c;
+      return rest;
+    }
+    return { ...c, resolution };
+  });
+  return changed ? next : cards;
+}
+
+/** The current resolution on `cardId`, if any. */
+function resolutionOf(cards: CardEnvelope[], cardId: string): CardResolution | undefined {
+  return cards.find((c) => c.id === cardId)?.resolution;
+}
+
+/**
+ * Build the `{ onDismiss, onReopen }` policy handlers for the card dismiss/recovery
+ * flow over a host store (`get`/`set`).
+ *
+ * - `onDismiss(cardId)` — stamps `{ kind:'dismissed', at }` immutably and, when a
+ *   `toast` is injected, shows "Dismissed" with an Undo that restores the card's
+ *   prior resolution (live again when there was none).
+ * - `onReopen(cardId)` — clears the resolution (live) when `isReopenable`, else
+ *   stamps `{ kind:'expired', at }`.
+ */
+export function dismissRecovery(
+  opts: DismissRecoveryOptions,
+): Pick<CardPolicy, 'onDismiss' | 'onReopen'> {
+  const now = opts.now ?? (() => Date.now());
+  const reopenable = opts.isReopenable ?? ((env: ReopenEnv) => defaultIsReopenable(env, opts.staleAfterMs));
+  const undoMs = opts.undoMs ?? 6000;
+
+  const onDismiss = (cardId: string): void => {
+    const before = opts.get();
+    const prior = resolutionOf(before, cardId);
+    const dismissed: CardResolution = { kind: 'dismissed', at: new Date(now()).toISOString() };
+    opts.set(withResolution(before, cardId, dismissed));
+
+    opts.toast?.show({
+      message: 'Dismissed',
+      durationMs: undoMs,
+      action: {
+        label: 'Undo',
+        onClick: () => {
+          // Restore the prior resolution (undefined → live again). Read fresh in
+          // case the store moved on; only touch this card.
+          opts.set(withResolution(opts.get(), cardId, prior));
+        },
+      },
+    });
+  };
+
+  const onReopen = (cardId: string): void => {
+    const before = opts.get();
+    const current = resolutionOf(before, cardId);
+    const env: ReopenEnv = { cardId, resolution: current, now: now() };
+    if (reopenable(env)) {
+      opts.set(withResolution(before, cardId, undefined));
+    } else {
+      const expired: CardResolution = { kind: 'expired', at: new Date(now()).toISOString() };
+      opts.set(withResolution(before, cardId, expired));
+    }
+  };
+
+  return { onDismiss, onReopen };
+}

package/src/primitives/card-routing.ts

@@ -59,6 +59,9 @@ export function routeCardEvent(policy: CardPolicy | undefined, event: CardEvent)
     case 'dismiss':
       p.onDismiss ? p.onDismiss(event.cardId) : warnNoHandler('dismiss');
       break;
+    case 'reopen':
+      p.onReopen ? p.onReopen(event.cardId) : warnNoHandler('reopen');
+      break;
     case 'error':
       p.onError ? p.onError(event.cardId, event.message) : warnNoHandler('error');
       break;

package/src/primitives/card-schemas/choice.schema.json

@@ -65,6 +65,11 @@
     "allowOther": {
       "description": "Optional free-text escape ('none of these / specify'). `true` appends a final 'Other…' option; an object customizes its `label`/`placeholder`. Selecting it reveals a text input; the shared Submit button then emits `{ kind:'action', action:'__other__', payload:{ text } }`.",
       "x-kai-control": "allow-other"
+    },
+    "dismissible": {
+      "type": "boolean",
+      "default": false,
+      "description": "Show a close affordance that emits the `dismiss` verb. The card collapses to a re-openable 'dismissed' stub; the host decides via `onReopen` whether it comes back live or `expired`."
     }
   }
 }

package/src/primitives/card-schemas/tasks.schema.json

@@ -73,6 +73,11 @@
       "minimum": 1,
       "description": "Optional maximum selectable; further toggles are blocked once reached.",
       "x-kai-select-max": true
+    },
+    "dismissible": {
+      "type": "boolean",
+      "default": false,
+      "description": "Show a close affordance that emits the `dismiss` verb. The card collapses to a re-openable 'dismissed' stub; the host decides via `onReopen` whether it comes back live or `expired`."
     }
   }
 }

package/src/primitives/message-feedback.ts

@@ -0,0 +1,123 @@
+// Message action-row feedback state — copy + like/dislike — owned ABOVE the
+// per-message `<For>` so a streaming re-render (a fresh `messages` array ref per
+// chunk) never wipes the user's optimistic vote or the transient "copied" check.
+//
+// Both facades (`ChatThread` and the `<kai-message>` element) create one of
+// these and route their action-bar clicks through `handleAction`. Keeping the
+// logic here (not inside the un-unit-testable `defineWebComponent` body) makes
+// the toggle/toast/clipboard behavior directly testable.
+
+import { createSignal, onCleanup } from 'solid-js';
+import type { ChatMessage, FeedbackVote } from '../elements/chat-types';
+import { toast } from './toast-store';
+
+/** Detail shape emitted by the action row. `state` is present only for the
+ *  toggleable feedback votes: `'on'` when a vote is set, `'off'` when cleared.
+ *  Copy / regenerate / edit / custom actions omit it. */
+export interface MessageActionDetail {
+  messageId: string;
+  action: string;
+  state?: 'on' | 'off';
+}
+
+export interface MessageFeedbackOptions {
+  /** Emit the `kai-message-action` detail (facade maps this to `dispatch` /
+   *  `onMessageAction`). */
+  emit: (detail: MessageActionDetail) => void;
+  /** How long the copy check stays before auto-clearing. Defaults to 2000ms. */
+  copiedDuration?: number;
+  /** Container the copy/feedback toasts should be scoped to (the chat, by
+   *  default) so they appear in-chat rather than at the page top. */
+  target?: () => HTMLElement | undefined;
+}
+
+export interface MessageFeedback {
+  /** Resolve the active vote for a message: a controlled `m.feedback` wins,
+   *  else the facade's own optimistic map. */
+  resolveFeedback: (m: Pick<ChatMessage, 'id' | 'feedback'>) => FeedbackVote | undefined;
+  /** Whether a message's copy button should currently show its check. */
+  isCopied: (id: string) => boolean;
+  /** Route a clicked action through copy / vote / passthrough handling. */
+  handleAction: (m: Pick<ChatMessage, 'id' | 'content' | 'feedback'>, action: string) => void;
+}
+
+const DEFAULT_COPIED_DURATION = 2000;
+
+/**
+ * Create the action-row feedback controller for one message list (or one
+ * standalone message). Owns the optimistic `feedbackMap` + transient
+ * `copiedIds`, resolves the controlled-wins vote, and turns clicks into
+ * clipboard writes, toasts, and `kai-message-action` emissions.
+ */
+export function createMessageFeedback(opts: MessageFeedbackOptions): MessageFeedback {
+  const [feedbackMap, setFeedbackMap] = createSignal<Record<string, FeedbackVote>>({});
+  const [copiedIds, setCopiedIds] = createSignal<Set<string>>(new Set());
+  const copiedDuration = opts.copiedDuration ?? DEFAULT_COPIED_DURATION;
+  const timers = new Map<string, ReturnType<typeof setTimeout>>();
+
+  onCleanup(() => {
+    timers.forEach((t) => clearTimeout(t));
+    timers.clear();
+  });
+
+  const resolveFeedback: MessageFeedback['resolveFeedback'] = (m) =>
+    m.feedback ?? feedbackMap()[m.id];
+
+  const isCopied: MessageFeedback['isCopied'] = (id) => copiedIds().has(id);
+
+  const markCopied = (id: string) => {
+    setCopiedIds((prev) => {
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+    const existing = timers.get(id);
+    if (existing) clearTimeout(existing);
+    timers.set(id, setTimeout(() => {
+      timers.delete(id);
+      setCopiedIds((prev) => {
+        if (!prev.has(id)) return prev;
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }, copiedDuration));
+  };
+
+  const setVote = (id: string, vote: FeedbackVote | undefined) => {
+    setFeedbackMap((prev) => {
+      const next = { ...prev };
+      if (vote === undefined) delete next[id];
+      else next[id] = vote;
+      return next;
+    });
+  };
+
+  const handleAction: MessageFeedback['handleAction'] = (m, action) => {
+    if (action === 'copy') {
+      // Clipboard may be unavailable (insecure context / jsdom); fail soft.
+      try { navigator.clipboard?.writeText(m.content); } catch { /* ignore */ }
+      markCopied(m.id);
+      toast('Copied to clipboard', { target: opts.target?.() });
+      opts.emit({ messageId: m.id, action });
+      return;
+    }
+    if (action === 'like' || action === 'dislike') {
+      const current = resolveFeedback(m);
+      if (current === action) {
+        // Re-tap clears the vote — no toast on un-vote.
+        setVote(m.id, undefined);
+        opts.emit({ messageId: m.id, action, state: 'off' });
+      } else {
+        setVote(m.id, action);
+        toast('Thanks for your feedback', { target: opts.target?.() });
+        opts.emit({ messageId: m.id, action, state: 'on' });
+      }
+      return;
+    }
+    // regenerate / edit / custom — passthrough, no state.
+    opts.emit({ messageId: m.id, action });
+  };
+
+  return { resolveFeedback, isCopied, handleAction };
+}

package/src/primitives/toast-store.ts

@@ -0,0 +1,235 @@
+// Module-level toast store + the imperative `toast()` API.
+//
+// This is the PRIMARY way consumers raise a toast: `toast('Saved')`,
+// `toast.success('Copied')`, `toast.dismiss(id)`. The store is a single
+// reactive list held in a long-lived `createRoot` (so its reactivity survives
+// outside any component), and `ensureMounted()` lazily creates exactly ONE
+// `<kai-toast-region>` on `document.body` the first time a toast is raised,
+// binding the list to its `toasts` property. The region is a real `kai-*`
+// element, so it carries its own shadow root + the shared kit stylesheet — it's
+// viewport-positioned AND fully kit-styled, never a raw div.
+//
+// SSR-safe: every DOM touch is guarded by `typeof document`. On the server,
+// raising a toast is an inert no-op (the store updates, nothing mounts).
+
+import { createRoot, createSignal } from 'solid-js';
+import { createStore, produce } from 'solid-js/store';
+import type { ToastPosition } from '../components/toast';
+
+export type ToastVariant = 'neutral' | 'success';
+
+export interface ToastConfig {
+  stack?: 'expanded' | 'collapsed';
+  position?: ToastPosition;
+  max?: number;
+}
+
+// Module-level config the imperative singleton regions inherit. Defaults match
+// the element's own defaults, so an un-configured app behaves exactly as before.
+let toastConfig: ToastConfig = {};
+
+/** Apply the current config to a region element (attributes for scalars). */
+function applyConfig(el: HTMLElement): void {
+  if (toastConfig.stack) el.setAttribute('stack', toastConfig.stack);
+  if (toastConfig.position) el.setAttribute('position', toastConfig.position);
+  if (toastConfig.max !== undefined) el.setAttribute('max', String(toastConfig.max));
+}
+
+/**
+ * Configure the imperative `toast()` singleton — call once at app start.
+ * `toast.success('…')` has no element to set a prop on, so this is how you opt
+ * the auto-mounted region into collapsed stacking / a position / a max. Updates
+ * any already-mounted regions too, so call order doesn't matter.
+ */
+export function configureToasts(config: ToastConfig): void {
+  toastConfig = { ...toastConfig, ...config };
+  if (typeof document === 'undefined') return;
+  document.querySelectorAll('kai-toast-region').forEach((el) => applyConfig(el as HTMLElement));
+}
+
+/** An action button rendered inside the toast. Returning `false` from
+ *  `onAction` keeps the toast open (e.g. to show a follow-up); any other
+ *  return value dismisses it. */
+export interface ToastAction {
+  label: string;
+  onAction: () => void | false;
+}
+
+export interface ToastItem {
+  id: string;
+  message: string;
+  variant?: ToastVariant;
+  action?: ToastAction;
+  /** Auto-dismiss delay in ms. `0` = sticky (never auto-dismisses). When an
+   *  `action` is present the effective floor is 4000ms so it stays long enough
+   *  to act on. Defaults to 2000ms. */
+  duration?: number;
+  /** Whether the × close affordance is shown. Defaults to `true`. */
+  dismissible?: boolean;
+  /** Container to scope this toast WITHIN — it floats anchored to that element's
+   *  bounds instead of the viewport. Omit for a global, viewport-anchored toast.
+   *  The chat targets itself by default so its copy/feedback toasts stay in-chat. */
+  target?: HTMLElement;
+}
+
+/** Options accepted by `toast()` — everything but the message. Pass `id` to
+ *  update an existing toast in place. */
+export interface ToastOptions {
+  id?: string;
+  variant?: ToastVariant;
+  action?: ToastAction;
+  duration?: number;
+  dismissible?: boolean;
+  /** Scope this toast to a container's bounds (e.g. a chat) instead of the
+   *  viewport. Omit for a global, viewport-anchored toast. */
+  target?: HTMLElement;
+}
+
+/** Handle returned from `toast()` for imperative control. */
+export interface ToastHandle {
+  id: string;
+  dismiss: () => void;
+  update: (patch: Partial<Omit<ToastItem, 'id'>>) => void;
+}
+
+/** Default auto-dismiss delay. Long enough to read + reach before it leaves. */
+export const DEFAULT_TOAST_DURATION = 5000;
+/** Minimum auto-dismiss delay when the toast carries an action (e.g. Undo) — it
+ *  has to stay up long enough to actually act on. */
+export const ACTION_TOAST_FLOOR = 7000;
+
+// ── The reactive store ──────────────────────────────────────────────────────
+// Held in a never-disposed root so the signal/store graph stays live for the
+// lifetime of the page, independent of any component.
+const { toasts, setToasts, mounted, setMounted } = createRoot(() => {
+  const [list, setList] = createStore<ToastItem[]>([]);
+  const [isMounted, setIsMounted] = createSignal(false);
+  return { toasts: list, setToasts: setList, mounted: isMounted, setMounted: setIsMounted };
+});
+
+/** The live toast list (reactive). The region facade binds to this. */
+export function getToasts(): ToastItem[] {
+  return toasts;
+}
+
+let counter = 0;
+function nextId(): string {
+  counter += 1;
+  return `toast-${counter}`;
+}
+
+/** Resolve the effective duration, applying the action floor. */
+function resolveDuration(item: Pick<ToastItem, 'duration' | 'action'>): number {
+  const base = item.duration ?? DEFAULT_TOAST_DURATION;
+  if (base === 0) return 0; // explicit sticky wins
+  if (item.action) return Math.max(base, ACTION_TOAST_FLOOR);
+  return base;
+}
+
+/**
+ * Lazily create the single `<kai-toast-region>` host on `document.body` and
+ * bind the store to its `toasts` property. Idempotent + SSR-safe. The element
+ * upgrade (its `defineWebComponent` registration) happens when the elements
+ * bundle loads; setting the property before/after upgrade both work because
+ * `customElement` reflects late-set properties.
+ */
+// One region per distinct target (the `null` key = the global / viewport region).
+// Every region binds the SAME store proxy and filters to its own target, so a
+// toast routes to the region for its `target`.
+const regions = new Map<HTMLElement | null, HTMLElement>();
+
+export function ensureMounted(target: HTMLElement | null = null): HTMLElement | undefined {
+  if (typeof document === 'undefined') return undefined;
+  const cached = regions.get(target);
+  if (cached && cached.isConnected) return cached;
+  const el = document.createElement('kai-toast-region') as HTMLElement;
+  // Append FIRST so the element upgrades, THEN bind. Setting a property before
+  // upgrade loses it: component-register resets every prop in the constructor on
+  // upgrade (the same pre-upgrade clobber that bites <kai-chat>), so a pre-append
+  // `el.toasts = …` is wiped and the first toast never renders.
+  document.body.appendChild(el);
+  (el as unknown as { toasts: ToastItem[] }).toasts = toasts as ToastItem[];
+  if (target) (el as unknown as { target: HTMLElement }).target = target;
+  applyConfig(el); // inherit stack/position/max from configureToasts()
+  regions.set(target, el);
+  setMounted(true);
+  return el;
+}
+
+/** Test-only: whether `ensureMounted` has run. */
+export function isToastRegionMounted(): boolean {
+  return mounted();
+}
+
+function upsert(item: ToastItem): void {
+  const idx = toasts.findIndex((t) => t.id === item.id);
+  if (idx >= 0) {
+    setToasts(idx, item);
+  } else {
+    setToasts(produce((list) => { list.push(item); }));
+  }
+}
+
+function dismiss(id: string): void {
+  setToasts((list) => list.filter((t) => t.id !== id));
+}
+
+function makeHandle(id: string): ToastHandle {
+  return {
+    id,
+    dismiss: () => dismiss(id),
+    update: (patch) => {
+      const idx = toasts.findIndex((t) => t.id === id);
+      if (idx >= 0) setToasts(idx, (prev) => ({ ...prev, ...patch }));
+    },
+  };
+}
+
+/** Internal: raise/refresh a toast of a given variant. */
+function raise(message: string, opts: ToastOptions | undefined, variant: ToastVariant): ToastHandle {
+  ensureMounted(opts?.target ?? null);
+  const id = opts?.id ?? nextId();
+  const item: ToastItem = {
+    id,
+    message,
+    variant: opts?.variant ?? variant,
+    action: opts?.action,
+    duration: opts?.duration,
+    dismissible: opts?.dismissible,
+    target: opts?.target,
+  };
+  upsert(item);
+  return makeHandle(id);
+}
+
+export interface ToastFn {
+  (message: string, opts?: ToastOptions): ToastHandle;
+  /** Raise a success (emerald check) toast. */
+  success: (message: string, opts?: ToastOptions) => ToastHandle;
+  /** Dismiss a toast by id. */
+  dismiss: (id: string) => void;
+  /** Dismiss every active toast. */
+  clear: () => void;
+}
+
+/**
+ * Raise a transient toast. Returns a `{ id, dismiss, update }` handle.
+ *
+ * ```ts
+ * toast('Copied to clipboard');
+ * toast.success('Saved');
+ * const t = toast('Working…', { duration: 0 });
+ * t.update({ message: 'Done', variant: 'success', duration: 2000 });
+ * ```
+ */
+export const toast: ToastFn = Object.assign(
+  (message: string, opts?: ToastOptions) => raise(message, opts, 'neutral'),
+  {
+    success: (message: string, opts?: ToastOptions) => raise(message, opts, 'success'),
+    dismiss,
+    clear: () => setToasts([]),
+  },
+);
+
+// Re-export for the region facade so the effective-duration rule lives in one place.
+export { resolveDuration };

package/src/ui/tooltip.tsx

@@ -4,10 +4,10 @@ import { cn } from '../utils/cn';
 import { useChatConfig } from '../primitives/chat-config';
 import { createPresence, usePosition, useDismiss, As } from './overlay';
 
-export interface TooltipProps { content: string; children: JSX.Element; class?: string; openDelay?: number; }
+export interface TooltipProps { content: string; children: JSX.Element; class?: string; openDelay?: number; dismissOnClick?: boolean; }
 
 export function Tooltip(props: TooltipProps) {
-  const [local] = splitProps(props, ['content', 'children', 'class', 'openDelay']);
+  const [local] = splitProps(props, ['content', 'children', 'class', 'openDelay', 'dismissOnClick']);
   const config = useChatConfig();
   const id = createUniqueId();
   const [open, setOpen] = createSignal(false);
@@ -25,6 +25,10 @@ export function Tooltip(props: TooltipProps) {
   };
   const hide = () => { clearTimeout(timer); setOpen(false); };
   const maybeHide = () => { if (!pointerInside() && !focusInside()) hide(); };
+  // Action-style tooltips should dismiss when their trigger is clicked: the pointer
+  // never "leaves", so reset the inside flags and force-close until the next genuine
+  // hover/focus. Opt out with dismissOnClick={false}.
+  const dismiss = () => { if (local.dismissOnClick === false) return; setPointerInside(false); setFocusInside(false); hide(); };
   onCleanup(() => clearTimeout(timer));
 
   const presence = createPresence(open);
@@ -39,6 +43,8 @@ export function Tooltip(props: TooltipProps) {
         aria-describedby={open() ? id : undefined}
         onPointerEnter={() => { setPointerInside(true); show(local.openDelay ?? 600); }}
         onPointerLeave={() => { setPointerInside(false); maybeHide(); }}
+        onPointerDown={dismiss}
+        onClick={dismiss}
         onFocusIn={() => { setFocusInside(true); show(); }}
         onFocusOut={(e: FocusEvent) => { const t = triggerEl(); if (t && t.contains(e.relatedTarget as Node)) return; setFocusInside(false); maybeHide(); }}
       >

package/theme.css

@@ -3,8 +3,10 @@
    utilities, and the .chat-markdown styles. Contains NO global base/reset rules,
    so importing it restyles nothing on its own — a host opts in via the kit's
    components + classes. Rebrand by overriding the --color-* values (optionally
-   scoped to a subtree). */
-@import "tw-animate-css";
+   scoped to a subtree).
+   NOTE: This file is Tailwind-v4 source (requires tailwindcss as a peer). For
+   bundler-based apps that don't use Tailwind, import @kitn.ai/ui/theme.tokens.css
+   instead — it is plain compiled CSS with no toolchain requirements. */
 
 @custom-variant dark (&:is(.dark *));