@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/SwipeStack/SwipeStack.module.css

@@ -1,101 +0,0 @@
-.wrap {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-3);
-  height: 100%;
-  width: 100%;
-}
-
-.stack {
-  position: relative;
-  flex: 1 1 auto;
-  min-height: 0;
-}
-
-.peek {
-  position: absolute;
-  inset: 0;
-  transform: scale(0.94) translateY(var(--sv-space-3));
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-.cardSlot {
-  position: absolute;
-  inset: 0;
-}
-
-/* Styled directly rather than wrapping the Card component: Card doesn't
-   forward a ref, and this element must be the exact node useSwipeStack
-   translates/rotates as one unit — a Card wrapping an inner dragged div
-   would leave its own border/shadow visually static while only the inner
-   div moved. */
-.card {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  background: var(--sv-color-surface-raised);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  border-radius: var(--sv-radius-lg);
-  box-shadow: var(--sv-shadow-card);
-  touch-action: none; /* always overridden inline with useSwipeStack's computed value */
-  user-select: none;
-  cursor: grab;
-}
-
-.card:active {
-  cursor: grabbing;
-}
-
-.stamp {
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-1);
-  padding: var(--sv-space-1) var(--sv-space-3);
-  border: 2px solid var(--sv-color-text-primary);
-  border-radius: var(--sv-radius-md);
-  background: var(--sv-color-surface-raised);
-  color: var(--sv-color-text-primary);
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-semibold);
-  pointer-events: none;
-}
-
-.stampUp {
-  top: var(--sv-space-4);
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: var(--sv-stack-progress-up, 0);
-}
-
-.stampDown {
-  bottom: var(--sv-space-4);
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: var(--sv-stack-progress-down, 0);
-}
-
-.stampLeft {
-  top: var(--sv-space-4);
-  left: var(--sv-space-4);
-  transform: rotate(-8deg);
-  opacity: var(--sv-stack-progress-left, 0);
-}
-
-.stampRight {
-  top: var(--sv-space-4);
-  right: var(--sv-space-4);
-  transform: rotate(8deg);
-  opacity: var(--sv-stack-progress-right, 0);
-}
-
-.actions {
-  display: flex;
-  justify-content: center;
-  gap: var(--sv-space-2);
-  flex: 0 0 auto;
-}

package/src/components/SwipeStack/SwipeStack.tsx

@@ -1,199 +0,0 @@
-'use client';
-
-import { Children, isValidElement, useEffect, useRef, useState } from 'react';
-import type { ReactElement, ReactNode } from 'react';
-import { Button } from '../Button/Button';
-import { Icon, type IconName } from '../Icon/Icon';
-import { useSwipeStack, SWIPE_STACK_TRANSITION_MS } from '../../hooks/useSwipeStack';
-import type { SwipeDirection } from '../../hooks/useSwipeStack';
-import { SwipeStackCard } from './SwipeStackCard';
-import styles from './SwipeStack.module.css';
-
-export interface SwipeDirectionMeta {
-  /** Visible text on the fallback button and the in-drag stamp. */
-  label: string;
-  icon?: IconName;
-}
-
-export interface SwipeStackProps {
-  /** Required — labels the swipeable region for assistive tech. No generic
-   *  fallback, since one would be wrong for every actual consumer. */
-  'aria-label': string;
-  /** Which of the 4 directions are live, and what each is called. A
-   *  direction absent here cannot be dragged toward at all (useSwipeStack
-   *  treats it as a wall) and gets no fallback button or stamp. SwipeStack
-   *  itself has no opinion on what a direction *means* — that vocabulary
-   *  belongs entirely to the caller. */
-  directions: Partial<Record<SwipeDirection, SwipeDirectionMeta>>;
-  /** Fires once a drag (or a fallback button) commits to a direction. Every
-   *  configured direction behaves the same way: the card leaves for good —
-   *  there is no reversible "go back" state. SwipeStack has no opinion on
-   *  where card data lives; the caller is responsible for eventually no
-   *  longer including this cardId in children (e.g. once a mutation lands). */
-  onSwipe: (direction: SwipeDirection, cardId: string) => void;
-  /** Effective drag distance (px) required to commit. Passed straight
-   *  through to useSwipeStack. */
-  threshold?: number;
-  className?: string;
-  /** Must be SwipeStackCard elements (nullish/boolean children are safely
-   *  skipped for conditional cards). A dev-mode warning is logged for any
-   *  other child type — see resolveCards below. */
-  children: ReactNode;
-}
-
-interface ResolvedCard {
-  key: string;
-  element: ReactElement;
-}
-
-const DIRECTION_KEYS: readonly SwipeDirection[] = ['up', 'down', 'left', 'right'];
-
-const STAMP_CLASS: Record<SwipeDirection, string> = {
-  up: styles.stampUp as string,
-  down: styles.stampDown as string,
-  left: styles.stampLeft as string,
-  right: styles.stampRight as string,
-};
-
-function describeChild(child: unknown): string {
-  if (isValidElement(child)) {
-    const type = child.type;
-    if (typeof type === 'string') return `<${type}>`;
-    if (typeof type === 'function') {
-      const named = type as { displayName?: string; name?: string };
-      return `<${named.displayName ?? named.name ?? 'Component'}>`;
-    }
-    return '<unknown>';
-  }
-  if (typeof child === 'string') return `string "${child}"`;
-  return String(child);
-}
-
-function resolveCards(children: ReactNode): ResolvedCard[] {
-  const cards: ResolvedCard[] = [];
-  Children.forEach(children, (child, index) => {
-    if (child === null || child === undefined || child === false || child === true) return;
-    if (!isValidElement(child) || child.type !== SwipeStackCard) {
-      if (process.env.NODE_ENV !== 'production') {
-        console.error(
-          '[SwipeStack] Every child must be a <SwipeStackCard>. ' +
-            `Found ${describeChild(child)} at position ${index}.`,
-        );
-      }
-      return;
-    }
-    const cardProps = child.props as { cardId: string };
-    cards.push({ key: cardProps.cardId, element: child });
-  });
-  return cards;
-}
-
-/**
- * SwipeStack — a compound component for triaging one card at a time by
- * dragging it left/right/up/down (wrapping useSwipeStack), plus an
- * always-visible non-gesture fallback: a button per configured direction,
- * wired to the identical commit path and exit animation as a real drag.
- *
- * Every direction is independently optional and behaves the same way once
- * triggered — the card leaves for good, there is no reversible "go back".
- * SwipeStack owns rendering, drag physics, and the stamp/fallback UI only;
- * it has no opinion on where card data lives or what a direction means —
- * see SwipeStackProps.onSwipe.
- */
-export function SwipeStack({
-  'aria-label': ariaLabel,
-  directions,
-  onSwipe,
-  threshold,
-  className,
-  children,
-}: SwipeStackProps) {
-  const cards = resolveCards(children);
-  const [dismissed, setDismissed] = useState<ReadonlySet<string>>(() => new Set());
-  const [exiting, setExiting] = useState<ResolvedCard | null>(null);
-  const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(
-    () => () => {
-      if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
-    },
-    [],
-  );
-
-  const available = cards.filter((c) => !dismissed.has(c.key));
-  const nextUp = available[0];
-  const current = exiting ?? nextUp ?? null;
-  const peek = exiting ? nextUp : available[1];
-
-  const liveDirections = DIRECTION_KEYS.filter((d) => directions[d]);
-
-  const { cardRef, wrapRef, handlers, touchAction, triggerCommit } = useSwipeStack({
-    directions: liveDirections,
-    threshold,
-    disabled: !!exiting || !nextUp,
-    onCommit(direction) {
-      const committed = current;
-      if (!committed) return;
-      setDismissed((prev) => new Set(prev).add(committed.key));
-      setExiting(committed);
-      if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
-      exitTimerRef.current = setTimeout(() => {
-        setExiting((prev) => (prev?.key === committed.key ? null : prev));
-      }, SWIPE_STACK_TRANSITION_MS);
-      onSwipe(direction, committed.key);
-    },
-  });
-
-  return (
-    <div className={[styles.wrap, className].filter(Boolean).join(' ')}>
-      <div className={styles.stack} role="region" aria-label={ariaLabel}>
-        {peek && (
-          <div className={styles.peek} key={peek.key} aria-hidden="true">
-            {peek.element}
-          </div>
-        )}
-        {current && (
-          <div className={styles.cardSlot} key={current.key} ref={wrapRef}>
-            {liveDirections.map((d) => {
-              const meta = directions[d];
-              if (!meta) return null;
-              return (
-                <div
-                  key={d}
-                  className={[styles.stamp, STAMP_CLASS[d]].join(' ')}
-                  aria-hidden="true"
-                >
-                  {meta.icon && <Icon name={meta.icon} size="sm" aria-hidden />}
-                  <span>{meta.label}</span>
-                </div>
-              );
-            })}
-            <div className={styles.card} ref={cardRef} style={{ touchAction }} {...handlers}>
-              {current.element}
-            </div>
-          </div>
-        )}
-      </div>
-      {liveDirections.length > 0 && (
-        <div className={styles.actions} role="group" aria-label={`${ariaLabel} actions`}>
-          {liveDirections.map((d) => {
-            const meta = directions[d];
-            if (!meta) return null;
-            return (
-              <Button
-                key={d}
-                variant="secondary"
-                size="sm"
-                disabled={!current}
-                onClick={() => triggerCommit(d)}
-              >
-                {meta.icon && <Icon name={meta.icon} size="sm" aria-hidden />}
-                {meta.label}
-              </Button>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/SwipeStack/SwipeStackCard.tsx

@@ -1,22 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface SwipeStackCardProps {
-  /** Stable identity for this card, independent of its position among
-   *  siblings — required. This is what SwipeStack reads (via child.props,
-   *  not React's own `key`, which a component can't see on itself) to know
-   *  which card is on top and what id to report through onSwipe. Reuse
-   *  whatever id the caller already keys their `.map()` on. */
-  cardId: string;
-  children: ReactNode;
-}
-
-/**
- * SwipeStackCard — a single card of a SwipeStack. Unlike
- * SwipableMobileCarouselSlide, this has no mount-window logic of its own:
- * SwipeStack only ever renders the top two cards' elements at all (there is
- * no scroll-position reason to keep every sibling in the DOM the way the
- * carousel's scroll-snap track does), so there is nothing here to gate.
- */
-export function SwipeStackCard({ children }: SwipeStackCardProps) {
-  return <>{children}</>;
-}

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

@@ -1,169 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, fireEvent, render } from '@testing-library/react';
-import { SwipeStack } from '../SwipeStack';
-import { SwipeStackCard } from '../SwipeStackCard';
-import { SWIPE_STACK_TRANSITION_MS } from '../../../hooks/useSwipeStack';
-
-// jsdom doesn't implement pointer capture — stub it as a no-op so
-// `e.currentTarget.setPointerCapture(...)` doesn't throw.
-beforeEach(() => {
-  if (!HTMLElement.prototype.setPointerCapture) {
-    HTMLElement.prototype.setPointerCapture = vi.fn();
-  }
-});
-
-afterEach(() => {
-  cleanup();
-  vi.restoreAllMocks();
-  vi.useRealTimers();
-});
-
-function pointer(x: number, y: number) {
-  return { clientX: x, clientY: y, pointerId: 1 };
-}
-
-function renderStack(onSwipe = vi.fn()) {
-  const utils = render(
-    <SwipeStack
-      aria-label="Today's agenda"
-      directions={{
-        up: { label: 'Done', icon: 'check' },
-        down: { label: 'Defer', icon: 'history' },
-      }}
-      onSwipe={onSwipe}
-    >
-      <SwipeStackCard cardId="a">Card A</SwipeStackCard>
-      <SwipeStackCard cardId="b">Card B</SwipeStackCard>
-      <SwipeStackCard cardId="c">Card C</SwipeStackCard>
-    </SwipeStack>,
-  );
-  return { ...utils, onSwipe };
-}
-
-describe('SwipeStack', () => {
-  it('renders the topmost card', () => {
-    const { getByText, queryByText } = renderStack();
-    expect(getByText('Card A')).toBeDefined();
-    expect(queryByText('Card C')).toBeNull();
-  });
-
-  it('labels the swipeable region', () => {
-    const { getByRole } = renderStack();
-    expect(getByRole('region', { name: "Today's agenda" })).toBeDefined();
-  });
-
-  it('only renders a fallback button for configured directions', () => {
-    const { getByRole, queryByRole } = renderStack();
-    expect(getByRole('button', { name: 'Done' })).toBeDefined();
-    expect(getByRole('button', { name: 'Defer' })).toBeDefined();
-    expect(queryByRole('button', { name: 'Skip' })).toBeNull();
-  });
-
-  it('calls onSwipe with the direction and cardId when a drag crosses threshold', () => {
-    const { getByText, onSwipe } = renderStack();
-    const card = getByText('Card A');
-    fireEvent.pointerDown(card, pointer(0, 0));
-    fireEvent.pointerMove(card, pointer(0, -200));
-    fireEvent.pointerUp(card, pointer(0, -200));
-    expect(onSwipe).toHaveBeenCalledWith('up', 'a');
-  });
-
-  it('does not call onSwipe when dragging toward a direction that is not configured', () => {
-    const { getByText, onSwipe } = renderStack();
-    const card = getByText('Card A');
-    fireEvent.pointerDown(card, pointer(0, 0));
-    fireEvent.pointerMove(card, pointer(200, 0));
-    fireEvent.pointerUp(card, pointer(200, 0));
-    expect(onSwipe).not.toHaveBeenCalled();
-  });
-
-  it('calls onSwipe when a fallback button is clicked, without any drag', () => {
-    const { getByRole, onSwipe } = renderStack();
-    fireEvent.click(getByRole('button', { name: 'Defer' }));
-    expect(onSwipe).toHaveBeenCalledWith('down', 'a');
-  });
-
-  it('advances to the next card only after the exit animation completes', () => {
-    vi.useFakeTimers();
-    const { getByRole, getByText, queryByText } = renderStack();
-    expect(getByText('Card A')).toBeDefined();
-
-    fireEvent.click(getByRole('button', { name: 'Done' }));
-    // Still mid-animation — the committed card stays put (so the fling-out
-    // it already started doesn't get cut off by a remount) and is still the
-    // one the fallback buttons act on; Card B is already visible as the
-    // peek behind it, but only decoratively (aria-hidden, not interactive).
-    expect(getByText('Card A')).toBeDefined();
-    const peekedB = getByText('Card B');
-    expect(peekedB.closest('[aria-hidden="true"]')).not.toBeNull();
-
-    act(() => {
-      vi.advanceTimersByTime(SWIPE_STACK_TRANSITION_MS);
-    });
-    expect(queryByText('Card A')).toBeNull();
-    expect(getByText('Card B').closest('[aria-hidden="true"]')).toBeNull();
-  });
-
-  it('never shows a dismissed card again, even if the caller still passes it as a child', () => {
-    vi.useFakeTimers();
-    const onSwipe = vi.fn();
-    const directions = { up: { label: 'Done', icon: 'check' as const } };
-    const { getByRole, getByText, queryByText, rerender } = render(
-      <SwipeStack aria-label="Today's agenda" directions={directions} onSwipe={onSwipe}>
-        <SwipeStackCard cardId="a">Card A</SwipeStackCard>
-        <SwipeStackCard cardId="b">Card B</SwipeStackCard>
-      </SwipeStack>,
-    );
-    fireEvent.click(getByRole('button', { name: 'Done' }));
-    act(() => {
-      vi.advanceTimersByTime(SWIPE_STACK_TRANSITION_MS);
-    });
-    expect(getByText('Card B')).toBeDefined();
-
-    // Re-render with the exact same children — a caller slow to remove the
-    // dismissed card from its own data. SwipeStack must not show it again.
-    rerender(
-      <SwipeStack aria-label="Today's agenda" directions={directions} onSwipe={onSwipe}>
-        <SwipeStackCard cardId="a">Card A</SwipeStackCard>
-        <SwipeStackCard cardId="b">Card B</SwipeStackCard>
-      </SwipeStack>,
-    );
-    expect(queryByText('Card A')).toBeNull();
-    expect(getByText('Card B')).toBeDefined();
-  });
-});
-
-describe('SwipeStack dev-mode child-type guard', () => {
-  function renderWithStrayChild() {
-    return render(
-      <SwipeStack aria-label="Today's agenda" directions={{}} onSwipe={() => {}}>
-        <SwipeStackCard cardId="a">Card A</SwipeStackCard>
-        {/* stray non-SwipeStackCard child */}
-        <div>oops</div>
-      </SwipeStack>,
-    );
-  }
-
-  it('warns via console.error in development, mentioning the offending child', () => {
-    const originalEnv = process.env.NODE_ENV;
-    vi.stubEnv('NODE_ENV', 'development');
-    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-
-    expect(() => renderWithStrayChild()).not.toThrow();
-
-    expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining('<div>'));
-    vi.stubEnv('NODE_ENV', originalEnv ?? 'test');
-  });
-
-  it('does not call console.error in production', () => {
-    const originalEnv = process.env.NODE_ENV;
-    vi.stubEnv('NODE_ENV', 'production');
-    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-
-    expect(() => renderWithStrayChild()).not.toThrow();
-
-    expect(errorSpy).not.toHaveBeenCalled();
-    vi.stubEnv('NODE_ENV', originalEnv ?? 'test');
-  });
-});

package/src/components/SystemBanner/SystemBanner.module.css

@@ -1,79 +0,0 @@
-.banner {
-  position: sticky;
-  top: 0;
-  /* Sits above sidebar rail (z-index ~10) but below dialogs/overlays (z-index 100) */
-  z-index: 50;
-  /* WebKit momentum-scroll re-tiling quirk: a position: sticky element with
-     no compositing layer of its own can go stale/blank for a stretch of
-     frames during a fast scroll on iOS Safari instead of repainting at its
-     stuck position. translateZ(0) promotes it to its own layer, rasterized
-     independently of the scroller's tile grid. See
-     docs/architecture-rules.md — found and fixed across three sticky
-     elements in sovereign-tasks, applied here proactively since this
-     component is exactly the same pattern (sticky, inside scrolling
-     content). */
-  transform: translateZ(0);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sv-space-3);
-  padding: var(--sv-space-2) var(--sv-space-4);
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1.4;
-}
-
-.content {
-  flex: 1;
-  text-align: center;
-}
-
-/* Dismiss button — inherits the variant text colour */
-.dismiss {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  border-radius: var(--sv-radius-sm);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  opacity: 0.7;
-  transition: opacity 0.12s ease;
-}
-
-@media (hover: hover) {
-  .dismiss:hover {
-    opacity: 1;
-  }
-}
-
-.dismiss:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 1px;
-}
-
-/* Variants */
-.info {
-  background: var(--sv-color-info-surface);
-  color: var(--sv-color-info-text);
-  border-bottom-color: var(--sv-color-info-border);
-}
-
-.warning {
-  background: var(--sv-color-warning-surface);
-  color: var(--sv-color-warning-text);
-  border-bottom-color: var(--sv-color-warning-border);
-}
-
-.error {
-  background: var(--sv-color-error-surface);
-  color: var(--sv-color-error-text);
-  border-bottom-color: var(--sv-color-error-border);
-}

package/src/components/SystemBanner/SystemBanner.stories.tsx

@@ -1,86 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SystemBanner } from './SystemBanner';
-
-const meta = {
-  title: 'Components/SystemBanner',
-  component: SystemBanner,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Full-width `position: sticky` strip for platform-level notices. Stack multiple banners by rendering multiple `<SystemBanner>` elements. Dismiss button only appears when `onDismiss` is provided.',
-      },
-    },
-  },
-  argTypes: {
-    variant: { control: 'select', options: ['info', 'warning', 'error'] },
-  },
-  args: {
-    children: 'Notice',
-  },
-} satisfies Meta<typeof SystemBanner>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Info: Story = {
-  args: {
-    variant: 'info',
-    children: 'Platform is in read-only mode during migration.',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    variant: 'warning',
-    children: 'License for Example: Monetized expires in 7 days.',
-  },
-};
-
-export const Error: Story = {
-  args: {
-    variant: 'error',
-    children: 'Maintenance mode is active — only admins can sign in.',
-  },
-};
-
-export const Dismissible: Story = {
-  render: (_args) => {
-    const [visible, setVisible] = useState(true);
-    return visible ? (
-      <SystemBanner variant="warning" onDismiss={() => setVisible(false)}>
-        License for Example: Monetized expires in 7 days.
-      </SystemBanner>
-    ) : (
-      <div
-        style={{
-          padding: 16,
-          fontFamily: 'var(--sv-font-family)',
-          fontSize: 'var(--sv-font-size-sm)',
-          color: 'var(--sv-color-text-muted)',
-        }}
-      >
-        Banner dismissed.
-      </div>
-    );
-  },
-};
-
-/** All three variants stacked — as they appear when multiple notices are active. */
-export const Stacked: Story = {
-  render: (_args) => (
-    <div>
-      <SystemBanner variant="error">
-        Maintenance mode is active — only admins can sign in.
-      </SystemBanner>
-      <SystemBanner variant="warning">
-        License for Example: Monetized expires in 7 days.
-      </SystemBanner>
-      <SystemBanner variant="info">Platform is in read-only mode during migration.</SystemBanner>
-    </div>
-  ),
-};