alembic 0.1.0 → 0.2.0

data/app/controllers/alembic/manage/canvas_controller.rb

@@ -1,183 +0,0 @@
-module Alembic
-  module Manage
-    class CanvasController < BaseController
-      include DrawsCanvas
-      def show
-        render json: canvas_payload(diagnostic)
-      end
-
-      def create
-        objections = Flow::Validator.new(document).violations
-        return render json: { error: refusal(objections) }, status: :unprocessable_entity if objections.any?
-
-        stood_at = diagnostic.current_definition_version&.number
-        diagnostic.create_version
-
-        render json: { notice: created(stood_at) }
-      end
-
-      def publish
-        objections = Flow::Validator.new(document).violations
-        return render json: { error: refusal(objections) }, status: :unprocessable_entity if objections.any?
-
-        ran = diagnostic.live_version&.number
-        diagnostic.publish
-
-        render json: { notice: published(ran) }
-      end
-
-      def details
-        diagnostic.update!(details_params)
-        render json: { notice: "Saved the flow's details." }
-      end
-
-      def undo
-        diagnostic.edit_history.undo_change
-        head :no_content
-      end
-
-      def redo
-        diagnostic.edit_history.redo_change
-        head :no_content
-      end
-
-      def add_step
-        apply(:added, params[:id]) do |flow|
-          next flow.insert(new_step, on: edge_endpoints, leaving: first_port) if placed_on_edge?
-          next flow.add(new_step).connect(from: params[:from], to: params[:id], on: params[:on].presence) if branched_from?
-
-          flow.add(new_step)
-        end
-      end
-
-      def configure_step
-        apply(:updated, params[:step]) { |flow| flow.configure(params[:step], coerced(flow, params[:step])) }
-      end
-
-      def move_step
-        apply(:moved, params[:step]) { |flow| flow.move(params[:step], on: edge_endpoints, leaving: port_for(params[:step])) }
-      end
-
-      def remove_step
-        return render json: { error: refusal_to_remove }, status: :unprocessable_entity if begins_the_flow?(params[:step])
-
-        apply(:removed, params[:step]) { |flow| flow.remove(params[:step]) }
-      end
-
-      def connect
-        apply(:connected, params[:from], params[:to]) { |flow| flow.connect(from: params[:from], to: params[:to], on: params[:on].presence) }
-      end
-
-      def disconnect
-        apply(:disconnected, params[:from], params[:to]) { |flow| flow.disconnect(from: params[:from], to: params[:to]) }
-      end
-
-      private
-
-      def apply(action = nil, *steps)
-        before = document.to_h
-        diagnostic.edit_history.record(yield(document), action, steps, before)
-        head :no_content
-      rescue Flow::InvalidEdit => invalid
-        render json: { error: invalid.message }, status: :unprocessable_entity
-      end
-
-      def diagnostic
-        @diagnostic ||= Flow::Definition.find(params[:flow_id])
-      end
-
-      def document
-        Flow::Document.new(diagnostic.document || diagnostic.definition || {})
-      end
-
-      def details_params
-        params.require(:flow).permit(:title, :summary, :start_label, :persists)
-      end
-
-      def new_step
-        { "id" => params.require(:id), "type" => params.require(:type) }
-      end
-
-      def first_port
-        first_value_of(Flow::Node.new(id: nil, type: params[:type], config: {}))
-      end
-
-      def port_for(id)
-        first_value_of(document.node(id))
-      end
-
-      def first_value_of(node)
-        return unless node && Flow.registry.registered?(node.type)
-
-        step_type = Flow.registry.fetch(node.type)
-        return unless step_type.routes?
-
-        step_type.outputs.flat_map { |output| output.values_for(node) }.first&.fetch("value", nil)&.to_s
-      end
-
-      def begins_the_flow?(id)
-        node = document.node(id)
-
-        node.present? && document.begins_here?(node)
-      end
-
-      def placed_on_edge?
-        params[:from].present? && params[:to].present?
-      end
-
-      def branched_from?
-        params[:from].present?
-      end
-
-      def edge_endpoints
-        [ params[:from], params[:to] ]
-      end
-
-      def configuration
-        params.fetch(:config, {}).permit!.to_h
-      end
-
-      def created(stood_at)
-        now_at = diagnostic.reload.current_definition_version&.number
-        return "Nothing has changed since version #{stood_at}." if now_at == stood_at
-
-        "Created version #{now_at}."
-      end
-
-      def published(ran)
-        now_at = diagnostic.reload.live_version&.number
-        return "Visitors already run version #{now_at}." if now_at == ran
-
-        "Published version #{now_at}. Visitors run it now."
-      end
-
-      def refusal_to_remove
-        "Cannot remove where a flow begins."
-      end
-
-      def refusal(objections)
-        "Cannot publish: #{objections.map { |problem| worded(problem) }.join(', ')}."
-      end
-
-      def worded(problem)
-        trouble = problem.problem.to_s.humanize(capitalize: false)
-
-        problem.node ? "“#{problem.node}” is #{trouble}" : trouble
-      end
-
-      def coerced(flow, id)
-        step_type = Flow::Digest.new(flow).step(id)&.type
-        return configuration unless step_type && Flow.registry.registered?(step_type)
-
-        settled(Flow.registry.fetch(step_type))
-      end
-
-      def settled(step_type)
-        step_type.settings.coerce(configuration).tap do |values|
-          objections = step_type.settings.objections(values)
-          raise Flow::InvalidEdit, objections.join(", ") if objections.any?
-        end
-      end
-    end
-  end
-end

data/app/controllers/alembic/manage/definitions_controller.rb

@@ -1,15 +0,0 @@
-module Alembic
-  module Manage
-    class DefinitionsController < BaseController
-      def edit
-        @diagnostic = Flow::Definition.find(params[:flow_id])
-      end
-
-      def update
-        @diagnostic = Flow::Definition.find(params[:flow_id])
-        @diagnostic.edit_history.edit_document(JSON.parse(params.require(:definition)))
-        redirect_to manage_flow_path(@diagnostic), notice: "Definition saved."
-      end
-    end
-  end
-end

data/app/controllers/alembic/manage/versions_controller.rb

@@ -1,22 +0,0 @@
-module Alembic
-  module Manage
-    class VersionsController < BaseController
-      def index
-        @diagnostic = diagnostic
-        @versions = @diagnostic.definition_versions.order(number: :desc)
-      end
-
-      def return
-        diagnostic.return_to(diagnostic.definition_versions.find(params[:id]))
-
-        redirect_to manage_flow_path(diagnostic), notice: "The flow is back to that version."
-      end
-
-      private
-
-      def diagnostic
-        @diagnostic ||= Flow::Definition.find(params[:flow_id])
-      end
-    end
-  end
-end

data/app/controllers/concerns/alembic/manage/draws_canvas.rb

@@ -1,35 +0,0 @@
-module Alembic
-  module Manage
-    module DrawsCanvas
-      extend ActiveSupport::Concern
-
-      private
-
-      def canvas_payload(diagnostic)
-        Flow::Canvas.new(canvas_document(diagnostic)).to_h
-          .merge("undoable" => diagnostic.edit_history.undoable?, "redoable" => diagnostic.edit_history.redoable?,
-                 "changes" => listed_changes(diagnostic), "flow" => flow_details(diagnostic))
-      end
-
-      def canvas_document(diagnostic)
-        Flow::Document.new(diagnostic.document || diagnostic.definition || {})
-      end
-
-      def listed_changes(diagnostic)
-        diagnostic.changes_since_version.to_a.map { |change| Flow::Change.phrase(change) }
-      end
-
-      def flow_details(diagnostic)
-        { "title" => diagnostic.title,
-          "slug" => diagnostic.slug,
-          "summary" => diagnostic.summary,
-          "start_label" => diagnostic.start_label,
-          "version" => diagnostic.current_definition_version&.number,
-          "published" => diagnostic.live_version&.number,
-          "definition_url" => edit_manage_flow_definition_path(diagnostic),
-          "details_url" => edit_manage_flow_path(diagnostic),
-          "history_url" => manage_flow_versions_path(diagnostic) }
-      end
-    end
-  end
-end

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

@@ -1,197 +0,0 @@
-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("alembic:open-flow", open)
-    return () => document.removeEventListener("alembic: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("alembic: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/alembic/canvas/Connector.jsx

@@ -1,30 +0,0 @@
-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/alembic/canvas/ConnectorLayer.jsx

@@ -1,31 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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