@xeplr/ui-factory 1.1.0 → 1.3.0

package/src/pages.jsx

@@ -19,6 +19,7 @@ import { BuilderSample, ScreenSample, ScreenModal, FlowRunnerSample, FlowBuilder
  * @prop lockedNames  field names that are already columns of the table — shown read-only
  * @prop screens      [{ id, name, document? }] — other screens: "Edit in" choices, and Preview's popups
  * @prop controls     control registry (default: built-ins)
+ * @prop urlKey       keep the selected control and open steps in the URL (<urlKey>Selected, <urlKey>Steps)
  */
 export function FactoryBuilder(props) {
   const ctrl = useFactoryBuilder(props)
@@ -27,6 +28,9 @@ export function FactoryBuilder(props) {
       ctrl={ctrl}
       className={props.className}
       style={props.style}
+      // So a child table made here can be designed here — see the modal in
+      // BuilderSample. Supplied by createFactoryApi's builderProps.
+      screenApi={props.screenApi}
       renderPreview={(doc) => (
         // Preview never writes: onSave/onDelete are left out on purpose.
         <FactoryScreen
@@ -57,6 +61,7 @@ export function FactoryBuilder(props) {
  * @prop loadScreen   async (id) → document — for screens not in `screens`
  * @prop controls     control registry (default: built-ins)
  * @prop hooks        your FactoryHooks subclass (get / save / delete / actions) — also used by the popup
+ * @prop urlKey       keep the open step of each stepper in the URL (<urlKey>Steps); never passed to the popup
  */
 export function FactoryScreen(props) {
   const ctrl = useFactoryScreen(props)
@@ -89,6 +94,10 @@ export function FactoryScreen(props) {
               key={`${popup.screenId}:${popup.record ? popup.record[ctrl.recordKey] : 'new'}`}
               document={popup.document}
               record={popup.record}
+              // What the sub-table calls it with: the column pointing back at
+              // the record this list is on. Hidden on the form when the
+              // screen says a field is filled in by whoever opens it.
+              params={popup.params || undefined}
               recordKey={props.recordKey}
               onSave={ctrl.popupSave}
               fetchOptions={props.fetchOptions}
@@ -132,7 +141,10 @@ export function FlowRunner(props) {
   const screen = useFactoryScreen({
     ...props,
     document: run.document || EMPTY_SCREEN,
-    record: run.values || undefined
+    record: run.values || undefined,
+    // What the flow called this screen with — its step's own input, resolved
+    // by the engine. A field bound to {params.x} is filled from here.
+    params: run.given || undefined
   })
   return (
     <FlowRunnerSample
@@ -166,6 +178,7 @@ const EMPTY_SCREEN = {
  * @prop onSave     async (flow) → void
  * @prop onPublish  async (key) → void
  * @prop onChange   (flow) → void
+ * @prop urlKey     keep the selected step in the URL (<urlKey>Selected)
  */
 export function FlowBuilder(props) {
   const ctrl = useFlowBuilder(props)

package/src/remote.js

@@ -13,6 +13,8 @@
  * @param options.fetch  a fetch that adds auth and tenant headers (e.g. @xeplr/ui-account's authFetch)
  * @param options.base   prefix before /factory, if the router is mounted elsewhere (default '')
  */
+import { createChildTable } from './masters.js'
+
 export function createFactoryApi({ fetch: doFetch, base = '' } = {}) {
   if (typeof doFetch !== 'function') throw new Error('createFactoryApi: pass { fetch } — usually authFetch from @xeplr/ui-account')
 
@@ -95,11 +97,23 @@ export function createFactoryApi({ fetch: doFetch, base = '' } = {}) {
       confirmConvert: (options && options.confirmConvert) || []
     })),
     listTables: () => call('GET', '/tables'),
+    // DELETE A FORM'S SCREEN. The design always goes; the table only when it
+    // is empty and nothing else describes it — the answer says which
+    // happened, and how many records kept it. Refused while another
+    // published screen chooses from this form's table.
+    deleteScreen: async (key) => one(await call('DELETE', `/screens/${enc(key)}`)),
     // A new form from its name: { entity, plural? } → { entity, name, source, edit, list } — both screens as drafts.
     createEntity: async (spec) => one(await call('POST', '/entities', spec)),
 
     // records
-    fetchRecords: ({ screen }) => call('GET', `/records/${enc(screen)}`),
+    // `belongsTo` + `belongsToId`: a sub-table on a form asks for the rows of
+    // another table that belong to THIS record. Without an owner the server
+    // answers with none — a record that has not been saved yet owns nothing,
+    // and showing the whole table there is how somebody edits another
+    // record's lines.
+    fetchRecords: ({ screen, belongsTo, belongsToId }) => call('GET', belongsTo
+      ? `/records/${enc(screen)}?belongsTo=${enc(belongsTo)}&belongsToId=${enc(belongsToId == null ? '' : belongsToId)}`
+      : `/records/${enc(screen)}`),
     // One record, through the screen's get hooks — what Edit opens.
     fetchRecord: async ({ screen, id }) => one(await call('GET', `/records/${enc(screen)}/${enc(id)}`)),
     onSave: async (values, { id, screen }) => one(await call('POST', `/records/${enc(screen)}/save`, { id, values })),
@@ -116,6 +130,12 @@ export function createFactoryApi({ fetch: doFetch, base = '' } = {}) {
     fileUrl: (path) => `${base}/factory/files/${String(path).split('/').map(enc).join('/')}`
   }
   api.screenProps = { loadScreen: api.loadScreen, onSave: api.onSave, fetchRecords: api.fetchRecords, fetchRecord: api.fetchRecord, onDelete: api.onDelete, fetchOptions: api.fetchOptions, uploadFile: api.uploadFile, fileUrl: api.fileUrl }
-  api.builderProps = { onSave: api.saveDraft, onPublish: api.publish, listTables: api.listTables, fetchOptions: api.fetchOptions, fetchRecords: api.fetchRecords }
+  // makeChildTable: a list on a form can make the table it is about to point
+  // at — rows belonging to this record — without leaving the designer. A
+  // server act, which is why the builder is given it rather than doing it.
+  api.builderProps = { onSave: api.saveDraft, onPublish: api.publish, listTables: api.listTables, fetchOptions: api.fetchOptions, fetchRecords: api.fetchRecords, makeChildTable: function (spec) { return createChildTable(api, spec) },
+    // The builder designs a child table in place, which needs the same calls
+    // this api already makes — handed over rather than rebuilt.
+    screenApi: api }
   return api
 }

package/src/screenSource.js

@@ -15,7 +15,7 @@
 //
 // Pure: no React. The hook around it is useScreenSource.js.
 
-import { inputNodes } from './document.js'
+import { inputNodes, screenParams } from './document.js'
 
 /**
  * A screen document → what the designer needs.
@@ -29,12 +29,65 @@ export function describeScreen(doc) {
   return {
     key: doc.id,
     name: doc.name || doc.id,
+    description: doc.description || null,
     fields: inputNodes(doc).map(function (n) {
       return { name: n.id, type: n.type }
-    })
+    }),
+    // WHAT THIS SCREEN IS CALLED WITH — the inputs it declares, the way an
+    // action declares its inputSchema. A flow's Screen step asks for exactly
+    // these; a screen that declares none is asked for nothing.
+    inputs: screenParams(doc).map(function (p) {
+      return { name: p.name, label: p.label || p.name, type: p.type || 'string', required: Boolean(p.required) }
+    }),
+    // A MASTER is a list other forms point at. Reported here so a picker can
+    // offer "Departments" before it offers thirty raw table names, and so the
+    // admin section can gather them without reading every document again.
+    master: Boolean(doc.master),
+    labelField: doc.labelField || null,
+    source: doc.source || null
   }
 }
 
+/** The form a screen belongs to: task_edit and task_list are one form. */
+export function formKeyOf(screenKey) {
+  var m = /^(.*)_(edit|list)$/.exec(String(screenKey || ''))
+  return m ? m[1] : String(screenKey || '')
+}
+
+/**
+ * THE MASTERS, gathered from the screens an app has.
+ *
+ * A master is a property of the FORM, and a form is two screens — the edit
+ * screen is where it is declared, because that is the one that describes the
+ * record. The list screen is what the admin section opens, because looking at
+ * a master means looking at its rows.
+ *
+ * Returns [{ key, name, labelField, edit, list, source }], by name.
+ */
+export function masterForms(screens) {
+  var byForm = {}
+  ;(screens || []).forEach(function (sc) {
+    if (!sc || !sc.key) return
+    var form = formKeyOf(sc.key)
+    var entry = byForm[form] || (byForm[form] = { key: form, name: null, labelField: null, edit: null, list: null, source: null })
+    if (/_list$/.test(sc.key)) entry.list = sc.key
+    else entry.edit = sc.key
+    if (sc.master) {
+      entry.master = true
+      entry.name = entry.name || sc.name
+      entry.labelField = entry.labelField || sc.labelField
+      entry.source = entry.source || sc.source
+    }
+    // A name to show even when the flag is on the other half of the pair.
+    if (!entry.name && !/_list$/.test(sc.key)) entry.name = sc.name
+  })
+
+  return Object.keys(byForm)
+    .map(function (k) { return byForm[k] })
+    .filter(function (f) { return f.master })
+    .sort(function (a, b) { return String(a.name).localeCompare(String(b.name)) })
+}
+
 /** A listing row → the same shape, before its document has been read. */
 export function screenStub(row) {
   if (!row) return null
@@ -69,6 +122,36 @@ export async function loadScreens(api, onList) {
   }))
 }
 
+/**
+ * DELETE A FORM — both of its screens.
+ *
+ * The list first, then the edit screen: while the list still exists the table
+ * is still described, so the edit screen's delete is the one that can find
+ * the table unused and empty. The other order leaves the table behind.
+ *
+ * @returns what became of the table: { table, tableDropped, records }
+ */
+export async function deleteForm(api, form) {
+  if (!form || !form.key) throw new Error('Which form?')
+
+  // A HALF OF A FORM IS A KEY OR THE ROW THAT CARRIES ONE. Callers group
+  // screens for their own listing and hold whatever was convenient — a key
+  // here, a listing row there — and a row put into a URL reads as
+  // "[object Object]", which is a 404 naming a screen nobody could have
+  // asked for.
+  var half = function (x) {
+    if (!x) return null
+    return typeof x === 'string' ? x : (x.screenKey || x.id || x.key || null)
+  }
+
+  var list = half(form.list)
+  var edit = half(form.edit) || form.key
+
+  if (list) await api.deleteScreen(list)
+  var last = await api.deleteScreen(edit)
+  return last || { table: null, tableDropped: false, records: null }
+}
+
 /** "Leave request" → "leave_request": what a new form is keyed by. */
 export function keyFromName(label) {
   return String(label == null ? '' : label)

package/src/tableSchema.js

@@ -55,6 +55,8 @@ export const MAX_IDENTIFIER = 63
 
 const TEXT_DEFAULT_LENGTH = 255
 const OPTION_MIN_LENGTH = 50
+// prefix (8) + separator + six characters, with room to spare.
+const ID_CODE_LENGTH = 24
 const FILE_PATH_LENGTH = 255
 
 /**
@@ -68,6 +70,15 @@ export function columnForField(node) {
   switch (node.type) {
     case 'text':
       return { ...base, type: 'varchar', length: v.maxLength || TEXT_DEFAULT_LENGTH }
+    // AN IDENTIFIER. The kind decides the column, which is the point of it
+    // being a type: a counted number is the database's to assign (identity,
+    // so an insert that does not mention it still gets one), and a code is a
+    // short string the server writes. Unique either way — an identifier two
+    // rows share is not one.
+    case 'id':
+      return p.idKind === 'auto'
+        ? { ...base, type: 'integer', identity: true, notNull: true, unique: true }
+        : { ...base, type: 'varchar', length: ID_CODE_LENGTH, unique: true }
     case 'textarea':
       return { ...base, type: 'text' }
     case 'number':
@@ -114,8 +125,13 @@ export function columnSql(col) {
   const type = col.type === 'varchar' ? `varchar(${col.length})` : col.type
   const parts = [type]
   if (col.references) parts.push(`REFERENCES ${q(col.references)}("id")`)
+  // BY DEFAULT, not ALWAYS: the database counts, and an import carrying real
+  // numbers can still write its own. ALWAYS would refuse them outright.
+  if (col.identity) parts.push('GENERATED BY DEFAULT AS IDENTITY')
   if (col.notNull) parts.push('NOT NULL')
   if (col.default !== undefined) parts.push(`DEFAULT ${col.default}`)
+  // An identifier two rows share is not one.
+  if (col.unique) parts.push('UNIQUE')
   return parts.join(' ')
 }
 

package/src/urlState.js

@@ -0,0 +1,71 @@
+// WHERE YOU ARE LIVES IN THE URL — the pure half, no React.
+//
+// The step a stepper is open at, and the control (or flow step) whose
+// properties are open, are places a person navigates to: a refresh or a
+// shared link must land on them again. This file is how they are named in the
+// URL's query; useUrlPlaces.js reads and writes them.
+//
+// THE KEYS ARE THE HOST'S. A builder, a running screen and the preview inside
+// the builder can share one page, and the host app has keys of its own, so a
+// hook writes the URL only when given a `urlKey`. Without one it keeps the
+// same values in memory, exactly as before.
+
+/**
+ * The query keys under a host's `urlKey`, or null (in memory).
+ *   factoryUrlKeys('form') → { steps: 'formSteps', selected: 'formSelected' }
+ */
+export function factoryUrlKeys(urlKey) {
+  if (!urlKey) return null
+  return { steps: `${urlKey}Steps`, selected: `${urlKey}Selected` }
+}
+
+/**
+ * Which step each stepper is open at → one query value. Step 0 is where a
+ * stepper starts, so it is left out — a screen on its first steps has a
+ * clean URL. Ids are URI-encoded, so one holding ':' or ',' splits back.
+ *   { s1: 2, s2: 0 } → 's1:2'
+ */
+export function encodeSteps(open) {
+  return Object.keys(open || {})
+    .filter((id) => Number.isInteger(open[id]) && open[id] > 0)
+    .map((id) => `${encodeURIComponent(id)}:${open[id]}`)
+    .join(',') || null
+}
+
+/** The query value back to { stepper id: index }; anything unreadable is dropped. */
+export function decodeSteps(value) {
+  const open = {}
+  if (!value || typeof value !== 'string') return open
+  value.split(',').forEach((pair) => {
+    const at = pair.lastIndexOf(':')
+    if (at <= 0) return
+    if (!/^\d+$/.test(pair.slice(at + 1))) return
+    const index = Number(pair.slice(at + 1))
+    let id
+    try { id = decodeURIComponent(pair.slice(0, at)) } catch { return }
+    open[id] = index
+  })
+  return open
+}
+
+/**
+ * Selecting adds a history entry when it opens or closes the properties
+ * (nothing → something, something → nothing), so Back closes them; moving
+ * from one selected thing to another is a switch and replaces the entry.
+ */
+export function replacesHistory(previous, next) {
+  const had = previous !== null && previous !== undefined && previous !== ''
+  const has = next !== null && next !== undefined && next !== ''
+  return had && has
+}
+
+/**
+ * A multi-selection is NOT a place: it is a working set for Delete or
+ * Duplicate, not somewhere a person goes. Only a single selection — the one
+ * whose properties are open — is named in the URL.
+ *   one id → that id      none, or several → null
+ */
+export function selectionPlace(ids) {
+  const list = ids ? [...ids] : []
+  return list.length === 1 ? list[0] : null
+}

package/src/useFactoryBuilder.js

@@ -7,6 +7,8 @@ import {
 } from './document.js'
 import { validateDocument } from './validateDocument.js'
 import { presetFor, presetProps, presetGroup, presetHints, convertField } from './presets.js'
+import { useUrlSteps, useUrlSelection } from './useUrlPlaces.js'
+import { selectionPlace } from './urlState.js'
 
 // The builder's controller: the document being edited, what is selected, and
 // every change the builder can make. No JSX — designs/BuilderSample.jsx draws
@@ -36,10 +38,44 @@ import { presetFor, presetProps, presetGroup, presetHints, convertField } from '
  *                    shown); throw with `confirm: [{ column, records }]` when removed fields would drop
  *                    columns — the builder asks, and calls again with confirmDrop naming them.
  * @param controls    the control registry (default: the built-ins)
+ * @param urlKey      where the selected control and the open steps live in the URL:
+ *                    `<urlKey>Selected` and `<urlKey>Steps`, so a refresh or a shared
+ *                    link lands on the same control. Omitted → kept in memory.
  */
-export function useFactoryBuilder({ document: given, name, onSave, onChange, onPublish, listTables, screens, lockedNames, controls = CONTROLS, autosaveDelay = 800 } = {}) {
+/**
+ * What the link column on a child is called: materials → materialId.
+ *
+ * From the parent's TABLE rather than its name, because the table is what the
+ * column points at and is the thing that cannot be renamed later.
+ */
+function linkNameFor(doc) {
+  var table = String((doc && doc.source) || 'parent').replace(/[^A-Za-z0-9]+/g, '_').replace(/_+$/, '')
+  var singular = /ies$/.test(table) ? table.slice(0, -3) + 'y'
+    : /(ss|us|is)$/.test(table) ? table
+    : /s$/.test(table) ? table.slice(0, -1)
+    : table
+  return singular.replace(/_([a-z])/g, function (_, c) { return c.toUpperCase() }) + 'Id'
+}
+
+export function useFactoryBuilder({ document: given, name, onSave, onChange, onPublish, listTables, makeChildTable, screens, lockedNames, controls = CONTROLS, autosaveDelay = 800, urlKey } = {}) {
   const [doc, setDoc] = useState(() => given || createScreen({ name }))
-  const [selected, setSelected] = useState(() => new Set())
+
+  // ── selection ─────────────────────────────────────────────────────────
+  // ONE selected control is a place — its properties are open — so it is
+  // named in the URL (by id, found again in the document). Several selected
+  // is a working set for Delete or Duplicate, not a place: it stays here, and
+  // the URL then names nothing.
+  const [placeId, selectPlace] = useUrlSelection(urlKey)
+  const [several, setSeveral] = useState(null)
+  const placeNode = placeId === null ? null : doc.nodes.find((n) => String(n.id) === placeId) || null
+  const placeNodeId = placeNode ? placeNode.id : null
+  const selected = useMemo(() => several || new Set(placeNodeId === null ? [] : [placeNodeId]), [several, placeNodeId])
+  const selectedRef = useRef(selected); selectedRef.current = selected
+  const setSelected = useCallback((next) => {
+    const ids = [...((typeof next === 'function' ? next(selectedRef.current) : next) || [])]
+    setSeveral(ids.length > 1 ? new Set(ids) : null)
+    selectPlace(selectionPlace(ids))
+  }, [selectPlace])
   const [dirty, setDirty] = useState(false)
   const [saving, setSaving] = useState(false)
   const [saveError, setSaveError] = useState(null)
@@ -57,7 +93,10 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
     if (JSON.stringify(given) === JSON.stringify(docRef.current)) return
     docRef.current = given
     setDoc(given)
-    setSelected(new Set())
+    // A multi-selection belongs to the old document. The URL's control is
+    // kept: a host that loads the screen after mounting hands it in here, and
+    // the link's control is found in it — or, if it is not there, nothing is.
+    setSeveral(null)
     setDirty(false)
   }, [given])
 
@@ -81,6 +120,11 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
   const [tables, setTables] = useState({ loading: Boolean(listTables), items: [], error: null })
   const listTablesRef = useRef(listTables); listTablesRef.current = listTables
   const hasListTables = Boolean(listTables)
+  // Bumped when this designer MAKES a table. The list is otherwise fetched
+  // once, which was right while tables only ever appeared elsewhere — and
+  // wrong the moment "New table…" existed: the table was made, the list was
+  // pointed at it, and the picker had never heard of it, so it showed blank.
+  const [tableRound, setTableRound] = useState(0)
   useEffect(() => {
     if (!hasListTables) return undefined
     let cancelled = false
@@ -93,7 +137,7 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
       })
       .catch((err) => { if (!cancelled) setTables({ loading: false, items: [], error: err.message || 'Could not list tables' }) })
     return () => { cancelled = true }
-  }, [hasListTables])
+  }, [hasListTables, tableRound])
 
   // ── edits ─────────────────────────────────────────────────────────────
   const rename = useCallback((value) => update((d) => renameScreen(d, value)), [update])
@@ -104,7 +148,7 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
   // Which step of each stepper is open on the canvas. Everything dropped while
   // a step is open belongs to that step, and the canvas shows only that step —
   // so one screen holds as many little screens as it has steps.
-  const [openSteps, setOpenSteps] = useState({})
+  const [openSteps, setOpenSteps] = useUrlSteps(urlKey)
   const stepperNodes = useMemo(() => steppers(doc, controls), [doc, controls])
   const [building, setBuilding] = useState(null)      // the stepper being built
   const activeStepper = stepperNodes.find((n) => n.id === building) || stepperNodes[stepperNodes.length - 1] || null
@@ -113,7 +157,7 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
   const goToStep = useCallback((id, index) => {
     setBuilding(id)
     setOpenSteps((o) => ({ ...o, [id]: index }))
-  }, [])
+  }, [setOpenSteps])
 
   /** The step a new control lands on: the one open on the stepper being built. */
   const dropStep = useCallback(() => (
@@ -142,7 +186,7 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
     })
     if (added) setSelected(new Set([added.id]))
     return added
-  }, [update, controls, dropStep])
+  }, [update, controls, dropStep, setSelected])
 
   const moveControl = useCallback((id, patch) => update((d) => moveNode(d, id, patch)), [update])
 
@@ -164,13 +208,12 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
     return dropped
   }, [update, controls])
 
-  const selectedRef = useRef(selected); selectedRef.current = selected
   const removeSelected = useCallback(() => {
     const ids = [...selectedRef.current]
     if (!ids.length) return
     update((d) => removeNodes(d, ids))
     setSelected(new Set())
-  }, [update])
+  }, [update, setSelected])
 
   /** Everything selected moves to a copy, just below the original. */
   const duplicateSelected = useCallback(() => {
@@ -191,7 +234,7 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
       return next
     })
     setSelected(new Set(created))
-  }, [update, controls])
+  }, [update, controls, setSelected])
 
   // ── validation + save ─────────────────────────────────────────────────
   const validation = useMemo(() => validateDocument(doc, controls), [doc, controls])
@@ -253,6 +296,8 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
   // Deliberate, unlike saving: a half-finished design must not reach everyone
   // filling the form in.
   const onPublishRef = useRef(onPublish); onPublishRef.current = onPublish
+  const makeChildTableRef = useRef(makeChildTable); makeChildTableRef.current = makeChildTable
+  const [designingChild, setDesigningChild] = useState(null)
   const [publishing, setPublishing] = useState(false)
   const [publishResult, setPublishResult] = useState(null)   // { ok, message, version?, detail? }
   /**
@@ -356,6 +401,85 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
     },
     visibleNodes,
     setProperty,
+    /**
+     * A list's table, and the columns that only made sense for the old one.
+     *
+     * Chosen columns are field names. Point the list at another table and
+     * every one of them is a name that table has never heard of — so the grid
+     * keeps drawing the old headers over blank cells, which reads as the
+     * panel not having noticed the change. Clearing them falls back to "all
+     * the columns the rows have", which is right for whatever it now points
+     * at.
+     *
+     * The link goes too: it belonged to the old table's shape.
+     */
+    setListSource: function (nodeId, table) {
+      update(function (d) {
+        var node = d.nodes.find(function (n) { return n.id === nodeId })
+        var was = node && node.props ? node.props.source : undefined
+        var next = setNodeProperty(d, nodeId, 'props.source', table || undefined)
+        if ((was || '') === (table || '')) return next
+        next = setNodeProperty(next, nodeId, 'props.columns', undefined)
+        return setNodeProperty(next, nodeId, 'props.belongsTo', undefined)
+      })
+    },
+    /**
+     * Make the table a list is about to point at, and point it there.
+     *
+     * TWO PROPERTIES AT ONCE, which is why it is here rather than a button in
+     * the panel: a table without its link is a list of everybody's rows, and
+     * a link without a table is nothing at all. Neither half is a state worth
+     * being able to reach.
+     *
+     * The host does the making (it is a server act, and this package does not
+     * know where the server is) and answers with what the list needs.
+     */
+    // The child just made, waiting to be designed — { nodeId, screenKey }.
+    // Nothing is forced: closing it leaves a table with the two fields it was
+    // made with, which is a working sub-table.
+    designingChild: designingChild,
+    closeChild: function (screen) {
+      // Designed and published: its fields are the list's columns now. A
+      // close with nothing keeps what was set when it was made.
+      if (screen && Array.isArray(screen.fields) && designingChild) {
+        var link = designingChild.link
+        var columns = screen.fields
+          .filter(function (f) { return f.name !== link })
+          .map(function (f) { return { field: f.name, label: f.label || f.name } })
+        if (columns.length) {
+          var nodeId = designingChild.nodeId
+          update(function (d) { return setNodeProperty(d, nodeId, 'props.columns', columns) })
+        }
+      }
+      setDesigningChild(null)
+    },
+
+    makeChildTable: makeChildTableRef.current ? async function (nodeId, name) {
+      var made = await makeChildTableRef.current({
+        name: name,
+        parent: { table: docRef.current.source, label: docRef.current.name, link: linkNameFor(docRef.current) }
+      })
+      if (!made || !made.source) throw new Error('Could not make that table')
+      // So the picker knows the table this list is about to name.
+      setTableRound(function (n) { return n + 1 })
+      update(function (d) {
+        var withTable = setNodeProperty(d, nodeId, 'props.source', made.source)
+        var linked = setNodeProperty(withTable, nodeId, 'props.belongsTo', made.link)
+        // The child's own columns, which are known because it was just made
+        // — minus the link, which is the list itself and not a column anybody
+        // asked to see.
+        var columns = (made.fields || [])
+          .filter(function (f) { return f.name !== made.link })
+          .map(function (f) { return { field: f.name, label: f.label || f.name } })
+        return columns.length ? setNodeProperty(linked, nodeId, 'props.columns', columns) : linked
+      })
+      // STRAIGHT INTO ITS DESIGNER. A sub-table is made for the fields it is
+      // going to hold, and "Name" and "Value" are a guess at those — so the
+      // form opens where it was made, rather than being something to go and
+      // find afterwards with the thought already lost.
+      setDesigningChild({ nodeId: nodeId, screenKey: made.edit, link: made.link, name: name })
+      return made
+    } : null,
     convertControl,
     hints,
     removeSelected,