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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThinkingLevel.cjs.js","sources":["../../src/ds/components/ThinkingLevel/use-thinking-level-stop.ts","../../src/ds/components/ThinkingLevel/thinking-level-slider.tsx","../../src/ds/components/ThinkingLevel/thinking-level-ramp.tsx","../../src/ds/components/ThinkingLevel/thinking-level-picker.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThinkingLevelOption<T extends string = string> {\n  value: T;\n  label: string;\n  /** `muted` means no thinking at all; `warning` marks a level whose cost climbs. */\n  emphasis?: 'muted' | 'warning';\n}\n\nexport const invisibleRangeInputClassName = cn(\n  'cursor-pointer appearance-none bg-transparent',\n  focusRing,\n  '[&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:bg-transparent',\n  '[&::-webkit-slider-thumb]:h-full [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none',\n  '[&::-webkit-slider-thumb]:bg-transparent',\n  '[&::-moz-range-thumb]:h-full [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:border-0',\n  '[&::-moz-range-thumb]:bg-transparent',\n);\n\nexport function useThinkingLevelStop<T extends string>({\n  options,\n  value,\n  onChange,\n}: {\n  options: readonly ThinkingLevelOption<T>[];\n  value: T;\n  onChange: (value: T) => void | Promise<unknown>;\n}) {\n  const [draggedStop, setDraggedStop] = useState<number>();\n  const [heldRelease, setHeldRelease] = useState<{ stop: number }>();\n\n  const settledStop = Math.max(\n    options.findIndex(option => option.value === value),\n    0,\n  );\n  const pendingStop = draggedStop ?? heldRelease?.stop;\n  const shownStop = pendingStop ?? settledStop;\n\n  // Holding the drop until the write settles: clearing it first shows the old\n  // stop for a frame, then the new one — two jumps for one change.\n  const commit = async () => {\n    const stop = draggedStop;\n    setDraggedStop(undefined);\n    if (stop === undefined || stop === settledStop) return;\n    const option = options[stop];\n    if (!option) return;\n    const release = { stop };\n    setHeldRelease(release);\n    try {\n      await onChange(option.value);\n    } finally {\n      setHeldRelease(current => (current === release ? undefined : current));\n    }\n  };\n\n  const commitOnRelease = () => void commit();\n\n  return {\n    shownStop,\n    shownOption: options[shownStop],\n    isPending: pendingStop !== undefined,\n    rangeInputProps: {\n      type: 'range',\n      min: 0,\n      max: Math.max(options.length - 1, 0),\n      step: 1,\n      value: shownStop,\n      onChange: (event: ChangeEvent<HTMLInputElement>) => setDraggedStop(Number(event.target.value)),\n      onPointerUp: commitOnRelease,\n      onPointerCancel: commitOnRelease,\n      onKeyUp: commitOnRelease,\n      onBlur: commitOnRelease,\n    },\n  };\n}\n","import { useThinkingLevelStop, invisibleRangeInputClassName } from './use-thinking-level-stop';\nimport type { ThinkingLevelOption } from './use-thinking-level-stop';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface ThinkingLevelSliderProps<T extends string> {\n  options: readonly ThinkingLevelOption<T>[];\n  value: T;\n  ariaLabel: string;\n  disabled?: boolean;\n  /** Appended to the announced value, e.g. ` · follows base` when the level is inherited. */\n  valueTextSuffix?: string;\n  /** Returning the write lets the thumb hold the dropped stop until it lands. */\n  onChange: (value: T) => void | Promise<unknown>;\n  className?: string;\n}\n\nconst EMPHASIS_TONE = {\n  muted: 'text-placeholder',\n  warning: 'text-warning-foreground',\n} as const;\n\nexport function ThinkingLevelSlider<T extends string>({\n  options,\n  value,\n  ariaLabel,\n  disabled,\n  valueTextSuffix,\n  onChange,\n  className,\n}: ThinkingLevelSliderProps<T>) {\n  const { shownStop, shownOption, isPending, rangeInputProps } = useThinkingLevelStop({ options, value, onChange });\n  const lastStop = Math.max(options.length - 1, 1);\n  const tone = shownOption?.emphasis ? EMPHASIS_TONE[shownOption.emphasis] : 'text-foreground';\n  const valueText = `${shownOption?.label ?? ''}${isPending ? '' : (valueTextSuffix ?? '')}`;\n  const travelled = `calc(0.5rem + (100% - 1rem) * ${shownStop / lastStop})`;\n\n  return (\n    <div className={cn('flex items-center gap-2', tone, disabled && 'pointer-events-none opacity-50', className)}>\n      <Txt as=\"span\" variant=\"caption\" className=\"w-20 shrink-0 text-right\">\n        {shownOption?.label}\n      </Txt>\n\n      <span className=\"relative flex h-7 w-36 items-center rounded-lg bg-fill\">\n        <span\n          aria-hidden\n          className=\"absolute inset-y-0 left-0 rounded-lg bg-fill-strong\"\n          style={{ width: `calc(${travelled} + 6px)` }}\n        />\n        <span aria-hidden className=\"pointer-events-none absolute inset-x-[6.5px] flex justify-between\">\n          {options.map(option => (\n            <span key={option.value} className=\"size-[3px] rounded-full bg-current/40\" />\n          ))}\n        </span>\n        <span\n          aria-hidden\n          className=\"absolute h-4 w-[3px] -translate-x-1/2 rounded-full bg-current\"\n          style={{ left: travelled }}\n        />\n        <input\n          {...rangeInputProps}\n          aria-label={ariaLabel}\n          aria-valuetext={valueText}\n          disabled={disabled}\n          className={cn('relative h-7 w-full rounded-lg', invisibleRangeInputClassName)}\n        />\n      </span>\n    </div>\n  );\n}\n","import { useThinkingLevelStop, invisibleRangeInputClassName } from './use-thinking-level-stop';\nimport type { ThinkingLevelOption } from './use-thinking-level-stop';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface ThinkingLevelRampProps<T extends string> {\n  options: readonly ThinkingLevelOption<T>[];\n  value: T;\n  label: string;\n  /** Returning the write lets the ramp hold the dropped stop until it lands. */\n  onChange: (value: T) => void | Promise<unknown>;\n}\n\nfunction filledBarColor(option: ThinkingLevelOption) {\n  return option.emphasis === 'warning' ? 'bg-warning-foreground' : 'bg-foreground';\n}\n\nexport function ThinkingLevelRamp<T extends string>({ options, value, label, onChange }: ThinkingLevelRampProps<T>) {\n  const { shownStop, shownOption, rangeInputProps } = useThinkingLevelStop({ options, value, onChange });\n  const lastStop = Math.max(options.length - 1, 1);\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-baseline justify-between gap-2\">\n        <Txt as=\"p\" variant=\"label\" tone=\"ink\">\n          {label}\n        </Txt>\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n          {shownOption?.label}\n        </Txt>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"relative flex h-10 items-end gap-1\">\n          {options.map((option, stop) => (\n            <span\n              key={option.value}\n              aria-hidden\n              className={cn(\n                'flex-1 rounded-sm transition-colors',\n                stop <= shownStop ? filledBarColor(option) : 'bg-fill',\n              )}\n              style={{ height: `${20 + (80 * stop) / lastStop}%` }}\n            />\n          ))}\n          <input\n            {...rangeInputProps}\n            aria-label={label}\n            aria-valuetext={shownOption?.label}\n            className={cn('absolute inset-0 size-full rounded-sm', invisibleRangeInputClassName)}\n          />\n        </div>\n        <div className=\"flex justify-between\">\n          {options.map((option, stop) => (\n            <Txt\n              key={option.value}\n              as=\"span\"\n              variant=\"meta\"\n              tone={stop === shownStop ? 'ink' : 'faint'}\n              className=\"flex-1 text-center\"\n            >\n              {option.label}\n            </Txt>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { ThinkingLevelRamp } from './thinking-level-ramp';\nimport type { ThinkingLevelOption } from './use-thinking-level-stop';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThinkingLevelBarsProps<T extends string> {\n  options: readonly ThinkingLevelOption<T>[];\n  value: T | undefined;\n}\n\nexport function ThinkingLevelBars<T extends string>({ options, value }: ThinkingLevelBarsProps<T>) {\n  const thinkingOptions = options.filter(option => option.emphasis !== 'muted');\n  const filled = thinkingOptions.findIndex(option => option.value === value) + 1;\n  const barCount = Math.max(thinkingOptions.length, 1);\n  return (\n    <span aria-hidden className=\"flex h-3 items-end gap-0.5\">\n      {Array.from({ length: barCount }, (_, index) => (\n        <span\n          key={index}\n          className={cn('w-[3px] rounded-xs', index < filled ? 'bg-current' : 'bg-current/25')}\n          style={{ height: `${40 + (60 * index) / Math.max(barCount - 1, 1)}%` }}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport interface ThinkingLevelPickerProps<T extends string> {\n  options: readonly ThinkingLevelOption<T>[];\n  value: T;\n  label: string;\n  /** Disables the trigger and explains why in its tooltip, e.g. when the model cannot think. */\n  unavailableReason?: string;\n  description?: ReactNode;\n  onChange: (value: T) => void | Promise<unknown>;\n}\n\nexport function ThinkingLevelPicker<T extends string>({\n  options,\n  value,\n  label,\n  unavailableReason,\n  description,\n  onChange,\n}: ThinkingLevelPickerProps<T>) {\n  if (unavailableReason) {\n    return (\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <span\n              role=\"button\"\n              tabIndex={0}\n              aria-disabled=\"true\"\n              aria-label={`${label}: unavailable. ${unavailableReason}`}\n              className={cn(\n                'inline-flex h-control-sm shrink-0 cursor-not-allowed items-center rounded-full border border-transparent px-2.5 text-placeholder',\n                focusRing,\n              )}\n            />\n          }\n        >\n          <ThinkingLevelBars options={options} value={undefined} />\n        </TooltipTrigger>\n        <TooltipContent side=\"top\" className=\"max-w-64\">\n          {unavailableReason}\n        </TooltipContent>\n      </Tooltip>\n    );\n  }\n\n  const triggerLabel = `${label}: ${options.find(option => option.value === value)?.label ?? value}`;\n\n  return (\n    <Popover>\n      <PopoverTrigger variant=\"ghost\" size=\"sm\" aria-label={triggerLabel} tooltip={triggerLabel} className=\"shrink-0\">\n        <ThinkingLevelBars options={options} value={value} />\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"flex flex-col gap-3\">\n        <ThinkingLevelRamp options={options} value={value} label={label} onChange={onChange} />\n        {description ? (\n          <Txt as=\"p\" variant=\"caption\" tone=\"muted\">\n            {description}\n          </Txt>\n        ) : null}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"names":["cn","focusRing","useState","jsxs","jsx","Txt","Tooltip","TooltipTrigger","TooltipContent","Popover","PopoverTrigger","PopoverContent"],"mappings":"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"}

package/dist/components/ThinkingLevel.d.ts

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

package/dist/components/ThinkingLevel.es.js

@@ -0,0 +1,223 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { focusRing } from '../primitives/transitions.es.js';
+import { c as cn } from '../cn-65Adrsfj.js';
+import { T as Txt } from '../Txt-C3cYJgKU.js';
+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';
+
+const invisibleRangeInputClassName = cn(
+  "cursor-pointer appearance-none bg-transparent",
+  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] = useState();
+  const [heldRelease, setHeldRelease] = 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__ */ jsxs("div", { className: cn("flex items-center gap-2", tone, disabled && "pointer-events-none opacity-50", className), children: [
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", className: "w-20 shrink-0 text-right", children: shownOption?.label }),
+    /* @__PURE__ */ jsxs("span", { className: "relative flex h-7 w-36 items-center rounded-lg bg-fill", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute inset-y-0 left-0 rounded-lg bg-fill-strong",
+          style: { width: `calc(${travelled} + 6px)` }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-[6.5px] flex justify-between", children: options.map((option) => /* @__PURE__ */ jsx("span", { className: "size-[3px] rounded-full bg-current/40" }, option.value)) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute h-4 w-[3px] -translate-x-1/2 rounded-full bg-current",
+          style: { left: travelled }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rangeInputProps,
+          "aria-label": ariaLabel,
+          "aria-valuetext": valueText,
+          disabled,
+          className: 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__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx(Txt, { as: "p", variant: "label", tone: "ink", children: label }),
+      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", tone: "muted", children: shownOption?.label })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex h-10 items-end gap-1", children: [
+        options.map((option, stop) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "flex-1 rounded-sm transition-colors",
+              stop <= shownStop ? filledBarColor(option) : "bg-fill"
+            ),
+            style: { height: `${20 + 80 * stop / lastStop}%` }
+          },
+          option.value
+        )),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...rangeInputProps,
+            "aria-label": label,
+            "aria-valuetext": shownOption?.label,
+            className: cn("absolute inset-0 size-full rounded-sm", invisibleRangeInputClassName)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-between", children: options.map((option, stop) => /* @__PURE__ */ jsx(
+        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__ */ jsx("span", { "aria-hidden": true, className: "flex h-3 items-end gap-0.5", children: Array.from({ length: barCount }, (_, index) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: 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__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "button",
+              tabIndex: 0,
+              "aria-disabled": "true",
+              "aria-label": `${label}: unavailable. ${unavailableReason}`,
+              className: cn(
+                "inline-flex h-control-sm shrink-0 cursor-not-allowed items-center rounded-full border border-transparent px-2.5 text-placeholder",
+                focusRing
+              )
+            }
+          ),
+          children: /* @__PURE__ */ jsx(ThinkingLevelBars, { options, value: void 0 })
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "max-w-64", children: unavailableReason })
+    ] });
+  }
+  const triggerLabel = `${label}: ${options.find((option) => option.value === value)?.label ?? value}`;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { variant: "ghost", size: "sm", "aria-label": triggerLabel, tooltip: triggerLabel, className: "shrink-0", children: /* @__PURE__ */ jsx(ThinkingLevelBars, { options, value }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(ThinkingLevelRamp, { options, value, label, onChange }),
+      description ? /* @__PURE__ */ jsx(Txt, { as: "p", variant: "caption", tone: "muted", children: description }) : null
+    ] })
+  ] });
+}
+
+export { ThinkingLevelBars, ThinkingLevelPicker, ThinkingLevelRamp, ThinkingLevelSlider };
+//# sourceMappingURL=ThinkingLevel.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThinkingLevel.es.js","sources":["../../src/ds/components/ThinkingLevel/use-thinking-level-stop.ts","../../src/ds/components/ThinkingLevel/thinking-level-slider.tsx","../../src/ds/components/ThinkingLevel/thinking-level-ramp.tsx","../../src/ds/components/ThinkingLevel/thinking-level-picker.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThinkingLevelOption<T extends string = string> {\n  value: T;\n  label: string;\n  /** `muted` means no thinking at all; `warning` marks a level whose cost climbs. */\n  emphasis?: 'muted' | 'warning';\n}\n\nexport const invisibleRangeInputClassName = cn(\n  'cursor-pointer appearance-none bg-transparent',\n  focusRing,\n  '[&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:bg-transparent',\n  '[&::-webkit-slider-thumb]:h-full [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none',\n  '[&::-webkit-slider-thumb]:bg-transparent',\n  '[&::-moz-range-thumb]:h-full [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:border-0',\n  '[&::-moz-range-thumb]:bg-transparent',\n);\n\nexport function useThinkingLevelStop<T extends string>({\n  options,\n  value,\n  onChange,\n}: {\n  options: readonly ThinkingLevelOption<T>[];\n  value: T;\n  onChange: (value: T) => void | Promise<unknown>;\n}) {\n  const [draggedStop, setDraggedStop] = useState<number>();\n  const [heldRelease, setHeldRelease] = useState<{ stop: number }>();\n\n  const settledStop = Math.max(\n    options.findIndex(option => option.value === value),\n    0,\n  );\n  const pendingStop = draggedStop ?? heldRelease?.stop;\n  const shownStop = pendingStop ?? settledStop;\n\n  // Holding the drop until the write settles: clearing it first shows the old\n  // stop for a frame, then the new one — two jumps for one change.\n  const commit = async () => {\n    const stop = draggedStop;\n    setDraggedStop(undefined);\n    if (stop === undefined || stop === settledStop) return;\n    const option = options[stop];\n    if (!option) return;\n    const release = { stop };\n    setHeldRelease(release);\n    try {\n      await onChange(option.value);\n    } finally {\n      setHeldRelease(current => (current === release ? undefined : current));\n    }\n  };\n\n  const commitOnRelease = () => void commit();\n\n  return {\n    shownStop,\n    shownOption: options[shownStop],\n    isPending: pendingStop !== undefined,\n    rangeInputProps: {\n      type: 'range',\n      min: 0,\n      max: Math.max(options.length - 1, 0),\n      step: 1,\n      value: shownStop,\n      onChange: (event: ChangeEvent<HTMLInputElement>) => setDraggedStop(Number(event.target.value)),\n      onPointerUp: commitOnRelease,\n      onPointerCancel: commitOnRelease,\n      onKeyUp: commitOnRelease,\n      onBlur: commitOnRelease,\n    },\n  };\n}\n","import { useThinkingLevelStop, invisibleRangeInputClassName } from './use-thinking-level-stop';\nimport type { ThinkingLevelOption } from './use-thinking-level-stop';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface ThinkingLevelSliderProps<T extends string> {\n  options: readonly ThinkingLevelOption<T>[];\n  value: T;\n  ariaLabel: string;\n  disabled?: boolean;\n  /** Appended to the announced value, e.g. ` · follows base` when the level is inherited. */\n  valueTextSuffix?: string;\n  /** Returning the write lets the thumb hold the dropped stop until it lands. */\n  onChange: (value: T) => void | Promise<unknown>;\n  className?: string;\n}\n\nconst EMPHASIS_TONE = {\n  muted: 'text-placeholder',\n  warning: 'text-warning-foreground',\n} as const;\n\nexport function ThinkingLevelSlider<T extends string>({\n  options,\n  value,\n  ariaLabel,\n  disabled,\n  valueTextSuffix,\n  onChange,\n  className,\n}: ThinkingLevelSliderProps<T>) {\n  const { shownStop, shownOption, isPending, rangeInputProps } = useThinkingLevelStop({ options, value, onChange });\n  const lastStop = Math.max(options.length - 1, 1);\n  const tone = shownOption?.emphasis ? EMPHASIS_TONE[shownOption.emphasis] : 'text-foreground';\n  const valueText = `${shownOption?.label ?? ''}${isPending ? '' : (valueTextSuffix ?? '')}`;\n  const travelled = `calc(0.5rem + (100% - 1rem) * ${shownStop / lastStop})`;\n\n  return (\n    <div className={cn('flex items-center gap-2', tone, disabled && 'pointer-events-none opacity-50', className)}>\n      <Txt as=\"span\" variant=\"caption\" className=\"w-20 shrink-0 text-right\">\n        {shownOption?.label}\n      </Txt>\n\n      <span className=\"relative flex h-7 w-36 items-center rounded-lg bg-fill\">\n        <span\n          aria-hidden\n          className=\"absolute inset-y-0 left-0 rounded-lg bg-fill-strong\"\n          style={{ width: `calc(${travelled} + 6px)` }}\n        />\n        <span aria-hidden className=\"pointer-events-none absolute inset-x-[6.5px] flex justify-between\">\n          {options.map(option => (\n            <span key={option.value} className=\"size-[3px] rounded-full bg-current/40\" />\n          ))}\n        </span>\n        <span\n          aria-hidden\n          className=\"absolute h-4 w-[3px] -translate-x-1/2 rounded-full bg-current\"\n          style={{ left: travelled }}\n        />\n        <input\n          {...rangeInputProps}\n          aria-label={ariaLabel}\n          aria-valuetext={valueText}\n          disabled={disabled}\n          className={cn('relative h-7 w-full rounded-lg', invisibleRangeInputClassName)}\n        />\n      </span>\n    </div>\n  );\n}\n","import { useThinkingLevelStop, invisibleRangeInputClassName } from './use-thinking-level-stop';\nimport type { ThinkingLevelOption } from './use-thinking-level-stop';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface ThinkingLevelRampProps<T extends string> {\n  options: readonly ThinkingLevelOption<T>[];\n  value: T;\n  label: string;\n  /** Returning the write lets the ramp hold the dropped stop until it lands. */\n  onChange: (value: T) => void | Promise<unknown>;\n}\n\nfunction filledBarColor(option: ThinkingLevelOption) {\n  return option.emphasis === 'warning' ? 'bg-warning-foreground' : 'bg-foreground';\n}\n\nexport function ThinkingLevelRamp<T extends string>({ options, value, label, onChange }: ThinkingLevelRampProps<T>) {\n  const { shownStop, shownOption, rangeInputProps } = useThinkingLevelStop({ options, value, onChange });\n  const lastStop = Math.max(options.length - 1, 1);\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-baseline justify-between gap-2\">\n        <Txt as=\"p\" variant=\"label\" tone=\"ink\">\n          {label}\n        </Txt>\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n          {shownOption?.label}\n        </Txt>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"relative flex h-10 items-end gap-1\">\n          {options.map((option, stop) => (\n            <span\n              key={option.value}\n              aria-hidden\n              className={cn(\n                'flex-1 rounded-sm transition-colors',\n                stop <= shownStop ? filledBarColor(option) : 'bg-fill',\n              )}\n              style={{ height: `${20 + (80 * stop) / lastStop}%` }}\n            />\n          ))}\n          <input\n            {...rangeInputProps}\n            aria-label={label}\n            aria-valuetext={shownOption?.label}\n            className={cn('absolute inset-0 size-full rounded-sm', invisibleRangeInputClassName)}\n          />\n        </div>\n        <div className=\"flex justify-between\">\n          {options.map((option, stop) => (\n            <Txt\n              key={option.value}\n              as=\"span\"\n              variant=\"meta\"\n              tone={stop === shownStop ? 'ink' : 'faint'}\n              className=\"flex-1 text-center\"\n            >\n              {option.label}\n            </Txt>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { ThinkingLevelRamp } from './thinking-level-ramp';\nimport type { ThinkingLevelOption } from './use-thinking-level-stop';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThinkingLevelBarsProps<T extends string> {\n  options: readonly ThinkingLevelOption<T>[];\n  value: T | undefined;\n}\n\nexport function ThinkingLevelBars<T extends string>({ options, value }: ThinkingLevelBarsProps<T>) {\n  const thinkingOptions = options.filter(option => option.emphasis !== 'muted');\n  const filled = thinkingOptions.findIndex(option => option.value === value) + 1;\n  const barCount = Math.max(thinkingOptions.length, 1);\n  return (\n    <span aria-hidden className=\"flex h-3 items-end gap-0.5\">\n      {Array.from({ length: barCount }, (_, index) => (\n        <span\n          key={index}\n          className={cn('w-[3px] rounded-xs', index < filled ? 'bg-current' : 'bg-current/25')}\n          style={{ height: `${40 + (60 * index) / Math.max(barCount - 1, 1)}%` }}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport interface ThinkingLevelPickerProps<T extends string> {\n  options: readonly ThinkingLevelOption<T>[];\n  value: T;\n  label: string;\n  /** Disables the trigger and explains why in its tooltip, e.g. when the model cannot think. */\n  unavailableReason?: string;\n  description?: ReactNode;\n  onChange: (value: T) => void | Promise<unknown>;\n}\n\nexport function ThinkingLevelPicker<T extends string>({\n  options,\n  value,\n  label,\n  unavailableReason,\n  description,\n  onChange,\n}: ThinkingLevelPickerProps<T>) {\n  if (unavailableReason) {\n    return (\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <span\n              role=\"button\"\n              tabIndex={0}\n              aria-disabled=\"true\"\n              aria-label={`${label}: unavailable. ${unavailableReason}`}\n              className={cn(\n                'inline-flex h-control-sm shrink-0 cursor-not-allowed items-center rounded-full border border-transparent px-2.5 text-placeholder',\n                focusRing,\n              )}\n            />\n          }\n        >\n          <ThinkingLevelBars options={options} value={undefined} />\n        </TooltipTrigger>\n        <TooltipContent side=\"top\" className=\"max-w-64\">\n          {unavailableReason}\n        </TooltipContent>\n      </Tooltip>\n    );\n  }\n\n  const triggerLabel = `${label}: ${options.find(option => option.value === value)?.label ?? value}`;\n\n  return (\n    <Popover>\n      <PopoverTrigger variant=\"ghost\" size=\"sm\" aria-label={triggerLabel} tooltip={triggerLabel} className=\"shrink-0\">\n        <ThinkingLevelBars options={options} value={value} />\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"flex flex-col gap-3\">\n        <ThinkingLevelRamp options={options} value={value} label={label} onChange={onChange} />\n        {description ? (\n          <Txt as=\"p\" variant=\"caption\" tone=\"muted\">\n            {description}\n          </Txt>\n        ) : null}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/ThreadList.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const threadList = require('../thread-list-Drcptd4x.cjs');
+const threadList = require('../thread-list-DKBwiGfX.cjs');
 
 
 

package/dist/components/ThreadList.es.js

@@ -1,2 +1,2 @@
-export { T as ThreadList, a as ThreadListEmpty, b as ThreadListItem, c as ThreadListItems, d as ThreadListNewItem, e as ThreadListSeparator } from '../thread-list-BTpezI4f.js';
+export { T as ThreadList, a as ThreadListEmpty, b as ThreadListItem, c as ThreadListItems, d as ThreadListNewItem, e as ThreadListSeparator } from '../thread-list-D2zSEQWK.js';
 //# sourceMappingURL=ThreadList.es.js.map

package/dist/components/ThreadRail.cjs.js

@@ -7,7 +7,7 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 const messageScrollerHooks = require('../message-scroller-hooks-BxAf8k0Y.cjs');
 const scrollArea = require('../scroll-area-CEuf7Omb.cjs');
-const Txt = require('../Txt-DPmEpNbp.cjs');
+const Txt = require('../Txt-DNnvlrBo.cjs');
 const primitives_raisedSurface = require('../primitives/raised-surface.cjs.js');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
 const hooks_useMeasuredAutoHeight = require('../hooks/use-measured-auto-height.cjs.js');

package/dist/components/ThreadRail.es.js

@@ -3,7 +3,7 @@ import { FileText } from 'lucide-react';
 import * as React from 'react';
 import { c as useOptionalMessageScroller, e as useOptionalMessageScrollerVisibility } from '../message-scroller-hooks-BEeE1WE6.js';
 import { S as ScrollArea, a as ScrollAreaViewport } from '../scroll-area-Ds-fJn5M.js';
-import { T as Txt } from '../Txt-BP1SRHmL.js';
+import { T as Txt } from '../Txt-C3cYJgKU.js';
 import { overlaySurfaceStyle } from '../primitives/raised-surface.es.js';
 import { focusRing } from '../primitives/transitions.es.js';
 import { useMeasuredAutoHeight } from '../hooks/use-measured-auto-height.es.js';

package/dist/components/TokenBudget.cjs.js

@@ -6,7 +6,7 @@ require('../TokenBudget.css');const tones = require('../tones-koH7QNLH.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
-const Txt = require('../Txt-DPmEpNbp.cjs');
+const Txt = require('../Txt-DNnvlrBo.cjs');
 
 const RADIUS = 7;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;

package/dist/components/TokenBudget.es.js

@@ -2,7 +2,7 @@ import { f as formatCompactTokens, t as toneClass } from '../tones-RD3VjqiN.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useId } from 'react';
 import { c as cn } from '../cn-65Adrsfj.js';
-import { T as Txt } from '../Txt-BP1SRHmL.js';
+import { T as Txt } from '../Txt-C3cYJgKU.js';
 
 import '../TokenBudget.css';const RADIUS = 7;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;