@nanobpm/urban 0.23.0 → 0.24.0

package/dist/runtime/core/manifest.d.ts

@@ -1,6 +1,6 @@
 import type { HostContext } from "./host.ts";
 import type { AppManifest, Worker } from "@nanobpm/nano-app-schema";
-export type { ActionDecl, AppManifest, ChatSurface, Connection, Data, DataSource, DomainField, DomainType, LlmBinding, Models, PagesSurface, Runtime, Security, Surfaces, TaskInboxSurface, Trigger, TriggerAction, Worker, } from "@nanobpm/nano-app-schema";
+export type { ActionDecl, AppManifest, AppUi, ChatSurface, Connection, Data, DataSource, DomainField, DomainType, LlmBinding, Models, PagesSurface, Runtime, Security, Surfaces, TaskInboxSurface, Trigger, TriggerAction, Worker, } from "@nanobpm/nano-app-schema";
 declare module "@nanobpm/nano-app-schema" {
     interface Models {
         /** `{{name}}` template sources substituted into model resources at deploy time: globs, a bare

package/dist/runtime/core/modules/pages.js

@@ -721,6 +721,16 @@ function renderDataGrid(node) {
     }
   }
 
+  // Is the user actively typing inside this grid? tbody.replaceChildren() in refresh()
+  // detaches the subtree, and detaching the node that holds document.activeElement blurs
+  // it — so an open detail form (where you answer an escalation) loses focus every
+  // refreshMs even though #103 preserves its half-typed value. Used to skip the poll.
+  const editingInGrid = () => {
+    const a = document.activeElement;
+    if (!a || !tbody.contains(a)) return false;
+    return a.tagName === "INPUT" || a.tagName === "TEXTAREA" || a.tagName === "SELECT" || a.isContentEditable;
+  };
+
   async function refresh() {
     try {
       const { rows } = await getJSON(dataUrl(p.data.source, p.data.table, activeFilter, p.data.orderBy));
@@ -732,15 +742,42 @@ function renderDataGrid(node) {
         for (const k of [...detailNodes.keys()]) if (!live.has(k)) detailNodes.delete(k);
         for (const k of [...expanded]) if (!live.has(k)) expanded.delete(k);
       }
+      // Capture focus + caret before the DOM swap. replaceChildren() detaches (and so blurs)
+      // the reused detail node; re-appending it restores its value but not its focus. If the
+      // very same node is re-attached (an open, still-present row), put the caret back.
+      const active = document.activeElement;
+      const keepFocus = !!active && tbody.contains(active);
+      let selStart = null, selEnd = null, savedRange = null;
+      if (keepFocus) {
+        if (active.isContentEditable) {
+          // contenteditable has no selectionStart — its caret lives in the document
+          // selection. The reused node is re-attached, so the cloned range still points
+          // at live containers and can be restored after focus.
+          try { const s = document.getSelection(); if (s && s.rangeCount) savedRange = s.getRangeAt(0).cloneRange(); } catch (e) { /* selection unavailable */ }
+        } else {
+          try { selStart = active.selectionStart; selEnd = active.selectionEnd; } catch (e) { /* non-text field */ }
+        }
+      }
       tbody.replaceChildren();
       for (const row of rows) renderRow(row);
       if (!rows.length) tbody.append(el("tr", {}, el("td", { colspan: span }, "No rows")));
+      if (keepFocus && active.isConnected) {
+        active.focus();
+        if (savedRange) {
+          try { const s = document.getSelection(); s.removeAllRanges(); s.addRange(savedRange); } catch (e) { /* selection unavailable */ }
+        } else if (selStart != null && typeof active.setSelectionRange === "function") {
+          try { active.setSelectionRange(selStart, selEnd); } catch (e) { /* non-text field */ }
+        }
+      }
     } catch (e) {
       tbody.replaceChildren(el("tr", {}, el("td", { colspan: span }, String(e.message || e))));
     }
   }
   document.addEventListener("pc:refresh", refresh);
-  if (p.refreshMs && p.refreshMs > 0) setInterval(refresh, p.refreshMs);
+  // Skip the automatic poll while the user is typing in the grid — an explicit pc:refresh
+  // (e.g. after submitting an answer) still runs — so rows never shift under an in-progress
+  // answer and the detail input keeps focus across ticks.
+  if (p.refreshMs && p.refreshMs > 0) setInterval(() => { if (!editingInGrid()) refresh(); }, p.refreshMs);
   refresh();
   return card;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanobpm/urban",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Urban: build and run code-first apps on Nano — runtime, derivation toolkit, and CLI in one. Author durable processes with @nanobpm/workflow (defineFlow), a typed datasource, forms, triggers and surfaces from a nano.app.json manifest, on Node or Deno.",
   "license": "Apache-2.0",
   "type": "module",
@@ -62,11 +62,11 @@
     "test:deno": "deno test -A --no-check src/"
   },
   "dependencies": {
-    "@nanobpm/nano-app-schema": "^0.1.0",
+    "@nanobpm/nano-app-schema": "^0.2.0",
     "@nanobpm/nano-sdk": "^1.2.3",
     "@nanobpm/workflow": "^0.8.0",
     "bpmn-auto-layout": "^2.0.0-alpha.2",
-    "create-urban-app": "^0.5.0"
+    "create-urban-app": "^0.7.0"
   },
   "devDependencies": {
     "@types/node": "^22.20.1",

package/src/runtime/core/manifest.ts

@@ -14,6 +14,7 @@ import type { AppManifest, Worker } from "@nanobpm/nano-app-schema";
 export type {
   ActionDecl,
   AppManifest,
+  AppUi,
   ChatSurface,
   Connection,
   Data,
@@ -32,10 +33,11 @@ export type {
   Worker,
 } from "@nanobpm/nano-app-schema";
 
-// The published `@nanobpm/nano-app-schema` does not yet declare `models.templates`; the manifest
+// The published `@nanobpm/nano-app-schema` does not declare `models.templates`; the manifest
 // validator only enforces `additionalProperties:false` at the top level (see validate.ts), so the
 // nested key is accepted at runtime. Augment `Models` here so the deploy path can read it typed
-// (no cast) until it is formalized in the schema package.
+// (no cast) until it is formalized in the schema package. (The top-level `ui` block, by contrast,
+// now ships natively in the schema as `AppUi` — re-exported above — so it needs no shim.)
 declare module "@nanobpm/nano-app-schema" {
   interface Models {
     /** `{{name}}` template sources substituted into model resources at deploy time: globs, a bare

package/src/runtime/core/modules/pages.test.ts

@@ -110,6 +110,26 @@ test("renderer preserves grid row-detail expansion across refreshes", async () =
   assert.match(js, /v == null \? null : String\(v\)/);
 });
 
+test("renderer keeps the detail input focused across the refresh poll", async () => {
+  // Regression: #103 reused the open detail node so a half-typed answer survived, but
+  // tbody.replaceChildren() still detaches (and so blurs) that node, dropping the caret
+  // every refreshMs. The client now (1) skips the timer-driven poll while the user is
+  // editing in the grid, and (2) restores focus + selection across any refresh that runs.
+  const res = await dispatch("GET", "/app/runtime.js");
+  const js = res.body ?? "";
+  // (1) The automatic poll is gated on not-editing; an explicit pc:refresh still runs.
+  assert.match(js, /const editingInGrid = \(\)\s*=>/);
+  assert.match(js, /setInterval\(\s*\(\)\s*=>\s*\{\s*if\s*\(\s*!editingInGrid\(\)\s*\)\s*refresh\(\)\s*;?\s*\}\s*,\s*p\.refreshMs\s*\)/);
+  // (2) Focus + caret are captured before replaceChildren() and restored to the reused node.
+  assert.match(js, /const keepFocus = !!active && tbody\.contains\(active\)/);
+  assert.match(js, /active\.selectionStart/);
+  assert.match(js, /if \(keepFocus && active\.isConnected\)/);
+  assert.match(js, /active\.setSelectionRange\(selStart, selEnd\)/);
+  // contenteditable carets are preserved via the document selection range.
+  assert.match(js, /active\.isContentEditable/);
+  assert.match(js, /s\.addRange\(savedRange\)/);
+});
+
 test("renderer wires a column's linkField to a new-tab anchor", async () => {
   const res = await dispatch("GET", "/app/runtime.js");
   const js = res.body ?? "";

package/src/runtime/core/modules/pages.ts

@@ -752,6 +752,16 @@ function renderDataGrid(node) {
     }
   }
 
+  // Is the user actively typing inside this grid? tbody.replaceChildren() in refresh()
+  // detaches the subtree, and detaching the node that holds document.activeElement blurs
+  // it — so an open detail form (where you answer an escalation) loses focus every
+  // refreshMs even though #103 preserves its half-typed value. Used to skip the poll.
+  const editingInGrid = () => {
+    const a = document.activeElement;
+    if (!a || !tbody.contains(a)) return false;
+    return a.tagName === "INPUT" || a.tagName === "TEXTAREA" || a.tagName === "SELECT" || a.isContentEditable;
+  };
+
   async function refresh() {
     try {
       const { rows } = await getJSON(dataUrl(p.data.source, p.data.table, activeFilter, p.data.orderBy));
@@ -763,15 +773,42 @@ function renderDataGrid(node) {
         for (const k of [...detailNodes.keys()]) if (!live.has(k)) detailNodes.delete(k);
         for (const k of [...expanded]) if (!live.has(k)) expanded.delete(k);
       }
+      // Capture focus + caret before the DOM swap. replaceChildren() detaches (and so blurs)
+      // the reused detail node; re-appending it restores its value but not its focus. If the
+      // very same node is re-attached (an open, still-present row), put the caret back.
+      const active = document.activeElement;
+      const keepFocus = !!active && tbody.contains(active);
+      let selStart = null, selEnd = null, savedRange = null;
+      if (keepFocus) {
+        if (active.isContentEditable) {
+          // contenteditable has no selectionStart — its caret lives in the document
+          // selection. The reused node is re-attached, so the cloned range still points
+          // at live containers and can be restored after focus.
+          try { const s = document.getSelection(); if (s && s.rangeCount) savedRange = s.getRangeAt(0).cloneRange(); } catch (e) { /* selection unavailable */ }
+        } else {
+          try { selStart = active.selectionStart; selEnd = active.selectionEnd; } catch (e) { /* non-text field */ }
+        }
+      }
       tbody.replaceChildren();
       for (const row of rows) renderRow(row);
       if (!rows.length) tbody.append(el("tr", {}, el("td", { colspan: span }, "No rows")));
+      if (keepFocus && active.isConnected) {
+        active.focus();
+        if (savedRange) {
+          try { const s = document.getSelection(); s.removeAllRanges(); s.addRange(savedRange); } catch (e) { /* selection unavailable */ }
+        } else if (selStart != null && typeof active.setSelectionRange === "function") {
+          try { active.setSelectionRange(selStart, selEnd); } catch (e) { /* non-text field */ }
+        }
+      }
     } catch (e) {
       tbody.replaceChildren(el("tr", {}, el("td", { colspan: span }, String(e.message || e))));
     }
   }
   document.addEventListener("pc:refresh", refresh);
-  if (p.refreshMs && p.refreshMs > 0) setInterval(refresh, p.refreshMs);
+  // Skip the automatic poll while the user is typing in the grid — an explicit pc:refresh
+  // (e.g. after submitting an answer) still runs — so rows never shift under an in-progress
+  // answer and the detail input keeps focus across ticks.
+  if (p.refreshMs && p.refreshMs > 0) setInterval(() => { if (!editingInGrid()) refresh(); }, p.refreshMs);
   refresh();
   return card;
 }

package/src/runtime/core/validate.test.ts

@@ -37,6 +37,14 @@ test("an `actions` array is an accepted top-level key (ADR 0055 §3)", () => {
   assert.deepEqual(issues, []);
 });
 
+test("a `ui` block is an accepted top-level key (Studio App View, ADR 0057 / nano-bpm #638)", () => {
+  const issues = collectManifestIssues({
+    ...valid,
+    ui: { enabled: true, portEnv: "PORT", path: "/", label: "Nano Workforce" },
+  });
+  assert.deepEqual(issues, []);
+});
+
 test("bad schemaVersion and bad slug id are reported", () => {
   const issues = collectManifestIssues({ ...valid, schemaVersion: 2, id: "Not A Slug" });
   assert.ok(issues.some((i) => i.path === "schemaVersion"));