@godxjp/ui 18.5.0 → 18.7.0

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,51 +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",
-            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 })
-  ] });
+  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-shell.d.ts

@@ -9,8 +9,11 @@ export type { AuthShellProp, AuthShellProp as AuthShellProps, } from "../../prop
  * 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 `--auth-shell-card-max-width` by hand: `"device-authorization"` = 380px card with
- * a 5px inline gutter at 390px; `"context-selection"` = 25rem card, edge-to-edge on mobile;
+ * never overrides page geometry by hand: `"login"` = SCR-001's stable identity/card/footer anchor
+ * for standalone and real requester states; `"registration"` = the 360px sign-up measure, the only
+ * START-aligned preset (a tall sign-up card must scroll, not clip its own top above the scroll
+ * origin) and the only one with its own footer clearance; `"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.

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

@@ -22,4 +22,4 @@ export type { CenteredShellProp, CenteredShellProp as CenteredShellProps, } from
  * 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, align, 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

@@ -8,28 +8,37 @@ function CenteredShell({
   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, "data-align": align, 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>>;

package/dist/components/layout/error-surface.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SearchX, ServerCrash, ShieldAlert, Wrench } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { EmptyState } from "../data-display/empty-state.js";
+import { Progress } from "../data-display/progress.js";
+import { Text } from "../general/typography.js";
+import { CenteredShell } from "./centered-shell.js";
+const STATUS_META = {
+  403: { icon: ShieldAlert, tone: "warning" },
+  404: { icon: SearchX, tone: "muted" },
+  500: { icon: ServerCrash, tone: "destructive" },
+  503: { icon: Wrench, tone: "warning" }
+};
+function singleAction(action) {
+  const flattened = React.Children.toArray(action).flatMap(
+    (child) => React.isValidElement(child) && child.type === React.Fragment ? React.Children.toArray(child.props.children) : [child]
+  );
+  if (flattened.length > 1 && process.env.NODE_ENV !== "production") {
+    console.error(
+      "[@godxjp/ui] ErrorSurface: `action` takes EXACTLY ONE recovery action. The extra elements were dropped. Put support contact or secondary guidance in `description`."
+    );
+  }
+  return flattened[0] ?? null;
+}
+function formatMaintenanceWindow(maintenance, locale) {
+  const options = {
+    dateStyle: "medium",
+    timeStyle: "short",
+    ...maintenance.timeZone ? { timeZone: maintenance.timeZone } : {}
+  };
+  const start = new Date(maintenance.start);
+  if (Number.isNaN(start.getTime())) return maintenance.start;
+  const formatter = new Intl.DateTimeFormat(locale, options);
+  if (maintenance.end === void 0) return formatter.format(start);
+  const end = new Date(maintenance.end);
+  if (Number.isNaN(end.getTime())) return formatter.format(start);
+  return formatter.formatRange(start, end);
+}
+const ErrorSurface = React.forwardRef(
+  function ErrorSurface2({
+    mode,
+    status,
+    title,
+    description,
+    action,
+    icon,
+    tone,
+    titleLevel,
+    requestId,
+    permission,
+    organization,
+    maintenance,
+    brand,
+    footer,
+    width = "sm",
+    id,
+    className
+  }, ref) {
+    const { t, locale } = useTranslation();
+    const meta = STATUS_META[status];
+    const resolvedIcon = icon ?? meta.icon;
+    const resolvedTone = tone ?? meta.tone;
+    const resolvedTitleLevel = titleLevel ?? (mode === "system" ? 1 : 2);
+    const maintenanceWindow = maintenance === void 0 ? void 0 : formatMaintenanceWindow(maintenance, locale);
+    const maintenanceProgress = maintenance?.progress;
+    const hasProgress = typeof maintenanceProgress === "number" && Number.isFinite(maintenanceProgress);
+    const progressLabel = hasProgress ? t("layout.errorSurface.maintenanceProgress", {
+      percent: new Intl.NumberFormat(locale, {
+        style: "percent",
+        maximumFractionDigits: 0
+      }).format(Math.max(0, Math.min(100, maintenanceProgress)) / 100)
+    }) : void 0;
+    const hasMetadata = requestId !== void 0 || permission !== void 0 || organization !== void 0 || maintenanceWindow !== void 0;
+    const surface = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        "data-slot": "error-surface",
+        "data-mode": mode,
+        "data-status": status,
+        className: cn("ui-error-surface", className),
+        children: [
+          brand !== void 0 && mode === "system" && /* @__PURE__ */ jsx("div", { className: "ui-error-surface-brand", children: brand }),
+          /* @__PURE__ */ jsxs(
+            Text,
+            {
+              as: "p",
+              size: "sm",
+              tone: "muted",
+              weight: "medium",
+              mono: true,
+              tabular: true,
+              className: "ui-error-surface-status",
+              children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: status }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("layout.errorSurface.statusLabel", { status: String(status) }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            EmptyState,
+            {
+              icon: resolvedIcon,
+              tone: resolvedTone,
+              titleLevel: resolvedTitleLevel,
+              title,
+              description,
+              action: singleAction(action),
+              className: "ui-error-surface-body"
+            }
+          ),
+          hasMetadata && /* A description list, not a sentence: each metadata row keeps a machine-readable
+           * label↔value pair, so "Request ID / 01J9Z…" is navigable instead of being one run-on
+           * paragraph. `<div>` wrappers around dt/dd are valid HTML5 and give each row its box. */
+          /* @__PURE__ */ jsxs("dl", { className: "ui-error-surface-meta", children: [
+            requestId !== void 0 && /* @__PURE__ */ jsxs("div", { className: "ui-error-surface-meta-row", children: [
+              /* @__PURE__ */ jsx(Text, { as: "dt", size: "xs", tone: "muted", children: t("layout.errorSurface.requestId") }),
+              /* @__PURE__ */ jsx(Text, { as: "dd", size: "xs", tone: "muted", mono: true, tabular: true, children: requestId })
+            ] }),
+            permission !== void 0 && /* @__PURE__ */ jsxs("div", { className: "ui-error-surface-meta-row", children: [
+              /* @__PURE__ */ jsx(Text, { as: "dt", size: "xs", tone: "muted", children: t("layout.errorSurface.permission") }),
+              /* @__PURE__ */ jsx(Text, { as: "dd", size: "xs", tone: "muted", mono: true, children: permission })
+            ] }),
+            organization !== void 0 && /* @__PURE__ */ jsxs("div", { className: "ui-error-surface-meta-row", children: [
+              /* @__PURE__ */ jsx(Text, { as: "dt", size: "xs", tone: "muted", children: t("layout.errorSurface.organization") }),
+              /* @__PURE__ */ jsx(Text, { as: "dd", size: "xs", tone: "muted", children: organization })
+            ] }),
+            maintenanceWindow !== void 0 && maintenance !== void 0 && /* @__PURE__ */ jsxs("div", { className: "ui-error-surface-meta-row", children: [
+              /* @__PURE__ */ jsx(Text, { as: "dt", size: "xs", tone: "muted", children: t("layout.errorSurface.maintenanceWindow") }),
+              /* @__PURE__ */ jsx(Text, { as: "dd", size: "xs", tone: "muted", children: /* @__PURE__ */ jsx("time", { dateTime: maintenance.start, children: maintenanceWindow }) })
+            ] })
+          ] }),
+          hasProgress && progressLabel !== void 0 && /* @__PURE__ */ jsx("div", { className: "ui-error-surface-progress", children: /* @__PURE__ */ jsx(
+            Progress,
+            {
+              value: Math.max(0, Math.min(100, maintenanceProgress)),
+              label: progressLabel,
+              tone: "warning"
+            }
+          ) })
+        ]
+      }
+    );
+    if (mode === "application") return surface;
+    return /* @__PURE__ */ jsx(CenteredShell, { align: "center", width, ...footer !== void 0 ? { footer } : {}, children: surface });
+  }
+);
+ErrorSurface.displayName = "ErrorSurface";
+export {
+  ErrorSurface
+};

package/dist/components/layout/flex.d.ts

@@ -1,3 +1,3 @@
 import type { FlexProp } from "../../props/components/layout.prop.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
-export declare function Flex({ direction, gap, align, justify, wrap, className, children, ...props }: FlexProp): import("react").JSX.Element;
+export declare function Flex({ direction, gap, align, justify, wrap, hideBelow, hideFrom, className, children, ...props }: FlexProp): import("react").JSX.Element;

package/dist/components/layout/flex.js

@@ -7,6 +7,8 @@ function Flex({
   align,
   justify,
   wrap = false,
+  hideBelow,
+  hideFrom,
   className,
   children,
   ...props
@@ -18,6 +20,8 @@ function Flex({
       "data-align": align,
       "data-justify": justify,
       "data-wrap": wrap ? "true" : void 0,
+      "data-hide-below": hideBelow,
+      "data-hide-from": hideFrom,
       className: cn("ui-flex", flexGapClass[gap], className),
       ...props,
       children

package/dist/components/layout/index.d.ts

@@ -1,5 +1,7 @@
 export { PageContainer } from "./page-container.js";
 export type { PageContainerProp, PageContainerProps, BreadcrumbItem, BreadcrumbItemProp, } from "./page-container.js";
+export { PageHeader } from "./page-header.js";
+export type { PageHeaderProp, PageHeaderProps } from "./page-header.js";
 export { Flex } from "./flex.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProps, } from "./flex.js";
 export { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
@@ -14,6 +16,8 @@ export { AuthDivider } from "./auth-divider.js";
 export type { AuthDividerProp, AuthDividerProps } from "./auth-divider.js";
 export { AuthIdentity } from "./auth-identity.js";
 export type { AuthIdentityProp, AuthIdentityProps } from "./auth-identity.js";
+export { AuthAccountSummary } from "./auth-account-summary.js";
+export type { AuthAccountSummaryProp, AuthAccountSummaryProps } from "./auth-account-summary.js";
 export { AuthFooter } from "./auth-footer.js";
 export type { AuthFooterProp, AuthFooterProps } from "./auth-footer.js";
 export { AuthStack } from "./auth-stack.js";
@@ -21,6 +25,9 @@ export type { AuthStackProps } from "./auth-stack.js";
 export { CenteredShell } from "./centered-shell.js";
 export type { CenteredShellProp, CenteredShellProps } from "./centered-shell.js";
 export type { CenteredShellWidthProp, CenteredShellAlignProp } from "../../props/vocabulary/index.js";
+export { ErrorSurface } from "./error-surface.js";
+export type { ErrorSurfaceMaintenanceProp, ErrorSurfaceProp, ErrorSurfaceProps, } from "./error-surface.js";
+export type { ErrorSurfaceModeProp, ErrorSurfaceStatusProp } from "../../props/vocabulary/index.js";
 export { Breadcrumb } from "./breadcrumb.js";
 export type { BreadcrumbProps } from "./breadcrumb.js";
 export { createSidebarLink, Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";

package/dist/components/layout/index.js

@@ -1,4 +1,5 @@
 import { PageContainer } from "./page-container.js";
+import { PageHeader } from "./page-header.js";
 import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { AppShell } from "./app-shell.js";
@@ -6,9 +7,11 @@ import { OrgSwitcher } from "./org-switcher.js";
 import { AuthShell } from "./auth-shell.js";
 import { AuthDivider } from "./auth-divider.js";
 import { AuthIdentity } from "./auth-identity.js";
+import { AuthAccountSummary } from "./auth-account-summary.js";
 import { AuthFooter } from "./auth-footer.js";
 import { AuthStack } from "./auth-stack.js";
 import { CenteredShell } from "./centered-shell.js";
+import { ErrorSurface } from "./error-surface.js";
 import { Breadcrumb } from "./breadcrumb.js";
 import { createSidebarLink, Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
 import { Topbar } from "./topbar.js";
@@ -21,6 +24,7 @@ import { LegalDocumentShell } from "./legal-document-shell.js";
 export {
   AppShell,
   AspectRatio,
+  AuthAccountSummary,
   AuthDivider,
   AuthFooter,
   AuthIdentity,
@@ -28,11 +32,13 @@ export {
   AuthStack,
   Breadcrumb,
   CenteredShell,
+  ErrorSurface,
   Flex,
   LegalDocumentShell,
   MasterDetail,
   OrgSwitcher,
   PageContainer,
+  PageHeader,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, headerLayout, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, meta, headerLoading, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, preset, headerLayout, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -1,10 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { ChevronRight } from "lucide-react";
-import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { densityClass, pageContainerVariantClass } from "../../lib/variants.js";
+import { PageHeader } from "./page-header.js";
 function scrollParent(el) {
   let node = el?.parentElement ?? null;
   while (node) {
@@ -36,6 +35,8 @@ function PageContainerInset({ className, children, ...props }) {
 function PageContainerRoot({
   title,
   subtitle,
+  meta,
+  headerLoading,
   extra,
   footer,
   breadcrumb,
@@ -44,7 +45,9 @@ function PageContainerRoot({
   linkComponent: LinkComponent = "a",
   density,
   variant = "default",
+  preset = "default",
   headerLayout = "stack",
+  measure = "default",
   stickyFooter = false,
   footerReveal = "always",
   fill = false,
@@ -53,10 +56,11 @@ function PageContainerRoot({
 }) {
   const reveal = stickyFooter && footer != null && footerReveal === "onScroll";
   const { headerRef, revealed } = useFooterReveal(reveal);
-  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-preset": preset,
+      "data-measure": measure,
       "data-revealed": revealed ? "true" : void 0,
       className: cn(
         "ui-page-container",
@@ -70,44 +74,22 @@ function PageContainerRoot({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "ui-page-header", "data-layout": headerLayout, children: [
-          breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
-            "nav",
-            {
-              "aria-label": breadcrumbLabel ?? breadcrumbAriaLabel ?? t("navigation.breadcrumb.ariaLabel"),
-              className: "ui-breadcrumb",
-              children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
-                const isLast = i === breadcrumb.length - 1;
-                return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", children: [
-                  item.to && !isLast ? /* @__PURE__ */ jsx(
-                    LinkComponent,
-                    {
-                      href: item.to,
-                      to: item.to,
-                      className: "hover:text-foreground hover:underline",
-                      children: item.label
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: isLast ? "text-foreground" : "",
-                      "aria-current": isLast ? "page" : void 0,
-                      children: item.label
-                    }
-                  ),
-                  !isLast && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3", "aria-hidden": "true" })
-                ] }, i);
-              }) })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
-            /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading min-w-0", children: [
-              /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
-              subtitle && /* @__PURE__ */ jsx("p", { className: "ui-page-subtitle", children: subtitle })
-            ] }),
-            extra && /* @__PURE__ */ jsx("div", { className: "ui-page-header-extra", children: extra })
-          ] })
-        ] }),
+        /* @__PURE__ */ jsx(
+          PageHeader,
+          {
+            ref: headerRef,
+            title,
+            subtitle,
+            meta,
+            extra,
+            breadcrumb,
+            breadcrumbLabel,
+            breadcrumbAriaLabel,
+            linkComponent: LinkComponent,
+            layout: headerLayout,
+            loading: headerLoading
+          }
+        ),
         children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
         footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", children: footer })
       ]