@mastra/playground-ui 30.0.0-alpha.2 → 30.0.0-alpha.3
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.
- package/CHANGELOG.md +57 -0
- package/dist/index.cjs.js +205 -46
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.css +300 -2
- package/dist/index.es.js +185 -46
- package/dist/index.es.js.map +1 -1
- package/dist/src/ds/components/Drawer/drawer.d.ts +90 -0
- package/dist/src/ds/components/Drawer/drawer.stories.d.ts +18 -0
- package/dist/src/ds/components/Drawer/index.d.ts +1 -0
- package/dist/src/ds/components/HoverCard/hover-card.d.ts +38 -0
- package/dist/src/ds/components/HoverCard/hover-card.stories.d.ts +8 -0
- package/dist/src/ds/components/HoverCard/index.d.ts +1 -0
- package/dist/src/ds/components/KeyValueList/key-value-list.stories.d.ts +5 -0
- package/dist/src/index.d.ts +2 -0
- package/package.json +6 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,62 @@
|
|
|
1
1
|
# @mastra/playground-ui
|
|
2
2
|
|
|
3
|
+
## 30.0.0-alpha.3
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Added a Drawer component — a panel that slides in from any edge of the screen with swipe-to-dismiss gestures. ([#16958](https://github.com/mastra-ai/mastra/pull/16958))
|
|
8
|
+
|
|
9
|
+
The Drawer can be anchored to any of the four screen edges and supports snap points, nested stacking, controlled state, non-modal mode, swipe-to-open areas, and detached triggers.
|
|
10
|
+
|
|
11
|
+
```tsx
|
|
12
|
+
import {
|
|
13
|
+
Drawer,
|
|
14
|
+
DrawerTrigger,
|
|
15
|
+
DrawerContent,
|
|
16
|
+
DrawerHeader,
|
|
17
|
+
DrawerTitle,
|
|
18
|
+
DrawerDescription,
|
|
19
|
+
DrawerFooter,
|
|
20
|
+
DrawerClose,
|
|
21
|
+
Button,
|
|
22
|
+
} from '@mastra/playground-ui';
|
|
23
|
+
|
|
24
|
+
<Drawer side="right">
|
|
25
|
+
<DrawerTrigger asChild>
|
|
26
|
+
<Button>Open</Button>
|
|
27
|
+
</DrawerTrigger>
|
|
28
|
+
<DrawerContent>
|
|
29
|
+
<DrawerHeader>
|
|
30
|
+
<DrawerTitle>Library</DrawerTitle>
|
|
31
|
+
<DrawerDescription>A panel that slides in from the right edge.</DrawerDescription>
|
|
32
|
+
</DrawerHeader>
|
|
33
|
+
<DrawerFooter>
|
|
34
|
+
<DrawerClose asChild>
|
|
35
|
+
<Button variant="outline">Close</Button>
|
|
36
|
+
</DrawerClose>
|
|
37
|
+
</DrawerFooter>
|
|
38
|
+
</DrawerContent>
|
|
39
|
+
</Drawer>;
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
- Added a reusable `HoverCard` component (`HoverCard`, `HoverCardTrigger`, `HoverCardContent`) built on Base UI. You can now use these exported components to add hover card interactions anywhere in your UI. ([#16919](https://github.com/mastra-ai/mastra/pull/16919))
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@mastra/playground-ui';
|
|
46
|
+
|
|
47
|
+
<HoverCard>
|
|
48
|
+
<HoverCardTrigger>Weather Agent</HoverCardTrigger>
|
|
49
|
+
<HoverCardContent>Answers questions about current conditions and forecasts.</HoverCardContent>
|
|
50
|
+
</HoverCard>;
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Patch Changes
|
|
54
|
+
|
|
55
|
+
- Updated dependencies [[`ac442a4`](https://github.com/mastra-ai/mastra/commit/ac442a42fda0354ac2bcea772bf6691cb3e9dbb3), [`1e5c067`](https://github.com/mastra-ai/mastra/commit/1e5c067d2e20a781af670578180d1ee249806d41), [`008baaf`](https://github.com/mastra-ai/mastra/commit/008baafd8d851f831407045aebead5a2e3342eff), [`8116436`](https://github.com/mastra-ai/mastra/commit/81164363eb225d774e41ff27da6a5ea611406688), [`c27c4b9`](https://github.com/mastra-ai/mastra/commit/c27c4b9f137df5414fca4e45896aceccff6b0ed5), [`08b3b59`](https://github.com/mastra-ai/mastra/commit/08b3b590dd960dee6c9a6e39272f8927d803db6e)]:
|
|
56
|
+
- @mastra/core@1.37.0-alpha.3
|
|
57
|
+
- @mastra/client-js@1.21.0-alpha.3
|
|
58
|
+
- @mastra/react@0.4.1-alpha.3
|
|
59
|
+
|
|
3
60
|
## 30.0.0-alpha.2
|
|
4
61
|
|
|
5
62
|
### Patch Changes
|
package/dist/index.cjs.js
CHANGED
|
@@ -27,8 +27,10 @@ const cmdk = require('cmdk');
|
|
|
27
27
|
const dialog = require('@base-ui/react/dialog');
|
|
28
28
|
const SelectPrimitive = require('@radix-ui/react-select');
|
|
29
29
|
const tabs = require('@base-ui/react/tabs');
|
|
30
|
+
const drawer = require('@base-ui/react/drawer');
|
|
30
31
|
const menu = require('@base-ui/react/menu');
|
|
31
32
|
const VisuallyHidden = require('@radix-ui/react-visually-hidden');
|
|
33
|
+
const previewCard = require('@base-ui/react/preview-card');
|
|
32
34
|
const Markdown = require('react-markdown');
|
|
33
35
|
const remarkGfm = require('remark-gfm');
|
|
34
36
|
const popover = require('@base-ui/react/popover');
|
|
@@ -40,7 +42,6 @@ const slider = require('@base-ui/react/slider');
|
|
|
40
42
|
const _switch = require('@base-ui/react/switch');
|
|
41
43
|
const dateFns = require('date-fns');
|
|
42
44
|
const reactDayPicker = require('react-day-picker');
|
|
43
|
-
const HoverCard = require('@radix-ui/react-hover-card');
|
|
44
45
|
const reactSlot = require('@radix-ui/react-slot');
|
|
45
46
|
const Dialog$1 = require('@radix-ui/react-dialog');
|
|
46
47
|
const dnd = require('@hello-pangea/dnd');
|
|
@@ -76,7 +77,6 @@ function _interopNamespaceDefault(e) {
|
|
|
76
77
|
const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
77
78
|
const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
|
|
78
79
|
const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
|
|
79
|
-
const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
|
|
80
80
|
const Dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(Dialog$1);
|
|
81
81
|
|
|
82
82
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
@@ -6983,6 +6983,138 @@ function DashboardCard({ children, className }) {
|
|
|
6983
6983
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border border-border1 rounded-xl px-4 py-3 bg-surface-overlay-soft", className), children });
|
|
6984
6984
|
}
|
|
6985
6985
|
|
|
6986
|
+
const sideToSwipeDirection = {
|
|
6987
|
+
top: "up",
|
|
6988
|
+
bottom: "down",
|
|
6989
|
+
left: "left",
|
|
6990
|
+
right: "right"
|
|
6991
|
+
};
|
|
6992
|
+
const DrawerSideContext = React__namespace.createContext("bottom");
|
|
6993
|
+
const useDrawerSide = () => React__namespace.useContext(DrawerSideContext);
|
|
6994
|
+
function Drawer({ side = "bottom", children, ...props }) {
|
|
6995
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DrawerSideContext.Provider, { value: side, children: /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Root, { swipeDirection: sideToSwipeDirection[side], ...props, children }) });
|
|
6996
|
+
}
|
|
6997
|
+
Drawer.displayName = "Drawer";
|
|
6998
|
+
function DrawerTrigger({ asChild, children, ...props }) {
|
|
6999
|
+
const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
|
|
7000
|
+
return /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Trigger, { ...renderProps, ...props, children: asChild ? void 0 : children });
|
|
7001
|
+
}
|
|
7002
|
+
DrawerTrigger.displayName = "DrawerTrigger";
|
|
7003
|
+
const DrawerClose = React__namespace.forwardRef(({ asChild, children, ...props }, ref) => {
|
|
7004
|
+
const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
|
|
7005
|
+
return /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Close, { ref, ...renderProps, ...props, children: asChild ? void 0 : children });
|
|
7006
|
+
});
|
|
7007
|
+
DrawerClose.displayName = "DrawerClose";
|
|
7008
|
+
const DrawerPortal = drawer.Drawer.Portal;
|
|
7009
|
+
const DrawerProvider = drawer.Drawer.Provider;
|
|
7010
|
+
const DrawerIndent = drawer.Drawer.Indent;
|
|
7011
|
+
const DrawerIndentBackground = drawer.Drawer.IndentBackground;
|
|
7012
|
+
const DrawerSwipeArea = drawer.Drawer.SwipeArea;
|
|
7013
|
+
const createDrawerHandle = drawer.Drawer.createHandle;
|
|
7014
|
+
const DrawerBackdrop = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
7015
|
+
drawer.Drawer.Backdrop,
|
|
7016
|
+
{
|
|
7017
|
+
ref,
|
|
7018
|
+
"data-slot": "drawer-backdrop",
|
|
7019
|
+
className: cn("drawer-backdrop fixed inset-0 z-50 bg-overlay backdrop-blur-xs", className),
|
|
7020
|
+
...props
|
|
7021
|
+
}
|
|
7022
|
+
));
|
|
7023
|
+
DrawerBackdrop.displayName = "DrawerBackdrop";
|
|
7024
|
+
const viewportSideClasses = {
|
|
7025
|
+
top: "items-start justify-center",
|
|
7026
|
+
bottom: "items-end justify-center",
|
|
7027
|
+
left: "items-stretch justify-start",
|
|
7028
|
+
right: "items-stretch justify-end"
|
|
7029
|
+
};
|
|
7030
|
+
const DrawerViewport = React__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
7031
|
+
const side = useDrawerSide();
|
|
7032
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7033
|
+
drawer.Drawer.Viewport,
|
|
7034
|
+
{
|
|
7035
|
+
ref,
|
|
7036
|
+
"data-slot": "drawer-viewport",
|
|
7037
|
+
className: cn("fixed inset-0 z-50 flex", viewportSideClasses[side], className),
|
|
7038
|
+
...props
|
|
7039
|
+
}
|
|
7040
|
+
);
|
|
7041
|
+
});
|
|
7042
|
+
DrawerViewport.displayName = "DrawerViewport";
|
|
7043
|
+
const drawerPopupBaseClass = cn(
|
|
7044
|
+
"drawer-popup group/popup relative z-50 box-border flex flex-col overflow-y-auto overscroll-contain outline-none [touch-action:auto] will-change-transform",
|
|
7045
|
+
"border-border1 bg-surface3 text-neutral5 shadow-dialog",
|
|
7046
|
+
"data-[swiping]:select-none",
|
|
7047
|
+
// Dim layer drawn over a parent drawer while a nested drawer covers it.
|
|
7048
|
+
"after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:transition-[background-color] after:duration-[450ms] after:content-['']",
|
|
7049
|
+
"data-[nested-drawer-open]:after:bg-black/25"
|
|
7050
|
+
);
|
|
7051
|
+
const popupSideClasses = {
|
|
7052
|
+
bottom: "h-[var(--drawer-height,auto)] max-h-[calc(85vh_+_3rem)] w-full -mb-12 pb-12 rounded-t-xl border-x border-t",
|
|
7053
|
+
top: "h-[var(--drawer-height,auto)] max-h-[calc(85vh_+_3rem)] w-full -mt-12 pt-12 rounded-b-xl border-x border-b",
|
|
7054
|
+
left: "h-full w-[20rem] max-w-[85vw] rounded-r-xl border-y border-r",
|
|
7055
|
+
right: "h-full w-[20rem] max-w-[85vw] rounded-l-xl border-y border-l"
|
|
7056
|
+
};
|
|
7057
|
+
const DrawerPopup = React__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
7058
|
+
const side = useDrawerSide();
|
|
7059
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7060
|
+
drawer.Drawer.Popup,
|
|
7061
|
+
{
|
|
7062
|
+
ref,
|
|
7063
|
+
"data-slot": "drawer-popup",
|
|
7064
|
+
className: cn(drawerPopupBaseClass, popupSideClasses[side], className),
|
|
7065
|
+
...props
|
|
7066
|
+
}
|
|
7067
|
+
);
|
|
7068
|
+
});
|
|
7069
|
+
DrawerPopup.displayName = "DrawerPopup";
|
|
7070
|
+
const nestedFadeClass = cn(
|
|
7071
|
+
"transition-opacity duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:duration-0",
|
|
7072
|
+
"group-data-[nested-drawer-open]/popup:opacity-0"
|
|
7073
|
+
);
|
|
7074
|
+
const HandleBar = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto my-2 h-1 w-12 shrink-0 rounded-full bg-surface5", nestedFadeClass) });
|
|
7075
|
+
const DrawerContent = React__namespace.forwardRef(
|
|
7076
|
+
({ className, children, container, hideBackdrop, hideCloseButton, hideHandle, ...props }, ref) => {
|
|
7077
|
+
const side = useDrawerSide();
|
|
7078
|
+
const showHandle = !hideHandle && (side === "top" || side === "bottom");
|
|
7079
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { container: container ?? void 0, children: [
|
|
7080
|
+
!hideBackdrop && /* @__PURE__ */ jsxRuntime.jsx(DrawerBackdrop, {}),
|
|
7081
|
+
/* @__PURE__ */ jsxRuntime.jsx(DrawerViewport, { className: hideBackdrop ? "pointer-events-none" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(DrawerPopup, { ref, className: cn(hideBackdrop && "pointer-events-auto", className), ...props, children: [
|
|
7082
|
+
showHandle && side === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(HandleBar, {}),
|
|
7083
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "drawer-content", className: cn("relative flex min-h-0 flex-1 flex-col", nestedFadeClass), children: [
|
|
7084
|
+
children,
|
|
7085
|
+
!hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
|
|
7086
|
+
drawer.Drawer.Close,
|
|
7087
|
+
{
|
|
7088
|
+
render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-3 right-3", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
|
|
7089
|
+
}
|
|
7090
|
+
)
|
|
7091
|
+
] }),
|
|
7092
|
+
showHandle && side === "top" && /* @__PURE__ */ jsxRuntime.jsx(HandleBar, {})
|
|
7093
|
+
] }) })
|
|
7094
|
+
] });
|
|
7095
|
+
}
|
|
7096
|
+
);
|
|
7097
|
+
DrawerContent.displayName = "DrawerContent";
|
|
7098
|
+
const DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "drawer-header", className: cn("flex flex-col gap-0.5 px-4 py-3 text-left", className), ...props });
|
|
7099
|
+
DrawerHeader.displayName = "DrawerHeader";
|
|
7100
|
+
const DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
7101
|
+
"div",
|
|
7102
|
+
{
|
|
7103
|
+
"data-slot": "drawer-footer",
|
|
7104
|
+
className: cn("mt-auto flex flex-col-reverse gap-1.5 px-4 py-3 sm:flex-row sm:justify-end", className),
|
|
7105
|
+
...props
|
|
7106
|
+
}
|
|
7107
|
+
);
|
|
7108
|
+
DrawerFooter.displayName = "DrawerFooter";
|
|
7109
|
+
const DrawerBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "drawer-body", className: cn("flex-1 px-4 py-3", className), ...props });
|
|
7110
|
+
DrawerBody.displayName = "DrawerBody";
|
|
7111
|
+
const DrawerTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Title, { ref, className: cn("text-ui-md font-medium text-neutral6", className), ...props }));
|
|
7112
|
+
DrawerTitle.displayName = "DrawerTitle";
|
|
7113
|
+
const DrawerDescription = React__namespace.forwardRef(
|
|
7114
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Description, { ref, className: cn("text-ui-sm text-neutral3", className), ...props })
|
|
7115
|
+
);
|
|
7116
|
+
DrawerDescription.displayName = "DrawerDescription";
|
|
7117
|
+
|
|
6986
7118
|
const DropdownMenuRoot = menu.Menu.Root;
|
|
6987
7119
|
const DropdownMenuGroup = menu.Menu.Group;
|
|
6988
7120
|
const DropdownMenuPortal = menu.Menu.Portal;
|
|
@@ -7541,6 +7673,32 @@ function SelectFieldBlock({
|
|
|
7541
7673
|
] });
|
|
7542
7674
|
}
|
|
7543
7675
|
|
|
7676
|
+
const HoverCard = previewCard.PreviewCard.Root;
|
|
7677
|
+
const HoverCardTrigger = React__namespace.forwardRef(
|
|
7678
|
+
({ className, delay = 250, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Trigger, { ref, delay, className, ...props })
|
|
7679
|
+
);
|
|
7680
|
+
HoverCardTrigger.displayName = "HoverCardTrigger";
|
|
7681
|
+
const HoverCardContent = React__namespace.forwardRef(
|
|
7682
|
+
({ className, children, side = "top", align, sideOffset = 5, container, showArrow = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Positioner, { side, align, sideOffset, className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7683
|
+
previewCard.PreviewCard.Popup,
|
|
7684
|
+
{
|
|
7685
|
+
ref,
|
|
7686
|
+
className: cn(
|
|
7687
|
+
"w-auto max-w-100 rounded-md border border-border1 bg-surface5 p-2 px-4 text-ui-sm text-neutral5 origin-[var(--transform-origin)]",
|
|
7688
|
+
"data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
|
|
7689
|
+
"data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
|
|
7690
|
+
className
|
|
7691
|
+
),
|
|
7692
|
+
...props,
|
|
7693
|
+
children: [
|
|
7694
|
+
children,
|
|
7695
|
+
showArrow && /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Arrow, { className: "fill-surface5" })
|
|
7696
|
+
]
|
|
7697
|
+
}
|
|
7698
|
+
) }) })
|
|
7699
|
+
);
|
|
7700
|
+
HoverCardContent.displayName = "HoverCardContent";
|
|
7701
|
+
|
|
7544
7702
|
const InputGroupSizeContext = React__namespace.createContext("md");
|
|
7545
7703
|
const inputGroupClassName = cn(
|
|
7546
7704
|
"group/input-group relative flex w-full min-w-0 items-stretch",
|
|
@@ -10489,20 +10647,9 @@ function KeyValueList({ data, className, labelsAreHidden, isLoading, LinkCompone
|
|
|
10489
10647
|
}) });
|
|
10490
10648
|
}
|
|
10491
10649
|
function RelationWrapper({ description, children }) {
|
|
10492
|
-
return description ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10493
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10494
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10495
|
-
HoverCard__namespace.Content,
|
|
10496
|
-
{
|
|
10497
|
-
className: "z-50 w-auto max-w-60 rounded-md bg-surface5 p-2 px-4 text-ui-sm text-neutral5 text-center",
|
|
10498
|
-
sideOffset: 5,
|
|
10499
|
-
side: "top",
|
|
10500
|
-
children: [
|
|
10501
|
-
description,
|
|
10502
|
-
/* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Arrow, { className: "fill-surface5" })
|
|
10503
|
-
]
|
|
10504
|
-
}
|
|
10505
|
-
) })
|
|
10650
|
+
return description ? /* @__PURE__ */ jsxRuntime.jsxs(HoverCard, { children: [
|
|
10651
|
+
/* @__PURE__ */ jsxRuntime.jsx(HoverCardTrigger, { render: React.isValidElement(children) ? children : void 0 }),
|
|
10652
|
+
/* @__PURE__ */ jsxRuntime.jsx(HoverCardContent, { className: "max-w-60 text-center", children: description })
|
|
10506
10653
|
] }) : children;
|
|
10507
10654
|
}
|
|
10508
10655
|
|
|
@@ -19195,9 +19342,9 @@ function TimelineTimingCol({
|
|
|
19195
19342
|
const spanStartTimeDate = span.startTime ? new Date(span.startTime) : null;
|
|
19196
19343
|
const spanStartTimeShift = spanStartTimeDate && overallStartTimeDate ? spanStartTimeDate.getTime() - overallStartTimeDate.getTime() : 0;
|
|
19197
19344
|
const percentageSpanStartTime = overallLatency && Math.floor(spanStartTimeShift / overallLatency * 100);
|
|
19198
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
19345
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(HoverCard, { children: [
|
|
19199
19346
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
19200
|
-
|
|
19347
|
+
HoverCardTrigger,
|
|
19201
19348
|
{
|
|
19202
19349
|
className: cn(
|
|
19203
19350
|
"h-8 p-1 grid grid-cols-[1fr_auto] gap-2 items-center cursor-help pr-2 rounded-r-md",
|
|
@@ -19227,34 +19374,25 @@ function TimelineTimingCol({
|
|
|
19227
19374
|
]
|
|
19228
19375
|
}
|
|
19229
19376
|
),
|
|
19230
|
-
/* @__PURE__ */ jsxRuntime.
|
|
19231
|
-
|
|
19232
|
-
{
|
|
19233
|
-
|
|
19234
|
-
|
|
19235
|
-
|
|
19236
|
-
|
|
19237
|
-
|
|
19238
|
-
|
|
19239
|
-
|
|
19240
|
-
|
|
19241
|
-
|
|
19242
|
-
|
|
19243
|
-
|
|
19244
|
-
|
|
19245
|
-
|
|
19246
|
-
|
|
19247
|
-
|
|
19248
|
-
|
|
19249
|
-
/* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues.Value, { children: [
|
|
19250
|
-
spanStartTimeShift,
|
|
19251
|
-
"ms"
|
|
19252
|
-
] })
|
|
19253
|
-
] }),
|
|
19254
|
-
/* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Arrow, { className: "fill-surface5" })
|
|
19255
|
-
]
|
|
19256
|
-
}
|
|
19257
|
-
) })
|
|
19377
|
+
/* @__PURE__ */ jsxRuntime.jsxs(HoverCardContent, { className: "bg-surface4 pr-6", children: [
|
|
19378
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-ui-sm flex items-center gap-2 mb-2 mt-1"), children: "Span Timing" }),
|
|
19379
|
+
/* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues, { children: [
|
|
19380
|
+
/* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Latency" }),
|
|
19381
|
+
/* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues.Value, { children: [
|
|
19382
|
+
span.latency,
|
|
19383
|
+
" ms"
|
|
19384
|
+
] }),
|
|
19385
|
+
/* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Started at" }),
|
|
19386
|
+
/* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: span.startTime ? format.format(new Date(span.startTime), "hh:mm:ss:SSS a") : "-" }),
|
|
19387
|
+
/* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Ended at" }),
|
|
19388
|
+
/* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: span.endTime ? format.format(new Date(span.endTime), "hh:mm:ss:SSS a") : "-" }),
|
|
19389
|
+
/* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Start Shift" }),
|
|
19390
|
+
/* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues.Value, { children: [
|
|
19391
|
+
spanStartTimeShift,
|
|
19392
|
+
"ms"
|
|
19393
|
+
] })
|
|
19394
|
+
] })
|
|
19395
|
+
] })
|
|
19258
19396
|
] });
|
|
19259
19397
|
}
|
|
19260
19398
|
|
|
@@ -22038,6 +22176,23 @@ exports.DialogTitle = DialogTitle;
|
|
|
22038
22176
|
exports.DialogTrigger = DialogTrigger;
|
|
22039
22177
|
exports.DividerIcon = DividerIcon;
|
|
22040
22178
|
exports.DocsIcon = DocsIcon;
|
|
22179
|
+
exports.Drawer = Drawer;
|
|
22180
|
+
exports.DrawerBackdrop = DrawerBackdrop;
|
|
22181
|
+
exports.DrawerBody = DrawerBody;
|
|
22182
|
+
exports.DrawerClose = DrawerClose;
|
|
22183
|
+
exports.DrawerContent = DrawerContent;
|
|
22184
|
+
exports.DrawerDescription = DrawerDescription;
|
|
22185
|
+
exports.DrawerFooter = DrawerFooter;
|
|
22186
|
+
exports.DrawerHeader = DrawerHeader;
|
|
22187
|
+
exports.DrawerIndent = DrawerIndent;
|
|
22188
|
+
exports.DrawerIndentBackground = DrawerIndentBackground;
|
|
22189
|
+
exports.DrawerPopup = DrawerPopup;
|
|
22190
|
+
exports.DrawerPortal = DrawerPortal;
|
|
22191
|
+
exports.DrawerProvider = DrawerProvider;
|
|
22192
|
+
exports.DrawerSwipeArea = DrawerSwipeArea;
|
|
22193
|
+
exports.DrawerTitle = DrawerTitle;
|
|
22194
|
+
exports.DrawerTrigger = DrawerTrigger;
|
|
22195
|
+
exports.DrawerViewport = DrawerViewport;
|
|
22041
22196
|
exports.DropdownMenu = DropdownMenu;
|
|
22042
22197
|
exports.EXTENSION_TO_MIME = EXTENSION_TO_MIME;
|
|
22043
22198
|
exports.ElementSelect = ElementSelect;
|
|
@@ -22079,6 +22234,9 @@ exports.HeaderGroup = HeaderGroup;
|
|
|
22079
22234
|
exports.HeaderTitle = HeaderTitle;
|
|
22080
22235
|
exports.HomeIcon = HomeIcon;
|
|
22081
22236
|
exports.HorizontalBars = HorizontalBars;
|
|
22237
|
+
exports.HoverCard = HoverCard;
|
|
22238
|
+
exports.HoverCardContent = HoverCardContent;
|
|
22239
|
+
exports.HoverCardTrigger = HoverCardTrigger;
|
|
22082
22240
|
exports.HoverPopover = HoverPopover;
|
|
22083
22241
|
exports.Icon = Icon;
|
|
22084
22242
|
exports.InfoIcon = InfoIcon;
|
|
@@ -22309,6 +22467,7 @@ exports.comboboxStyles = comboboxStyles;
|
|
|
22309
22467
|
exports.countLeafRules = countLeafRules;
|
|
22310
22468
|
exports.createDefaultRule = createDefaultRule;
|
|
22311
22469
|
exports.createDefaultRuleGroup = createDefaultRuleGroup;
|
|
22470
|
+
exports.createDrawerHandle = createDrawerHandle;
|
|
22312
22471
|
exports.createField = createField;
|
|
22313
22472
|
exports.createLogsPropertyFilterFields = createLogsPropertyFilterFields;
|
|
22314
22473
|
exports.createMetricsPropertyFilterFields = createMetricsPropertyFilterFields;
|