@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/dist/composer-BUoRnMDd.cjs

@@ -0,0 +1,156 @@
+'use strict';
+
+require('./composer.css');const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const scrollArea = require('./scroll-area-Qjf7e0Ik.cjs');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+function useComposerPointer(enabled) {
+  const [pointer, setPointer] = React.useState();
+  function trackPointer(event) {
+    if (!enabled || event.defaultPrevented) return;
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - bounds.left;
+    const y = event.clientY - bounds.top;
+    const radians = Math.atan2(y - bounds.height / 2, x - bounds.width / 2);
+    setPointer({ x, y, angle: radians * 180 / Math.PI + 90 });
+  }
+  return {
+    trackPointer,
+    pointerStyle: {
+      "--composer-spotlight-x": pointer && `${pointer.x}px`,
+      "--composer-spotlight-y": pointer && `${pointer.y}px`,
+      "--composer-ring-angle": pointer && `${pointer.angle}deg`
+    }
+  };
+}
+
+const Composer = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("form", { ref, "data-slot": "composer", ...props, children }));
+Composer.displayName = "Composer";
+const ComposerBox = React.forwardRef(
+  ({ children, className, sendingPulseKey = 0, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "composer-box",
+      className: utils_cn.cn(
+        "composer-box @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border-strong/40 transition-colors duration-normal focus-within:border-border-strong",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ComposerSendingPulse, { pulseKey: sendingPulseKey }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children })
+      ]
+    }
+  )
+);
+ComposerBox.displayName = "ComposerBox";
+const ComposerRing = ({
+  busy = false,
+  tone = "green",
+  className,
+  style,
+  onPointerEnter,
+  onPointerMove,
+  ...props
+}) => {
+  const { trackPointer, pointerStyle } = useComposerPointer(!busy);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "composer-ring",
+      "data-composer-tone": tone,
+      "data-busy": busy ? "true" : "false",
+      className: utils_cn.cn("composer-ring relative mx-auto w-full max-w-3xl rounded-[23px] p-px", className),
+      style: { ...pointerStyle, ...style },
+      onPointerEnter: (event) => {
+        onPointerEnter?.(event);
+        trackPointer(event);
+      },
+      onPointerMove: (event) => {
+        onPointerMove?.(event);
+        trackPointer(event);
+      },
+      ...props
+    }
+  );
+};
+ComposerRing.displayName = "ComposerRing";
+const ComposerAttachments = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "region",
+      "data-slot": "composer-attachments",
+      className: utils_cn.cn("mx-auto w-full max-w-3xl pb-2", className),
+      ...props
+    }
+  )
+);
+ComposerAttachments.displayName = "ComposerAttachments";
+const ComposerInput = React.forwardRef(
+  ({ className, variant = "inline", maxHeight, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { maxHeight: maxHeight ?? (variant === "textarea" ? "16rem" : "13rem"), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      ref,
+      "data-slot": "composer-input",
+      className: utils_cn.cn(
+        "field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-2.5 pb-2 text-body text-muted-foreground outline-hidden placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+        variant === "textarea" ? "min-h-28" : "min-h-10",
+        className
+      ),
+      ...props
+    }
+  ) })
+);
+ComposerInput.displayName = "ComposerInput";
+const ComposerActions = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "region",
+      "data-slot": "composer-actions",
+      className: utils_cn.cn("flex w-full flex-wrap items-end justify-between gap-2 px-3 pb-3", className),
+      ...props
+    }
+  )
+);
+ComposerActions.displayName = "ComposerActions";
+const ComposerGradientColumn = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex size-full flex-col -space-y-3", className), children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-accent1 w-full flex-1 blur-xl" }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-accent1Dark w-full flex-1 blur-xl" }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-accent1 w-full flex-1 blur-xl" }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-accent1Darker w-full flex-1 blur-xl" })
+] });
+const ComposerSendingPulse = ({ pulseKey }) => {
+  if (pulseKey === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-slot": "composer-sending-pulse",
+      className: "composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ComposerGradientColumn, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ComposerGradientColumn, { className: "-translate-y-2" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ComposerGradientColumn, {})
+      ]
+    },
+    pulseKey
+  );
+};
+function ComposerToneLabel({ tone, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-composer-tone": tone, className: utils_cn.cn("composer-tone-label", className), ...props });
+}
+
+exports.Composer = Composer;
+exports.ComposerActions = ComposerActions;
+exports.ComposerAttachments = ComposerAttachments;
+exports.ComposerBox = ComposerBox;
+exports.ComposerInput = ComposerInput;
+exports.ComposerRing = ComposerRing;
+exports.ComposerToneLabel = ComposerToneLabel;
+//# sourceMappingURL=composer-BUoRnMDd.cjs.map

package/dist/composer-BUoRnMDd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer-BUoRnMDd.cjs","sources":["../src/ds/components/Composer/use-composer-pointer.ts","../src/ds/components/Composer/composer.tsx"],"sourcesContent":["import { useState, type PointerEvent } from 'react';\n\nexport function useComposerPointer(enabled: boolean) {\n  const [pointer, setPointer] = useState<{ x: number; y: number; angle: number }>();\n\n  function trackPointer(event: PointerEvent<HTMLDivElement>) {\n    if (!enabled || event.defaultPrevented) return;\n\n    const bounds = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX - bounds.left;\n    const y = event.clientY - bounds.top;\n    const radians = Math.atan2(y - bounds.height / 2, x - bounds.width / 2);\n    // conic-gradient starts at 12 o'clock, atan2 at 3 o'clock\n    setPointer({ x, y, angle: (radians * 180) / Math.PI + 90 });\n  }\n\n  return {\n    trackPointer,\n    pointerStyle: {\n      '--composer-spotlight-x': pointer && `${pointer.x}px`,\n      '--composer-spotlight-y': pointer && `${pointer.y}px`,\n      '--composer-ring-angle': pointer && `${pointer.angle}deg`,\n    },\n  };\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { useComposerPointer } from './use-composer-pointer';\nimport { cn } from '@/lib/utils';\n\nimport './composer.css';\nimport './composer-ring.css';\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  variant?: 'inline' | 'textarea';\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        'composer-box @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border-strong/40 transition-colors duration-normal focus-within:border-border-strong',\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 type ComposerTone = 'default' | 'green' | 'purple' | 'orange';\n\nexport interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {\n  busy?: boolean;\n  tone?: ComposerTone;\n}\n\nexport const ComposerRing = ({\n  busy = false,\n  tone = 'green',\n  className,\n  style,\n  onPointerEnter,\n  onPointerMove,\n  ...props\n}: ComposerRingProps) => {\n  const { trackPointer, pointerStyle } = useComposerPointer(!busy);\n\n  return (\n    <div\n      data-slot=\"composer-ring\"\n      data-composer-tone={tone}\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      style={{ ...pointerStyle, ...style }}\n      onPointerEnter={event => {\n        onPointerEnter?.(event);\n        trackPointer(event);\n      }}\n      onPointerMove={event => {\n        onPointerMove?.(event);\n        trackPointer(event);\n      }}\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, variant = 'inline', maxHeight, ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight ?? (variant === 'textarea' ? '16rem' : '13rem')}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-2.5 pb-2 text-body text-muted-foreground outline-hidden placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          variant === 'textarea' ? 'min-h-28' : 'min-h-10',\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 w-full flex-wrap items-end justify-between gap-2 px-3 pb-3', 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\nexport interface ComposerToneLabelProps extends ComponentPropsWithoutRef<'span'> {\n  tone: ComposerTone;\n}\n\nexport function ComposerToneLabel({ tone, className, ...props }: ComposerToneLabelProps) {\n  return <span data-composer-tone={tone} className={cn('composer-tone-label', className)} {...props} />;\n}\n"],"names":["useState","forwardRef","jsx","jsxs","cn","ScrollArea"],"mappings":"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"}

package/dist/composer-CEL1glw7.js

@@ -0,0 +1,148 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, forwardRef } from 'react';
+import { S as ScrollArea } from './scroll-area-CdQ_5bLm.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+import './composer.css';function useComposerPointer(enabled) {
+  const [pointer, setPointer] = useState();
+  function trackPointer(event) {
+    if (!enabled || event.defaultPrevented) return;
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - bounds.left;
+    const y = event.clientY - bounds.top;
+    const radians = Math.atan2(y - bounds.height / 2, x - bounds.width / 2);
+    setPointer({ x, y, angle: radians * 180 / Math.PI + 90 });
+  }
+  return {
+    trackPointer,
+    pointerStyle: {
+      "--composer-spotlight-x": pointer && `${pointer.x}px`,
+      "--composer-spotlight-y": pointer && `${pointer.y}px`,
+      "--composer-ring-angle": pointer && `${pointer.angle}deg`
+    }
+  };
+}
+
+const Composer = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx("form", { ref, "data-slot": "composer", ...props, children }));
+Composer.displayName = "Composer";
+const ComposerBox = forwardRef(
+  ({ children, className, sendingPulseKey = 0, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "composer-box",
+      className: cn(
+        "composer-box @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border-strong/40 transition-colors duration-normal focus-within:border-border-strong",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ComposerSendingPulse, { pulseKey: sendingPulseKey }),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+      ]
+    }
+  )
+);
+ComposerBox.displayName = "ComposerBox";
+const ComposerRing = ({
+  busy = false,
+  tone = "green",
+  className,
+  style,
+  onPointerEnter,
+  onPointerMove,
+  ...props
+}) => {
+  const { trackPointer, pointerStyle } = useComposerPointer(!busy);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "composer-ring",
+      "data-composer-tone": tone,
+      "data-busy": busy ? "true" : "false",
+      className: cn("composer-ring relative mx-auto w-full max-w-3xl rounded-[23px] p-px", className),
+      style: { ...pointerStyle, ...style },
+      onPointerEnter: (event) => {
+        onPointerEnter?.(event);
+        trackPointer(event);
+      },
+      onPointerMove: (event) => {
+        onPointerMove?.(event);
+        trackPointer(event);
+      },
+      ...props
+    }
+  );
+};
+ComposerRing.displayName = "ComposerRing";
+const ComposerAttachments = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "region",
+      "data-slot": "composer-attachments",
+      className: cn("mx-auto w-full max-w-3xl pb-2", className),
+      ...props
+    }
+  )
+);
+ComposerAttachments.displayName = "ComposerAttachments";
+const ComposerInput = forwardRef(
+  ({ className, variant = "inline", maxHeight, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea, { maxHeight: maxHeight ?? (variant === "textarea" ? "16rem" : "13rem"), children: /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      "data-slot": "composer-input",
+      className: cn(
+        "field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-2.5 pb-2 text-body text-muted-foreground outline-hidden placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+        variant === "textarea" ? "min-h-28" : "min-h-10",
+        className
+      ),
+      ...props
+    }
+  ) })
+);
+ComposerInput.displayName = "ComposerInput";
+const ComposerActions = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "region",
+      "data-slot": "composer-actions",
+      className: cn("flex w-full flex-wrap items-end justify-between gap-2 px-3 pb-3", className),
+      ...props
+    }
+  )
+);
+ComposerActions.displayName = "ComposerActions";
+const ComposerGradientColumn = ({ className }) => /* @__PURE__ */ jsxs("div", { className: cn("flex size-full flex-col -space-y-3", className), children: [
+  /* @__PURE__ */ jsx("div", { className: "bg-accent1 w-full flex-1 blur-xl" }),
+  /* @__PURE__ */ jsx("div", { className: "bg-accent1Dark w-full flex-1 blur-xl" }),
+  /* @__PURE__ */ jsx("div", { className: "bg-accent1 w-full flex-1 blur-xl" }),
+  /* @__PURE__ */ jsx("div", { className: "bg-accent1Darker w-full flex-1 blur-xl" })
+] });
+const ComposerSendingPulse = ({ pulseKey }) => {
+  if (pulseKey === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-slot": "composer-sending-pulse",
+      className: "composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu",
+      children: [
+        /* @__PURE__ */ jsx(ComposerGradientColumn, {}),
+        /* @__PURE__ */ jsx(ComposerGradientColumn, { className: "-translate-y-2" }),
+        /* @__PURE__ */ jsx(ComposerGradientColumn, {})
+      ]
+    },
+    pulseKey
+  );
+};
+function ComposerToneLabel({ tone, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "data-composer-tone": tone, className: cn("composer-tone-label", className), ...props });
+}
+
+export { ComposerAttachments as C, Composer as a, ComposerActions as b, ComposerBox as c, ComposerInput as d, ComposerRing as e, ComposerToneLabel as f };
+//# sourceMappingURL=composer-CEL1glw7.js.map

package/dist/composer-CEL1glw7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer-CEL1glw7.js","sources":["../src/ds/components/Composer/use-composer-pointer.ts","../src/ds/components/Composer/composer.tsx"],"sourcesContent":["import { useState, type PointerEvent } from 'react';\n\nexport function useComposerPointer(enabled: boolean) {\n  const [pointer, setPointer] = useState<{ x: number; y: number; angle: number }>();\n\n  function trackPointer(event: PointerEvent<HTMLDivElement>) {\n    if (!enabled || event.defaultPrevented) return;\n\n    const bounds = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX - bounds.left;\n    const y = event.clientY - bounds.top;\n    const radians = Math.atan2(y - bounds.height / 2, x - bounds.width / 2);\n    // conic-gradient starts at 12 o'clock, atan2 at 3 o'clock\n    setPointer({ x, y, angle: (radians * 180) / Math.PI + 90 });\n  }\n\n  return {\n    trackPointer,\n    pointerStyle: {\n      '--composer-spotlight-x': pointer && `${pointer.x}px`,\n      '--composer-spotlight-y': pointer && `${pointer.y}px`,\n      '--composer-ring-angle': pointer && `${pointer.angle}deg`,\n    },\n  };\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { useComposerPointer } from './use-composer-pointer';\nimport { cn } from '@/lib/utils';\n\nimport './composer.css';\nimport './composer-ring.css';\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  variant?: 'inline' | 'textarea';\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        'composer-box @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border-strong/40 transition-colors duration-normal focus-within:border-border-strong',\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 type ComposerTone = 'default' | 'green' | 'purple' | 'orange';\n\nexport interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {\n  busy?: boolean;\n  tone?: ComposerTone;\n}\n\nexport const ComposerRing = ({\n  busy = false,\n  tone = 'green',\n  className,\n  style,\n  onPointerEnter,\n  onPointerMove,\n  ...props\n}: ComposerRingProps) => {\n  const { trackPointer, pointerStyle } = useComposerPointer(!busy);\n\n  return (\n    <div\n      data-slot=\"composer-ring\"\n      data-composer-tone={tone}\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      style={{ ...pointerStyle, ...style }}\n      onPointerEnter={event => {\n        onPointerEnter?.(event);\n        trackPointer(event);\n      }}\n      onPointerMove={event => {\n        onPointerMove?.(event);\n        trackPointer(event);\n      }}\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, variant = 'inline', maxHeight, ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight ?? (variant === 'textarea' ? '16rem' : '13rem')}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-2.5 pb-2 text-body text-muted-foreground outline-hidden placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          variant === 'textarea' ? 'min-h-28' : 'min-h-10',\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 w-full flex-wrap items-end justify-between gap-2 px-3 pb-3', 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\nexport interface ComposerToneLabelProps extends ComponentPropsWithoutRef<'span'> {\n  tone: ComposerTone;\n}\n\nexport function ComposerToneLabel({ tone, className, ...props }: ComposerToneLabelProps) {\n  return <span data-composer-tone={tone} className={cn('composer-tone-label', className)} {...props} />;\n}\n"],"names":[],"mappings":"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"}

package/dist/composer.css

@@ -3,7 +3,7 @@
 }
 
 .composer-tone-label {
-  --composer-tone-color: var(--neutral4);
+  --composer-tone-color: var(--muted-foreground);
 
   color: var(--composer-tone-color);
 }
@@ -35,13 +35,13 @@ html.light [data-composer-tone='orange'] {
 .composer-box {
   --composer-edge: oklch(0% 0 0deg / 18%);
 
-  background-color: var(--surface4);
+  background-color: var(--muted);
 }
 
 html.light .composer-box {
   --composer-edge: transparent;
 
-  background-color: var(--surface3);
+  background-color: var(--card);
 }
 
 .composer-box::before,
@@ -105,7 +105,7 @@ html.light .composer-box {
 
 .composer-ring {
   --composer-ring-color: var(--composer-tone-color);
-  --composer-ring-edge: color-mix(in oklab, var(--neutral1) 40%, transparent);
+  --composer-ring-edge: color-mix(in oklab, var(--placeholder) 40%, transparent);
   --composer-spotlight-x: 50%;
   --composer-spotlight-y: 50%;
   --composer-spotlight-strength: 0;
@@ -127,7 +127,7 @@ html.light .composer-box {
 }
 
 .composer-ring:focus-within {
-  background-color: var(--border2);
+  background-color: var(--border-strong);
 }
 
 @media (hover: hover) {
@@ -168,7 +168,7 @@ html.light .composer-box {
 }
 
 html.light .composer-ring {
-  --composer-ring-edge: color-mix(in oklab, var(--border2) 40%, transparent);
+  --composer-ring-edge: color-mix(in oklab, var(--border-strong) 40%, transparent);
 }
 
 @media (forced-colors: active) {

package/dist/copy-button-2cwdZ3dW.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+import { B as Button } from './Button-cWcBEd-G.js';
+import { useCopyToClipboard } from './hooks/use-copy-to-clipboard.es.js';
+
+function CopyButton({
+  content,
+  copyMessage,
+  showToast,
+  tooltip = "Copy to clipboard",
+  size = "sm",
+  variant,
+  className
+}) {
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: content,
+    copyMessage,
+    showToast
+  });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: handleCopy,
+      type: "button",
+      size,
+      variant,
+      className,
+      tooltip: isCopied ? "Copied!" : tooltip,
+      "aria-label": isCopied ? "Copied!" : tooltip,
+      children: isCopied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+    }
+  );
+}
+
+export { CopyButton as C };
+//# sourceMappingURL=copy-button-2cwdZ3dW.js.map

package/dist/copy-button-2cwdZ3dW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button-2cwdZ3dW.js","sources":["../src/ds/components/CopyButton/copy-button.tsx"],"sourcesContent":["import { CopyIcon, CheckIcon } from 'lucide-react';\n\nimport type { ButtonProps } from '../Button';\nimport { Button } from '../Button';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\n\nexport type CopyButtonProps = {\n  content: string;\n  copyMessage?: string;\n  showToast?: boolean;\n  tooltip?: string;\n  className?: string;\n  size?: ButtonProps['size'];\n  variant?: ButtonProps['variant'];\n};\n\nexport function CopyButton({\n  content,\n  copyMessage,\n  showToast,\n  tooltip = 'Copy to clipboard',\n  size = 'sm',\n  variant,\n  className,\n}: CopyButtonProps) {\n  const { isCopied, handleCopy } = useCopyToClipboard({\n    text: content,\n    copyMessage,\n    showToast,\n  });\n\n  return (\n    <Button\n      onClick={handleCopy}\n      type=\"button\"\n      size={size}\n      variant={variant}\n      className={className}\n      tooltip={isCopied ? 'Copied!' : tooltip}\n      aria-label={isCopied ? 'Copied!' : tooltip}\n    >\n      {isCopied ? <CheckIcon /> : <CopyIcon />}\n    </Button>\n  );\n}\n"],"names":[],"mappings":";;;;;AAgBO,SAAS,UAAA,CAAW;AAAA,EACzB,OAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,mBAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,OAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,EAAE,QAAA,EAAU,UAAA,EAAW,GAAI,kBAAA,CAAmB;AAAA,IAClD,IAAA,EAAM,OAAA;AAAA,IACN,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,UAAA;AAAA,MACT,IAAA,EAAK,QAAA;AAAA,MACL,IAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA,EAAS,WAAW,SAAA,GAAY,OAAA;AAAA,MAChC,YAAA,EAAY,WAAW,SAAA,GAAY,OAAA;AAAA,MAElC,QAAA,EAAA,QAAA,mBAAW,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,uBAAM,QAAA,EAAA,EAAS;AAAA;AAAA,GACxC;AAEJ;;;;"}

package/dist/copy-button-BbDBpBMl.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const Button = require('./Button-CVewl8nT.cjs');
+const hooks_useCopyToClipboard = require('./hooks/use-copy-to-clipboard.cjs.js');
+
+function CopyButton({
+  content,
+  copyMessage,
+  showToast,
+  tooltip = "Copy to clipboard",
+  size = "sm",
+  variant,
+  className
+}) {
+  const { isCopied, handleCopy } = hooks_useCopyToClipboard.useCopyToClipboard({
+    text: content,
+    copyMessage,
+    showToast
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      onClick: handleCopy,
+      type: "button",
+      size,
+      variant,
+      className,
+      tooltip: isCopied ? "Copied!" : tooltip,
+      "aria-label": isCopied ? "Copied!" : tooltip,
+      children: isCopied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {})
+    }
+  );
+}
+
+exports.CopyButton = CopyButton;
+//# sourceMappingURL=copy-button-BbDBpBMl.cjs.map

package/dist/copy-button-BbDBpBMl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button-BbDBpBMl.cjs","sources":["../src/ds/components/CopyButton/copy-button.tsx"],"sourcesContent":["import { CopyIcon, CheckIcon } from 'lucide-react';\n\nimport type { ButtonProps } from '../Button';\nimport { Button } from '../Button';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\n\nexport type CopyButtonProps = {\n  content: string;\n  copyMessage?: string;\n  showToast?: boolean;\n  tooltip?: string;\n  className?: string;\n  size?: ButtonProps['size'];\n  variant?: ButtonProps['variant'];\n};\n\nexport function CopyButton({\n  content,\n  copyMessage,\n  showToast,\n  tooltip = 'Copy to clipboard',\n  size = 'sm',\n  variant,\n  className,\n}: CopyButtonProps) {\n  const { isCopied, handleCopy } = useCopyToClipboard({\n    text: content,\n    copyMessage,\n    showToast,\n  });\n\n  return (\n    <Button\n      onClick={handleCopy}\n      type=\"button\"\n      size={size}\n      variant={variant}\n      className={className}\n      tooltip={isCopied ? 'Copied!' : tooltip}\n      aria-label={isCopied ? 'Copied!' : tooltip}\n    >\n      {isCopied ? <CheckIcon /> : <CopyIcon />}\n    </Button>\n  );\n}\n"],"names":["useCopyToClipboard","jsx","Button","CheckIcon","CopyIcon"],"mappings":";;;;;;;AAgBO,SAAS,UAAA,CAAW;AAAA,EACzB,OAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,mBAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,OAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,EAAE,QAAA,EAAU,UAAA,EAAW,GAAIA,2CAAA,CAAmB;AAAA,IAClD,IAAA,EAAM,OAAA;AAAA,IACN,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,UAAA;AAAA,MACT,IAAA,EAAK,QAAA;AAAA,MACL,IAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA,EAAS,WAAW,SAAA,GAAY,OAAA;AAAA,MAChC,YAAA,EAAY,WAAW,SAAA,GAAY,OAAA;AAAA,MAElC,QAAA,EAAA,QAAA,mBAAWD,cAAA,CAACE,qBAAA,EAAA,EAAU,CAAA,kCAAMC,oBAAA,EAAA,EAAS;AAAA;AAAA,GACxC;AAEJ;;;;"}