@wallarm-org/design-system 0.23.2 → 0.23.3

package/dist/components/CodeSnippet/CodeSnippetCode.js

@@ -2,19 +2,48 @@ import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../utils/testId.js";
 import { useCodeSnippet } from "./hooks/index.js";
 import { CodeContent, CodeLine, TokenizedCodeLine } from "./internal/index.js";
-import { FoldSummaryLine } from "./internal/FoldSummaryLine.js";
+import { getFoldSummaryLabel } from "./lib/foldUtils.js";
 import { SIZE_LINE_HEIGHT_CLASSES } from "./lib/lineStyles.js";
 import { splitTextByRanges } from "./lib/lineUtils.js";
 const CodeSnippetCode = ({ className, ...props })=>{
     const testId = useTestId('code');
-    const { code, tokens, isLoading, wrapLines, lines, size, inlineGutter, showLineNumbers, visibleDisplayItems, toggleFold } = useCodeSnippet();
+    const { code, tokens, isLoading, wrapLines, lines, size, inlineGutter, showLineNumbers, visibleDisplayItems, folds, foldByStartLine, collapsedFolds, toggleFold } = useCodeSnippet();
     const lineHeightClass = SIZE_LINE_HEIGHT_CLASSES[size];
-    const renderFoldSummary = (item)=>/*#__PURE__*/ jsx(FoldSummaryLine, {
-            fold: item.fold,
-            lineCount: item.lineCount,
+    const hasFolds = folds.length > 0;
+    const getFoldProps = (lineNumber)=>{
+        if (!inlineGutter || !hasFolds) return {};
+        const fold = foldByStartLine.get(lineNumber);
+        return {
+            fold,
+            isFoldCollapsed: fold ? collapsedFolds.has(fold.id) : void 0,
+            onFoldToggle: fold ? ()=>toggleFold(fold.id) : void 0,
+            hasFolds: true
+        };
+    };
+    const renderFoldSummary = (item)=>{
+        const label = getFoldSummaryLabel(item.fold, item.lineCount);
+        return /*#__PURE__*/ jsx(CodeLine, {
+            lineConfig: void 0,
             lineHeightClass: lineHeightClass,
-            onToggle: ()=>toggleFold(item.fold.id)
+            showInlineGutter: inlineGutter,
+            lineNumber: showLineNumbers ? item.fold.startLine : void 0,
+            fold: inlineGutter ? item.fold : void 0,
+            isFoldCollapsed: inlineGutter || void 0,
+            onFoldToggle: inlineGutter ? ()=>toggleFold(item.fold.id) : void 0,
+            hasFolds: inlineGutter && hasFolds,
+            children: /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: "inline-flex items-center cursor-pointer select-none",
+                "aria-expanded": false,
+                "aria-label": `Collapsed region: ${label}, ${item.lineCount} lines`,
+                onClick: ()=>toggleFold(item.fold.id),
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "inline-flex items-center rounded-2 border border-border-secondary px-6 text-xs leading-sm text-text-secondary hover:text-text-primary transition-colors",
+                    children: label
+                })
+            })
         }, `fold-${item.fold.id}`);
+    };
     if (isLoading || !tokens) {
         const codeLines = code.split('\n');
         return /*#__PURE__*/ jsx(CodeContent, {
@@ -33,6 +62,7 @@ const CodeSnippetCode = ({ className, ...props })=>{
                     lineHeightClass: lineHeightClass,
                     showInlineGutter: inlineGutter,
                     lineNumber: showLineNumbers ? item.lineNumber : void 0,
+                    ...getFoldProps(item.lineNumber),
                     children: hasRanges ? splitTextByRanges(line, ranges, lineConfig?.color).map((segment, i)=>/*#__PURE__*/ jsx("span", {
                             className: segment.rangeColor,
                             children: segment.content
@@ -55,7 +85,8 @@ const CodeSnippetCode = ({ className, ...props })=>{
                 lineConfig: lines.get(item.lineNumber),
                 lineHeightClass: lineHeightClass,
                 showInlineGutter: inlineGutter,
-                lineNumber: showLineNumbers ? item.lineNumber : void 0
+                lineNumber: showLineNumbers ? item.lineNumber : void 0,
+                ...getFoldProps(item.lineNumber)
             }, item.lineNumber);
         })
     });

package/dist/components/CodeSnippet/CodeSnippetContent.js

@@ -75,7 +75,7 @@ const CodeSnippetContent = ({ className, children, nativeScroll = false, ...prop
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "code-snippet-content",
         "data-testid": testId,
-        className: cn('min-h-0 [&_[data-part=viewport]]:overscroll-none', className),
+        className: cn('min-h-0', '[&_[data-part=viewport]]:overscroll-none', '[&_[data-part=viewport]:not([data-overflow-x]):not([data-overflow-y])]:!overflow-clip', className),
         ...props,
         children: /*#__PURE__*/ jsxs(ScrollArea, {
             children: [

package/dist/components/CodeSnippet/CodeSnippetContext.d.ts

@@ -45,6 +45,8 @@ export type CodeSnippetContextValue<TLanguage extends string = string> = {
     /** Display items clipped to maxLines. All rendering components should iterate this. */
     visibleDisplayItems: DisplayItem[];
     folds: FoldRegion[];
+    /** Fold regions indexed by their start line for O(1) lookup */
+    foldByStartLine: Map<number, FoldRegion>;
     collapsedFolds: Set<string>;
     toggleFold: (foldId: string) => void;
     isExpanded: boolean;

package/dist/components/CodeSnippet/CodeSnippetCopyButton.js

@@ -8,14 +8,13 @@ import { useCodeSnippet } from "./hooks/index.js";
 const CodeSnippetCopyButton = ({ onClick, ref, ...props })=>{
     const testId = useTestId('copy-button');
     const { code } = useCodeSnippet();
-    const { isSupported, copied, tooltipOpen, onTooltipOpenChange, handleCopy } = useCopyTooltip({
+    const { copied, tooltipOpen, onTooltipOpenChange, handleCopy } = useCopyTooltip({
         text: code
     });
     const handleClick = (event)=>{
         handleCopy(event);
         onClick?.(event);
     };
-    if (!isSupported) return null;
     return /*#__PURE__*/ jsxs(Tooltip, {
         open: tooltipOpen,
         onOpenChange: onTooltipOpenChange,

package/dist/components/CodeSnippet/CodeSnippetRoot.js

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
+import { copyText } from "../../utils/copyText.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { plainAdapter } from "./adapters/plain.js";
 import { CodeSnippetContext, MIN_HIDDEN_LINES_THRESHOLD } from "./CodeSnippetContext.js";
@@ -74,7 +75,7 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_L
         isFullscreen
     ]);
     const copyToClipboard = useCallback(async ()=>{
-        await navigator.clipboard.writeText(code);
+        await copyText(code);
         onCopy?.(code);
     }, [
         code,
@@ -88,7 +89,7 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_L
     ]);
     const computeCollapsedFolds = useCallback((folds)=>{
         if (!folds) return new Set();
-        return new Set(folds.filter((f)=>false !== f.defaultCollapsed).map((f)=>f.id));
+        return new Set(folds.filter((f)=>true === f.defaultCollapsed).map((f)=>f.id));
     }, []);
     const [collapsedFolds, setCollapsedFolds] = useState(()=>computeCollapsedFolds(foldsProp));
     useEffect(()=>{
@@ -105,6 +106,12 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_L
             return next;
         });
     }, []);
+    const foldByStartLine = useMemo(()=>new Map(validatedFolds.map((f)=>[
+                f.startLine,
+                f
+            ])), [
+        validatedFolds
+    ]);
     const displayItems = useMemo(()=>buildDisplayItems(totalLines, validatedFolds, collapsedFolds, startingLineNumber), [
         totalLines,
         validatedFolds,
@@ -138,6 +145,7 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_L
             displayItems,
             visibleDisplayItems,
             folds: validatedFolds,
+            foldByStartLine,
             collapsedFolds,
             toggleFold,
             isExpanded,
@@ -161,6 +169,7 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_L
         displayItems,
         visibleDisplayItems,
         validatedFolds,
+        foldByStartLine,
         collapsedFolds,
         toggleFold,
         isExpanded,

package/dist/components/CodeSnippet/InlineCodeSnippet.js

@@ -20,12 +20,11 @@ const inlineCodeSnippetVariants = cva("inline-flex items-center code-snippet-bg
 });
 const InlineCodeSnippet = (props)=>{
     const { code, size = 'inherit', asChild = false, copyable = true, className, onClick, ref, ...otherProps } = props;
-    const { isSupported, copied, tooltipOpen, onTooltipOpenChange, handleCopy } = useCopyTooltip({
+    const { copied, tooltipOpen, onTooltipOpenChange, handleCopy } = useCopyTooltip({
         text: code,
         enabled: copyable
     });
     const Comp = asChild ? Slot : 'code';
-    const isCopyable = copyable && isSupported;
     const handleClick = (event)=>{
         handleCopy(event);
         onClick?.(event);
@@ -35,13 +34,13 @@ const InlineCodeSnippet = (props)=>{
         "data-slot": "inline-code-snippet",
         className: cn(inlineCodeSnippetVariants({
             size,
-            copyable: isCopyable
+            copyable
         }), className),
         ...otherProps,
         onClick: handleClick,
         children: code
     });
-    if (!isCopyable) return codeElement;
+    if (!copyable) return codeElement;
     return /*#__PURE__*/ jsxs(Tooltip, {
         open: tooltipOpen,
         onOpenChange: onTooltipOpenChange,

package/dist/components/CodeSnippet/internal/CodeLine.d.ts

@@ -1,5 +1,6 @@
 import type { FC, ReactNode } from 'react';
 import type { LineConfig } from '../CodeSnippetContext';
+import type { FoldRegion } from '../lib/foldUtils';
 export type CodeLineProps = {
     lineConfig: LineConfig | undefined;
     lineHeightClass: string;
@@ -7,6 +8,14 @@ export type CodeLineProps = {
     showInlineGutter?: boolean;
     /** Line number to display (only shown when showInlineGutter is true) */
     lineNumber?: number;
+    /** Fold region starting at this line (only shown when showInlineGutter is true) */
+    fold?: FoldRegion;
+    /** Whether the fold is collapsed */
+    isFoldCollapsed?: boolean;
+    /** Callback to toggle the fold */
+    onFoldToggle?: () => void;
+    /** Whether any folds exist (used to render consistent-width spacer) */
+    hasFolds?: boolean;
     children: ReactNode;
 };
 /** Renders a single line of code with styling */

package/dist/components/CodeSnippet/internal/CodeLine.js

@@ -2,7 +2,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
 import { LINE_COLOR_STYLES } from "../lib/lineStyles.js";
 import { getLineTextStyles } from "../lib/lineUtils.js";
-const CodeLine = ({ lineConfig, lineHeightClass, showInlineGutter = false, lineNumber, children })=>{
+import { FoldToggle } from "./FoldToggle.js";
+const CodeLine = ({ lineConfig, lineHeightClass, showInlineGutter = false, lineNumber, fold, isFoldCollapsed, onFoldToggle, hasFolds = false, children })=>{
     const { colorClass, textStyleClass, className: lineClassName, style } = getLineTextStyles(lineConfig);
     const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
     return /*#__PURE__*/ jsxs("div", {
@@ -12,12 +13,22 @@ const CodeLine = ({ lineConfig, lineHeightClass, showInlineGutter = false, lineN
             showInlineGutter && /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsx("span", {
-                        className: cn('shrink-0 self-stretch border-l-2 pl-12', colorStyles?.border ?? 'border-transparent')
+                        className: cn('shrink-0 self-stretch border-l-2', !hasFolds && 'pl-12', colorStyles?.border ?? 'border-transparent')
                     }),
                     void 0 !== lineNumber && /*#__PURE__*/ jsx("span", {
                         className: cn('shrink-0 select-none text-right text-text-secondary px-8', colorStyles?.text),
                         children: lineNumber
                     }),
+                    hasFolds && /*#__PURE__*/ jsx("span", {
+                        className: "shrink-0 flex items-center justify-center px-4",
+                        children: fold && onFoldToggle ? /*#__PURE__*/ jsx(FoldToggle, {
+                            fold: fold,
+                            isCollapsed: isFoldCollapsed ?? false,
+                            onToggle: onFoldToggle
+                        }) : /*#__PURE__*/ jsx("span", {
+                            className: "w-16 h-16"
+                        })
+                    }),
                     lineConfig?.prefix !== void 0 && /*#__PURE__*/ jsx("span", {
                         className: cn('shrink-0 select-none px-8 text-center', colorStyles?.text),
                         children: lineConfig.prefix

package/dist/components/CodeSnippet/internal/FoldColumn.js

@@ -1,18 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
 import { cn } from "../../../utils/cn.js";
 import { useCodeSnippet } from "../hooks/index.js";
 import { LINE_COLOR_STYLES, SIZE_LINE_HEIGHT_CLASSES } from "../lib/lineStyles.js";
 import { FoldToggle } from "./FoldToggle.js";
 const FoldColumn = ()=>{
-    const { visibleDisplayItems, folds, collapsedFolds, toggleFold, size, lines } = useCodeSnippet();
+    const { visibleDisplayItems, foldByStartLine, collapsedFolds, toggleFold, size, lines } = useCodeSnippet();
     const lineHeightClass = SIZE_LINE_HEIGHT_CLASSES[size];
-    const foldByStartLine = useMemo(()=>new Map(folds.map((f)=>[
-                f.startLine,
-                f
-            ])), [
-        folds
-    ]);
     return /*#__PURE__*/ jsx("div", {
         className: "flex flex-col select-none",
         "data-slot": "code-snippet-fold",

package/dist/components/CodeSnippet/internal/TokenizedCodeLine.d.ts

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import type { Token } from '../adapters/types';
 import type { LineConfig } from '../CodeSnippetContext';
+import type { FoldRegion } from '../lib/foldUtils';
 export type TokenizedCodeLineProps = {
     tokens: Token[];
     lineConfig: LineConfig | undefined;
@@ -9,6 +10,14 @@ export type TokenizedCodeLineProps = {
     showInlineGutter?: boolean;
     /** Line number to display (only shown when showInlineGutter is true) */
     lineNumber?: number;
+    /** Fold region starting at this line */
+    fold?: FoldRegion;
+    /** Whether the fold is collapsed */
+    isFoldCollapsed?: boolean;
+    /** Callback to toggle the fold */
+    onFoldToggle?: () => void;
+    /** Whether any folds exist */
+    hasFolds?: boolean;
 };
 /** Renders a line of tokenized code with syntax highlighting */
 export declare const TokenizedCodeLine: FC<TokenizedCodeLineProps>;

package/dist/components/CodeSnippet/internal/TokenizedCodeLine.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { getLineTextStyles, splitTokensByRanges } from "../lib/lineUtils.js";
 import { CodeLine } from "./CodeLine.js";
 import { CodeToken } from "./CodeToken.js";
-const TokenizedCodeLine = ({ tokens, lineConfig, lineHeightClass, showInlineGutter, lineNumber })=>{
+const TokenizedCodeLine = ({ tokens, lineConfig, lineHeightClass, showInlineGutter, lineNumber, fold, isFoldCollapsed, onFoldToggle, hasFolds })=>{
     const { colorClass } = getLineTextStyles(lineConfig);
     const ranges = lineConfig?.ranges;
     const hasRanges = ranges && ranges.length > 0;
@@ -13,6 +13,10 @@ const TokenizedCodeLine = ({ tokens, lineConfig, lineHeightClass, showInlineGutt
             lineHeightClass: lineHeightClass,
             showInlineGutter: showInlineGutter,
             lineNumber: lineNumber,
+            fold: fold,
+            isFoldCollapsed: isFoldCollapsed,
+            onFoldToggle: onFoldToggle,
+            hasFolds: hasFolds,
             children: enrichedTokens.map((token, i)=>/*#__PURE__*/ jsx(CodeToken, {
                     token: token,
                     colorClass: colorClass,
@@ -25,6 +29,10 @@ const TokenizedCodeLine = ({ tokens, lineConfig, lineHeightClass, showInlineGutt
         lineHeightClass: lineHeightClass,
         showInlineGutter: showInlineGutter,
         lineNumber: lineNumber,
+        fold: fold,
+        isFoldCollapsed: isFoldCollapsed,
+        onFoldToggle: onFoldToggle,
+        hasFolds: hasFolds,
         children: tokens.map((token, i)=>/*#__PURE__*/ jsx(CodeToken, {
                 token: token,
                 colorClass: colorClass

package/dist/components/CodeSnippet/lib/foldUtils.d.ts

@@ -7,7 +7,7 @@ export type FoldRegion = {
     endLine: number;
     /** Optional label for the collapsed summary. When omitted, auto-generated from line count. */
     label?: string;
-    /** Whether the fold starts collapsed. Default: true */
+    /** Whether the fold starts collapsed. Default: false */
     defaultCollapsed?: boolean;
 };
 export type DisplayItem = {

package/dist/hooks/useCopyTooltip.d.ts

@@ -3,7 +3,6 @@ interface UseCopyTooltipOptions {
     enabled?: boolean;
 }
 interface UseCopyTooltipReturn {
-    isSupported: boolean;
     copied: boolean;
     tooltipOpen: boolean;
     onTooltipOpenChange: (open: boolean) => void;

package/dist/hooks/useCopyTooltip.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-const isClipboardSupported = "u" > typeof navigator && void 0 !== navigator.clipboard && 'function' == typeof navigator.clipboard.writeText;
+import { copyText } from "../utils/copyText.js";
 function useCopyTooltip({ text, enabled = true }) {
     const [hovering, setHovering] = useState(false);
     const [copied, setCopied] = useState(false);
@@ -17,8 +17,8 @@ function useCopyTooltip({ text, enabled = true }) {
     ]);
     const handleCopy = useCallback((event)=>{
         event.stopPropagation();
-        if (!enabled || !isClipboardSupported) return;
-        navigator.clipboard.writeText(text);
+        if (!enabled) return;
+        copyText(text);
         setCopied(true);
         setKeepOpen(true);
         clearTimer();
@@ -55,7 +55,6 @@ function useCopyTooltip({ text, enabled = true }) {
         clearTimer
     ]);
     return {
-        isSupported: isClipboardSupported,
         copied,
         tooltipOpen,
         onTooltipOpenChange,

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.23.1",
-  "generatedAt": "2026-04-13T08:49:49.893Z",
+  "version": "0.23.2",
+  "generatedAt": "2026-04-13T13:36:55.041Z",
   "components": [
     {
       "name": "Alert",
@@ -12516,8 +12516,8 @@
         },
         {
           "name": "LineWrapping",
-          "code": "() => {\n  const longCode = `const veryLongVariableName = \"This is a very long string that will demonstrate line wrapping behavior when the content exceeds the container width\";\nconsole.log(veryLongVariableName);`;\n\n  return (\n    <VStack gap={16}>\n      <VStack align='start' gap={4}>\n        <span className='text-xs text-text-secondary font-medium'>Without wrapping</span>\n        <div style={{ maxWidth: '600px' }}>\n          <CodeSnippetRoot code={longCode} language='text'>\n            <CodeSnippetContent>\n              <CodeSnippetLineNumbers />\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </div>\n      </VStack>\n\n      <VStack align='start' gap={4}>\n        <span className='text-xs text-text-secondary font-medium'>With wrapping</span>\n        <div style={{ maxWidth: '600px' }}>\n          <CodeSnippetRoot code={longCode} language='text' wrapLines>\n            <CodeSnippetContent>\n              <CodeSnippetLineNumbers />\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </div>\n      </VStack>\n      <VStack align='start' gap={4}>\n        <span className='text-xs text-text-secondary font-medium'>\n          Without wrapping with annotations\n        </span>\n        <div style={{ maxWidth: '600px' }}>\n          <CodeSnippetRoot\n            code={longCode}\n            language='text'\n            lines={{\n              1: { color: 'danger', prefix: '-' },\n              2: { color: 'success', prefix: '+' },\n            }}\n          >\n            <CodeSnippetContent>\n              <CodeSnippetLineNumbers />\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </div>\n      </VStack>\n      <VStack align='start' gap={4}>\n        <span className='text-xs text-text-secondary font-medium'>Wrapping with annotations</span>\n        <div style={{ maxWidth: '600px' }}>\n          <CodeSnippetRoot\n            code={longCode}\n            language='text'\n            wrapLines\n            lines={{\n              1: { color: 'danger', prefix: '-' },\n              2: { color: 'success', prefix: '+' },\n            }}\n          >\n            <CodeSnippetContent>\n              <CodeSnippetLineNumbers />\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </div>\n      </VStack>\n    </VStack>\n  );\n}",
-          "description": "Line wrapping enabled for long lines."
+          "code": "() => {\n  const longCode = `const veryLongVariableName = \"This is a very long string that will demonstrate line wrapping behavior when the content exceeds the container width\";\nconsole.log(veryLongVariableName);`;\n\n  const httpCode = `GET /api/v2/users?page=1&limit=20&filter=active&sort=name&order=asc&include=profile,settings HTTP/1.1\nHost: api.wallarm.com\nAuthorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0\nContent-Type: application/json\nAccept: application/json\n\n{\n  \"filter\": { \"status\": \"active\", \"role\": \"admin\" }\n}`;\n\n  return (\n    <VStack gap={16}>\n      <VStack align='start' gap={4}>\n        <span className='text-xs text-text-secondary font-medium'>Without wrapping</span>\n        <div style={{ maxWidth: '600px' }}>\n          <CodeSnippetRoot code={longCode} language='text'>\n            <CodeSnippetContent>\n              <CodeSnippetLineNumbers />\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </div>\n      </VStack>\n\n      <VStack align='start' gap={4}>\n        <span className='text-xs text-text-secondary font-medium'>With wrapping</span>\n        <div style={{ maxWidth: '600px' }}>\n          <CodeSnippetRoot code={longCode} language='text' wrapLines>\n            <CodeSnippetContent>\n              <CodeSnippetLineNumbers />\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </div>\n      </VStack>\n      <VStack align='start' gap={4}>\n        <span className='text-xs text-text-secondary font-medium'>\n          Without wrapping with annotations\n        </span>\n        <div style={{ maxWidth: '600px' }}>\n          <CodeSnippetRoot\n            code={longCode}\n            language='text'\n            lines={{\n              1: { color: 'danger', prefix: '-' },\n              2: { color: 'success', prefix: '+' },\n            }}\n          >\n            <CodeSnippetContent>\n              <CodeSnippetLineNumbers />\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </div>\n      </VStack>\n      <VStack align='start' gap={4}>\n        <span className='text-xs text-text-secondary font-medium'>Wrapping with annotations</span>\n        <div style={{ maxWidth: '600px' }}>\n          <CodeSnippetRoot\n            code={longCode}\n            language='text'\n            wrapLines\n            lines={{\n              1: { color: 'danger', prefix: '-' },\n              2: { color: 'success', prefix: '+' },\n            }}\n          >\n            <CodeSnippetContent>\n              <CodeSnippetLineNumbers />\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </div>\n      </VStack>\n      <VStack align='start' gap={4}>\n        <span className='text-xs text-text-secondary font-medium'>Folds without wrapping</span>\n        <div style={{ maxWidth: '600px' }}>\n          <CodeSnippetRoot\n            code={httpCode}\n            language='text'\n            folds={getHttpFolds(httpCode, { headers: { defaultCollapsed: true } })}\n          >\n            <CodeSnippetContent>\n              <CodeSnippetLineNumbers />\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </div>\n      </VStack>\n      <VStack align='start' gap={4}>\n        <span className='text-xs text-text-secondary font-medium'>Folds with wrapping</span>\n        <div style={{ maxWidth: '600px' }}>\n          <CodeSnippetRoot\n            code={httpCode}\n            language='text'\n            wrapLines\n            folds={getHttpFolds(httpCode, { headers: { defaultCollapsed: true } })}\n          >\n            <CodeSnippetContent>\n              <CodeSnippetLineNumbers />\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </div>\n      </VStack>\n    </VStack>\n  );\n}",
+          "description": "Line wrapping enabled for long lines.\nIncludes examples with annotations and folds in wrap mode."
         },
         {
           "name": "WithBothScrolls",
@@ -12591,7 +12591,7 @@
         },
         {
           "name": "WithFoldingExpanded",
-          "code": "() => (\n  <CodeSnippetRoot\n    code={foldableRequestCode}\n    language='text'\n    folds={getHttpFolds(foldableRequestCode, {\n      headers: { defaultCollapsed: false },\n      body: { defaultCollapsed: false },\n    })}\n    lines={{\n      3: { color: 'warning' },\n      4: { color: 'danger', ranges: [{ start: 14, end: 42, color: 'danger' }] },\n      10: { color: 'info' },\n      11: { color: 'info' },\n    }}\n  >\n    <CodeSnippetContent>\n      <CodeSnippetLineNumbers />\n      <CodeSnippetCode />\n    </CodeSnippetContent>\n  </CodeSnippetRoot>\n)",
+          "code": "() => (\n  <CodeSnippetRoot\n    code={foldableRequestCode}\n    language='text'\n    folds={getHttpFolds(foldableRequestCode)}\n    lines={{\n      3: { color: 'warning' },\n      4: { color: 'danger', ranges: [{ start: 14, end: 42, color: 'danger' }] },\n      10: { color: 'info' },\n      11: { color: 'info' },\n    }}\n  >\n    <CodeSnippetContent>\n      <CodeSnippetLineNumbers />\n      <CodeSnippetCode />\n    </CodeSnippetContent>\n  </CodeSnippetRoot>\n)",
           "description": "Folds combined with line highlights — colors and decorations\non folded lines are hidden when collapsed, visible when expanded."
         },
         {

package/dist/utils/copyText.d.ts

@@ -0,0 +1,2 @@
+/** Copy text to clipboard using the Clipboard API with execCommand fallback. */
+export declare function copyText(text: string): Promise<void>;

package/dist/utils/copyText.js

@@ -0,0 +1,27 @@
+const isClipboardApiSupported = "u" > typeof navigator && void 0 !== navigator.clipboard && 'function' == typeof navigator.clipboard.writeText;
+function fallbackCopy(text) {
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.style.position = 'fixed';
+    textarea.style.left = '-9999px';
+    textarea.setAttribute('aria-hidden', 'true');
+    textarea.tabIndex = -1;
+    textarea.readOnly = true;
+    document.body.appendChild(textarea);
+    textarea.select();
+    try {
+        return document.execCommand('copy');
+    } catch  {
+        return false;
+    } finally{
+        document.body.removeChild(textarea);
+    }
+}
+async function copyText(text) {
+    if (isClipboardApiSupported) try {
+        await navigator.clipboard.writeText(text);
+        return;
+    } catch  {}
+    fallbackCopy(text);
+}
+export { copyText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.23.2",
+  "version": "0.23.3",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",

package/dist/components/CodeSnippet/internal/FoldSummaryLine.d.ts

@@ -1,8 +0,0 @@
-import type { FC } from 'react';
-import type { FoldRegion } from '../lib/foldUtils';
-export declare const FoldSummaryLine: FC<{
-    fold: FoldRegion;
-    lineCount: number;
-    lineHeightClass: string;
-    onToggle: () => void;
-}>;

package/dist/components/CodeSnippet/internal/FoldSummaryLine.js

@@ -1,20 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { cn } from "../../../utils/cn.js";
-import { getFoldSummaryLabel } from "../lib/foldUtils.js";
-const FoldSummaryLine = ({ fold, lineCount, lineHeightClass, onToggle })=>{
-    const label = getFoldSummaryLabel(fold, lineCount);
-    const ariaLabel = `Collapsed region: ${label}, ${lineCount} lines`;
-    return /*#__PURE__*/ jsx("button", {
-        type: "button",
-        className: cn(lineHeightClass, 'flex w-full items-center gap-4 px-4 text-text-secondary hover:text-text-primary hover:bg-bg-secondary-hover transition-colors cursor-pointer select-none text-left'),
-        "aria-expanded": false,
-        "aria-label": ariaLabel,
-        onClick: onToggle,
-        children: /*#__PURE__*/ jsx("span", {
-            className: "inline-flex items-center rounded-2 border border-border-secondary px-6 text-xs leading-sm",
-            children: label
-        })
-    });
-};
-FoldSummaryLine.displayName = 'FoldSummaryLine';
-export { FoldSummaryLine };