@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/DeviceOnlyGate/DeviceOnlyGate.tsx

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

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

@@ -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,335 +0,0 @@
-/* Dialog — scrim + centered panel. Tokens only (z-index is structural, not a
- * theming value, so it has no token).
- *
- * `sm`/`md` are a fixed WIDTH but a content-driven height, capped at a
- * per-size max-height: the panel grows to fit its content and shrinks when
- * content is sparse, only hitting the cap (and scrolling internally, inside
- * `.content`) once content actually exceeds it. Before this, height was
- * fixed too, which left short-content consumers (e.g. a two-field form in
- * console/plugins/PluginAccessDialog.tsx) looking like a near-empty
- * skeleton — see docs/architecture-rules.md. `auto` goes further — content-
- * driven on BOTH width and height, each independently capped rather than
- * either being fixed — for content whose natural footprint varies enough
- * (a card detail modal with an optional checklist/comments section) that a
- * single fixed width doesn't fit it well either short or long. `lg` is a
- * true fixed box (100%/100% of the scrim's available area) — no current
- * overlay-shell plugin renders into it (Console did until workstream 0022
- * moved it to `shell: "default"`; Account never resized off `overlaySize:
- * "lg"`'s original default until epic task 14.5, see `fixed` below).
- * `fixed` (named after its own behavior, not after this file's always-
- * applied `.panel` wrapper class below) is also a true fixed box, width
- * AND height both set — same "content never resizes it" guarantee as `lg`
- * — but capped rather than filling the viewport, for a plugin whose
- * settings-panel-shaped content doesn't warrant `lg`'s full-screen footprint
- * (Account's own case, epic task 14.5 round 3). The close button stays
- * pinned top-right regardless. The scrim's padding is the fixed margin
- * `lg`/`fixed` leave around the viewport; `sm`/`md`/`auto` are centered and
- * cap to that available space on short screens too. 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: var(--sv-border-width-hairline) 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;
-  /* Same slim, token-colored scrollbar as `ScrollArea`/`MessageScroller` —
-     without this, a `sm`/`md` dialog whose content exceeds its max-height
-     cap (e.g. on a short viewport where the cap itself shrinks to fit) gets
-     the browser's default OS scrollbar, which on non-overlay-scrollbar
-     platforms is wide enough to visually cut into `.panel`'s rounded
-     corner right where `.content` starts, reading as a layout bug rather
-     than an intentional scroll affordance. */
-  scrollbar-width: thin;
-  scrollbar-color: var(--sv-color-border-strong) transparent;
-  padding: var(--sv-space-6);
-  /* This region already supplies the page gutter, so a PageContainer rendered
-     inside it stands its own down (see PageContainer.module.css). Without
-     this, an overlay plugin — one page tree rendered into both the Dialog and
-     the full-page shell fallback — would be padded twice here. */
-  --sv-page-gutter: 0px;
-  /* 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;
-}
-
-.content::-webkit-scrollbar {
-  width: 8px;
-}
-
-.content::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.content::-webkit-scrollbar-thumb {
-  background: var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-full);
-}
-
-/* `sm`/`md`: fixed width, content-driven height up to the size's own cap
- * (28rem/42rem — the box's old fixed heights, now a ceiling rather than a
- * floor). `min(<cap>, 100%)` also still caps to the scrim's content box
- * (viewport minus margin) so a size never overflows a short viewport. No
- * explicit `height` — the panel's flex column sizes to `.content`'s natural
- * height on its own; see the file-level comment above. */
-.sm {
-  width: 24rem;
-  max-width: 100%;
-  max-height: min(28rem, 100%);
-}
-
-.md {
-  width: 36rem;
-  max-width: 100%;
-  max-height: min(42rem, 100%);
-}
-
-/* Content-driven on both axes, unlike `sm`/`md` (width fixed, only height
- * content-driven) — for a dialog whose natural footprint varies a lot (a
- * card detail modal with labels/due-date/assignees/description/checklist/
- * comments, the case that originally motivated the now-removed `xl` size
- * this replaces). `width: fit-content` shrink-wraps to the panel's own
- * content (bounded by min/max-width below) the same way a flex item
- * centered in `.scrim` naturally would with no explicit `width` at all —
- * `min-width` just keeps sparse content (e.g. a short message) from reading
- * as an oddly narrow sliver. Caps chosen to span roughly what `sm`/`xl`
- * used to cover between them. */
-.auto {
-  width: fit-content;
-  min-width: min(24rem, 100%);
-  max-width: min(48rem, 100%);
-  max-height: min(48rem, 100%);
-}
-
-/* `lg`: a true fixed box, unaffected by the above — see the file-level
- * comment. */
-.lg {
-  width: 100%;
-  height: 100%;
-}
-
-/* `fixed`: also a true fixed box (width AND height both set, like `lg`) but
- * capped rather than filling the viewport — see the file-level comment.
- * Named distinctly from the dialog's own always-applied `.panel` wrapper
- * class above (every size gets `styles.panel` + `styles[size]` together —
- * see Dialog.tsx) to avoid colliding with it. `max-width`/`max-height` are
- * still needed despite `width`/`height` being fixed rem values, exactly
- * like `sm`/`md`'s own `max-width: 100%` — a short or narrow viewport (a
- * resized desktop window, not yet at the mobile breakpoint) must still be
- * able to shrink this below its rem values instead of overflowing the
- * scrim. */
-.fixed {
-  width: 64rem;
-  max-width: 100%;
-  height: 44rem;
-  max-height: 100%;
-}
-
-.close {
-  position: absolute;
-  top: var(--sv-space-3);
-  right: var(--sv-space-3);
-  /* 2, not 1: a plugin's own sticky in-body header (e.g. a card detail
-     modal's title row) needs to paint above ordinary scrolling content, so
-     it sits at z-index: 1 — if `.close` also sat at 1, tree order would
-     decide the tie, and `.close` (rendered earlier in this component's own
-     JSX, before `.content` and everything a plugin nests inside it) would
-     lose to the plugin's later-in-tree header, disappearing underneath it
-     once they overlap on scroll. 2 keeps `.close` unambiguously on top
-     without relying on a tie-break plugin authors have no visibility into.
-     Found live in `sovereign-plugin-kanban`'s card detail modal — see that
-     repo's `kanban.module.css` `.cardHeader` comment for the matching half
-     of this fix and the Popover-stacking bug that motivated it. */
-  z-index: 2;
-  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);
-  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. Not used at all when the `header`
- * prop is active — that OverlayHeader instance renders with no wrapper
- * class, so it shows unconditionally on both breakpoints (see Dialog.tsx). */
-.mobileHeader {
-  display: none;
-}
-
-/* The optional `footer` prop's row — shown on both desktop and mobile (no
- * breakpoint gating, unlike `.mobileHeader`), a flex sibling after `.content`
- * so it never scrolls, mirroring OverlayHeader's own `.header`/`.row`
- * treatment (border on the opposite edge, same padding scale) so header and
- * footer read as a matched pair when both are present. Layout-agnostic
- * beyond that — the footer's own content decides its internal arrangement
- * (e.g. a flex row with `justify-content: flex-end` for action buttons). */
-.footer {
-  flex-shrink: 0;
-  background: var(--sv-color-surface);
-  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  padding: var(--sv-space-3) var(--sv-space-4);
-}
-
-/* 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,
-  .auto,
-  .fixed {
-    width: 100%;
-    height: 100%;
-    min-width: 0;
-    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;
-  }
-}