@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/DeviceStorageKeyGate/DeviceStorageKeyGate.tsx

@@ -1,100 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { EmptyState } from '../EmptyState/EmptyState';
-
-/**
- * `'checking'` covers the moment before the caller's own async status check
- * resolves — same transitional-state pattern `EncryptionSection`'s local
- * `LocalState` uses, so this gate never flashes an empty state before the
- * real answer is known. `'no-device-auth'` is the hard-block case (RFC 0093
- * §5, epic task 1.22): the environment supports the tier, but this device
- * has no passcode, fingerprint, or face unlock configured, so a key cannot
- * be created here at all — distinct from `'not-set-up'`, where it can.
- */
-export type DeviceStorageKeyGateStatus =
-  'checking' | 'unsupported' | 'no-device-auth' | 'not-set-up' | 'set-up';
-
-export interface DeviceStorageKeyGateProps {
-  children: ReactNode;
-  /** Defaults to a generic "This app" phrasing — pass the plugin's own name. */
-  surfaceName?: string;
-  /**
-   * The caller's own `getDeviceStorageKeyStatus()` result (from
-   * `@sovereignfs/sdk/device-only-storage`) — taken as a plain status rather
-   * than computed inside this component, so `@sovereignfs/ui` never depends
-   * on `@sovereignfs/sdk` (same boundary `DeviceOnlyGate`'s `available` prop
-   * draws — this package must stay usable standalone, outside the plugin
-   * runtime — RFC 0073).
-   */
-  status: DeviceStorageKeyGateStatus;
-  /**
-   * Rendered under the "not set up" message — typically a link to Account →
-   * Security. Not built in here: this package depends on no router, so the
-   * caller supplies its own navigable element (a plain `<a>`, a framework
-   * `<Link>`, whatever the host app uses).
-   */
-  setupAction?: ReactNode;
-  className?: string;
-}
-
-/**
- * DeviceStorageKeyGate — blocks a `device-only`-tier plugin's content until
- * the user has set up their Device Storage Key (RFC 0093 §2, epic task
- * 1.22). Distinct from `DeviceOnlyGate`: that one checks whether the *tier
- * itself* is available on this surface (native shell, secure-storage bridge
- * present); this one checks whether the user has actually completed the
- * one-time, per-device enrollment that tier depends on. A `device-only`
- * plugin typically wants both — `DeviceOnlyGate` outermost (no point
- * checking enrollment on a surface that cannot offer the tier at all), this
- * gate inside it.
- *
- * Enrollment is centralized and decoupled from any single plugin (RFC 0093
- * §2): a plugin that finds no key set up does not run its own enrollment
- * ceremony inline. It stops here and points the user at Account → Security —
- * the one place enrollment happens for every `device-only` plugin on this
- * device — via `setupAction`, the same opt-in, self-applied pattern
- * `OfflineGate`/`DeviceOnlyGate` already use for their own surfaces.
- */
-export function DeviceStorageKeyGate({
-  children,
-  surfaceName,
-  status,
-  setupAction,
-  className,
-}: DeviceStorageKeyGateProps) {
-  if (status === 'checking') return null;
-  if (status === 'set-up') return <>{children}</>;
-
-  if (status === 'unsupported') {
-    return (
-      <EmptyState
-        icon="smartphone"
-        heading="Phone only"
-        description={`${surfaceName ?? 'This app'} needs a security feature (WebAuthn PRF and Origin Private File System support) that isn't available here.`}
-        className={className}
-      />
-    );
-  }
-
-  if (status === 'no-device-auth') {
-    return (
-      <EmptyState
-        icon="alert-triangle"
-        heading="Set up a device passcode"
-        description={`${surfaceName ?? 'This app'} needs a passcode, fingerprint, or face unlock set up on this device before its Device Storage Key can be created. Set one up in your device's system settings, then come back.`}
-        className={className}
-      />
-    );
-  }
-
-  return (
-    <EmptyState
-      icon="lock"
-      heading="Set up your Device Storage Key"
-      description={`${surfaceName ?? 'This app'} keeps its data only on this device, protected by a Device Storage Key you set up once in Account → Security.`}
-      action={setupAction}
-      className={className}
-    />
-  );
-}

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

@@ -1,119 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { DeviceStorageKeyGate } from '../DeviceStorageKeyGate';
-
-describe('DeviceStorageKeyGate', () => {
-  afterEach(cleanup);
-
-  it('renders nothing while checking', () => {
-    const { container } = render(
-      <DeviceStorageKeyGate status="checking">
-        <p>Notes content</p>
-      </DeviceStorageKeyGate>,
-    );
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders children unchanged once set up', () => {
-    render(
-      <DeviceStorageKeyGate status="set-up">
-        <p>Notes content</p>
-      </DeviceStorageKeyGate>,
-    );
-    expect(screen.getByText('Notes content')).toBeDefined();
-  });
-
-  it('shows a "Phone only"-style message when the environment is unsupported', () => {
-    render(
-      <DeviceStorageKeyGate status="unsupported">
-        <p>Notes content</p>
-      </DeviceStorageKeyGate>,
-    );
-    expect(screen.queryByText('Notes content')).toBeNull();
-    expect(screen.getByText('Phone only')).toBeDefined();
-  });
-
-  it('shows the setup message and prompt when not-set-up', () => {
-    render(
-      <DeviceStorageKeyGate status="not-set-up">
-        <p>Notes content</p>
-      </DeviceStorageKeyGate>,
-    );
-    expect(screen.queryByText('Notes content')).toBeNull();
-    expect(screen.getByText('Set up your Device Storage Key')).toBeDefined();
-  });
-
-  it('names the surface in the not-set-up message when provided', () => {
-    render(
-      <DeviceStorageKeyGate status="not-set-up" surfaceName="Notes">
-        <p>Notes content</p>
-      </DeviceStorageKeyGate>,
-    );
-    expect(screen.getByText(/Notes keeps its data only on this device/)).toBeDefined();
-  });
-
-  it('falls back to generic phrasing with no surface name', () => {
-    render(
-      <DeviceStorageKeyGate status="not-set-up">
-        <p>Notes content</p>
-      </DeviceStorageKeyGate>,
-    );
-    expect(screen.getByText(/This app keeps its data only on this device/)).toBeDefined();
-  });
-
-  it('renders the caller-supplied setupAction when not-set-up', () => {
-    render(
-      <DeviceStorageKeyGate
-        status="not-set-up"
-        setupAction={<a href="/account/security">Go to Account → Security</a>}
-      >
-        <p>Notes content</p>
-      </DeviceStorageKeyGate>,
-    );
-    expect(screen.getByRole('link', { name: 'Go to Account → Security' })).toBeDefined();
-  });
-
-  it('renders no setupAction when unsupported, even if one is passed', () => {
-    render(
-      <DeviceStorageKeyGate
-        status="unsupported"
-        setupAction={<a href="/account/security">Go to Account → Security</a>}
-      >
-        <p>Notes content</p>
-      </DeviceStorageKeyGate>,
-    );
-    expect(screen.queryByRole('link')).toBeNull();
-  });
-
-  it('shows the hard-block message when no-device-auth', () => {
-    render(
-      <DeviceStorageKeyGate status="no-device-auth">
-        <p>Notes content</p>
-      </DeviceStorageKeyGate>,
-    );
-    expect(screen.queryByText('Notes content')).toBeNull();
-    expect(screen.getByText('Set up a device passcode')).toBeDefined();
-  });
-
-  it('names the surface in the no-device-auth message when provided', () => {
-    render(
-      <DeviceStorageKeyGate status="no-device-auth" surfaceName="Notes">
-        <p>Notes content</p>
-      </DeviceStorageKeyGate>,
-    );
-    expect(screen.getByText(/Notes needs a passcode, fingerprint, or face unlock/)).toBeDefined();
-  });
-
-  it('renders no setupAction when no-device-auth, even if one is passed — fixing this is a device settings change, not a Sovereign link', () => {
-    render(
-      <DeviceStorageKeyGate
-        status="no-device-auth"
-        setupAction={<a href="/account/security">Go to Account → Security</a>}
-      >
-        <p>Notes content</p>
-      </DeviceStorageKeyGate>,
-    );
-    expect(screen.queryByRole('link')).toBeNull();
-  });
-});

package/src/components/Dialog/Dialog.module.css

@@ -1,226 +0,0 @@
-/* Dialog — scrim + centered panel. Tokens only (z-index is structural, not a
- * theming value, so it has no token).
- *
- * Each size is a FIXED box (width AND height) — the panel never grows or
- * shrinks with its content, so switching views inside it (e.g. overlay-plugin
- * tabs) keeps the dialog the exact same size. Overflow scrolls inside `.content`
- * while the panel and its close button stay put. The scrim's padding is the
- * fixed margin `lg` leaves around the viewport; `sm`/`md` are centered and cap
- * to that available space on short screens. On mobile every size becomes a
- * full-screen sheet.
- *
- * `--sv-dialog-inset-left` lets a host inset the scrim past a fixed left nav
- * rail (e.g. the platform sidebar) so the overlay's left margin is measured
- * from the rail, not the viewport edge, and the rail stays visible/usable.
- * `--sv-dialog-inset-top` (RFC 0013) mirrors this on the vertical axis: the
- * shell sets it to the mobile header height so the header stays visible and
- * interactive above the dialog sheet. Defaults to 0 for standalone use. */
-
-.scrim {
-  position: fixed;
-  top: var(--sv-dialog-inset-top, 0);
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* left edge always 0 so the backdrop covers the full viewport incl. sidebar.
-     padding-left offsets the panel's available area to start at the rail edge. */
-  padding: var(--sv-space-8);
-  padding-left: calc(var(--sv-dialog-inset-left, 0px) + var(--sv-space-8));
-  background: var(--sv-color-scrim);
-  /* Entrance/exit fade. The Dialog component drives this via a two-phase
-     mount (see motion.ts) — .scrimOpen is added one frame after mount so this
-     transition has somewhere to animate from, and removed (while staying
-     mounted) for the exit before the component actually unmounts. */
-  opacity: 0;
-  transition: opacity var(--sv-motion-duration-base) var(--sv-motion-ease-out);
-}
-
-.scrimOpen {
-  opacity: 1;
-}
-
-.panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--sv-color-surface-raised);
-  color: var(--sv-color-text-primary);
-  border: 1px solid var(--sv-color-border);
-  border-radius: var(--sv-radius-lg);
-  box-shadow: var(--sv-shadow-overlay);
-  /* Desktop entrance: fade + gentle scale-up. Same two-phase-mount pattern as
-     .scrim above. Mobile overrides this to a slide-up instead (below). */
-  opacity: 0;
-  transform: scale(0.96);
-  transition:
-    opacity var(--sv-motion-duration-base) var(--sv-motion-ease-out),
-    transform var(--sv-motion-duration-base) var(--sv-motion-ease-out);
-}
-
-.panelOpen {
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* prefers-reduced-motion: collapse both fade/scale and slide to near-instant.
-   Not literally 0 — a 0ms transition can skip applying entirely in some
-   engines, and the JS unmount timer (Dialog.tsx's MOTION_DURATION_MS,
-   switched to ~0 via usePrefersReducedMotion) needs a transition to still be
-   "present" for the visual state to actually reach its end value in time. */
-@media (prefers-reduced-motion: reduce) {
-  .scrim,
-  .panel {
-    transition-duration: 0.01ms;
-  }
-}
-
-/* Sizing audit: reviewed padding/radius against this scale's other
-   surfaces. --sv-radius-lg (shared with Card via .panel below) left
-   unchanged for the same blast-radius reason as Card.module.css. */
-.content {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--sv-space-6);
-  /* Disable elastic overscroll within the dialog: `none` stops both scroll-
-     chaining to the parent and the iOS rubber-band bounce inside the panel.
-     `contain` only prevents chaining — the panel itself still bounces, which
-     reveals white panel-background between OverlayHeader and the sticky tab
-     strip on iOS PWA. A dialog is a bounded surface where bounce is a visual
-     bug, not a feature. */
-  overscroll-behavior: none;
-}
-
-/* Fixed sizes. `max-*: 100%` caps to the scrim's content box (viewport minus
- * margin) so a size never overflows a small viewport. */
-.sm {
-  width: 24rem;
-  height: 28rem;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.md {
-  width: 36rem;
-  height: 42rem;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.lg,
-.full {
-  width: 100%;
-  height: 100%;
-}
-
-.close {
-  position: absolute;
-  top: var(--sv-space-3);
-  right: var(--sv-space-3);
-  z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sv-space-8);
-  height: var(--sv-space-8);
-  border: none;
-  border-radius: var(--sv-radius-md);
-  background: transparent;
-  color: var(--sv-color-text-muted);
-  font-size: var(--sv-font-size-xl);
-  line-height: 1;
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .close:hover {
-    background: var(--sv-color-surface-sunken);
-    color: var(--sv-color-text-primary);
-  }
-}
-
-.close:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-/* Hidden on desktop; shown only on mobile where it replaces the close button.
- * OverlayHeader owns its own background/border/padding — this wrapper class
- * only toggles visibility per breakpoint. */
-.mobileHeader {
-  display: none;
-}
-
-/* Mobile: full-screen sheet (RFC 0001 §3, breakpoint unified to 768px per
- * RFC 0013). Every size fills the scrim's available area (which is already
- * inset from the top by --sv-dialog-inset-top when a fixed header is shown).
- * The panel therefore fills height: 100% of the remaining space, not 100dvh. */
-@media (max-width: 768px) {
-  /* On mobile the overlay feels like a full-page push, not a floating modal.
-     Remove the dim scrim and panel chrome so it's indistinguishable from a
-     regular page render. router.back() still closes it correctly.
-     bottom stops the scrim above the footer nav (matching Drawer) instead of
-     running the full viewport height — the panel used to extend under the
-     footer with only .content's own padding compensating for it. */
-  .scrim {
-    padding: 0;
-    background: transparent;
-    bottom: var(--sv-shell-footer-height, 0);
-  }
-
-  .panel,
-  .sm,
-  .md,
-  .lg,
-  .full {
-    width: 100%;
-    height: 100%;
-    max-width: none;
-    max-height: none;
-    border: none;
-    border-radius: 0;
-    box-shadow: none;
-    background: var(--sv-color-surface);
-  }
-
-  /* Mobile entrance is a slide-up, not the desktop fade+scale — matches "page
-     push" framing above. No opacity change (the panel is opaque full-screen
-     content, not a floating box), so only transform needs a transition here. */
-  .panel {
-    opacity: 1;
-    transform: translateY(100%);
-    transition: transform var(--sv-motion-duration-base) var(--sv-motion-ease-out);
-  }
-
-  .panelOpen {
-    transform: translateY(0);
-  }
-
-  /* Desktop close button is replaced by OverlayHeader on mobile. */
-  .close {
-    display: none;
-  }
-
-  /* Title + close button in one solid row, via the shared OverlayHeader
-     component. Being a flex sibling before .content means it never scrolls —
-     the content area scrolls below it.
-     .content itself needs no mobile override here any more: it used to zero
-     out padding-top so a plugin's hand-rolled sticky header (rendered as
-     .content's own first child, right below OverlayHeader) would sit flush
-     against it. That case no longer exists — a plugin with a tab strip/
-     secondary nav now hands it to OverlayHeader's own secondRow slot
-     (useOverlaySecondRow) instead of rendering it inside .content; Account
-     and Console both migrated to this (mobile design-system plan, Phase
-     C1b). With .content's first child back to being genuine page content, it
-     needs the same breathing room from the header that .content's own base
-     padding (var(--sv-space-6) on every side) already provides everywhere
-     else. */
-  .mobileHeader {
-    display: block;
-  }
-}

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,147 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from 'storybook/test';
-import { useState } from 'react';
-import { Button } from '../Button/Button';
-import { Dialog, useOverlaySecondRow } from './Dialog';
-
-// Controlled wrapper so the play function can open/inspect the dialog.
-function DialogDemo({
-  size = 'lg',
-  label = 'Example dialog',
-}: {
-  size?: 'sm' | 'md' | 'lg' | 'full';
-  label?: string;
-}) {
-  const [open, setOpen] = useState(false);
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open {size} dialog</Button>
-      <Dialog open={open} onClose={() => setOpen(false)} size={size} aria-label={label}>
-        <div style={{ padding: 24, fontFamily: 'system-ui' }}>
-          <h2
-            style={{
-              fontSize: 18,
-              fontWeight: 600,
-              color: 'var(--sv-color-text-primary)',
-              marginBottom: 12,
-            }}
-          >
-            {label}
-          </h2>
-          <p style={{ color: 'var(--sv-color-text-muted)', marginBottom: 24 }}>
-            This is a <strong>{size}</strong> dialog. Press Esc or click the scrim to dismiss.
-          </p>
-          <Button variant="secondary" onClick={() => setOpen(false)}>
-            Close
-          </Button>
-        </div>
-      </Dialog>
-    </>
-  );
-}
-
-const meta = {
-  title: 'Components/Dialog',
-  component: Dialog,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Modal surface (scrim + panel). Router-agnostic — caller provides `onClose`. Supports Esc, scrim-click, focus trap and focus restoration. Sizes: `sm` / `md` / `lg` / `full`. Mobile always renders as a full-screen sheet.',
-      },
-    },
-  },
-} satisfies Meta<typeof Dialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Small: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => <DialogDemo size="sm" label="Small dialog" />,
-};
-
-export const Medium: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => <DialogDemo size="md" label="Medium dialog" />,
-};
-
-export const Large: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => <DialogDemo size="lg" label="Large dialog" />,
-};
-
-export const Closed: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => (
-    <Dialog open={false} onClose={() => {}} aria-label="Closed dialog">
-      <p>Never seen</p>
-    </Dialog>
-  ),
-};
-
-/** Play function opens the dialog and asserts it is visible. */
-export const OpenViaInteraction: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => <DialogDemo size="md" label="Interaction test dialog" />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByRole('button', { name: /open md dialog/i });
-    await userEvent.click(trigger);
-    const dialog = canvas.getByRole('dialog');
-    await expect(dialog).toBeVisible();
-  },
-};
-
-// A stand-in for a plugin's own route layout — several component layers below
-// wherever <Dialog> itself is instantiated, exactly like the real
-// AccountLayout/ConsoleLayout usage this hook was built for.
-function NestedTabStrip() {
-  const insideOverlay = useOverlaySecondRow(
-    <div style={{ display: 'flex', gap: 16, padding: '0 16px' }}>
-      {['Profile', 'Security', 'Preferences'].map((tab) => (
-        <span key={tab} style={{ fontSize: 14, color: 'var(--sv-color-text-primary)' }}>
-          {tab}
-        </span>
-      ))}
-    </div>,
-  );
-  return (
-    <p style={{ color: 'var(--sv-color-text-muted)', fontSize: 13 }}>
-      useOverlaySecondRow found a Dialog ancestor: <strong>{String(insideOverlay)}</strong>. Switch
-      the viewport toolbar to a mobile width to see the tab strip render inside the Dialog's own
-      mobile OverlayHeader instead of here.
-    </p>
-  );
-}
-
-/**
- * Demonstrates useOverlaySecondRow — solves the "double header" problem for
- * overlay-shell plugins (Console, Account): a deeply-nested layout hands its
- * tab strip up to the enclosing Dialog's mobile OverlayHeader instead of
- * rendering a second header bar as ordinary content. Only visible at mobile
- * widths, where Dialog's own OverlayHeader takes over; at desktop widths the
- * secondRow prop has no visible effect (OverlayHeader is desktop-hidden).
- */
-export const WithOverlaySecondRow: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => {
-    function Demo() {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button onClick={() => setOpen(true)}>Open dialog with tab strip</Button>
-          <Dialog open={open} onClose={() => setOpen(false)} title="Account" aria-label="Account">
-            <div style={{ padding: 24, fontFamily: 'system-ui' }}>
-              <NestedTabStrip />
-            </div>
-          </Dialog>
-        </>
-      );
-    }
-    return <Demo />;
-  },
-};