@godxjp/ui 20.2.0 → 21.0.0

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

@@ -1376,3 +1376,130 @@ export type BranchScopePickerProp = FieldA11yProps & {
     id?: IdProp;
     className?: ClassNameProp;
 };
+/**
+ * Which keystroke SENDS and which one breaks the line — Ant Design X `Sender.submitType`.
+ *
+ * `enter` (default) is the chat convention: `Enter` sends, `Shift+Enter` inserts a newline.
+ * `shiftEnter` is the inverse, for composers that hold long, deliberately multi-line drafts.
+ * Neither ever fires while an IME conversion is in flight.
+ * @see ChatComposer
+ */
+export type ChatComposerSubmitTypeProp = "enter" | "shiftEnter";
+/**
+ * @see ChatComposer — the message input of a conversation (Ant Design X `Sender`; the industry
+ * calls the control a *composer*, so that is what it is named).
+ *
+ * Built on the real `Textarea` (auto-growing between `--chat-composer-min-height` and
+ * `--chat-composer-max-height`, both derived from the `--control-height` tier) plus real
+ * `Button`s. The `<textarea>` is the semantic focus target: `ref`, `id`, `name` and the whole
+ * `FormField` label/helper/error contract land on it, so a ChatComposer inside a `FormField`
+ * behaves exactly like an `Input` does.
+ */
+export type ChatComposerProp = Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "defaultValue" | "prefix" | "onChange" | "onKeyDown"> & FieldA11yProps & {
+    /** Controlled draft text. Pair with `onValueChange` or the box freezes. */
+    value?: ValueProp<string>;
+    /** Uncontrolled initial draft text. */
+    defaultValue?: DefaultValueProp<string>;
+    /** Draft-text change handler — fires on every keystroke, including during an IME conversion. */
+    onValueChange?: OnValueChangeProp<string>;
+    /**
+     * Send the draft. Receives the text as typed; never fires for an empty or whitespace-only
+     * draft, and never while `loading`, `disabled` or `readOnly`.
+     */
+    onSubmit?: (value: string) => void;
+    /** Stop the in-flight response. Only reachable while `loading`. */
+    onCancel?: () => void;
+    /**
+     * A response is streaming. The trailing action becomes CANCEL — exactly one trailing action
+     * exists at a time, the same discipline as the picker trailing-action rule.
+     */
+    loading?: PendingProp;
+    /** Which keystroke sends and which breaks the line. Default `enter`. */
+    submitType?: ChatComposerSubmitTypeProp;
+    /** Empty-state text of the draft box; pass it through `t()` at the call site. */
+    placeholder?: PlaceholderProp;
+    /** Disable the whole composer (draft box and every action). */
+    disabled?: DisabledProp;
+    /** Show the draft without allowing an edit; still focusable and selectable. */
+    readOnly?: boolean;
+    /** Slot ABOVE the draft row — attachments, a reply-to banner, a model picker. */
+    header?: React.ReactNode;
+    /** Slot at the inline START of the draft row — an attach button, an avatar. */
+    prefix?: React.ReactNode;
+    /** Slot BELOW the draft row — a hint line, a token counter. */
+    footer?: React.ReactNode;
+    /** Extra trailing actions, rendered BEFORE the send/cancel action. */
+    actions?: React.ReactNode;
+    /** Control height tier on the shared `--control-height` ladder. Default `md`. */
+    size?: SizeProp;
+    /** Hard ceiling on the draft length, forwarded to the textarea. */
+    maxLength?: number;
+    /** Validation state the composer paints. `error` also reports `aria-invalid`. */
+    status?: ControlStatusProp;
+    /** Accessible name override for the send action (localized default otherwise). */
+    submitLabel?: string;
+    /** Accessible name override for the cancel action (localized default otherwise). */
+    cancelLabel?: string;
+    /** Keydown on the draft box — how `ChatSuggestion` drives its list from the composer. */
+    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+    name?: NameProp;
+    id?: IdProp;
+    className?: ClassNameProp;
+};
+/** @see ChatSuggestion — one row of the trigger-character list. One level of `children` is honoured. */
+export type ChatSuggestionItemProp = {
+    /** Stable value handed to `onValueChange`, and the search haystack when there is no `label`. */
+    value: string;
+    /** Human row label. Falls back to `value`. */
+    label?: string;
+    /** Secondary line under the label. */
+    description?: string;
+    /** Decorative leading node (an icon). */
+    icon?: React.ReactNode;
+    /** Keep the row visible but unselectable. */
+    disabled?: DisabledProp;
+    /** One level of sub-rows; picking the parent drills into them instead of emitting a value. */
+    children?: readonly ChatSuggestionItemProp[];
+};
+/** The render-prop bag `ChatSuggestion` hands to the composer it wraps. */
+export type ChatSuggestionRenderProp = {
+    /**
+     * Re-read the caret and decide whether the list belongs open — call it from the composer's
+     * `onValueChange`. `false` force-closes; no argument force-opens with an empty query.
+     */
+    onTrigger: (value?: string | false) => void;
+    /** Forward to the composer's `onKeyDown`: arrows move, Enter/Tab pick, Escape closes. */
+    onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement>;
+};
+/**
+ * @see ChatSuggestion — trigger-character autocomplete over a `ChatComposer` (Ant Design X
+ * `Suggestion`).
+ *
+ * The list itself is the existing `Command` (cmdk) inside a `Popover`, so the listbox ARIA comes
+ * from a primitive that already ships it. What this component owns is the part `Command` does not:
+ * spotting the trigger character at the caret in a textarea, tracking the query as the caret
+ * moves, and closing on `Escape` / blur / a word break — `Escape` returns focus to the textarea
+ * and leaves the typed text exactly as it was.
+ */
+export type ChatSuggestionProp = {
+    /** The rows to offer. One level of `children` is honoured. */
+    items: readonly ChatSuggestionItemProp[];
+    /** Fires with the picked row's `value`. The caller owns what that does to the draft text. */
+    onValueChange?: OnValueChangeProp<string>;
+    /** The character that opens the list when typed at a word boundary. Default `/`. */
+    triggerCharacter?: string;
+    /** Controlled open state. */
+    open?: OpenProp;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: DefaultOpenProp;
+    /** Open-state change handler. */
+    onOpenChange?: OnOpenChangeProp;
+    /** The composer to wrap — receives `{ onTrigger, onKeyDown }`. */
+    children: (props: ChatSuggestionRenderProp) => React.ReactNode;
+    /** Text shown when the query matches nothing (localized default otherwise). */
+    emptyMessage?: EmptyMessageProp;
+    /** Accessible name of the suggestion listbox — a plain string (localized default otherwise). */
+    listLabel?: string;
+    id?: IdProp;
+    className?: ClassNameProp;
+};

package/dist/props/registry.d.ts

@@ -2212,10 +2212,114 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "Block click handler carrying the event; its presence turns every block into a real button.";
         }];
     };
-    readonly TreeListProp: {
+    readonly ChatBubblePlacementProp: {
         readonly group: "data-display";
-        readonly file: "components/data-display/tree-list.tsx";
-        readonly vocabulary: readonly ["ClassNameProp"];
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "placement";
+            readonly local: true;
+            readonly reason: 'Side of the conversation a message sits on ("start" | "end"), spelled on the LOGICAL inline axis so a feed flips under dir="rtl" with no per-locale branch.';
+        }];
+    };
+    readonly ChatBubbleVariantProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "variant";
+            readonly local: true;
+            readonly reason: "Structural treatment of the message body (filled | borderless | outlined). Status colour stays on `tone`; Ant Design X's `shadow` is absent because this system has no drop shadows.";
+        }];
+    };
+    readonly ChatBubbleToneProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["ToneProp"];
+    };
+    readonly ChatBubbleTypingProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "typing";
+            readonly local: true;
+            readonly reason: "Stream-in animation: `true` or `{ step, interval }`. Dropped entirely under prefers-reduced-motion, which renders the full text at once (WCAG 2.3.3).";
+        }];
+    };
+    readonly ChatBubbleProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["ChildrenProp", "SizeProp", "ToneProp", "PendingProp", "ClassNameProp", "IdProp", {
+            readonly field: "placement";
+            readonly local: true;
+            readonly reason: "See ChatBubblePlacementProp, the conversation-side vocabulary.";
+        }, {
+            readonly field: "variant";
+            readonly local: true;
+            readonly reason: "See ChatBubbleVariantProp, the message-body treatment vocabulary.";
+        }, {
+            readonly field: "avatar";
+            readonly local: true;
+            readonly reason: "The author's mark — a real <Avatar> node. A slot, not a label: the accessible name comes from `header`, so a decorative avatar is aria-hidden at the call site.";
+        }, {
+            readonly field: "header";
+            readonly local: true;
+            readonly reason: "Line above the body naming the turn's author. Distinct from TitleProp: it is the bubble's ACCESSIBLE NAME, not a heading in the document outline.";
+        }, {
+            readonly field: "footer";
+            readonly local: true;
+            readonly reason: "Line below the body (timestamp, per-message actions). Not FooterProp, which is a page-level action bar.";
+        }, {
+            readonly field: "typing";
+            readonly local: true;
+            readonly reason: "See ChatBubbleTypingProp, the stream-in animation vocabulary.";
+        }];
+    };
+    readonly ChatMessageProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["IdProp", "ChildrenProp", {
+            readonly field: "role";
+            readonly local: true;
+            readonly reason: 'Key into ChatBubbleList\'s `roles` map ("user" | "assistant" | "system" | a product\'s own). A data field, not the ARIA `role` attribute.';
+        }, {
+            readonly field: "content";
+            readonly local: true;
+            readonly reason: "The message body. Spelled `content` rather than `children` because a data item in an array is not a JSX child.";
+        }];
+    };
+    readonly ChatBubbleListProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "ClassNameProp", "IdProp", {
+            readonly field: "items";
+            readonly local: true;
+            readonly reason: "Consumer-supplied messages in conversation order (see ChatMessageProp).";
+        }, {
+            readonly field: "roles";
+            readonly local: true;
+            readonly reason: "Per-role bubble defaults merged UNDER each message's own props, so a feed's shape is declared once instead of on every message.";
+        }, {
+            readonly field: "autoScroll";
+            readonly local: true;
+            readonly reason: 'Stick-to-bottom while the reader is already at the bottom. Not a generic boolean flag: revoking the pin the moment they scroll up is the behaviour, and it drives the "jump to latest" affordance.';
+        }];
+    };
+    readonly TreeNodeProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "icon";
+            readonly local: true;
+            readonly reason: "Per-node glyph drawn when Tree's showIcon is on.";
+        }, {
+            readonly field: "children";
+            readonly local: true;
+            readonly reason: "The node's own child nodes — the hierarchy itself, not a slot.";
+        }];
+    };
+    readonly TreeProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "DisabledProp", "SizeProp", "ClassNameProp", "IdProp"];
     };
     readonly CardProp: {
         readonly group: "data-display";
@@ -2562,6 +2666,39 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "Forwarded MasterDetail stacking threshold override.";
         }];
     };
+    readonly ChatComposerSubmitTypeProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly [];
+    };
+    readonly ChatComposerProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "PlaceholderProp", "DisabledProp", "PendingProp", "SizeProp", "ControlStatusProp", "NameProp", "IdProp", "ClassNameProp"];
+    };
+    readonly ChatSuggestionItemProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "LabelProp", "DisabledProp"];
+    };
+    readonly ChatSuggestionRenderProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "onTrigger";
+            readonly local: true;
+            readonly reason: "Render-prop callback the composer calls to re-read the caret; not a value change.";
+        }, {
+            readonly field: "onKeyDown";
+            readonly local: true;
+            readonly reason: "Render-prop keydown forwarder — the composer's own DOM handler, not a state axis.";
+        }];
+    };
+    readonly ChatSuggestionProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["OnValueChangeProp", "OpenProp", "DefaultOpenProp", "OnOpenChangeProp", "ChildrenProp", "EmptyMessageProp", "IdProp", "ClassNameProp"];
+    };
 };
 export type ComponentPropName = keyof typeof COMPONENT_PROP_REGISTRY;
 /** Forbidden duplicate concepts — use the canonical name on the left. */

package/dist/props/registry.js

@@ -2570,10 +2570,152 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
-  TreeListProp: {
+  ChatBubblePlacementProp: {
     group: "data-display",
-    file: "components/data-display/tree-list.tsx",
-    vocabulary: ["ClassNameProp"]
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      {
+        field: "placement",
+        local: true,
+        reason: 'Side of the conversation a message sits on ("start" | "end"), spelled on the LOGICAL inline axis so a feed flips under dir="rtl" with no per-locale branch.'
+      }
+    ]
+  },
+  ChatBubbleVariantProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      {
+        field: "variant",
+        local: true,
+        reason: "Structural treatment of the message body (filled | borderless | outlined). Status colour stays on `tone`; Ant Design X's `shadow` is absent because this system has no drop shadows."
+      }
+    ]
+  },
+  ChatBubbleToneProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: ["ToneProp"]
+  },
+  ChatBubbleTypingProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      {
+        field: "typing",
+        local: true,
+        reason: "Stream-in animation: `true` or `{ step, interval }`. Dropped entirely under prefers-reduced-motion, which renders the full text at once (WCAG 2.3.3)."
+      }
+    ]
+  },
+  ChatBubbleProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "ChildrenProp",
+      "SizeProp",
+      "ToneProp",
+      "PendingProp",
+      "ClassNameProp",
+      "IdProp",
+      {
+        field: "placement",
+        local: true,
+        reason: "See ChatBubblePlacementProp, the conversation-side vocabulary."
+      },
+      {
+        field: "variant",
+        local: true,
+        reason: "See ChatBubbleVariantProp, the message-body treatment vocabulary."
+      },
+      {
+        field: "avatar",
+        local: true,
+        reason: "The author's mark \u2014 a real <Avatar> node. A slot, not a label: the accessible name comes from `header`, so a decorative avatar is aria-hidden at the call site."
+      },
+      {
+        field: "header",
+        local: true,
+        reason: "Line above the body naming the turn's author. Distinct from TitleProp: it is the bubble's ACCESSIBLE NAME, not a heading in the document outline."
+      },
+      {
+        field: "footer",
+        local: true,
+        reason: "Line below the body (timestamp, per-message actions). Not FooterProp, which is a page-level action bar."
+      },
+      {
+        field: "typing",
+        local: true,
+        reason: "See ChatBubbleTypingProp, the stream-in animation vocabulary."
+      }
+    ]
+  },
+  ChatMessageProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "IdProp",
+      "ChildrenProp",
+      {
+        field: "role",
+        local: true,
+        reason: 'Key into ChatBubbleList\'s `roles` map ("user" | "assistant" | "system" | a product\'s own). A data field, not the ARIA `role` attribute.'
+      },
+      {
+        field: "content",
+        local: true,
+        reason: "The message body. Spelled `content` rather than `children` because a data item in an array is not a JSX child."
+      }
+    ]
+  },
+  ChatBubbleListProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "ClassNameProp",
+      "IdProp",
+      {
+        field: "items",
+        local: true,
+        reason: "Consumer-supplied messages in conversation order (see ChatMessageProp)."
+      },
+      {
+        field: "roles",
+        local: true,
+        reason: "Per-role bubble defaults merged UNDER each message's own props, so a feed's shape is declared once instead of on every message."
+      },
+      {
+        field: "autoScroll",
+        local: true,
+        reason: 'Stick-to-bottom while the reader is already at the bottom. Not a generic boolean flag: revoking the pin the moment they scroll up is the behaviour, and it drives the "jump to latest" affordance.'
+      }
+    ]
+  },
+  TreeNodeProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      { field: "icon", local: true, reason: "Per-node glyph drawn when Tree's showIcon is on." },
+      {
+        field: "children",
+        local: true,
+        reason: "The node's own child nodes \u2014 the hierarchy itself, not a slot."
+      }
+    ]
+  },
+  TreeProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "DisabledProp",
+      "SizeProp",
+      "ClassNameProp",
+      "IdProp"
+    ]
   },
   CardProp: {
     group: "data-display",
@@ -3010,6 +3152,63 @@ const COMPONENT_PROP_REGISTRY = {
         reason: "Forwarded MasterDetail stacking threshold override."
       }
     ]
+  },
+  ChatComposerSubmitTypeProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: []
+  },
+  ChatComposerProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "PlaceholderProp",
+      "DisabledProp",
+      "PendingProp",
+      "SizeProp",
+      "ControlStatusProp",
+      "NameProp",
+      "IdProp",
+      "ClassNameProp"
+    ]
+  },
+  ChatSuggestionItemProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["ValueProp", "LabelProp", "DisabledProp"]
+  },
+  ChatSuggestionRenderProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      {
+        field: "onTrigger",
+        local: true,
+        reason: "Render-prop callback the composer calls to re-read the caret; not a value change."
+      },
+      {
+        field: "onKeyDown",
+        local: true,
+        reason: "Render-prop keydown forwarder \u2014 the composer's own DOM handler, not a state axis."
+      }
+    ]
+  },
+  ChatSuggestionProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      "OnValueChangeProp",
+      "OpenProp",
+      "DefaultOpenProp",
+      "OnOpenChangeProp",
+      "ChildrenProp",
+      "EmptyMessageProp",
+      "IdProp",
+      "ClassNameProp"
+    ]
   }
 };
 const PROP_ALIASES_FORBIDDEN = {

package/dist/styles/control.css

@@ -1840,6 +1840,13 @@
   }
 }
 
+@layer components {
+
+  .ui-chat-suggestion-panel {
+    --popover-surface-inline-size: var(--radix-popover-trigger-width);
+  }
+}
+
 @layer components {
 
   .ui-tree-select-popover {