@xeplr/ui-factory 1.0.9 → 1.0.11

package/README.md

@@ -196,6 +196,11 @@ const clean = schemaHandler.applySchema(formSchema(screen), req.body)   // throw
 | `label` | — | text with a heading, subheading or text preset |
 | `list` | — | saved records, with New / Edit / Delete |
 
+A screen is a **sheet**: it paints its own surface, so a screen designed in
+dark ink stays readable inside a dark app. Give the screen a `background` in
+its own style to change it, or set `--xeplr-factory-paper` on the host for all
+of them.
+
 Every control also takes `style` — see [AUTHORING.md](./AUTHORING.md#styles) for the keys. Sizes are pixels at the screen's design `width` (default 800): a screen is shown at that size, never stretched, and scaled down only on a narrower display.
 
 ### Steps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeplr/ui-factory",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "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/ScreenSample.jsx

@@ -27,7 +27,7 @@ const STATUS = {
  * filled in — and shows why, rather than moving on and leaving a problem
  * behind on a step nobody is looking at.
  */
-function StepNav({ ctrl, node }) {
+function StepNav({ ctrl, node, children }) {
   const at = ctrl.steps.active(node.id)
   const last = ctrl.steps.count(node.id) - 1
   const unfinished = ctrl.steps.fieldsOn(node.id, at).filter((n) => ctrl.allErrors[n.props.name])
@@ -40,10 +40,21 @@ function StepNav({ ctrl, node }) {
       <button type="button" className="xeplr-factory-secondary" onClick={() => go(at - 1, 'back')} disabled={at === 0}>Back</button>
       <span className="xeplr-factory-stepnav-where">Step {at + 1} of {last + 1}</span>
       <button type="button" className="xeplr-factory-primary" onClick={() => go(at + 1, 'next')} disabled={at === last}>Next</button>
+      {children}
     </div>
   )
 }
 
+/** Leaves the page — after whatever is still being saved has gone out. */
+function DoneButton({ ctrl }) {
+  const saving = ctrl.status === 'pending' || ctrl.status === 'saving'
+  return (
+    <button type="button" className="xeplr-factory-secondary" onClick={() => ctrl.flush().then(ctrl.done, ctrl.done)}>
+      {saving ? 'Saving…' : 'Done'}
+    </button>
+  )
+}
+
 export default function ScreenSample({ ctrl, className, style, renderPopup }) {
   const { document: doc } = ctrl
 
@@ -128,15 +139,13 @@ export default function ScreenSample({ ctrl, className, style, renderPopup }) {
           </div>
         ))}
       </form>
-      {ctrl.steps.nodes.map((node) => (
-        <StepNav key={node.id} ctrl={ctrl} node={node} />
+      {ctrl.steps.nodes.map((node, i) => (
+        <StepNav key={node.id} ctrl={ctrl} node={node}>
+          {ctrl.done && i === ctrl.steps.nodes.length - 1 && <DoneButton ctrl={ctrl} />}
+        </StepNav>
       ))}
-      {ctrl.done && (
-        <div className="xeplr-factory-done">
-          <button type="button" className="xeplr-factory-primary" onClick={() => ctrl.flush().then(ctrl.done, ctrl.done)}>
-            {ctrl.status === 'pending' || ctrl.status === 'saving' ? 'Saving…' : 'Done'}
-          </button>
-        </div>
+      {ctrl.done && !ctrl.steps.nodes.length && (
+        <div className="xeplr-factory-done"><DoneButton ctrl={ctrl} /></div>
       )}
       {ctrl.popup && renderPopup && renderPopup(ctrl.popup, ctrl)}
     </div>

package/src/designs/factory.css

@@ -19,8 +19,23 @@
   --xf-danger: var(--xeplr-danger, #c2372e);
 }
 
-/* ── the screen ─────────────────────────────────────────────────────────── */
-.xeplr-factory-screen { position: relative; width: 100%; color: var(--xf-ink); }
+/* ── the screen ───────────────────────────────────────────────────────────
+   A screen is a SHEET: it paints its own surface, the way the builder's canvas
+   does. Without that it is transparent, and a screen designed in dark ink
+   disappears into a dark app — what you designed is not what you get. The
+   screen's own `background` style overrides this (screenStyle), as does the
+   host with --xeplr-factory-paper. */
+.xeplr-factory-screen {
+  position: relative; width: 100%;
+  color: var(--xf-ink);
+  background: var(--xeplr-factory-paper, var(--xf-surface));
+  border-radius: calc(8 * var(--xf-u));
+}
+/* The status line and the step buttons live on the sheet, so they keep a
+   margin of their own rather than touching its edge. */
+.xeplr-factory-screen > .xeplr-factory-status,
+.xeplr-factory-screen > .xeplr-factory-stepnav,
+.xeplr-factory-screen > .xeplr-factory-done { padding-inline: calc(12 * var(--xf-u)); }
 .xeplr-factory-status {
   display: flex; justify-content: space-between; gap: 12px; min-height: 18px;
   padding: 4px 2px 8px; font-size: 12px; color: var(--xf-muted);
@@ -118,6 +133,7 @@
 /* Back / Next, under the page. */
 .xeplr-factory-stepnav { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
 .xeplr-factory-stepnav-where { flex: 1; text-align: center; color: var(--xf-muted); font-size: 12px; }
+.xeplr-factory-stepnav button[disabled], .xeplr-factory-done button[disabled] { opacity: 0.45; cursor: default; }
 
 /* Done — a page's way back, when the list opens records on one. */
 .xeplr-factory-done { display: flex; justify-content: flex-end; padding: 10px 0; }