keystone_ui-pages 0.1.0

data/app/controllers/keystone_ui/pages/manage/nodes_controller.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    module Manage
+      class NodesController < BaseController
+        include EditsPages
+
+        def update
+          changed(Operations.arrange(page.document, node_id: params[:id], setting: params.require(:setting), value: params.require(:value)))
+        end
+
+        def move
+          changed(Operations.move(page.document, node_id: params[:id], into: params[:into].presence, position: params.require(:position)))
+        end
+
+        def condition
+          changed(Operations.show_when(page.document, node_id: params[:id], name: params[:name], equals: params[:equals]))
+        end
+
+        def duplicate
+          changed(Operations.duplicate(page.document, node_id: params[:id]))
+        end
+
+        def destroy
+          changed(Operations.remove(page.document, node_id: params[:id]))
+        end
+      end
+    end
+  end
+end

data/app/controllers/keystone_ui/pages/manage/pages_controller.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "keystone_ui/pages/printer"
+
+module KeystoneUi
+  module Pages
+    module Manage
+      class PagesController < BaseController
+        def index
+          @pages = owned_pages.order(:name)
+          @printable = Printer.chrome.present?
+        end
+
+        def new
+        end
+
+        def create
+          page = Page.create!(params.require(:page).permit(:name, :slug).merge(owner: page_owner))
+          redirect_to manage_page_path(page)
+        end
+
+        def show
+          @page = owned_pages.find(params[:id])
+          (session[:keystone_ui_pages_return_to] ||= {})[@page.id.to_s] = params[:return_to] if local_address?(params[:return_to])
+        end
+
+        def publish
+          page = owned_pages.find(params[:id])
+          page.publish
+          redirect_to manage_page_path(page)
+        end
+
+        private
+
+        def local_address?(address)
+          address.to_s.match?(%r{\A/(?![/\\])})
+        end
+      end
+    end
+  end
+end

data/app/controllers/keystone_ui/pages/manage/pdfs_controller.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    module Manage
+      class PdfsController < BaseController
+        def show
+          page = owned_pages.find(params[:page_id])
+          return refuse if page.live_version.nil?
+
+          pdf = KeystoneUi::Pages.pdf(page, values: sample_values(page))
+          send_data pdf.file.download, filename: "#{page.slug}.pdf", type: "application/pdf"
+        end
+
+        private
+
+        def sample_values(page)
+          page.uses_host_values? ? Values.sample(page, helpers.chosen_sample(page)) : {}
+        end
+      end
+    end
+  end
+end

data/app/controllers/keystone_ui/pages/manage/rows_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    module Manage
+      class RowsController < BaseController
+        include EditsPages
+
+        def create
+          changed(Operations.add_row(page.document, section_id: params.require(:section_id)))
+        end
+      end
+    end
+  end
+end

data/app/controllers/keystone_ui/pages/manage/samples_controller.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    module Manage
+      class SamplesController < BaseController
+        include EditsPages
+
+        def update
+          (session[:keystone_ui_pages_samples] ||= {})[page.id.to_s] = params.require(:choice)
+          changed(page.document)
+        end
+      end
+    end
+  end
+end

data/app/controllers/keystone_ui/pages/manage/sections_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    module Manage
+      class SectionsController < BaseController
+        include EditsPages
+
+        def create
+          changed(Operations.add_section(page.document))
+        end
+      end
+    end
+  end
+end

data/app/controllers/keystone_ui/pages/manage/versions_controller.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    module Manage
+      class VersionsController < BaseController
+        def index
+          @page = owned_pages.find(params[:page_id])
+          @versions = @page.versions.reorder(number: :desc)
+        end
+
+        def show
+          @page = owned_pages.find(params[:page_id])
+          @version = @page.versions.find(params[:id])
+        end
+
+        def restore
+          page = owned_pages.find(params[:page_id])
+          page.update!(document: page.versions.find(params[:id]).document)
+          redirect_to manage_page_path(page)
+        end
+      end
+    end
+  end
+end

data/app/controllers/keystone_ui/pages/pages_controller.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    class PagesController < KeystoneUi::Pages.base_controller.constantize
+      include HostChecks
+      helper KeystoneUiHelper
+      helper DrawingHelper
+      layout -> { KeystoneUi::Pages.layout }
+
+      def show
+        page = owned_pages.find_by(slug: params[:slug])
+        @version = page&.live_version
+        refuse if @version.nil? || !viewable?(page)
+      end
+
+      private
+
+      def viewable?(page)
+        return true unless KeystoneUi::Pages.view_check_method
+
+        send(KeystoneUi::Pages.view_check_method, page)
+      end
+    end
+  end
+end

data/app/helpers/keystone_ui/pages/drawing_helper.rb

@@ -0,0 +1,115 @@
+# frozen_string_literal: true
+
+require "keystone_ui/pages/operations"
+
+module KeystoneUi
+  module Pages
+    module DrawingHelper
+      NARROW_SPANS = { "1/1" => "col-span-12", "3/4" => "col-span-9", "2/3" => "col-span-8", "1/2" => "col-span-6", "1/3" => "col-span-4", "1/4" => "col-span-3" }.freeze
+      WIDE_SPANS = { "1/1" => "@sm:col-span-12", "3/4" => "@sm:col-span-9", "2/3" => "@sm:col-span-8", "1/2" => "@sm:col-span-6", "1/3" => "@sm:col-span-4", "1/4" => "@sm:col-span-3" }.freeze
+      ELEMENT_ALIGNMENTS = { "stretch" => "flex flex-col", "start" => "flex justify-start", "center" => "flex justify-center", "end" => "flex justify-end" }.freeze
+      COLUMN_ALIGNMENTS = { "top" => "justify-start", "center" => "justify-center", "bottom" => "justify-end" }.freeze
+      PLAIN_FIGURE_DIVIDER = "@sm:[.ks-pages-column:has(.ks-metric-plain)+&:has(.ks-metric-plain)]:border-l-(length:--ks-border-width) " \
+                             "@sm:[.ks-pages-column:has(.ks-metric-plain)+&:has(.ks-metric-plain)]:border-(color:--ks-color-border) " \
+                             "dark:@sm:[.ks-pages-column:has(.ks-metric-plain)+&:has(.ks-metric-plain)]:border-(color:--ks-color-border-dark)"
+
+      def drawn_version(version, values: {})
+        key = [ "keystone_ui_pages", version.id, Operations.digest(values.to_h.stringify_keys) ]
+        Rails.cache.fetch(key) { drawn_document(version.document, values: values).to_str }.html_safe
+      end
+
+      def drawn_document(document, editing: false, values: {})
+        @drawn_values = values.to_h.stringify_keys
+        safe_join(document["sections"].map { |section| drawn_section(section, editing) })
+      end
+
+      private
+
+      def drawn_section(section, editing)
+        return if hidden?(section) && !editing
+
+        spacing = Keystone::Ui::SectionComponent::SPACING_CLASSES.fetch((section["spacing"] || Operations::DEFAULTS[:section]["spacing"]).to_sym)
+        data = editing ? { section_id: section["id"], hidden: hidden?(section) || nil }.compact : {}
+        tag.section(safe_join(section["rows"].map { |row| drawn_row(row, editing) }), class: "ks-pages-section flex flex-col gap-6 print:break-inside-avoid #{spacing}", data: data)
+      end
+
+      def drawn_row(row, editing)
+        return if hidden?(row) && !editing
+
+        gap = Keystone::Ui::GridComponent::GAP_CLASSES.fetch((row["gap"] || Operations::DEFAULTS[:row]["gap"]).to_sym)
+        share = Operations::SHARES.fetch(row["columns"].size, "1/1")
+        columns = row["columns"].map { |column| drawn_column(column, editing, share) }
+        data = editing ? { row_id: row["id"], hidden: hidden?(row) || nil }.compact : {}
+        tag.div(safe_join(columns), class: "ks-pages-row grid grid-cols-12 #{gap}", data: data)
+      end
+
+      def drawn_column(column, editing, share)
+        elements = safe_join(column["elements"].map { |element| editing ? edited_element(element) : drawn_element(element) })
+        spans = "#{PLAIN_FIGURE_DIVIDER} #{NARROW_SPANS.fetch(column["narrow"] || Operations::DEFAULTS[:column]["narrow"])} #{WIDE_SPANS.fetch(column['wide'] || share)} #{COLUMN_ALIGNMENTS.fetch(column["align"] || Operations::DEFAULTS[:column]["align"])}"
+        return tag.div(elements, class: "ks-pages-column flex flex-col gap-4 #{spans}") unless editing
+
+        tag.div(elements, class: "ks-pages-column flex flex-col gap-4 #{spans}", data: { column_id: column["id"] })
+      end
+
+      def edited_element(element)
+        wrapped_element(element, data: { element_id: element["id"], hidden: hidden?(element) || nil }.compact)
+      end
+
+      def drawn_element(element)
+        wrapped_element(element) unless hidden?(element)
+      end
+
+      def hidden?(node)
+        condition = node["show_when"]
+        condition && (@drawn_values || {})[condition["value"]].to_s != condition["equals"].to_s
+      end
+
+      def wrapped_element(element, data: {})
+        tag.div(component_for(element), class: "ks-pages-element print:[&_tr]:break-inside-avoid print:[&_.ks-value-list-row]:break-inside-avoid #{wrapper_classes(element)} #{ELEMENT_ALIGNMENTS.fetch(element["align"] || KeystoneUi::Pages.catalog.find(element["key"])&.align || Operations::DEFAULTS[:element]["align"])}", data: data)
+      end
+
+      def field_value(field, value)
+        return value.map { |entry| entry.is_a?(Hash) ? entry.symbolize_keys : entry } if field[:kind] == :data && value.is_a?(Array)
+        return value.map { |entry| Keystone::Ui::Column.new(entry["key"].to_s.to_sym, entry["label"], align: entry["align"].presence&.to_sym) } if field[:as] == :pairs && value.is_a?(Array)
+        return value.map { |entry| entry_with_defaults(field, entry) } if field[:kind] == :list && value.is_a?(Array)
+        return [] if (field[:kind] == :list || (field[:kind] == :data && field[:default].is_a?(Array))) && value.blank?
+        return nil if field[:kind] == :data && value.blank?
+        return value if value.blank?
+        return value.to_sym if field[:as] == :key
+        return value.to_s == "true" if field[:kind] == :yes_or_no
+        return value.to_sym if field[:kind] == :one_of
+        return value unless field[:kind] == :number
+
+        value.to_s.include?(".") ? value.to_f : value.to_i
+      end
+
+      def entry_with_defaults(field, entry)
+        parts = Array(field[:entry]).index_by { |part| part[:key] }
+        defaults = parts.transform_values { |part| part[:default] }.compact
+        given = entry.to_h.symbolize_keys.to_h { |key, value| [ key, parts[key] ? field_value(parts[key], value) : value ] }
+        defaults.merge(given.compact_blank)
+      end
+
+      def filled(stored)
+        return stored.presence unless stored.is_a?(Hash)
+
+        (@drawn_values || {})[stored["value"]].presence || stored["fallback"].presence || ""
+      end
+
+      def wrapper_classes(element)
+        definition = KeystoneUi::Pages.catalog.find(element["key"])
+        definition.fields.select { |field| field[:classes] }
+          .map { |field| field[:classes][element["fields"][field[:key].to_s].presence || field[:default]] }.compact.join(" ")
+      end
+
+      def component_for(element)
+        definition = KeystoneUi::Pages.catalog.find(element["key"])
+        values = definition.fields.reject { |field| field[:classes] }.to_h { |field| [ field[:key].to_sym, field_value(field, filled(element["fields"][field[:key].to_s]) || field[:default]) ] }
+        return send(definition.component, **values) unless definition.body
+
+        body = values.delete(definition.body)
+        send(definition.component, **values) { body }
+      end
+    end
+  end
+end

data/app/helpers/keystone_ui/pages/editor_helper.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+require "keystone_ui/pages/operations"
+
+module KeystoneUi
+  module Pages
+    module EditorHelper
+      def editor_props(page)
+        {
+          elements: KeystoneUi::Pages.catalog.elements.map { |element| element.to_h.slice(:key, :name, :fields, :icon, :group, :align) },
+          canvas: editor_canvas(page),
+          document: page.document,
+          elements_url: manage_page_elements_path(page),
+          sections_url: manage_page_sections_path(page),
+          columns_url: manage_page_columns_path(page),
+          rows_url: manage_page_rows_path(page),
+          nodes_url: "#{manage_page_path(page)}/nodes",
+          arrangements: Operations::ARRANGEMENTS,
+          defaults: Operations::DEFAULTS,
+          shares: Operations::SHARES,
+          value_names: Values.names,
+          looks: KeystoneUi.configuration.looks.keys,
+          samples: Values.samples_for(page),
+          sample: chosen_sample(page),
+          samples_url: manage_page_sample_path(page),
+          history_url: manage_page_versions_path(page),
+          undo_url: manage_page_undo_path(page),
+          redo_url: manage_page_redo_path(page),
+          undoable: page.undo_history.any?,
+          redoable: page.undone_changes.any?,
+          back_url: session.dig(:keystone_ui_pages_return_to, page.id.to_s) || manage_pages_path,
+          live_url: (manage_page_live_path(page) if page.live_version),
+          token: form_authenticity_token
+        }
+      end
+
+      def editor_canvas(page)
+        drawn_document(page.document, editing: true, values: Values.sample(page, chosen_sample(page)))
+      end
+
+      def chosen_sample(page)
+        session.dig(:keystone_ui_pages_samples, page.id.to_s) || Values.samples_for(page).first&.last
+      end
+    end
+  end
+end

data/app/helpers/keystone_ui/pages/host_helper.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    module HostHelper
+      include KeystoneUiHelper
+      include DrawingHelper
+
+      def keystone_ui_page(page, values: {})
+        version = page.live_version
+        return if version.nil?
+
+        tag.div(drawn_version(version, values: values), class: "@container")
+      end
+    end
+  end
+end

data/app/javascript/keystone_ui_pages/DeviceWidth.jsx

@@ -0,0 +1,21 @@
+import React from "react"
+
+export const DEVICES = [
+  { key: "phone", label: "Phone", width: "390px" },
+  { key: "tablet", label: "Tablet", width: "768px" },
+  { key: "desktop", label: "Desktop", width: "100%" },
+  { key: "print", label: "Print", width: "794px", theme: "light" }
+]
+
+export default function DeviceWidth({ chosen, onChoose }) {
+  return (
+    <div data-device-width role="group" aria-label="Preview width" className="flex rounded-md border border-(--ks-color-border) dark:border-(--ks-color-border-dark) p-0.5">
+      {DEVICES.map((device) => (
+        <button key={device.key} type="button" aria-pressed={chosen === device.key} onClick={() => onChoose(device.key)}
+          className="rounded px-3 py-1 text-sm aria-pressed:bg-(--ks-color-accent) aria-pressed:text-white">
+          {device.label}
+        </button>
+      ))}
+    </div>
+  )
+}

data/app/javascript/keystone_ui_pages/ElementFields.jsx

@@ -0,0 +1,78 @@
+import React from "react"
+import Input from "keystone_ui-react/src/Input.jsx"
+import Select from "keystone_ui-react/src/Select.jsx"
+import Textarea from "keystone_ui-react/src/Textarea.jsx"
+import Checkbox from "keystone_ui-react/src/Checkbox.jsx"
+import Button from "keystone_ui-react/src/Button.jsx"
+import { Label } from "keystone_ui-react/src/FieldText.jsx"
+import ListField from "./ListField"
+
+const FieldInput = ({ field, value, onChange }) => {
+  const shown = value ?? field.default ?? ""
+  const shared = {
+    id: `ks-pages-field-${field.key}`,
+    defaultValue: shown,
+    onBlur: (event) => event.target.value !== shown && onChange(field.key, event.target.value)
+  }
+
+  if (field.kind === "yes_or_no") {
+    return <Checkbox id={shared.id} defaultChecked={value === "true"} onChange={(event) => onChange(field.key, String(event.target.checked))} />
+  }
+  if (field.kind === "one_of") {
+    return (
+      <Select id={shared.id} defaultValue={value ?? field.default ?? ""} onChange={(event) => onChange(field.key, event.target.value)}>
+        {field.options.map((option) => <option key={option} value={option}>{option}</option>)}
+      </Select>
+    )
+  }
+  if (field.kind === "long_text") return <Textarea {...shared} rows={4} />
+  if (field.kind === "number") return <Input {...shared} type="number" />
+  if (field.kind === "address") return <Input {...shared} type="url" />
+  return <Input {...shared} type="text" />
+}
+
+const BINDABLE = ["text", "long_text", "address", "number", "list", "data", undefined]
+
+const isBound = (stored) => Boolean(stored) && typeof stored === "object" && !Array.isArray(stored) && "value" in stored
+
+const ValueChoice = ({ field, stored, valueNames, onChange, onBind }) => {
+  const bound = isBound(stored) ? stored : null
+  const typed = bound ? bound.fallback ?? "" : stored ?? field.default ?? ""
+
+  return (
+    <Select id={`ks-pages-value-${field.key}`} aria-label={`${field.label} value`} value={bound?.value ?? ""}
+      onChange={(event) => (event.target.value ? onBind(field.key, event.target.value, typed) : onChange(field.key, typed))}>
+      <option value="">Typed text</option>
+      {Object.entries(valueNames).map(([name, label]) => <option key={name} value={name}>{label}</option>)}
+    </Select>
+  )
+}
+
+export default function ElementFields({ element, definition, alignments, valueNames = {}, onChange, onArrange, onBind, onRemove }) {
+  return (
+    <aside data-element-fields className="flex flex-col gap-3">
+      {definition.fields.map((field) => (
+        <div key={`${element.id}-${field.key}`} className="flex flex-col gap-1">
+          <Label htmlFor={`ks-pages-field-${field.key}`}>{field.label}</Label>
+          {BINDABLE.includes(field.kind) && Object.keys(valueNames).length > 0 &&
+            <ValueChoice field={field} stored={element.fields[field.key]} valueNames={valueNames} onChange={onChange} onBind={onBind} />}
+          {field.kind === "list" && !isBound(element.fields[field.key]) &&
+            <ListField field={field} entries={element.fields[field.key] ?? field.default ?? []} onChange={onChange} />}
+          {field.kind === "data" && <p className="ks-hint">Filled with data the host supplies on a template page</p>}
+          {field.kind !== "list" && field.kind !== "data" && <FieldInput key={JSON.stringify(element.fields[field.key] ?? null)} field={field}
+            value={isBound(element.fields[field.key]) ? element.fields[field.key].fallback ?? "" : element.fields[field.key]}
+            onChange={(key, text) => (isBound(element.fields[key]) ? onBind(key, element.fields[key].value, text) : onChange(key, text))} />}
+          {isBound(element.fields[field.key]) &&
+            <p className="ks-hint">Shows {valueNames[element.fields[field.key].value] ?? element.fields[field.key].value}, or this text when it has no value</p>}
+        </div>
+      ))}
+      <div className="flex flex-col gap-1">
+        <Label htmlFor="ks-pages-element-align">Horizontal alignment</Label>
+        <Select key={`${element.id}-align`} id="ks-pages-element-align" defaultValue={element.align ?? definition.align ?? "stretch"} onChange={(event) => onArrange(element.id, "align", event.target.value)}>
+          {alignments.map((value) => <option key={value} value={value}>{value}</option>)}
+        </Select>
+      </div>
+      <Button type="button" variant="danger" onClick={() => onRemove(element.id)}>Remove element</Button>
+    </aside>
+  )
+}

data/app/javascript/keystone_ui_pages/ElementPalette.jsx

@@ -0,0 +1,62 @@
+import React, { forwardRef, useState } from "react"
+import Input from "keystone_ui-react/src/Input.jsx"
+
+const ICONS = {
+  cursor: "M5 3l14 8-6 2-2 6z",
+  tag: "M3 7v6l8 8 8-8-8-8H5a2 2 0 0 0-2 2zM7.5 7.5h.01",
+  copy: "M8 8h11v11H8zM5 16V5h11",
+  heading: "M6 4v16M18 4v16M6 12h12",
+  text: "M4 6h16M4 12h16M4 18h10",
+  list: "M4 6h4M12 6h8M4 12h4M12 12h8M4 18h4M12 18h8",
+  info: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01",
+  code: "M8 6l-6 6 6 6M16 6l6 6-6 6",
+  alert: "M12 3l10 18H2zM12 10v4M12 17h.01",
+  card: "M3 5h18v14H3zM3 10h18",
+  megaphone: "M3 11v2l13 5V6zM16 9a3 3 0 0 1 0 6M6 14l1 5h3l-1-4",
+  chart: "M4 20V10M10 20V4M16 20v-7M22 20H2",
+  bars: "M3 21h18M6 17v-6h3v6M11 17V7h3v10M16 17v-4h3v4",
+  number: "M10 3L8 21M16 3l-2 18M4 9h17M3 15h17",
+  progress: "M3 12h18M3 12h10",
+  box: "M3 3h18v18H3z"
+}
+
+const grouped = (elements) => {
+  const groups = new Map()
+  elements.forEach((element) => {
+    const group = element.group ?? "Other"
+    groups.set(group, [...(groups.get(group) ?? []), element])
+  })
+  return [...groups]
+}
+
+const PaletteItem = ({ element, shown }) => (
+  <button type="button" data-element-key={element.key} hidden={!shown}
+    className="flex cursor-grab items-center gap-3 rounded-md border border-(--ks-color-border) bg-(--ks-color-surface) px-3 py-2 dark:border-(--ks-color-border-dark) dark:bg-(--ks-color-surface-dark) text-left text-sm hover:border-(--ks-color-accent) dark:bg-transparent">
+    <svg viewBox="0 0 24 24" aria-hidden="true" className="size-5 shrink-0 fill-none stroke-current stroke-2 text-(--ks-color-icon)" strokeLinecap="round" strokeLinejoin="round">
+      <path d={ICONS[element.icon] ?? ICONS.box} />
+    </svg>
+    <span>{element.name}</span>
+  </button>
+)
+
+const ElementPalette = forwardRef(function ElementPalette({ elements, children }, palette) {
+  const [search, setSearch] = useState("")
+  const matches = (element) => element.name.toLowerCase().includes(search.trim().toLowerCase())
+
+  return (
+    <aside ref={palette} data-element-palette className="flex w-64 shrink-0 flex-col gap-5 overflow-y-auto border-r border-(--ks-color-border) bg-(--ks-color-surface) p-4 dark:border-(--ks-color-border-dark) dark:bg-(--ks-color-surface-dark)">
+      <Input type="search" aria-label="Search elements" placeholder="Search elements" value={search} onChange={(event) => setSearch(event.target.value)} />
+      {grouped(elements).map(([group, members]) => (
+        <section key={group} data-element-group={group} hidden={!members.some(matches)} className="flex flex-col gap-2">
+          <h2 className="text-xs font-semibold uppercase tracking-wide text-(--ks-color-icon)">{group}</h2>
+          {members.map((element) => (
+            <PaletteItem key={element.key} element={element} shown={matches(element)} />
+          ))}
+        </section>
+      ))}
+      {children}
+    </aside>
+  )
+})
+
+export default ElementPalette

data/app/javascript/keystone_ui_pages/LayoutPanel.jsx

@@ -0,0 +1,41 @@
+import React from "react"
+import Button from "keystone_ui-react/src/Button.jsx"
+import Select from "keystone_ui-react/src/Select.jsx"
+import Alert from "keystone_ui-react/src/Alert.jsx"
+import { Label } from "keystone_ui-react/src/FieldText.jsx"
+
+const LABELS = {
+  section: { spacing: "Section spacing" },
+  row: { gap: "Row gap" },
+  column: { wide: "Width on wide screens", narrow: "Width on narrow screens", align: "Vertical alignment" }
+}
+
+export default function LayoutPanel({ node, values, arrangements, refusal, onAddColumn, onAddRow, onArrange, onSelect, onRemove }) {
+  const labels = LABELS[node.kind]
+  const settings = Object.keys(arrangements[node.kind]).filter((setting) => labels[setting])
+
+  return (
+    <aside data-layout-panel className="flex flex-col gap-3">
+      {refusal && <div data-layout-refusal><Alert type="error" message={refusal} /></div>}
+      {settings.map((setting) => (
+        <div key={`${node.id}-${setting}`} className="flex flex-col gap-1">
+          <Label htmlFor={`ks-pages-${setting}`}>{labels[setting]}</Label>
+          <Select id={`ks-pages-${setting}`} defaultValue={values[setting] ?? ""} onChange={(event) => onArrange(node.id, setting, event.target.value)}>
+            {arrangements[node.kind][setting].map((value) => <option key={value} value={value}>{value}</option>)}
+          </Select>
+        </div>
+      ))}
+      {node.kind === "column" && (
+        <>
+          <Button type="button" variant="secondary" onClick={() => onAddColumn(node.rowId)}>Add column</Button>
+          <Button type="button" variant="secondary" onClick={() => onAddRow(node.sectionId)}>Add row</Button>
+          <Button type="button" variant="secondary" onClick={() => onSelect({ kind: "row", id: node.rowId, sectionId: node.sectionId })}>Select row</Button>
+        </>
+      )}
+      {node.kind === "row" && (
+        <Button type="button" variant="secondary" onClick={() => onSelect({ kind: "section", id: node.sectionId })}>Select section</Button>
+      )}
+      <Button type="button" variant="danger" onClick={() => onRemove(node.id)}>Remove {node.kind}</Button>
+    </aside>
+  )
+}

data/app/javascript/keystone_ui_pages/ListField.jsx

@@ -0,0 +1,49 @@
+import React from "react"
+import Input from "keystone_ui-react/src/Input.jsx"
+import Button from "keystone_ui-react/src/Button.jsx"
+import Checkbox from "keystone_ui-react/src/Checkbox.jsx"
+import Select from "keystone_ui-react/src/Select.jsx"
+import { Label } from "keystone_ui-react/src/FieldText.jsx"
+
+const swapped = (entries, from, to) => {
+  const changed = [...entries]
+  ;[changed[from], changed[to]] = [changed[to], changed[from]]
+  return changed
+}
+
+export default function ListField({ field, entries, onChange }) {
+  const parts = (field.entry ?? []).filter((part) => !part.hidden)
+  const saved = (changed) => onChange(field.key, changed)
+
+  return (
+    <div data-list-field={field.key} className="flex flex-col gap-2">
+      {entries.map((entry, index) => (
+        <fieldset key={`${index}-${JSON.stringify(entry)}`} data-list-entry className="flex flex-col gap-2 rounded-md border border-(--ks-color-border) dark:border-(--ks-color-border-dark) p-2">
+          {parts.map((part) => (
+            <div key={part.key} className="flex flex-col gap-1">
+              <Label htmlFor={`ks-pages-${field.key}-${index}-${part.key}`}>{part.label}</Label>
+              {part.kind === "one_of" &&
+                <Select id={`ks-pages-${field.key}-${index}-${part.key}`} defaultValue={entry[part.key] ?? part.default ?? ""}
+                  onChange={(event) => saved(entries.map((kept, place) => (place === index ? { ...kept, [part.key]: event.target.value } : kept)))}>
+                  <option value=""></option>
+                  {part.options.map((option) => <option key={option} value={option}>{option}</option>)}
+                </Select>}
+              {part.kind !== "one_of" && (part.kind === "yes_or_no"
+                ? <Checkbox id={`ks-pages-${field.key}-${index}-${part.key}`} className="self-start" defaultChecked={entry[part.key] === "true"}
+                    onChange={(event) => saved(entries.map((kept, place) => (place === index ? { ...kept, [part.key]: String(event.target.checked) } : kept)))} />
+                : <Input id={`ks-pages-${field.key}-${index}-${part.key}`} type="text" defaultValue={entry[part.key] ?? part.default ?? ""}
+                    onBlur={(event) => event.target.value !== (entry[part.key] ?? part.default ?? "") &&
+                      saved(entries.map((kept, place) => (place === index ? { ...kept, [part.key]: event.target.value } : kept)))} />)}
+            </div>
+          ))}
+          <div className="flex flex-wrap gap-2">
+            <Button type="button" size="sm" variant="secondary" disabled={index === 0} onClick={() => saved(swapped(entries, index, index - 1))}>Move up</Button>
+            <Button type="button" size="sm" variant="secondary" disabled={index === entries.length - 1} onClick={() => saved(swapped(entries, index, index + 1))}>Move down</Button>
+            <Button type="button" size="sm" variant="danger" onClick={() => saved(entries.filter((_kept, place) => place !== index))}>Remove item</Button>
+          </div>
+        </fieldset>
+      ))}
+      <Button type="button" size="sm" variant="secondary" onClick={() => saved([...entries, {}])}>Add item</Button>
+    </div>
+  )
+}

data/app/javascript/keystone_ui_pages/LookChoice.jsx

@@ -0,0 +1,17 @@
+import React from "react"
+import Select from "keystone_ui-react/src/Select.jsx"
+
+const titled = (name) => name.replace(/_/g, " ").replace(/^./, (first) => first.toUpperCase())
+
+export default function LookChoice({ looks }) {
+  if (looks.length === 0) return null
+
+  return (
+    <label className="flex items-center gap-2 text-sm">
+      <span>Look</span>
+      <Select data-look-choice defaultValue={document.documentElement.dataset.look} onChange={(event) => { document.documentElement.dataset.look = event.target.value }} className="py-1">
+        {looks.map((name) => <option key={name} value={name}>{titled(name)}</option>)}
+      </Select>
+    </label>
+  )
+}