@adecore/agents-react 0.31.12 → 0.33.0

package/dist/chat/ui/intelligent-ui/UiBlockFrame.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useId, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -9,42 +9,335 @@ import { formatAgo, formatMoment } from '@adecore/ui/format';
 import { uiBlockHead, uiReasonText } from './node-text.js';
 import { UiHeadContext } from './render-context.js';
 import { useLater } from './use-later.js';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const NO_FIXES = [];
 const READING_SPINNER_MS = 1000;
 /* The one sign of a live block: what it reads, and when it last read it. A reading spins only after a second. */
-function LivePart({ live }) {
-    const { t } = useTranslation('agent-chat');
-    const slow = useLater(live.state === 'reading', READING_SPINNER_MS);
-    const { readAt } = live;
-    const fresh = live.state === 'fresh' || live.state === 'reading';
-    const ago = useTickingText(() => {
-        if (readAt === null) {
-            return '';
-        }
-        const time = formatAgo(Date.now() - readAt);
-        return fresh ? t('blocks.live.read', { time }) : time;
-    });
-    const source = live.source ?? live.sources[0] ?? '';
-    const icon = slow ? (_jsx(Spinner, { size: 12 })) : live.state === 'failed' ? (_jsx(Icon, { icon: TriangleAlert, size: 12, className: "text-status-needs-you" })) : live.state === 'refused' ? (_jsx(Icon, { icon: Lock, size: 12 })) : (_jsx(Icon, { icon: Radio, size: 12, className: "text-positive" }));
-    const words = live.state === 'failed'
-        ? t('blocks.live.failed', { source })
-        : live.state === 'refused'
-            ? t('blocks.live.refused', { source })
-            : t('blocks.live.label');
-    const reason = live.state === 'failed' || live.state === 'refused' ? uiReasonText(t, live.code, live.reason) : undefined;
-    const hint = reason !== undefined ? reason : live.sources.length > 0 ? t('blocks.live.sources', { sources: live.sources.join(', ') }) : null;
-    const body = (_jsxs("span", { tabIndex: hint === null ? undefined : 0, className: "flex items-center gap-1.5", children: [icon, _jsx("span", { children: words }), readAt !== null && live.state !== 'refused' && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("time", { dateTime: new Date(readAt).toISOString(), children: _jsx("span", { ref: ago, className: "tabular-nums" }) })] })), readAt === null && fresh && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: t('blocks.live.notRead') })] }))] }));
-    return hint === null ? body : _jsx(Tooltip, { label: hint, children: body });
+function LivePart(t0) {
+  const $ = _c(39);
+  const {
+    live
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const slow = useLater(live.state === "reading", READING_SPINNER_MS);
+  const {
+    readAt
+  } = live;
+  const fresh = live.state === "fresh" || live.state === "reading";
+  let t1;
+  if ($[0] !== fresh || $[1] !== readAt || $[2] !== t) {
+    t1 = () => {
+      if (readAt === null) {
+        return "";
+      }
+      const time = formatAgo(Date.now() - readAt);
+      return fresh ? t("blocks.live.read", {
+        time
+      }) : time;
+    };
+    $[0] = fresh;
+    $[1] = readAt;
+    $[2] = t;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const ago = useTickingText(t1);
+  const source = live.source ?? live.sources[0] ?? "";
+  let t2;
+  if ($[4] !== live.state || $[5] !== slow) {
+    t2 = slow ? /*#__PURE__*/_jsx(Spinner, {
+      size: 12
+    }) : live.state === "failed" ? /*#__PURE__*/_jsx(Icon, {
+      icon: TriangleAlert,
+      size: 12,
+      className: "text-status-needs-you"
+    }) : live.state === "refused" ? /*#__PURE__*/_jsx(Icon, {
+      icon: Lock,
+      size: 12
+    }) : /*#__PURE__*/_jsx(Icon, {
+      icon: Radio,
+      size: 12,
+      className: "text-positive"
+    });
+    $[4] = live.state;
+    $[5] = slow;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const icon = t2;
+  let t3;
+  if ($[7] !== live.state || $[8] !== source || $[9] !== t) {
+    t3 = live.state === "failed" ? t("blocks.live.failed", {
+      source
+    }) : live.state === "refused" ? t("blocks.live.refused", {
+      source
+    }) : t("blocks.live.label");
+    $[7] = live.state;
+    $[8] = source;
+    $[9] = t;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const words = t3;
+  let t4;
+  if ($[11] !== live.code || $[12] !== live.reason || $[13] !== live.state || $[14] !== t) {
+    t4 = live.state === "failed" || live.state === "refused" ? uiReasonText(t, live.code, live.reason) : undefined;
+    $[11] = live.code;
+    $[12] = live.reason;
+    $[13] = live.state;
+    $[14] = t;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  const reason = t4;
+  let t5;
+  if ($[16] !== live.sources || $[17] !== reason || $[18] !== t) {
+    t5 = reason !== undefined ? reason : live.sources.length > 0 ? t("blocks.live.sources", {
+      sources: live.sources.join(", ")
+    }) : null;
+    $[16] = live.sources;
+    $[17] = reason;
+    $[18] = t;
+    $[19] = t5;
+  } else {
+    t5 = $[19];
+  }
+  const hint = t5;
+  const t6 = hint === null ? undefined : 0;
+  let t7;
+  if ($[20] !== words) {
+    t7 = /*#__PURE__*/_jsx("span", {
+      children: words
+    });
+    $[20] = words;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  let t8;
+  if ($[22] !== ago || $[23] !== live.state || $[24] !== readAt) {
+    t8 = readAt !== null && live.state !== "refused" && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        children: "\xB7"
+      }), /*#__PURE__*/_jsx("time", {
+        dateTime: new Date(readAt).toISOString(),
+        children: /*#__PURE__*/_jsx("span", {
+          ref: ago,
+          className: "tabular-nums"
+        })
+      })]
+    });
+    $[22] = ago;
+    $[23] = live.state;
+    $[24] = readAt;
+    $[25] = t8;
+  } else {
+    t8 = $[25];
+  }
+  let t9;
+  if ($[26] !== fresh || $[27] !== readAt || $[28] !== t) {
+    t9 = readAt === null && fresh && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        children: "\xB7"
+      }), /*#__PURE__*/_jsx("span", {
+        children: t("blocks.live.notRead")
+      })]
+    });
+    $[26] = fresh;
+    $[27] = readAt;
+    $[28] = t;
+    $[29] = t9;
+  } else {
+    t9 = $[29];
+  }
+  let t10;
+  if ($[30] !== icon || $[31] !== t6 || $[32] !== t7 || $[33] !== t8 || $[34] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("span", {
+      tabIndex: t6,
+      className: "flex items-center gap-1.5",
+      children: [icon, t7, t8, t9]
+    });
+    $[30] = icon;
+    $[31] = t6;
+    $[32] = t7;
+    $[33] = t8;
+    $[34] = t9;
+    $[35] = t10;
+  } else {
+    t10 = $[35];
+  }
+  const body = t10;
+  let t11;
+  if ($[36] !== body || $[37] !== hint) {
+    t11 = hint === null ? body : /*#__PURE__*/_jsx(Tooltip, {
+      label: hint,
+      children: body
+    });
+    $[36] = body;
+    $[37] = hint;
+    $[38] = t11;
+  } else {
+    t11 = $[38];
+  }
+  return t11;
 }
 /* The line under a block, only when it has something to say: live, answered, noted or drawn as text, in that order. */
-function UiBlockFooter({ live = null, answered = null, fixes = NO_FIXES, shownAsText = null }) {
-    const { t } = useTranslation('agent-chat');
-    const [fixesOpen, setFixesOpen] = useState(false);
-    const listId = useId();
-    if (live === null && answered === null && fixes.length === 0 && shownAsText === null) {
-        return null;
-    }
-    return (_jsxs("div", { className: "flex flex-col gap-1.5 text-2xs text-text-faint", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [live !== null && _jsx(LivePart, { live: live }), answered !== null && (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { children: t('blocks.answered', { label: answered.label }) }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("time", { dateTime: new Date(answered.at).toISOString(), children: formatMoment(answered.at) })] })), fixes.length > 0 && (_jsxs("button", { type: "button", "aria-expanded": fixesOpen, "aria-controls": listId, className: "flex items-center gap-1.5 rounded-sm hover:text-text-muted", onClick: () => setFixesOpen(!fixesOpen), children: [_jsx(Icon, { icon: Info, size: 12 }), t('blocks.notes', { count: fixes.length })] })), shownAsText !== null && (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { children: t('blocks.shownAsText') }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: shownAsText })] }))] }), fixes.length > 0 && (_jsx("ul", { id: listId, hidden: !fixesOpen, className: "flex flex-col gap-0.5 text-text-muted", children: fixes.map((fix, index) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { className: "shrink-0 font-mono", children: fix.code }), _jsx("span", { className: "min-w-0", children: fix.message })] }, index))) }))] }));
+function UiBlockFooter(t0) {
+  const $ = _c(25);
+  const {
+    live: t1,
+    answered: t2,
+    fixes: t3,
+    shownAsText: t4
+  } = t0;
+  const live = t1 === undefined ? null : t1;
+  const answered = t2 === undefined ? null : t2;
+  const fixes = t3 === undefined ? NO_FIXES : t3;
+  const shownAsText = t4 === undefined ? null : t4;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const [fixesOpen, setFixesOpen] = useState(false);
+  const listId = useId();
+  if (live === null && answered === null && fixes.length === 0 && shownAsText === null) {
+    return null;
+  }
+  let t5;
+  if ($[0] !== live) {
+    t5 = live !== null && /*#__PURE__*/_jsx(LivePart, {
+      live: live
+    });
+    $[0] = live;
+    $[1] = t5;
+  } else {
+    t5 = $[1];
+  }
+  let t6;
+  if ($[2] !== answered || $[3] !== t) {
+    t6 = answered !== null && /*#__PURE__*/_jsxs("span", {
+      className: "flex items-center gap-1.5",
+      children: [/*#__PURE__*/_jsx("span", {
+        children: t("blocks.answered", {
+          label: answered.label
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        children: "\xB7"
+      }), /*#__PURE__*/_jsx("time", {
+        dateTime: new Date(answered.at).toISOString(),
+        children: formatMoment(answered.at)
+      })]
+    });
+    $[2] = answered;
+    $[3] = t;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  let t7;
+  if ($[5] !== fixes.length || $[6] !== fixesOpen || $[7] !== listId || $[8] !== t) {
+    t7 = fixes.length > 0 && /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      "aria-expanded": fixesOpen,
+      "aria-controls": listId,
+      className: "flex items-center gap-1.5 rounded-sm hover:text-text-muted",
+      onClick: () => setFixesOpen(!fixesOpen),
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: Info,
+        size: 12
+      }), t("blocks.notes", {
+        count: fixes.length
+      })]
+    });
+    $[5] = fixes.length;
+    $[6] = fixesOpen;
+    $[7] = listId;
+    $[8] = t;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] !== shownAsText || $[11] !== t) {
+    t8 = shownAsText !== null && /*#__PURE__*/_jsxs("span", {
+      className: "flex items-center gap-1.5",
+      children: [/*#__PURE__*/_jsx("span", {
+        children: t("blocks.shownAsText")
+      }), /*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        children: "\xB7"
+      }), /*#__PURE__*/_jsx("span", {
+        children: shownAsText
+      })]
+    });
+    $[10] = shownAsText;
+    $[11] = t;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== t5 || $[14] !== t6 || $[15] !== t7 || $[16] !== t8) {
+    t9 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-wrap items-center gap-x-3 gap-y-1",
+      children: [t5, t6, t7, t8]
+    });
+    $[13] = t5;
+    $[14] = t6;
+    $[15] = t7;
+    $[16] = t8;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  let t10;
+  if ($[18] !== fixes || $[19] !== fixesOpen || $[20] !== listId) {
+    t10 = fixes.length > 0 && /*#__PURE__*/_jsx("ul", {
+      id: listId,
+      hidden: !fixesOpen,
+      className: "flex flex-col gap-0.5 text-text-muted",
+      children: fixes.map(_temp)
+    });
+    $[18] = fixes;
+    $[19] = fixesOpen;
+    $[20] = listId;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  let t11;
+  if ($[22] !== t10 || $[23] !== t9) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-1.5 text-2xs text-text-faint",
+      children: [t9, t10]
+    });
+    $[22] = t10;
+    $[23] = t9;
+    $[24] = t11;
+  } else {
+    t11 = $[24];
+  }
+  return t11;
+}
+function _temp(fix, index) {
+  return /*#__PURE__*/_jsxs("li", {
+    className: "flex gap-2",
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "shrink-0 font-mono",
+      children: fix.code
+    }), /*#__PURE__*/_jsx("span", {
+      className: "min-w-0",
+      children: fix.message
+    })]
+  }, index);
 }
 const RELEASE_MS = 200;
 /*
@@ -53,38 +346,65 @@ const RELEASE_MS = 200;
  * for less motion.
  */
 function useRisingFloor(active) {
-    const ref = useRef(null);
-    const held = useRef(0);
-    const [floor, setFloor] = useState(0);
-    useLayoutEffect(() => {
-        const element = ref.current;
-        if (element === null) {
-            return;
-        }
-        if (active) {
-            const observer = new ResizeObserver(() => {
-                const height = Math.ceil(element.getBoundingClientRect().height);
-                held.current = Math.max(held.current, height);
-                setFloor(held.current);
-            });
-            observer.observe(element);
-            return () => {
-                observer.disconnect();
-                setFloor(0);
-            };
-        }
-        // The final render already let go of the floor, so the card measures its own height here.
-        const from = held.current;
-        const to = element.getBoundingClientRect().height;
-        held.current = 0;
-        const reduced = element.ownerDocument.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches === true;
-        if (from - to < 1 || reduced) {
-            return;
-        }
-        const release = element.animate([{ minHeight: `${from}px` }, { minHeight: `${to}px` }], { duration: RELEASE_MS, easing: 'ease-out' });
-        return () => release.cancel();
-    }, [active]);
-    return [ref, floor];
+  const $ = _c(5);
+  const ref = useRef(null);
+  const held = useRef(0);
+  const [floor, setFloor] = useState(0);
+  let t0;
+  let t1;
+  if ($[0] !== active) {
+    t0 = () => {
+      const element = ref.current;
+      if (element === null) {
+        return;
+      }
+      if (active) {
+        const observer = new ResizeObserver(() => {
+          const height = Math.ceil(element.getBoundingClientRect().height);
+          held.current = Math.max(held.current, height);
+          setFloor(held.current);
+        });
+        observer.observe(element);
+        return () => {
+          observer.disconnect();
+          setFloor(0);
+        };
+      }
+      const from = held.current;
+      const to = element.getBoundingClientRect().height;
+      held.current = 0;
+      const reduced = element.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches === true;
+      if (from - to < 1 || reduced) {
+        return;
+      }
+      const release = element.animate([{
+        minHeight: `${from}px`
+      }, {
+        minHeight: `${to}px`
+      }], {
+        duration: RELEASE_MS,
+        easing: "ease-out"
+      });
+      return () => release.cancel();
+    };
+    t1 = [active];
+    $[0] = active;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useLayoutEffect(t0, t1);
+  let t2;
+  if ($[3] !== floor) {
+    t2 = [ref, floor];
+    $[3] = floor;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 }
 /*
  * The band of one block, with its footer. Named by its Summary and busy while it streams, but never
@@ -92,22 +412,176 @@ function useRisingFloor(active) {
  * and for a person who asked for less motion it only fades; a node inside another only fades
  * (`chat-ui-nodes`). Until the first node a skeleton holds the place of the head.
  */
-export function UiBlockFrame({ nodes, phase, children, className, ...footer }) {
-    const { t } = useTranslation('agent-chat');
-    const host = useChatHost();
-    const streaming = phase === 'streaming';
-    const head = uiBlockHead(nodes);
-    const [ref, floor] = useRisingFloor(streaming);
-    // Only while the focus is inside the block, so the composer keeps the same keys for sending.
-    const pickPrimary = (event) => {
-        if (!matchesShortcut(KEY_SHORTCUTS.modEnter, event, host.isApplePlatform())) {
-            return;
-        }
-        const primary = event.currentTarget.querySelector('[data-ui-primary-choice]');
-        if (primary !== null) {
-            event.preventDefault();
-            primary.click();
-        }
+export function UiBlockFrame(t0) {
+  const $ = _c(40);
+  let children;
+  let className;
+  let footer;
+  let nodes;
+  let phase;
+  if ($[0] !== t0) {
+    ({
+      nodes,
+      phase,
+      children,
+      className,
+      ...footer
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = footer;
+    $[4] = nodes;
+    $[5] = phase;
+  } else {
+    children = $[1];
+    className = $[2];
+    footer = $[3];
+    nodes = $[4];
+    phase = $[5];
+  }
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const host = useChatHost();
+  const streaming = phase === "streaming";
+  let t1;
+  if ($[6] !== nodes) {
+    t1 = uiBlockHead(nodes);
+    $[6] = nodes;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  const head = t1;
+  const [ref, floor] = useRisingFloor(streaming);
+  let t2;
+  if ($[8] !== host) {
+    t2 = event => {
+      if (!matchesShortcut(KEY_SHORTCUTS.modEnter, event, host.isApplePlatform())) {
+        return;
+      }
+      const primary = event.currentTarget.querySelector("[data-ui-primary-choice]");
+      if (primary !== null) {
+        event.preventDefault();
+        primary.click();
+      }
     };
-    return (_jsx(UiHeadContext, { value: head?.id ?? null, children: _jsx("div", { ref: ref, role: "group", "aria-label": head === null || head.label === '' ? t('blocks.label') : head.label, "aria-busy": streaming || undefined, className: clsx('chat-ui-band flex min-h-11 flex-col', className), style: streaming && floor > 0 ? { minHeight: floor } : undefined, onKeyDown: pickPrimary, children: _jsxs("div", { className: "flex flex-col gap-3 py-5", children: [_jsx("div", { className: "flex flex-col gap-3.5 *:transition-[opacity,translate] *:duration-160 *:ease-out *:starting:opacity-0 motion-safe:*:starting:translate-y-0.5", children: nodes.length === 0 && streaming ? _jsx(Skeleton, { className: "my-1 w-2/5" }) : children }), _jsx(UiBlockFooter, { ...footer })] }) }) }));
-}
+    $[8] = host;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const pickPrimary = t2;
+  const t3 = head?.id ?? null;
+  let t4;
+  if ($[10] !== head || $[11] !== t) {
+    t4 = head === null || head.label === "" ? t("blocks.label") : head.label;
+    $[10] = head;
+    $[11] = t;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  const t5 = streaming || undefined;
+  let t6;
+  if ($[13] !== className) {
+    t6 = clsx("chat-ui-band flex min-h-11 flex-col", className);
+    $[13] = className;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] !== floor || $[16] !== streaming) {
+    t7 = streaming && floor > 0 ? {
+      minHeight: floor
+    } : undefined;
+    $[15] = floor;
+    $[16] = streaming;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== children || $[19] !== nodes.length || $[20] !== streaming) {
+    t8 = nodes.length === 0 && streaming ? /*#__PURE__*/_jsx(Skeleton, {
+      className: "my-1 w-2/5"
+    }) : children;
+    $[18] = children;
+    $[19] = nodes.length;
+    $[20] = streaming;
+    $[21] = t8;
+  } else {
+    t8 = $[21];
+  }
+  let t9;
+  if ($[22] !== t8) {
+    t9 = /*#__PURE__*/_jsx("div", {
+      className: "flex flex-col gap-3.5 *:transition-[opacity,translate] *:duration-160 *:ease-out *:starting:opacity-0 motion-safe:*:starting:translate-y-0.5",
+      children: t8
+    });
+    $[22] = t8;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  let t10;
+  if ($[24] !== footer) {
+    t10 = /*#__PURE__*/_jsx(UiBlockFooter, {
+      ...footer
+    });
+    $[24] = footer;
+    $[25] = t10;
+  } else {
+    t10 = $[25];
+  }
+  let t11;
+  if ($[26] !== t10 || $[27] !== t9) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-3 py-5",
+      children: [t9, t10]
+    });
+    $[26] = t10;
+    $[27] = t9;
+    $[28] = t11;
+  } else {
+    t11 = $[28];
+  }
+  let t12;
+  if ($[29] !== pickPrimary || $[30] !== ref || $[31] !== t11 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7) {
+    t12 = /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      role: "group",
+      "aria-label": t4,
+      "aria-busy": t5,
+      className: t6,
+      style: t7,
+      onKeyDown: pickPrimary,
+      children: t11
+    });
+    $[29] = pickPrimary;
+    $[30] = ref;
+    $[31] = t11;
+    $[32] = t4;
+    $[33] = t5;
+    $[34] = t6;
+    $[35] = t7;
+    $[36] = t12;
+  } else {
+    t12 = $[36];
+  }
+  let t13;
+  if ($[37] !== t12 || $[38] !== t3) {
+    t13 = /*#__PURE__*/_jsx(UiHeadContext, {
+      value: t3,
+      children: t12
+    });
+    $[37] = t12;
+    $[38] = t3;
+    $[39] = t13;
+  } else {
+    t13 = $[39];
+  }
+  return t13;
+}