@prenta/admin 0.93.0 → 0.95.0

package/src/styles/responsive.css

@@ -0,0 +1,281 @@
+/*
+ * Prenta admin — responsive + accessibility layer.
+ *
+ * Port of `design-system/cms-responsive.css` from the page-builder design
+ * bundle. The prototype's own selectors (`.ni`, `.sec-panel`, `.icbtn`) do not
+ * exist here — this admin is Tailwind over the same tokens — so what is ported
+ * is the RULES, re-expressed against this codebase's real structure.
+ *
+ * Loaded after `theme.css`'s token blocks so it can adapt them, and scoped to
+ * `.prenta-admin` throughout: the admin renders inside consumer applications
+ * and must not restyle the host.
+ *
+ * Two rules from the source deliberately did NOT come across:
+ *
+ *  - The prototype turns the sidebar into a fixed bottom bar under 768px.
+ *    `AdminShell` already solves that size with a slide-in overlay driven by
+ *    `matchMedia`, which the whole admin is built around; replacing a working
+ *    navigation pattern was not part of finishing the page builder.
+ *  - The blanket `min-height: 44px` on a list of prototype control classes.
+ *    The equivalent here is `.prenta-touch-target`, applied per control —
+ *    see the coarse-pointer block below for why a blanket `button` rule is
+ *    the wrong shape.
+ */
+
+/* ── Accessibility: applies at every size ─────────────────────────── */
+
+/*
+ * A visible focus ring on everything, as a floor.
+ *
+ * `:focus-visible` rather than `:focus` so pointer users never see it. This
+ * sits in the base layer, so any component that opts into its own ring
+ * (`focus-visible:ring-2 focus-visible:outline-none`) still wins — utilities
+ * are a later layer — and this only fills in for the controls that have none.
+ */
+.prenta-admin :focus-visible {
+  outline: var(--bw-focus, 2px) solid var(--acc);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Controls flush against a panel edge draw the ring inside their own box, or
+   it is clipped by the scroll container they sit in. */
+.prenta-admin [role='tab']:focus-visible,
+.prenta-admin [role='separator']:focus-visible {
+  outline-offset: -2px;
+}
+
+/*
+ * Skip link. Rendered as the first child of the admin root by `AdminShell`,
+ * which also owns the `#prenta-main` target.
+ */
+.prenta-admin .prenta-skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 999;
+  padding: 10px 16px;
+  background: var(--acc);
+  color: #fff;
+  font-size: var(--fs-body, 13px);
+  font-weight: 600;
+  border-radius: 0 0 8px 0;
+}
+
+.prenta-admin .prenta-skip-link:focus {
+  left: 0;
+}
+
+/*
+ * Honour a stated preference for less motion.
+ *
+ * Tailwind's `motion-safe:` variant already covers the transitions written
+ * with it, but plenty of the admin's motion is unconditional, and a preference
+ * that holds for most of a screen is not honoured. `.reduce-motion` (an
+ * explicit Appearance setting, in theme.css) is the same rule by another
+ * trigger.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .prenta-admin,
+  .prenta-admin *,
+  .prenta-admin *::before,
+  .prenta-admin *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/*
+ * Honour a stated preference for more contrast.
+ *
+ * Only the three tertiary tokens move, and only in the direction of more
+ * contrast than the shipped values — which are already an AA correction over
+ * the handoff's own numbers (see the `--muted` note in prenta-tokens.css).
+ * Set here rather than in the token file because that file is generated.
+ */
+@media (prefers-contrast: more) {
+  .prenta-admin {
+    --muted: #5a5770;
+    --sub: #3d3a52;
+    --bdr: #c9c5dc;
+  }
+
+  .dark .prenta-admin,
+  .prenta-admin.dark,
+  .prenta-admin[data-theme='dark'] {
+    --muted: #a9a6c0;
+    --sub: #c4c1d8;
+    --bdr: #454263;
+  }
+}
+
+/*
+ * Touch devices: named controls clear the 44px target minimum.
+ *
+ * Opt-in per control rather than a blanket `button { min-height: 44px }`.
+ * The admin is full of dense tables and inline row actions where growing
+ * every button reflows the layout it sits in, and the prototype hit the same
+ * wall — it carries a curated list for exactly this reason. `.prenta-touch-target`
+ * is that list, expressed where the control is written instead of in a
+ * stylesheet that has to be kept in sync with class names.
+ *
+ * Pointer-based sizing is untouched: a 26px button is right with a mouse and
+ * wrong with a thumb.
+ */
+@media (pointer: coarse) {
+  .prenta-admin .prenta-touch-target {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  /*
+   * The exception, and the reason this is not one rule: a switch positions its
+   * knob against the track's own box, so stretching the track to 44px leaves
+   * the knob floating in the middle of dead space. Grow the HIT AREA instead
+   * and let the control paint at its designed size. Use this for any small
+   * control whose internals are positioned against its box.
+   *
+   * The insets are sized for the 34×19 directive switch: 19 + 26 = 45 tall,
+   * 34 + 12 = 46 wide.
+   */
+  .prenta-admin .prenta-touch-hit {
+    position: relative;
+  }
+
+  .prenta-admin .prenta-touch-hit::after {
+    content: '';
+    position: absolute;
+    inset-block: -13px;
+    inset-inline: -6px;
+  }
+}
+
+/* ── 4K / Retina (≥2000px) ────────────────────────────────────────── */
+/* Stop the chrome thinning out to a ribbon on a very wide display. */
+@media (min-width: 2000px) {
+  .prenta-admin {
+    --sbw: 280px;
+  }
+}
+
+/* ── Editor header (≤1180px): let the action cluster wrap ─────────── */
+/*
+ * The breakpoint picker and zoom chip already hide below `md`. What remains
+ * still outgrows the bar before then, and a fixed-height flex row resolves
+ * that by crushing the title. Wrapping keeps the title readable and gives the
+ * actions a second line.
+ */
+@media (max-width: 1180px) {
+  .prenta-admin .prenta-editor-header {
+    height: auto;
+    min-height: 0;
+    flex-wrap: wrap;
+    row-gap: 8px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  .prenta-admin .prenta-editor-header > * {
+    min-width: 0;
+  }
+}
+
+/* ── Tablet portrait (≤900px): the two-pane editor stacks ─────────── */
+/*
+ * Side by side stops working before the canvas becomes useless, so the rail
+ * moves ABOVE the canvas and both take the full width. `!important` is
+ * required on the width: the rail's is an inline style (it is drag-resizable
+ * and persisted), and at this size a stored pixel width is meaningless anyway.
+ */
+@media (max-width: 900px) {
+  .prenta-admin .prenta-editor-body {
+    flex-direction: column;
+  }
+
+  .prenta-admin .prenta-editor-rail {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-height: 46vh;
+    border-right: none;
+    border-bottom: 1px solid var(--bdr);
+  }
+
+  /* Dragging a horizontal edge to set a width that no longer applies. */
+  .prenta-admin .prenta-editor-rail [role='separator'] {
+    display: none;
+  }
+
+  /* The collapsed strip's vertical label has no room to be vertical. */
+  .prenta-admin .prenta-editor-rail-collapsed {
+    width: 100% !important;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    padding: 0 12px;
+    height: 44px;
+    border-right: none;
+    border-bottom: 1px solid var(--bdr);
+  }
+
+  .prenta-admin .prenta-editor-rail-collapsed .prenta-rail-label {
+    writing-mode: horizontal-tb;
+  }
+
+  /* The inspector is a third column that no longer fits beside two others. */
+  .prenta-admin .prenta-editor-inspector {
+    width: 100% !important;
+    max-height: 46vh;
+  }
+}
+
+/* ── Mobile (≤460px) ──────────────────────────────────────────────── */
+@media (max-width: 460px) {
+  /* Buttons that read as a pair go full width rather than shrinking to
+     nothing — the review bar's Restore / Back to current, in particular. */
+  .prenta-admin .prenta-editor-header button {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
+}
+
+/* Landscape phones are short, not narrow — reclaim vertical space. */
+@media (max-height: 520px) and (orientation: landscape) {
+  .prenta-admin .prenta-editor-rail {
+    max-height: none;
+  }
+
+  .prenta-admin .prenta-editor-header {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+}
+
+/*
+ * Printing a CMS screen is almost always a mistake. If it happens, drop the
+ * chrome and let the canvas print at its natural size rather than as a
+ * transformed, clipped thumbnail.
+ */
+@media print {
+  .prenta-admin .prenta-editor-header,
+  .prenta-admin .prenta-editor-rail,
+  .prenta-admin .prenta-editor-rail-collapsed,
+  .prenta-admin .prenta-skip-link {
+    display: none !important;
+  }
+
+  .prenta-admin .prenta-canvas-scroll {
+    overflow: visible !important;
+    padding: 0 !important;
+  }
+
+  .prenta-admin .prenta-canvas-fit,
+  .prenta-admin .prenta-canvas {
+    width: auto !important;
+    height: auto !important;
+    transform: none !important;
+    box-shadow: none !important;
+  }
+}

package/src/styles/theme.css

@@ -524,3 +524,11 @@
   transition-duration: 0.001ms;
   scroll-behavior: auto;
 }
+
+/*
+ * Responsive + accessibility layer. LAST on purpose: it adapts the tokens and
+ * rules above (the `prefers-contrast` block overrides token values, the
+ * editor-stacking rules override the rail's own borders), so it has to come
+ * after them.
+ */
+@import './responsive.css';

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

@@ -30,6 +30,19 @@ interface EditorCanvasProps {
   /** Section types rendered as placeholders — shows the "Structure view" notice. */
   structuralTypes?: string[]
   sitePreviewAvailable?: boolean
+  /**
+   * Read-only render of a past version. Suppresses selection and the editing
+   * affordances, and turns on the changed-section outlines.
+   */
+  reviewing?: boolean
+  /** Sections that differ from the version before the one being reviewed. */
+  changedSectionIds?: ReadonlySet<string>
+  /**
+   * Rendered in place of the editing tip / structure notice while reviewing.
+   * Passed in rather than built here because the review bar's actions belong
+   * to the editor's history state, which the canvas knows nothing about.
+   */
+  reviewBar?: React.ReactNode
 }
 
 /**
@@ -62,6 +75,9 @@ export function EditorCanvas({
   onCanvasElement,
   structuralTypes = [],
   sitePreviewAvailable = false,
+  reviewing = false,
+  changedSectionIds,
+  reviewBar,
 }: EditorCanvasProps) {
   const bp = getBreakpoint(breakpoint)
   const sentinelRef = useRef<HTMLDivElement>(null)
@@ -110,7 +126,7 @@ export function EditorCanvas({
   }, [scale, onScaleChange])
 
   return (
-    <div className="bg-muted h-full overflow-auto px-6 pt-4.5 pb-10 text-center">
+    <div className="prenta-canvas-scroll bg-muted h-full overflow-auto px-6 pt-4.5 pb-10 text-center">
       {/*
        * Zero-height sentinel. Its offsetWidth IS the usable width — it is
        * subject to exactly the same padding, scrollbar and host scaling as the
@@ -123,11 +139,20 @@ export function EditorCanvas({
         <EmptyCanvas />
       ) : (
         <>
-          <CanvasEditTip />
-          <StructureNotice
-            structuralTypes={structuralTypes}
-            sitePreviewAvailable={sitePreviewAvailable}
-          />
+          {/* The review bar REPLACES the editing chrome rather than joining it:
+              a tip about clicking sections to edit them is actively wrong while
+              the canvas is showing a version you cannot edit. */}
+          {reviewing ? (
+            reviewBar
+          ) : (
+            <>
+              <CanvasEditTip />
+              <StructureNotice
+                structuralTypes={structuralTypes}
+                sitePreviewAvailable={sitePreviewAvailable}
+              />
+            </>
+          )}
           <CanvasMetaLine breakpoint={bp} pageHeight={pageHeight} scale={scale} />
 
           {/*
@@ -138,7 +163,7 @@ export function EditorCanvas({
            * height and corrupts the next measurement.
            */}
           <div
-            className="mx-auto block"
+            className="prenta-canvas-fit mx-auto block"
             style={{
               width: Math.round(bp.width * scale),
               height: pageHeight ? Math.round(pageHeight * scale) : undefined,
@@ -167,6 +192,8 @@ export function EditorCanvas({
                   key={section.id}
                   section={section}
                   editable
+                  reviewing={reviewing}
+                  changed={changedSectionIds?.has(section.id) ?? false}
                   selected={section.id === selectedId}
                   onSelect={onSelect}
                   registerRef={registerRef}

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

@@ -50,10 +50,16 @@ interface EditorTopBarProps {
    */
   onViewOnSite?: () => void
   /**
-   * Open the version history panel. When omitted the History button is
+   * Toggle the version history panel. When omitted the History button is
    * hidden — e.g. for unsaved documents that have no versions yet.
    */
   onHistory?: () => void
+  /**
+   * Whether history is showing. History takes over the rail rather than
+   * opening a dialog, so the button needs a pressed state — without one there
+   * is nothing in the chrome saying which mode the editor is in.
+   */
+  historyOpen?: boolean
   /** Whether the inline site preview (iframe of the public site) is showing. */
   sitePreview?: boolean
   /**
@@ -118,6 +124,7 @@ export function EditorTopBar({
   onPreview,
   onViewOnSite,
   onHistory,
+  historyOpen = false,
   sitePreview = false,
   onToggleSitePreview,
   onOpenSettings,
@@ -177,7 +184,7 @@ export function EditorTopBar({
               : 'Schedule a future publish date'
 
   return (
-    <header className="bg-card border-border flex h-14 shrink-0 items-center justify-between gap-4 border-b px-4">
+    <header className="prenta-editor-header bg-card border-border flex h-14 shrink-0 items-center justify-between gap-4 border-b px-4">
       {/* Breadcrumb + status */}
       <div className="flex min-w-0 items-center gap-2">
         <nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-1.5 text-sm">
@@ -228,7 +235,7 @@ export function EditorTopBar({
           onClick={onOpenSettings}
           aria-label="Page settings"
           title="Page settings"
-          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+          className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
         >
           <Settings2 className="h-4 w-4" aria-hidden />
         </button>
@@ -261,9 +268,14 @@ export function EditorTopBar({
           <button
             type="button"
             onClick={onHistory}
+            aria-pressed={historyOpen}
             aria-label="Version history"
-            title="Version history"
-            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+            title={historyOpen ? 'Close version history' : 'Version history'}
+            className={`prenta-touch-target rounded-lg p-2 transition-colors ${
+              historyOpen
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+            }`}
           >
             <History className="h-4 w-4" aria-hidden />
           </button>
@@ -274,7 +286,7 @@ export function EditorTopBar({
           onClick={onPreview}
           aria-label={previewLabel}
           title={previewLabel}
-          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+          className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
         >
           <Eye className="h-4 w-4" aria-hidden />
         </button>
@@ -290,7 +302,7 @@ export function EditorTopBar({
                 ? 'Back to editor canvas'
                 : 'Inline site preview — render the draft through your public site, in place'
             }
-            className={`rounded-lg p-2 transition-colors ${
+            className={`prenta-touch-target rounded-lg p-2 transition-colors ${
               sitePreview
                 ? 'bg-primary text-primary-foreground'
                 : 'text-muted-foreground hover:text-foreground hover:bg-accent'
@@ -321,7 +333,7 @@ export function EditorTopBar({
               onClick={onViewOnSite}
               aria-label={isLive ? 'View live page' : 'View draft on site'}
               title={isLive ? 'View live page' : 'View draft on site'}
-              className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+              className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
             >
               <ExternalLink className="h-4 w-4" aria-hidden />
             </button>