@sovereignfs/ui 0.83.1 → 0.89.1

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: var(--sv-border-width-hairline) 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>
-  ),
-};

package/src/components/StatusBadge/StatusBadge.tsx

@@ -1,65 +0,0 @@
-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/StepStrip/StepStrip.module.css

@@ -1,53 +0,0 @@
-.strip {
-  display: flex;
-  align-items: stretch;
-  overflow-x: auto;
-}
-
-.step {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.connector {
-  width: var(--sv-space-4);
-  height: 2px;
-  flex-shrink: 0;
-  background: var(--sv-color-border);
-}
-
-.connectorDashed {
-  background-image: repeating-linear-gradient(
-    to right,
-    var(--sv-color-border) 0,
-    var(--sv-color-border) 4px,
-    transparent 4px,
-    transparent 7px
-  );
-}
-
-.addChip {
-  all: unset;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-1);
-  padding: var(--sv-space-3) var(--sv-space-4);
-  border: var(--sv-border-width-hairline) dashed var(--sv-color-border);
-  border-radius: var(--sv-radius-lg);
-  color: var(--sv-color-text-muted);
-  font-size: var(--sv-font-size-sm);
-  cursor: pointer;
-}
-
-.addChip:hover {
-  background: var(--sv-color-surface-sunken);
-  color: var(--sv-color-text-primary);
-}
-
-.addChip:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}

package/src/components/StepStrip/StepStrip.tsx

@@ -1,74 +0,0 @@
-import type { ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-import styles from './StepStrip.module.css';
-
-export interface StepStripItem {
-  id: string;
-}
-
-export interface StepStripProps<T extends StepStripItem> {
-  items: T[];
-  activeId: string | null;
-  /** Full control over each chip's content, click handling, and (if needed) drag-reorder wiring. */
-  renderItem: (item: T, state: { isActive: boolean; index: number }) => ReactNode;
-  /** Trailing dashed "add" chip — omit to render the strip with no add affordance. */
-  onAdd?: () => void;
-  addLabel?: string;
-  className?: string;
-  'aria-label'?: string;
-}
-
-/**
- * StepStrip — a horizontal, connected sequence of steps (a route or
- * itinerary strip): ordered chips joined by a thin connector line, with an
- * optional trailing dashed "add" chip. Purely presentational — it owns
- * layout and the connector lines, nothing else.
- *
- * Each chip's content, active styling, and click handling are entirely up
- * to `renderItem`; if a consumer needs drag-reorder, `renderItem` attaches
- * its own dnd-kit `useSortable` ref/listeners to whatever it returns. This
- * mirrors `DragHandleRow`'s existing split (DS owns chrome, consumer wires
- * dnd-kit via passed-through props) generalized for a horizontal,
- * handle-less strip where the whole rendered item — not a separate handle
- * icon — is both the click target and the drag surface.
- */
-export function StepStrip<T extends StepStripItem>({
-  items,
-  activeId,
-  renderItem,
-  onAdd,
-  addLabel = 'Add',
-  className,
-  'aria-label': ariaLabel,
-}: StepStripProps<T>) {
-  return (
-    <div
-      className={[styles.strip, className].filter(Boolean).join(' ')}
-      role="list"
-      aria-label={ariaLabel}
-    >
-      {items.map((item, index) => (
-        <div key={item.id} className={styles.step} role="listitem">
-          {renderItem(item, { isActive: item.id === activeId, index })}
-          {(index < items.length - 1 || onAdd) && (
-            <div
-              className={[
-                styles.connector,
-                index === items.length - 1 ? styles.connectorDashed : '',
-              ]
-                .filter(Boolean)
-                .join(' ')}
-              aria-hidden="true"
-            />
-          )}
-        </div>
-      ))}
-      {onAdd && (
-        <button type="button" className={styles.addChip} onClick={onAdd}>
-          <Icon name="plus" size="sm" aria-hidden={true} />
-          {addLabel}
-        </button>
-      )}
-    </div>
-  );
-}

package/src/components/SuggestionInput/SuggestionInput.module.css

@@ -1,103 +0,0 @@
-.input {
-  display: block;
-  width: 100%;
-  padding: var(--sv-space-2) var(--sv-space-3);
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1.5;
-  color: var(--sv-color-text-primary);
-  background-color: var(--sv-color-surface);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-md);
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-/* iOS Safari auto-zooms on focused inputs under 16px — see Input.module.css
-   for the full rationale; kept in sync here since this isn't built on Input. */
-@media (pointer: coarse) {
-  .input {
-    font-size: var(--sv-font-size-md);
-  }
-}
-
-.input::placeholder {
-  color: var(--sv-color-text-muted);
-}
-
-.input:focus-visible {
-  outline: none;
-  border-color: var(--sv-color-accent);
-  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
-}
-
-.input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.list {
-  list-style: none;
-  margin: 0;
-  padding: var(--sv-space-1);
-  max-height: 320px;
-  overflow-y: auto;
-}
-
-.status {
-  padding: var(--sv-space-2) var(--sv-space-3);
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-muted);
-}
-
-.option {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-2);
-  width: 100%;
-  padding: var(--sv-space-2) var(--sv-space-3);
-  border: none;
-  border-radius: var(--sv-radius-sm);
-  background: transparent;
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-primary);
-  text-align: left;
-  cursor: pointer;
-}
-
-.option:hover,
-.optionActive {
-  background: var(--sv-color-surface-sunken);
-}
-
-.optionIcon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.optionLabel {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.optionMeta {
-  flex-shrink: 0;
-  font-size: var(--sv-font-size-xs);
-  color: var(--sv-color-text-subtle);
-}
-
-.optionCreate {
-  font-style: italic;
-  color: var(--sv-color-text-muted);
-}
-
-.divider {
-  margin: var(--sv-space-1) var(--sv-space-2);
-  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
-}