@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/ThreeColumnLayout/ThreeColumnLayout.stories.tsx

@@ -1,152 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { ThreeColumnLayout } from './ThreeColumnLayout';
-
-function Block({
-  title,
-  children,
-  padded = true,
-}: {
-  title: string;
-  children?: React.ReactNode;
-  padded?: boolean;
-}) {
-  return (
-    <div
-      style={{
-        height: '100%',
-        padding: padded ? 'var(--sv-space-4)' : 0,
-        fontFamily: 'var(--sv-font-family)',
-      }}
-    >
-      <h3
-        style={{
-          margin: '0 0 var(--sv-space-2)',
-          fontSize: 'var(--sv-font-size-sm)',
-          color: 'var(--sv-color-text-primary)',
-        }}
-      >
-        {title}
-      </h3>
-      {children}
-    </div>
-  );
-}
-
-const meta = {
-  title: 'Components/ThreeColumnLayout',
-  component: ThreeColumnLayout,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Sidebar + main + optional detail column, for the common "list app" shape. Purely positional: pass 2 children for sidebar+main, or 3 for sidebar+main+detail. The layout has no awareness of what is inside each slot and no responsive behavior of its own.',
-      },
-    },
-  },
-  args: {
-    children: [<Block key="sidebar" title="Sidebar" />, <Block key="main" title="Main" />],
-  },
-} satisfies Meta<typeof ThreeColumnLayout>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** The canonical two-child usage — sidebar + main, no detail column. */
-export const Default: Story = {
-  render: () => (
-    <div style={{ height: '480px' }}>
-      <ThreeColumnLayout>
-        <Block title="Sidebar">
-          <ul style={{ margin: 0, paddingLeft: 'var(--sv-space-4)' }}>
-            <li>Groceries</li>
-            <li>Work</li>
-            <li>Personal</li>
-          </ul>
-        </Block>
-        <Block title="Main">No item selected — main fills the full remaining width.</Block>
-      </ThreeColumnLayout>
-    </div>
-  ),
-};
-
-export const ThreeColumns: Story = {
-  render: () => (
-    <div style={{ height: '480px' }}>
-      <ThreeColumnLayout>
-        <Block title="Sidebar">
-          <ul style={{ margin: 0, paddingLeft: 'var(--sv-space-4)' }}>
-            <li>Groceries</li>
-            <li>Work</li>
-            <li>Personal</li>
-          </ul>
-        </Block>
-        <Block title="Main">
-          <ul style={{ margin: 0, paddingLeft: 'var(--sv-space-4)' }}>
-            <li>Buy milk</li>
-            <li>Buy eggs</li>
-          </ul>
-        </Block>
-        <Block title="Detail">Editing "Buy milk" — notes, due date, etc.</Block>
-      </ThreeColumnLayout>
-    </div>
-  ),
-};
-
-export const CustomWidths: Story = {
-  render: () => (
-    <div style={{ height: '480px' }}>
-      <ThreeColumnLayout sidebarWidth={200} detailWidth={440}>
-        <Block title="Sidebar (200px)">Narrower nav column.</Block>
-        <Block title="Main">Fills whatever space is left.</Block>
-        <Block title="Detail (440px)">Wider detail column for a richer editor.</Block>
-      </ThreeColumnLayout>
-    </div>
-  ),
-};
-
-/** Demonstrates the intended usage: the detail column appears only once
- *  something is selected, by conditionally including the third child. */
-export const ConditionalDetail: Story = {
-  render: function Render() {
-    const [selectedId, setSelectedId] = useState<string | null>(null);
-    const items = ['Buy milk', 'Buy eggs', 'Call plumber'];
-
-    return (
-      <div style={{ height: '480px' }}>
-        <ThreeColumnLayout>
-          <Block title="Sidebar">Lists</Block>
-          <Block title="Main" padded={false}>
-            <div style={{ padding: 'var(--sv-space-4)' }}>
-              {items.map((item) => (
-                <button
-                  key={item}
-                  type="button"
-                  onClick={() => setSelectedId(item)}
-                  style={{
-                    display: 'block',
-                    width: '100%',
-                    textAlign: 'left',
-                    padding: 'var(--sv-space-2)',
-                    marginBottom: 'var(--sv-space-1)',
-                    background:
-                      selectedId === item ? 'var(--sv-color-accent-subtle)' : 'transparent',
-                    border: 'none',
-                    borderRadius: 'var(--sv-radius-sm)',
-                    cursor: 'pointer',
-                    font: 'inherit',
-                    color: 'var(--sv-color-text-primary)',
-                  }}
-                >
-                  {item}
-                </button>
-              ))}
-            </div>
-          </Block>
-          {selectedId && <Block title="Detail">Editing "{selectedId}"</Block>}
-        </ThreeColumnLayout>
-      </div>
-    );
-  },
-};

package/src/components/ThreeColumnLayout/ThreeColumnLayout.tsx

@@ -1,87 +0,0 @@
-'use client';
-
-import { Children } from 'react';
-import type { ReactNode } from 'react';
-import styles from './ThreeColumnLayout.module.css';
-
-export interface ThreeColumnLayoutProps {
-  /**
-   * Exactly 2 (sidebar, main) or 3 (sidebar, main, detail) elements. Omit
-   * the third child entirely to render two columns — e.g.
-   * `{selected && <Detail />}` — React.Children.toArray drops falsy
-   * children, so no separate `detail` prop is needed to make that
-   * conditional.
-   */
-  children: ReactNode;
-  /** px. Fixed width of the first (leftmost) column. Default 280. */
-  sidebarWidth?: number;
-  /** px. Fixed width of the third column, when present. Default 360. */
-  detailWidth?: number;
-  /**
-   * Hides the sidebar column entirely — no width, no border, no layout box
-   * — while keeping it mounted and every sibling in its own stable position.
-   *
-   * Prefer this over conditionally omitting the sidebar child, or swapping
-   * to a different wrapper when collapsed. Omitting it shifts `main` into
-   * the sidebar slot, and swapping the surrounding element type unmounts
-   * `main`'s entire subtree — silently discarding its React state (a live
-   * stream, unsent composer text, an in-memory-only conversation) on every
-   * collapse toggle. Found live in Warden, whose chat column lost all of
-   * that each time the sidebar was shown or hidden.
-   */
-  sidebarHidden?: boolean;
-  className?: string;
-}
-
-/**
- * ThreeColumnLayout — sidebar + main + optional detail column, for the
- * common "list app" shape (a list sidebar, a primary content list, and a
- * detail pane that only takes up space once something is selected).
- *
- * Purely positional and structural — it has no awareness of what's inside
- * each slot (no injected landmarks/labels; those belong to the children
- * themselves) and no responsive behavior of its own. Collapsing further at
- * narrow desktop/tablet widths (e.g. swapping the detail column for an
- * overlay) is the consuming plugin's decision; below the mobile breakpoint,
- * compose with ResponsiveSurface to fork to a different tree entirely.
- */
-export function ThreeColumnLayout({
-  children,
-  sidebarWidth = 280,
-  detailWidth = 360,
-  sidebarHidden = false,
-  className,
-}: ThreeColumnLayoutProps) {
-  const items = Children.toArray(children);
-
-  if (process.env.NODE_ENV !== 'production' && (items.length < 2 || items.length > 3)) {
-    console.warn(
-      `[ThreeColumnLayout] Expects 2 or 3 children (sidebar, main, optional detail); received ${items.length}.`,
-    );
-  }
-
-  const [sidebar, main, detail] = items;
-
-  return (
-    <div className={[styles.shell, className].filter(Boolean).join(' ')}>
-      {/* `hidden` (not just the class) so the column leaves the
-          accessibility tree and the tab order too, rather than staying
-          reachable by keyboard while invisible. */}
-      <div
-        className={[styles.sidebar, sidebarHidden && styles.sidebarHidden]
-          .filter(Boolean)
-          .join(' ')}
-        style={sidebarHidden ? undefined : { width: sidebarWidth }}
-        hidden={sidebarHidden}
-      >
-        {sidebar}
-      </div>
-      <div className={styles.main}>{main}</div>
-      {detail && (
-        <div className={styles.detail} style={{ width: detailWidth }}>
-          {detail}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,78 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { ThreeColumnLayout } from '../ThreeColumnLayout';
-
-afterEach(cleanup);
-
-describe('ThreeColumnLayout', () => {
-  it('renders two columns and no detail column when only sidebar + main are given', () => {
-    render(
-      <ThreeColumnLayout>
-        <nav>Sidebar</nav>
-        <main>Main</main>
-      </ThreeColumnLayout>,
-    );
-
-    expect(screen.getByText('Sidebar')).toBeDefined();
-    expect(screen.getByText('Main')).toBeDefined();
-  });
-
-  it('renders the detail column when a third child is given', () => {
-    render(
-      <ThreeColumnLayout>
-        <nav>Sidebar</nav>
-        <main>Main</main>
-        <aside>Detail</aside>
-      </ThreeColumnLayout>,
-    );
-
-    expect(screen.getByText('Detail')).toBeDefined();
-  });
-
-  it('omits the detail column when the third child is conditionally falsy', () => {
-    const selected = false;
-    render(
-      <ThreeColumnLayout>
-        <nav>Sidebar</nav>
-        <main>Main</main>
-        {selected && <aside>Detail</aside>}
-      </ThreeColumnLayout>,
-    );
-
-    expect(screen.queryByText('Detail')).toBeNull();
-  });
-
-  it('applies sidebarWidth and detailWidth as inline widths', () => {
-    render(
-      <ThreeColumnLayout sidebarWidth={240} detailWidth={320}>
-        <nav>Sidebar</nav>
-        <main>Main</main>
-        <aside>Detail</aside>
-      </ThreeColumnLayout>,
-    );
-
-    expect(screen.getByText('Sidebar').parentElement?.style.width).toBe('240px');
-    expect(screen.getByText('Detail').parentElement?.style.width).toBe('320px');
-  });
-
-  it('warns in development when given fewer than 2 or more than 3 children', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
-
-    render(<ThreeColumnLayout>{[<main key="only">Only</main>]}</ThreeColumnLayout>);
-    expect(warn).toHaveBeenCalledWith(expect.stringContaining('received 1'));
-
-    warn.mockClear();
-    render(
-      <ThreeColumnLayout>
-        <nav>A</nav>
-        <main>B</main>
-        <aside>C</aside>
-        <aside>D</aside>
-      </ThreeColumnLayout>,
-    );
-    expect(warn).toHaveBeenCalledWith(expect.stringContaining('received 4'));
-
-    warn.mockRestore();
-  });
-});

package/src/components/Toast/Toast.module.css

@@ -1,191 +0,0 @@
-/* Toast — transient notification snackbar.
- *
- * Desktop: fixed top-right, 320px, slides in from above. Mobile floats
- * bottom-center instead (see the media query near the bottom of this file
- * for why). Each toast auto-dismisses after `duration` ms. Leading status
- * icon reinforces category at a glance.
- *
- * Category variants map to the semantic status tokens (info/success/warning/
- * error) so the visual language is consistent with banners and badges.
- * The announcement category uses the accent colour (neutral brand highlight).
- * `security` matches the error palette — draws maximum attention. */
-
-.region {
-  position: fixed;
-  top: var(--sv-space-4);
-  right: var(--sv-space-4);
-  z-index: 200;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-2);
-  width: 320px;
-  max-width: calc(100vw - var(--sv-space-8));
-  pointer-events: none;
-}
-
-.toast {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sv-space-3);
-  padding: var(--sv-space-3) var(--sv-space-4);
-  background: var(--sv-color-surface-raised);
-  color: var(--sv-color-text-primary);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  border-radius: var(--sv-radius-md);
-  box-shadow: var(--sv-shadow-overlay);
-  pointer-events: all;
-  animation: toastIn 200ms ease-out;
-}
-
-.toast.exiting {
-  animation: toastOut 200ms ease-in forwards;
-}
-
-/* Leading status icon */
-.icon {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  padding-top: 1px;
-  color: var(--sv-color-border-strong);
-}
-
-.toast.info .icon,
-.toast.announcement .icon {
-  color: var(--sv-color-accent);
-}
-
-.toast.success .icon {
-  color: var(--sv-color-success-text);
-}
-
-.toast.warning .icon {
-  color: var(--sv-color-warning-text);
-}
-
-.toast.error .icon,
-.toast.security .icon {
-  color: var(--sv-color-error-text);
-}
-
-.body {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.title {
-  font-size: var(--sv-font-size-sm);
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--sv-color-text-primary);
-}
-
-.message {
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-muted);
-  margin-top: var(--sv-space-1);
-  line-height: 1.4;
-}
-
-.close {
-  flex: 0 0 auto;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: var(--sv-color-text-subtle);
-  line-height: 1;
-  font-size: var(--sv-font-size-md);
-}
-
-@media (hover: hover) {
-  .close:hover {
-    color: var(--sv-color-text-primary);
-  }
-}
-
-@keyframes toastIn {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes toastOut {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-}
-
-/* Mobile (<=768px, the design system's canonical breakpoint): float
- * bottom-center instead of top-right. Clears any mobile footer/tab bar
- * (--sv-shell-footer-height) and the home-indicator safe area, plus extra
- * breathing room so it visibly floats above the edge rather than sitting
- * flush against it — matches the platform convention (Android Toast,
- * Material 3's "floating" Snackbar). Deliberately not threaded through
- * --sv-shell-header-height instead: a toast can appear on a page with or
- * without a self-rendered mobile header, and bottom-anchoring sidesteps that
- * entirely rather than requiring every call site to account for it.
- * Each toast is centered and content-sized (capped at 360px) rather than
- * stretched to the region's full width, and slides up from below instead of
- * down from above to match its new anchor. */
-@media (max-width: 768px) {
-  .region {
-    top: auto;
-    left: var(--sv-space-4);
-    right: var(--sv-space-4);
-    bottom: calc(
-      var(--sv-shell-footer-height, 0px) + env(safe-area-inset-bottom, 0px) + var(--sv-space-4)
-    );
-    width: auto;
-    align-items: center;
-  }
-
-  .toast {
-    width: 100%;
-    max-width: 360px;
-    animation-name: toastInMobile;
-  }
-
-  .toast.exiting {
-    animation-name: toastOutMobile;
-  }
-}
-
-@keyframes toastInMobile {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes toastOutMobile {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .toast,
-  .toast.exiting {
-    animation: none;
-  }
-}

package/src/components/Toast/Toast.stories.tsx

@@ -1,191 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ToastProvider, useToast } from './Toast';
-
-const meta = {
-  title: 'Components/Toast',
-  component: ToastProvider,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Fixed top-right notification stack on desktop; floats bottom-center on mobile (<=768px), clearing any mobile footer/tab bar and the home-indicator safe area. Use `<ToastProvider>` at the app root and `useToast()` to imperatively show toasts. Each toast has a leading status icon matched to its category. Switch the viewport toolbar to a mobile width to see the bottom-center placement.',
-      },
-    },
-  },
-  args: {
-    children: null,
-  },
-} satisfies Meta<typeof ToastProvider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-function ToastTrigger({ category, label }: { category: string; label: string }) {
-  const { show } = useToast();
-  return (
-    <button
-      type="button"
-      onClick={() =>
-        show({
-          title: label,
-          message: `This is a ${category} toast notification.`,
-          category,
-        })
-      }
-      style={{
-        padding: '8px 16px',
-        borderRadius: 'var(--sv-radius-md)',
-        border: '1px solid var(--sv-color-border)',
-        background: 'var(--sv-color-surface)',
-        color: 'var(--sv-color-text-primary)',
-        fontFamily: 'var(--sv-font-family)',
-        fontSize: 'var(--sv-font-size-sm)',
-        cursor: 'pointer',
-      }}
-    >
-      {label}
-    </button>
-  );
-}
-
-/** All toast categories — each button fires a toast with the matching leading icon. */
-export const AllCategories: Story = {
-  render: (_args) => (
-    <ToastProvider>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 8,
-          alignItems: 'flex-start',
-        }}
-      >
-        <ToastTrigger category="info" label="Info toast" />
-        <ToastTrigger category="success" label="Success toast" />
-        <ToastTrigger category="warning" label="Warning toast" />
-        <ToastTrigger category="error" label="Error toast" />
-        <ToastTrigger category="security" label="Security toast" />
-        <ToastTrigger category="announcement" label="Announcement toast" />
-      </div>
-    </ToastProvider>
-  ),
-};
-
-/** Toast with no body — title only. */
-export const TitleOnly: Story = {
-  render: (_args) => {
-    function Trigger() {
-      const { show } = useToast();
-      return (
-        <button
-          type="button"
-          onClick={() => show({ title: 'Session expires in 5 minutes', category: 'warning' })}
-          style={{
-            padding: '8px 16px',
-            borderRadius: 'var(--sv-radius-md)',
-            border: '1px solid var(--sv-color-border)',
-            background: 'var(--sv-color-surface)',
-            color: 'var(--sv-color-text-primary)',
-            fontFamily: 'var(--sv-font-family)',
-            fontSize: 'var(--sv-font-size-sm)',
-            cursor: 'pointer',
-          }}
-        >
-          Show title-only toast
-        </button>
-      );
-    }
-    return (
-      <ToastProvider>
-        <Trigger />
-      </ToastProvider>
-    );
-  },
-};
-
-/** Persistent toast — pass `duration: 0` to disable auto-dismiss. */
-export const Persistent: Story = {
-  render: (_args) => {
-    function Trigger() {
-      const { show } = useToast();
-      return (
-        <button
-          type="button"
-          onClick={() =>
-            show({
-              title: 'Maintenance mode active',
-              message: 'Platform is in read-only mode. Dismiss when resolved.',
-              category: 'error',
-              duration: 0,
-            })
-          }
-          style={{
-            padding: '8px 16px',
-            borderRadius: 'var(--sv-radius-md)',
-            border: '1px solid var(--sv-color-border)',
-            background: 'var(--sv-color-surface)',
-            color: 'var(--sv-color-text-primary)',
-            fontFamily: 'var(--sv-font-family)',
-            fontSize: 'var(--sv-font-size-sm)',
-            cursor: 'pointer',
-          }}
-        >
-          Show persistent toast
-        </button>
-      );
-    }
-    return (
-      <ToastProvider>
-        <Trigger />
-      </ToastProvider>
-    );
-  },
-};
-
-/** Multiple toasts stack vertically below the first. */
-export const Stacked: Story = {
-  render: (_args) => {
-    function Trigger() {
-      const { show } = useToast();
-      const [fired, setFired] = useState(false);
-      return (
-        <button
-          type="button"
-          disabled={fired}
-          onClick={() => {
-            show({ title: 'Plugin installed', category: 'success' });
-            show({
-              title: 'License warning',
-              message: 'Expires in 3 days.',
-              category: 'warning',
-            });
-            show({ title: 'Backup failed', message: 'Check storage quota.', category: 'error' });
-            setFired(true);
-          }}
-          style={{
-            padding: '8px 16px',
-            borderRadius: 'var(--sv-radius-md)',
-            border: '1px solid var(--sv-color-border)',
-            background: 'var(--sv-color-surface)',
-            color: 'var(--sv-color-text-primary)',
-            fontFamily: 'var(--sv-font-family)',
-            fontSize: 'var(--sv-font-size-sm)',
-            cursor: fired ? 'default' : 'pointer',
-            opacity: fired ? 0.5 : 1,
-          }}
-        >
-          Fire 3 toasts
-        </button>
-      );
-    }
-    return (
-      <ToastProvider>
-        <Trigger />
-      </ToastProvider>
-    );
-  },
-};