@godxjp/ui 19.1.0 → 19.2.0

package/dist/components/data-entry/time-picker.d.ts

@@ -2,10 +2,8 @@ import * as React from "react";
 import type { TimePickerProp } from "../../props/components/data-entry.prop.js";
 export type { TimePickerProp, TimePickerProp as TimePickerProps, } from "../../props/components/data-entry.prop.js";
 /**
- * TimePicker — WAI-ARIA time combobox. The value lives on a real, typeable `HH:mm` `<input>`
- * (24h canonical): form-submittable (give it a `name`), screen-reader friendly, and e2e-testable
- * by filling the input. The HH/mm column popover is the visual affordance and stays in sync.
- * The column display honours the active `timeFormat` (12h shows 1-12 + AM/PM) while the canonical
- * value remains 24h `HH:mm`.
+ * TimePicker — WAI-ARIA time combobox. The value lives on a real, typeable `HH:mm` `<input>` (24h
+ * canonical): form-submittable (give it a `name`), screen-reader friendly, and e2e-testable by
+ * filling the input.
  */
 export declare function TimePicker({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, className, id, name, minuteStep, allowClear, ...ariaProps }: TimePickerProp): React.JSX.Element;

package/dist/components/data-entry/upload-types.d.ts

@@ -14,16 +14,12 @@ export type UploadFileItem = {
     error?: string;
     /** Local file before / during upload */
     file?: File;
-    /**
-     * Draft-only: marked for soft-delete on form commit.
-     * Undo clears this before save — media-service has no restore API.
-     */
+    /** Undo clears this before save — media-service has no restore API. */
     pendingDelete?: boolean;
     /**
      * Draft-only: replacement staged locally; baseline kept for undo.
      */
     pendingReplace?: boolean;
-    /** mediaId to soft-delete on commit when `pendingReplace` */
     replacesMediaId?: string;
 };
 export type UploadVariant = "dropzone" | "button" | "picture-card" | "picture" | "avatar" | "avatar-crop";

package/dist/components/data-entry/use-upload-draft.d.ts

@@ -11,10 +11,6 @@ export type UseUploadDraftOptions = {
     value?: UploadFileItem | null;
     onChange?: (item: UploadFileItem | null) => void;
 };
-/**
- * Single-value draft for avatar / picture — coordinates with media-service:
- * soft-delete only on form commit; undo before save (no restore API).
- */
 export declare function useUploadDraft({ value, onChange }: UseUploadDraftOptions): {
     state: UploadDraftState;
     markRemove: () => void;

package/dist/components/feedback/dialog.d.ts

@@ -37,15 +37,10 @@ declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 type AlertDialogRootProps = React.ComponentProps<typeof AlertDialogPrimitive.Root> & {};
 /**
- * Compound alert-dialog Root — the `role="alertdialog"` mirror of {@link DialogRoot}.
- *
- * The flat {@link AlertDialog} preset owns the confirm / challenge / step-up recipe and cannot be
- * re-composed; this Root is what a consumer reaches for when the confirmation needs bespoke
- * content. It supplies the Radix AlertDialog context that `AlertDialogTitle`,
- * `AlertDialogDescription`, `AlertDialogAction` and `AlertDialogCancel` read, so the compound
- * parts are assemblable from the public API alone (no direct `@radix-ui/react-alert-dialog`
- * import). Focus trap, focus restoration and the modal `role="alertdialog"` semantics stay
- * Radix-owned.
+ * Compound alert-dialog Root — the `role="alertdialog"` mirror of {@link DialogRoot}. It supplies
+ * the Radix AlertDialog context that `AlertDialogTitle`, `AlertDialogDescription`,
+ * `AlertDialogAction` and `AlertDialogCancel` read, so the compound parts are assemblable from the
+ * public API alone (no direct `@radix-ui/react-alert-dialog` import).
  */
 declare function AlertDialogRoot(props: AlertDialogRootProps): React.JSX.Element;
 declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -72,12 +67,8 @@ declare const DialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrim
 declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /**
- * Preset: confirm / destructive / typed-challenge / step-up without compound markup.
- *
- * High-stakes deletion recipe ("DangerConfirm", godxui#193): pass `challenge` (or `confirmPhrase`)
- * to gate the confirm button behind an exact typed match (org slug / resource name), and `stepUp`
- * for an async re-auth gate (passkey / 2FA) that must resolve truthy before `onConfirm` fires.
- * Both flows force the destructive tone (button + soft header band).
+ * Preset: confirm / destructive / typed-challenge / step-up without compound markup. Both flows
+ * force the destructive tone (button + soft header band).
  */
 declare function AlertDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, confirmPhrase, challenge, onConfirm, stepUp, keepOpenOnConfirm, pending, }: AlertDialogProp): React.JSX.Element;
 export declare const Dialog: typeof DialogRoot & {

package/dist/components/feedback/overlay-header-tone.d.ts

@@ -2,6 +2,6 @@ import type { ToneProp } from "../../props/vocabulary/index.js";
 /**
  * Soft semantic background band for an overlay header (Sheet / Dialog / Drawer), Ant-Design style.
  * Tints ONLY the background — text stays `--foreground` (渋み: never invert the band into a loud
- * solid fill). `default` = no band. Shared so the three overlays stay consistent.
+ * solid fill).
  */
 export declare const overlayHeaderToneClass: Record<ToneProp, string>;

package/dist/components/feedback/sheet.d.ts

@@ -10,9 +10,6 @@ export type SheetPresentation = "side" | "bottom";
  * The canonical responsive-overlay decision, shared by `SheetContent` and by any composite that
  * swaps a desktop surface for a mobile sheet (see `OrgSwitcher`). Returns `"bottom"` when the
  * viewport is at or below `--sheet-responsive-breakpoint-width`.
- *
- * Public so a consumer NEVER hand-rolls `useMediaQuery("(max-width: 390px)")` in app code — the
- * breakpoint stays one themeable knob for the whole system.
  */
 export declare function useSheetResponsiveMode(responsive?: SheetResponsiveProp): SheetPresentation;
 export declare function Sheet(props: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
@@ -28,17 +25,13 @@ export interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof
     /** Optional semantic class for the owned backdrop (for a shell-specific overlay token). */
     overlayClassName?: string;
     /**
-     * Desired panel size for side left/right (Ant Drawer `width`). Caps at the viewport — a small
-     * screen still gets a full-width panel (`min(width, 100%)`), it is NOT a hard fixed width. Omit
-     * to keep the canonical drawer default from `--sheet-width-default`.
+     * Desired panel size for side left/right (Ant Drawer `width`). Omit to keep the canonical drawer
+     * default from `--sheet-width-default`.
      */
     width?: WidthProp;
     /**
      * Responsive drawer / detail-panel contract. `"side"` (default) keeps today's behaviour: the
-     * physical `side` the consumer named, at every viewport. `"auto"` renders the desktop side panel
-     * above `--sheet-responsive-breakpoint-width` and the mobile bottom sheet at/below it (capped by
-     * `--sheet-bottom-max-height`), so ONE `<Sheet>` covers both without a page-local media query.
-     * `"bottom"` pins the bottom-sheet presentation.
+     * physical `side` the consumer named, at every viewport.
      */
     responsive?: SheetResponsiveProp;
 }

package/dist/components/feedback/sheet.js

@@ -173,7 +173,7 @@ const SheetHeader = ({
   );
 };
 const SheetBody = ({ className, ...props }) => (
-  // Scrollable region between a fixed header and a pinned footer (rule #41). Full-bleed horizontally
+  // Full-bleed horizontally
   // (`-mx-6 px-6`) so content aligns to the sheet edge while the 3px focus ring of a full-width
   // control keeps 24px of room and never clips against the scroll container's computed
   // `overflow-x`. `py-1`/`scroll-py-1` keep a focused control's ring visible at the scroll edges.

package/dist/components/feedback/sonner.js

@@ -43,10 +43,9 @@ function Toaster({ style, ...props }) {
         "--normal-text": "hsl(var(--popover-foreground))",
         "--normal-border": "hsl(var(--border))",
         "--border-radius": "var(--radius)",
-        // MERGED, never spread over. `style` used to arrive with the rest of `{...props}` AFTER
-        // this object, so a consumer passing ANY style (a z-index, a width) replaced the whole
+        // MERGED, never spread over.
         // object and wiped all four vars — and an unset `--normal-bg` renders the toast
-        // transparent. Merging keeps the surface intact and still lets a consumer override one
+        // transparent.
         // var by name.
         ...style
       },

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

@@ -2,36 +2,10 @@ import * as React from "react";
 import type { SizeProp } from "../../props/vocabulary/index.js";
 export type { ActivityProp, ActivityProp as ActivityProps, } from "../../props/components/general.prop.js";
 /**
- * Activity — the official AMBIENT-motion primitive: a continuous, unbounded "something is happening
- * right now, elsewhere". The LOOP counterpart to `Reveal`'s one-shot entrance, so a consumer never
- * hand-rolls a looping `@keyframes` + its own `prefers-reduced-motion` guard. Every interval,
- * stagger, offset, size and colour reads a DS token (`--activity-interval`,
- * `--activity-stagger-step`, `--activity-mark-offset`, `--activity-color`, …), so a service retunes
- * the whole ambient feel from its theme.
- *
- * NOT `Skeleton` (content is LOADING — it hard-codes `aria-busy` + an unconditional live region, so
- * reusing it for a typing indicator tells every screen reader the region is busy for as long as
- * anyone is typing). NOT `Button loading` (THIS ACTION is in flight, on a control).
- * `Activity` means: someone is typing, a sync is running, a response is streaming, a recording is
- * live — indefinitely, and not here.
- *
- * ACCESSIBILITY — the half consumers get wrong, owned here:
- * - The mark is decorative and always `aria-hidden`; the `label` (or `children`) carries the
- *   meaning, so the indicator is never animation-only.
- * - `announce` defaults to `false` and then emits NO live region at all. An ambient indicator
- *   flickers on and off with every socket event; a live region there re-announces continuously.
- *   `announce="polite"` wraps ONLY the label in one `aria-live="polite" aria-atomic="true"` region.
- * - No `aria-busy`: activity elsewhere does not make THIS region busy, and `aria-busy` would
- *   suppress the surrounding content's own updates.
- * - Not focusable, not a tab stop, no pointer affordance — it is a status mark, not a control.
- * - Under `prefers-reduced-motion: reduce` the loop is dropped and every mark falls back to a
- *   DESIGNED resting state (three solid dots / a solid pulse mark / a bar segment parked at the
- *   reading-start), never to nothing, with no layout shift (WCAG 2.2 SC 2.3.3 and SC 2.2.2).
- *
- * Copy is consumer-owned and localized — pass a `t()`-translated `label`, and derive
- * "N people are typing" from `Intl.PluralRules`. The library never invents the string.
- *
- * Pure/server-safe: no hooks, no effects, no timers — the loop is CSS.
+ * Activity — the official AMBIENT-motion primitive: a continuous, unbounded "something is
+ * happening right now, elsewhere". Every interval, stagger, offset, size and colour reads a DS
+ * token (`--activity-interval`, `--activity-stagger-step`, `--activity-mark-offset`,
+ * `--activity-color`, …), so a service retunes the whole ambient feel from its theme.
  */
 export declare const Activity: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> & {
     variant?: import("../../props/index.js").ActivityVariantProp;

package/dist/components/general/button.js

@@ -20,7 +20,6 @@ const buttonVariants = cva("ui-button", {
     size: {
       default: "ui-button--default-size",
       md: "ui-button--default-size",
-      // The glyph rules stay UTILITIES, not a components-layer rule: Tailwind v4 orders
       // utilities after components, so only a utility can out-rank a child's own `size-*`.
       // They read the token, so the value is still themeable.
       xs: "ui-button--xs [&_svg:not([class*='size-'])]:size-[var(--button-xs-icon-size)]",
@@ -32,7 +31,6 @@ const buttonVariants = cva("ui-button", {
       "icon-lg": "ui-button--icon-lg"
     },
     // Single source of corner radius (deterministic — no competing rounded-* utility): default uses
-    // the dedicated --button-radius token (themeable independently of --control-radius, issue #124),
     // pill is fully rounded, sharp is square.
     shape: {
       default: "rounded-[var(--button-radius)]",
@@ -69,14 +67,7 @@ const Button = React.forwardRef(
     ] }) : children;
     const showCount = !asChild && count != null && (count !== 0 || showZero);
     const countLabel = showCount && count != null && count > overflowCount ? `${new Intl.NumberFormat(locale).format(overflowCount)}+` : count != null ? new Intl.NumberFormat(locale).format(count) : "";
-    const countNode = showCount ? /* @__PURE__ */ jsx(
-      "span",
-      {
-        "data-slot": "button-count",
-        className: "ui-button-count",
-        children: countLabel
-      }
-    ) : null;
+    const countNode = showCount ? /* @__PURE__ */ jsx("span", { "data-slot": "button-count", className: "ui-button-count", children: countLabel }) : null;
     return /* @__PURE__ */ jsx(
       Comp,
       {

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

@@ -17,51 +17,29 @@ export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
      * Box size tier (tokenised), applied to EVERY mark. The boxed glyph reads `--logo-size-*`
      * (default `md` = 1.75rem); `mark="godx"` reads its own `--logo-godx-size-*` scale (default `md`
      * = 2rem — the identity artwork is a capsule in a square viewBox and needs slightly more box to
-     * read at the same optical weight). On a `wordmark` lockup the tier scales the mark and the
-     * wordmark together. A theme pins the identity box at every tier with `--logo-godx-size`.
+     * read at the same optical weight).
      */
     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.
+     * the application's primary action colour.
      */
     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.
+     * (a string, or a node when the name needs its own markup).
      */
     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. With `wordmark` set, `label` overrides the lockup's
-     * accessible name (the wordmark text is otherwise the name).
+     * readable wordmark sits beside it.
      */
     label?: string;
 }
 /**
  * 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.
+ * mark + wordmark LOCKUP. Size, radius, per-tier font-size, the wordmark's
+ * face/weight/tracking/colour and the mark↔wordmark gap are all tokens.
  */
 export declare const Logo: React.ForwardRefExoticComponent<LogoProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,14 +1,8 @@
 import type { RevealProp } from "../../props/components/general.prop.js";
 export type { RevealProp, RevealProp as RevealProps } from "../../props/components/general.prop.js";
 /**
- * Reveal — the official entrance-motion primitive (staggered fade-up). Content animates in on mount
- * reading the DS motion tokens (`--duration-slow`, `--ease-emphasized`, `--reveal-distance`), so a
- * consumer never hand-rolls `@keyframes` + `.app-reveal`/`.d1..d6`. `delay` is a stagger ordinal
- * (`0..6`) — an index into the `--reveal-stagger-step` ladder, never a raw ms — so a column of rows
- * cascades in. Under `prefers-reduced-motion` the animation is dropped entirely: content renders in
- * its final position, fully visible, with no layout shift (CSS `@media` guard in motion.css).
- *
- * Pure/server-safe: no hooks, no effects. Pass `asChild` to merge the reveal onto the single child
- * element (no wrapper `<div>`) when an extra box would break a grid/flex layout.
+ * Reveal — the official entrance-motion primitive (staggered fade-up). `delay` is a stagger
+ * ordinal (`0..6`) — an index into the `--reveal-stagger-step` ladder, never a raw ms — so a
+ * column of rows cascades in.
  */
 export declare function Reveal({ children, delay, asChild, className, ...props }: RevealProp): import("react").JSX.Element;

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

@@ -2,9 +2,7 @@ import * as React from "react";
 export type { TextProp, TextProp as TextProps, HeadingProp, HeadingProp as HeadingProps, } from "../../props/components/general.prop.js";
 /**
  * Text — the typographic primitive. Use it INSTEAD of a hand-rolled `<span className="text-[13px]
- * font-medium text-muted-foreground">`. `size` only accepts steps of the golden-ratio type scale
- * (never an arbitrary px), `tone` maps to semantic foreground tokens, `weight` respects the system's
- * 2-weight scale. Fully token-driven via `[data-slot="text"]` rules in text-layout.css.
+ * font-medium text-muted-foreground">`.
  */
 export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
     as?: "span" | "p" | "div" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr";

package/dist/components/layout/account-chip.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { AccountChipProp } from "../../props/components/layout.prop.js";
+export type { AccountChipProp, AccountChipProp as AccountChipProps, } from "../../props/components/layout.prop.js";
+/**
+ * Signed-in user for a PageContainer `extra` slot, a Topbar or a footer row: avatar, name and one
+ * ghost action, all at the control tier height, so it sits level with the buttons beside it.
+ */
+export declare const AccountChip: React.ForwardRefExoticComponent<AccountChipProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/account-chip.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { LogOut } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../data-display/avatar.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { flexGapClass } from "../../lib/variants.js";
+const AccountChip = React.forwardRef(
+  ({ name, email, avatarSrc, avatarFallback, actionLabel, onAction, disabled, className }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "account-chip",
+      "data-direction": "row",
+      "data-align": "center",
+      className: cn("ui-flex", flexGapClass.xs, "ui-account-chip", className),
+      title: email,
+      children: [
+        /* @__PURE__ */ jsxs(Avatar, { "aria-hidden": "true", children: [
+          avatarSrc ? /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: "" }) : null,
+          /* @__PURE__ */ jsx(AvatarFallback, { children: avatarFallback ?? name.slice(0, 1) })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { truncate: true, children: name }),
+        onAction ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            disabled,
+            onClick: onAction,
+            "aria-label": typeof actionLabel === "string" ? actionLabel : void 0,
+            title: typeof actionLabel === "string" ? actionLabel : void 0,
+            children: /* @__PURE__ */ jsx(LogOut, { "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  )
+);
+AccountChip.displayName = "AccountChip";
+export {
+  AccountChip
+};

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

@@ -1,14 +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.
- *
- * Since gh#308 this is a thin PRESET over `Separator label`, not a parallel implementation: the
- * grid, the accessible-name contract and the rule geometry all live on the primitive, and
- * `.ui-auth-divider` only re-points Separator's `--separator-*` knobs at the `--auth-shell-divider-*`
- * layer. That keeps #263's canonical login geometry byte-for-byte identical while breaking the
- * coupling the issue reported — a service retuning its login divider no longer retunes every day
- * divider in its message streams, and vice versa. New code that wants a labelled rule outside an
- * auth form should use `<Separator label>` directly.
+ * AuthDivider — a centred, localized conjunction between two equal separator rules. New code that
+ * wants a labelled rule outside an auth form should use `<Separator label>` directly.
  */
 export declare function AuthDivider({ label, className }: AuthDividerProp): import("react").JSX.Element;

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

@@ -3,19 +3,6 @@ export type { AuthShellProp, AuthShellProp as AuthShellProps, } from "../../prop
 /**
  * AuthShell — centred auth/login page shell (login · mfa · passkey · device · reset). A top brand
  * bar (banner), a centred `main` that holds the auth `Card`, and an optional footer (contentinfo),
- * over a `min-h-dvh` surface. Control density is scoped to the comfortable tier (44px, the WCAG
- * 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; `"registration"` = the 360px sign-up measure,
- * start-aligned like login (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.
+ * over a `min-h-dvh` surface.
  */
 export declare function AuthShell({ brand, footer, children, variant, preset, density, className, }: AuthShellProp): import("react").JSX.Element;

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

@@ -3,11 +3,7 @@ import type { BreadcrumbProp } from "../../props/vocabulary/navigation.prop.js";
 export type BreadcrumbProps = {
     items: BreadcrumbProp;
     linkComponent?: ElementType;
-    /**
-     * Override the `<nav>` landmark's accessible name. Defaults to a localized "Breadcrumb".
-     * Multiple Breadcrumb instances on one page/view need a DISTINCT name each — two `<nav>`
-     * landmarks sharing one name/role fail axe's `landmark-unique` (WCAG 2.4.1 / 1.3.1).
-     */
+    /** Override the `<nav>` landmark's accessible name. Defaults to a localized "Breadcrumb". */
     ariaLabel?: string;
 };
 export declare function Breadcrumb({ items, linkComponent: LinkComponent, ariaLabel, }: BreadcrumbProps): import("react").JSX.Element;

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

@@ -3,23 +3,9 @@ export type { CenteredShellProp, CenteredShellProp as CenteredShellProps, } from
 /**
  * CenteredShell — authenticated, no-sidebar, centred-column page shell: the hosted-ID "My Page",
  * account / self-service, and standalone-settings shape. It fills the gap between the two existing
- * shells:
- *
- * - `AppShell` REQUIRES a sidebar — its padded topbar chrome (`.app-topbar`) is a grid area beside
- *   the nav rail, so you cannot get a padded top bar without a rail.
- * - `AuthShell` is the UNAUTHENTICATED root (login/mfa/reset); it centres a narrow ~24rem card
- *   VERTICALLY and has no top-right actions slot.
- *
- * CenteredShell gives a **padded top bar with real actions** (banner) reusing the SAME chrome as
- * `.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) — 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.
+ * shells: - `AppShell` REQUIRES a sidebar — its padded topbar chrome (`.app-topbar`) is a grid
+ * area beside the nav rail, so you cannot get a padded top bar without a rail. - `AuthShell` is
+ * the UNAUTHENTICATED root (login/mfa/reset); it centres a narrow ~24rem card VERTICALLY and has
+ * no top-right actions slot.
  */
 export declare function CenteredShell({ topbar, footer, children, width, align, preset, className, }: CenteredShellProp): import("react").JSX.Element;

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

@@ -3,33 +3,16 @@ 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 **400 · 403 · 404 · 500 · 503**
- * (gh#221, gh#251, gh#301).
- *
- * 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` (400/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.
+ * What the surface owns is the CONTRACT the composition kept losing: - **`mode` is the shell
+ * contract.** `application` (400/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).
  */
 export declare const ErrorSurface: React.ForwardRefExoticComponent<ErrorSurfaceProp & React.RefAttributes<HTMLDivElement>>;

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

@@ -15,6 +15,9 @@ const STATUS_META = {
   500: { icon: ServerCrash, tone: "destructive" },
   503: { icon: Wrench, tone: "warning" }
 };
+function statusMeta(status) {
+  return STATUS_META[status] ?? (status >= 500 && status < 600 ? { icon: ServerCrash, tone: "destructive" } : { icon: TriangleAlert, 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]
@@ -61,7 +64,7 @@ const ErrorSurface = React.forwardRef(
     className
   }, ref) {
     const { t, locale } = useTranslation();
-    const meta = STATUS_META[status];
+    const meta = statusMeta(status);
     const resolvedIcon = icon ?? meta.icon;
     const resolvedTone = tone ?? meta.tone;
     const resolvedTitleLevel = titleLevel ?? (mode === "system" ? 1 : 2);

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

@@ -14,6 +14,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 { AccountChip } from "./account-chip.js";
+export type { AccountChipProp, AccountChipProps } from "./account-chip.js";
 export { AuthAccountSummary } from "./auth-account-summary.js";
 export type { AuthAccountSummaryProp, AuthAccountSummaryProps } from "./auth-account-summary.js";
 export { AuthFooter } from "./auth-footer.js";

package/dist/components/layout/index.js

@@ -6,6 +6,7 @@ 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 { AccountChip } from "./account-chip.js";
 import { AuthAccountSummary } from "./auth-account-summary.js";
 import { AuthFooter } from "./auth-footer.js";
 import { AuthStack } from "./auth-stack.js";
@@ -22,6 +23,7 @@ import { AspectRatio } from "./aspect-ratio.js";
 import { LegalDocumentShell } from "./legal-document-shell.js";
 import { ServiceRolePanel } from "./service-role-panel.js";
 export {
+  AccountChip,
   AppShell,
   AspectRatio,
   AuthAccountSummary,

package/dist/components/layout/legal-document-shell.d.ts

@@ -2,33 +2,10 @@ import * as React from "react";
 import type { LegalDocumentShellProp } from "../../props/components/layout.prop.js";
 export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProp as LegalDocumentShellProps, } from "../../props/components/layout.prop.js";
 /**
- * LegalDocumentShell — the long-form **legal / policy document** surface: terms of service, privacy
- * policy, DPA, cookie policy, SLA, EULA, security policy.
- *
- * It exists because a legal page is NOT expressible as `CenteredShell` + `SplitPane` + tokens: the
- * geometry is the easy half, and the half that keeps getting hand-rolled per app is the behaviour —
- *
- * - **scroll spy**: an `IntersectionObserver` marks the section at the reading line active, so the
- *   contents list tracks the reader (`aria-current="location"`, never colour-only);
- * - **hash deep links**: `?#section-id` on load selects that section; activating a contents anchor
- *   rewrites the hash (`history.replaceState`, so the Back button is never hijacked);
- * - **scroll offset**: `scroll-margin-block-start` from `--legal-document-scroll-offset`, so a jump
- *   lands below sticky chrome with no offset arithmetic;
- * - **focus handoff**: the target `<section tabIndex={-1}>` takes focus (`preventScroll`), so a
- *   keyboard/screen-reader user actually arrives IN the section, with a visible ring;
- * - **reduced motion**: the smooth scroll degrades to an instant jump under
- *   `prefers-reduced-motion: reduce`.
- *
- * Semantics: `<article>` labelled by the `<h1>` · a NAMED `<nav>` for the contents · REAL
- * `<a href="#…">` anchors (middle-clickable, deep-linkable, work before JS boots) · one `<section>`
- * per entry labelled by its `<h2>`.
- *
- * Layout: the shell owns its query container, so the one-column ⇄ two-column decision comes from
- * its OWN width (the SplitPane precedent, gh#165). At ≥56rem the contents become a sticky rail
- * beside a measure-capped column; below that (the 390×844 case) the shell is a single column and
- * the contents are a static compact block between the header and the first section — never pinned,
- * so a phone loses no vertical space.
- *
- * ALL legal text stays consumer-owned: the shell only receives `sections` and slots.
+ * LegalDocumentShell — the long-form **legal / policy document** surface: terms of service,
+ * privacy policy, DPA, cookie policy, SLA, EULA, security policy. Semantics: `<article>` labelled
+ * by the `<h1>` · a NAMED `<nav>` for the contents · REAL `<a href="#…">` anchors
+ * (middle-clickable, deep-linkable, work before JS boots) · one `<section>` per entry labelled by
+ * its `<h2>`.
  */
 export declare const LegalDocumentShell: React.ForwardRefExoticComponent<LegalDocumentShellProp & React.RefAttributes<HTMLDivElement>>;