@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/decision-answers/DecisionAnswers.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangle, Ban } from "lucide-react";
 import { Cost } from "../../host/ui-slots.js";
 import { cn } from "@ai-matrx/design-system";
@@ -20,32 +21,34 @@ function ProbabilityBar({
   className
 }) {
   const under = threshold != null && value < threshold;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "relative h-1.5 w-full min-w-[3rem] rounded-full bg-border/60 overflow-hidden",
         className
-      )
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          "h-full rounded-full",
-          !peak ? "bg-muted-foreground/40" : under ? "bg-amber-500" : "bg-emerald-500"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "h-full rounded-full",
+              !peak ? "bg-muted-foreground/40" : under ? "bg-amber-500" : "bg-emerald-500"
+            ),
+            style: { width: `${Math.max(2, Math.min(100, value * 100))}%` }
+          }
         ),
-        style: { width: `${Math.max(2, Math.min(100, value * 100))}%` }
-      }
-    ),
-    threshold != null && /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: "absolute top-0 h-full w-px bg-foreground/50",
-        style: { left: `${Math.min(100, threshold * 100)}%` },
-        title: `Suggested threshold ${percent(threshold)}`
-      }
-    )
+        threshold != null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute top-0 h-full w-px bg-foreground/50",
+            style: { left: `${Math.min(100, threshold * 100)}%` },
+            title: `Suggested threshold ${percent(threshold)}`
+          }
+        )
+      ]
+    }
   );
 }
 const MINOR_SHARE = 0.05;
@@ -59,46 +62,56 @@ function Distribution({
     (e) => e.value >= MINOR_SHARE || e.key === answer.answerKey
   ) : ordered;
   const folded = ordered.length - shown.length;
-  return /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 flex flex-col gap-1" }, shown.map((entry) => {
-    const peak = entry.key === answer.answerKey;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: entry.key,
-        className: "grid grid-cols-[minmax(4.5rem,10rem)_minmax(3rem,14rem)_2.5rem] items-center gap-2 text-[11px]",
-        "data-peak": peak ? "true" : void 0
-      },
-      /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: cn(
-            "truncate",
-            peak ? "font-medium text-foreground" : "text-muted-foreground"
-          ),
-          title: entry.label
-        },
-        entry.label
-      ),
-      /* @__PURE__ */ React.createElement(
-        ProbabilityBar,
-        {
-          value: entry.value,
-          peak,
-          threshold: answer.type === "noul" && entry.key === "true" ? threshold : null
-        }
-      ),
-      /* @__PURE__ */ React.createElement(
-        "span",
+  return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-col gap-1", children: [
+    shown.map((entry) => {
+      const peak = entry.key === answer.answerKey;
+      return /* @__PURE__ */ jsxs(
+        "div",
         {
-          className: cn(
-            "text-right tabular-nums",
-            peak ? "text-foreground" : "text-muted-foreground"
-          )
+          className: "grid grid-cols-[minmax(4.5rem,10rem)_minmax(3rem,14rem)_2.5rem] items-center gap-2 text-[11px]",
+          "data-peak": peak ? "true" : void 0,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "truncate",
+                  peak ? "font-medium text-foreground" : "text-muted-foreground"
+                ),
+                title: entry.label,
+                children: entry.label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ProbabilityBar,
+              {
+                value: entry.value,
+                peak,
+                threshold: answer.type === "noul" && entry.key === "true" ? threshold : null
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-right tabular-nums",
+                  peak ? "text-foreground" : "text-muted-foreground"
+                ),
+                children: percent(entry.value)
+              }
+            )
+          ]
         },
-        percent(entry.value)
-      )
-    );
-  }), folded > 0 && /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-muted-foreground" }, "+", folded, " more under ", percent(MINOR_SHARE)));
+        entry.key
+      );
+    }),
+    folded > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+      "+",
+      folded,
+      " more under ",
+      percent(MINOR_SHARE)
+    ] })
+  ] });
 }
 function DecisionAnswers({
   view,
@@ -108,60 +121,104 @@ function DecisionAnswers({
   className
 }) {
   const method = view.method;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "w-full rounded-lg border border-border bg-card text-xs",
         className
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 flex-wrap border-b border-border px-3 py-1.5 text-[11px] text-muted-foreground" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium text-foreground" }, view.answers.length === 1 ? "1 answer" : `${view.answers.length} answers`), view.model && /* @__PURE__ */ React.createElement("span", { className: "truncate" }, view.model), method ? /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: cn(
-          "cursor-help",
-          method !== "native" && "rounded bg-amber-500/10 px-1.5 py-0.5 text-amber-700 dark:text-amber-400"
-        ),
-        title: METHOD_EXPLANATIONS[method]
-      },
-      METHOD_LABELS[method],
-      " probabilities"
-    ) : /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: "inline-flex items-center gap-1 rounded bg-destructive/10 px-1.5 py-0.5 text-destructive-ink",
-        title: "Without a method, there is no way to tell a measured probability from one the model wrote out."
-      },
-      /* @__PURE__ */ React.createElement(AlertTriangle, { className: "w-3 h-3" }),
-      "method not stated"
-    ), view.costUsd != null && /* @__PURE__ */ React.createElement(Cost, { usd: view.costUsd, className: "ml-auto" })),
-    /* @__PURE__ */ React.createElement("div", { className: "divide-y divide-border/60" }, view.answers.map((answer) => {
-      const instruction = showInstructions ? instructions?.[answer.name] ?? answer.instruction : null;
-      const threshold = thresholds?.[answer.name] ?? answer.suggestedThreshold;
-      const probability = answerProbability(answer);
-      const unreadable = answer.answer === null;
-      return /* @__PURE__ */ React.createElement("div", { key: answer.name, className: "px-3 py-2" }, instruction && /* @__PURE__ */ React.createElement("p", { className: "text-[11px] leading-snug text-muted-foreground" }, instruction), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 flex items-baseline gap-2 flex-wrap" }, /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: cn(
-            "text-sm font-semibold",
-            unreadable && "text-destructive"
-          )
-        },
-        formatAnswerHeadline(answer)
-      ), probability != null && /* @__PURE__ */ React.createElement("span", { className: "text-xs tabular-nums text-muted-foreground" }, percent(probability)), /* @__PURE__ */ React.createElement("span", { className: "ml-auto font-mono text-[10px] text-muted-foreground/80" }, answer.name)), /* @__PURE__ */ React.createElement(Distribution, { answer, threshold }), (threshold != null || answer.confidence != null || answer.type === "score" && typeof answer.answer === "number") && /* @__PURE__ */ React.createElement("p", { className: "mt-1 flex flex-wrap gap-x-3 text-[10px] tabular-nums text-muted-foreground" }, answer.type === "score" && typeof answer.answer === "number" && /* @__PURE__ */ React.createElement("span", { title: "The probability-weighted average level." }, "Average level ", answer.answer.toFixed(1)), answer.confidence != null && /* @__PURE__ */ React.createElement("span", { title: "How sure the holder is of this answer." }, "Confidence ", percent(answer.confidence)), threshold != null && /* @__PURE__ */ React.createElement("span", { title: "The author's suggested cut \u2014 the consumer decides." }, "Suggested cut ", percent(threshold))));
-    })),
-    view.refusals.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "border-t border-border px-2 py-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 text-[10px] uppercase tracking-wide text-muted-foreground" }, /* @__PURE__ */ React.createElement(Ban, { className: "w-3 h-3" }), "Refused"), /* @__PURE__ */ React.createElement("div", { className: "mt-1 flex flex-col gap-0.5" }, view.refusals.map((refusal) => /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: refusal.name,
-        className: "flex items-baseline gap-2 text-[11px]"
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] text-muted-foreground" }, refusal.name),
-      /* @__PURE__ */ React.createElement("span", null, refusal.reason)
-    )), /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, null))),
-    view.answers.length === 0 && view.refusals.length === 0 && /* @__PURE__ */ React.createElement("p", { className: "px-2 py-1.5 text-[11px] text-muted-foreground" }, "The holder returned no answers and named no refusals.")
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap border-b border-border px-3 py-1.5 text-[11px] text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: view.answers.length === 1 ? "1 answer" : `${view.answers.length} answers` }),
+          view.model && /* @__PURE__ */ jsx("span", { className: "truncate", children: view.model }),
+          method ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "cursor-help",
+                method !== "native" && "rounded bg-amber-500/10 px-1.5 py-0.5 text-amber-700 dark:text-amber-400"
+              ),
+              title: METHOD_EXPLANATIONS[method],
+              children: [
+                METHOD_LABELS[method],
+                " probabilities"
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 rounded bg-destructive/10 px-1.5 py-0.5 text-destructive-ink",
+              title: "Without a method, there is no way to tell a measured probability from one the model wrote out.",
+              children: [
+                /* @__PURE__ */ jsx(AlertTriangle, { className: "w-3 h-3" }),
+                "method not stated"
+              ]
+            }
+          ),
+          view.costUsd != null && /* @__PURE__ */ jsx(Cost, { usd: view.costUsd, className: "ml-auto" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/60", children: view.answers.map((answer) => {
+          const instruction = showInstructions ? instructions?.[answer.name] ?? answer.instruction : null;
+          const threshold = thresholds?.[answer.name] ?? answer.suggestedThreshold;
+          const probability = answerProbability(answer);
+          const unreadable = answer.answer === null;
+          return /* @__PURE__ */ jsxs("div", { className: "px-3 py-2", children: [
+            instruction && /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: instruction }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-baseline gap-2 flex-wrap", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-sm font-semibold",
+                    unreadable && "text-destructive"
+                  ),
+                  children: formatAnswerHeadline(answer)
+                }
+              ),
+              probability != null && /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: percent(probability) }),
+              /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] text-muted-foreground/80", children: answer.name })
+            ] }),
+            /* @__PURE__ */ jsx(Distribution, { answer, threshold }),
+            (threshold != null || answer.confidence != null || answer.type === "score" && typeof answer.answer === "number") && /* @__PURE__ */ jsxs("p", { className: "mt-1 flex flex-wrap gap-x-3 text-[10px] tabular-nums text-muted-foreground", children: [
+              answer.type === "score" && typeof answer.answer === "number" && /* @__PURE__ */ jsxs("span", { title: "The probability-weighted average level.", children: [
+                "Average level ",
+                answer.answer.toFixed(1)
+              ] }),
+              answer.confidence != null && /* @__PURE__ */ jsxs("span", { title: "How sure the holder is of this answer.", children: [
+                "Confidence ",
+                percent(answer.confidence)
+              ] }),
+              threshold != null && /* @__PURE__ */ jsxs("span", { title: "The author's suggested cut \u2014 the consumer decides.", children: [
+                "Suggested cut ",
+                percent(threshold)
+              ] })
+            ] })
+          ] }, answer.name);
+        }) }),
+        view.refusals.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-2 py-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Ban, { className: "w-3 h-3" }),
+            "Refused"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col gap-0.5", children: [
+            view.refusals.map((refusal) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-baseline gap-2 text-[11px]",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: refusal.name }),
+                  /* @__PURE__ */ jsx("span", { children: refusal.reason })
+                ]
+              },
+              refusal.name
+            )),
+            /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+          ] })
+        ] }),
+        view.answers.length === 0 && view.refusals.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-2 py-1.5 text-[11px] text-muted-foreground", children: "The holder returned no answers and named no refusals." })
+      ]
+    }
   );
 }
 export {

package/dist/agents/image-roles/ImageRoleSelector.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { cn } from "@ai-matrx/design-system";
 import {
@@ -26,58 +27,67 @@ function ImageRoleSelector({
   useEffect(() => setDraft(name ?? ""), [name]);
   const draftValid = draft.trim() === "" || normalizeReferenceName(draft) !== null;
   const nameVerdict = showName && name && limits ? namedReferenceVerdict(limits, modelLabel) : null;
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col gap-1", className) }, /* @__PURE__ */ React.createElement(SegmentedControl, { "aria-label": "Reference image role", value, onValueChange: (role) => onChange(value === role ? null : role), data: roles.map((role) => {
-    const meta = IMAGE_ROLE_META[role];
-    const verdict = limits ? imageRoleVerdict(role, limits, modelLabel) : null;
-    const refused = verdict?.verdict === "refused";
-    return { value: role, label: refused ? /* @__PURE__ */ React.createElement("span", { "data-refused": "true", className: "line-through decoration-muted-foreground/60 opacity-40" }, meta.label) : meta.label, title: refused && verdict ? verdict.reason : meta.explanation };
-  }) }), /* @__PURE__ */ React.createElement(
-    "p",
-    {
-      className: cn(
-        "text-[11px] leading-snug",
-        chosenVerdict?.verdict === "refused" ? "text-destructive" : "text-muted-foreground"
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsx(SegmentedControl, { "aria-label": "Reference image role", value, onValueChange: (role) => onChange(value === role ? null : role), data: roles.map((role) => {
+      const meta = IMAGE_ROLE_META[role];
+      const verdict = limits ? imageRoleVerdict(role, limits, modelLabel) : null;
+      const refused = verdict?.verdict === "refused";
+      return { value: role, label: refused ? /* @__PURE__ */ jsx("span", { "data-refused": "true", className: "line-through decoration-muted-foreground/60 opacity-40", children: meta.label }) : meta.label, title: refused && verdict ? verdict.reason : meta.explanation };
+    }) }),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "text-[11px] leading-snug",
+          chosenVerdict?.verdict === "refused" ? "text-destructive" : "text-muted-foreground"
+        ),
+        "data-testid": "image-role-explanation",
+        children: value ? chosenVerdict?.verdict === "refused" ? chosenVerdict.reason : IMAGE_ROLE_META[value].explanation : "No role: the model simply sees this. Pick what it should control."
+      }
+    ),
+    showName && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "text-[11px] text-muted-foreground",
+          htmlFor: "reference-name",
+          children: "Name"
+        }
       ),
-      "data-testid": "image-role-explanation"
-    },
-    value ? chosenVerdict?.verdict === "refused" ? chosenVerdict.reason : IMAGE_ROLE_META[value].explanation : "No role: the model simply sees this. Pick what it should control."
-  ), showName && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement(
-    "label",
-    {
-      className: "text-[11px] text-muted-foreground",
-      htmlFor: "reference-name"
-    },
-    "Name"
-  ), /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-muted-foreground" }, "@"), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      id: "reference-name",
-      "data-testid": "reference-name",
-      value: draft,
-      placeholder: "hero",
-      onChange: (e) => setDraft(e.target.value),
-      onBlur: () => {
-        if (!onNameChange) return;
-        const next = normalizeReferenceName(draft);
-        if (draft.trim() === "") onNameChange(null);
-        else if (next) onNameChange(next);
-      },
-      className: cn(
-        "h-6 w-32 rounded border bg-background px-1.5 text-base md:text-[11px]",
-        draftValid ? "border-border" : "border-destructive"
-      )
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "text-[11px]",
-        !draftValid || nameVerdict?.verdict === "refused" ? "text-destructive" : "text-muted-foreground"
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: "@" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "reference-name",
+          "data-testid": "reference-name",
+          value: draft,
+          placeholder: "hero",
+          onChange: (e) => setDraft(e.target.value),
+          onBlur: () => {
+            if (!onNameChange) return;
+            const next = normalizeReferenceName(draft);
+            if (draft.trim() === "") onNameChange(null);
+            else if (next) onNameChange(next);
+          },
+          className: cn(
+            "h-6 w-32 rounded border bg-background px-1.5 text-base md:text-[11px]",
+            draftValid ? "border-border" : "border-destructive"
+          )
+        }
       ),
-      "data-testid": "reference-name-hint"
-    },
-    !draftValid ? "A letter, then letters, digits, _ or -." : nameVerdict?.verdict === "refused" ? nameVerdict.reason : "The prompt can address it as @" + (name || "name") + "."
-  )));
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-[11px]",
+            !draftValid || nameVerdict?.verdict === "refused" ? "text-destructive" : "text-muted-foreground"
+          ),
+          "data-testid": "reference-name-hint",
+          children: !draftValid ? "A letter, then letters, digits, _ or -." : nameVerdict?.verdict === "refused" ? nameVerdict.reason : "The prompt can address it as @" + (name || "name") + "."
+        }
+      )
+    ] })
+  ] });
 }
 export {
   ImageRoleSelector

package/dist/agents/image-roles/ReferenceRoleCaption.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { referenceRoleCaption } from "@ai-matrx/agents";
 function ReferenceRoleCaption({
   role,
@@ -6,13 +7,13 @@ function ReferenceRoleCaption({
 }) {
   const caption = referenceRoleCaption(role, name);
   if (!caption) return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: "mt-2 -mb-1 text-xs font-medium text-muted-foreground",
-      "data-reference-role": typeof role === "string" ? role : void 0
-    },
-    caption
+      "data-reference-role": typeof role === "string" ? role : void 0,
+      children: caption
+    }
   );
 }
 export {

package/dist/agents/message-flags/ExampleTurnsGroup.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { Button } from "@ai-matrx/design-system/controls";
@@ -8,7 +9,13 @@ function ExampleTurnsGroup({
 }) {
   const [open, setOpen] = useState(false);
   const pairs = Math.floor(count / 2);
-  return /* @__PURE__ */ React.createElement("div", { className: "my-1", "data-testid": "runner-example-run" }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ChevronRight, null), onClick: () => setOpen((v) => !v), "aria-expanded": open }, "Examples \xB7 ", pairs > 0 ? `${pairs} ${pairs === 1 ? "pair" : "pairs"}` : `${count} turns`), open && /* @__PURE__ */ React.createElement("div", { className: "mt-1 border-l-2 border-border pl-2 opacity-80" }, children));
+  return /* @__PURE__ */ jsxs("div", { className: "my-1", "data-testid": "runner-example-run", children: [
+    /* @__PURE__ */ jsxs(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ChevronRight, {}), onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
+      "Examples \xB7 ",
+      pairs > 0 ? `${pairs} ${pairs === 1 ? "pair" : "pairs"}` : `${count} turns`
+    ] }),
+    open && /* @__PURE__ */ jsx("div", { className: "mt-1 border-l-2 border-border pl-2 opacity-80", children })
+  ] });
 }
 export {
   ExampleTurnsGroup

package/dist/agents/message-flags/MessageFlagToggles.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { BookMarked, DatabaseZap, TextCursorInput } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@ai-matrx/design-system";
@@ -23,71 +24,86 @@ const FLAG_META = {
 };
 const ORDER = ["example", "cache_boundary", "prefill"];
 function MessageFlagToggles({ flags, states, onToggle, className }) {
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex items-center gap-0.5", className), "data-testid": "message-flag-toggles" }, ORDER.map((flag) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-0.5", className), "data-testid": "message-flag-toggles", children: ORDER.map((flag) => {
     const state = states[flag];
     if (!state || state.hidden) return null;
     const on = flags[flag] === true;
     const { label, what, icon: Icon } = FLAG_META[flag];
     const impaired = state.verdict.verdict === "refused" || state.verdict.verdict === "noop";
     const broken = on && (state.verdict.verdict === "refused" || !!state.placementProblem);
-    return /* @__PURE__ */ React.createElement(Tooltip, { key: flag }, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, on ? (
-      // An ON flag names itself — a lone coloured icon said nothing
-      // about what this message now does.
-      /* @__PURE__ */ React.createElement(
-        Chip,
-        {
-          asChild: true,
-          pressed: true,
-          tone: broken ? "warning" : "primary",
-          label,
-          icon: /* @__PURE__ */ React.createElement(Icon, null),
-          title: ""
-        },
-        /* @__PURE__ */ React.createElement(
-          "button",
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: on ? (
+        // An ON flag names itself — a lone coloured icon said nothing
+        // about what this message now does.
+        /* @__PURE__ */ jsx(
+          Chip,
           {
-            type: "button",
-            "aria-label": label,
-            "data-testid": `message-flag-${flag}`,
-            "data-verdict": state.verdict.verdict,
-            onMouseDown: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            },
-            onClick: (e) => {
-              e.stopPropagation();
-              onToggle(flag);
-            }
+            asChild: true,
+            pressed: true,
+            tone: broken ? "warning" : "primary",
+            label,
+            icon: /* @__PURE__ */ jsx(Icon, {}),
+            title: "",
+            children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": label,
+                "data-testid": `message-flag-${flag}`,
+                "data-verdict": state.verdict.verdict,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggle(flag);
+                }
+              }
+            )
           }
         )
-      )
-    ) : /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        "aria-pressed": false,
-        "aria-label": label,
-        "data-testid": `message-flag-${flag}`,
-        "data-verdict": state.verdict.verdict,
-        onMouseDown: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        },
-        onClick: (e) => {
-          e.stopPropagation();
-          onToggle(flag);
-        },
-        className: cn(
-          "inline-flex h-5 w-5 items-center justify-center rounded transition-opacity hover:bg-accent",
-          // Hover reveals the off toggles; a touch screen has no
-          // hover, so there they always show.
-          "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100",
-          impaired ? "text-muted-foreground/40" : "text-muted-foreground"
-        )
-      },
-      /* @__PURE__ */ React.createElement(Icon, { className: "h-3 w-3 shrink-0" })
-    )), /* @__PURE__ */ React.createElement(TooltipContent, { side: "top", className: "z-[9999] max-w-xs text-xs" }, /* @__PURE__ */ React.createElement("p", { className: "font-medium" }, label, on ? " \u2014 on" : ""), /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground" }, what), /* @__PURE__ */ React.createElement("p", { className: "mt-1" }, state.verdict.reason), state.placementProblem && /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-amber-600 dark:text-amber-400" }, state.placementProblem, " ", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: state.placementProblem }))));
-  }));
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": false,
+          "aria-label": label,
+          "data-testid": `message-flag-${flag}`,
+          "data-verdict": state.verdict.verdict,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            onToggle(flag);
+          },
+          className: cn(
+            "inline-flex h-5 w-5 items-center justify-center rounded transition-opacity hover:bg-accent",
+            // Hover reveals the off toggles; a touch screen has no
+            // hover, so there they always show.
+            "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100",
+            impaired ? "text-muted-foreground/40" : "text-muted-foreground"
+          ),
+          children: /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3 shrink-0" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(TooltipContent, { side: "top", className: "z-[9999] max-w-xs text-xs", children: [
+        /* @__PURE__ */ jsxs("p", { className: "font-medium", children: [
+          label,
+          on ? " \u2014 on" : ""
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: what }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1", children: state.verdict.reason }),
+        state.placementProblem && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-amber-600 dark:text-amber-400", children: [
+          state.placementProblem,
+          " ",
+          /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: state.placementProblem })
+        ] })
+      ] })
+    ] }, flag);
+  }) });
 }
 export {
   MessageFlagToggles