@mastra/playground-ui 57.0.0-alpha.3 → 57.0.0

package/dist/components/DisabledFeatureButton.cjs.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const Button = require('../Button-MMZPEb_q.cjs');
+const tooltip = require('../tooltip-FvWL16Xn.cjs');
+const primitives_transitions = require('../primitives/transitions.cjs.js');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
+
+function DisabledFeatureButton({ icon, label, tooltipContent, docsHref }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      tooltip.TooltipTrigger,
+      {
+        render: /* @__PURE__ */ jsxRuntime.jsx("span", { role: "button", tabIndex: 0, "aria-disabled": "true", "aria-label": label, className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "ghost", size: "icon-md", disabled: true, "aria-hidden": "true", tabIndex: -1, children: icon }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { side: "bottom", className: "max-w-[calc(100dvw-1rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      tooltipContent,
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "a",
+        {
+          href: docsHref,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: utils_cn.cn(
+            "inline-flex items-center gap-1 text-inherit underline hover:text-foreground",
+            primitives_transitions.controlStateColorTransition
+          ),
+          children: [
+            "Learn more",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "size-3" })
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+
+exports.DisabledFeatureButton = DisabledFeatureButton;
+//# sourceMappingURL=DisabledFeatureButton.cjs.js.map

package/dist/components/DisabledFeatureButton.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisabledFeatureButton.cjs.js","sources":["../../src/ds/components/DisabledFeatureButton/disabled-feature-button.tsx"],"sourcesContent":["import { ExternalLink } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type DisabledFeatureButtonProps = {\n  icon: ReactNode;\n  label: string;\n  tooltipContent: ReactNode;\n  docsHref: `https://${string}`;\n};\n\n/**\n * Icon-only, disabled control for a feature that is not available yet.\n * The focusable wrapper carries the accessible name and disabled state so the\n * tooltip stays reachable by keyboard while the visual button remains inert.\n */\nexport function DisabledFeatureButton({ icon, label, tooltipContent, docsHref }: DisabledFeatureButtonProps) {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <span role=\"button\" tabIndex={0} aria-disabled=\"true\" aria-label={label} className=\"inline-flex\">\n            <Button variant=\"ghost\" size=\"icon-md\" disabled aria-hidden=\"true\" tabIndex={-1}>\n              {icon}\n            </Button>\n          </span>\n        }\n      />\n      <TooltipContent side=\"bottom\" className=\"max-w-[calc(100dvw-1rem)]\">\n        <span>\n          {tooltipContent}{' '}\n          <a\n            href={docsHref}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className={cn(\n              'inline-flex items-center gap-1 text-inherit underline hover:text-foreground',\n              controlStateColorTransition,\n            )}\n          >\n            Learn more\n            <ExternalLink className=\"size-3\" />\n          </a>\n        </span>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["Tooltip","jsx","TooltipTrigger","Button","TooltipContent","jsxs","cn","controlStateColorTransition","ExternalLink"],"mappings":";;;;;;;;;;;AAoBO,SAAS,sBAAsB,EAAE,IAAA,EAAM,KAAA,EAAO,cAAA,EAAgB,UAAS,EAA+B;AAC3G,EAAA,uCACGA,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,sBAAA;AAAA,MAAA;AAAA,QACC,MAAA,kBACED,cAAA,CAAC,MAAA,EAAA,EAAK,IAAA,EAAK,QAAA,EAAS,QAAA,EAAU,CAAA,EAAG,eAAA,EAAc,MAAA,EAAO,YAAA,EAAY,KAAA,EAAO,SAAA,EAAU,aAAA,EACjF,yCAACE,aAAA,EAAA,EAAO,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAU,QAAA,EAAQ,IAAA,EAAC,aAAA,EAAY,MAAA,EAAO,QAAA,EAAU,EAAA,EAC1E,QAAA,EAAA,IAAA,EACH,CAAA,EACF;AAAA;AAAA,KAEJ;AAAA,mCACCC,sBAAA,EAAA,EAAe,IAAA,EAAK,UAAS,SAAA,EAAU,2BAAA,EACtC,0CAAC,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,cAAA;AAAA,MAAgB,GAAA;AAAA,sBACjBC,eAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAM,QAAA;AAAA,UACN,MAAA,EAAO,QAAA;AAAA,UACP,GAAA,EAAI,qBAAA;AAAA,UACJ,SAAA,EAAWC,WAAA;AAAA,YACT,6EAAA;AAAA,YACAC;AAAA,WACF;AAAA,UACD,QAAA,EAAA;AAAA,YAAA,YAAA;AAAA,4BAECN,cAAA,CAACO,wBAAA,EAAA,EAAa,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA;AAAA;AACnC,KAAA,EACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/DisabledFeatureButton.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/components/DisabledFeatureButton/index'
+export {}

package/dist/components/DisabledFeatureButton.es.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ExternalLink } from 'lucide-react';
+import { B as Button } from '../Button-KUj0U-5I.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-BrDiP0RI.js';
+import { controlStateColorTransition } from '../primitives/transitions.es.js';
+import { c as cn } from '../cn-65Adrsfj.js';
+
+function DisabledFeatureButton({ icon, label, tooltipContent, docsHref }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(
+      TooltipTrigger,
+      {
+        render: /* @__PURE__ */ jsx("span", { role: "button", tabIndex: 0, "aria-disabled": "true", "aria-label": label, className: "inline-flex", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-md", disabled: true, "aria-hidden": "true", tabIndex: -1, children: icon }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", className: "max-w-[calc(100dvw-1rem)]", children: /* @__PURE__ */ jsxs("span", { children: [
+      tooltipContent,
+      " ",
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: docsHref,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: cn(
+            "inline-flex items-center gap-1 text-inherit underline hover:text-foreground",
+            controlStateColorTransition
+          ),
+          children: [
+            "Learn more",
+            /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+
+export { DisabledFeatureButton };
+//# sourceMappingURL=DisabledFeatureButton.es.js.map

package/dist/components/DisabledFeatureButton.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisabledFeatureButton.es.js","sources":["../../src/ds/components/DisabledFeatureButton/disabled-feature-button.tsx"],"sourcesContent":["import { ExternalLink } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type DisabledFeatureButtonProps = {\n  icon: ReactNode;\n  label: string;\n  tooltipContent: ReactNode;\n  docsHref: `https://${string}`;\n};\n\n/**\n * Icon-only, disabled control for a feature that is not available yet.\n * The focusable wrapper carries the accessible name and disabled state so the\n * tooltip stays reachable by keyboard while the visual button remains inert.\n */\nexport function DisabledFeatureButton({ icon, label, tooltipContent, docsHref }: DisabledFeatureButtonProps) {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <span role=\"button\" tabIndex={0} aria-disabled=\"true\" aria-label={label} className=\"inline-flex\">\n            <Button variant=\"ghost\" size=\"icon-md\" disabled aria-hidden=\"true\" tabIndex={-1}>\n              {icon}\n            </Button>\n          </span>\n        }\n      />\n      <TooltipContent side=\"bottom\" className=\"max-w-[calc(100dvw-1rem)]\">\n        <span>\n          {tooltipContent}{' '}\n          <a\n            href={docsHref}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className={cn(\n              'inline-flex items-center gap-1 text-inherit underline hover:text-foreground',\n              controlStateColorTransition,\n            )}\n          >\n            Learn more\n            <ExternalLink className=\"size-3\" />\n          </a>\n        </span>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAoBO,SAAS,sBAAsB,EAAE,IAAA,EAAM,KAAA,EAAO,cAAA,EAAgB,UAAS,EAA+B;AAC3G,EAAA,4BACG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,MAAA,kBACE,GAAA,CAAC,MAAA,EAAA,EAAK,IAAA,EAAK,QAAA,EAAS,QAAA,EAAU,CAAA,EAAG,eAAA,EAAc,MAAA,EAAO,YAAA,EAAY,KAAA,EAAO,SAAA,EAAU,aAAA,EACjF,8BAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAU,QAAA,EAAQ,IAAA,EAAC,aAAA,EAAY,MAAA,EAAO,QAAA,EAAU,EAAA,EAC1E,QAAA,EAAA,IAAA,EACH,CAAA,EACF;AAAA;AAAA,KAEJ;AAAA,wBACC,cAAA,EAAA,EAAe,IAAA,EAAK,UAAS,SAAA,EAAU,2BAAA,EACtC,+BAAC,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,cAAA;AAAA,MAAgB,GAAA;AAAA,sBACjB,IAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAM,QAAA;AAAA,UACN,MAAA,EAAO,QAAA;AAAA,UACP,GAAA,EAAI,qBAAA;AAAA,UACJ,SAAA,EAAW,EAAA;AAAA,YACT,6EAAA;AAAA,YACA;AAAA,WACF;AAAA,UACD,QAAA,EAAA;AAAA,YAAA,YAAA;AAAA,4BAEC,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA;AAAA;AACnC,KAAA,EACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/LogsDataList.cjs.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const logsDataList = require('../logs-data-list-DgoCLb6k.cjs');
 const dataListSkeleton = require('../data-list-skeleton-K_WmrVke.cjs');
+require('react');
+require('../keyboard/keyboard-shortcuts-context.cjs.js');
 
 
 

package/dist/components/LogsDataList.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/components/LogsDataList.es.js

@@ -1,3 +1,5 @@
 export { L as LogsDataList } from '../logs-data-list-B24gfDle.js';
 export { D as LogsDataListSkeleton } from '../data-list-skeleton-h4pILqCC.js';
+import 'react';
+import '../keyboard/keyboard-shortcuts-context.es.js';
 //# sourceMappingURL=LogsDataList.es.js.map

package/dist/components/LogsDataList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/Workflow.cjs.js

@@ -51,6 +51,7 @@ function getWorkflowCardBadge(props) {
     return { label: "Delay", tone: "purple", Icon: lucideReact.Timer, indicator: "sleep" };
   if (props.nodeKind === "agent") return { label: "Agent", tone: "cyan", Icon: lucideReact.Bot };
   if (props.nodeKind === "tool") return { label: "Tool", tone: "pink", Icon: lucideReact.Wrench };
+  if (props.nodeKind === "classifier") return { label: "Classifier", tone: "blue", Icon: lucideReact.GitBranch };
   return { label: "Step", tone: "neutral", Icon: lucideReact.Braces };
 }