@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/chat/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sources":["../../../src/components/chat/Message.tsx"],"sourcesContent":["import { useState, type ReactNode, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { copyText as copyToClipboard } from \"../../lib/clipboard\";\nimport { Icon } from \"../Icon\";\nimport { Avatar } from \"../Avatar\";\nimport { Tooltip } from \"../Popover\";\nimport { Collapsible } from \"../Surface\";\nimport { RelativeTime } from \"../RelativeTime\";\nimport { CodeBlock } from \"../Markdown\";\nimport { StreamingMarkdown } from \"./StreamingMarkdown\";\nimport { Attachment, AttachmentList } from \"./Attachment\";\nimport { ChatStatus } from \"./ContextMeter\";\nimport type {\n  ChatComponents,\n  ChatFile,\n  ChatMessage,\n  MessagePart,\n  PartRenderers,\n  RenderContext,\n  ToolPart,\n  ToolStatus,\n} from \"./types\";\n\n/* ============================================================================\n   MESSAGE\n   One turn, rendered from its parts.\n\n   ROLE DECIDES SHAPE, NOT JUST COLOUR. A user turn is a bounded bubble because\n   it is a discrete thing someone said and its edges are meaningful. An\n   assistant turn is full-width unbubbled prose because it is long, structured,\n   and frequently contains code, tables and controls — putting that inside a\n   rounded box makes every code block fight the container it sits in. Chat UIs\n   that bubble both ends look symmetrical and read worse.\n   ========================================================================= */\n\nconst TOOL_ICONS: Record<ToolStatus, { icon: \"loader-circle\" | \"check\" | \"circle-x\"; className: string }> = {\n  running: { icon: \"loader-circle\", className: \"animate-spin text-accent-text\" },\n  success: { icon: \"check\", className: \"text-success\" },\n  error: { icon: \"circle-x\", className: \"text-danger\" },\n};\n\nexport interface ToolCallProps {\n  part: ToolPart;\n  defaultOpen?: boolean;\n  className?: string;\n}\n\n/**\n * A tool invocation, collapsed to one line.\n *\n * COLLAPSED BY DEFAULT because the transcript is a conversation and not a log:\n * twenty lines of output between two sentences buries both of them. The summary\n * carries enough to decide whether opening it is worth doing, which is the only\n * decision anyone makes about a tool call they did not have to authorise.\n */\nexport function ToolCall({ part, defaultOpen = false, className }: ToolCallProps) {\n  const strings = useUiStrings().chat.message;\n  const status = TOOL_ICONS[part.status];\n  const { added, removed } = part.stats ?? {};\n\n  const header = (\n    <span className=\"flex w-full items-center gap-2 text-left\">\n      <Icon name={status.icon} size=\"xs\" className={cn(\"shrink-0\", status.className)} />\n      <span className=\"min-w-0 flex-1 truncate text-xs text-secondary\">\n        {part.status === \"running\" ? <ChatStatus>{part.summary}</ChatStatus> : part.summary}\n      </span>\n      {added !== undefined && added > 0 && (\n        <span className=\"shrink-0 font-mono text-2xs text-success\">+{added}</span>\n      )}\n      {removed !== undefined && removed > 0 && (\n        <span className=\"shrink-0 font-mono text-2xs text-danger\">−{removed}</span>\n      )}\n      {part.detail !== undefined && (\n        <Icon\n          name=\"chevron-right\"\n          size=\"xs\"\n          className=\"shrink-0 text-tertiary transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-fast) group-data-panel-open/collapsible:rotate-90\"\n        />\n      )}\n    </span>\n  );\n\n  if (part.detail === undefined) {\n    return (\n      <div\n        className={cn(\n          \"my-1 flex items-center rounded-md border border-border-subtle bg-surface-raised px-2.5 py-1.5\",\n          className,\n        )}\n      >\n        {header}\n      </div>\n    );\n  }\n\n  return (\n    <Collapsible\n      defaultOpen={defaultOpen}\n      className={cn(\"my-1\", className)}\n      chevron={false}\n      /* `dx-ground-raised`: the row paints its own resting surface, so its\n         hover lift is measured from that rather than from the transcript. */\n      triggerClassName=\"dx-ground-raised w-full self-stretch border border-border-subtle bg-surface-raised px-2.5 py-1.5 text-left hover:border-border hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-focus-ring\"\n      trigger={header}\n    >\n      {/* Same reason as the code block: it scrolls sideways, so it has to be\n          reachable without a pointer. */}\n      <div\n        tabIndex={0}\n        role=\"region\"\n        aria-label={strings.toolOutput(part.name)}\n        className=\"mt-1 overflow-x-auto rounded-md border border-border-subtle bg-surface-inset px-3 py-2 font-mono text-2xs whitespace-pre text-secondary outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset\"\n      >\n        {part.detail}\n      </div>\n    </Collapsible>\n  );\n}\n\n/**\n * Model reasoning, hidden until asked for.\n *\n * Shown collapsed even while streaming — the label shimmers so it is obviously\n * live, but the text does not push the answer down the page as it grows. An\n * expanding reasoning block moves the thing the reader is waiting for.\n */\nfunction Reasoning({ text, label, streaming }: { text: string; label?: string; streaming?: boolean }) {\n  const strings = useUiStrings().chat.message;\n  return (\n    <Collapsible\n      className=\"my-1.5\"\n      chevron={false}\n      triggerClassName=\"gap-1.5 px-1.5 py-1 text-2xs text-tertiary hover:text-secondary focus-visible:ring-2 focus-visible:ring-focus-ring\"\n      trigger={\n        <>\n          <Icon name=\"brain\" size=\"xs\" />\n          {streaming ? (\n            <ChatStatus>{label ?? strings.thinking}</ChatStatus>\n          ) : (\n            <span>{label ?? strings.thought}</span>\n          )}\n          <Icon\n            name=\"chevron-right\"\n            size=\"xs\"\n            className=\"transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-fast) group-data-panel-open/collapsible:rotate-90\"\n          />\n        </>\n      }\n    >\n      <div className=\"mt-1 border-l-2 border-border-subtle pl-3 text-xs whitespace-pre-wrap text-tertiary\">\n        {text}\n      </div>\n    </Collapsible>\n  );\n}\n\n/** A part nothing can draw. Loud and visible — never dropped, never thrown. */\nfunction UnrenderablePart({ reason, name }: { reason: string; name: string }) {\n  const strings = useUiStrings().chat.message;\n  return (\n    <div\n      role=\"note\"\n      className=\"my-1 flex items-start gap-2 rounded-md border border-dashed border-warning-border bg-warning-subtle px-2.5 py-2 text-2xs text-warning-text\"\n    >\n      <Icon name=\"triangle-alert\" size=\"xs\" className=\"mt-px shrink-0\" />\n      <span>\n        <strong className=\"font-semibold\">{strings.unrenderable}</strong> {reason}{\" \"}\n        <code className=\"font-mono\">{name}</code>\n      </span>\n    </div>\n  );\n}\n\nexport interface MessagePartViewProps<TApp = unknown> {\n  part: MessagePart;\n  context: RenderContext<TApp>;\n  renderers?: PartRenderers<TApp>;\n  components?: ChatComponents<TApp>;\n  onPreviewFile?: (file: ChatFile) => void;\n  onDownloadFile?: (file: ChatFile) => void;\n}\n\nexport function MessagePartView<TApp>({\n  part,\n  context,\n  renderers,\n  components,\n  onPreviewFile,\n  onDownloadFile,\n}: MessagePartViewProps<TApp>) {\n  const strings = useUiStrings().chat.message;\n  switch (part.type) {\n    case \"text\":\n      return renderers?.text ? (\n        <>{renderers.text(part, context)}</>\n      ) : (\n        <StreamingMarkdown>{part.text}</StreamingMarkdown>\n      );\n\n    case \"code\":\n      return renderers?.code ? (\n        <>{renderers.code(part, context)}</>\n      ) : (\n        <CodeBlock code={part.code} language={part.language} filename={part.filename} />\n      );\n\n    case \"reasoning\":\n      return renderers?.reasoning ? (\n        <>{renderers.reasoning(part, context)}</>\n      ) : (\n        <Reasoning text={part.text} label={part.label} streaming={part.streaming} />\n      );\n\n    case \"tool\":\n      return renderers?.tool ? <>{renderers.tool(part, context)}</> : <ToolCall part={part} />;\n\n    case \"file\":\n      return renderers?.file ? (\n        <>{renderers.file(part, context)}</>\n      ) : (\n        <div className=\"my-1.5\">\n          <Attachment\n            file={part.file}\n            layout=\"row\"\n            onPreview={onPreviewFile}\n            onDownload={onDownloadFile}\n          />\n        </div>\n      );\n\n    case \"component\": {\n      const render = components?.[part.component];\n      if (!render) {\n        return (\n          <UnrenderablePart\n            reason={strings.unregisteredComponent}\n            name={part.component}\n          />\n        );\n      }\n      return <>{render(part.props ?? {}, context)}</>;\n    }\n\n    default: {\n      /* Exhaustiveness is checked by the compiler; this branch exists for data\n         that arrived at RUNTIME from a server or a stored transcript, which the\n         type system never saw. */\n      const unknown = part as { type?: string };\n      return <UnrenderablePart reason={strings.unknownPart} name={String(unknown.type)} />;\n    }\n  }\n}\n\nexport interface MessageAction {\n  id: string;\n  icon: Parameters<typeof Icon>[0][\"name\"];\n  label: string;\n  onClick: (message: ChatMessage) => void;\n  /** Latches on — a cast feedback vote, a saved message. */\n  active?: boolean;\n}\n\nexport interface MessageProps<TApp = unknown> {\n  message: ChatMessage;\n  renderers?: PartRenderers<TApp>;\n  components?: ChatComponents<TApp>;\n  appContext?: TApp;\n  /** Buttons in the meta bar on the avatar and name line, after copy. Assistant turns only, unless `on` says otherwise. */\n  actions?: MessageAction[];\n  /**\n   * DXUI-19: the message's state (a person's Sent / Seen / Responded checks, a sending spinner), drawn in the\n   * meta bar after the time and copy. The library draws no state of its own; the caller owns what it means and\n   * supplies its accessible label. Always visible, never faded with the copy button.\n   */\n  state?: ReactNode;\n  /**\n   * DXUI-24: plain gray text for the meta bar (a size, a count), drawn directly after the time, before copy and\n   * `actions`, and never faded. Only a value that renders counts, as `state`. The caller owns what it says.\n   */\n  meta?: ReactNode;\n  /** Hides the avatar and name and tightens the spacing — for consecutive turns from the same author. The header line stays for the meta bar, on the author's side (left for an agent, right for a person). */\n  grouped?: boolean;\n  showAvatar?: boolean;\n  /** DX-5275: draws the author's avatar beside a `user` turn too (right edge), so a two-sided conversation of named people shows who spoke on both sides. */\n  showUserAvatar?: boolean;\n  showTimestamp?: boolean;\n  /** DX-5275: the time, the copy button and `actions` in the meta bar stay fully visible instead of fading in on hover, for a transcript whose age is part of the record. */\n  persistentToolbar?: boolean;\n  onPreviewFile?: (file: ChatFile) => void;\n  onDownloadFile?: (file: ChatFile) => void;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Message<TApp = unknown>({\n  message,\n  renderers,\n  components,\n  appContext,\n  actions,\n  state,\n  meta,\n  grouped = false,\n  showAvatar = true,\n  showUserAvatar = false,\n  showTimestamp = false,\n  persistentToolbar = false,\n  onPreviewFile,\n  onDownloadFile,\n  className,\n  ref,\n}: MessageProps<TApp>) {\n  const strings = useUiStrings().chat.message;\n  const user = message.role === \"user\";\n  const system = message.role === \"system\";\n\n  const context: RenderContext<TApp> = {\n    message,\n    streaming: message.streaming ?? false,\n    app: appContext as TApp,\n  };\n\n  const body = (\n    <>\n      {message.attachments && message.attachments.length > 0 && (\n        <AttachmentList\n          files={message.attachments}\n          layout={user ? \"tile\" : \"row\"}\n          onPreview={onPreviewFile}\n          onDownload={onDownloadFile}\n          className=\"mb-2\"\n        />\n      )}\n      {message.parts.map((part, index) => (\n        <MessagePartView\n          key={index}\n          part={part}\n          context={context}\n          renderers={renderers}\n          components={components}\n          onPreviewFile={onPreviewFile}\n          onDownloadFile={onDownloadFile}\n        />\n      ))}\n      {message.error && (\n        <p className=\"mt-1.5 flex items-start gap-1.5 text-xs text-danger-text\">\n          <Icon name=\"circle-alert\" size=\"xs\" className=\"mt-px shrink-0\" />\n          {message.error}\n        </p>\n      )}\n      {/* A caret while the turn is still arriving. Placed after the parts so it\n          trails the text rather than sitting in a fixed corner — the eye\n          follows it and knows where the next word lands. */}\n      {message.streaming && message.parts.length > 0 && (\n        <span\n          aria-hidden\n          className=\"ml-0.5 inline-block h-3.5 w-[2px] translate-y-0.5 animate-pulse rounded-full bg-accent align-baseline\"\n        />\n      )}\n    </>\n  );\n\n  if (system) {\n    return (\n      <div\n        role=\"note\"\n        className={cn(\n          \"mx-auto my-1 flex max-w-prose items-center gap-2 rounded-md border border-border-subtle bg-surface-raised px-3 py-1.5 text-2xs text-tertiary\",\n          className,\n        )}\n      >\n        <Icon name=\"info\" size=\"xs\" className=\"shrink-0\" />\n        <div className=\"min-w-0 flex-1\">{body}</div>\n      </div>\n    );\n  }\n\n  const copyText = message.parts\n    .map((part) => (part.type === \"text\" ? part.text : part.type === \"code\" ? part.code : \"\"))\n    .filter(Boolean)\n    .join(\"\\n\\n\");\n  /* A person's avatar is `showUserAvatar` alone, every other role's is `showAvatar`. */\n  const showMessageAvatar = !grouped && (user ? showUserAvatar : showAvatar);\n  const name = grouped ? undefined : message.author?.name;\n  const metaBar = {\n    message,\n    time: showTimestamp ? message.createdAt : undefined,\n    copyText,\n    actions,\n    state,\n    meta,\n    persistent: persistentToolbar,\n  };\n  /* DXUI-19: ONE rule. The header line holds the avatar (if any), the name (if any) and the meta bar (if any), and is\n     drawn whenever any of them will render once the turn is finished, and always while it streams: a streaming turn\n     holds the line (its hidden bar's height reserved) whatever it holds so far, so the body never jumps DOWN mid-read\n     (the copy text, and with it the bar, only appears when the first text arrives). A finished turn with nothing in\n     its bar drops the empty line once, after it is done: the body moves up, never down. The body never shares its row\n     with the meta bar, so it stays full width. With neither avatar nor name (a grouped turn) the bar is the line's\n     only content and sits on the author's side: left for an agent, right for a person (a person's line is\n     `flex-row-reverse`), so an agent's time never reads as the person's. */\n  const hasHeader = showMessageAvatar || Boolean(name) || Boolean(message.streaming) || metaBarWhenFinished(metaBar);\n\n  /* No avatar column, so the body fills the width it is given. A person's turn mirrors the header line (avatar at\n     the right edge), so a person's bubble ends where their avatar does. `items-center` centres the avatar and the\n     name on each other; `min-h-6` / the coarse-pointer `min-h-11` are the bar's height (24px buttons, 44px on touch),\n     so the line does not change height when a streaming turn (no bar yet) finishes. */\n  return (\n    <article\n      ref={ref}\n      data-message={message.id}\n      data-role={message.role}\n      className={cn(\"group/message flex w-full flex-col\", grouped ? \"mt-1\" : \"mt-5 first:mt-0\", className)}\n    >\n      {hasHeader && (\n        <header\n          className={cn(\n            \"flex min-h-6 min-w-0 items-center gap-2 [@media(pointer:coarse)]:min-h-11\",\n            grouped ? \"mb-0.5\" : \"mb-1.5\",\n            user && \"flex-row-reverse\",\n          )}\n        >\n          {showMessageAvatar && (\n            <Avatar\n              size=\"sm\"\n              name={message.author?.name ?? strings.assistant}\n              src={message.author?.avatarUrl}\n              fallback={message.author?.icon ? <Icon name={message.author.icon} size=\"sm\" /> : undefined}\n            />\n          )}\n          {name && <span className=\"min-w-0 truncate text-xs font-semibold text-secondary\">{name}</span>}\n          <MessageMetaBar {...metaBar} />\n        </header>\n      )}\n\n      <div className={cn(\"flex min-w-0\", user && \"justify-end\")}>\n        {/* `flex-1` for a non-user turn: the body is a flex item, and without it a `w-full` child (tool call, table,\n            code block) would shrink to its widest sibling instead of spanning the row. */}\n        <div\n          className={cn(\n            \"min-w-0 max-w-full\",\n            user ? \"rounded-2xl rounded-tr-md bg-accent-subtle px-3.5 py-2.5 text-sm text-primary\" : \"flex-1\",\n          )}\n        >\n          {body}\n        </div>\n      </div>\n    </article>\n  );\n}\n\n/** How long the copy button shows \"Copied\" before it goes back to \"Copy\". */\nconst COPIED_RESET_MS = 1600;\n\n/** What `MessageMetaBar` is given, and what decides whether it draws anything. */\ninterface MessageMetaBarProps {\n  message: ChatMessage;\n  /** The age to show, when the caller asked for one. */\n  time?: ChatMessage[\"createdAt\"];\n  copyText: string;\n  actions?: MessageAction[];\n  state?: ReactNode;\n  /** DXUI-24: the `meta` prop. */\n  meta?: ReactNode;\n  persistent: boolean;\n}\n\n/** DXUI-19: a `state` or `meta` counts only as a value that renders, so `cond && <Mark />` (false) draws no empty slot. */\nconst rendersNode = (state: ReactNode) => state !== null && state !== undefined && typeof state !== \"boolean\";\n\n/** Whether there is anything to put in the time, copy and `actions` group once the turn is finished. */\nconst toolbarHasContent = ({ time, copyText, actions }: MessageMetaBarProps) =>\n  Boolean(time) || copyText.length > 0 || (actions?.length ?? 0) > 0;\n\n/** The group is absent while the turn streams. */\nconst toolbarRenders = (props: MessageMetaBarProps) => !props.message.streaming && toolbarHasContent(props);\n\nconst metaBarRenders = (props: MessageMetaBarProps) => toolbarRenders(props) || rendersNode(props.state) || rendersNode(props.meta);\n\n/** What the bar will hold once the turn is finished: decides whether the header line exists, so streaming never changes it. */\nconst metaBarWhenFinished = (props: MessageMetaBarProps) => toolbarHasContent(props) || rendersNode(props.state) || rendersNode(props.meta);\n\n/**\n * The bar of a message, on the header line, in this order: the time, the caller's `meta`, copy, `actions`, the\n * caller's `state`.\n *\n * It carries no chrome of its own (no background, ring or border), so nothing is left visible while the toolbar is\n * faded out. Time, copy and `actions` reveal by OPACITY ONLY, never height, margin or display: a layout change under\n * the pointer is the jitter SG-953 removed. A `(hover: hover)` gate keeps a touch device (no hover to reveal from)\n * at full opacity; a mouse fades until it hovers or focuses in. They are hidden while the turn streams. The `meta`\n * and the `state` never fade.\n */\nfunction MessageMetaBar(props: MessageMetaBarProps) {\n  const { message, time, copyText, actions, state, meta, persistent } = props;\n  const user = message.role === \"user\";\n  const strings = useUiStrings().chat.message;\n  const [copied, setCopied] = useState(false);\n  const hasToolbar = toolbarRenders(props);\n  if (!metaBarRenders(props)) return null;\n  /* DXUI-24: the time and the copy group fade separately, so the never-fading `meta` can sit between them. */\n  const fade = cn(\n    \"flex items-center gap-0.5\",\n    user && \"flex-row-reverse\",\n    \"opacity-100 transition-[var(--tx-colors),opacity] duration-(--dur-fast)\",\n    !persistent && [\n      \"[@media(hover:hover)]:opacity-0\",\n      \"[@media(hover:hover)]:group-hover/message:opacity-100\",\n      \"[@media(hover:hover)]:group-focus-within/message:opacity-100\",\n    ],\n  );\n\n  return (\n    <div data-testid=\"message-meta\" className={cn(\"flex shrink-0 items-center gap-0.5 text-2xs text-tertiary\", user && \"flex-row-reverse\")}>\n      {hasToolbar && time && (\n        <div data-testid=\"message-time\" className={fade}>\n          <RelativeTime at={time} className=\"px-1\" />\n        </div>\n      )}\n      {rendersNode(meta) && (\n        <span data-testid=\"message-meta-text\" className=\"inline-flex shrink-0 items-center px-1\">\n          {meta}\n        </span>\n      )}\n      {hasToolbar && (copyText.length > 0 || (actions?.length ?? 0) > 0) && (\n        <div data-testid=\"message-toolbar\" className={fade}>\n          {copyText.length > 0 && (\n            <MessageActionButton\n              action={{\n                id: \"copy\",\n                icon: copied ? \"check\" : \"copy\",\n                label: copied ? strings.copied : strings.copy,\n                onClick: () => {\n                  copyToClipboard(copyText).then(\n                    () => {\n                      setCopied(true);\n                      window.setTimeout(() => setCopied(false), COPIED_RESET_MS);\n                    },\n                    () => undefined,\n                  );\n                },\n              }}\n              message={message}\n            />\n          )}\n          {actions?.map((action) => (\n            <MessageActionButton key={action.id} action={action} message={message} />\n          ))}\n        </div>\n      )}\n      {rendersNode(state) && (\n        <span data-testid=\"message-state\" className=\"inline-flex shrink-0 items-center\">\n          {state}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction MessageActionButton({\n  action,\n  message,\n}: {\n  action: MessageAction;\n  message: ChatMessage;\n}) {\n  return (\n    <Tooltip content={action.label}>\n      <button\n        type=\"button\"\n        onClick={() => action.onClick(message)}\n        aria-label={action.label}\n        aria-pressed={action.active}\n        className={cn(\n          \"dx-tap grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-none\",\n          \"transition-colors duration-(--dur-fast)\",\n          \"hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-focus-ring\",\n          action.active ? \"text-accent-text\" : \"text-tertiary hover:text-primary\",\n        )}\n      >\n        <Icon name={action.icon} size=\"xs\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n"],"names":["TOOL_ICONS","ToolCall","part","defaultOpen","className","strings","useUiStrings","status","added","removed","header","jsxs","jsx","Icon","cn","ChatStatus","Collapsible","Reasoning","text","label","streaming","Fragment","UnrenderablePart","reason","name","MessagePartView","context","renderers","components","onPreviewFile","onDownloadFile","StreamingMarkdown","CodeBlock","Attachment","render","unknown","Message","message","appContext","actions","state","meta","grouped","showAvatar","showUserAvatar","showTimestamp","persistentToolbar","ref","user","system","body","AttachmentList","index","copyText","showMessageAvatar","metaBar","hasHeader","metaBarWhenFinished","Avatar","MessageMetaBar","COPIED_RESET_MS","rendersNode","toolbarHasContent","time","toolbarRenders","props","metaBarRenders","persistent","copied","setCopied","useState","hasToolbar","fade","RelativeTime","MessageActionButton","copyToClipboard","action","Tooltip"],"mappings":"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"}

package/dist/components/chat/MessageScroller.js

@@ -0,0 +1,104 @@
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { useRef as u, useState as f, useCallback as d, useLayoutEffect as L, useEffect as M } from "react";
+import { cn as x } from "../../lib/cn.js";
+import { Icon as O } from "../Icon.js";
+import { useUiStrings as R } from "../../lib/i18n/provider.js";
+const h = 1;
+function _({
+  children: w,
+  threshold: m = 64,
+  jumpLabel: y,
+  fade: b = !0,
+  anchor: r = "bottom",
+  className: T,
+  ref: l
+}) {
+  const H = R().chat.messageScroller, t = u(null), v = u(null), c = u(r === "bottom"), [N, p] = f(!1), [E, S] = f(!1), [j, B] = f(!1), s = d(() => {
+    const e = t.current;
+    e && (S(e.scrollTop > h), B(e.scrollHeight - e.scrollTop - e.clientHeight > h));
+  }, []), z = d((e = "smooth") => {
+    const o = t.current;
+    o && (o.scrollTo({ top: o.scrollHeight, behavior: e }), c.current = !0, p(!1));
+  }, []), I = d(() => {
+    const e = t.current;
+    if (!e) return;
+    const n = e.scrollHeight - e.scrollTop - e.clientHeight <= m;
+    c.current = r === "bottom" && n, p(r === "bottom" && !n), s();
+  }, [m, r, s]);
+  return L(() => {
+    const e = t.current;
+    e && (e.scrollTop = r === "bottom" ? e.scrollHeight : 0), s();
+  }, [r, s]), M(() => {
+    const e = v.current, o = t.current;
+    if (!e || typeof ResizeObserver > "u") return;
+    const n = new ResizeObserver(() => {
+      if (c.current) {
+        const a = t.current;
+        a && (a.scrollTop = a.scrollHeight);
+      }
+      s();
+    });
+    return n.observe(e), o && n.observe(o), () => n.disconnect();
+  }, [s]), /* @__PURE__ */ g("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        ref: (e) => {
+          t.current = e, typeof l == "function" ? l(e) : l && (l.current = e);
+        },
+        onScroll: I,
+        tabIndex: 0,
+        role: "log",
+        "aria-live": "polite",
+        "aria-relevant": "additions text",
+        className: x(
+          "min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none",
+          "focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset",
+          T
+        ),
+        children: /* @__PURE__ */ i("div", { ref: v, children: w })
+      }
+    ),
+    b && E && /* @__PURE__ */ i(
+      "div",
+      {
+        "aria-hidden": !0,
+        "data-scroll-shadow": "top",
+        className: "pointer-events-none absolute inset-x-0 top-0 h-6 bg-linear-to-b from-canvas to-transparent"
+      }
+    ),
+    b && j && /* @__PURE__ */ i(
+      "div",
+      {
+        "aria-hidden": !0,
+        "data-scroll-shadow": "bottom",
+        className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-canvas to-transparent"
+      }
+    ),
+    N && /* @__PURE__ */ g(
+      "button",
+      {
+        type: "button",
+        onClick: () => z(),
+        className: x(
+          "dx-tap absolute bottom-3 left-1/2 flex -translate-x-1/2 cursor-pointer items-center justify-center gap-1.5",
+          /* `dx-ground-overlay`: this pill paints itself on the overlay
+             surface, which on dark sits ABOVE the neutral hover fill — so
+             without the scope its hover reads as a darkening, not a lift. */
+          "dx-ground-overlay animate-rise-in rounded-full border border-border bg-surface-overlay px-3 py-1.5",
+          "text-2xs font-medium text-secondary shadow-md outline-none",
+          "transition-colors duration-(--dur-fast) hover:bg-surface-hover hover:text-primary",
+          "focus-visible:ring-2 focus-visible:ring-focus-ring"
+        ),
+        children: [
+          /* @__PURE__ */ i(O, { name: "arrow-down", size: "xs" }),
+          y ?? H.jumpToLatest
+        ]
+      }
+    )
+  ] });
+}
+export {
+  _ as MessageScroller
+};
+//# sourceMappingURL=MessageScroller.js.map

package/dist/components/chat/MessageScroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageScroller.js","sources":["../../../src/components/chat/MessageScroller.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { Icon } from \"../Icon\";\n\n/* ============================================================================\n   MESSAGE SCROLLER\n   The scroll container for a conversation. It owns scrolling behaviour and\n   nothing else — no messages, no transport, no state.\n\n   STICK TO BOTTOM, BUT YIELD. New content pins the view to the newest message,\n   UNLESS the reader has scrolled up — at which point the view stays exactly\n   where they put it and a button offers to return. Auto-scrolling someone who\n   is reading history is the single most hated behaviour in this class of UI,\n   and it is what happens when \"scroll on new content\" is implemented without\n   the second half.\n\n   RESIZE OBSERVER, NOT A CONTENT DEPENDENCY. A streaming message grows without\n   any new element being added and without firing a scroll event, so watching\n   the children changes nothing. Watching the content's SIZE catches every\n   growth: appended tokens, an expanded tool call, an image that just decoded.\n   ========================================================================= */\n\n/* DX-5438: scrollTop is fractional on a scaled display, so a view resting at an edge can read a fraction of a pixel off it; within this distance counts as at the edge. */\nconst EDGE_EPSILON_PX = 1;\n\nexport interface MessageScrollerProps {\n  children: ReactNode;\n  /** Distance from the bottom, in px, still counted as \"at the bottom\". */\n  threshold?: number;\n  /** Label for the return-to-newest button. @default the built-in \"Jump to latest\" */\n  jumpLabel?: string;\n  /** Fades content at an edge only while more content lies past it (DX-5438): the top fade once scrolled down, the bottom fade while there is more below. */\n  fade?: boolean;\n  /**\n   * Where the newest content is (DX-5438). `bottom` (default) is a chat: the view starts at, and follows, the bottom, with a return button once the reader\n   * scrolls up. `top` is a newest-first list: the view starts at the top and never moves by itself. Set once per mount: to change it, remount the scroller (a `key`).\n   */\n  anchor?: \"bottom\" | \"top\";\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MessageScroller({\n  children,\n  threshold = 64,\n  jumpLabel,\n  fade = true,\n  anchor = \"bottom\",\n  className,\n  ref,\n}: MessageScrollerProps) {\n  const strings = useUiStrings().chat.messageScroller;\n  const viewport = useRef<HTMLDivElement | null>(null);\n  const content = useRef<HTMLDivElement | null>(null);\n  const pinned = useRef(anchor === \"bottom\");\n  const [detached, setDetached] = useState(false);\n  const [moreAbove, setMoreAbove] = useState(false);\n  const [moreBelow, setMoreBelow] = useState(false);\n\n  /* DX-5438: the edge fades follow what is really scrollable, re-read on scroll and on any size change. */\n  const measureEdges = useCallback(() => {\n    const node = viewport.current;\n    if (!node) return;\n    setMoreAbove(node.scrollTop > EDGE_EPSILON_PX);\n    setMoreBelow(node.scrollHeight - node.scrollTop - node.clientHeight > EDGE_EPSILON_PX);\n  }, []);\n\n  const scrollToBottom = useCallback((behavior: ScrollBehavior = \"smooth\") => {\n    const node = viewport.current;\n    if (!node) return;\n    node.scrollTo({ top: node.scrollHeight, behavior });\n    pinned.current = true;\n    setDetached(false);\n  }, []);\n\n  const onScroll = useCallback(() => {\n    const node = viewport.current;\n    if (!node) return;\n    const distance = node.scrollHeight - node.scrollTop - node.clientHeight;\n    const atBottom = distance <= threshold;\n    pinned.current = anchor === \"bottom\" && atBottom;\n    setDetached(anchor === \"bottom\" && !atBottom);\n    measureEdges();\n  }, [threshold, anchor, measureEdges]);\n\n  /* Start at the newest end with no animation — the bottom for a chat, the top for a newest-first list (`anchor`). A thread that opens\n     at the wrong end and then slides is a thread that shows you the wrong end first. */\n  useLayoutEffect(() => {\n    const node = viewport.current;\n    if (node) node.scrollTop = anchor === \"bottom\" ? node.scrollHeight : 0;\n    measureEdges();\n  }, [anchor, measureEdges]);\n\n  useEffect(() => {\n    const node = content.current;\n    const frame = viewport.current;\n    if (!node || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      if (pinned.current) {\n        /* `auto`, not `smooth`: during streaming this fires many times a\n           second, and queued smooth scrolls fight each other into a visible\n           stutter. Smooth is right for the deliberate jump, not for tracking. */\n        const viewportNode = viewport.current;\n        if (viewportNode) viewportNode.scrollTop = viewportNode.scrollHeight;\n      }\n      measureEdges();\n    });\n    observer.observe(node);\n    if (frame) observer.observe(frame);\n    return () => observer.disconnect();\n  }, [measureEdges]);\n\n  return (\n    <div className=\"relative flex min-h-0 flex-1 flex-col\">\n      <div\n        ref={(node) => {\n          viewport.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        onScroll={onScroll}\n        tabIndex={0}\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        className={cn(\n          \"min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none\",\n          \"focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset\",\n          className,\n        )}\n      >\n        <div ref={content}>{children}</div>\n      </div>\n\n      {fade && moreAbove && (\n        <div\n          aria-hidden\n          data-scroll-shadow=\"top\"\n          className=\"pointer-events-none absolute inset-x-0 top-0 h-6 bg-linear-to-b from-canvas to-transparent\"\n        />\n      )}\n      {fade && moreBelow && (\n        <div\n          aria-hidden\n          data-scroll-shadow=\"bottom\"\n          className=\"pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-canvas to-transparent\"\n        />\n      )}\n\n      {/* Only rendered when detached, so it cannot be tabbed to while it is\n          invisible — the failure mode of animating opacity on a live button. */}\n      {detached && (\n        <button\n          type=\"button\"\n          onClick={() => scrollToBottom()}\n          className={cn(\n            \"dx-tap absolute bottom-3 left-1/2 flex -translate-x-1/2 cursor-pointer items-center justify-center gap-1.5\",\n            /* `dx-ground-overlay`: this pill paints itself on the overlay\n               surface, which on dark sits ABOVE the neutral hover fill — so\n               without the scope its hover reads as a darkening, not a lift. */\n            \"dx-ground-overlay animate-rise-in rounded-full border border-border bg-surface-overlay px-3 py-1.5\",\n            \"text-2xs font-medium text-secondary shadow-md outline-none\",\n            \"transition-colors duration-(--dur-fast) hover:bg-surface-hover hover:text-primary\",\n            \"focus-visible:ring-2 focus-visible:ring-focus-ring\",\n          )}\n        >\n          <Icon name=\"arrow-down\" size=\"xs\" />\n          {jumpLabel ?? strings.jumpToLatest}\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["EDGE_EPSILON_PX","MessageScroller","children","threshold","jumpLabel","fade","anchor","className","ref","strings","useUiStrings","viewport","useRef","content","pinned","detached","setDetached","useState","moreAbove","setMoreAbove","moreBelow","setMoreBelow","measureEdges","useCallback","node","scrollToBottom","behavior","onScroll","atBottom","useLayoutEffect","useEffect","frame","observer","viewportNode","jsxs","jsx","cn","Icon"],"mappings":"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"}

package/dist/components/chat/ModelSelector.js

@@ -0,0 +1,156 @@
+import { jsxs as s, jsx as t, Fragment as w } from "react/jsx-runtime";
+import { useState as C, useEffect as v } from "react";
+import { cn as x } from "../../lib/cn.js";
+import { Icon as p } from "../Icon.js";
+import { Menu as E, MenuGroup as M, MenuItem as u, MenuSeparator as I } from "../Menu.js";
+import { Switch as L } from "../Choice.js";
+import { useUiStrings as j } from "../../lib/i18n/provider.js";
+function H({
+  models: r,
+  value: a,
+  onValueChange: c,
+  options: i,
+  numericShortcuts: o = !0,
+  side: z = "top",
+  align: D = "start",
+  disabled: b = !1,
+  className: K
+}) {
+  const d = j().chat.modelSelector, [l, g] = C(!1), [O, y] = C(!1), m = r.filter((e) => !e.secondary), k = r.filter((e) => e.secondary), N = r.find((e) => e.id === a);
+  return v(() => {
+    if (!l || !o) return;
+    const e = (n) => {
+      if (n.metaKey || n.ctrlKey || n.altKey) return;
+      const f = Number(n.key) - 1, h = m[f];
+      !Number.isInteger(f) || f < 0 || !h || h.disabled || (n.preventDefault(), c(h.id), g(!1));
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [l, o, m, c]), v(() => {
+    l || y(!1);
+  }, [l]), /* @__PURE__ */ s(
+    E,
+    {
+      open: l,
+      onOpenChange: g,
+      side: z,
+      align: D,
+      className: x("min-w-60", K),
+      trigger: /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          disabled: b,
+          "aria-label": d.triggerLabel(N?.name ?? a),
+          className: x(
+            /* `whitespace-nowrap` because a model NAME is one token even when it
+               contains a space: squeezed into a narrow composer, "Opus 5" broke
+               across two lines and made the whole toolbar row twice as tall. A
+               name that does not fit should shorten the row's other content, or
+               overflow — never wrap mid-name. */
+            "dx-tap inline-flex shrink-0 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium",
+            "text-secondary transition-colors duration-(--dur-fast)",
+            "hover:bg-surface-hover hover:text-primary",
+            "outline-none focus-visible:ring-2 focus-visible:ring-focus-ring",
+            b && "pointer-events-none opacity-50"
+          ),
+          children: [
+            N?.name ?? a,
+            /* @__PURE__ */ t(p, { name: "chevrons-up-down", size: "xs", className: "text-tertiary" })
+          ]
+        }
+      ),
+      children: [
+        /* @__PURE__ */ t(M, { label: d.models, children: m.map((e, n) => /* @__PURE__ */ t(
+          S,
+          {
+            model: e,
+            selected: e.id === a,
+            shortcut: o && n < 9 ? String(n + 1) : void 0,
+            onSelect: () => c(e.id)
+          },
+          e.id
+        )) }),
+        k.length > 0 && /* @__PURE__ */ t(w, { children: O ? /* @__PURE__ */ t(M, { label: d.moreModels, children: k.map((e) => /* @__PURE__ */ t(
+          S,
+          {
+            model: e,
+            selected: e.id === a,
+            onSelect: () => c(e.id)
+          },
+          e.id
+        )) }) : /* @__PURE__ */ s(
+          u,
+          {
+            closeOnClick: !1,
+            onClick: (e) => {
+              e.preventDefault(), y(!0);
+            },
+            children: [
+              /* @__PURE__ */ t("span", { className: "flex-1", children: d.moreModels }),
+              /* @__PURE__ */ t(p, { name: "chevron-right", size: "xs", className: "text-tertiary" })
+            ]
+          }
+        ) }),
+        i && i.length > 0 && /* @__PURE__ */ s(w, { children: [
+          /* @__PURE__ */ t(I, {}),
+          i.map((e) => /* @__PURE__ */ s(
+            u,
+            {
+              closeOnClick: !1,
+              disabled: e.disabled,
+              onClick: (n) => {
+                n.preventDefault(), e.onCheckedChange(!e.checked);
+              },
+              children: [
+                /* @__PURE__ */ s("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                  /* @__PURE__ */ t("span", { className: "truncate", children: e.label }),
+                  e.description && /* @__PURE__ */ t("span", { className: "truncate text-2xs text-tertiary", children: e.description })
+                ] }),
+                /* @__PURE__ */ t(
+                  L,
+                  {
+                    checked: e.checked,
+                    onCheckedChange: e.onCheckedChange,
+                    disabled: e.disabled,
+                    size: "sm",
+                    "aria-label": typeof e.label == "string" ? e.label : e.id
+                  }
+                )
+              ]
+            },
+            e.id
+          ))
+        ] })
+      ]
+    }
+  );
+}
+function S({
+  model: r,
+  selected: a,
+  shortcut: c,
+  onSelect: i
+}) {
+  return /* @__PURE__ */ s(u, { disabled: r.disabled, selected: a, onClick: i, children: [
+    /* @__PURE__ */ t(
+      p,
+      {
+        name: "check",
+        size: "xs",
+        className: x("shrink-0 text-control-text", !a && "invisible")
+      }
+    ),
+    /* @__PURE__ */ s("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ s("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ t("span", { className: "truncate", children: r.name }),
+        r.badge && /* @__PURE__ */ t("span", { className: "rounded-sm bg-accent-subtle px-1 py-px text-2xs font-semibold text-accent-text", children: r.badge })
+      ] }),
+      r.description && /* @__PURE__ */ t("span", { className: "truncate text-2xs text-tertiary", children: r.description })
+    ] }),
+    c && /* @__PURE__ */ t("kbd", { className: "font-mono text-2xs text-tertiary", children: c })
+  ] });
+}
+export {
+  H as ModelSelector
+};
+//# sourceMappingURL=ModelSelector.js.map

package/dist/components/chat/ModelSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelSelector.js","sources":["../../../src/components/chat/ModelSelector.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { Icon } from \"../Icon\";\nimport { Menu, MenuGroup, MenuItem, MenuSeparator } from \"../Menu\";\nimport { Switch } from \"../Choice\";\n\n/* ============================================================================\n   MODEL SELECTOR\n   Which model answers, plus whatever per-model switches ride alongside it.\n\n   A MENU, NOT A SELECT. A native select would be smaller code and worse: these\n   entries carry a description, a badge and a positional shortcut, and a select\n   can hold exactly one string per option. The list is also short and\n   consequential — the kind of choice that deserves to be read, not scrolled.\n   ========================================================================= */\n\nexport interface ChatModel {\n  id: string;\n  name: string;\n  /** One line under the name — what this model is FOR. */\n  description?: string;\n  /** \"New\", \"Fastest\", a context size — anything that fits in a chip. */\n  badge?: ReactNode;\n  disabled?: boolean;\n  /**\n   * Keeps the model out of the main list until \"More models\" is opened.\n   *\n   * The primary list should be short enough to read at a glance; everything\n   * an experienced user occasionally reaches for lives one click deeper. A\n   * flat list of fifteen models makes the three that matter harder to find.\n   */\n  secondary?: boolean;\n}\n\nexport interface ModelSelectorProps {\n  models: ChatModel[];\n  value: string;\n  onValueChange: (id: string) => void;\n  /** Extra switches under a separator — fast mode, thinking, whatever applies. */\n  options?: Array<{\n    id: string;\n    label: ReactNode;\n    description?: ReactNode;\n    checked: boolean;\n    onCheckedChange: (checked: boolean) => void;\n    disabled?: boolean;\n  }>;\n  /**\n   * Number keys pick from the primary list while the menu is open.\n   *\n   * Only while OPEN — a bare digit is a legitimate character everywhere else,\n   * and a chat's composer is the last place to steal one.\n   */\n  numericShortcuts?: boolean;\n  side?: \"top\" | \"bottom\";\n  align?: \"start\" | \"center\" | \"end\";\n  disabled?: boolean;\n  className?: string;\n}\n\nexport function ModelSelector({\n  models,\n  value,\n  onValueChange,\n  options,\n  numericShortcuts = true,\n  side = \"top\",\n  align = \"start\",\n  disabled = false,\n  className,\n}: ModelSelectorProps) {\n  const strings = useUiStrings().chat.modelSelector;\n  const [open, setOpen] = useState(false);\n  const [showAll, setShowAll] = useState(false);\n\n  const primary = models.filter((model) => !model.secondary);\n  const secondary = models.filter((model) => model.secondary);\n  const current = models.find((model) => model.id === value);\n\n  useEffect(() => {\n    if (!open || !numericShortcuts) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.metaKey || event.ctrlKey || event.altKey) return;\n      const index = Number(event.key) - 1;\n      const model = primary[index];\n      if (!Number.isInteger(index) || index < 0 || !model || model.disabled) return;\n      event.preventDefault();\n      onValueChange(model.id);\n      setOpen(false);\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open, numericShortcuts, primary, onValueChange]);\n\n  /* Collapse the extra models when the menu closes. Leaving it expanded means\n     the next open shows a different list than the one before it, which makes\n     the shortcut positions move under people who had learned them. */\n  useEffect(() => {\n    if (!open) setShowAll(false);\n  }, [open]);\n\n  return (\n    <Menu\n      open={open}\n      onOpenChange={setOpen}\n      side={side}\n      align={align}\n      className={cn(\"min-w-60\", className)}\n      trigger={\n        <button\n          type=\"button\"\n          disabled={disabled}\n          aria-label={strings.triggerLabel(current?.name ?? value)}\n          className={cn(\n            /* `whitespace-nowrap` because a model NAME is one token even when it\n               contains a space: squeezed into a narrow composer, \"Opus 5\" broke\n               across two lines and made the whole toolbar row twice as tall. A\n               name that does not fit should shorten the row's other content, or\n               overflow — never wrap mid-name. */\n            \"dx-tap inline-flex shrink-0 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium\",\n            \"text-secondary transition-colors duration-(--dur-fast)\",\n            \"hover:bg-surface-hover hover:text-primary\",\n            \"outline-none focus-visible:ring-2 focus-visible:ring-focus-ring\",\n            disabled && \"pointer-events-none opacity-50\",\n          )}\n        >\n          {current?.name ?? value}\n          <Icon name=\"chevrons-up-down\" size=\"xs\" className=\"text-tertiary\" />\n        </button>\n      }\n    >\n      <MenuGroup label={strings.models}>\n        {primary.map((model, index) => (\n          <ModelRow\n            key={model.id}\n            model={model}\n            selected={model.id === value}\n            shortcut={numericShortcuts && index < 9 ? String(index + 1) : undefined}\n            onSelect={() => onValueChange(model.id)}\n          />\n        ))}\n      </MenuGroup>\n\n      {secondary.length > 0 && (\n        <>\n          {showAll ? (\n            <MenuGroup label={strings.moreModels}>\n              {secondary.map((model) => (\n                <ModelRow\n                  key={model.id}\n                  model={model}\n                  selected={model.id === value}\n                  onSelect={() => onValueChange(model.id)}\n                />\n              ))}\n            </MenuGroup>\n          ) : (\n            <MenuItem\n              closeOnClick={false}\n              onClick={(event) => {\n                event.preventDefault();\n                setShowAll(true);\n              }}\n            >\n              <span className=\"flex-1\">{strings.moreModels}</span>\n              <Icon name=\"chevron-right\" size=\"xs\" className=\"text-tertiary\" />\n            </MenuItem>\n          )}\n        </>\n      )}\n\n      {options && options.length > 0 && (\n        <>\n          <MenuSeparator />\n          {options.map((option) => (\n            <MenuItem\n              key={option.id}\n              closeOnClick={false}\n              disabled={option.disabled}\n              onClick={(event) => {\n                /* The row toggles, and the switch inside it is the indicator.\n                   Without this the only hit target is a 44px control in a\n                   240px row, which reads as broken every time you miss. */\n                event.preventDefault();\n                option.onCheckedChange(!option.checked);\n              }}\n            >\n              <span className=\"flex min-w-0 flex-1 flex-col\">\n                <span className=\"truncate\">{option.label}</span>\n                {option.description && (\n                  <span className=\"truncate text-2xs text-tertiary\">{option.description}</span>\n                )}\n              </span>\n              <Switch\n                checked={option.checked}\n                onCheckedChange={option.onCheckedChange}\n                disabled={option.disabled}\n                size=\"sm\"\n                aria-label={typeof option.label === \"string\" ? option.label : option.id}\n              />\n            </MenuItem>\n          ))}\n        </>\n      )}\n    </Menu>\n  );\n}\n\nfunction ModelRow({\n  model,\n  selected,\n  shortcut,\n  onSelect,\n}: {\n  model: ChatModel;\n  selected: boolean;\n  shortcut?: string;\n  onSelect: () => void;\n}) {\n  return (\n    <MenuItem disabled={model.disabled} selected={selected} onClick={onSelect}>\n      {/* The tick occupies its slot whether or not it is drawn, so selecting a\n          different model does not shift every name sideways. */}\n      <Icon\n        name=\"check\"\n        size=\"xs\"\n        className={cn(\"shrink-0 text-control-text\", !selected && \"invisible\")}\n      />\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span className=\"flex items-center gap-1.5\">\n          <span className=\"truncate\">{model.name}</span>\n          {model.badge && (\n            <span className=\"rounded-sm bg-accent-subtle px-1 py-px text-2xs font-semibold text-accent-text\">\n              {model.badge}\n            </span>\n          )}\n        </span>\n        {model.description && (\n          <span className=\"truncate text-2xs text-tertiary\">{model.description}</span>\n        )}\n      </span>\n      {shortcut && <kbd className=\"font-mono text-2xs text-tertiary\">{shortcut}</kbd>}\n    </MenuItem>\n  );\n}\n"],"names":["ModelSelector","models","value","onValueChange","options","numericShortcuts","side","align","disabled","className","strings","useUiStrings","open","setOpen","useState","showAll","setShowAll","primary","model","secondary","current","useEffect","onKeyDown","event","index","jsxs","Menu","cn","Icon","jsx","MenuGroup","ModelRow","Fragment","MenuItem","MenuSeparator","option","Switch","selected","shortcut","onSelect"],"mappings":"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"}

package/dist/components/chat/StreamingMarkdown.js

@@ -0,0 +1,42 @@
+import { jsx as h } from "react/jsx-runtime";
+import { memo as m, useMemo as g } from "react";
+import { Markdown as f } from "../Markdown.js";
+import { RE_FENCE as i } from "../../lib/syntax/markdown/parse.js";
+function p(c) {
+  let n = c;
+  (n.match(/`/g) ?? []).length % 2 === 1 && (n += "`"), (n.match(/\*\*/g) ?? []).length % 2 === 1 && (n += "**");
+  const o = (n.match(/\[/g) ?? []).length - (n.match(/\]/g) ?? []).length;
+  return o > 0 && (n += "]".repeat(o)), n;
+}
+function u(c) {
+  const n = c.split(`
+`), e = [];
+  let t = 0;
+  for (; t < n.length; ) {
+    const o = i.exec(n[t]);
+    if (!o) {
+      const a = t;
+      for (; t < n.length && !i.test(n[t]); ) t++;
+      e.push(p(n.slice(a, t).join(`
+`)));
+      continue;
+    }
+    const s = o[2][0] === "~" ? "~" : "`", l = new RegExp(`^ {0,3}${s}{${o[2].length},}[ \\t]*$`), r = t;
+    for (t++; t < n.length && !l.test(n[t]); ) t++;
+    t < n.length && t++, e.push(n.slice(r, t).join(`
+`));
+  }
+  return e.join(`
+`);
+}
+const M = m(function({
+  children: n,
+  ...e
+}) {
+  const t = g(() => u(n), [n]);
+  return /* @__PURE__ */ h(f, { ...e, children: t });
+});
+export {
+  M as StreamingMarkdown
+};
+//# sourceMappingURL=StreamingMarkdown.js.map

package/dist/components/chat/StreamingMarkdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamingMarkdown.js","sources":["../../../src/components/chat/StreamingMarkdown.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { Markdown, type MarkdownProps } from \"../Markdown\";\nimport { RE_FENCE } from \"../../lib/syntax/markdown\";\n\n/* ============================================================================\n   STREAMING MARKDOWN\n   Prose that is still arriving, rendered through the SAME parser and renderer\n   as every other markdown string in this package — this file adds exactly one\n   thing on top of `Markdown`: closing what is open before the parse happens.\n\n   THE PROBLEM THIS SOLVES. A response arrives token by token, so at any instant\n   the text is sliced mid-syntax: an opened `**` with no partner, a code fence\n   with no closing fence, a link with no closing bracket. The canonical parser\n   treats an unmatched delimiter as literal text on purpose (`inline.ts`: \"an\n   unmatched `*` renders as an asterisk rather than italicising the rest\") —\n   correct for a finished document, but it means a streaming one flickers for\n   its entire length and only settles once the closer lands.\n\n   AN UNCLOSED FENCE NEEDS NO HELP HERE: the canonical parser already marks it\n   `open: true` at end-of-input (`parse.ts`'s `readFence`), which is what lets\n   `Markdown`'s default code renderer suppress the copy button on a block that\n   is still filling. The only gap left is INLINE markers — backtick spans,\n   `**`/`*` emphasis, `[...]` links — which this module closes by appending\n   the missing partner before handing the text to the real parser.\n\n   THE BALANCE NEVER TOUCHES FENCED CODE. `2**3` inside a fenced Python\n   snippet is not an unterminated bold marker, and closing spurious markers\n   there would corrupt real code. So the source is split on fence boundaries\n   first, using `RE_FENCE` from `lib/syntax/markdown` — the canonical parser's\n   own fence pattern, imported rather than copied so the two can never drift —\n   and only the non-fence stretches are balanced.\n\n   ONLY EVER APPENDS CLOSERS. It never rewrites what the model wrote. The\n   worst case is that a marker the model intended as a literal asterisk\n   renders as emphasis for the few hundred milliseconds before the real text\n   arrives and the count comes out even.\n   ========================================================================= */\n\n/**\n * Balance inline markers so a half-typed emphasis renders as emphasis.\n *\n * Only ever APPENDS closers. See the module doc for why this is safe even\n * against text the model did not intend as markdown.\n */\nfunction balanceInline(text: string): string {\n  let balanced = text;\n\n  const backticks = (balanced.match(/`/g) ?? []).length;\n  if (backticks % 2 === 1) balanced += \"`\";\n\n  const bold = (balanced.match(/\\*\\*/g) ?? []).length;\n  if (bold % 2 === 1) balanced += \"**\";\n\n  /* Single `*` counted only where it is not part of `**`. An unmatched one is\n     far more often a bullet or a literal than an open emphasis, so it is left\n     alone — closing it would italicise the rest of the paragraph. */\n  const links = (balanced.match(/\\[/g) ?? []).length - (balanced.match(/\\]/g) ?? []).length;\n  if (links > 0) balanced += \"]\".repeat(links);\n\n  return balanced;\n}\n\n/**\n * Splits `source` on fence boundaries and balances only the non-fence runs,\n * leaving every fenced code run — closed or still streaming — byte-identical.\n */\nfunction balanceStreamingMarkdown(source: string): string {\n  const lines = source.split(\"\\n\");\n  const out: string[] = [];\n  let i = 0;\n\n  while (i < lines.length) {\n    const open = RE_FENCE.exec(lines[i]);\n    if (!open) {\n      const start = i;\n      while (i < lines.length && !RE_FENCE.test(lines[i])) i++;\n      out.push(balanceInline(lines.slice(start, i).join(\"\\n\")));\n      continue;\n    }\n\n    /* The closer must be the same character and at least as long — a run of\n       `~` inside a ``` block (or vice versa) stays content, matching the real\n       parser's own closer rule. `RE_FENCE`'s groups are (leading spaces,\n       fence run, rest-of-line) — group 2 is the fence run. */\n    const fenceChar = open[2][0] === \"~\" ? \"~\" : \"`\";\n    const closer = new RegExp(`^ {0,3}${fenceChar}{${open[2].length},}[ \\\\t]*$`);\n    const start = i;\n    i++;\n    while (i < lines.length && !closer.test(lines[i])) i++;\n    if (i < lines.length) i++; // include the closing fence line itself\n    out.push(lines.slice(start, i).join(\"\\n\"));\n  }\n\n  return out.join(\"\\n\");\n}\n\nexport interface StreamingMarkdownProps extends Omit<MarkdownProps, \"children\"> {\n  children: string;\n}\n\n/**\n * Blocks are memoised individually by `MarkdownNodes`' own reconciliation —\n * see `Markdown`. What THIS wrapper adds is memoising the balance pass itself,\n * so a re-render that does not change `children` (a sibling state update\n * elsewhere in the message list) never re-scans the text.\n */\nexport const StreamingMarkdown = memo(function StreamingMarkdown({\n  children,\n  ...rest\n}: StreamingMarkdownProps) {\n  const balanced = useMemo(() => balanceStreamingMarkdown(children), [children]);\n  return <Markdown {...rest}>{balanced}</Markdown>;\n});\n"],"names":["balanceInline","text","balanced","links","balanceStreamingMarkdown","source","lines","out","i","open","RE_FENCE","start","fenceChar","closer","StreamingMarkdown","memo","children","rest","useMemo","jsx","Markdown"],"mappings":";;;;AA4CA,SAASA,EAAcC,GAAsB;AAC3C,MAAIC,IAAWD;AAGf,GADmBC,EAAS,MAAM,IAAI,KAAK,CAAA,GAAI,SAC/B,MAAM,MAAGA,KAAY,OAEvBA,EAAS,MAAM,OAAO,KAAK,CAAA,GAAI,SAClC,MAAM,MAAGA,KAAY;AAKhC,QAAMC,KAASD,EAAS,MAAM,KAAK,KAAK,CAAA,GAAI,UAAUA,EAAS,MAAM,KAAK,KAAK,CAAA,GAAI;AACnF,SAAIC,IAAQ,MAAGD,KAAY,IAAI,OAAOC,CAAK,IAEpCD;AACT;AAMA,SAASE,EAAyBC,GAAwB;AACxD,QAAMC,IAAQD,EAAO,MAAM;AAAA,CAAI,GACzBE,IAAgB,CAAA;AACtB,MAAIC,IAAI;AAER,SAAOA,IAAIF,EAAM,UAAQ;AACvB,UAAMG,IAAOC,EAAS,KAAKJ,EAAME,CAAC,CAAC;AACnC,QAAI,CAACC,GAAM;AACT,YAAME,IAAQH;AACd,aAAOA,IAAIF,EAAM,UAAU,CAACI,EAAS,KAAKJ,EAAME,CAAC,CAAC,IAAG,CAAAA;AACrD,MAAAD,EAAI,KAAKP,EAAcM,EAAM,MAAMK,GAAOH,CAAC,EAAE,KAAK;AAAA,CAAI,CAAC,CAAC;AACxD;AAAA,IACF;AAMA,UAAMI,IAAYH,EAAK,CAAC,EAAE,CAAC,MAAM,MAAM,MAAM,KACvCI,IAAS,IAAI,OAAO,UAAUD,CAAS,IAAIH,EAAK,CAAC,EAAE,MAAM,YAAY,GACrEE,IAAQH;AAEd,SADAA,KACOA,IAAIF,EAAM,UAAU,CAACO,EAAO,KAAKP,EAAME,CAAC,CAAC,IAAG,CAAAA;AACnD,IAAIA,IAAIF,EAAM,UAAQE,KACtBD,EAAI,KAAKD,EAAM,MAAMK,GAAOH,CAAC,EAAE,KAAK;AAAA,CAAI,CAAC;AAAA,EAC3C;AAEA,SAAOD,EAAI,KAAK;AAAA,CAAI;AACtB;AAYO,MAAMO,IAAoBC,EAAK,SAA2B;AAAA,EAC/D,UAAAC;AAAA,EACA,GAAGC;AACL,GAA2B;AACzB,QAAMf,IAAWgB,EAAQ,MAAMd,EAAyBY,CAAQ,GAAG,CAACA,CAAQ,CAAC;AAC7E,SAAO,gBAAAG,EAACC,GAAA,EAAU,GAAGH,GAAO,UAAAf,GAAS;AACvC,CAAC;"}

package/dist/components/chat/download-file.js

@@ -0,0 +1,9 @@
+function o(n) {
+  if (!n.url) return;
+  const e = document.createElement("a");
+  e.href = n.url, e.download = n.fileName ?? n.name, e.click();
+}
+export {
+  o as downloadChatFile
+};
+//# sourceMappingURL=download-file.js.map

package/dist/components/chat/download-file.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"download-file.js","sources":["../../../src/components/chat/download-file.ts"],"sourcesContent":["import type { ChatFile } from \"./types\";\n\n/**\n * Saves a file through the browser: a throwaway anchor pointing at its `url`, named by its own file name when it has\n * one (a stored PDF's `name` is a reference like \"PDF 2\", its `fileName` is what it is called on disk). A file with\n * no `url` has nothing to fetch and does nothing.\n */\nexport function downloadChatFile(file: ChatFile): void {\n  if (!file.url) return;\n  const link = document.createElement(\"a\");\n  link.href = file.url;\n  link.download = file.fileName ?? file.name;\n  link.click();\n}\n"],"names":["downloadChatFile","file","link"],"mappings":"AAOO,SAASA,EAAiBC,GAAsB;AACrD,MAAI,CAACA,EAAK,IAAK;AACf,QAAMC,IAAO,SAAS,cAAc,GAAG;AACvC,EAAAA,EAAK,OAAOD,EAAK,KACjBC,EAAK,WAAWD,EAAK,YAAYA,EAAK,MACtCC,EAAK,MAAA;AACP;"}

package/dist/components/chat/file-icon.js

@@ -0,0 +1,39 @@
+const n = {
+  image: "image",
+  video: "circle-play",
+  audio: "volume-2",
+  code: "code",
+  text: "file-text",
+  archive: "folder",
+  table: "table",
+  file: "file"
+}, r = [
+  [/^image\//, "image"],
+  [/^video\//, "video"],
+  [/^audio\//, "audio"],
+  [/^text\/(html|css|javascript)|application\/(json|xml|.*javascript)/, "code"],
+  [/^text\//, "text"],
+  [/pdf/, "text"],
+  [/zip|tar|gzip|compressed/, "archive"],
+  [/csv|sheet|excel/, "table"]
+], a = ["png", "jpg", "jpeg", "gif", "webp", "svg", "avif"], d = ["mp4", "webm", "mov", "m4v", "ogv"], p = ["ts", "tsx", "js", "jsx", "py", "rs", "go", "json", "sh", "css"], m = ["md", "txt", "rtf", "pdf", "doc", "docx", "ppt", "pptx"], l = ["csv", "xlsx", "xls"];
+function o(e) {
+  const s = e.mimeType ?? "", i = r.find(([c]) => c.test(s));
+  if (i) return i[1];
+  const t = (e.fileName ?? e.name).split(".").pop()?.toLowerCase() ?? "";
+  return a.includes(t) ? "image" : d.includes(t) ? "video" : p.includes(t) ? "code" : m.includes(t) ? "text" : l.includes(t) ? "table" : "file";
+}
+function f(e) {
+  const s = e.mimeType ?? "", i = (e.fileName ?? e.name).split(".").pop()?.toLowerCase() ?? "";
+  return /pdf/.test(s) || i === "pdf" ? "pdf" : o(e);
+}
+const u = (e) => n[e], x = (e) => n[o(e)], v = (e) => o(e) === "image", E = (e) => o(e) === "video";
+export {
+  x as fileIconFor,
+  u as fileKindIcon,
+  o as fileKindOf,
+  v as isImageFile,
+  E as isVideoFile,
+  f as referenceKindOf
+};
+//# sourceMappingURL=file-icon.js.map

package/dist/components/chat/file-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-icon.js","sources":["../../../src/components/chat/file-icon.ts"],"sourcesContent":["import type { IconName } from \"../Icon\";\nimport type { ChatFile } from \"./types\";\n\n/* ============================================================================\n   FILE KIND → ICON\n   The one table that says what a file looks like when it has no picture.\n\n   EXPORTED (DX-3982) because three components need the answer — the tile, the\n   cover and the video player's fallback — and a consumer building its own file\n   row needs the same one. A copy of this table in an application is a table\n   that drifts the first time a kind is added here.\n   ========================================================================= */\n\n/** What a file is, before anyone decides what it looks like. */\nexport type FileKind = \"image\" | \"video\" | \"audio\" | \"code\" | \"text\" | \"archive\" | \"table\" | \"file\";\n\nconst KIND_ICONS: Record<FileKind, IconName> = {\n  image: \"image\",\n  video: \"circle-play\",\n  audio: \"volume-2\",\n  code: \"code\",\n  text: \"file-text\",\n  archive: \"folder\",\n  table: \"table\",\n  file: \"file\",\n};\n\nconst MIME_KINDS: Array<[RegExp, FileKind]> = [\n  [/^image\\//, \"image\"],\n  [/^video\\//, \"video\"],\n  [/^audio\\//, \"audio\"],\n  [/^text\\/(html|css|javascript)|application\\/(json|xml|.*javascript)/, \"code\"],\n  [/^text\\//, \"text\"],\n  [/pdf/, \"text\"],\n  [/zip|tar|gzip|compressed/, \"archive\"],\n  [/csv|sheet|excel/, \"table\"],\n];\n\n// I18N-ALLOW: image file extensions, matched against a file name to pick an icon\nconst IMAGE_EXTENSIONS = [\"png\", \"jpg\", \"jpeg\", \"gif\", \"webp\", \"svg\", \"avif\"];\n/* DX-3982: files from Slack and Trello arrive as `application/octet-stream`, so\n   the extension is the ONLY signal that a file is a video — the same signal\n   images already had. */\n// I18N-ALLOW: video file extensions, matched against a file name to pick an icon\nconst VIDEO_EXTENSIONS = [\"mp4\", \"webm\", \"mov\", \"m4v\", \"ogv\"];\n// I18N-ALLOW: source-code file extensions, matched against a file name to pick an icon\nconst CODE_EXTENSIONS = [\"ts\", \"tsx\", \"js\", \"jsx\", \"py\", \"rs\", \"go\", \"json\", \"sh\", \"css\"];\n// I18N-ALLOW: document file extensions, matched against a file name to pick an icon\nconst TEXT_EXTENSIONS = [\"md\", \"txt\", \"rtf\", \"pdf\", \"doc\", \"docx\", \"ppt\", \"pptx\"];\n// I18N-ALLOW: spreadsheet file extensions, matched against a file name to pick an icon\nconst TABLE_EXTENSIONS = [\"csv\", \"xlsx\", \"xls\"];\n\n/** `fileName` is the file's own name when `name` is a label that is not (a markdown reference such as \"PDF 2\"): the extension is read from it. */\nexport type FileIdentity = Pick<ChatFile, \"name\" | \"mimeType\" | \"fileName\">;\n\n/**\n * What a file is, from its mime type and, when that says nothing, its\n * extension.\n *\n * No mime type is normal — a file dragged from some sources arrives without\n * one, and chat integrations send `application/octet-stream` for everything.\n * The extension is the next best signal, and guessing from it beats a generic\n * icon for the formats people actually attach.\n */\nexport function fileKindOf(file: FileIdentity): FileKind {\n  const mime = file.mimeType ?? \"\";\n  const match = MIME_KINDS.find(([pattern]) => pattern.test(mime));\n  if (match) return match[1];\n  const extension = (file.fileName ?? file.name).split(\".\").pop()?.toLowerCase() ?? \"\";\n  if (IMAGE_EXTENSIONS.includes(extension)) return \"image\";\n  if (VIDEO_EXTENSIONS.includes(extension)) return \"video\";\n  if (CODE_EXTENSIONS.includes(extension)) return \"code\";\n  if (TEXT_EXTENSIONS.includes(extension)) return \"text\";\n  if (TABLE_EXTENSIONS.includes(extension)) return \"table\";\n  return \"file\";\n}\n\n/** What a file is called in a reference: a `FileKind`, with a PDF its own word (DXUI-74). */\nexport type ReferenceKind = FileKind | \"pdf\";\n\n/**\n * The kind a markdown reference to a file is named after (\"Image 1\", \"PDF 2\"). A PDF is a document to the\n * icon table but is its own word in a reference; every other file is its `fileKindOf`.\n */\nexport function referenceKindOf(file: FileIdentity): ReferenceKind {\n  const mime = file.mimeType ?? \"\";\n  const extension = (file.fileName ?? file.name).split(\".\").pop()?.toLowerCase() ?? \"\";\n  if (/pdf/.test(mime) || extension === \"pdf\") return \"pdf\";\n  return fileKindOf(file);\n}\n\n/** The icon a kind of file wears when it has no picture. */\nexport const fileKindIcon = (kind: FileKind): IconName => KIND_ICONS[kind];\n\n/** The icon for a file. */\nexport const fileIconFor = (file: FileIdentity): IconName => KIND_ICONS[fileKindOf(file)];\n\nexport const isImageFile = (file: FileIdentity): boolean => fileKindOf(file) === \"image\";\nexport const isVideoFile = (file: FileIdentity): boolean => fileKindOf(file) === \"video\";\n"],"names":["KIND_ICONS","MIME_KINDS","IMAGE_EXTENSIONS","VIDEO_EXTENSIONS","CODE_EXTENSIONS","TEXT_EXTENSIONS","TABLE_EXTENSIONS","fileKindOf","file","mime","match","pattern","extension","referenceKindOf","fileKindIcon","kind","fileIconFor","isImageFile","isVideoFile"],"mappings":"AAgBA,MAAMA,IAAyC;AAAA,EAC7C,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR,GAEMC,IAAwC;AAAA,EAC5C,CAAC,YAAY,OAAO;AAAA,EACpB,CAAC,YAAY,OAAO;AAAA,EACpB,CAAC,YAAY,OAAO;AAAA,EACpB,CAAC,qEAAqE,MAAM;AAAA,EAC5E,CAAC,WAAW,MAAM;AAAA,EAClB,CAAC,OAAO,MAAM;AAAA,EACd,CAAC,2BAA2B,SAAS;AAAA,EACrC,CAAC,mBAAmB,OAAO;AAC7B,GAGMC,IAAmB,CAAC,OAAO,OAAO,QAAQ,OAAO,QAAQ,OAAO,MAAM,GAKtEC,IAAmB,CAAC,OAAO,QAAQ,OAAO,OAAO,KAAK,GAEtDC,IAAkB,CAAC,MAAM,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,QAAQ,MAAM,KAAK,GAElFC,IAAkB,CAAC,MAAM,OAAO,OAAO,OAAO,OAAO,QAAQ,OAAO,MAAM,GAE1EC,IAAmB,CAAC,OAAO,QAAQ,KAAK;AAcvC,SAASC,EAAWC,GAA8B;AACvD,QAAMC,IAAOD,EAAK,YAAY,IACxBE,IAAQT,EAAW,KAAK,CAAC,CAACU,CAAO,MAAMA,EAAQ,KAAKF,CAAI,CAAC;AAC/D,MAAIC,EAAO,QAAOA,EAAM,CAAC;AACzB,QAAME,KAAaJ,EAAK,YAAYA,EAAK,MAAM,MAAM,GAAG,EAAE,OAAO,YAAA,KAAiB;AAClF,SAAIN,EAAiB,SAASU,CAAS,IAAU,UAC7CT,EAAiB,SAASS,CAAS,IAAU,UAC7CR,EAAgB,SAASQ,CAAS,IAAU,SAC5CP,EAAgB,SAASO,CAAS,IAAU,SAC5CN,EAAiB,SAASM,CAAS,IAAU,UAC1C;AACT;AASO,SAASC,EAAgBL,GAAmC;AACjE,QAAMC,IAAOD,EAAK,YAAY,IACxBI,KAAaJ,EAAK,YAAYA,EAAK,MAAM,MAAM,GAAG,EAAE,OAAO,YAAA,KAAiB;AAClF,SAAI,MAAM,KAAKC,CAAI,KAAKG,MAAc,QAAc,QAC7CL,EAAWC,CAAI;AACxB;AAGO,MAAMM,IAAe,CAACC,MAA6Bf,EAAWe,CAAI,GAG5DC,IAAc,CAACR,MAAiCR,EAAWO,EAAWC,CAAI,CAAC,GAE3ES,IAAc,CAACT,MAAgCD,EAAWC,CAAI,MAAM,SACpEU,IAAc,CAACV,MAAgCD,EAAWC,CAAI,MAAM;"}