@mastra/playground-ui 51.1.0 → 51.2.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,94 @@
 # @mastra/playground-ui
 
+## 51.2.0-alpha.1
+
+### Patch Changes
+
+- **Composer** — the ring keeps its geometry on the element, so a consumer can restyle its radius and width through `className` like any other component. Its idle edge colour now reads `--composer-ring-edge`, for apps whose chat surface needs a different one; unset, it keeps the current blend. ([#22403](https://github.com/mastra-ai/mastra/pull/22403))
+
+  **Tool call** — output blocks sit one step above the surface behind them instead of painting a fixed dark grey, so they stay visible on any chat background and in both themes.
+
+- Sidebar links read a touch heavier, so they stay legible next to their icons instead of looking washed out. ([#22399](https://github.com/mastra-ai/mastra/pull/22399))
+
+- Fixed the span Feedback tab in Studio's observability view showing the same list and count for every span of a trace: it now loads feedback strictly for the selected trace and span pair, so switching spans shows that span's own feedback. Trace-level feedback — including everything produced by the dataset review flows — now lives in a new Feedback tab on the trace panel, next to Details and Evaluations, which lists only records that aren't attached to a span. The span panel tabs also use the same pill styling as the rest of Studio instead of the deprecated underline variant. ([#22401](https://github.com/mastra-ai/mastra/pull/22401))
+
+  To see each kind of feedback:
+
+  1. Run `mastra dev` and open **Observability** in Studio.
+  2. Open a trace and select its **Feedback** tab — it lists trace-level feedback only, such as records left by dataset review.
+  3. Select a span in the trace tree and open the span's **Feedback** tab — it lists only that span's feedback, and the list changes as you select other spans.
+
+- Updated dependencies [[`7677a2c`](https://github.com/mastra-ai/mastra/commit/7677a2cd47729221ca28afc5067d26e22d925b59), [`f7a7467`](https://github.com/mastra-ai/mastra/commit/f7a74678193921e7ea4790232d707b3237626cac), [`f9c56f3`](https://github.com/mastra-ai/mastra/commit/f9c56f336ee8c250763a438990f8e60a428353c9)]:
+  - @mastra/core@1.63.0-alpha.1
+  - @mastra/client-js@1.42.2-alpha.1
+  - @mastra/react@1.4.7-alpha.1
+
+## 51.2.0-alpha.0
+
+### Minor Changes
+
+- Refreshed the DataList look: rows no longer draw separators, the sticky header and group subheaders share one lighter, theme-tuned band, and every corner uses the same radius. ([#22383](https://github.com/mastra-ai/mastra/pull/22383))
+
+  **Every row in a list is now the same height.** Row height used to be whatever the tallest cell happened to be, so a list with an actions column or a roomier cell drifted a few pixels away from the list next to it. The row owns its height now, and skeleton rows match the real ones — no jump when data lands.
+
+  **Typography follows the content.** Headers and name cells are medium weight instead of semibold, and the letter-spacing tightening is gone. IDs and timestamps left the monospace face — IDs get wider tracking to stay scannable, timestamps get tabular figures so their columns still line up.
+
+  **Row controls only appear on hover.** Selection checkboxes on unselected rows, and the new `DataList.ActionsCell`, stay hidden until you hover the row or reach it with the keyboard, so a resting list reads as content. The column keeps its width, so nothing shifts. On a touch screen, where nothing ever hovers, they stay visible.
+
+  ```tsx
+  // Trailing row actions — alignment, spacing and the hover reveal come with the cell
+  <DataList.RowWrapper>
+    <DataList.RowButton colEnd={-2} onClick={open}>
+      {cells}
+    </DataList.RowButton>
+    <DataList.ActionsCell>
+      <Button variant="ghost" size="icon-xs" aria-label="Delete">
+        <Trash2 />
+      </Button>
+    </DataList.ActionsCell>
+  </DataList.RowWrapper>
+  ```
+
+  **Breaking:** a variant, three props and a component that no longer decide anything are gone.
+
+  ```tsx
+  // Before
+  <DataList columns={columns} variant="lined">
+    <DataList.RowButton flushLeft flushRight colEnd={-2}>
+      <DataList.Cell height="compact">{status}</DataList.Cell>
+      <DataList.MonoCell>{path}</DataList.MonoCell>
+
+  // After — rows are borderless, full-bleed and uniformly tall by default
+  <DataList columns={columns}>
+    <DataList.RowButton colEnd={-2}>
+      <DataList.Cell>{status}</DataList.Cell>
+      <DataList.TextCell font="mono">{path}</DataList.TextCell>
+  ```
+
+  - `variant="lined"` existed only to draw row separators. Lists that want row banding can still ask for `variant="striped"`.
+  - `height` on cells set row height one cell at a time, which is what let rows drift apart.
+  - `flushLeft` / `flushRight` dropped a row margin that no longer exists.
+  - `DataList.MonoCell` was a cell that only changed the typeface. `DataList.TextCell font="mono"` replaces it — same rendering, one less component.
+
+### Patch Changes
+
+- Added a `Comment` family of compound components for text-only comment threads: `Comment`, `CommentList`, `CommentItem` (with header, author, timestamp, body and actions slots) and `CommentComposer` (input + send button). The root `variant` prop switches between `default`, a flat thread with hover-revealed per-item actions, and `embed`, the same thread on a bordered card surface with a compact composer and no per-item actions. ([#22396](https://github.com/mastra-ai/mastra/pull/22396))
+
+- Improved the experiment page in Studio with a horizontal metadata bar showing when the run started, how long it took, the dataset it ran against, and which scorers were used ([#22377](https://github.com/mastra-ai/mastra/pull/22377))
+
+- Added a `factory` variant to the `SettingsRow` component so settings rows can render the denser card-row layout (row padding, 12px description text) instead of only the studio spacing. ([#22375](https://github.com/mastra-ai/mastra/pull/22375))
+
+  ```tsx
+  <SettingsRow variant="factory" label="Auto-approve tools" description="Run tool calls without asking">
+    <Switch checked={autoApprove} onCheckedChange={setAutoApprove} />
+  </SettingsRow>
+  ```
+
+- Updated dependencies [[`7176362`](https://github.com/mastra-ai/mastra/commit/717636281a3339911a05ea2cc8ae38afe4fd2cef), [`e3b796d`](https://github.com/mastra-ai/mastra/commit/e3b796d29a63f0d5c97dd815aadec40687346d70), [`49ccd14`](https://github.com/mastra-ai/mastra/commit/49ccd142268a61fb55ea75bc76287643a21f3677), [`3855b38`](https://github.com/mastra-ai/mastra/commit/3855b38c4c25af32ab8e298e148becc963abe92c)]:
+  - @mastra/core@1.63.0-alpha.0
+  - @mastra/client-js@1.42.2-alpha.0
+  - @mastra/react@1.4.7-alpha.0
+
 ## 51.1.0
 
 ### Minor Changes

package/dist/Composer.css

@@ -23,10 +23,7 @@
 .composer-ring {
   --composer-ring-color: var(--accent1);
 
-  position: relative;
-  border-radius: 23px;
-  padding: 1px;
-  background-color: color-mix(in oklab, var(--border2) 40%, transparent);
+  background-color: var(--composer-ring-edge, color-mix(in oklab, var(--border2) 40%, transparent));
   background-image: conic-gradient(
     from calc(var(--composer-ring-angle) + var(--composer-ring-spin) - 60deg),
     transparent 0deg,

package/dist/components/Comment.cjs.js

@@ -0,0 +1,170 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const index = require('../index-C-Lt4Bx_.cjs');
+const React = require('react');
+const Txt = require('../Txt-I5lK8zy7.cjs');
+const utils_cn = require('../cn-vA5sWo9W.cjs');
+const lucideReact = require('lucide-react');
+const inputGroup = require('../input-group-4EQi2l7H.cjs');
+
+const CommentContext = React.createContext(null);
+function useCommentVariant() {
+  const variant = React.useContext(CommentContext);
+  if (!variant) throw new Error("Comment compounds must be rendered within Comment");
+  return variant;
+}
+
+const commentVariants = index.cva("flex flex-col", {
+  variants: {
+    variant: {
+      default: "gap-2",
+      embed: "gap-1 rounded-xl border border-border1 bg-surface3 p-3"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+const Comment = React.forwardRef(({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommentContext.Provider, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "comment",
+    "data-variant": variant,
+    className: utils_cn.cn(commentVariants({ variant }), className),
+    ...props
+  }
+) }));
+Comment.displayName = "Comment";
+const commentListGap = {
+  default: "gap-3",
+  embed: "gap-2"
+};
+const CommentList = React.forwardRef(({ className, ...props }, ref) => {
+  const variant = useCommentVariant();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      ref,
+      "data-slot": "comment-list",
+      className: utils_cn.cn("flex flex-col", commentListGap[variant], className),
+      ...props
+    }
+  );
+});
+CommentList.displayName = "CommentList";
+const CommentItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "li",
+  {
+    ref,
+    "data-slot": "comment-item",
+    className: utils_cn.cn("group/comment-item flex flex-col gap-1", className),
+    ...props
+  }
+));
+CommentItem.displayName = "CommentItem";
+const CommentItemHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-slot": "comment-item-header", className: utils_cn.cn("flex items-center gap-2", className), ...props }));
+CommentItemHeader.displayName = "CommentItemHeader";
+const CommentItemAuthor = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  Txt.Txt,
+  {
+    ref,
+    as: "span",
+    variant: "ui-md",
+    "data-slot": "comment-item-author",
+    className: utils_cn.cn("font-medium text-neutral6", className),
+    ...props
+  }
+));
+CommentItemAuthor.displayName = "CommentItemAuthor";
+const CommentItemTimestamp = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "time",
+    {
+      ref,
+      "data-slot": "comment-item-timestamp",
+      className: utils_cn.cn("text-ui-sm leading-ui-sm text-neutral3", className),
+      ...props
+    }
+  )
+);
+CommentItemTimestamp.displayName = "CommentItemTimestamp";
+const commentItemBodyRule = {
+  default: "border-l border-border1 pl-3",
+  embed: ""
+};
+const CommentItemBody = React.forwardRef(({ className, ...props }, ref) => {
+  const variant = useCommentVariant();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Txt.Txt,
+    {
+      ref,
+      variant: "ui-md",
+      "data-slot": "comment-item-body",
+      className: utils_cn.cn("whitespace-pre-wrap text-neutral6", commentItemBodyRule[variant], className),
+      ...props
+    }
+  );
+});
+CommentItemBody.displayName = "CommentItemBody";
+const CommentItemActions = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const variant = useCommentVariant();
+    if (variant === "embed") return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "comment-item-actions",
+        className: utils_cn.cn(
+          "flex items-center gap-1 opacity-0 group-focus-within/comment-item:opacity-100 group-hover/comment-item:opacity-100",
+          "motion-safe:transition-opacity",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+CommentItemActions.displayName = "CommentItemActions";
+
+const CommentComposer = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("form", { ref, "data-slot": "comment-composer", className: utils_cn.cn("flex w-full items-center gap-2", className), ...props }));
+CommentComposer.displayName = "CommentComposer";
+const composerSize = {
+  default: "md",
+  embed: "sm"
+};
+const composerInputVariant = {
+  default: "outline",
+  embed: "default"
+};
+const CommentComposerInput = React.forwardRef(
+  ({ groupClassName, children, ...props }, ref) => {
+    const variant = useCommentVariant();
+    return /* @__PURE__ */ jsxRuntime.jsxs(inputGroup.InputGroup, { size: composerSize[variant], variant: composerInputVariant[variant], className: groupClassName, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(inputGroup.InputGroupInput, { ref, "data-slot": "comment-composer-input", ...props }),
+      children
+    ] });
+  }
+);
+CommentComposerInput.displayName = "CommentComposerInput";
+const CommentComposerSend = React.forwardRef(
+  ({ "aria-label": ariaLabel = "Send comment", type = "submit", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(inputGroup.InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(inputGroup.InputGroupButton, { ref, "data-slot": "comment-composer-send", type, "aria-label": ariaLabel, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, {}) }) })
+);
+CommentComposerSend.displayName = "CommentComposerSend";
+
+exports.Comment = Comment;
+exports.CommentComposer = CommentComposer;
+exports.CommentComposerInput = CommentComposerInput;
+exports.CommentComposerSend = CommentComposerSend;
+exports.CommentItem = CommentItem;
+exports.CommentItemActions = CommentItemActions;
+exports.CommentItemAuthor = CommentItemAuthor;
+exports.CommentItemBody = CommentItemBody;
+exports.CommentItemHeader = CommentItemHeader;
+exports.CommentItemTimestamp = CommentItemTimestamp;
+exports.CommentList = CommentList;
+//# sourceMappingURL=Comment.cjs.js.map

package/dist/components/Comment.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Comment.cjs.js","sources":["../../src/ds/components/Comment/comment-context.ts","../../src/ds/components/Comment/comment.tsx","../../src/ds/components/Comment/comment-composer.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type CommentVariant = 'default' | 'embed';\n\nexport const CommentContext = createContext<CommentVariant | null>(null);\n\nexport function useCommentVariant(): CommentVariant {\n  const variant = useContext(CommentContext);\n  if (!variant) throw new Error('Comment compounds must be rendered within Comment');\n  return variant;\n}\n","import { cva } from 'class-variance-authority';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { CommentContext, useCommentVariant } from './comment-context';\nimport type { CommentVariant } from './comment-context';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst commentVariants = cva('flex flex-col', {\n  variants: {\n    variant: {\n      default: 'gap-2',\n      embed: 'gap-1 rounded-xl border border-border1 bg-surface3 p-3',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport interface CommentProps extends ComponentPropsWithoutRef<'div'> {\n  variant?: CommentVariant;\n}\n\nexport const Comment = forwardRef<HTMLDivElement, CommentProps>(({ className, variant = 'default', ...props }, ref) => (\n  <CommentContext.Provider value={variant}>\n    <div\n      ref={ref}\n      data-slot=\"comment\"\n      data-variant={variant}\n      className={cn(commentVariants({ variant }), className)}\n      {...props}\n    />\n  </CommentContext.Provider>\n));\nComment.displayName = 'Comment';\n\nconst commentListGap: Record<CommentVariant, string> = {\n  default: 'gap-3',\n  embed: 'gap-2',\n};\n\nexport type CommentListProps = ComponentPropsWithoutRef<'ul'>;\n\nexport const CommentList = forwardRef<HTMLUListElement, CommentListProps>(({ className, ...props }, ref) => {\n  const variant = useCommentVariant();\n\n  return (\n    <ul\n      ref={ref}\n      data-slot=\"comment-list\"\n      className={cn('flex flex-col', commentListGap[variant], className)}\n      {...props}\n    />\n  );\n});\nCommentList.displayName = 'CommentList';\n\nexport type CommentItemProps = ComponentPropsWithoutRef<'li'>;\n\nexport const CommentItem = forwardRef<HTMLLIElement, CommentItemProps>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    data-slot=\"comment-item\"\n    className={cn('group/comment-item flex flex-col gap-1', className)}\n    {...props}\n  />\n));\nCommentItem.displayName = 'CommentItem';\n\nexport type CommentItemHeaderProps = ComponentPropsWithoutRef<'div'>;\n\nexport const CommentItemHeader = forwardRef<HTMLDivElement, CommentItemHeaderProps>(({ className, ...props }, ref) => (\n  <div ref={ref} data-slot=\"comment-item-header\" className={cn('flex items-center gap-2', className)} {...props} />\n));\nCommentItemHeader.displayName = 'CommentItemHeader';\n\nexport type CommentItemAuthorProps = ComponentPropsWithoutRef<'span'>;\n\nexport const CommentItemAuthor = forwardRef<HTMLElement, CommentItemAuthorProps>(({ className, ...props }, ref) => (\n  <Txt\n    ref={ref}\n    as=\"span\"\n    variant=\"ui-md\"\n    data-slot=\"comment-item-author\"\n    className={cn('font-medium text-neutral6', className)}\n    {...props}\n  />\n));\nCommentItemAuthor.displayName = 'CommentItemAuthor';\n\nexport type CommentItemTimestampProps = ComponentPropsWithoutRef<'time'>;\n\nexport const CommentItemTimestamp = forwardRef<HTMLTimeElement, CommentItemTimestampProps>(\n  ({ className, ...props }, ref) => (\n    <time\n      ref={ref}\n      data-slot=\"comment-item-timestamp\"\n      className={cn('text-ui-sm leading-ui-sm text-neutral3', className)}\n      {...props}\n    />\n  ),\n);\nCommentItemTimestamp.displayName = 'CommentItemTimestamp';\n\nconst commentItemBodyRule: Record<CommentVariant, string> = {\n  default: 'border-l border-border1 pl-3',\n  embed: '',\n};\n\nexport type CommentItemBodyProps = ComponentPropsWithoutRef<'p'>;\n\nexport const CommentItemBody = forwardRef<HTMLElement, CommentItemBodyProps>(({ className, ...props }, ref) => {\n  const variant = useCommentVariant();\n\n  return (\n    <Txt\n      ref={ref}\n      variant=\"ui-md\"\n      data-slot=\"comment-item-body\"\n      className={cn('whitespace-pre-wrap text-neutral6', commentItemBodyRule[variant], className)}\n      {...props}\n    />\n  );\n});\nCommentItemBody.displayName = 'CommentItemBody';\n\nexport type CommentItemActionsProps = ComponentPropsWithoutRef<'div'>;\n\n/** Hidden in the `embed` variant, which drops per-item actions. */\nexport const CommentItemActions = forwardRef<HTMLDivElement, CommentItemActionsProps>(\n  ({ className, ...props }, ref) => {\n    const variant = useCommentVariant();\n    if (variant === 'embed') return null;\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"comment-item-actions\"\n        className={cn(\n          'flex items-center gap-1 opacity-0 group-focus-within/comment-item:opacity-100 group-hover/comment-item:opacity-100',\n          'motion-safe:transition-opacity',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nCommentItemActions.displayName = 'CommentItemActions';\n","import { ArrowUp } from 'lucide-react';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useCommentVariant } from './comment-context';\nimport type { CommentVariant } from './comment-context';\nimport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/ds/components/InputGroup';\nimport type { InputGroupButtonProps, InputGroupInputProps } from '@/ds/components/InputGroup';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\nexport type CommentComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport const CommentComposer = forwardRef<HTMLFormElement, CommentComposerProps>(({ className, ...props }, ref) => (\n  <form ref={ref} data-slot=\"comment-composer\" className={cn('flex w-full items-center gap-2', className)} {...props} />\n));\nCommentComposer.displayName = 'CommentComposer';\n\nconst composerSize: Record<CommentVariant, ControlSize> = {\n  default: 'md',\n  embed: 'sm',\n};\n\nconst composerInputVariant: Record<CommentVariant, 'default' | 'outline'> = {\n  default: 'outline',\n  embed: 'default',\n};\n\nexport interface CommentComposerInputProps extends InputGroupInputProps {\n  /** Layout classes for the surrounding InputGroup. */\n  groupClassName?: string;\n  children?: ReactNode;\n}\n\nexport const CommentComposerInput = forwardRef<HTMLInputElement, CommentComposerInputProps>(\n  ({ groupClassName, children, ...props }, ref) => {\n    const variant = useCommentVariant();\n\n    return (\n      <InputGroup size={composerSize[variant]} variant={composerInputVariant[variant]} className={groupClassName}>\n        <InputGroupInput ref={ref} data-slot=\"comment-composer-input\" {...props} />\n        {children}\n      </InputGroup>\n    );\n  },\n);\nCommentComposerInput.displayName = 'CommentComposerInput';\n\nexport type CommentComposerSendProps = Omit<InputGroupButtonProps, 'children'>;\n\nexport const CommentComposerSend = forwardRef<HTMLButtonElement, CommentComposerSendProps>(\n  ({ 'aria-label': ariaLabel = 'Send comment', type = 'submit', ...props }, ref) => (\n    <InputGroupAddon align=\"inline-end\">\n      <InputGroupButton ref={ref} data-slot=\"comment-composer-send\" type={type} aria-label={ariaLabel} {...props}>\n        <ArrowUp />\n      </InputGroupButton>\n    </InputGroupAddon>\n  ),\n);\nCommentComposerSend.displayName = 'CommentComposerSend';\n"],"names":["createContext","useContext","cva","forwardRef","jsx","cn","Txt","jsxs","InputGroup","InputGroupInput","InputGroupAddon","InputGroupButton","ArrowUp"],"mappings":"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"}

package/dist/components/Comment.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/components/Comment/index'
+export {}

package/dist/components/Comment.es.js

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as cva } from '../index-CSm06eOE.js';
+import { createContext, useContext, forwardRef } from 'react';
+import { T as Txt } from '../Txt-Df42XG5p.js';
+import { c as cn } from '../cn-BakJzhuv.js';
+import { ArrowUp } from 'lucide-react';
+import { I as InputGroup, c as InputGroupInput, a as InputGroupAddon, b as InputGroupButton } from '../input-group-U2f3A4Ya.js';
+
+const CommentContext = createContext(null);
+function useCommentVariant() {
+  const variant = useContext(CommentContext);
+  if (!variant) throw new Error("Comment compounds must be rendered within Comment");
+  return variant;
+}
+
+const commentVariants = cva("flex flex-col", {
+  variants: {
+    variant: {
+      default: "gap-2",
+      embed: "gap-1 rounded-xl border border-border1 bg-surface3 p-3"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+const Comment = forwardRef(({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(CommentContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "comment",
+    "data-variant": variant,
+    className: cn(commentVariants({ variant }), className),
+    ...props
+  }
+) }));
+Comment.displayName = "Comment";
+const commentListGap = {
+  default: "gap-3",
+  embed: "gap-2"
+};
+const CommentList = forwardRef(({ className, ...props }, ref) => {
+  const variant = useCommentVariant();
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref,
+      "data-slot": "comment-list",
+      className: cn("flex flex-col", commentListGap[variant], className),
+      ...props
+    }
+  );
+});
+CommentList.displayName = "CommentList";
+const CommentItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    ref,
+    "data-slot": "comment-item",
+    className: cn("group/comment-item flex flex-col gap-1", className),
+    ...props
+  }
+));
+CommentItem.displayName = "CommentItem";
+const CommentItemHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "comment-item-header", className: cn("flex items-center gap-2", className), ...props }));
+CommentItemHeader.displayName = "CommentItemHeader";
+const CommentItemAuthor = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Txt,
+  {
+    ref,
+    as: "span",
+    variant: "ui-md",
+    "data-slot": "comment-item-author",
+    className: cn("font-medium text-neutral6", className),
+    ...props
+  }
+));
+CommentItemAuthor.displayName = "CommentItemAuthor";
+const CommentItemTimestamp = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "time",
+    {
+      ref,
+      "data-slot": "comment-item-timestamp",
+      className: cn("text-ui-sm leading-ui-sm text-neutral3", className),
+      ...props
+    }
+  )
+);
+CommentItemTimestamp.displayName = "CommentItemTimestamp";
+const commentItemBodyRule = {
+  default: "border-l border-border1 pl-3",
+  embed: ""
+};
+const CommentItemBody = forwardRef(({ className, ...props }, ref) => {
+  const variant = useCommentVariant();
+  return /* @__PURE__ */ jsx(
+    Txt,
+    {
+      ref,
+      variant: "ui-md",
+      "data-slot": "comment-item-body",
+      className: cn("whitespace-pre-wrap text-neutral6", commentItemBodyRule[variant], className),
+      ...props
+    }
+  );
+});
+CommentItemBody.displayName = "CommentItemBody";
+const CommentItemActions = forwardRef(
+  ({ className, ...props }, ref) => {
+    const variant = useCommentVariant();
+    if (variant === "embed") return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "comment-item-actions",
+        className: cn(
+          "flex items-center gap-1 opacity-0 group-focus-within/comment-item:opacity-100 group-hover/comment-item:opacity-100",
+          "motion-safe:transition-opacity",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+CommentItemActions.displayName = "CommentItemActions";
+
+const CommentComposer = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("form", { ref, "data-slot": "comment-composer", className: cn("flex w-full items-center gap-2", className), ...props }));
+CommentComposer.displayName = "CommentComposer";
+const composerSize = {
+  default: "md",
+  embed: "sm"
+};
+const composerInputVariant = {
+  default: "outline",
+  embed: "default"
+};
+const CommentComposerInput = forwardRef(
+  ({ groupClassName, children, ...props }, ref) => {
+    const variant = useCommentVariant();
+    return /* @__PURE__ */ jsxs(InputGroup, { size: composerSize[variant], variant: composerInputVariant[variant], className: groupClassName, children: [
+      /* @__PURE__ */ jsx(InputGroupInput, { ref, "data-slot": "comment-composer-input", ...props }),
+      children
+    ] });
+  }
+);
+CommentComposerInput.displayName = "CommentComposerInput";
+const CommentComposerSend = forwardRef(
+  ({ "aria-label": ariaLabel = "Send comment", type = "submit", ...props }, ref) => /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(InputGroupButton, { ref, "data-slot": "comment-composer-send", type, "aria-label": ariaLabel, ...props, children: /* @__PURE__ */ jsx(ArrowUp, {}) }) })
+);
+CommentComposerSend.displayName = "CommentComposerSend";
+
+export { Comment, CommentComposer, CommentComposerInput, CommentComposerSend, CommentItem, CommentItemActions, CommentItemAuthor, CommentItemBody, CommentItemHeader, CommentItemTimestamp, CommentList };
+//# sourceMappingURL=Comment.es.js.map

package/dist/components/Comment.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Comment.es.js","sources":["../../src/ds/components/Comment/comment-context.ts","../../src/ds/components/Comment/comment.tsx","../../src/ds/components/Comment/comment-composer.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type CommentVariant = 'default' | 'embed';\n\nexport const CommentContext = createContext<CommentVariant | null>(null);\n\nexport function useCommentVariant(): CommentVariant {\n  const variant = useContext(CommentContext);\n  if (!variant) throw new Error('Comment compounds must be rendered within Comment');\n  return variant;\n}\n","import { cva } from 'class-variance-authority';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { CommentContext, useCommentVariant } from './comment-context';\nimport type { CommentVariant } from './comment-context';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst commentVariants = cva('flex flex-col', {\n  variants: {\n    variant: {\n      default: 'gap-2',\n      embed: 'gap-1 rounded-xl border border-border1 bg-surface3 p-3',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport interface CommentProps extends ComponentPropsWithoutRef<'div'> {\n  variant?: CommentVariant;\n}\n\nexport const Comment = forwardRef<HTMLDivElement, CommentProps>(({ className, variant = 'default', ...props }, ref) => (\n  <CommentContext.Provider value={variant}>\n    <div\n      ref={ref}\n      data-slot=\"comment\"\n      data-variant={variant}\n      className={cn(commentVariants({ variant }), className)}\n      {...props}\n    />\n  </CommentContext.Provider>\n));\nComment.displayName = 'Comment';\n\nconst commentListGap: Record<CommentVariant, string> = {\n  default: 'gap-3',\n  embed: 'gap-2',\n};\n\nexport type CommentListProps = ComponentPropsWithoutRef<'ul'>;\n\nexport const CommentList = forwardRef<HTMLUListElement, CommentListProps>(({ className, ...props }, ref) => {\n  const variant = useCommentVariant();\n\n  return (\n    <ul\n      ref={ref}\n      data-slot=\"comment-list\"\n      className={cn('flex flex-col', commentListGap[variant], className)}\n      {...props}\n    />\n  );\n});\nCommentList.displayName = 'CommentList';\n\nexport type CommentItemProps = ComponentPropsWithoutRef<'li'>;\n\nexport const CommentItem = forwardRef<HTMLLIElement, CommentItemProps>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    data-slot=\"comment-item\"\n    className={cn('group/comment-item flex flex-col gap-1', className)}\n    {...props}\n  />\n));\nCommentItem.displayName = 'CommentItem';\n\nexport type CommentItemHeaderProps = ComponentPropsWithoutRef<'div'>;\n\nexport const CommentItemHeader = forwardRef<HTMLDivElement, CommentItemHeaderProps>(({ className, ...props }, ref) => (\n  <div ref={ref} data-slot=\"comment-item-header\" className={cn('flex items-center gap-2', className)} {...props} />\n));\nCommentItemHeader.displayName = 'CommentItemHeader';\n\nexport type CommentItemAuthorProps = ComponentPropsWithoutRef<'span'>;\n\nexport const CommentItemAuthor = forwardRef<HTMLElement, CommentItemAuthorProps>(({ className, ...props }, ref) => (\n  <Txt\n    ref={ref}\n    as=\"span\"\n    variant=\"ui-md\"\n    data-slot=\"comment-item-author\"\n    className={cn('font-medium text-neutral6', className)}\n    {...props}\n  />\n));\nCommentItemAuthor.displayName = 'CommentItemAuthor';\n\nexport type CommentItemTimestampProps = ComponentPropsWithoutRef<'time'>;\n\nexport const CommentItemTimestamp = forwardRef<HTMLTimeElement, CommentItemTimestampProps>(\n  ({ className, ...props }, ref) => (\n    <time\n      ref={ref}\n      data-slot=\"comment-item-timestamp\"\n      className={cn('text-ui-sm leading-ui-sm text-neutral3', className)}\n      {...props}\n    />\n  ),\n);\nCommentItemTimestamp.displayName = 'CommentItemTimestamp';\n\nconst commentItemBodyRule: Record<CommentVariant, string> = {\n  default: 'border-l border-border1 pl-3',\n  embed: '',\n};\n\nexport type CommentItemBodyProps = ComponentPropsWithoutRef<'p'>;\n\nexport const CommentItemBody = forwardRef<HTMLElement, CommentItemBodyProps>(({ className, ...props }, ref) => {\n  const variant = useCommentVariant();\n\n  return (\n    <Txt\n      ref={ref}\n      variant=\"ui-md\"\n      data-slot=\"comment-item-body\"\n      className={cn('whitespace-pre-wrap text-neutral6', commentItemBodyRule[variant], className)}\n      {...props}\n    />\n  );\n});\nCommentItemBody.displayName = 'CommentItemBody';\n\nexport type CommentItemActionsProps = ComponentPropsWithoutRef<'div'>;\n\n/** Hidden in the `embed` variant, which drops per-item actions. */\nexport const CommentItemActions = forwardRef<HTMLDivElement, CommentItemActionsProps>(\n  ({ className, ...props }, ref) => {\n    const variant = useCommentVariant();\n    if (variant === 'embed') return null;\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"comment-item-actions\"\n        className={cn(\n          'flex items-center gap-1 opacity-0 group-focus-within/comment-item:opacity-100 group-hover/comment-item:opacity-100',\n          'motion-safe:transition-opacity',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nCommentItemActions.displayName = 'CommentItemActions';\n","import { ArrowUp } from 'lucide-react';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useCommentVariant } from './comment-context';\nimport type { CommentVariant } from './comment-context';\nimport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/ds/components/InputGroup';\nimport type { InputGroupButtonProps, InputGroupInputProps } from '@/ds/components/InputGroup';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\nexport type CommentComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport const CommentComposer = forwardRef<HTMLFormElement, CommentComposerProps>(({ className, ...props }, ref) => (\n  <form ref={ref} data-slot=\"comment-composer\" className={cn('flex w-full items-center gap-2', className)} {...props} />\n));\nCommentComposer.displayName = 'CommentComposer';\n\nconst composerSize: Record<CommentVariant, ControlSize> = {\n  default: 'md',\n  embed: 'sm',\n};\n\nconst composerInputVariant: Record<CommentVariant, 'default' | 'outline'> = {\n  default: 'outline',\n  embed: 'default',\n};\n\nexport interface CommentComposerInputProps extends InputGroupInputProps {\n  /** Layout classes for the surrounding InputGroup. */\n  groupClassName?: string;\n  children?: ReactNode;\n}\n\nexport const CommentComposerInput = forwardRef<HTMLInputElement, CommentComposerInputProps>(\n  ({ groupClassName, children, ...props }, ref) => {\n    const variant = useCommentVariant();\n\n    return (\n      <InputGroup size={composerSize[variant]} variant={composerInputVariant[variant]} className={groupClassName}>\n        <InputGroupInput ref={ref} data-slot=\"comment-composer-input\" {...props} />\n        {children}\n      </InputGroup>\n    );\n  },\n);\nCommentComposerInput.displayName = 'CommentComposerInput';\n\nexport type CommentComposerSendProps = Omit<InputGroupButtonProps, 'children'>;\n\nexport const CommentComposerSend = forwardRef<HTMLButtonElement, CommentComposerSendProps>(\n  ({ 'aria-label': ariaLabel = 'Send comment', type = 'submit', ...props }, ref) => (\n    <InputGroupAddon align=\"inline-end\">\n      <InputGroupButton ref={ref} data-slot=\"comment-composer-send\" type={type} aria-label={ariaLabel} {...props}>\n        <ArrowUp />\n      </InputGroupButton>\n    </InputGroupAddon>\n  ),\n);\nCommentComposerSend.displayName = 'CommentComposerSend';\n"],"names":[],"mappings":"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"}

package/dist/components/Composer.cjs.js

@@ -67,7 +67,7 @@ const ComposerRing = ({ busy = false, className, ...props }) => {
       ref: ringRef,
       "data-slot": "composer-ring",
       "data-busy": busy ? "true" : "false",
-      className: utils_cn.cn("composer-ring mx-auto w-full max-w-3xl", className),
+      className: utils_cn.cn("composer-ring relative mx-auto w-full max-w-3xl rounded-[23px] p-px", className),
       ...props
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"Composer.cjs.js","sources":["../../src/ds/components/Composer/use-composer-pointer-angle.ts","../../src/ds/components/Composer/composer.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/** Aims the composer ring at the cursor without re-rendering on every move. */\nexport function useComposerPointerAngle(enabled: boolean) {\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !enabled) return;\n\n    let animationFrame: number | undefined;\n    let clientX = 0;\n    let clientY = 0;\n\n    const paintAngle = () => {\n      animationFrame = undefined;\n      const bounds = element.getBoundingClientRect();\n      const radians = Math.atan2(\n        clientY - (bounds.top + bounds.height / 2),\n        clientX - (bounds.left + bounds.width / 2),\n      );\n      // conic-gradient starts at 12 o'clock, atan2 at 3 o'clock\n      element.style.setProperty('--composer-ring-angle', `${(radians * 180) / Math.PI + 90}deg`);\n    };\n\n    const trackPointer = (event: PointerEvent) => {\n      clientX = event.clientX;\n      clientY = event.clientY;\n      animationFrame ??= requestAnimationFrame(paintAngle);\n    };\n\n    window.addEventListener('pointermove', trackPointer, { passive: true });\n    return () => {\n      window.removeEventListener('pointermove', trackPointer);\n      if (animationFrame !== undefined) cancelAnimationFrame(animationFrame);\n    };\n  }, [enabled]);\n\n  return elementRef;\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { useComposerPointerAngle } from './use-composer-pointer-angle';\nimport { cn } from '@/lib/utils';\n\nimport './composer-ring.css';\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  /** Maximum height of the scrolling input viewport. */\n  maxHeight?: string;\n}\n\nexport const Composer = forwardRef<HTMLFormElement, ComposerProps>(({ children, ...props }, ref) => (\n  <form ref={ref} data-slot=\"composer\" {...props}>\n    {children}\n  </form>\n));\nComposer.displayName = 'Composer';\n\nexport interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {\n  sendingPulseKey?: number;\n}\n\nexport const ComposerBox = forwardRef<HTMLDivElement, ComposerBoxProps>(\n  ({ children, className, sendingPulseKey = 0, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-box\"\n      className={cn(\n        'duration-normal @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors focus-within:border-border2',\n        className,\n      )}\n      {...props}\n    >\n      <ComposerSendingPulse pulseKey={sendingPulseKey} />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  ),\n);\nComposerBox.displayName = 'ComposerBox';\n\nexport interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {\n  busy?: boolean;\n}\n\n/**\n * Edge for the composer box it wraps: a conic arc lit under the cursor on hover,\n * spinning on its own while the agent runs, never both at once. Wraps rather\n * than decorates because the box clips its overflow and would cut the arc off.\n */\nexport const ComposerRing = ({ busy = false, className, ...props }: ComposerRingProps) => {\n  const ringRef = useComposerPointerAngle(!busy);\n\n  return (\n    <div\n      ref={ringRef}\n      data-slot=\"composer-ring\"\n      data-busy={busy ? 'true' : 'false'}\n      className={cn('composer-ring mx-auto w-full max-w-3xl', className)}\n      {...props}\n    />\n  );\n};\nComposerRing.displayName = 'ComposerRing';\n\nexport const ComposerAttachments = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-attachments\"\n      className={cn('mx-auto w-full max-w-3xl pb-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerAttachments.displayName = 'ComposerAttachments';\n\nexport const ComposerInput = forwardRef<HTMLTextAreaElement, ComposerInputProps>(\n  ({ className, maxHeight = '212px', ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'min-h-17 field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-3 pb-2 text-ui-lg leading-ui-lg text-neutral6 outline-hidden placeholder:text-neutral3 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </ScrollArea>\n  ),\n);\nComposerInput.displayName = 'ComposerInput';\n\nexport const ComposerActions = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-actions\"\n      className={cn('flex flex-wrap-reverse items-center justify-between gap-2 px-1.5 pb-1.5', className)}\n      {...props}\n    />\n  ),\n);\nComposerActions.displayName = 'ComposerActions';\n\nconst ComposerGradientColumn = ({ className }: { className?: string }) => (\n  <div className={cn('flex size-full flex-col -space-y-3', className)}>\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Dark w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Darker w-full flex-1 blur-xl\" />\n  </div>\n);\n\nconst ComposerSendingPulse = ({ pulseKey }: { pulseKey: number }) => {\n  if (pulseKey === 0) return null;\n\n  return (\n    <div\n      key={pulseKey}\n      aria-hidden=\"true\"\n      data-slot=\"composer-sending-pulse\"\n      className=\"composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu\"\n    >\n      <ComposerGradientColumn />\n      <ComposerGradientColumn className=\"-translate-y-2\" />\n      <ComposerGradientColumn />\n    </div>\n  );\n};\n"],"names":["useRef","useEffect","forwardRef","jsx","jsxs","cn","ScrollArea"],"mappings":"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"}
+{"version":3,"file":"Composer.cjs.js","sources":["../../src/ds/components/Composer/use-composer-pointer-angle.ts","../../src/ds/components/Composer/composer.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/** Aims the composer ring at the cursor without re-rendering on every move. */\nexport function useComposerPointerAngle(enabled: boolean) {\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !enabled) return;\n\n    let animationFrame: number | undefined;\n    let clientX = 0;\n    let clientY = 0;\n\n    const paintAngle = () => {\n      animationFrame = undefined;\n      const bounds = element.getBoundingClientRect();\n      const radians = Math.atan2(\n        clientY - (bounds.top + bounds.height / 2),\n        clientX - (bounds.left + bounds.width / 2),\n      );\n      // conic-gradient starts at 12 o'clock, atan2 at 3 o'clock\n      element.style.setProperty('--composer-ring-angle', `${(radians * 180) / Math.PI + 90}deg`);\n    };\n\n    const trackPointer = (event: PointerEvent) => {\n      clientX = event.clientX;\n      clientY = event.clientY;\n      animationFrame ??= requestAnimationFrame(paintAngle);\n    };\n\n    window.addEventListener('pointermove', trackPointer, { passive: true });\n    return () => {\n      window.removeEventListener('pointermove', trackPointer);\n      if (animationFrame !== undefined) cancelAnimationFrame(animationFrame);\n    };\n  }, [enabled]);\n\n  return elementRef;\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { useComposerPointerAngle } from './use-composer-pointer-angle';\nimport { cn } from '@/lib/utils';\n\nimport './composer-ring.css';\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  /** Maximum height of the scrolling input viewport. */\n  maxHeight?: string;\n}\n\nexport const Composer = forwardRef<HTMLFormElement, ComposerProps>(({ children, ...props }, ref) => (\n  <form ref={ref} data-slot=\"composer\" {...props}>\n    {children}\n  </form>\n));\nComposer.displayName = 'Composer';\n\nexport interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {\n  sendingPulseKey?: number;\n}\n\nexport const ComposerBox = forwardRef<HTMLDivElement, ComposerBoxProps>(\n  ({ children, className, sendingPulseKey = 0, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-box\"\n      className={cn(\n        'duration-normal @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors focus-within:border-border2',\n        className,\n      )}\n      {...props}\n    >\n      <ComposerSendingPulse pulseKey={sendingPulseKey} />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  ),\n);\nComposerBox.displayName = 'ComposerBox';\n\nexport interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {\n  busy?: boolean;\n}\n\n/**\n * Edge for the composer box it wraps: a conic arc lit under the cursor on hover,\n * spinning on its own while the agent runs, never both at once. Wraps rather\n * than decorates because the box clips its overflow and would cut the arc off.\n */\nexport const ComposerRing = ({ busy = false, className, ...props }: ComposerRingProps) => {\n  const ringRef = useComposerPointerAngle(!busy);\n\n  return (\n    <div\n      ref={ringRef}\n      data-slot=\"composer-ring\"\n      data-busy={busy ? 'true' : 'false'}\n      className={cn('composer-ring relative mx-auto w-full max-w-3xl rounded-[23px] p-px', className)}\n      {...props}\n    />\n  );\n};\nComposerRing.displayName = 'ComposerRing';\n\nexport const ComposerAttachments = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-attachments\"\n      className={cn('mx-auto w-full max-w-3xl pb-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerAttachments.displayName = 'ComposerAttachments';\n\nexport const ComposerInput = forwardRef<HTMLTextAreaElement, ComposerInputProps>(\n  ({ className, maxHeight = '212px', ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'min-h-17 field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-3 pb-2 text-ui-lg leading-ui-lg text-neutral6 outline-hidden placeholder:text-neutral3 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </ScrollArea>\n  ),\n);\nComposerInput.displayName = 'ComposerInput';\n\nexport const ComposerActions = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-actions\"\n      className={cn('flex flex-wrap-reverse items-center justify-between gap-2 px-1.5 pb-1.5', className)}\n      {...props}\n    />\n  ),\n);\nComposerActions.displayName = 'ComposerActions';\n\nconst ComposerGradientColumn = ({ className }: { className?: string }) => (\n  <div className={cn('flex size-full flex-col -space-y-3', className)}>\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Dark w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Darker w-full flex-1 blur-xl\" />\n  </div>\n);\n\nconst ComposerSendingPulse = ({ pulseKey }: { pulseKey: number }) => {\n  if (pulseKey === 0) return null;\n\n  return (\n    <div\n      key={pulseKey}\n      aria-hidden=\"true\"\n      data-slot=\"composer-sending-pulse\"\n      className=\"composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu\"\n    >\n      <ComposerGradientColumn />\n      <ComposerGradientColumn className=\"-translate-y-2\" />\n      <ComposerGradientColumn />\n    </div>\n  );\n};\n"],"names":["useRef","useEffect","forwardRef","jsx","jsxs","cn","ScrollArea"],"mappings":"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"}

package/dist/components/Composer.es.js

@@ -63,7 +63,7 @@ const ComposerRing = ({ busy = false, className, ...props }) => {
       ref: ringRef,
       "data-slot": "composer-ring",
       "data-busy": busy ? "true" : "false",
-      className: cn("composer-ring mx-auto w-full max-w-3xl", className),
+      className: cn("composer-ring relative mx-auto w-full max-w-3xl rounded-[23px] p-px", className),
       ...props
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"Composer.es.js","sources":["../../src/ds/components/Composer/use-composer-pointer-angle.ts","../../src/ds/components/Composer/composer.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/** Aims the composer ring at the cursor without re-rendering on every move. */\nexport function useComposerPointerAngle(enabled: boolean) {\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !enabled) return;\n\n    let animationFrame: number | undefined;\n    let clientX = 0;\n    let clientY = 0;\n\n    const paintAngle = () => {\n      animationFrame = undefined;\n      const bounds = element.getBoundingClientRect();\n      const radians = Math.atan2(\n        clientY - (bounds.top + bounds.height / 2),\n        clientX - (bounds.left + bounds.width / 2),\n      );\n      // conic-gradient starts at 12 o'clock, atan2 at 3 o'clock\n      element.style.setProperty('--composer-ring-angle', `${(radians * 180) / Math.PI + 90}deg`);\n    };\n\n    const trackPointer = (event: PointerEvent) => {\n      clientX = event.clientX;\n      clientY = event.clientY;\n      animationFrame ??= requestAnimationFrame(paintAngle);\n    };\n\n    window.addEventListener('pointermove', trackPointer, { passive: true });\n    return () => {\n      window.removeEventListener('pointermove', trackPointer);\n      if (animationFrame !== undefined) cancelAnimationFrame(animationFrame);\n    };\n  }, [enabled]);\n\n  return elementRef;\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { useComposerPointerAngle } from './use-composer-pointer-angle';\nimport { cn } from '@/lib/utils';\n\nimport './composer-ring.css';\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  /** Maximum height of the scrolling input viewport. */\n  maxHeight?: string;\n}\n\nexport const Composer = forwardRef<HTMLFormElement, ComposerProps>(({ children, ...props }, ref) => (\n  <form ref={ref} data-slot=\"composer\" {...props}>\n    {children}\n  </form>\n));\nComposer.displayName = 'Composer';\n\nexport interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {\n  sendingPulseKey?: number;\n}\n\nexport const ComposerBox = forwardRef<HTMLDivElement, ComposerBoxProps>(\n  ({ children, className, sendingPulseKey = 0, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-box\"\n      className={cn(\n        'duration-normal @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors focus-within:border-border2',\n        className,\n      )}\n      {...props}\n    >\n      <ComposerSendingPulse pulseKey={sendingPulseKey} />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  ),\n);\nComposerBox.displayName = 'ComposerBox';\n\nexport interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {\n  busy?: boolean;\n}\n\n/**\n * Edge for the composer box it wraps: a conic arc lit under the cursor on hover,\n * spinning on its own while the agent runs, never both at once. Wraps rather\n * than decorates because the box clips its overflow and would cut the arc off.\n */\nexport const ComposerRing = ({ busy = false, className, ...props }: ComposerRingProps) => {\n  const ringRef = useComposerPointerAngle(!busy);\n\n  return (\n    <div\n      ref={ringRef}\n      data-slot=\"composer-ring\"\n      data-busy={busy ? 'true' : 'false'}\n      className={cn('composer-ring mx-auto w-full max-w-3xl', className)}\n      {...props}\n    />\n  );\n};\nComposerRing.displayName = 'ComposerRing';\n\nexport const ComposerAttachments = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-attachments\"\n      className={cn('mx-auto w-full max-w-3xl pb-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerAttachments.displayName = 'ComposerAttachments';\n\nexport const ComposerInput = forwardRef<HTMLTextAreaElement, ComposerInputProps>(\n  ({ className, maxHeight = '212px', ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'min-h-17 field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-3 pb-2 text-ui-lg leading-ui-lg text-neutral6 outline-hidden placeholder:text-neutral3 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </ScrollArea>\n  ),\n);\nComposerInput.displayName = 'ComposerInput';\n\nexport const ComposerActions = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-actions\"\n      className={cn('flex flex-wrap-reverse items-center justify-between gap-2 px-1.5 pb-1.5', className)}\n      {...props}\n    />\n  ),\n);\nComposerActions.displayName = 'ComposerActions';\n\nconst ComposerGradientColumn = ({ className }: { className?: string }) => (\n  <div className={cn('flex size-full flex-col -space-y-3', className)}>\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Dark w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Darker w-full flex-1 blur-xl\" />\n  </div>\n);\n\nconst ComposerSendingPulse = ({ pulseKey }: { pulseKey: number }) => {\n  if (pulseKey === 0) return null;\n\n  return (\n    <div\n      key={pulseKey}\n      aria-hidden=\"true\"\n      data-slot=\"composer-sending-pulse\"\n      className=\"composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu\"\n    >\n      <ComposerGradientColumn />\n      <ComposerGradientColumn className=\"-translate-y-2\" />\n      <ComposerGradientColumn />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Composer.es.js","sources":["../../src/ds/components/Composer/use-composer-pointer-angle.ts","../../src/ds/components/Composer/composer.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/** Aims the composer ring at the cursor without re-rendering on every move. */\nexport function useComposerPointerAngle(enabled: boolean) {\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !enabled) return;\n\n    let animationFrame: number | undefined;\n    let clientX = 0;\n    let clientY = 0;\n\n    const paintAngle = () => {\n      animationFrame = undefined;\n      const bounds = element.getBoundingClientRect();\n      const radians = Math.atan2(\n        clientY - (bounds.top + bounds.height / 2),\n        clientX - (bounds.left + bounds.width / 2),\n      );\n      // conic-gradient starts at 12 o'clock, atan2 at 3 o'clock\n      element.style.setProperty('--composer-ring-angle', `${(radians * 180) / Math.PI + 90}deg`);\n    };\n\n    const trackPointer = (event: PointerEvent) => {\n      clientX = event.clientX;\n      clientY = event.clientY;\n      animationFrame ??= requestAnimationFrame(paintAngle);\n    };\n\n    window.addEventListener('pointermove', trackPointer, { passive: true });\n    return () => {\n      window.removeEventListener('pointermove', trackPointer);\n      if (animationFrame !== undefined) cancelAnimationFrame(animationFrame);\n    };\n  }, [enabled]);\n\n  return elementRef;\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { useComposerPointerAngle } from './use-composer-pointer-angle';\nimport { cn } from '@/lib/utils';\n\nimport './composer-ring.css';\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  /** Maximum height of the scrolling input viewport. */\n  maxHeight?: string;\n}\n\nexport const Composer = forwardRef<HTMLFormElement, ComposerProps>(({ children, ...props }, ref) => (\n  <form ref={ref} data-slot=\"composer\" {...props}>\n    {children}\n  </form>\n));\nComposer.displayName = 'Composer';\n\nexport interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {\n  sendingPulseKey?: number;\n}\n\nexport const ComposerBox = forwardRef<HTMLDivElement, ComposerBoxProps>(\n  ({ children, className, sendingPulseKey = 0, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-box\"\n      className={cn(\n        'duration-normal @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors focus-within:border-border2',\n        className,\n      )}\n      {...props}\n    >\n      <ComposerSendingPulse pulseKey={sendingPulseKey} />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  ),\n);\nComposerBox.displayName = 'ComposerBox';\n\nexport interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {\n  busy?: boolean;\n}\n\n/**\n * Edge for the composer box it wraps: a conic arc lit under the cursor on hover,\n * spinning on its own while the agent runs, never both at once. Wraps rather\n * than decorates because the box clips its overflow and would cut the arc off.\n */\nexport const ComposerRing = ({ busy = false, className, ...props }: ComposerRingProps) => {\n  const ringRef = useComposerPointerAngle(!busy);\n\n  return (\n    <div\n      ref={ringRef}\n      data-slot=\"composer-ring\"\n      data-busy={busy ? 'true' : 'false'}\n      className={cn('composer-ring relative mx-auto w-full max-w-3xl rounded-[23px] p-px', className)}\n      {...props}\n    />\n  );\n};\nComposerRing.displayName = 'ComposerRing';\n\nexport const ComposerAttachments = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-attachments\"\n      className={cn('mx-auto w-full max-w-3xl pb-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerAttachments.displayName = 'ComposerAttachments';\n\nexport const ComposerInput = forwardRef<HTMLTextAreaElement, ComposerInputProps>(\n  ({ className, maxHeight = '212px', ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'min-h-17 field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-3 pb-2 text-ui-lg leading-ui-lg text-neutral6 outline-hidden placeholder:text-neutral3 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </ScrollArea>\n  ),\n);\nComposerInput.displayName = 'ComposerInput';\n\nexport const ComposerActions = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-actions\"\n      className={cn('flex flex-wrap-reverse items-center justify-between gap-2 px-1.5 pb-1.5', className)}\n      {...props}\n    />\n  ),\n);\nComposerActions.displayName = 'ComposerActions';\n\nconst ComposerGradientColumn = ({ className }: { className?: string }) => (\n  <div className={cn('flex size-full flex-col -space-y-3', className)}>\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Dark w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Darker w-full flex-1 blur-xl\" />\n  </div>\n);\n\nconst ComposerSendingPulse = ({ pulseKey }: { pulseKey: number }) => {\n  if (pulseKey === 0) return null;\n\n  return (\n    <div\n      key={pulseKey}\n      aria-hidden=\"true\"\n      data-slot=\"composer-sending-pulse\"\n      className=\"composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu\"\n    >\n      <ComposerGradientColumn />\n      <ComposerGradientColumn className=\"-translate-y-2\" />\n      <ComposerGradientColumn />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}