@mastra/playground-ui 35.0.0 → 35.1.0-alpha.0

package/dist/hooks/use-keyboard-shortcut-label.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-keyboard-shortcut-label.cjs.js","sources":["../../src/hooks/use-keyboard-shortcut-label.ts"],"sourcesContent":["import { useMemo, useState } from 'react';\n\ntype NavigatorWithUserAgentData = Navigator & {\n  userAgentData?: {\n    platform?: string;\n  };\n};\n\nconst APPLE_PLATFORM_PATTERN = /mac|iphone|ipad|ipod/i;\n\nfunction getIsApplePlatform() {\n  if (typeof navigator === 'undefined') return false;\n\n  const nav = navigator as NavigatorWithUserAgentData;\n  const platform = nav.userAgentData?.platform || nav.platform || '';\n  const userAgent = nav.userAgent || '';\n\n  return APPLE_PLATFORM_PATTERN.test(platform) || APPLE_PLATFORM_PATTERN.test(userAgent);\n}\n\nexport function useIsApplePlatform() {\n  const [isApplePlatform] = useState(getIsApplePlatform);\n\n  return isApplePlatform;\n}\n\nexport function useKeyboardShortcutLabel(key: string) {\n  const isApplePlatform = useIsApplePlatform();\n\n  return useMemo(() => {\n    const normalizedKey = key.trim().toUpperCase();\n    return `${isApplePlatform ? '⌘' : 'Ctrl'} ${normalizedKey}`;\n  }, [isApplePlatform, key]);\n}\n"],"names":["useState","useMemo"],"mappings":";;;;;;AAQA,MAAM,sBAAA,GAAyB,uBAAA;AAE/B,SAAS,kBAAA,GAAqB;AAC5B,EAAA,IAAI,OAAO,SAAA,KAAc,WAAA,EAAa,OAAO,KAAA;AAE7C,EAAA,MAAM,GAAA,GAAM,SAAA;AACZ,EAAA,MAAM,QAAA,GAAW,GAAA,CAAI,aAAA,EAAe,QAAA,IAAY,IAAI,QAAA,IAAY,EAAA;AAChE,EAAA,MAAM,SAAA,GAAY,IAAI,SAAA,IAAa,EAAA;AAEnC,EAAA,OAAO,uBAAuB,IAAA,CAAK,QAAQ,CAAA,IAAK,sBAAA,CAAuB,KAAK,SAAS,CAAA;AACvF;AAEO,SAAS,kBAAA,GAAqB;AACnC,EAAA,MAAM,CAAC,eAAe,CAAA,GAAIA,cAAA,CAAS,kBAAkB,CAAA;AAErD,EAAA,OAAO,eAAA;AACT;AAEO,SAAS,yBAAyB,GAAA,EAAa;AACpD,EAAA,MAAM,kBAAkB,kBAAA,EAAmB;AAE3C,EAAA,OAAOC,cAAQ,MAAM;AACnB,IAAA,MAAM,aAAA,GAAgB,GAAA,CAAI,IAAA,EAAK,CAAE,WAAA,EAAY;AAC7C,IAAA,OAAO,CAAA,EAAG,eAAA,GAAkB,GAAA,GAAM,MAAM,IAAI,aAAa,CAAA,CAAA;AAAA,EAC3D,CAAA,EAAG,CAAC,eAAA,EAAiB,GAAG,CAAC,CAAA;AAC3B;;;;;"}

package/dist/hooks/use-keyboard-shortcut-label.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/hooks/use-keyboard-shortcut-label'
+export {}

package/dist/hooks/use-keyboard-shortcut-label.es.js

@@ -0,0 +1,24 @@
+import { useState, useMemo } from 'react';
+
+const APPLE_PLATFORM_PATTERN = /mac|iphone|ipad|ipod/i;
+function getIsApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  const nav = navigator;
+  const platform = nav.userAgentData?.platform || nav.platform || "";
+  const userAgent = nav.userAgent || "";
+  return APPLE_PLATFORM_PATTERN.test(platform) || APPLE_PLATFORM_PATTERN.test(userAgent);
+}
+function useIsApplePlatform() {
+  const [isApplePlatform] = useState(getIsApplePlatform);
+  return isApplePlatform;
+}
+function useKeyboardShortcutLabel(key) {
+  const isApplePlatform = useIsApplePlatform();
+  return useMemo(() => {
+    const normalizedKey = key.trim().toUpperCase();
+    return `${isApplePlatform ? "⌘" : "Ctrl"} ${normalizedKey}`;
+  }, [isApplePlatform, key]);
+}
+
+export { useIsApplePlatform, useKeyboardShortcutLabel };
+//# sourceMappingURL=use-keyboard-shortcut-label.es.js.map

package/dist/hooks/use-keyboard-shortcut-label.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-keyboard-shortcut-label.es.js","sources":["../../src/hooks/use-keyboard-shortcut-label.ts"],"sourcesContent":["import { useMemo, useState } from 'react';\n\ntype NavigatorWithUserAgentData = Navigator & {\n  userAgentData?: {\n    platform?: string;\n  };\n};\n\nconst APPLE_PLATFORM_PATTERN = /mac|iphone|ipad|ipod/i;\n\nfunction getIsApplePlatform() {\n  if (typeof navigator === 'undefined') return false;\n\n  const nav = navigator as NavigatorWithUserAgentData;\n  const platform = nav.userAgentData?.platform || nav.platform || '';\n  const userAgent = nav.userAgent || '';\n\n  return APPLE_PLATFORM_PATTERN.test(platform) || APPLE_PLATFORM_PATTERN.test(userAgent);\n}\n\nexport function useIsApplePlatform() {\n  const [isApplePlatform] = useState(getIsApplePlatform);\n\n  return isApplePlatform;\n}\n\nexport function useKeyboardShortcutLabel(key: string) {\n  const isApplePlatform = useIsApplePlatform();\n\n  return useMemo(() => {\n    const normalizedKey = key.trim().toUpperCase();\n    return `${isApplePlatform ? '⌘' : 'Ctrl'} ${normalizedKey}`;\n  }, [isApplePlatform, key]);\n}\n"],"names":[],"mappings":";;AAQA,MAAM,sBAAA,GAAyB,uBAAA;AAE/B,SAAS,kBAAA,GAAqB;AAC5B,EAAA,IAAI,OAAO,SAAA,KAAc,WAAA,EAAa,OAAO,KAAA;AAE7C,EAAA,MAAM,GAAA,GAAM,SAAA;AACZ,EAAA,MAAM,QAAA,GAAW,GAAA,CAAI,aAAA,EAAe,QAAA,IAAY,IAAI,QAAA,IAAY,EAAA;AAChE,EAAA,MAAM,SAAA,GAAY,IAAI,SAAA,IAAa,EAAA;AAEnC,EAAA,OAAO,uBAAuB,IAAA,CAAK,QAAQ,CAAA,IAAK,sBAAA,CAAuB,KAAK,SAAS,CAAA;AACvF;AAEO,SAAS,kBAAA,GAAqB;AACnC,EAAA,MAAM,CAAC,eAAe,CAAA,GAAI,QAAA,CAAS,kBAAkB,CAAA;AAErD,EAAA,OAAO,eAAA;AACT;AAEO,SAAS,yBAAyB,GAAA,EAAa;AACpD,EAAA,MAAM,kBAAkB,kBAAA,EAAmB;AAE3C,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,aAAA,GAAgB,GAAA,CAAI,IAAA,EAAK,CAAE,WAAA,EAAY;AAC7C,IAAA,OAAO,CAAA,EAAG,eAAA,GAAkB,GAAA,GAAM,MAAM,IAAI,aAAa,CAAA,CAAA;AAAA,EAC3D,CAAA,EAAG,CAAC,eAAA,EAAiB,GAAG,CAAC,CAAA;AAC3B;;;;"}

package/dist/{horizontal-bars-DjLETHvH.js → horizontal-bars-r1aEIHUc.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { S as ScrollArea } from './scroll-area-BtDqmqBK.js';
+import { S as ScrollArea } from './scroll-area-DjZ6nTm5.js';
 import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-DehuxlSR.js';
 import { c as cn } from './utils-CzYGxqbG.js';
 
@@ -103,4 +103,4 @@ function Wrapper({ children }) {
 }
 
 export { HorizontalBars as H };
-//# sourceMappingURL=horizontal-bars-DjLETHvH.js.map
+//# sourceMappingURL=horizontal-bars-r1aEIHUc.js.map

package/dist/{horizontal-bars-DjLETHvH.js.map → horizontal-bars-r1aEIHUc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"horizontal-bars-DjLETHvH.js","sources":["../src/ds/components/HorizontalBars/horizontal-bars.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\ntype Segment = { label: string; color: string };\n\ntype HorizontalBarRow = {\n  name: string;\n  values: number[];\n  /** If present, the whole row is rendered as a link to this URL. */\n  href?: string;\n  /** If present, an individual segment becomes its own link. Indices align with `segments`. */\n  hrefs?: Array<string | undefined>;\n};\n\nexport function HorizontalBars({\n  data,\n  segments,\n  maxVal,\n  fmt,\n  className,\n  LinkComponent = 'a',\n}: {\n  data: Array<HorizontalBarRow>;\n  segments: Segment[];\n  maxVal: number;\n  fmt: (v: number) => string;\n  className?: string;\n  /** Override how links produced by `href` / `hrefs` are rendered. Receives `href`,\n   *  `className`, `aria-label`, and `children`. Defaults to a plain `<a>` element;\n   *  consumers using a router should pass an adapter that maps `href` to their\n   *  navigation primitive (e.g. react-router `<Link to={href} />`). */\n  LinkComponent?: ElementType;\n}) {\n  const sorted = [...data].sort((a, b) => {\n    const totalB = b.values.reduce((s, v) => s + v, 0);\n    const totalA = a.values.reduce((s, v) => s + v, 0);\n    return totalB - totalA;\n  });\n\n  const isStacked = segments.length > 1;\n\n  return (\n    <ScrollArea className={cn('w-full h-full', className)}>\n      <div className=\"flex items-center gap-3 mb-4 mt-2\">\n        <div className=\"flex-1 flex items-center gap-4\">\n          {segments.map(seg => (\n            <div key={seg.label} className=\"flex items-center gap-2\">\n              <div className=\"size-2 rounded-full\" style={{ backgroundColor: seg.color }} />\n              <span className=\"text-ui-sm text-neutral3\">{seg.label}</span>\n            </div>\n          ))}\n        </div>\n        <span className=\"shrink-0 text-ui-sm text-neutral2 pr-2\">Total</span>\n      </div>\n      <div className=\"grid gap-3.5\">\n        {sorted.map(d => {\n          const total = d.values.reduce((s, v) => s + v, 0);\n          const rowBody = (\n            <>\n              <div className=\"relative h-full flex-1 min-w-0\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <div\n                      className={cn('absolute inset-y-0 left-0', d.href ? 'cursor-pointer' : 'cursor-default')}\n                      style={{ width: `${maxVal > 0 ? (total / maxVal) * 100 : 0}%` }}\n                    >\n                      {segments.map((seg, si) => {\n                        const val = d.values[si] ?? 0;\n                        const pct = total > 0 ? (val / total) * 100 : 0;\n                        const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? (v / total) * 100 : 0), 0);\n                        const isLastWithValue = d.values.slice(si + 1).every(v => !v);\n                        // Only honor segment-level links when the row itself is not an anchor.\n                        // Otherwise we'd render <a> nested inside <a>, which is invalid HTML.\n                        const segHref = d.href ? undefined : d.hrefs?.[si];\n\n                        const segmentNode = (\n                          <div\n                            className={cn(\n                              'absolute inset-y-0 opacity-40 dark:opacity-100',\n                              isStacked && si === 0 && 'rounded-l',\n                              isStacked && isLastWithValue && 'rounded-r',\n                              !isStacked && 'rounded',\n                              segHref && 'cursor-pointer hover:opacity-70 transition-opacity',\n                            )}\n                            style={{\n                              left: isStacked ? `${left}%` : 0,\n                              width: isStacked ? `${pct}%` : `${pct}%`,\n                              backgroundColor: seg.color,\n                            }}\n                          />\n                        );\n\n                        if (segHref) {\n                          return (\n                            <LinkComponent\n                              key={seg.label}\n                              href={segHref}\n                              aria-label={`${d.name} — ${seg.label}`}\n                              className=\"contents\"\n                            >\n                              {segmentNode}\n                            </LinkComponent>\n                          );\n                        }\n                        return <Wrapper key={seg.label}>{segmentNode}</Wrapper>;\n                      })}\n                    </div>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\" className=\"font-mono\">\n                    <div className=\"grid gap-1\">\n                      {segments.map((seg, si) => (\n                        <div key={seg.label} className=\"flex items-center gap-2\">\n                          <span>{seg.label}</span>\n                          <span className=\"ml-auto pl-3\">{fmt(d.values[si] ?? 0)}</span>\n                        </div>\n                      ))}\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <span className=\"absolute inset-y-0 left-2.5 flex items-center text-ui-sm text-neutral4 truncate z-10 pointer-events-none\">\n                  {d.name}\n                </span>\n              </div>\n              <span className=\"text-ui-md text-neutral4 tabular-nums shrink-0 pr-3\">{fmt(total)}</span>\n            </>\n          );\n\n          if (d.href) {\n            return (\n              <LinkComponent\n                key={d.name}\n                href={d.href}\n                className=\"flex items-center gap-14 h-6 rounded outline-none cursor-pointer hover:bg-surface3 focus-visible:bg-surface3 transition-colors\"\n              >\n                {rowBody}\n              </LinkComponent>\n            );\n          }\n          return (\n            <div key={d.name} className=\"flex items-center gap-14 h-6 \">\n              {rowBody}\n            </div>\n          );\n        })}\n      </div>\n    </ScrollArea>\n  );\n}\n\nfunction Wrapper({ children }: { children: ReactNode }) {\n  return <>{children}</>;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"horizontal-bars-r1aEIHUc.js","sources":["../src/ds/components/HorizontalBars/horizontal-bars.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\ntype Segment = { label: string; color: string };\n\ntype HorizontalBarRow = {\n  name: string;\n  values: number[];\n  /** If present, the whole row is rendered as a link to this URL. */\n  href?: string;\n  /** If present, an individual segment becomes its own link. Indices align with `segments`. */\n  hrefs?: Array<string | undefined>;\n};\n\nexport function HorizontalBars({\n  data,\n  segments,\n  maxVal,\n  fmt,\n  className,\n  LinkComponent = 'a',\n}: {\n  data: Array<HorizontalBarRow>;\n  segments: Segment[];\n  maxVal: number;\n  fmt: (v: number) => string;\n  className?: string;\n  /** Override how links produced by `href` / `hrefs` are rendered. Receives `href`,\n   *  `className`, `aria-label`, and `children`. Defaults to a plain `<a>` element;\n   *  consumers using a router should pass an adapter that maps `href` to their\n   *  navigation primitive (e.g. react-router `<Link to={href} />`). */\n  LinkComponent?: ElementType;\n}) {\n  const sorted = [...data].sort((a, b) => {\n    const totalB = b.values.reduce((s, v) => s + v, 0);\n    const totalA = a.values.reduce((s, v) => s + v, 0);\n    return totalB - totalA;\n  });\n\n  const isStacked = segments.length > 1;\n\n  return (\n    <ScrollArea className={cn('w-full h-full', className)}>\n      <div className=\"flex items-center gap-3 mb-4 mt-2\">\n        <div className=\"flex-1 flex items-center gap-4\">\n          {segments.map(seg => (\n            <div key={seg.label} className=\"flex items-center gap-2\">\n              <div className=\"size-2 rounded-full\" style={{ backgroundColor: seg.color }} />\n              <span className=\"text-ui-sm text-neutral3\">{seg.label}</span>\n            </div>\n          ))}\n        </div>\n        <span className=\"shrink-0 text-ui-sm text-neutral2 pr-2\">Total</span>\n      </div>\n      <div className=\"grid gap-3.5\">\n        {sorted.map(d => {\n          const total = d.values.reduce((s, v) => s + v, 0);\n          const rowBody = (\n            <>\n              <div className=\"relative h-full flex-1 min-w-0\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <div\n                      className={cn('absolute inset-y-0 left-0', d.href ? 'cursor-pointer' : 'cursor-default')}\n                      style={{ width: `${maxVal > 0 ? (total / maxVal) * 100 : 0}%` }}\n                    >\n                      {segments.map((seg, si) => {\n                        const val = d.values[si] ?? 0;\n                        const pct = total > 0 ? (val / total) * 100 : 0;\n                        const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? (v / total) * 100 : 0), 0);\n                        const isLastWithValue = d.values.slice(si + 1).every(v => !v);\n                        // Only honor segment-level links when the row itself is not an anchor.\n                        // Otherwise we'd render <a> nested inside <a>, which is invalid HTML.\n                        const segHref = d.href ? undefined : d.hrefs?.[si];\n\n                        const segmentNode = (\n                          <div\n                            className={cn(\n                              'absolute inset-y-0 opacity-40 dark:opacity-100',\n                              isStacked && si === 0 && 'rounded-l',\n                              isStacked && isLastWithValue && 'rounded-r',\n                              !isStacked && 'rounded',\n                              segHref && 'cursor-pointer hover:opacity-70 transition-opacity',\n                            )}\n                            style={{\n                              left: isStacked ? `${left}%` : 0,\n                              width: isStacked ? `${pct}%` : `${pct}%`,\n                              backgroundColor: seg.color,\n                            }}\n                          />\n                        );\n\n                        if (segHref) {\n                          return (\n                            <LinkComponent\n                              key={seg.label}\n                              href={segHref}\n                              aria-label={`${d.name} — ${seg.label}`}\n                              className=\"contents\"\n                            >\n                              {segmentNode}\n                            </LinkComponent>\n                          );\n                        }\n                        return <Wrapper key={seg.label}>{segmentNode}</Wrapper>;\n                      })}\n                    </div>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\" className=\"font-mono\">\n                    <div className=\"grid gap-1\">\n                      {segments.map((seg, si) => (\n                        <div key={seg.label} className=\"flex items-center gap-2\">\n                          <span>{seg.label}</span>\n                          <span className=\"ml-auto pl-3\">{fmt(d.values[si] ?? 0)}</span>\n                        </div>\n                      ))}\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <span className=\"absolute inset-y-0 left-2.5 flex items-center text-ui-sm text-neutral4 truncate z-10 pointer-events-none\">\n                  {d.name}\n                </span>\n              </div>\n              <span className=\"text-ui-md text-neutral4 tabular-nums shrink-0 pr-3\">{fmt(total)}</span>\n            </>\n          );\n\n          if (d.href) {\n            return (\n              <LinkComponent\n                key={d.name}\n                href={d.href}\n                className=\"flex items-center gap-14 h-6 rounded outline-none cursor-pointer hover:bg-surface3 focus-visible:bg-surface3 transition-colors\"\n              >\n                {rowBody}\n              </LinkComponent>\n            );\n          }\n          return (\n            <div key={d.name} className=\"flex items-center gap-14 h-6 \">\n              {rowBody}\n            </div>\n          );\n        })}\n      </div>\n    </ScrollArea>\n  );\n}\n\nfunction Wrapper({ children }: { children: ReactNode }) {\n  return <>{children}</>;\n}\n"],"names":[],"mappings":"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"}

package/dist/{horizontal-bars-C9qp4r47.cjs → horizontal-bars-uPFpgihX.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
-const scrollArea = require('./scroll-area-BqJfcT94.cjs');
+const scrollArea = require('./scroll-area-BtcyzOxO.cjs');
 const tooltip = require('./tooltip-j8gUR1Qk.cjs');
 const utils = require('./utils-vA5sWo9W.cjs');
 
@@ -105,4 +105,4 @@ function Wrapper({ children }) {
 }
 
 exports.HorizontalBars = HorizontalBars;
-//# sourceMappingURL=horizontal-bars-C9qp4r47.cjs.map
+//# sourceMappingURL=horizontal-bars-uPFpgihX.cjs.map

package/dist/{horizontal-bars-C9qp4r47.cjs.map → horizontal-bars-uPFpgihX.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"horizontal-bars-C9qp4r47.cjs","sources":["../src/ds/components/HorizontalBars/horizontal-bars.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\ntype Segment = { label: string; color: string };\n\ntype HorizontalBarRow = {\n  name: string;\n  values: number[];\n  /** If present, the whole row is rendered as a link to this URL. */\n  href?: string;\n  /** If present, an individual segment becomes its own link. Indices align with `segments`. */\n  hrefs?: Array<string | undefined>;\n};\n\nexport function HorizontalBars({\n  data,\n  segments,\n  maxVal,\n  fmt,\n  className,\n  LinkComponent = 'a',\n}: {\n  data: Array<HorizontalBarRow>;\n  segments: Segment[];\n  maxVal: number;\n  fmt: (v: number) => string;\n  className?: string;\n  /** Override how links produced by `href` / `hrefs` are rendered. Receives `href`,\n   *  `className`, `aria-label`, and `children`. Defaults to a plain `<a>` element;\n   *  consumers using a router should pass an adapter that maps `href` to their\n   *  navigation primitive (e.g. react-router `<Link to={href} />`). */\n  LinkComponent?: ElementType;\n}) {\n  const sorted = [...data].sort((a, b) => {\n    const totalB = b.values.reduce((s, v) => s + v, 0);\n    const totalA = a.values.reduce((s, v) => s + v, 0);\n    return totalB - totalA;\n  });\n\n  const isStacked = segments.length > 1;\n\n  return (\n    <ScrollArea className={cn('w-full h-full', className)}>\n      <div className=\"flex items-center gap-3 mb-4 mt-2\">\n        <div className=\"flex-1 flex items-center gap-4\">\n          {segments.map(seg => (\n            <div key={seg.label} className=\"flex items-center gap-2\">\n              <div className=\"size-2 rounded-full\" style={{ backgroundColor: seg.color }} />\n              <span className=\"text-ui-sm text-neutral3\">{seg.label}</span>\n            </div>\n          ))}\n        </div>\n        <span className=\"shrink-0 text-ui-sm text-neutral2 pr-2\">Total</span>\n      </div>\n      <div className=\"grid gap-3.5\">\n        {sorted.map(d => {\n          const total = d.values.reduce((s, v) => s + v, 0);\n          const rowBody = (\n            <>\n              <div className=\"relative h-full flex-1 min-w-0\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <div\n                      className={cn('absolute inset-y-0 left-0', d.href ? 'cursor-pointer' : 'cursor-default')}\n                      style={{ width: `${maxVal > 0 ? (total / maxVal) * 100 : 0}%` }}\n                    >\n                      {segments.map((seg, si) => {\n                        const val = d.values[si] ?? 0;\n                        const pct = total > 0 ? (val / total) * 100 : 0;\n                        const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? (v / total) * 100 : 0), 0);\n                        const isLastWithValue = d.values.slice(si + 1).every(v => !v);\n                        // Only honor segment-level links when the row itself is not an anchor.\n                        // Otherwise we'd render <a> nested inside <a>, which is invalid HTML.\n                        const segHref = d.href ? undefined : d.hrefs?.[si];\n\n                        const segmentNode = (\n                          <div\n                            className={cn(\n                              'absolute inset-y-0 opacity-40 dark:opacity-100',\n                              isStacked && si === 0 && 'rounded-l',\n                              isStacked && isLastWithValue && 'rounded-r',\n                              !isStacked && 'rounded',\n                              segHref && 'cursor-pointer hover:opacity-70 transition-opacity',\n                            )}\n                            style={{\n                              left: isStacked ? `${left}%` : 0,\n                              width: isStacked ? `${pct}%` : `${pct}%`,\n                              backgroundColor: seg.color,\n                            }}\n                          />\n                        );\n\n                        if (segHref) {\n                          return (\n                            <LinkComponent\n                              key={seg.label}\n                              href={segHref}\n                              aria-label={`${d.name} — ${seg.label}`}\n                              className=\"contents\"\n                            >\n                              {segmentNode}\n                            </LinkComponent>\n                          );\n                        }\n                        return <Wrapper key={seg.label}>{segmentNode}</Wrapper>;\n                      })}\n                    </div>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\" className=\"font-mono\">\n                    <div className=\"grid gap-1\">\n                      {segments.map((seg, si) => (\n                        <div key={seg.label} className=\"flex items-center gap-2\">\n                          <span>{seg.label}</span>\n                          <span className=\"ml-auto pl-3\">{fmt(d.values[si] ?? 0)}</span>\n                        </div>\n                      ))}\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <span className=\"absolute inset-y-0 left-2.5 flex items-center text-ui-sm text-neutral4 truncate z-10 pointer-events-none\">\n                  {d.name}\n                </span>\n              </div>\n              <span className=\"text-ui-md text-neutral4 tabular-nums shrink-0 pr-3\">{fmt(total)}</span>\n            </>\n          );\n\n          if (d.href) {\n            return (\n              <LinkComponent\n                key={d.name}\n                href={d.href}\n                className=\"flex items-center gap-14 h-6 rounded outline-none cursor-pointer hover:bg-surface3 focus-visible:bg-surface3 transition-colors\"\n              >\n                {rowBody}\n              </LinkComponent>\n            );\n          }\n          return (\n            <div key={d.name} className=\"flex items-center gap-14 h-6 \">\n              {rowBody}\n            </div>\n          );\n        })}\n      </div>\n    </ScrollArea>\n  );\n}\n\nfunction Wrapper({ children }: { children: ReactNode }) {\n  return <>{children}</>;\n}\n"],"names":["ScrollArea","cn","jsxs","jsx","Fragment","Tooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}
+{"version":3,"file":"horizontal-bars-uPFpgihX.cjs","sources":["../src/ds/components/HorizontalBars/horizontal-bars.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\ntype Segment = { label: string; color: string };\n\ntype HorizontalBarRow = {\n  name: string;\n  values: number[];\n  /** If present, the whole row is rendered as a link to this URL. */\n  href?: string;\n  /** If present, an individual segment becomes its own link. Indices align with `segments`. */\n  hrefs?: Array<string | undefined>;\n};\n\nexport function HorizontalBars({\n  data,\n  segments,\n  maxVal,\n  fmt,\n  className,\n  LinkComponent = 'a',\n}: {\n  data: Array<HorizontalBarRow>;\n  segments: Segment[];\n  maxVal: number;\n  fmt: (v: number) => string;\n  className?: string;\n  /** Override how links produced by `href` / `hrefs` are rendered. Receives `href`,\n   *  `className`, `aria-label`, and `children`. Defaults to a plain `<a>` element;\n   *  consumers using a router should pass an adapter that maps `href` to their\n   *  navigation primitive (e.g. react-router `<Link to={href} />`). */\n  LinkComponent?: ElementType;\n}) {\n  const sorted = [...data].sort((a, b) => {\n    const totalB = b.values.reduce((s, v) => s + v, 0);\n    const totalA = a.values.reduce((s, v) => s + v, 0);\n    return totalB - totalA;\n  });\n\n  const isStacked = segments.length > 1;\n\n  return (\n    <ScrollArea className={cn('w-full h-full', className)}>\n      <div className=\"flex items-center gap-3 mb-4 mt-2\">\n        <div className=\"flex-1 flex items-center gap-4\">\n          {segments.map(seg => (\n            <div key={seg.label} className=\"flex items-center gap-2\">\n              <div className=\"size-2 rounded-full\" style={{ backgroundColor: seg.color }} />\n              <span className=\"text-ui-sm text-neutral3\">{seg.label}</span>\n            </div>\n          ))}\n        </div>\n        <span className=\"shrink-0 text-ui-sm text-neutral2 pr-2\">Total</span>\n      </div>\n      <div className=\"grid gap-3.5\">\n        {sorted.map(d => {\n          const total = d.values.reduce((s, v) => s + v, 0);\n          const rowBody = (\n            <>\n              <div className=\"relative h-full flex-1 min-w-0\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <div\n                      className={cn('absolute inset-y-0 left-0', d.href ? 'cursor-pointer' : 'cursor-default')}\n                      style={{ width: `${maxVal > 0 ? (total / maxVal) * 100 : 0}%` }}\n                    >\n                      {segments.map((seg, si) => {\n                        const val = d.values[si] ?? 0;\n                        const pct = total > 0 ? (val / total) * 100 : 0;\n                        const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? (v / total) * 100 : 0), 0);\n                        const isLastWithValue = d.values.slice(si + 1).every(v => !v);\n                        // Only honor segment-level links when the row itself is not an anchor.\n                        // Otherwise we'd render <a> nested inside <a>, which is invalid HTML.\n                        const segHref = d.href ? undefined : d.hrefs?.[si];\n\n                        const segmentNode = (\n                          <div\n                            className={cn(\n                              'absolute inset-y-0 opacity-40 dark:opacity-100',\n                              isStacked && si === 0 && 'rounded-l',\n                              isStacked && isLastWithValue && 'rounded-r',\n                              !isStacked && 'rounded',\n                              segHref && 'cursor-pointer hover:opacity-70 transition-opacity',\n                            )}\n                            style={{\n                              left: isStacked ? `${left}%` : 0,\n                              width: isStacked ? `${pct}%` : `${pct}%`,\n                              backgroundColor: seg.color,\n                            }}\n                          />\n                        );\n\n                        if (segHref) {\n                          return (\n                            <LinkComponent\n                              key={seg.label}\n                              href={segHref}\n                              aria-label={`${d.name} — ${seg.label}`}\n                              className=\"contents\"\n                            >\n                              {segmentNode}\n                            </LinkComponent>\n                          );\n                        }\n                        return <Wrapper key={seg.label}>{segmentNode}</Wrapper>;\n                      })}\n                    </div>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\" className=\"font-mono\">\n                    <div className=\"grid gap-1\">\n                      {segments.map((seg, si) => (\n                        <div key={seg.label} className=\"flex items-center gap-2\">\n                          <span>{seg.label}</span>\n                          <span className=\"ml-auto pl-3\">{fmt(d.values[si] ?? 0)}</span>\n                        </div>\n                      ))}\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <span className=\"absolute inset-y-0 left-2.5 flex items-center text-ui-sm text-neutral4 truncate z-10 pointer-events-none\">\n                  {d.name}\n                </span>\n              </div>\n              <span className=\"text-ui-md text-neutral4 tabular-nums shrink-0 pr-3\">{fmt(total)}</span>\n            </>\n          );\n\n          if (d.href) {\n            return (\n              <LinkComponent\n                key={d.name}\n                href={d.href}\n                className=\"flex items-center gap-14 h-6 rounded outline-none cursor-pointer hover:bg-surface3 focus-visible:bg-surface3 transition-colors\"\n              >\n                {rowBody}\n              </LinkComponent>\n            );\n          }\n          return (\n            <div key={d.name} className=\"flex items-center gap-14 h-6 \">\n              {rowBody}\n            </div>\n          );\n        })}\n      </div>\n    </ScrollArea>\n  );\n}\n\nfunction Wrapper({ children }: { children: ReactNode }) {\n  return <>{children}</>;\n}\n"],"names":["ScrollArea","cn","jsxs","jsx","Fragment","Tooltip","TooltipTrigger","TooltipContent"],"mappings":";;;;;;;AAgBO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,GAAgB;AAClB,CAAA,EAWG;AACD,EAAA,MAAM,MAAA,GAAS,CAAC,GAAG,IAAI,EAAE,IAAA,CAAK,CAAC,GAAG,CAAA,KAAM;AACtC,IAAA,MAAM,MAAA,GAAS,EAAE,MAAA,CAAO,MAAA,CAAO,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,GAAI,CAAA,EAAG,CAAC,CAAA;AACjD,IAAA,MAAM,MAAA,GAAS,EAAE,MAAA,CAAO,MAAA,CAAO,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,GAAI,CAAA,EAAG,CAAC,CAAA;AACjD,IAAA,OAAO,MAAA,GAAS,MAAA;AAAA,EAClB,CAAC,CAAA;AAED,EAAA,MAAM,SAAA,GAAY,SAAS,MAAA,GAAS,CAAA;AAEpC,EAAA,uCACGA,qBAAA,EAAA,EAAW,SAAA,EAAWC,QAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EAClD,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,gCAAA,EACZ,QAAA,EAAA,QAAA,CAAS,IAAI,CAAA,GAAA,qBACZD,eAAA,CAAC,KAAA,EAAA,EAAoB,SAAA,EAAU,yBAAA,EAC7B,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,qBAAA,EAAsB,KAAA,EAAO,EAAE,eAAA,EAAiB,GAAA,CAAI,OAAM,EAAG,CAAA;AAAA,wBAC5EA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA4B,cAAI,KAAA,EAAM;AAAA,OAAA,EAAA,EAF9C,GAAA,CAAI,KAGd,CACD,CAAA,EACH,CAAA;AAAA,sBACAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wCAAA,EAAyC,QAAA,EAAA,OAAA,EAAK;AAAA,KAAA,EAChE,CAAA;AAAA,mCACC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EACZ,QAAA,EAAA,MAAA,CAAO,IAAI,CAAA,CAAA,KAAK;AACf,MAAA,MAAM,KAAA,GAAQ,EAAE,MAAA,CAAO,MAAA,CAAO,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,GAAI,CAAA,EAAG,CAAC,CAAA;AAChD,MAAA,MAAM,0BACJD,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,gCAAA,EACb,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAACG,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAAF,cAAA,CAACG,sBAAA,EAAA,EAAe,SAAO,IAAA,EACrB,QAAA,kBAAAH,cAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,WAAWF,QAAA,CAAG,2BAAA,EAA6B,CAAA,CAAE,IAAA,GAAO,mBAAmB,gBAAgB,CAAA;AAAA,gBACvF,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,EAAG,MAAA,GAAS,IAAK,KAAA,GAAQ,MAAA,GAAU,GAAA,GAAM,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,gBAE7D,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,GAAA,EAAK,EAAA,KAAO;AACzB,kBAAA,MAAM,GAAA,GAAM,CAAA,CAAE,MAAA,CAAO,EAAE,CAAA,IAAK,CAAA;AAC5B,kBAAA,MAAM,GAAA,GAAM,KAAA,GAAQ,CAAA,GAAK,GAAA,GAAM,QAAS,GAAA,GAAM,CAAA;AAC9C,kBAAA,MAAM,OAAO,CAAA,CAAE,MAAA,CAAO,MAAM,CAAA,EAAG,EAAE,EAAE,MAAA,CAAO,CAAC,CAAA,EAAG,CAAA,KAAM,KAAK,KAAA,GAAQ,CAAA,GAAK,IAAI,KAAA,GAAS,GAAA,GAAM,IAAI,CAAC,CAAA;AAC9F,kBAAA,MAAM,eAAA,GAAkB,CAAA,CAAE,MAAA,CAAO,KAAA,CAAM,EAAA,GAAK,CAAC,CAAA,CAAE,KAAA,CAAM,CAAA,CAAA,KAAK,CAAC,CAAC,CAAA;AAG5D,kBAAA,MAAM,UAAU,CAAA,CAAE,IAAA,GAAO,MAAA,GAAY,CAAA,CAAE,QAAQ,EAAE,CAAA;AAEjD,kBAAA,MAAM,WAAA,mBACJE,cAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAWF,QAAA;AAAA,wBACT,gDAAA;AAAA,wBACA,SAAA,IAAa,OAAO,CAAA,IAAK,WAAA;AAAA,wBACzB,aAAa,eAAA,IAAmB,WAAA;AAAA,wBAChC,CAAC,SAAA,IAAa,SAAA;AAAA,wBACd,OAAA,IAAW;AAAA,uBACb;AAAA,sBACA,KAAA,EAAO;AAAA,wBACL,IAAA,EAAM,SAAA,GAAY,CAAA,EAAG,IAAI,CAAA,CAAA,CAAA,GAAM,CAAA;AAAA,wBAC/B,OAAO,SAAA,GAAY,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA,GAAM,GAAG,GAAG,CAAA,CAAA,CAAA;AAAA,wBACrC,iBAAiB,GAAA,CAAI;AAAA;AACvB;AAAA,mBACF;AAGF,kBAAA,IAAI,OAAA,EAAS;AACX,oBAAA,uBACEE,cAAA;AAAA,sBAAC,aAAA;AAAA,sBAAA;AAAA,wBAEC,IAAA,EAAM,OAAA;AAAA,wBACN,cAAY,CAAA,EAAG,CAAA,CAAE,IAAI,CAAA,GAAA,EAAM,IAAI,KAAK,CAAA,CAAA;AAAA,wBACpC,SAAA,EAAU,UAAA;AAAA,wBAET,QAAA,EAAA;AAAA,uBAAA;AAAA,sBALI,GAAA,CAAI;AAAA,qBAMX;AAAA,kBAEJ;AACA,kBAAA,uBAAOA,cAAA,CAAC,OAAA,EAAA,EAAyB,QAAA,EAAA,WAAA,EAAA,EAAZ,GAAA,CAAI,KAAoB,CAAA;AAAA,gBAC/C,CAAC;AAAA;AAAA,aACH,EACF,CAAA;AAAA,2CACCI,sBAAA,EAAA,EAAe,IAAA,EAAK,OAAM,SAAA,EAAU,WAAA,EACnC,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAA,EACZ,QAAA,EAAA,QAAA,CAAS,IAAI,CAAC,GAAA,EAAK,uBAClBL,eAAA,CAAC,KAAA,EAAA,EAAoB,WAAU,yBAAA,EAC7B,QAAA,EAAA;AAAA,8BAAAC,cAAA,CAAC,MAAA,EAAA,EAAM,cAAI,KAAA,EAAM,CAAA;AAAA,8BACjBA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EAAgB,QAAA,EAAA,GAAA,CAAI,EAAE,MAAA,CAAO,EAAE,CAAA,IAAK,CAAC,CAAA,EAAE;AAAA,aAAA,EAAA,EAF/C,GAAA,CAAI,KAGd,CACD,CAAA,EACH,CAAA,EACF;AAAA,WAAA,EACF,CAAA;AAAA,0BACAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0GAAA,EACb,YAAE,IAAA,EACL;AAAA,SAAA,EACF,CAAA;AAAA,uCACC,MAAA,EAAA,EAAK,SAAA,EAAU,qDAAA,EAAuD,QAAA,EAAA,GAAA,CAAI,KAAK,CAAA,EAAE;AAAA,OAAA,EACpF,CAAA;AAGF,MAAA,IAAI,EAAE,IAAA,EAAM;AACV,QAAA,uBACEA,cAAA;AAAA,UAAC,aAAA;AAAA,UAAA;AAAA,YAEC,MAAM,CAAA,CAAE,IAAA;AAAA,YACR,SAAA,EAAU,gIAAA;AAAA,YAET,QAAA,EAAA;AAAA,WAAA;AAAA,UAJI,CAAA,CAAE;AAAA,SAKT;AAAA,MAEJ;AACA,MAAA,sCACG,KAAA,EAAA,EAAiB,SAAA,EAAU,+BAAA,EACzB,QAAA,EAAA,OAAA,EAAA,EADO,EAAE,IAEZ,CAAA;AAAA,IAEJ,CAAC,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,OAAA,CAAQ,EAAE,QAAA,EAAS,EAA4B;AACtD,EAAA,6DAAU,QAAA,EAAS,CAAA;AACrB;;;;"}

package/dist/index.cjs.js

@@ -7,7 +7,7 @@ const Avatar = require('./Avatar-Y-1fas25.cjs');
 const Badge = require('./Badge-CuKV4oHH.cjs');
 const Breadcrumb = require('./Breadcrumb-BT_nzL3M.cjs');
 const Button = require('./Button-DpIX8JMz.cjs');
-const codeEditor = require('./code-editor-LhRB_wMh.cjs');
+const codeEditor = require('./code-editor-DVWPuq12.cjs');
 const highlight = require('./highlight-C2uRVhiA.cjs');
 const EmptyState = require('./EmptyState-vw7dhSKP.cjs');
 const Entity = require('./Entity-DALpbsRa.cjs');
@@ -21,15 +21,14 @@ const Txt = require('./Txt-Cmn4ug68.cjs');
 const alertDialog = require('./alert-dialog-DfQhrc2F.cjs');
 const checkbox = require('./checkbox-Bda6srNY.cjs');
 const collapsible = require('./collapsible-CDSgJ39O.cjs');
-const combobox = require('./combobox-B2TriE9Z.cjs');
-const multiCombobox = require('./multi-combobox-DkFLK64B.cjs');
+const combobox = require('./combobox-DQdRtI_v.cjs');
 const combobox$1 = require('@base-ui/react/combobox');
-const command = require('./command-D0tQ1Lpz.cjs');
+const command = require('./command-EI7t_0WS.cjs');
 const code = require('./code-B3WONxnA.cjs');
-const codeBlock = require('./code-block-C4Zp_ewI.cjs');
-const copyButton = require('./copy-button-BaAuAgdC.cjs');
+const codeBlock = require('./code-block-BPI6hA9o.cjs');
+const copyButton = require('./copy-button-ler9dH8g.cjs');
 const dashboardCard = require('./dashboard-card-B9enj4NG.cjs');
-const dialog = require('./dialog-46zkb32X.cjs');
+const dialog = require('./dialog-C0gOGKEK.cjs');
 const drawer = require('./drawer-DQDa97Ep.cjs');
 const dropdownMenu = require('./dropdown-menu-Vl_C0N5e.cjs');
 const entry = require('./entry-BwpOISbt.cjs');
@@ -44,13 +43,13 @@ const input = require('./input-DGvJg7no.cjs');
 const inputGroup = require('./input-group-Bi_4j-WW.cjs');
 const kbd = require('./kbd-CnIg1L19.cjs');
 const label = require('./label-U8omtW8w.cjs');
-const markdownRenderer = require('./markdown-renderer-DyUlVfRt.cjs');
+const markdownRenderer = require('./markdown-renderer-Dyg_1QXx.cjs');
 const metricsCard = require('./metrics-card-hs1pqY2Y.cjs');
 const metricsFlexGrid = require('./metrics-flex-grid-DzlyAgr7.cjs');
 const popover = require('./popover-B8RFw-D-.cjs');
-const propertyFilterCreator = require('./property-filter-creator-DU8pl6-6.cjs');
+const propertyFilterCreator = require('./property-filter-creator-CaG_zPdy.cjs');
 const radioGroup = require('./radio-group-CcZMn-TY.cjs');
-const scrollArea = require('./scroll-area-BqJfcT94.cjs');
+const scrollArea = require('./scroll-area-BtcyzOxO.cjs');
 const pendingIndicator = require('./pending-indicator-BxD-kwEk.cjs');
 const searchbar = require('./searchbar-8KtQRL0s.cjs');
 const select = require('./select-DDgw1wG-.cjs');
@@ -63,7 +62,7 @@ const _switch = require('./switch-DJRX_Onf.cjs');
 const themeProvider = require('./theme-provider-aO5-jZVp.cjs');
 const themeToggle = require('./theme-toggle-DWtjTo-a.cjs');
 const tooltip = require('./tooltip-j8gUR1Qk.cjs');
-const truncate = require('./truncate-RL2aHd1a.cjs');
+const truncate = require('./truncate-Csk5KmAy.cjs');
 const buttonsGroup = require('./buttons-group-BvLg2kpv.cjs');
 const mainContent = require('./main-content-CnmMWNin.cjs');
 const mainHeader = require('./main-header-DJLRceP9.cjs');
@@ -72,7 +71,7 @@ const dateTimePicker = require('./date-time-picker-Bjr6V3AR.cjs');
 const timePicker = require('./time-picker-DWrxHBfR.cjs');
 const components_JSONSchemaForm = require('./components/JSONSchemaForm.cjs.js');
 const keyValueList = require('./key-value-list-D067I300.cjs');
-const mainSidebar = require('./main-sidebar-Djs_3tGw.cjs');
+const mainSidebar = require('./main-sidebar-ByHmwU4R.cjs');
 const pageHeader = require('./page-header-C1ZlL4Ua.cjs');
 const section = require('./section-muObW4n-.cjs');
 const sectionCard = require('./section-card-23Os1QRs.cjs');
@@ -81,7 +80,7 @@ const tabsTab = require('./tabs-tab-CulV7e_n.cjs');
 const tabsContent = require('./tabs-content-m86TGI_b.cjs');
 const getShortId = require('./get-short-id-DtN4BmrD.cjs');
 const contentBlock = require('./content-block-Csb01oxE.cjs');
-const multiColumn = require('./multi-column-BzL86JPK.cjs');
+const multiColumn = require('./multi-column-BbVNPvhh.cjs');
 const codeDiff = require('./code-diff-C2vuR6Ti.cjs');
 const helpers = require('./helpers-BbJUaSrW.cjs');
 const Notice = require('./Notice-Mjo3MJi2.cjs');
@@ -89,35 +88,38 @@ const chip = require('./chip-Cx5D5DkA.cjs');
 const chipsGroup = require('./chips-group-CaxAKuxv.cjs');
 const tree = require('./tree-BcSHc5Cw.cjs');
 const selectDataFilter = require('./select-data-filter-DxoxTXk2.cjs');
-const tracesDataList = require('./traces-data-list-BPTKzaN6.cjs');
-const dataListSkeleton = require('./data-list-skeleton-COjCBzBF.cjs');
-const logsDataList = require('./logs-data-list-kzBMv1MW.cjs');
+const tracesDataList = require('./traces-data-list-BNmnKyDD.cjs');
+const dataListSkeleton = require('./data-list-skeleton-BlOwAki1.cjs');
+const logsDataList = require('./logs-data-list-3qmFjBz8.cjs');
 const noDataPageLayout = require('./no-data-page-layout-CiNBx-vK.cjs');
 const pageHeadingContext = require('./page-heading-context-Du-CpxAx.cjs');
 const listSearch = require('./list-search-DY84ZCM-.cjs');
 const ErrorBoundary = require('./ErrorBoundary-BqiUSXyJ.cjs');
 const ErrorState = require('./ErrorState-Dq9BVWmR.cjs');
 const Card = require('./Card-Xx0_PeuI.cjs');
-const dataCodeSection = require('./data-code-section-BtFzBCox.cjs');
+const dataCodeSection = require('./data-code-section-ChVXPz-i.cjs');
 const components_DataDetailsPanel = require('./components/DataDetailsPanel.cjs.js');
-const dataKeysAndValues = require('./data-keys-and-values-Spy2O_IE.cjs');
-const dataPanel = require('./data-panel-DToYF7cH.cjs');
+const dataKeysAndValues = require('./data-keys-and-values-KIwfkmc7.cjs');
+const dataPanel = require('./data-panel-DBxE_3ux.cjs');
 const dateTimeRangePicker = require('./date-time-range-picker-DjcVeD-Z.cjs');
-const horizontalBars = require('./horizontal-bars-C9qp4r47.cjs');
-const metricsDataTable = require('./metrics-data-table-D7vx2WEJ.cjs');
+const horizontalBars = require('./horizontal-bars-uPFpgihX.cjs');
+const metricsDataTable = require('./metrics-data-table-AjAA-dqH.cjs');
 const metricsLineChart = require('./metrics-line-chart-D1ZGVepo.cjs');
-const scrollableContainer = require('./scrollable-container-Btq-TfCL.cjs');
 const StatusBadge = require('./StatusBadge-DKtfODhH.cjs');
 const tokens = require('./tokens.cjs.js');
 const spacings = require('./spacings-BP8L49kn.cjs');
 const controlSize = require('./control-size-D67C0kPZ.cjs');
 const formElement = require('./form-element-Cy7aV1Ds.cjs');
 const transitions = require('./transitions-DpczSjmD.cjs');
-const useCopyToClipboard = require('./use-copy-to-clipboard-CQgIuR1c.cjs');
-const React = require('react');
+const hooks_useCopyToClipboard = require('./use-copy-to-clipboard-DHaJCGet.cjs');
+const hooks_useInView = require('./hooks/use-in-view.cjs.js');
+const hooks_useAutoscroll = require('./hooks/use-autoscroll.cjs.js');
+const hooks_useIsMobile = require('./hooks/use-is-mobile.cjs.js');
+const hooks_useKeyboardShortcutLabel = require('./hooks/use-keyboard-shortcut-label.cjs.js');
 const utils = require('./utils-vA5sWo9W.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
+const React = require('react');
 const reactResizablePanels = require('react-resizable-panels');
 const Icon = require('./Icon-C_Ooy-cP.cjs');
 const zustand = require('zustand');
@@ -1412,33 +1414,6 @@ const MetricsIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "
   )
 ] });
 
-const useInView = () => {
-  const [inView, setInView] = React.useState(false);
-  const setRef = React.useCallback((node) => {
-    if (node) {
-      const observer = new IntersectionObserver(([entry]) => {
-        setInView(entry.isIntersecting);
-      });
-      observer.observe(node);
-      return () => observer.disconnect();
-    }
-  }, []);
-  return { inView, setRef };
-};
-
-const useIsMobile = (breakpoint = 1024) => {
-  const query = React.useMemo(() => `(max-width: ${breakpoint - 1}px)`, [breakpoint]);
-  const [isMobile, setIsMobile] = React.useState(false);
-  React.useLayoutEffect(() => {
-    const mq = window.matchMedia(query);
-    const update = () => setIsMobile(mq.matches);
-    update();
-    mq.addEventListener("change", update);
-    return () => mq.removeEventListener("change", update);
-  }, [query]);
-  return isMobile;
-};
-
 const lodashTitleCase = (str) => {
   const camelCased = str.replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : "").replace(/^(.)/, (char) => char.toLowerCase());
   return camelCased.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase()).trim();
@@ -2550,10 +2525,48 @@ const EXTENSION_TO_MIME = {
   svg: "image/svg+xml",
   bmp: "image/bmp",
   ico: "image/x-icon",
-  pdf: "application/pdf"
+  pdf: "application/pdf",
+  // Video
+  mp4: "video/mp4",
+  mov: "video/quicktime",
+  webm: "video/webm",
+  mkv: "video/x-matroska",
+  avi: "video/x-msvideo",
+  mpeg: "video/mpeg",
+  mpg: "video/mpeg",
+  // Audio
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  oga: "audio/ogg",
+  m4a: "audio/mp4",
+  aac: "audio/aac",
+  flac: "audio/flac"
 };
 
+const BROWSER_FETCHABLE_SCHEMES = ["https://", "http://"];
+const NON_FETCHABLE_REMOTE_SCHEMES = ["gs://", "s3://"];
+const REMOTE_URL_SCHEMES = [...BROWSER_FETCHABLE_SCHEMES, ...NON_FETCHABLE_REMOTE_SCHEMES];
+const isRemoteUrl = (value) => REMOTE_URL_SCHEMES.some((scheme) => value.startsWith(scheme));
+const isBrowserFetchableUrl = (value) => BROWSER_FETCHABLE_SCHEMES.some((scheme) => value.startsWith(scheme));
+const isNonFetchableRemoteUrl = (value) => NON_FETCHABLE_REMOTE_SCHEMES.some((scheme) => value.startsWith(scheme));
+
+const contentTypeFromExtension = (url) => {
+  try {
+    const { pathname } = new URL(url);
+    const extension = pathname.split(".").pop();
+    if (!extension) return void 0;
+    return EXTENSION_TO_MIME[extension.toLowerCase()];
+  } catch {
+    const extension = url.split(".").pop()?.split(/[?#]/)[0];
+    if (!extension) return void 0;
+    return EXTENSION_TO_MIME[extension.toLowerCase()];
+  }
+};
 const getFileContentType = async (url) => {
+  if (NON_FETCHABLE_REMOTE_SCHEMES.some((scheme) => url.startsWith(scheme))) {
+    return contentTypeFromExtension(url);
+  }
   try {
     const response = await fetch(url, {
       method: "HEAD"
@@ -2567,17 +2580,7 @@ const getFileContentType = async (url) => {
     }
     return contentType;
   } catch {
-    try {
-      const urlObject = new URL(url);
-      const pathname = urlObject.pathname;
-      const extension = pathname.split(".").pop();
-      if (!extension) return void 0;
-      return EXTENSION_TO_MIME[extension.toLowerCase()];
-    } catch {
-      const extension = url.split(".").pop()?.split(/[?#]/)[0];
-      if (!extension) return void 0;
-      return EXTENSION_TO_MIME[extension.toLowerCase()];
-    }
+    return contentTypeFromExtension(url);
   }
 };
 
@@ -6056,7 +6059,7 @@ function useDownloadTraceJson() {
     if (isPending) return;
     setIsPending(true);
     const task = client.getTrace(traceId).then((trace) => downloadJson(`trace-${traceId}.json`, trace)).finally(() => setIsPending(false));
-    useCopyToClipboard.toast.promise({
+    hooks_useCopyToClipboard.toast.promise({
       myPromise: task,
       loadingMessage: "Preparing trace download…",
       successMessage: "Trace downloaded",
@@ -7108,7 +7111,7 @@ const useTraces = ({
   } = polling;
   const client = react.useMastraClient();
   const queryClient = reactQuery.useQueryClient();
-  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
+  const { inView: isEndOfListInView, setRef: setEndOfListElement } = hooks_useInView.useInView();
   const [deltaSupport, setDeltaSupport] = React.useState(() => deltaSupportByClient.get(client) ?? "unknown");
   const deltaUnsupported = deltaSupport === "unsupported";
   const [autoRefetch, setAutoRefetch] = React.useState(true);
@@ -7686,13 +7689,13 @@ function useTraceFilterPersistence(searchParams, setSearchParams, options) {
     saveTraceFiltersToStorage(searchParams, storageKey);
     setHasSavedFilters(true);
     const text = messages?.saved ?? DEFAULT_SAVED_MESSAGE$1;
-    if (text !== false) useCopyToClipboard.toast.success(text);
+    if (text !== false) hooks_useCopyToClipboard.toast.success(text);
   }, [searchParams, storageKey, messages?.saved]);
   const handleRemoveSaved = React.useCallback(() => {
     clearSavedTraceFilters(storageKey);
     setHasSavedFilters(false);
     const text = messages?.cleared ?? DEFAULT_CLEARED_MESSAGE$1;
-    if (text !== false) useCopyToClipboard.toast.success(text);
+    if (text !== false) hooks_useCopyToClipboard.toast.success(text);
   }, [storageKey, messages?.cleared]);
   const hydratedRef = React.useRef(false);
   React.useEffect(() => {
@@ -8105,7 +8108,7 @@ function selectLogs(data) {
 }
 const useLogs = ({ filters } = {}) => {
   const client = react.useMastraClient();
-  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
+  const { inView: isEndOfListInView, setRef: setEndOfListElement } = hooks_useInView.useInView();
   const query = reactQuery.useInfiniteQuery({
     queryKey: ["logs", filters],
     queryFn: ({ pageParam }) => client.listLogsVNext({
@@ -8326,13 +8329,13 @@ function useLogsFilterPersistence(searchParams, setSearchParams, options) {
     saveLogsFiltersToStorage(searchParams, storageKey);
     setHasSavedFilters(true);
     const text = messages?.saved ?? DEFAULT_SAVED_MESSAGE;
-    if (text !== false) useCopyToClipboard.toast.success(text);
+    if (text !== false) hooks_useCopyToClipboard.toast.success(text);
   }, [searchParams, storageKey, messages?.saved]);
   const handleRemoveSaved = React.useCallback(() => {
     clearSavedLogsFilters(storageKey);
     setHasSavedFilters(false);
     const text = messages?.cleared ?? DEFAULT_CLEARED_MESSAGE;
-    if (text !== false) useCopyToClipboard.toast.success(text);
+    if (text !== false) hooks_useCopyToClipboard.toast.success(text);
   }, [storageKey, messages?.cleared]);
   const hydratedRef = React.useRef(false);
   React.useEffect(() => {
@@ -8480,8 +8483,7 @@ exports.Collapsible = collapsible.Collapsible;
 exports.CollapsibleContent = collapsible.CollapsibleContent;
 exports.CollapsibleTrigger = collapsible.CollapsibleTrigger;
 exports.Combobox = combobox.Combobox;
-exports.MultiCombobox = multiCombobox.MultiCombobox;
-exports.comboboxStyles = multiCombobox.comboboxStyles;
+exports.comboboxStyles = combobox.comboboxStyles;
 Object.defineProperty(exports, "ComboboxPrimitive", {
   enumerable: true,
   get: () => combobox$1.Combobox
@@ -8565,7 +8567,6 @@ exports.RadioGroup = radioGroup.RadioGroup;
 exports.RadioGroupItem = radioGroup.RadioGroupItem;
 exports.ScrollArea = scrollArea.ScrollArea;
 exports.ScrollBar = scrollArea.ScrollBar;
-exports.useAutoscroll = scrollArea.useAutoscroll;
 exports.PendingIndicator = pendingIndicator.PendingIndicator;
 exports.Searchbar = searchbar.Searchbar;
 exports.SearchbarWrapper = searchbar.SearchbarWrapper;
@@ -8693,7 +8694,6 @@ exports.HorizontalBars = horizontalBars.HorizontalBars;
 exports.MetricsDataTable = metricsDataTable.MetricsDataTable;
 exports.MetricsLineChart = metricsLineChart.MetricsLineChart;
 exports.MetricsLineChartTooltip = metricsLineChart.MetricsLineChartTooltip;
-exports.ScrollableContainer = scrollableContainer.ScrollableContainer;
 exports.StatusBadge = StatusBadge.StatusBadge;
 exports.Animations = tokens.Animations;
 exports.BorderColors = spacings.BorderColors;
@@ -8720,9 +8720,14 @@ exports.unstyledFormElementStyle = formElement.unstyledFormElementStyle;
 exports.focusRing = transitions.focusRing;
 exports.hoverEffects = transitions.hoverEffects;
 exports.transitions = transitions.transitions;
-exports.Toaster = useCopyToClipboard.Toaster;
-exports.toast = useCopyToClipboard.toast;
-exports.useCopyToClipboard = useCopyToClipboard.useCopyToClipboard;
+exports.Toaster = hooks_useCopyToClipboard.Toaster;
+exports.toast = hooks_useCopyToClipboard.toast;
+exports.useCopyToClipboard = hooks_useCopyToClipboard.useCopyToClipboard;
+exports.useInView = hooks_useInView.useInView;
+exports.useAutoscroll = hooks_useAutoscroll.useAutoscroll;
+exports.useIsMobile = hooks_useIsMobile.useIsMobile;
+exports.useIsApplePlatform = hooks_useKeyboardShortcutLabel.useIsApplePlatform;
+exports.useKeyboardShortcutLabel = hooks_useKeyboardShortcutLabel.useKeyboardShortcutLabel;
 exports.cn = utils.cn;
 exports.Icon = Icon.Icon;
 exports.AgentCoinIcon = AgentCoinIcon;
@@ -8733,6 +8738,7 @@ exports.AnthropicChatIcon = AnthropicChatIcon;
 exports.AnthropicMessagesIcon = AnthropicMessagesIcon;
 exports.ApiIcon = ApiIcon;
 exports.AzureIcon = AzureIcon;
+exports.BROWSER_FETCHABLE_SCHEMES = BROWSER_FETCHABLE_SCHEMES;
 exports.BarListContent = BarListContent;
 exports.BranchIcon = BranchIcon;
 exports.CHART_COLORS = CHART_COLORS;
@@ -8794,6 +8800,7 @@ exports.MetricsIcon = MetricsIcon;
 exports.MetricsProvider = MetricsProvider;
 exports.MistralIcon = MistralIcon;
 exports.ModelUsageCostCardView = ModelUsageCostCardView;
+exports.NON_FETCHABLE_REMOTE_SCHEMES = NON_FETCHABLE_REMOTE_SCHEMES;
 exports.NetlifyIcon = NetlifyIcon;
 exports.NoLogsInfo = NoLogsInfo;
 exports.NoTracesInfo = NoTracesInfo;
@@ -8807,6 +8814,7 @@ exports.PanelDrawer = PanelDrawer;
 exports.PanelSeparator = PanelSeparator;
 exports.ProcessorIcon = ProcessorIcon;
 exports.PromptIcon = PromptIcon;
+exports.REMOTE_URL_SCHEMES = REMOTE_URL_SCHEMES;
 exports.ROOT_ENTITY_TYPES = ROOT_ENTITY_TYPES;
 exports.ROOT_ENTITY_TYPE_OPTIONS = ROOT_ENTITY_TYPE_OPTIONS;
 exports.RepoIcon = RepoIcon;
@@ -8909,8 +8917,11 @@ exports.is401UnauthorizedError = is401UnauthorizedError;
 exports.is403ForbiddenError = is403ForbiddenError;
 exports.is404NotFoundError = is404NotFoundError;
 exports.isBranchesNotSupportedError = isBranchesNotSupportedError;
+exports.isBrowserFetchableUrl = isBrowserFetchableUrl;
+exports.isNonFetchableRemoteUrl = isNonFetchableRemoteUrl;
 exports.isNonRetryableError = isNonRetryableError;
 exports.isObjectEmpty = isObjectEmpty;
+exports.isRemoteUrl = isRemoteUrl;
 exports.isRule = isRule;
 exports.isRuleGroup = isRuleGroup;
 exports.isTokenLimitExceeded = isTokenLimitExceeded;
@@ -8941,8 +8952,6 @@ exports.useDownloadTraceJson = useDownloadTraceJson;
 exports.useDrilldown = useDrilldown;
 exports.useEntityNames = useEntityNames;
 exports.useEnvironments = useEnvironments;
-exports.useInView = useInView;
-exports.useIsMobile = useIsMobile;
 exports.useLatencyMetrics = useLatencyMetrics;
 exports.useLogs = useLogs;
 exports.useLogsFilterPersistence = useLogsFilterPersistence;