@sovereignfs/ui 0.21.3 → 0.33.0

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);
+  }
 }

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

@@ -0,0 +1,141 @@
+.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: 1px 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: 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-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

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

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