@nuasite/cms 0.28.0 → 0.29.0

package/src/editor/components/markdown-editor-overlay.tsx

@@ -375,11 +375,22 @@ export function MarkdownEditorOverlay() {
 			onMouseDown={stopPropagation}
 			onClick={stopPropagation}
 		>
-			<div
+			<form
 				class={`bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-white/10 w-full max-h-[90vh] flex flex-col ${
 					hasSidebar ? 'max-w-6xl' : 'max-w-4xl'
 				}`}
 				data-cms-ui
+				onSubmit={(e) => {
+					e.preventDefault()
+					if (isCreateMode) {
+						handleCreate()
+					} else {
+						const currentContent = currentMarkdownPage.value?.content
+						if (currentContent !== undefined) {
+							handleSave(currentContent)
+						}
+					}
+				}}
 			>
 				{/* Header */}
 				<div class="flex items-center justify-between px-5 py-4 border-b border-white/10">
@@ -495,9 +506,8 @@ export function MarkdownEditorOverlay() {
 						{isCreateMode
 							? (
 								<button
-									type="button"
-									onClick={handleCreate}
-									disabled={isSaving || !(page.frontmatter.title as string)?.trim()}
+									type="submit"
+									disabled={isSaving}
 									class="px-4 py-2 text-sm bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-pill transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
 									data-cms-ui
 								>
@@ -507,13 +517,7 @@ export function MarkdownEditorOverlay() {
 							)
 							: (
 								<button
-									type="button"
-									onClick={() => {
-										const currentContent = currentMarkdownPage.value?.content
-										if (currentContent !== undefined) {
-											handleSave(currentContent)
-										}
-									}}
+									type="submit"
 									disabled={isSaving}
 									class="px-4 py-2 text-sm bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-pill transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
 									data-cms-ui
@@ -577,7 +581,7 @@ export function MarkdownEditorOverlay() {
 						/>
 					)}
 				</div>
-			</div>
+			</form>
 		</div>
 	)
 }

package/src/editor/components/mdx-block-view.tsx

@@ -314,6 +314,7 @@ const INLINE_INPUT_TYPES: Record<string, string> = {
 	datetime: 'datetime-local',
 	time: 'time',
 	email: 'email',
+	tel: 'tel',
 }
 const inputClass =
 	'w-full bg-white/5 border border-white/10 rounded-cms-sm px-2.5 py-1.5 text-[13px] text-white/80 placeholder:text-white/30 outline-none focus:border-white/25 transition-colors'

package/src/editor/components/prop-editor.tsx

@@ -233,7 +233,13 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 	if (isCreating) {
 		const slug = slugify(newName.trim())
 		return (
-			<div class="p-3 bg-white/5 border border-white/15 rounded-cms-md space-y-3">
+			<form
+				class="p-3 bg-white/5 border border-white/15 rounded-cms-md space-y-3"
+				onSubmit={(e) => {
+					e.preventDefault()
+					handleCreate()
+				}}
+			>
 				<div class="flex items-center justify-between">
 					<span class="text-[12px] font-medium text-white/70">Create new entry</span>
 					{options.length > 0 && (
@@ -251,6 +257,7 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 					value={newName}
 					onInput={(e) => setNewName((e.target as HTMLInputElement).value)}
 					placeholder="Enter name..."
+					required
 					class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
 					autoFocus
 				/>
@@ -279,15 +286,13 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 						Cancel
 					</button>
 					<button
-						type="button"
-						onClick={handleCreate}
-						disabled={!newName.trim()}
+						type="submit"
 						class="px-3 py-1.5 text-[12px] bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-md transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
 					>
 						Create
 					</button>
 				</div>
-			</div>
+			</form>
 		)
 	}
 

package/src/field-types.ts

@@ -112,6 +112,8 @@ export const n = {
 	url: (hints?: TextHints) => stringField('url', hints),
 	/** Email input */
 	email: (hints?: TextHints) => stringField('email', hints),
+	/** Phone number input */
+	tel: (hints?: TextHints) => stringField('tel', hints),
 	/** Color picker */
 	color: () => withOrderBy(z.string().describe('cms:color')),
 	/** Date picker (handles YAML Date coercion → ISO date string). Accepts hints for the scanner; no Zod validation applied. */

package/src/handlers/api-routes.ts

@@ -21,15 +21,6 @@ export interface RouteContext {
 	manifestWriter: ManifestWriter
 	contentDir: string
 	mediaAdapter?: MediaStorageAdapter
-	/**
-	 * Triggered after a content file (markdown / data collection) is written so
-	 * the dev middleware can synchronously refresh Astro's content layer and
-	 * invalidate Vite's SSR module cache before responding to the client.
-	 *
-	 * Awaiting this is important: returning success before the cache is fresh
-	 * causes the editor to reload the page into a stale render.
-	 */
-	notifyContentChanged?: (filePath: string) => Promise<void>
 }
 
 type RouteHandler = (ctx: RouteContext) => Promise<void>
@@ -113,16 +104,20 @@ const routeMap = new Map<string, RouteHandler>([
 		}
 		sendJson(res, result)
 	}),
-	custom('POST', 'markdown/update', async ({ req, res, manifestWriter, notifyContentChanged }) => {
+	custom('POST', 'markdown/update', async ({ req, res, manifestWriter }) => {
 		const body = await parseJsonBody<Parameters<typeof handleUpdateMarkdown>[0]>(req)
 		const result = await handleUpdateMarkdown(body, manifestWriter.getComponentDefinitions())
-		if (result.success && notifyContentChanged) {
-			await notifyContentChanged(body.filePath)
-		}
 		sendJson(res, result)
 	}),
 	post('markdown/rename', (body: Parameters<typeof handleRenameMarkdown>[0]) => handleRenameMarkdown(body)),
-	postWithStatus('markdown/create', (body: Parameters<typeof handleCreateMarkdown>[0]) => handleCreateMarkdown(body)),
+	custom('POST', 'markdown/create', async ({ req, res, manifestWriter, contentDir }) => {
+		const body = await parseJsonBody<Parameters<typeof handleCreateMarkdown>[0]>(req)
+		const result = await handleCreateMarkdown(body)
+		if (result.success) {
+			manifestWriter.setCollectionDefinitions(await scanCollections(contentDir))
+		}
+		sendJson(res, result, result.success ? 200 : 400)
+	}),
 	custom('POST', 'markdown/delete', async ({ req, res, manifestWriter, contentDir }) => {
 		const body = await parseJsonBody<Parameters<typeof handleDeleteMarkdown>[0]>(req)
 		const fullPath = path.resolve(getProjectRoot(), body.filePath?.replace(/^\//, '') ?? '')
@@ -238,9 +233,8 @@ export async function handleCmsApiRoute(
 	manifestWriter: ManifestWriter,
 	contentDir: string,
 	mediaAdapter?: MediaStorageAdapter,
-	notifyContentChanged?: (filePath: string) => Promise<void>,
 ): Promise<void> {
-	const ctx: RouteContext = { req, res, route, manifestWriter, contentDir, mediaAdapter, notifyContentChanged }
+	const ctx: RouteContext = { req, res, route, manifestWriter, contentDir, mediaAdapter }
 
 	// Exact match lookup
 	const handler = routeMap.get(`${req.method}:${route}`)

package/src/manifest-writer.ts

@@ -125,6 +125,21 @@ export class ManifestWriter {
 		return this.collectionDefinitions
 	}
 
+	/**
+	 * Clear all entry pathnames on collection definitions.
+	 * Called when route files change so stale pathnames from addPage() don't
+	 * point to routes that no longer exist.
+	 */
+	clearCollectionPathnames(): void {
+		for (const def of Object.values(this.collectionDefinitions)) {
+			if (def.entries) {
+				for (const entry of def.entries) {
+					entry.pathname = undefined
+				}
+			}
+		}
+	}
+
 	/**
 	 * Get the manifest path for a given page
 	 * Places manifest next to the page: /about -> /about.json, / -> /index.json

package/src/types.ts

@@ -236,6 +236,7 @@ export type FieldType =
 	| 'image'
 	| 'url'
 	| 'email'
+	| 'tel'
 	| 'color'
 	| 'select'
 	| 'array'

package/src/vite-plugin.ts

@@ -1,8 +1,5 @@
-import { watch } from 'node:fs'
-import { join } from 'node:path'
 import type { Plugin } from 'vite'
-import { invalidateContentCache, notifyContentStoreUpdated, type ViteServerLike } from './content-invalidator'
-import { expectedDeletions } from './dev-middleware'
+import { expectedDeletions, invalidateCollectionRoutesCache } from './dev-middleware'
 import type { ManifestWriter } from './manifest-writer'
 import { markFileDirty } from './source-finder'
 import type { CmsMarkerOptions, ComponentDefinition } from './types'
@@ -56,6 +53,11 @@ export function createVitePlugin(context: VitePluginContext): Plugin[] {
 		if (INDEXED_EXTENSIONS.test(filePath)) {
 			markFileDirty(filePath)
 		}
+		// Invalidate cached collection routes when a dynamic route file changes
+		if (filePath.includes('/src/pages/') && filePath.includes('[')) {
+			invalidateCollectionRoutesCache()
+			manifestWriter.clearCollectionPathnames()
+		}
 	}
 
 	// Intercept Vite's file watcher to:
@@ -80,83 +82,27 @@ export function createVitePlugin(context: VitePluginContext): Plugin[] {
 			// processes them. We use prependListener so our handler runs first.
 			const origEmit = watcher.emit.bind(watcher)
 			watcher.emit = ((event: string, filePath: string, ...args: any[]) => {
-				if ((event === 'unlink' || event === 'unlinkDir') && expectedDeletions.has(filePath)) {
-					expectedDeletions.delete(filePath)
-					// Swallow the event — don't let Vite/Astro see it
-					return true
+				if (event === 'unlink' || event === 'unlinkDir') {
+					if (expectedDeletions.has(filePath)) {
+						expectedDeletions.delete(filePath)
+						// Swallow the event — don't let Vite/Astro see it
+						return true
+					}
+					// Invalidate cached collection routes when a dynamic route file is deleted
+					if (filePath.includes('/src/pages/') && filePath.includes('[')) {
+						invalidateCollectionRoutesCache()
+						manifestWriter.clearCollectionPathnames()
+					}
 				}
 				return origEmit(event, filePath, ...args)
 			}) as typeof watcher.emit
 		},
 	}
 
-	// Vite's bundled chokidar 3.6.0 fails to detect changes to .astro/data-store.json
-	// (added via watcher.add() in Astro's vite-plugin-content-virtual-mod).
-	// Without this, content collection edits update the data store on disk but the
-	// browser never receives a full-reload because Vite's watcher never fires "change"
-	// for that file. We use native fs.watch as a reliable fallback.
-	//
-	// Caveat: native fs.watch on Linux tracks the inode, not the path. Astro writes
-	// data-store.json via atomic rename (writeFile-tmp + rename), which replaces the
-	// inode and silently kills the existing watcher. We re-attach on every event to
-	// keep tracking the live file across atomic writes.
-	const dataStoreWatchPlugin: Plugin = {
-		name: 'cms-data-store-watch',
-		configureServer(server) {
-			if (command !== 'dev') return
-			const root = server.config.root
-			const dataStorePath = join(root, '.astro', 'data-store.json')
-			let fsWatcher: ReturnType<typeof watch> | undefined
-			let debounce: ReturnType<typeof setTimeout> | undefined
-			let closed = false
-
-			const invalidate = () => {
-				invalidateContentCache(server as unknown as ViteServerLike)
-				// Wake any CMS API middleware call that is currently blocked
-				// waiting for the data store to reflect a just-written file.
-				// This keeps the invalidation on a single path (here) and lets
-				// the middleware respond only after the SSR module graph is fresh.
-				notifyContentStoreUpdated()
-			}
-
-			const onEvent = () => {
-				clearTimeout(debounce)
-				debounce = setTimeout(invalidate, 80)
-				// Re-attach: native fs.watch dies after the inode is replaced by an
-				// atomic rename. Close current and restart so subsequent writes are
-				// observed.
-				fsWatcher?.close()
-				fsWatcher = undefined
-				if (!closed) startWatching()
-			}
-
-			const startWatching = () => {
-				if (closed) return
-				try {
-					fsWatcher = watch(dataStorePath, onEvent)
-				} catch {
-					// File doesn't exist yet — retry when it appears
-					setTimeout(startWatching, 2000)
-				}
-			}
-
-			// Data store is created during content sync, which runs after server start
-			setTimeout(startWatching, 3000)
-
-			const origClose = server.close.bind(server)
-			server.close = async () => {
-				closed = true
-				fsWatcher?.close()
-				clearTimeout(debounce)
-				return origClose()
-			}
-		},
-	}
-
 	// Note: We cannot use transformIndexHtml for static Astro builds because
 	// Astro generates HTML files directly without going through Vite's HTML pipeline.
 	// HTML processing is done in build-processor.ts after pages are generated.
 	// Source location attributes are provided natively by Astro's compiler
 	// (data-astro-source-file, data-astro-source-loc) in dev mode.
-	return [virtualManifestPlugin, watcherPlugin, dataStoreWatchPlugin, createArrayTransformPlugin()]
+	return [virtualManifestPlugin, watcherPlugin, createArrayTransformPlugin()]
 }

package/src/content-invalidator.ts

@@ -1,134 +0,0 @@
-/**
- * Vite SSR module cache invalidation + content-sync coordination.
- *
- * Astro's content layer chain (chokidar → glob loader → syncData → data store
- * → fs.watch → invalidateModule) is racy and unreliable under several conditions:
- *
- *   - Native fs.watch on Linux dies after the first atomic rename of the watched
- *     file (Astro writes data-store.json via writeFile-tmp + rename).
- *   - Vite's bundled chokidar 3.6.0 misses the same atomic-write events.
- *   - `invalidateModule(astro:data-layer-content)` alone does not propagate up
- *     the import graph, so route modules that already cached `getCollection`
- *     references keep returning stale data.
- *
- * This module exposes two things:
- *
- *   - `invalidateContentCache(server)` — walks the SSR module graph from
- *     `astro:data-layer-content` upward and invalidates every transitive
- *     importer, then broadcasts `full-reload` to the client.
- *   - `notifyContentStoreUpdated` / `awaitNextContentStoreUpdate` — a shared
- *     rendezvous between the fs.watch plugin (which observes data-store.json
- *     writes) and the CMS API middleware (which needs to hold the HTTP
- *     response until the store is fresh). Keeps invalidation on a single path.
- */
-
-interface SsrModuleNode {
-	id: string | null
-	importers: Set<SsrModuleNode>
-}
-
-interface SsrModuleGraph {
-	getModuleById(id: string): SsrModuleNode | undefined
-	invalidateModule(
-		mod: SsrModuleNode,
-		seen?: Set<SsrModuleNode>,
-		timestamp?: number,
-		isHmr?: boolean,
-	): void
-}
-
-interface SsrEnvironment {
-	moduleGraph: SsrModuleGraph
-	hot: { send: (event: string, data?: unknown) => void }
-}
-
-interface ClientEnvironment {
-	hot: { send: (payload: { type: string; path: string }) => void }
-}
-
-export interface ViteServerLike {
-	environments: { ssr: SsrEnvironment; client: ClientEnvironment }
-}
-
-// Astro exposes the content data store as a virtual module whose resolved id
-// is `\0astro:data-layer-content` (see astro/dist/content/consts.js). Earlier
-// versions of this file used `\0astro:data-store`, which does not exist and
-// silently reduced `invalidateContentCache` to a no-op full-reload broadcast.
-const DATA_STORE_VIRTUAL_ID = '\0astro:data-layer-content'
-
-/**
- * Invalidate the SSR `astro:data-layer-content` virtual module and every
- * module that (transitively) imports it. After this returns, the next request
- * that imports any of these modules will re-execute and read fresh content.
- *
- * Also broadcasts `full-reload` so any connected browser refreshes.
- */
-export function invalidateContentCache(server: ViteServerLike): void {
-	const ssr = server.environments.ssr
-	const dataStoreMod = ssr.moduleGraph.getModuleById(DATA_STORE_VIRTUAL_ID)
-	if (dataStoreMod) {
-		const seen = new Set<SsrModuleNode>()
-		const ts = Date.now()
-		const walk = (mod: SsrModuleNode) => {
-			if (seen.has(mod)) return
-			seen.add(mod)
-			ssr.moduleGraph.invalidateModule(mod, seen, ts, true)
-			for (const importer of mod.importers) {
-				walk(importer)
-			}
-		}
-		walk(dataStoreMod)
-	}
-	ssr.hot.send('astro:content-changed', {})
-	server.environments.client.hot.send({ type: 'full-reload', path: '*' })
-}
-
-// ---------------------------------------------------------------------------
-// Content-sync rendezvous
-// ---------------------------------------------------------------------------
-//
-// The CMS API middleware writes a content file and then needs to hold the HTTP
-// response until Astro has actually re-synced the data store — otherwise the
-// browser reloads into a stale render. The fs.watch plugin is the component
-// that observes the data-store.json write, so it is also the component that
-// resolves these waiters.
-
-type StoreUpdateResolver = () => void
-const pendingStoreUpdateWaiters = new Set<StoreUpdateResolver>()
-
-/**
- * Called by the data-store fs.watch plugin after it has invalidated the SSR
- * module cache in response to a data-store.json write. Wakes every middleware
- * caller currently parked in `awaitNextContentStoreUpdate`.
- */
-export function notifyContentStoreUpdated(): void {
-	if (pendingStoreUpdateWaiters.size === 0) return
-	const resolvers = Array.from(pendingStoreUpdateWaiters)
-	pendingStoreUpdateWaiters.clear()
-	for (const resolve of resolvers) resolve()
-}
-
-/**
- * Park until the next data-store.json write has been fully processed (store
- * reloaded on disk, SSR module graph invalidated). Resolves with `true` on
- * success or `false` if the timeout elapses first — callers should treat
- * timeout as "best-effort, proceed anyway".
- *
- * The timeout fallback exists because some edits legitimately do not change
- * the data store (e.g. whitespace-only edits are skipped by Astro's atomic
- * write comparator), in which case no fs.watch event will ever fire.
- */
-export function awaitNextContentStoreUpdate(timeoutMs: number): Promise<boolean> {
-	return new Promise((resolve) => {
-		const resolver = () => {
-			clearTimeout(timer)
-			pendingStoreUpdateWaiters.delete(resolver)
-			resolve(true)
-		}
-		const timer = setTimeout(() => {
-			pendingStoreUpdateWaiters.delete(resolver)
-			resolve(false)
-		}, timeoutMs)
-		pendingStoreUpdateWaiters.add(resolver)
-	})
-}