@mastra/playground-ui 40.0.0-alpha.3 → 40.0.0-alpha.4

package/dist/domains/metrics/components/latency-card-view.es.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { M as MetricsCard } from '../../../metrics-card-BTBHMGM_.js';
 import { M as MetricsLineChart } from '../../../metrics-line-chart-BUUqDQPW.js';
-import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-CaZnZdY8.js';
 import { T as TabContent } from '../../../tabs-content--uzXt5ch.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-1KGOybMG.js';
 import { CHART_COLORS } from './metrics-utils.es.js';
 
 const latencySeries = [
@@ -26,6 +26,9 @@ const latencySeries = [
     })
   }
 ];
+function isLatencyTab(value) {
+  return value === "agents" || value === "workflows" || value === "tools";
+}
 function LatencyChart({ data, onPointClick }) {
   if (data.length === 0) {
     return /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No latency data yet" });
@@ -43,19 +46,17 @@ function LatencyChart({ data, onPointClick }) {
   );
 }
 function LatencyCardView({ data, isLoading, isError, onPointClick, actions }) {
-  const initialTab = !data ? "agents" : data.agentData.length > 0 ? "agents" : data.workflowData.length > 0 ? "workflows" : data.toolData.length > 0 ? "tools" : "agents";
-  const [activeTab, setActiveTab] = useState(initialTab);
-  useEffect(() => {
-    if (!data) return;
-    const tabHasData = {
-      agents: data.agentData.length > 0,
-      workflows: data.workflowData.length > 0,
-      tools: data.toolData.length > 0
-    };
-    if (!tabHasData[activeTab] && tabHasData[initialTab]) {
-      setActiveTab(initialTab);
-    }
-  }, [data, activeTab, initialTab]);
+  const agentsHasData = (data?.agentData.length ?? 0) > 0;
+  const workflowsHasData = (data?.workflowData.length ?? 0) > 0;
+  const toolsHasData = (data?.toolData.length ?? 0) > 0;
+  const tabHasData = {
+    agents: agentsHasData,
+    workflows: workflowsHasData,
+    tools: toolsHasData
+  };
+  const initialTab = agentsHasData ? "agents" : workflowsHasData ? "workflows" : toolsHasData ? "tools" : "agents";
+  const [selectedTab, setSelectedTab] = useState("agents");
+  const activeTab = tabHasData[selectedTab] ? selectedTab : initialTab;
   const renderedActions = typeof actions === "function" ? actions(activeTab) : actions;
   const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);
   const p50Values = data ? Object.values(data).filter(Array.isArray).flat().map((d) => d.p50).filter((v) => typeof v === "number") : [];
@@ -66,34 +67,55 @@ function LatencyCardView({ data, isLoading, isError, onPointClick, actions }) {
       hasData && /* @__PURE__ */ jsx(MetricsCard.Summary, { value: avgP50, label: "Avg p50" }),
       renderedActions ? /* @__PURE__ */ jsx(MetricsCard.Actions, { children: renderedActions }) : null
     ] }),
-    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load latency data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No latency data yet" }) : /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, defaultTab: initialTab, className: "overflow-visible", children: [
-      /* @__PURE__ */ jsxs(TabList, { children: [
-        /* @__PURE__ */ jsx(Tab, { value: "agents", children: "Agents" }),
-        /* @__PURE__ */ jsx(Tab, { value: "workflows", children: "Workflows" }),
-        /* @__PURE__ */ jsx(Tab, { value: "tools", children: "Tools" })
-      ] }),
-      /* @__PURE__ */ jsx(TabContent, { value: "agents", children: /* @__PURE__ */ jsx(
-        LatencyChart,
-        {
-          data: data.agentData,
-          onPointClick: onPointClick ? (p) => onPointClick("agents", p) : void 0
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TabContent, { value: "workflows", children: /* @__PURE__ */ jsx(
-        LatencyChart,
-        {
-          data: data.workflowData,
-          onPointClick: onPointClick ? (p) => onPointClick("workflows", p) : void 0
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TabContent, { value: "tools", children: /* @__PURE__ */ jsx(
-        LatencyChart,
-        {
-          data: data.toolData,
-          onPointClick: onPointClick ? (p) => onPointClick("tools", p) : void 0
-        }
-      ) })
-    ] }) })
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load latency data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No latency data yet" }) : /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: activeTab,
+        onValueChange: (value) => {
+          if (isLatencyTab(value) && tabHasData[value]) {
+            setSelectedTab(value);
+          }
+        },
+        defaultTab: initialTab,
+        className: "overflow-visible",
+        children: [
+          /* @__PURE__ */ jsxs(TabList, { children: [
+            /* @__PURE__ */ jsx(Tab, { value: "agents", disabled: !agentsHasData, disabledTooltip: "No agent latency data for this period", children: "Agents" }),
+            /* @__PURE__ */ jsx(
+              Tab,
+              {
+                value: "workflows",
+                disabled: !workflowsHasData,
+                disabledTooltip: "No workflow latency data for this period",
+                children: "Workflows"
+              }
+            ),
+            /* @__PURE__ */ jsx(Tab, { value: "tools", disabled: !toolsHasData, disabledTooltip: "No tool latency data for this period", children: "Tools" })
+          ] }),
+          /* @__PURE__ */ jsx(TabContent, { value: "agents", children: /* @__PURE__ */ jsx(
+            LatencyChart,
+            {
+              data: data.agentData,
+              onPointClick: onPointClick ? (p) => onPointClick("agents", p) : void 0
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TabContent, { value: "workflows", children: /* @__PURE__ */ jsx(
+            LatencyChart,
+            {
+              data: data.workflowData,
+              onPointClick: onPointClick ? (p) => onPointClick("workflows", p) : void 0
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TabContent, { value: "tools", children: /* @__PURE__ */ jsx(
+            LatencyChart,
+            {
+              data: data.toolData,
+              onPointClick: onPointClick ? (p) => onPointClick("tools", p) : void 0
+            }
+          ) })
+        ]
+      }
+    ) })
   ] });
 }
 

package/dist/domains/metrics/components/latency-card-view.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"latency-card-view.es.js","sources":["../../../../src/domains/metrics/components/latency-card-view.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { MetricsCard } from '../../../ds/components/MetricsCard';\nimport { MetricsLineChart } from '../../../ds/components/MetricsLineChart';\nimport { Tab, TabContent, TabList, Tabs } from '../../../ds/components/Tabs';\nimport type { LatencyPoint } from '../hooks/use-latency-metrics';\nimport { CHART_COLORS } from './metrics-utils';\n\nconst latencySeries = [\n  {\n    dataKey: 'p50',\n    label: 'p50',\n    color: CHART_COLORS.blue,\n    aggregate: (data: Record<string, unknown>[]) => ({\n      value: data.length > 0 ? `${Math.round(data.reduce((s, d) => s + (d.p50 as number), 0) / data.length)}` : '0',\n      suffix: 'avg ms',\n    }),\n  },\n  {\n    dataKey: 'p95',\n    label: 'p95',\n    color: CHART_COLORS.yellow,\n    aggregate: (data: Record<string, unknown>[]) => ({\n      value: data.length > 0 ? `${Math.round(data.reduce((s, d) => s + (d.p95 as number), 0) / data.length)}` : '0',\n      suffix: 'avg ms',\n    }),\n  },\n];\n\nexport type LatencyTab = 'agents' | 'workflows' | 'tools';\n\nfunction LatencyChart({ data, onPointClick }: { data: LatencyPoint[]; onPointClick?: (point: LatencyPoint) => void }) {\n  if (data.length === 0) {\n    return <MetricsCard.NoData message=\"No latency data yet\" />;\n  }\n  return (\n    <MetricsLineChart\n      data={data}\n      series={latencySeries}\n      onPointClick={\n        onPointClick\n          ? point => {\n              const p = point as LatencyPoint;\n              if (typeof p?.tsMs === 'number' && Number.isFinite(p.tsMs)) onPointClick(p);\n            }\n          : undefined\n      }\n    />\n  );\n}\n\nexport interface LatencyCardViewProps {\n  data: { agentData: LatencyPoint[]; workflowData: LatencyPoint[]; toolData: LatencyPoint[] } | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  /** Optional drilldown: invoked when a chart node is clicked. Container provides the navigation. */\n  onPointClick?: (tab: LatencyTab, point: LatencyPoint) => void;\n  /**\n   * Optional slot for top-bar action buttons (e.g. \"View in Traces\").\n   * Pass a function to receive the active tab so the action can scope itself to the current entity type.\n   */\n  actions?: ReactNode | ((tab: LatencyTab) => ReactNode);\n}\n\nexport function LatencyCardView({ data, isLoading, isError, onPointClick, actions }: LatencyCardViewProps) {\n  const initialTab: LatencyTab = !data\n    ? 'agents'\n    : data.agentData.length > 0\n      ? 'agents'\n      : data.workflowData.length > 0\n        ? 'workflows'\n        : data.toolData.length > 0\n          ? 'tools'\n          : 'agents';\n  const [activeTab, setActiveTab] = useState<LatencyTab>(initialTab);\n  // Resync to a non-empty tab when async data finishes loading. Without this,\n  // a card that mounts before data arrives stays stuck on `agents` even when\n  // only workflow/tool data exists.\n  useEffect(() => {\n    if (!data) return;\n    const tabHasData = {\n      agents: data.agentData.length > 0,\n      workflows: data.workflowData.length > 0,\n      tools: data.toolData.length > 0,\n    } as const;\n    if (!tabHasData[activeTab] && tabHasData[initialTab]) {\n      setActiveTab(initialTab);\n    }\n  }, [data, activeTab, initialTab]);\n  const renderedActions = typeof actions === 'function' ? actions(activeTab) : actions;\n  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);\n  const p50Values = data\n    ? Object.values(data)\n        .filter(Array.isArray)\n        .flat()\n        .map(d => d.p50)\n        .filter((v): v is number => typeof v === 'number')\n    : [];\n  const avgP50 =\n    p50Values.length > 0 ? `${Math.round(p50Values.reduce((s, v) => s + v, 0) / p50Values.length)}ms` : '—';\n\n  return (\n    <MetricsCard>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title=\"Latency\" description=\"Hourly p50 and p95 latency.\" />\n        {hasData && <MetricsCard.Summary value={avgP50} label=\"Avg p50\" />}\n        {renderedActions ? <MetricsCard.Actions>{renderedActions}</MetricsCard.Actions> : null}\n      </MetricsCard.TopBar>\n      {isLoading ? (\n        <MetricsCard.Loading />\n      ) : isError ? (\n        <MetricsCard.Error message=\"Failed to load latency data\" />\n      ) : (\n        <MetricsCard.Content>\n          {!hasData ? (\n            <MetricsCard.NoData message=\"No latency data yet\" />\n          ) : (\n            <Tabs value={activeTab} onValueChange={setActiveTab} defaultTab={initialTab} className=\"overflow-visible\">\n              <TabList>\n                <Tab value=\"agents\">Agents</Tab>\n                <Tab value=\"workflows\">Workflows</Tab>\n                <Tab value=\"tools\">Tools</Tab>\n              </TabList>\n              <TabContent value=\"agents\">\n                <LatencyChart\n                  data={data.agentData}\n                  onPointClick={onPointClick ? p => onPointClick('agents', p) : undefined}\n                />\n              </TabContent>\n              <TabContent value=\"workflows\">\n                <LatencyChart\n                  data={data.workflowData}\n                  onPointClick={onPointClick ? p => onPointClick('workflows', p) : undefined}\n                />\n              </TabContent>\n              <TabContent value=\"tools\">\n                <LatencyChart\n                  data={data.toolData}\n                  onPointClick={onPointClick ? p => onPointClick('tools', p) : undefined}\n                />\n              </TabContent>\n            </Tabs>\n          )}\n        </MetricsCard.Content>\n      )}\n    </MetricsCard>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"latency-card-view.es.js","sources":["../../../../src/domains/metrics/components/latency-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { MetricsLineChart } from '../../../ds/components/MetricsLineChart/metrics-line-chart';\nimport { TabContent } from '../../../ds/components/Tabs/tabs-content';\nimport { TabList } from '../../../ds/components/Tabs/tabs-list';\nimport { Tabs } from '../../../ds/components/Tabs/tabs-root';\nimport { Tab } from '../../../ds/components/Tabs/tabs-tab';\nimport type { LatencyPoint } from '../hooks/use-latency-metrics';\nimport { CHART_COLORS } from './metrics-utils';\n\nconst latencySeries = [\n  {\n    dataKey: 'p50',\n    label: 'p50',\n    color: CHART_COLORS.blue,\n    aggregate: (data: Record<string, unknown>[]) => ({\n      value: data.length > 0 ? `${Math.round(data.reduce((s, d) => s + (d.p50 as number), 0) / data.length)}` : '0',\n      suffix: 'avg ms',\n    }),\n  },\n  {\n    dataKey: 'p95',\n    label: 'p95',\n    color: CHART_COLORS.yellow,\n    aggregate: (data: Record<string, unknown>[]) => ({\n      value: data.length > 0 ? `${Math.round(data.reduce((s, d) => s + (d.p95 as number), 0) / data.length)}` : '0',\n      suffix: 'avg ms',\n    }),\n  },\n];\n\nexport type LatencyTab = 'agents' | 'workflows' | 'tools';\n\nfunction isLatencyTab(value: string): value is LatencyTab {\n  return value === 'agents' || value === 'workflows' || value === 'tools';\n}\n\nfunction LatencyChart({ data, onPointClick }: { data: LatencyPoint[]; onPointClick?: (point: LatencyPoint) => void }) {\n  if (data.length === 0) {\n    return <MetricsCard.NoData message=\"No latency data yet\" />;\n  }\n  return (\n    <MetricsLineChart\n      data={data}\n      series={latencySeries}\n      onPointClick={\n        onPointClick\n          ? point => {\n              const p = point as LatencyPoint;\n              if (typeof p?.tsMs === 'number' && Number.isFinite(p.tsMs)) onPointClick(p);\n            }\n          : undefined\n      }\n    />\n  );\n}\n\nexport interface LatencyCardViewProps {\n  data: { agentData: LatencyPoint[]; workflowData: LatencyPoint[]; toolData: LatencyPoint[] } | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  /** Optional drilldown: invoked when a chart node is clicked. Container provides the navigation. */\n  onPointClick?: (tab: LatencyTab, point: LatencyPoint) => void;\n  /**\n   * Optional slot for top-bar action buttons (e.g. \"View in Traces\").\n   * Pass a function to receive the active tab so the action can scope itself to the current entity type.\n   */\n  actions?: ReactNode | ((tab: LatencyTab) => ReactNode);\n}\n\nexport function LatencyCardView({ data, isLoading, isError, onPointClick, actions }: LatencyCardViewProps) {\n  const agentsHasData = (data?.agentData.length ?? 0) > 0;\n  const workflowsHasData = (data?.workflowData.length ?? 0) > 0;\n  const toolsHasData = (data?.toolData.length ?? 0) > 0;\n  const tabHasData = {\n    agents: agentsHasData,\n    workflows: workflowsHasData,\n    tools: toolsHasData,\n  } as const;\n  const initialTab: LatencyTab = agentsHasData\n    ? 'agents'\n    : workflowsHasData\n      ? 'workflows'\n      : toolsHasData\n        ? 'tools'\n        : 'agents';\n  const [selectedTab, setSelectedTab] = useState<LatencyTab>('agents');\n  const activeTab = tabHasData[selectedTab] ? selectedTab : initialTab;\n  const renderedActions = typeof actions === 'function' ? actions(activeTab) : actions;\n  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);\n  const p50Values = data\n    ? Object.values(data)\n        .filter(Array.isArray)\n        .flat()\n        .map(d => d.p50)\n        .filter((v): v is number => typeof v === 'number')\n    : [];\n  const avgP50 =\n    p50Values.length > 0 ? `${Math.round(p50Values.reduce((s, v) => s + v, 0) / p50Values.length)}ms` : '—';\n\n  return (\n    <MetricsCard>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title=\"Latency\" description=\"Hourly p50 and p95 latency.\" />\n        {hasData && <MetricsCard.Summary value={avgP50} label=\"Avg p50\" />}\n        {renderedActions ? <MetricsCard.Actions>{renderedActions}</MetricsCard.Actions> : null}\n      </MetricsCard.TopBar>\n      {isLoading ? (\n        <MetricsCard.Loading />\n      ) : isError ? (\n        <MetricsCard.Error message=\"Failed to load latency data\" />\n      ) : (\n        <MetricsCard.Content>\n          {!hasData ? (\n            <MetricsCard.NoData message=\"No latency data yet\" />\n          ) : (\n            <Tabs\n              value={activeTab}\n              onValueChange={value => {\n                if (isLatencyTab(value) && tabHasData[value]) {\n                  setSelectedTab(value);\n                }\n              }}\n              defaultTab={initialTab}\n              className=\"overflow-visible\"\n            >\n              <TabList>\n                <Tab value=\"agents\" disabled={!agentsHasData} disabledTooltip=\"No agent latency data for this period\">\n                  Agents\n                </Tab>\n                <Tab\n                  value=\"workflows\"\n                  disabled={!workflowsHasData}\n                  disabledTooltip=\"No workflow latency data for this period\"\n                >\n                  Workflows\n                </Tab>\n                <Tab value=\"tools\" disabled={!toolsHasData} disabledTooltip=\"No tool latency data for this period\">\n                  Tools\n                </Tab>\n              </TabList>\n              <TabContent value=\"agents\">\n                <LatencyChart\n                  data={data.agentData}\n                  onPointClick={onPointClick ? p => onPointClick('agents', p) : undefined}\n                />\n              </TabContent>\n              <TabContent value=\"workflows\">\n                <LatencyChart\n                  data={data.workflowData}\n                  onPointClick={onPointClick ? p => onPointClick('workflows', p) : undefined}\n                />\n              </TabContent>\n              <TabContent value=\"tools\">\n                <LatencyChart\n                  data={data.toolData}\n                  onPointClick={onPointClick ? p => onPointClick('tools', p) : undefined}\n                />\n              </TabContent>\n            </Tabs>\n          )}\n        </MetricsCard.Content>\n      )}\n    </MetricsCard>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/metrics/components/memory-card-view.cjs.js

@@ -7,7 +7,7 @@ const React = require('react');
 const dataList = require('../../../data-list-DDQRmA6L.cjs');
 const metricsCard = require('../../../metrics-card-CriQ3I_h.cjs');
 const tabsContent = require('../../../tabs-content-ohtjaVdC.cjs');
-const tabsTab = require('../../../tabs-tab-BeUPTvaP.cjs');
+const tabsTab = require('../../../tabs-tab-DkeS2Iv0.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 function isMemoryTab(value) {

package/dist/domains/metrics/components/memory-card-view.es.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { D as DataList } from '../../../data-list-D5uItcj6.js';
 import { M as MetricsCard } from '../../../metrics-card-BTBHMGM_.js';
 import { T as TabContent } from '../../../tabs-content--uzXt5ch.js';
-import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-CaZnZdY8.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-1KGOybMG.js';
 import { METRICS_DATA_LIST_PROPS, formatCompact, formatCost } from './metrics-utils.es.js';
 
 function isMemoryTab(value) {

package/dist/domains/metrics/components/scores-card-view.cjs.js

@@ -8,7 +8,7 @@ const dataList = require('../../../data-list-DDQRmA6L.cjs');
 const metricsCard = require('../../../metrics-card-CriQ3I_h.cjs');
 const metricsLineChart = require('../../../metrics-line-chart-D1ZGVepo.cjs');
 const tabsContent = require('../../../tabs-content-ohtjaVdC.cjs');
-const tabsTab = require('../../../tabs-tab-BeUPTvaP.cjs');
+const tabsTab = require('../../../tabs-tab-DkeS2Iv0.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 const SERIES_COLORS = [

package/dist/domains/metrics/components/scores-card-view.es.js

@@ -4,7 +4,7 @@ import { D as DataList } from '../../../data-list-D5uItcj6.js';
 import { M as MetricsCard } from '../../../metrics-card-BTBHMGM_.js';
 import { M as MetricsLineChart } from '../../../metrics-line-chart-BUUqDQPW.js';
 import { T as TabContent } from '../../../tabs-content--uzXt5ch.js';
-import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-CaZnZdY8.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-1KGOybMG.js';
 import { CHART_COLORS, METRICS_DATA_LIST_PROPS } from './metrics-utils.es.js';
 
 const SERIES_COLORS = [

package/dist/domains/metrics/components/token-usage-by-agent-card-view.cjs.js

@@ -7,7 +7,7 @@ const React = require('react');
 const horizontalBars = require('../../../horizontal-bars-CjZn3RnH.cjs');
 const metricsCard = require('../../../metrics-card-CriQ3I_h.cjs');
 const tabsContent = require('../../../tabs-content-ohtjaVdC.cjs');
-const tabsTab = require('../../../tabs-tab-BeUPTvaP.cjs');
+const tabsTab = require('../../../tabs-tab-DkeS2Iv0.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 function isTokenUsageTab(value) {

package/dist/domains/metrics/components/token-usage-by-agent-card-view.es.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { H as HorizontalBars } from '../../../horizontal-bars-D_1wypjd.js';
 import { M as MetricsCard } from '../../../metrics-card-BTBHMGM_.js';
 import { T as TabContent } from '../../../tabs-content--uzXt5ch.js';
-import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-CaZnZdY8.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-1KGOybMG.js';
 import { formatCost, formatCompact, CHART_COLORS } from './metrics-utils.es.js';
 
 function isTokenUsageTab(value) {

package/dist/domains/metrics/components/token-usage-timeline-card-view.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const metricsCard = require('../../../metrics-card-CriQ3I_h.cjs');
 const metricsLineChart = require('../../../metrics-line-chart-D1ZGVepo.cjs');
-const tabsTab = require('../../../tabs-tab-BeUPTvaP.cjs');
+const tabsTab = require('../../../tabs-tab-DkeS2Iv0.cjs');
 const tabsContent = require('../../../tabs-content-ohtjaVdC.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 

package/dist/domains/metrics/components/token-usage-timeline-card-view.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { M as MetricsCard } from '../../../metrics-card-BTBHMGM_.js';
 import { M as MetricsLineChart } from '../../../metrics-line-chart-BUUqDQPW.js';
-import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-CaZnZdY8.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-1KGOybMG.js';
 import { T as TabContent } from '../../../tabs-content--uzXt5ch.js';
 import { CHART_COLORS, formatCompact, formatCost } from './metrics-utils.es.js';
 

package/dist/domains/metrics/components/traces-volume-card-view.cjs.js

@@ -7,7 +7,7 @@ const React = require('react');
 const horizontalBars = require('../../../horizontal-bars-CjZn3RnH.cjs');
 const metricsCard = require('../../../metrics-card-CriQ3I_h.cjs');
 const tabsContent = require('../../../tabs-content-ohtjaVdC.cjs');
-const tabsTab = require('../../../tabs-tab-BeUPTvaP.cjs');
+const tabsTab = require('../../../tabs-tab-DkeS2Iv0.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 function VolumeBars({

package/dist/domains/metrics/components/traces-volume-card-view.es.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { H as HorizontalBars } from '../../../horizontal-bars-D_1wypjd.js';
 import { M as MetricsCard } from '../../../metrics-card-BTBHMGM_.js';
 import { T as TabContent } from '../../../tabs-content--uzXt5ch.js';
-import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-CaZnZdY8.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-1KGOybMG.js';
 import { formatCompact, CHART_COLORS } from './metrics-utils.es.js';
 
 function VolumeBars({

package/dist/domains/traces/components/span-data-panel-view.cjs.js

@@ -11,7 +11,7 @@ const buttonsGroup = require('../../../buttons-group-C0fJastT.cjs');
 const dataKeysAndValues = require('../../../data-keys-and-values-B-K23j9Y.cjs');
 const dataPanel = require('../../../data-panel-D7TbjekV.cjs');
 const Notice = require('../../../Notice-h63wsfzJ.cjs');
-const tabsTab = require('../../../tabs-tab-BeUPTvaP.cjs');
+const tabsTab = require('../../../tabs-tab-DkeS2Iv0.cjs');
 const tabsContent = require('../../../tabs-content-ohtjaVdC.cjs');
 
 function buildDialogTitle(sectionTitle, icon, span) {

package/dist/domains/traces/components/span-data-panel-view.es.js

@@ -7,7 +7,7 @@ import { B as ButtonsGroup } from '../../../buttons-group-b6an6uao.js';
 import { D as DataKeysAndValues } from '../../../data-keys-and-values-Dly5DG8l.js';
 import { D as DataPanel } from '../../../data-panel-BxX4ohtd.js';
 import { N as Notice } from '../../../Notice-CiS1Dv3i.js';
-import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-CaZnZdY8.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-1KGOybMG.js';
 import { T as TabContent } from '../../../tabs-content--uzXt5ch.js';
 
 function buildDialogTitle(sectionTitle, icon, span) {

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

@@ -10,7 +10,7 @@ const dataList = require('../../../data-list-DDQRmA6L.cjs');
 const inputGroup = require('../../../input-group-CF6DB97L.cjs');
 const scatterPlotChart = require('../../../scatter-plot-chart-CFZO31md.cjs');
 const skeleton = require('../../../skeleton-D5zq7rhk.cjs');
-const tabsTab = require('../../../tabs-tab-BeUPTvaP.cjs');
+const tabsTab = require('../../../tabs-tab-DkeS2Iv0.cjs');
 const tabsContent = require('../../../tabs-content-ohtjaVdC.cjs');
 const utils_cn = require('../../../cn-vA5sWo9W.cjs');
 const ee_topics_components_topicsLayout = require('../../topics/components/topics-layout.cjs.js');

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

@@ -6,7 +6,7 @@ import { D as DataList } from '../../../data-list-D5uItcj6.js';
 import { I as InputGroup, a as InputGroupAddon, c as InputGroupInput } from '../../../input-group-DvVwUJwx.js';
 import { S as ScatterPlotChart } from '../../../scatter-plot-chart-B3hfFMKS.js';
 import { S as Skeleton } from '../../../skeleton-CUjhGPAx.js';
-import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-CaZnZdY8.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-1KGOybMG.js';
 import { T as TabContent } from '../../../tabs-content--uzXt5ch.js';
 import { c as cn } from '../../../cn-BakJzhuv.js';
 import { TopicsLayout } from '../../topics/components/topics-layout.es.js';

package/dist/hooks/use-isomorphic-layout-effect.cjs.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+function _interopNamespaceDefault(e) {
+	const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+	if (e) {
+		for (const k in e) {
+			if (k !== 'default') {
+				const d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: () => e[k]
+				});
+			}
+		}
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React__namespace.useEffect : React__namespace.useLayoutEffect;
+
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+//# sourceMappingURL=use-isomorphic-layout-effect.cjs.js.map

package/dist/hooks/use-isomorphic-layout-effect.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-isomorphic-layout-effect.cjs.js","sources":["../../src/hooks/use-isomorphic-layout-effect.ts"],"sourcesContent":["import * as React from 'react';\n\nexport const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAEO,MAAM,4BAA4B,OAAO,MAAA,KAAW,WAAA,GAAcA,gBAAA,CAAM,YAAYA,gBAAA,CAAM;;;;"}

package/dist/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/hooks/use-isomorphic-layout-effect'
+export {}

package/dist/hooks/use-isomorphic-layout-effect.es.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+
+export { useIsomorphicLayoutEffect };
+//# sourceMappingURL=use-isomorphic-layout-effect.es.js.map

package/dist/hooks/use-isomorphic-layout-effect.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-isomorphic-layout-effect.es.js","sources":["../../src/hooks/use-isomorphic-layout-effect.ts"],"sourcesContent":["import * as React from 'react';\n\nexport const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;\n"],"names":[],"mappings":";;AAEO,MAAM,4BAA4B,OAAO,MAAA,KAAW,WAAA,GAAc,KAAA,CAAM,YAAY,KAAA,CAAM;;;;"}

package/dist/hooks/use-measured-auto-height.cjs.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const hooks_useIsomorphicLayoutEffect = require('./use-isomorphic-layout-effect.cjs.js');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const getElementHeight = (element) => {
+  const rectHeight = element.getBoundingClientRect().height;
+  const measuredHeight = rectHeight > 0 ? rectHeight : element.scrollHeight;
+  return Math.ceil(measuredHeight);
+};
+function useMeasuredAutoHeight() {
+  const [element, setElement] = React__namespace.useState(null);
+  const [height, setHeight] = React__namespace.useState(null);
+  const frameRef = React__namespace.useRef(null);
+  const measure = React__namespace.useCallback(() => {
+    if (!element) return null;
+    const nextHeight = getElementHeight(element);
+    setHeight((currentHeight) => currentHeight === nextHeight ? currentHeight : nextHeight);
+    return nextHeight;
+  }, [element]);
+  hooks_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (!element) return void 0;
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const scheduleMeasure = () => {
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+      }
+      frameRef.current = window.requestAnimationFrame(() => {
+        frameRef.current = null;
+        measure();
+      });
+    };
+    const resizeObserver = new ResizeObserver(scheduleMeasure);
+    resizeObserver.observe(element);
+    return () => {
+      resizeObserver.disconnect();
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    };
+  }, [element, measure]);
+  const heightStyle = React__namespace.useMemo(() => height === null ? {} : { height }, [height]);
+  return {
+    ref: setElement,
+    height,
+    heightStyle,
+    measure
+  };
+}
+
+exports.useMeasuredAutoHeight = useMeasuredAutoHeight;
+//# sourceMappingURL=use-measured-auto-height.cjs.js.map

package/dist/hooks/use-measured-auto-height.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-measured-auto-height.cjs.js","sources":["../../src/hooks/use-measured-auto-height.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';\n\nconst getElementHeight = (element: HTMLElement): number => {\n  const rectHeight = element.getBoundingClientRect().height;\n  const measuredHeight = rectHeight > 0 ? rectHeight : element.scrollHeight;\n  return Math.ceil(measuredHeight);\n};\n\nexport interface UseMeasuredAutoHeightResult<TElement extends HTMLElement> {\n  ref: React.RefCallback<TElement>;\n  height: number | null;\n  heightStyle: React.CSSProperties;\n  measure: () => number | null;\n}\n\nexport function useMeasuredAutoHeight<\n  TElement extends HTMLElement = HTMLDivElement,\n>(): UseMeasuredAutoHeightResult<TElement> {\n  const [element, setElement] = React.useState<TElement | null>(null);\n  const [height, setHeight] = React.useState<number | null>(null);\n  const frameRef = React.useRef<number | null>(null);\n\n  const measure = React.useCallback(() => {\n    if (!element) return null;\n\n    const nextHeight = getElementHeight(element);\n    setHeight(currentHeight => (currentHeight === nextHeight ? currentHeight : nextHeight));\n    return nextHeight;\n  }, [element]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!element) return undefined;\n\n    measure();\n\n    if (typeof ResizeObserver === 'undefined') return undefined;\n\n    const scheduleMeasure = () => {\n      if (frameRef.current !== null) {\n        window.cancelAnimationFrame(frameRef.current);\n      }\n\n      frameRef.current = window.requestAnimationFrame(() => {\n        frameRef.current = null;\n        measure();\n      });\n    };\n\n    const resizeObserver = new ResizeObserver(scheduleMeasure);\n    resizeObserver.observe(element);\n\n    return () => {\n      resizeObserver.disconnect();\n\n      if (frameRef.current !== null) {\n        window.cancelAnimationFrame(frameRef.current);\n        frameRef.current = null;\n      }\n    };\n  }, [element, measure]);\n\n  const heightStyle = React.useMemo<React.CSSProperties>(() => (height === null ? {} : { height }), [height]);\n\n  return {\n    ref: setElement,\n    height,\n    heightStyle,\n    measure,\n  };\n}\n"],"names":["React","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,gBAAA,GAAmB,CAAC,OAAA,KAAiC;AACzD,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,qBAAA,EAAsB,CAAE,MAAA;AACnD,EAAA,MAAM,cAAA,GAAiB,UAAA,GAAa,CAAA,GAAI,UAAA,GAAa,OAAA,CAAQ,YAAA;AAC7D,EAAA,OAAO,IAAA,CAAK,KAAK,cAAc,CAAA;AACjC,CAAA;AASO,SAAS,qBAAA,GAE2B;AACzC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,gBAAA,CAAM,SAA0B,IAAI,CAAA;AAClE,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,gBAAA,CAAM,SAAwB,IAAI,CAAA;AAC9D,EAAA,MAAM,QAAA,GAAWA,gBAAA,CAAM,MAAA,CAAsB,IAAI,CAAA;AAEjD,EAAA,MAAM,OAAA,GAAUA,gBAAA,CAAM,WAAA,CAAY,MAAM;AACtC,IAAA,IAAI,CAAC,SAAS,OAAO,IAAA;AAErB,IAAA,MAAM,UAAA,GAAa,iBAAiB,OAAO,CAAA;AAC3C,IAAA,SAAA,CAAU,CAAA,aAAA,KAAkB,aAAA,KAAkB,UAAA,GAAa,aAAA,GAAgB,UAAW,CAAA;AACtF,IAAA,OAAO,UAAA;AAAA,EACT,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAAC,yDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,SAAS,OAAO,MAAA;AAErB,IAAA,OAAA,EAAQ;AAER,IAAA,IAAI,OAAO,cAAA,KAAmB,WAAA,EAAa,OAAO,MAAA;AAElD,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,IAAI,QAAA,CAAS,YAAY,IAAA,EAAM;AAC7B,QAAA,MAAA,CAAO,oBAAA,CAAqB,SAAS,OAAO,CAAA;AAAA,MAC9C;AAEA,MAAA,QAAA,CAAS,OAAA,GAAU,MAAA,CAAO,qBAAA,CAAsB,MAAM;AACpD,QAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AACnB,QAAA,OAAA,EAAQ;AAAA,MACV,CAAC,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,MAAM,cAAA,GAAiB,IAAI,cAAA,CAAe,eAAe,CAAA;AACzD,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAE9B,IAAA,OAAO,MAAM;AACX,MAAA,cAAA,CAAe,UAAA,EAAW;AAE1B,MAAA,IAAI,QAAA,CAAS,YAAY,IAAA,EAAM;AAC7B,QAAA,MAAA,CAAO,oBAAA,CAAqB,SAAS,OAAO,CAAA;AAC5C,QAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AAAA,MACrB;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,OAAO,CAAC,CAAA;AAErB,EAAA,MAAM,WAAA,GAAcD,gBAAA,CAAM,OAAA,CAA6B,MAAO,MAAA,KAAW,IAAA,GAAO,EAAC,GAAI,EAAE,MAAA,EAAO,EAAI,CAAC,MAAM,CAAC,CAAA;AAE1G,EAAA,OAAO;AAAA,IACL,GAAA,EAAK,UAAA;AAAA,IACL,MAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/hooks/use-measured-auto-height.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/hooks/use-measured-auto-height'
+export {}

package/dist/hooks/use-measured-auto-height.es.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.es.js';
+
+const getElementHeight = (element) => {
+  const rectHeight = element.getBoundingClientRect().height;
+  const measuredHeight = rectHeight > 0 ? rectHeight : element.scrollHeight;
+  return Math.ceil(measuredHeight);
+};
+function useMeasuredAutoHeight() {
+  const [element, setElement] = React.useState(null);
+  const [height, setHeight] = React.useState(null);
+  const frameRef = React.useRef(null);
+  const measure = React.useCallback(() => {
+    if (!element) return null;
+    const nextHeight = getElementHeight(element);
+    setHeight((currentHeight) => currentHeight === nextHeight ? currentHeight : nextHeight);
+    return nextHeight;
+  }, [element]);
+  useIsomorphicLayoutEffect(() => {
+    if (!element) return void 0;
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const scheduleMeasure = () => {
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+      }
+      frameRef.current = window.requestAnimationFrame(() => {
+        frameRef.current = null;
+        measure();
+      });
+    };
+    const resizeObserver = new ResizeObserver(scheduleMeasure);
+    resizeObserver.observe(element);
+    return () => {
+      resizeObserver.disconnect();
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    };
+  }, [element, measure]);
+  const heightStyle = React.useMemo(() => height === null ? {} : { height }, [height]);
+  return {
+    ref: setElement,
+    height,
+    heightStyle,
+    measure
+  };
+}
+
+export { useMeasuredAutoHeight };
+//# sourceMappingURL=use-measured-auto-height.es.js.map

package/dist/hooks/use-measured-auto-height.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-measured-auto-height.es.js","sources":["../../src/hooks/use-measured-auto-height.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';\n\nconst getElementHeight = (element: HTMLElement): number => {\n  const rectHeight = element.getBoundingClientRect().height;\n  const measuredHeight = rectHeight > 0 ? rectHeight : element.scrollHeight;\n  return Math.ceil(measuredHeight);\n};\n\nexport interface UseMeasuredAutoHeightResult<TElement extends HTMLElement> {\n  ref: React.RefCallback<TElement>;\n  height: number | null;\n  heightStyle: React.CSSProperties;\n  measure: () => number | null;\n}\n\nexport function useMeasuredAutoHeight<\n  TElement extends HTMLElement = HTMLDivElement,\n>(): UseMeasuredAutoHeightResult<TElement> {\n  const [element, setElement] = React.useState<TElement | null>(null);\n  const [height, setHeight] = React.useState<number | null>(null);\n  const frameRef = React.useRef<number | null>(null);\n\n  const measure = React.useCallback(() => {\n    if (!element) return null;\n\n    const nextHeight = getElementHeight(element);\n    setHeight(currentHeight => (currentHeight === nextHeight ? currentHeight : nextHeight));\n    return nextHeight;\n  }, [element]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!element) return undefined;\n\n    measure();\n\n    if (typeof ResizeObserver === 'undefined') return undefined;\n\n    const scheduleMeasure = () => {\n      if (frameRef.current !== null) {\n        window.cancelAnimationFrame(frameRef.current);\n      }\n\n      frameRef.current = window.requestAnimationFrame(() => {\n        frameRef.current = null;\n        measure();\n      });\n    };\n\n    const resizeObserver = new ResizeObserver(scheduleMeasure);\n    resizeObserver.observe(element);\n\n    return () => {\n      resizeObserver.disconnect();\n\n      if (frameRef.current !== null) {\n        window.cancelAnimationFrame(frameRef.current);\n        frameRef.current = null;\n      }\n    };\n  }, [element, measure]);\n\n  const heightStyle = React.useMemo<React.CSSProperties>(() => (height === null ? {} : { height }), [height]);\n\n  return {\n    ref: setElement,\n    height,\n    heightStyle,\n    measure,\n  };\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,gBAAA,GAAmB,CAAC,OAAA,KAAiC;AACzD,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,qBAAA,EAAsB,CAAE,MAAA;AACnD,EAAA,MAAM,cAAA,GAAiB,UAAA,GAAa,CAAA,GAAI,UAAA,GAAa,OAAA,CAAQ,YAAA;AAC7D,EAAA,OAAO,IAAA,CAAK,KAAK,cAAc,CAAA;AACjC,CAAA;AASO,SAAS,qBAAA,GAE2B;AACzC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,KAAA,CAAM,SAA0B,IAAI,CAAA;AAClE,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,KAAA,CAAM,SAAwB,IAAI,CAAA;AAC9D,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,MAAA,CAAsB,IAAI,CAAA;AAEjD,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,WAAA,CAAY,MAAM;AACtC,IAAA,IAAI,CAAC,SAAS,OAAO,IAAA;AAErB,IAAA,MAAM,UAAA,GAAa,iBAAiB,OAAO,CAAA;AAC3C,IAAA,SAAA,CAAU,CAAA,aAAA,KAAkB,aAAA,KAAkB,UAAA,GAAa,aAAA,GAAgB,UAAW,CAAA;AACtF,IAAA,OAAO,UAAA;AAAA,EACT,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,SAAS,OAAO,MAAA;AAErB,IAAA,OAAA,EAAQ;AAER,IAAA,IAAI,OAAO,cAAA,KAAmB,WAAA,EAAa,OAAO,MAAA;AAElD,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,IAAI,QAAA,CAAS,YAAY,IAAA,EAAM;AAC7B,QAAA,MAAA,CAAO,oBAAA,CAAqB,SAAS,OAAO,CAAA;AAAA,MAC9C;AAEA,MAAA,QAAA,CAAS,OAAA,GAAU,MAAA,CAAO,qBAAA,CAAsB,MAAM;AACpD,QAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AACnB,QAAA,OAAA,EAAQ;AAAA,MACV,CAAC,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,MAAM,cAAA,GAAiB,IAAI,cAAA,CAAe,eAAe,CAAA;AACzD,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAE9B,IAAA,OAAO,MAAM;AACX,MAAA,cAAA,CAAe,UAAA,EAAW;AAE1B,MAAA,IAAI,QAAA,CAAS,YAAY,IAAA,EAAM;AAC7B,QAAA,MAAA,CAAO,oBAAA,CAAqB,SAAS,OAAO,CAAA;AAC5C,QAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AAAA,MACrB;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,OAAO,CAAC,CAAA;AAErB,EAAA,MAAM,WAAA,GAAc,KAAA,CAAM,OAAA,CAA6B,MAAO,MAAA,KAAW,IAAA,GAAO,EAAC,GAAI,EAAE,MAAA,EAAO,EAAI,CAAC,MAAM,CAAC,CAAA;AAE1G,EAAA,OAAO;AAAA,IACL,GAAA,EAAK,UAAA;AAAA,IACL,MAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/message-scroller-hooks-CdsHnth6.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+const DEFAULT_SCROLLABLE = { start: false, end: false };
+const DEFAULT_VISIBILITY = { currentAnchorId: void 0, visibleMessageIds: [] };
+const DEFAULT_SCROLL_EDGE_THRESHOLD = 8;
+const DEFAULT_SCROLL_MARGIN = 0;
+const DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK = 64;
+const MessageScrollerActionsContext = React.createContext(null);
+const MessageScrollerScrollableContext = React.createContext(null);
+const MessageScrollerVisibilityContext = React.createContext(null);
+const useRequiredContext = (context, hookName) => {
+  const value = React.useContext(context);
+  if (!value) throw new Error(`${hookName} must be used within MessageScrollerProvider.`);
+  return value;
+};
+const useRequiredMessageScrollerActionsContext = (hookName) => useRequiredContext(MessageScrollerActionsContext, hookName);
+const useRequiredMessageScrollerScrollableContext = (hookName) => useRequiredContext(MessageScrollerScrollableContext, hookName);
+const useRequiredMessageScrollerVisibilityContext = (hookName) => useRequiredContext(MessageScrollerVisibilityContext, hookName);
+
+const useMessageScroller = () => {
+  const { scrollToEnd, scrollToMessage, scrollToStart } = useRequiredMessageScrollerActionsContext("useMessageScroller");
+  return React.useMemo(
+    () => ({ scrollToEnd, scrollToMessage, scrollToStart }),
+    [scrollToEnd, scrollToMessage, scrollToStart]
+  );
+};
+const useOptionalMessageScroller = () => {
+  const context = React.useContext(MessageScrollerActionsContext);
+  return React.useMemo(() => {
+    if (!context) return void 0;
+    return {
+      scrollToEnd: context.scrollToEnd,
+      scrollToMessage: context.scrollToMessage,
+      scrollToStart: context.scrollToStart
+    };
+  }, [context]);
+};
+const useMessageScrollerScrollable = () => {
+  const { start, end } = useRequiredMessageScrollerScrollableContext("useMessageScrollerScrollable");
+  return React.useMemo(() => ({ start, end }), [end, start]);
+};
+const useOptionalMessageScrollerScrollable = () => {
+  const context = React.useContext(MessageScrollerScrollableContext);
+  return React.useMemo(() => context ? { start: context.start, end: context.end } : void 0, [context]);
+};
+const useMessageScrollerVisibility = () => {
+  const { currentAnchorId, visibleMessageIds } = useRequiredMessageScrollerVisibilityContext("useMessageScrollerVisibility");
+  return React.useMemo(() => ({ currentAnchorId, visibleMessageIds }), [currentAnchorId, visibleMessageIds]);
+};
+const useOptionalMessageScrollerVisibility = () => {
+  const context = React.useContext(MessageScrollerVisibilityContext);
+  return React.useMemo(
+    () => context ? {
+      currentAnchorId: context.currentAnchorId,
+      visibleMessageIds: context.visibleMessageIds
+    } : void 0,
+    [context]
+  );
+};
+
+export { DEFAULT_SCROLLABLE as D, MessageScrollerActionsContext as M, useRequiredMessageScrollerScrollableContext as a, DEFAULT_VISIBILITY as b, DEFAULT_SCROLL_EDGE_THRESHOLD as c, DEFAULT_SCROLL_MARGIN as d, DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK as e, MessageScrollerScrollableContext as f, MessageScrollerVisibilityContext as g, useMessageScroller as h, useMessageScrollerScrollable as i, useMessageScrollerVisibility as j, useOptionalMessageScroller as k, useOptionalMessageScrollerScrollable as l, useOptionalMessageScrollerVisibility as m, useRequiredMessageScrollerActionsContext as u };
+//# sourceMappingURL=message-scroller-hooks-CdsHnth6.js.map