@godxjp/ui 18.3.0 → 18.5.0

package/dist/components/feedback/sheet.js

@@ -4,10 +4,38 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
+import { useMediaQuery } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
 import { overlayHeaderToneClass } from "./overlay-header-tone.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
+const SHEET_BREAKPOINT_TOKEN = "--sheet-responsive-breakpoint-width";
+const SHEET_BREAKPOINT_FALLBACK_QUERY = "(max-width: 768px)";
+function cssLengthToPx(value, rootFontSize) {
+  const match = /^(-?\d*\.?\d+)(px|rem|em)?$/.exec(value.trim());
+  if (match == null) return void 0;
+  const amount = Number(match[1]);
+  if (!Number.isFinite(amount)) return void 0;
+  return match[2] === "rem" || match[2] === "em" ? amount * rootFontSize : amount;
+}
+function readSheetBreakpointQuery() {
+  if (typeof document === "undefined" || typeof window.getComputedStyle !== "function") {
+    return SHEET_BREAKPOINT_FALLBACK_QUERY;
+  }
+  const rootStyle = window.getComputedStyle(document.documentElement);
+  const rootFontSize = cssLengthToPx(rootStyle.fontSize || "16px", 16) ?? 16;
+  const px = cssLengthToPx(rootStyle.getPropertyValue(SHEET_BREAKPOINT_TOKEN), rootFontSize);
+  return px == null ? SHEET_BREAKPOINT_FALLBACK_QUERY : `(max-width: ${String(px)}px)`;
+}
+function useSheetResponsiveMode(responsive = "side") {
+  const [query, setQuery] = React.useState(SHEET_BREAKPOINT_FALLBACK_QUERY);
+  React.useEffect(() => {
+    setQuery(readSheetBreakpointQuery());
+  }, []);
+  const compact = useMediaQuery(query);
+  if (responsive === "side" || responsive === "bottom") return responsive;
+  return compact ? "bottom" : "side";
+}
 function Sheet(props) {
   return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -44,9 +72,9 @@ const sheetVariants = cva(
       // the Radix/shadcn Sheet convention. The physical classes below are intended.
       side: {
         /* rtl-ignore: named physical side */
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md",
+        right: "inset-y-0 right-0 h-full w-[min(var(--sheet-width-default),100%)] max-w-none border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
         /* rtl-ignore: named physical side */
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md",
+        left: "inset-y-0 left-0 h-full w-[min(var(--sheet-width-default),100%)] max-w-none border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
         top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
         bottom: "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
       }
@@ -55,23 +83,41 @@ const sheetVariants = cva(
   }
 );
 const SheetContent = React.forwardRef(
-  ({ side = "right", className, children, showCloseButton = true, width, style, ...props }, ref) => {
+  ({
+    side = "right",
+    className,
+    children,
+    showCloseButton = true,
+    overlayClassName,
+    width,
+    responsive = "side",
+    style,
+    ...props
+  }, ref) => {
     const { t } = useTranslation();
-    const horizontal = side === "left" || side === "right";
+    const presentation = useSheetResponsiveMode(responsive);
+    const resolvedSide = presentation === "bottom" ? "bottom" : side;
+    const bottomSheet = responsive !== "side" && presentation === "bottom";
+    const horizontal = resolvedSide === "left" || resolvedSide === "right";
     const widthSet = width != null && horizontal;
     const mergedStyle = widthSet ? { ...style, ["--sheet-width"]: toCssLength(width) } : style;
     return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-      /* @__PURE__ */ jsx(SheetOverlay, {}),
+      /* @__PURE__ */ jsx(SheetOverlay, { className: overlayClassName }),
       /* @__PURE__ */ jsxs(
         DialogPrimitive.Content,
         {
           ref,
           "data-slot": "sheet-content",
+          "data-responsive": responsive,
+          "data-side": resolvedSide,
           style: mergedStyle,
           className: cn(
-            sheetVariants({ side }),
+            sheetVariants({ side: resolvedSide }),
             // `width` caps at the viewport: full-width panel on a small screen, capped on a large one.
             widthSet && "w-[min(var(--sheet-width),100%)] max-w-none sm:max-w-none",
+            // Only the RESPONSIVE bottom presentation is capped — a plain `side="bottom"` sheet keeps
+            // its content-sized height so existing usage is untouched.
+            bottomSheet && "max-h-[var(--sheet-bottom-max-height)]",
             className
           ),
           ...props,
@@ -193,5 +239,6 @@ export {
   SheetOverlay,
   SheetPortal,
   SheetTitle,
-  SheetTrigger
+  SheetTrigger,
+  useSheetResponsiveMode
 };

package/dist/components/feedback/two-factor-setup.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export type TwoFactorSetupLabels = {
+    title: React.ReactNode;
+    description: React.ReactNode;
+    qrLabel: string;
+    manualKeyLabel: React.ReactNode;
+    codeLabel: string;
+    codePlaceholder?: string;
+    recoveryNotice: React.ReactNode;
+    cancel: React.ReactNode;
+    confirm: React.ReactNode;
+    acknowledge: React.ReactNode;
+};
+export type TwoFactorSetupProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    qrValue?: string;
+    manualKey: string;
+    code: string;
+    onCodeChange: (code: string) => void;
+    onConfirm: () => void;
+    recoveryCodes?: string[];
+    onAcknowledge: () => void;
+    labels: TwoFactorSetupLabels;
+    pending?: boolean;
+};
+/**
+ * Canonical two-factor setup overlay. Network requests and state persistence remain application
+ * concerns; this component only owns the QR/manual-key/OTP/recovery presentation contract.
+ */
+export declare function TwoFactorSetup({ open, onOpenChange, qrValue, manualKey, code, onCodeChange, onConfirm, recoveryCodes, onAcknowledge, labels, pending, }: TwoFactorSetupProps): React.JSX.Element;

package/dist/components/feedback/two-factor-setup.js

@@ -0,0 +1,97 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CredentialReveal } from "../data-display/credential-reveal.js";
+import { QrCode } from "../data-display/qr-code.js";
+import { Input } from "../data-entry/input.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./dialog.js";
+function TwoFactorSetup({
+  open,
+  onOpenChange,
+  qrValue,
+  manualKey,
+  code,
+  onCodeChange,
+  onConfirm,
+  recoveryCodes = [],
+  onAcknowledge,
+  labels,
+  pending = false
+}) {
+  const showingRecovery = recoveryCodes.length > 0;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "ui-two-factor-setup",
+      overlayClassName: "ui-two-factor-setup-overlay",
+      showCloseButton: !pending,
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: labels.description })
+        ] }),
+        /* @__PURE__ */ jsx(DialogBody, { children: showingRecovery ? /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "ui-two-factor-setup-recovery",
+            "aria-live": "polite",
+            "data-state": "recovery",
+            children: [
+              /* @__PURE__ */ jsx(Text, { as: "p", tone: "muted", children: labels.recoveryNotice }),
+              /* @__PURE__ */ jsx("ul", { className: "ui-two-factor-setup-recovery-codes", children: recoveryCodes.map((recoveryCode) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: recoveryCode }) }, recoveryCode)) })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "ui-two-factor-setup-enrollment", "data-state": "enrollment", children: [
+          /* @__PURE__ */ jsx(Text, { as: "p", tone: "muted", children: labels.description }),
+          /* @__PURE__ */ jsxs("div", { className: "ui-two-factor-setup-grid", children: [
+            qrValue ? /* @__PURE__ */ jsx(QrCode, { value: qrValue, label: labels.qrLabel, size: "sm" }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "ui-two-factor-setup-fields", children: [
+              /* @__PURE__ */ jsx(
+                CredentialReveal,
+                {
+                  secret: manualKey,
+                  label: labels.manualKeyLabel,
+                  warning: null,
+                  defaultRevealed: true,
+                  size: "sm"
+                }
+              ),
+              /* @__PURE__ */ jsxs("label", { className: "ui-two-factor-setup-code", children: [
+                /* @__PURE__ */ jsx(Text, { as: "span", size: "sm", weight: "medium", children: labels.codeLabel }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: code,
+                    onChange: (event) => onCodeChange(event.target.value.replace(/\D/g, "").slice(0, 6)),
+                    inputMode: "numeric",
+                    autoComplete: "one-time-code",
+                    maxLength: 6,
+                    placeholder: labels.codePlaceholder,
+                    "aria-label": labels.codeLabel
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { as: "p", size: "sm", tone: "muted", className: "ui-two-factor-setup-notice", children: labels.recoveryNotice })
+        ] }) }),
+        /* @__PURE__ */ jsx(DialogFooter, { children: showingRecovery ? /* @__PURE__ */ jsx(Button, { onClick: onAcknowledge, children: labels.acknowledge }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: pending, children: labels.cancel }),
+          /* @__PURE__ */ jsx(Button, { onClick: onConfirm, disabled: pending || code.length !== 6, loading: pending, children: labels.confirm })
+        ] }) })
+      ]
+    }
+  ) });
+}
+export {
+  TwoFactorSetup
+};

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

@@ -3,6 +3,6 @@ export type { ButtonProps } from "./button.js";
 export { Text, Heading } from "./typography.js";
 export type { TextProps, HeadingProps, TextProp, HeadingProp } from "./typography.js";
 export { Logo } from "./logo.js";
-export type { LogoProps, LogoSize } from "./logo.js";
+export type { LogoMark, LogoProps, LogoSize, LogoTone } from "./logo.js";
 export { Reveal } from "./reveal.js";
 export type { RevealProp, RevealProps } from "./reveal.js";

package/dist/components/general/logo.d.ts

@@ -1,27 +1,61 @@
 import * as React from "react";
 export type LogoSize = "xs" | "sm" | "md" | "lg";
+export type LogoTone = "primary" | "success";
+export type LogoMark = "glyph" | "godx";
 export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /**
      * The brand glyph — a short mark (a letter/initials, default `"g"`) or a custom node such as an
      * inline `<svg>`. Keep it to 1–2 glyphs; the box is square and centres its content.
      */
     glyph?: React.ReactNode;
+    /**
+     * Semantic mark artwork. `"godx"` renders the canonical GoDX identity mark as an inline vector;
+     * `"glyph"` preserves the configurable boxed-glyph treatment.
+     */
+    mark?: LogoMark;
     /** Box size tier (tokenised). Default `"md"` (1.75rem). */
     size?: LogoSize;
+    /**
+     * Semantic fill role. `"success"` provides the canonical green identity mark without changing
+     * the application's primary action colour. Default `"primary"` preserves existing behaviour.
+     */
+    tone?: LogoTone;
+    /**
+     * Readable product name rendered BESIDE the mark as one lockup. Pass the localized product name
+     * (a string, or a node when the name needs its own markup). When set, `Logo` renders
+     * `mark + wordmark` in a single inline-flex lockup: the mark becomes decorative and the wordmark
+     * carries the accessible name, so the pair is announced once. The wordmark reads
+     * `--logo-wordmark-*` tokens — its colour defaults to the identity role for the GoDX/`success`
+     * lockup and NEVER to `--primary`, so a re-themed action colour cannot recolour the brand.
+     * Omit for the bare mark (today's behaviour, unchanged).
+     *
+     * NOTE: the library ships no wordmark ARTWORK — the wordmark is set in the design-system
+     * typeface (`--logo-wordmark-font-family`, default `--font-family-display`). Pass an inline
+     * `<svg>` here when a real logotype asset exists.
+     */
+    wordmark?: React.ReactNode;
     /**
      * Accessible name for the mark. When set, the logo is exposed to assistive tech as an image with
      * this name; when omitted the mark is decorative (`aria-hidden`) — the correct default when a
-     * readable wordmark sits beside it.
+     * readable wordmark sits beside it. With `wordmark` set, `label` overrides the lockup's
+     * accessible name (the wordmark text is otherwise the name).
      */
     label?: string;
 }
 /**
- * Logo — the product brand-mark box: a glyph on the primary fill. Use it INSTEAD of hand-rolling a
- * bare span with a fixed square size, a literal radius, and `bg-primary` + type utilities in shell
- * headers, auth screens, and topbars — that repeats literal size/radius and puts type utilities on
- * a bare span (rules #45/#46). Size, radius, and per-tier font-size are tokens; the fill reads the
- * primary role, so a re-themed `--primary` re-tints the mark automatically. Pair with a wordmark for
- * the full lockup (leave `label` unset so the mark stays decorative and the wordmark carries the
- * accessible name).
+ * Logo — the product brand-mark box: a glyph on the primary fill, or (with `wordmark`) the full
+ * mark + wordmark LOCKUP. Use it INSTEAD of hand-rolling a bare span with a fixed square size, a
+ * literal radius, and `bg-primary` + type utilities in shell headers, auth screens, and topbars —
+ * that repeats literal size/radius and puts type utilities on a bare span (rules #45/#46). Size,
+ * radius, per-tier font-size, the wordmark's face/weight/tracking/colour and the mark↔wordmark gap
+ * are all tokens.
+ *
+ * COLOUR: the boxed glyph fill reads the primary role, so a re-themed `--primary` re-tints it.
+ * `mark="godx"` / `tone="success"` instead read the IDENTITY tokens (`--logo-godx-color`,
+ * `--logo-success-*`, `--logo-wordmark-color`), which never reference `--primary` — the canonical
+ * brand-green GoDX lockup therefore survives any action-colour re-theme with zero consumer CSS.
+ *
+ * A11Y: with a `wordmark`, the mark is decorative and the wordmark text carries the accessible
+ * name (announced once). Without one, set `label` when the mark stands alone.
  */
 export declare const Logo: React.ForwardRefExoticComponent<LogoProps & React.RefAttributes<HTMLSpanElement>>;

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", 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.js

@@ -49,20 +49,36 @@ function AppShell({
             type: "button",
             variant: "ghost",
             size: "sm",
-            className: "app-mobile-nav-trigger hidden max-lg:inline-flex",
+            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 })
-        ] })
+        /* @__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"), children: [
+    /* @__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
     ] }),

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,12 @@ 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 `--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;
+ * `"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, className, }: CenteredShellProp): import("react").JSX.Element;

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

@@ -7,6 +7,7 @@ function CenteredShell({
   footer,
   children,
   width = "md",
+  align = "start",
   className
 }) {
   const { t } = useTranslation();
@@ -19,7 +20,7 @@ function CenteredShell({
         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 }) }),
+    /* @__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",
       {