@sovereignfs/ui 0.83.1 → 0.89.1

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

@@ -1,214 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-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');
-    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);
-
-  it('renders the title and message when open', () => {
-    render(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Remove passkey"
-        message="This cannot be undone."
-      />,
-    );
-    expect(screen.getByText('Remove passkey')).toBeTruthy();
-    expect(screen.getByText('This cannot be undone.')).toBeTruthy();
-  });
-
-  it('renders rich message content', () => {
-    render(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Remove plugin"
-        message={
-          <>
-            Remove <strong>Example</strong>?
-          </>
-        }
-      />,
-    );
-    expect(screen.getByText('Example').tagName).toBe('STRONG');
-  });
-
-  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();
-    render(
-      <ConfirmDialog
-        open
-        onClose={onClose}
-        onConfirm={onConfirm}
-        title="Remove"
-        message="Sure?"
-        confirmLabel="Remove"
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Remove' }));
-    expect(onConfirm).toHaveBeenCalledOnce();
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it('uses custom confirm/cancel labels', () => {
-    render(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Sign out"
-        message="Sign out of this device?"
-        confirmLabel="Sign out"
-        cancelLabel="Stay signed in"
-      />,
-    );
-    expect(screen.getByRole('button', { name: 'Sign out' })).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Stay signed in' })).toBeTruthy();
-  });
-
-  it('disables both actions and shows the error slot when pending', () => {
-    render(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Remove plugin"
-        message="Sure?"
-        confirmLabel="Removing…"
-        pending
-        error="Server error — try again."
-      />,
-    );
-    expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(
-      true,
-    );
-    expect((screen.getByRole('button', { name: 'Removing…' }) as HTMLButtonElement).disabled).toBe(
-      true,
-    );
-    expect(screen.getByText('Server error — try again.')).toBeTruthy();
-  });
-
-  it('renders a destructive confirm action distinctly from the default variant', () => {
-    const { rerender } = render(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Remove"
-        message="Sure?"
-        confirmLabel="Remove"
-      />,
-    );
-    const defaultClass = screen.getByRole('button', { name: 'Remove' }).className;
-
-    rerender(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Remove"
-        message="Sure?"
-        confirmLabel="Remove"
-        destructive
-      />,
-    );
-    const destructiveClass = screen.getByRole('button', { name: 'Remove' }).className;
-    expect(destructiveClass).not.toBe(defaultClass);
-  });
-});

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

@@ -1,21 +0,0 @@
-.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

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

@@ -1,66 +0,0 @@
-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.stories.tsx

@@ -1,81 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ContextMenu } from './ContextMenu';
-
-const meta = {
-  title: 'Components/ContextMenu',
-  component: ContextMenu,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          "Right-click menu on desktop, long-press on touch. Desktop positioning reuses Popover's existing collision detection anchored to the click point; touch opens the same items in a Drawer bottom sheet — a floating panel at a touch point isn't a pattern touch interfaces have.",
-      },
-    },
-  },
-  args: {
-    children: <span />,
-    items: [
-      { label: 'Rename', onSelect: () => {} },
-      { label: 'Duplicate', onSelect: () => {} },
-      { type: 'separator' },
-      { label: 'Delete', destructive: true, onSelect: () => {} },
-    ],
-    'aria-label': 'Row actions',
-  },
-} satisfies Meta<typeof ContextMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  render: (args) => (
-    <ContextMenu {...args}>
-      <div
-        style={{
-          width: 240,
-          padding: 'var(--sv-space-4)',
-          border: '1px dashed var(--sv-color-border-strong)',
-          borderRadius: 'var(--sv-radius-md)',
-          textAlign: 'center',
-          fontSize: 14,
-          color: 'var(--sv-color-text-muted)',
-        }}
-      >
-        Right-click here (or long-press on touch)
-      </div>
-    </ContextMenu>
-  ),
-};
-
-export const WithIconsAndChecked: Story = {
-  args: {
-    items: [
-      { type: 'label', label: 'Sort by' },
-      { label: 'Name', checked: true, onSelect: () => {} },
-      { label: 'Date modified', checked: false, onSelect: () => {} },
-      { type: 'separator' },
-      { label: 'Rename', icon: 'pencil', onSelect: () => {} },
-      { label: 'Delete', icon: 'trash-2', destructive: true, onSelect: () => {} },
-    ],
-  },
-  render: (args) => (
-    <ContextMenu {...args}>
-      <div
-        style={{
-          width: 240,
-          padding: 'var(--sv-space-4)',
-          border: '1px dashed var(--sv-color-border-strong)',
-          borderRadius: 'var(--sv-radius-md)',
-          textAlign: 'center',
-          fontSize: 14,
-          color: 'var(--sv-color-text-muted)',
-        }}
-      >
-        Right-click here
-      </div>
-    </ContextMenu>
-  ),
-};

package/src/components/ContextMenu/ContextMenu.tsx

@@ -1,100 +0,0 @@
-'use client';
-
-import { cloneElement, useState } from 'react';
-import type { ReactElement } from 'react';
-import type { MouseEvent as ReactMouseEvent } from 'react';
-import { useIsMobile, useLongPress } from '../../hooks';
-import { Popover } from '../Popover/Popover';
-import { Drawer } from '../Drawer/Drawer';
-import { MenuEntries, type MenuEntry, type MenuItem } from '../Menu/Menu';
-
-export interface ContextMenuProps {
-  /** The element that gets right-click (desktop) / long-press (touch)
-   * behavior — cloned with the trigger handlers, rendered as-is otherwise.
-   * Typed with `<any>` props (not a bare `ReactElement`, whose implicit
-   * `unknown` props type makes `cloneElement` reject *both* branches of
-   * the long-press/onContextMenu union below — an interface value like
-   * `LongPressHandlers` isn't assignable to an indexed props type without
-   * its own index signature) — the standard, narrowly-scoped escape hatch
-   * for "clone an arbitrary child with props not known ahead of time". */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- see comment above
-  children: ReactElement<any>;
-  items: MenuEntry[];
-  'aria-label': string;
-}
-
-/**
- * ContextMenu — right-click menu on desktop, long-press on touch.
- *
- * Desktop positioning reuses `Popover`'s existing collision-detection logic
- * rather than reimplementing it: the panel is wrapped in a zero-size,
- * `position: fixed` anchor placed at the click coordinates, so `Popover`
- * measures and flips against *that* point exactly as it would a normal
- * trigger element.
- *
- * Touch uses `useLongPress` (which already handles the OS's own long-press
- * callout/context-menu suppression) and opens the same items in a `Drawer`
- * bottom sheet — the same adaptive-surface split `Menu` already uses,
- * because a floating panel positioned at a touch point isn't a pattern
- * touch interfaces have in the first place.
- */
-export function ContextMenu({ children, items, 'aria-label': ariaLabel }: ContextMenuProps) {
-  const isMobile = useIsMobile();
-  const [open, setOpen] = useState(false);
-  const [point, setPoint] = useState({ x: 0, y: 0 });
-
-  const longPressHandlers = useLongPress({
-    onLongPress: () => setOpen(true),
-    disabled: !isMobile,
-  });
-
-  function handleContextMenu(e: ReactMouseEvent) {
-    e.preventDefault();
-    setPoint({ x: e.clientX, y: e.clientY });
-    setOpen(true);
-  }
-
-  const wrappedChild = cloneElement(
-    children,
-    isMobile ? longPressHandlers : { onContextMenu: handleContextMenu },
-  );
-
-  const list = (
-    <MenuEntries
-      items={items}
-      onSelect={(entry: MenuItem) => {
-        setOpen(false);
-        entry.onSelect?.();
-      }}
-    />
-  );
-
-  if (isMobile) {
-    return (
-      <>
-        {wrappedChild}
-        <Drawer open={open} onClose={() => setOpen(false)} aria-label={ariaLabel}>
-          {list}
-        </Drawer>
-      </>
-    );
-  }
-
-  return (
-    <>
-      {wrappedChild}
-      {open && (
-        <div style={{ position: 'fixed', left: point.x, top: point.y, width: 0, height: 0 }}>
-          <Popover
-            trigger={<span />}
-            open={open}
-            onClose={() => setOpen(false)}
-            aria-label={ariaLabel}
-          >
-            {list}
-          </Popover>
-        </div>
-      )}
-    </>
-  );
-}

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

@@ -1,87 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { ContextMenu } from '../ContextMenu';
-
-let isMobileMatches = false;
-
-function installMatchMedia() {
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockImplementation((query: string) => ({
-      matches: isMobileMatches,
-      media: query,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  );
-}
-
-const items = [{ label: 'Delete', onSelect: vi.fn() }];
-
-describe('ContextMenu', () => {
-  beforeEach(() => {
-    isMobileMatches = false;
-    installMatchMedia();
-  });
-
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('does not show the menu before any trigger', () => {
-    render(
-      <ContextMenu items={items} aria-label="Row actions">
-        <div>Row</div>
-      </ContextMenu>,
-    );
-    expect(screen.queryByRole('menu')).toBeNull();
-  });
-
-  it('opens on right-click (desktop) and prevents the native context menu', () => {
-    render(
-      <ContextMenu items={items} aria-label="Row actions">
-        <div>Row</div>
-      </ContextMenu>,
-    );
-    const target = screen.getByText('Row');
-    const event = fireEvent.contextMenu(target, { clientX: 100, clientY: 150 });
-    expect(event).toBe(false); // fireEvent returns false when preventDefault was called
-    expect(screen.getByRole('menu')).toBeDefined();
-  });
-
-  it('selecting an item calls onSelect and closes the menu', () => {
-    const onSelect = vi.fn();
-    render(
-      <ContextMenu items={[{ label: 'Delete', onSelect }]} aria-label="Row actions">
-        <div>Row</div>
-      </ContextMenu>,
-    );
-    fireEvent.contextMenu(screen.getByText('Row'), { clientX: 10, clientY: 10 });
-    fireEvent.click(screen.getByRole('menuitem', { name: 'Delete' }));
-    expect(onSelect).toHaveBeenCalled();
-    expect(screen.queryByRole('menu')).toBeNull();
-  });
-
-  it('opens via long-press on touch instead of right-click', () => {
-    vi.useFakeTimers();
-    isMobileMatches = true;
-    installMatchMedia();
-    render(
-      <ContextMenu items={items} aria-label="Row actions">
-        <div>Row</div>
-      </ContextMenu>,
-    );
-    const target = screen.getByText('Row');
-    fireEvent.pointerDown(target, { pointerType: 'touch', clientX: 10, clientY: 10 });
-    act(() => {
-      vi.advanceTimersByTime(600);
-    });
-    expect(screen.getByRole('menu')).toBeDefined();
-    vi.useRealTimers();
-  });
-});

package/src/components/CurrencyInput/CurrencyInput.stories.tsx

@@ -1,50 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { CurrencyInput } from './CurrencyInput';
-
-const meta = {
-  title: 'Components/CurrencyInput',
-  component: CurrencyInput,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Decimal amount entry that reports its value as integer cents, matching the "amounts are always smallest-unit integers" data-model convention. Preserves in-progress typing (e.g. a trailing decimal point) instead of reformatting on every keystroke.',
-      },
-    },
-  },
-  args: {
-    valueCents: null,
-    onValueChange: () => {},
-  },
-} satisfies Meta<typeof CurrencyInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function ControlledCurrencyInput({ initialCents }: { initialCents: number | null }) {
-  const [cents, setCents] = useState<number | null>(initialCents);
-  return (
-    <CurrencyInput
-      valueCents={cents}
-      onValueChange={setCents}
-      placeholder="0.00"
-      aria-label="Amount"
-    />
-  );
-}
-
-export const Empty: Story = {
-  render: () => <ControlledCurrencyInput initialCents={null} />,
-};
-
-export const Prefilled: Story = {
-  render: () => <ControlledCurrencyInput initialCents={4250} />,
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <CurrencyInput valueCents={1000} onValueChange={() => {}} aria-label="Amount" disabled />
-  ),
-};