@kb-labs/studio-ui-kit 2.94.0 → 2.96.0

package/dist/index.js

@@ -1,11 +1,12 @@
-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 { theme, Button, Typography, Form, Empty, Modal, message, notification, Space, Row, Col, Divider, Badge, Card, Tag, Avatar, Tooltip, 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, 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 * as React4 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';
+import { marked } from 'marked';
 
 // src/primitives/UIText.tsx
 var { useToken } = theme;
@@ -188,7 +189,7 @@ function UIBadge({ variant = "default", children, ...props }) {
 
 // src/core/UIButton.module.css
 var UIButton_default = {};
-var UIButton = React3.forwardRef(
+var UIButton = React4.forwardRef(
   function UIButton2({ variant = "default", className, ...rest }, ref) {
     const combinedClassName = [UIButton_default.uiButton, className].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsx(
@@ -264,6 +265,8 @@ function UITag({
   closable,
   onClose,
   icon,
+  className,
+  onClick,
   ...rest
 }) {
   const { token } = useToken4();
@@ -275,6 +278,7 @@ function UITag({
     default: token.colorPrimary,
     neutral: token.colorTextSecondary
   };
+  const combinedClassName = ["kb-ui-tag", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     Tag,
     {
@@ -282,6 +286,9 @@ function UITag({
       closable,
       onClose,
       icon,
+      className: combinedClassName,
+      onClick,
+      style: onClick ? { cursor: "pointer" } : void 0,
       ...rest,
       children
     }
@@ -349,7 +356,7 @@ function UIIcon({
       console.warn(`Icon "${iconName}" could not be loaded. Call registerIconRenderer() at app startup.`);
       iconElement = null;
     }
-  } else if (React3.isValidElement(icon)) {
+  } else if (React4.isValidElement(icon)) {
     iconElement = icon;
   }
   if (!iconElement) {
@@ -428,10 +435,40 @@ function UIShimmerText({
     }
   );
 }
+function UICopyButton({ value, size = "small", label, style, ...rest }) {
+  const [copied, setCopied] = React4.useState(false);
+  const handleCopy = (e) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(value).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    UIButton,
+    {
+      variant: "text",
+      size,
+      icon: /* @__PURE__ */ jsx(
+        UIIcon,
+        {
+          name: copied ? "CheckOutlined" : "CopyOutlined",
+          style: { color: copied ? "#52c41a" : void 0, transition: "color 150ms ease" }
+        }
+      ),
+      onClick: handleCopy,
+      style: { transition: "opacity 150ms ease", ...style },
+      ...rest,
+      children: label
+    }
+  );
+}
 var { useToken: useToken6 } = theme;
 function UIMetricCard({
   label,
   value,
+  icon,
+  status = "default",
   trend = "neutral",
   delta,
   unit,
@@ -440,53 +477,56 @@ function UIMetricCard({
   loading = false
 }) {
   const { token } = useToken6();
-  const trendColor = trend === "up" ? token.colorSuccess : trend === "down" ? token.colorError : token.colorText;
+  const iconBgMap = {
+    default: token.colorFillSecondary,
+    info: token.colorInfoBg,
+    success: token.colorSuccessBg,
+    warning: token.colorWarningBg,
+    error: token.colorErrorBg
+  };
+  const iconColorMap = {
+    default: token.colorTextSecondary,
+    info: token.colorInfo,
+    success: token.colorSuccess,
+    warning: token.colorWarning,
+    error: token.colorError
+  };
+  trend === "up" ? token.colorSuccess : trend === "down" ? token.colorError : token.colorTextSecondary;
   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),
-                  "%"
-                ]
-              }
-            )
-          }
-        )
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsx(Card, { size, loading, style: { height: "100%" }, children: /* @__PURE__ */ jsxs(UIBox, { children: [
+    icon && /* @__PURE__ */ jsx("div", { style: {
+      width: 36,
+      height: 36,
+      borderRadius: token.borderRadiusSM,
+      backgroundColor: iconBgMap[status],
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: iconColorMap[status],
+      fontSize: 16,
+      marginBottom: token.marginSM
+    }, children: icon }),
+    /* @__PURE__ */ jsx(UIText, { size: "sm", color: "secondary", as: "div", children: label }),
+    /* @__PURE__ */ jsx(Tooltip, { title: String(value), mouseEnterDelay: 0.6, children: /* @__PURE__ */ jsxs(UIFlex, { align: "baseline", gap: 2, style: { marginTop: 4, overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx(
+        UIText,
+        {
+          size: "2xl",
+          weight: "bold",
+          as: "div",
+          style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 },
+          children: value
+        }
+      ),
+      unit && /* @__PURE__ */ jsx(UIText, { size: "base", color: "secondary", style: { flexShrink: 0 }, 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,
@@ -601,7 +641,7 @@ function createFillFunction(colorMap, colorField) {
 var { useToken: useToken7 } = theme;
 function useChartTheme() {
   const { token } = useToken7();
-  return React3.useMemo(
+  return React4.useMemo(
     () => ({
       defaultColor: token.colorPrimary,
       styleSheet: {
@@ -617,7 +657,7 @@ function useChartTheme() {
 function UILineChart({ colors, disableAutoColors, ...props }) {
   const chartTheme = useChartTheme();
   const palette = useChartColors();
-  const enhancedProps = React3.useMemo(() => {
+  const enhancedProps = React4.useMemo(() => {
     const hasColorField = props.colorField || props.seriesField;
     console.log("[UILineChart] Debug info:", {
       hasColorField,
@@ -657,7 +697,7 @@ function UILineChart({ colors, disableAutoColors, ...props }) {
 var { useToken: useToken8 } = theme;
 function useChartTheme2() {
   const { token } = useToken8();
-  return React3.useMemo(
+  return React4.useMemo(
     () => ({
       defaultColor: token.colorPrimary,
       colors10: [
@@ -716,7 +756,7 @@ function UIColumnChart({ colors, ...props }) {
 var { useToken: useToken9 } = theme;
 function useChartTheme3() {
   const { token } = useToken9();
-  return React3.useMemo(
+  return React4.useMemo(
     () => ({
       defaultColor: token.colorPrimary,
       styleSheet: {
@@ -732,7 +772,7 @@ function useChartTheme3() {
 function UIAreaChart({ colors, disableAutoColors, ...props }) {
   const chartTheme = useChartTheme3();
   const palette = useChartColors();
-  const enhancedProps = React3.useMemo(() => {
+  const enhancedProps = React4.useMemo(() => {
     if (disableAutoColors || !props.colorField || !props.data) {
       return props;
     }
@@ -752,7 +792,7 @@ function UIAreaChart({ colors, disableAutoColors, ...props }) {
 var { useToken: useToken10 } = theme;
 function useChartTheme4() {
   const { token } = useToken10();
-  return React3.useMemo(
+  return React4.useMemo(
     () => ({
       defaultColor: token.colorPrimary,
       styleSheet: {
@@ -768,7 +808,7 @@ function useChartTheme4() {
 function UIPieChart({ colors, disableAutoColors, ...props }) {
   const chartTheme = useChartTheme4();
   const palette = useChartColors();
-  const enhancedProps = React3.useMemo(() => {
+  const enhancedProps = React4.useMemo(() => {
     if (disableAutoColors || !props.colorField || !props.data) {
       return props;
     }
@@ -788,7 +828,7 @@ function UIPieChart({ colors, disableAutoColors, ...props }) {
 var { useToken: useToken11 } = theme;
 function useChartTheme5() {
   const { token } = useToken11();
-  return React3.useMemo(
+  return React4.useMemo(
     () => ({
       defaultColor: token.colorPrimary,
       styleSheet: {
@@ -804,7 +844,7 @@ function useChartTheme5() {
 function UIBarChart({ colors, disableAutoColors, ...props }) {
   const chartTheme = useChartTheme5();
   const palette = useChartColors();
-  const enhancedProps = React3.useMemo(() => {
+  const enhancedProps = React4.useMemo(() => {
     if (disableAutoColors || !props.seriesField || !props.data) {
       return props;
     }
@@ -835,11 +875,11 @@ function UIStatisticsChart({
   chartProps
 }) {
   const palette = useChartColors();
-  const chartColors = React3.useMemo(
+  const chartColors = React4.useMemo(
     () => palette.colors.slice(0, Math.max(metrics.length, 3)),
     [palette.colors, metrics.length]
   );
-  const chartData = React3.useMemo(() => {
+  const chartData = React4.useMemo(() => {
     if (!data) {
       return [];
     }
@@ -1670,6 +1710,9 @@ function UIErrorState({
     (showRetry || action) && /* @__PURE__ */ jsx(UIBox, { mt: 2, children: action || /* @__PURE__ */ jsx(UIButton, { variant: "primary", onClick: onRetry, children: retryText }) })
   ] }) });
 }
+
+// src/feedback/UISkeleton.module.css
+var UISkeleton_default = {};
 function UISkeleton({
   loading = true,
   children,
@@ -1714,36 +1757,28 @@ function UISkeletonText({
   className,
   style
 }) {
-  const widths = Array.isArray(width) ? width : [width];
+  const { token } = theme.useToken();
+  const isArray = Array.isArray(width);
+  const widths = isArray ? width : [width];
+  const outerWidth = isArray ? "100%" : typeof width === "number" ? `${width}px` : width;
   return /* @__PURE__ */ jsx(
     "span",
     {
       className,
-      style: { display: "inline-flex", flexDirection: "column", gap, ...style },
+      style: { display: "inline-flex", flexDirection: "column", gap, width: outerWidth, ...style },
       children: widths.map((w, i) => /* @__PURE__ */ jsx(
         "span",
         {
+          className: UISkeleton_default.skeletonText,
           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"
-              }
-            }
-          )
+            display: "block",
+            width: isArray ? typeof w === "number" ? `${w}px` : w : "100%",
+            height: typeof height === "number" ? `${height}px` : height,
+            borderRadius: token.borderRadiusSM,
+            flexShrink: 0,
+            backgroundImage: `linear-gradient(90deg, ${token.colorBorder} 25%, ${token.colorBgLayout} 50%, ${token.colorBorder} 75%)`,
+            backgroundSize: "400% 100%"
+          }
         },
         i
       ))
@@ -1845,44 +1880,42 @@ function UIPopover(props) {
   return /* @__PURE__ */ jsx(Popover, { ...props });
 }
 var { useToken: useToken17 } = theme;
-function UIMarkdownViewer({
-  content,
-  className,
-  style: customStyle
-}) {
+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;
+  const css = `
+    .kb-md { font-size: ${token.fontSize}px; line-height: 1.75; color: ${token.colorText}; font-family: ${token.fontFamily}; }
+    .kb-md h1,.kb-md h2,.kb-md h3,.kb-md h4,.kb-md h5,.kb-md h6 { font-weight:600; line-height:1.3; margin:1.5em 0 0.5em; color:${token.colorTextHeading}; }
+    .kb-md h1 { font-size:${token.fontSizeHeading1}px; padding-bottom:0.3em; border-bottom:1px solid ${token.colorBorderSecondary}; }
+    .kb-md h2 { font-size:${token.fontSizeHeading2}px; padding-bottom:0.2em; border-bottom:1px solid ${token.colorBorderSecondary}; }
+    .kb-md h3 { font-size:${token.fontSizeHeading3}px; }
+    .kb-md h4 { font-size:${token.fontSizeHeading4}px; }
+    .kb-md p { margin:0.75em 0; }
+    .kb-md a { color:${token.colorPrimary}; text-decoration:none; }
+    .kb-md a:hover { text-decoration:underline; }
+    .kb-md code { font-family:${token.fontFamilyCode}; font-size:0.875em; background:${token.colorFillTertiary}; color:${token.colorTextSecondary}; padding:0.15em 0.4em; border-radius:${token.borderRadiusSM}px; }
+    .kb-md pre { background:${token.colorFillQuaternary}; border:1px solid ${token.colorBorderSecondary}; border-radius:${token.borderRadius}px; padding:16px; overflow-x:auto; margin:1em 0; }
+    .kb-md pre code { background:none; padding:0; font-size:0.85em; color:${token.colorText}; }
+    .kb-md ul,.kb-md ol { padding-left:1.75em; margin:0.75em 0; }
+    .kb-md li { margin:0.25em 0; }
+    .kb-md blockquote { margin:1em 0; padding:0.5em 1em; border-left:4px solid ${token.colorPrimaryBorder}; background:${token.colorFillQuaternary}; color:${token.colorTextSecondary}; border-radius:0 ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0; }
+    .kb-md blockquote p { margin:0; }
+    .kb-md hr { border:none; border-top:1px solid ${token.colorBorderSecondary}; margin:1.5em 0; }
+    .kb-md table { width:100%; border-collapse:collapse; margin:1em 0; font-size:0.9em; }
+    .kb-md th,.kb-md td { border:1px solid ${token.colorBorderSecondary}; padding:8px 12px; text-align:left; }
+    .kb-md th { background:${token.colorFillTertiary}; font-weight:600; }
+    .kb-md tr:nth-child(even) td { background:${token.colorFillQuaternary}; }
+    .kb-md img { max-width:100%; border-radius:${token.borderRadius}px; }
+  `;
+  return /* @__PURE__ */ jsxs(UIBox, { className, style: { padding: token.padding, ...customStyle }, children: [
+    /* @__PURE__ */ jsx("style", { children: css }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "kb-md",
+        dangerouslySetInnerHTML: { __html: marked(content) }
+      }
+    )
+  ] });
 }
 var { useToken: useToken18 } = theme;
 function UIJsonViewer({
@@ -1894,7 +1927,7 @@ function UIJsonViewer({
   style: customStyle
 }) {
   const { token } = useToken18();
-  const jsonString = React3.useMemo(() => {
+  const jsonString = React4.useMemo(() => {
     try {
       return JSON.stringify(data, null, indent);
     } catch (error) {
@@ -2024,6 +2057,6 @@ function UIDiffViewer({
   );
 }
 
-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 };
+export { UIAccordion, UIAlert, UIAreaChart, UIAvatar, UIAvatarGroup, UIBadge, UIBarChart, UIBox, UIBreadcrumb, UIButton, UICard, UICheckbox, UICheckboxGroup, UICol, UIColumnChart, UICopyButton, 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