@nanobpm/urban 0.82.0 → 0.82.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nanobpm/urban",
-	"version": "0.82.0",
+	"version": "0.82.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/browser/runtime.browser.js

@@ -2769,7 +2769,11 @@ function renderAppView(node) {
   });
 
   const section = el("section", { class: "pc-appview" + (fill ? " pc-appview-fill" : "") });
-  if (title) section.append(el("div", { class: "pc-appview-title" }, title));
+  // The title is an <h2> (the tag EVERY card renderer uses and makeCollapsible lifts into the
+  // collapse header), not a <div>: a collapsible appView's title must be lifted out of the body,
+  // otherwise it double-renders (header label + leftover in-body title). The .pc-appview-title CSS
+  // is class-based, so a non-collapsible appView renders identically.
+  if (title) section.append(el("h2", { class: "pc-appview-title" }, title));
   section.append(frame);
   return section;
 }

package/src/runtime/browser/runtime.browser.test.ts

@@ -157,14 +157,29 @@ test("#416: renderAppView mounts a base-relative iframe honoring embed/title/fil
   assert.equal(frame.getAttribute("title"), "Agent networks");
   assert.equal(frame.className, "pc-appview-frame");
 
-  // The title also renders as a visible label above the frame.
+  // The title also renders as a visible label above the frame — as an <h2> (see below).
   const label = section.children.find(
     (c): c is FakeElement => c instanceof FakeElement && c.className === "pc-appview-title",
   );
   assert.ok(label, "the title renders as a label");
+  assert.equal(label.tagName, "H2", "the appView title must be an <h2> so makeCollapsible lifts it (no duplicate title when collapsible)");
   assert.equal(label.textContent, "Agent networks");
 });
 
+test("#471: the appView title is an <h2> so a collapsible appView doesn't double-render it", (t) => {
+  // makeCollapsible lifts a card's title out of the body into the collapse header by finding the
+  // renderer's <h2> (card.querySelector('h2')). Every card renderer emits an <h2>; renderAppView
+  // used to emit a <div class=pc-appview-title>, so the lift missed it and a collapsible appView
+  // showed its title twice (header label + leftover in-body div). Pin the tag so that can't regress.
+  t.after(installFakeDom());
+  const section = asFake(renderAppView({ type: "appView", props: { title: "Staged proposals", embed: "./e.html" } }));
+  const label = section.children.find(
+    (c): c is FakeElement => c instanceof FakeElement && c.className === "pc-appview-title",
+  );
+  assert.ok(label, "the appView renders a title label");
+  assert.equal(label.tagName, "H2", "renderAppView must emit its title as the <h2> makeCollapsible lifts");
+});
+
 test("#416: renderAppView rebases a root-absolute embed onto the mount root", (t) => {
   t.after(installFakeDom());
   // A root-absolute "/embed.html" would escape the console proxy prefix and hit the

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

@@ -579,6 +579,16 @@ test("renderer supports an opt-in sticky nav bar", async () => {
   assert.match(css, /\.pc-bar\.pc-sticky \{[^}]*position:sticky[^}]*top:0/);
 });
 
+test("#471: a fill appView keeps its height when also collapsible (flex propagates through .pc-card-body)", async () => {
+  const css = (await dispatch("GET", "/")).body ?? "";
+  // makeCollapsible reparents a collapsible node's body (the iframe, for an appView) into a
+  // `.pc-card-body`, so a `fill` appView's frame is no longer a direct flex child of
+  // `.pc-appview-fill` and its `flex:1` stops applying. The shell CSS must make the collapse body a
+  // grow-able flex column so `fill` propagates through it to the frame.
+  assert.match(css, /\.pc-appview-fill \.pc-appview-frame \{[^}]*flex:1 1 auto/);
+  assert.match(css, /\.pc-appview-fill \.pc-card-body \{[^}]*flex:1 1 auto[^}]*display:flex[^}]*flex-direction:column/);
+});
+
 test("renderer exposes an embed-gated host-navigation bridge", async () => {
   const res = await dispatch("GET", "/app/runtime.js");
   const js = res.body ?? "";

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

@@ -905,6 +905,11 @@ table.pc-grid th { font-weight:600; color:var(--nano-text-muted); }
 .pc-appview-frame { display:block; width:100%; min-height:24rem; border:1px solid var(--nano-edge); border-radius:.6rem; background:var(--nano-inset); }
 .pc-appview-fill { display:flex; flex-direction:column; min-height:min(80vh,48rem); }
 .pc-appview-fill .pc-appview-frame { flex:1 1 auto; min-height:0; }
+/* When a fill appView is ALSO collapsible, makeCollapsible reparents the iframe into a
+   .pc-card-body, so the frame is no longer a direct flex child of .pc-appview-fill and its
+   flex:1 above stops taking effect (the panel loses its height). Make the collapse body a flex
+   item that grows AND a flex column, so fill propagates through it to the frame. */
+.pc-appview-fill .pc-card-body { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
 /* A standalone button node + the modal it opens (e.g. a copy-pasteable prompt). */
 .pc-buttonrow { margin:1rem 0; }
 .pc-btn-ghost { background:transparent; color:var(--nano-text-muted); border:1px solid var(--nano-edge); }