@xeplr/ui-factory 1.0.1 → 1.0.3

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
 }

package/src/designs/ListView.jsx

@@ -0,0 +1,95 @@
+import { XeplrTable } from '@xeplr/ui-table'
+import { displayValue, listColumns, listSource } from '../values.js'
+import { boxStyle, fieldStyle } from './styles.js'
+
+// A list of the saved records, in @xeplr/ui-table.
+//
+// On the canvas (design) it is a still picture of the columns — there are no
+// records while designing. Live, rows come from the host's fetchRecords.
+// Edit and New open the list's edit screen in a popup (`editScreen`), or, for a
+// list on a form, load the row into the form's own fields. Delete removes it.
+
+export default function ListView({ node, doc, design, list, onEdit, onDelete, onNew, currentId, recordKey = 'id', canDelete, fieldNodes, optionsFor }) {
+  const p = node.props || {}
+  const columns = listColumns(doc, node)
+  const actions = p.actions || ['new', 'edit', 'delete']
+  const style = { ...fieldStyle(p.style), ...boxStyle(p.style) }
+
+  if (design) {
+    return (
+      <div className="xeplr-factory-list xeplr-factory-list--design" style={style}>
+        <div className="xeplr-factory-list-head">
+          <span className="xeplr-factory-list-title">{p.title}</span>
+          <span className="xeplr-factory-hint">from {listSource(doc, node) || 'no table'}</span>
+          {actions.includes('new') && <span className="xeplr-factory-list-new">+ New</span>}
+        </div>
+        <table className="xeplr-factory-list-mock">
+          <thead>
+            <tr>
+              {columns.map((c) => <th key={c.field}>{c.label}</th>)}
+              {(actions.includes('edit') || actions.includes('delete')) && <th />}
+            </tr>
+          </thead>
+          <tbody>
+            {[0, 1, 2].map((i) => (
+              <tr key={i}>{columns.map((c) => <td key={c.field}><span className="xeplr-factory-list-bar" /></td>)}{(actions.includes('edit') || actions.includes('delete')) && <td />}</tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+
+  const byField = Object.fromEntries((fieldNodes || []).map((n) => [n.props.name, n]))
+  // What the table shows: a dropdown's NAME and Yes/No — the raw record is kept
+  // alongside, so Edit opens exactly what was saved.
+  const rows = (list.rows || []).map((rec) => {
+    const shown = { __record: rec }
+    columns.forEach((c) => {
+      const f = byField[c.field]
+      shown[c.field] = displayValue(f, rec[c.field], f && f.type === 'dropdown' ? optionsFor(f).items : undefined)
+    })
+    return shown
+  })
+
+  const rowActions = []
+  if (actions.includes('edit')) {
+    rowActions.push({ key: 'edit', label: 'Edit', onClick: (row) => onEdit(row.__record) })
+  }
+  if (actions.includes('delete') && canDelete) {
+    rowActions.push({
+      key: 'delete',
+      label: 'Delete',
+      variant: 'danger',
+      onClick: (row) => {
+        // eslint-disable-next-line no-alert
+        if (typeof window === 'undefined' || window.confirm('Delete this record?')) onDelete(row.__record)
+      }
+    })
+  }
+
+  return (
+    <div className="xeplr-factory-list" style={style}>
+      <div className="xeplr-factory-list-head">
+        <span className="xeplr-factory-list-title">{p.title}</span>
+        {list.loading && <span className="xeplr-factory-hint">Loading…</span>}
+        {list.error && <span className="xeplr-factory-error-inline" role="alert">{list.error}</span>}
+        {actions.includes('new') && (
+          <button type="button" className="xeplr-factory-list-new" onClick={onNew}>+ New</button>
+        )}
+      </div>
+      {!list.loading && !list.error && rows.length === 0 ? (
+        <div className="xeplr-factory-list-empty">Nothing saved yet.</div>
+      ) : (
+        <XeplrTable
+          data={rows}
+          schema={{ 0: { key: listSource(doc, node) || 'records', columns: columns.map((c) => ({ accessor: c.field, header: c.label })) } }}
+          pageSize={p.pageSize || 10}
+          rowActions={rowActions.length ? rowActions : undefined}
+          rowClassName={(row) => (currentId !== null && currentId !== undefined && row.__record && row.__record[recordKey] === currentId ? 'xeplr-factory-row-open' : null)}
+          enableFiltering={rows.length > 5}
+        />
+      )}
+    </div>
+  )
+}

package/src/designs/PropertyPanel.jsx

@@ -1,11 +1,12 @@
 import { getAtPath } from '../propertyPath.js'
-import { slugify } from '../document.js'
+import { slugify, inputNodes } from '../document.js'
+import { FONT_FAMILIES, STYLE_KEYS, SCREEN_STYLE_KEYS, LIST_ACTIONS } from '../controls.js'
 
 // The selected control's properties, GENERATED from its entry in controls.js:
 // each field there names a path and an editor type, and this file owns only
 // what each editor type looks like. A new property is a line in controls.js.
 
-export default function PropertyPanel({ node, control, errors, tables, onChange, onRemove, selectionCount }) {
+export default function PropertyPanel({ doc, node, control, errors, tables, screens, lockedNames, onChange, onScreenChange, onRemove, selectionCount }) {
   if (selectionCount > 1) {
     return (
       <aside className="xeplr-factory-panel">
@@ -15,13 +16,7 @@ export default function PropertyPanel({ node, control, errors, tables, onChange,
     )
   }
   if (!node || !control) {
-    return (
-      <aside className="xeplr-factory-panel">
-        <p className="xeplr-factory-panel-empty">
-          Select a control to set its label, validation and options — or drag one in from the left.
-        </p>
-      </aside>
-    )
+    return <ScreenPanel doc={doc} errors={errors || []} tables={tables} onChange={onScreenChange} />
   }
 
   const nodeErrors = errors || []
@@ -41,21 +36,27 @@ export default function PropertyPanel({ node, control, errors, tables, onChange,
           {group.fields.map((field) => {
             const errs = errorsFor(field.path)
             errs.forEach((e) => shown.add(e))
-            const Editor = EDITORS[field.type] || TextEditor
+            // A field name that is already a column cannot change — see setNodeProperty.
+            const locked = field.path === 'props.name' && (lockedNames || []).includes(node.props?.name)
+            const Editor = locked ? LockedEditor : (EDITORS[field.type] || TextEditor)
             const id = `xf-prop-${node.id}-${field.path.replace(/\W+/g, '-')}`
             return (
               <div key={field.path} className={`xeplr-factory-prop${errs.length ? ' has-error' : ''}`}>
-                {field.type !== 'toggle' && <label className="xeplr-factory-prop-label" htmlFor={id}>{field.label}</label>}
+                {field.type !== 'toggle' && field.type !== 'toggleValue' && field.type !== 'columns' && field.type !== 'actions' && <label className="xeplr-factory-prop-label" htmlFor={id}>{field.label}</label>}
                 <Editor
                   id={id}
                   field={field}
                   value={getAtPath(node, field.path)}
                   onChange={(v) => onChange(field.path, v)}
                   tables={tables}
+                  screens={screens}
                   node={node}
+                  doc={doc}
                   errors={errs}
                 />
-                {field.help && <div className="xeplr-factory-prop-help">{field.help}</div>}
+                {locked
+                  ? <div className="xeplr-factory-prop-help">Saved as a column of <code>{doc?.source}</code> — renaming it would leave its data behind. A rename is a migration.</div>
+                  : field.help && <div className="xeplr-factory-prop-help">{field.help}</div>}
                 {errs.filter((e) => e.field === field.path).map((e, i) => (
                   <div key={i} className="xeplr-factory-prop-error">{e.message}</div>
                 ))}
@@ -79,6 +80,51 @@ export default function PropertyPanel({ node, control, errors, tables, onChange,
   )
 }
 
+/**
+ * Nothing selected: the SCREEN's own properties — where records are saved,
+ * how wide it is designed, and the font and colours every control inherits.
+ */
+function ScreenPanel({ doc, errors, tables, onChange }) {
+  const errorFor = (path) => errors.filter((e) => e.path === path || e.path.startsWith(path + '.')).map((e) => e.message)[0]
+  const styleFields = SCREEN_STYLE_KEYS.map((k) => ({ path: `style.${k}`, label: k === 'fontSize' ? 'Base font size (px)' : STYLE_KEYS[k].label, ...STYLE_KEYS[k] }))
+  const row = (field, Editor, extra) => {
+    const id = `xf-screen-${field.path.replace(/\W+/g, '-')}`
+    const msg = errorFor(field.path)
+    return (
+      <div key={field.path} className={`xeplr-factory-prop${msg ? ' has-error' : ''}`}>
+        {field.type !== 'toggle' && field.type !== 'toggleValue' && <label className="xeplr-factory-prop-label" htmlFor={id}>{field.label}</label>}
+        <Editor id={id} field={field} value={getAtPath(doc, field.path)} onChange={(v) => onChange(field.path, v)} tables={tables} errors={[]} {...extra} />
+        {field.help && <div className="xeplr-factory-prop-help">{field.help}</div>}
+        {msg && <div className="xeplr-factory-prop-error">{msg}</div>}
+      </div>
+    )
+  }
+  return (
+    <aside className="xeplr-factory-panel" aria-label="Screen properties">
+      <header className="xeplr-factory-panel-head">
+        <span className="xeplr-factory-panel-type">Screen</span>
+      </header>
+      <p className="xeplr-factory-panel-empty">Select a control to change it, or drag one in from the left.</p>
+      <fieldset className="xeplr-factory-group">
+        <legend>Data</legend>
+        {row({ path: 'source', label: 'Saves to', type: 'table', help: 'The table this screen\'s records are saved in' }, TableEditor)}
+      </fieldset>
+      <fieldset className="xeplr-factory-group">
+        <legend>Size</legend>
+        {row({ path: 'width', label: 'Width (px)', type: 'number', help: 'The width it is designed at. Narrower screens scale it down; wider ones never stretch it.' }, NumberEditor)}
+      </fieldset>
+      <fieldset className="xeplr-factory-group">
+        <legend>Text</legend>
+        {styleFields.map((f) => row(f, EDITORS[f.type] || TextEditor))}
+      </fieldset>
+    </aside>
+  )
+}
+
+function LockedEditor({ id, value }) {
+  return <input id={id} className="xeplr-factory-prop-input xeplr-factory-mono" type="text" value={value ?? ''} readOnly aria-readonly="true" />
+}
+
 function TextEditor({ id, value, onChange }) {
   return <input id={id} className="xeplr-factory-prop-input" type="text" value={value ?? ''} onChange={(e) => onChange(e.target.value)} />
 }
@@ -106,6 +152,121 @@ function DateEditor({ id, value, onChange }) {
   return <input id={id} className="xeplr-factory-prop-input" type="date" value={value ?? ''} onChange={(e) => onChange(e.target.value)} />
 }
 
+/** A font family: the common ones, or anything typed. */
+function FontEditor({ id, value, onChange }) {
+  const known = FONT_FAMILIES.some((f) => f.value === value)
+  return (
+    <select id={id} className="xeplr-factory-prop-input" value={value == null ? '' : known ? value : '__custom'} onChange={(e) => {
+      const v = e.target.value
+      if (v === '__custom') return
+      onChange(v === '' ? undefined : v)
+    }} style={{ fontFamily: value || undefined }}>
+      <option value="">Same as the screen</option>
+      {FONT_FAMILIES.map((f) => <option key={f.label} value={f.value} style={{ fontFamily: f.value }}>{f.label}</option>)}
+      {!known && value && <option value="__custom">{value}</option>}
+    </select>
+  )
+}
+
+/** A colour: a swatch, and the hex beside it. Clearing it goes back to the default. */
+function ColorEditor({ id, value, onChange }) {
+  const hex = typeof value === 'string' && /^#([0-9a-f]{6})$/i.test(value) ? value
+    : typeof value === 'string' && /^#([0-9a-f]{3})$/i.test(value) ? '#' + value.slice(1).split('').map((c) => c + c).join('')
+    : '#000000'
+  return (
+    <div className="xeplr-factory-color">
+      <input type="color" aria-label="Pick colour" value={hex} onChange={(e) => onChange(e.target.value)} />
+      <input id={id} className="xeplr-factory-prop-input xeplr-factory-mono" type="text" placeholder="default" value={value ?? ''} onChange={(e) => onChange(e.target.value.trim())} />
+      {value && <button type="button" className="xeplr-factory-icon-button" aria-label="Reset colour" onClick={() => onChange(undefined)}>×</button>}
+    </div>
+  )
+}
+
+/** A style that is either on (e.g. italic) or not set. */
+function ToggleValueEditor({ id, field, value, onChange }) {
+  return (
+    <label className="xeplr-factory-toggle" htmlFor={id}>
+      <input id={id} type="checkbox" checked={value === field.on} onChange={(e) => onChange(e.target.checked ? field.on : undefined)} />
+      <span>{field.label}</span>
+    </label>
+  )
+}
+
+/** A table name: picked from the app's tables when it lists them, typed otherwise. */
+function TableEditor({ id, value, onChange, tables }) {
+  if (tables && tables.items.length > 0) {
+    return (
+      <select id={id} className="xeplr-factory-prop-input" value={value ?? ''} onChange={(e) => onChange(e.target.value || undefined)}>
+        <option value="">{tables.loading ? 'Loading tables…' : '—'}</option>
+        {tables.items.map((t) => <option key={String(t.id)} value={String(t.id)}>{t.name}</option>)}
+      </select>
+    )
+  }
+  return <input id={id} className="xeplr-factory-prop-input" type="text" placeholder={tables?.loading ? 'Loading tables…' : 'table name'} value={value ?? ''} onChange={(e) => onChange(e.target.value.trim() || undefined)} />
+}
+
+/**
+ * A list's columns: tick which fields to show, in reading order. The fields
+ * are this screen's own — or, for a list screen, those of the screen it edits
+ * in. Nothing ticked means all of them.
+ */
+function ColumnsEditor({ value, onChange, doc, node, screens }) {
+  const editDoc = node && node.props.editScreen ? (screens || []).find((s) => s.id === node.props.editScreen)?.document : null
+  const from = doc && inputNodes(doc).length ? doc : editDoc
+  const fields = from
+    ? inputNodes(from).map((n) => ({ field: n.props.name, label: n.props.label || n.props.name }))
+    : (Array.isArray(value) ? value : [])
+  const chosen = Array.isArray(value) ? value : null
+  const isOn = (f) => (chosen ? chosen.some((c) => c.field === f.field) : true)
+  const toggle = (f) => {
+    const current = chosen || fields
+    const next = isOn(f) ? current.filter((c) => c.field !== f.field) : fields.filter((x) => x.field === f.field || current.some((c) => c.field === x.field))
+    // All of them again is the same as "not set" — keep the document clean.
+    onChange(next.length === fields.length || next.length === 0 ? undefined : next.map((c) => ({ field: c.field, label: (current.find((x) => x.field === c.field) || c).label })))
+  }
+  if (!fields.length) return <div className="xeplr-factory-prop-help">Add fields to the screen first — the list shows them as columns.</div>
+  return (
+    <div className="xeplr-factory-checklist">
+      {fields.map((f) => (
+        <label key={f.field} className="xeplr-factory-toggle">
+          <input type="checkbox" checked={isOn(f)} onChange={() => toggle(f)} />
+          <span>{f.label}</span>
+        </label>
+      ))}
+    </div>
+  )
+}
+
+/** Another screen, by id: picked from the ones the app lists, typed otherwise. */
+function ScreenEditor({ id, value, onChange, screens, doc }) {
+  const others = (screens || []).filter((s) => !doc || s.id !== doc.id)
+  if (others.length) {
+    return (
+      <select id={id} className="xeplr-factory-prop-input" value={value ?? ''} onChange={(e) => onChange(e.target.value || undefined)}>
+        <option value="">— open rows in this screen's fields</option>
+        {others.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+      </select>
+    )
+  }
+  return <input id={id} className="xeplr-factory-prop-input xeplr-factory-mono" type="text" placeholder="employee_edit" value={value ?? ''} onChange={(e) => onChange(e.target.value.trim() || undefined)} />
+}
+
+const ACTION_LABELS = { new: 'New — add a record', edit: 'Edit — open a row for editing', delete: 'Delete — remove a row' }
+
+function ActionsEditor({ value, onChange }) {
+  const on = Array.isArray(value) ? value : LIST_ACTIONS
+  return (
+    <div className="xeplr-factory-checklist">
+      {LIST_ACTIONS.map((a) => (
+        <label key={a} className="xeplr-factory-toggle">
+          <input type="checkbox" checked={on.includes(a)} onChange={(e) => onChange(e.target.checked ? LIST_ACTIONS.filter((x) => x === a || on.includes(x)) : on.filter((x) => x !== a))} />
+          <span>{ACTION_LABELS[a]}</span>
+        </label>
+      ))}
+    </div>
+  )
+}
+
 function ToggleEditor({ id, field, value, onChange }) {
   return (
     <label className="xeplr-factory-toggle" htmlFor={id}>
@@ -116,8 +277,14 @@ function ToggleEditor({ id, field, value, onChange }) {
 }
 
 function SelectEditor({ id, field, value, onChange }) {
+  // Style selects may be unset ("inherit"); numeric option values stay numbers.
+  const optional = String(field.path || '').includes('.style.') || String(field.path || '').startsWith('style.')
   return (
-    <select id={id} className="xeplr-factory-prop-input" value={value ?? ''} onChange={(e) => onChange(e.target.value)}>
+    <select id={id} className="xeplr-factory-prop-input" value={value ?? ''} onChange={(e) => {
+      const hit = field.options.find((o) => String(o.value) === e.target.value)
+      onChange(hit ? hit.value : undefined)
+    }}>
+      {optional && <option value="">Default</option>}
       {field.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
     </select>
   )
@@ -223,6 +390,13 @@ export const EDITORS = {
   number: NumberEditor,
   date: DateEditor,
   toggle: ToggleEditor,
+  toggleValue: ToggleValueEditor,
   select: SelectEditor,
+  font: FontEditor,
+  color: ColorEditor,
+  table: TableEditor,
+  screen: ScreenEditor,
+  columns: ColumnsEditor,
+  actions: ActionsEditor,
   dataSource: DataSourceEditor
 }

package/src/designs/ScreenModal.jsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react'
+
+// The popup a list's Edit / New opens its edit screen in.
+//
+// A real dialog: focus moves in, Escape and the backdrop close it, and focus
+// returns to whatever opened it. There is nothing to confirm on close — the
+// screen inside has already saved itself.
+
+export default function ScreenModal({ title, width, onClose, children }) {
+  const dialogRef = useRef(null)
+
+  useEffect(() => {
+    const opener = typeof document !== 'undefined' ? document.activeElement : null
+    dialogRef.current?.focus()
+    function onKey(e) { if (e.key === 'Escape') onClose() }
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      if (opener && opener.focus) opener.focus()
+    }
+  }, [onClose])
+
+  return (
+    <div className="xeplr-factory-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose() }}>
+      <div
+        ref={dialogRef}
+        className="xeplr-factory-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        tabIndex={-1}
+        style={{ width: width ? `min(${width + 48}px, 96vw)` : undefined }}
+      >
+        <header className="xeplr-factory-modal-head">
+          <span className="xeplr-factory-modal-title">{title}</span>
+          <button type="button" className="xeplr-factory-modal-close" onClick={onClose} aria-label="Close">×</button>
+        </header>
+        <div className="xeplr-factory-modal-body">{children}</div>
+      </div>
+    </div>
+  )
+}