@mastra/playground-ui 51.3.0-alpha.1 → 51.3.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @mastra/playground-ui
 
+## 51.3.0-alpha.3
+
+### Patch Changes
+
+- Updated dependencies [[`b8cb683`](https://github.com/mastra-ai/mastra/commit/b8cb683ba66499df254ddd1f7edd8cae3f89d2e7)]:
+  - @mastra/core@1.63.1-alpha.3
+  - @mastra/client-js@1.42.3-alpha.3
+  - @mastra/react@1.4.8-alpha.3
+
+## 51.3.0-alpha.2
+
+### Patch Changes
+
+- Updated dependencies [[`0885364`](https://github.com/mastra-ai/mastra/commit/0885364c2fc7fa31febcfc444fc1ba5231ac1257)]:
+  - @mastra/core@1.63.1-alpha.2
+  - @mastra/memory@1.28.1-alpha.1
+  - @mastra/client-js@1.42.3-alpha.2
+  - @mastra/react@1.4.8-alpha.2
+
 ## 51.3.0-alpha.1
 
 ### Patch Changes

package/dist/components/Composer.cjs.js

@@ -47,7 +47,7 @@ const ComposerBox = React.forwardRef(
       ref,
       "data-slot": "composer-box",
       className: utils_cn.cn(
-        "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",
+        "@container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors duration-normal focus-within:border-border2",
         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 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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"}
+{"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        '@container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors duration-normal 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

@@ -43,7 +43,7 @@ const ComposerBox = forwardRef(
       ref,
       "data-slot": "composer-box",
       className: cn(
-        "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",
+        "@container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors duration-normal focus-within:border-border2",
         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 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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"}
+{"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        '@container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors duration-normal 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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"}

package/dist/components/LogsDataList.cjs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const logsDataList = require('../logs-data-list-Xayqbjw4.cjs');
 const dataListSkeleton = require('../data-list-skeleton-BHBSIQHN.cjs');
+require('react');
 
 
 

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

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/components/LogsDataList.es.js

@@ -1,3 +1,4 @@
 export { L as LogsDataList } from '../logs-data-list-DRXJ89IZ.js';
 export { D as LogsDataListSkeleton } from '../data-list-skeleton-DDO_OE14.js';
+import 'react';
 //# sourceMappingURL=LogsDataList.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/style.css

@@ -2036,22 +2036,6 @@
     height: 30vh;
   }
 
-  .h-\[32rem\] {
-    height: 32rem;
-  }
-
-  .h-\[34rem\] {
-    height: 34rem;
-  }
-
-  .h-\[36rem\] {
-    height: 36rem;
-  }
-
-  .h-\[38rem\] {
-    height: 38rem;
-  }
-
   .h-\[160px\] {
     height: 160px;
   }
@@ -2289,10 +2273,6 @@
     min-height: var(--spacing-72);
   }
 
-  .min-h-\[34rem\] {
-    min-height: 34rem;
-  }
-
   .min-h-\[70cqh\] {
     min-height: 70cqh;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "51.3.0-alpha.1",
+  "version": "51.3.0-alpha.3",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
@@ -161,8 +161,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.42.3-alpha.1",
-    "@mastra/react": "1.4.8-alpha.1"
+    "@mastra/client-js": "^1.42.3-alpha.3",
+    "@mastra/react": "1.4.8-alpha.3"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.1",
@@ -202,11 +202,11 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.10",
-    "@mastra/client-js": "^1.42.3-alpha.1",
-    "@mastra/core": "1.63.1-alpha.1",
-    "@mastra/memory": "1.28.1-alpha.0",
-    "@mastra/react": "1.4.8-alpha.1",
-    "@internal/lint": "0.0.127"
+    "@internal/lint": "0.0.127",
+    "@mastra/client-js": "^1.42.3-alpha.3",
+    "@mastra/core": "1.63.1-alpha.3",
+    "@mastra/memory": "1.28.1-alpha.1",
+    "@mastra/react": "1.4.8-alpha.3"
   },
   "homepage": "https://mastra.ai",
   "repository": {