@prenta/admin 0.92.0 → 0.94.0

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,
@@ -47,7 +51,8 @@ interface SectionInspectorProps {
 const LABEL = 'text-foreground mb-1 block text-xs font-medium'
 const INPUT =
   'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
-const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l'
+const INSPECTOR_SHELL =
+  'prenta-editor-inspector bg-card border-border flex h-full flex-col border-l'
 
 function InspectorHeaderActions({
   onClose,
@@ -328,12 +333,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 +390,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 +458,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 +478,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 +514,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 +837,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 })}