@nuasite/cms 0.39.1 → 0.40.0

package/src/editor/styles.css

@@ -30,6 +30,7 @@
 
   /* Border & Radius */
   --color-cms-border: rgba(0, 0, 0, 0.08);
+  --radius-cms-xs: 5px;
   --radius-cms-sm: 8px;
   --radius-cms-md: 16px;
   --radius-cms-lg: 24px;
@@ -58,6 +59,10 @@
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  /* Render all native form chrome (date picker indicator, scrollbars, autofill,
+     default controls) in dark-mode colors. Replaces a webkit-only `filter: invert(1)`
+     workaround that didn't cover Firefox. */
+  color-scheme: dark;
 }
 
 .cms-root *,
@@ -66,6 +71,33 @@
   box-sizing: border-box;
 }
 
+.cms-root button:not(:disabled) {
+  cursor: pointer;
+}
+
+.cms-root select {
+  /* -moz-appearance: none dropped — Firefox 70+ honors the standard appearance property. */
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem;
+  padding-right: 2rem;
+  /* appearance: none strips the native click affordance — restore it explicitly. */
+  cursor: pointer;
+}
+
+.cms-root input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.cms-root input[type="number"]::-webkit-inner-spin-button,
+.cms-root input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
 /* Custom animations for CMS */
 @keyframes spin {
   from { transform: rotate(0deg); }
@@ -242,14 +274,55 @@
 
 .milkdown-dark .ProseMirror h1 {
   font-size: 1.75em;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  padding-bottom: 0.3em;
+  border-bottom: none;
+  padding-bottom: 0;
 }
 
 .milkdown-dark .ProseMirror h2 {
   font-size: 1.5em;
 }
 
+.milkdown-editor .ProseMirror h1,
+.milkdown-editor .ProseMirror h2,
+.milkdown-editor .ProseMirror h3,
+.milkdown-editor .ProseMirror h4,
+.milkdown-editor .ProseMirror h5,
+.milkdown-editor .ProseMirror h6 {
+  position: relative;
+  padding-right: 3em;
+}
+
+.milkdown-editor .ProseMirror h1::after,
+.milkdown-editor .ProseMirror h2::after,
+.milkdown-editor .ProseMirror h3::after,
+.milkdown-editor .ProseMirror h4::after,
+.milkdown-editor .ProseMirror h5::after,
+.milkdown-editor .ProseMirror h6::after {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0.15em 0.6em;
+  font-size: 0.55em;
+  font-weight: 600;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  color: var(--color-cms-primary);
+  background: rgba(223, 255, 64, 0.12);
+  border: 1px solid rgba(223, 255, 64, 0.3);
+  border-radius: 9999px;
+  letter-spacing: 0.05em;
+  user-select: none;
+  pointer-events: none;
+  line-height: 1.3;
+}
+
+.milkdown-editor .ProseMirror h1::after { content: "H1"; }
+.milkdown-editor .ProseMirror h2::after { content: "H2"; }
+.milkdown-editor .ProseMirror h3::after { content: "H3"; }
+.milkdown-editor .ProseMirror h4::after { content: "H4"; }
+.milkdown-editor .ProseMirror h5::after { content: "H5"; }
+.milkdown-editor .ProseMirror h6::after { content: "H6"; }
+
 .milkdown-dark .ProseMirror h3 {
   font-size: 1.25em;
 }

package/src/editor/types.ts

@@ -54,6 +54,14 @@ export interface CmsConfig {
 	features?: CmsFeatures
 	/** Maximum upload size in bytes for media uploads (injected by the integration). */
 	maxUploadSize?: number
+	/**
+	 * Describes the host site's color theme. The CMS draws editor chrome and outlines
+	 * in a contrasting color so they read clearly against the page being edited.
+	 *  - 'light' — host is light → CMS uses dark outlines
+	 *  - 'dark'  — host is dark → CMS uses light outlines
+	 *  - 'auto'  (default) — detect from `prefers-color-scheme` and the page background
+	 */
+	siteTheme?: 'auto' | 'light' | 'dark'
 }
 
 export interface ComponentProp {

package/src/index.ts

@@ -34,6 +34,12 @@ export interface NuaCmsOptions extends CmsMarkerOptions {
 		theme?: Record<string, string>
 		themePreset?: string
 		features?: CmsFeatures
+		/**
+		 * Describes the host site's color theme. The CMS draws editor chrome and outlines
+		 * in a contrasting color. 'auto' (default) detects via prefers-color-scheme and
+		 * the page's computed background.
+		 */
+		siteTheme?: 'auto' | 'light' | 'dark'
 	}
 	/**
 	 * Proxy /_nua/cms requests to this target URL during dev.

package/src/source-finder/image-finder.ts

@@ -151,7 +151,7 @@ export async function findImageSourceLocation(
 	imageSrc: string,
 	imageSrcSet?: string,
 	pageFiles?: readonly string[],
-	preferredLocation?: { file: string; line?: number; srcOccurrence?: number },
+	preferredLocation?: { file?: string; line?: number; srcOccurrence?: number },
 ): Promise<SourceLocation | undefined> {
 	// Use index if available (much faster)
 	if (isSearchIndexInitialized()) {

package/src/source-finder/search-index.ts

@@ -1436,7 +1436,7 @@ function extractPathname(src: string): string {
 export function findInImageIndex(
 	imageSrc: string,
 	pageFiles?: readonly string[],
-	preferredLocation?: { file: string; line?: number; srcOccurrence?: number },
+	preferredLocation?: { file?: string; line?: number; srcOccurrence?: number },
 ): SourceLocation | undefined {
 	const index = getImageSearchIndex()
 
@@ -1446,7 +1446,7 @@ export function findInImageIndex(
 	const candidates = decoded && decoded !== imageSrc ? [imageSrc, decoded] : [imageSrc]
 	// Astro stamps absolute paths in `data-astro-source-file`; the index uses
 	// project-relative paths. Normalize before comparing.
-	const preferredFile = preferredLocation ? toProjectRelativePath(preferredLocation.file) : undefined
+	const preferredFile = preferredLocation?.file ? toProjectRelativePath(preferredLocation.file) : undefined
 	const preferredLine = preferredLocation?.line
 	const preferredOccurrence = preferredLocation?.srcOccurrence
 
@@ -1454,13 +1454,21 @@ export function findInImageIndex(
 	let occurrenceCounter = 0
 	let occurrenceMatch: SourceLocation | undefined
 	let lineMatch: SourceLocation | undefined
+	const pageSet = pageFiles?.length ? new Set(pageFiles) : undefined
+	// Scope occurrence counting: if preferredFile is set, only that file.
+	// Otherwise fall back to pageFiles. Otherwise count across the whole index.
+	const occurrenceScope = (file: string): boolean => {
+		if (preferredFile) return file === preferredFile
+		if (pageSet) return pageSet.has(file)
+		return true
+	}
 	for (const entry of index) {
 		if (!candidates.includes(entry.src)) continue
-		if (preferredFile && entry.file === preferredFile) {
+		if (occurrenceScope(entry.file)) {
 			if (preferredOccurrence !== undefined && occurrenceCounter++ === preferredOccurrence) {
 				occurrenceMatch ??= imageEntryToLocation(entry)
 			}
-			if (preferredLine !== undefined && entry.line === preferredLine) {
+			if (preferredLine !== undefined && entry.line === preferredLine && (!preferredFile || entry.file === preferredFile)) {
 				lineMatch ??= imageEntryToLocation(entry)
 			}
 		}

package/src/source-finder/snippet-utils.ts

@@ -751,7 +751,10 @@ export async function enhanceManifestWithSourceSnippets(
 			}
 
 			// ── Non-collection images: find via search index / AST ──
-			const preferredLocation = entry.sourcePath
+			// Always pass preferredLocation when srcOccurrence is set, even if
+			// entry.sourcePath is missing — html-processor populates srcOccurrence
+			// independently of Astro's source attribution.
+			const preferredLocation = entry.sourcePath || entry.imageMetadata.srcOccurrence !== undefined
 				? {
 					file: entry.sourcePath,
 					line: entry.sourceLine,

package/src/types.ts

@@ -300,6 +300,10 @@ export interface FieldDefinition {
 	hints?: FieldHints
 	/** True when the field uses Astro's `image()` schema (entry-relative paths through astro:assets). */
 	astroImage?: boolean
+	/** Semantic role used by the editor UI to position special fields without name matching.
+	 *  - `publish-toggle`: boolean controlling whether the entry is published (e.g. `draft`, `isDraft`, `published`).
+	 *  - `publish-date`: the publish/release date field (e.g. `date`, `publishDate`, `publishedAt`). */
+	role?: 'publish-toggle' | 'publish-date'
 }
 
 /** Per-entry metadata for collection browsing */