@50arms/ui 0.0.0-stage → 35.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.js","sources":["../../../src/components/chat/Chat.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport { EmptyState } from \"../Surface\";\nimport { Composer, type ComposerProps } from \"./Composer\";\nimport { downloadChatFile } from \"./download-file\";\nimport { Message, type MessageAction } from \"./Message\";\nimport { MessageScroller } from \"./MessageScroller\";\nimport { FileViewer } from \"../file-viewer\";\nimport { ModelSelector, type ChatModel } from \"./ModelSelector\";\nimport { EffortControl, type EffortLevel } from \"./EffortControl\";\nimport { ContextMeter, type ContextSegment, type UsageLimit } from \"./ContextMeter\";\nimport type {\n  ChatComponents,\n  ChatFile,\n  ChatMessage,\n  PartRenderers,\n} from \"./types\";\n\n/* ============================================================================\n   CHAT\n   The whole thing, assembled.\n\n   EVERY CONTROL IS OFF UNTIL IT IS CONFIGURED, and the configuration IS the\n   switch: pass `models` and the model selector appears, pass `context` and the\n   meter appears. There is no `showModelSelector` boolean, because a boolean\n   and the data it reveals can disagree — `showModelSelector` with an empty\n   model list is a menu of nothing, and every codebase that has the boolean\n   eventually ships that bug. The default is a plain, well-made chat.\n\n   SURFACE IS PRESENTATION ONLY. Inline, sidebar and popover change the frame\n   and nothing else: the same conversation, composer and controls in all three.\n   A \"sidebar chat\" that quietly drops features is how two divergent chat\n   implementations start.\n   ========================================================================= */\n\n/* Every file a message carries — its attachments, then the file parts of its\n   body — in the order the reader sees them. This is the set a click on any one\n   of them opens the viewer over (DX-4398): the files of THAT message, never the\n   whole transcript's. */\nfunction filesOfMessage(message: ChatMessage): ChatFile[] {\n  return [\n    ...(message.attachments ?? []),\n    ...message.parts.flatMap((part) => (part.type === \"file\" ? [part.file] : [])),\n  ];\n}\n\nexport type ChatSurface = \"inline\" | \"sidebar\" | \"popover\";\n\nexport interface ChatProps<TApp = unknown>\n  extends Pick<\n    ComposerProps,\n    | \"value\"\n    | \"onValueChange\"\n    | \"onSubmit\"\n    | \"files\"\n    | \"onFilesAdded\"\n    | \"onFileRemoved\"\n    | \"busy\"\n    | \"onStop\"\n    | \"placeholder\"\n    | \"disabled\"\n    | \"error\"\n    | \"accept\"\n    | \"uploadImage\"\n  > {\n  messages: ChatMessage[];\n  /** Replaces a built-in part renderer. Partial — override one, keep the rest. */\n  renderers?: PartRenderers<TApp>;\n  /** Application components a message may address by name. */\n  components?: ChatComponents<TApp>;\n  /** Handed to every renderer at call time, so a module-scope registry still\n      reaches live application state. */\n  appContext?: TApp;\n\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  /** Buttons in the header — new thread, settings, close. */\n  headerActions?: ReactNode;\n  /** Shown instead of the transcript when there are no messages. */\n  empty?: ReactNode;\n\n  /* --- optional controls; presence enables them ------------------------- */\n  models?: ChatModel[];\n  model?: string;\n  onModelChange?: (id: string) => void;\n  /** Switches under the model list — fast mode, thinking, and so on. */\n  modelOptions?: Parameters<typeof ModelSelector>[0][\"options\"];\n\n  effortLevels?: EffortLevel[];\n  effort?: string;\n  onEffortChange?: (id: string) => void;\n\n  context?: { segments: ContextSegment[]; capacity: number; limits?: UsageLimit[] };\n\n  /** Per-message buttons. Copy is always present and is not listed here. */\n  messageActions?: MessageAction[];\n  showTimestamps?: boolean;\n  /** Status line above the composer — \"Thinking…\", \"Running tests\". */\n  status?: ReactNode;\n  hint?: ReactNode;\n\n  surface?: ChatSurface;\n  className?: string;\n}\n\nexport function Chat<TApp = unknown>({\n  messages,\n  renderers,\n  components,\n  appContext,\n  title,\n  subtitle,\n  headerActions,\n  empty,\n  models,\n  model,\n  onModelChange,\n  modelOptions,\n  effortLevels,\n  effort,\n  onEffortChange,\n  context,\n  messageActions,\n  showTimestamps = false,\n  status,\n  hint,\n  surface = \"inline\",\n  className,\n  ...composer\n}: ChatProps<TApp>) {\n  const strings = useUiStrings().chat.chat;\n  const [viewing, setViewing] = useState<{ files: ChatFile[]; fileId: string } | null>(null);\n\n  /* Opens the viewer over the files of `message`, at `file`. */\n  const openViewer = (message: ChatMessage, file: ChatFile) => {\n    setViewing({ files: filesOfMessage(message), fileId: file.id });\n  };\n\n  const toolbar = (\n    <>\n      {models && model !== undefined && onModelChange && (\n        <ModelSelector\n          models={models}\n          value={model}\n          onValueChange={onModelChange}\n          options={modelOptions}\n        />\n      )}\n      {effort !== undefined && onEffortChange && (\n        <EffortControl levels={effortLevels} value={effort} onValueChange={onEffortChange} />\n      )}\n      {context && (\n        <ContextMeter\n          segments={context.segments}\n          capacity={context.capacity}\n          limits={context.limits}\n        />\n      )}\n    </>\n  );\n\n  const hasToolbar = !!(models || effort !== undefined || context);\n\n  return (\n    <section\n      data-chat-surface={surface}\n      className={cn(\n        \"flex min-h-0 flex-col bg-canvas\",\n        surface === \"sidebar\" && \"h-full border-l border-border-subtle\",\n        surface === \"popover\" && \"h-[32rem] w-[26rem]\",\n        surface === \"inline\" && \"h-full\",\n        className,\n      )}\n    >\n      {(title || headerActions) && (\n        <header className=\"flex shrink-0 items-center gap-3 border-b border-border-subtle px-4 py-2.5\">\n          <div className=\"flex min-w-0 flex-col\">\n            {title && (\n              <h2 className=\"truncate font-display text-sm font-semibold text-primary\">{title}</h2>\n            )}\n            {subtitle && <p className=\"truncate text-2xs text-tertiary\">{subtitle}</p>}\n          </div>\n          {headerActions && <div className=\"ml-auto flex items-center gap-1\">{headerActions}</div>}\n        </header>\n      )}\n\n      <MessageScroller className=\"px-4 py-4\">\n        {messages.length === 0\n          ? (empty ?? (\n              <EmptyState\n                icon=\"message-square\"\n                title={strings.emptyTitle}\n                description={strings.emptyDescription}\n              />\n            ))\n          : messages.map((message, index) => (\n              <Message\n                key={message.id}\n                message={message}\n                renderers={renderers}\n                components={components}\n                appContext={appContext}\n                actions={message.role === \"assistant\" ? messageActions : undefined}\n                showTimestamp={showTimestamps}\n                /* Consecutive turns from the same author drop the avatar and\n                   name. Repeating them on every line turns a conversation into\n                   a stack of business cards. */\n                grouped={index > 0 && messages[index - 1].role === message.role}\n                onPreviewFile={(file) => openViewer(message, file)}\n                onDownloadFile={downloadChatFile}\n              />\n            ))}\n      </MessageScroller>\n\n      <div className=\"shrink-0 px-4 pt-1 pb-4\">\n        {status && <div className=\"px-1 pb-1.5\">{status}</div>}\n        <Composer\n          {...composer}\n          hint={hint}\n          toolbar={hasToolbar ? toolbar : undefined}\n        />\n      </div>\n\n      <FileViewer\n        open={viewing !== null}\n        onOpenChange={(open) => {\n          if (!open) setViewing(null);\n        }}\n        files={viewing?.files ?? []}\n        initialFileId={viewing?.fileId}\n        onDownload={downloadChatFile}\n      />\n    </section>\n  );\n}\n\nexport interface ChatPopoverProps<TApp = unknown> extends ChatProps<TApp> {\n  /** The control that opens it. Defaults to a floating round button. */\n  trigger?: ReactNode;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n}\n\n/**\n * The same chat, anchored to a trigger.\n *\n * A popover rather than a fixed-position widget: anchoring is the positioning\n * engine's job, and a hand-placed `bottom-6 right-6` panel is the version that\n * ends up off screen on a short viewport or under a cookie banner.\n */\nexport function ChatPopover<TApp = unknown>({\n  trigger,\n  side = \"top\",\n  align = \"end\",\n  ...chat\n}: ChatPopoverProps<TApp>) {\n  const strings = useUiStrings().chat.chat;\n  return (\n    <Popover\n      side={side}\n      align={align}\n      className=\"w-auto overflow-hidden p-0\"\n      trigger={\n        trigger ?? (\n          <button\n            type=\"button\"\n            aria-label={strings.open}\n            className={cn(\n              \"grid size-12 cursor-pointer place-items-center rounded-full bg-accent text-accent-contrast\",\n              \"shadow-lg outline-none transition-[var(--tx-colors),transform] duration-(--dur-fast) ease-(--ease-snappy)\",\n              \"hover:bg-accent-hover active:scale-95 focus-visible:ring-2 focus-visible:ring-focus-ring\",\n            )}\n          >\n            <Icon name=\"message-square\" size=\"md\" />\n          </button>\n        )\n      }\n    >\n      <Chat {...(chat as ChatProps<TApp>)} surface=\"popover\" />\n    </Popover>\n  );\n}\n"],"names":["filesOfMessage","message","part","Chat","messages","renderers","components","appContext","title","subtitle","headerActions","empty","models","model","onModelChange","modelOptions","effortLevels","effort","onEffortChange","context","messageActions","showTimestamps","status","hint","surface","className","composer","strings","useUiStrings","viewing","setViewing","useState","openViewer","file","toolbar","jsxs","Fragment","jsx","ModelSelector","EffortControl","ContextMeter","hasToolbar","cn","MessageScroller","EmptyState","index","Message","downloadChatFile","Composer","FileViewer","open","ChatPopover","trigger","side","align","chat","Popover","Icon"],"mappings":"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"}

package/dist/components/chat/Composer.js

@@ -0,0 +1,274 @@
+import { jsx as t, jsxs as a, Fragment as C } from "react/jsx-runtime";
+import { useRef as A, useState as O } from "react";
+import { cn as p } from "../../lib/cn.js";
+import { Button as F } from "../Button.js";
+import { IconButton as w } from "../IconButton.js";
+import { Icon as l } from "../Icon.js";
+import { MarkdownEditor as ee } from "../MarkdownEditor.js";
+import { Tooltip as P } from "../Popover.js";
+import { AttachmentList as te } from "./Attachment.js";
+import { useUiStrings as ne } from "../../lib/i18n/provider.js";
+const re = {
+  inline: { className: "px-1.5 py-1.5", blockRem: 0.375 },
+  stacked: { className: "px-1 py-1", blockRem: 0.25 }
+}, ae = 1.5;
+function se(r) {
+  const { strings: c } = r;
+  if (r.submitDisabledReason !== void 0) return { reason: r.submitDisabledReason, explained: !0 };
+  if (r.unstoredImages > 0) return { reason: c.sendUnstoredImage, explained: !0 };
+  if (r.hasUploadingFile) return { reason: c.sendUploading, explained: !1 };
+  if (!r.hasContent) return { reason: c.sendNothing, explained: !1 };
+  if (r.inactive) return { reason: c.unavailable, explained: !1 };
+}
+function xe({
+  value: r,
+  onValueChange: c,
+  onSubmit: B,
+  layout: D = "stacked",
+  submitOn: H = "enter",
+  submitDisabledReason: K,
+  files: m = [],
+  onFilesAdded: s,
+  onFileRemoved: j,
+  busy: b = !1,
+  onStop: u,
+  placeholder: _,
+  disabled: o = !1,
+  error: v,
+  toolbar: f,
+  leading: R,
+  hint: g,
+  accept: $,
+  maxRows: G = 12,
+  uploadImage: L,
+  uploadFile: M,
+  imageTypes: S,
+  isFileUrl: W,
+  className: X,
+  ref: q
+}) {
+  const n = ne().chat.composer, I = _ ?? n.placeholder, N = A(null), [y, k] = O(!1), [J, Q] = O(0), x = se({
+    submitDisabledReason: K,
+    unstoredImages: J,
+    hasUploadingFile: m.some((e) => e.status === "uploading"),
+    hasContent: r.trim().length > 0 || m.length > 0,
+    inactive: o || b,
+    strings: n
+  }), z = x === void 0, d = D === "inline", T = re[D], h = () => {
+    z && B(r, m);
+  }, V = (e) => {
+    e.target.closest("[data-md-editable]") && (e.key !== "Enter" || e.nativeEvent.isComposing || (H === "mod-enter" ? !(e.ctrlKey || e.metaKey) : e.shiftKey) || (e.preventDefault(), e.stopPropagation(), h()));
+  }, Y = (e) => {
+    if (!s) return;
+    const i = [...e.clipboardData.files];
+    i.length !== 0 && (e.preventDefault(), e.stopPropagation(), s(i));
+  }, Z = (e) => {
+    if (k(!1), !s) return;
+    const i = [...e.dataTransfer.files];
+    i.length !== 0 && (e.preventDefault(), e.stopPropagation(), s(i));
+  }, U = s && /* @__PURE__ */ t(
+    "input",
+    {
+      ref: N,
+      type: "file",
+      multiple: !0,
+      accept: $,
+      onChange: (e) => {
+        const i = [...e.target.files ?? []];
+        i.length > 0 && s(i), e.target.value = "";
+      },
+      className: "sr-only",
+      tabIndex: -1,
+      "aria-hidden": !0
+    }
+  ), E = /* @__PURE__ */ t("div", { "data-composer-text": "", onKeyDownCapture: V, onPasteCapture: Y, className: d ? "flex min-h-control-sm min-w-0 flex-1 flex-col justify-center" : "w-full", children: /* @__PURE__ */ t(
+    ee,
+    {
+      ref: q,
+      chrome: "bare",
+      label: I,
+      value: r,
+      onChange: c,
+      placeholder: I,
+      readOnly: o,
+      uploadImage: L,
+      uploadFile: M,
+      imageTypes: S,
+      isFileUrl: W,
+      onImageUploadStateChange: (e) => Q(e.unstored),
+      minHeight: 0,
+      maxHeight: `calc(${G} * ${ae}rem - ${2 * T.blockRem}rem)`,
+      className: p(
+        "text-sm text-primary",
+        /* DXUI-18: inline, the field is the row's flexible middle. The wrapper's `min-h-control-sm` is the height of the buttons beside it
+           (it lifts to 44px under a coarse pointer together with them) and centres a one-line draft on them (DXUI-31); a
+           taller draft fills the wrapper, reads from the top and grows upward from the same bottom edge. */
+        T.className
+      )
+    }
+  ) });
+  return /* @__PURE__ */ a("div", { className: p("flex flex-col gap-1.5", X), children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        onDragOver: (e) => {
+          s && (e.preventDefault(), k(!0));
+        },
+        onDragLeave: (e) => {
+          e.currentTarget.contains(e.relatedTarget) || k(!1);
+        },
+        onDropCapture: Z,
+        "data-composer-box": "",
+        "data-dragging": y || void 0,
+        className: p(
+          "relative flex flex-col rounded-2xl border bg-field",
+          d ? "gap-1.5 p-1.5" : "gap-2 p-2.5",
+          "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-(--ease-standard)",
+          "focus-within:border-control focus-within:ring-4 focus-within:ring-control-focus-halo",
+          v ? "border-danger-border" : "border-field-border",
+          y && "border-control ring-4 ring-control-focus-halo",
+          o && "opacity-60"
+        ),
+        children: [
+          m.length > 0 && /* @__PURE__ */ t(
+            te,
+            {
+              files: m,
+              layout: d ? "strip" : "tile",
+              onRemove: j,
+              disabled: o,
+              className: d ? "px-1.5 pt-1.5" : void 0
+            }
+          ),
+          d ? /* @__PURE__ */ a("div", { className: "flex items-end gap-1", children: [
+            s && /* @__PURE__ */ a(C, { children: [
+              U,
+              /* @__PURE__ */ t(
+                w,
+                {
+                  icon: /* @__PURE__ */ t(l, { name: "paperclip", size: "md" }),
+                  label: n.attach,
+                  variant: "ghost",
+                  size: "sm",
+                  disabledReason: o ? n.unavailable : void 0,
+                  onClick: () => N.current?.click()
+                }
+              )
+            ] }),
+            R,
+            E,
+            b && u ? /* @__PURE__ */ t(
+              w,
+              {
+                icon: /* @__PURE__ */ t("span", { className: "size-2.5 rounded-[3px] bg-current" }),
+                label: n.stop,
+                variant: "outline",
+                size: "sm",
+                className: "rounded-full",
+                onClick: u
+              }
+            ) : /* @__PURE__ */ t(
+              w,
+              {
+                icon: /* @__PURE__ */ t(l, { name: "arrow-up", size: "md" }),
+                label: n.send,
+                variant: "solid",
+                size: "sm",
+                className: "rounded-full",
+                disabledReason: x?.reason,
+                onClick: h
+              }
+            )
+          ] }) : /* @__PURE__ */ a(C, { children: [
+            E,
+            /* @__PURE__ */ a("div", { className: "@container flex items-center gap-1", children: [
+              s && /* @__PURE__ */ a(C, { children: [
+                U,
+                /* @__PURE__ */ t(P, { content: n.attach, children: /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => N.current?.click(),
+                    disabled: o,
+                    "aria-label": n.attach,
+                    className: p(
+                      "dx-tap grid size-7 shrink-0 cursor-pointer place-items-center rounded-lg text-tertiary outline-none",
+                      "transition-colors duration-(--dur-fast) hover:bg-surface-hover hover:text-primary",
+                      "focus-visible:ring-2 focus-visible:ring-focus-ring",
+                      o && "pointer-events-none opacity-50"
+                    ),
+                    children: /* @__PURE__ */ t(l, { name: "paperclip", size: "sm" })
+                  }
+                ) })
+              ] }),
+              R,
+              f && /* @__PURE__ */ t("div", { className: "flex min-w-0 items-center gap-0.5", children: f }),
+              /* @__PURE__ */ a("div", { className: "ml-auto flex items-center gap-2", children: [
+                g && /* @__PURE__ */ t("span", { className: "hidden text-2xs text-tertiary @sm:inline", children: g }),
+                b && u ? /* @__PURE__ */ t(P, { content: n.stop, children: /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: u,
+                    "aria-label": n.stop,
+                    className: "dx-ground-raised dx-tap grid size-8 shrink-0 cursor-pointer place-items-center rounded-full bg-surface-raised text-primary outline-none ring-1 ring-border transition-colors duration-(--dur-fast) hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-focus-ring",
+                    children: /* @__PURE__ */ t("span", { className: "size-2.5 rounded-[3px] bg-current" })
+                  }
+                ) }) : (
+                  /* DXUI-18: a stacked composer is a surface already in use, so with no `submitDisabledReason` its send is
+                     the button it always was (a `Button` differs in size, dimming, focus ring, press translate, ripple and
+                     cursor). A reason is the opt-in, and `Button` owns what a reason needs - soft-disabled, tooltip,
+                     accessible description. */
+                  x?.explained ? /* @__PURE__ */ t(
+                    F,
+                    {
+                      variant: "solid",
+                      size: "sm",
+                      iconOnly: !0,
+                      "aria-label": n.send,
+                      onClick: h,
+                      disabledReason: x.reason,
+                      className: "dx-tap size-8 h-8! rounded-full",
+                      children: /* @__PURE__ */ t(l, { name: "arrow-up", size: "sm" })
+                    }
+                  ) : /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: h,
+                      disabled: !z,
+                      "aria-label": n.send,
+                      className: p(
+                        "dx-tap grid size-8 shrink-0 cursor-pointer place-items-center rounded-full outline-none",
+                        "transition-[var(--tx-colors),transform] duration-(--dur-fast) ease-(--ease-snappy)",
+                        "focus-visible:ring-2 focus-visible:ring-focus-ring",
+                        z ? "bg-accent text-accent-contrast hover:bg-accent-hover active:scale-95" : "cursor-not-allowed bg-surface-inset text-disabled"
+                      ),
+                      children: /* @__PURE__ */ t(l, { name: "arrow-up", size: "sm" })
+                    }
+                  )
+                )
+              ] })
+            ] })
+          ] }),
+          y && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-0 grid place-items-center rounded-2xl bg-control-subtle/80", children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2 text-sm font-medium text-control-text", children: [
+            /* @__PURE__ */ t(l, { name: "upload", size: "sm" }),
+            n.dropToAttach
+          ] }) })
+        ]
+      }
+    ),
+    d && (f || g) && /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 px-1.5 text-xs text-secondary", children: [
+      f,
+      g
+    ] }),
+    v && /* @__PURE__ */ a("p", { className: "flex items-center gap-1.5 px-1 text-2xs text-danger-text", children: [
+      /* @__PURE__ */ t(l, { name: "circle-alert", size: "xs" }),
+      v
+    ] })
+  ] });
+}
+export {
+  xe as Composer
+};
+//# sourceMappingURL=Composer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Composer.js","sources":["../../../src/components/chat/Composer.tsx"],"sourcesContent":["import {\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type DragEvent,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"../Button\";\nimport { IconButton } from \"../IconButton\";\nimport { useUiStrings, type UiStrings } from \"../../lib/i18n\";\nimport { Icon } from \"../Icon\";\nimport { MarkdownEditor, type MarkdownEditorHandle } from \"../MarkdownEditor\";\nimport type { ImageUploader } from \"../../lib/markdown/image-pipeline\";\nimport { Tooltip } from \"../Popover\";\nimport { AttachmentList } from \"./Attachment\";\nimport type { ChatFile } from \"./types\";\n\n/* ============================================================================\n   COMPOSER\n   Where the message is written.\n\n   ONE BORDERED REGION CONTAINING EVERYTHING — staged files, the text, and the\n   controls. The alternative, a toolbar outside the field, makes the attachments\n   look like they belong to the page rather than to the message being written,\n   and people send without them. Enclosing them says \"this is the message\".\n\n   THE TEXT IS A `MarkdownEditor chrome=\"bare\"` (DXUI-25). The value is markdown\n   in and out, rendered live as it is typed, with the right-click formatting\n   menu and the hotkeys; the editor draws no toolbar, gutter, border or footer,\n   and takes this box's font size and line height, so the box looks as it did\n   with a plain textarea. It grows with its content (the editable area has no\n   fixed height) and is capped at `maxRows` lines, so a long draft scrolls\n   internally instead of pushing the conversation off screen.\n   ========================================================================= */\n\nexport interface ComposerProps {\n  value: string;\n  onValueChange: (value: string) => void;\n  onSubmit: (value: string, files: ChatFile[]) => void;\n  /** Staged files, shown above the text. */\n  files?: ChatFile[];\n  onFilesAdded?: (files: File[]) => void;\n  onFileRemoved?: (file: ChatFile) => void;\n  /**\n   * DXUI-18: `\"stacked\"` (default) draws the text with its controls in a row UNDER it. `\"inline\"` draws ONE line,\n   * `[attach] [text that grows] [send]`, the staged files in a scrolling `AttachmentList layout=\"strip\"` above the\n   * text, and `toolbar` / `hint` in a row under the box.\n   */\n  layout?: \"stacked\" | \"inline\";\n  /**\n   * DXUI-18: `\"enter\"` (default) sends on Enter and breaks the line on Shift+Enter. `\"mod-enter\"` sends on\n   * Ctrl/Cmd+Enter only; a plain Enter inserts a new line.\n   */\n  submitOn?: \"enter\" | \"mod-enter\";\n  /**\n   * DXUI-18: set → sending is unavailable AND this says why. The send button is disabled with the sentence as its\n   * tooltip and accessible description, and the keyboard send does nothing. Unset → only the built-in rules apply\n   * (empty, a file still uploading, busy, `disabled`).\n   */\n  submitDisabledReason?: string;\n  /** Streaming — the send button becomes stop. */\n  busy?: boolean;\n  onStop?: () => void;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Blocks submit and explains why, under the field. */\n  error?: ReactNode;\n  /** Controls at the bottom-left — model, effort, context, whatever applies. */\n  toolbar?: ReactNode;\n  /** Extra buttons beside the attach button. */\n  leading?: ReactNode;\n  /** Hint at bottom-right, left of the send button. With `layout=\"inline\"` it joins `toolbar` in the row under the box,\n      which is where a caller's status line (a sending spinner, a note) goes. */\n  hint?: ReactNode;\n  accept?: string;\n  maxRows?: number;\n  /**\n   * DXUI-25: stores an image the text embeds (the attach chord, or a paste with no `onFilesAdded`) and resolves with its\n   * URL; overrides the nearest `MarkdownImageUploadProvider`. A file pasted or dropped WITH `onFilesAdded` is staged as an\n   * attachment instead and never reaches this. While an embedded file is not stored the send is unavailable.\n   */\n  uploadImage?: ImageUploader;\n  /** DXUI-74: stores any other file the text embeds as a link, with `uploadImage`'s contract; see `MarkdownEditorProps.uploadFile`. Leaving it out does NOT disable file uploads: the editor falls through to the nearest `MarkdownImageUploadProvider`. A viewer who cannot comment is given an uploader that refuses, as `CommentComposer` does. Set `isFileUrl` with it. */\n  uploadFile?: ImageUploader;\n  /** DXUI-74: the picture types `uploadImage` stores; see `MarkdownEditorProps.imageTypes`. */\n  imageTypes?: readonly string[];\n  /** DXUI-74: whether a link's destination is a stored file, so it gets a tile; see `MarkdownEditorProps.isFileUrl`. */\n  isFileUrl?: (url: string) => boolean;\n  className?: string;\n  /** DXUI-25: focuses the text (`focus(\"end\")` puts the caret after the draft). */\n  ref?: Ref<MarkdownEditorHandle>;\n}\n\n/* DXUI-25: the text's vertical padding in each layout, named once. The className draws it and the max-height calc gives it\n   back, so the editable area's cap equals the old textarea's, which counted its own padding. Each class is a literal for Tailwind. */\nconst TEXT_PADDING = {\n  inline: { className: \"px-1.5 py-1.5\", blockRem: 0.375 },\n  stacked: { className: \"px-1 py-1\", blockRem: 0.25 },\n} as const;\n/** DXUI-25: the allowance per row the old textarea's `maxRows` cap was measured in (the box inherits `text-sm`'s line height). */\nconst ROW_HEIGHT_REM = 1.5;\n\n/** Why the send is unavailable, and whether the stacked layout must show that reason too. */\ninterface SendBlock {\n  reason: string;\n  /** DXUI-18: the stacked send stays the plain disabled button for the built-in rules (empty, a file uploading, busy);\n      a block that must be read (the caller's reason, an unstored image) switches it to the `Button` that carries a tooltip. */\n  explained: boolean;\n}\n\n/**\n * DXUI-18 / DXUI-25: THE ONE ORDER of the send's rules - the first that holds blocks it, and `undefined` means it can send.\n * `canSend`, the inline send's tooltip and the stacked send's choice of button all read this, so a new rule is one line here.\n */\nfunction sendBlockOf(rules: {\n  submitDisabledReason: string | undefined;\n  unstoredImages: number;\n  hasUploadingFile: boolean;\n  hasContent: boolean;\n  inactive: boolean;\n  strings: Pick<UiStrings[\"chat\"][\"composer\"], \"sendUnstoredImage\" | \"sendUploading\" | \"sendNothing\" | \"unavailable\">;\n}): SendBlock | undefined {\n  const { strings } = rules;\n  /* The caller's reason wins over every built-in one. */\n  if (rules.submitDisabledReason !== undefined) return { reason: rules.submitDisabledReason, explained: true };\n  /* PLN-10 R-1: an image in the text that is uploading, failed or only local is a `blob:` URL no other reader can load. */\n  if (rules.unstoredImages > 0) return { reason: strings.sendUnstoredImage, explained: true };\n  /* A file mid-upload has no id the caller can send yet. */\n  if (rules.hasUploadingFile) return { reason: strings.sendUploading, explained: false };\n  if (!rules.hasContent) return { reason: strings.sendNothing, explained: false };\n  if (rules.inactive) return { reason: strings.unavailable, explained: false };\n  return undefined;\n}\n\nexport function Composer({\n  value,\n  onValueChange,\n  onSubmit,\n  layout = \"stacked\",\n  submitOn = \"enter\",\n  submitDisabledReason,\n  files = [],\n  onFilesAdded,\n  onFileRemoved,\n  busy = false,\n  onStop,\n  placeholder,\n  disabled = false,\n  error,\n  toolbar,\n  leading,\n  hint,\n  accept,\n  maxRows = 12,\n  uploadImage,\n  uploadFile,\n  imageTypes,\n  isFileUrl,\n  className,\n  ref,\n}: ComposerProps) {\n  const strings = useUiStrings().chat.composer;\n  const placeholderText = placeholder ?? strings.placeholder;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [dragging, setDragging] = useState(false);\n\n  /* DXUI-25: THE EDITOR'S SAVE GATE HOLDS FOR THE SEND (PLN-10 R-1): the editor reports how many images in the text are not stored. */\n  const [unstoredImages, setUnstoredImages] = useState(0);\n  /* A file mid-upload has no id the caller can send yet, so Send must not fire while one is in flight, or a chat consumer\n     either sends a partial file set or invents its own guard on top of a button that visibly says \"go\". */\n  const sendBlock = sendBlockOf({\n    submitDisabledReason,\n    unstoredImages,\n    hasUploadingFile: files.some((file) => file.status === \"uploading\"),\n    hasContent: value.trim().length > 0 || files.length > 0,\n    inactive: disabled || busy,\n    strings,\n  });\n  const canSend = sendBlock === undefined;\n  const inline = layout === \"inline\";\n  const padding = TEXT_PADDING[layout];\n\n  const submit = () => {\n    if (!canSend) return;\n    onSubmit(value, files);\n  };\n\n  /* DXUI-25: bound in the CAPTURE phase. The editor's own key handling is a native listener on its editable and consumes\n     Enter (a new line, a list item), so by the time a bubbling handler ran the key would already be spent. */\n  const onKeyDownCapture = (event: KeyboardEvent<HTMLElement>) => {\n    /* A key typed in a menu or popover the editor portals out still bubbles through React to here; only the text is ours. */\n    if (!(event.target as Element).closest(\"[data-md-editable]\")) return;\n    /* Enter sends, Shift+Enter breaks the line. The reverse is defensible for\n       long-form writing, but this is a chat: the overwhelmingly common action\n       is send, and it should be the unqualified key.\n\n       IME composition is excluded — while composing Japanese or Chinese, Enter\n       commits the candidate and must never send a half-typed word. */\n    if (event.key !== \"Enter\" || event.nativeEvent.isComposing) return;\n    /* DXUI-18: `mod-enter` is the long-form reading of the choice above - the plain key breaks the line (the browser's\n       own behavior, so it is left alone) and only Ctrl/Cmd+Enter sends. */\n    if (submitOn === \"mod-enter\" ? !(event.ctrlKey || event.metaKey) : event.shiftKey) return;\n    event.preventDefault();\n    event.stopPropagation();\n    submit();\n  };\n\n  const onPasteCapture = (event: ClipboardEvent<HTMLElement>) => {\n    if (!onFilesAdded) return;\n    const pasted = [...event.clipboardData.files];\n    if (pasted.length === 0) return;\n    /* Pasting a screenshot is how most images reach a chat. Without this it\n       pastes nothing at all, which reads as the app being broken. */\n    event.preventDefault();\n    event.stopPropagation();\n    onFilesAdded(pasted);\n  };\n\n  /* Capture phase (DXUI-25): the editor also takes dropped image files into the markdown, and a composer that stages\n     attachments must be the only one to take them. */\n  const onDropCapture = (event: DragEvent<HTMLDivElement>) => {\n    setDragging(false);\n    if (!onFilesAdded) return;\n    const dropped = [...event.dataTransfer.files];\n    if (dropped.length === 0) return;\n    event.preventDefault();\n    event.stopPropagation();\n    onFilesAdded(dropped);\n  };\n\n  const fileInput = onFilesAdded && (\n    <input\n      ref={inputRef}\n      type=\"file\"\n      multiple\n      accept={accept}\n      onChange={(event) => {\n        const chosen = [...(event.target.files ?? [])];\n        if (chosen.length > 0) onFilesAdded(chosen);\n        /* Cleared so choosing the SAME file twice in a row still\n           fires a change event. */\n        event.target.value = \"\";\n      }}\n      className=\"sr-only\"\n      tabIndex={-1}\n      /* Out of the accessibility tree entirely. The paperclip button\n         is the labelled control and the only way in; leaving this in\n         the tree offers a second, unlabelled file input to anyone\n         using a screen reader, which is worse than not exposing it. */\n      aria-hidden\n    />\n  );\n\n  const textbox = (\n    <div data-composer-text=\"\" onKeyDownCapture={onKeyDownCapture} onPasteCapture={onPasteCapture} className={inline ? \"flex min-h-control-sm min-w-0 flex-1 flex-col justify-center\" : \"w-full\"}>\n      <MarkdownEditor\n        ref={ref}\n        /* I18N-ALLOW: editor chrome token, not words */\n        chrome=\"bare\"\n        label={placeholderText}\n        value={value}\n        onChange={onValueChange}\n        placeholder={placeholderText}\n        readOnly={disabled}\n        uploadImage={uploadImage}\n        uploadFile={uploadFile}\n        imageTypes={imageTypes}\n        isFileUrl={isFileUrl}\n        onImageUploadStateChange={(state) => setUnstoredImages(state.unstored)}\n        /* No floor of the editor's own: the box is one line tall until the draft grows, as the textarea was. */\n        minHeight={0}\n        maxHeight={`calc(${maxRows} * ${ROW_HEIGHT_REM}rem - ${2 * padding.blockRem}rem)`}\n        className={cn(\n          \"text-sm text-primary\",\n          /* DXUI-18: inline, the field is the row's flexible middle. The wrapper's `min-h-control-sm` is the height of the buttons beside it\n             (it lifts to 44px under a coarse pointer together with them) and centres a one-line draft on them (DXUI-31); a\n             taller draft fills the wrapper, reads from the top and grows upward from the same bottom edge. */\n          padding.className,\n        )}\n      />\n    </div>\n  );\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5\", className)}>\n      <div\n        onDragOver={(event) => {\n          if (!onFilesAdded) return;\n          event.preventDefault();\n          setDragging(true);\n        }}\n        onDragLeave={(event) => {\n          /* Only when the pointer leaves the composer itself. Without the\n             containment check, dragging across a child fires leave and the\n             highlight strobes. */\n          if (event.currentTarget.contains(event.relatedTarget as Node)) return;\n          setDragging(false);\n        }}\n        onDropCapture={onDropCapture}\n        data-composer-box=\"\"\n        data-dragging={dragging || undefined}\n        className={cn(\n          \"relative flex flex-col rounded-2xl border bg-field\",\n          inline ? \"gap-1.5 p-1.5\" : \"gap-2 p-2.5\",\n          \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-(--ease-standard)\",\n          \"focus-within:border-control focus-within:ring-4 focus-within:ring-control-focus-halo\",\n          error ? \"border-danger-border\" : \"border-field-border\",\n          dragging && \"border-control ring-4 ring-control-focus-halo\",\n          disabled && \"opacity-60\",\n        )}\n      >\n        {files.length > 0 && (\n          <AttachmentList\n            files={files}\n            layout={inline ? \"strip\" : \"tile\"}\n            onRemove={onFileRemoved}\n            disabled={disabled}\n            className={inline ? \"px-1.5 pt-1.5\" : undefined}\n          />\n        )}\n\n        {inline ? (\n          <div className=\"flex items-end gap-1\">\n            {onFilesAdded && (\n              <>\n                {fileInput}\n                <IconButton\n                  icon={<Icon name=\"paperclip\" size=\"md\" />}\n                  label={strings.attach}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  disabledReason={disabled ? strings.unavailable : undefined}\n                  onClick={() => inputRef.current?.click()}\n                />\n              </>\n            )}\n            {leading}\n            {textbox}\n            {busy && onStop ? (\n              <IconButton\n                icon={<span className=\"size-2.5 rounded-[3px] bg-current\" />}\n                label={strings.stop}\n                variant=\"outline\"\n                size=\"sm\"\n                /* DXUI-19: the stop and send buttons are circles in both layouts. */\n                className=\"rounded-full\"\n                onClick={onStop}\n              />\n            ) : (\n              <IconButton\n                icon={<Icon name=\"arrow-up\" size=\"md\" />}\n                label={strings.send}\n                variant=\"solid\"\n                size=\"sm\"\n                className=\"rounded-full\"\n                disabledReason={sendBlock?.reason}\n                onClick={submit}\n              />\n            )}\n          </div>\n        ) : (\n          <>\n            {textbox}\n\n            {/* A CONTAINER QUERY, not a viewport one. This row is inside a resizable\n                panel, so its width has almost nothing to do with the window: the same\n                composer is 720px wide on a phone-shaped panel that has been dragged\n                open and 360px wide on a desktop with a narrow chat pane. A `sm:`\n                variant would answer the wrong question in both directions. */}\n            <div className=\"@container flex items-center gap-1\">\n              {onFilesAdded && (\n                <>\n                  {fileInput}\n                  <Tooltip content={strings.attach}>\n                    <button\n                      type=\"button\"\n                      onClick={() => inputRef.current?.click()}\n                      disabled={disabled}\n                      aria-label={strings.attach}\n                      className={cn(\n                        \"dx-tap grid size-7 shrink-0 cursor-pointer place-items-center rounded-lg text-tertiary 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                        disabled && \"pointer-events-none opacity-50\",\n                      )}\n                    >\n                      <Icon name=\"paperclip\" size=\"sm\" />\n                    </button>\n                  </Tooltip>\n                </>\n              )}\n\n              {leading}\n              {toolbar && <div className=\"flex min-w-0 items-center gap-0.5\">{toolbar}</div>}\n\n              <div className=\"ml-auto flex items-center gap-2\">\n                {/* The hint is the first thing to go when the row runs out of room:\n                    it repeats a shortcut the person either knows or can discover by\n                    pressing Enter, while everything beside it is a control. Below a\n                    24rem row it was wrapping onto two lines and colliding with the\n                    send button. */}\n                {hint && <span className=\"hidden text-2xs text-tertiary @sm:inline\">{hint}</span>}\n\n                {busy && onStop ? (\n                  <Tooltip content={strings.stop}>\n                    <button\n                      type=\"button\"\n                      onClick={onStop}\n                      aria-label={strings.stop}\n                      /* `dx-ground-raised`: this button paints its OWN resting\n                         surface, so its hover has to be measured from that and not\n                         from the composer behind it. */\n                      className=\"dx-ground-raised dx-tap grid size-8 shrink-0 cursor-pointer place-items-center rounded-full bg-surface-raised text-primary outline-none ring-1 ring-border transition-colors duration-(--dur-fast) hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-focus-ring\"\n                    >\n                      {/* A square, not an X: stop is not dismiss, and the square is\n                          the universal transport symbol for it. */}\n                      <span className=\"size-2.5 rounded-[3px] bg-current\" />\n                    </button>\n                  </Tooltip>\n                ) : (\n                  /* DXUI-18: a stacked composer is a surface already in use, so with no `submitDisabledReason` its send is\n                     the button it always was (a `Button` differs in size, dimming, focus ring, press translate, ripple and\n                     cursor). A reason is the opt-in, and `Button` owns what a reason needs - soft-disabled, tooltip,\n                     accessible description. */\n                  !sendBlock?.explained ? (\n                    <button\n                      type=\"button\"\n                      onClick={submit}\n                      disabled={!canSend}\n                      aria-label={strings.send}\n                      className={cn(\n                        \"dx-tap grid size-8 shrink-0 cursor-pointer place-items-center rounded-full outline-none\",\n                        \"transition-[var(--tx-colors),transform] duration-(--dur-fast) ease-(--ease-snappy)\",\n                        \"focus-visible:ring-2 focus-visible:ring-focus-ring\",\n                        canSend\n                          ? \"bg-accent text-accent-contrast hover:bg-accent-hover active:scale-95\"\n                          : \"cursor-not-allowed bg-surface-inset text-disabled\",\n                      )}\n                    >\n                      <Icon name=\"arrow-up\" size=\"sm\" />\n                    </button>\n                  ) : (\n                    <Button\n                      variant=\"solid\"\n                      size=\"sm\"\n                      iconOnly\n                      aria-label={strings.send}\n                      onClick={submit}\n                      disabledReason={sendBlock.reason}\n                      /* `h-8!`: `size=\"sm\"` carries `h-control-sm` (36px), which `size-8` does not displace, so the box would grow 4px\n                         whenever a reason appears; the important height pins it to the 32px of the button without one. */\n                      className=\"dx-tap size-8 h-8! rounded-full\"\n                    >\n                      <Icon name=\"arrow-up\" size=\"sm\" />\n                    </Button>\n                  )\n                )}\n              </div>\n            </div>\n          </>\n        )}\n\n        {dragging && (\n          <div className=\"pointer-events-none absolute inset-0 grid place-items-center rounded-2xl bg-control-subtle/80\">\n            <span className=\"flex items-center gap-2 text-sm font-medium text-control-text\">\n              <Icon name=\"upload\" size=\"sm\" />\n              {strings.dropToAttach}\n            </span>\n          </div>\n        )}\n      </div>\n\n      {inline && (toolbar || hint) && (\n        <div className=\"flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 px-1.5 text-xs text-secondary\">\n          {toolbar}\n          {hint}\n        </div>\n      )}\n\n      {error && (\n        <p className=\"flex items-center gap-1.5 px-1 text-2xs text-danger-text\">\n          <Icon name=\"circle-alert\" size=\"xs\" />\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"names":["TEXT_PADDING","ROW_HEIGHT_REM","sendBlockOf","rules","strings","Composer","value","onValueChange","onSubmit","layout","submitOn","submitDisabledReason","files","onFilesAdded","onFileRemoved","busy","onStop","placeholder","disabled","error","toolbar","leading","hint","accept","maxRows","uploadImage","uploadFile","imageTypes","isFileUrl","className","ref","useUiStrings","placeholderText","inputRef","useRef","dragging","setDragging","useState","unstoredImages","setUnstoredImages","sendBlock","file","canSend","inline","padding","submit","onKeyDownCapture","event","onPasteCapture","pasted","onDropCapture","dropped","fileInput","jsx","chosen","textbox","MarkdownEditor","state","cn","jsxs","AttachmentList","Fragment","IconButton","Icon","Tooltip","Button"],"mappings":"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"}

package/dist/components/chat/ContextMeter.js

@@ -0,0 +1,202 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { useId as C } from "react";
+import { cn as i } from "../../lib/cn.js";
+import { formatPercent as L } from "../../lib/intl-cache.js";
+import { formatTokens as m } from "../../lib/format.js";
+import { Icon as S } from "../Icon.js";
+import { Popover as T } from "../Popover.js";
+import { ProgressRing as I } from "../Progress.js";
+import { useUiLocale as P, useUiStrings as E } from "../../lib/i18n/provider.js";
+const f = [
+  "var(--color-accent)",
+  "var(--color-info)",
+  "var(--color-warning)",
+  "var(--color-success)",
+  "var(--color-brand)"
+];
+function H({
+  segments: n,
+  capacity: t,
+  limits: s,
+  warnAt: u = 0.8,
+  dangerAt: g = 0.92,
+  inline: b = !1,
+  side: _ = "top",
+  align: j = "start",
+  className: v
+}) {
+  const c = P(), d = E().chat.contextMeter, h = (r) => L(Math.round(r), c), N = C(), p = n.reduce((r, l) => r + Math.max(0, l.tokens), 0), x = t > 0 ? p / t : 0, w = Math.round(x * 100), o = x >= g ? "danger" : x >= u ? "warning" : "normal", y = d.summary(m(p, c), m(t, c), h(w)), z = /* @__PURE__ */ e(
+    "div",
+    {
+      role: "img",
+      "aria-labelledby": N,
+      className: "flex h-1.5 w-full gap-px overflow-hidden rounded-full bg-surface-inset",
+      children: n.map((r, l) => {
+        const k = t > 0 ? r.tokens / t * 100 : 0;
+        return k <= 0 ? null : /* @__PURE__ */ e(
+          "span",
+          {
+            className: "h-full first:rounded-l-full transition-[var(--tx-colors),width] duration-(--dur-slow) ease-(--ease-standard)",
+            style: {
+              width: `${k}%`,
+              background: r.color ?? (o === "danger" && l === n.length - 1 ? "var(--color-danger)" : f[l % f.length])
+            }
+          },
+          r.id
+        );
+      })
+    }
+  ), M = (
+    /* Marker for the overlay and visual gates — same reason as the effort
+       panel: the popup's own DOM has no selector a probe can name without
+       depending on an implementation detail. */
+    /* DX-4086 — in the popup the design width lives on the popup (`width` below) and the
+       panel fills it; inline there is no popup, so the panel keeps its own 18rem, capped
+       by its container. */
+    /* @__PURE__ */ a(
+      "div",
+      {
+        "data-context-panel": "",
+        className: i("flex min-w-0 flex-col gap-3", b ? ["w-72 max-w-full", v] : "w-full"),
+        children: [
+          /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-baseline justify-between gap-3", children: [
+              /* @__PURE__ */ e("span", { id: N, className: "text-sm font-semibold text-primary", children: d.title }),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: i(
+                    "font-mono text-2xs tabular-nums",
+                    o === "danger" ? "text-danger-text" : o === "warning" ? "text-warning-text" : "text-tertiary"
+                  ),
+                  children: y
+                }
+              )
+            ] }),
+            z
+          ] }),
+          /* @__PURE__ */ a("ul", { className: "flex flex-col gap-1", children: [
+            n.map((r, l) => /* @__PURE__ */ a("li", { className: "flex items-center gap-2 text-2xs", children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: "size-2 shrink-0 rounded-[3px]",
+                  style: {
+                    background: r.color ?? f[l % f.length]
+                  }
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "flex-1 truncate text-secondary", children: r.label }),
+              /* @__PURE__ */ e("span", { className: "font-mono tabular-nums text-tertiary", children: m(r.tokens, c) })
+            ] }, r.id)),
+            /* @__PURE__ */ a("li", { className: "flex items-center gap-2 text-2xs", children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: "size-2 shrink-0 rounded-[3px] border border-border bg-surface-inset"
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "flex-1 truncate text-tertiary", children: d.free }),
+              /* @__PURE__ */ e("span", { className: "font-mono tabular-nums text-tertiary", children: m(Math.max(0, t - p), c) })
+            ] })
+          ] }),
+          s && s.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 border-t border-border-subtle pt-3", children: s.map((r) => /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-baseline justify-between gap-3 text-2xs", children: [
+              /* @__PURE__ */ e("span", { className: "truncate font-medium text-secondary", children: r.label }),
+              r.resets && /* @__PURE__ */ e("span", { className: "shrink-0 text-tertiary", children: r.resets }),
+              /* @__PURE__ */ e("span", { className: "font-mono tabular-nums text-tertiary", children: h(r.percent) })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "h-1 w-full overflow-hidden rounded-full bg-surface-inset", children: /* @__PURE__ */ e(
+              "div",
+              {
+                className: i(
+                  "h-full rounded-full transition-[var(--tx-colors),width] duration-(--dur-slow) ease-(--ease-standard)",
+                  r.percent >= g * 100 ? "bg-danger" : r.percent >= u * 100 ? "bg-warning" : "bg-accent"
+                ),
+                style: { width: `${Math.min(100, Math.max(0, r.percent))}%` }
+              }
+            ) })
+          ] }, r.id)) })
+        ]
+      }
+    )
+  );
+  return b ? M : /* @__PURE__ */ e(
+    T,
+    {
+      side: _,
+      align: j,
+      width: "calc(19.5rem*var(--ui-scale))",
+      className: "p-3",
+      trigger: /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          "aria-label": d.triggerLabel(y),
+          className: i(
+            "dx-tap group/context inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-1",
+            "transition-colors duration-(--dur-fast) hover:bg-surface-hover",
+            "outline-none focus-visible:ring-2 focus-visible:ring-focus-ring",
+            v
+          ),
+          children: [
+            /* @__PURE__ */ e(O, { fraction: x, tone: o, label: d.dialLabel }),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: i(
+                  "font-mono text-2xs tabular-nums transition-colors duration-(--dur-fast)",
+                  o === "danger" ? "text-danger-text" : o === "warning" ? "text-warning-text" : "text-tertiary group-hover/context:text-secondary"
+                ),
+                children: h(w)
+              }
+            ),
+            /* @__PURE__ */ e(
+              S,
+              {
+                name: "chevron-right",
+                size: "xs",
+                className: "text-tertiary transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-fast) group-hover/context:translate-x-0.5"
+              }
+            )
+          ]
+        }
+      ),
+      children: M
+    }
+  );
+}
+function O({ fraction: n, tone: t, label: s }) {
+  const u = t === "danger" ? "danger" : t === "warning" ? "warning" : "accent";
+  return /* @__PURE__ */ e(
+    I,
+    {
+      value: Math.min(1, Math.max(0, n)) * 100,
+      tone: u,
+      size: "xs",
+      showValue: !1,
+      label: s
+    }
+  );
+}
+function J({ children: n, active: t = !0, className: s }) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-live": "polite",
+      className: i(
+        "text-2xs font-medium",
+        t ? "animate-shimmer bg-[linear-gradient(90deg,var(--color-tertiary)_20%,var(--color-primary)_45%,var(--color-tertiary)_70%)] bg-[length:220%_100%] bg-clip-text text-transparent" : "text-tertiary",
+        s
+      ),
+      children: n
+    }
+  );
+}
+export {
+  J as ChatStatus,
+  H as ContextMeter
+};
+//# sourceMappingURL=ContextMeter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMeter.js","sources":["../../../src/components/chat/ContextMeter.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiLocale, useUiStrings } from \"../../lib/i18n\";\nimport { formatPercent } from \"../../lib/intl-cache\";\nimport { formatTokens } from \"../../lib/format\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport { ProgressRing, type ProgressTone } from \"../Progress\";\n\n/* ============================================================================\n   CONTEXT METER\n   How much of the window is spoken for, and by what.\n\n   SEGMENTED, NOT A SINGLE FILL. \"76% remaining\" answers the wrong question.\n   The useful one is what is EATING it — a system prompt and a set of tool\n   definitions are fixed costs you cannot type your way out of, while message\n   history is the part that compaction reclaims. One bar with one colour hides\n   the only distinction that changes what a person does next.\n\n   NOT A PROGRESS BAR. `Progress` announces a task advancing toward completion;\n   filling a context window is neither a task nor desirable. This is closer to\n   a fuel gauge, and it carries `role=\"img\"` with a written label rather than\n   progressbar semantics that would have a screen reader narrate consumption as\n   achievement.\n   ========================================================================= */\n\nexport interface ContextSegment {\n  id: string;\n  label: string;\n  tokens: number;\n  /** Any CSS colour. Defaults walk a fixed palette in declaration order. */\n  color?: string;\n}\n\nconst SEGMENT_COLORS = [\n  \"var(--color-accent)\",\n  \"var(--color-info)\",\n  \"var(--color-warning)\",\n  \"var(--color-success)\",\n  \"var(--color-brand)\",\n];\n\nexport interface UsageLimit {\n  id: string;\n  label: string;\n  /** 0–100. */\n  percent: number;\n  /** \"Resets in 1 hr 46 min\" — relative or absolute, whichever is clearer. */\n  resets?: string;\n}\n\nexport interface ContextMeterProps {\n  segments: ContextSegment[];\n  /** Total window size in tokens. */\n  capacity: number;\n  /** Plan or rate limits, listed under the breakdown. */\n  limits?: UsageLimit[];\n  /** Fraction of capacity at which the bar turns amber, then red. */\n  warnAt?: number;\n  dangerAt?: number;\n  /** Renders the panel inline rather than behind a trigger row. */\n  inline?: boolean;\n  side?: \"top\" | \"bottom\";\n  align?: \"start\" | \"center\" | \"end\";\n  className?: string;\n}\n\nexport function ContextMeter({\n  segments,\n  capacity,\n  limits,\n  warnAt = 0.8,\n  dangerAt = 0.92,\n  inline = false,\n  side = \"top\",\n  align = \"start\",\n  className,\n}: ContextMeterProps) {\n  const locale = useUiLocale();\n  const strings = useUiStrings().chat.contextMeter;\n  const percentText = (value: number) => formatPercent(Math.round(value), locale);\n  const labelId = useId();\n  const used = segments.reduce((total, segment) => total + Math.max(0, segment.tokens), 0);\n  const fraction = capacity > 0 ? used / capacity : 0;\n  const percent = Math.round(fraction * 100);\n\n  const tone = fraction >= dangerAt ? \"danger\" : fraction >= warnAt ? \"warning\" : \"normal\";\n  const summary = strings.summary(formatTokens(used, locale), formatTokens(capacity, locale), percentText(percent));\n\n  const bar = (\n    <div\n      role=\"img\"\n      aria-labelledby={labelId}\n      className=\"flex h-1.5 w-full gap-px overflow-hidden rounded-full bg-surface-inset\"\n    >\n      {segments.map((segment, index) => {\n        const share = capacity > 0 ? (segment.tokens / capacity) * 100 : 0;\n        if (share <= 0) return null;\n        return (\n          <span\n            key={segment.id}\n            className=\"h-full first:rounded-l-full transition-[var(--tx-colors),width] duration-(--dur-slow) ease-(--ease-standard)\"\n            style={{\n              width: `${share}%`,\n              background:\n                segment.color ??\n                (tone === \"danger\" && index === segments.length - 1\n                  ? \"var(--color-danger)\"\n                  : SEGMENT_COLORS[index % SEGMENT_COLORS.length]),\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n\n  const panel = (\n    /* Marker for the overlay and visual gates — same reason as the effort\n       panel: the popup's own DOM has no selector a probe can name without\n       depending on an implementation detail. */\n    /* DX-4086 — in the popup the design width lives on the popup (`width` below) and the\n       panel fills it; inline there is no popup, so the panel keeps its own 18rem, capped\n       by its container. */\n    <div\n      data-context-panel=\"\"\n      className={cn(\"flex min-w-0 flex-col gap-3\", inline ? [\"w-72 max-w-full\", className] : \"w-full\")}\n    >\n      <div className=\"flex flex-col gap-1.5\">\n        <div className=\"flex items-baseline justify-between gap-3\">\n          <span id={labelId} className=\"text-sm font-semibold text-primary\">\n            {strings.title}\n          </span>\n          <span\n            className={cn(\n              \"font-mono text-2xs tabular-nums\",\n              tone === \"danger\"\n                ? \"text-danger-text\"\n                : tone === \"warning\"\n                  ? \"text-warning-text\"\n                  : \"text-tertiary\",\n            )}\n          >\n            {summary}\n          </span>\n        </div>\n        {bar}\n      </div>\n\n      <ul className=\"flex flex-col gap-1\">\n        {segments.map((segment, index) => (\n          <li key={segment.id} className=\"flex items-center gap-2 text-2xs\">\n            <span\n              aria-hidden\n              className=\"size-2 shrink-0 rounded-[3px]\"\n              style={{\n                background: segment.color ?? SEGMENT_COLORS[index % SEGMENT_COLORS.length],\n              }}\n            />\n            <span className=\"flex-1 truncate text-secondary\">{segment.label}</span>\n            <span className=\"font-mono tabular-nums text-tertiary\">\n              {formatTokens(segment.tokens, locale)}\n            </span>\n          </li>\n        ))}\n        <li className=\"flex items-center gap-2 text-2xs\">\n          <span\n            aria-hidden\n            className=\"size-2 shrink-0 rounded-[3px] border border-border bg-surface-inset\"\n          />\n          <span className=\"flex-1 truncate text-tertiary\">{strings.free}</span>\n          <span className=\"font-mono tabular-nums text-tertiary\">\n            {formatTokens(Math.max(0, capacity - used), locale)}\n          </span>\n        </li>\n      </ul>\n\n      {limits && limits.length > 0 && (\n        <div className=\"flex flex-col gap-2 border-t border-border-subtle pt-3\">\n          {limits.map((limit) => (\n            <div key={limit.id} className=\"flex flex-col gap-1\">\n              <div className=\"flex items-baseline justify-between gap-3 text-2xs\">\n                <span className=\"truncate font-medium text-secondary\">{limit.label}</span>\n                {limit.resets && <span className=\"shrink-0 text-tertiary\">{limit.resets}</span>}\n                <span className=\"font-mono tabular-nums text-tertiary\">\n                  {percentText(limit.percent)}\n                </span>\n              </div>\n              <div className=\"h-1 w-full overflow-hidden rounded-full bg-surface-inset\">\n                <div\n                  className={cn(\n                    \"h-full rounded-full transition-[var(--tx-colors),width] duration-(--dur-slow) ease-(--ease-standard)\",\n                    limit.percent >= dangerAt * 100\n                      ? \"bg-danger\"\n                      : limit.percent >= warnAt * 100\n                        ? \"bg-warning\"\n                        : \"bg-accent\",\n                  )}\n                  style={{ width: `${Math.min(100, Math.max(0, limit.percent))}%` }}\n                />\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n\n  if (inline) return panel;\n\n  return (\n    <Popover\n      side={side}\n      align={align}\n      /* 19.5rem = the panel's 18rem design width (the `w-72` it keeps inline) plus this\n         popup's `p-3` (1.5rem); the popup width includes its padding. */\n      width=\"calc(19.5rem*var(--ui-scale))\"\n      className=\"p-3\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={strings.triggerLabel(summary)}\n          className={cn(\n            \"dx-tap group/context inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-1\",\n            \"transition-colors duration-(--dur-fast) hover:bg-surface-hover\",\n            \"outline-none focus-visible:ring-2 focus-visible:ring-focus-ring\",\n            className,\n          )}\n        >\n          {/* A ring rather than a bar on the trigger: it holds a percentage in\n              a square the height of the text it sits beside, where a\n              meaningful horizontal bar would need three times the width. */}\n          <ContextDial fraction={fraction} tone={tone} label={strings.dialLabel} />\n          <span\n            className={cn(\n              \"font-mono text-2xs tabular-nums transition-colors duration-(--dur-fast)\",\n              tone === \"danger\"\n                ? \"text-danger-text\"\n                : tone === \"warning\"\n                  ? \"text-warning-text\"\n                  : \"text-tertiary group-hover/context:text-secondary\",\n            )}\n          >\n            {percentText(percent)}\n          </span>\n          <Icon\n            name=\"chevron-right\"\n            size=\"xs\"\n            className=\"text-tertiary transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-fast) group-hover/context:translate-x-0.5\"\n          />\n        </button>\n      }\n    >\n      {panel}\n    </Popover>\n  );\n}\n\n/**\n * DX-2948: this used to be a hand-rolled `pathLength=\"1\"` single-arc SVG,\n * geometrically identical to (and drifting from) `ProgressRing`'s own arc\n * maths. It now delegates to `ProgressRing` at the new `xs` size instead of\n * re-deriving that math a second time — one compact-ring implementation,\n * not two. `showValue` stays off: two digits do not fit a 14px circle, and\n * the percentage is already rendered as text beside the dial.\n */\nfunction ContextDial({ fraction, tone, label }: { fraction: number; tone: string; label: string }) {\n  const ringTone: ProgressTone = tone === \"danger\" ? \"danger\" : tone === \"warning\" ? \"warning\" : \"accent\";\n  return (\n    <ProgressRing\n      value={Math.min(1, Math.max(0, fraction)) * 100}\n      tone={ringTone}\n      size=\"xs\"\n      showValue={false}\n      label={label}\n    />\n  );\n}\n\n/**\n * A live status line for the composer — \"Thinking…\", \"Ran 3 commands\".\n *\n * Shimmer rather than a spinner: a spinner beside text competes with it for\n * attention and adds a second thing moving in a row that already has one. The\n * text saying what is happening IS the indicator.\n */\nexport interface ChatStatusProps {\n  children: ReactNode;\n  active?: boolean;\n  className?: string;\n}\n\nexport function ChatStatus({ children, active = true, className }: ChatStatusProps) {\n  return (\n    <span\n      aria-live=\"polite\"\n      className={cn(\n        \"text-2xs font-medium\",\n        active\n          ? \"animate-shimmer bg-[linear-gradient(90deg,var(--color-tertiary)_20%,var(--color-primary)_45%,var(--color-tertiary)_70%)] bg-[length:220%_100%] bg-clip-text text-transparent\"\n          : \"text-tertiary\",\n        className,\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["SEGMENT_COLORS","ContextMeter","segments","capacity","limits","warnAt","dangerAt","inline","side","align","className","locale","useUiLocale","strings","useUiStrings","percentText","value","formatPercent","labelId","useId","used","total","segment","fraction","percent","tone","summary","formatTokens","bar","jsx","index","share","panel","jsxs","cn","limit","Popover","ContextDial","Icon","label","ringTone","ProgressRing","ChatStatus","children","active"],"mappings":"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"}