keystone_ui-pages 0.3.0 → 0.4.1

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

@@ -22,7 +22,10 @@ module KeystoneUi
 
         def field_value
           value = params.to_unsafe_h["value"]
-          value.is_a?(Array) ? value.map { |entry| entry.to_h.stringify_keys } : value.to_s
+          return value.map { |entry| entry.to_h.stringify_keys } if value.is_a?(Array)
+          return { "html" => value["html"].to_s } if value.is_a?(Hash) && value.key?("html")
+
+          value.to_s
         end
       end
     end

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Pages
+    module Manage
+      class TitlesController < BaseController
+        include EditsPages
+
+        def update
+          changed(Operations.title(page.document, params[:title]))
+        end
+      end
+    end
+  end
+end

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

@@ -9,15 +9,24 @@ module KeystoneUi
       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
+      SIZED_SECTION_PADDING = "py-[calc(var(--ks-spacing)*16)] lg:py-[calc(var(--ks-spacing)*24)]"
+      SHADED_CLASSES = "bg-(color:--ks-color-fill-muted) dark:bg-(color:--ks-color-fill-muted-dark)"
       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) ]
+        @drawn_page_id = version.page_id
         Rails.cache.fetch(key) { drawn_document(version.document, values: values).to_str }.html_safe
       end
 
+      def pages_paragraph(text:)
+        return ui_paragraph(text: text) unless text.is_a?(Hash)
+
+        rich_paragraphs(text["html"].to_s)
+      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) })
@@ -25,12 +34,31 @@ module KeystoneUi
 
       private
 
+      def rich_paragraphs(html)
+        stored = Nokogiri::HTML5.fragment(html)
+        stored.css("script, style").each(&:remove)
+        fragment = Nokogiri::HTML5.fragment(Rails::HTML5::SafeListSanitizer.new.sanitize(stored.to_html, tags: %w[p br a], attributes: %w[href]))
+        fragment.css("a:not([href])").each { |link| link.replace(link.children) }
+        fragment.css("p").each { |paragraph| paragraph["class"] = "ks-paragraph" }
+        fragment.css("a[href^='http://'], a[href^='https://']").each { |link| link["target"], link["rel"] = "_blank", "noopener noreferrer" }
+        fragment.to_html.html_safe
+      end
+
       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)
+        shading = SHADED_CLASSES if section["background"] == "shaded"
+        tag.section(section_content(section, editing), class: [ "ks-pages-section flex flex-col gap-6 print:break-inside-avoid #{spacing}", shading ].compact.join(" "), data: data)
+      end
+
+      def section_content(section, editing)
+        rows = safe_join(section["rows"].map { |row| drawn_row(row, editing) })
+        width = section["width"]
+        return rows if width.nil? || width == "none"
+
+        tag.div(rows, class: "ks-page #{Keystone::Ui::PageComponent::MAX_WIDTH_CLASSES.fetch(width.to_sym)} w-full flex flex-col gap-6 #{SIZED_SECTION_PADDING}")
       end
 
       def drawn_row(row, editing)
@@ -52,10 +80,25 @@ module KeystoneUi
       end
 
       def edited_element(element)
+        return missing_element(element) unless KeystoneUi::Pages.catalog.find(element["key"])
+
         wrapped_element(element, data: { element_id: element["id"], hidden: hidden?(element) || nil }.compact)
       end
 
+      def reported_missing(element)
+        Rails.error.report(InvalidDocument.new("No element is registered as #{element["key"]}"), handled: true,
+          context: { page_id: @drawn_page_id, element_key: element["key"] })
+        nil
+      end
+
+      def missing_element(element)
+        tag.div("No longer offered: #{element["key"]}", class: "ks-pages-element ks-hint rounded-md border-2 border-dashed border-(--ks-color-border-strong) p-3",
+          data: { element_id: element["id"], missing_element: true })
+      end
+
       def drawn_element(element)
+        return reported_missing(element) unless KeystoneUi::Pages.catalog.find(element["key"])
+
         wrapped_element(element) unless hidden?(element)
       end
 
@@ -75,6 +118,7 @@ module KeystoneUi
         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 ERB::Util.html_escape(value) if field[:as] == :escaped_text
         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
@@ -91,7 +135,7 @@ module KeystoneUi
       end
 
       def filled(stored)
-        return stored.presence unless stored.is_a?(Hash)
+        return stored.presence unless stored.is_a?(Hash) && stored.key?("value")
 
         (@drawn_values || {})[stored["value"]].presence || stored["fallback"].presence || ""
       end

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

@@ -23,6 +23,7 @@ module KeystoneUi
           samples: Values.samples_for(page),
           sample: chosen_sample(page),
           samples_url: manage_page_sample_path(page),
+          title_url: manage_page_title_path(page),
           access_exceptions: KeystoneUi::Pages.access_exceptions.invert.to_a,
           access_exception: page.access_exception,
           access_exception_url: manage_page_access_exception_path(page),

data/app/javascript/keystone_ui_pages/ElementFields.jsx

@@ -6,6 +6,7 @@ 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"
+import RichTextField from "./RichTextField"
 
 const FieldInput = ({ field, value, onChange }) => {
   const shown = value ?? field.default ?? ""
@@ -59,7 +60,9 @@ export default function ElementFields({ element, definition, alignments, valueNa
           {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}
+          {field.kind === "rich_text" &&
+            <RichTextField key={JSON.stringify(element.fields[field.key] ?? null)} field={field} value={element.fields[field.key]} onChange={onChange} />}
+          {field.kind !== "list" && field.kind !== "data" && field.kind !== "rich_text" && <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]) &&

data/app/javascript/keystone_ui_pages/LayoutPanel.jsx

@@ -5,7 +5,7 @@ import Alert from "keystone_ui-react/src/Alert.jsx"
 import { Label } from "keystone_ui-react/src/FieldText.jsx"
 
 const LABELS = {
-  section: { spacing: "Section spacing" },
+  section: { spacing: "Section spacing", background: "Section background", width: "Section width" },
   row: { gap: "Row gap" },
   column: { wide: "Width on wide screens", narrow: "Width on narrow screens", align: "Vertical alignment" }
 }

data/app/javascript/keystone_ui_pages/PageEditor.jsx

@@ -2,13 +2,14 @@ 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, chooseAccessException, chooseSample, duplicateNode, moveNode, removeNode, setField, showWhen, stepHistory } from "./operations"
+import { addColumn, addElement, addRow, addSection, arrange, bindField, chooseAccessException, chooseSample, duplicateNode, moveNode, removeNode, setField, setTitle, 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 PageTitle from "./PageTitle"
 import AccessExceptionChoice from "./AccessExceptionChoice"
 import ShowWhen from "./ShowWhen"
 import ThemeMode from "./ThemeMode"
@@ -29,7 +30,7 @@ const innermost = (target) => NODES.map(([selector, kind]) => [target.closest(se
 
 const PLACED_SENSORS = [PointerSensor.configure({ preventActivation: () => false }), KeyboardSensor]
 
-export default function PageEditor({ name, publish_url, unpublish_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, access_exceptions = [], access_exception, access_exception_url, history_url, live_url, back_url, undo_url, redo_url, undoable: couldUndo, redoable: couldRedo, token }) {
+export default function PageEditor({ name, publish_url, unpublish_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, title_url, access_exceptions = [], access_exception, access_exception_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)
@@ -245,6 +246,7 @@ export default function PageEditor({ name, publish_url, unpublish_url, elements,
         <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 && !definition && <PageTitle key={document.title ?? ""} title={document.title} onChange={(title) => setTitle(title_url, token, title).then(shown, refused)} />}
           {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}

data/app/javascript/keystone_ui_pages/PageTitle.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import Input from "keystone_ui-react/src/Input.jsx"
+import { Label } from "keystone_ui-react/src/FieldText.jsx"
+
+export default function PageTitle({ title, onChange }) {
+  const shown = title ?? ""
+
+  return (
+    <div className="flex flex-col gap-1">
+      <Label htmlFor="ks-pages-page-title">Page title</Label>
+      <Input id="ks-pages-page-title" type="text" defaultValue={shown}
+        onBlur={(event) => event.target.value !== shown && onChange(event.target.value)} />
+      <p className="ks-hint">Shown in the browser tab once the page is published</p>
+    </div>
+  )
+}

data/app/javascript/keystone_ui_pages/RichTextField.jsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from "react"
+import Input from "keystone_ui-react/src/Input.jsx"
+import Button from "keystone_ui-react/src/Button.jsx"
+import { Label } from "keystone_ui-react/src/FieldText.jsx"
+import { LexicalComposer } from "@lexical/react/LexicalComposer"
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
+import { ContentEditable } from "@lexical/react/LexicalContentEditable"
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin"
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { LinkNode, TOGGLE_LINK_COMMAND, $isLinkNode } from "@lexical/link"
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html"
+import { $getRoot, $getSelection, $isRangeSelection, $createParagraphNode, $createTextNode, TextNode } from "lexical"
+
+const filled = (stored) => (editor) => {
+  const root = $getRoot()
+  if (stored && typeof stored === "object" && "html" in stored) {
+    const dom = new DOMParser().parseFromString(stored.html, "text/html")
+    root.append(...$generateNodesFromDOM(editor, dom))
+  } else {
+    root.append($createParagraphNode().append($createTextNode(stored ?? "")))
+  }
+}
+
+const selectedLink = () => {
+  const selection = $getSelection()
+  if (!$isRangeSelection(selection)) return null
+  const node = selection.anchor.getNode()
+  return $isLinkNode(node) ? node : $isLinkNode(node.getParent()) ? node.getParent() : null
+}
+
+const PlainWords = () => {
+  const [editor] = useLexicalComposerContext()
+  useEffect(() => editor.registerNodeTransform(TextNode, (node) => {
+    if (node.getFormat() !== 0) node.setFormat(0)
+    if (node.getStyle() !== "") node.setStyle("")
+  }), [editor])
+  return null
+}
+
+const LinkControls = () => {
+  const [editor] = useLexicalComposerContext()
+  const [address, setAddress] = useState(null)
+
+  const opened = () => editor.getEditorState().read(() => setAddress(selectedLink()?.getURL() ?? ""))
+  const saved = () => {
+    editor.dispatchCommand(TOGGLE_LINK_COMMAND, address || null)
+    setAddress(null)
+  }
+  const removed = () => {
+    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+    setAddress(null)
+  }
+
+  if (address === null) return <Button type="button" variant="secondary" onClick={opened}>Link</Button>
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Label htmlFor="ks-pages-link-address">Link address</Label>
+      <Input id="ks-pages-link-address" type="url" value={address} onChange={(event) => setAddress(event.target.value)} />
+      <div className="flex gap-2">
+        <Button type="button" onClick={saved}>Save link</Button>
+        <Button type="button" variant="secondary" onClick={removed}>Remove link</Button>
+      </div>
+    </div>
+  )
+}
+
+const SavedOnLeave = ({ fieldKey, onChange, children }) => {
+  const [editor] = useLexicalComposerContext()
+  const left = (event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) return
+    editor.getEditorState().read(() => onChange(fieldKey, { html: $generateHtmlFromNodes(editor, null) }))
+  }
+  return <div data-rich-text-field={fieldKey} onBlur={left} className="flex flex-col gap-2">{children}</div>
+}
+
+export default function RichTextField({ field, value, onChange }) {
+  const config = {
+    namespace: `ks-pages-${field.key}`,
+    nodes: [LinkNode],
+    editorState: filled(value ?? field.default),
+    onError: (error) => { throw error }
+  }
+
+  return (
+    <LexicalComposer initialConfig={config}>
+      <SavedOnLeave fieldKey={field.key} onChange={onChange}>
+        <RichTextPlugin
+          contentEditable={<ContentEditable id={`ks-pages-field-${field.key}`} className="ks-input min-h-24" />}
+          ErrorBoundary={LexicalErrorBoundary} />
+        <HistoryPlugin />
+        <LinkPlugin />
+        <PlainWords />
+        <LinkControls />
+      </SavedOnLeave>
+    </LexicalComposer>
+  )
+}

data/app/javascript/keystone_ui_pages/operations.js

@@ -7,6 +7,8 @@ const sent = (url, token, method, body = {}) =>
 
 export const addElement = (url, token, key, columnId) => sent(url, token, "POST", { key, column_id: columnId })
 
+export const setTitle = (url, token, title) => sent(url, token, "POST", { title })
+
 export const setField = (url, token, elementId, field, value) => sent(`${url}/${elementId}`, token, "PATCH", { field, value })
 
 export const addSection = (url, token) => sent(url, token, "POST", {})

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

@@ -8,6 +8,10 @@ module KeystoneUi
       enum :status, { live: "live", superseded: "superseded" }
 
       belongs_to :page, class_name: "KeystoneUi::Pages::Page", inverse_of: :versions
+
+      def title
+        document["title"]
+      end
     end
   end
 end

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

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

data/config/routes.rb

@@ -20,6 +20,7 @@ KeystoneUi::Pages::Engine.routes.draw do
       end
       resource :document, only: %i[update]
       post :sample, to: "samples#update"
+      post :title, to: "titles#update"
       post :access_exception, to: "access_exceptions#update"
       post :undo, to: "edit_history#undo"
       post :redo, to: "edit_history#redo"

data/lib/keystone_ui/pages/keystone_elements.rb

@@ -23,8 +23,8 @@ module KeystoneUi
                     { key: :note, label: "Note", kind: :text } ])
         catalog.register(key: :label, name: "Label", component: :ui_caption, icon: :tag, group: "Text",
           fields: [ { key: :text, label: "Text", kind: :text, default: "Label" } ])
-        catalog.register(key: :paragraph, name: "Paragraph", component: :ui_paragraph, icon: :text, group: "Text",
-          fields: [ { key: :text, label: "Text", kind: :long_text, default: "Write the text of this paragraph here." } ])
+        catalog.register(key: :paragraph, name: "Paragraph", component: :pages_paragraph, icon: :text, group: "Text",
+          fields: [ { key: :text, label: "Text", kind: :rich_text, default: "Write the text of this paragraph here." } ])
         catalog.register(key: :hero, name: "Hero", component: :ui_hero, icon: :heading, group: "Text",
           fields: [ { key: :title, label: "Title", kind: :text, default: "Headline" },
                     { key: :subtitle, label: "Subtitle", kind: :long_text },
@@ -66,7 +66,7 @@ module KeystoneUi
                     { key: :subtitle, label: "Subtitle", kind: :text },
                     { key: :features, label: "Features", kind: :list,
                       entry: [ { key: :title, label: "Title", kind: :text }, { key: :description, label: "Description", kind: :long_text },
-                               { key: :icon, label: "Icon", kind: :text, hidden: true,
+                               { key: :icon, label: "Icon", kind: :text, as: :escaped_text,
                                  default: '<svg viewBox="0 0 24 24" class="size-6 fill-none stroke-current stroke-2"><path d="M5 12l5 5L20 7"/></svg>' } ],
                       default: [ { "title" => "Fast", "description" => "Pages load quickly." },
                                  { "title" => "Clear", "description" => "Every page reads plainly." },

data/lib/keystone_ui/pages/operations.rb

@@ -14,13 +14,13 @@ module KeystoneUi
     module Operations
       WIDTHS = %w[1/1 3/4 2/3 1/2 1/3 1/4].freeze
       ARRANGEMENTS = {
-        section: { "spacing" => %w[sm md lg] },
+        section: { "spacing" => %w[sm md lg], "background" => %w[plain shaded], "width" => %w[none sm md lg xl] },
         row: { "gap" => %w[sm md lg xl] },
         column: { "wide" => WIDTHS, "narrow" => WIDTHS, "align" => %w[top center bottom] },
         element: { "align" => %w[stretch start center end] }
       }.freeze
       DEFAULTS = {
-        section: { "spacing" => "md" },
+        section: { "spacing" => "md", "background" => "plain", "width" => "none" },
         row: { "gap" => "md" },
         column: { "narrow" => "1/1", "align" => "top" },
         element: { "align" => "stretch" }
@@ -36,6 +36,10 @@ module KeystoneUi
         end
       end
 
+      def title(document, text)
+        copied(document).tap { |changed| changed["title"] = text.to_s.strip.presence }
+      end
+
       def add_section(document)
         copied(document).tap { |changed| changed["sections"] << Document.section }
       end

data/lib/keystone_ui/pages/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module Pages
-    VERSION = "0.3.0"
+    VERSION = "0.4.1"
   end
 end

data/the_local/agents/keystone_ui-pages-develop.md

@@ -257,8 +257,11 @@ The catalog offers these Keystone UI components by default: `button`,
 
    The method must be reachable in the engine's views and in any host view that
    calls `keystone_ui_page`. A `helper_method` on the base controller covers
-   both. Leaving out an element that pages already use makes those pages fail
-   to draw, so search the pages' documents for its key before leaving it out.
+   both. A page that holds an element the catalog no longer offers still
+   draws its other elements for visitors, marks the missing one in the editor
+   as no longer offered, and reports the page's id and the element's key
+   through `Rails.error`, so search the pages' documents for its key before
+   leaving it out.
 
 ## Conventions
 
@@ -278,6 +281,29 @@ The catalog offers these Keystone UI components by default: `button`,
   an Archive button, and a published page also links to View live and, when
   Chrome or Chromium is found, to its PDF. Show archived lists archived pages
   instead, each with a Restore button.
+- **A page's title** is set in the builder's settings panel when nothing is
+  selected, and reaches visitors when the page is published. The engine's
+  public address sets it with `content_for(:title)`, so a host layout that
+  shows `content_for(:title)` in its `<title>` gets it. A host drawing a page
+  in its own view reads `page.live_version&.title`, which is nil when the page
+  has none.
+- **A paragraph's text is rich text.** Editors type it in the builder and
+  link selected words with the Link button, and pasted text keeps only its
+  words and links. It is stored as `{ "html" => "..." }` and cleaned each time
+  it is drawn, keeping paragraphs, line breaks and links with safe addresses.
+  A link to an `http` or `https` address opens in a new tab. A paragraph saved
+  earlier as a plain string still draws as escaped text.
+- **A feature grid's icons** are typed per feature in the builder, usually as
+  an emoji. A typed icon is drawn as text, so markup or a script in it is shown
+  and never run. A feature left without an icon shows the check mark.
+- **A section's background and width** are set in the builder's layout panel.
+  A shaded section fills the full width of the page with keystone_ui's
+  `--ks-color-fill-muted` colour, and its dark value in a dark theme. A section
+  with a width of `sm`, `md`, `lg` or `xl` holds its rows at keystone_ui's
+  page width of that name with its page side padding, padded above and below
+  from `--ks-spacing`. The page builder has no setting of its own for these:
+  a host changes them through its keystone_ui theme values. A section saved
+  without either draws as it did before.
 - **A page's settings** at `/pages/manage/pages/:id/edit` change its name, slug
   and place after it is created. A slug another page of the same owner uses, or
   a place the host does not name, is refused with a message and changes nothing.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-pages
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.1
 platform: ruby
 authors:
 - Tyler Schneider
@@ -90,6 +90,7 @@ files:
 - app/controllers/keystone_ui/pages/manage/rows_controller.rb
 - app/controllers/keystone_ui/pages/manage/samples_controller.rb
 - app/controllers/keystone_ui/pages/manage/sections_controller.rb
+- app/controllers/keystone_ui/pages/manage/titles_controller.rb
 - app/controllers/keystone_ui/pages/manage/versions_controller.rb
 - app/controllers/keystone_ui/pages/pages_controller.rb
 - app/helpers/keystone_ui/pages/drawing_helper.rb
@@ -103,6 +104,8 @@ files:
 - app/javascript/keystone_ui_pages/ListField.jsx
 - app/javascript/keystone_ui_pages/LookChoice.jsx
 - app/javascript/keystone_ui_pages/PageEditor.jsx
+- app/javascript/keystone_ui_pages/PageTitle.jsx
+- app/javascript/keystone_ui_pages/RichTextField.jsx
 - app/javascript/keystone_ui_pages/SampleChoice.jsx
 - app/javascript/keystone_ui_pages/SelectionPath.jsx
 - app/javascript/keystone_ui_pages/SelectionToolbar.jsx