@xeplr/ui-factory 1.8.3 → 1.8.4

package/src/designs/PropertyPanel.jsx

@@ -4,6 +4,7 @@ import { FIELD_PRESETS, presetFor } from '../presets.js'
 import { slugify, inputNodes, paramsText, screenParams } from '../document.js'
 import { isBinding, previousBinding } from '../values.js'
 import { FONT_FAMILIES, STYLE_KEYS, SCREEN_STYLE_KEYS, LIST_ACTIONS, FILE_KINDS } from '../controls.js'
+import { BUTTON_VARIANTS, COLUMN_DISPLAYS, BADGE_TONES, CONDITION_OPERATORS, NOTE_INPUT, optionValues } from '../buttons.js'
 
 // The selected control's properties, GENERATED from its entry in controls.js:
 // each field there names a path and an editor type, and this file owns only
@@ -59,7 +60,7 @@ function FieldType({ node, controls, hint, onConvert, onKeepPlain }) {
   )
 }
 
-export default function PropertyPanel({ doc, node, control, controls, errors, tables, screens, forms, lockedNames, onChange, onConvert, hint, onScreenChange, onRemove, onMakeChildTable, selectionCount }) {
+export default function PropertyPanel({ doc, node, control, controls, errors, tables, functions, screens, forms, lockedNames, onChange, onConvert, hint, onScreenChange, onRemove, onMakeChildTable, selectionCount }) {
   if (selectionCount > 1) {
     return (
       <aside className="xeplr-factory-panel">
@@ -103,13 +104,14 @@ export default function PropertyPanel({ doc, node, control, controls, errors, ta
             const value = field.path === 'props.default' && field.type !== 'fillFrom' && isBinding(raw) ? undefined : raw
             return (
               <div key={field.path + ':' + field.type} className={`xeplr-factory-prop${errs.length ? ' has-error' : ''}`}>
-                {field.type !== 'toggle' && field.type !== 'toggleValue' && field.type !== 'columns' && field.type !== 'actions' && <label className="xeplr-factory-prop-label" htmlFor={id}>{field.label}</label>}
+                {!SELF_LABELLED.includes(field.type) && <label className="xeplr-factory-prop-label" htmlFor={id}>{field.label}</label>}
                 <Editor
                   id={id}
                   field={field}
                   value={value}
                   onChange={(v) => onChange(field.path, v)}
                   tables={tables}
+                  functions={functions}
                   screens={screens}
                   forms={forms}
                   node={node}
@@ -494,7 +496,10 @@ function TableEditor({ id, value, onChange, tables }) {
  * are this screen's own — or, for a list screen, those of the screen it edits
  * in. Nothing ticked means all of them.
  */
-function ColumnsEditor({ value, onChange, doc, node, screens }) {
+function ColumnsEditor({ value, onChange, doc, node, screens, functions }) {
+  // A list fed by a function has no form describing its rows: its columns
+  // are written out, each saying what it shows and how.
+  if (node && node.props && node.props.rowsFrom) return <FedColumnsEditor value={value} onChange={onChange} functions={functions} />
   const editDoc = node && node.props.editScreen ? (screens || []).find((s) => s.id === node.props.editScreen)?.document : null
 
   // A LIST OF ANOTHER TABLE IS NOT DESCRIBED BY THIS SCREEN. Pointing a list
@@ -549,6 +554,9 @@ function ScreenEditor({ id, value, onChange, screens, doc }) {
     return (
       <select id={id} className="xeplr-factory-prop-input" value={value ?? ''} onChange={(e) => onChange(e.target.value || undefined)}>
         <option value="">— open rows in this screen's fields</option>
+        {/* A screen not in the list (not loaded, another app's) is still the
+            setting — shown by its id, not as if it had been cleared. */}
+        {value && !others.some((s) => s.id === value) && <option value={value}>{value}</option>}
         {others.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
       </select>
     )
@@ -778,6 +786,327 @@ function uniqueStepKey(steps, base) {
   return `${base}_${n}`
 }
 
+/** Editors that draw their own label (a toggle's is beside it; a list of rows has a heading per row). */
+const SELF_LABELLED = ['toggle', 'toggleValue', 'columns', 'actions', 'filters', 'buttons']
+
+/**
+ * One of the app's registered functions, for one purpose (`field.event`):
+ * picked from those registered for it. A name that is no longer registered
+ * stays shown, marked — not silently blanked.
+ */
+function FunctionEditor({ id, field, value, onChange, functions }) {
+  const pick = functions && functions.forEvent ? functions.forEvent(field.event) : []
+  if (!functions || (!pick.length && !functions.loading)) {
+    return (
+      <>
+        <input id={id} className="xeplr-factory-prop-input" value={value || ''} placeholder="functionName" onChange={(e) => onChange(e.target.value.trim() || undefined)} />
+        {functions && !functions.loading && <div className="xeplr-factory-prop-help">No function is registered for “{field.event}” — the app registers one with @xeplr/actions.</div>}
+      </>
+    )
+  }
+  const known = !value || pick.some((f) => f.name === value)
+  const chosen = pick.find((f) => f.name === value)
+  return (
+    <>
+      <select id={id} className="xeplr-factory-prop-input" value={value || ''} onChange={(e) => onChange(e.target.value || undefined)}>
+        <option value="">— none —</option>
+        {!known && <option value={value}>{value} (not registered)</option>}
+        {pick.map((f) => <option key={f.name} value={f.name}>{f.name}</option>)}
+      </select>
+      {chosen && chosen.description && <div className="xeplr-factory-prop-help">{chosen.description}</div>}
+    </>
+  )
+}
+
+/** A list's filter chips: key (what the function is asked for) and the chip's text. */
+function FiltersEditor({ value, onChange }) {
+  const chips = Array.isArray(value) ? value : []
+  const set = (next) => onChange(next.length ? next : undefined)
+  const edit = (i, patch) => set(chips.map((c, j) => (j === i ? { ...c, ...patch } : c)))
+  return (
+    <div className="xeplr-factory-rows-editor">
+      <div className="xeplr-factory-prop-label">Filter chips</div>
+      {chips.map((c, i) => (
+        <div key={i} className="xeplr-factory-rows-editor-row">
+          <input className="xeplr-factory-prop-input" aria-label={`Chip ${i + 1} text`} placeholder="Packed" value={c.label || ''}
+                 onChange={(e) => edit(i, { label: e.target.value, ...(c.key && c.key !== slugify(c.label || '', '-') ? {} : { key: slugify(e.target.value, '-') }) })} />
+          <input className="xeplr-factory-prop-input xeplr-factory-prop-input--key" aria-label={`Chip ${i + 1} key`} placeholder="packed" value={c.key || ''}
+                 onChange={(e) => edit(i, { key: e.target.value.trim() })} />
+          <RowTools i={i} count={chips.length} onMove={(to) => set(move(chips, i, to))} onRemove={() => set(chips.filter((_, j) => j !== i))} />
+        </div>
+      ))}
+      <button type="button" className="xeplr-factory-secondary" onClick={() => set([...chips, { key: chips.length ? `chip-${chips.length + 1}` : 'all', label: chips.length ? '' : 'All' }])}>+ Chip</button>
+    </div>
+  )
+}
+
+/** Each column of a list fed by a function: what it sorts by, what it shows, how. */
+function FedColumnsEditor({ value, onChange, functions }) {
+  const cols = Array.isArray(value) ? value : []
+  const set = (next) => onChange(next.length ? next : undefined)
+  const edit = (i, patch) => set(cols.map((c, j) => {
+    if (j !== i) return c
+    const next = { ...c, ...patch }
+    Object.keys(next).forEach((k) => { if (next[k] === undefined || next[k] === '') delete next[k] })
+    return next
+  }))
+  const details = functions && functions.forEvent ? functions.forEvent('rowDetails') : []
+  return (
+    <div className="xeplr-factory-rows-editor">
+      <div className="xeplr-factory-prop-label">Columns</div>
+      {cols.map((c, i) => (
+        <fieldset key={i} className="xeplr-factory-rows-editor-card">
+          <legend>{c.label || `Column ${i + 1}`}</legend>
+          <RowTools i={i} count={cols.length} onMove={(to) => set(move(cols, i, to))} onRemove={() => set(cols.filter((_, j) => j !== i))} />
+          <MiniField label="Heading"><input className="xeplr-factory-prop-input" value={c.label || ''} onChange={(e) => edit(i, { label: e.target.value })} /></MiniField>
+          <MiniField label="Sorts by (field)"><input className="xeplr-factory-prop-input" value={c.field || ''} placeholder="placedAt" onChange={(e) => edit(i, { field: e.target.value.trim() })} /></MiniField>
+          <MiniField label="Shows (field)" help="Blank → the value itself"><input className="xeplr-factory-prop-input" value={c.text || ''} placeholder="placedText" onChange={(e) => edit(i, { text: e.target.value.trim() })} /></MiniField>
+          <MiniField label="Second line (field)"><input className="xeplr-factory-prop-input" value={c.sub || ''} onChange={(e) => edit(i, { sub: e.target.value.trim() })} /></MiniField>
+          <MiniField label="Drawn as">
+            <select className="xeplr-factory-prop-input" value={c.display || 'text'} onChange={(e) => edit(i, { display: e.target.value === 'text' ? undefined : e.target.value, ...(e.target.value !== 'images' ? { more: undefined } : {}), ...(e.target.value !== 'activity' ? { details: undefined } : {}) })}>
+              {COLUMN_DISPLAYS.map((d) => <option key={d} value={d}>{DISPLAY_LABELS[d]}</option>)}
+            </select>
+          </MiniField>
+          {c.display === 'images' && <MiniField label="How many more (field)"><input className="xeplr-factory-prop-input" value={c.more || ''} onChange={(e) => edit(i, { more: e.target.value.trim() })} /></MiniField>}
+          {c.display === 'activity' && (
+            <MiniField label="Hover box from">
+              <select className="xeplr-factory-prop-input" value={c.details || ''} onChange={(e) => edit(i, { details: e.target.value || undefined })}>
+                <option value="">— none —</option>
+                {c.details && !details.some((f) => f.name === c.details) && <option value={c.details}>{c.details} (not registered)</option>}
+                {details.map((f) => <option key={f.name} value={f.name}>{f.name}</option>)}
+              </select>
+            </MiniField>
+          )}
+          <MiniField label="Badges" help="field:Text:tone, … — shown where the field is true. Tones: accent, success, warning, danger, muted">
+            <input className="xeplr-factory-prop-input" value={badgesText(c.badges)} placeholder="isNew:New, cancelled:Cancelled:danger"
+                   onChange={(e) => edit(i, { badges: parseBadges(e.target.value) })} />
+          </MiniField>
+          <label className="xeplr-factory-toggle">
+            <input type="checkbox" checked={c.sortable !== false} onChange={(e) => edit(i, { sortable: e.target.checked ? undefined : false })} />
+            <span>Sortable</span>
+          </label>
+        </fieldset>
+      ))}
+      <button type="button" className="xeplr-factory-secondary" onClick={() => set([...cols, { field: `column${cols.length + 1}`, label: `Column ${cols.length + 1}` }])}>+ Column</button>
+    </div>
+  )
+}
+
+const DISPLAY_LABELS = { text: 'Text', images: 'Pictures', activity: 'Latest activity (with hover box)' }
+
+function badgesText(badges) {
+  return (Array.isArray(badges) ? badges : []).map((b) => [b.field, b.label, b.tone].filter(Boolean).join(':')).join(', ')
+}
+
+function parseBadges(text) {
+  const list = String(text || '').split(',').map((part) => part.trim()).filter(Boolean).map((part) => {
+    const [field, label, tone] = part.split(':').map((x) => x.trim())
+    const b = { field, label: label || field }
+    if (tone && BADGE_TONES.includes(tone)) b.tone = tone
+    return b
+  })
+  return list.length ? list : undefined
+}
+
+/**
+ * A PANEL'S BUTTONS. Each is a function of the app and the values it is given:
+ * picking the function lists the parameters it takes — a dropdown where it
+ * names the values allowed. Then what to ask first, and when it shows or is
+ * greyed out.
+ */
+function ButtonsEditor({ value, onChange, functions }) {
+  const buttons = Array.isArray(value) ? value : []
+  const set = (next) => onChange(next)
+  const edit = (i, patch) => set(buttons.map((b, j) => {
+    if (j !== i) return b
+    const next = { ...b, ...patch }
+    Object.keys(next).forEach((k) => { if (next[k] === undefined) delete next[k] })
+    return next
+  }))
+  const pick = functions && functions.forEvent ? functions.forEvent('button') : []
+  const takenIds = (except) => new Set(buttons.filter((_, j) => j !== except).map((b) => b.id))
+  const add = () => {
+    const ids = takenIds(-1)
+    let n = buttons.length + 1
+    while (ids.has(`button-${n}`)) n += 1
+    set([...buttons, { id: `button-${n}`, label: `Button ${n}`, action: pick[0] ? pick[0].name : '' }])
+  }
+  return (
+    <div className="xeplr-factory-rows-editor">
+      <div className="xeplr-factory-prop-label">Buttons</div>
+      {!pick.length && functions && !functions.loading && (
+        <div className="xeplr-factory-prop-help">No function is registered for buttons — the app registers one with @xeplr/actions and event “button”.</div>
+      )}
+      {buttons.map((b, i) => {
+        const fn = pick.find((f) => f.name === b.action) || null
+        const schema = (fn && fn.inputSchema) || []
+        const takesNote = schema.some((f) => f.name === NOTE_INPUT)
+        return (
+          <fieldset key={i} className="xeplr-factory-rows-editor-card">
+            <legend>{b.label || `Button ${i + 1}`}</legend>
+            <RowTools i={i} count={buttons.length} onMove={(to) => set(move(buttons, i, to))} onRemove={() => set(buttons.filter((_, j) => j !== i))} />
+            <MiniField label="Label">
+              <input className="xeplr-factory-prop-input" value={b.label || ''} onChange={(e) => {
+                const label = e.target.value
+                const auto = !b.id || /^button-\d+$/.test(b.id) || b.id === slugify(b.label || '', '-')
+                const id = auto ? uniqueId(slugify(label, '-') || `button-${i + 1}`, takenIds(i)) : b.id
+                edit(i, { label, id })
+              }} />
+            </MiniField>
+            <MiniField label="Runs">
+              <select className="xeplr-factory-prop-input" value={b.action || ''} onChange={(e) => edit(i, { action: e.target.value, params: undefined })}>
+                <option value="">— choose a function —</option>
+                {b.action && !fn && <option value={b.action}>{b.action} (not registered)</option>}
+                {pick.map((f) => <option key={f.name} value={f.name}>{f.name}</option>)}
+              </select>
+            </MiniField>
+            {fn && fn.description && <div className="xeplr-factory-prop-help">{fn.description}</div>}
+            {schema.filter((f) => f.name !== NOTE_INPUT).map((f) => (
+              <MiniField key={f.name} label={(f.label || f.name) + (f.required && f.default === undefined ? ' *' : '')} help={f.description}>
+                <ParamInput field={f} value={b.params ? b.params[f.name] : undefined} onChange={(v) => {
+                  const params = { ...(b.params || {}) }
+                  if (v === undefined || v === '') delete params[f.name]; else params[f.name] = v
+                  edit(i, { params: Object.keys(params).length ? params : undefined })
+                }} />
+              </MiniField>
+            ))}
+            <label className="xeplr-factory-toggle">
+              <input type="checkbox" checked={Boolean(b.ask)} onChange={(e) => edit(i, { ask: e.target.checked ? { title: `${b.label || 'Continue'}?` } : undefined })} />
+              <span>Ask first</span>
+            </label>
+            {b.ask && (
+              <>
+                <MiniField label="Question"><input className="xeplr-factory-prop-input" value={b.ask.title || ''} onChange={(e) => edit(i, { ask: clean({ ...b.ask, title: e.target.value }) })} /></MiniField>
+                <MiniField label="Explanation"><input className="xeplr-factory-prop-input" value={b.ask.message || ''} onChange={(e) => edit(i, { ask: clean({ ...b.ask, message: e.target.value }) })} /></MiniField>
+                {takesNote
+                  ? <MiniField label="Note box label" help="Blank → no note box"><input className="xeplr-factory-prop-input" value={b.ask.note || ''} placeholder="Reason (optional)" onChange={(e) => edit(i, { ask: clean({ ...b.ask, note: e.target.value }) })} /></MiniField>
+                  : fn && <div className="xeplr-factory-prop-help">{fn.name} takes no note.</div>}
+              </>
+            )}
+            <ConditionsEditor label="Shows when" value={b.when} onChange={(v) => edit(i, { when: v })} />
+            <ConditionsEditor label="Greyed out when" value={b.disabledWhen} onChange={(v) => edit(i, { disabledWhen: v })} />
+            <MiniField label="Look">
+              <select className="xeplr-factory-prop-input" value={b.variant || 'default'} onChange={(e) => edit(i, { variant: e.target.value === 'default' ? undefined : e.target.value })}>
+                {BUTTON_VARIANTS.map((v) => <option key={v} value={v}>{VARIANT_LABELS[v]}</option>)}
+              </select>
+            </MiniField>
+          </fieldset>
+        )
+      })}
+      <button type="button" className="xeplr-factory-secondary" onClick={add}>+ Button</button>
+    </div>
+  )
+}
+
+const VARIANT_LABELS = { default: 'Ordinary', primary: 'Main', danger: 'Undo / remove' }
+
+/** One parameter's value: a dropdown when the function names the values allowed. */
+function ParamInput({ field, value, onChange }) {
+  const allowed = optionValues(field.options)
+  if (allowed.length) {
+    const labelOf = (v) => {
+      const o = (field.options || []).find((x) => x && typeof x === 'object' && x.value === v)
+      return o && o.label ? o.label : String(v)
+    }
+    return (
+      <select className="xeplr-factory-prop-input" value={value === undefined ? '' : String(value)} onChange={(e) => {
+        const hit = allowed.find((v) => String(v) === e.target.value)
+        onChange(hit === undefined ? undefined : hit)
+      }}>
+        <option value="">—</option>
+        {allowed.map((v) => <option key={String(v)} value={String(v)}>{labelOf(v)}</option>)}
+      </select>
+    )
+  }
+  if (field.type === 'boolean') {
+    return (
+      <select className="xeplr-factory-prop-input" value={value === undefined ? '' : String(value)} onChange={(e) => onChange(e.target.value === '' ? undefined : e.target.value === 'true')}>
+        <option value="">{field.default === undefined ? '—' : `Default (${field.default ? 'yes' : 'no'})`}</option>
+        <option value="true">Yes</option>
+        <option value="false">No</option>
+      </select>
+    )
+  }
+  if (field.type === 'number') {
+    return <input type="number" className="xeplr-factory-prop-input" value={value ?? ''} onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))} />
+  }
+  return <input className="xeplr-factory-prop-input" value={value ?? ''} onChange={(e) => onChange(e.target.value)} />
+}
+
+/** Conditions on the record: every one must match. */
+function ConditionsEditor({ label, value, onChange }) {
+  const rules = Array.isArray(value) ? value : []
+  const set = (next) => onChange(next.length ? next : undefined)
+  const edit = (i, patch) => set(rules.map((r, j) => {
+    if (j !== i) return r
+    const next = { ...r, ...patch }
+    const op = CONDITION_OPERATORS.find((o) => o.key === next.op)
+    if (op && op.noValue) { delete next.value; delete next.value2 }
+    if (op && !op.second) delete next.value2
+    return next
+  }))
+  return (
+    <div className="xeplr-factory-conditions">
+      <div className="xeplr-factory-prop-label">{label}{rules.length > 1 ? ' — all of these' : ''}</div>
+      {rules.map((r, i) => {
+        const op = CONDITION_OPERATORS.find((o) => o.key === r.op)
+        return (
+          <div key={i} className="xeplr-factory-rows-editor-row">
+            <input className="xeplr-factory-prop-input" aria-label="Field" placeholder="customStatus" value={r.field || ''} onChange={(e) => edit(i, { field: e.target.value.trim() })} />
+            <select className="xeplr-factory-prop-input" aria-label="Comparison" value={r.op || 'eq'} onChange={(e) => edit(i, { op: e.target.value })}>
+              {CONDITION_OPERATORS.map((o) => <option key={o.key} value={o.key}>{o.label}</option>)}
+            </select>
+            {!(op && op.noValue) && <input className="xeplr-factory-prop-input" aria-label="Value" value={r.value ?? ''} onChange={(e) => edit(i, { value: e.target.value })} />}
+            {op && op.second && <input className="xeplr-factory-prop-input" aria-label="And" value={r.value2 ?? ''} onChange={(e) => edit(i, { value2: e.target.value })} />}
+            <button type="button" className="xeplr-factory-link-danger" aria-label="Remove condition" onClick={() => set(rules.filter((_, j) => j !== i))}>×</button>
+          </div>
+        )
+      })}
+      <button type="button" className="xeplr-factory-link" onClick={() => set([...rules, { field: '', op: 'eq', value: '' }])}>+ Condition</button>
+    </div>
+  )
+}
+
+function MiniField({ label, help, children }) {
+  return (
+    <label className="xeplr-factory-mini">
+      <span className="xeplr-factory-mini-label">{label}</span>
+      {children}
+      {help && <span className="xeplr-factory-prop-help">{help}</span>}
+    </label>
+  )
+}
+
+function RowTools({ i, count, onMove, onRemove }) {
+  return (
+    <span className="xeplr-factory-rows-editor-tools">
+      <button type="button" className="xeplr-factory-link" aria-label="Move up" disabled={i === 0} onClick={() => onMove(i - 1)}>↑</button>
+      <button type="button" className="xeplr-factory-link" aria-label="Move down" disabled={i === count - 1} onClick={() => onMove(i + 1)}>↓</button>
+      <button type="button" className="xeplr-factory-link-danger" aria-label="Remove" onClick={onRemove}>×</button>
+    </span>
+  )
+}
+
+function move(list, from, to) {
+  const next = list.slice()
+  const [item] = next.splice(from, 1)
+  next.splice(to, 0, item)
+  return next
+}
+
+function uniqueId(base, taken) {
+  if (!taken.has(base)) return base
+  let n = 2
+  while (taken.has(`${base}-${n}`)) n += 1
+  return `${base}-${n}`
+}
+
+function clean(obj) {
+  const out = {}
+  Object.keys(obj).forEach((k) => { if (obj[k] !== undefined && obj[k] !== '') out[k] = obj[k] })
+  return out
+}
+
 export const EDITORS = {
   text: TextEditor,
   textarea: TextareaEditor,
@@ -798,5 +1127,8 @@ export const EDITORS = {
   columns: ColumnsEditor,
   listTable: ListTableEditor,
   actions: ActionsEditor,
-  dataSource: DataSourceEditor
+  dataSource: DataSourceEditor,
+  function: FunctionEditor,
+  filters: FiltersEditor,
+  buttons: ButtonsEditor
 }

package/src/designs/ScreenSample.jsx

@@ -183,6 +183,11 @@ export default function ScreenSample({ ctrl, className, style, renderPopup, rend
   // 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
+  // A list that grows with its rows, or a panel of buttons (wrapping on a
+  // narrow screen) — its screen's one control: the page is as tall as it is,
+  // rather than it scrolling or spilling out of a fixed box.
+  const only = shown.length === 1 ? shown[0] : null
+  const grows = Boolean(only && ((only.type === 'list' && only.props && only.props.grow) || only.type === 'buttons'))
 
   return (
     <div
@@ -190,7 +195,7 @@ export default function ScreenSample({ ctrl, className, style, renderPopup, rend
       style={{ maxWidth: doc.width, '--xf-margin': `${MARGIN * 100}%`, ...screenStyle(doc), ...style }}
     >
       <Page
-        className="xeplr-factory-page"
+        className={'xeplr-factory-page' + (grows ? ' xeplr-factory-page--grows' : '')}
         style={{ '--xf-page-h': `${pageHeight}cqw` }}
         // Never a submit: Enter posts nothing and saves nothing. Save is a button.
         {...(ctrl.embedded ? { role: 'group' } : { onSubmit: (e) => e.preventDefault(), noValidate: true })}
@@ -232,6 +237,11 @@ export default function ScreenSample({ ctrl, className, style, renderPopup, rend
                 recordKey: ctrl.recordKey,
                 canDelete: ctrl.canDelete,
                 extraActions: ctrl.actionsFor ? ctrl.actionsFor(node) : [],
+                // Rows a function works out: what they are narrowed to, a
+                // cell's hover box, and a row opened at one part of it.
+                query: ctrl.listQuery,
+                rowDetails: ctrl.rowDetails,
+                onOpen: (rec, where) => ctrl.openEditor(node, rec, where),
                 // A list with an edit screen opens it in a popup; one on a form
                 // opens the row in the form's own fields.
                 // A list on the form itself swaps the record in the fields — so
@@ -243,6 +253,7 @@ export default function ScreenSample({ ctrl, className, style, renderPopup, rend
               } : undefined}
               // A form inside this one: the page draws it (renderSubform).
               subform={node.type === 'subform' ? { sub: ctrl.subformFor(node), render: renderSubform } : undefined}
+              buttons={node.type === 'buttons' && ctrl.buttonsFor ? ctrl.buttonsFor(node) : undefined}
             />
           </div>
         ))}

package/src/designs/factory.css

@@ -70,6 +70,12 @@
   position: absolute; box-sizing: border-box;
   left: var(--xf-x); top: var(--xf-y); width: var(--xf-w); height: var(--xf-h);
 }
+/* A list that grows with its rows (props.grow), or a panel of buttons — its
+   screen's one control: in the flow, where it was placed across, as tall as
+   it needs. */
+.xeplr-factory-page--grows { height: auto; }
+.xeplr-factory-page--grows > .xeplr-factory-node { position: static; margin: var(--xf-y) 0 0 var(--xf-x); height: auto; }
+.xeplr-factory-page--grows .xeplr-factory-list { max-height: none; }
 
 .xeplr-factory-invalid {
   border: 1px solid var(--xeplr-danger, #c2372e); border-radius: 8px; padding: 12px 16px;
@@ -288,6 +294,104 @@
 .xeplr-factory-list .xeplr-table-row.xeplr-factory-row-open td,
 .xeplr-factory-list tr.xeplr-factory-row-open td { background: color-mix(in srgb, var(--xf-accent) 10%, transparent); }
 
+/* ── a list whose rows a function works out ────────────────────────────────
+   Search and chips over the rows; every cell is text the server wrote. */
+.xeplr-factory-list--fed { overflow: hidden; }
+.xeplr-factory-list--fed .xeplr-table-container { border: none; border-radius: 0; background: transparent; }
+.xeplr-factory-list-tools {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px;
+  border-bottom: 1px solid var(--xf-border);
+}
+.xeplr-factory-list-tools .xeplr-factory-list-title { flex: 0 1 auto; }
+.xeplr-factory-list-search { flex: 1 1 220px; max-width: 360px; min-width: 0; }
+.xeplr-factory-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.xeplr-factory-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  font: inherit; font-size: .9em; padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
+  color: var(--xf-ink); background: transparent; border: 1px solid var(--xf-border);
+}
+.xeplr-factory-chip:hover { background: var(--xf-hover); }
+.xeplr-factory-chip.is-on { color: var(--xf-accent-ink); background: var(--xf-accent); border-color: var(--xf-accent); }
+.xeplr-factory-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-accent) 35%, transparent); }
+.xeplr-factory-chip-count { font-size: .85em; opacity: .75; font-variant-numeric: tabular-nums; }
+.xeplr-factory-fed-table.is-openable tbody tr { cursor: pointer; }
+.xeplr-factory-list tr.xeplr-factory-row-marked td { background: color-mix(in srgb, var(--xf-accent) 6%, transparent); }
+.xeplr-factory-list tr.xeplr-factory-row-marked td:first-child { box-shadow: inset 3px 0 0 var(--xf-accent); }
+.xeplr-factory-cell { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; min-width: 0; }
+.xeplr-factory-cell-open { font: inherit; color: inherit; background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
+.xeplr-factory-cell-open .xeplr-factory-cell-main { font-weight: 600; color: var(--xf-accent); }
+.xeplr-factory-cell-open:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-accent) 35%, transparent); border-radius: 4px; }
+.xeplr-factory-cell-sub { flex-basis: 100%; font-size: .88em; color: var(--xf-muted); }
+.xeplr-factory-badge {
+  font-size: .75em; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
+  color: var(--xf-accent); background: color-mix(in srgb, var(--xf-accent) 14%, transparent);
+}
+.xeplr-factory-badge--success { color: var(--xf-good); background: color-mix(in srgb, var(--xf-good) 14%, transparent); }
+.xeplr-factory-badge--warning { color: var(--xf-warn); background: color-mix(in srgb, var(--xf-warn) 16%, transparent); }
+.xeplr-factory-badge--danger { color: var(--xf-danger); background: color-mix(in srgb, var(--xf-danger) 14%, transparent); }
+.xeplr-factory-badge--muted { color: var(--xf-muted); background: var(--xf-hover); }
+.xeplr-factory-thumbs { display: inline-flex; align-items: center; gap: 4px; }
+.xeplr-factory-thumbs img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--xf-border); background: var(--xf-plane); }
+.xeplr-factory-thumbs small { color: var(--xf-muted); }
+.xeplr-factory-activity { max-width: 280px; white-space: normal; }
+.xeplr-factory-activity[tabindex]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-accent) 35%, transparent); border-radius: 4px; }
+/* At the page's root (a portal), so it reads the app's theme directly. */
+.xeplr-factory-activity-box {
+  position: fixed; z-index: 1200; box-sizing: border-box; overflow-y: auto; padding: 6px;
+  max-width: calc(100vw - 16px);
+  font-size: 13px; color: var(--xeplr-text-primary, #1a1a19);
+  background: var(--xeplr-bg-tertiary, #ffffff); border: 1px solid var(--xeplr-border-primary, #d9d8d0);
+  border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
+}
+.xeplr-factory-activity-box .xeplr-factory-hint { padding: 8px; }
+.xeplr-factory-activity-item {
+  display: flex; flex-direction: column; gap: 2px; width: 100%; box-sizing: border-box;
+  padding: 7px 8px; border-radius: 6px; font: inherit; color: inherit; text-align: left; background: none; border: none;
+}
+button.xeplr-factory-activity-item { cursor: pointer; }
+button.xeplr-factory-activity-item:hover, button.xeplr-factory-activity-item:focus-visible { outline: none; background: var(--xeplr-bg-hover, #f0f0ee); }
+.xeplr-factory-activity-sub { font-size: .9em; color: var(--xeplr-text-secondary, #6b6a63); }
+
+/* ── a panel of buttons ─────────────────────────────────────────────────── */
+.xeplr-factory-buttons {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
+  font-size: max(10px, calc(var(--xf-font, 14) * var(--xf-u)));
+}
+.xeplr-factory-buttons-title { font-weight: 600; color: var(--xf-muted); margin-right: 4px; }
+.xeplr-factory-button {
+  font: inherit; font-weight: 600; font-size: .92em; padding: 6px 13px; border-radius: 6px; cursor: pointer; white-space: nowrap;
+  color: var(--xf-ink); background: var(--xf-surface); border: 1px solid var(--xf-border);
+  transition: background .12s, transform .08s, box-shadow .12s;
+}
+.xeplr-factory-button:hover:not(:disabled) { background: var(--xf-hover); }
+.xeplr-factory-button:active:not(:disabled) { transform: scale(.96); }
+.xeplr-factory-button:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-accent) 35%, transparent); }
+.xeplr-factory-button:disabled { opacity: .5; cursor: default; }
+.xeplr-factory-button--primary { color: var(--xf-accent-ink); background: var(--xf-accent); border-color: var(--xf-accent); }
+.xeplr-factory-button--primary:hover:not(:disabled) { background: var(--xf-accent); filter: brightness(1.08); }
+.xeplr-factory-button--danger { color: var(--xf-danger); border-color: color-mix(in srgb, var(--xf-danger) 55%, var(--xf-border)); }
+.xeplr-factory-button--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--xf-danger) 10%, transparent); }
+.xeplr-factory-buttons--design .xeplr-factory-button { cursor: inherit; }
+.xeplr-factory-buttons-note {
+  display: inline-flex; align-items: center; gap: 6px; font-size: .9em; padding: 4px 6px 4px 10px; border-radius: 6px;
+  color: var(--xf-good); background: color-mix(in srgb, var(--xf-good) 10%, transparent);
+}
+.xeplr-factory-buttons-note--error { color: var(--xf-danger); background: color-mix(in srgb, var(--xf-danger) 10%, transparent); }
+.xeplr-factory-buttons-note-close { font: inherit; font-size: 1.1em; line-height: 1; color: inherit; background: none; border: none; cursor: pointer; padding: 2px 4px; }
+.xeplr-factory-ask { --xf-modal-w: min(440px, 96vw); }
+.xeplr-factory-ask .xeplr-factory-modal-body { padding: 4px 18px 8px; display: flex; flex-direction: column; gap: 10px; }
+.xeplr-factory-ask-message { margin: 0; color: var(--xf-muted); }
+.xeplr-factory-ask-field { display: flex; flex-direction: column; gap: 4px; }
+.xeplr-factory-ask-label { font-weight: 600; font-size: .92em; }
+.xeplr-factory-ask-note, .xeplr-factory-list-search {
+  box-sizing: border-box; width: 100%; font: inherit; padding: 7px 10px; border-radius: 6px;
+  color: var(--xf-ink); background: var(--xf-field-bg); border: 1px solid var(--xf-field-border);
+}
+.xeplr-factory-ask-note { resize: vertical; min-height: 80px; }
+.xeplr-factory-ask-note:focus, .xeplr-factory-list-search:focus { outline: none; border-color: var(--xf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-accent) 25%, transparent); }
+.xeplr-factory-ask-error { margin: 0; color: var(--xf-danger); }
+.xeplr-factory-ask-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; }
+
 /* ── the builder ────────────────────────────────────────────────────────── */
 .xeplr-factory-builder {
   display: flex; flex-direction: column; height: 100%; min-height: 560px;
@@ -397,6 +501,27 @@
 .xeplr-factory-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
 .xeplr-factory-panel-type { font-weight: 700; font-size: 14px; }
 .xeplr-factory-link-danger { background: none; border: none; color: var(--xf-danger); cursor: pointer; font: inherit; padding: 2px 4px; }
+.xeplr-factory-link { background: none; border: none; color: var(--xf-accent); cursor: pointer; font: inherit; padding: 2px 4px; }
+.xeplr-factory-link:disabled { color: var(--xf-muted); opacity: .5; cursor: default; }
+/* Lists of things edited in place: chips, columns, buttons, conditions. */
+.xeplr-factory-rows-editor { display: flex; flex-direction: column; gap: 8px; }
+.xeplr-factory-rows-editor > .xeplr-factory-secondary { align-self: flex-start; padding: 4px 10px; }
+.xeplr-factory-rows-editor-row { display: flex; align-items: center; gap: 4px; }
+.xeplr-factory-rows-editor-row .xeplr-factory-prop-input { flex: 1 1 0; min-width: 0; }
+.xeplr-factory-prop-input--key { flex: 0 1 38% !important; font-family: ui-monospace, monospace; font-size: 11px; }
+.xeplr-factory-rows-editor-card {
+  position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px 10px 10px;
+  border: 1px solid var(--xf-border); border-radius: 8px;
+}
+.xeplr-factory-rows-editor-card > legend { font-weight: 600; font-size: 12px; padding: 0 4px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.xeplr-factory-rows-editor-card > .xeplr-factory-rows-editor-tools { position: absolute; top: -9px; right: 6px; background: var(--xf-surface); padding: 0 2px; }
+.xeplr-factory-mini { display: flex; flex-direction: column; gap: 2px; }
+.xeplr-factory-mini-label { font-size: 11px; font-weight: 600; color: var(--xf-muted); }
+.xeplr-factory-conditions { display: flex; flex-direction: column; gap: 4px; }
+.xeplr-factory-conditions > .xeplr-factory-link { align-self: flex-start; padding-left: 0; }
+/* The field on a line of its own (names are long); the comparison and value under it. */
+.xeplr-factory-conditions .xeplr-factory-rows-editor-row { flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px dashed var(--xf-border); }
+.xeplr-factory-conditions .xeplr-factory-rows-editor-row > input:first-child { flex: 1 1 100%; }
 .xeplr-factory-group { border: none; border-top: 1px solid var(--xf-border); margin: 0; padding: 10px 0 4px; }
 .xeplr-factory-group legend { padding: 0 4px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--xf-muted); }
 .xeplr-factory-prop { margin-bottom: 10px; }
@@ -703,3 +828,17 @@
   .xeplr-factory-modal-body { padding: 0; }
   .xeplr-factory-modal-close { min-width: 44px; min-height: 44px; }
 }
+
+/* Function-fed lists and buttons on a phone: the search takes the width, chips
+   scroll in a row, and every button is a thumb-sized target. */
+@media (max-width: 640px) {
+  .xeplr-factory-list-search, .xeplr-factory-ask-note { font-size: max(16px, 1em); min-height: 44px; }
+  .xeplr-factory-list-search { flex-basis: 100%; max-width: none; }
+  .xeplr-factory-ask-foot button { flex: 1; min-height: 44px; }
+  .xeplr-factory-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
+  .xeplr-factory-chip { min-height: 36px; }
+  .xeplr-factory-button { min-height: 44px; flex: 1 1 auto; }
+  .xeplr-factory-buttons-note { flex-basis: 100%; }
+  .xeplr-factory-ask .xeplr-factory-modal-body { padding: 4px 16px 8px; }
+  .xeplr-factory-ask { min-height: 0; align-self: flex-end; }
+}

package/src/events.js

@@ -13,6 +13,8 @@
 // What each is called with, and what it may return, is the contract a
 // developer writes to. `@xeplr/factory` runs them; the designer lists them.
 
+import { nodeFunctions, paramProblems } from './buttons.js'
+
 export const SCREEN_EVENTS = [
   {
     key: 'beforeLoad',
@@ -83,6 +85,25 @@ export function missingFunctions(doc, registered) {
   })
 }
 
+/**
+ * EVERYTHING THAT STOPS A SCREEN RUNNING ITS FUNCTIONS — its events, and the
+ * functions its controls name (a list's rows, a column's hover box, each
+ * button), plus each button's parameters against what its function takes.
+ * `registered` is the registry's list ([{ name, event, inputSchema }]).
+ * What publishing refuses on. Empty when the screen can run.
+ */
+export function functionProblems(doc, registered) {
+  const byName = new Map((registered || []).map((f) => [f.name, f]))
+  const fromNodes = nodeFunctions(doc).flatMap(({ event, name, at, button }) => {
+    const f = byName.get(name)
+    if (!f) return [{ event, name, at, problem: `"${name}" is not a registered function` }]
+    if (f.event !== event) return [{ event, name, at, problem: `"${name}" is written for ${f.event ? `"${f.event}"` : 'a workflow step'}, not "${event}"` }]
+    if (!button) return []
+    return paramProblems(button, f.inputSchema).map((p) => ({ event, name, at, problem: `button "${button.label || button.id}": "${name}" ${p}` }))
+  })
+  return [...missingFunctions(doc, registered), ...fromNodes]
+}
+
 /** The screen with one event set to a function — or cleared, given nothing. */
 export function setEvent(doc, key, name) {
   if (!SCREEN_EVENT_KEYS.includes(key)) throw new Error(`"${key}" is not an event — one of: ${SCREEN_EVENT_KEYS.join(', ')}`)

package/src/model.js

@@ -13,7 +13,14 @@ export {
 } from './document.js'
 export { validateDocument, assertValidDocument } from './validateDocument.js'
 // A screen's events: functions picked by name, run on the server.
-export { SCREEN_EVENTS, SCREEN_EVENT_KEYS, DECIDE_EVENT, FUNCTION_NAME, screenFunctions, missingFunctions, setEvent, functionsFor } from './events.js'
+export { SCREEN_EVENTS, SCREEN_EVENT_KEYS, DECIDE_EVENT, FUNCTION_NAME, screenFunctions, missingFunctions, functionProblems, setEvent, functionsFor } from './events.js'
+// Buttons and lists whose rows a function works out — names and values only.
+export {
+  BUTTON_EVENT, LIST_ROWS_EVENT, ROW_DETAILS_EVENT, BUTTON_VARIANTS, COLUMN_DISPLAYS, BADGE_TONES, NOTE_INPUT, CONDITION_OPERATORS,
+  conditionMet, buttonShown, buttonDisabled, screenButtons, buttonById, buttonInput, nodeFunctions, paramProblems, optionValues
+} from './buttons.js'
+// Which pages are drawn from documents and which are web only (ui/pages.json).
+export { checkInventory, routesIn, pageWarnings, webOnlyMenus } from './pagesInventory.js'
 export { formSchema, initialValues, parseInput, validateValues, fieldError, sameId, optionValue, chooseable, saveState, recordValues, displayValue, fileLabel, toDbValue, fromDbValue, listColumns, listSource } from './values.js'
 export { screenFromSpec, screensFromSpec, entityNames, SPEC_HEIGHTS, ROW_GAP } from './generate.js'
 export { scaffoldEntity } from './scaffold.js'