@growth-labs/cms 0.5.4 → 0.5.6

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/components/Sidebar.tsx

@@ -5,10 +5,18 @@ import { navItems } from '../nav.js'
 import { useWorkspace } from '../workspace-context.js'
 import { SiteSwitcher } from './SiteSwitcher.js'
 
-export function Sidebar(props: { route: Route; navigate: (r: Route) => void; collapsed: boolean }) {
+export function Sidebar(props: {
+	route: Route
+	navigate: (r: Route) => void
+	collapsed: boolean
+	surveyResultsEnabled?: boolean
+}) {
 	const { state } = useWorkspace()
-	const groups = navItems()
 	const user = state.user
+	const groups = navItems(
+		{},
+		{ surveyResultsEnabled: props.surveyResultsEnabled, role: user?.role },
+	)
 	const initial = user?.name?.[0]?.toUpperCase() ?? user?.email?.[0]?.toUpperCase() ?? '?'
 
 	return (

package/src/ui/hash-router.ts

@@ -11,6 +11,7 @@ export const ROUTES = [
 	'topics',
 	'content-insights',
 	'subscriptions',
+	'survey-responses',
 	'social-share',
 	'settings',
 ] as const

package/src/ui/nav.ts

@@ -1,6 +1,8 @@
 // src/ui/nav.ts — the Masthead sidebar nav model. Two groups, 11 items
 // (spec §6: Social Share added between Subscriptions and Settings).
 
+import type { CmsRole } from '../schema/types.js'
+import { canViewSurveyResponses } from '../surveys/access.js'
 import type { Route } from './hash-router.js'
 import type { IconName } from './icons.js'
 
@@ -33,6 +35,7 @@ export const NAV_MODEL: NavGroup[] = [
 			{ id: 'topics', label: 'Topics & tags', icon: 'tag' },
 			{ id: 'content-insights', label: 'Content Insights', icon: 'sparkle' },
 			{ id: 'subscriptions', label: 'Subscriptions', icon: 'inbox' },
+			{ id: 'survey-responses', label: 'Survey responses', icon: 'chart' },
 			{ id: 'social-share', label: 'Social Share', icon: 'share' },
 			{ id: 'settings', label: 'Settings', icon: 'settings' },
 		],
@@ -40,9 +43,19 @@ export const NAV_MODEL: NavGroup[] = [
 ]
 
 /** Build the nav with live counts merged onto matching item ids. */
-export function navItems(counts: Partial<Record<Route, number>> = {}): NavGroup[] {
+export function navItems(
+	counts: Partial<Record<Route, number>> = {},
+	options: { surveyResultsEnabled?: boolean; role?: CmsRole | null } = {
+		surveyResultsEnabled: true,
+		role: 'owner',
+	},
+): NavGroup[] {
+	const canViewSurvey =
+		options.surveyResultsEnabled !== false && canViewSurveyResponses(options.role)
 	return NAV_MODEL.map((g) => ({
 		group: g.group,
-		items: g.items.map((i) => (counts[i.id] != null ? { ...i, count: counts[i.id] } : { ...i })),
+		items: g.items
+			.filter((item) => item.id !== 'survey-responses' || canViewSurvey)
+			.map((i) => (counts[i.id] != null ? { ...i, count: counts[i.id] } : { ...i })),
 	}))
 }

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' })}
 				/>
 			)}