@actuate-media/cms-admin 0.72.0 → 0.72.2

package/src/components/ui/Modal.tsx

@@ -2,7 +2,7 @@
 
 import * as Dialog from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
-import { type ReactNode } from 'react'
+import { type ReactNode, type RefObject } from 'react'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 
 export interface ModalProps {
@@ -16,6 +16,12 @@ export interface ModalProps {
    * omit when the body content is self-explanatory.
    */
   description?: string
+  /**
+   * Element to focus when the dialog opens, instead of Radix's default
+   * (the first tabbable element, which is the header close button). Use for
+   * form dialogs where the user should land in the first input.
+   */
+  initialFocusRef?: RefObject<HTMLElement | null>
 }
 
 /**
@@ -29,12 +35,32 @@ export interface ModalProps {
  * dialog inherits theme tokens and dark mode instead of rendering unstyled on
  * `document.body`.
  */
-export function Modal({ open, onClose, title, children, actions, description }: ModalProps) {
+export function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  actions,
+  description,
+  initialFocusRef,
+}: ModalProps) {
   return (
     <Dialog.Root open={open} onOpenChange={(next) => !next && onClose()}>
       <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="fixed inset-0 z-60 bg-black/50" />
-        <Dialog.Content className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none">
+        <Dialog.Content
+          className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none"
+          onOpenAutoFocus={
+            initialFocusRef
+              ? (event) => {
+                  if (initialFocusRef.current) {
+                    event.preventDefault()
+                    initialFocusRef.current.focus()
+                  }
+                }
+              : undefined
+          }
+        >
           <div className="border-border flex items-center justify-between border-b px-6 py-4">
             <Dialog.Title className="text-foreground text-lg font-medium">{title}</Dialog.Title>
             <Dialog.Close asChild>

package/src/lib/cv.ts

@@ -63,7 +63,14 @@ export function cv<V extends VariantsConfig>(base: ClassValue, config: CvConfig<
   return function variantClass(
     props?: VariantSelection<V> & { class?: ClassValue; className?: ClassValue },
   ): string {
-    const selected = { ...config.defaultVariants, ...props } as Record<string, unknown>
+    // Per the cva contract, an explicit `undefined` for a variant key must
+    // fall back to the default — spreading props naively would clobber the
+    // default and drop the variant's classes entirely (e.g. a Button without
+    // a `size` prop losing all height/padding).
+    const selected = { ...config.defaultVariants } as Record<string, unknown>
+    for (const [key, value] of Object.entries(props ?? {})) {
+      if (value !== undefined) selected[key] = value
+    }
 
     const variantClasses: ClassValue[] = []
     for (const [key, valuesMap] of Object.entries(config.variants)) {

package/src/styles/theme.css

@@ -137,7 +137,19 @@
     @apply border-border outline-ring/50;
   }
 
-  .actuate-admin {
+  /*
+   * Base typography is written with doubled `.actuate-admin.actuate-admin`
+   * specificity on purpose. Consumer apps commonly import their site
+   * stylesheet into the admin route (for the page-editor canvas preview) and
+   * those sheets sometimes style `.actuate-admin` or plain `h1`/`body` in
+   * their own `@layer base` — with equal specificity, whichever file loads
+   * last wins, and the admin shell inherits site fonts/colors ("washed out"
+   * admin). Doubling the class wins those same-layer ties without `!important`
+   * while Tailwind utilities (a later layer) still override as usual.
+   * Consumer styles that should reach the canvas preview belong under
+   * `.actuate-admin .actuate-canvas` — see EditorCanvas.
+   */
+  .actuate-admin.actuate-admin {
     @apply bg-background text-foreground;
     font-family: var(--actuate-admin-font, var(--font-sans)) !important;
     font-size: var(--font-size);
@@ -148,44 +160,44 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .actuate-admin h1 {
+  .actuate-admin.actuate-admin h1 {
     font-size: var(--fs-page);
     font-weight: 700;
     letter-spacing: -0.5px;
     line-height: 1.5;
   }
 
-  .actuate-admin h2 {
+  .actuate-admin.actuate-admin h2 {
     font-size: var(--fs-card);
     font-weight: 600;
     line-height: 1.5;
   }
 
-  .actuate-admin h3 {
+  .actuate-admin.actuate-admin h3 {
     font-size: var(--fs-card);
     font-weight: 600;
     line-height: 1.5;
   }
 
-  .actuate-admin h4 {
+  .actuate-admin.actuate-admin h4 {
     font-size: var(--fs-body);
     font-weight: 600;
     line-height: 1.5;
   }
 
-  .actuate-admin label {
+  .actuate-admin.actuate-admin label {
     font-size: var(--fs-body);
     font-weight: var(--font-weight-medium);
     line-height: 1.5;
   }
 
-  .actuate-admin button {
+  .actuate-admin.actuate-admin button {
     font-size: var(--fs-body);
     font-weight: var(--font-weight-medium);
     line-height: 1.5;
   }
 
-  .actuate-admin input {
+  .actuate-admin.actuate-admin input {
     font-size: var(--fs-body);
     font-weight: var(--font-weight-normal);
     line-height: 1.5;
@@ -198,6 +210,20 @@
     text-transform: uppercase;
     color: var(--sub);
   }
+
+  /*
+   * The sanctioned hook for consumer brand styles inside the editor canvas
+   * preview. Anything the site stylesheet must render in the preview should
+   * be scoped `.actuate-admin .actuate-canvas …` instead of `.actuate-admin`.
+   * The canvas re-establishes the site's typographic context: headings and
+   * body text fall back to inheritance rather than the admin scale above.
+   */
+  .actuate-admin .actuate-canvas :is(h1, h2, h3, h4) {
+    font-size: revert-layer;
+    font-weight: revert-layer;
+    letter-spacing: revert-layer;
+    line-height: revert-layer;
+  }
 }
 
 .actuate-admin.reduce-motion,

package/src/views/page-editor/EditorCanvas.tsx

@@ -88,9 +88,12 @@ export function EditorCanvas({
             className="mx-auto"
             style={{ width: vp.width * scale, height: surfaceHeight ?? undefined }}
           >
+            {/* `actuate-canvas` is the public hook for consumer brand CSS:
+                site styles that should render in this preview scope to
+                `.actuate-admin .actuate-canvas` instead of the admin root. */}
             <div
               ref={surfaceRef}
-              className="border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm"
+              className="actuate-canvas border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm"
               style={{
                 width: vp.width,
                 transform: `scale(${scale})`,

package/src/views/page-editor/PagePreview.tsx

@@ -91,7 +91,7 @@ export function PagePreview({ documentId, onNavigate }: PagePreviewProps) {
 
       {/* The canvas is intentionally white regardless of the admin theme:
           it emulates the public page surface, not admin chrome. */}
-      <div className="bg-card flex-1 overflow-auto">
+      <div className="actuate-canvas bg-card flex-1 overflow-auto">
         {visible.length === 0 ? (
           <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
             This page has no visible sections yet.

package/src/views/page-editor/PageSectionEditor.tsx

@@ -145,6 +145,10 @@ export function PageSectionEditor({
     if (!documentId) {
       setPage(emptyPage(initialParentId ?? null))
       setLoading(false)
+      // Start a brand-new page the way WordPress does: name it first. The
+      // settings modal opens with the title focused and the slug/path
+      // deriving live, so the required fields are done before building.
+      setSettingsOpen(true)
       return
     }
 

package/src/views/page-editor/PageSettingsModal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { normalizeSlug, validateSlug } from '@actuate-media/cms-core/client'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
@@ -49,6 +49,9 @@ export function PageSettingsModal({
   // Auto-derive slug/path from title until the user edits slug manually.
   const [slugTouched, setSlugTouched] = useState(Boolean(page.slug))
   const [parentOptions, setParentOptions] = useState<ParentOption[] | null>(null)
+  // Land the user in the Title field (WordPress-style "name it first"),
+  // rather than Radix's default focus on the header close button.
+  const titleRef = useRef<HTMLInputElement | null>(null)
 
   useEffect(() => {
     if (!open) return
@@ -118,29 +121,49 @@ export function PageSettingsModal({
       open={open}
       onClose={onClose}
       title="Page settings"
+      initialFocusRef={titleRef}
       actions={
         <>
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
-          <Button variant="primary" onClick={handleSave} disabled={!canEdit || Boolean(slugError)}>
+          <Button
+            variant="primary"
+            form="page-settings-form"
+            type="submit"
+            disabled={!canEdit || Boolean(slugError)}
+          >
             Done
           </Button>
         </>
       }
     >
-      <div className="space-y-3">
+      {/* A real form so Enter in any field confirms the dialog — matters
+          for the new-page flow where this modal is the first stop. */}
+      <form
+        id="page-settings-form"
+        className="space-y-3"
+        onSubmit={(e) => {
+          e.preventDefault()
+          handleSave()
+        }}
+      >
         <div>
           <label className={LABEL} htmlFor="ps-title">
             Title <span className="text-destructive">*</span>
           </label>
           <input
             id="ps-title"
+            ref={titleRef}
             className={INPUT}
             value={title}
             disabled={!canEdit}
+            placeholder="e.g. About Us"
             onChange={(e) => handleTitle(e.target.value)}
           />
+          <p className="text-muted-foreground mt-1 text-xs">
+            The slug and path below follow the title until you edit them.
+          </p>
         </div>
         <div className="grid grid-cols-2 gap-3">
           <div>
@@ -240,7 +263,7 @@ export function PageSettingsModal({
             onChange={(e) => setSeoDescription(e.target.value)}
           />
         </div>
-      </div>
+      </form>
     </Modal>
   )
 }

package/src/views/post-editor/PostEditorCanvas.tsx

@@ -87,7 +87,7 @@ export function PostEditorCanvas({
       >
         <div
           ref={surfaceRef}
-          className="border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm"
+          className="actuate-canvas border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm"
           style={{ width: vp.width, transform: `scale(${scale})`, transformOrigin: 'top left' }}
         >
           <PostHeader config={header} context={context} />

package/src/views/post-editor/PostFieldsModal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { normalizeSlug, validateSlug } from '@actuate-media/cms-core/client'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
@@ -62,6 +62,8 @@ export function PostFieldsModal({
   const [seoDescription, setSeoDescription] = useState(post.seoDescription)
   const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
   const [mediaOpen, setMediaOpen] = useState(false)
+  // Land the user in the Title field (name-it-first flow for new posts).
+  const titleRef = useRef<HTMLInputElement | null>(null)
 
   const categoryField = fields?.category
   const categoryOptions =
@@ -103,6 +105,7 @@ export function PostFieldsModal({
       open={open}
       onClose={onClose}
       title="Post details"
+      initialFocusRef={titleRef}
       actions={
         <>
           <Button variant="ghost" onClick={onClose}>
@@ -121,9 +124,11 @@ export function PostFieldsModal({
           </label>
           <input
             id="pf-title"
+            ref={titleRef}
             className={INPUT}
             value={title}
             disabled={!canEdit}
+            placeholder="e.g. Announcing our new product"
             onChange={(e) => handleTitle(e.target.value)}
           />
         </div>

package/src/views/post-editor/PostPreview.tsx

@@ -114,7 +114,7 @@ export function PostPreview({ postType, documentId, session, onNavigate }: PostP
         </button>
       </div>
 
-      <div className="bg-card flex-1 overflow-auto">
+      <div className="actuate-canvas bg-card flex-1 overflow-auto">
         <PostHeader config={header} context={context} />
         {visible.map((section) => (
           <SectionRenderer key={section.id} section={section} context={context} />

package/src/views/post-editor/PostSectionEditor.tsx

@@ -191,7 +191,12 @@ export function PostSectionEditor({
         if (cancelled) return
         setPost(p)
         setSelectedId(null)
-        if (!documentId) setDirty(true)
+        if (!documentId) {
+          setDirty(true)
+          // Name-it-first flow (matches the Page editor): a new post opens
+          // straight into the fields modal so title/slug are set up front.
+          setFieldsOpen(true)
+        }
       })
       .catch((err) => {
         if (!cancelled) setLoadError(err instanceof Error ? err.message : 'Failed to load post')