@godxjp/ui 18.8.0 → 18.10.0

package/dist/i18n/messages/en.json

@@ -110,6 +110,24 @@
       "previousYear": "Previous year",
       "nextYear": "Next year",
       "placeholder": "yyyy/mm"
+    },
+    "branchScope": {
+      "label": "Branch scope",
+      "all": "All branches",
+      "allDescription": "Applies to every current and future branch",
+      "selected": "Selected branches only",
+      "selectedDescription": "Applies only to the branches checked below",
+      "listLabel": "Branches",
+      "searchPlaceholder": "Search branches",
+      "selectedCount": {
+        "one": "{count} branch selected",
+        "other": "{count} branches selected"
+      },
+      "empty": "No branches to choose from",
+      "error": "Could not load branches",
+      "denied": "You do not have permission to view branches",
+      "loading": "Loading branches…",
+      "noMatches": "No branches match your search"
     }
   },
   "feedback": {
@@ -135,9 +153,6 @@
       "openNav": "Open navigation menu",
       "navLabel": "Menu"
     },
-    "pageHeader": {
-      "loading": "Loading page…"
-    },
     "authShell": {
       "brandLabel": "Brand",
       "mainLabel": "Main content",
@@ -167,6 +182,28 @@
       "searchPlaceholder": "Search...",
       "notifications": "Notifications",
       "tweaks": "Open settings"
+    },
+    "serviceRolePanel": {
+      "rolesLabel": "Roles",
+      "detailLabel": "Role detail",
+      "locked": "Locked",
+      "memberCount": {
+        "one": "{count} member",
+        "other": "{count} members"
+      },
+      "selectRole": "Select {role}",
+      "deleteRole": "Delete {role}",
+      "deleteTitle": "Delete this role?",
+      "deleteDescription": "Deleting {role} removes its permissions from every assigned member. This cannot be undone.",
+      "deleteConfirm": "Delete role",
+      "empty": "No roles yet",
+      "emptyDescription": "Create a role to start assigning permissions.",
+      "error": "Could not load roles",
+      "errorDescription": "The data could not be fetched. Try again shortly.",
+      "denied": "You do not have permission to view roles",
+      "deniedDescription": "Ask an administrator to grant you access.",
+      "loading": "Loading roles…",
+      "noDetail": "Select a role to see its detail"
     }
   },
   "dataDisplay": {
@@ -182,6 +219,21 @@
     "listRow": {
       "unread": "Unread",
       "read": "Read"
+    },
+    "permissionMatrix": {
+      "caption": "Role and permission matrix",
+      "permissionColumn": "Permission",
+      "granted": "Granted",
+      "notGranted": "Not granted",
+      "difference": "Difference",
+      "toggle": "Grant {permission} to {role}",
+      "locked": "Locked",
+      "empty": "No permissions to show",
+      "error": "Could not load the permission matrix",
+      "errorDescription": "The data could not be fetched. Try again shortly.",
+      "denied": "You do not have permission to view this matrix",
+      "deniedDescription": "Ask an administrator to grant you access.",
+      "loading": "Loading permissions…"
     }
   },
   "ui": {
@@ -232,7 +284,7 @@
     },
     "filterBar": {
       "appliedFilters": "Applied filters",
-      "removeFilter": "Remove filter {label}",
+      "removeFilter": "Remove filter: {label}",
       "resultCount": {
         "one": "{count} result",
         "other": "{count} results"

package/dist/i18n/messages/ja.json

@@ -110,6 +110,21 @@
       "previousYear": "前年へ",
       "nextYear": "翌年へ",
       "placeholder": "yyyy/mm"
+    },
+    "branchScope": {
+      "label": "ブランチ範囲",
+      "all": "すべてのブランチ",
+      "allDescription": "現在および今後のすべてのブランチに適用",
+      "selected": "選択したブランチのみ",
+      "selectedDescription": "下で選択したブランチにのみ適用",
+      "listLabel": "ブランチ",
+      "searchPlaceholder": "ブランチを検索",
+      "selectedCount": "{count} 件選択中",
+      "empty": "選択できるブランチがありません",
+      "error": "ブランチを取得できませんでした",
+      "denied": "ブランチを表示する権限がありません",
+      "loading": "ブランチを読み込み中…",
+      "noMatches": "検索に一致するブランチがありません"
     }
   },
   "feedback": {
@@ -135,9 +150,6 @@
       "openNav": "ナビゲーションメニューを開く",
       "navLabel": "メニュー"
     },
-    "pageHeader": {
-      "loading": "ページを読み込んでいます…"
-    },
     "authShell": {
       "brandLabel": "ブランド",
       "mainLabel": "メインコンテンツ",
@@ -167,6 +179,25 @@
       "searchPlaceholder": "検索...",
       "notifications": "通知",
       "tweaks": "設定を開く"
+    },
+    "serviceRolePanel": {
+      "rolesLabel": "ロール一覧",
+      "detailLabel": "ロールの詳細",
+      "locked": "変更不可",
+      "memberCount": "{count} 名",
+      "selectRole": "{role} を選択",
+      "deleteRole": "{role} を削除",
+      "deleteTitle": "ロールを削除しますか？",
+      "deleteDescription": "{role} を削除すると、割り当てられたメンバーはこのロールの権限を失います。この操作は取り消せません。",
+      "deleteConfirm": "ロールを削除",
+      "empty": "ロールがありません",
+      "emptyDescription": "ロールを作成して権限の割り当てを始めましょう。",
+      "error": "ロールを取得できませんでした",
+      "errorDescription": "データを取得できませんでした。時間をおいて再試行してください。",
+      "denied": "ロールを表示する権限がありません",
+      "deniedDescription": "閲覧するには管理者に権限の付与を依頼してください。",
+      "loading": "ロールを読み込み中…",
+      "noDetail": "ロールを選択すると詳細が表示されます"
     }
   },
   "dataDisplay": {
@@ -182,6 +213,21 @@
     "listRow": {
       "unread": "未読",
       "read": "既読"
+    },
+    "permissionMatrix": {
+      "caption": "ロールと権限のマトリクス",
+      "permissionColumn": "権限",
+      "granted": "許可",
+      "notGranted": "不許可",
+      "difference": "差分",
+      "toggle": "{role} に {permission} を付与",
+      "locked": "変更不可",
+      "empty": "表示できる権限がありません",
+      "error": "権限マトリクスを取得できませんでした",
+      "errorDescription": "データを取得できませんでした。時間をおいて再試行してください。",
+      "denied": "このマトリクスを表示する権限がありません",
+      "deniedDescription": "閲覧するには管理者に権限の付与を依頼してください。",
+      "loading": "権限を読み込み中…"
     }
   },
   "ui": {
@@ -232,8 +278,8 @@
     },
     "filterBar": {
       "appliedFilters": "適用中のフィルター",
-      "removeFilter": "フィルター「{label}」を解除",
-      "resultCount": "{count} 件"
+      "removeFilter": "フィルターを解除: {label}",
+      "resultCount": "{count} 件の結果"
     },
     "localePicker": {
       "ariaLabel": "言語"

package/dist/i18n/messages/vi.json

@@ -110,6 +110,21 @@
       "previousYear": "Năm trước",
       "nextYear": "Năm sau",
       "placeholder": "yyyy/mm"
+    },
+    "branchScope": {
+      "label": "Phạm vi chi nhánh",
+      "all": "Tất cả chi nhánh",
+      "allDescription": "Áp dụng cho mọi chi nhánh hiện tại và sau này",
+      "selected": "Chỉ chi nhánh đã chọn",
+      "selectedDescription": "Chỉ áp dụng cho các chi nhánh được chọn bên dưới",
+      "listLabel": "Chi nhánh",
+      "searchPlaceholder": "Tìm chi nhánh",
+      "selectedCount": "Đã chọn {count} chi nhánh",
+      "empty": "Chưa có chi nhánh để chọn",
+      "error": "Không tải được danh sách chi nhánh",
+      "denied": "Bạn không có quyền xem chi nhánh",
+      "loading": "Đang tải chi nhánh…",
+      "noMatches": "Không có chi nhánh khớp với tìm kiếm"
     }
   },
   "feedback": {
@@ -135,9 +150,6 @@
       "openNav": "Mở menu điều hướng",
       "navLabel": "Menu"
     },
-    "pageHeader": {
-      "loading": "Đang tải trang…"
-    },
     "authShell": {
       "brandLabel": "Thương hiệu",
       "mainLabel": "Nội dung chính",
@@ -167,6 +179,25 @@
       "searchPlaceholder": "Tìm kiếm...",
       "notifications": "Thông báo",
       "tweaks": "Mở tùy chỉnh"
+    },
+    "serviceRolePanel": {
+      "rolesLabel": "Danh sách vai trò",
+      "detailLabel": "Chi tiết vai trò",
+      "locked": "Đã khóa",
+      "memberCount": "{count} thành viên",
+      "selectRole": "Chọn {role}",
+      "deleteRole": "Xóa {role}",
+      "deleteTitle": "Xóa vai trò này?",
+      "deleteDescription": "Xóa {role} sẽ gỡ quyền của vai trò này khỏi mọi thành viên được gán. Không thể hoàn tác.",
+      "deleteConfirm": "Xóa vai trò",
+      "empty": "Chưa có vai trò",
+      "emptyDescription": "Tạo một vai trò để bắt đầu gán quyền.",
+      "error": "Không tải được vai trò",
+      "errorDescription": "Không lấy được dữ liệu. Vui lòng thử lại sau giây lát.",
+      "denied": "Bạn không có quyền xem vai trò",
+      "deniedDescription": "Hãy đề nghị quản trị viên cấp quyền truy cập.",
+      "loading": "Đang tải vai trò…",
+      "noDetail": "Chọn một vai trò để xem chi tiết"
     }
   },
   "dataDisplay": {
@@ -182,6 +213,21 @@
     "listRow": {
       "unread": "Chưa đọc",
       "read": "Đã đọc"
+    },
+    "permissionMatrix": {
+      "caption": "Ma trận vai trò và quyền",
+      "permissionColumn": "Quyền",
+      "granted": "Được phép",
+      "notGranted": "Không được phép",
+      "difference": "Khác biệt",
+      "toggle": "Cấp {permission} cho {role}",
+      "locked": "Đã khóa",
+      "empty": "Chưa có quyền nào để hiển thị",
+      "error": "Không tải được ma trận quyền",
+      "errorDescription": "Không lấy được dữ liệu. Vui lòng thử lại sau giây lát.",
+      "denied": "Bạn không có quyền xem ma trận này",
+      "deniedDescription": "Hãy đề nghị quản trị viên cấp quyền truy cập.",
+      "loading": "Đang tải quyền…"
     }
   },
   "ui": {
@@ -232,7 +278,7 @@
     },
     "filterBar": {
       "appliedFilters": "Bộ lọc đang áp dụng",
-      "removeFilter": "Bỏ bộ lọc {label}",
+      "removeFilter": "Bỏ bộ lọc: {label}",
       "resultCount": "{count} kết quả"
     },
     "localePicker": {

package/dist/props/components/data-display.prop.d.ts

@@ -62,25 +62,9 @@ export type DescriptionsItemProp = {
  */
 export type AvatarProp = React.ComponentPropsWithoutRef<"span"> & {
     shape?: AvatarShapeProp;
-    appearance?: AvatarAppearanceProp;
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
-/**
- * Avatar fill treatment.
- *
- * - `"default"` — the identity fill: `--muted` for a person, the solid brand mark for
- *   `shape="square"`.
- * - `"tinted"` — the **capability medallion**: a soft role wash behind a role-coloured glyph.
- *   This is the plate a capability/feature icon sits on (`shape="square" appearance="tinted"` for
- *   the canonical rounded square). It exists because the medallion is a composition — `Avatar` +
- *   a Lucide glyph, per docs/COMPOSITION-VS-COMPONENT.md — but its *tint* was not reachable from
- *   a token, so consumers were re-deriving `hsl(var(--primary) / 0.1)` in page CSS or giving up
- *   and rendering a bare glyph. Retune with `--avatar-tinted-*`.
- *
- * @see Avatar
- */
-export type AvatarAppearanceProp = "default" | "tinted";
 /** @see Badge */
 export type BadgeProp = {
     variant?: "default" | "secondary" | "outline";
@@ -229,3 +213,69 @@ export type ListRowProp = {
     unread?: boolean;
     className?: ClassNameProp;
 };
+/** @see PermissionMatrix — one role COLUMN. Domain data is consumer-supplied; nothing is encoded. */
+export type PermissionMatrixRoleProp = {
+    /** Stable role id — the `roleId` half of a grant key. */
+    id: string;
+    /** Human role name (also used in accessible cell labels, so a plain string). */
+    name: string;
+    /** Short hint under the role name (e.g. member count or scope). */
+    description?: string;
+    /** A locked role renders read-only cells even when the matrix is editable. */
+    locked?: boolean;
+};
+/** @see PermissionMatrix — one permission ROW. */
+export type PermissionMatrixPermissionProp = {
+    /** Stable permission id — the `permissionId` half of a grant key. */
+    id: string;
+    /** Human permission name (also used in accessible cell labels, so a plain string). */
+    name: string;
+    /** Secondary line under the permission name. */
+    description?: string;
+    /** Optional category caption rendered with the description (e.g. 請求 / レポート). */
+    group?: string;
+};
+/**
+ * @see PermissionMatrix — the grant relation. Either the `grantKey(roleId, permissionId)` `Set`
+ * from `@godxjp/ui/lib/permission-grid` (O(1), the canonical form) or a plain pair array, which the
+ * matrix normalizes through the same `grantKey` encoding.
+ */
+export type PermissionMatrixGrantsProp = ReadonlySet<string> | readonly {
+    roleId: string;
+    permissionId: string;
+}[];
+/** @see PermissionMatrix */
+export type PermissionMatrixProp = {
+    /** Role columns, in render order. */
+    roles: readonly PermissionMatrixRoleProp[];
+    /** Permission rows, in render order. */
+    permissions: readonly PermissionMatrixPermissionProp[];
+    /** The grant relation (see {@link PermissionMatrixGrantsProp}). */
+    grants: PermissionMatrixGrantsProp;
+    /**
+     * Grant toggle handler. Its PRESENCE makes the matrix editable (checkbox cells); omitted, the
+     * matrix is the canonical read-only ✓/— grid. Locked roles and `readOnly` stay read-only
+     * regardless.
+     */
+    onGrantChange?: (roleId: string, permissionId: string, granted: boolean) => void;
+    /** Force the read-only grid even when `onGrantChange` is present (e.g. viewer permission). */
+    readOnly?: boolean;
+    /** Two role ids to compare side by side; highlights their columns and the differing rows. */
+    compare?: readonly [string, string] | null;
+    /** With `compare`, keep only the rows on which the two roles differ (差分のみ). */
+    diffOnly?: boolean;
+    /** Accessible name for the grid. Defaults to the localized caption. */
+    label?: LabelProp;
+    /** Show the loading skeleton instead of the grid. Precedence: loading → denied → error → empty. */
+    loading?: boolean;
+    /** Custom empty content when `permissions` is empty; defaults to a localized EmptyState. */
+    empty?: React.ReactNode;
+    /** Failure state (mirrors DataTable #216): `true` = built-in localized message, node = replace. */
+    error?: React.ReactNode;
+    /** Permission-denied state — refused, not failed. Takes precedence over `error`. */
+    denied?: React.ReactNode;
+    /** Retry handler for the built-in `error` state; omit to hide the retry action. */
+    onRetry?: HandlerProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+};

package/dist/props/components/data-entry.prop.d.ts

@@ -16,13 +16,6 @@ export type InputOTPGroupAppearanceProp = "slots" | "grouped";
 export type InputOTPGroupProp = React.HTMLAttributes<HTMLDivElement> & {
     appearance?: InputOTPGroupAppearanceProp;
 };
-/**
- * Main-axis alignment of the whole code row (groups + separators) inside its container.
- * `start` is the historical default. A centred challenge is the common auth case and used to
- * force every consumer to wrap `.ui-otp-container` in their own flex-centring div.
- * @see InputOTP
- */
-export type InputOTPAlignProp = "start" | "center" | "end";
 /** @see Input */
 export type InputProp = React.InputHTMLAttributes<HTMLInputElement> & {
     /** Show an inline ✕ that clears the field while it holds text (default false). */
@@ -517,3 +510,57 @@ export type TransferProp = FieldA11yProps & {
     selectedKeys?: [string[], string[]];
     onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
 };
+/** @see BranchScopePicker — scope mode: every branch, or an explicit subset. */
+export type BranchScopeModeProp = "all" | "selected";
+/**
+ * @see BranchScopePicker — the picker value. `mode: "all"` ignores `branchIds`; `mode: "selected"`
+ * carries the checked branch ids.
+ */
+export type BranchScopeValueProp = {
+    mode: BranchScopeModeProp;
+    branchIds?: readonly string[];
+};
+/** @see BranchScopePicker — one selectable branch. Domain data is consumer-supplied. */
+export type BranchScopeOptionProp = {
+    /** Stable branch id. */
+    id: string;
+    /** Human branch name (also the search haystack, so a plain string). */
+    name: string;
+    /** Secondary line under the branch name (e.g. an address or code). */
+    description?: string;
+    /** Keep the branch visible but unselectable. */
+    disabled?: boolean;
+};
+/** @see BranchScopePicker */
+export type BranchScopePickerProp = FieldA11yProps & {
+    /** The selectable branches. */
+    branches: readonly BranchScopeOptionProp[];
+    /** Controlled value. */
+    value?: BranchScopeValueProp;
+    /** Uncontrolled initial value. Default `{ mode: "all" }`. */
+    defaultValue?: BranchScopeValueProp;
+    /** Value change handler (fires for mode switches AND branch checks). */
+    onValueChange?: (value: BranchScopeValueProp) => void;
+    /** Disable the whole control. */
+    disabled?: DisabledProp;
+    /** Render the current value without any editable affordance (locked view). */
+    readOnly?: boolean;
+    /** Show a branch search input above the list once there is anything to search. Default `true`. */
+    searchable?: boolean;
+    /** Validation message under the control (wired via `aria-errormessage`/`aria-invalid`). */
+    error?: ErrorProp;
+    /** Show the loading skeleton instead of the list. Precedence: loading → denied → listError → empty. */
+    loading?: boolean;
+    /** Custom empty content when `branches` is empty; defaults to a localized message. */
+    empty?: React.ReactNode;
+    /** Branch-collection READ failure (distinct from `error`, which is field validation). */
+    listError?: React.ReactNode;
+    /** Permission-denied state — the branch read was refused. Takes precedence over `listError`. */
+    denied?: React.ReactNode;
+    /** Radio labels override (localized defaults otherwise). */
+    allLabel?: React.ReactNode;
+    selectedLabel?: React.ReactNode;
+    name?: NameProp;
+    id?: IdProp;
+    className?: ClassNameProp;
+};

package/dist/props/components/feedback.prop.d.ts

@@ -43,9 +43,9 @@ export type AlertProp = React.HTMLAttributes<HTMLDivElement> & {
     children?: ChildrenProp;
 };
 /**
- * @see Banner — page-level Alert. `variant` is fixed to `"banner"` by the alias, so it is the one
- * prop a Banner does not take; everything else (tone, icon, onDismiss, children) is Alert's
- * contract verbatim. gh#255.
+ * @see Banner — the full-bleed attention strip (`<Alert variant="banner">` with the variant fixed).
+ * Same contract as {@link AlertProp} minus `variant`: `tone` owns colour + live-region politeness,
+ * `icon`/`icon={false}` owns the leading glyph, `onDismiss` renders the built-in dismiss button.
  */
 export type BannerProp = Omit<AlertProp, "variant">;
 /** @see AlertTitle */

package/dist/props/components/general.prop.d.ts

@@ -12,8 +12,15 @@ export type TextProp = Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
     /** Weight (system 2-weight: 400/500). Default `regular`. */
     weight?: FontWeightProp;
     align?: TextAlignProp;
-    /** Single-line ellipsis. */
+    /** Single-line ellipsis. Mutually exclusive with `clamp` — when both are set, `clamp` wins. */
     truncate?: boolean;
+    /**
+     * Multi-line clamp — max rendered lines (integer ≥ 1); overflow ends in an ellipsis.
+     * Token-owned line-clamp styling (never write the `line-clamp-N` utility page-side).
+     * Visual-only: the full text stays in the DOM / accessible name. Mutually exclusive with
+     * `truncate` — when both are set, `clamp` wins (dev builds warn).
+     */
+    clamp?: number;
     /** Tabular figures for aligned numbers. */
     tabular?: boolean;
     /** Monospace family (codes, ids). */

package/dist/props/components/layout.prop.d.ts

@@ -1,7 +1,7 @@
 /** Layout component prop types — @see docs/COMPONENTS.md#layout */
 import type * as React from "react";
 import type { ComponentType, ReactNode, SVGProps } from "react";
-import type { BreadcrumbProp, TitleProp, SubtitleProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, BreakpointProp, GapProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp } from "../vocabulary/index.js";
+import type { BreadcrumbProp, TitleProp, SubtitleProp, StatusProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, BreakpointProp, GapProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp } from "../vocabulary/index.js";
 import type { EmptyStateToneProp } from "./data-display.prop.js";
 /**
  * Arrangement of the page header's title band and its `extra` slot below the 640px step.
@@ -24,55 +24,20 @@ export type PageContainerPresetProp = "default" | "admin-collection";
  * fluid at the compact gutter.
  */
 export type PageContainerMeasureProp = "default" | "narrow" | "medium";
-/**
- * @see PageHeader — the canonical page title band, extracted from PageContainer so a consumer can
- * mount the SAME token-owned geometry outside a full page shell (a Sheet detail, a MasterDetail
- * pane, a tab body) instead of re-authoring `.ui-page-header` CSS locally (gh#255).
- */
-export type PageHeaderProp = {
-    title: TitleProp;
-    subtitle?: SubtitleProp;
-    /**
-     * Status / meta band rendered INLINE with the title (a `Badge` tone, an ID, a timestamp).
-     * Omitted → the title band emits its historical single-`<h1>` DOM, so no existing page moves.
-     */
-    meta?: ReactNode;
-    /** Trailing action region — buttons, a search field, an overflow menu. */
-    extra?: ExtraProp;
-    breadcrumb?: BreadcrumbProp;
-    /**
-     * Override the breadcrumb `<nav>` landmark's accessible name. Defaults to a localized
-     * "Breadcrumb". Needed when more than one header (each with its own `breadcrumb`) renders on the
-     * same page/view — two `<nav>` landmarks sharing one name/role fail axe's `landmark-unique`
-     * (WCAG 2.4.1 / 1.3.1).
-     */
-    breadcrumbLabel?: string;
-    /** Kebab/DOM-style alias of `breadcrumbLabel` (same landmark-unique override). */
-    breadcrumbAriaLabel?: string;
-    linkComponent?: React.ElementType;
-    /**
-     * How the title band and `extra` share the header row below the 640px step. Defaults to
-     * `stack`. @see PageContainerHeaderLayoutProp
-     */
-    layout?: PageContainerHeaderLayoutProp;
-    /**
-     * Pending state for the title band while the page's own data resolves. Renders the title/subtitle
-     * /meta as `Skeleton` placeholders and marks the header `aria-busy`, keeping the `<h1>` in the
-     * document with an accessible name (an empty heading is an axe violation) so the page's heading
-     * outline never disappears mid-load. Breadcrumbs and `extra` are NOT skeletonised — they come
-     * from the route, not the record.
-     */
-    loading?: boolean;
-    className?: ClassNameProp;
-};
 /** @see PageContainer */
 export type PageContainerProp = {
     title: TitleProp;
     subtitle?: SubtitleProp;
-    /** Status / meta band rendered inline with the title. @see PageHeaderProp.meta */
-    meta?: ReactNode;
-    /** Skeletonise the title band while the page record loads. @see PageHeaderProp.loading */
-    headerLoading?: boolean;
+    /**
+     * Status/meta band rendered beside the title inside the heading — StatusBadge, environment
+     * tag, "updated …" meta text. Geometry is token-owned (`--page-header-status-gap`): the band
+     * sits on the title line and WRAPS under it on compact viewports, so a consumer never
+     * hand-lays a badge next to an `<h1>`. Part of the canonical page-header contract
+     * (godxjp-ui#255): PageContainer's embedded header IS the DXS `PageHeader` — breadcrumbs
+     * (`breadcrumb`), title, subtitle, status/meta (this), actions (`extra`) and responsive
+     * overflow (`headerLayout` / `measure`) all live on this one renderer.
+     */
+    status?: StatusProp;
     extra?: ExtraProp;
     footer?: FooterProp;
     breadcrumb?: BreadcrumbProp;
@@ -276,8 +241,8 @@ export type AuthShellProp = {
     /**
      * Named flow MEASURE — the page geometry contract for one canonical hosted-identity flow: the
      * auth card's max-width plus the desktop and mobile page gutters, all owned by component tokens
-     * (`--auth-shell-{login,device,context,recovery}-*`). Selecting a preset replaces every
-     * consumer-side geometry override.
+     * (`--auth-shell-{login,registration,device,context,recovery}-*`). Selecting a preset replaces
+     * every consumer-side geometry override.
      *
      * - `"default"` (default) — the shell's own measure; nothing changes.
      * - `"login"` — SCR-001's 360px card at x=540/332/15 and y=363/363/353 for the canonical
@@ -286,13 +251,14 @@ export type AuthShellProp = {
      *   position without truncating or inventing requester data. Pass AuthIdentity, Card and
      *   AuthFooter as direct children (an anchor may wrap AuthIdentity).
      * - `"registration"` — the 360px sign-up measure with a 15px inline gutter at 390px (the same
-     *   page rhythm as `"login"`, so sign-in → sign-up never jumps on a phone). The ONLY preset whose
-     *   column is START-aligned: a registration card is the tallest surface in the hosted-identity
-     *   set (name · email · password · confirm · strength · consent · submit · providers), and a
+     *   page rhythm as `"login"`, so sign-in → sign-up never jumps on a phone). START-aligned like
+     *   login, because a registration card is the tallest surface in the hosted-identity set
+     *   (name · email · password · confirm · strength · consent · submit · providers) and a
      *   vertically centred tall card overflows ABOVE the scroll origin on a short viewport, putting
-     *   its first field out of reach. It is also the only preset with a footer-clearance knob of its
-     *   own, so the legal/consent footer never sits flush against the submit button. Carries the full
-     *   password form and the pending-email confirmation state with no consumer geometry CSS.
+     *   its first field out of reach — start-aligned, a long form simply scrolls. It is also the
+     *   only preset with a footer-clearance knob of its own, so the legal/consent footer never sits
+     *   flush against the submit button. Carries the full password form and the pending-email
+     *   confirmation state with no consumer geometry CSS.
      * - `"device-authorization"` — 380px card measure with a 5px inline page gutter at a 390px
      *   viewport (canonical device-grant artboard).
      * - `"context-selection"` — 25rem card measure on desktop/tablet, edge-to-edge on mobile, and a
@@ -814,3 +780,58 @@ export type LegalDocumentShellProp = {
     id?: IdProp;
     className?: ClassNameProp;
 };
+/** @see ServiceRolePanel — one role in the master rail. Domain data is consumer-supplied. */
+export type ServiceRoleItemProp = {
+    /** Stable role id (the selection value). */
+    id: string;
+    /** Human role name (also used in accessible labels, so a plain string). */
+    name: string;
+    /** Secondary line under the role name. */
+    description?: string;
+    /** Member count caption, pluralized via CLDR. */
+    memberCount?: number;
+    /** A locked (system) role shows a lock badge and never offers deletion. */
+    locked?: boolean;
+};
+/** @see ServiceRolePanel */
+export type ServiceRolePanelProp = {
+    /** The roles in the master collection, in render order. */
+    roles: readonly ServiceRoleItemProp[];
+    /** Controlled selected role id. */
+    value?: string;
+    /** Uncontrolled initial selected role id. Defaults to the first role. */
+    defaultValue?: string;
+    /** Selection change handler. */
+    onValueChange?: (roleId: string) => void;
+    /**
+     * Detail surface for the current selection. A render function receives the selected role
+     * (or `undefined` when nothing is selected); a plain node is rendered as-is.
+     */
+    children?: ReactNode | ((role: ServiceRoleItemProp | undefined) => ReactNode);
+    /**
+     * Confirmed-deletion handler. Its PRESENCE adds a delete affordance per non-locked role behind
+     * the built-in destructive `AlertDialog`; the handler fires only AFTER the user confirms.
+     */
+    onDeleteRole?: (roleId: string) => void;
+    /** Hide every mutating affordance (locked view). */
+    readOnly?: boolean;
+    /** Show the loading skeleton instead of the panel. Precedence: loading → denied → error → empty. */
+    loading?: boolean;
+    /** Custom empty content when `roles` is empty; defaults to a localized EmptyState. */
+    empty?: ReactNode;
+    /** Failure state: `true` = built-in localized message, any other node replaces it. */
+    error?: ReactNode;
+    /** Permission-denied state — refused, not failed. Takes precedence over `error`. */
+    denied?: ReactNode;
+    /** Retry handler for the built-in `error` state; omit to hide the retry action. */
+    onRetry?: () => void;
+    /** Accessible names for the two regions (localized defaults otherwise). */
+    masterLabel?: string;
+    detailLabel?: string;
+    /** Forwarded MasterDetail geometry. */
+    railWidth?: MasterDetailRailWidthProp;
+    masterViewport?: MasterDetailMasterViewportProp;
+    collapseBelow?: BreakpointProp | false;
+    id?: IdProp;
+    className?: ClassNameProp;
+};