@nanobpm/urban 0.22.0 → 0.23.1

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

@@ -361,6 +361,9 @@ table.pc-grid th { font-weight:600; opacity:.75; }
 .pc-subform-title { font-weight:600; font-size:.85rem; margin-bottom:.4rem; }
 .pc-prompt { font-size:.85rem; opacity:.8; margin-bottom:.4rem; white-space:pre-wrap; }
 .pc-textarea { width:100%; min-height:4rem; padding:.5rem; border:1px solid var(--pc-edge); border-radius:.4rem; font:inherit; }
+.pc-collapse-header { display:flex; align-items:center; gap:.5rem; width:100%; margin:0 0 .75rem; padding:0; background:transparent; border:0; color:inherit; font:inherit; font-size:1rem; font-weight:600; cursor:pointer; text-align:left; }
+.pc-chevron-inline { opacity:.6; font-size:.75rem; width:1em; }
+.pc-card-body[hidden] { display:none; }
 `;
 // The schema-driven browser renderer (ADR 0042 §3). Plain ES module string served at
 // /app/runtime.js — it does NOT ship Craft.js (authoring is console-side only). It
@@ -718,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));
@@ -729,26 +742,125 @@ 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;
 }
 
 const RENDERERS = { text: renderText, actionForm: renderActionForm, dataGrid: renderDataGrid };
 
+// Durable per-node UI state. localStorage is keyed by the home page id + node
+// id so two grids on the same page (or the same grid across pages) don't clash,
+// and the collapsed state survives a full reload / new session — not just the
+// refresh poll. Every access is guarded: private-mode or storage-disabled
+// browsers throw on localStorage, and a UI preference must never break render.
+function readCollapsed(key, dflt) {
+  try {
+    const v = localStorage.getItem(key);
+    return v === null ? dflt : v === "1";
+  } catch (e) {
+    return dflt;
+  }
+}
+function writeCollapsed(key, val) {
+  try {
+    localStorage.setItem(key, val ? "1" : "0");
+  } catch (e) {
+    // Preference is best-effort; ignore storage failures.
+  }
+}
+
+// Wrap a rendered node so its card can be collapsed from a clickable header.
+// Opt-in via the node's "collapsible" prop; "defaultCollapsed" seeds the state
+// the first time (before the user has toggled it). Generic across node types —
+// the body (everything the renderer produced, minus its own <h2> title, which
+// becomes the header label) is hidden as one unit.
+function makeCollapsible(node, card) {
+  const props = node.props || {};
+  if (!props.collapsible) return card;
+  // Normalize to a card container. Card renderers already return
+  // <section class="pc-card"> — we unwrap those in place (lift out the <h2>
+  // title, reparent the rest into the body). A non-card renderer (e.g. text
+  // returning <p>/<h1>) is nested whole inside a fresh section instead:
+  // appending a <button>/<div> directly into a <p> is invalid markup the
+  // browser silently re-parents, breaking layout and click handling.
+  const isCard = card.tagName === "SECTION";
+  const container = isCard ? card : el("section", { class: "pc-card" });
+  const h2 = isCard && card.querySelector ? card.querySelector("h2") : null;
+  const titleText = props.title || (h2 ? h2.textContent : "") || "Section";
+  if (h2) h2.remove();
+  const body = el("div", { class: "pc-card-body" });
+  if (isCard) {
+    while (card.firstChild) body.append(card.firstChild);
+  } else {
+    body.append(card);
+  }
+  const chevron = el("span", { class: "pc-chevron-inline" }, "▾");
+  const header = el(
+    "button",
+    { class: "pc-collapse-header", type: "button" },
+    chevron,
+    el("span", { class: "pc-collapse-title" }, titleText),
+  );
+  const storageKey = "pc:collapsed:" + HOME + ":" + (node.id || titleText);
+  let collapsed = readCollapsed(storageKey, !!props.defaultCollapsed);
+  function apply() {
+    body.hidden = collapsed;
+    chevron.textContent = collapsed ? "▸" : "▾";
+    header.setAttribute("aria-expanded", String(!collapsed));
+  }
+  header.addEventListener("click", () => {
+    collapsed = !collapsed;
+    writeCollapsed(storageKey, collapsed);
+    apply();
+  });
+  apply();
+  container.append(header, body);
+  return container;
+}
+
 async function main() {
   try {
     const doc = await getJSON("/app/pages/" + encodeURIComponent(HOME));
     if (doc.title) document.title = doc.title;
-    root.replaceChildren(...(doc.nodes || []).map((n) => (RENDERERS[n.type] || (() => el("div")))(n)));
+    root.replaceChildren(
+      ...(doc.nodes || []).map((n) => makeCollapsible(n, (RENDERERS[n.type] || (() => el("div")))(n))),
+    );
   } catch (e) {
     root.replaceChildren(el("p", { class: "pc-msg err" }, "Failed to load page: " + String(e.message || e)));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanobpm/urban",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "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",

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 ?? "";
@@ -138,6 +158,37 @@ test("the renderer honours numeric actionForm fields", async () => {
   assert.match(js, /if \(!Number\.isFinite\(num\)\) continue;/);
 });
 
+test("renderer makes collapsible nodes persist their state across sessions", async () => {
+  // A node with `collapsible` gets a clickable header that hides/shows the card
+  // body, and the collapsed state is written to localStorage keyed by the home
+  // page id + node id so it survives a full reload / new session (not just the
+  // refresh poll). Storage access is guarded so private-mode browsers can't
+  // break render.
+  const res = await dispatch("GET", "/app/runtime.js");
+  const js = res.body ?? "";
+  assert.match(js, /function makeCollapsible\(node, card\)/);
+  assert.match(js, /if \(!props\.collapsible\) return card;/);
+  // Seed from defaultCollapsed the first time, then from persisted state.
+  assert.match(js, /readCollapsed\(storageKey, !!props\.defaultCollapsed\)/);
+  // Namespaced, per-node storage key.
+  assert.match(js, /"pc:collapsed:" \+ HOME \+ ":" \+ \(node\.id/);
+  // Persist on toggle.
+  assert.match(js, /writeCollapsed\(storageKey, collapsed\)/);
+  // Every storage access is wrapped so a throwing localStorage can't break the UI.
+  assert.match(js, /localStorage\.getItem\(key\)/);
+  assert.match(js, /localStorage\.setItem\(key, val \? "1" : "0"\)/);
+  assert.match(js, /catch \(e\) \{\s*return dflt;/);
+  // And the wrapper is actually applied at the dispatch layer.
+  assert.match(js, /makeCollapsible\(n, \(RENDERERS\[n\.type\]/);
+  // Non-card renderer output (e.g. text -> <p>) is nested whole inside a fresh
+  // <section class="pc-card"> rather than having a <button>/<div> injected into
+  // it — so the feature is valid markup across every node type, not just cards.
+  assert.match(js, /const isCard = card\.tagName === "SECTION";/);
+  assert.match(js, /const container = isCard \? card : el\("section", \{ class: "pc-card" \}\)/);
+  assert.match(js, /body\.append\(card\)/);
+  assert.match(js, /container\.append\(header, body\);\s*return container;/);
+});
+
 test("GET /app/pages/<id> returns the page json, 404 for unknown", async () => {
   const ok = await dispatch("GET", "/app/pages/home");
   assert.equal(ok.status, 200);

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

@@ -391,6 +391,9 @@ table.pc-grid th { font-weight:600; opacity:.75; }
 .pc-subform-title { font-weight:600; font-size:.85rem; margin-bottom:.4rem; }
 .pc-prompt { font-size:.85rem; opacity:.8; margin-bottom:.4rem; white-space:pre-wrap; }
 .pc-textarea { width:100%; min-height:4rem; padding:.5rem; border:1px solid var(--pc-edge); border-radius:.4rem; font:inherit; }
+.pc-collapse-header { display:flex; align-items:center; gap:.5rem; width:100%; margin:0 0 .75rem; padding:0; background:transparent; border:0; color:inherit; font:inherit; font-size:1rem; font-weight:600; cursor:pointer; text-align:left; }
+.pc-chevron-inline { opacity:.6; font-size:.75rem; width:1em; }
+.pc-card-body[hidden] { display:none; }
 `;
 
 // The schema-driven browser renderer (ADR 0042 §3). Plain ES module string served at
@@ -749,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));
@@ -760,26 +773,125 @@ 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;
 }
 
 const RENDERERS = { text: renderText, actionForm: renderActionForm, dataGrid: renderDataGrid };
 
+// Durable per-node UI state. localStorage is keyed by the home page id + node
+// id so two grids on the same page (or the same grid across pages) don't clash,
+// and the collapsed state survives a full reload / new session — not just the
+// refresh poll. Every access is guarded: private-mode or storage-disabled
+// browsers throw on localStorage, and a UI preference must never break render.
+function readCollapsed(key, dflt) {
+  try {
+    const v = localStorage.getItem(key);
+    return v === null ? dflt : v === "1";
+  } catch (e) {
+    return dflt;
+  }
+}
+function writeCollapsed(key, val) {
+  try {
+    localStorage.setItem(key, val ? "1" : "0");
+  } catch (e) {
+    // Preference is best-effort; ignore storage failures.
+  }
+}
+
+// Wrap a rendered node so its card can be collapsed from a clickable header.
+// Opt-in via the node's "collapsible" prop; "defaultCollapsed" seeds the state
+// the first time (before the user has toggled it). Generic across node types —
+// the body (everything the renderer produced, minus its own <h2> title, which
+// becomes the header label) is hidden as one unit.
+function makeCollapsible(node, card) {
+  const props = node.props || {};
+  if (!props.collapsible) return card;
+  // Normalize to a card container. Card renderers already return
+  // <section class="pc-card"> — we unwrap those in place (lift out the <h2>
+  // title, reparent the rest into the body). A non-card renderer (e.g. text
+  // returning <p>/<h1>) is nested whole inside a fresh section instead:
+  // appending a <button>/<div> directly into a <p> is invalid markup the
+  // browser silently re-parents, breaking layout and click handling.
+  const isCard = card.tagName === "SECTION";
+  const container = isCard ? card : el("section", { class: "pc-card" });
+  const h2 = isCard && card.querySelector ? card.querySelector("h2") : null;
+  const titleText = props.title || (h2 ? h2.textContent : "") || "Section";
+  if (h2) h2.remove();
+  const body = el("div", { class: "pc-card-body" });
+  if (isCard) {
+    while (card.firstChild) body.append(card.firstChild);
+  } else {
+    body.append(card);
+  }
+  const chevron = el("span", { class: "pc-chevron-inline" }, "▾");
+  const header = el(
+    "button",
+    { class: "pc-collapse-header", type: "button" },
+    chevron,
+    el("span", { class: "pc-collapse-title" }, titleText),
+  );
+  const storageKey = "pc:collapsed:" + HOME + ":" + (node.id || titleText);
+  let collapsed = readCollapsed(storageKey, !!props.defaultCollapsed);
+  function apply() {
+    body.hidden = collapsed;
+    chevron.textContent = collapsed ? "▸" : "▾";
+    header.setAttribute("aria-expanded", String(!collapsed));
+  }
+  header.addEventListener("click", () => {
+    collapsed = !collapsed;
+    writeCollapsed(storageKey, collapsed);
+    apply();
+  });
+  apply();
+  container.append(header, body);
+  return container;
+}
+
 async function main() {
   try {
     const doc = await getJSON("/app/pages/" + encodeURIComponent(HOME));
     if (doc.title) document.title = doc.title;
-    root.replaceChildren(...(doc.nodes || []).map((n) => (RENDERERS[n.type] || (() => el("div")))(n)));
+    root.replaceChildren(
+      ...(doc.nodes || []).map((n) => makeCollapsible(n, (RENDERERS[n.type] || (() => el("div")))(n))),
+    );
   } catch (e) {
     root.replaceChildren(el("p", { class: "pc-msg err" }, "Failed to load page: " + String(e.message || e)));
   }