@prenta/admin 0.92.0 → 0.94.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

@@ -162,6 +162,29 @@
   --text-xs: var(--fs-hint);
 }
 
+/*
+ * Canvas reflow steps — the container-query breakpoints the previewed PAGE
+ * reflows at, as distinct from Tailwind's `sm:`/`md:` viewport breakpoints,
+ * which describe the admin chrome around it.
+ *
+ * The canvas renders at a device's real CSS width and is scaled with a
+ * transform, so a viewport query there is meaningless: it would report the
+ * editor window's width, and picking "Mobile" on a wide monitor would render
+ * a 390px-wide canvas still laid out for desktop. Section renderers under
+ * `views/page-editor/sections/` must use `@pv-*`, never `sm:`/`md:`/`lg:`.
+ *
+ * Values come from the page-builder design handoff. Any element carrying
+ * these variants needs an ancestor with `@container` — EditorCanvas,
+ * PostEditorCanvas, PagePreview and PostPreview all declare it.
+ */
+@theme {
+  --container-pv-sm: 460px; /* below: stats 1-up, buttons full width */
+  --container-pv-md: 700px; /* below: image+text stacks, quotes 1-up */
+  --container-pv-lg: 900px; /* below: quote grid 2-up, stats collapse */
+  --container-pv-xl: 1100px; /* below: general step-down */
+  --container-pv-2xl: 2000px; /* above: type and padding scale up */
+}
+
 @layer base {
   .prenta-admin * {
     @apply border-border outline-ring/50;
@@ -255,6 +278,23 @@
    * The canvas re-establishes the site's typographic context: headings and
    * body text fall back to inheritance rather than the admin scale above.
    */
+  /*
+   * The canvas is the query container for every previewed section (`@pv-*`
+   * variants — see the step scale above). It lives here rather than as an
+   * `@container` utility on each host because FOUR surfaces render these
+   * sections — EditorCanvas, PostEditorCanvas, PagePreview, PostPreview — and
+   * a host that forgets it degrades silently: with no container ancestor,
+   * every `@pv-*` variant simply never matches and the page renders at its
+   * narrowest layout regardless of the selected breakpoint. Tying containment
+   * to the class that defines the surface makes that unforgettable.
+   *
+   * `inline-size` only: the canvas must stay free to grow as tall as its
+   * content, which `size` containment would prevent.
+   */
+  .prenta-admin .prenta-canvas {
+    container-type: inline-size;
+  }
+
   .prenta-admin .prenta-canvas :is(h1, h2, h3, h4) {
     font-size: revert-layer;
     font-weight: revert-layer;
@@ -383,6 +423,96 @@
     border-radius: var(--radius-md);
     margin: 1em 0;
   }
+
+  /*
+   * Structure canvas — lite hover outline on editable sections.
+   * Selected section chrome stays on the element (Tailwind outline-violet).
+   * Field-level chrome applies when renderers expose data-cms-field.
+   */
+  .prenta-admin .prenta-canvas [data-section-id][data-editable='true']:not([data-selected='true']) {
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+    transition: outline-color 120ms ease;
+  }
+
+  .prenta-admin
+    .prenta-canvas
+    [data-section-id][data-editable='true']:not([data-selected='true']):hover {
+    outline-color: color-mix(in oklab, var(--acc) 40%, transparent);
+  }
+
+  .prenta-admin .prenta-canvas [data-cms-field] {
+    outline: 1px solid transparent;
+    outline-offset: 2px;
+    border-radius: 2px;
+    transition: outline-color 120ms ease;
+    cursor: text;
+  }
+
+  .prenta-admin .prenta-canvas [data-cms-field]:hover,
+  .prenta-admin .prenta-canvas [data-cms-field]:focus,
+  .prenta-admin .prenta-canvas [data-cms-field]:focus-within {
+    outline-color: color-mix(in oklab, var(--acc) 45%, transparent);
+  }
+
+  .prenta-admin .prenta-canvas [data-cms-field][data-cms-field-kind='media'] {
+    cursor: pointer;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .prenta-admin .prenta-canvas [data-section-id][data-editable='true'],
+    .prenta-admin .prenta-canvas [data-cms-field] {
+      transition: none;
+    }
+  }
+}
+
+/*
+ * Restore the stock Tailwind type scale inside the canvas.
+ *
+ * The `@theme inline` block above deliberately remaps six size keys onto admin
+ * design tokens so `text-base` means "admin body text, 13px" across the shell.
+ * That aliasing is right for admin chrome and wrong for the canvas, which
+ * renders the consumer's WEBSITE: there, `text-base` must mean 16px, the size
+ * a visitor actually reads. Left unscoped, every section renderer styles
+ * website copy on the admin scale — body text 3px small, `text-2xl` headings
+ * at 21px instead of 24px.
+ *
+ * This matters beyond looks. The reflow guard measures how copy wraps by
+ * laying it out in the canvas's own class chain; if the canvas renders type at
+ * the admin scale, every line count it reports is measured against a font size
+ * the live page never uses, and the guard is confidently wrong.
+ *
+ * Must live in `@layer utilities`, not `@layer base`: layer order beats
+ * specificity, so a base-layer rule — however specific — loses to the utility
+ * it is trying to correct. Inside the same layer, specificity decides, and
+ * three classes beat one.
+ *
+ * Only `font-size` is restated. The line-height half of each utility is a
+ * unitless ratio that scales correctly on its own.
+ *
+ * Values are Tailwind's defaults; the remapped keys are the only ones listed,
+ * because every other step (`text-3xl` and up) was never aliased.
+ */
+@layer utilities {
+  .prenta-admin .prenta-canvas .text-xs {
+    font-size: 0.75rem;
+  }
+  .prenta-admin .prenta-canvas .text-sm {
+    font-size: 0.875rem;
+  }
+  .prenta-admin .prenta-canvas .text-base {
+    font-size: 1rem;
+  }
+  .prenta-admin .prenta-canvas .text-lg {
+    font-size: 1.125rem;
+  }
+  .prenta-admin .prenta-canvas .text-xl {
+    font-size: 1.25rem;
+  }
+  .prenta-admin .prenta-canvas .text-2xl {
+    font-size: 1.5rem;
+  }
 }
 
 .prenta-admin.reduce-motion,
@@ -394,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/CanvasMetaLine.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { Laptop, Monitor, Smartphone, Tablet, type LucideIcon } from 'lucide-react'
+import type { Breakpoint } from '../../lib/breakpoints.js'
+
+const ICONS: Record<string, LucideIcon> = {
+  monitor: Monitor,
+  laptop: Laptop,
+  tablet: Tablet,
+  smartphone: Smartphone,
+}
+
+interface CanvasMetaLineProps {
+  breakpoint: Breakpoint
+  /** Unscaled page height in px, measured from the canvas surface. */
+  pageHeight: number
+  /** Current transform scale, 0–1. */
+  scale: number
+}
+
+/**
+ * Reads out what the canvas is currently showing:
+ * `▣ Wide Screen | 1920 × 2174 px | 42% scale`.
+ *
+ * The dimensions are the page's own, before scaling — the number an editor
+ * needs when reasoning about the live page. The scale is the separate fact
+ * that the preview is shrunk to fit.
+ */
+export function CanvasMetaLine({ breakpoint, pageHeight, scale }: CanvasMetaLineProps) {
+  const Icon = ICONS[breakpoint.icon] ?? Monitor
+  const percent = Math.round(scale * 100)
+
+  return (
+    <p
+      className="text-muted-foreground mb-3 inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-[0.3px] whitespace-nowrap"
+      // The canvas is decorative chrome around the real content; announcing
+      // these numbers on every keystroke would flood a screen reader.
+      aria-hidden
+    >
+      <Icon className="h-3 w-3" />
+      <span className="text-foreground/70">{breakpoint.name}</span>
+      <span aria-hidden>|</span>
+      <span className="tabular-nums">
+        {breakpoint.width} × {pageHeight ? Math.round(pageHeight) : '—'} px
+      </span>
+      <span aria-hidden>|</span>
+      <span className="tabular-nums">{percent}% scale</span>
+    </p>
+  )
+}