@kitnai/chat 0.7.0 → 0.8.0

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`.

package/src/stories/docs/element-spec.tsx

@@ -1,86 +0,0 @@
-import { For, Show } from 'solid-js';
-import meta from '../../elements/element-meta.json';
-
-type Prop = { name: string; type: string; default?: string; scalar: boolean; description: string };
-type Event = { name: string; detail: string | null; description: string };
-type Composed = { name: string; group: string; storyId?: string };
-type ElementMeta = { tag: string; className: string; props: Prop[]; events: Event[]; composedFrom: Composed[]; tokens: string[] };
-
-const all = meta as unknown as ElementMeta[];
-
-const th = 'text-left font-semibold px-2 py-1.5 border-b border-border text-foreground';
-const td = 'px-2 py-1.5 border-b border-border align-top text-muted-foreground';
-const code = 'font-mono text-[0.85em] text-code-foreground';
-
-export function ElementSpec(props: { tag: string }) {
-  const el = () => all.find((e) => e.tag === props.tag);
-  return (
-    <Show when={el()} fallback={<p>Unknown element: {props.tag}</p>}>
-      {(e) => (
-        <div class="text-sm space-y-6">
-          <section>
-            <h3 class="text-title font-semibold text-foreground mb-2">Properties</h3>
-            <table class="w-full border-collapse">
-              <thead><tr><th class={th}>Property</th><th class={th}>Attribute</th><th class={th}>Type / values</th><th class={th}>Default</th></tr></thead>
-              <tbody>
-                <For each={e().props}>{(p) => (
-                  <tr>
-                    <td class={td}><span class={code}>{p.name}</span></td>
-                    <td class={td}>{p.scalar ? <span class={code}>{kebab(p.name)}</span> : <span class="opacity-50">— (property only)</span>}</td>
-                    <td class={td}><span class={code}>{p.type}</span></td>
-                    <td class={td}>{p.default ? <span class={code}>{p.default}</span> : '—'}</td>
-                  </tr>
-                )}</For>
-              </tbody>
-            </table>
-          </section>
-
-          <Show when={e().events.length}>
-            <section>
-              <h3 class="text-title font-semibold text-foreground mb-2">Events</h3>
-              <p class="text-muted-foreground mb-2 text-xs">Non-bubbling <span class={code}>CustomEvent</span>s on the element; the payload is on <span class={code}>event.detail</span>.</p>
-              <table class="w-full border-collapse">
-                <thead><tr><th class={th}>Event</th><th class={th}>detail</th><th class={th}>Description</th></tr></thead>
-                <tbody>
-                  <For each={e().events}>{(ev) => (
-                    <tr>
-                      <td class={td}><span class={code}>{ev.name}</span></td>
-                      <td class={td}><span class={code}>{detailText(ev.detail)}</span></td>
-                      <td class={td}>{ev.description}</td>
-                    </tr>
-                  )}</For>
-                </tbody>
-              </table>
-            </section>
-          </Show>
-
-          <Show when={e().composedFrom.length}>
-            <section>
-              <h3 class="text-title font-semibold text-foreground mb-2">Composed from</h3>
-              <p class="text-muted-foreground mb-2 text-xs">This element wraps these SolidJS components:</p>
-              <div class="flex flex-wrap gap-2">
-                <For each={e().composedFrom}>{(c) => (
-                  <a class="rounded-md bg-muted px-2 py-1 text-xs text-foreground hover:bg-accent no-underline" href={`?path=/docs/${c.storyId}`}>
-                    {c.group}/{c.name}
-                  </a>
-                )}</For>
-              </div>
-            </section>
-          </Show>
-
-          <section>
-            <h3 class="text-title font-semibold text-foreground mb-2">Theming</h3>
-            <p class="text-muted-foreground text-xs">
-              Themed by the global design tokens — override any <span class={code}>--color-*</span> token to rebrand (see the <a href="?path=/docs/theming-token-reference--docs" class="text-primary">Token Reference</a>).
-              <Show when={e().tokens.length}>{' '}This element also reads:{' '}<For each={e().tokens}>{(t, i) => <><span class={code}>{t}</span>{i() < e().tokens.length - 1 ? ', ' : ''}</>}</For>.</Show>
-            </p>
-          </section>
-        </div>
-      )}
-    </Show>
-  );
-}
-
-function kebab(name: string) { return name.replace(/([A-Z])/g, '-$1').toLowerCase(); }
-// Payloadless events (no detail, or an empty `Record<string, never>`) render as a dash.
-function detailText(detail: string | null) { return !detail || detail === 'Record<string, never>' ? '—' : detail; }