alembic 0.1.0

data/app/javascript/alembic/canvas/ConnectorLayer.jsx

@@ -0,0 +1,31 @@
+import React from "react"
+import Connector from "./Connector"
+
+const ConnectorLayer = ({ links, extent, dragging, onInsert, onRemove, onDrop }) => (
+  <>
+    <svg width={extent.width} height={extent.height}
+         style={{ position: "absolute", top: 0, left: 0, pointerEvents: "none", zIndex: 1 }}>
+      <defs>
+        <marker id="alembic-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto">
+          <path d="M 0 0 L 10 5 L 0 10 z" className="fill-gray-400 dark:fill-zinc-500" />
+        </marker>
+      </defs>
+      {links.map((link) => (
+        <path key={link.id} data-link={link.id} className="stroke-gray-400 dark:stroke-zinc-500" fill="none" strokeWidth="1.5" markerEnd="url(#alembic-arrow)" d={link.path} />
+      ))}
+    </svg>
+
+    {links.filter((link) => link.label).map((link) => (
+      <div key={`${link.id}-label`} data-link-label={link.id} className="bg-surface-50 text-gray-500 dark:bg-surface-950 dark:text-gray-400"
+           style={{ position: "absolute", left: link.midX - 10, top: link.midY - 18, zIndex: 3,
+                    fontSize: 11, padding: "0 3px" }}>{link.label}</div>
+    ))}
+
+    {links.filter((link) => !link.placeholder).map((link) => (
+      <Connector key={link.id} link={link} dragging={Boolean(dragging)}
+                 onInsert={() => onInsert(link)} onRemove={() => onRemove(link)} onDrop={() => onDrop(link)} />
+    ))}
+  </>
+)
+
+export default ConnectorLayer

data/app/javascript/alembic/canvas/Control.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { toggled } from "./choices"
+import Input from "keystone_ui-react/src/Input.jsx"
+import Select from "keystone_ui-react/src/Select.jsx"
+import Checkbox from "keystone_ui-react/src/Checkbox.jsx"
+
+const offered = (choices) =>
+  (choices || []).map((choice) => (typeof choice === "object" ? choice : { value: choice, label: choice }))
+
+const Control = ({ type, value, choices, onChange, onSettle }) => {
+  if (type === "boolean") return <Checkbox checked={Boolean(value)} onChange={(e) => onSettle(e.target.checked)} />
+
+  if (type === "select" || type === "previous_step" || type === "from_step") {
+    return <Select className="mb-3" value={value ?? ""} onChange={(e) => onSettle(e.target.value)}>
+      <option value=""></option>
+      {offered(choices).map((choice) => <option key={choice.value} value={choice.value}>{choice.label}</option>)}
+    </Select>
+  }
+
+  if (type === "multi_select") {
+    const chosen = Array.isArray(value) ? value : []
+    const toggle = (choice) => onSettle(toggled(chosen, choice))
+    return <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+      {(choices || []).map((choice) => (
+        <label key={choice} style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
+          <Checkbox checked={chosen.includes(choice)} onChange={() => toggle(choice)} />
+          <span>{choice}</span>
+        </label>
+      ))}
+    </div>
+  }
+
+  if (type === "integer" || type === "float") {
+    return <Input className="mb-3" type="number" step={type === "integer" ? "1" : "any"} value={value ?? ""}
+                  onChange={(e) => onChange(e.target.value)} onBlur={(e) => onSettle(e.target.value)} />
+  }
+
+  return <Input className="mb-3" type="text" value={value ?? ""}
+                onChange={(e) => onChange(e.target.value)} onBlur={(e) => onSettle(e.target.value)} />
+}
+
+export default Control

data/app/javascript/alembic/canvas/Inspector.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from "react"
+import Control from "./Control"
+import Records from "./Records"
+import Panel from "keystone_ui-react/src/Panel.jsx"
+import Button from "keystone_ui-react/src/Button.jsx"
+import { Label } from "keystone_ui-react/src/FieldText.jsx"
+
+const panel = { width: 280, padding: 20, overflowY: "auto" }
+
+const Inspector = ({ node, fields, holds, labels, recordLabels, choices, onSave, onDelete, onClose }) => {
+  const [ draft, setDraft ] = useState(node.config)
+  useEffect(() => setDraft(node.config), [ node.id, node.config ])
+
+  const settle = (next) => {
+    setDraft(next)
+    if (JSON.stringify(next) !== JSON.stringify(node.config)) onSave(next)
+  }
+
+  return (
+    <Panel as="aside" style={panel} data-inspector>
+      <div style={{ display: "flex", alignItems: "start", justifyContent: "space-between", gap: 8 }}>
+        <h2 style={{ fontWeight: 600, marginBottom: 2 }}>{node.label}</h2>
+        <button title="Close" onClick={onClose} className="text-gray-500 dark:text-gray-400"
+                style={{ border: "none", background: "none", cursor: "pointer", fontSize: 18, lineHeight: 1 }}>×</button>
+      </div>
+      <p className="text-gray-500 dark:text-gray-400" style={{ fontSize: 11, marginBottom: 16 }}>{node.id} · {node.type}</p>
+      {Object.entries(fields).map(([ name, type ]) => (
+        <Label key={name}>
+          <span style={{ display: "block", marginBottom: 3 }}>{labels[name] || name}</span>
+          {type === "list"
+            ? <Records holds={holds[name] || {}} labels={recordLabels[name] || {}} rows={draft[name]}
+                       onChange={(next) => setDraft({ ...draft, [name]: next })}
+                       onSettle={(next) => settle({ ...draft, [name]: next })} />
+            : <Control type={type} value={draft[name]} choices={choices[name]}
+                       onChange={(next) => setDraft({ ...draft, [name]: next })}
+                       onSettle={(next) => settle({ ...draft, [name]: next })} />}
+        </Label>
+      ))}
+      <Button variant="danger" size="sm" className="w-full" onClick={onDelete}>Delete step</Button>
+    </Panel>
+  )
+}
+
+export default Inspector

data/app/javascript/alembic/canvas/Panel.jsx

@@ -0,0 +1,67 @@
+import React from "react"
+import KeystonePanel from "keystone_ui-react/src/Panel.jsx"
+import Button from "keystone_ui-react/src/Button.jsx"
+import Input from "keystone_ui-react/src/Input.jsx"
+import Textarea from "keystone_ui-react/src/Textarea.jsx"
+import { Label } from "keystone_ui-react/src/FieldText.jsx"
+import { worded } from "./changes"
+import { standing } from "./flow"
+
+const sheet = { width: 280, padding: 20, overflowY: "auto" }
+const heading = { fontWeight: 600, marginBottom: 6, marginTop: 14 }
+const item = { fontSize: 12, marginBottom: 4, lineHeight: 1.4 }
+const caption = { display: "block", marginBottom: 3 }
+
+const settling = (flow, name, onSaveDetails) => (event) => {
+  if (event.target.value !== (flow[name] ?? "")) onSaveDetails({ [name]: event.target.value })
+}
+
+const Panel = ({ flow, changes, problems, refusal, notice, onCreate, onPublish, onSaveDetails, onClose }) => (
+  <KeystonePanel as="aside" style={sheet} data-builder-panel>
+    <div style={{ display: "flex", alignItems: "start", justifyContent: "space-between", gap: 8 }}>
+      <h2 style={{ fontWeight: 600 }} data-flow-name>{flow.title || flow.slug}</h2>
+      <button title="Close" onClick={onClose} className="text-gray-500 dark:text-gray-400"
+              style={{ border: "none", background: "none", cursor: "pointer", fontSize: 18, lineHeight: 1 }}>×</button>
+    </div>
+    <a className="text-accent-600 dark:text-accent-400" style={{ fontSize: 12, display: "block" }} href={flow.history_url} data-history>{standing(flow)}</a>
+
+    <h2 style={heading}>Problems</h2>
+    {refusal && <p className="text-red-800 dark:text-red-400" style={{ ...item, fontWeight: 600 }} data-refusal>{refusal}</p>}
+    {notice && !refusal && <p className="text-emerald-800 dark:text-emerald-400" style={{ ...item, fontWeight: 600 }} data-notice>{notice}</p>}
+    {problems.length === 0 && !refusal
+      ? <p className="text-gray-500 dark:text-gray-400" style={{ fontSize: 12 }}>Nothing wrong with this flow.</p>
+      : problems.map((problem) => (
+          <p key={`${problem.node}-${problem.problem}`} className="text-amber-700 dark:text-amber-400" style={item} data-problem>⚠ {worded(problem)}</p>
+        ))}
+
+    <h2 style={heading}>Changes since the last version</h2>
+    {changes.length === 0
+      ? <p className="text-gray-500 dark:text-gray-400" style={{ fontSize: 12 }}>Nothing has changed.</p>
+      : changes.map((change, at) => <p key={at} style={item} data-change>{change}</p>)}
+
+    <h2 style={heading}>Details</h2>
+    <Label>
+      <span style={caption}>Title</span>
+      <Input className="mb-3" defaultValue={flow.title ?? ""} onBlur={settling(flow, "title", onSaveDetails)} data-flow-title />
+    </Label>
+
+    <Label>
+      <span style={caption}>Summary</span>
+      <Textarea className="mb-3" rows={4} defaultValue={flow.summary ?? ""} onBlur={settling(flow, "summary", onSaveDetails)} data-flow-summary />
+    </Label>
+
+    <Label>
+      <span style={caption}>Start label</span>
+      <Input className="mb-3" defaultValue={flow.start_label ?? ""} onBlur={settling(flow, "start_label", onSaveDetails)} data-flow-start-label />
+    </Label>
+
+    <div style={{ marginTop: 16 }}>
+      <Button variant="secondary" size="sm" className="w-full mb-1.5" onClick={onCreate} data-create-version>Create version</Button>
+      <Button size="sm" className="w-full mb-1.5" onClick={onPublish} data-publish>Publish</Button>
+      <Button variant="secondary" size="sm" className="w-full mb-1.5" href={flow.definition_url} data-definition>Definition</Button>
+      <Button variant="secondary" size="sm" className="w-full mb-1.5" href={flow.details_url} data-details>Edit details</Button>
+    </div>
+  </KeystonePanel>
+)
+
+export default Panel

data/app/javascript/alembic/canvas/Placeholder.jsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { CARD } from "./styles"
+
+const waiting = {
+  width: CARD, boxSizing: "border-box", padding: "10px 14px", borderRadius: 8, textAlign: "center", fontSize: 12, cursor: "pointer"
+}
+
+const open = "border-2 border-dashed border-amber-500 bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300"
+const receiving = "border-2 border-dashed border-accent-600 bg-accent-50 text-accent-800 dark:bg-accent-950 dark:text-accent-200"
+
+const Placeholder = ({ node, dragging, onFill, onDrop }) => (
+  <div ref={node.ref} data-placeholder={node.id}
+       title={`Choose the step “${node.label}” should lead to`}
+       onClick={onFill}
+       onDragOver={(event) => { if (dragging) { event.preventDefault(); event.dataTransfer.dropEffect = "move" } }}
+       onDrop={(event) => { event.preventDefault(); onDrop() }}
+       className={dragging ? receiving : open}
+       style={waiting}>
+    <div style={{ fontWeight: 600 }}>{node.label}</div>
+    <div style={{ fontSize: 11 }}>{dragging ? "drop a step here" : "leads nowhere yet — click to choose"}</div>
+  </div>
+)
+
+export default Placeholder

data/app/javascript/alembic/canvas/Port.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+
+const open = "border border-amber-500 bg-white text-amber-700 dark:bg-zinc-900 dark:text-amber-400"
+const joined = "border border-gray-300 bg-white text-gray-500 dark:border-zinc-600 dark:bg-zinc-900 dark:text-gray-400"
+const choosing = "border border-accent-600 bg-accent-600 text-white"
+
+const Port = ({ name, connected, armed, onArm, connecting }) => (
+  <button onClick={(event) => { if (connecting) return; event.stopPropagation(); onArm(event) }}
+          title={armed ? "Now choose a step to connect to" : "Connect this branch"}
+          className={armed ? choosing : connected ? joined : open}
+          style={{
+            padding: "1px 8px", marginRight: 4, borderRadius: 999, fontSize: 11, cursor: "pointer"
+          }}>{name || "next"}</button>
+)
+
+export default Port

data/app/javascript/alembic/canvas/Records.jsx

@@ -0,0 +1,34 @@
+import React from "react"
+import Control from "./Control"
+import { amended } from "./rows"
+import Button from "keystone_ui-react/src/Button.jsx"
+
+const Records = ({ holds, labels, rows, onChange, onSettle }) => {
+  const kept = Array.isArray(rows) ? rows : []
+  const amend = (index, name, next, settle) => {
+    const updated = amended(kept, index, name, next)
+    settle ? onSettle(updated) : onChange(updated)
+  }
+
+  return (
+    <div style={{ marginBottom: 12 }}>
+      {kept.map((row, index) => (
+        <div key={index} className="rounded-md border border-gray-200 dark:border-zinc-700" style={{ padding: "8px 8px 2px", marginBottom: 6 }}>
+          {Object.entries(holds).map(([ name, type ]) => (
+            <label key={name} style={{ display: "block" }}>
+              <span className="text-gray-500 dark:text-gray-400" style={{ display: "block", marginBottom: 2, fontSize: 11 }}>{(labels || {})[name] || name}</span>
+              <Control type={type} value={row[name]}
+                       onChange={(next) => amend(index, name, next, false)}
+                       onSettle={(next) => amend(index, name, next, true)} />
+            </label>
+          ))}
+          <Button variant="secondary" size="sm" className="mb-1.5"
+                  onClick={() => onSettle(kept.filter((_, at) => at !== index))}>Remove</Button>
+        </div>
+      ))}
+      <Button variant="secondary" size="sm" className="w-full" onClick={() => onSettle([ ...kept, {} ])}>Add</Button>
+    </div>
+  )
+}
+
+export default Records

data/app/javascript/alembic/canvas/StepCard.jsx

@@ -0,0 +1,57 @@
+import React from "react"
+import Port from "./Port"
+import { CARD } from "./styles"
+
+const card = { width: CARD, boxSizing: "border-box", borderRadius: 8 }
+
+const bookendCard = { padding: "8px 14px", textAlign: "center", fontWeight: 600 }
+
+const named = { fontWeight: 600, lineHeight: 1.3 }
+
+const edge = (target, troubled, selected) => {
+  const lift = selected ? "ring-4 ring-accent-600/15" : "shadow-sm"
+  if (target || (selected && !troubled)) return `border-accent-600 ${lift}`
+  if (troubled) return `border-red-600 ${lift}`
+  return "border-gray-300 shadow-sm dark:border-zinc-700"
+}
+
+const StepCard = ({ node, selected, armed, connecting, onSelect, onArm, onDragEnd, onDragStart }) => {
+  const bookend = node.begins_here || node.ends_here
+  const pinned = node.begins_here
+  const ports = node.ends_here ? [] : node.ports
+  const target = connecting && !pinned
+
+  return (
+    <div ref={node.ref}
+         data-step={node.id}
+         draggable={!pinned}
+         onDragStart={(event) => { event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("text/plain", node.id); onDragStart() }}
+         onDragEnd={onDragEnd}
+         onClick={onSelect}
+         className={`bg-white border-2 dark:bg-zinc-900 ${edge(target, node.violations.length > 0, selected)}`}
+         style={{
+           ...card,
+           padding: bookend ? 0 : "12px 14px",
+           cursor: pinned ? "default" : connecting ? "crosshair" : "grab"
+         }}>
+      {bookend && <div className="text-gray-500 dark:text-gray-400" style={bookendCard}>{node.label}</div>}
+      {!bookend && <div style={named}>{node.label}</div>}
+      {!bookend && <div className="text-gray-500 dark:text-gray-400" style={{ fontSize: 11, marginTop: 2 }}>{node.type}</div>}
+      {node.violations.map((violation) => (
+        <div key={violation.problem + violation.detail} className="text-red-600 dark:text-red-400" style={{ fontSize: 11, padding: "0 14px 6px" }}>
+          {violation.problem.replace(/_/g, " ")}{violation.detail ? `: ${violation.detail}` : ""}
+        </div>
+      ))}
+      {ports.length > 0 && (
+        <div style={{ padding: node.begins_here ? "0 14px 8px" : "10px 0 0" }}>
+          {ports.map((port) => (
+            <Port key={port} name={port} connected={node.connected.includes(port)}
+                  connecting={connecting} armed={armed === port} onArm={(event) => onArm(port, event)} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default StepCard

data/app/javascript/alembic/canvas/Toolbar.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import Button from "keystone_ui-react/src/Button.jsx"
+
+const round = { width: 24, height: 24, padding: 0, fontSize: 15, lineHeight: "15px" }
+
+const Stepper = ({ label, title, idle, enabled, onUse }) => (
+  <Button variant="secondary" size="sm" title={enabled ? title : idle} disabled={!enabled} onClick={onUse}
+          style={{ opacity: enabled ? 1 : 0.4, cursor: enabled ? "pointer" : "default" }}>{label}</Button>
+)
+
+const Toolbar = ({ undoable, redoable, onAdd, onUndo, onRedo }) => (
+  <div style={{ position: "absolute", top: 16, left: 16, zIndex: 5, display: "flex", gap: 8 }}>
+    <Button variant="secondary" className="rounded-full" style={round} title="Add a step" onClick={onAdd}>+</Button>
+    <Stepper label="↶ Undo" title="Undo the last change" idle="Nothing to undo" enabled={undoable} onUse={onUndo} />
+    <Stepper label="↷ Redo" title="Redo the change you undid" idle="Nothing to redo" enabled={redoable} onUse={onRedo} />
+  </div>
+)
+
+export default Toolbar

data/app/javascript/alembic/canvas/TypePicker.jsx

@@ -0,0 +1,21 @@
+import React from "react"
+import Panel from "keystone_ui-react/src/Panel.jsx"
+import Button from "keystone_ui-react/src/Button.jsx"
+
+const TypePicker = ({ entries, at, onPick, onConnect, onDismiss }) => (
+  <Panel className="shadow-lg" style={{ position: "absolute", zIndex: 9, top: at.y, left: at.x, width: 210, padding: 8, borderRadius: 8 }}>
+    <p className="text-gray-500 dark:text-gray-400" style={{ margin: "0 0 6px", fontSize: 11 }}>Add a step</p>
+    {entries.map((entry) => (
+      <Button key={entry.type} variant="secondary" size="sm" className="w-full mb-1.5 flex-col" onClick={() => onPick(entry)}>
+        {entry.label}
+        <span className="opacity-75" style={{ display: "block", fontSize: 11 }}>{entry.type}</span>
+      </Button>
+    ))}
+    {onConnect && (
+      <Button variant="secondary" size="sm" className="w-full mb-1.5" onClick={onConnect}>Connect to a step already here</Button>
+    )}
+    <Button variant="secondary" size="sm" className="w-full" onClick={onDismiss}>Cancel</Button>
+  </Panel>
+)
+
+export default TypePicker

data/app/javascript/alembic/canvas/changes.js

@@ -0,0 +1,5 @@
+export const worded = (violation) => {
+  const problem = violation.problem.replace(/_/g, " ")
+
+  return violation.node ? `“${violation.node}” ${problem}` : problem
+}

data/app/javascript/alembic/canvas/choices.js

@@ -0,0 +1,4 @@
+export const toggled = (chosen, choice) =>
+  chosen.includes(choice) ? chosen.filter((each) => each !== choice) : [ ...chosen, choice ]
+
+export const offeredTo = (node, entry) => ({ ...(entry?.choices || {}), ...(node?.choices || {}) })

data/app/javascript/alembic/canvas/flow.js

@@ -0,0 +1,7 @@
+export const standing = ({ version, published }) => {
+  if (!version) return "No version yet"
+  if (!published) return `Version ${version} · never published`
+  if (published === version) return `Version ${version} · live`
+
+  return `Version ${version} · visitors still on ${published}`
+}

data/app/javascript/alembic/canvas/flowSender.js

@@ -0,0 +1,22 @@
+const UNREACHABLE = "Your change was not saved because the server could not be reached."
+
+export const createFlowSender = ({ base, token, fetch, onFlow, onError, onNotice }) => async (path, method, body) => {
+  const response = await fetch(base + path, {
+    method, headers: { "Content-Type": "application/json", "X-CSRF-Token": token }, body: body && JSON.stringify(body)
+  }).catch(() => null)
+  if (!response) {
+    onNotice(null)
+    return onError(UNREACHABLE)
+  }
+
+  const answered = await response.json().catch(() => ({}))
+
+  if (!response.ok) {
+    onNotice(null)
+    return onError(answered.error || "That change was refused")
+  }
+
+  onError(null)
+  onNotice(answered.notice || null)
+  onFlow(await (await fetch(base + ".json", { headers: { Accept: "application/json" } })).json())
+}

data/app/javascript/alembic/canvas/ids.js

@@ -0,0 +1,7 @@
+export const nextId = (type, taken) => {
+  const used = new Set(taken)
+  let candidate = type
+  let suffix = 2
+  while (used.has(candidate)) candidate = `${type}_${suffix++}`
+  return candidate
+}

data/app/javascript/alembic/canvas/rows.js

@@ -0,0 +1,2 @@
+export const amended = (rows, index, name, next) =>
+  rows.map((row, at) => (at === index ? { ...row, [name]: next } : row))

data/app/javascript/alembic/canvas/styles.js

@@ -0,0 +1,3 @@
+export const CARD = 240
+export const GAP_X = 40
+export const GAP_Y = 64

data/app/javascript/alembic/canvas/useConnectors.js

@@ -0,0 +1,75 @@
+import { useLayoutEffect, useState } from "react"
+
+export const anchor = (box, side, frame, surface) => {
+  const left = box.left - frame.left + surface.scrollLeft
+  const top = box.top - frame.top + surface.scrollTop
+
+  if (side === "left") return { x: left, y: top + box.height / 2 }
+  if (side === "right") return { x: left + box.width, y: top + box.height / 2 }
+  if (side === "top") return { x: left + box.width / 2, y: top }
+  return { x: left + box.width / 2, y: top + box.height }
+}
+
+export const shy = (point, side) => {
+  if (side === "top") return { x: point.x, y: point.y - 3 }
+  if (side === "left") return { x: point.x - 3, y: point.y }
+  if (side === "right") return { x: point.x + 3, y: point.y }
+  return { x: point.x, y: point.y + 3 }
+}
+
+export const drawn = (edge, a, b, lane, detour) => {
+  const path = {
+    straight: `M ${a.x} ${a.y} L ${b.x} ${b.y}`,
+    turn: `M ${a.x} ${a.y} H ${b.x} V ${b.y}`,
+    lane: `M ${a.x} ${a.y} V ${lane} H ${b.x} V ${b.y}`,
+    detour: `M ${a.x} ${a.y} H ${detour} V ${b.y} H ${b.x}`
+  }[edge.route]
+
+  return {
+    ...edge, path,
+    midX: edge.route === "detour" ? detour : (a.x + b.x) / 2,
+    midY: edge.route === "lane" ? lane : (a.y + b.y) / 2
+  }
+}
+
+const useConnectors = (flow, surface, cards, watching) => {
+  const [ links, setLinks ] = useState([])
+  const [ extent, setExtent ] = useState({ width: "100%", height: "100%" })
+
+  useLayoutEffect(() => {
+    const measure = () => {
+      const frame = surface.current?.getBoundingClientRect()
+      if (!frame) return
+
+      setExtent({ width: surface.current.scrollWidth, height: surface.current.scrollHeight })
+
+      setLinks(flow.edges.flatMap((edge) => {
+        const fromBox = cards.current[edge.source]?.getBoundingClientRect()
+        const toBox = cards.current[edge.target]?.getBoundingClientRect()
+        if (!fromBox || !toBox) return []
+
+        const a = anchor(fromBox, edge.leaves, frame, surface.current)
+        const b = shy(anchor(toBox, edge.enters, frame, surface.current), edge.enters)
+        const lane = (anchor(fromBox, "bottom", frame, surface.current).y + anchor(toBox, "top", frame, surface.current).y) / 2
+        const detour = edge.leaves === "left" ? Math.min(a.x, b.x) - 28 : Math.max(a.x, b.x) + 28
+
+        return [ drawn(edge, a, b, lane, detour) ]
+      }))
+    }
+
+    measure()
+    window.addEventListener("resize", measure)
+
+    const watcher = new ResizeObserver(measure)
+    if (surface.current) watcher.observe(surface.current)
+
+    return () => {
+      window.removeEventListener("resize", measure)
+      watcher.disconnect()
+    }
+  }, watching)
+
+  return { links, extent }
+}
+
+export default useConnectors

data/app/javascript/alembic/canvas/useFlow.js

@@ -0,0 +1,17 @@
+import { useMemo, useState } from "react"
+import { createFlowSender } from "./flowSender"
+
+const useFlow = (base, token, initial) => {
+  const [ flow, setFlow ] = useState(initial)
+  const [ error, setError ] = useState(null)
+  const [ notice, setNotice ] = useState(null)
+
+  const send = useMemo(
+    () => createFlowSender({ base, token, fetch: (...request) => window.fetch(...request), onFlow: setFlow, onError: setError, onNotice: setNotice }),
+    [ base, token ]
+  )
+
+  return { flow, error, notice, send }
+}
+
+export default useFlow

data/app/javascript/alembic/canvas.jsx

@@ -0,0 +1,13 @@
+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 Canvas from "./canvas/Canvas"
+
+register("alembic/flow-editor", Canvas)
+
+document.addEventListener("alembic:flow-named", (event) => {
+  const heading = document.querySelector("[data-flow-heading]")
+  if (heading) heading.textContent = event.detail
+})
+
+startMounting(document, createRoot)

data/app/javascript/alembic/page_builder/PageBuilder.jsx

@@ -0,0 +1,18 @@
+import React from "react"
+import Button from "keystone_ui-react/src/Button.jsx"
+import Page from "keystone_ui-react/src/Page.jsx"
+import PageHeader from "keystone_ui-react/src/PageHeader.jsx"
+import BlockGrid from "keystone_ui-blocks/src/BlockGrid.jsx"
+
+export default function PageBuilder({ base, token, name, pages, block_types, blocks, version }) {
+  return (
+    <Page>
+      <div className="sm:hidden mb-4 flex items-center justify-between gap-3">
+        <h1 className="ks-page-header-title">{name}</h1>
+        <Button href={pages} size="sm">All pages</Button>
+      </div>
+      <PageHeader title={name} actions={<Button href={pages} data-all-pages>All pages</Button>} />
+      <BlockGrid base={base} token={token} block_types={block_types} blocks={blocks} version={version} emptyMessage="This page has no blocks yet." />
+    </Page>
+  )
+}

data/app/javascript/alembic/page_builder.jsx

@@ -0,0 +1,10 @@
+import { createRoot } from "react-dom/client"
+import "react-grid-layout/css/styles.css"
+import "keystone_ui-blocks/src/block_grid.css"
+import { register } from "keystone_ui-react/src/registry.js"
+import { startMounting } from "keystone_ui-react/src/mounting.js"
+import PageBuilder from "./page_builder/PageBuilder"
+
+register("alembic/page-builder", PageBuilder)
+
+startMounting(document, createRoot)

data/app/jobs/alembic/application_job.rb

@@ -0,0 +1,4 @@
+module Alembic
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/alembic/application_mailer.rb

@@ -0,0 +1,6 @@
+module Alembic
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/alembic/application_record.rb

@@ -0,0 +1,5 @@
+module Alembic
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/alembic/asked.rb

@@ -0,0 +1,3 @@
+module Alembic
+  Asked = Data.define(:id, :text, :choices)
+end

data/app/models/alembic/choice.rb

@@ -0,0 +1,7 @@
+module Alembic
+  Choice = Data.define(:value, :label, :hint) do
+    def initialize(value:, label: nil, hint: nil)
+      super(value: value, label: label.presence || value, hint: hint)
+    end
+  end
+end

data/app/models/alembic/flow/admission.rb

@@ -0,0 +1,19 @@
+module Alembic
+  module Flow
+    module Admission
+      def self.of(diagnostic, permitted:)
+        raise NotPublished if diagnostic.nil? || diagnostic.live_definition.blank?
+        raise NotPermitted unless permitted && diagnostic.available?
+
+        diagnostic
+      end
+
+      def self.of_run(run, permitted: true)
+        raise Withdrawn if run.definition_version.withdrawn?
+        raise NotPermitted unless permitted && run.flow.available?
+
+        run
+      end
+    end
+  end
+end