@sovereignfs/ui 0.45.0 → 0.83.1

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

@@ -1,22 +1,47 @@
 // @vitest-environment jsdom
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { ConfirmDialog } from '../ConfirmDialog';
 
 // jsdom does not implement HTMLDialogElement.showModal()/close() (a
 // long-standing, documented gap) — polyfill the minimum behavior the
 // component depends on: the `open` attribute reflecting visibility, and
 // close() dispatching the native 'close' event ConfirmDialog listens for.
+//
+// Two details matter here beyond the minimum, both load-bearing for the
+// double-onClose regression tests below: (1) a no-op when already closed,
+// matching the HTML spec's own early return, and (2) the 'close' event is
+// queued rather than dispatched synchronously ("queue an element task ... to
+// fire an event named close" per spec) — deferring it means a listener
+// (re-)attached during the SAME synchronous React commit that triggered this
+// close() call is still reachable once the event actually fires, exactly as
+// in a real browser. Dispatching synchronously instead (the simpler version
+// this replaced) fires the event in the middle of React's effect
+// cleanup/setup phase, when no listener happens to be attached yet — which
+// made the double-call bug this file guards against silently unreproducible
+// in jsdom regardless of whether the underlying component bug was present.
 beforeEach(() => {
   HTMLDialogElement.prototype.showModal = function (this: HTMLDialogElement) {
     this.setAttribute('open', '');
   };
   HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
+    if (!this.hasAttribute('open')) return;
     this.removeAttribute('open');
-    this.dispatchEvent(new Event('close'));
+    queueMicrotask(() => this.dispatchEvent(new Event('close')));
   };
 });
 
+// Flushes any chain of queueMicrotask-deferred dispatches and the React
+// state updates/effects they trigger. A single real macrotask tick is
+// enough: the microtask queue always fully drains — including microtasks
+// newly queued from within an already-running one — before a macrotask runs.
+async function flushDeferredDialogEvents() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+
 describe('ConfirmDialog', () => {
   afterEach(cleanup);
 
@@ -51,15 +76,58 @@ describe('ConfirmDialog', () => {
     expect(screen.getByText('Example').tagName).toBe('STRONG');
   });
 
-  it('calls onClose on Cancel', () => {
+  it('calls onClose on Cancel', async () => {
     const onClose = vi.fn();
     render(
       <ConfirmDialog open onClose={onClose} onConfirm={() => {}} title="Remove" message="Sure?" />,
     );
+    // Cancel now calls dialogRef.current.close() rather than onClose
+    // directly (see ConfirmDialog.tsx) — onClose only fires once the
+    // resulting (deferred, see the polyfill above) native 'close' event
+    // reaches ConfirmDialog's own listener.
     fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    await flushDeferredDialogEvents();
     expect(onClose).toHaveBeenCalledOnce();
   });
 
+  // Statefully wired, unlike the test above: a real consumer's onClose flips
+  // its own `open` state to false, which re-runs ConfirmDialog's internal
+  // `if (open) showModal(); else el.close();` effect and calls el.close()
+  // itself. Pre-fix, Cancel/backdrop-click also called onClose directly,
+  // so this path fired onClose a second time; the test above's static
+  // `open` prop never changes, so it can't exercise that second re-render.
+  function StatefulConfirmDialog({ onCloseSpy }: { onCloseSpy: () => void }) {
+    const [open, setOpen] = useState(true);
+    return (
+      <ConfirmDialog
+        open={open}
+        onClose={() => {
+          onCloseSpy();
+          setOpen(false);
+        }}
+        onConfirm={() => {}}
+        title="Remove"
+        message="Sure?"
+      />
+    );
+  }
+
+  it('calls onClose exactly once when a stateful consumer dismisses via Cancel', async () => {
+    const onCloseSpy = vi.fn();
+    render(<StatefulConfirmDialog onCloseSpy={onCloseSpy} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    await flushDeferredDialogEvents();
+    expect(onCloseSpy).toHaveBeenCalledOnce();
+  });
+
+  it('calls onClose exactly once when a stateful consumer dismisses via backdrop click', async () => {
+    const onCloseSpy = vi.fn();
+    render(<StatefulConfirmDialog onCloseSpy={onCloseSpy} />);
+    fireEvent.click(screen.getByRole('dialog'));
+    await flushDeferredDialogEvents();
+    expect(onCloseSpy).toHaveBeenCalledOnce();
+  });
+
   it('calls onConfirm on the confirm action, without itself closing', () => {
     const onConfirm = vi.fn();
     const onClose = vi.fn();

package/src/components/ConsentPrompt/ConsentPrompt.module.css

@@ -0,0 +1,21 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-2);
+}
+
+.title {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+}
+
+.description {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+}
+
+.actions {
+  display: flex;
+  gap: var(--sv-space-2);
+  margin-top: var(--sv-space-1);
+}

package/src/components/ConsentPrompt/ConsentPrompt.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ConsentPrompt } from './ConsentPrompt';
+
+const meta = {
+  title: 'Components/ConsentPrompt',
+  component: ConsentPrompt,
+  parameters: { layout: 'padded' },
+  args: {
+    consumerName: 'Ledger',
+    providerName: 'Finance Tracker',
+    contract: 'expenses',
+    description: 'Monthly expense totals by category, no transaction-level detail.',
+    onAllow: () => {},
+    onDeny: () => {},
+  },
+} satisfies Meta<typeof ConsentPrompt>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {};
+
+export const NoDescription: Story = {
+  args: { description: null },
+};
+
+export const Pending: Story = {
+  args: { pending: true },
+};

package/src/components/ConsentPrompt/ConsentPrompt.tsx

@@ -0,0 +1,66 @@
+import { Button } from '../Button/Button';
+import { Card } from '../Card/Card';
+import styles from './ConsentPrompt.module.css';
+
+export interface ConsentPromptProps {
+  /** The plugin requesting access. */
+  consumerName: string;
+  /** The plugin whose data would be read. */
+  providerName: string;
+  /** The named contract being requested (e.g. `"expenses"`). */
+  contract: string;
+  /**
+   * The provider's own manifest-declared explanation of what this contract
+   * exposes (`data.provides[].description`) — never caller-supplied at
+   * request time, so a consuming plugin can't write its own persuasive copy
+   * for what it's asking to read.
+   */
+  description?: string | null;
+  onAllow: () => void;
+  onDeny?: () => void;
+  allowLabel?: string;
+  denyLabel?: string;
+  /** Disables both buttons and shows a busy state on Allow while a request is in flight. */
+  pending?: boolean;
+  className?: string;
+}
+
+/**
+ * The consent screen shown before one plugin is allowed to read another
+ * plugin's data (RFC 0002 §4) — the step that was previously missing between
+ * a `ConsentRequiredError` and a grant actually being created. Presentational
+ * only: holds no state of its own, so it renders identically wherever it's
+ * used (currently Account → Data's pending-requests list).
+ */
+export function ConsentPrompt({
+  consumerName,
+  providerName,
+  contract,
+  description,
+  onAllow,
+  onDeny,
+  allowLabel = 'Allow',
+  denyLabel = 'Not now',
+  pending = false,
+  className,
+}: ConsentPromptProps) {
+  return (
+    <Card padding="sm" className={[styles.root, className].filter(Boolean).join(' ')}>
+      <p className={styles.title}>
+        <strong>{consumerName}</strong> wants to read <strong>{contract}</strong> from{' '}
+        <strong>{providerName}</strong>
+      </p>
+      {description ? <p className={styles.description}>{description}</p> : null}
+      <div className={styles.actions}>
+        <Button variant="primary" size="sm" onClick={onAllow} disabled={pending} loading={pending}>
+          {allowLabel}
+        </Button>
+        {onDeny ? (
+          <Button variant="ghost" size="sm" onClick={onDeny} disabled={pending}>
+            {denyLabel}
+          </Button>
+        ) : null}
+      </div>
+    </Card>
+  );
+}

package/src/components/ContextMenu/ContextMenu.tsx

@@ -64,7 +64,7 @@ export function ContextMenu({ children, items, 'aria-label': ariaLabel }: Contex
       items={items}
       onSelect={(entry: MenuItem) => {
         setOpen(false);
-        entry.onSelect();
+        entry.onSelect?.();
       }}
     />
   );

package/src/components/DatePicker/DatePicker.module.css

@@ -17,7 +17,7 @@
   line-height: 1.5;
   color: var(--sv-color-text-primary);
   background-color: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border-strong);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
   border-radius: var(--sv-radius-md);
   cursor: pointer;
   transition:

package/src/components/DeviceOnlyGate/DeviceOnlyGate.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { EmptyState } from '../EmptyState/EmptyState';
+
+export interface DeviceOnlyGateProps {
+  children: ReactNode;
+  /** Defaults to a generic "this app" phrasing — pass the plugin's own name. */
+  surfaceName?: string;
+  /**
+   * The caller's own `isDeviceOnlyTierAvailable()` result (from
+   * `@sovereignfs/sdk/device-client`) — taken as a plain boolean rather than
+   * computed inside this component, so `@sovereignfs/ui` never depends on
+   * `@sovereignfs/sdk` (this package must stay usable standalone, outside the
+   * plugin runtime — RFC 0073).
+   */
+  available: boolean;
+  className?: string;
+}
+
+/**
+ * DeviceOnlyGate — blocks a `device-only`-tier plugin's content from
+ * rendering on a surface that cannot provide the durable, encrypted,
+ * device-auth-gated store that tier requires, showing an explanatory empty
+ * state instead of a broken screen (research 0012, epic tasks 2.33 + 3.36).
+ *
+ * A `device-only` plugin wraps its own root content in this the same way
+ * Console and Account wrap theirs in `OfflineGate` — an opt-in pattern each
+ * surface applies to itself, not a platform-level route gate. The launcher
+ * tile's own "Phone only" badge (`useOfflineTileState`) is advisory UI on top
+ * of this; this component is the actual gate, since a user can always reach a
+ * route directly (a bookmark, a deep link) without passing through the
+ * launcher tile at all.
+ *
+ * **Not a security boundary.** Availability here is a capability signal, not
+ * an authorization check — the real protection for `device-only` data is
+ * that it is encrypted and the key requires device auth to release (epic task
+ * 1.22), so it stays inaccessible regardless of whether this gate is present,
+ * bypassed, or simply never reached (e.g. a hand-crafted request against the
+ * plugin's own API routes).
+ */
+export function DeviceOnlyGate({
+  children,
+  surfaceName,
+  available,
+  className,
+}: DeviceOnlyGateProps) {
+  if (available) return <>{children}</>;
+
+  return (
+    <EmptyState
+      icon="smartphone"
+      heading="Phone only"
+      description={`${surfaceName ?? 'This app'} is only available on a phone with secure storage set up.`}
+      className={className}
+    />
+  );
+}

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

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { DeviceOnlyGate } from '../DeviceOnlyGate';
+
+describe('DeviceOnlyGate', () => {
+  afterEach(cleanup);
+
+  it('renders children unchanged when available', () => {
+    render(
+      <DeviceOnlyGate available={true}>
+        <p>Wallet content</p>
+      </DeviceOnlyGate>,
+    );
+    expect(screen.getByText('Wallet content')).toBeDefined();
+  });
+
+  it('replaces children with an explanatory empty state when unavailable', () => {
+    render(
+      <DeviceOnlyGate available={false}>
+        <p>Wallet content</p>
+      </DeviceOnlyGate>,
+    );
+    expect(screen.queryByText('Wallet content')).toBeNull();
+    expect(screen.getByText('Phone only')).toBeDefined();
+  });
+
+  it('names the surface in the message when provided', () => {
+    render(
+      <DeviceOnlyGate available={false} surfaceName="Wallet">
+        <p>Wallet content</p>
+      </DeviceOnlyGate>,
+    );
+    expect(screen.getByText(/Wallet is only available on a phone/)).toBeDefined();
+  });
+
+  it('falls back to generic phrasing with no surface name', () => {
+    render(
+      <DeviceOnlyGate available={false}>
+        <p>Wallet content</p>
+      </DeviceOnlyGate>,
+    );
+    expect(screen.getByText(/This app is only available on a phone/)).toBeDefined();
+  });
+});

package/src/components/DeviceStorageKeyGate/DeviceStorageKeyGate.tsx

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

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