@godxjp/ui 30.4.2 → 30.5.3

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

@@ -0,0 +1,359 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, X } from "lucide-react";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { normalizeSelectOptions } from "../../lib/select-options.js";
+import { Badge } from "../data-display/badge.js";
+import { EmptyState } from "../data-display/empty-state.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { Flex } from "../layout/flex.js";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../feedback/dialog.js";
+import { Command, CommandGroup } from "./command.js";
+import { Input } from "./input.js";
+import { Select } from "./select.js";
+const RecordPicker = React.forwardRef(
+  function RecordPicker2({
+    mode = "single",
+    value,
+    defaultValue,
+    onValueChange,
+    options,
+    loadOptions,
+    count,
+    threshold = 10,
+    filters,
+    selectedOptions,
+    emptyOption,
+    placeholder,
+    dialogTitle,
+    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(
+      () => loadOptions ? async ({ query, page }) => {
+        const r = await loadOptions({
+          query,
+          filters: {},
+          cursor: page > 1 ? String(page) : void 0
+        });
+        return { options: r.options, hasMore: r.nextCursor !== void 0 };
+      } : void 0,
+      [loadOptions]
+    );
+    const staticOptions = React.useMemo(
+      () => options ? normalizeSelectOptions(options) : [],
+      [options]
+    );
+    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"),
+          disabled,
+          size,
+          className
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      DialogPicker,
+      {
+        ref,
+        "data-field": fieldName,
+        isMultiple,
+        selected,
+        commit,
+        staticOptions,
+        loadOptions,
+        filters,
+        selectedOptions,
+        emptyOption,
+        placeholder,
+        dialogTitle,
+        disabled,
+        size,
+        className,
+        ...props
+      }
+    );
+  }
+);
+function toArray(v) {
+  if (v === null || v === void 0) return [];
+  return Array.isArray(v) ? v : [v];
+}
+function withEmptyOption(options, emptyOption) {
+  if (!emptyOption) return options;
+  return [{ value: emptyOption.value, label: emptyOption.label }, ...options ?? []];
+}
+const DialogPicker = React.forwardRef(function DialogPicker2({
+  isMultiple,
+  selected,
+  commit,
+  staticOptions,
+  loadOptions,
+  filters,
+  selectedOptions,
+  emptyOption,
+  placeholder,
+  dialogTitle,
+  disabled,
+  size,
+  className,
+  ...props
+}, ref) {
+  const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [filterValues, setFilterValues] = React.useState({});
+  const [rows, setRows] = React.useState(staticOptions);
+  const [status, setStatus] = React.useState("idle");
+  const [cursor, setCursor] = React.useState(void 0);
+  const [draft, setDraft] = React.useState(selected);
+  React.useEffect(() => {
+    if (open) setDraft(selected);
+  }, [open, selected]);
+  const labelCache = React.useRef(/* @__PURE__ */ new Map());
+  for (const o of [...selectedOptions ?? [], ...staticOptions, ...rows]) {
+    labelCache.current.set(o.value, o);
+  }
+  if (emptyOption) {
+    labelCache.current.set(emptyOption.value, {
+      value: emptyOption.value,
+      label: emptyOption.label
+    });
+  }
+  const labels = labelCache.current;
+  const load = React.useCallback(
+    async (q, f, more) => {
+      if (!loadOptions) return;
+      setStatus("loading");
+      try {
+        const result = await loadOptions({ query: q, filters: f, cursor: more });
+        setRows((prev) => more ? [...prev, ...result.options] : result.options);
+        setCursor(result.nextCursor);
+        setStatus("idle");
+      } catch {
+        setStatus("error");
+      }
+    },
+    [loadOptions]
+  );
+  React.useEffect(() => {
+    if (!open || !loadOptions) return;
+    const id = setTimeout(() => void load(query, filterValues), 250);
+    return () => clearTimeout(id);
+  }, [open, query, filterValues, load, loadOptions]);
+  const visible = React.useMemo(() => {
+    const base = loadOptions ? rows : staticOptions.filter((o) => o.label.toLowerCase().includes(query.trim().toLowerCase()));
+    return emptyOption && !query.trim() ? [{ value: emptyOption.value, label: emptyOption.label }, ...base] : base;
+  }, [loadOptions, rows, staticOptions, query, emptyOption]);
+  const groups = React.useMemo(() => {
+    const out = /* @__PURE__ */ new Map();
+    for (const o of visible) {
+      const key = o.group ?? "";
+      out.set(key, [...out.get(key) ?? [], o]);
+    }
+    return [...out.entries()];
+  }, [visible]);
+  const toggle = (optionValue) => {
+    if (!isMultiple) {
+      commit([optionValue]);
+      setOpen(false);
+      return;
+    }
+    setDraft(
+      (prev) => prev.includes(optionValue) ? prev.filter((v) => v !== optionValue) : [...prev, optionValue]
+    );
+  };
+  const chips = selected.map((v) => labels.get(v) ?? { value: v, label: v });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: "xs", align: "center", className: "ui-record-picker-row", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          ref,
+          type: "button",
+          variant: "outline",
+          size,
+          disabled,
+          "aria-haspopup": "dialog",
+          onClick: () => setOpen(true),
+          className: cn("ui-record-picker-trigger", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "ui-record-picker-trigger-label", children: chips.length === 0 ? /* @__PURE__ */ jsx(Text, { as: "span", size: "sm", tone: "muted", children: placeholder ?? t("dataEntry.recordPicker.placeholder") }) : /* @__PURE__ */ jsx(Flex, { direction: "row", gap: "xs", wrap: true, align: "center", children: chips.map((c) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", as: "span", children: [
+              c.icon,
+              c.label
+            ] }, c.value)) }) }),
+            /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })
+          ]
+        }
+      ),
+      !isMultiple && selected.length > 0 && !disabled ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": t("dataEntry.recordPicker.clear"),
+          onClick: () => commit([]),
+          children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "ui-record-picker-dialog", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: dialogTitle ?? t("dataEntry.recordPicker.dialogTitle") }) }),
+      /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsxs(Flex, { direction: "col", gap: "md", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            autoFocus: true,
+            type: "search",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            "aria-label": t("dataEntry.recordPicker.search"),
+            placeholder: t("dataEntry.recordPicker.searchPlaceholder")
+          }
+        ),
+        filters?.length ? /* @__PURE__ */ jsx(
+          Flex,
+          {
+            direction: "row",
+            gap: "sm",
+            wrap: true,
+            role: "group",
+            "aria-label": t("dataEntry.recordPicker.filters"),
+            children: filters.map((f) => /* @__PURE__ */ jsx(
+              Select,
+              {
+                size: "sm",
+                "aria-label": f.label,
+                placeholder: f.label,
+                value: filterValues[f.name] ?? "",
+                onValueChange: (next) => setFilterValues((prev) => ({ ...prev, [f.name]: next })),
+                options: [
+                  { value: "", label: t("dataEntry.recordPicker.allFilter") },
+                  ...f.options
+                ]
+              },
+              f.name
+            ))
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Command, { shouldFilter: false, split: isMultiple, className: "ui-record-picker-list", children: status === "error" ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            variant: "compact",
+            tone: "destructive",
+            title: t("dataEntry.recordPicker.error"),
+            action: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => void load(query, filterValues),
+                children: t("dataEntry.recordPicker.more")
+              }
+            )
+          }
+        ) : status === "loading" ? /* @__PURE__ */ jsx("div", { role: "status", className: "ui-record-picker-status", children: t("dataEntry.recordPicker.loading") }) : visible.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { variant: "compact", title: t("dataEntry.recordPicker.empty") }) : groups.map(([heading, items]) => {
+          const rendered = items.map((o) => {
+            const picked = (isMultiple ? draft : selected).includes(o.value);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": picked,
+                "data-picked": picked ? "" : void 0,
+                disabled: o.disabled,
+                className: "ui-record-picker-option",
+                onClick: () => toggle(o.value),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "ui-record-picker-tick", "aria-hidden": "true", children: picked ? /* @__PURE__ */ jsx(Check, {}) : null }),
+                  o.icon,
+                  /* @__PURE__ */ jsxs("span", { className: "ui-record-picker-option-label", children: [
+                    o.label,
+                    o.sublabel ? /* @__PURE__ */ jsx(Text, { as: "span", size: "2xs", tone: "muted", children: o.sublabel }) : null
+                  ] })
+                ]
+              },
+              o.value
+            );
+          });
+          return heading ? /* @__PURE__ */ jsx(CommandGroup, { heading, children: rendered }, heading) : /* @__PURE__ */ jsx(React.Fragment, { children: rendered }, "__ungrouped");
+        }) }),
+        cursor !== void 0 && status !== "loading" ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => void load(query, filterValues, cursor),
+            children: t("dataEntry.recordPicker.more")
+          }
+        ) : null
+      ] }) }),
+      isMultiple ? /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", className: "me-auto", children: t("dataEntry.recordPicker.selected", { count: draft.length }) }),
+        /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setDraft([]), children: [
+          /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+          t("dataEntry.recordPicker.clear")
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setOpen(false), children: t("dataEntry.recordPicker.cancel") }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            onClick: () => {
+              commit(draft);
+              setOpen(false);
+            },
+            children: t("dataEntry.recordPicker.confirm")
+          }
+        )
+      ] }) : null
+    ] }) })
+  ] });
+});
+export {
+  RecordPicker
+};

package/dist/components/general/typography.d.ts

@@ -20,6 +20,7 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     clamp?: number;
     ellipsis?: boolean | Omit<TypographyEllipsisConfigProp, "rows" | "expandable" | "onExpand">;
     whitespace?: import("../../props/index.js").TextWhitespaceProp;
+    break?: import("../../props/index.js").TextBreakProp;
     tabular?: boolean;
     decoration?: "none" | "underline" | "line-through";
     chip?: boolean;

package/dist/components/general/typography.js

@@ -380,6 +380,8 @@ const TextBase = React.forwardRef((props, ref) => {
     truncate,
     clamp,
     whitespace,
+    // `break` is a reserved word, so it cannot be a binding name.
+    break: breakMode,
     tabular,
     decoration,
     chip,
@@ -424,6 +426,11 @@ const TextBase = React.forwardRef((props, ref) => {
         'Text: `truncate` and `whitespace="pre-wrap"` are mutually exclusive \u2014 `truncate` takes precedence (one line, one ellipsis); use `clamp` to keep preserved line breaks and still bound the height.'
       );
     }
+    if (breakMode === "anywhere" && truncating) {
+      console.warn(
+        'Text: `truncate` and `break="anywhere"` are mutually exclusive \u2014 `truncate` takes precedence (one line has nowhere to break to); use `clamp` to split the token and still bound the height.'
+      );
+    }
     if (ellipsis && (truncate || clamp !== void 0)) {
       console.warn(
         "Text: `ellipsis` (antd) and `truncate`/`clamp` are the same axis \u2014 `ellipsis` takes precedence; drop the other."
@@ -452,6 +459,9 @@ const TextBase = React.forwardRef((props, ref) => {
     // Inert default: `normal` is CSS's own behaviour, so it emits no attribute and there is no
     // `[data-whitespace="normal"]` rule to lose a specificity argument with anything.
     "data-whitespace": whitespace === "pre-wrap" && !truncating ? "pre-wrap" : void 0,
+    // Same shape and the same precedence as `whitespace`: `normal` is inert, and one line has
+    // nowhere to break to, so `truncate` simply does not emit it (gh#927).
+    "data-break": breakMode === "anywhere" && !truncating ? "anywhere" : void 0,
     style: clampStyle,
     "data-tabular": tabular ? "" : void 0,
     "data-decoration": decoration,

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "30.4.2",
+  "version": "30.5.3",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -189,6 +189,24 @@
       "remove": "Remove {name}",
       "uploading": "Uploading attachment",
       "error": "Upload failed"
+    },
+    "recordPicker": {
+      "trigger": "Select",
+      "placeholder": "Select…",
+      "search": "Search",
+      "searchPlaceholder": "Search by keyword",
+      "dialogTitle": "Select",
+      "filters": "Filters",
+      "allFilter": "All",
+      "selected": "{count} selected",
+      "loading": "Loading",
+      "empty": "No matching items",
+      "error": "Could not load",
+      "confirm": "Confirm",
+      "cancel": "Cancel",
+      "clear": "Clear selection",
+      "more": "Load more",
+      "openDialog": "Choose from list"
     }
   },
   "feedback": {

package/dist/i18n/messages/ja.json

@@ -185,6 +185,24 @@
       "remove": "{name} を削除",
       "uploading": "添付をアップロード中",
       "error": "アップロードに失敗しました"
+    },
+    "recordPicker": {
+      "trigger": "選択",
+      "placeholder": "選択してください",
+      "search": "検索",
+      "searchPlaceholder": "キーワードで検索",
+      "dialogTitle": "選択",
+      "filters": "絞り込み",
+      "allFilter": "すべて",
+      "selected": "選択中 {count} 件",
+      "loading": "読み込み中",
+      "empty": "該当する項目がありません",
+      "error": "読み込めませんでした",
+      "confirm": "決定",
+      "cancel": "キャンセル",
+      "clear": "選択を解除",
+      "more": "さらに読み込む",
+      "openDialog": "一覧から選択"
     }
   },
   "feedback": {

package/dist/i18n/messages/vi.json

@@ -186,6 +186,24 @@
       "remove": "Xóa {name}",
       "uploading": "Đang tải tệp đính kèm",
       "error": "Tải lên thất bại"
+    },
+    "recordPicker": {
+      "trigger": "Chọn",
+      "placeholder": "Chọn…",
+      "search": "Tìm kiếm",
+      "searchPlaceholder": "Tìm theo từ khoá",
+      "dialogTitle": "Chọn",
+      "filters": "Bộ lọc",
+      "allFilter": "Tất cả",
+      "selected": "Đã chọn {count}",
+      "loading": "Đang tải",
+      "empty": "Không có mục nào khớp",
+      "error": "Không tải được",
+      "confirm": "Xác nhận",
+      "cancel": "Huỷ",
+      "clear": "Bỏ chọn",
+      "more": "Tải thêm",
+      "openDialog": "Chọn từ danh sách"
     }
   },
   "feedback": {

package/dist/props/components/data-entry.prop.d.ts

@@ -1129,6 +1129,70 @@ export type SearchSelectOptionProp = {
     group?: string;
     disabled?: boolean;
 };
+/**
+ * One consumer-declared filter on a RecordPicker dialog (gh#932). The `name` is the key the
+ * picker puts into `loadOptions({ filters })`, so the server reads its own vocabulary back.
+ */
+export type RecordPickerFilterProp = {
+    name: string;
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+/**
+ * RecordPicker — a picker whose SHAPE follows the size of the set behind it. Under `threshold`
+ * it IS a `Select`; over it, a dialog with search and consumer-declared filters.
+ */
+export type RecordPickerProp = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue" | "onChange"> & {
+    /** `single` (default) or `multiple`. Decides the value shape AND whether the dialog confirms. */
+    mode?: "single" | "multiple";
+    value?: string | string[] | null;
+    defaultValue?: string | string[] | null;
+    /** Receives the shape you passed in: an array for `multiple`, a single value (or null) else. */
+    onValueChange?: (value: string | string[] | null) => void;
+    /** Static rows, client-filtered. Provide this OR `loadOptions`. */
+    options?: (SearchSelectOptionProp | SelectOptionGroupProp)[];
+    /** Server fetcher. `filters` carries the consumer's own filter vocabulary. */
+    loadOptions?: (params: {
+        query: string;
+        filters: Record<string, string>;
+        cursor?: string;
+    }) => Promise<{
+        options: SearchSelectOptionProp[];
+        count?: number;
+        nextCursor?: string;
+    }>;
+    /**
+     * Size of the WHOLE set, which only a server knows — a page of results does not. Omitted with
+     * `options`, it is their length; omitted with `loadOptions`, the dialog shape is assumed.
+     */
+    count?: number;
+    /** The dropdown/dialog switch. Default 10. */
+    threshold?: number;
+    /** Filters rendered above the dialog list; their values reach `loadOptions({ filters })`. */
+    filters?: RecordPickerFilterProp[];
+    /**
+     * Labels for values the picker holds but has not loaded — on first render there IS no page. Kept
+     * ahead of anything that loads later, so a chip never renders a raw id and never disappears.
+     */
+    selectedOptions?: SearchSelectOptionProp[];
+    /** A real row meaning "none" (an unassigned owner), pinned first — not a cleared field. */
+    emptyOption?: {
+        value: string;
+        label: string;
+    };
+    placeholder?: string;
+    dialogTitle?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * Tên trường, do `FormField` truyền xuống. Khai tường minh vì CẢ HAI nhánh phải giữ nó: một
+     * lỗi 422 của server bám theo `data-field`, và consumer đo được nhánh dropdown đánh rơi nó
+     * trong khi nhánh Dialog thì giữ (gh#942).
+     */
+    "data-field"?: string;
+};
 export type SearchSelectLoadParamsProp = {
     query: string;
     /** 1-based page for infinite scroll. */

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

@@ -1,6 +1,6 @@
 /** Foundation component prop types — @see docs/COMPONENTS.md#foundation */
 import type * as React from "react";
-import type { ActivityAnnounceProp, ActivityVariantProp, AsChildProp, ButtonSizeProp, ButtonVariantProp, ChildrenProp, ClassNameProp, DescriptionProp, DisabledProp, FontWeightProp, HeadingLevelProp, IconSizeProp, IdProp, InViewAmountProp, LabelProp, OnClickProp, OnOpenChangeProp, OpenProp, PendingProp, RevealDelayProp, RevealTriggerProp, ShapeProp, SizeProp, TextAlignProp, TextSizeProp, TextToneProp, TextWhitespaceProp, TitleLevelProp, TypographyActionsConfigProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyTypeProp } from "../vocabulary/index.js";
+import type { ActivityAnnounceProp, ActivityVariantProp, AsChildProp, ButtonSizeProp, ButtonVariantProp, ChildrenProp, ClassNameProp, DescriptionProp, DisabledProp, FontWeightProp, HeadingLevelProp, IconSizeProp, IdProp, InViewAmountProp, LabelProp, OnClickProp, OnOpenChangeProp, OpenProp, PendingProp, RevealDelayProp, RevealTriggerProp, ShapeProp, SizeProp, TextAlignProp, TextSizeProp, TextToneProp, TextWhitespaceProp, TextBreakProp, TitleLevelProp, TypographyActionsConfigProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyTypeProp } from "../vocabulary/index.js";
 /**
  * @see Text — typographic primitive; replaces hand-rolled `<span className="text-[13px] …">`.
  *
@@ -66,6 +66,20 @@ export type TextProp = Omit<React.HTMLAttributes<HTMLElement>, "color"> & Omit<T
      * `clamp` composes with it — a clamped pre-wrap block shows its first N real lines.
      */
     whitespace?: TextWhitespaceProp;
+    /**
+     * Where an over-long unbroken token may break. Default `normal` (CSS's own: it stays whole).
+     *
+     * `anywhere` is for a MACHINE identifier — an email address, a coupon code, a login id, a
+     * template key — in a narrow `DataTable` cell or `Descriptions` value: it may be split at any
+     * character to fit, so the column shrinks to the viewport instead of scrolling the page. It
+     * also releases a `nowrap` it inherited (a table cell's default) back to `normal` — newlines
+     * still collapse, because an identifier's whitespace is not content.
+     *
+     * Independent of `whitespace`: `whitespace="pre-wrap" break="anywhere"` keeps typed line breaks
+     * AND splits a long token. `truncate` WINS (one line has nowhere to break to), so the attribute
+     * is not emitted under it; `clamp` composes.
+     */
+    break?: TextBreakProp;
     /** Tabular figures for aligned numbers. */
     tabular?: boolean;
     decoration?: "none" | "underline" | "line-through";

package/dist/props/registry.d.ts

@@ -464,6 +464,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "interaction";
         readonly description: "Whitespace handling normal | pre-wrap: `pre-wrap` keeps the newlines and indentation a person typed (a plain-text note, a pasted log) and still wraps at the container edge; `truncate` outranks it";
     };
+    readonly TextBreakProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Where an over-long unbroken token may break normal | anywhere: `anywhere` (overflow-wrap: anywhere) lets a machine identifier (email, code, login id) split to fit a narrow table cell; independent of TextWhitespaceProp, and `truncate` outranks it";
+    };
     readonly TypographyTypeProp: {
         readonly file: "vocabulary/interaction.prop.ts";
         readonly category: "interaction";
@@ -1802,6 +1807,18 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "EmptyMessageProp", "DisabledProp", "NameProp", "IdProp", "ClassNameProp", "OpenProp", "OnOpenChangeProp", "SizeProp", "DefaultOpenProp", "ControlStatusProp", "ControlVariantProp", "AllowClearProp", "NotFoundContentProp", "PopupMatchWidthProp", "PendingProp"];
         readonly note: "Ant-style data-driven form of Select (options|loadOptions + showSearch). One Select for all single-selects.";
     };
+    readonly RecordPickerProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "DisabledProp", "SizeProp", "PlaceholderProp"];
+        readonly note: "One picker whose SHAPE follows the size of the set: Select at or under `threshold`, a searchable Dialog with consumer-declared filters over it (gh#932).";
+    };
+    readonly RecordPickerFilterProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "LabelProp"];
+        readonly note: "One filter on a RecordPicker dialog. `name` is the key that reaches loadOptions({ filters }), so the server reads its own vocabulary back.";
+    };
     readonly SearchSelectOptionProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";

package/dist/props/registry.js

@@ -463,6 +463,11 @@ const VOCABULARY_REGISTRY = {
     category: "interaction",
     description: "Whitespace handling normal | pre-wrap: `pre-wrap` keeps the newlines and indentation a person typed (a plain-text note, a pasted log) and still wraps at the container edge; `truncate` outranks it"
   },
+  TextBreakProp: {
+    file: "vocabulary/interaction.prop.ts",
+    category: "interaction",
+    description: "Where an over-long unbroken token may break normal | anywhere: `anywhere` (overflow-wrap: anywhere) lets a machine identifier (email, code, login id) split to fit a narrow table cell; independent of TextWhitespaceProp, and `truncate` outranks it"
+  },
   TypographyTypeProp: {
     file: "vocabulary/interaction.prop.ts",
     category: "interaction",
@@ -2138,6 +2143,18 @@ const COMPONENT_PROP_REGISTRY = {
     ],
     note: "Ant-style data-driven form of Select (options|loadOptions + showSearch). One Select for all single-selects."
   },
+  RecordPickerProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["ValueProp", "OnValueChangeProp", "DisabledProp", "SizeProp", "PlaceholderProp"],
+    note: "One picker whose SHAPE follows the size of the set: Select at or under `threshold`, a searchable Dialog with consumer-declared filters over it (gh#932)."
+  },
+  RecordPickerFilterProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["ValueProp", "LabelProp"],
+    note: "One filter on a RecordPicker dialog. `name` is the key that reaches loadOptions({ filters }), so the server reads its own vocabulary back."
+  },
   SearchSelectOptionProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",

package/dist/props/vocabulary/index.d.ts

@@ -2,6 +2,6 @@
 export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, ErrorBagProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, FlushProp, WidthProp, ControlWidthProp, AllowClearProp, MaxTagCountProp, MaxTagPlaceholderProp, NotFoundContentProp, PopupMatchWidthProp, } from "./shared.prop.js";
 export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TableDensityProp, DensityProp, GapNameProp, PadProp, PadRawProp, PadSides, GapProp, GapStepProp, } from "./layout.prop.js";
-export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TypographyTypeProp, TitleLevelProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, CalloutKindProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, RevealTriggerProp, InViewAmountProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
+export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TextBreakProp, TypographyTypeProp, TitleLevelProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, CalloutKindProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, RevealTriggerProp, InViewAmountProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbItemMenuProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
 export type { GetRowIdProp, GetRowLabelProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, TableRowToneProp, RowToneProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, TablePaginationPositionProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";