@sovereignfs/ui 0.54.0 → 0.89.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: 1px 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,109 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-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.
- */
-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 cls = [styles.footer, className].filter(Boolean).join(' ');
-  const launcherClassName = [
-    styles.navItem,
-    styles.navItemApps,
-    launcherOpen ? styles.navItemAppsOpen : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <nav {...rest} 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,71 +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', () => {
-  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,63 +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: 1px solid var(--sv-color-border);
-  position: sticky;
-  top: 0;
-  z-index: 101;
-}
-
-.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;
-}

package/src/components/MobileHeader/MobileHeader.stories.tsx

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { MobileHeader } from './MobileHeader';
-import { Avatar } from '../Avatar/Avatar';
-import { Icon } from '../Icon/Icon';
-
-function Logo() {
-  return (
-    <span
-      aria-label="Home"
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 28,
-        height: 28,
-        borderRadius: 'var(--sv-radius-sm)',
-        background: 'var(--sv-color-accent)',
-        color: 'var(--sv-color-text-on-accent)',
-        fontWeight: 700,
-        fontSize: 13,
-        flexShrink: 0,
-      }}
-    >
-      S
-    </span>
-  );
-}
-
-const meta = {
-  title: 'Components/MobileHeader',
-  component: MobileHeader,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Mobile shell header content row (RFC 0088). Logo, bell, and avatarMenu are always rendered by the consumer — the optional title is the only overridable part. Presentational only, no data fetching. See Overview/Mobile Patterns for the full immutable/overridable boundary.',
-      },
-    },
-  },
-  args: {
-    logo: <Logo />,
-    bell: <Icon name="bell" size="md" aria-label="Notifications" />,
-    avatarMenu: <Avatar name="Jamie Doe" size="sm" />,
-  },
-} satisfies Meta<typeof MobileHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithTitle: Story = {
-  args: {
-    title: 'Tasks',
-  },
-};

package/src/components/MobileHeader/MobileHeader.tsx

@@ -1,77 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import styles from './MobileHeader.module.css';
-
-export interface MobileHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  /** The brand/logo element — already a complete, clickable link home (e.g. an
-   * instance logo wrapped in the consumer's own router `Link`). Always
-   * rendered. `MobileHeader` stays router-agnostic, so this is provided
-   * fully built rather than as a bare icon + href. Optional — omit it to get
-   * a default "S" badge (matching the runtime shell's own fallback brand
-   * icon when no instance logo is configured), sized and styled to the same
-   * 36px/radius-md convention a custom logo is expected to follow. */
-  logo?: ReactNode;
-  /** Optional contextual title rendered beside the logo (e.g. the active
-   * plugin's name). Absent by default — this is the one overridable part of
-   * the header. See RFC 0088. */
-  title?: string;
-  /** Notification bell — always rendered; not overridable.
-   * TODO: this is just an icon slot today (the consumer wires up its own
-   * click handler/content) — it doesn't yet accommodate a full notification
-   * feature (unread badge, dropdown panel, etc. — see the runtime shell's
-   * own NotificationBell). Deferred; revisit once a plugin actually needs
-   * more than a bare bell icon here. */
-  bell: ReactNode;
-  /** Avatar / account menu trigger — always rendered; not overridable. */
-  avatarMenu: ReactNode;
-}
-
-/** Default fallback logo — matches the runtime shell's own .mobileBrandIcon
- *  exactly (36px, radius-md, accent background) for the "no instance logo
- *  configured" case, just with a fixed "S" instead of the instance name's
- *  first letter (this component can't know the instance name — no data
- *  fetching, see the component's own doc comment). */
-function DefaultLogo() {
-  return (
-    <span className={styles.defaultLogo} aria-hidden="true">
-      S
-    </span>
-  );
-}
-
-/**
- * The mobile header bar: brand/logo (always shown), an optional contextual
- * title, and a fixed bell + avatar-menu cluster. Owns its own chrome —
- * background, border-bottom, sticky positioning, safe-area-aware 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
- * header exactly, since this component is meant to replace that hand-rolled
- * markup. Presentational only — no data fetching; the consumer supplies
- * `bell`/`avatarMenu` (and, optionally, `logo`) as already-wired components
- * (their own sizing — 36px logo/avatar, 44px bell tap target — is the
- * consumer's responsibility, matching the reference implementation in the
- * runtime shell). See RFC 0088 for the immutable/overridable boundary this
- * enforces.
- */
-export function MobileHeader({
-  logo,
-  title,
-  bell,
-  avatarMenu,
-  className,
-  ...rest
-}: MobileHeaderProps) {
-  const cls = [styles.header, className].filter(Boolean).join(' ');
-
-  return (
-    <div className={cls} {...rest}>
-      <div className={styles.brandGroup}>
-        {logo ?? <DefaultLogo />}
-        {title && <span className={styles.title}>{title}</span>}
-      </div>
-      <div className={styles.right}>
-        {bell}
-        {avatarMenu}
-      </div>
-    </div>
-  );
-}

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

@@ -1,58 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { MobileHeader } from '../MobileHeader';
-
-afterEach(() => {
-  cleanup();
-});
-
-describe('MobileHeader', () => {
-  it('always renders the logo, bell, and avatar menu slots', () => {
-    render(
-      <MobileHeader
-        logo={<a href="/">logo</a>}
-        bell={<span data-testid="bell">bell</span>}
-        avatarMenu={<span data-testid="avatar">avatar</span>}
-      />,
-    );
-
-    expect(screen.getByText('logo')).toBeDefined();
-    expect(screen.getByTestId('bell')).toBeDefined();
-    expect(screen.getByTestId('avatar')).toBeDefined();
-  });
-
-  it('renders no title by default', () => {
-    render(<MobileHeader logo={<a href="/">logo</a>} bell={<span />} avatarMenu={<span />} />);
-
-    expect(screen.queryByText(/tasks/i)).toBeNull();
-  });
-
-  it('renders the optional title when provided', () => {
-    render(
-      <MobileHeader
-        logo={<a href="/">logo</a>}
-        title="Tasks"
-        bell={<span />}
-        avatarMenu={<span />}
-      />,
-    );
-
-    expect(screen.getByText('Tasks')).toBeDefined();
-  });
-
-  it('renders a default "S" badge when logo is omitted', () => {
-    render(<MobileHeader bell={<span />} avatarMenu={<span />} />);
-
-    expect(screen.getByText('S')).toBeDefined();
-  });
-
-  it('renders the supplied logo instead of the default badge when provided', () => {
-    render(
-      <MobileHeader logo={<a href="/">custom logo</a>} bell={<span />} avatarMenu={<span />} />,
-    );
-
-    expect(screen.getByText('custom logo')).toBeDefined();
-    expect(screen.queryByText('S')).toBeNull();
-  });
-});

package/src/components/NavTabs/NavTabs.module.css

@@ -1,50 +0,0 @@
-.nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0;
-  border-bottom: 1px solid var(--sv-color-border);
-}
-
-.link {
-  padding: var(--sv-space-2) var(--sv-space-3);
-  padding-bottom: calc(var(--sv-space-2) + 2px);
-  border-bottom: 2px solid transparent;
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-medium);
-  color: var(--sv-color-text-muted);
-  text-decoration: none;
-  white-space: nowrap;
-  transition: color 0.1s ease;
-}
-
-@media (hover: hover) {
-  .link:hover {
-    color: var(--sv-color-text-primary);
-  }
-}
-
-.link:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: -2px;
-  border-radius: var(--sv-radius-sm);
-}
-
-.active {
-  color: var(--sv-color-text-primary);
-  font-weight: var(--sv-font-weight-semibold);
-  border-bottom-color: var(--sv-color-text-primary);
-}
-
-@media (max-width: 640px) {
-  .nav {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    scrollbar-width: none;
-    -webkit-overflow-scrolling: touch;
-    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
-  }
-
-  .nav::-webkit-scrollbar {
-    display: none;
-  }
-}

package/src/components/NavTabs/NavTabs.tsx

@@ -1,61 +0,0 @@
-import { Fragment, type ReactNode } from 'react';
-import styles from './NavTabs.module.css';
-
-export interface NavTabItem {
-  label: string;
-  href: string;
-  active?: boolean;
-}
-
-/** Props to spread onto a consumer-supplied link element — keeps NavTabs' own
- * class names and a11y attributes in sync with whatever the consumer renders. */
-export interface NavTabLinkProps {
-  href: string;
-  className: string;
-  'aria-current': 'page' | undefined;
-  children: ReactNode;
-}
-
-export interface NavTabsProps {
-  items: NavTabItem[];
-  className?: string;
-  'aria-label'?: string;
-  /** Render a tab as something other than a plain `<a href>` — e.g. Next's
-   * `<Link replace>` inside an overlay-shell plugin, where a full page
-   * navigation would break the dialog's history contract. Receives the item
-   * plus the class name/aria attributes NavTabs would otherwise apply. */
-  renderLink?: (item: NavTabItem, linkProps: NavTabLinkProps) => ReactNode;
-}
-
-export function NavTabs({ items, className, 'aria-label': ariaLabel, renderLink }: NavTabsProps) {
-  return (
-    <nav
-      className={[styles.nav, className].filter(Boolean).join(' ')}
-      aria-label={ariaLabel ?? 'Page navigation'}
-    >
-      {items.map((item) => {
-        const linkProps: NavTabLinkProps = {
-          href: item.href,
-          className: [styles.link, item.active && styles.active].filter(Boolean).join(' '),
-          'aria-current': item.active ? 'page' : undefined,
-          children: item.label,
-        };
-        return (
-          <Fragment key={item.href}>
-            {renderLink ? (
-              renderLink(item, linkProps)
-            ) : (
-              <a
-                href={linkProps.href}
-                className={linkProps.className}
-                aria-current={linkProps['aria-current']}
-              >
-                {linkProps.children}
-              </a>
-            )}
-          </Fragment>
-        );
-      })}
-    </nav>
-  );
-}