@xeplr/cli 0.3.0 → 0.3.2

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

@@ -9,27 +9,56 @@
 // Claude can make forms too — see "Create a new UI" in CLAUDE.md.
 import { useCallback, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { listMenuItems, addMenuItem, removeMenuItem, useAccess } from '@xeplr/ui-account'
+import { listMenuItems, addMenuItem, removeMenuItem, useAccess, getUsers } from '@xeplr/ui-account'
+import { deleteForm } from '@xeplr/ui-factory'
+// THE APP'S OWN DIALOGS. window.confirm cannot say which button is the
+// dangerous one and looks like a different piece of software appearing over
+// this one; a red box pinned to the page stays there until something else
+// replaces it, long after it has been read.
+import { raiseConfirm, raiseSnackbar } from '@xeplr/ui-utils'
 import { factory } from '../api/factory.js'
 import { FORM_MENU_PREFIX } from '../menu.js'
 
-/** listScreens rows → one entry per form: { key, name, source, list, edit }. */
+/**
+ * listScreens rows → one entry per form.
+ *
+ * `description` and `createdBy` travel with it because of the thing that
+ * happens once more than a handful of people can make forms: three of them
+ * are called "Inspection", and the fields say what each HOLDS, never what it
+ * was for or whose it is. Deciding which to keep is otherwise guesswork.
+ */
 function groupForms(rows) {
   const byKey = new Map()
   rows.forEach((row) => {
     const m = /^(.*)_(list|edit)$/.exec(row.screenKey)
     const key = m ? m[1] : row.screenKey
-    const entry = byKey.get(key) || { key, name: null, source: null, list: null, edit: null }
+    const entry = byKey.get(key) || {
+      key, name: null, source: null, list: null, edit: null,
+      description: null, createdBy: null, createdDate: null
+    }
     if (m) entry[m[2]] = row
     else entry.edit = row
     if (m && m[2] === 'list') entry.name = row.name
     entry.name = entry.name || row.name
     entry.source = entry.source || row.source
+    entry.description = entry.description || row.description
+    // The form's own half is the one that speaks for it; a list screen is
+    // only consulted when there is no other answer.
+    if (m && m[2] === 'edit') { entry.createdBy = row.createdBy; entry.createdDate = row.createdDate }
+    entry.createdBy = entry.createdBy || row.createdBy
+    entry.createdDate = entry.createdDate || row.createdDate
     byKey.set(key, entry)
   })
   return [...byKey.values()].sort((a, b) => String(a.name).localeCompare(String(b.name)))
 }
 
+/** "3 Feb 2026" — enough to tell two forms apart, no more. */
+function madeOn(when) {
+  if (!when) return null
+  const d = new Date(when)
+  return isNaN(d) ? null : d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })
+}
+
 function state(screen) {
   if (!screen) return { label: '—', unpublished: false }
   if (screen.version === null) return { label: 'Not published yet', unpublished: true }
@@ -50,16 +79,19 @@ export default function Forms() {
   const navigate = useNavigate()
   const { refreshAccess } = useAccess()
   const [forms, setForms] = useState(null)
+  // WHO MADE EACH ONE. The screens table keeps the maker's id; the names live
+  // in the sign-in service, so they are fetched once here and matched up.
+  // Failing to get them is not an error worth showing — the date alone still
+  // tells two forms of the same name apart.
+  const [people, setPeople] = useState({})
   const [inMenu, setInMenu] = useState(new Set())
-  const [error, setError] = useState(null)
-  const [notice, setNotice] = useState(null)
   const [label, setLabel] = useState('')
   const [key, setKey] = useState('')
   const [keyEdited, setKeyEdited] = useState(false)
   const [busy, setBusy] = useState(null)
 
   const load = useCallback(() => {
-    factory.listScreens().then((rows) => { setForms(groupForms(rows)); setError(null) }, (e) => setError(e.message))
+    factory.listScreens().then((rows) => setForms(groupForms(rows)), (e) => raiseSnackbar(e.message, { design: 'error' }))
     listMenuItems().then(
       (items) => setInMenu(new Set(items.filter((m) => m.name.startsWith(FORM_MENU_PREFIX) && !m.isHidden).map((m) => m.name.slice(FORM_MENU_PREFIX.length)))),
       () => {}
@@ -67,6 +99,21 @@ export default function Forms() {
   }, [])
   useEffect(load, [load])
 
+  // Once. A name per row would be one request per form, and these change far
+  // more slowly than the page is opened.
+  useEffect(() => {
+    let cancelled = false
+    getUsers()
+      .then((rows) => {
+        if (cancelled) return
+        const by = {}
+        ;(rows || []).forEach((u) => { by[u.id] = u.name || u.email || u.id })
+        setPeople(by)
+      })
+      .catch(() => {})
+    return () => { cancelled = true }
+  }, [])
+
   const onLabel = (value) => {
     setLabel(value)
     if (!keyEdited) setKey(suggestKey(value))
@@ -79,28 +126,63 @@ export default function Forms() {
       const made = await factory.createEntity({ key: key.trim(), label: label.trim() })
       navigate('/configure/forms/' + made.key + '/design/form')
     } catch (err) {
-      setError(err.message)
+      raiseSnackbar(err.message, { design: 'error' })
       setBusy(null)
     }
   }
 
   // The form first — publishing it creates or changes the table — then the list.
+  /**
+   * Delete a form. Asked first, in the words of what will actually happen
+   * rather than "are you sure": the design goes, and the records do not
+   * unless there are none.
+   */
+  const remove = async (form) => {
+    const ok = await raiseConfirm(
+      'Its design goes. Its table and any records in it are kept unless the table is empty.',
+      {
+        title: 'Delete "' + (form.name || form.key) + '"?',
+        confirmLabel: 'Delete',
+        // Red, because it cannot be undone from here.
+        danger: true
+      }
+    )
+    if (!ok) return
+    setBusy(form.key)
+    try {
+      const out = await deleteForm(factory, form)
+      // Said plainly: somebody deleting a form expects all of it to go, and a
+      // table left behind is worth knowing about rather than discovering.
+      if (out && out.records > 0) {
+        raiseSnackbar('"' + (form.name || form.key) + '" is gone. Its table "' + out.table + '" was kept — it still holds ' +
+          out.records + ' record' + (out.records === 1 ? '' : 's') + '.', { design: 'info' })
+      } else if (out && out.tableDropped) {
+        raiseSnackbar('"' + (form.name || form.key) + '" and its empty table are gone.', { design: 'success' })
+      } else {
+        raiseSnackbar('"' + (form.name || form.key) + '" is gone.', { design: 'success' })
+      }
+      load()
+    } catch (err) {
+      raiseSnackbar(err.message, { design: 'error' })
+    } finally {
+      setBusy(null)
+    }
+  }
+
   const publish = async (form) => {
     setBusy(form.key)
-    setNotice(null)
     try {
       for (const screen of [form.edit, form.list]) {
         if (!screen || (screen.version !== null && !screen.hasDraft)) continue
         const row = await factory.loadDraft(screen.screenKey)
         await factory.publish(row.document)
       }
-      setNotice('Published "' + form.name + '"')
-      setError(null)
+      raiseSnackbar('Published "' + form.name + '"', { design: 'success' })
       load()
     } catch (err) {
-      setError(err.confirm
+      raiseSnackbar(err.confirm
         ? 'Publishing "' + form.name + '" would remove columns and their data — open Design form and publish there to see what, and confirm.'
-        : err.message)
+        : err.message, { design: 'error' })
     } finally {
       setBusy(null)
     }
@@ -112,10 +194,10 @@ export default function Forms() {
       if (inMenu.has(form.key)) await removeMenuItem(FORM_MENU_PREFIX + form.key)
       else await addMenuItem({ name: FORM_MENU_PREFIX + form.key, label: form.name })
       await refreshAccess()
-      setNotice(inMenu.has(form.key) ? 'Removed "' + form.name + '" from the menu' : 'Added "' + form.name + '" to the menu — rename or move it in the Menu tab')
+      raiseSnackbar(inMenu.has(form.key) ? 'Removed "' + form.name + '" from the menu' : 'Added "' + form.name + '" to the menu — rename or move it in the Menu tab', { design: 'success' })
       load()
     } catch (err) {
-      setError(err.message)
+      raiseSnackbar(err.message, { design: 'error' })
     } finally {
       setBusy(null)
     }
@@ -141,8 +223,6 @@ export default function Forms() {
         </button>
       </form>
 
-      {error && <div className="app-error">{error}</div>}
-      {notice && <div className="app-notice">{notice}</div>}
 
       {forms && forms.length === 0 && <p className="app-sub">No forms yet.</p>}
       {forms && forms.length > 0 && (
@@ -157,7 +237,19 @@ export default function Forms() {
               const canOpen = form.list && form.list.version !== null
               return (
                 <tr key={form.key}>
-                  <td><strong>{form.name || form.key}</strong><div className="app-sub">{form.key}</div></td>
+                  <td>
+                    <strong>{form.name || form.key}</strong>
+                    <div className="app-sub">{form.key}</div>
+                    {/* WHAT IT IS FOR, and whose it is — the two things that
+                        tell three forms of the same name apart. The date
+                        stands alone when the names cannot be fetched. */}
+                    {form.description && <div className="app-sub">{form.description}</div>}
+                    {(form.createdBy || form.createdDate) && (
+                      <div className="app-sub">
+                        {[people[form.createdBy], madeOn(form.createdDate)].filter(Boolean).join(' · ')}
+                      </div>
+                    )}
+                  </td>
                   <td><code>{form.source || '—'}</code></td>
                   <td className={edit.unpublished ? 'app-forms-pending' : undefined}>{edit.label}</td>
                   <td className={list.unpublished ? 'app-forms-pending' : undefined}>{list.label}</td>
@@ -173,6 +265,17 @@ export default function Forms() {
                         {busy === form.key ? 'Publishing…' : 'Publish'}
                       </button>
                     )}
+                    {/* The design always goes; the TABLE only when it is empty
+                        and nothing else describes it. Records are never lost
+                        to a click — @xeplr/factory refuses to drop a table
+                        with rows in it and says how many kept it. */}
+                    <button
+                      className="app-btn app-btn-quiet app-btn-danger"
+                      disabled={busy === form.key}
+                      onClick={() => remove(form)}
+                    >
+                      Delete
+                    </button>
                   </td>
                 </tr>
               )

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

@@ -0,0 +1,114 @@
+// CONFIGURE UI → MASTERS — the lists the rest of the app points at.
+//
+// Departments, statuses, countries, categories: small tables that other forms
+// choose from. They are ordinary forms with a flag (Design → This is a
+// master), so they have a table, a list, an edit screen and permissions like
+// anything else — a master is a fact about a form, not a kind of form.
+//
+// They are gathered HERE rather than scattered through the side rail because
+// that is what they are: reference data somebody maintains occasionally, not
+// pages people work in daily. The rail stays for the work.
+//
+// Which forms are masters is @xeplr/ui-factory's answer (`useScreenSource`),
+// not this app's — grouping two screens into a form and reading the flag is
+// the same code in every app, and a copy here could never be fixed centrally.
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useScreenSource, createMaster, possibleParents, FactoryBuilder } from '@xeplr/ui-factory'
+import { factory } from '../api/factory.js'
+
+export default function Masters() {
+  const { masters, loading, reload } = useScreenSource(factory, { Builder: FactoryBuilder })
+  const [name, setName] = useState('')
+  const [parent, setParent] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState(null)
+
+  // MADE, NOT DESIGNED. A master is a name, an order and what it belongs to —
+  // the same three things every time — so it is created outright and the
+  // builder is for the day one needs a fourth field.
+  const create = async (e) => {
+    e.preventDefault()
+    if (!name.trim() || busy) return
+    setBusy(true)
+    try {
+      const owner = masters.find((m) => m.key === parent)
+      await createMaster(factory, {
+        name: name.trim(),
+        parent: owner ? { table: owner.source, label: owner.name } : null
+      })
+      setName('')
+      setParent('')
+      setError(null)
+      reload()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (loading) return <p className="app-sub">Loading…</p>
+
+  return (
+    <div className="app-forms">
+      <p className="app-page-lead">
+        The lists the rest of the app chooses from. A master is a name, an order of your own,
+        and — when it belongs to one — the master above it.
+      </p>
+
+      {error && <div className="app-error">{error}</div>}
+
+      <form className="app-forms-new" onSubmit={create}>
+        <label className="app-forms-field">
+          <span>New master</span>
+          <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Departments" />
+        </label>
+        {/* Only worth asking once there is something to belong to. */}
+        {masters.length > 0 && (
+          <label className="app-forms-field">
+            <span>Belongs to</span>
+            <select value={parent} onChange={(e) => setParent(e.target.value)}>
+              <option value="">— nothing —</option>
+              {possibleParents(masters).map((m) => (
+                <option key={m.key} value={m.key}>{m.name}</option>
+              ))}
+            </select>
+          </label>
+        )}
+        <button type="submit" className="app-btn" disabled={!name.trim() || busy}>
+          {busy ? 'Making it…' : 'Make the master'}
+        </button>
+      </form>
+
+      {masters.length === 0 && (
+        <p className="app-sub">
+          No masters yet. Departments, statuses, countries — anything other forms point at.
+        </p>
+      )}
+
+      {masters.length > 0 && (
+        <table className="app-table">
+          <thead><tr><th>Master</th><th>Shown as</th><th>Table</th><th /></tr></thead>
+          <tbody>
+            {masters.map((m) => (
+              <tr key={m.key}>
+                <td><strong>{m.name}</strong></td>
+                {/* What a picker shows for one of its records — said once on
+                    the master, not again on every dropdown pointing at it. */}
+                <td className="app-sub">{m.labelField || '—'}</td>
+                <td className="app-sub">{m.source || '—'}</td>
+                <td className="app-row-actions">
+                  {/* Its records: the list screen is what looking at a master
+                      means. Its design is where the flag was set. */}
+                  <Link to={`/forms/${m.key}`}>Open</Link>
+                  <Link to={`/configure/forms/${m.key}/design/form`}>Design</Link>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}

package/templates/ui/vite.config.js

@@ -35,13 +35,7 @@ export default defineConfig(({ mode }) => {
     // Only the real network calls (/auth/api/*), NOT bare /auth — that prefix
     // is also used by client-side routes (/auth/login, /auth/profile), which
     // must fall through to Vite's SPA index.html rather than the auth backend.
-    '/auth/api': authUrl,
-    // A SERVICE THAT MAY RUN ON ITS OWN PORT, before the /api it sits under —
-    // the first matching prefix wins. Blank WORKFLOW_URL: it runs inside the
-    // API, so the API answers. The browser always calls /api/workflow/…; which
-    // process serves it is decided here (and by nginx in production), never in
-    // the UI's code.
-    '/api/workflow': env.WORKFLOW_URL || apiUrl
+    '/auth/api': authUrl
   }
   API_PATHS.forEach((p) => { proxy[p] = apiUrl })
 

package/templates/api/bin/workflow

@@ -1,52 +0,0 @@
-#!/usr/bin/env node
-
-// XEPLR WORKFLOW AS ITS OWN SERVICE — `npm run start-workflow`.
-//
-// Only when WORKFLOW_PORT is set (development.env / production.env). Blank, it
-// runs inside the API instead and this refuses to start, saying so.
-//
-// The SAME workflow as the embedded one (../workflow.js): this app's database,
-// this app's tenancy and membership gate, the same permission checks, and the
-// same path — /api/workflow — so the browser cannot tell the two apart.
-// What routes /api/workflow here: ui/.env WORKFLOW_URL for Vite's dev proxy,
-// nginx in production (README, "Production").
-require('dotenv').config({ path: require('path').join(__dirname, '..', (process.env.NODE_ENV || 'development') + '.env') });
-
-if (!process.env.WORKFLOW_PORT) {
-  console.error('\n[workflow] WORKFLOW_PORT is blank — workflow runs INSIDE the API (npm run start-api).');
-  console.error('  To run it as its own service, set WORKFLOW_PORT in development.env,');
-  console.error('  and WORKFLOW_URL in ui/.env to http://localhost:<that port>.\n');
-  process.exit(1);
-}
-
-require('@xeplr/base-apis').checkEnv(require('../env.required.js'), { appName: 'workflow' });
-
-var express = require('express');
-var createApp = require('@xeplr/base-apis/express');
-
-async function start() {
-  // This app's tenancy levels, registered exactly as the API registers them.
-  await require('../db/setup');
-  var app = require('../app');
-  var workflowRouter = await require('../workflow')(app.memberGate);
-
-  var health = express.Router();
-  health.get('/', function(req, res) { res.json({ status: 'ok', service: 'workflow' }); });
-
-  createApp(process.env.WORKFLOW_PORT, '__NAME___workflow', {
-    // Every route needs a valid token, checked against the same sign-in
-    // service as the API — one login for both.
-    auth: { publicPaths: ['/health'] },
-    log: { logDir: process.env.LOG_DIR || './logs' },
-    middleware: app.middleware(),
-    routes: {
-      '/health': health,
-      '/api/workflow': workflowRouter
-    }
-  });
-}
-
-start().catch(function(err) {
-  console.error('[workflow] startup failed:', err.stack || err.message);
-  process.exit(1);
-});

package/templates/api/migrations-auth/0005_flows_menu.sql

@@ -1,14 +0,0 @@
--- "Flows" — the side-rail item for journeys across the app's forms.
---
--- ALWAYS THERE: flows are run by @xeplr/workflow inside this app's own API,
--- so there is nothing to switch on.
---
--- The name is the KEY: it must match ui/src/App.jsx's drawerItems `key`
--- EXACTLY. What people read is the label, changed in Configure UI → Menu.
--- (0005, not 0004: a multi-tenant app's own 0004 is the switch menu.)
-
-INSERT INTO "menus" (id, name, "menuGroup", "isPublic", "isActive", "mtId1", "recordCreatedDate", "recordModifiedDate")
-SELECT encode(gen_random_bytes(12), 'hex'), 'Flows', '', true, true, '*', now(), now()
-WHERE NOT EXISTS (SELECT 1 FROM "menus" WHERE name = 'Flows');
-
-UPDATE "menus" SET "isPublic" = true WHERE name = 'Flows';

package/templates/api/routes/flows.js

@@ -1,47 +0,0 @@
-// FLOWS — screens one after another, run by Xeplr Workflow (@xeplr/workflow).
-//
-// WHERE IT RUNS. By default INSIDE THIS API, in this app's own database:
-// bin/www starts it (registerWorkflow) after the screens and plugs its flows
-// router in here. With WORKFLOW_PORT set in development.env / production.env it
-// runs as its own service instead (npm run start-workflow → bin/workflow), at
-// the SAME path — /api/workflow/flows — and this route answers 404 so a
-// misrouted request says where it should have gone. The front door routes
-// /api/workflow to it: ui/.env WORKFLOW_URL for Vite, nginx in production.
-//
-//   ONE DATABASE     workflow's tables (workflows, workflow_steps,
-//                    workflow_runs…) sit beside the forms' tables, with their
-//                    own migration record (workflow_migrations).
-//   THIS APP'S       embedded workflow registers no tenancy of its own. Its
-//   TENANCY          rows are filtered by the levels this app registered — or
-//                    none, in an app without tenancy — and the membership gate
-//                    below is the app's own. It never creates companies or
-//                    workspaces tables.
-//   PERMISSIONS      every route checks the caller's permissions ("List flows",
-//                    "Start flow run"…), granted by @xeplr/workflow's
-//                    migrations-auth — in XEPLR_AUTH_MIGRATIONS.
-//
-// Mounted by routes/index.js at /api/workflow, behind this app's auth gate.
-// Everything Workflow serves lives under it:
-//   /api/workflow/flows       the flows people walk through (Journey)
-//   /api/workflow/workflows   the designer's document API
-//   /api/workflow/actions     what a step can DO, for the palette
-var express = require('express');
-
-var router = express.Router();
-var workflow = null;
-
-router.use(function(req, res, next) {
-  if (process.env.WORKFLOW_PORT) {
-    return res.status(404).json({ message: 'Workflow runs on its own port (WORKFLOW_PORT) — route /api/workflow there (ui/.env WORKFLOW_URL, or nginx)' });
-  }
-  // 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/workflow.js

@@ -1,34 +0,0 @@
-// FLOWS — how @xeplr/workflow starts, in ONE place, for both ways it runs:
-//
-//   inside the API     bin/www calls this when WORKFLOW_PORT is blank
-//   its own service    bin/workflow (npm run start-workflow) when it is set
-//
-// Either way: this app's own database (its tables beside the forms', with its
-// own migration record), this app's tenancy (it creates no companies or
-// workspaces of its own), and a permission check on every route — granted by
-// @xeplr/workflow's migrations-auth, which XEPLR_AUTH_MIGRATIONS loads.
-var { registerWorkflow } = require('@xeplr/workflow');
-
-/**
- * Runs workflow's migrations and returns its ROUTER — already gated.
- *
- * The whole router, not just the flows facade: it carries `/flows` (the
- * screens a person walks through) AND `/workflows` (the designer's own
- * document API). One designer serves both — @xeplr/ui-workflow's canvas, the
- * same one every xeplr product uses — so the app has to serve what it reads.
- */
-module.exports = async function startWorkflow(memberGate) {
-  var workflow = await registerWorkflow({
-    applicationId: '__NAME__',
-    db: {
-      name: process.env.DB_API,
-      connection: process.env.__PREFIX___CONNECTION,
-      connectionName: 'workflow',
-      migrationsTable: 'workflow_migrations'
-    },
-    tenantTables: false,
-    access: true,
-    mtMembershipGate: memberGate
-  });
-  return workflow.router;
-};

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

@@ -1,8 +0,0 @@
-// Flows are at /api/workflow/flows — served by @xeplr/workflow inside this
-// app's API, or on its own port; the dev proxy (vite.config.js) and nginx
-// decide which, never this file. 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/pages/FlowDesigner.jsx

@@ -1,54 +0,0 @@
-// ONE FLOW, ON WORKFLOW'S OWN CANVAS.
-//
-// The designer is a component from @xeplr/ui-workflow — the same one BI and
-// every other xeplr product uses — dropped straight onto this page. It is not
-// a section mounted at URLs of its own: this app already has a page for it,
-// inside its own shell, and the designer renders where it is put.
-//
-// There used to be a second, screens-only builder here (@xeplr/ui-factory's
-// FlowBuilder). One designer over one engine is the point: the trigger box,
-// the condition boxes and the reference pickers are built once, and this app
-// gets them by upgrading a package.
-//
-// THIS APP'S FORMS ARE THE FLOW'S SCREENS. A step can show one and wait for
-// somebody to fill it in, and `useScreenSource` is @xeplr/ui-factory's answer
-// to the two things the designer asks its host: which screens exist (with
-// what each one hands back, so a later step can pick `title` by name) and how
-// to design one without leaving the flow. Two props, because the alternative
-// was the same twenty lines in every app — and a copy in your app could never
-// be fixed once.
-//
-// WHERE THE API IS: /api/workflow, always — the dev proxy (vite.config.js) or
-// nginx decides whether that is this API or Workflow on its own port.
-import { useParams, useNavigate } from 'react-router-dom'
-import { WorkflowDesigner } from '@xeplr/ui-workflow'
-import { useScreenSource, FactoryBuilder } from '@xeplr/ui-factory'
-import { factory } from '../api/factory.js'
-
-export default function FlowDesigner() {
-  const { flow: key } = useParams()
-  const navigate = useNavigate()
-  const { screens, screenEditor } = useScreenSource(factory, { Builder: FactoryBuilder })
-
-  return (
-    <div className="app-designer">
-      <WorkflowDesigner
-        apiBase="/api/workflow"
-        screens={screens}
-        screenEditor={screenEditor}
-        // BY KEY, because that is what this app's URLs carry:
-        // /configure/flows/leave_request. A flow is created on the Flows page
-        // with a key made from its name, and that key is how it is addressed
-        // for the rest of its life — a readable link that survives a rebuild
-        // minting new ids.
-        workflowKey={key === 'new' ? undefined : key}
-        newKind={key === 'new' ? 'workflow' : undefined}
-        // Only reachable from /configure/flows/new, which this app does not
-        // link to — the Flows page creates the flow first, so the designer
-        // always opens on one that exists.
-        onOpened={(saved) => navigate('/configure/flows/' + saved, { replace: true })}
-        onBack={() => navigate('/configure?tab=flows')}
-      />
-    </div>
-  )
-}