@wallarm-org/design-system 4.3.3 → 4.4.0-rc-feat-claude-design.1

package/README.md

@@ -115,6 +115,19 @@ pnpm --filter @wallarm-org/design-system icons:sync --only Bell,BellOff    # ref
 
 The command writes the component files, `src/icons/index.ts`, the gallery category (`module/const.ts`) and Code Connect (`module/Icons.figma.batch.json` + its `Icons.figma.batch.ts` template). `scripts/icons/manifest.json` maps Figma nodes to component names, and also holds excluded nodes and the `keep` list of hand-maintained icons. When a new layer's name collides with an existing icon, map it there. Brand icons without a Neutral variant in Figma get a generated `*Neutral` twin. Commit with `[update-screenshots]` so CI refreshes the icon gallery baselines.
 
+## Claude Design
+
+Choose **Wallarm Design System** in Claude Design to prototype with the generated component
+bundle, tokens, fonts and icons. See the [designer guide](../../apps/docs/docs/ai/claude-design.mdx).
+Run `pnpm --filter @wallarm-org/design-system build:claude-design` to build the package and
+generate the ignored `.claude-design/project/` folder. The bundle and story previews share
+an Rslib IIFE configuration with the native SWC React Compiler targeting React 18.
+Run `pnpm --filter @wallarm-org/design-system test:claude-design` for the React 18 harness and
+producer checks, or `pnpm --filter @wallarm-org/design-system claude-design:verify` to compare
+every output file across two consecutive builds. The repository's `/claude-design-sync`
+skill previews and manually publishes release changes; the first sync and remote deletions
+require confirmation. The npm package remains React 19; the separate canvas bundle uses React 18.
+
 ## 📖 Resources
 
 - [Docs site](https://wallarm.github.io/design-system/) - Guides and component docs

package/dist/components/Calendar/CalendarContent.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { DatePicker, Portal } from "@ark-ui/react";
+import { DatePicker } from "@ark-ui/react";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useLayerZIndexRef } from "../../utils/syncLayerZIndex.js";
 const CalendarContent = (t0)=>{

package/dist/components/Drawer/DrawerPortal.d.ts

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import { type PortalProps } from '@ark-ui/react/portal';
+import type { PortalProps } from '@ark-ui/react/portal';
 export interface DrawerPortalProps extends PortalProps {
     children: ReactNode;
 }

package/dist/components/Drawer/DrawerPortal.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Portal } from "@ark-ui/react/portal";
+import { Portal } from "../../lib/portal/Portal.js";
 const DrawerPortal = (t0)=>{
     const $ = c(6);
     let children;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -146,7 +146,7 @@ const DropdownMenu = (t0)=>{
     const root = t8;
     let t9;
     if ($[36] !== root || $[37] !== testId) {
-        t9 = /*#__PURE__*/ jsx(DropdownMenuContext, {
+        t9 = /*#__PURE__*/ jsx(DropdownMenuContext.Provider, {
             value: ctx,
             children: /*#__PURE__*/ jsx(TestIdProvider, {
                 value: testId,

package/dist/components/DropdownMenu/DropdownMenuContent.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Children, isValidElement } from "react";
 import { Menu } from "@ark-ui/react/menu";
-import { Portal } from "@ark-ui/react/portal";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useLayerZIndexRef } from "../../utils/syncLayerZIndex.js";
 import { TestIdProvider, useTestId } from "../../utils/testId.js";

package/dist/components/FeedbackPulse/FeedbackPulse.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Portal } from "@ark-ui/react/portal";
 import { Presence } from "@ark-ui/react/presence";
 import { Check, X } from "../../icons/index.js";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { Button } from "../Button/index.js";
 import { Textarea } from "../Textarea/index.js";

package/dist/components/FilterCascade/FilterCascadeContent.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Children, isValidElement, useLayoutEffect, useRef } from "react";
-import { Portal } from "@zag-js/react";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useLayerZIndexRef } from "../../utils/syncLayerZIndex.js";
 import { useTestId } from "../../utils/testId.js";

package/dist/components/Popover/PopoverContent.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Popover, usePopoverContext } from "@ark-ui/react";
-import { Portal } from "@ark-ui/react/portal";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useLayerZIndexRef } from "../../utils/syncLayerZIndex.js";
 import { useTestId } from "../../utils/testId.js";

package/dist/components/SearchModal/SearchModalContent.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";
 import { Dialog } from "@ark-ui/react/dialog";
-import { Portal } from "@ark-ui/react/portal";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { Overlay } from "../Overlay/index.js";

package/dist/components/Select/SelectPositioner.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Portal } from "@ark-ui/react/portal";
 import { Select } from "@ark-ui/react/select";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { useLayerZIndexRef } from "../../utils/syncLayerZIndex.js";
 import { dropdownMenuClassNames } from "../DropdownMenu/index.js";

package/dist/components/Selection/SelectionBulkBar/SelectionBulkBar.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Children, isValidElement } from "react";
-import { Portal } from "@ark-ui/react/portal";
 import { Presence } from "@ark-ui/react/presence";
+import { Portal } from "../../../lib/portal/Portal.js";
 import { useTestId } from "../../../utils/testId.js";
 import { BulkBarSummary, BulkBarSummaryClear, BulkBarSummaryCount, BulkBarSummarySelectAll, BulkBarSummarySeparator } from "../../BulkBar/index.js";
 import { HStack } from "../../Stack/index.js";

package/dist/components/Table/TableActionBar/TableActionBar.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Children, isValidElement } from "react";
 import { Popover } from "@ark-ui/react/popover";
-import { Portal } from "@ark-ui/react/portal";
+import { Portal } from "../../../lib/portal/Portal.js";
 import { useTestId } from "../../../utils/testId.js";
 import { bulkBarSurfaceClasses } from "../../BulkBar/classes.js";
 import { HStack } from "../../Stack/index.js";

package/dist/components/Table/TableInner/TableInnerWindow.js

@@ -200,7 +200,7 @@ const TableInnerWindow = (t0)=>{
     } else t17 = $[45];
     let t18;
     if ($[46] !== isEmpty || $[47] !== scrollRoot) {
-        t18 = !isEmpty && /*#__PURE__*/ jsx(WindowScrollRootContext, {
+        t18 = !isEmpty && /*#__PURE__*/ jsx(WindowScrollRootContext.Provider, {
             value: scrollRoot,
             children: /*#__PURE__*/ jsx(TableBody, {})
         });

package/dist/components/Toast/Toaster.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Portal } from "@ark-ui/react/portal";
 import { Toaster, createToaster } from "@ark-ui/react/toast";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { EXTENDED_TOAST_DURATION_MS, SIMPLE_TOAST_DURATION_MS, Toast, resolveToastVariant } from "./Toast.js";
 const DEFAULT_TOAST_PRIORITY = {

package/dist/components/Tooltip/TooltipContent.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Portal } from "@ark-ui/react/portal";
 import { Tooltip } from "@ark-ui/react/tooltip";
 import { cva } from "class-variance-authority";
+import { Portal } from "../../lib/portal/Portal.js";
 import { cn } from "../../utils/cn.js";
 import { hasNonTextEnd } from "../../utils/hasNonTextEnd.js";
 import { useTestId } from "../../utils/testId.js";

package/dist/components/Tour/TourInner.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Portal, useTourContext } from "@ark-ui/react";
+import { useTourContext } from "@ark-ui/react";
+import { Portal } from "../../lib/portal/Portal.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { TourBody } from "./TourBody.js";
 import { TourClose } from "./TourClose.js";

package/dist/components/WallyAssistant/WallyAssistant.js

@@ -487,7 +487,7 @@ const WallyAssistant = (t0)=>{
         onFeedback: onFeedback,
         onCopy: onCopy,
         onRetry: onRetry,
-        children: /*#__PURE__*/ jsx(AdapterContext, {
+        children: /*#__PURE__*/ jsx(AdapterContext.Provider, {
             value: outerAdapter ?? LAZY_PRISM,
             children: /*#__PURE__*/ jsxs(Chat, {
                 "aria-label": labels.region,

package/dist/components/WallyAssistant/views/ChatViewProvider.js

@@ -82,7 +82,7 @@ const ChatViewProvider = (t0)=>{
     const value = t11;
     let t12;
     if ($[22] !== children || $[23] !== value) {
-        t12 = /*#__PURE__*/ jsx(ChatViewContext, {
+        t12 = /*#__PURE__*/ jsx(ChatViewContext.Provider, {
             value: value,
             children: children
         });

package/dist/lib/portal/Portal.d.ts

@@ -0,0 +1,3 @@
+import { type PropsWithChildren } from 'react';
+import { type PortalProps } from '@ark-ui/react/portal';
+export declare const Portal: (props: PropsWithChildren<PortalProps>) => import("react").JSX.Element;

package/dist/lib/portal/Portal.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useContext } from "react";
+import { Portal } from "@ark-ui/react/portal";
+import { PortalContainerContext } from "./PortalContainerContext.js";
+const Portal_Portal = (props)=>{
+    const $ = c(3);
+    const container = useContext(PortalContainerContext);
+    const t0 = props.container ?? container ?? void 0;
+    let t1;
+    if ($[0] !== props || $[1] !== t0) {
+        t1 = /*#__PURE__*/ jsx(Portal, {
+            ...props,
+            container: t0
+        });
+        $[0] = props;
+        $[1] = t0;
+        $[2] = t1;
+    } else t1 = $[2];
+    return t1;
+};
+export { Portal_Portal as Portal };

package/dist/lib/portal/PortalContainerContext.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from 'react';
+/** Internal canvas integration; without a provider Ark keeps its normal portal destination. */
+export declare const PortalContainerContext: import("react").Context<RefObject<HTMLElement | null> | null>;

package/dist/lib/portal/PortalContainerContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const PortalContainerContext = createContext(null);
+export { PortalContainerContext };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "4.3.2",
-  "generatedAt": "2026-10-28T09:23:13.943Z",
+  "version": "4.3.3",
+  "generatedAt": "2026-10-29T07:02:33.247Z",
   "components": [
     {
       "name": "Accordion",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "4.3.3",
+  "version": "4.4.0-rc-feat-claude-design.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",
@@ -70,7 +70,7 @@
     "publish:local": "pnpm build && yalc publish --push",
     "lint": "biome check",
     "lint:fix": "biome check --fix",
-    "typecheck": "tsc -p tsconfig.app.json --noEmit --composite false --incremental false && tsc -p tsconfig.storybook.json --noEmit --composite false --incremental false && tsc -p tsconfig.figma.json --noEmit --composite false --incremental false && tsc -p tsconfig.e2e.json --noEmit --composite false --incremental false",
+    "typecheck": "tsc -p tsconfig.app.json --noEmit --composite false --incremental false && tsc -p tsconfig.storybook.json --noEmit --composite false --incremental false && tsc -p tsconfig.figma.json --noEmit --composite false --incremental false && tsc -p tsconfig.e2e.json --noEmit --composite false --incremental false && tsc -p tsconfig.claude-design.json --noEmit",
     "test": "rstest watch",
     "test:coverage": "rstest run --coverage",
     "test:run": "rstest run",
@@ -85,7 +85,11 @@
     "e2e:docker:report": "playwright show-report ./playwright-report --port=9323",
     "icons:sync": "tsx scripts/icons/sync.ts",
     "code-connect:preview": "node --env-file-if-exists=../../.env.local node_modules/@figma/code-connect/bin/figma connect preview",
-    "code-connect:publish": "node --env-file-if-exists=../../.env.local node_modules/@figma/code-connect/bin/figma connect publish --exit-on-unreadable-files"
+    "code-connect:publish": "node --env-file-if-exists=../../.env.local node_modules/@figma/code-connect/bin/figma connect publish --exit-on-unreadable-files",
+    "claude-design:no-impact": "tsx claude-design/no-impact.ts",
+    "test:claude-design": "rstest run --config rstest.claude-design.config.ts",
+    "build:claude-design": "turbo run build --filter=@wallarm-org/design-system... && tsx claude-design/build.ts",
+    "claude-design:verify": "turbo run build --filter=@wallarm-org/design-system... && tsx claude-design/verify.ts"
   },
   "devDependencies": {
     "@babel/core": "7.29.7",
@@ -107,6 +111,7 @@
     "@testing-library/react": "catalog:",
     "@testing-library/user-event": "catalog:",
     "@types/babel__core": "7.20.5",
+    "@types/jsdom": "21.1.7",
     "@types/luaparse": "0.2.13",
     "@types/node": "catalog:",
     "@types/prismjs": "1.26.6",
@@ -120,11 +125,15 @@
     "@wallarm-org/tailwind-config": "workspace:*",
     "@wallarm-org/typescript-config": "workspace:*",
     "babel-plugin-react-compiler": "1.0.0",
+    "esbuild": "0.28.1",
     "glob": "13.0.6",
     "jsdom": "catalog:",
     "postcss": "8.5.28",
     "react": "catalog:",
+    "react-compiler-runtime": "1.0.0",
     "react-dom": "catalog:",
+    "react-dom18": "npm:react-dom@18.3.1",
+    "react18": "npm:react@18.3.1",
     "storybook": "catalog:",
     "storybook-react-rsbuild": "3.6.0",
     "tailwindcss": "catalog:",