@kitn.ai/ui 0.21.0 → 0.22.0

package/dist/react/index.d.ts

@@ -183,7 +183,7 @@ export interface ButtonProps extends WebComponentProps {
     icon?: string;
     /** Trailing icon, after the label (e.g. `"chevron-down"` for a menu affordance). */
     iconTrailing?: string;
-    /** Accessible name. REQUIRED for icon-only buttons (no visible text); ignored when you slot visible text, which already names the button. */
+    /** Accessible name. REQUIRED for icon-only buttons (no visible text); ignored when you slot visible text, which already names the button. An `aria-label` on top of visible text REPLACES that name rather than adding to it, so a button reading "Save" that answers to "Submit" is unusable by speech input (WCAG 2.5.3, Label in Name). The visible text wins. An `icon` / `icon-sm` size hides the slot, which makes the button icon-only whatever you slotted, so `label` is what names it there. */
     label?: string;
     /** Disable the button (non-interactive, dimmed). */
     disabled?: boolean;
@@ -403,6 +403,8 @@ export interface ChatProps extends WebComponentProps {
     kindIcons?: Record<string, string>;
     /** Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`). */
     actionsReveal?: "always" | "hover";
+    /** Which attachment media types the user may stage, in HTML `accept` syntax: `<kai-chat accept="image/*,application/pdf">`. A plain string, so unlike `messages` it DOES work as an attribute. Omitted means no filter. MEDIA TYPES ONLY -- exact (`image/png`) or subtype wildcard (`text/*`). HTML allows a file extension here and this does not: `accept=".py"` THROWS with the entry named, rather than silently resolving to a picker that accepts nothing. It can only NARROW what the kit can already encode: `accept="image/*"` resolves to the four image formats both APIs take, not to every image type the OS offers. Pass the SAME string to `toOpenAIMessages(msgs, { accept })` and the picker and the wire cannot disagree -- both resolve it through `resolveMediaPolicy` against one declaration. That declaration is readable as `encodableMediaTypes()` from `@kitn.ai/ui/wire`, if you would rather build your own picker than use this prop. */
+    accept?: string;
     /** The full message thread to render, newest last. Each entry carries its role, ordered `parts`, and optional actions/avatar/feedback. Set as a JS property (`el.messages = [...]`); a NEW array reference per streaming chunk re-renders (mutating in place does not). Omit for an empty thread. Re-declared here (rather than inherited from `ChatThreadProps`) because the ELEMENT registers a `[]` default and renders the empty state without it, while the SolidJS `<ChatThread>` component still requires it. The facade hands it a validated array either way. Matches `<kai-thread>`. */
     messages?: {
         id: string;
@@ -530,6 +532,14 @@ export interface ChatProps extends WebComponentProps {
             title?: undefined | string;
         }[];
     }>) => void;
+    /** One or more picked files were refused because `accept` excluded them. The element renders NO message of its own: it reports the facts (name, media type, whether the kit could have sent it) and what the user should see is the application's call. Only ever fires when `accept` is set. */
+    onAttachmentsRejected?: (event: CustomEvent<{
+        rejected: {
+            filename: string;
+            mediaType: string;
+            reason: "filtered" | "unsupported";
+        }[];
+    }>) => void;
     /** An action button on a message was clicked. `action` is the built-in name or custom id. `state` is present only for the toggleable feedback votes: `'on'` when a like/dislike is set, `'off'` when re-tapped to clear. */
     onMessageAction?: (event: CustomEvent<{
         messageId: string;
@@ -1279,11 +1289,11 @@ export interface MenuProps extends WebComponentProps {
     placement?: string;
     /** Built-in trigger: leading icon (a named icon like `"plus"`, an image URL/data-URI, or text). Use this instead of slotting `slot="trigger"` for the common case; a slotted trigger overrides it. */
     triggerIcon?: string;
-    /** Built-in trigger: a text label (e.g. `"High"`). */
+    /** Built-in trigger: a text label (e.g. `"High"`). This is the trigger's VISIBLE text, so it is also its accessible name, and `label` does not override it: an accessible name that does not contain the visible text is unreachable by speech input, which is what WCAG 2.5.3 (Label in Name) exists for. A slotted `slot="trigger"` replaces this built-in trigger entirely and is named differently; see `label`. */
     triggerLabel?: string;
     /** Built-in trigger: a trailing icon (e.g. `"chevron-down"` for a select look). */
     triggerIconTrailing?: string;
-    /** Accessible name for an icon-only trigger (no visible label). */
+    /** Accessible name for a trigger with no visible label. Ignored when `triggerLabel` is set, which is already the visible name. It DOES name a slotted `slot="trigger"`, and that is a difference in what the two slots MEAN, not a limitation. `<kai-button>`'s slot IS the button's label, so text slotted there is the name and `label` steps aside. This slot is VISUAL content, a `+` or an `<svg>`, with the name supplied separately: decoration beside a name, never a second name competing with one. So `label` names the trigger here by design. Slotting a real WORD rather than a glyph makes that word a visible label, and an accessible name has to contain the visible text. Then either drop `label` or make it contain the word you slotted. */
     label?: string;
     /** Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute, the menu still self-manages on click/keyboard). Set `el.open = true`, or `<kai-menu open>`; listen for `kai-open-change`. */
     open?: boolean;

package/dist/react.js

@@ -110,13 +110,13 @@ const N = [
 function H(e, t) {
   return N.every((n) => B[n](e, t));
 }
-function U(e, t) {
+function j(e, t) {
   const n = e.findIndex((s) => s.type === "card" && s.envelope.id === t.id);
   if (n < 0) return [...e, { type: "card", envelope: t }];
   const i = e[n];
   return v(i.envelope) === v(t) ? e : [...e.slice(0, n), { ...i, envelope: t }, ...e.slice(n + 1)];
 }
-function W(e, t, n) {
+function U(e, t, n) {
   const i = e.findIndex((o) => o.type === "tool" && o.tool.toolCallId === t);
   if (i < 0) {
     const o = {
@@ -128,9 +128,9 @@ function W(e, t, n) {
     return o.kind = o.kind ?? z(o.type), [...e, { type: "tool", tool: o }];
   }
   const s = e[i].tool, c = { ...s, ...n, toolCallId: t };
-  return c.kind = j(s, n, c.type), c.raw === void 0 && s.raw !== void 0 && (c.raw = s.raw), G(s, c) ? e : [...e.slice(0, i), { type: "tool", tool: c }, ...e.slice(i + 1)];
+  return c.kind = W(s, n, c.type), c.raw === void 0 && s.raw !== void 0 && (c.raw = s.raw), G(s, c) ? e : [...e.slice(0, i), { type: "tool", tool: c }, ...e.slice(i + 1)];
 }
-function j(e, t, n) {
+function W(e, t, n) {
   return t.kind !== void 0 ? t.kind : e.kind === void 0 || e.kind === z(e.type) ? z(n) : e.kind;
 }
 const K = [
@@ -197,11 +197,11 @@ function $(e, t = {}) {
       return s((r) => L(r, o, l)), c;
     },
     upsertTool(o, l) {
-      return s((r) => W(r, o, l)), c;
+      return s((r) => U(r, o, l)), c;
     },
     // Upsert, not append: keyed on envelope.id so a revised card replaces itself.
     addCard(o) {
-      return s((l) => U(l, o)), c;
+      return s((l) => j(l, o)), c;
     },
     addSource(o) {
       return s((l) => [...l, { type: "source", source: o }]), c;
@@ -348,8 +348,8 @@ const oe = /* @__PURE__ */ a(
   () => import("@kitn.ai/ui/elements/chain-of-thought")
 ), ge = /* @__PURE__ */ a(
   "kai-chat",
-  ["theme", "search", "value", "placeholder", "loading", "suggestions", "suggestionMode", "persistSuggestions", "proseSize", "codeTheme", "codeHighlight", "chatTitle", "models", "currentModel", "context", "scrollButton", "headerStart", "headerEnd", "headerFull", "sidebar", "empty", "composer", "composerActions", "footer", "voice", "triggers", "kindIcons", "actionsReveal", "messages", "cardTypes", "cardSchemas"],
-  { onAttachmentsChange: "kai-attachments-change", onMessageAction: "kai-message-action", onModelChange: "kai-model-change", onSearch: "kai-search", onSubmit: "kai-submit", onSuggestionClick: "kai-suggestion-click", onValueChange: "kai-value-change", onVoice: "kai-voice" },
+  ["theme", "search", "value", "placeholder", "loading", "suggestions", "suggestionMode", "persistSuggestions", "proseSize", "codeTheme", "codeHighlight", "chatTitle", "models", "currentModel", "context", "scrollButton", "headerStart", "headerEnd", "headerFull", "sidebar", "empty", "composer", "composerActions", "footer", "voice", "triggers", "kindIcons", "actionsReveal", "accept", "messages", "cardTypes", "cardSchemas"],
+  { onAttachmentsChange: "kai-attachments-change", onAttachmentsRejected: "kai-attachments-rejected", onMessageAction: "kai-message-action", onModelChange: "kai-model-change", onSearch: "kai-search", onSubmit: "kai-submit", onSuggestionClick: "kai-suggestion-click", onValueChange: "kai-value-change", onVoice: "kai-voice" },
   () => import("@kitn.ai/ui/elements/chat")
 ), ke = /* @__PURE__ */ a(
   "kai-checkpoint",
@@ -476,17 +476,17 @@ const oe = /* @__PURE__ */ a(
   ["theme", "variant", "size", "text"],
   {},
   () => import("@kitn.ai/ui/elements/loader")
-), Ue = /* @__PURE__ */ a(
+), je = /* @__PURE__ */ a(
   "kai-markdown",
   ["theme", "content", "proseSize", "codeTheme", "codeHighlight"],
   {},
   () => import("@kitn.ai/ui/elements/markdown")
-), We = /* @__PURE__ */ a(
+), Ue = /* @__PURE__ */ a(
   "kai-menu",
   ["theme", "items", "placement", "triggerIcon", "triggerLabel", "triggerIconTrailing", "label", "open", "defaultOpen", "disabled"],
   { onOpenChange: "kai-open-change", onSelect: "kai-select" },
   () => import("@kitn.ai/ui/elements/menu")
-), je = /* @__PURE__ */ a(
+), We = /* @__PURE__ */ a(
   "kai-message",
   ["theme", "message", "role", "markdown", "proseSize", "codeTheme", "codeHighlight", "actionsReveal", "avatarSrc", "avatarFallback", "avatar", "cardTypes", "cardSchemas"],
   { onMessageAction: "kai-message-action" },
@@ -734,9 +734,9 @@ export {
   Ne as Kbd,
   Be as LinkPreview,
   He as Loader,
-  Ue as Markdown,
-  We as Menu,
-  je as Message,
+  je as Markdown,
+  Ue as Menu,
+  We as Message,
   Ke as ModelSwitcher,
   qe as Nav,
   Ge as Notice,