@arcgis/coding-components 5.0.0-next.39 → 5.0.0-next.41

package/dist/docs/api.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-10-31T04:38:11",
+  "timestamp": "2025-11-02T04:36:00",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "5.0.0-next.39",
+    "version": "5.0.0-next.41",
     "typescriptVersion": "5.8.3"
   },
   "schemaVersion": "1.0.0",
@@ -983,6 +983,148 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/code-viewer/code-viewer.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "name": "ArcgisCodeViewer",
+          "tagName": "arcgis-code-viewer",
+          "description": "A code viewer component for displaying code snippets.\nSupports syntax highlighting for various programming languages, include arcade and arcgis-sql-expression.",
+          "demos": [
+            {
+              "description": "Docs",
+              "url": "https://developers.arcgis.com/javascript/latest/references/coding-components/arcgis-code-viewer/"
+            }
+          ],
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```tsx\n<arcgis-code-viewer language=\"javascript\">\nfunction greet() {\n  console.log(\"Hello, World!\");\n}\n</arcgis-code-viewer>\n```"
+            },
+            {
+              "name": "example",
+              "text": "HTML snippets (preserve markup)\n```tsx\n<arcgis-code-viewer language=\"html\">\n<template>\n<div class=\"greeting\"><span>Hello</span> World!</div>\n</template>\n</arcgis-code-viewer>\n```\nWhen `language=\"html\"`, the component will attempt to preserve your original markup instead of reducing it\nto plain text. For safety and to prevent the markup from rendering in-page, wrap the snippet in a `<template>`.\nIf no `<template>` is provided, the component falls back to concatenating the `outerHTML` of element nodes and the\nraw text of text nodes. Script contents are treated as inert string data; they are never executed."
+            },
+            {
+              "name": "internal"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "@arcgis/lumina"
+          },
+          "pascalCaseName": "ArcgisCodeViewer",
+          "importPath": "components/arcgis-code-viewer",
+          "members": [
+            {
+              "kind": "method",
+              "name": "componentOnReady",
+              "return": {
+                "type": {
+                  "text": "Promise<void>",
+                  "references": [
+                    {
+                      "module": "lib/lib.es5.d.ts",
+                      "name": "Promise",
+                      "package": "typescript",
+                      "start": 0,
+                      "end": 7
+                    }
+                  ]
+                }
+              },
+              "description": "Create a promise that resolves once component is fully loaded.",
+              "signature": "(): Promise<void>",
+              "async": true,
+              "inheritedFrom": {
+                "name": "LitElement",
+                "package": "@arcgis/lumina"
+              },
+              "docsTags": [
+                {
+                  "name": "example",
+                  "text": "```js\nconst arcgisCodeViewer = document.querySelector(\"arcgis-code-viewer\");\ndocument.body.append(arcgisCodeViewer);\nawait arcgisCodeViewer.componentOnReady();\nconsole.log(\"arcgis-code-viewer is ready to go!\");\n```"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "language",
+              "description": "The language for the component.\nCurrently supported language: arcade, arcgis-sql-expression, plus all the following languages found in monaco-editor's repo:\nhttps://github.com/microsoft/monaco-editor/tree/main/src/basic-languages.\n\nNote: The number of supported languages is limited in cdn builds to reduce package size. In cdn builds,\nonly the following languages are supported: css, html, javascript, typescript, and arcade, arcgis-sql-expression.",
+              "type": {
+                "text": "string",
+                "values": [
+                  {
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"arcade\"",
+              "attribute": "language"
+            },
+            {
+              "kind": "field",
+              "name": "round",
+              "description": "When `true`, adds a round style to the component.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "false",
+              "attribute": "round",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "language",
+              "description": "The language for the component.\nCurrently supported language: arcade, arcgis-sql-expression, plus all the following languages found in monaco-editor's repo:\nhttps://github.com/microsoft/monaco-editor/tree/main/src/basic-languages.\n\nNote: The number of supported languages is limited in cdn builds to reduce package size. In cdn builds,\nonly the following languages are supported: css, html, javascript, typescript, and arcade, arcgis-sql-expression.",
+              "type": {
+                "text": "string",
+                "values": [
+                  {
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"arcade\"",
+              "fieldName": "language"
+            },
+            {
+              "name": "round",
+              "description": "When `true`, adds a round style to the component.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "false",
+              "fieldName": "round"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "arcgis-code-viewer",
+          "declaration": {
+            "name": "ArcgisCodeViewer",
+            "module": "src/components/code-viewer/code-viewer.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/sql-expression-editor/sql-expression-editor.tsx",

package/dist/docs/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-10-31T04:38:11",
+  "timestamp": "2025-11-02T04:36:00",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "5.0.0-next.39",
+    "version": "5.0.0-next.41",
     "typescriptVersion": "5.8.3"
   },
   "components": [
@@ -943,6 +943,120 @@
       "parts": [],
       "listeners": []
     },
+    {
+      "filePath": "src/components/code-viewer/code-viewer.tsx",
+      "tag": "arcgis-code-viewer",
+      "overview": "",
+      "readme": "",
+      "usage": {},
+      "docs": "A code viewer component for displaying code snippets.\nSupports syntax highlighting for various programming languages, include arcade and arcgis-sql-expression.",
+      "docsTags": [
+        {
+          "name": "example",
+          "text": "```tsx\n<arcgis-code-viewer language=\"javascript\">\nfunction greet() {\n  console.log(\"Hello, World!\");\n}\n</arcgis-code-viewer>\n```"
+        },
+        {
+          "name": "example",
+          "text": "HTML snippets (preserve markup)\n```tsx\n<arcgis-code-viewer language=\"html\">\n<template>\n<div class=\"greeting\"><span>Hello</span> World!</div>\n</template>\n</arcgis-code-viewer>\n```\nWhen `language=\"html\"`, the component will attempt to preserve your original markup instead of reducing it\nto plain text. For safety and to prevent the markup from rendering in-page, wrap the snippet in a `<template>`.\nIf no `<template>` is provided, the component falls back to concatenating the `outerHTML` of element nodes and the\nraw text of text nodes. Script contents are treated as inert string data; they are never executed."
+        },
+        {
+          "name": "internal"
+        },
+        {
+          "name": "superclass",
+          "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {},
+      "props": [
+        {
+          "name": "language",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "language",
+          "reflectToAttr": false,
+          "docs": "The language for the component.\nCurrently supported language: arcade, arcgis-sql-expression, plus all the following languages found in monaco-editor's repo:\nhttps://github.com/microsoft/monaco-editor/tree/main/src/basic-languages.\n\nNote: The number of supported languages is limited in cdn builds to reduce package size. In cdn builds,\nonly the following languages are supported: css, html, javascript, typescript, and arcade, arcgis-sql-expression.",
+          "docsTags": [],
+          "default": "\"arcade\"",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "round",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "round",
+          "reflectToAttr": true,
+          "docs": "When `true`, adds a round style to the component.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "componentOnReady",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<void>",
+            "parameters": [],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "componentOnReady(): Promise<void>",
+          "parameters": [],
+          "docs": "Create a promise that resolves once component is fully loaded.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst arcgisCodeViewer = document.querySelector(\"arcgis-code-viewer\");\ndocument.body.append(arcgisCodeViewer);\nawait arcgisCodeViewer.componentOnReady();\nconsole.log(\"arcgis-code-viewer is ready to go!\");\n```"
+            },
+            {
+              "name": "inheritedFrom",
+              "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}"
+            }
+          ]
+        }
+      ],
+      "events": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
     {
       "filePath": "src/components/sql-expression-editor/sql-expression-editor.tsx",
       "tag": "arcgis-sql-expression-editor",

package/dist/docs/vscode.html-custom-data.json

@@ -60,6 +60,28 @@
         }
       ]
     },
+    {
+      "name": "arcgis-code-viewer",
+      "description": "A code viewer component for displaying code snippets.\nSupports syntax highlighting for various programming languages, include arcade and arcgis-sql-expression.\n--\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.",
+      "attributes": [
+        {
+          "name": "language",
+          "description": "The language for the component.\nCurrently supported language: arcade, arcgis-sql-expression, plus all the following languages found in monaco-editor's repo:\nhttps://github.com/microsoft/monaco-editor/tree/main/src/basic-languages.\n\nNote: The number of supported languages is limited in cdn builds to reduce package size. In cdn builds,\nonly the following languages are supported: css, html, javascript, typescript, and arcade, arcgis-sql-expression.",
+          "values": []
+        },
+        {
+          "name": "round",
+          "description": "When `true`, adds a round style to the component.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://developers.arcgis.com/javascript/latest/references/coding-components/arcgis-code-viewer/"
+        }
+      ]
+    },
     {
       "name": "arcgis-sql-expression-editor",
       "description": "The SQL Expression Editor provides a familiar code editor experience for writing your own SQL expressions.\nIt supports syntax highlighting, code completion, and validation, allowing users to write SQL expressions using the\n[standardized SQL functions](https://doc.arcgis.com/en/arcgis-online/reference/sql-agol.htm) supported by ArcGIS.\n--\n\n### Events\n- **arcgisDiagnosticsChange** - Emitted when the diagnostics collection has changed.\n- **arcgisScriptChange** - Emitted when the script string has changed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.",

package/dist/docs/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@arcgis/coding-components",
-  "version": "5.0.0-next.39",
+  "version": "5.0.0-next.41",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -208,6 +208,45 @@
             ]
           }
         },
+        {
+          "name": "arcgis-code-viewer",
+          "description": "A code viewer component for displaying code snippets.\nSupports syntax highlighting for various programming languages, include arcade and arcgis-sql-expression.\n--\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.",
+          "doc-url": "https://developers.arcgis.com/javascript/latest/references/coding-components/arcgis-code-viewer/",
+          "attributes": [
+            {
+              "name": "language",
+              "description": "The language for the component.\nCurrently supported language: arcade, arcgis-sql-expression, plus all the following languages found in monaco-editor's repo:\nhttps://github.com/microsoft/monaco-editor/tree/main/src/basic-languages.\n\nNote: The number of supported languages is limited in cdn builds to reduce package size. In cdn builds,\nonly the following languages are supported: css, html, javascript, typescript, and arcade, arcgis-sql-expression.",
+              "default": "\"arcade\"",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "round",
+              "description": "When `true`, adds a round style to the component.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "language",
+                "description": "The language for the component.\nCurrently supported language: arcade, arcgis-sql-expression, plus all the following languages found in monaco-editor's repo:\nhttps://github.com/microsoft/monaco-editor/tree/main/src/basic-languages.\n\nNote: The number of supported languages is limited in cdn builds to reduce package size. In cdn builds,\nonly the following languages are supported: css, html, javascript, typescript, and arcade, arcgis-sql-expression.",
+                "type": "string"
+              },
+              {
+                "name": "round",
+                "description": "When `true`, adds a round style to the component.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "arcgis-sql-expression-editor",
           "description": "The SQL Expression Editor provides a familiar code editor experience for writing your own SQL expressions.\nIt supports syntax highlighting, code completion, and validation, allowing users to write SQL expressions using the\n[standardized SQL functions](https://doc.arcgis.com/en/arcgis-online/reference/sql-agol.htm) supported by ArcGIS.\n--\n\n### Events\n- **arcgisDiagnosticsChange** - Emitted when the diagnostics collection has changed.\n- **arcgisScriptChange** - Emitted when the script string has changed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.",

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import type { ArcgisArcadeEditor } from "./components/arcgis-arcade-editor";
 import type { ArcgisCodeEditor } from "./components/arcgis-code-editor";
+import type { ArcgisCodeViewer } from "./components/arcgis-code-viewer";
 import type { ArcgisSqlExpressionEditor } from "./components/arcgis-sql-expression-editor";
 
 export { getAssetPath, setAssetPath } from './runtime';
@@ -40,6 +41,7 @@ declare global {
   interface HTMLElementTagNameMap {
     "arcgis-arcade-editor": HTMLArcgisArcadeEditorElement;
     "arcgis-code-editor": HTMLArcgisCodeEditorElement;
+    "arcgis-code-viewer": HTMLArcgisCodeViewerElement;
     "arcgis-sql-expression-editor": HTMLArcgisSqlExpressionEditorElement;
   }
 
@@ -68,6 +70,9 @@ declare global {
     removeEventListener<K extends keyof HTMLArcgisCodeEditorElementEventMap>(type: K, listener: (this: HTMLArcgisCodeEditorElement, ev: ArcgisCodeEditorCustomEvent<HTMLArcgisCodeEditorElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
     removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
     removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+  }
+  interface HTMLArcgisCodeViewerElement extends ArcgisCodeViewer {
+
   }
   interface HTMLArcgisSqlExpressionEditorElementEventMap {
     "arcgisDiagnosticsChange": ArcgisSqlExpressionEditor["arcgisDiagnosticsChange"]["detail"];

package/dist/index.js

@@ -3,7 +3,7 @@ import { a as c } from "./chunks/arcade-defaults.js";
 import { s as p } from "./chunks/sql-expr-defaults.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.39 */
+v5.0.0-next.41 */
 const a = s, r = t;
 export {
   c as arcade,

package/dist/loader.js

@@ -1,19 +1,20 @@
 import { r as e } from "./chunks/runtime.js";
-import { makeDefineCustomElements as s } from "@arcgis/lumina";
+import { makeDefineCustomElements as i } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.39 */
-const a = s(e, {
+v5.0.0-next.41 */
+const r = i(e, {
   "arcgis-arcade-coding-assistant": [() => import("./components/arcgis-arcade-coding-assistant/customElement.js"), "appVersion,assistantsEnabled,closed,closePanel:,editorRef:,feedbackServiceUrl,helpBase,insertText:,layer,portalUrl,serviceUrl;destroy"],
   "arcgis-arcade-editor": [() => import("./components/arcgis-arcade-editor/customElement.js"), "arcadeAssistant:,customPanels:,editorInstance:,editorOptions:,hideDocumentationActions,hideSideBar,openedSidePanel:,profile:,script,sideActionBarExpanded,snippets:,suggestions:,testData:;getEditorInstance,getScript,getTestResult,setFocus"],
   "arcgis-arcade-results": [() => import("./components/arcgis-arcade-results/customElement.js"), "consoleLogs:,loading,openedResultPanel,result:"],
   "arcgis-arcade-suggestions": [() => import("./components/arcgis-arcade-suggestions/customElement.js"), "closed,suggestions:"],
   "arcgis-code-editor": [() => import("./components/arcgis-code-editor/customElement.js"), "editorInstance:,editorOptions:,language,modelId:,value;getEditorInstance,getValue,insertSnippet,insertText,setFocus,setValue"],
+  "arcgis-code-viewer": [() => import("./components/arcgis-code-viewer/customElement.js"), "language,round"],
   "arcgis-editor-variables": [() => import("./components/arcgis-editor-variables/customElement.js"), "closed,loading,modelId,variable:"],
   "arcgis-language-api-panel": [() => import("./components/arcgis-language-api-panel/customElement.js"), "apiLibrary:,closed,hideDocumentationActions,languageId,loading"],
   "arcgis-sql-expression-editor": [() => import("./components/arcgis-sql-expression-editor/customElement.js"), "hideSideBar,profile:,script"],
   "arcgis-sql-expression-fields": [() => import("./components/arcgis-sql-expression-fields/customElement.js"), "loading,modelId"]
 });
 export {
-  a as defineCustomElements
+  r as defineCustomElements
 };

package/dist/monacoStyles.js

@@ -1,6 +1,6 @@
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.39 */
+v5.0.0-next.41 */
 const A = `/*!-----------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Version: 0.52.2(404545bded1df6ffa41ea0af4e8ddb219018c6c1)

package/dist/types/lumina.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="../index.d.ts" />
 import type { ArcgisArcadeEditor } from "../components/arcgis-arcade-editor";
 import type { ArcgisCodeEditor } from "../components/arcgis-code-editor";
+import type { ArcgisCodeViewer } from "../components/arcgis-code-viewer";
 import type { ArcgisSqlExpressionEditor } from "../components/arcgis-sql-expression-editor";
 import type { h, EventHandler } from "@arcgis/lumina";
 
@@ -14,6 +15,9 @@ interface LuminaArcgisCodeEditor extends Partial<Pick<ArcgisCodeEditor, 'editorO
   onarcgisValueChange?: EventHandler<HTMLArcgisCodeEditorElement["arcgisValueChange"]>;
 }
 
+interface LuminaArcgisCodeViewer extends Partial<Pick<ArcgisCodeViewer, 'language' | 'round'>>, h.JSX.HTMLAttributes<HTMLArcgisCodeViewerElement> {
+}
+
 interface LuminaArcgisSqlExpressionEditor extends Partial<Pick<ArcgisSqlExpressionEditor, 'hideSideBar' | 'profile' | 'script'>>, h.JSX.HTMLAttributes<HTMLArcgisSqlExpressionEditorElement> {
   onarcgisDiagnosticsChange?: EventHandler<HTMLArcgisSqlExpressionEditorElement["arcgisDiagnosticsChange"]>;
   onarcgisScriptChange?: EventHandler<HTMLArcgisSqlExpressionEditorElement["arcgisScriptChange"]>;
@@ -24,6 +28,7 @@ declare module "@arcgis/lumina" {
     interface IntrinsicElements {
       "arcgis-arcade-editor": LuminaArcgisArcadeEditor;
       "arcgis-code-editor": LuminaArcgisCodeEditor;
+      "arcgis-code-viewer": LuminaArcgisCodeViewer;
       "arcgis-sql-expression-editor": LuminaArcgisSqlExpressionEditor;
     }
   }

package/dist/types/preact.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="../index.d.ts" />
 import type { ArcgisArcadeEditor } from "../components/arcgis-arcade-editor";
 import type { ArcgisCodeEditor } from "../components/arcgis-code-editor";
+import type { ArcgisCodeViewer } from "../components/arcgis-code-viewer";
 import type { ArcgisSqlExpressionEditor } from "../components/arcgis-sql-expression-editor";
 import { HTMLAttributes } from "preact";
 import type { EventHandler } from "@arcgis/lumina";
@@ -15,6 +16,9 @@ interface PreactArcgisCodeEditor extends Partial<Pick<ArcgisCodeEditor, 'editorO
   onarcgisValueChange?: EventHandler<HTMLArcgisCodeEditorElement["arcgisValueChange"]>;
 }
 
+interface PreactArcgisCodeViewer extends Partial<Pick<ArcgisCodeViewer, 'language' | 'round'>>, HTMLAttributes<HTMLArcgisCodeViewerElement> {
+}
+
 interface PreactArcgisSqlExpressionEditor extends Partial<Pick<ArcgisSqlExpressionEditor, 'hideSideBar' | 'profile' | 'script'>>, HTMLAttributes<HTMLArcgisSqlExpressionEditorElement> {
   onarcgisDiagnosticsChange?: EventHandler<HTMLArcgisSqlExpressionEditorElement["arcgisDiagnosticsChange"]>;
   onarcgisScriptChange?: EventHandler<HTMLArcgisSqlExpressionEditorElement["arcgisScriptChange"]>;
@@ -25,6 +29,7 @@ declare module 'preact' {
     interface IntrinsicElements {
       "arcgis-arcade-editor": PreactArcgisArcadeEditor;
       "arcgis-code-editor": PreactArcgisCodeEditor;
+      "arcgis-code-viewer": PreactArcgisCodeViewer;
       "arcgis-sql-expression-editor": PreactArcgisSqlExpressionEditor;
     }
   }
@@ -32,6 +37,7 @@ declare module 'preact' {
     interface IntrinsicElements {
       "arcgis-arcade-editor": PreactArcgisArcadeEditor;
       "arcgis-code-editor": PreactArcgisCodeEditor;
+      "arcgis-code-viewer": PreactArcgisCodeViewer;
       "arcgis-sql-expression-editor": PreactArcgisSqlExpressionEditor;
     }
   }

package/dist/types/preact10.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="../index.d.ts" />
 import type { ArcgisArcadeEditor } from "../components/arcgis-arcade-editor";
 import type { ArcgisCodeEditor } from "../components/arcgis-code-editor";
+import type { ArcgisCodeViewer } from "../components/arcgis-code-viewer";
 import type { ArcgisSqlExpressionEditor } from "../components/arcgis-sql-expression-editor";
 import { JSX as PreactJsx } from "preact";
 import type { EventHandler } from "@arcgis/lumina";
@@ -17,6 +18,10 @@ interface PreactArcgisCodeEditor extends Partial<Pick<ArcgisCodeEditor, 'editorO
   onarcgisValueChange?: EventHandler<HTMLArcgisCodeEditorElement["arcgisValueChange"]>;
 }
 
+/** @deprecated Update to Preact 10.27.2+ or 11+ and consume types/preact file over types/preact10 */
+interface PreactArcgisCodeViewer extends Partial<Pick<ArcgisCodeViewer, 'language' | 'round'>>, PreactJsx.HTMLAttributes<HTMLArcgisCodeViewerElement> {
+}
+
 /** @deprecated Update to Preact 10.27.2+ or 11+ and consume types/preact file over types/preact10 */
 interface PreactArcgisSqlExpressionEditor extends Partial<Pick<ArcgisSqlExpressionEditor, 'hideSideBar' | 'profile' | 'script'>>, PreactJsx.HTMLAttributes<HTMLArcgisSqlExpressionEditorElement> {
   onarcgisDiagnosticsChange?: EventHandler<HTMLArcgisSqlExpressionEditorElement["arcgisDiagnosticsChange"]>;
@@ -28,6 +33,7 @@ declare module 'preact' {
     interface IntrinsicElements {
       "arcgis-arcade-editor": PreactArcgisArcadeEditor;
       "arcgis-code-editor": PreactArcgisCodeEditor;
+      "arcgis-code-viewer": PreactArcgisCodeViewer;
       "arcgis-sql-expression-editor": PreactArcgisSqlExpressionEditor;
     }
   }
@@ -35,6 +41,7 @@ declare module 'preact' {
     interface IntrinsicElements {
       "arcgis-arcade-editor": PreactArcgisArcadeEditor;
       "arcgis-code-editor": PreactArcgisCodeEditor;
+      "arcgis-code-viewer": PreactArcgisCodeViewer;
       "arcgis-sql-expression-editor": PreactArcgisSqlExpressionEditor;
     }
   }

package/dist/types/react.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="../index.d.ts" />
 import type { ArcgisArcadeEditor } from "../components/arcgis-arcade-editor";
 import type { ArcgisCodeEditor } from "../components/arcgis-code-editor";
+import type { ArcgisCodeViewer } from "../components/arcgis-code-viewer";
 import type { ArcgisSqlExpressionEditor } from "../components/arcgis-sql-expression-editor";
 import type { HTMLProps } from 'react';
 import type { EventHandler } from "@arcgis/lumina"; 
@@ -15,6 +16,9 @@ interface ReactArcgisCodeEditor extends Partial<Pick<ArcgisCodeEditor, 'editorOp
   onarcgisValueChange?: EventHandler<HTMLArcgisCodeEditorElement["arcgisValueChange"]>;
 }
 
+interface ReactArcgisCodeViewer extends Partial<Pick<ArcgisCodeViewer, 'language' | 'round'>>, HTMLProps<HTMLArcgisCodeViewerElement> {
+}
+
 interface ReactArcgisSqlExpressionEditor extends Partial<Pick<ArcgisSqlExpressionEditor, 'hideSideBar' | 'profile' | 'script'>>, HTMLProps<HTMLArcgisSqlExpressionEditorElement> {
   onarcgisDiagnosticsChange?: EventHandler<HTMLArcgisSqlExpressionEditorElement["arcgisDiagnosticsChange"]>;
   onarcgisScriptChange?: EventHandler<HTMLArcgisSqlExpressionEditorElement["arcgisScriptChange"]>;
@@ -25,6 +29,7 @@ declare module "react" {
     interface IntrinsicElements {
       "arcgis-arcade-editor": ReactArcgisArcadeEditor;
       "arcgis-code-editor": ReactArcgisCodeEditor;
+      "arcgis-code-viewer": ReactArcgisCodeViewer;
       "arcgis-sql-expression-editor": ReactArcgisSqlExpressionEditor;
     }
   }
@@ -34,6 +39,7 @@ declare module "react/jsx-runtime" {
     interface IntrinsicElements {
       "arcgis-arcade-editor": ReactArcgisArcadeEditor;
       "arcgis-code-editor": ReactArcgisCodeEditor;
+      "arcgis-code-viewer": ReactArcgisCodeViewer;
       "arcgis-sql-expression-editor": ReactArcgisSqlExpressionEditor;
     }
   }
@@ -43,6 +49,7 @@ declare module "react/jsx-dev-runtime" {
     interface IntrinsicElements {
       "arcgis-arcade-editor": ReactArcgisArcadeEditor;
       "arcgis-code-editor": ReactArcgisCodeEditor;
+      "arcgis-code-viewer": ReactArcgisCodeViewer;
       "arcgis-sql-expression-editor": ReactArcgisSqlExpressionEditor;
     }
   }

package/dist/types/stencil.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="../index.d.ts" />
 import type { ArcgisArcadeEditor } from "../components/arcgis-arcade-editor";
 import type { ArcgisCodeEditor } from "../components/arcgis-code-editor";
+import type { ArcgisCodeViewer } from "../components/arcgis-code-viewer";
 import type { ArcgisSqlExpressionEditor } from "../components/arcgis-sql-expression-editor";
 import { JSXBase as StencilJsx } from "@stencil/core/internal";
 import type { EventHandler } from "@arcgis/lumina";
@@ -15,6 +16,9 @@ interface StencilArcgisCodeEditor extends Partial<Pick<ArcgisCodeEditor, 'editor
   onArcgisValueChange?: EventHandler<HTMLArcgisCodeEditorElement["arcgisValueChange"]>;
 }
 
+interface StencilArcgisCodeViewer extends Partial<Pick<ArcgisCodeViewer, 'language' | 'round'>>, StencilJsx.HTMLAttributes<HTMLArcgisCodeViewerElement> {
+}
+
 interface StencilArcgisSqlExpressionEditor extends Partial<Pick<ArcgisSqlExpressionEditor, 'hideSideBar' | 'profile' | 'script'>>, StencilJsx.HTMLAttributes<HTMLArcgisSqlExpressionEditorElement> {
   onArcgisDiagnosticsChange?: EventHandler<HTMLArcgisSqlExpressionEditorElement["arcgisDiagnosticsChange"]>;
   onArcgisScriptChange?: EventHandler<HTMLArcgisSqlExpressionEditorElement["arcgisScriptChange"]>;
@@ -23,6 +27,7 @@ interface StencilArcgisSqlExpressionEditor extends Partial<Pick<ArcgisSqlExpress
 interface ExposedElements {
   "arcgis-arcade-editor": StencilArcgisArcadeEditor;
   "arcgis-code-editor": StencilArcgisCodeEditor;
+  "arcgis-code-viewer": StencilArcgisCodeViewer;
   "arcgis-sql-expression-editor": StencilArcgisSqlExpressionEditor;
 }
 

package/dist/utils/colorize.d.ts

@@ -1,5 +1,5 @@
 import { IDisposable } from 'monaco-editor';
-export declare function colorizedAllCodeElements(e: HTMLElement, languageId: string): Promise<void>;
+export declare function colorizeCode(code: string, languageId: string): Promise<string>;
 export declare function colorizeCodeElement(e: Element | null | undefined, text: string | null | undefined, languageId: string): Promise<void>;
 export declare function generateColorizeStyles(): string;
 export declare function onColorizeThemeChanged(func: () => void): IDisposable;

package/dist/utils/monaco-languages.d.ts

@@ -1,3 +1,7 @@
+/** Mark a language as fully initialized (should be called after mode.setupMode). */
+export declare function markLanguageReady(languageId: string): void;
+/** Await the full initialization of the language (tokens/providers registered). */
+export declare function whenLanguageReady(languageId: string): Promise<void>;
 /**
  * helper to track the languages that have been encountered in monaco-editor.
  * Useful for wrapping callbacks passed to monaco's languages.onLanguage function.