npm - @mastra/playground-ui - Versions diffs - 53.1.0-alpha.2 → 54.0.0-alpha.4 - Mend

@mastra/playground-ui 53.1.0-alpha.2 → 54.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"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/domains/traces/components/timeline-name-col.d.ts CHANGED Viewed

@@ -6,10 +6,11 @@ type TimelineNameColProps = {
     depth?: number;
     onSpanClick?: (id: string) => void;
     selectedSpanId?: string;
+    revealSpanId?: string;
     isLastChild?: boolean;
     hasChildren?: boolean;
     isRootSpan?: boolean;
     isExpanded?: boolean;
 };
-export declare function TimelineNameCol({ span, spanUI, isFaded, depth, onSpanClick, selectedSpanId, isLastChild, hasChildren: _hasChildren, isRootSpan, isExpanded: _isExpanded, }: TimelineNameColProps): import("react").JSX.Element;
+export declare function TimelineNameCol({ span, spanUI, isFaded, depth, onSpanClick, selectedSpanId, revealSpanId, isLastChild, hasChildren: _hasChildren, isRootSpan, isExpanded: _isExpanded, }: TimelineNameColProps): import("react").JSX.Element;
 export {};

package/dist/src/domains/traces/components/trace-timeline-span.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ type TraceTimelineSpanProps = {
     depth?: number;
     onSpanClick?: (id: string) => void;
     selectedSpanId?: string;
+    revealSpanId?: string;
     isLastChild?: boolean;
     overallLatency?: number;
     overallStartTime?: string;
@@ -15,5 +16,5 @@ type TraceTimelineSpanProps = {
     setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;
     chartWidth?: 'wide' | 'default';
 };
-export declare function TraceTimelineSpan({ span, siblings, depth, onSpanClick, selectedSpanId, isLastChild, overallLatency, overallStartTime, fadedTypes, searchPhrase, featuredSpanIds, expandedSpanIds, setExpandedSpanIds, chartWidth, }: TraceTimelineSpanProps): import("react").JSX.Element;
+export declare function TraceTimelineSpan({ span, siblings, depth, onSpanClick, selectedSpanId, revealSpanId, isLastChild, overallLatency, overallStartTime, fadedTypes, searchPhrase, featuredSpanIds, expandedSpanIds, setExpandedSpanIds, chartWidth, }: TraceTimelineSpanProps): import("react").JSX.Element;
 export {};

package/dist/src/domains/traces/components/trace-timeline.d.ts CHANGED Viewed

@@ -9,9 +9,11 @@ type TraceTimelineProps = {
     expandedSpanIds?: string[];
     setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;
     featuredSpanIds?: string[];
+    /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */
+    revealSpanId?: string;
     chartWidth?: 'wide' | 'default';
     /** Rendered full-width above the span type legend row. */
     leadingSlot?: ReactNode;
 };
-export declare function TraceTimeline({ hierarchicalSpans, onSpanClick, selectedSpanId, isLoading, fadedTypes, expandedSpanIds, setExpandedSpanIds, featuredSpanIds, chartWidth, leadingSlot, }: TraceTimelineProps): import("react").JSX.Element;
+export declare function TraceTimeline({ hierarchicalSpans, onSpanClick, selectedSpanId, isLoading, fadedTypes, expandedSpanIds, setExpandedSpanIds, featuredSpanIds, revealSpanId, chartWidth, leadingSlot, }: TraceTimelineProps): import("react").JSX.Element;
 export {};

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

@@ -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;