@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/Alert/Alert.stories.tsx

@@ -1,96 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Alert } from './Alert';
-
-const meta = {
-  title: 'Components/Alert',
-  component: Alert,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Inline, non-dismissible banner. Distinct from Toast (transient) and SystemBanner (instance-wide) — for form-level errors or explaining an empty/blocked state. A leading icon defaults per variant (none for neutral) — pass `icon` to override it or `icon={false}` to suppress it.',
-      },
-    },
-  },
-  argTypes: {
-    variant: { control: 'select', options: ['info', 'success', 'warning', 'error', 'neutral'] },
-  },
-  args: {
-    variant: 'info',
-    children: 'This is an informational message.',
-  },
-} satisfies Meta<typeof Alert>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Info: Story = {
-  args: { variant: 'info' },
-};
-
-export const Success: Story = {
-  args: { variant: 'success', children: 'Your changes have been saved.' },
-};
-
-export const Warning: Story = {
-  args: { variant: 'warning', children: 'This action cannot be undone.' },
-};
-
-export const ErrorVariant: Story = {
-  name: 'Error',
-  args: { variant: 'error', children: 'Select a size to continue.' },
-};
-
-export const Neutral: Story = {
-  args: { variant: 'neutral', children: 'This project has no members yet.' },
-};
-
-export const WithHeading: Story = {
-  args: {
-    variant: 'error',
-    heading: 'Something went wrong',
-    children: 'We couldn’t save your changes. Check your connection and try again.',
-  },
-};
-
-export const WithoutHeading: Story = {
-  args: { variant: 'success', children: 'Invite sent.' },
-};
-
-/** Icon + heading + body — the pattern most alert examples use. */
-export const IconHeadingAndBody: Story = {
-  args: {
-    variant: 'success',
-    heading: 'Payment successful',
-    children:
-      'Your payment of $29.99 has been processed. A receipt has been sent to your email address.',
-  },
-};
-
-export const CustomIcon: Story = {
-  args: { variant: 'neutral', icon: 'bell', children: 'You have 3 unread notifications.' },
-};
-
-export const NoIcon: Story = {
-  args: { variant: 'success', icon: false, children: 'Your changes have been saved.' },
-};
-
-/** Every variant with its default icon, at a glance. */
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 480 }}>
-      <Alert variant="info" heading="New feature available">
-        We’ve added dark mode support. You can enable it in your account settings.
-      </Alert>
-      <Alert variant="success" heading="Payment successful">
-        Your payment of $29.99 has been processed. A receipt has been sent to your email address.
-      </Alert>
-      <Alert variant="warning">This action cannot be undone.</Alert>
-      <Alert variant="error">Select a size to continue.</Alert>
-      <Alert variant="neutral">This project has no members yet.</Alert>
-    </div>
-  ),
-};

package/src/components/Alert/Alert.tsx

@@ -1,58 +0,0 @@
-import type { ReactNode } from 'react';
-import { Icon, type IconName } from '../Icon/Icon';
-import styles from './Alert.module.css';
-
-export type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
-
-/** Sensible default icon per variant. `neutral` has none — there's no
- * universal "neutral" glyph, so it stays icon-less unless `icon` is set
- * explicitly. */
-const DEFAULT_ICON: Record<AlertVariant, IconName | undefined> = {
-  info: 'info',
-  success: 'circle-check',
-  warning: 'alert-triangle',
-  error: 'circle-x',
-  neutral: undefined,
-};
-
-export interface AlertProps {
-  variant: AlertVariant;
-  heading?: string;
-  /** Leading icon next to the heading. Defaults to a per-variant icon (see
-   * `DEFAULT_ICON`) — pass an `IconName` to override it, or `false` to
-   * suppress the icon entirely. Purely decorative: the variant's colour and
-   * `heading`/`children` text already carry the meaning. */
-  icon?: IconName | false;
-  children: ReactNode;
-  id?: string;
-  className?: string;
-}
-
-/**
- * Alert — inline, non-dismissible banner.
- *
- * Distinct from `Toast` (transient, auto-dismissing) and `SystemBanner`
- * (instance-wide): Alert is for in-context messaging — form-level errors,
- * or explaining an empty/blocked state.
- *
- * `role="alert"` for `error` (interrupts screen readers immediately, since
- * an error demands attention); `role="status"` for the other variants
- * (announced politely, without interrupting).
- */
-export function Alert({ variant, heading, icon, children, id, className }: AlertProps) {
-  const resolvedIcon = icon === undefined ? DEFAULT_ICON[variant] : icon || undefined;
-
-  return (
-    <div
-      id={id}
-      role={variant === 'error' ? 'alert' : 'status'}
-      className={[styles.alert, styles[variant], className].filter(Boolean).join(' ')}
-    >
-      {resolvedIcon && <Icon name={resolvedIcon} size="sm" className={styles.icon} aria-hidden />}
-      <div className={styles.content}>
-        {heading && <p className={styles.heading}>{heading}</p>}
-        <div className={styles.body}>{children}</div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,75 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Alert } from '../Alert';
-
-afterEach(cleanup);
-
-describe('Alert', () => {
-  it('uses role="alert" for the error variant', () => {
-    render(<Alert variant="error">Something went wrong.</Alert>);
-    expect(screen.getByRole('alert')).toBeDefined();
-  });
-
-  it.each(['info', 'success', 'warning', 'neutral'] as const)(
-    'uses role="status" for the %s variant',
-    (variant) => {
-      render(<Alert variant={variant}>Message</Alert>);
-      expect(screen.getByRole('status')).toBeDefined();
-    },
-  );
-
-  it('renders a heading when given one', () => {
-    render(
-      <Alert variant="warning" heading="Heads up">
-        Body text.
-      </Alert>,
-    );
-    expect(screen.getByText('Heads up')).toBeDefined();
-    expect(screen.getByText('Body text.')).toBeDefined();
-  });
-
-  it('renders without a heading', () => {
-    render(<Alert variant="info">Just the body.</Alert>);
-    expect(screen.getByText('Just the body.')).toBeDefined();
-  });
-
-  it('renders a default icon for info, success, warning, and error, but none for neutral', () => {
-    const info = render(<Alert variant="info">Message</Alert>);
-    expect(info.container.querySelector('svg')).not.toBeNull();
-    info.unmount();
-
-    const success = render(<Alert variant="success">Message</Alert>);
-    expect(success.container.querySelector('svg')).not.toBeNull();
-    success.unmount();
-
-    const warning = render(<Alert variant="warning">Message</Alert>);
-    expect(warning.container.querySelector('svg')).not.toBeNull();
-    warning.unmount();
-
-    const error = render(<Alert variant="error">Message</Alert>);
-    expect(error.container.querySelector('svg')).not.toBeNull();
-    error.unmount();
-
-    const neutral = render(<Alert variant="neutral">Message</Alert>);
-    expect(neutral.container.querySelector('svg')).toBeNull();
-  });
-
-  it('suppresses the default icon when icon={false}', () => {
-    const { container } = render(
-      <Alert variant="success" icon={false}>
-        Message
-      </Alert>,
-    );
-    expect(container.querySelector('svg')).toBeNull();
-  });
-
-  it('overrides the default icon when icon is set explicitly', () => {
-    const { container } = render(
-      <Alert variant="neutral" icon="info">
-        Message
-      </Alert>,
-    );
-    expect(container.querySelector('svg')).not.toBeNull();
-  });
-});

package/src/components/AppsLauncher/AppsLauncher.module.css

@@ -1,96 +0,0 @@
-.trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: none;
-  border-radius: var(--sv-radius-md);
-  background: transparent;
-  color: var(--sv-color-text-primary);
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .trigger:hover {
-    background: var(--sv-color-surface-sunken);
-  }
-}
-
-.header {
-  padding: var(--sv-space-4) var(--sv-space-3) var(--sv-space-1);
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-}
-
-.loading {
-  display: flex;
-  justify-content: center;
-  padding: var(--sv-space-6);
-}
-
-.error {
-  margin: 0;
-  padding: 0 var(--sv-space-3) var(--sv-space-3);
-  color: var(--sv-color-error-text);
-  font-size: var(--sv-font-size-sm);
-}
-
-.grid {
-  display: grid;
-  /* minmax(0, 1fr), not a plain 1fr — a plain 1fr track can grow past the
-     grid's own available width to fit a tile name's min-content size
-     (nowrap), blowing the grid out past the popover's own width instead of
-     letting the name truncate with ellipsis as intended. */
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--sv-space-1);
-  padding: var(--sv-space-2);
-  max-height: 60vh;
-  overflow-y: auto;
-}
-
-.tile {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sv-space-2);
-  padding: var(--sv-space-2);
-  border: none;
-  border-radius: var(--sv-radius-md);
-  background: transparent;
-  text-decoration: none;
-  color: var(--sv-color-text-primary);
-  text-align: center;
-  font: inherit;
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .tile:hover {
-    background: var(--sv-color-surface-sunken);
-  }
-}
-
-.tileIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--sv-radius-md);
-  background: var(--sv-color-surface-sunken);
-  font-size: var(--sv-font-size-xs);
-  font-weight: var(--sv-font-weight-semibold);
-  overflow: hidden;
-}
-
-.tileName {
-  font-size: var(--sv-font-size-caption);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}

package/src/components/AppsLauncher/AppsLauncher.stories.tsx

@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { AppsLauncher } from './AppsLauncher';
-import { Icon } from '../Icon/Icon';
-
-const items = [
-  {
-    key: 'home',
-    icon: <Icon name="house" size="md" aria-hidden />,
-    label: 'Home',
-    href: '/launcher',
-  },
-  {
-    key: 'console',
-    icon: <Icon name="layout-dashboard" size="md" aria-hidden />,
-    label: 'Console',
-    href: '/console',
-  },
-  {
-    key: 'notes',
-    icon: <Icon name="file" size="md" aria-hidden />,
-    label: 'Notes',
-    href: '/notes',
-  },
-];
-
-const meta = {
-  title: 'Components/AppsLauncher',
-  component: AppsLauncher,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          "The desktop 'Apps' switcher — a 28px grid trigger opening a Popover tile grid. The desktop counterpart to MobileAppsDrawer: same items shape, different chrome. Presentational only — items are supplied already resolved.",
-      },
-    },
-  },
-  args: {
-    items,
-  },
-} satisfies Meta<typeof AppsLauncher>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Loading: Story = {
-  args: {
-    loading: true,
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    error: true,
-  },
-};

package/src/components/AppsLauncher/AppsLauncher.tsx

@@ -1,117 +0,0 @@
-'use client';
-
-import { useState, type ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-import { Popover } from '../Popover/Popover';
-import { Spinner } from '../Spinner/Spinner';
-import styles from './AppsLauncher.module.css';
-
-export interface AppsLauncherItem {
-  /** Stable identity for this tile — used as the React key. */
-  key: string;
-  icon: ReactNode;
-  label: string;
-  /** Renders an `<a>` when set; otherwise a `<button>` calling `onClick` —
-   *  same dual-mode convention as `MobileAppsDrawer`'s items. */
-  href?: string;
-  onClick?: () => void;
-}
-
-export interface AppsLauncherProps {
-  items: AppsLauncherItem[];
-  /** Shows a spinner in place of the grid — e.g. while the tile list is
-   *  still being fetched. */
-  loading?: boolean;
-  /** Shows an error message in place of the grid. */
-  error?: boolean;
-  errorMessage?: string;
-  /** Trigger button's icon. Defaults to a generic grid glyph — pass the
-   *  real Launcher plugin's own icon for pixel parity with the platform. */
-  triggerIcon?: ReactNode;
-  /** Trigger button's accessible label, and the popover's own. Defaults to "Apps". */
-  'aria-label'?: string;
-  align?: 'left' | 'right';
-}
-
-function AppsLauncherTile({ icon, label, href, onClick }: Omit<AppsLauncherItem, 'key'>) {
-  const content = (
-    <>
-      <span className={styles.tileIcon} aria-hidden="true">
-        {icon}
-      </span>
-      <span className={styles.tileName}>{label}</span>
-    </>
-  );
-  if (href) {
-    return (
-      <a href={href} className={styles.tile} onClick={onClick}>
-        {content}
-      </a>
-    );
-  }
-  return (
-    <button type="button" className={styles.tile} onClick={onClick}>
-      {content}
-    </button>
-  );
-}
-
-/**
- * AppsLauncher — the desktop "Apps" switcher: a 28px grid-icon trigger that
- * opens a `Popover` with a 3-column tile grid. The desktop counterpart to
- * `MobileAppsDrawer` — same `items` shape (`key`/`icon`/`label`/`href`/
- * `onClick`), different chrome (floating panel vs. bottom sheet), matching
- * how `Header`/`MobileHeader` already split the same way.
- *
- * Presentational only — no plugin-list fetching of its own. The consumer
- * supplies `items` already resolved (and `loading`/`error` while it isn't
- * yet), matching `MobileAppsDrawer`'s own boundary.
- */
-export function AppsLauncher({
-  items,
-  loading,
-  error,
-  errorMessage = "Couldn't load apps. Try again.",
-  triggerIcon,
-  'aria-label': ariaLabel = 'Apps',
-  align = 'right',
-}: AppsLauncherProps) {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Popover
-      align={align}
-      width={320}
-      aria-label={ariaLabel}
-      open={open}
-      onClose={() => setOpen(false)}
-      trigger={
-        <button
-          type="button"
-          aria-label={ariaLabel}
-          aria-haspopup="true"
-          aria-expanded={open}
-          onClick={() => setOpen((v) => !v)}
-          className={styles.trigger}
-        >
-          {triggerIcon ?? <Icon name="layout-grid" size="md" aria-hidden />}
-        </button>
-      }
-    >
-      <div className={styles.header}>{ariaLabel}</div>
-      {loading ? (
-        <div className={styles.loading}>
-          <Spinner size="md" label="Loading apps…" />
-        </div>
-      ) : error ? (
-        <p className={styles.error}>{errorMessage}</p>
-      ) : (
-        <div className={styles.grid}>
-          {items.map(({ key, ...item }) => (
-            <AppsLauncherTile key={key} {...item} />
-          ))}
-        </div>
-      )}
-    </Popover>
-  );
-}

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

@@ -1,52 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { AppsLauncher } from '../AppsLauncher';
-
-afterEach(() => {
-  cleanup();
-});
-
-const items = [
-  { key: 'home', icon: <span>home-icon</span>, label: 'Home', href: '/launcher' },
-  { key: 'notes', icon: <span>notes-icon</span>, label: 'Notes', onClick: vi.fn() },
-];
-
-describe('AppsLauncher', () => {
-  it('renders a closed trigger by default', () => {
-    render(<AppsLauncher items={items} />);
-    expect(screen.getByRole('button', { name: 'Apps' })).toBeTruthy();
-    expect(screen.queryByText('Home')).toBeNull();
-  });
-
-  it('opens the tile grid on trigger click', () => {
-    render(<AppsLauncher items={items} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Apps' }));
-    expect(screen.getByText('Home')).toBeTruthy();
-    expect(screen.getByText('Notes')).toBeTruthy();
-  });
-
-  it('renders an href item as a link and an onClick item as a button', () => {
-    render(<AppsLauncher items={items} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Apps' }));
-    expect(screen.getByText('Home').closest('a')).toHaveProperty(
-      'href',
-      expect.stringContaining('/launcher'),
-    );
-    expect(screen.getByText('Notes').closest('button')).toBeTruthy();
-  });
-
-  it('shows a loading state instead of the grid', () => {
-    render(<AppsLauncher items={items} loading />);
-    fireEvent.click(screen.getByRole('button', { name: 'Apps' }));
-    expect(screen.queryByText('Home')).toBeNull();
-    expect(screen.getByRole('status', { name: /Loading apps/ })).toBeTruthy();
-  });
-
-  it('shows an error state instead of the grid', () => {
-    render(<AppsLauncher items={items} error errorMessage="Nope" />);
-    fireEvent.click(screen.getByRole('button', { name: 'Apps' }));
-    expect(screen.queryByText('Home')).toBeNull();
-    expect(screen.getByText('Nope')).toBeTruthy();
-  });
-});

package/src/components/AspectRatio/AspectRatio.module.css

@@ -1,15 +0,0 @@
-.root {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  border-radius: var(--sv-radius-md);
-}
-
-/* A single direct child (img/video/iframe) fills the ratio box. */
-.root > :global(*) {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}

package/src/components/AspectRatio/AspectRatio.stories.tsx

@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { AspectRatio } from './AspectRatio';
-
-const meta = {
-  title: 'Components/AspectRatio',
-  component: AspectRatio,
-  parameters: { layout: 'padded' },
-  args: {
-    ratio: 16 / 9,
-    children: (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          background: 'var(--sv-color-surface-sunken)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'var(--sv-color-text-muted)',
-          fontSize: 'var(--sv-font-size-sm)',
-        }}
-      >
-        16:9
-      </div>
-    ),
-  },
-} satisfies Meta<typeof AspectRatio>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Widescreen: Story = {};
-
-export const Square: Story = {
-  args: {
-    ratio: 1,
-    children: (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          background: 'var(--sv-color-surface-sunken)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'var(--sv-color-text-muted)',
-          fontSize: 'var(--sv-font-size-sm)',
-        }}
-      >
-        1:1
-      </div>
-    ),
-  },
-};
-
-export const Portrait: Story = {
-  args: {
-    ratio: 3 / 4,
-    children: (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          background: 'var(--sv-color-surface-sunken)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'var(--sv-color-text-muted)',
-          fontSize: 'var(--sv-font-size-sm)',
-        }}
-      >
-        3:4
-      </div>
-    ),
-  },
-};

package/src/components/AspectRatio/AspectRatio.tsx

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