@kitn.ai/ui 0.15.0 → 0.15.1

package/src/components/file-tree.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal } from 'solid-js';
-import { FileTree, type FileTreeFile } from './file-tree';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const FILES: FileTreeFile[] = [
-  { path: 'index.html', type: 'html' },
-  { path: 'about.html', type: 'html' },
-  { path: 'css/site.css', type: 'other', language: 'css' },
-  { path: 'src/app.ts', type: 'other', language: 'ts' },
-  { path: 'src/lib/format.ts', type: 'other', language: 'ts' },
-  { path: 'src/lib/parse.ts', type: 'other', language: 'ts' },
-  { path: 'assets/logo.svg', type: 'image' },
-  { path: 'assets/report.pdf', type: 'pdf' },
-];
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/FileTree',
-  component: FileTree,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A collapsible, keyboard-navigable file explorer built from a flat list of `/`-delimited paths — nested folders are derived automatically. ARIA `tree`/`treeitem`.',
-        '**When to use:** any file/folder tree — the Code tab of `Artifact` uses it, and it is exported for standalone reuse (project explorers, attachment browsers, doc outlines).',
-        '**How to use:** pass `files` (`{ path, url?, code?, language?, type? }[]`); folders come from `/` in each path and `type` picks the icon. Control highlight via `activeFile`, initial open folders via `defaultExpanded`, and handle `onSelect(path, file)`. Arrow keys navigate; Enter/Space selects or toggles.',
-        '**Placement:** a sidebar/explorer column.',
-      ]),
-    },
-  },
-  argTypes: {
-    files: { control: false },
-    activeFile: { control: 'text' },
-  },
-  args: { files: FILES, activeFile: 'src/app.ts' },
-  render: (args) => (
-    <div class="w-64 h-80 overflow-auto rounded-lg border border-border scrollbar-thin">
-      <FileTree files={args.files} activeFile={args.activeFile} />
-    </div>
-  ),
-} satisfies Meta<typeof FileTree>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { FileTree } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-export const Playground: Story = {
-  ...src(`<FileTree files={files} activeFile="src/app.ts" onSelect={(p) => set(p)} />`),
-};
-
-/** Drives selection from `onSelect` — the controlled pattern. */
-export const Interactive: Story = {
-  render: () => {
-    const [active, setActive] = createSignal('src/lib/format.ts');
-    return (
-      <div class="flex flex-col gap-2">
-        <div class="w-64 h-80 overflow-auto rounded-lg border border-border scrollbar-thin">
-          <FileTree files={FILES} activeFile={active()} onSelect={(p) => setActive(p)} />
-        </div>
-        <span class="text-sm text-muted-foreground">
-          Selected: <code>{active()}</code>
-        </span>
-      </div>
-    );
-  },
-  ...src(`const [active, setActive] = createSignal('src/lib/format.ts');
-<FileTree files={files} activeFile={active()} onSelect={setActive} />`),
-};

package/src/components/file-upload.stories.tsx

@@ -1,156 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { createSignal, For } from 'solid-js';
-import { FileUpload, FileUploadTrigger, FileUploadContent } from './file-upload';
-import { Upload } from 'lucide-solid';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/FileUpload',
-  component: FileUpload,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A headless file-upload root that handles window-wide drag-and-drop plus a hidden file input, composed with `FileUploadTrigger` (opens the picker) and `FileUploadContent` (full-screen drop overlay).',
-        '**When to use:** to let users attach files to a chat — via a button click or by dragging files anywhere onto the page.',
-        '**How to use:** wrap a `FileUploadTrigger` and optional `FileUploadContent` in `FileUpload`, and read selected files from `onFilesAdded`. Set `multiple`, `accept`, or `disabled` as needed.',
-        '**Placement:** in the prompt input area or composer toolbar where attachments are added.',
-      ]),
-    },
-  },
-  argTypes: {
-    multiple: {
-      control: 'boolean',
-      description: 'Allow selecting / dropping more than one file.',
-      table: { defaultValue: { summary: 'true' } },
-    },
-    accept: {
-      control: 'text',
-      description: 'Accepted file types, forwarded to the file input (e.g. `image/*`).',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disables the file input and suppresses the drop overlay.',
-    },
-    onFilesAdded: {
-      action: 'filesAdded',
-      description: 'Fired with the selected/dropped `File[]` (capped to one when `multiple` is false).',
-      table: { category: 'Events' },
-    },
-    children: {
-      control: false,
-      description: 'Trigger and overlay composition (`FileUploadTrigger`, `FileUploadContent`).',
-    },
-  },
-  args: {
-    multiple: true,
-    onFilesAdded: fn(),
-  },
-  render: (args) => (
-    <FileUpload {...args}>
-      <FileUploadTrigger class="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90">
-        <Upload class="size-4" />
-        Upload files
-      </FileUploadTrigger>
-      <FileUploadContent class="flex flex-col items-center gap-2">
-        <Upload class="size-12 text-muted-foreground" />
-        <p class="text-lg font-medium">Drop files here</p>
-      </FileUploadContent>
-    </FileUpload>
-  ),
-} satisfies Meta<typeof FileUpload>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { FileUpload, FileUploadTrigger, FileUploadContent } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — toggle multiple/disabled and watch the `filesAdded` action. */
-export const Playground: Story = {
-  ...src(`<FileUpload onFilesAdded={(files) => console.log(files)}>
-  <FileUploadTrigger class="...">
-    <Upload class="size-4" /> Upload files
-  </FileUploadTrigger>
-  <FileUploadContent class="...">
-    <Upload class="size-12" />
-    <p>Drop files here</p>
-  </FileUploadContent>
-</FileUpload>`),
-};
-
-/** Multi-file upload with a live list of selected files (showcase). */
-export const Default: Story = {
-  render: () => {
-    const [files, setFiles] = createSignal<File[]>([]);
-    return (
-      <div class="space-y-4">
-        <FileUpload onFilesAdded={(f) => setFiles((prev) => [...prev, ...f])}>
-          <FileUploadTrigger class="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90">
-            <Upload class="size-4" />
-            Upload files
-          </FileUploadTrigger>
-          <FileUploadContent class="flex flex-col items-center gap-2">
-            <Upload class="size-12 text-muted-foreground" />
-            <p class="text-lg font-medium">Drop files here</p>
-          </FileUploadContent>
-        </FileUpload>
-        <div class="space-y-1">
-          <For each={files()}>
-            {(file) => (
-              <div class="text-sm text-muted-foreground">
-                {file.name} ({(file.size / 1024).toFixed(1)} KB)
-              </div>
-            )}
-          </For>
-        </div>
-      </div>
-    );
-  },
-  ...src(`<FileUpload onFilesAdded={(f) => setFiles((prev) => [...prev, ...f])}>
-  <FileUploadTrigger class="...">
-    <Upload class="size-4" /> Upload files
-  </FileUploadTrigger>
-  <FileUploadContent class="...">
-    <Upload class="size-12" />
-    <p>Drop files here</p>
-  </FileUploadContent>
-</FileUpload>`),
-};
-
-/** Single-file, image-only upload (showcase). */
-export const SingleFile: Story = {
-  render: () => {
-    const [file, setFile] = createSignal<File | null>(null);
-    return (
-      <div class="space-y-4">
-        <FileUpload
-          onFilesAdded={(f) => setFile(f[0] ?? null)}
-          multiple={false}
-          accept="image/*"
-        >
-          <FileUploadTrigger class="rounded-md bg-muted px-4 py-2 text-sm hover:bg-muted/80">
-            Choose image
-          </FileUploadTrigger>
-          <FileUploadContent>
-            <p class="text-lg font-medium">Drop an image here</p>
-          </FileUploadContent>
-        </FileUpload>
-        <div class="text-sm text-muted-foreground">
-          {file() ? `Selected: ${file()!.name}` : 'No file selected'}
-        </div>
-      </div>
-    );
-  },
-  ...src(`<FileUpload onFilesAdded={(f) => setFile(f[0] ?? null)} multiple={false} accept="image/*">
-  <FileUploadTrigger class="...">Choose image</FileUploadTrigger>
-  <FileUploadContent>
-    <p>Drop an image here</p>
-  </FileUploadContent>
-</FileUpload>`),
-};

package/src/components/image.stories.tsx

@@ -1,89 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { Image } from './image';
-import { componentDescription } from '../stories/docs/element-controls';
-
-// Compact SVG chat typing icon as base64
-const chatIconBase64 =
-  'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSIxMCIgZmlsbD0iIzdjM2FlZCIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMjQiIHI9IjQiIGZpbGw9IiNmZmYiLz48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSI0IiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iMzIiIGN5PSIyNCIgcj0iNCIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/Image',
-  component: Image,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'Renders an image from a `base64` string or a `uint8Array`, building a data URL or object URL automatically; shows a pulsing placeholder until a source is available.',
-        '**When to use:** to display model-generated or attached images supplied as raw bytes / base64 (the `GeneratedImageLike` shape) rather than a remote URL.',
-        '**How to use:** pass `base64` + `mediaType` (or `uint8Array` + `mediaType`) and an `alt` description; size and style via `class`.',
-        '**Placement:** inside assistant messages, attachment previews, or anywhere a generated image needs to be shown.',
-      ]),
-    },
-  },
-  argTypes: {
-    base64: {
-      control: 'text',
-      description: 'Base64-encoded image data. Combined with `mediaType` to form a data URL.',
-    },
-    uint8Array: {
-      control: 'object',
-      description: 'Raw image bytes. Combined with `mediaType` to form an object URL.',
-    },
-    mediaType: {
-      control: 'text',
-      description: 'MIME type of the image data, e.g. `image/png` or `image/svg+xml`.',
-      table: { defaultValue: { summary: 'image/png' } },
-    },
-    alt: {
-      control: 'text',
-      description: 'Alternative text describing the image (also used on the placeholder).',
-    },
-    class: {
-      control: 'text',
-      description: 'Additional CSS classes for the image / placeholder element.',
-    },
-  },
-  args: {
-    base64: chatIconBase64,
-    mediaType: 'image/svg+xml',
-    alt: 'Compact gradient chat icon',
-    class: 'h-24 w-24 rounded-md',
-  },
-  render: (args) => <Image {...args} />,
-} satisfies Meta<typeof Image>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Image } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — swap the base64 data, media type, and sizing classes. */
-export const Playground: Story = {
-  ...src(`<Image
-  base64={chatIconBase64}
-  mediaType="image/svg+xml"
-  alt="Compact gradient chat icon"
-  class="h-24 w-24 rounded-md"
-/>`),
-};
-
-export const Basic: Story = {
-  args: { class: 'h-24 w-24 rounded-md' },
-  ...src(`<Image base64={chatIconBase64} mediaType="image/svg+xml" alt="Compact gradient chat icon" class="h-24 w-24 rounded-md" />`),
-};
-
-export const CustomSize: Story = {
-  args: { alt: 'Large preview', class: 'h-64 w-64 rounded-lg' },
-  ...src(`<Image base64={chatIconBase64} mediaType="image/svg+xml" alt="Large preview" class="h-64 w-64 rounded-lg" />`),
-};
-
-/** Placeholder state shown while no `base64`/`uint8Array` source is available (showcase). */
-export const Placeholder: Story = {
-  render: () => <Image alt="Loading image" class="h-24 w-24 rounded-md" />,
-  ...src(`<Image alt="Loading image" class="h-24 w-24 rounded-md" />`),
-};

package/src/components/loader.stories.tsx

@@ -1,181 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { For } from 'solid-js';
-import { Loader, type LoaderVariant, type LoaderSize } from './loader';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/Loader',
-  component: Loader,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A loading indicator with twelve animated **variants** (spinners, dots, bars, terminal, and text-based) in three **sizes**.',
-        '**When to use:** while waiting on an async operation — a streaming response, a tool call, or any pending state.',
-        '**How to use:** pick a `variant` and `size`. Text variants (`text-blink`, `text-shimmer`, `loading-dots`) display the `text` prop (defaults to "Thinking").',
-        '**Placement:** inside assistant message bubbles, send-button states, empty states, or anywhere an in-progress signal is needed.',
-      ]),
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: [
-        'circular', 'classic', 'pulse', 'pulse-dot', 'dots', 'typing',
-        'wave', 'bars', 'terminal', 'text-blink', 'text-shimmer', 'loading-dots',
-      ],
-      description: 'Animation style of the loader.',
-      table: { defaultValue: { summary: 'circular' } },
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Loader size preset.',
-      table: { defaultValue: { summary: 'md' } },
-    },
-    text: {
-      control: 'text',
-      description: 'Label shown by the text variants (`text-blink`, `text-shimmer`, `loading-dots`).',
-      table: { defaultValue: { summary: 'Thinking' } },
-    },
-    class: {
-      control: 'text',
-      description: 'Additional CSS classes for the loader element.',
-    },
-  },
-  args: {
-    variant: 'circular',
-    size: 'md',
-    text: 'Thinking',
-  },
-  render: (args) => <Loader {...args} />,
-} satisfies Meta<typeof Loader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Loader } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — switch variant, size, and text to explore every loader. */
-export const Playground: Story = {
-  ...src(`<Loader variant="circular" size="md" />`),
-};
-
-export const Classic: Story = {
-  args: { variant: 'classic' },
-  ...src(`<Loader variant="classic" size="md" />`),
-};
-
-export const Pulse: Story = {
-  args: { variant: 'pulse' },
-  ...src(`<Loader variant="pulse" size="md" />`),
-};
-
-export const PulseDot: Story = {
-  args: { variant: 'pulse-dot' },
-  ...src(`<Loader variant="pulse-dot" size="md" />`),
-};
-
-export const Dots: Story = {
-  args: { variant: 'dots' },
-  ...src(`<Loader variant="dots" size="md" />`),
-};
-
-export const Typing: Story = {
-  args: { variant: 'typing' },
-  ...src(`<Loader variant="typing" size="md" />`),
-};
-
-export const Wave: Story = {
-  args: { variant: 'wave' },
-  ...src(`<Loader variant="wave" size="md" />`),
-};
-
-export const Bars: Story = {
-  args: { variant: 'bars' },
-  ...src(`<Loader variant="bars" size="md" />`),
-};
-
-export const Terminal: Story = {
-  args: { variant: 'terminal' },
-  ...src(`<Loader variant="terminal" size="md" />`),
-};
-
-export const TextBlink: Story = {
-  args: { variant: 'text-blink', text: 'Thinking' },
-  ...src(`<Loader variant="text-blink" text="Thinking" size="md" />`),
-};
-
-export const TextShimmer: Story = {
-  args: { variant: 'text-shimmer', text: 'Analyzing' },
-  ...src(`<Loader variant="text-shimmer" text="Analyzing" size="md" />`),
-};
-
-export const LoadingDots: Story = {
-  args: { variant: 'loading-dots', text: 'Processing' },
-  ...src(`<Loader variant="loading-dots" text="Processing" size="md" />`),
-};
-
-const allVariants: LoaderVariant[] = [
-  'circular', 'classic', 'pulse', 'pulse-dot', 'dots', 'typing',
-  'wave', 'bars', 'terminal', 'text-blink', 'text-shimmer', 'loading-dots',
-];
-
-const allSizes: LoaderSize[] = ['sm', 'md', 'lg'];
-
-/** Every variant across every size (showcase — not driven by controls). */
-export const AllVariantsGrid: Story = {
-  render: () => (
-    <div class="space-y-6">
-      <For each={allVariants}>
-        {(variant) => (
-          <div class="flex items-center gap-6">
-            <span class="w-28 text-sm text-muted-foreground font-mono">{variant}</span>
-            <For each={allSizes}>
-              {(size) => (
-                <div class="flex items-center justify-center w-24 h-10">
-                  <Loader
-                    variant={variant}
-                    size={size}
-                    text={['text-blink', 'text-shimmer', 'loading-dots'].includes(variant) ? 'Loading' : undefined}
-                  />
-                </div>
-              )}
-            </For>
-          </div>
-        )}
-      </For>
-    </div>
-  ),
-  ...src(`<Loader variant="circular" size="sm" />
-<Loader variant="circular" size="md" />
-<Loader variant="circular" size="lg" />`),
-};
-
-/** A single variant rendered at all three sizes (showcase). */
-export const AllSizes: Story = {
-  render: () => (
-    <div class="flex items-end gap-6">
-      <div class="text-center space-y-2">
-        <Loader variant="circular" size="sm" />
-        <p class="text-xs text-muted-foreground">Small</p>
-      </div>
-      <div class="text-center space-y-2">
-        <Loader variant="circular" size="md" />
-        <p class="text-xs text-muted-foreground">Medium</p>
-      </div>
-      <div class="text-center space-y-2">
-        <Loader variant="circular" size="lg" />
-        <p class="text-xs text-muted-foreground">Large</p>
-      </div>
-    </div>
-  ),
-  ...src(`<Loader variant="circular" size="sm" />
-<Loader variant="circular" size="md" />
-<Loader variant="circular" size="lg" />`),
-};

package/src/components/markdown.stories.tsx

@@ -1,180 +0,0 @@
-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} />`),
-};