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

package/dist/components/DataDetailsPanel.cjs.js

@@ -0,0 +1,228 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('../utils-vA5sWo9W.cjs');
+const lucideReact = require('lucide-react');
+const Button = require('../Button-DpIX8JMz.cjs');
+const langJson = require('@codemirror/lang-json');
+const language = require('@codemirror/language');
+const view = require('@codemirror/view');
+const highlight = require('@lezer/highlight');
+const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
+const ReactCodeMirror = require('@uiw/react-codemirror');
+const React = require('react');
+const buttonsGroup = require('../buttons-group-BvLg2kpv.cjs');
+const copyButton = require('../copy-button-lrxHKwwi.cjs');
+const themeProvider = require('../theme-provider-aO5-jZVp.cjs');
+const spinner = require('../spinner-PSUHmhye.cjs');
+
+function DataDetailsPanel$1({ collapsed, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: utils.cn(
+        "flex flex-col bg-surface2 border border-border1 rounded-xl overflow-hidden",
+        collapsed ? "h-auto" : "h-full"
+      ),
+      children
+    }
+  );
+}
+
+function DataDetailsPanelCloseButton({
+  onClick,
+  tooltip = "Close panel",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size: "md", onClick, "aria-label": "Close Panel", tooltip, className, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) });
+}
+
+function buildDarkTheme() {
+  return codemirrorThemeDracula.draculaInit({
+    settings: {
+      fontFamily: "var(--font-mono)",
+      fontSize: "0.75rem",
+      lineHighlight: "transparent",
+      gutterBackground: "transparent",
+      gutterForeground: "#939393",
+      background: "transparent"
+    },
+    styles: [{ tag: [highlight.tags.className, highlight.tags.propertyName] }]
+  });
+}
+function buildLightTheme() {
+  const editorTheme = view.EditorView.theme({
+    "&": {
+      backgroundColor: "transparent",
+      color: "var(--neutral6)",
+      fontSize: "0.75rem"
+    },
+    "&.cm-editor .cm-scroller": {
+      fontFamily: "var(--font-mono)"
+    },
+    ".cm-gutters": {
+      backgroundColor: "transparent",
+      color: "var(--neutral2)",
+      borderRight: "none"
+    },
+    ".cm-content": {
+      color: "var(--neutral6)",
+      caretColor: "var(--neutral6)"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "transparent"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "transparent"
+    },
+    ".cm-cursor, .cm-dropCursor": {
+      borderLeftColor: "var(--neutral6)"
+    }
+  });
+  const highlightStyle = language.HighlightStyle.define([
+    { tag: [highlight.tags.comment, highlight.tags.bracket], color: "var(--neutral2)" },
+    { tag: [highlight.tags.string, highlight.tags.meta, highlight.tags.regexp], color: "var(--accent1)" },
+    { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: "var(--accent6)" },
+    { tag: [highlight.tags.keyword, highlight.tags.operator, highlight.tags.tagName], color: "var(--accent2)" },
+    { tag: [highlight.tags.function(highlight.tags.propertyName), highlight.tags.propertyName], color: "var(--accent5)" },
+    {
+      tag: [highlight.tags.definition(highlight.tags.variableName), highlight.tags.function(highlight.tags.variableName), highlight.tags.className, highlight.tags.attributeName],
+      color: "var(--accent3)"
+    },
+    { tag: [highlight.tags.variableName, highlight.tags.number], color: "var(--accent5)" },
+    { tag: [highlight.tags.name, highlight.tags.quote], color: "var(--accent1)" }
+  ]);
+  return [editorTheme, language.syntaxHighlighting(highlightStyle)];
+}
+const useCodemirrorTheme = () => {
+  const isDark = themeProvider.useTheme().resolvedTheme === "dark";
+  return React.useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
+};
+function DataDetailsPanelCodeSection({
+  codeStr = "",
+  title,
+  icon,
+  simplified = false,
+  className
+}) {
+  const theme = useCodemirrorTheme();
+  const [showAsMultilineText, setShowAsMultilineText] = React.useState(false);
+  const hasMultilineText = React.useMemo(() => {
+    try {
+      const parsed = JSON.parse(codeStr);
+      return containsInnerNewline(parsed || "");
+    } catch {
+      return false;
+    }
+  }, [codeStr]);
+  const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\n/g, "\n") : codeStr;
+  const usePlainTextView = simplified || showAsMultilineText;
+  if (!codeStr || codeStr === "null") return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: utils.cn(
+            "flex items-center gap-1.5 text-ui-xs uppercase tracking-widest text-neutral2",
+            "[&>svg]:size-3.5"
+          ),
+          children: [
+            icon,
+            title
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(copyButton.CopyButton, { content: codeStr || "No content", size: "sm" }),
+        hasMultilineText && /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            size: "sm",
+            "aria-label": showAsMultilineText ? "Show escaped newlines" : "Show multiline text",
+            onClick: () => setShowAsMultilineText((v) => !v),
+            children: showAsMultilineText ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeftIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignJustifyIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dark:bg-black/20 bg-surface3 p-3 overflow-hidden rounded-lg border dark:border-white/10 border-border1 text-neutral4 text-ui-sm break-all max-h-[30vh] overflow-y-auto", children: usePlainTextView ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral4 font-mono break-all", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-wrap", children: finalCodeStr }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+      ReactCodeMirror,
+      {
+        extensions: [langJson.json(), view.EditorView.lineWrapping],
+        theme,
+        value: codeStr,
+        editable: false
+      }
+    ) })
+  ] });
+}
+function containsInnerNewline(obj) {
+  if (typeof obj === "string") {
+    const idx = obj.indexOf("\n");
+    return idx !== -1 && idx !== obj.length - 1;
+  } else if (Array.isArray(obj)) {
+    return obj.some((item) => containsInnerNewline(item));
+  } else if (obj && typeof obj === "object") {
+    return Object.values(obj).some((value) => containsInnerNewline(value));
+  }
+  return false;
+}
+
+function DataDetailsPanelContent({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 p-4 overflow-y-auto", children });
+}
+
+function DataDetailsPanelHeader({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex items-center justify-between gap-2 border-b border-border1 mx-4 py-3", className), children });
+}
+
+function DataDetailsPanelHeading({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: utils.cn("flex gap-2 text-ui-md text-neutral3 [&>b]:text-neutral2 [&>b]:font-normal", className), children });
+}
+
+function Root({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: utils.cn("grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5", className), children });
+}
+function Key({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dt", { className: utils.cn("text-ui-smd  text-neutral2 shrink-0 py-0.5", className), children });
+}
+function Value({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: utils.cn("text-ui-smd text-neutral3 truncate min-w-0 py-0.5", className), children });
+}
+function Header({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dt", { className: utils.cn("col-span-2 text-ui-sm uppercase tracking-widest text-neutral2 py-3", className), children });
+}
+const DataDetailsPanelKeyValueList = Object.assign(Root, {
+  Key,
+  Value,
+  Header
+});
+
+function DataDetailsPanelLoadingData({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-6 text-ui-sm text-neutral3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "sm", variant: "pulse", className: "text-neutral3" }),
+    " ",
+    children ?? "Loading..."
+  ] });
+}
+
+function DataDetailsPanelNoData({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-4 py-6 text-ui-sm text-neutral2", children: children ?? "No data found." });
+}
+
+const DataDetailsPanel = Object.assign(DataDetailsPanel$1, {
+  Header: DataDetailsPanelHeader,
+  Heading: DataDetailsPanelHeading,
+  CloseButton: DataDetailsPanelCloseButton,
+  LoadingData: DataDetailsPanelLoadingData,
+  NoData: DataDetailsPanelNoData,
+  Content: DataDetailsPanelContent,
+  KeyValueList: DataDetailsPanelKeyValueList,
+  CodeSection: DataDetailsPanelCodeSection
+});
+
+exports.DataDetailsPanel = DataDetailsPanel;
+//# sourceMappingURL=DataDetailsPanel.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataDetailsPanel.cjs.js","sources":["../../src/ds/components/DataDetailsPanel/data-details-panel.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-close-button.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-code-section.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-content.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-header.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-heading.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-key-value-list.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-loading-data.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-no-data.tsx","../../src/ds/components/DataDetailsPanel/index.ts"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport interface DataDetailsPanelProps {\n  collapsed?: boolean;\n  children: React.ReactNode;\n}\n\nexport function DataDetailsPanel({ collapsed, children }: DataDetailsPanelProps) {\n  return (\n    <section\n      className={cn(\n        'flex flex-col bg-surface2 border border-border1 rounded-xl overflow-hidden',\n        collapsed ? 'h-auto' : 'h-full',\n      )}\n    >\n      {children}\n    </section>\n  );\n}\n","import { XIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\n\nexport interface DataDetailsPanelCloseButtonProps {\n  onClick: () => void;\n  tooltip?: string;\n  className?: string;\n}\n\nexport function DataDetailsPanelCloseButton({\n  onClick,\n  tooltip = 'Close panel',\n  className,\n}: DataDetailsPanelCloseButtonProps) {\n  return (\n    <Button size=\"md\" onClick={onClick} aria-label=\"Close Panel\" tooltip={tooltip} className={className}>\n      <XIcon />\n    </Button>\n  );\n}\n","import { json } from '@codemirror/lang-json';\nimport { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport type { Extension } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport { tags as t } from '@lezer/highlight';\nimport { draculaInit } from '@uiw/codemirror-theme-dracula';\nimport ReactCodeMirror from '@uiw/react-codemirror';\nimport { AlignJustifyIcon, AlignLeftIcon } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { useTheme } from '@/ds/components/ThemeProvider';\nimport { cn } from '@/lib/utils';\n\nfunction buildDarkTheme(): Extension {\n  return draculaInit({\n    settings: {\n      fontFamily: 'var(--font-mono)',\n      fontSize: '0.75rem',\n      lineHighlight: 'transparent',\n      gutterBackground: 'transparent',\n      gutterForeground: '#939393',\n      background: 'transparent',\n    },\n    styles: [{ tag: [t.className, t.propertyName] }],\n  });\n}\n\nfunction buildLightTheme(): Extension {\n  const editorTheme = EditorView.theme({\n    '&': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral6)',\n      fontSize: '0.75rem',\n    },\n    '&.cm-editor .cm-scroller': {\n      fontFamily: 'var(--font-mono)',\n    },\n    '.cm-gutters': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral2)',\n      borderRight: 'none',\n    },\n    '.cm-content': {\n      color: 'var(--neutral6)',\n      caretColor: 'var(--neutral6)',\n    },\n    '.cm-activeLine': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-activeLineGutter': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-cursor, .cm-dropCursor': {\n      borderLeftColor: 'var(--neutral6)',\n    },\n  });\n\n  const highlightStyle = HighlightStyle.define([\n    { tag: [t.comment, t.bracket], color: 'var(--neutral2)' },\n    { tag: [t.string, t.meta, t.regexp], color: 'var(--accent1)' },\n    { tag: [t.atom, t.bool, t.special(t.variableName)], color: 'var(--accent6)' },\n    { tag: [t.keyword, t.operator, t.tagName], color: 'var(--accent2)' },\n    { tag: [t.function(t.propertyName), t.propertyName], color: 'var(--accent5)' },\n    {\n      tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],\n      color: 'var(--accent3)',\n    },\n    { tag: [t.variableName, t.number], color: 'var(--accent5)' },\n    { tag: [t.name, t.quote], color: 'var(--accent1)' },\n  ]);\n\n  return [editorTheme, syntaxHighlighting(highlightStyle)];\n}\n\nconst useCodemirrorTheme = (): Extension => {\n  const isDark = useTheme().resolvedTheme === 'dark';\n  return useMemo(() => (isDark ? buildDarkTheme() : buildLightTheme()), [isDark]);\n};\n\nexport interface DataDetailsPanelCodeSectionProps {\n  title: React.ReactNode;\n  icon?: React.ReactNode;\n  codeStr?: string;\n  simplified?: boolean;\n  className?: string;\n}\n\nexport function DataDetailsPanelCodeSection({\n  codeStr = '',\n  title,\n  icon,\n  simplified = false,\n  className,\n}: DataDetailsPanelCodeSectionProps) {\n  const theme = useCodemirrorTheme();\n  const [showAsMultilineText, setShowAsMultilineText] = useState(false);\n  const hasMultilineText = useMemo(() => {\n    try {\n      const parsed = JSON.parse(codeStr);\n      return containsInnerNewline(parsed || '');\n    } catch {\n      return false;\n    }\n  }, [codeStr]);\n\n  const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\\\n/g, '\\n') : codeStr;\n  const usePlainTextView = simplified || showAsMultilineText;\n\n  if (!codeStr || codeStr === 'null') return null;\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      <div className=\"flex items-center justify-between\">\n        <div\n          className={cn(\n            'flex items-center gap-1.5 text-ui-xs uppercase tracking-widest text-neutral2',\n            '[&>svg]:size-3.5',\n          )}\n        >\n          {icon}\n          {title}\n        </div>\n        <ButtonsGroup>\n          <CopyButton content={codeStr || 'No content'} size=\"sm\" />\n          {hasMultilineText && (\n            <Button\n              size=\"sm\"\n              aria-label={showAsMultilineText ? 'Show escaped newlines' : 'Show multiline text'}\n              onClick={() => setShowAsMultilineText(v => !v)}\n            >\n              {showAsMultilineText ? <AlignLeftIcon /> : <AlignJustifyIcon />}\n            </Button>\n          )}\n        </ButtonsGroup>\n      </div>\n      <div className=\"dark:bg-black/20 bg-surface3 p-3 overflow-hidden rounded-lg border dark:border-white/10 border-border1 text-neutral4 text-ui-sm break-all max-h-[30vh] overflow-y-auto\">\n        {usePlainTextView ? (\n          <div className=\"text-neutral4 font-mono break-all\">\n            <pre className=\"text-wrap\">{finalCodeStr}</pre>\n          </div>\n        ) : (\n          <ReactCodeMirror\n            extensions={[json(), EditorView.lineWrapping]}\n            theme={theme}\n            value={codeStr}\n            editable={false}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction containsInnerNewline(obj: unknown): boolean {\n  if (typeof obj === 'string') {\n    const idx = obj.indexOf('\\n');\n    return idx !== -1 && idx !== obj.length - 1;\n  } else if (Array.isArray(obj)) {\n    return obj.some(item => containsInnerNewline(item));\n  } else if (obj && typeof obj === 'object') {\n    return Object.values(obj).some(value => containsInnerNewline(value));\n  }\n  return false;\n}\n","import type { ReactNode } from 'react';\n\nexport interface DataDetailsPanelContentProps {\n  children: ReactNode;\n}\n\nexport function DataDetailsPanelContent({ children }: DataDetailsPanelContentProps) {\n  return <div className=\"flex-1 p-4 overflow-y-auto\">{children}</div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataDetailsPanelHeaderProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataDetailsPanelHeader({ className, children }: DataDetailsPanelHeaderProps) {\n  return (\n    <div className={cn('flex items-center justify-between gap-2 border-b border-border1 mx-4 py-3', className)}>\n      {children}\n    </div>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataDetailsPanelHeadingProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataDetailsPanelHeading({ className, children }: DataDetailsPanelHeadingProps) {\n  return (\n    <h3 className={cn('flex gap-2 text-ui-md text-neutral3 [&>b]:text-neutral2 [&>b]:font-normal', className)}>\n      {children}\n    </h3>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataDetailsPanelKeyValueListProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nfunction Root({ className, children }: DataDetailsPanelKeyValueListProps) {\n  return <dl className={cn('grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5', className)}>{children}</dl>;\n}\n\nexport interface DataDetailsPanelKeyValueListKeyProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nfunction Key({ className, children }: DataDetailsPanelKeyValueListKeyProps) {\n  return <dt className={cn('text-ui-smd  text-neutral2 shrink-0 py-0.5', className)}>{children}</dt>;\n}\n\nexport interface DataDetailsPanelKeyValueListValueProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nfunction Value({ className, children }: DataDetailsPanelKeyValueListValueProps) {\n  return <dd className={cn('text-ui-smd text-neutral3 truncate min-w-0 py-0.5', className)}>{children}</dd>;\n}\n\nexport interface DataDetailsPanelKeyValueListHeaderProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nfunction Header({ className, children }: DataDetailsPanelKeyValueListHeaderProps) {\n  return (\n    <dt className={cn('col-span-2 text-ui-sm uppercase tracking-widest text-neutral2 py-3', className)}>{children}</dt>\n  );\n}\n\nexport const DataDetailsPanelKeyValueList = Object.assign(Root, {\n  Key,\n  Value,\n  Header,\n});\n","import type { ReactNode } from 'react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport interface DataDetailsPanelLoadingDataProps {\n  children?: ReactNode;\n}\n\nexport function DataDetailsPanelLoadingData({ children }: DataDetailsPanelLoadingDataProps) {\n  return (\n    <div className=\"flex items-center justify-center gap-2 px-4 py-6 text-ui-sm text-neutral3\">\n      <Spinner size=\"sm\" variant=\"pulse\" className=\"text-neutral3\" /> {children ?? 'Loading...'}\n    </div>\n  );\n}\n","export interface DataDetailsPanelNoDataProps {\n  children?: React.ReactNode;\n}\n\nexport function DataDetailsPanelNoData({ children }: DataDetailsPanelNoDataProps) {\n  return <p className=\"px-4 py-6 text-ui-sm text-neutral2\">{children ?? 'No data found.'}</p>;\n}\n","import { DataDetailsPanel as Root } from './data-details-panel';\nimport { DataDetailsPanelCloseButton } from './data-details-panel-close-button';\nimport { DataDetailsPanelCodeSection } from './data-details-panel-code-section';\nimport { DataDetailsPanelContent } from './data-details-panel-content';\nimport { DataDetailsPanelHeader } from './data-details-panel-header';\nimport { DataDetailsPanelHeading } from './data-details-panel-heading';\nimport { DataDetailsPanelKeyValueList } from './data-details-panel-key-value-list';\nimport { DataDetailsPanelLoadingData } from './data-details-panel-loading-data';\nimport { DataDetailsPanelNoData } from './data-details-panel-no-data';\n\nconst DataDetailsPanel = Object.assign(Root, {\n  Header: DataDetailsPanelHeader,\n  Heading: DataDetailsPanelHeading,\n  CloseButton: DataDetailsPanelCloseButton,\n  LoadingData: DataDetailsPanelLoadingData,\n  NoData: DataDetailsPanelNoData,\n  Content: DataDetailsPanelContent,\n  KeyValueList: DataDetailsPanelKeyValueList,\n  CodeSection: DataDetailsPanelCodeSection,\n});\n\nexport { DataDetailsPanel };\nexport type { DataDetailsPanelProps } from './data-details-panel';\nexport type { DataDetailsPanelHeaderProps } from './data-details-panel-header';\nexport type { DataDetailsPanelHeadingProps } from './data-details-panel-heading';\nexport type { DataDetailsPanelCloseButtonProps } from './data-details-panel-close-button';\nexport type { DataDetailsPanelLoadingDataProps } from './data-details-panel-loading-data';\nexport type { DataDetailsPanelNoDataProps } from './data-details-panel-no-data';\nexport type { DataDetailsPanelContentProps } from './data-details-panel-content';\nexport type {\n  DataDetailsPanelKeyValueListProps,\n  DataDetailsPanelKeyValueListKeyProps,\n  DataDetailsPanelKeyValueListValueProps,\n  DataDetailsPanelKeyValueListHeaderProps,\n} from './data-details-panel-key-value-list';\nexport type { DataDetailsPanelCodeSectionProps } from './data-details-panel-code-section';\n"],"names":["DataDetailsPanel","jsx","cn","Button","XIcon","draculaInit","t","EditorView","HighlightStyle","syntaxHighlighting","useTheme","useMemo","useState","jsxs","ButtonsGroup","CopyButton","AlignLeftIcon","AlignJustifyIcon","json","Spinner","Root"],"mappings":";;;;;;;;;;;;;;;;;;;;AAOO,SAASA,kBAAA,CAAiB,EAAE,SAAA,EAAW,QAAA,EAAS,EAA0B;AAC/E,EAAA,uBACEC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,QAAA;AAAA,QACT,4EAAA;AAAA,QACA,YAAY,QAAA,GAAW;AAAA,OACzB;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;ACTO,SAAS,2BAAA,CAA4B;AAAA,EAC1C,OAAA;AAAA,EACA,OAAA,GAAU,aAAA;AAAA,EACV;AACF,CAAA,EAAqC;AACnC,EAAA,uBACED,cAAA,CAACE,aAAA,EAAA,EAAO,IAAA,EAAK,IAAA,EAAK,OAAA,EAAkB,YAAA,EAAW,aAAA,EAAc,OAAA,EAAkB,SAAA,EAC7E,QAAA,kBAAAF,cAAA,CAACG,iBAAA,EAAA,EAAM,CAAA,EACT,CAAA;AAEJ;;ACJA,SAAS,cAAA,GAA4B;AACnC,EAAA,OAAOC,kCAAA,CAAY;AAAA,IACjB,QAAA,EAAU;AAAA,MACR,UAAA,EAAY,kBAAA;AAAA,MACZ,QAAA,EAAU,SAAA;AAAA,MACV,aAAA,EAAe,aAAA;AAAA,MACf,gBAAA,EAAkB,aAAA;AAAA,MAClB,gBAAA,EAAkB,SAAA;AAAA,MAClB,UAAA,EAAY;AAAA,KACd;AAAA,IACA,MAAA,EAAQ,CAAC,EAAE,GAAA,EAAK,CAACC,eAAE,SAAA,EAAWA,cAAA,CAAE,YAAY,CAAA,EAAG;AAAA,GAChD,CAAA;AACH;AAEA,SAAS,eAAA,GAA6B;AACpC,EAAA,MAAM,WAAA,GAAcC,gBAAW,KAAA,CAAM;AAAA,IACnC,GAAA,EAAK;AAAA,MACH,eAAA,EAAiB,aAAA;AAAA,MACjB,KAAA,EAAO,iBAAA;AAAA,MACP,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,0BAAA,EAA4B;AAAA,MAC1B,UAAA,EAAY;AAAA,KACd;AAAA,IACA,aAAA,EAAe;AAAA,MACb,eAAA,EAAiB,aAAA;AAAA,MACjB,KAAA,EAAO,iBAAA;AAAA,MACP,WAAA,EAAa;AAAA,KACf;AAAA,IACA,aAAA,EAAe;AAAA,MACb,KAAA,EAAO,iBAAA;AAAA,MACP,UAAA,EAAY;AAAA,KACd;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,sBAAA,EAAwB;AAAA,MACtB,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,4BAAA,EAA8B;AAAA,MAC5B,eAAA,EAAiB;AAAA;AACnB,GACD,CAAA;AAED,EAAA,MAAM,cAAA,GAAiBC,wBAAe,MAAA,CAAO;AAAA,IAC3C,EAAE,KAAK,CAACF,cAAA,CAAE,SAASA,cAAA,CAAE,OAAO,CAAA,EAAG,KAAA,EAAO,iBAAA,EAAkB;AAAA,IACxD,EAAE,GAAA,EAAK,CAACA,cAAA,CAAE,MAAA,EAAQA,cAAA,CAAE,IAAA,EAAMA,cAAA,CAAE,MAAM,CAAA,EAAG,KAAA,EAAO,gBAAA,EAAiB;AAAA,IAC7D,EAAE,GAAA,EAAK,CAACA,cAAA,CAAE,MAAMA,cAAA,CAAE,IAAA,EAAMA,cAAA,CAAE,OAAA,CAAQA,cAAA,CAAE,YAAY,CAAC,CAAA,EAAG,OAAO,gBAAA,EAAiB;AAAA,IAC5E,EAAE,GAAA,EAAK,CAACA,cAAA,CAAE,OAAA,EAASA,cAAA,CAAE,QAAA,EAAUA,cAAA,CAAE,OAAO,CAAA,EAAG,KAAA,EAAO,gBAAA,EAAiB;AAAA,IACnE,EAAE,GAAA,EAAK,CAACA,cAAA,CAAE,QAAA,CAASA,cAAA,CAAE,YAAY,CAAA,EAAGA,cAAA,CAAE,YAAY,CAAA,EAAG,KAAA,EAAO,gBAAA,EAAiB;AAAA,IAC7E;AAAA,MACE,GAAA,EAAK,CAACA,cAAA,CAAE,UAAA,CAAWA,eAAE,YAAY,CAAA,EAAGA,cAAA,CAAE,QAAA,CAASA,eAAE,YAAY,CAAA,EAAGA,cAAA,CAAE,SAAA,EAAWA,eAAE,aAAa,CAAA;AAAA,MAC5F,KAAA,EAAO;AAAA,KACT;AAAA,IACA,EAAE,KAAK,CAACA,cAAA,CAAE,cAAcA,cAAA,CAAE,MAAM,CAAA,EAAG,KAAA,EAAO,gBAAA,EAAiB;AAAA,IAC3D,EAAE,KAAK,CAACA,cAAA,CAAE,MAAMA,cAAA,CAAE,KAAK,CAAA,EAAG,KAAA,EAAO,gBAAA;AAAiB,GACnD,CAAA;AAED,EAAA,OAAO,CAAC,WAAA,EAAaG,2BAAA,CAAmB,cAAc,CAAC,CAAA;AACzD;AAEA,MAAM,qBAAqB,MAAiB;AAC1C,EAAA,MAAM,MAAA,GAASC,sBAAA,EAAS,CAAE,aAAA,KAAkB,MAAA;AAC5C,EAAA,OAAOC,aAAA,CAAQ,MAAO,MAAA,GAAS,cAAA,KAAmB,eAAA,EAAgB,EAAI,CAAC,MAAM,CAAC,CAAA;AAChF,CAAA;AAUO,SAAS,2BAAA,CAA4B;AAAA,EAC1C,OAAA,GAAU,EAAA;AAAA,EACV,KAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb;AACF,CAAA,EAAqC;AACnC,EAAA,MAAM,QAAQ,kBAAA,EAAmB;AACjC,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAIC,eAAS,KAAK,CAAA;AACpE,EAAA,MAAM,gBAAA,GAAmBD,cAAQ,MAAM;AACrC,IAAA,IAAI;AACF,MAAA,MAAM,MAAA,GAAS,IAAA,CAAK,KAAA,CAAM,OAAO,CAAA;AACjC,MAAA,OAAO,oBAAA,CAAqB,UAAU,EAAE,CAAA;AAAA,IAC1C,CAAA,CAAA,MAAQ;AACN,MAAA,OAAO,KAAA;AAAA,IACT;AAAA,EACF,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAM,eAAe,mBAAA,GAAsB,OAAA,EAAS,OAAA,CAAQ,MAAA,EAAQ,IAAI,CAAA,GAAI,OAAA;AAC5E,EAAA,MAAM,mBAAmB,UAAA,IAAc,mBAAA;AAEvC,EAAA,IAAI,CAAC,OAAA,IAAW,OAAA,KAAY,MAAA,EAAQ,OAAO,IAAA;AAE3C,EAAA,uCACG,KAAA,EAAA,EAAI,SAAA,EAAWT,QAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA,EACjD,QAAA,EAAA;AAAA,oBAAAW,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,eAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAWX,QAAA;AAAA,YACT,8EAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,IAAA;AAAA,YACA;AAAA;AAAA;AAAA,OACH;AAAA,sCACCY,yBAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAb,cAAA,CAACc,qBAAA,EAAA,EAAW,OAAA,EAAS,OAAA,IAAW,YAAA,EAAc,MAAK,IAAA,EAAK,CAAA;AAAA,QACvD,gBAAA,oBACCd,cAAA;AAAA,UAACE,aAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,IAAA;AAAA,YACL,YAAA,EAAY,sBAAsB,uBAAA,GAA0B,qBAAA;AAAA,YAC5D,OAAA,EAAS,MAAM,sBAAA,CAAuB,CAAA,CAAA,KAAK,CAAC,CAAC,CAAA;AAAA,YAE5C,QAAA,EAAA,mBAAA,mBAAsBF,cAAA,CAACe,yBAAA,EAAA,EAAc,CAAA,kCAAMC,4BAAA,EAAA,EAAiB;AAAA;AAAA;AAC/D,OAAA,EAEJ;AAAA,KAAA,EACF,CAAA;AAAA,oBACAhB,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wKAAA,EACZ,6CACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EACb,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EAAa,QAAA,EAAA,YAAA,EAAa,GAC3C,CAAA,mBAEAA,cAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAY,CAACiB,aAAA,EAAK,EAAGX,gBAAW,YAAY,CAAA;AAAA,QAC5C,KAAA;AAAA,QACA,KAAA,EAAO,OAAA;AAAA,QACP,QAAA,EAAU;AAAA;AAAA,KACZ,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,qBAAqB,GAAA,EAAuB;AACnD,EAAA,IAAI,OAAO,QAAQ,QAAA,EAAU;AAC3B,IAAA,MAAM,GAAA,GAAM,GAAA,CAAI,OAAA,CAAQ,IAAI,CAAA;AAC5B,IAAA,OAAO,GAAA,KAAQ,EAAA,IAAM,GAAA,KAAQ,GAAA,CAAI,MAAA,GAAS,CAAA;AAAA,EAC5C,CAAA,MAAA,IAAW,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA,EAAG;AAC7B,IAAA,OAAO,GAAA,CAAI,IAAA,CAAK,CAAA,IAAA,KAAQ,oBAAA,CAAqB,IAAI,CAAC,CAAA;AAAA,EACpD,CAAA,MAAA,IAAW,GAAA,IAAO,OAAO,GAAA,KAAQ,QAAA,EAAU;AACzC,IAAA,OAAO,MAAA,CAAO,OAAO,GAAG,CAAA,CAAE,KAAK,CAAA,KAAA,KAAS,oBAAA,CAAqB,KAAK,CAAC,CAAA;AAAA,EACrE;AACA,EAAA,OAAO,KAAA;AACT;;AC/JO,SAAS,uBAAA,CAAwB,EAAE,QAAA,EAAS,EAAiC;AAClF,EAAA,uBAAON,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EAA8B,QAAA,EAAS,CAAA;AAC/D;;ACDO,SAAS,sBAAA,CAAuB,EAAE,SAAA,EAAW,QAAA,EAAS,EAAgC;AAC3F,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAG,2EAAA,EAA6E,SAAS,GACtG,QAAA,EACH,CAAA;AAEJ;;ACNO,SAAS,uBAAA,CAAwB,EAAE,SAAA,EAAW,QAAA,EAAS,EAAiC;AAC7F,EAAA,sCACG,IAAA,EAAA,EAAG,SAAA,EAAWA,SAAG,2EAAA,EAA6E,SAAS,GACrG,QAAA,EACH,CAAA;AAEJ;;ACNA,SAAS,IAAA,CAAK,EAAE,SAAA,EAAW,QAAA,EAAS,EAAsC;AACxE,EAAA,sCAAQ,IAAA,EAAA,EAAG,SAAA,EAAWA,SAAG,6CAAA,EAA+C,SAAS,GAAI,QAAA,EAAS,CAAA;AAChG;AAOA,SAAS,GAAA,CAAI,EAAE,SAAA,EAAW,QAAA,EAAS,EAAyC;AAC1E,EAAA,sCAAQ,IAAA,EAAA,EAAG,SAAA,EAAWA,SAAG,4CAAA,EAA8C,SAAS,GAAI,QAAA,EAAS,CAAA;AAC/F;AAOA,SAAS,KAAA,CAAM,EAAE,SAAA,EAAW,QAAA,EAAS,EAA2C;AAC9E,EAAA,sCAAQ,IAAA,EAAA,EAAG,SAAA,EAAWA,SAAG,mDAAA,EAAqD,SAAS,GAAI,QAAA,EAAS,CAAA;AACtG;AAOA,SAAS,MAAA,CAAO,EAAE,SAAA,EAAW,QAAA,EAAS,EAA4C;AAChF,EAAA,sCACG,IAAA,EAAA,EAAG,SAAA,EAAWA,SAAG,oEAAA,EAAsE,SAAS,GAAI,QAAA,EAAS,CAAA;AAElH;AAEO,MAAM,4BAAA,GAA+B,MAAA,CAAO,MAAA,CAAO,IAAA,EAAM;AAAA,EAC9D,GAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAC,CAAA;;ACrCM,SAAS,2BAAA,CAA4B,EAAE,QAAA,EAAS,EAAqC;AAC1F,EAAA,uBACEW,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2EAAA,EACb,QAAA,EAAA;AAAA,oBAAAZ,cAAA,CAACkB,mBAAQ,IAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAQ,WAAU,eAAA,EAAgB,CAAA;AAAA,IAAE,GAAA;AAAA,IAAE,QAAA,IAAY;AAAA,GAAA,EAC/E,CAAA;AAEJ;;ACTO,SAAS,sBAAA,CAAuB,EAAE,QAAA,EAAS,EAAgC;AAChF,EAAA,uBAAOlB,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oCAAA,EAAsC,sBAAY,gBAAA,EAAiB,CAAA;AACzF;;ACIA,MAAM,gBAAA,GAAmB,MAAA,CAAO,MAAA,CAAOmB,kBAAA,EAAM;AAAA,EAC3C,MAAA,EAAQ,sBAAA;AAAA,EACR,OAAA,EAAS,uBAAA;AAAA,EACT,WAAA,EAAa,2BAAA;AAAA,EACb,WAAA,EAAa,2BAAA;AAAA,EACb,MAAA,EAAQ,sBAAA;AAAA,EACR,OAAA,EAAS,uBAAA;AAAA,EACT,YAAA,EAAc,4BAAA;AAAA,EACd,WAAA,EAAa;AACf,CAAC;;;;"}

package/dist/components/DataDetailsPanel.d.ts

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

package/dist/components/DataDetailsPanel.es.js

@@ -0,0 +1,224 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as cn } from '../utils-CzYGxqbG.js';
+import { XIcon, AlignLeftIcon, AlignJustifyIcon } from 'lucide-react';
+import { B as Button } from '../Button-DoOEJwa_.js';
+import { json } from '@codemirror/lang-json';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+import { draculaInit } from '@uiw/codemirror-theme-dracula';
+import ReactCodeMirror from '@uiw/react-codemirror';
+import { useState, useMemo } from 'react';
+import { B as ButtonsGroup } from '../buttons-group-BAU7uXE9.js';
+import { C as CopyButton } from '../copy-button-DDKn1NUS.js';
+import { u as useTheme } from '../theme-provider-C9ih9jSS.js';
+import { S as Spinner } from '../spinner-DuizqJj9.js';
+
+function DataDetailsPanel$1({ collapsed, children }) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "flex flex-col bg-surface2 border border-border1 rounded-xl overflow-hidden",
+        collapsed ? "h-auto" : "h-full"
+      ),
+      children
+    }
+  );
+}
+
+function DataDetailsPanelCloseButton({
+  onClick,
+  tooltip = "Close panel",
+  className
+}) {
+  return /* @__PURE__ */ jsx(Button, { size: "md", onClick, "aria-label": "Close Panel", tooltip, className, children: /* @__PURE__ */ jsx(XIcon, {}) });
+}
+
+function buildDarkTheme() {
+  return draculaInit({
+    settings: {
+      fontFamily: "var(--font-mono)",
+      fontSize: "0.75rem",
+      lineHighlight: "transparent",
+      gutterBackground: "transparent",
+      gutterForeground: "#939393",
+      background: "transparent"
+    },
+    styles: [{ tag: [tags.className, tags.propertyName] }]
+  });
+}
+function buildLightTheme() {
+  const editorTheme = EditorView.theme({
+    "&": {
+      backgroundColor: "transparent",
+      color: "var(--neutral6)",
+      fontSize: "0.75rem"
+    },
+    "&.cm-editor .cm-scroller": {
+      fontFamily: "var(--font-mono)"
+    },
+    ".cm-gutters": {
+      backgroundColor: "transparent",
+      color: "var(--neutral2)",
+      borderRight: "none"
+    },
+    ".cm-content": {
+      color: "var(--neutral6)",
+      caretColor: "var(--neutral6)"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "transparent"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "transparent"
+    },
+    ".cm-cursor, .cm-dropCursor": {
+      borderLeftColor: "var(--neutral6)"
+    }
+  });
+  const highlightStyle = HighlightStyle.define([
+    { tag: [tags.comment, tags.bracket], color: "var(--neutral2)" },
+    { tag: [tags.string, tags.meta, tags.regexp], color: "var(--accent1)" },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: "var(--accent6)" },
+    { tag: [tags.keyword, tags.operator, tags.tagName], color: "var(--accent2)" },
+    { tag: [tags.function(tags.propertyName), tags.propertyName], color: "var(--accent5)" },
+    {
+      tag: [tags.definition(tags.variableName), tags.function(tags.variableName), tags.className, tags.attributeName],
+      color: "var(--accent3)"
+    },
+    { tag: [tags.variableName, tags.number], color: "var(--accent5)" },
+    { tag: [tags.name, tags.quote], color: "var(--accent1)" }
+  ]);
+  return [editorTheme, syntaxHighlighting(highlightStyle)];
+}
+const useCodemirrorTheme = () => {
+  const isDark = useTheme().resolvedTheme === "dark";
+  return useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
+};
+function DataDetailsPanelCodeSection({
+  codeStr = "",
+  title,
+  icon,
+  simplified = false,
+  className
+}) {
+  const theme = useCodemirrorTheme();
+  const [showAsMultilineText, setShowAsMultilineText] = useState(false);
+  const hasMultilineText = useMemo(() => {
+    try {
+      const parsed = JSON.parse(codeStr);
+      return containsInnerNewline(parsed || "");
+    } catch {
+      return false;
+    }
+  }, [codeStr]);
+  const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\n/g, "\n") : codeStr;
+  const usePlainTextView = simplified || showAsMultilineText;
+  if (!codeStr || codeStr === "null") return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-1.5 text-ui-xs uppercase tracking-widest text-neutral2",
+            "[&>svg]:size-3.5"
+          ),
+          children: [
+            icon,
+            title
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(ButtonsGroup, { children: [
+        /* @__PURE__ */ jsx(CopyButton, { content: codeStr || "No content", size: "sm" }),
+        hasMultilineText && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            "aria-label": showAsMultilineText ? "Show escaped newlines" : "Show multiline text",
+            onClick: () => setShowAsMultilineText((v) => !v),
+            children: showAsMultilineText ? /* @__PURE__ */ jsx(AlignLeftIcon, {}) : /* @__PURE__ */ jsx(AlignJustifyIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "dark:bg-black/20 bg-surface3 p-3 overflow-hidden rounded-lg border dark:border-white/10 border-border1 text-neutral4 text-ui-sm break-all max-h-[30vh] overflow-y-auto", children: usePlainTextView ? /* @__PURE__ */ jsx("div", { className: "text-neutral4 font-mono break-all", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: finalCodeStr }) }) : /* @__PURE__ */ jsx(
+      ReactCodeMirror,
+      {
+        extensions: [json(), EditorView.lineWrapping],
+        theme,
+        value: codeStr,
+        editable: false
+      }
+    ) })
+  ] });
+}
+function containsInnerNewline(obj) {
+  if (typeof obj === "string") {
+    const idx = obj.indexOf("\n");
+    return idx !== -1 && idx !== obj.length - 1;
+  } else if (Array.isArray(obj)) {
+    return obj.some((item) => containsInnerNewline(item));
+  } else if (obj && typeof obj === "object") {
+    return Object.values(obj).some((value) => containsInnerNewline(value));
+  }
+  return false;
+}
+
+function DataDetailsPanelContent({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 p-4 overflow-y-auto", children });
+}
+
+function DataDetailsPanelHeader({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between gap-2 border-b border-border1 mx-4 py-3", className), children });
+}
+
+function DataDetailsPanelHeading({ className, children }) {
+  return /* @__PURE__ */ jsx("h3", { className: cn("flex gap-2 text-ui-md text-neutral3 [&>b]:text-neutral2 [&>b]:font-normal", className), children });
+}
+
+function Root({ className, children }) {
+  return /* @__PURE__ */ jsx("dl", { className: cn("grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5", className), children });
+}
+function Key({ className, children }) {
+  return /* @__PURE__ */ jsx("dt", { className: cn("text-ui-smd  text-neutral2 shrink-0 py-0.5", className), children });
+}
+function Value({ className, children }) {
+  return /* @__PURE__ */ jsx("dd", { className: cn("text-ui-smd text-neutral3 truncate min-w-0 py-0.5", className), children });
+}
+function Header({ className, children }) {
+  return /* @__PURE__ */ jsx("dt", { className: cn("col-span-2 text-ui-sm uppercase tracking-widest text-neutral2 py-3", className), children });
+}
+const DataDetailsPanelKeyValueList = Object.assign(Root, {
+  Key,
+  Value,
+  Header
+});
+
+function DataDetailsPanelLoadingData({ children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-6 text-ui-sm text-neutral3", children: [
+    /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "pulse", className: "text-neutral3" }),
+    " ",
+    children ?? "Loading..."
+  ] });
+}
+
+function DataDetailsPanelNoData({ children }) {
+  return /* @__PURE__ */ jsx("p", { className: "px-4 py-6 text-ui-sm text-neutral2", children: children ?? "No data found." });
+}
+
+const DataDetailsPanel = Object.assign(DataDetailsPanel$1, {
+  Header: DataDetailsPanelHeader,
+  Heading: DataDetailsPanelHeading,
+  CloseButton: DataDetailsPanelCloseButton,
+  LoadingData: DataDetailsPanelLoadingData,
+  NoData: DataDetailsPanelNoData,
+  Content: DataDetailsPanelContent,
+  KeyValueList: DataDetailsPanelKeyValueList,
+  CodeSection: DataDetailsPanelCodeSection
+});
+
+export { DataDetailsPanel };
+//# sourceMappingURL=DataDetailsPanel.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataDetailsPanel.es.js","sources":["../../src/ds/components/DataDetailsPanel/data-details-panel.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-close-button.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-code-section.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-content.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-header.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-heading.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-key-value-list.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-loading-data.tsx","../../src/ds/components/DataDetailsPanel/data-details-panel-no-data.tsx","../../src/ds/components/DataDetailsPanel/index.ts"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport interface DataDetailsPanelProps {\n  collapsed?: boolean;\n  children: React.ReactNode;\n}\n\nexport function DataDetailsPanel({ collapsed, children }: DataDetailsPanelProps) {\n  return (\n    <section\n      className={cn(\n        'flex flex-col bg-surface2 border border-border1 rounded-xl overflow-hidden',\n        collapsed ? 'h-auto' : 'h-full',\n      )}\n    >\n      {children}\n    </section>\n  );\n}\n","import { XIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\n\nexport interface DataDetailsPanelCloseButtonProps {\n  onClick: () => void;\n  tooltip?: string;\n  className?: string;\n}\n\nexport function DataDetailsPanelCloseButton({\n  onClick,\n  tooltip = 'Close panel',\n  className,\n}: DataDetailsPanelCloseButtonProps) {\n  return (\n    <Button size=\"md\" onClick={onClick} aria-label=\"Close Panel\" tooltip={tooltip} className={className}>\n      <XIcon />\n    </Button>\n  );\n}\n","import { json } from '@codemirror/lang-json';\nimport { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport type { Extension } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport { tags as t } from '@lezer/highlight';\nimport { draculaInit } from '@uiw/codemirror-theme-dracula';\nimport ReactCodeMirror from '@uiw/react-codemirror';\nimport { AlignJustifyIcon, AlignLeftIcon } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { useTheme } from '@/ds/components/ThemeProvider';\nimport { cn } from '@/lib/utils';\n\nfunction buildDarkTheme(): Extension {\n  return draculaInit({\n    settings: {\n      fontFamily: 'var(--font-mono)',\n      fontSize: '0.75rem',\n      lineHighlight: 'transparent',\n      gutterBackground: 'transparent',\n      gutterForeground: '#939393',\n      background: 'transparent',\n    },\n    styles: [{ tag: [t.className, t.propertyName] }],\n  });\n}\n\nfunction buildLightTheme(): Extension {\n  const editorTheme = EditorView.theme({\n    '&': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral6)',\n      fontSize: '0.75rem',\n    },\n    '&.cm-editor .cm-scroller': {\n      fontFamily: 'var(--font-mono)',\n    },\n    '.cm-gutters': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral2)',\n      borderRight: 'none',\n    },\n    '.cm-content': {\n      color: 'var(--neutral6)',\n      caretColor: 'var(--neutral6)',\n    },\n    '.cm-activeLine': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-activeLineGutter': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-cursor, .cm-dropCursor': {\n      borderLeftColor: 'var(--neutral6)',\n    },\n  });\n\n  const highlightStyle = HighlightStyle.define([\n    { tag: [t.comment, t.bracket], color: 'var(--neutral2)' },\n    { tag: [t.string, t.meta, t.regexp], color: 'var(--accent1)' },\n    { tag: [t.atom, t.bool, t.special(t.variableName)], color: 'var(--accent6)' },\n    { tag: [t.keyword, t.operator, t.tagName], color: 'var(--accent2)' },\n    { tag: [t.function(t.propertyName), t.propertyName], color: 'var(--accent5)' },\n    {\n      tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],\n      color: 'var(--accent3)',\n    },\n    { tag: [t.variableName, t.number], color: 'var(--accent5)' },\n    { tag: [t.name, t.quote], color: 'var(--accent1)' },\n  ]);\n\n  return [editorTheme, syntaxHighlighting(highlightStyle)];\n}\n\nconst useCodemirrorTheme = (): Extension => {\n  const isDark = useTheme().resolvedTheme === 'dark';\n  return useMemo(() => (isDark ? buildDarkTheme() : buildLightTheme()), [isDark]);\n};\n\nexport interface DataDetailsPanelCodeSectionProps {\n  title: React.ReactNode;\n  icon?: React.ReactNode;\n  codeStr?: string;\n  simplified?: boolean;\n  className?: string;\n}\n\nexport function DataDetailsPanelCodeSection({\n  codeStr = '',\n  title,\n  icon,\n  simplified = false,\n  className,\n}: DataDetailsPanelCodeSectionProps) {\n  const theme = useCodemirrorTheme();\n  const [showAsMultilineText, setShowAsMultilineText] = useState(false);\n  const hasMultilineText = useMemo(() => {\n    try {\n      const parsed = JSON.parse(codeStr);\n      return containsInnerNewline(parsed || '');\n    } catch {\n      return false;\n    }\n  }, [codeStr]);\n\n  const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\\\n/g, '\\n') : codeStr;\n  const usePlainTextView = simplified || showAsMultilineText;\n\n  if (!codeStr || codeStr === 'null') return null;\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      <div className=\"flex items-center justify-between\">\n        <div\n          className={cn(\n            'flex items-center gap-1.5 text-ui-xs uppercase tracking-widest text-neutral2',\n            '[&>svg]:size-3.5',\n          )}\n        >\n          {icon}\n          {title}\n        </div>\n        <ButtonsGroup>\n          <CopyButton content={codeStr || 'No content'} size=\"sm\" />\n          {hasMultilineText && (\n            <Button\n              size=\"sm\"\n              aria-label={showAsMultilineText ? 'Show escaped newlines' : 'Show multiline text'}\n              onClick={() => setShowAsMultilineText(v => !v)}\n            >\n              {showAsMultilineText ? <AlignLeftIcon /> : <AlignJustifyIcon />}\n            </Button>\n          )}\n        </ButtonsGroup>\n      </div>\n      <div className=\"dark:bg-black/20 bg-surface3 p-3 overflow-hidden rounded-lg border dark:border-white/10 border-border1 text-neutral4 text-ui-sm break-all max-h-[30vh] overflow-y-auto\">\n        {usePlainTextView ? (\n          <div className=\"text-neutral4 font-mono break-all\">\n            <pre className=\"text-wrap\">{finalCodeStr}</pre>\n          </div>\n        ) : (\n          <ReactCodeMirror\n            extensions={[json(), EditorView.lineWrapping]}\n            theme={theme}\n            value={codeStr}\n            editable={false}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction containsInnerNewline(obj: unknown): boolean {\n  if (typeof obj === 'string') {\n    const idx = obj.indexOf('\\n');\n    return idx !== -1 && idx !== obj.length - 1;\n  } else if (Array.isArray(obj)) {\n    return obj.some(item => containsInnerNewline(item));\n  } else if (obj && typeof obj === 'object') {\n    return Object.values(obj).some(value => containsInnerNewline(value));\n  }\n  return false;\n}\n","import type { ReactNode } from 'react';\n\nexport interface DataDetailsPanelContentProps {\n  children: ReactNode;\n}\n\nexport function DataDetailsPanelContent({ children }: DataDetailsPanelContentProps) {\n  return <div className=\"flex-1 p-4 overflow-y-auto\">{children}</div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataDetailsPanelHeaderProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataDetailsPanelHeader({ className, children }: DataDetailsPanelHeaderProps) {\n  return (\n    <div className={cn('flex items-center justify-between gap-2 border-b border-border1 mx-4 py-3', className)}>\n      {children}\n    </div>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataDetailsPanelHeadingProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataDetailsPanelHeading({ className, children }: DataDetailsPanelHeadingProps) {\n  return (\n    <h3 className={cn('flex gap-2 text-ui-md text-neutral3 [&>b]:text-neutral2 [&>b]:font-normal', className)}>\n      {children}\n    </h3>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataDetailsPanelKeyValueListProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nfunction Root({ className, children }: DataDetailsPanelKeyValueListProps) {\n  return <dl className={cn('grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5', className)}>{children}</dl>;\n}\n\nexport interface DataDetailsPanelKeyValueListKeyProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nfunction Key({ className, children }: DataDetailsPanelKeyValueListKeyProps) {\n  return <dt className={cn('text-ui-smd  text-neutral2 shrink-0 py-0.5', className)}>{children}</dt>;\n}\n\nexport interface DataDetailsPanelKeyValueListValueProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nfunction Value({ className, children }: DataDetailsPanelKeyValueListValueProps) {\n  return <dd className={cn('text-ui-smd text-neutral3 truncate min-w-0 py-0.5', className)}>{children}</dd>;\n}\n\nexport interface DataDetailsPanelKeyValueListHeaderProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nfunction Header({ className, children }: DataDetailsPanelKeyValueListHeaderProps) {\n  return (\n    <dt className={cn('col-span-2 text-ui-sm uppercase tracking-widest text-neutral2 py-3', className)}>{children}</dt>\n  );\n}\n\nexport const DataDetailsPanelKeyValueList = Object.assign(Root, {\n  Key,\n  Value,\n  Header,\n});\n","import type { ReactNode } from 'react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport interface DataDetailsPanelLoadingDataProps {\n  children?: ReactNode;\n}\n\nexport function DataDetailsPanelLoadingData({ children }: DataDetailsPanelLoadingDataProps) {\n  return (\n    <div className=\"flex items-center justify-center gap-2 px-4 py-6 text-ui-sm text-neutral3\">\n      <Spinner size=\"sm\" variant=\"pulse\" className=\"text-neutral3\" /> {children ?? 'Loading...'}\n    </div>\n  );\n}\n","export interface DataDetailsPanelNoDataProps {\n  children?: React.ReactNode;\n}\n\nexport function DataDetailsPanelNoData({ children }: DataDetailsPanelNoDataProps) {\n  return <p className=\"px-4 py-6 text-ui-sm text-neutral2\">{children ?? 'No data found.'}</p>;\n}\n","import { DataDetailsPanel as Root } from './data-details-panel';\nimport { DataDetailsPanelCloseButton } from './data-details-panel-close-button';\nimport { DataDetailsPanelCodeSection } from './data-details-panel-code-section';\nimport { DataDetailsPanelContent } from './data-details-panel-content';\nimport { DataDetailsPanelHeader } from './data-details-panel-header';\nimport { DataDetailsPanelHeading } from './data-details-panel-heading';\nimport { DataDetailsPanelKeyValueList } from './data-details-panel-key-value-list';\nimport { DataDetailsPanelLoadingData } from './data-details-panel-loading-data';\nimport { DataDetailsPanelNoData } from './data-details-panel-no-data';\n\nconst DataDetailsPanel = Object.assign(Root, {\n  Header: DataDetailsPanelHeader,\n  Heading: DataDetailsPanelHeading,\n  CloseButton: DataDetailsPanelCloseButton,\n  LoadingData: DataDetailsPanelLoadingData,\n  NoData: DataDetailsPanelNoData,\n  Content: DataDetailsPanelContent,\n  KeyValueList: DataDetailsPanelKeyValueList,\n  CodeSection: DataDetailsPanelCodeSection,\n});\n\nexport { DataDetailsPanel };\nexport type { DataDetailsPanelProps } from './data-details-panel';\nexport type { DataDetailsPanelHeaderProps } from './data-details-panel-header';\nexport type { DataDetailsPanelHeadingProps } from './data-details-panel-heading';\nexport type { DataDetailsPanelCloseButtonProps } from './data-details-panel-close-button';\nexport type { DataDetailsPanelLoadingDataProps } from './data-details-panel-loading-data';\nexport type { DataDetailsPanelNoDataProps } from './data-details-panel-no-data';\nexport type { DataDetailsPanelContentProps } from './data-details-panel-content';\nexport type {\n  DataDetailsPanelKeyValueListProps,\n  DataDetailsPanelKeyValueListKeyProps,\n  DataDetailsPanelKeyValueListValueProps,\n  DataDetailsPanelKeyValueListHeaderProps,\n} from './data-details-panel-key-value-list';\nexport type { DataDetailsPanelCodeSectionProps } from './data-details-panel-code-section';\n"],"names":["DataDetailsPanel","t","Root"],"mappings":"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"}

package/dist/components/DataFilter.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const selectDataFilter = require('../select-data-filter-DxoxTXk2.cjs');
+
+
+
+exports.SelectDataFilter = selectDataFilter.SelectDataFilter;
+//# sourceMappingURL=DataFilter.cjs.js.map

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

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

package/dist/components/DataFilter.d.ts

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

package/dist/components/DataFilter.es.js

@@ -0,0 +1,2 @@
+export { S as SelectDataFilter } from '../select-data-filter-BFGZYkQ_.js';
+//# sourceMappingURL=DataFilter.es.js.map

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

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

package/dist/components/DataKeysAndValues.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const dataKeysAndValues = require('../data-keys-and-values-Spy2O_IE.cjs');
+
+
+
+exports.DataKeysAndValues = dataKeysAndValues.DataKeysAndValues;
+//# sourceMappingURL=DataKeysAndValues.cjs.js.map

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

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

package/dist/components/DataKeysAndValues.d.ts

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

package/dist/components/DataKeysAndValues.es.js

@@ -0,0 +1,2 @@
+export { D as DataKeysAndValues } from '../data-keys-and-values-BSeQG7jb.js';
+//# sourceMappingURL=DataKeysAndValues.es.js.map

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

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

package/dist/components/DataList.cjs.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const tracesDataList = require('../traces-data-list-5GA3JumQ.cjs');
+const dataListSkeleton = require('../data-list-skeleton-Bges_t5u.cjs');
+
+
+
+exports.DataList = tracesDataList.DataList;
+exports.ScoresDataList = tracesDataList.ScoresDataList;
+exports.TracesDataList = tracesDataList.TracesDataList;
+exports.DataListSkeleton = dataListSkeleton.DataListSkeleton;
+//# sourceMappingURL=DataList.cjs.js.map

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

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

package/dist/components/DataList.d.ts

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

package/dist/components/DataList.es.js

@@ -0,0 +1,3 @@
+export { D as DataList, S as ScoresDataList, T as TracesDataList } from '../traces-data-list-Dru2XnRN.js';
+export { D as DataListSkeleton } from '../data-list-skeleton-C9Ncz3jM.js';
+//# sourceMappingURL=DataList.es.js.map

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

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