@agimon-ai/doompi-web-components 0.0.1-alpha.4 → 0.0.1-alpha.41

package/dist/src/components/MessageItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.cjs","names":["createContext","useContext","cva","STATUS_EDGE","useState","cn","StatusBadge","Button","ChevronUpIcon","ChevronDownIcon"],"sources":["../../../src/components/MessageItem.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, createContext, type ReactNode, useContext, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icons/icons.ts';\nimport { cn } from '../lib/cn.ts';\nimport { Button } from './Button.tsx';\nimport { STATUS_EDGE, StatusBadge, type StatusTone } from './StatusBadge.tsx';\n\n/**\n * The message item: the timeline card a tool call, a run, or a notice sits\n * in. The item owns its outcome tone and its expand state; the header, body,\n * and status parts read both from it, so a card composes the parts and never\n * threads `expanded` by hand. A tool message in a web plugin is built from\n * this, and so is the cockpit's own fallback item, which is what keeps them\n * looking alike.\n */\n\nexport interface MessageItemState {\n  tone: StatusTone;\n  /** Whether the header offers the toggle; an item that hides nothing offers none. */\n  expandable: boolean;\n  expanded: boolean;\n  toggle: () => void;\n}\n\nconst MessageItemContext = createContext<MessageItemState>({\n  tone: 'neutral',\n  expandable: false,\n  expanded: false,\n  toggle: () => undefined,\n});\n\n/** The enclosing item's state, for a part that lives deeper than the item's render prop. */\nexport function useMessageItem(): MessageItemState {\n  return useContext(MessageItemContext);\n}\n\n/** The frame, wearing the edge STATUS_EDGE names for the tone, so the two never drift apart. */\nexport const messageItemVariants = cva('overflow-hidden rounded-md border bg-doom-panel transition-colors', {\n  variants: { tone: STATUS_EDGE },\n  defaultVariants: { tone: 'neutral' },\n});\n\nexport interface MessageItemProps\n  extends Omit<ComponentProps<'div'>, 'children'>, VariantProps<typeof messageItemVariants> {\n  /** Whether the header offers the expand toggle. A toggle that reveals nothing reads as broken, so the card decides. */\n  expandable?: boolean;\n  defaultExpanded?: boolean;\n  /** Controlled mode; pair with onExpandedChange. Omit it and the item keeps its own state. */\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Plain content, or a function of the item's state for a card that picks its lines by `expanded`. */\n  children?: ReactNode | ((state: MessageItemState) => ReactNode);\n}\n\nexport function MessageItem({\n  className,\n  tone,\n  expandable = false,\n  defaultExpanded = false,\n  expanded,\n  onExpandedChange,\n  children,\n  ...props\n}: MessageItemProps) {\n  const [own, setOwn] = useState(defaultExpanded);\n  const current = expanded ?? own;\n  const state: MessageItemState = {\n    tone: tone ?? 'neutral',\n    expandable,\n    expanded: current,\n    toggle: () => {\n      const next = !current;\n      if (expanded === undefined) setOwn(next);\n      onExpandedChange?.(next);\n    },\n  };\n  return (\n    <MessageItemContext.Provider value={state}>\n      <div\n        data-slot=\"message-item\"\n        data-expanded={current}\n        className={cn(messageItemVariants({ tone }), className)}\n        {...props}\n      >\n        {typeof children === 'function' ? children(state) : children}\n      </div>\n    </MessageItemContext.Provider>\n  );\n}\n\n/** The tone a tool call's item wears: running while the tool runs, then its outcome. */\nexport function toolTone(state: { running: boolean; isError: boolean }): StatusTone {\n  return state.running ? 'running' : state.isError ? 'error' : 'ok';\n}\n\n/** The badge text a tone reads as when the header is not told otherwise; empty hides the badge. */\nexport const STATUS_LABEL: Readonly<Record<StatusTone, string>> = {\n  neutral: '',\n  running: 'RUNNING',\n  ok: 'OK',\n  error: 'ERROR',\n  info: 'INFO',\n  accent: 'NOTE',\n};\n\nexport interface MessageItemHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {\n  /** The bold label at the left: the tool name. */\n  title: ReactNode;\n  /** The badge text; defaults to the tone's label, null hides the badge. */\n  badge?: ReactNode | null;\n  /** The summary beside the title; it gets the remaining width. */\n  children?: ReactNode;\n}\n\n/** The title row: label, summary, the tone's badge, and the expand toggle when the item is expandable. */\nexport function MessageItemHeader({ className, title, badge, children, ...props }: MessageItemHeaderProps) {\n  const { tone, expandable, expanded, toggle } = useMessageItem();\n  const label = badge === undefined ? STATUS_LABEL[tone] : badge;\n  return (\n    <div\n      data-slot=\"message-item-header\"\n      className={cn('flex min-h-8 items-center gap-2 px-[11px] text-[11px] text-doom-dim', className)}\n      {...props}\n    >\n      <span className=\"shrink-0 font-bold text-doom-hi\">{title}</span>\n      <div data-slot=\"message-item-summary\" className=\"flex min-w-0 flex-1 items-center gap-2\">\n        {children}\n      </div>\n      {label !== null && label !== '' ? (\n        <StatusBadge tone={tone} data-testid=\"tool-status\">\n          {label}\n        </StatusBadge>\n      ) : null}\n      {expandable ? (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          data-testid=\"tool-expand\"\n          aria-expanded={expanded}\n          aria-label={expanded ? 'collapse' : 'expand'}\n          onClick={toggle}\n          className=\"text-doom-faint hover:text-doom-blue\"\n        >\n          {expanded ? <ChevronUpIcon className=\"h-3 w-3\" /> : <ChevronDownIcon className=\"h-3 w-3\" />}\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n\n/** The recessed body under the header. */\nexport function MessageItemBody({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-item-body\"\n      className={cn('border-t border-doom-border-soft bg-doom-deep px-3 py-2 text-[11px] text-doom-dim', className)}\n      {...props}\n    />\n  );\n}\n\n/** The glyph a tone reads as in a status line. */\nexport const STATUS_GLYPH: Readonly<Record<StatusTone, string>> = {\n  neutral: '…',\n  running: '◐',\n  ok: '✓',\n  error: '✗',\n  info: '●',\n  accent: '●',\n};\n\nexport const messageItemStatusVariants = cva('shrink-0', {\n  variants: {\n    tone: {\n      neutral: 'text-doom-faint',\n      running: 'text-doom-yellow',\n      ok: 'text-doom-green',\n      error: 'text-doom-red',\n      info: 'text-doom-blue',\n      accent: 'text-doom-magenta',\n    } satisfies Record<StatusTone, string>,\n  },\n  defaultVariants: { tone: 'neutral' },\n});\n\nexport interface MessageItemStatusProps extends ComponentProps<'span'>, VariantProps<typeof messageItemStatusVariants> {\n  /** Replaces the tone's glyph. */\n  glyph?: string;\n  /** Renders as a button that expands the item: the \"N more line(s)\" hint. Only className carries over. */\n  expands?: boolean;\n}\n\n/** The one-line status under a body: `◐ running`, `✗ failed`, `✓ done`, or the hint that more is hidden. */\nexport function MessageItemStatus({\n  className,\n  tone,\n  glyph,\n  expands = false,\n  children,\n  ...props\n}: MessageItemStatusProps) {\n  const { toggle } = useMessageItem();\n  const content = (\n    <>\n      <span className={messageItemStatusVariants({ tone })}>{glyph ?? STATUS_GLYPH[tone ?? 'neutral']}</span>\n      <span>{children}</span>\n    </>\n  );\n  if (expands) {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"message-item-status\"\n        data-testid=\"tool-more\"\n        onClick={toggle}\n        className={cn('flex cursor-pointer items-center gap-1.5 text-doom-faint hover:text-doom-blue', className)}\n      >\n        {content}\n      </button>\n    );\n  }\n  return (\n    <span\n      data-slot=\"message-item-status\"\n      className={cn('flex items-center gap-1.5 text-doom-faint', className)}\n      {...props}\n    >\n      {content}\n    </span>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MessageItem.cjs","names":["createContext","useContext","cva","STATUS_EDGE","useState","cn","StatusBadge","Button","ChevronUpIcon","ChevronDownIcon"],"sources":["../../../src/components/MessageItem.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, createContext, type ReactNode, useContext, useState } from 'react';\n\nimport { ChevronDownIcon, ChevronUpIcon } from '../icons/icons';\nimport { cn } from '../lib/cn';\nimport { Button } from './Button';\nimport { STATUS_EDGE, StatusBadge, type StatusTone } from './StatusBadge';\n\n/**\n * The message item: the timeline card a tool call, a run, or a notice sits\n * in. The item owns its outcome tone and its expand state; the header, body,\n * and status parts read both from it, so a card composes the parts and never\n * threads `expanded` by hand. A tool message in a web plugin is built from\n * this, and so is the cockpit's own fallback item, which is what keeps them\n * looking alike.\n */\n\nexport interface MessageItemState {\n  tone: StatusTone;\n  /** Whether the header offers the toggle; an item that hides nothing offers none. */\n  expandable: boolean;\n  expanded: boolean;\n  toggle: () => void;\n}\n\nconst MessageItemContext = createContext<MessageItemState>({\n  tone: 'neutral',\n  expandable: false,\n  expanded: false,\n  toggle: () => undefined,\n});\n\n/** The enclosing item's state, for a part that lives deeper than the item's render prop. */\nexport function useMessageItem(): MessageItemState {\n  return useContext(MessageItemContext);\n}\n\n/**\n * The group an item is a row of, or null for an item that is a card of its\n * own. A row drops the frame the group already draws and keeps its tone as an\n * edge down its left side, and it stops repeating what the group's header has\n * said once: the tool's name, and an outcome the whole run shares.\n */\nconst MessageItemGroupContext = createContext<{ tone: StatusTone } | null>(null);\n\n/** The frame, wearing the edge STATUS_EDGE names for the tone, so the two never drift apart. */\nexport const messageItemVariants = cva('overflow-hidden rounded-md border bg-doom-panel transition-colors', {\n  variants: { tone: STATUS_EDGE },\n  defaultVariants: { tone: 'neutral' },\n});\n\n/** The same tone as a row: no card, one coloured edge, and the group's separators between rows. */\nexport const messageItemRowVariants = cva('overflow-hidden border-l-2 transition-colors', {\n  variants: { tone: STATUS_EDGE },\n  defaultVariants: { tone: 'neutral' },\n});\n\nexport interface MessageItemProps\n  extends Omit<ComponentProps<'div'>, 'children'>, VariantProps<typeof messageItemVariants> {\n  /** Whether the header offers the expand toggle. A toggle that reveals nothing reads as broken, so the card decides. */\n  expandable?: boolean;\n  defaultExpanded?: boolean;\n  /** Controlled mode; pair with onExpandedChange. Omit it and the item keeps its own state. */\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Plain content, or a function of the item's state for a card that picks its lines by `expanded`. */\n  children?: ReactNode | ((state: MessageItemState) => ReactNode);\n}\n\nexport function MessageItem({\n  className,\n  tone,\n  expandable = false,\n  defaultExpanded = false,\n  expanded,\n  onExpandedChange,\n  children,\n  ...props\n}: MessageItemProps) {\n  const [own, setOwn] = useState(defaultExpanded);\n  const group = useContext(MessageItemGroupContext);\n  const grouped = group !== null;\n  const current = expanded ?? own;\n  const state: MessageItemState = {\n    tone: tone ?? 'neutral',\n    expandable,\n    expanded: current,\n    toggle: () => {\n      const next = !current;\n      if (expanded === undefined) setOwn(next);\n      onExpandedChange?.(next);\n    },\n  };\n  return (\n    <MessageItemContext.Provider value={state}>\n      <div\n        data-slot=\"message-item\"\n        data-expanded={current}\n        data-grouped={grouped}\n        className={cn(grouped ? messageItemRowVariants({ tone }) : messageItemVariants({ tone }), className)}\n        {...props}\n      >\n        {typeof children === 'function' ? children(state) : children}\n      </div>\n    </MessageItemContext.Provider>\n  );\n}\n\nexport interface MessageItemGroupProps\n  extends Omit<ComponentProps<'div'>, 'title'>, VariantProps<typeof messageItemVariants> {\n  /** The bold label at the left of the group header: the tool the run belongs to. */\n  title: ReactNode;\n  /** The line beside it, such as how many calls the group holds. */\n  summary?: ReactNode;\n  /** The badge text; defaults to the tone's label, null hides the badge. */\n  badge?: ReactNode | null;\n  children?: ReactNode;\n}\n\n/**\n * One frame around a run of items that belong together.\n *\n * A transcript that calls the same tool five times in a row is five identical\n * frames, five gutter labels and five gaps, and the repetition reads louder\n * than the commands do. The group draws the frame once and each item inside it\n * becomes a row: same header, same expand, no card of its own. The tone still\n * belongs to the row, as an edge, so a failure in the middle of a run is not\n * flattened into the group's own outcome.\n */\nexport function MessageItemGroup({\n  className,\n  tone,\n  title,\n  summary,\n  badge,\n  children,\n  ...props\n}: MessageItemGroupProps) {\n  const label = badge === undefined ? STATUS_LABEL[tone ?? 'neutral'] : badge;\n  return (\n    <MessageItemGroupContext.Provider value={{ tone: tone ?? 'neutral' }}>\n      <div data-slot=\"message-item-group\" className={cn(messageItemVariants({ tone }), className)} {...props}>\n        <div className=\"flex min-h-8 items-center gap-2 border-doom-border-soft border-b px-[11px] text-sm text-doom-dim\">\n          <span className=\"shrink-0 font-bold text-doom-hi\">{title}</span>\n          <span className=\"min-w-0 flex-1 truncate text-doom-faint\">{summary}</span>\n          {label !== null && label !== '' ? <StatusBadge tone={tone ?? 'neutral'}>{label}</StatusBadge> : null}\n        </div>\n        <div className=\"flex flex-col divide-y divide-doom-border-soft\">{children}</div>\n      </div>\n    </MessageItemGroupContext.Provider>\n  );\n}\n\n/** The tone a tool call's item wears: running while the tool runs, then its outcome. */\nexport function toolTone(state: { running: boolean; isError: boolean }): StatusTone {\n  return state.running ? 'running' : state.isError ? 'error' : 'ok';\n}\n\n/** The badge text a tone reads as when the header is not told otherwise; empty hides the badge. */\nexport const STATUS_LABEL: Readonly<Record<StatusTone, string>> = {\n  neutral: '',\n  running: 'RUNNING',\n  ok: 'OK',\n  error: 'ERROR',\n  info: 'INFO',\n  accent: 'NOTE',\n};\n\nexport interface MessageItemHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {\n  /** The bold label at the left: the tool name. */\n  title: ReactNode;\n  /** The badge text; defaults to the tone's label, null hides the badge. */\n  badge?: ReactNode | null;\n  /** The summary beside the title; it gets the remaining width. */\n  children?: ReactNode;\n}\n\n/** Inside a group these two are the quiet outcome: the group's header has already said it. */\nconst SILENT_IN_GROUP: ReadonlySet<StatusTone> = new Set<StatusTone>(['ok', 'neutral']);\n\n/**\n * The title row: label, summary, the tone's badge, and the expand toggle when\n * the item is expandable.\n *\n * A row inside a group says less. The group's header has already named the\n * tool and stated the run's outcome, so the row drops its title and speaks up\n * only when something went wrong or is still going: five OK badges down a run\n * of five are noise, and the one ERROR among them is the point.\n */\nexport function MessageItemHeader({ className, title, badge, children, ...props }: MessageItemHeaderProps) {\n  const { tone, expandable, expanded, toggle } = useMessageItem();\n  const group = useContext(MessageItemGroupContext);\n  const defaultLabel = group !== null && SILENT_IN_GROUP.has(tone) ? null : STATUS_LABEL[tone];\n  const label = badge === undefined ? defaultLabel : badge;\n  return (\n    <div\n      data-slot=\"message-item-header\"\n      className={cn('flex min-h-8 items-center gap-2 px-[11px] text-sm text-doom-dim', className)}\n      {...props}\n    >\n      {group === null ? <span className=\"shrink-0 font-bold text-doom-hi\">{title}</span> : null}\n      <div data-slot=\"message-item-summary\" className=\"flex min-w-0 flex-1 items-center gap-2\">\n        {children}\n      </div>\n      {label !== null && label !== '' ? (\n        <StatusBadge tone={tone} data-testid=\"tool-status\">\n          {label}\n        </StatusBadge>\n      ) : null}\n      {expandable ? (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          data-testid=\"tool-expand\"\n          aria-expanded={expanded}\n          aria-label={expanded ? 'collapse' : 'expand'}\n          onClick={toggle}\n          className=\"text-doom-faint hover:text-doom-blue\"\n        >\n          {expanded ? <ChevronUpIcon className=\"h-3 w-3\" /> : <ChevronDownIcon className=\"h-3 w-3\" />}\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n\n/** The recessed body under the header. */\nexport function MessageItemBody({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-item-body\"\n      className={cn('border-t border-doom-border-soft bg-doom-deep px-3 py-2 text-sm text-doom-dim', className)}\n      {...props}\n    />\n  );\n}\n\n/** The glyph a tone reads as in a status line. */\nexport const STATUS_GLYPH: Readonly<Record<StatusTone, string>> = {\n  neutral: '…',\n  running: '◐',\n  ok: '✓',\n  error: '✗',\n  info: '●',\n  accent: '●',\n};\n\nexport const messageItemStatusVariants = cva('shrink-0', {\n  variants: {\n    tone: {\n      neutral: 'text-doom-faint',\n      running: 'text-doom-yellow',\n      ok: 'text-doom-green',\n      error: 'text-doom-red',\n      info: 'text-doom-blue',\n      accent: 'text-doom-magenta',\n    } satisfies Record<StatusTone, string>,\n  },\n  defaultVariants: { tone: 'neutral' },\n});\n\nexport interface MessageItemStatusProps extends ComponentProps<'span'>, VariantProps<typeof messageItemStatusVariants> {\n  /** Replaces the tone's glyph. */\n  glyph?: string;\n  /** Renders as a button that expands the item: the \"N more line(s)\" hint. Only className carries over. */\n  expands?: boolean;\n}\n\n/** The one-line status under a body: `◐ running`, `✗ failed`, `✓ done`, or the hint that more is hidden. */\nexport function MessageItemStatus({\n  className,\n  tone,\n  glyph,\n  expands = false,\n  children,\n  ...props\n}: MessageItemStatusProps) {\n  const { toggle } = useMessageItem();\n  const content = (\n    <>\n      <span className={messageItemStatusVariants({ tone })}>{glyph ?? STATUS_GLYPH[tone ?? 'neutral']}</span>\n      <span>{children}</span>\n    </>\n  );\n  if (expands) {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"message-item-status\"\n        data-testid=\"tool-more\"\n        onClick={toggle}\n        className={cn('flex cursor-pointer items-center gap-1.5 text-doom-faint hover:text-doom-blue', className)}\n      >\n        {content}\n      </button>\n    );\n  }\n  return (\n    <span\n      data-slot=\"message-item-status\"\n      className={cn('flex items-center gap-1.5 text-doom-faint', className)}\n      {...props}\n    >\n      {content}\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/src/components/MessageItem.d.mts

@@ -1,6 +1,6 @@
 import { StatusTone } from "./StatusBadge.mjs";
-import { VariantProps } from "class-variance-authority";
 import { ComponentProps, ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
 //#region src/components/MessageItem.d.ts
 /**
  * The message item: the timeline card a tool call, a run, or a notice sits
@@ -10,7 +10,7 @@ import { ComponentProps, ReactNode } from "react";
  * this, and so is the cockpit's own fallback item, which is what keeps them
  * looking alike.
  */
-interface MessageItemState {
+export interface MessageItemState {
   tone: StatusTone;
   /** Whether the header offers the toggle; an item that hides nothing offers none. */
   expandable: boolean;
@@ -18,12 +18,16 @@ interface MessageItemState {
   toggle: () => void;
 }
 /** The enclosing item's state, for a part that lives deeper than the item's render prop. */
-declare function useMessageItem(): MessageItemState;
+export declare function useMessageItem(): MessageItemState;
 /** The frame, wearing the edge STATUS_EDGE names for the tone, so the two never drift apart. */
-declare const messageItemVariants: (props?: ({
+export declare const messageItemVariants: (props?: ({
+  tone?: "accent" | "error" | "info" | "neutral" | "ok" | "running" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The same tone as a row: no card, one coloured edge, and the group's separators between rows. */
+export declare const messageItemRowVariants: (props?: ({
   tone?: "accent" | "error" | "info" | "neutral" | "ok" | "running" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface MessageItemProps extends Omit<ComponentProps<'div'>, 'children'>, VariantProps<typeof messageItemVariants> {
+export interface MessageItemProps extends Omit<ComponentProps<'div'>, 'children'>, VariantProps<typeof messageItemVariants> {
   /** Whether the header offers the expand toggle. A toggle that reveals nothing reads as broken, so the card decides. */
   expandable?: boolean;
   defaultExpanded?: boolean;
@@ -33,15 +37,35 @@ interface MessageItemProps extends Omit<ComponentProps<'div'>, 'children'>, Vari
   /** Plain content, or a function of the item's state for a card that picks its lines by `expanded`. */
   children?: ReactNode | ((state: MessageItemState) => ReactNode);
 }
-declare function MessageItem({ className, tone, expandable, defaultExpanded, expanded, onExpandedChange, children, ...props }: MessageItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageItem({ className, tone, expandable, defaultExpanded, expanded, onExpandedChange, children, ...props }: MessageItemProps): import("react").JSX.Element;
+export interface MessageItemGroupProps extends Omit<ComponentProps<'div'>, 'title'>, VariantProps<typeof messageItemVariants> {
+  /** The bold label at the left of the group header: the tool the run belongs to. */
+  title: ReactNode;
+  /** The line beside it, such as how many calls the group holds. */
+  summary?: ReactNode;
+  /** The badge text; defaults to the tone's label, null hides the badge. */
+  badge?: ReactNode | null;
+  children?: ReactNode;
+}
+/**
+ * One frame around a run of items that belong together.
+ *
+ * A transcript that calls the same tool five times in a row is five identical
+ * frames, five gutter labels and five gaps, and the repetition reads louder
+ * than the commands do. The group draws the frame once and each item inside it
+ * becomes a row: same header, same expand, no card of its own. The tone still
+ * belongs to the row, as an edge, so a failure in the middle of a run is not
+ * flattened into the group's own outcome.
+ */
+export declare function MessageItemGroup({ className, tone, title, summary, badge, children, ...props }: MessageItemGroupProps): import("react").JSX.Element;
 /** The tone a tool call's item wears: running while the tool runs, then its outcome. */
-declare function toolTone(state: {
+export declare function toolTone(state: {
   running: boolean;
   isError: boolean;
 }): StatusTone;
 /** The badge text a tone reads as when the header is not told otherwise; empty hides the badge. */
-declare const STATUS_LABEL: Readonly<Record<StatusTone, string>>;
-interface MessageItemHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {
+export declare const STATUS_LABEL: Readonly<Record<StatusTone, string>>;
+export interface MessageItemHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {
   /** The bold label at the left: the tool name. */
   title: ReactNode;
   /** The badge text; defaults to the tone's label, null hides the badge. */
@@ -49,23 +73,30 @@ interface MessageItemHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {
   /** The summary beside the title; it gets the remaining width. */
   children?: ReactNode;
 }
-/** The title row: label, summary, the tone's badge, and the expand toggle when the item is expandable. */
-declare function MessageItemHeader({ className, title, badge, children, ...props }: MessageItemHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The title row: label, summary, the tone's badge, and the expand toggle when
+ * the item is expandable.
+ *
+ * A row inside a group says less. The group's header has already named the
+ * tool and stated the run's outcome, so the row drops its title and speaks up
+ * only when something went wrong or is still going: five OK badges down a run
+ * of five are noise, and the one ERROR among them is the point.
+ */
+export declare function MessageItemHeader({ className, title, badge, children, ...props }: MessageItemHeaderProps): import("react").JSX.Element;
 /** The recessed body under the header. */
-declare function MessageItemBody({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function MessageItemBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 /** The glyph a tone reads as in a status line. */
-declare const STATUS_GLYPH: Readonly<Record<StatusTone, string>>;
-declare const messageItemStatusVariants: (props?: ({
+export declare const STATUS_GLYPH: Readonly<Record<StatusTone, string>>;
+export declare const messageItemStatusVariants: (props?: ({
   tone?: "accent" | "error" | "info" | "neutral" | "ok" | "running" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface MessageItemStatusProps extends ComponentProps<'span'>, VariantProps<typeof messageItemStatusVariants> {
+export interface MessageItemStatusProps extends ComponentProps<'span'>, VariantProps<typeof messageItemStatusVariants> {
   /** Replaces the tone's glyph. */
   glyph?: string;
   /** Renders as a button that expands the item: the "N more line(s)" hint. Only className carries over. */
   expands?: boolean;
 }
 /** The one-line status under a body: `◐ running`, `✗ failed`, `✓ done`, or the hint that more is hidden. */
-declare function MessageItemStatus({ className, tone, glyph, expands, children, ...props }: MessageItemStatusProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageItemStatus({ className, tone, glyph, expands, children, ...props }: MessageItemStatusProps): import("react").JSX.Element;
 //#endregion
-export { MessageItem, MessageItemBody, MessageItemHeader, MessageItemHeaderProps, MessageItemProps, MessageItemState, MessageItemStatus, MessageItemStatusProps, STATUS_GLYPH, STATUS_LABEL, messageItemStatusVariants, messageItemVariants, toolTone, useMessageItem };
 //# sourceMappingURL=MessageItem.d.mts.map

package/dist/src/components/MessageItem.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.d.mts","names":[],"sources":["../../../src/components/MessageItem.tsx"],"mappings":";;;;;;;;;;;;UAgBiB;EACf,MAAM;;EAEN;EACA;EACA;;;iBAWc,kBAAkB;;cAKrB,sBAAmB;;6CAG9B;UAEe,yBACP,KAAK,oCAAoC,oBAAoB;;EAErE;EACA;;EAEA;EACA,oBAAoB;;EAEpB,WAAW,cAAc,OAAO,qBAAqB;;iBAGvC,cACd,WACA,MACA,YACA,iBACA,UACA,kBACA,aACG,SACF,+CAAgB,IAAA;;iBA4BH,SAAS;EAAS;EAAkB;IAAqB;;cAK5D,cAAc,SAAS,OAAO;UAS1B,+BAA+B,KAAK;;EAEnD,OAAO;;EAEP,QAAQ;;EAER,WAAW;;;iBAIG,oBAAoB,WAAW,OAAO,OAAO,aAAa,SAAS,qDAAsB,IAAA;;iBAoCzF,kBAAkB,cAAc,SAAS,oDAAqB,IAAA;;cAWjE,cAAc,SAAS,OAAO;cAS9B,4BAAyB;;6CAYpC;UAEe,+BAA+B,wBAAwB,oBAAoB;;EAE1F;;EAEA;;;iBAIc,oBACd,WACA,MACA,OACA,SACA,aACG,SACF,qDAAsB,IAAA"}
+{"version":3,"file":"MessageItem.d.mts","names":[],"sources":["../../../src/components/MessageItem.tsx"],"mappings":";;;;;;;;;;;;iBAiBiB;EACf,MAAM;;EAEN;EACA;EACA;;;wBAWc,kBAAkB;;qBAarB,sBAAmB;;6CAG9B;;qBAGW,yBAAsB;;6CAGjC;iBAEe,yBACP,KAAK,oCAAoC,oBAAoB;;EAErE;EACA;;EAEA;EACA,oBAAoB;;EAEpB,WAAW,cAAc,OAAO,qBAAqB;;wBAGvC,cACd,WACA,MACA,YACA,iBACA,UACA,kBACA,aACG,SACF,mCAAgB,IAAA;iBA8BF,8BACP,KAAK,iCAAiC,oBAAoB;;EAElE,OAAO;;EAEP,UAAU;;EAEV,QAAQ;EACR,WAAW;;;;;;;;;;;;wBAaG,mBACd,WACA,MACA,OACA,SACA,OACA,aACG,SACF,wCAAqB,IAAA;;wBAiBR,SAAS;EAAS;EAAkB;IAAqB;;qBAK5D,cAAc,SAAS,OAAO;iBAS1B,+BAA+B,KAAK;;EAEnD,OAAO;;EAEP,QAAQ;;EAER,WAAW;;;;;;;;;;;wBAeG,oBAAoB,WAAW,OAAO,OAAO,aAAa,SAAS,yCAAsB,IAAA;;wBAsCzF,kBAAkB,cAAc,SAAS,wCAAqB,IAAA;;qBAWjE,cAAc,SAAS,OAAO;qBAS9B,4BAAyB;;6CAYpC;iBAEe,+BAA+B,wBAAwB,oBAAoB;;EAE1F;;EAEA;;;wBAIc,oBACd,WACA,MACA,OACA,SACA,aACG,SACF,yCAAsB,IAAA"}

package/dist/src/components/MessageItem.mjs

@@ -1,2 +1,2 @@
-import{ChevronDownIcon as e,ChevronUpIcon as t}from"../icons/icons.mjs";import{cn as n}from"../lib/cn.mjs";import{Button as r}from"./Button.mjs";import{STATUS_EDGE as i,StatusBadge as a}from"./StatusBadge.mjs";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{createContext as u,useContext as d,useState as f}from"react";const p=u({tone:`neutral`,expandable:!1,expanded:!1,toggle:()=>void 0});function m(){return d(p)}const h=l(`overflow-hidden rounded-md border bg-doom-panel transition-colors`,{variants:{tone:i},defaultVariants:{tone:`neutral`}});function g({className:e,tone:t,expandable:r=!1,defaultExpanded:i=!1,expanded:a,onExpandedChange:o,children:c,...l}){let[u,d]=f(i),m=a??u,g={tone:t??`neutral`,expandable:r,expanded:m,toggle:()=>{let e=!m;a===void 0&&d(e),o?.(e)}};return s(p.Provider,{value:g,children:s(`div`,{"data-slot":`message-item`,"data-expanded":m,className:n(h({tone:t}),e),...l,children:typeof c==`function`?c(g):c})})}function _(e){return e.running?`running`:e.isError?`error`:`ok`}const v={neutral:``,running:`RUNNING`,ok:`OK`,error:`ERROR`,info:`INFO`,accent:`NOTE`};function y({className:i,title:o,badge:l,children:u,...d}){let{tone:f,expandable:p,expanded:h,toggle:g}=m(),_=l===void 0?v[f]:l;return c(`div`,{"data-slot":`message-item-header`,className:n(`flex min-h-8 items-center gap-2 px-[11px] text-[11px] text-doom-dim`,i),...d,children:[s(`span`,{className:`shrink-0 font-bold text-doom-hi`,children:o}),s(`div`,{"data-slot":`message-item-summary`,className:`flex min-w-0 flex-1 items-center gap-2`,children:u}),_!==null&&_!==``?s(a,{tone:f,"data-testid":`tool-status`,children:_}):null,p?s(r,{variant:`ghost`,size:`icon`,"data-testid":`tool-expand`,"aria-expanded":h,"aria-label":h?`collapse`:`expand`,onClick:g,className:`text-doom-faint hover:text-doom-blue`,children:s(h?t:e,{className:`h-3 w-3`})}):null]})}function b({className:e,...t}){return s(`div`,{"data-slot":`message-item-body`,className:n(`border-t border-doom-border-soft bg-doom-deep px-3 py-2 text-[11px] text-doom-dim`,e),...t})}const x={neutral:`…`,running:`◐`,ok:`✓`,error:`✗`,info:`●`,accent:`●`},S=l(`shrink-0`,{variants:{tone:{neutral:`text-doom-faint`,running:`text-doom-yellow`,ok:`text-doom-green`,error:`text-doom-red`,info:`text-doom-blue`,accent:`text-doom-magenta`}},defaultVariants:{tone:`neutral`}});function C({className:e,tone:t,glyph:r,expands:i=!1,children:a,...l}){let{toggle:u}=m(),d=c(o,{children:[s(`span`,{className:S({tone:t}),children:r??x[t??`neutral`]}),s(`span`,{children:a})]});return i?s(`button`,{type:`button`,"data-slot":`message-item-status`,"data-testid":`tool-more`,onClick:u,className:n(`flex cursor-pointer items-center gap-1.5 text-doom-faint hover:text-doom-blue`,e),children:d}):s(`span`,{"data-slot":`message-item-status`,className:n(`flex items-center gap-1.5 text-doom-faint`,e),...l,children:d})}export{g as MessageItem,b as MessageItemBody,y as MessageItemHeader,C as MessageItemStatus,x as STATUS_GLYPH,v as STATUS_LABEL,S as messageItemStatusVariants,h as messageItemVariants,_ as toolTone,m as useMessageItem};
+import{ChevronDownIcon as e,ChevronUpIcon as t}from"../icons/icons.mjs";import{cn as n}from"../lib/cn.mjs";import{Button as r}from"./Button.mjs";import{STATUS_EDGE as i,StatusBadge as a}from"./StatusBadge.mjs";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";import{createContext as l,useContext as u,useState as d}from"react";import{cva as f}from"class-variance-authority";const p=l({tone:`neutral`,expandable:!1,expanded:!1,toggle:()=>void 0});function m(){return u(p)}const h=l(null),g=f(`overflow-hidden rounded-md border bg-doom-panel transition-colors`,{variants:{tone:i},defaultVariants:{tone:`neutral`}}),_=f(`overflow-hidden border-l-2 transition-colors`,{variants:{tone:i},defaultVariants:{tone:`neutral`}});function v({className:e,tone:t,expandable:r=!1,defaultExpanded:i=!1,expanded:a,onExpandedChange:o,children:c,...l}){let[f,m]=d(i),v=u(h)!==null,y=a??f,b={tone:t??`neutral`,expandable:r,expanded:y,toggle:()=>{let e=!y;a===void 0&&m(e),o?.(e)}};return/* @__PURE__ */ s(p.Provider,{value:b,children:/* @__PURE__ */ s(`div`,{"data-slot":`message-item`,"data-expanded":y,"data-grouped":v,className:n(v?_({tone:t}):g({tone:t}),e),...l,children:typeof c==`function`?c(b):c})})}function y({className:e,tone:t,title:r,summary:i,badge:o,children:l,...u}){let d=o===void 0?x[t??`neutral`]:o;return/* @__PURE__ */ s(h.Provider,{value:{tone:t??`neutral`},children:/* @__PURE__ */ c(`div`,{"data-slot":`message-item-group`,className:n(g({tone:t}),e),...u,children:[/* @__PURE__ */ c(`div`,{className:`flex min-h-8 items-center gap-2 border-doom-border-soft border-b px-[11px] text-sm text-doom-dim`,children:[/* @__PURE__ */ s(`span`,{className:`shrink-0 font-bold text-doom-hi`,children:r}),/* @__PURE__ */ s(`span`,{className:`min-w-0 flex-1 truncate text-doom-faint`,children:i}),d!==null&&d!==``?/* @__PURE__ */ s(a,{tone:t??`neutral`,children:d}):null]}),/* @__PURE__ */ s(`div`,{className:`flex flex-col divide-y divide-doom-border-soft`,children:l})]})})}function b(e){return e.running?`running`:e.isError?`error`:`ok`}const x={neutral:``,running:`RUNNING`,ok:`OK`,error:`ERROR`,info:`INFO`,accent:`NOTE`},S=/* @__PURE__ */ new Set([`ok`,`neutral`]);function C({className:i,title:o,badge:l,children:d,...f}){let{tone:p,expandable:g,expanded:_,toggle:v}=m(),y=u(h),b=y!==null&&S.has(p)?null:x[p],C=l===void 0?b:l;return/* @__PURE__ */ c(`div`,{"data-slot":`message-item-header`,className:n(`flex min-h-8 items-center gap-2 px-[11px] text-sm text-doom-dim`,i),...f,children:[y===null?/* @__PURE__ */ s(`span`,{className:`shrink-0 font-bold text-doom-hi`,children:o}):null,/* @__PURE__ */ s(`div`,{"data-slot":`message-item-summary`,className:`flex min-w-0 flex-1 items-center gap-2`,children:d}),C!==null&&C!==``?/* @__PURE__ */ s(a,{tone:p,"data-testid":`tool-status`,children:C}):null,g?/* @__PURE__ */ s(r,{variant:`ghost`,size:`icon`,"data-testid":`tool-expand`,"aria-expanded":_,"aria-label":_?`collapse`:`expand`,onClick:v,className:`text-doom-faint hover:text-doom-blue`,children:s(_?t:e,{className:`h-3 w-3`})}):null]})}function w({className:e,...t}){return/* @__PURE__ */ s(`div`,{"data-slot":`message-item-body`,className:n(`border-t border-doom-border-soft bg-doom-deep px-3 py-2 text-sm text-doom-dim`,e),...t})}const T={neutral:`…`,running:`◐`,ok:`✓`,error:`✗`,info:`●`,accent:`●`},E=f(`shrink-0`,{variants:{tone:{neutral:`text-doom-faint`,running:`text-doom-yellow`,ok:`text-doom-green`,error:`text-doom-red`,info:`text-doom-blue`,accent:`text-doom-magenta`}},defaultVariants:{tone:`neutral`}});function D({className:e,tone:t,glyph:r,expands:i=!1,children:a,...l}){let{toggle:u}=m(),d=/* @__PURE__ */ c(o,{children:[/* @__PURE__ */ s(`span`,{className:E({tone:t}),children:r??T[t??`neutral`]}),/* @__PURE__ */ s(`span`,{children:a})]});return i?/* @__PURE__ */ s(`button`,{type:`button`,"data-slot":`message-item-status`,"data-testid":`tool-more`,onClick:u,className:n(`flex cursor-pointer items-center gap-1.5 text-doom-faint hover:text-doom-blue`,e),children:d}):/* @__PURE__ */ s(`span`,{"data-slot":`message-item-status`,className:n(`flex items-center gap-1.5 text-doom-faint`,e),...l,children:d})}export{v as MessageItem,w as MessageItemBody,y as MessageItemGroup,C as MessageItemHeader,D as MessageItemStatus,T as STATUS_GLYPH,x as STATUS_LABEL,_ as messageItemRowVariants,E as messageItemStatusVariants,g as messageItemVariants,b as toolTone,m as useMessageItem};
 //# sourceMappingURL=MessageItem.mjs.map

package/dist/src/components/MessageItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.mjs","names":[],"sources":["../../../src/components/MessageItem.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, createContext, type ReactNode, useContext, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icons/icons.ts';\nimport { cn } from '../lib/cn.ts';\nimport { Button } from './Button.tsx';\nimport { STATUS_EDGE, StatusBadge, type StatusTone } from './StatusBadge.tsx';\n\n/**\n * The message item: the timeline card a tool call, a run, or a notice sits\n * in. The item owns its outcome tone and its expand state; the header, body,\n * and status parts read both from it, so a card composes the parts and never\n * threads `expanded` by hand. A tool message in a web plugin is built from\n * this, and so is the cockpit's own fallback item, which is what keeps them\n * looking alike.\n */\n\nexport interface MessageItemState {\n  tone: StatusTone;\n  /** Whether the header offers the toggle; an item that hides nothing offers none. */\n  expandable: boolean;\n  expanded: boolean;\n  toggle: () => void;\n}\n\nconst MessageItemContext = createContext<MessageItemState>({\n  tone: 'neutral',\n  expandable: false,\n  expanded: false,\n  toggle: () => undefined,\n});\n\n/** The enclosing item's state, for a part that lives deeper than the item's render prop. */\nexport function useMessageItem(): MessageItemState {\n  return useContext(MessageItemContext);\n}\n\n/** The frame, wearing the edge STATUS_EDGE names for the tone, so the two never drift apart. */\nexport const messageItemVariants = cva('overflow-hidden rounded-md border bg-doom-panel transition-colors', {\n  variants: { tone: STATUS_EDGE },\n  defaultVariants: { tone: 'neutral' },\n});\n\nexport interface MessageItemProps\n  extends Omit<ComponentProps<'div'>, 'children'>, VariantProps<typeof messageItemVariants> {\n  /** Whether the header offers the expand toggle. A toggle that reveals nothing reads as broken, so the card decides. */\n  expandable?: boolean;\n  defaultExpanded?: boolean;\n  /** Controlled mode; pair with onExpandedChange. Omit it and the item keeps its own state. */\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Plain content, or a function of the item's state for a card that picks its lines by `expanded`. */\n  children?: ReactNode | ((state: MessageItemState) => ReactNode);\n}\n\nexport function MessageItem({\n  className,\n  tone,\n  expandable = false,\n  defaultExpanded = false,\n  expanded,\n  onExpandedChange,\n  children,\n  ...props\n}: MessageItemProps) {\n  const [own, setOwn] = useState(defaultExpanded);\n  const current = expanded ?? own;\n  const state: MessageItemState = {\n    tone: tone ?? 'neutral',\n    expandable,\n    expanded: current,\n    toggle: () => {\n      const next = !current;\n      if (expanded === undefined) setOwn(next);\n      onExpandedChange?.(next);\n    },\n  };\n  return (\n    <MessageItemContext.Provider value={state}>\n      <div\n        data-slot=\"message-item\"\n        data-expanded={current}\n        className={cn(messageItemVariants({ tone }), className)}\n        {...props}\n      >\n        {typeof children === 'function' ? children(state) : children}\n      </div>\n    </MessageItemContext.Provider>\n  );\n}\n\n/** The tone a tool call's item wears: running while the tool runs, then its outcome. */\nexport function toolTone(state: { running: boolean; isError: boolean }): StatusTone {\n  return state.running ? 'running' : state.isError ? 'error' : 'ok';\n}\n\n/** The badge text a tone reads as when the header is not told otherwise; empty hides the badge. */\nexport const STATUS_LABEL: Readonly<Record<StatusTone, string>> = {\n  neutral: '',\n  running: 'RUNNING',\n  ok: 'OK',\n  error: 'ERROR',\n  info: 'INFO',\n  accent: 'NOTE',\n};\n\nexport interface MessageItemHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {\n  /** The bold label at the left: the tool name. */\n  title: ReactNode;\n  /** The badge text; defaults to the tone's label, null hides the badge. */\n  badge?: ReactNode | null;\n  /** The summary beside the title; it gets the remaining width. */\n  children?: ReactNode;\n}\n\n/** The title row: label, summary, the tone's badge, and the expand toggle when the item is expandable. */\nexport function MessageItemHeader({ className, title, badge, children, ...props }: MessageItemHeaderProps) {\n  const { tone, expandable, expanded, toggle } = useMessageItem();\n  const label = badge === undefined ? STATUS_LABEL[tone] : badge;\n  return (\n    <div\n      data-slot=\"message-item-header\"\n      className={cn('flex min-h-8 items-center gap-2 px-[11px] text-[11px] text-doom-dim', className)}\n      {...props}\n    >\n      <span className=\"shrink-0 font-bold text-doom-hi\">{title}</span>\n      <div data-slot=\"message-item-summary\" className=\"flex min-w-0 flex-1 items-center gap-2\">\n        {children}\n      </div>\n      {label !== null && label !== '' ? (\n        <StatusBadge tone={tone} data-testid=\"tool-status\">\n          {label}\n        </StatusBadge>\n      ) : null}\n      {expandable ? (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          data-testid=\"tool-expand\"\n          aria-expanded={expanded}\n          aria-label={expanded ? 'collapse' : 'expand'}\n          onClick={toggle}\n          className=\"text-doom-faint hover:text-doom-blue\"\n        >\n          {expanded ? <ChevronUpIcon className=\"h-3 w-3\" /> : <ChevronDownIcon className=\"h-3 w-3\" />}\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n\n/** The recessed body under the header. */\nexport function MessageItemBody({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-item-body\"\n      className={cn('border-t border-doom-border-soft bg-doom-deep px-3 py-2 text-[11px] text-doom-dim', className)}\n      {...props}\n    />\n  );\n}\n\n/** The glyph a tone reads as in a status line. */\nexport const STATUS_GLYPH: Readonly<Record<StatusTone, string>> = {\n  neutral: '…',\n  running: '◐',\n  ok: '✓',\n  error: '✗',\n  info: '●',\n  accent: '●',\n};\n\nexport const messageItemStatusVariants = cva('shrink-0', {\n  variants: {\n    tone: {\n      neutral: 'text-doom-faint',\n      running: 'text-doom-yellow',\n      ok: 'text-doom-green',\n      error: 'text-doom-red',\n      info: 'text-doom-blue',\n      accent: 'text-doom-magenta',\n    } satisfies Record<StatusTone, string>,\n  },\n  defaultVariants: { tone: 'neutral' },\n});\n\nexport interface MessageItemStatusProps extends ComponentProps<'span'>, VariantProps<typeof messageItemStatusVariants> {\n  /** Replaces the tone's glyph. */\n  glyph?: string;\n  /** Renders as a button that expands the item: the \"N more line(s)\" hint. Only className carries over. */\n  expands?: boolean;\n}\n\n/** The one-line status under a body: `◐ running`, `✗ failed`, `✓ done`, or the hint that more is hidden. */\nexport function MessageItemStatus({\n  className,\n  tone,\n  glyph,\n  expands = false,\n  children,\n  ...props\n}: MessageItemStatusProps) {\n  const { toggle } = useMessageItem();\n  const content = (\n    <>\n      <span className={messageItemStatusVariants({ tone })}>{glyph ?? STATUS_GLYPH[tone ?? 'neutral']}</span>\n      <span>{children}</span>\n    </>\n  );\n  if (expands) {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"message-item-status\"\n        data-testid=\"tool-more\"\n        onClick={toggle}\n        className={cn('flex cursor-pointer items-center gap-1.5 text-doom-faint hover:text-doom-blue', className)}\n      >\n        {content}\n      </button>\n    );\n  }\n  return (\n    <span\n      data-slot=\"message-item-status\"\n      className={cn('flex items-center gap-1.5 text-doom-faint', className)}\n      {...props}\n    >\n      {content}\n    </span>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MessageItem.mjs","names":[],"sources":["../../../src/components/MessageItem.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, createContext, type ReactNode, useContext, useState } from 'react';\n\nimport { ChevronDownIcon, ChevronUpIcon } from '../icons/icons';\nimport { cn } from '../lib/cn';\nimport { Button } from './Button';\nimport { STATUS_EDGE, StatusBadge, type StatusTone } from './StatusBadge';\n\n/**\n * The message item: the timeline card a tool call, a run, or a notice sits\n * in. The item owns its outcome tone and its expand state; the header, body,\n * and status parts read both from it, so a card composes the parts and never\n * threads `expanded` by hand. A tool message in a web plugin is built from\n * this, and so is the cockpit's own fallback item, which is what keeps them\n * looking alike.\n */\n\nexport interface MessageItemState {\n  tone: StatusTone;\n  /** Whether the header offers the toggle; an item that hides nothing offers none. */\n  expandable: boolean;\n  expanded: boolean;\n  toggle: () => void;\n}\n\nconst MessageItemContext = createContext<MessageItemState>({\n  tone: 'neutral',\n  expandable: false,\n  expanded: false,\n  toggle: () => undefined,\n});\n\n/** The enclosing item's state, for a part that lives deeper than the item's render prop. */\nexport function useMessageItem(): MessageItemState {\n  return useContext(MessageItemContext);\n}\n\n/**\n * The group an item is a row of, or null for an item that is a card of its\n * own. A row drops the frame the group already draws and keeps its tone as an\n * edge down its left side, and it stops repeating what the group's header has\n * said once: the tool's name, and an outcome the whole run shares.\n */\nconst MessageItemGroupContext = createContext<{ tone: StatusTone } | null>(null);\n\n/** The frame, wearing the edge STATUS_EDGE names for the tone, so the two never drift apart. */\nexport const messageItemVariants = cva('overflow-hidden rounded-md border bg-doom-panel transition-colors', {\n  variants: { tone: STATUS_EDGE },\n  defaultVariants: { tone: 'neutral' },\n});\n\n/** The same tone as a row: no card, one coloured edge, and the group's separators between rows. */\nexport const messageItemRowVariants = cva('overflow-hidden border-l-2 transition-colors', {\n  variants: { tone: STATUS_EDGE },\n  defaultVariants: { tone: 'neutral' },\n});\n\nexport interface MessageItemProps\n  extends Omit<ComponentProps<'div'>, 'children'>, VariantProps<typeof messageItemVariants> {\n  /** Whether the header offers the expand toggle. A toggle that reveals nothing reads as broken, so the card decides. */\n  expandable?: boolean;\n  defaultExpanded?: boolean;\n  /** Controlled mode; pair with onExpandedChange. Omit it and the item keeps its own state. */\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Plain content, or a function of the item's state for a card that picks its lines by `expanded`. */\n  children?: ReactNode | ((state: MessageItemState) => ReactNode);\n}\n\nexport function MessageItem({\n  className,\n  tone,\n  expandable = false,\n  defaultExpanded = false,\n  expanded,\n  onExpandedChange,\n  children,\n  ...props\n}: MessageItemProps) {\n  const [own, setOwn] = useState(defaultExpanded);\n  const group = useContext(MessageItemGroupContext);\n  const grouped = group !== null;\n  const current = expanded ?? own;\n  const state: MessageItemState = {\n    tone: tone ?? 'neutral',\n    expandable,\n    expanded: current,\n    toggle: () => {\n      const next = !current;\n      if (expanded === undefined) setOwn(next);\n      onExpandedChange?.(next);\n    },\n  };\n  return (\n    <MessageItemContext.Provider value={state}>\n      <div\n        data-slot=\"message-item\"\n        data-expanded={current}\n        data-grouped={grouped}\n        className={cn(grouped ? messageItemRowVariants({ tone }) : messageItemVariants({ tone }), className)}\n        {...props}\n      >\n        {typeof children === 'function' ? children(state) : children}\n      </div>\n    </MessageItemContext.Provider>\n  );\n}\n\nexport interface MessageItemGroupProps\n  extends Omit<ComponentProps<'div'>, 'title'>, VariantProps<typeof messageItemVariants> {\n  /** The bold label at the left of the group header: the tool the run belongs to. */\n  title: ReactNode;\n  /** The line beside it, such as how many calls the group holds. */\n  summary?: ReactNode;\n  /** The badge text; defaults to the tone's label, null hides the badge. */\n  badge?: ReactNode | null;\n  children?: ReactNode;\n}\n\n/**\n * One frame around a run of items that belong together.\n *\n * A transcript that calls the same tool five times in a row is five identical\n * frames, five gutter labels and five gaps, and the repetition reads louder\n * than the commands do. The group draws the frame once and each item inside it\n * becomes a row: same header, same expand, no card of its own. The tone still\n * belongs to the row, as an edge, so a failure in the middle of a run is not\n * flattened into the group's own outcome.\n */\nexport function MessageItemGroup({\n  className,\n  tone,\n  title,\n  summary,\n  badge,\n  children,\n  ...props\n}: MessageItemGroupProps) {\n  const label = badge === undefined ? STATUS_LABEL[tone ?? 'neutral'] : badge;\n  return (\n    <MessageItemGroupContext.Provider value={{ tone: tone ?? 'neutral' }}>\n      <div data-slot=\"message-item-group\" className={cn(messageItemVariants({ tone }), className)} {...props}>\n        <div className=\"flex min-h-8 items-center gap-2 border-doom-border-soft border-b px-[11px] text-sm text-doom-dim\">\n          <span className=\"shrink-0 font-bold text-doom-hi\">{title}</span>\n          <span className=\"min-w-0 flex-1 truncate text-doom-faint\">{summary}</span>\n          {label !== null && label !== '' ? <StatusBadge tone={tone ?? 'neutral'}>{label}</StatusBadge> : null}\n        </div>\n        <div className=\"flex flex-col divide-y divide-doom-border-soft\">{children}</div>\n      </div>\n    </MessageItemGroupContext.Provider>\n  );\n}\n\n/** The tone a tool call's item wears: running while the tool runs, then its outcome. */\nexport function toolTone(state: { running: boolean; isError: boolean }): StatusTone {\n  return state.running ? 'running' : state.isError ? 'error' : 'ok';\n}\n\n/** The badge text a tone reads as when the header is not told otherwise; empty hides the badge. */\nexport const STATUS_LABEL: Readonly<Record<StatusTone, string>> = {\n  neutral: '',\n  running: 'RUNNING',\n  ok: 'OK',\n  error: 'ERROR',\n  info: 'INFO',\n  accent: 'NOTE',\n};\n\nexport interface MessageItemHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {\n  /** The bold label at the left: the tool name. */\n  title: ReactNode;\n  /** The badge text; defaults to the tone's label, null hides the badge. */\n  badge?: ReactNode | null;\n  /** The summary beside the title; it gets the remaining width. */\n  children?: ReactNode;\n}\n\n/** Inside a group these two are the quiet outcome: the group's header has already said it. */\nconst SILENT_IN_GROUP: ReadonlySet<StatusTone> = new Set<StatusTone>(['ok', 'neutral']);\n\n/**\n * The title row: label, summary, the tone's badge, and the expand toggle when\n * the item is expandable.\n *\n * A row inside a group says less. The group's header has already named the\n * tool and stated the run's outcome, so the row drops its title and speaks up\n * only when something went wrong or is still going: five OK badges down a run\n * of five are noise, and the one ERROR among them is the point.\n */\nexport function MessageItemHeader({ className, title, badge, children, ...props }: MessageItemHeaderProps) {\n  const { tone, expandable, expanded, toggle } = useMessageItem();\n  const group = useContext(MessageItemGroupContext);\n  const defaultLabel = group !== null && SILENT_IN_GROUP.has(tone) ? null : STATUS_LABEL[tone];\n  const label = badge === undefined ? defaultLabel : badge;\n  return (\n    <div\n      data-slot=\"message-item-header\"\n      className={cn('flex min-h-8 items-center gap-2 px-[11px] text-sm text-doom-dim', className)}\n      {...props}\n    >\n      {group === null ? <span className=\"shrink-0 font-bold text-doom-hi\">{title}</span> : null}\n      <div data-slot=\"message-item-summary\" className=\"flex min-w-0 flex-1 items-center gap-2\">\n        {children}\n      </div>\n      {label !== null && label !== '' ? (\n        <StatusBadge tone={tone} data-testid=\"tool-status\">\n          {label}\n        </StatusBadge>\n      ) : null}\n      {expandable ? (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          data-testid=\"tool-expand\"\n          aria-expanded={expanded}\n          aria-label={expanded ? 'collapse' : 'expand'}\n          onClick={toggle}\n          className=\"text-doom-faint hover:text-doom-blue\"\n        >\n          {expanded ? <ChevronUpIcon className=\"h-3 w-3\" /> : <ChevronDownIcon className=\"h-3 w-3\" />}\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n\n/** The recessed body under the header. */\nexport function MessageItemBody({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-item-body\"\n      className={cn('border-t border-doom-border-soft bg-doom-deep px-3 py-2 text-sm text-doom-dim', className)}\n      {...props}\n    />\n  );\n}\n\n/** The glyph a tone reads as in a status line. */\nexport const STATUS_GLYPH: Readonly<Record<StatusTone, string>> = {\n  neutral: '…',\n  running: '◐',\n  ok: '✓',\n  error: '✗',\n  info: '●',\n  accent: '●',\n};\n\nexport const messageItemStatusVariants = cva('shrink-0', {\n  variants: {\n    tone: {\n      neutral: 'text-doom-faint',\n      running: 'text-doom-yellow',\n      ok: 'text-doom-green',\n      error: 'text-doom-red',\n      info: 'text-doom-blue',\n      accent: 'text-doom-magenta',\n    } satisfies Record<StatusTone, string>,\n  },\n  defaultVariants: { tone: 'neutral' },\n});\n\nexport interface MessageItemStatusProps extends ComponentProps<'span'>, VariantProps<typeof messageItemStatusVariants> {\n  /** Replaces the tone's glyph. */\n  glyph?: string;\n  /** Renders as a button that expands the item: the \"N more line(s)\" hint. Only className carries over. */\n  expands?: boolean;\n}\n\n/** The one-line status under a body: `◐ running`, `✗ failed`, `✓ done`, or the hint that more is hidden. */\nexport function MessageItemStatus({\n  className,\n  tone,\n  glyph,\n  expands = false,\n  children,\n  ...props\n}: MessageItemStatusProps) {\n  const { toggle } = useMessageItem();\n  const content = (\n    <>\n      <span className={messageItemStatusVariants({ tone })}>{glyph ?? STATUS_GLYPH[tone ?? 'neutral']}</span>\n      <span>{children}</span>\n    </>\n  );\n  if (expands) {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"message-item-status\"\n        data-testid=\"tool-more\"\n        onClick={toggle}\n        className={cn('flex cursor-pointer items-center gap-1.5 text-doom-faint hover:text-doom-blue', className)}\n      >\n        {content}\n      </button>\n    );\n  }\n  return (\n    <span\n      data-slot=\"message-item-status\"\n      className={cn('flex items-center gap-1.5 text-doom-faint', className)}\n      {...props}\n    >\n      {content}\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/src/components/MessageLines.cjs

@@ -1,2 +1,2 @@
-const e=require("../lib/cn.cjs");let t=require("react/jsx-runtime");const n=(0,require("class-variance-authority").cva)(`whitespace-pre-wrap break-words`,{variants:{tone:{hi:`text-doom-hi`,text:`text-doom-text`,dim:`text-doom-dim`,muted:`text-doom-faint`,success:`text-doom-green`,error:`text-doom-red`,warning:`text-doom-yellow`,accent:`text-doom-blue`},bold:{true:`font-bold`,false:``},indent:{true:`pl-4`,false:``}},defaultVariants:{tone:`dim`,bold:!1,indent:!1}});function r({className:r,lines:i,...a}){return(0,t.jsx)(`div`,{"data-slot":`message-lines`,className:e.cn(`flex flex-col gap-0.5`,r),...a,children:i.map((e,r)=>(0,t.jsx)(`div`,{className:n({tone:e.tone,bold:e.bold===!0,indent:e.indent===!0}),children:e.text},`${String(r)}-${e.text}`))})}exports.MessageLines=r,exports.messageLineVariants=n;
+const e=require("../lib/cn.cjs");let t=require("react/jsx-runtime");const n=(0,require("class-variance-authority").cva)(`whitespace-pre-wrap break-words`,{variants:{tone:{hi:`text-doom-hi`,text:`text-doom-text`,dim:`text-doom-dim`,muted:`text-doom-faint`,success:`text-doom-green`,error:`text-doom-red`,warning:`text-doom-yellow`,accent:`text-doom-blue`},bold:{true:`font-bold`,false:``},indent:{true:`pl-4`,false:``}},defaultVariants:{tone:`dim`,bold:!1,indent:!1}});function r({className:r,lines:i,...a}){return/* @__PURE__ */ (0,t.jsx)(`div`,{"data-slot":`message-lines`,className:e.cn(`flex flex-col gap-0.5`,r),...a,children:i.map((e,r)=>/* @__PURE__ */ (0,t.jsx)(`div`,{className:n({tone:e.tone,bold:e.bold===!0,indent:e.indent===!0}),children:e.text},`${String(r)}-${e.text}`))})}exports.MessageLines=r,exports.messageLineVariants=n;
 //# sourceMappingURL=MessageLines.cjs.map

package/dist/src/components/MessageLines.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageLines.cjs","names":["cva","cn"],"sources":["../../../src/components/MessageLines.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\nimport { cn } from '../lib/cn.ts';\nimport type { MessageLineTone as Tone } from '../types/tone.ts';\n\n/** One line of a message body, with the tone the card's pure view logic chose for it. */\nexport type MessageLineTone = Tone;\n\nexport interface MessageLine {\n  text: string;\n  tone: MessageLineTone;\n  bold?: boolean;\n  indent?: boolean;\n}\n\nexport const messageLineVariants = cva('whitespace-pre-wrap break-words', {\n  variants: {\n    tone: {\n      hi: 'text-doom-hi',\n      text: 'text-doom-text',\n      dim: 'text-doom-dim',\n      muted: 'text-doom-faint',\n      success: 'text-doom-green',\n      error: 'text-doom-red',\n      warning: 'text-doom-yellow',\n      accent: 'text-doom-blue',\n    } satisfies Record<Tone, string>,\n    bold: { true: 'font-bold', false: '' },\n    indent: { true: 'pl-4', false: '' },\n  },\n  defaultVariants: { tone: 'dim', bold: false, indent: false },\n});\n\nexport interface MessageLinesProps extends ComponentProps<'div'> {\n  lines: readonly MessageLine[];\n}\n\n/** A body of toned lines: what a card's view helper computed, drawn one line per row. */\nexport function MessageLines({ className, lines, ...props }: MessageLinesProps) {\n  return (\n    <div data-slot=\"message-lines\" className={cn('flex flex-col gap-0.5', className)} {...props}>\n      {lines.map((line, index) => (\n        <div\n          key={`${String(index)}-${line.text}`}\n          className={messageLineVariants({ tone: line.tone, bold: line.bold === true, indent: line.indent === true })}\n        >\n          {line.text}\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"oEAeA,MAAa,GAAA,oCAAsBA,CAAAA,CAAAA,IAAAA,CAAI,kCAAmC,CACxE,SAAU,CACR,KAAM,CACJ,GAAI,eACJ,KAAM,iBACN,IAAK,gBACL,MAAO,kBACP,QAAS,kBACT,MAAO,gBACP,QAAS,mBACT,OAAQ,gBACV,EACA,KAAM,CAAE,KAAM,YAAa,MAAO,EAAG,EACrC,OAAQ,CAAE,KAAM,OAAQ,MAAO,EAAG,CACpC,EACA,gBAAiB,CAAE,KAAM,MAAO,KAAM,GAAO,OAAQ,EAAM,CAC7D,CAAC,EAOD,SAAgB,EAAa,CAAE,YAAW,QAAO,GAAG,GAA4B,CAC9E,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAWC,EAAAA,GAAG,wBAAyB,CAAS,EAAG,GAAI,EACnF,SAAA,EAAM,KAAK,EAAM,KAChB,EAAA,EAAA,IAAA,CAAC,MAAD,CAEE,UAAW,EAAoB,CAAE,KAAM,EAAK,KAAM,KAAM,EAAK,OAAS,GAAM,OAAQ,EAAK,SAAW,EAAK,CAAC,EAEzG,SAAA,EAAK,IACH,EAJE,GAAG,OAAO,CAAK,EAAE,GAAG,EAAK,MAI3B,CACN,CACE,CAAA,CAET"}
+{"version":3,"file":"MessageLines.cjs","names":["cva","cn"],"sources":["../../../src/components/MessageLines.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../lib/cn';\nimport type { MessageLineTone as Tone } from '../types/tone';\n\n/** One line of a message body, with the tone the card's pure view logic chose for it. */\nexport type MessageLineTone = Tone;\n\nexport interface MessageLine {\n  text: string;\n  tone: MessageLineTone;\n  bold?: boolean;\n  indent?: boolean;\n}\n\nexport const messageLineVariants = cva('whitespace-pre-wrap break-words', {\n  variants: {\n    tone: {\n      hi: 'text-doom-hi',\n      text: 'text-doom-text',\n      dim: 'text-doom-dim',\n      muted: 'text-doom-faint',\n      success: 'text-doom-green',\n      error: 'text-doom-red',\n      warning: 'text-doom-yellow',\n      accent: 'text-doom-blue',\n    } satisfies Record<Tone, string>,\n    bold: { true: 'font-bold', false: '' },\n    indent: { true: 'pl-4', false: '' },\n  },\n  defaultVariants: { tone: 'dim', bold: false, indent: false },\n});\n\nexport interface MessageLinesProps extends ComponentProps<'div'> {\n  lines: readonly MessageLine[];\n}\n\n/** A body of toned lines: what a card's view helper computed, drawn one line per row. */\nexport function MessageLines({ className, lines, ...props }: MessageLinesProps) {\n  return (\n    <div data-slot=\"message-lines\" className={cn('flex flex-col gap-0.5', className)} {...props}>\n      {lines.map((line, index) => (\n        <div\n          key={`${String(index)}-${line.text}`}\n          className={messageLineVariants({ tone: line.tone, bold: line.bold === true, indent: line.indent === true })}\n        >\n          {line.text}\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"oEAgBA,MAAa,GAAA,oCAAsBA,CAAAA,CAAAA,IAAAA,CAAI,kCAAmC,CACxE,SAAU,CACR,KAAM,CACJ,GAAI,eACJ,KAAM,iBACN,IAAK,gBACL,MAAO,kBACP,QAAS,kBACT,MAAO,gBACP,QAAS,mBACT,OAAQ,gBACV,EACA,KAAM,CAAE,KAAM,YAAa,MAAO,EAAG,EACrC,OAAQ,CAAE,KAAM,OAAQ,MAAO,EAAG,CACpC,EACA,gBAAiB,CAAE,KAAM,MAAO,KAAM,GAAO,OAAQ,EAAM,CAC7D,CAAC,EAOD,SAAgB,EAAa,CAAE,YAAW,QAAO,GAAG,GAA4B,CAC9E,MACE,iBAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAWC,EAAAA,GAAG,wBAAyB,CAAS,EAAG,GAAI,EACnF,SAAA,EAAM,KAAK,EAAM,IAChB,iBAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAEE,UAAW,EAAoB,CAAE,KAAM,EAAK,KAAM,KAAM,EAAK,OAAS,GAAM,OAAQ,EAAK,SAAW,EAAK,CAAC,EAEzG,SAAA,EAAK,IACH,EAJE,GAAG,OAAO,CAAK,EAAE,GAAG,EAAK,MAI3B,CACN,CACE,CAAA,CAET"}

package/dist/src/components/MessageLines.d.mts

@@ -2,23 +2,22 @@ import { MessageLineTone as MessageLineTone$1 } from "../types/tone.mjs";
 import { ComponentProps } from "react";
 //#region src/components/MessageLines.d.ts
 /** One line of a message body, with the tone the card's pure view logic chose for it. */
-type MessageLineTone = MessageLineTone$1;
-interface MessageLine {
+export type MessageLineTone = MessageLineTone$1;
+export interface MessageLine {
   text: string;
   tone: MessageLineTone;
   bold?: boolean;
   indent?: boolean;
 }
-declare const messageLineVariants: (props?: ({
+export declare const messageLineVariants: (props?: ({
   tone?: "accent" | "dim" | "error" | "hi" | "muted" | "success" | "text" | "warning" | null | undefined;
   bold?: boolean | null | undefined;
   indent?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface MessageLinesProps extends ComponentProps<'div'> {
+export interface MessageLinesProps extends ComponentProps<'div'> {
   lines: readonly MessageLine[];
 }
 /** A body of toned lines: what a card's view helper computed, drawn one line per row. */
-declare function MessageLines({ className, lines, ...props }: MessageLinesProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageLines({ className, lines, ...props }: MessageLinesProps): import("react").JSX.Element;
 //#endregion
-export { MessageLine, MessageLineTone, MessageLines, MessageLinesProps, messageLineVariants };
 //# sourceMappingURL=MessageLines.d.mts.map

package/dist/src/components/MessageLines.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageLines.d.mts","names":[],"sources":["../../../src/components/MessageLines.tsx"],"mappings":";;;;KAMY,kBAAkB;UAEb;EACf;EACA,MAAM;EACN;EACA;;cAGW,sBAAmB;;;;6CAgB9B;UAEe,0BAA0B;EACzC,gBAAgB;;;iBAIF,eAAe,WAAW,UAAU,SAAS,gDAAiB,IAAA"}
+{"version":3,"file":"MessageLines.d.mts","names":[],"sources":["../../../src/components/MessageLines.tsx"],"mappings":";;;;YAOY,kBAAkB;iBAEb;EACf;EACA,MAAM;EACN;EACA;;qBAGW,sBAAmB;;;;6CAgB9B;iBAEe,0BAA0B;EACzC,gBAAgB;;;wBAIF,eAAe,WAAW,UAAU,SAAS,oCAAiB,IAAA"}

package/dist/src/components/MessageLines.mjs

@@ -1,2 +1,2 @@
-import{cn as e}from"../lib/cn.mjs";import{jsx as t}from"react/jsx-runtime";import{cva as n}from"class-variance-authority";const r=n(`whitespace-pre-wrap break-words`,{variants:{tone:{hi:`text-doom-hi`,text:`text-doom-text`,dim:`text-doom-dim`,muted:`text-doom-faint`,success:`text-doom-green`,error:`text-doom-red`,warning:`text-doom-yellow`,accent:`text-doom-blue`},bold:{true:`font-bold`,false:``},indent:{true:`pl-4`,false:``}},defaultVariants:{tone:`dim`,bold:!1,indent:!1}});function i({className:n,lines:i,...a}){return t(`div`,{"data-slot":`message-lines`,className:e(`flex flex-col gap-0.5`,n),...a,children:i.map((e,n)=>t(`div`,{className:r({tone:e.tone,bold:e.bold===!0,indent:e.indent===!0}),children:e.text},`${String(n)}-${e.text}`))})}export{i as MessageLines,r as messageLineVariants};
+import{cn as e}from"../lib/cn.mjs";import{jsx as t}from"react/jsx-runtime";import{cva as n}from"class-variance-authority";const r=n(`whitespace-pre-wrap break-words`,{variants:{tone:{hi:`text-doom-hi`,text:`text-doom-text`,dim:`text-doom-dim`,muted:`text-doom-faint`,success:`text-doom-green`,error:`text-doom-red`,warning:`text-doom-yellow`,accent:`text-doom-blue`},bold:{true:`font-bold`,false:``},indent:{true:`pl-4`,false:``}},defaultVariants:{tone:`dim`,bold:!1,indent:!1}});function i({className:n,lines:i,...a}){return/* @__PURE__ */ t(`div`,{"data-slot":`message-lines`,className:e(`flex flex-col gap-0.5`,n),...a,children:i.map((e,n)=>/* @__PURE__ */ t(`div`,{className:r({tone:e.tone,bold:e.bold===!0,indent:e.indent===!0}),children:e.text},`${String(n)}-${e.text}`))})}export{i as MessageLines,r as messageLineVariants};
 //# sourceMappingURL=MessageLines.mjs.map

package/dist/src/components/MessageLines.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageLines.mjs","names":[],"sources":["../../../src/components/MessageLines.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\nimport { cn } from '../lib/cn.ts';\nimport type { MessageLineTone as Tone } from '../types/tone.ts';\n\n/** One line of a message body, with the tone the card's pure view logic chose for it. */\nexport type MessageLineTone = Tone;\n\nexport interface MessageLine {\n  text: string;\n  tone: MessageLineTone;\n  bold?: boolean;\n  indent?: boolean;\n}\n\nexport const messageLineVariants = cva('whitespace-pre-wrap break-words', {\n  variants: {\n    tone: {\n      hi: 'text-doom-hi',\n      text: 'text-doom-text',\n      dim: 'text-doom-dim',\n      muted: 'text-doom-faint',\n      success: 'text-doom-green',\n      error: 'text-doom-red',\n      warning: 'text-doom-yellow',\n      accent: 'text-doom-blue',\n    } satisfies Record<Tone, string>,\n    bold: { true: 'font-bold', false: '' },\n    indent: { true: 'pl-4', false: '' },\n  },\n  defaultVariants: { tone: 'dim', bold: false, indent: false },\n});\n\nexport interface MessageLinesProps extends ComponentProps<'div'> {\n  lines: readonly MessageLine[];\n}\n\n/** A body of toned lines: what a card's view helper computed, drawn one line per row. */\nexport function MessageLines({ className, lines, ...props }: MessageLinesProps) {\n  return (\n    <div data-slot=\"message-lines\" className={cn('flex flex-col gap-0.5', className)} {...props}>\n      {lines.map((line, index) => (\n        <div\n          key={`${String(index)}-${line.text}`}\n          className={messageLineVariants({ tone: line.tone, bold: line.bold === true, indent: line.indent === true })}\n        >\n          {line.text}\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"0HAeA,MAAa,EAAsB,EAAI,kCAAmC,CACxE,SAAU,CACR,KAAM,CACJ,GAAI,eACJ,KAAM,iBACN,IAAK,gBACL,MAAO,kBACP,QAAS,kBACT,MAAO,gBACP,QAAS,mBACT,OAAQ,gBACV,EACA,KAAM,CAAE,KAAM,YAAa,MAAO,EAAG,EACrC,OAAQ,CAAE,KAAM,OAAQ,MAAO,EAAG,CACpC,EACA,gBAAiB,CAAE,KAAM,MAAO,KAAM,GAAO,OAAQ,EAAM,CAC7D,CAAC,EAOD,SAAgB,EAAa,CAAE,YAAW,QAAO,GAAG,GAA4B,CAC9E,OACE,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAW,EAAG,wBAAyB,CAAS,EAAG,GAAI,EACnF,SAAA,EAAM,KAAK,EAAM,IAChB,EAAC,MAAD,CAEE,UAAW,EAAoB,CAAE,KAAM,EAAK,KAAM,KAAM,EAAK,OAAS,GAAM,OAAQ,EAAK,SAAW,EAAK,CAAC,EAEzG,SAAA,EAAK,IACH,EAJE,GAAG,OAAO,CAAK,EAAE,GAAG,EAAK,MAI3B,CACN,CACE,CAAA,CAET"}
+{"version":3,"file":"MessageLines.mjs","names":[],"sources":["../../../src/components/MessageLines.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../lib/cn';\nimport type { MessageLineTone as Tone } from '../types/tone';\n\n/** One line of a message body, with the tone the card's pure view logic chose for it. */\nexport type MessageLineTone = Tone;\n\nexport interface MessageLine {\n  text: string;\n  tone: MessageLineTone;\n  bold?: boolean;\n  indent?: boolean;\n}\n\nexport const messageLineVariants = cva('whitespace-pre-wrap break-words', {\n  variants: {\n    tone: {\n      hi: 'text-doom-hi',\n      text: 'text-doom-text',\n      dim: 'text-doom-dim',\n      muted: 'text-doom-faint',\n      success: 'text-doom-green',\n      error: 'text-doom-red',\n      warning: 'text-doom-yellow',\n      accent: 'text-doom-blue',\n    } satisfies Record<Tone, string>,\n    bold: { true: 'font-bold', false: '' },\n    indent: { true: 'pl-4', false: '' },\n  },\n  defaultVariants: { tone: 'dim', bold: false, indent: false },\n});\n\nexport interface MessageLinesProps extends ComponentProps<'div'> {\n  lines: readonly MessageLine[];\n}\n\n/** A body of toned lines: what a card's view helper computed, drawn one line per row. */\nexport function MessageLines({ className, lines, ...props }: MessageLinesProps) {\n  return (\n    <div data-slot=\"message-lines\" className={cn('flex flex-col gap-0.5', className)} {...props}>\n      {lines.map((line, index) => (\n        <div\n          key={`${String(index)}-${line.text}`}\n          className={messageLineVariants({ tone: line.tone, bold: line.bold === true, indent: line.indent === true })}\n        >\n          {line.text}\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"0HAgBA,MAAa,EAAsB,EAAI,kCAAmC,CACxE,SAAU,CACR,KAAM,CACJ,GAAI,eACJ,KAAM,iBACN,IAAK,gBACL,MAAO,kBACP,QAAS,kBACT,MAAO,gBACP,QAAS,mBACT,OAAQ,gBACV,EACA,KAAM,CAAE,KAAM,YAAa,MAAO,EAAG,EACrC,OAAQ,CAAE,KAAM,OAAQ,MAAO,EAAG,CACpC,EACA,gBAAiB,CAAE,KAAM,MAAO,KAAM,GAAO,OAAQ,EAAM,CAC7D,CAAC,EAOD,SAAgB,EAAa,CAAE,YAAW,QAAO,GAAG,GAA4B,CAC9E,MACE,kBAAC,MAAD,CAAK,YAAU,gBAAgB,UAAW,EAAG,wBAAyB,CAAS,EAAG,GAAI,EACnF,SAAA,EAAM,KAAK,EAAM,IAChB,kBAAC,MAAD,CAEE,UAAW,EAAoB,CAAE,KAAM,EAAK,KAAM,KAAM,EAAK,OAAS,GAAM,OAAQ,EAAK,SAAW,EAAK,CAAC,EAEzG,SAAA,EAAK,IACH,EAJE,GAAG,OAAO,CAAK,EAAE,GAAG,EAAK,MAI3B,CACN,CACE,CAAA,CAET"}

package/dist/src/components/OptionList.cjs

@@ -1,2 +1,2 @@
-const e=require("../lib/cn.cjs"),t=require("../lib/optionList.cjs");let n=require("react/jsx-runtime"),r=require("class-variance-authority"),i=require("react");const a=(0,r.cva)(`flex min-h-0 flex-1 flex-col overflow-y-auto`,{variants:{density:{compact:`gap-0.5 p-1.5`,comfortable:`gap-1.5`}},defaultVariants:{density:`comfortable`}}),o=(0,r.cva)(`flex shrink-0 cursor-pointer items-center text-left outline-none`,{variants:{density:{compact:`gap-2.5 rounded-[5px] px-2 py-[7px]`,comfortable:`min-h-[42px] gap-3 rounded-md border px-[11px] py-2 text-[12px] text-doom-text transition-colors`},active:{true:``,false:``}},compoundVariants:[{density:`compact`,active:!0,class:`bg-doom-tint-blue`},{density:`comfortable`,active:!0,class:`border-doom-edge-blue bg-doom-tint-blue`},{density:`comfortable`,active:!1,class:`border-doom-border-soft`}],defaultVariants:{density:`comfortable`,active:!1}}),s=(0,r.cva)(`flex shrink-0 items-center justify-center rounded-full font-bold`,{variants:{density:{compact:`h-[15px] w-[15px] border border-doom-border text-[8px] text-doom-faint`,comfortable:`h-[18px] w-[18px] bg-doom-deep text-[10px] text-doom-dim`}},defaultVariants:{density:`comfortable`}});function c({className:t,density:r,active:i,marker:a,children:c,...l}){return(0,n.jsxs)(`button`,{type:`button`,role:`option`,"data-slot":`option-row`,"aria-selected":i??!1,"data-cursor":i??!1,className:e.cn(o({density:r,active:i}),t),...l,children:[a===void 0?null:(0,n.jsx)(`span`,{className:s({density:r}),children:a}),c]})}function l({className:t,density:r,...i}){return(0,n.jsx)(`span`,{"data-slot":`option-label`,className:e.cn(`min-w-0 flex-1`,r===`compact`?`truncate text-[12px] text-doom-text`:`break-words`,t),...i})}function u({className:r,options:o,cursor:s,onCursorChange:u,onSelect:d,testIdPrefix:f,density:p=`comfortable`,...m}){let h=(0,i.useRef)(null);return(0,i.useEffect)(()=>{h.current?.children[s]?.scrollIntoView({block:`nearest`})},[s]),(0,n.jsx)(`div`,{ref:h,role:`listbox`,"aria-label":`options`,"data-slot":`option-list`,"data-testid":`${f}s`,className:e.cn(a({density:p}),r),...m,children:o.map((e,r)=>(0,n.jsx)(c,{density:p,active:r===s,marker:t.optionMarker(r),"data-testid":`${f}-${String(r)}`,title:e,onMouseEnter:()=>u(r),onClick:()=>d(e),children:(0,n.jsx)(l,{density:p,children:e})},e))})}exports.OptionLabel=l,exports.OptionList=u,exports.OptionRow=c,exports.optionListVariants=a,exports.optionMarkerVariants=s,exports.optionRowVariants=o;
+const e=require("../lib/cn.cjs"),t=require("../lib/optionList.cjs");let n=require("react/jsx-runtime"),r=require("react"),i=require("class-variance-authority");const a=(0,i.cva)(`flex min-h-0 flex-1 flex-col overflow-y-auto`,{variants:{density:{compact:`gap-0.5 p-1.5`,comfortable:`gap-1.5`}},defaultVariants:{density:`comfortable`}}),o=(0,i.cva)(`flex shrink-0 cursor-pointer items-center text-left outline-none`,{variants:{density:{compact:`gap-2.5 rounded-md px-2 py-[7px]`,comfortable:`min-h-[42px] gap-3 rounded-md border px-[11px] py-2 text-sm text-doom-text transition-colors`},active:{true:``,false:``}},compoundVariants:[{density:`compact`,active:!0,class:`bg-doom-tint-blue`},{density:`comfortable`,active:!0,class:`border-doom-edge-blue bg-doom-tint-blue`},{density:`comfortable`,active:!1,class:`border-doom-border-soft`}],defaultVariants:{density:`comfortable`,active:!1}}),s=(0,i.cva)(`flex shrink-0 items-center justify-center rounded-full font-bold`,{variants:{density:{compact:`h-[15px] w-[15px] border border-doom-border text-2xs text-doom-faint`,comfortable:`h-[18px] w-[18px] bg-doom-deep text-xs text-doom-dim`}},defaultVariants:{density:`comfortable`}});function c({className:t,density:r,active:i,marker:a,children:c,...l}){return/* @__PURE__ */ (0,n.jsxs)(`button`,{type:`button`,role:`option`,"data-slot":`option-row`,"aria-selected":i??!1,"data-cursor":i??!1,className:e.cn(o({density:r,active:i}),t),...l,children:[a===void 0?null:/* @__PURE__ */ (0,n.jsx)(`span`,{className:s({density:r}),children:a}),c]})}function l({className:t,density:r,...i}){return/* @__PURE__ */ (0,n.jsx)(`span`,{"data-slot":`option-label`,className:e.cn(`min-w-0 flex-1`,r===`compact`?`truncate text-sm text-doom-text`:`break-words`,t),...i})}function u({className:i,options:o,cursor:s,onCursorChange:u,onSelect:d,testIdPrefix:f,density:p=`comfortable`,...m}){let h=(0,r.useRef)(null);return(0,r.useEffect)(()=>{h.current?.children[s]?.scrollIntoView({block:`nearest`})},[s]),/* @__PURE__ */ (0,n.jsx)(`div`,{ref:h,role:`listbox`,"aria-label":`options`,"data-slot":`option-list`,"data-testid":`${f}s`,className:e.cn(a({density:p}),i),...m,children:o.map((e,r)=>/* @__PURE__ */ (0,n.jsx)(c,{density:p,active:r===s,marker:t.optionMarker(r),"data-testid":`${f}-${String(r)}`,title:e,onMouseEnter:()=>u(r),onClick:()=>d(e),children:/* @__PURE__ */ (0,n.jsx)(l,{density:p,children:e})},e))})}exports.OptionLabel=l,exports.OptionList=u,exports.OptionRow=c,exports.optionListVariants=a,exports.optionMarkerVariants=s,exports.optionRowVariants=o;
 //# sourceMappingURL=OptionList.cjs.map

package/dist/src/components/OptionList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OptionList.cjs","names":["cva","cn","useRef","optionMarker"],"sources":["../../../src/components/OptionList.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from 'react';\nimport { cn } from '../lib/cn.ts';\nimport { optionMarker } from '../lib/optionList.ts';\n\nexport const optionListVariants = cva('flex min-h-0 flex-1 flex-col overflow-y-auto', {\n  variants: {\n    /** The compact rows of a bar popover, or the roomier rows of a modal. */\n    density: { compact: 'gap-0.5 p-1.5', comfortable: 'gap-1.5' },\n  },\n  defaultVariants: { density: 'comfortable' },\n});\n\nexport const optionRowVariants = cva('flex shrink-0 cursor-pointer items-center text-left outline-none', {\n  variants: {\n    density: {\n      compact: 'gap-2.5 rounded-[5px] px-2 py-[7px]',\n      comfortable: 'min-h-[42px] gap-3 rounded-md border px-[11px] py-2 text-[12px] text-doom-text transition-colors',\n    },\n    active: { true: '', false: '' },\n  },\n  compoundVariants: [\n    { density: 'compact', active: true, class: 'bg-doom-tint-blue' },\n    { density: 'comfortable', active: true, class: 'border-doom-edge-blue bg-doom-tint-blue' },\n    { density: 'comfortable', active: false, class: 'border-doom-border-soft' },\n  ],\n  defaultVariants: { density: 'comfortable', active: false },\n});\n\nexport const optionMarkerVariants = cva('flex shrink-0 items-center justify-center rounded-full font-bold', {\n  variants: {\n    density: {\n      compact: 'h-[15px] w-[15px] border border-doom-border text-[8px] text-doom-faint',\n      comfortable: 'h-[18px] w-[18px] bg-doom-deep text-[10px] text-doom-dim',\n    },\n  },\n  defaultVariants: { density: 'comfortable' },\n});\n\nexport interface OptionRowProps extends ComponentProps<'button'>, VariantProps<typeof optionRowVariants> {\n  /** The digit or bullet in the row's leading circle; omit it for a row with no shortcut. */\n  marker?: ReactNode;\n}\n\n/**\n * One row of an option list, exported on its own so a surface with richer\n * rows than a plain string still wears the list's shape instead of restating\n * it. Children render straight into the row, so a row is free to hold a name\n * and a description side by side; OptionLabel is the single-string case.\n * `role=\"option\"` means a row belongs inside a `listbox`.\n */\nexport function OptionRow({ className, density, active, marker, children, ...props }: OptionRowProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"option\"\n      data-slot=\"option-row\"\n      aria-selected={active ?? false}\n      data-cursor={active ?? false}\n      className={cn(optionRowVariants({ density, active }), className)}\n      {...props}\n    >\n      {marker === undefined ? null : <span className={optionMarkerVariants({ density })}>{marker}</span>}\n      {children}\n    </button>\n  );\n}\n\n/** A row's single-string label: it takes the remaining width and clips or wraps by density. */\nexport function OptionLabel({\n  className,\n  density,\n  ...props\n}: ComponentProps<'span'> & VariantProps<typeof optionListVariants>) {\n  return (\n    <span\n      data-slot=\"option-label\"\n      className={cn(\n        'min-w-0 flex-1',\n        density === 'compact' ? 'truncate text-[12px] text-doom-text' : 'break-words',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface OptionListProps\n  extends Omit<ComponentProps<'div'>, 'onSelect'>, VariantProps<typeof optionListVariants> {\n  options: readonly string[];\n  /** The highlighted row, owned by the surface so its own focused element can drive it. */\n  cursor: number;\n  onCursorChange: (cursor: number) => void;\n  onSelect: (option: string) => void;\n  /** Rows are `${testIdPrefix}-${index}`; the list itself is the plural, so a prefix query for a row never catches it. */\n  testIdPrefix: string;\n}\n\n/**\n * The answers a select surface offers, wherever it is framed.\n *\n * The agent decides how many options there are, and a real one runs past\n * twenty, so the list cannot rely on the digit shortcuts alone. The cursor is\n * controlled rather than owned here because the surface around it is what the\n * overlay library focuses: keys arrive there, and taking focus away from it to\n * a list would fight the library for it and break the escape and outside-click\n * behaviour that focus carries. Pair it with handleOptionListKey.\n */\nexport function OptionList({\n  className,\n  options,\n  cursor,\n  onCursorChange,\n  onSelect,\n  testIdPrefix,\n  density = 'comfortable',\n  ...props\n}: OptionListProps) {\n  const container = useRef<HTMLDivElement>(null);\n\n  // Keep the highlighted row visible when the keyboard moves it past the edge.\n  useEffect(() => {\n    container.current?.children[cursor]?.scrollIntoView({ block: 'nearest' });\n  }, [cursor]);\n\n  return (\n    <div\n      ref={container}\n      role=\"listbox\"\n      aria-label=\"options\"\n      data-slot=\"option-list\"\n      data-testid={`${testIdPrefix}s`}\n      className={cn(optionListVariants({ density }), className)}\n      {...props}\n    >\n      {options.map((option, index) => (\n        <OptionRow\n          key={option}\n          density={density}\n          active={index === cursor}\n          marker={optionMarker(index)}\n          data-testid={`${testIdPrefix}-${String(index)}`}\n          title={option}\n          onMouseEnter={() => onCursorChange(index)}\n          onClick={() => onSelect(option)}\n        >\n          <OptionLabel density={density}>{option}</OptionLabel>\n        </OptionRow>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"gKAKA,MAAa,GAAA,EAAqBA,EAAAA,IAAAA,CAAI,+CAAgD,CACpF,SAAU,CAER,QAAS,CAAE,QAAS,gBAAiB,YAAa,SAAU,CAC9D,EACA,gBAAiB,CAAE,QAAS,aAAc,CAC5C,CAAC,EAEY,GAAA,EAAoBA,EAAAA,IAAAA,CAAI,mEAAoE,CACvG,SAAU,CACR,QAAS,CACP,QAAS,sCACT,YAAa,kGACf,EACA,OAAQ,CAAE,KAAM,GAAI,MAAO,EAAG,CAChC,EACA,iBAAkB,CAChB,CAAE,QAAS,UAAW,OAAQ,GAAM,MAAO,mBAAoB,EAC/D,CAAE,QAAS,cAAe,OAAQ,GAAM,MAAO,yCAA0C,EACzF,CAAE,QAAS,cAAe,OAAQ,GAAO,MAAO,yBAA0B,CAC5E,EACA,gBAAiB,CAAE,QAAS,cAAe,OAAQ,EAAM,CAC3D,CAAC,EAEY,GAAA,EAAuBA,EAAAA,IAAAA,CAAI,mEAAoE,CAC1G,SAAU,CACR,QAAS,CACP,QAAS,yEACT,YAAa,0DACf,CACF,EACA,gBAAiB,CAAE,QAAS,aAAc,CAC5C,CAAC,EAcD,SAAgB,EAAU,CAAE,YAAW,UAAS,SAAQ,SAAQ,WAAU,GAAG,GAAyB,CACpG,OACE,EAAA,EAAA,KAAA,CAAC,SAAD,CACE,KAAK,SACL,KAAK,SACL,YAAU,aACV,gBAAe,GAAU,GACzB,cAAa,GAAU,GACvB,UAAWC,EAAAA,GAAG,EAAkB,CAAE,UAAS,QAAO,CAAC,EAAG,CAAS,EAC/D,GAAI,EAPN,SAAA,CASG,IAAW,IAAA,GAAY,MAAO,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAqB,CAAE,SAAQ,CAAC,EAAI,SAAA,CAAa,CAAA,EAChG,CACK,GAEZ,CAGA,SAAgB,EAAY,CAC1B,YACA,UACA,GAAG,GACgE,CACnE,OACE,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,YAAU,eACV,UAAWA,EAAAA,GACT,iBACA,IAAY,UAAY,sCAAwC,cAChE,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAuBA,SAAgB,EAAW,CACzB,YACA,UACA,SACA,iBACA,WACA,eACA,UAAU,cACV,GAAG,GACe,CAClB,IAAM,GAAA,EAAYC,EAAAA,OAAAA,CAAuB,IAAI,EAO7C,OAJA,EAAA,EAAA,UAAA,KAAgB,CACd,EAAU,SAAS,SAAS,EAAO,EAAE,eAAe,CAAE,MAAO,SAAU,CAAC,CAC1E,EAAG,CAAC,CAAM,CAAC,GAGT,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,IAAK,EACL,KAAK,UACL,aAAW,UACX,YAAU,cACV,cAAa,GAAG,EAAa,GAC7B,UAAWD,EAAAA,GAAG,EAAmB,CAAE,SAAQ,CAAC,EAAG,CAAS,EACxD,GAAI,EAEH,SAAA,EAAQ,KAAK,EAAQ,KACpB,EAAA,EAAA,IAAA,CAAC,EAAD,CAEW,UACT,OAAQ,IAAU,EAClB,OAAQE,EAAAA,aAAa,CAAK,EAC1B,cAAa,GAAG,EAAa,GAAG,OAAO,CAAK,IAC5C,MAAO,EACP,iBAAoB,EAAe,CAAK,EACxC,YAAe,EAAS,CAAM,EAE9B,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAsB,UAAU,SAAA,CAAoB,CAAA,CAC3C,EAVJ,CAUI,CACZ,CACE,CAAA,CAET"}
+{"version":3,"file":"OptionList.cjs","names":["cva","cn","useRef","optionMarker"],"sources":["../../../src/components/OptionList.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from 'react';\n\nimport { cn } from '../lib/cn';\nimport { optionMarker } from '../lib/optionList';\n\nexport const optionListVariants = cva('flex min-h-0 flex-1 flex-col overflow-y-auto', {\n  variants: {\n    /** The compact rows of a bar popover, or the roomier rows of a modal. */\n    density: { compact: 'gap-0.5 p-1.5', comfortable: 'gap-1.5' },\n  },\n  defaultVariants: { density: 'comfortable' },\n});\n\nexport const optionRowVariants = cva('flex shrink-0 cursor-pointer items-center text-left outline-none', {\n  variants: {\n    density: {\n      compact: 'gap-2.5 rounded-md px-2 py-[7px]',\n      comfortable: 'min-h-[42px] gap-3 rounded-md border px-[11px] py-2 text-sm text-doom-text transition-colors',\n    },\n    active: { true: '', false: '' },\n  },\n  compoundVariants: [\n    { density: 'compact', active: true, class: 'bg-doom-tint-blue' },\n    { density: 'comfortable', active: true, class: 'border-doom-edge-blue bg-doom-tint-blue' },\n    { density: 'comfortable', active: false, class: 'border-doom-border-soft' },\n  ],\n  defaultVariants: { density: 'comfortable', active: false },\n});\n\nexport const optionMarkerVariants = cva('flex shrink-0 items-center justify-center rounded-full font-bold', {\n  variants: {\n    density: {\n      compact: 'h-[15px] w-[15px] border border-doom-border text-2xs text-doom-faint',\n      comfortable: 'h-[18px] w-[18px] bg-doom-deep text-xs text-doom-dim',\n    },\n  },\n  defaultVariants: { density: 'comfortable' },\n});\n\nexport interface OptionRowProps extends ComponentProps<'button'>, VariantProps<typeof optionRowVariants> {\n  /** The digit or bullet in the row's leading circle; omit it for a row with no shortcut. */\n  marker?: ReactNode;\n}\n\n/**\n * One row of an option list, exported on its own so a surface with richer\n * rows than a plain string still wears the list's shape instead of restating\n * it. Children render straight into the row, so a row is free to hold a name\n * and a description side by side; OptionLabel is the single-string case.\n * `role=\"option\"` means a row belongs inside a `listbox`.\n */\nexport function OptionRow({ className, density, active, marker, children, ...props }: OptionRowProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"option\"\n      data-slot=\"option-row\"\n      aria-selected={active ?? false}\n      data-cursor={active ?? false}\n      className={cn(optionRowVariants({ density, active }), className)}\n      {...props}\n    >\n      {marker === undefined ? null : <span className={optionMarkerVariants({ density })}>{marker}</span>}\n      {children}\n    </button>\n  );\n}\n\n/** A row's single-string label: it takes the remaining width and clips or wraps by density. */\nexport function OptionLabel({\n  className,\n  density,\n  ...props\n}: ComponentProps<'span'> & VariantProps<typeof optionListVariants>) {\n  return (\n    <span\n      data-slot=\"option-label\"\n      className={cn(\n        'min-w-0 flex-1',\n        density === 'compact' ? 'truncate text-sm text-doom-text' : 'break-words',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface OptionListProps\n  extends Omit<ComponentProps<'div'>, 'onSelect'>, VariantProps<typeof optionListVariants> {\n  options: readonly string[];\n  /** The highlighted row, owned by the surface so its own focused element can drive it. */\n  cursor: number;\n  onCursorChange: (cursor: number) => void;\n  onSelect: (option: string) => void;\n  /** Rows are `${testIdPrefix}-${index}`; the list itself is the plural, so a prefix query for a row never catches it. */\n  testIdPrefix: string;\n}\n\n/**\n * The answers a select surface offers, wherever it is framed.\n *\n * The agent decides how many options there are, and a real one runs past\n * twenty, so the list cannot rely on the digit shortcuts alone. The cursor is\n * controlled rather than owned here because the surface around it is what the\n * overlay library focuses: keys arrive there, and taking focus away from it to\n * a list would fight the library for it and break the escape and outside-click\n * behaviour that focus carries. Pair it with handleOptionListKey.\n */\nexport function OptionList({\n  className,\n  options,\n  cursor,\n  onCursorChange,\n  onSelect,\n  testIdPrefix,\n  density = 'comfortable',\n  ...props\n}: OptionListProps) {\n  const container = useRef<HTMLDivElement>(null);\n\n  // Keep the highlighted row visible when the keyboard moves it past the edge.\n  useEffect(() => {\n    container.current?.children[cursor]?.scrollIntoView({ block: 'nearest' });\n  }, [cursor]);\n\n  return (\n    <div\n      ref={container}\n      role=\"listbox\"\n      aria-label=\"options\"\n      data-slot=\"option-list\"\n      data-testid={`${testIdPrefix}s`}\n      className={cn(optionListVariants({ density }), className)}\n      {...props}\n    >\n      {options.map((option, index) => (\n        <OptionRow\n          key={option}\n          density={density}\n          active={index === cursor}\n          marker={optionMarker(index)}\n          data-testid={`${testIdPrefix}-${String(index)}`}\n          title={option}\n          onMouseEnter={() => onCursorChange(index)}\n          onClick={() => onSelect(option)}\n        >\n          <OptionLabel density={density}>{option}</OptionLabel>\n        </OptionRow>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"gKAMA,MAAa,GAAA,EAAqBA,EAAAA,IAAAA,CAAI,+CAAgD,CACpF,SAAU,CAER,QAAS,CAAE,QAAS,gBAAiB,YAAa,SAAU,CAC9D,EACA,gBAAiB,CAAE,QAAS,aAAc,CAC5C,CAAC,EAEY,GAAA,EAAoBA,EAAAA,IAAAA,CAAI,mEAAoE,CACvG,SAAU,CACR,QAAS,CACP,QAAS,mCACT,YAAa,8FACf,EACA,OAAQ,CAAE,KAAM,GAAI,MAAO,EAAG,CAChC,EACA,iBAAkB,CAChB,CAAE,QAAS,UAAW,OAAQ,GAAM,MAAO,mBAAoB,EAC/D,CAAE,QAAS,cAAe,OAAQ,GAAM,MAAO,yCAA0C,EACzF,CAAE,QAAS,cAAe,OAAQ,GAAO,MAAO,yBAA0B,CAC5E,EACA,gBAAiB,CAAE,QAAS,cAAe,OAAQ,EAAM,CAC3D,CAAC,EAEY,GAAA,EAAuBA,EAAAA,IAAAA,CAAI,mEAAoE,CAC1G,SAAU,CACR,QAAS,CACP,QAAS,uEACT,YAAa,sDACf,CACF,EACA,gBAAiB,CAAE,QAAS,aAAc,CAC5C,CAAC,EAcD,SAAgB,EAAU,CAAE,YAAW,UAAS,SAAQ,SAAQ,WAAU,GAAG,GAAyB,CACpG,MACE,iBAAA,EAAA,EAAA,KAAA,CAAC,SAAD,CACE,KAAK,SACL,KAAK,SACL,YAAU,aACV,gBAAe,GAAU,GACzB,cAAa,GAAU,GACvB,UAAWC,EAAAA,GAAG,EAAkB,CAAE,UAAS,QAAO,CAAC,EAAG,CAAS,EAC/D,GAAI,EAPN,SAAA,CASG,IAAW,IAAA,GAAY,KAAO,iBAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAqB,CAAE,SAAQ,CAAC,EAAI,SAAA,CAAa,CAAA,EAChG,CACK,GAEZ,CAGA,SAAgB,EAAY,CAC1B,YACA,UACA,GAAG,GACgE,CACnE,MACE,iBAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,YAAU,eACV,UAAWA,EAAAA,GACT,iBACA,IAAY,UAAY,kCAAoC,cAC5D,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAuBA,SAAgB,EAAW,CACzB,YACA,UACA,SACA,iBACA,WACA,eACA,UAAU,cACV,GAAG,GACe,CAClB,IAAM,GAAA,EAAYC,EAAAA,OAAAA,CAAuB,IAAI,EAO7C,OAJA,EAAA,EAAA,UAAA,KAAgB,CACd,EAAU,SAAS,SAAS,EAAO,EAAE,eAAe,CAAE,MAAO,SAAU,CAAC,CAC1E,EAAG,CAAC,CAAM,CAAC,EAGT,iBAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,IAAK,EACL,KAAK,UACL,aAAW,UACX,YAAU,cACV,cAAa,GAAG,EAAa,GAC7B,UAAWD,EAAAA,GAAG,EAAmB,CAAE,SAAQ,CAAC,EAAG,CAAS,EACxD,GAAI,EAEH,SAAA,EAAQ,KAAK,EAAQ,IACpB,iBAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAEW,UACT,OAAQ,IAAU,EAClB,OAAQE,EAAAA,aAAa,CAAK,EAC1B,cAAa,GAAG,EAAa,GAAG,OAAO,CAAK,IAC5C,MAAO,EACP,iBAAoB,EAAe,CAAK,EACxC,YAAe,EAAS,CAAM,EAE9B,SAAA,iBAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAsB,UAAU,SAAA,CAAoB,CAAA,CAC3C,EAVJ,CAUI,CACZ,CACE,CAAA,CAET"}

package/dist/src/components/OptionList.d.mts

@@ -1,17 +1,17 @@
-import { VariantProps } from "class-variance-authority";
 import { ComponentProps, ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
 //#region src/components/OptionList.d.ts
-declare const optionListVariants: (props?: ({
+export declare const optionListVariants: (props?: ({
   density?: "comfortable" | "compact" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const optionRowVariants: (props?: ({
+export declare const optionRowVariants: (props?: ({
   density?: "comfortable" | "compact" | null | undefined;
   active?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const optionMarkerVariants: (props?: ({
+export declare const optionMarkerVariants: (props?: ({
   density?: "comfortable" | "compact" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface OptionRowProps extends ComponentProps<'button'>, VariantProps<typeof optionRowVariants> {
+export interface OptionRowProps extends ComponentProps<'button'>, VariantProps<typeof optionRowVariants> {
   /** The digit or bullet in the row's leading circle; omit it for a row with no shortcut. */
   marker?: ReactNode;
 }
@@ -22,10 +22,10 @@ interface OptionRowProps extends ComponentProps<'button'>, VariantProps<typeof o
  * and a description side by side; OptionLabel is the single-string case.
  * `role="option"` means a row belongs inside a `listbox`.
  */
-declare function OptionRow({ className, density, active, marker, children, ...props }: OptionRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function OptionRow({ className, density, active, marker, children, ...props }: OptionRowProps): import("react").JSX.Element;
 /** A row's single-string label: it takes the remaining width and clips or wraps by density. */
-declare function OptionLabel({ className, density, ...props }: ComponentProps<'span'> & VariantProps<typeof optionListVariants>): import("react/jsx-runtime").JSX.Element;
-interface OptionListProps extends Omit<ComponentProps<'div'>, 'onSelect'>, VariantProps<typeof optionListVariants> {
+export declare function OptionLabel({ className, density, ...props }: ComponentProps<'span'> & VariantProps<typeof optionListVariants>): import("react").JSX.Element;
+export interface OptionListProps extends Omit<ComponentProps<'div'>, 'onSelect'>, VariantProps<typeof optionListVariants> {
   options: readonly string[];
   /** The highlighted row, owned by the surface so its own focused element can drive it. */
   cursor: number;
@@ -44,7 +44,6 @@ interface OptionListProps extends Omit<ComponentProps<'div'>, 'onSelect'>, Varia
  * a list would fight the library for it and break the escape and outside-click
  * behaviour that focus carries. Pair it with handleOptionListKey.
  */
-declare function OptionList({ className, options, cursor, onCursorChange, onSelect, testIdPrefix, density, ...props }: OptionListProps): import("react/jsx-runtime").JSX.Element;
+export declare function OptionList({ className, options, cursor, onCursorChange, onSelect, testIdPrefix, density, ...props }: OptionListProps): import("react").JSX.Element;
 //#endregion
-export { OptionLabel, OptionList, OptionListProps, OptionRow, OptionRowProps, optionListVariants, optionMarkerVariants, optionRowVariants };
 //# sourceMappingURL=OptionList.d.mts.map

package/dist/src/components/OptionList.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionList.d.mts","names":[],"sources":["../../../src/components/OptionList.tsx"],"mappings":";;;cAKa,qBAAkB;;6CAM7B;cAEW,oBAAiB;;;6CAc5B;cAEW,uBAAoB;;6CAQ/B;UAEe,uBAAuB,0BAA0B,oBAAoB;;EAEpF,SAAS;;;;;;;;;iBAUK,YAAY,WAAW,SAAS,QAAQ,QAAQ,aAAa,SAAS,6CAAc,IAAA;;iBAkBpF,cACd,WACA,YACG,SACF,yBAAyB,oBAAoB,kDAAmB,IAAA;UAclD,wBACP,KAAK,oCAAoC,oBAAoB;EACrE;;EAEA;EACA,iBAAiB;EACjB,WAAW;;EAEX;;;;;;;;;;;;iBAac,aACd,WACA,SACA,QACA,gBACA,UACA,cACA,YACG,SACF,8CAAe,IAAA"}
+{"version":3,"file":"OptionList.d.mts","names":[],"sources":["../../../src/components/OptionList.tsx"],"mappings":";;;qBAMa,qBAAkB;;6CAM7B;qBAEW,oBAAiB;;;6CAc5B;qBAEW,uBAAoB;;6CAQ/B;iBAEe,uBAAuB,0BAA0B,oBAAoB;;EAEpF,SAAS;;;;;;;;;wBAUK,YAAY,WAAW,SAAS,QAAQ,QAAQ,aAAa,SAAS,iCAAc,IAAA;;wBAkBpF,cACd,WACA,YACG,SACF,yBAAyB,oBAAoB,sCAAmB,IAAA;iBAclD,wBACP,KAAK,oCAAoC,oBAAoB;EACrE;;EAEA;EACA,iBAAiB;EACjB,WAAW;;EAEX;;;;;;;;;;;;wBAac,aACd,WACA,SACA,QACA,gBACA,UACA,cACA,YACG,SACF,kCAAe,IAAA"}

package/dist/src/components/OptionList.mjs

@@ -1,2 +1,2 @@
-import{cn as e}from"../lib/cn.mjs";import{optionMarker as t}from"../lib/optionList.mjs";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{cva as i}from"class-variance-authority";import{useEffect as a,useRef as o}from"react";const s=i(`flex min-h-0 flex-1 flex-col overflow-y-auto`,{variants:{density:{compact:`gap-0.5 p-1.5`,comfortable:`gap-1.5`}},defaultVariants:{density:`comfortable`}}),c=i(`flex shrink-0 cursor-pointer items-center text-left outline-none`,{variants:{density:{compact:`gap-2.5 rounded-[5px] px-2 py-[7px]`,comfortable:`min-h-[42px] gap-3 rounded-md border px-[11px] py-2 text-[12px] text-doom-text transition-colors`},active:{true:``,false:``}},compoundVariants:[{density:`compact`,active:!0,class:`bg-doom-tint-blue`},{density:`comfortable`,active:!0,class:`border-doom-edge-blue bg-doom-tint-blue`},{density:`comfortable`,active:!1,class:`border-doom-border-soft`}],defaultVariants:{density:`comfortable`,active:!1}}),l=i(`flex shrink-0 items-center justify-center rounded-full font-bold`,{variants:{density:{compact:`h-[15px] w-[15px] border border-doom-border text-[8px] text-doom-faint`,comfortable:`h-[18px] w-[18px] bg-doom-deep text-[10px] text-doom-dim`}},defaultVariants:{density:`comfortable`}});function u({className:t,density:i,active:a,marker:o,children:s,...u}){return r(`button`,{type:`button`,role:`option`,"data-slot":`option-row`,"aria-selected":a??!1,"data-cursor":a??!1,className:e(c({density:i,active:a}),t),...u,children:[o===void 0?null:n(`span`,{className:l({density:i}),children:o}),s]})}function d({className:t,density:r,...i}){return n(`span`,{"data-slot":`option-label`,className:e(`min-w-0 flex-1`,r===`compact`?`truncate text-[12px] text-doom-text`:`break-words`,t),...i})}function f({className:r,options:i,cursor:c,onCursorChange:l,onSelect:f,testIdPrefix:p,density:m=`comfortable`,...h}){let g=o(null);return a(()=>{g.current?.children[c]?.scrollIntoView({block:`nearest`})},[c]),n(`div`,{ref:g,role:`listbox`,"aria-label":`options`,"data-slot":`option-list`,"data-testid":`${p}s`,className:e(s({density:m}),r),...h,children:i.map((e,r)=>n(u,{density:m,active:r===c,marker:t(r),"data-testid":`${p}-${String(r)}`,title:e,onMouseEnter:()=>l(r),onClick:()=>f(e),children:n(d,{density:m,children:e})},e))})}export{d as OptionLabel,f as OptionList,u as OptionRow,s as optionListVariants,l as optionMarkerVariants,c as optionRowVariants};
+import{cn as e}from"../lib/cn.mjs";import{optionMarker as t}from"../lib/optionList.mjs";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{useEffect as i,useRef as a}from"react";import{cva as o}from"class-variance-authority";const s=o(`flex min-h-0 flex-1 flex-col overflow-y-auto`,{variants:{density:{compact:`gap-0.5 p-1.5`,comfortable:`gap-1.5`}},defaultVariants:{density:`comfortable`}}),c=o(`flex shrink-0 cursor-pointer items-center text-left outline-none`,{variants:{density:{compact:`gap-2.5 rounded-md px-2 py-[7px]`,comfortable:`min-h-[42px] gap-3 rounded-md border px-[11px] py-2 text-sm text-doom-text transition-colors`},active:{true:``,false:``}},compoundVariants:[{density:`compact`,active:!0,class:`bg-doom-tint-blue`},{density:`comfortable`,active:!0,class:`border-doom-edge-blue bg-doom-tint-blue`},{density:`comfortable`,active:!1,class:`border-doom-border-soft`}],defaultVariants:{density:`comfortable`,active:!1}}),l=o(`flex shrink-0 items-center justify-center rounded-full font-bold`,{variants:{density:{compact:`h-[15px] w-[15px] border border-doom-border text-2xs text-doom-faint`,comfortable:`h-[18px] w-[18px] bg-doom-deep text-xs text-doom-dim`}},defaultVariants:{density:`comfortable`}});function u({className:t,density:i,active:a,marker:o,children:s,...u}){return/* @__PURE__ */ r(`button`,{type:`button`,role:`option`,"data-slot":`option-row`,"aria-selected":a??!1,"data-cursor":a??!1,className:e(c({density:i,active:a}),t),...u,children:[o===void 0?null:/* @__PURE__ */ n(`span`,{className:l({density:i}),children:o}),s]})}function d({className:t,density:r,...i}){return/* @__PURE__ */ n(`span`,{"data-slot":`option-label`,className:e(`min-w-0 flex-1`,r===`compact`?`truncate text-sm text-doom-text`:`break-words`,t),...i})}function f({className:r,options:o,cursor:c,onCursorChange:l,onSelect:f,testIdPrefix:p,density:m=`comfortable`,...h}){let g=a(null);return i(()=>{g.current?.children[c]?.scrollIntoView({block:`nearest`})},[c]),/* @__PURE__ */ n(`div`,{ref:g,role:`listbox`,"aria-label":`options`,"data-slot":`option-list`,"data-testid":`${p}s`,className:e(s({density:m}),r),...h,children:o.map((e,r)=>/* @__PURE__ */ n(u,{density:m,active:r===c,marker:t(r),"data-testid":`${p}-${String(r)}`,title:e,onMouseEnter:()=>l(r),onClick:()=>f(e),children:/* @__PURE__ */ n(d,{density:m,children:e})},e))})}export{d as OptionLabel,f as OptionList,u as OptionRow,s as optionListVariants,l as optionMarkerVariants,c as optionRowVariants};
 //# sourceMappingURL=OptionList.mjs.map

package/dist/src/components/OptionList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OptionList.mjs","names":[],"sources":["../../../src/components/OptionList.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from 'react';\nimport { cn } from '../lib/cn.ts';\nimport { optionMarker } from '../lib/optionList.ts';\n\nexport const optionListVariants = cva('flex min-h-0 flex-1 flex-col overflow-y-auto', {\n  variants: {\n    /** The compact rows of a bar popover, or the roomier rows of a modal. */\n    density: { compact: 'gap-0.5 p-1.5', comfortable: 'gap-1.5' },\n  },\n  defaultVariants: { density: 'comfortable' },\n});\n\nexport const optionRowVariants = cva('flex shrink-0 cursor-pointer items-center text-left outline-none', {\n  variants: {\n    density: {\n      compact: 'gap-2.5 rounded-[5px] px-2 py-[7px]',\n      comfortable: 'min-h-[42px] gap-3 rounded-md border px-[11px] py-2 text-[12px] text-doom-text transition-colors',\n    },\n    active: { true: '', false: '' },\n  },\n  compoundVariants: [\n    { density: 'compact', active: true, class: 'bg-doom-tint-blue' },\n    { density: 'comfortable', active: true, class: 'border-doom-edge-blue bg-doom-tint-blue' },\n    { density: 'comfortable', active: false, class: 'border-doom-border-soft' },\n  ],\n  defaultVariants: { density: 'comfortable', active: false },\n});\n\nexport const optionMarkerVariants = cva('flex shrink-0 items-center justify-center rounded-full font-bold', {\n  variants: {\n    density: {\n      compact: 'h-[15px] w-[15px] border border-doom-border text-[8px] text-doom-faint',\n      comfortable: 'h-[18px] w-[18px] bg-doom-deep text-[10px] text-doom-dim',\n    },\n  },\n  defaultVariants: { density: 'comfortable' },\n});\n\nexport interface OptionRowProps extends ComponentProps<'button'>, VariantProps<typeof optionRowVariants> {\n  /** The digit or bullet in the row's leading circle; omit it for a row with no shortcut. */\n  marker?: ReactNode;\n}\n\n/**\n * One row of an option list, exported on its own so a surface with richer\n * rows than a plain string still wears the list's shape instead of restating\n * it. Children render straight into the row, so a row is free to hold a name\n * and a description side by side; OptionLabel is the single-string case.\n * `role=\"option\"` means a row belongs inside a `listbox`.\n */\nexport function OptionRow({ className, density, active, marker, children, ...props }: OptionRowProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"option\"\n      data-slot=\"option-row\"\n      aria-selected={active ?? false}\n      data-cursor={active ?? false}\n      className={cn(optionRowVariants({ density, active }), className)}\n      {...props}\n    >\n      {marker === undefined ? null : <span className={optionMarkerVariants({ density })}>{marker}</span>}\n      {children}\n    </button>\n  );\n}\n\n/** A row's single-string label: it takes the remaining width and clips or wraps by density. */\nexport function OptionLabel({\n  className,\n  density,\n  ...props\n}: ComponentProps<'span'> & VariantProps<typeof optionListVariants>) {\n  return (\n    <span\n      data-slot=\"option-label\"\n      className={cn(\n        'min-w-0 flex-1',\n        density === 'compact' ? 'truncate text-[12px] text-doom-text' : 'break-words',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface OptionListProps\n  extends Omit<ComponentProps<'div'>, 'onSelect'>, VariantProps<typeof optionListVariants> {\n  options: readonly string[];\n  /** The highlighted row, owned by the surface so its own focused element can drive it. */\n  cursor: number;\n  onCursorChange: (cursor: number) => void;\n  onSelect: (option: string) => void;\n  /** Rows are `${testIdPrefix}-${index}`; the list itself is the plural, so a prefix query for a row never catches it. */\n  testIdPrefix: string;\n}\n\n/**\n * The answers a select surface offers, wherever it is framed.\n *\n * The agent decides how many options there are, and a real one runs past\n * twenty, so the list cannot rely on the digit shortcuts alone. The cursor is\n * controlled rather than owned here because the surface around it is what the\n * overlay library focuses: keys arrive there, and taking focus away from it to\n * a list would fight the library for it and break the escape and outside-click\n * behaviour that focus carries. Pair it with handleOptionListKey.\n */\nexport function OptionList({\n  className,\n  options,\n  cursor,\n  onCursorChange,\n  onSelect,\n  testIdPrefix,\n  density = 'comfortable',\n  ...props\n}: OptionListProps) {\n  const container = useRef<HTMLDivElement>(null);\n\n  // Keep the highlighted row visible when the keyboard moves it past the edge.\n  useEffect(() => {\n    container.current?.children[cursor]?.scrollIntoView({ block: 'nearest' });\n  }, [cursor]);\n\n  return (\n    <div\n      ref={container}\n      role=\"listbox\"\n      aria-label=\"options\"\n      data-slot=\"option-list\"\n      data-testid={`${testIdPrefix}s`}\n      className={cn(optionListVariants({ density }), className)}\n      {...props}\n    >\n      {options.map((option, index) => (\n        <OptionRow\n          key={option}\n          density={density}\n          active={index === cursor}\n          marker={optionMarker(index)}\n          data-testid={`${testIdPrefix}-${String(index)}`}\n          title={option}\n          onMouseEnter={() => onCursorChange(index)}\n          onClick={() => onSelect(option)}\n        >\n          <OptionLabel density={density}>{option}</OptionLabel>\n        </OptionRow>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"uOAKA,MAAa,EAAqB,EAAI,+CAAgD,CACpF,SAAU,CAER,QAAS,CAAE,QAAS,gBAAiB,YAAa,SAAU,CAC9D,EACA,gBAAiB,CAAE,QAAS,aAAc,CAC5C,CAAC,EAEY,EAAoB,EAAI,mEAAoE,CACvG,SAAU,CACR,QAAS,CACP,QAAS,sCACT,YAAa,kGACf,EACA,OAAQ,CAAE,KAAM,GAAI,MAAO,EAAG,CAChC,EACA,iBAAkB,CAChB,CAAE,QAAS,UAAW,OAAQ,GAAM,MAAO,mBAAoB,EAC/D,CAAE,QAAS,cAAe,OAAQ,GAAM,MAAO,yCAA0C,EACzF,CAAE,QAAS,cAAe,OAAQ,GAAO,MAAO,yBAA0B,CAC5E,EACA,gBAAiB,CAAE,QAAS,cAAe,OAAQ,EAAM,CAC3D,CAAC,EAEY,EAAuB,EAAI,mEAAoE,CAC1G,SAAU,CACR,QAAS,CACP,QAAS,yEACT,YAAa,0DACf,CACF,EACA,gBAAiB,CAAE,QAAS,aAAc,CAC5C,CAAC,EAcD,SAAgB,EAAU,CAAE,YAAW,UAAS,SAAQ,SAAQ,WAAU,GAAG,GAAyB,CACpG,OACE,EAAC,SAAD,CACE,KAAK,SACL,KAAK,SACL,YAAU,aACV,gBAAe,GAAU,GACzB,cAAa,GAAU,GACvB,UAAW,EAAG,EAAkB,CAAE,UAAS,QAAO,CAAC,EAAG,CAAS,EAC/D,GAAI,EAPN,SAAA,CASG,IAAW,IAAA,GAAY,KAAO,EAAC,OAAD,CAAM,UAAW,EAAqB,CAAE,SAAQ,CAAC,EAAI,SAAA,CAAa,CAAA,EAChG,CACK,GAEZ,CAGA,SAAgB,EAAY,CAC1B,YACA,UACA,GAAG,GACgE,CACnE,OACE,EAAC,OAAD,CACE,YAAU,eACV,UAAW,EACT,iBACA,IAAY,UAAY,sCAAwC,cAChE,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAuBA,SAAgB,EAAW,CACzB,YACA,UACA,SACA,iBACA,WACA,eACA,UAAU,cACV,GAAG,GACe,CAClB,IAAM,EAAY,EAAuB,IAAI,EAO7C,OAJA,MAAgB,CACd,EAAU,SAAS,SAAS,EAAO,EAAE,eAAe,CAAE,MAAO,SAAU,CAAC,CAC1E,EAAG,CAAC,CAAM,CAAC,EAGT,EAAC,MAAD,CACE,IAAK,EACL,KAAK,UACL,aAAW,UACX,YAAU,cACV,cAAa,GAAG,EAAa,GAC7B,UAAW,EAAG,EAAmB,CAAE,SAAQ,CAAC,EAAG,CAAS,EACxD,GAAI,EAEH,SAAA,EAAQ,KAAK,EAAQ,IACpB,EAAC,EAAD,CAEW,UACT,OAAQ,IAAU,EAClB,OAAQ,EAAa,CAAK,EAC1B,cAAa,GAAG,EAAa,GAAG,OAAO,CAAK,IAC5C,MAAO,EACP,iBAAoB,EAAe,CAAK,EACxC,YAAe,EAAS,CAAM,EAE9B,SAAA,EAAC,EAAD,CAAsB,UAAU,SAAA,CAAoB,CAAA,CAC3C,EAVJ,CAUI,CACZ,CACE,CAAA,CAET"}
+{"version":3,"file":"OptionList.mjs","names":[],"sources":["../../../src/components/OptionList.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from 'react';\n\nimport { cn } from '../lib/cn';\nimport { optionMarker } from '../lib/optionList';\n\nexport const optionListVariants = cva('flex min-h-0 flex-1 flex-col overflow-y-auto', {\n  variants: {\n    /** The compact rows of a bar popover, or the roomier rows of a modal. */\n    density: { compact: 'gap-0.5 p-1.5', comfortable: 'gap-1.5' },\n  },\n  defaultVariants: { density: 'comfortable' },\n});\n\nexport const optionRowVariants = cva('flex shrink-0 cursor-pointer items-center text-left outline-none', {\n  variants: {\n    density: {\n      compact: 'gap-2.5 rounded-md px-2 py-[7px]',\n      comfortable: 'min-h-[42px] gap-3 rounded-md border px-[11px] py-2 text-sm text-doom-text transition-colors',\n    },\n    active: { true: '', false: '' },\n  },\n  compoundVariants: [\n    { density: 'compact', active: true, class: 'bg-doom-tint-blue' },\n    { density: 'comfortable', active: true, class: 'border-doom-edge-blue bg-doom-tint-blue' },\n    { density: 'comfortable', active: false, class: 'border-doom-border-soft' },\n  ],\n  defaultVariants: { density: 'comfortable', active: false },\n});\n\nexport const optionMarkerVariants = cva('flex shrink-0 items-center justify-center rounded-full font-bold', {\n  variants: {\n    density: {\n      compact: 'h-[15px] w-[15px] border border-doom-border text-2xs text-doom-faint',\n      comfortable: 'h-[18px] w-[18px] bg-doom-deep text-xs text-doom-dim',\n    },\n  },\n  defaultVariants: { density: 'comfortable' },\n});\n\nexport interface OptionRowProps extends ComponentProps<'button'>, VariantProps<typeof optionRowVariants> {\n  /** The digit or bullet in the row's leading circle; omit it for a row with no shortcut. */\n  marker?: ReactNode;\n}\n\n/**\n * One row of an option list, exported on its own so a surface with richer\n * rows than a plain string still wears the list's shape instead of restating\n * it. Children render straight into the row, so a row is free to hold a name\n * and a description side by side; OptionLabel is the single-string case.\n * `role=\"option\"` means a row belongs inside a `listbox`.\n */\nexport function OptionRow({ className, density, active, marker, children, ...props }: OptionRowProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"option\"\n      data-slot=\"option-row\"\n      aria-selected={active ?? false}\n      data-cursor={active ?? false}\n      className={cn(optionRowVariants({ density, active }), className)}\n      {...props}\n    >\n      {marker === undefined ? null : <span className={optionMarkerVariants({ density })}>{marker}</span>}\n      {children}\n    </button>\n  );\n}\n\n/** A row's single-string label: it takes the remaining width and clips or wraps by density. */\nexport function OptionLabel({\n  className,\n  density,\n  ...props\n}: ComponentProps<'span'> & VariantProps<typeof optionListVariants>) {\n  return (\n    <span\n      data-slot=\"option-label\"\n      className={cn(\n        'min-w-0 flex-1',\n        density === 'compact' ? 'truncate text-sm text-doom-text' : 'break-words',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface OptionListProps\n  extends Omit<ComponentProps<'div'>, 'onSelect'>, VariantProps<typeof optionListVariants> {\n  options: readonly string[];\n  /** The highlighted row, owned by the surface so its own focused element can drive it. */\n  cursor: number;\n  onCursorChange: (cursor: number) => void;\n  onSelect: (option: string) => void;\n  /** Rows are `${testIdPrefix}-${index}`; the list itself is the plural, so a prefix query for a row never catches it. */\n  testIdPrefix: string;\n}\n\n/**\n * The answers a select surface offers, wherever it is framed.\n *\n * The agent decides how many options there are, and a real one runs past\n * twenty, so the list cannot rely on the digit shortcuts alone. The cursor is\n * controlled rather than owned here because the surface around it is what the\n * overlay library focuses: keys arrive there, and taking focus away from it to\n * a list would fight the library for it and break the escape and outside-click\n * behaviour that focus carries. Pair it with handleOptionListKey.\n */\nexport function OptionList({\n  className,\n  options,\n  cursor,\n  onCursorChange,\n  onSelect,\n  testIdPrefix,\n  density = 'comfortable',\n  ...props\n}: OptionListProps) {\n  const container = useRef<HTMLDivElement>(null);\n\n  // Keep the highlighted row visible when the keyboard moves it past the edge.\n  useEffect(() => {\n    container.current?.children[cursor]?.scrollIntoView({ block: 'nearest' });\n  }, [cursor]);\n\n  return (\n    <div\n      ref={container}\n      role=\"listbox\"\n      aria-label=\"options\"\n      data-slot=\"option-list\"\n      data-testid={`${testIdPrefix}s`}\n      className={cn(optionListVariants({ density }), className)}\n      {...props}\n    >\n      {options.map((option, index) => (\n        <OptionRow\n          key={option}\n          density={density}\n          active={index === cursor}\n          marker={optionMarker(index)}\n          data-testid={`${testIdPrefix}-${String(index)}`}\n          title={option}\n          onMouseEnter={() => onCursorChange(index)}\n          onClick={() => onSelect(option)}\n        >\n          <OptionLabel density={density}>{option}</OptionLabel>\n        </OptionRow>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"uOAMA,MAAa,EAAqB,EAAI,+CAAgD,CACpF,SAAU,CAER,QAAS,CAAE,QAAS,gBAAiB,YAAa,SAAU,CAC9D,EACA,gBAAiB,CAAE,QAAS,aAAc,CAC5C,CAAC,EAEY,EAAoB,EAAI,mEAAoE,CACvG,SAAU,CACR,QAAS,CACP,QAAS,mCACT,YAAa,8FACf,EACA,OAAQ,CAAE,KAAM,GAAI,MAAO,EAAG,CAChC,EACA,iBAAkB,CAChB,CAAE,QAAS,UAAW,OAAQ,GAAM,MAAO,mBAAoB,EAC/D,CAAE,QAAS,cAAe,OAAQ,GAAM,MAAO,yCAA0C,EACzF,CAAE,QAAS,cAAe,OAAQ,GAAO,MAAO,yBAA0B,CAC5E,EACA,gBAAiB,CAAE,QAAS,cAAe,OAAQ,EAAM,CAC3D,CAAC,EAEY,EAAuB,EAAI,mEAAoE,CAC1G,SAAU,CACR,QAAS,CACP,QAAS,uEACT,YAAa,sDACf,CACF,EACA,gBAAiB,CAAE,QAAS,aAAc,CAC5C,CAAC,EAcD,SAAgB,EAAU,CAAE,YAAW,UAAS,SAAQ,SAAQ,WAAU,GAAG,GAAyB,CACpG,MACE,kBAAC,SAAD,CACE,KAAK,SACL,KAAK,SACL,YAAU,aACV,gBAAe,GAAU,GACzB,cAAa,GAAU,GACvB,UAAW,EAAG,EAAkB,CAAE,UAAS,QAAO,CAAC,EAAG,CAAS,EAC/D,GAAI,EAPN,SAAA,CASG,IAAW,IAAA,GAAY,KAAO,kBAAC,OAAD,CAAM,UAAW,EAAqB,CAAE,SAAQ,CAAC,EAAI,SAAA,CAAa,CAAA,EAChG,CACK,GAEZ,CAGA,SAAgB,EAAY,CAC1B,YACA,UACA,GAAG,GACgE,CACnE,MACE,kBAAC,OAAD,CACE,YAAU,eACV,UAAW,EACT,iBACA,IAAY,UAAY,kCAAoC,cAC5D,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAuBA,SAAgB,EAAW,CACzB,YACA,UACA,SACA,iBACA,WACA,eACA,UAAU,cACV,GAAG,GACe,CAClB,IAAM,EAAY,EAAuB,IAAI,EAO7C,OAJA,MAAgB,CACd,EAAU,SAAS,SAAS,EAAO,EAAE,eAAe,CAAE,MAAO,SAAU,CAAC,CAC1E,EAAG,CAAC,CAAM,CAAC,EAGT,kBAAC,MAAD,CACE,IAAK,EACL,KAAK,UACL,aAAW,UACX,YAAU,cACV,cAAa,GAAG,EAAa,GAC7B,UAAW,EAAG,EAAmB,CAAE,SAAQ,CAAC,EAAG,CAAS,EACxD,GAAI,EAEH,SAAA,EAAQ,KAAK,EAAQ,IACpB,kBAAC,EAAD,CAEW,UACT,OAAQ,IAAU,EAClB,OAAQ,EAAa,CAAK,EAC1B,cAAa,GAAG,EAAa,GAAG,OAAO,CAAK,IAC5C,MAAO,EACP,iBAAoB,EAAe,CAAK,EACxC,YAAe,EAAS,CAAM,EAE9B,SAAA,kBAAC,EAAD,CAAsB,UAAU,SAAA,CAAoB,CAAA,CAC3C,EAVJ,CAUI,CACZ,CACE,CAAA,CAET"}

package/dist/src/components/Panel.cjs

@@ -1,2 +1,2 @@
-const e=require("../lib/cn.cjs");let t=require("radix-ui"),n=require("react/jsx-runtime");function r({className:r,asChild:i=!1,...a}){let o=i?t.Slot.Root:`div`;return(0,n.jsx)(o,{"data-slot":`panel`,className:e.cn(`overflow-hidden rounded-md border border-doom-border bg-doom-panel`,r),...a})}function i({className:t,...r}){return(0,n.jsx)(`div`,{"data-slot":`panel-header`,className:e.cn(`flex min-h-8 items-center gap-2 px-[11px]`,t),...r})}function a({className:t,...r}){return(0,n.jsx)(`div`,{"data-slot":`panel-body`,className:e.cn(`border-t border-doom-border-soft bg-doom-deep px-3 py-2 text-[11px] text-doom-dim`,t),...r})}exports.Panel=r,exports.PanelBody=a,exports.PanelHeader=i;
+const e=require("../lib/cn.cjs");let t=require("radix-ui"),n=require("react/jsx-runtime");function r({className:r,asChild:i=!1,...a}){let o=i?t.Slot.Root:`div`;return/* @__PURE__ */ (0,n.jsx)(o,{"data-slot":`panel`,className:e.cn(`overflow-hidden rounded-md border border-doom-border bg-doom-panel`,r),...a})}function i({className:t,...r}){return/* @__PURE__ */ (0,n.jsx)(`div`,{"data-slot":`panel-header`,className:e.cn(`flex min-h-8 items-center gap-2 px-[11px]`,t),...r})}function a({className:t,...r}){return/* @__PURE__ */ (0,n.jsx)(`div`,{"data-slot":`panel-body`,className:e.cn(`border-t border-doom-border-soft bg-doom-deep px-3 py-2 text-sm text-doom-dim`,t),...r})}exports.Panel=r,exports.PanelBody=a,exports.PanelHeader=i;
 //# sourceMappingURL=Panel.cjs.map

package/dist/src/components/Panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.cjs","names":["Slot","cn"],"sources":["../../../src/components/Panel.tsx"],"sourcesContent":["import { Slot } from 'radix-ui';\nimport type { ComponentProps } from 'react';\nimport { cn } from '../lib/cn.ts';\n\nexport interface PanelProps extends ComponentProps<'div'> {\n  /** Render the child element instead of a <div>, so a list row can be a panel. */\n  asChild?: boolean;\n}\n\n/** The bordered card surface: a tool card, a run card, a provider row. */\nexport function Panel({ className, asChild = false, ...props }: PanelProps) {\n  const Component = asChild ? Slot.Root : 'div';\n  return (\n    <Component\n      data-slot=\"panel\"\n      className={cn('overflow-hidden rounded-md border border-doom-border bg-doom-panel', className)}\n      {...props}\n    />\n  );\n}\n\n/** A panel's title row. */\nexport function PanelHeader({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"panel-header\" className={cn('flex min-h-8 items-center gap-2 px-[11px]', className)} {...props} />\n  );\n}\n\n/** A panel's recessed body: the deep well the header sits above. */\nexport function PanelBody({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"panel-body\"\n      className={cn('border-t border-doom-border-soft bg-doom-deep px-3 py-2 text-[11px] text-doom-dim', className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"0FAUA,SAAgB,EAAM,CAAE,YAAW,UAAU,GAAO,GAAG,GAAqB,CAC1E,IAAM,EAAY,EAAUA,EAAAA,KAAK,KAAO,MACxC,OACE,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,YAAU,QACV,UAAWC,EAAAA,GAAG,qEAAsE,CAAS,EAC7F,GAAI,CACL,CAAA,CAEL,CAGA,SAAgB,EAAY,CAAE,YAAW,GAAG,GAAgC,CAC1E,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,eAAe,UAAWA,EAAAA,GAAG,4CAA6C,CAAS,EAAG,GAAI,CAAQ,CAAA,CAErH,CAGA,SAAgB,EAAU,CAAE,YAAW,GAAG,GAAgC,CACxE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,aACV,UAAWA,EAAAA,GAAG,oFAAqF,CAAS,EAC5G,GAAI,CACL,CAAA,CAEL"}
+{"version":3,"file":"Panel.cjs","names":["Slot","cn"],"sources":["../../../src/components/Panel.tsx"],"sourcesContent":["import { Slot } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../lib/cn';\n\nexport interface PanelProps extends ComponentProps<'div'> {\n  /** Render the child element instead of a <div>, so a list row can be a panel. */\n  asChild?: boolean;\n}\n\n/** The bordered card surface: a tool card, a run card, a provider row. */\nexport function Panel({ className, asChild = false, ...props }: PanelProps) {\n  const Component = asChild ? Slot.Root : 'div';\n  return (\n    <Component\n      data-slot=\"panel\"\n      className={cn('overflow-hidden rounded-md border border-doom-border bg-doom-panel', className)}\n      {...props}\n    />\n  );\n}\n\n/** A panel's title row. */\nexport function PanelHeader({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"panel-header\" className={cn('flex min-h-8 items-center gap-2 px-[11px]', className)} {...props} />\n  );\n}\n\n/** A panel's recessed body: the deep well the header sits above. */\nexport function PanelBody({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"panel-body\"\n      className={cn('border-t border-doom-border-soft bg-doom-deep px-3 py-2 text-sm text-doom-dim', className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"0FAWA,SAAgB,EAAM,CAAE,YAAW,UAAU,GAAO,GAAG,GAAqB,CAC1E,IAAM,EAAY,EAAUA,EAAAA,KAAK,KAAO,MACxC,MACE,iBAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,YAAU,QACV,UAAWC,EAAAA,GAAG,qEAAsE,CAAS,EAC7F,GAAI,CACL,CAAA,CAEL,CAGA,SAAgB,EAAY,CAAE,YAAW,GAAG,GAAgC,CAC1E,MACE,iBAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,eAAe,UAAWA,EAAAA,GAAG,4CAA6C,CAAS,EAAG,GAAI,CAAQ,CAAA,CAErH,CAGA,SAAgB,EAAU,CAAE,YAAW,GAAG,GAAgC,CACxE,MACE,iBAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,aACV,UAAWA,EAAAA,GAAG,gFAAiF,CAAS,EACxG,GAAI,CACL,CAAA,CAEL"}

package/dist/src/components/Panel.d.mts

@@ -1,15 +1,14 @@
 import { ComponentProps } from "react";
 //#region src/components/Panel.d.ts
-interface PanelProps extends ComponentProps<'div'> {
+export interface PanelProps extends ComponentProps<'div'> {
   /** Render the child element instead of a <div>, so a list row can be a panel. */
   asChild?: boolean;
 }
 /** The bordered card surface: a tool card, a run card, a provider row. */
-declare function Panel({ className, asChild, ...props }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Panel({ className, asChild, ...props }: PanelProps): import("react").JSX.Element;
 /** A panel's title row. */
-declare function PanelHeader({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PanelHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 /** A panel's recessed body: the deep well the header sits above. */
-declare function PanelBody({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PanelBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 //#endregion
-export { Panel, PanelBody, PanelHeader, PanelProps };
 //# sourceMappingURL=Panel.d.mts.map