@kitnai/chat 0.7.0 → 0.8.1

package/src/ui/dropdown.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { createSignal } from 'solid-js';
 import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from './dropdown';
 import { buttonVariants } from './button';
+import { componentDescription } from '../stories/docs/element-controls';
 
 const meta = {
   title: 'UI/Dropdown',
@@ -10,13 +11,11 @@ const meta = {
   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'),
-      },
+      description: componentDescription([
+        '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.',
+      ]),
     },
   },
   render: () => <DropdownDemo />,

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { HoverCard } from './hover-card';
 import { Button } from './button';
+import { componentDescription } from '../stories/docs/element-controls';
 
 const meta = {
   title: 'UI/HoverCard',
@@ -9,13 +10,11 @@ const meta = {
   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'),
-      },
+      description: componentDescription([
+        '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.',
+      ]),
     },
   },
   argTypes: {

package/src/ui/resizable.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { fn } from 'storybook/test';
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './resizable';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle, Resizable } from './resizable';
+import { componentDescription } from '../stories/docs/element-controls';
 
 const meta = {
   title: 'UI/Resizable',
@@ -10,14 +11,12 @@ const meta = {
     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'),
-      },
+      description: componentDescription([
+        '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.',
+      ]),
     },
   },
   argTypes: {
@@ -169,3 +168,69 @@ export const NoHandle: Story = {
   <ResizablePanel>Panel B</ResizablePanel>
 </ResizablePanelGroup>`),
 };
+
+/**
+ * The `Resizable` convenience: pass `ResizablePanel` children and it
+ * auto-inserts a handle between each visible pair. A `locked` panel makes its
+ * neighbouring handle a static (non-draggable) divider; a `hidden` panel drops
+ * its divider entirely.
+ */
+export const ConvenienceGroup: Story = {
+  name: 'Resizable (convenience)',
+  render: () => (
+    <div class="h-48 w-full max-w-2xl rounded-lg border border-border overflow-hidden">
+      <Resizable orientation="horizontal" withHandle onChange={(sizes) => console.log('sizes', sizes)}>
+        <ResizablePanel defaultSize="240px" locked>
+          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
+            <span class="text-sm text-muted-foreground">Locked sidebar (240px)</span>
+          </div>
+        </ResizablePanel>
+        <ResizablePanel>
+          <div class="flex h-full items-center justify-center p-4">
+            <span class="text-sm text-muted-foreground">Chat</span>
+          </div>
+        </ResizablePanel>
+        <ResizablePanel defaultSize="30%" minSize="160px">
+          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
+            <span class="text-sm text-muted-foreground">Preview</span>
+          </div>
+        </ResizablePanel>
+      </Resizable>
+    </div>
+  ),
+  ...src(`<Resizable orientation="horizontal" withHandle onChange={(sizes) => console.log(sizes)}>
+  <ResizablePanel defaultSize="240px" locked>Locked sidebar</ResizablePanel>
+  <ResizablePanel>Chat</ResizablePanel>
+  <ResizablePanel defaultSize="30%" minSize="160px">Preview</ResizablePanel>
+</Resizable>`),
+};
+
+/**
+ * Min/max + keyboard: focus the handle (Tab) and use ←/→ to nudge, Home/End to
+ * jump to the panel's min/max. Sizes accept px or %.
+ */
+export const MinMaxKeyboard: Story = {
+  name: 'Min/Max + Keyboard',
+  render: () => (
+    <div class="h-48 w-full max-w-2xl rounded-lg border border-border overflow-hidden">
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel defaultSize="30%" minSize="120px" maxSize="50%">
+          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
+            <span class="text-sm text-muted-foreground">min 120px · max 50%</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel minSize="160px">
+          <div class="flex h-full items-center justify-center p-4">
+            <span class="text-sm text-muted-foreground">Content (min 160px)</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+  ...src(`<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel defaultSize="30%" minSize="120px" maxSize="50%">Sidebar</ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel minSize="160px">Content</ResizablePanel>
+</ResizablePanelGroup>`),
+};