@sovereignfs/ui 0.40.0 → 0.45.0

package/src/components/Label/Label.tsx

@@ -0,0 +1,24 @@
+import type { LabelHTMLAttributes } from 'react';
+import styles from './Label.module.css';
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  disabled?: boolean;
+}
+
+/**
+ * Label — standalone accessible form label, independent of `FormField`.
+ * Use `FormField` when a control needs hint/error text too; use `Label`
+ * directly for a bare label (e.g. next to a `Checkbox` group heading).
+ */
+export function Label({ disabled, className, children, ...rest }: LabelProps) {
+  return (
+    <label
+      className={[styles.label, disabled ? styles.disabled : '', className]
+        .filter(Boolean)
+        .join(' ')}
+      {...rest}
+    >
+      {children}
+    </label>
+  );
+}

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

@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Label } from '../Label';
+
+afterEach(cleanup);
+
+describe('Label', () => {
+  it('renders a real <label> element', () => {
+    render(<Label htmlFor="agree">I agree</Label>);
+    expect(screen.getByText('I agree').tagName).toBe('LABEL');
+  });
+
+  it('associates with a control via htmlFor', () => {
+    render(
+      <>
+        <Label htmlFor="agree">I agree to the terms</Label>
+        <input id="agree" type="checkbox" />
+      </>,
+    );
+    expect(screen.getByLabelText('I agree to the terms')).toBeDefined();
+  });
+
+  it('applies disabled styling without disabling the underlying element', () => {
+    render(
+      <Label htmlFor="agree" disabled>
+        I agree
+      </Label>,
+    );
+    expect(screen.getByText('I agree').className).toContain('disabled');
+  });
+});

package/src/components/Marker/Marker.module.css

@@ -0,0 +1,33 @@
+.marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  margin: 0 1px;
+  border: none;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent-subtle);
+  color: var(--sv-color-accent);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-label);
+  font-weight: var(--sv-font-weight-semibold);
+  line-height: 1;
+  vertical-align: super;
+}
+
+button.marker {
+  cursor: pointer;
+}
+
+button.marker:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 1px;
+}
+
+@media (hover: hover) {
+  button.marker:hover {
+    background: color-mix(in srgb, var(--sv-color-accent-subtle) 70%, var(--sv-color-accent) 30%);
+  }
+}

package/src/components/Marker/Marker.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Marker } from './Marker';
+
+const meta = {
+  title: 'Components/Marker',
+  component: Marker,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Inline citation/reference marker, for attributing part of an assistant answer to a source (Sovereign Harness "source trace").',
+      },
+    },
+  },
+  args: { index: 1, label: 'Source: Notes' },
+} satisfies Meta<typeof Marker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Static: Story = {};
+
+export const Clickable: Story = {
+  args: { onClick: () => {} },
+};
+
+export const InContext: Story = {
+  render: () => (
+    <p style={{ fontSize: 14, maxWidth: 400 }}>
+      Your next task deadline is Thursday
+      <Marker index={1} label="Source: Tasks" onClick={() => {}} />, and you have two unread
+      messages from the team
+      <Marker index={2} label="Source: Notes" onClick={() => {}} />.
+    </p>
+  ),
+};

package/src/components/Marker/Marker.tsx

@@ -0,0 +1,34 @@
+import styles from './Marker.module.css';
+
+export interface MarkerProps {
+  /** The number shown in the marker, e.g. 1, 2, 3. */
+  index: number;
+  /** Accessible label describing the citation, e.g. "Source: Notes". */
+  label: string;
+  /** Reveals source details (e.g. opens a source trace panel) when given. */
+  onClick?: () => void;
+  className?: string;
+}
+
+/**
+ * Marker — inline citation/reference marker, for attributing part of an
+ * assistant's answer to a source (matches RFC 0040's "source trace" —
+ * Harness shows which plugin/data source informed an answer).
+ */
+export function Marker({ index, label, onClick, className }: MarkerProps) {
+  const classes = [styles.marker, className].filter(Boolean).join(' ');
+
+  if (onClick) {
+    return (
+      <button type="button" onClick={onClick} aria-label={label} className={classes}>
+        {index}
+      </button>
+    );
+  }
+
+  return (
+    <span aria-label={label} className={classes}>
+      {index}
+    </span>
+  );
+}

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

@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Marker } from '../Marker';
+
+afterEach(cleanup);
+
+describe('Marker', () => {
+  it('renders as a static span with an accessible label when no onClick is given', () => {
+    render(<Marker index={1} label="Source: Notes" />);
+    const el = screen.getByLabelText('Source: Notes');
+    expect(el.tagName).toBe('SPAN');
+    expect(el.textContent).toBe('1');
+  });
+
+  it('renders as a button and fires onClick when given', () => {
+    const onClick = vi.fn();
+    render(<Marker index={2} label="Source: Tasks" onClick={onClick} />);
+    const el = screen.getByRole('button', { name: 'Source: Tasks' });
+    el.click();
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/src/components/MemberMultiSelect/MemberMultiSelect.module.css

@@ -0,0 +1,27 @@
+.group {
+  display: grid;
+  gap: var(--sv-space-2);
+}
+
+.label {
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-muted);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sv-space-2);
+}
+
+.trailing {
+  flex-shrink: 0;
+  max-width: 8rem;
+}
+
+.hint {
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-muted);
+}

package/src/components/MemberMultiSelect/MemberMultiSelect.stories.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CurrencyInput } from '../CurrencyInput/CurrencyInput';
+import { MemberMultiSelect, type MemberMultiSelectOption } from './MemberMultiSelect';
+
+const meta = {
+  title: 'Components/MemberMultiSelect',
+  component: MemberMultiSelect,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Checkbox list for picking any number of people from an already-resolved set of options. Domain-agnostic about who an option represents — instance users and guest members are both just `{id, label}`, so nothing special is needed to include guests. Not a directory search or invite flow; pair with SuggestionInput for that.',
+      },
+    },
+  },
+  args: {
+    options: [],
+    selectedIds: new Set(),
+    onToggle: () => {},
+  },
+} satisfies Meta<typeof MemberMultiSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const OPTIONS: MemberMultiSelectOption[] = [
+  { id: '1', label: 'Priya' },
+  { id: '2', label: 'Jamie (guest)' },
+  { id: '3', label: 'Sam' },
+];
+
+function ControlledMultiSelect({ withTrailing = false }: { withTrailing?: boolean }) {
+  const [selected, setSelected] = useState<Set<string>>(new Set(['1', '3']));
+  const [amounts, setAmounts] = useState<Record<string, number | null>>({});
+
+  return (
+    <MemberMultiSelect
+      options={OPTIONS}
+      selectedIds={selected}
+      onToggle={(id, checked) => {
+        setSelected((prev) => {
+          const next = new Set(prev);
+          if (checked) next.add(id);
+          else next.delete(id);
+          return next;
+        });
+      }}
+      label="Split between"
+      hint={withTrailing ? 'Remaining: 0.00' : undefined}
+      renderTrailing={
+        withTrailing
+          ? (id) => (
+              <CurrencyInput
+                valueCents={amounts[id] ?? null}
+                onValueChange={(cents) => setAmounts((prev) => ({ ...prev, [id]: cents }))}
+                placeholder="0.00"
+                aria-label={`Amount for ${OPTIONS.find((o) => o.id === id)?.label}`}
+              />
+            )
+          : undefined
+      }
+    />
+  );
+}
+
+export const Default: Story = {
+  render: () => <ControlledMultiSelect />,
+};
+
+export const WithTrailingAmountInput: Story = {
+  render: () => <ControlledMultiSelect withTrailing />,
+};

package/src/components/MemberMultiSelect/MemberMultiSelect.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Checkbox } from '../Checkbox/Checkbox';
+import styles from './MemberMultiSelect.module.css';
+
+export interface MemberMultiSelectOption {
+  id: string;
+  label: string;
+}
+
+export interface MemberMultiSelectProps {
+  options: MemberMultiSelectOption[];
+  selectedIds: Set<string>;
+  onToggle: (id: string, checked: boolean) => void;
+  /** Rendered to the right of a selected row only — e.g. a per-person `CurrencyInput` or share count. */
+  renderTrailing?: (id: string) => ReactNode;
+  /** Section label above the list, e.g. "Paid by" or "Split between". */
+  label?: string;
+  /** Helper/validation text below the list, e.g. a running total. */
+  hint?: ReactNode;
+  className?: string;
+}
+
+/**
+ * MemberMultiSelect — checkbox list for picking any number of people from an
+ * already-resolved set of options (group/project members, collaborators,
+ * etc.). Deliberately domain-agnostic about *who* an option represents —
+ * instance users and guest members are both just `{id, label}` here, so
+ * nothing special is needed to include guests alongside instance users; the
+ * caller's `options` array is the only place that distinction exists.
+ *
+ * Not a directory search or an "add a new guest" flow — pair with
+ * `SuggestionInput` (search + add) for that; this component only selects
+ * among options already passed in.
+ */
+export function MemberMultiSelect({
+  options,
+  selectedIds,
+  onToggle,
+  renderTrailing,
+  label,
+  hint,
+  className,
+}: MemberMultiSelectProps) {
+  return (
+    <div className={[styles.group, className].filter(Boolean).join(' ')}>
+      {label && <span className={styles.label}>{label}</span>}
+      {options.map((option) => {
+        const checked = selectedIds.has(option.id);
+        return (
+          <div key={option.id} className={styles.row}>
+            <Checkbox
+              checked={checked}
+              onChange={(next) => onToggle(option.id, next)}
+              label={option.label}
+            />
+            {checked && renderTrailing && (
+              <span className={styles.trailing}>{renderTrailing(option.id)}</span>
+            )}
+          </div>
+        );
+      })}
+      {hint && <span className={styles.hint}>{hint}</span>}
+    </div>
+  );
+}

package/src/components/Menu/Menu.module.css

@@ -1,6 +1,13 @@
 /* Menu — the item list shared by both presentations (Popover panel on
  * desktop, Drawer panel on mobile); the presentational chrome around it is
- * entirely owned by those two components, not duplicated here. */
+ * entirely owned by those two components, not duplicated here.
+ *
+ * Sizing audit: reviewed against this scale's other compact controls —
+ * --sv-radius-sm (6px) and --sv-font-size-sm (14px) already fit. The 44px
+ * min-height is a deliberate design choice, kept unconditional (not gated
+ * to pointer:coarse like Button/Checkbox) because this menu doubles as a
+ * full Drawer sheet on mobile, where every item must stay comfortably
+ * tappable. */
 
 .list {
   list-style: none;

package/src/components/Menu/Menu.tsx

@@ -70,10 +70,21 @@ export interface MenuProps {
  * Selecting an item both closes the menu and calls its `onSelect` — a
  * consumer's `onSelect` never needs to call `onClose` itself.
  */
-export function Menu({ trigger, open, onClose, items, 'aria-label': ariaLabel, align }: MenuProps) {
-  const isMobile = useIsMobile();
-
-  const list = (
+/**
+ * MenuEntries — the `<ul role="menu">` item list itself, factored out of
+ * `Menu` so other adaptive-surface components (e.g. `ContextMenu`) can
+ * render the exact same items/destructive/checked/icon markup inside their
+ * own positioning shell, instead of re-deriving it and risking drift.
+ */
+export function MenuEntries({
+  items,
+  onSelect,
+}: {
+  items: MenuEntry[];
+  /** Called after an item's own onSelect — typically the surface's onClose. */
+  onSelect: (entry: MenuItem) => void;
+}) {
+  return (
     <ul className={styles.list} role="menu">
       {items.map((entry, index) => {
         // Entries are a static, order-stable list per render — nothing
@@ -99,10 +110,7 @@ export function Menu({ trigger, open, onClose, items, 'aria-label': ariaLabel, a
                 .filter(Boolean)
                 .join(' ')}
               disabled={entry.disabled}
-              onClick={() => {
-                onClose();
-                entry.onSelect();
-              }}
+              onClick={() => onSelect(entry)}
             >
               {isCheckable && (
                 <span className={styles.check} aria-hidden>
@@ -117,6 +125,20 @@ export function Menu({ trigger, open, onClose, items, 'aria-label': ariaLabel, a
       })}
     </ul>
   );
+}
+
+export function Menu({ trigger, open, onClose, items, 'aria-label': ariaLabel, align }: MenuProps) {
+  const isMobile = useIsMobile();
+
+  const list = (
+    <MenuEntries
+      items={items}
+      onSelect={(entry) => {
+        onClose();
+        entry.onSelect();
+      }}
+    />
+  );
 
   if (isMobile) {
     return (

package/src/components/Menubar/Menubar.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Menubar } from './Menubar';
+
+const meta = {
+  title: 'Components/Menubar',
+  component: Menubar,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          "Desktop app-style menu bar (File/Edit/View...). A thin composition of NavigationMenu with MenuEntries as each item's flyout content — no positioning or list-rendering logic duplicated.",
+      },
+    },
+  },
+} satisfies Meta<typeof Menubar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  args: {
+    menus: [
+      {
+        label: 'File',
+        items: [
+          { label: 'New conversation', onSelect: () => {} },
+          { label: 'Export', onSelect: () => {} },
+          { type: 'separator' },
+          { label: 'Close', onSelect: () => {} },
+        ],
+      },
+      {
+        label: 'Edit',
+        items: [
+          { label: 'Undo', onSelect: () => {} },
+          { label: 'Redo', onSelect: () => {} },
+        ],
+      },
+      {
+        label: 'View',
+        items: [
+          { type: 'label', label: 'Layout' },
+          { label: 'Compact', checked: false, onSelect: () => {} },
+          { label: 'Comfortable', checked: true, onSelect: () => {} },
+        ],
+      },
+    ],
+  },
+};

package/src/components/Menubar/Menubar.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { NavigationMenu } from '../NavigationMenu/NavigationMenu';
+import { MenuEntries, type MenuEntry } from '../Menu/Menu';
+
+export interface MenubarMenu {
+  label: string;
+  items: MenuEntry[];
+}
+
+export interface MenubarProps {
+  menus: MenubarMenu[];
+  'aria-label'?: string;
+}
+
+/**
+ * Menubar — desktop app-style menu bar (File / Edit / View...). A thin
+ * composition of `NavigationMenu` (top-level triggers, per-item flyout
+ * positioning, hover-switches-when-one-is-open, arrow-key navigation) with
+ * `MenuEntries` (the same item list markup `Menu`'s dropdowns use) as each
+ * item's flyout content — no positioning or list-rendering logic
+ * duplicated from either.
+ */
+export function Menubar({ menus, 'aria-label': ariaLabel = 'Menu bar' }: MenubarProps) {
+  return (
+    <NavigationMenu
+      aria-label={ariaLabel}
+      items={menus.map((menu) => ({
+        label: menu.label,
+        content: (close: () => void) => (
+          <MenuEntries
+            items={menu.items}
+            onSelect={(entry) => {
+              close();
+              entry.onSelect();
+            }}
+          />
+        ),
+      }))}
+    />
+  );
+}

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

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { Menubar } from '../Menubar';
+
+afterEach(cleanup);
+
+describe('Menubar', () => {
+  it('opens a menu on trigger click, showing its items', () => {
+    render(<Menubar menus={[{ label: 'File', items: [{ label: 'New', onSelect: () => {} }] }]} />);
+    fireEvent.click(screen.getByRole('button', { name: 'File' }));
+    expect(screen.getByRole('menuitem', { name: 'New' })).toBeDefined();
+  });
+
+  it('selecting an item calls onSelect and closes the menu', () => {
+    const onSelect = vi.fn();
+    render(<Menubar menus={[{ label: 'File', items: [{ label: 'New', onSelect }] }]} />);
+    fireEvent.click(screen.getByRole('button', { name: 'File' }));
+    fireEvent.click(screen.getByRole('menuitem', { name: 'New' }));
+    expect(onSelect).toHaveBeenCalled();
+    expect(screen.queryByRole('menuitem', { name: 'New' })).toBeNull();
+  });
+
+  it('switches directly between menus on hover once one is open, like a real menu bar', () => {
+    render(
+      <Menubar
+        menus={[
+          { label: 'File', items: [{ label: 'New', onSelect: () => {} }] },
+          { label: 'Edit', items: [{ label: 'Undo', onSelect: () => {} }] },
+        ]}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'File' }));
+    expect(screen.getByRole('menuitem', { name: 'New' })).toBeDefined();
+
+    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Edit' }));
+    expect(screen.getByRole('menuitem', { name: 'Undo' })).toBeDefined();
+    expect(screen.queryByRole('menuitem', { name: 'New' })).toBeNull();
+  });
+
+  it('defaults to an accessible "Menu bar" label', () => {
+    render(<Menubar menus={[{ label: 'File', items: [] }]} />);
+    expect(screen.getByRole('navigation', { name: 'Menu bar' })).toBeDefined();
+  });
+});

package/src/components/Message/Message.module.css

@@ -0,0 +1,99 @@
+.row {
+  display: flex;
+  flex-direction: column;
+  max-width: 80%;
+}
+
+.user {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.assistant,
+.tool {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.bubble {
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border-radius: var(--sv-radius-xl);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+.user .bubble {
+  background: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+  border-bottom-right-radius: var(--sv-radius-sm);
+}
+
+.assistant .bubble {
+  background: var(--sv-color-surface-raised);
+  border: 1px solid var(--sv-color-border);
+  color: var(--sv-color-text-primary);
+  border-bottom-left-radius: var(--sv-radius-sm);
+}
+
+.tool .bubble {
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+  font-family: var(--sv-font-family-mono);
+  font-size: var(--sv-font-size-xs);
+  border-bottom-left-radius: var(--sv-radius-sm);
+}
+
+.actions {
+  display: flex;
+  gap: var(--sv-space-2);
+  margin-top: var(--sv-space-1);
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+}
+
+/* Typing indicator — three dots, staggered pulse. */
+.typingDots {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: var(--sv-space-1) 0;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--sv-radius-full);
+  background: currentColor;
+  opacity: 0.4;
+  animation: typing-pulse 1.2s ease-in-out infinite;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing-pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dot {
+    animation: none;
+    opacity: 0.7;
+  }
+}