@kitn.ai/ui 0.28.0 → 0.29.0

package/src/components/loader.tsx

@@ -1,367 +0,0 @@
-import { Switch, Match, For, Show } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export type LoaderVariant =
-  | 'circular'
-  | 'classic'
-  | 'pulse'
-  | 'pulse-dot'
-  | 'dots'
-  | 'typing'
-  | 'wave'
-  | 'bars'
-  | 'terminal'
-  | 'text-blink'
-  | 'text-shimmer'
-  | 'loading-dots';
-
-export type LoaderSize = 'sm' | 'md' | 'lg';
-
-export interface LoaderProps {
-  variant?: LoaderVariant;
-  size?: LoaderSize;
-  text?: string;
-  class?: string;
-}
-
-/** Props of the shape-only loader variants (no label). */
-export interface LoaderShapeProps {
-  class?: string;
-  size?: LoaderSize;
-}
-
-/** Props of the text-based loader variants, which also take the label. */
-export interface LoaderTextProps extends LoaderShapeProps {
-  text?: string;
-}
-
-// Every variant shortcut ships its own `<Name>Props` alias: a consumer typing a
-// wrapper around `<DotsLoader>` must be able to name its props without knowing
-// that nine components happen to share one shape.
-export type CircularLoaderProps = LoaderShapeProps;
-export type ClassicLoaderProps = LoaderShapeProps;
-export type PulseLoaderProps = LoaderShapeProps;
-export type PulseDotLoaderProps = LoaderShapeProps;
-export type DotsLoaderProps = LoaderShapeProps;
-export type TypingLoaderProps = LoaderShapeProps;
-export type WaveLoaderProps = LoaderShapeProps;
-export type BarsLoaderProps = LoaderShapeProps;
-export type TerminalLoaderProps = LoaderShapeProps;
-export type TextBlinkLoaderProps = LoaderTextProps;
-export type TextShimmerLoaderProps = LoaderTextProps;
-export type TextDotsLoaderProps = LoaderTextProps;
-
-// --- CircularLoader ---
-
-export function CircularLoader(props: CircularLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
-  return (
-    <div
-      class={cn(
-        'border-primary animate-spin rounded-full border-2 border-t-transparent',
-        sizeClasses[size()],
-        props.class
-      )}
-    >
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- ClassicLoader ---
-
-export function ClassicLoader(props: ClassicLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
-  const barSizes = {
-    sm: { height: '6px', width: '1.5px' },
-    md: { height: '8px', width: '2px' },
-    lg: { height: '10px', width: '2.5px' },
-  };
-  return (
-    <div class={cn('relative', sizeClasses[size()], props.class)}>
-      <div class="absolute h-full w-full">
-        <For each={Array.from({ length: 12 }, (_, i) => i)}>
-          {(i) => (
-            <div
-              class="bg-primary absolute animate-[spinner-fade_1.2s_linear_infinite] rounded-full"
-              style={{
-                top: '0',
-                left: '50%',
-                'margin-left': size() === 'sm' ? '-0.75px' : size() === 'lg' ? '-1.25px' : '-1px',
-                'transform-origin': `${size() === 'sm' ? '0.75px' : size() === 'lg' ? '1.25px' : '1px'} ${size() === 'sm' ? '10px' : size() === 'lg' ? '14px' : '12px'}`,
-                transform: `rotate(${i * 30}deg)`,
-                opacity: 0,
-                'animation-delay': `${i * 0.1}s`,
-                height: barSizes[size()].height,
-                width: barSizes[size()].width,
-              }}
-            />
-          )}
-        </For>
-      </div>
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- PulseLoader ---
-
-export function PulseLoader(props: PulseLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
-  return (
-    <div class={cn('relative', sizeClasses[size()], props.class)}>
-      <div class="border-primary absolute inset-0 animate-[thin-pulse_1.5s_ease-in-out_infinite] rounded-full border-2" />
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- PulseDotLoader ---
-
-export function PulseDotLoader(props: PulseDotLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const sizeClasses = { sm: 'size-1', md: 'size-2', lg: 'size-3' };
-  return (
-    <div
-      class={cn(
-        'bg-primary animate-[pulse-dot_1.2s_ease-in-out_infinite] rounded-full',
-        sizeClasses[size()],
-        props.class
-      )}
-    >
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- DotsLoader ---
-
-export function DotsLoader(props: DotsLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const dotSizes = { sm: 'h-1.5 w-1.5', md: 'h-2 w-2', lg: 'h-2.5 w-2.5' };
-  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
-  return (
-    <div class={cn('flex items-center space-x-1', containerSizes[size()], props.class)}>
-      <For each={[0, 1, 2]}>
-        {(i) => (
-          <div
-            class={cn(
-              'bg-primary animate-[bounce-dots_1.4s_ease-in-out_infinite] rounded-full',
-              dotSizes[size()]
-            )}
-            style={{ 'animation-delay': `${i * 160}ms` }}
-          />
-        )}
-      </For>
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- TypingLoader ---
-
-export function TypingLoader(props: TypingLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const dotSizes = { sm: 'h-1 w-1', md: 'h-1.5 w-1.5', lg: 'h-2 w-2' };
-  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
-  return (
-    <div class={cn('flex items-center space-x-1', containerSizes[size()], props.class)}>
-      <For each={[0, 1, 2]}>
-        {(i) => (
-          <div
-            class={cn(
-              'bg-primary animate-[typing_1s_infinite] rounded-full',
-              dotSizes[size()]
-            )}
-            style={{ 'animation-delay': `${i * 250}ms` }}
-          />
-        )}
-      </For>
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- WaveLoader ---
-
-export function WaveLoader(props: WaveLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const barWidths = { sm: 'w-0.5', md: 'w-0.5', lg: 'w-1' };
-  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
-  const heights: Record<LoaderSize, string[]> = {
-    sm: ['6px', '9px', '12px', '9px', '6px'],
-    md: ['8px', '12px', '16px', '12px', '8px'],
-    lg: ['10px', '15px', '20px', '15px', '10px'],
-  };
-  return (
-    <div class={cn('flex items-center gap-0.5', containerSizes[size()], props.class)}>
-      <For each={[0, 1, 2, 3, 4]}>
-        {(i) => (
-          <div
-            class={cn(
-              'bg-primary animate-[wave_1s_ease-in-out_infinite] rounded-full',
-              barWidths[size()]
-            )}
-            style={{
-              'animation-delay': `${i * 100}ms`,
-              height: heights[size()][i],
-            }}
-          />
-        )}
-      </For>
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- BarsLoader ---
-
-export function BarsLoader(props: BarsLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const barWidths = { sm: 'w-1', md: 'w-1.5', lg: 'w-2' };
-  const containerSizes = { sm: 'h-4 gap-1', md: 'h-5 gap-1.5', lg: 'h-6 gap-2' };
-  return (
-    <div class={cn('flex', containerSizes[size()], props.class)}>
-      <For each={[0, 1, 2]}>
-        {(i) => (
-          <div
-            class={cn(
-              'bg-primary h-full animate-[wave-bars_1.2s_ease-in-out_infinite]',
-              barWidths[size()]
-            )}
-            style={{ 'animation-delay': `${i * 0.2}s` }}
-          />
-        )}
-      </For>
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- TerminalLoader ---
-
-export function TerminalLoader(props: TerminalLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const cursorSizes = { sm: 'h-3 w-1.5', md: 'h-4 w-2', lg: 'h-5 w-2.5' };
-  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
-  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
-  return (
-    <div class={cn('flex items-center space-x-1', containerSizes[size()], props.class)}>
-      {/* Decorative status chrome, not a control — was the BRAND token
-          (text-primary). The sibling TextShimmerLoader below already renders
-          its "Thinking" text purely in --color-foreground/--color-muted-foreground,
-          with no brand color at all; matches that precedent. */}
-      <span class={cn('text-foreground font-mono', textSizes[size()])}>{'>'}</span>
-      <div class={cn('bg-primary animate-[blink_1s_step-end_infinite]', cursorSizes[size()])} />
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- TextBlinkLoader ---
-
-export function TextBlinkLoader(props: TextBlinkLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
-  return (
-    <div
-      class={cn(
-        'animate-[text-blink_2s_ease-in-out_infinite] font-medium',
-        textSizes[size()],
-        props.class
-      )}
-    >
-      {props.text ?? 'Thinking'}
-    </div>
-  );
-}
-
-// --- TextShimmerLoader ---
-
-export function TextShimmerLoader(props: TextShimmerLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
-  return (
-    <div
-      class={cn(
-        'bg-[linear-gradient(to_right,var(--color-muted-foreground)_40%,var(--color-foreground)_60%,var(--color-muted-foreground)_80%)]',
-        'bg-size-[200%_auto] bg-clip-text font-medium text-transparent',
-        'animate-[shimmer_4s_infinite_linear]',
-        textSizes[size()],
-        props.class
-      )}
-    >
-      {props.text ?? 'Thinking'}
-    </div>
-  );
-}
-
-// --- TextDotsLoader ---
-
-export function TextDotsLoader(props: TextDotsLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
-  return (
-    <div class={cn('inline-flex items-center', props.class)}>
-      {/* Content/chrome, not a control — was `text-primary` on the label AND
-          the dots (both must match: one phrase, "Thinking..."). Matches
-          TextShimmerLoader's neutral precedent above. */}
-      <span class={cn('text-foreground font-medium', textSizes[size()])}>
-        {props.text ?? 'Thinking'}
-      </span>
-      <span class="inline-flex">
-        <span class="text-foreground animate-[loading-dots_1.4s_infinite_0.2s]">.</span>
-        <span class="text-foreground animate-[loading-dots_1.4s_infinite_0.4s]">.</span>
-        <span class="text-foreground animate-[loading-dots_1.4s_infinite_0.6s]">.</span>
-      </span>
-    </div>
-  );
-}
-
-// --- Loader (variant dispatcher) ---
-
-export function Loader(props: LoaderProps) {
-  return (
-    <Switch fallback={<CircularLoader size={props.size} class={props.class} />}>
-      <Match when={props.variant === 'circular'}>
-        <CircularLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'classic'}>
-        <ClassicLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'pulse'}>
-        <PulseLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'pulse-dot'}>
-        <PulseDotLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'dots'}>
-        <DotsLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'typing'}>
-        <TypingLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'wave'}>
-        <WaveLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'bars'}>
-        <BarsLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'terminal'}>
-        <TerminalLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'text-blink'}>
-        <TextBlinkLoader text={props.text} size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'text-shimmer'}>
-        <TextShimmerLoader text={props.text} size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'loading-dots'}>
-        <TextDotsLoader text={props.text} size={props.size} class={props.class} />
-      </Match>
-    </Switch>
-  );
-}

package/src/components/markdown.tsx

@@ -1,162 +0,0 @@
-import { splitProps, createMemo, createUniqueId, For, Show, Switch, Match } from 'solid-js';
-import { cn } from '../utils/cn';
-import { Marked } from 'marked';
-import { CodeBlock, CodeBlockCode } from './code-block';
-import { useChatConfig, textClass } from '../primitives/chat-config';
-import { isSafeUrl } from '../primitives/card-routing';
-
-// --- The markdown sink -------------------------------------------------------
-//
-// `MarkdownBlock` writes this parser's output to `innerHTML`, so THIS is the one
-// place in the kit where a string the model produced becomes live DOM in the
-// host page's origin. `marked` passes raw HTML through verbatim by default and
-// dropped its own URL sanitizing in v5, so both have to be handled here.
-//
-// The threat model is NOT a hostile provider. An attacker only needs to
-// influence the model's OUTPUT -- a user asking to be shown an `<img onerror>`
-// example, a prompt-injected model, or RAG over an untrusted document all reach
-// this sink against a perfectly trusted provider.
-//
-// WHY ESCAPE RATHER THAN SANITIZE (no DOMPurify):
-//   - A sanitizer needs a DOM. In Node this package's ESM build has no
-//     `sanitize` at all (`isSupported === false`), so the SSR path either throws
-//     or gets "guarded" into returning the payload UNCHANGED -- a silent
-//     passthrough of exactly the string we were trying to neutralise. Escaping
-//     is pure string work and behaves identically on server and client.
-//   - It costs no dependency. Escaping is the ~20 lines below; DOMPurify is
-//     ~35 KB gzipped of ESM in a package that gates its own footprint.
-//   - For a CHAT UI it is also the better RENDERING, not just the safer one.
-//     Raw HTML in model output is either the model quoting markup -- which the
-//     reader should SEE as text -- or an injection. Escaping serves the first
-//     case correctly and defuses the second. Nothing in this repo emits markdown
-//     that relies on inline HTML.
-// There is deliberately NO opt-in to restore raw HTML: nothing needs it today,
-// and an unsafe switch is the hole again for whoever flips it.
-//
-// This is a PRIVATE `Marked` instance, and that is load-bearing rather than
-// tidiness. Configuring the shared `marked` singleton would mean a consumer's
-// own `marked.use({ renderer })` elsewhere in the same app silently replaces
-// this renderer and reopens the vulnerability. It also stops the kit mutating
-// global `marked` options out from under a consumer, which it used to do.
-
-/** Escape for HTML TEXT content. */
-function escapeText(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
-
-/** Escape for a double-quoted ATTRIBUTE value. */
-function escapeAttr(s: string): string {
-  return escapeText(s).replace(/"/g, '&quot;');
-}
-
-const md = new Marked({
-  gfm: true,
-  breaks: true,
-  renderer: {
-    /** Raw HTML -- block (`Tokens.HTML`) and inline (`Tokens.Tag`) both land
-     *  here. Rendered as visible text instead of markup. */
-    html({ text }) {
-      return escapeText(text);
-    },
-
-    /** Markdown link syntax. marked BUILDS this anchor itself, so escaping raw
-     *  HTML does not cover it and it needs the scheme allowlist of its own.
-     *  A blocked link keeps its LABEL -- the reader still sees what the model
-     *  wrote, we simply refuse to make it clickable. */
-    link({ href, title, tokens }) {
-      const text = this.parser.parseInline(tokens);
-      if (!isSafeUrl(href)) return text;
-      const t = title ? ` title="${escapeAttr(title)}"` : '';
-      return `<a href="${escapeAttr(href)}"${t}>${text}</a>`;
-    },
-
-    /** Markdown image syntax. Same reasoning as `link`; a blocked image falls
-     *  back to its alt text. NOTE this also blocks `data:` image URIs, which
-     *  are inert inside `<img>` -- one allowlist for both is worth more than
-     *  the rare inline-data-image case it costs. */
-    image({ href, title, text }) {
-      if (!isSafeUrl(href)) return escapeText(text);
-      const t = title ? ` title="${escapeAttr(title)}"` : '';
-      return `<img src="${escapeAttr(href)}" alt="${escapeAttr(text)}"${t}>`;
-    },
-  },
-});
-
-export interface MarkdownProps {
-  content: string;
-  id?: string;
-  class?: string;
-  codeTheme?: string;
-  /** Optional `::part` name(s) to expose on the rendered root. Lets callers
-   *  (e.g. the message bubble) surface a styleable part through the shadow. */
-  part?: string;
-}
-
-interface ParsedBlock {
-  type: 'markdown' | 'code';
-  content: string;
-  language?: string;
-}
-
-function parseMarkdownIntoBlocks(markdown: string): ParsedBlock[] {
-  const tokens = md.lexer(markdown);
-  return tokens.map((token) => {
-    if (token.type === 'code') {
-      return {
-        type: 'code' as const,
-        content: token.text,
-        language: token.lang || undefined,
-      };
-    }
-    return {
-      type: 'markdown' as const,
-      content: token.raw,
-    };
-  });
-}
-
-function MarkdownBlock(props: { content: string }) {
-  const html = createMemo(() => {
-    try {
-      return md.parse(props.content, { async: false }) as string;
-    } catch {
-      // The parse failed, so nothing has been escaped -- the raw source must
-      // NOT go to `innerHTML`. Escape it and show it as text.
-      return escapeText(props.content);
-    }
-  });
-
-  return <div innerHTML={html()} />;
-}
-
-function Markdown(props: MarkdownProps) {
-  const [local] = splitProps(props, ['content', 'id', 'class', 'codeTheme', 'part']);
-  const config = useChatConfig();
-  const blockId = () => local.id ?? createUniqueId();
-  const blocks = createMemo(() => parseMarkdownIntoBlocks(local.content));
-
-  return (
-    <div part={local.part} class={cn('chat-markdown max-w-none break-words whitespace-normal [&>div:first-child>p:first-child]:mt-0 [&>div:last-child>p:last-child]:mb-0', textClass(config.proseSize()), local.class)}>
-      <For each={blocks()}>
-        {(block) => (
-          <Switch>
-            <Match when={block.type === 'code'}>
-              <CodeBlock class="my-4">
-                <CodeBlockCode
-                  code={block.content}
-                  language={block.language}
-                  theme={local.codeTheme ?? config.codeTheme()}
-                />
-              </CodeBlock>
-            </Match>
-            <Match when={block.type === 'markdown'}>
-              <MarkdownBlock content={block.content} />
-            </Match>
-          </Switch>
-        )}
-      </For>
-    </div>
-  );
-}
-
-export { Markdown };

package/src/components/message-skills.tsx

@@ -1,40 +0,0 @@
-import { Show, For, type JSX, splitProps } from "solid-js";
-import { cn } from "../utils/cn";
-
-// --- MessageSkills ---
-
-/** One skill badge. Also the shape of `<kai-skills>`' `skills` property and of a
- *  `<kai-skill>` light-DOM child. */
-export interface Skill {
-  /** Stable identifier for the skill. */
-  id: string;
-  /** Human-readable skill name shown on the badge. */
-  name: string;
-}
-
-export interface MessageSkillsProps {
-  skills: Skill[];
-  class?: string;
-}
-
-/**
- * Displays skill badges above a message to indicate which skills
- * were active when the message was generated.
- */
-function MessageSkills(props: MessageSkillsProps) {
-  return (
-    <Show when={props.skills.length > 0}>
-      <div class={cn("flex items-center gap-1 flex-wrap", props.class)}>
-        <For each={props.skills}>
-          {(skill) => (
-            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-micro font-medium bg-violet-400/10 text-violet-600 dark:text-violet-400">
-              {skill.name}
-            </span>
-          )}
-        </For>
-      </div>
-    </Show>
-  );
-}
-
-export { MessageSkills };