@godxjp/ui 18.8.0 → 18.10.0

package/dist/components/data-entry/branch-scope-picker.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import type { BranchScopeValueProp } from "../../props/components/data-entry.prop.js";
+export type { BranchScopeModeProp, BranchScopeOptionProp, BranchScopePickerProp, BranchScopePickerProp as BranchScopePickerProps, BranchScopeValueProp, } from "../../props/components/data-entry.prop.js";
+/**
+ * BranchScopePicker — the canonical "all branches vs an explicit subset" scope control
+ * (gh#257 / DXS platform#311).
+ *
+ * A THIN formalized composition (the gh#251 lesson: a consumer cannot import a docs page): the
+ * mode switch is the real `RadioGroup`, the subset is the real `CheckboxGroup`, search is the real
+ * `SearchInput` — so keyboard behaviour (roving radios, Space on checkboxes) and the field-a11y
+ * contract (`aria-labelledby`/`aria-errormessage` via `FormField`) come from the primitives, not
+ * from new machinery. Domain data (the branches) is 100% consumer-supplied.
+ *
+ * - **Value** is a single controlled/uncontrolled object `{ mode, branchIds }`, so a form treats
+ *   scope as ONE field. Switching back to `all` PRESERVES `branchIds` — an accidental mode flip
+ *   must not destroy a curated subset.
+ * - **Validation** (`error`) renders the message and wires `aria-invalid`/`aria-errormessage` onto
+ *   the radiogroup widget; collection READ failures are `listError`/`denied`, mirroring the
+ *   DataTable #216 vocabulary (precedence `loading` → `denied` → `listError` → `empty`).
+ * - **`readOnly`** renders the current scope as a static summary (mode + branch badges) with no
+ *   editable affordance; `disabled` keeps the controls visible but inert.
+ * - **Responsive**: a single-column stack; the branch list scrolls inside its own bounded box, so
+ *   the control keeps one measure at 1440/1024/390.
+ */
+export declare const BranchScopePicker: React.ForwardRefExoticComponent<import("../../lib/field-a11y.js").FieldA11yProps & {
+    branches: readonly import("./branch-scope-picker.js").BranchScopeOptionProp[];
+    value?: BranchScopeValueProp;
+    defaultValue?: BranchScopeValueProp;
+    onValueChange?: (value: BranchScopeValueProp) => void;
+    disabled?: import("../../props/index.js").DisabledProp;
+    readOnly?: boolean;
+    searchable?: boolean;
+    error?: import("../../props/index.js").ErrorProp;
+    loading?: boolean;
+    empty?: React.ReactNode;
+    listError?: React.ReactNode;
+    denied?: React.ReactNode;
+    allLabel?: React.ReactNode;
+    selectedLabel?: React.ReactNode;
+    name?: import("../../props/index.js").NameProp;
+    id?: import("../../props/index.js").IdProp;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-entry/branch-scope-picker.js

@@ -0,0 +1,200 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertCircle, ShieldAlert } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { mergeAriaIds, pickFieldA11y } from "../../lib/field-a11y.js";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../data-display/badge.js";
+import { EmptyState } from "../data-display/empty-state.js";
+import { SkeletonRows } from "../feedback/skeleton.js";
+import { Text } from "../general/typography.js";
+import { CheckboxGroup } from "./checkbox-group.js";
+import { RadioGroup } from "./radio.js";
+import { SearchInput } from "./search-input.js";
+const DEFAULT_VALUE = { mode: "all" };
+const BranchScopePicker = React.forwardRef(
+  function BranchScopePicker2({
+    branches,
+    value: controlledValue,
+    defaultValue = DEFAULT_VALUE,
+    onValueChange,
+    disabled = false,
+    readOnly = false,
+    searchable = true,
+    error,
+    loading = false,
+    empty,
+    listError,
+    denied,
+    allLabel,
+    selectedLabel,
+    name,
+    id,
+    className,
+    ...ariaProps
+  }, ref) {
+    const { t } = useTranslation();
+    const reactId = React.useId();
+    const rootId = id ?? `branch-scope-${reactId}`;
+    const errorId = `${rootId}-error`;
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const value = controlledValue ?? uncontrolled;
+    const branchIds = React.useMemo(() => value.branchIds ?? [], [value.branchIds]);
+    const commit = (next) => {
+      if (controlledValue === void 0) setUncontrolled(next);
+      onValueChange?.(next);
+    };
+    const [search, setSearch] = React.useState("");
+    const filtered = React.useMemo(() => {
+      const term = search.trim().toLocaleLowerCase();
+      if (term === "") return branches;
+      return branches.filter(
+        (branch) => `${branch.name} ${branch.description ?? ""}`.toLocaleLowerCase().includes(term)
+      );
+    }, [branches, search]);
+    const fieldA11y = pickFieldA11y(ariaProps);
+    const invalid = error !== void 0 && error !== null && error !== false;
+    const isDenied = denied !== void 0 && denied !== null && denied !== false;
+    const isListError = listError !== void 0 && listError !== null && listError !== false;
+    const resolvedAllLabel = allLabel ?? t("dataEntry.branchScope.all");
+    const resolvedSelectedLabel = selectedLabel ?? t("dataEntry.branchScope.selected");
+    const surface = (children) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: rootId,
+        "data-slot": "branch-scope-picker",
+        "data-readonly": readOnly || void 0,
+        className: cn("ui-branch-scope-picker flex flex-col gap-3", className),
+        children
+      }
+    );
+    if (loading) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": t("dataEntry.branchScope.loading"), role: "status", children: /* @__PURE__ */ jsx(SkeletonRows, { rows: 4, columns: 2 }) })
+      );
+    }
+    if (isDenied) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: denied === true ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: ShieldAlert,
+            tone: "warning",
+            variant: "compact",
+            title: t("dataEntry.branchScope.denied"),
+            titleAs: "p"
+          }
+        ) : denied })
+      );
+    }
+    if (isListError) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { role: "alert", children: listError === true ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: AlertCircle,
+            tone: "destructive",
+            variant: "compact",
+            title: t("dataEntry.branchScope.error"),
+            titleAs: "p"
+          }
+        ) : listError })
+      );
+    }
+    if (branches.length === 0) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: empty ?? /* @__PURE__ */ jsx(EmptyState, { variant: "compact", title: t("dataEntry.branchScope.empty"), titleAs: "p" }) })
+      );
+    }
+    if (readOnly) {
+      const selectedBranches = branches.filter((branch) => branchIds.includes(branch.id));
+      return surface(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", weight: "medium", children: value.mode === "all" ? resolvedAllLabel : resolvedSelectedLabel }),
+          value.mode === "selected" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: selectedBranches.map((branch) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: branch.name }, branch.id)) })
+        ] })
+      );
+    }
+    return surface(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            value: value.mode,
+            onValueChange: (mode) => {
+              commit({ ...value, mode });
+            },
+            options: [
+              {
+                value: "all",
+                label: resolvedAllLabel,
+                description: allLabel === void 0 ? t("dataEntry.branchScope.allDescription") : void 0
+              },
+              {
+                value: "selected",
+                label: resolvedSelectedLabel,
+                description: selectedLabel === void 0 ? t("dataEntry.branchScope.selectedDescription") : void 0
+              }
+            ],
+            disabled,
+            name,
+            ...fieldA11y,
+            "aria-invalid": invalid ? true : fieldA11y["aria-invalid"],
+            "aria-errormessage": invalid ? mergeAriaIds(errorId, fieldA11y["aria-errormessage"]) : void 0
+          }
+        ),
+        value.mode === "selected" && /* @__PURE__ */ jsxs("div", { className: "border-border flex flex-col gap-2 border-s-2 ps-4", children: [
+          searchable && branches.length > 0 && /* @__PURE__ */ jsx(
+            SearchInput,
+            {
+              value: search,
+              onValueChange: setSearch,
+              debounce: 0,
+              placeholder: t("dataEntry.branchScope.searchPlaceholder"),
+              ariaLabel: t("dataEntry.branchScope.searchPlaceholder")
+            }
+          ),
+          filtered.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", "aria-live": "polite", children: t("dataEntry.branchScope.noMatches") }) : (
+            // A bounded list is a scroll container, so it MUST be reachable and scrollable
+            // with the keyboard alone even when every row is unfocusable (all checkboxes
+            // `disabled`) — WCAG 2.1.1 / axe `scrollable-region-focusable`; same contract as
+            // MasterDetail's bounded master region. It is an ordinary tab stop (no trap), and
+            // it carries the group's accessible name so the stop is announced meaningfully —
+            // the inner CheckboxGroup deliberately no longer duplicates that label.
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "group",
+                "aria-label": t("dataEntry.branchScope.listLabel"),
+                tabIndex: 0,
+                className: "max-h-64 overflow-y-auto",
+                children: /* @__PURE__ */ jsx(
+                  CheckboxGroup,
+                  {
+                    value: [...branchIds],
+                    onValueChange: (next) => commit({ mode: "selected", branchIds: next }),
+                    options: filtered.map((branch) => ({
+                      value: branch.id,
+                      label: branch.name,
+                      description: branch.description,
+                      disabled: branch.disabled
+                    })),
+                    disabled
+                  }
+                )
+              }
+            )
+          ),
+          /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", "aria-live": "polite", children: t("dataEntry.branchScope.selectedCount", { count: branchIds.length }) })
+        ] }),
+        invalid && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error })
+      ] })
+    );
+  }
+);
+BranchScopePicker.displayName = "BranchScopePicker";
+export {
+  BranchScopePicker
+};

package/dist/components/data-entry/command-palette.js

@@ -80,7 +80,14 @@ function CommandPalette({
           /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: labels.title }),
           /* @__PURE__ */ jsx(Dialog.Description, { id: "ui-command-palette-description", className: "sr-only", children: labels.description }),
           /* @__PURE__ */ jsxs(Command, { label: labels.title, children: [
-            /* @__PURE__ */ jsx(CommandInput, { autoFocus: true, placeholder: labels.placeholder, "aria-label": labels.placeholder }),
+            /* @__PURE__ */ jsx(
+              CommandInput,
+              {
+                autoFocus: true,
+                placeholder: labels.placeholder,
+                "aria-label": labels.placeholder
+              }
+            ),
             /* @__PURE__ */ jsx(CommandList, { "aria-busy": loading, children: loading ? /* @__PURE__ */ jsx("div", { className: "ui-command-palette-state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsx("div", { className: "ui-command-palette-state", role: "alert", children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }),
               groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: group.items.map((item) => /* @__PURE__ */ jsxs(

package/dist/components/data-entry/index.d.ts

@@ -60,3 +60,5 @@ export { Rating } from "./rating.js";
 export type { RatingProps } from "./rating.js";
 export { TagInput } from "./tag-input.js";
 export type { TagInputProps } from "./tag-input.js";
+export { BranchScopePicker } from "./branch-scope-picker.js";
+export type { BranchScopeModeProp, BranchScopeOptionProp, BranchScopePickerProp, BranchScopePickerProps, BranchScopeValueProp, } from "./branch-scope-picker.js";

package/dist/components/data-entry/index.js

@@ -50,7 +50,9 @@ import { PasswordStrength, usePasswordStrength } from "./password-strength.js";
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./input-otp.js";
 import { Rating } from "./rating.js";
 import { TagInput } from "./tag-input.js";
+import { BranchScopePicker } from "./branch-scope-picker.js";
 export {
+  BranchScopePicker,
   Calendar,
   Cascader,
   Checkbox,

package/dist/components/data-entry/input-otp.d.ts

@@ -1,2 +1,2 @@
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "../ui/input-otp.js";
-export type { InputOTPAlignProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, } from "../ui/input-otp.js";
+export type { InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, } from "../ui/input-otp.js";

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { ToneProp } from "../../props/vocabulary/index.js";
-import type { AlertQueryErrorProp, BannerProp } from "../../props/components/feedback.prop.js";
-export type { BannerProp, BannerProp as BannerProps, AlertProp, AlertProp as AlertProps, AlertTitleProp, AlertTitleProp as AlertTitleProps, AlertContentProp, AlertContentProp as AlertContentProps, AlertDescriptionProp, AlertDescriptionProp as AlertDescriptionProps, AlertActionsProp, AlertActionsProp as AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProp as AlertQueryErrorProps, } from "../../props/components/feedback.prop.js";
+import type { AlertQueryErrorProp } from "../../props/components/feedback.prop.js";
+export type { AlertProp, AlertProp as AlertProps, AlertTitleProp, AlertTitleProp as AlertTitleProps, AlertContentProp, AlertContentProp as AlertContentProps, AlertDescriptionProp, AlertDescriptionProp as AlertDescriptionProps, AlertActionsProp, AlertActionsProp as AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProp as AlertQueryErrorProps, } from "../../props/components/feedback.prop.js";
 declare const AlertBase: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     variant?: import("../../props/index.js").AlertVariantProp;
     tone?: ToneProp;
@@ -63,22 +63,4 @@ export declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes
     } & React.RefAttributes<HTMLDivElement>>;
     QueryError: typeof AlertQueryError;
 };
-export declare const Banner: React.ForwardRefExoticComponent<BannerProp & React.RefAttributes<HTMLDivElement>> & {
-    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
-        className?: import("../../props/index.js").ClassNameProp;
-        children?: import("../../props/index.js").ChildrenProp;
-    } & React.RefAttributes<HTMLParagraphElement>>;
-    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-        className?: import("../../props/index.js").ClassNameProp;
-        children?: import("../../props/index.js").ChildrenProp;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
-        className?: import("../../props/index.js").ClassNameProp;
-        children?: import("../../props/index.js").ChildrenProp;
-    } & React.RefAttributes<HTMLParagraphElement>>;
-    Actions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-        className?: import("../../props/index.js").ClassNameProp;
-        children?: import("../../props/index.js").ChildrenProp;
-    } & React.RefAttributes<HTMLDivElement>>;
-};
 export { AlertBase };

package/dist/components/feedback/alert.js

@@ -159,15 +159,6 @@ const Alert = Object.assign(AlertBase, {
   Actions: AlertActions,
   QueryError: AlertQueryError
 });
-const BannerBase = React.forwardRef(function Banner(props, ref) {
-  return /* @__PURE__ */ jsx(AlertBase, { ...props, ref, variant: "banner" });
-});
-const Banner2 = Object.assign(BannerBase, {
-  Title: AlertTitle,
-  Content: AlertContent,
-  Description: AlertDescription,
-  Actions: AlertActions
-});
 export {
   Alert,
   AlertActions,
@@ -175,6 +166,5 @@ export {
   AlertContent,
   AlertDescription,
   AlertQueryError,
-  AlertTitle,
-  Banner2 as Banner
+  AlertTitle
 };

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { BannerProp } from "../../props/components/feedback.prop.js";
+export type { BannerProp, BannerProp as BannerProps } from "../../props/components/feedback.prop.js";
+export declare const Banner: React.ForwardRefExoticComponent<BannerProp & React.RefAttributes<HTMLDivElement>> & {
+    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Actions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/feedback/banner.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertActions, AlertBase, AlertContent, AlertDescription, AlertTitle } from "./alert.js";
+const BannerBase = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(AlertBase, { ref, variant: "banner", ...props }));
+BannerBase.displayName = "Banner";
+const Banner = Object.assign(BannerBase, {
+  Title: AlertTitle,
+  Content: AlertContent,
+  Description: AlertDescription,
+  Actions: AlertActions
+});
+export {
+  Banner
+};

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

@@ -8,6 +8,8 @@ export { Toaster } from "./sonner.js";
 export { toast } from "./use-toast.js";
 export { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat } from "./skeleton.js";
 export type { SkeletonProps } from "./skeleton.js";
-export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, Banner, } from "./alert.js";
-export type { BannerProp, BannerProps, AlertProp, AlertProps, AlertTitleProp, AlertTitleProps, AlertContentProp, AlertContentProps, AlertDescriptionProp, AlertDescriptionProps, AlertActionsProp, AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProps, } from "./alert.js";
+export { Banner } from "./banner.js";
+export type { BannerProp, BannerProps } from "./banner.js";
+export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, } from "./alert.js";
+export type { AlertProp, AlertProps, AlertTitleProp, AlertTitleProps, AlertContentProp, AlertContentProps, AlertDescriptionProp, AlertDescriptionProps, AlertActionsProp, AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProps, } from "./alert.js";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";

package/dist/components/feedback/index.js

@@ -43,14 +43,14 @@ import { TwoFactorSetup } from "./two-factor-setup.js";
 import { Toaster } from "./sonner.js";
 import { toast } from "./use-toast.js";
 import { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat } from "./skeleton.js";
+import { Banner } from "./banner.js";
 import {
   Alert,
   AlertTitle,
   AlertContent,
   AlertDescription,
   AlertActions,
-  AlertQueryError,
-  Banner
+  AlertQueryError
 } from "./alert.js";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";
 export {

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

@@ -13,6 +13,7 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     weight?: import("../../props/index.js").FontWeightProp;
     align?: import("../../props/index.js").TextAlignProp;
     truncate?: boolean;
+    clamp?: number;
     tabular?: boolean;
     mono?: boolean;
     htmlFor?: string;

package/dist/components/general/typography.js

@@ -8,23 +8,42 @@ const Text = React.forwardRef(
     weight = "regular",
     align,
     truncate,
+    clamp,
     tabular,
     mono,
     className,
+    style,
     ...props
-  }, ref) => React.createElement(as, {
-    ref,
-    "data-slot": "text",
-    "data-size": size,
-    "data-tone": tone,
-    "data-weight": weight,
-    "data-align": align,
-    "data-truncate": truncate ? "" : void 0,
-    "data-tabular": tabular ? "" : void 0,
-    "data-mono": mono ? "" : void 0,
-    className: cn("ui-text", className),
-    ...props
-  })
+  }, ref) => {
+    const clampLines = typeof clamp === "number" && Number.isFinite(clamp) && clamp >= 1 ? Math.floor(clamp) : void 0;
+    if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+      if (clamp !== void 0 && clampLines === void 0) {
+        console.warn(
+          `Text: \`clamp\` must be a finite number \u2265 1 (got ${String(clamp)}); ignored.`
+        );
+      }
+      if (truncate && clampLines !== void 0) {
+        console.warn(
+          "Text: `truncate` and `clamp` are mutually exclusive \u2014 `clamp` takes precedence; drop `truncate`."
+        );
+      }
+    }
+    return React.createElement(as, {
+      ref,
+      "data-slot": "text",
+      "data-size": size,
+      "data-tone": tone,
+      "data-weight": weight,
+      "data-align": align,
+      "data-truncate": truncate && clampLines === void 0 ? "" : void 0,
+      "data-clamp": clampLines !== void 0 ? "" : void 0,
+      style: clampLines !== void 0 ? { ...style, "--text-clamp": clampLines } : style,
+      "data-tabular": tabular ? "" : void 0,
+      "data-mono": mono ? "" : void 0,
+      className: cn("ui-text", className),
+      ...props
+    });
+  }
 );
 Text.displayName = "Text";
 const Heading = React.forwardRef(

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

@@ -10,8 +10,8 @@ export type { AuthShellProp, AuthShellProp as AuthShellProps, } from "../../prop
  *
  * `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, the only
- * START-aligned preset (a tall sign-up card must scroll, not clip its own top above the scroll
+ * 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

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

@@ -1,7 +1,5 @@
 export { PageContainer } from "./page-container.js";
 export type { PageContainerProp, PageContainerProps, BreadcrumbItem, BreadcrumbItemProp, } from "./page-container.js";
-export { PageHeader } from "./page-header.js";
-export type { PageHeaderProp, PageHeaderProps } from "./page-header.js";
 export { Flex } from "./flex.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProps, } from "./flex.js";
 export { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
@@ -44,3 +42,5 @@ export { Separator } from "./separator.js";
 export { AspectRatio } from "./aspect-ratio.js";
 export { LegalDocumentShell } from "./legal-document-shell.js";
 export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProps, } from "./legal-document-shell.js";
+export { ServiceRolePanel } from "./service-role-panel.js";
+export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProps, } from "./service-role-panel.js";

package/dist/components/layout/index.js

@@ -1,5 +1,4 @@
 import { PageContainer } from "./page-container.js";
-import { PageHeader } from "./page-header.js";
 import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { AppShell } from "./app-shell.js";
@@ -21,6 +20,7 @@ import { SplitPane } from "./split-pane.js";
 import { Separator } from "./separator.js";
 import { AspectRatio } from "./aspect-ratio.js";
 import { LegalDocumentShell } from "./legal-document-shell.js";
+import { ServiceRolePanel } from "./service-role-panel.js";
 export {
   AppShell,
   AspectRatio,
@@ -38,12 +38,12 @@ export {
   MasterDetail,
   OrgSwitcher,
   PageContainer,
-  PageHeader,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
   ResponsiveGrid,
   Separator,
+  ServiceRolePanel,
   Sidebar,
   SidebarHeader,
   SidebarItem,

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

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

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

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