@arcblock/ux 3.1.49 → 3.1.51

package/lib/Datatable/CustomToolbar.js

@@ -1,10 +1,10 @@
-import { jsx as t, jsxs as r, Fragment as S } from "react/jsx-runtime";
+import { jsx as t, jsxs as l, Fragment as S } from "react/jsx-runtime";
 import { useState as T, useRef as V, isValidElement as v } from "react";
-import i from "prop-types";
+import n from "prop-types";
 import { TableFilter as ue, TableViewCol as pe } from "mui-datatables";
-import he, { PrintContextConsumer as me } from "react-to-print";
-import { MoreVert as fe, CloudDownload as be, ViewColumn as Ce, FilterList as ge, Print as $ } from "@mui/icons-material";
-import { Popover as xe, Tooltip as D, IconButton as R, ListItemIcon as L, ListItemText as j, MenuItem as U, Menu as we, LinearProgress as ye, useTheme as Te, useMediaQuery as ve } from "@mui/material";
+import me, { PrintContextConsumer as fe } from "react-to-print";
+import { MoreVert as he, CloudDownload as be, ViewColumn as Ce, FilterList as we, Print as $ } from "@mui/icons-material";
+import { Popover as xe, Tooltip as D, IconButton as R, ListItemIcon as L, ListItemText as j, MenuItem as U, Menu as ge, LinearProgress as ye, useTheme as Te, useMediaQuery as ve } from "@mui/material";
 import { useDeepCompareEffect as Re } from "ahooks";
 import { handleCSVDownload as ke } from "./utils.js";
 import Fe from "./TableSearch.js";
@@ -15,7 +15,7 @@ function Ie() {
   return ve(s.breakpoints.down("sm"));
 }
 function Be({ ...s }) {
-  const [f, d] = T(null), k = V(null), F = Ie(), N = V(Math.random().toString(32).slice(2)), [O, A] = T(!1), { customPreButtons: b, customButtons: C, loading: u, disabled: g } = Pe(), {
+  const [h, d] = T(null), k = V(null), F = Ie(), N = V(Math.random().toString(32).slice(2)), [O, A] = T(!1), { customPreButtons: b, customButtons: C, loading: u, disabled: w } = Pe(), {
     data: Q = [],
     options: o,
     components: p = {},
@@ -31,20 +31,20 @@ function Be({ ...s }) {
     searchText: Z = null,
     searchTextUpdate: _,
     searchClose: ee
-  } = s, [B, h] = T({}), te = o.customToolbar ? o.customToolbar(s) : "", { search: oe, downloadCsv: ie, print: m, viewColumns: ne, filterTable: le } = o.textLabels.toolbar, re = o.search === !1 || o.search === "false", x = o.print === !1 || o.print === "false", se = p.TableFilter || ue, ae = p.TableViewCol || pe;
+  } = s, [B, m] = T({}), te = o.customToolbar ? o.customToolbar(s) : "", { search: oe, downloadCsv: ne, print: f, viewColumns: ie, filterTable: re } = o.textLabels.toolbar, le = o.search === !1 || o.search === "false", x = o.print === !1 || o.print === "false", se = p.TableFilter || ue, ae = p.TableViewCol || pe;
   Re(() => {
-    (u || g) && h({});
-  }, [u, g]);
-  const q = (e) => /* @__PURE__ */ t(he, { content: () => s.tableRef(), children: /* @__PURE__ */ t(me, { children: e }) }), w = (e) => `toolbar-pop-${N.current}-${e}`, a = [];
+    (u || w) && m({});
+  }, [u, w]);
+  const q = (e) => /* @__PURE__ */ t(me, { content: () => s.tableRef(), children: /* @__PURE__ */ t(fe, { children: e }) }), g = (e) => `toolbar-pop-${N.current}-${e}`, a = [];
   o.download === !1 || o.download === "false" || a.push({
     icon: /* @__PURE__ */ t(be, {}),
-    title: ie,
+    title: ne,
     onClick: () => {
       ke(s);
     }
   }), o.viewColumns === !1 || o.viewColumns === "false" || a.push({
     icon: /* @__PURE__ */ t(Ce, {}),
-    title: ne,
+    title: ie,
     // eslint-disable-next-line react/no-unstable-nested-components
     popRender() {
       return /* @__PURE__ */ t(
@@ -60,8 +60,8 @@ function Be({ ...s }) {
       );
     }
   }), o.filter === !1 || o.filter === "false" || a.push({
-    icon: /* @__PURE__ */ t(ge, {}),
-    title: le,
+    icon: /* @__PURE__ */ t(we, {}),
+    title: re,
     // eslint-disable-next-line react/no-unstable-nested-components
     popRender() {
       return /* @__PURE__ */ t(
@@ -83,50 +83,50 @@ function Be({ ...s }) {
   const E = [...b, !x, ...a, ...C].filter((e) => !!e).length > 1 && F, M = [], ce = [...b, ...a, ...C].map((e, c) => {
     if (v(e))
       return e;
-    const n = w(c);
+    const i = g(c);
     if (e.icon) {
-      const { popRender: l, icon: y } = e;
-      return l && M.push(
+      const { popRender: r, icon: y } = e;
+      return r && M.push(
         /* @__PURE__ */ t(
           xe,
           {
-            open: !!B[n],
-            anchorEl: () => B[n],
+            open: !!B[i],
+            anchorEl: () => B[i],
             onClose: () => {
-              h({});
+              m({});
             },
             anchorOrigin: {
               vertical: "bottom",
               horizontal: "right"
             },
-            children: /* @__PURE__ */ t("div", { children: l() })
+            children: /* @__PURE__ */ t("div", { children: r() })
           },
-          n
+          i
         )
       ), /* @__PURE__ */ t(D, { title: e.title, children: /* @__PURE__ */ t(
         R,
         {
           "data-testid": `${e.title}-iconButton`,
-          id: `btn-${n}`,
+          id: `btn-${i}`,
           "aria-label": e.title,
           onClick: () => {
-            e.onClick && e.onClick(), l && h({
-              [n]: document.getElementById(`btn-${n}`)
+            e.onClick && e.onClick(), r && m({
+              [i]: document.getElementById(`btn-${i}`)
             });
           },
           children: /* @__PURE__ */ t("div", { className: "custom-toolbar-icon", children: y })
         }
-      ) }, n);
+      ) }, i);
     }
     return e;
   }), de = [...b, ...a, ...C].map((e, c) => {
-    const n = w(c);
-    let l;
+    const i = g(c);
+    let r;
     if (v(e))
-      l = e;
+      r = e;
     else if (e.icon) {
       const { icon: y } = e;
-      l = /* @__PURE__ */ r(S, { children: [
+      r = /* @__PURE__ */ l(S, { children: [
         /* @__PURE__ */ t(L, { children: y }),
         /* @__PURE__ */ t(j, { children: e.title })
       ] });
@@ -135,17 +135,17 @@ function Be({ ...s }) {
       U,
       {
         onClick: () => {
-          d(null), e.onClick && e.onClick(), e.popRender && h({
-            [n]: k.current
+          d(null), e.onClick && e.onClick(), e.popRender && m({
+            [i]: k.current
           });
         },
-        children: l
+        children: r
       },
-      n
+      i
     );
   });
-  return /* @__PURE__ */ r("div", { children: [
-    /* @__PURE__ */ r(qe, { children: [
+  return /* @__PURE__ */ l("div", { children: [
+    /* @__PURE__ */ l(qe, { children: [
       /* @__PURE__ */ t(
         "div",
         {
@@ -153,8 +153,8 @@ function Be({ ...s }) {
           children: /* @__PURE__ */ t("div", { className: "custom-toobar-title-inner", children: /* @__PURE__ */ t("span", { children: I }) })
         }
       ),
-      /* @__PURE__ */ r("div", { className: `custom-toobar-btns ${u || g ? "toobar-btns-disabled" : ""}`, children: [
-        !re && /* @__PURE__ */ t(
+      /* @__PURE__ */ l("div", { className: `custom-toobar-btns ${u || w ? "toobar-btns-disabled" : ""}`, children: [
+        !le && /* @__PURE__ */ t(
           Fe,
           {
             search: oe,
@@ -165,12 +165,12 @@ function Be({ ...s }) {
             onSearchOpen: A
           }
         ),
-        !E && /* @__PURE__ */ r(S, { children: [
-          !x && q(({ handlePrint: e }) => /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(D, { title: m, children: /* @__PURE__ */ t(
+        !E && /* @__PURE__ */ l(S, { children: [
+          !x && q(({ handlePrint: e }) => /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(D, { title: f, children: /* @__PURE__ */ t(
             R,
             {
-              "data-testid": `${m}-iconButton`,
-              "aria-label": m,
+              "data-testid": `${f}-iconButton`,
+              "aria-label": f,
               disabled: o.print === "disabled",
               onClick: e,
               children: /* @__PURE__ */ t($, {})
@@ -183,20 +183,20 @@ function Be({ ...s }) {
           {
             ref: k,
             "aria-haspopup": "true",
-            "aria-expanded": f ? "true" : void 0,
+            "aria-expanded": h ? "true" : void 0,
             onClick: (e) => d(e.currentTarget),
             style: { flexShrink: 0 },
-            children: /* @__PURE__ */ t(fe, {})
+            children: /* @__PURE__ */ t(he, {})
           }
         )
       ] }),
       te
     ] }),
-    /* @__PURE__ */ r(
-      we,
+    /* @__PURE__ */ l(
+      ge,
       {
-        anchorEl: f,
-        open: !!f,
+        anchorEl: h,
+        open: !!h,
         onClose: () => d(null),
         slotProps: {
           list: {
@@ -204,7 +204,7 @@ function Be({ ...s }) {
           }
         },
         children: [
-          !x && q(({ handlePrint: e }) => /* @__PURE__ */ r(
+          !x && q(({ handlePrint: e }) => /* @__PURE__ */ l(
             U,
             {
               onClick: () => {
@@ -212,7 +212,7 @@ function Be({ ...s }) {
               },
               children: [
                 /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t($, { fontSize: "small" }) }),
-                /* @__PURE__ */ t(j, { children: m })
+                /* @__PURE__ */ t(j, { children: f })
               ]
             }
           )),
@@ -220,46 +220,39 @@ function Be({ ...s }) {
         ]
       }
     ),
-    M.map((e, c) => /* @__PURE__ */ t("div", { children: e }, w(c))),
+    M.map((e, c) => /* @__PURE__ */ t("div", { children: e }, g(c))),
     /* @__PURE__ */ t(Ee, { children: u && /* @__PURE__ */ t(ye, { className: "toolbar-progress" }) })
   ] });
 }
 Be.propTypes = {
-  data: i.array,
-  options: i.object.isRequired,
-  components: i.object,
-  columns: i.array.isRequired,
-  filterList: i.array,
-  filterData: i.array,
-  filterUpdate: i.func.isRequired,
-  resetFilters: i.func.isRequired,
-  updateFilterByType: i.func.isRequired,
-  toggleViewColumn: i.func.isRequired,
-  updateColumns: i.func.isRequired,
-  title: i.any,
-  searchText: i.any,
-  searchTextUpdate: i.func.isRequired,
-  searchClose: i.func.isRequired,
-  tableRef: i.func.isRequired
+  data: n.array,
+  options: n.object.isRequired,
+  components: n.object,
+  columns: n.array.isRequired,
+  filterList: n.array,
+  filterData: n.array,
+  filterUpdate: n.func.isRequired,
+  resetFilters: n.func.isRequired,
+  updateFilterByType: n.func.isRequired,
+  toggleViewColumn: n.func.isRequired,
+  updateColumns: n.func.isRequired,
+  title: n.any,
+  searchText: n.any,
+  searchTextUpdate: n.func.isRequired,
+  searchClose: n.func.isRequired,
+  tableRef: n.func.isRequired
 };
 const qe = z("div")`
   display: flex;
   align-items: center;
-  height: 56px;
+  flex-wrap: wrap;
   .custom-toobar-title {
-    position: relative;
-    flex: 1;
+    flex: 1 1 auto;
     font-size: 18px;
     font-weight: 800;
-    height: 56px;
     transition: all ease 0.3s;
     &-inner {
-      line-height: 56px;
       width: 100%;
-      height: 56px;
-      position: absolute;
-      left: 0;
-      top: 0;
       span {
         display: inline-block;
         max-width: 100%;

package/lib/NavMenu/images/aigne-image-smith.svg.js

@@ -0,0 +1,42 @@
+import * as t from "react";
+const e = (o) => /* @__PURE__ */ t.createElement("svg", { viewBox: "0 0 902 902", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...o }, /* @__PURE__ */ t.createElement("rect", { width: 902, height: 902, rx: 212, fill: "url(#paint0_linear_3783_1258)", style: {} }), /* @__PURE__ */ t.createElement("rect", { x: 166, y: 247, width: 569, height: 409, rx: 80, stroke: "white", style: {
+  stroke: "white",
+  strokeOpacity: 1
+}, strokeWidth: 40 }), /* @__PURE__ */ t.createElement("ellipse", { cx: 371, cy: 452, rx: 37, ry: 65, fill: "white", style: {
+  fill: "white",
+  fillOpacity: 1
+} }), /* @__PURE__ */ t.createElement("ellipse", { cx: 531, cy: 452, rx: 37, ry: 65, fill: "white", style: {
+  fill: "white",
+  fillOpacity: 1
+} }), /* @__PURE__ */ t.createElement("defs", null, /* @__PURE__ */ t.createElement("linearGradient", { id: "paint0_linear_3783_1258", x1: 84, y1: 78.5, x2: 811.5, y2: 850.5, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ t.createElement("stop", { stopColor: "#AAF4EF", style: {
+  stopColor: "#AAF4EF",
+  stopColor: "color(display-p3 0.6667 0.9569 0.9373)",
+  stopOpacity: 1
+} }), /* @__PURE__ */ t.createElement("stop", { offset: 0.180804, stopColor: "#C7F37F", style: {
+  stopColor: "#C7F37F",
+  stopColor: "color(display-p3 0.7798 0.9512 0.4996)",
+  stopOpacity: 1
+} }), /* @__PURE__ */ t.createElement("stop", { offset: 0.361299, stopColor: "#FFD071", style: {
+  stopColor: "#FFD071",
+  stopColor: "color(display-p3 1.0000 0.8141 0.4422)",
+  stopOpacity: 1
+} }), /* @__PURE__ */ t.createElement("stop", { offset: 0.546216, stopColor: "#FF9898", style: {
+  stopColor: "#FF9898",
+  stopColor: "color(display-p3 1.0000 0.5960 0.5960)",
+  stopOpacity: 1
+} }), /* @__PURE__ */ t.createElement("stop", { offset: 0.72214, stopColor: "#FF89E0", style: {
+  stopColor: "#FF89E0",
+  stopColor: "color(display-p3 1.0000 0.5360 0.8769)",
+  stopOpacity: 1
+} }), /* @__PURE__ */ t.createElement("stop", { offset: 0.898804, stopColor: "#B695FE", style: {
+  stopColor: "#B695FE",
+  stopColor: "color(display-p3 0.7137 0.5843 0.9961)",
+  stopOpacity: 1
+} }), /* @__PURE__ */ t.createElement("stop", { offset: 1, stopColor: "#7C8EED", style: {
+  stopColor: "#7C8EED",
+  stopColor: "color(display-p3 0.4863 0.5569 0.9294)",
+  stopOpacity: 1
+} }))));
+export {
+  e as default
+};

package/lib/NavMenu/products.js

@@ -1,19 +1,19 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useRef as T, useState as $, useEffect as S } from "react";
+import { useRef as G, useState as T, useEffect as S } from "react";
 import { Link as p } from "react-router-dom";
-import { useMemoizedFn as A, useCreation as F } from "ahooks";
-import { Box as w, useTheme as G } from "@mui/material";
+import { useMemoizedFn as A, useCreation as $ } from "ahooks";
+import { Box as w, useTheme as F } from "@mui/material";
 import B from "./sub-item-group.js";
-import { Item as K } from "./nav-menu.js";
+import { Item as E } from "./nav-menu.js";
 import { styled as C } from "../Theme/index.js";
-import { useNavMenuContext as E } from "./nav-menu-context.js";
+import { useNavMenuContext as K } from "./nav-menu-context.js";
 import { translate as L } from "../Locale/util.js";
 import { useLocaleContext as _ } from "../Locale/context.js";
 import M from "./images/nft-studio.svg.js";
 import O from "./images/creator-studio.svg.js";
 import P from "./images/blocklet-launcher.svg.js";
-import H from "./images/blocklet-store.svg.js";
-import R from "./images/web3-kit.svg.js";
+import R from "./images/blocklet-store.svg.js";
+import H from "./images/web3-kit.svg.js";
 import z from "./images/blocklet-framework.svg.js";
 import U from "./images/abt-network.svg.js";
 import j from "./images/blocklet-server.svg.js";
@@ -23,10 +23,11 @@ import J from "./images/did-wallet.svg.js";
 import Q from "./images/vc.svg.js";
 import X from "./images/payment-kit.png";
 import Y from "./images/aigne.svg.js";
+import Z from "./images/aigne-image-smith.svg.js";
 import I from "./images/arcsphere.svg.js";
-import Z from "./images/aistro.png";
-import { getUTMUrl as ee } from "../withTracker/libs/utm.js";
-const v = 260, ie = {
+import ee from "./images/aistro.png";
+import { getUTMUrl as ie } from "../withTracker/libs/utm.js";
+const v = 260, te = {
   en: {
     groups: {
       applications: "Applications",
@@ -106,6 +107,9 @@ const v = 260, ie = {
       aigneWebSmith: {
         description: "Build and deploy AI-powered web apps"
       },
+      aigneImageSmith: {
+        description: "Generate and Refine Images with AI"
+      },
       aigneCLI: {
         description: "Develop agents from the command line"
       },
@@ -202,6 +206,9 @@ const v = 260, ie = {
       aigneWebSmith: {
         description: "构建并部署 AI 驱动的 Web 应用"
       },
+      aigneImageSmith: {
+        description: "使用 AI 生成和优化图像"
+      },
       aigneCLI: {
         description: "通过命令行开发 Agent"
       },
@@ -298,6 +305,9 @@ const v = 260, ie = {
       aigneWebSmith: {
         description: "構建並部署 AI 驅動的 Web 應用"
       },
+      aigneImageSmith: {
+        description: "使用 AI 生成和優化圖像"
+      },
       aigneCLI: {
         description: "透過命令列開發 Agent"
       },
@@ -394,6 +404,9 @@ const v = 260, ie = {
       aigneWebSmith: {
         description: "AI駆動Webアプリの構築とデプロイ"
       },
+      aigneImageSmith: {
+        description: "AIで画像を生成・最適化"
+      },
       aigneCLI: {
         description: "コマンドラインからエージェントを開発"
       },
@@ -413,7 +426,7 @@ const v = 260, ie = {
   }
 }, oe = C(w)`
   padding: 8px;
-  background: ${({ theme: t }) => t.palette.grey[100]};
+  background: ${({ theme: o }) => o.palette.grey[100]};
   border-radius: 8px;
 
   &.is-inline {
@@ -432,20 +445,20 @@ const v = 260, ie = {
   .MuiGrid-container + .MuiGrid-container {
     margin-top: 0px;
   }
-`, te = C(w, { shouldForwardProp: (t) => t !== "maxContent" })(
-  ({ theme: t, maxContent: c }) => ({
+`, re = C(w, { shouldForwardProp: (o) => o !== "maxContent" })(
+  ({ theme: o, maxContent: c }) => ({
     display: "grid",
-    gap: t.spacing(1),
+    gap: o.spacing(1),
     gridTemplateColumns: `repeat(1, ${c}px)`,
-    [t.breakpoints.up("md")]: {
+    [o.breakpoints.up("md")]: {
       gridTemplateColumns: `repeat(2, ${c}px)`
     },
-    [t.breakpoints.up("lg")]: {
+    [o.breakpoints.up("lg")]: {
       gridTemplateColumns: `repeat(3, ${c}px)`
     }
   })
 );
-function y({ color: t = "black", backgroundColor: c = "transparent", children: a }) {
+function y({ color: o = "black", backgroundColor: c = "transparent", children: a }) {
   return /* @__PURE__ */ e(
     w,
     {
@@ -454,7 +467,7 @@ function y({ color: t = "black", backgroundColor: c = "transparent", children: a
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        color: t,
+        color: o,
         backgroundColor: c,
         borderRadius: "4px"
       },
@@ -462,24 +475,24 @@ function y({ color: t = "black", backgroundColor: c = "transparent", children: a
     }
   );
 }
-function h({ color: t = "black", backgroundColor: c = "transparent" }) {
-  return /* @__PURE__ */ e(y, { color: t, backgroundColor: c, children: /* @__PURE__ */ e(q, { style: { width: "100%" } }) });
+function h({ color: o = "black", backgroundColor: c = "transparent" }) {
+  return /* @__PURE__ */ e(y, { color: o, backgroundColor: c, children: /* @__PURE__ */ e(q, { style: { width: "100%" } }) });
 }
-function s({ color: t = "black", backgroundColor: c = "transparent" }) {
-  return /* @__PURE__ */ e(y, { color: t, backgroundColor: c, children: /* @__PURE__ */ e(Y, { style: { width: "100%", height: "100%" } }) });
+function s({ color: o = "black", backgroundColor: c = "transparent" }) {
+  return /* @__PURE__ */ e(y, { color: o, backgroundColor: c, children: /* @__PURE__ */ e(Y, { style: { width: "100%", height: "100%" } }) });
 }
-const W = (t) => {
+const N = (o) => {
   try {
-    return new URL(t).origin !== window.location.origin;
+    return new URL(o).origin !== window.location.origin;
   } catch {
     return !1;
   }
 };
-function o({ to: t, children: c, className: a = "", ...u }) {
-  return W(t) ? /* @__PURE__ */ e(p, { to: ee(t, "header"), target: "_blank", rel: "noreferrer noopener", className: a, ...u, children: c }) : /* @__PURE__ */ e(p, { to: t, className: a, ...u, children: c });
+function t({ to: o, children: c, className: a = "", ...m }) {
+  return N(o) ? /* @__PURE__ */ e(p, { to: ie(o, "header"), target: "_blank", rel: "noreferrer noopener", className: a, ...m, children: c }) : /* @__PURE__ */ e(p, { to: o, className: a, ...m, children: c });
 }
-function Fe({ className: t = "", type: c, ...a }) {
-  const { mode: u } = E(), k = G(), { locale: r = "en" } = _() || {}, l = T(null), { palette: f } = k, i = A((n, d = {}) => L(ie, n, r, "en", d)), [N, D] = $(v), m = A(() => {
+function Be({ className: o = "", type: c, ...a }) {
+  const { mode: m } = K(), k = F(), { locale: r = "en" } = _() || {}, l = G(null), { palette: f } = k, i = A((n, d = {}) => L(te, n, r, "en", d)), [W, D] = T(v), u = A(() => {
     if (!l.current) return;
     const n = l.current.querySelectorAll(".navmenu-item__content");
     let d = v;
@@ -489,19 +502,19 @@ function Fe({ className: t = "", type: c, ...a }) {
     }), D(d);
   });
   S(() => {
-    m();
-  }, [k, r, c, m]), S(() => {
+    u();
+  }, [k, r, c, u]), S(() => {
     if (!l.current) return;
     const n = l.current.querySelector(".navmenu-item__content");
     if (!n) return;
     const d = new ResizeObserver(() => {
-      m();
+      u();
     });
     return d.observe(n), () => {
       d.disconnect();
     };
-  }, [m]);
-  const x = F(() => {
+  }, [u]);
+  const x = $(() => {
     if (c === "ARCBLOCK")
       return [
         {
@@ -509,7 +522,7 @@ function Fe({ className: t = "", type: c, ...a }) {
           label: i("groups.applications"),
           children: [
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.nftstudio.rocks/${r}`, children: "NFT Studio" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.nftstudio.rocks/${r}`, children: "NFT Studio" }),
               description: i("products.nftStudio.description"),
               icon: /* @__PURE__ */ e(M, {})
             },
@@ -527,12 +540,12 @@ function Fe({ className: t = "", type: c, ...a }) {
               icon: /* @__PURE__ */ e(O, {})
             },
             {
-              label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/", children: "AIGNE" }),
+              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/", children: "AIGNE" }),
               description: i("products.aigne.description"),
               icon: /* @__PURE__ */ e(s, { color: f.mode === "dark" ? "white" : "black" })
             },
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.arcsphere.io/${r}`, children: "ArcSphere" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.arcsphere.io/${r}`, children: "ArcSphere" }),
               description: i("products.arcsphere.description"),
               icon: /* @__PURE__ */ e(I, {})
             }
@@ -543,24 +556,24 @@ function Fe({ className: t = "", type: c, ...a }) {
           label: i("groups.components"),
           children: [
             {
-              label: /* @__PURE__ */ e(o, { to: `https://launcher.arcblock.io/${r}`, children: "Blocklet Launcher" }),
+              label: /* @__PURE__ */ e(t, { to: `https://launcher.arcblock.io/${r}`, children: "Blocklet Launcher" }),
               description: i("products.blockletLauncher.description"),
               icon: /* @__PURE__ */ e(P, {})
             },
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.blocklet.io/${r}/payment-kit`, children: "Payment Kit" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.blocklet.io/${r}/payment-kit`, children: "Payment Kit" }),
               description: i("products.paymentKit.description"),
               icon: /* @__PURE__ */ e("img", { src: X, alt: "Payment Kit" })
             },
             {
-              label: /* @__PURE__ */ e(o, { to: `https://store.blocklet.dev/?locale=${r}`, children: "Blocklet Store" }),
+              label: /* @__PURE__ */ e(t, { to: `https://store.blocklet.dev/?locale=${r}`, children: "Blocklet Store" }),
               description: i("products.blockletStore.description"),
-              icon: /* @__PURE__ */ e(H, {})
+              icon: /* @__PURE__ */ e(R, {})
             },
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.web3kit.rocks/${r}`, children: "Web3 Kit" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.web3kit.rocks/${r}`, children: "Web3 Kit" }),
               description: i("products.web3Kit.description"),
-              icon: /* @__PURE__ */ e(R, {})
+              icon: /* @__PURE__ */ e(H, {})
             }
           ]
         },
@@ -592,12 +605,12 @@ function Fe({ className: t = "", type: c, ...a }) {
               icon: /* @__PURE__ */ e(U, {})
             },
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.blocklet.io/${r}/blocklet-server`, children: "Blocklet Server" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.blocklet.io/${r}/blocklet-server`, children: "Blocklet Server" }),
               description: i("products.blockletServer.description"),
               icon: /* @__PURE__ */ e(j, {})
             },
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.arcblock.io/content/collections/${r}/ocap`, children: "ОСАР" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${r}/ocap`, children: "ОСАР" }),
               description: i("products.ocap.description"),
               icon: /* @__PURE__ */ e(V, {})
             }
@@ -608,12 +621,12 @@ function Fe({ className: t = "", type: c, ...a }) {
           label: i("groups.identity"),
           children: [
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.arcblock.io/content/collections/${r}/did`, children: "DID" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${r}/did`, children: "DID" }),
               description: i("products.did.description"),
               icon: /* @__PURE__ */ e(h, { color: "#5b96f3" })
             },
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.didwallet.io/${r}`, children: "DID Wallet" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.didwallet.io/${r}`, children: "DID Wallet" }),
               description: i("products.didWallet.description"),
               icon: /* @__PURE__ */ e(J, {})
             },
@@ -623,12 +636,12 @@ function Fe({ className: t = "", type: c, ...a }) {
               icon: /* @__PURE__ */ e(h, { color: "#678ab0" })
             },
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.arcblock.io/content/collections/${r}/verifiable-credential`, children: "VC" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${r}/verifiable-credential`, children: "VC" }),
               description: i("products.vc.description"),
               icon: /* @__PURE__ */ e(Q, {})
             },
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.didconnect.io/${r}`, children: "DID Connect" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.didconnect.io/${r}`, children: "DID Connect" }),
               description: i("products.didConnect.description"),
               icon: /* @__PURE__ */ e(h, { color: "#5bbec5" })
             }
@@ -639,7 +652,7 @@ function Fe({ className: t = "", type: c, ...a }) {
       const n = {
         onClick: (d) => {
           d.preventDefault();
-          const b = d.currentTarget.href, g = W(b) ? "_blank" : "_self";
+          const b = d.currentTarget.href, g = N(b) ? "_blank" : "_self";
           window.open(b, g);
         }
       };
@@ -649,29 +662,34 @@ function Fe({ className: t = "", type: c, ...a }) {
           label: i("groups.applications"),
           children: [
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.arcsphere.io/${r}`, children: "ArcSphere" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.arcsphere.io/${r}`, children: "ArcSphere" }),
               description: i("products.arcsphere.description"),
               icon: /* @__PURE__ */ e(I, {})
             },
             {
-              label: /* @__PURE__ */ e(o, { to: `https://www.aistro.io/${r}`, children: "Aistro" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.aistro.io/${r}`, children: "Aistro" }),
               description: i("products.aistro.description"),
-              icon: /* @__PURE__ */ e("img", { src: Z, alt: "Aistro" })
+              icon: /* @__PURE__ */ e("img", { src: ee, alt: "Aistro" })
             },
             {
-              label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/code-smith", ...n, children: "AIGNE CodeSmith" }),
+              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/code-smith", ...n, children: "AIGNE CodeSmith" }),
               description: i("products.aigneCodeSmith.description"),
               icon: /* @__PURE__ */ e(s, { color: "#3E5DF7", backgroundColor: "#e9f0ff" })
             },
             {
-              label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/doc-smith", ...n, children: "AIGNE DocSmith" }),
+              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/doc-smith", ...n, children: "AIGNE DocSmith" }),
               description: i("products.aigneDocSmith.description"),
               icon: /* @__PURE__ */ e(s, { color: "#02A996", backgroundColor: "#e6f7f5" })
             },
             {
-              label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/web-smith", ...n, children: "AIGNE WebSmith" }),
+              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/web-smith", ...n, children: "AIGNE WebSmith" }),
               description: i("products.aigneWebSmith.description"),
               icon: /* @__PURE__ */ e(s, { color: "#7c45eb", backgroundColor: "#f0e9ff" })
+            },
+            {
+              label: /* @__PURE__ */ e(t, { to: "https://imagesmith.aigne.io/", children: "AIGNE ImageSmith" }),
+              description: i("products.aigneImageSmith.description"),
+              icon: /* @__PURE__ */ e(Z, {})
             }
           ]
         },
@@ -680,22 +698,22 @@ function Fe({ className: t = "", type: c, ...a }) {
           label: i("groups.frameworkTools"),
           children: [
             {
-              label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/cli", ...n, children: "AIGNE CLI" }),
+              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/cli", ...n, children: "AIGNE CLI" }),
               description: i("products.aigneCLI.description"),
               icon: /* @__PURE__ */ e(s, { color: "#d05d4e", backgroundColor: "#faeaea" })
             },
             {
-              label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/observability", ...n, children: "AIGNE Observability" }),
+              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/observability", ...n, children: "AIGNE Observability" }),
               description: i("products.aigneObservability.description"),
               icon: /* @__PURE__ */ e(s, { color: "#6ba456", backgroundColor: "#edfae8" })
             },
             {
-              label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/studio", ...n, children: "AIGNE Studio" }),
+              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/studio", ...n, children: "AIGNE Studio" }),
               description: i("products.aigneStudio.description"),
               icon: /* @__PURE__ */ e(s, { color: "#676cbf", backgroundColor: "#edeeff" })
             },
             {
-              label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/framework", ...n, children: "AIGNE Framework" }),
+              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/framework", ...n, children: "AIGNE Framework" }),
               description: i("products.aigneFramework.description"),
               icon: /* @__PURE__ */ e(s, { color: "#5086d0", backgroundColor: "#eef4ff" })
             }
@@ -706,7 +724,7 @@ function Fe({ className: t = "", type: c, ...a }) {
           label: i("groups.modelsAdapters"),
           children: [
             {
-              label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/hub", ...n, children: "AIGNE Hub" }),
+              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/hub", ...n, children: "AIGNE Hub" }),
               description: i("products.aigneHub.description"),
               icon: /* @__PURE__ */ e(s, { color: "#e4930b", backgroundColor: "#fbf4d4" })
             }
@@ -716,8 +734,8 @@ function Fe({ className: t = "", type: c, ...a }) {
     }
     return [];
   }, [i, r, f]);
-  return /* @__PURE__ */ e(oe, { ref: l, className: `nav-menu-products is-${u} ${t}`, ...a, children: x.map((n) => /* @__PURE__ */ e(B, { label: n.label, children: /* @__PURE__ */ e(te, { maxContent: N, children: n.children.map((d) => /* @__PURE__ */ e(K, { variant: "panel", style: { padding: "8px" }, ...d })) }) }, n.label)) });
+  return /* @__PURE__ */ e(oe, { ref: l, className: `nav-menu-products is-${m} ${o}`, ...a, children: x.map((n) => /* @__PURE__ */ e(B, { label: n.label, children: /* @__PURE__ */ e(re, { maxContent: W, children: n.children.map((d) => /* @__PURE__ */ e(E, { variant: "panel", style: { padding: "8px" }, ...d })) }) }, n.label)) });
 }
 export {
-  Fe as default
+  Be as default
 };

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.1.49", s = { "@blocklet/js-sdk": "1.16.52" }, n = {
+const e = "3.1.51", s = { "@blocklet/js-sdk": "1.16.52" }, n = {
   version: e,
   dependencies: s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.49",
+  "version": "3.1.51",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,16 +68,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "4612b57a1452bd4330755b53d093505a6ae7dea5",
+  "gitHead": "8367c79c433cf59694b4aa72cbeef3b25185dd66",
   "dependencies": {
-    "@arcblock/bridge": "3.1.49",
+    "@arcblock/bridge": "3.1.51",
     "@arcblock/did": "^1.25.6",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.49",
-    "@arcblock/nft-display": "3.1.49",
-    "@arcblock/react-hooks": "3.1.49",
+    "@arcblock/icons": "3.1.51",
+    "@arcblock/nft-display": "3.1.51",
+    "@arcblock/react-hooks": "3.1.51",
     "@blocklet/js-sdk": "1.16.52",
-    "@blocklet/theme": "3.1.49",
+    "@blocklet/theme": "3.1.51",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/Datatable/CustomToolbar.jsx

@@ -353,21 +353,14 @@ CustomToolbar.propTypes = {
 const Container = styled('div')`
   display: flex;
   align-items: center;
-  height: 56px;
+  flex-wrap: wrap;
   .custom-toobar-title {
-    position: relative;
-    flex: 1;
+    flex: 1 1 auto;
     font-size: 18px;
     font-weight: 800;
-    height: 56px;
     transition: all ease 0.3s;
     &-inner {
-      line-height: 56px;
       width: 100%;
-      height: 56px;
-      position: absolute;
-      left: 0;
-      top: 0;
       span {
         display: inline-block;
         max-width: 100%;

package/src/NavMenu/images/aigne-image-smith.svg

@@ -0,0 +1,26 @@
+<svg viewBox="0 0 902 902" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="902" height="902" rx="212" fill="url(#paint0_linear_3783_1258)" style=""></rect>
+    <rect x="166" y="247" width="569" height="409" rx="80" stroke="white" style="stroke:white;stroke-opacity:1;"
+        stroke-width="40"></rect>
+    <ellipse cx="371" cy="452" rx="37" ry="65" fill="white" style="fill:white;fill-opacity:1;"></ellipse>
+    <ellipse cx="531" cy="452" rx="37" ry="65" fill="white" style="fill:white;fill-opacity:1;"></ellipse>
+    <defs>
+        <linearGradient id="paint0_linear_3783_1258" x1="84" y1="78.5" x2="811.5" y2="850.5"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#AAF4EF"
+                style="stop-color:#AAF4EF;stop-color:color(display-p3 0.6667 0.9569 0.9373);stop-opacity:1;"></stop>
+            <stop offset="0.180804" stop-color="#C7F37F"
+                style="stop-color:#C7F37F;stop-color:color(display-p3 0.7798 0.9512 0.4996);stop-opacity:1;"></stop>
+            <stop offset="0.361299" stop-color="#FFD071"
+                style="stop-color:#FFD071;stop-color:color(display-p3 1.0000 0.8141 0.4422);stop-opacity:1;"></stop>
+            <stop offset="0.546216" stop-color="#FF9898"
+                style="stop-color:#FF9898;stop-color:color(display-p3 1.0000 0.5960 0.5960);stop-opacity:1;"></stop>
+            <stop offset="0.72214" stop-color="#FF89E0"
+                style="stop-color:#FF89E0;stop-color:color(display-p3 1.0000 0.5360 0.8769);stop-opacity:1;"></stop>
+            <stop offset="0.898804" stop-color="#B695FE"
+                style="stop-color:#B695FE;stop-color:color(display-p3 0.7137 0.5843 0.9961);stop-opacity:1;"></stop>
+            <stop offset="1" stop-color="#7C8EED"
+                style="stop-color:#7C8EED;stop-color:color(display-p3 0.4863 0.5569 0.9294);stop-opacity:1;"></stop>
+        </linearGradient>
+    </defs>
+</svg>

package/src/NavMenu/products.tsx

@@ -24,6 +24,7 @@ import VCSvg from './images/vc.svg?react';
 import PaymentKitPng from './images/payment-kit.png';
 // AIGNE Icons
 import AigneSvg from './images/aigne.svg?react';
+import AigneImageSmithSvg from './images/aigne-image-smith.svg?react';
 import ArcSphereSvg from './images/arcsphere.svg?react';
 import AistroPng from './images/aistro.png';
 import { getUTMUrl } from '../withTracker/libs/utm';
@@ -110,6 +111,9 @@ const translations = {
       aigneWebSmith: {
         description: 'Build and deploy AI-powered web apps',
       },
+      aigneImageSmith: {
+        description: 'Generate and Refine Images with AI',
+      },
       aigneCLI: {
         description: 'Develop agents from the command line',
       },
@@ -206,6 +210,9 @@ const translations = {
       aigneWebSmith: {
         description: '构建并部署 AI 驱动的 Web 应用',
       },
+      aigneImageSmith: {
+        description: '使用 AI 生成和优化图像',
+      },
       aigneCLI: {
         description: '通过命令行开发 Agent',
       },
@@ -302,6 +309,9 @@ const translations = {
       aigneWebSmith: {
         description: '構建並部署 AI 驅動的 Web 應用',
       },
+      aigneImageSmith: {
+        description: '使用 AI 生成和優化圖像',
+      },
       aigneCLI: {
         description: '透過命令列開發 Agent',
       },
@@ -398,6 +408,9 @@ const translations = {
       aigneWebSmith: {
         description: 'AI駆動Webアプリの構築とデプロイ',
       },
+      aigneImageSmith: {
+        description: 'AIで画像を生成・最適化',
+      },
       aigneCLI: {
         description: 'コマンドラインからエージェントを開発',
       },
@@ -788,6 +801,11 @@ export default function Products({ className = '', type, ...rest }: ProductsProp
               description: t('products.aigneWebSmith.description'),
               icon: <AigneIcon color="#7c45eb" backgroundColor="#f0e9ff" />,
             },
+            {
+              label: <SmartLink to="https://imagesmith.aigne.io/">AIGNE ImageSmith</SmartLink>,
+              description: t('products.aigneImageSmith.description'),
+              icon: <AigneImageSmithSvg />,
+            },
           ],
         },
         {