@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/SplitMethodSelector/SplitMethodSelector.stories.tsx

@@ -1,33 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SplitMethodSelector, type SplitMethod } from './SplitMethodSelector';
-
-const meta = {
-  title: 'Components/SplitMethodSelector',
-  component: SplitMethodSelector,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'The four-way Equal/Amount/Percentage/Shares picker shared by any cost-splitting plugin. A thin SegmentedControl preset that centralizes the option list and labels.',
-      },
-    },
-  },
-  args: {
-    value: 'equal',
-    onChange: () => {},
-  },
-} satisfies Meta<typeof SplitMethodSelector>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function ControlledSelector() {
-  const [value, setValue] = useState<SplitMethod>('equal');
-  return <SplitMethodSelector value={value} onChange={setValue} />;
-}
-
-export const Default: Story = {
-  render: () => <ControlledSelector />,
-};

package/src/components/SplitMethodSelector/SplitMethodSelector.tsx

@@ -1,43 +0,0 @@
-'use client';
-
-import { SegmentedControl } from '../SegmentedControl/SegmentedControl';
-
-export type SplitMethod = 'equal' | 'amount' | 'percentage' | 'shares';
-
-export interface SplitMethodSelectorProps {
-  value: SplitMethod;
-  onChange: (value: SplitMethod) => void;
-  size?: 'sm' | 'md';
-  'aria-label'?: string;
-}
-
-const OPTIONS: { label: string; value: SplitMethod }[] = [
-  { label: 'Equal', value: 'equal' },
-  { label: 'Amount', value: 'amount' },
-  { label: 'Percentage', value: 'percentage' },
-  { label: 'Shares', value: 'shares' },
-];
-
-/**
- * SplitMethodSelector — the four-way equal/amount/percentage/shares picker
- * shared by any plugin that splits a cost between people. A thin
- * `SegmentedControl` preset: centralizes the option list and labels so every
- * expense-splitting plugin presents the same four choices in the same order,
- * instead of each one re-typing its own copy of this array.
- */
-export function SplitMethodSelector({
-  value,
-  onChange,
-  size = 'sm',
-  'aria-label': ariaLabel = 'Split method',
-}: SplitMethodSelectorProps) {
-  return (
-    <SegmentedControl
-      value={value}
-      onChange={onChange}
-      options={OPTIONS}
-      size={size}
-      aria-label={ariaLabel}
-    />
-  );
-}

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

@@ -1,85 +0,0 @@
-.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

@@ -1,160 +0,0 @@
-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

@@ -1,149 +0,0 @@
-'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

@@ -1,51 +0,0 @@
-// @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

@@ -1,59 +0,0 @@
-.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

@@ -1,74 +0,0 @@
-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>
-  ),
-};