@nuasite/cms 0.18.1 → 0.19.0

package/src/editor/components/highlight-overlay.ts

@@ -2,6 +2,7 @@
  * Shadow DOM-based highlight overlay for CMS elements.
  * This component renders highlights without modifying the target element's styles.
  */
+import { Z_INDEX } from '../constants'
 
 export interface HighlightState {
 	color: string
@@ -38,7 +39,7 @@ class CmsHighlightOverlay extends HTMLElement {
       :host {
         position: absolute;
         pointer-events: none;
-        z-index: 2147483645;
+        z-index: ${Z_INDEX.OVERLAY};
         box-sizing: border-box;
       }
       
@@ -167,7 +168,7 @@ export function initHighlightContainer(): void {
     width: 0;
     height: 0;
     pointer-events: none;
-    z-index: 2147483645;
+    z-index: ${Z_INDEX.OVERLAY};
   `
 	document.body.appendChild(highlightContainer)
 }

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

@@ -1,7 +1,8 @@
 import { type Editor, editorViewCtx } from '@milkdown/core'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { slugify } from '../../shared'
 import { updateMarkdownPage } from '../api'
-import { STORAGE_KEYS } from '../constants'
+import { STORAGE_KEYS, Z_INDEX } from '../constants'
 import { startDeploymentPolling } from '../editor'
 import { createMarkdownPage } from '../markdown-api'
 import {
@@ -14,7 +15,8 @@ import {
 	startRedirectCountdown,
 	updateMarkdownFrontmatter,
 } from '../signals'
-import { CreateModeFrontmatter, EditModeFrontmatter, slugify } from './frontmatter-fields'
+import { CreateModeFrontmatter, EditModeFrontmatter } from './frontmatter-fields'
+import { FrontmatterSidebar, partitionFields } from './frontmatter-sidebar'
 import { MarkdownInlineEditor } from './markdown-inline-editor'
 
 /**
@@ -28,8 +30,21 @@ export function MarkdownEditorOverlay() {
 	const createOptions = editorState.createOptions
 	const collectionDef = editorState.collectionDefinition
 
+	const activeCollectionDef = isCreateMode ? createOptions?.collectionDefinition : collectionDef
+	const { sidebar: sidebarFields, header: headerFields } = activeCollectionDef
+		? partitionFields(activeCollectionDef.fields)
+		: { sidebar: [], header: [] }
+	const hasSidebar = sidebarFields.length > 0
+	const isDataCollection = activeCollectionDef?.type === 'data'
+	// Derive MDX mode from the actual file extension when available
+	// (a collection can have mixed .md and .mdx files),
+	// but fall back to the collection file extension in create mode before a file path exists.
+	const isMdx = page?.filePath
+		? page.filePath.endsWith('.mdx')
+		: activeCollectionDef?.fileExtension === 'mdx'
+
 	const [isSaving, setIsSaving] = useState(false)
-	const [showFrontmatter, setShowFrontmatter] = useState(isCreateMode)
+	const [showFrontmatter, setShowFrontmatter] = useState(isCreateMode || isDataCollection)
 	// Track whether the user has manually edited the slug (disables auto-slug from title)
 	const [slugManuallyEdited, setSlugManuallyEdited] = useState(false)
 	// Preview mode state
@@ -37,12 +52,11 @@ export function MarkdownEditorOverlay() {
 	const originalHTMLRef = useRef<string | null>(null)
 	const editorInstanceRef = useRef<Editor | null>(null)
 
-	// Open metadata by default when entering create mode
 	useEffect(() => {
-		if (isCreateMode) {
+		if (isCreateMode || isDataCollection) {
 			setShowFrontmatter(true)
 		}
-	}, [isCreateMode])
+	}, [isCreateMode, isDataCollection])
 
 	const handleDeploymentComplete = useCallback(
 		(status: 'completed' | 'failed' | 'timeout') => {
@@ -142,10 +156,13 @@ export function MarkdownEditorOverlay() {
 
 		setIsSaving(true)
 		try {
-			// Build frontmatter excluding title and slug
+			const isData = opts.collectionDefinition.type === 'data'
+
+			// Build frontmatter — for data collections include all fields; for markdown exclude title
 			const frontmatter: Record<string, unknown> = {}
 			for (const [key, value] of Object.entries(currentPage.frontmatter)) {
-				if (key !== 'title' && value !== undefined && value !== '') {
+				if (!isData && key === 'title') continue
+				if (value !== undefined && value !== '') {
 					frontmatter[key] = value
 				}
 			}
@@ -155,7 +172,8 @@ export function MarkdownEditorOverlay() {
 				title: title.trim(),
 				slug,
 				frontmatter,
-				content: currentPage.content || '',
+				content: isData ? '' : (currentPage.content || ''),
+				fileExtension: opts.collectionDefinition.fileExtension,
 			})
 
 			if (result.success) {
@@ -237,7 +255,8 @@ export function MarkdownEditorOverlay() {
 	if (isPreview) {
 		return (
 			<div
-				class="fixed bottom-6 left-1/2 -translate-x-1/2 z-2147483647 flex items-center gap-3 px-5 py-3 bg-cms-dark/95 border border-white/15 rounded-cms-pill shadow-[0_8px_32px_rgba(0,0,0,0.4)] backdrop-blur-md"
+				style={{ zIndex: Z_INDEX.MODAL }}
+				class="fixed bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 px-5 py-3 bg-cms-dark/95 border border-white/15 rounded-cms-pill shadow-[0_8px_32px_rgba(0,0,0,0.4)] backdrop-blur-md"
 				data-cms-ui
 				onMouseDown={stopPropagation}
 				onClick={stopPropagation}
@@ -293,13 +312,16 @@ export function MarkdownEditorOverlay() {
 
 	return (
 		<div
-			class="fixed inset-0 z-2147483647 bg-black/40 flex items-center justify-center p-4 backdrop-blur-md"
+			style={{ zIndex: Z_INDEX.MODAL }}
+			class="fixed inset-0 bg-black/40 flex items-center justify-center p-4 backdrop-blur-md"
 			data-cms-ui
 			onMouseDown={stopPropagation}
 			onClick={stopPropagation}
 		>
 			<div
-				class="bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-white/10 w-full max-w-4xl max-h-[90vh] flex flex-col"
+				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
 			>
 				{/* Header */}
@@ -326,11 +348,13 @@ export function MarkdownEditorOverlay() {
 						<div>
 							<input
 								type="text"
-								value={(page.frontmatter.title as string) || ''}
-								placeholder="Page title..."
+								value={(page.frontmatter.title as string) || (page.frontmatter.name as string) || ''}
+								placeholder={isDataCollection ? 'Entry name...' : 'Page title...'}
 								onInput={(e) => {
 									const title = (e.target as HTMLInputElement).value
-									updateMarkdownFrontmatter({ title })
+									// Data collections may use 'name' instead of 'title'
+									const titleField = isDataCollection && !('title' in page.frontmatter) && 'name' in page.frontmatter ? 'name' : 'title'
+									updateMarkdownFrontmatter({ [titleField]: title })
 									// Auto-generate slug in create mode if not manually edited
 									if (isCreateMode && !slugManuallyEdited) {
 										markdownEditorState.value = {
@@ -351,49 +375,51 @@ export function MarkdownEditorOverlay() {
 						</div>
 					</div>
 					<div class="flex items-center gap-2">
-						<button
-							type="button"
-							onClick={() => setShowFrontmatter(!showFrontmatter)}
-							class={`px-3 py-2 text-sm rounded-cms-pill transition-colors flex items-center gap-1.5 ${
-								showFrontmatter
-									? 'bg-white/20 text-white'
-									: 'text-white/70 hover:text-white hover:bg-white/10'
-							}`}
-							data-cms-ui
-						>
-							<svg
-								class="w-4 h-4"
-								fill="none"
-								stroke="currentColor"
-								viewBox="0 0 24 24"
-								stroke-width="2"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-								/>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-								/>
-							</svg>
-							Metadata
-							<svg
-								class={`w-3.5 h-3.5 transition-transform ${showFrontmatter ? 'rotate-180' : ''}`}
-								fill="none"
-								stroke="currentColor"
-								viewBox="0 0 24 24"
-								stroke-width="2.5"
+						{!isDataCollection && (
+							<button
+								type="button"
+								onClick={() => setShowFrontmatter(!showFrontmatter)}
+								class={`px-3 py-2 text-sm rounded-cms-pill transition-colors flex items-center gap-1.5 ${
+									showFrontmatter
+										? 'bg-white/20 text-white'
+										: 'text-white/70 hover:text-white hover:bg-white/10'
+								}`}
+								data-cms-ui
 							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M19 9l-7 7-7-7"
-								/>
-							</svg>
-						</button>
+								<svg
+									class="w-4 h-4"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+									stroke-width="2"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+									/>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+									/>
+								</svg>
+								Metadata
+								<svg
+									class={`w-3.5 h-3.5 transition-transform ${showFrontmatter ? 'rotate-180' : ''}`}
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+									stroke-width="2.5"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M19 9l-7 7-7-7"
+									/>
+								</svg>
+							</button>
+						)}
 						{!isCreateMode && editorState.activeElementId && (
 							<button
 								type="button"
@@ -467,37 +493,57 @@ export function MarkdownEditorOverlay() {
 					</div>
 				</div>
 
-				{/* Frontmatter Editor */}
-				{showFrontmatter && (
-					<div class="px-5 py-4 border-b border-white/10 bg-white/5">
-						{isCreateMode && createOptions
-							? (
-								<CreateModeFrontmatter
-									page={page}
-									collectionDefinition={createOptions.collectionDefinition}
-									onSlugManualEdit={() => setSlugManuallyEdited(true)}
-								/>
-							)
-							: (
-								<EditModeFrontmatter
-									page={page}
-									collectionDefinition={collectionDef}
+				{/* Content area: main + optional sidebar */}
+				<div class="flex-1 min-h-0 flex">
+					{/* Main: frontmatter header + editor */}
+					<div class="flex-1 min-w-0 flex flex-col">
+						{/* Frontmatter Editor (header-positioned fields only) */}
+						{(showFrontmatter || isDataCollection) && (
+							<div class={`px-5 py-4 border-b border-white/10 bg-white/5 overflow-y-auto ${isDataCollection ? 'flex-1' : 'max-h-[40vh]'}`}>
+								{isCreateMode && createOptions
+									? (
+										<CreateModeFrontmatter
+											page={page}
+											collectionDefinition={createOptions.collectionDefinition}
+											fields={headerFields}
+											onSlugManualEdit={() => setSlugManuallyEdited(true)}
+										/>
+									)
+									: (
+										<EditModeFrontmatter
+											page={page}
+											collectionDefinition={collectionDef}
+											fields={headerFields}
+										/>
+									)}
+							</div>
+						)}
+
+						{/* Editor — hidden for data collections (JSON/YAML have no body) */}
+						{!isDataCollection && (
+							<div class="flex-1 min-h-0 overflow-auto bg-black/20">
+								<MarkdownInlineEditor
+									elementId={page.slug || 'new-page'}
+									initialContent={page.content}
+									isMdx={isMdx}
+									onSave={isCreateMode ? () => handleCreate() : handleSave}
+									onCancel={handleCancel}
+									onEditorReady={(editor) => {
+										editorInstanceRef.current = editor
+									}}
 								/>
-							)}
+							</div>
+						)}
 					</div>
-				)}
 
-				{/* Editor */}
-				<div class="flex-1 min-h-0 overflow-auto bg-black/20">
-					<MarkdownInlineEditor
-						elementId={page.slug || 'new-page'}
-						initialContent={page.content}
-						onSave={isCreateMode ? () => handleCreate() : handleSave}
-						onCancel={handleCancel}
-						onEditorReady={(editor) => {
-							editorInstanceRef.current = editor
-						}}
-					/>
+					{/* Sidebar (sidebar-positioned fields) */}
+					{hasSidebar && (
+						<FrontmatterSidebar
+							fields={sidebarFields}
+							page={page}
+							collectionDefinition={activeCollectionDef}
+						/>
+					)}
 				</div>
 			</div>
 		</div>

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

@@ -14,11 +14,16 @@ import { gfm, toggleStrikethroughCommand } from '@milkdown/preset-gfm'
 import { callCommand, insert, replaceAll } from '@milkdown/utils'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { uploadMedia } from '../markdown-api'
-import { config, openMediaLibraryWithCallback, resetMarkdownEditorState, showToast, updateMarkdownContent } from '../signals'
+import { insertMdxComponentCommand, mdxComponentPlugin } from '../milkdown-mdx-plugin'
+import { config, mdxComponentPickerOpen, openMediaLibraryWithCallback, resetMarkdownEditorState, showToast, updateMarkdownContent } from '../signals'
+import { MdxComponentIcon } from './mdx-block-view'
+import { MdxComponentPicker } from './mdx-component-picker'
+import { MdxPropsEditor } from './mdx-props-editor'
 
 export interface MarkdownInlineEditorProps {
 	elementId: string
 	initialContent: string
+	isMdx?: boolean
 	onSave: (content: string) => void
 	onCancel: () => void
 	onEditorReady?: (editor: Editor) => void
@@ -27,6 +32,7 @@ export interface MarkdownInlineEditorProps {
 export function MarkdownInlineEditor({
 	elementId,
 	initialContent,
+	isMdx,
 	onSave,
 	onCancel,
 	onEditorReady,
@@ -69,6 +75,9 @@ export function MarkdownInlineEditor({
 	// Store onEditorReady in ref to avoid re-initializing editor when callback changes
 	const onEditorReadyRef = useRef(onEditorReady)
 	onEditorReadyRef.current = onEditorReady
+	// Store isMdx in ref for editor initialization
+	const isMdxRef = useRef(isMdx ?? false)
+	isMdxRef.current = isMdx ?? false
 
 	// Check active formatting at current selection
 	const updateActiveFormats = useCallback(() => {
@@ -154,9 +163,11 @@ export function MarkdownInlineEditor({
 	useEffect(() => {
 		if (!editorRef.current) return
 
+		let formatRaf = 0
+
 		const initEditor = async () => {
 			try {
-				const editor = await Editor.make()
+				const builder = Editor.make()
 					.config((ctx) => {
 						ctx.set(rootCtx, editorRef.current)
 						ctx.set(defaultValueCtx, initialContentRef.current)
@@ -168,19 +179,29 @@ export function MarkdownInlineEditor({
 					.use(commonmark)
 					.use(gfm)
 					.use(listener)
-					.create()
+
+				// Add MDX component support for .mdx files
+				if (isMdxRef.current) {
+					for (const plugin of mdxComponentPlugin) {
+						builder.use(plugin as any)
+					}
+				}
+
+				const editor = await builder.create()
 
 				editorInstanceRef.current = editor
 				setIsReady(true)
 				onEditorReadyRef.current?.(editor)
 
-				// Set up selection change listener
+				// Set up selection change listener — debounce via rAF to avoid
+				// redundant mark-scanning on every keystroke
 				const view = editor.ctx.get(editorViewCtx)
 				const originalDispatch = view.dispatch.bind(view)
 				view.dispatch = (tr) => {
 					originalDispatch(tr)
 					if (tr.selectionSet || tr.docChanged) {
-						updateActiveFormats()
+						cancelAnimationFrame(formatRaf)
+						formatRaf = requestAnimationFrame(updateActiveFormats)
 					}
 				}
 
@@ -195,6 +216,7 @@ export function MarkdownInlineEditor({
 		initEditor()
 
 		return () => {
+			cancelAnimationFrame(formatRaf)
 			editorInstanceRef.current?.destroy()
 			editorInstanceRef.current = null
 		}
@@ -360,6 +382,38 @@ export function MarkdownInlineEditor({
 		}
 	}, [])
 
+	// MDX component insertion
+	const handleInsertMdxComponent = useCallback((componentName: string, props: Record<string, string>) => {
+		if (editorInstanceRef.current) {
+			try {
+				editorInstanceRef.current.action(callCommand(insertMdxComponentCommand.key, { componentName, props }))
+			} catch (error) {
+				console.error('Failed to insert MDX component:', error)
+			}
+		}
+	}, [])
+
+	const handleOpenMdxPicker = useCallback(() => {
+		mdxComponentPickerOpen.value = true
+	}, [])
+
+	const handleUpdateMdxProps = useCallback((nodePos: number, props: Record<string, string>) => {
+		if (!editorInstanceRef.current) return
+		try {
+			const view = editorInstanceRef.current.ctx.get(editorViewCtx)
+			const node = view.state.doc.nodeAt(nodePos)
+			if (node && node.type.name === 'mdx_component') {
+				const tr = view.state.tr.setNodeMarkup(nodePos, undefined, {
+					...node.attrs,
+					props: JSON.stringify(props),
+				})
+				view.dispatch(tr)
+			}
+		} catch (error) {
+			console.error('Failed to update MDX component props:', error)
+		}
+	}, [])
+
 	// Drag and drop handlers for direct image upload
 	const handleDragOver = useCallback((e: DragEvent) => {
 		e.preventDefault()
@@ -682,6 +736,15 @@ export function MarkdownInlineEditor({
 							/>
 						</svg>
 					</ToolbarButton>
+					{isMdx && (
+						<>
+							{/* Divider */}
+							<div class="w-px h-5 bg-white/20 mx-1" />
+							<ToolbarButton onClick={handleOpenMdxPicker} title="Insert Component">
+								<MdxComponentIcon size="md" />
+							</ToolbarButton>
+						</>
+					)}
 				</div>
 			</div>
 
@@ -745,6 +808,12 @@ export function MarkdownInlineEditor({
 					</div>
 				)}
 			</div>
+
+			{/* MDX Component Picker */}
+			{isMdx && <MdxComponentPicker onInsert={handleInsertMdxComponent} />}
+
+			{/* MDX Props Editor */}
+			{isMdx && <MdxPropsEditor onUpdateProps={handleUpdateMdxProps} />}
 		</div>
 	)
 }

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

@@ -0,0 +1,102 @@
+import { MDX_EXPR_PREFIX } from '../milkdown-mdx-plugin'
+
+const MDX_COMPONENT_ICON_PATH =
+	'M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5'
+
+export function MdxComponentIcon({ size = 'sm' }: { size?: 'sm' | 'md' }) {
+	const iconClass = size === 'md' ? 'w-4 h-4' : 'w-3 h-3'
+	const svg = (
+		<svg class={`${iconClass} text-cms-primary`} fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+			<path stroke-linecap="round" stroke-linejoin="round" d={MDX_COMPONENT_ICON_PATH} />
+		</svg>
+	)
+	if (size === 'md') return svg
+	return (
+		<div class="w-5 h-5 rounded bg-cms-primary/20 flex items-center justify-center">
+			{svg}
+		</div>
+	)
+}
+
+export interface MdxBlockCardProps {
+	componentName: string
+	props: Record<string, string>
+	hasExpressions: boolean
+	onEdit: (cursorPos: { x: number; y: number }) => void
+	onRemove: () => void
+}
+
+export function MdxBlockCard({ componentName, props, hasExpressions, onEdit, onRemove }: MdxBlockCardProps) {
+	const propEntries = Object.entries(props).filter(([_, v]) => v !== '')
+	const displayProps = propEntries.map(([name, value]) => {
+		if (value.startsWith(MDX_EXPR_PREFIX)) {
+			return { name, value: value.slice(MDX_EXPR_PREFIX.length), isExpression: true }
+		}
+		return { name, value, isExpression: false }
+	})
+
+	return (
+		<div
+			class="my-3 mx-0 bg-white/5 border border-white/15 rounded-cms-md overflow-hidden select-none"
+			data-cms-ui
+		>
+			<div class="flex items-center justify-between px-4 py-2.5 bg-white/5 border-b border-white/10">
+				<div class="flex items-center gap-2">
+					<MdxComponentIcon />
+					<span class="text-[13px] font-semibold text-white">{componentName}</span>
+					{hasExpressions && <span class="text-[10px] px-1.5 py-0.5 bg-amber-500/20 text-amber-300 rounded font-mono">expr</span>}
+				</div>
+				<div class="flex items-center gap-1">
+					<button
+						type="button"
+						data-mdx-action="edit"
+						onClick={(e: MouseEvent) => {
+							const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+							onEdit({ x: rect.left, y: rect.bottom + 4 })
+						}}
+						class="p-1.5 rounded-cms-sm text-white/50 hover:text-white hover:bg-white/10 transition-colors"
+						title="Edit props"
+					>
+						<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+							/>
+						</svg>
+					</button>
+					<button
+						type="button"
+						data-mdx-action="remove"
+						onClick={onRemove}
+						class="p-1.5 rounded-cms-sm text-white/50 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+						title="Remove block"
+					>
+						<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+
+			{displayProps.length > 0 && (
+				<div class="px-4 py-2 flex flex-wrap gap-x-3 gap-y-1">
+					{displayProps.slice(0, 6).map(({ name, value, isExpression }) => (
+						<span key={name} class="text-[11px] text-white/40 font-mono">
+							<span class="text-white/60">{name}</span>
+							<span class="text-white/30">=</span>
+							{isExpression
+								? <span class="text-amber-300/60">{`{${value.length > 20 ? value.slice(0, 20) + '...' : value}}`}</span>
+								: <span class="text-cms-primary/60">"{value.length > 25 ? value.slice(0, 25) + '...' : value}"</span>}
+						</span>
+					))}
+					{displayProps.length > 6 && <span class="text-[11px] text-white/30">+{displayProps.length - 6} more</span>}
+				</div>
+			)}
+		</div>
+	)
+}