@xeplr/ui-factory 1.0.14 → 1.2.0

package/src/useFactoryScreen.js

@@ -4,14 +4,18 @@ import { inputNodes, nodesForSteps, steppers, stepsOf, stepOf, resolveStep, reac
 import { validateDocument } from './validateDocument.js'
 import { initialValues, parseInput, saveState, fieldError, optionValue, recordValues, listSource } from './values.js'
 import { hookMethod } from './hooks.js'
+import { useUrlSteps } from './useUrlPlaces.js'
 
 // A saved screen, running. No JSX — designs/ScreenSample.jsx draws it.
 //
-// ── NO SUBMIT ────────────────────────────────────────────────────────────
-// The screen saves ITSELF, in the background, a moment after the person stops
-// changing something — once what is entered is acceptable. There is no button
-// to press and no page to post. The first save of a new record creates it
-// (the host hands back its id); every save after that updates the same record.
+// ── SAVED BY A BUTTON, OVER AJAX — NEVER A FORM SUBMIT ───────────────────
+// Nothing is written while the person types. Changes are held in the form
+// ("Unsaved changes") until they press Save, which makes ONE AJAX call to the
+// host's onSave. There is no <form> post and no page reload — and no
+// background save either: a half-typed record never lands in the table. The
+// first save of a new record creates it (the host hands back its id); every
+// save after that updates the same record. Leaving with unsaved changes asks
+// first (Cancel, the popup's ×, closing the tab).
 //
 // ── THE DATABASE IS THE HOST'S ───────────────────────────────────────────
 // Everything that reads or writes data is a call the host supplies:
@@ -26,9 +30,6 @@ import { hookMethod } from './hooks.js'
 // for Edit and New. The screen comes from `screens` ({ id → document }) or the
 // host's `loadScreen(id)`. The list refreshes as the popup saves.
 
-/** Quiet time after the last change before a save goes out. */
-export const AUTOSAVE_DELAY = 700
-
 /**
  * @param document      a valid screen document
  * @param record        the record to open, e.g. { id: 7, firstName: 'Ada' } — omit for a new one
@@ -45,14 +46,16 @@ export const AUTOSAVE_DELAY = 700
  * @param fetchRecord   async ({ screen, id }) → record — Edit loads the record fresh (through the server's get hooks)
  * @param screens       { id → document } — screens a list's Edit / New can open
  * @param loadScreen    async (id) → document — for screens not in `screens`
- * @param autosaveDelay ms (default 700)
+ * @param onDirtyChange (dirty) → void — whether there are unsaved changes, as that changes
  * @param controls      the control registry (default: the built-ins)
  * @param hooks         a FactoryHooks (or an object with some of its methods) — get / save / delete / actions
+ * @param urlKey        where the open step of each stepper lives in the URL (`<urlKey>Steps`),
+ *                      so a refresh or a shared link lands on the same step. Omitted → in memory.
  */
 export function useFactoryScreen({
   document: doc, record, recordKey = 'id', onSave, fetchOptions, fetchRecords, fetchRecord, onDelete, onChange, screens, loadScreen, hooks, uploadFile, fileUrl,
-  onOpenRecord, onDone,
-  autosaveDelay = AUTOSAVE_DELAY, controls = CONTROLS
+  onOpenRecord, onDone, onDirtyChange, urlKey,
+  controls = CONTROLS
 } = {}) {
   const check = useMemo(() => validateDocument(doc, controls), [doc, controls])
   // Read at call time, so a new hooks object never re-runs loads by itself.
@@ -105,7 +108,7 @@ export function useFactoryScreen({
   const [values, setValues] = useState(() => (check.ok ? startValues(record) : {}))
   const [recordId, setRecordId] = useState(() => (record ? record[recordKey] ?? null : null))
   const [touched, setTouched] = useState(() => new Set())
-  const [status, setStatus] = useState('idle')    // idle | pending | saving | saved | incomplete | invalid | error
+  const [status, setStatus] = useState('idle')    // idle | pending (unsaved changes) | saving | saved | incomplete | invalid | error
   const [saveError, setSaveError] = useState(null)
   const [savedAt, setSavedAt] = useState(null)
   const [listVersion, setListVersion] = useState(0)
@@ -113,7 +116,17 @@ export function useFactoryScreen({
   // Shown like the form's own, and cleared as soon as that field is changed.
   const [serverErrors, setServerErrors] = useState({})
 
-  // Latest of everything a delayed save needs, read at the moment it runs.
+  // UNSAVED CHANGES: every change bumps `changes`; a save records which count
+  // it wrote. A change made while a save was on the wire stays unsaved.
+  const changes = useRef(0)
+  const savedChanges = useRef(0)
+  const [dirty, setDirtyState] = useState(false)
+  const onDirtyRef = useRef(onDirtyChange); onDirtyRef.current = onDirtyChange
+  const setDirty = useCallback((d) => {
+    setDirtyState((was) => { if (was !== d) onDirtyRef.current?.(d); return d })
+  }, [])
+
+  // Latest of everything a save needs, read at the moment it runs.
   const live = useRef({})
   live.current = { doc, values, recordId, touched, source, onSave, controls, recordKey }
 
@@ -151,7 +164,7 @@ export function useFactoryScreen({
   // A stepper shows one step at a time. Which step each is open at lives here;
   // the fields of the steps not showing are still filled in, still checked and
   // still saved — a step is what the person sees, not a separate form.
-  const [openSteps, setOpenSteps] = useState({})
+  const [openSteps, setOpenSteps] = useUrlSteps(urlKey)
   // Steps the app has switched off — { stepper id: [index, …] }. A screen may
   // have branches; which of them apply is the app's to say, from its hooks.
   const [disabledSteps, setDisabledSteps] = useState({})
@@ -159,20 +172,20 @@ export function useFactoryScreen({
   const visibleNodes = useMemo(() => (check.ok ? nodesForSteps(doc, openSteps, controls) : []), [check.ok, doc, openSteps, controls])
 
   // A screen whose steps changed under it (a field moved to another step, a
-  // step removed) must not stay open at a step that is gone.
+  // step removed) must not stay open at a step that is gone. Steppers this
+  // document does not have are left alone: a screen still loading has none,
+  // and dropping them would lose the step a link was opened at.
   useEffect(() => {
     setOpenSteps((open) => {
-      let changed = false
-      const next = {}
+      const next = { ...open }
       stepperNodes.forEach((n) => {
         const count = stepsOf(n).length
         const at = Number.isInteger(open[n.id]) ? open[n.id] : 0
         next[n.id] = Math.min(Math.max(at, 0), Math.max(count - 1, 0))
-        if (next[n.id] !== open[n.id]) changed = true
       })
-      return changed || Object.keys(next).length !== Object.keys(open).length ? next : open
+      return next
     })
-  }, [stepperNodes])
+  }, [stepperNodes, setOpenSteps])
 
   const stepControl = useMemo(() => {
     const at = (id) => (Number.isInteger(openSteps[id]) ? openSteps[id] : 0)
@@ -264,7 +277,7 @@ export function useFactoryScreen({
       })
     }
     return control
-  }, [stepperNodes, openSteps, disabledSteps, doc, controls])
+  }, [stepperNodes, openSteps, setOpenSteps, disabledSteps, doc, controls])
 
   live.current.steps = stepControl
 
@@ -300,19 +313,25 @@ export function useFactoryScreen({
     [check.ok, doc, values, touched, loadedItems, controls])
 
   // ── saving ────────────────────────────────────────────────────────────
-  const timer = useRef(null)
   const inFlight = useRef(null)     // the promise of the save running now
-  const again = useRef(false)       // a change arrived while it ran
 
+  /** Save — what the Save button does. One AJAX call; never on its own. */
   const runSave = useCallback(async () => {
-    clearTimeout(timer.current)
-    timer.current = null
-    if (inFlight.current) { again.current = true; return inFlight.current }
+    if (inFlight.current) return inFlight.current
     const l = live.current
     const st = saveState(l.doc, l.values, l.touched, l.loadedItems, l.controls)
-    if (!st.canSave) { setStatus(st.status); return { ok: false, errors: st.errors } }
+    if (!st.canSave) {
+      // Pressing Save is the moment to say what is missing — on every field,
+      // including the ones nobody has been in yet.
+      const t = new Set([...l.touched, ...Object.keys(st.errors)])
+      live.current.touched = t
+      setTouched(t)
+      setStatus('invalid')
+      return { ok: false, errors: st.errors }
+    }
     const customSave = hooksRef.current && typeof hooksRef.current.save === 'function'
-    if (!l.onSave && !customSave) { setStatus('saved'); return { ok: true } }
+    const writing = changes.current
+    if (!l.onSave && !customSave) { savedChanges.current = writing; setDirty(false); setStatus('saved'); return { ok: true } }
 
     setStatus('saving')
     setSaveError(null)
@@ -332,9 +351,12 @@ export function useFactoryScreen({
           setRecordId(saved[l.recordKey])
           live.current.recordId = saved[l.recordKey]
         }
+        savedChanges.current = writing
+        const still = changes.current !== writing
+        setDirty(still)
         setSavedAt(new Date())
         setListVersion((v) => v + 1)
-        setStatus('saved')
+        setStatus(still ? 'pending' : 'saved')
         return { ok: true, record: saved }
       } catch (err) {
         const onFields = Array.isArray(err.fields) ? err.fields.filter((f) => f && f.field && f.message) : []
@@ -349,27 +371,36 @@ export function useFactoryScreen({
         return { ok: false, error: err }
       } finally {
         inFlight.current = null
-        if (again.current) { again.current = false; schedule() }  // eslint-disable-line no-use-before-define
       }
     })()
     inFlight.current = task
     return task
-  }, [])
+  }, [setDirty])
 
-  const schedule = useCallback(() => {
-    clearTimeout(timer.current)
-    setStatus('pending')
-    timer.current = setTimeout(runSave, autosaveDelay)
-  }, [runSave, autosaveDelay])
-
-  /** Save any pending change right away — before opening another record, say. */
+  /** Save if there is anything unsaved — what a flow's Next does before moving on. */
   const flush = useCallback(async () => {
-    if (timer.current || again.current) return runSave()
-    if (inFlight.current) return inFlight.current
+    if (inFlight.current) await inFlight.current
+    if (changes.current !== savedChanges.current) return runSave()
     return { ok: true }
   }, [runSave])
 
-  useEffect(() => () => clearTimeout(timer.current), [])
+  /**
+   * May the person leave? True when nothing is unsaved, or when they agree to
+   * lose it. Cancel, the popup's × and opening another record all ask this.
+   */
+  const confirmDiscard = useCallback(() => {
+    if (changes.current === savedChanges.current) return true
+    // eslint-disable-next-line no-alert
+    return typeof window === 'undefined' || window.confirm('Discard your unsaved changes?')
+  }, [])
+
+  // Closing the tab or reloading with unsaved changes: the browser's own prompt.
+  useEffect(() => {
+    if (!dirty || typeof window === 'undefined') return undefined
+    const warn = (e) => { e.preventDefault(); e.returnValue = '' }
+    window.addEventListener('beforeunload', warn)
+    return () => window.removeEventListener('beforeunload', warn)
+  }, [dirty])
 
   // ── editing ───────────────────────────────────────────────────────────
   const onChangeRef = useRef(onChange); onChangeRef.current = onChange
@@ -395,8 +426,10 @@ export function useFactoryScreen({
       setTouched(t)
     }
     onChangeRef.current?.(next)
-    schedule()
-  }, [optionsFor, schedule])
+    changes.current += 1
+    setDirty(true)
+    setStatus('pending')
+  }, [optionsFor, setDirty])
 
   /** Leaving a field shows its message, even if nothing was typed. */
   const touch = useCallback((node) => {
@@ -407,9 +440,12 @@ export function useFactoryScreen({
     setTouched(t)
   }, [])
 
-  /** Open a record: whatever was pending is saved first. */
+  /** Open a record (null: a new one). Unsaved changes are dropped — ask confirmDiscard first. */
   const openRecord = useCallback(async (rec) => {
-    await flush()
+    if (inFlight.current) await inFlight.current
+    changes.current = 0
+    savedChanges.current = 0
+    setDirty(false)
     const next = startValues(rec)
     live.current.values = next
     live.current.recordId = rec ? rec[recordKey] ?? null : null
@@ -420,7 +456,7 @@ export function useFactoryScreen({
     setSaveError(null)
     setServerErrors({})
     setStatus('idle')
-  }, [flush, startValues, recordKey])
+  }, [startValues, recordKey, setDirty])
 
   const newRecord = useCallback(() => openRecord(null), [openRecord])
 
@@ -490,7 +526,6 @@ export function useFactoryScreen({
     })
     // Deleting the record that is open leaves nothing to save into.
     if (id !== undefined && id === live.current.recordId) {
-      clearTimeout(timer.current); timer.current = null
       await openRecord(null)
     }
     setListVersion((v) => v + 1)
@@ -576,7 +611,10 @@ export function useFactoryScreen({
     upload,
     fileUrl,
     flush,
+    save: runSave,
     saveNow: runSave,
+    dirty,
+    confirmDiscard,
     openRecord,
     newRecord,
     listFor,

package/src/useFlowBuilder.js

@@ -4,6 +4,7 @@ import {
   addTransition, setTransition, removeTransition, validateFlow, firstStep, layoutFlow, FLOW_END
 } from './flow.js'
 import { inputNodes } from './document.js'
+import { useUrlSelection } from './useUrlPlaces.js'
 
 // DESIGNING a flow: which screens, in what order, and what decides the order.
 //
@@ -23,10 +24,12 @@ export const FLOW_AUTOSAVE_DELAY = 800
  * @param onSave      async (flow) → void — called after edits, only with a flow that makes sense
  * @param onPublish   async (key) → void — shows a Publish button
  * @param onChange    (flow) → void — every edit
+ * @param urlKey      where the selected step lives in the URL (`<urlKey>Selected`), so a
+ *                    refresh or a shared link opens the same step. Omitted → in memory.
  */
-export function useFlowBuilder({ flow: given, name, screens = [], loadScreen, onSave, onPublish, onChange } = {}) {
+export function useFlowBuilder({ flow: given, name, screens = [], loadScreen, onSave, onPublish, onChange, urlKey } = {}) {
   const [flow, setFlow] = useState(() => given || createFlow({ name }))
-  const [selected, setSelected] = useState(null)          // a step key
+  const [selected, setSelected] = useUrlSelection(urlKey)  // a step key
   const [dirty, setDirty] = useState(false)
   const [saving, setSaving] = useState(false)
   const [saveError, setSaveError] = useState(null)
@@ -102,13 +105,13 @@ export function useFlowBuilder({ flow: given, name, screens = [], loadScreen, on
     })
     if (added) setSelected(added.stepKey)
     return added
-  }, [update])
+  }, [update, setSelected])
   const move = useCallback((stepKey, at) => update((f) => moveStep(f, stepKey, at)), [update])
   const change = useCallback((stepKey, patch) => update((f) => setStep(f, stepKey, patch)), [update])
   const remove = useCallback((stepKey) => {
     update((f) => removeStep(f, stepKey))
     setSelected((s) => (s === stepKey ? null : s))
-  }, [update])
+  }, [update, setSelected])
   const connect = useCallback((fromKey, target, when = null) => update((f) => addTransition(f, fromKey, target, when)), [update])
   const changeTransition = useCallback((fromKey, index, patch) => update((f) => setTransition(f, fromKey, index, patch)), [update])
   const disconnect = useCallback((fromKey, index) => update((f) => removeTransition(f, fromKey, index)), [update])

package/src/useScreenSource.js

@@ -0,0 +1,81 @@
+// THIS APP'S SCREENS, AS ANOTHER PACKAGE'S DESIGNER WANTS THEM.
+//
+// One hook, so that using @xeplr/factory's forms inside @xeplr/ui-workflow's
+// flow designer is two props rather than a page of glue in every application:
+//
+//   const { screens, screenEditor } = useScreenSource(factory, { Builder: FactoryBuilder })
+//   <WorkflowDesigner screens={screens} screenEditor={screenEditor} … />
+//
+// It answers both questions that designer asks its host — which screens exist
+// and what each one holds, and how to design one without leaving the flow —
+// and it reloads itself when a form is published from in there, so a form
+// made inside a flow is immediately choosable in it.
+//
+// WHY HERE. The alternative was the same twenty lines copied into every app
+// the CLI scaffolds: list the screens, read each document, filter the nodes
+// that hold a value, wire a builder to publish. Copied code cannot be fixed
+// once — an app generated last month keeps that copy forever, and a control
+// type added to this package never reaches any of them.
+//
+// No JSX, like every other hook here: the element is built with
+// createElement so the file stays .js.
+
+import { createElement, useCallback, useEffect, useMemo, useState } from 'react'
+import { loadScreens } from './screenSource.js'
+import { ScreenEditorSample } from './designs/ScreenEditorSample.jsx'
+
+/**
+ * @param api  a createFactoryApi() instance
+ * @param opts { Builder, labels } — the builder component to draw, normally
+ *             FactoryBuilder. Passed in rather than imported so this hook does
+ *             not pull the whole builder into a bundle that never opens it.
+ * @returns { screens, screenEditor, reload, loading, error }
+ */
+export function useScreenSource(api, opts) {
+  opts = opts || {}
+  var Builder = opts.Builder
+  var labels = opts.labels
+
+  const [screens, setScreens] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [round, setRound] = useState(0)
+
+  const reload = useCallback(() => setRound((n) => n + 1), [])
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    // The names arrive first so the menu works while the documents are still
+    // being read — see loadScreens.
+    loadScreens(api, (stubs) => { if (!cancelled) setScreens(stubs) })
+      .then((full) => { if (!cancelled) { setScreens(full); setError(null) } })
+      // A designer that still works, minus the menu: a key can be typed.
+      .catch((e) => { if (!cancelled) { setScreens([]); setError(e.message) } })
+      .then(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [api, round])
+
+  // The render prop @xeplr/ui-workflow calls inside its modal. Stable, so
+  // typing in the flow does not remount the builder.
+  const screenEditor = useCallback((props) => {
+    if (!Builder) return null
+    return createElement(ScreenEditorSample, {
+      api: api,
+      Builder: Builder,
+      screenKey: props.screenKey,
+      labels: labels,
+      onDone: function (screen) {
+        // Reload, so a form made in there joins the menu. The designer is
+        // also told directly, so the step is right before this lands.
+        reload()
+        if (props.onDone) props.onDone(screen)
+      }
+    })
+  }, [api, Builder, labels, reload])
+
+  return useMemo(
+    () => ({ screens, screenEditor, reload, loading, error }),
+    [screens, screenEditor, reload, loading, error]
+  )
+}

package/src/useUrlPlaces.js

@@ -0,0 +1,48 @@
+import { useCallback, useMemo, useRef } from 'react'
+import { useUrlState } from '@xeplr/ui-utils/src/url/useUrlState.js'
+import { factoryUrlKeys, encodeSteps, decodeSteps, replacesHistory } from './urlState.js'
+
+// The two places the factory's controllers keep, each in useState's shape so
+// a controller swaps one line. In the URL under the host's `urlKey`; without
+// one, in memory with the same rules (see urlState.js).
+
+/**
+ * [openSteps, setOpenSteps] — which step each stepper is open at,
+ * { stepper id: index }. Moving between steps is a switch, so it replaces the
+ * history entry rather than adding one.
+ */
+export function useUrlSteps(urlKey) {
+  const keys = factoryUrlKeys(urlKey)
+  const [value, setValue] = useUrlState(keys ? keys.steps : 'steps', { inUrl: Boolean(keys), replace: true })
+  const open = useMemo(() => decodeSteps(value), [value])
+  // Two moves in one event build on each other, as useState's updater would.
+  const openRef = useRef(open); openRef.current = open
+  const setOpen = useCallback((next) => {
+    const resolved = typeof next === 'function' ? next(openRef.current) : next
+    const encoded = encodeSteps(resolved)
+    if (encoded === encodeSteps(openRef.current)) return
+    openRef.current = decodeSteps(encoded)
+    setValue(encoded)
+  }, [setValue])
+  return [open, setOpen]
+}
+
+/**
+ * [selected, setSelected] — the one thing whose properties are open (a
+ * control's id, a flow step's key), or null. Opening or closing the
+ * properties adds a history entry; moving to another thing replaces it.
+ * Read back from the URL it is a string.
+ */
+export function useUrlSelection(urlKey) {
+  const keys = factoryUrlKeys(urlKey)
+  const [value, setValue] = useUrlState(keys ? keys.selected : 'selected', { inUrl: Boolean(keys) })
+  const valueRef = useRef(value); valueRef.current = value
+  const select = useCallback((next) => {
+    const resolved = typeof next === 'function' ? next(valueRef.current) : next
+    const v = resolved === undefined || resolved === '' ? null : resolved
+    if ((v === null ? null : String(v)) === valueRef.current) return
+    setValue(v, { replace: replacesHistory(valueRef.current, v) })
+    valueRef.current = v === null ? null : String(v)
+  }, [setValue])
+  return [value, select]
+}

package/src/validateDocument.js

@@ -13,6 +13,7 @@
 import { CONTROLS, LABEL_VARIANTS, LIST_ACTIONS, STYLE_KEYS, SCREEN_STYLE_KEYS, LAYOUTS, MULTI_SEPARATOR, MAX_FILE_MB, STEP_LIMIT, acceptList } from './controls.js'
 import { DOCUMENT_KIND, DOCUMENT_VERSION } from './document.js'
 import { RESERVED_COLUMNS, MAX_IDENTIFIER } from './tableSchema.js'
+import { FIELD_PRESETS, INPUT_TYPES, presetFor } from './presets.js'
 
 const FIELD_NAME = /^[A-Za-z_][A-Za-z0-9_]*$/
 const TABLE_NAME = /^[A-Za-z_][A-Za-z0-9_.$-]*$/
@@ -88,6 +89,9 @@ export function validateDocument(doc, controls = CONTROLS) {
       if (!nonEmptyString(props.label)) err(`${at}.props.label`, 'is required — the text shown above the field')
       if (props.required !== undefined && typeof props.required !== 'boolean') err(`${at}.props.required`, 'must be true or false')
       if (props.placeholder !== undefined && typeof props.placeholder !== 'string') err(`${at}.props.placeholder`, 'must be a string')
+      // Where the field came from (a ready-made field's key), or false: plain on purpose.
+      if (props.preset !== undefined && props.preset !== false && !presetFor(props.preset)) err(`${at}.props.preset`, `"${props.preset}" is not a ready-made field — one of: ${FIELD_PRESETS.map((p) => p.key).join(', ')}, or false`)
+      if (props.inputType !== undefined && !INPUT_TYPES.includes(props.inputType)) err(`${at}.props.inputType`, `must be one of: ${INPUT_TYPES.join(', ')}`)
       checkDefault(node, def, at, err)
       checkValidation(node, def, at, err)
     }
@@ -234,7 +238,7 @@ function checkValidation(node, def, at, err) {
     const val = v[key]
     if (key === 'minLength' || key === 'maxLength') {
       if (!(Number.isInteger(val) && val >= 0)) err(path, 'must be a whole number, 0 or more')
-    } else if (key === 'integer') {
+    } else if (key === 'integer' || key === 'notFuture') {
       if (typeof val !== 'boolean') err(path, 'must be true or false')
     } else if (key === 'pattern') {
       try { new RegExp(val) } catch (_) { err(path, `"${val}" is not a valid regular expression`) }

package/src/values.js

@@ -32,6 +32,13 @@ export function formSchema(doc, controls = CONTROLS) {
     const v = p.validation && { ...p.validation }
     if (v) {
       delete v.patternMessage
+      // "Not in the future" is today's date AT THE MOMENT OF CHECKING — the
+      // server builds this schema per save, so it never goes stale.
+      if (v.notFuture) {
+        const today = localDay()
+        if (!v.max || v.max > today) v.max = today
+      }
+      delete v.notFuture
       if (Object.keys(v).length) field.validation = v
     }
     return field
@@ -130,6 +137,7 @@ export function fieldError(node, value, loadedOptions) {
       const day = value.slice(0, 10)
       if (v.min && day < v.min) return `${label} must be on or after ${v.min}`
       if (v.max && day > v.max) return `${label} must be on or before ${v.max}`
+      if (v.notFuture && day > localDay()) return `${label} cannot be in the future`
       return null
     }
     case 'datetime': {
@@ -173,15 +181,20 @@ export function optionValue(options, raw) {
   return hit ? hit.id : raw
 }
 
+/** Today as YYYY-MM-DD, in the local timezone — the day a person means by "today". */
+function localDay() {
+  const d = new Date()
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
 function safeRegExp(pattern) {
   try { return new RegExp(pattern) } catch (_) { return { test: () => true } }
 }
 
-// ── autosave ─────────────────────────────────────────────────────────────
-// There is no submit. A screen saves itself a moment after a change, as long
-// as what is entered is acceptable. This decides whether it can, and which
-// messages to SHOW: a field nobody has touched is not shouted at for being
-// empty — it only holds the save back.
+// ── can it save? ─────────────────────────────────────────────────────────
+// Save (a button, one AJAX call) goes out only when what is entered is
+// acceptable. This decides whether it can, and which messages to SHOW: a field
+// nobody has touched is not shouted at for being empty until Save is pressed.
 
 /**
  * @param touched   Set of field names the person has changed or left