diff --git a/core/components/minishop3/config/routes/manager.php b/core/components/minishop3/config/routes/manager.php
index 1b0f0ffe..d7669ea3 100644
--- a/core/components/minishop3/config/routes/manager.php
+++ b/core/components/minishop3/config/routes/manager.php
@@ -131,6 +131,10 @@
             $controller = new \MiniShop3\Controllers\Api\ProductDataController($modx);
             return $controller->update($params);
         });
+        $router->get('/{id}/categories/tree', function($params) use ($modx) {
+            $controller = new \MiniShop3\Controllers\Api\ProductDataController($modx);
+            return $controller->getCategoriesTree($params);
+        });
 
     }, [
         new AuthMiddleware($modx, 'mgr'),
diff --git a/core/components/minishop3/controllers/product/create.class.php b/core/components/minishop3/controllers/product/create.class.php
index 31ec4e9e..4996cda6 100644
--- a/core/components/minishop3/controllers/product/create.class.php
+++ b/core/components/minishop3/controllers/product/create.class.php
@@ -78,7 +78,6 @@ public function loadCustomCssJs()
         $this->addJavascript($assetsUrl . 'js/mgr/misc/sortable/sortable.min.js');
         $this->addJavascript($assetsUrl . 'js/mgr/misc/ms3.combo.js');
         $this->addJavascript($assetsUrl . 'js/mgr/misc/ms3.utils.js');
-        $this->addLastJavascript($assetsUrl . 'js/mgr/product/category.tree.js');
         $this->addLastJavascript($assetsUrl . 'js/mgr/product/product.common.js');
         $this->addLastJavascript($assetsUrl . 'js/mgr/product/create.js');
 
diff --git a/core/components/minishop3/controllers/product/update.class.php b/core/components/minishop3/controllers/product/update.class.php
index 1365cdf2..3ade60b0 100644
--- a/core/components/minishop3/controllers/product/update.class.php
+++ b/core/components/minishop3/controllers/product/update.class.php
@@ -55,7 +55,6 @@ public function loadCustomCssJs()
         $this->addJavascript($assetsUrl . 'js/mgr/misc/ms3.utils.js');
         $this->addJavascript($assetsUrl . 'js/mgr/misc/default.grid.js');
         $this->addJavascript($assetsUrl . 'js/mgr/misc/default.window.js');
-        $this->addLastJavascript($assetsUrl . 'js/mgr/product/category.tree.js');
         $this->addLastJavascript($assetsUrl . 'js/mgr/product/links.grid.js');
         $this->addLastJavascript($assetsUrl . 'js/mgr/product/links.window.js');
         $this->addLastJavascript($assetsUrl . 'js/mgr/product/product.common.js');
diff --git a/core/components/minishop3/src/Controllers/Api/BaseApiController.php b/core/components/minishop3/src/Controllers/Api/BaseApiController.php
index 650a267f..90027e2e 100644
--- a/core/components/minishop3/src/Controllers/Api/BaseApiController.php
+++ b/core/components/minishop3/src/Controllers/Api/BaseApiController.php
@@ -3,6 +3,7 @@
 namespace MiniShop3\Controllers\Api;
 
 use MiniShop3\Router\Response;
+use MiniShop3\Utils\IntArrayDecoder;
 use MODX\Revolution\modX;
 
 /**
@@ -67,4 +68,13 @@ protected function isAuthenticated(string $context = 'web'): bool
     {
         return $this->modx->user && $this->modx->user->isAuthenticated($context);
     }
+
+    /**
+     * @param mixed $input JSON array, comma-separated string, or array of ids
+     * @return list<int> Deduplicated positive ints.
+     */
+    protected function decodeIntArray($input): array
+    {
+        return IntArrayDecoder::decode($input);
+    }
 }
diff --git a/core/components/minishop3/src/Controllers/Api/Manager/OptionsController.php b/core/components/minishop3/src/Controllers/Api/Manager/OptionsController.php
index e10635cd..7a5d2ea0 100644
--- a/core/components/minishop3/src/Controllers/Api/Manager/OptionsController.php
+++ b/core/components/minishop3/src/Controllers/Api/Manager/OptionsController.php
@@ -2,7 +2,6 @@
 
 namespace MiniShop3\Controllers\Api\Manager;
 
-use MiniShop3\Model\msCategory;
 use MiniShop3\Model\msCategoryOption;
 use MiniShop3\Model\msOption;
 use MiniShop3\Model\msOptionGroup;
@@ -10,6 +9,8 @@
 use MiniShop3\Router\Response;
 use MiniShop3\Services\Option\OptionCategoryService;
 use MiniShop3\Services\Option\OptionService;
+use MiniShop3\Utils\IntArrayDecoder;
+use MiniShop3\Utils\ResourceCategoryTreeQueryTrait;
 use MODX\Revolution\modResource;
 use MODX\Revolution\modX;
 
@@ -23,20 +24,7 @@
  */
 class OptionsController
 {
-    /** FQCN + short name. */
-    private const OPTION_TREE_CATEGORY_CLASS_KEYS = [
-        msCategory::class,
-        'msCategory',
-    ];
-
-    private const OPTION_TREE_CONTAINER_CLASS_KEYS = [
-        modResource::class,
-        'MODX\\Revolution\\modDocument',
-        'MODX\\Revolution\\modWebLink',
-        'modResource',
-        'modDocument',
-        'modWebLink',
-    ];
+    use ResourceCategoryTreeQueryTrait;
 
     protected modX $modx;
     protected OptionService $optionService;
@@ -360,10 +348,10 @@ public function getTree(array $params = []): array
             $checkedSet[$catId] = true;
         }
 
-        $treeClassKeysSql = $this->quoteSqlStringList($this->getOptionTreeClassKeys());
-        $categoryClassKeysSql = $this->quoteSqlStringList(self::OPTION_TREE_CATEGORY_CLASS_KEYS);
-        $treeNodeWhere = $this->getOptionTreeNodeSqlFilter('modResource', $treeClassKeysSql, $categoryClassKeysSql);
-        $childNodeWhere = $this->getOptionTreeNodeSqlFilter('Child', $treeClassKeysSql, $categoryClassKeysSql);
+        $treeClassKeysSql = $this->quoteSqlStringList($this->getTreeClassKeys());
+        $categoryClassKeysSql = $this->quoteSqlStringList($this->treeCategoryClassKeys());
+        $treeNodeWhere = $this->getTreeNodeSqlFilter('modResource', $treeClassKeysSql, $categoryClassKeysSql);
+        $childNodeWhere = $this->getTreeNodeSqlFilter('Child', $treeClassKeysSql, $categoryClassKeysSql);
 
         $q = $this->modx->newQuery(modResource::class);
         $q->leftJoin(
@@ -386,7 +374,7 @@ public function getTree(array $params = []): array
         if ($q->prepare() && $q->stmt->execute()) {
             while ($row = $q->stmt->fetch(\PDO::FETCH_ASSOC)) {
                 $id = (int)$row['id'];
-                $selectable = $this->isOptionTreeCategoryClass((string)$row['class_key']);
+                $selectable = $this->isCategoryClass((string)$row['class_key']);
                 $label = (string)($row['menutitle'] ?: $row['pagetitle']);
                 $nodes[] = [
                     'id' => $id,
@@ -626,36 +614,6 @@ protected function splitCategoriesPayload($payload): array
         return [$enabled, $disabled];
     }
 
-    private function getOptionTreeNodeSqlFilter(string $alias, string $treeClassKeysSql, string $categoryClassKeysSql): string
-    {
-        return "(`{$alias}`.`class_key` IN ({$treeClassKeysSql}) "
-            . "AND (`{$alias}`.`class_key` IN ({$categoryClassKeysSql}) OR `{$alias}`.`isfolder` = 1))";
-    }
-
-    /**
-     * @return string[]
-     */
-    private function getOptionTreeClassKeys(): array
-    {
-        return array_values(array_unique(array_merge(
-            self::OPTION_TREE_CATEGORY_CLASS_KEYS,
-            self::OPTION_TREE_CONTAINER_CLASS_KEYS
-        )));
-    }
-
-    private function isOptionTreeCategoryClass(string $classKey): bool
-    {
-        return in_array($classKey, self::OPTION_TREE_CATEGORY_CLASS_KEYS, true);
-    }
-
-    /**
-     * @param string[] $values
-     */
-    private function quoteSqlStringList(array $values): string
-    {
-        return implode(', ', array_map(fn(string $value): string => $this->modx->quote($value), $values));
-    }
-
     /**
      * Decode ids array whether it came as JSON string, comma string, or array.
      *
@@ -663,31 +621,6 @@ private function quoteSqlStringList(array $values): string
      */
     protected function decodeIntArray($input): array
     {
-        if ($input === null || $input === '') {
-            return [];
-        }
-
-        if (is_string($input)) {
-            $decoded = json_decode($input, true);
-            if (is_array($decoded)) {
-                $input = $decoded;
-            } else {
-                $input = explode(',', $input);
-            }
-        }
-
-        if (!is_array($input)) {
-            return [];
-        }
-
-        $out = [];
-        foreach ($input as $v) {
-            $v = (int)$v;
-            if ($v > 0) {
-                $out[] = $v;
-            }
-        }
-
-        return array_values(array_unique($out));
+        return IntArrayDecoder::decode($input);
     }
 }
diff --git a/core/components/minishop3/src/Controllers/Api/ProductDataController.php b/core/components/minishop3/src/Controllers/Api/ProductDataController.php
index 4533459d..1d5ac433 100644
--- a/core/components/minishop3/src/Controllers/Api/ProductDataController.php
+++ b/core/components/minishop3/src/Controllers/Api/ProductDataController.php
@@ -81,4 +81,41 @@ public function update(array $params): Response
             return Response::error('Failed to save product data: ' . $e->getMessage(), HttpStatus::INTERNAL_SERVER_ERROR);
         }
     }
+
+    /**
+     * GET /api/mgr/product-data/{id}/categories/tree
+     *
+     * Lazy msCategory tree for the product Categories tab (Vue).
+     *
+     * @param array $params id (product), parent (default 0), parent_category, categories (JSON precheck)
+     */
+    public function getCategoriesTree(array $params): Response
+    {
+        $productId = (int)($params['id'] ?? 0);
+        if (!$productId) {
+            return Response::error('Product ID is required', HttpStatus::BAD_REQUEST);
+        }
+
+        $parent = (int)($params['parent'] ?? 0);
+        $parentCategoryId = (int)($params['parent_category'] ?? 0);
+        $clientSentCategories = array_key_exists('categories', $params);
+        $preChecked = $this->decodeIntArray($params['categories'] ?? null);
+
+        try {
+            /** @var \MiniShop3\Services\Product\ProductCategoryTreeService $service */
+            $service = $this->modx->services->get('ms3_product_category_tree');
+            $nodes = $service->getTreeNodes(
+                $parent,
+                $productId,
+                $parentCategoryId,
+                $preChecked,
+                $clientSentCategories
+            );
+
+            return Response::success(['results' => $nodes, 'total' => count($nodes)]);
+        } catch (\Exception $e) {
+            $this->modx->log(\MODX\Revolution\modX::LOG_LEVEL_ERROR, '[ProductDataController] ' . $e->getMessage());
+            return Response::error('Failed to load category tree: ' . $e->getMessage(), HttpStatus::INTERNAL_SERVER_ERROR);
+        }
+    }
 }
diff --git a/core/components/minishop3/src/ServiceRegistry.php b/core/components/minishop3/src/ServiceRegistry.php
index 04980615..d7a26ea8 100644
--- a/core/components/minishop3/src/ServiceRegistry.php
+++ b/core/components/minishop3/src/ServiceRegistry.php
@@ -59,6 +59,10 @@ class ServiceRegistry
             'class' => \MiniShop3\Services\Product\ProductDataService::class,
             'interface' => null,
         ],
+        'ms3_product_category_tree' => [
+            'class' => \MiniShop3\Services\Product\ProductCategoryTreeService::class,
+            'interface' => null,
+        ],
         'ms3_repeater_field' => [
             'class' => \MiniShop3\Services\ExtraFields\RepeaterFieldService::class,
             'interface' => null,
diff --git a/core/components/minishop3/src/Services/Product/ProductCategoryTreeService.php b/core/components/minishop3/src/Services/Product/ProductCategoryTreeService.php
new file mode 100644
index 00000000..14b34fed
--- /dev/null
+++ b/core/components/minishop3/src/Services/Product/ProductCategoryTreeService.php
@@ -0,0 +1,127 @@
+<?php
+
+namespace MiniShop3\Services\Product;
+
+use MiniShop3\Model\msCategoryMember;
+use MiniShop3\Utils\ResourceCategoryTreeQueryTrait;
+use MODX\Revolution\modResource;
+use MODX\Revolution\modX;
+
+/**
+ * Lazy tree nodes for the product Categories tab (Vue manager).
+ *
+ * Node visibility matches the options category tree (navigation containers + msCategory).
+ * Membership and locked parent rules mirror {@see \MiniShop3\Processors\Category\GetNodes}.
+ */
+class ProductCategoryTreeService
+{
+    use ResourceCategoryTreeQueryTrait;
+
+    public function __construct(private modX $modx)
+    {
+    }
+
+    /**
+     * @param int $parent Parent resource id (0 = tree roots for current context)
+     * @param int $productId Product being edited
+     * @param int $parentCategoryId Product parent resource (always checked, not removable)
+     * @param array<int|string> $preChecked Optional ids from the client hidden field
+     * @param bool $clientSentCategories When true, checked state follows preChecked only (not stale DB membership)
+     * @return list<array<string, mixed>>
+     */
+    public function getTreeNodes(
+        int $parent,
+        int $productId,
+        int $parentCategoryId,
+        array $preChecked = [],
+        bool $clientSentCategories = false
+    ): array
+    {
+        $checkedSet = $this->buildCheckedSet($parentCategoryId, $preChecked);
+        $treeClassKeysSql = $this->quoteSqlStringList($this->getTreeClassKeys());
+        $categoryClassKeysSql = $this->quoteSqlStringList($this->treeCategoryClassKeys());
+        $treeNodeWhere = $this->getTreeNodeSqlFilter('modResource', $treeClassKeysSql, $categoryClassKeysSql);
+        $childNodeWhere = $this->getTreeNodeSqlFilter('Child', $treeClassKeysSql, $categoryClassKeysSql);
+
+        $c = $this->modx->newQuery(modResource::class);
+        $c->leftJoin(
+            modResource::class,
+            'Child',
+            "`modResource`.`id` = `Child`.`parent` AND `Child`.`deleted` = 0 AND {$childNodeWhere}"
+        );
+        if ($productId > 0) {
+            $c->leftJoin(
+                msCategoryMember::class,
+                'Member',
+                [
+                    'modResource.id = Member.category_id',
+                    'Member.product_id' => $productId,
+                ]
+            );
+            $c->select('Member.category_id AS member');
+        }
+        $c->select($this->modx->getSelectColumns(modResource::class, 'modResource', '', [
+            'id',
+            'pagetitle',
+            'menutitle',
+            'parent',
+            'published',
+            'hidemenu',
+            'class_key',
+        ]));
+        $c->select('COUNT(Child.id) AS childrenCount');
+        $c->where([
+            'modResource.parent' => $parent,
+            'modResource.deleted' => 0,
+            'modResource.show_in_tree' => true,
+        ]);
+        $c->where($treeNodeWhere);
+        $c->groupby('modResource.id');
+        $c->sortby('modResource.menuindex', 'ASC');
+
+        $nodes = [];
+        if ($c->prepare() && $c->stmt->execute()) {
+            while ($row = $c->stmt->fetch(\PDO::FETCH_ASSOC)) {
+                $id = (int)$row['id'];
+                $selectable = $this->isCategoryClass((string)$row['class_key']);
+                $checked = $selectable && (
+                    $clientSentCategories
+                        ? isset($checkedSet[$id])
+                        : (!empty($row['member']) || isset($checkedSet[$id]))
+                );
+                $nodes[] = [
+                    'id' => $id,
+                    'label' => (string)($row['menutitle'] ?: $row['pagetitle'] ?? ''),
+                    'leaf' => (int)$row['childrenCount'] === 0,
+                    'checked' => $checked,
+                    'selectable' => $selectable,
+                    'locked' => $selectable && $id === $parentCategoryId,
+                    'class_key' => $row['class_key'],
+                    'published' => (int)$row['published'],
+                    'hidemenu' => (int)($row['hidemenu'] ?? 0),
+                ];
+            }
+        }
+
+        return $nodes;
+    }
+
+    /**
+     * @param array<int|string> $preChecked
+     * @return array<int, true>
+     */
+    private function buildCheckedSet(int $parentCategoryId, array $preChecked): array
+    {
+        $checkedSet = [];
+        foreach ($preChecked as $catId) {
+            if (is_numeric($catId)) {
+                $checkedSet[(int)$catId] = true;
+            }
+        }
+        if ($parentCategoryId > 0) {
+            $checkedSet[$parentCategoryId] = true;
+        }
+
+        return $checkedSet;
+    }
+}
diff --git a/core/components/minishop3/src/Utils/IntArrayDecoder.php b/core/components/minishop3/src/Utils/IntArrayDecoder.php
new file mode 100644
index 00000000..67b5da10
--- /dev/null
+++ b/core/components/minishop3/src/Utils/IntArrayDecoder.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace MiniShop3\Utils;
+
+/**
+ * Normalizes client-supplied id lists into a deduplicated list of positive ints.
+ *
+ * Shared by API controllers that accept ids as a JSON array, a comma-separated
+ * string, or a native array (query params, JSON bodies, bulk payloads).
+ */
+final class IntArrayDecoder
+{
+    /**
+     * @param mixed $input JSON array, comma-separated string, or array of ids.
+     * @return list<int> Deduplicated positive ints, preserving first-seen order.
+     */
+    public static function decode($input): array
+    {
+        if ($input === null || $input === '') {
+            return [];
+        }
+
+        if (is_string($input)) {
+            $decoded = json_decode($input, true);
+            if (is_array($decoded)) {
+                $input = $decoded;
+            } else {
+                $input = explode(',', $input);
+            }
+        }
+
+        if (!is_array($input)) {
+            return [];
+        }
+
+        $out = [];
+        foreach ($input as $value) {
+            if (!is_numeric($value)) {
+                continue;
+            }
+            $id = (int)$value;
+            if ($id > 0 && !in_array($id, $out, true)) {
+                $out[] = $id;
+            }
+        }
+
+        return $out;
+    }
+}
diff --git a/core/components/minishop3/src/Utils/ResourceCategoryTreeQueryTrait.php b/core/components/minishop3/src/Utils/ResourceCategoryTreeQueryTrait.php
new file mode 100644
index 00000000..64236786
--- /dev/null
+++ b/core/components/minishop3/src/Utils/ResourceCategoryTreeQueryTrait.php
@@ -0,0 +1,78 @@
+<?php
+
+namespace MiniShop3\Utils;
+
+use MiniShop3\Model\msCategory;
+use MODX\Revolution\modResource;
+
+/**
+ * Shared SQL helpers + class-key sets for the resource category tree.
+ *
+ * Used by both the product Categories tab ({@see \MiniShop3\Services\Product\ProductCategoryTreeService})
+ * and the Options category picker ({@see \MiniShop3\Controllers\Api\Manager\OptionsController}).
+ *
+ * Node visibility rules (no system settings needed):
+ *   - msCategory: visible and selectable;
+ *   - MODX folder resources / web links: visible for navigation only;
+ *   - msProduct and plain content resources: excluded.
+ *
+ * Requires the using class to expose a public `modx` property (modX).
+ */
+trait ResourceCategoryTreeQueryTrait
+{
+    /**
+     * @return string[] FQCN + short name — resources selectable as categories.
+     */
+    protected function treeCategoryClassKeys(): array
+    {
+        return [
+            msCategory::class,
+            'msCategory',
+        ];
+    }
+
+    /**
+     * @return string[] Navigation containers visible in the tree.
+     */
+    protected function treeContainerClassKeys(): array
+    {
+        return [
+            modResource::class,
+            'MODX\\Revolution\\modDocument',
+            'MODX\\Revolution\\modWebLink',
+            'modResource',
+            'modDocument',
+            'modWebLink',
+        ];
+    }
+
+    protected function getTreeNodeSqlFilter(string $alias, string $treeClassKeysSql, string $categoryClassKeysSql): string
+    {
+        return "(`{$alias}`.`class_key` IN ({$treeClassKeysSql}) "
+            . "AND (`{$alias}`.`class_key` IN ({$categoryClassKeysSql}) OR `{$alias}`.`isfolder` = 1))";
+    }
+
+    /**
+     * @return string[] Category + container class keys, deduplicated.
+     */
+    protected function getTreeClassKeys(): array
+    {
+        return array_values(array_unique(array_merge(
+            $this->treeCategoryClassKeys(),
+            $this->treeContainerClassKeys()
+        )));
+    }
+
+    protected function isCategoryClass(string $classKey): bool
+    {
+        return in_array($classKey, $this->treeCategoryClassKeys(), true);
+    }
+
+    /**
+     * @param string[] $values
+     */
+    protected function quoteSqlStringList(array $values): string
+    {
+        return implode(', ', array_map(fn(string $value): string => $this->modx->quote($value), $values));
+    }
+}
diff --git a/vueManager/src/components/OptionCategoryTree.vue b/vueManager/src/components/OptionCategoryTree.vue
index d30318b6..6c4b2c4f 100644
--- a/vueManager/src/components/OptionCategoryTree.vue
+++ b/vueManager/src/components/OptionCategoryTree.vue
@@ -1,347 +1,22 @@
 <script setup>
-import { useLexicon } from '@vuetools/useLexicon'
-import Checkbox from 'primevue/checkbox'
-import ContextMenu from 'primevue/contextmenu'
-import Tree from 'primevue/tree'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed } from 'vue'
 
-import request from '../request.js'
+import ResourceCategoryTree from './ResourceCategoryTree.vue'
 
-/**
- * MODX resource tree with checkbox selection for category picking.
- *
- * Features matching the legacy ExtJS tree (ms3-tree-option-categories):
- *  - Checkbox selection with hierarchical propagation (PrimeVue handles parent/partial states)
- *  - Lazy loading of children on node expand
- *  - Context menu per node: refresh, expand tree, collapse tree, select all (with children), clear all
- *  - Filter by label
- *  - Initial pre-check from `modelValue` (category ids) + optional option_id that auto-fetches
- *    current category links
- */
+const modelValue = defineModel({ type: Array, default: () => [] })
 
 const props = defineProps({
-  /** Currently checked category ids — supports v-model. */
-  modelValue: { type: Array, default: () => [] },
-  /** Pre-fetch checked state from the option's current links. Pass 0/null to skip. */
   optionId: { type: [Number, String], default: 0 },
 })
 
-const emit = defineEmits(['update:modelValue'])
-const { _ } = useLexicon()
-
-const nodes = ref([])
-const expandedKeys = ref({})
-const loading = ref(false)
-const contextMenu = ref(null)
-const contextNode = ref(null)
-
-/**
- * Independent checkbox state: Set<categoryId>.
- * PrimeVue Tree with selection-mode=checkbox hard-codes parent↔child propagation with no
- * opt-out (v4.3.1). We render a native PrimeVue Checkbox inside the node slot and manage
- * selection ourselves — ticking a parent does NOT cascade to children, unticking a child
- * does NOT unselect the parent.
- */
-const checkedSet = ref(new Set())
-
-const contextMenuItems = computed(() => [
-  {
-    label: _('directory_refresh') || 'Обновить',
-    icon: 'pi pi-refresh',
-    command: () => refreshNode(contextNode.value),
-  },
-  { separator: true },
-  {
-    label: _('expand_tree') || 'Развернуть',
-    icon: 'pi pi-chevron-down',
-    command: () => expandBranch(contextNode.value, true),
-  },
-  {
-    label: _('collapse_tree') || 'Свернуть',
-    icon: 'pi pi-chevron-up',
-    command: () => expandBranch(contextNode.value, false),
-  },
-  { separator: true },
-  {
-    label: _('ms3_menu_select_all') || 'Выделить все',
-    icon: 'pi pi-check-square',
-    command: () => bulkToggleChecks(contextNode.value, true),
-  },
-  {
-    label: _('ms3_menu_clear_all') || 'Снять все',
-    icon: 'pi pi-stop',
-    command: () => bulkToggleChecks(contextNode.value, false),
-  },
-])
-
-/**
- * Fetch a level of the tree. parent=0 = root.
- */
-async function fetchChildren(parent = 0) {
-  const params = { parent }
-  if (props.optionId) {
-    params.option_id = props.optionId
-  }
-  if (props.modelValue && props.modelValue.length > 0) {
-    params.categories = JSON.stringify(props.modelValue)
-  }
-
-  const response = await request.get('/api/mgr/options/tree', params)
-  const results = response?.results || []
-  return results.map(row => normalizeNode(row))
-}
-
-/** Backend adds `selectable`; older responses without it were msCategory-only (all selectable). */
-function isApiRowSelectable(row) {
-  return typeof row.selectable === 'boolean' ? row.selectable : true
-}
-
-function normalizeNode(row) {
-  const node = {
-    key: String(row.id),
-    id: row.id,
-    label: row.label,
-    leaf: !!row.leaf,
-    data: {
-      class_key: row.class_key,
-      selectable: isApiRowSelectable(row),
-      published: row.published,
-      hidemenu: row.hidemenu,
-    },
-    // PrimeVue treats presence of `children` (even empty) as "loaded" — keep undefined until we load.
-  }
-  if (row.checked) {
-    checkedSet.value.add(row.id)
-  }
-  return node
-}
-
-function isSelectableNode(node) {
-  return !!node?.data?.selectable
-}
-
-function isChecked(node) {
-  return checkedSet.value.has(node.id)
-}
-
-function toggleNode(node, checked) {
-  if (!isSelectableNode(node)) {
-    return
-  }
-  const next = new Set(checkedSet.value)
-  if (checked) {
-    next.add(node.id)
-  } else {
-    next.delete(node.id)
-  }
-  checkedSet.value = next
-  emitSelection()
-}
-
-async function loadRoot() {
-  loading.value = true
-  try {
-    nodes.value = await fetchChildren(0)
-  } finally {
-    loading.value = false
-  }
-}
-
-async function onNodeExpand(node) {
-  if (node.children !== undefined) return
-  const children = await fetchChildren(node.id)
-  // Vue reactivity: assign via findAndReplace to keep treeview in sync.
-  replaceNodeInPlace(node.key, { ...node, children })
-}
-
-/**
- * Replace a node somewhere in the tree by key, preserving ordering.
- */
-function replaceNodeInPlace(key, replacement) {
-  function walk(list) {
-    for (let i = 0; i < list.length; i++) {
-      if (list[i].key === key) {
-        list[i] = replacement
-        return true
-      }
-      if (Array.isArray(list[i].children)) {
-        if (walk(list[i].children)) return true
-      }
-    }
-    return false
-  }
-  walk(nodes.value)
-  nodes.value = [...nodes.value]
-}
-
-async function refreshNode(node) {
-  if (!node) return
-  if (node.id === 0 || node.id === undefined) {
-    await loadRoot()
-    return
-  }
-  const children = await fetchChildren(node.id)
-  replaceNodeInPlace(node.key, { ...node, children })
-  expandedKeys.value = { ...expandedKeys.value, [node.key]: true }
-}
-
-function expandBranch(node, expand) {
-  if (!node) return
-  const next = { ...expandedKeys.value }
-  function walk(n) {
-    if (!n) return
-    if (expand) {
-      next[n.key] = true
-    } else {
-      delete next[n.key]
-    }
-    if (Array.isArray(n.children)) {
-      n.children.forEach(walk)
-    }
-  }
-  walk(node)
-  expandedKeys.value = next
-}
-
-/**
- * Toggle checkbox for a node and all its loaded descendants.
- * For lazy children that are not yet loaded, we pre-fetch them recursively.
- */
-async function bulkToggleChecks(node, checked) {
-  if (!node) return
-  await ensureChildrenLoaded(node)
-
-  const next = new Set(checkedSet.value)
-  function walk(n) {
-    if (!isSelectableNode(n)) {
-      if (Array.isArray(n.children)) {
-        n.children.forEach(walk)
-      }
-      return
-    }
-    if (checked) {
-      next.add(n.id)
-    } else {
-      next.delete(n.id)
-    }
-    if (Array.isArray(n.children)) {
-      n.children.forEach(walk)
-    }
-  }
-  walk(node)
-  checkedSet.value = next
-  emitSelection()
-}
-
-async function ensureChildrenLoaded(node) {
-  if (node.leaf) return
-  if (!Array.isArray(node.children)) {
-    const children = await fetchChildren(node.id)
-    replaceNodeInPlace(node.key, { ...node, children })
-    node.children = children
-  }
-  for (const child of node.children) {
-    await ensureChildrenLoaded(child)
-  }
-}
-
-function emitSelection() {
-  emit('update:modelValue', Array.from(checkedSet.value))
-}
-
-function onNodeContextMenu(event, node) {
-  contextNode.value = node
-  contextMenu.value?.show(event)
-}
-
-watch(
-  () => props.modelValue,
-  newIds => {
-    checkedSet.value = new Set(newIds || [])
-  },
-  { deep: true }
-)
-
-onMounted(() => {
-  loadRoot()
-})
-
-defineExpose({
-  refresh: loadRoot,
-})
+const apiParams = computed(() => (props.optionId ? { option_id: props.optionId } : {}))
 </script>
 
 <template>
-  <div class="option-category-tree">
-    <Tree
-      v-model:expanded-keys="expandedKeys"
-      :value="nodes"
-      :loading="loading"
-      :filter="true"
-      filter-mode="lenient"
-      :filter-placeholder="_('search') || 'Поиск'"
-      class="tree-body"
-      @node-expand="onNodeExpand"
-    >
-      <template #default="{ node }">
-        <span
-          class="tree-node-row"
-          :class="{ 'tree-node-row-navigation': !isSelectableNode(node) }"
-          @contextmenu.prevent="onNodeContextMenu($event, node)"
-        >
-          <Checkbox
-            v-if="isSelectableNode(node)"
-            :model-value="isChecked(node)"
-            :binary="true"
-            :input-id="'opt-cat-' + node.id"
-            class="tree-node-check"
-            @update:model-value="toggleNode(node, $event)"
-          />
-          <label v-if="isSelectableNode(node)" :for="'opt-cat-' + node.id" class="tree-node-label">
-            {{ node.label }}
-          </label>
-          <span v-else class="tree-node-label tree-node-label-navigation">{{ node.label }}</span>
-        </span>
-      </template>
-    </Tree>
-
-    <ContextMenu ref="contextMenu" :model="contextMenuItems" />
-  </div>
+  <ResourceCategoryTree
+    v-model="modelValue"
+    api-url="/api/mgr/options/tree"
+    :api-params="apiParams"
+    input-id-prefix="opt-cat-"
+  />
 </template>
-
-<style>
-/* Non-scoped with .vueApp prefix — avoids Vite scoped-hash mismatch across chunks */
-.vueApp .option-category-tree {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 20rem;
-}
-
-.vueApp .option-category-tree .tree-body {
-  flex: 1;
-  overflow: auto;
-  border: 1px solid var(--p-tree-border-color, #e5e7eb);
-  border-radius: 0.375rem;
-}
-
-.vueApp .option-category-tree .tree-node-row {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-
-.vueApp .option-category-tree .tree-node-label {
-  cursor: pointer;
-  user-select: none;
-}
-
-.vueApp .option-category-tree .tree-node-row-navigation {
-  opacity: 0.72;
-}
-
-.vueApp .option-category-tree .tree-node-label-navigation {
-  cursor: default;
-  font-style: italic;
-}
-</style>
diff --git a/vueManager/src/components/ResourceCategoryTree.vue b/vueManager/src/components/ResourceCategoryTree.vue
new file mode 100644
index 00000000..8bd15341
--- /dev/null
+++ b/vueManager/src/components/ResourceCategoryTree.vue
@@ -0,0 +1,352 @@
+<script setup>
+import { useLexicon } from '@vuetools/useLexicon'
+import Checkbox from 'primevue/checkbox'
+import ContextMenu from 'primevue/contextmenu'
+import Tree from 'primevue/tree'
+import { computed, onMounted, ref, watch } from 'vue'
+
+import request from '../request.js'
+
+/**
+ * Reusable MODX resource tree with independent checkbox selection.
+ *
+ * Used by product Categories tab and option category pickers. PrimeVue Tree
+ * selection-mode=checkbox cascades parent/child checks with no opt-out in v4,
+ * so checkboxes are rendered manually inside the node slot.
+ */
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  apiUrl: { type: String, required: true },
+  apiParams: { type: Object, default: () => ({}) },
+  /** Category ids that stay checked and cannot be toggled off (e.g. product parent). */
+  lockedIds: { type: Array, default: () => [] },
+  inputIdPrefix: { type: String, default: 'resource-cat-' },
+})
+
+const emit = defineEmits(['update:modelValue'])
+const { _ } = useLexicon()
+
+const nodes = ref([])
+const expandedKeys = ref({})
+const loading = ref(false)
+const contextMenu = ref(null)
+const contextNode = ref(null)
+const checkedSet = ref(new Set())
+
+const lockedSet = computed(() => new Set(props.lockedIds.map(id => Number(id))))
+
+const contextMenuItems = computed(() => [
+  {
+    label: _('directory_refresh') || 'Обновить',
+    icon: 'pi pi-refresh',
+    command: () => refreshNode(contextNode.value),
+  },
+  { separator: true },
+  {
+    label: _('expand_tree') || 'Развернуть',
+    icon: 'pi pi-chevron-down',
+    command: () => expandBranch(contextNode.value, true),
+  },
+  {
+    label: _('collapse_tree') || 'Свернуть',
+    icon: 'pi pi-chevron-up',
+    command: () => expandBranch(contextNode.value, false),
+  },
+  { separator: true },
+  {
+    label: _('ms3_menu_select_all') || 'Выделить все',
+    icon: 'pi pi-check-square',
+    command: () => bulkToggleChecks(contextNode.value, true),
+  },
+  {
+    label: _('ms3_menu_clear_all') || 'Снять все',
+    icon: 'pi pi-stop',
+    command: () => bulkToggleChecks(contextNode.value, false),
+  },
+])
+
+async function fetchChildren(parent = 0) {
+  const params = {
+    parent,
+    ...props.apiParams,
+    categories: JSON.stringify(Array.isArray(props.modelValue) ? props.modelValue : []),
+  }
+
+  const response = await request.get(props.apiUrl, params)
+  const results = response?.results || []
+  mergeCheckedFromApi(results)
+  return results.map(row => toTreeNode(row))
+}
+
+function toTreeNode(row) {
+  return {
+    key: String(row.id),
+    id: row.id,
+    label: row.label,
+    leaf: !!row.leaf,
+    data: {
+      class_key: row.class_key,
+      selectable: row.selectable !== false,
+      locked: isApiRowLocked(row),
+      published: row.published,
+      hidemenu: row.hidemenu,
+    },
+  }
+}
+
+function mergeCheckedFromApi(rows) {
+  const next = new Set(checkedSet.value)
+  for (const row of rows) {
+    if (row.checked || lockedSet.value.has(Number(row.id))) {
+      next.add(row.id)
+    }
+  }
+  checkedSet.value = next
+}
+
+function isApiRowLocked(row) {
+  return Boolean(row.locked) || lockedSet.value.has(Number(row.id))
+}
+
+function isSelectableNode(node) {
+  return !!node?.data?.selectable
+}
+
+function isLockedNode(node) {
+  return !!node?.data?.locked || lockedSet.value.has(Number(node?.id))
+}
+
+function isChecked(node) {
+  return checkedSet.value.has(node.id)
+}
+
+function toggleNode(node, checked) {
+  if (!isSelectableNode(node) || (isLockedNode(node) && !checked)) {
+    return
+  }
+  const next = new Set(checkedSet.value)
+  if (checked) {
+    next.add(node.id)
+  } else {
+    next.delete(node.id)
+  }
+  checkedSet.value = next
+  emitSelection()
+}
+
+async function loadRoot() {
+  loading.value = true
+  try {
+    nodes.value = await fetchChildren(0)
+    ensureLockedChecked()
+  } finally {
+    loading.value = false
+  }
+}
+
+function ensureLockedChecked() {
+  const next = new Set(checkedSet.value)
+  lockedSet.value.forEach(id => next.add(id))
+  checkedSet.value = next
+  emitSelection()
+}
+
+async function onNodeExpand(node) {
+  if (node.children !== undefined) return
+  const children = await fetchChildren(node.id)
+  replaceNodeInPlace(node.key, { ...node, children })
+}
+
+function replaceNodeInPlace(key, replacement) {
+  function walk(list) {
+    for (let i = 0; i < list.length; i++) {
+      if (list[i].key === key) {
+        list[i] = replacement
+        return true
+      }
+      if (Array.isArray(list[i].children)) {
+        if (walk(list[i].children)) return true
+      }
+    }
+    return false
+  }
+  walk(nodes.value)
+  nodes.value = [...nodes.value]
+}
+
+async function refreshNode(node) {
+  if (!node) return
+  if (!node.id) {
+    await loadRoot()
+    return
+  }
+  const children = await fetchChildren(node.id)
+  replaceNodeInPlace(node.key, { ...node, children })
+  expandedKeys.value = { ...expandedKeys.value, [node.key]: true }
+}
+
+function expandBranch(node, expand) {
+  if (!node) return
+  const next = { ...expandedKeys.value }
+  function walk(n) {
+    if (!n) return
+    if (expand) {
+      next[n.key] = true
+    } else {
+      delete next[n.key]
+    }
+    if (Array.isArray(n.children)) {
+      n.children.forEach(walk)
+    }
+  }
+  walk(node)
+  expandedKeys.value = next
+}
+
+async function bulkToggleChecks(node, checked) {
+  if (!node) return
+  await ensureChildrenLoaded(node)
+
+  const next = new Set(checkedSet.value)
+  function walk(n) {
+    if (isSelectableNode(n)) {
+      if (checked || isLockedNode(n)) {
+        next.add(n.id)
+      } else {
+        next.delete(n.id)
+      }
+    }
+    if (Array.isArray(n.children)) {
+      n.children.forEach(walk)
+    }
+  }
+  walk(node)
+  checkedSet.value = next
+  emitSelection()
+}
+
+async function ensureChildrenLoaded(node) {
+  if (node.leaf) return
+  if (!Array.isArray(node.children)) {
+    const children = await fetchChildren(node.id)
+    replaceNodeInPlace(node.key, { ...node, children })
+    node.children = children
+  }
+  for (const child of node.children) {
+    await ensureChildrenLoaded(child)
+  }
+}
+
+function emitSelection() {
+  emit('update:modelValue', Array.from(checkedSet.value))
+}
+
+function onNodeContextMenu(event, node) {
+  contextNode.value = node
+  contextMenu.value?.show(event)
+}
+
+watch(
+  () => props.modelValue,
+  newIds => {
+    checkedSet.value = new Set(newIds || [])
+    ensureLockedChecked()
+  },
+  { deep: true }
+)
+
+watch(lockedSet, () => ensureLockedChecked())
+
+onMounted(() => {
+  loadRoot()
+})
+
+defineExpose({
+  refresh: loadRoot,
+})
+</script>
+
+<template>
+  <div class="resource-category-tree">
+    <Tree
+      v-model:expanded-keys="expandedKeys"
+      :value="nodes"
+      :loading="loading"
+      :filter="true"
+      filter-mode="lenient"
+      :filter-placeholder="_('search') || 'Поиск'"
+      class="tree-body"
+      @node-expand="onNodeExpand"
+    >
+      <template #default="{ node }">
+        <span
+          class="tree-node-row"
+          :class="{ 'tree-node-row-navigation': !isSelectableNode(node) }"
+          @contextmenu.prevent="onNodeContextMenu($event, node)"
+        >
+          <Checkbox
+            v-if="isSelectableNode(node)"
+            :model-value="isChecked(node)"
+            :binary="true"
+            :disabled="isLockedNode(node)"
+            :input-id="inputIdPrefix + node.id"
+            class="tree-node-check"
+            @update:model-value="toggleNode(node, $event)"
+          />
+          <label
+            v-if="isSelectableNode(node)"
+            :for="inputIdPrefix + node.id"
+            class="tree-node-label"
+            :class="{ 'tree-node-label-locked': isLockedNode(node) }"
+          >
+            {{ node.label }}
+          </label>
+          <span v-else class="tree-node-label tree-node-label-navigation">{{ node.label }}</span>
+        </span>
+      </template>
+    </Tree>
+
+    <ContextMenu ref="contextMenu" :model="contextMenuItems" />
+  </div>
+</template>
+
+<style>
+.vueApp .resource-category-tree {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 20rem;
+}
+
+.vueApp .resource-category-tree .tree-body {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid var(--p-tree-border-color, #e5e7eb);
+  border-radius: 0.375rem;
+}
+
+.vueApp .resource-category-tree .tree-node-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.vueApp .resource-category-tree .tree-node-label {
+  cursor: pointer;
+  user-select: none;
+}
+
+.vueApp .resource-category-tree .tree-node-label-locked {
+  font-weight: 600;
+}
+
+.vueApp .resource-category-tree .tree-node-row-navigation {
+  opacity: 0.72;
+}
+
+.vueApp .resource-category-tree .tree-node-label-navigation {
+  cursor: default;
+  font-style: italic;
+}
+</style>
diff --git a/vueManager/src/components/product/ProductCategoriesTab.vue b/vueManager/src/components/product/ProductCategoriesTab.vue
new file mode 100644
index 00000000..312322c0
--- /dev/null
+++ b/vueManager/src/components/product/ProductCategoriesTab.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+import ResourceCategoryTree from '../ResourceCategoryTree.vue'
+
+const props = defineProps({
+  productId: {
+    type: Number,
+    required: true,
+  },
+  parentId: {
+    type: Number,
+    default: 0,
+  },
+  initialCategories: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const selectedIds = ref(normalizeIds(props.initialCategories))
+
+const parentCategoryId = computed(() => Number(props.parentId) || 0)
+
+const lockedIds = computed(() =>
+  parentCategoryId.value > 0 ? [parentCategoryId.value] : []
+)
+
+const treeApiParams = computed(() => ({
+  parent_category: parentCategoryId.value,
+}))
+
+const hiddenValue = computed(() => JSON.stringify(selectedIds.value))
+
+function normalizeIds(ids) {
+  if (!Array.isArray(ids)) {
+    return []
+  }
+  return ids.map(id => Number(id)).filter(id => id > 0)
+}
+
+watch(
+  () => props.initialCategories,
+  value => {
+    selectedIds.value = normalizeIds(value)
+  },
+  { deep: true }
+)
+</script>
+
+<template>
+  <div class="product-categories-tab">
+    <input type="hidden" name="categories" :value="hiddenValue" />
+    <ResourceCategoryTree
+      v-model="selectedIds"
+      :api-url="`/api/mgr/product-data/${productId}/categories/tree`"
+      :api-params="treeApiParams"
+      :locked-ids="lockedIds"
+      input-id-prefix="prod-cat-"
+    />
+  </div>
+</template>
+
+<style scoped>
+.product-categories-tab {
+  display: flex;
+  flex-direction: column;
+  min-height: 20rem;
+  width: 100%;
+}
+</style>
diff --git a/vueManager/src/components/product/ProductTabs.vue b/vueManager/src/components/product/ProductTabs.vue
index 8a130127..9951ee61 100644
--- a/vueManager/src/components/product/ProductTabs.vue
+++ b/vueManager/src/components/product/ProductTabs.vue
@@ -11,6 +11,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ProductGallery from '../gallery/ProductGallery.vue'
 import ProductDataFields from '../ProductDataFields.vue'
+import ProductCategoriesTab from './ProductCategoriesTab.vue'
 import ProductOptionsTab from './ProductOptionsTab.vue'
 
 const props = defineProps({
@@ -80,13 +81,8 @@ const tabConfig = computed(() => {
     tabs.push({
       key: 'categories',
       title: _('ms3_tab_product_categories'),
-      type: 'extjs',
-      xtype: 'ms3-tree-categories',
-      extConfig: {
-        parent: props.record.parent || 0,
-        resource: props.record.id || 0,
-        categories: props.record.categories || [],
-      },
+      type: 'vue',
+      component: 'ProductCategoriesTab',
       position: 2,
     })
   }
@@ -317,6 +313,15 @@ onBeforeUnmount(() => {
             <ProductGallery :product-id="productId" :record="record" :config="config" />
           </template>
 
+          <!-- Vue component: ProductCategoriesTab -->
+          <template v-else-if="tab.type === 'vue' && tab.component === 'ProductCategoriesTab'">
+            <ProductCategoriesTab
+              :product-id="productId"
+              :parent-id="record.parent || 0"
+              :initial-categories="record.categories || []"
+            />
+          </template>
+
           <!-- Vue component: ProductOptionsTab -->
           <template v-else-if="tab.type === 'vue' && tab.component === 'ProductOptionsTab'">
             <ProductOptionsTab :option-fields="config.option_fields || []" />
@@ -368,11 +373,6 @@ onBeforeUnmount(() => {
   padding: 0.625rem;
 }
 
-/* Categories tree styles */
-#ms3-product-tab-categories :deep(.x-tree-view) {
-  min-height: 18.75rem;
-}
-
 /* Links grid styles */
 #ms3-product-tab-links :deep(.x-grid-view) {
   min-height: 12.5rem;