@godxjp/ui 18.4.0 → 18.6.0

package/dist/components/general/logo.js

@@ -1,21 +1,74 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const Logo = React.forwardRef(
-  ({ glyph = "g", size = "md", label, className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "span",
+function MarkArtwork({ mark, glyph }) {
+  if (mark !== "godx") return /* @__PURE__ */ jsx(Fragment, { children: glyph });
+  return /* @__PURE__ */ jsx(
+    "svg",
     {
-      ref,
-      "data-slot": "logo",
-      "data-size": size,
-      className: cn("ui-logo", className),
-      role: label ? "img" : void 0,
-      "aria-label": label,
-      "aria-hidden": label ? void 0 : true,
-      ...props,
-      children: glyph
+      "data-slot": "logo-artwork",
+      viewBox: "0 0 32 32",
+      width: "32",
+      height: "32",
+      focusable: "false",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M8 7h16a7 7 0 0 1 7 7v4a7 7 0 0 1-7 7H8a7 7 0 0 1-7-7v-4a7 7 0 0 1 7-7Zm0 6a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H8Z"
+        }
+      )
+    }
+  );
+}
+const Logo = React.forwardRef(
+  ({
+    glyph = "g",
+    mark = "glyph",
+    size = "md",
+    tone = "primary",
+    wordmark,
+    label,
+    className,
+    ...props
+  }, ref) => {
+    const hasWordmark = wordmark !== void 0 && wordmark !== null && wordmark !== false;
+    const identity = { "data-mark": mark, "data-size": size, "data-tone": tone };
+    if (hasWordmark) {
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ref,
+          "data-slot": "logo-lockup",
+          ...identity,
+          className: cn("ui-logo-lockup", className),
+          role: label ? "img" : void 0,
+          "aria-label": label,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("span", { "data-slot": "logo", ...identity, className: "ui-logo", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph }) }),
+            /* @__PURE__ */ jsx("span", { "data-slot": "logo-wordmark", "data-logotype": true, className: "ui-logo-wordmark", children: wordmark })
+          ]
+        }
+      );
     }
-  )
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "data-slot": "logo",
+        ...identity,
+        className: cn("ui-logo", className),
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": label ? void 0 : true,
+        ...props,
+        children: /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph })
+      }
+    );
+  }
 );
 Logo.displayName = "Logo";
 export {

package/dist/components/layout/app-shell.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
-export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;
+export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;

package/dist/components/layout/app-shell.js

@@ -15,6 +15,7 @@ function AppShell({
   footer,
   children,
   sidebarCollapsed = false,
+  responsiveNavigation = "drawer",
   mobileNav,
   mobileNavLabel,
   mobileNavOpen,
@@ -22,7 +23,7 @@ function AppShell({
 }) {
   const { t } = useTranslation();
   const drawerNav = mobileNav !== void 0 ? mobileNav : sidebar;
-  const hasDrawer = drawerNav != null;
+  const hasDrawer = responsiveNavigation === "drawer" && drawerNav != null;
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const drawerOpen = mobileNavOpen ?? uncontrolledOpen;
   const setDrawerOpen = onMobileNavOpenChange ?? setUncontrolledOpen;
@@ -39,35 +40,59 @@ function AppShell({
     /* @__PURE__ */ jsx("div", { className: "app-topbar-spacer" }),
     topbarRight !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-right", children: topbarRight })
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: "app-root", "data-collapsed": sidebarCollapsed ? "true" : void 0, children: [
-    /* @__PURE__ */ jsx("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: sidebar }),
-    /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
-      hasDrawer && /* @__PURE__ */ jsxs(Sheet, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
-        /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "sm",
-            className: "app-mobile-nav-trigger hidden max-[900px]:inline-flex",
-            "aria-label": t("layout.appShell.openNav"),
-            "aria-haspopup": "dialog",
-            children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "app-mobile-nav-drawer", children: [
-          /* @__PURE__ */ jsx(SheetHeader, { title: mobileNavLabel ?? t("layout.appShell.navLabel") }),
-          /* @__PURE__ */ jsx(SheetBody, { className: "app-mobile-nav-body", onClick: handleDrawerClick, children: drawerNav })
-        ] })
-      ] }),
-      resolvedTopbar
-    ] }),
-    /* @__PURE__ */ jsxs("main", { className: "app-main", "aria-label": t("layout.appShell.mainLabel"), children: [
-      breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
-      children
-    ] }),
-    footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "app-footer", "aria-label": t("layout.appShell.footerLabel"), children: footer })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "app-root",
+      "data-collapsed": sidebarCollapsed ? "true" : void 0,
+      "data-responsive-navigation": responsiveNavigation,
+      children: [
+        /* @__PURE__ */ jsx("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: sidebar }),
+        /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
+          hasDrawer && /* @__PURE__ */ jsxs(Sheet, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
+            /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "app-mobile-nav-trigger hidden max-[900px]:inline-flex",
+                "aria-label": t("layout.appShell.openNav"),
+                "aria-haspopup": "dialog",
+                children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              SheetContent,
+              {
+                side: "left",
+                width: "var(--app-shell-mobile-nav-width)",
+                className: "app-mobile-nav-drawer",
+                overlayClassName: "app-mobile-nav-overlay",
+                children: [
+                  /* @__PURE__ */ jsx(SheetHeader, { title: mobileNavLabel ?? t("layout.appShell.navLabel") }),
+                  /* @__PURE__ */ jsx(
+                    SheetBody,
+                    {
+                      className: "app-mobile-nav-body px-[var(--app-shell-mobile-nav-inset)]",
+                      onClick: handleDrawerClick,
+                      children: drawerNav
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          resolvedTopbar
+        ] }),
+        /* @__PURE__ */ jsxs("main", { className: "app-main", "aria-label": t("layout.appShell.mainLabel"), tabIndex: 0, children: [
+          breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
+          children
+        ] }),
+        footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "app-footer", "aria-label": t("layout.appShell.footerLabel"), children: footer })
+      ]
+    }
+  );
 }
 export {
   AppShell

package/dist/components/layout/auth-account-summary.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { AuthAccountSummaryProp } from "../../props/components/layout.prop.js";
+export type { AuthAccountSummaryProp, AuthAccountSummaryProp as AuthAccountSummaryProps, } from "../../props/components/layout.prop.js";
+/** Compact, token-owned signed-in identity row for hosted auth and device authorization. */
+export declare const AuthAccountSummary: React.ForwardRefExoticComponent<AuthAccountSummaryProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/auth-account-summary.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { UserRound } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../data-display/avatar.js";
+import { Button } from "../general/button.js";
+const AuthAccountSummary = React.forwardRef(
+  ({ email, avatarSrc, avatarFallback, actionLabel, onAction, disabled, className }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "auth-account-summary",
+      className: cn("ui-auth-account-summary", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-slot": "auth-account-identity", className: "ui-auth-account-identity", children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "ui-auth-account-avatar", "aria-hidden": "true", children: [
+            avatarSrc ? /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: "" }) : null,
+            /* @__PURE__ */ jsx(AvatarFallback, { children: avatarFallback ?? /* @__PURE__ */ jsx(UserRound, { className: "ui-auth-account-fallback-icon", "aria-hidden": "true" }) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "ui-auth-account-email", dir: "auto", title: email, children: email })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", disabled, onClick: onAction, children: actionLabel })
+      ]
+    }
+  )
+);
+AuthAccountSummary.displayName = "AuthAccountSummary";
+export {
+  AuthAccountSummary
+};

package/dist/components/layout/auth-divider.d.ts

@@ -0,0 +1,7 @@
+import type { AuthDividerProp } from "../../props/components/layout.prop.js";
+export type { AuthDividerProp, AuthDividerProp as AuthDividerProps, } from "../../props/components/layout.prop.js";
+/**
+ * AuthDivider — a centred, localized conjunction between two equal separator rules. The grid
+ * composition keeps the label optically and geometrically centred regardless of translation.
+ */
+export declare function AuthDivider({ label, className }: AuthDividerProp): import("react").JSX.Element;

package/dist/components/layout/auth-divider.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function AuthDivider({ label, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "auth-divider",
+      className: cn("ui-auth-divider", className),
+      role: "separator",
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ui-auth-divider-rule", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "ui-auth-divider-label", "aria-hidden": "true", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "ui-auth-divider-rule", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+export {
+  AuthDivider
+};

package/dist/components/layout/auth-footer.d.ts

@@ -0,0 +1,5 @@
+import type { AuthFooterProp } from "../../props/components/layout.prop.js";
+export type { AuthFooterProp } from "../../props/components/layout.prop.js";
+export type { AuthFooterProp as AuthFooterProps } from "../../props/components/layout.prop.js";
+/** Canonical mono legal line shared by hosted identity screens. */
+export declare function AuthFooter({ product, terms, privacy, locale, className }: AuthFooterProp): import("react").JSX.Element;

package/dist/components/layout/auth-footer.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+const SLOTS = ["product", "terms", "privacy", "locale"];
+function AuthFooter({ product, terms, privacy, locale, className }) {
+  const bySlot = { product, terms, privacy, locale };
+  const items = SLOTS.filter(
+    (slot) => bySlot[slot] !== null && bySlot[slot] !== void 0 && bySlot[slot] !== false
+  );
+  return /* @__PURE__ */ jsx("div", { "data-slot": "auth-legal-footer", className: cn("ui-auth-legal-footer", className), children: items.map((slot, index) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": `auth-legal-footer-${slot}`,
+      className: "ui-auth-legal-footer-item",
+      children: [
+        index > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-auth-legal-footer-separator", children: "\xB7" }) : null,
+        bySlot[slot]
+      ]
+    },
+    slot
+  )) });
+}
+export {
+  AuthFooter
+};

package/dist/components/layout/auth-identity.d.ts

@@ -0,0 +1,5 @@
+import type { AuthIdentityProp } from "../../props/components/layout.prop.js";
+export type { AuthIdentityProp } from "../../props/components/layout.prop.js";
+export type { AuthIdentityProp as AuthIdentityProps } from "../../props/components/layout.prop.js";
+/** Canonical hosted-identity mark, heading and optional real requesting-client context. */
+export declare function AuthIdentity({ title, requester, className }: AuthIdentityProp): import("react").JSX.Element;

package/dist/components/layout/auth-identity.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Clock } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Heading, Logo, Text } from "../general/index.js";
+function AuthIdentity({ title, requester, className }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-identity", className: cn("ui-auth-identity", className), children: [
+    /* @__PURE__ */ jsx(Logo, { mark: "godx", tone: "success" }),
+    /* @__PURE__ */ jsx(Heading, { level: 1, children: title }),
+    requester !== void 0 && requester !== null ? /* @__PURE__ */ jsxs("div", { "data-slot": "auth-requester", className: "ui-auth-requester", children: [
+      /* @__PURE__ */ jsx("span", { "data-slot": "auth-requester-icon", className: "ui-auth-requester-icon", children: /* @__PURE__ */ jsx(Clock, { "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", children: requester })
+    ] }) : null
+  ] });
+}
+export {
+  AuthIdentity
+};

package/dist/components/layout/auth-shell.d.ts

@@ -7,5 +7,13 @@ export type { AuthShellProp, AuthShellProp as AuthShellProps, } from "../../prop
  * touch floor) and the auth heading is bumped up, so forms read at the right size — replacing a
  * consumer's `.auth-shell-*` / `.ui-auth-scope` classes. Motion is delegated to `Reveal` (wrap the
  * card) so `prefers-reduced-motion` is honoured in one place.
+ *
+ * `preset` names the flow MEASURE (card max-width + desktop/mobile page gutters) so a consumer
+ * never overrides page geometry by hand: `"login"` = SCR-001's stable identity/card/footer anchor
+ * for standalone and real requester states; `"device-authorization"` = 380px card with a 5px
+ * inline gutter at 390px; `"context-selection"` = 25rem card, edge-to-edge on mobile;
+ * `"account-recovery"` = the 432px SCR-008 panel measure shared by password recovery and the
+ * sign-in MFA challenge, with a 15px inline gutter at 390px. It is orthogonal to `variant` —
+ * combine `variant="canonical"` with any preset.
  */
-export declare function AuthShell({ brand, footer, children, className }: AuthShellProp): import("react").JSX.Element;
+export declare function AuthShell({ brand, footer, children, variant, preset, density, className, }: AuthShellProp): import("react").JSX.Element;

package/dist/components/layout/auth-shell.js

@@ -2,13 +2,32 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-function AuthShell({ brand, footer, children, className }) {
+function AuthShell({
+  brand,
+  footer,
+  children,
+  variant = "default",
+  preset = "default",
+  density,
+  className
+}) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-shell", className: cn("ui-auth-shell", className), children: [
-    brand !== void 0 && /* @__PURE__ */ jsx("header", { className: "ui-auth-shell-bar", "aria-label": t("layout.authShell.brandLabel"), children: brand }),
-    /* @__PURE__ */ jsx("main", { className: "ui-auth-shell-main", "aria-label": t("layout.authShell.mainLabel"), children: /* @__PURE__ */ jsx("div", { className: "ui-auth-shell-card", children }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "ui-auth-shell-footer", "aria-label": t("layout.authShell.footerLabel"), children: footer })
-  ] });
+  const resolvedDensity = density ?? (variant === "canonical" ? "compact" : "comfortable");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "auth-shell",
+      "data-variant": variant,
+      "data-preset": preset === "default" ? void 0 : preset,
+      "data-density": resolvedDensity,
+      className: cn("ui-auth-shell", className),
+      children: [
+        brand !== void 0 && /* @__PURE__ */ jsx("header", { className: "ui-auth-shell-bar", "aria-label": t("layout.authShell.brandLabel"), children: brand }),
+        /* @__PURE__ */ jsx("main", { className: "ui-auth-shell-main", "aria-label": t("layout.authShell.mainLabel"), children: /* @__PURE__ */ jsx("div", { className: "ui-auth-shell-card", children }) }),
+        footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "ui-auth-shell-footer", "aria-label": t("layout.authShell.footerLabel"), children: footer })
+      ]
+    }
+  );
 }
 export {
   AuthShell

package/dist/components/layout/auth-stack.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from "react";
+export type AuthStackProps = HTMLAttributes<HTMLDivElement>;
+/** Canonical 12px vertical rhythm for the direct sections inside an auth card. */
+export declare function AuthStack({ className, ...props }: AuthStackProps): import("react").JSX.Element;

package/dist/components/layout/auth-stack.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function AuthStack({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "auth-stack", className: cn("ui-auth-stack", className), ...props });
+}
+export {
+  AuthStack
+};

package/dist/components/layout/centered-shell.d.ts

@@ -14,9 +14,12 @@ export type { CenteredShellProp, CenteredShellProp as CenteredShellProps, } from
  * `.app-topbar` (padding-inline · border · backdrop) WITHOUT a sidebar, a scrollable `main` whose
  * content is a **centred column** of a configurable medium width (`width` = sm|md|lg, all wider than
  * the 24rem auth card) **top-aligned** so sections flow and scroll (not vertically centred), and an
- * optional footer (contentinfo). A hosted account page thus needs ZERO custom CSS and never
+ * optional footer (contentinfo) — or, with `align="center"`, the column centred in the viewport for
+ * a SYSTEM-level standalone surface (a 500/503 error page, a maintenance notice), so that full-page
+ * geometry stays package-owned instead of a consumer re-implementing `min-h-dvh` + flex centring.
+ * A hosted account page thus needs ZERO custom CSS and never
  * hand-rolls a bar (the bare `Topbar` primitive ships no padding — the `.ui-topbar` zero-inset
  * footgun). Layout-only: delegate motion to `Reveal` (wrap a section) so `prefers-reduced-motion`
  * is honoured in one place.
  */
-export declare function CenteredShell({ topbar, footer, children, width, className, }: CenteredShellProp): import("react").JSX.Element;
+export declare function CenteredShell({ topbar, footer, children, width, align, preset, className, }: CenteredShellProp): import("react").JSX.Element;

package/dist/components/layout/centered-shell.js

@@ -7,28 +7,38 @@ function CenteredShell({
   footer,
   children,
   width = "md",
+  align = "start",
+  preset = "default",
   className
 }) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "centered-shell", className: cn("ui-centered-shell", className), children: [
-    topbar !== void 0 && /* @__PURE__ */ jsx(
-      "header",
-      {
-        className: "ui-centered-shell-bar ui-scale-fixed",
-        "aria-label": t("layout.centeredShell.headerLabel"),
-        children: topbar
-      }
-    ),
-    /* @__PURE__ */ jsx("main", { className: "ui-centered-shell-main", "aria-label": t("layout.centeredShell.mainLabel"), children: /* @__PURE__ */ jsx("div", { className: "ui-centered-shell-column", "data-width": width, children }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx(
-      "footer",
-      {
-        className: "ui-centered-shell-footer",
-        "aria-label": t("layout.centeredShell.footerLabel"),
-        children: footer
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "centered-shell",
+      "data-preset": preset === "default" ? void 0 : preset,
+      className: cn("ui-centered-shell", className),
+      children: [
+        topbar !== void 0 && /* @__PURE__ */ jsx(
+          "header",
+          {
+            className: "ui-centered-shell-bar ui-scale-fixed",
+            "aria-label": t("layout.centeredShell.headerLabel"),
+            children: topbar
+          }
+        ),
+        /* @__PURE__ */ jsx("main", { className: "ui-centered-shell-main", "aria-label": t("layout.centeredShell.mainLabel"), children: /* @__PURE__ */ jsx("div", { className: "ui-centered-shell-column", "data-width": width, "data-align": align, children }) }),
+        footer !== void 0 && /* @__PURE__ */ jsx(
+          "footer",
+          {
+            className: "ui-centered-shell-footer",
+            "aria-label": t("layout.centeredShell.footerLabel"),
+            children: footer
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   CenteredShell

package/dist/components/layout/error-surface.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import type { ErrorSurfaceProp } from "../../props/components/layout.prop.js";
+export type { ErrorSurfaceMaintenanceProp, ErrorSurfaceProp, ErrorSurfaceProp as ErrorSurfaceProps, } from "../../props/components/layout.prop.js";
+export type { ErrorSurfaceModeProp, ErrorSurfaceStatusProp } from "../../props/vocabulary/index.js";
+/**
+ * ErrorSurface — the package-owned semantic exception surface for **403 · 404 · 500 · 503**
+ * (gh#221, gh#251).
+ *
+ * It exists because the alternative — every app composing `EmptyState` + `Flex` + `Text` inside a
+ * hand-picked shell — is unimportable: a consumer cannot `import` a docs page, so the four
+ * exception screens drifted per application (a generic `Card` in an `AuthShell`, a local
+ * `.canonical-auth-card`, a bespoke `min-h-dvh` class). What the surface owns is the CONTRACT the
+ * composition kept losing:
+ *
+ * - **`mode` is the shell contract.** `application` (403/404) renders the surface as the BODY you
+ *   place inside the `AppShell` the route already provides, so the sidebar, topbar and breadcrumb
+ *   are PRESERVED — it never reconstructs navigation chrome, because nav data and the user menu are
+ *   consumer-owned and a component cannot manufacture them. `system` (500/503) owns the page and
+ *   renders `CenteredShell align="center"`, so the viewport-centred geometry at 1440 / 1024 / 390
+ *   is package-owned and the consumer writes no `min-h-dvh`, no flex-centring class, no media query.
+ * - **Exactly one recovery action**, structurally (see `singleAction`).
+ * - **Semantic metadata slots** instead of free-form paragraphs: `requestId` (mono/tabular so a
+ *   support id is read out accurately), `permission` and `organization` (which of the two a 403 is
+ *   actually about), and `maintenance` (ISO-8601 + IANA formatted through `Intl.DateTimeFormat`,
+ *   with an optional labelled `Progress` meter). Each is a `<dt>`/`<dd>` pair, so the label↔value
+ *   relationship survives for a screen reader instead of being a colon in a sentence.
+ * - **Valid heading order by default** — `h2` under a `PageContainer` `h1` in `application` mode,
+ *   `h1` on a `system` page — and the status code announced as "HTTP status 403", not "403".
+ *
+ * PRODUCT COPY stays consumer-owned: `title` / `description` / `action` come from the app's own
+ * `t()`. The surface localizes only its OWN metadata labels. It holds no state, runs no effect and
+ * opens no portal, so it renders fully server-side — an exception page must be readable before
+ * hydration.
+ */
+export declare const ErrorSurface: React.ForwardRefExoticComponent<ErrorSurfaceProp & React.RefAttributes<HTMLDivElement>>;