@godxjp/ui 33.22.2 → 33.24.0

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

@@ -2,7 +2,7 @@
 import type * as React from "react";
 import type { ReactNode } from "react";
 import type { AffixProp, AffixTargetProp, ResponsiveGridColumnsProp, SidebarLinkComponentProp } from "./layout.prop.js";
-import type { ActionsProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, OnOpenChangeProp, OpenProp, DefaultOpenProp, PendingProp, PlaceholderProp, StickyProp, TextAlignProp } from "../vocabulary/index.js";
+import type { ActionsProp, AllowClearProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, OnOpenChangeProp, OpenProp, DefaultOpenProp, PendingProp, PlaceholderProp, RequiredProp, StickyProp, TextAlignProp } from "../vocabulary/index.js";
 import type { FormProp, SearchSelectOptionProp } from "./data-entry.prop.js";
 /**
  * Renders the canonical SearchInput as the FIRST control of the strip, with a token-owned
@@ -41,6 +41,17 @@ export type FilterBarFilterProp = {
     onSelectedChange?: (selected: string) => void;
     placeholder?: PlaceholderProp;
     disabled?: DisabledProp;
+    /**
+     * A SCOPE filter that is never empty — the branch, the month (gh#1495). The filter renders no
+     * ✕ and its control is `aria-required`; the bar's clear-all is still the consumer's `onClear`,
+     * which should leave a required filter at its value. Implies `allowClear={false}`.
+     */
+    required?: RequiredProp;
+    /**
+     * The per-filter ✕. Default `true`: a filter is optional by nature, "no filter" is its resting
+     * state. `false` hides it without marking the filter required (gh#1495).
+     */
+    allowClear?: AllowClearProp;
 };
 /**
  * Chips are pure consumer data — the lifecycle is: ADD by including the chip in `chips`, REMOVE

package/dist/props/registry.d.ts

@@ -847,6 +847,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly ["TitleProp", "SubtitleProp", "StatusProp", "ExtraProp", "FooterProp", "BreadcrumbProp", "BreadcrumbCurrentItemProp", "DensityProp", "PageContainerVariantProp", {
+            readonly field: "help";
+            readonly local: true;
+            readonly reason: "The page's ONE Help control (gh#1494), at a fixed place: the last item at the header row's inline end, after the `extra` actions. A single node, not an ActionsProp list.";
+        }, {
             readonly field: "toolbar";
             readonly local: true;
             readonly reason: "FIXED chrome band between the page header and the scrolling body (filter strip, status bar, channel workflow rail). Distinct from ExtraProp (header actions, inside the title row) and FooterProp (action bar after the body): it is the only slot that stays OUT of the `fill` scroll viewport while sharing the header/body gutters and measure, so a consumer never hand-lays `position: sticky` page chrome.";
@@ -1133,7 +1137,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly AppShellProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
-        readonly vocabulary: readonly ["ChildrenProp", "BreakpointProp", {
+        readonly vocabulary: readonly ["ChildrenProp", {
+            readonly field: "errorBoundary";
+            readonly local: true;
+            readonly reason: "Page-level error boundary around `children` (gh#1494): `true` (default) keeps the shell when a page throws, an object configures PageErrorBoundary, `false` opts out.";
+        }, "BreakpointProp", {
             readonly field: "logoCompact";
             readonly local: true;
             readonly reason: "The brand node a narrow bar gets instead of `logo` — the consumer's own mark/viewBox, which a stylesheet cannot produce (gh#728).";
@@ -2452,6 +2460,32 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "Slot for the host's cover controls (change / reposition / remove), laid out off the focal area — a ReactNode slot, not the ActionsProp item list.";
         }];
     };
+    readonly PageErrorBoundaryFallbackProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "fallback";
+            readonly local: true;
+            readonly reason: "Render-prop form of PageErrorBoundary `fallback`: `({ error, reset }) => node` (gh#1494).";
+        }];
+    };
+    readonly PageErrorBoundaryProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["ChildrenProp", {
+            readonly field: "fallback";
+            readonly local: true;
+            readonly reason: "What replaces the page that threw — a node, or `({ error, reset }) => node`. Default: an application ErrorSurface with the kit's localized copy (gh#1494).";
+        }, {
+            readonly field: "resetKey";
+            readonly local: true;
+            readonly reason: "React error-boundary reset key (react-error-boundary's resetKeys, one value): a change draws the page again. The URL change already resets.";
+        }, {
+            readonly field: "onError";
+            readonly local: true;
+            readonly reason: "componentDidCatch reporter `(error, info)` for an error tracker.";
+        }];
+    };
     readonly ErrorSurfaceProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
@@ -3339,6 +3373,20 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly AvatarKindProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [];
+    };
+    readonly AgentBadgeProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "as";
+            readonly local: true;
+            readonly reason: "Closed tag seam (div | span), the same one Badge carries, so the label stays valid HTML beside a name inside a link or a <button>.";
+        }, "ChildrenProp", "ClassNameProp"];
+    };
     readonly AvatarImageFitProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
@@ -4003,7 +4051,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly FilterBarFilterProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
-        readonly vocabulary: readonly ["LabelProp", "PlaceholderProp", "DisabledProp"];
+        readonly vocabulary: readonly ["LabelProp", "PlaceholderProp", "DisabledProp", "RequiredProp", "AllowClearProp"];
     };
     readonly FilterBarChipProp: {
         readonly group: "navigation";

package/dist/props/registry.js

@@ -861,6 +861,11 @@ const COMPONENT_PROP_REGISTRY = {
       "BreadcrumbCurrentItemProp",
       "DensityProp",
       "PageContainerVariantProp",
+      {
+        field: "help",
+        local: true,
+        reason: "The page's ONE Help control (gh#1494), at a fixed place: the last item at the header row's inline end, after the `extra` actions. A single node, not an ActionsProp list."
+      },
       {
         field: "toolbar",
         local: true,
@@ -1152,6 +1157,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/layout.prop.ts",
     vocabulary: [
       "ChildrenProp",
+      {
+        field: "errorBoundary",
+        local: true,
+        reason: "Page-level error boundary around `children` (gh#1494): `true` (default) keeps the shell when a page throws, an object configures PageErrorBoundary, `false` opts out."
+      },
       "BreakpointProp",
       {
         field: "logoCompact",
@@ -1590,9 +1600,17 @@ const COMPONENT_PROP_REGISTRY = {
       { field: "variant", local: true, reason: "inset (site search) or inline (collection row)." },
       { field: "count", local: true, reason: "Live count at the end of the inline row." },
       { field: "debounce", local: true, reason: "Settle delay in ms, as SearchInput.debounce." },
-      { field: "suggestions", local: true, reason: "Grouped suggestion rows under the box (gh#1447)." },
+      {
+        field: "suggestions",
+        local: true,
+        reason: "Grouped suggestion rows under the box (gh#1447)."
+      },
       { field: "suggestionsFooter", local: true, reason: "Last popup row linking to all results." },
-      { field: "suggestionsLabel", local: true, reason: "Accessible name of the suggestions listbox." },
+      {
+        field: "suggestionsLabel",
+        local: true,
+        reason: "Accessible name of the suggestions listbox."
+      },
       {
         field: "onQueryChange",
         local: true,
@@ -2182,6 +2200,39 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  PageErrorBoundaryFallbackProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      {
+        field: "fallback",
+        local: true,
+        reason: "Render-prop form of PageErrorBoundary `fallback`: `({ error, reset }) => node` (gh#1494)."
+      }
+    ]
+  },
+  PageErrorBoundaryProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "ChildrenProp",
+      {
+        field: "fallback",
+        local: true,
+        reason: "What replaces the page that threw \u2014 a node, or `({ error, reset }) => node`. Default: an application ErrorSurface with the kit's localized copy (gh#1494)."
+      },
+      {
+        field: "resetKey",
+        local: true,
+        reason: "React error-boundary reset key (react-error-boundary's resetKeys, one value): a change draws the page again. The URL change already resets."
+      },
+      {
+        field: "onError",
+        local: true,
+        reason: "componentDidCatch reporter `(error, info)` for an error tracker."
+      }
+    ]
+  },
   ErrorSurfaceProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -3453,6 +3504,24 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display.prop.ts",
     vocabulary: []
   },
+  AvatarKindProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: []
+  },
+  AgentBadgeProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      {
+        field: "as",
+        local: true,
+        reason: "Closed tag seam (div | span), the same one Badge carries, so the label stays valid HTML beside a name inside a link or a <button>."
+      },
+      "ChildrenProp",
+      "ClassNameProp"
+    ]
+  },
   AvatarImageFitProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
@@ -4180,7 +4249,7 @@ const COMPONENT_PROP_REGISTRY = {
   FilterBarFilterProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",
-    vocabulary: ["LabelProp", "PlaceholderProp", "DisabledProp"]
+    vocabulary: ["LabelProp", "PlaceholderProp", "DisabledProp", "RequiredProp", "AllowClearProp"]
   },
   FilterBarChipProp: {
     group: "navigation",

package/dist/styles/alert-layout.css

@@ -243,6 +243,10 @@
     visibility: hidden;
   }
 
+  :root:has(.ui-overlay-modal) [data-sonner-toaster] {
+    pointer-events: none;
+  }
+
   .ui-skeleton-block {
     border-radius: var(--skeleton-radius, var(--radius));
     background: var(--skeleton-background, hsl(var(--muted)));

package/dist/styles/badge-layout.css

@@ -94,4 +94,18 @@
     width: var(--badge-remove-icon-size);
     height: var(--badge-remove-icon-size);
   }
+
+  [data-slot="badge"][data-agent] {
+    border-color: hsl(var(--badge-agent-border, var(--agent)));
+    background-color: transparent;
+    color: hsl(var(--badge-agent-foreground, var(--text-agent)));
+    white-space: nowrap;
+  }
+
+  @media (forced-colors: active) {
+    [data-slot="badge"][data-agent] {
+      border-color: CanvasText;
+      color: CanvasText;
+    }
+  }
 }

package/dist/styles/data-display-layout.css

@@ -159,6 +159,16 @@
     border-radius: inherit;
   }
 
+  .ui-avatar[data-kind="agent"] {
+    overflow: visible;
+  }
+
+  .ui-avatar[data-kind="agent"] > .ui-avatar-image,
+  .ui-avatar[data-kind="agent"] > .ui-avatar-fallback {
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
   [data-slot="avatar-presence"] {
     position: absolute;
     inset-block-end: var(--avatar-presence-inset);
@@ -234,6 +244,40 @@
     }
   }
 
+  [data-slot="avatar-agent"] {
+    position: absolute;
+    inset-block-start: var(--avatar-agent-inset, calc(var(--space-1) * -1));
+    inset-inline-end: var(--avatar-agent-inset, calc(var(--space-1) * -1));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--avatar-agent-padding-inline, var(--space-1));
+    border-radius: var(--radius-pill);
+    font-size: var(
+      --avatar-agent-font-size,
+      var(
+        --font-size-2xs,
+        calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+      )
+    );
+    font-weight: var(--avatar-agent-font-weight, var(--font-weight-bold));
+    line-height: var(--line-height-tight);
+    white-space: nowrap;
+    color: hsl(var(--avatar-agent-foreground, var(--agent-foreground)));
+    background-color: hsl(var(--avatar-agent-background, var(--agent)));
+    box-shadow: 0 0 0 var(--avatar-agent-ring-width, var(--stroke-md))
+      hsl(var(--avatar-agent-ring-color, var(--background)));
+    pointer-events: none;
+  }
+
+  @media (forced-colors: active) {
+    [data-slot="avatar-agent"] {
+      color: Canvas;
+      background-color: CanvasText;
+      outline: var(--avatar-agent-ring-width, var(--stroke-md)) solid Canvas;
+    }
+  }
+
   .ui-progress {
     display: flex;
     flex-direction: column;

package/dist/styles/icon-layout.css

@@ -1,6 +1,9 @@
 
 @layer components {
   svg.ui-icon[data-slot="icon"] {
+
+    display: inline-block;
+    vertical-align: middle;
     inline-size: var(--icon-glyph-size);
     block-size: var(--icon-glyph-size);
 

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.22.2",
+  "version": "33.24.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -64,6 +64,12 @@
         "layout.css"
       ]
     },
+    "AgentBadge": {
+      "layers": [
+        "dialog-layout.css",
+        "badge-layout.css"
+      ]
+    },
     "Alert": {
       "layers": [
         "layout.css",
@@ -115,7 +121,11 @@
     "AppShell": {
       "layers": [
         "shell-layout.css",
-        "dialog-layout.css"
+        "layout.css",
+        "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
+        "data-display-layout.css"
       ]
     },
     "AreaChart": {
@@ -970,6 +980,16 @@
         "layout.css"
       ]
     },
+    "PageErrorBoundary": {
+      "layers": [
+        "shell-layout.css",
+        "layout.css",
+        "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
+        "data-display-layout.css"
+      ]
+    },
     "Pagination": {
       "layers": [
         "layout.css",

package/dist/styles/layout.css

@@ -907,6 +907,12 @@
     max-inline-size: 100%;
   }
 
+  .ui-page-header-help {
+    display: flex;
+    flex: none;
+    margin-inline-start: auto;
+  }
+
   .ui-page-header-title-row {
     display: flex;
     flex-wrap: wrap;
@@ -1124,6 +1130,7 @@
   }
 
   .ui-page-subtitle {
+    overflow-wrap: anywhere;
     font-size: var(--page-subtitle-font-size);
     color: hsl(var(--muted-foreground));
     margin-top: var(--space-1);
@@ -1211,6 +1218,8 @@
   }
 
   .ui-breadcrumb-item {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
     display: inline-flex;
     align-items: center;
     gap: var(--space-inline-xs);
@@ -2780,6 +2789,7 @@
   }
 
   .ui-editorial-page-header-title {
+    overflow-wrap: anywhere;
     margin: var(--editorial-page-header-title-space-block-start) 0
       var(--editorial-page-header-title-space-block-end);
     font-family: var(--font-family-editorial, var(--font-family-display));
@@ -2828,6 +2838,7 @@
   }
 
   .ui-editorial-article-title {
+    overflow-wrap: anywhere;
     margin: var(--editorial-article-title-space-block) 0;
     font-family: var(--font-family-editorial, var(--font-family-display));
     font-size: var(--editorial-article-title-font-size);

package/dist/styles/shell-layout.css

@@ -6,6 +6,8 @@
     width: 100%;
     max-width: 100vw;
     min-width: 0;
+
+    overflow-x: clip;
     grid-template-areas:
       "sidebar topbar"
       "sidebar main"
@@ -784,7 +786,7 @@
     flex: 1;
     align-items: center;
     align-self: stretch;
-    gap: var(--space-3);
+    gap: var(--app-shell-rail-gap);
   }
 
   .app-topbar-rail:has(> .app-topbar-right) {
@@ -829,6 +831,10 @@
     gap: var(--space-3);
   }
 
+  .app-topbar-custom:has(> .ui-topbar[data-overflow="menu"]) {
+    min-inline-size: var(--topbar-item-min-width);
+  }
+
   .app-topbar-left,
   .app-topbar-right {
     display: flex;
@@ -1858,6 +1864,10 @@
     border-inline-start: var(--stroke-hairline) solid hsl(var(--border));
   }
 
+  .sb-nav-sub .sb-nav-sub {
+    margin-inline-start: calc(var(--sidebar-nav-item-padding-x) + 2px);
+  }
+
   .sb-nav-item--sub {
     height: 1.75rem;
     font-size: var(--sidebar-nav-sub-font-size);
@@ -1944,6 +1954,12 @@
     white-space: nowrap;
   }
 
+  .sb-flyout-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sidebar-nav-gap);
+  }
+
   .sb-user {
     display: flex;
     width: 100%;

package/dist/styles/table-layout.css

@@ -166,7 +166,7 @@
       [data-slot="swatch"]
     ),
   [data-slot="table-cell"]
-    > :not(
+    > :is(span, a, [data-direction="row"]):not(
       [data-wrap],
       [data-direction="col"],
       [data-direction="responsive"],