@kitnai/chat 0.6.0 → 0.8.0

package/src/ui/scroll-area.tsx

@@ -6,7 +6,9 @@ export interface ScrollAreaProps extends JSX.HTMLAttributes<HTMLDivElement> { ch
 export function ScrollArea(props: ScrollAreaProps) {
   const [local, rest] = splitProps(props, ['children', 'class']);
   return (
-    <div class={cn('overflow-y-auto scrollbar-thin', local.class)} {...rest}>
+    // tabindex=0 keeps the scroll region reachable by keyboard when it has no
+    // focusable descendants (WCAG 2.1.1 — axe `scrollable-region-focusable`).
+    <div tabindex={0} class={cn('overflow-y-auto scrollbar-thin', local.class)} {...rest}>
       {local.children}
     </div>
   );

package/src/ui/separator.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { Separator } from './separator';
+import { componentDescription } from '../stories/docs/element-controls';
 
 const meta = {
   title: 'UI/Separator',
@@ -9,14 +10,12 @@ const meta = {
     layout: 'padded',
     docs: {
       controls: { exclude: ['use:eventListener'] },
-      description: {
-        component: [
-          'A thin **divider** line (a `role="separator"` element) that visually splits content either horizontally or vertically.',
-          '**When to use:** to separate stacked sections, group items in a menu/list, or divide inline controls in a toolbar.',
-          '**How to use:** set `orientation` to `horizontal` (full-width line) or `vertical` (full-height line). For a vertical separator, give the parent a height so the line has something to fill.',
-          '**Placement:** between message groups, in dropdown/menu sections, header toolbars, and between sidebar regions.',
-        ].join('\n\n'),
-      },
+      description: componentDescription([
+        'A thin **divider** line (a `role="separator"` element) that visually splits content either horizontally or vertically.',
+        '**When to use:** to separate stacked sections, group items in a menu/list, or divide inline controls in a toolbar.',
+        '**How to use:** set `orientation` to `horizontal` (full-width line) or `vertical` (full-height line). For a vertical separator, give the parent a height so the line has something to fill.',
+        '**Placement:** between message groups, in dropdown/menu sections, header toolbars, and between sidebar regions.',
+      ]),
     },
   },
   argTypes: {

package/src/ui/skeleton.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { Skeleton } from './skeleton';
+import { componentDescription } from '../stories/docs/element-controls';
 
 const meta = {
   title: 'UI/Skeleton',
@@ -9,14 +10,12 @@ const meta = {
     layout: 'padded',
     docs: {
       controls: { exclude: ['use:eventListener'] },
-      description: {
-        component: [
-          'A pulsing **placeholder** block used to indicate loading content. It has no shape of its own — size and rounding come from the `class` you pass.',
-          '**When to use:** while content (messages, lists, cards, tool output) is loading, to preserve layout and signal progress without a spinner.',
-          '**How to use:** compose one or more `Skeleton` elements and set width/height/rounding via utility classes (e.g. `class="h-4 w-3/4"`). Build skeletons that mirror the real layout they replace.',
-          '**Placement:** message bubbles, conversation lists, code blocks, tool calls, input areas, and full-page loading states.',
-        ].join('\n\n'),
-      },
+      description: componentDescription([
+        'A pulsing **placeholder** block used to indicate loading content. It has no shape of its own — size and rounding come from the `class` you pass.',
+        '**When to use:** while content (messages, lists, cards, tool output) is loading, to preserve layout and signal progress without a spinner.',
+        '**How to use:** compose one or more `Skeleton` elements and set width/height/rounding via utility classes (e.g. `class="h-4 w-3/4"`). Build skeletons that mirror the real layout they replace.',
+        '**Placement:** message bubbles, conversation lists, code blocks, tool calls, input areas, and full-page loading states.',
+      ]),
     },
   },
   argTypes: {

package/src/ui/textarea.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import type { JSX } from 'solid-js';
 import { Textarea } from './textarea';
+import { componentDescription } from '../stories/docs/element-controls';
 
 const meta = {
   title: 'UI/Textarea',
@@ -9,13 +10,11 @@ const meta = {
   parameters: {
     layout: 'padded',
     docs: {
-      description: {
-        component: [
-          'A single-line-by-default textarea that auto-grows with its content up to an optional `maxHeight`, after which it scrolls. It is **transparent and borderless by design** — it is meant to drop into a composed input frame that owns the visual boundary and focus ring (the demos below wrap it exactly the way `PromptInput` / `<kitn-prompt-input>` does, with `focus-within` on the frame). This is the editable surface behind `PromptInput`.',
-          '**When to use:** free-text entry that may span multiple lines — a chat composer, a comment box, an editable note.',
-          '**How to use:** drop it inside a framed container and use it like a native `<textarea>` (`value`, `placeholder`, `onInput`, …). Auto-resize is on by default; set `maxHeight` (px) to cap growth, or `autoResize={false}` for a fixed-height field.',
-        ].join('\n\n'),
-      },
+      description: componentDescription([
+        'A single-line-by-default textarea that auto-grows with its content up to an optional `maxHeight`, after which it scrolls. It is **transparent and borderless by design** — it is meant to drop into a composed input frame that owns the visual boundary and focus ring (the demos below wrap it exactly the way `PromptInput` / `<kc-prompt-input>` does, with `focus-within` on the frame). This is the editable surface behind `PromptInput`.',
+        '**When to use:** free-text entry that may span multiple lines — a chat composer, a comment box, an editable note.',
+        '**How to use:** drop it inside a framed container and use it like a native `<textarea>` (`value`, `placeholder`, `onInput`, …). Auto-resize is on by default; set `maxHeight` (px) to cap growth, or `autoResize={false}` for a fixed-height field.',
+      ]),
     },
   },
   argTypes: {

package/src/ui/tooltip.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { Tooltip } from './tooltip';
 import { Button } from './button';
+import { componentDescription } from '../stories/docs/element-controls';
 
 const meta = {
   title: 'UI/Tooltip',
@@ -9,14 +10,12 @@ const meta = {
   parameters: {
     layout: 'padded',
     docs: {
-      description: {
-        component: [
-          'A small floating label that appears on hover/focus of its trigger element, built with a DIY overlay-core implementation (no third-party dependency, no arrow).',
-          '**When to use:** to clarify the purpose of icon-only buttons or terse controls — short, supplementary hints that are not essential to complete the action.',
-          '**How to use:** wrap a single interactive `children` element and set `content` to the hint text. The child becomes the trigger.',
-          '**Placement:** toolbars, message action rows, and any compact icon control where a label would not otherwise fit.',
-        ].join('\n\n'),
-      },
+      description: componentDescription([
+        'A small floating label that appears on hover/focus of its trigger element, built with a DIY overlay-core implementation (no third-party dependency, no arrow).',
+        '**When to use:** to clarify the purpose of icon-only buttons or terse controls — short, supplementary hints that are not essential to complete the action.',
+        '**How to use:** wrap a single interactive `children` element and set `content` to the hint text. The child becomes the trigger.',
+        '**Placement:** toolbars, message action rows, and any compact icon control where a label would not otherwise fit.',
+      ]),
       controls: { exclude: ['use:eventListener'] },
     },
   },
@@ -59,7 +58,7 @@ export const Playground: Story = {
 export const OnIconButton: Story = {
   render: () => (
     <Tooltip content="Add new item">
-      <Button variant="ghost" size="icon-sm">
+      <Button variant="ghost" size="icon-sm" aria-label="Add new item">
         <svg width="14" height="14" 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" />

package/theme.css

@@ -9,51 +9,51 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --color-background: var(--kitn-color-background, hsl(0 0% 100%));
-  --color-foreground: var(--kitn-color-foreground, hsl(240 10% 3.9%));
-  --color-card: var(--kitn-color-card, hsl(0 0% 100%));
-  --color-card-foreground: var(--kitn-color-card-foreground, hsl(240 10% 3.9%));
-  --color-popover: var(--kitn-color-popover, hsl(0 0% 100%));
-  --color-popover-foreground: var(--kitn-color-popover-foreground, hsl(240 10% 3.9%));
-  --color-primary: var(--kitn-color-primary, hsl(240 5.9% 10%));
-  --color-primary-foreground: var(--kitn-color-primary-foreground, hsl(0 0% 98%));
-  --color-secondary: var(--kitn-color-secondary, hsl(240 4.8% 95.9%));
-  --color-secondary-foreground: var(--kitn-color-secondary-foreground, hsl(240 5.9% 10%));
-  --color-muted: var(--kitn-color-muted, hsl(240 4.8% 95.9%));
-  --color-muted-foreground: var(--kitn-color-muted-foreground, hsl(240 3.8% 43%));
-  --color-accent: var(--kitn-color-accent, hsl(240 4.8% 95.9%));
-  --color-accent-foreground: var(--kitn-color-accent-foreground, hsl(240 5.9% 10%));
-  --color-destructive: var(--kitn-color-destructive, hsl(0 84.2% 60.2%));
-  --color-destructive-foreground: var(--kitn-color-destructive-foreground, hsl(0 0% 98%));
-  --color-border: var(--kitn-color-border, hsl(240 5.9% 90%));
-  --color-input: var(--kitn-color-input, hsl(240 5.9% 90%));
+  --color-background: var(--kc-color-background, hsl(0 0% 100%));
+  --color-foreground: var(--kc-color-foreground, hsl(240 10% 3.9%));
+  --color-card: var(--kc-color-card, hsl(0 0% 100%));
+  --color-card-foreground: var(--kc-color-card-foreground, hsl(240 10% 3.9%));
+  --color-popover: var(--kc-color-popover, hsl(0 0% 100%));
+  --color-popover-foreground: var(--kc-color-popover-foreground, hsl(240 10% 3.9%));
+  --color-primary: var(--kc-color-primary, hsl(240 5.9% 10%));
+  --color-primary-foreground: var(--kc-color-primary-foreground, hsl(0 0% 98%));
+  --color-secondary: var(--kc-color-secondary, hsl(240 4.8% 95.9%));
+  --color-secondary-foreground: var(--kc-color-secondary-foreground, hsl(240 5.9% 10%));
+  --color-muted: var(--kc-color-muted, hsl(240 4.8% 95.9%));
+  --color-muted-foreground: var(--kc-color-muted-foreground, hsl(240 3.8% 43%));
+  --color-accent: var(--kc-color-accent, hsl(240 4.8% 95.9%));
+  --color-accent-foreground: var(--kc-color-accent-foreground, hsl(240 5.9% 10%));
+  --color-destructive: var(--kc-color-destructive, hsl(0 72% 45%));
+  --color-destructive-foreground: var(--kc-color-destructive-foreground, hsl(0 0% 98%));
+  --color-border: var(--kc-color-border, hsl(240 5.9% 90%));
+  --color-input: var(--kc-color-input, hsl(240 5.9% 90%));
   /* Focus ring — a deliberate blue (not a neutral) so keyboard focus is always
      obvious and on-brand in both modes. Light uses a strong blue; dark uses a
      brighter one for contrast on dark surfaces. Both clear WCAG 2.1 non-text
-     contrast (≥3:1) against the kit's backgrounds. Override via --kitn-color-ring. */
-  --color-ring: var(--kitn-color-ring, hsl(217 91% 53%));
+     contrast (≥3:1) against the kit's backgrounds. Override via --kc-color-ring. */
+  --color-ring: var(--kc-color-ring, hsl(217 91% 53%));
   /* Custom scrollbars — thin, rounded, subtle; thumb strengthens on hover. A
      consistent cross-platform look (the kit styles its OWN scroll regions inside
      the shadow root; the track stays transparent so nothing is forced where no
-     scrollbar is needed). Override via --kitn-color-scrollbar-thumb(-hover). */
-  --color-scrollbar-thumb: var(--kitn-color-scrollbar-thumb, hsl(240 5% 80%));
-  --color-scrollbar-thumb-hover: var(--kitn-color-scrollbar-thumb-hover, hsl(240 4% 64%));
-  --color-sidebar: var(--kitn-color-sidebar, hsl(0 0% 100%));
+     scrollbar is needed). Override via --kc-color-scrollbar-thumb(-hover). */
+  --color-scrollbar-thumb: var(--kc-color-scrollbar-thumb, hsl(240 5% 80%));
+  --color-scrollbar-thumb-hover: var(--kc-color-scrollbar-thumb-hover, hsl(240 4% 64%));
+  --color-sidebar: var(--kc-color-sidebar, hsl(0 0% 100%));
 
   /* Inline `code` accent. Blue text on a translucent blue chip. */
-  --color-code-foreground: var(--kitn-color-code-foreground, hsl(224.3 76.3% 48%));
+  --color-code-foreground: var(--kc-color-code-foreground, hsl(224.3 76.3% 48%));
 
   /* Tool/status chip hues. Each chip is hue text over a 15% translucent fill of
      the SAME hue (set in tool.tsx). The bare hue is too light to reach WCAG AA
      (4.5:1) on the faint fill in LIGHT mode, so the light values are darkened;
      dark mode keeps brighter hues for AA on the dark fill. Override via
-     --kitn-color-tool-* to retheme. */
-  --color-tool-blue: var(--kitn-color-tool-blue, hsl(217 91% 38%));
-  --color-tool-amber: var(--kitn-color-tool-amber, hsl(38 92% 28%));
-  --color-tool-green: var(--kitn-color-tool-green, hsl(142 71% 26%));
-  --color-tool-red: var(--kitn-color-tool-red, hsl(0 72% 42%));
+     --kc-color-tool-* to retheme. */
+  --color-tool-blue: var(--kc-color-tool-blue, hsl(217 91% 38%));
+  --color-tool-amber: var(--kc-color-tool-amber, hsl(38 92% 28%));
+  --color-tool-green: var(--kc-color-tool-green, hsl(142 71% 26%));
+  --color-tool-red: var(--kc-color-tool-red, hsl(0 72% 42%));
 
-  --radius: var(--kitn-radius, 0.6rem);
+  --radius: var(--kc-radius, 0.6rem);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -61,16 +61,16 @@
 
   /* Typography scale — semantic sizes shared by all components. Each generates a
      Tailwind utility (text-caption / text-meta / text-body / text-title). To
-     restyle the kit's typography, override the namespaced --kitn-text-* token on
-     :root (e.g. `--kitn-text-body: 0.9375rem`) — it pierces the Shadow DOM via the
-     var() fallback, exactly like the --kitn-color-* tokens. The bare --text-*
+     restyle the kit's typography, override the namespaced --kc-text-* token on
+     :root (e.g. `--kc-text-body: 0.9375rem`) — it pierces the Shadow DOM via the
+     var() fallback, exactly like the --kc-color-* tokens. The bare --text-*
      names stay internal so a host's own --text-* can't collide. (Message/markdown/
      input reading size also scales with the `proseSize` prop; these tokens cover
      the fixed chrome & controls.) */
-  --text-caption: var(--kitn-text-caption, 0.6875rem);  --text-caption--line-height: 1rem;      /* 11px — micro labels, badges, sub-counts */
-  --text-meta: var(--kitn-text-meta, 0.75rem);     --text-meta--line-height: 1.1rem;       /* 12px — controls, toggles, switchers, captions */
-  --text-body: var(--kitn-text-body, 0.875rem);    --text-body--line-height: 1.45rem;      /* 14px — primary reading text */
-  --text-title: var(--kitn-text-title, 1rem);        --text-title--line-height: 1.5rem;      /* 16px — emphasis / headers */
+  --text-caption: var(--kc-text-caption, 0.6875rem);  --text-caption--line-height: 1rem;      /* 11px — micro labels, badges, sub-counts */
+  --text-meta: var(--kc-text-meta, 0.75rem);     --text-meta--line-height: 1.1rem;       /* 12px — controls, toggles, switchers, captions */
+  --text-body: var(--kc-text-body, 0.875rem);    --text-body--line-height: 1.45rem;      /* 14px — primary reading text */
+  --text-title: var(--kc-text-title, 1rem);        --text-title--line-height: 1.5rem;      /* 16px — emphasis / headers */
 
   @keyframes typing { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-2px); opacity: 1 } }
   @keyframes loading-dots { 0%,100% { opacity: 0 } 50% { opacity: 1 } }
@@ -89,35 +89,35 @@
 }
 
 .dark {
-  --color-background: var(--kitn-color-background, hsl(50 2% 9%));
-  --color-foreground: var(--kitn-color-foreground, hsl(0 0% 98%));
-  --color-card: var(--kitn-color-card, hsl(45 4% 12%));
-  --color-card-foreground: var(--kitn-color-card-foreground, hsl(0 0% 98%));
-  --color-popover: var(--kitn-color-popover, hsl(45 4% 12%));
-  --color-popover-foreground: var(--kitn-color-popover-foreground, hsl(0 0% 98%));
-  --color-primary: var(--kitn-color-primary, hsl(0 0% 98%));
-  --color-primary-foreground: var(--kitn-color-primary-foreground, hsl(45 4% 11%));
-  --color-secondary: var(--kitn-color-secondary, hsl(45 4% 17%));
-  --color-secondary-foreground: var(--kitn-color-secondary-foreground, hsl(0 0% 98%));
-  --color-muted: var(--kitn-color-muted, hsl(45 4% 17%));
-  --color-muted-foreground: var(--kitn-color-muted-foreground, hsl(45 4% 64%));
-  --color-accent: var(--kitn-color-accent, hsl(45 4% 17%));
-  --color-accent-foreground: var(--kitn-color-accent-foreground, hsl(0 0% 98%));
-  --color-destructive: var(--kitn-color-destructive, hsl(0 62.8% 30.6%));
-  --color-destructive-foreground: var(--kitn-color-destructive-foreground, hsl(0 0% 98%));
-  --color-border: var(--kitn-color-border, hsl(45 4% 17%));
-  --color-input: var(--kitn-color-input, hsl(45 4% 17%));
-  --color-ring: var(--kitn-color-ring, hsl(217 91% 68%));
-  --color-scrollbar-thumb: var(--kitn-color-scrollbar-thumb, hsl(45 3% 30%));
-  --color-scrollbar-thumb-hover: var(--kitn-color-scrollbar-thumb-hover, hsl(45 3% 42%));
-  --color-sidebar: var(--kitn-color-sidebar, hsl(50 2% 7%));
-  --color-code-foreground: var(--kitn-color-code-foreground, hsl(213 94% 78%));
+  --color-background: var(--kc-color-background, hsl(50 2% 9%));
+  --color-foreground: var(--kc-color-foreground, hsl(0 0% 98%));
+  --color-card: var(--kc-color-card, hsl(45 4% 12%));
+  --color-card-foreground: var(--kc-color-card-foreground, hsl(0 0% 98%));
+  --color-popover: var(--kc-color-popover, hsl(45 4% 12%));
+  --color-popover-foreground: var(--kc-color-popover-foreground, hsl(0 0% 98%));
+  --color-primary: var(--kc-color-primary, hsl(0 0% 98%));
+  --color-primary-foreground: var(--kc-color-primary-foreground, hsl(45 4% 11%));
+  --color-secondary: var(--kc-color-secondary, hsl(45 4% 17%));
+  --color-secondary-foreground: var(--kc-color-secondary-foreground, hsl(0 0% 98%));
+  --color-muted: var(--kc-color-muted, hsl(45 4% 17%));
+  --color-muted-foreground: var(--kc-color-muted-foreground, hsl(45 4% 64%));
+  --color-accent: var(--kc-color-accent, hsl(45 4% 17%));
+  --color-accent-foreground: var(--kc-color-accent-foreground, hsl(0 0% 98%));
+  --color-destructive: var(--kc-color-destructive, hsl(0 62.8% 30.6%));
+  --color-destructive-foreground: var(--kc-color-destructive-foreground, hsl(0 0% 98%));
+  --color-border: var(--kc-color-border, hsl(45 4% 17%));
+  --color-input: var(--kc-color-input, hsl(45 4% 17%));
+  --color-ring: var(--kc-color-ring, hsl(217 91% 68%));
+  --color-scrollbar-thumb: var(--kc-color-scrollbar-thumb, hsl(45 3% 30%));
+  --color-scrollbar-thumb-hover: var(--kc-color-scrollbar-thumb-hover, hsl(45 3% 42%));
+  --color-sidebar: var(--kc-color-sidebar, hsl(50 2% 7%));
+  --color-code-foreground: var(--kc-color-code-foreground, hsl(213 94% 78%));
 
   /* Tool/status chip hues — dark mode. Brighter hues reach AA on the dark fill. */
-  --color-tool-blue: var(--kitn-color-tool-blue, hsl(217 91% 70%));
-  --color-tool-amber: var(--kitn-color-tool-amber, hsl(38 92% 50%));
-  --color-tool-green: var(--kitn-color-tool-green, hsl(142 71% 45%));
-  --color-tool-red: var(--kitn-color-tool-red, hsl(0 84% 70%));
+  --color-tool-blue: var(--kc-color-tool-blue, hsl(217 91% 70%));
+  --color-tool-amber: var(--kc-color-tool-amber, hsl(38 92% 50%));
+  --color-tool-green: var(--kc-color-tool-green, hsl(142 71% 45%));
+  --color-tool-red: var(--kc-color-tool-red, hsl(0 84% 70%));
 }
 
 /* Self-contained markdown styling — replaces the typography plugin's `prose`.