@wallarm-org/claude-design 4.8.0 → 4.10.0

package/dist/project/components/index.d.ts

@@ -17284,7 +17284,7 @@ export interface MetricValueProps extends HTMLAttributes<HTMLSpanElement> {
 export declare const MetricValue: FC<MetricValueProps>;
 
 // components/SimpleCharts/Metric/classes.d.ts
-export declare const metricRootClasses = "flex flex-col items-start px-16 py-8 w-full";
+export declare const metricRootClasses = "mt-auto flex flex-col items-start px-16 py-8 w-full";
 export declare const metricHeaderClasses = "flex items-baseline gap-8";
 export declare const metricValueClasses = "font-sans-display text-3xl font-medium leading-3xl text-text-primary";
 export declare const metricTotalClasses = "-ml-2 flex items-baseline gap-6";
@@ -17292,7 +17292,7 @@ export declare const metricTotalValueClasses = "font-sans-display text-lg font-m
 export declare const metricTotalWordClasses = "text-xs font-normal text-text-secondary";
 export declare const metricCaptionClasses = "text-xs text-text-secondary";
 export declare const metricSkeletonLineClasses = "w-full py-4";
-export declare const metricSparklineClasses = "mt-auto w-full px-px";
+export declare const metricSparklineClasses = "w-full px-px";
 export declare const metricSparklinePlotClasses = "relative h-48";
 export declare const metricSparklineRulerClasses = "pointer-events-none absolute top-0 h-full w-px -translate-x-1/2 overflow-visible";
 export declare const metricSparklinePopoverClasses = "pointer-events-none fixed z-(--tooltip-z-index)";

package/dist/project/design-system.json

@@ -3,7 +3,7 @@
   "layout": "files",
   "createdOnFiles": {
     "v": 1,
-    "at": "2026-11-05T18:34:22Z"
+    "at": "2026-11-06T16:22:32Z"
   },
   "title": "Wallarm Design System",
   "namespace": "WallarmDS",
@@ -28,8 +28,8 @@
   },
   "lastChange": {
     "by": "Wallarm",
-    "at": "2026-11-05T18:34:22Z",
-    "via": "GitHub · wallarm/design-system@19a4e1b8",
-    "note": "v4.8.0: 532 colors, 120 component guides, 582 icons."
+    "at": "2026-11-06T16:22:32Z",
+    "via": "GitHub · wallarm/design-system@79b1208b",
+    "note": "v4.10.0: 532 colors, 120 component guides, 582 icons."
   }
 }

package/dist/project/sampler.dc.html

@@ -52,7 +52,7 @@
           </x-import>
         </x-import>
         <x-import component-from-global-scope="WallarmDS.PageContent">
-          <!-- Entity table: Table draws its own frame and padding; the actions column is always visible. -->
+          <!-- Entity table: Table draws its own frame and padding; row actions live in the master cell. -->
           <x-import component-from-global-scope="WallarmDS.Table" aria-label="Users" data="{{rows}}" columns="{{columns}}" get-row-id="{{getRowId}}" active-row-id="{{activeRowId}}">
             <x-import component-from-global-scope="WallarmDS.TableEmptyState">
               <!-- No results: collection-empty inside a table, a reset action, never a create action. -->
@@ -172,8 +172,9 @@ class Component extends DCLogic {
       return (status === 'all' || user.status === status) &&
         (user.name.toLowerCase().includes(needle) || user.email.toLowerCase().includes(needle));
     });
-    // Always-visible row menu: a trailing display column, not meta.renderMenuAction.
-    var rowMenu = function (user) {
+    // Row menu in the master cell: meta.renderMenuAction on the first column, never a trailing actions column.
+    var rowMenu = function (row) {
+      var user = row.original;
       return h(DS.DropdownMenu, null,
         h(DS.DropdownMenuTrigger, { asChild: true },
           h(DS.Button, { variant: 'ghost', color: 'neutral', size: 'small', 'aria-label': 'Actions for ' + user.name },
@@ -189,7 +190,7 @@ class Component extends DCLogic {
         return h(DS.Avatar, { size: 'md' },
           h(DS.AvatarFallback, { name: user.name }),
           h(DS.AvatarContent, null, h(DS.AvatarName, null, user.name), h(DS.AvatarDescription, null, user.email)));
-      } },
+      }, meta: { renderMenuAction: rowMenu } },
       { accessorKey: 'status', header: 'Status', size: 140, cell: function (ctx) {
         var s = STATUS[ctx.row.original.status];
         return h(DS.Badge, { variant: 'dotted', type: 'secondary', color: s.color }, s.label);
@@ -199,9 +200,6 @@ class Component extends DCLogic {
       } },
       { accessorKey: 'lastActiveAt', header: 'Last active', size: 200, cell: function (ctx) {
         return h(DS.FormatDateTime, { value: ctx.row.original.lastActiveAt, format: 'relative' });
-      } },
-      { id: 'actions', header: '', size: 60, minSize: 60, enableHiding: false, enableSorting: false, cell: function (ctx) {
-        return rowMenu(ctx.row.original);
       } }
     ];
     return {

package/dist/project/tokens.json

@@ -5187,7 +5187,7 @@
   "meta": {
     "source": "github",
     "repo": "wallarm/design-system",
-    "ref": "mcp-v3.3.0@19a4e1b839f762f4f3147a144988f041e2960cba",
+    "ref": "mcp-v3.4.0@79b1208bdb9168e9a7d15dc19e8fc90c7256df5b",
     "package": "packages/design-system",
     "paths": {
       "tokens": [
@@ -5230,6 +5230,6 @@
         "src/theme/fonts/GeistMono-Variable.woff2"
       ]
     },
-    "synced": "2026-11-05T18:34:22Z"
+    "synced": "2026-11-06T16:22:32Z"
   }
 }

package/dist/wallarm-app.dc.html

@@ -0,0 +1,269 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Wallarm app</title>
+<script src="./support.js"></script>
+<link rel="stylesheet" href="ds/wallarm-design-system/tokens.css">
+<link rel="stylesheet" href="ds/wallarm-design-system/components/bundle.css">
+<script src="ds/wallarm-design-system/components/bundle.js"></script>
+</head>
+<body>
+<!-- App skeleton: the console frame (AppShell) with a product's RemoteShell. Customize it by
+     editing only the APP object at the top of the script; design screens inside its Page. -->
+<x-dc>
+<x-import component-from-global-scope="WallarmDS.Root" theme="light">
+  <x-import component-from-global-scope="WallarmDS.AppShell">
+    <x-import component-from-global-scope="WallarmDS.AppShellHeader">
+      <x-import component-from-global-scope="WallarmDS.TopHeader">
+        <x-import component-from-global-scope="WallarmDS.TopHeaderLogo" href="/" on-click="{{onRailClick}}">
+          <x-import component-from-global-scope="WallarmDS.Logo" size="md"></x-import>
+        </x-import>
+        <!-- Header actions, in this order: search, separator, tenant, assistant, notifications, help. -->
+        <x-import component-from-global-scope="WallarmDS.TopHeaderActions">
+          <x-import component-from-global-scope="WallarmDS.Button" variant="ghost" color="neutral" size="small" aria-label="Search">
+            <x-import component-from-global-scope="WallarmDS.Icons.Search"></x-import>
+          </x-import>
+          <x-import component-from-global-scope="WallarmDS.TopHeaderSeparator"></x-import>
+          <x-import component-from-global-scope="WallarmDS.Button" variant="ghost" color="neutral" size="small" children="{{tenantLabel}}"></x-import>
+          <x-import component-from-global-scope="WallarmDS.ChatTrigger"></x-import>
+          <x-import component-from-global-scope="WallarmDS.NotificationCenter" data-testid="notifications">
+            <x-import component-from-global-scope="WallarmDS.NotificationCenterTrigger" count="{{unreadCount}}"></x-import>
+            <x-import component-from-global-scope="WallarmDS.NotificationCenterContent">
+              <x-import component-from-global-scope="WallarmDS.NotificationCenterHeader">
+                <x-import component-from-global-scope="WallarmDS.NotificationCenterTitle"></x-import>
+                <x-import component-from-global-scope="WallarmDS.NotificationCenterHeaderActions">
+                  <x-import component-from-global-scope="WallarmDS.NotificationCenterHeaderAction">Mark all as read</x-import>
+                </x-import>
+              </x-import>
+              <x-import component-from-global-scope="WallarmDS.NotificationCenterTabs" default-value="new">
+                <x-import component-from-global-scope="WallarmDS.NotificationCenterTabsList">
+                  <x-import component-from-global-scope="WallarmDS.TabsTrigger" value="new">New <x-import component-from-global-scope="WallarmDS.NumericBadge" size="small">2</x-import></x-import>
+                  <x-import component-from-global-scope="WallarmDS.TabsTrigger" value="read">Read</x-import>
+                </x-import>
+                <x-import component-from-global-scope="WallarmDS.TabsContent" value="new">
+                  <x-import component-from-global-scope="WallarmDS.NotificationCenterBody">
+                    <x-import component-from-global-scope="WallarmDS.NotificationCenterList">
+                      <x-import component-from-global-scope="WallarmDS.NotificationCenterItem" unread="{{yes}}">
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTitle">New attack detected on api.example.com</x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTime" value="{{sentAt1}}"></x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemDescription">214 SQL injection attempts from 12 IPs in the last 10 minutes.</x-import>
+                      </x-import>
+                      <x-import component-from-global-scope="WallarmDS.NotificationCenterItem" unread="{{yes}}">
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTitle">Node wallarm-node-3 is offline</x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTime" value="{{sentAt2}}"></x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemDescription">No heartbeat for 15 minutes. Traffic fails over to wallarm-node-1.</x-import>
+                      </x-import>
+                    </x-import>
+                  </x-import>
+                </x-import>
+                <x-import component-from-global-scope="WallarmDS.TabsContent" value="read">
+                  <x-import component-from-global-scope="WallarmDS.NotificationCenterBody">
+                    <x-import component-from-global-scope="WallarmDS.NotificationCenterList">
+                      <x-import component-from-global-scope="WallarmDS.NotificationCenterItem">
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTitle">Weekly API discovery report is ready</x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTime" value="{{sentAt3}}"></x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemDescription">38 new endpoints this week, 5 of them handling sensitive data.</x-import>
+                      </x-import>
+                    </x-import>
+                  </x-import>
+                </x-import>
+              </x-import>
+            </x-import>
+          </x-import>
+          <x-import component-from-global-scope="WallarmDS.Button" variant="ghost" color="neutral" size="small" aria-label="Help">
+            <x-import component-from-global-scope="WallarmDS.Icons.CircleHelp"></x-import>
+          </x-import>
+        </x-import>
+      </x-import>
+    </x-import>
+    <x-import component-from-global-scope="WallarmDS.AppShellRail">
+      <x-import component-from-global-scope="WallarmDS.NavRail" data-testid="nav-rail">
+        <!-- Home, then the products from APP.rail; the one at APP.nav.productPath is active. -->
+        <x-import component-from-global-scope="WallarmDS.NavRailBody" children="{{railItems}}"></x-import>
+        <!-- Settings and the account menu always live in the rail footer. -->
+        <x-import component-from-global-scope="WallarmDS.NavRailFooter">
+          <x-import component-from-global-scope="WallarmDS.NavRailItem" href="/settings" icon="{{settingsIcon}}" label="Settings" on-click="{{onRailClick}}"></x-import>
+          <x-import component-from-global-scope="WallarmDS.DropdownMenu" positioning="{{accountMenuPositioning}}">
+            <x-import component-from-global-scope="WallarmDS.DropdownMenuTrigger">
+              <x-import component-from-global-scope="WallarmDS.NavRailItem" icon="{{userIcon}}" label="{{userName}}" avatar="{{yes}}"></x-import>
+            </x-import>
+            <x-import component-from-global-scope="WallarmDS.DropdownMenuContent" class-name="w-200">
+              <x-import component-from-global-scope="WallarmDS.DropdownMenuItem">
+                <x-import component-from-global-scope="WallarmDS.DropdownMenuItemIcon">
+                  <x-import component-from-global-scope="WallarmDS.Icons.Settings"></x-import>
+                </x-import>
+                <x-import component-from-global-scope="WallarmDS.DropdownMenuItemText">Profile settings</x-import>
+              </x-import>
+              <x-import component-from-global-scope="WallarmDS.DropdownMenuSeparator"></x-import>
+              <x-import component-from-global-scope="WallarmDS.DropdownMenuItem">
+                <x-import component-from-global-scope="WallarmDS.DropdownMenuItemIcon">
+                  <x-import component-from-global-scope="WallarmDS.Icons.LogOut"></x-import>
+                </x-import>
+                <x-import component-from-global-scope="WallarmDS.DropdownMenuItemText">Sign out</x-import>
+              </x-import>
+            </x-import>
+          </x-import>
+        </x-import>
+      </x-import>
+    </x-import>
+    <x-import component-from-global-scope="WallarmDS.AppShellRemote">
+      <!-- The product: RemoteShell builds the panel and the trail from APP.nav; the URL is its only state. -->
+      <x-import component-from-global-scope="WallarmDS.RemoteShell" config="{{navConfig}}" base-path="{{productPath}}" pathname="{{pathname}}" on-navigate="{{onNavigate}}" data-testid="product-shell">
+        <x-import component-from-global-scope="WallarmDS.RemoteShellPanel"></x-import>
+        <x-import component-from-global-scope="WallarmDS.RemoteShellBreadcrumb"></x-import>
+        <x-import component-from-global-scope="WallarmDS.RemoteShellContent">
+          <!-- Design the requested screen here: keep PageHeader, add PageDescription and a PageToolbar before PageContent, fixed-height on a list, and replace PageContent's EmptyState. -->
+          <x-import component-from-global-scope="WallarmDS.Page" name="{{pageName}}" full-size="{{yes}}" data-testid="page">
+            <x-import component-from-global-scope="WallarmDS.PageHeader">
+              <x-import component-from-global-scope="WallarmDS.PageHeaderGroup">
+                <x-import component-from-global-scope="WallarmDS.PageTitle" children="{{pageTitle}}"></x-import>
+              </x-import>
+              <x-import component-from-global-scope="WallarmDS.PageActions" children="{{pageActions}}"></x-import>
+            </x-import>
+            <x-import component-from-global-scope="WallarmDS.PageContent">
+              <x-import component-from-global-scope="WallarmDS.EmptyState" type="collection-empty">
+                <x-import component-from-global-scope="WallarmDS.EmptyStateIllustration">
+                  <x-import component-from-global-scope="WallarmDS.Icons.PenTool"></x-import>
+                </x-import>
+                <x-import component-from-global-scope="WallarmDS.EmptyStateMessage">
+                  <x-import component-from-global-scope="WallarmDS.EmptyStateTitle">Ask Claude to design this screen</x-import>
+                  <x-import component-from-global-scope="WallarmDS.EmptyStateDescription">Describe what this page shows and Claude builds it here, inside the app frame.</x-import>
+                </x-import>
+              </x-import>
+            </x-import>
+          </x-import>
+        </x-import>
+      </x-import>
+    </x-import>
+  </x-import>
+</x-import>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1440,&quot;height&quot;:900}}">
+/* ===== APP: the person's product. Change the shell only here; everything below reads from it.
+   A screen's own data (rows, counts) goes in renderVals(), not here. =====
+   rail:  the Wallarm products in the 1st rail (label, path, icon). The one whose path is
+          nav.productPath is active; Home and Settings are always there.
+   nav:   the product's RemoteShell NavConfig. Node types: 'link' (id, label, path, icon?),
+          'group' (id, label, icon?, defaultExpanded?, children), 'section-header' (id, label),
+          'drill' only when asked. ids and paths are kebab-case; a path is one segment.
+          Icons are WallarmDS.Icons names as strings. A link may have `action`: the label of
+          its page's primary button.
+   start: the path of the link the board opens on: the first link, or the screen this board designs.
+   tenant, user: the header's tenant switcher and the account menu's name. */
+var APP = {
+  tenant: 'Acme Bank',
+  user: 'Maria Lopez',
+  rail: [
+    { label: 'API Security', path: '/api-security', icon: 'ShieldCheck' },
+    { label: 'Edge', path: '/edge', icon: 'Cloud' },
+    { label: 'Security Testing', path: '/security-testing', icon: 'FlaskConical' },
+    { label: 'AI Hypervisor', path: '/ai-hypervisor', icon: 'Bot' }
+  ],
+  nav: {
+    productLabel: 'API Security',
+    productPath: '/api-security',
+    items: [
+      { type: 'link', id: 'overview', label: 'Overview', path: 'overview', icon: 'Activity' },
+      { type: 'link', id: 'api-discovery', label: 'API Discovery', path: 'api-discovery', icon: 'Search' },
+      { type: 'link', id: 'api-specifications', label: 'API Specifications', path: 'api-specifications', icon: 'Layers', action: 'Upload specification', dividerAfter: true },
+      { type: 'section-header', id: 'detect', label: 'Detect & Respond' },
+      { type: 'group', id: 'events', label: 'Events', icon: 'Zap', defaultExpanded: true, children: [
+        { type: 'link', id: 'attacks', label: 'Attacks', path: 'attacks' },
+        { type: 'link', id: 'incidents', label: 'Incidents', path: 'incidents' },
+        { type: 'link', id: 'sessions', label: 'Sessions', path: 'sessions' }
+      ] }
+    ]
+  },
+  start: 'overview'
+};
+/* ===== End of APP. ===== */
+
+var minutesAgo = function (minutes) { return new Date(Date.now() - minutes * 60000); };
+var warned = {};
+
+class Component extends DCLogic {
+  constructor(props) {
+    super(props);
+    this.state = { pathname: APP.nav.productPath + '/' + (APP.start || firstLink(APP.nav.items).path) };
+  }
+  renderVals() {
+    var h = React.createElement;
+    var DS = WallarmDS;
+    var self = this;
+    var icon = function (name) {
+      if (!name) return undefined;
+      if (!DS.Icons[name] && !warned[name]) {
+        warned[name] = true;
+        console.warn('[WallarmDS] icon "' + name + '" is not in WallarmDS.Icons; fix it in APP.');
+      }
+      return DS.Icons[name];
+    };
+    // NavConfig with icon names resolved; `action` stays out of the config.
+    var toNode = function (node) {
+      var out = {};
+      for (var key in node) if (key !== 'action') out[key] = node[key];
+      if (node.icon) out.icon = icon(node.icon);
+      if (node.children) out.children = node.children.map(toNode);
+      return out;
+    };
+    var segments = this.state.pathname.split('/').filter(Boolean);
+    var page = findLink(APP.nav.items, segments[segments.length - 1]) || firstLink(APP.nav.items);
+    var onRailClick = function (event) { event.preventDefault(); };
+    var railItems = [
+      h(DS.NavRailItem, { key: 'home', href: '/', icon: DS.Icons.Home, label: 'Home', onClick: onRailClick }),
+      h(DS.NavRailSeparator, { key: 'separator' })
+    ].concat(APP.rail.map(function (product) {
+      return h(DS.NavRailItem, {
+        key: product.path,
+        href: product.path,
+        icon: icon(product.icon) || DS.Icons.Layers,
+        label: product.label,
+        active: product.path === APP.nav.productPath,
+        onClick: onRailClick
+      });
+    }));
+    return {
+      yes: true,
+      tenantLabel: [APP.tenant, h(DS.Icons.ChevronUpDown, { key: 'chevron' })],
+      unreadCount: 2,
+      sentAt1: minutesAgo(3),
+      sentAt2: minutesAgo(22),
+      sentAt3: minutesAgo(60 * 24),
+      railItems: railItems,
+      onRailClick: onRailClick,
+      settingsIcon: DS.Icons.Settings,
+      userIcon: DS.Icons.UserRound,
+      userName: APP.user,
+      accountMenuPositioning: { placement: 'right-end', gutter: 6, offset: { crossAxis: 12 } },
+      navConfig: { productLabel: APP.nav.productLabel, productPath: APP.nav.productPath, items: APP.nav.items.map(toNode) },
+      productPath: APP.nav.productPath,
+      pathname: this.state.pathname,
+      onNavigate: function (to) { self.setState({ pathname: to }); },
+      pageName: page.id,
+      pageTitle: page.label,
+      pageActions: page.action ? h(DS.Button, { size: 'medium' }, page.action) : null
+    };
+  }
+}
+
+// The first link in menu order, and the link whose path is `path`, through groups and drills.
+function firstLink(items) {
+  for (var i = 0; i < items.length; i++) {
+    if (items[i].type === 'link') return items[i];
+    var inner = items[i].children && firstLink(items[i].children);
+    if (inner) return inner;
+  }
+  return null;
+}
+function findLink(items, path) {
+  for (var i = 0; i < items.length; i++) {
+    if (items[i].type === 'link' && items[i].path === path) return items[i];
+    var inner = items[i].children && findLink(items[i].children, path);
+    if (inner) return inner;
+  }
+  return null;
+}
+</script>
+</body>
+</html>

package/dist/wallarm-sampler.dc.html

@@ -53,7 +53,7 @@
           </x-import>
         </x-import>
         <x-import component-from-global-scope="WallarmDS.PageContent">
-          <!-- Entity table: Table draws its own frame and padding; the actions column is always visible. -->
+          <!-- Entity table: Table draws its own frame and padding; row actions live in the master cell. -->
           <x-import component-from-global-scope="WallarmDS.Table" aria-label="Users" data="{{rows}}" columns="{{columns}}" get-row-id="{{getRowId}}" active-row-id="{{activeRowId}}">
             <x-import component-from-global-scope="WallarmDS.TableEmptyState">
               <!-- No results: collection-empty inside a table, a reset action, never a create action. -->
@@ -173,8 +173,9 @@ class Component extends DCLogic {
       return (status === 'all' || user.status === status) &&
         (user.name.toLowerCase().includes(needle) || user.email.toLowerCase().includes(needle));
     });
-    // Always-visible row menu: a trailing display column, not meta.renderMenuAction.
-    var rowMenu = function (user) {
+    // Row menu in the master cell: meta.renderMenuAction on the first column, never a trailing actions column.
+    var rowMenu = function (row) {
+      var user = row.original;
       return h(DS.DropdownMenu, null,
         h(DS.DropdownMenuTrigger, { asChild: true },
           h(DS.Button, { variant: 'ghost', color: 'neutral', size: 'small', 'aria-label': 'Actions for ' + user.name },
@@ -190,7 +191,7 @@ class Component extends DCLogic {
         return h(DS.Avatar, { size: 'md' },
           h(DS.AvatarFallback, { name: user.name }),
           h(DS.AvatarContent, null, h(DS.AvatarName, null, user.name), h(DS.AvatarDescription, null, user.email)));
-      } },
+      }, meta: { renderMenuAction: rowMenu } },
       { accessorKey: 'status', header: 'Status', size: 140, cell: function (ctx) {
         var s = STATUS[ctx.row.original.status];
         return h(DS.Badge, { variant: 'dotted', type: 'secondary', color: s.color }, s.label);
@@ -200,9 +201,6 @@ class Component extends DCLogic {
       } },
       { accessorKey: 'lastActiveAt', header: 'Last active', size: 200, cell: function (ctx) {
         return h(DS.FormatDateTime, { value: ctx.row.original.lastActiveAt, format: 'relative' });
-      } },
-      { id: 'actions', header: '', size: 60, minSize: 60, enableHiding: false, enableSorting: false, cell: function (ctx) {
-        return rowMenu(ctx.row.original);
       } }
     ];
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/claude-design",
-  "version": "4.8.0",
+  "version": "4.10.0",
   "description": "Installs Wallarm Design System in Claude Design: `npx -y @wallarm-org/claude-design@latest export`",
   "publishConfig": {
     "access": "public",
@@ -51,9 +51,9 @@
     "tsx": "4.23.15",
     "tw-animate-css": "1.4.0",
     "typescript": "7.0.2",
-    "@wallarm-org/design-system": "4.8.0",
-    "@wallarm-org/typescript-config": "0.0.0",
-    "@wallarm-org/mcp-core": "0.1.0"
+    "@wallarm-org/design-system": "4.10.0",
+    "@wallarm-org/mcp-core": "0.1.0",
+    "@wallarm-org/typescript-config": "0.0.0"
   },
   "scripts": {
     "export": "tsx src/build.ts",