@godxjp/ui 33.22.2 → 33.25.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",
@@ -4439,6 +4469,18 @@
     "tier": "component",
     "value": "24rem"
   },
+  {
+    "description": "The listbox hugs its longest row up to this, then wraps rows; the same cap as the search panel so both Select modes size alike. The inset keeps it off the viewport edges.",
+    "name": "--select-content-max-width",
+    "tier": "component",
+    "value": "32rem"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--select-content-viewport-inset",
+    "tier": "component",
+    "value": "var(--space-6)"
+  },
   {
     "description": "Seat for a NUMERIC `popupMatchSelectWidth` on the plain listbox. `auto` is the inert default.",
     "name": "--select-content-inline-size",
@@ -4692,7 +4734,7 @@
     "value": "var(--font-size-sm, var(--font-size-base))"
   },
   {
-    "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))",
+    "description": "Scoped at the reader: interactive days fall back to --button-radius; read-only cells to calc(var(--radius) / var(--radius-ratio)).",
     "name": "--calendar-day-radius",
     "tier": "component",
     "value": "initial"
@@ -5939,6 +5981,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",
@@ -9693,7 +9783,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-search-shadow",
     "tier": "component",
-    "value": "0 4px 16px rgb(var(--shadow-color, 0 0 0) / 0.06)"
+    "value": "initial"
   },
   {
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
@@ -9813,7 +9903,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-search-popup-shadow",
     "tier": "component",
-    "value": "0 12px 32px rgb(var(--shadow-color, 0 0 0) / 0.12)"
+    "value": "initial"
   },
   {
     "description": "Default = hsl(var(--border)).",
@@ -10257,7 +10347,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-showcase-caption-shadow",
     "tier": "component",
-    "value": "0 4px 16px rgb(var(--shadow-color, 0 0 0) / 0.06)"
+    "value": "initial"
   },
   {
     "description": "scale-exempt: measured editorial geometry; retain the existing size between icon steps",
@@ -10485,7 +10575,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-catalog-card-hover-shadow",
     "tier": "component",
-    "value": "0 10px 28px rgb(var(--shadow-color, 0 0 0) / 0.1)"
+    "value": "initial"
   },
   {
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
@@ -10911,7 +11001,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-spotlight-hover-shadow",
     "tier": "component",
-    "value": "0 4px 16px rgb(var(--shadow-color, 0 0 0) / 0.06)"
+    "value": "initial"
   },
   {
     "description": "── EditorialCard variant=\"journal\" ──────────────────────────────────────────────────────",
@@ -11073,7 +11163,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-journal-hover-shadow",
     "tier": "component",
-    "value": "0 12px 28px rgb(var(--shadow-color, 0 0 0) / 0.08)"
+    "value": "initial"
   },
   {
     "description": "── EditorialMasthead ────────────────────────────────────────────────────────────────────",
@@ -11603,6 +11693,24 @@
     "tier": "component",
     "value": "var(--space-10)"
   },
+  {
+    "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
+    "name": "--editorial-catalog-detail-loading-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
+    "name": "--editorial-catalog-detail-loading-duration",
+    "tier": "component",
+    "value": "var(--duration-loop)"
+  },
+  {
+    "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
+    "name": "--editorial-catalog-detail-loading-alpha",
+    "tier": "component",
+    "value": "0.5"
+  },
   {
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-catalog-detail-art-radius",
@@ -16247,6 +16355,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/charts/chart-cartesian.js

@@ -54,6 +54,7 @@ function CartesianChart({
   assertRechartsPeer();
   const { t, locale } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
+  const counts = useChartNumberFormat();
   const list = React.useMemo(() => listFormat(locale, { style: "narrow", type: "unit" }), [locale]);
   const points = series.flatMap(
     (s, seriesIndex) => data.flatMap(
@@ -127,7 +128,10 @@ function CartesianChart({
     categoryKey,
     fmt,
     list,
-    (c) => t("chart.summaryCartesian", { series: fmt.format(c.series), points: fmt.format(c.points) })
+    (c) => t("chart.summaryCartesian", {
+      series: counts.format(c.series),
+      points: counts.format(c.points)
+    })
   );
   const resolvedHeight = chartHeight(size, height);
   const tickFormatter = (value) => fmt.format(value);

package/dist/components/charts/chart-summary.d.ts

@@ -33,7 +33,7 @@ export declare function buildTrendSummary(data: ChartDatum[], categoryKey: strin
  * Negative values plot at the baseline (a compact trend has no negative axis) but
  * still read their true figure in the text alternative.
  */
-export declare function trendRatios(data: ChartDatum[], valueKey: string): number[];
+export declare function trendRatios(data: ChartDatum[], valueKey: string): (number | null)[];
 /**
  * Resolve `emphasizedIndex` against a row count. Negative counts from the end (`-1` = the latest
  * datum).

package/dist/components/charts/chart-summary.js

@@ -1,11 +1,16 @@
+import { translateCurrent as t } from "../../i18n/translate.js";
 function numeric(value) {
-  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function formatValue(value, fmt) {
+  const number = numeric(value);
+  return number === null ? t("chart.noData") : fmt.format(number);
 }
 function buildCartesianSummary(data, series, categoryKey, fmt, list, summaryLine) {
   const rows = data.map((datum) => {
     const category = String(datum[categoryKey] ?? "");
     const parts = series.map(
-      (s) => `${s.label ?? s.dataKey}: ${fmt.format(numeric(datum[s.dataKey]))}`
+      (s) => `${s.label ?? s.dataKey}: ${formatValue(datum[s.dataKey], fmt)}`
     );
     return `${category} \u2014 ${list.format(parts)}`;
   });
@@ -13,7 +18,7 @@ function buildCartesianSummary(data, series, categoryKey, fmt, list, summaryLine
 }
 function buildSeriesRows(data, categoryKey, valueKey, fmt, annotate) {
   return data.map((datum, index) => {
-    const row = `${String(datum[categoryKey] ?? "")}: ${fmt.format(numeric(datum[valueKey]))}`;
+    const row = `${String(datum[categoryKey] ?? "")}: ${formatValue(datum[valueKey], fmt)}`;
     const note = annotate?.(index);
     return note ? `${row} (${note})` : row;
   });
@@ -31,9 +36,15 @@ function buildTrendSummary(data, categoryKey, valueKey, fmt, summaryLine, annota
   };
 }
 function trendRatios(data, valueKey) {
-  const values = data.map((datum) => Math.max(0, numeric(datum[valueKey])));
-  const max = values.reduce((acc, value) => value > acc ? value : acc, 0);
-  return values.map((value) => max > 0 ? value / max : 0);
+  const values = data.map((datum) => {
+    const value = numeric(datum[valueKey]);
+    return value === null ? null : Math.max(0, value);
+  });
+  const max = values.reduce(
+    (acc, value) => value !== null && value > acc ? value : acc,
+    0
+  );
+  return values.map((value) => value === null ? null : max > 0 ? value / max : 0);
 }
 function resolveEmphasizedIndex(index, length) {
   if (index === void 0 || !Number.isInteger(index) || length === 0) return -1;

package/dist/components/charts/compact-bar-trend.js

@@ -25,6 +25,7 @@ function CompactBarTrend({
 }) {
   const { t } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
+  const countsFormat = useChartNumberFormat();
   const hasData = data.length > 0;
   const emphasized = resolveEmphasizedIndex(emphasizedIndex, data.length);
   const ratios = React.useMemo(() => trendRatios(data, valueKey), [data, valueKey]);
@@ -33,7 +34,7 @@ function CompactBarTrend({
     categoryKey,
     valueKey,
     fmt,
-    (counts) => t("chart.summaryTrend", { points: fmt.format(counts.points) }),
+    (counts) => t("chart.summaryTrend", { points: countsFormat.format(counts.points) }),
     (index) => index === emphasized ? t("chart.trendCurrent") : void 0
   );
   return /* @__PURE__ */ jsx(
@@ -51,14 +52,14 @@ function CompactBarTrend({
       className: cn("ui-chart-trend", className),
       id,
       children: hasData ? /* @__PURE__ */ jsxs("div", { className: "ui-chart-trend-body", children: [
-        /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-plot", "aria-hidden": "true", children: data.map((datum, index) => /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-column", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-plot", "aria-hidden": "true", children: data.map((datum, index) => /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-column", children: ratios[index] !== null ? /* @__PURE__ */ jsx(
           "div",
           {
             className: "ui-chart-trend-bar",
             "data-emphasized": index === emphasized ? "true" : void 0,
             style: { "--chart-trend-bar-value": ratios[index] }
           }
-        ) }, `${String(datum[categoryKey])}-${index}`)) }),
+        ) : null }, `${String(datum[categoryKey])}-${index}`)) }),
         showCategoryLabels ? /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-ticks", "aria-hidden": "true", children: data.map((datum, index) => /* @__PURE__ */ jsx(
           "span",
           {

package/dist/components/charts/pie-chart.js

@@ -37,6 +37,7 @@ function PieChart({
   assertRechartsPeer();
   const { t } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
+  const counts = useChartNumberFormat();
   const points = data.flatMap(
     (datum, index) => typeof datum[dataKey] === "number" && Number.isFinite(datum[dataKey]) && Number(datum[dataKey]) > 0 ? [{ index, series: 0 }] : []
   );
@@ -71,7 +72,7 @@ function PieChart({
     dataKey,
     nameKey,
     fmt,
-    (c) => t("chart.summaryPie", { slices: fmt.format(c.slices) })
+    (c) => t("chart.summaryPie", { slices: counts.format(c.slices) })
   );
   const resolvedHeight = chartHeight(size, height);
   return /* @__PURE__ */ jsx(

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.d.ts

@@ -14,6 +14,7 @@ export declare const Image: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAt
     alt: string;
     fallback?: string;
     placeholder?: React.ReactNode | boolean;
+    onStatusChange?: (status: "loading" | "loaded" | "error") => void;
     preview?: boolean | ImagePreviewConfigProp;
     width?: number | string;
     height?: number | string;

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

@@ -420,6 +420,7 @@ const ImageRoot = React.forwardRef(function Image({
   alt,
   fallback,
   placeholder,
+  onStatusChange,
   preview = true,
   width,
   height,
@@ -444,6 +445,11 @@ const ImageRoot = React.forwardRef(function Image({
     status: "loading"
   });
   const status = load.src === src ? load.status : "loading";
+  const statusChangeRef = React.useRef(onStatusChange);
+  statusChangeRef.current = onStatusChange;
+  React.useEffect(() => {
+    statusChangeRef.current?.(status);
+  }, [src, status]);
   const setStatus = React.useCallback(
     (next) => setLoad(
       (prev) => prev.src === src && prev.status === "error" ? prev : { src, status: next }
@@ -454,7 +460,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;
     },
@@ -471,7 +477,9 @@ const ImageRoot = React.forwardRef(function Image({
   }, [inGroup, group, id, previewSrc, alt]);
   const [visible, setVisible] = useMergedState(config.visible, false, config.onVisibleChange);
   const shownSrc = isError && fallback ? fallback : src;
-  const showPlaceholder = placeholder != null && placeholder !== false && status === "loading";
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+  const showPlaceholder = mounted && placeholder != null && placeholder !== false && status === "loading";
   const intrinsic = fit === "intrinsic";
   const sized = intrinsic || size != null || width != null || height != null;
   const frameFit = fit ?? (size != null || height != null ? "cover" : void 0);

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-display/popover.js

@@ -243,6 +243,16 @@ function ClickContent({
 }) {
   const root = usePopoverRoot("PopoverContent");
   const contentRef = React.useRef(null);
+  const [viewportInlineSize, setViewportInlineSize] = React.useState();
+  React.useLayoutEffect(() => {
+    if (!root.open) return;
+    const doc = root.triggerRef.current?.ownerDocument ?? document;
+    const update = () => setViewportInlineSize(doc.documentElement.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(doc.documentElement);
+    return () => observer.disconnect();
+  }, [root.open, root.triggerRef]);
   const openAutoFocusRef = React.useRef(onOpenAutoFocus);
   openAutoFocusRef.current = onOpenAutoFocus;
   useOverlayCloseFocus(root.open, onCloseAutoFocus, contentRef);
@@ -350,6 +360,7 @@ function ClickContent({
             style: {
               ...racStyle,
               "--radix-popover-trigger-width": "var(--trigger-width)",
+              ...viewportInlineSize == null ? null : { "--popover-viewport-inline-size": `${viewportInlineSize}px` },
               "--radix-popover-content-transform-origin": "var(--trigger-anchor-point)",
               ...availableHeight == null ? null : {
                 "--radix-popover-content-available-height": typeof availableHeight === "number" ? `${availableHeight}px` : availableHeight

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

@@ -161,7 +161,7 @@ function Calendar({
         day: cn("ui-calendar-day", classNames?.day),
         day_button: cn(
           buttonVariants({ variant: "ghost" }),
-          "ui-calendar-day-button",
+          "ui-calendar-day-button rounded-[var(--calendar-day-radius,var(--button-radius))]",
           classNames?.day_button
         ),
         range_start: cn("day-range-start", classNames?.range_start),

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

@@ -131,7 +131,7 @@ function DatePicker(props) {
     defaultValue
   );
   const value = isControlled ? valueProp : internalValue;
-  const working = hasPending ? pending : value;
+  const working = open && hasPending ? pending : value;
   const rangeValue = range ? working : void 0;
   const selectedDate = range ? rangeValue?.from : Array.isArray(working) ? working[0] : working;
   const emit = (next) => {
@@ -156,6 +156,16 @@ function DatePicker(props) {
       setText(displayAll(committedSingle));
     }
   }, [range, value, committedFrom, committedTo, format, locale, showTime]);
+  React.useEffect(() => {
+    if (!open) {
+      setHasPending(false);
+      setPending(void 0);
+      if (range) {
+        setFromText(display(committedFrom));
+        setToText(display(committedTo));
+      }
+    }
+  }, [open]);
   const valueAnchor = range ? committedRange?.from : Array.isArray(committedSingle) ? committedSingle[0] : committedSingle;
   const [internalView, setInternalView] = React.useState(
     () => defaultPickerValue ?? valueAnchor
@@ -182,7 +192,7 @@ function DatePicker(props) {
   const validRange = (next) => Boolean(
     next && (next.from ? allowed(next.from) : allowEmpty[0]) && (next.to ? allowed(next.to) : allowEmpty[1])
   );
-  const choose = (input) => {
+  const choose = (input, typed = false) => {
     if (range) {
       let next = input;
       if (anyDisabled && next)
@@ -196,7 +206,14 @@ function DatePicker(props) {
       if (needConfirm) {
         setPending(next);
         setHasPending(true);
-      } else emit(next);
+      } else if (open && !typed && next && !(next.from && next.to)) {
+        setPending(next);
+        setHasPending(true);
+      } else {
+        setPending(void 0);
+        setHasPending(false);
+        emit(next);
+      }
       return;
     }
     let date = input;
@@ -253,7 +270,7 @@ function DatePicker(props) {
     if (!trimmed && !allowEmpty[edge === "from" ? 0 : 1]) return;
     const base = working;
     const next = { from: base?.from, to: base?.to, [edge]: parsed && periodDate(parsed) };
-    choose(next.from || next.to ? next : void 0);
+    choose(next.from || next.to ? next : void 0, true);
   };
   const keyHandlers = (onEnter) => ({
     onKeyDown: (event) => {
@@ -458,7 +475,7 @@ function DatePicker(props) {
     {
       mode: "multiple",
       selected: Array.isArray(working) ? working : [],
-      onSelect: choose,
+      onSelect: (days) => choose(days),
       disabled: (day) => !allowed(day),
       ...calendarShared
     }