@xeplr/ui-factory 1.0.9 → 1.0.10

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.10",
   "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

@@ -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);