@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/TagInput/TagInput.module.css

@@ -1,141 +0,0 @@
-.wrapper {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: var(--sv-space-1);
-}
-
-.control {
-  display: flex;
-  min-height: 40px;
-  width: 100%;
-  align-items: center;
-  gap: var(--sv-space-1);
-  flex-wrap: wrap;
-  padding: 5px var(--sv-space-2);
-  color: var(--sv-color-text-primary);
-  background: 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;
-}
-
-.control:focus-within {
-  border-color: var(--sv-color-accent);
-  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
-}
-
-.invalid {
-  border-color: var(--sv-color-error-border);
-}
-
-.invalid:focus-within {
-  border-color: var(--sv-color-error-border);
-  box-shadow: 0 0 0 2px var(--sv-color-error-border);
-}
-
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.tag {
-  display: inline-flex;
-  max-width: 100%;
-  min-height: 28px;
-  align-items: center;
-  gap: var(--sv-space-1);
-  padding-inline: var(--sv-space-2) 2px;
-  color: var(--sv-color-text-primary);
-  background: var(--sv-color-surface-sunken);
-  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-medium);
-}
-
-.tagLabel {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.removeButton {
-  display: inline-flex;
-  width: 22px;
-  height: 22px;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  color: var(--sv-color-text-muted);
-  background: transparent;
-  border: 0;
-  border-radius: var(--sv-radius-full);
-  cursor: pointer;
-  font: inherit;
-  line-height: 1;
-}
-
-@media (hover: hover) {
-  .removeButton:hover:not(:disabled) {
-    color: var(--sv-color-text-primary);
-    background: var(--sv-color-surface);
-  }
-}
-
-.removeButton:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 1px;
-}
-
-.removeButton:disabled {
-  cursor: not-allowed;
-}
-
-.input {
-  min-width: 120px;
-  flex: 1 1 140px;
-  height: 28px;
-  padding: 0 var(--sv-space-1);
-  color: var(--sv-color-text-primary);
-  background: transparent;
-  border: 0;
-  outline: 0;
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1.5;
-}
-
-.input::placeholder {
-  color: var(--sv-color-text-muted);
-}
-
-.input:disabled {
-  cursor: not-allowed;
-}
-
-.hint,
-.error {
-  margin: 0;
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-caption);
-  line-height: 1.4;
-}
-
-.hint {
-  color: var(--sv-color-text-muted);
-}
-
-.error {
-  color: var(--sv-color-error-text);
-}
-
-@media (pointer: coarse) {
-  .input {
-    font-size: var(--sv-font-size-md);
-  }
-}

package/src/components/TagInput/TagInput.stories.tsx

@@ -1,109 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { TagInput } from './TagInput';
-import { FormField } from '../FormField/FormField';
-
-const meta = {
-  title: 'Components/TagInput',
-  component: TagInput,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Controlled multi-value input for frontmatter tags, labels, and lightweight taxonomies.',
-      },
-    },
-  },
-  args: {
-    value: ['writing', 'launch'],
-    onChange: () => {},
-  },
-} satisfies Meta<typeof TagInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function ControlledTagInput({
-  initial = ['writing', 'launch'],
-  disabled = false,
-  error,
-}: {
-  initial?: string[];
-  disabled?: boolean;
-  error?: string;
-}) {
-  const [tags, setTags] = useState(initial);
-  return (
-    <TagInput
-      value={tags}
-      onChange={setTags}
-      placeholder="Add tag"
-      disabled={disabled}
-      error={error}
-      aria-label="Tags"
-    />
-  );
-}
-
-export const Default: Story = {
-  render: () => <ControlledTagInput />,
-};
-
-export const WithFormField: Story = {
-  render: () => {
-    const [tags, setTags] = useState(['plainwrite', 'frontmatter']);
-    return (
-      <FormField label="Tags" hint="Press Enter or comma to add a tag." id="story-tags">
-        {(field) => (
-          <TagInput
-            {...field}
-            value={tags}
-            onChange={setTags}
-            validateTag={(tag) =>
-              tag.length > 24 ? 'Tags must be 24 characters or fewer.' : undefined
-            }
-          />
-        )}
-      </FormField>
-    );
-  },
-};
-
-export const Error: Story = {
-  render: () => <ControlledTagInput error="At least one public tag is required." />,
-};
-
-export const Disabled: Story = {
-  render: () => <ControlledTagInput disabled />,
-};
-
-export const Keyboard: Story = {
-  render: () => {
-    const [tags, setTags] = useState<string[]>([]);
-    return (
-      <TagInput
-        value={tags}
-        onChange={setTags}
-        hint="Enter adds; comma separates; Backspace removes the last chip when the input is empty."
-        placeholder="Type and press Enter"
-        aria-label="Keyboard tag input"
-      />
-    );
-  },
-};
-
-export const LongContent: Story = {
-  render: () => (
-    <ControlledTagInput
-      initial={['editorial-calendar', 'launch', 'very-long-tag-name-that-still-clips', 'published']}
-    />
-  ),
-};
-
-export const Mobile: Story = {
-  parameters: {
-    viewport: { defaultViewport: 'mobile1' },
-  },
-  render: () => <ControlledTagInput initial={['mobile', 'touch', 'frontmatter']} />,
-};

package/src/components/TagInput/TagInput.tsx

@@ -1,174 +0,0 @@
-'use client';
-
-import type { KeyboardEvent, ClipboardEvent } from 'react';
-import { useMemo, useState } from 'react';
-import styles from './TagInput.module.css';
-
-export interface TagInputProps {
-  value: string[];
-  onChange: (value: string[]) => void;
-  id?: string;
-  name?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  required?: boolean;
-  error?: string;
-  hint?: string;
-  validateTag?: (tag: string, currentTags: string[]) => string | undefined;
-  separators?: RegExp;
-  className?: string;
-  'aria-describedby'?: string;
-  'aria-invalid'?: boolean;
-  'aria-label'?: string;
-}
-
-const DEFAULT_SEPARATORS = /[\n,]+/;
-
-const splitTags = (value: string, separators: RegExp) =>
-  value
-    .split(separators)
-    .map((tag) => tag.trim())
-    .filter(Boolean);
-
-/**
- * TagInput — controlled multi-value input for frontmatter tags, labels, and
- * lightweight taxonomies. Use inside FormField just like a native input.
- */
-export function TagInput({
-  value,
-  onChange,
-  id,
-  name,
-  placeholder = 'Add tag',
-  disabled = false,
-  required = false,
-  error,
-  hint,
-  validateTag,
-  separators = DEFAULT_SEPARATORS,
-  className,
-  'aria-describedby': ariaDescribedBy,
-  'aria-invalid': ariaInvalid,
-  'aria-label': ariaLabel,
-}: TagInputProps) {
-  const [draft, setDraft] = useState('');
-  const [localError, setLocalError] = useState<string | undefined>();
-  const message = error ?? localError ?? hint;
-  const messageId = message && id ? `${id}-tag-message` : undefined;
-  const describedBy = [ariaDescribedBy, messageId].filter(Boolean).join(' ') || undefined;
-  const normalized = useMemo(() => new Set(value.map((tag) => tag.toLocaleLowerCase())), [value]);
-
-  const addTags = (tags: string[]) => {
-    const next = [...value];
-    const nextNormalized = new Set(normalized);
-
-    for (const tag of tags) {
-      const normalizedTag = tag.toLocaleLowerCase();
-      const duplicate = nextNormalized.has(normalizedTag);
-      const validationMessage = duplicate
-        ? 'Tag already exists.'
-        : (validateTag?.(tag, next) ?? undefined);
-
-      if (validationMessage) {
-        setLocalError(validationMessage);
-        return;
-      }
-
-      next.push(tag);
-      nextNormalized.add(normalizedTag);
-    }
-
-    setLocalError(undefined);
-    setDraft('');
-    onChange(next);
-  };
-
-  const commitDraft = () => {
-    const tags = splitTags(draft, separators);
-    if (tags.length === 0) {
-      return;
-    }
-    addTags(tags);
-  };
-
-  const removeTag = (index: number) => {
-    setLocalError(undefined);
-    onChange(value.filter((_, tagIndex) => tagIndex !== index));
-  };
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' || event.key === ',') {
-      event.preventDefault();
-      commitDraft();
-    }
-
-    if (event.key === 'Backspace' && draft.length === 0 && value.length > 0) {
-      event.preventDefault();
-      removeTag(value.length - 1);
-    }
-  };
-
-  const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
-    const text = event.clipboardData.getData('text');
-    const tags = splitTags(text, separators);
-    if (tags.length <= 1) {
-      return;
-    }
-    event.preventDefault();
-    addTags(tags);
-  };
-
-  return (
-    <div className={[styles.wrapper, className].filter(Boolean).join(' ')}>
-      <div
-        className={[
-          styles.control,
-          disabled ? styles.disabled : undefined,
-          error || localError || ariaInvalid ? styles.invalid : undefined,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        {value.map((tag, index) => (
-          <span key={`${tag}-${index}`} className={styles.tag}>
-            <span className={styles.tagLabel}>{tag}</span>
-            <button
-              type="button"
-              className={styles.removeButton}
-              onClick={() => removeTag(index)}
-              disabled={disabled}
-              aria-label={`Remove ${tag}`}
-            >
-              ×
-            </button>
-          </span>
-        ))}
-        <input
-          id={id}
-          name={name}
-          className={styles.input}
-          value={draft}
-          placeholder={value.length === 0 ? placeholder : undefined}
-          disabled={disabled}
-          required={required && value.length === 0}
-          aria-describedby={describedBy}
-          aria-invalid={ariaInvalid ?? (Boolean(error || localError) || undefined)}
-          aria-label={ariaLabel}
-          onChange={(event) => setDraft(event.currentTarget.value)}
-          onKeyDown={handleKeyDown}
-          onBlur={commitDraft}
-          onPaste={handlePaste}
-        />
-      </div>
-      {message && (
-        <p
-          id={messageId}
-          className={error || localError ? styles.error : styles.hint}
-          role={error || localError ? 'alert' : undefined}
-        >
-          {message}
-        </p>
-      )}
-    </div>
-  );
-}

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

@@ -1,69 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { TagInput } from '../TagInput';
-
-afterEach(cleanup);
-
-describe('TagInput', () => {
-  it('adds a tag with Enter', () => {
-    const onChange = vi.fn();
-    render(<TagInput value={[]} onChange={onChange} aria-label="Tags" />);
-
-    const input = screen.getByLabelText('Tags');
-    fireEvent.change(input, { target: { value: 'launch' } });
-    fireEvent.keyDown(input, { key: 'Enter' });
-
-    expect(onChange).toHaveBeenCalledWith(['launch']);
-  });
-
-  it('removes the last tag with Backspace when the input is empty', () => {
-    const onChange = vi.fn();
-    render(<TagInput value={['draft', 'publish']} onChange={onChange} aria-label="Tags" />);
-
-    fireEvent.keyDown(screen.getByLabelText('Tags'), { key: 'Backspace' });
-
-    expect(onChange).toHaveBeenCalledWith(['draft']);
-  });
-
-  it('splits pasted comma-separated tags', () => {
-    const onChange = vi.fn();
-    render(<TagInput value={['draft']} onChange={onChange} aria-label="Tags" />);
-
-    fireEvent.paste(screen.getByLabelText('Tags'), {
-      clipboardData: {
-        getData: () => 'launch, release\nnotes',
-      },
-    });
-
-    expect(onChange).toHaveBeenCalledWith(['draft', 'launch', 'release', 'notes']);
-  });
-
-  it('shows validation messages and does not add invalid tags', () => {
-    const onChange = vi.fn();
-    render(
-      <TagInput
-        value={[]}
-        onChange={onChange}
-        aria-label="Tags"
-        validateTag={(tag) => (tag.length > 4 ? 'Tag is too long.' : undefined)}
-      />,
-    );
-
-    const input = screen.getByLabelText('Tags');
-    fireEvent.change(input, { target: { value: 'launch' } });
-    fireEvent.keyDown(input, { key: 'Enter' });
-
-    expect(screen.getByRole('alert').textContent).toBe('Tag is too long.');
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  it('renders removable chips with accessible names', () => {
-    const onChange = vi.fn();
-    render(<TagInput value={['draft']} onChange={onChange} aria-label="Tags" />);
-
-    fireEvent.click(screen.getByRole('button', { name: 'Remove draft' }));
-
-    expect(onChange).toHaveBeenCalledWith([]);
-  });
-});

package/src/components/Textarea/Textarea.module.css

@@ -1,47 +0,0 @@
-.textarea {
-  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);
-  resize: vertical;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-.textarea::placeholder {
-  color: var(--sv-color-text-muted);
-}
-
-.textarea:focus-visible {
-  outline: none;
-  border-color: var(--sv-color-accent);
-  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
-}
-
-.textarea:read-only {
-  background-color: var(--sv-color-surface-sunken);
-  color: var(--sv-color-text-muted);
-  border-color: var(--sv-color-border);
-  cursor: default;
-}
-
-.textarea:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  resize: none;
-}
-
-/* Height is driven by the `autoGrow` layout effect (Textarea.tsx), not the
-   user — resize: none avoids a drag handle that would fight it; overflow
-   hidden avoids a scrollbar flashing on between the old and new height. */
-.textareaAutoGrow {
-  overflow: hidden;
-  resize: none;
-}

package/src/components/Textarea/Textarea.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import { useLayoutEffect, useRef } from 'react';
-import type { TextareaHTMLAttributes } from 'react';
-import styles from './Textarea.module.css';
-
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  /** Grows the field's own height to fit its content as it's typed, instead
-   *  of scrolling internally or leaving the user to drag-resize — e.g. an
-   *  editable title that should read as a heading, not a fixed-size form
-   *  field. Disables manual resize (`resize: none`) since a height driven by
-   *  content and a user-draggable height would fight each other. `rows` is
-   *  still honoured as the starting/minimum height. */
-  autoGrow?: boolean;
-}
-
-/**
- * Textarea — the primitive multi-line text field. Presentational and
- * RSC-safe unless `autoGrow` is used (client-only, needs a layout
- * measurement). Forwards all native textarea props to the underlying
- * `<textarea>`. Styling references `--sv-*` tokens via CSS Modules; there
- * are no hardcoded values.
- */
-export function Textarea({ className, rows = 4, autoGrow = false, ...rest }: TextareaProps) {
-  const ref = useRef<HTMLTextAreaElement>(null);
-
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!autoGrow || !el) return;
-    el.style.height = 'auto';
-    el.style.height = `${el.scrollHeight}px`;
-  }, [autoGrow, rest.value, rest.defaultValue]);
-
-  const classes = [styles.textarea, autoGrow ? styles.textareaAutoGrow : '', className]
-    .filter(Boolean)
-    .join(' ');
-  return <textarea ref={ref} rows={rows} className={classes} {...rest} />;
-}

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

@@ -1,51 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Textarea } from '../Textarea';
-
-afterEach(cleanup);
-
-describe('Textarea', () => {
-  it('renders and forwards native props', () => {
-    render(<Textarea placeholder="Bio" defaultValue="Hello" />);
-    const textarea = screen.getByPlaceholderText('Bio') as HTMLTextAreaElement;
-    expect(textarea.value).toBe('Hello');
-  });
-
-  it('defaults to 4 rows', () => {
-    render(<Textarea aria-label="field" />);
-    expect((screen.getByLabelText('field') as HTMLTextAreaElement).rows).toBe(4);
-  });
-
-  it('honours an explicit rows value', () => {
-    render(<Textarea aria-label="field" rows={8} />);
-    expect((screen.getByLabelText('field') as HTMLTextAreaElement).rows).toBe(8);
-  });
-
-  it('is disabled when the disabled prop is set', () => {
-    render(<Textarea aria-label="field" disabled />);
-    expect((screen.getByLabelText('field') as HTMLTextAreaElement).disabled).toBe(true);
-  });
-
-  it('does not apply the auto-grow class by default', () => {
-    render(<Textarea aria-label="field" />);
-    expect(screen.getByLabelText('field').className).not.toMatch(/textareaAutoGrow/);
-  });
-
-  it('applies the auto-grow class and sizes height to scrollHeight when autoGrow is set', () => {
-    // jsdom has no real layout engine — scrollHeight is always 0, so it must
-    // be stubbed on the prototype before mount (same pattern as
-    // MessageScroller's own tests) for useLayoutEffect's synchronous
-    // on-mount measurement to read anything meaningful. This only proves the
-    // effect reads scrollHeight and writes it back as `style.height`, not
-    // that real pixel math is correct.
-    const scrollHeightSpy = vi
-      .spyOn(HTMLTextAreaElement.prototype, 'scrollHeight', 'get')
-      .mockReturnValue(88);
-    render(<Textarea aria-label="field" autoGrow defaultValue="hello" />);
-    const el = screen.getByLabelText('field') as HTMLTextAreaElement;
-    expect(el.className).toMatch(/textareaAutoGrow/);
-    expect(el.style.height).toBe('88px');
-    scrollHeightSpy.mockRestore();
-  });
-});

package/src/components/ThreeColumnLayout/ThreeColumnLayout.module.css

@@ -1,35 +0,0 @@
-.shell {
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-}
-
-.sidebar {
-  flex-shrink: 0;
-  overflow-y: auto;
-  background: var(--sv-color-surface-raised);
-  border-right: var(--sv-border-width-hairline) solid var(--sv-color-border);
-}
-
-/*
- * `display: none`, not `width: 0` — a zero-width flex item still paints its
- * own `border-right` as a 1px hairline down the edge of the viewport, which
- * reads as a stray line rather than a hidden column.
- */
-.sidebarHidden {
-  display: none;
-}
-
-.main {
-  flex: 1;
-  min-width: 0;
-  overflow-y: auto;
-  background: var(--sv-color-surface);
-}
-
-.detail {
-  flex-shrink: 0;
-  overflow-y: auto;
-  background: var(--sv-color-surface-raised);
-  border-left: var(--sv-border-width-hairline) solid var(--sv-color-border);
-}