@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Badge/Badge.stories.tsx

@@ -1,226 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Badge } from './Badge';
-import type { BadgeStatus } from './Badge';
-
-const meta = {
-  title: 'Components/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Compact label for roles (`role`), lifecycle states (`status`), and type/version tags (`mono`). Three sizes (`sm`/`md`/`lg`); ALL CAPS by default, or set `uppercase={false}` for title case. RSC-safe — no state.',
-      },
-    },
-  },
-  argTypes: {
-    variant: { control: 'select', options: ['role', 'status', 'mono'] },
-    size: { control: 'select', options: ['sm', 'md', 'lg'] },
-    status: {
-      control: 'select',
-      options: ['active', 'enabled', 'deactivated', 'failed', 'invited', 'pending', 'neutral'],
-    },
-    uppercase: { control: 'boolean' },
-  },
-  args: { children: 'Badge' },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Role: Story = { args: { variant: 'role', children: 'Owner' } };
-export const RoleAdmin: Story = { args: { variant: 'role', children: 'Admin' } };
-export const RoleUser: Story = { args: { variant: 'role', children: 'User' } };
-export const RoleAuditor: Story = { args: { variant: 'role', children: 'Auditor' } };
-
-export const StatusActive: Story = {
-  args: { variant: 'status', status: 'active', children: 'Active' },
-};
-export const StatusDeactivated: Story = {
-  args: { variant: 'status', status: 'deactivated', children: 'Deactivated' },
-};
-export const StatusInvited: Story = {
-  args: { variant: 'status', status: 'invited', children: 'Invited' },
-};
-export const StatusFailed: Story = {
-  args: { variant: 'status', status: 'failed', children: 'Failed' },
-};
-export const StatusPending: Story = {
-  args: { variant: 'status', status: 'pending', children: 'Pending' },
-};
-
-export const MonoPlatform: Story = { args: { variant: 'mono', children: 'platform' } };
-export const MonoCommunity: Story = { args: { variant: 'mono', children: 'community' } };
-export const MonoVersion: Story = { args: { variant: 'mono', children: 'v0.1.0' } };
-
-/** sm / md (default) / lg side by side, across all three variants. */
-export const Sizes: Story = {
-  render: () => {
-    const rowStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: 8 };
-    const sectionStyle: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 8 };
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <div style={sectionStyle}>
-          <div style={rowStyle}>
-            <Badge variant="role" size="sm">
-              Owner
-            </Badge>
-            <Badge variant="role" size="md">
-              Owner
-            </Badge>
-            <Badge variant="role" size="lg">
-              Owner
-            </Badge>
-          </div>
-          <div style={rowStyle}>
-            <Badge variant="status" status="active" size="sm">
-              Active
-            </Badge>
-            <Badge variant="status" status="active" size="md">
-              Active
-            </Badge>
-            <Badge variant="status" status="active" size="lg">
-              Active
-            </Badge>
-          </div>
-          <div style={rowStyle}>
-            <Badge variant="mono" size="sm">
-              v0.1.0
-            </Badge>
-            <Badge variant="mono" size="md">
-              v0.1.0
-            </Badge>
-            <Badge variant="mono" size="lg">
-              v0.1.0
-            </Badge>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-/** uppercase (default) vs. title case — same text, `uppercase={false}` on the right. */
-export const TitleCase: Story = {
-  render: () => {
-    const rowStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: 8 };
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-        <div style={rowStyle}>
-          <Badge variant="role">Owner</Badge>
-          <Badge variant="role" uppercase={false}>
-            Owner
-          </Badge>
-        </div>
-        <div style={rowStyle}>
-          <Badge variant="status" status="active">
-            Active
-          </Badge>
-          <Badge variant="status" status="active" uppercase={false}>
-            Active
-          </Badge>
-        </div>
-        <div style={rowStyle}>
-          <Badge variant="mono">Serve Route</Badge>
-          <Badge variant="mono" uppercase={false}>
-            Serve Route
-          </Badge>
-        </div>
-      </div>
-    );
-  },
-};
-
-/** All variants and statuses at a glance. */
-export const AllVariants: Story = {
-  render: (_args) => {
-    const roleLabels = ['Owner', 'Admin', 'User', 'Auditor'];
-    const statuses: { status: BadgeStatus; label: string }[] = [
-      { status: 'active', label: 'Active' },
-      { status: 'enabled', label: 'Enabled' },
-      { status: 'deactivated', label: 'Deactivated' },
-      { status: 'failed', label: 'Failed' },
-      { status: 'invited', label: 'Invited' },
-      { status: 'pending', label: 'Pending' },
-      { status: 'neutral', label: 'Neutral' },
-    ];
-    const monoLabels = ['platform', 'community', 'serve-route', 'v0.1.0', 'admin-only'];
-
-    const groupStyle: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: 8 };
-    const sectionStyle: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 8 };
-    const headingStyle: React.CSSProperties = {
-      fontSize: 11,
-      fontWeight: 600,
-      letterSpacing: '0.05em',
-      textTransform: 'uppercase',
-      color: 'var(--sv-color-text-muted)',
-      fontFamily: 'var(--sv-font-family)',
-    };
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 24, padding: 16 }}>
-        <div style={sectionStyle}>
-          <span style={headingStyle}>Role</span>
-          <div style={groupStyle}>
-            {roleLabels.map((l) => (
-              <Badge key={l} variant="role">
-                {l}
-              </Badge>
-            ))}
-          </div>
-        </div>
-        <div style={sectionStyle}>
-          <span style={headingStyle}>Status</span>
-          <div style={groupStyle}>
-            {statuses.map(({ status, label }) => (
-              <Badge key={status} variant="status" status={status}>
-                {label}
-              </Badge>
-            ))}
-          </div>
-        </div>
-        <div style={sectionStyle}>
-          <span style={headingStyle}>Mono</span>
-          <div style={groupStyle}>
-            {monoLabels.map((l) => (
-              <Badge key={l} variant="mono">
-                {l}
-              </Badge>
-            ))}
-          </div>
-        </div>
-        <div style={sectionStyle}>
-          <span style={headingStyle}>Sizes (sm / md / lg)</span>
-          <div style={{ ...groupStyle, alignItems: 'center' }}>
-            <Badge variant="role" size="sm">
-              Owner
-            </Badge>
-            <Badge variant="role" size="md">
-              Owner
-            </Badge>
-            <Badge variant="role" size="lg">
-              Owner
-            </Badge>
-          </div>
-        </div>
-        <div style={sectionStyle}>
-          <span style={headingStyle}>Title case (uppercase=false)</span>
-          <div style={{ ...groupStyle, alignItems: 'center' }}>
-            <Badge variant="role" uppercase={false}>
-              Owner
-            </Badge>
-            <Badge variant="status" status="active" uppercase={false}>
-              Active
-            </Badge>
-            <Badge variant="mono" uppercase={false}>
-              Serve Route
-            </Badge>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/Badge/Badge.tsx

@@ -1,81 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './Badge.module.css';
-
-export type BadgeVariant = 'role' | 'status' | 'mono';
-export type BadgeSize = 'sm' | 'md' | 'lg';
-export type BadgeStatus =
-  'active' | 'enabled' | 'deactivated' | 'failed' | 'invited' | 'pending' | 'neutral';
-
-export interface BadgeProps {
-  variant?: BadgeVariant;
-  /** 'sm' | 'md' (default) | 'lg'. 'md' is the badge's original — and until
-   * now, only — size, so the default renders unchanged. */
-  size?: BadgeSize;
-  /** Only relevant when variant="status" — determines the dot colour. */
-  status?: BadgeStatus;
-  /** Forces ALL CAPS display regardless of the case `children` is passed
-   * in. Defaults to `true` — every existing badge in the app relies on
-   * this. Set `false` for a title-case badge that renders exactly the text
-   * passed in (e.g. "Owner" instead of "OWNER"). */
-  uppercase?: boolean;
-  children: ReactNode;
-}
-
-const STATUS_DOT_CLASS: Record<BadgeStatus, string> = {
-  active: styles.dotGreen as string,
-  enabled: styles.dotGreen as string,
-  deactivated: styles.dotRed as string,
-  failed: styles.dotRed as string,
-  invited: styles.dotAmber as string,
-  pending: styles.dotAmber as string,
-  neutral: styles.dotGrey as string,
-};
-
-const STATUS_CHIP_CLASS: Record<BadgeStatus, string> = {
-  active: styles.chipGreen as string,
-  enabled: styles.chipGreen as string,
-  deactivated: styles.chipRed as string,
-  failed: styles.chipRed as string,
-  invited: styles.chipAmber as string,
-  pending: styles.chipAmber as string,
-  neutral: styles.chipNeutral as string,
-};
-
-/**
- * Badge — compact label for roles, lifecycle states, and type/version tags.
- *
- * - `role`   neutral surface + border, semibold — for Owner / Admin / User
- * - `status` tinted chip with leading colour dot — for Active / Deactivated / etc.
- * - `mono`   monospace font, neutral surface — for platform / community / v0.1.0
- *
- * Three sizes (`sm`/`md`/`lg`, default `md`). ALL CAPS by default
- * (`uppercase`) — set `uppercase={false}` for a title-case badge instead.
- */
-export function Badge({
-  variant = 'role',
-  size = 'md',
-  status = 'neutral',
-  uppercase = true,
-  children,
-}: BadgeProps) {
-  const isStatus = variant === 'status';
-  const dotClass = isStatus ? STATUS_DOT_CLASS[status] : undefined;
-  const chipClass = isStatus ? STATUS_CHIP_CLASS[status] : undefined;
-
-  return (
-    <span
-      className={[
-        styles.badge,
-        styles[variant],
-        styles[size],
-        chipClass,
-        uppercase && styles.uppercase,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {isStatus && <span className={[styles.dot, dotClass].join(' ')} aria-hidden />}
-      {children}
-    </span>
-  );
-}

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

@@ -1,88 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Badge } from '../Badge';
-
-afterEach(cleanup);
-
-describe('Badge', () => {
-  it('renders its children', () => {
-    render(<Badge>Owner</Badge>);
-    expect(screen.getByText('Owner')).toBeDefined();
-  });
-
-  it('defaults to role variant', () => {
-    render(<Badge>Admin</Badge>);
-    expect(screen.getByText('Admin').closest('span')?.className).toContain('role');
-  });
-
-  it('applies mono variant class', () => {
-    render(<Badge variant="mono">platform</Badge>);
-    expect(screen.getByText('platform').closest('span')?.className).toContain('mono');
-  });
-
-  it('renders status variant with a dot element', () => {
-    const { container } = render(
-      <Badge variant="status" status="active">
-        Active
-      </Badge>,
-    );
-    const dots = container.querySelectorAll('[aria-hidden]');
-    expect(dots.length).toBe(1);
-    expect(dots.item(0).className).toContain('dotGreen');
-  });
-
-  it('uses red dot for deactivated status', () => {
-    const { container } = render(
-      <Badge variant="status" status="deactivated">
-        Deactivated
-      </Badge>,
-    );
-    expect(container.querySelector('[aria-hidden]')?.className).toContain('dotRed');
-  });
-
-  it('uses amber dot for invited status', () => {
-    const { container } = render(
-      <Badge variant="status" status="invited">
-        Invited
-      </Badge>,
-    );
-    expect(container.querySelector('[aria-hidden]')?.className).toContain('dotAmber');
-  });
-
-  it('uses grey dot for neutral status', () => {
-    const { container } = render(
-      <Badge variant="status" status="neutral">
-        Neutral
-      </Badge>,
-    );
-    expect(container.querySelector('[aria-hidden]')?.className).toContain('dotGrey');
-  });
-
-  it('does not render a dot for role variant', () => {
-    const { container } = render(<Badge variant="role">Owner</Badge>);
-    expect(container.querySelectorAll('[aria-hidden]').length).toBe(0);
-  });
-
-  it('defaults to md size', () => {
-    render(<Badge>Admin</Badge>);
-    expect(screen.getByText('Admin').closest('span')?.className).toContain('md');
-  });
-
-  it('applies sm and lg size classes', () => {
-    const { rerender } = render(<Badge size="sm">Admin</Badge>);
-    expect(screen.getByText('Admin').closest('span')?.className).toContain('sm');
-    rerender(<Badge size="lg">Admin</Badge>);
-    expect(screen.getByText('Admin').closest('span')?.className).toContain('lg');
-  });
-
-  it('defaults to uppercase display', () => {
-    render(<Badge>Owner</Badge>);
-    expect(screen.getByText('Owner').closest('span')?.className).toContain('uppercase');
-  });
-
-  it('omits the uppercase class when uppercase is false', () => {
-    render(<Badge uppercase={false}>Owner</Badge>);
-    expect(screen.getByText('Owner').closest('span')?.className).not.toContain('uppercase');
-  });
-});

package/src/components/BalanceChip/BalanceChip.module.css

@@ -1,32 +0,0 @@
-.chip {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 24px;
-  padding: 2px var(--sv-space-2);
-  border: 1px solid var(--sv-color-border);
-  border-radius: var(--sv-radius-full);
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-xs);
-  font-weight: var(--sv-font-weight-semibold);
-  line-height: 1.2;
-  white-space: nowrap;
-}
-
-.owed {
-  color: var(--sv-color-success-text);
-  background: var(--sv-color-success-surface);
-  border-color: var(--sv-color-success-border);
-}
-
-.owes {
-  color: var(--sv-color-error-text);
-  background: var(--sv-color-error-surface);
-  border-color: var(--sv-color-error-border);
-}
-
-.settled {
-  color: var(--sv-color-text-muted);
-  background: var(--sv-color-surface-sunken);
-  border-color: var(--sv-color-border);
-}

package/src/components/BalanceChip/BalanceChip.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { BalanceChip } from './BalanceChip';
-
-const meta = {
-  title: 'Components/BalanceChip',
-  component: BalanceChip,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Inline net-balance indicator — green when owed to them, red when they owe, neutral when settled. Not tied to expense-splitting specifically: any plugin tracking a signed balance between people can use it.',
-      },
-    },
-  },
-  args: {
-    amountCents: 2500,
-    currency: 'USD',
-  },
-} satisfies Meta<typeof BalanceChip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Owed: Story = {
-  args: { amountCents: 2500, currency: 'USD' },
-};
-
-export const Owes: Story = {
-  args: { amountCents: -1350, currency: 'USD' },
-};
-
-export const SettledUp: Story = {
-  args: { amountCents: 0, currency: 'USD' },
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: 'var(--sv-space-2)' }}>
-      <BalanceChip amountCents={2500} currency="USD" />
-      <BalanceChip amountCents={-1350} currency="USD" />
-      <BalanceChip amountCents={0} currency="USD" />
-    </div>
-  ),
-};

package/src/components/BalanceChip/BalanceChip.tsx

@@ -1,33 +0,0 @@
-import styles from './BalanceChip.module.css';
-
-export interface BalanceChipProps {
-  /** Smallest currency unit (cents). Positive = owed to them, negative = they owe, zero = settled. */
-  amountCents: number;
-  /** ISO 4217 currency code, e.g. "USD". */
-  currency: string;
-  className?: string;
-}
-
-function formatAbsCents(cents: number): string {
-  return (Math.abs(cents) / 100).toFixed(2);
-}
-
-/**
- * BalanceChip — inline balance indicator (green = owed to them, red = they
- * owe, neutral = settled up). For any plugin tracking who-owes-whom — not
- * Tally-specific despite the naming; "amountCents" is a generic signed net
- * balance, not tied to expense-splitting semantics.
- */
-export function BalanceChip({ amountCents, currency, className }: BalanceChipProps) {
-  const direction = amountCents > 0 ? 'owed' : amountCents < 0 ? 'owes' : 'settled';
-  const text =
-    direction === 'settled'
-      ? 'Settled up'
-      : `${direction === 'owed' ? 'Owed' : 'Owes'} ${currency} ${formatAbsCents(amountCents)}`;
-
-  return (
-    <span className={[styles.chip, styles[direction], className].filter(Boolean).join(' ')}>
-      {text}
-    </span>
-  );
-}

package/src/components/Breadcrumb/Breadcrumb.module.css

@@ -1,49 +0,0 @@
-.nav {
-  min-width: 0;
-}
-
-.list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sv-space-1);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.item {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sv-space-1);
-}
-
-.link {
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-muted);
-  text-decoration: none;
-}
-
-@media (hover: hover) {
-  .link:hover {
-    color: var(--sv-color-text-primary);
-    text-decoration: underline;
-  }
-}
-
-.link:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-  border-radius: var(--sv-radius-sm);
-}
-
-.current {
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-medium);
-  color: var(--sv-color-text-primary);
-}
-
-.separator {
-  color: var(--sv-color-text-muted);
-  flex-shrink: 0;
-}

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Breadcrumb } from './Breadcrumb';
-
-const meta = {
-  title: 'Components/Breadcrumb',
-  component: Breadcrumb,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Link trail. The last item (no href) renders as plain text with aria-current="page". Pass renderLink to use a client-side router Link instead of a plain <a> — matters inside overlay-shell plugins, where a full page reload breaks the dismiss flow.',
-      },
-    },
-  },
-  args: {
-    items: [
-      { label: 'Console', href: '/console' },
-      { label: 'Plugins', href: '/console/plugins' },
-      { label: 'sovereign-tasks' },
-    ],
-  },
-} satisfies Meta<typeof Breadcrumb>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {};
-
-export const TwoLevels: Story = {
-  args: {
-    items: [{ label: 'Console', href: '/console' }, { label: 'Settings' }],
-  },
-};
-
-export const WithRenderLink: Story = {
-  name: 'With custom renderLink',
-  args: {
-    renderLink: (item, children) => (
-      <a href={item.href} data-client-side-nav="true">
-        {children}
-      </a>
-    ),
-  },
-};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,57 +0,0 @@
-import type { ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-import styles from './Breadcrumb.module.css';
-
-export interface BreadcrumbItem {
-  label: string;
-  /** Omit for the current page — rendered as plain text with aria-current. */
-  href?: string;
-}
-
-export interface BreadcrumbProps {
-  items: BreadcrumbItem[];
-  /** Renders a linked item. Defaults to a plain `<a href>`, which causes a
-   * full page reload — pass Next's `<Link>` (or equivalent) to keep
-   * navigation client-side, which matters inside overlay-shell plugins
-   * where a full reload breaks the router.back()-driven dismiss flow. */
-  renderLink?: (item: BreadcrumbItem, children: ReactNode) => ReactNode;
-  className?: string;
-  'aria-label'?: string;
-}
-
-export function Breadcrumb({
-  items,
-  renderLink,
-  className,
-  'aria-label': ariaLabel = 'Breadcrumb',
-}: BreadcrumbProps) {
-  return (
-    <nav aria-label={ariaLabel} className={[styles.nav, className].filter(Boolean).join(' ')}>
-      <ol className={styles.list}>
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1;
-          return (
-            <li key={item.label + index} className={styles.item}>
-              {item.href ? (
-                renderLink ? (
-                  renderLink(item, item.label)
-                ) : (
-                  <a href={item.href} className={styles.link}>
-                    {item.label}
-                  </a>
-                )
-              ) : (
-                <span className={styles.current} aria-current="page">
-                  {item.label}
-                </span>
-              )}
-              {!isLast && (
-                <Icon name="chevron-right" size="xs" aria-hidden className={styles.separator} />
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-}