@nimblebrain/synapse 0.16.0 → 0.17.1

package/dist/ui/index.d.cts

@@ -296,7 +296,7 @@ declare const ListDetailLayout: typeof ListDetailLayoutRoot & {
     Back: typeof Back;
 };
 
-interface PageLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+interface PageLayoutProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     /** The trail. Omit at the top level, which has nothing above it to name. */
     crumbs?: Crumb[];
     title: ReactNode;

package/dist/ui/index.d.ts

@@ -296,7 +296,7 @@ declare const ListDetailLayout: typeof ListDetailLayoutRoot & {
     Back: typeof Back;
 };
 
-interface PageLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+interface PageLayoutProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     /** The trail. Omit at the top level, which has nothing above it to name. */
     crumbs?: Crumb[];
     title: ReactNode;

package/dist/ui/index.js

@@ -1555,41 +1555,54 @@ function PageLayout({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: { display: "flex", flexDirection: "column", gap: "1.1rem", minWidth: 0, ...style },
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(
-          PageHeader,
-          {
-            crumbs,
-            title,
-            status,
-            actions,
-            description,
-            descriptionLines
-          }
-        ),
-        tabs,
-        toolbar ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "0.5rem",
-              flexWrap: "wrap",
-              minWidth: 0,
-              marginBottom: "-0.35rem"
-            },
-            children: toolbar
-          }
-        ) : null,
-        children
-      ]
-    }
+  return (
+    // A `<section>`, not a `<div>`, and it is the header below that makes it load-bearing.
+    // `<header>` maps to the `banner` landmark UNLESS it descends from sectioning content, so
+    // a page inside a page — a `PageLayout` in a pane of one — produced TWO banners, both
+    // claiming to head the document. That is the same defect as the app-chrome bar this
+    // layout exists without, one layer down and invisible on screen: it shows up only in the
+    // landmark list a screen-reader user navigates by.
+    //
+    // Scoping it here rather than asking callers to wrap is the point. A consuming app hit
+    // this, diagnosed it, and wrapped its own instance — correct, and not a thing every app
+    // should have to rediscover. An embedded app is not the document anyway: the host owns
+    // the real banner, and what this renders is a section of the host's page.
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        style: { display: "flex", flexDirection: "column", gap: "1.1rem", minWidth: 0, ...style },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            PageHeader,
+            {
+              crumbs,
+              title,
+              status,
+              actions,
+              description,
+              descriptionLines
+            }
+          ),
+          tabs,
+          toolbar ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                flexWrap: "wrap",
+                minWidth: 0,
+                marginBottom: "-0.35rem"
+              },
+              children: toolbar
+            }
+          ) : null,
+          children
+        ]
+      }
+    )
   );
 }
 var SidebarCtx = createContext(null);