@nuasite/cms 0.29.0 → 0.31.0

package/src/editor/components/modal-shell.tsx

@@ -1,5 +1,6 @@
 import type { ComponentChildren } from 'preact'
 import { Z_INDEX } from '../constants'
+import { cn } from '../lib/cn'
 
 export function ModalBackdrop({ onClose, maxWidth = 'max-w-lg', extraClass, children }: {
 	onClose: () => void
@@ -15,7 +16,7 @@ export function ModalBackdrop({ onClose, maxWidth = 'max-w-lg', extraClass, chil
 			data-cms-ui
 		>
 			<div
-				class={`bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.4)] ${maxWidth} w-full border border-white/10 ${extraClass ?? ''}`}
+				class={cn('bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.4)] w-full border border-white/10', maxWidth, extraClass)}
 				onClick={(e) => e.stopPropagation()}
 				data-cms-ui
 			>
@@ -58,7 +59,7 @@ export function ModalFooter({ children }: { children: ComponentChildren }) {
 	)
 }
 
-export function CloseButton({ onClick }: { onClick: () => void }) {
+export function CloseButton({ onClick, size = 'md' }: { onClick: () => void; size?: 'sm' | 'md' }) {
 	return (
 		<button
 			type="button"
@@ -66,22 +67,50 @@ export function CloseButton({ onClick }: { onClick: () => void }) {
 			class="text-white/50 hover:text-white p-1.5 hover:bg-white/10 rounded-full transition-colors cursor-pointer"
 			data-cms-ui
 		>
-			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<svg class={size === 'sm' ? 'w-4 h-4' : 'w-5 h-5'} 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>
 	)
 }
 
-export function CancelButton({ onClick, label = 'Cancel' }: { onClick: () => void; label?: string }) {
+export function CancelButton({ onClick, label = 'Cancel', className }: { onClick: () => void; label?: string; className?: string }) {
 	return (
 		<button
 			type="button"
 			onClick={onClick}
-			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"
+			class={cn(
+				'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',
+				className,
+			)}
 			data-cms-ui
 		>
 			{label}
 		</button>
 	)
 }
+
+export function PrimaryButton({ onClick, children, disabled, type = 'button', className }: {
+	onClick?: () => void
+	children: ComponentChildren
+	disabled?: boolean
+	type?: 'button' | 'submit'
+	className?: string
+}) {
+	return (
+		<button
+			type={type}
+			onClick={onClick}
+			disabled={disabled}
+			class={cn(
+				'px-5 py-2.5 text-sm font-medium rounded-cms-pill transition-colors cursor-pointer',
+				'bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover',
+				'disabled:opacity-40 disabled:cursor-not-allowed',
+				className,
+			)}
+			data-cms-ui
+		>
+			{children}
+		</button>
+	)
+}

package/src/editor/components/plain-text-chip-utils.ts

@@ -0,0 +1,14 @@
+import type { ManifestEntry } from '../../types'
+
+export function describeSource(entry: ManifestEntry | undefined): string {
+	if (!entry) return 'no formatting'
+	if (entry.collectionName) {
+		return `${entry.collectionName} collection field`
+	}
+	if (entry.variableName) {
+		return `${entry.variableName} prop`
+	}
+	// Entry marked non-styleable but missing both collection and variable context —
+	// visible fallback so the edge case surfaces instead of masquerading as a missing entry.
+	return 'unknown source'
+}

package/src/editor/components/plain-text-chip.tsx

@@ -0,0 +1,61 @@
+import type { ManifestEntry } from '../../types'
+import { Z_INDEX } from '../constants'
+import { positionFloatingChip } from '../dom'
+import { describeSource } from './plain-text-chip-utils'
+
+export interface PlainTextChipProps {
+	visible: boolean
+	rect: DOMRect | null
+	entry: ManifestEntry | undefined
+}
+
+export function PlainTextChip({ visible, rect, entry }: PlainTextChipProps) {
+	if (!visible || !rect) {
+		return null
+	}
+
+	const maxChipWidth = 280
+	const { left, top } = positionFloatingChip(rect, { width: maxChipWidth, height: 28 })
+
+	const source = describeSource(entry)
+
+	return (
+		<div
+			data-cms-ui
+			onMouseDown={(e) => {
+				e.preventDefault()
+				e.stopPropagation()
+			}}
+			onClick={(e) => e.stopPropagation()}
+			style={{
+				position: 'fixed',
+				left: `${left}px`,
+				top: `${top}px`,
+				zIndex: Z_INDEX.MODAL,
+				fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
+				fontSize: '11px',
+				maxWidth: `${maxChipWidth}px`,
+			}}
+		>
+			<div class="flex items-center gap-2 px-3 py-1.5 bg-cms-dark border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.3)] rounded-cms-xl text-white/80 min-w-0">
+				<svg
+					class="shrink-0"
+					width="12"
+					height="12"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path d="M4 7V4h16v3" />
+					<path d="M9 20h6" />
+					<path d="M12 4v16" />
+				</svg>
+				<span class="truncate" title={`Plain text · ${source}`}>Plain text · {source}</span>
+			</div>
+		</div>
+	)
+}

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

@@ -1,8 +1,10 @@
-import { useMemo, useRef, useState } from 'preact/hooks'
+import { useCallback, useMemo, useRef, useState } from 'preact/hooks'
 import { slugify } from '../../shared'
+import { useSearchFilter } from '../hooks/useSearchFilter'
 import { getCollectionEntryOptions } from '../manifest'
 import { manifest, openMediaLibraryWithCallback, pendingCollectionEntries } from '../signals'
 import type { ComponentProp } from '../types'
+import { DropdownPanel } from './fields'
 import { SchemaFrontmatterField } from './frontmatter-fields'
 
 export interface PropEditorProps {
@@ -181,20 +183,14 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 		[collection, currentManifest],
 	)
 	const collectionDef = currentManifest?.collectionDefinitions?.[collection]
-	const containerRef = useRef<HTMLDivElement>(null)
+	const inputRef = useRef<HTMLInputElement>(null)
 	const [search, setSearch] = useState('')
 	const [isOpen, setIsOpen] = useState(false)
 	const [isCreating, setIsCreating] = useState(false)
 	const [newName, setNewName] = useState('')
 	const [formData, setFormData] = useState<Record<string, unknown>>({})
 
-	const filtered = useMemo(
-		() =>
-			search
-				? options.filter(o => o.label.toLowerCase().includes(search.toLowerCase()) || o.value.toLowerCase().includes(search.toLowerCase()))
-				: options,
-		[options, search],
-	)
+	const filtered = useSearchFilter(options, search, o => `${o.label} ${o.value}`)
 
 	const selectedLabel = useMemo(
 		() => value ? (options.find(o => o.value === value)?.label ?? value) : '',
@@ -206,6 +202,8 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 		[collectionDef],
 	)
 
+	const closeDropdown = useCallback(() => setIsOpen(false), [])
+
 	const resetCreateForm = () => {
 		setIsCreating(false)
 		setNewName('')
@@ -309,8 +307,9 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 	}
 
 	return (
-		<div class="relative" ref={containerRef}>
+		<div>
 			<input
+				ref={inputRef}
 				type="text"
 				value={isOpen ? search : selectedLabel}
 				onInput={(e) => {
@@ -318,67 +317,67 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 					setIsOpen(true)
 				}}
 				onFocus={() => setIsOpen(true)}
-				onBlur={(e) => {
-					const related = (e as FocusEvent).relatedTarget as Node | null
-					if (containerRef.current && related && containerRef.current.contains(related)) return
-					setIsOpen(false)
-				}}
+				onBlur={() => setTimeout(closeDropdown, 150)}
 				placeholder={`Select ${collection} entry...`}
 				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"
 			/>
-			{isOpen && (
-				<div class="absolute z-10 mt-1 w-full max-h-48 overflow-y-auto bg-cms-dark border border-white/20 rounded-cms-md shadow-lg">
-					{!required && (
-						<button
-							type="button"
-							onMouseDown={(e) => e.preventDefault()}
-							onClick={() => {
-								onChange('')
-								setSearch('')
-								setIsOpen(false)
-							}}
-							class="w-full px-4 py-2 text-left text-[13px] text-white/50 hover:bg-white/10 transition-colors"
-						>
-							— None —
-						</button>
-					)}
-					{filtered.map((opt) => (
-						<button
-							key={opt.value}
-							type="button"
-							onMouseDown={(e) => e.preventDefault()}
-							onClick={() => {
-								onChange(opt.value)
-								setSearch('')
-								setIsOpen(false)
-							}}
-							class={`w-full px-4 py-2 text-left text-[13px] transition-colors ${
-								opt.value === value ? 'bg-cms-primary/20 text-white' : 'text-white/80 hover:bg-white/10'
-							}`}
-						>
-							<div>{opt.label}</div>
-							{opt.label !== opt.value && <div class="text-[11px] text-white/40 font-mono">{opt.value}</div>}
-						</button>
-					))}
-					{filtered.length === 0 && <div class="px-4 py-2 text-[13px] text-white/40">No entries found</div>}
-					{collectionDef && (
-						<button
-							type="button"
-							onMouseDown={(e) => e.preventDefault()}
-							onClick={() => {
-								setIsCreating(true)
-								setIsOpen(false)
-							}}
-							class="w-full px-4 py-2 text-left text-[13px] text-cms-primary hover:bg-cms-primary/10 transition-colors border-t border-white/10 flex items-center gap-2"
-						>
-							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-							</svg>
-							Create new {collectionDef.label?.toLowerCase() ?? collection}
-						</button>
-					)}
-				</div>
-			)}
+			<DropdownPanel
+				triggerRef={inputRef}
+				isOpen={isOpen}
+				onClose={closeDropdown}
+				maxHeight={192}
+				className="border border-white/20 rounded-cms-md"
+			>
+				{!required && (
+					<button
+						type="button"
+						onMouseDown={(e) => e.preventDefault()}
+						onClick={() => {
+							onChange('')
+							setSearch('')
+							setIsOpen(false)
+						}}
+						class="w-full px-4 py-2 text-left text-[13px] text-white/50 hover:bg-white/10 transition-colors"
+					>
+						— None —
+					</button>
+				)}
+				{filtered.map((opt) => (
+					<button
+						key={opt.value}
+						type="button"
+						onMouseDown={(e) => e.preventDefault()}
+						onClick={() => {
+							onChange(opt.value)
+							setSearch('')
+							setIsOpen(false)
+						}}
+						class={`w-full px-4 py-2 text-left text-[13px] transition-colors ${
+							opt.value === value ? 'bg-cms-primary/20 text-white' : 'text-white/80 hover:bg-white/10'
+						}`}
+					>
+						<div>{opt.label}</div>
+						{opt.label !== opt.value && <div class="text-[11px] text-white/40 font-mono">{opt.value}</div>}
+					</button>
+				))}
+				{filtered.length === 0 && <div class="px-4 py-2 text-[13px] text-white/40">No entries found</div>}
+				{collectionDef && (
+					<button
+						type="button"
+						onMouseDown={(e) => e.preventDefault()}
+						onClick={() => {
+							setIsCreating(true)
+							setIsOpen(false)
+						}}
+						class="w-full px-4 py-2 text-left text-[13px] text-cms-primary hover:bg-cms-primary/10 transition-colors border-t border-white/10 flex items-center gap-2"
+					>
+						<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+						</svg>
+						Create new {collectionDef.label?.toLowerCase() ?? collection}
+					</button>
+				)}
+			</DropdownPanel>
 		</div>
 	)
 }

package/src/editor/components/reference-picker.tsx

@@ -1,8 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { clampPanelPosition, Z_INDEX } from '../constants'
+import { useClickOutsideEscape } from '../hooks/useClickOutsideEscape'
+import { useSearchFilter } from '../hooks/useSearchFilter'
 import { getCollectionEntryOptions } from '../manifest'
 import { updateMarkdownPage } from '../markdown-api'
 import { closeReferencePicker, config, manifest, referencePickerState, showToast } from '../signals'
+import { Spinner } from './spinner'
 
 const PANEL_WIDTH = 320
 
@@ -27,11 +30,7 @@ export function ReferencePicker() {
 		}
 	}, [state.isOpen])
 
-	const filtered = useMemo(() => {
-		if (!query) return options
-		const q = query.toLowerCase()
-		return options.filter(o => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q))
-	}, [query, options])
+	const filtered = useSearchFilter(options, query, o => `${o.label} ${o.value}`)
 
 	const currentLabel = useMemo(() => {
 		if (state.isArray) return null
@@ -69,24 +68,7 @@ export function ReferencePicker() {
 		updateReference([...current])
 	}, [state.currentValues, updateReference])
 
-	// Close on outside click or Escape
-	useEffect(() => {
-		if (!state.isOpen) return
-		const onMouseDown = (e: MouseEvent) => {
-			if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
-				closeReferencePicker()
-			}
-		}
-		const onKeyDown = (e: KeyboardEvent) => {
-			if (e.key === 'Escape') closeReferencePicker()
-		}
-		document.addEventListener('mousedown', onMouseDown)
-		document.addEventListener('keydown', onKeyDown)
-		return () => {
-			document.removeEventListener('mousedown', onMouseDown)
-			document.removeEventListener('keydown', onKeyDown)
-		}
-	}, [state.isOpen])
+	useClickOutsideEscape([panelRef], state.isOpen, closeReferencePicker)
 
 	if (!state.isOpen || !state.cursorPos) return null
 
@@ -113,7 +95,7 @@ export function ReferencePicker() {
 			{saving
 				? (
 					<div class="flex items-center justify-center gap-2 px-4 py-6">
-						<span class="inline-block w-4 h-4 border-2 border-white/80 border-t-transparent rounded-full animate-spin" />
+						<Spinner className="text-white/80" />
 						<span class="text-sm text-white/80">Updating...</span>
 					</div>
 				)

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

@@ -16,7 +16,8 @@ import {
 } from '../signals'
 import type { ChangePayload, PageSeoData, PendingSeoChange } from '../types'
 import { ColorField, ComboBoxField, ImageField } from './fields'
-import { CloseButton, ModalBackdrop } from './modal-shell'
+import { CancelButton, CloseButton, ModalBackdrop } from './modal-shell'
+import { Spinner } from './spinner'
 
 const OG_TYPE_OPTIONS = [
 	{ value: 'website', label: 'Website', description: 'Default type for most pages' },
@@ -549,14 +550,7 @@ export function SeoEditor() {
 			{/* Footer */}
 			{hasSeoData && (
 				<div class="flex items-center justify-end gap-3 px-5 py-4 border-t border-white/10">
-					<button
-						type="button"
-						onClick={handleClose}
-						class="px-4 py-2 text-sm font-medium text-white/70 hover:text-white hover:bg-white/10 rounded-cms-pill transition-colors"
-						data-cms-ui
-					>
-						Cancel
-					</button>
+					<CancelButton onClick={handleClose} />
 					<button
 						type="button"
 						onClick={handleSaveAll}
@@ -568,7 +562,7 @@ export function SeoEditor() {
 						}`}
 						data-cms-ui
 					>
-						{isSaving && <span class="inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />}
+						{isSaving && <Spinner />}
 						{isSaving ? 'Saving...' : 'Save Changes'}
 					</button>
 				</div>

package/src/editor/components/spinner.tsx

@@ -0,0 +1,17 @@
+import { cn } from '../lib/cn'
+
+const sizes = {
+	xs: 'h-3 w-3',
+	sm: 'h-3.5 w-3.5',
+	md: 'h-4 w-4',
+	lg: 'h-6 w-6',
+	xl: 'h-8 w-8',
+} as const
+
+export function Spinner({ size = 'md', className }: { size?: keyof typeof sizes; className?: string }) {
+	return (
+		<span
+			class={cn('inline-block animate-spin rounded-full border-2 border-current/30 border-t-current', sizes[size], className)}
+		/>
+	)
+}

package/src/editor/components/text-style-toolbar.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'preact/hooks'
 import { CSS, Z_INDEX } from '../constants'
+import { positionFloatingChip } from '../dom'
 import { cn } from '../lib/cn'
 import * as signals from '../signals'
 import {
@@ -177,21 +178,7 @@ export function TextStyleToolbar({ visible, rect, element, onStyleChange }: Text
 		return null
 	}
 
-	// Position toolbar above the selection
-	const toolbarHeight = 44
-	const toolbarWidth = 320
-	let left = rect.left + rect.width / 2 - toolbarWidth / 2
-	let top = rect.top - toolbarHeight - 8
-
-	const padding = 10
-	const maxLeft = window.innerWidth - toolbarWidth - padding
-	const minLeft = padding
-
-	left = Math.max(minLeft, Math.min(left, maxLeft))
-
-	if (top < padding) {
-		top = rect.bottom + 8
-	}
+	const { left, top } = positionFloatingChip(rect, { width: 320, height: 44 })
 
 	return (
 		<div

package/src/editor/components/toolbar.tsx

@@ -5,6 +5,7 @@ import { cn } from '../lib/cn'
 import * as signals from '../signals'
 import { showConfirmDialog } from '../signals'
 import type { CollectionDefinition } from '../types'
+import { Spinner } from './spinner'
 
 export interface ToolbarCallbacks {
 	onEdit: () => void
@@ -229,7 +230,7 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 					{/* Saving indicator */}
 					{isSaving && !showingOriginal && (
 						<div class="flex items-center gap-1.5 px-3 py-2 sm:px-5 sm:py-2.5 text-sm font-medium text-white/80">
-							<span class="inline-block w-3.5 h-3.5 border-2 border-white/80 border-t-transparent rounded-full animate-spin" />
+							<Spinner size="sm" className="text-white/80" />
 							<span>Saving</span>
 						</div>
 					)}

package/src/editor/constants.ts

@@ -136,3 +136,36 @@ export function clampPanelPosition(
 		maxHeight: `${maxHeight}px`,
 	}
 }
+
+/**
+ * Calculate fixed-position style for a dropdown that needs to escape parent overflow clipping.
+ * Positions below the trigger element by default, flipping above when space is insufficient.
+ */
+export function getDropdownPosition(
+	trigger: HTMLElement | null,
+	maxHeight: number,
+	padding = LAYOUT.VIEWPORT_PADDING,
+): Record<string, string> | undefined {
+	if (!trigger) return undefined
+	const rect = trigger.getBoundingClientRect()
+	const spaceBelow = window.innerHeight - rect.bottom - padding
+	const spaceAbove = rect.top - padding
+	const showAbove = spaceBelow < 80 && spaceAbove > spaceBelow
+
+	const style: Record<string, string> = {
+		position: 'fixed',
+		left: `${rect.left}px`,
+		width: `${rect.width}px`,
+		zIndex: String(Z_INDEX.MODAL),
+	}
+
+	if (showAbove) {
+		style.bottom = `${window.innerHeight - rect.top + 4}px`
+		style.maxHeight = `${Math.max(Math.min(maxHeight, spaceAbove), 80)}px`
+	} else {
+		style.top = `${rect.bottom + 4}px`
+		style.maxHeight = `${Math.max(Math.min(maxHeight, spaceBelow), 80)}px`
+	}
+
+	return style
+}

package/src/editor/dom.ts

@@ -420,3 +420,40 @@ function preventInteraction(event: Event): void {
 		event.stopImmediatePropagation()
 	}
 }
+
+// Chromium exposes `caretRangeFromPoint`; Firefox exposes `caretPositionFromPoint`.
+// Neither is universally supported, hence the fallback cascade.
+export function getCaretRangeFromPoint(x: number, y: number): Range | null {
+	const doc = document as Document & {
+		caretRangeFromPoint?: (x: number, y: number) => Range | null
+		caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null
+	}
+	if (typeof doc.caretRangeFromPoint === 'function') {
+		return doc.caretRangeFromPoint(x, y)
+	}
+	if (typeof doc.caretPositionFromPoint === 'function') {
+		const pos = doc.caretPositionFromPoint(x, y)
+		if (pos) {
+			const range = document.createRange()
+			range.setStart(pos.offsetNode, pos.offset)
+			range.collapse(true)
+			return range
+		}
+	}
+	return null
+}
+
+export function positionFloatingChip(
+	rect: DOMRect,
+	opts: { width: number; height: number; padding?: number; gap?: number },
+): { left: number; top: number } {
+	const { width, height } = opts
+	const padding = opts.padding ?? 10
+	const gap = opts.gap ?? 8
+	let left = rect.left + rect.width / 2 - width / 2
+	let top = rect.top - height - gap
+	const maxLeft = window.innerWidth - width - padding
+	left = Math.max(padding, Math.min(left, maxLeft))
+	if (top < padding) top = rect.bottom + gap
+	return { left, top }
+}