@mastra/playground-ui 60.2.0 → 61.0.0-alpha.1

package/dist/components/MetricsStackedBarChart.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const recharts = require('recharts');
-const metricsLineChartTooltip = require('../metrics-line-chart-tooltip-DiXCgpik.cjs');
+const metricsLineChartTooltip = require('../metrics-line-chart-tooltip-BoG8nbkO.cjs');
 const tokens = require('../tokens.cjs.js');
 
 const compactNumber = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });

package/dist/components/MetricsStackedBarChart.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, ReferenceLine } from 'recharts';
-import { M as MetricsLineChartLegend, a as MetricsLineChartTooltip } from '../metrics-line-chart-tooltip-mZXPH1yH.js';
+import { M as MetricsLineChartLegend, a as MetricsLineChartTooltip } from '../metrics-line-chart-tooltip-C3WAk3DN.js';
 import { CHART_LABEL_COLOR, CHART_TICK_FONT_SIZE } from '../tokens.es.js';
 
 const compactNumber = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });

package/dist/components/Notice.cjs.js

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

package/dist/components/Notice.es.js

@@ -1,2 +1,2 @@
-export { N as Notice } from '../Notice-B8RIClJD.js';
+export { N as Notice } from '../Notice-D4gMAkVI.js';
 //# sourceMappingURL=Notice.es.js.map

package/dist/components/PageHeader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const pageHeader = require('../page-header-C1WiOrTE.cjs');
+const pageHeader = require('../page-header-Dc2KSbnw.cjs');
 
 
 

package/dist/components/PageHeader.es.js

@@ -1,2 +1,2 @@
-export { P as PageHeader } from '../page-header-DIS8V2TK.js';
+export { P as PageHeader } from '../page-header-D5a7qrVc.js';
 //# sourceMappingURL=PageHeader.es.js.map

package/dist/components/PageLayout.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Header = require('../Header-y51Sfo3G.cjs');
+const Header = require('../Header-W3PBmXia.cjs');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function PageLayout({

package/dist/components/PageLayout.es.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { H as Header } from '../Header-hTHhO02b.js';
+import { H as Header } from '../Header-BXl3AZgO.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 
 function PageLayout({

package/dist/components/ProductBadge.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('../ProductBadge.css');const jsxRuntime = require('react/jsx-runtime');
-const Badge = require('../Badge-D3EctKQo.cjs');
+const Badge = require('../Badge-DB59RxT5.cjs');
 const productIdentity = require('../product-identity-CAQoXS5p.cjs');
 const ProductIcon = require('../ProductIcon-hkExeSRM.cjs');
 const utils_cn = require('../cn-DG0X1KEP.cjs');

package/dist/components/ProductBadge.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { B as Badge } from '../Badge-DmOqFpXW.js';
+import { B as Badge } from '../Badge-DId-8rYY.js';
 import { b as productNames } from '../product-identity-DwNTealD.js';
 import { P as ProductIcon } from '../ProductIcon-BtyRYlaH.js';
 import { c as cn } from '../cn-65Adrsfj.js';

package/dist/components/PropertyFilter.cjs.js

@@ -7,11 +7,11 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const Button = require('../Button-CXhSUBxN.cjs');
-const combobox = require('../combobox-RzEkcOuu.cjs');
-const field = require('../field-ip9xiOVa.cjs');
+const combobox = require('../combobox-DPpiBLWV.cjs');
+const field = require('../field-BkeKcz_6.cjs');
 require('../field-control-aria-WzMGs0A4.cjs');
 const popover = require('../popover-lBqKiPtp.cjs');
-const Txt = require('../Txt-DPmEpNbp.cjs');
+const Txt = require('../Txt-DNnvlrBo.cjs');
 const primitives_fluidMenu = require('../primitives/fluid-menu.cjs.js');
 const primitives_menuItem = require('../primitives/menu-item.cjs.js');
 const primitives_transitions = require('../primitives/transitions.cjs.js');

package/dist/components/PropertyFilter.es.js

@@ -4,11 +4,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { ListFilterPlusIcon, ArrowLeftIcon, FilterIcon, PlusIcon, X, ListFilterPlus, ChevronRightIcon } from 'lucide-react';
 import { useMemo, useState, useRef, useCallback, useEffect, forwardRef } from 'react';
 import { B as Button } from '../Button-D43ghVKt.js';
-import { C as Combobox } from '../combobox-DKFPbNMB.js';
-import { F as Field, c as FieldError } from '../field-BtvEQ68O.js';
+import { C as Combobox } from '../combobox-DoJgbq9N.js';
+import { F as Field, c as FieldError } from '../field-BiMIiq2Y.js';
 import '../field-control-aria-DB6y41tQ.js';
 import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../popover-Dg70UGyn.js';
-import { T as Txt } from '../Txt-BP1SRHmL.js';
+import { T as Txt } from '../Txt-C3cYJgKU.js';
 import { useFluidMenu, FluidMenuItems, useFluidMenuItemRef } from '../primitives/fluid-menu.es.js';
 import { MENU_SIDE_OFFSET, menuItemTrailingIconClass, menuEmptyClass, menuItemClass } from '../primitives/menu-item.es.js';
 import { controlStateColorTransition } from '../primitives/transitions.es.js';

package/dist/components/RelativeTimestamp.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const relativeTimestamp = require('../relative-timestamp-BlmN8Vjn.cjs');
+const relativeTimestamp = require('../relative-timestamp-Nnwtw7Rp.cjs');
 
 
 

package/dist/components/RelativeTimestamp.es.js

@@ -1,2 +1,2 @@
-export { R as RelativeTimestamp } from '../relative-timestamp-Cnp4VeLp.js';
+export { R as RelativeTimestamp } from '../relative-timestamp-Rn8mAobA.js';
 //# sourceMappingURL=RelativeTimestamp.es.js.map

package/dist/components/RuleBuilder.cjs.js

@@ -6,12 +6,12 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const utils_ruleEngine = require('../utils/rule-engine.cjs.js');
-const select = require('../select-DJQYAVcm.cjs');
+const select = require('../select-KV77JIvp.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 const input = require('../input-D0UPyj6A.cjs');
 const Button = require('../Button-CXhSUBxN.cjs');
-const Txt = require('../Txt-DPmEpNbp.cjs');
+const Txt = require('../Txt-DNnvlrBo.cjs');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
 const primitives_typography = require('../primitives/typography.cjs.js');
 

package/dist/components/RuleBuilder.es.js

@@ -2,12 +2,12 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Type, ToggleLeft, Hash, List, Braces, Ban, Check, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, ChevronRight, Text, TextSearch, EqualNot, Equal, X, Plus, Component } from 'lucide-react';
 import * as React from 'react';
 import { createDefaultRule, isRule, createDefaultRuleGroup } from '../utils/rule-engine.es.js';
-import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from '../select--ArpXYDc.js';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from '../select-CWxcmE3F.js';
 import { Icon } from '../icons/Icon.es.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 import { I as Input } from '../input-D5_B67_r.js';
 import { B as Button } from '../Button-D43ghVKt.js';
-import { T as Txt } from '../Txt-BP1SRHmL.js';
+import { T as Txt } from '../Txt-C3cYJgKU.js';
 import { controlStateColorTransition } from '../primitives/transitions.es.js';
 import { quietTextHover } from '../primitives/typography.es.js';
 

package/dist/components/ScatterPlotChart.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const recharts = require('recharts');
 const chartTooltip = require('../chart-tooltip-DX6vs_Tc.cjs');
-const Txt = require('../Txt-DPmEpNbp.cjs');
+const Txt = require('../Txt-DNnvlrBo.cjs');
 const tokens = require('../tokens.cjs.js');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 

package/dist/components/ScatterPlotChart.es.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ResponsiveContainer, ScatterChart, CartesianGrid, XAxis, YAxis, ZAxis, Tooltip, Scatter } from 'recharts';
 import { C as ChartTooltip } from '../chart-tooltip-84fl_3Wc.js';
-import { T as Txt } from '../Txt-BP1SRHmL.js';
+import { T as Txt } from '../Txt-C3cYJgKU.js';
 import { Colors, CHART_LABEL_COLOR, CHART_TICK_FONT_SIZE } from '../tokens.es.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 

package/dist/components/SearchInput.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const searchInput = require('../search-input-T0orZ7Jf.cjs');
+const searchInput = require('../search-input-CBhT3N4z.cjs');
 
 
 

package/dist/components/SearchInput.es.js

@@ -1,2 +1,2 @@
-export { S as SearchInput } from '../search-input-BKXiYeed.js';
+export { S as SearchInput } from '../search-input-63Y1_wgA.js';
 //# sourceMappingURL=SearchInput.es.js.map

package/dist/components/Section.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const section = require('../section-Byml9qxH.cjs');
+const section = require('../section-C5r-Mtxk.cjs');
 
 
 

package/dist/components/Section.es.js

@@ -1,2 +1,2 @@
-export { S as Section, a as SectionRoot, b as SubSectionRoot } from '../section-DTooysg2.js';
+export { S as Section, a as SectionRoot, b as SubSectionRoot } from '../section-DYrbH35K.js';
 //# sourceMappingURL=Section.es.js.map

package/dist/components/SectionCard.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Txt = require('../Txt-DPmEpNbp.cjs');
+const Txt = require('../Txt-DNnvlrBo.cjs');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function CardHeading({

package/dist/components/SectionCard.es.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { T as Txt } from '../Txt-BP1SRHmL.js';
+import { T as Txt } from '../Txt-C3cYJgKU.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 
 function CardHeading({

package/dist/components/Select.cjs.js

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

package/dist/components/Select.es.js

@@ -1,2 +1,2 @@
-export { S as Select, a as SelectContent, b as SelectGroup, c as SelectItem, d as SelectTrigger, e as SelectValue } from '../select--ArpXYDc.js';
+export { S as Select, a as SelectContent, b as SelectGroup, c as SelectItem, d as SelectTrigger, e as SelectValue } from '../select-CWxcmE3F.js';
 //# sourceMappingURL=Select.es.js.map

package/dist/components/SideDialog.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const sideDialog = require('../side-dialog-lQUx6B_M.cjs');
+const sideDialog = require('../side-dialog-CFTgnDXu.cjs');
 
 
 

package/dist/components/SideDialog.es.js

@@ -1,2 +1,2 @@
-export { S as SideDialog } from '../side-dialog-DZJc85m3.js';
+export { S as SideDialog } from '../side-dialog-yvAvCday.js';
 //# sourceMappingURL=SideDialog.es.js.map

package/dist/components/StatusIndicators.cjs.js

@@ -7,7 +7,7 @@ const utils_cn = require('../cn-DG0X1KEP.cjs');
 const React = require('react');
 const popover = require('../popover-lBqKiPtp.cjs');
 const tooltip = require('../tooltip-DIZ5oqjV.cjs');
-const Txt = require('../Txt-DPmEpNbp.cjs');
+const Txt = require('../Txt-DNnvlrBo.cjs');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
 
 const deployStates = {

package/dist/components/StatusIndicators.es.js

@@ -3,7 +3,7 @@ import { c as cn } from '../cn-65Adrsfj.js';
 import { useState, useRef, useEffect } from 'react';
 import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../popover-Dg70UGyn.js';
 import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-DsQPiynb.js';
-import { T as Txt } from '../Txt-BP1SRHmL.js';
+import { T as Txt } from '../Txt-C3cYJgKU.js';
 import { focusRing } from '../primitives/transitions.es.js';
 
 const deployStates = {

package/dist/components/Steps.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const spinner = require('../spinner-BCpN7LL9.cjs');
-const Txt = require('../Txt-DPmEpNbp.cjs');
+const Txt = require('../Txt-DNnvlrBo.cjs');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 

package/dist/components/Steps.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { XIcon, CheckIcon } from 'lucide-react';
 import { S as Spinner } from '../spinner-ylbE0TJA.js';
-import { T as Txt } from '../Txt-BP1SRHmL.js';
+import { T as Txt } from '../Txt-C3cYJgKU.js';
 import { transitions } from '../primitives/transitions.es.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 

package/dist/components/Table.cjs.js

@@ -7,7 +7,7 @@ const React = require('react');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
-const Txt = require('../Txt-DPmEpNbp.cjs');
+const Txt = require('../Txt-DNnvlrBo.cjs');
 const utils_dateFormat = require('../utils/date-format.cjs.js');
 
 const rowSize = {

package/dist/components/Table.es.js

@@ -3,7 +3,7 @@ import { forwardRef, useRef, useEffect, useState, useCallback } from 'react';
 import { focusRingInset } from '../primitives/transitions.es.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 import { Icon } from '../icons/Icon.es.js';
-import { T as Txt } from '../Txt-BP1SRHmL.js';
+import { T as Txt } from '../Txt-C3cYJgKU.js';
 import { formatDate } from '../utils/date-format.es.js';
 
 const rowSize = {

package/dist/components/Tabs.cjs.js

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const tabsRoot = require('../tabs-root-C-ePF1y9.cjs');
-const tabsTab = require('../tabs-tab-BmIBFifi.cjs');
-const tabsContent = require('../tabs-content-DnscxcLI.cjs');
+const tabsRoot = require('../tabs-root-Hkt7A6oq.cjs');
+const tabsList = require('../tabs-list-Tqj36HIL.cjs');
+const tabsTab = require('../tabs-tab-C-C2vX-D.cjs');
+const tabsContent = require('../tabs-content-DfH1hhpU.cjs');
 
 
 
-exports.TabList = tabsRoot.TabList;
 exports.Tabs = tabsRoot.Tabs;
+exports.TabList = tabsList.TabList;
 exports.Tab = tabsTab.Tab;
 exports.TabContent = tabsContent.TabContent;
 //# sourceMappingURL=Tabs.cjs.js.map

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

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

package/dist/components/Tabs.es.js

@@ -1,4 +1,5 @@
-export { T as TabList, a as Tabs } from '../tabs-root-lrZZ3KwH.js';
-export { T as Tab } from '../tabs-tab-DoPSW-1s.js';
-export { T as TabContent } from '../tabs-content-CwbkTutf.js';
+export { T as Tabs } from '../tabs-root-BbzhUZl4.js';
+export { T as TabList } from '../tabs-list-tLx5fgP0.js';
+export { T as Tab } from '../tabs-tab-ClLIOGiC.js';
+export { T as TabContent } from '../tabs-content-OWF8un_n.js';
 //# sourceMappingURL=Tabs.es.js.map

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

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

package/dist/components/Text.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const textAndIcon = require('../text-and-icon-4eVhfmbb.cjs');
+const textAndIcon = require('../text-and-icon-CvakH4YL.cjs');
 const utils_id = require('../utils/id.cjs.js');
 
 

package/dist/components/Text.es.js

@@ -1,3 +1,3 @@
-export { T as TextAndIcon } from '../text-and-icon-CuBm-Wjm.js';
+export { T as TextAndIcon } from '../text-and-icon-Bo6NLLBl.js';
 export { getShortId } from '../utils/id.es.js';
 //# sourceMappingURL=Text.es.js.map

package/dist/components/ThinkingLevel.cjs.js

@@ -0,0 +1,230 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const primitives_transitions = require('../primitives/transitions.cjs.js');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
+const Txt = require('../Txt-DNnvlrBo.cjs');
+const popover = require('../popover-lBqKiPtp.cjs');
+const tooltip = require('../tooltip-DIZ5oqjV.cjs');
+
+const invisibleRangeInputClassName = utils_cn.cn(
+  "cursor-pointer appearance-none bg-transparent",
+  primitives_transitions.focusRing,
+  "[&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:bg-transparent",
+  "[&::-webkit-slider-thumb]:h-full [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none",
+  "[&::-webkit-slider-thumb]:bg-transparent",
+  "[&::-moz-range-thumb]:h-full [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:border-0",
+  "[&::-moz-range-thumb]:bg-transparent"
+);
+function useThinkingLevelStop({
+  options,
+  value,
+  onChange
+}) {
+  const [draggedStop, setDraggedStop] = React.useState();
+  const [heldRelease, setHeldRelease] = React.useState();
+  const settledStop = Math.max(
+    options.findIndex((option) => option.value === value),
+    0
+  );
+  const pendingStop = draggedStop ?? heldRelease?.stop;
+  const shownStop = pendingStop ?? settledStop;
+  const commit = async () => {
+    const stop = draggedStop;
+    setDraggedStop(void 0);
+    if (stop === void 0 || stop === settledStop) return;
+    const option = options[stop];
+    if (!option) return;
+    const release = { stop };
+    setHeldRelease(release);
+    try {
+      await onChange(option.value);
+    } finally {
+      setHeldRelease((current) => current === release ? void 0 : current);
+    }
+  };
+  const commitOnRelease = () => void commit();
+  return {
+    shownStop,
+    shownOption: options[shownStop],
+    isPending: pendingStop !== void 0,
+    rangeInputProps: {
+      type: "range",
+      min: 0,
+      max: Math.max(options.length - 1, 0),
+      step: 1,
+      value: shownStop,
+      onChange: (event) => setDraggedStop(Number(event.target.value)),
+      onPointerUp: commitOnRelease,
+      onPointerCancel: commitOnRelease,
+      onKeyUp: commitOnRelease,
+      onBlur: commitOnRelease
+    }
+  };
+}
+
+const EMPHASIS_TONE = {
+  muted: "text-placeholder",
+  warning: "text-warning-foreground"
+};
+function ThinkingLevelSlider({
+  options,
+  value,
+  ariaLabel,
+  disabled,
+  valueTextSuffix,
+  onChange,
+  className
+}) {
+  const { shownStop, shownOption, isPending, rangeInputProps } = useThinkingLevelStop({ options, value, onChange });
+  const lastStop = Math.max(options.length - 1, 1);
+  const tone = shownOption?.emphasis ? EMPHASIS_TONE[shownOption.emphasis] : "text-foreground";
+  const valueText = `${shownOption?.label ?? ""}${isPending ? "" : valueTextSuffix ?? ""}`;
+  const travelled = `calc(0.5rem + (100% - 1rem) * ${shownStop / lastStop})`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex items-center gap-2", tone, disabled && "pointer-events-none opacity-50", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", className: "w-20 shrink-0 text-right", children: shownOption?.label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-7 w-36 items-center rounded-lg bg-fill", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute inset-y-0 left-0 rounded-lg bg-fill-strong",
+          style: { width: `calc(${travelled} + 6px)` }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-[6.5px] flex justify-between", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[3px] rounded-full bg-current/40" }, option.value)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute h-4 w-[3px] -translate-x-1/2 rounded-full bg-current",
+          style: { left: travelled }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ...rangeInputProps,
+          "aria-label": ariaLabel,
+          "aria-valuetext": valueText,
+          disabled,
+          className: utils_cn.cn("relative h-7 w-full rounded-lg", invisibleRangeInputClassName)
+        }
+      )
+    ] })
+  ] });
+}
+
+function filledBarColor(option) {
+  return option.emphasis === "warning" ? "bg-warning-foreground" : "bg-foreground";
+}
+function ThinkingLevelRamp({ options, value, label, onChange }) {
+  const { shownStop, shownOption, rangeInputProps } = useThinkingLevelStop({ options, value, onChange });
+  const lastStop = Math.max(options.length - 1, 1);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "label", tone: "ink", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", children: shownOption?.label })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-10 items-end gap-1", children: [
+        options.map((option, stop) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: utils_cn.cn(
+              "flex-1 rounded-sm transition-colors",
+              stop <= shownStop ? filledBarColor(option) : "bg-fill"
+            ),
+            style: { height: `${20 + 80 * stop / lastStop}%` }
+          },
+          option.value
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...rangeInputProps,
+            "aria-label": label,
+            "aria-valuetext": shownOption?.label,
+            className: utils_cn.cn("absolute inset-0 size-full rounded-sm", invisibleRangeInputClassName)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between", children: options.map((option, stop) => /* @__PURE__ */ jsxRuntime.jsx(
+        Txt.Txt,
+        {
+          as: "span",
+          variant: "meta",
+          tone: stop === shownStop ? "ink" : "faint",
+          className: "flex-1 text-center",
+          children: option.label
+        },
+        option.value
+      )) })
+    ] })
+  ] });
+}
+
+function ThinkingLevelBars({ options, value }) {
+  const thinkingOptions = options.filter((option) => option.emphasis !== "muted");
+  const filled = thinkingOptions.findIndex((option) => option.value === value) + 1;
+  const barCount = Math.max(thinkingOptions.length, 1);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "flex h-3 items-end gap-0.5", children: Array.from({ length: barCount }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils_cn.cn("w-[3px] rounded-xs", index < filled ? "bg-current" : "bg-current/25"),
+      style: { height: `${40 + 60 * index / Math.max(barCount - 1, 1)}%` }
+    },
+    index
+  )) });
+}
+function ThinkingLevelPicker({
+  options,
+  value,
+  label,
+  unavailableReason,
+  description,
+  onChange
+}) {
+  if (unavailableReason) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        tooltip.TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              role: "button",
+              tabIndex: 0,
+              "aria-disabled": "true",
+              "aria-label": `${label}: unavailable. ${unavailableReason}`,
+              className: utils_cn.cn(
+                "inline-flex h-control-sm shrink-0 cursor-not-allowed items-center rounded-full border border-transparent px-2.5 text-placeholder",
+                primitives_transitions.focusRing
+              )
+            }
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(ThinkingLevelBars, { options, value: void 0 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { side: "top", className: "max-w-64", children: unavailableReason })
+    ] });
+  }
+  const triggerLabel = `${label}: ${options.find((option) => option.value === value)?.label ?? value}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { variant: "ghost", size: "sm", "aria-label": triggerLabel, tooltip: triggerLabel, className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(ThinkingLevelBars, { options, value }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(popover.PopoverContent, { align: "end", className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ThinkingLevelRamp, { options, value, label, onChange }),
+      description ? /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "caption", tone: "muted", children: description }) : null
+    ] })
+  ] });
+}
+
+exports.ThinkingLevelBars = ThinkingLevelBars;
+exports.ThinkingLevelPicker = ThinkingLevelPicker;
+exports.ThinkingLevelRamp = ThinkingLevelRamp;
+exports.ThinkingLevelSlider = ThinkingLevelSlider;
+//# sourceMappingURL=ThinkingLevel.cjs.js.map