@mastra/playground-ui 22.1.3-alpha.3 → 22.2.0-alpha.9
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 +68 -0
- package/dist/index.cjs.js +150 -9
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.css +149 -0
- package/dist/index.es.js +149 -11
- package/dist/index.es.js.map +1 -1
- package/dist/src/ds/components/BrandLoader/brand-loader.d.ts +7 -0
- package/dist/src/ds/components/BrandLoader/brand-loader.stories.d.ts +11 -0
- package/dist/src/ds/components/BrandLoader/index.d.ts +1 -0
- package/dist/src/ds/components/Combobox/combobox.d.ts +1 -1
- package/dist/src/ds/components/DataList/ScoresDataList/scores-data-list-cells.d.ts +20 -0
- package/dist/src/ds/components/DataList/ScoresDataList/scores-data-list.d.ts +21 -0
- package/dist/src/ds/components/DataList/TracesDataList/traces-data-list.d.ts +4 -1
- package/dist/src/ds/components/DataList/index.d.ts +1 -0
- package/dist/src/ds/components/Logo/index.d.ts +1 -0
- package/dist/src/ds/components/Logo/logo.d.ts +8 -0
- package/dist/src/ds/components/Logo/logo.stories.d.ts +9 -0
- package/dist/src/ds/tokens/tokens.stories.d.ts +10 -0
- package/dist/src/index.d.ts +1 -0
- package/package.json +8 -8
package/dist/index.css
CHANGED
|
@@ -183,6 +183,7 @@
|
|
|
183
183
|
--spacing-64: 16rem;
|
|
184
184
|
--spacing-72: 18rem;
|
|
185
185
|
--spacing-80: 20rem;
|
|
186
|
+
--spacing-96: 24rem;
|
|
186
187
|
--spacing-px: .0625rem;
|
|
187
188
|
--spacing-0_5: .125rem;
|
|
188
189
|
--spacing-1_5: .375rem;
|
|
@@ -1046,6 +1047,10 @@
|
|
|
1046
1047
|
height: var(--spacing-48) !important;
|
|
1047
1048
|
}
|
|
1048
1049
|
|
|
1050
|
+
.h-64 {
|
|
1051
|
+
height: var(--spacing-64);
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1049
1054
|
.h-\[0\.6rem\] {
|
|
1050
1055
|
height: .6rem;
|
|
1051
1056
|
}
|
|
@@ -1339,6 +1344,10 @@
|
|
|
1339
1344
|
width: var(--spacing-80);
|
|
1340
1345
|
}
|
|
1341
1346
|
|
|
1347
|
+
.w-96 {
|
|
1348
|
+
width: var(--spacing-96);
|
|
1349
|
+
}
|
|
1350
|
+
|
|
1342
1351
|
.w-\[\.75rem\] {
|
|
1343
1352
|
width: .75rem;
|
|
1344
1353
|
}
|
|
@@ -2066,6 +2075,10 @@
|
|
|
2066
2075
|
overflow: hidden;
|
|
2067
2076
|
}
|
|
2068
2077
|
|
|
2078
|
+
.overflow-visible {
|
|
2079
|
+
overflow: visible;
|
|
2080
|
+
}
|
|
2081
|
+
|
|
2069
2082
|
.overflow-x-auto {
|
|
2070
2083
|
overflow-x: auto;
|
|
2071
2084
|
}
|
|
@@ -7703,3 +7716,139 @@ html.light {
|
|
|
7703
7716
|
transform: translateX(100%);
|
|
7704
7717
|
}
|
|
7705
7718
|
}
|
|
7719
|
+
.logo svg {
|
|
7720
|
+
shape-rendering: geometricprecision;
|
|
7721
|
+
overflow: visible;
|
|
7722
|
+
}
|
|
7723
|
+
|
|
7724
|
+
.logo .logo-fill {
|
|
7725
|
+
fill: currentcolor;
|
|
7726
|
+
transition: fill-opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
7727
|
+
}
|
|
7728
|
+
|
|
7729
|
+
/* Inner stroke: clipPath clips the stroke to the shape so only the inside
|
|
7730
|
+
half renders — reads as a line drawn inside, not a border around. */
|
|
7731
|
+
.logo .logo-stroke {
|
|
7732
|
+
fill: none;
|
|
7733
|
+
stroke: currentcolor;
|
|
7734
|
+
stroke-width: 0;
|
|
7735
|
+
transition: stroke-width 320ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
7736
|
+
}
|
|
7737
|
+
|
|
7738
|
+
.logo-animate-on-hover .logo-fill {
|
|
7739
|
+
animation: logo-fill-cycle 1500ms cubic-bezier(0.4, 0, 0.2, 1) 1;
|
|
7740
|
+
}
|
|
7741
|
+
|
|
7742
|
+
.logo-animate-on-hover .logo-stroke {
|
|
7743
|
+
animation: logo-stroke-cycle 1500ms cubic-bezier(0.4, 0, 0.2, 1) 1;
|
|
7744
|
+
}
|
|
7745
|
+
|
|
7746
|
+
@keyframes logo-fill-cycle {
|
|
7747
|
+
0% {
|
|
7748
|
+
fill-opacity: 1;
|
|
7749
|
+
}
|
|
7750
|
+
|
|
7751
|
+
23.3% {
|
|
7752
|
+
fill-opacity: 0;
|
|
7753
|
+
}
|
|
7754
|
+
|
|
7755
|
+
43.3% {
|
|
7756
|
+
fill-opacity: 0;
|
|
7757
|
+
}
|
|
7758
|
+
|
|
7759
|
+
100% {
|
|
7760
|
+
fill-opacity: 1;
|
|
7761
|
+
}
|
|
7762
|
+
}
|
|
7763
|
+
|
|
7764
|
+
@keyframes logo-stroke-cycle {
|
|
7765
|
+
0% {
|
|
7766
|
+
stroke-width: 0;
|
|
7767
|
+
}
|
|
7768
|
+
|
|
7769
|
+
23.3% {
|
|
7770
|
+
stroke-width: 2;
|
|
7771
|
+
}
|
|
7772
|
+
|
|
7773
|
+
43.3% {
|
|
7774
|
+
stroke-width: 2;
|
|
7775
|
+
}
|
|
7776
|
+
|
|
7777
|
+
100% {
|
|
7778
|
+
stroke-width: 0;
|
|
7779
|
+
}
|
|
7780
|
+
}
|
|
7781
|
+
|
|
7782
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7783
|
+
.logo .logo-fill,
|
|
7784
|
+
.logo .logo-stroke {
|
|
7785
|
+
transition: none;
|
|
7786
|
+
animation: none;
|
|
7787
|
+
}
|
|
7788
|
+
}
|
|
7789
|
+
.brand-loader svg {
|
|
7790
|
+
filter: drop-shadow(0 0 0.7px currentcolor);
|
|
7791
|
+
shape-rendering: geometricprecision;
|
|
7792
|
+
}
|
|
7793
|
+
|
|
7794
|
+
.brand-loader circle {
|
|
7795
|
+
fill: currentcolor;
|
|
7796
|
+
}
|
|
7797
|
+
|
|
7798
|
+
.brand-loader line {
|
|
7799
|
+
stroke: currentcolor;
|
|
7800
|
+
stroke-width: 2.8;
|
|
7801
|
+
stroke-linecap: round;
|
|
7802
|
+
}
|
|
7803
|
+
|
|
7804
|
+
.brand-loader circle,
|
|
7805
|
+
.brand-loader line {
|
|
7806
|
+
animation: brand-loader-pulse 1.8s ease-in-out infinite;
|
|
7807
|
+
}
|
|
7808
|
+
|
|
7809
|
+
.brand-loader .brand-loader-b1 {
|
|
7810
|
+
animation-delay: 0s;
|
|
7811
|
+
}
|
|
7812
|
+
|
|
7813
|
+
.brand-loader .brand-loader-b2 {
|
|
7814
|
+
animation-delay: 0.09s;
|
|
7815
|
+
}
|
|
7816
|
+
|
|
7817
|
+
.brand-loader .brand-loader-ln23 {
|
|
7818
|
+
animation-delay: 0.135s;
|
|
7819
|
+
}
|
|
7820
|
+
|
|
7821
|
+
.brand-loader .brand-loader-b3 {
|
|
7822
|
+
animation-delay: 0.18s;
|
|
7823
|
+
}
|
|
7824
|
+
|
|
7825
|
+
.brand-loader .brand-loader-ln34 {
|
|
7826
|
+
animation-delay: 0.225s;
|
|
7827
|
+
}
|
|
7828
|
+
|
|
7829
|
+
.brand-loader .brand-loader-b4 {
|
|
7830
|
+
animation-delay: 0.27s;
|
|
7831
|
+
}
|
|
7832
|
+
|
|
7833
|
+
.brand-loader .brand-loader-ln45 {
|
|
7834
|
+
animation-delay: 0.315s;
|
|
7835
|
+
}
|
|
7836
|
+
|
|
7837
|
+
.brand-loader .brand-loader-b5 {
|
|
7838
|
+
animation-delay: 0.36s;
|
|
7839
|
+
}
|
|
7840
|
+
|
|
7841
|
+
@keyframes brand-loader-pulse {
|
|
7842
|
+
0%,
|
|
7843
|
+
100% {
|
|
7844
|
+
opacity: 1;
|
|
7845
|
+
}
|
|
7846
|
+
|
|
7847
|
+
40% {
|
|
7848
|
+
opacity: 0;
|
|
7849
|
+
}
|
|
7850
|
+
|
|
7851
|
+
70% {
|
|
7852
|
+
opacity: 1;
|
|
7853
|
+
}
|
|
7854
|
+
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { X, Wand2, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, CircleCheck, CircleX, CircleAlert, Info, CheckIcon as CheckIcon$1, CopyIcon, ShieldX, LogIn, Check, ChevronsUpDown, Search, ChevronDown, Circle, TriangleAlertIcon, SearchIcon, XIcon, TrendingUpIcon, TrendingDownIcon, CalendarIcon, CircleAlertIcon, ArrowLeftIcon, ArrowRightIcon, Type, Hash, ToggleLeft, AlignLeft, Braces, List, Trash2Icon, ChevronRightIcon, PanelRightIcon, KeyboardIcon, AlertTriangleIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, ChevronLeftIcon, ClockIcon, BanIcon, ChevronRight, Folder, File, FilterIcon, CircleXIcon, ExpandIcon, ExternalLinkIcon, Link2Icon, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Plus, Component, ArrowRight, ArrowLeft } from 'lucide-react';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import React__default, { useState, useRef, useCallback, useSyncExternalStore, forwardRef, useMemo, useEffect, Suspense,
|
|
4
|
+
import React__default, { useState, useRef, useCallback, useSyncExternalStore, forwardRef, useMemo, useId, useEffect, Suspense, Fragment as Fragment$1 } from 'react';
|
|
5
5
|
import { Shadows, Glows, BorderColors, Colors, Sizes, FontSizes, LineHeights, BorderRadius, Spacings } from './tokens.es.js';
|
|
6
6
|
import './index.css';export { Animations } from './tokens.es.js';
|
|
7
7
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
@@ -3352,7 +3352,7 @@ function cn(...inputs) {
|
|
|
3352
3352
|
return twMerge(clsx(inputs));
|
|
3353
3353
|
}
|
|
3354
3354
|
|
|
3355
|
-
const sizeClasses$
|
|
3355
|
+
const sizeClasses$6 = {
|
|
3356
3356
|
sm: `${formElementSizes.sm} text-ui-sm px-[.75em]`,
|
|
3357
3357
|
md: `${formElementSizes.md} text-ui-md px-[.75em]`,
|
|
3358
3358
|
default: `${formElementSizes.default} text-ui-md px-[.85em] `,
|
|
@@ -3385,7 +3385,7 @@ function resolveVariant(variant) {
|
|
|
3385
3385
|
function buttonVariants(options) {
|
|
3386
3386
|
const variant = resolveVariant(options?.variant || "default");
|
|
3387
3387
|
const size = options?.size || "default";
|
|
3388
|
-
return cn(sharedStyles, sizeClasses$
|
|
3388
|
+
return cn(sharedStyles, sizeClasses$6[size], variantClasses$4[variant], options?.iconOnly && "[&>svg]:opacity-75");
|
|
3389
3389
|
}
|
|
3390
3390
|
function flattenChildren(children) {
|
|
3391
3391
|
const result = [];
|
|
@@ -4763,7 +4763,7 @@ const AlertDescription = ({ children, as: As = "p" }) => {
|
|
|
4763
4763
|
return /* @__PURE__ */ jsx(Txt, { as: As, variant: "ui-sm", children });
|
|
4764
4764
|
};
|
|
4765
4765
|
|
|
4766
|
-
const sizeClasses$
|
|
4766
|
+
const sizeClasses$5 = {
|
|
4767
4767
|
sm: "h-avatar-sm w-avatar-sm",
|
|
4768
4768
|
md: "h-avatar-md w-avatar-md",
|
|
4769
4769
|
lg: "h-avatar-lg w-avatar-lg"
|
|
@@ -4773,7 +4773,7 @@ const Avatar = ({ src, name, size = "sm", interactive = false }) => {
|
|
|
4773
4773
|
"div",
|
|
4774
4774
|
{
|
|
4775
4775
|
className: cn(
|
|
4776
|
-
sizeClasses$
|
|
4776
|
+
sizeClasses$5[size],
|
|
4777
4777
|
"border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
|
|
4778
4778
|
transitions.all,
|
|
4779
4779
|
interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
|
|
@@ -5588,6 +5588,59 @@ const LogoWithoutText = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://w
|
|
|
5588
5588
|
}
|
|
5589
5589
|
) });
|
|
5590
5590
|
|
|
5591
|
+
const PATH_D = "M4.49805 11.6934C6.98237 11.6934 8.99609 13.7081 8.99609 16.1924C8.9959 18.6765 6.98225 20.6904 4.49805 20.6904C2.01394 20.6903 0.000196352 18.6765 0 16.1924C0 13.7081 2.01382 11.6935 4.49805 11.6934ZM10.3867 0C12.8709 0 14.8846 2.01388 14.8848 4.49805C14.8848 4.8377 14.847 5.16846 14.7755 5.48643C14.4618 6.88139 14.1953 8.4633 14.9928 9.65L16.2575 11.5319C16.3363 11.6491 16.4727 11.7115 16.6137 11.703C16.7369 11.6957 16.8525 11.6343 16.9214 11.5318L18.1876 9.64717C18.9772 8.47198 18.7236 6.90783 18.4205 5.52484C18.3523 5.21392 18.3164 4.89094 18.3164 4.55957C18.3167 2.07546 20.3313 0.0615234 22.8154 0.0615234C25.2994 0.0617476 27.3132 2.0756 27.3135 4.55957C27.3135 4.93883 27.2665 5.30712 27.178 5.65896C26.8547 6.94441 26.5817 8.37932 27.2446 9.52714L28.459 11.6301C28.4819 11.6697 28.5245 11.6934 28.5703 11.6934C31.0545 11.6935 33.0684 13.7081 33.0684 16.1924C33.0682 18.6765 31.0544 20.6903 28.5703 20.6904C26.0861 20.6904 24.0725 18.6765 24.0723 16.1924C24.0723 15.8049 24.1212 15.4288 24.2133 15.0701C24.5458 13.7746 24.8298 12.3251 24.1609 11.1668L23.0044 9.16384C22.9656 9.09659 22.8931 9.05859 22.8154 9.05859C22.7983 9.05859 22.7824 9.06614 22.7728 9.08033L21.4896 10.9895C20.686 12.1851 20.9622 13.781 21.284 15.1851C21.3582 15.5089 21.3975 15.8461 21.3975 16.1924C21.3973 18.6764 19.3834 20.6902 16.8994 20.6904C14.4152 20.6904 12.4006 18.6765 12.4004 16.1924C12.4004 15.932 12.4226 15.6768 12.4651 15.4286C12.6859 14.14 12.8459 12.7122 12.1167 11.6271L11.2419 10.3253C10.6829 9.49347 9.71913 9.05932 8.78286 8.70188C7.0906 8.05584 5.88867 6.41734 5.88867 4.49805C5.88886 2.0139 7.90254 3.29835e-05 10.3867 0Z";
|
|
5592
|
+
const sizeClasses$4 = {
|
|
5593
|
+
sm: "w-6",
|
|
5594
|
+
md: "w-10"
|
|
5595
|
+
};
|
|
5596
|
+
function prefersReducedMotion() {
|
|
5597
|
+
if (typeof window === "undefined" || !window.matchMedia) return false;
|
|
5598
|
+
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
5599
|
+
}
|
|
5600
|
+
function Logo({ className, size = "md", animateOnHover = false, "aria-label": ariaLabel = "Mastra" }) {
|
|
5601
|
+
const reactId = useId();
|
|
5602
|
+
const clipId = `logo-clip-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
|
|
5603
|
+
const [playing, setPlaying] = useState(false);
|
|
5604
|
+
const handleMouseEnter = animateOnHover ? () => {
|
|
5605
|
+
if (prefersReducedMotion()) return;
|
|
5606
|
+
setPlaying(true);
|
|
5607
|
+
} : void 0;
|
|
5608
|
+
const handleAnimationEnd = animateOnHover && playing ? (e) => {
|
|
5609
|
+
if (e.animationName !== "logo-stroke-cycle") return;
|
|
5610
|
+
setPlaying(false);
|
|
5611
|
+
} : void 0;
|
|
5612
|
+
return /* @__PURE__ */ jsx(
|
|
5613
|
+
"div",
|
|
5614
|
+
{
|
|
5615
|
+
role: "img",
|
|
5616
|
+
"aria-label": ariaLabel,
|
|
5617
|
+
onMouseEnter: handleMouseEnter,
|
|
5618
|
+
onAnimationEnd: handleAnimationEnd,
|
|
5619
|
+
className: cn(
|
|
5620
|
+
"logo inline-block text-neutral6",
|
|
5621
|
+
sizeClasses$4[size],
|
|
5622
|
+
animateOnHover && playing && "logo-animate-on-hover",
|
|
5623
|
+
className
|
|
5624
|
+
),
|
|
5625
|
+
children: /* @__PURE__ */ jsxs(
|
|
5626
|
+
"svg",
|
|
5627
|
+
{
|
|
5628
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5629
|
+
viewBox: "0 0 34 21",
|
|
5630
|
+
fill: "none",
|
|
5631
|
+
className: "logo-svg block w-full h-auto",
|
|
5632
|
+
"aria-hidden": "true",
|
|
5633
|
+
children: [
|
|
5634
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("path", { d: PATH_D }) }) }),
|
|
5635
|
+
/* @__PURE__ */ jsx("path", { className: "logo-fill", d: PATH_D }),
|
|
5636
|
+
/* @__PURE__ */ jsx("path", { className: "logo-stroke", d: PATH_D, clipPath: `url(#${clipId})` })
|
|
5637
|
+
]
|
|
5638
|
+
}
|
|
5639
|
+
)
|
|
5640
|
+
}
|
|
5641
|
+
);
|
|
5642
|
+
}
|
|
5643
|
+
|
|
5591
5644
|
const rowSize = {
|
|
5592
5645
|
default: "[&>tbody>tr]:h-table-row",
|
|
5593
5646
|
small: "[&>tbody>tr]:h-table-row-small"
|
|
@@ -7009,7 +7062,7 @@ function SelectFieldBlock({
|
|
|
7009
7062
|
] });
|
|
7010
7063
|
}
|
|
7011
7064
|
|
|
7012
|
-
const sizeClasses$
|
|
7065
|
+
const sizeClasses$3 = {
|
|
7013
7066
|
sm: `${formElementSizes.sm} w-form-sm`,
|
|
7014
7067
|
md: `${formElementSizes.md} w-form-md`,
|
|
7015
7068
|
lg: `${formElementSizes.lg} w-form-lg`,
|
|
@@ -7042,7 +7095,7 @@ const IconButton = React__default.forwardRef(
|
|
|
7042
7095
|
baseButtonStyles,
|
|
7043
7096
|
formElementFocus,
|
|
7044
7097
|
variantClasses$1[variant],
|
|
7045
|
-
sizeClasses$
|
|
7098
|
+
sizeClasses$3[size],
|
|
7046
7099
|
disabled && "active:scale-100",
|
|
7047
7100
|
className
|
|
7048
7101
|
),
|
|
@@ -7206,7 +7259,7 @@ function MetricsCardError({
|
|
|
7206
7259
|
return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3 items-center justify-center", className), children: /* @__PURE__ */ jsx("p", { className: "text-ui-sm text-accent2", children: message }) });
|
|
7207
7260
|
}
|
|
7208
7261
|
|
|
7209
|
-
const sizeClasses$
|
|
7262
|
+
const sizeClasses$2 = {
|
|
7210
7263
|
sm: "w-4 h-4",
|
|
7211
7264
|
md: "w-6 h-6",
|
|
7212
7265
|
lg: "w-8 h-8"
|
|
@@ -7215,7 +7268,7 @@ function Spinner({ color, className, size = "md" }) {
|
|
|
7215
7268
|
return /* @__PURE__ */ jsx(
|
|
7216
7269
|
"svg",
|
|
7217
7270
|
{
|
|
7218
|
-
className: cn("animate-spin", sizeClasses$
|
|
7271
|
+
className: cn("animate-spin", sizeClasses$2[size], className),
|
|
7219
7272
|
style: { animationDuration: "800ms", animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)" },
|
|
7220
7273
|
xmlns: "http://www.w3.org/2000/svg",
|
|
7221
7274
|
width: "24",
|
|
@@ -7627,6 +7680,49 @@ const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
|
|
|
7627
7680
|
));
|
|
7628
7681
|
Slider.displayName = SliderPrimitive.Root.displayName;
|
|
7629
7682
|
|
|
7683
|
+
const sizeClasses$1 = {
|
|
7684
|
+
sm: "w-6",
|
|
7685
|
+
md: "w-10",
|
|
7686
|
+
lg: "w-16"
|
|
7687
|
+
};
|
|
7688
|
+
function BrandLoader({ className, size = "md", "aria-label": ariaLabel = "Loading" }) {
|
|
7689
|
+
const reactId = useId();
|
|
7690
|
+
const filterId = `brand-loader-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
|
|
7691
|
+
return /* @__PURE__ */ jsx(
|
|
7692
|
+
"div",
|
|
7693
|
+
{
|
|
7694
|
+
role: "status",
|
|
7695
|
+
"aria-label": ariaLabel,
|
|
7696
|
+
className: cn("brand-loader inline-block text-neutral6", sizeClasses$1[size], className),
|
|
7697
|
+
children: /* @__PURE__ */ jsxs(
|
|
7698
|
+
"svg",
|
|
7699
|
+
{
|
|
7700
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7701
|
+
viewBox: "0 0 34 21",
|
|
7702
|
+
className: "block w-full h-auto overflow-visible",
|
|
7703
|
+
"aria-hidden": "true",
|
|
7704
|
+
children: [
|
|
7705
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: filterId, children: [
|
|
7706
|
+
/* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0.55" }),
|
|
7707
|
+
/* @__PURE__ */ jsx("feColorMatrix", { values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" })
|
|
7708
|
+
] }) }),
|
|
7709
|
+
/* @__PURE__ */ jsxs("g", { filter: `url(#${filterId})`, children: [
|
|
7710
|
+
/* @__PURE__ */ jsx("line", { className: "brand-loader-ln23", x1: "10.4", y1: "4.5", x2: "16.8", y2: "16.2" }),
|
|
7711
|
+
/* @__PURE__ */ jsx("line", { className: "brand-loader-ln34", x1: "16.8", y1: "16.2", x2: "23.2", y2: "4.5" }),
|
|
7712
|
+
/* @__PURE__ */ jsx("line", { className: "brand-loader-ln45", x1: "23.2", y1: "4.5", x2: "29.5", y2: "16.2" }),
|
|
7713
|
+
/* @__PURE__ */ jsx("circle", { className: "brand-loader-b1", cx: "4.5", cy: "16.2", r: "4.5" }),
|
|
7714
|
+
/* @__PURE__ */ jsx("circle", { className: "brand-loader-b2", cx: "10.4", cy: "4.5", r: "4.5" }),
|
|
7715
|
+
/* @__PURE__ */ jsx("circle", { className: "brand-loader-b3", cx: "16.8", cy: "16.2", r: "4.5" }),
|
|
7716
|
+
/* @__PURE__ */ jsx("circle", { className: "brand-loader-b4", cx: "23.2", cy: "4.5", r: "4.5" }),
|
|
7717
|
+
/* @__PURE__ */ jsx("circle", { className: "brand-loader-b5", cx: "29.5", cy: "16.2", r: "4.5" })
|
|
7718
|
+
] })
|
|
7719
|
+
]
|
|
7720
|
+
}
|
|
7721
|
+
)
|
|
7722
|
+
}
|
|
7723
|
+
);
|
|
7724
|
+
}
|
|
7725
|
+
|
|
7630
7726
|
const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
7631
7727
|
SwitchPrimitives.Root,
|
|
7632
7728
|
{
|
|
@@ -11313,6 +11409,45 @@ function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3 })
|
|
|
11313
11409
|
)) });
|
|
11314
11410
|
}
|
|
11315
11411
|
|
|
11412
|
+
function toDate$2(value) {
|
|
11413
|
+
const date = value instanceof Date ? value : new Date(value);
|
|
11414
|
+
return isNaN(date.getTime()) ? null : date;
|
|
11415
|
+
}
|
|
11416
|
+
function ScoresDataListDateCell({ timestamp }) {
|
|
11417
|
+
const date = toDate$2(timestamp);
|
|
11418
|
+
return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? isToday$1(date) ? "Today" : format(date, "MMM dd") : "-" });
|
|
11419
|
+
}
|
|
11420
|
+
function ScoresDataListTimeCell({ timestamp }) {
|
|
11421
|
+
const date = toDate$2(timestamp);
|
|
11422
|
+
return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral3", children: date ? format(date, "h:mm:ss aaa") : "-" });
|
|
11423
|
+
}
|
|
11424
|
+
function ScoresDataListInputCell({ input }) {
|
|
11425
|
+
return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsx("span", { className: "block text-neutral3 text-ui-smd font-mono truncate", children: input != null ? JSON.stringify(input) : "-" }) });
|
|
11426
|
+
}
|
|
11427
|
+
function ScoresDataListEntityCell({ entityId }) {
|
|
11428
|
+
return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsx("span", { className: "block text-ui-smd truncate", children: entityId || "-" }) });
|
|
11429
|
+
}
|
|
11430
|
+
function ScoresDataListScoreCell({ score }) {
|
|
11431
|
+
const display = score == null ? "-" : typeof score === "object" ? JSON.stringify(score) : String(score);
|
|
11432
|
+
return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3", children: display });
|
|
11433
|
+
}
|
|
11434
|
+
|
|
11435
|
+
function ScoresDataListRoot(props) {
|
|
11436
|
+
return /* @__PURE__ */ jsx(DataListRoot, { ...props });
|
|
11437
|
+
}
|
|
11438
|
+
const ScoresDataList = Object.assign(ScoresDataListRoot, {
|
|
11439
|
+
Top: DataListTop,
|
|
11440
|
+
TopCell: DataListTopCell,
|
|
11441
|
+
RowButton: DataListRowButton,
|
|
11442
|
+
NoMatch: DataListNoMatch,
|
|
11443
|
+
NextPageLoading: DataListNextPageLoading,
|
|
11444
|
+
DateCell: ScoresDataListDateCell,
|
|
11445
|
+
TimeCell: ScoresDataListTimeCell,
|
|
11446
|
+
InputCell: ScoresDataListInputCell,
|
|
11447
|
+
EntityCell: ScoresDataListEntityCell,
|
|
11448
|
+
ScoreCell: ScoresDataListScoreCell
|
|
11449
|
+
});
|
|
11450
|
+
|
|
11316
11451
|
function toDate$1(value) {
|
|
11317
11452
|
const date = value instanceof Date ? value : new Date(value);
|
|
11318
11453
|
return isNaN(date.getTime()) ? null : date;
|
|
@@ -11375,7 +11510,10 @@ function TracesDataListStatusCell({ status }) {
|
|
|
11375
11510
|
return /* @__PURE__ */ jsx(DataListCell, { height: "compact", children: /* @__PURE__ */ jsx("span", { className: "uppercase text-ui-sm font-semibold", style: { color: config.color }, children: config.label }) });
|
|
11376
11511
|
}
|
|
11377
11512
|
|
|
11378
|
-
|
|
11513
|
+
function TracesDataListRoot(props) {
|
|
11514
|
+
return /* @__PURE__ */ jsx(DataListRoot, { ...props });
|
|
11515
|
+
}
|
|
11516
|
+
const TracesDataList = Object.assign(TracesDataListRoot, {
|
|
11379
11517
|
Top: DataListTop,
|
|
11380
11518
|
TopCell: DataListTopCell,
|
|
11381
11519
|
RowButton: DataListRowButton,
|
|
@@ -14063,5 +14201,5 @@ function generateDefaultValues(schema) {
|
|
|
14063
14201
|
return generateObjectDefaults(schema.properties, 0);
|
|
14064
14202
|
}
|
|
14065
14203
|
|
|
14066
|
-
export { AddField, AgentCoinIcon, AgentIcon, AgentNetworkCoinIcon, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, AmazonIcon, AnthropicChatIcon, AnthropicMessagesIcon, ApiIcon, Avatar, AzureIcon, Badge, BorderColors, BorderRadius, BranchIcon, Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Cell, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeDiff, CodeEditor, CohereIcon, Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger, Colors, Column, Columns, CombinedButtons, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ContentBlock, ContentBlocks, CopyButton, CrossIcon, Crumb, DashboardCard, DataCodeSection, DataDetailsPanel, DataKeysAndValues, DataList, DataListSkeleton, DataPanel, DatePicker, DateTimeCell, DateTimePicker, DateTimePickerContent, DateTimeRangePicker, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerIcon, DocsIcon, DropdownMenu, EXTENSION_TO_MIME, ElementSelect, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorState, Field, FieldBlock, FieldBlocksLayout, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FiltersIcon, FolderIcon, FontSizes, GithubCoinIcon, GithubIcon, Glows, GoogleIcon, GroqIcon, Header$1 as Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HorizontalBars, HoverPopover, Icon, IconButton, InfoIcon, Input, ItemList, ItemListSkeleton, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, Label, LatencyIcon, LineHeights, ListSearch, LogoWithoutText, LogsDataList, DataListSkeleton as LogsDataListSkeleton, LogsIcon, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarProvider, MainSidebarTrigger, MarkdownRenderer, MastraIcon, McpCoinIcon, McpServerIcon, MemoryIcon, MetricsCard, MetricsDataTable, MetricsFlexGrid, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MistralIcon, MultiColumn, MultiCombobox, NestedFields, NetlifyIcon, NoDataPageLayout, Notice, Notification, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenaiChatIcon, PageHeader, PageLayout, PanelSeparator, PermissionDenied, Popover, PopoverContent, PopoverTrigger, PrevNextNav, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorIcon, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Root$1 as Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScrollArea, ScrollBar, ScrollableContainer, SearchFieldBlock, Searchbar, SearchbarWrapper, Section, SectionRoot, Sections, Select, SelectContent, SelectDataFilter, SelectField, SelectFieldBlock, SelectGroup, SelectItem, SelectTrigger, SelectValue, SessionExpired, SettingsIcon, Shadows, SideDialog, Sizes, Skeleton, SkillIcon, SlashIcon, Slider, Spacings, Spinner, StatusBadge, SubSectionRoot, Switch, Tab, TabContent, TabList, Table, Tabs, Tbody, TextAndIcon, TextFieldBlock, Textarea, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, TimePicker, ToolCoinIcon, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceIcon, TracesDataList, Tree, Truncate, TsIcon, Txt, TxtCell, VARIABLE_PATTERN, VariablesIcon, WorkflowCoinIcon, WorkflowIcon, XGroqIcon, buttonVariants, cn, comboboxStyles, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createVariableAutocomplete, fieldsToJSONSchema, fileToBase64, flattenSchemaToVariables, focusRing, formElementFocus, formElementFocusWithin, formElementRadius, formElementSizes, formElementTransition, formatJSON, generateDefaultValues, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getItemListColumnTemplate, getMainContentContentClassName, getShortId$1 as getShortId, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, highlight, hoverEffects, inputVariants, is401UnauthorizedError, is403ForbiddenError, isNonRetryableError, isObjectEmpty, isRule, isRuleGroup, isValidJson, jsonSchemaToFields, lodashTitleCase, parseError, parseFieldPath, sharedFormElementDisabledStyle, sharedFormElementFocusStyle, sharedFormElementStyle, shouldRetryQuery, stringToColor, textareaVariants, toSigFigs, toast, transitions, truncateString, useAutoscroll, useCodemirrorTheme$3 as useCodemirrorTheme, useCopyToClipboard, useInView, useIsDarkMode, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useMainSidebar, useMaybeSidebar, usePlaygroundStore, useTableKeyboardNavigation, variableHighlight };
|
|
14204
|
+
export { AddField, AgentCoinIcon, AgentIcon, AgentNetworkCoinIcon, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, AmazonIcon, AnthropicChatIcon, AnthropicMessagesIcon, ApiIcon, Avatar, AzureIcon, Badge, BorderColors, BorderRadius, BranchIcon, BrandLoader, Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Cell, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeDiff, CodeEditor, CohereIcon, Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger, Colors, Column, Columns, CombinedButtons, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ContentBlock, ContentBlocks, CopyButton, CrossIcon, Crumb, DashboardCard, DataCodeSection, DataDetailsPanel, DataKeysAndValues, DataList, DataListSkeleton, DataPanel, DatePicker, DateTimeCell, DateTimePicker, DateTimePickerContent, DateTimeRangePicker, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerIcon, DocsIcon, DropdownMenu, EXTENSION_TO_MIME, ElementSelect, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorState, Field, FieldBlock, FieldBlocksLayout, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FiltersIcon, FolderIcon, FontSizes, GithubCoinIcon, GithubIcon, Glows, GoogleIcon, GroqIcon, Header$1 as Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HorizontalBars, HoverPopover, Icon, IconButton, InfoIcon, Input, ItemList, ItemListSkeleton, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, Label, LatencyIcon, LineHeights, ListSearch, Logo, LogoWithoutText, LogsDataList, DataListSkeleton as LogsDataListSkeleton, LogsIcon, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarProvider, MainSidebarTrigger, MarkdownRenderer, MastraIcon, McpCoinIcon, McpServerIcon, MemoryIcon, MetricsCard, MetricsDataTable, MetricsFlexGrid, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MistralIcon, MultiColumn, MultiCombobox, NestedFields, NetlifyIcon, NoDataPageLayout, Notice, Notification, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenaiChatIcon, PageHeader, PageLayout, PanelSeparator, PermissionDenied, Popover, PopoverContent, PopoverTrigger, PrevNextNav, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorIcon, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Root$1 as Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScoresDataList, ScrollArea, ScrollBar, ScrollableContainer, SearchFieldBlock, Searchbar, SearchbarWrapper, Section, SectionRoot, Sections, Select, SelectContent, SelectDataFilter, SelectField, SelectFieldBlock, SelectGroup, SelectItem, SelectTrigger, SelectValue, SessionExpired, SettingsIcon, Shadows, SideDialog, Sizes, Skeleton, SkillIcon, SlashIcon, Slider, Spacings, Spinner, StatusBadge, SubSectionRoot, Switch, Tab, TabContent, TabList, Table, Tabs, Tbody, TextAndIcon, TextFieldBlock, Textarea, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, TimePicker, ToolCoinIcon, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceIcon, TracesDataList, Tree, Truncate, TsIcon, Txt, TxtCell, VARIABLE_PATTERN, VariablesIcon, WorkflowCoinIcon, WorkflowIcon, XGroqIcon, buttonVariants, cn, comboboxStyles, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createVariableAutocomplete, fieldsToJSONSchema, fileToBase64, flattenSchemaToVariables, focusRing, formElementFocus, formElementFocusWithin, formElementRadius, formElementSizes, formElementTransition, formatJSON, generateDefaultValues, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getItemListColumnTemplate, getMainContentContentClassName, getShortId$1 as getShortId, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, highlight, hoverEffects, inputVariants, is401UnauthorizedError, is403ForbiddenError, isNonRetryableError, isObjectEmpty, isRule, isRuleGroup, isValidJson, jsonSchemaToFields, lodashTitleCase, parseError, parseFieldPath, sharedFormElementDisabledStyle, sharedFormElementFocusStyle, sharedFormElementStyle, shouldRetryQuery, stringToColor, textareaVariants, toSigFigs, toast, transitions, truncateString, useAutoscroll, useCodemirrorTheme$3 as useCodemirrorTheme, useCopyToClipboard, useInView, useIsDarkMode, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useMainSidebar, useMaybeSidebar, usePlaygroundStore, useTableKeyboardNavigation, variableHighlight };
|
|
14067
14205
|
//# sourceMappingURL=index.es.js.map
|