@nuasite/cms 0.41.0 → 0.42.0

package/package.json

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

package/src/collection-scanner.ts

@@ -1,3 +1,4 @@
+import type { Dirent } from 'node:fs'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import { isMap, isPair, isScalar, parse as parseYaml, parseDocument } from 'yaml'
@@ -330,7 +331,7 @@ function collectFieldObservations(
 	}
 }
 
-function buildCollectionDefinition(
+function assembleCollectionDefinition(
 	collectionName: string,
 	contentDir: string,
 	fieldMap: Map<string, FieldObservation>,
@@ -359,6 +360,84 @@ function buildCollectionDefinition(
 	}
 }
 
+function getCollectionSourceBasePath(basePath: string, collectionName: string, contentDir: string): string {
+	const projectRoot = getProjectRoot()
+	const defaultContentDir = path.isAbsolute(contentDir) ? contentDir : path.join(projectRoot, contentDir)
+	const defaultCollectionPath = path.join(defaultContentDir, collectionName)
+	if (path.resolve(basePath) === path.resolve(defaultCollectionPath)) {
+		return path.join(contentDir, collectionName)
+	}
+
+	const relativeBase = path.relative(projectRoot, basePath)
+	if (relativeBase && !relativeBase.startsWith('..') && !path.isAbsolute(relativeBase)) {
+		return relativeBase
+	}
+	return basePath
+}
+
+async function buildCollectionDefinition(
+	basePath: string,
+	sources: Array<{ slug: string; relPath: string }>,
+	collectionName: string,
+	contentDir: string,
+): Promise<CollectionDefinition | null> {
+	if (sources.length === 0) return null
+
+	const sourceBasePath = getCollectionSourceBasePath(basePath, collectionName, contentDir)
+	const hasMd = sources.some(s => s.relPath.endsWith('.md'))
+	const fileExtension: 'md' | 'mdx' = hasMd ? 'md' : 'mdx'
+
+	const fieldMap = new Map<string, FieldObservation>()
+	const allDirectives: Record<string, { position?: 'sidebar' | 'header'; group?: string }> = {}
+	const entryInfos: CollectionEntryInfo[] = []
+	let hasDraft = false
+
+	const fileContents = await Promise.all(
+		sources.map(s => fs.readFile(path.join(basePath, s.relPath), 'utf-8')),
+	)
+
+	for (let i = 0; i < sources.length; i++) {
+		const source = sources[i]!
+		const content = fileContents[i]!
+		const frontmatter = parseFrontmatter(content)
+
+		const directives = parseFieldDirectives(content)
+		for (const [key, value] of Object.entries(directives)) {
+			if (!allDirectives[key]) {
+				allDirectives[key] = value
+			}
+		}
+
+		const entryInfo: CollectionEntryInfo = {
+			slug: source.slug,
+			sourcePath: path.join(sourceBasePath, source.relPath),
+		}
+		if (frontmatter) {
+			if (typeof frontmatter.title === 'string') {
+				entryInfo.title = frontmatter.title
+			}
+			if (typeof frontmatter.draft === 'boolean' && frontmatter.draft) {
+				entryInfo.draft = true
+			}
+			entryInfo.data = frontmatter
+		}
+		entryInfos.push(entryInfo)
+
+		if (!frontmatter) continue
+
+		if (frontmatter.draft === true) hasDraft = true
+		collectFieldObservations(fieldMap, frontmatter, sources.length)
+	}
+
+	const def = assembleCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, sources.length, {
+		path: sourceBasePath,
+		supportsDraft: hasDraft,
+		fileExtension,
+	})
+	assignFieldMetadata(def.fields, allDirectives)
+	return def
+}
+
 /**
  * Scan a single collection directory and infer its schema
  */
@@ -397,58 +476,86 @@ async function scanCollection(collectionPath: string, collectionName: string, co
 		}
 
 		if (sources.length === 0) return null
+		return await buildCollectionDefinition(collectionPath, sources, collectionName, contentDir)
+	} catch {
+		return null
+	}
+}
 
-		const hasMd = sources.some(s => s.relPath.endsWith('.md'))
-		const fileExtension: 'md' | 'mdx' = hasMd ? 'md' : 'mdx'
-
-		const fieldMap = new Map<string, FieldObservation>()
-		const allDirectives: Record<string, { position?: 'sidebar' | 'header'; group?: string }> = {}
-		const entryInfos: CollectionEntryInfo[] = []
-		let hasDraft = false
-
-		const fileContents = await Promise.all(
-			sources.map(s => fs.readFile(path.join(collectionPath, s.relPath), 'utf-8')),
-		)
-
-		for (let i = 0; i < sources.length; i++) {
-			const source = sources[i]!
-			const content = fileContents[i]!
-			const frontmatter = parseFrontmatter(content)
-
-			const directives = parseFieldDirectives(content)
-			for (const [key, value] of Object.entries(directives)) {
-				if (!allDirectives[key]) {
-					allDirectives[key] = value
-				}
-			}
-
-			const entryInfo: CollectionEntryInfo = {
-				slug: source.slug,
-				sourcePath: path.join(contentDir, collectionName, source.relPath),
+/** Convert a glob pattern (supports `*`, `**`, `?`, `{a,b}`) to an anchored RegExp. */
+function globToRegExp(glob: string): RegExp {
+	let re = ''
+	for (let i = 0; i < glob.length; i++) {
+		const c = glob[i]!
+		if (c === '*') {
+			if (glob[i + 1] === '*') {
+				re += '.*'
+				i++
+				if (glob[i + 1] === '/') i++
+			} else {
+				re += '[^/]*'
 			}
-			if (frontmatter) {
-				if (typeof frontmatter.title === 'string') {
-					entryInfo.title = frontmatter.title
-				}
-				if (typeof frontmatter.draft === 'boolean' && frontmatter.draft) {
-					entryInfo.draft = true
-				}
-				entryInfo.data = frontmatter
+		} else if (c === '?') {
+			re += '[^/]'
+		} else if (c === '{') {
+			const end = glob.indexOf('}', i)
+			if (end === -1) {
+				re += '\\{'
+			} else {
+				const opts = glob.slice(i + 1, end).split(',').map(s => s.replace(/[.+^${}()|[\]\\]/g, '\\$&'))
+				re += `(?:${opts.join('|')})`
+				i = end
 			}
-			entryInfos.push(entryInfo)
-
-			if (!frontmatter) continue
+		} else if ('.+^$()|[]\\'.includes(c)) {
+			re += `\\${c}`
+		} else {
+			re += c
+		}
+	}
+	return new RegExp(`^${re}$`)
+}
 
-			if (frontmatter.draft === true) hasDraft = true
-			collectFieldObservations(fieldMap, frontmatter, sources.length)
+/** Recursively list files under `dir`, returning forward-slash paths relative to `dir`. */
+async function walkFiles(dir: string, prefix = ''): Promise<string[]> {
+	let dirEntries: Dirent[]
+	try {
+		dirEntries = await fs.readdir(dir, { withFileTypes: true })
+	} catch {
+		return []
+	}
+	const out: string[] = []
+	for (const entry of dirEntries) {
+		if (entry.name.startsWith('_') || entry.name.startsWith('.')) continue
+		const rel = prefix ? `${prefix}/${entry.name}` : entry.name
+		if (entry.isDirectory()) {
+			out.push(...await walkFiles(path.join(dir, entry.name), rel))
+		} else if (entry.isFile()) {
+			out.push(rel)
 		}
+	}
+	return out
+}
 
-		const def = buildCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, sources.length, {
-			supportsDraft: hasDraft,
-			fileExtension,
-		})
-		assignFieldMetadata(def.fields, allDirectives)
-		return def
+/**
+ * Scan a collection declared in content config via a glob loader (base + pattern),
+ * which may share a base directory with another collection (nested layout).
+ * Runtime-agnostic: walks the filesystem and matches the glob (no Bun.Glob dependency).
+ */
+async function scanGlobCollection(
+	collectionName: string,
+	baseRel: string,
+	pattern: string,
+	contentDir: string,
+): Promise<CollectionDefinition | null> {
+	try {
+		const absBase = path.join(getProjectRoot(), baseRel)
+		const matcher = globToRegExp(pattern)
+		const sources = (await walkFiles(absBase))
+			.filter(rel => (rel.endsWith('.md') || rel.endsWith('.mdx')) && matcher.test(rel))
+			.map(rel => ({ slug: rel.replace(/\.(md|mdx)$/, ''), relPath: rel }))
+
+		if (sources.length === 0) return null
+		return await buildCollectionDefinition(absBase, sources, collectionName, contentDir)
 	} catch {
 		return null
 	}
@@ -820,7 +927,7 @@ async function scanDataCollection(collectionPath: string, collectionName: string
 			collectFieldObservations(fieldMap, data, sources.length)
 		}
 
-		return buildCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, sources.length, {
+		return assembleCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, sources.length, {
 			type: 'data',
 			fileExtension: ext,
 		})
@@ -859,6 +966,20 @@ export async function scanCollections(contentDir: string = 'src/content'): Promi
 
 	// Post-scan: apply schema-driven field config, detect references, derived fields, and ordering
 	const parsed = await parseContentConfig()
+	for (const [collectionName, parsedCollection] of parsed) {
+		if (collections[collectionName]) continue
+		if (!parsedCollection.loaderBase || !parsedCollection.loaderPattern) continue
+		const definition = await scanGlobCollection(collectionName, parsedCollection.loaderBase, parsedCollection.loaderPattern, contentDir)
+		if (!definition) continue
+		// Nest under the collection that owns the shared base directory (e.g. jsem-otazky -> jsem),
+		// so the CMS browser can group it under its parent page instead of listing it flat.
+		const baseName = parsedCollection.loaderBase.replace(/[/\\]+$/, '').split(/[/\\]/).pop()
+		if (baseName && baseName !== collectionName && collections[baseName]) {
+			definition.parentCollection = baseName
+		}
+		collections[collectionName] = definition
+	}
+
 	applyParsedConfig(collections, parsed)
 	detectReferenceFields(collections, parsed)
 	detectDerivedHrefFields(collections)

package/src/content-config-ast.ts

@@ -29,6 +29,8 @@ export interface ParsedField {
 export interface ParsedCollection {
 	name: string
 	fields: ParsedField[]
+	loaderPattern?: string
+	loaderBase?: string
 }
 
 export type ParsedConfig = Map<string, ParsedCollection>
@@ -129,6 +131,7 @@ export function parseConfigSource(source: string, sourcePath?: string): ParsedCo
 	const bindings: Bindings = new Map()
 	const collectionDecls = new Map<string, t.ObjectExpression>()
 	const exportMap = new Map<string, string>() // varName → collectionName
+	const inlineCollections = new Map<string, t.ObjectExpression>() // collectionName → defineCollection arg (inline form)
 
 	for (const stmt of ast.program.body) {
 		const varDecl = stmt.type === 'ExportNamedDeclaration' && stmt.declaration?.type === 'VariableDeclaration'
@@ -151,6 +154,12 @@ export function parseConfigSource(source: string, sourcePath?: string): ParsedCo
 					if (!key) continue
 					if (prop.value.type === 'Identifier') {
 						exportMap.set(prop.value.name, key)
+					} else if (prop.value.type === 'CallExpression' && isDefineCollectionCallee(prop.value.callee)) {
+						// Inline form: `collections = { name: defineCollection({...}) }`
+						const inlineArg = prop.value.arguments[0]
+						if (inlineArg?.type === 'ObjectExpression') {
+							inlineCollections.set(key, inlineArg)
+						}
 					}
 				}
 				continue
@@ -165,23 +174,57 @@ export function parseConfigSource(source: string, sourcePath?: string): ParsedCo
 		}
 	}
 
+	// Unify both styles: inline `name: defineCollection({...})` and the
+	// `const x = defineCollection({...}); collections = { name: x }` reference form.
+	const collectionObjects = new Map<string, t.ObjectExpression>(inlineCollections)
 	for (const [varName, collectionName] of exportMap) {
 		const decl = collectionDecls.get(varName)
-		if (!decl) continue
+		if (decl) collectionObjects.set(collectionName, decl)
+	}
+
+	for (const [collectionName, decl] of collectionObjects) {
+		const loaderProperty = decl.properties.find(
+			p =>
+				p.type === 'ObjectProperty'
+				&& propertyKeyName(p.key) === 'loader',
+		) as t.ObjectProperty | undefined
+		const loaderOptions = loaderProperty ? extractGlobLoaderOptions(loaderProperty.value, bindings) : {}
+		const loaderPattern = loaderOptions.pattern
+		const loaderBase = loaderOptions.base
 
 		const schemaProperty = decl.properties.find(
 			p =>
 				p.type === 'ObjectProperty'
 				&& propertyKeyName(p.key) === 'schema',
 		) as t.ObjectProperty | undefined
-		if (!schemaProperty) continue
+		if (!schemaProperty) {
+			if (!loaderPattern) continue
+			result.set(collectionName, {
+				name: collectionName,
+				fields: [],
+				loaderPattern,
+				loaderBase,
+			})
+			continue
+		}
 
 		const schemaObject = unwrapSchemaToObject(schemaProperty.value, bindings)
-		if (!schemaObject) continue
+		if (!schemaObject) {
+			if (!loaderPattern) continue
+			result.set(collectionName, {
+				name: collectionName,
+				fields: [],
+				loaderPattern,
+				loaderBase,
+			})
+			continue
+		}
 
 		result.set(collectionName, {
 			name: collectionName,
 			fields: parseSchemaFields(schemaObject, bindings),
+			loaderPattern,
+			loaderBase,
 		})
 	}
 
@@ -198,6 +241,41 @@ function propertyKeyName(key: t.Node): string | null {
 	return null
 }
 
+function extractGlobLoaderOptions(node: t.Node, bindings: Bindings): { pattern?: string; base?: string } {
+	const resolved = resolveExpression(node, bindings)
+	if (resolved.type !== 'CallExpression') return {}
+	if (!isGlobCallee(resolved.callee)) return {}
+
+	const arg = resolved.arguments[0]
+	if (!arg) return {}
+	const options = resolveExpression(arg, bindings)
+	if (options.type !== 'ObjectExpression') return {}
+
+	const result: { pattern?: string; base?: string } = {}
+	for (const prop of options.properties) {
+		if (prop.type !== 'ObjectProperty') continue
+		const key = propertyKeyName(prop.key)
+		if (key !== 'pattern' && key !== 'base') continue
+		const value = extractStaticString(prop.value, bindings)
+		if (value !== undefined) result[key] = value
+	}
+
+	return result
+}
+
+function extractStaticString(node: t.Node, bindings: Bindings): string | undefined {
+	const resolved = resolveExpression(node, bindings)
+	if (resolved.type === 'StringLiteral') return resolved.value
+	if (resolved.type === 'TemplateLiteral' && resolved.expressions.length === 0) {
+		return resolved.quasis[0]?.value.cooked ?? resolved.quasis[0]?.value.raw
+	}
+	return undefined
+}
+
+function isGlobCallee(callee: t.Node): boolean {
+	return callee.type === 'Identifier' && callee.name === 'glob'
+}
+
 /**
  * Unwrap a `schema:` value down to the top-level (z|n).object({ ... }) ObjectExpression.
  * Handles direct calls, the Astro callback form `({ image }) => z.object({...})`,

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

@@ -1,6 +1,7 @@
 import { signal } from '@preact/signals'
 import { useMemo, useState } from 'preact/hooks'
 import { useSearchFilter } from '../hooks/useSearchFilter'
+import { cn } from '../lib/cn'
 import { deleteMarkdownPage } from '../markdown-api'
 import {
 	closeCollectionsBrowser,
@@ -241,20 +242,35 @@ export function CollectionsBrowser() {
 		)
 	}
 
-	// Collection list
+	// Collection list — group nested (child) collections under their parent
+	const ordered: Array<{ col: typeof collections[number]; nested: boolean }> = []
+	for (const col of collections.filter(c => !c.parentCollection)) {
+		ordered.push({ col, nested: false })
+		for (const child of collections.filter(c => c.parentCollection === col.name)) {
+			ordered.push({ col: child, nested: true })
+		}
+	}
+	// Append any orphaned children whose parent isn't present, so nothing is hidden.
+	for (const col of collections.filter(c => c.parentCollection && !collections.some(p => p.name === c.parentCollection))) {
+		ordered.push({ col, nested: false })
+	}
+
 	return (
 		<ModalBackdrop onClose={handleClose} extraClass="flex flex-col max-h-[80vh]">
 			<ModalHeader title="Collections" onClose={handleClose} />
 			<div class="p-5 space-y-2 overflow-y-auto flex-1 min-h-0">
-				{collections.map((col) => (
+				{ordered.map(({ col, nested }) => (
 					<button
 						key={col.name}
 						type="button"
 						onClick={() => selectBrowserCollection(col.name)}
-						class="group w-full flex items-center gap-4 p-4 bg-white/5 hover:bg-white/10 rounded-cms-lg border border-white/10 hover:border-white/20 transition-colors text-left cursor-pointer"
+						class={cn(
+							'group w-full flex items-center gap-4 p-4 bg-white/5 hover:bg-white/10 rounded-cms-lg border border-white/10 hover:border-white/20 transition-colors text-left cursor-pointer',
+							nested && 'ml-8 w-[calc(100%-2rem)] border-l-2 border-l-cms-primary/40',
+						)}
 						data-cms-ui
 					>
-						<div class="shrink-0 w-10 h-10 bg-cms-primary/20 rounded-cms-sm flex items-center justify-center">
+						<div class={cn('shrink-0 bg-cms-primary/20 rounded-cms-sm flex items-center justify-center', nested ? 'w-8 h-8' : 'w-10 h-10')}>
 							<CollectionIcon />
 						</div>
 						<div class="flex-1 min-w-0">

package/src/editor/components/frontmatter-fields.tsx

@@ -573,7 +573,35 @@ export function SchemaFrontmatterField({
 				</div>
 			)
 
-		case 'date':
+		case 'date': {
+			// A `date` field's value is often a full datetime (e.g. "2026-04-14T08:35:00"),
+			// which an <input type="date"> can't display (it needs YYYY-MM-DD). Show only the
+			// date part, but preserve the original time component on change so editing the date
+			// doesn't silently drop the time.
+			const raw = value == null ? '' : String(value)
+			// Preserve the full time component on change — including fractional seconds and any
+			// timezone designator (Z or ±HH:MM) — so editing only the date never drops them.
+			const timeSuffix = raw.match(/T\d{2}:\d{2}(:\d{2})?(\.\d+)?(Z|[+-]\d{2}:?\d{2})?/)?.[0] ?? ''
+			return (
+				<div class="flex flex-col gap-1" data-cms-ui>
+					<label class="text-xs text-white/60 font-medium">{label}</label>
+					<input
+						type="date"
+						value={raw.slice(0, 10)}
+						min={hints?.min != null ? String(hints.min) : undefined}
+						max={hints?.max != null ? String(hints.max) : undefined}
+						required={field.required}
+						onInput={(e) => {
+							const d = (e.target as HTMLInputElement).value
+							onChange(d ? `${d}${timeSuffix}` : '')
+						}}
+						class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white focus:outline-none focus:border-white/40"
+						data-cms-ui
+					/>
+				</div>
+			)
+		}
+
 		case 'datetime':
 		case 'time':
 		case 'month':

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

@@ -60,7 +60,7 @@ export function MarkdownEditorOverlay() {
 		: activeCollectionDef?.fileExtension === 'mdx'
 
 	const [isSaving, setIsSaving] = useState(false)
-	const [showFrontmatter, setShowFrontmatter] = useState(isCreateMode || isDataCollection)
+	const [showFrontmatter, setShowFrontmatter] = useState(isCreateMode || isDataCollection || config.value.openMetadataByDefault === true)
 	// Track whether the user has manually edited the slug (disables auto-slug from title)
 	const [slugManuallyEdited, setSlugManuallyEdited] = useState(false)
 	// Preview mode state

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

@@ -20,6 +20,7 @@ import { insertMdxComponentCommand, mdxComponentPlugin } from '../milkdown-mdx-p
 import { type ActiveFormats, defaultActiveFormats, isInListType, setupFormatTracking, toggleHeading } from '../milkdown-utils'
 import { config, mdxComponentPickerOpen, openMediaLibraryWithCallback, resetMarkdownEditorState, showToast, updateMarkdownContent } from '../signals'
 import { STRINGS } from '../strings'
+import { setBulletListStyleCommand, styledListPlugin } from '../styled-list-plugin'
 import { LinkEditPopover } from './link-edit-popover'
 import { MdxComponentIcon } from './mdx-block-view'
 import { MdxComponentPicker } from './mdx-component-picker'
@@ -48,6 +49,7 @@ export function MarkdownInlineEditor({
 	const [isReady, setIsReady] = useState(false)
 	const [isDragging, setIsDragging] = useState(false)
 	const [uploadProgress, setUploadProgress] = useState<number | null>(null)
+	const listStyles = (config.value.listStyles ?? []).filter(style => style.label && style.class)
 
 	// Track active formatting for toolbar highlighting
 	const [activeFormats, setActiveFormats] = useState<ActiveFormats>(defaultActiveFormats)
@@ -91,6 +93,15 @@ export function MarkdownInlineEditor({
 						})
 					})
 					.use(commonmark)
+
+				// Styled bullet lists are opt-in: only load the plugin (and its `-` bullet
+				// normalization) when the site configures list styles, so sites that don't use
+				// the feature keep their previous list serialization untouched.
+				if (listStyles.length > 0) {
+					builder.use(styledListPlugin)
+				}
+
+				builder
 					.use(gfm)
 					.use(listener)
 
@@ -124,6 +135,21 @@ export function MarkdownInlineEditor({
 		}
 	}, [])
 
+	// Adopt content that streams in AFTER the editor mounted with a placeholder.
+	// The collections browser opens the modal immediately (empty), then fetches
+	// the entry body, so `initialContent` changes once content arrives. The
+	// Milkdown instance is created once, so re-seed it here — but only while the
+	// user hasn't edited the placeholder yet, so in-progress edits are never lost.
+	useEffect(() => {
+		if (!isReady) return
+		if (initialContent === initialContentRef.current) return
+		if (contentRef.current === initialContentRef.current) {
+			editorInstanceRef.current?.action(replaceAll(initialContent))
+			setContent(initialContent)
+		}
+		initialContentRef.current = initialContent
+	}, [initialContent, isReady])
+
 	const handleSave = useCallback(() => {
 		onSave(content)
 		resetMarkdownEditorState()
@@ -235,6 +261,15 @@ export function MarkdownInlineEditor({
 		}
 	}, [runCommand, checkInList])
 
+	const handleListStyle = useCallback((listStyle: string | null) => {
+		if (!editorInstanceRef.current) return
+		try {
+			editorInstanceRef.current.action(callCommand(setBulletListStyleCommand.key, listStyle))
+		} catch (error) {
+			console.error('Failed to set list style:', error)
+		}
+	}, [])
+
 	const handleInsertHeading = useCallback((level: number) => {
 		if (!editorInstanceRef.current) return
 		try {
@@ -537,6 +572,21 @@ export function MarkdownInlineEditor({
 							</text>
 						</svg>
 					</ToolbarButton>
+					{listStyles.length > 0 && (
+						<select
+							class={cn(
+								'h-8 max-w-40 rounded-cms-sm border border-white/15 bg-cms-dark px-2 text-xs text-white/90 outline-none transition-colors',
+								'hover:bg-white/10 focus:border-cms-primary focus:ring-1 focus:ring-cms-primary',
+								!activeFormats.bulletList && 'opacity-60',
+							)}
+							title="List style"
+							value={activeFormats.listStyle ?? ''}
+							onChange={(event) => handleListStyle((event.currentTarget as HTMLSelectElement).value || null)}
+						>
+							<option value="">Default</option>
+							{listStyles.map(style => <option key={style.class} value={style.class}>{style.label}</option>)}
+						</select>
+					)}
 					<ToolbarButton
 						onClick={handleQuote}
 						title="Quote"

package/src/editor/components/toolbar.tsx

@@ -28,7 +28,7 @@ export interface ToolbarProps {
 	collectionDefinitions?: Record<string, CollectionDefinition>
 }
 
-type MenuItem = { label: string; icon: ComponentChildren; onClick: () => void; isActive?: boolean }
+type MenuItem = { label: string; icon: ComponentChildren; onClick: () => void; isActive?: boolean; indented?: boolean }
 type MenuSection = { label: string; icon: ComponentChildren; items: MenuItem[] }
 
 const GridIcon = () => (
@@ -98,9 +98,23 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 	if (collectionDefinitions) {
 		const entries = Object.entries(collectionDefinitions)
 		if (entries.length > 0) {
-			const contentItems: MenuItem[] = entries.map(([name, def]) => ({
+			// Group nested (child) collections under their parent, child entries indented.
+			const ordered: Array<[string, CollectionDefinition, boolean]> = []
+			for (const [name, def] of entries.filter(([, d]) => !d.parentCollection)) {
+				ordered.push([name, def, false])
+				for (const [childName, childDef] of entries.filter(([, d]) => d.parentCollection === name)) {
+					ordered.push([childName, childDef, true])
+				}
+			}
+			// Orphaned children whose parent isn't present stay top-level so nothing is hidden.
+			for (const [name, def] of entries.filter(([, d]) => d.parentCollection && !collectionDefinitions[d.parentCollection])) {
+				ordered.push([name, def, false])
+			}
+
+			const contentItems: MenuItem[] = ordered.map(([name, def, indented]) => ({
 				label: def.label,
 				icon: <GridIcon />,
+				indented,
 				onClick: () => callbacks.onOpenCollection?.(name),
 			}))
 
@@ -410,6 +424,7 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 																		}}
 																		class={cn(
 																			'w-full pl-9 pr-4 py-2 text-sm text-left transition-colors cursor-pointer flex items-center gap-3',
+																			item.indented && 'pl-16 text-xs text-white/45',
 																			item.isActive
 																				? 'bg-white/20 text-white'
 																				: 'text-white/60 hover:bg-white/10 hover:text-white',

package/src/editor/milkdown-utils.ts

@@ -10,6 +10,7 @@ export interface ActiveFormats {
 	linkHref: string | null
 	bulletList: boolean
 	orderedList: boolean
+	listStyle: string | null
 	blockquote: boolean
 	heading: number | null
 }
@@ -22,6 +23,7 @@ export const defaultActiveFormats: ActiveFormats = {
 	linkHref: null,
 	bulletList: false,
 	orderedList: false,
+	listStyle: null,
 	blockquote: false,
 	heading: null,
 }
@@ -71,12 +73,16 @@ export function getActiveFormats(view: EditorView): ActiveFormats {
 	// Check block types (lists, blockquote, heading)
 	let bulletList = false
 	let orderedList = false
+	let listStyle: string | null = null
 	let blockquote = false
 	let heading: number | null = null
 
 	for (let depth = $from.depth; depth > 0; depth--) {
 		const node = $from.node(depth)
-		if (node.type.name === 'bullet_list') bulletList = true
+		if (node.type.name === 'bullet_list') {
+			bulletList = true
+			listStyle = typeof node.attrs.listStyle === 'string' ? node.attrs.listStyle : null
+		}
 		if (node.type.name === 'ordered_list') orderedList = true
 		if (node.type.name === 'blockquote') blockquote = true
 	}
@@ -85,7 +91,7 @@ export function getActiveFormats(view: EditorView): ActiveFormats {
 		heading = $from.parent.attrs.level as number
 	}
 
-	return { bold, italic, strikethrough, link, linkHref, bulletList, orderedList, blockquote, heading }
+	return { bold, italic, strikethrough, link, linkHref, bulletList, orderedList, listStyle, blockquote, heading }
 }
 
 /**
@@ -150,6 +156,7 @@ function formatsEqual(a: ActiveFormats, b: ActiveFormats): boolean {
 		&& a.linkHref === b.linkHref
 		&& a.bulletList === b.bulletList
 		&& a.orderedList === b.orderedList
+		&& a.listStyle === b.listStyle
 		&& a.blockquote === b.blockquote
 		&& a.heading === b.heading
 }