@xeplr/ui-factory 1.8.2 → 1.8.4

package/src/designs/factory.css

@@ -65,8 +65,17 @@
    its own card, and a sheet around it is a second frame with a block of empty
    paper under the rows. */
 .xeplr-factory-screen--bare { background: none; border: none; }
-.xeplr-factory-page { position: relative; width: 100%; margin: 0; }
-.xeplr-factory-node { position: absolute; box-sizing: border-box; }
+.xeplr-factory-page { position: relative; width: 100%; margin: 0; height: var(--xf-page-h); }
+.xeplr-factory-node {
+  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;
@@ -285,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;
@@ -394,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; }
@@ -433,6 +561,7 @@
   background: var(--xeplr-bg-overlay, rgba(20, 20, 18, .45));
 }
 .xeplr-factory-modal {
+  width: var(--xf-modal-w);
   max-width: 96vw; background: var(--xf-surface); color: var(--xf-ink);
   border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); outline: none;
 }
@@ -645,3 +774,71 @@
 .xeplr-factory-table td.is-number { text-align: right; font-variant-numeric: tabular-nums; }
 .xeplr-factory-table tr.is-ticked td { background: var(--xeplr-accent-soft, rgba(47, 91, 211, 0.07)); }
 .xeplr-factory-table-tick { width: 28px; }
+
+/* ── on a phone: one column ────────────────────────────────────────────────
+   Below 640px a screen stops being a scaled-down canvas. An 800px design
+   shrunk to a 360px phone is 14px text squeezed into boxes under half their
+   size, side-by-side fields too narrow to read and targets too small to tap.
+   So here every control takes the full width, one per row, in reading order
+   (--xf-order, from ScreenSample), at its real size: --xf-u is a pixel again
+   and the positions (--xf-x, …) are simply not used. A phone, not a narrow
+   panel: the viewport decides, so a screen in a side panel on a desktop keeps
+   its designed layout. Designers (builder, flow designer) are not for phones
+   and are left as they are. */
+@media (max-width: 640px) {
+  .xeplr-factory-screen { --xf-u: 1px; }
+  .xeplr-factory-page {
+    display: flex; flex-direction: column; gap: 18px;
+    height: auto; padding: 16px; box-sizing: border-box;
+  }
+  .xeplr-factory-node { position: static; width: auto; height: auto; order: var(--xf-order); }
+  /* An identifier still to be numbered draws nothing: no gap for it either. */
+  .xeplr-factory-node:empty { display: none; }
+
+  .xeplr-factory-field { height: auto; }
+  /* 16px or more, or iOS zooms the page when a field is focused; 44px tall,
+     the smallest target a thumb hits reliably. */
+  .xeplr-factory-input { --xf-min-font: 16px; font-size: max(16px, 1em); flex: none; min-height: 44px; }
+  .xeplr-factory-textarea { min-height: 112px; }
+  .xeplr-factory-file-input { min-height: 0; }
+  /* In the flow now: a message may push the next field down, and wraps
+     rather than being cut off at the edge of a narrow screen. */
+  .xeplr-factory-error { position: static; white-space: normal; }
+  .xeplr-factory-check, .xeplr-factory-choice { min-height: 40px; }
+  .xeplr-factory-check input { width: 22px; height: 22px; }
+  .xeplr-factory-choice input { width: 20px; height: 20px; }
+  .xeplr-factory-choices { overflow: visible; }
+  .xeplr-factory-file-clear { min-height: 40px; padding-inline: 14px; }
+  .xeplr-factory-text { height: auto; overflow: visible; }
+  .xeplr-factory-stepper { height: auto; }
+  .xeplr-factory-list { max-height: none; }
+  .xeplr-factory-table-wrap { max-height: 60vh; }
+  .xeplr-factory-subform { height: auto; overflow: visible; }
+
+  /* The footer wraps: what the save is doing on a line of its own, the
+     buttons under it, sharing the width. */
+  .xeplr-factory-footer { flex-wrap: wrap; padding: 12px 16px; }
+  .xeplr-factory-footer-mid { flex-basis: 100%; order: -1; align-items: flex-start; text-align: left; }
+  .xeplr-factory-footer button { flex: 1; min-height: 44px; }
+  .xeplr-factory-list-new { min-height: 36px; }
+
+  /* A popup is the whole screen. */
+  .xeplr-factory-modal-backdrop { padding: 0; }
+  .xeplr-factory-modal { width: 100%; max-width: none; min-height: 100%; border-radius: 0; }
+  .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/designs/styles.js

@@ -6,6 +6,9 @@
 // shrinks to keep the layout's proportions.
 
 const u = (n) => `calc(${n} * var(--xf-u))`
+// A floor the stylesheet can raise: on a phone an input under 16px makes iOS
+// zoom the page on focus, so factory.css sets --xf-min-font on inputs there.
+const font = (n) => `max(var(--xf-min-font, 0px), ${u(n)})`
 
 /** Wrapper-level: the font the whole control uses. */
 export function fieldStyle(style) {
@@ -27,7 +30,7 @@ export function labelStyle(style) {
 export function boxStyle(style) {
   const s = style || {}
   return clean({
-    fontSize: s.fontSize != null ? u(s.fontSize) : undefined,
+    fontSize: s.fontSize != null ? font(s.fontSize) : undefined,
     fontWeight: s.fontWeight,
     fontStyle: s.fontStyle,
     textAlign: s.textAlign,

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'

package/src/pagesInventory.js

@@ -0,0 +1,91 @@
+// WHICH PAGES WORK EVERYWHERE, AND WHICH ARE WEB ONLY.
+//
+// A page drawn from screen documents (a form's list, a flow's screens, a list
+// fed by a function, a panel of buttons) can be drawn by anything that reads
+// a document — a phone app included. A page written by hand in React cannot:
+// it is the browser's alone.
+//
+// Writing one is allowed. Doing it without anyone knowing is what this file
+// is for. Each app keeps an inventory, ui/pages.json:
+//
+//   {
+//     "routes": ["src/App.jsx"],
+//     "documents": [{ "path": "/orders", "menu": "Orders", "screen": "orders_board" }],
+//     "webOnly":   [{ "path": "/home", "menu": "Home", "reason": "The dashboard's cards are hand-written" }]
+//   }
+//
+// and `xeplr-factory pages` WARNS — it never refuses — about every web-only
+// page, and about every route the inventory does not mention. The menu key
+// lets a settings screen tag that menu item "Web only".
+//
+// Pure: no React, no file system. The CLI reads the files.
+
+/** Whatever is wrong with the inventory itself, as [{ path, message }]. */
+export function checkInventory(inv) {
+  const errors = []
+  const err = (path, message) => errors.push({ path, message })
+  if (!inv || typeof inv !== 'object' || Array.isArray(inv)) { err('', 'must be an object: { routes, documents, webOnly }'); return errors }
+  if (inv.routes !== undefined && !(Array.isArray(inv.routes) && inv.routes.every((r) => typeof r === 'string' && r))) err('routes', 'must be the files that declare the routes, e.g. ["src/App.jsx"]')
+  ;['documents', 'webOnly'].forEach((list) => {
+    if (inv[list] === undefined) return
+    if (!Array.isArray(inv[list])) { err(list, 'must be an array of { path, … }'); return }
+    inv[list].forEach((p, i) => {
+      const at = `${list}[${i}]`
+      if (!p || typeof p !== 'object') { err(at, 'must be { path, … }'); return }
+      if (typeof p.path !== 'string' || !p.path.startsWith('/')) err(`${at}.path`, 'must be a route path, e.g. "/orders/:orderId"')
+      if (p.menu !== undefined && (typeof p.menu !== 'string' || !p.menu)) err(`${at}.menu`, 'must be the menu key it is under, e.g. "Orders"')
+      if (list === 'webOnly' && !(typeof p.reason === 'string' && p.reason.trim())) err(`${at}.reason`, 'is required — say why it is hand-written, so the next person knows what it would take to make it a document')
+    })
+  })
+  const seen = new Map()
+  ;[...(inv.documents || []), ...(inv.webOnly || [])].forEach((p) => {
+    if (!p || typeof p.path !== 'string') return
+    if (seen.has(p.path)) err('', `"${p.path}" is listed twice`)
+    seen.set(p.path, true)
+  })
+  return errors
+}
+
+/**
+ * The route paths a routes file declares: every <Route path="…">, except
+ * redirects (an element that is a <Navigate>) and the catch-all "*".
+ */
+export function routesIn(source) {
+  const out = []
+  const re = /<Route\b[^>]*?\bpath=(?:"([^"]+)"|'([^']+)'|\{\s*["'`]([^"'`]+)["'`]\s*\})[^>]*>/g
+  let m
+  while ((m = re.exec(String(source || '')))) {
+    const path = m[1] || m[2] || m[3]
+    if (!path || path === '*') continue
+    if (/element=\{\s*<Navigate\b/.test(m[0])) continue
+    out.push(path)
+  }
+  return [...new Set(out)]
+}
+
+/**
+ * The warnings for an app: each web-only page, and each route nobody
+ * listed. [{ kind: 'webOnly' | 'unlisted' | 'gone' | 'inventory', path, message }]
+ */
+export function pageWarnings(inv, routes) {
+  const warnings = checkInventory(inv).map((e) => ({ kind: 'inventory', path: e.path, message: `pages.json ${e.path ? e.path + ' ' : ''}${e.message}` }))
+  const docs = new Set(((inv && inv.documents) || []).map((p) => p && p.path))
+  const web = ((inv && inv.webOnly) || []).filter((p) => p && p.path)
+  web.forEach((p) => warnings.push({ kind: 'webOnly', path: p.path, message: `${p.path} is web only — it will not be in a phone app. ${p.reason || ''}`.trim() }))
+  const listed = new Set([...docs, ...web.map((p) => p.path)])
+  ;(routes || []).forEach((r) => {
+    if (!listed.has(r)) warnings.push({ kind: 'unlisted', path: r, message: `${r} is not in pages.json — say whether it is drawn from documents ("documents") or hand-written ("webOnly", with the reason)` })
+  })
+  // A listed page the routes no longer have: the inventory is out of date.
+  if (routes) listed.forEach((p) => { if (!routes.includes(p)) warnings.push({ kind: 'gone', path: p, message: `${p} is in pages.json but no route declares it any more — remove it` }) })
+  return warnings
+}
+
+/** { menu key → why } for the menu items whose page is web only — a settings screen tags them. */
+export function webOnlyMenus(inv) {
+  const out = {}
+  ;((inv && inv.webOnly) || []).forEach((p) => {
+    if (p && p.menu && !out[p.menu]) out[p.menu] = p.reason || 'Hand-written for the browser'
+  })
+  return out
+}

package/src/remote.js

@@ -83,6 +83,10 @@ export function createFactoryApi({ fetch: doFetch, base = '' } = {}) {
   }
   const one = (rows) => (Array.isArray(rows) ? rows[0] : rows)
   const enc = encodeURIComponent
+  const query = (params) => {
+    const pairs = Object.entries(params).filter(([, v]) => v !== undefined && v !== null && v !== '')
+    return pairs.length ? '?' + pairs.map(([k, v]) => `${enc(k)}=${enc(v)}`).join('&') : ''
+  }
 
   const api = {
     // screens
@@ -123,6 +127,16 @@ export function createFactoryApi({ fetch: doFetch, base = '' } = {}) {
     onDelete: ({ id, screen }) => call('POST', `/records/${enc(screen)}/delete`, { id }),
     fetchOptions: ({ table }) => call('GET', `/options/${enc(table)}`),
 
+    // ROWS A FUNCTION WORKS OUT, for a list with rowsFrom: { rows, counts }.
+    // Only what the person typed goes with it — the function is the screen's.
+    fetchRows: async ({ screen, node, q, filter }) => one(await call('GET', `/rows/${enc(screen)}${query({ node, q, filter })}`)),
+    // An activity cell's hover box for one row.
+    fetchRowDetails: ({ screen, node, column, id }) => call('GET', `/rows/${enc(screen)}/details${query({ node, column, id })}`),
+    // A button's press on one record → { button, message, output }. The
+    // server reads the button — its function and parameters — from the
+    // published screen; the request names it and carries the note.
+    pressButton: async ({ screen, button, id, note }) => one(await call('POST', `/buttons/${enc(screen)}/${enc(button)}`, note ? { id, note } : { id })),
+
     // A file field's upload. The answer's `path` is what the record stores;
     // the file itself is read back through the same route, with auth.
     uploadFile: async (file, { screen, field }) => {
@@ -132,11 +146,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.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,
+    fetchRows: api.fetchRows, fetchRowDetails: api.fetchRowDetails, pressButton: api.pressButton }
   // 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) },
+  api.builderProps = { onSave: api.saveDraft, onPublish: api.publish, listTables: api.listTables, listFunctions: api.listFunctions, 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 }

package/src/urlState.js

@@ -12,11 +12,11 @@
 
 /**
  * The query keys under a host's `urlKey`, or null (in memory).
- *   factoryUrlKeys('form') → { steps: 'formSteps', selected: 'formSelected', tab: 'formTab' }
+ *   factoryUrlKeys('form') → { steps: 'formSteps', selected: 'formSelected', tab: 'formTab', q: 'formQ', filter: 'formFilter' }
  */
 export function factoryUrlKeys(urlKey) {
   if (!urlKey) return null
-  return { steps: `${urlKey}Steps`, selected: `${urlKey}Selected`, tab: `${urlKey}Tab` }
+  return { steps: `${urlKey}Steps`, selected: `${urlKey}Selected`, tab: `${urlKey}Tab`, q: `${urlKey}Q`, filter: `${urlKey}Filter` }
 }
 
 /**

package/src/useFactoryBuilder.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useFunctionCatalog } from './useFunctionCatalog.js'
 import { CONTROLS, controlGroups } from './controls.js'
 import {
   createScreen, renameScreen, setScreenProperty, addControl as addControlTo, moveNode, setNodeProperty, setNodeStep,
@@ -28,6 +29,9 @@ import { selectionPlace } from './urlState.js'
  * @param onSave      async (document) → void; called automatically, only with a valid document
  * @param autosaveDelay ms of quiet after the last edit before saving (default 800)
  * @param onChange    (document) → void; every edit, for hosts that autosave or preview
+ * @param listFunctions async () → [{ name, event, description, inputSchema }] — the app's
+ *                    registered functions, offered to a list's "Rows from", a column's
+ *                    hover box and each button (with the parameters it takes)
  * @param listTables  async () → [{ id, name }] | string[]; offered in a dropdown's
  *                    "from a table" picker. Omitted → table sources can still be typed.
  * @param screens     [{ id, name, document? }] — other screens, offered for a list's "Edit in";
@@ -57,7 +61,7 @@ function linkNameFor(doc) {
   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 } = {}) {
+export function useFactoryBuilder({ document: given, name, onSave, onChange, onPublish, listTables, listFunctions, makeChildTable, screens, lockedNames, controls = CONTROLS, autosaveDelay = 800, urlKey } = {}) {
   const [doc, setDoc] = useState(() => given || createScreen({ name }))
 
   // ── selection ─────────────────────────────────────────────────────────
@@ -139,6 +143,9 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
     return () => { cancelled = true }
   }, [hasListTables, tableRound])
 
+  // ── the app's functions, for what a list's rows and a button run ──────
+  const functions = useFunctionCatalog({ listFunctions })
+
   // ── edits ─────────────────────────────────────────────────────────────
   const rename = useCallback((value) => update((d) => renameScreen(d, value)), [update])
   /** A screen property by path — `source`, `width`, `style.fontSize`. */
@@ -485,6 +492,7 @@ export function useFactoryBuilder({ document: given, name, onSave, onChange, onP
     removeSelected,
     duplicateSelected,
     tables,
+    functions,
     screens: screens || [],
     lockedNames: lockedNames || [],
     validation,