@xeplr/ui-factory 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeplr/ui-factory",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Design data-entry screens on @xeplr/ui-canvas, save them as JSON, run them as auto-saving forms with lists of saved records — built for Claude to draft and people to refine",
   "type": "module",
   "main": "src/index.js",

package/src/designs/factory.css

@@ -50,8 +50,11 @@
 .xeplr-factory-required { color: var(--xf-danger); }
 .xeplr-factory-input {
   flex: 1; min-height: 0; width: 100%; box-sizing: border-box;
-  font: inherit; color: var(--xf-ink); background: var(--xeplr-input-bg, var(--xf-surface));
-  border: 1px solid var(--xeplr-input-border, var(--xf-border)); border-radius: calc(6 * var(--xf-u));
+  /* The screen's own colours, never the host theme's input tokens: a dark theme
+     would give the box a dark background while the text stays the screen's
+     dark ink — unreadable. A screen's look is its style properties. */
+  font: inherit; color: var(--xf-ink); background: var(--xf-surface);
+  border: 1px solid var(--xf-border); border-radius: calc(6 * var(--xf-u));
   padding: 0 calc(10 * var(--xf-u));
 }
 .xeplr-factory-textarea { padding-block: calc(8 * var(--xf-u)); resize: none; }
@@ -89,7 +92,7 @@
 .xeplr-factory-list-mock { width: 100%; border-collapse: collapse; }
 .xeplr-factory-list-mock th { text-align: left; font-weight: 600; font-size: .9em; padding: calc(6 * var(--xf-u)) calc(10 * var(--xf-u)); border-bottom: 1px solid var(--xf-border); color: var(--xf-muted); }
 .xeplr-factory-list-mock td { padding: calc(8 * var(--xf-u)) calc(10 * var(--xf-u)); border-bottom: 1px solid var(--xf-border); }
-.xeplr-factory-list-bar { display: block; height: calc(8 * var(--xf-u)); width: 70%; border-radius: 4px; background: var(--xeplr-border-secondary, #ecebe4); }
+.xeplr-factory-list-bar { display: block; height: calc(8 * var(--xf-u)); width: 70%; border-radius: 4px; background: #ecebe4; }
 .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); }
 
@@ -177,8 +180,8 @@
 .xeplr-factory-prop { margin-bottom: 10px; }
 .xeplr-factory-prop-label { display: block; margin-bottom: 3px; font-weight: 600; font-size: 12px; }
 .xeplr-factory-prop-input {
-  width: 100%; box-sizing: border-box; font: inherit; padding: 5px 7px; color: inherit;
-  border: 1px solid var(--xf-border); border-radius: 5px; background: var(--xeplr-input-bg, #fff);
+  width: 100%; box-sizing: border-box; font: inherit; padding: 5px 7px;
+  border: 1px solid var(--xf-border); border-radius: 5px; background: #fff; color: var(--xf-ink, #1a1a19);
 }
 .xeplr-factory-prop.has-error .xeplr-factory-prop-input { border-color: var(--xf-danger); }
 .xeplr-factory-prop-help { margin-top: 3px; color: var(--xf-muted); font-size: 11px; line-height: 1.4; }

package/src/remote.js

@@ -16,27 +16,44 @@
 export function createFactoryApi({ fetch: doFetch, base = '' } = {}) {
   if (typeof doFetch !== 'function') throw new Error('createFactoryApi: pass { fetch } — usually authFetch from @xeplr/ui-account')
 
+  // Two kinds of fetch are accepted, because both are what apps have:
+  //   window.fetch-like  → a Response: read it, and throw on !res.ok
+  //   authFetch-like     → the PARSED body, and on failure it throws an Error
+  //                        carrying status and the body (err.status, err.body)
+  // Either way a failure becomes the same Error, with the server's fields,
+  // confirm and refused lists on it.
   async function call(method, path, body) {
-    const res = await doFetch(`${base}/factory${path}`, {
-      method,
-      headers: body === undefined ? undefined : { 'Content-Type': 'application/json' },
-      body: body === undefined ? undefined : JSON.stringify(body)
-    })
-    let json = null
-    try { json = await res.json() } catch (_) { /* not JSON — reported below */ }
-    if (!res.ok) {
-      const err = new Error((json && json.message) || `${method} ${path} failed (${res.status})`)
-      err.status = res.status
-      err.fields = json && json.error && json.error.fields
-      const extra = (json && json.dataArray && json.dataArray[0]) || {}
-      // Publish: columns it would drop, waiting for a yes — and what it keeps.
-      err.confirm = extra.confirm
-      err.keep = extra.keep
-      err.refused = extra.refused
-      if (extra.statements) err.detail = extra.statements.join('\n')
+    let res
+    try {
+      res = await doFetch(`${base}/factory${path}`, {
+        method,
+        headers: body === undefined ? undefined : { 'Content-Type': 'application/json' },
+        body: body === undefined ? undefined : JSON.stringify(body)
+      })
+    } catch (err) {
+      if (err && err.body !== undefined && err.status) throw failure(method, path, err.status, err.body, err.message)
       throw err
     }
-    return json ? json.dataArray : []
+    if (res && typeof res.json === 'function' && typeof res.ok === 'boolean') {
+      let json = null
+      try { json = await res.json() } catch (_) { /* not JSON — reported below */ }
+      if (!res.ok) throw failure(method, path, res.status, json)
+      return json ? json.dataArray : []
+    }
+    return res && Array.isArray(res.dataArray) ? res.dataArray : []
+  }
+
+  function failure(method, path, status, json, fallback) {
+    const err = new Error((json && json.message) || fallback || `${method} ${path} failed (${status})`)
+    err.status = status
+    err.fields = json && json.error && json.error.fields
+    const extra = (json && json.dataArray && json.dataArray[0]) || {}
+    // Publish: columns it would drop, waiting for a yes — and what it keeps.
+    err.confirm = extra.confirm
+    err.keep = extra.keep
+    err.refused = extra.refused
+    if (extra.statements) err.detail = extra.statements.join('\n')
+    return err
   }
   const one = (rows) => (Array.isArray(rows) ? rows[0] : rows)
   const enc = encodeURIComponent

package/src/useFactoryScreen.js

@@ -53,11 +53,32 @@ export function useFactoryScreen({
   // `department` is a dropdown whose 2 reads "Finance" — lives on the screen it
   // edits in. Those fields are borrowed for display, and their table options
   // loaded alongside this screen's own.
+  //
+  // An edit screen not passed in `screens` is fetched with loadScreen as soon
+  // as the list shows — not when Edit is first pressed — or the list's columns
+  // would show stored values ("in_progress") until then.
+  const [loadedScreens, setLoadedScreens] = useState({})
+  const knownScreens = useMemo(() => ({ ...loadedScreens, ...(screens || {}) }), [loadedScreens, screens])
+  const editScreenIds = check.ok && !inputs.length
+    ? [...new Set(doc.nodes.filter((n) => n.type === 'list' && n.props.editScreen).map((n) => n.props.editScreen))].join('|')
+    : ''
+  useEffect(() => {
+    if (!editScreenIds || !loadScreen) return undefined
+    let cancelled = false
+    editScreenIds.split('|').filter((id) => !(screens && screens[id])).forEach((id) => {
+      loadScreen(id).then(
+        (found) => { if (!cancelled && found) setLoadedScreens((m) => (m[id] ? m : { ...m, [id]: found })) },
+        () => { /* shown when Edit is pressed, where the person is looking */ }
+      )
+    })
+    return () => { cancelled = true }
+  }, [editScreenIds])                                          // eslint-disable-line react-hooks/exhaustive-deps
+
   const fieldsFor = useCallback((node) => {
     if (inputs.length || !node || !node.props.editScreen) return inputs
-    const editDoc = screens && screens[node.props.editScreen]
+    const editDoc = knownScreens[node.props.editScreen]
     return editDoc && validateDocument(editDoc, controls).ok ? inputNodes(editDoc, controls) : []
-  }, [inputs, screens, controls])
+  }, [inputs, knownScreens, controls])
   const optionNodes = useMemo(() => {
     if (!check.ok) return []
     const borrowed = doc.nodes.filter((n) => n.type === 'list').flatMap((n) => (inputs.length ? [] : fieldsFor(n)))
@@ -290,7 +311,7 @@ export function useFactoryScreen({
 
   // ── popup: a list's Edit / New in its edit screen ─────────────────────
   const [popup, setPopup] = useState(null)   // { node, screenId, record, document, loading, error }
-  const screensRef = useRef(screens); screensRef.current = screens
+  const screensRef = useRef(knownScreens); screensRef.current = knownScreens
   const fetchRecordRef = useRef(fetchRecord); fetchRecordRef.current = fetchRecord
   const loadScreenRef = useRef(loadScreen); loadScreenRef.current = loadScreen