@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Message/Message.tsx

@@ -1,41 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './Message.module.css';
-
-export type MessageSender = 'user' | 'assistant' | 'tool';
-
-export interface MessageProps {
-  /** Matches the three roles Sovereign Harness stores per RFC 0040:
-   * user, assistant, and tool messages. Named `sender`, not `role`, to
-   * avoid colliding with the ARIA `role` attribute in JSX tooling. */
-  sender: MessageSender;
-  children?: ReactNode;
-  /** Shows a "thinking" indicator instead of children — before the first
-   * token of a streaming response arrives. Once content starts streaming
-   * in, pass it as children and stop passing `pending`. */
-  pending?: boolean;
-  /** Rendered in a small row below the bubble — e.g. "Forget this" (RFC
-   * 0040's per-message memory action), "Copy", "Regenerate". */
-  actions?: ReactNode;
-  className?: string;
-}
-
-/** Message — a single chat turn. Content is caller-controlled `ReactNode`
- * (markdown rendering, if any, is the consumer's choice, not baked in here). */
-export function Message({ sender, children, pending, actions, className }: MessageProps) {
-  return (
-    <div className={[styles.row, styles[sender], className].filter(Boolean).join(' ')}>
-      <div className={styles.bubble}>
-        {pending ? (
-          <span className={styles.typingDots} aria-label="Thinking">
-            <span className={styles.dot} />
-            <span className={styles.dot} />
-            <span className={styles.dot} />
-          </span>
-        ) : (
-          children
-        )}
-      </div>
-      {actions && !pending && <div className={styles.actions}>{actions}</div>}
-    </div>
-  );
-}

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

@@ -1,46 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Message } from '../Message';
-
-afterEach(cleanup);
-
-describe('Message', () => {
-  it('renders children content', () => {
-    render(<Message sender="user">Hello there</Message>);
-    expect(screen.getByText('Hello there')).toBeDefined();
-  });
-
-  it('shows a "Thinking" indicator instead of children when pending', () => {
-    render(
-      <Message sender="assistant" pending>
-        Not shown yet
-      </Message>,
-    );
-    expect(screen.getByLabelText('Thinking')).toBeDefined();
-    expect(screen.queryByText('Not shown yet')).toBeNull();
-  });
-
-  it('renders actions below the bubble when given and not pending', () => {
-    render(
-      <Message sender="assistant" actions={<button type="button">Forget this</button>}>
-        Your task is due Thursday.
-      </Message>,
-    );
-    expect(screen.getByRole('button', { name: 'Forget this' })).toBeDefined();
-  });
-
-  it('hides actions while pending', () => {
-    render(
-      <Message sender="assistant" pending actions={<button type="button">Forget this</button>}>
-        content
-      </Message>,
-    );
-    expect(screen.queryByRole('button', { name: 'Forget this' })).toBeNull();
-  });
-
-  it.each(['user', 'assistant', 'tool'] as const)('renders the %s sender', (sender) => {
-    render(<Message sender={sender}>content</Message>);
-    expect(screen.getByText('content')).toBeDefined();
-  });
-});

package/src/components/MessageScroller/MessageScroller.module.css

@@ -1,54 +0,0 @@
-.root {
-  position: relative;
-  height: 100%;
-  min-height: 0;
-}
-
-.scrollContainer {
-  height: 100%;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-3);
-  padding: var(--sv-space-3);
-  scrollbar-width: thin;
-  scrollbar-color: var(--sv-color-border-strong) transparent;
-}
-
-.scrollContainer::-webkit-scrollbar {
-  width: 8px;
-}
-
-.scrollContainer::-webkit-scrollbar-thumb {
-  background: var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-full);
-}
-
-.jumpButton {
-  position: absolute;
-  bottom: var(--sv-space-3);
-  left: 50%;
-  transform: translateX(-50%);
-  padding: var(--sv-space-1) var(--sv-space-3);
-  border: 1px solid var(--sv-color-border);
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-surface-raised);
-  box-shadow: var(--sv-shadow-popover);
-  color: var(--sv-color-text-primary);
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-caption);
-  font-weight: var(--sv-font-weight-medium);
-  cursor: pointer;
-}
-
-.jumpButton:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-@media (hover: hover) {
-  .jumpButton:hover {
-    background: var(--sv-color-surface-sunken);
-  }
-}

package/src/components/MessageScroller/MessageScroller.stories.tsx

@@ -1,84 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { MessageScroller } from './MessageScroller';
-import { Message } from '../Message/Message';
-import { Button } from '../Button/Button';
-
-const meta = {
-  title: 'Components/MessageScroller',
-  component: MessageScroller,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Auto-scrolling chat container. Scrolls to the newest message while the user is near the bottom; if they\'ve scrolled up, new content shows a "New messages" button instead of yanking them back down.',
-      },
-    },
-  },
-  args: { children: null },
-} satisfies Meta<typeof MessageScroller>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-const SEED_MESSAGES = [
-  { sender: 'user' as const, text: 'What tasks do I have due this week?' },
-  {
-    sender: 'assistant' as const,
-    text: 'You have 3 tasks due this week: review the Q3 report, reply to the design feedback thread, and renew the domain registration.',
-  },
-  { sender: 'user' as const, text: 'Can you summarize the Q3 report task?' },
-  {
-    sender: 'assistant' as const,
-    text: 'It\'s tagged "high priority" and due Thursday — created from your Notes plugin two days ago.',
-  },
-];
-
-export const Interactive: Story = {
-  render: () => {
-    const [messages, setMessages] = useState(SEED_MESSAGES);
-    return (
-      <div style={{ height: 420, display: 'flex', flexDirection: 'column', maxWidth: 480 }}>
-        <div style={{ flex: 1, minHeight: 0, border: '1px solid var(--sv-color-border)' }}>
-          <MessageScroller>
-            {messages.map((m, i) => (
-              <Message key={i} sender={m.sender}>
-                {m.text}
-              </Message>
-            ))}
-          </MessageScroller>
-        </div>
-        <div style={{ padding: 'var(--sv-space-3)' }}>
-          <Button
-            size="sm"
-            onClick={() =>
-              setMessages((prev) => [
-                ...prev,
-                { sender: 'assistant', text: `New message #${prev.length + 1}` },
-              ])
-            }
-          >
-            Add message
-          </Button>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const LongHistory: Story = {
-  render: () => (
-    <div style={{ height: 420, maxWidth: 480, border: '1px solid var(--sv-color-border)' }}>
-      <MessageScroller>
-        {Array.from({ length: 30 }, (_, i) => (
-          <Message key={i} sender={i % 2 === 0 ? 'user' : 'assistant'}>
-            Message {i + 1}
-          </Message>
-        ))}
-      </MessageScroller>
-    </div>
-  ),
-};

package/src/components/MessageScroller/MessageScroller.tsx

@@ -1,72 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import type { ReactNode, UIEvent } from 'react';
-import styles from './MessageScroller.module.css';
-
-export interface MessageScrollerProps {
-  children: ReactNode;
-  className?: string;
-}
-
-const NEAR_BOTTOM_THRESHOLD_PX = 80;
-
-/**
- * MessageScroller — auto-scrolling chat container.
- *
- * Scrolls to the newest message automatically, but only while the user is
- * already near the bottom. If they've scrolled up to read history, new
- * content does not yank them back down — a "New messages" button appears
- * instead, matching the pattern every chat product (Slack, Discord,
- * ChatGPT) already uses.
- */
-export function MessageScroller({ children, className }: MessageScrollerProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  // A ref, not state: reading the user's scroll position must not itself
-  // retrigger the auto-scroll effect below, or scrolling back near the
-  // bottom manually would immediately snap the container the rest of the
-  // way — fighting the user's own scroll input.
-  const isNearBottomRef = useRef(true);
-  const [hasNewMessages, setHasNewMessages] = useState(false);
-
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    if (isNearBottomRef.current) {
-      el.scrollTop = el.scrollHeight;
-      setHasNewMessages(false);
-    } else {
-      setHasNewMessages(true);
-    }
-  }, [children]);
-
-  function handleScroll(event: UIEvent<HTMLDivElement>) {
-    const el = event.currentTarget;
-    const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-    isNearBottomRef.current = distanceFromBottom < NEAR_BOTTOM_THRESHOLD_PX;
-    if (isNearBottomRef.current) {
-      setHasNewMessages(false);
-    }
-  }
-
-  function scrollToBottom() {
-    const el = containerRef.current;
-    if (!el) return;
-    el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
-    isNearBottomRef.current = true;
-    setHasNewMessages(false);
-  }
-
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')}>
-      <div className={styles.scrollContainer} ref={containerRef} onScroll={handleScroll}>
-        {children}
-      </div>
-      {hasNewMessages && (
-        <button type="button" className={styles.jumpButton} onClick={scrollToBottom}>
-          New messages ↓
-        </button>
-      )}
-    </div>
-  );
-}

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

@@ -1,105 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { MessageScroller } from '../MessageScroller';
-
-afterEach(cleanup);
-
-/** jsdom doesn't implement layout, so scrollHeight/clientHeight are always 0
- * unless stubbed. Mirrors the common pattern for testing scroll behavior. */
-function stubScrollMetrics(
-  el: HTMLElement,
-  {
-    scrollHeight,
-    clientHeight,
-    scrollTop,
-  }: {
-    scrollHeight: number;
-    clientHeight: number;
-    scrollTop: number;
-  },
-) {
-  Object.defineProperty(el, 'scrollHeight', { value: scrollHeight, configurable: true });
-  Object.defineProperty(el, 'clientHeight', { value: clientHeight, configurable: true });
-  Object.defineProperty(el, 'scrollTop', { value: scrollTop, writable: true, configurable: true });
-}
-
-describe('MessageScroller', () => {
-  it('auto-scrolls to the bottom when near-bottom and children change', () => {
-    const { container, rerender } = render(
-      <MessageScroller>
-        <div>message 1</div>
-      </MessageScroller>,
-    );
-    const scrollEl = container.querySelector('[class*="scrollContainer"]') as HTMLElement;
-    stubScrollMetrics(scrollEl, { scrollHeight: 500, clientHeight: 200, scrollTop: 0 });
-
-    rerender(
-      <MessageScroller>
-        <div>message 1</div>
-        <div>message 2</div>
-      </MessageScroller>,
-    );
-
-    expect(scrollEl.scrollTop).toBe(500);
-    expect(screen.queryByText('New messages ↓')).toBeNull();
-  });
-
-  it('shows a "New messages" button instead of auto-scrolling when scrolled up', () => {
-    const { container, rerender } = render(
-      <MessageScroller>
-        <div>message 1</div>
-      </MessageScroller>,
-    );
-    const scrollEl = container.querySelector('[class*="scrollContainer"]') as HTMLElement;
-    // Simulate the user having scrolled up, far from the bottom.
-    stubScrollMetrics(scrollEl, { scrollHeight: 500, clientHeight: 200, scrollTop: 0 });
-    fireEvent.scroll(scrollEl);
-
-    rerender(
-      <MessageScroller>
-        <div>message 1</div>
-        <div>message 2</div>
-      </MessageScroller>,
-    );
-
-    expect(screen.getByText('New messages ↓')).toBeDefined();
-  });
-
-  it('scrolling back near the bottom does not force scrollTop (no fighting the user)', () => {
-    const { container } = render(
-      <MessageScroller>
-        <div>message 1</div>
-      </MessageScroller>,
-    );
-    const scrollEl = container.querySelector('[class*="scrollContainer"]') as HTMLElement;
-    stubScrollMetrics(scrollEl, { scrollHeight: 500, clientHeight: 200, scrollTop: 450 });
-    fireEvent.scroll(scrollEl);
-
-    expect(scrollEl.scrollTop).toBe(450);
-  });
-
-  it('clicking the jump button scrolls to bottom and hides the button', () => {
-    const { container, rerender } = render(
-      <MessageScroller>
-        <div>message 1</div>
-      </MessageScroller>,
-    );
-    const scrollEl = container.querySelector('[class*="scrollContainer"]') as HTMLElement;
-    stubScrollMetrics(scrollEl, { scrollHeight: 500, clientHeight: 200, scrollTop: 0 });
-    fireEvent.scroll(scrollEl);
-    rerender(
-      <MessageScroller>
-        <div>message 1</div>
-        <div>message 2</div>
-      </MessageScroller>,
-    );
-    expect(screen.getByText('New messages ↓')).toBeDefined();
-
-    scrollEl.scrollTo = vi.fn();
-    fireEvent.click(screen.getByText('New messages ↓'));
-
-    expect(scrollEl.scrollTo).toHaveBeenCalledWith({ top: 500, behavior: 'smooth' });
-    expect(screen.queryByText('New messages ↓')).toBeNull();
-  });
-});

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

@@ -1,81 +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;
-  /* Drawer's own grab handle already reserves a 44px touch target above this
-     — no extra top padding needed beyond a touch of breathing room. Bottom
-     gets noticeably more: with no header row to separate the grid from the
-     handle, a tight top/bottom balance read as top-heavy (grid crowding the
-     handle isn't the issue; the *last* row crowding the panel's bottom
-     edge/safe-area is). 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-1) var(--sv-space-4) var(--sv-space-10);
-  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);
-  });
-});