@xeplr/ui-factory 1.0.1 → 1.0.2

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>
+  )
+}

package/src/designs/ScreenSample.jsx

@@ -1,15 +1,27 @@
 import ControlView from './ControlView.jsx'
-import { contentBottom, MARGIN } from '../document.js'
+import { contentBottom, inputNodes, MARGIN } from '../document.js'
+import { screenStyle } from './styles.js'
 
 // A saved screen, drawn. Presentation only — everything comes from
 // useFactoryScreen.
 //
 // NO MEASURING. Positions are CSS: x and w as percentages of the width, y and h
 // in container-query units (cqw = 1% of the screen's width) times the aspect.
-// So the screen keeps exactly its proportions at any width, renders on the
-// server, and never flashes at the wrong size while a ResizeObserver catches up.
+// The screen is never wider than the width it was designed at, so what was
+// designed at 800px is shown at 800px, and only a narrower screen scales it.
+//
+// NO SUBMIT. The status line says what the background save is doing.
+
+const STATUS = {
+  idle: '',
+  pending: 'Unsaved changes…',
+  saving: 'Saving…',
+  saved: 'All changes saved',
+  incomplete: 'Fill in the required fields to save',
+  invalid: 'Fix the highlighted fields to save'
+}
 
-export default function ScreenSample({ ctrl, className, style }) {
+export default function ScreenSample({ ctrl, className, style, renderPopup }) {
   const { document: doc } = ctrl
 
   if (ctrl.documentErrors.length) {
@@ -25,13 +37,27 @@ export default function ScreenSample({ ctrl, className, style }) {
 
   const aspect = doc.aspect
   const pageHeight = (contentBottom(doc) + MARGIN) * aspect * 100
+  const fieldNodes = inputNodes(doc)
+  const statusText = ctrl.status === 'error' ? `Not saved — ${ctrl.saveError}` : STATUS[ctrl.status]
+  // A screen with no fields of its own (a list screen) has nothing to save.
+  const hasFields = fieldNodes.length > 0
 
   return (
-    <div className={'xeplr-factory-screen' + (className ? ' ' + className : '')} style={style}>
+    <div
+      className={'xeplr-factory-screen' + (className ? ' ' + className : '')}
+      style={{ maxWidth: doc.width, ...screenStyle(doc), ...style }}
+    >
+      {hasFields && (
+        <div className={`xeplr-factory-status xeplr-factory-status--${ctrl.status}`} role="status" aria-live="polite">
+          <span>{ctrl.recordId !== null && ctrl.recordId !== undefined ? 'Editing record' : 'New record'}</span>
+          <span>{statusText}</span>
+        </div>
+      )}
       <form
         className="xeplr-factory-page"
         style={{ height: `${pageHeight}cqw` }}
-        onSubmit={ctrl.submit}
+        // Enter in a field saves now rather than posting a page.
+        onSubmit={(e) => { e.preventDefault(); ctrl.saveNow() }}
         noValidate
         aria-label={doc.name}
       >
@@ -53,13 +79,27 @@ export default function ScreenSample({ ctrl, className, style }) {
               error={node.props?.name ? ctrl.errors[node.props.name] : undefined}
               options={node.type === 'dropdown' ? ctrl.optionsFor(node) : undefined}
               onChange={(raw) => ctrl.setValue(node, raw)}
-              onAction={(action) => { if (action === 'reset') ctrl.reset() }}
-              disabled={ctrl.submitting}
+              onBlur={() => ctrl.touch(node)}
+              list={node.type === 'list' ? {
+                doc,
+                list: ctrl.listFor(node),
+                fieldNodes: ctrl.fieldsFor(node),
+                optionsFor: ctrl.optionsFor,
+                currentId: ctrl.recordId,
+                recordKey: ctrl.recordKey,
+                canDelete: ctrl.canDelete,
+                // A list with an edit screen opens it in a popup; one on a form
+                // opens the row in the form's own fields.
+                onEdit: (rec) => (node.props.editScreen ? ctrl.openEditor(node, rec) : ctrl.openRecord(rec)),
+                // eslint-disable-next-line no-alert
+                onDelete: (rec) => ctrl.deleteRecord(node, rec).catch((err) => window.alert(err.message || 'Could not delete')),
+                onNew: () => (node.props.editScreen ? ctrl.openEditor(node, null) : ctrl.newRecord())
+              } : undefined}
             />
           </div>
         ))}
       </form>
-      {ctrl.submitError && <div className="xeplr-factory-submit-error" role="alert">{ctrl.submitError}</div>}
+      {ctrl.popup && renderPopup && renderPopup(ctrl.popup, ctrl)}
     </div>
   )
 }

package/src/designs/factory.css

@@ -2,14 +2,15 @@
    Colours come from the xeplr theme variables, each with a light fallback, so
    a host that defines none still gets a finished look.
 
-   ONE SIZE UNIT, --xf-u: one design pixel on an 800px-wide screen. It is in
-   container-query units, so text and controls scale with the screen exactly as
-   their positions do — the whole screen keeps its proportions at any width. */
+   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
+   exactly the size chosen, and a screen never stretches. On a narrower screen
+   it shrinks, so the layout keeps its proportions. */
 
 .xeplr-factory-screen,
 .xeplr-factory-canvas {
   container-type: inline-size;
-  --xf-u: calc(100cqw / 800);
+  --xf-u: min(1px, calc(100cqw / var(--xf-width, 800)));
   --xf-accent: var(--xeplr-accent, #2563eb);
   --xf-ink: var(--xeplr-text, #1a1a19);
   --xf-muted: var(--xeplr-muted, #6b6a63);
@@ -20,6 +21,12 @@
 
 /* ── the screen ─────────────────────────────────────────────────────────── */
 .xeplr-factory-screen { position: relative; width: 100%; color: var(--xf-ink); }
+.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); }
 .xeplr-factory-page { position: relative; width: 100%; margin: 0; }
 .xeplr-factory-node { position: absolute; box-sizing: border-box; }
 
@@ -36,10 +43,10 @@
   position: relative;
   display: flex; flex-direction: column; gap: calc(4 * var(--xf-u));
   width: 100%; height: 100%; box-sizing: border-box;
-  font-size: max(11px, calc(14 * var(--xf-u)));
+  font-size: max(10px, calc(var(--xf-font, 14) * var(--xf-u)));
 }
 .xeplr-factory-field--inline { justify-content: center; }
-.xeplr-factory-label { font-weight: 600; font-size: max(11px, calc(13 * var(--xf-u))); color: var(--xf-ink); line-height: 1.2; }
+.xeplr-factory-label { font-weight: 600; font-size: max(10px, calc((var(--xf-font, 14) - 1) * var(--xf-u))); color: var(--xf-ink); line-height: 1.2; }
 .xeplr-factory-required { color: var(--xf-danger); }
 .xeplr-factory-input {
   flex: 1; min-height: 0; width: 100%; box-sizing: border-box;
@@ -61,20 +68,30 @@
 .xeplr-factory-check { display: flex; align-items: center; gap: calc(8 * var(--xf-u)); cursor: pointer; font-weight: 500; }
 .xeplr-factory-check input { width: calc(18 * var(--xf-u)); height: calc(18 * var(--xf-u)); min-width: 12px; min-height: 12px; margin: 0; accent-color: var(--xf-accent); }
 
-.xeplr-factory-text { margin: 0; color: var(--xf-ink); height: 100%; overflow: hidden; line-height: 1.25; }
-.xeplr-factory-text--heading { font-size: max(16px, calc(26 * var(--xf-u))); font-weight: 700; }
-.xeplr-factory-text--subheading { font-size: max(13px, calc(18 * var(--xf-u))); font-weight: 600; }
-.xeplr-factory-text--text { font-size: max(11px, calc(14 * var(--xf-u))); color: var(--xf-muted); }
+/* A label's size and weight are inline — its preset, overridden by its style. */
+.xeplr-factory-text { margin: 0; color: var(--xf-ink); height: 100%; overflow: hidden; line-height: 1.25; box-sizing: border-box; }
+.xeplr-factory-text--text { color: var(--xf-muted); }
 
-.xeplr-factory-button {
-  width: 100%; height: 100%; box-sizing: border-box; cursor: pointer;
-  padding: 0 calc(8 * var(--xf-u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  font: inherit; font-weight: 600; font-size: max(12px, calc(14 * var(--xf-u)));
-  border-radius: calc(6 * var(--xf-u)); border: 1px solid var(--xf-accent);
+/* ── list ───────────────────────────────────────────────────────────────── */
+.xeplr-factory-list {
+  display: flex; flex-direction: column; width: 100%; height: 100%; box-sizing: border-box; overflow: auto;
+  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);
+}
+.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-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);
 }
-.xeplr-factory-button--submit { background: var(--xf-accent); color: #fff; }
-.xeplr-factory-button--reset { background: var(--xf-surface); color: var(--xf-accent); }
-.xeplr-factory-button:disabled { opacity: .6; cursor: default; }
+.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: var(--xeplr-border-secondary, #ecebe4); }
+.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 {
@@ -107,6 +124,8 @@
 .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--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; }
 
@@ -123,11 +142,13 @@
 .xeplr-factory-palette-icon { width: 14px; height: 10px; border: 1.5px solid var(--xf-muted); border-radius: 2px; flex: 0 0 auto; }
 .xeplr-factory-palette-icon--checkbox { width: 10px; }
 .xeplr-factory-palette-icon--label { border: none; border-top: 2px solid var(--xf-muted); border-bottom: 2px solid var(--xf-muted); height: 6px; }
-.xeplr-factory-palette-icon--button { background: var(--xf-muted); }
+.xeplr-factory-palette-icon--list { height: 12px; background: repeating-linear-gradient(to bottom, var(--xf-muted) 0 1.5px, transparent 1.5px 4px); border: none; }
 .xeplr-factory-palette-icon--textarea { height: 14px; }
 
 /* canvas */
-.xeplr-factory-stage { flex: 1; min-width: 0; min-height: 0; display: flex; 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(--xeplr-plane, #f7f7f5); }
+/* 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:
@@ -175,3 +196,30 @@
 .xeplr-factory-option-error { grid-column: 1 / -1; margin-top: 0; }
 .xeplr-factory-icon-button { border: none; background: none; cursor: pointer; font-size: 16px; color: var(--xf-muted); padding: 0; }
 .xeplr-factory-add { font: inherit; font-size: 12px; background: none; border: 1px dashed var(--xf-border); border-radius: 5px; padding: 5px; width: 100%; cursor: pointer; color: var(--xf-accent); }
+
+.xeplr-factory-color { display: grid; grid-template-columns: 32px 1fr 20px; gap: 4px; align-items: center; }
+.xeplr-factory-color input[type="color"] { width: 32px; height: 28px; padding: 0; border: 1px solid var(--xf-border); border-radius: 5px; background: none; cursor: pointer; }
+.xeplr-factory-checklist { display: flex; flex-direction: column; gap: 5px; }
+.xeplr-factory-checklist .xeplr-factory-toggle { font-weight: 500; }
+
+/* ── popup ──────────────────────────────────────────────────────────────── */
+.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);
+}
+.xeplr-factory-modal {
+  max-width: 96vw; background: var(--xeplr-surface, #fff); color: var(--xeplr-text, #1a1a19);
+  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-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-body { padding: 8px 24px 16px; }
+
+/* ── 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-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; }

package/src/designs/index.js

@@ -2,6 +2,8 @@ import './factory.css'
 
 export { default as BuilderSample } from './BuilderSample.jsx'
 export { default as ScreenSample } from './ScreenSample.jsx'
+export { default as ListView } from './ListView.jsx'
+export { default as ScreenModal } from './ScreenModal.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'