@growth-labs/cms 0.5.3 → 0.5.5

package/src/ui/components/ShareModal.tsx

@@ -26,10 +26,12 @@ import {
 	BOOST_MODES,
 	type BoostMode,
 	buildBatchPayloadFrom,
+	canonicalAuthorRosterStatus,
 	formatShareOutput,
 	initShareForm,
 	type LinkResult,
 	relevantFields,
+	requiresCanonicalAuthorRoster,
 	SHARE_MODES,
 	type ShareFormPrefill,
 	type ShareMode,
@@ -41,6 +43,7 @@ import {
 	toPlainText,
 	YOUTUBE_BUNDLE_PLACEMENTS,
 } from '../screens/social-share-data.js'
+import { type ShareLinksData, useShareLinksData } from './SharePickers.js'
 
 // ---------------------------------------------------------------------------
 // Props
@@ -62,6 +65,8 @@ export interface ShareModalPrefill {
 export interface ShareModalProps {
 	prefill: ShareModalPrefill
 	onClose: () => void
+	allowInlineAuthorCreation?: boolean
+	shareLinksData?: ShareLinksData
 }
 
 // ---------------------------------------------------------------------------
@@ -79,7 +84,12 @@ const MODE_LABELS: Record<ShareMode, string> = {
 // ShareModal
 // ---------------------------------------------------------------------------
 
-export function ShareModal({ prefill, onClose }: ShareModalProps) {
+export function ShareModal({
+	prefill,
+	onClose,
+	allowInlineAuthorCreation = true,
+	shareLinksData: suppliedShareLinksData,
+}: ShareModalProps) {
 	const initialPrefill: ShareFormPrefill = {
 		destinationUrl: prefill.destinationUrl,
 		contentSlug: prefill.contentSlug,
@@ -97,6 +107,23 @@ export function ShareModal({ prefill, onClose }: ShareModalProps) {
 	const [submitError, setSubmitError] = useState<string | null>(null)
 	const [output, setOutput] = useState<ShareOutput | null>(null)
 	const [copied, setCopied] = useState(false)
+	const shouldVerifyAuthorRoster = requiresCanonicalAuthorRoster(
+		state.mode,
+		allowInlineAuthorCreation,
+	)
+	const fetchedShareLinksData = useShareLinksData(
+		!suppliedShareLinksData && !allowInlineAuthorCreation,
+	)
+	const shareLinksData = suppliedShareLinksData ?? fetchedShareLinksData
+	const authorRosterStatus = canonicalAuthorRosterStatus({
+		enabled: shouldVerifyAuthorRoster,
+		author: state.author,
+		authors: shareLinksData.authors,
+		loading: shareLinksData.loading,
+		error: shareLinksData.error,
+	})
+	const authorRosterFailure =
+		authorRosterStatus.kind === 'out-of-sync' || authorRosterStatus.kind === 'unavailable'
 
 	const goBase = typeof window !== 'undefined' ? `${window.location.origin}/go` : '/go'
 
@@ -114,6 +141,11 @@ export function ShareModal({ prefill, onClose }: ShareModalProps) {
 			setSubmitError(null)
 			setOutput(null)
 
+			if (authorRosterStatus.blocked) {
+				setSubmitError(authorRosterStatus.message)
+				return
+			}
+
 			const result = buildBatchPayloadFrom(state)
 			if (!result.ok) {
 				setSubmitError(result.error)
@@ -142,7 +174,7 @@ export function ShareModal({ prefill, onClose }: ShareModalProps) {
 				setSubmitting(false)
 			}
 		},
-		[state, goBase],
+		[state, goBase, authorRosterStatus],
 	)
 
 	const handleCopyAll = useCallback(() => {
@@ -353,22 +385,69 @@ export function ShareModal({ prefill, onClose }: ShareModalProps) {
 						{/* Author ref (inline — simplified for the modal; full picker in the screen) */}
 						{fields.includes('author') && (
 							<div style={fieldGroup}>
-								<label htmlFor="sm-author" className="field-label">
-									Author display name
-								</label>
-								<input
-									id="sm-author"
-									type="text"
-									className="input"
-									value={state.author.displayName ?? ''}
-									onChange={(e) =>
-										dispatch({
-											type: 'set-author',
-											ref: { ...state.author, displayName: e.currentTarget.value, create: true },
-										})
-									}
-									placeholder="Jane Smith"
-								/>
+								{allowInlineAuthorCreation ? (
+									<>
+										<label htmlFor="sm-author" className="field-label">
+											Author display name
+										</label>
+										<input
+											id="sm-author"
+											type="text"
+											className="input"
+											value={state.author.displayName ?? ''}
+											onChange={(e) =>
+												dispatch({
+													type: 'set-author',
+													ref: {
+														...state.author,
+														displayName: e.currentTarget.value,
+														create: true,
+													},
+												})
+											}
+											placeholder="Jane Smith"
+										/>
+									</>
+								) : authorRosterFailure ? (
+									<div
+										role="alert"
+										style={{
+											padding: '10px 12px',
+											border: '1px solid color-mix(in srgb, var(--red) 25%, transparent)',
+											borderRadius: 'var(--radius-sm)',
+											color: 'var(--red)',
+										}}
+									>
+										{authorRosterStatus.message}
+									</div>
+								) : state.author.id || state.author.slug || state.author.displayName ? (
+									<>
+										<div className="field-label">Canonical author</div>
+										<div className="input">
+											{state.author.displayName || state.author.slug || state.author.id}
+										</div>
+										{authorRosterStatus.kind === 'loading' && (
+											<div className="help" style={{ marginTop: 6 }}>
+												{authorRosterStatus.message}
+											</div>
+										)}
+									</>
+								) : state.mode === 'author-social' ? (
+									<div
+										role="alert"
+										style={{
+											padding: '10px 12px',
+											border: '1px solid color-mix(in srgb, var(--red) 25%, transparent)',
+											borderRadius: 'var(--radius-sm)',
+											color: 'var(--red)',
+										}}
+									>
+										No canonical author is linked to this content. Add or publish the author in the
+										Authors screen, then retry.
+									</div>
+								) : (
+									<div className="help">No author attribution selected (optional).</div>
+								)}
 							</div>
 						)}
 
@@ -514,7 +593,11 @@ export function ShareModal({ prefill, onClose }: ShareModalProps) {
 							<button type="button" className="btn" onClick={onClose}>
 								Cancel
 							</button>
-							<button type="submit" className="btn primary" disabled={submitting}>
+							<button
+								type="submit"
+								className="btn primary"
+								disabled={submitting || authorRosterStatus.blocked}
+							>
 								<Icon name="share" size={14} />
 								{submitting ? 'Minting…' : 'Mint link(s)'}
 							</button>

package/src/ui/components/SharePickers.tsx

@@ -27,11 +27,14 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Icon } from '../icons.js'
 import { publicUrlFor } from '../screens/public-url.js'
-import type {
-	AuthorRef,
-	HandleRef,
-	ShareFormAction,
-	ShareMode,
+import {
+	type AuthorRef,
+	type CanonicalAuthorEntry,
+	canonicalAuthorRosterStatus,
+	type HandleRef,
+	requiresCanonicalAuthorRoster,
+	type ShareFormAction,
+	type ShareMode,
 } from '../screens/social-share-data.js'
 
 // ---------------------------------------------------------------------------
@@ -39,11 +42,7 @@ import type {
 // SOURCE OF TRUTH: @growth-labs/analytics src/routes/share-links.ts GET response
 // ---------------------------------------------------------------------------
 
-interface AuthorEntry {
-	id: string
-	slug: string
-	displayName: string
-}
+export interface AuthorEntry extends CanonicalAuthorEntry {}
 
 interface HandleEntry {
 	id: string
@@ -60,6 +59,13 @@ interface ShareLinksListResponse {
 	links: unknown[]
 }
 
+export interface ShareLinksData {
+	authors: AuthorEntry[]
+	handles: HandleEntry[]
+	loading: boolean
+	error: string | null
+}
+
 // LibraryRow subset — only what the content picker needs.
 // SOURCE OF TRUTH: packages/cms/src/ui/screens/library-data.ts LibraryRow
 interface ContentRow {
@@ -322,20 +328,21 @@ export function ContentPicker({ siteBase, dispatch }: ContentPickerProps) {
  * so the component is self-contained; in practice the two fetches are identical
  * and the browser deduplicates via HTTP cache / same-tick coalescing).
  */
-function useShareLinksData(): {
-	authors: AuthorEntry[]
-	handles: HandleEntry[]
-	loading: boolean
-	error: string | null
-} {
+export function useShareLinksData(enabled = true): ShareLinksData {
 	const [authors, setAuthors] = useState<AuthorEntry[]>([])
 	const [handles, setHandles] = useState<HandleEntry[]>([])
-	const [loading, setLoading] = useState(true)
+	const [loading, setLoading] = useState(enabled)
 	const [error, setError] = useState<string | null>(null)
 
 	useEffect(() => {
+		if (!enabled) {
+			setLoading(false)
+			return
+		}
 		let cancelled = false
 		async function load() {
+			setLoading(true)
+			setError(null)
 			try {
 				const res = await fetch('/api/share-links')
 				if (!res.ok) {
@@ -357,7 +364,7 @@ function useShareLinksData(): {
 		return () => {
 			cancelled = true
 		}
-	}, [])
+	}, [enabled])
 
 	return { authors, handles, loading, error }
 }
@@ -418,6 +425,8 @@ export interface AuthorPickerProps {
 	ref: AuthorRef
 	dispatch: React.Dispatch<ShareFormAction>
 	mode: ShareMode
+	allowInlineAuthorCreation?: boolean
+	shareLinksData?: ShareLinksData
 }
 
 /**
@@ -425,8 +434,15 @@ export interface AuthorPickerProps {
  * Supports inline-create via `create:true` + `displayName`.
  * Required for author-social; optional for newsletter/youtube.
  */
-export function AuthorPicker({ ref: authorRef, dispatch, mode }: AuthorPickerProps) {
-	const { authors, loading, error } = useShareLinksData()
+export function AuthorPicker({
+	ref: authorRef,
+	dispatch,
+	mode,
+	allowInlineAuthorCreation = true,
+	shareLinksData,
+}: AuthorPickerProps) {
+	const fetchedShareLinksData = useShareLinksData(!shareLinksData)
+	const { authors, loading, error } = shareLinksData ?? fetchedShareLinksData
 	const isRequired = mode === 'author-social'
 	const [addNew, setAddNew] = useState(false)
 	const [newName, setNewName] = useState('')
@@ -434,7 +450,19 @@ export function AuthorPicker({ ref: authorRef, dispatch, mode }: AuthorPickerPro
 	// If an existing author ref (with id/slug) is set, show a chip
 	const selectedExisting = authorRef.id
 		? (authors.find((a) => a.id === authorRef.id) ?? null)
-		: null
+		: authorRef.slug
+			? (authors.find(
+					(a) => a.slug.trim().toLowerCase() === authorRef.slug?.trim().toLowerCase(),
+				) ?? null)
+			: null
+	const rosterStatus = canonicalAuthorRosterStatus({
+		enabled: requiresCanonicalAuthorRoster(mode, allowInlineAuthorCreation),
+		author: authorRef,
+		authors,
+		loading,
+		error,
+	})
+	const rosterDrift = rosterStatus.kind === 'out-of-sync' || rosterStatus.kind === 'unavailable'
 
 	const handleSelectExisting = (author: AuthorEntry) => {
 		dispatch({
@@ -465,8 +493,22 @@ export function AuthorPicker({ ref: authorRef, dispatch, mode }: AuthorPickerPro
 		<div>
 			<FieldLabel required={isRequired}>{isRequired ? 'Author' : 'Author (optional)'}</FieldLabel>
 
+			{rosterDrift && (
+				<div
+					role="alert"
+					style={{
+						padding: '10px 12px',
+						border: '1px solid color-mix(in srgb, var(--red) 25%, transparent)',
+						borderRadius: 'var(--radius-sm)',
+						color: 'var(--red)',
+					}}
+				>
+					{rosterStatus.message}
+				</div>
+			)}
+
 			{/* Show current selection as a chip */}
-			{displayValue ? (
+			{!rosterDrift && displayValue ? (
 				<SelectionChip
 					icon="users"
 					label={displayValue}
@@ -474,7 +516,7 @@ export function AuthorPicker({ ref: authorRef, dispatch, mode }: AuthorPickerPro
 					onClear={handleClear}
 					clearTitle="Clear author"
 				/>
-			) : (
+			) : !rosterDrift ? (
 				<>
 					{/* Existing authors list */}
 					{loading && (
@@ -521,12 +563,14 @@ export function AuthorPicker({ ref: authorRef, dispatch, mode }: AuthorPickerPro
 							className="panel panel-pad help"
 							style={{ margin: '0 0 8px', padding: '10px 12px' }}
 						>
-							No authors yet — add one below.
+							{allowInlineAuthorCreation
+								? 'No authors yet — add one below.'
+								: 'No synchronized authors are available. Create and publish the author in the canonical Authors screen, then retry.'}
 						</div>
 					)}
 
 					{/* Inline add new */}
-					{addNew ? (
+					{allowInlineAuthorCreation && addNew ? (
 						<div style={{ display: 'flex', gap: 8 }}>
 							<input
 								type="text"
@@ -555,7 +599,7 @@ export function AuthorPicker({ ref: authorRef, dispatch, mode }: AuthorPickerPro
 								<Icon name="x" size={13} />
 							</button>
 						</div>
-					) : (
+					) : allowInlineAuthorCreation ? (
 						<button
 							type="button"
 							className="btn sm ghost"
@@ -565,8 +609,13 @@ export function AuthorPicker({ ref: authorRef, dispatch, mode }: AuthorPickerPro
 							<Icon name="plus" size={13} />
 							Add new author
 						</button>
-					)}
+					) : null}
 				</>
+			) : null}
+			{!rosterDrift && rosterStatus.kind === 'loading' && (
+				<div className="help" style={{ margin: '6px 0 0' }}>
+					{rosterStatus.message}
+				</div>
 			)}
 		</div>
 	)

package/src/ui/screens/AuthorsScreen.tsx

@@ -22,6 +22,7 @@
 
 import { useCallback, useEffect, useReducer, useState } from 'react'
 import { Icon } from '../icons.js'
+import { formatAuthorWriteFailure } from './author-recovery.js'
 
 // ---------------------------------------------------------------------------
 // Data shape — mirrors serializeAuthor() in src/routes/authors.ts
@@ -182,11 +183,15 @@ export function AuthorsScreen() {
 					})
 
 			if (!res.ok) {
-				const detail = (await res.json().catch(() => null)) as { error?: string } | null
+				const detail = (await res.json().catch(() => null)) as {
+					error?: string
+					errorClass?: string
+					author?: { id?: string; slug?: string }
+				} | null
 				setEditor((e) => ({
 					...e,
 					submitting: false,
-					error: detail?.error ?? `${res.status} ${res.statusText}`,
+					error: formatAuthorWriteFailure(detail, `${res.status} ${res.statusText}`),
 				}))
 				return
 			}

package/src/ui/screens/ContentRoute.tsx

@@ -12,7 +12,11 @@ import { type ContentType, contentViewReducer, initialContentView } from './cont
 import { EditorScreen } from './EditorScreen.js'
 import { LibraryScreen } from './LibraryScreen.js'
 
-export function ContentRoute() {
+export function ContentRoute({
+	allowInlineAuthorCreation = true,
+}: {
+	allowInlineAuthorCreation?: boolean
+}) {
 	const [view, dispatch] = useReducer(contentViewReducer, initialContentView)
 
 	function openDoc(id: string | null, contentType?: ContentType) {
@@ -28,8 +32,14 @@ export function ContentRoute() {
 	}
 
 	if (view.open === null) {
-		return <LibraryScreen openDoc={openDoc} />
+		return <LibraryScreen openDoc={openDoc} allowInlineAuthorCreation={allowInlineAuthorCreation} />
 	}
 
-	return <EditorScreen docRef={view.open} onClose={handleClose} />
+	return (
+		<EditorScreen
+			docRef={view.open}
+			onClose={handleClose}
+			allowInlineAuthorCreation={allowInlineAuthorCreation}
+		/>
+	)
 }

package/src/ui/screens/EditorScreen.tsx

@@ -38,6 +38,7 @@ import type { ContentView } from './content-view.js'
 export interface EditorScreenProps {
 	docRef: NonNullable<ContentView['open']>
 	onClose: () => void
+	allowInlineAuthorCreation?: boolean
 }
 
 // ---------------------------------------------------------------------------
@@ -66,7 +67,11 @@ const STATUS_PILL_COLORS: Record<ContentStatus, string> = {
 // EditorScreen
 // ---------------------------------------------------------------------------
 
-export function EditorScreen({ docRef, onClose }: EditorScreenProps) {
+export function EditorScreen({
+	docRef,
+	onClose,
+	allowInlineAuthorCreation = true,
+}: EditorScreenProps) {
 	const contentType: ContentType = (docRef.contentType as ContentType | undefined) ?? 'article'
 	const siteBase = typeof window !== 'undefined' ? window.location.origin : undefined
 
@@ -397,6 +402,7 @@ export function EditorScreen({ docRef, onClose }: EditorScreenProps) {
 						},
 						siteBase,
 					)}
+					allowInlineAuthorCreation={allowInlineAuthorCreation}
 					onClose={() => setShareOpen(false)}
 				/>
 			)}

package/src/ui/screens/LibraryScreen.tsx

@@ -29,6 +29,7 @@ import {
 
 export interface LibraryScreenProps {
 	openDoc: (id: string | null, contentType?: ContentType) => void
+	allowInlineAuthorCreation?: boolean
 }
 
 // ---------------------------------------------------------------------------
@@ -198,7 +199,7 @@ function getVisibleRows(state: LibraryState): LibraryRow[] {
 // Main component
 // ---------------------------------------------------------------------------
 
-export function LibraryScreen({ openDoc }: LibraryScreenProps) {
+export function LibraryScreen({ openDoc, allowInlineAuthorCreation = true }: LibraryScreenProps) {
 	const { state: ws } = useWorkspace()
 	const siteBase = typeof window !== 'undefined' ? window.location.origin : undefined
 	const [lib, dispatch] = useReducer(libraryReducer, undefined, initLibrary)
@@ -487,6 +488,7 @@ export function LibraryScreen({ openDoc }: LibraryScreenProps) {
 			{lib.shareRow && (
 				<ShareModal
 					prefill={buildSharePrefill(lib.shareRow, siteBase)}
+					allowInlineAuthorCreation={allowInlineAuthorCreation}
 					onClose={() => dispatch({ type: 'close-share' })}
 				/>
 			)}

package/src/ui/screens/SocialShareScreen.tsx

@@ -30,17 +30,25 @@
 // Registry mount and per-content Share action are Task 9.
 
 import { useCallback, useEffect, useReducer, useState } from 'react'
-import { AuthorPicker, ContentPicker, HandlePicker } from '../components/SharePickers.js'
+import {
+	AuthorPicker,
+	ContentPicker,
+	HandlePicker,
+	type ShareLinksData,
+	useShareLinksData,
+} from '../components/SharePickers.js'
 import { type RecentLink, ShareStatsPanel } from '../components/ShareStatsPanel.js'
 import { Icon } from '../icons.js'
 import {
 	BOOST_MODES,
 	type BoostMode,
 	buildBatchPayloadFrom,
+	canonicalAuthorRosterStatus,
 	formatShareOutput,
 	initShareForm,
 	type LinkResult,
 	relevantFields,
+	requiresCanonicalAuthorRoster,
 	SHARE_MODES,
 	type ShareFormState,
 	type ShareMode,
@@ -67,7 +75,11 @@ const MODE_LABELS: Record<ShareMode, string> = {
 // Screen component
 // ---------------------------------------------------------------------------
 
-export function SocialShareScreen() {
+export function SocialShareScreen({
+	allowInlineAuthorCreation = true,
+}: {
+	allowInlineAuthorCreation?: boolean
+}) {
 	const [state, dispatch] = useReducer(
 		shareFormReducer,
 		{ mode: 'author-social' as ShareMode },
@@ -78,6 +90,14 @@ export function SocialShareScreen() {
 	const [submitError, setSubmitError] = useState<string | null>(null)
 	const [output, setOutput] = useState<ShareOutput | null>(null)
 	const [copied, setCopied] = useState(false)
+	const shareLinksData = useShareLinksData()
+	const authorRosterStatus = canonicalAuthorRosterStatus({
+		enabled: requiresCanonicalAuthorRoster(state.mode, allowInlineAuthorCreation),
+		author: state.author,
+		authors: shareLinksData.authors,
+		loading: shareLinksData.loading,
+		error: shareLinksData.error,
+	})
 
 	// Recent links — fetched from GET /api/share-links (same endpoint the pickers use).
 	// Used by the ShareStatsPanel for the Repoint affordance.
@@ -124,6 +144,11 @@ export function SocialShareScreen() {
 			setSubmitError(null)
 			setOutput(null)
 
+			if (authorRosterStatus.blocked) {
+				setSubmitError(authorRosterStatus.message)
+				return
+			}
+
 			const result = buildBatchPayloadFrom(state)
 			if (!result.ok) {
 				setSubmitError(result.error)
@@ -152,7 +177,7 @@ export function SocialShareScreen() {
 				setSubmitting(false)
 			}
 		},
-		[state, goBase],
+		[state, goBase, authorRosterStatus],
 	)
 
 	const handleCopyAll = useCallback(() => {
@@ -208,7 +233,13 @@ export function SocialShareScreen() {
 					</div>
 
 					{/* Per-mode fields */}
-					<PerModeFields state={state} dispatch={dispatch} fields={fields} />
+					<PerModeFields
+						state={state}
+						dispatch={dispatch}
+						fields={fields}
+						allowInlineAuthorCreation={allowInlineAuthorCreation}
+						shareLinksData={shareLinksData}
+					/>
 
 					{/* Advanced disclosure */}
 					<AdvancedSection state={state} dispatch={dispatch} fields={fields} />
@@ -231,7 +262,11 @@ export function SocialShareScreen() {
 
 					{/* Submit */}
 					<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-						<button type="submit" className="btn primary" disabled={submitting}>
+						<button
+							type="submit"
+							className="btn primary"
+							disabled={submitting || authorRosterStatus.blocked}
+						>
 							<Icon name="share" size={15} />
 							{submitting ? 'Minting…' : 'Mint link(s)'}
 						</button>
@@ -281,10 +316,14 @@ function PerModeFields({
 	state,
 	dispatch,
 	fields,
+	allowInlineAuthorCreation,
+	shareLinksData,
 }: {
 	state: ShareFormState
 	dispatch: React.Dispatch<Parameters<typeof shareFormReducer>[1]>
 	fields: string[]
+	allowInlineAuthorCreation: boolean
+	shareLinksData: ShareLinksData
 }) {
 	const has = (f: string) => fields.includes(f)
 
@@ -374,7 +413,15 @@ function PerModeFields({
 			)}
 
 			{/* author ref — author-social (required), newsletter/youtube (optional) */}
-			{has('author') && <AuthorPicker ref={state.author} dispatch={dispatch} mode={state.mode} />}
+			{has('author') && (
+				<AuthorPicker
+					ref={state.author}
+					dispatch={dispatch}
+					mode={state.mode}
+					allowInlineAuthorCreation={allowInlineAuthorCreation}
+					shareLinksData={shareLinksData}
+				/>
+			)}
 
 			{/* handle ref — author-social, owned-social, newsletter, youtube */}
 			{has('handle') && <HandlePicker ref={state.handle} dispatch={dispatch} mode={state.mode} />}

package/src/ui/screens/author-recovery.ts

@@ -0,0 +1,32 @@
+interface AuthorWriteFailureBody {
+	error?: string
+	errorClass?: string
+	author?: {
+		id?: string
+		slug?: string
+	}
+}
+
+export function formatAuthorWriteFailure(
+	body: AuthorWriteFailureBody | null,
+	httpFallback: string,
+): string {
+	if (!body?.errorClass) return body?.error ?? httpFallback
+
+	const identity = [
+		body.author?.id ? `author id: ${body.author.id}` : '',
+		body.author?.slug ? `slug: ${body.author.slug}` : '',
+	].filter(Boolean)
+	const message = body.error || 'Author synchronization failed'
+	const classifiedMessage = message.includes(body.errorClass)
+		? message
+		: `${body.errorClass}: ${message}`
+	const containsIdentity =
+		!!body.author?.id &&
+		!!body.author?.slug &&
+		classifiedMessage.includes(body.author.id) &&
+		classifiedMessage.includes(body.author.slug)
+	return `${classifiedMessage}${
+		identity.length > 0 && !containsIdentity ? ` (${identity.join('; ')})` : ''
+	}`
+}