@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/Markdown/Markdown.tsx

@@ -1,305 +0,0 @@
-import { Fragment, type ReactNode } from 'react';
-import { Typography } from '../Typography/Typography';
-import styles from './Markdown.module.css';
-
-export interface MarkdownProps {
-  /** Raw markdown source. Supports: headings (#/##/###), paragraphs,
-   * **bold**, *italic*, `code`, [links](url), unordered lists (-), ordered
-   * lists (1. / 1)), fenced code blocks (```), and blockquotes (>),
-   * including soft-wrapped continuation lines within a paragraph or list
-   * item. Not a general-purpose CommonMark parser — no tables, images, or
-   * nested blocks. */
-  content: string;
-  /** Renders every line within a paragraph on its own visual line (a
-   * `<br>` between them) instead of the default CommonMark-style soft-wrap
-   * (consecutive lines joined with a single space, requiring a blank line
-   * for a new paragraph). Off by default — the soft-wrap behavior is
-   * correct for this component's primary use (long-form, first-party
-   * content authored *as* markdown, where a hard line break is a
-   * deliberate `\`  ` or blank-line choice). Turn this on when rendering
-   * plain, user-typed multi-line text that happens to be passed through
-   * this component (e.g. a card description or comment body edited in an
-   * ordinary `<textarea>`) — there, every Enter press is a real,
-   * intentional line break the user typed, and silently collapsing it
-   * into one run-on paragraph reads as broken, not as "markdown
-   * formatting applied." */
-  preserveLineBreaks?: boolean;
-  className?: string;
-}
-
-let inlineKey = 0;
-
-/** Schemes allowed in a rendered `[text](url)` link's `href`. Anything else —
- *  most importantly `javascript:` — is rejected: `content` here can be
- *  LLM-generated (Warden's chat replies), so a prompt-injected document or a
- *  compromised model is a realistic way for an attacker-chosen URL to end up
- *  in this position. */
-const SAFE_HREF_SCHEMES = new Set(['http', 'https', 'mailto', 'tel']);
-
-function isSafeHref(href: string): boolean {
-  const scheme = /^([a-zA-Z][a-zA-Z\d+.-]*):/.exec(href)?.[1];
-  return scheme === undefined || SAFE_HREF_SCHEMES.has(scheme.toLowerCase());
-}
-
-/** Returns a link's `href` value ready to render, or `null` to reject it.
- *  Rejecting is what keeps an unsafe URL out of the DOM; `encodeURI` on top
- *  is the contextual output-encoding this class of finding calls for. The
- *  sink below reads this function's *return value*, never the raw `href` —
- *  a boolean guard around the original string still leaves the tainted
- *  value itself flowing into `href`. Browsers ignore tabs/newlines when
- *  parsing a URL's scheme, so those are stripped first to close a
- *  `jav\tascript:`-style bypass; `encodeURI` throws on a lone unpaired
- *  surrogate, hence the try/catch. */
-function sanitizeHref(href: string): string | null {
-  const normalized = href.replace(/[\t\n\r]/g, '').trim();
-  if (!normalized || !isSafeHref(normalized)) return null;
-  try {
-    return encodeURI(normalized);
-  } catch {
-    return null;
-  }
-}
-
-/** Parses **bold**, *italic*, `code`, and [text](url) within a line of text. */
-function parseInline(text: string): ReactNode[] {
-  const nodes: ReactNode[] = [];
-  const pattern = /\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*|\*([^*]+)\*|`([^`]+)`/;
-  let remaining = text;
-
-  while (remaining.length > 0) {
-    const match = pattern.exec(remaining);
-    if (!match) {
-      nodes.push(remaining);
-      break;
-    }
-    if (match.index > 0) nodes.push(remaining.slice(0, match.index));
-
-    const [full, linkText, linkHref, boldText, italicText, codeText] = match;
-    const key = `md-inline-${inlineKey++}`;
-    if (linkHref !== undefined) {
-      const safeHref = sanitizeHref(linkHref);
-      nodes.push(
-        safeHref !== null ? (
-          <a key={key} href={safeHref}>
-            {linkText}
-          </a>
-        ) : (
-          linkText
-        ),
-      );
-    } else if (boldText !== undefined) {
-      nodes.push(<strong key={key}>{boldText}</strong>);
-    } else if (italicText !== undefined) {
-      nodes.push(<em key={key}>{italicText}</em>);
-    } else if (codeText !== undefined) {
-      nodes.push(<code key={key}>{codeText}</code>);
-    }
-    remaining = remaining.slice(match.index + full.length);
-  }
-
-  return nodes;
-}
-
-const isQuote = (l: string) => l.startsWith('> ') || l === '>';
-const isListItem = (l: string) => l.startsWith('- ');
-const isHeading = (l: string) => /^#{1,3}\s+/.test(l);
-/** ```` ```lang ```` — an opening (or closing) code fence. */
-const isFence = (l: string) => /^\s*`{3,}/.test(l);
-/** `1. item` or `1) item`. Bounded digit count so a long numeric line
- *  can't be mistaken for a list marker. */
-const isOrderedItem = (l: string) => /^\d{1,9}[.)]\s+/.test(l);
-/** A line that ends the current *paragraph* run — a blank line, or the
- * start of a heading, quote, list, or code block. Anything else (including
- * an indented continuation line) is folded into the paragraph, matching how
- * the source markdown soft-wraps prose across lines. */
-const endsParagraph = (l: string) =>
-  l.trim() === '' || isHeading(l) || isQuote(l) || isListItem(l) || isOrderedItem(l) || isFence(l);
-/** A line that ends the current *unordered list* run — a blank line, or the
- * start of a heading, quote, code block, or an *ordered* item. Deliberately
- * does NOT include `isListItem`: a list item's own opening line legitimately
- * satisfies `isListItem`, so reusing `endsParagraph` here (which does) would
- * treat the first line of every list as ending the list before it started —
- * the list-collection loop would then never advance, looping forever. */
-const endsList = (l: string) =>
-  l.trim() === '' || isHeading(l) || isQuote(l) || isFence(l) || isOrderedItem(l);
-/** The ordered-list mirror of `endsList` — excludes `isOrderedItem` for the
- *  same reason, and treats an unordered item as the start of a new block. */
-const endsOrderedList = (l: string) =>
-  l.trim() === '' || isHeading(l) || isQuote(l) || isFence(l) || isListItem(l);
-
-function parseBlocks(content: string, preserveLineBreaks: boolean): ReactNode[] {
-  const lines = content.replace(/\r\n/g, '\n').split('\n');
-  const blocks: ReactNode[] = [];
-  let i = 0;
-  let blockKey = 0;
-
-  while (i < lines.length) {
-    const line = lines[i] ?? '';
-
-    if (line.trim() === '') {
-      i++;
-      continue;
-    }
-
-    // Checked before every other block type: everything between the fences
-    // is verbatim, including blank lines and lines that would otherwise
-    // read as headings, quotes, or list items.
-    if (isFence(line)) {
-      const fenceMatch = /^\s*(`{3,})(.*)$/.exec(line);
-      const fence = fenceMatch?.[1] ?? '```';
-      const language = (fenceMatch?.[2] ?? '').trim();
-      const closing = new RegExp(`^\\s*${fence}\\s*$`);
-      i++;
-      const codeLines: string[] = [];
-      while (i < lines.length && !closing.test(lines[i] ?? '')) {
-        codeLines.push(lines[i] ?? '');
-        i++;
-      }
-      // Steps past the closing fence; a no-op at end of input, so an
-      // unterminated fence renders the remainder as code (as CommonMark
-      // does) rather than looping.
-      i++;
-      blocks.push(
-        <div key={blockKey++} className={styles.block}>
-          <pre className={styles.codeBlock}>
-            <code data-language={language || undefined}>{codeLines.join('\n')}</code>
-          </pre>
-        </div>,
-      );
-      continue;
-    }
-
-    const heading = /^(#{1,3})\s+(.*)$/.exec(line);
-    if (heading) {
-      const level = (heading[1]?.length ?? 1) as 1 | 2 | 3;
-      blocks.push(
-        <div key={blockKey++} className={styles.block} data-heading>
-          <Typography variant={`h${level}` as 'h1' | 'h2' | 'h3'}>
-            {parseInline(heading[2] ?? '')}
-          </Typography>
-        </div>,
-      );
-      i++;
-      continue;
-    }
-
-    if (isQuote(line)) {
-      const quoteLines: string[] = [];
-      while (i < lines.length && isQuote(lines[i] ?? '')) {
-        quoteLines.push((lines[i] ?? '').slice(2));
-        i++;
-      }
-      blocks.push(
-        <div key={blockKey++} className={styles.block}>
-          <blockquote className={styles.blockquote}>
-            <Typography variant="body" as="p">
-              {parseInline(quoteLines.join(' '))}
-            </Typography>
-          </blockquote>
-        </div>,
-      );
-      continue;
-    }
-
-    if (isOrderedItem(line)) {
-      const items: string[] = [];
-      let start: number | undefined;
-      while (i < lines.length && !endsOrderedList(lines[i] ?? '')) {
-        const current = lines[i] ?? '';
-        const match = /^(\d{1,9})[.)]\s+(.*)$/.exec(current);
-        if (match) {
-          // Honour the author's own starting number (a list resuming at 4),
-          // but let the browser number the rest — markdown's own numbers
-          // are conventionally ignored after the first.
-          if (start === undefined) start = Number(match[1]);
-          items.push(match[2] ?? '');
-        } else {
-          const lastIndex = items.length - 1;
-          items[lastIndex] = `${items[lastIndex] ?? ''} ${current.trim()}`;
-        }
-        i++;
-      }
-      blocks.push(
-        <div key={blockKey++} className={styles.block}>
-          <ol
-            className={styles.list}
-            start={start !== undefined && start !== 1 ? start : undefined}
-          >
-            {items.map((item, idx) => (
-              <Typography key={idx} variant="body" as="li">
-                {parseInline(item)}
-              </Typography>
-            ))}
-          </ol>
-        </div>,
-      );
-      continue;
-    }
-
-    if (isListItem(line)) {
-      const items: string[] = [];
-      while (i < lines.length && !endsList(lines[i] ?? '')) {
-        const current = lines[i] ?? '';
-        if (isListItem(current)) {
-          items.push(current.slice(2));
-        } else {
-          // Continuation of the previous item's wrapped text.
-          const lastIndex = items.length - 1;
-          items[lastIndex] = `${items[lastIndex] ?? ''} ${current.trim()}`;
-        }
-        i++;
-      }
-      blocks.push(
-        <div key={blockKey++} className={styles.block}>
-          <ul className={styles.list}>
-            {items.map((item, idx) => (
-              <Typography key={idx} variant="body" as="li">
-                {parseInline(item)}
-              </Typography>
-            ))}
-          </ul>
-        </div>,
-      );
-      continue;
-    }
-
-    const paraLines: string[] = [];
-    while (i < lines.length && !endsParagraph(lines[i] ?? '')) {
-      paraLines.push((lines[i] ?? '').trim());
-      i++;
-    }
-    blocks.push(
-      <div key={blockKey++} className={styles.block}>
-        <Typography variant="body" as="p">
-          {preserveLineBreaks
-            ? paraLines.map((paraLine, lineIdx) => (
-                <Fragment key={lineIdx}>
-                  {lineIdx > 0 && <br />}
-                  {parseInline(paraLine)}
-                </Fragment>
-              ))
-            : parseInline(paraLines.join(' '))}
-        </Typography>
-      </div>,
-    );
-  }
-
-  return blocks;
-}
-
-/** Renders a constrained markdown subset (see MarkdownProps) as styled React
- * elements built from Typography — no HTML string injection. Primarily
- * meant for long-form, first-party content pages (privacy policy, terms of
- * service) sourced from a single markdown file — not a general-purpose
- * CommonMark renderer for arbitrary markdown. Also fine for plain,
- * user-typed multi-line text (a card description, a comment body) edited
- * in an ordinary `<textarea>` and passed through unchanged, as long as
- * `preserveLineBreaks` is set — see that prop's own doc comment for why it
- * isn't the default. */
-export function Markdown({ content, preserveLineBreaks = false, className }: MarkdownProps) {
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')}>
-      {parseBlocks(content, preserveLineBreaks)}
-    </div>
-  );
-}

package/src/components/Markdown/__tests__/Markdown.test.tsx

@@ -1,144 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render } from '@testing-library/react';
-import { Markdown } from '../Markdown';
-
-afterEach(cleanup);
-
-describe('Markdown', () => {
-  it('joins consecutive lines into one paragraph by default (soft-wrap)', () => {
-    const { container } = render(<Markdown content={'Line one.\nLine two.'} />);
-    const p = container.querySelector('p');
-    expect(p?.textContent).toBe('Line one. Line two.');
-    expect(p?.querySelector('br')).toBeNull();
-  });
-
-  it('preserveLineBreaks keeps each line on its own line via <br>', () => {
-    const { container } = render(
-      <Markdown content={'Line one.\nLine two.\nLine three.'} preserveLineBreaks />,
-    );
-    const p = container.querySelector('p');
-    expect(p?.querySelectorAll('br')).toHaveLength(2);
-    expect(p?.textContent).toBe('Line one.Line two.Line three.');
-  });
-
-  it('preserveLineBreaks still starts a new paragraph on a blank line', () => {
-    const { container } = render(
-      <Markdown content={'First paragraph.\n\nSecond paragraph.'} preserveLineBreaks />,
-    );
-    const paragraphs = container.querySelectorAll('p');
-    expect(paragraphs).toHaveLength(2);
-    expect(paragraphs[0]?.textContent).toBe('First paragraph.');
-    expect(paragraphs[1]?.textContent).toBe('Second paragraph.');
-  });
-
-  it('preserveLineBreaks does not affect headings, quotes, or lists', () => {
-    const { container } = render(
-      <Markdown content={'# Heading\n\n- item one\n- item two'} preserveLineBreaks />,
-    );
-    expect(container.querySelector('h1')?.textContent).toBe('Heading');
-    expect(container.querySelectorAll('li')).toHaveLength(2);
-  });
-});
-
-describe('Markdown — ordered lists and fenced code', () => {
-  it('renders an ordered list, numbering from the browser', () => {
-    const { container } = render(<Markdown content={'1. first\n2. second\n3. third'} />);
-
-    const list = container.querySelector('ol');
-    expect(list).not.toBeNull();
-    expect([...(list?.querySelectorAll('li') ?? [])].map((li) => li.textContent)).toEqual([
-      'first',
-      'second',
-      'third',
-    ]);
-    expect(list?.getAttribute('start')).toBeNull();
-  });
-
-  it('honours a list that starts at a number other than 1', () => {
-    const { container } = render(<Markdown content={'4. fourth\n5. fifth'} />);
-    expect(container.querySelector('ol')?.getAttribute('start')).toBe('4');
-  });
-
-  it('accepts the 1) marker style and applies inline formatting inside items', () => {
-    const { container } = render(<Markdown content={'1) do **this**'} />);
-
-    expect(container.querySelector('ol')).not.toBeNull();
-    expect(container.querySelector('ol strong')?.textContent).toBe('this');
-  });
-
-  it('keeps ordered and unordered lists as separate blocks', () => {
-    const { container } = render(<Markdown content={'- bullet\n1. number'} />);
-
-    expect(container.querySelectorAll('ul')).toHaveLength(1);
-    expect(container.querySelectorAll('ol')).toHaveLength(1);
-  });
-
-  it('renders a fenced code block verbatim, without parsing its contents', () => {
-    const content = ['```ts', 'const a = 1; // **not bold**', '', '# not a heading', '```'].join(
-      '\n',
-    );
-    const { container } = render(<Markdown content={content} />);
-
-    const code = container.querySelector('pre code');
-    expect(code?.textContent).toBe('const a = 1; // **not bold**\n\n# not a heading');
-    expect(container.querySelector('strong')).toBeNull();
-    expect(container.querySelector('h1')).toBeNull();
-  });
-
-  it('exposes the fence language for styling hooks', () => {
-    const { container } = render(<Markdown content={'```python\nx = 1\n```'} />);
-    expect(container.querySelector('pre code')?.getAttribute('data-language')).toBe('python');
-  });
-
-  it('terminates on an unclosed fence instead of looping', () => {
-    const { container } = render(<Markdown content={'text\n\n```\nnever closed'} />);
-    expect(container.querySelector('pre code')?.textContent).toBe('never closed');
-  });
-
-  it('separates a code block from the paragraph before it', () => {
-    const { container } = render(<Markdown content={'Try this:\n```\nrun me\n```'} />);
-
-    expect(container.querySelector('p')?.textContent).toBe('Try this:');
-    expect(container.querySelector('pre code')?.textContent).toBe('run me');
-  });
-});
-
-describe('Markdown — link hrefs', () => {
-  it('renders an http(s) link as a real anchor', () => {
-    const { container } = render(<Markdown content={'[docs](https://example.com/docs)'} />);
-    const link = container.querySelector('a');
-    expect(link?.getAttribute('href')).toBe('https://example.com/docs');
-    expect(link?.textContent).toBe('docs');
-  });
-
-  it('renders a relative link as a real anchor', () => {
-    const { container } = render(<Markdown content={'[here](/warden/models)'} />);
-    expect(container.querySelector('a')?.getAttribute('href')).toBe('/warden/models');
-  });
-
-  it('renders a mailto: link as a real anchor', () => {
-    const { container } = render(<Markdown content={'[email](mailto:a@example.com)'} />);
-    expect(container.querySelector('a')?.getAttribute('href')).toBe('mailto:a@example.com');
-  });
-
-  it('neutralizes a javascript: URL instead of making it clickable', () => {
-    const { container } = render(
-      <Markdown content={'[click me](javascript:alert(document.cookie))'} />,
-    );
-    expect(container.querySelector('a')).toBeNull();
-    expect(container.textContent).toContain('click me');
-  });
-
-  it('neutralizes a javascript: URL disguised with an embedded tab', () => {
-    const { container } = render(<Markdown content={'[x](jav\tascript:alert(1))'} />);
-    expect(container.querySelector('a')).toBeNull();
-  });
-
-  it('neutralizes a data: URL', () => {
-    const { container } = render(
-      <Markdown content={'[x](data:text/html,<script>alert(1)</script>)'} />,
-    );
-    expect(container.querySelector('a')).toBeNull();
-  });
-});

package/src/components/Marker/Marker.module.css

@@ -1,33 +0,0 @@
-.marker {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  margin: 0 1px;
-  border: none;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-accent-subtle);
-  color: var(--sv-color-accent);
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-label);
-  font-weight: var(--sv-font-weight-semibold);
-  line-height: 1;
-  vertical-align: super;
-}
-
-button.marker {
-  cursor: pointer;
-}
-
-button.marker:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 1px;
-}
-
-@media (hover: hover) {
-  button.marker:hover {
-    background: color-mix(in srgb, var(--sv-color-accent-subtle) 70%, var(--sv-color-accent) 30%);
-  }
-}

package/src/components/Marker/Marker.stories.tsx

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Marker } from './Marker';
-
-const meta = {
-  title: 'Components/Marker',
-  component: Marker,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Inline citation/reference marker, for attributing part of an assistant answer to a source (Sovereign Harness "source trace").',
-      },
-    },
-  },
-  args: { index: 1, label: 'Source: Notes' },
-} satisfies Meta<typeof Marker>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Static: Story = {};
-
-export const Clickable: Story = {
-  args: { onClick: () => {} },
-};
-
-export const InContext: Story = {
-  render: () => (
-    <p style={{ fontSize: 14, maxWidth: 400 }}>
-      Your next task deadline is Thursday
-      <Marker index={1} label="Source: Tasks" onClick={() => {}} />, and you have two unread
-      messages from the team
-      <Marker index={2} label="Source: Notes" onClick={() => {}} />.
-    </p>
-  ),
-};

package/src/components/Marker/Marker.tsx

@@ -1,34 +0,0 @@
-import styles from './Marker.module.css';
-
-export interface MarkerProps {
-  /** The number shown in the marker, e.g. 1, 2, 3. */
-  index: number;
-  /** Accessible label describing the citation, e.g. "Source: Notes". */
-  label: string;
-  /** Reveals source details (e.g. opens a source trace panel) when given. */
-  onClick?: () => void;
-  className?: string;
-}
-
-/**
- * Marker — inline citation/reference marker, for attributing part of an
- * assistant's answer to a source (matches RFC 0040's "source trace" —
- * Harness shows which plugin/data source informed an answer).
- */
-export function Marker({ index, label, onClick, className }: MarkerProps) {
-  const classes = [styles.marker, className].filter(Boolean).join(' ');
-
-  if (onClick) {
-    return (
-      <button type="button" onClick={onClick} aria-label={label} className={classes}>
-        {index}
-      </button>
-    );
-  }
-
-  return (
-    <span aria-label={label} className={classes}>
-      {index}
-    </span>
-  );
-}

package/src/components/Marker/__tests__/Marker.test.tsx

@@ -1,23 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Marker } from '../Marker';
-
-afterEach(cleanup);
-
-describe('Marker', () => {
-  it('renders as a static span with an accessible label when no onClick is given', () => {
-    render(<Marker index={1} label="Source: Notes" />);
-    const el = screen.getByLabelText('Source: Notes');
-    expect(el.tagName).toBe('SPAN');
-    expect(el.textContent).toBe('1');
-  });
-
-  it('renders as a button and fires onClick when given', () => {
-    const onClick = vi.fn();
-    render(<Marker index={2} label="Source: Tasks" onClick={onClick} />);
-    const el = screen.getByRole('button', { name: 'Source: Tasks' });
-    el.click();
-    expect(onClick).toHaveBeenCalled();
-  });
-});

package/src/components/MemberMultiSelect/MemberMultiSelect.module.css

@@ -1,27 +0,0 @@
-.group {
-  display: grid;
-  gap: var(--sv-space-2);
-}
-
-.label {
-  font-size: var(--sv-font-size-xs);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-muted);
-}
-
-.row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sv-space-2);
-}
-
-.trailing {
-  flex-shrink: 0;
-  max-width: 8rem;
-}
-
-.hint {
-  font-size: var(--sv-font-size-xs);
-  color: var(--sv-color-text-muted);
-}

package/src/components/MemberMultiSelect/MemberMultiSelect.stories.tsx

@@ -1,74 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { CurrencyInput } from '../CurrencyInput/CurrencyInput';
-import { MemberMultiSelect, type MemberMultiSelectOption } from './MemberMultiSelect';
-
-const meta = {
-  title: 'Components/MemberMultiSelect',
-  component: MemberMultiSelect,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Checkbox list for picking any number of people from an already-resolved set of options. Domain-agnostic about who an option represents — instance users and guest members are both just `{id, label}`, so nothing special is needed to include guests. Not a directory search or invite flow; pair with SuggestionInput for that.',
-      },
-    },
-  },
-  args: {
-    options: [],
-    selectedIds: new Set(),
-    onToggle: () => {},
-  },
-} satisfies Meta<typeof MemberMultiSelect>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const OPTIONS: MemberMultiSelectOption[] = [
-  { id: '1', label: 'Priya' },
-  { id: '2', label: 'Jamie (guest)' },
-  { id: '3', label: 'Sam' },
-];
-
-function ControlledMultiSelect({ withTrailing = false }: { withTrailing?: boolean }) {
-  const [selected, setSelected] = useState<Set<string>>(new Set(['1', '3']));
-  const [amounts, setAmounts] = useState<Record<string, number | null>>({});
-
-  return (
-    <MemberMultiSelect
-      options={OPTIONS}
-      selectedIds={selected}
-      onToggle={(id, checked) => {
-        setSelected((prev) => {
-          const next = new Set(prev);
-          if (checked) next.add(id);
-          else next.delete(id);
-          return next;
-        });
-      }}
-      label="Split between"
-      hint={withTrailing ? 'Remaining: 0.00' : undefined}
-      renderTrailing={
-        withTrailing
-          ? (id) => (
-              <CurrencyInput
-                valueCents={amounts[id] ?? null}
-                onValueChange={(cents) => setAmounts((prev) => ({ ...prev, [id]: cents }))}
-                placeholder="0.00"
-                aria-label={`Amount for ${OPTIONS.find((o) => o.id === id)?.label}`}
-              />
-            )
-          : undefined
-      }
-    />
-  );
-}
-
-export const Default: Story = {
-  render: () => <ControlledMultiSelect />,
-};
-
-export const WithTrailingAmountInput: Story = {
-  render: () => <ControlledMultiSelect withTrailing />,
-};