@taskon/widget-react 0.0.1-beta.5 → 0.0.1-beta.6

package/dist/chunks/{dynamic-import-helper-WmIF58Sb.js → WidgetShell-D7yC894Y.js}

@@ -1,9 +1,9 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { forwardRef, useState, useMemo, useCallback, useEffect } from "react";
-import { r as composeRefs, o as useLayoutEffect2, l as useCallbackRef$1, f as useComposedRefs, P as Primitive, h as useControllableState, e as createContextScope, j as Presence, m as Portal$1, k as composeEventHandlers, g as createSlot$1, D as DismissableLayer, s as createContext2, t as useTaskOnPortalContainer, d as useTaskOnContext, T as ThemeProvider } from "./ThemeProvider-Bt4UZ33y.js";
+import { useState, useMemo, useCallback, useEffect, forwardRef } from "react";
 import { createWidgetApi, parseWidgetConfig } from "@taskon/core";
-import '../dynamic-import-helper.css';function cloudThemeToReactTheme(cloud) {
+import { h as useTaskOnContext, s as useLayoutEffect2, q as useCallbackRef$1, k as useComposedRefs, P as Primitive, m as useControllableState, j as createContextScope, n as Presence, r as Portal$1, o as composeEventHandlers, l as createSlot$1, D as DismissableLayer, w as createContext2, x as useTaskOnPortalContainer, y as composeRefs, T as ThemeProvider } from "./ThemeProvider-mXLdLSkq.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import '../WidgetShell.css';function cloudThemeToReactTheme(cloud) {
   const isDual = cloud.colorMode.type === "dual";
   const modeStrategy = isDual ? cloud.colorMode.dualVariant : "auto";
   let mode;
@@ -49,247 +49,127 @@ import '../dynamic-import-helper.css';function cloudThemeToReactTheme(cloud) {
     }
   };
 }
-var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-var use = React[" use ".trim().toString()];
-function isPromiseLike(value) {
-  return typeof value === "object" && value !== null && "then" in value;
-}
-function isLazyComponent(element) {
-  return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
-}
-// @__NO_SIDE_EFFECTS__
-function createSlot(ownerName) {
-  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React.forwardRef((props, forwardedRef) => {
-    let { children, ...slotProps } = props;
-    if (isLazyComponent(children) && typeof use === "function") {
-      children = use(children._payload);
+function usePagination(options) {
+  const { total, pageSize, initialPage = 0, mode = "pagination" } = options;
+  const [page, setPage] = useState(initialPage);
+  const totalPages = useMemo(() => {
+    return Math.max(1, Math.ceil(total / pageSize));
+  }, [total, pageSize]);
+  const safePage = useMemo(() => {
+    return Math.min(page, totalPages - 1);
+  }, [page, totalPages]);
+  if (safePage !== page) {
+    setPage(safePage);
+  }
+  const hasPrevious = safePage > 0;
+  const hasNext = safePage < totalPages - 1;
+  const goToPage = useCallback(
+    (targetPage) => {
+      const validPage = Math.max(0, Math.min(targetPage, totalPages - 1));
+      setPage(validPage);
+    },
+    [totalPages]
+  );
+  const goToPrevious = useCallback(() => {
+    if (hasPrevious) {
+      setPage((p) => p - 1);
     }
-    const childrenArray = React.Children.toArray(children);
-    const slottable = childrenArray.find(isSlottable);
-    if (slottable) {
-      const newElement = slottable.props.children;
-      const newChildren = childrenArray.map((child) => {
-        if (child === slottable) {
-          if (React.Children.count(newElement) > 1) return React.Children.only(null);
-          return React.isValidElement(newElement) ? newElement.props.children : null;
-        } else {
-          return child;
-        }
-      });
-      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
+  }, [hasPrevious]);
+  const goToNext = useCallback(() => {
+    if (hasNext) {
+      setPage((p) => p + 1);
     }
-    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
-  });
-  Slot2.displayName = `${ownerName}.Slot`;
-  return Slot2;
-}
-var Slot$1 = /* @__PURE__ */ createSlot("Slot");
-// @__NO_SIDE_EFFECTS__
-function createSlotClone(ownerName) {
-  const SlotClone = React.forwardRef((props, forwardedRef) => {
-    let { children, ...slotProps } = props;
-    if (isLazyComponent(children) && typeof use === "function") {
-      children = use(children._payload);
+  }, [hasNext]);
+  const reset = useCallback(() => {
+    setPage(0);
+  }, []);
+  const startIndex = safePage * pageSize + 1;
+  const endIndex = Math.min((safePage + 1) * pageSize, total);
+  const hasMore = useMemo(() => {
+    if (mode === "infinite") {
+      return safePage < totalPages - 1;
     }
-    if (React.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
-      const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React.Fragment) {
-        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
-      }
-      return React.cloneElement(children, props2);
+    return hasNext;
+  }, [mode, safePage, totalPages, hasNext]);
+  const loadedCount = useMemo(() => {
+    if (mode === "infinite") {
+      return Math.min((safePage + 1) * pageSize, total);
     }
-    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
-  });
-  SlotClone.displayName = `${ownerName}.SlotClone`;
-  return SlotClone;
-}
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
-function isSlottable(child) {
-  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
-function mergeProps(slotProps, childProps) {
-  const overrideProps = { ...childProps };
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args) => {
-          const result = childPropValue(...args);
-          slotPropValue(...args);
-          return result;
-        };
-      } else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
-      }
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    return endIndex - startIndex + 1;
+  }, [mode, safePage, pageSize, total, startIndex, endIndex]);
+  const loadMore = useCallback(() => {
+    if (mode === "infinite" && hasMore) {
+      setPage((p) => p + 1);
     }
-  }
-  return { ...slotProps, ...overrideProps };
-}
-function getElementRef(element) {
-  var _a, _b;
-  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
+  }, [mode, hasMore]);
+  return {
+    page: safePage,
+    totalPages,
+    hasPrevious,
+    hasNext,
+    goToPage,
+    goToPrevious,
+    goToNext,
+    reset,
+    startIndex,
+    endIndex,
+    // Infinite 模式专用
+    loadMore,
+    hasMore,
+    loadedCount
+  };
 }
-const Button = forwardRef(
-  ({
-    size = "medium",
-    variant = "primary",
-    loading = false,
-    iconPosition,
-    leftIcon,
-    rightIcon,
-    asChild = false,
-    disabled,
-    className = "",
-    style,
-    children,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? Slot$1 : "button";
-    const actualIconPosition = iconPosition || (leftIcon ? "left" : rightIcon ? "right" : void 0);
-    const isIconOnly = actualIconPosition === "only" || !children && (leftIcon || rightIcon);
-    const baseStyles = {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "var(--taskon-spacing-xs)",
-      fontFamily: "inherit",
-      fontWeight: 500,
-      lineHeight: 1.5,
-      border: "none",
-      outline: "none",
-      cursor: disabled || loading ? "not-allowed" : "pointer",
-      transition: "all 0.2s ease-in-out",
-      position: "relative",
-      userSelect: "none",
-      whiteSpace: "nowrap",
-      opacity: disabled ? 0.5 : 1,
-      ...style
-    };
-    const sizeStyles = {
-      small: {
-        fontSize: "var(--taskon-font-size-sm)",
-        padding: isIconOnly ? "var(--taskon-spacing-xs)" : "var(--taskon-spacing-xs) var(--taskon-spacing-sm)",
-        borderRadius: "var(--taskon-border-radius-sm)",
-        minWidth: isIconOnly ? "24px" : "64px",
-        height: "24px"
-      },
-      medium: {
-        fontSize: "var(--taskon-font-size)",
-        padding: isIconOnly ? "var(--taskon-spacing-xs)" : "var(--taskon-spacing-xs) var(--taskon-spacing-md)",
-        borderRadius: "var(--taskon-border-radius)",
-        minWidth: isIconOnly ? "32px" : "80px",
-        height: "32px"
-      },
-      large: {
-        fontSize: "var(--taskon-font-size-lg)",
-        padding: isIconOnly ? "var(--taskon-spacing-sm)" : "var(--taskon-spacing-sm) var(--taskon-spacing-lg)",
-        borderRadius: "var(--taskon-border-radius)",
-        minWidth: isIconOnly ? "40px" : "96px",
-        height: "40px"
+function useWidgetConfig(widgetId) {
+  const { client } = useTaskOnContext();
+  const [config, setConfig] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!widgetId || !client) {
+      setConfig(null);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    const api = createWidgetApi(client);
+    api.getWidgetInfo(widgetId).then((info) => {
+      if (!cancelled) {
+        setConfig(parseWidgetConfig(info));
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        console.warn("[TaskOn] Failed to load widget config:", err);
+        setError(
+          err instanceof Error ? err.message : "Failed to load widget config"
+        );
+      }
+    }).finally(() => {
+      if (!cancelled) {
+        setIsLoading(false);
       }
+    });
+    return () => {
+      cancelled = true;
     };
-    const variantStyles = {
-      primary: {
-        backgroundColor: "var(--taskon-color-primary)",
-        color: "var(--taskon-color-text-on-primary)"
-      },
-      secondary: {
-        backgroundColor: "var(--taskon-color-secondary)",
-        color: "var(--taskon-color-text-on-primary)"
-      },
-      outline: {
-        backgroundColor: "transparent",
-        color: "var(--taskon-color-text)",
-        border: "1px solid var(--taskon-color-border)"
-      },
-      ghost: {
-        backgroundColor: "transparent",
-        color: "var(--taskon-color-text)"
-      },
-      danger: {
-        backgroundColor: "var(--taskon-color-error)",
-        color: "var(--taskon-color-text-on-primary)"
-      }
-    };
-    const hoverStyles = {
-      primary: "hover:bg-[var(--taskon-color-primary-hover)] active:bg-[var(--taskon-color-primary-active)]",
-      secondary: "hover:opacity-90 active:opacity-80",
-      outline: "hover:bg-[var(--taskon-color-bg-surface-strong)] active:bg-[var(--taskon-color-bg-surface-strong)]",
-      ghost: "hover:bg-[var(--taskon-color-bg-surface-strong)] active:bg-[var(--taskon-color-bg-surface-strong)]",
-      danger: "hover:opacity-90 active:opacity-80"
-    };
-    const mergedStyle = {
-      ...baseStyles,
-      ...sizeStyles[size],
-      ...variantStyles[variant]
-    };
-    const mergedClassName = `${className} ${hoverStyles[variant]}`.trim();
-    const renderLoadingIndicator = () => {
-      if (!loading) return null;
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          style: {
-            display: "inline-block",
-            width: "1em",
-            height: "1em",
-            border: "2px solid currentColor",
-            borderTopColor: "transparent",
-            borderRadius: "50%",
-            animation: "taskon-button-spin 0.6s linear infinite"
-          }
-        }
-      );
-    };
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("style", { children: `
-          @keyframes taskon-button-spin {
-            from {
-              transform: rotate(0deg);
-            }
-            to {
-              transform: rotate(360deg);
-            }
-          }
-        ` }),
-      /* @__PURE__ */ jsxs(
-        Comp,
-        {
-          ref,
-          disabled: disabled || loading,
-          className: mergedClassName,
-          style: mergedStyle,
-          ...props,
-          children: [
-            loading && renderLoadingIndicator(),
-            !loading && leftIcon && actualIconPosition === "left" && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, children: leftIcon }),
-            !isIconOnly && children,
-            !loading && rightIcon && actualIconPosition === "right" && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, children: rightIcon })
-          ]
-        }
-      )
-    ] });
-  }
-);
-Button.displayName = "Button";
+  }, [widgetId, client]);
+  return { config, isLoading, error };
+}
+function useResolvedWidgetConfig(widgetId) {
+  const { config, isLoading, error } = useWidgetConfig(widgetId);
+  const cloudTheme = useMemo(() => {
+    if (!(config == null ? void 0 : config.theme)) return void 0;
+    return cloudThemeToReactTheme(config.theme);
+  }, [config == null ? void 0 : config.theme]);
+  return {
+    functionConfig: (config == null ? void 0 : config.functionConfig) ?? null,
+    cloudTheme,
+    isConfigLoading: isLoading,
+    configError: error
+  };
+}
 var useReactId = React[" useId ".trim().toString()] || (() => void 0);
 var count$1 = 0;
 function useId(deterministicId) {
@@ -1383,7 +1263,7 @@ var DialogOverlay = React.forwardRef(
   }
 );
 DialogOverlay.displayName = OVERLAY_NAME;
-var Slot = createSlot$1("DialogOverlay.RemoveScroll");
+var Slot$1 = createSlot$1("DialogOverlay.RemoveScroll");
 var DialogOverlayImpl = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...overlayProps } = props;
@@ -1391,7 +1271,7 @@ var DialogOverlayImpl = React.forwardRef(
     return (
       // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
       // ie. when `Overlay` and `Content` are siblings
-      /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot$1, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx(
         Primitive.div,
         {
           "data-state": getState(context.open),
@@ -1620,85 +1500,326 @@ function CloseIcon() {
       children: /* @__PURE__ */ jsx(
         "path",
         {
-          d: "M18 6L6 18M6 6L18 18",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          d: "M18 6L6 18M6 6L18 18",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function Dialog({
+  open,
+  onOpenChange,
+  children,
+  title,
+  description,
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  closeOnEscapeKey = true,
+  className,
+  contentClassName,
+  overlayClassName,
+  rightSlot,
+  maxWidth,
+  bodyPadding = true
+}) {
+  const portalContainer = useTaskOnPortalContainer();
+  const contentStyle = maxWidth ? { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth } : {};
+  const handleInteractOutside = (event) => {
+    if (!closeOnOverlayClick) {
+      event.preventDefault();
+    }
+  };
+  const handleEscapeKeyDown = (event) => {
+    if (!closeOnEscapeKey) {
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsx(Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Portal, { container: portalContainer ?? void 0, children: [
+    /* @__PURE__ */ jsx(
+      Overlay,
+      {
+        className: `taskon-dialog-overlay ${overlayClassName || ""}`
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Content,
+      {
+        className: `taskon-dialog-content ${contentClassName || ""} ${className || ""}`,
+        style: contentStyle,
+        "aria-describedby": description ? void 0 : void 0,
+        onInteractOutside: handleInteractOutside,
+        onEscapeKeyDown: handleEscapeKeyDown,
+        children: [
+          title && /* @__PURE__ */ jsx(Title, { className: "taskon-dialog-title--sr-only", children: title }),
+          description && /* @__PURE__ */ jsx(Description, { className: "taskon-dialog-description--sr-only", children: description }),
+          (showCloseButton || rightSlot) && /* @__PURE__ */ jsxs("div", { className: "taskon-dialog-header", children: [
+            rightSlot && /* @__PURE__ */ jsx("div", { className: "taskon-dialog-header-slot", children: rightSlot }),
+            showCloseButton && /* @__PURE__ */ jsx(
+              Close,
+              {
+                className: "taskon-dialog-close",
+                "aria-label": "关闭",
+                children: /* @__PURE__ */ jsx(CloseIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `taskon-dialog-body${bodyPadding ? "" : " taskon-dialog-body--no-padding"}`,
+              children
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+var use = React[" use ".trim().toString()];
+function isPromiseLike(value) {
+  return typeof value === "object" && value !== null && "then" in value;
+}
+function isLazyComponent(element) {
+  return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    const childrenArray = React.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React.Children.count(newElement) > 1) return React.Children.only(null);
+          return React.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+var Slot = /* @__PURE__ */ createSlot("Slot");
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React.cloneElement(children, props2);
+    }
+    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+const Button = forwardRef(
+  ({
+    size = "medium",
+    variant = "primary",
+    loading = false,
+    iconPosition,
+    leftIcon,
+    rightIcon,
+    asChild = false,
+    disabled,
+    className = "",
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const actualIconPosition = iconPosition || (leftIcon ? "left" : rightIcon ? "right" : void 0);
+    const isIconOnly = actualIconPosition === "only" || !children && (leftIcon || rightIcon);
+    const baseStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "var(--taskon-spacing-xs)",
+      fontFamily: "inherit",
+      fontWeight: 500,
+      lineHeight: 1.5,
+      border: "none",
+      outline: "none",
+      cursor: disabled || loading ? "not-allowed" : "pointer",
+      transition: "all 0.2s ease-in-out",
+      position: "relative",
+      userSelect: "none",
+      whiteSpace: "nowrap",
+      opacity: disabled ? 0.5 : 1,
+      ...style
+    };
+    const sizeStyles = {
+      small: {
+        fontSize: "var(--taskon-font-size-sm)",
+        padding: isIconOnly ? "var(--taskon-spacing-xs)" : "var(--taskon-spacing-xs) var(--taskon-spacing-sm)",
+        borderRadius: "var(--taskon-border-radius-sm)",
+        minWidth: isIconOnly ? "24px" : "64px",
+        height: "24px"
+      },
+      medium: {
+        fontSize: "var(--taskon-font-size)",
+        padding: isIconOnly ? "var(--taskon-spacing-xs)" : "var(--taskon-spacing-xs) var(--taskon-spacing-md)",
+        borderRadius: "var(--taskon-border-radius)",
+        minWidth: isIconOnly ? "32px" : "80px",
+        height: "32px"
+      },
+      large: {
+        fontSize: "var(--taskon-font-size-lg)",
+        padding: isIconOnly ? "var(--taskon-spacing-sm)" : "var(--taskon-spacing-sm) var(--taskon-spacing-lg)",
+        borderRadius: "var(--taskon-border-radius)",
+        minWidth: isIconOnly ? "40px" : "96px",
+        height: "40px"
+      }
+    };
+    const variantStyles = {
+      primary: {
+        backgroundColor: "var(--taskon-color-primary)",
+        color: "var(--taskon-color-text-on-primary)"
+      },
+      secondary: {
+        backgroundColor: "var(--taskon-color-secondary)",
+        color: "var(--taskon-color-text-on-primary)"
+      },
+      outline: {
+        backgroundColor: "transparent",
+        color: "var(--taskon-color-text)",
+        border: "1px solid var(--taskon-color-border)"
+      },
+      ghost: {
+        backgroundColor: "transparent",
+        color: "var(--taskon-color-text)"
+      },
+      danger: {
+        backgroundColor: "var(--taskon-color-error)",
+        color: "var(--taskon-color-text-on-primary)"
+      }
+    };
+    const hoverStyles = {
+      primary: "hover:bg-[var(--taskon-color-primary-hover)] active:bg-[var(--taskon-color-primary-active)]",
+      secondary: "hover:opacity-90 active:opacity-80",
+      outline: "hover:bg-[var(--taskon-color-bg-surface-strong)] active:bg-[var(--taskon-color-bg-surface-strong)]",
+      ghost: "hover:bg-[var(--taskon-color-bg-surface-strong)] active:bg-[var(--taskon-color-bg-surface-strong)]",
+      danger: "hover:opacity-90 active:opacity-80"
+    };
+    const mergedStyle = {
+      ...baseStyles,
+      ...sizeStyles[size],
+      ...variantStyles[variant]
+    };
+    const mergedClassName = `${className} ${hoverStyles[variant]}`.trim();
+    const renderLoadingIndicator = () => {
+      if (!loading) return null;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            width: "1em",
+            height: "1em",
+            border: "2px solid currentColor",
+            borderTopColor: "transparent",
+            borderRadius: "50%",
+            animation: "taskon-button-spin 0.6s linear infinite"
+          }
         }
-      )
-    }
-  );
-}
-function Dialog({
-  open,
-  onOpenChange,
-  children,
-  title,
-  description,
-  showCloseButton = true,
-  closeOnOverlayClick = true,
-  closeOnEscapeKey = true,
-  className,
-  contentClassName,
-  overlayClassName,
-  rightSlot,
-  maxWidth,
-  bodyPadding = true
-}) {
-  const portalContainer = useTaskOnPortalContainer();
-  const contentStyle = maxWidth ? { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth } : {};
-  const handleInteractOutside = (event) => {
-    if (!closeOnOverlayClick) {
-      event.preventDefault();
-    }
-  };
-  const handleEscapeKeyDown = (event) => {
-    if (!closeOnEscapeKey) {
-      event.preventDefault();
-    }
-  };
-  return /* @__PURE__ */ jsx(Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Portal, { container: portalContainer ?? void 0, children: [
-    /* @__PURE__ */ jsx(
-      Overlay,
-      {
-        className: `taskon-dialog-overlay ${overlayClassName || ""}`
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      Content,
-      {
-        className: `taskon-dialog-content ${contentClassName || ""} ${className || ""}`,
-        style: contentStyle,
-        "aria-describedby": description ? void 0 : void 0,
-        onInteractOutside: handleInteractOutside,
-        onEscapeKeyDown: handleEscapeKeyDown,
-        children: [
-          title && /* @__PURE__ */ jsx(Title, { className: "taskon-dialog-title--sr-only", children: title }),
-          description && /* @__PURE__ */ jsx(Description, { className: "taskon-dialog-description--sr-only", children: description }),
-          (showCloseButton || rightSlot) && /* @__PURE__ */ jsxs("div", { className: "taskon-dialog-header", children: [
-            rightSlot && /* @__PURE__ */ jsx("div", { className: "taskon-dialog-header-slot", children: rightSlot }),
-            showCloseButton && /* @__PURE__ */ jsx(
-              Close,
-              {
-                className: "taskon-dialog-close",
-                "aria-label": "关闭",
-                children: /* @__PURE__ */ jsx(CloseIcon, {})
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `taskon-dialog-body${bodyPadding ? "" : " taskon-dialog-body--no-padding"}`,
-              children
+      );
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: `
+          @keyframes taskon-button-spin {
+            from {
+              transform: rotate(0deg);
             }
-          )
-        ]
-      }
-    )
-  ] }) });
-}
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        ` }),
+      /* @__PURE__ */ jsxs(
+        Comp,
+        {
+          ref,
+          disabled: disabled || loading,
+          className: mergedClassName,
+          style: mergedStyle,
+          ...props,
+          children: [
+            loading && renderLoadingIndicator(),
+            !loading && leftIcon && actualIconPosition === "left" && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, children: leftIcon }),
+            !isIconOnly && children,
+            !loading && rightIcon && actualIconPosition === "right" && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, children: rightIcon })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Button.displayName = "Button";
 const defaultPaginationMessages = {
   previous: "Previous",
   next: "Next",
@@ -1898,127 +2019,6 @@ function Table({
     loading && data && data.length > 0 && /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-overlay", children: /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-spinner" }) })
   ] });
 }
-function usePagination(options) {
-  const { total, pageSize, initialPage = 0, mode = "pagination" } = options;
-  const [page, setPage] = useState(initialPage);
-  const totalPages = useMemo(() => {
-    return Math.max(1, Math.ceil(total / pageSize));
-  }, [total, pageSize]);
-  const safePage = useMemo(() => {
-    return Math.min(page, totalPages - 1);
-  }, [page, totalPages]);
-  if (safePage !== page) {
-    setPage(safePage);
-  }
-  const hasPrevious = safePage > 0;
-  const hasNext = safePage < totalPages - 1;
-  const goToPage = useCallback(
-    (targetPage) => {
-      const validPage = Math.max(0, Math.min(targetPage, totalPages - 1));
-      setPage(validPage);
-    },
-    [totalPages]
-  );
-  const goToPrevious = useCallback(() => {
-    if (hasPrevious) {
-      setPage((p) => p - 1);
-    }
-  }, [hasPrevious]);
-  const goToNext = useCallback(() => {
-    if (hasNext) {
-      setPage((p) => p + 1);
-    }
-  }, [hasNext]);
-  const reset = useCallback(() => {
-    setPage(0);
-  }, []);
-  const startIndex = safePage * pageSize + 1;
-  const endIndex = Math.min((safePage + 1) * pageSize, total);
-  const hasMore = useMemo(() => {
-    if (mode === "infinite") {
-      return safePage < totalPages - 1;
-    }
-    return hasNext;
-  }, [mode, safePage, totalPages, hasNext]);
-  const loadedCount = useMemo(() => {
-    if (mode === "infinite") {
-      return Math.min((safePage + 1) * pageSize, total);
-    }
-    return endIndex - startIndex + 1;
-  }, [mode, safePage, pageSize, total, startIndex, endIndex]);
-  const loadMore = useCallback(() => {
-    if (mode === "infinite" && hasMore) {
-      setPage((p) => p + 1);
-    }
-  }, [mode, hasMore]);
-  return {
-    page: safePage,
-    totalPages,
-    hasPrevious,
-    hasNext,
-    goToPage,
-    goToPrevious,
-    goToNext,
-    reset,
-    startIndex,
-    endIndex,
-    // Infinite 模式专用
-    loadMore,
-    hasMore,
-    loadedCount
-  };
-}
-function useWidgetConfig(widgetId) {
-  const { client } = useTaskOnContext();
-  const [config, setConfig] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!widgetId || !client) {
-      setConfig(null);
-      setIsLoading(false);
-      setError(null);
-      return;
-    }
-    let cancelled = false;
-    setIsLoading(true);
-    setError(null);
-    const api = createWidgetApi(client);
-    api.getWidgetInfo(widgetId).then((info) => {
-      if (!cancelled) {
-        setConfig(parseWidgetConfig(info));
-      }
-    }).catch((err) => {
-      if (!cancelled) {
-        console.warn("[TaskOn] Failed to load widget config:", err);
-        setError(
-          err instanceof Error ? err.message : "Failed to load widget config"
-        );
-      }
-    }).finally(() => {
-      if (!cancelled) {
-        setIsLoading(false);
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [widgetId, client]);
-  return { config, isLoading, error };
-}
-function useResolvedWidgetConfig(widgetId) {
-  const { config, isLoading, error } = useWidgetConfig(widgetId);
-  const cloudTheme = useMemo(() => {
-    if (!(config == null ? void 0 : config.theme)) return void 0;
-    return cloudThemeToReactTheme(config.theme);
-  }, [config == null ? void 0 : config.theme]);
-  return {
-    functionConfig: (config == null ? void 0 : config.functionConfig) ?? null,
-    cloudTheme,
-    isConfigLoading: isLoading,
-    configError: error
-  };
-}
 function WidgetShell({
   widgetId,
   isConfigLoading,
@@ -2043,29 +2043,20 @@ function WidgetShell({
     ] }) });
   }
   if (errorMessage) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: `${className}-error`, children: /* @__PURE__ */ jsx("span", { className: `${className}-error-message`, children: errorMessage }) }) });
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: `${className}-error`, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${className}-error-message`,
+        style: { overflowWrap: "anywhere", wordBreak: "break-word" },
+        children: errorMessage
+      }
+    ) }) });
   }
   if (resolvedCloudTheme) {
     return /* @__PURE__ */ jsx(ThemeProvider, { theme: resolvedCloudTheme, children });
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
-const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
-  const v = glob[path];
-  if (v) {
-    return typeof v === "function" ? v() : Promise.resolve(v);
-  }
-  return new Promise((_, reject) => {
-    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
-      reject.bind(
-        null,
-        new Error(
-          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
-        )
-      )
-    );
-  });
-};
 export {
   Button as B,
   Dialog as D,
@@ -2074,11 +2065,10 @@ export {
   ReactRemoveScroll as R,
   Table as T,
   WidgetShell as W,
-  __variableDynamicImportRuntimeHelper as _,
-  useResolvedWidgetConfig as a,
+  usePagination as a,
   useId as b,
   cloudThemeToReactTheme as c,
   useFocusGuards as d,
   hideOthers as h,
-  usePagination as u
+  useResolvedWidgetConfig as u
 };