@kitn.ai/ui 0.15.0 → 0.16.0

package/src/components/code-block.stories.tsx

@@ -1,150 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { CodeBlock, CodeBlockCode, CodeBlockGroup } from './code-block';
-import { Button } from '../ui/button';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const tsCode = `interface User {
-  id: string;
-  name: string;
-  email: string;
-}
-
-function greet(user: User): string {
-  return \`Hello, \${user.name}!\`;
-}`;
-
-const pythonCode = `def fibonacci(n: int) -> list[int]:
-    """Generate fibonacci sequence up to n numbers."""
-    if n <= 0:
-        return []
-    sequence = [0, 1]
-    while len(sequence) < n:
-        sequence.append(sequence[-1] + sequence[-2])
-    return sequence[:n]
-
-print(fibonacci(10))`;
-
-const cssCode = `:root {
-  --primary: hsl(240 5.9% 10%);
-  --background: hsl(0 0% 100%);
-}
-
-.button {
-  background: var(--color-primary);
-  color: white;
-  border-radius: 0.5rem;
-  padding: 0.5rem 1rem;
-}`;
-
-/**
- * Story for the compound `CodeBlock` family. The root `CodeBlock` is a bordered
- * card container; `CodeBlockCode` does the (on-demand, Shiki) syntax
- * highlighting; `CodeBlockGroup` is a flex header/footer row. The controllable
- * props live on `CodeBlockCode`, so `Playground` drives that piece directly.
- */
-const meta = {
-  title: 'Solid (Advanced)/Elements/CodeBlock',
-  component: CodeBlockCode,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A bordered code card with optional syntax highlighting. `CodeBlock` is the container, `CodeBlockCode` renders the (Shiki-)highlighted source, and `CodeBlockGroup` is a flex row for a header/footer (filename + copy button).',
-        '**When to use:** to display code snippets in chat messages, documentation, or anywhere fenced code appears — typically emitted by the Markdown renderer for ``` blocks.',
-        '**How to use:** wrap one or more children in `<CodeBlock>`. Pass the source string and a `language` to `<CodeBlockCode>`; optionally override the `theme`. Add a `<CodeBlockGroup>` for a filename row and copy action.',
-        '**Placement:** inside assistant message content, README/docs panes, and tool-output views.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    code: {
-      control: 'text',
-      description: 'The source code string to render.',
-    },
-    language: {
-      control: 'text',
-      description: 'Language id for syntax highlighting (e.g. `typescript`, `python`, `css`).',
-      table: { defaultValue: { summary: 'tsx' } },
-    },
-    theme: {
-      control: 'text',
-      description: 'Shiki theme id. Falls back to the active ChatConfig `codeTheme`.',
-    },
-  },
-  args: {
-    code: tsCode,
-    language: 'typescript',
-  },
-  render: (args) => (
-    <div class="max-w-lg">
-      <CodeBlock>
-        <CodeBlockCode {...args} />
-      </CodeBlock>
-    </div>
-  ),
-} satisfies Meta<typeof CodeBlockCode>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { CodeBlock, CodeBlockCode, CodeBlockGroup } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — edit the code, language, or theme via controls. */
-export const Playground: Story = {
-  ...src(`<CodeBlock>
-  <CodeBlockCode code={tsCode} language="typescript" />
-</CodeBlock>`),
-};
-
-export const TypeScript: Story = {
-  args: { code: tsCode, language: 'typescript' },
-  ...src(`<CodeBlock>
-  <CodeBlockCode code={tsCode} language="typescript" />
-</CodeBlock>`),
-};
-
-export const Python: Story = {
-  args: { code: pythonCode, language: 'python' },
-  ...src(`<CodeBlock>
-  <CodeBlockCode code={pythonCode} language="python" />
-</CodeBlock>`),
-};
-
-export const CSS: Story = {
-  args: { code: cssCode, language: 'css' },
-  ...src(`<CodeBlock>
-  <CodeBlockCode code={cssCode} language="css" />
-</CodeBlock>`),
-};
-
-/** A header row (`CodeBlockGroup`) with a filename and a copy button — showcase. */
-export const WithHeader: Story = {
-  render: () => (
-    <div class="max-w-lg">
-      <CodeBlock>
-        <CodeBlockGroup class="border-b border-border px-4 py-2">
-          <span class="text-xs text-muted-foreground font-mono">user.ts</span>
-          <Button variant="ghost" size="icon-sm" aria-label="Copy code">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-              <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
-            </svg>
-          </Button>
-        </CodeBlockGroup>
-        <CodeBlockCode code={tsCode} language="typescript" />
-      </CodeBlock>
-    </div>
-  ),
-  ...src(`<CodeBlock>
-  <CodeBlockGroup class="border-b border-border px-4 py-2">
-    <span class="text-xs text-muted-foreground font-mono">user.ts</span>
-    <Button variant="ghost" size="icon-sm">{/* copy icon */}</Button>
-  </CodeBlockGroup>
-  <CodeBlockCode code={tsCode} language="typescript" />
-</CodeBlock>`),
-};

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

@@ -1,74 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal } from 'solid-js';
-import { ConfirmCard, type ConfirmCardData } from './confirm-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 <ConfirmCard> with a capturing `host`, logging emitted events. */
-function Demo(props: { def: ConfirmCardData; 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' }}>
-      <ConfirmCard 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 APPROVE: ConfirmCardData = {
-  body: 'This will apply 3 pending migrations to production. This cannot be undone.',
-  tone: 'warning',
-  actions: [
-    { id: 'approve', label: 'Run migration', style: 'primary', default: true },
-    { id: 'reject', label: 'Cancel' },
-  ],
-};
-
-const DESTRUCTIVE: ConfirmCardData = {
-  body: 'Permanently delete 12 files? This cannot be undone.',
-  tone: 'danger',
-  actions: [
-    { id: 'delete', label: 'Delete files', style: 'destructive', default: true },
-    { id: 'cancel', label: 'Keep them' },
-  ],
-};
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/ConfirmCard',
-  component: ConfirmCard,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'The SolidJS layer behind `<kai-confirm>`. Pass a `host` (a `CardHost`) to receive the emitted `CardEvent`s directly (the native-host path), or wrap in a `CardProvider`. Activating an action emits the `action` verb and resolves the card.',
-      ]),
-    },
-  },
-} satisfies Meta<typeof ConfirmCard>;
-
-export default meta;
-type Story = StoryObj<typeof ConfirmCard>;
-
-export const ApproveReject: Story = {
-  render: () => <Demo def={APPROVE} heading="Run database migration?" cardId="card-approve" />,
-};
-
-export const Destructive: Story = {
-  render: () => <Demo def={DESTRUCTIVE} heading="Delete files?" cardId="card-delete" />,
-};

package/src/components/context.stories.tsx

@@ -1,229 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import {
-  Context,
-  ContextTrigger,
-  ContextContent,
-  ContextContentHeader,
-  ContextContentBody,
-  ContextContentFooter,
-  ContextInputUsage,
-  ContextOutputUsage,
-  ContextReasoningUsage,
-  ContextCacheUsage,
-} from './context';
-import { componentDescription } from '../stories/docs/element-controls';
-
-/**
- * Story for the compound `Context` family. `Context` is the root provider that
- * holds the token-usage values; the trigger/content/usage-row subcomponents read
- * from it. The controllable props all live on the `Context` root, so `Playground`
- * drives the root and composes a full hover-card breakdown.
- */
-const meta = {
-  title: 'Solid (Advanced)/Elements/Context',
-  component: Context,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A model context-window usage indicator: a hover-card trigger showing the used-percent ring, with a popover breaking down token usage (input / output / reasoning / cache) and estimated cost.',
-        '**When to use:** to surface how much of a model\'s context window a conversation has consumed and roughly what it costs — near the prompt input or in a chat header.',
-        '**How to use:** wrap the composition in `<Context>` and pass `usedTokens` / `maxTokens` (plus optional `inputTokens`, `outputTokens`, `reasoningTokens`, `cacheTokens`, `estimatedCost`). Compose `ContextTrigger`, `ContextContent` (with `Header`/`Body`/`Footer`), and the usage rows.',
-        '**Placement:** chat toolbars, prompt-input action bars, and conversation headers.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    usedTokens: {
-      control: 'number',
-      description: 'Tokens consumed so far. Drives the ring fill and progress bar.',
-    },
-    maxTokens: {
-      control: 'number',
-      description: 'Total context window size.',
-    },
-    inputTokens: {
-      control: 'number',
-      description: 'Prompt/input tokens (shown by `ContextInputUsage`).',
-    },
-    outputTokens: {
-      control: 'number',
-      description: 'Generated/output tokens (shown by `ContextOutputUsage`).',
-    },
-    reasoningTokens: {
-      control: 'number',
-      description: 'Reasoning tokens (shown by `ContextReasoningUsage`).',
-    },
-    cacheTokens: {
-      control: 'number',
-      description: 'Cached tokens (shown by `ContextCacheUsage`).',
-    },
-    estimatedCost: {
-      control: 'number',
-      description: 'Estimated cost in USD (shown by `ContextContentFooter`).',
-    },
-    warnThreshold: {
-      control: 'number',
-      description: 'Fraction (0–1) above which the bar turns yellow. Default `0.7`.',
-    },
-    dangerThreshold: {
-      control: 'number',
-      description: 'Fraction (0–1) above which the bar turns red. Default `0.9`.',
-    },
-  },
-  args: {
-    usedTokens: 85000,
-    maxTokens: 128000,
-    inputTokens: 60000,
-    outputTokens: 15000,
-    reasoningTokens: 8000,
-    cacheTokens: 2000,
-    estimatedCost: 0.45,
-  },
-  render: (args) => (
-    <Context {...args}>
-      <ContextTrigger />
-      <ContextContent>
-        <ContextContentHeader />
-        <ContextContentBody>
-          <div class="space-y-1">
-            <ContextInputUsage />
-            <ContextOutputUsage />
-            <ContextReasoningUsage />
-            <ContextCacheUsage />
-          </div>
-        </ContextContentBody>
-        <ContextContentFooter />
-      </ContextContent>
-    </Context>
-  ),
-} satisfies Meta<typeof Context>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import {
-  Context, ContextTrigger, ContextContent, ContextContentHeader,
-  ContextContentBody, ContextContentFooter,
-  ContextInputUsage, ContextOutputUsage, ContextReasoningUsage, ContextCacheUsage,
-} from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-const usage = `<Context usedTokens={85000} maxTokens={128000} inputTokens={60000} outputTokens={15000} reasoningTokens={8000} cacheTokens={2000} estimatedCost={0.45}>
-  <ContextTrigger />
-  <ContextContent>
-    <ContextContentHeader />
-    <ContextContentBody>
-      <div class="space-y-1">
-        <ContextInputUsage />
-        <ContextOutputUsage />
-        <ContextReasoningUsage />
-        <ContextCacheUsage />
-      </div>
-    </ContextContentBody>
-    <ContextContentFooter />
-  </ContextContent>
-</Context>`;
-
-/** Interactive playground — tweak token counts to watch the ring, bar color, and breakdown update. */
-export const Playground: Story = {
-  ...src(usage),
-};
-
-export const LowUsage: Story = {
-  args: {
-    usedTokens: 12000,
-    maxTokens: 128000,
-    inputTokens: 8000,
-    outputTokens: 4000,
-    reasoningTokens: undefined,
-    cacheTokens: undefined,
-    estimatedCost: 0.02,
-  },
-  ...src(usage),
-};
-
-export const MediumUsage: Story = {
-  args: {
-    usedTokens: 85000,
-    maxTokens: 128000,
-    inputTokens: 60000,
-    outputTokens: 15000,
-    reasoningTokens: 8000,
-    cacheTokens: 2000,
-    estimatedCost: 0.45,
-  },
-  ...src(usage),
-};
-
-export const HighUsage: Story = {
-  args: {
-    usedTokens: 122000,
-    maxTokens: 128000,
-    inputTokens: 90000,
-    outputTokens: 22000,
-    reasoningTokens: 10000,
-    cacheTokens: undefined,
-    estimatedCost: 1.85,
-  },
-  ...src(usage),
-};
-
-export const WithCost: Story = {
-  args: {
-    usedTokens: 50000,
-    maxTokens: 200000,
-    inputTokens: 35000,
-    outputTokens: 10000,
-    reasoningTokens: 5000,
-    cacheTokens: undefined,
-    estimatedCost: 0.32,
-  },
-  ...src(usage),
-};
-
-const customThresholdUsage = `<Context
-  usedTokens={110000}
-  maxTokens={200000}
-  inputTokens={70000}
-  outputTokens={40000}
-  estimatedCost={0.65}
-  warnThreshold={0.5}
-  dangerThreshold={0.75}
->
-  <ContextTrigger />
-  <ContextContent>
-    <ContextContentHeader />
-    <ContextContentBody>
-      <div class="space-y-1">
-        <ContextInputUsage />
-        <ContextOutputUsage />
-      </div>
-    </ContextContentBody>
-    <ContextContentFooter />
-  </ContextContent>
-</Context>`;
-
-/**
- * Custom thresholds — `warnThreshold=0.5` / `dangerThreshold=0.75` so the bar
- * turns yellow at 50% and red at 75%. At 55% (110 000 / 200 000) the bar renders
- * yellow even though the defaults would show green at this level.
- */
-export const CustomThresholds: Story = {
-  args: {
-    usedTokens: 110000,
-    maxTokens: 200000,
-    inputTokens: 70000,
-    outputTokens: 40000,
-    reasoningTokens: undefined,
-    cacheTokens: undefined,
-    estimatedCost: 0.65,
-    warnThreshold: 0.5,
-    dangerThreshold: 0.75,
-  },
-  ...src(customThresholdUsage),
-};

package/src/components/context.test.tsx

@@ -1,133 +0,0 @@
-import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-import { render, cleanup, fireEvent, screen } from '@solidjs/testing-library';
-import {
-  Context,
-  ContextTrigger,
-  ContextContent,
-  ContextContentHeader,
-  ContextContentBody,
-  ContextContentFooter,
-  computeSeverity,
-  DEFAULT_WARN_THRESHOLD,
-  DEFAULT_DANGER_THRESHOLD,
-} from './context';
-
-// jsdom does not implement PointerEvent — shim it so fireEvent.pointerEnter works.
-if (typeof (globalThis as unknown as Record<string, unknown>).PointerEvent === 'undefined') {
-  (globalThis as unknown as Record<string, unknown>).PointerEvent = class PointerEvent extends MouseEvent {
-    constructor(type: string, params?: PointerEventInit) { super(type, params); }
-  };
-}
-
-beforeEach(() => vi.useFakeTimers());
-afterEach(() => {
-  vi.useRealTimers();
-  cleanup();
-});
-
-// ---------------------------------------------------------------------------
-// computeSeverity — pure function unit tests
-// ---------------------------------------------------------------------------
-
-describe('computeSeverity', () => {
-  it('returns ok below the warn threshold (defaults)', () => {
-    expect(computeSeverity(0)).toBe('ok');
-    expect(computeSeverity(0.5)).toBe('ok');
-    expect(computeSeverity(DEFAULT_WARN_THRESHOLD)).toBe('ok'); // exactly at threshold → still ok
-  });
-
-  it('returns warn when usage exceeds the warn threshold but not the danger threshold', () => {
-    expect(computeSeverity(0.71)).toBe('warn');
-    expect(computeSeverity(DEFAULT_WARN_THRESHOLD + 0.001)).toBe('warn');
-    expect(computeSeverity(DEFAULT_DANGER_THRESHOLD)).toBe('warn'); // exactly at danger threshold → still warn
-  });
-
-  it('returns danger when usage exceeds the danger threshold', () => {
-    expect(computeSeverity(0.91)).toBe('danger');
-    expect(computeSeverity(1.0)).toBe('danger');
-  });
-
-  it('respects custom warnThreshold', () => {
-    expect(computeSeverity(0.49, 0.5, 0.9)).toBe('ok');
-    expect(computeSeverity(0.51, 0.5, 0.9)).toBe('warn');
-    expect(computeSeverity(0.91, 0.5, 0.9)).toBe('danger');
-  });
-
-  it('respects custom dangerThreshold', () => {
-    expect(computeSeverity(0.49, 0.5, 0.75)).toBe('ok');
-    expect(computeSeverity(0.6, 0.5, 0.75)).toBe('warn');
-    expect(computeSeverity(0.76, 0.5, 0.75)).toBe('danger');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Context component — color class flips at configured thresholds
-//
-// HoverCardRoot uses openDelay={0} inside Context, so after a pointerEnter
-// the card opens immediately; we advance fake timers by 0 to flush it.
-// ---------------------------------------------------------------------------
-
-function FullMeter(props: {
-  usedTokens: number;
-  maxTokens: number;
-  warnThreshold?: number;
-  dangerThreshold?: number;
-}) {
-  return (
-    <Context {...props}>
-      <ContextTrigger />
-      <ContextContent>
-        <ContextContentHeader />
-        <ContextContentBody />
-        <ContextContentFooter />
-      </ContextContent>
-    </Context>
-  );
-}
-
-/** Open the hover card so ContextContentHeader is in the DOM. */
-function openCard() {
-  // ContextTrigger renders HoverCardTrigger; the host wrapper is the parent of the button.
-  const btn = screen.getByRole('button');
-  fireEvent.pointerEnter(btn.parentElement!);
-  vi.advanceTimersByTime(0); // openDelay=0 → card opens immediately
-}
-
-describe('Context color thresholds', () => {
-  it('renders bg-primary bar below default warn threshold (< 70%)', () => {
-    render(() => <FullMeter usedTokens={69000} maxTokens={100000} />);
-    openCard();
-    expect(document.querySelector('.bg-primary')).toBeInTheDocument();
-  });
-
-  it('renders bg-yellow-400 bar between default warn (70%) and danger (90%) thresholds', () => {
-    render(() => <FullMeter usedTokens={80000} maxTokens={100000} />);
-    openCard();
-    expect(document.querySelector('.bg-yellow-400')).toBeInTheDocument();
-  });
-
-  it('renders bg-red-400 bar above default danger threshold (> 90%)', () => {
-    render(() => <FullMeter usedTokens={91000} maxTokens={100000} />);
-    openCard();
-    expect(document.querySelector('.bg-red-400')).toBeInTheDocument();
-  });
-
-  it('flips to warn colour at a custom warnThreshold of 0.5', () => {
-    render(() => <FullMeter usedTokens={51000} maxTokens={100000} warnThreshold={0.5} dangerThreshold={0.9} />);
-    openCard();
-    expect(document.querySelector('.bg-yellow-400')).toBeInTheDocument();
-  });
-
-  it('flips to danger colour at custom thresholds (warn 0.5, danger 0.75)', () => {
-    render(() => <FullMeter usedTokens={76000} maxTokens={100000} warnThreshold={0.5} dangerThreshold={0.75} />);
-    openCard();
-    expect(document.querySelector('.bg-red-400')).toBeInTheDocument();
-  });
-
-  it('stays green at 50% when custom warnThreshold is 0.6', () => {
-    render(() => <FullMeter usedTokens={50000} maxTokens={100000} warnThreshold={0.6} />);
-    openCard();
-    expect(document.querySelector('.bg-primary')).toBeInTheDocument();
-  });
-});