@taskon/widget-react 0.0.1-beta.2 → 0.0.1-beta.4

package/dist/chunks/{TaskOnProvider-BD6Vp2x8.js → TaskOnProvider-93UxARFo.js}

@@ -1,10 +1,9 @@
 import * as React from "react";
 import React__default, { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { u as useWidgetLocale } from "./useWidgetLocale-JDelxtt8.js";
+import { b as useWidgetLocale, e as createContextScope, f as useComposedRefs, g as createSlot, P as Primitive, B as Branch, h as useControllableState, j as Presence, k as composeEventHandlers, l as useCallbackRef, R as Root, m as Portal, n as dispatchDiscreteCustomEvent, o as useLayoutEffect2, p as TaskOnContext } from "./ThemeProvider-CPI_roeh.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createTaskOnClient, createUserApi, createChainApi, createCommunityTaskApi } from "@taskon/core";
-import { f as createContextScope, g as useComposedRefs, m as createSlot, P as Primitive, B as Branch, i as useControllableState, k as Presence, j as composeEventHandlers, h as useCallbackRef, R as Root, l as Portal, n as dispatchDiscreteCustomEvent, e as useLayoutEffect2, d as TaskOnContext } from "./ThemeProvider-wnSXrNQb.js";
-import { W as WalletContext, c as useToastState, T as ToastContext } from "./useToast-B-wyO5zL.js";
+import { c as createEthereumAdapter, W as WalletContext, b as useToastState, T as ToastContext } from "./useToast-CaRkylKe.js";
 import * as ReactDOM from "react-dom";
 import '../TaskOnProvider.css';const TOKEN_STORAGE_KEY = "taskon_user_token";
 function isBrowser() {
@@ -316,210 +315,6 @@ function useAuth({
   }, [client, setUserInfo, setUserToken]);
   return { login, logout };
 }
-let ethersModule = null;
-const interfaceCache = /* @__PURE__ */ new Map();
-async function loadEthers() {
-  if (ethersModule) {
-    return ethersModule;
-  }
-  try {
-    ethersModule = await import("ethers");
-    return ethersModule;
-  } catch {
-    throw new Error(
-      "ethers.js is required for contract invocation. Please install ethers@^6.0.0"
-    );
-  }
-}
-async function getInterface(abi) {
-  const { ethers } = await loadEthers();
-  const cacheKey = JSON.stringify(abi);
-  let iface = interfaceCache.get(cacheKey);
-  if (!iface) {
-    iface = new ethers.Interface(abi);
-    interfaceCache.set(cacheKey, iface);
-  }
-  return iface;
-}
-function getEthereumProvider() {
-  if (typeof window === "undefined") return null;
-  return window.ethereum ?? null;
-}
-function createEthereumAdapter() {
-  const provider = getEthereumProvider();
-  if (!provider) return null;
-  let currentAddress = null;
-  let currentChainId = null;
-  const adapter = {
-    /**
-     * Connect wallet
-     *
-     * TODO: Current implementation directly calls window.ethereum, cannot show wallet selection modal
-     * Future improvements needed to integrate Web3Modal or similar solutions to support:
-     * 1. Multi-wallet selection (MetaMask, Coinbase, WalletConnect, etc.)
-     * 2. Unified connection modal UI
-     */
-    connect: async () => {
-      const accounts = await provider.request({
-        method: "eth_requestAccounts"
-      });
-      if (!accounts || accounts.length === 0) {
-        throw new Error("No accounts found");
-      }
-      const address = accounts[0];
-      if (!address) {
-        throw new Error("No accounts found");
-      }
-      currentAddress = address;
-      const chainIdHex = await provider.request({
-        method: "eth_chainId"
-      });
-      currentChainId = parseInt(chainIdHex, 16);
-      return address;
-    },
-    /**
-     * Disconnect from wallet
-     * Note: Most wallets don't support programmatic disconnect, can only clear local state
-     */
-    disconnect: async () => {
-      currentAddress = null;
-      currentChainId = null;
-    },
-    /**
-     * Sign message (personal_sign)
-     */
-    signMessage: async (message) => {
-      if (!currentAddress) {
-        throw new Error("Wallet not connected");
-      }
-      const signature = await provider.request({
-        method: "personal_sign",
-        params: [message, currentAddress]
-      });
-      return signature;
-    },
-    /**
-     * Get current address
-     */
-    getAddress: () => currentAddress,
-    /**
-     * Get current chain ID
-     */
-    getChainId: () => currentChainId,
-    /**
-     * Switch network
-     */
-    switchNetwork: async (chainId) => {
-      const chainIdHex = `0x${chainId.toString(16)}`;
-      try {
-        await provider.request({
-          method: "wallet_switchEthereumChain",
-          params: [{ chainId: chainIdHex }]
-        });
-        currentChainId = chainId;
-      } catch (error2) {
-        const err = error2;
-        if (err.code === 4902) {
-          throw new Error("Chain not found in wallet. Please add the network manually.");
-        }
-        throw error2;
-      }
-    },
-    /**
-     * Get wallet's native token balance (for gas estimation)
-     * @returns Balance in ETH (string, formatted)
-     */
-    getBalance: async () => {
-      if (!currentAddress) {
-        throw new Error("Wallet not connected");
-      }
-      const balanceHex = await provider.request({
-        method: "eth_getBalance",
-        params: [currentAddress, "latest"]
-      });
-      const balanceWei = BigInt(balanceHex);
-      const balanceEth = Number(balanceWei) / 1e18;
-      return balanceEth.toString();
-    },
-    /**
-     * Invoke a smart contract method
-     *
-     * 使用 ethers.js 编码合约调用，支持缓存优化：
-     * - ethers 模块只加载一次
-     * - 相同 ABI 的 Interface 实例会被缓存复用
-     *
-     * @param params - Contract invocation parameters
-     * @returns Transaction hash
-     */
-    invokeContract: async (params) => {
-      var _a;
-      if (!currentAddress) {
-        throw new Error("Wallet not connected");
-      }
-      const { contract, abi, method, params: methodParams, chainId, value } = params;
-      if (chainId && currentChainId !== chainId) {
-        await ((_a = adapter.switchNetwork) == null ? void 0 : _a.call(adapter, chainId));
-      }
-      let encodedData;
-      try {
-        const iface = await getInterface(abi);
-        encodedData = iface.encodeFunctionData(method, methodParams);
-      } catch (error2) {
-        if (error2 instanceof Error && error2.message.includes("ethers.js is required")) {
-          throw error2;
-        }
-        throw new Error(
-          `Failed to encode contract call "${method}": ${error2 instanceof Error ? error2.message : String(error2)}`
-        );
-      }
-      const txParams = {
-        from: currentAddress,
-        to: contract,
-        data: encodedData
-      };
-      if (value) {
-        txParams.value = `0x${BigInt(value).toString(16)}`;
-      }
-      const txHash = await provider.request({
-        method: "eth_sendTransaction",
-        params: [txParams]
-      });
-      return txHash;
-    },
-    /**
-     * Listen to account changes
-     */
-    onAccountChange: (callback) => {
-      var _a;
-      const handler = (accounts) => {
-        const accountList = accounts;
-        currentAddress = accountList[0] ?? null;
-        callback(currentAddress);
-      };
-      (_a = provider.on) == null ? void 0 : _a.call(provider, "accountsChanged", handler);
-      return () => {
-        var _a2;
-        return (_a2 = provider.removeListener) == null ? void 0 : _a2.call(provider, "accountsChanged", handler);
-      };
-    },
-    /**
-     * Listen to chain changes
-     */
-    onChainChange: (callback) => {
-      var _a;
-      const handler = (chainIdHex) => {
-        currentChainId = parseInt(chainIdHex, 16);
-        callback(currentChainId);
-      };
-      (_a = provider.on) == null ? void 0 : _a.call(provider, "chainChanged", handler);
-      return () => {
-        var _a2;
-        return (_a2 = provider.removeListener) == null ? void 0 : _a2.call(provider, "chainChanged", handler);
-      };
-    }
-  };
-  return adapter;
-}
 function WalletProvider({
   children,
   config

package/dist/chunks/{ThemeProvider-wnSXrNQb.js → ThemeProvider-CPI_roeh.js}

@@ -1,9 +1,10 @@
 import * as React from "react";
-import { createContext, useContext, useMemo, useState, useEffect } from "react";
-import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState, useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 const ThemeContext = createContext(null);
+const ThemePortalContainerContext = createContext(void 0);
 function useTaskOnTheme() {
   const theme = useContext(ThemeContext);
   if (!theme) {
@@ -11,6 +12,16 @@ function useTaskOnTheme() {
   }
   return theme;
 }
+function useTaskOnPortalContainer() {
+  const container = useContext(ThemePortalContainerContext);
+  if (container !== void 0) {
+    return container;
+  }
+  if (typeof document !== "undefined") {
+    return document.body;
+  }
+  return null;
+}
 const TaskOnContext = createContext(null);
 function useTaskOnContext() {
   const context = useContext(TaskOnContext);
@@ -44,6 +55,73 @@ function useTaskOnAuth() {
     ]
   );
 }
+function isSupportedLocale(locale) {
+  return locale === "en" || locale === "ko" || locale === "ja";
+}
+function warnUnsupportedLocale(locale, widgetId) {
+  if (process.env.NODE_ENV !== "production" && !isSupportedLocale(locale)) {
+    console.warn(
+      `[widget-react] Locale "${locale}" is not fully supported in ${widgetId}. Falling back to English. Supported locales: en, ko, ja`
+    );
+  }
+}
+const localeCache = /* @__PURE__ */ new Map();
+const DEFAULT_LOCALE = "en";
+function useWidgetLocale(options) {
+  const { widgetId, defaultMessages, loadMessages } = options;
+  const { locale } = useTaskOnContext();
+  const getInitialState = () => {
+    if (locale === DEFAULT_LOCALE) {
+      return { messages: defaultMessages, isLoading: false };
+    }
+    const cacheKey = `${widgetId}-${locale}`;
+    if (localeCache.has(cacheKey)) {
+      return { messages: localeCache.get(cacheKey), isLoading: false };
+    }
+    return { messages: defaultMessages, isLoading: true };
+  };
+  const [state, setState] = useState(getInitialState);
+  const loadMessagesRef = useRef(loadMessages);
+  loadMessagesRef.current = loadMessages;
+  const defaultMessagesRef = useRef(defaultMessages);
+  defaultMessagesRef.current = defaultMessages;
+  useEffect(() => {
+    if (locale === DEFAULT_LOCALE) {
+      setState({ messages: defaultMessagesRef.current, isLoading: false });
+      return;
+    }
+    warnUnsupportedLocale(locale, widgetId);
+    const cacheKey = `${widgetId}-${locale}`;
+    if (localeCache.has(cacheKey)) {
+      setState({ messages: localeCache.get(cacheKey), isLoading: false });
+      return;
+    }
+    let isMounted = true;
+    setState((prev) => ({ ...prev, isLoading: true }));
+    loadMessagesRef.current(locale).then((module) => {
+      if (isMounted) {
+        const loadedMessages = module.default;
+        localeCache.set(cacheKey, loadedMessages);
+        setState({ messages: loadedMessages, isLoading: false });
+      }
+    }).catch((error) => {
+      console.warn(
+        `[widget-react] Failed to load locale "${locale}" for ${widgetId}, falling back to English:`,
+        error
+      );
+      if (isMounted) {
+        setState({ messages: defaultMessagesRef.current, isLoading: false });
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [locale, widgetId]);
+  return state;
+}
+function clearLocaleCache() {
+  localeCache.clear();
+}
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler == null ? void 0 : originalEventHandler(event);
@@ -707,28 +785,38 @@ function isFunction(value) {
 }
 const lightDefaultTokens = {
   // Primary colors
-  colorPrimary: "#6366f1",
-  colorPrimaryHover: "#9197fe",
-  colorPrimaryActive: "#4b49cb",
-  colorPrimaryBg: "#f0f3ff",
+  colorPrimary: "#CBFF01",
+  colorPrimaryHover: "#daff2a",
+  colorPrimaryActive: "#a5d900",
+  colorPrimaryBg: "#fdffcd",
   // Secondary color
-  colorSecondary: "#64748b",
+  colorSecondary: "#00FFA3",
   // Status colors
-  colorSuccess: "#22c55e",
-  colorWarning: "#f59e0b",
-  colorError: "#ef4444",
-  // Background colors
-  colorBg: "#ffffff",
-  colorBgElevated: "#ffffff",
-  colorBgSpotlight: "#f8fafc",
+  colorSuccess: "#1FCBAF",
+  colorWarning: "#FFB800",
+  colorError: "#FF4D4D",
+  // Background colors (V2)
+  colorBgCanvas: "#FFFFFF",
+  colorBgSurface: "#fafafb",
+  colorBgSurfaceSubtle: "rgba(26, 29, 31, 0.04)",
+  colorBgSurfaceStrong: "rgba(26, 29, 31, 0.06)",
+  colorBgFloating: "#f4f4f4",
+  colorBgMask: "rgba(26, 29, 31, 0.45)",
+  colorBgInset: "#eaebeb",
+  colorSuccessBg: "#1fcbaf1a",
+  colorWarningBg: "#ffb8001a",
+  colorErrorBg: "#ff4d4d1a",
+  colorSecondaryBg: "#00ffa31a",
   // Text colors
-  colorText: "#0f172a",
-  colorTextSecondary: "#475569",
-  colorTextTertiary: "#94a3b8",
-  colorTextDisabled: "#cbd5e1",
+  colorText: "#1A1D1F",
+  colorTextSecondary: "rgba(26, 29, 31, 0.72)",
+  colorTextTertiary: "rgba(26, 29, 31, 0.6)",
+  colorTextDisabled: "rgba(26, 29, 31, 0.4)",
+  colorLink: "#58AFFF",
+  colorTextOnPrimary: "#000000",
   // Border colors
-  colorBorder: "#e2e8f0",
-  colorBorderSecondary: "#f1f5f9",
+  colorBorder: "rgba(26, 29, 31, 0.1)",
+  colorBorderSecondary: "rgba(26, 29, 31, 0.06)",
   // Border radius
   borderRadius: 8,
   borderRadiusSm: 4,
@@ -747,28 +835,38 @@ const lightDefaultTokens = {
 };
 const darkDefaultTokens = {
   // Primary colors
-  colorPrimary: "#818cf8",
-  colorPrimaryHover: "#adb8ff",
-  colorPrimaryActive: "#6369d2",
-  colorPrimaryBg: "#131525",
+  colorPrimary: "#CBFF01",
+  colorPrimaryHover: "#daff2a",
+  colorPrimaryActive: "#a5d900",
+  colorPrimaryBg: "#1e2600",
   // Secondary color
-  colorSecondary: "#94a3b8",
+  colorSecondary: "#00FFA3",
   // Status colors
-  colorSuccess: "#4ade80",
-  colorWarning: "#fbbf24",
-  colorError: "#f87171",
-  // Background colors
-  colorBg: "#0f172a",
-  colorBgElevated: "#1e293b",
-  colorBgSpotlight: "#334155",
+  colorSuccess: "#1FCBAF",
+  colorWarning: "#FFB800",
+  colorError: "#FF4D4D",
+  // Background colors (V2)
+  colorBgCanvas: "#1A1D1F",
+  colorBgSurface: "#282b2c",
+  colorBgSurfaceSubtle: "rgba(255, 255, 255, 0.04)",
+  colorBgSurfaceStrong: "rgba(255, 255, 255, 0.12)",
+  colorBgFloating: "#313435",
+  colorBgMask: "rgba(26, 29, 31, 0.6)",
+  colorBgInset: "#3a3d3e",
+  colorSuccessBg: "#1fcbaf26",
+  colorWarningBg: "#ffb80026",
+  colorErrorBg: "#ff4d4d26",
+  colorSecondaryBg: "#00ffa326",
   // Text colors
-  colorText: "#f8fafc",
-  colorTextSecondary: "#cbd5e1",
-  colorTextTertiary: "#94a3b8",
-  colorTextDisabled: "#64748b",
+  colorText: "#FFFFFF",
+  colorTextSecondary: "rgba(255, 255, 255, 0.72)",
+  colorTextTertiary: "rgba(255, 255, 255, 0.6)",
+  colorTextDisabled: "rgba(255, 255, 255, 0.4)",
+  colorLink: "#58AFFF",
+  colorTextOnPrimary: "#000000",
   // Border colors
-  colorBorder: "#334155",
-  colorBorderSecondary: "#1e293b",
+  colorBorder: "rgba(255, 255, 255, 0.1)",
+  colorBorderSecondary: "rgba(255, 255, 255, 0.06)",
   // Border radius
   borderRadius: 8,
   borderRadiusSm: 4,
@@ -962,6 +1060,11 @@ function mixColors(color1, color2, weight) {
     b: rgb1.b + (rgb2.b - rgb1.b) * weight
   });
 }
+function withAlpha(color, alpha) {
+  const rgb = hexToRgb(color);
+  if (!rgb) return color;
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+}
 function deriveTokens(seed, mode) {
   const derived = {};
   const isLight = mode === "light";
@@ -982,6 +1085,57 @@ function deriveTokens(seed, mode) {
   if (seed.colorSuccess) derived.colorSuccess = seed.colorSuccess;
   if (seed.colorWarning) derived.colorWarning = seed.colorWarning;
   if (seed.colorError) derived.colorError = seed.colorError;
+  if (seed.colorLink) derived.colorLink = seed.colorLink;
+  if (seed.colorText) derived.colorText = seed.colorText;
+  if (seed.colorTextOnPrimary) {
+    derived.colorTextOnPrimary = seed.colorTextOnPrimary;
+  }
+  if (seed.colorText) {
+    derived.colorTextSecondary = withAlpha(seed.colorText, 0.72);
+    derived.colorTextTertiary = withAlpha(seed.colorText, 0.6);
+    derived.colorTextDisabled = withAlpha(seed.colorText, 0.4);
+    derived.colorBorder = withAlpha(seed.colorText, 0.1);
+    derived.colorBorderSecondary = withAlpha(seed.colorText, 0.06);
+  }
+  if (seed.colorBgBase) {
+    derived.colorBgCanvas = seed.colorBgBase;
+    if (seed.colorText) {
+      derived.colorBgSurface = mixColors(
+        seed.colorBgBase,
+        seed.colorText,
+        0.06
+      );
+      derived.colorBgSurfaceSubtle = withAlpha(seed.colorText, 0.04);
+      derived.colorBgSurfaceStrong = withAlpha(seed.colorText, 0.12);
+      derived.colorBgFloating = mixColors(
+        seed.colorBgBase,
+        seed.colorText,
+        0.1
+      );
+      derived.colorBgInset = mixColors(
+        seed.colorBgBase,
+        seed.colorText,
+        0.14
+      );
+      derived.colorBgMask = isLight ? withAlpha(seed.colorText, 0.45) : withAlpha(seed.colorBgBase, 0.6);
+    } else {
+      derived.colorBgSurface = seed.colorBgBase;
+      derived.colorBgFloating = seed.colorBgBase;
+      derived.colorBgInset = seed.colorBgBase;
+    }
+  }
+  if (seed.colorSecondary) {
+    derived.colorSecondaryBg = withAlpha(seed.colorSecondary, 0.15);
+  }
+  if (seed.colorSuccess) {
+    derived.colorSuccessBg = withAlpha(seed.colorSuccess, 0.15);
+  }
+  if (seed.colorWarning) {
+    derived.colorWarningBg = withAlpha(seed.colorWarning, 0.15);
+  }
+  if (seed.colorError) {
+    derived.colorErrorBg = withAlpha(seed.colorError, 0.15);
+  }
   if (seed.borderRadius !== void 0) {
     derived.borderRadius = seed.borderRadius;
     derived.borderRadiusSm = Math.max(0, seed.borderRadius - 4);
@@ -992,6 +1146,21 @@ function deriveTokens(seed, mode) {
     derived.fontSizeSm = seed.fontSize - 2;
     derived.fontSizeLg = seed.fontSize + 2;
   }
+  if (seed.spacingBaseStep !== void 0 || seed.spacingChangeUnit !== void 0) {
+    const base = Math.max(1, Number(seed.spacingBaseStep) || 1);
+    const unit = Math.max(1, Number(seed.spacingChangeUnit) || 1);
+    const spacingXs = base;
+    const spacingSm = base + unit;
+    const spacingMd = base + unit * 3;
+    const spacingLg = base + unit * 5;
+    const spacingXl = base + unit * 7;
+    derived.spacing = spacingSm;
+    derived.spacingXs = spacingXs;
+    derived.spacingSm = spacingSm;
+    derived.spacingMd = spacingMd;
+    derived.spacingLg = spacingLg;
+    derived.spacingXl = spacingXl;
+  }
   return derived;
 }
 function mergeTokens(defaults, derived, override) {
@@ -1008,9 +1177,9 @@ function getSystemThemeMode() {
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 const defaultTheme = {
-  mode: "light",
+  mode: "dark",
   compact: false,
-  tokens: lightDefaultTokens
+  tokens: darkDefaultTokens
 };
 function toKebabCase(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -1037,7 +1206,7 @@ function resolveTheme(config, systemMode) {
   } else if (config.mode) {
     resolvedMode = config.mode;
   } else {
-    resolvedMode = "light";
+    resolvedMode = "dark";
   }
   const defaultTokens = resolvedMode === "light" ? lightDefaultTokens : darkDefaultTokens;
   const modeConfig = resolvedMode === "light" ? config.light : config.dark;
@@ -1061,6 +1230,9 @@ function ThemeProvider({
   theme: themeConfig,
   children
 }) {
+  const [portalContainer, setPortalContainer] = useState(
+    null
+  );
   const [systemMode, setSystemMode] = useState(
     () => getSystemThemeMode()
   );
@@ -1084,14 +1256,30 @@ function ThemeProvider({
     () => tokensToCssVariables(resolvedTheme.tokens),
     [resolvedTheme.tokens]
   );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: resolvedTheme, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: resolvedTheme, children: /* @__PURE__ */ jsx(ThemePortalContainerContext.Provider, { value: portalContainer, children: /* @__PURE__ */ jsxs(
     "div",
     {
       style: cssVariables,
       "data-taskon-theme": resolvedTheme.mode,
-      children
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setPortalContainer,
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: 0,
+              height: 0
+            }
+          }
+        ),
+        children
+      ]
     }
-  ) });
+  ) }) });
 }
 export {
   Branch as B,
@@ -1100,19 +1288,23 @@ export {
   Root as R,
   ThemeProvider as T,
   useTaskOnTheme as a,
-  useTaskOnContext as b,
-  composeRefs as c,
-  TaskOnContext as d,
-  useLayoutEffect2 as e,
-  createContextScope as f,
-  useComposedRefs as g,
-  useCallbackRef as h,
-  useControllableState as i,
-  composeEventHandlers as j,
-  Presence as k,
-  Portal as l,
-  createSlot as m,
+  useWidgetLocale as b,
+  clearLocaleCache as c,
+  useTaskOnContext as d,
+  createContextScope as e,
+  useComposedRefs as f,
+  createSlot as g,
+  useControllableState as h,
+  isSupportedLocale as i,
+  Presence as j,
+  composeEventHandlers as k,
+  useCallbackRef as l,
+  Portal as m,
   dispatchDiscreteCustomEvent as n,
-  createContext2 as o,
+  useLayoutEffect2 as o,
+  TaskOnContext as p,
+  composeRefs as q,
+  createContext2 as r,
+  useTaskOnPortalContainer as s,
   useTaskOnAuth as u
 };