@kitnai/chat 0.1.0

package/src/ui/badge.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Badge } from './badge';
+
+const meta = {
+  title: 'UI/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: {
+        component: [
+          'A compact pill **badge** for short status text, counts, or citation markers, rendered as an inline `<span>`.',
+          '**When to use:** to annotate a count (unread, results), tag a status/label, or mark an inline source citation in assistant output.',
+          '**How to use:** choose a `variant` (`default` label, `count` numeric pill, `citation` clickable source marker) and pass the text or number as children.',
+          '**Placement:** inline with message text (citations), next to titles or list items (labels), and on toolbar/icon buttons (counts).',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'count', 'citation'],
+      description: 'Visual style: neutral label, numeric count pill, or clickable citation marker.',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    children: {
+      control: 'text',
+      description: 'Badge content — short text or a number.',
+    },
+  },
+  args: {
+    variant: 'default',
+    children: 'Default badge',
+  },
+  render: (args) => <Badge {...args} />,
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Badge } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — switch the variant and edit the content. */
+export const Playground: Story = {
+  ...src(`<Badge variant="default">Default badge</Badge>`),
+};
+
+export const Default: Story = {
+  args: { variant: 'default', children: 'Default badge' },
+  ...src(`<Badge variant="default">Default badge</Badge>`),
+};
+
+export const Count: Story = {
+  args: { variant: 'count', children: '12' },
+  ...src(`<Badge variant="count">12</Badge>`),
+};
+
+export const Citation: Story = {
+  args: { variant: 'citation', children: '1' },
+  ...src(`<Badge variant="citation">1</Badge>`),
+};
+
+/** All variants side by side (showcase — not driven by controls). */
+export const AllVariants: Story = {
+  render: () => (
+    <div class="flex items-center gap-3">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="count">5</Badge>
+      <Badge variant="citation">1</Badge>
+      <Badge variant="citation">2</Badge>
+      <Badge variant="citation">3</Badge>
+    </div>
+  ),
+  ...src(`<div class="flex items-center gap-3">
+  <Badge variant="default">Default</Badge>
+  <Badge variant="count">5</Badge>
+  <Badge variant="citation">1</Badge>
+  <Badge variant="citation">2</Badge>
+  <Badge variant="citation">3</Badge>
+</div>`),
+};

package/src/ui/badge.tsx

@@ -0,0 +1,21 @@
+import { type JSX, splitProps } from 'solid-js';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const badgeVariants = cva('inline-flex items-center justify-center rounded-full text-xs font-medium min-h-5 min-w-5', {
+  variants: {
+    variant: {
+      default: 'bg-muted text-muted-foreground px-2 py-0.5',
+      count: 'bg-muted text-muted-foreground h-5 px-1.5',
+      citation: 'bg-primary text-primary-foreground px-1.5 py-0.5 cursor-pointer',
+    },
+  },
+  defaultVariants: { variant: 'default' },
+});
+
+export interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
+
+export function Badge(props: BadgeProps) {
+  const [local, rest] = splitProps(props, ['variant', 'class', 'children']);
+  return <span class={cn(badgeVariants({ variant: local.variant }), local.class)} {...rest}>{local.children}</span>;
+}

package/src/ui/button.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { Button } from './button';
+
+/**
+ * Convention exemplar — every component story should follow this shape:
+ * `component`, a description, `argTypes` (controls), `args` (defaults incl.
+ * `fn()` for events), a `Playground` story rendered from args, plus showcase
+ * stories for notable variations.
+ */
+const meta = {
+  title: 'UI/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A clickable button with style **variants** and **sizes**, built on a native `<button>` (all standard button attributes pass through).',
+          '**When to use:** any user-triggered action — submitting input, toolbar/icon actions, confirming or dismissing. Use `default` for the primary action, `ghost`/`outline` for secondary or low-emphasis actions.',
+          '**How to use:** set `variant` and `size`, pass label or an icon as children, and wire `onClick`. For icon-only buttons use `size="icon"` / `"icon-sm"` and include an `aria-label`.',
+          '**Placement:** prompt action bars, message action rows, dialogs, toolbars, and empty-state CTAs.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'ghost', 'outline'],
+      description: 'Visual emphasis of the button.',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'icon', 'icon-sm'],
+      description: 'Height/padding preset. `icon` / `icon-sm` are square for icon-only buttons.',
+      table: { defaultValue: { summary: 'md' } },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables interaction and dims the button.',
+    },
+    children: {
+      control: 'text',
+      description: 'Button content — text or an icon element.',
+    },
+    onClick: {
+      action: 'click',
+      description: 'Fired when the button is clicked.',
+      table: { category: 'Events' },
+    },
+  },
+  args: {
+    variant: 'default',
+    size: 'md',
+    disabled: false,
+    children: 'Click me',
+    onClick: fn(),
+  },
+  render: (args) => <Button {...args} />,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Attach a clean, copy-paste-ready SolidJS snippet to a story. SolidJS stories
+ * can't auto-serialize an args-spread render (it shows `{}`), so we provide real
+ * usage code (with the import line, so it's truly paste-ready) that the docs
+ * "Show code" / "Copy code" buttons surface. `language: 'tsx'` labels it as SolidJS.
+ *
+ * Note: `Button` is a SolidJS *component* (a scoped import), not a global custom
+ * element, so the unprefixed name can't conflict with anything — alias on import
+ * if a host already has a `Button`. Only the web components (`<kitn-chat>`, …)
+ * are prefixed, because those claim global custom-element tag names.
+ */
+const IMPORT = `import { Button } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — tweak the controls to explore every combination. */
+export const Playground: Story = {
+  ...src(`<Button variant="default" size="md" onClick={() => {}}>Click me</Button>`),
+};
+
+export const Ghost: Story = {
+  args: { variant: 'ghost', children: 'Ghost' },
+  ...src(`<Button variant="ghost">Ghost</Button>`),
+};
+
+export const Outline: Story = {
+  args: { variant: 'outline', children: 'Outline' },
+  ...src(`<Button variant="outline">Outline</Button>`),
+};
+
+export const Small: Story = {
+  args: { size: 'sm', children: 'Small' },
+  ...src(`<Button size="sm">Small</Button>`),
+};
+
+export const Large: Story = {
+  args: { size: 'lg', children: 'Large' },
+  ...src(`<Button size="lg">Large</Button>`),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, children: 'Disabled' },
+  ...src(`<Button disabled>Disabled</Button>`),
+};
+
+const PlusIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
+
+export const Icon: Story = {
+  args: { size: 'icon', children: <PlusIcon />, 'aria-label': 'Add' } as never,
+  ...src(`<Button size="icon" aria-label="Add">\n  <PlusIcon />\n</Button>`),
+};
+
+/** All variants and sizes side by side (showcase — not driven by controls). */
+export const AllVariants: Story = {
+  render: () => (
+    <div class="flex flex-wrap items-center gap-3">
+      <Button variant="default">Default</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="default" size="sm">Small</Button>
+      <Button variant="default" size="lg">Large</Button>
+      <Button variant="default" size="icon" aria-label="Add"><PlusIcon /></Button>
+    </div>
+  ),
+  ...src(`<div class="flex flex-wrap items-center gap-3">
+  <Button variant="default">Default</Button>
+  <Button variant="ghost">Ghost</Button>
+  <Button variant="outline">Outline</Button>
+  <Button size="sm">Small</Button>
+  <Button size="lg">Large</Button>
+  <Button size="icon" aria-label="Add"><PlusIcon /></Button>
+</div>`),
+};

package/src/ui/button.tsx

@@ -0,0 +1,37 @@
+import { type JSX, splitProps } from 'solid-js';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        ghost: 'hover:bg-muted text-foreground',
+        outline: 'bg-muted/50 text-foreground hover:bg-muted',
+      },
+      size: {
+        sm: 'h-8 px-3 text-xs rounded-md',
+        md: 'h-9 px-4 text-sm',
+        lg: 'h-10 px-6 text-sm',
+        icon: 'h-9 w-9',
+        'icon-sm': 'h-7 w-7',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'md' },
+  }
+);
+
+export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
+
+export function Button(props: ButtonProps) {
+  const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children']);
+  return (
+    <button class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)} {...rest}>
+      {local.children}
+    </button>
+  );
+}
+
+export { buttonVariants };

package/src/ui/collapsible.tsx

@@ -0,0 +1,14 @@
+import { Collapsible as KCollapsible } from '@kobalte/core/collapsible';
+import { type JSX } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export const Collapsible = KCollapsible;
+export const CollapsibleTrigger = KCollapsible.Trigger;
+
+export function CollapsibleContent(props: { children: JSX.Element; class?: string }) {
+  return (
+    <KCollapsible.Content class={cn('overflow-hidden', props.class)}>
+      {props.children}
+    </KCollapsible.Content>
+  );
+}

package/src/ui/dialog.tsx

@@ -0,0 +1,21 @@
+import { Dialog as KDialog } from '@kobalte/core/dialog';
+import { type JSX } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useChatConfig } from '../primitives/chat-config';
+
+export const Dialog = KDialog;
+export const DialogTrigger = KDialog.Trigger;
+
+export function DialogContent(props: { children: JSX.Element; class?: string; title: string }) {
+  const config = useChatConfig();
+  return (
+    <KDialog.Portal mount={config.portalMount()}>
+      <KDialog.Overlay class="fixed inset-0 z-50 bg-black/50 animate-in fade-in-0" />
+      <KDialog.Content class={cn('fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-xl bg-card p-6 shadow-xl animate-in fade-in-0 zoom-in-95 w-full max-w-md', props.class)}>
+        <KDialog.Title class="text-lg font-semibold">{props.title}</KDialog.Title>
+        {props.children}
+        <KDialog.CloseButton class="absolute right-4 top-4 text-muted-foreground hover:text-foreground" />
+      </KDialog.Content>
+    </KDialog.Portal>
+  );
+}

package/src/ui/dropdown.tsx

@@ -0,0 +1,26 @@
+import { DropdownMenu as KDropdown } from '@kobalte/core/dropdown-menu';
+import { type JSX } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useChatConfig } from '../primitives/chat-config';
+
+export const Dropdown = KDropdown;
+export const DropdownTrigger = KDropdown.Trigger;
+
+export function DropdownContent(props: { children: JSX.Element; class?: string }) {
+  const config = useChatConfig();
+  return (
+    <KDropdown.Portal mount={config.portalMount()}>
+      <KDropdown.Content class={cn('z-50 min-w-[8rem] rounded-lg bg-card p-1 shadow-lg animate-in fade-in-0 zoom-in-95', props.class)}>
+        {props.children}
+      </KDropdown.Content>
+    </KDropdown.Portal>
+  );
+}
+
+export function DropdownItem(props: { children: JSX.Element; class?: string; onSelect?: () => void; }) {
+  return (
+    <KDropdown.Item class={cn('flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm outline-none hover:bg-muted transition-colors', props.class)} onSelect={props.onSelect}>
+      {props.children}
+    </KDropdown.Item>
+  );
+}

package/src/ui/hover-card.tsx

@@ -0,0 +1,48 @@
+import { HoverCard as KHoverCard } from '@kobalte/core/hover-card';
+import { type JSX, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useChatConfig } from '../primitives/chat-config';
+
+export interface HoverCardProps { trigger: JSX.Element; children: JSX.Element; class?: string; openDelay?: number; closeDelay?: number; }
+
+export function HoverCard(props: HoverCardProps) {
+  const [local] = splitProps(props, ['trigger', 'children', 'class', 'openDelay', 'closeDelay']);
+  const config = useChatConfig();
+  return (
+    <KHoverCard openDelay={local.openDelay} closeDelay={local.closeDelay}>
+      <KHoverCard.Trigger as="span">{local.trigger}</KHoverCard.Trigger>
+      <KHoverCard.Portal mount={config.portalMount()}>
+        <KHoverCard.Content class={cn('z-50 w-64 rounded-lg bg-card p-4 shadow-lg animate-in fade-in-0 zoom-in-95', local.class)}>
+          <KHoverCard.Arrow />
+          {local.children}
+        </KHoverCard.Content>
+      </KHoverCard.Portal>
+    </KHoverCard>
+  );
+}
+
+// Compound primitives for custom layouts (e.g. Source component)
+export interface HoverCardRootProps { children: JSX.Element; openDelay?: number; closeDelay?: number; }
+
+export function HoverCardRoot(props: HoverCardRootProps) {
+  return <KHoverCard openDelay={props.openDelay} closeDelay={props.closeDelay}>{props.children}</KHoverCard>;
+}
+
+export interface HoverCardTriggerProps { children: JSX.Element; }
+
+export function HoverCardTrigger(props: HoverCardTriggerProps) {
+  return <KHoverCard.Trigger as="span">{props.children}</KHoverCard.Trigger>;
+}
+
+export interface HoverCardContentProps { children: JSX.Element; class?: string; }
+
+export function HoverCardContent(props: HoverCardContentProps) {
+  const config = useChatConfig();
+  return (
+    <KHoverCard.Portal mount={config.portalMount()}>
+      <KHoverCard.Content class={cn('z-50 rounded-lg bg-card shadow-lg animate-in fade-in-0 zoom-in-95', props.class)}>
+        {props.children}
+      </KHoverCard.Content>
+    </KHoverCard.Portal>
+  );
+}

package/src/ui/resizable.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './resizable';
+
+const meta = {
+  title: 'UI/Resizable',
+  component: ResizablePanelGroup,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: {
+        component: [
+          'A **resizable split layout**: `ResizablePanelGroup` lays out `ResizablePanel` children along an axis, divided by a draggable `ResizableHandle`.',
+          '**When to use:** to let users adjust the relative size of two or more regions — e.g. a collapsible sidebar next to the main chat, or a chat pane next to an inspector.',
+          '**How to use:** wrap panels in `ResizablePanelGroup` and set `orientation` (`horizontal` row / `vertical` column). Give panels a `defaultSize` (percent) and optional `minSize`/`maxSize`; min/max are read from `data-min-size`/`data-max-size` attributes at drag time. Place a `ResizableHandle` (add `withHandle` for a visible grip) between panels. The group needs a sized container (height/width).',
+          '**Placement:** app shells — sidebar + conversation, conversation + context/inspector panels, or stacked editor/preview regions.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Axis the panels are laid out along.',
+      table: { defaultValue: { summary: 'horizontal' } },
+    },
+  },
+  args: {
+    orientation: 'horizontal',
+  },
+  render: (args) => (
+    <div class="h-48 w-full max-w-2xl rounded-lg border border-border overflow-hidden">
+      <ResizablePanelGroup {...args}>
+        <ResizablePanel defaultSize={30} data-min-size="100" data-max-size="400">
+          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
+            <span class="text-sm text-muted-foreground">Sidebar</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel>
+          <div class="flex h-full items-center justify-center p-4">
+            <span class="text-sm text-muted-foreground">Content</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+} satisfies Meta<typeof ResizablePanelGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — flip the orientation, then drag the handle. */
+export const Playground: Story = {
+  ...src(`<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel defaultSize={30} data-min-size="100" data-max-size="400">
+    Sidebar
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel>Content</ResizablePanel>
+</ResizablePanelGroup>`),
+};
+
+export const Horizontal: Story = {
+  args: { orientation: 'horizontal' },
+  ...src(`<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel defaultSize={30} data-min-size="100" data-max-size="400">
+    Sidebar
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel>Content</ResizablePanel>
+</ResizablePanelGroup>`),
+};
+
+/** Stacked top/bottom split (showcase). */
+export const Vertical: Story = {
+  render: () => (
+    <div class="h-96 w-full max-w-md rounded-lg border border-border overflow-hidden">
+      <ResizablePanelGroup orientation="vertical">
+        <ResizablePanel defaultSize={40} data-min-size="60" data-max-size="300">
+          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
+            <span class="text-sm text-muted-foreground">Top</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel>
+          <div class="flex h-full items-center justify-center p-4">
+            <span class="text-sm text-muted-foreground">Bottom</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+  ...src(`<ResizablePanelGroup orientation="vertical">
+  <ResizablePanel defaultSize={40} data-min-size="60" data-max-size="300">
+    Top
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel>Bottom</ResizablePanel>
+</ResizablePanelGroup>`),
+};
+
+/** Three panels with two handles (showcase). */
+export const ThreePanels: Story = {
+  name: 'Three Panels',
+  render: () => (
+    <div class="h-48 w-full max-w-2xl rounded-lg border border-border overflow-hidden">
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel defaultSize={25} data-min-size="80" data-max-size="300">
+          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
+            <span class="text-sm text-muted-foreground">Left</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel>
+          <div class="flex h-full items-center justify-center p-4">
+            <span class="text-sm text-muted-foreground">Center</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={25} data-min-size="80" data-max-size="300">
+          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
+            <span class="text-sm text-muted-foreground">Right</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+  ...src(`<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel defaultSize={25} data-min-size="80" data-max-size="300">Left</ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel>Center</ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel defaultSize={25} data-min-size="80" data-max-size="300">Right</ResizablePanel>
+</ResizablePanelGroup>`),
+};
+
+/** Handle without a visible grip; reports drag deltas via `onPanelResize` (showcase). */
+export const NoHandle: Story = {
+  name: 'Without Handle',
+  render: () => (
+    <div class="h-48 w-full max-w-2xl rounded-lg border border-border overflow-hidden">
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel defaultSize={40}>
+          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
+            <span class="text-sm text-muted-foreground">Panel A</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle onPanelResize={fn()} />
+        <ResizablePanel>
+          <div class="flex h-full items-center justify-center p-4">
+            <span class="text-sm text-muted-foreground">Panel B</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+  ...src(`<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel defaultSize={40}>Panel A</ResizablePanel>
+  <ResizableHandle onPanelResize={(delta) => console.log(delta)} />
+  <ResizablePanel>Panel B</ResizablePanel>
+</ResizablePanelGroup>`),
+};