@startsimpli/ui 0.4.50 → 0.4.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.50",
+  "version": "0.4.52",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -18,6 +18,7 @@
     "./blog": "./src/components/blog/index.ts",
     "./blog/resolve": "./src/components/blog/resolveArticle.ts",
     "./collection": "./src/components/collection/index.ts",
+    "./document-editor": "./src/components/document-editor/index.ts",
     "./email-editor": "./src/components/email-editor/index.ts",
     "./workflows": "./src/components/workflows/index.ts",
     "./workflows/styles": "./src/components/workflows/workflows.css",

package/src/catalog/catalog.ts

@@ -74,6 +74,52 @@ export const UI_CATALOG: CatalogEntry[] = [
     source: { export: 'KanbanBoard', from: '@startsimpli/ui' },
     configExample: { kind: 'kanban-board', type: '<typeKey>', title: 'Board' },
   },
+  {
+    id: 'pipeline-health',
+    category: 'widget',
+    title: 'Pipeline health',
+    description:
+      'A compact health card for one status type: how many records sit in each stage, plus a stuck/aging flag that pulls the card to a warning tone. Use on a system-health home to bubble up a content type\'s throughput at a glance (the pipeline funnel shows conversion; this shows health).',
+    dataNeeds: 'A type with a status/enum field.',
+    source: { export: 'PipelineHealth', from: '@startsimpli/ui' },
+    configExample: { kind: 'pipeline-health', type: '<typeKey>', title: 'Pipeline health' },
+  },
+  {
+    id: 'source-freshness',
+    category: 'widget',
+    title: 'Source freshness',
+    description:
+      'A health card listing upstream sources as fresh vs stale by their last-updated time — any stale feed pulls the card to a warning. Use to prove ongoing ingestion is actually flowing (a stale source is a bug, not coverage).',
+    dataNeeds: 'A type whose records carry a last-updated / last-fetched timestamp.',
+    source: { export: 'SourceFreshness', from: '@startsimpli/ui' },
+    configExample: { kind: 'source-freshness', type: '<typeKey>', title: 'Source freshness' },
+  },
+  {
+    id: 'delivery-health',
+    category: 'widget',
+    title: 'Delivery health',
+    description:
+      'A health card for scheduled deliverables: on-time / late / missed / upcoming counts derived from a type\'s scheduled and delivered date fields. Use for recurring outputs like weekly briefs.',
+    dataNeeds: 'A type with a scheduled-date and a delivered-date field.',
+    source: { export: 'DeliveryHealth', from: '@startsimpli/ui' },
+    configExample: {
+      kind: 'delivery-health',
+      type: '<typeKey>',
+      scheduledField: '<scheduled>',
+      deliveredField: '<delivered>',
+      title: 'Delivery',
+    },
+  },
+  {
+    id: 'attention',
+    category: 'widget',
+    title: 'Needs attention',
+    description:
+      'A cross-type queue of records that need a human — stuck records, drafts awaiting review. Empty is the healthy state. Use as the "what should I look at" panel on a system-health home.',
+    dataNeeds: 'Any types (flags records by status / age).',
+    source: { export: 'AttentionFeed', from: '@startsimpli/ui' },
+    configExample: { kind: 'attention', limit: 8, title: 'Needs attention' },
+  },
   {
     id: 'data-table',
     category: 'view',
@@ -126,6 +172,15 @@ export const UI_CATALOG: CatalogEntry[] = [
     dataNeeds: 'Any types.',
     source: { export: 'CommandPalette', from: '@startsimpli/ui' },
   },
+  {
+    id: 'document-editor',
+    category: 'component',
+    title: 'Document editor',
+    description:
+      "A Google-Docs-like editor over a record's sub-sections — long-text as markdown (edit/preview split), plain text with word count, structured key/value fields (with an SEO meta-description meter), and editable source lists. Controlled + debounced-autosave (the app owns persistence). Use to review + edit a multi-part content record (e.g. a marketing draft: blog + LinkedIn + SEO + sources); the read-only DraftReviewWorkspace is its compare/approve complement. Map schema→sections with sectionsFromRecord.",
+    dataNeeds: 'A type with long-text / structured (json) fields to edit (optionally a source-list field).',
+    source: { export: 'DocumentEditor', from: '@startsimpli/ui/document-editor' },
+  },
   {
     id: 'chat',
     category: 'component',

package/src/components/document-editor/DocumentEditor.tsx

@@ -0,0 +1,476 @@
+'use client';
+
+/**
+ * DocumentEditor — a Google-Docs-like editor over typed document sub-sections.
+ *
+ * The reusable surface a tenant app uses to review + edit a multi-part content
+ * record (e.g. a marketing draft = blog markdown + LinkedIn text + SEO fields +
+ * sources). Generic + schema-driven (see `./sections`), presentational, and
+ * CONTROLLED: the parent owns the section values (via `onChange`) and all
+ * persistence (`onSave` is debounced autosave — bring your own writer). It never
+ * fetches. Complements the read-only DraftReviewWorkspace.
+ */
+import * as React from 'react';
+import { Columns2, Eye, Pencil, Plus, Trash2, Loader2, Check, AlertCircle } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+import { MarkdownRenderer } from '../blog/MarkdownRenderer';
+import type { DocSection } from './types';
+
+export type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';
+
+export interface DocumentEditorProps {
+  sections: DocSection[];
+  /** Controlled per-section edit — the parent updates its section state. */
+  onChange?(key: string, value: unknown): void;
+  /** Debounced autosave (BYO persistence). Receives the current sections. */
+  onSave?(sections: DocSection[]): void | Promise<void>;
+  /** Autosave debounce, ms. Default 1200. */
+  autosaveMs?: number;
+  /** Render every section read-only (previews only). */
+  readOnly?: boolean;
+  /** Title / actions slot rendered in the header bar (e.g. a "Mark ready" button). */
+  header?: React.ReactNode;
+  className?: string;
+}
+
+function countWords(s: string): number {
+  const t = s.trim();
+  return t ? t.split(/\s+/).length : 0;
+}
+
+function asString(v: unknown): string {
+  return typeof v === 'string' ? v : v == null ? '' : String(v);
+}
+function asRecord(v: unknown): Record<string, string> {
+  if (v && typeof v === 'object' && !Array.isArray(v)) {
+    const out: Record<string, string> = {};
+    for (const [k, val] of Object.entries(v as Record<string, unknown>)) out[k] = asString(val);
+    return out;
+  }
+  return {};
+}
+function asList(v: unknown): string[] {
+  return Array.isArray(v) ? v.map(asString) : [];
+}
+
+/** A key like `meta_description` / `metaDescription` → an SEO description meter. */
+function isMetaDescriptionKey(key: string): boolean {
+  return /meta[_-]?description/i.test(key) || /^description$/i.test(key);
+}
+
+export function DocumentEditor({
+  sections,
+  onChange,
+  onSave,
+  autosaveMs = 1200,
+  readOnly = false,
+  header,
+  className,
+}: DocumentEditorProps) {
+  const [status, setStatus] = React.useState<SaveStatus>('idle');
+
+  // Serialize the section values so autosave fires only on a real content change.
+  const serialized = React.useMemo(
+    () => JSON.stringify(sections.map((s) => [s.key, s.value])),
+    [sections],
+  );
+
+  // Keep latest sections + onSave in refs so the debounce effect depends only on
+  // the serialized content (not on a fresh inline `onSave` identity each render).
+  const sectionsRef = React.useRef(sections);
+  sectionsRef.current = sections;
+  const onSaveRef = React.useRef(onSave);
+  onSaveRef.current = onSave;
+  const savedRef = React.useRef(serialized);
+
+  React.useEffect(() => {
+    if (readOnly) return;
+    const fn = onSaveRef.current;
+    if (!fn) return;
+    if (serialized === savedRef.current) return;
+
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      setStatus('saving');
+      try {
+        await fn(sectionsRef.current);
+        if (cancelled) return;
+        savedRef.current = serialized;
+        setStatus('saved');
+      } catch {
+        if (!cancelled) setStatus('error');
+      }
+    }, autosaveMs);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [serialized, readOnly, autosaveMs]);
+
+  const showBar = header != null || (!readOnly && !!onSave);
+
+  return (
+    <div className={cn('space-y-5', className)}>
+      {showBar && (
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="min-w-0">{header}</div>
+          {!readOnly && onSave && <SaveStatusPill status={status} />}
+        </div>
+      )}
+
+      <div className="space-y-6">
+        {sections.map((section) => (
+          <SectionEditor
+            key={section.key}
+            section={section}
+            readOnly={readOnly || !!section.readOnly}
+            onChange={onChange}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function SaveStatusPill({ status }: { status: SaveStatus }) {
+  const map: Record<SaveStatus, { label: string; tone: string; icon: React.ReactNode }> = {
+    idle: { label: '', tone: 'text-muted-foreground', icon: null },
+    saving: { label: 'Saving…', tone: 'text-muted-foreground', icon: <Loader2 className="h-3 w-3 animate-spin" /> },
+    saved: { label: 'Saved', tone: 'text-emerald-600', icon: <Check className="h-3 w-3" /> },
+    error: { label: 'Save failed', tone: 'text-rose-600', icon: <AlertCircle className="h-3 w-3" /> },
+  };
+  const s = map[status];
+  if (!s.label) return null;
+  return (
+    <span className={cn('inline-flex items-center gap-1.5 text-xs', s.tone)} role="status" aria-live="polite">
+      {s.icon}
+      {s.label}
+    </span>
+  );
+}
+
+function SectionEditor({
+  section,
+  readOnly,
+  onChange,
+}: {
+  section: DocSection;
+  readOnly: boolean;
+  onChange?(key: string, value: unknown): void;
+}) {
+  const emit = React.useCallback((value: unknown) => onChange?.(section.key, value), [onChange, section.key]);
+
+  return (
+    <section className="rounded-lg border border-border bg-card">
+      <SectionBody section={section} readOnly={readOnly} emit={emit} />
+    </section>
+  );
+}
+
+function SectionHeader({ section, right }: { section: DocSection; right?: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-2 border-b border-border px-4 py-2">
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{section.label}</h3>
+      {right}
+    </div>
+  );
+}
+
+function SectionBody({
+  section,
+  readOnly,
+  emit,
+}: {
+  section: DocSection;
+  readOnly: boolean;
+  emit: (value: unknown) => void;
+}) {
+  switch (section.kind) {
+    case 'markdown':
+      return <MarkdownSection section={section} readOnly={readOnly} emit={emit} />;
+    case 'text':
+      return <TextSection section={section} readOnly={readOnly} emit={emit} />;
+    case 'structured':
+      return <StructuredSection section={section} readOnly={readOnly} emit={emit} />;
+    case 'list':
+      return <ListSection section={section} readOnly={readOnly} emit={emit} />;
+    default:
+      return null;
+  }
+}
+
+type ViewMode = 'edit' | 'preview' | 'split';
+
+function MarkdownSection({
+  section,
+  readOnly,
+  emit,
+}: {
+  section: DocSection;
+  readOnly: boolean;
+  emit: (value: unknown) => void;
+}) {
+  const value = asString(section.value);
+  const [mode, setMode] = React.useState<ViewMode>('split');
+  const words = countWords(value);
+
+  if (readOnly) {
+    return (
+      <>
+        <SectionHeader section={section} right={<span className="text-xs text-muted-foreground">{words} words</span>} />
+        <div className="px-4 py-3">
+          {value ? (
+            <MarkdownRenderer content={value} />
+          ) : (
+            <p className="text-sm italic text-muted-foreground">Empty.</p>
+          )}
+        </div>
+      </>
+    );
+  }
+
+  const showEditor = mode === 'edit' || mode === 'split';
+  const showPreview = mode === 'preview' || mode === 'split';
+
+  return (
+    <>
+      <SectionHeader
+        section={section}
+        right={
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-muted-foreground">{words} words</span>
+            <ModeToggle mode={mode} onMode={setMode} />
+          </div>
+        }
+      />
+      <div className={cn('grid gap-0', mode === 'split' && 'lg:grid-cols-2 lg:divide-x lg:divide-border')}>
+        {showEditor && (
+          <textarea
+            value={value}
+            onChange={(e) => emit(e.target.value)}
+            placeholder={section.placeholder}
+            aria-label={`${section.label} markdown`}
+            className="min-h-[16rem] w-full resize-y border-0 bg-transparent p-4 font-mono text-sm leading-relaxed text-foreground outline-none placeholder:text-muted-foreground focus:ring-0"
+            spellCheck
+          />
+        )}
+        {showPreview && (
+          <div className="min-h-[16rem] overflow-x-auto p-4">
+            {value ? (
+              <MarkdownRenderer content={value} />
+            ) : (
+              <p className="text-sm italic text-muted-foreground">Nothing to preview yet.</p>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function ModeToggle({ mode, onMode }: { mode: ViewMode; onMode: (m: ViewMode) => void }) {
+  const opts: { value: ViewMode; label: string; icon: React.ReactNode; hideOnNarrow?: boolean }[] = [
+    { value: 'edit', label: 'Edit', icon: <Pencil className="h-3 w-3" /> },
+    { value: 'preview', label: 'Preview', icon: <Eye className="h-3 w-3" /> },
+    { value: 'split', label: 'Split', icon: <Columns2 className="h-3 w-3" />, hideOnNarrow: true },
+  ];
+  return (
+    <div className="inline-flex overflow-hidden rounded-md border border-border" role="group" aria-label="View mode">
+      {opts.map((o) => (
+        <button
+          key={o.value}
+          type="button"
+          onClick={() => onMode(o.value)}
+          aria-pressed={mode === o.value}
+          className={cn(
+            'inline-flex items-center gap-1 px-2 py-1 text-xs transition-colors',
+            o.hideOnNarrow && 'hidden lg:inline-flex',
+            mode === o.value ? 'bg-primary text-primary-foreground' : 'bg-transparent text-muted-foreground hover:bg-muted',
+          )}
+        >
+          {o.icon}
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function TextSection({
+  section,
+  readOnly,
+  emit,
+}: {
+  section: DocSection;
+  readOnly: boolean;
+  emit: (value: unknown) => void;
+}) {
+  const value = asString(section.value);
+  const words = countWords(value);
+  const chars = value.length;
+
+  return (
+    <>
+      <SectionHeader
+        section={section}
+        right={
+          <span className="text-xs text-muted-foreground">
+            {words} words · {chars} chars
+          </span>
+        }
+      />
+      <div className="px-4 py-3">
+        {readOnly ? (
+          value ? (
+            <p className="whitespace-pre-wrap text-sm text-foreground">{value}</p>
+          ) : (
+            <p className="text-sm italic text-muted-foreground">Empty.</p>
+          )
+        ) : (
+          <textarea
+            value={value}
+            onChange={(e) => emit(e.target.value)}
+            placeholder={section.placeholder}
+            aria-label={section.label}
+            className="min-h-[8rem] w-full resize-y rounded-md border border-border bg-background p-3 text-sm leading-relaxed text-foreground outline-none placeholder:text-muted-foreground focus:border-primary focus:ring-0"
+            spellCheck
+          />
+        )}
+      </div>
+    </>
+  );
+}
+
+function StructuredSection({
+  section,
+  readOnly,
+  emit,
+}: {
+  section: DocSection;
+  readOnly: boolean;
+  emit: (value: unknown) => void;
+}) {
+  const obj = asRecord(section.value);
+  const keys = Object.keys(obj);
+
+  const setField = (field: string, val: string) => emit({ ...obj, [field]: val });
+
+  return (
+    <>
+      <SectionHeader section={section} />
+      <div className="space-y-3 px-4 py-3">
+        {keys.length === 0 && <p className="text-sm italic text-muted-foreground">No fields.</p>}
+        {keys.map((field) => {
+          const fieldVal = obj[field];
+          const meta = isMetaDescriptionKey(field);
+          return (
+            <div key={field} className="grid gap-1 sm:grid-cols-[10rem_minmax(0,1fr)] sm:items-start sm:gap-3">
+              <label htmlFor={`${section.key}-${field}`} className="pt-1.5 text-xs font-medium text-muted-foreground">
+                {field.replace(/[_-]+/g, ' ')}
+              </label>
+              <div>
+                {readOnly ? (
+                  <p className="text-sm text-foreground">{fieldVal || '—'}</p>
+                ) : (
+                  <input
+                    id={`${section.key}-${field}`}
+                    value={fieldVal}
+                    onChange={(e) => setField(field, e.target.value)}
+                    className="w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-sm text-foreground outline-none focus:border-primary focus:ring-0"
+                  />
+                )}
+                {meta && <CharMeter value={fieldVal} good={[150, 160]} />}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+/** A subtle character-count meter with an optional "good" band hint (e.g. SEO meta 150–160). */
+function CharMeter({ value, good }: { value: string; good: [number, number] }) {
+  const len = value.length;
+  const [lo, hi] = good;
+  const tone = len === 0 ? 'text-muted-foreground' : len >= lo && len <= hi ? 'text-emerald-600' : 'text-amber-600';
+  return (
+    <p className={cn('mt-1 text-[11px]', tone)}>
+      {len} chars{good ? ` · aim ${lo}–${hi}` : ''}
+    </p>
+  );
+}
+
+function ListSection({
+  section,
+  readOnly,
+  emit,
+}: {
+  section: DocSection;
+  readOnly: boolean;
+  emit: (value: unknown) => void;
+}) {
+  const items = asList(section.value);
+
+  const setItem = (i: number, val: string) => emit(items.map((it, idx) => (idx === i ? val : it)));
+  const removeItem = (i: number) => emit(items.filter((_, idx) => idx !== i));
+  const addItem = () => emit([...items, '']);
+
+  if (readOnly) {
+    return (
+      <>
+        <SectionHeader section={section} right={<span className="text-xs text-muted-foreground">{items.length}</span>} />
+        <div className="px-4 py-3">
+          {items.length === 0 ? (
+            <p className="text-sm italic text-muted-foreground">None.</p>
+          ) : (
+            <ul className="list-disc space-y-1 pl-5 text-sm text-foreground">
+              {items.map((it, i) => (
+                <li key={i} className="break-words">
+                  {it}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <SectionHeader section={section} right={<span className="text-xs text-muted-foreground">{items.length}</span>} />
+      <div className="space-y-2 px-4 py-3">
+        {items.map((it, i) => (
+          <div key={i} className="flex items-center gap-2">
+            <input
+              value={it}
+              onChange={(e) => setItem(i, e.target.value)}
+              placeholder={section.placeholder}
+              aria-label={`${section.label} item ${i + 1}`}
+              className="w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-sm text-foreground outline-none focus:border-primary focus:ring-0"
+            />
+            <button
+              type="button"
+              onClick={() => removeItem(i)}
+              aria-label={`Remove item ${i + 1}`}
+              className="shrink-0 rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-rose-600"
+            >
+              <Trash2 className="h-4 w-4" />
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={addItem}
+          className="inline-flex items-center gap-1 rounded-md border border-dashed border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:border-primary hover:text-foreground"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Add
+        </button>
+      </div>
+    </>
+  );
+}

package/src/components/document-editor/__tests__/DocumentEditor.test.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+// MarkdownRenderer pulls react-markdown (ESM, not transformed from node_modules
+// by this package's jest config). The editor's own concern is wiring the preview,
+// not markdown rendering, so isolate it with a lightweight stand-in.
+jest.mock('../../blog/MarkdownRenderer', () => ({
+  MarkdownRenderer: ({ content }: { content: string }) =>
+    require('react').createElement('div', { 'data-testid': 'md-preview' }, content),
+}));
+
+import { DocumentEditor } from '../DocumentEditor';
+import type { DocSection } from '../types';
+
+function baseSections(): DocSection[] {
+  return [
+    { key: 'blog', label: 'Blog post', kind: 'markdown', value: 'hello world' },
+    { key: 'linkedin', label: 'LinkedIn', kind: 'text', value: 'a post' },
+    { key: 'seo', label: 'SEO', kind: 'structured', value: { meta_description: 'short', primary_keyword: 'kw' } },
+    { key: 'sources', label: 'Sources', kind: 'list', value: ['https://a.com'] },
+  ];
+}
+
+/** Controlled harness that mirrors how a consuming app wires the editor. */
+function Harness({
+  onSave,
+  autosaveMs,
+  readOnly,
+}: {
+  onSave?: (s: DocSection[]) => void | Promise<void>;
+  autosaveMs?: number;
+  readOnly?: boolean;
+}) {
+  const [sections, setSections] = React.useState<DocSection[]>(baseSections());
+  return (
+    <DocumentEditor
+      sections={sections}
+      readOnly={readOnly}
+      autosaveMs={autosaveMs}
+      onSave={onSave}
+      header={<h2>My draft</h2>}
+      onChange={(key, value) =>
+        setSections((prev) => prev.map((s) => (s.key === key ? { ...s, value } : s)))
+      }
+    />
+  );
+}
+
+describe('DocumentEditor', () => {
+  it('renders a header slot and every section label', () => {
+    render(<Harness />);
+    expect(screen.getByText('My draft')).toBeInTheDocument();
+    for (const label of ['Blog post', 'LinkedIn', 'SEO', 'Sources']) {
+      expect(screen.getByRole('heading', { name: label })).toBeInTheDocument();
+    }
+  });
+
+  it('markdown section shows a word count and a live preview alongside the editor', () => {
+    render(<Harness />);
+    expect(screen.getByText('2 words')).toBeInTheDocument();
+    // split view: an editable textarea AND the rendered preview text
+    expect(screen.getByLabelText('Blog post markdown')).toBeInTheDocument();
+    const previews = screen.getAllByText('hello world');
+    expect(previews.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('emits per-section edits through onChange (controlled)', () => {
+    render(<Harness />);
+    const textarea = screen.getByLabelText('LinkedIn') as HTMLTextAreaElement;
+    fireEvent.change(textarea, { target: { value: 'edited post' } });
+    expect((screen.getByLabelText('LinkedIn') as HTMLTextAreaElement).value).toBe('edited post');
+  });
+
+  it('structured section renders a field input and an SEO char meter on meta_description', () => {
+    render(<Harness />);
+    const metaInput = screen.getByLabelText('meta description') as HTMLInputElement;
+    expect(metaInput.value).toBe('short');
+    // the meta meter surfaces the aim band
+    expect(screen.getByText(/aim 150/)).toBeInTheDocument();
+    fireEvent.change(metaInput, { target: { value: 'new description' } });
+    expect((screen.getByLabelText('meta description') as HTMLInputElement).value).toBe('new description');
+  });
+
+  it('list section adds, edits and removes items', () => {
+    render(<Harness />);
+    expect(screen.getByLabelText('Sources item 1')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Add' }));
+    const item2 = screen.getByLabelText('Sources item 2') as HTMLInputElement;
+    fireEvent.change(item2, { target: { value: 'https://b.com' } });
+    expect((screen.getByLabelText('Sources item 2') as HTMLInputElement).value).toBe('https://b.com');
+    fireEvent.click(screen.getByRole('button', { name: 'Remove item 1' }));
+    expect(screen.queryByLabelText('Sources item 2')).not.toBeInTheDocument();
+    expect((screen.getByLabelText('Sources item 1') as HTMLInputElement).value).toBe('https://b.com');
+  });
+
+  it('debounces onSave after an edit and shows a Saved status', async () => {
+    const onSave = jest.fn().mockResolvedValue(undefined);
+    render(<Harness onSave={onSave} autosaveMs={20} />);
+    // no autosave before any edit
+    expect(onSave).not.toHaveBeenCalled();
+    fireEvent.change(screen.getByLabelText('LinkedIn'), { target: { value: 'changed' } });
+    await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
+    const saved = onSave.mock.calls[0][0] as DocSection[];
+    expect(saved.find((s) => s.key === 'linkedin')!.value).toBe('changed');
+    expect(await screen.findByText('Saved')).toBeInTheDocument();
+  });
+
+  it('surfaces a Save failed status when onSave rejects', async () => {
+    const onSave = jest.fn().mockRejectedValue(new Error('nope'));
+    render(<Harness onSave={onSave} autosaveMs={20} />);
+    fireEvent.change(screen.getByLabelText('LinkedIn'), { target: { value: 'boom' } });
+    expect(await screen.findByText('Save failed')).toBeInTheDocument();
+  });
+
+  it('readOnly renders previews only (no editable inputs) and skips autosave', async () => {
+    const onSave = jest.fn();
+    render(<Harness onSave={onSave} autosaveMs={10} readOnly />);
+    expect(screen.queryByLabelText('Blog post markdown')).not.toBeInTheDocument();
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    // markdown still renders as a preview
+    expect(screen.getAllByText('hello world').length).toBeGreaterThanOrEqual(1);
+    await new Promise((r) => setTimeout(r, 40));
+    expect(onSave).not.toHaveBeenCalled();
+  });
+});