@nuasite/cms 0.39.2 → 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/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 */