@wallarm-org/design-system 1.30.0 → 1.31.0-rc-fix-filter-input-nested-menu-screenshot.1

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

@@ -0,0 +1,17 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+type CodeEditorContentNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'contentEditable' | 'role' | 'defaultValue'>;
+export interface CodeEditorContentProps extends CodeEditorContentNativeProps, TestableProps {
+    /** Content wrapper element */
+    ref?: Ref<HTMLDivElement>;
+    /** Show the line-number gutter (CodeSnippet's `<CodeSnippetLineNumbers />` equivalent) */
+    lineNumbers?: boolean;
+}
+/**
+ * Editing surface of `CodeEditorRoot`. Loads the CodeMirror engine on mount and
+ * shows the value as static text until it is ready. `data-*`, `aria-*`, `id`,
+ * `title` and `tabIndex` land on the typing surface; `className`, `style`, `ref`
+ * and event handlers stay on this wrapper (events from the editor bubble to it).
+ */
+export declare const CodeEditorContent: FC<CodeEditorContentProps>;
+export {};

package/dist/components/CodeEditor/CodeEditorContent.js

@@ -0,0 +1,197 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { useCodeSnippetFrame } from "../CodeSnippet/hooks/index.js";
+import { useCodeEditorContext } from "./CodeEditorContext.js";
+import { codeEditorContentVariants, codeEditorFallbackCodeVariants, codeEditorFallbackGutterVariants, codeEditorFallbackGuttersVariants, codeEditorFallbackLineVariants, codeEditorFallbackVariants, codeEditorHostVariants } from "./classes.js";
+import { loadEngine } from "./lib/loadEngine.js";
+import { PortalOutlet } from "./lib/PortalOutlet.js";
+import { createPortalRegistry } from "./lib/portalRegistry.js";
+import { splitContentProps } from "./lib/splitContentProps.js";
+const ROW_HEIGHT = 20;
+const VERTICAL_PADDING = 16;
+const fallbackGuttersFor = (options)=>{
+    const configs = Object.values(options.lines);
+    const diff = void 0 !== options.original;
+    const { folds } = options;
+    return {
+        stick: diff || configs.some((line)=>null != line.color),
+        folds: void 0 !== folds && !(Array.isArray(folds) && 0 === folds.length),
+        prefix: diff || configs.some((line)=>null != line.prefix)
+    };
+};
+const buildFallbackRows = (value, startingLineNumber, maxHeight)=>{
+    const lines = value.split('\n');
+    const visible = null === maxHeight ? lines : lines.slice(0, Math.max(0, Math.round((maxHeight - VERTICAL_PADDING) / ROW_HEIGHT)));
+    return visible.map((text, index)=>({
+            number: startingLineNumber + index,
+            text
+        }));
+};
+const CodeEditorContent = ({ ref, lineNumbers = false, className, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('content', testIdProp);
+    const fallbackTestId = useTestId('fallback');
+    const fallbackGuttersTestId = useTestId('fallback-gutters');
+    const { options, callbacks, setHandle } = useCodeEditorContext();
+    const { isFullscreen } = useCodeSnippetFrame();
+    const [registry] = useState(createPortalRegistry);
+    const [handle, setLocalHandle] = useState(null);
+    const [loadFailed, setLoadFailed] = useState(false);
+    const hostRef = useRef(null);
+    const { contentAttributes: routedAttributes, wrapperProps } = splitContentProps(props);
+    const attributesKey = JSON.stringify(routedAttributes);
+    const contentAttributes = useMemo(()=>JSON.parse(attributesKey), [
+        attributesKey
+    ]);
+    const engineOptions = useMemo(()=>({
+            ...options,
+            lineNumbers,
+            contentAttributes
+        }), [
+        options,
+        lineNumbers,
+        contentAttributes
+    ]);
+    const optionsRef = useRef(engineOptions);
+    useEffect(()=>{
+        optionsRef.current = engineOptions;
+    }, [
+        engineOptions
+    ]);
+    useEffect(()=>{
+        const host = hostRef.current;
+        if (!host) return;
+        let cancelled = false;
+        let created = null;
+        loadEngine().then((engine)=>{
+            if (cancelled) return;
+            created = engine.createEditor(host, optionsRef.current, {
+                ...callbacks,
+                portals: registry
+            });
+            const mounted = created;
+            flushSync(()=>{
+                setHandle(mounted);
+                setLocalHandle(mounted);
+            });
+        }, (error)=>{
+            if (cancelled) return;
+            console.error('[CodeEditor] Failed to load the editor engine; showing read-only text.', error);
+            setLoadFailed(true);
+        });
+        return ()=>{
+            cancelled = true;
+            if (created) {
+                created.destroy();
+                setHandle(null);
+            }
+            setLocalHandle(null);
+        };
+    }, [
+        callbacks,
+        registry,
+        setHandle
+    ]);
+    useEffect(()=>{
+        handle?.update(engineOptions);
+    }, [
+        handle,
+        engineOptions
+    ]);
+    useEffect(()=>{
+        handle?.view.requestMeasure();
+    }, [
+        handle,
+        isFullscreen
+    ]);
+    const hasAccessibleName = void 0 !== contentAttributes['aria-label'] || void 0 !== contentAttributes['aria-labelledby'];
+    useEffect(()=>{
+        if ('production' !== process.env.NODE_ENV && !hasAccessibleName) console.warn('[CodeEditor] CodeEditorContent has no accessible name. Pass `aria-label` or `aria-labelledby`.');
+    }, [
+        hasAccessibleName
+    ]);
+    const fallbackRows = null === handle ? buildFallbackRows(options.value, options.startingLineNumber, options.maxHeight) : null;
+    const fallbackGutters = fallbackGuttersFor(options);
+    const hasGutter = lineNumbers || fallbackGutters.stick || fallbackGutters.folds || fallbackGutters.prefix;
+    const isDiff = void 0 !== options.original;
+    return /*#__PURE__*/ jsxs("div", {
+        ...wrapperProps,
+        ref: ref,
+        "data-slot": "code-editor-content",
+        "data-testid": testId,
+        "data-ds-suppress-parent-click": "",
+        className: cn(codeEditorContentVariants(), className),
+        children: [
+            fallbackRows && /*#__PURE__*/ jsxs("pre", {
+                "data-testid": fallbackTestId,
+                "aria-busy": loadFailed ? 'false' : 'true',
+                className: codeEditorFallbackVariants(),
+                children: [
+                    hasGutter && /*#__PURE__*/ jsxs("span", {
+                        "aria-hidden": "true",
+                        "data-testid": fallbackGuttersTestId,
+                        className: codeEditorFallbackGuttersVariants(),
+                        children: [
+                            fallbackGutters.stick && /*#__PURE__*/ jsx("span", {
+                                className: codeEditorFallbackGutterVariants({
+                                    column: 'stick'
+                                })
+                            }),
+                            lineNumbers && /*#__PURE__*/ jsx("span", {
+                                className: codeEditorFallbackGutterVariants({
+                                    column: 'lineNumbers'
+                                }),
+                                children: fallbackRows.map((row)=>/*#__PURE__*/ jsx("span", {
+                                        className: codeEditorFallbackLineVariants(),
+                                        children: row.number
+                                    }, row.number))
+                            }),
+                            fallbackGutters.folds && /*#__PURE__*/ jsx("span", {
+                                className: codeEditorFallbackGutterVariants({
+                                    column: 'folds'
+                                })
+                            }),
+                            fallbackGutters.prefix && /*#__PURE__*/ jsxs("span", {
+                                className: codeEditorFallbackGutterVariants({
+                                    column: 'prefix'
+                                }),
+                                children: [
+                                    fallbackRows.map((row)=>/*#__PURE__*/ jsx("span", {
+                                            className: codeEditorFallbackLineVariants(),
+                                            children: isDiff ? null : options.lines[row.number]?.prefix
+                                        }, row.number)),
+                                    isDiff && /*#__PURE__*/ jsx("span", {
+                                        className: "invisible h-0 overflow-hidden",
+                                        children: "+"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("code", {
+                        className: codeEditorFallbackCodeVariants({
+                            hasGutter
+                        }),
+                        children: fallbackRows.map((row)=>/*#__PURE__*/ jsx("span", {
+                                className: codeEditorFallbackLineVariants({
+                                    wrapLines: options.wrapLines
+                                }),
+                                children: row.text
+                            }, row.number))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: hostRef,
+                className: codeEditorHostVariants()
+            }),
+            /*#__PURE__*/ jsx(PortalOutlet, {
+                registry: registry
+            })
+        ]
+    });
+};
+CodeEditorContent.displayName = 'CodeEditorContent';
+export { CodeEditorContent };

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

@@ -0,0 +1,17 @@
+import type { EditorHandle, EngineCallbacks, EngineOptions } from './engine/types';
+import type { CodeEditorApi } from './types';
+/** Internal bridge between `CodeEditorRoot` (state owner) and `CodeEditorContent` (engine host). */
+export interface CodeEditorContextValue {
+    /** Engine options owned by Root; Content adds `lineNumbers` and `contentAttributes` */
+    options: Omit<EngineOptions, 'lineNumbers' | 'contentAttributes' | 'maxHeight'> & {
+        maxHeight: number | null;
+    };
+    /** Stable callbacks (same identity for the Root's lifetime) */
+    callbacks: Omit<EngineCallbacks, 'portals'>;
+    /** Content registers the live handle after `createEditor()` and clears it on destroy */
+    setHandle: (handle: EditorHandle | null) => void;
+    /** Stable object delegating to the current handle (no-ops before the engine loads) */
+    api: CodeEditorApi;
+}
+export declare const CodeEditorContext: import("react").Context<CodeEditorContextValue | null>;
+export declare const useCodeEditorContext: () => CodeEditorContextValue;

package/dist/components/CodeEditor/CodeEditorContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+const CodeEditorContext = createContext(null);
+const useCodeEditorContext = ()=>{
+    const context = useContext(CodeEditorContext);
+    if (!context) throw new Error('CodeEditor components must be used within CodeEditorRoot');
+    return context;
+};
+export { CodeEditorContext, useCodeEditorContext };

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

@@ -0,0 +1,77 @@
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { type TestableProps } from '../../utils/testId';
+import type { LineConfig } from '../CodeSnippet/CodeSnippetContext';
+import { codeSnippetRootVariants } from '../CodeSnippet/classes';
+import type { CodeEditorApi, CodeEditorCompletionSource, CodeEditorDiagnostic, CodeEditorFolds, CodeEditorLanguage, JsonSchema } from './types';
+type CodeEditorRootNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'defaultValue' | 'onCopy'>;
+export interface CodeEditorRootProps extends CodeEditorRootNativeProps, TestableProps, VariantProps<typeof codeSnippetRootVariants> {
+    /** Root element, including in fullscreen */
+    ref?: Ref<HTMLDivElement>;
+    /** Controlled document */
+    value?: string;
+    /** Uncontrolled initial document (controlled vs uncontrolled is locked on first render) */
+    defaultValue?: string;
+    /** Fired for user edits only, never for external `value` syncs */
+    onChange?: (value: string) => void;
+    /** Passed verbatim to the syntax adapter; selects the structural parser */
+    language?: CodeEditorLanguage;
+    /**
+     * Document identity: changing it swaps to that document's cached state (undo history,
+     * selection, folds). Requires a controlled `value`: when the id changes, `value` must already
+     * hold that document's text (an uncached id starts from `value`). In uncontrolled mode the new
+     * document would be seeded with the previous document's text.
+     */
+    documentId?: string;
+    /** Focusable, selectable, searchable, copyable — but not editable by the user */
+    readOnly?: boolean;
+    /** Offsets gutter numbers; `lines`, `folds`, `diagnostics` use absolute numbers */
+    startingLineNumber?: number;
+    /**
+     * Per-line configuration keyed by absolute line number (static, see spec D6).
+     * Compared by identity: memoise it (or hoist it to a constant) — a new object
+     * every render reconfigures the lines and gutters on every render.
+     */
+    lines?: Record<number, LineConfig>;
+    /**
+     * Fold regions, or a function re-run after edits; collapsed state is kept by `id`.
+     * Compared by identity: memoise the array or pass a stable function (e.g. `getHttpFolds`) —
+     * an inline array/arrow reconfigures folds on every render and bypasses the re-run debounce.
+     */
+    folds?: CodeEditorFolds;
+    /** Controlled line wrapping */
+    wrapLines?: boolean;
+    /** Uncontrolled initial line wrapping */
+    defaultWrapLines?: boolean;
+    /** Fired when the wrap button toggles wrapping */
+    onWrapLinesChange?: (wrap: boolean) => void;
+    /** Height clamp in rows; auto-renders `CodeSnippetShowMoreButton` unless one is a direct child */
+    maxLines?: number;
+    /** Enables diff mode against this text */
+    original?: string;
+    /** JSON Schema for the document (`json`) or the JSON body (`http`) */
+    schema?: JsonSchema;
+    /**
+     * Consumer completion sources, added after the built-in ones. Compared by identity: a new
+     * array reconfigures autocomplete and closes an open list, so keep it stable (module constant
+     * or `useMemo`).
+     */
+    completions?: CodeEditorCompletionSource[];
+    /** External diagnostics, merged with syntax and schema ones */
+    diagnostics?: CodeEditorDiagnostic[];
+    /** Fired when the merged diagnostics change */
+    onDiagnosticsChange?: (diagnostics: CodeEditorDiagnostic[]) => void;
+    /** Imperative handle */
+    apiRef?: Ref<CodeEditorApi>;
+    /** Nonce for the style tags the editor injects */
+    cspNonce?: string;
+    /** Fired by `CodeSnippetCopyButton` after a copy, with the current document */
+    onCopy?: (value: string) => void;
+    /** Chrome (header, floating actions, show more) and `CodeEditorContent` */
+    children?: ReactNode;
+}
+export declare function CodeEditorRoot({ ref, value: valueProp, defaultValue, onChange, language, documentId, size, readOnly, startingLineNumber, lines, folds, wrapLines: wrapLinesProp, defaultWrapLines, onWrapLinesChange, maxLines, original, schema, completions, diagnostics, onDiagnosticsChange, apiRef, cspNonce, onCopy, className, children, 'data-testid': testId, ...props }: CodeEditorRootProps): import("react").JSX.Element;
+export declare namespace CodeEditorRoot {
+    var displayName: string;
+}
+export {};

package/dist/components/CodeEditor/CodeEditorRoot.js

@@ -0,0 +1,203 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useControlled } from "../../hooks/useControlled.js";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { plainAdapter } from "../CodeSnippet/adapters/plain.js";
+import { CodeSnippetFrameContext } from "../CodeSnippet/CodeSnippetFrameContext.js";
+import { CodeSnippetShowMoreButton } from "../CodeSnippet/CodeSnippetShowMoreButton.js";
+import { codeSnippetRootVariants } from "../CodeSnippet/classes.js";
+import { useAdapter } from "../CodeSnippet/hooks/index.js";
+import { CodeSnippetFrame } from "../CodeSnippet/internal/CodeSnippetFrame.js";
+import { getHiddenLineCount, hasExplicitShowMoreButton, isClamped } from "../CodeSnippet/lib/showMore.js";
+import { CodeEditorContext } from "./CodeEditorContext.js";
+const EMPTY_LINES = {};
+const EMPTY_COMPLETIONS = [];
+const EMPTY_DIAGNOSTICS = [];
+const ROW_HEIGHT = 20;
+const VERTICAL_PADDING = 16;
+const countLines = (value)=>{
+    let count = 1;
+    for(let index = value.indexOf('\n'); -1 !== index; index = value.indexOf('\n', index + 1))count += 1;
+    return count;
+};
+const CodeEditorRoot = ({ ref, value: valueProp, defaultValue = '', onChange, language = 'text', documentId, size = 'sm', readOnly = false, startingLineNumber = 1, lines = EMPTY_LINES, folds, wrapLines: wrapLinesProp, defaultWrapLines = false, onWrapLinesChange, maxLines = 0, original, schema, completions = EMPTY_COMPLETIONS, diagnostics = EMPTY_DIAGNOSTICS, onDiagnosticsChange, apiRef, cspNonce, onCopy, className, children, 'data-testid': testId, ...props })=>{
+    const adapterContext = useAdapter();
+    const adapter = adapterContext?.adapter ?? plainAdapter;
+    const [valueState, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue
+    });
+    const value = valueState ?? '';
+    const [wrapState, setWrapState] = useControlled({
+        controlled: wrapLinesProp,
+        default: defaultWrapLines
+    });
+    const wrapLines = wrapState ?? false;
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [engineRows, setEngineRows] = useState(null);
+    const latest = useRef({
+        value,
+        onChange,
+        onDiagnosticsChange,
+        onWrapLinesChange,
+        onCopy
+    });
+    useEffect(()=>{
+        latest.current = {
+            value,
+            onChange,
+            onDiagnosticsChange,
+            onWrapLinesChange,
+            onCopy
+        };
+    });
+    const documentIdWithoutValue = void 0 !== documentId && void 0 === valueProp;
+    const warnedDocumentId = useRef(false);
+    useEffect(()=>{
+        if ('production' === process.env.NODE_ENV) return;
+        if (!documentIdWithoutValue || warnedDocumentId.current) return;
+        warnedDocumentId.current = true;
+        console.warn("[CodeEditor] `documentId` requires a controlled `value`: in uncontrolled mode a new document starts from the previous document's text.");
+    }, [
+        documentIdWithoutValue
+    ]);
+    const handleRef = useRef(null);
+    const [api] = useState(()=>({
+            focus: ()=>handleRef.current?.api.focus(),
+            getValue: ()=>handleRef.current?.api.getValue() ?? latest.current.value,
+            insertText: (text)=>handleRef.current?.api.insertText(text),
+            openSearch: ()=>handleRef.current?.api.openSearch(),
+            foldAll: ()=>handleRef.current?.api.foldAll(),
+            unfoldAll: ()=>handleRef.current?.api.unfoldAll()
+        }));
+    useImperativeHandle(apiRef, ()=>api, [
+        api
+    ]);
+    const [callbacks] = useState(()=>({
+            onChange: (next)=>{
+                setValue(next);
+                latest.current.onChange?.(next);
+            },
+            onDiagnosticsChange: (next)=>latest.current.onDiagnosticsChange?.(next),
+            onVisibleRowCountChange: (rows)=>setEngineRows(rows)
+        }));
+    const setHandle = useCallback((handle)=>{
+        handleRef.current = handle;
+        if (null === handle) setEngineRows(null);
+    }, []);
+    const setWrapLines = useCallback((wrap)=>{
+        setWrapState(wrap);
+        latest.current.onWrapLinesChange?.(wrap);
+    }, [
+        setWrapState
+    ]);
+    const getCode = useCallback(()=>api.getValue(), [
+        api
+    ]);
+    const notifyCopied = useCallback(()=>latest.current.onCopy?.(api.getValue()), [
+        api
+    ]);
+    const lineCount = useMemo(()=>countLines(value), [
+        value
+    ]);
+    const hiddenLineCount = getHiddenLineCount(engineRows ?? lineCount, maxLines);
+    const maxHeight = isClamped(hiddenLineCount, isExpanded) ? maxLines * ROW_HEIGHT + VERTICAL_PADDING : null;
+    const resolvedSize = size ?? 'sm';
+    const frameValue = useMemo(()=>({
+            size: resolvedSize,
+            getCode,
+            notifyCopied,
+            wrapLines,
+            setWrapLines,
+            isFullscreen,
+            setIsFullscreen,
+            maxLines,
+            isExpanded,
+            setIsExpanded,
+            hiddenLineCount
+        }), [
+        resolvedSize,
+        getCode,
+        notifyCopied,
+        wrapLines,
+        setWrapLines,
+        isFullscreen,
+        maxLines,
+        isExpanded,
+        hiddenLineCount
+    ]);
+    const options = useMemo(()=>({
+            value,
+            documentId,
+            language,
+            readOnly,
+            wrapLines,
+            startingLineNumber,
+            lines,
+            folds,
+            adapter,
+            original,
+            schema,
+            completions,
+            diagnostics,
+            testId,
+            cspNonce,
+            maxHeight
+        }), [
+        value,
+        documentId,
+        language,
+        readOnly,
+        wrapLines,
+        startingLineNumber,
+        lines,
+        folds,
+        adapter,
+        original,
+        schema,
+        completions,
+        diagnostics,
+        testId,
+        cspNonce,
+        maxHeight
+    ]);
+    const editorContext = useMemo(()=>({
+            options,
+            callbacks,
+            setHandle,
+            api
+        }), [
+        options,
+        callbacks,
+        setHandle,
+        api
+    ]);
+    return /*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx(CodeSnippetFrameContext.Provider, {
+            value: frameValue,
+            children: /*#__PURE__*/ jsx(CodeEditorContext.Provider, {
+                value: editorContext,
+                children: /*#__PURE__*/ jsxs(CodeSnippetFrame, {
+                    ...props,
+                    ref: ref,
+                    "data-slot": "code-editor",
+                    "data-testid": testId,
+                    className: cn(codeSnippetRootVariants({
+                        size
+                    }), 'focus-within:ring-focus-primary focus-within:ring-2', className),
+                    isFullscreen: isFullscreen,
+                    setIsFullscreen: setIsFullscreen,
+                    children: [
+                        children,
+                        maxLines > 0 && !hasExplicitShowMoreButton(children) && /*#__PURE__*/ jsx(CodeSnippetShowMoreButton, {})
+                    ]
+                })
+            })
+        })
+    });
+};
+CodeEditorRoot.displayName = 'CodeEditorRoot';
+export { CodeEditorRoot };

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

@@ -0,0 +1,21 @@
+/** `CodeEditorContent` wrapper: fills the root's flex column (fullscreen) and clips by height. */
+export declare const codeEditorContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Element CodeMirror mounts into; `.cm-editor` fills it in the fullscreen column. */
+export declare const codeEditorHostVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Static text shown until the engine chunk resolves: CodeSnippet's 20px rows and `py-8`. */
+export declare const codeEditorFallbackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Gutter group of the fallback: the columns below, then the 8px gap the editor leaves. */
+export declare const codeEditorFallbackGuttersVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Fallback gutter columns, same widths as the engine gutters so nothing shifts when the editor
+ * mounts (spec §7.2): colour stick, line numbers, fold toggles (16px + 4px padding), prefixes.
+ */
+export declare const codeEditorFallbackGutterVariants: (props?: ({
+    column?: "folds" | "lineNumbers" | "prefix" | "stick" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const codeEditorFallbackCodeVariants: (props?: ({
+    hasGutter?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const codeEditorFallbackLineVariants: (props?: ({
+    wrapLines?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/CodeEditor/classes.js

@@ -0,0 +1,41 @@
+import { cva } from "class-variance-authority";
+const codeEditorContentVariants = cva('relative flex-1 min-h-0');
+const codeEditorHostVariants = cva('h-full [&>.cm-editor]:h-full');
+const codeEditorFallbackVariants = cva('m-0 flex overflow-hidden py-8 font-mono');
+const codeEditorFallbackGuttersVariants = cva('mr-8 flex shrink-0 select-none');
+const codeEditorFallbackGutterVariants = cva('flex shrink-0 flex-col', {
+    variants: {
+        column: {
+            stick: 'border-l-2 border-transparent pl-12',
+            lineNumbers: 'px-8 text-right text-text-secondary',
+            folds: 'w-24',
+            prefix: 'px-8 text-center'
+        }
+    },
+    defaultVariants: {
+        column: 'lineNumbers'
+    }
+});
+const codeEditorFallbackCodeVariants = cva('flex min-w-0 flex-1 flex-col pr-12', {
+    variants: {
+        hasGutter: {
+            true: '',
+            false: 'pl-12'
+        }
+    },
+    defaultVariants: {
+        hasGutter: false
+    }
+});
+const codeEditorFallbackLineVariants = cva('block min-h-lh leading-sm', {
+    variants: {
+        wrapLines: {
+            true: 'whitespace-pre-wrap break-all',
+            false: 'whitespace-pre'
+        }
+    },
+    defaultVariants: {
+        wrapLines: false
+    }
+});
+export { codeEditorContentVariants, codeEditorFallbackCodeVariants, codeEditorFallbackGutterVariants, codeEditorFallbackGuttersVariants, codeEditorFallbackLineVariants, codeEditorFallbackVariants, codeEditorHostVariants };

package/dist/components/CodeEditor/engine/SearchPanel.d.ts

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+import { SearchQuery } from '@codemirror/search';
+import { EditorView } from '@codemirror/view';
+export interface SearchPanelProps {
+    view: EditorView;
+    query: SearchQuery;
+    /** `null` while the query is empty or an invalid regular expression. */
+    matchCount: number | null;
+    readOnly: boolean;
+    testId: string | undefined;
+}
+/** Internal: rendered by `searchExtension` into CodeMirror's top panel through the portal registry. */
+export declare const SearchPanel: FC<SearchPanelProps>;