@mastra/playground-ui 38.0.0-alpha.5 → 38.0.0-alpha.7

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @mastra/playground-ui
 
+## 38.0.0-alpha.7
+
+### Patch Changes
+
+- Updated dependencies [[`8be63b0`](https://github.com/mastra-ai/mastra/commit/8be63b015fb8d72cea1220f05e7dc3bb997cc249), [`345eecc`](https://github.com/mastra-ai/mastra/commit/345eecce6ba519b5d987f0e10b5de4c8e5734580), [`ee14cae`](https://github.com/mastra-ai/mastra/commit/ee14cae244805783bde518a6142de28b744b169c)]:
+  - @mastra/core@1.48.0-alpha.7
+  - @mastra/client-js@1.29.0-alpha.7
+  - @mastra/react@1.2.1-alpha.7
+
+## 38.0.0-alpha.6
+
+### Patch Changes
+
+- Updated dependencies [[`b33c77d`](https://github.com/mastra-ai/mastra/commit/b33c77d5293f14a794f3ec38dc947a6676de2764), [`1009f77`](https://github.com/mastra-ai/mastra/commit/1009f772aa40016b49267c8566d0c29f6a16aa3c), [`6a4a466`](https://github.com/mastra-ai/mastra/commit/6a4a466495279c2add2b0fd0afe6989fe7ae352a), [`23c31de`](https://github.com/mastra-ai/mastra/commit/23c31de96ed8153402dcf092ac84b27a0c3638c1), [`0368766`](https://github.com/mastra-ai/mastra/commit/0368766744c7ea3df4d6059e2cc15f7bdf55f5a6), [`2866f04`](https://github.com/mastra-ai/mastra/commit/2866f04953edb78c1637fa45cc53abe24122edcb)]:
+  - @mastra/core@1.48.0-alpha.6
+  - @mastra/client-js@1.29.0-alpha.6
+  - @mastra/react@1.2.1-alpha.6
+  - @mastra/memory@1.21.3-alpha.2
+
 ## 38.0.0-alpha.5
 
 ### Patch Changes

package/dist/components/Columns.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const multiColumn = require('../multi-column-DGAsiBPq.cjs');
+const multiColumn = require('../multi-column-IfbHfooJ.cjs');
 
 
 

package/dist/components/Columns.es.js

@@ -1,2 +1,2 @@
-export { C as Column, a as Columns, M as MultiColumn } from '../multi-column-BR3a4MvZ.js';
+export { C as Column, a as Columns, M as MultiColumn } from '../multi-column-DzAz6aWn.js';
 //# sourceMappingURL=Columns.es.js.map

package/dist/ee/signals/components/signal-details-page.cjs.js

@@ -6,6 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 require('@mastra/react');
 require('@tanstack/react-query');
+require('../../../toast-Bh4WQDyj.cjs');
 const domains_traces_hooks_useTraces = require('../../../domains/traces/hooks/use-traces.cjs.js');
 require('../../../domains/traces/trace-filters.cjs.js');
 const scatterPlotChart = require('../../../scatter-plot-chart-CFZO31md.cjs');

package/dist/ee/signals/components/signal-details-page.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"signal-details-page.cjs.js","sources":["../../../../src/ee/signals/components/signal-details-page.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { useTraces } from '../../../domains/traces/hooks';\nimport { ScatterPlotChart } from '../../../ds/components/ScatterPlotChart';\nimport { Tab, TabContent, TabList, Tabs } from '../../../ds/components/Tabs';\nimport { stringToColor } from '../../../lib/colors';\nimport { cn } from '../../../lib/utils';\nimport { TopicTraceDetailsPanel, TopicTraceSummaryList, TopicsLayout } from '../../topics';\nimport { getSignalChartData } from '../signals-chart-data';\nimport { signals } from '../signals-data';\nimport type { Signal, SignalCluster } from '../types';\n\nconst SignalTraceSummaryList = TopicTraceSummaryList;\nexport const SignalTraceDetailsPanel = TopicTraceDetailsPanel;\nconst SignalsLayout = TopicsLayout;\n\ntype SignalTab = 'trace-list' | 'chart';\n\nfunction findClusterByTraceId(signal: Signal | undefined, traceId: string | undefined) {\n  if (!signal || !traceId) return undefined;\n  return signal.clusters.find(cluster => cluster.traceSummaries.some(trace => trace.id === traceId));\n}\n\ninterface SignalClusterSidebarProps {\n  signal: Signal;\n  selectedClusterIds: string[];\n  onClusterSelect: (clusterId: string) => void;\n  multiple?: boolean;\n  ariaLabel?: string;\n}\n\nexport function SignalClusterSidebar({\n  signal,\n  selectedClusterIds,\n  onClusterSelect,\n  multiple = false,\n  ariaLabel = 'Signal clusters',\n}: SignalClusterSidebarProps) {\n  return (\n    <aside\n      className=\"min-h-0 w-72 shrink-0 overflow-y-auto border-r border-border1/60 pr-4 py-4\"\n      aria-label={ariaLabel}\n    >\n      <ul className=\"space-y-1\" role={multiple ? 'group' : undefined}>\n        {signal.clusters.map(cluster => {\n          const selected = selectedClusterIds.includes(cluster.id);\n          return (\n            <li key={cluster.id}>\n              <button\n                type=\"button\"\n                role={multiple ? 'checkbox' : undefined}\n                aria-checked={multiple ? selected : undefined}\n                aria-pressed={multiple ? undefined : selected}\n                className=\"group cursor-pointer w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-surface3 aria-pressed:bg-surface3 aria-checked:bg-surface3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent1\"\n                onClick={() => onClusterSelect(cluster.id)}\n              >\n                <span className=\"flex items-start gap-2\">\n                  <span\n                    className={cn('mt-1.5 h-2 w-2 shrink-0 rounded-full', multiple && !selected && 'invisible')}\n                    style={{ backgroundColor: stringToColor(cluster.name) }}\n                  />\n                  <span className=\"min-w-0 space-y-1\">\n                    <span\n                      className={cn(\n                        'block text-sm font-medium',\n                        multiple && !selected ? 'text-neutral3' : 'text-neutral5',\n                      )}\n                    >\n                      {cluster.name}\n                    </span>\n                    <span\n                      className={cn(\n                        'line-clamp-2 block text-sm',\n                        multiple && !selected ? 'text-neutral1' : 'text-neutral2',\n                      )}\n                    >\n                      {cluster.description}\n                    </span>\n                  </span>\n                </span>\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </aside>\n  );\n}\n\nexport function SignalTraceListTab({\n  cluster,\n  selectedTraceId,\n  onTraceSelect,\n}: {\n  cluster: SignalCluster;\n  selectedTraceId: string | null;\n  onTraceSelect: () => void;\n}) {\n  return (\n    <SignalTraceSummaryList\n      traces={cluster.traceSummaries}\n      selectedTraceId={selectedTraceId}\n      onTraceSelect={onTraceSelect}\n    />\n  );\n}\n\ninterface SignalChartTabProps {\n  signal: Signal;\n  selectedClusterIds: string[];\n  onClusterToggle: (clusterId: string) => void;\n}\n\nexport function SignalChartTab({ signal, selectedClusterIds, onClusterToggle }: SignalChartTabProps) {\n  const selectedClusters = useMemo(\n    () => signal.clusters.filter(cluster => selectedClusterIds.includes(cluster.id)),\n    [signal.clusters, selectedClusterIds],\n  );\n  const chartData = useMemo(() => getSignalChartData(selectedClusters), [selectedClusters]);\n\n  return (\n    <div className=\"flex h-full min-w-0 gap-6\">\n      <SignalClusterSidebar\n        signal={signal}\n        selectedClusterIds={selectedClusterIds}\n        onClusterSelect={onClusterToggle}\n        multiple\n        ariaLabel=\"Chart cluster filters\"\n      />\n      <div className=\"min-h-0 min-w-0 flex-1 py-4\">\n        <ScatterPlotChart\n          data={chartData}\n          xKey=\"duration\"\n          yKey=\"spans\"\n          nameKey=\"name\"\n          colorKey=\"color\"\n          height=\"100%\"\n          className=\"h-full\"\n          xLabel=\"Duration\"\n          yLabel=\"Spans\"\n          formatX={value => `${value}ms`}\n          formatY={value => `${value} spans`}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface SignalClusterTabsProps {\n  signal: Signal;\n  selectedCluster: SignalCluster;\n  selectedTraceId: string | null;\n  selectedChartClusterIds: string[];\n  activeTab: SignalTab;\n  onActiveTabChange: (tab: SignalTab) => void;\n  onClusterSelect: (clusterId: string) => void;\n  onChartClusterToggle: (clusterId: string) => void;\n  onTraceSelect: () => void;\n}\n\nexport function SignalClusterTabs({\n  signal,\n  selectedCluster,\n  selectedTraceId,\n  selectedChartClusterIds,\n  activeTab,\n  onActiveTabChange,\n  onClusterSelect,\n  onChartClusterToggle,\n  onTraceSelect,\n}: SignalClusterTabsProps) {\n  return (\n    <Tabs<SignalTab>\n      defaultTab=\"trace-list\"\n      value={activeTab}\n      onValueChange={onActiveTabChange}\n      className=\"flex h-full min-h-0 flex-col overflow-hidden\"\n    >\n      <TabList variant=\"line\">\n        <Tab value=\"trace-list\">Trace list</Tab>\n        <Tab value=\"chart\">Chart</Tab>\n      </TabList>\n      <TabContent value=\"trace-list\" className=\"min-h-0 flex-1 overflow-hidden py-0\">\n        <div className=\"flex h-full min-w-0 gap-6\">\n          <SignalClusterSidebar\n            signal={signal}\n            selectedClusterIds={[selectedCluster.id]}\n            onClusterSelect={onClusterSelect}\n          />\n          <div className=\"min-w-0 flex-1 overflow-hidden py-4\">\n            <SignalTraceListTab\n              cluster={selectedCluster}\n              selectedTraceId={selectedTraceId}\n              onTraceSelect={onTraceSelect}\n            />\n          </div>\n        </div>\n      </TabContent>\n      <TabContent value=\"chart\" className=\"min-h-0 flex-1 overflow-hidden py-0\">\n        <SignalChartTab\n          signal={signal}\n          selectedClusterIds={selectedChartClusterIds}\n          onClusterToggle={onChartClusterToggle}\n        />\n      </TabContent>\n    </Tabs>\n  );\n}\n\nexport interface SignalDetailsPageProps {\n  signalId?: string;\n  selectedTraceId: string | null;\n  tracePanel?: ReactNode;\n  onTraceSelect: (signalId: string, traceId: string) => void;\n}\n\nexport function SignalDetailsPage({ signalId, selectedTraceId, tracePanel, onTraceSelect }: SignalDetailsPageProps) {\n  const selectedSignal = useMemo(() => signals.find(signal => signal.id === signalId), [signalId]);\n  const initialCluster =\n    findClusterByTraceId(selectedSignal, selectedTraceId ?? undefined) ?? selectedSignal?.clusters[0];\n  const [selectedClusterId, setSelectedClusterId] = useState<string | null>(() => initialCluster?.id ?? null);\n  const [selectedChartClusterIds, setSelectedChartClusterIds] = useState<string[]>(\n    () => selectedSignal?.clusters.map(cluster => cluster.id) ?? [],\n  );\n  const [activeTab, setActiveTab] = useState<SignalTab>('trace-list');\n  const selectedCluster = selectedSignal?.clusters.find(cluster => cluster.id === selectedClusterId) ?? initialCluster;\n  const { data: tracesData } = useTraces({});\n  const resolvedTraceId = tracesData?.spans[0]?.traceId ?? null;\n\n  const handleTraceSelect = () => {\n    if (!selectedSignal || !resolvedTraceId) return;\n\n    onTraceSelect(selectedSignal.id, resolvedTraceId);\n  };\n\n  const handleChartClusterToggle = (clusterId: string) => {\n    setSelectedChartClusterIds(current =>\n      current.includes(clusterId) ? current.filter(id => id !== clusterId) : [...current, clusterId],\n    );\n  };\n\n  if (!selectedSignal || !selectedCluster) {\n    return <SignalsLayout sidebar={null}>Signal not found</SignalsLayout>;\n  }\n\n  return (\n    <SignalsLayout sidebar={null} tracePanel={activeTab === 'trace-list' ? tracePanel : undefined}>\n      <section className=\"flex h-full min-w-0 flex-col gap-4\">\n        <header className=\"space-y-1\">\n          <h1 className=\"text-icon-xl font-semibold text-neutral6\">{selectedSignal.name}</h1>\n          <p className=\"text-ui-sm text-neutral3\">Explore trace patterns by cluster.</p>\n        </header>\n        <div className=\"min-h-0 flex-1 overflow-hidden\">\n          <SignalClusterTabs\n            signal={selectedSignal}\n            selectedCluster={selectedCluster}\n            selectedTraceId={selectedTraceId}\n            selectedChartClusterIds={selectedChartClusterIds}\n            activeTab={activeTab}\n            onActiveTabChange={setActiveTab}\n            onClusterSelect={setSelectedClusterId}\n            onChartClusterToggle={handleChartClusterToggle}\n            onTraceSelect={handleTraceSelect}\n          />\n        </div>\n      </section>\n    </SignalsLayout>\n  );\n}\n"],"names":["TopicTraceSummaryList","TopicTraceDetailsPanel","TopicsLayout","jsx","jsxs","cn","stringToColor","useMemo","getSignalChartData","ScatterPlotChart","Tabs","TabList","Tab","TabContent","signals","useState","useTraces"],"mappings":"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"}
+{"version":3,"file":"signal-details-page.cjs.js","sources":["../../../../src/ee/signals/components/signal-details-page.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { useTraces } from '../../../domains/traces/hooks';\nimport { ScatterPlotChart } from '../../../ds/components/ScatterPlotChart';\nimport { Tab, TabContent, TabList, Tabs } from '../../../ds/components/Tabs';\nimport { stringToColor } from '../../../lib/colors';\nimport { cn } from '../../../lib/utils';\nimport { TopicTraceDetailsPanel, TopicTraceSummaryList, TopicsLayout } from '../../topics';\nimport { getSignalChartData } from '../signals-chart-data';\nimport { signals } from '../signals-data';\nimport type { Signal, SignalCluster } from '../types';\n\nconst SignalTraceSummaryList = TopicTraceSummaryList;\nexport const SignalTraceDetailsPanel = TopicTraceDetailsPanel;\nconst SignalsLayout = TopicsLayout;\n\ntype SignalTab = 'trace-list' | 'chart';\n\nfunction findClusterByTraceId(signal: Signal | undefined, traceId: string | undefined) {\n  if (!signal || !traceId) return undefined;\n  return signal.clusters.find(cluster => cluster.traceSummaries.some(trace => trace.id === traceId));\n}\n\ninterface SignalClusterSidebarProps {\n  signal: Signal;\n  selectedClusterIds: string[];\n  onClusterSelect: (clusterId: string) => void;\n  multiple?: boolean;\n  ariaLabel?: string;\n}\n\nexport function SignalClusterSidebar({\n  signal,\n  selectedClusterIds,\n  onClusterSelect,\n  multiple = false,\n  ariaLabel = 'Signal clusters',\n}: SignalClusterSidebarProps) {\n  return (\n    <aside\n      className=\"min-h-0 w-72 shrink-0 overflow-y-auto border-r border-border1/60 pr-4 py-4\"\n      aria-label={ariaLabel}\n    >\n      <ul className=\"space-y-1\" role={multiple ? 'group' : undefined}>\n        {signal.clusters.map(cluster => {\n          const selected = selectedClusterIds.includes(cluster.id);\n          return (\n            <li key={cluster.id}>\n              <button\n                type=\"button\"\n                role={multiple ? 'checkbox' : undefined}\n                aria-checked={multiple ? selected : undefined}\n                aria-pressed={multiple ? undefined : selected}\n                className=\"group cursor-pointer w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-surface3 aria-pressed:bg-surface3 aria-checked:bg-surface3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent1\"\n                onClick={() => onClusterSelect(cluster.id)}\n              >\n                <span className=\"flex items-start gap-2\">\n                  <span\n                    className={cn('mt-1.5 h-2 w-2 shrink-0 rounded-full', multiple && !selected && 'invisible')}\n                    style={{ backgroundColor: stringToColor(cluster.name) }}\n                  />\n                  <span className=\"min-w-0 space-y-1\">\n                    <span\n                      className={cn(\n                        'block text-sm font-medium',\n                        multiple && !selected ? 'text-neutral3' : 'text-neutral5',\n                      )}\n                    >\n                      {cluster.name}\n                    </span>\n                    <span\n                      className={cn(\n                        'line-clamp-2 block text-sm',\n                        multiple && !selected ? 'text-neutral1' : 'text-neutral2',\n                      )}\n                    >\n                      {cluster.description}\n                    </span>\n                  </span>\n                </span>\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </aside>\n  );\n}\n\nexport function SignalTraceListTab({\n  cluster,\n  selectedTraceId,\n  onTraceSelect,\n}: {\n  cluster: SignalCluster;\n  selectedTraceId: string | null;\n  onTraceSelect: () => void;\n}) {\n  return (\n    <SignalTraceSummaryList\n      traces={cluster.traceSummaries}\n      selectedTraceId={selectedTraceId}\n      onTraceSelect={onTraceSelect}\n    />\n  );\n}\n\ninterface SignalChartTabProps {\n  signal: Signal;\n  selectedClusterIds: string[];\n  onClusterToggle: (clusterId: string) => void;\n}\n\nexport function SignalChartTab({ signal, selectedClusterIds, onClusterToggle }: SignalChartTabProps) {\n  const selectedClusters = useMemo(\n    () => signal.clusters.filter(cluster => selectedClusterIds.includes(cluster.id)),\n    [signal.clusters, selectedClusterIds],\n  );\n  const chartData = useMemo(() => getSignalChartData(selectedClusters), [selectedClusters]);\n\n  return (\n    <div className=\"flex h-full min-w-0 gap-6\">\n      <SignalClusterSidebar\n        signal={signal}\n        selectedClusterIds={selectedClusterIds}\n        onClusterSelect={onClusterToggle}\n        multiple\n        ariaLabel=\"Chart cluster filters\"\n      />\n      <div className=\"min-h-0 min-w-0 flex-1 py-4\">\n        <ScatterPlotChart\n          data={chartData}\n          xKey=\"duration\"\n          yKey=\"spans\"\n          nameKey=\"name\"\n          colorKey=\"color\"\n          height=\"100%\"\n          className=\"h-full\"\n          xLabel=\"Duration\"\n          yLabel=\"Spans\"\n          formatX={value => `${value}ms`}\n          formatY={value => `${value} spans`}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface SignalClusterTabsProps {\n  signal: Signal;\n  selectedCluster: SignalCluster;\n  selectedTraceId: string | null;\n  selectedChartClusterIds: string[];\n  activeTab: SignalTab;\n  onActiveTabChange: (tab: SignalTab) => void;\n  onClusterSelect: (clusterId: string) => void;\n  onChartClusterToggle: (clusterId: string) => void;\n  onTraceSelect: () => void;\n}\n\nexport function SignalClusterTabs({\n  signal,\n  selectedCluster,\n  selectedTraceId,\n  selectedChartClusterIds,\n  activeTab,\n  onActiveTabChange,\n  onClusterSelect,\n  onChartClusterToggle,\n  onTraceSelect,\n}: SignalClusterTabsProps) {\n  return (\n    <Tabs<SignalTab>\n      defaultTab=\"trace-list\"\n      value={activeTab}\n      onValueChange={onActiveTabChange}\n      className=\"flex h-full min-h-0 flex-col overflow-hidden\"\n    >\n      <TabList variant=\"line\">\n        <Tab value=\"trace-list\">Trace list</Tab>\n        <Tab value=\"chart\">Chart</Tab>\n      </TabList>\n      <TabContent value=\"trace-list\" className=\"min-h-0 flex-1 overflow-hidden py-0\">\n        <div className=\"flex h-full min-w-0 gap-6\">\n          <SignalClusterSidebar\n            signal={signal}\n            selectedClusterIds={[selectedCluster.id]}\n            onClusterSelect={onClusterSelect}\n          />\n          <div className=\"min-w-0 flex-1 overflow-hidden py-4\">\n            <SignalTraceListTab\n              cluster={selectedCluster}\n              selectedTraceId={selectedTraceId}\n              onTraceSelect={onTraceSelect}\n            />\n          </div>\n        </div>\n      </TabContent>\n      <TabContent value=\"chart\" className=\"min-h-0 flex-1 overflow-hidden py-0\">\n        <SignalChartTab\n          signal={signal}\n          selectedClusterIds={selectedChartClusterIds}\n          onClusterToggle={onChartClusterToggle}\n        />\n      </TabContent>\n    </Tabs>\n  );\n}\n\nexport interface SignalDetailsPageProps {\n  signalId?: string;\n  selectedTraceId: string | null;\n  tracePanel?: ReactNode;\n  onTraceSelect: (signalId: string, traceId: string) => void;\n}\n\nexport function SignalDetailsPage({ signalId, selectedTraceId, tracePanel, onTraceSelect }: SignalDetailsPageProps) {\n  const selectedSignal = useMemo(() => signals.find(signal => signal.id === signalId), [signalId]);\n  const initialCluster =\n    findClusterByTraceId(selectedSignal, selectedTraceId ?? undefined) ?? selectedSignal?.clusters[0];\n  const [selectedClusterId, setSelectedClusterId] = useState<string | null>(() => initialCluster?.id ?? null);\n  const [selectedChartClusterIds, setSelectedChartClusterIds] = useState<string[]>(\n    () => selectedSignal?.clusters.map(cluster => cluster.id) ?? [],\n  );\n  const [activeTab, setActiveTab] = useState<SignalTab>('trace-list');\n  const selectedCluster = selectedSignal?.clusters.find(cluster => cluster.id === selectedClusterId) ?? initialCluster;\n  const { data: tracesData } = useTraces({});\n  const resolvedTraceId = tracesData?.spans[0]?.traceId ?? null;\n\n  const handleTraceSelect = () => {\n    if (!selectedSignal || !resolvedTraceId) return;\n\n    onTraceSelect(selectedSignal.id, resolvedTraceId);\n  };\n\n  const handleChartClusterToggle = (clusterId: string) => {\n    setSelectedChartClusterIds(current =>\n      current.includes(clusterId) ? current.filter(id => id !== clusterId) : [...current, clusterId],\n    );\n  };\n\n  if (!selectedSignal || !selectedCluster) {\n    return <SignalsLayout sidebar={null}>Signal not found</SignalsLayout>;\n  }\n\n  return (\n    <SignalsLayout sidebar={null} tracePanel={activeTab === 'trace-list' ? tracePanel : undefined}>\n      <section className=\"flex h-full min-w-0 flex-col gap-4\">\n        <header className=\"space-y-1\">\n          <h1 className=\"text-icon-xl font-semibold text-neutral6\">{selectedSignal.name}</h1>\n          <p className=\"text-ui-sm text-neutral3\">Explore trace patterns by cluster.</p>\n        </header>\n        <div className=\"min-h-0 flex-1 overflow-hidden\">\n          <SignalClusterTabs\n            signal={selectedSignal}\n            selectedCluster={selectedCluster}\n            selectedTraceId={selectedTraceId}\n            selectedChartClusterIds={selectedChartClusterIds}\n            activeTab={activeTab}\n            onActiveTabChange={setActiveTab}\n            onClusterSelect={setSelectedClusterId}\n            onChartClusterToggle={handleChartClusterToggle}\n            onTraceSelect={handleTraceSelect}\n          />\n        </div>\n      </section>\n    </SignalsLayout>\n  );\n}\n"],"names":["TopicTraceSummaryList","TopicTraceDetailsPanel","TopicsLayout","jsx","jsxs","cn","stringToColor","useMemo","getSignalChartData","ScatterPlotChart","Tabs","TabList","Tab","TabContent","signals","useState","useTraces"],"mappings":"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"}

package/dist/ee/signals/components/signal-details-page.es.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useState } from 'react';
 import '@mastra/react';
 import '@tanstack/react-query';
+import '../../../toast-BKsfnapA.js';
 import { useTraces } from '../../../domains/traces/hooks/use-traces.es.js';
 import '../../../domains/traces/trace-filters.es.js';
 import { S as ScatterPlotChart } from '../../../scatter-plot-chart-B3hfFMKS.js';

package/dist/ee/signals/components/signal-details-page.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"signal-details-page.es.js","sources":["../../../../src/ee/signals/components/signal-details-page.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { useTraces } from '../../../domains/traces/hooks';\nimport { ScatterPlotChart } from '../../../ds/components/ScatterPlotChart';\nimport { Tab, TabContent, TabList, Tabs } from '../../../ds/components/Tabs';\nimport { stringToColor } from '../../../lib/colors';\nimport { cn } from '../../../lib/utils';\nimport { TopicTraceDetailsPanel, TopicTraceSummaryList, TopicsLayout } from '../../topics';\nimport { getSignalChartData } from '../signals-chart-data';\nimport { signals } from '../signals-data';\nimport type { Signal, SignalCluster } from '../types';\n\nconst SignalTraceSummaryList = TopicTraceSummaryList;\nexport const SignalTraceDetailsPanel = TopicTraceDetailsPanel;\nconst SignalsLayout = TopicsLayout;\n\ntype SignalTab = 'trace-list' | 'chart';\n\nfunction findClusterByTraceId(signal: Signal | undefined, traceId: string | undefined) {\n  if (!signal || !traceId) return undefined;\n  return signal.clusters.find(cluster => cluster.traceSummaries.some(trace => trace.id === traceId));\n}\n\ninterface SignalClusterSidebarProps {\n  signal: Signal;\n  selectedClusterIds: string[];\n  onClusterSelect: (clusterId: string) => void;\n  multiple?: boolean;\n  ariaLabel?: string;\n}\n\nexport function SignalClusterSidebar({\n  signal,\n  selectedClusterIds,\n  onClusterSelect,\n  multiple = false,\n  ariaLabel = 'Signal clusters',\n}: SignalClusterSidebarProps) {\n  return (\n    <aside\n      className=\"min-h-0 w-72 shrink-0 overflow-y-auto border-r border-border1/60 pr-4 py-4\"\n      aria-label={ariaLabel}\n    >\n      <ul className=\"space-y-1\" role={multiple ? 'group' : undefined}>\n        {signal.clusters.map(cluster => {\n          const selected = selectedClusterIds.includes(cluster.id);\n          return (\n            <li key={cluster.id}>\n              <button\n                type=\"button\"\n                role={multiple ? 'checkbox' : undefined}\n                aria-checked={multiple ? selected : undefined}\n                aria-pressed={multiple ? undefined : selected}\n                className=\"group cursor-pointer w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-surface3 aria-pressed:bg-surface3 aria-checked:bg-surface3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent1\"\n                onClick={() => onClusterSelect(cluster.id)}\n              >\n                <span className=\"flex items-start gap-2\">\n                  <span\n                    className={cn('mt-1.5 h-2 w-2 shrink-0 rounded-full', multiple && !selected && 'invisible')}\n                    style={{ backgroundColor: stringToColor(cluster.name) }}\n                  />\n                  <span className=\"min-w-0 space-y-1\">\n                    <span\n                      className={cn(\n                        'block text-sm font-medium',\n                        multiple && !selected ? 'text-neutral3' : 'text-neutral5',\n                      )}\n                    >\n                      {cluster.name}\n                    </span>\n                    <span\n                      className={cn(\n                        'line-clamp-2 block text-sm',\n                        multiple && !selected ? 'text-neutral1' : 'text-neutral2',\n                      )}\n                    >\n                      {cluster.description}\n                    </span>\n                  </span>\n                </span>\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </aside>\n  );\n}\n\nexport function SignalTraceListTab({\n  cluster,\n  selectedTraceId,\n  onTraceSelect,\n}: {\n  cluster: SignalCluster;\n  selectedTraceId: string | null;\n  onTraceSelect: () => void;\n}) {\n  return (\n    <SignalTraceSummaryList\n      traces={cluster.traceSummaries}\n      selectedTraceId={selectedTraceId}\n      onTraceSelect={onTraceSelect}\n    />\n  );\n}\n\ninterface SignalChartTabProps {\n  signal: Signal;\n  selectedClusterIds: string[];\n  onClusterToggle: (clusterId: string) => void;\n}\n\nexport function SignalChartTab({ signal, selectedClusterIds, onClusterToggle }: SignalChartTabProps) {\n  const selectedClusters = useMemo(\n    () => signal.clusters.filter(cluster => selectedClusterIds.includes(cluster.id)),\n    [signal.clusters, selectedClusterIds],\n  );\n  const chartData = useMemo(() => getSignalChartData(selectedClusters), [selectedClusters]);\n\n  return (\n    <div className=\"flex h-full min-w-0 gap-6\">\n      <SignalClusterSidebar\n        signal={signal}\n        selectedClusterIds={selectedClusterIds}\n        onClusterSelect={onClusterToggle}\n        multiple\n        ariaLabel=\"Chart cluster filters\"\n      />\n      <div className=\"min-h-0 min-w-0 flex-1 py-4\">\n        <ScatterPlotChart\n          data={chartData}\n          xKey=\"duration\"\n          yKey=\"spans\"\n          nameKey=\"name\"\n          colorKey=\"color\"\n          height=\"100%\"\n          className=\"h-full\"\n          xLabel=\"Duration\"\n          yLabel=\"Spans\"\n          formatX={value => `${value}ms`}\n          formatY={value => `${value} spans`}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface SignalClusterTabsProps {\n  signal: Signal;\n  selectedCluster: SignalCluster;\n  selectedTraceId: string | null;\n  selectedChartClusterIds: string[];\n  activeTab: SignalTab;\n  onActiveTabChange: (tab: SignalTab) => void;\n  onClusterSelect: (clusterId: string) => void;\n  onChartClusterToggle: (clusterId: string) => void;\n  onTraceSelect: () => void;\n}\n\nexport function SignalClusterTabs({\n  signal,\n  selectedCluster,\n  selectedTraceId,\n  selectedChartClusterIds,\n  activeTab,\n  onActiveTabChange,\n  onClusterSelect,\n  onChartClusterToggle,\n  onTraceSelect,\n}: SignalClusterTabsProps) {\n  return (\n    <Tabs<SignalTab>\n      defaultTab=\"trace-list\"\n      value={activeTab}\n      onValueChange={onActiveTabChange}\n      className=\"flex h-full min-h-0 flex-col overflow-hidden\"\n    >\n      <TabList variant=\"line\">\n        <Tab value=\"trace-list\">Trace list</Tab>\n        <Tab value=\"chart\">Chart</Tab>\n      </TabList>\n      <TabContent value=\"trace-list\" className=\"min-h-0 flex-1 overflow-hidden py-0\">\n        <div className=\"flex h-full min-w-0 gap-6\">\n          <SignalClusterSidebar\n            signal={signal}\n            selectedClusterIds={[selectedCluster.id]}\n            onClusterSelect={onClusterSelect}\n          />\n          <div className=\"min-w-0 flex-1 overflow-hidden py-4\">\n            <SignalTraceListTab\n              cluster={selectedCluster}\n              selectedTraceId={selectedTraceId}\n              onTraceSelect={onTraceSelect}\n            />\n          </div>\n        </div>\n      </TabContent>\n      <TabContent value=\"chart\" className=\"min-h-0 flex-1 overflow-hidden py-0\">\n        <SignalChartTab\n          signal={signal}\n          selectedClusterIds={selectedChartClusterIds}\n          onClusterToggle={onChartClusterToggle}\n        />\n      </TabContent>\n    </Tabs>\n  );\n}\n\nexport interface SignalDetailsPageProps {\n  signalId?: string;\n  selectedTraceId: string | null;\n  tracePanel?: ReactNode;\n  onTraceSelect: (signalId: string, traceId: string) => void;\n}\n\nexport function SignalDetailsPage({ signalId, selectedTraceId, tracePanel, onTraceSelect }: SignalDetailsPageProps) {\n  const selectedSignal = useMemo(() => signals.find(signal => signal.id === signalId), [signalId]);\n  const initialCluster =\n    findClusterByTraceId(selectedSignal, selectedTraceId ?? undefined) ?? selectedSignal?.clusters[0];\n  const [selectedClusterId, setSelectedClusterId] = useState<string | null>(() => initialCluster?.id ?? null);\n  const [selectedChartClusterIds, setSelectedChartClusterIds] = useState<string[]>(\n    () => selectedSignal?.clusters.map(cluster => cluster.id) ?? [],\n  );\n  const [activeTab, setActiveTab] = useState<SignalTab>('trace-list');\n  const selectedCluster = selectedSignal?.clusters.find(cluster => cluster.id === selectedClusterId) ?? initialCluster;\n  const { data: tracesData } = useTraces({});\n  const resolvedTraceId = tracesData?.spans[0]?.traceId ?? null;\n\n  const handleTraceSelect = () => {\n    if (!selectedSignal || !resolvedTraceId) return;\n\n    onTraceSelect(selectedSignal.id, resolvedTraceId);\n  };\n\n  const handleChartClusterToggle = (clusterId: string) => {\n    setSelectedChartClusterIds(current =>\n      current.includes(clusterId) ? current.filter(id => id !== clusterId) : [...current, clusterId],\n    );\n  };\n\n  if (!selectedSignal || !selectedCluster) {\n    return <SignalsLayout sidebar={null}>Signal not found</SignalsLayout>;\n  }\n\n  return (\n    <SignalsLayout sidebar={null} tracePanel={activeTab === 'trace-list' ? tracePanel : undefined}>\n      <section className=\"flex h-full min-w-0 flex-col gap-4\">\n        <header className=\"space-y-1\">\n          <h1 className=\"text-icon-xl font-semibold text-neutral6\">{selectedSignal.name}</h1>\n          <p className=\"text-ui-sm text-neutral3\">Explore trace patterns by cluster.</p>\n        </header>\n        <div className=\"min-h-0 flex-1 overflow-hidden\">\n          <SignalClusterTabs\n            signal={selectedSignal}\n            selectedCluster={selectedCluster}\n            selectedTraceId={selectedTraceId}\n            selectedChartClusterIds={selectedChartClusterIds}\n            activeTab={activeTab}\n            onActiveTabChange={setActiveTab}\n            onClusterSelect={setSelectedClusterId}\n            onChartClusterToggle={handleChartClusterToggle}\n            onTraceSelect={handleTraceSelect}\n          />\n        </div>\n      </section>\n    </SignalsLayout>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"signal-details-page.es.js","sources":["../../../../src/ee/signals/components/signal-details-page.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { useTraces } from '../../../domains/traces/hooks';\nimport { ScatterPlotChart } from '../../../ds/components/ScatterPlotChart';\nimport { Tab, TabContent, TabList, Tabs } from '../../../ds/components/Tabs';\nimport { stringToColor } from '../../../lib/colors';\nimport { cn } from '../../../lib/utils';\nimport { TopicTraceDetailsPanel, TopicTraceSummaryList, TopicsLayout } from '../../topics';\nimport { getSignalChartData } from '../signals-chart-data';\nimport { signals } from '../signals-data';\nimport type { Signal, SignalCluster } from '../types';\n\nconst SignalTraceSummaryList = TopicTraceSummaryList;\nexport const SignalTraceDetailsPanel = TopicTraceDetailsPanel;\nconst SignalsLayout = TopicsLayout;\n\ntype SignalTab = 'trace-list' | 'chart';\n\nfunction findClusterByTraceId(signal: Signal | undefined, traceId: string | undefined) {\n  if (!signal || !traceId) return undefined;\n  return signal.clusters.find(cluster => cluster.traceSummaries.some(trace => trace.id === traceId));\n}\n\ninterface SignalClusterSidebarProps {\n  signal: Signal;\n  selectedClusterIds: string[];\n  onClusterSelect: (clusterId: string) => void;\n  multiple?: boolean;\n  ariaLabel?: string;\n}\n\nexport function SignalClusterSidebar({\n  signal,\n  selectedClusterIds,\n  onClusterSelect,\n  multiple = false,\n  ariaLabel = 'Signal clusters',\n}: SignalClusterSidebarProps) {\n  return (\n    <aside\n      className=\"min-h-0 w-72 shrink-0 overflow-y-auto border-r border-border1/60 pr-4 py-4\"\n      aria-label={ariaLabel}\n    >\n      <ul className=\"space-y-1\" role={multiple ? 'group' : undefined}>\n        {signal.clusters.map(cluster => {\n          const selected = selectedClusterIds.includes(cluster.id);\n          return (\n            <li key={cluster.id}>\n              <button\n                type=\"button\"\n                role={multiple ? 'checkbox' : undefined}\n                aria-checked={multiple ? selected : undefined}\n                aria-pressed={multiple ? undefined : selected}\n                className=\"group cursor-pointer w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-surface3 aria-pressed:bg-surface3 aria-checked:bg-surface3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent1\"\n                onClick={() => onClusterSelect(cluster.id)}\n              >\n                <span className=\"flex items-start gap-2\">\n                  <span\n                    className={cn('mt-1.5 h-2 w-2 shrink-0 rounded-full', multiple && !selected && 'invisible')}\n                    style={{ backgroundColor: stringToColor(cluster.name) }}\n                  />\n                  <span className=\"min-w-0 space-y-1\">\n                    <span\n                      className={cn(\n                        'block text-sm font-medium',\n                        multiple && !selected ? 'text-neutral3' : 'text-neutral5',\n                      )}\n                    >\n                      {cluster.name}\n                    </span>\n                    <span\n                      className={cn(\n                        'line-clamp-2 block text-sm',\n                        multiple && !selected ? 'text-neutral1' : 'text-neutral2',\n                      )}\n                    >\n                      {cluster.description}\n                    </span>\n                  </span>\n                </span>\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </aside>\n  );\n}\n\nexport function SignalTraceListTab({\n  cluster,\n  selectedTraceId,\n  onTraceSelect,\n}: {\n  cluster: SignalCluster;\n  selectedTraceId: string | null;\n  onTraceSelect: () => void;\n}) {\n  return (\n    <SignalTraceSummaryList\n      traces={cluster.traceSummaries}\n      selectedTraceId={selectedTraceId}\n      onTraceSelect={onTraceSelect}\n    />\n  );\n}\n\ninterface SignalChartTabProps {\n  signal: Signal;\n  selectedClusterIds: string[];\n  onClusterToggle: (clusterId: string) => void;\n}\n\nexport function SignalChartTab({ signal, selectedClusterIds, onClusterToggle }: SignalChartTabProps) {\n  const selectedClusters = useMemo(\n    () => signal.clusters.filter(cluster => selectedClusterIds.includes(cluster.id)),\n    [signal.clusters, selectedClusterIds],\n  );\n  const chartData = useMemo(() => getSignalChartData(selectedClusters), [selectedClusters]);\n\n  return (\n    <div className=\"flex h-full min-w-0 gap-6\">\n      <SignalClusterSidebar\n        signal={signal}\n        selectedClusterIds={selectedClusterIds}\n        onClusterSelect={onClusterToggle}\n        multiple\n        ariaLabel=\"Chart cluster filters\"\n      />\n      <div className=\"min-h-0 min-w-0 flex-1 py-4\">\n        <ScatterPlotChart\n          data={chartData}\n          xKey=\"duration\"\n          yKey=\"spans\"\n          nameKey=\"name\"\n          colorKey=\"color\"\n          height=\"100%\"\n          className=\"h-full\"\n          xLabel=\"Duration\"\n          yLabel=\"Spans\"\n          formatX={value => `${value}ms`}\n          formatY={value => `${value} spans`}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface SignalClusterTabsProps {\n  signal: Signal;\n  selectedCluster: SignalCluster;\n  selectedTraceId: string | null;\n  selectedChartClusterIds: string[];\n  activeTab: SignalTab;\n  onActiveTabChange: (tab: SignalTab) => void;\n  onClusterSelect: (clusterId: string) => void;\n  onChartClusterToggle: (clusterId: string) => void;\n  onTraceSelect: () => void;\n}\n\nexport function SignalClusterTabs({\n  signal,\n  selectedCluster,\n  selectedTraceId,\n  selectedChartClusterIds,\n  activeTab,\n  onActiveTabChange,\n  onClusterSelect,\n  onChartClusterToggle,\n  onTraceSelect,\n}: SignalClusterTabsProps) {\n  return (\n    <Tabs<SignalTab>\n      defaultTab=\"trace-list\"\n      value={activeTab}\n      onValueChange={onActiveTabChange}\n      className=\"flex h-full min-h-0 flex-col overflow-hidden\"\n    >\n      <TabList variant=\"line\">\n        <Tab value=\"trace-list\">Trace list</Tab>\n        <Tab value=\"chart\">Chart</Tab>\n      </TabList>\n      <TabContent value=\"trace-list\" className=\"min-h-0 flex-1 overflow-hidden py-0\">\n        <div className=\"flex h-full min-w-0 gap-6\">\n          <SignalClusterSidebar\n            signal={signal}\n            selectedClusterIds={[selectedCluster.id]}\n            onClusterSelect={onClusterSelect}\n          />\n          <div className=\"min-w-0 flex-1 overflow-hidden py-4\">\n            <SignalTraceListTab\n              cluster={selectedCluster}\n              selectedTraceId={selectedTraceId}\n              onTraceSelect={onTraceSelect}\n            />\n          </div>\n        </div>\n      </TabContent>\n      <TabContent value=\"chart\" className=\"min-h-0 flex-1 overflow-hidden py-0\">\n        <SignalChartTab\n          signal={signal}\n          selectedClusterIds={selectedChartClusterIds}\n          onClusterToggle={onChartClusterToggle}\n        />\n      </TabContent>\n    </Tabs>\n  );\n}\n\nexport interface SignalDetailsPageProps {\n  signalId?: string;\n  selectedTraceId: string | null;\n  tracePanel?: ReactNode;\n  onTraceSelect: (signalId: string, traceId: string) => void;\n}\n\nexport function SignalDetailsPage({ signalId, selectedTraceId, tracePanel, onTraceSelect }: SignalDetailsPageProps) {\n  const selectedSignal = useMemo(() => signals.find(signal => signal.id === signalId), [signalId]);\n  const initialCluster =\n    findClusterByTraceId(selectedSignal, selectedTraceId ?? undefined) ?? selectedSignal?.clusters[0];\n  const [selectedClusterId, setSelectedClusterId] = useState<string | null>(() => initialCluster?.id ?? null);\n  const [selectedChartClusterIds, setSelectedChartClusterIds] = useState<string[]>(\n    () => selectedSignal?.clusters.map(cluster => cluster.id) ?? [],\n  );\n  const [activeTab, setActiveTab] = useState<SignalTab>('trace-list');\n  const selectedCluster = selectedSignal?.clusters.find(cluster => cluster.id === selectedClusterId) ?? initialCluster;\n  const { data: tracesData } = useTraces({});\n  const resolvedTraceId = tracesData?.spans[0]?.traceId ?? null;\n\n  const handleTraceSelect = () => {\n    if (!selectedSignal || !resolvedTraceId) return;\n\n    onTraceSelect(selectedSignal.id, resolvedTraceId);\n  };\n\n  const handleChartClusterToggle = (clusterId: string) => {\n    setSelectedChartClusterIds(current =>\n      current.includes(clusterId) ? current.filter(id => id !== clusterId) : [...current, clusterId],\n    );\n  };\n\n  if (!selectedSignal || !selectedCluster) {\n    return <SignalsLayout sidebar={null}>Signal not found</SignalsLayout>;\n  }\n\n  return (\n    <SignalsLayout sidebar={null} tracePanel={activeTab === 'trace-list' ? tracePanel : undefined}>\n      <section className=\"flex h-full min-w-0 flex-col gap-4\">\n        <header className=\"space-y-1\">\n          <h1 className=\"text-icon-xl font-semibold text-neutral6\">{selectedSignal.name}</h1>\n          <p className=\"text-ui-sm text-neutral3\">Explore trace patterns by cluster.</p>\n        </header>\n        <div className=\"min-h-0 flex-1 overflow-hidden\">\n          <SignalClusterTabs\n            signal={selectedSignal}\n            selectedCluster={selectedCluster}\n            selectedTraceId={selectedTraceId}\n            selectedChartClusterIds={selectedChartClusterIds}\n            activeTab={activeTab}\n            onActiveTabChange={setActiveTab}\n            onClusterSelect={setSelectedClusterId}\n            onChartClusterToggle={handleChartClusterToggle}\n            onTraceSelect={handleTraceSelect}\n          />\n        </div>\n      </section>\n    </SignalsLayout>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/index.cjs.js

@@ -82,7 +82,7 @@ const tabsTab = require('./tabs-tab-B7Ziuuh8.cjs');
 const tabsContent = require('./tabs-content-ohtjaVdC.cjs');
 const getShortId = require('./get-short-id-BD2mSqtQ.cjs');
 const contentBlock = require('./content-block-Csb01oxE.cjs');
-const multiColumn = require('./multi-column-DGAsiBPq.cjs');
+const multiColumn = require('./multi-column-IfbHfooJ.cjs');
 const codeDiff = require('./code-diff-C2vuR6Ti.cjs');
 const helpers = require('./helpers-DyNelEvl.cjs');
 const Notice = require('./Notice-h63wsfzJ.cjs');

package/dist/index.es.js

@@ -78,7 +78,7 @@ export { T as Tab, a as TabList, b as Tabs } from './tabs-tab-XnMoa1fn.js';
 export { T as TabContent } from './tabs-content--uzXt5ch.js';
 export { T as TextAndIcon, g as getShortId } from './get-short-id-ZED99MfC.js';
 export { C as ContentBlock, a as ContentBlocks } from './content-block-BTpK7gPz.js';
-export { C as Column, a as Columns, M as MultiColumn } from './multi-column-BR3a4MvZ.js';
+export { C as Column, a as Columns, M as MultiColumn } from './multi-column-DzAz6aWn.js';
 export { C as CodeDiff } from './code-diff-lktH1err.js';
 export { I as ItemList, a as ItemListSkeleton, g as getItemListColumnTemplate, b as getToNextItemFn, c as getToPreviousItemFn } from './helpers-3p9MxQbh.js';
 export { N as Notice } from './Notice-CiS1Dv3i.js';

package/dist/{multi-column-BR3a4MvZ.js → multi-column-DzAz6aWn.js}

@@ -5,6 +5,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import { useRef, useState, useCallback, useEffect } from 'react';
 import './components/DataDetailsPanel.es.js';
 import { c as cn } from './cn-BakJzhuv.js';
+import './toast-BKsfnapA.js';
 import 'react-resizable-panels';
 import './resize/panel-icon-button.es.js';
 import './resize/separator.es.js';
@@ -148,4 +149,4 @@ function ScrollArrow({ direction, onClick }) {
 }
 
 export { Column as C, MultiColumn as M, Columns as a };
-//# sourceMappingURL=multi-column-BR3a4MvZ.js.map
+//# sourceMappingURL=multi-column-DzAz6aWn.js.map

package/dist/{multi-column-BR3a4MvZ.js.map → multi-column-DzAz6aWn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"multi-column-BR3a4MvZ.js","sources":["../src/ds/components/Columns/column-content.tsx","../src/ds/components/Columns/column-root.tsx","../src/ds/components/Columns/column-toolbar.tsx","../src/ds/components/Columns/column.tsx","../src/ds/components/Columns/columns.tsx","../src/ds/components/Columns/multi-column.tsx"],"sourcesContent":["import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnContent({ children, className }: ColumnProps) {\n  return <div className={cn(`grid overflow-y-auto gap-8 content-start`, className)}>{children}</div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n  withRightSeparator?: boolean;\n  withLeftSeparator?: boolean;\n};\n\nexport function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }: ColumnProps) {\n  return (\n    <div className=\"flex overflow-y-auto w-full\">\n      {withLeftSeparator && <Separator />}\n\n      <div className={cn(`grid gap-8 content-start w-full overflow-y-auto`, className)}>{children}</div>\n\n      {withRightSeparator && <Separator />}\n    </div>\n  );\n}\n\nfunction Separator() {\n  return <div className={cn('bg-surface5 w-[3px] shrink-0 mx-[1.5vw]')}></div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnToolbarProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnToolbar({ children, className }: ColumnToolbarProps) {\n  return (\n    <div className={cn(`flex items-center justify-between w-full flex-wrap gap-4 gap-x-6`, className)}>{children}</div>\n  );\n}\n","import { ColumnContent } from './column-content';\nimport { ColumnRoot } from './column-root';\nimport { ColumnToolbar } from './column-toolbar';\n\nexport const Column = Object.assign(ColumnRoot, {\n  Content: ColumnContent,\n  Toolbar: ColumnToolbar,\n});\n","import { cn } from '@/index';\n\nexport type ColumnsProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Columns({ children, className }: ColumnsProps) {\n  return <div className={cn(`grid w-full h-full grid-cols-1 overflow-y-auto`, className)}>{children}</div>;\n}\n","'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { cn } from '@/lib/utils';\n\nexport type MultiColumnProps = {\n  children?: React.ReactNode;\n  numOfColumns?: number;\n  minColumnWidth?: string;\n};\n\nexport function MultiColumn({ children, numOfColumns = 1, minColumnWidth }: MultiColumnProps): React.JSX.Element {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n  const updateScrollState = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, []);\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    updateScrollState();\n\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n\n    return () => {\n      el.removeEventListener('scroll', updateScrollState);\n      observer.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const prevColumnsRef = useRef(numOfColumns);\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (numOfColumns > prevColumnsRef.current) {\n      // New column added — scroll to the right end so it's visible\n      requestAnimationFrame(() => {\n        el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });\n      });\n    }\n    prevColumnsRef.current = numOfColumns;\n  }, [numOfColumns]);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        scrollToColumn(e.key === 'ArrowLeft' ? 'left' : 'right');\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, []);\n\n  const scrollToColumn = (direction: 'left' | 'right') => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const columns = Array.from(el.children) as HTMLElement[];\n    const containerLeft = el.scrollLeft;\n    const containerRight = containerLeft + el.clientWidth;\n\n    if (direction === 'right') {\n      // Find the first column whose right edge is past the container's right edge\n      const target = columns.find(col => col.offsetLeft + col.offsetWidth > containerRight + 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: 'smooth' });\n      }\n    } else {\n      // Find the last column whose left edge is before the container's left edge\n      const target = [...columns].reverse().find(col => col.offsetLeft < containerLeft - 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={cn('MULTI_COLUMN relative w-full h-full overflow-hidden')}>\n      {canScrollLeft && <ScrollArrow direction=\"left\" onClick={() => scrollToColumn('left')} />}\n      {canScrollRight && <ScrollArrow direction=\"right\" onClick={() => scrollToColumn('right')} />}\n      <div\n        ref={scrollRef}\n        className=\"grid overflow-x-auto w-full overflow-y-auto h-full\"\n        style={{\n          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? '0'}, 1fr))`,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction ScrollArrow({ direction, onClick }: { direction: 'left' | 'right'; onClick: () => void }) {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n  const isLeft = direction === 'left';\n\n  return (\n    <div\n      className={cn(\n        'absolute top-0 bottom-0 z-20 w-20 flex items-center justify-center px-5 bg-surface2',\n        isLeft ? 'left-0' : 'right-0',\n      )}\n    >\n      <Button onClick={onClick} className=\"w-full h-full px-0\" aria-label={`Scroll ${direction}`}>\n        <Icon />\n      </Button>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"multi-column-DzAz6aWn.js","sources":["../src/ds/components/Columns/column-content.tsx","../src/ds/components/Columns/column-root.tsx","../src/ds/components/Columns/column-toolbar.tsx","../src/ds/components/Columns/column.tsx","../src/ds/components/Columns/columns.tsx","../src/ds/components/Columns/multi-column.tsx"],"sourcesContent":["import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnContent({ children, className }: ColumnProps) {\n  return <div className={cn(`grid overflow-y-auto gap-8 content-start`, className)}>{children}</div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n  withRightSeparator?: boolean;\n  withLeftSeparator?: boolean;\n};\n\nexport function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }: ColumnProps) {\n  return (\n    <div className=\"flex overflow-y-auto w-full\">\n      {withLeftSeparator && <Separator />}\n\n      <div className={cn(`grid gap-8 content-start w-full overflow-y-auto`, className)}>{children}</div>\n\n      {withRightSeparator && <Separator />}\n    </div>\n  );\n}\n\nfunction Separator() {\n  return <div className={cn('bg-surface5 w-[3px] shrink-0 mx-[1.5vw]')}></div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnToolbarProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnToolbar({ children, className }: ColumnToolbarProps) {\n  return (\n    <div className={cn(`flex items-center justify-between w-full flex-wrap gap-4 gap-x-6`, className)}>{children}</div>\n  );\n}\n","import { ColumnContent } from './column-content';\nimport { ColumnRoot } from './column-root';\nimport { ColumnToolbar } from './column-toolbar';\n\nexport const Column = Object.assign(ColumnRoot, {\n  Content: ColumnContent,\n  Toolbar: ColumnToolbar,\n});\n","import { cn } from '@/index';\n\nexport type ColumnsProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Columns({ children, className }: ColumnsProps) {\n  return <div className={cn(`grid w-full h-full grid-cols-1 overflow-y-auto`, className)}>{children}</div>;\n}\n","'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { cn } from '@/lib/utils';\n\nexport type MultiColumnProps = {\n  children?: React.ReactNode;\n  numOfColumns?: number;\n  minColumnWidth?: string;\n};\n\nexport function MultiColumn({ children, numOfColumns = 1, minColumnWidth }: MultiColumnProps): React.JSX.Element {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n  const updateScrollState = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, []);\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    updateScrollState();\n\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n\n    return () => {\n      el.removeEventListener('scroll', updateScrollState);\n      observer.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const prevColumnsRef = useRef(numOfColumns);\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (numOfColumns > prevColumnsRef.current) {\n      // New column added — scroll to the right end so it's visible\n      requestAnimationFrame(() => {\n        el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });\n      });\n    }\n    prevColumnsRef.current = numOfColumns;\n  }, [numOfColumns]);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        scrollToColumn(e.key === 'ArrowLeft' ? 'left' : 'right');\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, []);\n\n  const scrollToColumn = (direction: 'left' | 'right') => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const columns = Array.from(el.children) as HTMLElement[];\n    const containerLeft = el.scrollLeft;\n    const containerRight = containerLeft + el.clientWidth;\n\n    if (direction === 'right') {\n      // Find the first column whose right edge is past the container's right edge\n      const target = columns.find(col => col.offsetLeft + col.offsetWidth > containerRight + 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: 'smooth' });\n      }\n    } else {\n      // Find the last column whose left edge is before the container's left edge\n      const target = [...columns].reverse().find(col => col.offsetLeft < containerLeft - 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={cn('MULTI_COLUMN relative w-full h-full overflow-hidden')}>\n      {canScrollLeft && <ScrollArrow direction=\"left\" onClick={() => scrollToColumn('left')} />}\n      {canScrollRight && <ScrollArrow direction=\"right\" onClick={() => scrollToColumn('right')} />}\n      <div\n        ref={scrollRef}\n        className=\"grid overflow-x-auto w-full overflow-y-auto h-full\"\n        style={{\n          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? '0'}, 1fr))`,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction ScrollArrow({ direction, onClick }: { direction: 'left' | 'right'; onClick: () => void }) {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n  const isLeft = direction === 'left';\n\n  return (\n    <div\n      className={cn(\n        'absolute top-0 bottom-0 z-20 w-20 flex items-center justify-center px-5 bg-surface2',\n        isLeft ? 'left-0' : 'right-0',\n      )}\n    >\n      <Button onClick={onClick} className=\"w-full h-full px-0\" aria-label={`Scroll ${direction}`}>\n        <Icon />\n      </Button>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/{multi-column-DGAsiBPq.cjs → multi-column-IfbHfooJ.cjs}

@@ -7,6 +7,7 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 require('./components/DataDetailsPanel.cjs.js');
 const utils_cn = require('./cn-vA5sWo9W.cjs');
+require('./toast-Bh4WQDyj.cjs');
 require('react-resizable-panels');
 require('./resize/panel-icon-button.cjs.js');
 require('./resize/separator.cjs.js');
@@ -152,4 +153,4 @@ function ScrollArrow({ direction, onClick }) {
 exports.Column = Column;
 exports.Columns = Columns;
 exports.MultiColumn = MultiColumn;
-//# sourceMappingURL=multi-column-DGAsiBPq.cjs.map
+//# sourceMappingURL=multi-column-IfbHfooJ.cjs.map

package/dist/{multi-column-DGAsiBPq.cjs.map → multi-column-IfbHfooJ.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"multi-column-DGAsiBPq.cjs","sources":["../src/ds/components/Columns/column-content.tsx","../src/ds/components/Columns/column-root.tsx","../src/ds/components/Columns/column-toolbar.tsx","../src/ds/components/Columns/column.tsx","../src/ds/components/Columns/columns.tsx","../src/ds/components/Columns/multi-column.tsx"],"sourcesContent":["import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnContent({ children, className }: ColumnProps) {\n  return <div className={cn(`grid overflow-y-auto gap-8 content-start`, className)}>{children}</div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n  withRightSeparator?: boolean;\n  withLeftSeparator?: boolean;\n};\n\nexport function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }: ColumnProps) {\n  return (\n    <div className=\"flex overflow-y-auto w-full\">\n      {withLeftSeparator && <Separator />}\n\n      <div className={cn(`grid gap-8 content-start w-full overflow-y-auto`, className)}>{children}</div>\n\n      {withRightSeparator && <Separator />}\n    </div>\n  );\n}\n\nfunction Separator() {\n  return <div className={cn('bg-surface5 w-[3px] shrink-0 mx-[1.5vw]')}></div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnToolbarProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnToolbar({ children, className }: ColumnToolbarProps) {\n  return (\n    <div className={cn(`flex items-center justify-between w-full flex-wrap gap-4 gap-x-6`, className)}>{children}</div>\n  );\n}\n","import { ColumnContent } from './column-content';\nimport { ColumnRoot } from './column-root';\nimport { ColumnToolbar } from './column-toolbar';\n\nexport const Column = Object.assign(ColumnRoot, {\n  Content: ColumnContent,\n  Toolbar: ColumnToolbar,\n});\n","import { cn } from '@/index';\n\nexport type ColumnsProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Columns({ children, className }: ColumnsProps) {\n  return <div className={cn(`grid w-full h-full grid-cols-1 overflow-y-auto`, className)}>{children}</div>;\n}\n","'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { cn } from '@/lib/utils';\n\nexport type MultiColumnProps = {\n  children?: React.ReactNode;\n  numOfColumns?: number;\n  minColumnWidth?: string;\n};\n\nexport function MultiColumn({ children, numOfColumns = 1, minColumnWidth }: MultiColumnProps): React.JSX.Element {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n  const updateScrollState = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, []);\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    updateScrollState();\n\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n\n    return () => {\n      el.removeEventListener('scroll', updateScrollState);\n      observer.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const prevColumnsRef = useRef(numOfColumns);\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (numOfColumns > prevColumnsRef.current) {\n      // New column added — scroll to the right end so it's visible\n      requestAnimationFrame(() => {\n        el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });\n      });\n    }\n    prevColumnsRef.current = numOfColumns;\n  }, [numOfColumns]);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        scrollToColumn(e.key === 'ArrowLeft' ? 'left' : 'right');\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, []);\n\n  const scrollToColumn = (direction: 'left' | 'right') => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const columns = Array.from(el.children) as HTMLElement[];\n    const containerLeft = el.scrollLeft;\n    const containerRight = containerLeft + el.clientWidth;\n\n    if (direction === 'right') {\n      // Find the first column whose right edge is past the container's right edge\n      const target = columns.find(col => col.offsetLeft + col.offsetWidth > containerRight + 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: 'smooth' });\n      }\n    } else {\n      // Find the last column whose left edge is before the container's left edge\n      const target = [...columns].reverse().find(col => col.offsetLeft < containerLeft - 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={cn('MULTI_COLUMN relative w-full h-full overflow-hidden')}>\n      {canScrollLeft && <ScrollArrow direction=\"left\" onClick={() => scrollToColumn('left')} />}\n      {canScrollRight && <ScrollArrow direction=\"right\" onClick={() => scrollToColumn('right')} />}\n      <div\n        ref={scrollRef}\n        className=\"grid overflow-x-auto w-full overflow-y-auto h-full\"\n        style={{\n          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? '0'}, 1fr))`,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction ScrollArrow({ direction, onClick }: { direction: 'left' | 'right'; onClick: () => void }) {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n  const isLeft = direction === 'left';\n\n  return (\n    <div\n      className={cn(\n        'absolute top-0 bottom-0 z-20 w-20 flex items-center justify-center px-5 bg-surface2',\n        isLeft ? 'left-0' : 'right-0',\n      )}\n    >\n      <Button onClick={onClick} className=\"w-full h-full px-0\" aria-label={`Scroll ${direction}`}>\n        <Icon />\n      </Button>\n    </div>\n  );\n}\n"],"names":["cn","jsxs","jsx","useRef","useState","useCallback","useEffect","ChevronLeftIcon","ChevronRightIcon","Button"],"mappings":"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"}
+{"version":3,"file":"multi-column-IfbHfooJ.cjs","sources":["../src/ds/components/Columns/column-content.tsx","../src/ds/components/Columns/column-root.tsx","../src/ds/components/Columns/column-toolbar.tsx","../src/ds/components/Columns/column.tsx","../src/ds/components/Columns/columns.tsx","../src/ds/components/Columns/multi-column.tsx"],"sourcesContent":["import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnContent({ children, className }: ColumnProps) {\n  return <div className={cn(`grid overflow-y-auto gap-8 content-start`, className)}>{children}</div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n  withRightSeparator?: boolean;\n  withLeftSeparator?: boolean;\n};\n\nexport function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }: ColumnProps) {\n  return (\n    <div className=\"flex overflow-y-auto w-full\">\n      {withLeftSeparator && <Separator />}\n\n      <div className={cn(`grid gap-8 content-start w-full overflow-y-auto`, className)}>{children}</div>\n\n      {withRightSeparator && <Separator />}\n    </div>\n  );\n}\n\nfunction Separator() {\n  return <div className={cn('bg-surface5 w-[3px] shrink-0 mx-[1.5vw]')}></div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnToolbarProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnToolbar({ children, className }: ColumnToolbarProps) {\n  return (\n    <div className={cn(`flex items-center justify-between w-full flex-wrap gap-4 gap-x-6`, className)}>{children}</div>\n  );\n}\n","import { ColumnContent } from './column-content';\nimport { ColumnRoot } from './column-root';\nimport { ColumnToolbar } from './column-toolbar';\n\nexport const Column = Object.assign(ColumnRoot, {\n  Content: ColumnContent,\n  Toolbar: ColumnToolbar,\n});\n","import { cn } from '@/index';\n\nexport type ColumnsProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Columns({ children, className }: ColumnsProps) {\n  return <div className={cn(`grid w-full h-full grid-cols-1 overflow-y-auto`, className)}>{children}</div>;\n}\n","'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { cn } from '@/lib/utils';\n\nexport type MultiColumnProps = {\n  children?: React.ReactNode;\n  numOfColumns?: number;\n  minColumnWidth?: string;\n};\n\nexport function MultiColumn({ children, numOfColumns = 1, minColumnWidth }: MultiColumnProps): React.JSX.Element {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n  const updateScrollState = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, []);\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    updateScrollState();\n\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n\n    return () => {\n      el.removeEventListener('scroll', updateScrollState);\n      observer.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const prevColumnsRef = useRef(numOfColumns);\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (numOfColumns > prevColumnsRef.current) {\n      // New column added — scroll to the right end so it's visible\n      requestAnimationFrame(() => {\n        el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });\n      });\n    }\n    prevColumnsRef.current = numOfColumns;\n  }, [numOfColumns]);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        scrollToColumn(e.key === 'ArrowLeft' ? 'left' : 'right');\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, []);\n\n  const scrollToColumn = (direction: 'left' | 'right') => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const columns = Array.from(el.children) as HTMLElement[];\n    const containerLeft = el.scrollLeft;\n    const containerRight = containerLeft + el.clientWidth;\n\n    if (direction === 'right') {\n      // Find the first column whose right edge is past the container's right edge\n      const target = columns.find(col => col.offsetLeft + col.offsetWidth > containerRight + 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: 'smooth' });\n      }\n    } else {\n      // Find the last column whose left edge is before the container's left edge\n      const target = [...columns].reverse().find(col => col.offsetLeft < containerLeft - 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={cn('MULTI_COLUMN relative w-full h-full overflow-hidden')}>\n      {canScrollLeft && <ScrollArrow direction=\"left\" onClick={() => scrollToColumn('left')} />}\n      {canScrollRight && <ScrollArrow direction=\"right\" onClick={() => scrollToColumn('right')} />}\n      <div\n        ref={scrollRef}\n        className=\"grid overflow-x-auto w-full overflow-y-auto h-full\"\n        style={{\n          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? '0'}, 1fr))`,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction ScrollArrow({ direction, onClick }: { direction: 'left' | 'right'; onClick: () => void }) {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n  const isLeft = direction === 'left';\n\n  return (\n    <div\n      className={cn(\n        'absolute top-0 bottom-0 z-20 w-20 flex items-center justify-center px-5 bg-surface2',\n        isLeft ? 'left-0' : 'right-0',\n      )}\n    >\n      <Button onClick={onClick} className=\"w-full h-full px-0\" aria-label={`Scroll ${direction}`}>\n        <Icon />\n      </Button>\n    </div>\n  );\n}\n"],"names":["cn","jsxs","jsx","useRef","useState","useCallback","useEffect","ChevronLeftIcon","ChevronRightIcon","Button"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "38.0.0-alpha.5",
+  "version": "38.0.0-alpha.7",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -169,8 +169,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.29.0-alpha.5",
-    "@mastra/react": "1.2.1-alpha.5"
+    "@mastra/client-js": "^1.29.0-alpha.7",
+    "@mastra/react": "1.2.1-alpha.7"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.1",
@@ -207,11 +207,11 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.8",
+    "@mastra/client-js": "^1.29.0-alpha.7",
     "@internal/lint": "0.0.109",
-    "@mastra/client-js": "^1.29.0-alpha.5",
-    "@mastra/memory": "1.21.3-alpha.1",
-    "@mastra/core": "1.48.0-alpha.5",
-    "@mastra/react": "1.2.1-alpha.5"
+    "@mastra/core": "1.48.0-alpha.7",
+    "@mastra/react": "1.2.1-alpha.7",
+    "@mastra/memory": "1.21.3-alpha.2"
   },
   "homepage": "https://mastra.ai",
   "repository": {