@startsimpli/ui 0.4.47 → 0.4.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.47",
+  "version": "0.4.48",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -17,6 +17,7 @@
     "./theme/contract": "./theme/contract.css",
     "./blog": "./src/components/blog/index.ts",
     "./blog/resolve": "./src/components/blog/resolveArticle.ts",
+    "./collection": "./src/components/collection/index.ts",
     "./email-editor": "./src/components/email-editor/index.ts",
     "./workflows": "./src/components/workflows/index.ts",
     "./workflows/styles": "./src/components/workflows/workflows.css",
@@ -39,8 +40,8 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/auth": "0.4.29",
-    "@startsimpli/api": "0.5.44"
+    "@startsimpli/api": "0.5.44",
+    "@startsimpli/auth": "0.4.29"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/collection/DraftReviewWorkspace.tsx

@@ -0,0 +1,533 @@
+'use client';
+
+/**
+ * Draft review workspace — "compare the candidates, pick one, review it, mark it
+ * ready to post". A writer emits N candidate drafts per approved topic; the team
+ * compares a story's candidates, picks the one to publish, reads the full draft
+ * (blog + LinkedIn + SEO) with the isolated Content-Judge verdict + auto-checks,
+ * and marks the chosen final ready to post (posting stays a manual step).
+ * Client-injected + generic — no OGMC specifics.
+ */
+import { useMemo, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { ShieldCheck, AlertTriangle, ExternalLink, CheckCircle2, Circle } from 'lucide-react';
+
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { notify } from '../toast/use-notify';
+import { MarkdownRenderer } from '../blog/MarkdownRenderer';
+import type { CollectionClient, EntityRecord } from './types';
+import { readData, toCamelKey } from './data';
+import {
+  groupDrafts,
+  parseSources,
+  candidateTitle,
+  candidateIndex,
+  isChosen,
+  gradeWords,
+  wordTargets,
+  type DraftGroup,
+  type DraftSource,
+  type CheckStatus,
+} from './drafts';
+
+function field(r: EntityRecord, name: string): string {
+  const v = readData(r.data, name);
+  return v == null ? '' : String(v);
+}
+function obj(v: unknown): Record<string, unknown> {
+  return v && typeof v === 'object' && !Array.isArray(v) ? (v as Record<string, unknown>) : {};
+}
+function get(o: Record<string, unknown>, camel: string, snake: string): unknown {
+  return o[camel] ?? o[snake];
+}
+function hostOf(url: string): string {
+  try {
+    return new URL(/^https?:\/\//.test(url) ? url : `https://${url}`).hostname.replace(/^www\./, '');
+  } catch {
+    return '';
+  }
+}
+
+export interface DraftReviewWorkspaceProps {
+  client: CollectionClient;
+}
+
+export function DraftReviewWorkspace({ client }: DraftReviewWorkspaceProps) {
+  const qc = useQueryClient();
+  const typesQ = useQuery({ queryKey: ['schema-types'], queryFn: () => client.listTypes() });
+  const draftType = typesQ.data?.results.find((t) => t.key === 'draft');
+  const recordsQ = useQuery({
+    queryKey: ['entities', 'draft', 'all'],
+    queryFn: () => client.listAllEntities('draft'),
+    enabled: !!draftType,
+  });
+  const records = recordsQ.data ?? [];
+
+  const sourcesQ = useQuery({
+    queryKey: ['entities', 'source', 'all'],
+    queryFn: () => client.listAllEntities('source'),
+    enabled: !!draftType,
+  });
+  const tierByDomain = useMemo(() => {
+    const m = new Map<string, number>();
+    for (const s of sourcesQ.data ?? []) {
+      const d = String(readData(s.data, 'domain') ?? '').replace(/^www\./, '').toLowerCase();
+      const t = Number(readData(s.data, 'tier'));
+      if (d) m.set(d, Number.isFinite(t) ? t : 0);
+    }
+    return m;
+  }, [sourcesQ.data]);
+
+  const groups = useMemo(() => groupDrafts(records), [records]);
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [busyKey, setBusyKey] = useState<string | null>(null);
+
+  async function writeEntity(record: EntityRecord, changes: Record<string, unknown>) {
+    const data: Record<string, unknown> = { ...record.data };
+    for (const [k, v] of Object.entries(changes)) data[toCamelKey(k)] = v;
+    return client.updateEntity(record.id, { data });
+  }
+
+  async function pick(group: DraftGroup, cand: EntityRecord) {
+    setBusyKey(group.key);
+    try {
+      await Promise.all(
+        group.candidates.map((c) =>
+          writeEntity(c, {
+            chosen: String(c.id) === String(cand.id),
+            status: String(c.id) === String(cand.id) ? 'selected' : field(c, 'status') === 'ready' ? 'ready' : '',
+          }),
+        ),
+      );
+      await qc.invalidateQueries({ queryKey: ['entities', 'draft'] });
+    } catch (err) {
+      notify.error(err instanceof Error ? err.message : 'Could not save the pick.');
+    } finally {
+      setBusyKey(null);
+    }
+  }
+
+  async function markReady(record: EntityRecord) {
+    setBusyKey(String(record.id));
+    try {
+      await writeEntity(record, { status: 'ready', chosen: true });
+      await qc.invalidateQueries({ queryKey: ['entities', 'draft'] });
+    } catch (err) {
+      notify.error(err instanceof Error ? err.message : 'Could not mark ready.');
+    } finally {
+      setBusyKey(null);
+    }
+  }
+
+  if (typesQ.isLoading || recordsQ.isLoading) {
+    return <p className="text-sm text-gray-500">Loading drafts…</p>;
+  }
+  if (!draftType) {
+    return <p className="text-sm text-gray-500">No “draft” type is defined for this app.</p>;
+  }
+
+  const pickedCount = groups.filter((g) => g.chosen).length;
+  const readyCount = groups.filter((g) => g.ready).length;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-end justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Draft review</h1>
+          <p className="text-sm text-gray-500">
+            Each story has a few AI-written candidates. Compare them, pick the one to publish, and check it against the
+            judge before marking it ready.
+          </p>
+        </div>
+        <span className="text-sm text-gray-500">
+          {groups.length} stories · {pickedCount} picked · {readyCount} ready to post
+        </span>
+      </div>
+
+      {groups.length === 0 ? (
+        <p className="rounded-lg border border-dashed border-gray-300 p-8 text-center text-sm text-gray-500">
+          No drafts yet. Move a topic to “ready” and the writer will generate candidates here.
+        </p>
+      ) : (
+        <ol className="space-y-4">
+          {groups.map((g) => (
+            <StoryGroup
+              key={g.key}
+              group={g}
+              tierByDomain={tierByDomain}
+              openId={openId}
+              onToggleOpen={(id) => setOpenId((cur) => (cur === id ? null : id))}
+              onPick={pick}
+              onMarkReady={markReady}
+              busy={busyKey === g.key}
+              busyId={busyKey}
+            />
+          ))}
+        </ol>
+      )}
+    </div>
+  );
+}
+
+function StoryGroup({
+  group,
+  tierByDomain,
+  openId,
+  onToggleOpen,
+  onPick,
+  onMarkReady,
+  busy,
+  busyId,
+}: {
+  group: DraftGroup;
+  tierByDomain: Map<string, number>;
+  openId: string | null;
+  onToggleOpen: (id: string) => void;
+  onPick: (g: DraftGroup, c: EntityRecord) => Promise<void>;
+  onMarkReady: (c: EntityRecord) => Promise<void>;
+  busy: boolean;
+  busyId: string | null;
+}) {
+  const headSources = parseSources(readData(group.candidates[0].data, 'sources'));
+  return (
+    <li className="rounded-lg border border-border bg-card p-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <h2 className="text-base font-semibold text-gray-900">{group.label}</h2>
+        {group.contentType && (
+          <Badge variant="secondary" className="text-xs">
+            {group.contentType.replace(/_/g, ' ')}
+          </Badge>
+        )}
+        <span className="text-xs text-gray-400">
+          {group.candidates.length} candidate{group.candidates.length === 1 ? '' : 's'}
+        </span>
+        {group.ready && <Badge className="bg-emerald-600 text-xs text-white">ready to post</Badge>}
+      </div>
+
+      <SourceChips sources={headSources} tierByDomain={tierByDomain} />
+
+      <div className="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {group.candidates.map((c) => (
+          <CandidateCard
+            key={String(c.id)}
+            record={c}
+            contentType={group.contentType}
+            open={openId === String(c.id)}
+            onToggle={() => onToggleOpen(String(c.id))}
+            onPick={() => onPick(group, c)}
+            picking={busy}
+          />
+        ))}
+      </div>
+
+      {group.candidates
+        .filter((c) => openId === String(c.id))
+        .map((c) => (
+          <ContentReview
+            key={`rev-${c.id}`}
+            record={c}
+            contentType={group.contentType}
+            onMarkReady={() => onMarkReady(c)}
+            marking={busyId === String(c.id)}
+          />
+        ))}
+    </li>
+  );
+}
+
+function CandidateCard({
+  record,
+  contentType,
+  open,
+  onToggle,
+  onPick,
+  picking,
+}: {
+  record: EntityRecord;
+  contentType: string;
+  open: boolean;
+  onToggle: () => void;
+  onPick: () => void;
+  picking: boolean;
+}) {
+  const chosen = isChosen(record);
+  const status = field(record, 'status');
+  const preview = field(record, 'blog').slice(0, 150);
+  const checks = obj(readData(record.data, 'auto_checks'));
+  const blogWords = Number(get(checks, 'blogWords', 'blog_words')) || 0;
+  const target = wordTargets(contentType).blog;
+  return (
+    <div className={`flex flex-col rounded-md border p-3 ${chosen ? 'border-emerald-400 bg-emerald-50/40' : 'border-border bg-white'}`}>
+      <div className="mb-1 flex items-center justify-between">
+        <span className="text-[11px] font-semibold uppercase tracking-wide text-gray-400">Candidate {candidateIndex(record) || '—'}</span>
+        {status === 'ready' ? (
+          <Badge className="bg-emerald-600 text-[10px] text-white">ready</Badge>
+        ) : chosen ? (
+          <Badge className="bg-emerald-100 text-[10px] text-emerald-700">picked</Badge>
+        ) : null}
+      </div>
+      <p className="line-clamp-2 text-sm font-medium text-gray-900">{candidateTitle(record)}</p>
+      <p className="mt-1 line-clamp-3 text-xs text-gray-500">{preview}…</p>
+
+      <div className="mt-2 flex flex-wrap gap-1">
+        <WordChip label="blog" count={blogWords} status={gradeWords(blogWords, target)} />
+        <JudgeChip record={record} />
+      </div>
+
+      <div className="mt-3 flex gap-2">
+        <Button size="sm" variant={chosen ? 'secondary' : 'default'} disabled={picking} onClick={onPick} className="text-xs">
+          {chosen ? (
+            <>
+              <CheckCircle2 className="mr-1 h-3.5 w-3.5" /> Picked
+            </>
+          ) : (
+            <>
+              <Circle className="mr-1 h-3.5 w-3.5" /> Pick
+            </>
+          )}
+        </Button>
+        <Button size="sm" variant="outline" onClick={onToggle} className="text-xs">
+          {open ? 'Hide' : 'Review'}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function ContentReview({
+  record,
+  contentType,
+  onMarkReady,
+  marking,
+}: {
+  record: EntityRecord;
+  contentType: string;
+  onMarkReady: () => void;
+  marking: boolean;
+}) {
+  const blog = field(record, 'blog');
+  const linkedin = field(record, 'linkedin');
+  const seo = obj(readData(record.data, 'seo'));
+  const judge = obj(readData(record.data, 'judge_verdict'));
+  const checks = obj(readData(record.data, 'auto_checks'));
+  const ready = field(record, 'status') === 'ready';
+
+  const tags = ((): string[] => {
+    const t = seo.tags;
+    if (Array.isArray(t)) return t.map(String);
+    if (typeof t === 'string') return t.split(',').map((s) => s.trim()).filter(Boolean);
+    return [];
+  })();
+
+  const targets = wordTargets(contentType);
+  const blogWords = Number(get(checks, 'blogWords', 'blog_words')) || 0;
+  const liWords = Number(get(checks, 'linkedinWords', 'linkedin_words')) || 0;
+  const hype = get(checks, 'hypeFlags', 'hype_flags');
+  const approvedSources = get(checks, 'approvedSources', 'approved_sources');
+
+  const issues = Array.isArray(judge.issues) ? (judge.issues as Record<string, unknown>[]) : [];
+  const verdict = String(judge.verdict ?? '');
+  const summary = String(judge.summary ?? '');
+  const scores = obj(judge.scores);
+
+  return (
+    <div className="mt-4 rounded-lg border border-border bg-gray-50/60 p-4">
+      <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_20rem]">
+        <div className="min-w-0 space-y-4">
+          <section>
+            <SectionLabel>Blog post</SectionLabel>
+            {blog ? (
+              <div className="rounded-md border border-border bg-white p-4">
+                <MarkdownRenderer content={blog} />
+              </div>
+            ) : (
+              <Empty>No blog body.</Empty>
+            )}
+          </section>
+
+          {linkedin && (
+            <section>
+              <SectionLabel>LinkedIn post</SectionLabel>
+              <p className="whitespace-pre-wrap rounded-md border border-border bg-white p-4 text-sm text-gray-800">{linkedin}</p>
+            </section>
+          )}
+
+          {(seo.metaDescription || seo.meta_description || seo.primaryKeyword || seo.primary_keyword || tags.length > 0) && (
+            <section>
+              <SectionLabel>SEO</SectionLabel>
+              <div className="space-y-1.5 rounded-md border border-border bg-white p-4 text-sm">
+                <p>
+                  <span className="text-gray-400">Meta:</span> {String(get(seo, 'metaDescription', 'meta_description') ?? '—')}
+                </p>
+                <p>
+                  <span className="text-gray-400">Keyword:</span> {String(get(seo, 'primaryKeyword', 'primary_keyword') ?? '—')}
+                </p>
+                {tags.length > 0 && (
+                  <div className="flex flex-wrap gap-1 pt-1">
+                    {tags.map((t) => (
+                      <Badge key={t} variant="outline" className="text-[10px]">
+                        {t}
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </section>
+          )}
+        </div>
+
+        <div className="space-y-4">
+          <section>
+            <SectionLabel>Content judge</SectionLabel>
+            <div className="space-y-2 rounded-md border border-border bg-white p-3">
+              <div className="flex items-center gap-2">
+                <VerdictBadge verdict={verdict} issueCount={issues.length} />
+                {summary && <span className="text-xs text-gray-600">{summary}</span>}
+              </div>
+              {Object.keys(scores).length > 0 && (
+                <div className="flex flex-wrap gap-1">
+                  {Object.entries(scores).map(([k, v]) => (
+                    <Badge key={k} variant="outline" className="text-[10px]">
+                      {k.replace(/_/g, ' ')} {String(v)}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+              {issues.length === 0 ? (
+                <p className="flex items-center gap-1 text-xs text-emerald-700">
+                  <ShieldCheck className="h-3.5 w-3.5" /> No issues flagged.
+                </p>
+              ) : (
+                <ul className="space-y-2">
+                  {issues.map((it, i) => (
+                    <li key={i} className="rounded border border-amber-200 bg-amber-50 p-2 text-xs">
+                      <div className="mb-0.5 flex items-center gap-1.5">
+                        <AlertTriangle className="h-3 w-3 text-amber-600" />
+                        {it.severity ? <SeverityBadge severity={String(it.severity)} /> : null}
+                        {it.guardrail ? <span className="font-medium text-amber-800">{String(it.guardrail)}</span> : null}
+                      </div>
+                      {it.problem ? <p className="text-gray-700">{String(it.problem)}</p> : null}
+                      {it.fix ? <p className="mt-1 text-gray-500">Fix: {String(it.fix)}</p> : null}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </section>
+
+          <section>
+            <SectionLabel>Auto-checks</SectionLabel>
+            <div className="flex flex-wrap gap-1.5 rounded-md border border-border bg-white p-3">
+              <WordChip label="blog" count={blogWords} status={gradeWords(blogWords, targets.blog)} />
+              <WordChip label="linkedin" count={liWords} status={gradeWords(liWords, targets.linkedin)} />
+              {Array.isArray(hype) && (
+                <Badge variant="outline" className={`text-[10px] ${hype.length === 0 ? 'text-emerald-700' : 'text-amber-700'}`}>
+                  {hype.length === 0 ? 'no hype' : `${hype.length} hype flag${hype.length === 1 ? '' : 's'}`}
+                </Badge>
+              )}
+              {approvedSources != null && (
+                <Badge variant="outline" className={`text-[10px] ${approvedSources ? 'text-emerald-700' : 'text-rose-700'}`}>
+                  sources {approvedSources ? 'approved' : 'unverified'}
+                </Badge>
+              )}
+            </div>
+          </section>
+
+          <Button onClick={onMarkReady} disabled={marking || ready} className="w-full">
+            {ready ? (
+              <>
+                <CheckCircle2 className="mr-1.5 h-4 w-4" /> Ready to post
+              </>
+            ) : marking ? (
+              'Saving…'
+            ) : (
+              'Mark ready to post'
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SourceChips({ sources, tierByDomain }: { sources: DraftSource[]; tierByDomain: Map<string, number> }) {
+  if (sources.length === 0) {
+    return (
+      <p className="mt-2 flex items-center gap-1 text-xs font-medium text-amber-600">
+        <AlertTriangle className="h-3.5 w-3.5" /> No sources — needs verification
+      </p>
+    );
+  }
+  return (
+    <div className="mt-2 flex flex-wrap items-center gap-1.5">
+      <span className="text-xs text-gray-400">Sources:</span>
+      {sources.map((s, i) => {
+        const host = hostOf(s.url);
+        const tier = host ? tierByDomain.get(host.toLowerCase()) : undefined;
+        const href = /^https?:\/\//.test(s.url) ? s.url : host ? `https://${s.url}` : undefined;
+        const chip = (
+          <span className="inline-flex items-center gap-1 rounded-full border border-border bg-white px-2 py-0.5 text-xs text-gray-700">
+            {tier === 1 && <ShieldCheck className="h-3 w-3 text-emerald-600" />}
+            <span className="max-w-[12rem] truncate">{s.outlet || host || s.url}</span>
+            {tier != null ? (
+              <span className={`rounded px-1 text-[10px] font-semibold ${tier === 1 ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-500'}`}>T{tier}</span>
+            ) : (
+              <span className="rounded bg-amber-100 px-1 text-[10px] font-semibold text-amber-700">unlisted</span>
+            )}
+            {href && <ExternalLink className="h-3 w-3 text-gray-400" />}
+          </span>
+        );
+        return href ? (
+          <a key={i} href={href} target="_blank" rel="noreferrer" className="hover:opacity-80">
+            {chip}
+          </a>
+        ) : (
+          <span key={i}>{chip}</span>
+        );
+      })}
+    </div>
+  );
+}
+
+function JudgeChip({ record }: { record: EntityRecord }) {
+  const judge = obj(readData(record.data, 'judge_verdict'));
+  const verdict = String(judge.verdict ?? '');
+  const issues = Array.isArray(judge.issues) ? (judge.issues as unknown[]).length : 0;
+  if (verdict === 'accept') return <Badge variant="outline" className="text-[10px] text-emerald-700">judge: accept</Badge>;
+  if (verdict && verdict !== 'accept') return <Badge variant="outline" className="text-[10px] text-rose-700">judge: {verdict}</Badge>;
+  if (issues > 0) return <Badge variant="outline" className="text-[10px] text-amber-700">{issues} issue{issues === 1 ? '' : 's'}</Badge>;
+  return <Badge variant="outline" className="text-[10px] text-gray-500">unjudged</Badge>;
+}
+
+function WordChip({ label, count, status }: { label: string; count: number; status: CheckStatus }) {
+  if (status === 'none' && count === 0) return null;
+  const tone = status === 'ok' ? 'text-emerald-700' : status === 'none' ? 'text-gray-500' : 'text-amber-700';
+  return (
+    <Badge variant="outline" className={`text-[10px] ${tone}`}>
+      {label} {count}w{status === 'low' ? ' ↓' : status === 'high' ? ' ↑' : ''}
+    </Badge>
+  );
+}
+
+function VerdictBadge({ verdict, issueCount }: { verdict: string; issueCount: number }) {
+  if (verdict === 'accept') return <Badge className="bg-emerald-600 text-xs text-white">accept</Badge>;
+  if (verdict) return <Badge className="bg-rose-600 text-xs text-white">{verdict}</Badge>;
+  return <Badge className={`text-xs ${issueCount ? 'bg-amber-500 text-white' : 'bg-gray-400 text-white'}`}>{issueCount ? `${issueCount} issue${issueCount === 1 ? '' : 's'}` : 'reviewed'}</Badge>;
+}
+
+function SeverityBadge({ severity }: { severity: string }) {
+  const map: Record<string, string> = {
+    high: 'bg-rose-100 text-rose-700',
+    medium: 'bg-amber-100 text-amber-700',
+    low: 'bg-gray-100 text-gray-600',
+  };
+  return <span className={`rounded px-1 text-[10px] font-semibold ${map[severity] ?? map.low}`}>{severity}</span>;
+}
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return <p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400">{children}</p>;
+}
+function Empty({ children }: { children: React.ReactNode }) {
+  return <p className="rounded-md border border-dashed border-gray-300 p-3 text-xs text-gray-400">{children}</p>;
+}

package/src/components/collection/TopicReviewWorkspace.tsx

@@ -0,0 +1,343 @@
+'use client';
+
+/**
+ * Topic review workspace — the "live-ranked list": topics ranked by ai_rank,
+ * triaged fast without a drawer (good/bad/edit verdict, status move, team note).
+ * Rejected sink to the bottom (kept, not deleted — a persistent avoid-list);
+ * written drop into a Done section. Click a title for the app-provided full
+ * editor (renderDetail). Generic — the controlled-vocab markets + the detail
+ * drawer are injected by the consumer.
+ */
+import { useMemo, useState, type ReactNode } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { ChevronDown, ChevronRight, ThumbsUp, ThumbsDown, PencilLine, ExternalLink, AlertTriangle, ShieldCheck } from 'lucide-react';
+
+import { Button } from '../ui/button';
+import { Textarea } from '../ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
+import { notify } from '../toast/use-notify';
+import type { CollectionClient, EntityRecord, EntityTypeDef } from './types';
+import { readData, toCamelKey } from './data';
+
+const STATUSES = ['suggested', 'ready', 'rejected', 'written'] as const;
+const VERDICTS = [
+  { value: 'good', label: 'Good', icon: ThumbsUp, on: 'bg-emerald-600 text-white border-emerald-600' },
+  { value: 'bad', label: 'Bad', icon: ThumbsDown, on: 'bg-rose-600 text-white border-rose-600' },
+  { value: 'edit', label: 'Edit', icon: PencilLine, on: 'bg-amber-500 text-white border-amber-500' },
+] as const;
+
+function field(r: EntityRecord, name: string): string {
+  const v = readData(r.data, name);
+  return v == null ? '' : String(v);
+}
+function rankOf(r: EntityRecord): number {
+  const n = Number(readData(r.data, 'ai_rank'));
+  return Number.isFinite(n) ? n : 0;
+}
+function hostOf(url: string): string {
+  try {
+    return new URL(/^https?:\/\//.test(url) ? url : `https://${url}`).hostname.replace(/^www\./, '');
+  } catch {
+    return '';
+  }
+}
+
+export interface TopicReviewWorkspaceProps {
+  client: CollectionClient;
+  /** Controlled-vocab markets locking the market dropdown (kills value drift). */
+  markets?: string[];
+  /** Render the app's full-record editor when a title is clicked (optional). */
+  renderDetail?: (record: EntityRecord, type: EntityTypeDef, onClose: () => void, onSaved: () => void) => ReactNode;
+}
+
+export function TopicReviewWorkspace({ client, markets = [], renderDetail }: TopicReviewWorkspaceProps) {
+  const qc = useQueryClient();
+  const typesQ = useQuery({ queryKey: ['schema-types'], queryFn: () => client.listTypes() });
+  const topicType = typesQ.data?.results.find((t) => t.key === 'topic');
+  const recordsQ = useQuery({
+    queryKey: ['entities', 'topic', 'all'],
+    queryFn: () => client.listAllEntities('topic'),
+    enabled: !!topicType,
+  });
+  const records = recordsQ.data ?? [];
+
+  const sourcesQ = useQuery({
+    queryKey: ['entities', 'source', 'all'],
+    queryFn: () => client.listAllEntities('source'),
+    enabled: !!topicType,
+  });
+  const tierByDomain = useMemo(() => {
+    const m = new Map<string, number>();
+    for (const s of sourcesQ.data ?? []) {
+      const d = String(readData(s.data, 'domain') ?? '').replace(/^www\./, '').toLowerCase();
+      const t = Number(readData(s.data, 'tier'));
+      if (d) m.set(d, Number.isFinite(t) ? t : 0);
+    }
+    return m;
+  }, [sourcesQ.data]);
+
+  const [selected, setSelected] = useState<EntityRecord | null>(null);
+  const [showRejected, setShowRejected] = useState(false);
+  const [showWritten, setShowWritten] = useState(false);
+
+  const { active, written, rejected } = useMemo(() => {
+    const a: EntityRecord[] = [];
+    const w: EntityRecord[] = [];
+    const rej: EntityRecord[] = [];
+    for (const r of records) {
+      const s = field(r, 'status');
+      if (s === 'rejected') rej.push(r);
+      else if (s === 'written') w.push(r);
+      else a.push(r);
+    }
+    const byRank = (x: EntityRecord, y: EntityRecord) => rankOf(y) - rankOf(x);
+    return { active: a.sort(byRank), written: w.sort(byRank), rejected: rej.sort(byRank) };
+  }, [records]);
+
+  async function patch(record: EntityRecord, changes: Record<string, unknown>) {
+    const data: Record<string, unknown> = { ...record.data };
+    for (const [k, v] of Object.entries(changes)) data[toCamelKey(k)] = v;
+    try {
+      await client.updateEntity(record.id, { data });
+      await qc.invalidateQueries({ queryKey: ['entities', 'topic'] });
+    } catch (err) {
+      notify.error(err instanceof Error ? err.message : 'Could not save.');
+    }
+  }
+
+  if (typesQ.isLoading || recordsQ.isLoading) {
+    return <p className="text-sm text-gray-500">Loading topics…</p>;
+  }
+  if (!topicType) {
+    return <p className="text-sm text-gray-500">No “topic” type is defined for this app.</p>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-end justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Topic review</h1>
+          <p className="text-sm text-gray-500">
+            Ranked by AI. Rate each topic, jot a note, and move it along — rejected sink to the bottom.
+          </p>
+        </div>
+        <span className="text-sm text-gray-500">
+          {active.length} to review · {written.length} written · {rejected.length} rejected
+        </span>
+      </div>
+
+      {active.length === 0 ? (
+        <p className="rounded-lg border border-dashed border-gray-300 p-8 text-center text-sm text-gray-500">
+          Nothing to review right now.
+        </p>
+      ) : (
+        <ol className="space-y-3">
+          {active.map((r, i) => (
+            <TopicRow key={String(r.id)} rank={i + 1} record={r} markets={markets} onOpen={() => setSelected(r)} onPatch={patch} tierByDomain={tierByDomain} />
+          ))}
+        </ol>
+      )}
+
+      {written.length > 0 && (
+        <Section label={`Written (${written.length})`} open={showWritten} onToggle={() => setShowWritten((v) => !v)}>
+          <ol className="space-y-3">
+            {written.map((r) => (
+              <TopicRow key={String(r.id)} record={r} markets={markets} onOpen={() => setSelected(r)} onPatch={patch} tierByDomain={tierByDomain} muted />
+            ))}
+          </ol>
+        </Section>
+      )}
+
+      {rejected.length > 0 && (
+        <Section label={`Rejected (${rejected.length})`} open={showRejected} onToggle={() => setShowRejected((v) => !v)}>
+          <ol className="space-y-3">
+            {rejected.map((r) => (
+              <TopicRow key={String(r.id)} record={r} markets={markets} onOpen={() => setSelected(r)} onPatch={patch} tierByDomain={tierByDomain} muted />
+            ))}
+          </ol>
+        </Section>
+      )}
+
+      {selected && renderDetail?.(selected, topicType, () => setSelected(null), () => recordsQ.refetch())}
+    </div>
+  );
+}
+
+function Section({ label, open, onToggle, children }: { label: string; open: boolean; onToggle: () => void; children: ReactNode }) {
+  return (
+    <div>
+      <button type="button" onClick={onToggle} className="flex items-center gap-1.5 text-sm font-semibold text-gray-500 hover:text-gray-900">
+        {open ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        {label}
+      </button>
+      {open && <div className="mt-3">{children}</div>}
+    </div>
+  );
+}
+
+function TopicRow({
+  record,
+  rank,
+  markets,
+  onOpen,
+  onPatch,
+  tierByDomain,
+  muted,
+}: {
+  record: EntityRecord;
+  rank?: number;
+  markets: string[];
+  onOpen: () => void;
+  onPatch: (r: EntityRecord, changes: Record<string, unknown>) => Promise<void>;
+  tierByDomain: Map<string, number>;
+  muted?: boolean;
+}) {
+  const title = field(record, 'title') || record.name || `#${record.id}`;
+  const angle = field(record, 'angle');
+  const market = field(record, 'market');
+  const contentType = field(record, 'content_type');
+  const status = field(record, 'status') || 'suggested';
+  const verdict = field(record, 'team_verdict');
+  const [noteOpen, setNoteOpen] = useState(false);
+  const [note, setNote] = useState(field(record, 'team_notes'));
+  const [savingNote, setSavingNote] = useState(false);
+
+  async function saveNote() {
+    setSavingNote(true);
+    await onPatch(record, { team_notes: note });
+    setSavingNote(false);
+    setNoteOpen(false);
+  }
+
+  return (
+    <li className={`rounded-lg border border-border bg-card p-4 ${muted ? 'opacity-70' : ''}`}>
+      <div className="flex items-start gap-3">
+        {rank != null && (
+          <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary-50 text-xs font-semibold text-primary-700">
+            {rank}
+          </span>
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-3">
+            <button type="button" onClick={onOpen} className="min-w-0 text-left">
+              <span className="font-semibold text-gray-900 hover:underline">{title}</span>
+            </button>
+            <button type="button" onClick={onOpen} className="shrink-0 text-gray-400 hover:text-gray-700" aria-label="Open topic">
+              <ExternalLink className="h-4 w-4" />
+            </button>
+          </div>
+          {angle && <p className="mt-1 line-clamp-2 text-sm text-gray-600">{angle}</p>}
+
+          <div className="mt-2 flex flex-wrap items-center gap-1.5 text-xs">
+            <Select value={market || undefined} onValueChange={(val) => onPatch(record, { market: val })}>
+              <SelectTrigger className="h-7 w-auto min-w-[8rem] gap-1 text-xs">
+                <SelectValue placeholder="Set market" />
+              </SelectTrigger>
+              <SelectContent>
+                {[...new Set([...(market ? [market] : []), ...markets])].map((m) => (
+                  <SelectItem key={m} value={m}>
+                    {m}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {contentType && <span className="rounded-full bg-gray-100 px-2 py-0.5 text-gray-600">{contentType.replace(/_/g, ' ')}</span>}
+          </div>
+
+          <TopicSources record={record} tierByDomain={tierByDomain} />
+
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            <div className="flex overflow-hidden rounded-md border border-border">
+              {VERDICTS.map((v) => {
+                const active = verdict === v.value;
+                const Icon = v.icon;
+                return (
+                  <button
+                    key={v.value}
+                    type="button"
+                    onClick={() => onPatch(record, { team_verdict: active ? '' : v.value })}
+                    className={`flex items-center gap-1 px-2.5 py-1 text-xs font-medium transition ${active ? v.on : 'bg-white text-gray-500 hover:bg-gray-50'}`}
+                  >
+                    <Icon className="h-3.5 w-3.5" /> {v.label}
+                  </button>
+                );
+              })}
+            </div>
+
+            <Select value={status} onValueChange={(val) => onPatch(record, { status: val })}>
+              <SelectTrigger className="h-8 w-36 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {STATUSES.map((s) => (
+                  <SelectItem key={s} value={s}>
+                    {s}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Button variant="outline" size="sm" onClick={() => setNoteOpen((v) => !v)} className="text-xs">
+              {note ? 'Note ✓' : 'Add note'}
+            </Button>
+          </div>
+
+          {noteOpen && (
+            <div className="mt-2 space-y-2">
+              <Textarea value={note} onChange={(e) => setNote(e.target.value)} rows={2} placeholder="Quick note for the AI — e.g. “sources don’t validate; topic is good, angle too broad.”" className="text-sm" />
+              <div className="flex gap-2">
+                <Button size="sm" onClick={saveNote} disabled={savingNote}>
+                  {savingNote ? 'Saving…' : 'Save note'}
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => { setNote(field(record, 'team_notes')); setNoteOpen(false); }}>
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          )}
+          {!noteOpen && note && <p className="mt-2 border-l-2 border-gray-200 pl-2 text-xs italic text-gray-500">{note}</p>}
+        </div>
+      </div>
+    </li>
+  );
+}
+
+function TopicSources({ record, tierByDomain }: { record: EntityRecord; tierByDomain: Map<string, number> }) {
+  const sources = [1, 2, 3].map((i) => field(record, `source_${i}`)).filter(Boolean);
+  if (sources.length === 0) {
+    return (
+      <p className="mt-2 flex items-center gap-1 text-xs font-medium text-amber-600">
+        <AlertTriangle className="h-3.5 w-3.5" /> No sources — needs verification
+      </p>
+    );
+  }
+  return (
+    <div className="mt-2 flex flex-wrap items-center gap-1.5">
+      <span className="text-xs text-gray-400">Sources:</span>
+      {sources.map((s, i) => {
+        const host = hostOf(s);
+        const tier = host ? tierByDomain.get(host.toLowerCase()) : undefined;
+        const href = /^https?:\/\//.test(s) ? s : host ? `https://${s}` : undefined;
+        const chip = (
+          <span className="inline-flex items-center gap-1 rounded-full border border-border bg-white px-2 py-0.5 text-xs text-gray-700">
+            {tier === 1 && <ShieldCheck className="h-3 w-3 text-emerald-600" />}
+            <span className="max-w-[12rem] truncate">{host || s}</span>
+            {tier != null ? (
+              <span className={`rounded px-1 text-[10px] font-semibold ${tier === 1 ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-500'}`}>T{tier}</span>
+            ) : (
+              <span className="rounded bg-amber-100 px-1 text-[10px] font-semibold text-amber-700">unlisted</span>
+            )}
+            {href && <ExternalLink className="h-3 w-3 text-gray-400" />}
+          </span>
+        );
+        return href ? (
+          <a key={i} href={href} target="_blank" rel="noreferrer" className="hover:opacity-80">
+            {chip}
+          </a>
+        ) : (
+          <span key={i}>{chip}</span>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/collection/__tests__/drafts.test.ts

@@ -0,0 +1,91 @@
+import { parseSources, normUrl, groupKeyOf, groupDrafts, candidateTitle, gradeWords, wordTargets } from '../drafts';
+import type { EntityRecord } from '../types';
+
+function rec(id: string, name: string, data: Record<string, unknown>): EntityRecord {
+  return { id: id as unknown as number, entityType: 'draft', externalId: null, name, data, createdAt: '' };
+}
+
+describe('parseSources', () => {
+  it('parses the pipe-delimited string shape', () => {
+    const out = parseSources('Arab News (2024-08-04) https://www.arabnews.com/node/misa-q2 | note without url');
+    expect(out).toHaveLength(1);
+    expect(out[0].url).toBe('https://www.arabnews.com/node/misa-q2');
+    expect(out[0].outlet).toBe('Arab News');
+    expect(out[0].date).toBe('2024-08-04');
+  });
+  it('parses the JSON array shape', () => {
+    const out = parseSources([{ url: 'https://www.thenationalnews.com/x', outlet: 'The National', date: '2026-06-27' }]);
+    expect(out).toHaveLength(1);
+    expect(out[0].outlet).toBe('The National');
+  });
+  it('returns [] for null/garbage', () => {
+    expect(parseSources(null)).toEqual([]);
+    expect(parseSources(42)).toEqual([]);
+  });
+});
+
+describe('normUrl', () => {
+  it('strips scheme/www/trailing slash and lowercases', () => {
+    expect(normUrl('https://www.Invest.qa/')).toBe('invest.qa');
+    expect(normUrl('https://www.arabnews.com/node/misa-q2')).toBe('arabnews.com/node/misa-q2');
+  });
+});
+
+describe('groupDrafts', () => {
+  const saudi = [1, 2, 3].map((i) =>
+    rec(`s${i}`, `Saudi ${i}`, { candidate_index: i, content_type: 'weekly_brief', chosen: false, sources: 'Arab News (2024-08-04) https://www.arabnews.com/node/misa-q2 | note' }),
+  );
+  const qatar = [3, 1, 2].map((i) =>
+    rec(`q${i}`, `Qatar ${i}`, { candidate_index: i, content_type: 'weekly_brief', chosen: i === 1, status: i === 1 ? 'selected' : '', sources: [{ url: 'https://www.invest.qa/', outlet: 'Invest Qatar' }] }),
+  );
+
+  it('clusters candidates by primary source, sorted by candidate_index', () => {
+    const groups = groupDrafts([...saudi, ...qatar]);
+    expect(groups).toHaveLength(2);
+    const s = groups.find((g) => g.key.includes('arabnews'))!;
+    expect(s.candidates.map((c) => c.data.candidate_index)).toEqual([1, 2, 3]);
+  });
+
+  it('unresolved groups float above picked ones', () => {
+    const groups = groupDrafts([...saudi, ...qatar]);
+    expect(groups[0].key).toContain('arabnews');
+    expect(groups[0].chosen).toBeNull();
+    expect(groups[1].chosen).not.toBeNull();
+  });
+
+  it('prefers an explicit topic_ref over the source heuristic', () => {
+    const a = rec('a', 'A', { candidate_index: 1, topic_ref: 't-42', topic_title: 'Parent topic', sources: 'x (2026-01-01) https://a.com/one' });
+    const b = rec('b', 'B', { candidate_index: 2, topic_ref: 't-42', topic_title: 'Parent topic', sources: 'y (2026-01-01) https://b.com/two' });
+    expect(groupKeyOf(a)).toBe('ref:t-42');
+    expect(groupKeyOf(a)).toBe(groupKeyOf(b));
+    const g = groupDrafts([a, b]);
+    expect(g).toHaveLength(1);
+    expect(g[0].label).toBe('Parent topic');
+  });
+
+  it('a ready candidate sinks the group and flags ready', () => {
+    const done = [1, 2].map((i) => rec(`d${i}`, `Done ${i}`, { candidate_index: i, topic_ref: 'done', status: i === 1 ? 'ready' : '', chosen: i === 1 }));
+    const open = [1, 2].map((i) => rec(`o${i}`, `Open ${i}`, { candidate_index: i, topic_ref: 'open' }));
+    const groups = groupDrafts([...done, ...open]);
+    expect(groups[groups.length - 1].ready).toBe(true);
+    expect(groups[0].ready).toBe(false);
+  });
+});
+
+describe('candidateTitle', () => {
+  it('strips the "Candidate N —" scaffolding', () => {
+    expect(candidateTitle(rec('x', 'Candidate 1 — UAE–China trade brief', {}))).toBe('UAE–China trade brief');
+  });
+});
+
+describe('gradeWords', () => {
+  it('grades against the weekly-brief blog target', () => {
+    const t = wordTargets('weekly_brief').blog;
+    expect(gradeWords(462, t)).toBe('ok');
+    expect(gradeWords(200, t)).toBe('low');
+    expect(gradeWords(900, t)).toBe('high');
+  });
+  it('returns none when no target', () => {
+    expect(gradeWords(100, wordTargets('lead_magnet').linkedin)).toBe('none');
+  });
+});

package/src/components/collection/data.ts

@@ -0,0 +1,17 @@
+/**
+ * camelCase-aware read/write helpers for an Entity.data blob. The tenant API
+ * client camelCases response keys (incl. the data blob), so a snake_case attr
+ * `team_verdict` lands as `teamVerdict`; try the camel form first, then the raw
+ * key. Pure + framework-free.
+ */
+import type { EntityRecord } from './types';
+
+export function toCamelKey(name: string): string {
+  return name.replace(/_+([a-z0-9])/g, (_m, c: string) => c.toUpperCase());
+}
+
+export function readData(data: EntityRecord['data'] | undefined, name: string): unknown {
+  if (!data) return undefined;
+  const bag = data as Record<string, unknown>;
+  return bag[toCamelKey(name)] ?? bag[name];
+}

package/src/components/collection/drafts.ts

@@ -0,0 +1,160 @@
+/**
+ * Pure, schema-driven grouping logic for the draft-review workspace.
+ *
+ * A content writer typically emits N candidate drafts per approved topic ("3
+ * candidates, pick 1"), but draft records may carry no stored parent-topic id.
+ * Cluster by an explicit `topic_ref` when present (exact), else by the shared
+ * primary source URL, else the shared "Candidate N — <story>" name suffix. Pure
+ * + framework-free so it's unit-tested in isolation.
+ */
+import type { EntityRecord } from './types';
+import { readData } from './data';
+
+export interface DraftSource {
+  url: string;
+  outlet?: string;
+  date?: string;
+}
+
+function str(v: unknown): string {
+  return v == null ? '' : String(v);
+}
+
+/**
+ * Sources arrive in two shapes: a pipe-delimited string ("Outlet (2024-08-04)
+ * https://url | note without a url") or a JSON array of { url, outlet, date }.
+ * Normalize both to a list of sources that actually carry a URL.
+ */
+export function parseSources(raw: unknown): DraftSource[] {
+  if (Array.isArray(raw)) {
+    return raw
+      .map((s): DraftSource | null => {
+        if (typeof s === 'string') return s ? { url: s } : null;
+        if (s && typeof s === 'object') {
+          const o = s as Record<string, unknown>;
+          const url = str(o.url);
+          return url ? { url, outlet: str(o.outlet) || undefined, date: str(o.date) || undefined } : null;
+        }
+        return null;
+      })
+      .filter((s): s is DraftSource => s !== null);
+  }
+  if (typeof raw === 'string') {
+    return raw
+      .split('|')
+      .map((part): DraftSource | null => {
+        const m = part.match(/https?:\/\/\S+/);
+        if (!m) return null;
+        const outlet = part.slice(0, part.indexOf('(') === -1 ? part.indexOf('http') : part.indexOf('(')).trim();
+        const dm = part.match(/\((\d{4}-\d{2}-\d{2})\)/);
+        return { url: m[0].replace(/[.,)]+$/, ''), outlet: outlet || undefined, date: dm ? dm[1] : undefined };
+      })
+      .filter((s): s is DraftSource => s !== null);
+  }
+  return [];
+}
+
+/** host + path (no scheme/www/trailing slash), lowercased — a stable dedupe key. */
+export function normUrl(u: string): string {
+  try {
+    const x = new URL(/^https?:\/\//.test(u) ? u : `https://${u}`);
+    return (x.hostname.replace(/^www\./, '') + x.pathname.replace(/\/+$/, '')).toLowerCase();
+  } catch {
+    return u.trim().toLowerCase();
+  }
+}
+
+/**
+ * The clustering key for a draft. Prefer an explicit topic_ref (stamped by the
+ * writer) — exact. Older drafts have none, so fall back to the normalized primary
+ * source URL, then the shared "Candidate N — <story>" suffix, then id.
+ */
+export function groupKeyOf(r: EntityRecord): string {
+  const topicRef = str(readData(r.data, 'topic_ref'));
+  if (topicRef) return `ref:${topicRef}`;
+  const sources = parseSources(readData(r.data, 'sources'));
+  if (sources.length > 0) return `src:${normUrl(sources[0].url)}`;
+  const name = str(r.name) || str(readData(r.data, 'story_title'));
+  const suffix = name.replace(/^\s*candidate\s*\d+\s*[—\-:]\s*/i, '').trim();
+  if (suffix) return `name:${suffix.toLowerCase()}`;
+  return `id:${r.id}`;
+}
+
+/** Candidate title without the "Candidate N — " scaffolding a writer adds. */
+export function candidateTitle(r: EntityRecord): string {
+  const raw = str(readData(r.data, 'story_title')) || str(r.name);
+  return raw.replace(/^\s*candidate\s*\d+\s*[—\-:]\s*/i, '').trim() || raw || `#${r.id}`;
+}
+
+export function candidateIndex(r: EntityRecord): number {
+  const n = Number(readData(r.data, 'candidate_index'));
+  return Number.isFinite(n) ? n : 0;
+}
+
+export function isChosen(r: EntityRecord): boolean {
+  const v = readData(r.data, 'chosen');
+  return v === true || v === 'true' || v === 1;
+}
+
+export interface DraftGroup {
+  key: string;
+  label: string;
+  contentType: string;
+  candidates: EntityRecord[];
+  chosen: EntityRecord | null;
+  /** A candidate has been approved (status='ready') — the final is ready to post. */
+  ready: boolean;
+}
+
+/**
+ * Cluster draft records into candidate sets (one per story), each sorted by
+ * candidate_index. Unresolved stories (nothing picked) float to the top — that's
+ * the work to do — and ready-to-post ones sink.
+ */
+export function groupDrafts(records: EntityRecord[]): DraftGroup[] {
+  const byKey = new Map<string, EntityRecord[]>();
+  for (const r of records) {
+    const k = groupKeyOf(r);
+    (byKey.get(k) ?? byKey.set(k, []).get(k)!).push(r);
+  }
+  const groups: DraftGroup[] = [];
+  for (const [key, cands] of byKey) {
+    cands.sort((a, b) => candidateIndex(a) - candidateIndex(b));
+    const chosen = cands.find(isChosen) ?? null;
+    const head = chosen ?? cands[0];
+    const ready = cands.some((c) => str(readData(c.data, 'status')) === 'ready');
+    const topicTitle = str(readData(head.data, 'topic_title'));
+    groups.push({
+      key,
+      label: topicTitle || candidateTitle(head),
+      contentType: str(readData(head.data, 'content_type')),
+      candidates: cands,
+      chosen,
+      ready,
+    });
+  }
+  const rank = (g: DraftGroup) => (g.ready ? 2 : g.chosen ? 1 : 0);
+  return groups.sort((a, b) => rank(a) - rank(b) || a.label.localeCompare(b.label));
+}
+
+/** Word-count targets by content type, from the OGMC skill specs (generic defaults). */
+export function wordTargets(contentType: string): { blog: [number, number]; linkedin: [number, number] } {
+  switch (contentType) {
+    case 'lead_magnet':
+      return { blog: [3000, 4500], linkedin: [0, 0] };
+    case 'weekly_brief':
+      return { blog: [400, 500], linkedin: [150, 250] };
+    default:
+      return { blog: [350, 600], linkedin: [120, 280] };
+  }
+}
+
+export type CheckStatus = 'ok' | 'low' | 'high' | 'none';
+
+/** Grade a word count against a [lo, hi] target. hi===0 means "no target". */
+export function gradeWords(count: number, [lo, hi]: [number, number]): CheckStatus {
+  if (hi === 0) return 'none';
+  if (count < lo) return 'low';
+  if (count > hi) return 'high';
+  return 'ok';
+}

package/src/components/collection/index.ts

@@ -0,0 +1,25 @@
+/**
+ * @startsimpli/ui/collection — shared entity-collection review workspaces
+ * (topic triage + draft compare/approve) for Foundry-templated tenant apps.
+ *
+ * Client-injected: pass a CollectionClient (the app's authed tenant API) and the
+ * workspace owns all the react-query/data logic, so the app wrapper is ~10 LOC.
+ */
+export { TopicReviewWorkspace, type TopicReviewWorkspaceProps } from './TopicReviewWorkspace';
+export { DraftReviewWorkspace, type DraftReviewWorkspaceProps } from './DraftReviewWorkspace';
+export type { CollectionClient, EntityRecord, EntityTypeDef, AttributeDef, Paginated, DataType } from './types';
+export { readData, toCamelKey } from './data';
+export {
+  parseSources,
+  normUrl,
+  groupKeyOf,
+  candidateTitle,
+  candidateIndex,
+  isChosen,
+  groupDrafts,
+  wordTargets,
+  gradeWords,
+  type DraftSource,
+  type DraftGroup,
+  type CheckStatus,
+} from './drafts';

package/src/components/collection/types.ts

@@ -0,0 +1,54 @@
+/**
+ * @startsimpli/ui/collection — shared entity-collection review workspaces.
+ *
+ * These are the "system-of-record" review surfaces for a Foundry-templated
+ * tenant: a topic-review triage list and a draft-review compare/approve board.
+ * They are client-INJECTED — the consuming app passes a CollectionClient (its
+ * own authed tenant API) so the workspace owns all the react-query logic and the
+ * app wrapper stays ~10 LOC. Nothing here is OGMC-specific; the controlled-vocab
+ * markets + the optional record-detail drawer are props.
+ */
+
+export type DataType = 'text' | 'longtext' | 'number' | 'integer' | 'boolean' | 'date' | 'enum' | 'json';
+
+export interface AttributeDef {
+  id: string | number;
+  name: string;
+  dataType: DataType;
+  required: boolean;
+  config: Record<string, unknown>;
+}
+
+export interface EntityTypeDef {
+  id: string | number;
+  key: string;
+  label: string;
+  attributes: AttributeDef[];
+}
+
+export interface EntityRecord {
+  id: number;
+  entityType: string;
+  externalId: string | null;
+  name: string;
+  data: Record<string, unknown>;
+  createdAt: string;
+}
+
+export interface Paginated<T> {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: T[];
+}
+
+/**
+ * The tenant-API surface a review workspace needs. The app implements this over
+ * its authed same-origin client (keys are camel/snake-normalized by that client;
+ * PATCH replaces the whole data blob, so callers send the full merged data).
+ */
+export interface CollectionClient {
+  listTypes(): Promise<Paginated<EntityTypeDef>>;
+  listAllEntities(type: string): Promise<EntityRecord[]>;
+  updateEntity(id: number | string, input: { name?: string; data?: Record<string, unknown> }): Promise<EntityRecord>;
+}