@wallarm-org/design-system 0.22.0 → 0.22.1

package/dist/components/CodeSnippet/CodeSnippetActions.js

@@ -7,7 +7,7 @@ const CodeSnippetActions = ({ className, ref, ...props })=>{
         ref: ref,
         "data-slot": "code-snippet-actions",
         "data-testid": testId,
-        className: cn('flex items-center gap-4 ml-auto px-6 rounded-tr-6', className),
+        className: cn('flex items-center gap-4 ml-auto px-6 rounded-tr-6 code-snippet-bg', className),
         ...props
     });
 };

package/dist/components/CodeSnippet/CodeSnippetCode.js

@@ -1,57 +1,62 @@
 import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../utils/testId.js";
-import { MIN_HIDDEN_LINES_THRESHOLD } from "./CodeSnippetContext.js";
 import { useCodeSnippet } from "./hooks/index.js";
 import { CodeContent, CodeLine, TokenizedCodeLine } from "./internal/index.js";
+import { FoldSummaryLine } from "./internal/FoldSummaryLine.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, startingLineNumber, lines, size, inlineGutter, showLineNumbers, totalLines, maxLines, isExpanded } = useCodeSnippet();
+    const { code, tokens, isLoading, wrapLines, lines, size, inlineGutter, showLineNumbers, visibleDisplayItems, toggleFold } = useCodeSnippet();
     const lineHeightClass = SIZE_LINE_HEIGHT_CLASSES[size];
-    const hiddenLines = totalLines - maxLines;
-    const shouldClip = maxLines > 0 && !isExpanded && hiddenLines >= MIN_HIDDEN_LINES_THRESHOLD;
+    const renderFoldSummary = (item)=>/*#__PURE__*/ jsx(FoldSummaryLine, {
+            fold: item.fold,
+            lineCount: item.lineCount,
+            lineHeightClass: lineHeightClass,
+            onToggle: ()=>toggleFold(item.fold.id)
+        }, `fold-${item.fold.id}`);
     if (isLoading || !tokens) {
         const codeLines = code.split('\n');
-        const visibleLines = shouldClip ? codeLines.slice(0, maxLines) : codeLines;
         return /*#__PURE__*/ jsx(CodeContent, {
             wrapLines: wrapLines,
             className: className,
             ...props,
             "data-testid": testId,
-            children: visibleLines.map((line, index)=>{
-                const lineNumber = startingLineNumber + index;
-                const lineConfig = lines.get(lineNumber);
+            children: visibleDisplayItems.map((item)=>{
+                if ('fold-summary' === item.type) return renderFoldSummary(item);
+                const line = codeLines[item.index] ?? '';
+                const lineConfig = lines.get(item.lineNumber);
                 const ranges = lineConfig?.ranges;
                 const hasRanges = ranges && ranges.length > 0;
                 return /*#__PURE__*/ jsx(CodeLine, {
                     lineConfig: lineConfig,
                     lineHeightClass: lineHeightClass,
                     showInlineGutter: inlineGutter,
-                    lineNumber: showLineNumbers ? lineNumber : void 0,
+                    lineNumber: showLineNumbers ? item.lineNumber : void 0,
                     children: hasRanges ? splitTextByRanges(line, ranges, lineConfig?.color).map((segment, i)=>/*#__PURE__*/ jsx("span", {
                             className: segment.rangeColor,
                             children: segment.content
                         }, i)) : line
-                }, lineNumber);
+                }, item.lineNumber);
             })
         });
     }
-    const visibleTokens = shouldClip ? tokens.slice(0, maxLines) : tokens;
     return /*#__PURE__*/ jsx(CodeContent, {
         wrapLines: wrapLines,
         className: className,
         ...props,
         "data-testid": testId,
-        children: visibleTokens.map((lineTokens, index)=>{
-            const lineNumber = startingLineNumber + index;
+        children: visibleDisplayItems.map((item)=>{
+            if ('fold-summary' === item.type) return renderFoldSummary(item);
+            const lineTokens = tokens[item.index];
+            if (!lineTokens) return null;
             return /*#__PURE__*/ jsx(TokenizedCodeLine, {
                 tokens: lineTokens,
-                lineConfig: lines.get(lineNumber),
+                lineConfig: lines.get(item.lineNumber),
                 lineHeightClass: lineHeightClass,
                 showInlineGutter: inlineGutter,
-                lineNumber: showLineNumbers ? lineNumber : void 0
-            }, lineNumber);
+                lineNumber: showLineNumbers ? item.lineNumber : void 0
+            }, item.lineNumber);
         })
     });
 };

package/dist/components/CodeSnippet/CodeSnippetContent.js

@@ -7,21 +7,22 @@ import { CodeSnippetContext } from "./CodeSnippetContext.js";
 import { useCodeSnippet } from "./hooks/index.js";
 import { CodeSnippetHighlights } from "./internal/CodeSnippetHighlights.js";
 import { ColorStickColumn } from "./internal/ColorStickColumn.js";
+import { FoldColumn } from "./internal/FoldColumn.js";
 import { PrefixColumn } from "./internal/PrefixColumn.js";
 import { SIZE_LINE_HEIGHT_CLASSES } from "./lib/lineStyles.js";
 const CodeSnippetContent = ({ className, children, nativeScroll = false, ...props })=>{
     const testId = useTestId('content');
     const context = useCodeSnippet();
-    const { wrapLines, lines, totalLines, startingLineNumber, size } = context;
+    const { wrapLines, lines, visibleDisplayItems, folds, size } = context;
+    const hasFolds = folds.length > 0;
     const hasHighlights = Array.from(lines.values()).some((config)=>null != config.color);
     const hasAnyPrefix = Array.from(lines.values()).some((config)=>null != config.prefix);
-    const lineCount = totalLines;
     const lineHeightClass = SIZE_LINE_HEIGHT_CLASSES[size];
     const childrenArray = Children.toArray(children);
     const lineNumbersElement = childrenArray.find((child)=>/*#__PURE__*/ isValidElement(child) && child.type?.displayName === 'CodeSnippetLineNumbers');
     const otherChildren = childrenArray.filter((child)=>!/*#__PURE__*/ isValidElement(child) || child.type?.displayName !== 'CodeSnippetLineNumbers');
     const hasLineNumbers = Boolean(lineNumbersElement);
-    const needsGutterElements = hasHighlights || hasLineNumbers || hasAnyPrefix;
+    const needsGutterElements = hasHighlights || hasLineNumbers || hasAnyPrefix || hasFolds;
     const useInlineGutter = wrapLines && needsGutterElements;
     const hasGutter = !wrapLines && needsGutterElements;
     const overriddenContext = useMemo(()=>({
@@ -39,18 +40,17 @@ const CodeSnippetContent = ({ className, children, nativeScroll = false, ...prop
             !wrapLines && hasHighlights && /*#__PURE__*/ jsx(CodeSnippetHighlights, {}),
             hasGutter && /*#__PURE__*/ jsxs("div", {
                 "data-slot": "code-snippet-gutter",
-                className: "sticky left-0 z-20 flex shrink-0 py-8 -my-8 mr-8 bg-bg-primary [contain:paint]",
+                className: "sticky left-0 z-20 flex shrink-0 py-8 -my-8 mr-8 code-snippet-bg [contain:paint]",
                 children: [
                     hasHighlights && /*#__PURE__*/ jsx(ColorStickColumn, {
-                        lineCount: lineCount,
-                        startingLineNumber: startingLineNumber,
+                        visibleDisplayItems: visibleDisplayItems,
                         lines: lines,
                         lineHeightClass: lineHeightClass
                     }),
                     lineNumbersElement,
+                    hasFolds && /*#__PURE__*/ jsx(FoldColumn, {}),
                     hasAnyPrefix && /*#__PURE__*/ jsx(PrefixColumn, {
-                        lineCount: lineCount,
-                        startingLineNumber: startingLineNumber,
+                        visibleDisplayItems: visibleDisplayItems,
                         lines: lines,
                         lineHeightClass: lineHeightClass
                     })
@@ -68,14 +68,14 @@ const CodeSnippetContent = ({ className, children, nativeScroll = false, ...prop
     if (nativeScroll) return /*#__PURE__*/ jsx("div", {
         "data-slot": "code-snippet-content",
         "data-testid": testId,
-        className: cn('min-h-0', wrapLines ? 'overflow-y-auto overflow-x-hidden' : 'overflow-auto', className),
+        className: cn('min-h-0 overscroll-none', wrapLines ? 'overflow-y-auto overflow-x-hidden' : 'overflow-auto', className),
         ...props,
         children: innerContent
     });
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "code-snippet-content",
         "data-testid": testId,
-        className: cn('min-h-0', className),
+        className: cn('min-h-0 [&_[data-part=viewport]]:overscroll-none', className),
         ...props,
         children: /*#__PURE__*/ jsxs(ScrollArea, {
             children: [

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

@@ -1,5 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { SyntaxAdapter, Token } from './adapters/types';
+import type { DisplayItem, FoldRegion } from './lib/foldUtils';
 export type CodeSnippetSize = 'sm' | 'md' | 'lg';
 export type LineColor = 'danger' | 'warning' | 'info' | 'success' | 'brand' | 'ai' | 'neutral';
 export type LineTextStyle = 'regular' | 'medium' | 'italic';
@@ -39,6 +40,13 @@ export type CodeSnippetContextValue<TLanguage extends string = string> = {
     showLineNumbers: boolean;
     lines: Map<number, LineConfig>;
     totalLines: number;
+    /** All display items (post-fold, pre-clip). Used for ShowMore counting. */
+    displayItems: DisplayItem[];
+    /** Display items clipped to maxLines. All rendering components should iterate this. */
+    visibleDisplayItems: DisplayItem[];
+    folds: FoldRegion[];
+    collapsedFolds: Set<string>;
+    toggleFold: (foldId: string) => void;
     isExpanded: boolean;
     maxLines: number;
     isFullscreen: boolean;

package/dist/components/CodeSnippet/CodeSnippetLineNumbers.js

@@ -5,7 +5,7 @@ import { useCodeSnippet } from "./hooks/index.js";
 import { LINE_COLOR_STYLES, SIZE_LINE_HEIGHT_CLASSES } from "./lib/lineStyles.js";
 const CodeSnippetLineNumbers = ({ className, ...props })=>{
     const testId = useTestId('line-numbers');
-    const { tokens, startingLineNumber, lines, size } = useCodeSnippet();
+    const { tokens, visibleDisplayItems, lines, size } = useCodeSnippet();
     const lineHeightClass = SIZE_LINE_HEIGHT_CLASSES[size];
     if (!tokens) return null;
     return /*#__PURE__*/ jsx("div", {
@@ -13,14 +13,17 @@ const CodeSnippetLineNumbers = ({ className, ...props })=>{
         "data-testid": testId,
         className: cn('flex flex-col text-text-secondary select-none text-right', className),
         ...props,
-        children: tokens.map((_, index)=>{
-            const lineNumber = startingLineNumber + index;
-            const lineConfig = lines.get(lineNumber);
+        children: visibleDisplayItems.map((item)=>{
+            if ('fold-summary' === item.type) return /*#__PURE__*/ jsx("span", {
+                className: cn(lineHeightClass, 'px-8'),
+                children: item.fold.startLine
+            }, `fold-${item.fold.id}`);
+            const lineConfig = lines.get(item.lineNumber);
             const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
             return /*#__PURE__*/ jsx("span", {
-                className: cn(lineHeightClass, 'px-8 bg-bg-primary', colorStyles?.text, colorStyles?.bg),
-                children: lineNumber
-            }, lineNumber);
+                className: cn(lineHeightClass, 'px-8', colorStyles?.text, colorStyles?.bg),
+                children: item.lineNumber
+            }, item.lineNumber);
         })
     });
 };

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

@@ -2,6 +2,7 @@ import type { HTMLAttributes, ReactNode, Ref } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { type TestableProps } from '../../utils/testId';
 import { type LineConfig } from './CodeSnippetContext';
+import { type FoldRegion } from './lib/foldUtils';
 declare const codeSnippetRootVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -21,13 +22,15 @@ export type CodeSnippetRootProps<TLanguage extends string = string> = CodeSnippe
     wrapLines?: boolean;
     /** Max lines before collapsing (for ShowMore) */
     maxLines?: number;
+    /** Foldable regions that can be collapsed/expanded */
+    folds?: FoldRegion[];
     /** Callback when code is copied */
     onCopy?: (code: string) => void;
     /** Child components */
     children?: ReactNode;
 };
 export declare const CodeSnippetRoot: {
-    <TLanguage extends string = string>({ code, language, size, lines, startingLineNumber, wrapLines: initialWrapLines, maxLines, onCopy, className, children, "data-testid": testId, ...props }: CodeSnippetRootProps<TLanguage>): import("react/jsx-runtime").JSX.Element;
+    <TLanguage extends string = string>({ code, language, size, lines, startingLineNumber, wrapLines: initialWrapLines, maxLines, folds: foldsProp, onCopy, className, children, "data-testid": testId, ...props }: CodeSnippetRootProps<TLanguage>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/CodeSnippet/CodeSnippetRoot.js

@@ -5,10 +5,11 @@ import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { plainAdapter } from "./adapters/plain.js";
-import { CodeSnippetContext } from "./CodeSnippetContext.js";
+import { CodeSnippetContext, MIN_HIDDEN_LINES_THRESHOLD } from "./CodeSnippetContext.js";
 import { useAdapter } from "./hooks/index.js";
 import { ShowMoreButton } from "./internal/ShowMoreButton.js";
-const codeSnippetRootVariants = cva("relative bg-component-code-snippet-bg rounded-6 font-mono text-syntax-no-syntax overflow-hidden flex flex-col [&::selection]:bg-[var(--color-syntax-highlight-selected-highlight)] [&::selection]:text-[var(--color-syntax-highlight-selected-code)] [&_*::selection]:bg-[var(--color-syntax-highlight-selected-highlight)] [&_*::selection]:text-[var(--color-syntax-highlight-selected-code)] [&>[data-slot=code-snippet-actions]]:absolute [&>[data-slot=code-snippet-actions]]:right-0 [&>[data-slot=code-snippet-actions]]:top-0 [&>[data-slot=code-snippet-actions]]:z-30 [&>[data-slot=code-snippet-actions]]:p-6 [&>[data-slot=code-snippet-actions]]:rounded-br-6 [&>[data-slot=code-snippet-actions]]:rounded-tl-6", {
+import { buildDisplayItems, validateFolds } from "./lib/foldUtils.js";
+const codeSnippetRootVariants = cva("relative code-snippet-bg rounded-6 font-mono text-syntax-no-syntax overflow-hidden flex flex-col [&::selection]:bg-[var(--color-syntax-highlight-selected-highlight)] [&::selection]:text-[var(--color-syntax-highlight-selected-code)] [&_*::selection]:bg-[var(--color-syntax-highlight-selected-highlight)] [&_*::selection]:text-[var(--color-syntax-highlight-selected-code)] [&>[data-slot=code-snippet-actions]]:absolute [&>[data-slot=code-snippet-actions]]:right-0 [&>[data-slot=code-snippet-actions]]:top-0 [&>[data-slot=code-snippet-actions]]:z-30 [&>[data-slot=code-snippet-actions]]:p-6 [&>[data-slot=code-snippet-actions]]:rounded-br-6 [&>[data-slot=code-snippet-actions]]:rounded-tl-6", {
     variants: {
         size: {
             sm: 'text-xs leading-sm',
@@ -20,7 +21,8 @@ const codeSnippetRootVariants = cva("relative bg-component-code-snippet-bg round
         size: 'sm'
     }
 });
-const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = {}, startingLineNumber = 1, wrapLines: initialWrapLines = false, maxLines = 0, onCopy, className, children, 'data-testid': testId, ...props })=>{
+const EMPTY_LINES = {};
+const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_LINES, startingLineNumber = 1, wrapLines: initialWrapLines = false, maxLines = 0, folds: foldsProp, onCopy, className, children, 'data-testid': testId, ...props })=>{
     const adapterContext = useAdapter();
     const [wrapLines, setWrapLines] = useState(initialWrapLines);
     const [isExpanded, setIsExpanded] = useState(false);
@@ -79,6 +81,45 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = {}, sta
         onCopy
     ]);
     const totalLines = tokens?.length ?? code.split('\n').length;
+    const validatedFolds = useMemo(()=>foldsProp ? validateFolds(foldsProp, totalLines, startingLineNumber) : [], [
+        foldsProp,
+        totalLines,
+        startingLineNumber
+    ]);
+    const computeCollapsedFolds = useCallback((folds)=>{
+        if (!folds) return new Set();
+        return new Set(folds.filter((f)=>false !== f.defaultCollapsed).map((f)=>f.id));
+    }, []);
+    const [collapsedFolds, setCollapsedFolds] = useState(()=>computeCollapsedFolds(foldsProp));
+    useEffect(()=>{
+        setCollapsedFolds(computeCollapsedFolds(foldsProp));
+    }, [
+        foldsProp,
+        computeCollapsedFolds
+    ]);
+    const toggleFold = useCallback((foldId)=>{
+        setCollapsedFolds((prev)=>{
+            const next = new Set(prev);
+            if (next.has(foldId)) next.delete(foldId);
+            else next.add(foldId);
+            return next;
+        });
+    }, []);
+    const displayItems = useMemo(()=>buildDisplayItems(totalLines, validatedFolds, collapsedFolds, startingLineNumber), [
+        totalLines,
+        validatedFolds,
+        collapsedFolds,
+        startingLineNumber
+    ]);
+    const visibleDisplayItems = useMemo(()=>{
+        const hiddenRows = displayItems.length - maxLines;
+        const shouldClip = maxLines > 0 && !isExpanded && hiddenRows >= MIN_HIDDEN_LINES_THRESHOLD;
+        return shouldClip ? displayItems.slice(0, maxLines) : displayItems;
+    }, [
+        displayItems,
+        maxLines,
+        isExpanded
+    ]);
     const contextValue = useMemo(()=>({
             code,
             language,
@@ -94,6 +135,11 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = {}, sta
                     v
                 ])),
             totalLines,
+            displayItems,
+            visibleDisplayItems,
+            folds: validatedFolds,
+            collapsedFolds,
+            toggleFold,
             isExpanded,
             maxLines,
             isFullscreen,
@@ -112,6 +158,11 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = {}, sta
         startingLineNumber,
         lines,
         totalLines,
+        displayItems,
+        visibleDisplayItems,
+        validatedFolds,
+        collapsedFolds,
+        toggleFold,
         isExpanded,
         maxLines,
         isFullscreen,

package/dist/components/CodeSnippet/InlineCodeSnippet.js

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { useCopyTooltip } from "../../hooks/index.js";
 import { cn } from "../../utils/cn.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
-const inlineCodeSnippetVariants = cva("inline-flex items-center bg-component-code-snippet-bg rounded-6 font-mono font-normal text-syntax-no-syntax", {
+const inlineCodeSnippetVariants = cva("inline-flex items-center code-snippet-bg rounded-6 font-mono font-normal text-syntax-no-syntax", {
     variants: {
         size: {
             sm: 'text-xs px-4 py-2',

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

@@ -16,3 +16,5 @@ export { CodeSnippetTitle, type CodeSnippetTitleProps } from './CodeSnippetTitle
 export { CodeSnippetWrapButton, type CodeSnippetWrapButtonProps } from './CodeSnippetWrapButton';
 export { useAdapter, useCodeSnippet } from './hooks';
 export { InlineCodeSnippet, type InlineCodeSnippetProps } from './InlineCodeSnippet';
+export { type FoldRegion } from './lib/foldUtils';
+export { getHttpFolds, HTTP_FOLD_ID, type HttpFoldOptions, type HttpFoldSectionOptions, } from './lib/httpFolds';

package/dist/components/CodeSnippet/index.js

@@ -14,4 +14,5 @@ import { CodeSnippetTitle } from "./CodeSnippetTitle.js";
 import { CodeSnippetWrapButton } from "./CodeSnippetWrapButton.js";
 import { useAdapter, useCodeSnippet } from "./hooks/index.js";
 import { InlineCodeSnippet } from "./InlineCodeSnippet.js";
-export { CodeSnippetActions, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetCopyButton, CodeSnippetFullscreenButton, CodeSnippetHeader, CodeSnippetLineNumbers, CodeSnippetRoot, CodeSnippetTab, CodeSnippetTabs, CodeSnippetTitle, CodeSnippetWrapButton, InlineCodeSnippet, loadHighlightJsAdapter, loadPrismAdapter, loadShikiAdapter, plainAdapter, useAdapter, useCodeSnippet };
+import { HTTP_FOLD_ID, getHttpFolds } from "./lib/httpFolds.js";
+export { CodeSnippetActions, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetCopyButton, CodeSnippetFullscreenButton, CodeSnippetHeader, CodeSnippetLineNumbers, CodeSnippetRoot, CodeSnippetTab, CodeSnippetTabs, CodeSnippetTitle, CodeSnippetWrapButton, HTTP_FOLD_ID, InlineCodeSnippet, getHttpFolds, loadHighlightJsAdapter, loadPrismAdapter, loadShikiAdapter, plainAdapter, useAdapter, useCodeSnippet };

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

@@ -3,22 +3,21 @@ import { cn } from "../../../utils/cn.js";
 import { useCodeSnippet } from "../hooks/index.js";
 import { LINE_COLOR_STYLES, SIZE_LINE_HEIGHT_CLASSES } from "../lib/lineStyles.js";
 const CodeSnippetHighlights = ()=>{
-    const { totalLines, startingLineNumber, lines, size } = useCodeSnippet();
-    const lineCount = totalLines;
+    const { visibleDisplayItems, lines, size } = useCodeSnippet();
     const lineHeightClass = SIZE_LINE_HEIGHT_CLASSES[size];
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "code-snippet-highlights",
         className: "absolute inset-0 z-0 flex flex-col py-8 pointer-events-none",
         "aria-hidden": "true",
-        children: Array.from({
-            length: lineCount
-        }, (_, index)=>{
-            const lineNumber = startingLineNumber + index;
-            const lineConfig = lines.get(lineNumber);
+        children: visibleDisplayItems.map((item)=>{
+            if ('fold-summary' === item.type) return /*#__PURE__*/ jsx("div", {
+                className: lineHeightClass
+            }, `fold-${item.fold.id}`);
+            const lineConfig = lines.get(item.lineNumber);
             const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : null;
             return /*#__PURE__*/ jsx("div", {
                 className: cn(lineHeightClass, colorStyles?.bg)
-            }, lineNumber);
+            }, item.lineNumber);
         })
     });
 };

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

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import type { LineConfig } from '../CodeSnippetContext';
+import type { DisplayItem } from '../lib/foldUtils';
 /** Color stick column component - renders color indicators for each line */
 export declare const ColorStickColumn: FC<{
-    lineCount: number;
-    startingLineNumber: number;
+    visibleDisplayItems: DisplayItem[];
     lines: Map<number, LineConfig>;
     lineHeightClass: string;
 }>;

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

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
 import { LINE_COLOR_STYLES } from "../lib/lineStyles.js";
-const ColorStickColumn = ({ lineCount, startingLineNumber, lines, lineHeightClass })=>/*#__PURE__*/ jsx("div", {
+const ColorStickColumn = ({ visibleDisplayItems, lines, lineHeightClass })=>/*#__PURE__*/ jsx("div", {
         className: "flex flex-col",
         "data-slot": "code-snippet-color-stick",
-        children: Array.from({
-            length: lineCount
-        }, (_, index)=>{
-            const lineNumber = startingLineNumber + index;
-            const lineConfig = lines.get(lineNumber);
+        children: visibleDisplayItems.map((item)=>{
+            if ('fold-summary' === item.type) return /*#__PURE__*/ jsx("span", {
+                className: cn(lineHeightClass, 'border-l-2 pl-12 border-transparent')
+            }, `fold-${item.fold.id}`);
+            const lineConfig = lines.get(item.lineNumber);
             const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
             return /*#__PURE__*/ jsx("span", {
-                className: cn(lineHeightClass, 'border-l-2 pl-12', 'bg-bg-primary', colorStyles?.border ?? 'border-transparent', colorStyles?.bg)
-            }, lineNumber);
+                className: cn(lineHeightClass, 'border-l-2 pl-12', colorStyles?.border ?? 'border-transparent', colorStyles?.bg)
+            }, item.lineNumber);
         })
     });
 export { ColorStickColumn };

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+/** Fold toggle column — renders fold chevrons for each row */
+export declare const FoldColumn: FC;

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

@@ -0,0 +1,42 @@
+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 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",
+        children: visibleDisplayItems.map((item)=>{
+            if ('fold-summary' === item.type) return /*#__PURE__*/ jsx("span", {
+                className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-4'),
+                children: /*#__PURE__*/ jsx(FoldToggle, {
+                    fold: item.fold,
+                    isCollapsed: true,
+                    onToggle: ()=>toggleFold(item.fold.id)
+                })
+            }, `fold-${item.fold.id}`);
+            const fold = foldByStartLine.get(item.lineNumber);
+            const lineConfig = lines.get(item.lineNumber);
+            const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
+            return /*#__PURE__*/ jsx("span", {
+                className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-4', colorStyles?.bg),
+                children: fold && !collapsedFolds.has(fold.id) ? /*#__PURE__*/ jsx(FoldToggle, {
+                    fold: fold,
+                    isCollapsed: false,
+                    onToggle: ()=>toggleFold(fold.id)
+                }) : null
+            }, item.lineNumber);
+        })
+    });
+};
+export { FoldColumn };

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

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

@@ -0,0 +1,20 @@
+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 };

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

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+import type { FoldRegion } from '../lib/foldUtils';
+export declare const FoldToggle: FC<{
+    fold: FoldRegion;
+    isCollapsed: boolean;
+    onToggle: () => void;
+}>;

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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { ChevronDown } from "../../../icons/ChevronDown.js";
+import { ChevronRight } from "../../../icons/ChevronRight.js";
+import { getFoldSummaryLabel } from "../lib/foldUtils.js";
+const FoldToggle = ({ fold, isCollapsed, onToggle })=>{
+    const lineCount = fold.endLine - fold.startLine + 1;
+    const label = getFoldSummaryLabel(fold, lineCount);
+    const ariaLabel = isCollapsed ? `Expand ${label}` : `Collapse ${label}`;
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: "flex items-center justify-center w-16 h-16 rounded-2 text-text-secondary hover:text-text-primary hover:bg-bg-secondary-hover transition-colors cursor-pointer",
+        "aria-expanded": !isCollapsed,
+        "aria-label": ariaLabel,
+        onClick: onToggle,
+        children: isCollapsed ? /*#__PURE__*/ jsx(ChevronRight, {}) : /*#__PURE__*/ jsx(ChevronDown, {})
+    });
+};
+FoldToggle.displayName = 'FoldToggle';
+export { FoldToggle };

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

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import type { LineConfig } from '../CodeSnippetContext';
+import type { DisplayItem } from '../lib/foldUtils';
 /** Prefix column component - renders all line prefixes in a separate column */
 export declare const PrefixColumn: FC<{
-    lineCount: number;
-    startingLineNumber: number;
+    visibleDisplayItems: DisplayItem[];
     lines: Map<number, LineConfig>;
     lineHeightClass: string;
 }>;

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

@@ -1,19 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
 import { LINE_COLOR_STYLES } from "../lib/lineStyles.js";
-const PrefixColumn = ({ lineCount, startingLineNumber, lines, lineHeightClass })=>/*#__PURE__*/ jsx("div", {
+const PrefixColumn = ({ visibleDisplayItems, lines, lineHeightClass })=>/*#__PURE__*/ jsx("div", {
         className: "flex flex-col select-none",
         "data-slot": "code-snippet-prefix",
-        children: Array.from({
-            length: lineCount
-        }, (_, index)=>{
-            const lineNumber = startingLineNumber + index;
-            const lineConfig = lines.get(lineNumber);
+        children: visibleDisplayItems.map((item)=>{
+            if ('fold-summary' === item.type) return /*#__PURE__*/ jsx("span", {
+                className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-8')
+            }, `fold-${item.fold.id}`);
+            const lineConfig = lines.get(item.lineNumber);
             const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
             return /*#__PURE__*/ jsx("span", {
-                className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-8 bg-bg-primary', colorStyles?.text, colorStyles?.bg),
+                className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-8', colorStyles?.text, colorStyles?.bg),
                 children: lineConfig?.prefix
-            }, lineNumber);
+            }, item.lineNumber);
         })
     });
 export { PrefixColumn };

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

@@ -5,8 +5,8 @@ import { Button } from "../../Button/index.js";
 import { MIN_HIDDEN_LINES_THRESHOLD } from "../CodeSnippetContext.js";
 import { useCodeSnippet } from "../hooks/index.js";
 const ShowMoreButton = ()=>{
-    const { totalLines, maxLines, isExpanded, setIsExpanded } = useCodeSnippet();
-    const hiddenLines = totalLines - maxLines;
+    const { displayItems, maxLines, isExpanded, setIsExpanded } = useCodeSnippet();
+    const hiddenLines = displayItems.length - maxLines;
     if (maxLines <= 0 || hiddenLines < MIN_HIDDEN_LINES_THRESHOLD) return null;
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "code-snippet-show-more",

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

@@ -0,0 +1,28 @@
+export type FoldRegion = {
+    /** Unique identifier for this fold region */
+    id: string;
+    /** Inclusive start line number (1-based) */
+    startLine: number;
+    /** Inclusive end line number */
+    endLine: number;
+    /** Optional label for the collapsed summary. When omitted, auto-generated from line count. */
+    label?: string;
+    /** Whether the fold starts collapsed. Default: true */
+    defaultCollapsed?: boolean;
+};
+export type DisplayItem = {
+    type: 'line';
+    index: number;
+    lineNumber: number;
+} | {
+    type: 'fold-summary';
+    fold: FoldRegion;
+    lineCount: number;
+};
+export declare function getFoldSummaryLabel(fold: FoldRegion, lineCount: number): string;
+/**
+ * Validates fold regions and returns a clean, sorted list.
+ * Dev: logs warnings for invalid folds. Prod: silently filters them out.
+ */
+export declare function validateFolds(folds: FoldRegion[], totalLines: number, startingLineNumber?: number): FoldRegion[];
+export declare function buildDisplayItems(totalLines: number, folds: FoldRegion[], collapsedFolds: Set<string>, startingLineNumber: number): DisplayItem[];

package/dist/components/CodeSnippet/lib/foldUtils.js

@@ -0,0 +1,80 @@
+function getFoldSummaryLabel(fold, lineCount) {
+    return fold.label ?? `${lineCount} lines`;
+}
+function validateFolds(folds, totalLines, startingLineNumber = 1) {
+    const isDev = 'production' !== process.env.NODE_ENV;
+    const valid = [];
+    const seenIds = new Set();
+    const lastLine = startingLineNumber + totalLines - 1;
+    const sorted = [
+        ...folds
+    ].sort((a, b)=>a.startLine - b.startLine);
+    for (const fold of sorted){
+        if (fold.startLine > fold.endLine) {
+            if (isDev) console.warn(`[CodeSnippet] Fold "${fold.id}": startLine (${fold.startLine}) > endLine (${fold.endLine}). Skipping.`);
+            continue;
+        }
+        if (fold.startLine < startingLineNumber || fold.endLine > lastLine) {
+            if (isDev) console.warn(`[CodeSnippet] Fold "${fold.id}": out of bounds (lines ${fold.startLine}-${fold.endLine}, total ${totalLines}). Skipping.`);
+            continue;
+        }
+        if (seenIds.has(fold.id)) {
+            if (isDev) console.warn(`[CodeSnippet] Fold "${fold.id}": duplicate id. Skipping.`);
+            continue;
+        }
+        const overlaps = valid.some((existing)=>fold.startLine <= existing.endLine && fold.endLine >= existing.startLine);
+        if (overlaps) {
+            if (isDev) console.warn(`[CodeSnippet] Fold "${fold.id}": overlaps with an existing fold. Skipping.`);
+            continue;
+        }
+        seenIds.add(fold.id);
+        valid.push(fold);
+    }
+    return valid;
+}
+function buildDisplayItems(totalLines, folds, collapsedFolds, startingLineNumber) {
+    if (0 === folds.length) return Array.from({
+        length: totalLines
+    }, (_, index)=>({
+            type: 'line',
+            index,
+            lineNumber: startingLineNumber + index
+        }));
+    const items = [];
+    let currentIndex = 0;
+    for (const fold of folds){
+        const foldStartIndex = fold.startLine - startingLineNumber;
+        const foldEndIndex = fold.endLine - startingLineNumber;
+        while(currentIndex < foldStartIndex){
+            items.push({
+                type: 'line',
+                index: currentIndex,
+                lineNumber: startingLineNumber + currentIndex
+            });
+            currentIndex++;
+        }
+        if (collapsedFolds.has(fold.id)) {
+            const lineCount = fold.endLine - fold.startLine + 1;
+            items.push({
+                type: 'fold-summary',
+                fold,
+                lineCount
+            });
+        } else for(let i = foldStartIndex; i <= foldEndIndex; i++)items.push({
+            type: 'line',
+            index: i,
+            lineNumber: startingLineNumber + i
+        });
+        currentIndex = foldEndIndex + 1;
+    }
+    while(currentIndex < totalLines){
+        items.push({
+            type: 'line',
+            index: currentIndex,
+            lineNumber: startingLineNumber + currentIndex
+        });
+        currentIndex++;
+    }
+    return items;
+}
+export { buildDisplayItems, getFoldSummaryLabel, validateFolds };

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

@@ -0,0 +1,27 @@
+import type { FoldRegion } from './foldUtils';
+export declare const HTTP_FOLD_ID: {
+    readonly headers: "http-headers";
+    readonly body: "http-body";
+};
+export type HttpFoldSectionOptions = {
+    label?: string;
+    defaultCollapsed?: boolean;
+};
+export type HttpFoldOptions = {
+    headers?: HttpFoldSectionOptions;
+    body?: HttpFoldSectionOptions;
+    /** Must match the startingLineNumber passed to CodeSnippetRoot. Default: 1 */
+    startingLineNumber?: number;
+};
+/**
+ * Detects header and body sections in an HTTP request/response and returns fold regions.
+ *
+ * Expected structure:
+ * - Line 1: Request line (e.g. `GET /path HTTP/1.1`) or status line (e.g. `HTTP/1.1 200 OK`)
+ * - Lines 2–N: Headers (key: value)
+ * - Empty line: separator
+ * - Remaining lines: Body (optional)
+ *
+ * Returns up to two fold regions (headers, body). Sections that don't exist are omitted.
+ */
+export declare function getHttpFolds(code: string, options?: HttpFoldOptions): FoldRegion[];

package/dist/components/CodeSnippet/lib/httpFolds.js

@@ -0,0 +1,36 @@
+const HTTP_FOLD_ID = {
+    headers: 'http-headers',
+    body: 'http-body'
+};
+function getHttpFolds(code, options) {
+    const lines = code.split('\n');
+    const folds = [];
+    const offset = (options?.startingLineNumber ?? 1) - 1;
+    let separatorIndex = -1;
+    for(let i = 1; i < lines.length; i++)if (lines[i]?.trim() === '') {
+        separatorIndex = i;
+        break;
+    }
+    const headersStart = 2 + offset;
+    const headersEnd = (-1 === separatorIndex ? lines.length : separatorIndex) + offset;
+    if (headersEnd >= headersStart) folds.push({
+        id: HTTP_FOLD_ID.headers,
+        startLine: headersStart,
+        endLine: headersEnd,
+        label: options?.headers?.label ?? 'Headers',
+        defaultCollapsed: options?.headers?.defaultCollapsed
+    });
+    if (-1 !== separatorIndex) {
+        const bodyStart = separatorIndex + 2 + offset;
+        const bodyEnd = lines.length + offset;
+        if (bodyEnd >= bodyStart) folds.push({
+            id: HTTP_FOLD_ID.body,
+            startLine: bodyStart,
+            endLine: bodyEnd,
+            label: options?.body?.label ?? 'Body',
+            defaultCollapsed: options?.body?.defaultCollapsed
+        });
+    }
+    return folds;
+}
+export { HTTP_FOLD_ID, getHttpFolds };

package/dist/hooks/useCopyTooltip.js

@@ -22,7 +22,10 @@ function useCopyTooltip({ text, enabled = true }) {
         setCopied(true);
         setKeepOpen(true);
         clearTimer();
-        timerRef.current = setTimeout(()=>setKeepOpen(false), 2000);
+        timerRef.current = setTimeout(()=>{
+            setKeepOpen(false);
+            setCopied(false);
+        }, 2000);
     }, [
         enabled,
         text,
@@ -33,6 +36,7 @@ function useCopyTooltip({ text, enabled = true }) {
         let listenerAdded = false;
         const dismiss = ()=>{
             setKeepOpen(false);
+            setCopied(false);
             clearTimer();
         };
         const frame = requestAnimationFrame(()=>{

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.21.1",
-  "generatedAt": "2026-04-10T07:19:15.831Z",
+  "version": "0.22.0",
+  "generatedAt": "2026-04-10T07:46:52.991Z",
   "components": [
     {
       "name": "Alert",
@@ -10031,7 +10031,7 @@
               "type": "Record<number, LineConfig> | undefined",
               "required": false,
               "description": "Per-line configuration (color, prefix) keyed by line number",
-              "defaultValue": "{}"
+              "defaultValue": "EMPTY_LINES"
             },
             {
               "name": "startingLineNumber",
@@ -10052,6 +10052,12 @@
               "required": false,
               "description": "Max lines before collapsing (for ShowMore)",
               "defaultValue": "0"
+            },
+            {
+              "name": "folds",
+              "type": "FoldRegion[] | undefined",
+              "required": false,
+              "description": "Foldable regions that can be collapsed/expanded"
             }
           ]
         },
@@ -11128,6 +11134,26 @@
           "name": "ShowMore",
           "code": "() => (\n  <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '500px' }}>\n    <div>\n      <p style={{ margin: '0 0 8px', fontSize: '14px', color: '#64748b' }}>\n        12 lines, maxLines=7 — 5 hidden, button shown\n      </p>\n      <CodeSnippetRoot code={showMoreCode} language='text' maxLines={7}>\n        <CodeSnippetContent>\n          <CodeSnippetCode />\n        </CodeSnippetContent>\n      </CodeSnippetRoot>\n    </div>\n    <div>\n      <p style={{ margin: '0 0 8px', fontSize: '14px', color: '#64748b' }}>\n        9 lines, maxLines=7 — 2 hidden, below threshold, no button\n      </p>\n      <CodeSnippetRoot code={showMoreThresholdCode} language='text' maxLines={7}>\n        <CodeSnippetContent>\n          <CodeSnippetCode />\n        </CodeSnippetContent>\n      </CodeSnippetRoot>\n    </div>\n  </div>\n)",
           "description": "Show more / show less with threshold behavior.\nFirst snippet (12 lines, maxLines=7) shows the button (5 hidden).\nSecond snippet (9 lines, maxLines=7) hides only 2 lines — below\nthe threshold of 3, so all lines are shown without the button."
+        },
+        {
+          "name": "HTTPRequestWithFolding",
+          "code": "() => (\n  <CodeSnippetRoot\n    code={foldableRequestCode}\n    language='text'\n    folds={getHttpFolds(foldableRequestCode)}\n  >\n    <CodeSnippetContent>\n      <CodeSnippetLineNumbers />\n      <CodeSnippetCode />\n    </CodeSnippetContent>\n  </CodeSnippetRoot>\n)",
+          "description": "HTTP Request with foldable headers and body using `getHttpFolds`."
+        },
+        {
+          "name": "HTTPResponseWithFolding",
+          "code": "() => (\n  <CodeSnippetRoot\n    code={foldableResponseCode}\n    language='text'\n    folds={getHttpFolds(foldableResponseCode)}\n  >\n    <CodeSnippetContent>\n      <CodeSnippetLineNumbers />\n      <CodeSnippetCode />\n    </CodeSnippetContent>\n  </CodeSnippetRoot>\n)",
+          "description": "HTTP Response with foldable headers and body using `getHttpFolds`."
+        },
+        {
+          "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)",
+          "description": "Folds combined with line highlights — colors and decorations\non folded lines are hidden when collapsed, visible when expanded."
+        },
+        {
+          "name": "WithFoldingAndShowMore",
+          "code": "() => (\n  <CodeSnippetAdapterProvider adapter={loadShikiAdapter}>\n    <CodeSnippetRoot\n      code={foldableResponseCode}\n      language='http'\n      startingLineNumber={100}\n      maxLines={6}\n      folds={getHttpFolds(foldableResponseCode, { startingLineNumber: 100 })}\n    >\n      <CodeSnippetContent>\n        <CodeSnippetLineNumbers />\n        <CodeSnippetCode />\n      </CodeSnippetContent>\n    </CodeSnippetRoot>\n  </CodeSnippetAdapterProvider>\n)",
+          "description": "Folds combined with maxLines (ShowMore) and a custom startingLineNumber.\nFold line numbers are absolute — `getHttpFolds` accepts `startingLineNumber`\nto offset them automatically."
         }
       ]
     },
@@ -28483,7 +28509,7 @@
         },
         {
           "name": "--color-syntax-keyword",
-          "value": "var(--color-violet-700)"
+          "value": "var(--color-purple-600)"
         },
         {
           "name": "--color-syntax-function",
@@ -28491,35 +28517,35 @@
         },
         {
           "name": "--color-syntax-string",
-          "value": "var(--color-amber-700)"
+          "value": "var(--color-green-600)"
         },
         {
           "name": "--color-syntax-number-boolean",
-          "value": "var(--color-orange-700)"
+          "value": "var(--color-amber-700)"
         },
         {
           "name": "--color-syntax-tag",
-          "value": "var(--color-teal-700)"
+          "value": "var(--color-red-600)"
         },
         {
           "name": "--color-syntax-attribute",
-          "value": "var(--color-orange-700)"
+          "value": "var(--color-amber-700)"
         },
         {
           "name": "--color-syntax-comment",
-          "value": "var(--color-slate-500)"
+          "value": "var(--color-slate-400)"
         },
         {
           "name": "--color-syntax-type",
-          "value": "var(--color-indigo-800)"
+          "value": "var(--color-yellow-700)"
         },
         {
           "name": "--color-syntax-operator",
-          "value": "var(--color-slate-600)"
+          "value": "var(--color-slate-700)"
         },
         {
           "name": "--color-syntax-variable",
-          "value": "var(--color-green-700)"
+          "value": "var(--color-red-600)"
         },
         {
           "name": "--color-syntax-number",
@@ -28527,11 +28553,11 @@
         },
         {
           "name": "--color-syntax-boolean",
-          "value": "var(--color-syntax-number-boolean)"
+          "value": "var(--color-syntax-keyword)"
         },
         {
           "name": "--color-syntax-constant",
-          "value": "var(--color-syntax-number-boolean)"
+          "value": "var(--color-syntax-keyword)"
         },
         {
           "name": "--color-syntax-builtin",
@@ -29541,43 +29567,43 @@
         },
         {
           "name": "--color-syntax-keyword",
-          "value": "var(--color-violet-300)"
+          "value": "var(--color-purple-400)"
         },
         {
           "name": "--color-syntax-function",
-          "value": "var(--color-blue-300)"
+          "value": "var(--color-blue-400)"
         },
         {
           "name": "--color-syntax-string",
-          "value": "var(--color-amber-300)"
+          "value": "var(--color-green-300)"
         },
         {
           "name": "--color-syntax-number-boolean",
-          "value": "var(--color-orange-300)"
+          "value": "var(--color-amber-300)"
         },
         {
           "name": "--color-syntax-tag",
-          "value": "var(--color-teal-300)"
+          "value": "var(--color-red-400)"
         },
         {
           "name": "--color-syntax-attribute",
-          "value": "var(--color-orange-300)"
+          "value": "var(--color-amber-300)"
         },
         {
           "name": "--color-syntax-comment",
-          "value": "var(--color-slate-400)"
+          "value": "var(--color-slate-500)"
         },
         {
           "name": "--color-syntax-type",
-          "value": "var(--color-indigo-300)"
+          "value": "var(--color-yellow-300)"
         },
         {
           "name": "--color-syntax-operator",
-          "value": "var(--color-slate-400)"
+          "value": "var(--color-slate-300)"
         },
         {
           "name": "--color-syntax-variable",
-          "value": "var(--color-green-300)"
+          "value": "var(--color-red-300)"
         },
         {
           "name": "--color-syntax-number",
@@ -29585,11 +29611,11 @@
         },
         {
           "name": "--color-syntax-boolean",
-          "value": "var(--color-syntax-number-boolean)"
+          "value": "var(--color-syntax-keyword)"
         },
         {
           "name": "--color-syntax-constant",
-          "value": "var(--color-syntax-number-boolean)"
+          "value": "var(--color-syntax-keyword)"
         },
         {
           "name": "--color-syntax-builtin",

package/dist/theme/index.css

@@ -13,6 +13,7 @@
 @import './focus.css';
 @import './icon.css';
 @import './utilities/hover-overlay.css';
+@import './utilities/code-snippet-bg.css';
 @import './components/drawer.css';
 @import './components/dialog.css';
 @import './components/tour.css';

package/dist/theme/semantic.css

@@ -217,25 +217,30 @@
 
     /* ========================================
    * SYNTAX COLORS
+   * ⚠️  CODE-MANAGED — DO NOT SYNC FROM FIGMA
+   * These token-to-color mappings are intentionally decoupled from Figma.
+   * The underlying palette values (e.g. --color-slate-900's hex) may change,
+   * but the mapping here (e.g. keyword → purple-600) must not be overwritten
+   * by Figma design token imports or AI-assisted Figma syncs.
    * ======================================== */
     --color-syntax-no-syntax: var(--color-slate-900);
 
-    /* Syntax Highlighting — base tokens (Figma source of truth) */
-    --color-syntax-keyword: var(--color-violet-700);
+    /* Syntax Highlighting — base tokens (One Light / GitHub Light family) */
+    --color-syntax-keyword: var(--color-purple-600);
     --color-syntax-function: var(--color-blue-600);
-    --color-syntax-string: var(--color-amber-700);
-    --color-syntax-number-boolean: var(--color-orange-700);
-    --color-syntax-tag: var(--color-teal-700);
-    --color-syntax-attribute: var(--color-orange-700);
-    --color-syntax-comment: var(--color-slate-500);
-    --color-syntax-type: var(--color-indigo-800);
-    --color-syntax-operator: var(--color-slate-600);
-    --color-syntax-variable: var(--color-green-700);
+    --color-syntax-string: var(--color-green-600);
+    --color-syntax-number-boolean: var(--color-amber-700);
+    --color-syntax-tag: var(--color-red-600);
+    --color-syntax-attribute: var(--color-amber-700);
+    --color-syntax-comment: var(--color-slate-400);
+    --color-syntax-type: var(--color-yellow-700);
+    --color-syntax-operator: var(--color-slate-700);
+    --color-syntax-variable: var(--color-red-600);
 
     /* Syntax Highlighting — aliases for CodeToken mapping */
     --color-syntax-number: var(--color-syntax-number-boolean);
-    --color-syntax-boolean: var(--color-syntax-number-boolean);
-    --color-syntax-constant: var(--color-syntax-number-boolean);
+    --color-syntax-boolean: var(--color-syntax-keyword);
+    --color-syntax-constant: var(--color-syntax-keyword);
     --color-syntax-builtin: var(--color-syntax-keyword);
     --color-syntax-class-name: var(--color-syntax-type);
     --color-syntax-property: var(--color-syntax-variable);
@@ -607,25 +612,27 @@
 
     /* ========================================
      * SYNTAX COLORS
+     * ⚠️  CODE-MANAGED — DO NOT SYNC FROM FIGMA
+     * See light-mode comment above for details.
      * ======================================== */
     --color-syntax-no-syntax: var(--color-slate-200);
 
-    /* Syntax Highlighting — base tokens (Figma source of truth) */
-    --color-syntax-keyword: var(--color-violet-300);
-    --color-syntax-function: var(--color-blue-300);
-    --color-syntax-string: var(--color-amber-300);
-    --color-syntax-number-boolean: var(--color-orange-300);
-    --color-syntax-tag: var(--color-teal-300);
-    --color-syntax-attribute: var(--color-orange-300);
-    --color-syntax-comment: var(--color-slate-400);
-    --color-syntax-type: var(--color-indigo-300);
-    --color-syntax-operator: var(--color-slate-400);
-    --color-syntax-variable: var(--color-green-300);
+    /* Syntax Highlighting — base tokens (One Dark Pro / Dark+ family) */
+    --color-syntax-keyword: var(--color-purple-400);
+    --color-syntax-function: var(--color-blue-400);
+    --color-syntax-string: var(--color-green-300);
+    --color-syntax-number-boolean: var(--color-amber-300);
+    --color-syntax-tag: var(--color-red-400);
+    --color-syntax-attribute: var(--color-amber-300);
+    --color-syntax-comment: var(--color-slate-500);
+    --color-syntax-type: var(--color-yellow-300);
+    --color-syntax-operator: var(--color-slate-300);
+    --color-syntax-variable: var(--color-red-300);
 
     /* Syntax Highlighting — aliases for CodeToken mapping */
     --color-syntax-number: var(--color-syntax-number-boolean);
-    --color-syntax-boolean: var(--color-syntax-number-boolean);
-    --color-syntax-constant: var(--color-syntax-number-boolean);
+    --color-syntax-boolean: var(--color-syntax-keyword);
+    --color-syntax-constant: var(--color-syntax-keyword);
     --color-syntax-builtin: var(--color-syntax-keyword);
     --color-syntax-class-name: var(--color-syntax-type);
     --color-syntax-property: var(--color-syntax-variable);

package/dist/theme/utilities/code-snippet-bg.css

@@ -0,0 +1,8 @@
+@utility code-snippet-bg {
+    background:
+        linear-gradient(
+            var(--color-component-code-snippet-bg),
+            var(--color-component-code-snippet-bg)
+        ),
+        var(--color-bg-page-bg);
+}

package/package.json

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