easy_flow 0.1.0 → 0.2.0

data/app/javascript/easy_flow/canvas/Canvas.jsx

@@ -0,0 +1,197 @@
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import StepCard from "./StepCard"
+import Inspector from "./Inspector"
+import Placeholder from "./Placeholder"
+import { offeredTo } from "./choices"
+import TypePicker from "./TypePicker"
+import Toolbar from "./Toolbar"
+import Panel from "./Panel"
+import ConnectorLayer from "./ConnectorLayer"
+import useFlow from "./useFlow"
+import useConnectors from "./useConnectors"
+import { CARD, GAP_X, GAP_Y } from "./styles"
+import { nextId } from "./ids"
+
+const page = { display: "flex", height: "100%", minHeight: 0, fontSize: 13 }
+const scroll = { flex: 1, overflow: "auto", position: "relative" }
+const waiting = { position: "absolute", top: 56, left: 16, zIndex: 5, width: CARD + 24, padding: 12, borderRadius: 8 }
+
+const grid = { display: "grid", rowGap: GAP_Y, columnGap: 0, padding: 40, justifyContent: "center", position: "relative" }
+const notice = { position: "sticky", zIndex: 8, top: 8, margin: "8px auto 0", width: "fit-content", padding: "6px 12px", borderRadius: 6, fontSize: 12 }
+
+export const Choosing = ({ port, onCancel }) => (
+  <div className="bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-100" style={notice}>
+    Choose the step “{port || "next"}” should lead to — <button onClick={onCancel} className="text-accent-800 underline dark:text-accent-100" style={{ border: "none", background: "none", cursor: "pointer", fontSize: 12, padding: 0 }}>cancel</button>
+  </div>
+)
+
+const Canvas = ({ base, token, initial }) => {
+  const { flow, error, notice, send } = useFlow(base, token, initial)
+  const [ selected, setSelected ] = useState(null)
+  const [ adding, setAdding ] = useState(null)
+  const [ armed, setArmed ] = useState(null)
+  const [ dragging, setDragging ] = useState(null)
+  const [ showing, setShowing ] = useState(false)
+  const cards = useRef({})
+  const surface = useRef(null)
+
+  useEffect(() => {
+    const open = () => { setSelected(null); setShowing(true) }
+    document.addEventListener("easy_flow:open-flow", open)
+    return () => document.removeEventListener("easy_flow:open-flow", open)
+  }, [])
+
+  useEffect(() => {
+    if (!showing) return
+
+    const away = (event) => {
+      if (!event.target.closest("[data-builder-panel], [data-open-panel]")) setShowing(false)
+    }
+    document.addEventListener("click", away)
+    return () => document.removeEventListener("click", away)
+  }, [ showing ])
+
+  useEffect(() => {
+    document.dispatchEvent(new CustomEvent("easy_flow:flow-named", { detail: flow.flow?.title || flow.flow?.slug }))
+  }, [ flow.flow?.title, flow.flow?.slug ])
+
+  const byId = useMemo(() => Object.fromEntries(flow.nodes.map((node) => [ node.id, node ])), [ flow.nodes ])
+  const { links, extent } = useConnectors(flow, surface, cards, [ flow, selected, byId ])
+
+  const violationsFor = useMemo(() => {
+    const grouped = {}
+    flow.violations.forEach((violation) => (grouped[violation.node] ||= []).push(violation))
+    return grouped
+  }, [ flow.violations ])
+
+  const attached = flow.nodes.filter((node) => !node.loose)
+  const loose = flow.nodes.filter((node) => node.loose)
+  const rows = Math.max(0, ...attached.map((node) => node.row)) + 1
+  const columns = Math.max(0, ...attached.map((node) => node.column)) + 1
+
+  const connectTo = (target) => {
+    if (!armed) return
+
+    const [ source, port ] = armed
+    setArmed(null)
+    if (source !== target) send("/edges", "POST", { from: source, to: target, on: port || null })
+  }
+
+  const selectedNode = flow.nodes.find((node) => node.id === selected)
+  const entryFor = flow.palette.find((entry) => entry.type === selectedNode?.type)
+
+  return (
+    <div className="text-gray-900 dark:text-gray-100" style={page} onMouseUp={() => setDragging(null)}
+         onKeyDown={(event) => { if (event.key === "Escape") { setSelected(null); setArmed(null); setAdding(null) } }}
+         tabIndex={-1}>
+      <div ref={surface} className="bg-surface-50 dark:bg-surface-950" style={scroll}
+           onClick={(event) => { if (event.target === surface.current) { setSelected(null); setArmed(null); setShowing(false) } }}>
+        {armed && (
+          <Choosing port={armed[1]} onCancel={() => setArmed(null)} />
+        )}
+        <Toolbar undoable={flow.undoable} redoable={flow.redoable}
+                 onAdd={() => setAdding({ at: { x: 16, y: 52 } })}
+                 onUndo={() => { setSelected(null); send("/undo", "POST") }}
+                 onRedo={() => { setSelected(null); send("/redo", "POST") }} />
+
+        <ConnectorLayer links={links} extent={extent} dragging={dragging}
+                        onInsert={(link) => setAdding({ from: link.source, to: link.target, at: { x: link.midX + 30, y: link.midY } })}
+                        onRemove={(link) => { setSelected(null); send("/edges", "DELETE", { from: link.source, to: link.target }) }}
+                        onDrop={(link) => { const held = dragging; setDragging(null); send("/steps/" + held + "/move", "PATCH", { from: link.source, to: link.target }) }} />
+
+        {loose.length > 0 && (
+          <div data-loose className="border border-dashed border-gray-300 bg-gray-50 dark:border-zinc-700 dark:bg-zinc-900" style={waiting}>
+            <div className="text-gray-500 dark:text-gray-400" style={{ fontSize: 11, marginBottom: 6 }}>Not in the flow yet — drag one onto a connection</div>
+            {loose.map((node) => (
+              <div key={node.id} style={{ marginBottom: 8 }}>
+                <StepCard
+                  node={{
+                    ...node,
+                    ref: (element) => { cards.current[node.id] = element },
+                    violations: violationsFor[node.id] || [],
+                    connected: []
+                  }}
+                  selected={selected === node.id}
+                  armed={armed && armed[0] === node.id ? armed[1] : null}
+                  connecting={Boolean(armed)}
+                  onSelect={() => (armed ? connectTo(node.id) : setSelected(node.id))}
+                  onArm={(port, event) => { event.stopPropagation(); setArmed([ node.id, port ]) }}
+                  onDragStart={() => setDragging(node.id)}
+                  onDragEnd={() => setDragging(null)} />
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div style={{ ...grid, gridTemplateColumns: `repeat(${columns + 1}, ${(CARD + GAP_X) / 2}px)`, gridTemplateRows: `repeat(${rows}, auto)` }}>
+          {attached.map((node) => (
+            <div key={node.id} style={{ gridRow: node.row + 1, gridColumn: `${node.column + 1} / span 2`, zIndex: 2 }}>
+              {node.placeholder && (
+                <Placeholder node={{ ...node, ref: (element) => { cards.current[node.id] = element } }}
+                             dragging={Boolean(dragging)}
+                             onFill={() => setAdding({ from: node.from, on: node.on, at: { x: 16, y: 52 } })}
+                             onDrop={() => {
+                               const held = dragging
+                               setDragging(null)
+                               if (held) send("/edges", "POST", { from: node.from, to: held, on: node.on })
+                             }} />
+              )}
+              {!node.placeholder && <StepCard
+                node={{
+                  ...node,
+                  ref: (element) => { cards.current[node.id] = element },
+                  violations: violationsFor[node.id] || [],
+                  connected: flow.edges.filter((edge) => edge.source === node.id).map((edge) => edge.label || null)
+                }}
+                selected={node.id === selected}
+                armed={armed && armed[0] === node.id ? armed[1] : null}
+                connecting={Boolean(armed) && armed[0] !== node.id}
+                onSelect={() => (armed ? connectTo(node.id) : setSelected(node.id))}
+                onArm={(port, event) => {
+                  const frame = surface.current.getBoundingClientRect()
+                  setAdding({
+                    from: node.id, on: port,
+                    at: { x: event.clientX - frame.left + surface.current.scrollLeft + 8,
+                          y: event.clientY - frame.top + surface.current.scrollTop + 8 }
+                  })
+                }}
+                onDragEnd={() => setDragging(null)}
+                onDragStart={() => setDragging(node.id)}
+              />}
+            </div>
+          ))}
+        </div>
+
+        {adding && (
+          <TypePicker entries={flow.palette} at={adding.at} onDismiss={() => setAdding(null)}
+                      onConnect={adding.on !== undefined ? () => { setArmed([ adding.from, adding.on ]); setAdding(null) } : null}
+                      onPick={(entry) => {
+                        const where = adding
+                        setAdding(null)
+                        send("/steps", "POST", { id: nextId(entry.type, flow.nodes.map((node) => node.id)), type: entry.type, from: where.from, to: where.to, on: where.on })
+                      }} />
+        )}
+      </div>
+
+      {showing && !selectedNode && (
+        <Panel flow={flow.flow || {}} changes={flow.changes || []} problems={flow.violations} refusal={error} notice={notice}
+               onClose={() => setShowing(false)}
+               onCreate={() => send("/versions", "POST")}
+               onPublish={() => send("/publish", "POST")}
+               onSaveDetails={(details) => send("/details", "PATCH", { flow: details })} />
+      )}
+
+      {selectedNode && (
+        <Inspector node={selectedNode}
+                   fields={entryFor?.fields || {}} holds={entryFor?.records || {}}
+                   labels={entryFor?.labels || {}} recordLabels={entryFor?.record_labels || {}}
+                   choices={offeredTo(selectedNode, entryFor)}
+                   onClose={() => setSelected(null)}
+                   onSave={(config) => send(`/steps/${selectedNode.id}`, "PATCH", { config })}
+                   onDelete={() => { setSelected(null); send(`/steps/${selectedNode.id}`, "DELETE") }} />
+      )}
+    </div>
+  )
+}
+
+export default Canvas

data/app/javascript/easy_flow/canvas/Connector.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react"
+import Button from "keystone_ui-react/src/Button.jsx"
+const round = { width: 24, height: 24, padding: 0, fontSize: 15, lineHeight: "15px" }
+
+const Connector = ({ link, onInsert, onRemove, onDrop, dragging }) => {
+  const [ over, setOver ] = useState(false)
+  const showing = over || dragging
+
+  return (
+    <div data-connector={`${link.source}-${link.target}`}
+         style={{ position: "absolute", left: link.midX - 34, top: link.midY - 20, width: 68, height: 40, zIndex: 4 }}
+         onMouseEnter={() => setOver(true)} onMouseLeave={() => setOver(false)}
+         onDragEnter={() => setOver(true)} onDragLeave={() => setOver(false)}
+         onDragOver={(event) => { event.preventDefault(); event.dataTransfer.dropEffect = "move" }}
+         onDrop={(event) => { event.preventDefault(); setOver(false); onDrop() }}>
+      <div style={{ display: "flex", gap: 4, justifyContent: "center", alignItems: "center", height: "100%",
+                    opacity: showing ? 1 : 0, transition: "opacity .12s" }}>
+        <Button variant="secondary" title={dragging ? "Move the step here" : "Insert a step here"} onClick={onInsert}
+                className="rounded-full data-[over=true]:ring-2 data-[over=true]:ring-accent-600"
+                data-over={Boolean(dragging && over)} style={round}>+</Button>
+        {!dragging && (
+          <Button variant="danger" title="Remove this connection" onClick={onRemove}
+                  className="rounded-full" style={round}>×</Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Connector

data/app/javascript/easy_flow/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="easy_flow-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(#easy_flow-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/easy_flow/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/easy_flow/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/easy_flow/canvas/Panel.jsx

@@ -0,0 +1,61 @@
+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 { 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}>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/easy_flow/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/easy_flow/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/easy_flow/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/easy_flow/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/easy_flow/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/easy_flow/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/easy_flow/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/easy_flow/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/easy_flow/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/easy_flow/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/easy_flow/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/easy_flow/canvas/rows.js

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