@carbon/ai-chat-components 0.5.0 → 0.6.0-rc.1

package/es/components/code-snippet/src/codemirror/marker-utils.js

@@ -0,0 +1,183 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { EditorView } from '@codemirror/view';
+import ChevronDown16 from '@carbon/icons/es/chevron--down/16.js';
+import { getAttributes } from '@carbon/icon-helpers';
+
+/*
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @license
+ */
+/**
+ * Creates a Carbon Design System styled fold marker for CodeMirror's foldGutter.
+ *
+ * This function returns a `markerDOM` function that can be used with CodeMirror's
+ * `foldGutter()` extension to display Carbon's chevron icon as fold indicators.
+ * The markers include proper accessibility attributes and keyboard support.
+ *
+ * **Note:** This function only provides the fold marker DOM. You must also include
+ * `createCarbonTheme()` to get the proper styling (icon size, rotation, focus states).
+ *
+ * @example Basic usage
+ * ```typescript
+ * import { EditorView } from 'codemirror';
+ * import { foldGutter } from '@codemirror/view';
+ * import { createCarbonTheme } from '@carbon/ai-chat-components/es/globals/codemirror/theme';
+ * import { createCarbonFoldMarker } from '@carbon/ai-chat-components/es/globals/codemirror/marker-utils';
+ * import { javascript } from '@codemirror/lang-javascript';
+ *
+ * const editor = new EditorView({
+ *   parent: document.body,
+ *   extensions: [
+ *     createCarbonTheme(),           // Required for styling the fold markers
+ *     foldGutter({
+ *       markerDOM: createCarbonFoldMarker()
+ *     }),
+ *     javascript(),
+ *   ],
+ * });
+ * ```
+ *
+ * @example Custom accessibility labels
+ * ```typescript
+ * import { foldGutter } from '@codemirror/view';
+ * import { createCarbonFoldMarker } from '@carbon/ai-chat-components/es/globals/codemirror/marker-utils';
+ *
+ * foldGutter({
+ *   markerDOM: createCarbonFoldMarker({
+ *     collapseLabel: 'Collapse this section',
+ *     expandLabel: 'Expand this section',
+ *   })
+ * })
+ * ```
+ *
+ * @example Keyboard accessibility
+ * The fold markers are keyboard accessible by default:
+ * - Tab to focus the marker
+ * - Enter or Space to toggle fold/unfold
+ * - Visual focus indicator matches Carbon Design System
+ *
+ * To enable keyboard support, you also need to add the keyboard event handler
+ * using the `carbonFoldMarkerKeyHandler()` utility:
+ * ```typescript
+ * import { EditorView } from 'codemirror';
+ * import { carbonFoldMarkerKeyHandler } from '@carbon/ai-chat-components/es/globals/codemirror/marker-utils';
+ *
+ * const editor = new EditorView({
+ *   parent: document.body,
+ *   extensions: [
+ *     // ... other extensions
+ *     carbonFoldMarkerKeyHandler(),
+ *   ],
+ * });
+ * ```
+ *
+ * @param options - Configuration options for labels
+ * @returns A markerDOM function for use with foldGutter()
+ */
+function createCarbonFoldMarker(options = {}) {
+    const { collapseLabel = "Collapse code block", expandLabel = "Expand code block", } = options;
+    return (open) => {
+        // Manually create SVG to avoid toSVG's attribute issues
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        const attrs = getAttributes(ChevronDown16.attrs);
+        // Only set attributes that have valid values
+        Object.entries(attrs).forEach(([key, value]) => {
+            if (value !== undefined &&
+                value !== "undefined" &&
+                value !== null &&
+                String(value) !== "undefined") {
+                svg.setAttribute(key, String(value));
+            }
+        });
+        // Add the path element
+        ChevronDown16.content.forEach((item) => {
+            if (item.elem === "path") {
+                const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                Object.entries(item.attrs).forEach(([key, value]) => {
+                    path.setAttribute(key, String(value));
+                });
+                svg.appendChild(path);
+            }
+        });
+        // Accessibility attributes - all styling is in theme.ts for CSP compliance
+        svg.setAttribute("role", "button");
+        svg.setAttribute("aria-label", open ? collapseLabel : expandLabel);
+        svg.setAttribute("aria-expanded", String(open));
+        svg.setAttribute("tabindex", "0");
+        return svg;
+    };
+}
+/**
+ * Creates a keyboard event handler for Carbon fold markers.
+ *
+ * This extension enables keyboard accessibility for fold markers created with
+ * `createCarbonFoldMarker()`. It allows users to toggle code folding by pressing
+ * Enter or Space when a fold marker is focused.
+ *
+ * @example Complete setup with keyboard support
+ * ```typescript
+ * import { EditorView } from 'codemirror';
+ * import { foldGutter, lineNumbers } from '@codemirror/view';
+ * import { createCarbonTheme } from '@carbon/ai-chat-components/es/globals/codemirror/theme';
+ * import {
+ *   createCarbonFoldMarker,
+ *   carbonFoldMarkerKeyHandler
+ * } from '@carbon/ai-chat-components/es/globals/codemirror/marker-utils';
+ * import { javascript } from '@codemirror/lang-javascript';
+ *
+ * const editor = new EditorView({
+ *   parent: document.body,
+ *   extensions: [
+ *     createCarbonTheme(),
+ *     lineNumbers(),
+ *     foldGutter({
+ *       markerDOM: createCarbonFoldMarker()
+ *     }),
+ *     carbonFoldMarkerKeyHandler(),  // Enable keyboard support
+ *     javascript(),
+ *   ],
+ * });
+ * ```
+ *
+ * @example Keyboard interaction
+ * - **Tab**: Focus the fold marker
+ * - **Enter** or **Space**: Toggle fold/unfold
+ * - **Tab** again: Move to next focusable element
+ *
+ * @returns CodeMirror extension for keyboard event handling
+ */
+function carbonFoldMarkerKeyHandler() {
+    return EditorView.domEventHandlers({
+        keydown(event, _view) {
+            const target = event.target;
+            // Check if the target is a fold gutter marker
+            if (target.tagName === "svg" &&
+                target.getAttribute("role") === "button" &&
+                target.hasAttribute("aria-expanded") &&
+                (event.key === "Enter" || event.key === " ")) {
+                event.preventDefault();
+                // Trigger a mouse event to activate CodeMirror's fold handler
+                const mouseEvent = new MouseEvent("mousedown", {
+                    bubbles: true,
+                    cancelable: true,
+                });
+                target.dispatchEvent(mouseEvent);
+                return true;
+            }
+            return false;
+        },
+    });
+}
+
+export { carbonFoldMarkerKeyHandler, createCarbonFoldMarker };
+//# sourceMappingURL=marker-utils.js.map

package/es/components/code-snippet/src/codemirror/marker-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker-utils.js","sources":["../../../../../src/components/code-snippet/src/codemirror/marker-utils.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es/components/code-snippet/src/codemirror/theme.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Creates a CodeMirror theme that uses Carbon Design System CSS custom properties.
+ * This allows the editor to automatically adapt to Carbon's light/dark themes.
+ *
+ * @example
+ * ```typescript
+ * import { EditorView } from 'codemirror';
+ * import { createCarbonTheme, createCarbonHighlightStyle } from '@carbon/ai-chat-components/es/globals/codemirror/theme';
+ * import { createCarbonFoldMarker, carbonFoldMarkerKeyHandler } from '@carbon/ai-chat-components/es/globals/codemirror/marker-utils';
+ * import { lineNumbers, foldGutter } from '@codemirror/view';
+ * import { javascript } from '@codemirror/lang-javascript';
+ *
+ * const editor = new EditorView({
+ *   parent: document.body,
+ *   extensions: [
+ *     createCarbonTheme(),
+ *     createCarbonHighlightStyle(),
+ *     lineNumbers(),
+ *     foldGutter({ markerDOM: createCarbonFoldMarker() }),
+ *     carbonFoldMarkerKeyHandler(),  // Enable keyboard support for fold markers
+ *     javascript(),
+ *   ],
+ * });
+ * ```
+ *
+ * @returns CodeMirror theme extension
+ */
+export declare function createCarbonTheme(): import("@codemirror/state").Extension;
+/**
+ * Creates syntax highlighting styles using Carbon Design System CSS custom properties.
+ * This provides color theming for code syntax that adapts to Carbon's light/dark themes.
+ *
+ * All syntax colors are defined using CSS custom properties (--cds-syntax-*) that can be
+ * customized via your Carbon theme. Fallback values mirror VSCode Light defaults.
+ *
+ * @example
+ * ```typescript
+ * import { EditorView } from 'codemirror';
+ * import { createCarbonTheme, createCarbonHighlightStyle } from '@carbon/ai-chat-components/es/globals/codemirror/theme';
+ * import { python } from '@codemirror/lang-python';
+ *
+ * const editor = new EditorView({
+ *   parent: document.body,
+ *   extensions: [
+ *     createCarbonTheme(),
+ *     createCarbonHighlightStyle(),
+ *     python(),
+ *   ],
+ * });
+ * ```
+ *
+ * @returns CodeMirror syntax highlighting extension
+ */
+export declare function createCarbonHighlightStyle(): import("@codemirror/state").Extension;

package/es/components/code-snippet/src/codemirror/theme.js

@@ -0,0 +1,320 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { EditorView } from 'codemirror';
+import { syntaxHighlighting, HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */
+/**
+ * Creates a CodeMirror theme that uses Carbon Design System CSS custom properties.
+ * This allows the editor to automatically adapt to Carbon's light/dark themes.
+ *
+ * @example
+ * ```typescript
+ * import { EditorView } from 'codemirror';
+ * import { createCarbonTheme, createCarbonHighlightStyle } from '@carbon/ai-chat-components/es/globals/codemirror/theme';
+ * import { createCarbonFoldMarker, carbonFoldMarkerKeyHandler } from '@carbon/ai-chat-components/es/globals/codemirror/marker-utils';
+ * import { lineNumbers, foldGutter } from '@codemirror/view';
+ * import { javascript } from '@codemirror/lang-javascript';
+ *
+ * const editor = new EditorView({
+ *   parent: document.body,
+ *   extensions: [
+ *     createCarbonTheme(),
+ *     createCarbonHighlightStyle(),
+ *     lineNumbers(),
+ *     foldGutter({ markerDOM: createCarbonFoldMarker() }),
+ *     carbonFoldMarkerKeyHandler(),  // Enable keyboard support for fold markers
+ *     javascript(),
+ *   ],
+ * });
+ * ```
+ *
+ * @returns CodeMirror theme extension
+ */
+function createCarbonTheme() {
+    return EditorView.theme({
+        ".cm-editor": {
+            fontFamily: "var(--cds-code-01-font-family, 'IBM Plex Mono', monospace)",
+            fontSize: "var(--cds-code-01-font-size, 0.875rem)",
+            fontWeight: "var(--cds-code-01-font-weight, 400)",
+            letterSpacing: "var(--cds-code-01-letter-spacing, 0.16px)",
+            lineHeight: "var(--cds-code-01-line-height, 1.5)",
+            background: "var(--cds-layer, #ffffff)",
+            color: "var(--cds-text-primary, #161616)",
+        },
+        // Cursor / caret
+        ".cm-cursor, .cm-dropCursor": {
+            borderLeftColor: "var(--cds-text-primary, #161616)",
+        },
+        // Gutters
+        ".cm-gutters": {
+            backgroundColor: "var(--cds-background, #ffffff)",
+            color: "var(--cds-text-helper, #6f6f6f)",
+            border: "none",
+        },
+        ".cm-gutterElement .cm-lineNumbers": {
+            textAlign: "end",
+        },
+        ".cm-foldGutter": {
+            paddingInlineEnd: "0.25rem",
+        },
+        // Editor content
+        ".cm-content": {
+            flexBasis: "0 !important",
+            caretColor: "var(--cds-text-primary, #161616)",
+        },
+        ".cm-scroller": {
+            maxBlockSize: "var(--cds-snippet-max-height, 16rem)",
+            minBlockSize: "var(--cds-snippet-min-height, 3rem)",
+        },
+        // Fold gutter / caret icons
+        ".cm-foldGutter .cm-gutterElement": {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            width: "16px",
+        },
+        ".cm-foldGutter svg": {
+            width: "12px",
+            height: "12px",
+            cursor: "pointer",
+            transition: "transform 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)",
+            fill: "var(--cds-icon-primary, #161616)",
+        },
+        ".cm-foldGutter svg[aria-expanded='true']": {
+            transform: "rotate(0deg)",
+        },
+        ".cm-foldGutter svg[aria-expanded='false']": {
+            transform: "rotate(-90deg)",
+        },
+        ".cm-foldGutter svg:focus": {
+            outline: "2px solid var(--cds-focus, #0f62fe)",
+        },
+        // Search / selection highlights
+        ".cm-searchMatch": {
+            backgroundColor: "var(--cds-highlight, #d0e2ff)",
+        },
+        ".cm-searchMatch-selected": {
+            backgroundColor: "var(--cds-highlight, #d0e2ff)",
+        },
+        ".cm-selectionBackground": {
+            backgroundColor: "var(--cds-highlight, #d0e2ff)",
+        },
+        ".cm-selectionMatch": {
+            backgroundColor: "var(--cds-highlight, #d0e2ff)",
+        },
+        "&.cm-focused .cm-selectionBackground": {
+            backgroundColor: "var(--cds-highlight, #d0e2ff) !important",
+        },
+        "&.cm-focused .cm-selectionMatch": {
+            backgroundColor: "var(--cds-highlight, #d0e2ff) !important",
+        },
+        // Native selection fallback
+        ".cm-content ::selection": {
+            backgroundColor: "var(--cds-highlight, #d0e2ff) !important",
+        },
+        "&.cm-focused .cm-content ::selection": {
+            backgroundColor: "var(--cds-highlight, #d0e2ff) !important",
+        },
+    });
+}
+/**
+ * Creates syntax highlighting styles using Carbon Design System CSS custom properties.
+ * This provides color theming for code syntax that adapts to Carbon's light/dark themes.
+ *
+ * All syntax colors are defined using CSS custom properties (--cds-syntax-*) that can be
+ * customized via your Carbon theme. Fallback values mirror VSCode Light defaults.
+ *
+ * @example
+ * ```typescript
+ * import { EditorView } from 'codemirror';
+ * import { createCarbonTheme, createCarbonHighlightStyle } from '@carbon/ai-chat-components/es/globals/codemirror/theme';
+ * import { python } from '@codemirror/lang-python';
+ *
+ * const editor = new EditorView({
+ *   parent: document.body,
+ *   extensions: [
+ *     createCarbonTheme(),
+ *     createCarbonHighlightStyle(),
+ *     python(),
+ *   ],
+ * });
+ * ```
+ *
+ * @returns CodeMirror syntax highlighting extension
+ */
+function createCarbonHighlightStyle() {
+    return syntaxHighlighting(carbonHighlightStyle);
+}
+const TAG_REGISTRY = tags;
+const toVarName = (name) => name
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/([A-Za-z])([0-9])/g, "$1-$2")
+    .toLowerCase();
+const colorVar = (token) => `var(--cds-syntax-${token}, var(--cds-text-primary, #161616))`;
+const resolveTag = (tagName) => TAG_REGISTRY[tagName];
+const BASE_TAG_NAMES = [
+    "comment",
+    "lineComment",
+    "blockComment",
+    "docComment",
+    "name",
+    "variableName",
+    "typeName",
+    "tagName",
+    "propertyName",
+    "attributeName",
+    "className",
+    "labelName",
+    "namespace",
+    "macroName",
+    "literal",
+    "string",
+    "docString",
+    "character",
+    "attributeValue",
+    "number",
+    "integer",
+    "float",
+    "bool",
+    "regexp",
+    "escape",
+    "color",
+    "url",
+    "keyword",
+    "self",
+    "null",
+    "atom",
+    "unit",
+    "modifier",
+    "operatorKeyword",
+    "controlKeyword",
+    "definitionKeyword",
+    "moduleKeyword",
+    "operator",
+    "derefOperator",
+    "arithmeticOperator",
+    "logicOperator",
+    "bitwiseOperator",
+    "compareOperator",
+    "updateOperator",
+    "definitionOperator",
+    "typeOperator",
+    "controlOperator",
+    "punctuation",
+    "separator",
+    "bracket",
+    "angleBracket",
+    "squareBracket",
+    "paren",
+    "brace",
+    "content",
+    "heading",
+    "heading1",
+    "heading2",
+    "heading3",
+    "heading4",
+    "heading5",
+    "heading6",
+    "contentSeparator",
+    "list",
+    "quote",
+    "emphasis",
+    "strong",
+    "link",
+    "monospace",
+    "strikethrough",
+    "invalid",
+    "meta",
+    "documentMeta",
+    "annotation",
+    "processingInstruction",
+];
+const HEADING_TAG_NAMES = [
+    "heading",
+    "heading1",
+    "heading2",
+    "heading3",
+    "heading4",
+    "heading5",
+    "heading6",
+];
+const manualConfigs = [
+    ...HEADING_TAG_NAMES.map((tagName) => ({
+        tagName,
+        style: {
+            fontWeight: "bold",
+            textDecoration: "underline",
+        },
+    })),
+    { tagName: "link", style: { textDecoration: "underline" } },
+    { tagName: "emphasis", style: { fontStyle: "italic" } },
+    { tagName: "strong", style: { fontWeight: "bold" } },
+    { tagName: "strikethrough", style: { textDecoration: "line-through" } },
+];
+const MANUAL_TAG_NAMES = new Set(manualConfigs.map(({ tagName }) => tagName));
+const manualTokenStyles = manualConfigs
+    .map(({ tagName, style }) => {
+    const tag = resolveTag(tagName);
+    if (!tag) {
+        return null;
+    }
+    return {
+        tag,
+        color: colorVar(toVarName(tagName)),
+        ...style,
+    };
+})
+    .filter(Boolean);
+const autoTagStyles = BASE_TAG_NAMES.filter((tagName) => !MANUAL_TAG_NAMES.has(tagName))
+    .map((tagName) => {
+    const tag = resolveTag(tagName);
+    if (!tag) {
+        return null;
+    }
+    return {
+        tag,
+        color: colorVar(toVarName(tagName)),
+    };
+})
+    .filter(Boolean);
+const modifierTokenStyles = [
+    { tag: tags.definition(tags.variableName), color: colorVar("definition") },
+    { tag: tags.definition(tags.propertyName), color: colorVar("definition") },
+    { tag: tags.definition(tags.typeName), color: colorVar("definition") },
+    { tag: tags.definition(tags.className), color: colorVar("definition") },
+    { tag: tags.constant(tags.variableName), color: colorVar("constant") },
+    { tag: tags.constant(tags.propertyName), color: colorVar("constant") },
+    { tag: tags.constant(tags.typeName), color: colorVar("constant") },
+    { tag: tags.function(tags.variableName), color: colorVar("function") },
+    { tag: tags.function(tags.propertyName), color: colorVar("function") },
+    { tag: tags.function(tags.typeName), color: colorVar("function") },
+    { tag: tags.standard(tags.variableName), color: colorVar("standard") },
+    { tag: tags.standard(tags.propertyName), color: colorVar("standard") },
+    { tag: tags.local(tags.variableName), color: colorVar("local") },
+    { tag: tags.local(tags.propertyName), color: colorVar("local") },
+    { tag: tags.special(tags.variableName), color: colorVar("special") },
+    { tag: tags.special(tags.propertyName), color: colorVar("special") },
+    { tag: tags.special(tags.string), color: colorVar("special-string") },
+];
+const carbonHighlightStyle = HighlightStyle.define([
+    ...modifierTokenStyles,
+    ...manualTokenStyles,
+    ...autoTagStyles,
+]);
+
+export { createCarbonHighlightStyle, createCarbonTheme };
+//# sourceMappingURL=theme.js.map

package/es/components/code-snippet/src/codemirror/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../../../../src/components/code-snippet/src/codemirror/theme.ts"],"sourcesContent":[null],"names":["t"],"mappings":"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"}

package/es/components/code-snippet/src/dom-utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Observes resize of the given element with the provided resize observer.
+ * Returns an object with a release() method to clean up the observer.
+ */
+export declare const observeResize: (observer: ResizeObserver, elem: Element) => {
+    release(): null;
+} | null;
+/**
+ * Gets scroll and dimension information from a code reference element.
+ */
+export declare function getCodeRefDimensions(ref: Element): {
+    horizontalOverflow: boolean;
+    codeClientWidth: number;
+    codeScrollWidth: number;
+    codeScrollLeft: number;
+};
+/**
+ * Extracts text content from child nodes of an element without trimming so callers can decide how to normalize whitespace.
+ */
+export declare function extractTextContent(element: Element): string;
+/**
+ * Extracts text content from a slot's assigned nodes without trimming so streaming whitespace is preserved.
+ */
+export declare function extractSlotContent(slot: HTMLSlotElement): string;

package/es/components/code-snippet/src/dom-utils.js

@@ -0,0 +1,63 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */
+/**
+ * Observes resize of the given element with the provided resize observer.
+ * Returns an object with a release() method to clean up the observer.
+ */
+const observeResize = (observer, elem) => {
+    if (!elem) {
+        return null;
+    }
+    observer.observe(elem);
+    return {
+        release() {
+            observer.unobserve(elem);
+            return null;
+        },
+    };
+};
+/**
+ * Gets scroll and dimension information from a code reference element.
+ */
+function getCodeRefDimensions(ref) {
+    const { clientWidth: codeClientWidth, scrollLeft: codeScrollLeft, scrollWidth: codeScrollWidth, } = ref;
+    return {
+        horizontalOverflow: codeScrollWidth > codeClientWidth,
+        codeClientWidth,
+        codeScrollWidth,
+        codeScrollLeft,
+    };
+}
+/**
+ * Extracts text content from child nodes of an element without trimming so callers can decide how to normalize whitespace.
+ */
+function extractTextContent(element) {
+    const textContent = Array.from(element.childNodes)
+        .filter((node) => node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE)
+        .map((node) => node.textContent || "")
+        .join("");
+    return textContent;
+}
+/**
+ * Extracts text content from a slot's assigned nodes without trimming so streaming whitespace is preserved.
+ */
+function extractSlotContent(slot) {
+    const nodes = slot.assignedNodes({ flatten: true });
+    return nodes.map((node) => node.textContent || "").join("");
+}
+
+export { extractSlotContent, extractTextContent, getCodeRefDimensions, observeResize };
+//# sourceMappingURL=dom-utils.js.map

package/es/components/code-snippet/src/dom-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-utils.js","sources":["../../../../src/components/code-snippet/src/dom-utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;;AAOG;AAEH;;;AAGG;MACU,aAAa,GAAG,CAC3B,QAAwB,EACxB,IAAa,KACiB;IAC9B,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,IAAI;IACb;AACA,IAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;IACtB,OAAO;QACL,OAAO,GAAA;AACL,YAAA,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC;AACxB,YAAA,OAAO,IAAI;QACb,CAAC;KACF;AACH;AAEA;;AAEG;AACG,SAAU,oBAAoB,CAAC,GAAY,EAAA;AAC/C,IAAA,MAAM,EACJ,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,WAAW,EAAE,eAAe,GAC7B,GAAG,GAAkB;IAEtB,OAAO;QACL,kBAAkB,EAAE,eAAe,GAAG,eAAe;QACrD,eAAe;QACf,eAAe;QACf,cAAc;KACf;AACH;AAEA;;AAEG;AACG,SAAU,kBAAkB,CAAC,OAAgB,EAAA;IACjD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU;SAC9C,MAAM,CACL,CAAC,IAAI,KACH,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;SAE1E,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,IAAI,EAAE;SACpC,IAAI,CAAC,EAAE,CAAC;AAEX,IAAA,OAAO,WAAW;AACpB;AAEA;;AAEG;AACG,SAAU,kBAAkB,CAAC,IAAqB,EAAA;AACtD,IAAA,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IACnD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAC7D;;;;"}

package/es/components/code-snippet/src/formatters.d.ts

@@ -0,0 +1,4 @@
+export type LineCountFormatter = ({ count }: {
+    count: number;
+}) => string;
+export declare const defaultLineCountText: LineCountFormatter;