@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Markdown/Markdown.tsx

@@ -1,168 +0,0 @@
-import type { ReactNode } from 'react';
-import { Typography } from '../Typography/Typography';
-import styles from './Markdown.module.css';
-
-export interface MarkdownProps {
-  /** Raw markdown source. Supports the subset used by Sovereign's own
-   * long-form content pages: headings (#/##/###), paragraphs, **bold**,
-   * *italic*, `code`, [links](url), unordered lists (-), and blockquotes
-   * (>), including soft-wrapped continuation lines within a paragraph or
-   * list item. Not a general-purpose CommonMark parser — no tables,
-   * images, ordered lists, or nested blocks. */
-  content: string;
-  className?: string;
-}
-
-let inlineKey = 0;
-
-/** 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) {
-      nodes.push(
-        <a key={key} href={linkHref}>
-          {linkText}
-        </a>,
-      );
-    } 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);
-/** A line that ends the current *paragraph* run — a blank line, or the
- * start of a heading, quote, or list 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);
-/** A line that ends the current *list* run — a blank line, or the start of
- * a heading or quote. 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);
-
-function parseBlocks(content: string): 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;
-    }
-
-    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 (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">
-          {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. Meant for
- * long-form, first-party content pages (privacy policy, terms of service)
- * sourced from a single markdown file, not for rendering arbitrary or
- * user-supplied markdown. */
-export function Markdown({ content, className }: MarkdownProps) {
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')}>{parseBlocks(content)}</div>
-  );
-}

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 />,
-};

package/src/components/MemberMultiSelect/MemberMultiSelect.tsx

@@ -1,67 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { Checkbox } from '../Checkbox/Checkbox';
-import styles from './MemberMultiSelect.module.css';
-
-export interface MemberMultiSelectOption {
-  id: string;
-  label: string;
-}
-
-export interface MemberMultiSelectProps {
-  options: MemberMultiSelectOption[];
-  selectedIds: Set<string>;
-  onToggle: (id: string, checked: boolean) => void;
-  /** Rendered to the right of a selected row only — e.g. a per-person `CurrencyInput` or share count. */
-  renderTrailing?: (id: string) => ReactNode;
-  /** Section label above the list, e.g. "Paid by" or "Split between". */
-  label?: string;
-  /** Helper/validation text below the list, e.g. a running total. */
-  hint?: ReactNode;
-  className?: string;
-}
-
-/**
- * MemberMultiSelect — checkbox list for picking any number of people from an
- * already-resolved set of options (group/project members, collaborators,
- * etc.). Deliberately domain-agnostic about *who* an option represents —
- * instance users and guest members are both just `{id, label}` here, so
- * nothing special is needed to include guests alongside instance users; the
- * caller's `options` array is the only place that distinction exists.
- *
- * Not a directory search or an "add a new guest" flow — pair with
- * `SuggestionInput` (search + add) for that; this component only selects
- * among options already passed in.
- */
-export function MemberMultiSelect({
-  options,
-  selectedIds,
-  onToggle,
-  renderTrailing,
-  label,
-  hint,
-  className,
-}: MemberMultiSelectProps) {
-  return (
-    <div className={[styles.group, className].filter(Boolean).join(' ')}>
-      {label && <span className={styles.label}>{label}</span>}
-      {options.map((option) => {
-        const checked = selectedIds.has(option.id);
-        return (
-          <div key={option.id} className={styles.row}>
-            <Checkbox
-              checked={checked}
-              onChange={(next) => onToggle(option.id, next)}
-              label={option.label}
-            />
-            {checked && renderTrailing && (
-              <span className={styles.trailing}>{renderTrailing(option.id)}</span>
-            )}
-          </div>
-        );
-      })}
-      {hint && <span className={styles.hint}>{hint}</span>}
-    </div>
-  );
-}

package/src/components/Menu/Menu.module.css

@@ -1,89 +0,0 @@
-/* Menu — the item list shared by both presentations (Popover panel on
- * desktop, Drawer panel on mobile); the presentational chrome around it is
- * entirely owned by those two components, not duplicated here.
- *
- * Sizing audit: reviewed against this scale's other compact controls —
- * --sv-radius-sm (6px) and --sv-font-size-sm (14px) already fit. The 44px
- * min-height is a deliberate design choice, kept unconditional (not gated
- * to pointer:coarse like Button/Checkbox) because this menu doubles as a
- * full Drawer sheet on mobile, where every item must stay comfortably
- * tappable. */
-
-.list {
-  list-style: none;
-  margin: 0;
-  padding: var(--sv-space-1);
-  display: flex;
-  flex-direction: column;
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-2);
-  width: 100%;
-  /* Min touch target (WCAG 2.5.5 / Apple HIG) — this menu renders as a
-     Drawer sheet on mobile, so every item must be comfortably tappable. */
-  min-height: var(--sv-touch-target-min, 44px);
-  padding: var(--sv-space-2) var(--sv-space-3);
-  border: none;
-  border-radius: var(--sv-radius-sm);
-  background: transparent;
-  color: var(--sv-color-text-primary);
-  font: inherit;
-  font-size: var(--sv-font-size-sm);
-  text-align: left;
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .item:hover:not(:disabled) {
-    background: var(--sv-color-surface-sunken);
-  }
-}
-
-.item:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: -2px;
-}
-
-.item:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.itemDestructive {
-  color: var(--sv-color-error-text);
-}
-
-@media (hover: hover) {
-  .itemDestructive:hover:not(:disabled) {
-    background: var(--sv-color-error-surface);
-  }
-}
-
-/* Reserved checkmark gutter for a checkable item — sized so unchecked
-   siblings in the same group still align with the checked one's icon. */
-.check {
-  display: inline-flex;
-  flex-shrink: 0;
-  width: var(--sv-icon-size-sm);
-  height: var(--sv-icon-size-sm);
-  align-items: center;
-  justify-content: center;
-}
-
-.label {
-  padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-1);
-  font-size: var(--sv-font-size-label);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.separator {
-  height: 1px;
-  margin: var(--sv-space-1) var(--sv-space-2);
-  background: var(--sv-color-border);
-}