@xeplr/ui-factory 1.2.0 → 1.4.0

package/src/designs/PropertyPanel.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { getAtPath } from '../propertyPath.js'
 import { FIELD_PRESETS, presetFor } from '../presets.js'
-import { slugify, inputNodes } from '../document.js'
+import { slugify, inputNodes, paramsText } from '../document.js'
 import { FONT_FAMILIES, STYLE_KEYS, SCREEN_STYLE_KEYS, LIST_ACTIONS, FILE_KINDS } from '../controls.js'
 
 // The selected control's properties, GENERATED from its entry in controls.js:
@@ -58,7 +58,7 @@ function FieldType({ node, controls, hint, onConvert, onKeepPlain }) {
   )
 }
 
-export default function PropertyPanel({ doc, node, control, controls, errors, tables, screens, lockedNames, onChange, onConvert, hint, onScreenChange, onRemove, selectionCount }) {
+export default function PropertyPanel({ doc, node, control, controls, errors, tables, screens, lockedNames, onChange, onConvert, hint, onScreenChange, onRemove, onMakeChildTable, selectionCount }) {
   if (selectionCount > 1) {
     return (
       <aside className="xeplr-factory-panel">
@@ -109,6 +109,7 @@ export default function PropertyPanel({ doc, node, control, controls, errors, ta
                   node={node}
                   doc={doc}
                   errors={errs}
+                  onMakeChildTable={onMakeChildTable}
                 />
                 {locked
                   ? <div className="xeplr-factory-prop-help">Saved as a column of <code>{doc?.source}</code> — renaming it would leave its data behind. A rename is a migration.</div>
@@ -149,7 +150,15 @@ function ScreenPanel({ doc, errors, tables, onChange }) {
     return (
       <div key={field.path} className={`xeplr-factory-prop${msg ? ' has-error' : ''}`}>
         {field.type !== 'toggle' && field.type !== 'toggleValue' && <label className="xeplr-factory-prop-label" htmlFor={id}>{field.label}</label>}
-        <Editor id={id} field={field} value={getAtPath(doc, field.path)} onChange={(v) => onChange(field.path, v)} tables={tables} errors={[]} {...extra} />
+        <Editor
+          id={id}
+          field={field}
+          value={field.path === 'paramsLine' ? paramsText(doc) : getAtPath(doc, field.path)}
+          onChange={(v) => onChange(field.path, v)}
+          tables={tables}
+          errors={[]}
+          {...extra}
+        />
         {field.help && <div className="xeplr-factory-prop-help">{field.help}</div>}
         {msg && <div className="xeplr-factory-prop-error">{msg}</div>}
       </div>
@@ -161,9 +170,48 @@ function ScreenPanel({ doc, errors, tables, onChange }) {
         <span className="xeplr-factory-panel-type">Screen</span>
       </header>
       <p className="xeplr-factory-panel-empty">Select a control to change it, or drag one in from the left.</p>
+      <fieldset className="xeplr-factory-group">
+        <legend>About</legend>
+        {/* WHAT IT IS FOR. When a lot of people can make forms, a lot of
+            people make the same one — and the fields say what a form holds,
+            never what it was for or whether this is the one still in use. */}
+        {row({
+          path: 'description',
+          label: 'What this form is for',
+          type: 'textarea',
+          help: 'One sentence. It is what tells this apart from the other three called the same thing.'
+        }, TextareaEditor)}
+      </fieldset>
       <fieldset className="xeplr-factory-group">
         <legend>Data</legend>
         {row({ path: 'source', label: 'Saves to', type: 'table', help: 'The table this screen\'s records are saved in' }, TableEditor)}
+        {/* A MASTER is a list other forms point at — departments, statuses,
+            countries. A flag on an ordinary form, not a kind of its own. */}
+        {row({
+          path: 'master',
+          label: 'This is a master',
+          type: 'toggle',
+          help: 'A list other forms choose from. Masters are kept together in the admin section.'
+        }, EDITORS.toggle || TextEditor)}
+        {doc.master && row({
+          path: 'labelField',
+          label: 'Shown as',
+          type: 'select',
+          options: [{ value: '', label: '— choose a field —' }].concat(
+            inputNodes(doc).map((n) => ({ value: n.props.name, label: n.props.label || n.props.name }))
+          ),
+          help: 'What a picker shows for a record. Said once here, not on every dropdown.'
+        }, EDITORS.select || TextEditor)}
+        {/* WHAT THIS FORM IS CALLED WITH. One line, because that is the whole
+            question — "this form needs contentId, age, name". A field then
+            binds to one with {params.contentId} as its default, the same
+            brace used in a workflow step or a report. */}
+        {row({
+          path: 'paramsLine',
+          label: 'Inputs',
+          type: 'text',
+          help: 'Names, comma separated. A field takes one with {params.name} as its default.'
+        }, ListLineEditor)}
       </fieldset>
       <fieldset className="xeplr-factory-group">
         <legend>Size</legend>
@@ -181,6 +229,46 @@ function LockedEditor({ id, value }) {
   return <input id={id} className="xeplr-factory-prop-input xeplr-factory-mono" type="text" value={value ?? ''} readOnly aria-readonly="true" />
 }
 
+/**
+ * A LIST TYPED AS A LINE — the screen's inputs.
+ *
+ * Two bugs live here, and this shape is what avoids both.
+ *
+ * It cannot be a plain TextEditor: what is STORED is a list and what is SHOWN
+ * is that list joined again, so a comma is parsed away the moment it is typed
+ * ("a," → ["a"] → "a") and the box refuses to let anybody start a second name.
+ *
+ * And it cannot commit on BLUR, which was the first fix: pressing Publish is
+ * one gesture, so the blur and the click race, and a name typed just before
+ * publishing was not in the document the publish read. The screen went out
+ * with no inputs and nothing said why.
+ *
+ * So the text is kept HERE for display, and the document is told on every
+ * keystroke. Nothing is ever waiting to be committed, and the line somebody
+ * is typing is never rewritten under their fingers.
+ */
+function ListLineEditor({ id, value, onChange }) {
+  const [text, setText] = useState(value ?? '')
+  const [typing, setTyping] = useState(false)
+
+  // Taken from the document again when it changes underneath — a different
+  // screen, an undo — unless the box is being typed in right now, which is
+  // the only thing this local copy exists for.
+  useEffect(() => { if (!typing) setText(value ?? '') }, [value, typing])
+
+  return (
+    <input
+      id={id}
+      className="xeplr-factory-prop-input"
+      type="text"
+      value={text}
+      onFocus={() => setTyping(true)}
+      onChange={(e) => { setText(e.target.value); onChange(e.target.value) }}
+      onBlur={(e) => { setTyping(false); onChange(e.target.value) }}
+    />
+  )
+}
+
 function TextEditor({ id, value, onChange }) {
   return <input id={id} className="xeplr-factory-prop-input" type="text" value={value ?? ''} onChange={(e) => onChange(e.target.value)} />
 }
@@ -282,12 +370,113 @@ function ToggleValueEditor({ id, field, value, onChange }) {
 }
 
 /** A table name: picked from the app's tables when it lists them, typed otherwise. */
+/**
+ * WHERE A DROPDOWN'S OPTIONS COME FROM.
+ *
+ * MASTERS FIRST, by the name a person knows them as — "Departments", not
+ * "departments" — because those are the lists that exist to be pointed at. A
+ * flat list of thirty raw table names is one nobody can read, and nothing in
+ * it says which tables were meant for this.
+ *
+ * Everything else is still underneath. A dropdown may legitimately read from
+ * any table a published screen reads, and hiding those would replace a
+ * confusing list with a dead end.
+ *
+ * Two groups in a plain <select>, not a combobox: typing jumps to an option
+ * in every browser, which is the searching somebody actually wants here, and
+ * a widget of our own would have to reimplement the keyboard to match.
+ */
+/**
+ * The same picker, plus a way out of the dead end.
+ *
+ * A sub-table points at a table that usually does not exist yet, and the
+ * honest answer to "which table?" at that moment is "the one I am about to
+ * make". Without this the designer has to be left, a form built, and the
+ * thought recovered on the way back.
+ *
+ * Only on a LIST, and only when the host can make one: it is a server act.
+ */
+function ListTableEditor({ id, value, onChange, tables, node, doc, onMakeChildTable }) {
+  const [making, setMaking] = useState(false)
+  const [name, setName] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState(null)
+  const canMake = Boolean(onMakeChildTable && doc && doc.source && node)
+
+  const make = async () => {
+    if (!name.trim() || busy) return
+    setBusy(true)
+    try {
+      await onMakeChildTable(node.id, name.trim())
+      setMaking(false)
+      setName('')
+      setError(null)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (making) {
+    return (
+      <div>
+        <input
+          id={id}
+          className="xeplr-factory-prop-input"
+          autoFocus
+          value={name}
+          placeholder="Characteristics"
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); make() } }}
+        />
+        <div className="xeplr-factory-prop-help">
+          Makes a table of rows belonging to this one, and points this list at it.
+        </div>
+        {error && <div className="xeplr-factory-prop-error">{error}</div>}
+        <button type="button" className="xeplr-factory-primary" disabled={!name.trim() || busy} onClick={make}>
+          {busy ? 'Making it…' : 'Make the table'}
+        </button>
+        <button type="button" className="xeplr-factory-secondary" onClick={() => { setMaking(false); setError(null) }}>Cancel</button>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <TableEditor id={id} value={value} onChange={onChange} tables={tables} />
+      {canMake && (
+        <button type="button" className="xeplr-factory-secondary" onClick={() => setMaking(true)}>
+          New table…
+        </button>
+      )}
+    </div>
+  )
+}
+
 function TableEditor({ id, value, onChange, tables }) {
-  if (tables && tables.items.length > 0) {
+  const items = (tables && tables.items) || []
+  if (items.length > 0) {
+    const masters = items.filter((t) => t.master)
+    const rest = items.filter((t) => !t.master)
+    // A SELECT WHOSE VALUE IS NOT AN OPTION SHOWS NOTHING, which reads as the
+    // setting having been lost. It has not: a table made a moment ago is not
+    // in a list fetched when the page opened, and a table whose screens were
+    // deleted is still what this list names.
+    const known = items.some((t) => String(t.id) === String(value || ''))
+    const stray = value && !known ? { id: value, name: value } : null
+    const option = (t) => <option key={String(t.id)} value={String(t.id)}>{t.name}</option>
+
     return (
       <select id={id} className="xeplr-factory-prop-input" value={value ?? ''} onChange={(e) => onChange(e.target.value || undefined)}>
         <option value="">{tables.loading ? 'Loading tables…' : '—'}</option>
-        {tables.items.map((t) => <option key={String(t.id)} value={String(t.id)}>{t.name}</option>)}
+        {stray && <option value={String(stray.id)}>{stray.name}</option>}
+        {masters.length > 0 && <optgroup label="Masters">{masters.map(option)}</optgroup>}
+        {/* Named as what they are, so it reads as "the rest" rather than as a
+            second list of the same kind of thing. */}
+        {rest.length > 0 && (
+          <optgroup label={masters.length > 0 ? 'Other tables' : 'Tables'}>{rest.map(option)}</optgroup>
+        )}
       </select>
     )
   }
@@ -301,7 +490,17 @@ function TableEditor({ id, value, onChange, tables }) {
  */
 function ColumnsEditor({ value, onChange, doc, node, screens }) {
   const editDoc = node && node.props.editScreen ? (screens || []).find((s) => s.id === node.props.editScreen)?.document : null
-  const from = doc && inputNodes(doc).length ? doc : editDoc
+
+  // A LIST OF ANOTHER TABLE IS NOT DESCRIBED BY THIS SCREEN. Pointing a list
+  // at material_characteristics and being offered the MATERIAL's fields is
+  // worse than being offered nothing: every one of them ticks a column that
+  // will be blank in every row.
+  //
+  // The edit screen for those rows is the only description to hand here — a
+  // host that did not provide it leaves this empty, and the list falls back
+  // to the columns the rows themselves have (see listColumns).
+  const foreign = node && node.props.source && doc && node.props.source !== doc.source
+  const from = foreign ? editDoc : (doc && inputNodes(doc).length ? doc : editDoc)
   const fields = from
     ? inputNodes(from).map((n) => ({ field: n.props.name, label: n.props.label || n.props.name }))
     : (Array.isArray(value) ? value : [])
@@ -313,7 +512,18 @@ function ColumnsEditor({ value, onChange, doc, node, screens }) {
     // All of them again is the same as "not set" — keep the document clean.
     onChange(next.length === fields.length || next.length === 0 ? undefined : next.map((c) => ({ field: c.field, label: (current.find((x) => x.field === c.field) || c).label })))
   }
-  if (!fields.length) return <div className="xeplr-factory-prop-help">Add fields to the screen first — the list shows them as columns.</div>
+  if (!fields.length) {
+    // Two different nothings, and saying "add fields to this screen" to
+    // somebody pointing a list at another table sends them to fix the wrong
+    // thing.
+    return (
+      <div className="xeplr-factory-prop-help">
+        {foreign
+          ? 'Every column of ' + node.props.source + '. Set "Edit in" to that table\'s form to choose.'
+          : 'Add fields to the screen first — the list shows them as columns.'}
+      </div>
+    )
+  }
   return (
     <div className="xeplr-factory-checklist">
       {fields.map((f) => (
@@ -340,6 +550,24 @@ function ScreenEditor({ id, value, onChange, screens, doc }) {
   return <input id={id} className="xeplr-factory-prop-input xeplr-factory-mono" type="text" placeholder="employee_edit" value={value ?? ''} onChange={(e) => onChange(e.target.value.trim() || undefined)} />
 }
 
+/**
+ * A form to draw inside this one: the screens with fields of their own (a list
+ * screen has nothing to fill in), never this one — a form cannot hold itself.
+ */
+function FormEditor({ id, value, onChange, screens, doc }) {
+  const forms = (screens || []).filter((s) => (!doc || s.id !== doc.id)
+    && (!s.document || (s.document.nodes || []).some((n) => n.props && n.props.name)))
+  if (forms.length) {
+    return (
+      <select id={id} className="xeplr-factory-prop-input" value={value ?? ''} onChange={(e) => onChange(e.target.value || undefined)}>
+        <option value="">— choose a form</option>
+        {forms.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+      </select>
+    )
+  }
+  return <input id={id} className="xeplr-factory-prop-input xeplr-factory-mono" type="text" placeholder="bank_details_edit" value={value ?? ''} onChange={(e) => onChange(e.target.value.trim() || undefined)} />
+}
+
 const ACTION_LABELS = { new: 'New — add a record', edit: 'Edit — open a row for editing', delete: 'Delete — remove a row' }
 
 function ActionsEditor({ value, onChange }) {
@@ -522,7 +750,9 @@ export const EDITORS = {
   color: ColorEditor,
   table: TableEditor,
   screen: ScreenEditor,
+  form: FormEditor,
   columns: ColumnsEditor,
+  listTable: ListTableEditor,
   actions: ActionsEditor,
   dataSource: DataSourceEditor
 }

package/src/designs/ScreenSample.jsx

@@ -124,7 +124,7 @@ function SaveButtons({ ctrl }) {
   )
 }
 
-export default function ScreenSample({ ctrl, className, style, renderPopup }) {
+export default function ScreenSample({ ctrl, className, style, renderPopup, renderSubform }) {
   const { document: doc } = ctrl
 
   if (ctrl.documentErrors.length) {
@@ -147,20 +147,23 @@ export default function ScreenSample({ ctrl, className, style, renderPopup }) {
   // A screen with no fields of its own (a list screen) has nothing to save —
   // and no sheet: its list is the card (factory.css, --bare).
   const hasFields = fieldNodes.length > 0
-  const status = hasFields ? <SaveStatus ctrl={ctrl} /> : null
+  // A form inside another has no footer of its own: the host's Save saves it.
+  const footer = !ctrl.embedded
+  const status = hasFields && footer ? <SaveStatus ctrl={ctrl} /> : null
+  // Nor a <form> of its own — one form inside another is not valid HTML.
+  const Page = ctrl.embedded ? 'div' : 'form'
   const steppers = ctrl.steps.nodes
 
   return (
     <div
-      className={'xeplr-factory-screen' + (hasFields ? '' : ' xeplr-factory-screen--bare') + (className ? ' ' + className : '')}
+      className={'xeplr-factory-screen' + (hasFields ? '' : ' xeplr-factory-screen--bare') + (ctrl.embedded ? ' xeplr-factory-screen--embedded' : '') + (className ? ' ' + className : '')}
       style={{ maxWidth: doc.width, '--xf-margin': `${MARGIN * 100}%`, ...screenStyle(doc), ...style }}
     >
-      <form
+      <Page
         className="xeplr-factory-page"
         style={{ height: `${pageHeight}cqw` }}
         // Never a submit: Enter posts nothing and saves nothing. Save is a button.
-        onSubmit={(e) => e.preventDefault()}
-        noValidate
+        {...(ctrl.embedded ? { role: 'group' } : { onSubmit: (e) => e.preventDefault(), noValidate: true })}
         aria-label={doc.name}
       >
         {[...shown].sort((a, b) => (a.z || 0) - (b.z || 0)).map((node) => (
@@ -206,19 +209,22 @@ export default function ScreenSample({ ctrl, className, style, renderPopup }) {
                 onDelete: (rec) => ctrl.deleteRecord(node, rec).catch((err) => window.alert(err.message || 'Could not delete')),
                 onNew: () => (node.props.editScreen ? ctrl.openEditor(node, null) : (ctrl.confirmDiscard() && ctrl.newRecord()))
               } : undefined}
+              // A form inside this one: the page draws it (renderSubform).
+              subform={node.type === 'subform' ? { sub: ctrl.subformFor(node), render: renderSubform } : undefined}
             />
           </div>
         ))}
-      </form>
+      </Page>
       {steppers.map((node, i) => {
         const last = i === steppers.length - 1
         return (
+          // An embedded form keeps its Back and Next; only Save is the host's.
           <StepNav key={node.id} ctrl={ctrl} node={node} status={last ? status : null}>
-            {last && (hasFields || ctrl.doneLabel) && <SaveButtons ctrl={ctrl} />}
+            {last && footer && (hasFields || ctrl.doneLabel) && <SaveButtons ctrl={ctrl} />}
           </StepNav>
         )
       })}
-      {!steppers.length && (hasFields || ctrl.doneLabel) && (
+      {footer && !steppers.length && (hasFields || ctrl.doneLabel) && (
         <div className="xeplr-factory-footer">
           <div className="xeplr-factory-footer-mid">{status}</div>
           <SaveButtons ctrl={ctrl} />

package/src/designs/factory.css

@@ -98,6 +98,31 @@
 .xeplr-factory-input:hover { border-color: color-mix(in srgb, var(--xf-accent) 45%, var(--xf-field-border)); }
 .xeplr-factory-textarea { padding-block: calc(8 * var(--xf-u)); resize: none; }
 .xeplr-factory-input:focus { outline: none; border-color: var(--xf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-accent) 25%, transparent); }
+
+/* ── Dropdowns ─────────────────────────────────────────────────────────────
+   Every <select> the factory draws — on a screen, in the builder's panels, in
+   the flow designer — gets our own chevron, inset from the edge with room
+   kept for it. The browser's own sat against the border and in a different
+   place per platform. Drawn with two gradients rather than an SVG, so it is
+   the theme's muted ink and follows a dark theme. Only background-image and
+   its longhands are set: each box keeps its own colour, and a control's
+   Background (boxStyle) is a background-COLOR so it cannot wipe the arrow. */
+:is(.xeplr-factory-screen, .xeplr-factory-canvas, .xeplr-factory-flow-builder, .xeplr-factory-builder, .xeplr-factory-modal-backdrop) select:not([multiple]) {
+  -webkit-appearance: none;
+  appearance: none;
+  /* Two thin diagonals side by side — each corner to corner of its own small
+     square — meet at the bottom as a ∨. */
+  background-image:
+    linear-gradient(45deg, transparent 42%, var(--xf-muted) 42%, var(--xf-muted) 58%, transparent 58%),
+    linear-gradient(135deg, transparent 42%, var(--xf-muted) 42%, var(--xf-muted) 58%, transparent 58%);
+  background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
+  background-size: 6px 6px, 6px 6px;
+  background-repeat: no-repeat;
+  padding-right: 30px;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+:is(.xeplr-factory-screen, .xeplr-factory-canvas, .xeplr-factory-flow-builder, .xeplr-factory-builder, .xeplr-factory-modal-backdrop) select:not([multiple]):disabled { cursor: default; opacity: .6; }
 .xeplr-factory-field.has-error .xeplr-factory-input { border-color: var(--xf-danger); }
 .xeplr-factory-error {
   /* In the gap BELOW the field, out of flow: a message appearing must not
@@ -216,6 +241,19 @@
 .xeplr-factory-text { margin: 0; color: var(--xf-ink); height: 100%; overflow: hidden; line-height: 1.25; box-sizing: border-box; }
 .xeplr-factory-text--text { color: var(--xf-muted); }
 
+/* ── a form inside a form ────────────────────────────────────────────────
+   The inner form is drawn as itself, without its own sheet or footer: it is
+   part of this page, and its Save is this page's Save. Its box scrolls when
+   the form is taller than the space it was given. */
+.xeplr-factory-subform { display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; box-sizing: border-box; overflow: auto; }
+.xeplr-factory-subform-title { font-weight: 600; font-size: 1.05em; color: var(--xf-ink); }
+.xeplr-factory-screen--embedded { border: none; border-radius: 0; background: none; }
+.xeplr-factory-subform--design {
+  justify-content: center; align-items: center; text-align: center; padding: 12px;
+  border: 1px dashed var(--xf-border); border-radius: 10px; color: var(--xf-muted);
+}
+.xeplr-factory-subform-what code { color: var(--xf-ink); }
+
 /* ── list ───────────────────────────────────────────────────────────────── */
 .xeplr-factory-list {
   display: flex; flex-direction: column; width: 100%; box-sizing: border-box; overflow: auto;
@@ -310,6 +348,7 @@
 .xeplr-factory-palette-icon--file { border-radius: 2px; border-top: 3px solid var(--xf-muted); height: 12px; width: 10px; }
 .xeplr-factory-palette-icon--stepper { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--xf-muted) 0 30%, transparent 30%); border: none; }
 .xeplr-factory-palette-icon--label { border: none; border-top: 2px solid var(--xf-muted); border-bottom: 2px solid var(--xf-muted); height: 6px; }
+.xeplr-factory-palette-icon--subform { border-style: double; border-width: 3px; height: 11px; }
 .xeplr-factory-palette-icon--list { height: 12px; background: repeating-linear-gradient(to bottom, var(--xf-muted) 0 1.5px, transparent 1.5px 4px); border: none; }
 .xeplr-factory-palette-icon--textarea { height: 14px; }
 
@@ -460,3 +499,28 @@
   padding: 16px; border-radius: 8px; border: 1px solid var(--xf-border);
   background: var(--xf-surface); color: var(--xf-ink);
 }
+
+
+/* ── a child table, designed where it was made ─────────────────────────── */
+/* Wide, because what is inside is a whole designer: palette, canvas and
+   property panel. A form builder in a dialog box is a canvas nobody can
+   work on. */
+.xeplr-factory-modal--wide {
+  width: min(1600px, 96vw);
+  height: min(1000px, 92vh);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.xeplr-factory-modal-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--xf-border);
+}
+.xeplr-factory-modal-spacer { flex: 1; }
+/* hidden, not auto: the builder inside manages its own panes */
+.xeplr-factory-modal-body { flex: 1; min-height: 0; overflow: hidden; }
+.xeplr-factory-modal-body > * { height: 100%; }
+.xeplr-factory-builder--nested { min-height: 0; }

package/src/designs/styles.js

@@ -32,7 +32,7 @@ export function boxStyle(style) {
     fontStyle: s.fontStyle,
     textAlign: s.textAlign,
     color: s.color,
-    background: s.background,
+    backgroundColor: s.background,
     borderColor: s.borderColor,
     borderWidth: s.borderWidth != null ? `${s.borderWidth}px` : undefined,
     borderStyle: s.borderWidth != null ? 'solid' : undefined,

package/src/document.js

@@ -33,6 +33,53 @@ export const MARGIN = 0.04
 export const GAP = 0.025
 
 /** A new, empty screen. */
+/**
+ * WHAT A SCREEN IS CALLED WITH.
+ *
+ * A form can need things it must not ask for: a containment needs the
+ * complaint it belongs to, and the person filling it in does not know a
+ * twenty-five character id. So a screen declares its INPUTS the way an action
+ * declares its inputSchema — one named list, at the screen — and a field
+ * binds to one with the same `{token}` this product uses everywhere else:
+ *
+ *   props.default = '{params.complaintId}'
+ *
+ * A value with a token is a binding; a plain value is a literal. Nothing is
+ * marked on the field, because nothing needs to be: the brace already says
+ * which it is.
+ *
+ * Written as a plain list of names, the shortest thing that answers the
+ * question — "this form needs contentId, age, name".
+ */
+export function screenParams(doc) {
+  var raw = (doc && doc.params) || []
+  if (typeof raw === 'string') raw = raw.split(',')
+  return raw
+    .map(function (p) { return typeof p === 'string' ? { name: p.trim() } : p })
+    .filter(function (p) { return p && p.name })
+}
+
+/** The list as one line, which is how it is typed. */
+export function paramsText(doc) {
+  return screenParams(doc).map(function (p) { return p.name }).join(', ')
+}
+
+/** One line back to the list, for the panel. */
+export function setScreenParams(doc, text) {
+  var names = String(text == null ? '' : text)
+    .split(',')
+    .map(function (n) { return n.trim() })
+    .filter(Boolean)
+  var seen = {}
+  var params = []
+  names.forEach(function (n) {
+    if (seen[n]) return
+    seen[n] = true
+    params.push({ name: n })
+  })
+  return Object.assign({}, doc, { params: params })
+}
+
 export function createScreen({ name, id, aspect, width, source, style } = {}) {
   const title = String(name || 'Untitled screen').trim() || 'Untitled screen'
   const doc = {
@@ -60,6 +107,10 @@ export function renameScreen(doc, name) {
  */
 export function setScreenProperty(doc, path, value) {
   if (path === 'nodes' || path.startsWith('nodes.')) throw new Error('setScreenProperty cannot change nodes')
+  // The inputs are TYPED as one line and STORED as a list, so the document
+  // stays self-describing — the server, the CLI and a flow read names, not a
+  // string somebody has to split again.
+  if (path === 'paramsLine') return setScreenParams(doc, value)
   return setAtPath(doc, path, value)
 }
 

package/src/index.js

@@ -14,7 +14,9 @@ export { useFactoryScreen, normaliseOptions } from './useFactoryScreen.js'
 // This app's screens, shaped for another package's designer — see
 // useScreenSource.js. Two props instead of a page of glue per application.
 export { useScreenSource } from './useScreenSource.js'
-export { describeScreen, screenStub, loadScreens, keyFromName, editScreenOf } from './screenSource.js'
+export { describeScreen, screenStub, loadScreens, keyFromName, editScreenOf, masterForms, formKeyOf, deleteForm } from './screenSource.js'
+// Making a master: the one form shape every application repeats.
+export { masterSpec, createMaster, possibleParents, singularOf, MASTER_LABEL, MASTER_ORDER, childSpec, createChildTable } from './masters.js'
 export { useFlowRun } from './useFlowRun.js'
 export { useFlowBuilder, FLOW_AUTOSAVE_DELAY } from './useFlowBuilder.js'