@prenta/admin 0.92.0

package/src/views/page-editor/sections/SectionRenderer.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import { Puzzle } from 'lucide-react'
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { ErrorBoundary } from '../../../components/ErrorBoundary.js'
+import { getSectionType } from '../section-types.js'
+import { ADMIN_RENDER_OPTIONS, useAdminSectionRenderers } from './admin-renderers.js'
+import { backgroundClass, paddingClass, type PostRenderContext } from './parts.js'
+import { HeroBannerSection } from './HeroBannerSection.js'
+import { MissionSection } from './MissionSection.js'
+import { FeatureHighlightSection } from './FeatureHighlightSection.js'
+import { ByTheNumbersSection } from './ByTheNumbersSection.js'
+import { CtaBannerSection } from './CtaBannerSection.js'
+import { ArticleBodySection } from './ArticleBodySection.js'
+import { PullQuoteSection } from './PullQuoteSection.js'
+import { AuthorBioSection } from './AuthorBioSection.js'
+import { RelatedPostsSection } from './RelatedPostsSection.js'
+import { GallerySection } from './GallerySection.js'
+import { EmbedSection } from './EmbedSection.js'
+import { WidgetEmbedSection } from './WidgetEmbedSection.js'
+
+/**
+ * Section types with a real canvas body component below. Anything else —
+ * config-declared custom types (`opal-*`), unmanaged sections, and the
+ * `form` embed — renders as a structural placeholder, so the editors use
+ * this set to tell authors the canvas shows structure, not design.
+ */
+const CANVAS_RENDERED_TYPES: ReadonlySet<string> = new Set([
+  'hero',
+  'text',
+  'feature',
+  'stats',
+  'cta',
+  'article-body',
+  'quote',
+  'author-bio',
+  'related-posts',
+  'gallery',
+  'embed',
+  'widget-embed',
+])
+
+/** True when the canvas renders this type for real (not as a placeholder). */
+export function hasCanvasRenderer(sectionType: string): boolean {
+  return CANVAS_RENDERED_TYPES.has(sectionType)
+}
+
+/** Dispatch a section's body component by type. Shared by editor + preview. */
+function SectionBody({ section, context }: { section: PageSection; context?: PostRenderContext }) {
+  const customRenderers = useAdminSectionRenderers()
+
+  switch (section.sectionType) {
+    case 'hero':
+      return <HeroBannerSection section={section} />
+    case 'text':
+      return <MissionSection section={section} />
+    case 'feature':
+      return <FeatureHighlightSection section={section} />
+    case 'stats':
+      return <ByTheNumbersSection section={section} />
+    case 'cta':
+      return <CtaBannerSection section={section} />
+    case 'article-body':
+      return <ArticleBodySection section={section} context={context} />
+    case 'quote':
+      return <PullQuoteSection section={section} />
+    case 'author-bio':
+      return <AuthorBioSection section={section} context={context} />
+    case 'related-posts':
+      return <RelatedPostsSection section={section} context={context} />
+    case 'gallery':
+      return <GallerySection section={section} />
+    case 'embed':
+      return <EmbedSection section={section} />
+    case 'widget-embed':
+      return <WidgetEmbedSection section={section} />
+    default: {
+      // Custom (config-declared) and unmanaged types: use a consumer-supplied
+      // canvas renderer when one is registered (see admin-renderers.tsx).
+      // Consumer code can throw, so a per-section error boundary falls back
+      // to the structural placeholder instead of taking down the editor.
+      const Custom = customRenderers[section.sectionType]
+      if (Custom) {
+        // The renderer contract types `settings` as an open record (matching
+        // the sections-react wire shape); the admin's concrete
+        // `SectionSettings` interface is the same object at runtime but has
+        // no index signature, so bridge the nominal gap here.
+        const wireSection = {
+          ...section,
+          settings: { ...section.settings } as Record<string, unknown>,
+        }
+        // Rendered as a component (not invoked inline) so a throw happens
+        // inside the boundary's subtree and is actually caught.
+        return (
+          <ErrorBoundary key={section.id} fallback={<PlaceholderSection section={section} />}>
+            <Custom section={wireSection} ctx={context} options={ADMIN_RENDER_OPTIONS} />
+          </ErrorBoundary>
+        )
+      }
+      // No renderer registered: a neutral placeholder keeps the canvas
+      // reflecting the section's presence + order instead of a blank gap.
+      return <PlaceholderSection section={section} />
+    }
+  }
+}
+
+/** Fallback canvas card for section types without a built-in renderer. */
+function PlaceholderSection({ section }: { section: PageSection }) {
+  const def = getSectionType(section.sectionType)
+  const label = def?.name ?? section.name
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 px-6 py-12 text-center">
+      <span className="bg-muted text-muted-foreground flex h-10 w-10 items-center justify-center rounded-lg">
+        <Puzzle className="h-5 w-5" aria-hidden />
+      </span>
+      <p className="text-foreground text-sm font-medium">{label}</p>
+      <p className="text-muted-foreground text-xs">
+        {section.unmanaged
+          ? `Managed outside the editor (${section.sectionType}) — preview not available here.`
+          : `Custom section "${section.sectionType}" — rendered by your site's renderer.`}
+      </p>
+    </div>
+  )
+}
+
+export interface SectionRendererProps {
+  section: PageSection
+  /** Editor mode: adds click-to-select, the selection outline + label, and
+   *  renders hidden sections muted instead of removing them. */
+  editable?: boolean
+  selected?: boolean
+  onSelect?: (id: string) => void
+  /** Lets the canvas register the DOM node for scroll-to-section. */
+  registerRef?: (id: string, el: HTMLElement | null) => void
+  /** Live post data for post-oriented section renderers (pages omit this). */
+  context?: PostRenderContext
+}
+
+/**
+ * Renders one section with its background + padding, dispatching to the
+ * shared body component. In `editable` mode it layers editor-only chrome
+ * (outline + a small purple type label) on top of the same markup the
+ * public preview uses — so what you edit is what ships.
+ */
+export function SectionRenderer({
+  section,
+  editable = false,
+  selected = false,
+  onSelect,
+  registerRef,
+  context,
+}: SectionRendererProps) {
+  const settings = section.settings ?? {}
+  const hidden = editable && !section.visible
+
+  return (
+    <section
+      ref={(el) => registerRef?.(section.id, el)}
+      data-section-id={section.id}
+      id={settings.anchorId || undefined}
+      className={`relative ${backgroundClass(settings)} ${paddingClass(settings)} ${
+        settings.cssClass ?? ''
+      } ${hidden ? 'opacity-40' : ''} ${
+        editable ? 'cursor-pointer outline-2 -outline-offset-2 transition-[outline]' : ''
+      } ${selected ? 'outline outline-violet-500' : 'outline-transparent'}`}
+      onClick={editable ? () => onSelect?.(section.id) : undefined}
+      // Selection is a convenience in the editor; the section list is the
+      // primary, fully-accessible control surface, so this stays a region.
+      aria-label={editable ? `${section.name} section` : undefined}
+    >
+      {editable && selected && (
+        <span className="bg-brand pointer-events-none absolute top-0 left-0 z-10 rounded-br-md px-2 py-0.5 text-xs font-medium text-white">
+          {section.name}
+        </span>
+      )}
+      {editable && hidden && (
+        <span className="bg-foreground pointer-events-none absolute top-0 right-0 z-10 rounded-bl-md px-2 py-0.5 text-xs font-medium text-white">
+          Hidden
+        </span>
+      )}
+      <SectionBody section={section} context={context} />
+    </section>
+  )
+}

package/src/views/page-editor/sections/WidgetEmbedSection.tsx

@@ -0,0 +1,32 @@
+import { Puzzle } from 'lucide-react'
+import { parseWidgetEmbed, WIDGET_PROVIDER_LABEL } from '@prenta/core/page-sections'
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { str } from './parts.js'
+
+/**
+ * Canvas body for the `widget-embed` section. Shows a reserved-height placeholder
+ * instead of loading third-party scripts inside the editor.
+ */
+export function WidgetEmbedSection({ section }: { section: PageSection }) {
+  const c = section.content
+  const parsed = parseWidgetEmbed(c)
+  const title = str(c, 'title')
+  const minHeight = parsed?.minHeightPx ?? 280
+
+  return (
+    <section className="mx-auto max-w-3xl px-6" aria-label={title || 'Third-party widget'}>
+      <div
+        className="bg-muted text-muted-foreground relative flex w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-xl"
+        style={{ minHeight: `${minHeight}px` }}
+      >
+        <Puzzle className="h-8 w-8" aria-hidden />
+        <p className="text-foreground text-sm font-medium">
+          {parsed
+            ? `${WIDGET_PROVIDER_LABEL[parsed.provider]} widget`
+            : 'Configure widget provider + ids'}
+        </p>
+        {title && <p className="text-muted-foreground px-4 text-center text-xs">{title}</p>}
+      </div>
+    </section>
+  )
+}

package/src/views/page-editor/sections/admin-renderers.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+/**
+ * Pluggable canvas renderers for custom section types.
+ *
+ * By default the editor canvas renders custom (config-declared) and unmanaged
+ * section types as structural placeholders. Projects that want a real design
+ * preview inside the admin can pass renderers to `<AdminRoot
+ * sectionRenderers={...}>`; the canvas and the eye preview then use them in
+ * place of the placeholder.
+ *
+ * The renderer signature is a structural mirror of `SectionRenderer` from
+ * `@prenta/sections-react` (cms-admin depends on cms-core only, so the
+ * type is duplicated rather than imported). Because the shapes match, a
+ * consumer can hand `AdminRoot` the exact same components it registers for
+ * the public site:
+ *
+ * ```tsx
+ * import { OPAL_RENDERERS } from './sections' // SectionRendererMap
+ * <AdminRoot sectionRenderers={OPAL_RENDERERS} ... />
+ * ```
+ *
+ * Renderers run inside the admin bundle, so they must be client-safe (no
+ * server-only imports). Each one is wrapped in an error boundary — a throwing
+ * renderer falls back to the structural placeholder instead of taking down
+ * the editor.
+ */
+import { createContext, useContext, type ReactNode } from 'react'
+
+/** Structural mirror of `RenderImageProps` from `@prenta/sections-react`. */
+export interface AdminRenderImageProps {
+  src: string
+  alt: string
+  width?: number | null
+  height?: number | null
+  className?: string
+  priority?: boolean
+  sizes?: string
+}
+
+/** Structural mirror of `PostContext` from `@prenta/sections-react`. */
+export interface AdminSectionPostContext {
+  title?: string
+  excerpt?: string
+  body?: string
+  featuredImageUrl?: string
+  publishDate?: string | null
+  category?: string
+  author?: { name?: string; bio?: string; avatarUrl?: string }
+  relatedPosts?: Array<{ title: string; url?: string; excerpt?: string }>
+}
+
+/** Props passed to an admin section renderer (mirrors `SectionRendererProps`). */
+export interface AdminSectionRendererProps {
+  section: {
+    id: string
+    sectionType: string
+    name?: string
+    visible?: boolean
+    content?: Record<string, unknown>
+    settings?: Record<string, unknown>
+  }
+  ctx?: AdminSectionPostContext
+  options: {
+    sanitizeHtml: (html: string) => string
+    baseUrl: string
+    renderImage: (props: AdminRenderImageProps) => ReactNode
+  }
+}
+
+/** A canvas renderer for one custom section type. */
+export type AdminSectionRenderer = (props: AdminSectionRendererProps) => ReactNode
+
+/** Section-type id → canvas renderer. */
+export type AdminSectionRendererMap = Record<string, AdminSectionRenderer>
+
+/**
+ * Render options passed to every admin renderer. Rich text is sanitized on
+ * write by cms-core, so the canvas (same trust domain as the public default)
+ * uses the identity sanitizer; images render as plain lazy `<img>` since the
+ * editor canvas has no next/image pipeline.
+ */
+export const ADMIN_RENDER_OPTIONS: AdminSectionRendererProps['options'] = {
+  sanitizeHtml: (html) => html,
+  baseUrl: '',
+  renderImage: ({ src, alt, className, priority, width, height }) => (
+    <img
+      src={src}
+      alt={alt}
+      className={className}
+      width={width ?? undefined}
+      height={height ?? undefined}
+      loading={priority ? undefined : 'lazy'}
+    />
+  ),
+}
+
+const AdminSectionRenderersContext = createContext<AdminSectionRendererMap>({})
+
+export const AdminSectionRenderersProvider = AdminSectionRenderersContext.Provider
+
+/** The renderer map passed to `<AdminRoot sectionRenderers>` (empty by default). */
+export function useAdminSectionRenderers(): AdminSectionRendererMap {
+  return useContext(AdminSectionRenderersContext)
+}

package/src/views/page-editor/sections/index.ts

@@ -0,0 +1,25 @@
+export { SectionRenderer, hasCanvasRenderer } from './SectionRenderer.js'
+export type { SectionRendererProps } from './SectionRenderer.js'
+export {
+  AdminSectionRenderersProvider,
+  useAdminSectionRenderers,
+  ADMIN_RENDER_OPTIONS,
+} from './admin-renderers.js'
+export type {
+  AdminSectionRenderer,
+  AdminSectionRendererMap,
+  AdminSectionRendererProps,
+  AdminSectionPostContext,
+  AdminRenderImageProps,
+} from './admin-renderers.js'
+export type { PostRenderContext } from './parts.js'
+export { HeroBannerSection } from './HeroBannerSection.js'
+export { MissionSection } from './MissionSection.js'
+export { FeatureHighlightSection } from './FeatureHighlightSection.js'
+export { ByTheNumbersSection } from './ByTheNumbersSection.js'
+export { CtaBannerSection } from './CtaBannerSection.js'
+export { ArticleBodySection } from './ArticleBodySection.js'
+export { PullQuoteSection } from './PullQuoteSection.js'
+export { AuthorBioSection } from './AuthorBioSection.js'
+export { RelatedPostsSection } from './RelatedPostsSection.js'
+export { GallerySection } from './GallerySection.js'

package/src/views/page-editor/sections/parts.tsx

@@ -0,0 +1,113 @@
+/**
+ * Shared building blocks for the section renderers.
+ *
+ * NOTE ON STYLING: the components under `sections/` render the consumer's
+ * *public website* content (purple hero, white prose bands, etc.), not the
+ * admin chrome. They therefore use a small, fixed website palette (violet
+ * for primary, zinc for neutrals) instead of the admin theme tokens. This
+ * is deliberate and scoped to this folder so the preview looks like a real
+ * page; the surrounding editor UI still uses the admin design tokens.
+ */
+import type { SectionSettings } from '../section-types.js'
+
+/**
+ * Live post data passed to the post-oriented section renderers
+ * (article body, author bio, related posts). Pages never supply this, so
+ * every consumer treats it as optional and falls back to placeholder copy.
+ */
+export interface PostRenderContext {
+  title?: string
+  excerpt?: string
+  /** the post's main body copy (rendered by the Article Body section) */
+  body?: string
+  featuredImageUrl?: string
+  publishDate?: string | null
+  category?: string
+  author?: { name?: string; bio?: string; avatarUrl?: string }
+  /** resolved related posts for the Related Posts section */
+  relatedPosts?: Array<{ title: string; url?: string; excerpt?: string }>
+}
+
+export function str(content: Record<string, unknown>, key: string, fallback = ''): string {
+  const v = content[key]
+  return typeof v === 'string' ? v : fallback
+}
+
+export function bool(content: Record<string, unknown>, key: string, fallback = false): boolean {
+  const v = content[key]
+  return typeof v === 'boolean' ? v : fallback
+}
+
+/** Vertical padding scale for a section. */
+export function paddingClass(settings: SectionSettings): string {
+  switch (settings.paddingY) {
+    case 'sm':
+      return 'py-8'
+    case 'md':
+      return 'py-12'
+    case 'xl':
+      return 'py-20 sm:py-28'
+    case 'lg':
+    default:
+      return 'py-16 sm:py-20'
+  }
+}
+
+/** Returns true when the section background is the dark/purple treatment. */
+export function isDarkBackground(settings: SectionSettings): boolean {
+  return (
+    (settings.backgroundType === 'solid' || settings.backgroundType === 'gradient') &&
+    settings.backgroundColor === 'purple'
+  )
+}
+
+/** Background utility classes derived from settings. */
+export function backgroundClass(settings: SectionSettings): string {
+  if (settings.backgroundType === 'gradient' && settings.backgroundColor === 'purple') {
+    return 'bg-gradient-to-br from-violet-600 to-violet-700 text-white'
+  }
+  if (settings.backgroundType === 'solid' && settings.backgroundColor === 'purple') {
+    return 'bg-brand text-white'
+  }
+  if (settings.backgroundType === 'solid' && settings.backgroundColor === 'muted') {
+    return 'bg-muted text-foreground'
+  }
+  return 'bg-card text-foreground'
+}
+
+/**
+ * Preview-only button. `tone="onDark"` renders the white-on-purple button
+ * from the screenshot; `tone="primary"` renders a solid violet button for
+ * light backgrounds.
+ */
+export function PreviewButton({
+  label,
+  href,
+  tone = 'primary',
+}: {
+  label: string
+  href?: string
+  tone?: 'primary' | 'onDark' | 'ghost'
+}) {
+  if (!label) return null
+  const base =
+    'inline-flex items-center justify-center rounded-lg px-5 py-2.5 text-sm font-medium transition-colors'
+  const toneClass =
+    tone === 'onDark'
+      ? 'bg-card text-brand hover:bg-brand/10'
+      : tone === 'ghost'
+        ? 'border border-border text-foreground hover:bg-muted'
+        : 'bg-brand text-white hover:bg-brand'
+  // Editor preview: links are inert (preventDefault) so clicking content
+  // selects the section instead of navigating away.
+  return (
+    <a
+      href={href || '#'}
+      onClick={(e) => e.preventDefault()}
+      className={`${base} ${toneClass}`}
+      tabIndex={-1}
+    >
+      {label}
+    </a>
+  )
+}

package/src/views/page-editor/useSitePreview.ts

@@ -0,0 +1,158 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { toast } from 'sonner'
+import {
+  buildPublicPreviewUrl,
+  createPreviewToken,
+  resolveSiteUrl,
+} from '../../lib/preview-link.js'
+import type { SaveState } from './EditorTopBar.js'
+
+interface UseSitePreviewOptions {
+  collection: string
+  documentId?: string | null
+  slug?: string | null
+  /** Explicit public path (`data.path`); wins over slug when set. */
+  path?: string | null
+  /** Collection URL prefix (e.g. `blog`). Empty/null for top-level pages. */
+  urlPrefix?: string | null
+  /**
+   * Origin of the Next editing canvas (same host as the admin in Astro-split
+   * and 100% Next builds). Defaults to `window.location.origin` so Site
+   * preview loads the Next builder, not the Astro public apex.
+   */
+  canvasUrl?: string | null
+  /**
+   * @deprecated Prefer {@link canvasUrl}. Kept as a fallback when `canvasUrl`
+   * is unset and `window` is unavailable. "View on site" still uses the
+   * public apex via {@link buildPublicPreviewUrl} at the call site.
+   */
+  siteUrl?: string | null
+  dirty: boolean
+  saveState: SaveState
+  /** Persist the draft; resolves `false` when the save failed. */
+  saveDraft: () => Promise<boolean>
+  /** Open Site preview on load when the document is saved (has id + slug). */
+  defaultActive?: boolean
+}
+
+export interface SitePreviewState {
+  /** Whether the inline iframe preview replaces the editor canvas. */
+  active: boolean
+  /** Canvas draft URL (`/<slug>?preview=<jwt>`); null while the token mints. */
+  url: string | null
+  /** Bumped after each completed save so the iframe reloads the fresh draft. */
+  reloadKey: number
+  toggle: () => void
+}
+
+/** Prefer the Next canvas origin (admin host); fall back to siteUrl only offline. */
+function resolveCanvasOrigin(canvasUrl?: string | null, siteUrl?: string | null): string {
+  if (canvasUrl) return resolveSiteUrl(canvasUrl)
+  if (typeof window !== 'undefined' && window.location?.origin) {
+    return window.location.origin
+  }
+  return resolveSiteUrl(siteUrl)
+}
+
+/**
+ * Inline branded preview — drives an in-editor iframe that renders the draft
+ * through the consumer's Next builder route (same `?preview=<token>` contract
+ * as "View on site"), so editors see actual site CSS without leaving the
+ * admin. On Astro-split deploys the canvas is the CMS host, not the public
+ * Astro apex. Saves first when dirty, and reloads the frame after each save.
+ */
+export function useSitePreview({
+  collection,
+  documentId,
+  slug,
+  path,
+  urlPrefix,
+  canvasUrl,
+  siteUrl,
+  dirty,
+  saveState,
+  saveDraft,
+  defaultActive = false,
+}: UseSitePreviewOptions): SitePreviewState {
+  const [active, setActive] = useState(false)
+  const [url, setUrl] = useState<string | null>(null)
+  const [reloadKey, setReloadKey] = useState(0)
+  const tokenRef = useRef<string | null>(null)
+  const prevSaveState = useRef(saveState)
+  const autoOpenRef = useRef(false)
+
+  const activatePreview = useCallback(async () => {
+    if (!documentId || !slug) {
+      toast.error('Save the page before opening the site preview')
+      return false
+    }
+    setActive(true)
+    setUrl(null)
+    try {
+      if (dirty) {
+        const ok = await saveDraft()
+        if (!ok) {
+          setActive(false)
+          return false
+        }
+      }
+      const { token } = await createPreviewToken(collection, documentId)
+      tokenRef.current = token
+      setUrl(
+        buildPublicPreviewUrl({
+          siteUrl: resolveCanvasOrigin(canvasUrl, siteUrl),
+          urlPrefix: urlPrefix ?? '',
+          slug,
+          path,
+          token,
+        }),
+      )
+      return true
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Failed to open site preview')
+      setActive(false)
+      return false
+    }
+  }, [collection, documentId, slug, path, urlPrefix, canvasUrl, siteUrl, dirty, saveDraft])
+
+  // Opt-in default: open the iframe once a saved document is loaded.
+  useEffect(() => {
+    if (!defaultActive || autoOpenRef.current) return
+    if (!documentId || !slug) return
+    autoOpenRef.current = true
+    void activatePreview()
+  }, [defaultActive, documentId, slug, activatePreview])
+
+  // After a save completes while the preview is open, rebuild the URL (the
+  // slug/path may have changed in settings — the token is bound to the document
+  // id, not the path) and reload the frame.
+  useEffect(() => {
+    if (active && prevSaveState.current === 'saving' && saveState === 'saved') {
+      if (tokenRef.current && slug) {
+        setUrl(
+          buildPublicPreviewUrl({
+            siteUrl: resolveCanvasOrigin(canvasUrl, siteUrl),
+            urlPrefix: urlPrefix ?? '',
+            slug,
+            path,
+            token: tokenRef.current,
+          }),
+        )
+      }
+      setReloadKey((k) => k + 1)
+    }
+    prevSaveState.current = saveState
+  }, [active, saveState, slug, path, canvasUrl, siteUrl, urlPrefix])
+
+  const toggle = useCallback(() => {
+    if (active) {
+      setActive(false)
+      return
+    }
+    void activatePreview()
+  }, [active, activatePreview])
+
+  return { active, url, reloadKey, toggle }
+}

package/src/views/page-editor/viewports.ts

@@ -0,0 +1,26 @@
+/** Preview viewport presets for the page editor canvas. */
+export type ViewportId = '4k' | '1080p' | 'laptop' | 'tablet' | 'mobile'
+
+export interface Viewport {
+  id: ViewportId
+  label: string
+  /** lucide-react icon name */
+  icon: string
+  /** logical CSS width of the preview surface, in px */
+  width: number
+}
+
+export const VIEWPORTS: Viewport[] = [
+  { id: '4k', label: '4K', icon: 'monitor', width: 1920 },
+  { id: '1080p', label: '1080p', icon: 'monitor', width: 1440 },
+  { id: 'laptop', label: 'Laptop', icon: 'laptop', width: 1280 },
+  { id: 'tablet', label: 'Tablet', icon: 'tablet', width: 768 },
+  { id: 'mobile', label: 'Mobile', icon: 'smartphone', width: 390 },
+]
+
+/** Default working width — near 1:1 in a typical editor pane; device toggles scale-to-fit. */
+export const DEFAULT_VIEWPORT: ViewportId = '1080p'
+
+export function getViewport(id: ViewportId): Viewport {
+  return VIEWPORTS.find((v) => v.id === id) ?? VIEWPORTS[1]!
+}