@growth-labs/cms 0.1.0 → 0.1.2

package/src/ui/commands.ts

@@ -1,5 +1,6 @@
 // src/ui/commands.ts — the ⌘K command set + the pure filter. "create"/"jump"
 // are static; "doc" entries are fed in from the /admin/api/search results.
+import type { ContentType } from '../schema/types.js'
 import { ROUTES, type Route } from './hash-router.js'
 
 export type Command =
@@ -8,7 +9,7 @@ export type Command =
 			label: string
 			icon: string
 			hint: string
-			contentType: 'article' | 'video' | 'podcast'
+			contentType: ContentType
 	  }
 	| { kind: 'jump'; label: string; icon: string; hint: string; route: Route }
 	| { kind: 'doc'; label: string; icon: string; hint: string; id: string }
@@ -44,6 +45,7 @@ export const baseCommands: Command[] = [
 	{ kind: 'create', label: 'New article', icon: 'doc', hint: 'Create', contentType: 'article' },
 	{ kind: 'create', label: 'New video', icon: 'video', hint: 'Create', contentType: 'video' },
 	{ kind: 'create', label: 'New podcast', icon: 'mic', hint: 'Create', contentType: 'podcast' },
+	{ kind: 'create', label: 'New page', icon: 'doc', hint: 'Create', contentType: 'page' },
 	...ROUTES.map(
 		(r): Command => ({
 			kind: 'jump',

package/src/ui/components/SharePickers.tsx

@@ -64,7 +64,7 @@ interface ShareLinksListResponse {
 // SOURCE OF TRUTH: packages/cms/src/ui/screens/library-data.ts LibraryRow
 interface ContentRow {
 	id: string
-	type: 'article' | 'video' | 'podcast' | 'newsletter'
+	type: 'article' | 'video' | 'podcast' | 'newsletter' | 'page'
 	slug: string
 	title: string
 	authorId: string | null
@@ -185,6 +185,17 @@ export function ContentPicker({ siteBase, dispatch }: ContentPickerProps) {
 		setResults([])
 	}
 
+	const iconForContentType = (type: ContentRow['type']): Parameters<typeof Icon>[0]['name'] => {
+		const icons: Record<ContentRow['type'], Parameters<typeof Icon>[0]['name']> = {
+			article: 'doc',
+			video: 'video',
+			podcast: 'mic',
+			newsletter: 'mail',
+			page: 'doc',
+		}
+		return icons[type]
+	}
+
 	return (
 		<div>
 			<FieldLabel>Content (pre-fill)</FieldLabel>
@@ -265,15 +276,7 @@ export function ContentPicker({ siteBase, dispatch }: ContentPickerProps) {
 									style={dropdownItemStyle}
 								>
 									<Icon
-										name={
-											(row.type === 'article'
-												? 'doc'
-												: row.type === 'video'
-													? 'video'
-													: row.type === 'podcast'
-														? 'mic'
-														: 'mail') as Parameters<typeof Icon>[0]['name']
-										}
+										name={iconForContentType(row.type)}
 										size={13}
 										style={{ color: 'var(--ink-muted)', flexShrink: 0 }}
 									/>

package/src/ui/editor/ContentForm.tsx

@@ -1,7 +1,7 @@
-// src/ui/editor/ContentForm.tsx — four-type content form with Tiptap RTE.
+// src/ui/editor/ContentForm.tsx — content form with Tiptap RTE.
 //
 // Handles: title, dek (excerpt), type-specific body block:
-//   - article / newsletter → <Rte/> (Tiptap body)
+//   - article / newsletter / page → <Rte/> (Tiptap body)
 //   - video  → media/video block (URL input; the actual R2 multipart upload
 //               is wired through the existing /media/multipart routes; here
 //               we store a source URL or R2 key)
@@ -44,7 +44,7 @@ import { docToMarkdown } from './serialize.js'
 export interface ContentFormProps {
 	/** Existing content id (null = new unsaved doc). */
 	docId: string | null
-	/** Content type (article | video | podcast | newsletter). */
+	/** Content type (article | video | podcast | newsletter | page). */
 	contentType: ContentType
 	/** Called with the live resolved id once the doc is saved for the first time. */
 	onDocCreated?: (id: string) => void
@@ -825,7 +825,7 @@ export function ContentForm({
 						/>
 					</div>
 				) : (
-					/* article | newsletter */
+					/* article | newsletter | page */
 					<>
 						{contentType === 'article' && (
 							<div style={{ marginBottom: 14 }}>
@@ -855,8 +855,8 @@ export function ContentForm({
 				)}
 			</div>
 
-			{/* Footer: word count + read time (only for article/newsletter) */}
-			{(contentType === 'article' || contentType === 'newsletter') && (
+			{/* Footer: word count + read time (only for prose content) */}
+			{(contentType === 'article' || contentType === 'newsletter' || contentType === 'page') && (
 				<div style={footer}>
 					<Icon name="edit" size={12} style={{ color: 'var(--ink-faint)' }} />
 					<span>
@@ -1216,7 +1216,7 @@ function contentResponseToFormState(
 	next.heroImageId = heroImageId
 	next.heroImageUrl = heroImageUrl || (heroImageId ? mediaUrlFromId(heroImageId) : null)
 
-	if (contentType === 'article' || contentType === 'newsletter') {
+	if (contentType === 'article' || contentType === 'newsletter' || contentType === 'page') {
 		next.body = toStringValue(content.body_markdown) || toStringValue(content.body_html)
 	}
 

package/src/ui/editor/content-payload.ts

@@ -28,7 +28,7 @@ export function canCreateContentDraft(
 	draft: ContentDraftFields,
 ): boolean {
 	if (draft.title.trim().length < 3) return false
-	if (contentType === 'article' || contentType === 'newsletter') {
+	if (contentType === 'article' || contentType === 'newsletter' || contentType === 'page') {
 		return draft.body.trim().length > 0
 	}
 	if (contentType === 'video') return draft.videoUrl.trim().length > 0
@@ -81,7 +81,7 @@ export function buildContentUpdatePayload(
 		payload.heroImageId = heroImageId
 	}
 
-	if (contentType === 'article' || contentType === 'newsletter') {
+	if (contentType === 'article' || contentType === 'newsletter' || contentType === 'page') {
 		const wordCount = countWords(draft.body)
 		payload.content = {
 			bodyMarkdown: draft.body,

package/src/ui/preview/draft-page.tsx

@@ -111,7 +111,7 @@ export function DraftPage({ doc, device }: DraftPageProps) {
 				</main>
 
 				{/* Premium paywall overlay */}
-				{layout.paywall && <PaywallOverlay />}
+				{layout.paywall && <PaywallOverlay type={doc.type} />}
 			</div>
 		</div>
 	)
@@ -193,7 +193,7 @@ function BodyPreview({ body, type }: { body: string; type: ContentType }) {
 		)
 	}
 
-	// article / newsletter — render body as preformatted prose preview
+	// article / newsletter / page — render body as preformatted prose preview
 	return <div style={proseStyle}>{body}</div>
 }
 
@@ -220,7 +220,10 @@ function EmptyBody({ type }: { type: ContentType }) {
 	)
 }
 
-function PaywallOverlay() {
+function PaywallOverlay({ type }: { type: ContentType }) {
+	const subscribeCopy =
+		type === 'page' ? 'Subscribe to read the full page.' : 'Subscribe to read the full article.'
+
 	return (
 		<div
 			style={{
@@ -253,7 +256,7 @@ function PaywallOverlay() {
 					Premium content
 				</div>
 				<div style={{ fontSize: 12, color: 'var(--ink-muted)', marginBottom: 14 }}>
-					Subscribe to read the full article.
+					{subscribeCopy}
 				</div>
 				<button
 					type="button"

package/src/ui/screens/EditorScreen.tsx

@@ -51,6 +51,7 @@ const CONTENT_TYPE_LABELS: Record<ContentType, string> = {
 	video: 'Video',
 	podcast: 'Podcast',
 	newsletter: 'Newsletter',
+	page: 'Page',
 }
 
 const STATUS_PILL_COLORS: Record<ContentStatus, string> = {
@@ -67,6 +68,7 @@ const STATUS_PILL_COLORS: Record<ContentStatus, string> = {
 
 export function EditorScreen({ docRef, onClose }: EditorScreenProps) {
 	const contentType: ContentType = (docRef.contentType as ContentType | undefined) ?? 'article'
+	const siteBase = typeof window !== 'undefined' ? window.location.origin : undefined
 
 	// Resolved doc id — starts as null for new docs; set by onDocCreated
 	const [docId, setDocId] = useState<string | null>(docRef.id)
@@ -385,13 +387,16 @@ export function EditorScreen({ docRef, onClose }: EditorScreenProps) {
 			{/* Share modal — pre-filled from the open doc's slug + type */}
 			{shareOpen && (
 				<ShareModal
-					prefill={buildSharePrefill({
-						type: previewDoc.type,
-						slug: previewDoc.slug,
-						authorId: previewDoc.authorId,
-						authorName: previewDoc.authorName,
-						authorSlug: previewDoc.authorSlug,
-					})}
+					prefill={buildSharePrefill(
+						{
+							type: previewDoc.type,
+							slug: previewDoc.slug,
+							authorId: previewDoc.authorId,
+							authorName: previewDoc.authorName,
+							authorSlug: previewDoc.authorSlug,
+						},
+						siteBase,
+					)}
 					onClose={() => setShareOpen(false)}
 				/>
 			)}
@@ -468,6 +473,7 @@ function contentTypeIcon(type: ContentType): import('../icons.js').IconName {
 		video: 'video',
 		podcast: 'mic',
 		newsletter: 'mail',
+		page: 'doc',
 	}
 	return map[type]
 }

package/src/ui/screens/LibraryScreen.tsx

@@ -50,6 +50,7 @@ const TYPE_OPTIONS: Array<{ value: ContentType | ''; label: string }> = [
 	{ value: 'video', label: 'Video' },
 	{ value: 'podcast', label: 'Podcast' },
 	{ value: 'newsletter', label: 'Newsletter' },
+	{ value: 'page', label: 'Page' },
 ]
 
 const CONTENT_TYPE_ICONS: Record<ContentType, string> = {
@@ -57,6 +58,7 @@ const CONTENT_TYPE_ICONS: Record<ContentType, string> = {
 	video: 'video',
 	podcast: 'mic',
 	newsletter: 'mail',
+	page: 'doc',
 }
 
 // ---------------------------------------------------------------------------
@@ -198,6 +200,7 @@ function getVisibleRows(state: LibraryState): LibraryRow[] {
 
 export function LibraryScreen({ openDoc }: LibraryScreenProps) {
 	const { state: ws } = useWorkspace()
+	const siteBase = typeof window !== 'undefined' ? window.location.origin : undefined
 	const [lib, dispatch] = useReducer(libraryReducer, undefined, initLibrary)
 	const searchRef = useRef<HTMLInputElement>(null)
 
@@ -260,7 +263,7 @@ export function LibraryScreen({ openDoc }: LibraryScreenProps) {
 				<div>
 					<h1 className="page-title">Content</h1>
 					<div className="page-sub">
-						{lib.counts.all} items across articles, video, podcasts and newsletters.
+						{lib.counts.all} items across articles, video, podcasts, newsletters and pages.
 					</div>
 				</div>
 				<div style={{ display: 'flex', gap: 8 }}>
@@ -483,7 +486,7 @@ export function LibraryScreen({ openDoc }: LibraryScreenProps) {
 			{/* Share modal — opened by the per-row Share button */}
 			{lib.shareRow && (
 				<ShareModal
-					prefill={buildSharePrefill(lib.shareRow)}
+					prefill={buildSharePrefill(lib.shareRow, siteBase)}
 					onClose={() => dispatch({ type: 'close-share' })}
 				/>
 			)}
@@ -508,7 +511,7 @@ function NewContentMenu({ openDoc }: { openDoc: LibraryScreenProps['openDoc'] })
 		return () => document.removeEventListener('mousedown', handler)
 	}, [open])
 
-	const types: ContentType[] = ['article', 'video', 'podcast', 'newsletter']
+	const types: ContentType[] = ['article', 'video', 'podcast', 'newsletter', 'page']
 
 	return (
 		<div ref={ref} style={{ position: 'relative' }}>

package/src/ui/screens/SocialShareScreen.tsx

@@ -105,9 +105,10 @@ export function SocialShareScreen() {
 		void fetchRecentLinks()
 	}, [fetchRecentLinks])
 
+	const siteBase = typeof window !== 'undefined' ? window.location.origin : undefined
 	// Derive goBase from the current origin — relative /go path until cutover.
 	// At cutover this becomes 'https://go.fronts.co' via workspace/site config.
-	const goBase = typeof window !== 'undefined' ? `${window.location.origin}/go` : '/go'
+	const goBase = siteBase ? `${siteBase}/go` : '/go'
 
 	const fields = relevantFields(state.mode)
 
@@ -187,7 +188,7 @@ export function SocialShareScreen() {
 					</div>
 
 					{/* Content picker — pre-fills destination URL + slug + type from content library */}
-					<ContentPicker dispatch={dispatch} />
+					<ContentPicker siteBase={siteBase} dispatch={dispatch} />
 
 					{/* Destination URL — always visible; may be pre-filled by ContentPicker */}
 					<div>
@@ -410,6 +411,7 @@ function PerModeFields({
 						<option value="video">Video</option>
 						<option value="podcast">Podcast</option>
 						<option value="newsletter">Newsletter</option>
+						<option value="page">Page</option>
 					</select>
 				</div>
 			</div>

package/src/ui/screens/content-view.ts

@@ -2,7 +2,9 @@
 // ContentRoute owns a ContentView state; dispatching actions moves between the
 // library list (open === null) and the editor (open !== null).
 
-export type ContentType = 'article' | 'video' | 'podcast' | 'newsletter'
+import type { ContentType } from '../../schema/types.js'
+
+export type { ContentType } from '../../schema/types.js'
 
 export interface ContentView {
 	/** null = create new; string = open existing by id */

package/src/ui/screens/public-url.ts

@@ -10,6 +10,7 @@
 //   video      → /video/<slug>         (src/pages/video/[slug].astro)
 //   newsletter → /warfronts-weekly/<slug>
 //                                      (src/pages/warfronts-weekly/[slug].astro)
+//   page       → /<slug>
 //
 // SOURCE OF TRUTH for the path scheme: the Fronts site page structure at
 //   /Users/zephyr/projects/fulcrum-labs/fronts/src/pages/
@@ -44,6 +45,7 @@ const CONTENT_PUBLIC_PATH: Record<ContentType, (slug: string) => string> = {
 	// SOURCE: fronts/src/pages/warfronts-weekly/[slug].astro
 	//         fronts/src/lib/content.ts ~L779
 	newsletter: (slug) => `/warfronts-weekly/${slug}`,
+	page: (slug) => `/${slug.replace(/^\/+/, '')}`,
 }
 
 // ---------------------------------------------------------------------------

package/src/ui/screens/social-share-data.ts

@@ -358,7 +358,7 @@ export interface AuthorSocialBatchPayload {
 	property?: string
 	sourcePath?: string
 	author: AuthorRef
-	handle: HandleRef
+	handle?: HandleRef
 }
 
 /** owned-social batch request payload */
@@ -474,7 +474,7 @@ export function buildBatchPayloadFrom(state: ShareFormState): BuildPayloadResult
 				...(state.boostMode && state.boostMode !== 'none' ? { boostMode: state.boostMode } : {}),
 				...(nonEmpty(state.promoCode) ? { promoCode: state.promoCode } : {}),
 				author: state.author,
-				handle: state.handle,
+				...(refHasContent(state.handle) ? { handle: state.handle } : {}),
 			}
 			return { ok: true, payload }
 		}
@@ -701,7 +701,7 @@ export function toPlainText(output: ShareOutput): string {
  * given mode. The React form renders only these inputs; the request builders
  * read only these fields.
  *
- * 'author-social' → campaign, platform, author, handle, destinationUrl, advanced
+ * 'author-social' → campaign, platform, author, destinationUrl, advanced
  * 'owned-social'  → campaign, platform, handle, (optional author), destinationUrl, advanced
  * 'youtube'       → youtubeVideoId, placements, (optional handle/author), destinationUrl (NO campaign)
  * 'newsletter'    → issue, (optional author/handle), destinationUrl (NO campaign/platform/boostMode)
@@ -711,16 +711,7 @@ export function relevantFields(mode: ShareMode): string[] {
 
 	switch (mode) {
 		case 'author-social':
-			return [
-				...shared,
-				'campaign',
-				'platform',
-				'author',
-				'handle',
-				'placement',
-				'boostMode',
-				'promoCode',
-			]
+			return [...shared, 'campaign', 'platform', 'author', 'placement', 'boostMode', 'promoCode']
 
 		case 'owned-social':
 			return [