@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

package/dist/traces-data-list-CmBQDfnG.cjs

@@ -0,0 +1,87 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const dataListTop = require('./data-list-top-CkwvYUWw.cjs');
+const dataListSpacer = require('./data-list-spacer-psBnZOCX.cjs');
+const dataList = require('./data-list-B9td5YXY.cjs');
+const lucideReact = require('lucide-react');
+const Badge = require('./Badge-RWi6V_JT.cjs');
+const tooltip = require('./tooltip-_cda-a7s.cjs');
+const icons_AgentIcon = require('./icons/AgentIcon.cjs.js');
+const icons_WorkflowIcon = require('./icons/WorkflowIcon.cjs.js');
+const utils_cn = require('./cn-BuHW7Wrt.cjs');
+
+function TracesDataListNameCell({ name, parentSpanId, showLevelTooltip }) {
+  const isRoot = parentSpanId == null;
+  const Icon = isRoot ? lucideReact.ListTreeIcon : lucideReact.CornerDownRightIcon;
+  const label = isRoot ? "Trace" : "Subtrace";
+  const icon = /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": label, className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: utils_cn.cn("size-4 shrink-0", isRoot ? "text-neutral3" : "text-neutral2"), "aria-hidden": true }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(dataListTop.DataListCell, { className: "text-ui-smd text-neutral4 flex min-w-0 items-center gap-2", children: [
+    showLevelTooltip ? /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: label })
+    ] }) : icon,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: name || "-" })
+  ] });
+}
+function TracesDataListInputCell({ input }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListTextCell, { font: "mono", children: input || "-" });
+}
+function EntityTypeIcon({ entityType, className }) {
+  const iconClass = utils_cn.cn("size-3.5 shrink-0 text-neutral2", className);
+  const normalizedEntityType = entityType.toLowerCase();
+  switch (normalizedEntityType) {
+    case "agent":
+      return /* @__PURE__ */ jsxRuntime.jsx(icons_AgentIcon.AgentIcon, { className: iconClass, "aria-hidden": true });
+    case "workflow":
+    case "workflow_run":
+      return /* @__PURE__ */ jsxRuntime.jsx(icons_WorkflowIcon.WorkflowIcon, { className: iconClass, "aria-hidden": true });
+    default:
+      return null;
+  }
+}
+function TracesDataListEntityCell({ entityType, entityName }) {
+  const type = entityType ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(dataListTop.DataListCell, { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EntityTypeIcon, { entityType: type }),
+    entityName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-smd min-w-0 truncate", children: entityName }) : "-"
+  ] });
+}
+const UNSET_STATUS_CONFIG = { label: "-", variant: "neutral" };
+const STATUS_CONFIG = {
+  completed: { label: "OK", variant: "green" },
+  ok: { label: "OK", variant: "green" },
+  success: { label: "OK", variant: "green" },
+  error: { label: "ERR", variant: "red" },
+  running: { label: "RUN", variant: "neutral" },
+  unset: UNSET_STATUS_CONFIG
+};
+function TracesDataListStatusCell({ status }) {
+  const key = (status ?? "unset").toLowerCase();
+  const config = STATUS_CONFIG[key] ?? UNSET_STATUS_CONFIG;
+  return /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: config.variant, children: config.label }) });
+}
+
+function TracesDataListRoot(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListRoot, { ...props });
+}
+const TracesDataList = Object.assign(TracesDataListRoot, {
+  Top: dataListTop.DataListTop,
+  TopCell: dataListTop.DataListTopCell,
+  TopCellWithTooltip: dataListTop.DataListTopCellWithTooltip,
+  RowButton: dataListSpacer.DataListRowButton,
+  NoMatch: dataListSpacer.DataListNoMatch,
+  Subheader: dataList.DataListSubheader,
+  SubHeading: dataList.DataListSubHeading,
+  Spacer: dataListSpacer.DataListSpacer,
+  IdCell: dataListTop.DataListIdCell,
+  CreatedCell: dataListTop.DataListCreatedCell,
+  NameCell: TracesDataListNameCell,
+  InputCell: TracesDataListInputCell,
+  EntityCell: TracesDataListEntityCell,
+  StatusCell: TracesDataListStatusCell,
+  NextPageLoading: dataListSpacer.DataListNextPageLoading
+});
+
+exports.TracesDataList = TracesDataList;
+//# sourceMappingURL=traces-data-list-CmBQDfnG.cjs.map

package/dist/traces-data-list-CmBQDfnG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"traces-data-list-CmBQDfnG.cjs","sources":["../src/ds/components/DataList/TracesDataList/traces-data-list-cells.tsx","../src/ds/components/DataList/TracesDataList/traces-data-list.tsx"],"sourcesContent":["import { CornerDownRightIcon, ListTreeIcon } from 'lucide-react';\nimport { DataListCell, DataListTextCell } from '../data-list-cells';\nimport { Badge } from '@/ds/components/Badge';\nimport type { BadgeVariant } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { AgentIcon } from '@/ds/icons/AgentIcon';\nimport { WorkflowIcon } from '@/ds/icons/WorkflowIcon';\nimport { cn } from '@/lib/utils';\n\n// ---------------------------------------------------------------------------\n// NameCell\n// ---------------------------------------------------------------------------\n\nexport interface TracesDataListNameCellProps {\n  name?: string | null;\n  /** `null`/missing → root span (Trace). Set → nested span (Subtrace). Drives the leading level icon. */\n  parentSpanId?: string | null;\n  /** When true, the leading level icon is wrapped in a Trace/Subtrace tooltip. Off by default —\n   *  only meaningful in branches mode, where rows mix root traces and subtraces. */\n  showLevelTooltip?: boolean;\n}\n\nexport function TracesDataListNameCell({ name, parentSpanId, showLevelTooltip }: TracesDataListNameCellProps) {\n  const isRoot = parentSpanId == null;\n  const Icon = isRoot ? ListTreeIcon : CornerDownRightIcon;\n  const label = isRoot ? 'Trace' : 'Subtrace';\n  const icon = (\n    <span aria-label={label} className=\"inline-flex shrink-0\">\n      <Icon className={cn('size-4 shrink-0', isRoot ? 'text-neutral3' : 'text-neutral2')} aria-hidden />\n    </span>\n  );\n  return (\n    <DataListCell className=\"text-ui-smd text-neutral4 flex min-w-0 items-center gap-2\">\n      {showLevelTooltip ? (\n        <Tooltip>\n          <TooltipTrigger asChild>{icon}</TooltipTrigger>\n          <TooltipContent>{label}</TooltipContent>\n        </Tooltip>\n      ) : (\n        icon\n      )}\n      <span className=\"min-w-0 truncate\">{name || '-'}</span>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// InputCell\n// ---------------------------------------------------------------------------\n\nexport interface TracesDataListInputCellProps {\n  input?: string | null;\n}\n\nexport function TracesDataListInputCell({ input }: TracesDataListInputCellProps) {\n  return <DataListTextCell font=\"mono\">{input || '-'}</DataListTextCell>;\n}\n\n// ---------------------------------------------------------------------------\n// EntityCell\n// ---------------------------------------------------------------------------\n\nfunction EntityTypeIcon({ entityType, className }: { entityType: string; className?: string }) {\n  const iconClass = cn('size-3.5 shrink-0 text-neutral2', className);\n  const normalizedEntityType = entityType.toLowerCase();\n\n  switch (normalizedEntityType) {\n    case 'agent':\n      return <AgentIcon className={iconClass} aria-hidden />;\n    case 'workflow':\n    case 'workflow_run':\n      return <WorkflowIcon className={iconClass} aria-hidden />;\n    default:\n      return null;\n  }\n}\n\nexport interface TracesDataListEntityCellProps {\n  entityType?: string | null;\n  entityName?: string | null;\n}\n\nexport function TracesDataListEntityCell({ entityType, entityName }: TracesDataListEntityCellProps) {\n  const type = entityType ?? '';\n\n  return (\n    <DataListCell className=\"flex min-w-0 items-center gap-2\">\n      <EntityTypeIcon entityType={type} />\n      {entityName ? <span className=\"text-ui-smd min-w-0 truncate\">{entityName}</span> : '-'}\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// StatusCell\n// ---------------------------------------------------------------------------\n\nconst UNSET_STATUS_CONFIG: { label: string; variant: BadgeVariant } = { label: '-', variant: 'neutral' };\n\nconst STATUS_CONFIG: Record<string, { label: string; variant: BadgeVariant }> = {\n  completed: { label: 'OK', variant: 'green' },\n  ok: { label: 'OK', variant: 'green' },\n  success: { label: 'OK', variant: 'green' },\n  error: { label: 'ERR', variant: 'red' },\n  running: { label: 'RUN', variant: 'neutral' },\n  unset: UNSET_STATUS_CONFIG,\n};\n\nexport interface TracesDataListStatusCellProps {\n  status?: string | null;\n}\n\nexport function TracesDataListStatusCell({ status }: TracesDataListStatusCellProps) {\n  const key = (status ?? 'unset').toLowerCase();\n  const config = STATUS_CONFIG[key] ?? UNSET_STATUS_CONFIG;\n\n  return (\n    <DataListCell>\n      <Badge size=\"xs\" variant={config.variant}>\n        {config.label}\n      </Badge>\n    </DataListCell>\n  );\n}\n","import type { ComponentProps } from 'react';\nimport { DataListCreatedCell, DataListIdCell } from '../data-list-cells';\nimport { DataListNextPageLoading } from '../data-list-next-page-loading';\nimport { DataListNoMatch } from '../data-list-no-match';\nimport { DataListRoot } from '../data-list-root';\nimport { DataListRowButton } from '../data-list-row-button';\nimport { DataListSpacer } from '../data-list-spacer';\nimport { DataListSubheader } from '../data-list-subheader';\nimport { DataListSubHeading } from '../data-list-subheading';\nimport { DataListTop } from '../data-list-top';\nimport { DataListTopCell, DataListTopCellWithTooltip } from '../data-list-top-cell';\nimport {\n  TracesDataListNameCell,\n  TracesDataListInputCell,\n  TracesDataListEntityCell,\n  TracesDataListStatusCell,\n} from './traces-data-list-cells';\n\n// oxlint-disable-next-line react/only-export-components -- compound component root, same pattern as ScoresDataList\n// eslint-disable-next-line react-refresh/only-export-components -- compound component root, same pattern as ScoresDataList\nfunction TracesDataListRoot(props: ComponentProps<typeof DataListRoot>) {\n  return <DataListRoot {...props} />;\n}\n\nexport const TracesDataList = Object.assign(TracesDataListRoot, {\n  Top: DataListTop,\n  TopCell: DataListTopCell,\n  TopCellWithTooltip: DataListTopCellWithTooltip,\n  RowButton: DataListRowButton,\n  NoMatch: DataListNoMatch,\n  Subheader: DataListSubheader,\n  SubHeading: DataListSubHeading,\n  Spacer: DataListSpacer,\n  IdCell: DataListIdCell,\n  CreatedCell: DataListCreatedCell,\n  NameCell: TracesDataListNameCell,\n  InputCell: TracesDataListInputCell,\n  EntityCell: TracesDataListEntityCell,\n  StatusCell: TracesDataListStatusCell,\n  NextPageLoading: DataListNextPageLoading,\n});\n"],"names":["ListTreeIcon","CornerDownRightIcon","jsx","cn","jsxs","DataListCell","Tooltip","TooltipTrigger","TooltipContent","DataListTextCell","AgentIcon","WorkflowIcon","Badge","DataListRoot","DataListTop","DataListTopCell","DataListTopCellWithTooltip","DataListRowButton","DataListNoMatch","DataListSubheader","DataListSubHeading","DataListSpacer","DataListIdCell","DataListCreatedCell","DataListNextPageLoading"],"mappings":"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"}

package/dist/utils/cn.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
 
 
 

package/dist/utils/cn.es.js

@@ -1,2 +1,2 @@
-export { c as cn } from '../cn-ByEbywDh.js';
+export { c as cn } from '../cn-C6s2yXwM.js';
 //# sourceMappingURL=cn.es.js.map

package/dist/utils/colors.cjs.js

@@ -10,6 +10,13 @@ const stringToColor = (str, lightness = 90, saturation = 100) => {
   }
   return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;
 };
+const themedHueColor = (hue, saturation = 60) => `hsl(${hue} ${saturation}% var(--generated-accent-lightness, 60%))`;
+const stringToThemedColor = (str, saturation = 60) => {
+  const hue = Number(stringToColor(str).match(/hsl\((-?\d+)/)?.[1] ?? 0);
+  return themedHueColor(hue, saturation);
+};
 
 exports.stringToColor = stringToColor;
+exports.stringToThemedColor = stringToThemedColor;
+exports.themedHueColor = themedHueColor;
 //# sourceMappingURL=colors.cjs.js.map

package/dist/utils/colors.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs.js","sources":["../../src/lib/colors.ts"],"sourcesContent":["export const stringToColor = (str: string, lightness: number = 90, saturation = 100) => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    hash = hash & hash;\n  }\n  return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;\n};\n"],"names":[],"mappings":";;;;AAAO,MAAM,gBAAgB,CAAC,GAAA,EAAa,SAAA,GAAoB,EAAA,EAAI,aAAa,GAAA,KAAQ;AACtF,EAAA,IAAI,IAAA,GAAO,CAAA;AACX,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,GAAA,CAAI,QAAQ,CAAA,EAAA,EAAK;AACnC,IAAA,IAAA,GAAO,GAAA,CAAI,UAAA,CAAW,CAAC,CAAA,IAAA,CAAM,QAAQ,CAAA,IAAK,IAAA,CAAA;AAC1C,IAAA,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,EAChB;AACA,EAAA,OAAO,OAAO,IAAA,GAAO,GAAG,CAAA,EAAA,EAAK,UAAU,MAAM,SAAS,CAAA,EAAA,CAAA;AACxD;;;;"}
+{"version":3,"file":"colors.cjs.js","sources":["../../src/lib/colors.ts"],"sourcesContent":["export const stringToColor = (str: string, lightness: number = 90, saturation = 100) => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    hash = hash & hash;\n  }\n  return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;\n};\n\n/** A hue rendered with the theme's lightness for generated accents (see `--generated-accent-lightness`). */\nexport const themedHueColor = (hue: number, saturation = 60) =>\n  `hsl(${hue} ${saturation}% var(--generated-accent-lightness, 60%))`;\n\n/** `stringToColor` counterpart: same stable hue, lightness follows the active theme. */\nexport const stringToThemedColor = (str: string, saturation = 60) => {\n  const hue = Number(stringToColor(str).match(/hsl\\((-?\\d+)/)?.[1] ?? 0);\n  return themedHueColor(hue, saturation);\n};\n"],"names":[],"mappings":";;;;AAAO,MAAM,gBAAgB,CAAC,GAAA,EAAa,SAAA,GAAoB,EAAA,EAAI,aAAa,GAAA,KAAQ;AACtF,EAAA,IAAI,IAAA,GAAO,CAAA;AACX,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,GAAA,CAAI,QAAQ,CAAA,EAAA,EAAK;AACnC,IAAA,IAAA,GAAO,GAAA,CAAI,UAAA,CAAW,CAAC,CAAA,IAAA,CAAM,QAAQ,CAAA,IAAK,IAAA,CAAA;AAC1C,IAAA,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,EAChB;AACA,EAAA,OAAO,OAAO,IAAA,GAAO,GAAG,CAAA,EAAA,EAAK,UAAU,MAAM,SAAS,CAAA,EAAA,CAAA;AACxD;AAGO,MAAM,cAAA,GAAiB,CAAC,GAAA,EAAa,UAAA,GAAa,OACvD,CAAA,IAAA,EAAO,GAAG,IAAI,UAAU,CAAA,yCAAA;AAGnB,MAAM,mBAAA,GAAsB,CAAC,GAAA,EAAa,UAAA,GAAa,EAAA,KAAO;AACnE,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,aAAA,CAAc,GAAG,CAAA,CAAE,MAAM,cAAc,CAAA,GAAI,CAAC,CAAA,IAAK,CAAC,CAAA;AACrE,EAAA,OAAO,cAAA,CAAe,KAAK,UAAU,CAAA;AACvC;;;;;;"}

package/dist/utils/colors.es.js

@@ -6,6 +6,11 @@ const stringToColor = (str, lightness = 90, saturation = 100) => {
   }
   return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;
 };
+const themedHueColor = (hue, saturation = 60) => `hsl(${hue} ${saturation}% var(--generated-accent-lightness, 60%))`;
+const stringToThemedColor = (str, saturation = 60) => {
+  const hue = Number(stringToColor(str).match(/hsl\((-?\d+)/)?.[1] ?? 0);
+  return themedHueColor(hue, saturation);
+};
 
-export { stringToColor };
+export { stringToColor, stringToThemedColor, themedHueColor };
 //# sourceMappingURL=colors.es.js.map

package/dist/utils/colors.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.es.js","sources":["../../src/lib/colors.ts"],"sourcesContent":["export const stringToColor = (str: string, lightness: number = 90, saturation = 100) => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    hash = hash & hash;\n  }\n  return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;\n};\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB,CAAC,GAAA,EAAa,SAAA,GAAoB,EAAA,EAAI,aAAa,GAAA,KAAQ;AACtF,EAAA,IAAI,IAAA,GAAO,CAAA;AACX,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,GAAA,CAAI,QAAQ,CAAA,EAAA,EAAK;AACnC,IAAA,IAAA,GAAO,GAAA,CAAI,UAAA,CAAW,CAAC,CAAA,IAAA,CAAM,QAAQ,CAAA,IAAK,IAAA,CAAA;AAC1C,IAAA,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,EAChB;AACA,EAAA,OAAO,OAAO,IAAA,GAAO,GAAG,CAAA,EAAA,EAAK,UAAU,MAAM,SAAS,CAAA,EAAA,CAAA;AACxD;;;;"}
+{"version":3,"file":"colors.es.js","sources":["../../src/lib/colors.ts"],"sourcesContent":["export const stringToColor = (str: string, lightness: number = 90, saturation = 100) => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    hash = hash & hash;\n  }\n  return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;\n};\n\n/** A hue rendered with the theme's lightness for generated accents (see `--generated-accent-lightness`). */\nexport const themedHueColor = (hue: number, saturation = 60) =>\n  `hsl(${hue} ${saturation}% var(--generated-accent-lightness, 60%))`;\n\n/** `stringToColor` counterpart: same stable hue, lightness follows the active theme. */\nexport const stringToThemedColor = (str: string, saturation = 60) => {\n  const hue = Number(stringToColor(str).match(/hsl\\((-?\\d+)/)?.[1] ?? 0);\n  return themedHueColor(hue, saturation);\n};\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB,CAAC,GAAA,EAAa,SAAA,GAAoB,EAAA,EAAI,aAAa,GAAA,KAAQ;AACtF,EAAA,IAAI,IAAA,GAAO,CAAA;AACX,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,GAAA,CAAI,QAAQ,CAAA,EAAA,EAAK;AACnC,IAAA,IAAA,GAAO,GAAA,CAAI,UAAA,CAAW,CAAC,CAAA,IAAA,CAAM,QAAQ,CAAA,IAAK,IAAA,CAAA;AAC1C,IAAA,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,EAChB;AACA,EAAA,OAAO,OAAO,IAAA,GAAO,GAAG,CAAA,EAAA,EAAK,UAAU,MAAM,SAAS,CAAA,EAAA,CAAA;AACxD;AAGO,MAAM,cAAA,GAAiB,CAAC,GAAA,EAAa,UAAA,GAAa,OACvD,CAAA,IAAA,EAAO,GAAG,IAAI,UAAU,CAAA,yCAAA;AAGnB,MAAM,mBAAA,GAAsB,CAAC,GAAA,EAAa,UAAA,GAAa,EAAA,KAAO;AACnE,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,aAAA,CAAc,GAAG,CAAA,CAAE,MAAM,cAAc,CAAA,GAAI,CAAC,CAAA,IAAK,CAAC,CAAA;AACrE,EAAA,OAAO,cAAA,CAAe,KAAK,UAAU,CAAA;AACvC;;;;"}

package/dist/utils/toast.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const toast = require('../toast-FypW736q.cjs');
+const toast = require('../toast-CwH7p9gV.cjs');
 
 
 

package/dist/utils/toast.es.js

@@ -1,2 +1,2 @@
-export { t as toast } from '../toast-Xv8jgrMR.js';
+export { t as toast } from '../toast-CTMSqE4M.js';
 //# sourceMappingURL=toast.es.js.map

package/new-theme.css

@@ -0,0 +1,39 @@
+.new-theme {
+  --background: var(--background-2);
+  --sidebar: var(--background-1);
+  --card: var(--background-3);
+  --popover: var(--background-3);
+  --muted: var(--gray-1);
+  --foreground: var(--gray-10);
+  --muted-foreground: var(--gray-9);
+  --border: var(--gray-alpha-2);
+  --ring: var(--gray-8);
+  --sidebar-accent: var(--gray-alpha-1);
+  --selected: var(--gray-alpha-2);
+
+  /* The one chromatic pair. Both themes use the darker red so a white glyph or label
+     clears WCAG AA on the filled surface (4.77:1). The lighter red this replaced sat
+     at 3.81:1, which made the destructive action the least legible control we shipped. */
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(1 0 0);
+}
+
+html.light .new-theme {
+  --border: var(--gray-alpha-3);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-sidebar: var(--sidebar);
+  --color-card: var(--card);
+  --color-popover: var(--popover);
+  --color-muted: var(--muted);
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-ring: var(--ring);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-selected: var(--selected);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+}

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "55.0.0",
+  "version": "56.0.0-alpha.10",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
   ],
   "files": [
     "dist",
-    "theme.css"
+    "theme.css",
+    "new-theme.css"
   ],
   "exports": {
     "./style.css": "./dist/style.css",
     "./theme.css": "./theme.css",
+    "./new-theme.css": "./new-theme.css",
     "./tokens": {
       "import": {
         "types": "./dist/tokens.d.ts",
@@ -83,6 +85,16 @@
         "default": "./dist/resize/*.cjs.js"
       }
     },
+    "./lib/*": {
+      "import": {
+        "types": "./dist/lib/*.d.ts",
+        "default": "./dist/lib/*.es.js"
+      },
+      "require": {
+        "types": "./dist/lib/*.d.ts",
+        "default": "./dist/lib/*.cjs.js"
+      }
+    },
     "./store/*": {
       "import": {
         "types": "./dist/store/*.d.ts",
@@ -118,6 +130,12 @@
         "default": "./dist/new/settings.es.js"
       }
     },
+    "./new/sidebar": {
+      "import": {
+        "types": "./dist/new/sidebar.d.ts",
+        "default": "./dist/new/sidebar.es.js"
+      }
+    },
     "./new/layout/app-shell": {
       "import": {
         "types": "./dist/new/layout/app-shell.d.ts",
@@ -159,6 +177,7 @@
     "@xyflow/react": "^12.10.1",
     "cmdk": "^1.1.1",
     "date-fns": "4.4.0",
+    "framer-motion": "^13.4.0",
     "mdast-util-gfm": "^3.1.0",
     "mdast-util-to-markdown": "^2.1.2",
     "prettier": "^3.9.5",
@@ -183,8 +202,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.46.0",
-    "@mastra/react": "1.5.0"
+    "@mastra/client-js": "^1.47.0-alpha.9",
+    "@mastra/react": "1.6.0-alpha.10"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.1",
@@ -204,7 +223,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.2.0",
-    "@vitest/ui": "4.1.10",
+    "@vitest/ui": "4.1.11",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "eslint-plugin-react-hooks": "^7.1.1",
@@ -225,12 +244,12 @@
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "4.1.10",
+    "vitest": "4.1.11",
     "@internal/lint": "0.0.133",
-    "@mastra/client-js": "^1.46.0",
-    "@mastra/core": "1.67.0",
-    "@mastra/react": "1.5.0",
-    "@mastra/memory": "1.30.0"
+    "@mastra/core": "1.68.0-alpha.9",
+    "@mastra/react": "1.6.0-alpha.10",
+    "@mastra/client-js": "^1.47.0-alpha.9",
+    "@mastra/memory": "1.31.0-alpha.3"
   },
   "homepage": "https://mastra.ai",
   "repository": {
@@ -255,6 +274,6 @@
     "build:publish": "pnpm build && yalc push",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006 --no-open",
-    "build-storybook": "storybook build"
+    "build-storybook": "pnpm -w build:core && storybook build"
   }
 }

package/theme.css

@@ -15,6 +15,30 @@
   --surface5: oklch(24.35% 0 0deg / 90%);
   --surface6: oklch(30.92% 0 0deg);
 
+  --background-1: oklch(0 0 0);
+  --background-2: oklch(0.1591 0 0);
+  --background-3: oklch(0.1913 0 0);
+  --gray-1: oklch(0.2178 0 0);
+  --gray-2: oklch(0.2435 0 0);
+  --gray-3: oklch(0.2686 0 0);
+  --gray-4: oklch(0.3092 0 0);
+  --gray-5: oklch(0.3715 0 0);
+  --gray-6: oklch(0.4495 0 0);
+  --gray-7: oklch(0.5208 0 0);
+  --gray-8: oklch(0.65 0 0);
+  --gray-9: oklch(0.7699 0 0);
+  --gray-10: oklch(0.9851 0 0);
+  --gray-alpha-1: rgb(255 255 255 / 4%);
+  --gray-alpha-2: rgb(255 255 255 / 7%);
+  --gray-alpha-3: rgb(255 255 255 / 10%);
+  --gray-alpha-4: rgb(255 255 255 / 14%);
+  --gray-alpha-5: rgb(255 255 255 / 18%);
+  --gray-alpha-6: rgb(255 255 255 / 30%);
+  --gray-alpha-7: rgb(255 255 255 / 45%);
+  --gray-alpha-8: rgb(255 255 255 / 60%);
+  --gray-alpha-9: rgb(255 255 255 / 75%);
+  --gray-alpha-10: rgb(255 255 255 / 90%);
+
   --accent1: oklch(0.723 0.219 149.579);
   --accent2: oklch(0.637 0.237 25.331);
   --accent3: oklch(0.623 0.214 259.815);
@@ -41,6 +65,8 @@
   --neutral6: oklch(0.985 0 0);
 
   --error: oklch(0.637 0.237 25.331);
+  /* Lightness for hue-only generated accents (e.g. per-filter colors) — legible on each theme. */
+  --generated-accent-lightness: 72%;
   --overlay: oklch(0% 0 0deg / 75%);
   --border1: oklch(100% 0 0deg / 7%);
   --border2: oklch(100% 0 0deg / 11%);
@@ -56,6 +82,7 @@
   --shadow-main-frame: 0 14px 48px -36px oklch(0% 0 0deg / 85%);
   --sidebar-nav-hover: oklch(100% 0 0deg / 7%);
   --sidebar-nav-active: oklch(100% 0 0deg / 11%);
+  --sidebar-divider: oklch(100% 0 0deg / 11%);
 
   /* Semantic color aliases */
   --text1: var(--neutral6);
@@ -132,6 +159,30 @@ html.light {
   --surface5: oklch(94.4% 0 0deg / 94%);
   --surface6: oklch(89.5% 0 0deg);
 
+  --background-1: oklch(0.9642 0 0);
+  --background-2: oklch(0.9851 0 0);
+  --background-3: oklch(1 0 0);
+  --gray-1: oklch(0.9431 0 0);
+  --gray-2: oklch(0.9189 0 0);
+  --gray-3: oklch(0.8945 0 0);
+  --gray-4: oklch(0.8452 0 0);
+  --gray-5: oklch(0.7604 0 0);
+  --gray-6: oklch(0.6201 0 0);
+  --gray-7: oklch(0.5486 0 0);
+  --gray-8: oklch(0.4459 0 0);
+  --gray-9: oklch(0.3092 0 0);
+  --gray-10: oklch(0.1286 0 0);
+  --gray-alpha-1: rgb(0 0 0 / 4%);
+  --gray-alpha-2: rgb(0 0 0 / 7%);
+  --gray-alpha-3: rgb(0 0 0 / 10%);
+  --gray-alpha-4: rgb(0 0 0 / 14%);
+  --gray-alpha-5: rgb(0 0 0 / 18%);
+  --gray-alpha-6: rgb(0 0 0 / 30%);
+  --gray-alpha-7: rgb(0 0 0 / 45%);
+  --gray-alpha-8: rgb(0 0 0 / 60%);
+  --gray-alpha-9: rgb(0 0 0 / 75%);
+  --gray-alpha-10: rgb(0 0 0 / 90%);
+
   --accent1: oklch(0.627 0.194 149.214);
   --accent2: oklch(0.577 0.245 27.325);
   --accent3: oklch(0.546 0.245 262.881);
@@ -158,6 +209,7 @@ html.light {
   --neutral6: oklch(0.13 0 0);
 
   --error: oklch(0.577 0.245 27.325);
+  --generated-accent-lightness: 38%;
   --overlay: oklch(20.8% 0 0deg / 45%);
   --border1: oklch(20.8% 0 0deg / 10%);
   --border2: oklch(20.8% 0 0deg / 16%);
@@ -173,6 +225,7 @@ html.light {
   --shadow-main-frame: 0 1px 2px oklch(24% 0 0deg / 4%), 0 18px 48px -34px oklch(24% 0 0deg / 22%);
   --sidebar-nav-hover: oklch(20.8% 0 0deg / 5.5%);
   --sidebar-nav-active: oklch(20.8% 0 0deg / 8.5%);
+  --sidebar-divider: oklch(20.8% 0 0deg / 16%);
 
   /* Semantic color aliases */
   --text1: var(--neutral6);
@@ -334,10 +387,11 @@ html.light {
   --height-icon-default: 16px;
   --height-icon-lg: 20px;
   --height-icon-sm: 12px;
+  --height-icon-smd: 14px;
   --spacing-form-xs: 1.25rem;
   --spacing-form-sm: 1.5rem;
   --spacing-form-md: 1.75rem;
-  --spacing-form-lg: 1.75rem;
+  --spacing-form-lg: 2rem;
   --height-header-default: 40px;
   --height-table-header: 28px;
   --height-table-row: 40px;
@@ -351,6 +405,7 @@ html.light {
   --max-height-icon-default: 16px;
   --max-height-icon-lg: 20px;
   --max-height-icon-sm: 12px;
+  --max-height-icon-smd: 14px;
   --max-height-header-default: 40px;
   --max-height-table-header: 28px;
   --max-height-table-row: 40px;
@@ -361,9 +416,12 @@ html.light {
   --max-height-avatar-lg: 40px;
   --max-height-dropdown-max-height: 300px;
 
+  --min-height-header-default: 40px;
+
   --width-icon-default: 16px;
   --width-icon-lg: 20px;
   --width-icon-sm: 12px;
+  --width-icon-smd: 14px;
   /* Using --spacing-form-* for both height and width */
   --width-header-default: 40px;
   --width-table-header: 28px;
@@ -427,6 +485,7 @@ html.light {
   --color-button-default-bg-active: var(--button-default-bg-active);
   --color-button-default-border: var(--button-default-border);
   --color-surface-row-featured: var(--surface-row-featured);
+  --color-sidebar-divider: var(--sidebar-divider);
 
   /* Semantic color aliases */
   --color-text1: var(--text1);
@@ -517,6 +576,24 @@ html.light {
   }
 }
 
+:root {
+  --resize-dur: 300ms;
+  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.t-resize {
+  transition:
+    width var(--resize-dur) var(--resize-ease),
+    height var(--resize-dur) var(--resize-ease);
+  will-change: width, height;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-resize {
+    transition: none !important;
+  }
+}
+
 @utility duration-normal {
   transition-duration: var(--duration-normal);
 }

package/dist/Badge-B-LKnrNk.cjs

@@ -1,125 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const icons_Icon = require('./icons/Icon.cjs.js');
-const primitives_transitions = require('./primitives/transitions.cjs.js');
-const utils_cn = require('./cn-DnbTIGXa.cjs');
-
-const badgeToneStyles = {
-  neutral: {
-    default: "bg-neutral6/5 text-badge-neutral-fg",
-    muted: "bg-neutral6/[0.025] text-badge-neutral-fg",
-    indicator: "bg-neutral3"
-  },
-  green: {
-    default: "bg-badge-green/20 text-badge-green-fg",
-    muted: "bg-badge-green/10 text-badge-green-fg",
-    indicator: "bg-badge-green"
-  },
-  red: {
-    default: "bg-badge-red/20 text-badge-red-fg",
-    muted: "bg-badge-red/10 text-badge-red-fg",
-    indicator: "bg-badge-red"
-  },
-  blue: {
-    default: "bg-badge-blue/20 text-badge-blue-fg",
-    muted: "bg-badge-blue/10 text-badge-blue-fg",
-    indicator: "bg-badge-blue"
-  },
-  yellow: {
-    default: "bg-badge-yellow/20 text-badge-yellow-fg",
-    muted: "bg-badge-yellow/10 text-badge-yellow-fg",
-    indicator: "bg-badge-yellow"
-  },
-  purple: {
-    default: "bg-badge-purple/20 text-badge-purple-fg",
-    muted: "bg-badge-purple/10 text-badge-purple-fg",
-    indicator: "bg-badge-purple"
-  },
-  orange: {
-    default: "bg-badge-orange/20 text-badge-orange-fg",
-    muted: "bg-badge-orange/10 text-badge-orange-fg",
-    indicator: "bg-badge-orange"
-  },
-  cyan: {
-    default: "bg-badge-cyan/20 text-badge-cyan-fg",
-    muted: "bg-badge-cyan/10 text-badge-cyan-fg",
-    indicator: "bg-badge-cyan"
-  },
-  pink: {
-    default: "bg-badge-pink/20 text-badge-pink-fg",
-    muted: "bg-badge-pink/10 text-badge-pink-fg",
-    indicator: "bg-badge-pink"
-  }
-};
-const badgeSizeStyles = {
-  xs: {
-    badge: "h-[18px] gap-0.5 text-ui-xs",
-    withoutLeadingVisual: "px-1.5",
-    withLeadingVisual: "pl-1 pr-1.5",
-    indicator: "size-1"
-  },
-  sm: {
-    badge: "h-5 gap-1 text-ui-xs",
-    withoutLeadingVisual: "px-1.5",
-    withLeadingVisual: "px-1.5",
-    indicator: "size-1"
-  },
-  md: {
-    badge: "h-5 gap-1 text-ui-sm",
-    withoutLeadingVisual: "px-2",
-    withLeadingVisual: "pl-1.5 pr-2",
-    indicator: "size-1.5"
-  }
-};
-const Badge = ({
-  icon,
-  indicator,
-  variant = "neutral",
-  emphasis = "default",
-  size = "md",
-  className,
-  children,
-  ...props
-}) => {
-  const hasIcon = Boolean(icon);
-  const withLeadingVisual = hasIcon || indicator !== void 0;
-  const sizeStyles = badgeSizeStyles[size];
-  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      className: utils_cn.cn(
-        "inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px] font-medium",
-        "inset-ring-1 inset-ring-current/5",
-        "inset-shadow-xs inset-shadow-white/5 dark:inset-shadow-[0_3px_10px_-2px_white] dark:inset-shadow-white/7",
-        "dark:bg-linear-to-b dark:from-white/3 dark:to-white/0",
-        badgeToneStyles[variant][emphasis],
-        sizeStyles.badge,
-        paddingClass,
-        primitives_transitions.transitions.colors,
-        className
-      ),
-      ...props,
-      children: [
-        indicator !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: utils_cn.cn(
-              "shrink-0 rounded-full",
-              badgeToneStyles[variant].indicator,
-              sizeStyles.indicator,
-              indicator === "pulse" && "motion-safe:animate-pulse motion-reduce:animate-none"
-            )
-          }
-        ) : null,
-        hasIcon ? /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "sm", children: icon }) : null,
-        children
-      ]
-    }
-  );
-};
-
-exports.Badge = Badge;
-//# sourceMappingURL=Badge-B-LKnrNk.cjs.map

package/dist/Badge-B-LKnrNk.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge-B-LKnrNk.cjs","sources":["../src/ds/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type BadgeEmphasis = 'default' | 'muted';\nexport type BadgeIndicator = 'dot' | 'pulse';\n\ntype BadgeToneStyles = Record<BadgeEmphasis, string> & { indicator: string };\n\nconst badgeToneStyles = {\n  neutral: {\n    default: 'bg-neutral6/5 text-badge-neutral-fg',\n    muted: 'bg-neutral6/[0.025] text-badge-neutral-fg',\n    indicator: 'bg-neutral3',\n  },\n  green: {\n    default: 'bg-badge-green/20 text-badge-green-fg',\n    muted: 'bg-badge-green/10 text-badge-green-fg',\n    indicator: 'bg-badge-green',\n  },\n  red: {\n    default: 'bg-badge-red/20 text-badge-red-fg',\n    muted: 'bg-badge-red/10 text-badge-red-fg',\n    indicator: 'bg-badge-red',\n  },\n  blue: {\n    default: 'bg-badge-blue/20 text-badge-blue-fg',\n    muted: 'bg-badge-blue/10 text-badge-blue-fg',\n    indicator: 'bg-badge-blue',\n  },\n  yellow: {\n    default: 'bg-badge-yellow/20 text-badge-yellow-fg',\n    muted: 'bg-badge-yellow/10 text-badge-yellow-fg',\n    indicator: 'bg-badge-yellow',\n  },\n  purple: {\n    default: 'bg-badge-purple/20 text-badge-purple-fg',\n    muted: 'bg-badge-purple/10 text-badge-purple-fg',\n    indicator: 'bg-badge-purple',\n  },\n  orange: {\n    default: 'bg-badge-orange/20 text-badge-orange-fg',\n    muted: 'bg-badge-orange/10 text-badge-orange-fg',\n    indicator: 'bg-badge-orange',\n  },\n  cyan: {\n    default: 'bg-badge-cyan/20 text-badge-cyan-fg',\n    muted: 'bg-badge-cyan/10 text-badge-cyan-fg',\n    indicator: 'bg-badge-cyan',\n  },\n  pink: {\n    default: 'bg-badge-pink/20 text-badge-pink-fg',\n    muted: 'bg-badge-pink/10 text-badge-pink-fg',\n    indicator: 'bg-badge-pink',\n  },\n} satisfies Record<string, BadgeToneStyles>;\n\nexport type BadgeVariant = keyof typeof badgeToneStyles;\n\nconst badgeSizeStyles = {\n  xs: {\n    badge: 'h-[18px] gap-0.5 text-ui-xs',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'pl-1 pr-1.5',\n    indicator: 'size-1',\n  },\n  sm: {\n    badge: 'h-5 gap-1 text-ui-xs',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'px-1.5',\n    indicator: 'size-1',\n  },\n  md: {\n    badge: 'h-5 gap-1 text-ui-sm',\n    withoutLeadingVisual: 'px-2',\n    withLeadingVisual: 'pl-1.5 pr-2',\n    indicator: 'size-1.5',\n  },\n};\n\nexport type BadgeSize = keyof typeof badgeSizeStyles;\n\ntype BadgeLeadingVisual = { icon?: ReactNode; indicator?: never } | { icon?: never; indicator?: BadgeIndicator };\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> &\n  BadgeLeadingVisual & {\n    variant?: BadgeVariant;\n    emphasis?: BadgeEmphasis;\n    size?: BadgeSize;\n    children?: ReactNode;\n  };\n\nexport const Badge = ({\n  icon,\n  indicator,\n  variant = 'neutral',\n  emphasis = 'default',\n  size = 'md',\n  className,\n  children,\n  ...props\n}: BadgeProps) => {\n  const hasIcon = Boolean(icon);\n  const withLeadingVisual = hasIcon || indicator !== undefined;\n  const sizeStyles = badgeSizeStyles[size];\n  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px] font-medium',\n        'inset-ring-1 inset-ring-current/5',\n        'inset-shadow-xs inset-shadow-white/5 dark:inset-shadow-[0_3px_10px_-2px_white] dark:inset-shadow-white/7',\n        'dark:bg-linear-to-b dark:from-white/3 dark:to-white/0',\n        badgeToneStyles[variant][emphasis],\n        sizeStyles.badge,\n        paddingClass,\n        transitions.colors,\n        className,\n      )}\n      {...props}\n    >\n      {indicator !== undefined ? (\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'shrink-0 rounded-full',\n            badgeToneStyles[variant].indicator,\n            sizeStyles.indicator,\n            indicator === 'pulse' && 'motion-safe:animate-pulse motion-reduce:animate-none',\n          )}\n        />\n      ) : null}\n      {hasIcon ? <Icon size=\"sm\">{icon}</Icon> : null}\n      {children}\n    </span>\n  );\n};\n"],"names":["jsxs","cn","transitions","jsx","Icon"],"mappings":"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"}