@xeplr/ui-factory 1.8.5 → 1.8.7

package/src/designs/ControlView.jsx

@@ -3,6 +3,7 @@ import { tableColumns, LABEL_PRESETS } from '../controls.js'
 import { stepsOf } from '../document.js'
 import ListView from './ListView.jsx'
 import ButtonsView from './ButtonsView.jsx'
+import FileField from './FileField.jsx'
 import { fieldStyle, labelStyle, boxStyle } from './styles.js'
 
 // How each control LOOKS — the one renderer, used both on the builder's
@@ -14,7 +15,7 @@ import { fieldStyle, labelStyle, boxStyle } from './styles.js'
 
 const ids = (node) => `xeplr-factory-${node.id}`
 
-export default function ControlView({ node, mode = 'live', value, error, options, onChange, onBlur, disabled, list, upload, stepper, subform, rows, buttons }) {
+export default function ControlView({ node, mode = 'live', value, error, options, onChange, onBlur, disabled, list, upload, readFile, stepper, subform, rows, buttons }) {
   const View = VIEWS[node.type]
   if (!View) {
     return <div className="xeplr-factory-unknown">Unknown control “{node.type}”</div>
@@ -33,6 +34,7 @@ export default function ControlView({ node, mode = 'live', value, error, options
       disabled={design || disabled}
       list={list}
       upload={upload}
+      readFile={readFile}
       stepper={stepper}
       subform={subform}
       rows={rows}
@@ -317,51 +319,31 @@ function DatetimeView({ node, p, value, error, onChange, onBlur, disabled }) {
 }
 
 /**
- * A file field holds the stored file's PATH, not the file. Picking one uploads
- * it straight away (`upload`, supplied by the screen) and what comes back is
- * the value that is saved with the record.
+ * A file field holds the stored file's PATH, not the file — or, with
+ * `multiple`, a list of them. Picking one uploads it straight away (`upload`,
+ * supplied by the screen) and what comes back is the value saved with the
+ * record. A stored picture shows as a thumbnail when the screen can read it
+ * back (`readFile`).
  */
-function FileView({ node, p, design, value, error, onChange, onBlur, disabled, upload }) {
-  const [busy, setBusy] = useState(false)
-  const [failed, setFailed] = useState(null)
-  const accept = p.accept || ''
-  const choose = async (file) => {
-    if (!file || !upload) return
-    setFailed(null)
-    setBusy(true)
-    try {
-      const out = await upload(file, node)
-      onChange(out && out.path ? out.path : undefined)
-    } catch (e) {
-      setFailed(e && e.message ? e.message : 'The file could not be uploaded')
-    } finally {
-      setBusy(false)
-      onBlur()
-    }
-  }
+function FileView({ node, p, design, value, error, onChange, onBlur, disabled, upload, readFile }) {
+  const several = Boolean(p.multiple)
+  const files = several ? (Array.isArray(value) ? value : []) : value ? [value] : []
+  const { style, ...aria } = inputProps(node, p, error, disabled, onBlur)
   return (
-    <Field node={node} p={p} error={error || failed}>
-      {value
-        ? (
-          <div className="xeplr-factory-file">
-            <span className="xeplr-factory-file-name" title={String(value)}>{fileName(value)}</span>
-            <button type="button" className="xeplr-factory-file-clear" disabled={disabled} onClick={() => { onChange(undefined); onBlur() }}>Remove</button>
-          </div>
-        )
-        : (
-          <input
-            className="xeplr-factory-input xeplr-factory-file-input"
-            type="file"
-            accept={accept}
-            disabled={disabled || busy}
-            onChange={(e) => { const f = e.target.files && e.target.files[0]; e.target.value = ''; choose(f) }}
-            {...inputProps(node, p, error, disabled || busy, onBlur)}
-          />
-        )}
-      {busy && <div className="xeplr-factory-hint">Uploading…</div>}
-      {!busy && !value && (design || accept) && (
-        <div className="xeplr-factory-hint">{accept || 'any file'}{p.maxSize ? ` · up to ${p.maxSize} MB` : ''}</div>
-      )}
+    <Field node={node} p={p} error={error}>
+      <FileField
+        id={aria.id}
+        rules={p}
+        files={files}
+        onChange={(paths) => onChange(several ? paths : paths[0])}
+        onBlur={onBlur}
+        upload={upload ? (file) => upload(file, node) : undefined}
+        readFile={readFile}
+        disabled={disabled}
+        design={design}
+        inputProps={aria}
+        style={style}
+      />
     </Field>
   )
 }

package/src/designs/FedList.jsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { XeplrTable } from '@xeplr/ui-table'
 import { boxStyle, fieldStyle } from './styles.js'
+import { DATE_PRESETS, customRange, isDay } from '../listRange.js'
 
 // A LIST WHOSE ROWS A FUNCTION WORKS OUT (rowsFrom) — live, in @xeplr/ui-table.
 //
@@ -11,9 +12,10 @@ import { boxStyle, fieldStyle } from './styles.js'
 // renderer. What this file draws is only how: a second line, badges, the
 // pictures, an activity line with its hover box.
 //
-// Above the rows: the search box and the filter chips, each chip with the
-// count the function gave it. Presentation only — the query, the rows and
-// what a click does arrive as props.
+// Above the rows: a date range and KPI cards (a dashboard), then the search
+// box and the filter chips, each card and chip with the count the function
+// gave it. A card is a filter too: a click shows its rows, another lets go.
+// Presentation only — the query, the rows and what a click does arrive as props.
 
 const OPEN_DELAY_MS = 250
 const CLOSE_DELAY_MS = 200
@@ -66,8 +68,37 @@ export default function FedList({ node, list, query, onOpen, rowDetails, recordK
     if (marker) open(rows[Number(marker.getAttribute('data-xf-row'))])
   }
 
+  const kpis = Array.isArray(p.kpis) ? p.kpis : []
+  const kpiCounts = list.kpis || {}
+  const range = query.rangeFor ? query.rangeFor(node) : null
+
   return (
     <div className="xeplr-factory-list xeplr-factory-list--fed" style={style}>
+      {(range || kpis.length > 0) && (
+        <div className="xeplr-factory-dash">
+          {range && <RangePicker label={p.dateRange.label} range={range} onChange={query.setDates} />}
+          {kpis.length > 0 && (
+            <div className="xeplr-factory-kpis" role="group" aria-label={p.title ? `${p.title} at a glance` : 'At a glance'}>
+              {kpis.map((k) => {
+                const on = query.kpi === k.key
+                const n = kpiCounts[k.key]
+                return (
+                  <button
+                    key={k.key}
+                    type="button"
+                    aria-pressed={on}
+                    className={`xeplr-factory-kpi xeplr-factory-kpi--${k.tone || 'accent'}${on ? ' is-on' : ''}`}
+                    onClick={() => query.setKpi(on ? '' : k.key)}
+                  >
+                    <span className="xeplr-factory-kpi-count">{n === undefined ? '—' : n}</span>
+                    <span className="xeplr-factory-kpi-label">{k.label}</span>
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      )}
       <div className="xeplr-factory-list-tools">
         {p.title && <span className="xeplr-factory-list-title">{p.title}</span>}
         {p.search && p.search.placeholder && (
@@ -102,7 +133,7 @@ export default function FedList({ node, list, query, onOpen, rowDetails, recordK
         {list.error && <span className="xeplr-factory-error-inline" role="alert">{list.error}</span>}
       </div>
       {rows.length === 0
-        ? !list.loading && !list.error && <div className="xeplr-factory-list-empty">{query.q ? 'Nothing matches that search.' : 'Nothing here yet.'}</div>
+        ? !list.loading && !list.error && <div className="xeplr-factory-list-empty">{query.q || query.kpi || (range && range.from) ? 'Nothing matches.' : 'Nothing here yet.'}</div>
         : (
           <div className={'xeplr-factory-fed-table' + (open ? ' is-openable' : '')} onClick={openFromRow}>
             <XeplrTable
@@ -121,6 +152,41 @@ export default function FedList({ node, list, query, onOpen, rowDetails, recordK
   )
 }
 
+/** From–To: a preset, or two days typed. Whatever is chosen is kept as one value. */
+function RangePicker({ label, range, onChange }) {
+  const custom = !range.preset
+  const [from, setFrom] = useState(range.from)
+  const [to, setTo] = useState(range.to)
+  useEffect(() => { setFrom(range.from); setTo(range.to) }, [range.from, range.to])
+  const typed = (f, t) => {
+    setFrom(f); setTo(t)
+    if ((f === '' || isDay(f)) && (t === '' || isDay(t)) && !(f && t && f > t)) onChange(customRange(f, t))
+  }
+  return (
+    <div className="xeplr-factory-range" role="group" aria-label={label ? `${label} between` : 'Dates'}>
+      {label && <span className="xeplr-factory-range-label">{label}</span>}
+      <select
+        className="xeplr-factory-range-preset"
+        aria-label={label ? `${label}: range` : 'Range'}
+        value={custom ? 'custom' : range.preset}
+        onChange={(e) => onChange(e.target.value === 'custom' ? customRange(range.from, range.to) : e.target.value)}
+      >
+        {DATE_PRESETS.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+        <option value="custom">Between…</option>
+      </select>
+      {(custom || range.from || range.to) && (
+        <span className="xeplr-factory-range-days">
+          <input type="date" className="xeplr-factory-range-day" aria-label="From" value={from} max={to || undefined}
+                 onChange={(e) => typed(e.target.value, to)} />
+          <span aria-hidden="true">–</span>
+          <input type="date" className="xeplr-factory-range-day" aria-label="To" value={to} min={from || undefined}
+                 onChange={(e) => typed(from, e.target.value)} />
+        </span>
+      )}
+    </div>
+  )
+}
+
 /** One cell: the server's text, and how this column draws it. */
 function Cell({ column: c, row, index, first, open, details, onOpenAt }) {
   const value = row[c.field]

package/src/designs/FileField.jsx

@@ -0,0 +1,99 @@
+import { useState } from 'react'
+import { filePicker, isImageFile } from '../controls.js'
+import { fileLabel } from '../values.js'
+import { useFilePreview } from '../useFilePreview.js'
+
+// THE FILES A FIELD HOLDS, AND THE PICKER THAT ADDS ONE — a file field's, and
+// a button's `ask.file`. Presentation only: what an upload is, and how a
+// stored picture is read back, are handed in.
+//
+// On a phone the picker is the phone's own: "Files, gallery or camera" opens
+// its menu (Photos, Camera, Files), "Camera only" opens the camera.
+
+/**
+ * @param rules     { accept, maxSize, multiple, maxFiles, source }
+ * @param files     the stored paths, as a list
+ * @param onChange  (paths) → void
+ * @param upload    async (File) → { path }
+ * @param readFile  async (path) → Blob — a picture's preview; names only without it
+ */
+export default function FileField({ id, rules, files, onChange, onBlur, upload, readFile, disabled, design, inputProps, style }) {
+  const [busy, setBusy] = useState(false)
+  const [failed, setFailed] = useState(null)
+  const r = rules || {}
+  const picker = filePicker(r)
+  const several = Boolean(r.multiple)
+  const list = Array.isArray(files) ? files : []
+  const full = several ? Boolean(r.maxFiles) && list.length >= r.maxFiles : list.length >= 1
+
+  // One at a time, in the order chosen: each answer is added as it lands, so a
+  // refusal of the third keeps the first two.
+  const choose = async (chosen) => {
+    if (!chosen.length || !upload) return
+    setFailed(null)
+    setBusy(true)
+    let next = list
+    try {
+      const room = several ? (r.maxFiles ? Math.max(r.maxFiles - list.length, 0) : chosen.length) : 1
+      if (chosen.length > room) setFailed(`At most ${r.maxFiles} files — the first ${room} were added`)
+      for (const file of chosen.slice(0, room)) {
+        const out = await upload(file)
+        if (out && out.path) { next = several ? [...next, out.path] : [out.path]; onChange(next) }
+      }
+    } catch (e) {
+      setFailed(e && e.message ? e.message : 'The file could not be uploaded')
+    } finally {
+      setBusy(false)
+      if (onBlur) onBlur()
+    }
+  }
+
+  const remove = (path) => { onChange(list.filter((p) => p !== path)); if (onBlur) onBlur() }
+  const hint = [r.accept || 'any file', r.maxSize ? `up to ${r.maxSize} MB` : null, several && r.maxFiles ? `at most ${r.maxFiles} files` : null].filter(Boolean).join(' · ')
+
+  return (
+    <div className="xeplr-factory-files">
+      {list.length > 0 && (
+        <ul className="xeplr-factory-files-list">
+          {list.map((path) => (
+            <FileItem key={path} path={path} readFile={readFile} disabled={disabled || busy} onRemove={() => remove(path)} />
+          ))}
+        </ul>
+      )}
+      {!full && (
+        <label className={`xeplr-factory-files-add${disabled || busy ? ' xeplr-factory-files-add--off' : ''}`} style={style}>
+          <input
+            className="xeplr-factory-files-input"
+            type="file"
+            accept={picker.accept || undefined}
+            multiple={picker.multiple || undefined}
+            capture={picker.capture}
+            disabled={disabled || busy}
+            onChange={(e) => { const chosen = Array.from(e.target.files || []); e.target.value = ''; choose(chosen) }}
+            {...(inputProps || {})}
+            id={id}
+          />
+          <span className="xeplr-factory-files-add-label">
+            {busy ? 'Uploading…' : r.source === 'camera' ? (list.length ? 'Take another photo' : 'Take a photo') : list.length ? 'Add another' : several ? 'Choose files' : 'Choose a file'}
+          </span>
+        </label>
+      )}
+      {failed && <div className="xeplr-factory-files-error" role="alert">{failed}</div>}
+      {!busy && !list.length && (design || r.accept) && <div className="xeplr-factory-hint">{hint}</div>}
+    </div>
+  )
+}
+
+function FileItem({ path, readFile, disabled, onRemove }) {
+  const preview = useFilePreview(path, readFile)
+  const picture = isImageFile(path)
+  return (
+    <li className="xeplr-factory-files-item">
+      {picture && preview.url
+        ? <img className="xeplr-factory-files-thumb" src={preview.url} alt="" />
+        : <span className="xeplr-factory-files-icon" aria-hidden="true">{picture ? '🖼' : '📄'}</span>}
+      <span className="xeplr-factory-files-name" title={fileLabel(path)}>{fileLabel(path)}</span>
+      <button type="button" className="xeplr-factory-files-remove" disabled={disabled} onClick={onRemove} aria-label={`Remove ${fileLabel(path)}`}>Remove</button>
+    </li>
+  )
+}

package/src/designs/PropertyPanel.jsx

@@ -3,8 +3,8 @@ import { getAtPath } from '../propertyPath.js'
 import { FIELD_PRESETS, presetFor } from '../presets.js'
 import { slugify, inputNodes, paramsText, screenParams } from '../document.js'
 import { isBinding, previousBinding } from '../values.js'
-import { FONT_FAMILIES, STYLE_KEYS, SCREEN_STYLE_KEYS, LIST_ACTIONS, FILE_KINDS } from '../controls.js'
-import { BUTTON_VARIANTS, COLUMN_DISPLAYS, BADGE_TONES, CONDITION_OPERATORS, NOTE_INPUT, optionValues } from '../buttons.js'
+import { FONT_FAMILIES, STYLE_KEYS, SCREEN_STYLE_KEYS, LIST_ACTIONS, FILE_KINDS, FILE_SOURCES, MAX_FILES } from '../controls.js'
+import { BUTTON_VARIANTS, COLUMN_DISPLAYS, BADGE_TONES, CONDITION_OPERATORS, NOTE_INPUT, FILES_INPUT, optionValues } from '../buttons.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
@@ -644,6 +644,26 @@ function ToggleEditor({ id, field, value, onChange }) {
   )
 }
 
+/** A list's date range: none, or where it starts and what the dates are. */
+function DateRangeEditor({ id, field, value, onChange }) {
+  const r = value && typeof value === 'object' ? value : null
+  return (
+    <div className="xeplr-factory-prop-stack">
+      <select id={id} className="xeplr-factory-prop-input" value={r ? (r.default || 'all') : ''} onChange={(e) => {
+        const v = e.target.value
+        onChange(v === '' ? undefined : { ...(r || {}), default: v })
+      }}>
+        <option value="">— none —</option>
+        {(field.presets || []).map((o) => <option key={o.value} value={o.value}>Starts at: {o.label}</option>)}
+      </select>
+      {r && (
+        <input className="xeplr-factory-prop-input" type="text" value={r.label || ''} placeholder='What the dates are, e.g. "Placed"'
+               onChange={(e) => { const next = { ...r, label: e.target.value }; if (!next.label) delete next.label; onChange(next) }} />
+      )}
+    </div>
+  )
+}
+
 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.')
@@ -941,6 +961,7 @@ function ButtonsEditor({ value, onChange, functions }) {
         const fn = pick.find((f) => f.name === b.action) || null
         const schema = (fn && fn.inputSchema) || []
         const takesNote = schema.some((f) => f.name === NOTE_INPUT)
+        const takesFiles = schema.some((f) => f.name === FILES_INPUT)
         return (
           <fieldset key={i} className="xeplr-factory-rows-editor-card">
             <legend>{b.label || `Button ${i + 1}`}</legend>
@@ -961,7 +982,7 @@ function ButtonsEditor({ value, onChange, functions }) {
               </select>
             </MiniField>
             {fn && fn.description && <div className="xeplr-factory-prop-help">{fn.description}</div>}
-            {schema.filter((f) => f.name !== NOTE_INPUT).map((f) => (
+            {schema.filter((f) => f.name !== NOTE_INPUT && f.name !== FILES_INPUT).map((f) => (
               <MiniField key={f.name} label={(f.label || f.name) + (f.required && f.default === undefined ? ' *' : '')} help={f.description}>
                 <ParamInput field={f} value={b.params ? b.params[f.name] : undefined} onChange={(v) => {
                   const params = { ...(b.params || {}) }
@@ -981,6 +1002,14 @@ function ButtonsEditor({ value, onChange, functions }) {
                 {takesNote
                   ? <MiniField label="Note box label" help="Blank → no note box"><input className="xeplr-factory-prop-input" value={b.ask.note || ''} placeholder="Reason (optional)" onChange={(e) => edit(i, { ask: clean({ ...b.ask, note: e.target.value }) })} /></MiniField>
                   : fn && <div className="xeplr-factory-prop-help">{fn.name} takes no note.</div>}
+                <AskFieldsEditor
+                  value={b.ask.fields}
+                  inputs={schema.filter((f) => f.name !== NOTE_INPUT && f.name !== FILES_INPUT && !(b.params && Object.prototype.hasOwnProperty.call(b.params, f.name)))}
+                  onChange={(fields) => edit(i, { ask: clean({ ...b.ask, fields }) })}
+                />
+                {takesFiles
+                  ? <AskFileEditor value={b.ask.file} onChange={(file) => edit(i, { ask: clean({ ...b.ask, file }) })} />
+                  : b.ask.file && <div className="xeplr-factory-prop-help">{fn ? fn.name : 'This function'} takes no files — the picker will be refused when publishing.</div>}
               </>
             )}
             <ConditionsEditor label="Shows when" value={b.when} onChange={(v) => edit(i, { when: v })} />
@@ -1001,6 +1030,100 @@ function ButtonsEditor({ value, onChange, functions }) {
 
 const VARIANT_LABELS = { default: 'Ordinary', primary: 'Main', danger: 'Undo / remove' }
 
+/**
+ * The values a button's press asks for (`ask.fields`) — a parcel's size before
+ * Packed. Each is one of the function's inputs the screen does not give.
+ */
+function AskFieldsEditor({ value, inputs, onChange }) {
+  const fields = Array.isArray(value) ? value : []
+  const set = (next) => onChange(next.length ? next : undefined)
+  const edit = (j, patch) => set(fields.map((f, k) => {
+    if (k !== j) return f
+    const next = { ...f, ...patch }
+    Object.keys(next).forEach((key) => { if (next[key] === undefined || next[key] === '' || next[key] === false) delete next[key] })
+    return next
+  }))
+  const free = inputs.filter((f) => !fields.some((a) => a.name === f.name))
+  const typeOf = (f) => (f && f.type === 'number' ? 'number' : 'text')
+  if (!inputs.length && !fields.length) return null
+  return (
+    <div className="xeplr-factory-rows-editor">
+      <div className="xeplr-factory-prop-label">Asks for</div>
+      {fields.map((f, j) => (
+        <fieldset key={f.name || j} className="xeplr-factory-rows-editor-card">
+          <legend>{f.label || f.name}</legend>
+          <RowTools i={j} count={fields.length} onMove={(to) => set(move(fields, j, to))} onRemove={() => set(fields.filter((_, k) => k !== j))} />
+          <MiniField label="Input"><input className="xeplr-factory-prop-input" value={f.name} readOnly /></MiniField>
+          <MiniField label="Label"><input className="xeplr-factory-prop-input" value={f.label || ''} onChange={(e) => edit(j, { label: e.target.value })} /></MiniField>
+          <MiniField label="Unit" help='e.g. "in", "kg"'><input className="xeplr-factory-prop-input" value={f.unit || ''} maxLength={12} onChange={(e) => edit(j, { unit: e.target.value })} /></MiniField>
+          {f.type === 'number' && (
+            <MiniField label="At least"><input className="xeplr-factory-prop-input" type="number" value={f.min ?? ''} onChange={(e) => edit(j, { min: e.target.value === '' ? undefined : Number(e.target.value) })} /></MiniField>
+          )}
+          <MiniField label="Starts from" help="A field of the record — asked again, it shows the last value"><input className="xeplr-factory-prop-input" value={f.fill || ''} onChange={(e) => edit(j, { fill: e.target.value })} /></MiniField>
+          <label className="xeplr-factory-toggle">
+            <input type="checkbox" checked={Boolean(f.required)} onChange={(e) => edit(j, { required: e.target.checked })} />
+            <span>Required</span>
+          </label>
+        </fieldset>
+      ))}
+      {free.length > 0 && (
+        <select className="xeplr-factory-prop-input" value="" aria-label="Ask for another input" onChange={(e) => {
+          const f = free.find((x) => x.name === e.target.value)
+          if (f) set([...fields, { name: f.name, label: f.label || f.name, type: typeOf(f) }])
+        }}>
+          <option value="">+ Ask for…</option>
+          {free.map((f) => <option key={f.name} value={f.name}>{f.label || f.name}</option>)}
+        </select>
+      )}
+    </div>
+  )
+}
+
+/**
+ * The file a button's press takes (`ask.file`): a file field's rules, set the
+ * same way. Offered only when the function takes "files".
+ */
+function AskFileEditor({ value, onChange }) {
+  const f = value && typeof value === 'object' ? value : null
+  const set = (patch) => {
+    const next = { ...f, ...patch }
+    Object.keys(next).forEach((k) => { if (next[k] === undefined || next[k] === '' || next[k] === false) delete next[k] })
+    if (!next.multiple) delete next.maxFiles
+    onChange(next)
+  }
+  return (
+    <>
+      <label className="xeplr-factory-toggle">
+        <input type="checkbox" checked={Boolean(f)} onChange={(e) => onChange(e.target.checked ? { label: 'Photo', accept: FILE_KINDS.image.accept } : undefined)} />
+        <span>Asks for a file</span>
+      </label>
+      {f && (
+        <>
+          <MiniField label="File box label"><input className="xeplr-factory-prop-input" value={f.label || ''} onChange={(e) => set({ label: e.target.value })} /></MiniField>
+          <MiniField label="Allowed types"><AcceptEditor value={f.accept} onChange={(accept) => set({ accept })} /></MiniField>
+          <MiniField label="Take from">
+            <select className="xeplr-factory-prop-input" value={f.source || 'any'} onChange={(e) => set({ source: e.target.value === 'any' ? undefined : e.target.value })}>
+              {FILE_SOURCES.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+            </select>
+          </MiniField>
+          <MiniField label="Largest size (MB)"><input className="xeplr-factory-prop-input" type="number" min={1} max={200} value={f.maxSize ?? ''} onChange={(e) => set({ maxSize: e.target.value === '' ? undefined : Number(e.target.value) })} /></MiniField>
+          <label className="xeplr-factory-toggle">
+            <input type="checkbox" checked={Boolean(f.multiple)} onChange={(e) => set({ multiple: e.target.checked })} />
+            <span>Several files</span>
+          </label>
+          {f.multiple && (
+            <MiniField label="At most (files)"><input className="xeplr-factory-prop-input" type="number" min={1} max={MAX_FILES} value={f.maxFiles ?? ''} onChange={(e) => set({ maxFiles: e.target.value === '' ? undefined : Number(e.target.value) })} /></MiniField>
+          )}
+          <label className="xeplr-factory-toggle">
+            <input type="checkbox" checked={Boolean(f.required)} onChange={(e) => set({ required: e.target.checked })} />
+            <span>Required</span>
+          </label>
+        </>
+      )}
+    </>
+  )
+}
+
 /** One parameter's value: a dropdown when the function names the values allowed. */
 function ParamInput({ field, value, onChange }) {
   const allowed = optionValues(field.options)
@@ -1119,6 +1242,7 @@ export const EDITORS = {
   toggle: ToggleEditor,
   toggleValue: ToggleValueEditor,
   select: SelectEditor,
+  dateRange: DateRangeEditor,
   font: FontEditor,
   color: ColorEditor,
   table: TableEditor,

package/src/designs/ScreenSample.jsx

@@ -220,6 +220,7 @@ export default function ScreenSample({ ctrl, className, style, renderPopup, rend
               error={node.props?.name ? ctrl.errors[node.props.name] : undefined}
               options={CHOICE_TYPES.includes(node.type) ? ctrl.optionsFor(node) : undefined}
               upload={node.type === 'file' ? ctrl.upload : undefined}
+              readFile={node.type === 'file' ? ctrl.readFile : undefined}
               rows={node.type === 'table' && ctrl.rowsFor ? ctrl.rowsFor(node) : undefined}
               stepper={node.type === 'stepper' ? {
                 active: ctrl.steps.active(node.id),

package/src/designs/factory.css

@@ -157,15 +157,40 @@
 .xeplr-factory-choice { display: flex; align-items: center; gap: calc(8 * var(--xf-u)); cursor: pointer; color: var(--xf-ink); }
 .xeplr-factory-choice input { width: calc(16 * var(--xf-u)); height: calc(16 * var(--xf-u)); min-width: 11px; min-height: 11px; margin: 0; accent-color: var(--xf-accent); }
 
-/* ── file ─────────────────────────────────────────────────────────────────── */
-.xeplr-factory-file { display: flex; align-items: center; gap: calc(8 * var(--xf-u)); min-width: 0; }
-.xeplr-factory-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--xf-ink); }
-.xeplr-factory-file-clear {
+/* ── file ───────────────────────────────────────────────────────────────────
+   What the field holds — a row per file, a thumbnail for a picture — and,
+   while it has room, the picker: a box that looks like the other inputs, the
+   real <input type="file"> laid over it, invisible, so a tap opens the
+   device's own picker (on a phone: Photos, Camera, Files). */
+.xeplr-factory-files { display: flex; flex-direction: column; gap: calc(6 * var(--xf-u, 1px)); min-width: 0; min-height: 0; overflow: auto; }
+.xeplr-factory-files-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(4 * var(--xf-u, 1px)); }
+.xeplr-factory-files-item { display: flex; align-items: center; gap: calc(8 * var(--xf-u, 1px)); min-width: 0; }
+.xeplr-factory-files-thumb {
+  flex: none; width: calc(40 * var(--xf-u, 1px)); height: calc(40 * var(--xf-u, 1px)); min-width: 28px; min-height: 28px;
+  object-fit: cover; border-radius: calc(4 * var(--xf-u, 1px)); border: 1px solid var(--xf-field-border); background: var(--xf-field-bg);
+}
+.xeplr-factory-files-icon {
+  flex: none; width: calc(40 * var(--xf-u, 1px)); height: calc(40 * var(--xf-u, 1px)); min-width: 28px; min-height: 28px;
+  display: inline-flex; align-items: center; justify-content: center; border-radius: calc(4 * var(--xf-u, 1px));
+  border: 1px solid var(--xf-field-border); background: var(--xf-field-bg);
+}
+.xeplr-factory-files-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--xf-ink); }
+.xeplr-factory-files-remove {
   flex: none; border: 1px solid var(--xf-field-border); background: var(--xf-field-bg); color: var(--xf-muted);
-  border-radius: calc(6 * var(--xf-u)); padding: calc(3 * var(--xf-u)) calc(8 * var(--xf-u)); cursor: pointer; font: inherit;
+  border-radius: calc(6 * var(--xf-u, 1px)); padding: calc(3 * var(--xf-u, 1px)) calc(8 * var(--xf-u, 1px)); cursor: pointer; font: inherit;
 }
-.xeplr-factory-file-clear:hover { color: var(--xf-ink); border-color: var(--xf-accent); }
-.xeplr-factory-file-input { padding: calc(5 * var(--xf-u)); }
+.xeplr-factory-files-remove:hover { color: var(--xf-ink); border-color: var(--xf-accent); }
+.xeplr-factory-files-add {
+  position: relative; display: flex; align-items: center; justify-content: center; flex: none;
+  min-height: calc(34 * var(--xf-u, 1px)); padding: calc(5 * var(--xf-u, 1px)) calc(10 * var(--xf-u, 1px)); box-sizing: border-box;
+  border: 1px dashed var(--xf-field-border); border-radius: calc(6 * var(--xf-u, 1px)); background: var(--xf-field-bg);
+  color: var(--xf-ink); cursor: pointer;
+}
+.xeplr-factory-files-add:hover, .xeplr-factory-files-add:focus-within { border-color: var(--xf-accent); }
+.xeplr-factory-files-add--off { cursor: default; opacity: .6; }
+.xeplr-factory-files-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; margin: 0; }
+.xeplr-factory-files-add-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.xeplr-factory-files-error { color: var(--xf-danger); font-size: .9em; white-space: normal; }
 
 /* ── stepper ──────────────────────────────────────────────────────────────
    The journey across the top: a circle per step, joined by a line. The line
@@ -298,6 +323,34 @@
    Search and chips over the rows; every cell is text the server wrote. */
 .xeplr-factory-list--fed { overflow: hidden; }
 .xeplr-factory-list--fed .xeplr-table-container { border: none; border-radius: 0; background: transparent; }
+/* A dashboard over the rows: the date range, then a card per KPI — a count,
+   and a filter (pressed: its rows). */
+.xeplr-factory-dash { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-bottom: 1px solid var(--xf-border); }
+.xeplr-factory-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--xf-ink); }
+.xeplr-factory-range-label { font-weight: 600; }
+.xeplr-factory-range-days { display: inline-flex; align-items: center; gap: 6px; color: var(--xf-muted); }
+.xeplr-factory-range-preset, .xeplr-factory-range-day {
+  font: inherit; color: var(--xf-ink); background: var(--xf-field-bg); border: 1px solid var(--xf-field-border);
+  border-radius: 8px; padding: 6px 10px; min-height: 36px; box-sizing: border-box;
+}
+.xeplr-factory-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
+.xeplr-factory-kpi {
+  --xf-kpi: var(--xf-accent);
+  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer;
+  font: inherit; color: var(--xf-ink); background: var(--xf-field-bg);
+  border: 1px solid var(--xf-border); border-left: 4px solid var(--xf-kpi); border-radius: 10px; padding: 12px 14px;
+}
+.xeplr-factory-kpi:hover { background: var(--xf-hover); }
+.xeplr-factory-kpi:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-kpi) 35%, transparent); }
+.xeplr-factory-kpi.is-on { background: color-mix(in srgb, var(--xf-kpi) 12%, var(--xf-field-bg)); border-color: var(--xf-kpi); }
+.xeplr-factory-kpi--success { --xf-kpi: var(--xf-good); }
+.xeplr-factory-kpi--warning { --xf-kpi: var(--xf-warn); }
+.xeplr-factory-kpi--danger { --xf-kpi: var(--xf-danger); }
+.xeplr-factory-kpi--muted { --xf-kpi: var(--xf-muted); }
+.xeplr-factory-kpi-count { font-size: 1.9em; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
+.xeplr-factory-kpi-label { color: var(--xf-muted); font-size: .92em; }
+.xeplr-factory-kpi.is-on .xeplr-factory-kpi-label { color: var(--xf-ink); }
+
 .xeplr-factory-list-tools {
   display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px;
   border-bottom: 1px solid var(--xf-border);
@@ -392,6 +445,15 @@ button.xeplr-factory-activity-item:hover, button.xeplr-factory-activity-item:foc
   color: var(--xf-ink); background: var(--xf-field-bg); border: 1px solid var(--xf-field-border);
 }
 .xeplr-factory-ask-note { resize: vertical; min-height: 80px; }
+.xeplr-factory-ask-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 12px; }
+.xeplr-factory-ask-value { display: flex; align-items: center; gap: 6px; }
+.xeplr-factory-ask-input {
+  flex: 1 1 auto; min-width: 0; font: inherit; color: var(--xf-ink); background: var(--xf-field-bg);
+  border: 1px solid var(--xf-field-border); border-radius: 8px; padding: 7px 10px; box-sizing: border-box;
+}
+.xeplr-factory-ask-input[aria-invalid] { border-color: var(--xf-danger); }
+.xeplr-factory-ask-unit { color: var(--xf-muted); white-space: nowrap; min-width: 1.6em; }
+.xeplr-factory-ask-field-error { color: var(--xf-danger); font-size: .88em; }
 .xeplr-factory-ask-note:focus, .xeplr-factory-list-search:focus { outline: none; border-color: var(--xf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-accent) 25%, transparent); }
 .xeplr-factory-ask-error { margin: 0; color: var(--xf-danger); }
 .xeplr-factory-ask-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; }
@@ -804,7 +866,9 @@ button.xeplr-factory-activity-item:hover, button.xeplr-factory-activity-item:foc
      the smallest target a thumb hits reliably. */
   .xeplr-factory-input { --xf-min-font: 16px; font-size: max(16px, 1em); flex: none; min-height: 44px; }
   .xeplr-factory-textarea { min-height: 112px; }
-  .xeplr-factory-file-input { min-height: 0; }
+  .xeplr-factory-files { overflow: visible; }
+  .xeplr-factory-files-add { min-height: 44px; }
+  .xeplr-factory-files-thumb, .xeplr-factory-files-icon { width: 48px; height: 48px; }
   /* In the flow now: a message may push the next field down, and wraps
      rather than being cut off at the edge of a narrow screen. */
   .xeplr-factory-error { position: static; white-space: normal; }
@@ -812,7 +876,7 @@ button.xeplr-factory-activity-item:hover, button.xeplr-factory-activity-item:foc
   .xeplr-factory-check input { width: 22px; height: 22px; }
   .xeplr-factory-choice input { width: 20px; height: 20px; }
   .xeplr-factory-choices { overflow: visible; }
-  .xeplr-factory-file-clear { min-height: 40px; padding-inline: 14px; }
+  .xeplr-factory-files-remove { min-height: 40px; padding-inline: 14px; }
   .xeplr-factory-text { height: auto; overflow: visible; }
   .xeplr-factory-stepper { height: auto; }
   .xeplr-factory-list { max-height: none; }
@@ -836,11 +900,18 @@ button.xeplr-factory-activity-item:hover, button.xeplr-factory-activity-item:foc
 /* Function-fed lists and buttons on a phone: the search takes the width, chips
    scroll in a row, and every button is a thumb-sized target. */
 @media (max-width: 640px) {
-  .xeplr-factory-list-search, .xeplr-factory-ask-note { font-size: max(16px, 1em); min-height: 44px; }
+  .xeplr-factory-list-search, .xeplr-factory-ask-note, .xeplr-factory-ask-input { font-size: max(16px, 1em); min-height: 44px; }
+  .xeplr-factory-ask-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .xeplr-factory-list-search { flex-basis: 100%; max-width: none; }
   .xeplr-factory-ask-foot button { flex: 1; min-height: 44px; }
   .xeplr-factory-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
   .xeplr-factory-chip { min-height: 36px; }
+  .xeplr-factory-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .xeplr-factory-range-preset, .xeplr-factory-range-day { font-size: max(16px, 1em); min-height: 44px; }
+  .xeplr-factory-range-preset { flex: 1 1 100%; }
+  .xeplr-factory-range-days { flex: 1 1 100%; min-width: 0; }
+  /* A date box's own width is the browser's; let the row decide instead. */
+  .xeplr-factory-range-day { flex: 1 1 0; min-width: 0; width: 0; }
   .xeplr-factory-button { min-height: 44px; flex: 1 1 auto; }
   .xeplr-factory-buttons-note { flex-basis: 100%; }
   .xeplr-factory-ask .xeplr-factory-modal-body { padding: 4px 16px 8px; }