@prenta/admin 0.92.0 → 0.94.0

package/src/components/BreakpointPicker.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { useState } from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { Check, ChevronDown } from 'lucide-react'
+import { adminPortalContainer } from '../lib/portal-container.js'
+import {
+  BREAKPOINT_GROUPS,
+  breakpointsInGroup,
+  getBreakpoint,
+  type BreakpointId,
+} from '../lib/breakpoints.js'
+import { breakpointIcon } from './breakpoint-icons.js'
+
+export interface BreakpointPickerProps {
+  value: BreakpointId
+  onChange: (id: BreakpointId) => void
+  disabled?: boolean
+}
+
+/**
+ * Preview-breakpoint selector for the editor header.
+ *
+ * A dropdown rather than a segmented row: six presets with names like "Tablet
+ * Landscape" do not fit a header strip, and the grouped menu is what makes the
+ * DESKTOP / TABLET / MOBILE structure legible.
+ *
+ * Radix owns the menu behaviour — outside-click, Escape, roving focus, and
+ * `aria-expanded` on the trigger — rather than a hand-rolled popover.
+ */
+export function BreakpointPicker({ value, onChange, disabled }: BreakpointPickerProps) {
+  const [open, setOpen] = useState(false)
+  const active = getBreakpoint(value)
+  const ActiveIcon = breakpointIcon(active.icon)
+
+  return (
+    <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+      <DropdownMenu.Trigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={`Preview breakpoint: ${active.name}, ${active.width} pixels`}
+          className={`border-border flex h-[34px] items-center gap-1.5 rounded-lg border px-2.5 text-[12.5px] font-medium transition-colors disabled:opacity-50 ${
+            open
+              ? 'border-brand bg-accent text-accent-foreground'
+              : 'bg-card text-foreground hover:bg-accent'
+          }`}
+        >
+          <ActiveIcon className={`h-4 w-4 shrink-0 ${open ? '' : 'text-brand'}`} aria-hidden />
+          {/* The name is the useful label; below `lg` the header is too tight
+              for it, so fall back to the two-letter form rather than truncating. */}
+          <span className="hidden lg:inline">{active.name}</span>
+          <span className="lg:hidden">{active.abbr}</span>
+          <span className="text-muted-foreground hidden text-[11.5px] tabular-nums xl:inline">
+            {active.width}
+          </span>
+          <ChevronDown
+            className={`h-3.5 w-3.5 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`}
+            aria-hidden
+          />
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal container={adminPortalContainer()}>
+        <DropdownMenu.Content
+          align="end"
+          sideOffset={6}
+          className="border-border bg-popover data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-1 z-[120] w-[272px] rounded-[10px] border p-[5px] shadow-[0_12px_34px_rgba(26,24,39,0.17)] duration-[130ms]"
+        >
+          {BREAKPOINT_GROUPS.map((group) => (
+            <DropdownMenu.Group key={group}>
+              <DropdownMenu.Label className="text-muted-foreground px-2.5 pt-2 pb-1 text-[10px] font-bold tracking-[0.6px]">
+                {group}
+              </DropdownMenu.Label>
+              {breakpointsInGroup(group).map((bp) => {
+                const Icon = breakpointIcon(bp.icon)
+                const selected = bp.id === value
+                return (
+                  <DropdownMenu.Item
+                    key={bp.id}
+                    onSelect={() => onChange(bp.id)}
+                    className={`focus:bg-accent flex cursor-pointer items-center gap-2 rounded-[7px] px-2.5 py-[7px] outline-none ${
+                      selected ? 'bg-accent' : ''
+                    }`}
+                  >
+                    <Icon
+                      className={`h-4 w-4 shrink-0 ${selected ? 'text-brand' : 'text-muted-foreground'}`}
+                      aria-hidden
+                    />
+                    <span
+                      className={`flex-1 text-[13px] ${selected ? 'text-brand font-semibold' : 'text-foreground'}`}
+                    >
+                      {bp.name}
+                    </span>
+                    <span className="text-muted-foreground text-[11.5px] tabular-nums">
+                      {bp.width}
+                    </span>
+                    {/* Not aria-hidden: the check is the only thing marking the
+                        current selection, and Radix menu items expose no
+                        selected state of their own. */}
+                    <Check
+                      className={`text-brand h-3.5 w-3.5 shrink-0 ${selected ? '' : 'invisible'}`}
+                      aria-label={selected ? 'Selected' : undefined}
+                    />
+                  </DropdownMenu.Item>
+                )
+              })}
+            </DropdownMenu.Group>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}

package/src/components/CanvasEditTip.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { MousePointerClick, X } from 'lucide-react'
+import { dismissCanvasEditTip, isCanvasEditTipDismissed } from '../lib/canvas-edit-chrome.js'
+
+/**
+ * One-time tip above the page/post canvas explaining how to edit.
+ * Dismiss persists in localStorage (`prenta.canvasEditTip.dismissed`).
+ */
+export function CanvasEditTip() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    setVisible(!isCanvasEditTipDismissed())
+  }, [])
+
+  if (!visible) return null
+
+  return (
+    <div
+      role="note"
+      className="border-border bg-card text-muted-foreground mx-auto mb-4 flex w-fit max-w-full items-start gap-2 rounded-lg border px-3 py-2 text-xs"
+    >
+      <MousePointerClick className="text-foreground mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden />
+      <p className="min-w-0 flex-1 leading-[1.5]">
+        <span className="text-foreground font-medium">Editing tip</span>
+        {' — '}
+        Hover sections for a light outline, then click to select. Edit copy and images in the
+        inspector. Use <span className="text-foreground font-medium">Site preview</span> to click
+        text and images in place.
+      </p>
+      <button
+        type="button"
+        aria-label="Dismiss editing tip"
+        onClick={() => {
+          dismissCanvasEditTip()
+          setVisible(false)
+        }}
+        className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring -mt-0.5 -mr-0.5 shrink-0 rounded-md p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+      >
+        <X className="h-3.5 w-3.5" aria-hidden />
+      </button>
+    </div>
+  )
+}

package/src/components/EditorRail.tsx

@@ -0,0 +1,219 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react'
+import {
+  RAIL_COLLAPSED_WIDTH,
+  RAIL_DEFAULT_WIDTH,
+  RAIL_MAX_WIDTH,
+  RAIL_MIN_WIDTH,
+  clampRailWidth,
+  readRailWidth,
+  writeRailWidth,
+} from '../lib/rail-width.js'
+
+/** What the rail hands its children so they can render a header. */
+export interface RailState {
+  width: number
+  dragging: boolean
+  collapse: () => void
+}
+
+export interface EditorRailProps {
+  /** Short label for the collapsed strip — normally the active tab's name. */
+  collapsedLabel: string
+  children: (state: RailState) => React.ReactNode
+}
+
+/**
+ * The editor's left rail: resizable, collapsible, and width-persistent.
+ *
+ * Collapsing UNMOUNTS the rail and swaps in a narrow strip rather than
+ * animating its width to zero. A zero-width panel leaves a visible sliver of
+ * border and keeps its contents in the accessibility tree, so a screen-reader
+ * user lands inside a panel sighted users cannot see.
+ *
+ * Children are a render prop rather than plain nodes because the panel header
+ * needs the live width and drag state — the numbers the rail owns — and
+ * threading them through context for one consumer is more machinery than the
+ * problem deserves.
+ */
+export function EditorRail({ collapsedLabel, children }: EditorRailProps) {
+  const [width, setWidth] = useState(RAIL_DEFAULT_WIDTH)
+  const [open, setOpen] = useState(true)
+  const [dragging, setDragging] = useState(false)
+  const railRef = useRef<HTMLDivElement>(null)
+
+  // Read persisted width after mount, never during render: there is no
+  // localStorage on the server, and seeding initial state from it would
+  // hydrate-mismatch.
+  useEffect(() => {
+    setWidth(readRailWidth())
+  }, [])
+
+  const applyWidth = useCallback((next: number) => {
+    const clamped = clampRailWidth(next)
+    setWidth(clamped)
+    writeRailWidth(clamped)
+  }, [])
+
+  const collapse = useCallback(() => setOpen(false), [])
+
+  // Pointer listeners go on `window`, not the handle: the pointer routinely
+  // outruns a 7px target mid-drag, and a handle-local listener would drop the
+  // drag the moment it did.
+  useEffect(() => {
+    if (!dragging) return
+
+    const onMove = (event: PointerEvent) => {
+      const left = railRef.current?.getBoundingClientRect().left ?? 0
+      applyWidth(event.clientX - left)
+    }
+    const stop = () => setDragging(false)
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', stop)
+    window.addEventListener('pointercancel', stop)
+
+    // Lock cursor and selection for the duration. Without this the cursor
+    // flickers between col-resize and text as it crosses elements, and the
+    // drag selects the panel's copy.
+    const { body } = document
+    const prevCursor = body.style.cursor
+    const prevSelect = body.style.userSelect
+    body.style.cursor = 'col-resize'
+    body.style.userSelect = 'none'
+
+    return () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', stop)
+      window.removeEventListener('pointercancel', stop)
+      body.style.cursor = prevCursor
+      body.style.userSelect = prevSelect
+    }
+  }, [dragging, applyWidth])
+
+  if (!open) {
+    return (
+      <div
+        className="prenta-editor-rail-collapsed bg-card border-border flex shrink-0 flex-col items-center gap-3 border-r py-3"
+        style={{ width: RAIL_COLLAPSED_WIDTH }}
+      >
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          aria-label={`Expand ${collapsedLabel} panel`}
+          title={`Expand ${collapsedLabel} panel`}
+          className="prenta-touch-target text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6.5 w-6.5 items-center justify-center rounded-md transition-colors"
+        >
+          <PanelLeftOpen className="h-4 w-4" aria-hidden />
+        </button>
+        {/* Vertical label so the strip still says which panel is hidden. The
+            button's accessible name already carries it, hence aria-hidden. */}
+        <span
+          className="prenta-rail-label text-muted-foreground text-[10px] font-bold tracking-[0.8px] whitespace-nowrap uppercase [writing-mode:vertical-rl]"
+          aria-hidden
+        >
+          {collapsedLabel}
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={railRef}
+      className={`prenta-editor-rail bg-card border-border relative flex shrink-0 flex-col border-r ${
+        // A width transition during a drag fights the pointer: the panel
+        // chases the cursor a frame behind and the resize feels broken.
+        dragging ? '' : 'motion-safe:transition-[width] motion-safe:duration-(--mo-slow)'
+      }`}
+      style={{ width }}
+    >
+      <div className="flex min-h-0 flex-1 flex-col">{children({ width, dragging, collapse })}</div>
+
+      <div
+        // `separator` with an orientation and a value range is what makes this
+        // operable without a pointer. A bare div with a pointerdown handler is
+        // invisible to keyboard and assistive-tech users.
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize panel"
+        aria-valuenow={width}
+        aria-valuemin={RAIL_MIN_WIDTH}
+        aria-valuemax={RAIL_MAX_WIDTH}
+        tabIndex={0}
+        onPointerDown={(event) => {
+          event.preventDefault()
+          setDragging(true)
+        }}
+        onDoubleClick={() => applyWidth(RAIL_DEFAULT_WIDTH)}
+        onKeyDown={(event) => {
+          const step = event.shiftKey ? 48 : 16
+          if (event.key === 'ArrowLeft') {
+            event.preventDefault()
+            applyWidth(width - step)
+          } else if (event.key === 'ArrowRight') {
+            event.preventDefault()
+            applyWidth(width + step)
+          } else if (event.key === 'Home') {
+            event.preventDefault()
+            applyWidth(RAIL_DEFAULT_WIDTH)
+          }
+        }}
+        className="group absolute inset-y-0 -right-[3px] z-30 w-[7px] cursor-col-resize focus-visible:outline-none"
+      >
+        {/* The 2px line it draws sits inside a 7px hit area on purpose — a 2px
+            pointer target is a coin flip. */}
+        <span
+          aria-hidden
+          className={`pointer-events-none absolute inset-y-0 left-[2.5px] w-0.5 transition-colors ${
+            dragging
+              ? 'bg-brand'
+              : 'group-hover:bg-brand group-focus-visible:bg-brand bg-transparent'
+          }`}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Header strip under the rail's tabs: panel title, the live width while
+ * dragging, and the collapse control.
+ */
+export function RailHeader({
+  title,
+  width,
+  dragging,
+  onCollapse,
+}: {
+  title: string
+  width: number
+  dragging: boolean
+  onCollapse: () => void
+}) {
+  return (
+    <div className="border-border flex items-center justify-between gap-2 border-b px-3.5 py-2.5">
+      <h2 className="text-foreground truncate text-[12.5px] font-semibold">{title}</h2>
+      <div className="flex shrink-0 items-center gap-1.5">
+        {/* Only while dragging: a permanent pixel readout is noise, but during
+            a resize it is the one number the user is actually aiming at. */}
+        {dragging && (
+          <span className="text-muted-foreground text-[11px] tabular-nums" aria-hidden>
+            {width}px
+          </span>
+        )}
+        <button
+          type="button"
+          onClick={onCollapse}
+          aria-label={`Collapse ${title} panel`}
+          title={`Collapse ${title} panel`}
+          className="prenta-touch-target text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6.5 w-6.5 items-center justify-center rounded-md transition-colors"
+        >
+          <PanelLeftClose className="h-4 w-4" aria-hidden />
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/EditorRailTabs.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { scoreBand } from '@prenta/core/seo/page-audit'
+
+export type RailTabId = 'sections' | 'seo' | 'page'
+
+export interface RailTab {
+  id: RailTabId
+  label: string
+  /** Panel title shown in the header below the strip. */
+  title: string
+  /** Count pill (Sections). */
+  count?: number
+  /**
+   * Score for the dot, banded by the page audit's own scale.
+   *
+   * `undefined` — not known yet; no dot is shown rather than a misleading one.
+   * `null`      — deliberately not rated (a gate is off, e.g. the page is
+   *               noindexed). Renders neutral, never as a low score.
+   */
+  score?: number | null
+}
+
+export interface EditorRailTabsProps {
+  tabs: RailTab[]
+  active: RailTabId
+  onChange: (id: RailTabId) => void
+}
+
+/**
+ * Three equal tabs across the top of the rail.
+ *
+ * Each tab carries a status glyph so the rail reads at a glance without being
+ * opened: a count for Sections, a band-coloured dot for SEO. The dot is
+ * accompanied by text in the accessible name — colour alone is not a signal
+ * for anyone who cannot distinguish these hues.
+ */
+export function EditorRailTabs({ tabs, active, onChange }: EditorRailTabsProps) {
+  return (
+    <div role="tablist" aria-label="Editor panels" className="border-border flex border-b">
+      {tabs.map((tab) => {
+        const selected = tab.id === active
+        // Bands with `scoreBand` from the audit itself, NOT `gradeFromScore`.
+        // The two disagree between 55 and 59 — a page scoring 57 read "fair"
+        // in the rings and "poor" on the tab summarising them, which is the
+        // same class of disagreement this dot was rewired to eliminate.
+        const band = typeof tab.score === 'number' ? scoreBand(tab.score) : null
+        const unrated = tab.score === null
+
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            id={`rail-tab-${tab.id}`}
+            aria-selected={selected}
+            aria-controls={`rail-panel-${tab.id}`}
+            tabIndex={selected ? 0 : -1}
+            onClick={() => onChange(tab.id)}
+            onKeyDown={(event) => {
+              // Arrow keys move between tabs — expected of a tablist, and the
+              // only way to reach a tab whose tabIndex is -1.
+              const index = tabs.findIndex((t) => t.id === active)
+              if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+                event.preventDefault()
+                const delta = event.key === 'ArrowRight' ? 1 : -1
+                const next = tabs[(index + delta + tabs.length) % tabs.length]
+                if (next) {
+                  onChange(next.id)
+                  document.getElementById(`rail-tab-${next.id}`)?.focus()
+                }
+              }
+            }}
+            className={`flex flex-1 items-center justify-center gap-1.5 border-b-2 pt-2.5 pb-2 text-[12.5px] transition-colors ${
+              selected
+                ? 'border-brand text-brand font-semibold'
+                : 'text-muted-foreground hover:text-foreground border-transparent font-medium'
+            }`}
+          >
+            {tab.label}
+
+            {tab.count !== undefined && (
+              <span
+                className={`rounded-full px-1.5 text-[10.5px] font-semibold tabular-nums ${
+                  selected ? 'bg-accent text-accent-foreground' : 'bg-muted text-muted-foreground'
+                }`}
+              >
+                {tab.count}
+              </span>
+            )}
+
+            {(band || unrated) && (
+              <>
+                <span
+                  className={`h-[7px] w-[7px] shrink-0 rounded-full ${
+                    band === 'good'
+                      ? 'bg-success'
+                      : band === 'fair'
+                        ? 'bg-warning'
+                        : band === 'poor'
+                          ? 'bg-destructive'
+                          : 'bg-muted-foreground/40'
+                  }`}
+                  aria-hidden
+                />
+                {/* Colour alone cannot carry the score. */}
+                <span className="sr-only">
+                  {unrated ? 'not rated' : `score ${tab.score} of 100`}
+                </span>
+              </>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}