@nuasite/cms 0.29.0 → 0.31.0

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",

package/src/collection-scanner.ts

@@ -325,12 +325,41 @@ function buildCollectionDefinition(
  */
 async function scanCollection(collectionPath: string, collectionName: string, contentDir: string): Promise<CollectionDefinition | null> {
 	try {
-		const entries = await fs.readdir(collectionPath, { withFileTypes: true })
-		const markdownFiles = entries.filter(e => e.isFile() && (e.name.endsWith('.md') || e.name.endsWith('.mdx')))
+		const dirEntries = await fs.readdir(collectionPath, { withFileTypes: true })
 
-		if (markdownFiles.length === 0) return null
+		const sources: Array<{ slug: string; relPath: string }> = []
+		const takenSlugs = new Set<string>()
 
-		const hasMd = markdownFiles.some(f => f.name.endsWith('.md'))
+		for (const entry of dirEntries) {
+			if (!entry.isFile()) continue
+			if (!entry.name.endsWith('.md') && !entry.name.endsWith('.mdx')) continue
+			const slug = entry.name.replace(/\.(md|mdx)$/, '')
+			sources.push({ slug, relPath: entry.name })
+			takenSlugs.add(slug)
+		}
+
+		// Hugo-style layout: <slug>/index.md(x). Flat files win on slug conflict.
+		const subdirs = dirEntries.filter(e => e.isDirectory() && !e.name.startsWith('_') && !e.name.startsWith('.'))
+		const indexLookups = await Promise.all(subdirs.map(async dir => {
+			if (takenSlugs.has(dir.name)) return null
+			for (const ext of ['md', 'mdx'] as const) {
+				const relPath = path.join(dir.name, `index.${ext}`)
+				try {
+					await fs.access(path.join(collectionPath, relPath))
+					return { slug: dir.name, relPath }
+				} catch {
+					// try next extension
+				}
+			}
+			return null
+		}))
+		for (const entry of indexLookups) {
+			if (entry) sources.push(entry)
+		}
+
+		if (sources.length === 0) return null
+
+		const hasMd = sources.some(s => s.relPath.endsWith('.md'))
 		const fileExtension: 'md' | 'mdx' = hasMd ? 'md' : 'mdx'
 
 		const fieldMap = new Map<string, FieldObservation>()
@@ -339,11 +368,11 @@ async function scanCollection(collectionPath: string, collectionName: string, co
 		let hasDraft = false
 
 		const fileContents = await Promise.all(
-			markdownFiles.map(file => fs.readFile(path.join(collectionPath, file.name), 'utf-8')),
+			sources.map(s => fs.readFile(path.join(collectionPath, s.relPath), 'utf-8')),
 		)
 
-		for (let i = 0; i < markdownFiles.length; i++) {
-			const file = markdownFiles[i]!
+		for (let i = 0; i < sources.length; i++) {
+			const source = sources[i]!
 			const content = fileContents[i]!
 			const frontmatter = parseFrontmatter(content)
 
@@ -354,10 +383,9 @@ async function scanCollection(collectionPath: string, collectionName: string, co
 				}
 			}
 
-			const slug = file.name.replace(/\.(md|mdx)$/, '')
 			const entryInfo: CollectionEntryInfo = {
-				slug,
-				sourcePath: path.join(contentDir, collectionName, file.name),
+				slug: source.slug,
+				sourcePath: path.join(contentDir, collectionName, source.relPath),
 			}
 			if (frontmatter) {
 				if (typeof frontmatter.title === 'string') {
@@ -373,10 +401,10 @@ async function scanCollection(collectionPath: string, collectionName: string, co
 			if (!frontmatter) continue
 
 			if (frontmatter.draft === true) hasDraft = true
-			collectFieldObservations(fieldMap, frontmatter, markdownFiles.length)
+			collectFieldObservations(fieldMap, frontmatter, sources.length)
 		}
 
-		const def = buildCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, markdownFiles.length, {
+		const def = buildCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, sources.length, {
 			supportsDraft: hasDraft,
 			fileExtension,
 		})
@@ -886,42 +914,76 @@ function detectDerivedHrefFields(collections: Record<string, CollectionDefinitio
  */
 async function scanDataCollection(collectionPath: string, collectionName: string, contentDir: string): Promise<CollectionDefinition | null> {
 	try {
-		const entries = await fs.readdir(collectionPath, { withFileTypes: true })
-		const dataFiles = entries.filter(e => e.isFile() && (e.name.endsWith('.json') || e.name.endsWith('.yaml') || e.name.endsWith('.yml')))
-		if (dataFiles.length === 0) return null
+		const dirEntries = await fs.readdir(collectionPath, { withFileTypes: true })
+
+		const sources: Array<{ slug: string; relPath: string }> = []
+		const takenSlugs = new Set<string>()
+
+		for (const entry of dirEntries) {
+			if (!entry.isFile()) continue
+			if (!entry.name.endsWith('.json') && !entry.name.endsWith('.yaml') && !entry.name.endsWith('.yml')) continue
+			const slug = entry.name.replace(/\.(json|ya?ml)$/, '')
+			sources.push({ slug, relPath: entry.name })
+			takenSlugs.add(slug)
+		}
+
+		// Hugo-style layout: <slug>/index.{json,yaml,yml}. Flat files win on slug conflict.
+		const subdirs = dirEntries.filter(e => e.isDirectory() && !e.name.startsWith('_') && !e.name.startsWith('.'))
+		const indexLookups = await Promise.all(subdirs.map(async dir => {
+			if (takenSlugs.has(dir.name)) return null
+			for (const indexExt of ['json', 'yaml', 'yml'] as const) {
+				const relPath = path.join(dir.name, `index.${indexExt}`)
+				try {
+					await fs.access(path.join(collectionPath, relPath))
+					return { slug: dir.name, relPath }
+				} catch {
+					// try next extension
+				}
+			}
+			return null
+		}))
+		for (const entry of indexLookups) {
+			if (entry) sources.push(entry)
+		}
+
+		if (sources.length === 0) return null
 
 		const fieldMap = new Map<string, FieldObservation>()
 		const entryInfos: CollectionEntryInfo[] = []
-		const ext = dataFiles.some(file => file.name.endsWith('.json'))
+		const ext = sources.some(s => s.relPath.endsWith('.json'))
 			? 'json' as const
-			: dataFiles.some(file => file.name.endsWith('.yaml'))
+			: sources.some(s => s.relPath.endsWith('.yaml'))
 			? 'yaml' as const
 			: 'yml' as const
 
 		const fileContents = await Promise.all(
-			dataFiles.map(file => fs.readFile(path.join(collectionPath, file.name), 'utf-8').catch(() => null)),
+			sources.map(s => fs.readFile(path.join(collectionPath, s.relPath), 'utf-8').catch(() => null)),
 		)
 
-		for (let i = 0; i < dataFiles.length; i++) {
-			const file = dataFiles[i]!
+		for (let i = 0; i < sources.length; i++) {
+			const source = sources[i]!
 			const raw = fileContents[i]!
 			if (raw === null) continue
 			let data: Record<string, unknown> | null = null
 			try {
-				data = file.name.endsWith('.json') ? JSON.parse(raw) : parseYaml(raw) as Record<string, unknown>
+				data = source.relPath.endsWith('.json') ? JSON.parse(raw) : parseYaml(raw) as Record<string, unknown>
 			} catch {
 				continue
 			}
 			if (!data || typeof data !== 'object') continue
 
-			const slug = file.name.replace(/\.(json|ya?ml)$/, '')
 			const title = typeof data.name === 'string' ? data.name : typeof data.title === 'string' ? data.title : undefined
-			entryInfos.push({ slug, title, sourcePath: path.join(contentDir, collectionName, file.name), data })
+			entryInfos.push({
+				slug: source.slug,
+				title,
+				sourcePath: path.join(contentDir, collectionName, source.relPath),
+				data,
+			})
 
-			collectFieldObservations(fieldMap, data, dataFiles.length)
+			collectFieldObservations(fieldMap, data, sources.length)
 		}
 
-		return buildCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, dataFiles.length, {
+		return buildCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, sources.length, {
 			type: 'data',
 			fileExtension: ext,
 		})

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

@@ -4,6 +4,7 @@ import * as signals from '../signals'
 import { saveAttributeEditsToStorage } from '../storage'
 import type { Attribute } from '../types'
 import { ComboBoxField, FieldLabel, ImageField, NumberField, SelectField, TextField, ToggleField } from './fields'
+import { CloseButton } from './modal-shell'
 
 // ============================================================================
 // Attribute Field Configuration
@@ -542,16 +543,7 @@ export function AttributeEditor({ onClose }: AttributeEditorProps) {
 							</span>
 						)}
 					</div>
-					<button
-						type="button"
-						onClick={handleClose}
-						class="text-white/50 hover:text-white cursor-pointer p-1.5 hover:bg-white/10 rounded-full transition-colors"
-						data-cms-ui
-					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-						</svg>
-					</button>
+					<CloseButton onClick={handleClose} size="sm" />
 				</div>
 
 				{/* Content */}

package/src/editor/components/bg-image-overlay.tsx

@@ -5,6 +5,7 @@ import { cn } from '../lib/cn'
 import * as signals from '../signals'
 import { saveBgImageEditsToStorage } from '../storage'
 import { FieldLabel, ImageField, SelectField } from './fields'
+import { CloseButton } from './modal-shell'
 
 export interface BgImageOverlayProps {
 	visible: boolean
@@ -232,16 +233,7 @@ export function BgImageOverlay({ visible, rect, element, cmsId }: BgImageOverlay
 									</span>
 								)}
 							</div>
-							<button
-								type="button"
-								onClick={handleClose}
-								class="text-white/50 hover:text-white cursor-pointer p-1.5 hover:bg-white/10 rounded-full transition-colors"
-								data-cms-ui
-							>
-								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-								</svg>
-							</button>
+							<CloseButton onClick={handleClose} size="sm" />
 						</div>
 
 						{/* Content */}

package/src/editor/components/collections-browser.tsx

@@ -1,5 +1,6 @@
 import { signal } from '@preact/signals'
 import { useMemo, useState } from 'preact/hooks'
+import { useSearchFilter } from '../hooks/useSearchFilter'
 import { deleteMarkdownPage } from '../markdown-api'
 import {
 	closeCollectionsBrowser,
@@ -12,7 +13,7 @@ import {
 	selectedBrowserCollection,
 } from '../signals'
 import { ChevronRightIcon, CollectionIcon } from './create-page-modal'
-import { CloseButton, ModalBackdrop, ModalHeader } from './modal-shell'
+import { CloseButton, ModalBackdrop, ModalHeader, PrimaryButton } from './modal-shell'
 
 const deletingEntry = signal<string | null>(null)
 const confirmDeleteSlug = signal<string | null>(null)
@@ -33,11 +34,7 @@ export function CollectionsBrowser() {
 	const selectedDef = selected ? collectionDefinitions[selected] : undefined
 	const entries = selectedDef?.entries ?? EMPTY_ENTRIES
 
-	const filteredEntries = useMemo(() => {
-		if (!search) return entries
-		const q = search.toLowerCase()
-		return entries.filter(e => (e.title || '').toLowerCase().includes(q) || e.slug.toLowerCase().includes(q))
-	}, [entries, search])
+	const filteredEntries = useSearchFilter(entries, search, e => `${e.title ?? ''} ${e.slug}`)
 
 	if (!visible) return null
 
@@ -116,14 +113,9 @@ export function CollectionsBrowser() {
 						<h2 class="text-lg font-semibold text-white">{def.label}</h2>
 					</div>
 					<div class="flex items-center gap-2">
-						<button
-							type="button"
-							onClick={handleAddNew}
-							class="px-3 py-1.5 text-sm font-medium text-black bg-cms-primary hover:bg-cms-primary/80 rounded-cms-pill transition-colors"
-							data-cms-ui
-						>
+						<PrimaryButton onClick={handleAddNew} className="px-3 py-1.5">
 							+ Add New
-						</button>
+						</PrimaryButton>
 						<CloseButton onClick={handleClose} />
 					</div>
 				</div>

package/src/editor/components/color-toolbar.tsx

@@ -12,6 +12,7 @@ import { CSS, Z_INDEX } from '../constants'
 import { cn } from '../lib/cn'
 import * as signals from '../signals'
 import type { Attribute, AvailableColors } from '../types'
+import { CloseButton } from './modal-shell'
 
 export interface ColorToolbarProps {
 	visible: boolean
@@ -247,15 +248,7 @@ export function ColorToolbar({
 				{/* Header */}
 				<div class="flex items-center justify-between">
 					<span class="font-medium text-white">Element Colors</span>
-					<button
-						type="button"
-						onClick={onClose}
-						class="text-white/50 hover:text-white cursor-pointer p-1.5 hover:bg-white/10 rounded-full transition-colors"
-					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-						</svg>
-					</button>
+					{onClose && <CloseButton onClick={onClose} size="sm" />}
 				</div>
 
 				{/* Background color section */}

package/src/editor/components/confirm-dialog.tsx

@@ -1,6 +1,6 @@
 import { cn } from '../lib/cn'
 import { confirmDialogState } from '../signals'
-import { ModalBackdrop } from './modal-shell'
+import { CancelButton, ModalBackdrop, ModalFooter } from './modal-shell'
 
 export function ConfirmDialog() {
 	const state = confirmDialogState.value
@@ -27,16 +27,8 @@ export function ConfirmDialog() {
 				<p class="text-sm text-white/70 leading-relaxed">{state.message}</p>
 			</div>
 
-			{/* Footer */}
-			<div class="flex items-center justify-end gap-3 p-5 pt-4 border-t border-white/10 bg-white/5 rounded-b-cms-xl">
-				<button
-					type="button"
-					onClick={handleCancel}
-					class="px-4 py-2.5 text-sm text-white/80 font-medium rounded-cms-pill hover:bg-white/10 hover:text-white transition-colors cursor-pointer"
-					data-cms-ui
-				>
-					{state.cancelLabel}
-				</button>
+			<ModalFooter>
+				<CancelButton onClick={handleCancel} label={state.cancelLabel} />
 				<button
 					type="button"
 					onClick={handleConfirm}
@@ -50,7 +42,7 @@ export function ConfirmDialog() {
 				>
 					{state.confirmLabel}
 				</button>
-			</div>
+			</ModalFooter>
 		</ModalBackdrop>
 	)
 }

package/src/editor/components/create-page-modal.tsx

@@ -14,6 +14,7 @@ import {
 } from '../signals'
 import type { LayoutInfo } from '../types'
 import { CancelButton, ModalBackdrop, ModalFooter, ModalHeader } from './modal-shell'
+import { Spinner } from './spinner'
 
 export function CreatePageModal() {
 	const visible = isCreatePageOpen.value
@@ -494,15 +495,6 @@ function PageCreatingOverlay({ phase, slug }: { phase: 'creating' | 'preparing';
 	)
 }
 
-function Spinner() {
-	return (
-		<svg class="w-8 h-8 animate-spin text-cms-primary" viewBox="0 0 24 24" fill="none" data-cms-ui>
-			<circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" />
-			<path class="opacity-80" d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
-		</svg>
-	)
-}
-
 /**
  * Poll a URL until the dev server returns a non-404 response,
  * so navigation doesn't land on a 404 while Astro processes the new file.