@inf-monkeys-tech/monkeys-design 1.0.40 → 1.0.41

package/README.md

@@ -297,10 +297,21 @@ Base 组件统一通过 `variant`、`density`、`state` 与 `appearance` 表达
 可从包内直接引用样式文件：
 
 ```ts
+import '@inf-monkeys-tech/monkeys-design/styles.css';
 import '@inf-monkeys-tech/monkeys-design/styles/global.scss';
 import '@inf-monkeys-tech/monkeys-design/styles/workflow-nodes.css';
 ```
 
+`styles.css` 提供 canonical 产品控件的 Design-owned surface Token。它们不继承宿主页面的 `--background`、`--popover` 或 `--card`，因此不同产品 palette 不会改变同一标准控件的默认表面：
+
+| Public CSS variable | Consumers | Light default | Dark default |
+| --- | --- | --- | --- |
+| `--monkeys-color-control-surface` | Input、Textarea、outline Button、Select Trigger | `240 20% 99.02%` | `240 6% 7%` |
+| `--monkeys-color-menu-surface` | Select/Dropdown content | `240 20% 99.02%` | `270 3.85% 10.2%` |
+| `--monkeys-color-dialog-surface` | Dialog/AlertDialog content | `240 20% 99.02%` | `240 6% 7%` |
+
+宿主若有经过评审的产品主题差异，可以在加载 `styles.css` 后显式覆盖对应的 `--monkeys-*` variable；不要通过 feature className 或泛化页面 Token 重写 canonical surface。未加载 `styles.css` 属于集成错误。
+
 ## Storybook
 
 本仓库内置 Storybook，用于预览和调试组件：

package/dist/components/agent-workbench/index.js

@@ -461,7 +461,7 @@ var buttonVariants = classVarianceAuthority.cva(
       variant: {
         default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-input bg-control-surface shadow-sm ring-offset-control-surface hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
@@ -630,7 +630,7 @@ var TooltipContent = React2__namespace.forwardRef(({ className, sideOffset = 4,
 ) }));
 TooltipContent.displayName = "TooltipContent";
 var menuItemClassName = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
-var menuContentClassName = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+var menuContentClassName = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-menu-surface p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 var DropdownMenu2 = DropdownMenuPrimitive__namespace.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
 var DropdownMenuSubTrigger = React2__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
@@ -673,7 +673,7 @@ var DropdownMenuSeparator = React2__namespace.forwardRef(
 );
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 var SelectTrigger = React2__namespace.forwardRef(
-  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Trigger, { ref, className: cn("flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-left text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:min-w-0 [&>span]:flex-1 [&>span]:text-left", size === "sm" && "h-8 px-2 py-1 text-xs", className), ...props, children: [
+  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Trigger, { ref, className: cn("flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-control-surface px-3 py-2 text-left text-sm shadow-sm ring-offset-control-surface data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:min-w-0 [&>span]:flex-1 [&>span]:text-left", size === "sm" && "h-8 px-2 py-1 text-xs", className), ...props, children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className: cn("h-4 w-4 opacity-50", iconClassName) }) })
   ] })