@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/RootLayout/RootLayout.tsx

@@ -1,185 +0,0 @@
-'use client';
-
-import { Children } from 'react';
-import type { ReactNode } from 'react';
-import { HeaderFooterLayout } from '../HeaderFooterLayout/HeaderFooterLayout';
-import { ResponsiveSurface } from '../ResponsiveSurface/ResponsiveSurface';
-import { ThreeColumnLayout } from '../ThreeColumnLayout/ThreeColumnLayout';
-import styles from './RootLayout.module.css';
-
-export type RootLayoutVariant = 'plain' | 'sidebar' | 'header' | 'shell';
-
-export interface RootLayoutProps {
-  /**
-   * Which chrome shape this page uses. Children are positional and their
-   * count is fixed per variant:
-   *  - `'plain'` — 1 child: `[main]`. No chrome on either breakpoint.
-   *  - `'sidebar'` — 2 children: `[sidebar, main]`. Sidebar + main on web
-   *    only — on mobile, sidebar is dropped and only main renders.
-   *  - `'header'` — 2 children: `[header, main]`. Header + main on both
-   *    breakpoints — same structure, but the header's own height differs
-   *    per breakpoint (`headerHeight` on web, `mobileHeaderHeight` on
-   *    mobile), matching how real `shell: minimal` plugins actually do
-   *    this (a compact web top bar vs. the platform's mobile chrome
-   *    height).
-   *  - `'shell'` — 3 children: `[header, main, footer]`. Header + main +
-   *    footer on mobile only — on web, header/footer are dropped and only
-   *    main renders.
-   * Default `'plain'`.
-   */
-  variant?: RootLayoutVariant;
-  children: ReactNode;
-  /** px. Default 64 — matches the platform's own persistent nav rail
-   *  (`--sv-shell-sidebar-width`, runtime/app/(platform)/shell.module.css).
-   *  Only used by `'sidebar'`. */
-  sidebarWidth?: number;
-  /** px. Default 48 — matches a real `shell: minimal` plugin's own compact
-   *  web header (e.g. Kanban's `KanbanHeader`, deliberately not the
-   *  platform's 60px shell header since a `shell: minimal` plugin owns its
-   *  whole viewport). Web only — used by `'header'` on web. */
-  headerHeight?: number;
-  /** px. Default 60 — matches the platform's own mobile chrome
-   *  (`--sv-shell-header-height`, `MobileHeader`'s default). Mobile only —
-   *  used by `'header'` and `'shell'` on mobile. */
-  mobileHeaderHeight?: number;
-  /** px. Default 60 — matches the platform's own mobile chrome
-   *  (`--sv-shell-footer-height`, `MobileFooter`'s default). Mobile only —
-   *  used by `'shell'`. */
-  footerHeight?: number;
-  className?: string;
-}
-
-const EXPECTED_CHILD_COUNT: Record<RootLayoutVariant, number> = {
-  plain: 1,
-  sidebar: 2,
-  header: 2,
-  shell: 3,
-};
-
-interface RootLayoutWebProps {
-  variant: RootLayoutVariant;
-  items: ReactNode[];
-  sidebarWidth: number;
-  headerHeight: number;
-}
-
-// internal — not exported
-function RootLayoutWeb({ variant, items, sidebarWidth, headerHeight }: RootLayoutWebProps) {
-  if (variant === 'sidebar') {
-    const [sidebar, main] = items;
-    return (
-      <ThreeColumnLayout sidebarWidth={sidebarWidth}>
-        {sidebar}
-        {main}
-      </ThreeColumnLayout>
-    );
-  }
-  if (variant === 'header') {
-    const [header, main] = items;
-    return (
-      <HeaderFooterLayout header={header} headerHeight={headerHeight}>
-        {main}
-      </HeaderFooterLayout>
-    );
-  }
-  // 'plain' and 'shell' both render plain on web — shell's chrome is mobile-only.
-  const main = variant === 'shell' ? items[1] : items[0];
-  return <>{main}</>;
-}
-
-interface RootLayoutMobileProps {
-  variant: RootLayoutVariant;
-  items: ReactNode[];
-  mobileHeaderHeight: number;
-  footerHeight: number;
-}
-
-// internal — not exported
-function RootLayoutMobile({
-  variant,
-  items,
-  mobileHeaderHeight,
-  footerHeight,
-}: RootLayoutMobileProps) {
-  if (variant === 'header') {
-    const [header, main] = items;
-    return (
-      <HeaderFooterLayout header={header} headerHeight={mobileHeaderHeight}>
-        {main}
-      </HeaderFooterLayout>
-    );
-  }
-  if (variant === 'shell') {
-    const [header, main, footer] = items;
-    return (
-      <HeaderFooterLayout
-        header={header}
-        footer={footer}
-        headerHeight={mobileHeaderHeight}
-        footerHeight={footerHeight}
-      >
-        {main}
-      </HeaderFooterLayout>
-    );
-  }
-  // 'plain' and 'sidebar' both render plain on mobile — sidebar's chrome is web-only.
-  const main = variant === 'sidebar' ? items[1] : items[0];
-  return <>{main}</>;
-}
-
-/**
- * RootLayout — the root-level layout a plugin's page tree sits in. Enforces
- * only structure and dimensions (`width: 100%; height: 100%`, filling
- * whatever real height the platform shell's own ancestor chain already
- * establishes — not viewport units, since a plugin isn't alone on the
- * page). A definite height, not min-height: ThreeColumnLayout/
- * HeaderFooterLayout's own .shell need one to resolve their own height:
- * 100% against (see RootLayout.module.css's comment). All content comes
- * from children; RootLayout has no opinion on what's inside any region.
- *
- * The web/mobile fork is `ResponsiveSurface` — only one of
- * `RootLayoutWeb`/`RootLayoutMobile` is ever mounted, never a CSS squeeze of
- * the same tree. Each variant's actual shape is delegated entirely to
- * `ThreeColumnLayout`/`HeaderFooterLayout`; RootLayout itself contains no
- * media queries.
- */
-export function RootLayout({
-  variant = 'plain',
-  children,
-  sidebarWidth = 64,
-  headerHeight = 48,
-  mobileHeaderHeight = 60,
-  footerHeight = 60,
-  className,
-}: RootLayoutProps) {
-  const items = Children.toArray(children);
-
-  if (process.env.NODE_ENV !== 'production' && items.length !== EXPECTED_CHILD_COUNT[variant]) {
-    console.warn(
-      `[RootLayout] variant="${variant}" expects ${EXPECTED_CHILD_COUNT[variant]} children; received ${items.length}.`,
-    );
-  }
-
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')}>
-      <ResponsiveSurface
-        web={
-          <RootLayoutWeb
-            variant={variant}
-            items={items}
-            sidebarWidth={sidebarWidth}
-            headerHeight={headerHeight}
-          />
-        }
-        mobile={
-          <RootLayoutMobile
-            variant={variant}
-            items={items}
-            mobileHeaderHeight={mobileHeaderHeight}
-            footerHeight={footerHeight}
-          />
-        }
-      />
-    </div>
-  );
-}

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

@@ -1,161 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { RootLayout } from '../RootLayout';
-
-let matches = false;
-
-function installMatchMedia() {
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockImplementation((query: string) => ({
-      matches,
-      media: query,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  );
-}
-
-describe('RootLayout', () => {
-  beforeEach(() => {
-    matches = false;
-    installMatchMedia();
-  });
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('plain: renders the single child on web and mobile', () => {
-    render(
-      <RootLayout variant="plain">
-        <span>Main</span>
-      </RootLayout>,
-    );
-    expect(screen.getByText('Main')).toBeDefined();
-    cleanup();
-
-    matches = true;
-    installMatchMedia();
-    render(
-      <RootLayout variant="plain">
-        <span>Main</span>
-      </RootLayout>,
-    );
-    expect(screen.getByText('Main')).toBeDefined();
-  });
-
-  it('sidebar: renders sidebar + main on web, main only on mobile', () => {
-    render(
-      <RootLayout variant="sidebar">
-        <nav>Sidebar</nav>
-        <main>Main</main>
-      </RootLayout>,
-    );
-    expect(screen.getByText('Sidebar')).toBeDefined();
-    expect(screen.getByText('Main')).toBeDefined();
-    cleanup();
-
-    matches = true;
-    installMatchMedia();
-    render(
-      <RootLayout variant="sidebar">
-        <nav>Sidebar</nav>
-        <main>Main</main>
-      </RootLayout>,
-    );
-    expect(screen.queryByText('Sidebar')).toBeNull();
-    expect(screen.getByText('Main')).toBeDefined();
-  });
-
-  it('header: renders header + main identically on web and mobile', () => {
-    render(
-      <RootLayout variant="header">
-        <header>Header</header>
-        <main>Main</main>
-      </RootLayout>,
-    );
-    expect(screen.getByText('Header')).toBeDefined();
-    expect(screen.getByText('Main')).toBeDefined();
-    cleanup();
-
-    matches = true;
-    installMatchMedia();
-    render(
-      <RootLayout variant="header">
-        <header>Header</header>
-        <main>Main</main>
-      </RootLayout>,
-    );
-    expect(screen.getByText('Header')).toBeDefined();
-    expect(screen.getByText('Main')).toBeDefined();
-  });
-
-  it('header: applies headerHeight on web and mobileHeaderHeight on mobile', () => {
-    render(
-      <RootLayout variant="header">
-        <header>Header</header>
-        <main>Main</main>
-      </RootLayout>,
-    );
-    expect(screen.getByText('Header').parentElement?.style.height).toBe('48px');
-    cleanup();
-
-    matches = true;
-    installMatchMedia();
-    render(
-      <RootLayout variant="header">
-        <header>Header</header>
-        <main>Main</main>
-      </RootLayout>,
-    );
-    expect(screen.getByText('Header').parentElement?.style.height).toBe('60px');
-  });
-
-  it('shell: renders main only on web, header + main + footer on mobile', () => {
-    render(
-      <RootLayout variant="shell">
-        <header>Header</header>
-        <main>Main</main>
-        <footer>Footer</footer>
-      </RootLayout>,
-    );
-    expect(screen.queryByText('Header')).toBeNull();
-    expect(screen.getByText('Main')).toBeDefined();
-    expect(screen.queryByText('Footer')).toBeNull();
-    cleanup();
-
-    matches = true;
-    installMatchMedia();
-    render(
-      <RootLayout variant="shell">
-        <header>Header</header>
-        <main>Main</main>
-        <footer>Footer</footer>
-      </RootLayout>,
-    );
-    expect(screen.getByText('Header')).toBeDefined();
-    expect(screen.getByText('Main')).toBeDefined();
-    expect(screen.getByText('Footer')).toBeDefined();
-  });
-
-  it('warns in development when the child count does not match the variant', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
-
-    render(
-      <RootLayout variant="sidebar">
-        <span>Only one child</span>
-      </RootLayout>,
-    );
-
-    expect(warn).toHaveBeenCalledWith(expect.stringContaining('variant="sidebar"'));
-    expect(warn).toHaveBeenCalledWith(expect.stringContaining('expects 2'));
-    expect(warn).toHaveBeenCalledWith(expect.stringContaining('received 1'));
-
-    warn.mockRestore();
-  });
-});

package/src/components/ScrollArea/ScrollArea.module.css

@@ -1,20 +0,0 @@
-.root {
-  overflow: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: thin;
-  scrollbar-color: var(--sv-color-border-strong) transparent;
-}
-
-.root::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.root::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.root::-webkit-scrollbar-thumb {
-  background: var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-full);
-}

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ScrollArea } from './ScrollArea';
-
-const meta = {
-  title: 'Components/ScrollArea',
-  component: ScrollArea,
-  parameters: { layout: 'padded' },
-  args: { children: null },
-} satisfies Meta<typeof ScrollArea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Vertical: Story = {
-  render: () => (
-    <div style={{ width: 280 }}>
-      <ScrollArea maxHeight={160}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: 4 }}>
-          {Array.from({ length: 20 }, (_, i) => (
-            <div key={i} style={{ fontSize: 14 }}>
-              Row {i + 1}
-            </div>
-          ))}
-        </div>
-      </ScrollArea>
-    </div>
-  ),
-};
-
-export const Horizontal: Story = {
-  render: () => (
-    <ScrollArea maxWidth={320}>
-      <div style={{ display: 'flex', gap: 8, padding: 4, width: 'max-content' }}>
-        {Array.from({ length: 12 }, (_, i) => (
-          <div
-            key={i}
-            style={{
-              width: 80,
-              height: 60,
-              flexShrink: 0,
-              background: 'var(--sv-color-surface-sunken)',
-              borderRadius: 'var(--sv-radius-md)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontSize: 12,
-            }}
-          >
-            {i + 1}
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  ),
-};

package/src/components/ScrollArea/ScrollArea.tsx

@@ -1,27 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-import styles from './ScrollArea.module.css';
-
-export interface ScrollAreaProps {
-  children: ReactNode;
-  /** Constrains the scrollable direction; content taller/wider than this scrolls. */
-  maxHeight?: string | number;
-  maxWidth?: string | number;
-  className?: string;
-}
-
-/**
- * ScrollArea — a styled scrollable container (thin, token-colored scrollbar
- * instead of the OS default). Native overflow scrolling underneath — no
- * virtualization, no custom scroll physics.
- */
-export function ScrollArea({ children, maxHeight, maxWidth, className }: ScrollAreaProps) {
-  const style: CSSProperties = {};
-  if (maxHeight !== undefined) style.maxHeight = maxHeight;
-  if (maxWidth !== undefined) style.maxWidth = maxWidth;
-
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')} style={style}>
-      {children}
-    </div>
-  );
-}

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

@@ -1,39 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { ScrollArea } from '../ScrollArea';
-
-afterEach(cleanup);
-
-describe('ScrollArea', () => {
-  it('renders children', () => {
-    render(
-      <ScrollArea>
-        <div>content</div>
-      </ScrollArea>,
-    );
-    expect(screen.getByText('content')).toBeDefined();
-  });
-
-  it('applies maxHeight/maxWidth as inline styles when given', () => {
-    render(
-      <ScrollArea maxHeight={200} maxWidth="100%">
-        <div data-testid="child">content</div>
-      </ScrollArea>,
-    );
-    const root = screen.getByTestId('child').parentElement;
-    expect(root?.style.maxHeight).toBe('200px');
-    expect(root?.style.maxWidth).toBe('100%');
-  });
-
-  it('does not set maxHeight/maxWidth styles when omitted', () => {
-    render(
-      <ScrollArea>
-        <div data-testid="child">content</div>
-      </ScrollArea>,
-    );
-    const root = screen.getByTestId('child').parentElement;
-    expect(root?.style.maxHeight).toBe('');
-    expect(root?.style.maxWidth).toBe('');
-  });
-});

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -1,55 +0,0 @@
-.track {
-  display: inline-flex;
-  background: var(--sv-color-surface-sunken);
-  border-radius: var(--sv-radius-full);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  padding: 2px;
-  gap: 2px;
-}
-
-/* Size variants */
-.md .segment {
-  padding: var(--sv-space-1) var(--sv-space-3);
-  font-size: var(--sv-font-size-sm);
-}
-
-.sm .segment {
-  padding: 2px var(--sv-space-2);
-  font-size: var(--sv-font-size-caption);
-}
-
-.segment {
-  border: none;
-  border-radius: var(--sv-radius-full);
-  font-family: var(--sv-font-family);
-  font-weight: var(--sv-font-weight-medium);
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    background-color 0.12s ease,
-    color 0.12s ease,
-    box-shadow 0.12s ease;
-  white-space: nowrap;
-}
-
-.segment:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 1px;
-}
-
-.active {
-  background: var(--sv-color-surface);
-  color: var(--sv-color-text-primary);
-  box-shadow: var(--sv-shadow-card);
-}
-
-.inactive {
-  background: transparent;
-  color: var(--sv-color-text-muted);
-}
-
-@media (hover: hover) {
-  .inactive:hover {
-    color: var(--sv-color-text-primary);
-  }
-}

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,118 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SegmentedControl } from './SegmentedControl';
-
-const meta = {
-  title: 'Components/SegmentedControl',
-  component: SegmentedControl,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Pill-based 2–3 option picker for inline use in table rows and dialogs. Renders as `role="radiogroup"` with `role="radio"` segments.',
-      },
-    },
-  },
-  args: {
-    value: 'a',
-    onChange: () => {},
-    options: [
-      { label: 'A', value: 'a' },
-      { label: 'B', value: 'b' },
-    ],
-    'aria-label': 'Select option',
-  },
-} satisfies Meta<typeof SegmentedControl>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const TwoOption: Story = {
-  render: (_args) => {
-    const [role, setRole] = useState<'user' | 'admin'>('user');
-    return (
-      <SegmentedControl
-        value={role}
-        onChange={setRole}
-        options={[
-          { label: 'User', value: 'user' },
-          { label: 'Admin', value: 'admin' },
-        ]}
-        aria-label="Role"
-      />
-    );
-  },
-};
-
-export const ThreeOption: Story = {
-  render: (_args) => {
-    const [role, setRole] = useState<'user' | 'admin' | 'owner'>('user');
-    return (
-      <SegmentedControl
-        value={role}
-        onChange={setRole}
-        options={[
-          { label: 'User', value: 'user' },
-          { label: 'Admin', value: 'admin' },
-          { label: 'Owner', value: 'owner' },
-        ]}
-        aria-label="Role"
-      />
-    );
-  },
-};
-
-export const SmallSize: Story = {
-  render: (_args) => {
-    const [role, setRole] = useState<'user' | 'admin'>('user');
-    return (
-      <SegmentedControl
-        value={role}
-        onChange={setRole}
-        size="sm"
-        options={[
-          { label: 'User', value: 'user' },
-          { label: 'Admin', value: 'admin' },
-        ]}
-        aria-label="Role"
-      />
-    );
-  },
-};
-
-/** Table-row context — sm size next to other table content. */
-export const InTableRow: Story = {
-  render: (_args) => {
-    const [role, setRole] = useState<'user' | 'admin'>('user');
-    return (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 16,
-          padding: '10px 12px',
-          border: '1px solid var(--sv-color-border)',
-          borderRadius: 'var(--sv-radius-md)',
-          fontFamily: 'var(--sv-font-family)',
-          fontSize: 'var(--sv-font-size-sm)',
-          color: 'var(--sv-color-text-primary)',
-        }}
-      >
-        <span>Test User</span>
-        <SegmentedControl
-          value={role}
-          onChange={setRole}
-          size="sm"
-          options={[
-            { label: 'User', value: 'user' },
-            { label: 'Admin', value: 'admin' },
-          ]}
-          aria-label="User role"
-        />
-      </div>
-    );
-  },
-};