@sovereignfs/ui 0.83.1 → 0.89.1

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

@@ -1,324 +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' | 'auto' | 'fixed';
-  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` / `auto` / `fixed`. `sm`/`md` are fixed-width, content-driven height; `auto` is content-driven on both width and height; `lg` is a true fixed 100%/100% box; `fixed` is also a true fixed box (width and height both set, content never resizes it) but capped at 64rem×44rem rather than filling the viewport. Mobile always renders as a full-screen sheet. Three composition shapes via the optional `header`/`footer` props: Body only (both omitted, the default), Header + Body, Header + Body + Footer — see the stories below the size examples.',
-      },
-    },
-  },
-} 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" />,
-};
-
-/**
- * `fixed` is a true fixed box like `lg` (width AND height both set — content
- * never resizes it) but capped at 64rem×44rem rather than filling the
- * viewport. Added for epic task 14.5 (Account's vertical nav): a plugin
- * whose route tree includes a client-side redirect through a near-empty
- * intermediate page needs a size that won't visibly shrink to fit that empty
- * page and then grow once real content lands — every other size is
- * content-driven on at least one axis and would do exactly that.
- */
-export const Fixed: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => <DialogDemo size="fixed" label="Fixed dialog" />,
-};
-
-/**
- * `auto` sizes to content on both width and height, unlike `sm`/`md` (fixed
- * width, content-driven height only) — capped, not fixed, on either axis.
- * This demo's own content is deliberately narrower than `md`'s 36rem, so the
- * panel visibly shrinks below it — a fixed-width size can't do that.
- */
-export const AutoSize: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => {
-    function Demo() {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button onClick={() => setOpen(true)}>Open auto-sized dialog</Button>
-          <Dialog open={open} onClose={() => setOpen(false)} size="auto" aria-label="Delete item?">
-            <div style={{ padding: 24, fontFamily: 'system-ui', maxWidth: '18rem' }}>
-              <h2
-                style={{
-                  fontSize: 18,
-                  fontWeight: 600,
-                  color: 'var(--sv-color-text-primary)',
-                  marginBottom: 12,
-                }}
-              >
-                Delete item?
-              </h2>
-              <p style={{ color: 'var(--sv-color-text-muted)', marginBottom: 24 }}>
-                This panel is narrower than `md`'s fixed 36rem — `auto` shrank to fit this short
-                message instead of padding out a fixed width.
-              </p>
-              <Button variant="secondary" onClick={() => setOpen(false)}>
-                Close
-              </Button>
-            </div>
-          </Dialog>
-        </>
-      );
-    }
-    return <Demo />;
-  },
-};
-
-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 />;
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Composition shapes (header/footer props) — Body only is every story above
-// this point (both props omitted); these three demonstrate the other two.
-
-/**
- * "Body only" — the default shape (both `header` and `footer` omitted).
- * Included explicitly alongside the size stories above as the baseline the
- * other two composition shapes are compared against: no visible header on
- * desktop, a floating close button instead, and any actions live inside the
- * scrollable body.
- */
-export const BodyOnly: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => {
-    function Demo() {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button onClick={() => setOpen(true)}>Open body-only dialog</Button>
-          <Dialog open={open} onClose={() => setOpen(false)} size="sm" aria-label="Body only">
-            <div style={{ padding: 24, fontFamily: 'system-ui' }}>
-              <p style={{ color: 'var(--sv-color-text-muted)' }}>
-                No `header` or `footer` prop — today's default. Desktop shows only the floating
-                close button; actions (if any) live in this scrolling body, same as before this
-                task.
-              </p>
-            </div>
-          </Dialog>
-        </>
-      );
-    }
-    return <Demo />;
-  },
-};
-
-/**
- * "Header + Body" — the `header` prop renders a persistent title/close row
- * on both desktop and mobile (unlike the plain `title` prop, which is
- * mobile-only). Resize the viewport to confirm the header stays visible and
- * identically styled at both widths.
- */
-export const HeaderAndBody: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => {
-    function Demo() {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button onClick={() => setOpen(true)}>Open header + body dialog</Button>
-          <Dialog
-            open={open}
-            onClose={() => setOpen(false)}
-            size="sm"
-            header="Card detail"
-            aria-label="Card detail"
-          >
-            <div style={{ padding: 24, fontFamily: 'system-ui' }}>
-              <p style={{ color: 'var(--sv-color-text-muted)' }}>
-                The "Card detail" title above is the `header` prop, rendered via the same shared
-                header row on both desktop and mobile — resize the viewport to confirm it doesn't
-                disappear on desktop the way a plain `title` would.
-              </p>
-            </div>
-          </Dialog>
-        </>
-      );
-    }
-    return <Demo />;
-  },
-};
-
-/**
- * "Header + Body + Footer" — both `header` and `footer` are pinned flex
- * siblings around `.content`; only the body between them scrolls. The body
- * here is long enough to actually scroll, so header/footer staying put is
- * visible, not just theoretical — check this at both a desktop and a
- * ≤768px viewport per this task's own review checklist.
- */
-export const HeaderBodyFooter: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => {
-    function Demo() {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button onClick={() => setOpen(true)}>Open header + body + footer dialog</Button>
-          <Dialog
-            open={open}
-            onClose={() => setOpen(false)}
-            size="sm"
-            header="Edit card"
-            footer={
-              <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end' }}>
-                <Button variant="secondary" onClick={() => setOpen(false)}>
-                  Cancel
-                </Button>
-                <Button onClick={() => setOpen(false)}>Save</Button>
-              </div>
-            }
-            aria-label="Edit card"
-          >
-            <div style={{ padding: 24, fontFamily: 'system-ui', display: 'grid', gap: 16 }}>
-              <p style={{ color: 'var(--sv-color-text-muted)' }}>
-                Scroll this body — the "Edit card" header above and the Cancel/Save footer below
-                both stay pinned; only this region between them moves.
-              </p>
-              {Array.from({ length: 12 }, (_, i) => (
-                <p key={i} style={{ color: 'var(--sv-color-text-muted)' }}>
-                  Field {i + 1} of 12 — filler content long enough to force `.content` to actually
-                  scroll, so the pinned header/footer behavior is visible rather than theoretical.
-                </p>
-              ))}
-            </div>
-          </Dialog>
-        </>
-      );
-    }
-    return <Demo />;
-  },
-};

package/src/components/Dialog/Dialog.tsx

@@ -1,254 +0,0 @@
-'use client';
-
-import { createContext, type ReactNode, useContext, useEffect, useRef, useState } from 'react';
-import { useMountTransition, usePrefersReducedMotion } from '../../motion';
-import {
-  OVERLAY_MOTION_DURATION_MS,
-  useOverlayFocusCapture,
-  useOverlayKeyboardTrap,
-  useOverlayScrollLock,
-} from '../../overlay-shell';
-import { Icon } from '../Icon/Icon';
-import { OverlayHeader } from '../OverlayHeader/OverlayHeader';
-import styles from './Dialog.module.css';
-
-// undefined (the default, outside any Provider) means "no Dialog ancestor" —
-// distinct from a real setter function, so useOverlaySecondRow can silently
-// no-op when called outside a Dialog instead of throwing.
-const OverlaySecondRowContext = createContext<((node: ReactNode | null) => void) | undefined>(
-  undefined,
-);
-
-/**
- * Lets content deep inside a `Dialog` (e.g. a plugin's own route layout,
- * rendered several levels below wherever the `Dialog` itself is
- * instantiated) supply the second-row content of the Dialog's `OverlayHeader`
- * — typically a tab strip. Solves the "double header" problem: without this,
- * a plugin's own tab strip has no way to reach the Dialog's header and ends
- * up rendered a second time, as its own sticky bar, inside the scrolling
- * content area. Reaches the header regardless of whether it's showing via
- * the `header` prop (both breakpoints) or the default `title`-driven mobile
- * bar (mobile only) — see `DialogProps.header`'s own doc comment.
- *
- * A no-op when there is no enclosing `Dialog` (e.g. the same plugin layout
- * also rendered on a plain, non-overlay route) — safe to call unconditionally.
- * Returns whether an enclosing `Dialog` actually received the content, so a
- * caller that also renders its own inline header/tab-strip copy for the
- * no-Dialog case can hide that copy on mobile specifically when this
- * returned `true` (the Dialog's own header is showing it instead there).
- *
- * ```tsx
- * function AccountLayout({ children }) {
- *   const insideOverlay = useOverlaySecondRow(<nav>...tab strip...</nav>);
- *   return <div>{children}</div>;
- * }
- * ```
- */
-export function useOverlaySecondRow(node: ReactNode | null): boolean {
-  const setSecondRow = useContext(OverlaySecondRowContext);
-  useEffect(() => {
-    if (!setSecondRow) return;
-    setSecondRow(node);
-    return () => setSecondRow(null);
-  }, [setSecondRow, node]);
-  return setSecondRow !== undefined;
-}
-
-// BREAKING (packages/ui minor bump + docs/upgrade.md migration note): `xl`
-// and `full` were removed here — `full` was a dead alias of `lg` (identical
-// CSS), and `xl` was a fixed-width variant with no distinct behavior `auto`
-// doesn't now cover better. `auto` sizes to content on BOTH width and
-// height, capped rather than fixed on either axis — for content whose
-// natural size varies a lot (a card detail modal with an optional
-// checklist/comments section) rather than reliably filling a fixed width.
-// `lg` is a true fixed 100%/100% box — the panel holds still regardless of
-// content, at the cost of always filling the viewport.
-//
-// `fixed` (added for epic task 14.5, Account's vertical nav): a true fixed
-// box like `lg` — width AND height set, content never resizes it — but
-// capped rather than filling the viewport. Named distinctly from the
-// component's own always-applied `.panel` CSS class (Dialog.module.css),
-// not from `lg`'s own fixed-ness. For a plugin that needs a stable
-// footprint (e.g. one whose route tree includes a client-side redirect
-// through a near-empty intermediate page — `auto`/`sm`/`md`'s
-// content-driven sizing would visibly shrink to fit that empty page, then
-// grow once the real content lands) without reading as heavy as `lg`'s
-// full-screen box for what is a compact settings surface.
-export type DialogSize = 'sm' | 'md' | 'lg' | 'auto' | 'fixed';
-
-export interface DialogProps {
-  /** Whether the dialog is shown. When false, nothing renders. */
-  open: boolean;
-  /** Called on Esc, scrim click, or the close button. */
-  onClose: () => void;
-  /** Panel size on desktop. Mobile always renders as a full-screen sheet. */
-  size?: DialogSize;
-  /** Accessible name for the dialog (sets `aria-label` on the panel). Falls
-   *  back to `title` when omitted — this still applies even when `header` is
-   *  used instead of `title` for the visible header (see `header`'s own doc
-   *  comment), so pass `aria-label` explicitly in that case if `title` is
-   *  also omitted. */
-  'aria-label'?: string;
-  /** Shown in the top bar alongside the close button, on mobile only —
-   *  desktop has no header row by default (see `header` for that). Ignored
-   *  as visible content when `header` is provided; still used as the
-   *  `aria-label` fallback either way. */
-  title?: string;
-  /** Renders a persistent header row (via the same `OverlayHeader` component
-   *  `title` alone only shows on mobile) on **both** desktop and mobile —
-   *  the "Header + Body" / "Header + Body + Footer" shapes. Supersedes
-   *  `title` for visible content when provided; `title` remains the
-   *  `aria-label` fallback if `aria-label` is also omitted. Omitting both
-   *  `header` and `footer` is "Body only" — today's default, unchanged. */
-  header?: ReactNode;
-  /** Renders a persistent footer row below the scrollable body — pinned on
-   *  both desktop and mobile the same way `header`/the mobile title bar are
-   *  (a non-scrolling flex sibling, not `position: sticky`): only the region
-   *  between header and footer scrolls. Typically action buttons (Save/
-   *  Cancel). Omit for no footer — today's default, where any actions live
-   *  inside `children` and scroll with the rest of the body. Layout-agnostic
-   *  (no built-in button alignment) — arrange the footer's own content as
-   *  needed, same as `children`. */
-  footer?: ReactNode;
-  /** Forwarded to the active `OverlayHeader` instance's own `rowClassName`
-   *  (whichever is showing — `header` or the mobile `title` bar) — restyle
-   *  the title row (e.g. tighter padding to match a consumer's own compact
-   *  header elsewhere) without changing its title/close layout. */
-  rowClassName?: string;
-  /** Forwarded to the active `OverlayHeader` instance's own `titleClassName`
-   *  — restyle the title text (e.g. a smaller font size to match a
-   *  consumer's own compact header elsewhere). */
-  titleClassName?: string;
-  children: ReactNode;
-}
-
-/**
- * Dialog — a modal surface (scrim + panel) for overlay-shell plugins and any
- * plugin that needs a dismissable layer. Router-agnostic: the caller decides
- * what `onClose` does (the runtime's `@modal` slot wires it to `router.back()`).
- *
- * Behaviour: Esc and scrim-click dismiss; focus moves into the panel on open and
- * is restored to the previously-focused element on close; Tab is trapped within
- * the panel. Styling references `--sv-*` tokens only; on mobile the panel becomes
- * a full-screen sheet regardless of `size`.
- *
- * Animated open/close: fade + scale on desktop, slide-up on mobile (matching
- * the "feels like a page push" framing of the mobile sheet). The `open`/
- * `onClose` API is unchanged — closing still stays mounted internally for the
- * exit transition before actually unmounting; `prefers-reduced-motion: reduce`
- * collapses both to near-instant.
- *
- * Three composition shapes, chosen by which of `header`/`footer` are passed:
- * Body only (both omitted — today's default), Header + Body (`header` only),
- * Header + Body + Footer (`header` and `footer`). Whichever of header/footer
- * are present render as non-scrolling flex siblings around `.content`, which
- * stays the only scrollable region in every shape.
- */
-export function Dialog({
-  open,
-  onClose,
-  size = 'lg',
-  'aria-label': ariaLabel,
-  title,
-  header,
-  footer,
-  rowClassName,
-  titleClassName,
-  children,
-}: DialogProps) {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const reducedMotion = usePrefersReducedMotion();
-  const { mounted, phase } = useMountTransition(
-    open,
-    reducedMotion ? 0 : OVERLAY_MOTION_DURATION_MS,
-  );
-  const [secondRow, setSecondRow] = useState<ReactNode | null>(null);
-
-  useOverlayScrollLock(mounted);
-  useOverlayFocusCapture(panelRef, open);
-  useOverlayKeyboardTrap(panelRef, open, onClose);
-
-  if (!mounted) return null;
-  const isOpenPhase = phase === 'open';
-
-  return (
-    // role="presentation" removes the scrim from the AT (it is purely visual).
-    // e.target check lets clicks inside the panel bubble without triggering dismiss.
-    // No onKeyDown here — useOverlayKeyboardTrap above already owns Escape via a
-    // document-level listener; a second handler here used to double-fire onClose
-    // per keypress (the keydown bubbles through this element on its way to
-    // document), which is exactly the kind of bug that turns a single Escape
-    // press into two router.back() calls for @modal-driven consumers.
-    <div
-      className={[styles.scrim, isOpenPhase ? styles.scrimOpen : ''].filter(Boolean).join(' ')}
-      role="presentation"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label={ariaLabel ?? title}
-        tabIndex={-1}
-        className={[styles.panel, styles[size], isOpenPhase ? styles.panelOpen : '']
-          .filter(Boolean)
-          .join(' ')}
-      >
-        {header ? (
-          /* header supersedes the mobile-only title bar below — OverlayHeader
-             itself has no internal breakpoint gating (see its own module
-             CSS), so rendering it with no Dialog-level display-toggling
-             className, as here, is what makes it show on both desktop and
-             mobile. It carries its own close button, so the separate
-             desktop-only .close button below is skipped entirely in this
-             branch — never render both at once. */
-          <OverlayHeader
-            title={header}
-            onClose={onClose}
-            secondRow={secondRow}
-            rowClassName={rowClassName}
-            titleClassName={titleClassName}
-          />
-        ) : (
-          <>
-            {/* Mobile: shared OverlayHeader (title + close in one row, hidden
-                on desktop via CSS — see .mobileHeader). secondRow is
-                populated by a descendant's useOverlaySecondRow call, e.g. a
-                plugin's own tab strip — see that hook's doc comment for why. */}
-            <OverlayHeader
-              title={title}
-              onClose={onClose}
-              secondRow={secondRow}
-              className={styles.mobileHeader}
-              rowClassName={rowClassName}
-              titleClassName={titleClassName}
-            />
-            {/* Desktop: absolute close button (hidden on mobile via CSS).
-                Plain `x`, matching the mobile OverlayHeader's own close icon
-                above it (OverlayHeader.tsx) — a single consistent close
-                affordance across breakpoints instead of desktop's own
-                separate `circle-x` glyph (the previous choice here).
-                Platform-wide: every `Dialog` consumer without a `header`
-                gets this, not just the one it was requested against —
-                `Dialog` has no per-instance override for its own close
-                button. */}
-            <button type="button" className={styles.close} aria-label="Close" onClick={onClose}>
-              <Icon name="x" size="md" aria-hidden={true} />
-            </button>
-          </>
-        )}
-        {/* The panel is a fixed-size box; only this region scrolls, so the
-            panel never resizes with its content and the header/close button
-            and footer (if present) stay pinned. */}
-        <div className={styles.content}>
-          <OverlaySecondRowContext.Provider value={setSecondRow}>
-            {children}
-          </OverlaySecondRowContext.Provider>
-        </div>
-        {footer && <div className={styles.footer}>{footer}</div>}
-      </div>
-    </div>
-  );
-}