@kb-labs/studio-ui-kit 0.2.0

package/dist/index.js

@@ -0,0 +1,2029 @@
+import { theme, Button, Typography, Form, Empty, Modal, message, notification, Space, Row, Col, Divider, Badge, Card, Tag, Avatar, Table, Statistic, Progress, Descriptions, Timeline, Tree, List, Input, Select, Checkbox, Switch, DatePicker, TimePicker, InputNumber, Radio, Upload, Slider, Breadcrumb, Collapse, Dropdown, Segmented, Steps, Menu, Alert, Skeleton, Spin, Result, Tooltip, Drawer, Popconfirm, Popover, Tabs } from 'antd';
+import { typography, spacing } from '@kb-labs/studio-ui-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React3 from 'react';
+import { useMemo } from 'react';
+import { Line, Column, Area, Pie, Bar } from '@ant-design/charts';
+import dayjs from 'dayjs';
+import { useSearchParams, useNavigate, useParams } from 'react-router-dom';
+
+// src/primitives/UIText.tsx
+var { useToken } = theme;
+function UIText({
+  children,
+  size = "base",
+  weight = "normal",
+  color = "primary",
+  as: Component = "span",
+  className,
+  style: customStyle
+}) {
+  const { token } = useToken();
+  const colorMap = {
+    primary: token.colorText,
+    secondary: token.colorTextSecondary,
+    success: token.colorSuccess,
+    warning: token.colorWarning,
+    error: token.colorError,
+    info: token.colorInfo
+  };
+  const baseStyle = {
+    fontSize: typography.fontSize[size][0],
+    lineHeight: typography.fontSize[size][1].lineHeight,
+    fontWeight: typography.fontWeight[weight],
+    color: colorMap[color]
+  };
+  const style = { ...baseStyle, ...customStyle };
+  return /* @__PURE__ */ jsx(Component, { style, className, children });
+}
+function UIBox({
+  children,
+  p,
+  pt,
+  pr,
+  pb,
+  pl,
+  m,
+  mt,
+  mr,
+  mb,
+  ml,
+  as: Component = "div",
+  className,
+  style: customStyle
+}) {
+  const style = {
+    ...p !== void 0 && { padding: spacing[p] },
+    ...pt !== void 0 && { paddingTop: spacing[pt] },
+    ...pr !== void 0 && { paddingRight: spacing[pr] },
+    ...pb !== void 0 && { paddingBottom: spacing[pb] },
+    ...pl !== void 0 && { paddingLeft: spacing[pl] },
+    ...m !== void 0 && { margin: spacing[m] },
+    ...mt !== void 0 && { marginTop: spacing[mt] },
+    ...mr !== void 0 && { marginRight: spacing[mr] },
+    ...mb !== void 0 && { marginBottom: spacing[mb] },
+    ...ml !== void 0 && { marginLeft: spacing[ml] },
+    ...customStyle
+  };
+  return /* @__PURE__ */ jsx(Component, { style, className, children });
+}
+function UIFlex({
+  children,
+  direction = "row",
+  justify = "start",
+  align = "stretch",
+  gap,
+  wrap = "nowrap",
+  as: Component = "div",
+  className,
+  style: customStyle
+}) {
+  const justifyMap = {
+    start: "flex-start",
+    end: "flex-end",
+    center: "center",
+    between: "space-between",
+    around: "space-around",
+    evenly: "space-evenly"
+  };
+  const alignMap = {
+    start: "flex-start",
+    end: "flex-end",
+    center: "center",
+    baseline: "baseline",
+    stretch: "stretch"
+  };
+  const style = {
+    display: "flex",
+    flexDirection: direction,
+    justifyContent: justifyMap[justify],
+    alignItems: alignMap[align],
+    flexWrap: wrap,
+    ...gap !== void 0 && { gap: spacing[gap] },
+    ...customStyle
+  };
+  return /* @__PURE__ */ jsx(Component, { style, className, children });
+}
+function UITypographyText(props) {
+  return /* @__PURE__ */ jsx(Typography.Text, { ...props });
+}
+function UITypographyParagraph(props) {
+  return /* @__PURE__ */ jsx(Typography.Paragraph, { ...props });
+}
+function UITypographyLink(props) {
+  return /* @__PURE__ */ jsx(Typography.Link, { ...props });
+}
+function UIStack({
+  direction = "vertical",
+  spacing: spacing8 = 2,
+  align,
+  children,
+  as,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    UIFlex,
+    {
+      direction: direction === "vertical" ? "column" : "row",
+      gap: spacing8,
+      align,
+      as,
+      className,
+      style,
+      children
+    }
+  );
+}
+function UISpace(props) {
+  return /* @__PURE__ */ jsx(Space, { ...props });
+}
+function UISpaceCompact(props) {
+  return /* @__PURE__ */ jsx(Space.Compact, { ...props });
+}
+function UIRow(props) {
+  return /* @__PURE__ */ jsx(Row, { ...props });
+}
+function UICol(props) {
+  return /* @__PURE__ */ jsx(Col, { ...props });
+}
+function UIDivider(props) {
+  return /* @__PURE__ */ jsx(Divider, { ...props });
+}
+var { useToken: useToken2 } = theme;
+function UIBadge({ variant = "default", children, ...props }) {
+  const { token } = useToken2();
+  const statusMap = {
+    success: "success",
+    warning: "warning",
+    error: "error",
+    info: "processing",
+    default: "default"
+  };
+  const colorMap = {
+    success: token.colorSuccess,
+    warning: token.colorWarning,
+    error: token.colorError,
+    info: token.colorInfo,
+    default: token.colorTextSecondary
+  };
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        color: colorMap[variant],
+        text: children,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      status: statusMap[variant],
+      ...props
+    }
+  );
+}
+
+// src/core/UIButton.module.css
+var UIButton_default = {};
+var UIButton = React3.forwardRef(
+  function UIButton2({ variant = "default", className, ...rest }, ref) {
+    const combinedClassName = [UIButton_default.uiButton, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        type: variant,
+        className: combinedClassName,
+        ...rest
+      }
+    );
+  }
+);
+var { useToken: useToken3 } = theme;
+var variantTokens = {
+  default: { tint: "transparent", accent: "transparent", border: "var(--border-primary, #e8eaed)" },
+  success: { tint: "rgba(82,196,26,0.07)", accent: "#52c41a", border: "rgba(82,196,26,0.25)" },
+  warning: { tint: "rgba(250,173,20,0.08)", accent: "#faad14", border: "rgba(250,173,20,0.30)" },
+  error: { tint: "rgba(255,77,79,0.07)", accent: "#ff4d4f", border: "rgba(255,77,79,0.25)" },
+  info: { tint: "rgba(12,102,255,0.07)", accent: "#0c66ff", border: "rgba(12,102,255,0.20)" }
+};
+function UICard({
+  title,
+  subtitle,
+  extra,
+  footer,
+  children,
+  size = "default",
+  bordered = true,
+  hoverable = false,
+  loading = false,
+  status = "default",
+  ...rest
+}) {
+  const { token } = useToken3();
+  const vt = variantTokens[status];
+  const cardTitle = title || subtitle ? /* @__PURE__ */ jsxs(UIBox, { children: [
+    title && (typeof title === "string" ? /* @__PURE__ */ jsx(UIText, { size: "lg", weight: "semibold", as: "div", children: title }) : title),
+    subtitle && /* @__PURE__ */ jsx(UIText, { size: "sm", color: "secondary", as: "div", style: { marginTop: token.marginXXS }, children: subtitle })
+  ] }) : void 0;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      title: cardTitle,
+      extra,
+      size,
+      variant: bordered ? "outlined" : "borderless",
+      hoverable,
+      loading,
+      ...rest,
+      style: {
+        boxShadow: hoverable ? "0 4px 16px rgba(0,0,0,0.08)" : "0 1px 3px rgba(0,0,0,0.06)",
+        transition: "box-shadow 200ms ease, transform 200ms ease",
+        backgroundColor: status !== "default" ? vt.tint : void 0,
+        borderColor: vt.border,
+        borderTopColor: status !== "default" ? vt.accent : vt.border,
+        borderTopWidth: status !== "default" ? 3 : 1,
+        overflow: "hidden",
+        ...rest.style
+      },
+      children: [
+        children,
+        footer && /* @__PURE__ */ jsx(UIBox, { mt: 3, pt: 3, style: { borderTop: `1px solid ${token.colorBorder}` }, children: footer })
+      ]
+    }
+  );
+}
+var { useToken: useToken4 } = theme;
+function UITag({
+  variant = "default",
+  color,
+  children,
+  closable,
+  onClose,
+  icon,
+  ...rest
+}) {
+  const { token } = useToken4();
+  const colorMap = {
+    success: token.colorSuccess,
+    warning: token.colorWarning,
+    error: token.colorError,
+    info: token.colorInfo,
+    default: token.colorPrimary,
+    neutral: token.colorTextSecondary
+  };
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      color: color ?? colorMap[variant],
+      closable,
+      onClose,
+      icon,
+      ...rest,
+      children
+    }
+  );
+}
+var { Title: AntTitle } = Typography;
+var { useToken: useToken5 } = theme;
+function UITitle({
+  level = 1,
+  children,
+  subtitle,
+  className,
+  style
+}) {
+  const { token: _token } = useToken5();
+  if (subtitle) {
+    return /* @__PURE__ */ jsxs(UIBox, { mb: subtitle ? 2 : 3, children: [
+      /* @__PURE__ */ jsx(AntTitle, { level, className, style: { margin: 0, ...style }, children }),
+      /* @__PURE__ */ jsx(
+        UIText,
+        {
+          size: "base",
+          color: "secondary",
+          as: "div",
+          style: { marginTop: spacing[1] },
+          children: subtitle
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(AntTitle, { level, className, style: { marginBottom: spacing[3], ...style }, children });
+}
+
+// src/core/UIIcon.module.css
+var UIIcon_default = {};
+var _iconRenderer = null;
+function registerIconRenderer(renderer) {
+  _iconRenderer = renderer;
+}
+function UIIcon({
+  icon,
+  name,
+  size = "base",
+  color = "inherit",
+  spin = false,
+  onClick,
+  className,
+  style: customStyle
+}) {
+  const classes = [
+    UIIcon_default.uiIcon,
+    "anticon",
+    UIIcon_default[`size-${size}`],
+    UIIcon_default[`color-${color}`],
+    spin && UIIcon_default.spin,
+    onClick && UIIcon_default.clickable,
+    className
+  ].filter(Boolean).join(" ");
+  let iconElement = null;
+  const iconName = name || (typeof icon === "string" ? icon : null);
+  if (iconName) {
+    if (_iconRenderer) {
+      iconElement = _iconRenderer(iconName);
+    } else {
+      console.warn(`Icon "${iconName}" could not be loaded. Call registerIconRenderer() at app startup.`);
+      iconElement = null;
+    }
+  } else if (React3.isValidElement(icon)) {
+    iconElement = icon;
+  }
+  if (!iconElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: classes,
+      style: customStyle,
+      onClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      } : void 0,
+      children: iconElement
+    }
+  );
+}
+var UIIconButton = ({
+  icon,
+  name,
+  onClick,
+  size = "base",
+  color = "primary",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  UIIcon,
+  {
+    icon,
+    name,
+    size,
+    color,
+    onClick,
+    style: { cursor: "pointer", transition: "opacity 0.2s", ...props.style },
+    ...props
+  }
+);
+function UIAvatar(props) {
+  return /* @__PURE__ */ jsx(Avatar, { ...props });
+}
+function UIAvatarGroup(props) {
+  return /* @__PURE__ */ jsx(Avatar.Group, { ...props });
+}
+function useUITheme() {
+  const result = theme.useToken();
+  return result;
+}
+
+// src/core/UIShimmerText.module.css
+var UIShimmerText_default = {};
+function UIShimmerText({
+  children,
+  color = "var(--text-secondary, #9CA3AF)",
+  highlight = "var(--text-primary, #111827)",
+  duration = "2s",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: [UIShimmerText_default.shimmer, className].filter(Boolean).join(" "),
+      style: {
+        "--shimmer-color-1": color,
+        "--shimmer-color-2": color,
+        "--shimmer-highlight": highlight,
+        "--shimmer-duration": duration,
+        ...style
+      },
+      children
+    }
+  );
+}
+var { useToken: useToken6 } = theme;
+function UIMetricCard({
+  label,
+  value,
+  trend = "neutral",
+  delta,
+  unit,
+  size = "default",
+  showDelta = true,
+  loading = false
+}) {
+  const { token } = useToken6();
+  const trendColor = trend === "up" ? token.colorSuccess : trend === "down" ? token.colorError : token.colorText;
+  const trendIcon = trend === "up" ? "\u2191" : trend === "down" ? "\u2193" : "";
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      size,
+      loading,
+      style: { height: "100%" },
+      children: /* @__PURE__ */ jsxs(UIBox, { children: [
+        /* @__PURE__ */ jsx(UIText, { size: "sm", color: "secondary", as: "div", children: label }),
+        /* @__PURE__ */ jsxs(UIFlex, { align: "baseline", gap: 2, style: { marginTop: token.marginXS }, children: [
+          /* @__PURE__ */ jsx(
+            UIText,
+            {
+              size: "2xl",
+              weight: "bold",
+              as: "div",
+              style: { color: trendColor },
+              children: value
+            }
+          ),
+          unit && /* @__PURE__ */ jsx(UIText, { size: "base", color: "secondary", children: unit })
+        ] }),
+        showDelta && delta !== void 0 && /* @__PURE__ */ jsx(
+          UIFlex,
+          {
+            align: "center",
+            gap: 1,
+            style: { marginTop: token.marginXS },
+            children: /* @__PURE__ */ jsxs(
+              UIText,
+              {
+                size: "sm",
+                style: { color: delta >= 0 ? token.colorSuccess : token.colorError },
+                children: [
+                  trendIcon,
+                  " ",
+                  Math.abs(delta),
+                  "%"
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+function UITable({
+  columns,
+  dataSource,
+  rowKey = "id",
+  loading,
+  pagination,
+  rowSelection,
+  onRow,
+  size = "middle",
+  bordered = false,
+  expandable,
+  className,
+  style,
+  scroll
+}) {
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      columns,
+      dataSource,
+      rowKey,
+      loading,
+      pagination,
+      rowSelection,
+      onRow,
+      size,
+      bordered,
+      expandable,
+      className,
+      style,
+      scroll
+    }
+  );
+}
+function useChartColors() {
+  return useMemo(() => {
+    const colors = [
+      "#1677ff",
+      // Blue (colorInfo default)
+      "#52c41a",
+      // Green (colorSuccess default)
+      "#faad14",
+      // Orange (colorWarning default)
+      "#ff4d4f",
+      // Red (colorError default)
+      "#1890ff",
+      // Primary blue
+      "#722ed1",
+      // Purple
+      "#eb2f96",
+      // Magenta
+      "#13c2c2",
+      // Cyan
+      "#fa8c16",
+      // Volcano
+      "#2f54eb"
+      // Geek blue
+    ];
+    console.log("[useChartColors] Created palette:", { colors });
+    const extendedColors = [
+      ...colors,
+      "#e6f4ff",
+      // Light blue (colorInfoBg equivalent)
+      "#f6ffed",
+      // Light green (colorSuccessBg equivalent)
+      "#fffbe6",
+      // Light yellow (colorWarningBg equivalent)
+      "#fff2f0",
+      // Light red (colorErrorBg equivalent)
+      "#e6f4ff",
+      // Light blue (colorPrimaryBg equivalent)
+      "#f759ab",
+      // Light magenta
+      "#9254de",
+      // Light purple
+      "#40a9ff",
+      // Light blue
+      "#73d13d",
+      // Light green
+      "#ffc53d"
+      // Light yellow
+    ];
+    const getColor = (index) => {
+      return colors[index % colors.length] || "#1890ff";
+    };
+    const mapColors = (data, colorField) => {
+      const uniqueValues = Array.from(
+        new Set(data.map((item) => String(item[colorField] ?? "")))
+      );
+      const colorMap = {};
+      uniqueValues.forEach((value, index) => {
+        colorMap[value] = getColor(index);
+      });
+      return colorMap;
+    };
+    return {
+      colors,
+      extendedColors,
+      getColor,
+      mapColors
+    };
+  }, []);
+}
+function createFillFunction(colorMap, colorField) {
+  return (datum) => {
+    const value = String(datum[colorField] ?? "");
+    const firstKey = Object.keys(colorMap)[0];
+    return colorMap[value] || (firstKey ? colorMap[firstKey] : "#1890ff") || "#1890ff";
+  };
+}
+var { useToken: useToken7 } = theme;
+function useChartTheme() {
+  const { token } = useToken7();
+  return React3.useMemo(
+    () => ({
+      defaultColor: token.colorPrimary,
+      styleSheet: {
+        backgroundColor: token.colorBgContainer,
+        fontFamily: token.fontFamily,
+        fontSize: token.fontSize,
+        color: token.colorText
+      }
+    }),
+    [token]
+  );
+}
+function UILineChart({ colors, disableAutoColors, ...props }) {
+  const chartTheme = useChartTheme();
+  const palette = useChartColors();
+  const enhancedProps = React3.useMemo(() => {
+    const hasColorField = props.colorField || props.seriesField;
+    console.log("[UILineChart] Debug info:", {
+      hasColorField,
+      colorField: props.colorField,
+      seriesField: props.seriesField,
+      disableAutoColors,
+      hasData: !!props.data,
+      dataLength: props.data?.length,
+      customColors: colors,
+      paletteColors: palette.colors
+    });
+    if (disableAutoColors || !hasColorField || !props.data) {
+      console.log("[UILineChart] Skipping auto-colors:", {
+        disableAutoColors,
+        hasColorField,
+        hasData: !!props.data
+      });
+      return props;
+    }
+    const colorSource = colors || palette.colors;
+    console.log("[UILineChart] Applying colors:", {
+      source: colors ? "custom" : "palette",
+      colors: colorSource
+    });
+    return {
+      ...props,
+      scale: {
+        ...props.scale,
+        color: {
+          range: colorSource
+        }
+      }
+    };
+  }, [props, colors, palette.colors, disableAutoColors]);
+  return /* @__PURE__ */ jsx(Line, { ...enhancedProps, theme: chartTheme });
+}
+var { useToken: useToken8 } = theme;
+function useChartTheme2() {
+  const { token } = useToken8();
+  return React3.useMemo(
+    () => ({
+      defaultColor: token.colorPrimary,
+      colors10: [
+        token.colorInfo,
+        token.colorSuccess,
+        token.colorWarning,
+        token.colorError,
+        token.colorPrimary,
+        token.colorInfoBg,
+        token.colorSuccessBg,
+        token.colorWarningBg,
+        token.colorErrorBg,
+        token.colorPrimaryBg
+      ],
+      colors20: [
+        token.colorInfo,
+        token.colorSuccess,
+        token.colorWarning,
+        token.colorError,
+        token.colorPrimary,
+        token.colorInfoBg,
+        token.colorSuccessBg,
+        token.colorWarningBg,
+        token.colorErrorBg,
+        token.colorPrimaryBg,
+        token.colorInfoBorder,
+        token.colorSuccessBorder,
+        token.colorWarningBorder,
+        token.colorErrorBorder,
+        token.colorPrimaryBorder,
+        token.colorInfoText,
+        token.colorSuccessText,
+        token.colorWarningText,
+        token.colorErrorText,
+        token.colorPrimaryText
+      ],
+      styleSheet: {
+        backgroundColor: token.colorBgContainer,
+        fontFamily: token.fontFamily,
+        fontSize: token.fontSize,
+        color: token.colorText
+      }
+    }),
+    [token]
+  );
+}
+function UIColumnChart({ colors, ...props }) {
+  const chartTheme = useChartTheme2();
+  const mergedTheme = colors ? {
+    ...chartTheme,
+    colors10: colors,
+    colors20: colors
+  } : chartTheme;
+  return /* @__PURE__ */ jsx(Column, { ...props, theme: mergedTheme });
+}
+var { useToken: useToken9 } = theme;
+function useChartTheme3() {
+  const { token } = useToken9();
+  return React3.useMemo(
+    () => ({
+      defaultColor: token.colorPrimary,
+      styleSheet: {
+        backgroundColor: token.colorBgContainer,
+        fontFamily: token.fontFamily,
+        fontSize: token.fontSize,
+        color: token.colorText
+      }
+    }),
+    [token]
+  );
+}
+function UIAreaChart({ colors, disableAutoColors, ...props }) {
+  const chartTheme = useChartTheme3();
+  const palette = useChartColors();
+  const enhancedProps = React3.useMemo(() => {
+    if (disableAutoColors || !props.colorField || !props.data) {
+      return props;
+    }
+    const colorSource = colors || palette.colors;
+    return {
+      ...props,
+      scale: {
+        ...props.scale,
+        color: {
+          range: colorSource
+        }
+      }
+    };
+  }, [props, colors, palette.colors, disableAutoColors]);
+  return /* @__PURE__ */ jsx(Area, { ...enhancedProps, theme: chartTheme });
+}
+var { useToken: useToken10 } = theme;
+function useChartTheme4() {
+  const { token } = useToken10();
+  return React3.useMemo(
+    () => ({
+      defaultColor: token.colorPrimary,
+      styleSheet: {
+        backgroundColor: token.colorBgContainer,
+        fontFamily: token.fontFamily,
+        fontSize: token.fontSize,
+        color: token.colorText
+      }
+    }),
+    [token]
+  );
+}
+function UIPieChart({ colors, disableAutoColors, ...props }) {
+  const chartTheme = useChartTheme4();
+  const palette = useChartColors();
+  const enhancedProps = React3.useMemo(() => {
+    if (disableAutoColors || !props.colorField || !props.data) {
+      return props;
+    }
+    const colorSource = colors || palette.colors;
+    return {
+      ...props,
+      scale: {
+        ...props.scale,
+        color: {
+          range: colorSource
+        }
+      }
+    };
+  }, [props, colors, palette.colors, disableAutoColors]);
+  return /* @__PURE__ */ jsx(Pie, { ...enhancedProps, theme: chartTheme });
+}
+var { useToken: useToken11 } = theme;
+function useChartTheme5() {
+  const { token } = useToken11();
+  return React3.useMemo(
+    () => ({
+      defaultColor: token.colorPrimary,
+      styleSheet: {
+        backgroundColor: token.colorBgContainer,
+        fontFamily: token.fontFamily,
+        fontSize: token.fontSize,
+        color: token.colorText
+      }
+    }),
+    [token]
+  );
+}
+function UIBarChart({ colors, disableAutoColors, ...props }) {
+  const chartTheme = useChartTheme5();
+  const palette = useChartColors();
+  const enhancedProps = React3.useMemo(() => {
+    if (disableAutoColors || !props.seriesField || !props.data) {
+      return props;
+    }
+    const colorSource = colors || palette.colors;
+    return {
+      ...props,
+      scale: {
+        ...props.scale,
+        color: {
+          range: colorSource
+        }
+      }
+    };
+  }, [props, colors, palette.colors, disableAutoColors]);
+  return /* @__PURE__ */ jsx(Bar, { ...enhancedProps, theme: chartTheme });
+}
+function UIStatisticsChart({
+  data,
+  loading = false,
+  title,
+  metrics = [],
+  xField = "date",
+  yField = "value",
+  colorField = "category",
+  style,
+  height = 350,
+  showLegend = true,
+  chartProps
+}) {
+  const palette = useChartColors();
+  const chartColors = React3.useMemo(
+    () => palette.colors.slice(0, Math.max(metrics.length, 3)),
+    [palette.colors, metrics.length]
+  );
+  const chartData = React3.useMemo(() => {
+    if (!data) {
+      return [];
+    }
+    if (metrics.length === 0) {
+      return data;
+    }
+    return data.flatMap((stat) => {
+      const rows = [];
+      for (const metric of metrics) {
+        let value;
+        if (metric.key in stat && typeof stat[metric.key] === "number") {
+          value = stat[metric.key];
+        } else if (stat.metrics && metric.key in stat.metrics) {
+          value = stat.metrics[metric.key];
+        } else {
+          value = 0;
+        }
+        if (metric.transform) {
+          value = metric.transform(value);
+        }
+        rows.push({
+          [xField]: stat.date ? dayjs(stat.date).format("YYYY-MM-DD") : stat[xField],
+          [colorField]: metric.label,
+          [yField]: value
+        });
+      }
+      return rows;
+    });
+  }, [data, metrics, xField, yField, colorField]);
+  const renderLegend = () => {
+    if (!showLegend || metrics.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginBottom: 12, gap: 16 }, children: metrics.map((metric, index) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            backgroundColor: chartColors[index % chartColors.length]
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 500 }, children: metric.label })
+    ] }, metric.label)) });
+  };
+  const renderContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "40px 0" }, children: /* @__PURE__ */ jsx(UIText, { color: "secondary", children: "Loading chart data..." }) }),
+    !loading && (!chartData || chartData.length === 0) && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "40px 0" }, children: /* @__PURE__ */ jsx(UIText, { color: "secondary", children: "No data available for the selected date range" }) }),
+    !loading && chartData && chartData.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      renderLegend(),
+      /* @__PURE__ */ jsx(
+        UILineChart,
+        {
+          data: chartData,
+          xField,
+          yField,
+          colorField,
+          height,
+          colors: chartColors,
+          scale: {
+            color: {
+              range: chartColors
+            }
+          },
+          axis: {
+            x: {
+              label: {
+                autoRotate: false
+              }
+            },
+            y: {
+              label: {
+                formatter: (v) => {
+                  const num = Number(v);
+                  if (num >= 1e6) {
+                    return `${(num / 1e6).toFixed(1)}M`;
+                  }
+                  if (num >= 1e3) {
+                    return `${(num / 1e3).toFixed(1)}K`;
+                  }
+                  return num.toLocaleString();
+                }
+              }
+            }
+          },
+          style: {
+            shape: "smooth",
+            lineWidth: 2
+          },
+          legend: false,
+          tooltip: {
+            title: (d) => d[xField],
+            items: [
+              (d) => {
+                const metric = metrics.find((m) => m.label === d[colorField]);
+                const metricIndex = metrics.findIndex((m) => m.label === d[colorField]);
+                let formattedValue = d[yField]?.toLocaleString() || "0";
+                if (metric?.format && d[yField] != null) {
+                  formattedValue = metric.format(d[yField]);
+                }
+                return {
+                  name: d[colorField],
+                  value: formattedValue,
+                  color: chartColors[metricIndex >= 0 ? metricIndex : 0]
+                };
+              }
+            ]
+          },
+          ...chartProps
+        }
+      )
+    ] })
+  ] });
+  if (title) {
+    return /* @__PURE__ */ jsx(Card, { title, style: { marginTop: 16, ...style }, children: renderContent() });
+  }
+  return /* @__PURE__ */ jsx("div", { style, children: renderContent() });
+}
+function UIStatistic(props) {
+  return /* @__PURE__ */ jsx(Statistic, { ...props });
+}
+function UIStatisticCountdown(props) {
+  return /* @__PURE__ */ jsx(Statistic.Countdown, { ...props });
+}
+function UIProgress(props) {
+  return /* @__PURE__ */ jsx(Progress, { ...props });
+}
+function UIDescriptions(props) {
+  return /* @__PURE__ */ jsx(Descriptions, { ...props });
+}
+function UIDescriptionsItem(props) {
+  return /* @__PURE__ */ jsx(Descriptions.Item, { ...props });
+}
+function UITimeline(props) {
+  return /* @__PURE__ */ jsx(Timeline, { ...props });
+}
+function UITimelineItem(props) {
+  return /* @__PURE__ */ jsx(Timeline.Item, { ...props });
+}
+function UITree(props) {
+  return /* @__PURE__ */ jsx(Tree, { ...props });
+}
+function UITreeDirectoryTree(props) {
+  return /* @__PURE__ */ jsx(Tree.DirectoryTree, { ...props });
+}
+function UITreeNode(props) {
+  return /* @__PURE__ */ jsx(Tree.TreeNode, { ...props });
+}
+function UIList(props) {
+  return /* @__PURE__ */ jsx(List, { ...props });
+}
+function UIListItem(props) {
+  return /* @__PURE__ */ jsx(List.Item, { ...props });
+}
+function UIListItemMeta(props) {
+  return /* @__PURE__ */ jsx(List.Item.Meta, { ...props });
+}
+function UIInput({
+  value,
+  defaultValue,
+  placeholder,
+  disabled,
+  prefix,
+  suffix,
+  maxLength,
+  showCount,
+  allowClear,
+  onChange,
+  onPressEnter,
+  ...rest
+}) {
+  const handleChange = (e) => {
+    onChange?.(e.target.value);
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      value,
+      defaultValue,
+      placeholder,
+      disabled,
+      prefix,
+      suffix,
+      maxLength,
+      showCount,
+      allowClear,
+      onChange: handleChange,
+      onPressEnter,
+      ...rest
+    }
+  );
+}
+function UIInputPassword(props) {
+  return /* @__PURE__ */ jsx(Input.Password, { ...props });
+}
+function UIInputTextArea(props) {
+  return /* @__PURE__ */ jsx(Input.TextArea, { ...props });
+}
+function UIInputSearch(props) {
+  return /* @__PURE__ */ jsx(Input.Search, { ...props });
+}
+function UISelect({
+  options = [],
+  value,
+  defaultValue,
+  placeholder,
+  disabled,
+  loading,
+  allowClear,
+  showSearch,
+  mode,
+  onChange,
+  ...rest
+}) {
+  const transformedOptions = options.map((opt) => ({
+    label: opt.icon || opt.description ? /* @__PURE__ */ jsxs(UIFlex, { align: "center", gap: 2, style: { width: "100%" }, children: [
+      opt.icon && /* @__PURE__ */ jsx("span", { children: opt.icon }),
+      /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: opt.label }),
+      opt.description && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.85em", opacity: 0.7 }, children: opt.description })
+    ] }) : opt.label,
+    value: opt.value,
+    disabled: opt.disabled
+  }));
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      options: transformedOptions,
+      value,
+      defaultValue,
+      placeholder,
+      disabled,
+      loading,
+      allowClear,
+      showSearch,
+      mode,
+      onChange,
+      ...rest
+    }
+  );
+}
+function UIForm({
+  layout = "vertical",
+  onFinish,
+  onFinishFailed,
+  initialValues,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Form,
+    {
+      layout,
+      onFinish,
+      onFinishFailed,
+      initialValues,
+      ...rest,
+      children
+    }
+  );
+}
+function UIFormItem(props) {
+  return /* @__PURE__ */ jsx(Form.Item, { ...props });
+}
+var useUIForm = Form.useForm;
+function UIFormList(props) {
+  return /* @__PURE__ */ jsx(Form.List, { ...props });
+}
+function UICheckbox({
+  children,
+  checked,
+  defaultChecked,
+  disabled,
+  indeterminate,
+  onChange,
+  ...rest
+}) {
+  const handleChange = (e) => {
+    onChange?.(e.target.checked);
+  };
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked,
+      defaultChecked,
+      disabled,
+      indeterminate,
+      onChange: handleChange,
+      ...rest,
+      children
+    }
+  );
+}
+function UICheckboxGroup({
+  options,
+  value,
+  defaultValue,
+  disabled,
+  gap = 2,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(Checkbox.Group, { value, defaultValue, disabled, onChange, children: /* @__PURE__ */ jsx(UIBox, { children: options.map((option, index) => /* @__PURE__ */ jsxs(UIBox, { mb: index < options.length - 1 ? gap : 0, children: [
+    /* @__PURE__ */ jsx(Checkbox, { value: option.value, disabled: option.disabled, children: option.label }),
+    option.description && /* @__PURE__ */ jsx(
+      UIText,
+      {
+        size: "sm",
+        color: "secondary",
+        as: "div",
+        style: { marginLeft: spacing[6], marginTop: spacing[1] },
+        children: option.description
+      }
+    )
+  ] }, option.value)) }) });
+}
+function UISwitch({
+  checked,
+  defaultChecked,
+  disabled,
+  loading,
+  size = "default",
+  label,
+  labelPosition = "right",
+  checkedChildren,
+  unCheckedChildren,
+  onChange,
+  ...rest
+}) {
+  const switchElement = /* @__PURE__ */ jsx(
+    Switch,
+    {
+      checked,
+      defaultChecked,
+      disabled,
+      loading,
+      size,
+      checkedChildren,
+      unCheckedChildren,
+      onChange,
+      ...rest
+    }
+  );
+  if (!label) {
+    return switchElement;
+  }
+  return /* @__PURE__ */ jsxs(UIFlex, { align: "center", gap: 2, children: [
+    labelPosition === "left" && /* @__PURE__ */ jsx(UIText, { children: label }),
+    switchElement,
+    labelPosition === "right" && /* @__PURE__ */ jsx(UIText, { children: label })
+  ] });
+}
+function UIDatePicker({
+  value,
+  defaultValue,
+  placeholder,
+  disabled,
+  format,
+  allowClear = true,
+  showTime,
+  onChange,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      value,
+      defaultValue,
+      placeholder,
+      disabled,
+      format,
+      allowClear,
+      showTime,
+      onChange,
+      ...rest
+    }
+  );
+}
+function UITimePicker({
+  value,
+  defaultValue,
+  placeholder,
+  disabled,
+  format,
+  allowClear = true,
+  onChange,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    TimePicker,
+    {
+      value,
+      defaultValue,
+      placeholder,
+      disabled,
+      format,
+      allowClear,
+      onChange,
+      ...rest
+    }
+  );
+}
+function UIRangePicker(props) {
+  return /* @__PURE__ */ jsx(DatePicker.RangePicker, { ...props });
+}
+function UIInputNumber(props) {
+  return /* @__PURE__ */ jsx(InputNumber, { ...props });
+}
+function UIRadio(props) {
+  return /* @__PURE__ */ jsx(Radio, { ...props });
+}
+function UIRadioGroup(props) {
+  return /* @__PURE__ */ jsx(Radio.Group, { ...props });
+}
+function UIUpload(props) {
+  return /* @__PURE__ */ jsx(Upload, { ...props });
+}
+function UIUploadDragger(props) {
+  return /* @__PURE__ */ jsx(Upload.Dragger, { ...props });
+}
+function UISlider(props) {
+  return /* @__PURE__ */ jsx(Slider, { ...props });
+}
+function UIBreadcrumb({
+  items,
+  separator,
+  className
+}) {
+  const breadcrumbItems = items.map((item) => ({
+    title: item.icon ? /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+      item.icon,
+      /* @__PURE__ */ jsx("span", { children: item.title })
+    ] }) : item.title,
+    href: item.href,
+    onClick: item.onClick
+  }));
+  return /* @__PURE__ */ jsx(
+    Breadcrumb,
+    {
+      items: breadcrumbItems,
+      separator,
+      className
+    }
+  );
+}
+function UITabsInner({
+  items,
+  syncUrl,
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  tabPosition = "top",
+  type = "line",
+  size = "middle",
+  onChange,
+  onEdit,
+  className,
+  style
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const params = useParams();
+  const defaultKey = items[0]?.key ?? "";
+  let activeKey = controlledActiveKey;
+  const isSearch = syncUrl === true || syncUrl === "search";
+  const isPath = syncUrl && typeof syncUrl === "object" && syncUrl.mode === "path";
+  if (isSearch) {
+    activeKey = searchParams.get("tab") ?? defaultKey;
+  } else if (isPath) {
+    activeKey = params.tab ?? defaultKey;
+  }
+  const handleChange = (key) => {
+    if (isSearch) {
+      setSearchParams(key === defaultKey ? {} : { tab: key });
+    } else if (isPath && typeof syncUrl === "object") {
+      const path = key === defaultKey ? syncUrl.basePath : `${syncUrl.basePath}/${key}`;
+      navigate(path);
+    }
+    onChange?.(key);
+  };
+  const tabItems = items.map((item) => ({
+    key: item.key,
+    label: item.icon ? /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+      item.icon,
+      /* @__PURE__ */ jsx("span", { children: item.label })
+    ] }) : item.label,
+    children: item.children,
+    disabled: item.disabled,
+    closable: item.closable
+  }));
+  const handleEdit = onEdit ? (targetKey, action) => {
+    const key = typeof targetKey === "string" ? targetKey : "";
+    onEdit(key, action);
+  } : void 0;
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      items: tabItems,
+      activeKey,
+      defaultActiveKey: syncUrl ? void 0 : defaultActiveKey,
+      tabPosition,
+      type,
+      size,
+      onChange: handleChange,
+      onEdit: handleEdit,
+      className,
+      style
+    }
+  );
+}
+function UITabs(props) {
+  return /* @__PURE__ */ jsx(UITabsInner, { ...props });
+}
+function UIAccordion({
+  items,
+  activeKey,
+  defaultActiveKey,
+  accordion = false,
+  bordered = true,
+  ghost = false,
+  size = "middle",
+  onChange,
+  className,
+  style
+}) {
+  const collapseItems = items.map((item) => ({
+    key: item.key,
+    label: item.label,
+    children: item.children,
+    extra: item.extra,
+    showArrow: item.showArrow,
+    collapsible: item.collapsible
+  }));
+  return /* @__PURE__ */ jsx(
+    Collapse,
+    {
+      items: collapseItems,
+      activeKey,
+      defaultActiveKey,
+      accordion,
+      bordered,
+      ghost,
+      size,
+      onChange,
+      className,
+      style
+    }
+  );
+}
+function UIDropdown(props) {
+  return /* @__PURE__ */ jsx(Dropdown, { ...props });
+}
+function UIDropdownButton(props) {
+  return /* @__PURE__ */ jsx(Dropdown.Button, { ...props });
+}
+function UISegmented(props) {
+  return /* @__PURE__ */ jsx(Segmented, { ...props });
+}
+function UISteps(props) {
+  return /* @__PURE__ */ jsx(Steps, { ...props });
+}
+function UIMenu(props) {
+  return /* @__PURE__ */ jsx(Menu, { ...props });
+}
+var { useToken: useToken12 } = theme;
+function UIPage({
+  children,
+  width = "default",
+  variant = "default",
+  className,
+  style: customStyle
+}) {
+  const { token } = useToken12();
+  const maxWidthMap = {
+    default: "1280px",
+    wide: "1600px",
+    full: "100%"
+  };
+  const isDocument = variant === "document";
+  const style = {
+    maxWidth: maxWidthMap[width],
+    margin: "0 auto",
+    padding: token.padding,
+    ...isDocument && {
+      backgroundColor: token.colorBgContainer,
+      borderRadius: token.borderRadiusLG,
+      boxShadow: "0 1px 3px rgba(0,0,0,0.06)"
+    },
+    minHeight: isDocument ? void 0 : "100%",
+    ...customStyle
+  };
+  return /* @__PURE__ */ jsx(UIBox, { as: "main", className, style, children });
+}
+var { useToken: useToken13 } = theme;
+function UIHeader({
+  title,
+  subtitle,
+  breadcrumb,
+  actions,
+  className,
+  style: customStyle
+}) {
+  const { token } = useToken13();
+  const style = {
+    borderBottom: `1px solid ${token.colorBorder}`,
+    paddingBottom: spacing[4],
+    marginBottom: spacing[6],
+    ...customStyle
+  };
+  return /* @__PURE__ */ jsxs(UIBox, { className, style, children: [
+    breadcrumb && /* @__PURE__ */ jsx(UIBox, { mb: 2, children: breadcrumb }),
+    /* @__PURE__ */ jsxs(UIFlex, { justify: "between", align: "start", gap: 4, children: [
+      /* @__PURE__ */ jsxs(UIBox, { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx(UITitle, { level: 1, style: { marginBottom: subtitle ? spacing[2] : 0 }, children: title }),
+        subtitle && /* @__PURE__ */ jsx(UIText, { size: "base", color: "secondary", children: subtitle })
+      ] }),
+      actions && /* @__PURE__ */ jsx(UIBox, { style: { flexShrink: 0 }, children: actions })
+    ] })
+  ] });
+}
+var { useToken: useToken14 } = theme;
+function UIPageHeader({
+  title,
+  description,
+  icon,
+  breadcrumbs,
+  actions,
+  tabs,
+  onBack,
+  children
+}) {
+  const { token } = useToken14();
+  const hasTabs = !!tabs;
+  return /* @__PURE__ */ jsxs("div", { style: { marginBottom: hasTabs ? 0 : 24 }, children: [
+    (onBack || breadcrumbs && breadcrumbs.length > 0) && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: token.marginXS,
+          marginBottom: token.marginXS
+        },
+        children: [
+          onBack && /* @__PURE__ */ jsx(
+            UIButton,
+            {
+              variant: "text",
+              size: "small",
+              icon: /* @__PURE__ */ jsx(UIIcon, { name: "ArrowLeftOutlined" }),
+              onClick: onBack,
+              style: { padding: "0 4px" }
+            }
+          ),
+          breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(
+            UIBreadcrumb,
+            {
+              items: breadcrumbs.map((item) => ({
+                title: item.title,
+                ...item.href ? { href: item.href } : {}
+              }))
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          gap: token.marginSM
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: token.marginSM, minWidth: 0 }, children: [
+            icon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: 24,
+                  color: token.colorPrimary,
+                  flexShrink: 0,
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: icon
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+              typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: token.fontSizeHeading3,
+                    fontWeight: token.fontWeightStrong,
+                    color: token.colorTextHeading,
+                    lineHeight: 1.3
+                  },
+                  children: title
+                }
+              ) : title,
+              description && /* @__PURE__ */ jsx("div", { style: { marginTop: 4 }, children: typeof description === "string" ? /* @__PURE__ */ jsx(UIText, { color: "secondary", size: "sm", children: description }) : description })
+            ] })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: token.marginXS, flexShrink: 0 }, children: actions })
+        ]
+      }
+    ),
+    children && /* @__PURE__ */ jsx("div", { style: { marginTop: token.marginSM }, children }),
+    hasTabs && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(UIDivider, { style: { marginBottom: 0 } }),
+      tabs
+    ] })
+  ] });
+}
+function UIPageSection({ children, gap = 24, style, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { style: { marginBottom: gap, ...style }, ...rest, children });
+}
+function UIAlert({
+  variant = "info",
+  title,
+  message: message2,
+  description,
+  showIcon,
+  closable,
+  onClose,
+  action,
+  icon,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      type: variant,
+      message: title || message2,
+      description: title ? description || message2 : description,
+      showIcon,
+      closable,
+      onClose,
+      action,
+      icon,
+      className,
+      style
+    }
+  );
+}
+var { useToken: useToken15 } = theme;
+function UIEmptyState({
+  icon,
+  title,
+  description,
+  action,
+  children,
+  useDefaultImage,
+  image,
+  className,
+  style: customStyle
+}) {
+  const { token } = useToken15();
+  const content = children ?? action;
+  if (useDefaultImage || image !== void 0) {
+    return /* @__PURE__ */ jsx(
+      Empty,
+      {
+        description,
+        image,
+        className,
+        style: customStyle,
+        children: content
+      }
+    );
+  }
+  const style = {
+    padding: spacing[8],
+    textAlign: "center",
+    ...customStyle
+  };
+  return /* @__PURE__ */ jsx(UIBox, { className, style, children: /* @__PURE__ */ jsxs(UIFlex, { direction: "column", align: "center", gap: 3, children: [
+    icon && /* @__PURE__ */ jsx(UIBox, { style: { fontSize: "48px", color: token.colorTextSecondary }, children: icon }),
+    title && /* @__PURE__ */ jsx(UIText, { size: "lg", weight: "semibold", children: title }),
+    description && /* @__PURE__ */ jsx(UIText, { size: "base", color: "secondary", children: description }),
+    content && /* @__PURE__ */ jsx(UIBox, { mt: 2, children: content })
+  ] }) });
+}
+UIEmptyState.PRESENTED_IMAGE_SIMPLE = Empty.PRESENTED_IMAGE_SIMPLE;
+UIEmptyState.PRESENTED_IMAGE_DEFAULT = Empty.PRESENTED_IMAGE_DEFAULT;
+var { useToken: useToken16 } = theme;
+function UIErrorState({
+  icon,
+  title = "Something went wrong",
+  description,
+  details,
+  showRetry = false,
+  retryText = "Try again",
+  onRetry,
+  action,
+  className,
+  style: customStyle
+}) {
+  const { token } = useToken16();
+  const style = {
+    padding: spacing[8],
+    textAlign: "center",
+    ...customStyle
+  };
+  return /* @__PURE__ */ jsx(UIBox, { className, style, children: /* @__PURE__ */ jsxs(UIFlex, { direction: "column", align: "center", gap: 3, children: [
+    icon && /* @__PURE__ */ jsx(UIBox, { style: { fontSize: "48px", color: token.colorError }, children: icon }),
+    /* @__PURE__ */ jsx(UIText, { size: "lg", weight: "semibold", color: "error", children: title }),
+    description && /* @__PURE__ */ jsx(UIText, { size: "base", color: "secondary", children: description }),
+    details && /* @__PURE__ */ jsx(
+      UIBox,
+      {
+        p: 3,
+        style: {
+          backgroundColor: token.colorErrorBg,
+          borderRadius: token.borderRadius,
+          maxWidth: "600px",
+          width: "100%"
+        },
+        children: /* @__PURE__ */ jsx(UIText, { size: "sm", as: "pre", style: { margin: 0, textAlign: "left", whiteSpace: "pre-wrap" }, children: details })
+      }
+    ),
+    (showRetry || action) && /* @__PURE__ */ jsx(UIBox, { mt: 2, children: action || /* @__PURE__ */ jsx(UIButton, { variant: "primary", onClick: onRetry, children: retryText }) })
+  ] }) });
+}
+function UISkeleton({
+  loading = true,
+  children,
+  avatar,
+  avatarShape = "circle",
+  lines = 3,
+  title = true,
+  active = true,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      loading,
+      avatar: avatar ? { shape: avatarShape } : false,
+      paragraph: { rows: lines },
+      title,
+      active,
+      className,
+      style,
+      children
+    }
+  );
+}
+function UISkeletonButton(props) {
+  return /* @__PURE__ */ jsx(Skeleton.Button, { ...props });
+}
+function UISkeletonInput(props) {
+  return /* @__PURE__ */ jsx(Skeleton.Input, { ...props });
+}
+function UISkeletonImage(props) {
+  return /* @__PURE__ */ jsx(Skeleton.Image, { ...props });
+}
+function UISkeletonNode(props) {
+  return /* @__PURE__ */ jsx(Skeleton.Node, { ...props });
+}
+function UISkeletonText({
+  width = "100%",
+  height = "1em",
+  gap = 6,
+  className,
+  style
+}) {
+  const widths = Array.isArray(width) ? width : [width];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      style: { display: "inline-flex", flexDirection: "column", gap, ...style },
+      children: widths.map((w, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            width: w,
+            height,
+            overflow: "hidden",
+            borderRadius: 4,
+            flexShrink: 0
+          },
+          children: /* @__PURE__ */ jsx(
+            Skeleton.Input,
+            {
+              active: true,
+              size: "small",
+              style: {
+                width: "100%",
+                minWidth: "unset",
+                height: "100%",
+                display: "block"
+              }
+            }
+          )
+        },
+        i
+      ))
+    }
+  );
+}
+function UISpin(props) {
+  return /* @__PURE__ */ jsx(Spin, { ...props });
+}
+function UIResult(props) {
+  return /* @__PURE__ */ jsx(Result, { ...props });
+}
+var UIMessage = message;
+function useUIMessage() {
+  return message.useMessage();
+}
+var UINotification = notification;
+function useUINotification() {
+  return notification.useNotification();
+}
+function UIModal({
+  open,
+  title,
+  children,
+  width = "default",
+  closable = true,
+  maskClosable = true,
+  footer,
+  okText,
+  cancelText,
+  confirmLoading,
+  onOk,
+  onCancel,
+  onClose,
+  className,
+  style
+}) {
+  const widthMap = {
+    small: 416,
+    default: 520,
+    large: 800,
+    full: window.innerWidth - 64
+  };
+  const modalWidth = typeof width === "number" ? width : widthMap[width];
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      title,
+      width: modalWidth,
+      closable,
+      maskClosable,
+      footer,
+      okText,
+      cancelText,
+      confirmLoading,
+      onOk,
+      onCancel: onCancel || onClose,
+      className,
+      style,
+      children
+    }
+  );
+}
+var UIModalConfirm = Modal.confirm;
+var UIModalInfo = Modal.info;
+var UIModalSuccess = Modal.success;
+var UIModalError = Modal.error;
+var UIModalWarning = Modal.warning;
+function UITooltip({
+  title,
+  children,
+  placement = "top",
+  arrow = true,
+  trigger = "hover",
+  open,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title,
+      placement,
+      arrow,
+      trigger,
+      open,
+      className,
+      children
+    }
+  );
+}
+function UIDrawer(props) {
+  return /* @__PURE__ */ jsx(Drawer, { ...props });
+}
+function UIPopconfirm(props) {
+  return /* @__PURE__ */ jsx(Popconfirm, { ...props });
+}
+function UIPopover(props) {
+  return /* @__PURE__ */ jsx(Popover, { ...props });
+}
+var { useToken: useToken17 } = theme;
+function UIMarkdownViewer({
+  content,
+  className,
+  style: customStyle
+}) {
+  const { token } = useToken17();
+  const style = {
+    padding: token.padding,
+    backgroundColor: token.colorBgContainer,
+    borderRadius: token.borderRadius,
+    border: `1px solid ${token.colorBorder}`,
+    lineHeight: 1.6,
+    ...customStyle
+  };
+  const markdownStyles = {
+    fontFamily: token.fontFamily,
+    fontSize: token.fontSize,
+    color: token.colorText
+  };
+  return /* @__PURE__ */ jsx(UIBox, { className, style, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: markdownStyles,
+      dangerouslySetInnerHTML: { __html: convertBasicMarkdown(content) }
+    }
+  ) });
+}
+function convertBasicMarkdown(markdown) {
+  let html = markdown;
+  html = html.replace(/^### (.*$)/gim, "<h3>$1</h3>");
+  html = html.replace(/^## (.*$)/gim, "<h2>$1</h2>");
+  html = html.replace(/^# (.*$)/gim, "<h1>$1</h1>");
+  html = html.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/\*(.*?)\*/g, "<em>$1</em>");
+  html = html.replace(/`(.*?)`/g, "<code>$1</code>");
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+  html = html.replace(/\n/g, "<br />");
+  return html;
+}
+var { useToken: useToken18 } = theme;
+function UIJsonViewer({
+  data,
+  collapsed: _collapsed = false,
+  indent = 2,
+  showLineNumbers = false,
+  className,
+  style: customStyle
+}) {
+  const { token } = useToken18();
+  const jsonString = React3.useMemo(() => {
+    try {
+      return JSON.stringify(data, null, indent);
+    } catch (error) {
+      return `Error: ${error instanceof Error ? error.message : "Invalid JSON"}`;
+    }
+  }, [data, indent]);
+  const lines = jsonString.split("\n");
+  const style = {
+    backgroundColor: token.colorBgContainer,
+    borderRadius: token.borderRadius,
+    border: `1px solid ${token.colorBorder}`,
+    overflow: "auto",
+    maxHeight: "600px",
+    ...customStyle
+  };
+  const codeStyle = {
+    display: "block",
+    fontFamily: 'Consolas, Monaco, "Courier New", monospace',
+    fontSize: "13px",
+    lineHeight: "1.6",
+    padding: token.padding,
+    margin: 0,
+    whiteSpace: "pre",
+    color: token.colorText
+  };
+  const lineNumberStyle = {
+    display: "inline-block",
+    width: "40px",
+    color: token.colorTextSecondary,
+    userSelect: "none",
+    textAlign: "right",
+    marginRight: token.marginSM
+  };
+  const highlightedJson = highlightJson(jsonString, token);
+  return /* @__PURE__ */ jsx(UIBox, { className, style, children: /* @__PURE__ */ jsx("pre", { style: codeStyle, children: showLineNumbers ? lines.map((line, index) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("span", { style: lineNumberStyle, children: index + 1 }),
+    /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: highlightJson(line, token) } })
+  ] }, index)) : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: highlightedJson } }) }) });
+}
+function highlightJson(json, token) {
+  json = json.replace(/"([^"]+)":/g, `<span style="color: ${token.colorPrimary}">"$1"</span>:`);
+  json = json.replace(/: "([^"]*)"/g, `: <span style="color: ${token.colorSuccess}">"$1"</span>`);
+  json = json.replace(/: (\d+)/g, `: <span style="color: ${token.colorWarning}">$1</span>`);
+  json = json.replace(/: (true|false)/g, `: <span style="color: ${token.colorInfo}">$1</span>`);
+  json = json.replace(/: (null)/g, `: <span style="color: ${token.colorTextSecondary}">$1</span>`);
+  return json;
+}
+function getLineType(line) {
+  if (line.startsWith("@@")) {
+    return "header";
+  }
+  if (line.startsWith("+")) {
+    return "add";
+  }
+  if (line.startsWith("-")) {
+    return "remove";
+  }
+  return "context";
+}
+var LINE_STYLES = {
+  add: { bg: "rgba(22, 163, 74, 0.12)", border: "var(--success, #16a34a)", color: "var(--success, #16a34a)" },
+  remove: { bg: "rgba(220, 38, 38, 0.12)", border: "var(--error, #dc2626)", color: "var(--error, #dc2626)" },
+  header: { bg: "var(--bg-tertiary, rgba(0,0,0,0.04))", border: "transparent", color: "var(--text-secondary, #6b7280)" },
+  context: { bg: "transparent", border: "transparent", color: "inherit" }
+};
+function UIDiffViewer({
+  diff,
+  showLineNumbers = true,
+  maxHeight = 500,
+  className,
+  style
+}) {
+  if (!diff || diff.trim() === "") {
+    return /* @__PURE__ */ jsx("div", { style: { padding: 16, textAlign: "center" }, children: /* @__PURE__ */ jsx(UITypographyText, { type: "secondary", children: "No changes to display" }) });
+  }
+  const lines = diff.split("\n");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        background: "var(--bg-tertiary, rgba(0,0,0,0.02))",
+        border: "1px solid var(--border-primary, rgba(0,0,0,0.1))",
+        borderRadius: "var(--radius-md, 6px)",
+        fontFamily: 'Monaco, Menlo, "Courier New", monospace',
+        fontSize: 13,
+        lineHeight: 1.5,
+        maxHeight,
+        overflow: "auto",
+        ...style
+      },
+      children: lines.map((line, i) => {
+        const type = getLineType(line);
+        const s = LINE_STYLES[type];
+        const hasLeftBorder = type === "add" || type === "remove";
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              background: s.bg,
+              borderLeft: hasLeftBorder ? `3px solid ${s.border}` : "none",
+              paddingLeft: hasLeftBorder ? 8 : 11
+            },
+            children: [
+              showLineNumbers && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    minWidth: 44,
+                    textAlign: "right",
+                    paddingRight: 12,
+                    userSelect: "none",
+                    color: "var(--text-secondary, #6c757d)",
+                    fontSize: 12
+                  },
+                  children: i + 1
+                }
+              ),
+              /* @__PURE__ */ jsx("pre", { style: { margin: 0, padding: 0, color: s.color, whiteSpace: "pre", flex: 1 }, children: line })
+            ]
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+export { UIAccordion, UIAlert, UIAreaChart, UIAvatar, UIAvatarGroup, UIBadge, UIBarChart, UIBox, UIBreadcrumb, UIButton, UICard, UICheckbox, UICheckboxGroup, UICol, UIColumnChart, UIDatePicker, UIDescriptions, UIDescriptionsItem, UIDiffViewer, UIDivider, UIDrawer, UIDropdown, UIDropdownButton, UIEmptyState, UIErrorState, UIFlex, UIForm, UIFormItem, UIFormList, UIHeader, UIIcon, UIIconButton, UIInput, UIInputNumber, UIInputPassword, UIInputSearch, UIInputTextArea, UIJsonViewer, UILineChart, UIList, UIListItem, UIListItemMeta, UIMarkdownViewer, UIMenu, UIMessage, UIMetricCard, UIModal, UIModalConfirm, UIModalError, UIModalInfo, UIModalSuccess, UIModalWarning, UINotification, UIPage, UIPageHeader, UIPageSection, UIPieChart, UIPopconfirm, UIPopover, UIProgress, UIRadio, UIRadioGroup, UIRangePicker, UIResult, UIRow, UISegmented, UISelect, UIShimmerText, UISkeleton, UISkeletonButton, UISkeletonImage, UISkeletonInput, UISkeletonNode, UISkeletonText, UISlider, UISpace, UISpaceCompact, UISpin, UIStack, UIStatistic, UIStatisticCountdown, UIStatisticsChart, UISteps, UISwitch, UITable, UITabs, UITag, UIText, UITimePicker, UITimeline, UITimelineItem, UITitle, UITooltip, UITree, UITreeDirectoryTree, UITreeNode, UITypographyLink, UITypographyParagraph, UITypographyText, UIUpload, UIUploadDragger, createFillFunction, registerIconRenderer, useChartColors, useUIForm, useUIMessage, useUINotification, useUITheme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map