@wallarm-org/design-system 0.22.0-rc-feature-WDS-74-attribute.2 → 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[];