@sovereignfs/ui 0.40.0 → 0.45.0

package/src/components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import styles from './AspectRatio.module.css';
+
+export interface AspectRatioProps {
+  /** Width / height, e.g. 16 / 9 or 1. */
+  ratio: number;
+  children: ReactNode;
+  className?: string;
+}
+
+/** AspectRatio — constrains content (image, video, embed) to a fixed ratio. */
+export function AspectRatio({ ratio, children, className }: AspectRatioProps) {
+  return (
+    <div
+      className={[styles.root, className].filter(Boolean).join(' ')}
+      style={{ aspectRatio: ratio }}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { AspectRatio } from '../AspectRatio';
+
+afterEach(cleanup);
+
+describe('AspectRatio', () => {
+  it('applies the ratio as inline CSS aspect-ratio', () => {
+    render(
+      <AspectRatio ratio={16 / 9}>
+        <img src="/x.png" alt="Preview" />
+      </AspectRatio>,
+    );
+    const root = screen.getByRole('img').parentElement;
+    expect(root?.style.aspectRatio).toContain(String(16 / 9));
+  });
+
+  it('renders children', () => {
+    render(
+      <AspectRatio ratio={1}>
+        <div>content</div>
+      </AspectRatio>,
+    );
+    expect(screen.getByText('content')).toBeDefined();
+  });
+});

package/src/components/Badge/Badge.module.css

@@ -4,27 +4,28 @@
   gap: var(--sv-space-1);
   border-radius: var(--sv-radius-sm);
   font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-xs);
   line-height: 1;
   white-space: nowrap;
   user-select: none;
+}
+
+/* Applied by default (uppercase=true) — opt out for a title-case badge that
+   renders children exactly as passed in. */
+.uppercase {
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
-/* role — neutral fill, border, title case */
+/* role — neutral fill, border */
 .role {
-  padding: 2px var(--sv-space-2);
   background: var(--sv-color-surface-sunken);
   border: 1px solid var(--sv-color-border);
   color: var(--sv-color-text-primary);
-  font-size: var(--sv-font-size-label);
   font-weight: var(--sv-font-weight-semibold);
 }
 
 /* status — tinted chip with leading colour dot; colour set by chip* classes below */
 .status {
-  padding: 2px var(--sv-space-2) 2px var(--sv-space-1);
   font-weight: var(--sv-font-weight-medium);
 }
 
@@ -54,23 +55,88 @@
 
 /* mono — monospace font, neutral surface, for type tags / versions */
 .mono {
-  padding: 2px var(--sv-space-2);
   background: var(--sv-color-surface-sunken);
   border: 1px solid var(--sv-color-border);
   color: var(--sv-color-text-muted);
   font-family: var(--sv-font-family-mono);
+}
+
+/* Size × variant — font-size and padding are the two axes that change
+   together, so each combination is one compound rule rather than two
+   composed partials fighting over the same properties. `.role.md`,
+   `.status.md`, and `.mono.md` reproduce the badge's original (and, until
+   now, only) sizing exactly, so the default (no `size` prop) renders
+   pixel-identical to before this scale existed. */
+.role.sm {
+  padding: 1px var(--sv-space-1);
+  font-size: var(--sv-font-size-label);
+}
+
+.role.md {
+  padding: 2px var(--sv-space-2);
+  font-size: var(--sv-font-size-label);
+}
+
+.role.lg {
+  padding: 3px var(--sv-space-3);
+  font-size: var(--sv-font-size-sm);
+}
+
+.mono.sm {
+  padding: 1px var(--sv-space-1);
+  font-size: var(--sv-font-size-label);
+}
+
+.mono.md {
+  padding: 2px var(--sv-space-2);
   font-size: var(--sv-font-size-xs);
 }
 
-/* Status dot */
+.mono.lg {
+  padding: 3px var(--sv-space-3);
+  font-size: var(--sv-font-size-sm);
+}
+
+/* status keeps a tighter left edge than right at every size — the dot +
+   gap already read as space before the text, so a full padding-inline-start
+   would double it up. */
+.status.sm {
+  padding: 1px var(--sv-space-1) 1px 3px;
+  font-size: var(--sv-font-size-label);
+}
+
+.status.md {
+  padding: 2px var(--sv-space-2) 2px var(--sv-space-1);
+  font-size: var(--sv-font-size-xs);
+}
+
+.status.lg {
+  padding: 3px var(--sv-space-3) 3px var(--sv-space-2);
+  font-size: var(--sv-font-size-sm);
+}
+
+/* Status dot — scales with size */
 .dot {
   display: inline-block;
-  width: 6px;
-  height: 6px;
   border-radius: var(--sv-radius-full);
   flex-shrink: 0;
 }
 
+.sm .dot {
+  width: 5px;
+  height: 5px;
+}
+
+.md .dot {
+  width: 6px;
+  height: 6px;
+}
+
+.lg .dot {
+  width: 8px;
+  height: 8px;
+}
+
 .dotGreen {
   background: var(--sv-color-success-text);
 }

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

@@ -10,16 +10,18 @@ const meta = {
     docs: {
       description: {
         component:
-          'Compact label for roles (`role`), lifecycle states (`status`), and type/version tags (`mono`). RSC-safe — no state.',
+          '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>;
@@ -54,6 +56,84 @@ export const MonoPlatform: Story = { args: { variant: 'mono', children: 'platfor
 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) => {
@@ -112,6 +192,34 @@ export const AllVariants: Story = {
             ))}
           </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

@@ -2,6 +2,7 @@ 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'
@@ -13,8 +14,16 @@ export type BadgeStatus =
 
 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;
 }
 
@@ -44,14 +53,33 @@ const STATUS_CHIP_CLASS: Record<BadgeStatus, string> = {
  * - `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', status = 'neutral', children }: BadgeProps) {
+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], chipClass].filter(Boolean).join(' ')}>
+    <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,8 +1,10 @@
 // @vitest-environment jsdom
-import { describe, expect, it } from 'vitest';
-import { render, screen } from '@testing-library/react';
+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>);
@@ -61,4 +63,26 @@ describe('Badge', () => {
     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

@@ -0,0 +1,32 @@
+.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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,49 @@
+.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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,57 @@
+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>
+  );
+}