@godxjp/ui 18.9.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.d.ts

@@ -29,50 +29,9 @@ export type CommandPaletteProps = {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /**
-     * Controlled search-box query. Pairs with `onSearchChange`; leave it out for the uncontrolled
-     * palette (seeded by `defaultSearch`). Same idiom as `SearchSelect`'s `search`.
-     */
-    search?: string;
-    /** Initial uncontrolled query, and the value the palette resets to when it closes. Default `""`. */
-    defaultSearch?: string;
-    /**
-     * Fires on every keystroke with the current query — the seam a server-backed group needs to run
-     * search-as-you-type. Also fires with `defaultSearch` when the palette closes.
-     */
-    onSearchChange?: (query: string) => void;
-    /**
-     * Whether the palette filters `groups` itself (cmdk's client-side fuzzy match). Set `false` when
-     * the QUERY is answered by a server and `groups` already holds the matches — otherwise every row
-     * is scored a second time against the same string and late-arriving matches are dropped.
-     *
-     * It also decides who owns the empty node; see the component doc block. Default `true`.
-     */
-    shouldFilter?: boolean;
     loading?: boolean;
     error?: React.ReactNode;
     trigger?: React.ReactNode;
     shortcut?: boolean;
 };
-/**
- * CommandPalette — the ⌘K search dialog.
- *
- * ## The empty-state contract (gh#412)
- *
- * `labels.empty` renders under exactly one rule, and which mechanism decides follows `shouldFilter`:
- *
- * - **`shouldFilter` (default, client-side)** — cmdk owns it: the palette holds items, the query
- *   matches none of them. Unchanged.
- * - **`shouldFilter={false}` (server-side)** — the PALETTE owns it, derived synchronously from
- *   props: the empty node renders when `groups` carries no items, and never while `loading` or
- *   `error` is set. cmdk's own empty node cannot be trusted here, because it is driven by a
- *   scheduled count of the items that have REGISTERED in the DOM, not by what the consumer knows —
- *   so an async group that populates a frame late flips it on and off and any assertion over it
- *   races. Reading `groups` instead makes "did we render the empty state?" a pure function of the
- *   props at that render, which is what a contract test can assert.
- *
- * The practical consequence for search-as-you-type: hold `loading` true for the whole in-flight
- * window. While it is true the palette shows `labels.loading` and never claims "no results" —
- * a request that has not answered yet is not an empty result.
- */
-export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, search: controlledSearch, defaultSearch, onSearchChange, shouldFilter, loading, error, trigger, shortcut, }: CommandPaletteProps): React.JSX.Element;
+export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, loading, error, trigger, shortcut, }: CommandPaletteProps): React.JSX.Element;

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

@@ -19,20 +19,14 @@ function CommandPalette({
   open: controlledOpen,
   defaultOpen = false,
   onOpenChange,
-  search: controlledSearch,
-  defaultSearch = "",
-  onSearchChange,
-  shouldFilter = true,
   loading = false,
   error,
   trigger,
   shortcut = true
 }) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
-  const [uncontrolledSearch, setUncontrolledSearch] = React.useState(defaultSearch);
   const shortcutRestoreFocusRef = React.useRef(null);
   const open = controlledOpen ?? uncontrolledOpen;
-  const search = controlledSearch ?? uncontrolledSearch;
   const setOpen = React.useCallback(
     (next) => {
       if (controlledOpen === void 0) {
@@ -42,22 +36,6 @@ function CommandPalette({
     },
     [controlledOpen, onOpenChange]
   );
-  const setSearch = React.useCallback(
-    (next) => {
-      if (controlledSearch === void 0) {
-        setUncontrolledSearch(next);
-      }
-      onSearchChange?.(next);
-    },
-    [controlledSearch, onSearchChange]
-  );
-  const previousOpenRef = React.useRef(open);
-  React.useEffect(() => {
-    const wasOpen = previousOpenRef.current;
-    previousOpenRef.current = open;
-    if (!wasOpen || open || search === defaultSearch) return;
-    setSearch(defaultSearch);
-  }, [open, search, defaultSearch, setSearch]);
   React.useEffect(() => {
     if (!shortcut) return;
     const handleKeyDown = (event) => {
@@ -72,7 +50,6 @@ function CommandPalette({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, setOpen, shortcut]);
-  const hasItems = React.useMemo(() => groups.some((group) => group.items.length > 0), [groups]);
   const triggerNode = trigger ?? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ui-command-palette-trigger", children: [
     /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
     /* @__PURE__ */ jsx("span", { children: labels.open }),
@@ -102,23 +79,17 @@ function CommandPalette({
         children: [
           /* @__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, shouldFilter, children: [
+          /* @__PURE__ */ jsxs(Command, { label: labels.title, children: [
             /* @__PURE__ */ jsx(
               CommandInput,
               {
                 autoFocus: true,
-                value: search,
-                onValueChange: setSearch,
                 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: [
-              shouldFilter ? /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }) : hasItems ? null : (
-                // Same node cmdk would have rendered (class + role), decided from `groups`
-                // instead of from its scheduled DOM-registration count — see the doc block.
-                /* @__PURE__ */ jsx("div", { className: "ui-command-empty", role: "presentation", children: labels.empty })
-              ),
+              /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }),
               groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: group.items.map((item) => /* @__PURE__ */ jsxs(
                 CommandItem,
                 {

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,