@godxjp/ui 33.22.1 → 33.24.0

package/agent/tokens.json

@@ -185,6 +185,24 @@
     "tier": "foundation",
     "value": "48 8% 13%"
   },
+  {
+    "description": "AGENT role — marks an AI agent (Avatar kind=\"agent\", AgentBadge) so it is never mistaken for a person. Violet, chosen apart from every status hue so \"AI\" never reads as a state. FILL #7c3aed under white ink measures 5.70:1; TEXT --text-agent #6d28d9 on white measures 7.10:1 (AA). #7c3aed",
+    "name": "--agent",
+    "tier": "foundation",
+    "value": "262 83% 58%"
+  },
+  {
+    "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.",
+    "name": "--agent-foreground",
+    "tier": "foundation",
+    "value": "0 0% 100%"
+  },
+  {
+    "description": "#6d28d9 — AA violet text on white",
+    "name": "--text-agent",
+    "tier": "foundation",
+    "value": "263 70% 50%"
+  },
   {
     "description": "IDENTITY role — the PRODUCT MARK colour (Logo `tone=\"success\"`, its wordmark, the email brand capsule). Neutral ink by default since v32 (gh#1220); the GoDX preset (`themes/godx.css`) sets it back to the violet of identity v2.3. It is deliberately distinct from two neighbours it keeps being confused with: · from --primary — a service re-theming its action colour must never recolour the mark. They hold the SAME VALUE by default and are still separate declarations; `brand-identity-role.test.ts` asserts on the DECLARATION, not the value, that this one never reads `var(--primary)` (gh#250). · from --success — 若竹 #68be8d is the STATUS green (badges, progress, \"saved\" text) and stays exactly as it is. The mark borrowed it once, rendering the identity at #69bf8e — ΔE76 ≈ 17.5 from the identity of the day, a plainly wrong brand colour (gh#250/#214). If the identity moves again, THIS COMMENT MOVES WITH IT. There is no Tailwind `bg-brand` utility on purpose: `--color-brand` is already taken by --text-brand, so identity surfaces read `hsl(var(--brand))` directly in component CSS. neutral ink. Same value as --primary by default, NOT an alias of it: re-theming the action colour must still leave the identity alone, which is what brand-identity-role.test.ts checks on the DECLARATION rather than the value.",
     "name": "--brand",
@@ -2309,6 +2327,18 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "AgentBadge — the violet outline and ink of the \"AI agent\" label. Role-mirrors, `initial`: hsl(var(--agent)) border and hsl(var(--text-agent)) ink at the call site.",
+    "name": "--badge-agent-border",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Badge component tokens.",
+    "name": "--badge-agent-foreground",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Leading/trailing glyph inside the pill. It was a bare `0.75rem` in badge-layout.css with no token at all, so a service could only resize it with `!important` or a forked stylesheet — the two routes the icon axis's tier 2 exists to abolish (gh#326). Same step, so nothing moves. Matches --badge-font-size's step by design: the glyph reads as a character in the label's run, so the two retune together. Deliberately NOT --scaling-multiplied — the literal it replaces did not track density.",
     "name": "--badge-icon-size",
@@ -5939,6 +5969,54 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "Avatar `kind=\"agent\"` — the \"AI\" tag pinned to the block-start/inline-end corner (presence owns block-end). The tag's text is aria-hidden; a localized sr-only \"AI agent\" carries the meaning, so the colour is never the only signal (WCAG 1.4.1). --avatar-agent-background / -foreground / -ring-color are ROLE-MIRROR knobs, `initial` here so the --agent / --agent-foreground / --background defaults resolve at the call site under a scoped [data-tenant] / .dark theme. Defaults = 2xs bold label · pill · violet --agent fill, white ink · a 2px --background separator ring · spilling --space-1 past the corner. default = var(--font-size-2xs) at the call site",
+    "name": "--avatar-agent-font-size",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = var(--font-weight-bold) at the call site",
+    "name": "--avatar-agent-font-weight",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = var(--space-1) at the call site",
+    "name": "--avatar-agent-padding-inline",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = calc(var(--space-1) * -1) at the call site: the tag spills slightly past the mark",
+    "name": "--avatar-agent-inset",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = var(--stroke-md) at the call site",
+    "name": "--avatar-agent-ring-width",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
+    "name": "--avatar-agent-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
+    "name": "--avatar-agent-foreground",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
+    "name": "--avatar-agent-ring-color",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Progress track + fill — `initial` so the role defaults re-resolve under a scoped theme. Track reads --secondary, the default (`primary`) fill reads the brand mark; a service re-tones once. Defaults = hsl(var(--secondary)) track · hsl(var(--mark-primary, var(--primary))) fill (gh#1308 — it was the success mark; status tones are opt-in and do not read this knob).",
     "name": "--progress-track-background",
@@ -16247,6 +16325,12 @@
     "tier": "component",
     "value": "var(--space-3)"
   },
+  {
+    "description": "The gap between the brand and the custom bar inside `.app-topbar-rail` (gh#1481). It was a literal `--space-3`, so a theme that tightens the bar for a 320px / 200%-text viewport could reach every other gap in the row but this one.",
+    "name": "--app-shell-rail-gap",
+    "tier": "component",
+    "value": "var(--space-3)"
+  },
   {
     "description": "HOW MUCH OF THE BAR THE BRAND MAY KEEP (gh#728). A wide bar is not the problem, so the cap is `none` there; below the `sm` step the brand keeps at most a square of the row it sits in, and everything past that is cropped from the inline-end — which is the half a lockup can lose, because a lockup leads with its mark in both directions. A theme that wants the wordmark to survive on a phone raises the compact cap; a theme with a very wide lockup lowers the other. Choosing WHAT the narrow bar shows, rather than how much of it, is `AppShell logoCompact`: `viewBox` is an attribute and no stylesheet can set one.",
     "name": "--app-shell-brand-max-inline-size",

package/dist/components/data-display/avatar.d.ts

@@ -3,7 +3,7 @@ import { type ImageLoadingStatus } from "../../lib/image-loading-status.js";
 import type { AvatarImageFitProp, AvatarProp } from "../../props/components/data-display.prop.js";
 export declare const Avatar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     asChild?: boolean;
-} & Pick<AvatarProp, "appearance" | "presence" | "presenceLabel" | "shape" | "size"> & React.RefAttributes<HTMLSpanElement>>;
+} & Pick<AvatarProp, "appearance" | "kind" | "presence" | "presenceLabel" | "shape" | "size"> & React.RefAttributes<HTMLSpanElement>>;
 export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
     asChild?: boolean;
     onLoadingStatusChange?: (status: ImageLoadingStatus) => void;

package/dist/components/data-display/avatar.js

@@ -22,6 +22,7 @@ const Avatar = React.forwardRef(
     appearance = "default",
     presence,
     presenceLabel,
+    kind = "person",
     asChild = false,
     children,
     ...props
@@ -42,11 +43,16 @@ const Avatar = React.forwardRef(
         "data-size": size === "md" ? void 0 : size,
         "data-appearance": appearance === "tinted" ? "tinted" : void 0,
         "data-presence": presence,
+        "data-kind": kind === "agent" ? "agent" : void 0,
         className: cn("ui-avatar", className),
         ...props,
         children: [
           children,
-          presence !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "avatar-presence", "data-presence": presence, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: presenceLabel ?? t(`dataDisplay.avatar.presence.${presence}`) }) }) : null
+          presence !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "avatar-presence", "data-presence": presence, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: presenceLabel ?? t(`dataDisplay.avatar.presence.${presence}`) }) }) : null,
+          kind === "agent" ? /* @__PURE__ */ jsxs("span", { "data-slot": "avatar-agent", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "AI" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.avatar.agent") })
+          ] }) : null
         ]
       }
     ) });

package/dist/components/data-display/badge.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
+import type { AgentBadgeProp } from "../../props/components/data-display.prop.js";
 import type { ShapeProp, ToneProp } from "../../props/vocabulary/index.js";
 export type BadgeVariant = "default" | "secondary" | "outline" | "dashed";
 /**
@@ -100,4 +101,14 @@ export declare function Badge({ as: Element, className, variant, shape, tone, co
  * general-purpose primitive.
  */
 export declare const StatusBadge: typeof Badge;
+/** @see AgentBadgeProp */
+export type AgentBadgeProps = AgentBadgeProp;
+/**
+ * The "AI agent" label beside a NAME — the text-row half of telling an AI agent apart from a
+ * person; `<Avatar kind="agent">` is the mark half. A list that shows names uses both; a place with
+ * only a mark (an assignee icon column, a dense cell) uses the Avatar alone. Violet outline on a
+ * transparent ground (`--badge-agent-*`, reading the `--agent` role), pill, never wraps. The label
+ * is real text, so it is announced as written and never colour-only.
+ */
+export declare function AgentBadge({ as: Element, className, children, ...props }: AgentBadgeProps): React.JSX.Element;
 export {};

package/dist/components/data-display/badge.js

@@ -193,7 +193,27 @@ function Badge({
   ] });
 }
 const StatusBadge = Badge;
+function AgentBadge({
+  as: Element = "span",
+  className,
+  children,
+  ...props
+}) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      "data-slot": "badge",
+      "data-agent": "",
+      "data-shape": "pill",
+      className: cn(badgeVariants({ variant: "tinted", shape: "pill" }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { "data-slot": "badge-label", children: children ?? t("dataDisplay.avatar.agent") })
+    }
+  );
+}
 export {
+  AgentBadge,
   Badge,
   StatusBadge
 };

package/dist/components/data-display/image.js

@@ -454,7 +454,7 @@ const ImageRoot = React.forwardRef(function Image({
   const setImgRef = React.useCallback(
     (node) => {
       imgRef.current = node;
-      if (node?.complete && node.naturalWidth > 0) setStatus("loaded");
+      if (node?.complete) setStatus(node.naturalWidth > 0 ? "loaded" : "error");
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
     },

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

@@ -1,7 +1,7 @@
 export { Persona } from "./persona.js";
 export type { PersonaProp, PersonaProps } from "./persona.js";
-export { Badge, StatusBadge } from "./badge.js";
-export type { BadgeProps, BadgeTone } from "./badge.js";
+export { AgentBadge, Badge, StatusBadge } from "./badge.js";
+export type { AgentBadgeProps, BadgeProps, BadgeTone } from "./badge.js";
 export { Legend } from "./legend.js";
 export type { LegendItemProp, LegendProp, LegendProps } from "./legend.js";
 export { Swatch } from "./swatch.js";

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

@@ -1,5 +1,5 @@
 import { Persona } from "./persona.js";
-import { Badge, StatusBadge } from "./badge.js";
+import { AgentBadge, Badge, StatusBadge } from "./badge.js";
 import { Legend } from "./legend.js";
 import { Swatch } from "./swatch.js";
 import { FeatureList } from "./feature-list.js";
@@ -60,6 +60,7 @@ export {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+  AgentBadge,
   Avatar,
   AvatarFallback,
   AvatarImage,

package/dist/components/data-entry/record-picker.js

@@ -21,6 +21,7 @@ import {
 import { Command, CommandGroup } from "./command.js";
 import { Input } from "./input.js";
 import { isImeComposing } from "../../lib/ime.js";
+import { FieldNameContext } from "../../lib/field-a11y.js";
 import { Select } from "./select.js";
 function selectLoadOptionsFor(loadOptions) {
   if (!loadOptions) return void 0;
@@ -35,103 +36,53 @@ function selectLoadOptionsFor(loadOptions) {
     return { options: r.options, hasMore: r.nextCursor !== void 0 };
   };
 }
-const RecordPicker = React.forwardRef(
-  function RecordPicker2({
-    mode = "single",
-    shape = "auto",
-    value,
-    defaultValue,
-    onValueChange,
-    options,
-    loadOptions,
-    count,
-    threshold = 10,
-    filters,
-    selectedOptions,
-    emptyOption,
-    placeholder,
-    dialogTitle,
-    notFoundContent,
-    loadMoreLabel,
-    disabled = false,
-    size,
-    className,
-    "data-field": fieldName,
-    ...props
-  }, ref) {
-    const { t } = useTranslation();
-    const isMultiple = mode === "multiple";
-    const controlled = value !== void 0;
-    const [internal, setInternal] = React.useState(
-      () => toArray(defaultValue ?? (isMultiple ? [] : null))
-    );
-    const selected = controlled ? toArray(value) : internal;
-    const commit = React.useCallback(
-      (next) => {
-        if (!controlled) setInternal(next);
-        onValueChange?.(isMultiple ? next : next[0] ?? null);
-      },
-      [controlled, isMultiple, onValueChange]
-    );
-    const selectLoadOptions = React.useMemo(() => selectLoadOptionsFor(loadOptions), [loadOptions]);
-    const staticOptions = React.useMemo(
-      () => options ? normalizeSelectOptions(options) : [],
-      [options]
-    );
-    if (shape === "inline") {
-      return /* @__PURE__ */ jsx(
-        InlinePicker,
-        {
-          ref,
-          isMultiple,
-          selected,
-          commit,
-          staticOptions,
-          loadOptions,
-          filters,
-          selectedOptions,
-          emptyOption,
-          placeholder,
-          dialogTitle,
-          notFoundContent,
-          loadMoreLabel,
-          disabled,
-          size,
-          className,
-          "data-field": fieldName,
-          ...props
-        }
-      );
-    }
-    const total = count ?? (options ? staticOptions.length : void 0);
-    const asDialog = total === void 0 ? Boolean(loadOptions) : total > threshold;
-    if (!asDialog) {
-      return /* @__PURE__ */ jsx(
-        Select,
-        {
-          mode: isMultiple ? "multiple" : void 0,
-          loadOptions: selectLoadOptions,
-          id: props.id,
-          "data-field": fieldName,
-          "aria-describedby": props["aria-describedby"],
-          labelInValue: false,
-          showSearch: true,
-          options: withEmptyOption(options, emptyOption),
-          value: isMultiple ? selected : selected[0] ?? void 0,
-          onValueChange: ((next) => commit(toArray(next))),
-          placeholder: placeholder ?? t("dataEntry.recordPicker.placeholder"),
-          notFoundContent,
-          disabled,
-          size,
-          className
-        }
-      );
-    }
+const RecordPicker = React.forwardRef(function RecordPicker2({
+  mode = "single",
+  shape = "auto",
+  value,
+  defaultValue,
+  onValueChange,
+  options,
+  loadOptions,
+  count,
+  threshold = 10,
+  filters,
+  selectedOptions,
+  emptyOption,
+  placeholder,
+  dialogTitle,
+  notFoundContent,
+  loadMoreLabel,
+  disabled = false,
+  size,
+  className,
+  "data-field": fieldName,
+  ...props
+}, ref) {
+  const { t } = useTranslation();
+  const isMultiple = mode === "multiple";
+  const controlled = value !== void 0;
+  const [internal, setInternal] = React.useState(
+    () => toArray(defaultValue ?? (isMultiple ? [] : null))
+  );
+  const selected = controlled ? toArray(value) : internal;
+  const commit = React.useCallback(
+    (next) => {
+      if (!controlled) setInternal(next);
+      onValueChange?.(isMultiple ? next : next[0] ?? null);
+    },
+    [controlled, isMultiple, onValueChange]
+  );
+  const selectLoadOptions = React.useMemo(() => selectLoadOptionsFor(loadOptions), [loadOptions]);
+  const staticOptions = React.useMemo(
+    () => options ? normalizeSelectOptions(options) : [],
+    [options]
+  );
+  if (shape === "inline") {
     return /* @__PURE__ */ jsx(
-      DialogPicker,
+      InlinePicker,
       {
         ref,
-        "data-field": fieldName,
         isMultiple,
         selected,
         commit,
@@ -147,11 +98,59 @@ const RecordPicker = React.forwardRef(
         disabled,
         size,
         className,
+        "data-field": fieldName,
         ...props
       }
     );
   }
-);
+  const total = count ?? (options ? staticOptions.length : void 0);
+  const asDialog = total === void 0 ? Boolean(loadOptions) : total > threshold;
+  if (!asDialog) {
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        mode: isMultiple ? "multiple" : void 0,
+        loadOptions: selectLoadOptions,
+        id: props.id,
+        "data-field": fieldName,
+        "aria-describedby": props["aria-describedby"],
+        labelInValue: false,
+        showSearch: true,
+        options: withEmptyOption(options, emptyOption),
+        value: isMultiple ? selected : selected[0] ?? void 0,
+        onValueChange: ((next) => commit(toArray(next))),
+        placeholder: placeholder ?? t("dataEntry.recordPicker.placeholder"),
+        notFoundContent,
+        disabled,
+        size,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DialogPicker,
+    {
+      ref,
+      "data-field": fieldName,
+      isMultiple,
+      selected,
+      commit,
+      staticOptions,
+      loadOptions,
+      filters,
+      selectedOptions,
+      emptyOption,
+      placeholder,
+      dialogTitle,
+      notFoundContent,
+      loadMoreLabel,
+      disabled,
+      size,
+      className,
+      ...props
+    }
+  );
+});
 const INLINE_SUGGESTION_LIMIT = 8;
 function toArray(v) {
   if (v === null || v === void 0) return [];
@@ -179,10 +178,30 @@ const InlinePicker = React.forwardRef(function InlinePicker2({
   className,
   id,
   "data-field": fieldName,
-  "aria-describedby": describedBy
+  "aria-describedby": describedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
 }, ref) {
   const { t } = useTranslation();
   const [query, setQuery] = React.useState("");
+  const inputRef = React.useRef(null);
+  const [hasNativeLabel, setHasNativeLabel] = React.useState(false);
+  React.useLayoutEffect(() => {
+    setHasNativeLabel((inputRef.current?.labels?.length ?? 0) > 0);
+  }, [id]);
+  const enclosingField = React.useContext(FieldNameContext);
+  const fallbackName = ariaLabel === void 0 && ariaLabelledBy === void 0 && !enclosingField && !hasNativeLabel ? placeholder ?? t("dataEntry.recordPicker.search") : void 0;
+  const setInputRef = React.useCallback(
+    (node) => {
+      inputRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
   const [rows, setRows] = React.useState(staticOptions);
   const [openSuggest, setOpenSuggest] = React.useState(false);
   const [dialogQuery, setDialogQuery] = React.useState(null);
@@ -214,7 +233,7 @@ const InlinePicker = React.forwardRef(function InlinePicker2({
         /* @__PURE__ */ jsx(
           Input,
           {
-            ref,
+            ref: setInputRef,
             type: "search",
             value: query,
             disabled,
@@ -232,7 +251,12 @@ const InlinePicker = React.forwardRef(function InlinePicker2({
             className: "ui-record-picker-inline-input",
             id,
             "data-field": fieldName,
-            "aria-describedby": describedBy
+            "aria-describedby": describedBy,
+            "aria-label": ariaLabel ?? fallbackName,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-errormessage": ariaErrorMessage,
+            "aria-invalid": ariaInvalid,
+            "aria-required": ariaRequired
           }
         ),
         /* @__PURE__ */ jsxs(

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

@@ -13,7 +13,8 @@ import {
   Select as AriaSelect,
   SelectStateContext,
   SelectValue as AriaSelectValue,
-  Separator as AriaSeparator
+  Separator as AriaSeparator,
+  Text as AriaText
 } from "react-aria-components";
 import { ChevronDown, Loader2, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
@@ -613,6 +614,14 @@ function withOptionIcon(option, label) {
     /* @__PURE__ */ jsx("span", { className: "ui-select-option-label", children: label })
   ] });
 }
+function optionRow(option) {
+  if (!option.sublabel) return withOptionIcon(option, option.label);
+  return /* @__PURE__ */ jsxs("span", { className: "ui-select-option-body", children: [
+    option.icon ? /* @__PURE__ */ jsx("span", { className: "ui-select-option-icon", "aria-hidden": "true", children: option.icon }) : null,
+    /* @__PURE__ */ jsx(AriaText, { slot: "label", className: "ui-select-option-label", children: option.label }),
+    /* @__PURE__ */ jsx(AriaText, { slot: "description", className: "ui-search-select-option-sublabel", children: option.sublabel })
+  ] });
+}
 function DataSelectLabel({
   labelRender,
   options
@@ -729,7 +738,7 @@ function DataSelect(props) {
         disabled: option.disabled,
         "data-testid": optionTestId(option.value),
         selectedIcon: menuItemSelectedIcon,
-        children: optionRender ? optionRender(option, { index }) : renderOption ? renderOption(option) : withOptionIcon(option, option.label)
+        children: optionRender ? optionRender(option, { index }) : renderOption ? renderOption(option) : optionRow(option)
       },
       option.value
     );
@@ -784,8 +793,9 @@ function DataSelect(props) {
             ...ariaProps,
             children: [
               prefix === void 0 || prefix === null ? null : /* @__PURE__ */ jsx("span", { "data-slot": "select-prefix", className: "ui-select-prefix", children: prefix }),
-              /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? t("dataEntry.searchSelect.placeholder"), children: labelRender ? /* @__PURE__ */ jsx(DataSelectLabel, { labelRender, options }) : options.some((option) => option.icon) ? (
+              /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? t("dataEntry.searchSelect.placeholder"), children: labelRender ? /* @__PURE__ */ jsx(DataSelectLabel, { labelRender, options }) : options.some((option) => option.icon || option.sublabel) ? (
                 // gh#1444 — the selected option's icon leads the trigger too, as in the search panel.
+                // gh#1495 — and a sublabel stays in the row: the trigger names the pick by its label.
                 /* @__PURE__ */ jsx(
                   DataSelectLabel,
                   {

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

@@ -3,4 +3,4 @@ import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
 /** Same rail boundary as shell-layout.css; SSR starts in docked mode. */
 export declare function useAppShellNavigationMode(): "drawer" | "docked";
-export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, logoCompact, logoCompactBelow, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailPosition, navRailEnd, navRailLabel, mobileTabBar, mobileTabBarLabel, mobileNav, mobileNavLabel, mobileNavTriggerLabel, mobileNavOnCloseAutoFocus, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;
+export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, logoCompact, logoCompactBelow, breadcrumb, footer, children, errorBoundary, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailPosition, navRailEnd, navRailLabel, mobileTabBar, mobileTabBarLabel, mobileNav, mobileNavLabel, mobileNavTriggerLabel, mobileNavOnCloseAutoFocus, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;

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

@@ -10,6 +10,7 @@ import { ShellTabBar } from "./mobile-shell.js";
 import { useToastStickyBarClearance } from "../../lib/toast-clearance.js";
 import { NavSurfaceProvider } from "./nav-surface.js";
 import { TopbarItem } from "./topbar-item.js";
+import { PageErrorBoundary } from "./page-error-boundary.js";
 import { isDevelopment } from "../../lib/dev.js";
 function useAppShellNavigationMode() {
   return useMediaQuery("(width <= 56.25rem)") ? "drawer" : "docked";
@@ -25,6 +26,7 @@ function AppShell({
   breadcrumb,
   footer,
   children,
+  errorBoundary = true,
   sidebarCollapsed = false,
   responsiveNavigation = "drawer",
   topbarSpan = "content",
@@ -201,7 +203,7 @@ function AppShell({
             tabIndex: 0,
             children: [
               breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
-              children,
+              errorBoundary === false ? children : /* @__PURE__ */ jsx(PageErrorBoundary, { ...errorBoundary === true ? {} : errorBoundary, children }),
               showTabBar && footerRegion
             ]
           }

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

@@ -31,6 +31,8 @@ export { CenteredShell } from "./centered-shell.js";
 export type { CenteredShellProp, CenteredShellProps, CenteredShellAuthProp, CenteredShellPageProp, } from "./centered-shell.js";
 export type { CenteredShellWidthProp, CenteredShellAlignProp } from "../../props/vocabulary/index.js";
 export { ErrorSurface } from "./error-surface.js";
+export { PageErrorBoundary } from "./page-error-boundary.js";
+export type { PageErrorBoundaryFallbackProp, PageErrorBoundaryProp, PageErrorBoundaryProps, } from "./page-error-boundary.js";
 export type { ErrorSurfaceMaintenanceProp, ErrorSurfaceProp, ErrorSurfaceProps, } from "./error-surface.js";
 export type { ErrorSurfaceModeProp, ErrorSurfaceStatusProp } from "../../props/vocabulary/index.js";
 export { Breadcrumb } from "./breadcrumb.js";

package/dist/components/layout/index.js

@@ -14,6 +14,7 @@ import { AuthStack } from "./auth-stack.js";
 import { MobileShell } from "./mobile-shell.js";
 import { CenteredShell } from "./centered-shell.js";
 import { ErrorSurface } from "./error-surface.js";
+import { PageErrorBoundary } from "./page-error-boundary.js";
 import { Breadcrumb } from "./breadcrumb.js";
 import { createSidebarLink, Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
 import { Topbar } from "./topbar.js";
@@ -141,6 +142,7 @@ export {
   NavList,
   OrgSwitcher,
   PageContainer,
+  PageErrorBoundary,
   PriceSummary,
   ResizableHandle,
   ResizablePanel,

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, PageContainerExtraProp, } 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, status, extra, toolbar, footer, toolbarPad, footerPad, breadcrumb, breadcrumbCurrentItem, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, titleRef, density, variant, preset, headerLayout, headerScale, icon, cover, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, status, extra, help, toolbar, footer, toolbarPad, footerPad, breadcrumb, breadcrumbCurrentItem, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, titleRef, density, variant, preset, headerLayout, headerScale, icon, cover, 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

@@ -37,6 +37,7 @@ function PageContainerRoot({
   subtitle,
   status,
   extra,
+  help,
   toolbar,
   footer,
   toolbarPad,
@@ -68,7 +69,8 @@ function PageContainerRoot({
   const hasHeading = headerLoading || hasTitle || hasIcon || status != null || !!subtitle;
   const hasBreadcrumb = !!breadcrumb && breadcrumb.length > 0;
   const hasEyecatch = isValidElement(cover) && cover.props.variant === "eyecatch";
-  const hasHeader = hasHeading || hasBreadcrumb || hasEyecatch || extraStart != null || extraEnd != null;
+  const hasHelp = help != null && help !== false;
+  const hasHeader = hasHeading || hasBreadcrumb || hasEyecatch || extraStart != null || extraEnd != null || hasHelp;
   const reveal = stickyFooter && footer != null && footerReveal === "onScroll" && hasHeader;
   const { headerRef, revealed } = useFooterReveal(reveal);
   const footerRef = useRef(null);
@@ -177,9 +179,10 @@ function PageContainerRoot({
                     )
                   ) : subtitle && /* @__PURE__ */ jsx("p", { className: "ui-page-subtitle", children: subtitle })
                 ] }),
-                (extraStart != null || extraEnd != null) && /* @__PURE__ */ jsxs("div", { className: "ui-page-header-extra", children: [
+                (extraStart != null || extraEnd != null || hasHelp) && /* @__PURE__ */ jsxs("div", { className: "ui-page-header-extra", children: [
                   extraStart,
-                  extraEnd
+                  extraEnd,
+                  hasHelp ? /* @__PURE__ */ jsx("div", { className: "ui-page-header-help", "data-slot": "page-header-help", children: help }) : null
                 ] })
               ] })
             ]