@adecore/agents-react 0.31.12 → 0.32.0

package/dist/chat/ui/intelligent-ui/renderers/text.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useContext } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -9,24 +9,25 @@ import { formatNumber, formatPercent } from '@adecore/ui/format';
 import { UiHeadContext } from '../render-context.js';
 import { uiEventTime, uiNodeLabel } from '../node-text.js';
 import { UI_STEP_PILL, UI_TONE_FILL, UI_TONE_ICONS, UI_TONE_PILL, UI_TONE_SURFACE, UI_TONE_TEXT } from '../tones.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const STEP_ICONS = {
-    done: CircleCheck,
-    pending: Circle,
-    failed: CircleX,
-    skipped: CircleMinus
+  done: CircleCheck,
+  pending: Circle,
+  failed: CircleX,
+  skipped: CircleMinus
 };
 const STEP_TONES = {
-    done: 'text-status-idle',
-    running: 'text-accent',
-    pending: 'text-text-faint',
-    failed: 'text-status-error',
-    skipped: 'text-text-faint'
+  done: 'text-status-idle',
+  running: 'text-accent',
+  pending: 'text-text-faint',
+  failed: 'text-status-error',
+  skipped: 'text-text-faint'
 };
 /* A detail longer than this reads as a sentence, which a tag cannot wrap. */
 const DETAIL_AS_TAG = 24;
 /* Whether the block still changes: while it streams, or while it reads live data. Only then does anything spin. */
 function isLive(context) {
-    return context.phase === 'streaming' || (context.live !== undefined && context.live !== null && context.live.state !== 'refused');
+  return context.phase === 'streaming' || context.live !== undefined && context.live !== null && context.live.state !== 'refused';
 }
 /* A Summary and a Callout share one row: the icon in a square, and beside it text that centers on the square while it is shorter and starts at its top once it is taller. */
 const ICON_ROW = 'flex items-start gap-3 rounded-xl p-3';
@@ -37,53 +38,677 @@ const ICON_TEXT = 'flex min-h-8.5 min-w-0 grow flex-col justify-center gap-0.5';
  * carries its icon in a square of its own, a Summary further down is a subheading without one. The
  * icon is the ground's ink in the dark theme, where its tones are too light for white.
  */
-export function SummaryRenderer({ node, children }) {
-    const headId = useContext(UiHeadContext);
-    const head = headId === undefined || headId === node.id;
-    const { tone, badge } = node.props;
-    const shown = tone ?? 'neutral';
-    return (_jsxs("div", { className: clsx(ICON_ROW, tone === undefined ? 'bg-ui-tile' : UI_TONE_SURFACE[tone]), children: [head && (_jsx("span", { "aria-hidden": true, className: clsx(ICON_SQUARE, 'text-accent-text dark:text-surface', UI_TONE_FILL[shown]), children: _jsx(Icon, { icon: UI_TONE_ICONS[shown], size: 16 }) })), _jsxs("div", { className: ICON_TEXT, children: [_jsx("div", { className: "text-base font-semibold text-balance wrap-break-word text-text", children: children }), badge !== undefined && badge !== '' && (_jsx("p", { className: clsx('text-2xs font-medium wrap-anywhere', tone === undefined ? 'text-text-muted' : UI_TONE_TEXT[tone]), children: badge }))] })] }));
+export function SummaryRenderer(t0) {
+  const $ = _c(17);
+  const {
+    node,
+    children
+  } = t0;
+  const headId = useContext(UiHeadContext);
+  const head = headId === undefined || headId === node.id;
+  const {
+    tone,
+    badge
+  } = node.props;
+  const shown = tone ?? "neutral";
+  const t1 = tone === undefined ? "bg-ui-tile" : UI_TONE_SURFACE[tone];
+  let t2;
+  if ($[0] !== t1) {
+    t2 = clsx(ICON_ROW, t1);
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== head || $[3] !== shown) {
+    t3 = head && /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      className: clsx(ICON_SQUARE, "text-accent-text dark:text-surface", UI_TONE_FILL[shown]),
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: UI_TONE_ICONS[shown],
+        size: 16
+      })
+    });
+    $[2] = head;
+    $[3] = shown;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== children) {
+    t4 = /*#__PURE__*/_jsx("div", {
+      className: "text-base font-semibold text-balance wrap-break-word text-text",
+      children: children
+    });
+    $[5] = children;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== badge || $[8] !== tone) {
+    t5 = badge !== undefined && badge !== "" && /*#__PURE__*/_jsx("p", {
+      className: clsx("text-2xs font-medium wrap-anywhere", tone === undefined ? "text-text-muted" : UI_TONE_TEXT[tone]),
+      children: badge
+    });
+    $[7] = badge;
+    $[8] = tone;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== t4 || $[11] !== t5) {
+    t6 = /*#__PURE__*/_jsxs("div", {
+      className: ICON_TEXT,
+      children: [t4, t5]
+    });
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== t2 || $[14] !== t3 || $[15] !== t6) {
+    t7 = /*#__PURE__*/_jsxs("div", {
+      className: t2,
+      children: [t3, t6]
+    });
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  return t7;
 }
 /* A quiet tile whatever its tone: only the square of its icon wears the tone. */
-export function CalloutRenderer({ node, children }) {
-    const { tone, title } = node.props;
-    return (_jsxs("div", { className: clsx('chat-ui-flat bg-ui-tile text-xs', ICON_ROW), children: [_jsx("span", { "aria-hidden": true, className: clsx(ICON_SQUARE, UI_TONE_SURFACE[tone], UI_TONE_TEXT[tone]), children: _jsx(Icon, { icon: UI_TONE_ICONS[tone], size: 16 }) }), _jsxs("div", { className: ICON_TEXT, children: [title !== undefined && title !== '' && _jsx("div", { className: "font-semibold text-text", children: title }), _jsx("div", { className: "text-text-muted", children: children })] })] }));
+export function CalloutRenderer(t0) {
+  const $ = _c(19);
+  const {
+    node,
+    children
+  } = t0;
+  const {
+    tone,
+    title
+  } = node.props;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = clsx("chat-ui-flat bg-ui-tile text-xs", ICON_ROW);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const t2 = UI_TONE_SURFACE[tone];
+  const t3 = UI_TONE_TEXT[tone];
+  let t4;
+  if ($[1] !== t2 || $[2] !== t3) {
+    t4 = clsx(ICON_SQUARE, t2, t3);
+    $[1] = t2;
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  const t5 = UI_TONE_ICONS[tone];
+  let t6;
+  if ($[4] !== t5) {
+    t6 = /*#__PURE__*/_jsx(Icon, {
+      icon: t5,
+      size: 16
+    });
+    $[4] = t5;
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== t4 || $[7] !== t6) {
+    t7 = /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      className: t4,
+      children: t6
+    });
+    $[6] = t4;
+    $[7] = t6;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== title) {
+    t8 = title !== undefined && title !== "" && /*#__PURE__*/_jsx("div", {
+      className: "font-semibold text-text",
+      children: title
+    });
+    $[9] = title;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== children) {
+    t9 = /*#__PURE__*/_jsx("div", {
+      className: "text-text-muted",
+      children: children
+    });
+    $[11] = children;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== t8 || $[14] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("div", {
+      className: ICON_TEXT,
+      children: [t8, t9]
+    });
+    $[13] = t8;
+    $[14] = t9;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  let t11;
+  if ($[16] !== t10 || $[17] !== t7) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      className: t1,
+      children: [t7, t10]
+    });
+    $[16] = t10;
+    $[17] = t7;
+    $[18] = t11;
+  } else {
+    t11 = $[18];
+  }
+  return t11;
 }
-export function TagRenderer({ node, children }) {
-    const { tone } = node.props;
-    return (_jsx(Pill, { shape: "tag", size: "sm", tone: tone === undefined ? 'muted' : UI_TONE_PILL[tone], children: children }));
+export function TagRenderer(t0) {
+  const $ = _c(3);
+  const {
+    node,
+    children
+  } = t0;
+  const {
+    tone
+  } = node.props;
+  const t1 = tone === undefined ? "muted" : UI_TONE_PILL[tone];
+  let t2;
+  if ($[0] !== children || $[1] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Pill, {
+      shape: "tag",
+      size: "sm",
+      tone: t1,
+      children: children
+    });
+    $[0] = children;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
 }
 /* Without a value the progress is indeterminate; without a max the value is a percentage. */
-export function ProgressRenderer({ node, children, context }) {
-    const { t } = useTranslation('agent-chat');
-    const { value, max } = node.props;
-    const limit = max ?? 100;
-    const reading = value === undefined ? null : limit === 100 ? formatPercent(value) : t('blocks.progress.of', { value: formatNumber(value), max: formatNumber(limit) });
-    const label = uiNodeLabel(node);
-    return (_jsxs("div", { className: "chat-ui-flat flex flex-col gap-2 rounded-xl bg-ui-tile p-3", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-xs", children: [_jsx("span", { className: "min-w-0 text-text", children: children }), reading !== null ? (_jsx("span", { className: "shrink-0 text-text-muted tabular-nums", children: reading })) : (isLive(context) && _jsx(Spinner, { size: 12, className: "shrink-0 self-center text-text-faint" }))] }), _jsx(Meter, { value: value ?? null, max: limit, label: label === '' ? t('blocks.progress.label') : label, valueText: reading ?? undefined })] }));
+export function ProgressRenderer(t0) {
+  const $ = _c(25);
+  const {
+    node,
+    children,
+    context
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const {
+    value,
+    max
+  } = node.props;
+  const limit = max ?? 100;
+  let t1;
+  if ($[0] !== limit || $[1] !== t || $[2] !== value) {
+    t1 = value === undefined ? null : limit === 100 ? formatPercent(value) : t("blocks.progress.of", {
+      value: formatNumber(value),
+      max: formatNumber(limit)
+    });
+    $[0] = limit;
+    $[1] = t;
+    $[2] = value;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const reading = t1;
+  let t2;
+  if ($[4] !== node) {
+    t2 = uiNodeLabel(node);
+    $[4] = node;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const label = t2;
+  let t3;
+  if ($[6] !== children) {
+    t3 = /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 text-text",
+      children: children
+    });
+    $[6] = children;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== context || $[9] !== reading) {
+    t4 = reading !== null ? /*#__PURE__*/_jsx("span", {
+      className: "shrink-0 text-text-muted tabular-nums",
+      children: reading
+    }) : isLive(context) && /*#__PURE__*/_jsx(Spinner, {
+      size: 12,
+      className: "shrink-0 self-center text-text-faint"
+    });
+    $[8] = context;
+    $[9] = reading;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== t3 || $[12] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-baseline justify-between gap-3 text-xs",
+      children: [t3, t4]
+    });
+    $[11] = t3;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  const t6 = value ?? null;
+  let t7;
+  if ($[14] !== label || $[15] !== t) {
+    t7 = label === "" ? t("blocks.progress.label") : label;
+    $[14] = label;
+    $[15] = t;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  const t8 = reading ?? undefined;
+  let t9;
+  if ($[17] !== limit || $[18] !== t6 || $[19] !== t7 || $[20] !== t8) {
+    t9 = /*#__PURE__*/_jsx(Meter, {
+      value: t6,
+      max: limit,
+      label: t7,
+      valueText: t8
+    });
+    $[17] = limit;
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== t5 || $[23] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("div", {
+      className: "chat-ui-flat flex flex-col gap-2 rounded-xl bg-ui-tile p-3",
+      children: [t5, t9]
+    });
+    $[22] = t5;
+    $[23] = t9;
+    $[24] = t10;
+  } else {
+    t10 = $[24];
+  }
+  return t10;
 }
-export function StepsRenderer({ children }) {
-    return _jsx("ol", { className: "chat-ui-nodes flex flex-col gap-1.5", children: children });
+export function StepsRenderer(t0) {
+  const $ = _c(2);
+  const {
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children) {
+    t1 = /*#__PURE__*/_jsx("ol", {
+      className: "chat-ui-nodes flex flex-col gap-1.5",
+      children: children
+    });
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
 }
 /* A tile per step with its state in words at the end. A running step spins only while the block is live; in a quiet block it is a still dot. */
-export function StepRenderer({ node, children, context }) {
-    const { t } = useTranslation('agent-chat');
-    const { state, detail } = node.props;
-    const quiet = state === 'pending' || state === 'skipped';
-    return (_jsxs("li", { className: "flex min-h-10 items-start gap-3 rounded-xl bg-ui-tile px-3 py-2.5 text-xs", children: [_jsx("span", { className: clsx('mt-0.5 grid size-4 shrink-0 place-items-center', STEP_TONES[state]), children: state === 'running' ? (isLive(context) ? (_jsx(Spinner, { size: 14 })) : (_jsx(Icon, { icon: CircleDot, size: 14 }))) : (_jsx(Icon, { icon: STEP_ICONS[state], size: 14 })) }), _jsxs("span", { className: "flex min-w-0 grow flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: clsx('max-w-full min-w-0 font-medium wrap-break-word', quiet ? 'text-text-muted' : 'text-text'), children: children }), detail !== undefined && detail !== '' && _jsx("span", { className: "max-w-full text-2xs wrap-anywhere text-text-muted tabular-nums", children: detail })] }), _jsx(Pill, { shape: "tag", size: "sm", tone: UI_STEP_PILL[state], className: "shrink-0", children: t(`blocks.step.${state}`) })] }));
+export function StepRenderer(t0) {
+  const $ = _c(28);
+  const {
+    node,
+    children,
+    context
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const {
+    state,
+    detail
+  } = node.props;
+  const quiet = state === "pending" || state === "skipped";
+  const t1 = STEP_TONES[state];
+  let t2;
+  if ($[0] !== t1) {
+    t2 = clsx("mt-0.5 grid size-4 shrink-0 place-items-center", t1);
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== context || $[3] !== state) {
+    t3 = state === "running" ? isLive(context) ? /*#__PURE__*/_jsx(Spinner, {
+      size: 14
+    }) : /*#__PURE__*/_jsx(Icon, {
+      icon: CircleDot,
+      size: 14
+    }) : /*#__PURE__*/_jsx(Icon, {
+      icon: STEP_ICONS[state],
+      size: 14
+    });
+    $[2] = context;
+    $[3] = state;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/_jsx("span", {
+      className: t2,
+      children: t3
+    });
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const t5 = quiet ? "text-text-muted" : "text-text";
+  let t6;
+  if ($[8] !== t5) {
+    t6 = clsx("max-w-full min-w-0 font-medium wrap-break-word", t5);
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== children || $[11] !== t6) {
+    t7 = /*#__PURE__*/_jsx("span", {
+      className: t6,
+      children: children
+    });
+    $[10] = children;
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== detail) {
+    t8 = detail !== undefined && detail !== "" && /*#__PURE__*/_jsx("span", {
+      className: "max-w-full text-2xs wrap-anywhere text-text-muted tabular-nums",
+      children: detail
+    });
+    $[13] = detail;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== t7 || $[16] !== t8) {
+    t9 = /*#__PURE__*/_jsxs("span", {
+      className: "flex min-w-0 grow flex-wrap items-baseline gap-x-2",
+      children: [t7, t8]
+    });
+    $[15] = t7;
+    $[16] = t8;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  const t10 = UI_STEP_PILL[state];
+  const t11 = `blocks.step.${state}`;
+  let t12;
+  if ($[18] !== t || $[19] !== t11) {
+    t12 = t(t11);
+    $[18] = t;
+    $[19] = t11;
+    $[20] = t12;
+  } else {
+    t12 = $[20];
+  }
+  let t13;
+  if ($[21] !== t10 || $[22] !== t12) {
+    t13 = /*#__PURE__*/_jsx(Pill, {
+      shape: "tag",
+      size: "sm",
+      tone: t10,
+      className: "shrink-0",
+      children: t12
+    });
+    $[21] = t10;
+    $[22] = t12;
+    $[23] = t13;
+  } else {
+    t13 = $[23];
+  }
+  let t14;
+  if ($[24] !== t13 || $[25] !== t4 || $[26] !== t9) {
+    t14 = /*#__PURE__*/_jsxs("li", {
+      className: "flex min-h-10 items-start gap-3 rounded-xl bg-ui-tile px-3 py-2.5 text-xs",
+      children: [t4, t9, t13]
+    });
+    $[24] = t13;
+    $[25] = t4;
+    $[26] = t9;
+    $[27] = t14;
+  } else {
+    t14 = $[27];
+  }
+  return t14;
 }
-export function TimelineRenderer({ children }) {
-    return _jsx("ol", { className: "chat-ui-nodes chat-ui-flat flex flex-col rounded-xl bg-ui-tile px-3 py-1.5", children: children });
+export function TimelineRenderer(t0) {
+  const $ = _c(2);
+  const {
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children) {
+    t1 = /*#__PURE__*/_jsx("ol", {
+      className: "chat-ui-nodes chat-ui-flat flex flex-col rounded-xl bg-ui-tile px-3 py-1.5",
+      children: children
+    });
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
 }
 /* A row of the tile: the time, a dot in the tone, the title, and a short detail as a tag at the end or a longer one under the title. */
-export function EventRenderer({ node, children }) {
-    const { t } = useTranslation('agent-chat');
-    const { at, detail } = node.props;
-    const tone = node.props.tone ?? 'neutral';
-    const time = uiEventTime(at);
-    // A neutral dot says nothing the title does not, and a detail is part of what the row says.
-    const label = [time, uiNodeLabel(node), tone === 'neutral' ? '' : t(`blocks.event.tone.${tone}`), detail ?? ''].filter((part) => part !== '').join(', ');
-    const described = detail !== undefined && detail !== '';
-    const tagged = described && detail.length <= DETAIL_AS_TAG;
-    return (_jsxs("li", { "aria-label": label, className: "flex min-h-9 items-start gap-3 py-2 text-xs", children: [parseUiEventTime(at) === null ? (_jsx("span", { className: "w-24 shrink-0 text-2xs leading-5 wrap-anywhere text-text-muted tabular-nums", children: time })) : (_jsx("time", { dateTime: at, className: "w-24 shrink-0 text-2xs leading-5 text-text-muted tabular-nums", children: time })), _jsx("span", { "aria-hidden": true, className: clsx('mt-1.5 size-2 shrink-0 rounded-full bg-current', tone === 'neutral' ? 'text-text-faint' : UI_TONE_TEXT[tone]) }), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-0.5", children: [_jsx("div", { className: "wrap-break-word text-text", children: children }), described && !tagged && _jsx("div", { className: "text-2xs wrap-anywhere text-text-muted", children: detail })] }), tagged && (_jsx(Pill, { shape: "tag", size: "sm", tone: UI_TONE_PILL[tone], className: "shrink-0", children: detail }))] }));
+export function EventRenderer(t0) {
+  const $ = _c(38);
+  const {
+    node,
+    children
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const {
+    at,
+    detail
+  } = node.props;
+  const tone = node.props.tone ?? "neutral";
+  let t1;
+  if ($[0] !== at) {
+    t1 = uiEventTime(at);
+    $[0] = at;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const time = t1;
+  let t2;
+  if ($[2] !== node) {
+    t2 = uiNodeLabel(node);
+    $[2] = node;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t || $[5] !== tone) {
+    t3 = tone === "neutral" ? "" : t(`blocks.event.tone.${tone}`);
+    $[4] = t;
+    $[5] = tone;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const t4 = detail ?? "";
+  let t5;
+  if ($[7] !== t2 || $[8] !== t3 || $[9] !== t4 || $[10] !== time) {
+    t5 = [time, t2, t3, t4].filter(_temp);
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = time;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const label = t5.join(", ");
+  const described = detail !== undefined && detail !== "";
+  const tagged = described && detail.length <= DETAIL_AS_TAG;
+  let t6;
+  if ($[12] !== at || $[13] !== time) {
+    t6 = parseUiEventTime(at) === null ? /*#__PURE__*/_jsx("span", {
+      className: "w-24 shrink-0 text-2xs leading-5 wrap-anywhere text-text-muted tabular-nums",
+      children: time
+    }) : /*#__PURE__*/_jsx("time", {
+      dateTime: at,
+      className: "w-24 shrink-0 text-2xs leading-5 text-text-muted tabular-nums",
+      children: time
+    });
+    $[12] = at;
+    $[13] = time;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  const t7 = tone === "neutral" ? "text-text-faint" : UI_TONE_TEXT[tone];
+  let t8;
+  if ($[15] !== t7) {
+    t8 = clsx("mt-1.5 size-2 shrink-0 rounded-full bg-current", t7);
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  let t9;
+  if ($[17] !== t8) {
+    t9 = /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      className: t8
+    });
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== children) {
+    t10 = /*#__PURE__*/_jsx("div", {
+      className: "wrap-break-word text-text",
+      children: children
+    });
+    $[19] = children;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  let t11;
+  if ($[21] !== described || $[22] !== detail || $[23] !== tagged) {
+    t11 = described && !tagged && /*#__PURE__*/_jsx("div", {
+      className: "text-2xs wrap-anywhere text-text-muted",
+      children: detail
+    });
+    $[21] = described;
+    $[22] = detail;
+    $[23] = tagged;
+    $[24] = t11;
+  } else {
+    t11 = $[24];
+  }
+  let t12;
+  if ($[25] !== t10 || $[26] !== t11) {
+    t12 = /*#__PURE__*/_jsxs("div", {
+      className: "flex min-w-0 grow flex-col gap-0.5",
+      children: [t10, t11]
+    });
+    $[25] = t10;
+    $[26] = t11;
+    $[27] = t12;
+  } else {
+    t12 = $[27];
+  }
+  let t13;
+  if ($[28] !== detail || $[29] !== tagged || $[30] !== tone) {
+    t13 = tagged && /*#__PURE__*/_jsx(Pill, {
+      shape: "tag",
+      size: "sm",
+      tone: UI_TONE_PILL[tone],
+      className: "shrink-0",
+      children: detail
+    });
+    $[28] = detail;
+    $[29] = tagged;
+    $[30] = tone;
+    $[31] = t13;
+  } else {
+    t13 = $[31];
+  }
+  let t14;
+  if ($[32] !== label || $[33] !== t12 || $[34] !== t13 || $[35] !== t6 || $[36] !== t9) {
+    t14 = /*#__PURE__*/_jsxs("li", {
+      "aria-label": label,
+      className: "flex min-h-9 items-start gap-3 py-2 text-xs",
+      children: [t6, t9, t12, t13]
+    });
+    $[32] = label;
+    $[33] = t12;
+    $[34] = t13;
+    $[35] = t6;
+    $[36] = t9;
+    $[37] = t14;
+  } else {
+    t14 = $[37];
+  }
+  return t14;
 }
+function _temp(part) {
+  return part !== "";
+}