@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/MobileAppsDrawer/MobileAppsDrawer.module.css

@@ -1,82 +0,0 @@
-/* Matches the runtime shell's own Apps drawer grid exactly
-   (runtime/app/(platform)/_components/MobileNav.module.css's .drawerGrid/
-   .drawerGridItem/.drawerGridIcon/.drawerGridName) — this component is
-   meant to replace that hand-rolled markup for any consumer building its
-   own Apps-style launcher. No header row — see the component's own doc
-   comment for why. */
-
-.grid {
-  list-style: none;
-  margin: 0;
-  /* Matches the reference `.drawerGrid`'s own padding exactly — its
-     surrounding `Drawer` also has no header row (no `title` passed either),
-     so "no header row" can't actually explain padding this component used
-     to carry well past the reference's own (`--sv-space-1`/`--sv-space-10`
-     vs the reference's `--sv-space-2`/`--sv-space-6`) — found live, this
-     component's grid visibly read as more tightly hugging the handle and
-     noticeably more padded at the bottom than the reference's side by side.
-     Drawer's own panel already adds env(safe-area-inset-bottom) below
-     everything, so this is on top of that, not instead of it. */
-  padding: var(--sv-space-2) var(--sv-space-4) var(--sv-space-6);
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  row-gap: var(--sv-space-5);
-}
-
-.gridItem {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sv-space-2);
-  padding: var(--sv-space-1);
-  border: none;
-  background: none;
-  text-decoration: none;
-  color: var(--sv-color-text-primary);
-  font: inherit;
-  cursor: pointer;
-  width: 100%;
-}
-
-@media (hover: hover) {
-  .gridItem:hover .gridIcon {
-    background: var(--sv-color-border);
-  }
-}
-
-.gridItem:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-  border-radius: var(--sv-radius-md);
-}
-
-/* color: text-primary, not text-muted — the reference's own drawerGridIcon
-   uses text-muted only as its monogram-fallback text color for <img>-less
-   plugin icons (raster <img> icons don't inherit CSS color at all, so that
-   value never actually painted a real icon). Every tile here renders a real
-   stroke icon via the Icon component (currentColor), which does inherit —
-   matching the reference's own explicit override for that exact case
-   (.drawerGridIconSettings, used by its Console tile) rather than the
-   fallback default. */
-.gridIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 56px;
-  border-radius: 14px;
-  background: var(--sv-color-surface-sunken);
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-  transition: background 0.1s;
-}
-
-.gridName {
-  font-size: var(--sv-font-size-sm);
-  text-align: center;
-  color: var(--sv-color-text-primary);
-  line-height: 1.3;
-  word-break: break-word;
-  max-width: 80px;
-}

package/src/components/MobileAppsDrawer/MobileAppsDrawer.tsx

@@ -1,78 +0,0 @@
-import type { ReactNode } from 'react';
-import { Drawer } from '../Drawer/Drawer';
-import styles from './MobileAppsDrawer.module.css';
-
-export interface MobileAppsDrawerItem {
-  /** Stable identity for this tile — used as the React key. */
-  key: string;
-  icon: ReactNode;
-  label: string;
-  /** Renders an `<a>` when set; otherwise a `<button>` calling `onClick`. */
-  href?: string;
-  onClick?: () => void;
-}
-
-export interface MobileAppsDrawerProps {
-  open: boolean;
-  onClose: () => void;
-  /** Accessible name for the drawer panel — required since there's no
-   *  visible title to fall back to (Drawer's grab handle plus swipe-down /
-   *  scrim-tap already cover dismissal, so no header row is rendered). */
-  'aria-label': string;
-  /** The grid tiles — supplied by the consumer (e.g. installed plugins,
-   *  a plugin's own sections). MobileAppsDrawer owns only the drawer
-   *  chrome/grid layout, never the item list itself. */
-  items: MobileAppsDrawerItem[];
-}
-
-function DrawerGridTile({ icon, label, href, onClick }: Omit<MobileAppsDrawerItem, 'key'>) {
-  const content = (
-    <>
-      <span className={styles.gridIcon} aria-hidden="true">
-        {icon}
-      </span>
-      <span className={styles.gridName}>{label}</span>
-    </>
-  );
-  if (href) {
-    return (
-      <a href={href} className={styles.gridItem} onClick={onClick}>
-        {content}
-      </a>
-    );
-  }
-  return (
-    <button type="button" className={styles.gridItem} onClick={onClick}>
-      {content}
-    </button>
-  );
-}
-
-/**
- * The mobile "Apps" drawer: a bottom sheet with a 3-column grid of icon
- * tiles — same tile size (56px, radius 14px) and grid layout as the runtime
- * shell's own Apps drawer (MobileNav's Drawer content), generalized so the
- * tile list comes from the consumer (the shell passes installed plugins; a
- * plugin composing its own MobileFooter launcher passes whatever its own
- * "apps" are, e.g. a section index) rather than being hardcoded to plugins
- * specifically. No header row (title/close button) — Drawer's own grab
- * handle plus swipe-down/scrim-tap dismissal are enough, and a header ate
- * into the limited vertical space a launcher grid needs most.
- */
-export function MobileAppsDrawer({ open, onClose, items, ...rest }: MobileAppsDrawerProps) {
-  const ariaLabel = rest['aria-label'];
-
-  return (
-    <Drawer open={open} onClose={onClose} aria-label={ariaLabel}>
-      <nav aria-label={ariaLabel}>
-        <ul className={styles.grid}>
-          {items.map(({ key, ...item }) => (
-            <li key={key}>
-              <DrawerGridTile key={key} {...item} />
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </Drawer>
-  );
-}

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

@@ -1,80 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { MobileAppsDrawer } from '../MobileAppsDrawer';
-
-// Drawer's exit animation reads prefers-reduced-motion via matchMedia, which
-// jsdom does not implement — see Drawer's own test for the full rationale.
-function installMatchMedia() {
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockImplementation((query: string) => ({
-      matches: false,
-      media: query,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  );
-}
-
-function installPointerCapture() {
-  if (!Element.prototype.setPointerCapture) {
-    Element.prototype.setPointerCapture = () => {};
-  }
-  if (!Element.prototype.releasePointerCapture) {
-    Element.prototype.releasePointerCapture = () => {};
-  }
-}
-
-const items = [
-  { key: 'home', icon: <span>icon</span>, label: 'Home', href: '/home' },
-  { key: 'notes', icon: <span>icon</span>, label: 'Notes', onClick: vi.fn() },
-];
-
-describe('MobileAppsDrawer', () => {
-  beforeEach(() => {
-    installMatchMedia();
-    installPointerCapture();
-  });
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('renders nothing when closed', () => {
-    render(
-      <MobileAppsDrawer open={false} onClose={() => {}} aria-label="Sections" items={items} />,
-    );
-    expect(screen.queryByRole('dialog')).toBeNull();
-  });
-
-  it('renders every item when open, with no header title or close button', () => {
-    render(<MobileAppsDrawer open onClose={() => {}} aria-label="Sections" items={items} />);
-
-    expect(screen.getByRole('dialog', { name: 'Sections' })).toBeDefined();
-    expect(screen.getByText('Home')).toBeDefined();
-    expect(screen.getByText('Notes')).toBeDefined();
-    expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
-  });
-
-  it('renders an href item as a link and an onClick item as a button', () => {
-    render(<MobileAppsDrawer open onClose={() => {}} aria-label="Sections" items={items} />);
-
-    const link = screen.getByText('Home').closest('a');
-    expect(link).not.toBeNull();
-    expect(link?.getAttribute('href')).toBe('/home');
-
-    const button = screen.getByText('Notes').closest('button');
-    expect(button).not.toBeNull();
-  });
-
-  it('calls the item onClick handler when pressed', () => {
-    render(<MobileAppsDrawer open onClose={() => {}} aria-label="Sections" items={items} />);
-
-    fireEvent.click(screen.getByText('Notes'));
-    expect(items[1]?.onClick).toHaveBeenCalledTimes(1);
-  });
-});

package/src/components/MobileFooter/MobileFooter.module.css

@@ -1,73 +0,0 @@
-.footer {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  /* Mobile-only component — never render wider than the platform's own
-     mobile breakpoint, even if a consumer accidentally mounts it in a wider
-     container (e.g. an un-gated preview). At real mobile widths this is a
-     no-op since the viewport itself is already narrower. */
-  max-width: 768px;
-  margin-inline: auto;
-  min-height: var(--sv-shell-footer-height, 60px);
-  padding: 0 var(--sv-space-4);
-  padding-bottom: max(var(--sv-space-2), env(safe-area-inset-bottom));
-  background-color: var(--sv-color-surface);
-  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  position: relative;
-  z-index: 101;
-}
-
-.navItem {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  min-height: 52px;
-  border: none;
-  background: transparent;
-  color: var(--sv-color-text-muted);
-  font: inherit;
-  cursor: pointer;
-  text-decoration: none;
-  border-radius: var(--sv-radius-md);
-  transition: color 0.1s;
-  outline: none;
-}
-
-@media (hover: hover) {
-  .navItem:hover {
-    color: var(--sv-color-text-primary);
-  }
-}
-
-.navItem:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: -2px;
-}
-
-.navItemActive {
-  color: var(--sv-color-text-primary);
-}
-
-.navItemApps {
-  position: relative;
-}
-
-.navItemAppsOpen {
-  color: var(--sv-color-text-primary);
-}
-
-.navItemAppsOpen::before {
-  content: '';
-  position: absolute;
-  width: 48px;
-  height: 48px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-surface-sunken);
-}
-
-.navItemAppsOpen svg,
-.navItemAppsOpen img {
-  position: relative;
-  z-index: 1;
-}

package/src/components/MobileFooter/MobileFooter.stories.tsx

@@ -1,47 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { MobileFooter } from './MobileFooter';
-import { Icon } from '../Icon/Icon';
-
-const homeIcon = { icon: <Icon name="house" size="md" aria-hidden />, label: 'Home', active: true };
-const searchIcon = { icon: <Icon name="search" size="md" aria-hidden />, label: 'Search' };
-const calendarIcon = { icon: <Icon name="calendar" size="md" aria-hidden />, label: 'Calendar' };
-const activityIcon = { icon: <Icon name="activity" size="md" aria-hidden />, label: 'Activity' };
-
-const meta = {
-  title: 'Components/MobileFooter',
-  component: MobileFooter,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Mobile shell footer nav row (RFC 0088). The centered launcher (onOpenApps) is always rendered; leftIcons/rightIcons take 1 or 2 items each, symmetric so the launcher stays centered. Presentational only, no data fetching.',
-      },
-    },
-  },
-  args: {
-    onOpenApps: () => {},
-    leftIcons: [homeIcon],
-    rightIcons: [searchIcon],
-  },
-} satisfies Meta<typeof MobileFooter>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const FiveIcons: Story = {
-  args: {
-    leftIcons: [homeIcon, calendarIcon],
-    rightIcons: [searchIcon, activityIcon],
-  },
-};
-
-export const LauncherOpen: Story = {
-  render: function Render(args) {
-    const [open, setOpen] = useState(true);
-    return <MobileFooter {...args} launcherOpen={open} onOpenApps={() => setOpen((v) => !v)} />;
-  },
-};

package/src/components/MobileFooter/MobileFooter.tsx

@@ -1,122 +0,0 @@
-'use client';
-
-import { useRef, type HTMLAttributes, type ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-import { usePublishShellChromeHeight } from '../../hooks/usePublishShellChromeHeight';
-import styles from './MobileFooter.module.css';
-
-export interface FooterIcon {
-  icon: ReactNode;
-  label: string;
-  href?: string;
-  onClick?: () => void;
-  active?: boolean;
-}
-
-export interface MobileFooterProps extends HTMLAttributes<HTMLElement> {
-  /** Opens the app drawer/launcher. Always rendered as the centered slot;
-   * not overridable. */
-  onOpenApps: () => void;
-  /** Custom launcher icon (e.g. a plugin-supplied image). Defaults to a
-   * generic grid icon. */
-  launcherIcon?: ReactNode;
-  /** Whether the launcher's own drawer is currently open (applies the
-   * pressed/active visual state). */
-  launcherOpen?: boolean;
-  /** 1 or 2 icons rendered to the left of the centered launcher. */
-  leftIcons: FooterIcon[];
-  /** 1 or 2 icons rendered to the right of the centered launcher. Must match
-   * `leftIcons.length` — the launcher stays visually centered, so a mismatch
-   * is flagged (dev-mode only, never thrown) rather than silently allowed. */
-  rightIcons: FooterIcon[];
-}
-
-function FooterNavItem({ icon, label, href, onClick, active }: FooterIcon) {
-  const className = [styles.navItem, active ? styles.navItemActive : ''].filter(Boolean).join(' ');
-  if (href) {
-    return (
-      <a
-        href={href}
-        className={className}
-        aria-label={label}
-        aria-current={active ? 'page' : undefined}
-      >
-        {icon}
-      </a>
-    );
-  }
-  return (
-    <button type="button" className={className} aria-label={label} onClick={onClick}>
-      {icon}
-    </button>
-  );
-}
-
-/**
- * The mobile footer bar: a centered, fixed "Apps" launcher flanked by 1 or 2
- * overridable icons on each side (3 or 5 total, matching standard
- * iOS/Android bottom-nav conventions). Owns its own chrome — background,
- * border-top, safe-area-aware bottom padding, and a 768px max-width (so it
- * never stretches full-bleed if mounted outside an actual mobile viewport)
- * — matching the runtime shell's own mobile footer (MobileNav) exactly,
- * since this component is meant to replace that hand-rolled markup.
- * Presentational only — no data fetching; the consumer owns the
- * drawer/overlay `onOpenApps` opens. See RFC 0088 for the
- * immutable/overridable boundary this enforces.
- *
- * Self-measures its own rendered height and publishes it as
- * `--sv-shell-footer-height` on the shell root — see
- * `usePublishShellChromeHeight`'s own doc comment for why this exists (it's
- * what makes a self-rendered footer, the `shellConfig.mobileFooter: false`
- * pattern, correctly clear `Sheet`/`Drawer`/`Dialog` instead of being
- * overlapped by them).
- */
-export function MobileFooter({
-  onOpenApps,
-  launcherIcon,
-  launcherOpen,
-  leftIcons,
-  rightIcons,
-  className,
-  ...rest
-}: MobileFooterProps) {
-  if (process.env.NODE_ENV !== 'production' && leftIcons.length !== rightIcons.length) {
-    console.error(
-      `MobileFooter: leftIcons (${leftIcons.length}) and rightIcons (${rightIcons.length}) ` +
-        'must have the same length so the launcher stays visually centered.',
-    );
-  }
-
-  const navRef = useRef<HTMLElement>(null);
-  usePublishShellChromeHeight(navRef, '--sv-shell-footer-height');
-
-  const cls = [styles.footer, className].filter(Boolean).join(' ');
-  const launcherClassName = [
-    styles.navItem,
-    styles.navItemApps,
-    launcherOpen ? styles.navItemAppsOpen : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <nav {...rest} ref={navRef} className={cls} aria-label="App navigation">
-      {leftIcons.map((item) => (
-        <FooterNavItem key={item.label} {...item} />
-      ))}
-      <button
-        type="button"
-        className={launcherClassName}
-        aria-label="Apps"
-        aria-expanded={launcherOpen}
-        aria-haspopup="dialog"
-        onClick={onOpenApps}
-      >
-        {launcherIcon ?? <Icon name="grid-2x2" size="md" aria-hidden />}
-      </button>
-      {rightIcons.map((item) => (
-        <FooterNavItem key={item.label} {...item} />
-      ))}
-    </nav>
-  );
-}

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

@@ -1,129 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { MobileFooter } from '../MobileFooter';
-
-afterEach(() => {
-  cleanup();
-  vi.unstubAllEnvs();
-  vi.restoreAllMocks();
-});
-
-const oneIcon = [{ icon: <span>icon</span>, label: 'Home' }];
-const twoIcons = [
-  { icon: <span>icon</span>, label: 'Home' },
-  { icon: <span>icon</span>, label: 'Calendar' },
-];
-const leftTwo = [
-  { icon: <span>icon</span>, label: 'Home' },
-  { icon: <span>icon</span>, label: 'Calendar' },
-];
-const rightTwo = [
-  { icon: <span>icon</span>, label: 'Search' },
-  { icon: <span>icon</span>, label: 'Activity' },
-];
-
-describe('MobileFooter self-measured height', () => {
-  afterEach(() => {
-    document.getElementById('sv-app-shell')?.remove();
-  });
-
-  it('publishes its rendered height as --sv-shell-footer-height on #sv-app-shell', () => {
-    const shell = document.createElement('div');
-    shell.id = 'sv-app-shell';
-    document.body.appendChild(shell);
-    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
-      height: 64,
-      width: 0,
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      x: 0,
-      y: 0,
-      toJSON() {},
-    } as DOMRect);
-
-    render(<MobileFooter onOpenApps={() => {}} leftIcons={oneIcon} rightIcons={oneIcon} />);
-
-    expect(shell.style.getPropertyValue('--sv-shell-footer-height')).toBe('64px');
-  });
-
-  it('removes the override on unmount', () => {
-    const shell = document.createElement('div');
-    shell.id = 'sv-app-shell';
-    document.body.appendChild(shell);
-    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
-      height: 64,
-      width: 0,
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      x: 0,
-      y: 0,
-      toJSON() {},
-    } as DOMRect);
-
-    const { unmount } = render(
-      <MobileFooter onOpenApps={() => {}} leftIcons={oneIcon} rightIcons={oneIcon} />,
-    );
-    expect(shell.style.getPropertyValue('--sv-shell-footer-height')).toBe('64px');
-
-    unmount();
-    expect(shell.style.getPropertyValue('--sv-shell-footer-height')).toBe('');
-  });
-
-  it('never throws when #sv-app-shell is absent (Storybook, unit tests, other hosts)', () => {
-    expect(() =>
-      render(<MobileFooter onOpenApps={() => {}} leftIcons={oneIcon} rightIcons={oneIcon} />),
-    ).not.toThrow();
-  });
-});
-
-describe('MobileFooter', () => {
-  it('always renders the centered launcher button', () => {
-    render(<MobileFooter onOpenApps={() => {}} leftIcons={oneIcon} rightIcons={oneIcon} />);
-
-    expect(screen.getByRole('button', { name: 'Apps' })).toBeDefined();
-  });
-
-  it('calls onOpenApps when the launcher is pressed', () => {
-    const onOpenApps = vi.fn();
-    render(<MobileFooter onOpenApps={onOpenApps} leftIcons={oneIcon} rightIcons={oneIcon} />);
-
-    fireEvent.click(screen.getByRole('button', { name: 'Apps' }));
-    expect(onOpenApps).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders 1+1 and 2+2 icon layouts', () => {
-    const { rerender } = render(
-      <MobileFooter onOpenApps={() => {}} leftIcons={oneIcon} rightIcons={oneIcon} />,
-    );
-    expect(screen.getAllByRole('button').length).toBe(3);
-
-    rerender(<MobileFooter onOpenApps={() => {}} leftIcons={leftTwo} rightIcons={rightTwo} />);
-    expect(screen.getByLabelText('Calendar')).toBeDefined();
-    expect(screen.getByLabelText('Activity')).toBeDefined();
-  });
-
-  it('logs a dev-mode console.error when left/right icon counts mismatch, but never throws', () => {
-    vi.stubEnv('NODE_ENV', 'development');
-    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-
-    expect(() =>
-      render(<MobileFooter onOpenApps={() => {}} leftIcons={oneIcon} rightIcons={twoIcons} />),
-    ).not.toThrow();
-
-    expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining('leftIcons'));
-  });
-
-  it('does not call console.error in production even with mismatched counts', () => {
-    vi.stubEnv('NODE_ENV', 'production');
-    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-
-    render(<MobileFooter onOpenApps={() => {}} leftIcons={oneIcon} rightIcons={twoIcons} />);
-
-    expect(errorSpy).not.toHaveBeenCalled();
-  });
-});

package/src/components/MobileHeader/MobileHeader.module.css

@@ -1,76 +0,0 @@
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sv-space-3);
-  width: 100%;
-  /* Mobile-only component — never render wider than the platform's own
-     mobile breakpoint, even if a consumer accidentally mounts it in a wider
-     container (e.g. an un-gated preview). At real mobile widths this is a
-     no-op since the viewport itself is already narrower. */
-  max-width: 768px;
-  margin-inline: auto;
-  min-height: var(--sv-shell-header-height, 60px);
-  padding: var(--sv-space-3) var(--sv-space-4);
-  padding-top: max(var(--sv-space-3), env(safe-area-inset-top));
-  padding-right: max(var(--sv-space-4), env(safe-area-inset-right));
-  padding-left: max(var(--sv-space-4), env(safe-area-inset-left));
-  background-color: var(--sv-color-surface);
-  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  position: sticky;
-  top: 0;
-  z-index: 101;
-  /* 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 — only reachable when a consumer mounts this component
-     inside its own scrolling container (the platform shell's own mobile
-     header sits in a separate, non-scrolling grid row, so this is a no-op
-     there; a plugin self-rendering this via shellConfig.mobileHeader: false
-     inside a scrollable page is exactly the case this protects). Found and
-     fixed across three sticky elements in sovereign-tasks before being
-     applied here proactively — see docs/architecture-rules.md.
-     translateZ(0) promotes it to its own layer, rasterized independently of
-     the scroller's tile grid. */
-  transform: translateZ(0);
-}
-
-.brandGroup {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-3);
-  min-width: 0;
-}
-
-/* Matches the runtime shell's own .mobileBrandIcon (shell.module.css) — the
-   default logo shown when the consumer doesn't supply one. */
-.defaultLogo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-  border-radius: var(--sv-radius-md);
-  background-color: var(--sv-color-accent);
-  color: var(--sv-color-text-on-accent);
-  font-weight: var(--sv-font-weight-semibold);
-  overflow: hidden;
-}
-
-.title {
-  font-size: var(--sv-font-size-md);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.right {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-2);
-  margin-left: auto;
-  flex-shrink: 0;
-}