@sovereignfs/ui 0.54.0 → 0.83.1

package/src/components/Header/Header.tsx

@@ -0,0 +1,102 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './Header.module.css';
+
+export interface HeaderPlugin {
+  /** Plugin display name, rendered next to its icon. */
+  name: string;
+  /** Plugin icon — already sized (28px) and built by the consumer (typically
+   * an `<img src="/plugin-icons/<id>.svg">`), matching `MobileHeader`'s own
+   * router-agnostic convention for icon-shaped slots. */
+  icon?: ReactNode;
+  /** Where the plugin name/icon links to — typically the plugin's own
+   * `routePrefix`. Omit to render plain (non-interactive) text instead of a
+   * link — e.g. a plugin's own home page linking to itself would be a no-op. */
+  href?: string;
+}
+
+export interface HeaderProps extends HTMLAttributes<HTMLElement> {
+  /** Instance name — derives the brand badge's initial (its first character,
+   * uppercased) and the badge's accessible label. Does not render as text
+   * anywhere in this component (unlike `MobileHeader`'s optional `title`). */
+  instanceName: string;
+  /** Optional instance logo image; falls back to `instanceName`'s initial
+   * (matching the runtime shell's own sidebar/mobile-header fallback). */
+  instanceLogoUrl?: string;
+  /** Where the brand badge links — typically the Launcher plugin's route. */
+  homeHref: string;
+  /** The active plugin, rendered next to the brand badge. Omit for a page
+   * with no single active plugin (e.g. the Launcher itself). */
+  plugin?: HeaderPlugin;
+  /** Apps launcher trigger — already wired by the consumer (icon button plus
+   * whatever popover/drawer it opens). Always rendered, matching
+   * `MobileHeader`'s bell/avatarMenu boundary: this component owns layout
+   * only, never launcher/notification/account interaction logic. */
+  launcher: ReactNode;
+  /** Notification bell trigger — always rendered; not overridable. Same
+   * "just an icon slot" boundary as `MobileHeader`'s own `bell` prop. */
+  notifications: ReactNode;
+  /** Avatar / account menu trigger — always rendered; not overridable. */
+  avatarMenu: ReactNode;
+}
+
+/**
+ * The web top-bar header: brand badge (+ optional active plugin) on the
+ * left, launcher · notifications · avatar menu on the right. This is the
+ * `shell: minimal` counterpart to the runtime shell's own sidebar — a plugin
+ * that owns its whole viewport (no platform sidebar) renders this instead,
+ * the same way it renders `MobileHeader` in place of the platform's mobile
+ * chrome. Extracted into a shared component so a `shell: minimal` plugin
+ * doesn't have to hand-roll its own top bar from scratch.
+ *
+ * Presentational only — no data fetching, no account/notification/launcher
+ * logic of its own. `launcher`/`notifications`/`avatarMenu` are supplied
+ * fully built, exactly like `MobileHeader`'s `bell`/`avatarMenu`: this
+ * component stays router-agnostic and interaction-agnostic, and never
+ * duplicates a real `AccountMenu`/notification-panel/apps-switcher
+ * implementation.
+ */
+export function Header({
+  instanceName,
+  instanceLogoUrl,
+  homeHref,
+  plugin,
+  launcher,
+  notifications,
+  avatarMenu,
+  className,
+  ...rest
+}: HeaderProps) {
+  const brandInitial = instanceName.charAt(0).toUpperCase() || 'S';
+  const cls = [styles.header, className].filter(Boolean).join(' ');
+
+  return (
+    <header className={cls} {...rest}>
+      <div className={styles.left}>
+        <a href={homeHref} className={styles.brandBadge} aria-label={`${instanceName} home`}>
+          {instanceLogoUrl ? (
+            <img src={instanceLogoUrl} alt="" className={styles.brandLogoImg} />
+          ) : (
+            brandInitial
+          )}
+        </a>
+        {plugin &&
+          (plugin.href ? (
+            <a href={plugin.href} className={styles.plugin}>
+              {plugin.icon}
+              <span className={styles.pluginName}>{plugin.name}</span>
+            </a>
+          ) : (
+            <span className={styles.plugin}>
+              {plugin.icon}
+              <span className={styles.pluginName}>{plugin.name}</span>
+            </span>
+          ))}
+      </div>
+      <div className={styles.right}>
+        {launcher}
+        {notifications}
+        {avatarMenu}
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,104 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Header } from '../Header';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('Header', () => {
+  it('always renders the brand badge, launcher, notifications, and avatar menu slots', () => {
+    render(
+      <Header
+        instanceName="Sovereign"
+        homeHref="/launcher"
+        launcher={<span data-testid="launcher">launcher</span>}
+        notifications={<span data-testid="bell">bell</span>}
+        avatarMenu={<span data-testid="avatar">avatar</span>}
+      />,
+    );
+
+    expect(screen.getByText('S')).toBeDefined();
+    expect(screen.getByTestId('launcher')).toBeDefined();
+    expect(screen.getByTestId('bell')).toBeDefined();
+    expect(screen.getByTestId('avatar')).toBeDefined();
+  });
+
+  it('derives the brand badge initial from instanceName, uppercased', () => {
+    render(
+      <Header
+        instanceName="acme"
+        homeHref="/launcher"
+        launcher={<span />}
+        notifications={<span />}
+        avatarMenu={<span />}
+      />,
+    );
+
+    expect(screen.getByText('A')).toBeDefined();
+  });
+
+  it('links the brand badge to homeHref', () => {
+    render(
+      <Header
+        instanceName="Sovereign"
+        homeHref="/launcher"
+        launcher={<span />}
+        notifications={<span />}
+        avatarMenu={<span />}
+      />,
+    );
+
+    expect(screen.getByRole('link', { name: 'Sovereign home' })).toHaveProperty(
+      'href',
+      expect.stringContaining('/launcher'),
+    );
+  });
+
+  it('renders no plugin by default', () => {
+    render(
+      <Header
+        instanceName="Sovereign"
+        homeHref="/launcher"
+        launcher={<span />}
+        notifications={<span />}
+        avatarMenu={<span />}
+      />,
+    );
+
+    expect(screen.queryByText('Notes')).toBeNull();
+  });
+
+  it('renders the active plugin as a link when href is provided', () => {
+    render(
+      <Header
+        instanceName="Sovereign"
+        homeHref="/launcher"
+        plugin={{ name: 'Notes', icon: <span>icon</span>, href: '/notes' }}
+        launcher={<span />}
+        notifications={<span />}
+        avatarMenu={<span />}
+      />,
+    );
+
+    const link = screen.getByRole('link', { name: /Notes/ });
+    expect(link).toHaveProperty('href', expect.stringContaining('/notes'));
+  });
+
+  it('renders the active plugin as plain text when href is omitted', () => {
+    render(
+      <Header
+        instanceName="Sovereign"
+        homeHref="/launcher"
+        plugin={{ name: 'Notes' }}
+        launcher={<span />}
+        notifications={<span />}
+        avatarMenu={<span />}
+      />,
+    );
+
+    expect(screen.getByText('Notes')).toBeDefined();
+    expect(screen.queryByRole('link', { name: /Notes/ })).toBeNull();
+  });
+});

package/src/components/HeaderFooterLayout/HeaderFooterLayout.module.css

@@ -0,0 +1,21 @@
+.shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.header {
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.main {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.footer {
+  flex-shrink: 0;
+  overflow: hidden;
+}

package/src/components/HeaderFooterLayout/HeaderFooterLayout.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { HeaderFooterLayout } from './HeaderFooterLayout';
+
+function Bar({ label }: { label: string }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        fontFamily: 'var(--sv-font-family)',
+        fontSize: 'var(--sv-font-size-sm)',
+        fontWeight: 600,
+        color: 'var(--sv-color-text-primary)',
+        background: 'var(--sv-color-surface-raised)',
+        borderBlock: '1px solid var(--sv-color-border)',
+      }}
+    >
+      {label}
+    </div>
+  );
+}
+
+function ScrollableMain() {
+  return (
+    <div style={{ padding: 'var(--sv-space-4)', fontFamily: 'var(--sv-font-family)' }}>
+      {Array.from({ length: 30 }, (_, index) => (
+        <p key={index} style={{ color: 'var(--sv-color-text-primary)' }}>
+          Row {index + 1} — the main region scrolls independently; header and footer stay put.
+        </p>
+      ))}
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Components/HeaderFooterLayout',
+  component: HeaderFooterLayout,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Header + main + optional footer, both fixed-height and independently optional, with main always claiming the remaining height. The vertical counterpart to ThreeColumnLayout — a plain flex column, no color opinions, no responsive behavior of its own.',
+      },
+    },
+  },
+  args: {
+    children: <ScrollableMain />,
+  },
+} satisfies Meta<typeof HeaderFooterLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The canonical usage — header + main + footer, all three present. */
+export const Default: Story = {
+  render: () => (
+    <div style={{ height: '480px' }}>
+      <HeaderFooterLayout header={<Bar label="Header" />} footer={<Bar label="Footer" />}>
+        <ScrollableMain />
+      </HeaderFooterLayout>
+    </div>
+  ),
+};
+
+export const HeaderOnly: Story = {
+  render: () => (
+    <div style={{ height: '480px' }}>
+      <HeaderFooterLayout header={<Bar label="Header" />}>
+        <ScrollableMain />
+      </HeaderFooterLayout>
+    </div>
+  ),
+};
+
+export const FooterOnly: Story = {
+  render: () => (
+    <div style={{ height: '480px' }}>
+      <HeaderFooterLayout footer={<Bar label="Footer" />}>
+        <ScrollableMain />
+      </HeaderFooterLayout>
+    </div>
+  ),
+};
+
+export const MainOnly: Story = {
+  render: () => (
+    <div style={{ height: '480px' }}>
+      <HeaderFooterLayout>
+        <ScrollableMain />
+      </HeaderFooterLayout>
+    </div>
+  ),
+};
+
+export const CustomHeights: Story = {
+  render: () => (
+    <div style={{ height: '480px' }}>
+      <HeaderFooterLayout
+        header={<Bar label="Header (100px)" />}
+        footer={<Bar label="Footer (48px)" />}
+        headerHeight={100}
+        footerHeight={48}
+      >
+        <ScrollableMain />
+      </HeaderFooterLayout>
+    </div>
+  ),
+};

package/src/components/HeaderFooterLayout/HeaderFooterLayout.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import styles from './HeaderFooterLayout.module.css';
+
+export interface HeaderFooterLayoutProps {
+  /** Main content — required, always fills whatever height header/footer don't claim. */
+  children: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  /** px. Fixed height of the header, when present. Default 60 (matches
+   *  MobileHeader/--sv-shell-header-height's own default). */
+  headerHeight?: number;
+  /** px. Fixed height of the footer, when present. Default 60 (matches
+   *  MobileFooter/--sv-shell-footer-height's own default). */
+  footerHeight?: number;
+  className?: string;
+}
+
+/**
+ * HeaderFooterLayout — header + main + optional footer, both fixed-height
+ * and independently optional, with main always claiming the remaining
+ * height. The vertical counterpart to ThreeColumnLayout: same purely
+ * structural approach (no color/background opinions, no awareness of what's
+ * inside each slot, no responsive behavior of its own — a plain flex
+ * column), just rotated. "Footer always at the bottom" falls out of flex
+ * layout alone; there is no position: fixed or safe-area handling here, so
+ * a caller composing this with the platform shell's own chrome still owns
+ * that separately.
+ */
+export function HeaderFooterLayout({
+  children,
+  header,
+  footer,
+  headerHeight = 60,
+  footerHeight = 60,
+  className,
+}: HeaderFooterLayoutProps) {
+  return (
+    <div className={[styles.shell, className].filter(Boolean).join(' ')}>
+      {header && (
+        <div className={styles.header} style={{ height: headerHeight }}>
+          {header}
+        </div>
+      )}
+      <div className={styles.main}>{children}</div>
+      {footer && (
+        <div className={styles.footer} style={{ height: footerHeight }}>
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { HeaderFooterLayout } from '../HeaderFooterLayout';
+
+afterEach(cleanup);
+
+describe('HeaderFooterLayout', () => {
+  it('renders main content with no header/footer by default', () => {
+    render(<HeaderFooterLayout>Main content</HeaderFooterLayout>);
+
+    expect(screen.getByText('Main content')).toBeDefined();
+    expect(screen.queryByText('Header')).toBeNull();
+    expect(screen.queryByText('Footer')).toBeNull();
+  });
+
+  it('renders header and footer when given', () => {
+    render(
+      <HeaderFooterLayout header={<span>Header</span>} footer={<span>Footer</span>}>
+        Main content
+      </HeaderFooterLayout>,
+    );
+
+    expect(screen.getByText('Header')).toBeDefined();
+    expect(screen.getByText('Main content')).toBeDefined();
+    expect(screen.getByText('Footer')).toBeDefined();
+  });
+
+  it('renders header without a footer', () => {
+    render(<HeaderFooterLayout header={<span>Header</span>}>Main content</HeaderFooterLayout>);
+
+    expect(screen.getByText('Header')).toBeDefined();
+    expect(screen.queryByText('Footer')).toBeNull();
+  });
+
+  it('renders footer without a header', () => {
+    render(<HeaderFooterLayout footer={<span>Footer</span>}>Main content</HeaderFooterLayout>);
+
+    expect(screen.queryByText('Header')).toBeNull();
+    expect(screen.getByText('Footer')).toBeDefined();
+  });
+
+  it('applies headerHeight and footerHeight as inline heights', () => {
+    render(
+      <HeaderFooterLayout
+        header={<span>Header</span>}
+        footer={<span>Footer</span>}
+        headerHeight={48}
+        footerHeight={72}
+      >
+        Main content
+      </HeaderFooterLayout>,
+    );
+
+    expect(screen.getByText('Header').parentElement?.style.height).toBe('48px');
+    expect(screen.getByText('Footer').parentElement?.style.height).toBe('72px');
+  });
+});

package/src/components/Icon/icons/arrow-left-right.tsx

@@ -0,0 +1,23 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function ArrowLeftRightIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M8 3 4 7l4 4" />
+      <path d="M4 7h16" />
+      <path d="m16 21 4-4-4-4" />
+      <path d="M20 17H4" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/bold.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function BoldIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/calendar.tsx

@@ -14,10 +14,10 @@ export function CalendarIcon(props: SVGProps<SVGSVGElement>) {
       strokeLinejoin="round"
       {...props}
     >
-      <path d="M8 2v4" />
-      <path d="M16 2v4" />
-      <rect width="18" height="18" x="3" y="4" rx="2" />
-      <path d="M3 10h18" />
+      <path d="M8 2v3" />
+      <path d="M16 2v3" />
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M3 9h18" />
     </svg>
   );
 }

package/src/components/Icon/icons/carrot.tsx

@@ -14,9 +14,9 @@ export function CarrotIcon(props: SVGProps<SVGSVGElement>) {
       strokeLinejoin="round"
       {...props}
     >
-      <path d="M2.27 21.7s9.87-3.5 12.73-6.36a4.5 4.5 0 0 0-6.36-6.37C5.77 11.84 2.27 21.7 2.27 21.7zM8.64 14l-2.05-2.04M15.34 15l-2.46-2.46" />
-      <path d="M22 9s-1.33-2-3.5-2C16.86 7 15 9 15 9s1.33 2 3.5 2S22 9 22 9z" />
-      <path d="M15 2s-2 1.33-2 3.5S15 9 15 9s2-1.84 2-3.5C17 3.33 15 2 15 2z" />
+      <path d="M15 16a1 1 0 0 0-7-7q-4 4-5.987 12.385a.5.5 0 0 0 .602.602Q11 20 15 16l-3-3" />
+      <path d="M15 9q4 4 7 0-3-4-7 0 4-4 0-7-4 3 0 7" />
+      <path d="m8 15-2.58-2.58" />
     </svg>
   );
 }

package/src/components/Icon/icons/circle-chevron-left.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CircleChevronLeftIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="m14 16-4-4 4-4" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/code.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CodeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m16 18 6-6-6-6" />
+      <path d="m8 6-6 6 6 6" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/copy.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CopyIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/credit-card.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CreditCardIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <rect width="20" height="14" x="2" y="5" rx="2" />
+      <line x1="2" x2="22" y1="10" y2="10" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/database.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function DatabaseIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <ellipse cx="12" cy="5" rx="9" ry="3" />
+      <path d="M3 5V19A9 3 0 0 0 21 19V5" />
+      <path d="M3 12A9 3 0 0 0 21 12" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/download.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function DownloadIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M12 15V3" />
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <path d="m7 10 5 5 5-5" />
+    </svg>
+  );
+}