@godxjp/ui 28.9.0 → 28.12.0

package/agent/vocabulary.json

@@ -0,0 +1,198 @@
+[
+  {
+    "concept": "Abstract controlled value.",
+    "name": "ValueProp<T = string>",
+    "usedBy": [
+      "CheckboxGroup",
+      "Upload",
+      "Cascader",
+      "TreeSelect",
+      "Tabs",
+      "SearchSelect"
+    ],
+    "values": [
+      "generic"
+    ]
+  },
+  {
+    "concept": "Abstract uncontrolled initial value.",
+    "name": "DefaultValueProp<T = string>",
+    "usedBy": [
+      "CheckboxGroup",
+      "Upload",
+      "Cascader",
+      "TreeSelect",
+      "Tabs"
+    ],
+    "values": [
+      "generic"
+    ]
+  },
+  {
+    "concept": "Callback for abstract value changes. DOM events continue to use onChange.",
+    "name": "OnValueChangeProp<T = string>",
+    "usedBy": [
+      "CheckboxGroup",
+      "Upload",
+      "Cascader",
+      "TreeSelect",
+      "Transfer",
+      "settings pickers"
+    ],
+    "values": [
+      "(value: T) => void"
+    ]
+  },
+  {
+    "concept": "Disclosure state.",
+    "name": "OpenProp / DefaultOpenProp / OnOpenChangeProp",
+    "usedBy": [
+      "Dialog",
+      "Sheet",
+      "Popover"
+    ],
+    "values": [
+      "boolean",
+      "(open: boolean) => void"
+    ]
+  },
+  {
+    "concept": "Shared public size names.",
+    "name": "SizeProp",
+    "notes": "Component-specific subsets must be documented. Old alias small is sm.",
+    "usedBy": [
+      "Button",
+      "Steps",
+      "Switch"
+    ],
+    "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg"
+    ]
+  },
+  {
+    "concept": "Semantic status/color intent.",
+    "name": "ToneProp",
+    "notes": "Status values belong in tone, not variant.",
+    "usedBy": [
+      "Badge",
+      "Alert"
+    ],
+    "values": [
+      "default",
+      "success",
+      "warning",
+      "destructive",
+      "info",
+      "muted",
+      "neutral"
+    ]
+  },
+  {
+    "concept": "Shared layout gap scale.",
+    "name": "GapProp",
+    "notes": "The single shared gap scale on Flex — the one layout primitive (default direction=\"row\"; use direction=\"col\" for vertical rhythm; these replaced the removed Stack/Inline).",
+    "usedBy": [
+      "Flex"
+    ],
+    "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+    ]
+  },
+  {
+    "concept": "Primary heading text.",
+    "name": "TitleProp",
+    "usedBy": [
+      "PageContainer",
+      "PageHeader",
+      "EmptyState",
+      "Dialog"
+    ],
+    "values": [
+      "React.ReactNode"
+    ]
+  },
+  {
+    "concept": "Page/subtree density.",
+    "name": "DensityProp",
+    "usedBy": [
+      "PageContainer"
+    ],
+    "values": [
+      "compact",
+      "default",
+      "comfortable"
+    ]
+  },
+  {
+    "concept": "Named whole-page SHELL contract for CenteredShell — the page measure, section rhythm, chrome flatness and hero heading tier, all owned by component tokens.",
+    "name": "CenteredShellPresetProp",
+    "notes": "public-landing is the PUBLIC marketing/product landing geometry: one 67.5rem measure shared by the header bar, the centred column and the footer, the section rhythm, flat elevation-free cards and the hero h1 tier. \"default\" emits NO data-preset at all, so the existing shell box is untouched. Pair with `Flex hideBelow`/`hideFrom` for header region visibility — a landing must never own a page-local media query or a max-width wrapper.",
+    "usedBy": [
+      "CenteredShell"
+    ],
+    "values": [
+      "default",
+      "public-landing"
+    ]
+  },
+  {
+    "concept": "Named collection contract for a table — how a dense collection behaves when its container gets narrow.",
+    "name": "TablePresetProp",
+    "notes": "action-collection swaps the desktop intrinsic column widths for table-layout: fixed + the token-owned column PRIORITY measures below `collapseBelow`, so a five-column approval queue keeps every column — including row actions — inside a 390px frame with no page-local CSS, no hidden column and no horizontal scroll. It changes the SIZING model only: no display change, no role rewriting, no card transformation, so table semantics and screen-reader navigation are identical at every width. ONE contract, two entry points: the `Table` primitive (mark `priority` on each TableHead/TableCell yourself) and the TanStack `DataTable` (mark `priority` on the ColumnDef; it stamps both cells for you, and additionally releases the surface's `--table-surface-min-inline-size` floor). Both read the same `--table-action-collection-*` tokens — there is no parallel DataTable family.",
+    "usedBy": [
+      "Table",
+      "DataTable"
+    ],
+    "values": [
+      "default",
+      "action-collection"
+    ]
+  },
+  {
+    "concept": "Relative importance of a table column, used by the action-collection preset to allocate the narrow-frame measure.",
+    "name": "TableColumnPriorityProp",
+    "notes": "On the raw `Table`, set it on BOTH the TableHead and the TableCell of a column; on `DataTable` set it once on the `ColumnDef` and it is stamped onto the <th> and every <td>. `actions` reserves its measure first so the row-action affordance can never be pushed outside the viewport; a column with no priority takes the remaining space (the free-text column).",
+    "usedBy": [
+      "Table",
+      "DataTable"
+    ],
+    "values": [
+      "primary",
+      "secondary",
+      "meta",
+      "actions"
+    ]
+  },
+  {
+    "concept": "Named hosted-identity FLOW MEASURE for AuthShell — the card max-width plus the desktop and mobile page gutters, all owned by component tokens.",
+    "name": "AuthShellPresetProp",
+    "notes": "Orthogonal to AuthShell's `variant` (which owns control density + heading size) and applied after it, so `variant=\"canonical\" preset=\"device-authorization\"` composes. device-authorization = 380px card / 5px inline gutter at 390; context-selection = 25rem card, edge-to-edge on mobile. Selecting a preset REPLACES any consumer-side --auth-shell-card-max-width override — a page-local width is the anti-pattern these presets exist to remove.",
+    "usedBy": [
+      "AuthShell"
+    ],
+    "values": [
+      "default",
+      "device-authorization",
+      "context-selection"
+    ]
+  },
+  {
+    "concept": "Avatar geometry — WHAT the identity mark represents: a person or an entity. Deliberately NOT the control ShapeProp (default|pill|sharp), whose `sharp` is --radius-sharp: 0 and cannot express the rounded rect an entity mark needs.",
+    "name": "AvatarShapeProp",
+    "notes": "circle (default, inert) = the round --radius-pill person avatar on the muted surface; square = the entity-header organization/service mark — a compact rounded square on the brand surface driven by --avatar-square-{radius,size,background,foreground}. Choose by meaning, never by look: a className=\"rounded-md bg-primary\" override on the call site is the anti-pattern this prop removes.",
+    "usedBy": [
+      "Avatar"
+    ],
+    "values": [
+      "circle",
+      "square"
+    ]
+  }
+]

package/dist/components/data-display/service-launcher-card.d.ts

@@ -28,7 +28,26 @@ import type { LucideIcon } from "lucide-react";
 import type { HeadingLevelProp, ToneProp } from "../../props/vocabulary/index.js";
 export type ServiceLauncherStatusTone = Extract<ToneProp, "success" | "warning" | "destructive" | "info" | "neutral" | "muted">;
 export interface ServiceLauncherCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * The generic glyph for this KIND of service. Stays REQUIRED and stays a `LucideIcon`: every
+     * service has one, including a service created ten seconds ago that has no logo yet, and it is
+     * the thing `logo` falls back to. See the `logo` note for why this was not widened to a union.
+     */
     icon: LucideIcon;
+    /**
+     * URL of the service's OWN uploaded mark — the PNG/WebP an administrator uploaded (gh#850).
+     * When it loads, it replaces `icon` in the medallion, in the glyph's exact box.
+     *
+     * It is a fallback chain, not a switch: the tile shows `icon` while the URL is in flight, and
+     * KEEPS showing `icon` if the URL 404s, is empty, or decodes to nothing. A launcher never
+     * degrades to an empty medallion or a torn-page glyph because a logo went missing — which is the
+     * only state that reaches production, since a logo path outlives the file it points at.
+     *
+     * Decorative, and deliberately has no `logoAlt` companion: the medallion is `aria-hidden` and the
+     * service NAME sits beside it. A screen reader must not hear "Attendance" twice (WCAG 2.2 · 1.1.1
+     * — an image adjacent to text conveying the same thing is decorative).
+     */
+    logo?: string;
     title: React.ReactNode;
     titleLevel?: HeadingLevelProp;
     statusLabel?: React.ReactNode;

package/dist/components/data-display/service-launcher-card.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Plus } from "lucide-react";
+import { useImageLoadingStatus } from "../../lib/image-loading-status.js";
 import { cn } from "../../lib/utils.js";
 import { Badge } from "./badge.js";
 import { Card, CardContent } from "./card.js";
@@ -9,6 +10,7 @@ const ServiceLauncherCard = React.forwardRef(
   ({
     className,
     icon: Icon,
+    logo,
     title,
     titleLevel = 2,
     statusLabel,
@@ -20,6 +22,11 @@ const ServiceLauncherCard = React.forwardRef(
     ...props
   }, ref) => {
     const Heading = `h${titleLevel}`;
+    const [logoStatus, setLogoStatus] = React.useState("idle");
+    const logoLoadingStatus = useImageLoadingStatus(logo || void 0, {
+      loadingStatus: logoStatus,
+      setLoadingStatus: setLogoStatus
+    });
     return /* @__PURE__ */ jsx(
       Card,
       {
@@ -32,7 +39,13 @@ const ServiceLauncherCard = React.forwardRef(
         children: /* @__PURE__ */ jsxs(CardContent, { solo: true, children: [
           /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-heading", children: [
             /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-identity", children: [
-              /* @__PURE__ */ jsx("span", { "data-slot": "service-launcher-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+              /* @__PURE__ */ jsx("span", { "data-slot": "service-launcher-icon", "aria-hidden": "true", children: logoLoadingStatus === "loaded" ? (
+                /* No `loading="lazy"`: the probe above has ALREADY fetched this URL by the time
+                 * this element exists, so a lazy hint would describe a request that is over.
+                 * `decoding="async"` is the hint that still means something here — it keeps the
+                 * decode of a grid of logos off the main thread. */
+                /* @__PURE__ */ jsx("img", { "data-slot": "service-launcher-logo", src: logo, alt: "", decoding: "async" })
+              ) : /* @__PURE__ */ jsx(Icon, {}) }),
               /* @__PURE__ */ jsx(Heading, { "data-slot": "service-launcher-title", children: title })
             ] }),
             statusLabel != null ? /* @__PURE__ */ jsx(Badge, { tone: statusTone, "data-slot": "service-launcher-status", children: statusLabel }) : null

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

@@ -6,7 +6,6 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { formatBytes } from "../../lib/format.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../general/button.js";
-import { Text } from "../general/typography.js";
 import { Progress } from "../data-display/progress.js";
 import { createUploadItem } from "./upload-types.js";
 import { readDroppedFiles } from "./upload-files.js";
@@ -30,6 +29,10 @@ function resolvePlaceholder(placeholder, type) {
   if (!placeholder) return {};
   return typeof placeholder === "function" ? placeholder(type) : placeholder;
 }
+function splitFileName(name) {
+  const match = /^(.*)\.[^.]+$/.exec(name ?? "");
+  return match ? [match[1], (name ?? "").slice(match[1].length)] : [name ?? "", ""];
+}
 function fileMatchesAccept(file, accept) {
   if (!accept) return true;
   return accept.split(",").some((rule) => {
@@ -60,6 +63,7 @@ function PlaceholderUploader({
       className: cn("ui-attachments-placeholder", className),
       style,
       "data-drag-active": dragActive ? "true" : void 0,
+      "data-disabled": disabled ? "true" : void 0,
       "aria-hidden": disabled ? true : void 0,
       onDragEnter: (event) => {
         event.preventDefault();
@@ -71,6 +75,7 @@ function PlaceholderUploader({
       },
       onDrop: async (event) => {
         event.preventDefault();
+        event.stopPropagation();
         setDragActive(false);
         if (disabled) return;
         const files = await readDroppedFiles(event.dataTransfer, false);
@@ -107,27 +112,55 @@ function AttachmentCard({
   const { t } = useTranslation();
   const { disabled } = React.useContext(AttachmentContext);
   const preview = item.thumbUrl ?? item.url;
+  const [namePrefix, nameSuffix] = splitFileName(item.name);
   const desc = description ?? item.description ?? (item.status === "uploading" ? `${item.percent ?? 0}%` : item.status === "error" ? typeof item.response === "string" ? item.response : t("dataEntry.attachments.error") : item.size ? formatBytes(item.size) : "");
-  return /* @__PURE__ */ jsxs("li", { className: cn("ui-attachments-card", classNames?.card, classNames?.file), children: [
-    preview ? /* @__PURE__ */ jsx("img", { src: preview, alt: "", className: "ui-attachments-card-preview", "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", { className: "ui-attachments-card-placeholder", "aria-hidden": "true", children: /* @__PURE__ */ jsx(FileIcon, {}) }),
-    (item.status === "uploading" || item.status === "error") && /* @__PURE__ */ jsx("div", { className: "ui-attachments-card-overlay", children: item.status === "uploading" && item.percent != null ? /* @__PURE__ */ jsx(Progress, { value: item.percent, "aria-label": t("dataEntry.attachments.uploading") }) : /* @__PURE__ */ jsx(Text, { size: "xs", children: String(desc) }) }),
-    desc && item.status !== "uploading" && item.status !== "error" ? /* @__PURE__ */ jsx("div", { className: "ui-attachments-card-meta", children: desc }) : null,
-    !disabled && onRemove ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        size: "icon-xs",
-        className: "ui-attachments-card-remove",
-        "aria-label": t("dataEntry.attachments.remove", { name: item.name }),
-        onClick: (event) => {
-          event.stopPropagation();
-          onRemove();
-        },
-        children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn("ui-attachments-card", classNames?.card, classNames?.file),
+      "data-status": item.status,
+      children: [
+        preview ? /* @__PURE__ */ jsx("img", { src: preview, alt: "", className: "ui-attachments-card-preview", "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", { className: "ui-attachments-card-placeholder", "aria-hidden": "true", children: /* @__PURE__ */ jsx(FileIcon, {}) }),
+        /* @__PURE__ */ jsxs("span", { className: "ui-attachments-card-content", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ui-attachments-card-name", title: item.name, children: [
+            /* @__PURE__ */ jsx("span", { className: "ui-attachments-card-name-prefix", children: namePrefix }),
+            /* @__PURE__ */ jsx("span", { className: "ui-attachments-card-name-suffix", children: nameSuffix })
+          ] }),
+          desc ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ui-attachments-card-meta",
+              title: typeof desc === "string" ? desc : void 0,
+              children: desc
+            }
+          ) : null
+        ] }),
+        item.status === "uploading" && item.percent != null ? /* @__PURE__ */ jsx("span", { className: "ui-attachments-card-progress", children: /* @__PURE__ */ jsx(
+          Progress,
+          {
+            size: "sm",
+            value: item.percent,
+            "aria-label": t("dataEntry.attachments.uploading")
+          }
+        ) }) : null,
+        !disabled && onRemove ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-xs",
+            className: "ui-attachments-card-remove",
+            "aria-label": t("dataEntry.attachments.remove", { name: item.name }),
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove();
+            },
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  );
 }
 const Attachments = React.forwardRef(
   ({
@@ -151,6 +184,7 @@ const Attachments = React.forwardRef(
     const containerRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const [internalItems, setInternalItems] = React.useState([]);
+    const [dropActive, setDropActive] = React.useState(false);
     const items = controlledItems ?? internalItems;
     const setItems = React.useCallback(
       (next, file) => {
@@ -207,7 +241,7 @@ const Attachments = React.forwardRef(
       {
         ref: inputRef,
         type: "file",
-        className: "ui-attachments-input",
+        className: cn("ui-attachments-input", "sr-only"),
         accept,
         multiple: multiple ?? (maxCount == null || maxCount > 1),
         disabled,
@@ -244,7 +278,7 @@ const Attachments = React.forwardRef(
         )
       ] });
     }
-    const dropHost = getDropContainer?.() ?? containerRef.current;
+    const dropScope = getDropContainer?.() ? "viewport" : "control";
     return /* @__PURE__ */ jsx(AttachmentContext.Provider, { value: { disabled }, children: /* @__PURE__ */ jsxs(
       "div",
       {
@@ -252,6 +286,21 @@ const Attachments = React.forwardRef(
         className: cn("ui-attachments", className, rootClassName, classNames.root),
         style: styles.root,
         dir: "auto",
+        onDragEnter: (event) => {
+          event.preventDefault();
+          if (!disabled) setDropActive(true);
+        },
+        onDragOver: (event) => event.preventDefault(),
+        onDragLeave: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) setDropActive(false);
+        },
+        onDrop: async (event) => {
+          event.preventDefault();
+          setDropActive(false);
+          if (disabled) return;
+          const files = await readDroppedFiles(event.dataTransfer, false);
+          if (files.length) dispatchFiles(files);
+        },
         children: [
           fileInput,
           hasFiles ? /* @__PURE__ */ jsxs(
@@ -297,20 +346,15 @@ const Attachments = React.forwardRef(
               hidden: hasFiles
             }
           ),
-          dropHost ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             "div",
             {
               className: "ui-attachments-drop-layer",
-              "data-active": void 0,
-              "aria-hidden": "true",
-              onDragOver: (event) => event.preventDefault(),
-              onDrop: async (event) => {
-                event.preventDefault();
-                const files = await readDroppedFiles(event.dataTransfer, false);
-                dispatchFiles(files);
-              }
+              "data-scope": dropScope,
+              "data-active": dropActive ? "true" : void 0,
+              "aria-hidden": "true"
             }
-          ) : null
+          )
         ]
       }
     ) });

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

@@ -13,7 +13,14 @@ import {
 } from "./control-appearance.js";
 import { resolveAllowClear } from "./control-surface.js";
 const inputBaseClass = [
-  "ui-control ui-input w-full rounded-[var(--control-radius)] transition-[color,box-shadow]",
+  // PER-EDGE RADIUS THROUGH A KNOB, because a joined control has to square one side (gh#841).
+  // `rounded-[var(--control-radius)]` is a UTILITY, and Tailwind v4 orders utilities after
+  // `@layer components` — so `.ui-input-group:has(…) .ui-input { border-start-start-radius: 0 }`
+  // resolved, was catalogued, and lost: the field kept 6px on its leading corners and drew a
+  // rounded edge exactly where the addon meets it. Fifth instance of the gh#366/#375/#819 trap.
+  // The repair is gh#366's: emit the value FROM a token as a utility, and let the components
+  // layer decide WHICH token — a custom property has no utility competing with it.
+  "ui-control ui-input w-full rounded-s-[var(--input-radius-start,var(--control-radius))] rounded-e-[var(--input-radius-end,var(--control-radius))] transition-[color,box-shadow]",
   "selection:bg-primary selection:text-primary-foreground",
   "placeholder:text-muted-foreground",
   "aria-invalid:border-destructive",

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

@@ -1,3 +1,3 @@
 import type { FlexProp } from "../../props/components/layout.prop.js";
-export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexMarkerProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
-export declare function Flex({ as: Element, direction, marker, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, hideBelowRaw, hideFromRaw, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;
+export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexMarkerProp, FlexMeasureProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
+export declare function Flex({ as: Element, direction, marker, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, hideBelowRaw, hideFromRaw, fill, width, measure, className, style, children, ...props }: FlexProp): import("react").JSX.Element;

package/dist/components/layout/flex.js

@@ -33,6 +33,7 @@ function Flex({
   hideFromRaw,
   fill = false,
   width,
+  measure,
   className,
   style,
   children,
@@ -81,6 +82,7 @@ function Flex({
       "data-hide-from-raw": fromRaw,
       "data-fill": fill ? "" : void 0,
       "data-width-raw": width === void 0 ? void 0 : "",
+      "data-measure": measure,
       "data-gap-raw": gapRaw,
       className: cn("ui-flex", gapRaw === void 0 ? flexGapClass[gap] : void 0, className),
       "data-pad-raw": padRaw === void 0 ? void 0 : "",

package/dist/components/ui/avatar.d.ts

@@ -1,22 +1,6 @@
 import * as React from "react";
+import { type ImageLoadingStatus } from "../../lib/image-loading-status.js";
 import type { AvatarProp } from "../../props/components/data-display.prop.js";
-/**
- * Trạng thái tải của ảnh trong avatar — chia sẻ giữa `AvatarImage` và
- * `AvatarFallback` qua context, đúng như Radix làm.
- *
- * React Aria KHÔNG có avatar, nên đây là việc TỰ DỰNG. Nhưng phần cần dựng lại
- * không phải cái vỏ `<span>` — mà là logic thật mà `@radix-ui/react-avatar` cầm:
- * ảnh chỉ được vẽ khi đã tải XONG, fallback chỉ được vẽ khi ảnh CHƯA xong hoặc
- * HỎNG, và `delayMs` giữ fallback im lặng đủ lâu để mạng nhanh không kịp nháy
- * một khung initials trước khi ảnh về.
- *
- * Phép dò là một `new Image()` RỜI, không phải `onLoad`/`onError` trên chính
- * thẻ được vẽ: thẻ chỉ tồn tại khi đã `loaded`, nên handler trên nó không bao
- * giờ có cơ hội báo "đang tải" hay "hỏng". Đây cũng là lý do một `<img>` hỏng
- * không bao giờ nằm trong DOM để trình duyệt vẽ biểu tượng ảnh vỡ lên trên
- * fallback.
- */
-type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error";
 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>>;
@@ -28,4 +12,3 @@ export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<React.
     asChild?: boolean;
     delayMs?: number;
 } & React.RefAttributes<HTMLSpanElement>>;
-export {};

package/dist/components/ui/avatar.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffectEvent, useLayoutEffect } from "@react-aria/utils";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { useImageLoadingStatus } from "../../lib/image-loading-status.js";
 import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
 const AvatarContext = React.createContext(null);
@@ -13,42 +14,6 @@ function useAvatarContext(part) {
   }
   return context;
 }
-function getImageLoadingStatus(image) {
-  if (!image.complete) {
-    return "loading";
-  }
-  return image.naturalWidth > 0 ? "loaded" : "error";
-}
-function useImageLoadingStatus(src, {
-  loadingStatus,
-  setLoadingStatus,
-  referrerPolicy,
-  crossOrigin
-}) {
-  useLayoutEffect(() => {
-    if (!src) {
-      setLoadingStatus("error");
-      return;
-    }
-    const image = new window.Image();
-    const handleLoad = (event) => setLoadingStatus(getImageLoadingStatus(event.currentTarget));
-    const handleError = () => setLoadingStatus("error");
-    image.addEventListener("load", handleLoad);
-    image.addEventListener("error", handleError);
-    if (referrerPolicy) {
-      image.referrerPolicy = referrerPolicy;
-    }
-    image.crossOrigin = crossOrigin ?? null;
-    image.src = src;
-    setLoadingStatus(getImageLoadingStatus(image));
-    return () => {
-      image.removeEventListener("load", handleLoad);
-      image.removeEventListener("error", handleError);
-      setLoadingStatus("idle");
-    };
-  }, [src, crossOrigin, referrerPolicy, setLoadingStatus]);
-  return loadingStatus;
-}
 const Avatar = React.forwardRef(
   ({
     className,

package/dist/components/ui/tag-input.d.ts

@@ -40,6 +40,16 @@ export type TagInputProps = {
     maxTagCount?: MaxTagCountProp;
     /** The node standing in for what `maxTagCount` hid (antd `maxTagPlaceholder`). */
     maxTagPlaceholder?: MaxTagPlaceholderProp;
+    /**
+     * antd `maxTagTextLength` — cut each chip's TEXT to this many characters; the value is
+     * untouched and stays in `title` and in the remover's accessible name.
+     *
+     * It was declared on the public prop type and never destructured here, so a 71-character
+     * identifier set the chip's width and the chip set the row's, painting outside the control
+     * (gh#840). Declared and inert is the same defect as absent, with a worse failure mode:
+     * a consumer reads the prop, passes it, and watches nothing happen.
+     */
+    maxTagTextLength?: number;
     /** Render one chip yourself (antd `tagRender`) — receives the value and an `onClose` remover. */
     tagRender?: (props: {
         value: string;

package/dist/components/ui/tag-input.js

@@ -30,6 +30,7 @@ const TagInput = React.forwardRef(
     onClear,
     maxTagCount,
     maxTagPlaceholder,
+    maxTagTextLength,
     tagRender,
     tokenSeparators = [","]
   }, ref) => {
@@ -95,6 +96,12 @@ const TagInput = React.forwardRef(
           disabled && "ui-tag-input-disabled",
           className
         ),
+        onMouseDown: (event) => {
+          if (event.target !== event.currentTarget) return;
+          event.preventDefault();
+          const field = event.currentTarget.querySelector(".ui-tag-input-field");
+          field?.focus();
+        },
         children: [
           tags.length > 0 ? /* @__PURE__ */ jsxs("ul", { role: "list", className: "ui-tag-input-list", "data-slot": "tag-input-list", children: [
             visibleChips.map((chip) => /* @__PURE__ */ jsx(
@@ -110,7 +117,14 @@ const TagInput = React.forwardRef(
                   disabled: Boolean(disabled) || Boolean(readOnly),
                   onClose: () => removeAt(chip.index)
                 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  chip.value,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "ui-tag-input-chip-label",
+                      title: maxTagTextLength && chip.value.length > maxTagTextLength ? chip.value : void 0,
+                      children: maxTagTextLength && chip.value.length > maxTagTextLength ? `${chip.value.slice(0, maxTagTextLength)}\u2026` : chip.value
+                    }
+                  ),
                   !disabled && !readOnly ? /* @__PURE__ */ jsx(
                     "button",
                     {
@@ -125,7 +139,26 @@ const TagInput = React.forwardRef(
               },
               chip.value
             )),
-            omittedChips.length > 0 ? /* @__PURE__ */ jsx("li", { role: "listitem", className: "ui-tag-input-chip", "data-slot": "tag-input-overflow", children: overflow ?? t("dataEntry.selection.overflow", { count: omittedChips.length }) }) : null
+            omittedChips.length > 0 ? (
+              /* `+N` NAMES WHAT IT HIDES (gh#840). It used to be a bare `<li role="listitem">` with
+                 no title, no tabindex and no role — so a reader who saw `+1` had no way, by mouse
+                 or by keyboard, to learn which tag it stood for. antd's `maxTagPlaceholder` exists
+                 for exactly this; the default now carries the omitted values itself. */
+              /* @__PURE__ */ jsx(
+                "li",
+                {
+                  role: "listitem",
+                  className: "ui-tag-input-chip",
+                  "data-slot": "tag-input-overflow",
+                  tabIndex: 0,
+                  title: omittedChips.map((c) => c.value).join(", "),
+                  "aria-label": t("ui.tagInput.overflowLabel", {
+                    tags: omittedChips.map((c) => c.value).join(", ")
+                  }),
+                  children: overflow ?? t("dataEntry.selection.overflow", { count: omittedChips.length })
+                }
+              )
+            ) : null
           ] }) : null,
           /* @__PURE__ */ jsx(
             "input",