@godxjp/ui 33.22.2 → 33.25.0

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/general/button.js

@@ -54,11 +54,11 @@ const buttonVariants = cva("ui-button", {
       md: "ui-button--default-size",
       // utilities after components, so only a utility can out-rank a child's own `size-*`.
       // They read the token, so the value is still themeable.
-      xs: "ui-button--xs [&_svg:not([class*='size-'])]:size-[var(--button-xs-icon-size)]",
+      xs: "ui-button--xs [&_svg:not([class*='size-'])]:size-[var(--button-icon-size,var(--button-xs-icon-size))]",
       sm: "ui-button--sm",
       lg: "ui-button--lg",
       icon: "ui-button--icon",
-      "icon-xs": "ui-button--icon-xs [&_svg]:size-[var(--button-xs-icon-size)] [&_svg]:shrink-0",
+      "icon-xs": "ui-button--icon-xs [&_svg]:size-[var(--button-icon-size,var(--button-xs-icon-size))] [&_svg]:shrink-0",
       "icon-sm": "ui-button--icon-sm",
       "icon-lg": "ui-button--icon-lg",
       // The glove step (gh#1304): ≥56×56, `--control-height-touch`.

package/dist/components/layout/affix.js

@@ -106,7 +106,7 @@ const Affix = React.forwardRef(function Affix2({
     };
   }, [measure, targetElement]);
   React.useEffect(() => {
-    if (!affixed || !targetElement || typeof window === "undefined") return void 0;
+    if (!affixed || typeof window === "undefined") return void 0;
     let frame = null;
     const onScroll = () => {
       if (frame !== null) return;

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/editorial-catalog.d.ts

@@ -7,7 +7,7 @@ export declare function EditorialFilterPanel({ variant, children, action, classN
 /** One field of an `EditorialFilterPanel`: a visible label over one control. */
 export declare function EditorialFilterField({ label, htmlFor, children, className, }: EditorialFilterFieldProp): React.JSX.Element;
 /** The head of a catalog item's page: framed picture beside kicker, h1, tags, summary, facts. */
-export declare function CatalogDetail({ variant, media, favorite, mediaCaption, overline, title, meta, summary, actions, facts, className, }: CatalogDetailProp): React.JSX.Element;
+export declare function CatalogDetail({ variant, media, image, favorite, mediaCaption, overline, title, meta, summary, actions, facts, className, }: CatalogDetailProp): React.JSX.Element;
 /** One outlined tag in a `CatalogDetail` meta row. */
 export declare function CatalogDetailTag({ children, className }: CatalogDetailTagProp): React.JSX.Element;
 /** One band of an item page under its head: hairline, h2, muted paragraph, then the rest. */

package/dist/components/layout/editorial-catalog.js

@@ -1,5 +1,8 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Bookmark } from "lucide-react";
+import { Image } from "../data-display/image.js";
 import { cn } from "../../lib/utils.js";
 function EditorialFilterPanel({
   variant = "panel",
@@ -37,6 +40,7 @@ function EditorialFilterField({
 function CatalogDetail({
   variant = "card",
   media,
+  image,
   favorite,
   mediaCaption,
   overline,
@@ -47,6 +51,18 @@ function CatalogDetail({
   facts,
   className
 }) {
+  const [load, setLoad] = React.useState(null);
+  const src = image?.src;
+  const status = image ? load && load.src === src ? load.status : "loading" : void 0;
+  const onStatusChange = React.useCallback(
+    (next) => {
+      if (src !== void 0)
+        setLoad(
+          (previous) => previous?.src === src && previous.status === next ? previous : { src, status: next }
+        );
+    },
+    [src]
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -55,21 +71,43 @@ function CatalogDetail({
       className: cn("ui-catalog-detail", className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "ui-catalog-detail-visual", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ui-catalog-detail-art", children: [
-            favorite && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-pressed": favorite.pressed,
-                "aria-label": favorite.label,
-                disabled: favorite.disabled,
-                className: "ui-catalog-card-favorite ui-focus-ring",
-                onClick: () => favorite.onPressedChange(!favorite.pressed),
-                children: /* @__PURE__ */ jsx(Bookmark, { "aria-hidden": true, className: "ui-catalog-card-favorite-icon" })
-              }
-            ),
-            media
-          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "ui-catalog-detail-art",
+              "data-status": status,
+              "aria-busy": status === "loading" ? true : void 0,
+              children: [
+                favorite && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": favorite.pressed,
+                    "aria-label": favorite.label,
+                    disabled: favorite.disabled,
+                    className: "ui-catalog-card-favorite ui-focus-ring",
+                    onClick: () => favorite.onPressedChange(!favorite.pressed),
+                    children: /* @__PURE__ */ jsx(Bookmark, { "aria-hidden": true, className: "ui-catalog-card-favorite-icon" })
+                  }
+                ),
+                image ? /* @__PURE__ */ jsx(
+                  Image,
+                  {
+                    src: image.src,
+                    alt: image.alt,
+                    width: image.width,
+                    height: image.height,
+                    fit: "contain",
+                    fallback: image.fallback,
+                    fetchPriority: image.priority ? "high" : void 0,
+                    preview: false,
+                    onStatusChange
+                  },
+                  image.src
+                ) : media
+              ]
+            }
+          ),
           mediaCaption != null && /* @__PURE__ */ jsx("p", { className: "ui-catalog-detail-caption", children: mediaCaption })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "ui-catalog-detail-main", children: [

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
                 ] })
               ] })
             ]

package/dist/components/layout/page-error-boundary.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import type { PageErrorBoundaryProp } from "../../props/components/layout.prop.js";
+export type { PageErrorBoundaryFallbackProp, PageErrorBoundaryProp, PageErrorBoundaryProp as PageErrorBoundaryProps, } from "../../props/components/layout.prop.js";
+type BoundaryState = {
+    error: unknown;
+    failedAt: string | undefined;
+} | null;
+/**
+ * PageErrorBoundary — catches a render error thrown by ONE page and draws the failure in its
+ * place, so the shell around it (sidebar, topbar, breadcrumb) stays up and the user can go
+ * somewhere else (gh#1494). `AppShell` wraps its `children` in one by default.
+ *
+ * It RESETS ON NAVIGATION without knowing the router: a failed boundary records the URL it failed
+ * on, and the next render under a different URL (the router re-renders the shell's children on
+ * every visit) draws the page again. `resetKey` is the explicit form, for a change the URL does
+ * not show. Without a reset, Back through history stayed on the error surface — the symptom a
+ * consumer measured before it wrote its own boundary.
+ */
+export declare class PageErrorBoundary extends React.Component<PageErrorBoundaryProp, {
+    failure: BoundaryState;
+}> {
+    state: {
+        failure: BoundaryState;
+    };
+    static getDerivedStateFromError(error: unknown): {
+        failure: BoundaryState;
+    };
+    componentDidCatch(error: unknown, info: React.ErrorInfo): void;
+    componentDidUpdate(previous: PageErrorBoundaryProp): void;
+    reset: () => void;
+    render(): React.ReactNode;
+}

package/dist/components/layout/page-error-boundary.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { isDevelopment } from "../../lib/dev.js";
+import { Button } from "../general/button.js";
+import { ErrorSurface } from "./error-surface.js";
+function DefaultPageErrorFallback() {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    ErrorSurface,
+    {
+      mode: "application",
+      status: 500,
+      titleLevel: 1,
+      title: t("layout.pageErrorBoundary.title"),
+      description: t("layout.pageErrorBoundary.description"),
+      action: /* @__PURE__ */ jsx(Button, { type: "button", onClick: () => window.location.reload(), children: t("layout.pageErrorBoundary.reload") })
+    }
+  );
+}
+const currentLocation = () => typeof window === "undefined" ? void 0 : window.location.href;
+class PageErrorBoundary extends React.Component {
+  state = { failure: null };
+  static getDerivedStateFromError(error) {
+    return { failure: { error, failedAt: currentLocation() } };
+  }
+  componentDidCatch(error, info) {
+    if (this.props.onError) {
+      this.props.onError(error, info);
+    } else if (isDevelopment()) {
+      console.error("[@godxjp/ui] PageErrorBoundary caught a page render error:", error);
+    }
+  }
+  componentDidUpdate(previous) {
+    const { failure } = this.state;
+    if (!failure) return;
+    const keyChanged = !Object.is(previous.resetKey, this.props.resetKey);
+    const moved = failure.failedAt !== void 0 && failure.failedAt !== currentLocation();
+    if (keyChanged || moved) this.reset();
+  }
+  reset = () => {
+    this.setState({ failure: null });
+  };
+  render() {
+    const { failure } = this.state;
+    if (!failure) return this.props.children;
+    const { fallback } = this.props;
+    if (typeof fallback === "function")
+      return fallback({ error: failure.error, reset: this.reset });
+    if (fallback !== void 0) return fallback;
+    return /* @__PURE__ */ jsx(DefaultPageErrorFallback, {});
+  }
+}
+export {
+  PageErrorBoundary
+};

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

@@ -41,7 +41,7 @@ type RowProps = {
  * only within `src/components/layout`) so `NavList` renders nested items through the SAME group as
  * the rail instead of dropping `item.children` on the floor (gh#815).
  */
-export declare function NavGroup({ item, activeId, onSelect, linkComponent, renderItem }: RowProps): React.JSX.Element;
+export declare function NavGroup({ item, activeId, onSelect, sub, linkComponent, renderItem, }: RowProps): React.JSX.Element;
 export { createSidebarLink } from "./sidebar-link.js";
 /**
  * Sidebar — data-driven vertical nav rail. Use {@link createSidebarLink} to adapt a router `Link`,