@alexgorbatchev/shadcn 0.0.0-stage → 0.0.16

package/dist/chunk-aehkndxh.js

@@ -0,0 +1,100 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Progress2
+} from "./chunk-5j39rehg.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  pct,
+  announced
+} from "./chunk-v8ks0cfq.js";
+import {
+  paper,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/ReadAloud.tsx
+import { PauseIcon, PlayIcon, Volume2Icon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReadAloud2({
+  words,
+  spokenIndex,
+  playing,
+  rate,
+  elapsed,
+  duration,
+  onToggle,
+  onRateChange,
+  className,
+  ...props
+}) {
+  const progress = pct(spokenIndex, words.length);
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "ReadAloud",
+    "data-slot": "read-aloud",
+    className: cn2(cn2(paper, "flex w-full max-w-sm flex-col gap-3 rounded-md p-3.5"), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("p", {
+        className: "text-base leading-relaxed",
+        children: words.map((word, i) => /* @__PURE__ */ jsxs("span", {
+          className: cn2("transition-colors duration-200 motion-reduce:transition-none", i < spokenIndex ? "text-muted-foreground" : i === spokenIndex ? "text-foreground rounded bg-primary/12 bg-primary/15" : "text-muted-foreground"),
+          children: [
+            word,
+            " "
+          ]
+        }, `${i}-${word}`))
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2.5",
+        children: [
+          /* @__PURE__ */ jsx(Button2, {
+            type: "button",
+            "aria-label": playing ? "Pause" : "Play",
+            onClick: onToggle,
+            variant: "ghost",
+            children: playing ? /* @__PURE__ */ jsx(PauseIcon, {
+              "aria-hidden": "true",
+              "data-icon": "inline-start"
+            }) : /* @__PURE__ */ jsx(PlayIcon, {
+              "aria-hidden": "true",
+              "data-icon": "inline-start"
+            })
+          }),
+          /* @__PURE__ */ jsx(Progress2, {
+            "aria-label": "Read aloud progress",
+            value: announced(progress),
+            "aria-valuetext": `${elapsed} of ${duration}`
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            className: cn2(mono, "text-muted-foreground shrink-0 tabular-nums"),
+            children: [
+              elapsed,
+              " / ",
+              duration
+            ]
+          }),
+          /* @__PURE__ */ jsxs(Button2, {
+            type: "button",
+            "aria-label": `Playback speed, currently ${rate} times`,
+            onClick: onRateChange,
+            variant: "ghost",
+            children: [
+              rate,
+              "×"
+            ]
+          }),
+          /* @__PURE__ */ jsx(Volume2Icon, {
+            "aria-hidden": "true",
+            className: cn2("size-4")
+          })
+        ]
+      })
+    ]
+  });
+}
+
+export { ReadAloud2 };

package/dist/chunk-aexby8h3.js

@@ -0,0 +1,92 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/Toggle.tsx
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var toggleVariants2 = cva("group/toggle inline-flex items-center justify-center gap-control-gap rounded-sm text-sm font-medium whitespace-nowrap transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive aria-pressed:bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      outline: "border border-input bg-transparent hover:bg-muted"
+    },
+    size: {
+      default: "h-control min-w-control px-control-x has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+      sm: "h-control-sm min-w-control-sm px-control-x has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+      lg: "h-control-lg min-w-control-lg px-control-x has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2"
+    }
+  },
+  defaultVariants: { variant: "default", size: "default" }
+});
+function Toggle2({ density, className, variant = "default", size = "default", ...props }) {
+  return /* @__PURE__ */ jsx(TogglePrimitive, {
+    "data-density": density,
+    "data-slot": "toggle",
+    className: (state) => cn2(toggleVariants2({ variant, size }), typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+
+// src/components/ToggleGroup.tsx
+import { useContext } from "react";
+import { Toggle as TogglePrimitive2 } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+
+// src/toggle-group/ToggleGroupContext.ts
+import { createContext } from "react";
+var ToggleGroupContext = createContext({ spacing: 2 });
+
+// src/components/ToggleGroup.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ToggleGroup2({
+  density,
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(ToggleGroupPrimitive, {
+    "data-density": density,
+    "data-slot": "toggle-group",
+    "data-variant": variant,
+    "data-size": size,
+    "data-spacing": spacing,
+    orientation,
+    style: (state) => ({
+      gap: `calc(var(--spacing) * ${spacing})`,
+      ...typeof style === "function" ? style(state) : style
+    }),
+    className: (state) => cn2("group/toggle-group flex w-fit flex-row items-center rounded-sm data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", typeof className === "function" ? className(state) : className),
+    ...props,
+    children: /* @__PURE__ */ jsx2(ToggleGroupContext.Provider, {
+      value: { variant, size, spacing },
+      children
+    })
+  });
+}
+function ToggleGroupItem2({
+  density,
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  const context = useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx2(TogglePrimitive2, {
+    "data-density": density,
+    "data-slot": "toggle-group-item",
+    "data-variant": context.variant ?? variant,
+    "data-size": context.size ?? size,
+    "data-spacing": context.spacing,
+    className: (state) => cn2("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none focus:relative focus:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-s-sm group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-sm group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-e-sm group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-sm group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants2({ variant: context.variant ?? variant, size: context.size ?? size }), typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+
+export { toggleVariants2, Toggle2, ToggleGroup2, ToggleGroupItem2 };

package/dist/chunk-ag6xpy6q.js

@@ -0,0 +1,189 @@
+import {
+  SourceGlyph2
+} from "./chunk-xxk0akfn.js";
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Collapsible2,
+  CollapsibleTrigger2,
+  CollapsibleContent2
+} from "./chunk-24d68cjp.js";
+import {
+  safeHref,
+  hostOf
+} from "./chunk-xhtsnwnb.js";
+import {
+  paper,
+  fieldInteractive,
+  collapsePanel,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/Sources.tsx
+import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var displayDomain = (source) => source.domain || hostOf(source.url);
+var formatPublishedAt = (publishedAt, locale) => {
+  if (!publishedAt)
+    return;
+  const date = new Date(publishedAt);
+  if (Number.isNaN(date.valueOf()))
+    return;
+  const options = {
+    month: "short",
+    year: "numeric"
+  };
+  try {
+    return new Intl.DateTimeFormat(locale, options).format(date);
+  } catch {
+    return new Intl.DateTimeFormat("en-US", options).format(date);
+  }
+};
+function Sources2({
+  sources,
+  open,
+  onOpenChange,
+  layout = "grid",
+  hideTrigger = false,
+  locale = "en-US"
+}) {
+  const badgeDomains = sources.map(displayDomain).filter((domain) => domain !== undefined).slice(0, 3);
+  return /* @__PURE__ */ jsxs(Collapsible2, {
+    "data-testid": "Sources",
+    "data-slot": "sources",
+    "data-layout": layout,
+    open,
+    onOpenChange: (next) => onOpenChange(next),
+    render: /* @__PURE__ */ jsx("div", {
+      className: cn2("w-full max-w-sm")
+    }),
+    children: [
+      hideTrigger ? null : /* @__PURE__ */ jsxs(CollapsibleTrigger2, {
+        render: /* @__PURE__ */ jsx("button", {
+          type: "button",
+          className: cn2(fieldInteractive, "group/trigger text-muted-foreground hover:text-foreground inline-flex w-fit items-center gap-1.5 rounded-full px-3.5 py-2 text-sm outline-none")
+        }),
+        children: [
+          badgeDomains.length > 0 ? /* @__PURE__ */ jsx("span", {
+            "aria-hidden": true,
+            className: "flex -space-x-1",
+            children: badgeDomains.map((domain, index) => /* @__PURE__ */ jsx("span", {
+              "data-slot": "sources-badge",
+              className: "bg-foreground/[0.08] text-muted-foreground ring-background dark:ring-popover flex size-4 items-center justify-center rounded-full text-[8px] font-medium ring-1",
+              children: domain.charAt(0).toUpperCase()
+            }, `${domain}-${index}`))
+          }) : null,
+          /* @__PURE__ */ jsx("span", {
+            children: "Sources"
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: cn2(mono, "text-muted-foreground tabular-nums"),
+            children: sources.length
+          }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, {
+            "aria-hidden": "true",
+            className: cn2("size-4")
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(CollapsibleContent2, {
+        render: /* @__PURE__ */ jsx("div", {
+          className: cn2(collapsePanel, "outline-none")
+        }),
+        children: /* @__PURE__ */ jsx("div", {
+          className: layout === "list" ? "flex flex-col pt-2.5" : "grid grid-cols-2 gap-2 pt-2.5",
+          children: sources.map((source, index) => {
+            const domain = displayDomain(source);
+            const href = safeHref(source.url);
+            const meta = [source.author, formatPublishedAt(source.publishedAt, locale)].filter((value) => Boolean(value)).join(" · ");
+            const cardClassName = layout === "list" ? "focus-visible:ring-foreground/20 hover:bg-foreground/[0.03] flex flex-col gap-1 rounded-md px-2.5 py-1.5 transition-colors duration-300 outline-none focus-visible:ring-1 focus-visible:ring-inset motion-reduce:transition-none" : cn2(paper, "focus-visible:ring-foreground/20 flex flex-col gap-1.5 rounded-md p-3 transition-transform duration-150 outline-none hover:-translate-y-px focus-visible:ring-1 focus-visible:ring-inset motion-reduce:transition-none");
+            const glyph = domain ? /* @__PURE__ */ jsx(SourceGlyph2, {
+              domain
+            }) : null;
+            const details = /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                source.snippet ? /* @__PURE__ */ jsx("span", {
+                  className: "text-muted-foreground line-clamp-2 text-sm leading-relaxed",
+                  children: source.snippet
+                }) : null,
+                meta ? /* @__PURE__ */ jsx("span", {
+                  className: "text-muted-foreground truncate text-sm",
+                  children: meta
+                }) : null
+              ]
+            });
+            const content = layout === "list" ? /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                /* @__PURE__ */ jsxs("div", {
+                  className: "flex min-w-0 items-center gap-2.5",
+                  children: [
+                    glyph,
+                    /* @__PURE__ */ jsx("span", {
+                      className: "text-foreground min-w-0 flex-1 truncate text-base",
+                      children: source.title
+                    }),
+                    domain ? /* @__PURE__ */ jsx("span", {
+                      className: cn2(mono, "text-muted-foreground max-w-[40%] min-w-0 truncate"),
+                      children: domain
+                    }) : null
+                  ]
+                }),
+                source.snippet || meta ? /* @__PURE__ */ jsx("div", {
+                  className: cn2("flex min-w-0 flex-col gap-1", domain && "pl-6.5"),
+                  children: details
+                }) : null
+              ]
+            }) : /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                domain ? /* @__PURE__ */ jsxs("div", {
+                  className: "flex items-center gap-1.5",
+                  children: [
+                    glyph,
+                    /* @__PURE__ */ jsx("span", {
+                      className: cn2(mono, "text-muted-foreground truncate"),
+                      children: domain
+                    })
+                  ]
+                }) : null,
+                /* @__PURE__ */ jsxs("div", {
+                  className: "flex min-w-0 flex-col gap-1",
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      className: "text-foreground line-clamp-2 text-base leading-snug font-medium",
+                      children: source.title
+                    }),
+                    details
+                  ]
+                })
+              ]
+            });
+            if (href) {
+              return /* @__PURE__ */ jsxs("a", {
+                "data-slot": "source-card",
+                href,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: cardClassName,
+                children: [
+                  content,
+                  /* @__PURE__ */ jsx("span", {
+                    className: "sr-only",
+                    children: "(opens in a new tab)"
+                  })
+                ]
+              }, `${source.url ?? source.domain ?? source.title}-${index}`);
+            }
+            return /* @__PURE__ */ jsx("div", {
+              "data-slot": "source-card",
+              className: cardClassName,
+              children: content
+            }, `${source.url ?? source.domain ?? source.title}-${index}`);
+          })
+        })
+      })
+    ]
+  });
+}
+
+export { Sources2 };

package/dist/chunk-avrh238b.js

@@ -0,0 +1,117 @@
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  Card2,
+  CardContent2,
+  CardFooter2
+} from "./chunk-fqekyjkh.js";
+import {
+  Field2,
+  FieldLabel2
+} from "./chunk-6jpz5geq.js";
+import {
+  Textarea2
+} from "./chunk-hz9azhzx.js";
+import {
+  useReceiptFocus
+} from "./chunk-vxvaaptq.js";
+
+// src/components/assistant-ui/elements/EditMessage.tsx
+import { useId } from "react";
+import { AlertTriangleIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function EditMessage2({
+  value,
+  discardedReplies,
+  editing,
+  onValueChange,
+  onSave,
+  onCancel,
+  onStartEdit,
+  onFocusCapture,
+  onBlurCapture,
+  ...props
+}) {
+  const inputId = useId();
+  const { receiptRef, focusHandlers } = useReceiptFocus({ onFocusCapture, onBlurCapture });
+  if (!editing) {
+    return /* @__PURE__ */ jsx("div", {
+      "data-testid": "EditMessage",
+      className: "flex w-full max-w-sm justify-end",
+      ...props,
+      ...focusHandlers,
+      children: /* @__PURE__ */ jsx(Button2, {
+        ref: (element) => {
+          receiptRef.current = element;
+        },
+        size: "content",
+        variant: "secondary",
+        disabled: !onStartEdit,
+        onClick: onStartEdit,
+        children: value
+      })
+    });
+  }
+  return /* @__PURE__ */ jsxs(Card2, {
+    "data-testid": "EditMessage",
+    className: "w-full max-w-sm",
+    ...props,
+    ...focusHandlers,
+    children: [
+      /* @__PURE__ */ jsxs(CardContent2, {
+        children: [
+          /* @__PURE__ */ jsxs(Field2, {
+            children: [
+              /* @__PURE__ */ jsx(FieldLabel2, {
+                htmlFor: inputId,
+                children: "Edit your message"
+              }),
+              /* @__PURE__ */ jsx(Textarea2, {
+                ref: (element) => {
+                  receiptRef.current = element;
+                },
+                id: inputId,
+                value,
+                readOnly: !onValueChange,
+                onChange: (event) => onValueChange?.(event.target.value),
+                rows: 2
+              })
+            ]
+          }),
+          discardedReplies > 0 && /* @__PURE__ */ jsxs("p", {
+            className: "mt-control-gap flex items-center gap-control-gap text-sm text-warning",
+            children: [
+              /* @__PURE__ */ jsx(AlertTriangleIcon, {
+                "aria-hidden": "true",
+                className: "size-4"
+              }),
+              "sending discards ",
+              discardedReplies,
+              " ",
+              discardedReplies === 1 ? "reply" : "replies"
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs(CardFooter2, {
+        className: "justify-end gap-control-gap",
+        children: [
+          /* @__PURE__ */ jsx(Button2, {
+            variant: "outline",
+            disabled: !onCancel,
+            onClick: onCancel,
+            children: "Cancel"
+          }),
+          /* @__PURE__ */ jsx(Button2, {
+            disabled: !onSave,
+            onClick: onSave,
+            children: "Send"
+          })
+        ]
+      })
+    ]
+  });
+}
+
+export { EditMessage2 };

package/dist/chunk-b06rfrfz.js

@@ -0,0 +1,128 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Collapsible2,
+  CollapsibleTrigger2,
+  CollapsibleContent2
+} from "./chunk-24d68cjp.js";
+import {
+  ShimmerLabel2
+} from "./chunk-s3wqwhxc.js";
+import {
+  SwapLabel2
+} from "./chunk-wgxs6b5t.js";
+import {
+  take
+} from "./chunk-v8ks0cfq.js";
+import {
+  collapsePanel
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/ToolTimeline.tsx
+import { ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function ToolTimeline2({
+  steps,
+  visibleSteps,
+  streaming,
+  open,
+  onOpenChange,
+  restingLabel,
+  activeLabel,
+  stats
+}) {
+  return /* @__PURE__ */ jsxs(Collapsible2, {
+    "data-testid": "ToolTimeline",
+    "data-slot": "tool-timeline",
+    open,
+    onOpenChange: (next) => onOpenChange(next),
+    render: /* @__PURE__ */ jsx("div", {
+      className: cn2("w-full max-w-sm")
+    }),
+    children: [
+      /* @__PURE__ */ jsxs(CollapsibleTrigger2, {
+        render: /* @__PURE__ */ jsx("button", {
+          type: "button",
+          className: "group/trigger text-muted-foreground hover:text-foreground flex items-center gap-1.5 rounded-md py-1 text-[13.5px] transition-colors outline-none"
+        }),
+        children: [
+          /* @__PURE__ */ jsx(ChevronRightIcon, {
+            "aria-hidden": "true",
+            className: cn2("size-4")
+          }),
+          /* @__PURE__ */ jsxs(SwapLabel2, {
+            active: streaming ? 0 : 1,
+            children: [
+              /* @__PURE__ */ jsx(ShimmerLabel2, {
+                active: streaming,
+                children: activeLabel
+              }),
+              /* @__PURE__ */ jsx(Fragment, {
+                children: restingLabel
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(CollapsibleContent2, {
+        render: /* @__PURE__ */ jsx("div", {
+          className: cn2(collapsePanel, "outline-none")
+        }),
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "flex flex-col gap-2.5 ps-4 pt-2.5",
+          children: [
+            take(steps, visibleSteps).map((step, index, shown) => {
+              const Glyph = step.icon;
+              const active = streaming && index === shown.length - 1;
+              return /* @__PURE__ */ jsxs("div", {
+                className: "fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground flex items-center gap-2 text-base duration-300",
+                children: [
+                  /* @__PURE__ */ jsx(Glyph, {
+                    "aria-hidden": "true",
+                    className: cn2("size-4")
+                  }),
+                  /* @__PURE__ */ jsx(ShimmerLabel2, {
+                    active,
+                    children: step.verb
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    className: "bg-foreground/[0.06] text-muted-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]",
+                    children: step.chip
+                  })
+                ]
+              }, step.id ? `id:${step.id}` : index);
+            }),
+            stats.length > 0 && /* @__PURE__ */ jsx("div", {
+              className: "flex flex-wrap gap-1.5 pt-1",
+              children: stats.map((stat) => /* @__PURE__ */ jsxs("span", {
+                className: "bg-foreground/[0.06] text-muted-foreground inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-[11px]",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    children: stat.file
+                  }),
+                  stat.added !== undefined && /* @__PURE__ */ jsxs("span", {
+                    className: "text-success text-success",
+                    children: [
+                      "+",
+                      stat.added
+                    ]
+                  }),
+                  stat.removed !== undefined && /* @__PURE__ */ jsxs("span", {
+                    className: "text-destructive text-destructive",
+                    children: [
+                      "−",
+                      stat.removed
+                    ]
+                  })
+                ]
+              }, stat.file))
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
+
+export { ToolTimeline2 };

package/dist/chunk-b12s32e3.js

@@ -0,0 +1,61 @@
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  Popover2,
+  PopoverTrigger2,
+  PopoverContent2,
+  PopoverTitle2
+} from "./chunk-x7z9jzyf.js";
+import {
+  ContextBreakdown2
+} from "./chunk-vfhztmet.js";
+import {
+  pct,
+  announced
+} from "./chunk-v8ks0cfq.js";
+
+// src/components/assistant-ui/elements/ComposerContext.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ComposerContext2({ usage, ...props }) {
+  const used = usage.system + usage.tools + usage.messages;
+  const percentage = announced(pct(used, usage.total));
+  return /* @__PURE__ */ jsx("span", {
+    ...props,
+    "data-testid": "ComposerContext",
+    "data-slot": "composer-context",
+    children: /* @__PURE__ */ jsxs(Popover2, {
+      children: [
+        /* @__PURE__ */ jsxs(PopoverTrigger2, {
+          openOnHover: true,
+          render: /* @__PURE__ */ jsx(Button2, {
+            variant: "ghost",
+            "aria-label": "Context usage: " + String(percentage) + "%"
+          }),
+          children: [
+            percentage,
+            "%"
+          ]
+        }),
+        /* @__PURE__ */ jsxs(PopoverContent2, {
+          children: [
+            /* @__PURE__ */ jsx(PopoverTitle2, {
+              children: "Context usage"
+            }),
+            /* @__PURE__ */ jsx(ContextBreakdown2, {
+              variant: "embedded",
+              limit: usage.total * 1000,
+              segments: [
+                { label: "System", tokens: usage.system * 1000, tone: "primary" },
+                { label: "Tools", tokens: usage.tools * 1000, tone: "success" },
+                { label: "Messages", tokens: usage.messages * 1000, tone: "warning" }
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+
+export { ComposerContext2 };