@sovereignfs/ui 0.23.0 → 0.33.0

package/src/components/SplitPane/SplitPane.module.css

@@ -0,0 +1,85 @@
+.splitPane {
+  display: grid;
+  grid-template-columns:
+    minmax(0, var(--split-pane-primary-size, 50%)) 12px
+    minmax(0, calc(100% - var(--split-pane-primary-size, 50%)));
+  width: 100%;
+  min-height: 320px;
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-lg);
+  overflow: hidden;
+  background: var(--sv-color-surface);
+}
+
+.splitPane:not(:has(.handle)) {
+  grid-template-columns:
+    minmax(0, var(--split-pane-primary-size, 50%))
+    minmax(0, calc(100% - var(--split-pane-primary-size, 50%)));
+}
+
+.pane {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--sv-color-surface);
+}
+
+.pane + .pane {
+  border-left: 1px solid var(--sv-color-border);
+}
+
+.handle {
+  position: relative;
+  width: 12px;
+  min-width: 12px;
+  padding: 0;
+  border: 0;
+  border-inline: 1px solid var(--sv-color-border);
+  cursor: col-resize;
+  background: var(--sv-color-surface-sunken);
+}
+
+.handle::before {
+  position: absolute;
+  inset-block: 50%;
+  inset-inline: 50%;
+  width: 2px;
+  height: 40px;
+  content: '';
+  background: var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-full);
+  transform: translate(-50%, -50%);
+}
+
+@media (hover: hover) {
+  .handle:hover {
+    background: var(--sv-color-accent-subtle);
+  }
+}
+
+.handle:focus-visible {
+  background: var(--sv-color-accent-subtle);
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+@media (max-width: 720px) {
+  .splitPane,
+  .splitPane:not(:has(.handle)) {
+    grid-template-columns: 1fr;
+    min-height: 0;
+  }
+
+  .handle {
+    display: none;
+  }
+
+  .pane {
+    min-height: 220px;
+  }
+
+  .pane + .pane {
+    border-top: 1px solid var(--sv-color-border);
+    border-left: 0;
+  }
+}

package/src/components/SplitPane/SplitPane.stories.tsx

@@ -0,0 +1,160 @@
+import type { ReactNode } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SplitPane } from './SplitPane';
+import { CodeTextarea } from '../CodeTextarea/CodeTextarea';
+import { StatusBadge } from '../StatusBadge/StatusBadge';
+
+const editorText = `# Release plan
+
+- Confirm copy
+- Preview page
+- Commit changes
+`;
+
+function PaneShell({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        minHeight: '100%',
+        flexDirection: 'column',
+        gap: 'var(--sv-space-3)',
+        padding: 'var(--sv-space-4)',
+        fontFamily: 'var(--sv-font-family)',
+      }}
+    >
+      <h3
+        style={{
+          margin: 0,
+          fontSize: 'var(--sv-font-size-sm)',
+          color: 'var(--sv-color-text-primary)',
+        }}
+      >
+        {title}
+      </h3>
+      {children}
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Components/SplitPane',
+  component: SplitPane,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Responsive two-pane layout for editor/preview and list/detail workflows. Drag or use arrow keys on the separator.',
+      },
+    },
+  },
+  args: {
+    primary: <PaneShell title="Primary">Primary pane</PaneShell>,
+    secondary: <PaneShell title="Secondary">Secondary pane</PaneShell>,
+  },
+} satisfies Meta<typeof SplitPane>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <SplitPane
+      primary={
+        <PaneShell title="Editor">
+          <CodeTextarea aria-label="Markdown editor" defaultValue={editorText} />
+        </PaneShell>
+      }
+      secondary={
+        <PaneShell title="Preview">
+          <article style={{ lineHeight: 1.6, color: 'var(--sv-color-text-primary)' }}>
+            <h2 style={{ marginTop: 0 }}>Release plan</h2>
+            <ul>
+              <li>Confirm copy</li>
+              <li>Preview page</li>
+              <li>Commit changes</li>
+            </ul>
+          </article>
+        </PaneShell>
+      }
+    />
+  ),
+};
+
+export const FixedPanes: Story = {
+  render: () => (
+    <SplitPane
+      resizable={false}
+      defaultPrimarySize={38}
+      primary={
+        <PaneShell title="Files">
+          {['index.md', 'release-notes.md', 'about.md'].map((file) => (
+            <div
+              key={file}
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: 'var(--sv-space-3)',
+                padding: 'var(--sv-space-2) 0',
+                borderBottom: '1px solid var(--sv-color-border)',
+              }}
+            >
+              <span>{file}</span>
+              <StatusBadge status={file === 'release-notes.md' ? 'draft' : 'synced'} />
+            </div>
+          ))}
+        </PaneShell>
+      }
+      secondary={
+        <PaneShell title="Details">
+          <p style={{ margin: 0, color: 'var(--sv-color-text-muted)' }}>
+            Select a file to inspect frontmatter, sync state, and publish history.
+          </p>
+        </PaneShell>
+      }
+    />
+  ),
+};
+
+export const KeyboardResizable: Story = {
+  render: () => (
+    <SplitPane
+      defaultPrimarySize={45}
+      minPrimarySize={25}
+      maxPrimarySize={75}
+      resizeLabel="Resize editor and preview panes with arrow keys"
+      primary={<PaneShell title="Keyboard">Focus the separator and press arrow keys.</PaneShell>}
+      secondary={<PaneShell title="Preview">Shift+Arrow resizes in larger steps.</PaneShell>}
+    />
+  ),
+};
+
+export const LongContent: Story = {
+  render: () => (
+    <SplitPane
+      primary={
+        <PaneShell title="Long list">
+          {Array.from({ length: 28 }, (_, index) => (
+            <div key={index} style={{ paddingBlock: 'var(--sv-space-2)' }}>
+              Content item {index + 1}
+            </div>
+          ))}
+        </PaneShell>
+      }
+      secondary={<PaneShell title="Preview">Each pane scrolls independently.</PaneShell>}
+    />
+  ),
+};
+
+export const Mobile: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+  render: () => (
+    <SplitPane
+      primary={<PaneShell title="Editor">This pane appears first on narrow screens.</PaneShell>}
+      secondary={<PaneShell title="Preview">The second pane stacks below it.</PaneShell>}
+    />
+  ),
+};

package/src/components/SplitPane/SplitPane.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import type {
+  CSSProperties,
+  KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+} from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import styles from './SplitPane.module.css';
+
+export interface SplitPaneProps {
+  primary: ReactNode;
+  secondary: ReactNode;
+  defaultPrimarySize?: number;
+  minPrimarySize?: number;
+  maxPrimarySize?: number;
+  resizable?: boolean;
+  primaryLabel?: string;
+  secondaryLabel?: string;
+  resizeLabel?: string;
+  className?: string;
+}
+
+const clampSize = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
+/**
+ * SplitPane — responsive two-pane layout for editor/preview and list/detail
+ * workflows. Desktop panes can be resized; narrow viewports fall back to a
+ * stable single-column stack.
+ */
+export function SplitPane({
+  primary,
+  secondary,
+  defaultPrimarySize = 50,
+  minPrimarySize = 30,
+  maxPrimarySize = 70,
+  resizable = true,
+  primaryLabel = 'Primary pane',
+  secondaryLabel = 'Secondary pane',
+  resizeLabel = 'Resize panes',
+  className,
+}: SplitPaneProps) {
+  const initialSize = clampSize(defaultPrimarySize, minPrimarySize, maxPrimarySize);
+  const [primarySize, setPrimarySize] = useState(initialSize);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragState = useRef<{ pointerId: number } | null>(null);
+
+  const updateFromClientX = useCallback(
+    (clientX: number) => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect || rect.width === 0) {
+        return;
+      }
+
+      const next = ((clientX - rect.left) / rect.width) * 100;
+      setPrimarySize(clampSize(next, minPrimarySize, maxPrimarySize));
+    },
+    [maxPrimarySize, minPrimarySize],
+  );
+
+  useEffect(() => {
+    const handlePointerMove = (event: globalThis.PointerEvent) => {
+      if (!dragState.current || event.pointerId !== dragState.current.pointerId) {
+        return;
+      }
+      updateFromClientX(event.clientX);
+    };
+
+    const stopDragging = (event: globalThis.PointerEvent) => {
+      if (!dragState.current || event.pointerId !== dragState.current.pointerId) {
+        return;
+      }
+      dragState.current = null;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', stopDragging);
+    window.addEventListener('pointercancel', stopDragging);
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', stopDragging);
+      window.removeEventListener('pointercancel', stopDragging);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, [updateFromClientX]);
+
+  const startDragging = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    if (!resizable) {
+      return;
+    }
+    dragState.current = { pointerId: event.pointerId };
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+
+  const resizeWithKeyboard = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+    const step = event.shiftKey ? 10 : 5;
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      setPrimarySize((size) => clampSize(size - step, minPrimarySize, maxPrimarySize));
+    }
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      setPrimarySize((size) => clampSize(size + step, minPrimarySize, maxPrimarySize));
+    }
+    if (event.key === 'Home') {
+      event.preventDefault();
+      setPrimarySize(minPrimarySize);
+    }
+    if (event.key === 'End') {
+      event.preventDefault();
+      setPrimarySize(maxPrimarySize);
+    }
+  };
+
+  const style = {
+    '--split-pane-primary-size': `${primarySize}%`,
+  } as CSSProperties;
+
+  return (
+    <div
+      ref={containerRef}
+      className={[styles.splitPane, className].filter(Boolean).join(' ')}
+      style={style}
+    >
+      <section className={styles.pane} aria-label={primaryLabel}>
+        {primary}
+      </section>
+      {resizable && (
+        <button
+          type="button"
+          className={styles.handle}
+          aria-label={`${resizeLabel}, primary pane ${Math.round(primarySize)} percent`}
+          onPointerDown={startDragging}
+          onKeyDown={resizeWithKeyboard}
+        />
+      )}
+      <section className={styles.pane} aria-label={secondaryLabel}>
+        {secondary}
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { SplitPane } from '../SplitPane';
+
+afterEach(cleanup);
+
+describe('SplitPane', () => {
+  it('renders labeled panes and a resize button', () => {
+    render(
+      <SplitPane
+        primary={<p>Editor</p>}
+        secondary={<p>Preview</p>}
+        primaryLabel="Editor pane"
+        secondaryLabel="Preview pane"
+      />,
+    );
+
+    expect(screen.getByRole('region', { name: 'Editor pane' })).toBeDefined();
+    expect(screen.getByRole('region', { name: 'Preview pane' })).toBeDefined();
+    expect(screen.getByRole('button', { name: /Resize panes/ })).toBeDefined();
+  });
+
+  it('omits the resize button when not resizable', () => {
+    render(<SplitPane primary={<p>List</p>} secondary={<p>Detail</p>} resizable={false} />);
+
+    expect(screen.queryByRole('button', { name: /Resize panes/ })).toBeNull();
+  });
+
+  it('resizes with keyboard controls', () => {
+    render(
+      <SplitPane
+        primary={<p>Editor</p>}
+        secondary={<p>Preview</p>}
+        defaultPrimarySize={50}
+        minPrimarySize={30}
+        maxPrimarySize={70}
+      />,
+    );
+
+    const separator = screen.getByRole('button', { name: /Resize panes/ });
+    fireEvent.keyDown(separator, { key: 'ArrowRight' });
+    expect(separator.getAttribute('aria-label')).toContain('55 percent');
+
+    fireEvent.keyDown(separator, { key: 'Home' });
+    expect(separator.getAttribute('aria-label')).toContain('30 percent');
+
+    fireEvent.keyDown(separator, { key: 'End' });
+    expect(separator.getAttribute('aria-label')).toContain('70 percent');
+  });
+});

package/src/components/StatusBadge/StatusBadge.module.css

@@ -0,0 +1,59 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 24px;
+  gap: var(--sv-space-1);
+  padding: 2px var(--sv-space-2);
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-full);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.dot {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  border-radius: var(--sv-radius-full);
+  background: currentColor;
+}
+
+.label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.neutral {
+  color: var(--sv-color-text-muted);
+  background: var(--sv-color-surface-sunken);
+  border-color: var(--sv-color-border);
+}
+
+.info {
+  color: var(--sv-color-info-text);
+  background: var(--sv-color-info-surface);
+  border-color: var(--sv-color-info-border);
+}
+
+.success {
+  color: var(--sv-color-success-text);
+  background: var(--sv-color-success-surface);
+  border-color: var(--sv-color-success-border);
+}
+
+.warning {
+  color: var(--sv-color-warning-text);
+  background: var(--sv-color-warning-surface);
+  border-color: var(--sv-color-warning-border);
+}
+
+.error {
+  color: var(--sv-color-error-text);
+  background: var(--sv-color-error-surface);
+  border-color: var(--sv-color-error-border);
+}

package/src/components/StatusBadge/StatusBadge.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { StatusBadge } from './StatusBadge';
+
+const meta = {
+  title: 'Components/StatusBadge',
+  component: StatusBadge,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Compact inline status indicator for draft, sync, conflict, and delete-pending editor workflows.',
+      },
+    },
+  },
+  args: {
+    status: 'draft',
+  },
+} satisfies Meta<typeof StatusBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--sv-space-2)' }}>
+      <StatusBadge status="unmodified" />
+      <StatusBadge status="draft" />
+      <StatusBadge status="committed" />
+      <StatusBadge status="synced" />
+    </div>
+  ),
+};
+
+export const ErrorStates: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--sv-space-2)' }}>
+      <StatusBadge status="conflict" />
+      <StatusBadge status="pending-delete" />
+      <StatusBadge status="warning" />
+      <StatusBadge status="error" />
+    </div>
+  ),
+};
+
+export const AccessibleLabel: Story = {
+  render: () => (
+    <StatusBadge status="draft" aria-label="Draft with unpublished changes">
+      D
+    </StatusBadge>
+  ),
+};
+
+export const LongContent: Story = {
+  render: () => (
+    <div style={{ width: 180 }}>
+      <StatusBadge status="warning">Preview requires frontmatter migration</StatusBadge>
+    </div>
+  ),
+};
+
+export const MobileWrap: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--sv-space-2)', maxWidth: 320 }}>
+      <StatusBadge status="draft" />
+      <StatusBadge status="synced" />
+      <StatusBadge status="conflict" />
+      <StatusBadge status="pending-delete" />
+    </div>
+  ),
+};

package/src/components/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import styles from './StatusBadge.module.css';
+
+export type StatusBadgeStatus =
+  | 'unmodified'
+  | 'draft'
+  | 'committed'
+  | 'conflict'
+  | 'pending-delete'
+  | 'synced'
+  | 'warning'
+  | 'error';
+
+export interface StatusBadgeProps {
+  status: StatusBadgeStatus;
+  children?: ReactNode;
+  /** Accessible label when the visible text is abbreviated or contextual. */
+  'aria-label'?: string;
+  className?: string;
+}
+
+const STATUS_CLASS: Record<StatusBadgeStatus, string> = {
+  unmodified: styles.neutral as string,
+  draft: styles.info as string,
+  committed: styles.success as string,
+  conflict: styles.error as string,
+  'pending-delete': styles.warning as string,
+  synced: styles.success as string,
+  warning: styles.warning as string,
+  error: styles.error as string,
+};
+
+const STATUS_LABEL: Record<StatusBadgeStatus, string> = {
+  unmodified: 'Unmodified',
+  draft: 'Draft',
+  committed: 'Committed',
+  conflict: 'Conflict',
+  'pending-delete': 'Pending delete',
+  synced: 'Synced',
+  warning: 'Warning',
+  error: 'Error',
+};
+
+/**
+ * StatusBadge — compact inline status indicator for editor lists, draft
+ * workflows, and sync states.
+ */
+export function StatusBadge({
+  status,
+  children,
+  className,
+  'aria-label': ariaLabel,
+}: StatusBadgeProps) {
+  const label = children ?? STATUS_LABEL[status];
+
+  return (
+    <span
+      className={[styles.badge, STATUS_CLASS[status], className].filter(Boolean).join(' ')}
+      aria-label={ariaLabel}
+    >
+      <span className={styles.dot} aria-hidden="true" />
+      <span className={styles.label}>{label}</span>
+    </span>
+  );
+}

package/src/components/SystemBanner/SystemBanner.module.css

@@ -38,8 +38,10 @@
   transition: opacity 0.12s ease;
 }
 
-.dismiss:hover {
-  opacity: 1;
+@media (hover: hover) {
+  .dismiss:hover {
+    opacity: 1;
+  }
 }
 
 .dismiss:focus-visible {

package/src/components/Tabs/Tabs.module.css

@@ -44,6 +44,8 @@
   font-weight: var(--sv-font-weight-medium);
 }
 
-.inactive:hover {
-  color: var(--sv-color-text-primary);
+@media (hover: hover) {
+  .inactive:hover {
+    color: var(--sv-color-text-primary);
+  }
 }