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

package/README.md

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

package/dist/components/CodeSnippet/adapters/createShikiHighlighter.d.ts

@@ -0,0 +1 @@
+export declare const createShikiHighlighter: () => Promise<import("@shikijs/types").HighlighterCore>;

package/dist/components/CodeSnippet/adapters/createShikiHighlighter.js

@@ -0,0 +1,52 @@
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+import bash from "shiki/langs/bash.mjs";
+import c from "shiki/langs/c.mjs";
+import cpp from "shiki/langs/cpp.mjs";
+import css from "shiki/langs/css.mjs";
+import go from "shiki/langs/go.mjs";
+import html from "shiki/langs/html.mjs";
+import http from "shiki/langs/http.mjs";
+import java from "shiki/langs/java.mjs";
+import javascript from "shiki/langs/javascript.mjs";
+import json from "shiki/langs/json.mjs";
+import jsx from "shiki/langs/jsx.mjs";
+import lua from "shiki/langs/lua.mjs";
+import markdown from "shiki/langs/markdown.mjs";
+import python from "shiki/langs/python.mjs";
+import rust from "shiki/langs/rust.mjs";
+import sql from "shiki/langs/sql.mjs";
+import tsx from "shiki/langs/tsx.mjs";
+import typescript from "shiki/langs/typescript.mjs";
+import xml from "shiki/langs/xml.mjs";
+import yaml from "shiki/langs/yaml.mjs";
+import github_light from "shiki/themes/github-light.mjs";
+const createShikiHighlighter = ()=>createHighlighterCore({
+        themes: [
+            github_light
+        ],
+        langs: [
+            javascript,
+            typescript,
+            jsx,
+            tsx,
+            bash,
+            json,
+            html,
+            xml,
+            css,
+            python,
+            go,
+            sql,
+            yaml,
+            markdown,
+            lua,
+            rust,
+            java,
+            c,
+            cpp,
+            http
+        ],
+        engine: createOnigurumaEngine(import("shiki/wasm"))
+    });
+export { createShikiHighlighter };

package/dist/components/CodeSnippet/adapters/index.d.ts

@@ -1,20 +1,5 @@
+export { loadHighlightJsAdapter } from './loadHighlightJsAdapter.js';
+export { loadPrismAdapter } from './loadPrismAdapter.js';
+export { loadShikiAdapter } from './loadShikiAdapter.js';
 export { plainAdapter } from './plain.js';
 export type { HighlightJsLanguage, HighlightResult, PlainLanguage, PrismLanguage, ShikiLanguage, SyntaxAdapter, Token, TokenType, } from './types.js';
-/**
- * Lazily load the Prism adapter for syntax highlighting.
- * Lightweight, good for most use cases.
- * Bundle size: ~15KB gzipped
- */
-export declare const loadPrismAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").PrismLanguage>>;
-/**
- * Lazily load the Shiki adapter for syntax highlighting.
- * High-quality highlighting with VS Code themes, supports more languages.
- * Bundle size: ~200KB+ gzipped (includes WASM)
- */
-export declare const loadShikiAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").ShikiLanguage>>;
-/**
- * Lazily load the highlight.js adapter for syntax highlighting.
- * Well-established library, good language support.
- * Bundle size: ~30KB gzipped (core + common languages)
- */
-export declare const loadHighlightJsAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").HighlightJsLanguage>>;

package/dist/components/CodeSnippet/adapters/index.js

@@ -1,14 +1,4 @@
-const loadPrismAdapter = async ()=>{
-    const { prismAdapter } = await import("./prism.js");
-    return prismAdapter;
-};
-const loadShikiAdapter = async ()=>{
-    const { shikiAdapter } = await import("./shiki.js");
-    return shikiAdapter;
-};
-const loadHighlightJsAdapter = async ()=>{
-    const { highlightJsAdapter } = await import("./highlightjs.js");
-    return highlightJsAdapter;
-};
+export { loadHighlightJsAdapter } from "./loadHighlightJsAdapter.js";
+export { loadPrismAdapter } from "./loadPrismAdapter.js";
+export { loadShikiAdapter } from "./loadShikiAdapter.js";
 export { plainAdapter } from "./plain.js";
-export { loadHighlightJsAdapter, loadPrismAdapter, loadShikiAdapter };

package/dist/components/CodeSnippet/adapters/loadHighlightJsAdapter.d.ts

@@ -0,0 +1,2 @@
+/** Lazily load the highlight.js adapter for syntax highlighting. */
+export declare const loadHighlightJsAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").HighlightJsLanguage>>;

package/dist/components/CodeSnippet/adapters/loadHighlightJsAdapter.js

@@ -0,0 +1,5 @@
+const loadHighlightJsAdapter = async ()=>{
+    const { highlightJsAdapter } = await import("./highlightjs.js");
+    return highlightJsAdapter;
+};
+export { loadHighlightJsAdapter };

package/dist/components/CodeSnippet/adapters/loadPrismAdapter.d.ts

@@ -0,0 +1,2 @@
+/** Lazily load the Prism adapter for syntax highlighting. */
+export declare const loadPrismAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").PrismLanguage>>;

package/dist/components/CodeSnippet/adapters/loadPrismAdapter.js

@@ -0,0 +1,5 @@
+const loadPrismAdapter = async ()=>{
+    const { prismAdapter } = await import("./prism.js");
+    return prismAdapter;
+};
+export { loadPrismAdapter };

package/dist/components/CodeSnippet/adapters/loadShikiAdapter.d.ts

@@ -0,0 +1,2 @@
+/** Lazily load the Shiki adapter. Its highlighter initializes on first use. */
+export declare const loadShikiAdapter: () => Promise<import("./types.js").SyntaxAdapter<import("./types.js").ShikiLanguage>>;

package/dist/components/CodeSnippet/adapters/loadShikiAdapter.js

@@ -0,0 +1,5 @@
+const loadShikiAdapter = async ()=>{
+    const { shikiAdapter } = await import("./shiki.js");
+    return shikiAdapter;
+};
+export { loadShikiAdapter };

package/dist/components/CodeSnippet/adapters/shiki.js

@@ -44,14 +44,7 @@ function mapScopeToTokenType(scopes) {
     return 'plain';
 }
 async function getHighlighter() {
-    if (!highlighterPromise) highlighterPromise = import("shiki").then(async ({ createHighlighter })=>createHighlighter({
-            themes: [
-                'github-light'
-            ],
-            langs: [
-                ...SUPPORTED_LANGUAGES
-            ]
-        }));
+    if (!highlighterPromise) highlighterPromise = import("./createShikiHighlighter.js").then(({ createShikiHighlighter })=>createShikiHighlighter());
     return highlighterPromise;
 }
 const shikiAdapter = {

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 "../../lib/portal/Portal.js";
+import { Portal } from "@ark-ui/react/portal";
 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.Provider, {
+        t9 = /*#__PURE__*/ jsx(DropdownMenuContext, {
             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 "../../lib/portal/Portal.js";
+import { Portal } from "@ark-ui/react/portal";
 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 "../../lib/portal/Portal.js";
+import { Portal } from "@zag-js/react";
 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 "../../lib/portal/Portal.js";
+import { Portal } from "@ark-ui/react/portal";
 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 "../../lib/portal/Portal.js";
+import { Portal } from "@ark-ui/react/portal";
 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 "../../../lib/portal/Portal.js";
+import { Portal } from "@ark-ui/react/portal";
 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.Provider, {
+        t18 = !isEmpty && /*#__PURE__*/ jsx(WindowScrollRootContext, {
             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,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { useTourContext } from "@ark-ui/react";
-import { Portal } from "../../lib/portal/Portal.js";
+import { Portal, useTourContext } from "@ark-ui/react";
 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.Provider, {
+        children: /*#__PURE__*/ jsx(AdapterContext, {
             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.Provider, {
+        t12 = /*#__PURE__*/ jsx(ChatViewContext, {
             value: value,
             children: children
         });

package/dist/components/WallySkeleton/WallySkeleton.d.ts

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { TestableProps } from '../../utils/testId.js';
+export interface WallySkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Shared loading surface for the host, remote and assistant runtime. Give its parent a height.
+ * The placeholders and mesh stay static so replacing one loading stage with another cannot
+ * restart an animation and flash. This non-interactive surface exposes one loading status.
+ */
+export declare const WallySkeleton: FC<WallySkeletonProps>;

package/dist/components/WallySkeleton/WallySkeleton.js

@@ -0,0 +1,186 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { Chat, ChatBody, ChatFooter, ChatHeader, ChatHeaderActions, ChatHeaderTitle } from "../Chat/index.js";
+import { Skeleton } from "../Skeleton/index.js";
+const WallySkeleton = (t0)=>{
+    const $ = c(21);
+    let className;
+    let props;
+    let ref;
+    let testId;
+    if ($[0] !== t0) {
+        ({ ref, className, "data-testid": testId, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+        $[4] = testId;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+        testId = $[4];
+    }
+    let t1;
+    if ($[5] !== className) {
+        t1 = cn("h-full min-h-0 w-full min-w-0 flex-1", className);
+        $[5] = className;
+        $[6] = t1;
+    } else t1 = $[6];
+    const t2 = testId && `${testId}--chat`;
+    let t3;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = /*#__PURE__*/ jsx(ChatHeaderTitle, {
+            children: /*#__PURE__*/ jsx(Skeleton, {
+                width: "96px",
+                height: "16px"
+            })
+        });
+        $[7] = t3;
+    } else t3 = $[7];
+    let t4;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+        t4 = /*#__PURE__*/ jsxs(ChatHeader, {
+            children: [
+                t3,
+                /*#__PURE__*/ jsxs(ChatHeaderActions, {
+                    children: [
+                        /*#__PURE__*/ jsx(Skeleton, {
+                            width: "28px",
+                            height: "28px"
+                        }),
+                        /*#__PURE__*/ jsx(Skeleton, {
+                            width: "28px",
+                            height: "28px"
+                        }),
+                        /*#__PURE__*/ jsx(Skeleton, {
+                            width: "28px",
+                            height: "28px"
+                        })
+                    ]
+                })
+            ]
+        });
+        $[8] = t4;
+    } else t4 = $[8];
+    let t5;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = /*#__PURE__*/ jsxs("div", {
+            className: "flex w-full flex-col items-center gap-12",
+            children: [
+                /*#__PURE__*/ jsx(Skeleton, {
+                    width: "64px",
+                    height: "64px",
+                    rounded: "full"
+                }),
+                /*#__PURE__*/ jsx(Skeleton, {
+                    className: "max-w-[90%]",
+                    width: "280px",
+                    height: "24px"
+                })
+            ]
+        });
+        $[9] = t5;
+    } else t5 = $[9];
+    let t6;
+    if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+        t6 = /*#__PURE__*/ jsx(ChatBody, {
+            children: /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col items-center gap-24 pt-103",
+                children: [
+                    t5,
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex w-full flex-col items-center gap-12",
+                        children: [
+                            /*#__PURE__*/ jsx(Skeleton, {
+                                className: "max-w-[85%]",
+                                width: "240px",
+                                height: "28px",
+                                rounded: 12
+                            }),
+                            /*#__PURE__*/ jsx(Skeleton, {
+                                className: "max-w-[95%]",
+                                width: "280px",
+                                height: "28px",
+                                rounded: 12
+                            }),
+                            /*#__PURE__*/ jsx(Skeleton, {
+                                className: "max-w-[80%]",
+                                width: "220px",
+                                height: "28px",
+                                rounded: 12
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+        $[10] = t6;
+    } else t6 = $[10];
+    let t7;
+    if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+        t7 = /*#__PURE__*/ jsx(Skeleton, {
+            width: "100%",
+            height: "92px",
+            rounded: 16
+        });
+        $[11] = t7;
+    } else t7 = $[11];
+    let t8;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+        t8 = /*#__PURE__*/ jsxs(ChatFooter, {
+            children: [
+                t7,
+                /*#__PURE__*/ jsx("div", {
+                    className: "flex justify-center pb-8",
+                    children: /*#__PURE__*/ jsx(Skeleton, {
+                        className: "max-w-[90%]",
+                        width: "240px",
+                        height: "12px"
+                    })
+                })
+            ]
+        });
+        $[12] = t8;
+    } else t8 = $[12];
+    let t9;
+    if ($[13] !== t2) {
+        t9 = /*#__PURE__*/ jsxs(Chat, {
+            background: "strong",
+            "aria-hidden": "true",
+            "data-testid": t2,
+            className: "[&_*]:animate-none! [&_[data-slot=skeleton]]:bg-bg-primary",
+            children: [
+                t4,
+                t6,
+                t8
+            ]
+        });
+        $[13] = t2;
+        $[14] = t9;
+    } else t9 = $[14];
+    let t10;
+    if ($[15] !== props || $[16] !== ref || $[17] !== t1 || $[18] !== t9 || $[19] !== testId) {
+        t10 = /*#__PURE__*/ jsx("div", {
+            role: "status",
+            "aria-label": "Loading Wally",
+            "aria-busy": "true",
+            ...props,
+            ref: ref,
+            "data-slot": "wally-skeleton",
+            "data-testid": testId,
+            className: t1,
+            children: t9
+        });
+        $[15] = props;
+        $[16] = ref;
+        $[17] = t1;
+        $[18] = t9;
+        $[19] = testId;
+        $[20] = t10;
+    } else t10 = $[20];
+    return t10;
+};
+WallySkeleton.displayName = "WallySkeleton";
+export { WallySkeleton };

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

@@ -0,0 +1 @@
+export { WallySkeleton, type WallySkeletonProps } from './WallySkeleton.js';

package/dist/components/WallySkeleton/index.js

@@ -0,0 +1 @@
+export { WallySkeleton } from "./WallySkeleton.js";

package/dist/index.d.ts

@@ -113,4 +113,5 @@ export { UserMessage, UserMessageBubble, type UserMessageBubbleProps, type UserM
 export { UtilityPage, type UtilityPageProps } from './components/UtilityPage/index.js';
 export { ApprovalCardView, type ApprovalCardViewProps, ChainOfThoughtView, type ChainOfThoughtViewProps, type ChatApprovalOption, type ChatApprovalOptionKind, type ChatApprovalPart, type ChatApprovalResponse, type ChatApprovalStatus, type ChatAssistantMessage, type ChatAssistantPart, type ChatChainOfThoughtPart, type ChatContextItem, type ChatCustomPart, type ChatErrorPart, type ChatFeedback, type ChatIconKey, type ChatId, type ChatLabels, type ChatMarkdownProps, type ChatMessage, type ChatMessageActionNodes, ChatMessageView, type ChatMessageViewProps, type ChatMeta, type ChatOpen, type ChatPart, type ChatPartRenderContext, ChatPartView, type ChatPartViewProps, type ChatSnapshot, type ChatStatus, type ChatStep, type ChatStepKind, type ChatStepRenderContext, type ChatStepStatus, type ChatSuggestionItem, type ChatTextPart, type ChatToolPermission, type ChatUserMessage, type ChatUserPart, type ChatViewConfig, ChatViewProvider, type ChatViewProviderProps, type ChatViewState, copyTextOf, DEFAULT_CHAT_LABELS, deriveChatState, WallyAssistant, type WallyAssistantProps, } from './components/WallyAssistant/index.js';
 export { WallyIcon, type WallyIconProps, type WallyIconSize, type WallyIconStyle, } from './components/WallyIcon/index.js';
+export { WallySkeleton, type WallySkeletonProps } from './components/WallySkeleton/index.js';
 export { type TestableProps, TestIdProvider, useTestId } from './utils/testId.js';

package/dist/index.js

@@ -102,4 +102,5 @@ export { UserMessage, UserMessageBubble, UserMessageShowMore } from "./component
 export { UtilityPage } from "./components/UtilityPage/index.js";
 export { ApprovalCardView, ChainOfThoughtView, ChatMessageView, ChatPartView, ChatViewProvider, DEFAULT_CHAT_LABELS, WallyAssistant, copyTextOf, deriveChatState } from "./components/WallyAssistant/index.js";
 export { WallyIcon } from "./components/WallyIcon/index.js";
+export { WallySkeleton } from "./components/WallySkeleton/index.js";
 export { TestIdProvider, useTestId } from "./utils/testId.js";

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "4.3.3",
-  "generatedAt": "2026-10-29T07:02:33.247Z",
+  "version": "4.3.4",
+  "generatedAt": "2026-10-30T11:34:31.521Z",
   "components": [
     {
       "name": "Accordion",
@@ -35770,14 +35770,14 @@
           "code": "import { loadShikiAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';\n\nexport const JSONWithShiki = () => (\n  <CodeSnippetAdapterProvider adapter={loadShikiAdapter}>\n    <CodeSnippetRoot code={jsonCode} language='json'>\n      <CodeSnippetContent>\n        <CodeSnippetLineNumbers />\n        <CodeSnippetCode />\n      </CodeSnippetContent>\n    </CodeSnippetRoot>\n  </CodeSnippetAdapterProvider>\n);",
           "storyFile": "CodeSnippet/CodeSnippet.stories.tsx",
           "storyTitle": "Data Display/CodeSnippet/CodeSnippet",
-          "description": "Shiki, supplied through `CodeSnippetAdapterProvider` — VS Code's own grammars, and the\nheaviest of the three adapters at roughly 200KB plus WASM."
+          "description": "Shiki, supplied through `CodeSnippetAdapterProvider`, uses VS Code-style grammars.\nThe adapter lazily initializes its supported languages and github-light theme with\nthe Oniguruma WASM engine on the first highlight call."
         },
         {
           "name": "TypescriptWithPrism",
           "code": "import { loadPrismAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';\n\nexport const TypescriptWithPrism = () => (\n  <CodeSnippetAdapterProvider adapter={loadPrismAdapter}>\n    <CodeSnippetRoot code={typescriptCode} language='typescript'>\n      <CodeSnippetContent>\n        <CodeSnippetLineNumbers />\n        <CodeSnippetCode />\n      </CodeSnippetContent>\n    </CodeSnippetRoot>\n  </CodeSnippetAdapterProvider>\n);",
           "storyFile": "CodeSnippet/CodeSnippet.stories.tsx",
           "storyTitle": "Data Display/CodeSnippet/CodeSnippet",
-          "description": "Prism, at roughly 15KB, is the one to reach for unless something forces otherwise;\nthis is TypeScript under it."
+          "description": "TypeScript highlighted with Prism. Its loader emits only the Prism adapter's\ndependencies; unused Shiki and highlight.js loaders are discarded by the consumer."
         },
         {
           "name": "BashWithPrism",
@@ -35791,7 +35791,7 @@
           "code": "import { loadHighlightJsAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';\n\nexport const HTMLWithHighlightJs = () => (\n  <CodeSnippetAdapterProvider adapter={loadHighlightJsAdapter}>\n    <CodeSnippetRoot code={htmlCode} language='html'>\n      <CodeSnippetContent>\n        <CodeSnippetLineNumbers />\n        <CodeSnippetCode />\n      </CodeSnippetContent>\n    </CodeSnippetRoot>\n  </CodeSnippetAdapterProvider>\n);",
           "storyFile": "CodeSnippet/CodeSnippet.stories.tsx",
           "storyTitle": "Data Display/CodeSnippet/CodeSnippet",
-          "description": "highlight.js sits between the other two at roughly 30KB, with the longest language list\nof the three."
+          "description": "HTML highlighted with highlight.js. The adapter loads the library lazily and\nexposes the languages listed by its getSupportedLanguages() method."
         },
         {
           "name": "HTTPRequestWithPrism",
@@ -138009,6 +138009,311 @@
           "description": "`xs` to `xl` in both variants. Worth reading down the columns to see where the detail in the bare mark gives out and the badge stops helping."
         }
       ]
+    },
+    {
+      "name": "WallySkeleton",
+      "description": "Shared loading surface for the host, remote and assistant runtime. Give its parent a height.\nThe placeholders and mesh stay static so replacing one loading stage with another cannot\nrestart an animation and flash. This non-interactive surface exposes one loading status.",
+      "importPath": "@wallarm-org/design-system/WallySkeleton",
+      "props": [
+        {
+          "name": "slot",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "title",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "defaultChecked",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | number | readonly string[] | undefined",
+          "required": false
+        },
+        {
+          "name": "suppressContentEditableWarning",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "suppressHydrationWarning",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "accessKey",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoCapitalize",
+          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+          "required": false
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "contentEditable",
+          "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+          "required": false
+        },
+        {
+          "name": "contextMenu",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "dir",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "draggable",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "enterKeyHint",
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "required": false
+        },
+        {
+          "name": "hidden",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "id",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "lang",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "nonce",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "spellCheck",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "tabIndex",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "translate",
+          "type": "\"yes\" | \"no\" | undefined",
+          "required": false
+        },
+        {
+          "name": "radioGroup",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "role",
+          "type": "AriaRole | undefined",
+          "required": false
+        },
+        {
+          "name": "about",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "content",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "datatype",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "inlist",
+          "type": "any",
+          "required": false
+        },
+        {
+          "name": "prefix",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "property",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "rel",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "resource",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "rev",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "typeof",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "vocab",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoCorrect",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoSave",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "color",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemProp",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemScope",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "itemType",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemID",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemRef",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "results",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "security",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "unselectable",
+          "type": "\"off\" | \"on\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popover",
+          "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popoverTargetAction",
+          "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popoverTarget",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "inert",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
+        },
+        {
+          "name": "inputMode",
+          "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+          "required": false,
+          "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+        },
+        {
+          "name": "is",
+          "type": "string | undefined",
+          "required": false,
+          "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+        },
+        {
+          "name": "exportparts",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+        },
+        {
+          "name": "part",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+        },
+        {
+          "name": "data-testid",
+          "type": "string | undefined",
+          "required": false
+        }
+      ],
+      "variants": [],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Default",
+          "code": "import { WallySkeleton } from '@wallarm-org/design-system/WallySkeleton';\n\nexport const Default = () => (\n  <div className='h-640 w-480 max-w-full'>\n    <WallySkeleton data-testid='wally-loading' />\n  </div>\n);",
+          "storyFile": "WallySkeleton/WallySkeleton.stories.tsx",
+          "storyTitle": "AI/WallySkeleton"
+        },
+        {
+          "name": "Narrow",
+          "code": "import { WallySkeleton } from '@wallarm-org/design-system/WallySkeleton';\n\nexport const Narrow = () => (\n  <div className='h-640 w-320 max-w-full'>\n    <WallySkeleton data-testid='wally-loading' />\n  </div>\n);",
+          "storyFile": "WallySkeleton/WallySkeleton.stories.tsx",
+          "storyTitle": "AI/WallySkeleton"
+        },
+        {
+          "name": "Handoff",
+          "code": "import { useState } from 'react';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { WallySkeleton } from '@wallarm-org/design-system/WallySkeleton';\n\nexport const Handoff = () => {\n  const [stage, setStage] = useState(0);\n\n  return (\n    <div className='flex flex-col gap-12'>\n      <Button data-testid='next-stage' onClick={() => setStage(current => current + 1)}>\n        Continue loading\n      </Button>\n      <div className='h-640 w-480 max-w-full'>\n        <WallySkeleton key={stage} data-testid='wally-loading' />\n      </div>\n    </div>\n  );\n};",
+          "storyFile": "WallySkeleton/WallySkeleton.stories.tsx",
+          "storyTitle": "AI/WallySkeleton",
+          "description": "Continue loading remounts the skeleton, like replacing the host fallback with the remote’s own loading state. Its geometry, colors and background stay identical."
+        }
+      ]
     }
   ],
   "tokens": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "4.4.0-rc-feat-claude-design.1",
+  "version": "4.4.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",
@@ -70,10 +70,11 @@
     "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 && tsc -p tsconfig.claude-design.json --noEmit",
+    "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",
     "test": "rstest watch",
     "test:coverage": "rstest run --coverage",
     "test:run": "rstest run",
+    "test:bundles": "tsx scripts/check-code-snippet-bundles.ts",
     "storybook": "storybook dev --no-open -p 6006",
     "build-storybook": "storybook build",
     "e2e": "playwright test",
@@ -85,11 +86,7 @@
     "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",
-    "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"
+    "code-connect:publish": "node --env-file-if-exists=../../.env.local node_modules/@figma/code-connect/bin/figma connect publish --exit-on-unreadable-files"
   },
   "devDependencies": {
     "@babel/core": "7.29.7",
@@ -111,7 +108,6 @@
     "@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",
@@ -125,15 +121,11 @@
     "@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:",

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

@@ -1,3 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

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