@kitn.ai/ui 0.15.0 → 0.16.0

package/src/components/source.stories.tsx

@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { Source, SourceTrigger, SourceContent, SourceList } from './source';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/Source',
-  component: Source,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'An inline citation chip with a hover-card preview. Compose `Source` (root, holds the `href`) with `SourceTrigger` (the clickable pill) and `SourceContent` (the hover preview). `SourceList` lays out several side by side.',
-        '**When to use:** to cite a referenced web source inline in an assistant message — show a compact domain/number pill that previews the title and description on hover.',
-        '**How to use:** wrap `SourceTrigger` and `SourceContent` in `Source` with the target `href`. Use `label` for custom text or a citation number, `showFavicon` for the site icon, and pass `title`/`description` to `SourceContent`.',
-        '**Placement:** within message body text as citations, or grouped under a message in a `SourceList`.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    href: {
-      control: 'text',
-      description: 'Target URL of the source. The domain is derived from it for the default label.',
-    },
-    children: { control: false, description: 'Trigger and content composition.' },
-  },
-  args: {
-    href: 'https://solidjs.com/docs/basic-reactivity/signals',
-  },
-  render: (args) => (
-    <Source href={args.href}>
-      <SourceTrigger label="solidjs.com" />
-      <SourceContent
-        title="Signals - SolidJS"
-        description="Signals are the most basic reactive primitive. They track a single value that changes over time."
-      />
-    </Source>
-  ),
-} satisfies Meta<typeof Source>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Source, SourceTrigger, SourceContent, SourceList } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — set the `href` and hover the chip to preview. */
-export const Playground: Story = {
-  ...src(`<Source href="https://solidjs.com/docs/basic-reactivity/signals">
-  <SourceTrigger label="solidjs.com" />
-  <SourceContent
-    title="Signals - SolidJS"
-    description="The most basic reactive primitive — a single value that changes over time."
-  />
-</Source>`),
-};
-
-/** Trigger shows the site favicon and derives its label from the domain. */
-export const WithFavicon: Story = {
-  render: () => (
-    <Source href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
-      <SourceTrigger showFavicon />
-      <SourceContent
-        title="JavaScript | MDN"
-        description="JavaScript (JS) is a lightweight interpreted programming language with first-class functions."
-      />
-    </Source>
-  ),
-  ...src(`<Source href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
-  <SourceTrigger showFavicon />
-  <SourceContent title="JavaScript | MDN" description="A lightweight interpreted language." />
-</Source>`),
-};
-
-/** A numbered citation chip. */
-export const NumberedCitation: Story = {
-  render: () => (
-    <Source href="https://example.com/article">
-      <SourceTrigger label={1} />
-      <SourceContent
-        title="Example Article"
-        description="This is a sample article used as a citation reference."
-      />
-    </Source>
-  ),
-  ...src(`<Source href="https://example.com/article">
-  <SourceTrigger label={1} />
-  <SourceContent title="Example Article" description="A sample citation reference." />
-</Source>`),
-};
-
-/** Several sources laid out together with `SourceList` (showcase). */
-export const SourceListExample: Story = {
-  name: 'Source list',
-  render: () => (
-    <SourceList>
-      <Source href="https://solidjs.com">
-        <SourceTrigger showFavicon />
-        <SourceContent title="SolidJS" description="Simple and performant reactivity for building user interfaces." />
-      </Source>
-      <Source href="https://developer.mozilla.org">
-        <SourceTrigger showFavicon />
-        <SourceContent title="MDN Web Docs" description="Resources for developers, by developers." />
-      </Source>
-      <Source href="https://tailwindcss.com">
-        <SourceTrigger showFavicon />
-        <SourceContent title="Tailwind CSS" description="A utility-first CSS framework." />
-      </Source>
-    </SourceList>
-  ),
-  ...src(`<SourceList>
-  <Source href="https://solidjs.com">
-    <SourceTrigger showFavicon />
-    <SourceContent title="SolidJS" description="Simple and performant reactivity." />
-  </Source>
-  <Source href="https://tailwindcss.com">
-    <SourceTrigger showFavicon />
-    <SourceContent title="Tailwind CSS" description="A utility-first CSS framework." />
-  </Source>
-</SourceList>`),
-};

package/src/components/tasks-card.stories.tsx

@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal } from 'solid-js';
-import { TasksCard, type TasksCardData } from './tasks-card';
-import { componentDescription } from '../stories/docs/element-controls';
-import type { CardEvent, CardHost, CardContext } from '../primitives/card-contract';
-
-const ctx: CardContext = { theme: { mode: 'light' }, locale: 'en' };
-
-/** Renders the Solid <TasksCard> with a capturing `host`, logging emitted events. */
-function Demo(props: { def: TasksCardData; heading?: string; cardId: string }) {
-  const [log, setLog] = createSignal<CardEvent[]>([]);
-  const host: CardHost = { context: () => ctx, emit: (e) => setLog((p) => [...p, e]) };
-  return (
-    <div style={{ 'max-width': '460px', display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
-      <TasksCard host={host} data={props.def} heading={props.heading} cardId={props.cardId} />
-      <pre
-        style={{
-          margin: 0,
-          'max-height': '180px',
-          overflow: 'auto',
-          background: 'var(--color-muted, #f4f4f5)',
-          'border-radius': '8px',
-          padding: '8px',
-          'font-size': '12px',
-        }}
-      >
-        {log().length === 0 ? '// emitted CardEvents appear here' : JSON.stringify(log(), null, 2)}
-      </pre>
-    </div>
-  );
-}
-
-const PLAN: TasksCardData = {
-  selectAll: true,
-  confirmLabel: 'Run selected',
-  tasks: [
-    { id: 'lint', label: 'Run linter', checked: true },
-    { id: 'test', label: 'Run unit tests', checked: true },
-    { id: 'build', label: 'Build production bundle' },
-    { id: 'deploy', label: 'Deploy to staging', description: 'Reversible; staging only' },
-  ],
-};
-
-const BOUNDED: TasksCardData = {
-  confirmLabel: 'Request review',
-  min: 1,
-  max: 2,
-  tasks: [
-    { id: 'ana', label: 'Ana' },
-    { id: 'ben', label: 'Ben' },
-    { id: 'cat', label: 'Cat' },
-  ],
-};
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/TasksCard',
-  component: TasksCard,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'The SolidJS layer behind `<kai-tasks>`. Pass a `host` (a `CardHost`) to receive the emitted `CardEvent`s directly (the native-host path), or wrap in a `CardProvider`. Toggling rows is local; only confirm emits `submit` with `{ selected }` in input order.',
-      ]),
-    },
-  },
-} satisfies Meta<typeof TasksCard>;
-
-export default meta;
-type Story = StoryObj<typeof TasksCard>;
-
-export const SelectAPlan: Story = {
-  render: () => <Demo def={PLAN} heading="Approve the plan steps" cardId="card-plan" />,
-};
-
-export const Bounded: Story = {
-  render: () => <Demo def={BOUNDED} heading="Pick up to 2 reviewers" cardId="card-bounded" />,
-};

package/src/components/text-shimmer.stories.tsx

@@ -1,87 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { TextShimmer } from './text-shimmer';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/TextShimmer',
-  component: TextShimmer,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'An animated text effect that sweeps a light gradient across its content, rendered into any element tag via `as`.',
-        '**When to use:** to signal an in-progress / loading state with a label — e.g. "Thinking", "Generating", "Searching" — or to draw subtle attention to a transient status line.',
-        '**How to use:** wrap text in `<TextShimmer>`; tune `duration` (seconds per sweep) and `spread` (gradient width, clamped 5–45). Use `as` to change the wrapping tag (e.g. `"h2"`) and pass any standard HTML attributes.',
-        '**Placement:** loading indicators, streaming status lines, thinking bars, and placeholder labels.',
-      ]),
-    },
-  },
-  argTypes: {
-    as: {
-      control: 'text',
-      description: 'HTML tag to render the shimmer into.',
-      table: { defaultValue: { summary: 'span' } },
-    },
-    duration: {
-      control: 'number',
-      description: 'Seconds for one full shimmer sweep.',
-      table: { defaultValue: { summary: '4' } },
-    },
-    spread: {
-      control: 'number',
-      description: 'Width of the gradient highlight (clamped to 5–45).',
-      table: { defaultValue: { summary: '20' } },
-    },
-    children: {
-      control: 'text',
-      description: 'Text to apply the shimmer effect to.',
-    },
-  },
-  args: {
-    as: 'span',
-    duration: 4,
-    spread: 20,
-    children: 'Shimmering text effect',
-  },
-  render: (args) => <TextShimmer {...args} />,
-} satisfies Meta<typeof TextShimmer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { TextShimmer } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — tweak the controls to explore the shimmer effect. */
-export const Playground: Story = {
-  ...src(`<TextShimmer duration={4} spread={20}>Shimmering text effect</TextShimmer>`),
-};
-
-export const FastShimmer: Story = {
-  args: { duration: 1.5, children: 'Fast shimmer animation' },
-  ...src(`<TextShimmer duration={1.5}>Fast shimmer animation</TextShimmer>`),
-};
-
-export const SlowShimmer: Story = {
-  args: { duration: 8, children: 'Slow shimmer animation' },
-  ...src(`<TextShimmer duration={8}>Slow shimmer animation</TextShimmer>`),
-};
-
-export const WideSpread: Story = {
-  args: { spread: 40, children: 'Wide spread shimmer' },
-  ...src(`<TextShimmer spread={40}>Wide spread shimmer</TextShimmer>`),
-};
-
-export const NarrowSpread: Story = {
-  args: { spread: 5, children: 'Narrow spread shimmer' },
-  ...src(`<TextShimmer spread={5}>Narrow spread shimmer</TextShimmer>`),
-};
-
-export const AsHeading: Story = {
-  args: { as: 'h2', class: 'text-2xl', children: 'Shimmer Heading' } as never,
-  ...src(`<TextShimmer as="h2" class="text-2xl">Shimmer Heading</TextShimmer>`),
-};

package/src/components/thinking-bar.stories.tsx

@@ -1,87 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { ThinkingBar } from './thinking-bar';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/ThinkingBar',
-  component: ThinkingBar,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A status row that shows a shimmering "thinking" label, optionally clickable to expand reasoning, with an optional stop/cancel action.',
-        '**When to use:** while the assistant is generating or reasoning, to show live activity and give the user a way to interrupt or to open the reasoning trace.',
-        '**How to use:** set `text` for the label. Pass `onClick` to make the label a button (adds a chevron) — typically to toggle a reasoning panel. Pass `onStop` (with optional `stopLabel`) to render the interrupt action.',
-        '**Placement:** above or in place of a streaming message, or at the top of a reasoning/chain-of-thought block.',
-      ]),
-    },
-  },
-  argTypes: {
-    text: {
-      control: 'text',
-      description: 'Label shown with the shimmer effect.',
-      table: { defaultValue: { summary: 'Thinking' } },
-    },
-    stopLabel: {
-      control: 'text',
-      description: 'Label for the stop/cancel action (only shown when `onStop` is set).',
-      table: { defaultValue: { summary: 'Answer now' } },
-    },
-    class: {
-      control: 'text',
-      description: 'Additional CSS classes for the container.',
-    },
-    onClick: {
-      action: 'click',
-      description: 'When set, the label becomes a button (with chevron) and this fires on click.',
-      table: { category: 'Events' },
-    },
-    onStop: {
-      action: 'stop',
-      description: 'When set, renders the stop action and fires when it is clicked.',
-      table: { category: 'Events' },
-    },
-  },
-  args: {
-    text: 'Thinking',
-    stopLabel: 'Answer now',
-    onStop: fn(),
-  },
-  render: (args) => <ThinkingBar {...args} />,
-} satisfies Meta<typeof ThinkingBar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { ThinkingBar } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — tweak the controls to explore the thinking bar. */
-export const Playground: Story = {
-  ...src(`<ThinkingBar text="Thinking" onStop={() => stop()} />`),
-};
-
-export const Default: Story = {
-  args: { onStop: undefined } as never,
-  ...src(`<ThinkingBar />`),
-};
-
-export const WithStopButton: Story = {
-  args: { onStop: fn() },
-  ...src(`<ThinkingBar onStop={() => stopGeneration()} />`),
-};
-
-export const CustomText: Story = {
-  args: { text: 'Analyzing documents', stopLabel: 'Cancel', onStop: fn() },
-  ...src(`<ThinkingBar text="Analyzing documents" stopLabel="Cancel" onStop={() => cancel()} />`),
-};
-
-export const Clickable: Story = {
-  args: { text: 'Reasoning', onClick: fn(), onStop: fn() },
-  ...src(`<ThinkingBar\n  text="Reasoning"\n  onClick={() => toggleReasoning()}\n  onStop={() => stop()}\n/>`),
-};

package/src/components/tool.stories.tsx

@@ -1,153 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { Tool } from './tool';
-import type { ToolPart } from './tool';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const streamingPart: ToolPart = {
-  type: 'search_documents',
-  state: 'input-streaming',
-  input: { query: 'SolidJS reactive primitives' },
-  toolCallId: 'call_abc123',
-};
-
-const readyPart: ToolPart = {
-  type: 'search_documents',
-  state: 'input-available',
-  input: { query: 'SolidJS reactive primitives', limit: 10 },
-  toolCallId: 'call_abc123',
-};
-
-const completedPart: ToolPart = {
-  type: 'search_documents',
-  state: 'output-available',
-  input: { query: 'SolidJS reactive primitives', limit: 10 },
-  output: { results: [{ title: 'Signals', score: 0.95 }, { title: 'Effects', score: 0.87 }] },
-  toolCallId: 'call_abc123',
-};
-
-const errorPart: ToolPart = {
-  type: 'search_documents',
-  state: 'output-error',
-  input: { query: 'SolidJS reactive primitives' },
-  errorText: 'Connection timeout: unable to reach the search service after 30 seconds.',
-  toolCallId: 'call_abc123',
-};
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/Tool',
-  component: Tool,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A collapsible panel that visualizes a single tool call — its name, state (processing / ready / completed / error), input, output, error, and call ID.',
-        '**When to use:** to surface assistant tool/function calls in the conversation, so users can inspect what was run and what came back.',
-        '**How to use:** pass a `toolPart` describing the call (`type`, `state`, optional `input`, `output`, `errorText`, `toolCallId`). State drives the icon and badge automatically. Set `defaultOpen` to start expanded.',
-        '**Placement:** inline within an assistant message, typically between text segments where the tool was invoked.',
-      ]),
-    },
-  },
-  argTypes: {
-    toolPart: {
-      control: 'object',
-      description: 'The tool call to render — `type`, `state`, and optional `input`/`output`/`errorText`/`toolCallId`.',
-    },
-    defaultOpen: {
-      control: 'boolean',
-      description: 'Whether the panel starts expanded.',
-      table: { defaultValue: { summary: 'false' } },
-    },
-    class: {
-      control: 'text',
-      description: 'Additional CSS classes for the container.',
-    },
-  },
-  args: {
-    toolPart: completedPart,
-    defaultOpen: true,
-  },
-  render: (args) => <Tool {...args} />,
-} satisfies Meta<typeof Tool>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Tool } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — edit the `toolPart` object to explore every state. */
-export const Playground: Story = {
-  ...src(`<Tool
-  toolPart={{
-    type: 'search_documents',
-    state: 'output-available',
-    input: { query: 'SolidJS reactive primitives', limit: 10 },
-    output: { results: [{ title: 'Signals', score: 0.95 }] },
-    toolCallId: 'call_abc123',
-  }}
-  defaultOpen
-/>`),
-};
-
-export const Processing: Story = {
-  args: { toolPart: streamingPart, defaultOpen: true },
-  ...src(`<Tool
-  toolPart={{
-    type: 'search_documents',
-    state: 'input-streaming',
-    input: { query: 'SolidJS reactive primitives' },
-    toolCallId: 'call_abc123',
-  }}
-  defaultOpen
-/>`),
-};
-
-export const Ready: Story = {
-  args: { toolPart: readyPart, defaultOpen: true },
-  ...src(`<Tool
-  toolPart={{
-    type: 'search_documents',
-    state: 'input-available',
-    input: { query: 'SolidJS reactive primitives', limit: 10 },
-    toolCallId: 'call_abc123',
-  }}
-  defaultOpen
-/>`),
-};
-
-export const Completed: Story = {
-  args: { toolPart: completedPart, defaultOpen: true },
-  ...src(`<Tool
-  toolPart={{
-    type: 'search_documents',
-    state: 'output-available',
-    input: { query: 'SolidJS reactive primitives', limit: 10 },
-    output: { results: [{ title: 'Signals', score: 0.95 }, { title: 'Effects', score: 0.87 }] },
-    toolCallId: 'call_abc123',
-  }}
-  defaultOpen
-/>`),
-};
-
-export const Error: Story = {
-  args: { toolPart: errorPart, defaultOpen: true },
-  ...src(`<Tool
-  toolPart={{
-    type: 'search_documents',
-    state: 'output-error',
-    input: { query: 'SolidJS reactive primitives' },
-    errorText: 'Connection timeout: unable to reach the search service after 30 seconds.',
-    toolCallId: 'call_abc123',
-  }}
-  defaultOpen
-/>`),
-};
-
-export const Collapsed: Story = {
-  args: { toolPart: completedPart, defaultOpen: false },
-  ...src(`<Tool toolPart={toolPart} />`),
-};

package/src/components/voice-input.stories.tsx

@@ -1,83 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { VoiceInput } from './voice-input';
-import { componentDescription } from '../stories/docs/element-controls';
-
-/** Sample transcription handler — resolves the recorded audio to text. */
-const transcribe = async (_audio: Blob): Promise<string> => {
-  await new Promise((r) => setTimeout(r, 1200));
-  return 'Hello from the microphone';
-};
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/VoiceInput',
-  component: VoiceInput,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A microphone button that records audio, shows recording (pulse rings) and processing (spinner) states, then hands the audio off for transcription.',
-        '**When to use:** to let users dictate input by voice instead of typing — speech-to-text for the prompt field.',
-        '**How to use:** provide `onTranscribe(audio)` returning a `Promise<string>` (your STT call) and `onTranscription(text)` to receive the result. Click toggles recording; transcription runs automatically on stop. Set `disabled` to block input.',
-        '**Placement:** inside the prompt input action bar, next to send and other input actions.',
-      ]),
-    },
-  },
-  argTypes: {
-    disabled: {
-      control: 'boolean',
-      description: 'Disables the button (also disabled while transcribing).',
-      table: { defaultValue: { summary: 'false' } },
-    },
-    class: {
-      control: 'text',
-      description: 'Additional CSS classes for the container.',
-    },
-    onTranscribe: {
-      action: 'transcribe',
-      description: 'Receives the recorded audio `Blob` and must resolve to the transcribed text.',
-      table: { category: 'Events' },
-    },
-    onTranscription: {
-      action: 'transcription',
-      description: 'Called with the final transcribed text (trimmed, non-empty).',
-      table: { category: 'Events' },
-    },
-  },
-  args: {
-    disabled: false,
-    onTranscribe: transcribe,
-    onTranscription: fn(),
-  },
-  render: (args) => <VoiceInput {...args} />,
-} satisfies Meta<typeof VoiceInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { VoiceInput } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — click the mic to record (requires mic permission). */
-export const Playground: Story = {
-  ...src(`<VoiceInput
-  onTranscribe={async (audio) => {
-    const res = await transcribeAudio(audio); // your STT call
-    return res.text;
-  }}
-  onTranscription={(text) => setInput((v) => v + text)}
-/>`),
-};
-
-export const Disabled: Story = {
-  args: { disabled: true },
-  ...src(`<VoiceInput
-  disabled
-  onTranscribe={transcribe}
-  onTranscription={(text) => setInput(text)}
-/>`),
-};