@xeplr/cli 0.3.3 → 0.3.5

package/templates/api/package.json

@@ -17,15 +17,18 @@
     "start-api": "node ./bin/www"
   },
   "dependencies": {
-    "@xeplr/auth": "^1.1.4",
+    "@xeplr/auth": "^1.3.0",
     "@xeplr/base-apis": "^2.0.0",
     "@xeplr/db": "^1.0.6",
-    "@xeplr/factory": "^1.1.0",
-    "@xeplr/ui-factory": "^1.1.0",
+    "@xeplr/factory": "^2.0.0",
+    "@xeplr/ui-factory": "^1.7.1",
     "@xeplr/utils": "^1.0.11",
     "dotenv": "^17.4.2",
     "express": "^5.2.0",
-    "multer": "^2.0.2"
+    "multer": "^2.0.2",
+    "nodemailer": "^10.0.2",
+    "@xeplr/actions": "^1.4.0",
+    "@xeplr/workflow-api": "^1.1.0"
   },
   "devDependencies": {
     "dotenv-cli": "^8.0.0",

package/templates/api/production.env.example

@@ -1,5 +1,6 @@
 # __NAME__ API — PRODUCTION settings. Copy to production.env on the server
-# and fill in; start with NODE_ENV=production (bin/www reads <NODE_ENV>.env). production.env is never committed (.gitignore).
+# and fill in; start with NODE_ENV=production (bin/www reads <NODE_ENV>.env).
+# production.env is never committed (.gitignore).
 #
 # Every value that is a secret is blank here. Generate new ones for production
 # — never reuse development's.
@@ -15,15 +16,16 @@ AUTH_PORT=__AUTH_PORT__
 ENCRYPTION_KEY=
 __PREFIX___CONNECTION=
 AUTH_DB_CONNECTION_INFO_ENCRYPTED=
-DB_API=__NAME___api
-AUTH_DB_NAME=__NAME___auth
+DB_API=__DB_API__
+AUTH_DB_NAME=__DB_AUTH__
+DB_WORKFLOW=__DB_WORKFLOW__
 
 # ── Sign-in ──
 REDIS_PREFIX=__NAME__:
 AUTH_JWT_SECRET=
 # Where THIS server reaches the sign-in service (not the public address).
 AUTH_URL=http://127.0.0.1:__AUTH_PORT__
-XEPLR_AUTH_MIGRATIONS=./node_modules/@xeplr/factory/migrations-auth,./migrations-auth
+XEPLR_AUTH_MIGRATIONS=./node_modules/@xeplr/factory/migrations-auth,./node_modules/@xeplr/workflow-api/migrations-auth,./migrations-auth
 AUTH_SUPER_ADMIN_EMAIL=
 AUTH_SUPER_ADMIN_PASSWORD=
 # none for one set of roles; a multi-tenant app names its company header, e.g. x-company-id

package/templates/api/routes/flows.js

@@ -0,0 +1,23 @@
+// FLOWS — screens one after another, run by @xeplr/workflow-api inside this
+// API (bin/www starts it; workflow.js says where its data lives).
+//
+// Mounted by routes/index.js at /api/workflow, behind this app's auth gate:
+//   /api/workflow/flows       the flows people walk through (Journey) and design
+//   /api/workflow/workflows   the workflow document API underneath
+var express = require('express');
+
+var router = express.Router();
+var workflow = null;
+
+router.use(function(req, res, next) {
+  // Only before startup has finished — bin/www mounts it before listening.
+  if (!workflow) return res.status(503).json({ message: 'Flows are still starting' });
+  return workflow(req, res, next);
+});
+
+/** bin/www hands over registerWorkflow's router, already gated. */
+router.mount = function(workflowRouter) {
+  workflow = workflowRouter;
+};
+
+module.exports = router;

package/templates/api/routes/index.js

@@ -34,4 +34,8 @@ router.get('/whoami', function(req, res) {
 //   var { genericRoute } = require('@xeplr/base-apis');
 //   router.use('/api/things', genericRoute({ key: 'thing', model: require('../models').Thing }));
 
+// Flows: @xeplr/workflow-api, at /api/workflow, running inside this API (see
+// routes/flows.js and workflow.js).
+router.use('/api/workflow', require('./flows'));
+
 module.exports = router;

package/templates/api/screens/index.js

@@ -16,8 +16,11 @@
 //   screens/<form>/<form>.entity.json       its name and fields
 //   screens/<form>/<form>-list.screen.json  the list
 //   screens/<form>/<form>-edit.screen.json  the add / edit form
-//   screens/<form>/<form>.hooks.js          server hooks — save / get / delete
 //   screens/<form>/<form>.model.js          server model — getters / setters
+//
+// Code around a form's records — checks on save, an email after — is not in
+// these folders: it is a FUNCTION in functions/, named in the screen's
+// `events` (task-edit.screen.json names tidyTaskTitle).
 
 module.exports = {
   // Publish order is worked out for you: a table before the dropdowns that
@@ -27,11 +30,6 @@ module.exports = {
     require('./task/task-list.screen.json')
   ],
 
-  // Your own code around save / get / delete, per screen — see task/task.hooks.js.
-  hooks: {
-    task_edit: require('./task/task.hooks')
-  },
-
   // How each table's values are shaped — see task/task.model.js.
   models: [
     require('./task/task.model')

package/templates/api/screens/task/task-edit.screen.json

@@ -269,5 +269,8 @@
       }
     }
   ],
-  "source": "tasks"
+  "source": "tasks",
+  "events": {
+    "beforeSave": "tidyTaskTitle"
+  }
 }

package/templates/api/screens/task/task.model.js

@@ -1,10 +1,10 @@
 // The model for task records — how values are shaped between your code and
 // the "tasks" table, like Sequelize's getters and setters.
 //
-// Register with @xeplr/factory:  factory.init({ knex, hooks, models: [require('./task.model')] })
+// Register with @xeplr/factory:  factory.init({ knex, models: [require('./task.model')] })
 //
 // Used everywhere: the screens' routes and factory.table('tasks'). Models shape
-// data; the hooks file decides behaviour.
+// data; the functions its events name decide behaviour (api/functions/).
 
 var { FactoryModel } = require('@xeplr/factory');
 

package/templates/api/workflow.js

@@ -0,0 +1,32 @@
+// FLOWS — how @xeplr/workflow-api starts, inside this API.
+//
+//   ITS OWN DATABASE   DB_WORKFLOW, beside yours rather than in it — a
+//                      sub-product embedded in an app gets a store of its own.
+//                      Created and migrated on first start, with the same
+//                      server login as the app (__PREFIX___CONNECTION).
+//   THIS APP'S         it registers no tenancy of its own: flows and runs are
+//   TENANCY            filtered by the levels this app registered (or none),
+//                      behind this app's membership gate.
+//   PERMISSIONS        every route checks the caller's ("List flows", "Start
+//                      flow run"…), granted by @xeplr/workflow-api's
+//                      migrations-auth, which XEPLR_AUTH_MIGRATIONS loads.
+//
+// A flow's "let a function decide" picks one of this app's functions
+// (functions/), the same registry the screens' events use.
+var { registerWorkflow } = require('@xeplr/workflow-api');
+
+/** Creates and migrates workflow's database, and returns its router — already gated. */
+module.exports = async function startWorkflow(memberGate) {
+  var workflow = await registerWorkflow({
+    applicationId: '__NAME__',
+    db: {
+      name: process.env.DB_WORKFLOW,
+      connection: process.env.__PREFIX___CONNECTION,
+      connectionName: 'workflow'
+    },
+    tenantTables: false,
+    access: true,
+    mtMembershipGate: memberGate
+  });
+  return workflow.router;
+};

package/templates/ui/package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "@tanstack/react-table": "^8.21.3",
-    "@xeplr/ui-account": "^1.0.9",
+    "@xeplr/ui-account": "^1.4.0",
     "@xeplr/ui-canvas": "^1.1.0",
-    "@xeplr/ui-factory": "^1.1.0",
+    "@xeplr/ui-factory": "^1.7.1",
     "@xeplr/ui-table": "^1.0.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

package/templates/ui/src/App.jsx

@@ -4,6 +4,9 @@ import { authRoutes, authPath, NavPage, ProtectedRoute, useAccess } from '@xeplr
 import Home from './pages/Home.jsx'
 import Tasks from './pages/Tasks.jsx'
 import EditTask from './pages/EditTask.jsx'
+import FlowDesigner from './pages/FlowDesigner.jsx'
+import Journey from './pages/Journey.jsx'
+import FlowsHome from './pages/FlowsHome.jsx'
 import ConfigureUI from './pages/ConfigureUI.jsx'
 import { FORM_MENU_PREFIX } from './menu.js'
 import FormDesigner from './pages/FormDesigner.jsx'
@@ -21,6 +24,15 @@ const TasksIcon = (
   </svg>
 )
 
+const FlowsIcon = (
+  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
+       strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="3" y="3" width="6" height="6" rx="1" />
+    <rect x="15" y="15" width="6" height="6" rx="1" />
+    <path d="M9 6h4a2 2 0 0 1 2 2v7" />
+  </svg>
+)
+
 const FormsIcon = (
   <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
        strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -68,6 +80,8 @@ function Shell() {
   const drawerItems = useMemo(() => [
     { key: 'Home', icon: HomeIcon, path: '/home', clickHandler: () => navigate('/home') },
     { key: 'Tasks', icon: TasksIcon, path: '/tasks', clickHandler: () => navigate('/tasks') },
+    // Always in the rail — the page says when Xeplr Workflow is not connected.
+    { key: 'Flows', icon: FlowsIcon, path: '/flows', clickHandler: () => navigate('/flows') },
 __MT_DRAWER_ITEM__
     // Every form added to the menu, with no code: "form:crop" opens /forms/crop.
     ...menus.filter((key) => key.startsWith(FORM_MENU_PREFIX)).map((key) => ({
@@ -115,6 +129,12 @@ __MT_SELECT_ROUTE__
         <Route path="/forms/:form" element={<FormRecords />} />
         <Route path="/configure" element={<ConfigureUI />} />
         <Route path="/configure/forms/:form/design/:part" element={<FormDesigner />} />
+        {/* Flows — run by @xeplr/workflow inside this app's own API. */}
+        <Route path="/flows" element={<FlowsHome />} />
+        <Route path="/configure/flows/:flow" element={<FlowDesigner />} />
+        {/* A journey: its run id joins the address once it starts, so it can be resumed. */}
+        <Route path="/journey/:flow" element={<Journey />} />
+        <Route path="/journey/:flow/:run" element={<Journey />} />
       </Route>
 
       <Route path="*" element={<Navigate to="/auth/login" replace />} />

package/templates/ui/src/api/flows.js

@@ -0,0 +1,6 @@
+// Flows are at /api/workflow/flows — @xeplr/workflow-api, running inside this
+// app's API. authFetch carries the same sign-in and company as every other call.
+import { authFetch } from '@xeplr/ui-account'
+import { createFlowsApi } from '@xeplr/ui-factory'
+
+export const flows = createFlowsApi({ fetch: authFetch, base: '/api/workflow' })

package/templates/ui/src/index.css

@@ -358,3 +358,19 @@ body { margin: 0; }
 .app-menu-shown { display: inline-flex; gap: 6px; align-items: center; }
 
 .app-menu-settings .app-table { margin-bottom: 14px; }
+
+/* ── Flows, before Workflow is connected (src/pages/Flows.jsx) ─────────────── */
+.app-connect {
+  max-width: 720px;
+  padding: 22px 24px;
+  border: 1px solid var(--xeplr-border-primary);
+  border-radius: 10px;
+  background: var(--xeplr-bg-tertiary);
+  line-height: 1.55;
+}
+.app-connect h2 { margin: 0 0 8px; font-size: 18px; }
+.app-connect p { margin: 0 0 14px; }
+.app-connect-steps { margin: 0 0 14px; padding-left: 20px; }
+.app-connect-steps li { margin-bottom: 14px; }
+.app-connect code { font-size: 12.5px; padding: 1px 5px; border-radius: 4px; background: var(--xeplr-bg-secondary); border: 1px solid var(--xeplr-border-primary); }
+.app-connect pre { margin: 6px 0 0; font-size: 12.5px; }

package/templates/ui/src/menu.js

@@ -11,6 +11,7 @@ export const FORM_MENU_PREFIX = 'form:'
 export const APP_MENU_KEYS = [
   'Home',
   'Tasks',
+  'Flows',
 __MT_MENU_KEY__
   'Admin',
   'Configure UI'

package/templates/ui/src/pages/ConfigureUI.jsx

@@ -6,6 +6,8 @@
 //          countries. Ordinary forms with a flag, gathered in one place because
 //          that is what they are: reference data, not daily work
 //   Menu   the side rail's items: rename, reorder, hide
+//   Flows  forms one after another — what is filled in decides the next; run by
+//          Xeplr Workflow, and says how to connect it until it is
 //
 // Configuration lives here, not in the side rail — the rail is for the pages
 // people use.
@@ -13,10 +15,12 @@ import { useSearchParams } from 'react-router-dom'
 import Forms from './Forms.jsx'
 import Masters from './Masters.jsx'
 import MenuSettings from './MenuSettings.jsx'
+import Flows from './Flows.jsx'
 
 const TABS = [
   { id: 'forms', label: 'Forms', Page: Forms },
   { id: 'masters', label: 'Masters', Page: Masters },
+  { id: 'flows', label: 'Flows', Page: Flows },
   { id: 'menu', label: 'Menu', Page: MenuSettings }
 ]
 

package/templates/ui/src/pages/EditTask.jsx

@@ -18,8 +18,8 @@ import { factory } from '../api/factory.js'
 //
 // ctx.screen says which screen is calling ("task_list" or "task_edit").
 // Keep them as methods (save(values, ctx) { … }) — super does not work in
-// arrow functions. Rules that must hold belong in the server's hooks
-// (api/screens/task/task.hooks.js).
+// arrow functions. Rules that must hold belong in a server function
+// (api/functions/), named in the screen's events.
 export class TaskHooks extends FactoryHooks {
   /** A list's rows (ctx.many), or the record Edit opens (ctx.id). */
   get(ctx) {
@@ -82,7 +82,7 @@ export default function EditTask({ record }) {
     factory.loadScreen('task_edit').then(setScreen, (e) => setError(e.message))
   }, [])
 
-  // The record as it is NOW, through the server's get hooks — not a copy the
+  // The record as it is NOW, through the server's events — not a copy the
   // list happened to have.
   useEffect(() => {
     if (record || !id || id === 'new') return

package/templates/ui/src/pages/FlowDesigner.jsx

@@ -0,0 +1,30 @@
+// ONE FLOW, DESIGNED — /configure/flows/<key>.
+//
+// @xeplr/ui-factory's designer: the flow's screens down the left; for the one
+// picked, its Form design (the screen's own builder) and its Events &
+// navigation — this app's functions (api/functions/) picked by name for each
+// event, and where the journey goes once the screen is saved. The selected
+// step and tab live in the address (?flowSelected=…&flowTab=…), so a reload or
+// a shared link opens the same place.
+//
+// Everything it needs comes from the two API clients — the wiring lives in
+// the package, so an upgrade reaches this app.
+import { useNavigate, useParams } from 'react-router-dom'
+import { FlowDesignerPage } from '@xeplr/ui-factory'
+import { factory } from '../api/factory.js'
+import { flows } from '../api/flows.js'
+
+export default function FlowDesigner() {
+  const { flow } = useParams()
+  const navigate = useNavigate()
+  return (
+    <div className="app-designer">
+      <div className="app-designer-bar">
+        <button type="button" className="app-btn app-btn-quiet" onClick={() => navigate('/configure?tab=flows')}>← Flows</button>
+      </div>
+      <div className="app-designer-canvas">
+        <FlowDesignerPage factory={factory} flows={flows} flowKey={flow} urlKey="flow" />
+      </div>
+    </div>
+  )
+}

package/templates/ui/src/pages/Flows.jsx

@@ -0,0 +1,106 @@
+// CONFIGURE UI → FLOWS — every journey across the app's forms.
+//
+// A flow is what someone is walked through: screens one after another. For
+// each screen it says what runs around its records (its events — this app's
+// functions, picked by name) and where the journey goes once it is saved: a
+// screen, a function that decides, or the end. @xeplr/workflow-api runs it,
+// inside this app's API, so a journey can be left and picked up later.
+//
+// A flow is addressed by a key made from its name — /configure/flows/<key> to
+// design it, /journey/<key> to walk it.
+import { useEffect, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { flowKey } from '@xeplr/ui-factory'
+import { flows } from '../api/flows.js'
+
+export default function Flows() {
+  const [list, setList] = useState(null)
+  const [error, setError] = useState(null)
+  const [offline, setOffline] = useState(null)   // API_NOT_RESTARTED
+  const [name, setName] = useState('')
+  const navigate = useNavigate()
+
+  const load = () => flows.listFlows().then(setList, (e) => {
+    const off = flowsOffline(e)
+    if (off) setOffline(off)
+    else setError(e.message)
+  })
+  useEffect(() => { load() }, [])
+
+  const create = async (e) => {
+    e.preventDefault()
+    const label = name.trim()
+    if (!label) return
+    try {
+      // No steps yet: the designer is where those come from, and it opens on
+      // the flow this creates. `key` is what every link to it uses from here on.
+      const made = await flows.createFlow({ key: flowKey(label), name: label })
+      navigate(`/configure/flows/${made.key}`)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  if (offline) return <NotConnected offline={offline} />
+
+  return (
+    <div className="app-forms">
+      <p className="app-page-lead">
+        A flow is your forms, one after another. For each one, pick what runs around its records and
+        where the journey goes next — a screen, one of the app’s functions, or the end.
+      </p>
+      {error && <div className="app-error">{error}</div>}
+
+      <form className="app-forms-new" onSubmit={create}>
+        <label className="app-forms-field">
+          <span>Name</span>
+          <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Employee registration" />
+        </label>
+        <button type="submit" className="app-btn" disabled={!name.trim()}>New flow</button>
+      </form>
+
+      {list && list.length === 0 && <p className="app-sub">No flows yet.</p>}
+      {list && list.length > 0 && (
+        <table className="app-table">
+          <thead><tr><th>Flow</th><th>Key</th><th>Status</th><th>Screens</th><th /></tr></thead>
+          <tbody>
+            {list.map((f) => (
+              <tr key={f.key}>
+                <td><strong>{f.name}</strong></td>
+                <td className="app-sub">{f.key}</td>
+                <td>{f.status}</td>
+                <td>{typeof f.steps === 'number' ? f.steps : (f.steps || []).length}</td>
+                <td className="app-row-actions">
+                  <Link to={`/configure/flows/${f.key}`}>Design</Link>
+                  {f.status === 'published' && <Link to={`/journey/${f.key}`}>Open</Link>}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Why flows cannot run right now, or null when the error is something else.
+ * Workflow runs inside this app's API, so there is one such case: an API
+ * started before flows existed (404 on /api/workflow) — restart it.
+ */
+export function flowsOffline(err) {
+  if (err && err.status === 404) return { code: 'API_NOT_RESTARTED', message: 'This app\'s API does not have the flows route yet.' }
+  return null
+}
+
+/** Flows before the API has been restarted with them. */
+export function NotConnected({ offline }) {
+  return (
+    <div className="app-forms">
+      <div className="app-connect">
+        <h2>Restart the API to use flows</h2>
+        <p>{offline.message} It was started before flows were added — restart it, then reload this page.</p>
+      </div>
+    </div>
+  )
+}

package/templates/ui/src/pages/FlowsHome.jsx

@@ -0,0 +1,65 @@
+// FLOWS — the side-rail page: the journeys people can start, one click each.
+//
+// Always in the rail. Flows are run by @xeplr/workflow inside this app's own
+// API, so they are simply there. Designing them is Configure UI → Flows.
+import { useEffect, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAccess } from '@xeplr/ui-account'
+import { flows } from '../api/flows.js'
+import { NotConnected, flowsOffline } from './Flows.jsx'
+
+export default function FlowsHome() {
+  const [list, setList] = useState(null)
+  const [error, setError] = useState(null)
+  const [offline, setOffline] = useState(null)
+  const navigate = useNavigate()
+  const { access } = useAccess()
+  // Whoever may open Configure UI may design flows and connect Workflow.
+  const admin = ((access && access.menus) || []).includes('Configure UI')
+
+  useEffect(() => {
+    flows.listFlows().then(setList, (e) => {
+      const off = flowsOffline(e)
+      if (off) setOffline(off)
+      else setError(e.message)
+    })
+  }, [])
+
+  const published = (list || []).filter((f) => f.status === 'published')
+
+  return (
+    <div className="app-page">
+      <h1>Flows</h1>
+      <p className="app-page-lead">
+        Forms one after another — what you fill in on one decides which comes next. A journey you
+        leave is kept, and picks up where it stopped.
+      </p>
+      {offline && <NotConnected offline={offline} />}
+      {error && <div className="app-error">{error}</div>}
+      {list && published.length === 0 && (
+        <p className="app-sub">
+          No flows to start yet.{admin && <> <Link to="/configure?tab=flows">Design one</Link> in Configure UI.</>}
+        </p>
+      )}
+      {published.length > 0 && (
+        <table className="app-table">
+          <thead><tr><th>Flow</th><th>Screens</th><th /></tr></thead>
+          <tbody>
+            {published.map((f) => (
+              <tr key={f.key}>
+                <td><strong>{f.name}</strong></td>
+                <td>{typeof f.steps === 'number' ? f.steps : (f.steps || []).length}</td>
+                <td className="app-row-actions">
+                  <button type="button" className="app-btn" onClick={() => navigate(`/journey/${f.key}`)}>Start</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+      {admin && list && published.length > 0 && (
+        <p className="app-sub" style={{ marginTop: 16 }}><Link to="/configure?tab=flows">Design flows</Link> in Configure UI.</p>
+      )}
+    </div>
+  )
+}

package/templates/ui/src/pages/Journey.jsx

@@ -0,0 +1,33 @@
+// A FLOW, being walked through — /journey/<key>, and /journey/<key>/<run> once
+// it has started. The run id in the address is what lets a journey be
+// reloaded, left, or handed to someone else and opened on the step it is on.
+//
+// This page holds no route through the journey: Workflow says which screen
+// comes next, from what was filled in.
+import { useNavigate, useParams } from 'react-router-dom'
+import { FlowRunner } from '@xeplr/ui-factory'
+import { flows } from '../api/flows.js'
+import { factory } from '../api/factory.js'
+
+export default function Journey() {
+  const { flow, run } = useParams()
+  const navigate = useNavigate()
+  return (
+    <div className="app-page">
+      <FlowRunner
+        {...flows.runnerProps}
+        {...factory.screenProps}
+        flowKey={flow}
+        runId={run}
+        onStep={(step) => { if (step.runId && step.runId !== run) navigate(`/journey/${flow}/${step.runId}`, { replace: true }) }}
+        renderDone={() => (
+          <div className="app-help">
+            <h2>All done</h2>
+            <p>Everything in this journey is filled in.</p>
+            <button type="button" className="app-btn" onClick={() => navigate(`/journey/${flow}`)}>Start another</button>
+          </div>
+        )}
+      />
+    </div>
+  )
+}

package/templates/ui/src/pages/TasksHelp.jsx

@@ -63,7 +63,7 @@ export default function TasksHelp() {
       <h3>Or without code</h3>
       <p>
         <strong>Configure UI → Forms → New form</strong>: label and key, design,
-        publish, add to menu — no code. The full steps for a form with its own page, hooks and
+        publish, add to menu — no code. The full steps for a form with its own page, functions and
         model are in <code>CLAUDE.md</code>, under "Create a new UI".
       </p>
 
@@ -75,7 +75,8 @@ export default function TasksHelp() {
       </p>
       <p>
         On the server — a check against other records, an email afterwards, a
-        list only managers see: <code>api/screens/task/task.hooks.js</code>.
+        list only managers see: a function in <code>api/functions/</code>, registered by the event it
+        is for and named in the screen’s events — Tasks names <code>tidyTaskTitle</code>.
       </p>
 
       <h3>Two things that catch people</h3>

package/templates/ui/vite.config.js

@@ -44,7 +44,10 @@ export default defineConfig(({ mode }) => {
     // Force every import to THIS app's copy, so hook-using libraries don't
     // load twice and break the rules of hooks in ways that read as impossible.
     resolve: { dedupe: ['react', 'react-dom', 'react-router-dom', '@xeplr/ui-canvas', '@xeplr/ui-table'] },
-    server: { port, strictPort: true, proxy },
+    // 127.0.0.1, not 'localhost': Node resolves 'localhost' to IPv6 (::1)
+    // first, so the dev server listened on ::1 alone and a browser going to
+    // 127.0.0.1 was refused.
+    server: { host: '127.0.0.1', port, strictPort: true, proxy },
     preview: { port, strictPort: true }
   }
 })

package/templates/api/screens/task/task.hooks.js

@@ -1,37 +0,0 @@
-// Server hooks for task records — screen "task_edit" (and "task_list", which edits in it).
-//
-// Register with @xeplr/factory:
-//   factory.init({ knex, hooks: { task_edit: require('./task.hooks') } })
-//
-// Each operation has four hooks. Delete the ones you do not need.
-//   before(ctx)       first — save: return new values to replace them (they are then checked
-//                     against the screen's rules); get: narrow ctx.query; any: ctx.reject(message, { field })
-//   after(ctx)        once it succeeded — ctx.id, ctx.result; return a value to replace the result.
-//                     If it throws, the operation still happened (and error is told).
-//   error(ctx, err)   when the operation failed
-//   override(ctx)     does the WHOLE operation instead — no rules, no before / after / error,
-//                     no generic query. What it returns is the response.
-//
-// ctx: op, screenKey, screen, table, id, isNew (save), many (get), input (what the UI sent, read-only),
-//      values (save), previous (save / delete: the row before), result, user, tenant, knex, query (get), reject
-
-module.exports = {
-  save: {
-    // before: async function(ctx) { return ctx.values },
-    // after: async function(ctx) {},
-    // error: async function(ctx, err) {},
-    // override: async function(ctx) { return savedRecord },
-  },
-  get: {
-    // before: async function(ctx) { /* ctx.query.where(...) */ },
-    // after: async function(ctx) { return ctx.result },
-    // error: async function(ctx, err) {},
-    // override: async function(ctx) { return ctx.id ? record : records },
-  },
-  delete: {
-    // before: async function(ctx) {},
-    // after: async function(ctx) {},
-    // error: async function(ctx, err) {},
-    // override: async function(ctx) { return { id: ctx.id } },
-  }
-}