@actuate-media/cms-admin 0.65.0 → 0.67.0

package/src/views/ScriptTags.tsx

@@ -5,30 +5,22 @@ import { Code2, Plus, Loader2, AlertTriangle } from 'lucide-react'
 import { toast } from 'sonner'
 import { EnabledSwitch } from '../components/EnabledSwitch.js'
 import { StatPill } from '../components/ui/StatPill.js'
+import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
+import {
+  CONSENT_LABELS,
+  PLACEMENT_LABELS,
+  ScriptTagEditorPane,
+  type ScriptTag,
+} from '../components/script-tags/ScriptTagEditorPane.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 
-interface ScriptTag {
-  id: string
-  name: string
-  code: string
-  placement: string
-  scope: string
-  targetPaths: string[]
-  priority: number
-  enabled: boolean
-  createdAt: string
-  updatedAt: string
-}
-
 export interface ScriptTagsProps {
   onNavigate?: (path: string) => void
-}
-
-const PLACEMENT_LABELS: Record<string, string> = {
-  head: 'Head',
-  body_open: 'Body Open',
-  body_close: 'Body Close',
+  /** Deep-link support: open this tag's editor pane on mount (/script-tags/:id). */
+  initialSelectedId?: string
+  /** Deep-link support: open the create pane on mount (/script-tags/new). */
+  initialNew?: boolean
 }
 
 const PLACEMENT_COLORS: Record<string, string> = {
@@ -59,10 +51,25 @@ function scopeLabel(tag: ScriptTag): string {
   return scope || 'Custom'
 }
 
-export function ScriptTags({ onNavigate }: ScriptTagsProps) {
+function formatUpdated(value: string): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '—'
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+}
+
+type Selection = { mode: 'edit'; id: string } | { mode: 'new' } | null
+
+export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
   const { data, loading, error, refetch } = useApiData<ScriptTag[]>('/script-tags')
   const [togglingId, setTogglingId] = useState<string | null>(null)
   const [enabledOverrides, setEnabledOverrides] = useState<Record<string, boolean>>({})
+  const [selection, setSelection] = useState<Selection>(
+    initialNew
+      ? { mode: 'new' }
+      : initialSelectedId
+        ? { mode: 'edit', id: initialSelectedId }
+        : null,
+  )
 
   const tags = useMemo(
     () =>
@@ -73,6 +80,16 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
     [data, enabledOverrides],
   )
 
+  const selectedTag =
+    selection?.mode === 'edit' ? (tags.find((t) => t.id === selection.id) ?? null) : null
+  const paneOpen = selection?.mode === 'new' || selectedTag !== null
+
+  const toggleRow = (tag: ScriptTag) => {
+    setSelection((prev) =>
+      prev?.mode === 'edit' && prev.id === tag.id ? null : { mode: 'edit', id: tag.id },
+    )
+  }
+
   const toggleEnabled = async (tag: ScriptTag, nextEnabled: boolean) => {
     setEnabledOverrides((prev) => ({ ...prev, [tag.id]: nextEnabled }))
     setTogglingId(tag.id)
@@ -99,6 +116,12 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
     toast.success(saved ? 'Tag enabled' : 'Tag disabled')
   }
 
+  const handlePaneChanged = (savedId?: string) => {
+    setEnabledOverrides({})
+    refetch()
+    if (savedId) setSelection({ mode: 'edit', id: savedId })
+  }
+
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
@@ -108,122 +131,174 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
-      {error && (
-        <div className="border-destructive/30 bg-destructive/10 mb-4 flex items-center gap-3 rounded-lg border p-3">
-          <AlertTriangle className="text-destructive h-5 w-5 shrink-0" />
-          <span className="text-destructive flex-1 text-sm">{error}</span>
-          <button
-            onClick={refetch}
-            className="border-destructive/40 text-destructive hover:bg-destructive/15 rounded-lg border px-3 py-1 text-sm transition-colors"
-          >
-            Retry
-          </button>
-        </div>
-      )}
-
-      <div className="mb-4 flex items-center justify-between">
-        <div>
-          <h1 className="text-foreground mb-1">Script Tags</h1>
-          <p className="text-muted-foreground text-sm">
-            Manage tracking codes, analytics, and custom scripts injected into your site
-          </p>
-          {tags.length > 0 && (
-            <div className="mt-3 flex flex-wrap gap-1.5">
-              <StatPill value={tags.length} label="Total" />
-              <StatPill
-                value={tags.filter((t) => t.enabled).length}
-                label="Active"
-                valueClassName="text-[var(--suc)]"
-              />
-              <StatPill
-                value={tags.filter((t) => !t.enabled).length}
-                label="Inactive"
-                valueClassName="text-[var(--muted)]"
-              />
-            </div>
-          )}
-        </div>
-        <button
-          type="button"
-          onClick={() => onNavigate?.('/script-tags/new')}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
-        >
-          <Plus className="h-4 w-4" />
-          New Tag
-        </button>
-      </div>
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="p-3 pr-6 pb-0 sm:p-4 sm:pr-8 sm:pb-0">
+        {error && (
+          <div className="border-destructive/30 bg-destructive/10 mb-4 flex items-center gap-3 rounded-lg border p-3">
+            <AlertTriangle className="text-destructive h-5 w-5 shrink-0" />
+            <span className="text-destructive flex-1 text-sm">{error}</span>
+            <button
+              onClick={refetch}
+              className="border-destructive/40 text-destructive hover:bg-destructive/15 rounded-lg border px-3 py-1 text-sm transition-colors"
+            >
+              Retry
+            </button>
+          </div>
+        )}
 
-      {tags.length === 0 && !error ? (
-        <div className="border-border bg-card rounded-lg border p-12 text-center">
-          <Code2 className="text-muted-foreground mx-auto mb-3 h-10 w-10" />
-          <h3 className="text-foreground text-sm font-medium">No script tags yet</h3>
-          <p className="text-muted-foreground mt-1 text-sm">
-            Add tracking codes like Google Analytics, Tag Manager, or Facebook Pixel.
-          </p>
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <h1 className="text-foreground mb-1">Script Tags</h1>
+            <p className="text-muted-foreground text-sm">
+              Manage tracking codes, analytics, and custom scripts injected into your site
+            </p>
+            {tags.length > 0 && (
+              <div className="mt-3 flex flex-wrap gap-1.5">
+                <StatPill value={tags.length} label="Total" />
+                <StatPill
+                  value={tags.filter((t) => t.enabled).length}
+                  label="Active"
+                  valueClassName="text-[var(--suc)]"
+                />
+                <StatPill
+                  value={tags.filter((t) => !t.enabled).length}
+                  label="Inactive"
+                  valueClassName="text-[var(--muted)]"
+                />
+              </div>
+            )}
+          </div>
           <button
             type="button"
-            onClick={() => onNavigate?.('/script-tags/new')}
-            className="bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+            onClick={() => setSelection({ mode: 'new' })}
+            className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
           >
             <Plus className="h-4 w-4" />
-            Add Your First Tag
+            New Script
           </button>
         </div>
-      ) : (
-        <div className="border-border bg-card overflow-hidden rounded-lg border">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-border bg-muted border-b">
-                <th className="text-muted-foreground px-4 py-3 text-left font-medium">Name</th>
-                <th className="text-muted-foreground px-4 py-3 text-left font-medium">Placement</th>
-                <th className="text-muted-foreground px-4 py-3 text-left font-medium">Scope</th>
-                <th className="text-muted-foreground px-4 py-3 text-center font-medium">
-                  Priority
-                </th>
-                <th className="text-muted-foreground px-4 py-3 text-center font-medium">Enabled</th>
-              </tr>
-            </thead>
-            <tbody>
-              {tags.map((tag) => (
-                <tr
-                  key={tag.id}
-                  className="border-border hover:bg-muted border-b transition-colors last:border-0"
-                >
-                  <td className="px-4 py-3">
-                    <button
-                      type="button"
-                      onClick={() => onNavigate?.(`/script-tags/${tag.id}`)}
-                      className="text-primary hover:text-primary/80 font-medium hover:underline"
-                    >
-                      {tag.name}
-                    </button>
-                  </td>
-                  <td className="px-4 py-3">
-                    <span
-                      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-foreground'}`}
-                    >
-                      {PLACEMENT_LABELS[tag.placement] ?? tag.placement}
-                    </span>
-                  </td>
-                  <td className="text-muted-foreground px-4 py-3">{scopeLabel(tag)}</td>
-                  <td className="text-muted-foreground px-4 py-3 text-center font-mono">
-                    {tag.priority}
-                  </td>
-                  <td className="px-4 py-3 text-center">
-                    <EnabledSwitch
-                      checked={tag.enabled}
-                      disabled={togglingId === tag.id}
-                      onCheckedChange={(next) => void toggleEnabled(tag, next)}
-                      aria-label={`${tag.enabled ? 'Disable' : 'Enable'} ${tag.name}`}
-                    />
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
+      </div>
+
+      <SplitPaneLayout>
+        <SplitPaneList className="p-3 pt-0 pr-6 sm:p-4 sm:pt-0 sm:pr-8">
+          {tags.length === 0 && !error ? (
+            <div className="border-border bg-card rounded-lg border p-12 text-center">
+              <Code2 className="text-muted-foreground mx-auto mb-3 h-10 w-10" />
+              <h3 className="text-foreground text-sm font-medium">No script tags yet</h3>
+              <p className="text-muted-foreground mt-1 text-sm">
+                Add tracking codes like Google Analytics, Tag Manager, or Facebook Pixel.
+              </p>
+              <button
+                type="button"
+                onClick={() => setSelection({ mode: 'new' })}
+                className="bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+              >
+                <Plus className="h-4 w-4" />
+                Add Your First Script
+              </button>
+            </div>
+          ) : (
+            <div className="border-border bg-card overflow-hidden rounded-lg border">
+              <table className="w-full text-sm" aria-label="Script tags">
+                <thead>
+                  <tr className="border-border bg-muted border-b">
+                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
+                      Script
+                    </th>
+                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
+                      Location
+                    </th>
+                    <th className="text-muted-foreground px-4 py-3 text-center font-medium">
+                      Priority
+                    </th>
+                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">Scope</th>
+                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
+                      Consent
+                    </th>
+                    <th className="text-muted-foreground px-4 py-3 text-center font-medium">
+                      Active
+                    </th>
+                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
+                      Updated
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {tags.map((tag) => {
+                    const isSelected = selection?.mode === 'edit' && selection.id === tag.id
+                    return (
+                      <tr
+                        key={tag.id}
+                        className={`border-border cursor-pointer border-b transition-colors last:border-0 ${
+                          isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-muted'
+                        }`}
+                        onClick={() => toggleRow(tag)}
+                      >
+                        <td className="px-4 py-[11px]">
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              toggleRow(tag)
+                            }}
+                            aria-expanded={isSelected}
+                            className="text-foreground hover:text-primary text-left font-medium"
+                          >
+                            {tag.name}
+                          </button>
+                        </td>
+                        <td className="px-4 py-[11px]">
+                          <span
+                            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-foreground'}`}
+                          >
+                            {PLACEMENT_LABELS[tag.placement] ?? tag.placement}
+                          </span>
+                        </td>
+                        <td className="text-muted-foreground px-4 py-[11px] text-center font-mono">
+                          {tag.priority}
+                        </td>
+                        <td className="text-muted-foreground px-4 py-[11px]">{scopeLabel(tag)}</td>
+                        <td className="px-4 py-[11px]">
+                          {tag.consentCategory && tag.consentCategory !== 'none' ? (
+                            <span className="rounded-[5px] border border-[var(--bdr)] bg-[var(--bg)] px-1.5 py-0.5 text-[11px] text-[var(--sub)]">
+                              {CONSENT_LABELS[tag.consentCategory] ?? tag.consentCategory}
+                            </span>
+                          ) : (
+                            <span className="text-muted-foreground text-xs">—</span>
+                          )}
+                        </td>
+                        <td
+                          className="px-4 py-[11px] text-center"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <EnabledSwitch
+                            checked={tag.enabled}
+                            disabled={togglingId === tag.id}
+                            onCheckedChange={(next) => void toggleEnabled(tag, next)}
+                            aria-label={`${tag.enabled ? 'Disable' : 'Enable'} ${tag.name}`}
+                          />
+                        </td>
+                        <td className="text-muted-foreground px-4 py-[11px] text-xs">
+                          {formatUpdated(tag.updatedAt)}
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </SplitPaneList>
+
+        <InspectorPane open={paneOpen} width={420} aria-label="Script editor">
+          <ScriptTagEditorPane
+            key={selection?.mode === 'edit' ? selection.id : 'new'}
+            tag={selectedTag}
+            onClose={() => setSelection(null)}
+            onChanged={handlePaneChanged}
+          />
+        </InspectorPane>
+      </SplitPaneLayout>
     </div>
   )
 }

package/src/views/dashboard/OnboardingBlock.tsx

@@ -0,0 +1,233 @@
+'use client'
+
+/**
+ * Dashboard onboarding / getting-started block (design: Dashboard.html
+ * `OnboardingSection`). Shown only while the site is effectively empty —
+ * it REPLACES the Recent Activity / Publishing Queue / Content Health grid
+ * (see `shouldShowOnboarding`), sitting between the stats row and the
+ * Delivery API card.
+ *
+ * Steps are DERIVED from data the dashboard already fetches — the
+ * prototype's click-to-toggle checklist was mock behavior. No new API
+ * endpoints; every signal below comes from `/stats` or
+ * `/stats/api-delivery`:
+ *
+ *   1. Create your workspace        — always complete (they're logged in).
+ *   2. Create your first Post/Page  — post/page collection counts > 0.
+ *   3. Upload media assets          — `totalMedia > 0`.
+ *   4. Configure SEO defaults       — `avgSeoScore > 0`. The average SEO
+ *      score is the only SEO signal in already-fetched data; it is 0 until
+ *      content is scored, so the step reads incomplete on an empty site
+ *      (honest, if conservative).
+ *   5. Get your API key             — no API-key count exists in dashboard
+ *      data, so we use recorded delivery-API traffic (`hasData` from
+ *      /stats/api-delivery) as the proxy: traffic means the API is being
+ *      consumed. Incomplete by default.
+ *   6. Invite team members          — `totalUsers > 1`.
+ *
+ * Quick links deviate from the prototype in one place: "Webhooks guide"
+ * has no in-admin destination or docs URL (webhooks UI only exists inside
+ * individual form settings), so it is replaced with an internal SEO
+ * defaults link — no dead links.
+ */
+
+import { Check, ChevronRight, Code, Key, Search, Users, type LucideIcon } from 'lucide-react'
+
+export interface OnboardingSignals {
+  /** Combined document count across post/page-type collections. */
+  postsAndPagesCount: number
+  /** `totalMedia` from /stats. */
+  mediaCount: number
+  /** `avgSeoScore` from /stats (0 when nothing is scored yet). */
+  seoScore: number
+  /** `totalUsers` from /stats. */
+  userCount: number
+  /** `hasData` from /stats/api-delivery — any delivery traffic recorded. */
+  hasApiTraffic: boolean
+}
+
+export interface OnboardingStep {
+  id: string
+  label: string
+  done: boolean
+}
+
+export function deriveOnboardingSteps(signals: OnboardingSignals): OnboardingStep[] {
+  return [
+    { id: 'workspace', label: 'Create your workspace', done: true },
+    {
+      id: 'first-content',
+      label: 'Create your first Post or Page',
+      done: signals.postsAndPagesCount > 0,
+    },
+    { id: 'media', label: 'Upload media assets', done: signals.mediaCount > 0 },
+    { id: 'seo', label: 'Configure SEO defaults', done: signals.seoScore > 0 },
+    { id: 'api-key', label: 'Get your API key', done: signals.hasApiTraffic },
+    { id: 'invite', label: 'Invite team members', done: signals.userCount > 1 },
+  ]
+}
+
+/**
+ * The block appears only when content is essentially empty: zero posts +
+ * pages AND zero media (steps 2 and 3 both incomplete).
+ */
+export function shouldShowOnboarding(
+  signals: Pick<OnboardingSignals, 'postsAndPagesCount' | 'mediaCount'>,
+): boolean {
+  return signals.postsAndPagesCount === 0 && signals.mediaCount === 0
+}
+
+interface QuickLink {
+  icon: LucideIcon
+  label: string
+  sub: string
+  path: string
+}
+
+const QUICK_LINKS: QuickLink[] = [
+  {
+    icon: Code,
+    label: 'API Reference',
+    sub: 'REST & GraphQL docs',
+    path: '/settings?tab=api-keys',
+  },
+  { icon: Search, label: 'SEO defaults', sub: 'Set up site metadata', path: '/settings?tab=seo' },
+  { icon: Users, label: 'Invite team', sub: 'Add editors & admins', path: '/settings?tab=users' },
+  { icon: Key, label: 'API Keys', sub: 'Manage access tokens', path: '/settings?tab=api-keys' },
+]
+
+export interface OnboardingBlockProps {
+  signals: OnboardingSignals
+  onNavigate?: (path: string) => void
+}
+
+export function OnboardingBlock({ signals, onNavigate }: OnboardingBlockProps) {
+  const steps = deriveOnboardingSteps(signals)
+  const done = steps.filter((s) => s.done).length
+
+  return (
+    <div className="space-y-3.5">
+      {/* Welcome banner ─────────────────────────────────────────────── */}
+      <section
+        aria-labelledby="ob-welcome-title"
+        className="rounded-[var(--r)] border border-[var(--bdr)] bg-[linear-gradient(135deg,var(--acc-l)_0%,var(--card)_60%)] px-7 py-6 shadow-[var(--shd)]"
+      >
+        <h2
+          id="ob-welcome-title"
+          className="text-[17px] font-medium tracking-[-0.3px] text-[var(--txt)]"
+        >
+          Welcome to ActuateCMS <span aria-hidden>👋</span>
+        </h2>
+        <p className="mt-1 max-w-[480px] text-[length:var(--fs-body)] text-[var(--sub)]">
+          Your headless CMS is ready. Complete these steps to start delivering content to your
+          frontend. {done}/{steps.length} steps complete.
+        </p>
+        <div
+          role="progressbar"
+          aria-label="Onboarding progress"
+          aria-valuemin={0}
+          aria-valuemax={steps.length}
+          aria-valuenow={done}
+          aria-valuetext={`${done} of ${steps.length} steps complete`}
+          className="mt-3 h-[6px] max-w-[400px] overflow-hidden rounded-full bg-[var(--bdr)]"
+        >
+          <div
+            className="h-full rounded-full bg-[var(--acc)] motion-safe:transition-[width] motion-safe:duration-[var(--motion-base)]"
+            style={{ width: `${(done / steps.length) * 100}%` }}
+          />
+        </div>
+      </section>
+
+      {/* Two-card grid ──────────────────────────────────────────────── */}
+      <div className="grid grid-cols-1 gap-3.5 lg:grid-cols-2">
+        {/* Getting started checklist */}
+        <section
+          aria-labelledby="ob-checklist-title"
+          className="rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--card)] p-6 shadow-[var(--shd)]"
+        >
+          <h3
+            id="ob-checklist-title"
+            className="text-[length:var(--fs-card)] font-medium text-[var(--txt)]"
+          >
+            Getting started
+          </h3>
+          <p className="mt-1 mb-4 text-[length:var(--fs-sub)] leading-[1.55] text-[var(--sub)]">
+            Complete each step to get the most out of ActuateCMS.
+          </p>
+          <ul role="list" className="space-y-0.5">
+            {steps.map((step) => (
+              <li key={step.id} className="flex items-center gap-[11px] rounded-lg px-2.5 py-2">
+                <span
+                  aria-hidden
+                  className={`flex h-[19px] w-[19px] shrink-0 items-center justify-center rounded-full motion-safe:transition-colors motion-safe:duration-[var(--motion-base)] ${
+                    step.done ? 'bg-[var(--suc)]' : 'border-2 border-[var(--bdr)]'
+                  }`}
+                >
+                  {step.done && (
+                    <Check
+                      size={11}
+                      strokeWidth={2.5}
+                      className="text-[var(--success-foreground)]"
+                    />
+                  )}
+                </span>
+                <span
+                  className={`text-[length:var(--fs-body)] ${
+                    step.done ? 'text-[var(--muted)] line-through' : 'text-[var(--txt)]'
+                  }`}
+                >
+                  {step.label}
+                </span>
+                {/* Completion state must not rely on color/strikethrough alone. */}
+                <span className="sr-only">{step.done ? '(completed)' : '(not completed)'}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        {/* Quick links */}
+        <section
+          aria-labelledby="ob-links-title"
+          className="rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--card)] p-6 shadow-[var(--shd)]"
+        >
+          <h3
+            id="ob-links-title"
+            className="text-[length:var(--fs-card)] font-medium text-[var(--txt)]"
+          >
+            Quick links
+          </h3>
+          <p className="mt-1 mb-4 text-[length:var(--fs-sub)] leading-[1.55] text-[var(--sub)]">
+            Helpful resources for building with ActuateCMS.
+          </p>
+          <ul role="list" className="space-y-0.5">
+            {QUICK_LINKS.map((link) => (
+              <li key={link.label}>
+                <button
+                  type="button"
+                  onClick={() => onNavigate?.(link.path)}
+                  className="focus-visible:ring-ring flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-[var(--acc-l)] focus:outline-none focus-visible:ring-2"
+                >
+                  <span
+                    aria-hidden
+                    className="flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[7px] bg-[var(--acc-l)] text-[var(--acc)]"
+                  >
+                    <link.icon size={14} />
+                  </span>
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-[length:var(--fs-body)] font-medium text-[var(--txt)]">
+                      {link.label}
+                    </span>
+                    <span className="block truncate text-[length:var(--fs-hint)] text-[var(--muted)]">
+                      {link.sub}
+                    </span>
+                  </span>
+                  <ChevronRight size={14} className="shrink-0 text-[var(--muted)]" aria-hidden />
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+      </div>
+    </div>
+  )
+}

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

@@ -48,6 +48,12 @@ import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
 interface PageSectionEditorProps {
   /** undefined when creating a new page (`/pages/new`) */
   documentId?: string
+  /**
+   * Parent page to preselect on a new page — set when arriving via
+   * "Add sub-page" in the Pages tree view (`/pages/new?parent=<id>`).
+   * Ignored when `documentId` is present.
+   */
+  initialParentId?: string | null
   config?: any
   session?: any
   onNavigate: (path: string) => void
@@ -73,6 +79,7 @@ function deriveCan(session: any): { canEdit: boolean; canPublish: boolean } {
 
 export function PageSectionEditor({
   documentId,
+  initialParentId,
   config,
   session,
   onNavigate,
@@ -136,7 +143,7 @@ export function PageSectionEditor({
     }
 
     if (!documentId) {
-      setPage(emptyPage())
+      setPage(emptyPage(initialParentId ?? null))
       setLoading(false)
       return
     }
@@ -160,7 +167,7 @@ export function PageSectionEditor({
     return () => {
       cancelled = true
     }
-  }, [documentId, schemaError])
+  }, [documentId, initialParentId, schemaError])
 
   // ─── Unsaved-changes guard (browser unload) ──────────────────────────
   useEffect(() => {