@xeplr/ui-factory 1.0.1 → 1.0.2

package/src/controls.js

@@ -1,7 +1,8 @@
 // THE CONTROLS a screen is made of — one entry per type, and nothing about any
 // control lives anywhere else. The palette lists these, the property panel is
-// generated from `properties`, the document checker reads `props`, and the
-// form schema reads `valueType`. Adding a control is adding an entry.
+// generated from `properties`, the document checker reads `props`, `validation`
+// and `styles`, and the form schema reads `valueType`. Adding a control is
+// adding an entry.
 //
 // Pure data: no React. The renderers are in designs/ControlView.jsx, keyed by
 // the same `type`, so this file also runs in node — the CLI and the tests read
@@ -14,6 +15,73 @@
 export const OPTION_ID = 'id'
 export const OPTION_LABEL = 'name'
 
+// ── styles ───────────────────────────────────────────────────────────────
+// Every look a control can have is a key under `props.style`, described once
+// here: its editor, and the values it accepts. Sizes are PIXELS at the screen's
+// design width; a screen shown narrower shrinks them in proportion, and never
+// enlarges them.
+
+export const FONT_FAMILIES = [
+  { value: 'system-ui, -apple-system, "Segoe UI", sans-serif', label: 'System' },
+  { value: 'Arial, Helvetica, sans-serif', label: 'Arial' },
+  { value: 'Verdana, Geneva, sans-serif', label: 'Verdana' },
+  { value: 'Tahoma, Geneva, sans-serif', label: 'Tahoma' },
+  { value: '"Trebuchet MS", sans-serif', label: 'Trebuchet MS' },
+  { value: 'Georgia, serif', label: 'Georgia' },
+  { value: '"Times New Roman", Times, serif', label: 'Times New Roman' },
+  { value: '"Courier New", Courier, monospace', label: 'Courier New' },
+  { value: 'ui-monospace, SFMono-Regular, Menlo, monospace', label: 'Monospace' }
+]
+
+const WEIGHTS = [
+  { value: 300, label: 'Light' },
+  { value: 400, label: 'Regular' },
+  { value: 500, label: 'Medium' },
+  { value: 600, label: 'Semibold' },
+  { value: 700, label: 'Bold' },
+  { value: 800, label: 'Extra bold' }
+]
+
+/**
+ * key → { label, type (editor), check }. `check` is what the document checker
+ * accepts; `hint` is what it says when a value is refused.
+ */
+export const STYLE_KEYS = {
+  fontFamily: { label: 'Font', type: 'font', hint: 'a CSS font-family, e.g. "Georgia, serif"' },
+  fontSize: { label: 'Font size (px)', type: 'number', min: 8, max: 96, hint: 'a number of pixels from 8 to 96' },
+  fontWeight: { label: 'Weight', type: 'select', options: WEIGHTS, hint: 'one of 300, 400, 500, 600, 700, 800' },
+  fontStyle: { label: 'Italic', type: 'toggleValue', on: 'italic', hint: '"normal" or "italic"' },
+  textAlign: { label: 'Align', type: 'select', options: [
+    { value: 'left', label: 'Left' }, { value: 'center', label: 'Centre' }, { value: 'right', label: 'Right' }
+  ], hint: '"left", "center" or "right"' },
+  color: { label: 'Text colour', type: 'color', hint: 'a colour as #rgb or #rrggbb' },
+  background: { label: 'Background', type: 'color', hint: 'a colour as #rgb or #rrggbb, or "transparent"' },
+  borderColor: { label: 'Border colour', type: 'color', hint: 'a colour as #rgb or #rrggbb, or "transparent"' },
+  borderWidth: { label: 'Border width (px)', type: 'number', min: 0, max: 10, hint: 'a number of pixels from 0 to 10' },
+  borderRadius: { label: 'Corner radius (px)', type: 'number', min: 0, max: 40, hint: 'a number of pixels from 0 to 40' },
+  labelFontSize: { label: 'Label size (px)', type: 'number', min: 8, max: 48, hint: 'a number of pixels from 8 to 48' },
+  labelFontWeight: { label: 'Label weight', type: 'select', options: WEIGHTS, hint: 'one of 300, 400, 500, 600, 700, 800' },
+  labelColor: { label: 'Label colour', type: 'color', hint: 'a colour as #rgb or #rrggbb' }
+}
+
+/** The screen-wide defaults every control inherits. */
+export const SCREEN_STYLE_KEYS = ['fontFamily', 'fontSize', 'color', 'background']
+
+const INPUT_STYLES = ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textAlign', 'color', 'background', 'borderColor', 'borderWidth', 'borderRadius', 'labelFontSize', 'labelFontWeight', 'labelColor']
+
+/** Property-panel groups for a control's styles, split the way people look for them. */
+function styleGroups(keys) {
+  const field = (k) => ({ path: `props.style.${k}`, label: STYLE_KEYS[k].label, type: STYLE_KEYS[k].type, options: STYLE_KEYS[k].options, on: STYLE_KEYS[k].on, min: STYLE_KEYS[k].min, max: STYLE_KEYS[k].max })
+  const groups = [
+    { key: 'text', title: 'Text', keys: ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textAlign', 'color'] },
+    { key: 'box', title: 'Box', keys: ['background', 'borderColor', 'borderWidth', 'borderRadius'] },
+    { key: 'labelStyle', title: 'Label', keys: ['labelFontSize', 'labelFontWeight', 'labelColor'] }
+  ]
+  return groups
+    .map((g) => ({ key: g.key, title: g.title, fields: g.keys.filter((k) => keys.includes(k)).map(field) }))
+    .filter((g) => g.fields.length)
+}
+
 // ── property panel contract ──────────────────────────────────────────────
 // { key, title, fields: [{ path, label, type, options?, help? }] }
 // The same shape as the BI dashboard's widgetProperties.js, so the two panels
@@ -42,8 +110,9 @@ export const CONTROLS = {
     valueType: 'string',
     defaultSize: { w: 0.44, h: 0.08 },
     defaults: { label: 'Text' },
-    props: ['name', 'label', 'placeholder', 'required', 'default', 'validation'],
+    props: ['name', 'label', 'placeholder', 'required', 'default', 'validation', 'style'],
     validation: ['minLength', 'maxLength', 'pattern', 'patternMessage'],
+    styles: INPUT_STYLES,
     properties: [
       FIELD_BASICS([PLACEHOLDER, { path: 'props.default', label: 'Default value', type: 'text' }]),
       {
@@ -55,7 +124,8 @@ export const CONTROLS = {
           { path: 'props.validation.pattern', label: 'Pattern (regex)', type: 'text' },
           { path: 'props.validation.patternMessage', label: 'Pattern message', type: 'text', help: 'Shown when the pattern does not match' }
         ]
-      }
+      },
+      ...styleGroups(INPUT_STYLES)
     ]
   },
 
@@ -67,8 +137,9 @@ export const CONTROLS = {
     valueType: 'string',
     defaultSize: { w: 0.92, h: 0.18 },
     defaults: { label: 'Notes' },
-    props: ['name', 'label', 'placeholder', 'required', 'default', 'validation'],
+    props: ['name', 'label', 'placeholder', 'required', 'default', 'validation', 'style'],
     validation: ['minLength', 'maxLength'],
+    styles: INPUT_STYLES,
     properties: [
       FIELD_BASICS([PLACEHOLDER, { path: 'props.default', label: 'Default value', type: 'textarea' }]),
       {
@@ -78,7 +149,8 @@ export const CONTROLS = {
           { path: 'props.validation.minLength', label: 'Min length', type: 'number' },
           { path: 'props.validation.maxLength', label: 'Max length', type: 'number' }
         ]
-      }
+      },
+      ...styleGroups(INPUT_STYLES)
     ]
   },
 
@@ -90,8 +162,9 @@ export const CONTROLS = {
     valueType: 'number',
     defaultSize: { w: 0.44, h: 0.08 },
     defaults: { label: 'Number' },
-    props: ['name', 'label', 'placeholder', 'required', 'default', 'validation'],
+    props: ['name', 'label', 'placeholder', 'required', 'default', 'validation', 'style'],
     validation: ['min', 'max', 'integer'],
+    styles: INPUT_STYLES,
     properties: [
       FIELD_BASICS([PLACEHOLDER, { path: 'props.default', label: 'Default value', type: 'number' }]),
       {
@@ -102,7 +175,8 @@ export const CONTROLS = {
           { path: 'props.validation.max', label: 'Maximum', type: 'number' },
           { path: 'props.validation.integer', label: 'Whole numbers only', type: 'toggle' }
         ]
-      }
+      },
+      ...styleGroups(INPUT_STYLES)
     ]
   },
 
@@ -114,8 +188,9 @@ export const CONTROLS = {
     valueType: 'date',
     defaultSize: { w: 0.44, h: 0.08 },
     defaults: { label: 'Date' },
-    props: ['name', 'label', 'required', 'default', 'validation'],
+    props: ['name', 'label', 'required', 'default', 'validation', 'style'],
     validation: ['min', 'max'],
+    styles: INPUT_STYLES,
     properties: [
       FIELD_BASICS([{ path: 'props.default', label: 'Default value', type: 'date' }]),
       {
@@ -125,7 +200,8 @@ export const CONTROLS = {
           { path: 'props.validation.min', label: 'Earliest', type: 'date' },
           { path: 'props.validation.max', label: 'Latest', type: 'date' }
         ]
-      }
+      },
+      ...styleGroups(INPUT_STYLES)
     ]
   },
 
@@ -135,13 +211,15 @@ export const CONTROLS = {
     group: 'Inputs',
     input: true,
     valueType: 'boolean',
-    defaultSize: { w: 0.44, h: 0.06 },
+    defaultSize: { w: 0.44, h: 0.05 },
     defaults: { label: 'Checkbox', default: false },
     // `required` on a checkbox means it must be ticked — "I accept".
-    props: ['name', 'label', 'required', 'default'],
+    props: ['name', 'label', 'required', 'default', 'style'],
     validation: [],
+    styles: ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'color'],
     properties: [
-      FIELD_BASICS([{ path: 'props.default', label: 'Ticked by default', type: 'toggle' }])
+      FIELD_BASICS([{ path: 'props.default', label: 'Ticked by default', type: 'toggle' }]),
+      ...styleGroups(['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'color'])
     ]
   },
 
@@ -154,8 +232,9 @@ export const CONTROLS = {
     valueType: null,
     defaultSize: { w: 0.44, h: 0.08 },
     defaults: { label: 'Dropdown', placeholder: 'Select…', data: { source: 'static', options: [] } },
-    props: ['name', 'label', 'placeholder', 'required', 'default', 'data'],
+    props: ['name', 'label', 'placeholder', 'required', 'default', 'data', 'style'],
     validation: [],
+    styles: INPUT_STYLES.filter((k) => k !== 'textAlign'),
     properties: [
       FIELD_BASICS([PLACEHOLDER]),
       {
@@ -164,7 +243,8 @@ export const CONTROLS = {
         fields: [
           { path: 'props.data', label: 'Options come from', type: 'dataSource' }
         ]
-      }
+      },
+      ...styleGroups(INPUT_STYLES.filter((k) => k !== 'textAlign'))
     ]
   },
 
@@ -173,53 +253,70 @@ export const CONTROLS = {
     label: 'Label',
     group: 'Content',
     input: false,
-    defaultSize: { w: 0.92, h: 0.06 },
+    defaultSize: { w: 0.92, h: 0.05 },
     defaults: { text: 'Label', variant: 'text' },
-    props: ['text', 'variant'],
+    props: ['text', 'variant', 'style'],
     validation: [],
+    styles: ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textAlign', 'color', 'background', 'borderColor', 'borderWidth', 'borderRadius'],
     properties: [
       {
         key: 'content',
         title: 'Content',
         fields: [
           { path: 'props.text', label: 'Text', type: 'textarea' },
-          { path: 'props.variant', label: 'Style', type: 'select', options: [
+          { path: 'props.variant', label: 'Preset', type: 'select', options: [
             { value: 'heading', label: 'Heading' },
             { value: 'subheading', label: 'Subheading' },
             { value: 'text', label: 'Text' }
-          ] }
-        ]
-      }
-    ]
-  },
-
-  button: {
-    type: 'button',
-    label: 'Button',
-    group: 'Actions',
-    input: false,
-    defaultSize: { w: 0.18, h: 0.07 },
-    defaults: { label: 'Save', action: 'submit' },
-    props: ['label', 'action'],
-    validation: [],
-    properties: [
-      {
-        key: 'button',
-        title: 'Button',
-        fields: [
-          { path: 'props.label', label: 'Label', type: 'text' },
-          { path: 'props.action', label: 'Does', type: 'select', options: [
-            { value: 'submit', label: 'Submit the form' },
-            { value: 'reset', label: 'Reset the form' }
-          ] }
+          ], help: 'A starting size and weight — the Text settings below override it' }
         ]
-      }
+      },
+      ...styleGroups(['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textAlign', 'color', 'background', 'borderColor', 'borderWidth', 'borderRadius'])
     ]
   }
 }
 
+/** What a list's rows can offer. */
+export const LIST_ACTIONS = ['new', 'edit', 'delete']
+
+CONTROLS.list = {
+  type: 'list',
+  label: 'List',
+  group: 'Data',
+  input: false,
+  defaultSize: { w: 0.92, h: 0.42 },
+  // No columns → the screen's own fields, in reading order.
+  defaults: { title: 'Saved records', pageSize: 10, actions: ['new', 'edit', 'delete'] },
+  // editScreen: the id of the screen Edit and New open in a POPUP. Without one,
+  // Edit opens the row in this screen's own fields (a list on a form).
+  props: ['title', 'source', 'editScreen', 'columns', 'pageSize', 'actions', 'style'],
+  validation: [],
+  styles: ['fontFamily', 'fontSize', 'color', 'background', 'borderColor', 'borderWidth', 'borderRadius'],
+  properties: [
+    {
+      key: 'list',
+      title: 'List',
+      fields: [
+        { path: 'props.title', label: 'Title', type: 'text' },
+        { path: 'props.source', label: 'Records from', type: 'table', help: 'Blank → the table this screen saves to' },
+        { path: 'props.editScreen', label: 'Edit in', type: 'screen', help: 'The screen Edit and New open in a popup' },
+        { path: 'props.pageSize', label: 'Rows per page', type: 'number' }
+      ]
+    },
+    { key: 'columns', title: 'Columns', fields: [{ path: 'props.columns', label: 'Columns', type: 'columns' }] },
+    { key: 'actions', title: 'Actions', fields: [{ path: 'props.actions', label: 'Actions', type: 'actions' }] },
+    ...styleGroups(['fontFamily', 'fontSize', 'color', 'background', 'borderColor', 'borderWidth', 'borderRadius'])
+  ]
+}
+
 export const LABEL_VARIANTS = ['heading', 'subheading', 'text']
-export const BUTTON_ACTIONS = ['submit', 'reset']
+
+/** The sizes a label preset starts from, in px at the design width. */
+export const LABEL_PRESETS = {
+  heading: { fontSize: 26, fontWeight: 700 },
+  subheading: { fontSize: 18, fontWeight: 600 },
+  text: { fontSize: 14, fontWeight: 400 }
+}
 
 /** Palette order: grouped, in declaration order. */
 export function controlGroups(controls = CONTROLS) {

package/src/designs/BuilderSample.jsx

@@ -3,14 +3,25 @@ import { XeplrCanvas } from '@xeplr/ui-canvas'
 import ControlView from './ControlView.jsx'
 import Palette, { DRAG_TYPE } from './Palette.jsx'
 import PropertyPanel from './PropertyPanel.jsx'
+import { screenStyle } from './styles.js'
 
-// The builder, drawn: name and Save on top, controls on the left, the screen
-// on the canvas in the middle, the selection's properties on the right.
-// Presentation only — everything comes from useFactoryBuilder.
+// The builder, drawn: name and save status on top, controls on the left, the
+// screen on the canvas in the middle, properties on the right — the selected
+// control's, or the screen's own when nothing is selected. Presentation only —
+// everything comes from useFactoryBuilder.
 //
-// The canvas is @xeplr/ui-canvas in fraction units with pageAspect set to the
-// screen's aspect, which is exactly the geometry ScreenSample renders with — so
-// the builder shows the screen at its real proportions.
+// The canvas is exactly the screen's design width (never wider), in fraction
+// units with pageAspect = the screen's aspect: the same geometry ScreenSample
+// renders with, so the builder shows the screen at its real size.
+
+const STATUS = {
+  idle: '',
+  pending: 'Unsaved changes…',
+  saving: 'Saving…',
+  saved: 'All changes saved',
+  invalid: 'Not saved — fix the problems',
+  error: 'Not saved'
+}
 
 export default function BuilderSample({ ctrl, renderPreview, className, style }) {
   const { document: doc } = ctrl
@@ -44,28 +55,34 @@ export default function BuilderSample({ ctrl, renderPreview, className, style })
           placeholder="Screen name, e.g. New employee"
           aria-label="Screen name"
         />
-        <div className="xeplr-factory-bar-status" aria-live="polite">
-          {ctrl.saving ? 'Saving…' : ctrl.dirty ? 'Unsaved changes' : ''}
+        <div className={`xeplr-factory-bar-status xeplr-factory-bar-status--${ctrl.status}`} role="status" aria-live="polite">
+          {ctrl.status === 'error' ? `Not saved — ${ctrl.saveError}` : STATUS[ctrl.status]}
         </div>
         {problemCount > 0 && (
-          <span className={`xeplr-factory-problems${ctrl.showErrors ? ' is-loud' : ''}`} title={ctrl.validation.errors.map((x) => `${x.path}: ${x.message}`).join('\n')}>
+          <span className="xeplr-factory-problems" title={ctrl.validation.errors.map((x) => `${x.path}: ${x.message}`).join('\n')}>
             {problemCount} problem{problemCount === 1 ? '' : 's'}
           </span>
         )}
+        {ctrl.status === 'error' && (
+          <button type="button" className="xeplr-factory-secondary" onClick={ctrl.save}>Retry</button>
+        )}
         {renderPreview && (
           <button type="button" className="xeplr-factory-secondary" aria-pressed={preview} onClick={() => setPreview((p) => !p)}>
             {preview ? 'Back to design' : 'Preview'}
           </button>
         )}
-        <button type="button" className="xeplr-factory-primary" onClick={ctrl.save} disabled={ctrl.saving}>
-          Save
-        </button>
+        {ctrl.canPublish && (
+          <button type="button" className="xeplr-factory-primary" onClick={ctrl.publish} disabled={ctrl.publishing}>
+            {ctrl.publishing ? 'Publishing…' : 'Publish'}
+          </button>
+        )}
       </header>
 
-      {ctrl.saveError && <div className="xeplr-factory-save-error" role="alert">{ctrl.saveError}</div>}
-      {ctrl.showErrors && ctrl.errorsByNode._document && (
-        <div className="xeplr-factory-save-error" role="alert">
-          {ctrl.errorsByNode._document.map((e, i) => <div key={i}><code>{e.path}</code> {e.message}</div>)}
+      {ctrl.publishResult && (
+        <div className={`xeplr-factory-publish${ctrl.publishResult.ok ? ' is-ok' : ' is-error'}`} role="status">
+          <span>{ctrl.publishResult.message}</span>
+          {ctrl.publishResult.detail && <pre className="xeplr-factory-publish-detail">{ctrl.publishResult.detail}</pre>}
+          <button type="button" className="xeplr-factory-icon-button" aria-label="Dismiss" onClick={ctrl.clearPublishResult}>×</button>
         </div>
       )}
 
@@ -80,34 +97,41 @@ export default function BuilderSample({ ctrl, renderPreview, className, style })
             onDragOver={(e) => { if ([...e.dataTransfer.types].includes(DRAG_TYPE)) { e.preventDefault(); e.dataTransfer.dropEffect = 'copy' } }}
             onDrop={onDrop}
           >
-            <XeplrCanvas
-              className="xeplr-factory-canvas"
-              items={doc.nodes}
-              units="fraction"
-              pageAspect={doc.aspect}
-              features={{ resize: true, marquee: true }}
-              selection={ctrl.selected}
-              onSelectionChange={ctrl.setSelected}
-              onItemChange={ctrl.moveControl}
-              minSizeFor={() => ({ minWidth: 16, minHeight: 12 })}
-              renderItem={(node, { selected }) => (
-                <div className={`xeplr-factory-design-node${ctrl.showErrors && ctrl.errorsByNode[node.id] ? ' has-error' : ''}${selected ? ' is-selected' : ''}`}>
-                  <ControlView node={node} mode="design" />
-                </div>
-              )}
-              underlay={doc.nodes.length === 0 && (
-                <div className="xeplr-factory-empty">Drag controls here from the left</div>
-              )}
-            />
+            <div className="xeplr-factory-frame" style={{ maxWidth: doc.width }}>
+              <XeplrCanvas
+                className="xeplr-factory-canvas"
+                style={screenStyle(doc)}
+                items={doc.nodes}
+                units="fraction"
+                pageAspect={doc.aspect}
+                features={{ resize: true, marquee: true }}
+                selection={ctrl.selected}
+                onSelectionChange={ctrl.setSelected}
+                onItemChange={ctrl.moveControl}
+                minSizeFor={() => ({ minWidth: 16, minHeight: 12 })}
+                renderItem={(node, { selected }) => (
+                  <div className={`xeplr-factory-design-node${ctrl.errorsByNode[node.id] ? ' has-error' : ''}${selected ? ' is-selected' : ''}`}>
+                    <ControlView node={node} mode="design" list={node.type === 'list' ? { doc } : undefined} />
+                  </div>
+                )}
+                underlay={doc.nodes.length === 0 && (
+                  <div className="xeplr-factory-empty">Drag controls here from the left</div>
+                )}
+              />
+            </div>
           </div>
 
           <PropertyPanel
+            doc={doc}
             node={ctrl.selectedNode}
             control={ctrl.selectedControl}
             selectionCount={ctrl.selected.size}
-            errors={ctrl.selectedNode ? ctrl.errorsByNode[ctrl.selectedNode.id] : null}
+            errors={ctrl.selectedNode ? ctrl.errorsByNode[ctrl.selectedNode.id] : ctrl.errorsByNode._document}
             tables={ctrl.tables}
+            screens={ctrl.screens}
+            lockedNames={ctrl.lockedNames}
             onChange={(path, value) => ctrl.setProperty(ctrl.selectedNode.id, path, value)}
+            onScreenChange={ctrl.setScreen}
             onRemove={ctrl.removeSelected}
           />
         </div>

package/src/designs/ControlView.jsx

@@ -1,13 +1,17 @@
+import { LABEL_PRESETS } from '../controls.js'
+import ListView from './ListView.jsx'
+import { fieldStyle, labelStyle, boxStyle } from './styles.js'
+
 // How each control LOOKS — the one renderer, used both on the builder's
 // canvas (mode 'design': inert, so a press drags it) and on a live screen
 // (mode 'live'). Sharing it is what makes the builder honest: what you place is
-// what the form shows.
+// what the form shows, fonts and colours included.
 //
-// Presentation only. Values, options and errors arrive as props.
+// Presentation only. Values, options, errors and list data arrive as props.
 
 const ids = (node) => `xeplr-factory-${node.id}`
 
-export default function ControlView({ node, mode = 'live', value, error, options, onChange, onAction, disabled }) {
+export default function ControlView({ node, mode = 'live', value, error, options, onChange, onBlur, disabled, list }) {
   const View = VIEWS[node.type]
   if (!View) {
     return <div className="xeplr-factory-unknown">Unknown control “{node.type}”</div>
@@ -22,17 +26,18 @@ export default function ControlView({ node, mode = 'live', value, error, options
       error={design ? null : error}
       options={options || { loading: false, items: [], error: null }}
       onChange={onChange || (() => {})}
-      onAction={onAction || (() => {})}
+      onBlur={onBlur || (() => {})}
       disabled={design || disabled}
+      list={list}
     />
   )
 }
 
 function Field({ node, p, error, children, inline }) {
   return (
-    <div className={`xeplr-factory-field${inline ? ' xeplr-factory-field--inline' : ''}${error ? ' has-error' : ''}`}>
+    <div className={`xeplr-factory-field${inline ? ' xeplr-factory-field--inline' : ''}${error ? ' has-error' : ''}`} style={fieldStyle(p.style)}>
       {!inline && (
-        <label className="xeplr-factory-label" htmlFor={ids(node)}>
+        <label className="xeplr-factory-label" htmlFor={ids(node)} style={labelStyle(p.style)}>
           {p.label}{p.required && <span className="xeplr-factory-required" aria-hidden="true"> *</span>}
         </label>
       )}
@@ -42,19 +47,21 @@ function Field({ node, p, error, children, inline }) {
   )
 }
 
-function inputProps(node, p, error, disabled) {
+function inputProps(node, p, error, disabled, onBlur) {
   return {
     id: ids(node),
     name: p.name,
     disabled,
-    required: undefined, // validation is ours, with our messages — not the browser's bubbles
     'aria-invalid': error ? true : undefined,
     'aria-describedby': error ? `${ids(node)}-error` : undefined,
-    tabIndex: disabled ? -1 : undefined
+    'aria-required': p.required ? true : undefined,
+    tabIndex: disabled ? -1 : undefined,
+    onBlur,
+    style: boxStyle(p.style)
   }
 }
 
-function TextView({ node, p, value, error, onChange, disabled }) {
+function TextView({ node, p, value, error, onChange, onBlur, disabled }) {
   return (
     <Field node={node} p={p} error={error}>
       <input
@@ -63,13 +70,13 @@ function TextView({ node, p, value, error, onChange, disabled }) {
         placeholder={p.placeholder || ''}
         value={value ?? ''}
         onChange={(e) => onChange(e.target.value)}
-        {...inputProps(node, p, error, disabled)}
+        {...inputProps(node, p, error, disabled, onBlur)}
       />
     </Field>
   )
 }
 
-function TextareaView({ node, p, value, error, onChange, disabled }) {
+function TextareaView({ node, p, value, error, onChange, onBlur, disabled }) {
   return (
     <Field node={node} p={p} error={error}>
       <textarea
@@ -77,13 +84,13 @@ function TextareaView({ node, p, value, error, onChange, disabled }) {
         placeholder={p.placeholder || ''}
         value={value ?? ''}
         onChange={(e) => onChange(e.target.value)}
-        {...inputProps(node, p, error, disabled)}
+        {...inputProps(node, p, error, disabled, onBlur)}
       />
     </Field>
   )
 }
 
-function NumberView({ node, p, value, error, onChange, disabled }) {
+function NumberView({ node, p, value, error, onChange, onBlur, disabled }) {
   const v = p.validation || {}
   return (
     <Field node={node} p={p} error={error}>
@@ -95,13 +102,13 @@ function NumberView({ node, p, value, error, onChange, disabled }) {
         placeholder={p.placeholder || ''}
         value={value ?? ''}
         onChange={(e) => onChange(e.target.value)}
-        {...inputProps(node, p, error, disabled)}
+        {...inputProps(node, p, error, disabled, onBlur)}
       />
     </Field>
   )
 }
 
-function DateView({ node, p, value, error, onChange, disabled }) {
+function DateView({ node, p, value, error, onChange, onBlur, disabled }) {
   const v = p.validation || {}
   return (
     <Field node={node} p={p} error={error}>
@@ -112,21 +119,23 @@ function DateView({ node, p, value, error, onChange, disabled }) {
         max={v.max}
         value={value ?? ''}
         onChange={(e) => onChange(e.target.value)}
-        {...inputProps(node, p, error, disabled)}
+        {...inputProps(node, p, error, disabled, onBlur)}
       />
     </Field>
   )
 }
 
-function CheckboxView({ node, p, value, error, onChange, disabled }) {
+function CheckboxView({ node, p, value, error, onChange, onBlur, disabled }) {
+  const text = boxStyle(p.style)
   return (
     <Field node={node} p={p} error={error} inline>
-      <label className="xeplr-factory-check" htmlFor={ids(node)}>
+      <label className="xeplr-factory-check" htmlFor={ids(node)} style={{ fontSize: text.fontSize, fontWeight: text.fontWeight, fontStyle: text.fontStyle, color: text.color }}>
         <input
           type="checkbox"
           checked={Boolean(value ?? p.default)}
           onChange={(e) => onChange(e.target.checked)}
-          {...inputProps(node, p, error, disabled)}
+          {...inputProps(node, p, error, disabled, onBlur)}
+          style={undefined}
         />
         <span>{p.label}{p.required && <span className="xeplr-factory-required" aria-hidden="true"> *</span>}</span>
       </label>
@@ -134,7 +143,7 @@ function CheckboxView({ node, p, value, error, onChange, disabled }) {
   )
 }
 
-function DropdownView({ node, p, design, value, error, options, onChange, disabled }) {
+function DropdownView({ node, p, design, value, error, options, onChange, onBlur, disabled }) {
   const data = p.data || {}
   const items = data.source === 'static' ? (data.options || []) : options.items
   return (
@@ -143,7 +152,7 @@ function DropdownView({ node, p, design, value, error, options, onChange, disabl
         className="xeplr-factory-input xeplr-factory-select"
         value={value === undefined || value === null ? '' : String(value)}
         onChange={(e) => onChange(e.target.value)}
-        {...inputProps(node, p, error, disabled || (!design && options.loading))}
+        {...inputProps(node, p, error, disabled || (!design && options.loading), onBlur)}
       >
         <option value="">{!design && options.loading ? 'Loading…' : (p.placeholder || 'Select…')}</option>
         {!design && items.map((o) => <option key={String(o.id)} value={String(o.id)}>{o.name}</option>)}
@@ -161,25 +170,23 @@ function DropdownView({ node, p, design, value, error, options, onChange, disabl
 
 function LabelView({ p }) {
   const variant = p.variant || 'text'
+  const preset = LABEL_PRESETS[variant] || LABEL_PRESETS.text
   const Tag = variant === 'heading' ? 'h2' : variant === 'subheading' ? 'h3' : 'p'
-  return <Tag className={`xeplr-factory-text xeplr-factory-text--${variant}`}>{p.text}</Tag>
-}
-
-function ButtonView({ p, design, onAction, disabled }) {
-  const action = p.action || 'submit'
+  const s = { fontSize: preset.fontSize, fontWeight: preset.fontWeight, ...(p.style || {}) }
   return (
-    <button
-      className={`xeplr-factory-button xeplr-factory-button--${action}`}
-      type={design ? 'button' : action === 'reset' ? 'button' : 'submit'}
-      disabled={disabled}
-      tabIndex={design ? -1 : undefined}
-      onClick={action === 'reset' && !design ? () => onAction('reset') : undefined}
+    <Tag
+      className={`xeplr-factory-text xeplr-factory-text--${variant}`}
+      style={{ ...fieldStyle(s), ...boxStyle(s) }}
     >
-      {p.label}
-    </button>
+      {p.text}
+    </Tag>
   )
 }
 
+function ListControl({ node, design, list }) {
+  return <ListView node={node} design={design} {...(list || {})} />
+}
+
 export const VIEWS = {
   text: TextView,
   textarea: TextareaView,
@@ -188,5 +195,5 @@ export const VIEWS = {
   checkbox: CheckboxView,
   dropdown: DropdownView,
   label: LabelView,
-  button: ButtonView
+  list: ListControl
 }