@wallarm-org/design-system 1.30.0 → 1.31.0

package/dist/components/CodeEditor/lib/portalRegistry.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+/** A React node to render into a DOM host owned by the editor engine (gutter marker, widget, panel). */
+export interface PortalEntry {
+    id: number;
+    host: HTMLElement;
+    node: ReactNode;
+}
+/**
+ * External store connecting plain-DOM CodeMirror extensions to React.
+ * The engine registers `(host, node)` pairs; `PortalOutlet` renders each one with `createPortal`.
+ */
+export interface PortalRegistry {
+    register(host: HTMLElement, node: ReactNode): number;
+    update(id: number, node: ReactNode): void;
+    unregister(id: number): void;
+    subscribe(listener: () => void): () => void;
+    /** Stable reference until a change */
+    getSnapshot(): readonly PortalEntry[];
+}
+export declare const createPortalRegistry: () => PortalRegistry;

package/dist/components/CodeEditor/lib/portalRegistry.js

@@ -0,0 +1,47 @@
+const createPortalRegistry = ()=>{
+    let nextId = 1;
+    let entries = [];
+    const listeners = new Set();
+    const emit = (next)=>{
+        entries = next;
+        for (const listener of [
+            ...listeners
+        ])listener();
+    };
+    return {
+        register (host, node) {
+            const id = nextId++;
+            emit([
+                ...entries,
+                {
+                    id,
+                    host,
+                    node
+                }
+            ]);
+            return id;
+        },
+        update (id, node) {
+            const current = entries.find((entry)=>entry.id === id);
+            if (!current || current.node === node) return;
+            emit(entries.map((entry)=>entry.id === id ? {
+                    ...entry,
+                    node
+                } : entry));
+        },
+        unregister (id) {
+            if (!entries.some((entry)=>entry.id === id)) return;
+            emit(entries.filter((entry)=>entry.id !== id));
+        },
+        subscribe (listener) {
+            listeners.add(listener);
+            return ()=>{
+                listeners.delete(listener);
+            };
+        },
+        getSnapshot () {
+            return entries;
+        }
+    };
+};
+export { createPortalRegistry };

package/dist/components/CodeEditor/lib/splitContentProps.d.ts

@@ -0,0 +1,12 @@
+export interface SplitContentProps<TWrapper> {
+    /** Attributes for the typing surface (`.cm-content`), as DOM attribute strings */
+    contentAttributes: Record<string, string>;
+    /** Everything else: className, style, event handlers, other wrapper attributes */
+    wrapperProps: TWrapper;
+}
+/**
+ * Attribute routing for `CodeEditorContent` (spec D10): `data-*`, `aria-*`,
+ * `id`, `title` and `tabIndex` go to the editor's typing surface; the rest stays
+ * on the wrapper div. `undefined` / `null` values are dropped, as React would.
+ */
+export declare const splitContentProps: <TProps extends object>(props: TProps) => SplitContentProps<TProps>;

package/dist/components/CodeEditor/lib/splitContentProps.js

@@ -0,0 +1,28 @@
+const isContentAttribute = (key)=>key.startsWith('data-') || key.startsWith('aria-') || 'id' === key || 'title' === key;
+const toAttributeValue = (value)=>{
+    if ('string' == typeof value) return value;
+    if ('number' == typeof value || 'boolean' == typeof value) return String(value);
+    return null;
+};
+const splitContentProps = (props)=>{
+    const contentAttributes = {};
+    const wrapperProps = {};
+    for (const [key, value] of Object.entries(props)){
+        if ('tabIndex' === key) {
+            const attribute = toAttributeValue(value);
+            if (null !== attribute) contentAttributes.tabindex = attribute;
+            continue;
+        }
+        if (isContentAttribute(key)) {
+            const attribute = toAttributeValue(value);
+            if (null !== attribute) contentAttributes[key] = attribute;
+            continue;
+        }
+        wrapperProps[key] = value;
+    }
+    return {
+        contentAttributes,
+        wrapperProps: wrapperProps
+    };
+};
+export { splitContentProps };

package/dist/components/CodeEditor/types.d.ts

@@ -0,0 +1,72 @@
+import type { FoldRegion } from '../CodeSnippet/lib/foldUtils';
+/** Language of the document. Passed verbatim to the syntax adapter and selects the structural parser. */
+export type CodeEditorLanguage = 'http' | 'json' | 'yaml' | 'bash' | 'text' | 'javascript' | 'typescript' | 'python' | 'lua';
+/** Imperative handle exposed through `apiRef` and `useCodeEditor()`. */
+export interface CodeEditorApi {
+    focus(): void;
+    getValue(): string;
+    /** Replaces the selection, or inserts at the cursor. Undoable. */
+    insertText(text: string): void;
+    openSearch(): void;
+    foldAll(): void;
+    unfoldAll(): void;
+}
+export interface CodeEditorPosition {
+    /** Absolute line number (startingLineNumber-based) */
+    line: number;
+    /** 1-based column */
+    column: number;
+}
+export interface CodeEditorDiagnostic {
+    from: CodeEditorPosition;
+    /**
+     * Defaults to one character after `from` (a point when `from` is at the end of its line).
+     * A line past the document end is clamped to the document end; never before `from`.
+     */
+    to?: CodeEditorPosition;
+    severity: 'error' | 'warning' | 'info';
+    message: string;
+    /** 'syntax' | 'schema' for built-ins; free text for consumer diagnostics */
+    source?: string;
+}
+export interface CodeEditorCompletion {
+    label: string;
+    /** Text to insert; defaults to label */
+    apply?: string;
+    detail?: string;
+    info?: string;
+    kind?: 'keyword' | 'property' | 'value' | 'method' | 'header' | 'snippet' | 'text';
+}
+/** HTTP-specific location of the cursor, present when `language === 'http'`. */
+export interface CodeEditorHttpContext {
+    section: 'start-line' | 'header-name' | 'header-value' | 'body';
+    headerName?: string;
+    messageKind: 'request' | 'response';
+}
+export interface CodeEditorCompletionContext {
+    value: string;
+    position: CodeEditorPosition;
+    lineText: string;
+    /** Word being typed before the cursor and where it starts */
+    word: {
+        text: string;
+        from: CodeEditorPosition;
+    };
+    /** true when opened with Ctrl-Space */
+    explicit: boolean;
+    /** Present when language === 'http' */
+    http?: CodeEditorHttpContext;
+    /** Present in a JSON document or JSON body: JSON pointer of the cursor location */
+    jsonPointer?: string;
+}
+export type CodeEditorCompletionSource = (ctx: CodeEditorCompletionContext) => CodeEditorCompletion[] | null | Promise<CodeEditorCompletion[] | null>;
+/** Static fold regions, or a function re-run (debounced) after edits. */
+export type CodeEditorFolds = FoldRegion[] | ((value: string, ctx: {
+    startingLineNumber: number;
+}) => FoldRegion[]);
+/**
+ * JSON Schema document (any draft supported by json-schema-library).
+ * Structural on purpose: the engine casts it to json-schema-library's own type,
+ * so the public API never depends on that module statically.
+ */
+export type JsonSchema = Record<string, unknown> | boolean;

package/dist/components/CodeSnippet/CodeSnippetCode.js

@@ -1,9 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { useCodeSnippet } from "./hooks/index.js";
-import { CodeContent, CodeLine, TokenizedCodeLine } from "./internal/index.js";
-import { getFoldSummaryLabel } from "./lib/foldUtils.js";
+import { CodeContent, CodeLine, FoldSummary, TokenizedCodeLine } from "./internal/index.js";
 import { SIZE_LINE_HEIGHT_CLASSES } from "./lib/lineStyles.js";
 import { splitTextByRanges } from "./lib/lineUtils.js";
 const CodeSnippetCode = ({ className, ...props })=>{
@@ -21,14 +19,7 @@ const CodeSnippetCode = ({ className, ...props })=>{
             hasFolds: true
         };
     };
-    const renderFoldSummary = (item)=>{
-        const label = getFoldSummaryLabel(item.fold, item.lineCount);
-        const { className: summaryClassName, onClick: consumerOnClick, ...summaryProps } = item.fold.summaryProps ?? {};
-        const handleSummaryClick = (event)=>{
-            toggleFold(item.fold.id);
-            consumerOnClick?.(event);
-        };
-        return /*#__PURE__*/ jsx(CodeLine, {
+    const renderFoldSummary = (item)=>/*#__PURE__*/ jsx(CodeLine, {
             lineConfig: void 0,
             lineHeightClass: lineHeightClass,
             showInlineGutter: inlineGutter,
@@ -37,20 +28,12 @@ const CodeSnippetCode = ({ className, ...props })=>{
             isFoldCollapsed: inlineGutter || void 0,
             onFoldToggle: inlineGutter ? ()=>toggleFold(item.fold.id) : void 0,
             hasFolds: inlineGutter && hasFolds,
-            children: /*#__PURE__*/ jsx("button", {
-                type: "button",
-                className: cn('inline-flex items-center cursor-pointer select-none', summaryClassName),
-                "aria-expanded": false,
-                "aria-label": `Collapsed region: ${label}, ${item.lineCount} lines`,
-                ...summaryProps,
-                onClick: handleSummaryClick,
-                children: /*#__PURE__*/ jsx("span", {
-                    className: "inline-flex items-center italic text-text-secondary hover:text-text-primary transition-colors",
-                    children: label
-                })
+            children: /*#__PURE__*/ jsx(FoldSummary, {
+                fold: item.fold,
+                lineCount: item.lineCount,
+                onToggle: ()=>toggleFold(item.fold.id)
             })
         }, `fold-${item.fold.id}`);
-    };
     if (isLoading || !tokens) {
         const codeLines = code.split('\n');
         return /*#__PURE__*/ jsx(CodeContent, {

package/dist/components/CodeSnippet/CodeSnippetCopyButton.js

@@ -2,12 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../utils/testId.js";
 import { Button } from "../Button/index.js";
 import { Copyable, CopyableIcon } from "../Copyable/index.js";
-import { useCodeSnippet } from "./hooks/index.js";
+import { useCodeSnippetFrame } from "./hooks/index.js";
 const CodeSnippetCopyButton = ({ ref, ...props })=>{
     const testId = useTestId('copy-button');
-    const { code } = useCodeSnippet();
+    const { getCode, notifyCopied } = useCodeSnippetFrame();
     return /*#__PURE__*/ jsx(Copyable, {
-        text: code,
+        text: getCode,
+        onCopied: notifyCopied,
         tooltip: true,
         children: /*#__PURE__*/ jsx(Button, {
             ref: ref,

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

@@ -0,0 +1,25 @@
+import type { CodeSnippetSize } from './CodeSnippetContext';
+/**
+ * Frame-level state shared by the toolbar/show-more buttons.
+ *
+ * Provided by `CodeSnippetRoot` (and by `CodeEditorRoot`), so the frame
+ * buttons work under either root without depending on the snippet's
+ * render pipeline (`CodeSnippetContext`).
+ */
+export type CodeSnippetFrameContextValue = {
+    size: CodeSnippetSize;
+    /** Lazily reads the current text (snippet: `code` prop; editor: live document) */
+    getCode: () => string;
+    /** Called by the copy button after a copy; roots forward it to their `onCopy` */
+    notifyCopied: () => void;
+    wrapLines: boolean;
+    setWrapLines: (wrap: boolean) => void;
+    isFullscreen: boolean;
+    setIsFullscreen: (fullscreen: boolean) => void;
+    maxLines: number;
+    isExpanded: boolean;
+    setIsExpanded: (expanded: boolean) => void;
+    /** max(0, totalRows - maxLines) — independent of isExpanded; 0 when maxLines <= 0 */
+    hiddenLineCount: number;
+};
+export declare const CodeSnippetFrameContext: import("react").Context<CodeSnippetFrameContextValue | null>;

package/dist/components/CodeSnippet/CodeSnippetFrameContext.js

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

package/dist/components/CodeSnippet/CodeSnippetFullscreenButton.js

@@ -5,10 +5,10 @@ import { useTestId } from "../../utils/testId.js";
 import { Button } from "../Button/index.js";
 import { Kbd } from "../Kbd/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
-import { useCodeSnippet } from "./hooks/index.js";
+import { useCodeSnippetFrame } from "./hooks/index.js";
 const CodeSnippetFullscreenButton = ({ onClick, ref, ...props })=>{
     const testId = useTestId('fullscreen-button');
-    const { isFullscreen, setIsFullscreen } = useCodeSnippet();
+    const { isFullscreen, setIsFullscreen } = useCodeSnippetFrame();
     const handleClick = (event)=>{
         setIsFullscreen(!isFullscreen);
         onClick?.(event);

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

@@ -1,11 +1,9 @@
 import type { HTMLAttributes, ReactNode, Ref } from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
 import { type TestableProps } from '../../utils/testId';
 import { type LineConfig } from './CodeSnippetContext';
+import { codeSnippetRootVariants } from './classes';
 import { type FoldRegion } from './lib/foldUtils';
-declare const codeSnippetRootVariants: (props?: ({
-    size?: "lg" | "md" | "sm" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type CodeSnippetRootVariantProps = VariantProps<typeof codeSnippetRootVariants>;
 type CodeSnippetRootNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
 export type CodeSnippetRootProps<TLanguage extends string = string> = CodeSnippetRootNativeProps & CodeSnippetRootVariantProps & TestableProps & {
@@ -33,7 +31,7 @@ export type CodeSnippetRootProps<TLanguage extends string = string> = CodeSnippe
     /** Child components */
     children?: ReactNode;
 };
-export declare function CodeSnippetRoot<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.Element;
+export declare function CodeSnippetRoot<TLanguage extends string = string>({ code, language, size, lines, startingLineNumber, wrapLines: initialWrapLines, maxLines, folds: foldsProp, onCopy, className, children, ref, 'data-testid': testId, ...props }: CodeSnippetRootProps<TLanguage>): import("react").JSX.Element;
 export declare namespace CodeSnippetRoot {
     var displayName: string;
 }

package/dist/components/CodeSnippet/CodeSnippetRoot.js

@@ -1,30 +1,19 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Children, isValidElement, useCallback, useEffect, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
-import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { copyText } from "../../utils/copyText.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { plainAdapter } from "./adapters/plain.js";
-import { CodeSnippetContext, MIN_HIDDEN_LINES_THRESHOLD } from "./CodeSnippetContext.js";
+import { CodeSnippetContext } from "./CodeSnippetContext.js";
+import { CodeSnippetFrameContext } from "./CodeSnippetFrameContext.js";
 import { CodeSnippetShowMoreButton } from "./CodeSnippetShowMoreButton.js";
+import { codeSnippetRootVariants } from "./classes.js";
 import { useAdapter } from "./hooks/index.js";
+import { CodeSnippetFrame } from "./internal/CodeSnippetFrame.js";
 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',
-            md: 'text-sm',
-            lg: 'text-base leading-sm'
-        }
-    },
-    defaultVariants: {
-        size: 'sm'
-    }
-});
+import { getHiddenLineCount, hasExplicitShowMoreButton, isClamped } from "./lib/showMore.js";
 const EMPTY_LINES = {};
-const isCodeSnippetShowMoreButton = (child)=>/*#__PURE__*/ isValidElement(child) && child.type?.displayName === CodeSnippetShowMoreButton.displayName;
-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 CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_LINES, startingLineNumber = 1, wrapLines: initialWrapLines = false, maxLines = 0, folds: foldsProp, onCopy, className, children, ref, 'data-testid': testId, ...props })=>{
     const adapterContext = useAdapter();
     const [wrapLines, setWrapLines] = useState(initialWrapLines);
     const [isExpanded, setIsExpanded] = useState(false);
@@ -65,16 +54,6 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_L
         language,
         adapter
     ]);
-    useEffect(()=>{
-        if (!isFullscreen) return;
-        const handleKeyDown = (e)=>{
-            if ('Escape' === e.key) setIsFullscreen(false);
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return ()=>document.removeEventListener('keydown', handleKeyDown);
-    }, [
-        isFullscreen
-    ]);
     const copyToClipboard = useCallback(async ()=>{
         await copyText(code);
         onCopy?.(code);
@@ -82,6 +61,15 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_L
         code,
         onCopy
     ]);
+    const getCode = useCallback(()=>code, [
+        code
+    ]);
+    const notifyCopied = useCallback(()=>{
+        onCopy?.(code);
+    }, [
+        code,
+        onCopy
+    ]);
     const totalLines = tokens?.length ?? code.split('\n').length;
     const validatedFolds = useMemo(()=>foldsProp ? validateFolds(foldsProp, totalLines, startingLineNumber) : [], [
         foldsProp,
@@ -119,13 +107,11 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_L
         collapsedFolds,
         startingLineNumber
     ]);
-    const hasExplicitShowMoreButton = Children.toArray(children).some(isCodeSnippetShowMoreButton);
-    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;
-    }, [
+    const hasExplicitShowMore = hasExplicitShowMoreButton(children);
+    const hiddenLineCount = getHiddenLineCount(displayItems.length, maxLines);
+    const visibleDisplayItems = useMemo(()=>isClamped(hiddenLineCount, isExpanded) ? displayItems.slice(0, maxLines) : displayItems, [
         displayItems,
+        hiddenLineCount,
         maxLines,
         isExpanded
     ]);
@@ -180,31 +166,51 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_L
         copyToClipboard,
         adapter
     ]);
-    const snippet = /*#__PURE__*/ jsxs("div", {
+    const frameValue = useMemo(()=>({
+            size: size ?? 'sm',
+            getCode,
+            notifyCopied,
+            wrapLines,
+            setWrapLines,
+            isFullscreen,
+            setIsFullscreen,
+            maxLines,
+            isExpanded,
+            setIsExpanded,
+            hiddenLineCount
+        }), [
+        size,
+        getCode,
+        notifyCopied,
+        wrapLines,
+        isFullscreen,
+        maxLines,
+        isExpanded,
+        hiddenLineCount
+    ]);
+    const snippet = /*#__PURE__*/ jsxs(CodeSnippetFrame, {
         "data-slot": "code-snippet",
         "data-testid": testId,
+        ...props,
+        ref: ref,
         className: cn(codeSnippetRootVariants({
             size
-        }), isFullscreen ? 'fixed inset-16 z-50' : className),
-        ...!isFullscreen ? props : {},
+        }), className),
+        isFullscreen: isFullscreen,
+        setIsFullscreen: setIsFullscreen,
         children: [
             children,
-            maxLines > 0 && !hasExplicitShowMoreButton && /*#__PURE__*/ jsx(CodeSnippetShowMoreButton, {})
+            maxLines > 0 && !hasExplicitShowMore && /*#__PURE__*/ jsx(CodeSnippetShowMoreButton, {})
         ]
     });
     return /*#__PURE__*/ jsx(TestIdProvider, {
         value: testId,
-        children: /*#__PURE__*/ jsx(CodeSnippetContext.Provider, {
-            value: contextValue,
-            children: isFullscreen ? /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "fixed inset-0 z-40 backdrop-blur-xs bg-component-dialog-overlay",
-                        onClick: ()=>setIsFullscreen(false)
-                    }),
-                    snippet
-                ]
-            }), document.body) : snippet
+        children: /*#__PURE__*/ jsx(CodeSnippetFrameContext.Provider, {
+            value: frameValue,
+            children: /*#__PURE__*/ jsx(CodeSnippetContext.Provider, {
+                value: contextValue,
+                children: snippet
+            })
         })
     });
 };

package/dist/components/CodeSnippet/CodeSnippetShowMoreButton.js

@@ -1,13 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "../../icons/ChevronDown.js";
 import { ChevronUp } from "../../icons/ChevronUp.js";
+import { useTestId } from "../../utils/testId.js";
 import { Button } from "../Button/index.js";
 import { MIN_HIDDEN_LINES_THRESHOLD } from "./CodeSnippetContext.js";
-import { useCodeSnippet } from "./hooks/index.js";
+import { useCodeSnippetFrame } from "./hooks/index.js";
 const CodeSnippetShowMoreButton = ({ onClick, ref, ...props })=>{
-    const { displayItems, maxLines, isExpanded, setIsExpanded } = useCodeSnippet();
-    const hiddenLines = displayItems.length - maxLines;
-    if (maxLines <= 0 || hiddenLines < MIN_HIDDEN_LINES_THRESHOLD) return null;
+    const testId = useTestId('show-more-button');
+    const { maxLines, isExpanded, setIsExpanded, hiddenLineCount } = useCodeSnippetFrame();
+    if (maxLines <= 0 || hiddenLineCount < MIN_HIDDEN_LINES_THRESHOLD) return null;
     const handleClick = (event)=>{
         setIsExpanded(!isExpanded);
         onClick?.(event);
@@ -21,6 +22,7 @@ const CodeSnippetShowMoreButton = ({ onClick, ref, ...props })=>{
             color: "neutral",
             size: "small",
             fullWidth: true,
+            "data-testid": testId,
             ...props,
             onClick: handleClick,
             children: isExpanded ? /*#__PURE__*/ jsxs(Fragment, {
@@ -31,7 +33,7 @@ const CodeSnippetShowMoreButton = ({ onClick, ref, ...props })=>{
             }) : /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     "Show more (",
-                    hiddenLines,
+                    hiddenLineCount,
                     " lines)",
                     /*#__PURE__*/ jsx(ChevronDown, {})
                 ]

package/dist/components/CodeSnippet/CodeSnippetWrapButton.js

@@ -3,10 +3,10 @@ import { WrapText } from "../../icons/WrapText.js";
 import { useTestId } from "../../utils/testId.js";
 import { ToggleButton } from "../ToggleButton/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
-import { useCodeSnippet } from "./hooks/index.js";
+import { useCodeSnippetFrame } from "./hooks/index.js";
 const CodeSnippetWrapButton = ({ onToggle, ref, ...props })=>{
     const testId = useTestId('wrap-button');
-    const { wrapLines, setWrapLines } = useCodeSnippet();
+    const { wrapLines, setWrapLines } = useCodeSnippetFrame();
     const handleToggle = (active, event)=>{
         setWrapLines(active);
         onToggle?.(active, event);

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

@@ -10,6 +10,7 @@ const SUPPORTED_LANGUAGES = [
     'python',
     'go',
     'sql',
+    'lua',
     'http'
 ];
 const HLJS_CLASS_MAP = {

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

@@ -4,7 +4,8 @@ let languagesPromise = null;
 async function loadAdditionalLanguages() {
     if (!languagesPromise) languagesPromise = Promise.all([
         import("prismjs/components/prism-bash"),
-        import("prismjs/components/prism-http")
+        import("prismjs/components/prism-http"),
+        import("prismjs/components/prism-lua")
     ]);
     return languagesPromise;
 }
@@ -24,6 +25,7 @@ const SUPPORTED_LANGUAGES = [
     'sql',
     'yaml',
     'markdown',
+    'lua',
     'http'
 ];
 const PRISM_TOKEN_MAP = {

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

@@ -15,6 +15,7 @@ const SUPPORTED_LANGUAGES = [
     'sql',
     'yaml',
     'markdown',
+    'lua',
     'rust',
     'java',
     'c',

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

@@ -1,7 +1,7 @@
 /** Supported language union types per adapter */
-export type PrismLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'bash' | 'shell' | 'json' | 'html' | 'xml' | 'css' | 'python' | 'go' | 'sql' | 'yaml' | 'markdown' | 'http';
-export type ShikiLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'bash' | 'shell' | 'json' | 'html' | 'xml' | 'css' | 'python' | 'go' | 'sql' | 'yaml' | 'markdown' | 'rust' | 'java' | 'c' | 'cpp' | 'http';
-export type HighlightJsLanguage = 'javascript' | 'typescript' | 'bash' | 'json' | 'html' | 'xml' | 'css' | 'python' | 'go' | 'sql' | 'http';
+export type PrismLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'bash' | 'shell' | 'json' | 'html' | 'xml' | 'css' | 'python' | 'go' | 'sql' | 'yaml' | 'markdown' | 'lua' | 'http';
+export type ShikiLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'bash' | 'shell' | 'json' | 'html' | 'xml' | 'css' | 'python' | 'go' | 'sql' | 'yaml' | 'markdown' | 'lua' | 'rust' | 'java' | 'c' | 'cpp' | 'http';
+export type HighlightJsLanguage = 'javascript' | 'typescript' | 'bash' | 'json' | 'html' | 'xml' | 'css' | 'python' | 'go' | 'sql' | 'lua' | 'http';
 export type PlainLanguage = 'text' | 'plain';
 /** Strict token types for syntax highlighting */
 export type TokenType = 'plain' | 'keyword' | 'string' | 'comment' | 'function' | 'number' | 'operator' | 'punctuation' | 'class-name' | 'property' | 'tag' | 'attr-name' | 'attr-value' | 'boolean' | 'builtin' | 'constant' | 'regex' | 'variable';

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

@@ -0,0 +1,3 @@
+export declare const codeSnippetRootVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/CodeSnippet/classes.js

@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority";
+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',
+            md: 'text-sm',
+            lg: 'text-base leading-sm'
+        }
+    },
+    defaultVariants: {
+        size: 'sm'
+    }
+});
+export { codeSnippetRootVariants };

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

@@ -1,2 +1,3 @@
 export { useAdapter } from './useAdapter';
 export { useCodeSnippet } from './useCodeSnippet';
+export { useCodeSnippetFrame } from './useCodeSnippetFrame';

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

@@ -1,2 +1,3 @@
 export { useAdapter } from "./useAdapter.js";
 export { useCodeSnippet } from "./useCodeSnippet.js";
+export { useCodeSnippetFrame } from "./useCodeSnippetFrame.js";

package/dist/components/CodeSnippet/hooks/useCodeSnippetFrame.d.ts

@@ -0,0 +1,2 @@
+import { type CodeSnippetFrameContextValue } from '../CodeSnippetFrameContext';
+export declare const useCodeSnippetFrame: () => CodeSnippetFrameContextValue;

package/dist/components/CodeSnippet/hooks/useCodeSnippetFrame.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { CodeSnippetFrameContext } from "../CodeSnippetFrameContext.js";
+const useCodeSnippetFrame = ()=>{
+    const context = useContext(CodeSnippetFrameContext);
+    if (!context) throw new Error('useCodeSnippetFrame must be used within CodeSnippetRoot or CodeEditorRoot');
+    return context;
+};
+export { useCodeSnippetFrame };