@wallarm-org/design-system 0.22.0 → 0.23.0

package/dist/components/Attribute/Attribute.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface AttributeProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Show skeleton placeholders instead of children */
+    loading?: boolean;
+    children?: ReactNode;
+}
+export declare const Attribute: FC<AttributeProps>;

package/dist/components/Attribute/Attribute.js

@@ -0,0 +1,33 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { Skeleton } from "../Skeleton/index.js";
+const Attribute = ({ ref, loading = false, children, className, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-testid": testId,
+            "data-slot": "attribute",
+            className: cn('flex flex-col', className),
+            children: loading ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Skeleton, {
+                        width: "82px",
+                        height: "16px",
+                        rounded: 6
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "pt-4",
+                        children: /*#__PURE__*/ jsx(Skeleton, {
+                            width: "100%",
+                            height: "24px",
+                            rounded: 6
+                        })
+                    })
+                ]
+            }) : children
+        })
+    });
+Attribute.displayName = 'Attribute';
+export { Attribute };

package/dist/components/Attribute/AttributeLabel.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface AttributeLabelProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const AttributeLabel: FC<AttributeLabelProps>;

package/dist/components/Attribute/AttributeLabel.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const AttributeLabel = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('label');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "attribute-label",
+        className: cn('flex items-center gap-4 flex-wrap font-sans-display text-sm font-normal text-text-secondary', className),
+        children: children
+    });
+};
+AttributeLabel.displayName = 'AttributeLabel';
+export { AttributeLabel };

package/dist/components/Attribute/AttributeLabelDescription.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface AttributeLabelDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    ref?: Ref<HTMLParagraphElement>;
+    children?: ReactNode;
+}
+export declare const AttributeLabelDescription: FC<AttributeLabelDescriptionProps>;

package/dist/components/Attribute/AttributeLabelDescription.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const AttributeLabelDescription = ({ ref, children, className, ...props })=>{
+    const testId = useTestId("label-description");
+    return /*#__PURE__*/ jsx("p", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "attribute-label-description",
+        className: cn('basis-full', className),
+        children: children
+    });
+};
+AttributeLabelDescription.displayName = "AttributeLabelDescription";
+export { AttributeLabelDescription };

package/dist/components/Attribute/AttributeLabelInfo.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface AttributeLabelInfoProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    ref?: Ref<HTMLSpanElement>;
+    /** Tooltip content */
+    children: ReactNode;
+}
+export declare const AttributeLabelInfo: FC<AttributeLabelInfoProps>;

package/dist/components/Attribute/AttributeLabelInfo.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Info } from "../../icons/index.js";
+import { useTestId } from "../../utils/testId.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+const AttributeLabelInfo = ({ ref, children, ...props })=>{
+    const testId = useTestId('label-info');
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx("span", {
+                    ...props,
+                    ref: ref,
+                    "data-testid": testId,
+                    "data-slot": "attribute-label-info",
+                    className: "inline-flex cursor-help",
+                    children: /*#__PURE__*/ jsx(Info, {
+                        size: "md"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                children: children
+            })
+        ]
+    });
+};
+AttributeLabelInfo.displayName = 'AttributeLabelInfo';
+export { AttributeLabelInfo };

package/dist/components/Attribute/AttributeValue.d.ts

@@ -0,0 +1,6 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+export interface AttributeValueProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const AttributeValue: FC<AttributeValueProps>;

package/dist/components/Attribute/AttributeValue.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+function isEmpty(children) {
+    return null == children || false === children || 0 === Children.count(children);
+}
+const AttributeValue = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('value');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "attribute-value",
+        className: cn('pt-4 min-h-[28px] flex items-center', className),
+        children: isEmpty(children) ? /*#__PURE__*/ jsx(Text, {
+            size: "sm",
+            color: "secondary",
+            children: "—"
+        }) : children
+    });
+};
+AttributeValue.displayName = 'AttributeValue';
+export { AttributeValue };

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

@@ -0,0 +1,5 @@
+export { Attribute, type AttributeProps } from './Attribute';
+export { AttributeLabel, type AttributeLabelProps } from './AttributeLabel';
+export { AttributeLabelDescription, type AttributeLabelDescriptionProps, } from './AttributeLabelDescription';
+export { AttributeLabelInfo, type AttributeLabelInfoProps } from './AttributeLabelInfo';
+export { AttributeValue, type AttributeValueProps } from './AttributeValue';

package/dist/components/Attribute/index.js

@@ -0,0 +1,6 @@
+import { Attribute } from "./Attribute.js";
+import { AttributeLabel } from "./AttributeLabel.js";
+import { AttributeLabelDescription } from "./AttributeLabelDescription.js";
+import { AttributeLabelInfo } from "./AttributeLabelInfo.js";
+import { AttributeValue } from "./AttributeValue.js";
+export { Attribute, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue };

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;