@prenta/admin 0.92.0 → 0.93.0

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

@@ -0,0 +1,433 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { AlertTriangle, Check, Copy, ExternalLink, Layers, Lock, Trash2 } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  restrictedCount,
+  robotsMetaLine,
+  type MaxImagePreview,
+  type RobotsPermissions,
+} from '@prenta/core/seo/robots-directives'
+import {
+  SeoAccordion,
+  SeoAccordionBadge,
+  SeoAccordionItem,
+} from '../../components/seo/SeoAccordion.js'
+import { AuthorPicker } from '../../components/page-tab/AuthorPicker.js'
+import { DirectiveSwitch } from '../../components/page-tab/DirectiveSwitch.js'
+import { pendingSlugChange } from '../../lib/page-redirect.js'
+import type { EditorPage } from '../../lib/page-editor-service.js'
+
+const INPUT =
+  'border-border bg-input-background text-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none'
+const LABEL = 'text-foreground mb-1 block text-xs font-medium'
+
+export interface PageTabProps {
+  page: EditorPage
+  canEdit: boolean
+  /** Path as it is on the live site, or null when never published. */
+  publishedPath: string | null
+  /** Site origin, for resolving the full URL. */
+  siteUrl: string
+  directives: RobotsPermissions
+  onDirectivesChange: (next: RobotsPermissions) => void
+  /** Whether a 301 should be created when the moved page is published. */
+  redirectOnPublish: boolean
+  onRedirectOnPublishChange: (next: boolean) => void
+  /**
+   * Whether this user can create redirects. `POST /redirects` is limited to
+   * publishers who may also publish the page; when false the URL-changed
+   * warning still shows, but the checkbox that would promise a 301 does not.
+   */
+  canCreateRedirect?: boolean
+  onPageChange: (patch: Partial<EditorPage>) => void
+  onDuplicate: () => void
+  onTrash: () => void
+  /** Template/schema binding, shown read-only. */
+  templateName?: string
+  schemaType?: string
+  /** Offered as the brand byline in the author picker. */
+  brandName?: string
+}
+
+/**
+ * Rail tab 3 — everything about the page that is not its content or its search
+ * copy: where it lives, when it goes live, what crawlers may do with it, what
+ * owns its layout, and how to get rid of it.
+ */
+export function PageTab({
+  page,
+  canEdit,
+  publishedPath,
+  siteUrl,
+  directives,
+  onDirectivesChange,
+  redirectOnPublish,
+  onRedirectOnPublishChange,
+  canCreateRedirect = true,
+  onPageChange,
+  onDuplicate,
+  onTrash,
+  templateName,
+  schemaType,
+  brandName,
+}: PageTabProps) {
+  const [copied, setCopied] = useState(false)
+  const [confirmTrash, setConfirmTrash] = useState(false)
+
+  const fullUrl = useMemo(() => {
+    const origin = siteUrl.replace(/\/+$/, '')
+    const path = page.path.startsWith('/') ? page.path : `/${page.path}`
+    return `${origin}${path}`
+  }, [siteUrl, page.path])
+
+  const move = pendingSlugChange(publishedPath, page.path)
+  const restricted = restrictedCount(directives)
+  const set = (patch: Partial<RobotsPermissions>) => onDirectivesChange({ ...directives, ...patch })
+
+  async function copyUrl() {
+    try {
+      await navigator.clipboard.writeText(fullUrl)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1600)
+    } catch {
+      toast.error('Could not copy — your browser blocked clipboard access.')
+    }
+  }
+
+  return (
+    <SeoAccordion defaultOpen={['address', 'publishing']}>
+      {/* ── Address ────────────────────────────────────────────────────── */}
+      <SeoAccordionItem
+        value="address"
+        title="Address"
+        badge={move ? <SeoAccordionBadge tone="warn">URL CHANGED</SeoAccordionBadge> : undefined}
+      >
+        <div>
+          <label className={LABEL} htmlFor="pt-slug">
+            URL slug
+          </label>
+          <input
+            id="pt-slug"
+            className={INPUT}
+            value={page.slug}
+            disabled={!canEdit}
+            onChange={(e) => {
+              // Path is the public URL the redirect detector and the displayed
+              // full link both read. Keep it in lockstep when it was derived
+              // from the previous slug — the same rule as PageSettingsModal.
+              // A custom path (e.g. `/team/about` while slug is `about`) is
+              // left alone; the editor must change that elsewhere on purpose.
+              const slug = e.target.value
+              const patch: Partial<EditorPage> = { slug }
+              if (!page.path || page.path === `/${page.slug}`) {
+                patch.path = slug ? `/${slug}` : '/'
+              }
+              onPageChange(patch)
+            }}
+          />
+          <div className="mt-1.5 flex items-center gap-1.5">
+            {/* `data-volatile` so visual baselines mask it: the origin comes
+                from `NEXT_PUBLIC_SITE_URL`, which is set in some environments
+                and not others, and a screenshot that bakes one in fails in the
+                other. */}
+            <code
+              data-volatile
+              className="text-muted-foreground min-w-0 flex-1 truncate font-mono text-[11px]"
+            >
+              {fullUrl}
+            </code>
+            <button
+              type="button"
+              onClick={copyUrl}
+              className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1"
+              aria-label={copied ? 'Full URL copied' : 'Copy full URL'}
+            >
+              {copied ? (
+                <Check size={13} className="text-success" aria-hidden />
+              ) : (
+                <Copy size={13} aria-hidden />
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Only for a page that is actually live. A slug change on a draft
+            breaks nothing, and warning about it would train editors to dismiss
+            the warning that matters. */}
+        {move && (
+          <div className="bg-warning/10 border-warning/30 space-y-2 rounded-lg border p-2.5">
+            <div className="flex gap-2">
+              <AlertTriangle size={14} className="text-warning mt-px shrink-0" aria-hidden />
+              <p className="text-[11.5px] leading-normal">
+                This page is live at <b className="font-medium">{move.from}</b>. Publishing moves
+                it, and every existing link to the old address will 404.
+              </p>
+            </div>
+            {canCreateRedirect ? (
+              <label className="flex cursor-pointer items-start gap-2 text-[11.5px]">
+                <input
+                  type="checkbox"
+                  checked={redirectOnPublish}
+                  disabled={!canEdit}
+                  onChange={(e) => onRedirectOnPublishChange(e.target.checked)}
+                  className="accent-primary mt-0.5"
+                />
+                <span>
+                  Create a 301 redirect on publish
+                  <span className="text-muted-foreground mt-0.5 block font-mono text-[10.5px]">
+                    {move.from} → {move.to}
+                  </span>
+                </span>
+              </label>
+            ) : (
+              <p className="text-muted-foreground text-[11.5px] leading-normal">
+                Ask an admin to create a 301 from{' '}
+                <span className="font-mono text-[10.5px]">
+                  {move.from} → {move.to}
+                </span>{' '}
+                so existing links keep working.
+              </p>
+            )}
+          </div>
+        )}
+
+        {page.status === 'PUBLISHED' && (
+          <a
+            href={fullUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="border-border hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium"
+          >
+            <ExternalLink size={12} aria-hidden />
+            Open live page
+          </a>
+        )}
+      </SeoAccordionItem>
+
+      {/* ── Publishing ─────────────────────────────────────────────────── */}
+      <SeoAccordionItem
+        value="publishing"
+        title="Publishing"
+        badge={
+          <SeoAccordionBadge tone={page.status === 'PUBLISHED' ? 'good' : 'neutral'}>
+            {page.status}
+          </SeoAccordionBadge>
+        }
+      >
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-[11.5px]">
+          <dt className="text-muted-foreground">Last edited</dt>
+          <dd data-volatile>{formatStamp(page.updatedAt) ?? '—'}</dd>
+          <dt className="text-muted-foreground">Published</dt>
+          <dd data-volatile>{formatStamp(page.publishedAt) ?? 'Not yet published'}</dd>
+          {page.scheduledAt && (
+            <>
+              <dt className="text-muted-foreground">Goes live</dt>
+              <dd data-volatile>{formatStamp(page.scheduledAt)}</dd>
+            </>
+          )}
+          {page.scheduledUnpublishAt && (
+            <>
+              <dt className="text-muted-foreground">Comes down</dt>
+              <dd data-volatile>{formatStamp(page.scheduledUnpublishAt)}</dd>
+            </>
+          )}
+        </dl>
+        <div>
+          <p className={LABEL}>Byline</p>
+          <AuthorPicker
+            value={{ name: page.authorName, id: page.authorId }}
+            onChange={(next) => onPageChange({ authorName: next.name, authorId: next.id })}
+            brandName={brandName}
+            disabled={!canEdit}
+          />
+          <p className="text-muted-foreground mt-1 text-[11px] leading-snug">
+            Shown on the page and in its structured data. Separate from who created the record,
+            which is not reassigned.
+          </p>
+        </div>
+
+        <p className="text-muted-foreground text-[11px] leading-snug">
+          Status is changed with Publish and Schedule in the toolbar, so there is one way to do it
+          rather than two that can disagree.
+        </p>
+      </SeoAccordionItem>
+
+      {/* ── Search directives ──────────────────────────────────────────── */}
+      <SeoAccordionItem
+        value="directives"
+        title="Search directives"
+        badge={
+          restricted === 0 ? (
+            <SeoAccordionBadge tone="good">OPEN</SeoAccordionBadge>
+          ) : (
+            <SeoAccordionBadge tone="warn">{restricted} RESTRICTED</SeoAccordionBadge>
+          )
+        }
+      >
+        <div className="divide-border divide-y">
+          <DirectiveSwitch
+            id="pt-index"
+            label="Show in search results"
+            hint="Off removes the page from Google and every other index."
+            checked={directives.index}
+            onChange={(v) => set({ index: v })}
+            permissiveToken="index"
+            restrictiveToken="noindex"
+            disabled={!canEdit}
+          />
+          <DirectiveSwitch
+            id="pt-follow"
+            label="Follow links on this page"
+            hint="Off stops crawlers passing authority to anything this page links to."
+            checked={directives.follow}
+            onChange={(v) => set({ follow: v })}
+            permissiveToken="follow"
+            restrictiveToken="nofollow"
+            disabled={!canEdit}
+          />
+          <DirectiveSwitch
+            id="pt-snippet"
+            label="Allow text snippets"
+            hint="Off blocks AI Overviews and chat citations entirely."
+            checked={directives.snippet}
+            onChange={(v) => set({ snippet: v })}
+            permissiveToken="snippet"
+            restrictiveToken="nosnippet"
+            disabled={!canEdit || !directives.index}
+          />
+          <DirectiveSwitch
+            id="pt-archive"
+            label="Allow cached copies"
+            checked={directives.archive}
+            onChange={(v) => set({ archive: v })}
+            permissiveToken="archive"
+            restrictiveToken="noarchive"
+            disabled={!canEdit || !directives.index}
+          />
+        </div>
+
+        <div>
+          <label className={LABEL} htmlFor="pt-img-preview">
+            Image preview size
+          </label>
+          <select
+            id="pt-img-preview"
+            className={INPUT}
+            value={directives.maxImagePreview}
+            disabled={!canEdit || !directives.index || !directives.snippet}
+            onChange={(e) => set({ maxImagePreview: e.target.value as MaxImagePreview })}
+          >
+            <option value="large">Large — full-width image in results</option>
+            <option value="standard">Standard — thumbnail</option>
+            <option value="none">None</option>
+          </select>
+        </div>
+
+        <div>
+          <p className={LABEL}>What ships in the page head</p>
+          {/* The literal line, composed by the same function the renderer uses.
+              An editor should never have to trust that this UI and the output
+              agree — they are the same code. */}
+          <code className="bg-muted text-muted-foreground block overflow-x-auto rounded-lg px-2.5 py-2 font-mono text-[10.5px] whitespace-pre">
+            {robotsMetaLine(directives)}
+          </code>
+        </div>
+
+        {!directives.index && (
+          <div className="bg-warning/10 border-warning/30 flex gap-2 rounded-lg border p-2.5">
+            <AlertTriangle size={14} className="text-warning mt-px shrink-0" aria-hidden />
+            <p className="text-[11.5px] leading-normal">
+              <b className="font-semibold">This page is hidden from search.</b> Publishing will not
+              make it findable.
+            </p>
+          </div>
+        )}
+      </SeoAccordionItem>
+
+      {/* ── Layout ─────────────────────────────────────────────────────── */}
+      <SeoAccordionItem
+        value="layout"
+        title="Layout"
+        badge={<SeoAccordionBadge tone="neutral">LOCKED</SeoAccordionBadge>}
+      >
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-[11.5px]">
+          <dt className="text-muted-foreground">Template</dt>
+          <dd className="flex items-center gap-1.5">
+            <Layers size={12} className="text-muted-foreground" aria-hidden />
+            {templateName ?? 'Default'}
+          </dd>
+          <dt className="text-muted-foreground">Schema</dt>
+          <dd>{schemaType ?? 'WebPage'}</dd>
+        </dl>
+        <div className="text-muted-foreground flex gap-2 text-[11px] leading-snug">
+          <Lock size={13} className="mt-px shrink-0" aria-hidden />
+          <p>
+            Layout and styling are design-owned — built in code, not configured here. This tab edits
+            where the page lives and how it is indexed.
+          </p>
+        </div>
+      </SeoAccordionItem>
+
+      {/* ── Danger zone ────────────────────────────────────────────────── */}
+      <SeoAccordionItem value="danger" title="Danger zone">
+        <button
+          type="button"
+          onClick={onDuplicate}
+          disabled={!canEdit || !page.id}
+          className="border-border hover:border-destructive hover:bg-destructive/10 hover:text-destructive flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium transition-colors disabled:opacity-50"
+        >
+          <Copy size={13} aria-hidden />
+          Duplicate page
+        </button>
+
+        {confirmTrash ? (
+          <div className="border-destructive/40 bg-destructive/10 space-y-2 rounded-lg border p-2.5">
+            <p className="text-[11.5px] leading-normal">
+              Move <b className="font-semibold">{page.title || 'this page'}</b> to trash?
+              {page.status === 'PUBLISHED' && ' It is live, and will stop being served.'}
+            </p>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={onTrash}
+                className="bg-destructive text-destructive-foreground rounded-md px-2.5 py-1 text-[11px] font-semibold"
+              >
+                Move to trash
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirmTrash(false)}
+                className="border-border rounded-md border px-2.5 py-1 text-[11px] font-medium"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setConfirmTrash(true)}
+            disabled={!canEdit || !page.id}
+            className="border-border hover:border-destructive hover:bg-destructive/10 hover:text-destructive flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium transition-colors disabled:opacity-50"
+          >
+            <Trash2 size={13} aria-hidden />
+            Move to trash
+          </button>
+        )}
+      </SeoAccordionItem>
+    </SeoAccordion>
+  )
+}
+
+/** `null` rather than a placeholder string, so callers choose their own dash. */
+function formatStamp(value: string | null): string | null {
+  if (!value) return null
+  const d = new Date(value)
+  if (Number.isNaN(d.getTime())) return null
+  return d.toLocaleString(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  })
+}

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

@@ -18,11 +18,15 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { MediaPickerModal } from '../../components/MediaPickerModal.js'
+import { MediaBlock } from '../../components/MediaBlock.js'
+import { ReflowMeter } from '../../components/ReflowMeter.js'
 import { InspectorExpandButton, ResizableAside } from '../../components/ui/ResizableAside.js'
 import { Toggle } from '../../components/ui/Toggle.js'
 import { RichTextField } from '../../fields/RichTextField.js'
+import { useReflowGuard } from '../../hooks/useReflowGuard.js'
+import { baselineFieldText } from '../../lib/reflow-baseline.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
+import { useReflowContext } from './reflow-context.js'
 import type { ResolvedRepeater, SectionSettings } from './section-types.js'
 import {
   blankRepeaterRow,
@@ -328,12 +332,52 @@ export function SectionInspector({
 
 // ─── Field renderers ─────────────────────────────────────────────────
 
+/**
+ * Field types the reflow guard measures.
+ *
+ * Text that wraps, and nothing else. A `select` has a fixed set of values the
+ * design already accounts for; a `boolean` has no text; `media` wraps nothing.
+ *
+ * `richText` is excluded deliberately. The probe establishes a baseline by
+ * writing the published string into the cloned element, which for rich text
+ * would mean injecting stored markup into the DOM — and the whole body is one
+ * marker, so a line count across several paragraphs answers no question an
+ * editor is asking.
+ */
+const GUARDED_FIELD_TYPES = new Set(['text', 'textarea', 'url'])
+
+/**
+ * Attaches the reflow readout under a field.
+ *
+ * Renders nothing at all when the guard has no rows — the section may be drawn
+ * by a consumer's renderer that carries no `data-cms-field` markers, and an
+ * empty row of dots would read as "measured, all fine" rather than "not
+ * measured".
+ */
+function FieldReflow({ fieldPath, value }: { fieldPath: string; value: string }) {
+  const ctx = useReflowContext()
+  const guard = useReflowGuard({
+    canvas: ctx.canvas,
+    sectionId: ctx.sectionId ?? '',
+    fieldPath,
+    value,
+    baseline: baselineFieldText(ctx.baseline, ctx.sectionId ?? '', fieldPath),
+    enabled: Boolean(ctx.canvas && ctx.sectionId),
+  })
+
+  if (guard.rows.length === 0) return null
+  return (
+    <ReflowMeter guard={guard} length={value.length} device={ctx.device} onProof={ctx.onProof} />
+  )
+}
+
 function ContentField({
   field,
   value,
   onChange,
   onPatch,
   id: idProp,
+  fieldPath,
 }: {
   field: SectionFieldDef
   value: unknown
@@ -345,9 +389,17 @@ function ContentField({
   onPatch?: (patch: Record<string, unknown>) => void
   /** Explicit input id (repeater rows pass a row-scoped id to stay unique). */
   id?: string
+  /**
+   * Dotted `data-cms-field` path for the reflow guard. Differs from `field.key`
+   * inside a repeater, where the marker is `stats.0.label`. Defaults to the
+   * key, which is right for every top-level field.
+   */
+  fieldPath?: string
 }) {
   const id = idProp ?? `insp-field-${field.key}`
+  const path = fieldPath ?? field.key
   const text = typeof value === 'string' ? value : ''
+  const guarded = GUARDED_FIELD_TYPES.has(field.type)
 
   const repeater = resolveRepeaterField(field)
   if (repeater) {
@@ -405,6 +457,7 @@ function ContentField({
           placeholder={field.placeholder}
           onChange={(e) => onChange(e.target.value)}
         />
+        {guarded && <FieldReflow fieldPath={path} value={text} />}
         {field.help && <p className="text-muted-foreground mt-1 text-xs">{field.help}</p>}
       </div>
     )
@@ -424,6 +477,7 @@ function ContentField({
         placeholder={field.placeholder}
         onChange={(e) => onChange(e.target.value)}
       />
+      {guarded && <FieldReflow fieldPath={path} value={text} />}
       {field.help && <p className="text-muted-foreground mt-1 text-xs">{field.help}</p>}
     </div>
   )
@@ -459,56 +513,42 @@ function MediaField({
   /**
    * When provided, picking from the library applies a multi-key patch (URL +
    * intrinsic width/height) in one update. Falls back to `onChange` (URL only)
-   * for manual entry and when no patch sink is wired.
+   * when no patch sink is wired.
    */
   onPatch?: (patch: Record<string, unknown>) => void
 }) {
-  const [open, setOpen] = useState(false)
   return (
     <div>
-      <label className={LABEL} htmlFor={id}>
+      {/* Not `htmlFor` — the block is a composite of buttons, not a single
+          labellable control. The label names the group; each control inside
+          carries its own accessible name. */}
+      <span className={LABEL} id={`${id}-label`}>
         {field.label}
-      </label>
-      <div className="flex gap-2">
-        <input
-          id={id}
-          className={`${INPUT} flex-1`}
-          placeholder="https://…"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-        />
-        <button
-          type="button"
-          onClick={() => setOpen(true)}
-          className="bg-accent text-foreground border-border hover:bg-accent/80 rounded-md border px-3 py-1.5 text-xs font-medium"
-        >
-          Browse
-        </button>
-      </div>
-      {value && (
-        <div className="border-border bg-muted mt-2 overflow-hidden rounded-md border">
-          <img src={value} alt="" className="h-28 w-full object-contain" />
-        </div>
-      )}
-      <MediaPickerModal
-        open={open}
-        onClose={() => setOpen(false)}
-        onSelectItem={(item) => {
-          if (!onPatch) return
+      </span>
+      <MediaBlock
+        value={value}
+        label={field.label}
+        onChange={(url, item) => {
+          if (!onPatch) {
+            onChange(url)
+            return
+          }
+          // Persist the intrinsic dimensions alongside the URL so the public
+          // renderer can use the CLS-safe path without a read-time lookup.
           const { width: wKey, height: hKey } = companionDimensionKeys(field.key)
-          const patch: Record<string, unknown> = { [field.key]: item.url }
-          if (typeof item.width === 'number') patch[wKey] = item.width
-          if (typeof item.height === 'number') patch[hKey] = item.height
+          const patch: Record<string, unknown> = { [field.key]: url }
+          if (typeof item?.width === 'number') patch[wKey] = item.width
+          if (typeof item?.height === 'number') patch[hKey] = item.height
+          // Clearing the slot clears the dimensions with it — leaving them
+          // behind would size the next image by the previous one's box.
+          if (!url) {
+            patch[wKey] = undefined
+            patch[hKey] = undefined
+          }
           onPatch(patch)
         }}
-        onSelect={(url) => {
-          // onSelectItem handles persistence when a patch sink is wired; only
-          // fall back to a URL-only update when it isn't.
-          if (!onPatch) onChange(url)
-          setOpen(false)
-        }}
-        accept="image/*"
       />
+      {field.help && <p className="text-muted-foreground mt-1 text-xs">{field.help}</p>}
     </div>
   )
 }
@@ -796,6 +836,7 @@ function SortableRepeaterRow({
           <ContentField
             key={sub.key}
             id={`insp-field-${fieldKey}-${index}-${sub.key}`}
+            fieldPath={`${fieldKey}.${index}.${sub.key}`}
             field={sub}
             value={row[sub.key]}
             onChange={(v) => onPatch({ [sub.key]: v })}