@inf-monkeys-tech/monkeys-design 0.4.50 → 0.4.52

package/dist/styles/workflow-board.scss

@@ -1,440 +1,440 @@
-/**
- * Monkeys UI Workflow Board Styles
- *
- * Contains styles for the workflow editor/canvas area including:
- * - tldraw theme CSS variables (light/dark mode)
- * - Vertical toolbar component
- * - Mini tools toolbar component
- *
- * Requirements for the consuming app:
- *   - The monkeys color scale (--monkeys-* CSS vars set by setTailwindTheme from the palette module)
- *   - Tailwind CSS (for .dark class dark mode switching)
- */
-
-// ============================================================
-// tldraw Theme: CSS variable overrides for light / dark mode
-// ============================================================
-
-.tl-theme__light * {
-  color: revert;
-  --color-selected: rgb(var(--monkeys-500));
-  --color-panel: #ffffff;
-  --color-panel-border: rgba(0, 0, 0, 0.1);
-  --color-text: #000000;
-  --color-hover: #f2f3f5;
-  --color-selected-text: #ffffff;
-  --shadow-l: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.tl-theme__dark {
-  color: revert;
-  --color-selected: rgb(var(--monkeys-500));
-  --color-panel: #151a23;
-  --color-panel-border: rgba(255, 255, 255, 0.08);
-  --color-text: #e0e0e0;
-  --color-hover: rgba(255, 255, 255, 0.06);
-  --color-selected-text: #ffffff;
-  --shadow-l: 0 2px 8px rgba(0, 0, 0, 0.4);
-
-  /* tldraw 画布主题微调 */
-  --tl-color-background: hsl(222, 18%, 11.5%);
-  /* 网格再淡一点，避免"脏/颗粒感" */
-  --tl-color-grid: hsla(220, 12%, 82%, 0.06);
-  --tl-color-selected: hsl(258, 89%, 66%);
-  /* 更接近 #8B5CF6 */
-  --tl-color-selection-stroke: hsl(258, 89%, 66%);
-  --tl-color-selection-fill: hsla(258, 89%, 66%, 0.18);
-  --tl-color-brush-fill: hsla(220, 10%, 80%, 0.05);
-  --tl-color-brush-stroke: hsla(220, 10%, 80%, 0.14);
-}
-
-/* 通用 dark 类支持（适配 Tailwind 等） */
-.dark {
-  --color-panel: #151a23;
-  --color-panel-border: rgba(255, 255, 255, 0.08);
-  --color-text: #e0e0e0;
-  --color-hover: rgba(255, 255, 255, 0.06);
-  --color-selected-text: #ffffff;
-  --shadow-l: 0 2px 8px rgba(0, 0, 0, 0.4);
-
-  /* tldraw 画布主题微调 */
-  --tl-color-background: hsl(222, 18%, 11.5%);
-  --tl-color-grid: hsla(220, 12%, 82%, 0.06);
-  --tl-color-selected: hsl(258, 89%, 66%);
-  --tl-color-selection-stroke: hsl(258, 89%, 66%);
-  --tl-color-selection-fill: hsla(258, 89%, 66%, 0.18);
-  --tl-color-brush-fill: hsla(220, 10%, 80%, 0.05);
-  --tl-color-brush-stroke: hsla(220, 10%, 80%, 0.14);
-}
-
-// ============================================================
-// Vertical Toolbar
-// ============================================================
-
-.vertical-toolbar {
-  z-index: 9999;
-  pointer-events: auto;
-
-  /* 左侧位置样式 */
-  &.vertical-toolbar--left {
-    .custom-toolbar {
-      flex-direction: column;
-
-      .dropdown-menu {
-        left: 100%;
-        bottom: auto;
-        top: 0;
-        margin-bottom: 0;
-        margin-left: 15px;
-      }
-    }
-  }
-
-  .custom-toolbar {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    padding: 8px;
-    border-radius: 12px;
-    background: var(--color-panel, #ffffff);
-    box-shadow: var(--shadow-l, 0 2px 8px rgba(0, 0, 0, 0.1));
-    border: 1px solid var(--color-panel-border, rgba(0, 0, 0, 0.1));
-    backdrop-filter: blur(8px);
-
-    .tool-button {
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 8px;
-      border: 1px solid transparent;
-      background: transparent;
-      color: var(--color-text);
-      transition: all 0.15s ease;
-      cursor: pointer;
-      outline: none;
-      pointer-events: auto;
-      z-index: 10000;
-      position: relative;
-
-      &:hover {
-        background: #f2f3f5;
-        border-color: transparent;
-        transform: none;
-      }
-
-      /* 深色外观覆盖：使用站点主题标记，避免误判系统偏好导致浅色也变化 */
-      /* 1) data-theme='dark' 容器 */
-      :root[data-theme='dark'] & {
-        &:hover {
-          background: #2b2f33;
-        }
-      }
-
-      /* 2) 常见 .dark 容器 */
-      .dark & {
-        &:hover {
-          background: #2b2f33;
-        }
-      }
-
-      &:active {
-        transform: scale(0.95);
-      }
-
-      &.selected {
-        background: var(--color-selected);
-        border-color: transparent;
-        color: #fff !important;
-        box-shadow: none;
-
-        svg {
-          color: #fff !important;
-          fill: currentColor;
-          stroke: currentColor;
-        }
-      }
-
-      /* 只约束按钮"直接子元素"的 svg 尺寸，避免影响 MonkeysIcon / TldrawUiIcon 等内部 svg 导致不居中 */
-      > svg {
-        width: 18px;
-        height: 18px;
-        pointer-events: none;
-      }
-
-      /* 工具栏里使用 MonkeysIcon 的按钮（palette / workflow / agent 等）统一到 18px 视觉尺寸 */
-      .toolbar-monkeys-icon {
-        width: 18px !important;
-        height: 18px !important;
-        line-height: 0;
-
-        /* 内部的 lucide/custom icon wrapper（size-*）强制为 18px */
-        .size-3,
-        .size-4,
-        .size-5,
-        .size-6,
-        .size-7 {
-          width: 18px !important;
-          height: 18px !important;
-        }
-
-        svg {
-          width: 18px !important;
-          height: 18px !important;
-          display: block;
-        }
-      }
-    }
-
-    .tool-group {
-      position: relative;
-
-      &.menu-open .caret {
-        animation: caret-pop 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
-        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
-        transform-origin: 100% 100%;
-      }
-
-      &:hover .caret {
-        transform: translate(-0.5px, -0.5px) scale(1.05);
-        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
-      }
-    }
-
-    .caret {
-      position: absolute;
-      right: 4px;
-      top: 4px;
-      width: 5px;
-      height: 5px;
-      background: currentColor;
-      clip-path: polygon(100% 0, 0 0, 100% 100%);
-      box-shadow: 0 0 0 1px var(--color-panel);
-      pointer-events: none;
-    }
-
-    @keyframes caret-pop {
-      0% {
-        transform: translate(0, 0) scale(0.85) rotate(0.0001deg);
-        opacity: 0.6;
-      }
-
-      60% {
-        transform: translate(-1px, -1px) scale(1.15) rotate(0.0001deg);
-        opacity: 1;
-      }
-
-      100% {
-        transform: translate(0, 0) scale(1) rotate(0.0001deg);
-        opacity: 1;
-      }
-    }
-
-    /* 命中区域：悬停或点击展开菜单 */
-    .caret-hit {
-      position: absolute;
-      right: 2px;
-      top: 2px;
-      width: 16px;
-      height: 12px;
-      cursor: default;
-    }
-
-    .tool-button {
-      position: relative;
-    }
-
-    .dropdown-menu {
-      position: absolute;
-      left: 0;
-      bottom: 100%;
-      margin-bottom: 15px;
-      min-width: 140px;
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      padding: 6px;
-      border-radius: 8px;
-      background: var(--color-panel, #ffffff);
-      border: 1px solid var(--color-panel-border, rgba(0, 0, 0, 0.1));
-      box-shadow: var(--shadow-l, 0 2px 8px rgba(0, 0, 0, 0.1));
-      z-index: 10001;
-      max-height: 256px;
-      overflow-y: auto;
-    }
-
-    .dropdown-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0;
-      padding: 8px;
-      border-radius: 6px;
-      cursor: pointer;
-      color: var(--color-text);
-
-      &:hover {
-        background: var(--color-hover);
-      }
-
-      &.active {
-        background: var(--color-selected);
-        color: var(--color-selected-text);
-      }
-
-      svg {
-        width: 20px;
-        height: 20px;
-      }
-    }
-
-    /* workflow 下拉菜单：图标更小一些 */
-    .dropdown-menu.workflow-list {
-      .dropdown-item {
-        justify-content: flex-start;
-        gap: 4px;
-
-        [data-alt='icon'] {
-          transform: translateY(-3px);
-          flex-shrink: 0;
-        }
-
-        svg {
-          width: 16px;
-          height: 16px;
-        }
-      }
-    }
-
-    /* 形状菜单改为四列网格，仅展示图标 */
-    .shapes-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      grid-auto-rows: 40px;
-      gap: 4px;
-      min-width: 200px;
-      padding: 8px;
-      height: 276px;
-      /* 6*40 + 5*4 + 16(padding) */
-      max-height: none;
-      overflow-y: hidden;
-    }
-  }
-}
-
-// ============================================================
-// Mini Tools Toolbar
-// ============================================================
-
-.mini-tools-toolbar {
-  position: fixed !important;
-  left: var(--toolbar-left, 16px) !important;
-  top: calc(72px + var(--global-spacing) * 3.5 + 10px) !important;
-  bottom: calc(var(--global-spacing) * 3.5 + 10px) !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: flex-start !important;
-  z-index: 9999;
-  pointer-events: auto;
-
-  .custom-toolbar {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 8px;
-    border-radius: 12px;
-    background: var(--color-panel, #ffffff);
-    box-shadow: var(--shadow-l, 0 2px 8px rgba(0, 0, 0, 0.1));
-    border: 1px solid var(--color-panel-border, rgba(0, 0, 0, 0.1));
-    backdrop-filter: blur(8px);
-
-    .tool-button {
-      min-width: 40px;
-      height: 40px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 8px;
-      padding: 0 12px;
-      border-radius: 8px;
-      border: 1px solid transparent;
-      background: transparent;
-      color: var(--color-text);
-      transition: all 0.15s ease;
-      cursor: pointer;
-      outline: none;
-      pointer-events: auto;
-      z-index: 10000;
-      position: relative;
-      white-space: nowrap;
-
-      &:hover {
-        background: #f2f3f5;
-        border-color: transparent;
-        transform: none;
-      }
-
-      /* 深色外观覆盖 */
-      /* 1) data-theme='dark' 容器 */
-      :root[data-theme='dark'] & {
-        &:hover {
-          background: #2b2f33;
-        }
-      }
-
-      /* 2) 常见 .dark 容器 */
-      .dark & {
-        &:hover {
-          background: #2b2f33;
-        }
-      }
-
-      &:active {
-        transform: scale(0.95);
-      }
-
-      &.selected {
-        background: var(--color-selected);
-        border-color: transparent;
-        color: #fff !important;
-        box-shadow: none;
-
-        svg {
-          color: #fff !important;
-          fill: currentColor;
-          stroke: currentColor;
-        }
-
-        .tool-button-label {
-          color: #fff !important;
-        }
-      }
-
-      svg {
-        width: 18px;
-        height: 18px;
-        pointer-events: none;
-        display: block;
-        margin: 0;
-        padding: 0;
-      }
-
-      // 确保MonkeysIcon组件内部也居中
-      .monkeys-icon {
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        flex-shrink: 0;
-      }
-
-      .tool-button-label {
-        font-size: 12px;
-        line-height: 1;
-        color: inherit;
-        pointer-events: none;
-      }
-    }
-  }
-}
+/**
+ * Monkeys UI Workflow Board Styles
+ *
+ * Contains styles for the workflow editor/canvas area including:
+ * - tldraw theme CSS variables (light/dark mode)
+ * - Vertical toolbar component
+ * - Mini tools toolbar component
+ *
+ * Requirements for the consuming app:
+ *   - The monkeys color scale (--monkeys-* CSS vars set by setTailwindTheme from the palette module)
+ *   - Tailwind CSS (for .dark class dark mode switching)
+ */
+
+// ============================================================
+// tldraw Theme: CSS variable overrides for light / dark mode
+// ============================================================
+
+.tl-theme__light * {
+  color: revert;
+  --color-selected: rgb(var(--monkeys-500));
+  --color-panel: #ffffff;
+  --color-panel-border: rgba(0, 0, 0, 0.1);
+  --color-text: #000000;
+  --color-hover: #f2f3f5;
+  --color-selected-text: #ffffff;
+  --shadow-l: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.tl-theme__dark {
+  color: revert;
+  --color-selected: rgb(var(--monkeys-500));
+  --color-panel: #151a23;
+  --color-panel-border: rgba(255, 255, 255, 0.08);
+  --color-text: #e0e0e0;
+  --color-hover: rgba(255, 255, 255, 0.06);
+  --color-selected-text: #ffffff;
+  --shadow-l: 0 2px 8px rgba(0, 0, 0, 0.4);
+
+  /* tldraw 画布主题微调 */
+  --tl-color-background: hsl(222, 18%, 11.5%);
+  /* 网格再淡一点，避免"脏/颗粒感" */
+  --tl-color-grid: hsla(220, 12%, 82%, 0.06);
+  --tl-color-selected: hsl(258, 89%, 66%);
+  /* 更接近 #8B5CF6 */
+  --tl-color-selection-stroke: hsl(258, 89%, 66%);
+  --tl-color-selection-fill: hsla(258, 89%, 66%, 0.18);
+  --tl-color-brush-fill: hsla(220, 10%, 80%, 0.05);
+  --tl-color-brush-stroke: hsla(220, 10%, 80%, 0.14);
+}
+
+/* 通用 dark 类支持（适配 Tailwind 等） */
+.dark {
+  --color-panel: #151a23;
+  --color-panel-border: rgba(255, 255, 255, 0.08);
+  --color-text: #e0e0e0;
+  --color-hover: rgba(255, 255, 255, 0.06);
+  --color-selected-text: #ffffff;
+  --shadow-l: 0 2px 8px rgba(0, 0, 0, 0.4);
+
+  /* tldraw 画布主题微调 */
+  --tl-color-background: hsl(222, 18%, 11.5%);
+  --tl-color-grid: hsla(220, 12%, 82%, 0.06);
+  --tl-color-selected: hsl(258, 89%, 66%);
+  --tl-color-selection-stroke: hsl(258, 89%, 66%);
+  --tl-color-selection-fill: hsla(258, 89%, 66%, 0.18);
+  --tl-color-brush-fill: hsla(220, 10%, 80%, 0.05);
+  --tl-color-brush-stroke: hsla(220, 10%, 80%, 0.14);
+}
+
+// ============================================================
+// Vertical Toolbar
+// ============================================================
+
+.vertical-toolbar {
+  z-index: 9999;
+  pointer-events: auto;
+
+  /* 左侧位置样式 */
+  &.vertical-toolbar--left {
+    .custom-toolbar {
+      flex-direction: column;
+
+      .dropdown-menu {
+        left: 100%;
+        bottom: auto;
+        top: 0;
+        margin-bottom: 0;
+        margin-left: 15px;
+      }
+    }
+  }
+
+  .custom-toolbar {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    padding: 8px;
+    border-radius: 12px;
+    background: var(--color-panel, #ffffff);
+    box-shadow: var(--shadow-l, 0 2px 8px rgba(0, 0, 0, 0.1));
+    border: 1px solid var(--color-panel-border, rgba(0, 0, 0, 0.1));
+    backdrop-filter: blur(8px);
+
+    .tool-button {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--color-text);
+      transition: all 0.15s ease;
+      cursor: pointer;
+      outline: none;
+      pointer-events: auto;
+      z-index: 10000;
+      position: relative;
+
+      &:hover {
+        background: #f2f3f5;
+        border-color: transparent;
+        transform: none;
+      }
+
+      /* 深色外观覆盖：使用站点主题标记，避免误判系统偏好导致浅色也变化 */
+      /* 1) data-theme='dark' 容器 */
+      :root[data-theme='dark'] & {
+        &:hover {
+          background: #2b2f33;
+        }
+      }
+
+      /* 2) 常见 .dark 容器 */
+      .dark & {
+        &:hover {
+          background: #2b2f33;
+        }
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+
+      &.selected {
+        background: var(--color-selected);
+        border-color: transparent;
+        color: #fff !important;
+        box-shadow: none;
+
+        svg {
+          color: #fff !important;
+          fill: currentColor;
+          stroke: currentColor;
+        }
+      }
+
+      /* 只约束按钮"直接子元素"的 svg 尺寸，避免影响 MonkeysIcon / TldrawUiIcon 等内部 svg 导致不居中 */
+      > svg {
+        width: 18px;
+        height: 18px;
+        pointer-events: none;
+      }
+
+      /* 工具栏里使用 MonkeysIcon 的按钮（palette / workflow / agent 等）统一到 18px 视觉尺寸 */
+      .toolbar-monkeys-icon {
+        width: 18px !important;
+        height: 18px !important;
+        line-height: 0;
+
+        /* 内部的 lucide/custom icon wrapper（size-*）强制为 18px */
+        .size-3,
+        .size-4,
+        .size-5,
+        .size-6,
+        .size-7 {
+          width: 18px !important;
+          height: 18px !important;
+        }
+
+        svg {
+          width: 18px !important;
+          height: 18px !important;
+          display: block;
+        }
+      }
+    }
+
+    .tool-group {
+      position: relative;
+
+      &.menu-open .caret {
+        animation: caret-pop 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
+        transform-origin: 100% 100%;
+      }
+
+      &:hover .caret {
+        transform: translate(-0.5px, -0.5px) scale(1.05);
+        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
+      }
+    }
+
+    .caret {
+      position: absolute;
+      right: 4px;
+      top: 4px;
+      width: 5px;
+      height: 5px;
+      background: currentColor;
+      clip-path: polygon(100% 0, 0 0, 100% 100%);
+      box-shadow: 0 0 0 1px var(--color-panel);
+      pointer-events: none;
+    }
+
+    @keyframes caret-pop {
+      0% {
+        transform: translate(0, 0) scale(0.85) rotate(0.0001deg);
+        opacity: 0.6;
+      }
+
+      60% {
+        transform: translate(-1px, -1px) scale(1.15) rotate(0.0001deg);
+        opacity: 1;
+      }
+
+      100% {
+        transform: translate(0, 0) scale(1) rotate(0.0001deg);
+        opacity: 1;
+      }
+    }
+
+    /* 命中区域：悬停或点击展开菜单 */
+    .caret-hit {
+      position: absolute;
+      right: 2px;
+      top: 2px;
+      width: 16px;
+      height: 12px;
+      cursor: default;
+    }
+
+    .tool-button {
+      position: relative;
+    }
+
+    .dropdown-menu {
+      position: absolute;
+      left: 0;
+      bottom: 100%;
+      margin-bottom: 15px;
+      min-width: 140px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      padding: 6px;
+      border-radius: 8px;
+      background: var(--color-panel, #ffffff);
+      border: 1px solid var(--color-panel-border, rgba(0, 0, 0, 0.1));
+      box-shadow: var(--shadow-l, 0 2px 8px rgba(0, 0, 0, 0.1));
+      z-index: 10001;
+      max-height: 256px;
+      overflow-y: auto;
+    }
+
+    .dropdown-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0;
+      padding: 8px;
+      border-radius: 6px;
+      cursor: pointer;
+      color: var(--color-text);
+
+      &:hover {
+        background: var(--color-hover);
+      }
+
+      &.active {
+        background: var(--color-selected);
+        color: var(--color-selected-text);
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    /* workflow 下拉菜单：图标更小一些 */
+    .dropdown-menu.workflow-list {
+      .dropdown-item {
+        justify-content: flex-start;
+        gap: 4px;
+
+        [data-alt='icon'] {
+          transform: translateY(-3px);
+          flex-shrink: 0;
+        }
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+
+    /* 形状菜单改为四列网格，仅展示图标 */
+    .shapes-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-auto-rows: 40px;
+      gap: 4px;
+      min-width: 200px;
+      padding: 8px;
+      height: 276px;
+      /* 6*40 + 5*4 + 16(padding) */
+      max-height: none;
+      overflow-y: hidden;
+    }
+  }
+}
+
+// ============================================================
+// Mini Tools Toolbar
+// ============================================================
+
+.mini-tools-toolbar {
+  position: fixed !important;
+  left: var(--toolbar-left, 16px) !important;
+  top: calc(72px + var(--global-spacing) * 3.5 + 10px) !important;
+  bottom: calc(var(--global-spacing) * 3.5 + 10px) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  z-index: 9999;
+  pointer-events: auto;
+
+  .custom-toolbar {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    border-radius: 12px;
+    background: var(--color-panel, #ffffff);
+    box-shadow: var(--shadow-l, 0 2px 8px rgba(0, 0, 0, 0.1));
+    border: 1px solid var(--color-panel-border, rgba(0, 0, 0, 0.1));
+    backdrop-filter: blur(8px);
+
+    .tool-button {
+      min-width: 40px;
+      height: 40px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 8px;
+      padding: 0 12px;
+      border-radius: 8px;
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--color-text);
+      transition: all 0.15s ease;
+      cursor: pointer;
+      outline: none;
+      pointer-events: auto;
+      z-index: 10000;
+      position: relative;
+      white-space: nowrap;
+
+      &:hover {
+        background: #f2f3f5;
+        border-color: transparent;
+        transform: none;
+      }
+
+      /* 深色外观覆盖 */
+      /* 1) data-theme='dark' 容器 */
+      :root[data-theme='dark'] & {
+        &:hover {
+          background: #2b2f33;
+        }
+      }
+
+      /* 2) 常见 .dark 容器 */
+      .dark & {
+        &:hover {
+          background: #2b2f33;
+        }
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+
+      &.selected {
+        background: var(--color-selected);
+        border-color: transparent;
+        color: #fff !important;
+        box-shadow: none;
+
+        svg {
+          color: #fff !important;
+          fill: currentColor;
+          stroke: currentColor;
+        }
+
+        .tool-button-label {
+          color: #fff !important;
+        }
+      }
+
+      svg {
+        width: 18px;
+        height: 18px;
+        pointer-events: none;
+        display: block;
+        margin: 0;
+        padding: 0;
+      }
+
+      // 确保MonkeysIcon组件内部也居中
+      .monkeys-icon {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        flex-shrink: 0;
+      }
+
+      .tool-button-label {
+        font-size: 12px;
+        line-height: 1;
+        color: inherit;
+        pointer-events: none;
+      }
+    }
+  }
+}