@xeplr/ui-factory 1.0.14 → 1.1.0

package/src/designs/factory.css

@@ -1,6 +1,16 @@
 /* @xeplr/ui-factory — builder and screen.
-   Colours come from the xeplr theme variables, each with a light fallback, so
-   a host that defines none still gets a finished look.
+   Colours come from the app's theme — @xeplr/ui-account's --xeplr-* variables
+   (theme.css) — each with a light fallback, so a host that defines none still
+   gets a finished look.
+
+   THE REAL NAMES, NOT LOOK-ALIKES. This file used to read --xeplr-text,
+   --xeplr-surface, --xeplr-border and --xeplr-muted, which no theme defines —
+   so every fallback won, and in a dark app a screen came out as a white sheet
+   while the @xeplr/ui-table inside it (which reads the real names) came out
+   dark. Everything below resolves through the --xf-* tokens, and those read
+   the variables theme.css actually sets. "Elevated" is --xeplr-bg-tertiary in
+   every built-in theme (white in light, the lighter grey in dark), which is
+   what a sheet, a panel and a popup are.
 
    ONE SIZE UNIT, --xf-u: one pixel at the screen's design width (--xf-width,
    set from the document). At that width or wider it IS a pixel — text is
@@ -12,11 +22,24 @@
 .xeplr-factory-flow-builder {
   container-type: inline-size;
   --xf-u: min(1px, calc(100cqw / var(--xf-width, 800)));
+}
+.xeplr-factory-screen,
+.xeplr-factory-canvas,
+.xeplr-factory-flow-builder,
+.xeplr-factory-builder,
+.xeplr-factory-modal-backdrop {
   --xf-accent: var(--xeplr-accent, #2563eb);
-  --xf-ink: var(--xeplr-text, #1a1a19);
-  --xf-muted: var(--xeplr-muted, #6b6a63);
-  --xf-border: var(--xeplr-border, #d9d8d0);
-  --xf-surface: var(--xeplr-surface, #ffffff);
+  --xf-accent-ink: var(--xeplr-accent-text, #ffffff);
+  --xf-ink: var(--xeplr-text-primary, #1a1a19);
+  --xf-muted: var(--xeplr-text-secondary, #6b6a63);
+  --xf-border: var(--xeplr-border-primary, #d9d8d0);
+  --xf-surface: var(--xeplr-bg-tertiary, #ffffff);
+  --xf-plane: var(--xeplr-bg-primary, #f7f7f5);
+  --xf-hover: var(--xeplr-bg-hover, #f0f0ee);
+  --xf-field-bg: var(--xeplr-input-bg, var(--xf-surface));
+  --xf-field-border: var(--xeplr-input-border, var(--xf-border));
+  --xf-good: var(--xeplr-success, #1d7a4c);
+  --xf-warn: var(--xeplr-warning, #a86a00);
   --xf-danger: var(--xeplr-danger, #c2372e);
 }
 
@@ -28,21 +51,19 @@
    host with --xeplr-factory-paper. */
 .xeplr-factory-screen {
   position: relative; width: 100%;
+  /* Centred in whatever it is given: shown at its design width, a screen that
+     hugs the left edge of a wide page looks abandoned there. */
+  margin-inline: auto;
+  box-sizing: border-box;
   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);
-}
-.xeplr-factory-status--saved { color: var(--xeplr-status-good, #1d7a4c); }
-.xeplr-factory-status--invalid, .xeplr-factory-status--error { color: var(--xf-danger); }
+  border: 1px solid var(--xf-border);
+  border-radius: 10px;
+}
+/* A screen of lists only (nothing to fill in) paints no sheet: the list is
+   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; }
 
@@ -66,15 +87,17 @@
 .xeplr-factory-required { color: var(--xf-danger); }
 .xeplr-factory-input {
   flex: 1; min-height: 0; width: 100%; box-sizing: border-box;
-  /* 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));
+  /* The app's input colours — unless the SCREEN sets its own colours, when
+     screenStyle points --xf-ink / --xf-field-bg at those, so a screen designed
+     in dark ink on paper never gets a dark theme's box under that ink. */
+  font: inherit; color: var(--xf-ink); background: var(--xf-field-bg);
+  border: 1px solid var(--xf-field-border); border-radius: calc(6 * var(--xf-u));
   padding: 0 calc(10 * var(--xf-u));
+  transition: border-color .12s, box-shadow .12s;
 }
+.xeplr-factory-input:hover { border-color: color-mix(in srgb, var(--xf-accent) 45%, var(--xf-field-border)); }
 .xeplr-factory-textarea { padding-block: calc(8 * var(--xf-u)); resize: none; }
-.xeplr-factory-input:focus { outline: 2px solid color-mix(in srgb, var(--xf-accent) 40%, transparent); border-color: var(--xf-accent); }
+.xeplr-factory-input: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-field.has-error .xeplr-factory-input { border-color: var(--xf-danger); }
 .xeplr-factory-error {
   /* In the gap BELOW the field, out of flow: a message appearing must not
@@ -92,7 +115,10 @@
    list of options cannot cover the next field. */
 .xeplr-factory-choices { display: flex; gap: calc(6 * var(--xf-u)) calc(16 * var(--xf-u)); overflow: auto; min-height: 0; }
 .xeplr-factory-choices--vertical { flex-direction: column; }
-.xeplr-factory-choices--horizontal { flex-direction: row; flex-wrap: wrap; align-items: center; }
+/* Side by side, the options sit in the band an input box would fill — so a
+   row of radios beside a dropdown lines up with the dropdown's box, not with
+   its label. */
+.xeplr-factory-choices--horizontal { flex: 1; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; }
 .xeplr-factory-choice { display: flex; align-items: center; gap: calc(8 * var(--xf-u)); cursor: pointer; color: var(--xf-ink); }
 .xeplr-factory-choice input { width: calc(16 * var(--xf-u)); height: calc(16 * var(--xf-u)); min-width: 11px; min-height: 11px; margin: 0; accent-color: var(--xf-accent); }
 
@@ -100,48 +126,81 @@
 .xeplr-factory-file { display: flex; align-items: center; gap: calc(8 * var(--xf-u)); min-width: 0; }
 .xeplr-factory-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--xf-ink); }
 .xeplr-factory-file-clear {
-  flex: none; border: 1px solid var(--xf-border); background: var(--xf-surface); color: var(--xf-muted);
+  flex: none; border: 1px solid var(--xf-field-border); background: var(--xf-field-bg); color: var(--xf-muted);
   border-radius: calc(6 * var(--xf-u)); padding: calc(3 * var(--xf-u)) calc(8 * var(--xf-u)); cursor: pointer; font: inherit;
 }
 .xeplr-factory-file-clear:hover { color: var(--xf-ink); border-color: var(--xf-accent); }
 .xeplr-factory-file-input { padding: calc(5 * var(--xf-u)); }
 
 /* ── stepper ──────────────────────────────────────────────────────────────
-   The journey across the top: a circle per step, joined by a line. The line is
-   drawn behind the circles, from the middle of one to the middle of the next. */
-.xeplr-factory-stepper { display: flex; align-items: center; width: 100%; height: 100%; overflow: hidden; }
+   The journey across the top: a circle per step, joined by a line. The line
+   runs from the EDGE of one circle to the edge of the next, with a small gap —
+   never through them. (It used to run centre to centre behind the circles,
+   and each step's line was painted after the previous step's circle, so it
+   struck straight through the numbers.) --xf-mark is the circle's size. */
+.xeplr-factory-stepper {
+  --xf-mark: max(22px, calc(28 * var(--xf-u)));
+  display: flex; align-items: center; width: 100%; height: 100%; overflow: hidden;
+}
 .xeplr-factory-steps { display: flex; align-items: flex-start; width: 100%; margin: 0; padding: 0; list-style: none; }
 .xeplr-factory-step { flex: 1; position: relative; min-width: 0; text-align: center; }
 .xeplr-factory-step + .xeplr-factory-step::before {
-  content: ''; position: absolute; top: calc(13 * var(--xf-u)); right: 50%; left: -50%; height: 2px;
+  content: ''; position: absolute;
+  top: calc(var(--xf-mark) / 2 - 1px); height: 2px; border-radius: 1px;
+  left: calc(-50% + var(--xf-mark) / 2 + 8px);
+  right: calc(50% + var(--xf-mark) / 2 + 8px);
   background: var(--xf-border);
+  transition: background .2s;
 }
 .xeplr-factory-step.is-active::before, .xeplr-factory-step.is-done::before { background: var(--xf-accent); }
 .xeplr-factory-step-button {
-  position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--xf-u));
+  position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--xf-u));
   width: 100%; padding: 0; border: none; background: none; color: var(--xf-muted); font: inherit; cursor: pointer;
 }
 .xeplr-factory-step-mark {
-  display: flex; align-items: center; justify-content: center;
-  width: calc(26 * var(--xf-u)); height: calc(26 * var(--xf-u)); min-width: 18px; min-height: 18px;
-  border-radius: 50%; background: var(--xf-border); color: var(--xf-ink); font-weight: 600;
+  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
+  width: var(--xf-mark); height: var(--xf-mark);
+  border-radius: 50%; border: 2px solid var(--xf-border); background: var(--xf-surface);
+  color: var(--xf-muted); font-weight: 600; font-size: .9em; line-height: 1;
+  transition: background .2s, border-color .2s, box-shadow .2s, transform .08s;
 }
+.xeplr-factory-step-button:hover .xeplr-factory-step-mark { border-color: var(--xf-accent); }
+.xeplr-factory-step-button:active .xeplr-factory-step-mark { transform: scale(.92); }
 .xeplr-factory-step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
-.xeplr-factory-step.is-active .xeplr-factory-step-mark,
-.xeplr-factory-step.is-done .xeplr-factory-step-mark { background: var(--xf-accent); color: #fff; }
+.xeplr-factory-step.is-done .xeplr-factory-step-mark { background: var(--xf-accent); border-color: var(--xf-accent); color: var(--xf-accent-ink); }
+/* Where you are: filled, with a soft halo. */
+.xeplr-factory-step.is-active .xeplr-factory-step-mark {
+  background: var(--xf-accent); border-color: var(--xf-accent); color: var(--xf-accent-ink);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xf-accent) 22%, transparent);
+}
+.xeplr-factory-step.is-done .xeplr-factory-step-button { color: var(--xf-ink); }
 .xeplr-factory-step.is-active .xeplr-factory-step-button { color: var(--xf-accent); font-weight: 600; }
+.xeplr-factory-step-button:focus { outline: none; }
+.xeplr-factory-step-button:focus-visible .xeplr-factory-step-mark { outline: 2px solid var(--xf-accent); outline-offset: 3px; }
 /* A step the app has ruled out: still shown, so the journey reads the same,
    but plainly not one of the stops. */
 .xeplr-factory-step.is-off .xeplr-factory-step-button { opacity: 0.4; cursor: default; }
 .xeplr-factory-step.is-off .xeplr-factory-step-label { text-decoration: line-through; }
 
-/* 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; }
+/* ── the footer ─────────────────────────────────────────────────────────────
+   ONE bar under the fields: Back on the left, where you are and what the save
+   is doing in the middle, the ways forward on the right. Inset by the screen's
+   own margin (--xf-margin, set by ScreenSample) so the buttons line up with
+   the fields' edges instead of poking out past them. */
+.xeplr-factory-footer {
+  display: flex; align-items: center; gap: 10px;
+  margin-top: calc(8 * var(--xf-u));
+  padding: 14px var(--xf-margin, 16px);
+  border-top: 1px solid var(--xf-border);
+}
+.xeplr-factory-footer-mid {
+  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
+  color: var(--xf-muted); font-size: 12px; text-align: center;
+}
+.xeplr-factory-footer-mid:first-child { align-items: flex-start; text-align: left; }
+.xeplr-factory-footer-status--saved { color: var(--xf-good); }
+.xeplr-factory-footer-status--invalid, .xeplr-factory-footer-status--error { color: var(--xf-danger); }
+.xeplr-factory-footer button[disabled] { opacity: 0.4; cursor: default; }
 
 /* Which step the builder is on. */
 .xeplr-factory-building { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 auto 8px; padding: 6px 0; }
@@ -159,37 +218,42 @@
 
 /* ── list ───────────────────────────────────────────────────────────────── */
 .xeplr-factory-list {
-  display: flex; flex-direction: column; width: 100%; height: 100%; box-sizing: border-box; overflow: auto;
+  display: flex; flex-direction: column; width: 100%; box-sizing: border-box; overflow: auto;
+  /* As tall as its rows, up to the box it was given — never a frame around a
+     block of empty space under two records. */
+  height: auto; max-height: 100%;
   font-size: max(10px, calc(var(--xf-font, 14) * var(--xf-u)));
-  border: 1px solid var(--xf-border); border-radius: calc(8 * var(--xf-u)); background: var(--xf-surface);
+  border: 1px solid var(--xf-border); border-radius: 10px; background: var(--xf-surface);
 }
-.xeplr-factory-list-head { display: flex; align-items: center; gap: 10px; padding: calc(8 * var(--xf-u)) calc(10 * var(--xf-u)); border-bottom: 1px solid var(--xf-border); }
-.xeplr-factory-list-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.xeplr-factory-list-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--xf-border); }
+.xeplr-factory-list-title { font-weight: 600; font-size: 1.05em; color: var(--xf-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .xeplr-factory-list-new {
-  font: inherit; font-weight: 600; font-size: .9em; padding: 3px 10px; border-radius: 5px; cursor: pointer;
-  color: var(--xf-accent); background: transparent; border: 1px solid var(--xf-accent);
+  font: inherit; font-weight: 600; font-size: .9em; padding: 5px 12px; border-radius: 6px; cursor: pointer;
+  color: var(--xf-accent-ink); background: var(--xf-accent); border: 1px solid var(--xf-accent);
 }
+/* The table IS the card here: the list's frame is enough, so the table's own
+   border and corners go, and its toolbar becomes the list's header. */
+.xeplr-factory-list--table { overflow: hidden; }
+.xeplr-factory-list--table .xeplr-table-container { border: none; border-radius: 0; background: transparent; }
+.xeplr-factory-list--table .xeplr-table-toolbar { padding: 12px 14px; background: transparent; gap: 10px; }
+.xeplr-factory-list--design { height: 100%; }
 .xeplr-factory-list-empty { padding: 16px; color: var(--xf-muted); text-align: center; }
 .xeplr-factory-error-inline { color: var(--xf-danger); font-size: .9em; }
 .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: #ecebe4; }
+.xeplr-factory-list-bar { display: block; height: calc(8 * var(--xf-u)); width: 70%; border-radius: 4px; background: var(--xf-border); }
 .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); }
 
 /* ── the builder ────────────────────────────────────────────────────────── */
 .xeplr-factory-builder {
   display: flex; flex-direction: column; height: 100%; min-height: 560px;
-  color: var(--xeplr-text, #1a1a19); font-size: 13px;
-  --xf-accent: var(--xeplr-accent, #2563eb);
-  --xf-border: var(--xeplr-border, #d9d8d0);
-  --xf-muted: var(--xeplr-muted, #6b6a63);
-  --xf-danger: var(--xeplr-danger, #c2372e);
+  color: var(--xf-ink); font-size: 13px;
 }
 .xeplr-factory-bar {
   display: flex; align-items: center; gap: 10px; padding: 8px 12px;
-  border-bottom: 1px solid var(--xf-border); background: var(--xeplr-surface, #fff);
+  border-bottom: 1px solid var(--xf-border); background: var(--xf-surface);
 }
 .xeplr-factory-name {
   flex: 1; min-width: 0; font: inherit; font-size: 16px; font-weight: 600;
@@ -200,27 +264,41 @@
 .xeplr-factory-problems { font-size: 12px; color: var(--xf-muted); white-space: nowrap; cursor: help; }
 .xeplr-factory-problems.is-loud { color: var(--xf-danger); font-weight: 600; }
 .xeplr-factory-primary, .xeplr-factory-secondary, .xeplr-factory-danger {
-  font: inherit; font-weight: 600; padding: 6px 14px; border-radius: 6px; cursor: pointer; border: 1px solid var(--xf-accent);
+  font: inherit; font-weight: 600; padding: 7px 16px; border-radius: 6px; cursor: pointer; border: 1px solid var(--xf-accent);
+}
+.xeplr-factory-primary { background: var(--xf-accent); color: var(--xf-accent-ink); }
+.xeplr-factory-primary, .xeplr-factory-secondary, .xeplr-factory-danger, .xeplr-factory-list-new {
+  transition: background .12s, filter .12s, transform .08s, box-shadow .12s;
+}
+.xeplr-factory-primary:hover:not(:disabled) { filter: brightness(1.08); }
+.xeplr-factory-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--xf-accent) 12%, transparent); }
+.xeplr-factory-list-new:hover { filter: brightness(1.08); }
+.xeplr-factory-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--xf-danger) 12%, transparent); }
+/* A press you can see — the button gives a little. */
+.xeplr-factory-primary:active:not(:disabled), .xeplr-factory-secondary:active:not(:disabled),
+.xeplr-factory-danger:active:not(:disabled), .xeplr-factory-list-new:active { transform: scale(.96); }
+.xeplr-factory-primary:focus-visible, .xeplr-factory-secondary:focus-visible,
+.xeplr-factory-danger:focus-visible, .xeplr-factory-list-new:focus-visible {
+  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-accent) 35%, transparent);
 }
-.xeplr-factory-primary { background: var(--xf-accent); color: #fff; }
 .xeplr-factory-primary:disabled { opacity: .6; }
 .xeplr-factory-secondary { background: transparent; color: var(--xf-accent); }
 .xeplr-factory-danger { background: transparent; color: var(--xf-danger); border-color: var(--xf-danger); }
 .xeplr-factory-save-error { padding: 6px 12px; color: var(--xf-danger); background: color-mix(in srgb, var(--xf-danger) 7%, transparent); font-size: 12px; }
 
 .xeplr-factory-body { flex: 1; min-height: 0; display: flex; }
-.xeplr-factory-bar-status--saved { color: var(--xeplr-status-good, #1d7a4c); }
+.xeplr-factory-bar-status--saved { color: var(--xf-good); }
 .xeplr-factory-bar-status--invalid, .xeplr-factory-bar-status--error { color: var(--xf-danger); }
-.xeplr-factory-preview { flex: 1; min-height: 0; overflow: auto; padding: 16px; background: var(--xeplr-plane, #f7f7f5); }
-.xeplr-factory-preview > .xeplr-factory-screen { max-width: 960px; margin: 0 auto; background: var(--xeplr-surface, #fff); border: 1px solid var(--xf-border); border-radius: 8px; }
+.xeplr-factory-preview { flex: 1; min-height: 0; overflow: auto; padding: 16px; background: var(--xf-plane); }
+.xeplr-factory-preview > .xeplr-factory-screen { max-width: 960px; margin: 0 auto; background: var(--xf-surface); border: 1px solid var(--xf-border); border-radius: 8px; }
 
 /* palette */
-.xeplr-factory-palette { width: 168px; flex: 0 0 auto; overflow-y: auto; padding: 10px; border-right: 1px solid var(--xf-border); background: var(--xeplr-surface, #fff); }
+.xeplr-factory-palette { width: 168px; flex: 0 0 auto; overflow-y: auto; padding: 10px; border-right: 1px solid var(--xf-border); background: var(--xf-surface); }
 .xeplr-factory-palette-group + .xeplr-factory-palette-group { margin-top: 12px; }
 .xeplr-factory-palette-title { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--xf-muted); }
 .xeplr-factory-palette-item {
   display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 4px; padding: 7px 8px;
-  font: inherit; text-align: left; color: inherit; background: var(--xeplr-surface, #fff);
+  font: inherit; text-align: left; color: inherit; background: var(--xf-surface);
   border: 1px solid var(--xf-border); border-radius: 6px; cursor: grab;
 }
 .xeplr-factory-palette-item:hover { border-color: var(--xf-accent); }
@@ -236,14 +314,14 @@
 .xeplr-factory-palette-icon--textarea { height: 14px; }
 
 /* canvas */
-.xeplr-factory-stage { flex: 1; min-width: 0; min-height: 0; display: flex; justify-content: center; padding: 12px; box-sizing: border-box; background: var(--xeplr-plane, #f7f7f5); }
+.xeplr-factory-stage { flex: 1; min-width: 0; min-height: 0; display: flex; justify-content: center; padding: 12px; box-sizing: border-box; background: var(--xf-plane); }
 /* Exactly the screen's design width, never wider: what you design is the size it is shown at. */
 .xeplr-factory-frame { flex: 1; min-width: 0; height: 100%; display: flex; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
 .xeplr-factory-canvas {
   flex: 1; height: 100%;
   background:
     radial-gradient(circle, var(--xeplr-border-secondary, #e4e3db) 1px, transparent 1px) 0 0 / 20px 20px,
-    var(--xeplr-surface, #ffffff);
+    var(--xf-surface);
 }
 .xeplr-factory-design-node { width: 100%; height: 100%; box-sizing: border-box; border-radius: 4px; outline: 1px dashed transparent; cursor: move; }
 .xeplr-factory-design-node:hover { outline-color: color-mix(in srgb, var(--xf-accent) 45%, transparent); }
@@ -257,7 +335,21 @@
 }
 
 /* property panel */
-.xeplr-factory-panel { width: 280px; flex: 0 0 auto; overflow-y: auto; padding: 10px 12px; border-left: 1px solid var(--xf-border); background: var(--xeplr-surface, #fff); }
+.xeplr-factory-panel { width: 280px; flex: 0 0 auto; overflow-y: auto; padding: 10px 12px; border-left: 1px solid var(--xf-border); background: var(--xf-surface); }
+.xeplr-factory-fieldtype { padding: 2px 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--xf-border); }
+.xeplr-factory-suggest {
+  margin-top: 8px; padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.45;
+  color: var(--xf-ink); background: color-mix(in srgb, var(--xf-accent) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--xf-accent) 35%, transparent);
+}
+.xeplr-factory-suggest-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
+.xeplr-factory-suggest-actions button { padding: 4px 10px; font-size: 12px; }
+.xeplr-factory-hints {
+  font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; padding: 3px 10px; border-radius: 999px;
+  color: var(--xf-accent); background: color-mix(in srgb, var(--xf-accent) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--xf-accent) 35%, transparent);
+}
+.xeplr-factory-hints:hover { background: color-mix(in srgb, var(--xf-accent) 18%, transparent); }
 .xeplr-factory-panel-empty { color: var(--xf-muted); line-height: 1.5; }
 .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; }
@@ -268,7 +360,7 @@
 .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;
-  border: 1px solid var(--xf-border); border-radius: 5px; background: #fff; color: var(--xf-ink, #1a1a19);
+  border: 1px solid var(--xf-field-border); border-radius: 5px; background: var(--xf-field-bg); color: var(--xf-ink);
 }
 .xeplr-factory-prop.has-error .xeplr-factory-prop-input { border-color: var(--xf-danger); }
 /* An editor made of two inputs — a set to pick from, and the list it fills in. */
@@ -281,7 +373,7 @@
 
 .xeplr-factory-segment { display: flex; margin-bottom: 8px; border: 1px solid var(--xf-border); border-radius: 6px; overflow: hidden; }
 .xeplr-factory-segment button { flex: 1; font: inherit; font-size: 12px; padding: 5px; border: none; background: transparent; cursor: pointer; color: inherit; }
-.xeplr-factory-segment button.is-on { background: var(--xf-accent); color: #fff; }
+.xeplr-factory-segment button.is-on { background: var(--xf-accent); color: var(--xf-accent-ink); }
 .xeplr-factory-options-head, .xeplr-factory-option-row { display: grid; grid-template-columns: 1fr 1fr 24px; gap: 4px; align-items: center; }
 .xeplr-factory-options-head { font-size: 11px; color: var(--xf-muted); margin-bottom: 3px; }
 .xeplr-factory-option-row { margin-bottom: 4px; }
@@ -298,24 +390,26 @@
 .xeplr-factory-modal-backdrop {
   position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start; justify-content: center;
   padding: 4vh 2vw; box-sizing: border-box; overflow: auto;
-  background: rgba(20, 20, 18, .45);
+  background: var(--xeplr-bg-overlay, rgba(20, 20, 18, .45));
 }
 .xeplr-factory-modal {
-  max-width: 96vw; background: var(--xeplr-surface, #fff); color: var(--xeplr-text, #1a1a19);
+  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;
 }
-.xeplr-factory-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--xeplr-border, #e2e1d9); }
+.xeplr-factory-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--xf-border); }
 .xeplr-factory-modal-title { font-weight: 700; font-size: 15px; }
-.xeplr-factory-modal-close { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--xeplr-muted, #6b6a63); padding: 2px 6px; }
+.xeplr-factory-modal-close { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--xf-muted); padding: 2px 6px; }
 .xeplr-factory-modal-body { padding: 8px 24px 16px; }
+/* The popup is the frame; the screen inside it does not draw a second one. */
+.xeplr-factory-modal-body > .xeplr-factory-screen { border: none; border-radius: 0; }
 
 /* ── publish result ─────────────────────────────────────────────────────── */
 .xeplr-factory-publish { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--xf-border); }
 .xeplr-factory-publish > span { flex: 1; }
-.xeplr-factory-publish.is-ok { color: var(--xeplr-status-good, #1d7a4c); background: color-mix(in srgb, var(--xeplr-status-good, #1d7a4c) 7%, transparent); }
+.xeplr-factory-publish.is-ok { color: var(--xf-good); background: color-mix(in srgb, var(--xf-good) 7%, transparent); }
 .xeplr-factory-publish.is-error { color: var(--xf-danger); background: color-mix(in srgb, var(--xf-danger) 7%, transparent); flex-wrap: wrap; }
-.xeplr-factory-publish-detail { flex-basis: 100%; order: 3; margin: 4px 0 0; padding: 8px; max-height: 220px; overflow: auto; font-size: 11.5px; color: var(--xeplr-text, #1a1a19); background: var(--xeplr-surface, #fff); border: 1px solid var(--xf-border); border-radius: 6px; white-space: pre; }
-.xeplr-factory-publish.is-confirm { align-items: center; color: var(--xeplr-text, #1a1a19); background: color-mix(in srgb, var(--xeplr-status-warn, #a86a00) 10%, transparent); border-bottom-color: color-mix(in srgb, var(--xeplr-status-warn, #a86a00) 40%, transparent); }
+.xeplr-factory-publish-detail { flex-basis: 100%; order: 3; margin: 4px 0 0; padding: 8px; max-height: 220px; overflow: auto; font-size: 11.5px; color: var(--xf-ink); background: var(--xf-surface); border: 1px solid var(--xf-border); border-radius: 6px; white-space: pre; }
+.xeplr-factory-publish.is-confirm { align-items: center; color: var(--xf-ink); background: color-mix(in srgb, var(--xf-warn) 10%, transparent); border-bottom-color: color-mix(in srgb, var(--xf-warn) 40%, transparent); }
 .xeplr-factory-confirm-text { flex: 1; line-height: 1.5; }
 .xeplr-factory-confirm-text ul { margin: 4px 0; padding-left: 18px; }
 .xeplr-factory-confirm-actions { display: flex; gap: 8px; flex-shrink: 0; }

package/src/designs/index.js

@@ -9,3 +9,7 @@ export { default as FlowBuilderSample } from './FlowBuilderSample.jsx'
 export { default as ControlView, VIEWS } from './ControlView.jsx'
 export { default as Palette, DRAG_TYPE } from './Palette.jsx'
 export { default as PropertyPanel, EDITORS } from './PropertyPanel.jsx'
+
+// The body of another package's "design this screen" window — see
+// ../useScreenSource.js, which is how it is normally reached.
+export { ScreenEditorSample } from './ScreenEditorSample.jsx'

package/src/designs/styles.js

@@ -40,12 +40,22 @@ export function boxStyle(style) {
   })
 }
 
-/** The screen's defaults, on its container: what every control inherits. */
+/**
+ * The screen's defaults, on its container: what every control inherits.
+ *
+ * A screen with no colours of its own follows the app's theme (factory.css).
+ * One that sets them keeps them EVERYWHERE — its ink and paper become the
+ * tokens the controls read, input boxes included — so a screen designed dark
+ * ink on white is never shown as that ink on a dark theme's input box.
+ */
 export function screenStyle(doc) {
   const s = doc.style || {}
   return clean({
     '--xf-width': doc.width,
     '--xf-font': s.fontSize,
+    '--xf-ink': s.color,
+    '--xf-surface': s.background,
+    '--xf-field-bg': s.background,
     fontFamily: s.fontFamily,
     color: s.color,
     background: s.background

package/src/generate.js

@@ -26,6 +26,7 @@
 import { CONTROLS, CHOICE_TYPES } from './controls.js'
 import { createScreen, addControl, MARGIN, GAP, slugify, camelName, stepsOf } from './document.js'
 import { assertValidDocument } from './validateDocument.js'
+import { presetFor, presetProps, suggestPreset } from './presets.js'
 
 /** Heights by control, as page fractions (a page is as tall as it is wide). */
 export const SPEC_HEIGHTS = {
@@ -45,7 +46,7 @@ export const SPEC_HEIGHTS = {
  */
 export const ROW_GAP = 0.04
 
-const FIELD_KEYS = ['type', 'label', 'name', 'required', 'placeholder', 'default', 'validation', 'data', 'options', 'table', 'layout', 'accept', 'maxSize', 'step', 'steps', 'showNumbers', 'width', 'text', 'variant', 'style']
+const FIELD_KEYS = ['type', 'preset', 'label', 'name', 'required', 'placeholder', 'default', 'validation', 'data', 'options', 'table', 'layout', 'accept', 'maxSize', 'step', 'steps', 'showNumbers', 'width', 'text', 'variant', 'style']
 const SPEC_KEYS = ['name', 'id', 'source', 'columns', 'heading', 'fields', 'list', 'aspect', 'width', 'style']
 const LIST_KEYS = ['title', 'source', 'columns', 'pageSize', 'actions', 'style']
 
@@ -58,6 +59,12 @@ const LIST_KEYS = ['title', 'source', 'columns', 'pageSize', 'actions', 'style']
  *   fields    in reading order. Each: { label, type?='text', name?, required?, placeholder?,
  *             default?, validation?, width?: 'half'|'full' }
  *             dropdown: options: ['Full time', …] or [{ id, name }]  —or—  table: 'departments'
+ *             READY-MADE: `type` may be a preset key — 'email', 'phone', 'url', 'linkedin',
+ *             'age', 'dateOfBirth', 'gender', 'country', 'amount', 'percentage', 'yesNo',
+ *             'postalCode' (presets.js) — or `preset: '<key>'`. A field with NO type and
+ *             no options is matched by its label: { label: 'Age' } is a whole number 0–130,
+ *             { label: 'LinkedIn URL' } a LinkedIn address. `type: 'text'` opts out.
+ *             Anything the field also gives (label, required, validation…) wins.
  *             section heading: { type: 'label', text, variant?: 'subheading' }
  *   source?   the table records are saved to, e.g. 'employees'
  *   width?    design width in px (default 800) — style sizes are px at this width
@@ -65,7 +72,8 @@ const LIST_KEYS = ['title', 'source', 'columns', 'pageSize', 'actions', 'style']
  *   list?     true, or { title, source, columns: [{ field, label }], pageSize, actions } —
  *             a list of the saved records below the fields, with New / Edit / Delete
  *
- * There is no submit button: a screen saves itself as it is filled in.
+ * Do not add a button control for saving: every screen already has Save (and
+ * Cancel where it can go back) in its footer — an AJAX call, never a form submit.
  */
 export function screenFromSpec(spec, controls = CONTROLS) {
   if (!spec || typeof spec !== 'object') throw new Error('screenFromSpec: spec must be an object')
@@ -134,14 +142,19 @@ export function screenFromSpec(spec, controls = CONTROLS) {
     const at = `spec.fields[${i}]`
     if (!field || typeof field !== 'object') throw new Error(`screenFromSpec: ${at} must be an object`)
     unknownKeys(field, FIELD_KEYS, at)
-    const type = field.type || 'text'
-    if (!controls[type]) throw new Error(`screenFromSpec: ${at}.type "${type}" is not a control — one of: ${Object.keys(controls).join(', ')}`)
+    // A ready-made field: named (type or preset), or recognised from a label
+    // that says nothing else about itself.
+    const bare = !field.type && !field.preset && !field.options && !field.table && !field.data
+    const preset = presetFor(field.preset) || presetFor(field.type) || (bare ? suggestPreset(field.label) : null)
+    if (field.preset && !presetFor(field.preset)) throw new Error(`screenFromSpec: ${at}.preset "${field.preset}" is not a ready-made field`)
+    const type = preset ? preset.control : (field.type || 'text')
+    if (!controls[type]) throw new Error(`screenFromSpec: ${at}.type "${type}" is not a control or a ready-made field — controls: ${Object.keys(controls).join(', ')}`)
     if (field.width !== undefined && field.width !== 'half' && field.width !== 'full') throw new Error(`screenFromSpec: ${at}.width must be "half" or "full"`)
     if (field.step !== undefined) {
       if (!stepper) throw new Error(`screenFromSpec: ${at}.step needs a stepper before it — { "type": "stepper", "steps": [...] }`)
       openStep(field.step)
     }
-    place(type, propsFromField(type, field, at), field.width)
+    place(type, preset ? withPreset(preset, propsFromField(type, { ...field, type }, at, true), field) : propsFromField(type, field, at), field.width)
   })
 
   if (col > 0) { y += rowH + ROW_GAP; col = 0; rowH = 0 }
@@ -157,7 +170,17 @@ export function screenFromSpec(spec, controls = CONTROLS) {
   return assertValidDocument(doc, controls)
 }
 
-function propsFromField(type, field, at) {
+/** A preset's props under what the field itself gave. */
+function withPreset(preset, own, field) {
+  const base = presetProps(preset)
+  const out = { ...base, ...own }
+  // Rules merge key by key: { label: 'Age', validation: { max: 120 } } keeps min and integer.
+  if (base.validation || own.validation) out.validation = { ...(base.validation || {}), ...(own.validation || {}) }
+  if (!field.label) out.label = base.label
+  return out
+}
+
+function propsFromField(type, field, at, fromPreset) {
   if (type === 'stepper') {
     const steps = field.steps
     if (!Array.isArray(steps) || steps.length < 2) throw new Error(`screenFromSpec: ${at} is a stepper — give it steps: ["Connect", "Transform", …]`)
@@ -175,13 +198,15 @@ function propsFromField(type, field, at) {
     if (field.style) props.style = field.style
     return props
   }
-  if (!field.label) throw new Error(`screenFromSpec: ${at}.label is required`)
-  const props = { label: field.label }
+  if (!field.label && !fromPreset) throw new Error(`screenFromSpec: ${at}.label is required`)
+  const props = field.label ? { label: field.label } : {}
   ;['name', 'required', 'placeholder', 'default', 'validation', 'style'].forEach((k) => {
     if (field[k] !== undefined) props[k] = field[k]
   })
-  if (type === 'dropdown' && props.placeholder === undefined) props.placeholder = 'Select…'
-  if (CHOICE_TYPES.includes(type)) {
+  if (type === 'dropdown' && props.placeholder === undefined && !fromPreset) props.placeholder = 'Select…'
+  if (CHOICE_TYPES.includes(type) && fromPreset && !field.options && !field.table && !field.data) {
+    if (field.layout !== undefined && type !== 'dropdown') props.layout = field.layout
+  } else if (CHOICE_TYPES.includes(type)) {
     props.data = dataFromField(field, at, type)
     if (field.layout !== undefined && type !== 'dropdown') props.layout = field.layout
     // A field reading another table stores that row's id: name the column

package/src/hooks.js

@@ -40,7 +40,7 @@ export class FactoryHooks {
   }
 
   /**
-   * Save — called on every autosave, so keep it quick and safe to repeat.
+   * Save — called when the person presses Save (or a flow's Next with unsaved changes).
    * @param values  what the form holds
    * @param ctx.steps  switch steps off or on as the record decides them —
    *        ctx.steps.disable('approval'), ctx.steps.enable()

package/src/index.js

@@ -10,12 +10,16 @@ export * from './model.js'
 
 // Controllers
 export { useFactoryBuilder } from './useFactoryBuilder.js'
-export { useFactoryScreen, normaliseOptions, AUTOSAVE_DELAY } from './useFactoryScreen.js'
+export { useFactoryScreen, normaliseOptions } from './useFactoryScreen.js'
+// This app's screens, shaped for another package's designer — see
+// useScreenSource.js. Two props instead of a page of glue per application.
+export { useScreenSource } from './useScreenSource.js'
+export { describeScreen, screenStub, loadScreens, keyFromName, editScreenOf } from './screenSource.js'
 export { useFlowRun } from './useFlowRun.js'
 export { useFlowBuilder, FLOW_AUTOSAVE_DELAY } from './useFlowBuilder.js'
 
 // Designs
-export { BuilderSample, ScreenSample, ListView, ScreenModal, FlowRunnerSample, FlowBuilderSample, ControlView, VIEWS, Palette, DRAG_TYPE, PropertyPanel, EDITORS } from './designs/index.js'
+export { BuilderSample, ScreenSample, ListView, ScreenModal, FlowRunnerSample, FlowBuilderSample, ScreenEditorSample, ControlView, VIEWS, Palette, DRAG_TYPE, PropertyPanel, EDITORS } from './designs/index.js'
 
 // Front-end hooks — extend FactoryHooks, override what you need, call super
 export { FactoryHooks } from './hooks.js'

package/src/model.js

@@ -19,8 +19,9 @@ export { createFactoryApi } from './remote.js'
 export {
   STANDARD_COLUMNS, RESERVED_COLUMNS, MAX_IDENTIFIER,
   columnForField, tableForScreen, columnSql, widening, diffTables, migrationFor, nextMigrationName,
-  createStatements, addStatements, alterStatement, dropStatement, columnFromDatabase, planTableChange
+  createStatements, addStatements, alterStatement, dropStatement, columnFromDatabase, planTableChange, conversionFor
 } from './tableSchema.js'
+export { FIELD_PRESETS, PATTERNS, INPUT_TYPES, presetFor, presetProps, suggestPreset, presetGroup, presetHints, convertField } from './presets.js'
 export { createFlowsApi } from './flows.js'
 export {
   FLOW_KIND, FLOW_VERSION, FLOW_END, FLOW_OPERATORS, VALUELESS_OPERATORS,