@kitn.ai/ui 0.14.1

package/src/components/loader.tsx

@@ -0,0 +1,333 @@
+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;
+}
+
+// --- CircularLoader ---
+
+export function CircularLoader(props: { class?: string; size?: LoaderSize }) {
+  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: { class?: string; size?: LoaderSize }) {
+  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: { class?: string; size?: LoaderSize }) {
+  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: { class?: string; size?: LoaderSize }) {
+  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: { class?: string; size?: LoaderSize }) {
+  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: { class?: string; size?: LoaderSize }) {
+  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: { class?: string; size?: LoaderSize }) {
+  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: { class?: string; size?: LoaderSize }) {
+  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: { class?: string; size?: LoaderSize }) {
+  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)}>
+      <span class={cn('text-primary 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: { text?: string; class?: string; size?: LoaderSize }) {
+  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: { text?: string; class?: string; size?: LoaderSize }) {
+  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: { text?: string; class?: string; size?: LoaderSize }) {
+  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)}>
+      <span class={cn('text-primary font-medium', textSizes[size()])}>
+        {props.text ?? 'Thinking'}
+      </span>
+      <span class="inline-flex">
+        <span class="text-primary animate-[loading-dots_1.4s_infinite_0.2s]">.</span>
+        <span class="text-primary animate-[loading-dots_1.4s_infinite_0.4s]">.</span>
+        <span class="text-primary 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.stories.tsx

@@ -0,0 +1,180 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Markdown } from './markdown';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const meta = {
+  title: 'Solid (Advanced)/Elements/Markdown',
+  component: Markdown,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: componentDescription([
+        'Renders a Markdown string to styled HTML (GFM enabled — tables, lists, blockquotes), splitting fenced code into highlighted `CodeBlock`s.',
+        '**When to use:** to display assistant message content, documentation, or any rich text authored in Markdown.',
+        '**How to use:** pass the Markdown string as `content`; optionally set `codeTheme` for code fences and `class` for the prose container. Prose sizing follows the surrounding `ChatConfig`.',
+        '**Placement:** inside `MessageContent`, response panels, or anywhere formatted text is shown.',
+      ]),
+    },
+  },
+  argTypes: {
+    content: {
+      control: 'text',
+      description: 'The Markdown source string to render.',
+    },
+    id: {
+      control: 'text',
+      description: 'Optional stable id used for block keys (auto-generated if omitted).',
+    },
+    codeTheme: {
+      control: 'text',
+      description: 'Shiki theme name applied to fenced code blocks (falls back to the chat config theme).',
+    },
+    class: {
+      control: 'text',
+      description: 'Additional CSS classes for the prose container.',
+    },
+  },
+  args: {
+    content: 'This is a simple paragraph of text rendered through the **Markdown** component.',
+  },
+  render: (args) => <Markdown {...args} />,
+} satisfies Meta<typeof Markdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Markdown } from '@kitn.ai/ui';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — edit the `content` control to render any Markdown. */
+export const Playground: Story = {
+  ...src(`<Markdown content="This is a simple paragraph of **Markdown** text." />`),
+};
+
+export const PlainText: Story = {
+  args: {
+    content: 'This is a simple paragraph of text rendered through the Markdown component.',
+  },
+  ...src(`<Markdown content="This is a simple paragraph of text rendered through the Markdown component." />`),
+};
+
+export const Headings: Story = {
+  args: {
+    content: `# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+
+Some text below the headings.`,
+  },
+  ...src(`<Markdown content={\`# Heading 1
+## Heading 2
+### Heading 3
+
+Some text below the headings.\`} />`),
+};
+
+export const CodeBlocks: Story = {
+  args: {
+    content: `Here is some inline \`code\` in a paragraph.
+
+\`\`\`typescript
+const x: number = 42;
+console.log(x);
+\`\`\`
+
+And another block:
+
+\`\`\`python
+print("hello world")
+\`\`\``,
+  },
+  ...src(`<Markdown content={\`Here is some inline \\\`code\\\` in a paragraph.
+
+\\\`\\\`\\\`typescript
+const x: number = 42;
+console.log(x);
+\\\`\\\`\\\`\`} />`),
+};
+
+export const Lists: Story = {
+  args: {
+    content: `### Unordered List
+- First item
+- Second item
+  - Nested item
+  - Another nested
+- Third item
+
+### Ordered List
+1. Step one
+2. Step two
+3. Step three`,
+  },
+  ...src(`<Markdown content={\`### Unordered List
+- First item
+- Second item
+  - Nested item
+
+### Ordered List
+1. Step one
+2. Step two\`} />`),
+};
+
+export const GFMTable: Story = {
+  args: {
+    content: `### Comparison Table
+
+| Feature | SolidJS | React | Svelte |
+|---------|---------|-------|--------|
+| Reactivity | Fine-grained | Virtual DOM | Compiler |
+| Bundle Size | ~7KB | ~40KB | ~2KB |
+| Performance | Excellent | Good | Excellent |
+| Learning Curve | Moderate | Moderate | Easy |`,
+  },
+  ...src(`<Markdown content={\`| Feature | SolidJS | React |
+|---------|---------|-------|
+| Reactivity | Fine-grained | Virtual DOM |
+| Bundle Size | ~7KB | ~40KB |\`} />`),
+};
+
+export const RichContent: Story = {
+  args: {
+    class: 'max-w-2xl',
+    content: `# Project Overview
+
+This is a **comprehensive** guide to building modern web applications.
+
+## Key Technologies
+
+- **SolidJS** -- Reactive UI framework
+- **TypeScript** -- Type-safe JavaScript
+- **Tailwind CSS** -- Utility-first styling
+
+## Getting Started
+
+\`\`\`bash
+pnpm create solid
+cd my-app
+pnpm install
+pnpm dev
+\`\`\`
+
+> **Note:** Make sure you have Node.js 18+ installed.
+
+## Architecture
+
+| Layer | Technology | Purpose |
+|-------|-----------|---------|
+| UI | SolidJS | Components |
+| State | Signals | Reactivity |
+| Styling | Tailwind | Design |
+
+For more info, visit [solidjs.com](https://solidjs.com).`,
+  },
+  ...src(`<Markdown class="max-w-2xl" content={richMarkdown} />`),
+};

package/src/components/markdown.tsx

@@ -0,0 +1,81 @@
+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';
+
+marked.setOptions({ gfm: true, breaks: true });
+
+export interface MarkdownProps {
+  content: string;
+  id?: string;
+  class?: string;
+  codeTheme?: string;
+}
+
+interface ParsedBlock {
+  type: 'markdown' | 'code';
+  content: string;
+  language?: string;
+}
+
+function parseMarkdownIntoBlocks(markdown: string): ParsedBlock[] {
+  const tokens = marked.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 marked.parse(props.content, { async: false }) as string;
+    } catch {
+      return props.content;
+    }
+  });
+
+  return <div innerHTML={html()} />;
+}
+
+function Markdown(props: MarkdownProps) {
+  const [local] = splitProps(props, ['content', 'id', 'class', 'codeTheme']);
+  const config = useChatConfig();
+  const blockId = () => local.id ?? createUniqueId();
+  const blocks = createMemo(() => parseMarkdownIntoBlocks(local.content));
+
+  return (
+    <div 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 };