@mastra/playground-ui 53.1.0-alpha.3 → 54.0.0

package/dist/resize/collapsible-panel.cjs.js

@@ -3,84 +3,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const lucideReact = require('lucide-react');
 const React = require('react');
 const reactResizablePanels = require('react-resizable-panels');
 const resize_panelEdgeIcon = require('./panel-edge-icon.cjs.js');
 const resize_panelIconButton = require('./panel-icon-button.cjs.js');
-const resize_useClampedElementCursor = require('./use-clamped-element-cursor.cjs.js');
+const tooltip = require('../tooltip-DIi_oOxO.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
+require('lucide-react');
 const utils_cn = require('../cn-DCPcv4xv.cjs');
 
-const PILL_EDGE_MARGIN = 22;
-const useCollapsedEdgePill = ({
-  collapsed,
-  direction,
-  elementRef
-}) => {
-  const expandButtonRef = React.useRef(null);
-  const pillRef = React.useRef(null);
-  const {
-    beginTracking: beginPillTracking,
-    elementRef: stripRef,
-    endTracking: endPillTracking,
-    updateTracking: updatePillTracking
-  } = resize_useClampedElementCursor.useClampedElementCursor({
-    axis: "y",
-    margin: PILL_EDGE_MARGIN,
-    variableName: "--pill-y"
-  });
-  const setEdgeHovered = React.useCallback((hovered) => {
-    const expandButton = expandButtonRef.current;
-    const pill = pillRef.current;
-    if (expandButton) expandButton.dataset.edgeHovered = hovered ? "true" : "false";
-    if (pill) pill.dataset.edgeHovered = hovered ? "true" : "false";
-  }, []);
-  const spawnPill = React.useCallback(
-    (point) => {
-      const pill = pillRef.current;
-      if (!pill) return;
-      beginPillTracking(point);
-      pill.style.transitionProperty = "opacity, translate";
-      requestAnimationFrame(() => {
-        pill.style.transitionProperty = "";
-      });
-    },
-    [beginPillTracking]
-  );
-  const trackPillPosition = React.useCallback(
-    (point) => {
-      updatePillTracking(point);
-    },
-    [updatePillTracking]
-  );
-  React.useEffect(() => {
-    if (!collapsed) return;
-    const panelElement = elementRef.current;
-    const separator = direction === "left" ? panelElement?.nextElementSibling : panelElement?.previousElementSibling;
-    if (!(separator instanceof HTMLElement) || !separator.hasAttribute("data-separator")) return;
-    const show = (event) => {
-      setEdgeHovered(true);
-      spawnPill(event);
-    };
-    const hide = () => {
-      setEdgeHovered(false);
-      endPillTracking();
-    };
-    const follow = (event) => trackPillPosition(event);
-    separator.addEventListener("pointerenter", show);
-    separator.addEventListener("pointerleave", hide);
-    separator.addEventListener("pointermove", follow);
-    return () => {
-      separator.removeEventListener("pointerenter", show);
-      separator.removeEventListener("pointerleave", hide);
-      separator.removeEventListener("pointermove", follow);
-      setEdgeHovered(false);
-      endPillTracking();
-    };
-  }, [collapsed, direction, elementRef, endPillTracking, setEdgeHovered, spawnPill, trackPillPosition]);
-  return { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition };
-};
 const CollapsiblePanel = ({
   collapsedSize,
   children,
@@ -89,28 +20,44 @@ const CollapsiblePanel = ({
   onResize,
   style,
   minSize,
+  defaultSize,
+  panelRef: externalPanelRef,
+  ref,
   ...props
 }) => {
-  const [collapsed, setCollapsed] = React.useState(false);
-  const panelRef = reactResizablePanels.usePanelRef();
-  const elementRef = React.useRef(null);
-  const { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition } = useCollapsedEdgePill({
-    collapsed,
-    direction,
-    elementRef
-  });
-  const expand = () => panelRef.current?.expand();
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const sizeBeforeCollapseRef = React.useRef(null);
+  const internalPanelRef = reactResizablePanels.usePanelRef();
+  const panelRef = externalPanelRef ?? internalPanelRef;
+  const collapse = () => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    sizeBeforeCollapseRef.current = panel.getSize().inPixels;
+    panel.collapse();
+  };
+  const expand = () => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    const target = sizeBeforeCollapseRef.current ?? defaultSize;
+    if (target === void 0) {
+      panel.expand();
+      return;
+    }
+    panel.resize(target);
+  };
+  React.useImperativeHandle(ref, () => ({ collapse, expand }));
   const numericMinSize = typeof minSize === "number" ? minSize : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactResizablePanels.Panel,
     {
       panelRef,
-      elementRef,
       collapsedSize,
       minSize,
+      defaultSize,
       className: utils_cn.cn("relative", className),
       style: {
-        overflow: collapsed ? "visible" : "hidden",
+        // The expand button must remain visible once the panel is at zero width.
+        overflow: isCollapsed ? "visible" : "hidden",
         "--panel-min-w": numericMinSize ? `${numericMinSize}px` : void 0,
         ...style
       },
@@ -118,23 +65,22 @@ const CollapsiblePanel = ({
       onResize: (size, id, previousSize) => {
         onResize?.(size, id, previousSize);
         if (typeof collapsedSize !== "number") return;
-        setCollapsed(size.inPixels <= collapsedSize);
+        setIsCollapsed(size.inPixels <= collapsedSize);
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            hidden: collapsed,
+            hidden: isCollapsed,
             style: { minWidth: "var(--panel-min-w)" },
             className: utils_cn.cn("absolute inset-y-0 w-full overflow-hidden", direction === "left" ? "left-0" : "right-0"),
             children
           }
         ),
-        collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+        isCollapsed && /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
-              ref: expandButtonRef,
               type: "button",
               "aria-label": "Expand panel",
               onClick: expand,
@@ -142,46 +88,12 @@ const CollapsiblePanel = ({
                 resize_panelIconButton.panelIconButtonClass,
                 "absolute top-2 z-10",
                 "transition-[color,background-color,opacity] duration-300 starting:opacity-0",
-                direction === "left" ? "left-2" : "right-2",
-                "data-[edge-hovered=true]:text-neutral6"
+                direction === "left" ? "left-2" : "right-2"
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(resize_panelEdgeIcon.PanelEdgeIcon, { side: direction }) })
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              ref: stripRef,
-              type: "button",
-              tabIndex: -1,
-              "aria-hidden": "true",
-              onClick: expand,
-              onPointerEnter: (event) => spawnPill(event),
-              onPointerLeave: endPillTracking,
-              onPointerMove: (event) => trackPillPosition(event),
-              style: { "--pill-y": "50%" },
-              className: utils_cn.cn(
-                "group/expand absolute inset-y-0 z-10 w-4 cursor-pointer focus-visible:outline-hidden",
-                direction === "left" ? "left-1" : "right-1"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  ref: pillRef,
-                  style: { top: "var(--pill-y)" },
-                  className: utils_cn.cn(
-                    "absolute flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-neutral6 text-surface1 shadow-dialog",
-                    "pointer-events-none opacity-0 transition-[opacity,translate,top] duration-150 ease-out-custom motion-reduce:transition-none",
-                    direction === "left" ? "left-0.5 -translate-x-1" : "right-0.5 translate-x-1",
-                    "group-hover/expand:pointer-events-auto group-hover/expand:translate-x-0 group-hover/expand:opacity-100",
-                    "group-active/expand:bg-neutral6/80",
-                    "data-[edge-hovered=true]:pointer-events-auto data-[edge-hovered=true]:translate-x-0 data-[edge-hovered=true]:opacity-100"
-                  ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { children: direction === "left" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, {}) })
-                }
-              )
-            }
-          )
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { side: direction === "left" ? "right" : "left", children: "Expand panel" })
         ] })
       ]
     }

package/dist/resize/collapsible-panel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-panel.cjs.js","sources":["../../src/lib/resize/collapsible-panel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, RefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport type { PanelProps } from 'react-resizable-panels';\nimport { Panel, usePanelRef } from 'react-resizable-panels';\nimport { PanelEdgeIcon } from './panel-edge-icon';\nimport { panelIconButtonClass } from './panel-icon-button';\nimport { useClampedElementCursor } from './use-clamped-element-cursor';\nimport { Icon } from '@/ds/icons';\nimport { cn } from '@/lib/utils';\n\nexport interface CollapsiblePanelProps extends PanelProps {\n  direction: 'left' | 'right';\n}\n\n// The expand pill follows the pointer vertically along the edge, clamped so\n// it never bleeds past the strip's ends.\nconst PILL_EDGE_MARGIN = 22;\n\ntype PanelElementRef = RefObject<HTMLDivElement | null>;\n\nconst useCollapsedEdgePill = ({\n  collapsed,\n  direction,\n  elementRef,\n}: {\n  collapsed: boolean;\n  direction: CollapsiblePanelProps['direction'];\n  elementRef: PanelElementRef;\n}) => {\n  const expandButtonRef = useRef<HTMLButtonElement | null>(null);\n  const pillRef = useRef<HTMLSpanElement | null>(null);\n  const {\n    beginTracking: beginPillTracking,\n    elementRef: stripRef,\n    endTracking: endPillTracking,\n    updateTracking: updatePillTracking,\n  } = useClampedElementCursor<HTMLButtonElement>({\n    axis: 'y',\n    margin: PILL_EDGE_MARGIN,\n    variableName: '--pill-y',\n  });\n\n  const setEdgeHovered = useCallback((hovered: boolean) => {\n    const expandButton = expandButtonRef.current;\n    const pill = pillRef.current;\n    if (expandButton) expandButton.dataset.edgeHovered = hovered ? 'true' : 'false';\n    if (pill) pill.dataset.edgeHovered = hovered ? 'true' : 'false';\n  }, []);\n\n  const spawnPill = useCallback(\n    (point: { clientX: number; clientY: number }) => {\n      const pill = pillRef.current;\n      if (!pill) return;\n      beginPillTracking(point);\n      pill.style.transitionProperty = 'opacity, translate';\n      // Re-enable top transitions after the browser commits the pill's new\n      // starting position; otherwise it travels in from its previous position.\n      requestAnimationFrame(() => {\n        pill.style.transitionProperty = '';\n      });\n    },\n    [beginPillTracking],\n  );\n\n  const trackPillPosition = useCallback(\n    (point: { clientX: number; clientY: number }) => {\n      updatePillTracking(point);\n    },\n    [updatePillTracking],\n  );\n\n  useEffect(() => {\n    if (!collapsed) return;\n    const panelElement = elementRef.current;\n    const separator = direction === 'left' ? panelElement?.nextElementSibling : panelElement?.previousElementSibling;\n    if (!(separator instanceof HTMLElement) || !separator.hasAttribute('data-separator')) return;\n\n    const show = (event: PointerEvent) => {\n      setEdgeHovered(true);\n      spawnPill(event);\n    };\n    const hide = () => {\n      setEdgeHovered(false);\n      endPillTracking();\n    };\n    const follow = (event: PointerEvent) => trackPillPosition(event);\n    separator.addEventListener('pointerenter', show);\n    separator.addEventListener('pointerleave', hide);\n    separator.addEventListener('pointermove', follow);\n    return () => {\n      separator.removeEventListener('pointerenter', show);\n      separator.removeEventListener('pointerleave', hide);\n      separator.removeEventListener('pointermove', follow);\n      setEdgeHovered(false);\n      endPillTracking();\n    };\n  }, [collapsed, direction, elementRef, endPillTracking, setEdgeHovered, spawnPill, trackPillPosition]);\n\n  return { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition };\n};\n\nexport const CollapsiblePanel = ({\n  collapsedSize,\n  children,\n  direction,\n  className,\n  onResize,\n  style,\n  minSize,\n  ...props\n}: CollapsiblePanelProps) => {\n  const [collapsed, setCollapsed] = useState(false);\n  const panelRef = usePanelRef();\n  const elementRef = useRef<HTMLDivElement | null>(null);\n  const { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition } = useCollapsedEdgePill({\n    collapsed,\n    direction,\n    elementRef,\n  });\n\n  const expand = () => panelRef.current?.expand();\n\n  const numericMinSize = typeof minSize === 'number' ? minSize : null;\n\n  return (\n    <Panel\n      panelRef={panelRef}\n      elementRef={elementRef}\n      collapsedSize={collapsedSize}\n      minSize={minSize}\n      className={cn('relative', className)}\n      style={\n        {\n          overflow: collapsed ? 'visible' : 'hidden',\n          '--panel-min-w': numericMinSize ? `${numericMinSize}px` : undefined,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n      onResize={(size, id, previousSize) => {\n        onResize?.(size, id, previousSize);\n        if (typeof collapsedSize !== 'number') return;\n        setCollapsed(size.inPixels <= collapsedSize);\n      }}\n    >\n      <div\n        hidden={collapsed}\n        style={{ minWidth: 'var(--panel-min-w)' }}\n        className={cn('absolute inset-y-0 w-full overflow-hidden', direction === 'left' ? 'left-0' : 'right-0')}\n      >\n        {children}\n      </div>\n\n      {collapsed && (\n        <>\n          <button\n            ref={expandButtonRef}\n            type=\"button\"\n            aria-label=\"Expand panel\"\n            onClick={expand}\n            className={cn(\n              panelIconButtonClass,\n              'absolute top-2 z-10',\n              'transition-[color,background-color,opacity] duration-300 starting:opacity-0',\n              direction === 'left' ? 'left-2' : 'right-2',\n              'data-[edge-hovered=true]:text-neutral6',\n            )}\n          >\n            <Icon>\n              <PanelEdgeIcon side={direction} />\n            </Icon>\n          </button>\n\n          <button\n            ref={stripRef}\n            type=\"button\"\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            onClick={expand}\n            onPointerEnter={event => spawnPill(event)}\n            onPointerLeave={endPillTracking}\n            onPointerMove={event => trackPillPosition(event)}\n            style={{ '--pill-y': '50%' } as CSSProperties}\n            className={cn(\n              'group/expand absolute inset-y-0 z-10 w-4 cursor-pointer focus-visible:outline-hidden',\n              direction === 'left' ? 'left-1' : 'right-1',\n            )}\n          >\n            <span\n              ref={pillRef}\n              style={{ top: 'var(--pill-y)' }}\n              className={cn(\n                'absolute flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-neutral6 text-surface1 shadow-dialog',\n                'pointer-events-none opacity-0 transition-[opacity,translate,top] duration-150 ease-out-custom motion-reduce:transition-none',\n                direction === 'left' ? 'left-0.5 -translate-x-1' : 'right-0.5 translate-x-1',\n                'group-hover/expand:pointer-events-auto group-hover/expand:translate-x-0 group-hover/expand:opacity-100',\n                'group-active/expand:bg-neutral6/80',\n                'data-[edge-hovered=true]:pointer-events-auto data-[edge-hovered=true]:translate-x-0 data-[edge-hovered=true]:opacity-100',\n              )}\n            >\n              <Icon>{direction === 'left' ? <ChevronRight /> : <ChevronLeft />}</Icon>\n            </span>\n          </button>\n        </>\n      )}\n    </Panel>\n  );\n};\n"],"names":["useRef","useClampedElementCursor","useCallback","useEffect","useState","usePanelRef","jsxs","Panel","cn","jsx","Fragment","panelIconButtonClass","Icon","PanelEdgeIcon","ChevronRight","ChevronLeft"],"mappings":"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"}
+{"version":3,"file":"collapsible-panel.cjs.js","sources":["../../src/lib/resize/collapsible-panel.tsx"],"sourcesContent":["import type { CSSProperties, Ref } from 'react';\nimport { useImperativeHandle, useRef, useState } from 'react';\nimport type { PanelProps } from 'react-resizable-panels';\nimport { Panel, usePanelRef } from 'react-resizable-panels';\nimport { PanelEdgeIcon } from './panel-edge-icon';\nimport { panelIconButtonClass } from './panel-icon-button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons';\nimport { cn } from '@/lib/utils';\n\n/** Programmatic control over a CollapsiblePanel (distinct from the library's panel handle). */\nexport interface CollapsiblePanelHandle {\n  collapse: () => void;\n  /** Reopens at the width the panel had when `collapse()` was called, else at `defaultSize`. */\n  expand: () => void;\n}\n\nexport interface CollapsiblePanelProps extends PanelProps {\n  direction: 'left' | 'right';\n  ref?: Ref<CollapsiblePanelHandle>;\n}\n\nexport const CollapsiblePanel = ({\n  collapsedSize,\n  children,\n  direction,\n  className,\n  onResize,\n  style,\n  minSize,\n  defaultSize,\n  panelRef: externalPanelRef,\n  ref,\n  ...props\n}: CollapsiblePanelProps) => {\n  // Physical state of the panel, as reported by onResize. It drives what is rendered.\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  // Width the panel had right before we collapsed it. The library's `expand()`\n  // relies on its own \"most recent size\", which is unreliable when the panel\n  // mounts already collapsed from a persisted layout (it opens at `minSize`).\n  const sizeBeforeCollapseRef = useRef<number | null>(null);\n  const internalPanelRef = usePanelRef();\n  const panelRef = externalPanelRef ?? internalPanelRef;\n\n  const collapse = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    sizeBeforeCollapseRef.current = panel.getSize().inPixels;\n    panel.collapse();\n  };\n\n  const expand = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    const target = sizeBeforeCollapseRef.current ?? defaultSize;\n    if (target === undefined) {\n      panel.expand();\n      return;\n    }\n    panel.resize(target);\n  };\n\n  useImperativeHandle(ref, () => ({ collapse, expand }));\n\n  const numericMinSize = typeof minSize === 'number' ? minSize : null;\n\n  return (\n    <Panel\n      panelRef={panelRef}\n      collapsedSize={collapsedSize}\n      minSize={minSize}\n      defaultSize={defaultSize}\n      className={cn('relative', className)}\n      style={\n        {\n          // The expand button must remain visible once the panel is at zero width.\n          overflow: isCollapsed ? 'visible' : 'hidden',\n          '--panel-min-w': numericMinSize ? `${numericMinSize}px` : undefined,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n      onResize={(size, id, previousSize) => {\n        onResize?.(size, id, previousSize);\n        if (typeof collapsedSize !== 'number') return;\n        setIsCollapsed(size.inPixels <= collapsedSize);\n      }}\n    >\n      <div\n        hidden={isCollapsed}\n        style={{ minWidth: 'var(--panel-min-w)' }}\n        className={cn('absolute inset-y-0 w-full overflow-hidden', direction === 'left' ? 'left-0' : 'right-0')}\n      >\n        {children}\n      </div>\n\n      {isCollapsed && (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              type=\"button\"\n              aria-label=\"Expand panel\"\n              onClick={expand}\n              className={cn(\n                panelIconButtonClass,\n                'absolute top-2 z-10',\n                'transition-[color,background-color,opacity] duration-300 starting:opacity-0',\n                direction === 'left' ? 'left-2' : 'right-2',\n              )}\n            >\n              <Icon>\n                <PanelEdgeIcon side={direction} />\n              </Icon>\n            </button>\n          </TooltipTrigger>\n          <TooltipContent side={direction === 'left' ? 'right' : 'left'}>Expand panel</TooltipContent>\n        </Tooltip>\n      )}\n    </Panel>\n  );\n};\n"],"names":["useState","useRef","usePanelRef","useImperativeHandle","jsxs","Panel","cn","jsx","Tooltip","TooltipTrigger","panelIconButtonClass","Icon","PanelEdgeIcon","TooltipContent"],"mappings":"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"}

package/dist/resize/collapsible-panel.es.js

@@ -1,82 +1,13 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ChevronRight, ChevronLeft } from 'lucide-react';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useImperativeHandle } from 'react';
 import { usePanelRef, Panel } from 'react-resizable-panels';
 import { PanelEdgeIcon } from './panel-edge-icon.es.js';
 import { panelIconButtonClass } from './panel-icon-button.es.js';
-import { useClampedElementCursor } from './use-clamped-element-cursor.es.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-Bi0pDO5P.js';
 import { Icon } from '../icons/Icon.es.js';
+import 'lucide-react';
 import { c as cn } from '../cn-B4oPhFx9.js';
 
-const PILL_EDGE_MARGIN = 22;
-const useCollapsedEdgePill = ({
-  collapsed,
-  direction,
-  elementRef
-}) => {
-  const expandButtonRef = useRef(null);
-  const pillRef = useRef(null);
-  const {
-    beginTracking: beginPillTracking,
-    elementRef: stripRef,
-    endTracking: endPillTracking,
-    updateTracking: updatePillTracking
-  } = useClampedElementCursor({
-    axis: "y",
-    margin: PILL_EDGE_MARGIN,
-    variableName: "--pill-y"
-  });
-  const setEdgeHovered = useCallback((hovered) => {
-    const expandButton = expandButtonRef.current;
-    const pill = pillRef.current;
-    if (expandButton) expandButton.dataset.edgeHovered = hovered ? "true" : "false";
-    if (pill) pill.dataset.edgeHovered = hovered ? "true" : "false";
-  }, []);
-  const spawnPill = useCallback(
-    (point) => {
-      const pill = pillRef.current;
-      if (!pill) return;
-      beginPillTracking(point);
-      pill.style.transitionProperty = "opacity, translate";
-      requestAnimationFrame(() => {
-        pill.style.transitionProperty = "";
-      });
-    },
-    [beginPillTracking]
-  );
-  const trackPillPosition = useCallback(
-    (point) => {
-      updatePillTracking(point);
-    },
-    [updatePillTracking]
-  );
-  useEffect(() => {
-    if (!collapsed) return;
-    const panelElement = elementRef.current;
-    const separator = direction === "left" ? panelElement?.nextElementSibling : panelElement?.previousElementSibling;
-    if (!(separator instanceof HTMLElement) || !separator.hasAttribute("data-separator")) return;
-    const show = (event) => {
-      setEdgeHovered(true);
-      spawnPill(event);
-    };
-    const hide = () => {
-      setEdgeHovered(false);
-      endPillTracking();
-    };
-    const follow = (event) => trackPillPosition(event);
-    separator.addEventListener("pointerenter", show);
-    separator.addEventListener("pointerleave", hide);
-    separator.addEventListener("pointermove", follow);
-    return () => {
-      separator.removeEventListener("pointerenter", show);
-      separator.removeEventListener("pointerleave", hide);
-      separator.removeEventListener("pointermove", follow);
-      setEdgeHovered(false);
-      endPillTracking();
-    };
-  }, [collapsed, direction, elementRef, endPillTracking, setEdgeHovered, spawnPill, trackPillPosition]);
-  return { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition };
-};
 const CollapsiblePanel = ({
   collapsedSize,
   children,
@@ -85,28 +16,44 @@ const CollapsiblePanel = ({
   onResize,
   style,
   minSize,
+  defaultSize,
+  panelRef: externalPanelRef,
+  ref,
   ...props
 }) => {
-  const [collapsed, setCollapsed] = useState(false);
-  const panelRef = usePanelRef();
-  const elementRef = useRef(null);
-  const { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition } = useCollapsedEdgePill({
-    collapsed,
-    direction,
-    elementRef
-  });
-  const expand = () => panelRef.current?.expand();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const sizeBeforeCollapseRef = useRef(null);
+  const internalPanelRef = usePanelRef();
+  const panelRef = externalPanelRef ?? internalPanelRef;
+  const collapse = () => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    sizeBeforeCollapseRef.current = panel.getSize().inPixels;
+    panel.collapse();
+  };
+  const expand = () => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    const target = sizeBeforeCollapseRef.current ?? defaultSize;
+    if (target === void 0) {
+      panel.expand();
+      return;
+    }
+    panel.resize(target);
+  };
+  useImperativeHandle(ref, () => ({ collapse, expand }));
   const numericMinSize = typeof minSize === "number" ? minSize : null;
   return /* @__PURE__ */ jsxs(
     Panel,
     {
       panelRef,
-      elementRef,
       collapsedSize,
       minSize,
+      defaultSize,
       className: cn("relative", className),
       style: {
-        overflow: collapsed ? "visible" : "hidden",
+        // The expand button must remain visible once the panel is at zero width.
+        overflow: isCollapsed ? "visible" : "hidden",
         "--panel-min-w": numericMinSize ? `${numericMinSize}px` : void 0,
         ...style
       },
@@ -114,23 +61,22 @@ const CollapsiblePanel = ({
       onResize: (size, id, previousSize) => {
         onResize?.(size, id, previousSize);
         if (typeof collapsedSize !== "number") return;
-        setCollapsed(size.inPixels <= collapsedSize);
+        setIsCollapsed(size.inPixels <= collapsedSize);
       },
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
-            hidden: collapsed,
+            hidden: isCollapsed,
             style: { minWidth: "var(--panel-min-w)" },
             className: cn("absolute inset-y-0 w-full overflow-hidden", direction === "left" ? "left-0" : "right-0"),
             children
           }
         ),
-        collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
+        isCollapsed && /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             "button",
             {
-              ref: expandButtonRef,
               type: "button",
               "aria-label": "Expand panel",
               onClick: expand,
@@ -138,46 +84,12 @@ const CollapsiblePanel = ({
                 panelIconButtonClass,
                 "absolute top-2 z-10",
                 "transition-[color,background-color,opacity] duration-300 starting:opacity-0",
-                direction === "left" ? "left-2" : "right-2",
-                "data-[edge-hovered=true]:text-neutral6"
+                direction === "left" ? "left-2" : "right-2"
               ),
               children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(PanelEdgeIcon, { side: direction }) })
             }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              ref: stripRef,
-              type: "button",
-              tabIndex: -1,
-              "aria-hidden": "true",
-              onClick: expand,
-              onPointerEnter: (event) => spawnPill(event),
-              onPointerLeave: endPillTracking,
-              onPointerMove: (event) => trackPillPosition(event),
-              style: { "--pill-y": "50%" },
-              className: cn(
-                "group/expand absolute inset-y-0 z-10 w-4 cursor-pointer focus-visible:outline-hidden",
-                direction === "left" ? "left-1" : "right-1"
-              ),
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  ref: pillRef,
-                  style: { top: "var(--pill-y)" },
-                  className: cn(
-                    "absolute flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-neutral6 text-surface1 shadow-dialog",
-                    "pointer-events-none opacity-0 transition-[opacity,translate,top] duration-150 ease-out-custom motion-reduce:transition-none",
-                    direction === "left" ? "left-0.5 -translate-x-1" : "right-0.5 translate-x-1",
-                    "group-hover/expand:pointer-events-auto group-hover/expand:translate-x-0 group-hover/expand:opacity-100",
-                    "group-active/expand:bg-neutral6/80",
-                    "data-[edge-hovered=true]:pointer-events-auto data-[edge-hovered=true]:translate-x-0 data-[edge-hovered=true]:opacity-100"
-                  ),
-                  children: /* @__PURE__ */ jsx(Icon, { children: direction === "left" ? /* @__PURE__ */ jsx(ChevronRight, {}) : /* @__PURE__ */ jsx(ChevronLeft, {}) })
-                }
-              )
-            }
-          )
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: direction === "left" ? "right" : "left", children: "Expand panel" })
         ] })
       ]
     }

package/dist/resize/collapsible-panel.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-panel.es.js","sources":["../../src/lib/resize/collapsible-panel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, RefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport type { PanelProps } from 'react-resizable-panels';\nimport { Panel, usePanelRef } from 'react-resizable-panels';\nimport { PanelEdgeIcon } from './panel-edge-icon';\nimport { panelIconButtonClass } from './panel-icon-button';\nimport { useClampedElementCursor } from './use-clamped-element-cursor';\nimport { Icon } from '@/ds/icons';\nimport { cn } from '@/lib/utils';\n\nexport interface CollapsiblePanelProps extends PanelProps {\n  direction: 'left' | 'right';\n}\n\n// The expand pill follows the pointer vertically along the edge, clamped so\n// it never bleeds past the strip's ends.\nconst PILL_EDGE_MARGIN = 22;\n\ntype PanelElementRef = RefObject<HTMLDivElement | null>;\n\nconst useCollapsedEdgePill = ({\n  collapsed,\n  direction,\n  elementRef,\n}: {\n  collapsed: boolean;\n  direction: CollapsiblePanelProps['direction'];\n  elementRef: PanelElementRef;\n}) => {\n  const expandButtonRef = useRef<HTMLButtonElement | null>(null);\n  const pillRef = useRef<HTMLSpanElement | null>(null);\n  const {\n    beginTracking: beginPillTracking,\n    elementRef: stripRef,\n    endTracking: endPillTracking,\n    updateTracking: updatePillTracking,\n  } = useClampedElementCursor<HTMLButtonElement>({\n    axis: 'y',\n    margin: PILL_EDGE_MARGIN,\n    variableName: '--pill-y',\n  });\n\n  const setEdgeHovered = useCallback((hovered: boolean) => {\n    const expandButton = expandButtonRef.current;\n    const pill = pillRef.current;\n    if (expandButton) expandButton.dataset.edgeHovered = hovered ? 'true' : 'false';\n    if (pill) pill.dataset.edgeHovered = hovered ? 'true' : 'false';\n  }, []);\n\n  const spawnPill = useCallback(\n    (point: { clientX: number; clientY: number }) => {\n      const pill = pillRef.current;\n      if (!pill) return;\n      beginPillTracking(point);\n      pill.style.transitionProperty = 'opacity, translate';\n      // Re-enable top transitions after the browser commits the pill's new\n      // starting position; otherwise it travels in from its previous position.\n      requestAnimationFrame(() => {\n        pill.style.transitionProperty = '';\n      });\n    },\n    [beginPillTracking],\n  );\n\n  const trackPillPosition = useCallback(\n    (point: { clientX: number; clientY: number }) => {\n      updatePillTracking(point);\n    },\n    [updatePillTracking],\n  );\n\n  useEffect(() => {\n    if (!collapsed) return;\n    const panelElement = elementRef.current;\n    const separator = direction === 'left' ? panelElement?.nextElementSibling : panelElement?.previousElementSibling;\n    if (!(separator instanceof HTMLElement) || !separator.hasAttribute('data-separator')) return;\n\n    const show = (event: PointerEvent) => {\n      setEdgeHovered(true);\n      spawnPill(event);\n    };\n    const hide = () => {\n      setEdgeHovered(false);\n      endPillTracking();\n    };\n    const follow = (event: PointerEvent) => trackPillPosition(event);\n    separator.addEventListener('pointerenter', show);\n    separator.addEventListener('pointerleave', hide);\n    separator.addEventListener('pointermove', follow);\n    return () => {\n      separator.removeEventListener('pointerenter', show);\n      separator.removeEventListener('pointerleave', hide);\n      separator.removeEventListener('pointermove', follow);\n      setEdgeHovered(false);\n      endPillTracking();\n    };\n  }, [collapsed, direction, elementRef, endPillTracking, setEdgeHovered, spawnPill, trackPillPosition]);\n\n  return { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition };\n};\n\nexport const CollapsiblePanel = ({\n  collapsedSize,\n  children,\n  direction,\n  className,\n  onResize,\n  style,\n  minSize,\n  ...props\n}: CollapsiblePanelProps) => {\n  const [collapsed, setCollapsed] = useState(false);\n  const panelRef = usePanelRef();\n  const elementRef = useRef<HTMLDivElement | null>(null);\n  const { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition } = useCollapsedEdgePill({\n    collapsed,\n    direction,\n    elementRef,\n  });\n\n  const expand = () => panelRef.current?.expand();\n\n  const numericMinSize = typeof minSize === 'number' ? minSize : null;\n\n  return (\n    <Panel\n      panelRef={panelRef}\n      elementRef={elementRef}\n      collapsedSize={collapsedSize}\n      minSize={minSize}\n      className={cn('relative', className)}\n      style={\n        {\n          overflow: collapsed ? 'visible' : 'hidden',\n          '--panel-min-w': numericMinSize ? `${numericMinSize}px` : undefined,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n      onResize={(size, id, previousSize) => {\n        onResize?.(size, id, previousSize);\n        if (typeof collapsedSize !== 'number') return;\n        setCollapsed(size.inPixels <= collapsedSize);\n      }}\n    >\n      <div\n        hidden={collapsed}\n        style={{ minWidth: 'var(--panel-min-w)' }}\n        className={cn('absolute inset-y-0 w-full overflow-hidden', direction === 'left' ? 'left-0' : 'right-0')}\n      >\n        {children}\n      </div>\n\n      {collapsed && (\n        <>\n          <button\n            ref={expandButtonRef}\n            type=\"button\"\n            aria-label=\"Expand panel\"\n            onClick={expand}\n            className={cn(\n              panelIconButtonClass,\n              'absolute top-2 z-10',\n              'transition-[color,background-color,opacity] duration-300 starting:opacity-0',\n              direction === 'left' ? 'left-2' : 'right-2',\n              'data-[edge-hovered=true]:text-neutral6',\n            )}\n          >\n            <Icon>\n              <PanelEdgeIcon side={direction} />\n            </Icon>\n          </button>\n\n          <button\n            ref={stripRef}\n            type=\"button\"\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            onClick={expand}\n            onPointerEnter={event => spawnPill(event)}\n            onPointerLeave={endPillTracking}\n            onPointerMove={event => trackPillPosition(event)}\n            style={{ '--pill-y': '50%' } as CSSProperties}\n            className={cn(\n              'group/expand absolute inset-y-0 z-10 w-4 cursor-pointer focus-visible:outline-hidden',\n              direction === 'left' ? 'left-1' : 'right-1',\n            )}\n          >\n            <span\n              ref={pillRef}\n              style={{ top: 'var(--pill-y)' }}\n              className={cn(\n                'absolute flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-neutral6 text-surface1 shadow-dialog',\n                'pointer-events-none opacity-0 transition-[opacity,translate,top] duration-150 ease-out-custom motion-reduce:transition-none',\n                direction === 'left' ? 'left-0.5 -translate-x-1' : 'right-0.5 translate-x-1',\n                'group-hover/expand:pointer-events-auto group-hover/expand:translate-x-0 group-hover/expand:opacity-100',\n                'group-active/expand:bg-neutral6/80',\n                'data-[edge-hovered=true]:pointer-events-auto data-[edge-hovered=true]:translate-x-0 data-[edge-hovered=true]:opacity-100',\n              )}\n            >\n              <Icon>{direction === 'left' ? <ChevronRight /> : <ChevronLeft />}</Icon>\n            </span>\n          </button>\n        </>\n      )}\n    </Panel>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"collapsible-panel.es.js","sources":["../../src/lib/resize/collapsible-panel.tsx"],"sourcesContent":["import type { CSSProperties, Ref } from 'react';\nimport { useImperativeHandle, useRef, useState } from 'react';\nimport type { PanelProps } from 'react-resizable-panels';\nimport { Panel, usePanelRef } from 'react-resizable-panels';\nimport { PanelEdgeIcon } from './panel-edge-icon';\nimport { panelIconButtonClass } from './panel-icon-button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons';\nimport { cn } from '@/lib/utils';\n\n/** Programmatic control over a CollapsiblePanel (distinct from the library's panel handle). */\nexport interface CollapsiblePanelHandle {\n  collapse: () => void;\n  /** Reopens at the width the panel had when `collapse()` was called, else at `defaultSize`. */\n  expand: () => void;\n}\n\nexport interface CollapsiblePanelProps extends PanelProps {\n  direction: 'left' | 'right';\n  ref?: Ref<CollapsiblePanelHandle>;\n}\n\nexport const CollapsiblePanel = ({\n  collapsedSize,\n  children,\n  direction,\n  className,\n  onResize,\n  style,\n  minSize,\n  defaultSize,\n  panelRef: externalPanelRef,\n  ref,\n  ...props\n}: CollapsiblePanelProps) => {\n  // Physical state of the panel, as reported by onResize. It drives what is rendered.\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  // Width the panel had right before we collapsed it. The library's `expand()`\n  // relies on its own \"most recent size\", which is unreliable when the panel\n  // mounts already collapsed from a persisted layout (it opens at `minSize`).\n  const sizeBeforeCollapseRef = useRef<number | null>(null);\n  const internalPanelRef = usePanelRef();\n  const panelRef = externalPanelRef ?? internalPanelRef;\n\n  const collapse = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    sizeBeforeCollapseRef.current = panel.getSize().inPixels;\n    panel.collapse();\n  };\n\n  const expand = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    const target = sizeBeforeCollapseRef.current ?? defaultSize;\n    if (target === undefined) {\n      panel.expand();\n      return;\n    }\n    panel.resize(target);\n  };\n\n  useImperativeHandle(ref, () => ({ collapse, expand }));\n\n  const numericMinSize = typeof minSize === 'number' ? minSize : null;\n\n  return (\n    <Panel\n      panelRef={panelRef}\n      collapsedSize={collapsedSize}\n      minSize={minSize}\n      defaultSize={defaultSize}\n      className={cn('relative', className)}\n      style={\n        {\n          // The expand button must remain visible once the panel is at zero width.\n          overflow: isCollapsed ? 'visible' : 'hidden',\n          '--panel-min-w': numericMinSize ? `${numericMinSize}px` : undefined,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n      onResize={(size, id, previousSize) => {\n        onResize?.(size, id, previousSize);\n        if (typeof collapsedSize !== 'number') return;\n        setIsCollapsed(size.inPixels <= collapsedSize);\n      }}\n    >\n      <div\n        hidden={isCollapsed}\n        style={{ minWidth: 'var(--panel-min-w)' }}\n        className={cn('absolute inset-y-0 w-full overflow-hidden', direction === 'left' ? 'left-0' : 'right-0')}\n      >\n        {children}\n      </div>\n\n      {isCollapsed && (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              type=\"button\"\n              aria-label=\"Expand panel\"\n              onClick={expand}\n              className={cn(\n                panelIconButtonClass,\n                'absolute top-2 z-10',\n                'transition-[color,background-color,opacity] duration-300 starting:opacity-0',\n                direction === 'left' ? 'left-2' : 'right-2',\n              )}\n            >\n              <Icon>\n                <PanelEdgeIcon side={direction} />\n              </Icon>\n            </button>\n          </TooltipTrigger>\n          <TooltipContent side={direction === 'left' ? 'right' : 'left'}>Expand panel</TooltipContent>\n        </Tooltip>\n      )}\n    </Panel>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/src/lib/resize/collapsible-panel.d.ts

@@ -1,5 +1,13 @@
+import { Ref } from 'react';
 import { PanelProps } from 'react-resizable-panels';
+/** Programmatic control over a CollapsiblePanel (distinct from the library's panel handle). */
+export interface CollapsiblePanelHandle {
+    collapse: () => void;
+    /** Reopens at the width the panel had when `collapse()` was called, else at `defaultSize`. */
+    expand: () => void;
+}
 export interface CollapsiblePanelProps extends PanelProps {
     direction: 'left' | 'right';
+    ref?: Ref<CollapsiblePanelHandle>;
 }
-export declare const CollapsiblePanel: ({ collapsedSize, children, direction, className, onResize, style, minSize, ...props }: CollapsiblePanelProps) => import("react").JSX.Element;
+export declare const CollapsiblePanel: ({ collapsedSize, children, direction, className, onResize, style, minSize, defaultSize, panelRef: externalPanelRef, ref, ...props }: CollapsiblePanelProps) => import("react").JSX.Element;

package/dist/style.css

@@ -811,10 +811,6 @@
     right: var(--spacing-0);
   }
 
-  .right-0\.5 {
-    right: var(--spacing-0_5);
-  }
-
   .right-1 {
     right: var(--spacing-1);
   }
@@ -2980,11 +2976,6 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .-translate-x-1 {
-    --tw-translate-x: calc(var(--spacing-1) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2995,11 +2986,6 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .translate-x-1 {
-    --tw-translate-x: var(--spacing-1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   .translate-x-1\/2 {
     --tw-translate-x: calc(1 / 2 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -6464,12 +6450,6 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
-  .transition-\[opacity\,translate\,top\] {
-    transition-property: opacity, translate, top;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-
   .transition-\[padding\] {
     transition-property: padding;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -6799,16 +6779,7 @@
       background-color: var(--color-surface4);
     }
 
-    .group-hover\/expand\:pointer-events-auto:is(:where(.group\/expand):hover *) {
-      pointer-events: auto;
-    }
-
-    .group-hover\/expand\:translate-x-0:is(:where(.group\/expand):hover *) {
-      --tw-translate-x: var(--spacing-0);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .group-hover\/expand\:opacity-100:is(:where(.group\/expand):hover *), .group-hover\/row\:opacity-100:is(:where(.group\/row):hover *) {
+    .group-hover\/row\:opacity-100:is(:where(.group\/row):hover *) {
       opacity: 1;
     }
 
@@ -6882,16 +6853,6 @@
     background-color: var(--color-surface4);
   }
 
-  .group-active\/expand\:bg-neutral6\/80:is(:where(.group\/expand):active *) {
-    background-color: var(--color-neutral6);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .group-active\/expand\:bg-neutral6\/80:is(:where(.group\/expand):active *) {
-      background-color: color-mix(in oklab, var(--color-neutral6) 80%, transparent);
-    }
-  }
-
   .group-active\/switch\:w-6:is(:where(.group\/switch):active *) {
     width: var(--spacing-6);
   }
@@ -8789,23 +8750,6 @@
     opacity: .5;
   }
 
-  .data-\[edge-hovered\=true\]\:pointer-events-auto[data-edge-hovered="true"] {
-    pointer-events: auto;
-  }
-
-  .data-\[edge-hovered\=true\]\:translate-x-0[data-edge-hovered="true"] {
-    --tw-translate-x: var(--spacing-0);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
-  .data-\[edge-hovered\=true\]\:text-neutral6[data-edge-hovered="true"] {
-    color: var(--color-neutral6);
-  }
-
-  .data-\[edge-hovered\=true\]\:opacity-100[data-edge-hovered="true"] {
-    opacity: 1;
-  }
-
   .data-\[ending-style\]\:h-0[data-ending-style] {
     height: var(--spacing-0);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "53.1.0-alpha.3",
+  "version": "54.0.0",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
@@ -160,8 +160,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/react": "1.4.12-alpha.3",
-    "@mastra/client-js": "^1.44.1-alpha.3"
+    "@mastra/client-js": "^1.45.0",
+    "@mastra/react": "1.4.12"
   },
   "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.44.1-alpha.3",
-    "@internal/lint": "0.0.131",
-    "@mastra/core": "1.66.0-alpha.3",
-    "@mastra/memory": "1.29.0-alpha.2",
-    "@mastra/react": "1.4.12-alpha.3"
+    "@internal/lint": "0.0.132",
+    "@mastra/client-js": "^1.45.0",
+    "@mastra/core": "1.66.0",
+    "@mastra/memory": "1.29.0",
+    "@mastra/react": "1.4.12"
   },
   "homepage": "https://mastra.ai",
   "repository": {

package/dist/resize/use-clamped-element-cursor.cjs.js

@@ -1,56 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
-const readAxis = (point, rect, axis) => {
-  if (axis === "x") {
-    return { client: point.clientX, start: rect.left, size: rect.width };
-  }
-  return { client: point.clientY, start: rect.top, size: rect.height };
-};
-const getClampedElementCursorOffset = (point, rect, axis, margin = 0) => {
-  const { client, start, size } = readAxis(point, rect, axis);
-  return clamp(client - start, margin, Math.max(margin, size - margin));
-};
-const useClampedElementCursor = ({
-  axis,
-  margin = 0,
-  variableName
-}) => {
-  const elementRef = React.useRef(null);
-  const rectRef = React.useRef(null);
-  const writePosition = React.useCallback(
-    (point, refreshRect = false) => {
-      const element = elementRef.current;
-      if (!element) return;
-      const rect = refreshRect || !rectRef.current ? element.getBoundingClientRect() : rectRef.current;
-      rectRef.current = rect;
-      const offset = getClampedElementCursorOffset(point, rect, axis, margin);
-      element.style.setProperty(variableName, `${offset}px`);
-    },
-    [axis, margin, variableName]
-  );
-  const beginTracking = React.useCallback(
-    (point) => {
-      writePosition(point, true);
-    },
-    [writePosition]
-  );
-  const updateTracking = React.useCallback(
-    (point) => {
-      writePosition(point);
-    },
-    [writePosition]
-  );
-  const endTracking = React.useCallback(() => {
-    rectRef.current = null;
-  }, []);
-  return { beginTracking, elementRef, endTracking, updateTracking };
-};
-
-exports.getClampedElementCursorOffset = getClampedElementCursorOffset;
-exports.useClampedElementCursor = useClampedElementCursor;
-//# sourceMappingURL=use-clamped-element-cursor.cjs.js.map

package/dist/resize/use-clamped-element-cursor.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-clamped-element-cursor.cjs.js","sources":["../../src/lib/resize/use-clamped-element-cursor.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nexport interface ClientPoint {\n  clientX: number;\n  clientY: number;\n}\n\nexport interface UseClampedElementCursorOptions {\n  axis: 'x' | 'y';\n  margin?: number;\n  variableName: `--${string}`;\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst readAxis = (point: ClientPoint, rect: DOMRect, axis: 'x' | 'y') => {\n  if (axis === 'x') {\n    return { client: point.clientX, start: rect.left, size: rect.width };\n  }\n\n  return { client: point.clientY, start: rect.top, size: rect.height };\n};\n\nexport const getClampedElementCursorOffset = (point: ClientPoint, rect: DOMRect, axis: 'x' | 'y', margin = 0) => {\n  const { client, start, size } = readAxis(point, rect, axis);\n  return clamp(client - start, margin, Math.max(margin, size - margin));\n};\n\nexport const useClampedElementCursor = <TElement extends HTMLElement>({\n  axis,\n  margin = 0,\n  variableName,\n}: UseClampedElementCursorOptions) => {\n  const elementRef = useRef<TElement | null>(null);\n  const rectRef = useRef<DOMRect | null>(null);\n\n  const writePosition = useCallback(\n    (point: ClientPoint, refreshRect = false) => {\n      const element = elementRef.current;\n      if (!element) return;\n\n      const rect = refreshRect || !rectRef.current ? element.getBoundingClientRect() : rectRef.current;\n      rectRef.current = rect;\n\n      const offset = getClampedElementCursorOffset(point, rect, axis, margin);\n      element.style.setProperty(variableName, `${offset}px`);\n    },\n    [axis, margin, variableName],\n  );\n\n  const beginTracking = useCallback(\n    (point: ClientPoint) => {\n      writePosition(point, true);\n    },\n    [writePosition],\n  );\n\n  const updateTracking = useCallback(\n    (point: ClientPoint) => {\n      writePosition(point);\n    },\n    [writePosition],\n  );\n\n  const endTracking = useCallback(() => {\n    rectRef.current = null;\n  }, []);\n\n  return { beginTracking, elementRef, endTracking, updateTracking };\n};\n"],"names":["useRef","useCallback"],"mappings":";;;;;;AAaA,MAAM,KAAA,GAAQ,CAAC,KAAA,EAAe,GAAA,EAAa,GAAA,KAAgB,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,KAAK,CAAC,CAAA;AAE7F,MAAM,QAAA,GAAW,CAAC,KAAA,EAAoB,IAAA,EAAe,IAAA,KAAoB;AACvE,EAAA,IAAI,SAAS,GAAA,EAAK;AAChB,IAAA,OAAO,EAAE,QAAQ,KAAA,CAAM,OAAA,EAAS,OAAO,IAAA,CAAK,IAAA,EAAM,IAAA,EAAM,IAAA,CAAK,KAAA,EAAM;AAAA,EACrE;AAEA,EAAA,OAAO,EAAE,QAAQ,KAAA,CAAM,OAAA,EAAS,OAAO,IAAA,CAAK,GAAA,EAAK,IAAA,EAAM,IAAA,CAAK,MAAA,EAAO;AACrE,CAAA;AAEO,MAAM,gCAAgC,CAAC,KAAA,EAAoB,IAAA,EAAe,IAAA,EAAiB,SAAS,CAAA,KAAM;AAC/G,EAAA,MAAM,EAAE,QAAQ,KAAA,EAAO,IAAA,KAAS,QAAA,CAAS,KAAA,EAAO,MAAM,IAAI,CAAA;AAC1D,EAAA,OAAO,KAAA,CAAM,SAAS,KAAA,EAAO,MAAA,EAAQ,KAAK,GAAA,CAAI,MAAA,EAAQ,IAAA,GAAO,MAAM,CAAC,CAAA;AACtE;AAEO,MAAM,0BAA0B,CAA+B;AAAA,EACpE,IAAA;AAAA,EACA,MAAA,GAAS,CAAA;AAAA,EACT;AACF,CAAA,KAAsC;AACpC,EAAA,MAAM,UAAA,GAAaA,aAAwB,IAAI,CAAA;AAC/C,EAAA,MAAM,OAAA,GAAUA,aAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,aAAA,GAAgBC,iBAAA;AAAA,IACpB,CAAC,KAAA,EAAoB,WAAA,GAAc,KAAA,KAAU;AAC3C,MAAA,MAAM,UAAU,UAAA,CAAW,OAAA;AAC3B,MAAA,IAAI,CAAC,OAAA,EAAS;AAEd,MAAA,MAAM,IAAA,GAAO,eAAe,CAAC,OAAA,CAAQ,UAAU,OAAA,CAAQ,qBAAA,KAA0B,OAAA,CAAQ,OAAA;AACzF,MAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAElB,MAAA,MAAM,MAAA,GAAS,6BAAA,CAA8B,KAAA,EAAO,IAAA,EAAM,MAAM,MAAM,CAAA;AACtE,MAAA,OAAA,CAAQ,KAAA,CAAM,WAAA,CAAY,YAAA,EAAc,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI,CAAA;AAAA,IACvD,CAAA;AAAA,IACA,CAAC,IAAA,EAAM,MAAA,EAAQ,YAAY;AAAA,GAC7B;AAEA,EAAA,MAAM,aAAA,GAAgBA,iBAAA;AAAA,IACpB,CAAC,KAAA,KAAuB;AACtB,MAAA,aAAA,CAAc,OAAO,IAAI,CAAA;AAAA,IAC3B,CAAA;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,cAAA,GAAiBA,iBAAA;AAAA,IACrB,CAAC,KAAA,KAAuB;AACtB,MAAA,aAAA,CAAc,KAAK,CAAA;AAAA,IACrB,CAAA;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,WAAA,GAAcA,kBAAY,MAAM;AACpC,IAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,EAAE,aAAA,EAAe,UAAA,EAAY,WAAA,EAAa,cAAA,EAAe;AAClE;;;;;"}

package/dist/resize/use-clamped-element-cursor.d.ts

@@ -1,2 +0,0 @@
-export * from '../src/lib/resize/use-clamped-element-cursor'
-export {}

package/dist/resize/use-clamped-element-cursor.es.js

@@ -1,51 +0,0 @@
-import { useRef, useCallback } from 'react';
-
-const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
-const readAxis = (point, rect, axis) => {
-  if (axis === "x") {
-    return { client: point.clientX, start: rect.left, size: rect.width };
-  }
-  return { client: point.clientY, start: rect.top, size: rect.height };
-};
-const getClampedElementCursorOffset = (point, rect, axis, margin = 0) => {
-  const { client, start, size } = readAxis(point, rect, axis);
-  return clamp(client - start, margin, Math.max(margin, size - margin));
-};
-const useClampedElementCursor = ({
-  axis,
-  margin = 0,
-  variableName
-}) => {
-  const elementRef = useRef(null);
-  const rectRef = useRef(null);
-  const writePosition = useCallback(
-    (point, refreshRect = false) => {
-      const element = elementRef.current;
-      if (!element) return;
-      const rect = refreshRect || !rectRef.current ? element.getBoundingClientRect() : rectRef.current;
-      rectRef.current = rect;
-      const offset = getClampedElementCursorOffset(point, rect, axis, margin);
-      element.style.setProperty(variableName, `${offset}px`);
-    },
-    [axis, margin, variableName]
-  );
-  const beginTracking = useCallback(
-    (point) => {
-      writePosition(point, true);
-    },
-    [writePosition]
-  );
-  const updateTracking = useCallback(
-    (point) => {
-      writePosition(point);
-    },
-    [writePosition]
-  );
-  const endTracking = useCallback(() => {
-    rectRef.current = null;
-  }, []);
-  return { beginTracking, elementRef, endTracking, updateTracking };
-};
-
-export { getClampedElementCursorOffset, useClampedElementCursor };
-//# sourceMappingURL=use-clamped-element-cursor.es.js.map

package/dist/resize/use-clamped-element-cursor.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-clamped-element-cursor.es.js","sources":["../../src/lib/resize/use-clamped-element-cursor.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nexport interface ClientPoint {\n  clientX: number;\n  clientY: number;\n}\n\nexport interface UseClampedElementCursorOptions {\n  axis: 'x' | 'y';\n  margin?: number;\n  variableName: `--${string}`;\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst readAxis = (point: ClientPoint, rect: DOMRect, axis: 'x' | 'y') => {\n  if (axis === 'x') {\n    return { client: point.clientX, start: rect.left, size: rect.width };\n  }\n\n  return { client: point.clientY, start: rect.top, size: rect.height };\n};\n\nexport const getClampedElementCursorOffset = (point: ClientPoint, rect: DOMRect, axis: 'x' | 'y', margin = 0) => {\n  const { client, start, size } = readAxis(point, rect, axis);\n  return clamp(client - start, margin, Math.max(margin, size - margin));\n};\n\nexport const useClampedElementCursor = <TElement extends HTMLElement>({\n  axis,\n  margin = 0,\n  variableName,\n}: UseClampedElementCursorOptions) => {\n  const elementRef = useRef<TElement | null>(null);\n  const rectRef = useRef<DOMRect | null>(null);\n\n  const writePosition = useCallback(\n    (point: ClientPoint, refreshRect = false) => {\n      const element = elementRef.current;\n      if (!element) return;\n\n      const rect = refreshRect || !rectRef.current ? element.getBoundingClientRect() : rectRef.current;\n      rectRef.current = rect;\n\n      const offset = getClampedElementCursorOffset(point, rect, axis, margin);\n      element.style.setProperty(variableName, `${offset}px`);\n    },\n    [axis, margin, variableName],\n  );\n\n  const beginTracking = useCallback(\n    (point: ClientPoint) => {\n      writePosition(point, true);\n    },\n    [writePosition],\n  );\n\n  const updateTracking = useCallback(\n    (point: ClientPoint) => {\n      writePosition(point);\n    },\n    [writePosition],\n  );\n\n  const endTracking = useCallback(() => {\n    rectRef.current = null;\n  }, []);\n\n  return { beginTracking, elementRef, endTracking, updateTracking };\n};\n"],"names":[],"mappings":";;AAaA,MAAM,KAAA,GAAQ,CAAC,KAAA,EAAe,GAAA,EAAa,GAAA,KAAgB,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,KAAK,CAAC,CAAA;AAE7F,MAAM,QAAA,GAAW,CAAC,KAAA,EAAoB,IAAA,EAAe,IAAA,KAAoB;AACvE,EAAA,IAAI,SAAS,GAAA,EAAK;AAChB,IAAA,OAAO,EAAE,QAAQ,KAAA,CAAM,OAAA,EAAS,OAAO,IAAA,CAAK,IAAA,EAAM,IAAA,EAAM,IAAA,CAAK,KAAA,EAAM;AAAA,EACrE;AAEA,EAAA,OAAO,EAAE,QAAQ,KAAA,CAAM,OAAA,EAAS,OAAO,IAAA,CAAK,GAAA,EAAK,IAAA,EAAM,IAAA,CAAK,MAAA,EAAO;AACrE,CAAA;AAEO,MAAM,gCAAgC,CAAC,KAAA,EAAoB,IAAA,EAAe,IAAA,EAAiB,SAAS,CAAA,KAAM;AAC/G,EAAA,MAAM,EAAE,QAAQ,KAAA,EAAO,IAAA,KAAS,QAAA,CAAS,KAAA,EAAO,MAAM,IAAI,CAAA;AAC1D,EAAA,OAAO,KAAA,CAAM,SAAS,KAAA,EAAO,MAAA,EAAQ,KAAK,GAAA,CAAI,MAAA,EAAQ,IAAA,GAAO,MAAM,CAAC,CAAA;AACtE;AAEO,MAAM,0BAA0B,CAA+B;AAAA,EACpE,IAAA;AAAA,EACA,MAAA,GAAS,CAAA;AAAA,EACT;AACF,CAAA,KAAsC;AACpC,EAAA,MAAM,UAAA,GAAa,OAAwB,IAAI,CAAA;AAC/C,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,KAAA,EAAoB,WAAA,GAAc,KAAA,KAAU;AAC3C,MAAA,MAAM,UAAU,UAAA,CAAW,OAAA;AAC3B,MAAA,IAAI,CAAC,OAAA,EAAS;AAEd,MAAA,MAAM,IAAA,GAAO,eAAe,CAAC,OAAA,CAAQ,UAAU,OAAA,CAAQ,qBAAA,KAA0B,OAAA,CAAQ,OAAA;AACzF,MAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAElB,MAAA,MAAM,MAAA,GAAS,6BAAA,CAA8B,KAAA,EAAO,IAAA,EAAM,MAAM,MAAM,CAAA;AACtE,MAAA,OAAA,CAAQ,KAAA,CAAM,WAAA,CAAY,YAAA,EAAc,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI,CAAA;AAAA,IACvD,CAAA;AAAA,IACA,CAAC,IAAA,EAAM,MAAA,EAAQ,YAAY;AAAA,GAC7B;AAEA,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,KAAA,KAAuB;AACtB,MAAA,aAAA,CAAc,OAAO,IAAI,CAAA;AAAA,IAC3B,CAAA;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,cAAA,GAAiB,WAAA;AAAA,IACrB,CAAC,KAAA,KAAuB;AACtB,MAAA,aAAA,CAAc,KAAK,CAAA;AAAA,IACrB,CAAA;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,EAAE,aAAA,EAAe,UAAA,EAAY,WAAA,EAAa,cAAA,EAAe;AAClE;;;;"}

package/dist/src/lib/resize/use-clamped-element-cursor.d.ts

@@ -1,16 +0,0 @@
-export interface ClientPoint {
-    clientX: number;
-    clientY: number;
-}
-export interface UseClampedElementCursorOptions {
-    axis: 'x' | 'y';
-    margin?: number;
-    variableName: `--${string}`;
-}
-export declare const getClampedElementCursorOffset: (point: ClientPoint, rect: DOMRect, axis: "x" | "y", margin?: number) => number;
-export declare const useClampedElementCursor: <TElement extends HTMLElement>({ axis, margin, variableName, }: UseClampedElementCursorOptions) => {
-    beginTracking: (point: ClientPoint) => void;
-    elementRef: import('react').RefObject<TElement | null>;
-    endTracking: () => void;
-    updateTracking: (point: ClientPoint) => void;
-};