@xeplr/ui-factory 1.7.2 → 1.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeplr/ui-factory",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "Design data-entry screens on @xeplr/ui-canvas, save them as JSON, run them as auto-saving forms with lists of saved records — built for Claude to draft and people to refine",
   "type": "module",
   "main": "src/index.js",

package/src/designs/FlowDesignerSample.jsx

@@ -84,7 +84,7 @@ export default function FlowDesignerSample({ ctrl, step, events, catalog, tab, o
                   onChange={(e) => ctrl.setStep(step.stepKey, { label: e.target.value })}
                   aria-label="Step name"
                 />
-                <span className="xeplr-factory-fd-step-screen">Shows <code>{screenName(ctrl, step.screen)}</code></span>
+                <span className="xeplr-factory-fd-step-screen">Shows the form “{screenName(ctrl, step.screen)}”</span>
                 <button type="button" className="xeplr-factory-fd-remove" onClick={() => ctrl.removeStep(step.stepKey)}>Remove step</button>
               </div>
               <div className="xeplr-factory-fd-tabs" role="tablist">
@@ -239,7 +239,7 @@ function EventsPanel({ step, events, catalog }) {
 
 /** Where this step goes once its screen is saved: a screen, a function's choice, or the end. */
 function NavigationPanel({ step, ctrl, catalog }) {
-  const nav = navigationOfStep(ctrl, step)
+  const nav = ctrl.navigationOf(step)
   const others = ctrl.flow.steps.filter((s) => s.stepKey !== step.stepKey)
   const deciders = catalog.forEvent(DECIDE_EVENT)
   const set = (patch) => ctrl.setNavigation(step.stepKey, { ...nav, ...patch })
@@ -338,10 +338,6 @@ function NavigationPanel({ step, ctrl, catalog }) {
   )
 }
 
-function navigationOfStep(ctrl, step) {
-  return ctrl.navigationOf(step)
-}
-
 /** "→ Contract", "→ routeByAmount decides", "Finishes" — under each step in the list. */
 function nextInWords(ctrl, step) {
   const nav = ctrl.navigationOf(step)
@@ -349,6 +345,9 @@ function nextInWords(ctrl, step) {
   if (nav.mode === 'decide') return nav.decide ? `→ ${nav.decide} decides` : '→ a function decides'
   if (nav.mode === 'branches') return `→ ${step.transitions.length} branches`
   if (nav.mode === 'end') return 'Finishes the journey'
+  // No arrows on the LAST step is the engine's own end of the journey.
+  const last = ctrl.flow.steps[ctrl.flow.steps.length - 1]
+  if (last && last.stepKey === step.stepKey) return 'Finishes the journey'
   return 'Where next?'
 }
 

package/src/designs/factory.css

@@ -575,7 +575,6 @@
 .xeplr-factory-fd-step-name { font-size: 18px; font-weight: 650; background: transparent; border-color: transparent; padding: 4px 8px; margin-left: -8px; min-width: 220px; }
 .xeplr-factory-fd-step-name:hover { border-color: var(--xf-border); }
 .xeplr-factory-fd-step-screen { color: var(--xf-muted); }
-.xeplr-factory-fd-step-screen code { color: var(--xf-ink); }
 .xeplr-factory-fd-remove { margin-left: auto; font: inherit; font-size: 12px; color: var(--xf-danger); background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
 .xeplr-factory-fd-remove:hover { background: color-mix(in srgb, var(--xf-danger) 10%, transparent); }
 .xeplr-factory-fd-tabs { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 1px solid var(--xf-border); }