@kitnai/chat 0.4.0 → 0.5.0

package/src/ui/dropdown.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal } from 'solid-js';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from './dropdown';
+import { buttonVariants } from './button';
+
+const meta = {
+  title: 'UI/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'An accessible menu that opens from a trigger, built on the kit\'s DIY overlay core (no third-party dependency). Implements the WAI-ARIA menu-button pattern: `aria-haspopup`/`aria-expanded` wiring, roving focus with Arrow/Home/End, type-ahead, Escape/outside-click dismissal, and focus return to the trigger. Portals into the active shadow root and resolves focus through `getRootNode()` so roving focus works inside web components.',
+          '**When to use:** for a list of *actions* or single-choice options triggered by a button — overflow "⋯" menus, model pickers, scope selectors. For hover-only context use `HoverCard`; for a label use `Tooltip`.',
+          '**How to use:** compose `Dropdown` › `DropdownTrigger` (the button) + `DropdownContent` › one `DropdownItem` per action. Give each item an `onSelect` handler — selecting also closes the menu.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  render: () => <DropdownDemo />,
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+function DropdownDemo() {
+  const [last, setLast] = createSignal<string>();
+  return (
+    <div class="space-y-3">
+      <Dropdown>
+        <DropdownTrigger class={buttonVariants({ variant: 'outline' })}>Actions ▾</DropdownTrigger>
+        <DropdownContent>
+          <DropdownItem onSelect={() => setLast('Rename')}>Rename</DropdownItem>
+          <DropdownItem onSelect={() => setLast('Duplicate')}>Duplicate</DropdownItem>
+          <DropdownItem onSelect={() => setLast('Archive')}>Archive</DropdownItem>
+        </DropdownContent>
+      </Dropdown>
+      <p class="text-xs text-muted-foreground">Last selected: {last() ?? '—'}</p>
+    </div>
+  );
+}
+
+/** Click the trigger (or focus it and press ↓ / Enter) to open the menu; Arrow keys move, Escape closes. */
+export const Playground: Story = {
+  ...src(`<Dropdown>
+  <DropdownTrigger class={buttonVariants({ variant: 'outline' })}>Actions ▾</DropdownTrigger>
+  <DropdownContent>
+    <DropdownItem onSelect={() => rename()}>Rename</DropdownItem>
+    <DropdownItem onSelect={() => duplicate()}>Duplicate</DropdownItem>
+    <DropdownItem onSelect={() => archive()}>Archive</DropdownItem>
+  </DropdownContent>
+</Dropdown>`),
+};

package/src/ui/hover-card.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { HoverCard } from './hover-card';
+import { Button } from './button';
+
+const meta = {
+  title: 'UI/HoverCard',
+  component: HoverCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A floating card that opens when its trigger is hovered or focused, built on the kit\'s DIY overlay core (positioning + dismiss + presence — no third-party dependency). Portals into the active shadow root so it never clips, and a transparent "safe bridge" keeps it open while the pointer travels from trigger to card.',
+          '**When to use:** to reveal supplementary, non-essential context on hover — a user/profile preview, a link or citation preview, an attachment summary. For an actionable menu use `Dropdown`; for a one-line label use `Tooltip`.',
+          '**How to use:** pass the trigger element as `trigger` and the card body as `children`. Tune `openDelay` / `closeDelay` (ms) to taste.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    trigger: { control: false, description: 'The element that opens the card on hover/focus.' },
+    children: { control: false, description: 'The card contents.' },
+    openDelay: { control: 'number', description: 'Delay (ms) before the card opens. Default 0.' },
+    closeDelay: { control: 'number', description: 'Delay (ms) before the card closes after the pointer leaves. Default 300.' },
+    class: { control: 'text', description: 'Extra classes applied to the card body.' },
+  },
+  args: {
+    trigger: <Button variant="outline">@ada</Button>,
+    children: (
+      <div class="flex gap-3">
+        <div class="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground">AL</div>
+        <div class="space-y-1">
+          <p class="text-sm font-medium text-foreground">Ada Lovelace</p>
+          <p class="text-xs text-muted-foreground">Wrote the first algorithm intended for a machine. Joined in 1843.</p>
+        </div>
+      </div>
+    ),
+  },
+  render: (args) => <HoverCard {...args} />,
+} satisfies Meta<typeof HoverCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { HoverCard } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Hover (or focus) the trigger to reveal a profile preview card. */
+export const Playground: Story = {
+  ...src(`<HoverCard trigger={<Button variant="outline">@ada</Button>}>
+  <ProfilePreview name="Ada Lovelace" />
+</HoverCard>`),
+};
+
+/** A link-preview card, the way it might appear inline in an assistant message. */
+export const LinkPreview: Story = {
+  render: () => (
+    <p class="max-w-md text-sm text-foreground">
+      See the{' '}
+      <HoverCard
+        trigger={<a href="#" class="font-medium text-primary underline underline-offset-2">MDN reference</a>}
+      >
+        <div class="space-y-1">
+          <p class="text-sm font-medium text-foreground">Custom elements — MDN</p>
+          <p class="text-xs text-muted-foreground">developer.mozilla.org</p>
+          <p class="text-xs text-muted-foreground">Define your own HTML elements with the CustomElementRegistry.</p>
+        </div>
+      </HoverCard>{' '}
+      for the full custom-elements API.
+    </p>
+  ),
+  ...src(`<HoverCard trigger={<a href="...">MDN reference</a>}>
+  <LinkCard title="Custom elements — MDN" host="developer.mozilla.org" />
+</HoverCard>`),
+};

package/src/ui/overlay.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal, Show } from 'solid-js';
+import { Portal } from 'solid-js/web';
+import { createPresence, usePosition, useDismiss } from './overlay';
+import { buttonVariants } from './button';
+
+/**
+ * `overlay.tsx` is not a component — it's the small DIY toolkit that every
+ * floating surface in the kit (Tooltip, HoverCard, Dropdown) is built from,
+ * replacing the former third-party UI dependency. Three primitives:
+ *
+ * - `usePosition(ref, floating, opts)` — anchors `floating` to `ref` via
+ *   @floating-ui/dom with flip/shift, tracking it on scroll/resize.
+ * - `createPresence(open)` — keeps a node mounted through its CSS exit
+ *   animation, then unmounts on `animationend`.
+ * - `useDismiss({ enabled, onDismiss, refs })` — Escape + outside-pointerdown
+ *   dismissal (no scroll lock).
+ *
+ * Plus an `As` polymorphic helper for trigger elements.
+ */
+const meta: Meta = {
+  title: 'UI/Overlay Core',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          "The shared, dependency-free foundation behind every floating surface in the kit — `Tooltip`, `HoverCard`, and `Dropdown` are all assembled from these primitives. It's a toolkit of hooks, not a renderable component.",
+          '**`usePosition(ref, floating, opts)`** anchors a floating node to a trigger via `@floating-ui/dom` (flip/shift, fixed strategy, tracks on scroll/resize). **`createPresence(open)`** keeps the node mounted through its CSS exit animation. **`useDismiss({ enabled, onDismiss, refs })`** handles Escape + outside-click. An **`As`** helper renders a polymorphic trigger.',
+          '**When to use:** only when you need a floating surface the prebuilt components don\'t cover. Reach for `Tooltip` / `HoverCard` / `Dropdown` first — they already wire these together with the correct ARIA and focus behavior.',
+          'The demo below composes all three into a minimal popover; everything portals into the active shadow root via `ChatConfig`.',
+        ].join('\n\n'),
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function PopoverDemo() {
+  const [open, setOpen] = createSignal(false);
+  const [trigger, setTrigger] = createSignal<HTMLElement>();
+  const [content, setContent] = createSignal<HTMLElement>();
+  const presence = createPresence(open);
+  const position = usePosition(trigger, content, { placement: 'bottom-start', gutter: 6 });
+  useDismiss({ enabled: open, onDismiss: () => setOpen(false), refs: () => [trigger(), content()] });
+
+  return (
+    <>
+      <button
+        ref={setTrigger}
+        type="button"
+        class={buttonVariants({ variant: 'outline' })}
+        onClick={() => setOpen(!open())}
+      >
+        {open() ? 'Close' : 'Open'} popover
+      </button>
+      <Show when={presence.present()}>
+        <Portal>
+          <div
+            ref={(el) => { setContent(el); presence.setRef(el); }}
+            data-expanded={presence.state() === 'open' ? '' : undefined}
+            data-closed={presence.state() === 'closed' ? '' : undefined}
+            style={{ position: 'fixed', left: `${position.pos().x}px`, top: `${position.pos().y}px` }}
+            class="z-50 w-64 rounded-lg bg-card p-3 text-sm text-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95"
+          >
+            Positioned by <code class="text-xs">usePosition</code>, kept mounted through its
+            exit animation by <code class="text-xs">createPresence</code>, and closed on
+            Escape / outside-click by <code class="text-xs">useDismiss</code>.
+          </div>
+        </Portal>
+      </Show>
+    </>
+  );
+}
+
+/** A minimal popover hand-built from the three overlay primitives. Click to toggle; click outside or press Escape to dismiss. */
+export const MinimalPopover: Story = {
+  render: () => <PopoverDemo />,
+  parameters: {
+    docs: {
+      source: {
+        code: `import { createPresence, usePosition, useDismiss } from '@kitnai/chat';
+
+function PopoverDemo() {
+  const [open, setOpen] = createSignal(false);
+  const [trigger, setTrigger] = createSignal<HTMLElement>();
+  const [content, setContent] = createSignal<HTMLElement>();
+  const presence = createPresence(open);
+  const position = usePosition(trigger, content, { placement: 'bottom-start', gutter: 6 });
+  useDismiss({ enabled: open, onDismiss: () => setOpen(false), refs: () => [trigger(), content()] });
+
+  return (
+    <>
+      <button ref={setTrigger} onClick={() => setOpen(!open())}>Toggle</button>
+      <Show when={presence.present()}>
+        <Portal>
+          <div
+            ref={(el) => { setContent(el); presence.setRef(el); }}
+            style={{ position: 'fixed', left: \`\${position.pos().x}px\`, top: \`\${position.pos().y}px\` }}
+          >
+            …content…
+          </div>
+        </Portal>
+      </Show>
+    </>
+  );
+}`,
+        language: 'tsx',
+      },
+    },
+  },
+};

package/src/ui/overlay.tsx

@@ -57,7 +57,7 @@ export type AsTag = string | ((props: Record<string, any>) => JSX.Element);
 
 /**
  * Polymorphic element. `as` may be a tag name (default 'span') or a render
- * function that receives the forwarded props (Kobalte-compatible `as={fn}`).
+ * function that receives the forwarded props (render-prop style `as={fn}`).
  * Uses splitProps (NOT destructuring) so reactive forwarded props such as
  * aria-expanded stay reactive. All extra props (incl. `ref`, event handlers,
  * aria-*) are forwarded. `children` is left in `rest` so it forwards naturally.

package/src/ui/scroll-area.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { For } from 'solid-js';
+import { ScrollArea } from './scroll-area';
+
+const meta = {
+  title: 'UI/ScrollArea',
+  component: ScrollArea,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A vertically scrollable container with thin, themed scrollbars (`scrollbar-thin` + muted thumb, transparent track). A thin styling layer over native overflow — no custom scroll hijacking, so momentum, keyboard, and accessibility behave exactly like the platform expects. Constrain it with a height (or let a flex parent bound it) and overflow content scrolls.',
+          '**When to use:** any bounded region whose content can exceed its height — the conversation/history sidebar, a long menu, a tall card body.',
+          '**How to use:** set a height via `class` and drop the scrollable content inside. All other div props (e.g. `aria-label`) are forwarded.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  render: () => (
+    <ScrollArea class="h-56 w-72 rounded-lg border border-border p-2">
+      <ul class="space-y-1">
+        <For each={Array.from({ length: 24 }, (_, i) => i + 1)}>
+          {(n) => (
+            <li class="rounded-md px-3 py-2 text-sm text-foreground hover:bg-muted">
+              Conversation {n}
+            </li>
+          )}
+        </For>
+      </ul>
+    </ScrollArea>
+  ),
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { ScrollArea } from '@kitnai/chat';`;
+
+/** A bounded list that scrolls. Note macOS hides overlay scrollbars until you scroll. */
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `${IMPORT}\n\n<ScrollArea class="h-56 w-72 rounded-lg border p-2">\n  <For each={conversations}>{(c) => <Row {...c} />}</For>\n</ScrollArea>`,
+        language: 'tsx',
+      },
+    },
+  },
+};

package/src/ui/textarea.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import type { JSX } from 'solid-js';
+import { Textarea } from './textarea';
+
+const meta = {
+  title: 'UI/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  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'),
+      },
+    },
+  },
+  argTypes: {
+    placeholder: { control: 'text', description: 'Placeholder text.' },
+    maxHeight: { control: 'number', description: 'Max height (px) before the field scrolls instead of growing.' },
+    autoResize: { control: 'boolean', description: 'Grow with content. Default true.' },
+    class: { control: 'text', description: 'Extra classes.' },
+  },
+  args: {
+    placeholder: 'Ask anything… (Shift+Enter for a newline)',
+    maxHeight: 200,
+  },
+  render: (args) => (
+    <Frame>
+      <Textarea {...args} class="focus-visible:ring-0" />
+    </Frame>
+  ),
+} satisfies Meta<typeof Textarea>;
+
+/**
+ * The composed input frame, mirroring how `PromptInput` wraps the textarea: the
+ * FRAME owns the boundary + focus ring (`focus-within`), and the transparent
+ * textarea inside has its own ring neutralized so there's no nested box.
+ */
+function Frame(props: { children: JSX.Element }) {
+  return (
+    <div class="w-96 cursor-text rounded-xl border border-border bg-muted/40 p-3 shadow-xs transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring">
+      {props.children}
+    </div>
+  );
+}
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Textarea } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Type several lines — the field grows until `maxHeight`, then scrolls. Focus the field: the ring is on the frame, not a nested box. */
+export const Playground: Story = {
+  ...src(`{/* The frame owns the focus ring; the textarea's own ring is neutralized. */}
+<div class="cursor-text rounded-xl border bg-muted/40 p-3 focus-within:ring-2 focus-within:ring-ring">
+  <Textarea placeholder="Ask anything…" maxHeight={200} class="focus-visible:ring-0" />
+</div>`),
+};
+
+/** A fixed-height field (auto-resize disabled). */
+export const FixedHeight: Story = {
+  render: () => (
+    <Frame>
+      <Textarea autoResize={false} rows={4} placeholder="Fixed at 4 rows…" class="focus-visible:ring-0" />
+    </Frame>
+  ),
+  ...src(`<div class="cursor-text rounded-xl border bg-muted/40 p-3 focus-within:ring-2 focus-within:ring-ring">
+  <Textarea autoResize={false} rows={4} placeholder="Fixed at 4 rows…" class="focus-visible:ring-0" />
+</div>`),
+};

package/theme.css

@@ -27,7 +27,11 @@
   --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-ring: var(--kitn-color-ring, hsl(240 10% 3.9%));
+  /* 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%));
   --color-sidebar: var(--kitn-color-sidebar, hsl(0 0% 100%));
 
   /* Inline `code` accent. Blue text on a translucent blue chip. */
@@ -97,7 +101,7 @@
   --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(45 5% 72%));
+  --color-ring: var(--kitn-color-ring, hsl(217 91% 68%));
   --color-sidebar: var(--kitn-color-sidebar, hsl(50 2% 7%));
   --color-code-foreground: var(--kitn-color-code-foreground, hsl(213 94% 78%));