@mastra/playground-ui 36.1.0-alpha.2 → 37.0.0-alpha.3

package/dist/scatter-plot-chart-CFZO31md.cjs

@@ -0,0 +1,169 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const recharts = require('recharts');
+const spacings = require('./spacings-BP8L49kn.cjs');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+function ScatterPlotChartTooltip({
+  active,
+  payload,
+  xKey,
+  yKey,
+  nameKey,
+  formatX,
+  formatY,
+  formatTooltipLabel
+}) {
+  const point = payload?.[0]?.payload;
+  if (!active || !point) return null;
+  const label = formatTooltipLabel?.(point) ?? (nameKey ? point[nameKey] : void 0);
+  const xValue = point[xKey];
+  const yValue = point[yKey];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg", children: [
+    label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-medium text-icon6", children: String(label) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1 text-icon2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral3", children: "X:" }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: formatX ? formatX(xValue, point) : String(xValue) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral3", children: "Y:" }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: formatY ? formatY(yValue, point) : String(yValue) })
+      ] })
+    ] })
+  ] });
+}
+
+function getScatterPlotPointColor(point, colorKey) {
+  const color = colorKey ? point[colorKey] : void 0;
+  return typeof color === "string" && color.length > 0 ? color : spacings.Colors.accent3;
+}
+function getScatterPlotClickedPoint(payload) {
+  return payload?.payload;
+}
+function formatScatterPlotAxisTick(value, formatter) {
+  return (formatter?.(value, {}) ?? String(value)).replace(/\s+/g, " ");
+}
+
+const LABEL_COLOR = "#a1a1aa";
+const DEFAULT_POINT_SIZE = 48;
+const CHART_MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };
+function ScatterPlotChart({
+  data,
+  xKey,
+  yKey,
+  nameKey,
+  colorKey,
+  height = 210,
+  xLabel,
+  yLabel,
+  xDomain,
+  yDomain,
+  formatX,
+  formatY,
+  formatTooltipLabel,
+  onPointClick,
+  className
+}) {
+  const isClickable = typeof onPointClick === "function";
+  const fillsContainer = height === "100%";
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils_cn.cn(
+          "flex items-center justify-center rounded-md border border-border1 text-ui-sm text-neutral3",
+          className
+        ),
+        style: { height },
+        children: "No data to display"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(fillsContainer && "flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(fillsContainer && "min-h-0 flex-1"), style: { height: fillsContainer ? void 0 : height }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { data, margin: CHART_MARGIN, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { stroke: spacings.Colors.neutral3, strokeDasharray: "4 4", strokeOpacity: 0.18, vertical: false }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.XAxis,
+      {
+        dataKey: xKey,
+        name: xLabel,
+        type: "number",
+        tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+        tickLine: false,
+        axisLine: false,
+        domain: xDomain,
+        tickFormatter: (value) => formatScatterPlotAxisTick(value, formatX)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.YAxis,
+      {
+        dataKey: yKey,
+        name: yLabel,
+        type: "number",
+        tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+        tickLine: false,
+        axisLine: false,
+        width: 44,
+        domain: yDomain,
+        tickFormatter: (value) => formatScatterPlotAxisTick(value, formatY)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.ZAxis, { range: [DEFAULT_POINT_SIZE, DEFAULT_POINT_SIZE] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Tooltip,
+      {
+        cursor: { stroke: spacings.Colors.neutral3, strokeOpacity: 0.16 },
+        content: /* @__PURE__ */ jsxRuntime.jsx(
+          ScatterPlotChartTooltip,
+          {
+            xKey,
+            yKey,
+            nameKey,
+            formatX,
+            formatY,
+            formatTooltipLabel
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Scatter,
+      {
+        data,
+        fill: spacings.Colors.accent3,
+        shape: (props) => {
+          const point = props.payload ?? {};
+          const cx = props.cx;
+          const cy = props.cy;
+          if (typeof cx !== "number" || typeof cy !== "number") return /* @__PURE__ */ jsxRuntime.jsx("g", {});
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 4,
+              fill: getScatterPlotPointColor(point, colorKey),
+              opacity: 0.9,
+              style: { cursor: isClickable ? "pointer" : void 0 }
+            }
+          );
+        },
+        onClick: (_, payload) => {
+          const point = getScatterPlotClickedPoint(payload);
+          if (point) onPointClick?.(point);
+        }
+      }
+    )
+  ] }) }) }) });
+}
+
+exports.ScatterPlotChart = ScatterPlotChart;
+exports.ScatterPlotChartTooltip = ScatterPlotChartTooltip;
+exports.formatScatterPlotAxisTick = formatScatterPlotAxisTick;
+exports.getScatterPlotClickedPoint = getScatterPlotClickedPoint;
+exports.getScatterPlotPointColor = getScatterPlotPointColor;
+//# sourceMappingURL=scatter-plot-chart-CFZO31md.cjs.map

package/dist/scatter-plot-chart-CFZO31md.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-plot-chart-CFZO31md.cjs","sources":["../src/ds/components/ScatterPlotChart/scatter-plot-chart-tooltip.tsx","../src/ds/components/ScatterPlotChart/scatter-plot-chart-utils.ts","../src/ds/components/ScatterPlotChart/scatter-plot-chart.tsx"],"sourcesContent":["import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\n\ntype ScatterTooltipPayload = Array<{\n  color?: string;\n  payload?: Record<string, unknown>;\n}>;\n\nexport function ScatterPlotChartTooltip({\n  active,\n  payload,\n  xKey,\n  yKey,\n  nameKey,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n}: {\n  active?: boolean;\n  payload?: ScatterTooltipPayload;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n}) {\n  const point = payload?.[0]?.payload;\n  if (!active || !point) return null;\n\n  const label = formatTooltipLabel?.(point) ?? (nameKey ? point[nameKey] : undefined);\n  const xValue = point[xKey];\n  const yValue = point[yKey];\n\n  return (\n    <div className=\"rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg\">\n      {label !== undefined && <p className=\"mb-1 font-medium text-icon6\">{String(label)}</p>}\n      <div className=\"grid gap-1 text-icon2\">\n        <p>\n          <span className=\"text-neutral3\">X:</span>{' '}\n          <span className=\"font-mono\">{formatX ? formatX(xValue, point) : String(xValue)}</span>\n        </p>\n        <p>\n          <span className=\"text-neutral3\">Y:</span>{' '}\n          <span className=\"font-mono\">{formatY ? formatY(yValue, point) : String(yValue)}</span>\n        </p>\n      </div>\n    </div>\n  );\n}\n","import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\nimport { Colors } from '@/ds/tokens';\n\nexport function getScatterPlotPointColor(point: Record<string, unknown>, colorKey?: string) {\n  const color = colorKey ? point[colorKey] : undefined;\n  return typeof color === 'string' && color.length > 0 ? color : Colors.accent3;\n}\n\nexport function getScatterPlotClickedPoint(payload: unknown) {\n  return (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n}\n\nexport function formatScatterPlotAxisTick(value: unknown, formatter?: ScatterPlotChartFormatter) {\n  return (formatter?.(value, {}) ?? String(value)).replace(/\\s+/g, '\\u00A0');\n}\n","import { CartesianGrid, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZAxis } from 'recharts';\nimport { ScatterPlotChartTooltip } from './scatter-plot-chart-tooltip';\nimport {\n  formatScatterPlotAxisTick,\n  getScatterPlotClickedPoint,\n  getScatterPlotPointColor,\n} from './scatter-plot-chart-utils';\nimport { Colors } from '@/ds/tokens';\nimport { cn } from '@/lib/utils';\n\nconst LABEL_COLOR = '#a1a1aa';\nconst DEFAULT_POINT_SIZE = 48;\nconst CHART_MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };\n\nexport type ScatterPlotChartDomain = [number | 'auto', number | 'auto'];\nexport type ScatterPlotChartFormatter = (value: unknown, point: Record<string, unknown>) => string;\nexport type ScatterPlotChartPointClickHandler = (point: Record<string, unknown>) => void;\n\nexport type ScatterPlotChartProps = {\n  data: Array<Record<string, unknown>>;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  colorKey?: string;\n  height?: React.CSSProperties['height'];\n  xLabel?: string;\n  yLabel?: string;\n  xDomain?: ScatterPlotChartDomain;\n  yDomain?: ScatterPlotChartDomain;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n  onPointClick?: ScatterPlotChartPointClickHandler;\n  className?: string;\n};\n\nexport function ScatterPlotChart({\n  data,\n  xKey,\n  yKey,\n  nameKey,\n  colorKey,\n  height = 210,\n  xLabel,\n  yLabel,\n  xDomain,\n  yDomain,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n  onPointClick,\n  className,\n}: ScatterPlotChartProps) {\n  const isClickable = typeof onPointClick === 'function';\n  const fillsContainer = height === '100%';\n\n  if (data.length === 0) {\n    return (\n      <div\n        className={cn(\n          'flex items-center justify-center rounded-md border border-border1 text-ui-sm text-neutral3',\n          className,\n        )}\n        style={{ height }}\n      >\n        No data to display\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(fillsContainer && 'flex h-full min-h-0 flex-col', className)}>\n      <div className={cn(fillsContainer && 'min-h-0 flex-1')} style={{ height: fillsContainer ? undefined : height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ScatterChart data={data} margin={CHART_MARGIN}>\n            <CartesianGrid stroke={Colors.neutral3} strokeDasharray=\"4 4\" strokeOpacity={0.18} vertical={false} />\n            <XAxis\n              dataKey={xKey}\n              name={xLabel}\n              type=\"number\"\n              tick={{ fontSize: 10, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              domain={xDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatX)}\n            />\n            <YAxis\n              dataKey={yKey}\n              name={yLabel}\n              type=\"number\"\n              tick={{ fontSize: 10, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width={44}\n              domain={yDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatY)}\n            />\n            <ZAxis range={[DEFAULT_POINT_SIZE, DEFAULT_POINT_SIZE]} />\n            <Tooltip\n              cursor={{ stroke: Colors.neutral3, strokeOpacity: 0.16 }}\n              content={\n                <ScatterPlotChartTooltip\n                  xKey={xKey}\n                  yKey={yKey}\n                  nameKey={nameKey}\n                  formatX={formatX}\n                  formatY={formatY}\n                  formatTooltipLabel={formatTooltipLabel}\n                />\n              }\n            />\n            <Scatter\n              data={data}\n              fill={Colors.accent3}\n              shape={(props: unknown) => {\n                const point = (props as { payload?: Record<string, unknown> }).payload ?? {};\n                const cx = (props as { cx?: number }).cx;\n                const cy = (props as { cy?: number }).cy;\n                if (typeof cx !== 'number' || typeof cy !== 'number') return <g />;\n                return (\n                  <circle\n                    cx={cx}\n                    cy={cy}\n                    r={4}\n                    fill={getScatterPlotPointColor(point, colorKey)}\n                    opacity={0.9}\n                    style={{ cursor: isClickable ? 'pointer' : undefined }}\n                  />\n                );\n              }}\n              onClick={(_: unknown, payload: unknown) => {\n                const point = getScatterPlotClickedPoint(payload);\n                if (point) onPointClick?.(point);\n              }}\n            />\n          </ScatterChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","Colors","cn","ResponsiveContainer","ScatterChart","CartesianGrid","XAxis","YAxis","ZAxis","Tooltip","Scatter"],"mappings":"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"}

package/dist/scroll-area-0KvrrVBh.cjs

@@ -0,0 +1,243 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const scrollArea = require('@base-ui/react/scroll-area');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const hooks_useAutoscroll = require('./hooks/use-autoscroll.cjs.js');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const DEFAULT_SCROLL_BUTTON_SPEED = 100;
+const DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;
+const MIN_SCROLL_BUTTON_SPEED = 1;
+const MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;
+function resolveMask(mask, orientation) {
+  if (mask === false) return { top: false, bottom: false, left: false, right: false };
+  const vertical = orientation === "vertical" || orientation === "both";
+  const horizontal = orientation === "horizontal" || orientation === "both";
+  const sides = { top: vertical, bottom: vertical, left: horizontal, right: horizontal };
+  if (mask === true || mask === void 0) return sides;
+  if (mask.y !== void 0) {
+    sides.top = mask.y;
+    sides.bottom = mask.y;
+  }
+  if (mask.x !== void 0) {
+    sides.left = mask.x;
+    sides.right = mask.x;
+  }
+  if (mask.top !== void 0) sides.top = mask.top;
+  if (mask.bottom !== void 0) sides.bottom = mask.bottom;
+  if (mask.left !== void 0) sides.left = mask.left;
+  if (mask.right !== void 0) sides.right = mask.right;
+  return sides;
+}
+function maskClasses(sides) {
+  return utils_cn.cn(
+    sides.top && "data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)]",
+    sides.bottom && "data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)]",
+    sides.left && "data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)]",
+    sides.right && "data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]"
+  );
+}
+function clampScrollButtonNumber(value, fallback, min) {
+  const resolvedValue = value ?? fallback;
+  return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);
+}
+const ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }) => {
+  const Icon = direction === "left" ? lucideReact.ChevronLeftIcon : lucideReact.ChevronRightIcon;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      className: utils_cn.cn(
+        "absolute top-1 bottom-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-neutral3 transition-colors duration-normal ease-out-custom hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10",
+        "outline-hidden focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
+        direction === "left" ? "left-1 group-data-[overflow-x-start]/scroll-area:flex" : "right-1 group-data-[overflow-x-end]/scroll-area:flex"
+      ),
+      onPointerDown: (event) => onStartScrolling(direction, event),
+      onPointerUp: onStopScrolling,
+      onPointerLeave: onStopScrolling,
+      onPointerCancel: onStopScrolling,
+      onBlur: onStopScrolling,
+      onClick: (event) => {
+        if (event.detail === 0) onKeyboardScroll(direction);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+};
+const ScrollButtons = ({ areaRef, scrollButtons }) => {
+  const scrollButtonInterval = React__namespace.useRef(null);
+  const scrollButtonOptions = typeof scrollButtons === "object" ? scrollButtons : void 0;
+  const scrollButtonSpeed = clampScrollButtonNumber(
+    scrollButtonOptions?.scrollSpeed,
+    DEFAULT_SCROLL_BUTTON_SPEED,
+    MIN_SCROLL_BUTTON_SPEED
+  );
+  const scrollButtonIntervalTime = clampScrollButtonNumber(
+    scrollButtonOptions?.scrollIntervalTime,
+    DEFAULT_SCROLL_BUTTON_INTERVAL_TIME,
+    MIN_SCROLL_BUTTON_INTERVAL_TIME
+  );
+  const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? "Scroll left";
+  const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? "Scroll right";
+  const stopScrollButtonScrolling = React__namespace.useCallback(() => {
+    if (!scrollButtonInterval.current) return;
+    clearInterval(scrollButtonInterval.current);
+    scrollButtonInterval.current = null;
+  }, []);
+  const scrollByDirection = React__namespace.useCallback(
+    (direction, multiplier = 1) => {
+      const viewport = areaRef.current;
+      if (!viewport) return;
+      viewport.scrollBy({
+        left: direction === "right" ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,
+        behavior: "smooth"
+      });
+    },
+    [areaRef, scrollButtonSpeed]
+  );
+  const startScrollButtonScrolling = React__namespace.useCallback(
+    (direction, event) => {
+      event?.preventDefault();
+      event?.stopPropagation();
+      event?.currentTarget.setPointerCapture?.(event.pointerId);
+      stopScrollButtonScrolling();
+      scrollByDirection(direction, 2);
+      scrollButtonInterval.current = setInterval(() => {
+        scrollByDirection(direction);
+      }, scrollButtonIntervalTime);
+    },
+    [scrollButtonIntervalTime, scrollByDirection, stopScrollButtonScrolling]
+  );
+  React__namespace.useEffect(() => {
+    return () => {
+      stopScrollButtonScrolling();
+    };
+  }, [stopScrollButtonScrolling]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollButton,
+      {
+        direction: "left",
+        label: leftScrollButtonLabel,
+        onStartScrolling: startScrollButtonScrolling,
+        onStopScrolling: stopScrollButtonScrolling,
+        onKeyboardScroll: (direction) => scrollByDirection(direction, 2)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollButton,
+      {
+        direction: "right",
+        label: rightScrollButtonLabel,
+        onStartScrolling: startScrollButtonScrolling,
+        onStopScrolling: stopScrollButtonScrolling,
+        onKeyboardScroll: (direction) => scrollByDirection(direction, 2)
+      }
+    )
+  ] });
+};
+const ScrollArea = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    viewPortClassName,
+    maxHeight,
+    autoScroll = false,
+    orientation = "vertical",
+    scrollButtons,
+    mask,
+    showMask,
+    viewportRef,
+    ...props
+  }, ref) => {
+    const areaRef = React__namespace.useRef(null);
+    hooks_useAutoscroll.useAutoscroll(areaRef, { enabled: autoScroll });
+    const setViewportRef = React__namespace.useCallback(
+      (node) => {
+        areaRef.current = node;
+        if (typeof viewportRef === "function") viewportRef(node);
+        else if (viewportRef) viewportRef.current = node;
+      },
+      [viewportRef]
+    );
+    const effectiveMask = mask !== void 0 ? mask : showMask;
+    const sides = resolveMask(effectiveMask, orientation);
+    const viewportStyle = {};
+    if (maxHeight) viewportStyle.maxHeight = maxHeight;
+    if (orientation === "vertical") {
+      viewportStyle.overflowX = "hidden";
+      viewportStyle.overflowY = "scroll";
+    } else if (orientation === "horizontal") {
+      viewportStyle.overflowX = "scroll";
+      viewportStyle.overflowY = "hidden";
+    }
+    const contentStyle = orientation === "vertical" ? { minWidth: "0px" } : orientation === "horizontal" ? { minHeight: "0px" } : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      scrollArea.ScrollArea.Root,
+      {
+        ref,
+        className: utils_cn.cn("group/scroll-area relative overflow-hidden", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            scrollArea.ScrollArea.Viewport,
+            {
+              ref: setViewportRef,
+              className: utils_cn.cn("h-full w-full rounded-[inherit]", maskClasses(sides), viewPortClassName),
+              style: viewportStyle,
+              children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea.Content, { style: contentStyle, children })
+            }
+          ),
+          scrollButtons && orientation !== "vertical" && /* @__PURE__ */ jsxRuntime.jsx(ScrollButtons, { areaRef, scrollButtons }),
+          (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "vertical" }),
+          (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "horizontal" }),
+          orientation === "both" && /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea.Corner, {})
+        ]
+      }
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+const ScrollBar = React__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  scrollArea.ScrollArea.Scrollbar,
+  {
+    ref,
+    orientation,
+    className: utils_cn.cn(
+      "flex touch-none select-none transition-opacity duration-normal ease-out-custom",
+      "opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0",
+      orientation === "vertical" && "h-full w-1.5 p-px",
+      orientation === "horizontal" && "h-1.5 w-full flex-col p-px",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal" })
+  }
+));
+ScrollBar.displayName = "ScrollBar";
+
+exports.ScrollArea = ScrollArea;
+exports.ScrollBar = ScrollBar;
+//# sourceMappingURL=scroll-area-0KvrrVBh.cjs.map

package/dist/scroll-area-0KvrrVBh.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-0KvrrVBh.cjs","sources":["../src/ds/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'vertical' | 'horizontal' | 'both';\ntype ScrollButtonDirection = 'left' | 'right';\n\nconst DEFAULT_SCROLL_BUTTON_SPEED = 100;\nconst DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;\nconst MIN_SCROLL_BUTTON_SPEED = 1;\nconst MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;\n\nexport type MaskSides = {\n  top?: boolean;\n  bottom?: boolean;\n  left?: boolean;\n  right?: boolean;\n  /** Shorthand: sets both `left` and `right`. Per-side keys override. */\n  x?: boolean;\n  /** Shorthand: sets both `top` and `bottom`. Per-side keys override. */\n  y?: boolean;\n};\n\n/**\n * - `true` / omitted: fade the edges that match `orientation`.\n * - `false`: no fade.\n * - object: per-side override on top of the orientation default.\n */\nexport type ScrollAreaMask = boolean | MaskSides;\n\nexport type ScrollAreaScrollButtons =\n  | boolean\n  | {\n      /** Pixels to scroll per repeated interval. */\n      scrollSpeed?: number;\n      /** Milliseconds between repeated scroll steps while the button is held. */\n      scrollIntervalTime?: number;\n      leftLabel?: string;\n      rightLabel?: string;\n    };\n\nexport type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n  viewPortClassName?: string;\n  maxHeight?: string;\n  autoScroll?: boolean;\n  orientation?: Orientation;\n  /** Show left/right controls for horizontal overflow. Only applies to `horizontal` and `both` orientations. */\n  scrollButtons?: ScrollAreaScrollButtons;\n  /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */\n  mask?: ScrollAreaMask;\n  /** @deprecated Use `mask` instead. Retained for backward compatibility. */\n  showMask?: boolean;\n  /**\n   * Ref to the scrolling viewport element. Use this as the scroll element for a\n   * virtualizer (`getScrollElement: () => viewportRef.current`) so the list can\n   * virtualize while still using the ScrollArea's overlay scrollbar + masks.\n   */\n  viewportRef?: React.Ref<HTMLDivElement>;\n};\n\ntype ResolvedMask = { top: boolean; bottom: boolean; left: boolean; right: boolean };\n\nfunction resolveMask(mask: ScrollAreaMask | undefined, orientation: Orientation): ResolvedMask {\n  if (mask === false) return { top: false, bottom: false, left: false, right: false };\n\n  const vertical = orientation === 'vertical' || orientation === 'both';\n  const horizontal = orientation === 'horizontal' || orientation === 'both';\n  const sides: ResolvedMask = { top: vertical, bottom: vertical, left: horizontal, right: horizontal };\n\n  if (mask === true || mask === undefined) return sides;\n\n  if (mask.y !== undefined) {\n    sides.top = mask.y;\n    sides.bottom = mask.y;\n  }\n  if (mask.x !== undefined) {\n    sides.left = mask.x;\n    sides.right = mask.x;\n  }\n  if (mask.top !== undefined) sides.top = mask.top;\n  if (mask.bottom !== undefined) sides.bottom = mask.bottom;\n  if (mask.left !== undefined) sides.left = mask.left;\n  if (mask.right !== undefined) sides.right = mask.right;\n\n  return sides;\n}\n\nfunction maskClasses(sides: ResolvedMask) {\n  return cn(\n    sides.top && 'data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)]',\n    sides.bottom && 'data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)]',\n    sides.left && 'data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)]',\n    sides.right && 'data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]',\n  );\n}\n\nfunction clampScrollButtonNumber(value: number | undefined, fallback: number, min: number) {\n  const resolvedValue = value ?? fallback;\n  return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);\n}\n\ntype ScrollButtonProps = {\n  direction: ScrollButtonDirection;\n  label: string;\n  onStartScrolling: (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => void;\n  onStopScrolling: () => void;\n  onKeyboardScroll: (direction: ScrollButtonDirection) => void;\n};\n\nconst ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }: ScrollButtonProps) => {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        'absolute top-1 bottom-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-neutral3 transition-colors duration-normal ease-out-custom hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10',\n        'outline-hidden focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55',\n        direction === 'left'\n          ? 'left-1 group-data-[overflow-x-start]/scroll-area:flex'\n          : 'right-1 group-data-[overflow-x-end]/scroll-area:flex',\n      )}\n      onPointerDown={event => onStartScrolling(direction, event)}\n      onPointerUp={onStopScrolling}\n      onPointerLeave={onStopScrolling}\n      onPointerCancel={onStopScrolling}\n      onBlur={onStopScrolling}\n      onClick={event => {\n        if (event.detail === 0) onKeyboardScroll(direction);\n      }}\n    >\n      <Icon aria-hidden=\"true\" className=\"size-4\" />\n    </button>\n  );\n};\n\ntype ScrollButtonsProps = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  scrollButtons: Exclude<ScrollAreaScrollButtons, false | undefined>;\n};\n\nconst ScrollButtons = ({ areaRef, scrollButtons }: ScrollButtonsProps) => {\n  const scrollButtonInterval = React.useRef<ReturnType<typeof setInterval> | null>(null);\n  const scrollButtonOptions = typeof scrollButtons === 'object' ? scrollButtons : undefined;\n  const scrollButtonSpeed = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollSpeed,\n    DEFAULT_SCROLL_BUTTON_SPEED,\n    MIN_SCROLL_BUTTON_SPEED,\n  );\n  const scrollButtonIntervalTime = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollIntervalTime,\n    DEFAULT_SCROLL_BUTTON_INTERVAL_TIME,\n    MIN_SCROLL_BUTTON_INTERVAL_TIME,\n  );\n  const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? 'Scroll left';\n  const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? 'Scroll right';\n\n  const stopScrollButtonScrolling = React.useCallback(() => {\n    if (!scrollButtonInterval.current) return;\n    clearInterval(scrollButtonInterval.current);\n    scrollButtonInterval.current = null;\n  }, []);\n\n  const scrollByDirection = React.useCallback(\n    (direction: ScrollButtonDirection, multiplier = 1) => {\n      const viewport = areaRef.current;\n      if (!viewport) return;\n\n      viewport.scrollBy({\n        left: direction === 'right' ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,\n        behavior: 'smooth',\n      });\n    },\n    [areaRef, scrollButtonSpeed],\n  );\n\n  const startScrollButtonScrolling = React.useCallback(\n    (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      event?.currentTarget.setPointerCapture?.(event.pointerId);\n\n      stopScrollButtonScrolling();\n      scrollByDirection(direction, 2);\n\n      scrollButtonInterval.current = setInterval(() => {\n        scrollByDirection(direction);\n      }, scrollButtonIntervalTime);\n    },\n    [scrollButtonIntervalTime, scrollByDirection, stopScrollButtonScrolling],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      stopScrollButtonScrolling();\n    };\n  }, [stopScrollButtonScrolling]);\n\n  return (\n    <>\n      <ScrollButton\n        direction=\"left\"\n        label={leftScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n      <ScrollButton\n        direction=\"right\"\n        label={rightScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n    </>\n  );\n};\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      className,\n      children,\n      viewPortClassName,\n      maxHeight,\n      autoScroll = false,\n      orientation = 'vertical',\n      scrollButtons,\n      mask,\n      showMask,\n      viewportRef,\n      ...props\n    },\n    ref,\n  ) => {\n    const areaRef = React.useRef<HTMLDivElement>(null);\n    useAutoscroll(areaRef, { enabled: autoScroll });\n\n    // Keep the internal autoscroll ref while also exposing the viewport to callers\n    // (e.g. a virtualizer's scroll element).\n    const setViewportRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        areaRef.current = node;\n        if (typeof viewportRef === 'function') viewportRef(node);\n        else if (viewportRef) (viewportRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      },\n      [viewportRef],\n    );\n\n    const effectiveMask: ScrollAreaMask | undefined = mask !== undefined ? mask : showMask;\n    const sides = resolveMask(effectiveMask, orientation);\n\n    const viewportStyle: React.CSSProperties = {};\n    if (maxHeight) viewportStyle.maxHeight = maxHeight;\n    if (orientation === 'vertical') {\n      viewportStyle.overflowX = 'hidden';\n      viewportStyle.overflowY = 'scroll';\n    } else if (orientation === 'horizontal') {\n      viewportStyle.overflowX = 'scroll';\n      viewportStyle.overflowY = 'hidden';\n    }\n\n    // Base UI's ScrollAreaContent forces `min-width: fit-content` so the\n    // content can grow wider than the viewport (required for horizontal scroll\n    // measurement). For vertical-only scroll we override it so children shrink\n    // to the viewport width instead of forcing horizontal scroll.\n    const contentStyle: React.CSSProperties | undefined =\n      orientation === 'vertical'\n        ? { minWidth: '0px' }\n        : orientation === 'horizontal'\n          ? { minHeight: '0px' }\n          : undefined;\n\n    return (\n      <ScrollAreaPrimitive.Root\n        ref={ref}\n        className={cn('group/scroll-area relative overflow-hidden', className)}\n        {...props}\n      >\n        <ScrollAreaPrimitive.Viewport\n          ref={setViewportRef}\n          className={cn('h-full w-full rounded-[inherit]', maskClasses(sides), viewPortClassName)}\n          style={viewportStyle}\n        >\n          <ScrollAreaPrimitive.Content style={contentStyle}>{children}</ScrollAreaPrimitive.Content>\n        </ScrollAreaPrimitive.Viewport>\n        {scrollButtons && orientation !== 'vertical' && (\n          <ScrollButtons areaRef={areaRef} scrollButtons={scrollButtons} />\n        )}\n        {(orientation === 'vertical' || orientation === 'both') && <ScrollBar orientation=\"vertical\" />}\n        {(orientation === 'horizontal' || orientation === 'both') && <ScrollBar orientation=\"horizontal\" />}\n        {orientation === 'both' && <ScrollAreaPrimitive.Corner />}\n      </ScrollAreaPrimitive.Root>\n    );\n  },\n);\nScrollArea.displayName = 'ScrollArea';\n\nconst ScrollBar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.Scrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'flex touch-none select-none transition-opacity duration-normal ease-out-custom',\n      'opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0',\n      orientation === 'vertical' && 'h-full w-1.5 p-px',\n      orientation === 'horizontal' && 'h-1.5 w-full flex-col p-px',\n      className,\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Thumb className=\"relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal\" />\n  </ScrollAreaPrimitive.Scrollbar>\n));\nScrollBar.displayName = 'ScrollBar';\n\nexport { ScrollArea, ScrollBar };\n"],"names":["cn","ChevronLeftIcon","ChevronRightIcon","jsx","React","jsxs","Fragment","useAutoscroll","ScrollAreaPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,2BAAA,GAA8B,GAAA;AACpC,MAAM,mCAAA,GAAsC,EAAA;AAC5C,MAAM,uBAAA,GAA0B,CAAA;AAChC,MAAM,+BAAA,GAAkC,EAAA;AAoDxC,SAAS,WAAA,CAAY,MAAkC,WAAA,EAAwC;AAC7F,EAAA,IAAI,IAAA,KAAS,KAAA,EAAO,OAAO,EAAE,GAAA,EAAK,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAO,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,KAAA,EAAM;AAElF,EAAA,MAAM,QAAA,GAAW,WAAA,KAAgB,UAAA,IAAc,WAAA,KAAgB,MAAA;AAC/D,EAAA,MAAM,UAAA,GAAa,WAAA,KAAgB,YAAA,IAAgB,WAAA,KAAgB,MAAA;AACnE,EAAA,MAAM,KAAA,GAAsB,EAAE,GAAA,EAAK,QAAA,EAAU,QAAQ,QAAA,EAAU,IAAA,EAAM,UAAA,EAAY,KAAA,EAAO,UAAA,EAAW;AAEnG,EAAA,IAAI,IAAA,KAAS,IAAA,IAAQ,IAAA,KAAS,MAAA,EAAW,OAAO,KAAA;AAEhD,EAAA,IAAI,IAAA,CAAK,MAAM,MAAA,EAAW;AACxB,IAAA,KAAA,CAAM,MAAM,IAAA,CAAK,CAAA;AACjB,IAAA,KAAA,CAAM,SAAS,IAAA,CAAK,CAAA;AAAA,EACtB;AACA,EAAA,IAAI,IAAA,CAAK,MAAM,MAAA,EAAW;AACxB,IAAA,KAAA,CAAM,OAAO,IAAA,CAAK,CAAA;AAClB,IAAA,KAAA,CAAM,QAAQ,IAAA,CAAK,CAAA;AAAA,EACrB;AACA,EAAA,IAAI,IAAA,CAAK,GAAA,KAAQ,MAAA,EAAW,KAAA,CAAM,MAAM,IAAA,CAAK,GAAA;AAC7C,EAAA,IAAI,IAAA,CAAK,MAAA,KAAW,MAAA,EAAW,KAAA,CAAM,SAAS,IAAA,CAAK,MAAA;AACnD,EAAA,IAAI,IAAA,CAAK,IAAA,KAAS,MAAA,EAAW,KAAA,CAAM,OAAO,IAAA,CAAK,IAAA;AAC/C,EAAA,IAAI,IAAA,CAAK,KAAA,KAAU,MAAA,EAAW,KAAA,CAAM,QAAQ,IAAA,CAAK,KAAA;AAEjD,EAAA,OAAO,KAAA;AACT;AAEA,SAAS,YAAY,KAAA,EAAqB;AACxC,EAAA,OAAOA,WAAA;AAAA,IACL,MAAM,GAAA,IAAO,uDAAA;AAAA,IACb,MAAM,MAAA,IAAU,qDAAA;AAAA,IAChB,MAAM,IAAA,IAAQ,uDAAA;AAAA,IACd,MAAM,KAAA,IAAS;AAAA,GACjB;AACF;AAEA,SAAS,uBAAA,CAAwB,KAAA,EAA2B,QAAA,EAAkB,GAAA,EAAa;AACzF,EAAA,MAAM,gBAAgB,KAAA,IAAS,QAAA;AAC/B,EAAA,OAAO,MAAA,CAAO,QAAA,CAAS,aAAa,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,aAAa,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,QAAQ,CAAA;AAC/F;AAUA,MAAM,YAAA,GAAe,CAAC,EAAE,SAAA,EAAW,OAAO,gBAAA,EAAkB,eAAA,EAAiB,kBAAiB,KAAyB;AACrH,EAAA,MAAM,IAAA,GAAO,SAAA,KAAc,MAAA,GAASC,2BAAA,GAAkBC,4BAAA;AAEtD,EAAA,uBACEC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAWH,WAAA;AAAA,QACT,qPAAA;AAAA,QACA,+HAAA;AAAA,QACA,SAAA,KAAc,SACV,uDAAA,GACA;AAAA,OACN;AAAA,MACA,aAAA,EAAe,CAAA,KAAA,KAAS,gBAAA,CAAiB,SAAA,EAAW,KAAK,CAAA;AAAA,MACzD,WAAA,EAAa,eAAA;AAAA,MACb,cAAA,EAAgB,eAAA;AAAA,MAChB,eAAA,EAAiB,eAAA;AAAA,MACjB,MAAA,EAAQ,eAAA;AAAA,MACR,SAAS,CAAA,KAAA,KAAS;AAChB,QAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,gBAAA,CAAiB,SAAS,CAAA;AAAA,MACpD,CAAA;AAAA,MAEA,QAAA,kBAAAG,cAAA,CAAC,IAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAU,QAAA,EAAS;AAAA;AAAA,GAC9C;AAEJ,CAAA;AAOA,MAAM,aAAA,GAAgB,CAAC,EAAE,OAAA,EAAS,eAAc,KAA0B;AACxE,EAAA,MAAM,oBAAA,GAAuBC,gBAAA,CAAM,MAAA,CAA8C,IAAI,CAAA;AACrF,EAAA,MAAM,mBAAA,GAAsB,OAAO,aAAA,KAAkB,QAAA,GAAW,aAAA,GAAgB,MAAA;AAChF,EAAA,MAAM,iBAAA,GAAoB,uBAAA;AAAA,IACxB,mBAAA,EAAqB,WAAA;AAAA,IACrB,2BAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,wBAAA,GAA2B,uBAAA;AAAA,IAC/B,mBAAA,EAAqB,kBAAA;AAAA,IACrB,mCAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,qBAAA,GAAwB,qBAAqB,SAAA,IAAa,aAAA;AAChE,EAAA,MAAM,sBAAA,GAAyB,qBAAqB,UAAA,IAAc,cAAA;AAElE,EAAA,MAAM,yBAAA,GAA4BA,gBAAA,CAAM,WAAA,CAAY,MAAM;AACxD,IAAA,IAAI,CAAC,qBAAqB,OAAA,EAAS;AACnC,IAAA,aAAA,CAAc,qBAAqB,OAAO,CAAA;AAC1C,IAAA,oBAAA,CAAqB,OAAA,GAAU,IAAA;AAAA,EACjC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,oBAAoBA,gBAAA,CAAM,WAAA;AAAA,IAC9B,CAAC,SAAA,EAAkC,UAAA,GAAa,CAAA,KAAM;AACpD,MAAA,MAAM,WAAW,OAAA,CAAQ,OAAA;AACzB,MAAA,IAAI,CAAC,QAAA,EAAU;AAEf,MAAA,QAAA,CAAS,QAAA,CAAS;AAAA,QAChB,MAAM,SAAA,KAAc,OAAA,GAAU,iBAAA,GAAoB,UAAA,GAAa,CAAC,iBAAA,GAAoB,UAAA;AAAA,QACpF,QAAA,EAAU;AAAA,OACX,CAAA;AAAA,IACH,CAAA;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,GAC7B;AAEA,EAAA,MAAM,6BAA6BA,gBAAA,CAAM,WAAA;AAAA,IACvC,CAAC,WAAkC,KAAA,KAAkD;AACnF,MAAA,KAAA,EAAO,cAAA,EAAe;AACtB,MAAA,KAAA,EAAO,eAAA,EAAgB;AACvB,MAAA,KAAA,EAAO,aAAA,CAAc,iBAAA,GAAoB,KAAA,CAAM,SAAS,CAAA;AAExD,MAAA,yBAAA,EAA0B;AAC1B,MAAA,iBAAA,CAAkB,WAAW,CAAC,CAAA;AAE9B,MAAA,oBAAA,CAAqB,OAAA,GAAU,YAAY,MAAM;AAC/C,QAAA,iBAAA,CAAkB,SAAS,CAAA;AAAA,MAC7B,GAAG,wBAAwB,CAAA;AAAA,IAC7B,CAAA;AAAA,IACA,CAAC,wBAAA,EAA0B,iBAAA,EAAmB,yBAAyB;AAAA,GACzE;AAEA,EAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,OAAO,MAAM;AACX,MAAA,yBAAA,EAA0B;AAAA,IAC5B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,yBAAyB,CAAC,CAAA;AAE9B,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAH,cAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,MAAA;AAAA,QACV,KAAA,EAAO,qBAAA;AAAA,QACP,gBAAA,EAAkB,0BAAA;AAAA,QAClB,eAAA,EAAiB,yBAAA;AAAA,QACjB,gBAAA,EAAkB,CAAA,SAAA,KAAa,iBAAA,CAAkB,SAAA,EAAW,CAAC;AAAA;AAAA,KAC/D;AAAA,oBACAA,cAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,OAAA;AAAA,QACV,KAAA,EAAO,sBAAA;AAAA,QACP,gBAAA,EAAkB,0BAAA;AAAA,QAClB,eAAA,EAAiB,yBAAA;AAAA,QACjB,gBAAA,EAAkB,CAAA,SAAA,KAAa,iBAAA,CAAkB,SAAA,EAAW,CAAC;AAAA;AAAA;AAC/D,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,MAAM,aAAaC,gBAAA,CAAM,UAAA;AAAA,EACvB,CACE;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA,GAAa,KAAA;AAAA,IACb,WAAA,GAAc,UAAA;AAAA,IACd,aAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,OAAA,GAAUA,gBAAA,CAAM,MAAA,CAAuB,IAAI,CAAA;AACjD,IAAAG,iCAAA,CAAc,OAAA,EAAS,EAAE,OAAA,EAAS,UAAA,EAAY,CAAA;AAI9C,IAAA,MAAM,iBAAiBH,gBAAA,CAAM,WAAA;AAAA,MAC3B,CAAC,IAAA,KAAgC;AAC/B,QAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAClB,QAAA,IAAI,OAAO,WAAA,KAAgB,UAAA,EAAY,WAAA,CAAY,IAAI,CAAA;AAAA,aAAA,IAC9C,WAAA,EAAc,WAAA,CAA8D,OAAA,GAAU,IAAA;AAAA,MACjG,CAAA;AAAA,MACA,CAAC,WAAW;AAAA,KACd;AAEA,IAAA,MAAM,aAAA,GAA4C,IAAA,KAAS,MAAA,GAAY,IAAA,GAAO,QAAA;AAC9E,IAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,aAAA,EAAe,WAAW,CAAA;AAEpD,IAAA,MAAM,gBAAqC,EAAC;AAC5C,IAAA,IAAI,SAAA,gBAAyB,SAAA,GAAY,SAAA;AACzC,IAAA,IAAI,gBAAgB,UAAA,EAAY;AAC9B,MAAA,aAAA,CAAc,SAAA,GAAY,QAAA;AAC1B,MAAA,aAAA,CAAc,SAAA,GAAY,QAAA;AAAA,IAC5B,CAAA,MAAA,IAAW,gBAAgB,YAAA,EAAc;AACvC,MAAA,aAAA,CAAc,SAAA,GAAY,QAAA;AAC1B,MAAA,aAAA,CAAc,SAAA,GAAY,QAAA;AAAA,IAC5B;AAMA,IAAA,MAAM,YAAA,GACJ,WAAA,KAAgB,UAAA,GACZ,EAAE,QAAA,EAAU,KAAA,EAAM,GAClB,WAAA,KAAgB,YAAA,GACd,EAAE,SAAA,EAAW,KAAA,EAAM,GACnB,MAAA;AAER,IAAA,uBACEC,eAAA;AAAA,MAACG,qBAAA,CAAoB,IAAA;AAAA,MAApB;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWR,WAAA,CAAG,4CAAA,EAA8C,SAAS,CAAA;AAAA,QACpE,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAG,cAAA;AAAA,YAACK,qBAAA,CAAoB,QAAA;AAAA,YAApB;AAAA,cACC,GAAA,EAAK,cAAA;AAAA,cACL,WAAWR,WAAA,CAAG,iCAAA,EAAmC,WAAA,CAAY,KAAK,GAAG,iBAAiB,CAAA;AAAA,cACtF,KAAA,EAAO,aAAA;AAAA,cAEP,yCAACQ,qBAAA,CAAoB,OAAA,EAApB,EAA4B,KAAA,EAAO,cAAe,QAAA,EAAS;AAAA;AAAA,WAC9D;AAAA,UACC,iBAAiB,WAAA,KAAgB,UAAA,oBAChCL,cAAA,CAAC,aAAA,EAAA,EAAc,SAAkB,aAAA,EAA8B,CAAA;AAAA,UAAA,CAE/D,gBAAgB,UAAA,IAAc,WAAA,KAAgB,2BAAWA,cAAA,CAAC,SAAA,EAAA,EAAU,aAAY,UAAA,EAAW,CAAA;AAAA,UAAA,CAC3F,gBAAgB,YAAA,IAAgB,WAAA,KAAgB,2BAAWA,cAAA,CAAC,SAAA,EAAA,EAAU,aAAY,YAAA,EAAa,CAAA;AAAA,UAChG,WAAA,KAAgB,MAAA,oBAAUA,cAAA,CAACK,qBAAA,CAAoB,QAApB,EAA2B;AAAA;AAAA;AAAA,KACzD;AAAA,EAEJ;AACF;AACA,UAAA,CAAW,WAAA,GAAc,YAAA;AAEzB,MAAM,SAAA,GAAYJ,gBAAA,CAAM,UAAA,CAGtB,CAAC,EAAE,SAAA,EAAW,WAAA,GAAc,UAAA,EAAY,GAAG,KAAA,EAAM,EAAG,GAAA,qBACpDD,cAAA;AAAA,EAACK,qBAAA,CAAoB,SAAA;AAAA,EAApB;AAAA,IACC,GAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA,EAAWR,WAAA;AAAA,MACT,gFAAA;AAAA,MACA,gGAAA;AAAA,MACA,gBAAgB,UAAA,IAAc,mBAAA;AAAA,MAC9B,gBAAgB,YAAA,IAAgB,4BAAA;AAAA,MAChC;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAAG,cAAA,CAACK,qBAAA,CAAoB,KAAA,EAApB,EAA0B,WAAU,oGAAA,EAAqG;AAAA;AAC5I,CACD;AACD,SAAA,CAAU,WAAA,GAAc,WAAA;;;;;"}