keystone_ui-pages 0.1.0

data/app/javascript/keystone_ui_pages/PageEditor.jsx

@@ -0,0 +1,260 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react"
+import { DragDropManager, Draggable, Droppable, KeyboardSensor, PointerSensor } from "@dnd-kit/dom"
+import { Sortable } from "@dnd-kit/dom/sortable"
+import Button from "keystone_ui-react/src/Button.jsx"
+import { addColumn, addElement, addRow, addSection, arrange, bindField, chooseSample, duplicateNode, moveNode, removeNode, setField, showWhen, stepHistory } from "./operations"
+import LayoutPanel from "./LayoutPanel"
+import DeviceWidth, { DEVICES } from "./DeviceWidth"
+import SelectionToolbar from "./SelectionToolbar"
+import ElementPalette from "./ElementPalette"
+import SelectionPath from "./SelectionPath"
+import SampleChoice from "./SampleChoice"
+import ShowWhen from "./ShowWhen"
+import ThemeMode from "./ThemeMode"
+import LookChoice from "./LookChoice"
+import ElementFields from "./ElementFields"
+import { elementIn, nodeIn } from "./document"
+
+const LAYOUT = [
+  { kind: "section", selector: "[data-section-id]", id: (element) => element.dataset.sectionId, group: () => "page" },
+  { kind: "row", selector: "[data-row-id]", id: (element) => element.dataset.rowId, group: (element) => element.closest("[data-section-id]").dataset.sectionId },
+  { kind: "column", selector: "[data-column-id]", id: (element) => element.dataset.columnId, group: (element) => element.closest("[data-row-id]").dataset.rowId }
+]
+
+const NODES = [["[data-element-id]", "Element"], ["[data-column-id]", "Column"], ["[data-row-id]", "Row"], ["[data-section-id]", "Section"]]
+
+const innermost = (target) => NODES.map(([selector, kind]) => [target.closest(selector), kind]).filter(([node]) => node)
+  .reduce((inner, candidate) => (!inner || inner[0].contains(candidate[0]) ? candidate : inner), null)
+
+const PLACED_SENSORS = [PointerSensor.configure({ preventActivation: () => false }), KeyboardSensor]
+
+export default function PageEditor({ name, publish_url, elements, canvas: drawn, document: saved, elements_url, sections_url, columns_url, rows_url, nodes_url, arrangements, defaults, shares, value_names, looks = [], samples = [], sample, samples_url, history_url, live_url, back_url, undo_url, redo_url, undoable: couldUndo, redoable: couldRedo, token }) {
+  const [canvas, setCanvas] = useState(drawn)
+  const [undoable, setUndoable] = useState(couldUndo)
+  const [redoable, setRedoable] = useState(couldRedo)
+  const [document, setDocument] = useState(saved)
+  const [selected, setSelected] = useState(null)
+  const [node, setNode] = useState(null)
+  const [refusal, setRefusal] = useState(null)
+  const [device, setDevice] = useState("desktop")
+  const sheet = useRef(null)
+  const moveHandle = useRef(null)
+  const [toolbarPlace, setToolbarPlace] = useState(null)
+  const [selectionPath, setSelectionPath] = useState([])
+  const manager = useRef(null)
+  const palette = useRef(null)
+  const page = useRef(null)
+
+  const shown = ({ canvas, document, undoable, redoable }) => {
+    setRefusal(null)
+    setCanvas(canvas)
+    setDocument(document)
+    if (undoable !== undefined) setUndoable(undoable)
+    if (redoable !== undefined) setRedoable(redoable)
+  }
+
+  const refused = ({ error }) => setRefusal(error)
+
+  const chose = (chosen) => {
+    setRefusal(null)
+    setNode(chosen)
+  }
+
+  const hovered = (event) => {
+    page.current.querySelectorAll("[data-hovered]").forEach((node) => delete node.dataset.hovered)
+    const [node, kind] = innermost(event.target) ?? []
+    if (!node) return
+    node.dataset.hovered = ""
+    const placed = kind === "Element" && elementIn(document, node.dataset.elementId)
+    node.dataset.kind = placed ? elements.find((offered) => offered.key === placed.key)?.name ?? kind : kind
+  }
+
+  const select = (event) => {
+    const chosen = event.target.closest("[data-element-id]")
+    if (chosen) {
+      event.preventDefault()
+      setNode(null)
+      return setSelected(chosen.dataset.elementId)
+    }
+    const column = event.target.closest("[data-column-id]")
+    if (!column) return
+    setSelected(null)
+    setNode({ kind: "column", id: column.dataset.columnId, rowId: column.closest("[data-row-id]").dataset.rowId, sectionId: column.closest("[data-section-id]").dataset.sectionId })
+  }
+
+  const element = selected && elementIn(document, selected)
+  const definition = element && elements.find((offered) => offered.key === element.key)
+
+  useLayoutEffect(() => {
+    page.current.innerHTML = canvas
+  }, [canvas])
+
+  useEffect(() => {
+    const dragging = new DragDropManager()
+    manager.current = dragging
+    const items = [...palette.current.querySelectorAll("[data-element-key]")].map((element) =>
+      new Draggable({ id: `palette-${element.dataset.elementKey}`, element, feedback: "clone", data: { key: element.dataset.elementKey } }, dragging))
+
+    const marked = () => page.current.querySelectorAll("[data-drop-target]").forEach((element) => delete element.dataset.dropTarget)
+    dragging.monitor.addEventListener("dragover", ({ operation }) => {
+      marked()
+      if (operation.target?.element) operation.target.element.dataset.dropTarget = ""
+    })
+
+    dragging.monitor.addEventListener("dragend", ({ operation, canceled }) => {
+      marked()
+      const { source, target } = operation
+      if (canceled || !target) return
+      if (source.data?.key) return target.data?.columnId && addElement(elements_url, token, source.data.key, target.data.columnId).then(shown)
+      if (source.type !== "element") return moveNode(nodes_url, token, source.id, source.group === "page" ? null : source.group, source.index).then(shown, refused)
+      const into = source.group === source.initialGroup && target.data?.columnId && target.data.columnId !== source.group ? target.data.columnId : source.group
+      const position = into === source.group ? source.index : 0
+      moveNode(nodes_url, token, source.id, into, position).then(shown, refused)
+    })
+
+    return () => {
+      items.forEach((item) => item.destroy())
+      dragging.destroy()
+    }
+  }, [])
+
+  useEffect(() => {
+    const columns = [...page.current.querySelectorAll("[data-column-id]")].map((element) =>
+      new Droppable({ id: `drop-${element.dataset.columnId}`, element, data: { columnId: element.dataset.columnId }, accept: (source) => !source.type || source.type === "element" }, manager.current))
+    const placed = [...page.current.querySelectorAll("[data-element-id]")].map((element) => {
+      const column = element.closest("[data-column-id]")
+      const index = [...column.children].indexOf(element)
+      return new Sortable({ id: element.dataset.elementId, element, index, group: column.dataset.columnId, type: "element", accept: "element", sensors: PLACED_SENSORS }, manager.current)
+    })
+
+    return () => [...columns, ...placed].forEach((droppable) => droppable.destroy())
+  }, [canvas])
+
+  const pathTo = (chosen) => [
+    ["section", "[data-section-id]", "sectionId", "Section"],
+    ["row", "[data-row-id]", "rowId", "Row"],
+    ["column", "[data-column-id]", "columnId", "Column"],
+    ["element", "[data-element-id]", "elementId", null]
+  ].flatMap(([kind, selector, key, label]) => {
+    const holder = chosen.closest(selector)
+    if (!holder) return []
+    const placed = kind === "element" && elementIn(document, holder.dataset[key])
+    return [{ kind, id: holder.dataset[key], label: label ?? elements.find((offered) => offered.key === placed?.key)?.name ?? "Element" }]
+  })
+
+  const choosePart = ({ kind, id }) => {
+    setRefusal(null)
+    if (kind === "element") {
+      setNode(null)
+      return setSelected(id)
+    }
+    const holder = page.current.querySelector(`[data-${kind}-id="${id}"]`)
+    setSelected(null)
+    setNode({ kind, id, rowId: holder.closest("[data-row-id]")?.dataset.rowId, sectionId: holder.closest("[data-section-id]")?.dataset.sectionId })
+  }
+
+  useEffect(() => {
+    const parent = selectionPath[selectionPath.length - 2]
+    const escaped = (event) => {
+      if (event.key !== "Escape" || !parent || event.target.closest("input, textarea, select")) return
+      choosePart(parent)
+    }
+    window.document.addEventListener("keydown", escaped)
+    return () => window.document.removeEventListener("keydown", escaped)
+  }, [selectionPath])
+
+  const selectedId = selected ?? node?.id
+
+  useEffect(() => {
+    page.current.querySelectorAll("[data-selected]").forEach((marked) => delete marked.dataset.selected)
+    const chosen = selectedId && page.current.querySelector(`[data-element-id="${selectedId}"], [data-column-id="${selectedId}"], [data-row-id="${selectedId}"], [data-section-id="${selectedId}"]`)
+    if (!chosen) {
+      setSelectionPath([])
+      return setToolbarPlace(null)
+    }
+    chosen.dataset.selected = ""
+    setSelectionPath(pathTo(chosen))
+    const outer = sheet.current.getBoundingClientRect()
+    const inner = chosen.getBoundingClientRect()
+    setToolbarPlace({ top: inner.top - outer.top, left: inner.left - outer.left })
+  }, [canvas, selectedId, device])
+
+  useEffect(() => {
+    const unreachable = window.document.createElement("span")
+    const layout = LAYOUT.flatMap(({ kind, selector, id, group }) =>
+      [...page.current.querySelectorAll(selector)].map((element) => new Sortable({
+        id: id(element), element, index: [...element.parentElement.children].indexOf(element), group: group(element), type: kind, accept: kind,
+        handle: selectedId === id(element) ? moveHandle.current : unreachable
+      }, manager.current)))
+
+    return () => layout.forEach((sortable) => sortable.destroy())
+  }, [canvas, selectedId])
+
+  const inUse = (chosen) => {
+    const row = chosen.kind === "column" && nodeIn(document, chosen.rowId)
+    const share = row ? { wide: shares[row.columns.length] ?? "1/1" } : {}
+    return { ...defaults[chosen.kind], ...share, ...nodeIn(document, chosen.id) }
+  }
+
+  const removeSelected = () => removeNode(nodes_url, token, selectedId).then((answer) => { shown(answer); setNode(null); setSelected(null) }, refused)
+
+  return (
+    <div data-builder className="fixed inset-0 flex flex-col bg-(--ks-color-surface) text-(--ks-color-text) dark:bg-(--ks-color-surface-dark) dark:text-(--ks-color-text-dark)">
+      <header data-builder-top-bar className="flex h-14 shrink-0 items-center justify-between gap-4 border-b border-(--ks-color-border) dark:border-(--ks-color-border-dark) px-4">
+        <div className="flex min-w-0 items-center gap-2">
+          <a href={back_url} className="text-sm hover:underline">Back</a>
+          <h1 className="truncate text-base font-semibold">{name}</h1>
+        </div>
+        <div className="flex items-center gap-4 max-lg:hidden">
+          <DeviceWidth chosen={device} onChoose={setDevice} />
+          <ThemeMode />
+          <LookChoice looks={looks} />
+          <SampleChoice samples={samples} chosen={sample} onChoose={(choice) => chooseSample(samples_url, token, choice).then(shown, refused)} />
+        </div>
+        <div className="flex items-center gap-2">
+        <Button type="button" size="sm" variant="secondary" disabled={!undoable} title={undoable ? "Undo the last change" : "Nothing to undo"} onClick={() => stepHistory(undo_url, token).then(shown, refused)}>↶ Undo</Button>
+        <Button type="button" size="sm" variant="secondary" disabled={!redoable} title={redoable ? "Redo the change you undid" : "Nothing to redo"} onClick={() => stepHistory(redo_url, token).then(shown, refused)}>↷ Redo</Button>
+        {live_url && <a href={live_url} className="text-sm whitespace-nowrap hover:underline">View live</a>}
+        <a href={history_url} className="text-sm hover:underline">History</a>
+        <form method="post" action={publish_url}>
+          <input type="hidden" name="authenticity_token" value={token} />
+          <Button type="submit" size="sm">Publish</Button>
+        </form>
+        </div>
+      </header>
+      <div className="relative flex min-h-0 flex-1">
+        <ElementPalette ref={palette} elements={elements}>
+          <Button type="button" variant="secondary" onClick={() => addSection(sections_url, token).then(shown)}>Add section</Button>
+        </ElementPalette>
+        <main data-page-frame className="min-w-0 flex-1 overflow-auto bg-surface-200 p-8 dark:bg-surface-900">
+          <div ref={sheet} data-page-sheet data-theme={DEVICES.find((choice) => choice.key === device).theme}
+            style={{ width: DEVICES.find((choice) => choice.key === device).width, colorScheme: DEVICES.find((choice) => choice.key === device).theme }}
+            className="relative mx-auto min-h-full max-w-full bg-[Canvas] shadow-lg ring-1 ring-black/5">
+            <div ref={page} data-page-canvas className="@container min-h-full px-6 [&_[data-hidden]]:opacity-40 bg-(--ks-color-page) text-(--ks-color-on-page) dark:bg-(--ks-color-page-dark) dark:text-(--ks-color-on-page-dark) [&_[data-selected]]:relative [&_[data-selected]]:outline-2 [&_[data-selected]]:outline-(--ks-color-accent) [&_[data-hovered]]:relative [&_[data-hovered]]:outline-1 [&_[data-hovered]]:outline-(--ks-color-accent) [&_[data-hovered]]:before:absolute [&_[data-hovered]]:before:-top-5 [&_[data-hovered]]:before:left-0 [&_[data-hovered]]:before:z-10 [&_[data-hovered]]:before:rounded-t [&_[data-hovered]]:before:bg-(--ks-color-accent) [&_[data-hovered]]:before:px-1.5 [&_[data-hovered]]:before:text-xs [&_[data-hovered]]:before:leading-5 [&_[data-hovered]]:before:text-white [&_[data-hovered]]:before:content-[attr(data-kind)] [&_[data-column-id]:empty]:min-h-16 [&_[data-column-id]:empty]:items-center [&_[data-column-id]:empty]:justify-center [&_[data-column-id]:empty]:rounded-md [&_[data-column-id]:empty]:border-2 [&_[data-column-id]:empty]:border-dashed [&_[data-column-id]:empty]:border-(--ks-color-border-strong) [&_[data-column-id]:empty]:after:text-sm [&_[data-column-id]:empty]:after:text-(--ks-color-icon) [&_[data-column-id]:empty]:after:content-['Drop_an_element_here'] [&_[data-drop-target]]:outline-2 [&_[data-drop-target]]:outline-dashed [&_[data-drop-target]]:outline-(--ks-color-accent)" onClick={select} onMouseOver={hovered} onMouseLeave={() => page.current.querySelectorAll("[data-hovered]").forEach((node) => delete node.dataset.hovered)} />
+            <SelectionToolbar ref={moveHandle} place={toolbarPlace} onRemove={removeSelected} onDuplicate={() => duplicateNode(nodes_url, token, selectedId).then(shown, refused)} />
+          </div>
+        </main>
+        <aside data-settings-panel className="w-72 shrink-0 overflow-y-auto border-l border-(--ks-color-border) bg-(--ks-color-surface) p-4 dark:border-(--ks-color-border-dark) dark:bg-(--ks-color-surface-dark)">
+          <SelectionPath path={selectionPath} onChoose={choosePart} />
+          {!node && !definition && <p className="ks-hint">Select something on the page to change it.</p>}
+          {node && <LayoutPanel node={node} values={inUse(node)} arrangements={arrangements}
+            onArrange={(id, setting, value) => arrange(nodes_url, token, id, setting, value).then(shown, refused)}
+            refusal={refusal}
+            onSelect={chose}
+            onRemove={(id) => removeNode(nodes_url, token, id).then((answer) => { shown(answer); setNode(null) }, refused)}
+            onAddColumn={(rowId) => addColumn(columns_url, token, rowId).then(shown)}
+            onAddRow={(sectionId) => addRow(rows_url, token, sectionId).then(shown)} />}
+          {definition && <ElementFields element={element} definition={definition} alignments={arrangements.element.align}
+            onRemove={(id) => removeNode(nodes_url, token, id).then((answer) => { shown(answer); setSelected(null) })}
+            onArrange={(id, setting, value) => arrange(nodes_url, token, id, setting, value).then(shown)}
+            valueNames={value_names}
+            onBind={(field, name, fallback) => bindField(elements_url, token, element.id, field, name, fallback).then(shown, refused)}
+            onChange={(field, value) => setField(elements_url, token, element.id, field, value).then(shown)} />}
+          {(element || (node && node.kind !== "column")) &&
+            <ShowWhen key={element?.id ?? node.id} condition={(element ?? nodeIn(document, node.id))?.show_when} valueNames={value_names}
+              onChange={(name, equals) => showWhen(nodes_url, token, element?.id ?? node.id, name, equals).then(shown, refused)} />}
+        </aside>
+      </div>
+    </div>
+  )
+}

data/app/javascript/keystone_ui_pages/SampleChoice.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+import Select from "keystone_ui-react/src/Select.jsx"
+
+export default function SampleChoice({ samples, chosen, onChoose }) {
+  if (samples.length === 0) return null
+
+  return (
+    <label className="flex items-center gap-2 text-sm">
+      <span className="whitespace-nowrap">Preview with</span>
+      <Select defaultValue={chosen ?? ""} onChange={(event) => onChoose(event.target.value)} className="py-1">
+        {samples.map(([label, value]) => <option key={value} value={value}>{label}</option>)}
+      </Select>
+    </label>
+  )
+}

data/app/javascript/keystone_ui_pages/SelectionPath.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+
+export default function SelectionPath({ path, onChoose }) {
+  if (path.length === 0) return null
+
+  return (
+    <nav data-selection-path aria-label="Selection" className="mb-4 flex flex-wrap items-center gap-1 text-xs">
+      {path.map((part, index) => (
+        <React.Fragment key={part.id}>
+          {index > 0 && <span aria-hidden="true" className="text-(--ks-color-icon)">›</span>}
+          <button type="button" aria-current={index === path.length - 1 ? "true" : undefined} onClick={() => onChoose(part)}
+            className="rounded px-1.5 py-0.5 hover:bg-(--ks-color-fill-muted) aria-[current=true]:font-semibold">
+            {part.label}
+          </button>
+        </React.Fragment>
+      ))}
+    </nav>
+  )
+}

data/app/javascript/keystone_ui_pages/SelectionToolbar.jsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from "react"
+
+const SelectionToolbar = forwardRef(function SelectionToolbar({ place, onDuplicate, onRemove }, moveHandle) {
+  return (
+    <div data-selection-toolbar hidden={!place} style={place ?? {}}
+      className="absolute z-20 flex -translate-y-full overflow-hidden rounded-t-md bg-(--ks-color-accent) text-xs text-white shadow">
+      <button ref={moveHandle} type="button" data-move-handle className="cursor-grab px-2 py-1 hover:bg-black/20">Move</button>
+      <button type="button" onClick={onDuplicate} className="px-2 py-1 hover:bg-black/20">Duplicate</button>
+      <button type="button" onClick={onRemove} className="px-2 py-1 hover:bg-black/20">Remove</button>
+    </div>
+  )
+})
+
+export default SelectionToolbar

data/app/javascript/keystone_ui_pages/ShowWhen.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react"
+import Input from "keystone_ui-react/src/Input.jsx"
+import Select from "keystone_ui-react/src/Select.jsx"
+import { Label } from "keystone_ui-react/src/FieldText.jsx"
+
+export default function ShowWhen({ condition, valueNames, onChange }) {
+  const [name, setName] = useState(condition?.value ?? "")
+  const [equals, setEquals] = useState(condition?.equals ?? "")
+  const names = Object.entries(valueNames ?? {})
+  if (names.length === 0) return null
+
+  const chosen = (picked) => {
+    setName(picked)
+    if (picked === "" || equals !== "") onChange(picked, equals)
+  }
+
+  return (
+    <div data-show-when className="mt-4 flex flex-col gap-2 border-t border-(--ks-color-border) pt-4 dark:border-(--ks-color-border-dark)">
+      <Label htmlFor="ks-pages-show-when-value">Show only when</Label>
+      <Select id="ks-pages-show-when-value" value={name} onChange={(event) => chosen(event.target.value)}>
+        <option value="">Always shown</option>
+        {names.map(([key, label]) => <option key={key} value={key}>{label}</option>)}
+      </Select>
+      {name !== "" &&
+        <>
+          <Label htmlFor="ks-pages-show-when-equals">equals</Label>
+          <Input id="ks-pages-show-when-equals" type="text" defaultValue={equals}
+            onBlur={(event) => { setEquals(event.target.value); if (event.target.value !== condition?.equals) onChange(name, event.target.value) }} />
+        </>}
+    </div>
+  )
+}

data/app/javascript/keystone_ui_pages/ThemeMode.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+import Select from "keystone_ui-react/src/Select.jsx"
+
+const MODES = [["light", "Light"], ["dark", "Dark"], ["system", "System"]]
+
+const shown = (mode) => {
+  if (mode === "system") delete document.documentElement.dataset.theme
+  else document.documentElement.dataset.theme = mode
+}
+
+export default function ThemeMode() {
+  const current = document.documentElement.dataset.theme ?? "system"
+  const offered = current === "custom" ? [...MODES, ["custom", "Custom"]] : MODES
+
+  return (
+    <label className="flex items-center gap-2 text-sm">
+      <span>Mode</span>
+      <Select data-theme-mode defaultValue={current} onChange={(event) => shown(event.target.value)} className="py-1">
+        {offered.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
+      </Select>
+    </label>
+  )
+}

data/app/javascript/keystone_ui_pages/document.js

@@ -0,0 +1,10 @@
+const columnsIn = (document) =>
+  document.sections.flatMap((section) => section.rows).flatMap((row) => row.columns)
+
+export const elementIn = (document, id) =>
+  columnsIn(document).flatMap((column) => column.elements).find((element) => element.id === id)
+
+export const nodeIn = (document, id) => {
+  const rows = document.sections.flatMap((section) => section.rows)
+  return [...document.sections, ...rows, ...columnsIn(document)].find((node) => node.id === id)
+}

data/app/javascript/keystone_ui_pages/editor.jsx

@@ -0,0 +1,8 @@
+import { createRoot } from "react-dom/client"
+import { register } from "keystone_ui-react/src/registry.js"
+import { startMounting } from "keystone_ui-react/src/mounting.js"
+import PageEditor from "./PageEditor"
+
+register("keystone_ui_pages/editor", PageEditor)
+
+startMounting(document, createRoot)

data/app/javascript/keystone_ui_pages/operations.js

@@ -0,0 +1,32 @@
+const sent = (url, token, method, body = {}) =>
+  fetch(url, {
+    method,
+    headers: { "Content-Type": "application/json", Accept: "application/json", "X-CSRF-Token": token },
+    body: JSON.stringify(body)
+  }).then((response) => response.json().then((answer) => (response.ok ? answer : Promise.reject(answer))))
+
+export const addElement = (url, token, key, columnId) => sent(url, token, "POST", { key, column_id: columnId })
+
+export const setField = (url, token, elementId, field, value) => sent(`${url}/${elementId}`, token, "PATCH", { field, value })
+
+export const addSection = (url, token) => sent(url, token, "POST", {})
+
+export const addColumn = (url, token, rowId) => sent(url, token, "POST", { row_id: rowId })
+
+export const addRow = (url, token, sectionId) => sent(url, token, "POST", { section_id: sectionId })
+
+export const arrange = (url, token, nodeId, setting, value) => sent(`${url}/${nodeId}`, token, "PATCH", { setting, value })
+
+export const removeNode = (url, token, nodeId) => sent(`${url}/${nodeId}`, token, "DELETE")
+
+export const moveNode = (url, token, nodeId, into, position) => sent(`${url}/${nodeId}/move`, token, "POST", { into, position })
+
+export const duplicateNode = (url, token, nodeId) => sent(`${url}/${nodeId}/duplicate`, token, "POST")
+
+export const bindField = (url, token, elementId, field, name, fallback) => sent(`${url}/${elementId}/bind`, token, "POST", { field, name, fallback })
+
+export const chooseSample = (url, token, choice) => sent(url, token, "POST", { choice })
+
+export const showWhen = (url, token, nodeId, name, equals) => sent(`${url}/${nodeId}/condition`, token, "POST", { name, equals })
+
+export const stepHistory = (url, token) => sent(url, token, "POST")

data/app/jobs/keystone_ui/pages/pdf_job.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    class PdfJob < ActiveJob::Base
+      def perform(page, values)
+        KeystoneUi::Pages.pdf(page, values: values)
+      end
+    end
+  end
+end

data/app/models/keystone_ui/pages/page.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+require "keystone_ui/pages/document"
+
+module KeystoneUi
+  module Pages
+    class Page < ActiveRecord::Base
+      self.table_name = "keystone_ui_pages_pages"
+
+      belongs_to :owner, polymorphic: true, optional: true
+      has_many :versions, -> { order(:number) }, class_name: "KeystoneUi::Pages::Version", dependent: :destroy, inverse_of: :page
+
+      attribute :document, :json, default: -> { Document.blank }
+      attribute :undo_history, :json, default: -> { [] }
+      attribute :undone_changes, :json, default: -> { [] }
+
+      validates :name, :slug, presence: true
+
+      def publish
+        transaction do
+          live_version&.update!(status: :superseded)
+          versions.create!(number: next_number, document: document, status: :live)
+        end.tap { PdfJob.perform_later(self, {}) unless uses_host_values? }
+      end
+
+      def uses_host_values?(node = document)
+        case node
+        when Hash then node.key?("show_when") || (node.key?("value") && node.key?("fallback")) || node.values.any? { |child| uses_host_values?(child) }
+        when Array then node.any? { |child| uses_host_values?(child) }
+        else false
+        end
+      end
+
+      def edit(changed_document)
+        update!(document: changed_document, undo_history: undo_history + [ document ], undone_changes: [])
+      end
+
+      def undo
+        update!(document: undo_history.last, undo_history: undo_history[0...-1], undone_changes: undone_changes + [ document ])
+      end
+
+      def redo
+        update!(document: undone_changes.last, undone_changes: undone_changes[0...-1], undo_history: undo_history + [ document ])
+      end
+
+      def live_version
+        versions.find_by(status: :live)
+      end
+
+      def next_number
+        (versions.maximum(:number) || 0) + 1
+      end
+    end
+  end
+end

data/app/models/keystone_ui/pages/pdf.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    class Pdf < ActiveRecord::Base
+      self.table_name = "keystone_ui_pages_pdfs"
+
+      belongs_to :version, class_name: "KeystoneUi::Pages::Version"
+      has_one_attached :file
+    end
+  end
+end

data/app/models/keystone_ui/pages/version.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    class Version < ActiveRecord::Base
+      self.table_name = "keystone_ui_pages_versions"
+
+      enum :status, { live: "live", superseded: "superseded" }
+
+      belongs_to :page, class_name: "KeystoneUi::Pages::Page", inverse_of: :versions
+    end
+  end
+end

data/app/views/keystone_ui/pages/manage/pages/index.html.erb

@@ -0,0 +1,35 @@
+<%= ui_page(max_width: :xl) do %>
+  <%= ui_page_header(title: "Pages") %>
+
+  <div class="ks-table overflow-x-auto">
+    <table class="relative min-w-full divide-y divide-gray-300 dark:divide-white/15">
+      <thead class="ks-table-head">
+        <tr>
+          <th class="ks-table-header ks-table-header-first text-left text-sm">Name</th>
+          <th class="ks-table-header ks-table-header-middle text-left text-sm">Status</th>
+          <th class="ks-table-header ks-table-header-middle text-left text-sm">Last published</th>
+          <th class="ks-table-header ks-table-header-last text-right text-sm"><span class="sr-only">Open</span></th>
+        </tr>
+      </thead>
+      <tbody class="ks-table-body">
+        <% @pages.each do |page| %>
+          <% live = page.live_version %>
+          <tr data-page="<%= page.slug %>">
+            <td class="ks-table-cell-first text-sm whitespace-nowrap"><%= page.name %></td>
+            <td class="ks-table-cell-middle text-sm whitespace-nowrap"><%= ui_badge(label: live ? "Published" : "Draft", variant: live ? :success : :neutral) %></td>
+            <td class="ks-table-cell-middle text-sm whitespace-nowrap"><%= live&.created_at&.to_date&.to_fs(:long) %></td>
+            <td class="ks-table-cell-middle text-sm whitespace-nowrap text-right">
+              <%= link_to "Edit", manage_page_path(page) %>
+              <% if live %>
+                <%= link_to "View live", manage_page_live_path(page), class: "ml-4" %>
+                <% if @printable %>
+                  <%= link_to "PDF", manage_page_pdf_path(page), class: "ml-4" %>
+                <% end %>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

data/app/views/keystone_ui/pages/manage/pages/new.html.erb

@@ -0,0 +1,13 @@
+<%= ui_page(max_width: :xl) do %>
+  <%= ui_page_header(title: "New page") %>
+
+  <%= ui_form(action: manage_pages_path, method: :post) do %>
+    <label class="ks-label mb-1">Name</label>
+    <%= ui_input(name: "page[name]", placeholder: "e.g. Pricing") %>
+
+    <label class="ks-label mb-1">Address</label>
+    <%= ui_input(name: "page[slug]", placeholder: "e.g. pricing") %>
+
+    <%= ui_button(label: "Create", type: :submit) %>
+  <% end %>
+<% end %>

data/app/views/keystone_ui/pages/manage/pages/show.html.erb

@@ -0,0 +1,8 @@
+<% content_for :head do %>
+  <%= javascript_include_tag "keystone_ui/react", defer: true %>
+  <%= javascript_include_tag "keystone_ui_pages/editor", defer: true %>
+<% end %>
+
+<div data-page-builder>
+  <%= react_ui("keystone_ui_pages/editor", editor_props(@page).merge(name: @page.name, publish_url: publish_manage_page_path(@page))) %>
+</div>

data/app/views/keystone_ui/pages/manage/versions/index.html.erb

@@ -0,0 +1,28 @@
+<%= ui_page(max_width: :xl) do %>
+  <%= ui_page_header(title: "#{@page.name} history") %>
+
+  <div class="mb-6"><%= ui_button(label: "Back to builder", href: manage_page_path(@page), variant: :secondary) %></div>
+
+  <div class="ks-table overflow-x-auto">
+    <table class="relative min-w-full divide-y divide-gray-300 dark:divide-white/15">
+      <thead class="ks-table-head">
+        <tr>
+          <th class="ks-table-header ks-table-header-first text-left text-sm">Version</th>
+          <th class="ks-table-header ks-table-header-middle text-left text-sm">Status</th>
+          <th class="ks-table-header ks-table-header-middle text-left text-sm">Published</th>
+          <th class="ks-table-header ks-table-header-last text-right text-sm"><span class="sr-only">Open</span></th>
+        </tr>
+      </thead>
+      <tbody class="ks-table-body">
+        <% @versions.each do |version| %>
+          <tr data-version="<%= version.number %>">
+            <td class="ks-table-cell-first text-sm whitespace-nowrap"><%= version.number %></td>
+            <td class="ks-table-cell-middle text-sm whitespace-nowrap"><%= ui_badge(label: version.status, variant: version.live? ? :success : :neutral) %></td>
+            <td class="ks-table-cell-middle text-sm whitespace-nowrap"><%= version.created_at.to_date.to_fs(:long) %></td>
+            <td class="ks-table-cell-middle text-sm whitespace-nowrap text-right"><%= link_to "View", manage_page_version_path(@page, version) %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

data/app/views/keystone_ui/pages/manage/versions/show.html.erb

@@ -0,0 +1,11 @@
+<%= ui_page(max_width: :xl) do %>
+  <%= ui_page_header(title: "#{@page.name}, version #{@version.number}") %>
+
+  <%= ui_form(action: restore_manage_page_version_path(@page, @version), method: :post) do %>
+    <%= ui_button(label: "Restore this version as the draft", type: :submit, variant: :secondary) %>
+  <% end %>
+
+  <div class="@container" data-version-drawing>
+    <%= drawn_document(@version.document) %>
+  </div>
+<% end %>

data/app/views/keystone_ui/pages/pages/show.html.erb

@@ -0,0 +1,3 @@
+<div data-live-page class="@container print:bg-white print:[print-color-adjust:exact]">
+  <%= drawn_version(@version, values: @values.to_h) %>
+</div>

data/app/views/keystone_ui/pages/pdfs/show.html.erb

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html data-theme="light">
+  <head>
+    <meta charset="utf-8">
+    <style><%= raw @stylesheet %></style>
+  </head>
+  <body>
+    <div class="@container print:bg-white print:[print-color-adjust:exact]">
+      <%= drawn_version(@version, values: @values) %>
+    </div>
+  </body>
+</html>