From cc813f01fa1c881d603d3bf3a3eab790e4c884b0 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 30 Aug 2025 02:02:23 +0300
Subject: [PATCH 01/71] feat(Compilers): add basic support for ripple

---
 src/livecodes/languages/languages.ts          |  2 ++
 src/livecodes/languages/ripple/index.ts       |  1 +
 src/livecodes/languages/ripple/lang-ripple.ts | 31 +++++++++++++++++++
 .../languages/ripple/ripple-runtime.ts        |  9 ++++++
 src/livecodes/result/result-page.ts           |  6 ++--
 src/livecodes/vendors.ts                      |  2 ++
 src/sdk/models.ts                             |  1 +
 7 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/livecodes/languages/ripple/index.ts
 create mode 100644 src/livecodes/languages/ripple/lang-ripple.ts
 create mode 100644 src/livecodes/languages/ripple/ripple-runtime.ts

diff --git a/src/livecodes/languages/languages.ts b/src/livecodes/languages/languages.ts
index 9f318652af..1adcb54bad 100644
--- a/src/livecodes/languages/languages.ts
+++ b/src/livecodes/languages/languages.ts
@@ -59,6 +59,7 @@ import { reason } from './reason';
 import { rescript } from './rescript';
 import { richtext } from './richtext';
 import { riot } from './riot';
+import { ripple } from './ripple';
 import { ruby } from './ruby';
 import { rubyWasm } from './ruby-wasm';
 import { scheme } from './scheme';
@@ -128,6 +129,7 @@ export const languages: LanguageSpecs[] = [
   solidTsx,
   riot,
   malina,
+  ripple,
   coffeescript,
   livescript,
   civet,
diff --git a/src/livecodes/languages/ripple/index.ts b/src/livecodes/languages/ripple/index.ts
new file mode 100644
index 0000000000..ace98a13ca
--- /dev/null
+++ b/src/livecodes/languages/ripple/index.ts
@@ -0,0 +1 @@
+export * from './lang-ripple';
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
new file mode 100644
index 0000000000..3f30bb9b43
--- /dev/null
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -0,0 +1,31 @@
+import type { LanguageSpecs } from '../../models';
+import { rippleUrl } from '../../vendors';
+import { parserPlugins } from '../prettier';
+
+export const ripple: LanguageSpecs = {
+  name: 'ripple',
+  title: 'Ripple',
+  info: false,
+  parser: {
+    name: 'babel-ts',
+    pluginUrls: [parserPlugins.babel, parserPlugins.html],
+  },
+  compiler: {
+    factory: async () => {
+      // TODO: convert to UMD
+      const { compile } = await import(rippleUrl);
+      return async (code) => {
+        if (!code.trim()) return '';
+        const { js, css } = await compile(code, './src/App.ripple');
+        const cssCode =
+          css === ''
+            ? ''
+            : `\n\nconst styles = document.createElement('style');\nstyles.innerHTML = ${JSON.stringify(css)};\ndocument.head.appendChild(styles);\n`;
+        return `${js.code}${cssCode}`;
+      };
+    },
+  },
+  extensions: ['ripple'],
+  editor: 'script',
+  editorLanguage: 'typescript',
+};
diff --git a/src/livecodes/languages/ripple/ripple-runtime.ts b/src/livecodes/languages/ripple/ripple-runtime.ts
new file mode 100644
index 0000000000..d7d8d898b6
--- /dev/null
+++ b/src/livecodes/languages/ripple/ripple-runtime.ts
@@ -0,0 +1,9 @@
+export const rippleRuntime = `
+import { mount } from 'ripple';
+import { App } from "./script";
+(() => {
+  mount(App, {
+    target: document.querySelector("#livecodes-app") || document.body.appendChild(document.createElement('div')),
+  });
+})();
+`;
diff --git a/src/livecodes/result/result-page.ts b/src/livecodes/result/result-page.ts
index 1610161a45..c5c6f189d4 100644
--- a/src/livecodes/result/result-page.ts
+++ b/src/livecodes/result/result-page.ts
@@ -11,6 +11,7 @@ import {
 import { cssPresets, getLanguageCompiler, getLanguageExtension } from '../languages';
 import { reactRuntime } from '../languages/jsx/react-runtime';
 import { reactNativeRuntime } from '../languages/react-native/react-native-runtime';
+import { rippleRuntime } from '../languages/ripple/ripple-runtime';
 import { solidRuntime } from '../languages/solid/solid-runtime';
 import { hasCustomJsxRuntime } from '../languages/typescript';
 import type { Cache, CompileInfo, Config, EditorId, Language } from '../models';
@@ -210,6 +211,7 @@ export const createResultPage = async ({
     'react-native-tsx': reactNativeRuntime,
     solid: solidRuntime,
     'solid.tsx': solidRuntime,
+    ripple: rippleRuntime,
   };
   const jsxRuntime = jsxRuntimes[code.script.language] || '';
   const reactImport =
@@ -219,7 +221,7 @@ export const createResultPage = async ({
   const shouldInsertJsxRuntime =
     Object.keys(jsxRuntimes).includes(code.script.language) &&
     !config.customSettings[code.script.language]?.disableAutoRender &&
-    hasDefaultExport(code.script.compiled) &&
+    (hasDefaultExport(code.script.compiled) || code.script.language === 'ripple') && // FIXME: ripple default export
     !hasCustomJsxRuntime(code.script.content || '', config) &&
     !importFromScript;
   const hasPreact = getImports(code.script.compiled).find((mod) => mod === 'preact');
@@ -439,7 +441,7 @@ export const createResultPage = async ({
     }
   }
 
-  // React JSX runtime
+  // JSX runtime
   if (shouldInsertJsxRuntime) {
     const jsxRuntimeScript = dom.createElement('script');
     jsxRuntimeScript.type = 'module';
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 3ee6afdcfc..570e046b59 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -389,6 +389,8 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.3/compiler');
+
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 
 export const rubyWasmScriptUrl = /* @__PURE__ */ getUrl(
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index e6bd21a015..16bf986a7a 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -968,6 +968,7 @@ export type Language =
   | 'riotjs'
   | 'malina'
   | 'malinajs'
+  | 'ripple'
   | 'xht'
   | 'coffeescript'
   | 'coffee'

From bb8c04f9fbc22b90ba6ff2200192bcb6b39d3dd6 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 31 Aug 2025 02:47:04 +0300
Subject: [PATCH 02/71] upgrade ripple, use default export

---
 src/livecodes/languages/ripple/ripple-runtime.ts | 2 +-
 src/livecodes/result/result-page.ts              | 2 +-
 src/livecodes/vendors.ts                         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/livecodes/languages/ripple/ripple-runtime.ts b/src/livecodes/languages/ripple/ripple-runtime.ts
index d7d8d898b6..80653677e6 100644
--- a/src/livecodes/languages/ripple/ripple-runtime.ts
+++ b/src/livecodes/languages/ripple/ripple-runtime.ts
@@ -1,6 +1,6 @@
 export const rippleRuntime = `
 import { mount } from 'ripple';
-import { App } from "./script";
+import App from "./script";
 (() => {
   mount(App, {
     target: document.querySelector("#livecodes-app") || document.body.appendChild(document.createElement('div')),
diff --git a/src/livecodes/result/result-page.ts b/src/livecodes/result/result-page.ts
index c5c6f189d4..9a13c0f140 100644
--- a/src/livecodes/result/result-page.ts
+++ b/src/livecodes/result/result-page.ts
@@ -221,7 +221,7 @@ export const createResultPage = async ({
   const shouldInsertJsxRuntime =
     Object.keys(jsxRuntimes).includes(code.script.language) &&
     !config.customSettings[code.script.language]?.disableAutoRender &&
-    (hasDefaultExport(code.script.compiled) || code.script.language === 'ripple') && // FIXME: ripple default export
+    hasDefaultExport(code.script.compiled) &&
     !hasCustomJsxRuntime(code.script.content || '', config) &&
     !importFromScript;
   const hasPreact = getImports(code.script.compiled).find((mod) => mod === 'preact');
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 570e046b59..b0207c7aee 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -389,7 +389,7 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.3/compiler');
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.5/compiler');
 
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 

From f0c18a7bce84392e8e92a85664ae0647d5d47932 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 31 Aug 2025 22:01:23 +0300
Subject: [PATCH 03/71] add syntax highlighting for ripple in monaco

---
 scripts/build.js                              |    1 +
 .../monaco/languages/monaco-lang-ripple.ts    | 6856 +++++++++++++++++
 src/livecodes/editor/monaco/monaco.ts         |   50 +
 src/livecodes/languages/ripple/lang-ripple.ts |    1 -
 src/livecodes/vendors.ts                      |   10 +-
 5 files changed, 6916 insertions(+), 2 deletions(-)
 create mode 100644 src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts

diff --git a/scripts/build.js b/scripts/build.js
index 13058760d2..2b9d0550a5 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -160,6 +160,7 @@ const esmBuild = () =>
       'editor/monaco/languages/monaco-lang-astro.ts',
       'editor/monaco/languages/monaco-lang-clio.ts',
       'editor/monaco/languages/monaco-lang-imba.ts',
+      'editor/monaco/languages/monaco-lang-ripple.ts',
       // 'editor/monaco/languages/monaco-lang-sql.ts',
       'editor/monaco/languages/monaco-lang-wat.ts',
       'editor/codemirror/codemirror.ts',
diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
new file mode 100644
index 0000000000..392d2620d0
--- /dev/null
+++ b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
@@ -0,0 +1,6856 @@
+// from https://github.com/trueadm/ripple/blob/main/packages/ripple-vscode-plugin/syntaxes/ripple.tmLanguage.json
+// and https://github.com/trueadm/ripple/blob/main/packages/ripple-vscode-plugin/language-configuration.json
+export default {
+  syntax: {
+    information_for_contributors: [
+      'This file has been converted from https://github.com/microsoft/TypeScript-TmLanguage/blob/master/TypeScriptReact.tmLanguage',
+      'If you want to provide a fix or improvement, please create a pull request against the original repository.',
+      'Once accepted there, we are happy to receive an update request.',
+    ],
+    version:
+      'https://github.com/microsoft/TypeScript-TmLanguage/commit/48f608692aa6d6ad7bd65b478187906c798234a8',
+    name: 'Ripple',
+    scopeName: 'source.ripple',
+    patterns: [
+      {
+        include: '#directives',
+      },
+      {
+        include: '#statements',
+      },
+      {
+        include: '#shebang',
+      },
+    ],
+    repository: {
+      shebang: {
+        name: 'comment.line.shebang.js',
+        match: '\\A(#!).*(?=$)',
+        captures: {
+          '1': {
+            name: 'punctuation.definition.comment.js',
+          },
+        },
+      },
+      statements: {
+        patterns: [
+          {
+            include: '#declaration',
+          },
+          {
+            include: '#control-statement',
+          },
+          {
+            include: '#after-operator-block-as-object-literal',
+          },
+          {
+            include: '#decl-block',
+          },
+          {
+            include: '#label',
+          },
+          {
+            include: '#expression',
+          },
+          {
+            include: '#punctuation-semicolon',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#comment',
+          },
+        ],
+      },
+      'component-statements': {
+        patterns: [
+          {
+            include: '#jsx',
+          },
+          {
+            include: '#declaration',
+          },
+          {
+            include: '#component-control-statement',
+          },
+          {
+            include: '#component-decl-block',
+          },
+          {
+            include: '#label',
+          },
+          {
+            include: '#expression',
+          },
+          {
+            include: '#punctuation-semicolon',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#comment',
+          },
+        ],
+      },
+      declaration: {
+        patterns: [
+          {
+            include: '#decorator',
+          },
+          {
+            include: '#var-expr',
+          },
+          {
+            include: '#component-declaration',
+          },
+          {
+            include: '#fragment-declaration',
+          },
+          {
+            include: '#function-declaration',
+          },
+          {
+            include: '#class-declaration',
+          },
+          {
+            include: '#interface-declaration',
+          },
+          {
+            include: '#enum-declaration',
+          },
+          {
+            include: '#namespace-declaration',
+          },
+          {
+            include: '#type-alias-declaration',
+          },
+          {
+            include: '#import-equals-declaration',
+          },
+          {
+            include: '#import-declaration',
+          },
+          {
+            include: '#export-declaration',
+          },
+          {
+            name: 'storage.modifier.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(declare|export)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      'control-statement': {
+        patterns: [
+          {
+            include: '#switch-statement',
+          },
+          {
+            include: '#for-loop',
+          },
+          {
+            name: 'keyword.control.trycatch.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(catch|finally|throw|try)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(break|continue|goto)\\s+([_$[:alpha:]][_$[:alnum:]]*)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            captures: {
+              '1': {
+                name: 'keyword.control.loop.js',
+              },
+              '2': {
+                name: 'entity.name.label.js',
+              },
+            },
+          },
+          {
+            name: 'keyword.control.loop.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(break|continue|do|goto|while)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(return)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.control.flow.js',
+              },
+            },
+            end: '(?=[;}]|$|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'keyword.control.switch.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(case|default|switch)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            include: '#if-statement',
+          },
+          {
+            name: 'keyword.control.conditional.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(else|if)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.control.with.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(with)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.control.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(package)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.other.debugger.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(debugger)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      'component-control-statement': {
+        patterns: [
+          {
+            include: '#component-switch-statement',
+          },
+          {
+            include: '#for-loop',
+          },
+          {
+            name: 'keyword.control.trycatch.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(catch|finally|async|throw|try)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(break|continue|goto)\\s+([_$[:alpha:]][_$[:alnum:]]*)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            captures: {
+              '1': {
+                name: 'keyword.control.loop.js',
+              },
+              '2': {
+                name: 'entity.name.label.js',
+              },
+            },
+          },
+          {
+            name: 'keyword.control.loop.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(break|continue|do|goto|while)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(return)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.control.flow.js',
+              },
+            },
+            end: '(?=[;}]|$|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'keyword.control.switch.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(case|default|switch)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            include: '#component-if-statement',
+          },
+          {
+            name: 'keyword.control.conditional.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(else|if)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.control.with.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(with)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.control.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(package)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.other.debugger.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(debugger)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      label: {
+        patterns: [
+          {
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(:)(?=\\s*\\{)',
+            beginCaptures: {
+              '1': {
+                name: 'entity.name.label.js',
+              },
+              '2': {
+                name: 'punctuation.separator.label.js',
+              },
+            },
+            end: '(?<=\\})',
+            patterns: [
+              {
+                include: '#decl-block',
+              },
+            ],
+          },
+          {
+            match: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(:)',
+            captures: {
+              '1': {
+                name: 'entity.name.label.js',
+              },
+              '2': {
+                name: 'punctuation.separator.label.js',
+              },
+            },
+          },
+        ],
+      },
+      expression: {
+        patterns: [
+          {
+            include: '#expressionWithoutIdentifiers',
+          },
+          {
+            include: '#identifiers',
+          },
+          {
+            include: '#expressionPunctuations',
+          },
+        ],
+      },
+      expressionWithoutIdentifiers: {
+        patterns: [
+          {
+            include: '#string',
+          },
+          {
+            include: '#regex',
+          },
+          {
+            include: '#comment',
+          },
+          {
+            include: '#function-expression',
+          },
+          {
+            include: '#eval-expression',
+          },
+          {
+            include: '#class-expression',
+          },
+          {
+            include: '#arrow-function',
+          },
+          {
+            include: '#paren-expression-possibly-arrow',
+          },
+          {
+            include: '#cast',
+          },
+          {
+            include: '#ternary-expression',
+          },
+          {
+            include: '#new-expr',
+          },
+          {
+            include: '#instanceof-expr',
+          },
+          {
+            include: '#object-literal',
+          },
+          {
+            include: '#expression-operators',
+          },
+          {
+            include: '#function-call',
+          },
+          {
+            include: '#literal',
+          },
+          {
+            include: '#support-objects',
+          },
+          {
+            include: '#paren-expression',
+          },
+        ],
+      },
+      expressionPunctuations: {
+        patterns: [
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            include: '#punctuation-accessor',
+          },
+        ],
+      },
+      decorator: {
+        name: 'meta.decorator.js',
+        begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))\\@',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.decorator.js',
+          },
+        },
+        end: '(?=\\s)',
+        patterns: [
+          {
+            include: '#expression',
+          },
+        ],
+      },
+      'var-expr': {
+        patterns: [
+          {
+            name: 'meta.var.expr.js',
+            begin:
+              '(?=(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(var|let)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))',
+            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(var|let)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=^|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|((?<!^let|[^\\._$[:alnum:]]let|^var|[^\\._$[:alnum:]]var)(?=\\s*$)))',
+            patterns: [
+              {
+                begin:
+                  '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(var|let)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.export.js',
+                  },
+                  '2': {
+                    name: 'storage.modifier.js',
+                  },
+                  '3': {
+                    name: 'storage.type.js',
+                  },
+                },
+                end: '(?=\\S)',
+              },
+              {
+                include: '#destructuring-variable',
+              },
+              {
+                include: '#var-single-variable',
+              },
+              {
+                include: '#variable-initializer',
+              },
+              {
+                include: '#comment',
+              },
+              {
+                begin: '(,)\\s*(?=$|\\/\\/)',
+                beginCaptures: {
+                  '1': {
+                    name: 'punctuation.separator.comma.js',
+                  },
+                },
+                end: '(?<!,)(((?==|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|^\\s*$))|((?<=\\S)(?=\\s*$)))',
+                patterns: [
+                  {
+                    include: '#single-line-comment-consuming-line-ending',
+                  },
+                  {
+                    include: '#comment',
+                  },
+                  {
+                    include: '#destructuring-variable',
+                  },
+                  {
+                    include: '#var-single-variable',
+                  },
+                  {
+                    include: '#punctuation-comma',
+                  },
+                ],
+              },
+              {
+                include: '#punctuation-comma',
+              },
+            ],
+          },
+          {
+            name: 'meta.var.expr.js',
+            begin:
+              '(?=(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(const(?!\\s+enum\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'storage.type.js',
+              },
+            },
+            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(const(?!\\s+enum\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=^|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|((?<!^const|[^\\._$[:alnum:]]const)(?=\\s*$)))',
+            patterns: [
+              {
+                begin:
+                  '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(const(?!\\s+enum\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.export.js',
+                  },
+                  '2': {
+                    name: 'storage.modifier.js',
+                  },
+                  '3': {
+                    name: 'storage.type.js',
+                  },
+                },
+                end: '(?=\\S)',
+              },
+              {
+                include: '#destructuring-const',
+              },
+              {
+                include: '#var-single-const',
+              },
+              {
+                include: '#variable-initializer',
+              },
+              {
+                include: '#comment',
+              },
+              {
+                begin: '(,)\\s*(?=$|\\/\\/)',
+                beginCaptures: {
+                  '1': {
+                    name: 'punctuation.separator.comma.js',
+                  },
+                },
+                end: '(?<!,)(((?==|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|^\\s*$))|((?<=\\S)(?=\\s*$)))',
+                patterns: [
+                  {
+                    include: '#single-line-comment-consuming-line-ending',
+                  },
+                  {
+                    include: '#comment',
+                  },
+                  {
+                    include: '#destructuring-const',
+                  },
+                  {
+                    include: '#var-single-const',
+                  },
+                  {
+                    include: '#punctuation-comma',
+                  },
+                ],
+              },
+              {
+                include: '#punctuation-comma',
+              },
+            ],
+          },
+          {
+            name: 'meta.var.expr.js',
+            begin:
+              '(?=(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b((?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'storage.type.js',
+              },
+            },
+            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b((?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|((?<!^using|[^\\._$[:alnum:]]using|^await\\s+using|[^\\._$[:alnum:]]await\\s+using)(?=\\s*$)))',
+            patterns: [
+              {
+                begin:
+                  '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b((?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.export.js',
+                  },
+                  '2': {
+                    name: 'storage.modifier.js',
+                  },
+                  '3': {
+                    name: 'storage.type.js',
+                  },
+                },
+                end: '(?=\\S)',
+              },
+              {
+                include: '#var-single-const',
+              },
+              {
+                include: '#variable-initializer',
+              },
+              {
+                include: '#comment',
+              },
+              {
+                begin: '(,)\\s*((?!\\S)|(?=\\/\\/))',
+                beginCaptures: {
+                  '1': {
+                    name: 'punctuation.separator.comma.js',
+                  },
+                },
+                end: '(?<!,)(((?==|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|^\\s*$))|((?<=\\S)(?=\\s*$)))',
+                patterns: [
+                  {
+                    include: '#single-line-comment-consuming-line-ending',
+                  },
+                  {
+                    include: '#comment',
+                  },
+                  {
+                    include: '#var-single-const',
+                  },
+                  {
+                    include: '#punctuation-comma',
+                  },
+                ],
+              },
+              {
+                include: '#punctuation-comma',
+              },
+            ],
+          },
+        ],
+      },
+      'var-single-variable': {
+        patterns: [
+          {
+            name: 'meta.var-single-variable.expr.js',
+            begin:
+              '(?x)([_$[:alpha:]][_$[:alnum:]]*)(\\!)?(?=\\s*\n# function assignment |\n(=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)) |\n# typeannotation is fn type: < | () | (... | (param: | (param, | (param? | (param= | (param) =>\n(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))) |\n(:\\s*(=>|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(<[^<>]*>)|[^<>(),=])+=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            beginCaptures: {
+              '1': {
+                name: 'meta.definition.variable.js entity.name.function.js',
+              },
+              '2': {
+                name: 'keyword.operator.definiteassignment.js',
+              },
+            },
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|(;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            patterns: [
+              {
+                include: '#var-single-variable-type-annotation',
+              },
+            ],
+          },
+          {
+            name: 'meta.var-single-variable.expr.js',
+            begin: '([[:upper:]][_$[:digit:][:upper:]]*)(?![_$[:alnum:]])(\\!)?',
+            beginCaptures: {
+              '1': {
+                name: 'meta.definition.variable.js variable.other.constant.js',
+              },
+              '2': {
+                name: 'keyword.operator.definiteassignment.js',
+              },
+            },
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|(;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            patterns: [
+              {
+                include: '#var-single-variable-type-annotation',
+              },
+            ],
+          },
+          {
+            name: 'meta.var-single-variable.expr.js',
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)(\\!)?',
+            beginCaptures: {
+              '1': {
+                name: 'meta.definition.variable.js variable.other.readwrite.js',
+              },
+              '2': {
+                name: 'keyword.operator.definiteassignment.js',
+              },
+            },
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|(;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            patterns: [
+              {
+                include: '#var-single-variable-type-annotation',
+              },
+            ],
+          },
+        ],
+      },
+      'var-single-const': {
+        patterns: [
+          {
+            name: 'meta.var-single-variable.expr.js',
+            begin:
+              '(?x)([_$[:alpha:]][_$[:alnum:]]*)(?=\\s*\n# function assignment |\n(=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)) |\n# typeannotation is fn type: < | () | (... | (param: | (param, | (param? | (param= | (param) =>\n(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))) |\n(:\\s*(=>|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(<[^<>]*>)|[^<>(),=])+=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            beginCaptures: {
+              '1': {
+                name: 'meta.definition.variable.js variable.other.constant.js entity.name.function.js',
+              },
+            },
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|(;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            patterns: [
+              {
+                include: '#var-single-variable-type-annotation',
+              },
+            ],
+          },
+          {
+            name: 'meta.var-single-variable.expr.js',
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)',
+            beginCaptures: {
+              '1': {
+                name: 'meta.definition.variable.js variable.other.constant.js',
+              },
+            },
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|(;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            patterns: [
+              {
+                include: '#var-single-variable-type-annotation',
+              },
+            ],
+          },
+        ],
+      },
+      'var-single-variable-type-annotation': {
+        patterns: [
+          {
+            include: '#type-annotation',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#comment',
+          },
+        ],
+      },
+      'destructuring-variable': {
+        patterns: [
+          {
+            name: 'meta.object-binding-pattern-variable.js',
+            begin: '(?<!=|:|^of|[^\\._$[:alnum:]]of|^in|[^\\._$[:alnum:]]in)\\s*(?=\\{)',
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))',
+            patterns: [
+              {
+                include: '#object-binding-pattern',
+              },
+              {
+                include: '#type-annotation',
+              },
+              {
+                include: '#comment',
+              },
+            ],
+          },
+          {
+            name: 'meta.array-binding-pattern-variable.js',
+            begin: '(?<!=|:|^of|[^\\._$[:alnum:]]of|^in|[^\\._$[:alnum:]]in)\\s*(?=\\[)',
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))',
+            patterns: [
+              {
+                include: '#array-binding-pattern',
+              },
+              {
+                include: '#type-annotation',
+              },
+              {
+                include: '#comment',
+              },
+            ],
+          },
+        ],
+      },
+      'destructuring-const': {
+        patterns: [
+          {
+            name: 'meta.object-binding-pattern-variable.js',
+            begin: '(?<!=|:|^of|[^\\._$[:alnum:]]of|^in|[^\\._$[:alnum:]]in)\\s*(?=\\{)',
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))',
+            patterns: [
+              {
+                include: '#object-binding-pattern-const',
+              },
+              {
+                include: '#type-annotation',
+              },
+              {
+                include: '#comment',
+              },
+            ],
+          },
+          {
+            name: 'meta.array-binding-pattern-variable.js',
+            begin: '(?<!=|:|^of|[^\\._$[:alnum:]]of|^in|[^\\._$[:alnum:]]in)\\s*(?=\\[)',
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))',
+            patterns: [
+              {
+                include: '#array-binding-pattern-const',
+              },
+              {
+                include: '#type-annotation',
+              },
+              {
+                include: '#comment',
+              },
+            ],
+          },
+        ],
+      },
+      'object-binding-element': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin:
+              '(?x)(?=((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(:))',
+            end: '(?=,|\\})',
+            patterns: [
+              {
+                include: '#object-binding-element-propertyName',
+              },
+              {
+                include: '#binding-element',
+              },
+            ],
+          },
+          {
+            include: '#object-binding-pattern',
+          },
+          {
+            include: '#destructuring-variable-rest',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'object-binding-element-const': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin:
+              '(?x)(?=((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(:))',
+            end: '(?=,|\\})',
+            patterns: [
+              {
+                include: '#object-binding-element-propertyName',
+              },
+              {
+                include: '#binding-element-const',
+              },
+            ],
+          },
+          {
+            include: '#object-binding-pattern-const',
+          },
+          {
+            include: '#destructuring-variable-rest-const',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'object-binding-element-propertyName': {
+        begin:
+          '(?x)(?=((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(:))',
+        end: '(:)',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.destructuring.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#string',
+          },
+          {
+            include: '#array-literal',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            name: 'variable.object.property.js',
+            match: '([_$[:alpha:]][_$[:alnum:]]*)',
+          },
+        ],
+      },
+      'binding-element': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#regex',
+          },
+          {
+            include: '#object-binding-pattern',
+          },
+          {
+            include: '#array-binding-pattern',
+          },
+          {
+            include: '#destructuring-variable-rest',
+          },
+          {
+            include: '#variable-initializer',
+          },
+        ],
+      },
+      'binding-element-const': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#regex',
+          },
+          {
+            include: '#object-binding-pattern-const',
+          },
+          {
+            include: '#array-binding-pattern-const',
+          },
+          {
+            include: '#destructuring-variable-rest-const',
+          },
+          {
+            include: '#variable-initializer',
+          },
+        ],
+      },
+      'destructuring-variable-rest': {
+        match: '(?:(\\.\\.\\.)\\s*)?([_$[:alpha:]][_$[:alnum:]]*)',
+        captures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'meta.definition.variable.js variable.other.readwrite.js',
+          },
+        },
+      },
+      'destructuring-variable-rest-const': {
+        match: '(?:(\\.\\.\\.)\\s*)?([_$[:alpha:]][_$[:alnum:]]*)',
+        captures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'meta.definition.variable.js variable.other.constant.js',
+          },
+        },
+      },
+      'object-binding-pattern': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#object-binding-element',
+          },
+        ],
+      },
+      'object-binding-pattern-const': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#object-binding-element-const',
+          },
+        ],
+      },
+      'array-binding-pattern': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\[)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        end: '\\]',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#binding-element',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'array-binding-pattern-const': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\[)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        end: '\\]',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#binding-element-const',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'parameter-name': {
+        patterns: [
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|protected|private|readonly)\\s+(?=(override|public|protected|private|readonly)\\s+)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*(\\??)(?=\\s*\n# function assignment |\n(=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)) |\n# typeannotation is fn type: < | () | (... | (param: | (param, | (param? | (param= | (param) =>\n(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))) |\n(:\\s*(=>|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(<[^<>]*>)|[^<>(),=])+=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'entity.name.function.js variable.language.this.js',
+              },
+              '4': {
+                name: 'entity.name.function.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*(\\??)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'variable.parameter.js variable.language.this.js',
+              },
+              '4': {
+                name: 'variable.parameter.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+        ],
+      },
+      'destructuring-parameter': {
+        patterns: [
+          {
+            name: 'meta.parameter.object-binding-pattern.js',
+            begin: '(?<!=|:)\\s*(?:(\\.\\.\\.)\\s*)?(\\{)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.rest.js',
+              },
+              '2': {
+                name: 'punctuation.definition.binding-pattern.object.js',
+              },
+            },
+            end: '\\}',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.binding-pattern.object.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#parameter-object-binding-element',
+              },
+            ],
+          },
+          {
+            name: 'meta.paramter.array-binding-pattern.js',
+            begin: '(?<!=|:)\\s*(?:(\\.\\.\\.)\\s*)?(\\[)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.rest.js',
+              },
+              '2': {
+                name: 'punctuation.definition.binding-pattern.array.js',
+              },
+            },
+            end: '\\]',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.binding-pattern.array.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#parameter-binding-element',
+              },
+              {
+                include: '#punctuation-comma',
+              },
+            ],
+          },
+        ],
+      },
+      'parameter-object-binding-element': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin:
+              '(?x)(?=((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(:))',
+            end: '(?=,|\\})',
+            patterns: [
+              {
+                include: '#object-binding-element-propertyName',
+              },
+              {
+                include: '#parameter-binding-element',
+              },
+              {
+                include: '#paren-expression',
+              },
+            ],
+          },
+          {
+            include: '#parameter-object-binding-pattern',
+          },
+          {
+            include: '#destructuring-parameter-rest',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'parameter-binding-element': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#regex',
+          },
+          {
+            include: '#parameter-object-binding-pattern',
+          },
+          {
+            include: '#parameter-array-binding-pattern',
+          },
+          {
+            include: '#destructuring-parameter-rest',
+          },
+          {
+            include: '#variable-initializer',
+          },
+        ],
+      },
+      'destructuring-parameter-rest': {
+        match: '(?:(\\.\\.\\.)\\s*)?([_$[:alpha:]][_$[:alnum:]]*)',
+        captures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'variable.parameter.js',
+          },
+        },
+      },
+      'parameter-object-binding-pattern': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#parameter-object-binding-element',
+          },
+        ],
+      },
+      'parameter-array-binding-pattern': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\[)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        end: '\\]',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#parameter-binding-element',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'field-declaration': {
+        name: 'meta.field.declaration.js',
+        begin:
+          '(?x)(?<!\\()(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(readonly)\\s+)?(?=\\s*((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|(\\#?[_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(?:(?:(\\?)|(\\!))\\s*)?(=|:|;|,|\\}|$))',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.js',
+          },
+        },
+        end: '(?x)(?=\\}|;|,|$|(^(?!\\s*((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|(\\#?[_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(?:(?:(\\?)|(\\!))\\s*)?(=|:|;|,|$))))|(?<=\\})',
+        patterns: [
+          {
+            include: '#variable-initializer',
+          },
+          {
+            include: '#type-annotation',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#array-literal',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#comment',
+          },
+          {
+            match:
+              '(?x)(\\#?[_$[:alpha:]][_$[:alnum:]]*)(?:(\\?)|(\\!))?(?=\\s*\\s*\n# function assignment |\n(=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)) |\n# typeannotation is fn type: < | () | (... | (param: | (param, | (param? | (param= | (param) =>\n(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))) |\n(:\\s*(=>|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(<[^<>]*>)|[^<>(),=])+=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            captures: {
+              '1': {
+                name: 'meta.definition.property.js entity.name.function.js',
+              },
+              '2': {
+                name: 'keyword.operator.optional.js',
+              },
+              '3': {
+                name: 'keyword.operator.definiteassignment.js',
+              },
+            },
+          },
+          {
+            name: 'meta.definition.property.js variable.object.property.js',
+            match: '\\#?[_$[:alpha:]][_$[:alnum:]]*',
+          },
+          {
+            name: 'keyword.operator.optional.js',
+            match: '\\?',
+          },
+          {
+            name: 'keyword.operator.definiteassignment.js',
+            match: '\\!',
+          },
+        ],
+      },
+      'variable-initializer': {
+        patterns: [
+          {
+            begin: '(?<!=|!)(=)(?!=)(?=\\s*\\S)(?!\\s*.*=>\\s*$)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.assignment.js',
+              },
+            },
+            end: '(?=$|^|[,);}\\]]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            begin: '(?<!=|!)(=)(?!=)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.assignment.js',
+              },
+            },
+            end: '(?=[,);}\\]]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))|(?=^\\s*$)|(?<![\\|\\&\\+\\-\\*\\/])(?<=\\S)(?<!=)(?=\\s*$)',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+        ],
+      },
+      'component-declaration': {
+        name: 'meta.function.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdefault)\\s+)?(?:(\\bdeclare)\\s+)?(component\\b)(?:\\s*(\\*))?(?:(?:\\s+|(?<=\\*))([_$[:alpha:]][_$[:alnum:]]*))?\\s*',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'keyword.control.default.js',
+          },
+          '3': {
+            name: 'storage.modifier.js',
+          },
+          '4': {
+            name: 'storage.type.function.js',
+          },
+          '5': {
+            name: 'keyword.generator.asterisk.js',
+          },
+          '6': {
+            name: 'meta.definition.function.js entity.name.function.js',
+          },
+        },
+        end: '(?=;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|(?<=\\})',
+        patterns: [
+          {
+            include: '#function-name',
+          },
+          {
+            include: '#component-body',
+          },
+        ],
+      },
+      'fragment-declaration': {
+        name: 'meta.function.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdefault)\\s+)?(?:(\\bdeclare)\\s+)?(fragment\\b)(?:\\s*(\\*))?(?:(?:\\s+|(?<=\\*))([_$[:alpha:]][_$[:alnum:]]*))?\\s*',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'keyword.control.default.js',
+          },
+          '3': {
+            name: 'storage.modifier.js',
+          },
+          '4': {
+            name: 'storage.type.function.js',
+          },
+          '5': {
+            name: 'keyword.generator.asterisk.js',
+          },
+          '6': {
+            name: 'meta.definition.function.js entity.name.function.js',
+          },
+        },
+        end: '(?=;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|(?<=\\})',
+        patterns: [
+          {
+            include: '#function-name',
+          },
+          {
+            include: '#component-body',
+          },
+        ],
+      },
+      'function-declaration': {
+        name: 'meta.function.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?(?:(async)\\s+)?(function\\b)(?:\\s*(\\*))?(?:(?:\\s+|(?<=\\*))([_$[:alpha:]][_$[:alnum:]]*))?\\s*',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.modifier.async.js',
+          },
+          '4': {
+            name: 'storage.type.function.js',
+          },
+          '5': {
+            name: 'keyword.generator.asterisk.js',
+          },
+          '6': {
+            name: 'meta.definition.function.js entity.name.function.js',
+          },
+        },
+        end: '(?=;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|(?<=\\})',
+        patterns: [
+          {
+            include: '#function-name',
+          },
+          {
+            include: '#function-body',
+          },
+        ],
+      },
+      'function-expression': {
+        name: 'meta.function.expression.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(async)\\s+)?(function\\b)(?:\\s*(\\*))?(?:(?:\\s+|(?<=\\*))([_$[:alpha:]][_$[:alnum:]]*))?\\s*',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.async.js',
+          },
+          '2': {
+            name: 'storage.type.function.js',
+          },
+          '3': {
+            name: 'keyword.generator.asterisk.js',
+          },
+          '4': {
+            name: 'meta.definition.function.js entity.name.function.js',
+          },
+        },
+        end: '(?=;)|(?<=\\})',
+        patterns: [
+          {
+            include: '#function-name',
+          },
+          {
+            include: '#single-line-comment-consuming-line-ending',
+          },
+          {
+            include: '#function-body',
+          },
+        ],
+      },
+      'function-name': {
+        name: 'meta.definition.function.js entity.name.function.js',
+        match: '[_$[:alpha:]][_$[:alnum:]]*',
+      },
+      'function-body': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#function-parameters',
+          },
+          {
+            include: '#return-type',
+          },
+          {
+            include: '#type-function-return-type',
+          },
+          {
+            include: '#decl-block',
+          },
+          {
+            name: 'keyword.generator.asterisk.js',
+            match: '\\*',
+          },
+        ],
+      },
+      'component-body': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#function-parameters',
+          },
+          {
+            include: '#return-type',
+          },
+          {
+            include: '#type-function-return-type',
+          },
+          {
+            include: '#component-decl-block',
+          },
+          {
+            name: 'keyword.generator.asterisk.js',
+            match: '\\*',
+          },
+        ],
+      },
+      'method-declaration': {
+        patterns: [
+          {
+            name: 'meta.method.declaration.js',
+            begin:
+              '(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(override)\\s+)?(?:\\b(public|private|protected)\\s+)?(?:\\b(abstract)\\s+)?(?:\\b(async)\\s+)?\\s*\\b(constructor)\\b(?!:)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'storage.modifier.js',
+              },
+              '4': {
+                name: 'storage.modifier.async.js',
+              },
+              '5': {
+                name: 'storage.type.js',
+              },
+            },
+            end: '(?=\\}|;|,|$)|(?<=\\})',
+            patterns: [
+              {
+                include: '#method-declaration-name',
+              },
+              {
+                include: '#function-body',
+              },
+            ],
+          },
+          {
+            name: 'meta.method.declaration.js',
+            begin:
+              '(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(override)\\s+)?(?:\\b(public|private|protected)\\s+)?(?:\\b(abstract)\\s+)?(?:\\b(async)\\s+)?(?:(?:\\s*\\b(new)\\b(?!:)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))|(?:(\\*)\\s*)?)(?=\\s*((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?[\\(])',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'storage.modifier.js',
+              },
+              '4': {
+                name: 'storage.modifier.async.js',
+              },
+              '5': {
+                name: 'keyword.operator.new.js',
+              },
+              '6': {
+                name: 'keyword.generator.asterisk.js',
+              },
+            },
+            end: '(?=\\}|;|,|$)|(?<=\\})',
+            patterns: [
+              {
+                include: '#method-declaration-name',
+              },
+              {
+                include: '#function-body',
+              },
+            ],
+          },
+          {
+            name: 'meta.method.declaration.js',
+            begin:
+              '(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(override)\\s+)?(?:\\b(public|private|protected)\\s+)?(?:\\b(abstract)\\s+)?(?:\\b(async)\\s+)?(?:\\b(get|set)\\s+)?(?:(\\*)\\s*)?(?=\\s*(((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(\\??))\\s*((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?[\\(])',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'storage.modifier.js',
+              },
+              '4': {
+                name: 'storage.modifier.async.js',
+              },
+              '5': {
+                name: 'storage.type.property.js',
+              },
+              '6': {
+                name: 'keyword.generator.asterisk.js',
+              },
+            },
+            end: '(?=\\}|;|,|$)|(?<=\\})',
+            patterns: [
+              {
+                include: '#method-declaration-name',
+              },
+              {
+                include: '#function-body',
+              },
+            ],
+          },
+        ],
+      },
+      'object-literal-method-declaration': {
+        name: 'meta.method.declaration.js',
+        begin:
+          '(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(async)\\s+)?(?:\\b(get|set)\\s+)?(?:(\\*)\\s*)?(?=\\s*(((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(\\??))\\s*((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?[\\(])',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.async.js',
+          },
+          '2': {
+            name: 'storage.type.property.js',
+          },
+          '3': {
+            name: 'keyword.generator.asterisk.js',
+          },
+        },
+        end: '(?=\\}|;|,)|(?<=\\})',
+        patterns: [
+          {
+            include: '#method-declaration-name',
+          },
+          {
+            include: '#function-body',
+          },
+          {
+            begin:
+              '(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(async)\\s+)?(?:\\b(get|set)\\s+)?(?:(\\*)\\s*)?(?=\\s*(((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(\\??))\\s*((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?[\\(])',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.async.js',
+              },
+              '2': {
+                name: 'storage.type.property.js',
+              },
+              '3': {
+                name: 'keyword.generator.asterisk.js',
+              },
+            },
+            end: '(?=\\(|\\<)',
+            patterns: [
+              {
+                include: '#method-declaration-name',
+              },
+            ],
+          },
+        ],
+      },
+      'method-declaration-name': {
+        begin:
+          '(?x)(?=((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(\\??)\\s*[\\(\\<])',
+        end: '(?=\\(|\\<)',
+        patterns: [
+          {
+            include: '#string',
+          },
+          {
+            include: '#array-literal',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            name: 'meta.definition.method.js entity.name.function.js',
+            match: '[_$[:alpha:]][_$[:alnum:]]*',
+          },
+          {
+            name: 'keyword.operator.optional.js',
+            match: '\\?',
+          },
+        ],
+      },
+      'arrow-function': {
+        patterns: [
+          {
+            name: 'meta.arrow.js',
+            match:
+              '(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(\\basync)\\s+)?([_$[:alpha:]][_$[:alnum:]]*)\\s*(?==>)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.async.js',
+              },
+              '2': {
+                name: 'variable.parameter.js',
+              },
+            },
+          },
+          {
+            name: 'meta.arrow.js',
+            begin:
+              '(?x) (?:\n  (?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(\\basync)\n)? ((?<![})!\\]])\\s*\n  (?=\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  )\n)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.async.js',
+              },
+            },
+            end: '(?==>|\\{|(^\\s*(export|function|class|interface|let|var|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|const|import|enum|namespace|module|type|abstract|declare)\\s+))',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#type-parameters',
+              },
+              {
+                include: '#function-parameters',
+              },
+              {
+                include: '#arrow-return-type',
+              },
+              {
+                include: '#possibly-arrow-return-type',
+              },
+            ],
+          },
+          {
+            name: 'meta.arrow.js',
+            begin: '=>',
+            beginCaptures: {
+              '0': {
+                name: 'storage.type.function.arrow.js',
+              },
+            },
+            end: '((?<=\\}|\\S)(?<!=>)|((?!\\{)(?=\\S)))(?!\\/[\\/\\*])',
+            patterns: [
+              {
+                include: '#single-line-comment-consuming-line-ending',
+              },
+              {
+                include: '#decl-block',
+              },
+              {
+                include: '#expression',
+              },
+            ],
+          },
+        ],
+      },
+      'indexer-declaration': {
+        name: 'meta.indexer.declaration.js',
+        begin:
+          '(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(readonly)\\s*)?\\s*(\\[)\\s*([_$[:alpha:]][_$[:alnum:]]*)\\s*(?=:)',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.js',
+          },
+          '2': {
+            name: 'meta.brace.square.js',
+          },
+          '3': {
+            name: 'variable.parameter.js',
+          },
+        },
+        end: '(\\])\\s*(\\?\\s*)?|$',
+        endCaptures: {
+          '1': {
+            name: 'meta.brace.square.js',
+          },
+          '2': {
+            name: 'keyword.operator.optional.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#type-annotation',
+          },
+        ],
+      },
+      'indexer-mapped-type-declaration': {
+        name: 'meta.indexer.mappedtype.declaration.js',
+        begin:
+          '(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))([+-])?(readonly)\\s*)?\\s*(\\[)\\s*([_$[:alpha:]][_$[:alnum:]]*)\\s+(in)\\s+',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.type.modifier.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'meta.brace.square.js',
+          },
+          '4': {
+            name: 'entity.name.type.js',
+          },
+          '5': {
+            name: 'keyword.operator.expression.in.js',
+          },
+        },
+        end: '(\\])([+-])?\\s*(\\?\\s*)?|$',
+        endCaptures: {
+          '1': {
+            name: 'meta.brace.square.js',
+          },
+          '2': {
+            name: 'keyword.operator.type.modifier.js',
+          },
+          '3': {
+            name: 'keyword.operator.optional.js',
+          },
+        },
+        patterns: [
+          {
+            match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as)\\s+',
+            captures: {
+              '1': {
+                name: 'keyword.control.as.js',
+              },
+            },
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'function-parameters': {
+        name: 'meta.parameters.js',
+        begin: '\\(',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.parameters.begin.js',
+          },
+        },
+        end: '\\)',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.parameters.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#function-parameters-body',
+          },
+        ],
+      },
+      'function-parameters-body': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#decorator',
+          },
+          {
+            include: '#destructuring-parameter',
+          },
+          {
+            include: '#parameter-name',
+          },
+          {
+            include: '#parameter-type-annotation',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            name: 'punctuation.separator.parameter.js',
+            match: ',',
+          },
+        ],
+      },
+      'class-declaration': {
+        name: 'meta.class.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(?:(abstract)\\s+)?\\b(class)\\b(?=\\s+|/[/*])',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.modifier.js',
+          },
+          '4': {
+            name: 'storage.type.class.js',
+          },
+        },
+        end: '(?<=\\})',
+        patterns: [
+          {
+            include: '#class-declaration-or-expression-patterns',
+          },
+        ],
+      },
+      'class-expression': {
+        name: 'meta.class.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(abstract)\\s+)?(class)\\b(?=\\s+|[<{]|\\/[\\/*])',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.js',
+          },
+          '2': {
+            name: 'storage.type.class.js',
+          },
+        },
+        end: '(?<=\\})',
+        patterns: [
+          {
+            include: '#class-declaration-or-expression-patterns',
+          },
+        ],
+      },
+      'eval-expression': {
+        name: 'meta.eval.expression.js',
+        begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(eval)\\s*(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.eval.js',
+          },
+          '2': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        contentName: 'string.unquoted.eval-content.js',
+      },
+      'class-declaration-or-expression-patterns': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#class-or-interface-heritage',
+          },
+          {
+            match: '[_$[:alpha:]][_$[:alnum:]]*',
+            captures: {
+              '0': {
+                name: 'entity.name.type.class.js',
+              },
+            },
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#class-or-interface-body',
+          },
+        ],
+      },
+      'interface-declaration': {
+        name: 'meta.interface.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(?:(abstract)\\s+)?\\b(interface)\\b(?=\\s+|/[/*])',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.modifier.js',
+          },
+          '4': {
+            name: 'storage.type.interface.js',
+          },
+        },
+        end: '(?<=\\})',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#class-or-interface-heritage',
+          },
+          {
+            match: '[_$[:alpha:]][_$[:alnum:]]*',
+            captures: {
+              '0': {
+                name: 'entity.name.type.interface.js',
+              },
+            },
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#class-or-interface-body',
+          },
+        ],
+      },
+      'class-or-interface-heritage': {
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(extends|implements)\\b)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.js',
+          },
+        },
+        end: '(?=\\{)',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#class-or-interface-heritage',
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#expressionWithoutIdentifiers',
+          },
+          {
+            match:
+              '([_$[:alpha:]][_$[:alnum:]]*)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))(?=\\s*[_$[:alpha:]][_$[:alnum:]]*(\\s*\\??\\.\\s*[_$[:alpha:]][_$[:alnum:]]*)*\\s*)',
+            captures: {
+              '1': {
+                name: 'entity.name.type.module.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.optional.js',
+              },
+            },
+          },
+          {
+            match: '([_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'entity.other.inherited-class.js',
+              },
+            },
+          },
+          {
+            include: '#expressionPunctuations',
+          },
+        ],
+      },
+      'class-or-interface-body': {
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#decorator',
+          },
+          {
+            begin: '(?<=:)\\s*',
+            end: '(?=\\s|[;),}\\]:\\-\\+]|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            include: '#method-declaration',
+          },
+          {
+            include: '#indexer-declaration',
+          },
+          {
+            include: '#field-declaration',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#type-annotation',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            include: '#access-modifier',
+          },
+          {
+            include: '#property-accessor',
+          },
+          {
+            include: '#async-modifier',
+          },
+          {
+            include: '#after-operator-block-as-object-literal',
+          },
+          {
+            include: '#decl-block',
+          },
+          {
+            include: '#expression',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            include: '#punctuation-semicolon',
+          },
+        ],
+      },
+      'access-modifier': {
+        name: 'storage.modifier.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(abstract|declare|override|public|protected|private|readonly|static)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'property-accessor': {
+        name: 'storage.type.property.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(accessor|get|set)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'async-modifier': {
+        name: 'storage.modifier.async.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(async)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'enum-declaration': {
+        name: 'meta.enum.declaration.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?(?:\\b(const)\\s+)?\\b(enum)\\s+([_$[:alpha:]][_$[:alnum:]]*)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.modifier.js',
+          },
+          '4': {
+            name: 'storage.type.enum.js',
+          },
+          '5': {
+            name: 'entity.name.type.enum.js',
+          },
+        },
+        end: '(?<=\\})',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin: '\\{',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.block.js',
+              },
+            },
+            end: '\\}',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.block.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                begin: '([_$[:alpha:]][_$[:alnum:]]*)',
+                beginCaptures: {
+                  '0': {
+                    name: 'variable.other.enummember.js',
+                  },
+                },
+                end: '(?=,|\\}|$)',
+                patterns: [
+                  {
+                    include: '#comment',
+                  },
+                  {
+                    include: '#variable-initializer',
+                  },
+                ],
+              },
+              {
+                begin:
+                  '(?=((\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\])))',
+                end: '(?=,|\\}|$)',
+                patterns: [
+                  {
+                    include: '#string',
+                  },
+                  {
+                    include: '#array-literal',
+                  },
+                  {
+                    include: '#comment',
+                  },
+                  {
+                    include: '#variable-initializer',
+                  },
+                ],
+              },
+              {
+                include: '#punctuation-comma',
+              },
+            ],
+          },
+        ],
+      },
+      'namespace-declaration': {
+        name: 'meta.namespace.declaration.js',
+        begin:
+          '(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(namespace|module)\\s+(?=[_$[:alpha:]"\'`]))',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.type.namespace.js',
+          },
+        },
+        end: '(?<=\\})|(?=;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            name: 'entity.name.type.module.js',
+            match: '([_$[:alpha:]][_$[:alnum:]]*)',
+          },
+          {
+            include: '#punctuation-accessor',
+          },
+          {
+            include: '#decl-block',
+          },
+        ],
+      },
+      'type-alias-declaration': {
+        name: 'meta.type.declaration.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(type)\\b\\s+([_$[:alpha:]][_$[:alnum:]]*)\\s*',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.type.type.js',
+          },
+          '4': {
+            name: 'entity.name.type.alias.js',
+          },
+        },
+        end: '(?=\\}|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            begin: '(=)\\s*(intrinsic)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.assignment.js',
+              },
+              '2': {
+                name: 'keyword.control.intrinsic.js',
+              },
+            },
+            end: '(?=\\}|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+          {
+            begin: '(=)\\s*',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.assignment.js',
+              },
+            },
+            end: '(?=\\}|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+        ],
+      },
+      'import-equals-declaration': {
+        patterns: [
+          {
+            name: 'meta.import-equals.external.js',
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(import)(?:\\s+(type))?\\s+([_$[:alpha:]][_$[:alnum:]]*)\\s*(=)\\s*(require)\\s*(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'keyword.control.import.js',
+              },
+              '4': {
+                name: 'keyword.control.type.js',
+              },
+              '5': {
+                name: 'variable.other.readwrite.alias.js',
+              },
+              '6': {
+                name: 'keyword.operator.assignment.js',
+              },
+              '7': {
+                name: 'keyword.control.require.js',
+              },
+              '8': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#string',
+              },
+            ],
+          },
+          {
+            name: 'meta.import-equals.internal.js',
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(import)(?:\\s+(type))?\\s+([_$[:alpha:]][_$[:alnum:]]*)\\s*(=)\\s*(?!require\\b)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'keyword.control.import.js',
+              },
+              '4': {
+                name: 'keyword.control.type.js',
+              },
+              '5': {
+                name: 'variable.other.readwrite.alias.js',
+              },
+              '6': {
+                name: 'keyword.operator.assignment.js',
+              },
+            },
+            end: '(?=;|$|^)',
+            patterns: [
+              {
+                include: '#single-line-comment-consuming-line-ending',
+              },
+              {
+                include: '#comment',
+              },
+              {
+                match: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))',
+                captures: {
+                  '1': {
+                    name: 'entity.name.type.module.js',
+                  },
+                  '2': {
+                    name: 'punctuation.accessor.js',
+                  },
+                  '3': {
+                    name: 'punctuation.accessor.optional.js',
+                  },
+                },
+              },
+              {
+                name: 'variable.other.readwrite.js',
+                match: '([_$[:alpha:]][_$[:alnum:]]*)',
+              },
+            ],
+          },
+        ],
+      },
+      'import-declaration': {
+        name: 'meta.import.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(import)(?:\\s+(type)(?!\\s+from))?(?!\\s*[:\\(])(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'keyword.control.import.js',
+          },
+          '4': {
+            name: 'keyword.control.type.js',
+          },
+        },
+        end: '(?<!^import|[^\\._$[:alnum:]]import)(?=;|$|^)',
+        patterns: [
+          {
+            include: '#single-line-comment-consuming-line-ending',
+          },
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            begin: '(?<=^import|[^\\._$[:alnum:]]import)(?!\\s*["\'])',
+            end: '\\bfrom\\b',
+            endCaptures: {
+              '0': {
+                name: 'keyword.control.from.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#import-export-declaration',
+              },
+            ],
+          },
+          {
+            include: '#import-export-declaration',
+          },
+        ],
+      },
+      'export-declaration': {
+        patterns: [
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(export)\\s+(as)\\s+(namespace)\\s+([_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'keyword.control.as.js',
+              },
+              '3': {
+                name: 'storage.type.namespace.js',
+              },
+              '4': {
+                name: 'entity.name.type.module.js',
+              },
+            },
+          },
+          {
+            name: 'meta.export.default.js',
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(export)(?:\\s+(type))?(?:(?:\\s*(=))|(?:\\s+(default)(?=\\s+)))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'keyword.control.type.js',
+              },
+              '3': {
+                name: 'keyword.operator.assignment.js',
+              },
+              '4': {
+                name: 'keyword.control.default.js',
+              },
+            },
+            end: '(?=$|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#interface-declaration',
+              },
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'meta.export.js',
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(export)(?:\\s+(type))?\\b(?!(\\$)|(\\s*:))((?=\\s*[\\{*])|((?=\\s*[_$[:alpha:]][_$[:alnum:]]*(\\s|,))(?!\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'keyword.control.type.js',
+              },
+            },
+            end: '(?=$|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#import-export-declaration',
+              },
+            ],
+          },
+        ],
+      },
+      'import-export-declaration': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#import-export-block',
+          },
+          {
+            name: 'keyword.control.from.js',
+            match: '\\bfrom\\b',
+          },
+          {
+            include: '#import-export-assert-clause',
+          },
+          {
+            include: '#import-export-clause',
+          },
+        ],
+      },
+      'import-export-assert-clause': {
+        begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(with)|(assert))\\s*(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.with.js',
+          },
+          '2': {
+            name: 'keyword.control.assert.js',
+          },
+          '3': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            name: 'meta.object-literal.key.js',
+            match:
+              '(?:[_$[:alpha:]][_$[:alnum:]]*)\\s*(?=(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*:)',
+          },
+          {
+            name: 'punctuation.separator.key-value.js',
+            match: ':',
+          },
+        ],
+      },
+      'import-export-block': {
+        name: 'meta.block.js',
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#import-export-clause',
+          },
+        ],
+      },
+      'import-export-clause': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(?:(\\btype)\\s+)?(?:(\\bdefault)|(\\*)|(\\b[_$[:alpha:]][_$[:alnum:]]*)|((\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))))\\s+(as)\\s+(?:(default(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))|([_$[:alpha:]][_$[:alnum:]]*)|((\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)))',
+            captures: {
+              '1': {
+                name: 'keyword.control.type.js',
+              },
+              '2': {
+                name: 'keyword.control.default.js',
+              },
+              '3': {
+                name: 'constant.language.import-export-all.js',
+              },
+              '4': {
+                name: 'variable.other.readwrite.js',
+              },
+              '5': {
+                name: 'string.quoted.alias.js',
+              },
+              '12': {
+                name: 'keyword.control.as.js',
+              },
+              '13': {
+                name: 'keyword.control.default.js',
+              },
+              '14': {
+                name: 'variable.other.readwrite.alias.js',
+              },
+              '15': {
+                name: 'string.quoted.alias.js',
+              },
+            },
+          },
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            name: 'constant.language.import-export-all.js',
+            match: '\\*',
+          },
+          {
+            name: 'keyword.control.default.js',
+            match: '\\b(default)\\b',
+          },
+          {
+            match:
+              '(?:(\\btype)\\s+)?(?:([_$[:alpha:]][_$[:alnum:]]*)|((\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)))',
+            captures: {
+              '1': {
+                name: 'keyword.control.type.js',
+              },
+              '2': {
+                name: 'variable.other.readwrite.alias.js',
+              },
+              '3': {
+                name: 'string.quoted.alias.js',
+              },
+            },
+          },
+        ],
+      },
+      'switch-statement': {
+        name: 'switch-statement.expr.js',
+        begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?=\\bswitch\\s*\\()',
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            name: 'switch-expression.expr.js',
+            begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(switch)\\s*(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.switch.js',
+              },
+              '2': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'switch-block.expr.js',
+            begin: '\\{',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.block.js',
+              },
+            },
+            end: '(?=\\})',
+            patterns: [
+              {
+                name: 'case-clause.expr.js',
+                begin:
+                  '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(case|default(?=:))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.switch.js',
+                  },
+                },
+                end: '(?=:)',
+                patterns: [
+                  {
+                    include: '#expression',
+                  },
+                ],
+              },
+              {
+                begin: '(:)\\s*(\\{)',
+                beginCaptures: {
+                  '1': {
+                    name: 'case-clause.expr.js punctuation.definition.section.case-statement.js',
+                  },
+                  '2': {
+                    name: 'meta.block.js punctuation.definition.block.js',
+                  },
+                },
+                end: '\\}',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.block.js punctuation.definition.block.js',
+                  },
+                },
+                contentName: 'meta.block.js',
+                patterns: [
+                  {
+                    include: '#statements',
+                  },
+                ],
+              },
+              {
+                match: '(:)',
+                captures: {
+                  '0': {
+                    name: 'case-clause.expr.js punctuation.definition.section.case-statement.js',
+                  },
+                },
+              },
+              {
+                include: '#statements',
+              },
+            ],
+          },
+        ],
+      },
+      'component-switch-statement': {
+        name: 'switch-statement.expr.js',
+        begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?=\\bswitch\\s*\\()',
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            name: 'switch-expression.expr.js',
+            begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(switch)\\s*(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.switch.js',
+              },
+              '2': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'switch-block.expr.js',
+            begin: '\\{',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.block.js',
+              },
+            },
+            end: '(?=\\})',
+            patterns: [
+              {
+                name: 'case-clause.expr.js',
+                begin:
+                  '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(case|default(?=:))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.switch.js',
+                  },
+                },
+                end: '(?=:)',
+                patterns: [
+                  {
+                    include: '#expression',
+                  },
+                ],
+              },
+              {
+                begin: '(:)\\s*(\\{)',
+                beginCaptures: {
+                  '1': {
+                    name: 'case-clause.expr.js punctuation.definition.section.case-statement.js',
+                  },
+                  '2': {
+                    name: 'meta.block.js punctuation.definition.block.js',
+                  },
+                },
+                end: '\\}',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.block.js punctuation.definition.block.js',
+                  },
+                },
+                contentName: 'meta.block.js',
+                patterns: [
+                  {
+                    include: '#statements',
+                  },
+                ],
+              },
+              {
+                match: '(:)',
+                captures: {
+                  '0': {
+                    name: 'case-clause.expr.js punctuation.definition.section.case-statement.js',
+                  },
+                },
+              },
+              {
+                include: '#component-statements',
+              },
+            ],
+          },
+        ],
+      },
+      'for-loop': {
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))for(?=((\\s+|(\\s*\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*))await)?\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)?(\\())',
+        beginCaptures: {
+          '0': {
+            name: 'keyword.control.loop.js',
+          },
+        },
+        end: '(?<=\\))',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            name: 'keyword.control.loop.js',
+            match: 'await',
+          },
+          {
+            begin: '\\(',
+            beginCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#var-expr',
+              },
+              {
+                include: '#expression',
+              },
+              {
+                include: '#punctuation-semicolon',
+              },
+            ],
+          },
+        ],
+      },
+      'if-statement': {
+        patterns: [
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?=\\bif\\s*(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))\\s*(?!\\{))',
+            end: '(?=;|$|\\})',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(if)\\s*(\\()',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.conditional.js',
+                  },
+                  '2': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                end: '\\)',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#expression',
+                  },
+                ],
+              },
+              {
+                name: 'string.regexp.js',
+                begin:
+                  '(?<=\\))\\s*\\/(?![\\/*])(?=(?:[^\\/\\\\\\[]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\])+\\/([dgimsuvy]+|(?![\\/\\*])|(?=\\/\\*))(?!\\s*[a-zA-Z0-9_$]))',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.begin.js',
+                  },
+                },
+                end: '(/)([dgimsuvy]*)',
+                endCaptures: {
+                  '1': {
+                    name: 'punctuation.definition.string.end.js',
+                  },
+                  '2': {
+                    name: 'keyword.other.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#regexp',
+                  },
+                ],
+              },
+              {
+                include: '#statements',
+              },
+            ],
+          },
+        ],
+      },
+      'component-if-statement': {
+        patterns: [
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?=\\bif\\s*(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))\\s*(?!\\{))',
+            end: '(?=;|$|\\})',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(if)\\s*(\\()',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.conditional.js',
+                  },
+                  '2': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                end: '\\)',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#expression',
+                  },
+                ],
+              },
+              {
+                name: 'string.regexp.js',
+                begin:
+                  '(?<=\\))\\s*\\/(?![\\/*])(?=(?:[^\\/\\\\\\[]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\])+\\/([dgimsuvy]+|(?![\\/\\*])|(?=\\/\\*))(?!\\s*[a-zA-Z0-9_$]))',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.begin.js',
+                  },
+                },
+                end: '(/)([dgimsuvy]*)',
+                endCaptures: {
+                  '1': {
+                    name: 'punctuation.definition.string.end.js',
+                  },
+                  '2': {
+                    name: 'keyword.other.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#regexp',
+                  },
+                ],
+              },
+              {
+                include: '#component-statements',
+              },
+            ],
+          },
+        ],
+      },
+      'decl-block': {
+        name: 'meta.block.js',
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#statements',
+          },
+        ],
+      },
+      'component-decl-block': {
+        name: 'meta.block.js',
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#component-statements',
+          },
+        ],
+      },
+      'after-operator-block-as-object-literal': {
+        name: 'meta.objectliteral.js',
+        begin:
+          '(?<!\\+\\+|--)(?<=[:=(,\\[?+!>]|^await|[^\\._$[:alnum:]]await|^return|[^\\._$[:alnum:]]return|^yield|[^\\._$[:alnum:]]yield|^throw|[^\\._$[:alnum:]]throw|^in|[^\\._$[:alnum:]]in|^of|[^\\._$[:alnum:]]of|^typeof|[^\\._$[:alnum:]]typeof|&&|\\|\\||\\*)\\s*(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#object-member',
+          },
+        ],
+      },
+      'object-literal': {
+        name: 'meta.objectliteral.js',
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#object-member',
+          },
+        ],
+      },
+      'object-member': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#object-literal-method-declaration',
+          },
+          {
+            name: 'meta.object.member.js meta.object-literal.key.js',
+            begin: '(?=\\[)',
+            end: '(?=:)|((?<=[\\]])(?=\\s*[\\(\\<]))',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#array-literal',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js meta.object-literal.key.js',
+            begin: '(?=[\\\'\\"\\`])',
+            end: '(?=:)|((?<=[\\\'\\"\\`])(?=((\\s*[\\(\\<,}])|(\\s+(as|satisifies)\\s+))))',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#string',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js meta.object-literal.key.js',
+            begin:
+              '(?x)(?=(\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$)))',
+            end: '(?=:)|(?=\\s*([\\(\\<,}])|(\\s+as|satisifies\\s+))',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#numeric-literal',
+              },
+            ],
+          },
+          {
+            name: 'meta.method.declaration.js',
+            begin: '(?<=[\\]\\\'\\"\\`])(?=\\s*[\\(\\<])',
+            end: '(?=\\}|;|,)|(?<=\\})',
+            patterns: [
+              {
+                include: '#function-body',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js',
+            match:
+              '(?![_$[:alpha:]])([[:digit:]]+)\\s*(?=(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*:)',
+            captures: {
+              '0': {
+                name: 'meta.object-literal.key.js',
+              },
+              '1': {
+                name: 'constant.numeric.decimal.js',
+              },
+            },
+          },
+          {
+            name: 'meta.object.member.js',
+            match:
+              '(?x)(?:([_$[:alpha:]][_$[:alnum:]]*)\\s*(?=(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*:(\\s*\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/)*\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            captures: {
+              '0': {
+                name: 'meta.object-literal.key.js',
+              },
+              '1': {
+                name: 'entity.name.function.js',
+              },
+            },
+          },
+          {
+            name: 'meta.object.member.js',
+            match:
+              '(?:[_$[:alpha:]][_$[:alnum:]]*)\\s*(?=(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*:)',
+            captures: {
+              '0': {
+                name: 'meta.object-literal.key.js',
+              },
+            },
+          },
+          {
+            name: 'meta.object.member.js',
+            begin: '\\.\\.\\.',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.operator.spread.js',
+              },
+            },
+            end: '(?=,|\\})',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js',
+            match: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(?=,|\\}|$|\\/\\/|\\/\\*)',
+            captures: {
+              '1': {
+                name: 'variable.other.readwrite.js',
+              },
+            },
+          },
+          {
+            name: 'meta.object.member.js',
+            match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as)\\s+(const)(?=\\s*([,}]|$))',
+            captures: {
+              '1': {
+                name: 'keyword.control.as.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            name: 'meta.object.member.js',
+            begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(as)|(satisfies))\\s+',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.as.js',
+              },
+              '2': {
+                name: 'keyword.control.satisfies.js',
+              },
+            },
+            end: '(?=[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|^|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as|satisifies)\\s+))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js',
+            begin: '(?=[_$[:alpha:]][_$[:alnum:]]*\\s*=)',
+            end: '(?=,|\\}|$|\\/\\/|\\/\\*)',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js',
+            begin: ':',
+            beginCaptures: {
+              '0': {
+                name: 'meta.object-literal.key.js punctuation.separator.key-value.js',
+              },
+            },
+            end: '(?=,|\\})',
+            patterns: [
+              {
+                begin:
+                  '(?<=:)\\s*(async)?(?=\\s*(<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)\\(\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))',
+                beginCaptures: {
+                  '1': {
+                    name: 'storage.modifier.async.js',
+                  },
+                },
+                end: '(?<=\\))',
+                patterns: [
+                  {
+                    include: '#type-parameters',
+                  },
+                  {
+                    begin: '\\(',
+                    beginCaptures: {
+                      '0': {
+                        name: 'meta.brace.round.js',
+                      },
+                    },
+                    end: '\\)',
+                    endCaptures: {
+                      '0': {
+                        name: 'meta.brace.round.js',
+                      },
+                    },
+                    patterns: [
+                      {
+                        include: '#expression-inside-possibly-arrow-parens',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                begin:
+                  '(?<=:)\\s*(async)?\\s*(\\()(?=\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))',
+                beginCaptures: {
+                  '1': {
+                    name: 'storage.modifier.async.js',
+                  },
+                  '2': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                end: '\\)',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#expression-inside-possibly-arrow-parens',
+                  },
+                ],
+              },
+              {
+                begin: '(?<=:)\\s*(async)?\\s*(?=\\<\\s*$)',
+                beginCaptures: {
+                  '1': {
+                    name: 'storage.modifier.async.js',
+                  },
+                },
+                end: '(?<=\\>)',
+                patterns: [
+                  {
+                    include: '#type-parameters',
+                  },
+                ],
+              },
+              {
+                begin:
+                  '(?<=\\>)\\s*(\\()(?=\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))',
+                beginCaptures: {
+                  '1': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                end: '\\)',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#expression-inside-possibly-arrow-parens',
+                  },
+                ],
+              },
+              {
+                include: '#possibly-arrow-return-type',
+              },
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            include: '#decl-block',
+          },
+        ],
+      },
+      'ternary-expression': {
+        begin: '(?!\\?\\.\\s*[^[:digit:]])(\\?)(?!\\?)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.ternary.js',
+          },
+        },
+        end: '\\s*(:)',
+        endCaptures: {
+          '1': {
+            name: 'keyword.operator.ternary.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#expression',
+          },
+        ],
+      },
+      'function-call': {
+        patterns: [
+          {
+            begin:
+              '(?=(((([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))|(?<=[\\)]))\\s*(?:(\\?\\.\\s*)|(\\!))?((<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)?\\())',
+            end: '(?<=\\))(?!(((([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))|(?<=[\\)]))\\s*(?:(\\?\\.\\s*)|(\\!))?((<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)?\\())',
+            patterns: [
+              {
+                name: 'meta.function-call.js',
+                begin:
+                  '(?=(([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))',
+                end: '(?=\\s*(?:(\\?\\.\\s*)|(\\!))?((<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)?\\())',
+                patterns: [
+                  {
+                    include: '#function-call-target',
+                  },
+                ],
+              },
+              {
+                include: '#comment',
+              },
+              {
+                include: '#function-call-optionals',
+              },
+              {
+                include: '#type-arguments',
+              },
+              {
+                include: '#paren-expression',
+              },
+            ],
+          },
+          {
+            begin:
+              '(?=(((([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))|(?<=[\\)]))(<\\s*[\\{\\[\\(]\\s*$))',
+            end: '(?<=\\>)(?!(((([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))|(?<=[\\)]))(<\\s*[\\{\\[\\(]\\s*$))',
+            patterns: [
+              {
+                name: 'meta.function-call.js',
+                begin:
+                  '(?=(([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))',
+                end: '(?=(<\\s*[\\{\\[\\(]\\s*$))',
+                patterns: [
+                  {
+                    include: '#function-call-target',
+                  },
+                ],
+              },
+              {
+                include: '#comment',
+              },
+              {
+                include: '#function-call-optionals',
+              },
+              {
+                include: '#type-arguments',
+              },
+            ],
+          },
+        ],
+      },
+      'function-call-target': {
+        patterns: [
+          {
+            include: '#support-function-call-identifiers',
+          },
+          {
+            name: 'entity.name.function.js',
+            match: '(\\#?[_$[:alpha:]][_$[:alnum:]]*)',
+          },
+        ],
+      },
+      'function-call-optionals': {
+        patterns: [
+          {
+            name: 'meta.function-call.js punctuation.accessor.optional.js',
+            match: '\\?\\.',
+          },
+          {
+            name: 'meta.function-call.js keyword.operator.definiteassignment.js',
+            match: '\\!',
+          },
+        ],
+      },
+      'support-function-call-identifiers': {
+        patterns: [
+          {
+            include: '#literal',
+          },
+          {
+            include: '#support-objects',
+          },
+          {
+            include: '#object-identifiers',
+          },
+          {
+            include: '#punctuation-accessor',
+          },
+          {
+            name: 'keyword.operator.expression.import.js',
+            match:
+              '(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))import(?=\\s*[\\(]\\s*[\\"\\\'\\`]))',
+          },
+        ],
+      },
+      'new-expr': {
+        name: 'new.expr.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(new)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.new.js',
+          },
+        },
+        end: '(?<=\\))|(?=[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))new(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))function((\\s+[_$[:alpha:]][_$[:alnum:]]*)|(\\s*[\\(]))))',
+        patterns: [
+          {
+            include: '#expression',
+          },
+        ],
+      },
+      'instanceof-expr': {
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(instanceof)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.expression.instanceof.js',
+          },
+        },
+        end: '(?<=\\))|(?=[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|(===|!==|==|!=)|(([\\&\\~\\^\\|]\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s+instanceof(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))function((\\s+[_$[:alpha:]][_$[:alnum:]]*)|(\\s*[\\(]))))',
+        patterns: [
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'paren-expression-possibly-arrow': {
+        patterns: [
+          {
+            begin:
+              '(?<=[(=,])\\s*(async)?(?=\\s*((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?\\(\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.async.js',
+              },
+            },
+            end: '(?<=\\))',
+            patterns: [
+              {
+                include: '#paren-expression-possibly-arrow-with-typeparameters',
+              },
+            ],
+          },
+          {
+            begin:
+              '(?<=[(=,]|=>|^return|[^\\._$[:alnum:]]return)\\s*(async)?(?=\\s*((((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?\\()|(<)|((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)))\\s*$)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.async.js',
+              },
+            },
+            end: '(?<=\\))',
+            patterns: [
+              {
+                include: '#paren-expression-possibly-arrow-with-typeparameters',
+              },
+            ],
+          },
+          {
+            include: '#possibly-arrow-return-type',
+          },
+        ],
+      },
+      'paren-expression-possibly-arrow-with-typeparameters': {
+        patterns: [
+          {
+            include: '#type-parameters',
+          },
+          {
+            begin: '\\(',
+            beginCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#expression-inside-possibly-arrow-parens',
+              },
+            ],
+          },
+        ],
+      },
+      'expression-inside-possibly-arrow-parens': {
+        patterns: [
+          {
+            include: '#expressionWithoutIdentifiers',
+          },
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#decorator',
+          },
+          {
+            include: '#destructuring-parameter',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|protected|private|readonly)\\s+(?=(override|public|protected|private|readonly)\\s+)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*(\\??)(?=\\s*\n# function assignment |\n(=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)) |\n# typeannotation is fn type: < | () | (... | (param: | (param, | (param? | (param= | (param) =>\n(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))) |\n(:\\s*(=>|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(<[^<>]*>)|[^<>(),=])+=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'entity.name.function.js variable.language.this.js',
+              },
+              '4': {
+                name: 'entity.name.function.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*(\\??)(?=\\s*[:,]|$)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'variable.parameter.js variable.language.this.js',
+              },
+              '4': {
+                name: 'variable.parameter.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+          {
+            include: '#type-annotation',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            name: 'punctuation.separator.parameter.js',
+            match: ',',
+          },
+          {
+            include: '#identifiers',
+          },
+          {
+            include: '#expressionPunctuations',
+          },
+        ],
+      },
+      'paren-expression': {
+        begin: '\\(',
+        beginCaptures: {
+          '0': {
+            name: 'meta.brace.round.js',
+          },
+        },
+        end: '\\)',
+        endCaptures: {
+          '0': {
+            name: 'meta.brace.round.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#expression',
+          },
+        ],
+      },
+
+      'expression-operators': {
+        patterns: [
+          {
+            name: 'keyword.control.flow.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(await)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(yield)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))(?=\\s*\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*\\*)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.flow.js',
+              },
+            },
+            end: '\\*',
+            endCaptures: {
+              '0': {
+                name: 'keyword.generator.asterisk.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#comment',
+              },
+            ],
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(yield)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))(?:\\s*(\\*))?',
+            captures: {
+              '1': {
+                name: 'keyword.control.flow.js',
+              },
+              '2': {
+                name: 'keyword.generator.asterisk.js',
+              },
+            },
+          },
+          {
+            name: 'keyword.operator.expression.delete.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))delete(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.operator.expression.in.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))in(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))(?!\\()',
+          },
+          {
+            name: 'keyword.operator.expression.of.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))of(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))(?!\\()',
+          },
+          {
+            name: 'keyword.operator.expression.instanceof.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))instanceof(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.operator.new.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))new(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            include: '#typeof-operator',
+          },
+          {
+            name: 'keyword.operator.expression.void.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))void(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as)\\s+(const)(?=\\s*($|[;,:})\\]]))',
+            captures: {
+              '1': {
+                name: 'keyword.control.as.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(as)|(satisfies))\\s+',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.as.js',
+              },
+              '2': {
+                name: 'keyword.control.satisfies.js',
+              },
+            },
+            end: '(?=^|[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as|satisfies)\\s+)|(\\s+\\<))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+          {
+            name: 'keyword.operator.spread.js',
+            match: '\\.\\.\\.',
+          },
+          {
+            name: 'keyword.operator.assignment.compound.js',
+            match: '\\*=|(?<!\\()/=|%=|\\+=|\\-=',
+          },
+          {
+            name: 'keyword.operator.assignment.compound.bitwise.js',
+            match: '\\&=|\\^=|<<=|>>=|>>>=|\\|=',
+          },
+          {
+            name: 'keyword.operator.bitwise.shift.js',
+            match: '<<|>>>|>>',
+          },
+          {
+            name: 'keyword.operator.comparison.js',
+            match: '===|!==|==|!=',
+          },
+          {
+            name: 'keyword.operator.relational.js operator.relational.ripple-force entity.name.operator.relational.ripple',
+            match: '<=|>=|<>|<|>',
+          },
+          {
+            match: '(?<=[_$[:alnum:]])(\\!)\\s*(?:(/=)|(?:(/)(?![/*])))',
+            captures: {
+              '1': {
+                name: 'keyword.operator.logical.js',
+              },
+              '2': {
+                name: 'keyword.operator.assignment.compound.js',
+              },
+              '3': {
+                name: 'keyword.operator.arithmetic.js',
+              },
+            },
+          },
+          {
+            name: 'keyword.operator.logical.js',
+            match: '\\!|&&|\\|\\||\\?\\?',
+          },
+          {
+            name: 'keyword.operator.bitwise.js',
+            match: '\\&|~|\\^|\\|',
+          },
+          {
+            name: 'keyword.operator.assignment.js',
+            match: '\\=',
+          },
+          {
+            name: 'keyword.operator.decrement.js',
+            match: '--',
+          },
+          {
+            name: 'keyword.operator.increment.js',
+            match: '\\+\\+',
+          },
+          {
+            name: 'keyword.operator.arithmetic.js',
+            match: '%|\\*|/|-|\\+',
+          },
+          {
+            begin:
+              '(?<=[_$[:alnum:])\\]])\\s*(?=(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)+(?:(/=)|(?:(/)(?![/*]))))',
+            end: '(?:(/=)|(?:(/)(?!\\*([^\\*]|(\\*[^\\/]))*\\*\\/)))',
+            endCaptures: {
+              '1': {
+                name: 'keyword.operator.assignment.compound.js',
+              },
+              '2': {
+                name: 'keyword.operator.arithmetic.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#comment',
+              },
+            ],
+          },
+          {
+            match: '(?<=[_$[:alnum:])\\]])\\s*(?:(/=)|(?:(/)(?![/*])))',
+            captures: {
+              '1': {
+                name: 'keyword.operator.assignment.compound.js',
+              },
+              '2': {
+                name: 'keyword.operator.arithmetic.js',
+              },
+            },
+          },
+        ],
+      },
+      'typeof-operator': {
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))typeof(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+        beginCaptures: {
+          '0': {
+            name: 'keyword.operator.expression.typeof.js',
+          },
+        },
+        end: '(?=[,);}\\]=>:&|{\\?]|(extends\\s+)|$|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+        patterns: [
+          {
+            include: '#type-arguments',
+          },
+          {
+            include: '#expression',
+          },
+        ],
+      },
+      literal: {
+        patterns: [
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#boolean-literal',
+          },
+          {
+            include: '#null-literal',
+          },
+          {
+            include: '#undefined-literal',
+          },
+          {
+            include: '#numericConstant-literal',
+          },
+          {
+            include: '#array-literal',
+          },
+          {
+            include: '#this-literal',
+          },
+          {
+            include: '#super-literal',
+          },
+        ],
+      },
+      'array-literal': {
+        name: 'meta.array.literal.js',
+        begin: '\\s*(\\[)',
+        beginCaptures: {
+          '1': {
+            name: 'meta.brace.square.js',
+          },
+        },
+        end: '\\]',
+        endCaptures: {
+          '0': {
+            name: 'meta.brace.square.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#expression',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'numeric-literal': {
+        patterns: [
+          {
+            name: 'constant.numeric.hex.js',
+            match: '\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+            },
+          },
+          {
+            name: 'constant.numeric.binary.js',
+            match: '\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+            },
+          },
+          {
+            name: 'constant.numeric.octal.js',
+            match: '\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)\n(?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$)',
+            captures: {
+              '0': {
+                name: 'constant.numeric.decimal.js',
+              },
+              '1': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '2': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '3': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '4': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '5': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '6': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '7': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '8': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '9': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '10': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '11': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '12': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '13': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '14': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+            },
+          },
+        ],
+      },
+      'boolean-literal': {
+        patterns: [
+          {
+            name: 'constant.language.boolean.true.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))true(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'constant.language.boolean.false.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))false(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      'null-literal': {
+        name: 'constant.language.null.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))null(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'this-literal': {
+        name: 'variable.language.this.js',
+        match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))this\\b(?!\\$)',
+      },
+      'super-literal': {
+        name: 'variable.language.super.js',
+        match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))super\\b(?!\\$)',
+      },
+      'undefined-literal': {
+        name: 'constant.language.undefined.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))undefined(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'numericConstant-literal': {
+        patterns: [
+          {
+            name: 'constant.language.nan.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))NaN(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'constant.language.infinity.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Infinity(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      'support-objects': {
+        patterns: [
+          {
+            name: 'variable.language.arguments.js',
+            match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(arguments)\\b(?!\\$)',
+          },
+          {
+            name: 'support.class.promise.js',
+            match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(Promise)\\b(?!\\$)',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(import)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(meta)\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'keyword.control.import.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '4': {
+                name: 'support.variable.property.importmeta.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(new)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(target)\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'keyword.operator.new.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '4': {
+                name: 'support.variable.property.target.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x) (?:(\\.)|(\\?\\.(?!\\s*[[:digit:]]))) \\s* (?:\n  (?:(constructor|length|prototype|__proto__)\\b(?!\\$|\\s*(<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\\())\n  |\n  (?:(EPSILON|MAX_SAFE_INTEGER|MAX_VALUE|MIN_SAFE_INTEGER|MIN_VALUE|NEGATIVE_INFINITY|POSITIVE_INFINITY)\\b(?!\\$)))',
+            captures: {
+              '1': {
+                name: 'punctuation.accessor.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '3': {
+                name: 'support.variable.property.js',
+              },
+              '4': {
+                name: 'support.constant.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(exports)|(module)(?:(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))(exports|id|filename|loaded|parent|children))?)\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'support.type.object.module.js',
+              },
+              '2': {
+                name: 'support.type.object.module.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.js',
+              },
+              '4': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '5': {
+                name: 'support.type.object.module.js',
+              },
+            },
+          },
+        ],
+      },
+      identifiers: {
+        patterns: [
+          {
+            include: '#object-identifiers',
+          },
+          {
+            match:
+              '(?x)(?:(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*)?([_$[:alpha:]][_$[:alnum:]]*)(?=\\s*=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n))',
+            captures: {
+              '1': {
+                name: 'punctuation.accessor.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '3': {
+                name: 'entity.name.function.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(\\#?[[:upper:]][_$[:digit:][:upper:]]*)(?![_$[:alnum:]])',
+            captures: {
+              '1': {
+                name: 'punctuation.accessor.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '3': {
+                name: 'variable.other.constant.property.js',
+              },
+            },
+          },
+          {
+            match: '(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'punctuation.accessor.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '3': {
+                name: 'variable.other.property.js',
+              },
+            },
+          },
+          {
+            name: 'variable.other.constant.js',
+            match: '([[:upper:]][_$[:digit:][:upper:]]*)(?![_$[:alnum:]])',
+          },
+          {
+            name: 'variable.other.readwrite.js',
+            match: '[_$[:alpha:]][_$[:alnum:]]*',
+          },
+        ],
+      },
+      'object-identifiers': {
+        patterns: [
+          {
+            name: 'support.class.js',
+            match: '([_$[:alpha:]][_$[:alnum:]]*)(?=\\s*\\??\\.\\s*prototype\\b(?!\\$))',
+          },
+          {
+            match:
+              '(?x)(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(?:\n  (\\#?[[:upper:]][_$[:digit:][:upper:]]*) |\n  (\\#?[_$[:alpha:]][_$[:alnum:]]*)\n)(?=\\s*\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'punctuation.accessor.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '3': {
+                name: 'variable.other.constant.object.property.js',
+              },
+              '4': {
+                name: 'variable.other.object.property.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:\n  ([[:upper:]][_$[:digit:][:upper:]]*) |\n  ([_$[:alpha:]][_$[:alnum:]]*)\n)(?=\\s*\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'variable.other.constant.object.js',
+              },
+              '2': {
+                name: 'variable.other.object.js',
+              },
+            },
+          },
+        ],
+      },
+      'type-annotation': {
+        patterns: [
+          {
+            name: 'meta.type.annotation.js',
+            begin: '(:)(?=\\s*\\S)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.type.annotation.js',
+              },
+            },
+            end: '(?<![:|&])(?!\\s*[|&]\\s+)((?=^|[,);\\}\\]]|//)|(?==[^>])|((?<=[\\}>\\]\\)]|[_$[:alpha:]])\\s*(?=\\{)))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+          {
+            name: 'meta.type.annotation.js',
+            begin: '(:)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.type.annotation.js',
+              },
+            },
+            end: '(?<![:|&])((?=[,);\\}\\]]|\\/\\/)|(?==[^>])|(?=^\\s*$)|((?<=[\\}>\\]\\)]|[_$[:alpha:]])\\s*(?=\\{)))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+        ],
+      },
+      'parameter-type-annotation': {
+        patterns: [
+          {
+            name: 'meta.type.annotation.js',
+            begin: '(:)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.type.annotation.js',
+              },
+            },
+            end: '(?=[,)])|(?==[^>])',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+        ],
+      },
+      'return-type': {
+        patterns: [
+          {
+            name: 'meta.return.type.js',
+            begin: '(?<=\\))\\s*(:)(?=\\s*\\S)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.type.annotation.js',
+              },
+            },
+            end: '(?<![:|&])(?=$|^|[{};,]|//)',
+            patterns: [
+              {
+                include: '#return-type-core',
+              },
+            ],
+          },
+          {
+            name: 'meta.return.type.js',
+            begin: '(?<=\\))\\s*(:)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.type.annotation.js',
+              },
+            },
+            end: '(?<![:|&])((?=[{};,]|//|^\\s*$)|((?<=\\S)(?=\\s*$)))',
+            patterns: [
+              {
+                include: '#return-type-core',
+              },
+            ],
+          },
+        ],
+      },
+      'return-type-core': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin: '(?<=[:|&])(?=\\s*\\{)',
+            end: '(?<=\\})',
+            patterns: [
+              {
+                include: '#type-object',
+              },
+            ],
+          },
+          {
+            include: '#type-predicate-operator',
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'arrow-return-type': {
+        name: 'meta.return.type.arrow.js',
+        begin: '(?<=\\))\\s*(:)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.type.annotation.js',
+          },
+        },
+        end: '(?==>|\\{|(^\\s*(export|function|class|interface|let|var|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|const|import|enum|namespace|module|type|abstract|declare)\\s+))',
+        patterns: [
+          {
+            include: '#arrow-return-type-body',
+          },
+        ],
+      },
+      'possibly-arrow-return-type': {
+        begin:
+          '(?<=\\)|^)\\s*(:)(?=\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*=>)',
+        beginCaptures: {
+          '1': {
+            name: 'meta.arrow.js meta.return.type.arrow.js keyword.operator.type.annotation.js',
+          },
+        },
+        end: '(?==>|\\{|(^\\s*(export|function|class|interface|let|var|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|const|import|enum|namespace|module|type|abstract|declare)\\s+))',
+        contentName: 'meta.arrow.js meta.return.type.arrow.js',
+        patterns: [
+          {
+            include: '#arrow-return-type-body',
+          },
+        ],
+      },
+      'arrow-return-type-body': {
+        patterns: [
+          {
+            begin: '(?<=[:])(?=\\s*\\{)',
+            end: '(?<=\\})',
+            patterns: [
+              {
+                include: '#type-object',
+              },
+            ],
+          },
+          {
+            include: '#type-predicate-operator',
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'type-parameters': {
+        name: 'meta.type.parameters.js',
+        begin: '(<)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.definition.typeparameters.begin.js',
+          },
+        },
+        end: '(>)',
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.typeparameters.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            name: 'storage.modifier.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(extends|in|out|const)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            include: '#type',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            name: 'keyword.operator.assignment.js',
+            match: '(=)(?!>)',
+          },
+        ],
+      },
+      'type-arguments': {
+        name: 'meta.type.parameters.js',
+        begin: '\\<',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.typeparameters.begin.js',
+          },
+        },
+        end: '\\>',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.typeparameters.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#type-arguments-body',
+          },
+        ],
+      },
+      'type-arguments-body': {
+        patterns: [
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(_)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            captures: {
+              '0': {
+                name: 'keyword.operator.type.js',
+              },
+            },
+          },
+          {
+            include: '#type',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      type: {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#type-string',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#type-primitive',
+          },
+          {
+            include: '#type-builtin-literals',
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#type-tuple',
+          },
+          {
+            include: '#type-object',
+          },
+          {
+            include: '#type-operators',
+          },
+          {
+            include: '#type-conditional',
+          },
+          {
+            include: '#type-fn-type-parameters',
+          },
+          {
+            include: '#type-paren-or-function-parameters',
+          },
+          {
+            include: '#type-function-return-type',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(readonly)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            include: '#type-name',
+          },
+        ],
+      },
+      'type-primitive': {
+        name: 'support.type.primitive.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(string|number|bigint|boolean|symbol|any|void|never|unknown)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'type-builtin-literals': {
+        name: 'support.type.builtin.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(this|true|false|undefined|null|object)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'type-tuple': {
+        name: 'meta.type.tuple.js',
+        begin: '\\[',
+        beginCaptures: {
+          '0': {
+            name: 'meta.brace.square.js',
+          },
+        },
+        end: '\\]',
+        endCaptures: {
+          '0': {
+            name: 'meta.brace.square.js',
+          },
+        },
+        patterns: [
+          {
+            name: 'keyword.operator.rest.js',
+            match: '\\.\\.\\.',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))([_$[:alpha:]][_$[:alnum:]]*)\\s*(\\?)?\\s*(:)',
+            captures: {
+              '1': {
+                name: 'entity.name.label.js',
+              },
+              '2': {
+                name: 'keyword.operator.optional.js',
+              },
+              '3': {
+                name: 'punctuation.separator.label.js',
+              },
+            },
+          },
+          {
+            include: '#type',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'type-object': {
+        name: 'meta.object.type.js',
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#method-declaration',
+          },
+          {
+            include: '#indexer-declaration',
+          },
+          {
+            include: '#indexer-mapped-type-declaration',
+          },
+          {
+            include: '#field-declaration',
+          },
+          {
+            include: '#type-annotation',
+          },
+          {
+            begin: '\\.\\.\\.',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.operator.spread.js',
+              },
+            },
+            end: '(?=\\}|;|,|$)|(?<=\\})',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            include: '#punctuation-semicolon',
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'type-conditional': {
+        patterns: [
+          {
+            begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(extends)\\s+',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+            },
+            end: '(?<=:)',
+            patterns: [
+              {
+                begin: '\\?',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.operator.ternary.js',
+                  },
+                },
+                end: ':',
+                endCaptures: {
+                  '0': {
+                    name: 'keyword.operator.ternary.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#type',
+                  },
+                ],
+              },
+              {
+                include: '#type',
+              },
+            ],
+          },
+        ],
+      },
+      'type-paren-or-function-parameters': {
+        name: 'meta.type.paren.cover.js',
+        begin: '\\(',
+        beginCaptures: {
+          '0': {
+            name: 'meta.brace.round.js',
+          },
+        },
+        end: '\\)',
+        endCaptures: {
+          '0': {
+            name: 'meta.brace.round.js',
+          },
+        },
+        patterns: [
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))\\s*(\\??)(?=\\s*(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))))',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'entity.name.function.js variable.language.this.js',
+              },
+              '4': {
+                name: 'entity.name.function.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))\\s*(\\??)(?=:)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'variable.parameter.js variable.language.this.js',
+              },
+              '4': {
+                name: 'variable.parameter.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+          {
+            include: '#type-annotation',
+          },
+          {
+            name: 'punctuation.separator.parameter.js',
+            match: ',',
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'type-fn-type-parameters': {
+        patterns: [
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(abstract)\\s+)?(new)\\b(?=\\s*\\<)',
+            beginCaptures: {
+              '1': {
+                name: 'meta.type.constructor.js storage.modifier.js',
+              },
+              '2': {
+                name: 'meta.type.constructor.js keyword.control.new.js',
+              },
+            },
+            end: '(?<=>)',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#type-parameters',
+              },
+            ],
+          },
+          {
+            name: 'meta.type.constructor.js',
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(abstract)\\s+)?(new)\\b\\s*(?=\\()',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.control.new.js',
+              },
+            },
+            end: '(?<=\\))',
+            patterns: [
+              {
+                include: '#function-parameters',
+              },
+            ],
+          },
+          {
+            name: 'meta.type.function.js',
+            begin:
+              '(?x)(\n  (?=\n    [(]\\s*(\n      ([)]) |\n      (\\.\\.\\.) |\n      ([_$[:alnum:]]+\\s*(\n        ([:,?=])|\n        ([)]\\s*=>)\n      ))\n    )\n  )\n)',
+            end: '(?<=\\))',
+            patterns: [
+              {
+                include: '#function-parameters',
+              },
+            ],
+          },
+        ],
+      },
+      'type-function-return-type': {
+        patterns: [
+          {
+            name: 'meta.type.function.return.js',
+            begin: '(=>)(?=\\s*\\S)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.function.arrow.js',
+              },
+            },
+            end: '(?<!=>)(?<![|&])(?=[,\\]\\)\\{\\}=;>:\\?]|//|$)',
+            patterns: [
+              {
+                include: '#type-function-return-type-core',
+              },
+            ],
+          },
+          {
+            name: 'meta.type.function.return.js',
+            begin: '=>',
+            beginCaptures: {
+              '0': {
+                name: 'storage.type.function.arrow.js',
+              },
+            },
+            end: '(?<!=>)(?<![|&])((?=[,\\]\\)\\{\\}=;:\\?>]|//|^\\s*$)|((?<=\\S)(?=\\s*$)))',
+            patterns: [
+              {
+                include: '#type-function-return-type-core',
+              },
+            ],
+          },
+        ],
+      },
+      'type-function-return-type-core': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin: '(?<==>)(?=\\s*\\{)',
+            end: '(?<=\\})',
+            patterns: [
+              {
+                include: '#type-object',
+              },
+            ],
+          },
+          {
+            include: '#type-predicate-operator',
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'type-operators': {
+        patterns: [
+          {
+            include: '#typeof-operator',
+          },
+          {
+            include: '#type-infer',
+          },
+          {
+            begin: '([&|])(?=\\s*\\{)',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.operator.type.js',
+              },
+            },
+            end: '(?<=\\})',
+            patterns: [
+              {
+                include: '#type-object',
+              },
+            ],
+          },
+          {
+            begin: '[&|]',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.operator.type.js',
+              },
+            },
+            end: '(?=\\S)',
+          },
+          {
+            name: 'keyword.operator.expression.keyof.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))keyof(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.operator.ternary.js',
+            match: '(\\?|\\:)',
+          },
+          {
+            name: 'keyword.operator.expression.import.js',
+            match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))import(?=\\s*\\()',
+          },
+        ],
+      },
+      'type-infer': {
+        patterns: [
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(infer)\\s+([_$[:alpha:]][_$[:alnum:]]*)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))(?:\\s+(extends)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))?',
+            name: 'meta.type.infer.js',
+            captures: {
+              '1': {
+                name: 'keyword.operator.expression.infer.js',
+              },
+              '2': {
+                name: 'entity.name.type.js',
+              },
+              '3': {
+                name: 'keyword.operator.expression.extends.js',
+              },
+            },
+          },
+        ],
+      },
+      'type-predicate-operator': {
+        patterns: [
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(asserts)\\s+)?(?!asserts)(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))\\s(is)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            captures: {
+              '1': {
+                name: 'keyword.operator.type.asserts.js',
+              },
+              '2': {
+                name: 'variable.parameter.js variable.language.this.js',
+              },
+              '3': {
+                name: 'variable.parameter.js',
+              },
+              '4': {
+                name: 'keyword.operator.expression.is.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(asserts)\\s+(?!is)(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            captures: {
+              '1': {
+                name: 'keyword.operator.type.asserts.js',
+              },
+              '2': {
+                name: 'variable.parameter.js variable.language.this.js',
+              },
+              '3': {
+                name: 'variable.parameter.js',
+              },
+            },
+          },
+          {
+            name: 'keyword.operator.type.asserts.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))asserts(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.operator.expression.is.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))is(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      'type-name': {
+        patterns: [
+          {
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(<)',
+            captures: {
+              '1': {
+                name: 'entity.name.type.module.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '4': {
+                name: 'meta.type.parameters.js punctuation.definition.typeparameters.begin.js',
+              },
+            },
+            end: '(>)',
+            endCaptures: {
+              '1': {
+                name: 'meta.type.parameters.js punctuation.definition.typeparameters.end.js',
+              },
+            },
+            contentName: 'meta.type.parameters.js',
+            patterns: [
+              {
+                include: '#type-arguments-body',
+              },
+            ],
+          },
+          {
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(<)',
+            beginCaptures: {
+              '1': {
+                name: 'entity.name.type.js',
+              },
+              '2': {
+                name: 'meta.type.parameters.js punctuation.definition.typeparameters.begin.js',
+              },
+            },
+            end: '(>)',
+            endCaptures: {
+              '1': {
+                name: 'meta.type.parameters.js punctuation.definition.typeparameters.end.js',
+              },
+            },
+            contentName: 'meta.type.parameters.js',
+            patterns: [
+              {
+                include: '#type-arguments-body',
+              },
+            ],
+          },
+          {
+            match: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))',
+            captures: {
+              '1': {
+                name: 'entity.name.type.module.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.optional.js',
+              },
+            },
+          },
+          {
+            name: 'entity.name.type.js',
+            match: '[_$[:alpha:]][_$[:alnum:]]*',
+          },
+        ],
+      },
+      'punctuation-comma': {
+        name: 'punctuation.separator.comma.js',
+        match: ',',
+      },
+      'punctuation-semicolon': {
+        name: 'punctuation.terminator.statement.js',
+        match: ';',
+      },
+      'punctuation-accessor': {
+        match: '(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))',
+        captures: {
+          '1': {
+            name: 'punctuation.accessor.js',
+          },
+          '2': {
+            name: 'punctuation.accessor.optional.js',
+          },
+        },
+      },
+      string: {
+        patterns: [
+          {
+            include: '#qstring-single',
+          },
+          {
+            include: '#qstring-double',
+          },
+          {
+            include: '#template',
+          },
+        ],
+      },
+      'qstring-double': {
+        name: 'string.quoted.double.js',
+        begin: '"',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.begin.js',
+          },
+        },
+        end: '(")|((?:[^\\\\\\n])$)',
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.string.end.js',
+          },
+          '2': {
+            name: 'invalid.illegal.newline.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#string-character-escape',
+          },
+        ],
+      },
+      'qstring-single': {
+        name: 'string.quoted.single.js',
+        begin: "'",
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.begin.js',
+          },
+        },
+        end: "(\\')|((?:[^\\\\\\n])$)",
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.string.end.js',
+          },
+          '2': {
+            name: 'invalid.illegal.newline.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#string-character-escape',
+          },
+        ],
+      },
+      'string-character-escape': {
+        name: 'constant.character.escape.js',
+        match:
+          '\\\\(x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4}|u\\{[0-9A-Fa-f]+\\}|[0-2][0-7]{0,2}|3[0-6][0-7]?|37[0-7]?|[4-7][0-7]?|.|$)',
+      },
+      template: {
+        patterns: [
+          {
+            include: '#template-call',
+          },
+          {
+            contentName: 'string.template.js',
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)?(`)',
+            beginCaptures: {
+              '1': {
+                name: 'entity.name.function.tagged-template.js',
+              },
+              '2': {
+                name: 'string.template.js punctuation.definition.string.template.begin.js',
+              },
+            },
+            end: '`',
+            endCaptures: {
+              '0': {
+                name: 'string.template.js punctuation.definition.string.template.end.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#template-substitution-element',
+              },
+              {
+                include: '#string-character-escape',
+              },
+            ],
+          },
+        ],
+      },
+      'template-call': {
+        patterns: [
+          {
+            begin:
+              '(?=(([_$[:alpha:]][_$[:alnum:]]*\\s*\\??\\.\\s*)*|(\\??\\.\\s*)?)([_$[:alpha:]][_$[:alnum:]]*)(<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)?`)',
+            end: '(?=`)',
+            patterns: [
+              {
+                begin:
+                  '(?=(([_$[:alpha:]][_$[:alnum:]]*\\s*\\??\\.\\s*)*|(\\??\\.\\s*)?)([_$[:alpha:]][_$[:alnum:]]*))',
+                end: '(?=(<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)?`)',
+                patterns: [
+                  {
+                    include: '#support-function-call-identifiers',
+                  },
+                  {
+                    name: 'entity.name.function.tagged-template.js',
+                    match: '([_$[:alpha:]][_$[:alnum:]]*)',
+                  },
+                ],
+              },
+              {
+                include: '#type-arguments',
+              },
+            ],
+          },
+          {
+            begin:
+              '([_$[:alpha:]][_$[:alnum:]]*)?\\s*(?=(<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)`)',
+            beginCaptures: {
+              '1': {
+                name: 'entity.name.function.tagged-template.js',
+              },
+            },
+            end: '(?=`)',
+            patterns: [
+              {
+                include: '#type-arguments',
+              },
+            ],
+          },
+        ],
+      },
+      'template-substitution-element': {
+        name: 'meta.template.expression.js',
+        begin: '\\$\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.template-expression.begin.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.template-expression.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#expression',
+          },
+        ],
+        contentName: 'meta.embedded.line.js',
+      },
+      'type-string': {
+        patterns: [
+          {
+            include: '#qstring-single',
+          },
+          {
+            include: '#qstring-double',
+          },
+          {
+            include: '#template-type',
+          },
+        ],
+      },
+      'template-type': {
+        patterns: [
+          {
+            include: '#template-call',
+          },
+          {
+            contentName: 'string.template.js',
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)?(`)',
+            beginCaptures: {
+              '1': {
+                name: 'entity.name.function.tagged-template.js',
+              },
+              '2': {
+                name: 'string.template.js punctuation.definition.string.template.begin.js',
+              },
+            },
+            end: '`',
+            endCaptures: {
+              '0': {
+                name: 'string.template.js punctuation.definition.string.template.end.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#template-type-substitution-element',
+              },
+              {
+                include: '#string-character-escape',
+              },
+            ],
+          },
+        ],
+      },
+      'template-type-substitution-element': {
+        name: 'meta.template.expression.js',
+        begin: '\\$\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.template-expression.begin.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.template-expression.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#type',
+          },
+        ],
+        contentName: 'meta.embedded.line.js',
+      },
+      regex: {
+        patterns: [
+          {
+            name: 'string.regexp.js',
+            begin:
+              '(?<!\\+\\+|--|})(?<=[=(:,\\[?+!]|^return|[^\\._$[:alnum:]]return|^case|[^\\._$[:alnum:]]case|=>|&&|\\|\\||\\*\\/)\\s*(\\/)(?![\\/*])(?=(?:[^\\/\\\\\\[\\()]|\\\\.|\\[([^\\]\\\\]|\\\\.)+\\]|\\(([^\\)\\\\]|\\\\.)+\\))+\\/([dgimsuvy]+|(?![\\/\\*])|(?=\\/\\*))(?!\\s*[a-zA-Z0-9_$]))',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.string.begin.js',
+              },
+            },
+            end: '(/)([dgimsuvy]*)',
+            endCaptures: {
+              '1': {
+                name: 'punctuation.definition.string.end.js',
+              },
+              '2': {
+                name: 'keyword.other.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#regexp',
+              },
+            ],
+          },
+          {
+            name: 'string.regexp.js',
+            begin:
+              '((?<![_$[:alnum:])\\]]|\\+\\+|--|}|\\*\\/)|((?<=^return|[^\\._$[:alnum:]]return|^case|[^\\._$[:alnum:]]case))\\s*)\\/(?![\\/*])(?=(?:[^\\/\\\\\\[]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\])+\\/([dgimsuvy]+|(?![\\/\\*])|(?=\\/\\*))(?!\\s*[a-zA-Z0-9_$]))',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.string.begin.js',
+              },
+            },
+            end: '(/)([dgimsuvy]*)',
+            endCaptures: {
+              '1': {
+                name: 'punctuation.definition.string.end.js',
+              },
+              '2': {
+                name: 'keyword.other.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#regexp',
+              },
+            ],
+          },
+        ],
+      },
+      regexp: {
+        patterns: [
+          {
+            name: 'keyword.control.anchor.regexp',
+            match: '\\\\[bB]|\\^|\\$',
+          },
+          {
+            match: '\\\\[1-9]\\d*|\\\\k<([a-zA-Z_$][\\w$]*)>',
+            captures: {
+              '0': {
+                name: 'keyword.other.back-reference.regexp',
+              },
+              '1': {
+                name: 'variable.other.regexp',
+              },
+            },
+          },
+          {
+            name: 'keyword.operator.quantifier.regexp',
+            match: '[?+*]|\\{(\\d+,\\d+|\\d+,|,\\d+|\\d+)\\}\\??',
+          },
+          {
+            name: 'keyword.operator.or.regexp',
+            match: '\\|',
+          },
+          {
+            name: 'meta.group.assertion.regexp',
+            begin: '(\\()((\\?=)|(\\?!)|(\\?<=)|(\\?<!))',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.group.regexp',
+              },
+              '2': {
+                name: 'punctuation.definition.group.assertion.regexp',
+              },
+              '3': {
+                name: 'meta.assertion.look-ahead.regexp',
+              },
+              '4': {
+                name: 'meta.assertion.negative-look-ahead.regexp',
+              },
+              '5': {
+                name: 'meta.assertion.look-behind.regexp',
+              },
+              '6': {
+                name: 'meta.assertion.negative-look-behind.regexp',
+              },
+            },
+            end: '(\\))',
+            endCaptures: {
+              '1': {
+                name: 'punctuation.definition.group.regexp',
+              },
+            },
+            patterns: [
+              {
+                include: '#regexp',
+              },
+            ],
+          },
+          {
+            name: 'meta.group.regexp',
+            begin: '\\((?:(\\?:)|(?:\\?<([a-zA-Z_$][\\w$]*)>))?',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.group.regexp',
+              },
+              '1': {
+                name: 'punctuation.definition.group.no-capture.regexp',
+              },
+              '2': {
+                name: 'variable.other.regexp',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.group.regexp',
+              },
+            },
+            patterns: [
+              {
+                include: '#regexp',
+              },
+            ],
+          },
+          {
+            name: 'constant.other.character-class.set.regexp',
+            begin: '(\\[)(\\^)?',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.character-class.regexp',
+              },
+              '2': {
+                name: 'keyword.operator.negation.regexp',
+              },
+            },
+            end: '(\\])',
+            endCaptures: {
+              '1': {
+                name: 'punctuation.definition.character-class.regexp',
+              },
+            },
+            patterns: [
+              {
+                name: 'constant.other.character-class.range.regexp',
+                match:
+                  '(?:.|(\\\\(?:[0-7]{3}|x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4}))|(\\\\c[A-Z])|(\\\\.))\\-(?:[^\\]\\\\]|(\\\\(?:[0-7]{3}|x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4}))|(\\\\c[A-Z])|(\\\\.))',
+                captures: {
+                  '1': {
+                    name: 'constant.character.numeric.regexp',
+                  },
+                  '2': {
+                    name: 'constant.character.control.regexp',
+                  },
+                  '3': {
+                    name: 'constant.character.escape.backslash.regexp',
+                  },
+                  '4': {
+                    name: 'constant.character.numeric.regexp',
+                  },
+                  '5': {
+                    name: 'constant.character.control.regexp',
+                  },
+                  '6': {
+                    name: 'constant.character.escape.backslash.regexp',
+                  },
+                },
+              },
+              {
+                include: '#regex-character-class',
+              },
+            ],
+          },
+          {
+            include: '#regex-character-class',
+          },
+        ],
+      },
+      'regex-character-class': {
+        patterns: [
+          {
+            name: 'constant.other.character-class.regexp',
+            match: '\\\\[wWsSdDtrnvf]|\\.',
+          },
+          {
+            name: 'constant.character.numeric.regexp',
+            match: '\\\\([0-7]{3}|x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4})',
+          },
+          {
+            name: 'constant.character.control.regexp',
+            match: '\\\\c[A-Z]',
+          },
+          {
+            name: 'constant.character.escape.backslash.regexp',
+            match: '\\\\.',
+          },
+        ],
+      },
+      comment: {
+        patterns: [
+          {
+            name: 'comment.block.documentation.js',
+            begin: '/\\*\\*(?!/)',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.comment.js',
+              },
+            },
+            end: '\\*/',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.comment.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#docblock',
+              },
+            ],
+          },
+          {
+            name: 'comment.block.js',
+            begin: '(/\\*)(?:\\s*((@)internal)(?=\\s|(\\*/)))?',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.comment.js',
+              },
+              '2': {
+                name: 'storage.type.internaldeclaration.js',
+              },
+              '3': {
+                name: 'punctuation.decorator.internaldeclaration.js',
+              },
+            },
+            end: '\\*/',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.comment.js',
+              },
+            },
+          },
+          {
+            begin: '(^[ \\t]+)?((//)(?:\\s*((@)internal)(?=\\s|$))?)',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.whitespace.comment.leading.js',
+              },
+              '2': {
+                name: 'comment.line.double-slash.js',
+              },
+              '3': {
+                name: 'punctuation.definition.comment.js',
+              },
+              '4': {
+                name: 'storage.type.internaldeclaration.js',
+              },
+              '5': {
+                name: 'punctuation.decorator.internaldeclaration.js',
+              },
+            },
+            end: '(?=$)',
+            contentName: 'comment.line.double-slash.js',
+          },
+        ],
+      },
+      'single-line-comment-consuming-line-ending': {
+        begin: '(^[ \\t]+)?((//)(?:\\s*((@)internal)(?=\\s|$))?)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.whitespace.comment.leading.js',
+          },
+          '2': {
+            name: 'comment.line.double-slash.js',
+          },
+          '3': {
+            name: 'punctuation.definition.comment.js',
+          },
+          '4': {
+            name: 'storage.type.internaldeclaration.js',
+          },
+          '5': {
+            name: 'punctuation.decorator.internaldeclaration.js',
+          },
+        },
+        end: '(?=^)',
+        contentName: 'comment.line.double-slash.js',
+      },
+      directives: {
+        name: 'comment.line.triple-slash.directive.js',
+        begin:
+          '^(///)\\s*(?=<(reference|amd-dependency|amd-module)(\\s+(path|types|no-default-lib|lib|name|resolution-mode)\\s*=\\s*((\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)))+\\s*/>\\s*$)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.definition.comment.js',
+          },
+        },
+        end: '(?=$)',
+        patterns: [
+          {
+            name: 'meta.tag.js',
+            begin: '(<)(reference|amd-dependency|amd-module)',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.tag.directive.js',
+              },
+              '2': {
+                name: 'entity.name.tag.directive.js',
+              },
+            },
+            end: '/>',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.tag.directive.js',
+              },
+            },
+            patterns: [
+              {
+                name: 'entity.other.attribute-name.directive.js',
+                match: 'path|types|no-default-lib|lib|name|resolution-mode',
+              },
+              {
+                name: 'keyword.operator.assignment.js',
+                match: '=',
+              },
+              {
+                include: '#string',
+              },
+            ],
+          },
+        ],
+      },
+      docblock: {
+        patterns: [
+          {
+            match: '(?x)\n((@)(?:access|api))\n\\s+\n(private|protected|public)\n\\b',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'constant.language.access-type.jsdoc',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)\n((@)author)\n\\s+\n(\n  [^@\\s<>*/]\n  (?:[^@<>*/]|\\*[^/])*\n)\n(?:\n  \\s*\n  (<)\n  ([^>\\s]+)\n  (>)\n)?',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+              '4': {
+                name: 'punctuation.definition.bracket.angle.begin.jsdoc',
+              },
+              '5': {
+                name: 'constant.other.email.link.underline.jsdoc',
+              },
+              '6': {
+                name: 'punctuation.definition.bracket.angle.end.jsdoc',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)\n((@)borrows) \\s+\n((?:[^@\\s*/]|\\*[^/])+)    # <that namepath>\n\\s+ (as) \\s+              # as\n((?:[^@\\s*/]|\\*[^/])+)    # <this namepath>',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+              '4': {
+                name: 'keyword.operator.control.jsdoc',
+              },
+              '5': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+            },
+          },
+          {
+            name: 'meta.example.jsdoc',
+            begin: '((@)example)\\s+',
+            end: '(?=@|\\*/)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+            patterns: [
+              {
+                match: '^\\s\\*\\s+',
+              },
+              {
+                contentName: 'constant.other.description.jsdoc',
+                begin: '\\G(<)caption(>)',
+                beginCaptures: {
+                  '0': {
+                    name: 'entity.name.tag.inline.jsdoc',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.bracket.angle.begin.jsdoc',
+                  },
+                  '2': {
+                    name: 'punctuation.definition.bracket.angle.end.jsdoc',
+                  },
+                },
+                end: '(</)caption(>)|(?=\\*/)',
+                endCaptures: {
+                  '0': {
+                    name: 'entity.name.tag.inline.jsdoc',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.bracket.angle.begin.jsdoc',
+                  },
+                  '2': {
+                    name: 'punctuation.definition.bracket.angle.end.jsdoc',
+                  },
+                },
+              },
+              {
+                match: '[^\\s@*](?:[^*]|\\*[^/])*',
+                captures: {
+                  '0': {
+                    name: 'source.embedded.js',
+                  },
+                },
+              },
+            ],
+          },
+          {
+            match:
+              '(?x) ((@)kind) \\s+ (class|constant|event|external|file|function|member|mixin|module|namespace|typedef) \\b',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'constant.language.symbol-type.jsdoc',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)\n((@)see)\n\\s+\n(?:\n  # URL\n  (\n    (?=https?://)\n    (?:[^\\s*]|\\*[^/])+\n  )\n  |\n  # JSDoc namepath\n  (\n    (?!\n      # Avoid matching bare URIs (also acceptable as links)\n      https?://\n      |\n      # Avoid matching {@inline tags}; we match those below\n      (?:\\[[^\\[\\]]*\\])? # Possible description [preceding]{@tag}\n      {@(?:link|linkcode|linkplain|tutorial)\\b\n    )\n    # Matched namepath\n    (?:[^@\\s*/]|\\*[^/])+\n  )\n)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'variable.other.link.underline.jsdoc',
+              },
+              '4': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)\n((@)template)\n\\s+\n# One or more valid identifiers\n(\n  [A-Za-z_$]         # First character: non-numeric word character\n  [\\w$.\\[\\]]*        # Rest of identifier\n  (?:                # Possible list of additional identifiers\n    \\s* , \\s*\n    [A-Za-z_$]\n    [\\w$.\\[\\]]*\n  )*\n)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'variable.other.jsdoc',
+              },
+            },
+          },
+          {
+            begin: '(?x)((@)template)\\s+(?={)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+            end: '(?=\\s|\\*/|[^{}\\[\\]A-Za-z_$])',
+            patterns: [
+              {
+                include: '#jsdoctype',
+              },
+              {
+                name: 'variable.other.jsdoc',
+                match: '([A-Za-z_$][\\w$.\\[\\]]*)',
+              },
+            ],
+          },
+          {
+            match:
+              '(?x)\n(\n  (@)\n  (?:arg|argument|const|constant|member|namespace|param|var)\n)\n\\s+\n(\n  [A-Za-z_$]\n  [\\w$.\\[\\]]*\n)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'variable.other.jsdoc',
+              },
+            },
+          },
+          {
+            begin: '((@)typedef)\\s+(?={)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+            end: '(?=\\s|\\*/|[^{}\\[\\]A-Za-z_$])',
+            patterns: [
+              {
+                include: '#jsdoctype',
+              },
+              {
+                name: 'entity.name.type.instance.jsdoc',
+                match: '(?:[^@\\s*/]|\\*[^/])+',
+              },
+            ],
+          },
+          {
+            begin:
+              '((@)(?:arg|argument|const|constant|member|namespace|param|prop|property|var))\\s+(?={)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+            end: '(?=\\s|\\*/|[^{}\\[\\]A-Za-z_$])',
+            patterns: [
+              {
+                include: '#jsdoctype',
+              },
+              {
+                name: 'variable.other.jsdoc',
+                match: '([A-Za-z_$][\\w$.\\[\\]]*)',
+              },
+              {
+                name: 'variable.other.jsdoc',
+                match:
+                  '(?x)\n(\\[)\\s*\n[\\w$]+\n(?:\n  (?:\\[\\])?                                        # Foo[ ].bar properties within an array\n  \\.                                                # Foo.Bar namespaced parameter\n  [\\w$]+\n)*\n(?:\n  \\s*\n  (=)                                                # [foo=bar] Default parameter value\n  \\s*\n  (\n    # The inner regexes are to stop the match early at */ and to not stop at escaped quotes\n    (?>\n      "(?:(?:\\*(?!/))|(?:\\\\(?!"))|[^*\\\\])*?" |                      # [foo="bar"] Double-quoted\n      \'(?:(?:\\*(?!/))|(?:\\\\(?!\'))|[^*\\\\])*?\' |                      # [foo=\'bar\'] Single-quoted\n      \\[ (?:(?:\\*(?!/))|[^*])*? \\] |                                # [foo=[1,2]] Array literal\n      (?:(?:\\*(?!/))|\\s(?!\\s*\\])|\\[.*?(?:\\]|(?=\\*/))|[^*\\s\\[\\]])*   # Everything else\n    )*\n  )\n)?\n\\s*(?:(\\])((?:[^*\\s]|\\*[^\\s/])+)?|(?=\\*/))',
+                captures: {
+                  '1': {
+                    name: 'punctuation.definition.optional-value.begin.bracket.square.jsdoc',
+                  },
+                  '2': {
+                    name: 'keyword.operator.assignment.jsdoc',
+                  },
+                  '3': {
+                    name: 'source.embedded.js',
+                  },
+                  '4': {
+                    name: 'punctuation.definition.optional-value.end.bracket.square.jsdoc',
+                  },
+                  '5': {
+                    name: 'invalid.illegal.syntax.jsdoc',
+                  },
+                },
+              },
+            ],
+          },
+          {
+            begin:
+              '(?x)\n(\n  (@)\n  (?:define|enum|exception|export|extends|lends|implements|modifies\n  |namespace|private|protected|returns?|satisfies|suppress|this|throws|type\n  |yields?)\n)\n\\s+(?={)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+            end: '(?=\\s|\\*/|[^{}\\[\\]A-Za-z_$])',
+            patterns: [
+              {
+                include: '#jsdoctype',
+              },
+            ],
+          },
+          {
+            match:
+              '(?x)\n(\n  (@)\n  (?:alias|augments|callback|constructs|emits|event|fires|exports?\n  |extends|external|function|func|host|lends|listens|interface|memberof!?\n  |method|module|mixes|mixin|name|requires|see|this|typedef|uses)\n)\n\\s+\n(\n  (?:\n    [^{}@\\s*] | \\*[^/]\n  )+\n)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+            },
+          },
+          {
+            contentName: 'variable.other.jsdoc',
+            begin: "((@)(?:default(?:value)?|license|version))\\s+(([''\"]))",
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'variable.other.jsdoc',
+              },
+              '4': {
+                name: 'punctuation.definition.string.begin.jsdoc',
+              },
+            },
+            end: '(\\3)|(?=$|\\*/)',
+            endCaptures: {
+              '0': {
+                name: 'variable.other.jsdoc',
+              },
+              '1': {
+                name: 'punctuation.definition.string.end.jsdoc',
+              },
+            },
+          },
+          {
+            match: '((@)(?:default(?:value)?|license|tutorial|variation|version))\\s+([^\\s*]+)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'variable.other.jsdoc',
+              },
+            },
+          },
+          {
+            name: 'storage.type.class.jsdoc',
+            match:
+              '(?x) (@) (?:abstract|access|alias|api|arg|argument|async|attribute|augments|author|beta|borrows|bubbles |callback|chainable|class|classdesc|code|config|const|constant|constructor|constructs|copyright |default|defaultvalue|define|deprecated|desc|description|dict|emits|enum|event|example|exception |exports?|extends|extension(?:_?for)?|external|externs|file|fileoverview|final|fires|for|func |function|generator|global|hideconstructor|host|ignore|implements|implicitCast|inherit[Dd]oc |inner|instance|interface|internal|kind|lends|license|listens|main|member|memberof!?|method |mixes|mixins?|modifies|module|name|namespace|noalias|nocollapse|nocompile|nosideeffects |override|overview|package|param|polymer(?:Behavior)?|preserve|private|prop|property|protected |public|read[Oo]nly|record|require[ds]|returns?|see|since|static|struct|submodule|summary |suppress|template|this|throws|todo|tutorial|type|typedef|unrestricted|uses|var|variation |version|virtual|writeOnce|yields?) \\b',
+            captures: {
+              '1': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+          },
+          {
+            include: '#inline-tags',
+          },
+          {
+            match: '((@)(?:[_$[:alpha:]][_$[:alnum:]]*))(?=\\s+)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+          },
+        ],
+      },
+      brackets: {
+        patterns: [
+          {
+            begin: '{',
+            end: '}|(?=\\*/)',
+            patterns: [
+              {
+                include: '#brackets',
+              },
+            ],
+          },
+          {
+            begin: '\\[',
+            end: '\\]|(?=\\*/)',
+            patterns: [
+              {
+                include: '#brackets',
+              },
+            ],
+          },
+        ],
+      },
+      'inline-tags': {
+        patterns: [
+          {
+            name: 'constant.other.description.jsdoc',
+            match: '(\\[)[^\\]]+(\\])(?={@(?:link|linkcode|linkplain|tutorial))',
+            captures: {
+              '1': {
+                name: 'punctuation.definition.bracket.square.begin.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.bracket.square.end.jsdoc',
+              },
+            },
+          },
+          {
+            name: 'entity.name.type.instance.jsdoc',
+            begin: '({)((@)(?:link(?:code|plain)?|tutorial))\\s*',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.bracket.curly.begin.jsdoc',
+              },
+              '2': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '3': {
+                name: 'punctuation.definition.inline.tag.jsdoc',
+              },
+            },
+            end: '}|(?=\\*/)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.bracket.curly.end.jsdoc',
+              },
+            },
+            patterns: [
+              {
+                match: '\\G((?=https?://)(?:[^|}\\s*]|\\*[/])+)(\\|)?',
+                captures: {
+                  '1': {
+                    name: 'variable.other.link.underline.jsdoc',
+                  },
+                  '2': {
+                    name: 'punctuation.separator.pipe.jsdoc',
+                  },
+                },
+              },
+              {
+                match: '\\G((?:[^{}@\\s|*]|\\*[^/])+)(\\|)?',
+                captures: {
+                  '1': {
+                    name: 'variable.other.description.jsdoc',
+                  },
+                  '2': {
+                    name: 'punctuation.separator.pipe.jsdoc',
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+      jsdoctype: {
+        patterns: [
+          {
+            contentName: 'entity.name.type.instance.jsdoc',
+            begin: '\\G({)',
+            beginCaptures: {
+              '0': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+              '1': {
+                name: 'punctuation.definition.bracket.curly.begin.jsdoc',
+              },
+            },
+            end: '((}))\\s*|(?=\\*/)',
+            endCaptures: {
+              '1': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.bracket.curly.end.jsdoc',
+              },
+            },
+            patterns: [
+              {
+                include: '#brackets',
+              },
+            ],
+          },
+        ],
+      },
+      jsx: {
+        patterns: [
+          {
+            include: '#jsx-tag-style',
+          },
+          {
+            include: '#jsx-tag-without-attributes',
+          },
+          {
+            include: '#jsx-tag',
+          },
+        ],
+      },
+      'jsx-tag-without-attributes-in-expression': {
+        begin:
+          '(?<!\\+\\+|--)(?<=[({\\[,?=>:*]|&&|\\|\\||\\?|\\*\\/|^await|[^\\._$[:alnum:]]await|^return|[^\\._$[:alnum:]]return|^default|[^\\._$[:alnum:]]default|^yield|[^\\._$[:alnum:]]yield|^)\\s*(?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>))',
+        end: '(?!(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>))',
+        patterns: [
+          {
+            include: '#jsx-tag-without-attributes',
+          },
+        ],
+      },
+      'jsx-tag-without-attributes': {
+        name: 'meta.tag.without-attributes.js',
+        begin:
+          '(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>)',
+        end: '(</)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.definition.tag.begin.js',
+          },
+          '2': {
+            name: 'entity.name.tag.namespace.js',
+          },
+          '3': {
+            name: 'punctuation.separator.namespace.js',
+          },
+          '4': {
+            name: 'entity.name.tag.js',
+          },
+          '5': {
+            name: 'support.class.component.js',
+          },
+          '6': {
+            name: 'punctuation.definition.tag.end.js',
+          },
+        },
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.tag.begin.js',
+          },
+          '2': {
+            name: 'entity.name.tag.namespace.js',
+          },
+          '3': {
+            name: 'punctuation.separator.namespace.js',
+          },
+          '4': {
+            name: 'entity.name.tag.js',
+          },
+          '5': {
+            name: 'support.class.component.js',
+          },
+          '6': {
+            name: 'punctuation.definition.tag.end.js',
+          },
+        },
+        contentName: 'meta.jsx.children.js',
+        patterns: [
+          {
+            include: '#jsx-children',
+          },
+        ],
+      },
+      'jsx-tag-in-expression': {
+        begin:
+          '(?x)\n  (?<!\\+\\+|--)(?<=[({\\[,?=>:*]|&&|\\|\\||\\?|\\*\\/|^await|[^\\._$[:alnum:]]await|^return|[^\\._$[:alnum:]]return|^default|[^\\._$[:alnum:]]default|^yield|[^\\._$[:alnum:]]yield|^)\\s*\n  (?!<\\s*[_$[:alpha:]][_$[:alnum:]]*((\\s+extends\\s+[^=>])|,)) # look ahead is not type parameter of arrow\n  (?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
+        end: '(?!(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
+        patterns: [
+          {
+            include: '#jsx-tag',
+          },
+        ],
+      },
+      'jsx-tag-style': {
+        name: 'style.tag.js',
+        begin: '(<)\\s*(style)\\b(?![^>]*/>)(?=[^>]*>)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.definition.tag.begin.js',
+          },
+          '2': {
+            name: 'entity.name.tag.js',
+          },
+        },
+        end: '(</)(style)(>)',
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.tag.begin.js',
+          },
+          '2': {
+            name: 'entity.name.tag.js',
+          },
+          '3': {
+            name: 'punctuation.definition.tag.end.js',
+          },
+        },
+        patterns: [
+          {
+            begin: '(>)',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.tag.end.js',
+              },
+            },
+            end: '(?=</style>)',
+            contentName: 'source.css',
+            patterns: [
+              {
+                include: 'source.css',
+              },
+            ],
+          },
+          {
+            begin: '(?<=<style)(?![^>]*/>)',
+            end: '(?=>)',
+            patterns: [
+              {
+                include: '#jsx-tag-attributes',
+              },
+            ],
+          },
+        ],
+      },
+      'jsx-tag': {
+        name: 'meta.tag.js',
+        begin:
+          '(?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
+        end: '(/>)|(?:(</)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>))',
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.tag.end.js',
+          },
+          '2': {
+            name: 'punctuation.definition.tag.begin.js',
+          },
+          '3': {
+            name: 'entity.name.tag.namespace.js',
+          },
+          '4': {
+            name: 'punctuation.separator.namespace.js',
+          },
+          '5': {
+            name: 'entity.name.tag.js',
+          },
+          '6': {
+            name: 'support.class.component.js',
+          },
+          '7': {
+            name: 'punctuation.definition.tag.end.js',
+          },
+        },
+        patterns: [
+          {
+            begin:
+              '(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>)',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.tag.begin.js',
+              },
+              '2': {
+                name: 'entity.name.tag.namespace.js',
+              },
+              '3': {
+                name: 'punctuation.separator.namespace.js',
+              },
+              '4': {
+                name: 'entity.name.tag.js',
+              },
+              '5': {
+                name: 'support.class.component.js',
+              },
+            },
+            end: '(?=[/]?>)',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#type-arguments',
+              },
+              {
+                include: '#jsx-tag-attributes',
+              },
+            ],
+          },
+          {
+            begin: '(>)',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.tag.end.js',
+              },
+            },
+            end: '(?=</)',
+            contentName: 'meta.jsx.children.js',
+            patterns: [
+              {
+                include: '#jsx-children',
+              },
+            ],
+          },
+        ],
+      },
+      'jsx-children': {
+        patterns: [
+          {
+            include: '#jsx-evaluated-code',
+          },
+          {
+            include: '#jsx-tag-style',
+          },
+          {
+            include: '#jsx-children-statements',
+          },
+          {
+            include: '#jsx-tag-without-attributes',
+          },
+          {
+            include: '#jsx-tag',
+          },
+          {
+            include: '#jsx-entities',
+          },
+        ],
+      },
+      'jsx-children-statements': {
+        patterns: [
+          {
+            begin: '(?=\\w|\\$|//|/\\*)',
+            end: '(?=<[a-zA-Z]|</)',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.section.embedded.begin.ripple-js',
+              },
+            },
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.embedded.end.ripple-js',
+              },
+            },
+            contentName: 'source.js.embedded.ripple-isolated',
+            patterns: [
+              {
+                include: '#component-statements',
+              },
+            ],
+          },
+        ],
+      },
+      'jsx-evaluated-code': {
+        contentName: 'meta.embedded.expression.js source.js.embedded.ripple',
+        begin: '\\{',
+        end: '\\}',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.section.embedded.begin.js',
+          },
+        },
+        endCaptures: {
+          '0': {
+            name: 'punctuation.section.embedded.end.js',
+          },
+        },
+        patterns: [
+          {
+            match: '(\\@use)\\b\\s*',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            include: '#expression',
+          },
+        ],
+      },
+      'jsx-entities': {
+        patterns: [
+          {
+            name: 'constant.character.entity.js',
+            match: '(&)([a-zA-Z0-9]+|#[0-9]+|#x[0-9a-fA-F]+)(;)',
+            captures: {
+              '1': {
+                name: 'punctuation.definition.entity.js',
+              },
+              '3': {
+                name: 'punctuation.definition.entity.js',
+              },
+            },
+          },
+        ],
+      },
+      'jsx-tag-attributes': {
+        name: 'meta.tag.attributes.js',
+        begin: '\\s+',
+        end: '(?=[/]?>)',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#jsx-tag-attribute-name',
+          },
+          {
+            include: '#jsx-tag-attribute-assignment',
+          },
+          {
+            include: '#jsx-string-double-quoted',
+          },
+          {
+            include: '#jsx-string-single-quoted',
+          },
+          {
+            include: '#jsx-evaluated-code',
+          },
+          {
+            include: '#jsx-tag-attributes-illegal',
+          },
+        ],
+      },
+      'jsx-tag-attribute-name': {
+        match:
+          '(?x)\n  \\s*\n  (?:([_$[:alpha:]][-_$[:alnum:].]*)(:))?\n  ([_$[:alpha:]][-_$[:alnum:]]*)\n  (?=\\s|=|/?>|/\\*|//)',
+        captures: {
+          '1': {
+            name: 'entity.other.attribute-name.namespace.js',
+          },
+          '2': {
+            name: 'punctuation.separator.namespace.js',
+          },
+          '3': {
+            name: 'entity.other.attribute-name.js',
+          },
+        },
+      },
+      'jsx-tag-attribute-assignment': {
+        name: 'keyword.operator.assignment.js',
+        match: '=(?=\\s*(?:\'|"|{|/\\*|//|\\n))',
+      },
+      'jsx-string-double-quoted': {
+        name: 'string.quoted.double.js',
+        begin: '"',
+        end: '"',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.begin.js',
+          },
+        },
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#jsx-entities',
+          },
+        ],
+      },
+      'jsx-string-single-quoted': {
+        name: 'string.quoted.single.js',
+        begin: "'",
+        end: "'",
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.begin.js',
+          },
+        },
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#jsx-entities',
+          },
+        ],
+      },
+      'jsx-tag-attributes-illegal': {
+        name: 'invalid.illegal.attribute.js',
+        match: '\\S+',
+      },
+    },
+  },
+
+  config: {
+    // Note that this file should stay in sync with 'typescript-language-basics/language-configuration.json'
+    // onEnterRules cause errors - currently disabled
+    comments: {
+      lineComment: '//',
+      blockComment: ['/*', '*/'],
+    },
+    brackets: [
+      ['${', '}'],
+      ['{', '}'],
+      ['[', ']'],
+      ['(', ')'],
+    ],
+    autoClosingPairs: [
+      {
+        open: '{',
+        close: '}',
+      },
+      {
+        open: '[',
+        close: ']',
+      },
+      {
+        open: '(',
+        close: ')',
+      },
+      {
+        open: "'",
+        close: "'",
+        notIn: ['string', 'comment'],
+      },
+      {
+        open: '"',
+        close: '"',
+        notIn: ['string'],
+      },
+      {
+        open: '`',
+        close: '`',
+        notIn: ['string', 'comment'],
+      },
+      {
+        open: '/**',
+        close: ' */',
+        notIn: ['string'],
+      },
+    ],
+    surroundingPairs: [
+      ['{', '}'],
+      ['[', ']'],
+      ['(', ')'],
+      ["'", "'"],
+      ['"', '"'],
+      ['`', '`'],
+      ['<', '>'],
+    ],
+    autoCloseBefore: ';:.,=}])>` \n\t',
+    folding: {
+      markers: {
+        start: '^\\s*//\\s*#?region\\b',
+        end: '^\\s*//\\s*#?endregion\\b',
+      },
+    },
+    wordPattern: {
+      pattern:
+        '(-?\\d*\\.\\d\\w*)|([^\\`\\~\\@\\!\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\\'\\"\\,\\.\\<\\>/\\?\\s]+)',
+    },
+    indentationRules: {
+      decreaseIndentPattern: {
+        pattern: '^\\s*[\\}\\]\\)].*$',
+      },
+      increaseIndentPattern: {
+        pattern: '^.*(\\{[^}]*|\\([^)]*|\\[[^\\]]*)$',
+      },
+      // e.g.  * ...| or */| or *-----*/|
+      unIndentedLinePattern: {
+        pattern:
+          '^(\\t|[ ])*[ ]\\*[^/]*\\*/\\s*$|^(\\t|[ ])*[ ]\\*/\\s*$|^(\\t|[ ])*[ ]\\*([ ]([^\\*]|\\*(?!/))*)?$',
+      },
+      indentNextLinePattern: {
+        pattern: '^((.*=>\\s*)|((.*[^\\w]+|\\s*)(if|while|for)\\s*\\(.*\\)\\s*))$',
+      },
+    },
+    // onEnterRules: [
+    //   {
+    //     // e.g. /** | */
+    //     beforeText: {
+    //       pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
+    //     },
+    //     afterText: {
+    //       pattern: '^\\s*\\*/$',
+    //     },
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: ' * ',
+    //     },
+    //   },
+    //   {
+    //     // e.g. /** ...|
+    //     beforeText: {
+    //       pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       appendText: ' * ',
+    //     },
+    //   },
+    //   {
+    //     // e.g.  * ...|
+    //     beforeText: {
+    //       pattern: '^(\\t|[ ])*[ ]\\*([ ]([^\\*]|\\*(?!/))*)?$',
+    //     },
+    //     previousLineText: {
+    //       pattern: '(?=^(\\s*(/\\*\\*|\\*)).*)(?=(?!(\\s*\\*/)))',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       appendText: '* ',
+    //     },
+    //   },
+    //   {
+    //     // e.g.  */|
+    //     beforeText: {
+    //       pattern: '^(\\t|[ ])*[ ]\\*/\\s*$',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       removeText: 1,
+    //     },
+    //   },
+    //   {
+    //     // e.g.  *-----*/|
+    //     beforeText: {
+    //       pattern: '^(\\t|[ ])*[ ]\\*[^/]*\\*/\\s*$',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       removeText: 1,
+    //     },
+    //   },
+    //   {
+    //     beforeText: {
+    //       pattern: '^\\s*(\\bcase\\s.+:|\\bdefault:)$',
+    //     },
+    //     afterText: {
+    //       pattern: '^(?!\\s*(\\bcase\\b|\\bdefault\\b))',
+    //     },
+    //     action: {
+    //       indent: 'indent',
+    //     },
+    //   },
+    //   {
+    //     // Decrease indentation after single line if/else if/else, for, or while
+    //     previousLineText: '^\\s*(((else ?)?if|for|while)\\s*\\(.*\\)\\s*|else\\s*)$',
+    //     // But make sure line doesn't have braces or is not another if statement
+    //     beforeText: '^\\s+([^{i\\s]|i(?!f\\b))',
+    //     action: {
+    //       indent: 'outdent',
+    //     },
+    //   },
+    //   // Indent when pressing enter from inside ()
+    //   {
+    //     beforeText: '^.*\\([^\\)]*$',
+    //     afterText: '^\\s*\\).*$',
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: '\t',
+    //     },
+    //   },
+    //   // Indent when pressing enter from inside {}
+    //   {
+    //     beforeText: '^.*\\{[^\\}]*$',
+    //     afterText: '^\\s*\\}.*$',
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: '\t',
+    //     },
+    //   },
+    //   // Indent when pressing enter from inside []
+    //   {
+    //     beforeText: '^.*\\[[^\\]]*$',
+    //     afterText: '^\\s*\\].*$',
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: '\t',
+    //     },
+    //   },
+    //   // Add // when pressing enter from inside line comment
+    //   {
+    //     beforeText: {
+    //       pattern: '(?<!\\w:)//.*',
+    //     },
+    //     afterText: {
+    //       pattern: '^(?!\\s*$).+',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       appendText: '// ',
+    //     },
+    //   },
+    // ],
+  },
+};
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 1442c170dc..be20661a07 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -22,9 +22,13 @@ import {
   codeiumProviderUrl,
   emmetMonacoUrl,
   monacoBaseUrl,
+  monacoEditorTextmateUrl,
   monacoEmacsUrl,
+  monacoTextmateUrl,
   monacoVimUrl,
   monacoVolarUrl,
+  onigasmUrl,
+  onigasmWasmUrl,
   vendorsBaseUrl,
 } from '../../vendors';
 import { getEditorTheme } from '../themes';
@@ -253,6 +257,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     astro: baseUrl + '{{hash:monaco-lang-astro.js}}',
     clio: baseUrl + '{{hash:monaco-lang-clio.js}}',
     imba: baseUrl + '{{hash:monaco-lang-imba.js}}',
+    ripple: baseUrl + '{{hash:monaco-lang-ripple.js}}',
     // sql: baseUrl + '{{hash:monaco-lang-sql.js}}', // TODO: add autocomplete
     wat: baseUrl + '{{hash:monaco-lang-wat.js}}',
   };
@@ -260,6 +265,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   interface CustomLanguageDefinition {
     config?: Monaco.languages.LanguageConfiguration;
     tokens?: Monaco.languages.IMonarchLanguage;
+    syntax?: Record<string, unknown>;
   }
 
   const addVueSupport = async () => {
@@ -274,6 +280,46 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     setTheme(currentTheme, currentEditorTheme);
   };
 
+  async function registerFromTextMate({
+    name,
+    scopeName,
+    syntax,
+  }: {
+    name: string;
+    scopeName: string;
+    syntax: string;
+  }) {
+    await addVueSupport(); // a workaround for TextMate syntax
+
+    const { loadWASM } = await import(onigasmUrl);
+    const { Registry } = await import(monacoTextmateUrl);
+    const { wireTmGrammars } = await import(monacoEditorTextmateUrl);
+
+    await loadWASM(onigasmWasmUrl);
+
+    const registry = new Registry({
+      getGrammarDefinition: async (_scopeName: string) => {
+        return {
+          format: 'json',
+          content: syntax,
+        };
+      },
+    });
+
+    const grammars = new Map();
+    grammars.set(name, scopeName);
+    monaco.languages.register({ id: name });
+    await wireTmGrammars(monaco, registry, grammars, editor);
+  }
+
+  const addRippleSupport = async (syntax: CustomLanguageDefinition['syntax']) => {
+    await registerFromTextMate({
+      name: 'ripple',
+      scopeName: 'source.ripple',
+      syntax: JSON.stringify(syntax, null, 2).replace('"name": "Ripple"', '"name": "ripple"'),
+    });
+  };
+
   const loadMonacoLanguage = async (lang: Language) => {
     if (monacoMapLanguage(lang) === 'vue') {
       await addVueSupport();
@@ -289,6 +335,10 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       if (mod.tokens) {
         monaco.languages.setMonarchTokensProvider(lang, mod.tokens);
       }
+      if (lang === 'ripple') {
+        await addRippleSupport(mod.syntax);
+        return;
+      }
     }
   };
 
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 3f30bb9b43..8afe23152f 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -27,5 +27,4 @@ export const ripple: LanguageSpecs = {
   },
   extensions: ['ripple'],
   editor: 'script',
-  editorLanguage: 'typescript',
 };
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index b0207c7aee..0945e7f014 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -295,8 +295,12 @@ export const mjmlUrl = /* @__PURE__ */ getUrl('mjml-browser@4.15.3/lib/index.js'
 
 export const monacoBaseUrl = /* @__PURE__ */ getUrl('@live-codes/monaco-editor@0.3.0/');
 
+export const monacoEditorTextmateUrl = /* @__PURE__ */ getModuleUrl('monaco-editor-textmate@4.0.0');
+
 export const monacoEmacsUrl = /* @__PURE__ */ getUrl('monaco-emacs@0.3.0/dist/monaco-emacs.js');
 
+export const monacoTextmateUrl = /* @__PURE__ */ getModuleUrl('monaco-textmate@3.0.1');
+
 export const monacoThemesBaseUrl = /* @__PURE__ */ getUrl('monaco-themes@0.4.4/themes/');
 
 export const monacoVimUrl = /* @__PURE__ */ getUrl('monaco-vim@0.4.1/dist/monaco-vim.js');
@@ -315,6 +319,10 @@ export const normalizeCssUrl = /* @__PURE__ */ getUrl('normalize.css@8.0.1/norma
 
 export const nunjucksBaseUrl = /* @__PURE__ */ getUrl('nunjucks@3.2.4/browser/');
 
+export const onigasmUrl = /* @__PURE__ */ getModuleUrl('onigasm@2.2.5');
+
+export const onigasmWasmUrl = /* @__PURE__ */ getUrl('onigasm@2.2.5/lib/onigasm.wasm');
+
 export const opalBaseUrl = /* @__PURE__ */ getUrl('https://cdn.opalrb.com/opal/1.8.2/');
 
 export const parinferUrl = /* @__PURE__ */ getUrl('parinfer@3.13.1/parinfer.js');
@@ -389,7 +397,7 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.5/compiler');
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.6/compiler');
 
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 

From 16eeddb0b45945e03c12c950914f20f594181e0d Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 1 Sep 2025 03:39:01 +0300
Subject: [PATCH 04/71] add support for CSS in Ripple components

---
 .../monaco/languages/monaco-lang-ripple.ts    | 1841 +++++++++++++++++
 src/livecodes/editor/monaco/monaco.ts         |   51 +-
 2 files changed, 1871 insertions(+), 21 deletions(-)

diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
index 392d2620d0..30aca96d4f 100644
--- a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
+++ b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
@@ -1,5 +1,6 @@
 // from https://github.com/trueadm/ripple/blob/main/packages/ripple-vscode-plugin/syntaxes/ripple.tmLanguage.json
 // and https://github.com/trueadm/ripple/blob/main/packages/ripple-vscode-plugin/language-configuration.json
+// and 'https://cdn.jsdelivr.net/gh/zikaari/monaco-textmate-languages@master/grammars/css/css.tmLanguage.json'
 export default {
   syntax: {
     information_for_contributors: [
@@ -6853,4 +6854,1844 @@ export default {
     //   },
     // ],
   },
+
+  cssSyntax: {
+    information_for_contributors: [
+      'This file has been converted from https://github.com/atom/language-css/blob/master/grammars/css.cson',
+      'If you want to provide a fix or improvement, please create a pull request against the original repository.',
+      'Once accepted there, we are happy to receive an update request.',
+    ],
+    version: 'https://github.com/atom/language-css/commit/2bc1e294e2440ad91197263cd9f95dc4b00bab2f',
+    name: 'CSS',
+    scopeName: 'source.css',
+    patterns: [
+      {
+        include: '#comment-block',
+      },
+      {
+        include: '#escapes',
+      },
+      {
+        include: '#combinators',
+      },
+      {
+        include: '#selector',
+      },
+      {
+        include: '#at-rules',
+      },
+      {
+        include: '#rule-list',
+      },
+    ],
+    repository: {
+      'at-rules': {
+        patterns: [
+          {
+            begin: '\\A(?:\\xEF\\xBB\\xBF)?(?i:(?=\\s*@charset\\b))',
+            end: ';|(?=$)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.terminator.rule.css',
+              },
+            },
+            name: 'meta.at-rule.charset.css',
+            patterns: [
+              {
+                captures: {
+                  '1': {
+                    name: 'invalid.illegal.not-lowercase.charset.css',
+                  },
+                  '2': {
+                    name: 'invalid.illegal.leading-whitespace.charset.css',
+                  },
+                  '3': {
+                    name: 'invalid.illegal.no-whitespace.charset.css',
+                  },
+                  '4': {
+                    name: 'invalid.illegal.whitespace.charset.css',
+                  },
+                  '5': {
+                    name: 'invalid.illegal.not-double-quoted.charset.css',
+                  },
+                  '6': {
+                    name: 'invalid.illegal.unclosed-string.charset.css',
+                  },
+                  '7': {
+                    name: 'invalid.illegal.unexpected-characters.charset.css',
+                  },
+                },
+                match:
+                  '(?x)        # Possible errors:\n\\G\n((?!@charset)@\\w+)   # Not lowercase (@charset is case-sensitive)\n|\n\\G(\\s+)             # Preceding whitespace\n|\n(@charset\\S[^;]*)    # No whitespace after @charset\n|\n(?<=@charset)         # Before quoted charset name\n(\\x20{2,}|\\t+)      # More than one space used, or a tab\n|\n(?<=@charset\\x20)    # Beginning of charset name\n([^";]+)              # Not double-quoted\n|\n("[^"]+$)             # Unclosed quote\n|\n(?<=")                # After charset name\n([^;]+)               # Unexpected junk instead of semicolon',
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'keyword.control.at-rule.charset.css',
+                  },
+                  '2': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                match: '((@)charset)(?=\\s)',
+              },
+              {
+                begin: '"',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.begin.css',
+                  },
+                },
+                end: '"|$',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.end.css',
+                  },
+                },
+                name: 'string.quoted.double.css',
+                patterns: [
+                  {
+                    begin: '(?:\\G|^)(?=(?:[^"])+$)',
+                    end: '$',
+                    name: 'invalid.illegal.unclosed.string.css',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)((@)import)(?:\\s+|$|(?=[\'"]|/\\*))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.at-rule.import.css',
+              },
+              '2': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            end: ';',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.terminator.rule.css',
+              },
+            },
+            name: 'meta.at-rule.import.css',
+            patterns: [
+              {
+                begin: '\\G\\s*(?=/\\*)',
+                end: '(?<=\\*/)\\s*',
+                patterns: [
+                  {
+                    include: '#comment-block',
+                  },
+                ],
+              },
+              {
+                include: '#string',
+              },
+              {
+                include: '#url',
+              },
+              {
+                include: '#media-query-list',
+              },
+            ],
+          },
+          {
+            begin: '(?i)((@)font-face)(?=\\s*|{|/\\*|$)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.at-rule.font-face.css',
+              },
+              '2': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            end: '(?!\\G)',
+            name: 'meta.at-rule.font-face.css',
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#escapes',
+              },
+              {
+                include: '#rule-list',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(@)page(?=[\\s:{]|/\\*|$)',
+            captures: {
+              '0': {
+                name: 'keyword.control.at-rule.page.css',
+              },
+              '1': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            end: '(?=\\s*($|[:{;]))',
+            name: 'meta.at-rule.page.css',
+            patterns: [
+              {
+                include: '#rule-list',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?=@media(\\s|\\(|/\\*|$))',
+            end: '(?<=})(?!\\G)',
+            patterns: [
+              {
+                begin: '(?i)\\G(@)media',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.control.at-rule.media.css',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                end: '(?=\\s*[{;])',
+                name: 'meta.at-rule.media.header.css',
+                patterns: [
+                  {
+                    include: '#media-query-list',
+                  },
+                ],
+              },
+              {
+                begin: '{',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.section.media.begin.bracket.curly.css',
+                  },
+                },
+                end: '}',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.media.end.bracket.curly.css',
+                  },
+                },
+                name: 'meta.at-rule.media.body.css',
+                patterns: [
+                  {
+                    include: '$self',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?=@counter-style([\\s\'"{;]|/\\*|$))',
+            end: '(?<=})(?!\\G)',
+            patterns: [
+              {
+                begin: '(?i)\\G(@)counter-style',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.control.at-rule.counter-style.css',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                end: '(?=\\s*{)',
+                name: 'meta.at-rule.counter-style.header.css',
+                patterns: [
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    captures: {
+                      '0': {
+                        patterns: [
+                          {
+                            include: '#escapes',
+                          },
+                        ],
+                      },
+                    },
+                    match:
+                      '(?x)\n(?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier\n  |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*',
+                    name: 'variable.parameter.style-name.css',
+                  },
+                ],
+              },
+              {
+                begin: '{',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.section.property-list.begin.bracket.curly.css',
+                  },
+                },
+                end: '}',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.property-list.end.bracket.curly.css',
+                  },
+                },
+                name: 'meta.at-rule.counter-style.body.css',
+                patterns: [
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    include: '#rule-list-innards',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?=@document([\\s\'"{;]|/\\*|$))',
+            end: '(?<=})(?!\\G)',
+            patterns: [
+              {
+                begin: '(?i)\\G(@)document',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.control.at-rule.document.css',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                end: '(?=\\s*[{;])',
+                name: 'meta.at-rule.document.header.css',
+                patterns: [
+                  {
+                    begin: '(?i)(?<![\\w-])(url-prefix|domain|regexp)(\\()',
+                    beginCaptures: {
+                      '1': {
+                        name: 'support.function.document-rule.css',
+                      },
+                      '2': {
+                        name: 'punctuation.section.function.begin.bracket.round.css',
+                      },
+                    },
+                    end: '\\)',
+                    endCaptures: {
+                      '0': {
+                        name: 'punctuation.section.function.end.bracket.round.css',
+                      },
+                    },
+                    name: 'meta.function.document-rule.css',
+                    patterns: [
+                      {
+                        include: '#string',
+                      },
+                      {
+                        include: '#comment-block',
+                      },
+                      {
+                        include: '#escapes',
+                      },
+                      {
+                        match: '[^\'")\\s]+',
+                        name: 'variable.parameter.document-rule.css',
+                      },
+                    ],
+                  },
+                  {
+                    include: '#url',
+                  },
+                  {
+                    include: '#commas',
+                  },
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+              {
+                begin: '{',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.section.document.begin.bracket.curly.css',
+                  },
+                },
+                end: '}',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.document.end.bracket.curly.css',
+                  },
+                },
+                name: 'meta.at-rule.document.body.css',
+                patterns: [
+                  {
+                    include: '$self',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?=@(?:-(?:webkit|moz|o|ms)-)?keyframes([\\s\'"{;]|/\\*|$))',
+            end: '(?<=})(?!\\G)',
+            patterns: [
+              {
+                begin: '(?i)\\G(@)(?:-(?:webkit|moz|o|ms)-)?keyframes',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.control.at-rule.keyframes.css',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                end: '(?=\\s*{)',
+                name: 'meta.at-rule.keyframes.header.css',
+                patterns: [
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    captures: {
+                      '0': {
+                        patterns: [
+                          {
+                            include: '#escapes',
+                          },
+                        ],
+                      },
+                    },
+                    match:
+                      '(?x)\n(?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier\n  |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*',
+                    name: 'variable.parameter.keyframe-list.css',
+                  },
+                ],
+              },
+              {
+                begin: '{',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.section.keyframes.begin.bracket.curly.css',
+                  },
+                },
+                end: '}',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.keyframes.end.bracket.curly.css',
+                  },
+                },
+                name: 'meta.at-rule.keyframes.body.css',
+                patterns: [
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    captures: {
+                      '1': {
+                        name: 'entity.other.keyframe-offset.css',
+                      },
+                      '2': {
+                        name: 'entity.other.keyframe-offset.percentage.css',
+                      },
+                    },
+                    match:
+                      '(?xi)\n(?<![\\w-]) (from|to) (?![\\w-])         # Keywords for 0% | 100%\n|\n([-+]?(?:\\d+(?:\\.\\d+)?|\\.\\d+)%)     # Percentile value',
+                  },
+                  {
+                    include: '#rule-list',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?=@supports(\\s|\\(|/\\*|$))',
+            end: '(?<=})(?!\\G)|(?=;)',
+            patterns: [
+              {
+                begin: '(?i)\\G(@)supports',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.control.at-rule.supports.css',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                end: '(?=\\s*[{;])',
+                name: 'meta.at-rule.supports.header.css',
+                patterns: [
+                  {
+                    include: '#feature-query-operators',
+                  },
+                  {
+                    include: '#feature-query',
+                  },
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+              {
+                begin: '{',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.section.supports.begin.bracket.curly.css',
+                  },
+                },
+                end: '}',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.supports.end.bracket.curly.css',
+                  },
+                },
+                name: 'meta.at-rule.supports.body.css',
+                patterns: [
+                  {
+                    include: '$self',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)((@)viewport)(?=[\\s\'"{;]|/\\*|$)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.at-rule.viewport.css',
+              },
+              '2': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            end: '(?=\\s*[@{;])',
+            name: 'meta.at-rule.viewport.css',
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#escapes',
+              },
+            ],
+          },
+          {
+            begin: '(?i)((@)font-feature-values)(?=[\\s\'"{;]|/\\*|$)\\s*',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.at-rule.font-feature-values.css',
+              },
+              '2': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            contentName: 'variable.parameter.font-name.css',
+            end: '(?=\\s*[@{;])',
+            name: 'meta.at-rule.font-features.css',
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#escapes',
+              },
+            ],
+          },
+          {
+            include: '#font-features',
+          },
+          {
+            begin: '(?i)((@)namespace)(?=[\\s\'";]|/\\*|$)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.at-rule.namespace.css',
+              },
+              '2': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            end: ';|(?=[@{])',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.terminator.rule.css',
+              },
+            },
+            name: 'meta.at-rule.namespace.css',
+            patterns: [
+              {
+                include: '#url',
+              },
+              {
+                captures: {
+                  '1': {
+                    patterns: [
+                      {
+                        include: '#comment-block',
+                      },
+                    ],
+                  },
+                  '2': {
+                    name: 'entity.name.function.namespace-prefix.css',
+                    patterns: [
+                      {
+                        include: '#escapes',
+                      },
+                    ],
+                  },
+                },
+                match:
+                  '(?xi)\n(?:\\G|^|(?<=\\s))\n(?=\n  (?<=\\s|^)                             # Starts with whitespace\n  (?:[-a-zA-Z_]|[^\\x00-\\x7F])          # Then a valid identifier character\n  |\n  \\s*                                   # Possible adjoining whitespace\n  /\\*(?:[^*]|\\*[^/])*\\*/              # Injected comment\n)\n(.*?)                                    # Grouped to embed #comment-block\n(\n  (?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter\n  (?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier\n    |\\\\(?:[0-9a-fA-F]{1,6}|.)\n  )*\n)',
+              },
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#escapes',
+              },
+              {
+                include: '#string',
+              },
+            ],
+          },
+        ],
+      },
+      'color-keywords': {
+        patterns: [
+          {
+            match:
+              '(?i)(?<![\\w-])(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)(?![\\w-])',
+            name: 'support.constant.color.w3c-standard-color-name.css',
+          },
+          {
+            match:
+              '(?xi) (?<![\\w-])\n(aliceblue|antiquewhite|aquamarine|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood\n|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan\n|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange\n|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise\n|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen\n|gainsboro|ghostwhite|gold|goldenrod|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki\n|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow\n|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray\n|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|magenta|mediumaquamarine|mediumblue\n|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise\n|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olivedrab|orangered\n|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum\n|powderblue|rebeccapurple|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell\n|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato\n|transparent|turquoise|violet|wheat|whitesmoke|yellowgreen)\n(?![\\w-])',
+            name: 'support.constant.color.w3c-extended-color-name.css',
+          },
+          {
+            match: '(?i)(?<![\\w-])currentColor(?![\\w-])',
+            name: 'support.constant.color.current.css',
+          },
+          {
+            match:
+              '(?xi) (?<![\\w-])\n(ActiveBorder|ActiveCaption|AppWorkspace|Background|ButtonFace|ButtonHighlight|ButtonShadow\n|ButtonText|CaptionText|GrayText|Highlight|HighlightText|InactiveBorder|InactiveCaption\n|InactiveCaptionText|InfoBackground|InfoText|Menu|MenuText|Scrollbar|ThreeDDarkShadow\n|ThreeDFace|ThreeDHighlight|ThreeDLightShadow|ThreeDShadow|Window|WindowFrame|WindowText)\n(?![\\w-])',
+            name: 'invalid.deprecated.color.system.css',
+          },
+        ],
+      },
+      combinators: {
+        patterns: [
+          {
+            match: '/deep/|>>>',
+            name: 'invalid.deprecated.combinator.css',
+          },
+          {
+            match: '>>|>|\\+|~',
+            name: 'keyword.operator.combinator.css',
+          },
+        ],
+      },
+      commas: {
+        match: ',',
+        name: 'punctuation.separator.list.comma.css',
+      },
+      'comment-block': {
+        begin: '/\\*',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.comment.begin.css',
+          },
+        },
+        end: '\\*/',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.comment.end.css',
+          },
+        },
+        name: 'comment.block.css',
+      },
+      escapes: {
+        patterns: [
+          {
+            match: '\\\\[0-9a-fA-F]{1,6}',
+            name: 'constant.character.escape.codepoint.css',
+          },
+          {
+            begin: '\\\\$\\s*',
+            end: '^(?<!\\G)',
+            name: 'constant.character.escape.newline.css',
+          },
+          {
+            match: '\\\\.',
+            name: 'constant.character.escape.css',
+          },
+        ],
+      },
+      'feature-query': {
+        begin: '\\(',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.condition.begin.bracket.round.css',
+          },
+        },
+        end: '\\)',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.condition.end.bracket.round.css',
+          },
+        },
+        name: 'meta.feature-query.css',
+        patterns: [
+          {
+            include: '#feature-query-operators',
+          },
+          {
+            include: '#feature-query',
+          },
+        ],
+      },
+      'feature-query-operators': {
+        patterns: [
+          {
+            match: '(?i)(?<=[\\s()]|^|\\*/)(and|not|or)(?=[\\s()]|/\\*|$)',
+            name: 'keyword.operator.logical.feature.$1.css',
+          },
+          {
+            include: '#rule-list-innards',
+          },
+        ],
+      },
+      'font-features': {
+        begin:
+          '(?xi)\n((@)(annotation|character-variant|ornaments|styleset|stylistic|swash))\n(?=[\\s@\'"{;]|/\\*|$)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.at-rule.${3:/downcase}.css',
+          },
+          '2': {
+            name: 'punctuation.definition.keyword.css',
+          },
+        },
+        end: '(?<=})',
+        name: 'meta.at-rule.${3:/downcase}.css',
+        patterns: [
+          {
+            begin: '{',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.section.property-list.begin.bracket.curly.css',
+              },
+            },
+            end: '}',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.property-list.end.bracket.curly.css',
+              },
+            },
+            name: 'meta.property-list.font-feature.css',
+            patterns: [
+              {
+                captures: {
+                  '0': {
+                    patterns: [
+                      {
+                        include: '#escapes',
+                      },
+                    ],
+                  },
+                },
+                match:
+                  '(?x)\n(?: [-a-zA-Z_]    | [^\\x00-\\x7F] )   # First letter\n(?: [-a-zA-Z0-9_] | [^\\x00-\\x7F]     # Remainder of identifier\n  | \\\\(?:[0-9a-fA-F]{1,6}|.)\n)*',
+                name: 'variable.font-feature.css',
+              },
+              {
+                include: '#rule-list-innards',
+              },
+            ],
+          },
+        ],
+      },
+      functions: {
+        patterns: [
+          {
+            begin: '(?i)(?<![\\w-])(calc)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.calc.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.calc.css',
+            patterns: [
+              {
+                match: '[*/]|(?<=\\s|^)[-+](?=\\s|$)',
+                name: 'keyword.operator.arithmetic.css',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?<![\\w-])(rgba?|hsla?)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.misc.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.color.css',
+            patterns: [
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin:
+              '(?xi) (?<![\\w-])\n(\n  (?:-webkit-|-moz-|-o-)?    # Accept prefixed/historical variants\n  (?:repeating-)?            # "Repeating"-type gradient\n  (?:linear|radial|conic)    # Shape\n  -gradient\n)\n(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.gradient.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.gradient.css',
+            patterns: [
+              {
+                match: '(?i)(?<![\\w-])(from|to|at)(?![\\w-])',
+                name: 'keyword.operator.gradient.css',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?<![\\w-])(-webkit-gradient)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'invalid.deprecated.gradient.function.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.gradient.invalid.deprecated.gradient.css',
+            patterns: [
+              {
+                begin: '(?i)(?<![\\w-])(from|to|color-stop)(\\()',
+                beginCaptures: {
+                  '1': {
+                    name: 'invalid.deprecated.function.css',
+                  },
+                  '2': {
+                    name: 'punctuation.section.function.begin.bracket.round.css',
+                  },
+                },
+                end: '\\)',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.function.end.bracket.round.css',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#property-values',
+                  },
+                ],
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin:
+              '(?xi) (?<![\\w-])\n(annotation|attr|blur|brightness|character-variant|contrast|counters?\n|cross-fade|drop-shadow|element|fit-content|format|grayscale|hue-rotate\n|image-set|invert|local|minmax|opacity|ornaments|repeat|saturate|sepia\n|styleset|stylistic|swash|symbols)\n(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.misc.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.misc.css',
+            patterns: [
+              {
+                match: '(?i)(?<=[,\\s"]|\\*/|^)\\d+x(?=[\\s,"\')]|/\\*|$)',
+                name: 'constant.numeric.other.density.css',
+              },
+              {
+                include: '#property-values',
+              },
+              {
+                match: '[^\'"),\\s]+',
+                name: 'variable.parameter.misc.css',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?<![\\w-])(circle|ellipse|inset|polygon|rect)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.shape.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.shape.css',
+            patterns: [
+              {
+                match: '(?i)(?<=\\s|^|\\*/)(at|round)(?=\\s|/\\*|$)',
+                name: 'keyword.operator.shape.css',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?<![\\w-])(cubic-bezier|steps)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.timing-function.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.timing-function.css',
+            patterns: [
+              {
+                match: '(?i)(?<![\\w-])(start|end)(?=\\s*\\)|$)',
+                name: 'support.constant.step-direction.css',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin:
+              '(?xi) (?<![\\w-])\n( (?:translate|scale|rotate)(?:[XYZ]|3D)?\n| matrix(?:3D)?\n| skew[XY]?\n| perspective\n)\n(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.transform.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            include: '#url',
+          },
+          {
+            begin: '(?i)(?<![\\w-])(var)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.misc.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.variable.css',
+            patterns: [
+              {
+                name: 'variable.argument.css',
+                match:
+                  '(?x)\n--\n(?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier\n  |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+        ],
+      },
+      'functional-pseudo-classes': {
+        patterns: [
+          {
+            begin: '(?i)((:)dir)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'entity.other.attribute-name.pseudo-class.css',
+              },
+              '2': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '3': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#escapes',
+              },
+              {
+                match: '(?i)(?<![\\w-])(ltr|rtl)(?![\\w-])',
+                name: 'support.constant.text-direction.css',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin: '(?i)((:)lang)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'entity.other.attribute-name.pseudo-class.css',
+              },
+              '2': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '3': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                match:
+                  '(?<=[(,\\s])[a-zA-Z]+(-[a-zA-Z0-9]*|\\\\(?:[0-9a-fA-F]{1,6}|.))*(?=[),\\s])',
+                name: 'support.constant.language-range.css',
+              },
+              {
+                begin: '"',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.begin.css',
+                  },
+                },
+                end: '"',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.end.css',
+                  },
+                },
+                name: 'string.quoted.double.css',
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    match: '(?<=["\\s])[a-zA-Z*]+(-[a-zA-Z0-9*]*)*(?=["\\s])',
+                    name: 'support.constant.language-range.css',
+                  },
+                ],
+              },
+              {
+                begin: "'",
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.begin.css',
+                  },
+                },
+                end: "'",
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.end.css',
+                  },
+                },
+                name: 'string.quoted.single.css',
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    match: "(?<=['\\s])[a-zA-Z*]+(-[a-zA-Z0-9*]*)*(?=['\\s])",
+                    name: 'support.constant.language-range.css',
+                  },
+                ],
+              },
+              {
+                include: '#commas',
+              },
+            ],
+          },
+          {
+            begin: '(?i)((:)(?:not|has|matches))(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'entity.other.attribute-name.pseudo-class.css',
+              },
+              '2': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '3': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                include: '#selector-innards',
+              },
+            ],
+          },
+          {
+            begin: '(?i)((:)nth-(?:last-)?(?:child|of-type))(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'entity.other.attribute-name.pseudo-class.css',
+              },
+              '2': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '3': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                match: '(?i)[+-]?(\\d+n?|n)(\\s*[+-]\\s*\\d+)?',
+                name: 'constant.numeric.css',
+              },
+              {
+                match: '(?i)even|odd',
+                name: 'support.constant.parity.css',
+              },
+            ],
+          },
+        ],
+      },
+      'media-features': {
+        captures: {
+          '1': {
+            name: 'support.type.property-name.media.css',
+          },
+          '2': {
+            name: 'invalid.deprecated.media.css',
+          },
+          '3': {
+            name: 'support.type.vendored.property-name.media.css',
+          },
+        },
+        match:
+          '(?xi)\n(?<=^|\\s|\\(|\\*/)           # Preceded by whitespace, bracket or comment\n(?:\n  # Standardised features\n  (\n    (?:min-|max-)?            # Range features\n    (?: height\n      | width\n      | aspect-ratio\n      | color\n      | color-index\n      | monochrome\n      | resolution\n    )\n    | grid                    # Discrete features\n    | scan\n    | orientation\n    | display-mode\n  )\n  |\n  # Deprecated features\n  (\n    (?:min-|max-)?            # Deprecated in Media Queries 4\n    device-\n    (?: height\n      | width\n      | aspect-ratio\n    )\n  )\n  |\n  # Vendor extensions\n  (\n    (?:\n      # Spec-compliant syntax\n      [-_]\n      (?: webkit              # Webkit/Blink\n        | apple|khtml         # Webkit aliases\n        | epub                # ePub3\n        | moz                 # Gecko\n        | ms                  # Microsoft\n        | o                   # Presto (pre-Opera 15)\n        | xv|ah|rim|atsc|     # Less common vendors\n          hp|tc|wap|ro\n      )\n      |\n      # Non-standard prefixes\n      (?: mso                 # Microsoft Office\n        | prince              # YesLogic\n      )\n    )\n    -\n    [\\w-]+                   # Feature name\n    (?=                       # Terminates correctly\n      \\s*                    # Possible whitespace\n      (?:                     # Possible injected comment\n        /\\*\n        (?:[^*]|\\*[^/])*\n        \\*/\n      )?\n      \\s*\n      [:)]                    # Ends with a colon or closed bracket\n    )\n  )\n)\n(?=\\s|$|[><:=]|\\)|/\\*)     # Terminates cleanly',
+      },
+      'media-feature-keywords': {
+        match:
+          '(?xi)\n(?<=^|\\s|:|\\*/)\n(?: portrait                  # Orientation\n  | landscape\n  | progressive               # Scan types\n  | interlace\n  | fullscreen                # Display modes\n  | standalone\n  | minimal-ui\n  | browser\n)\n(?=\\s|\\)|$)',
+        name: 'support.constant.property-value.css',
+      },
+      'media-query': {
+        begin: '\\G',
+        end: '(?=\\s*[{;])',
+        patterns: [
+          {
+            include: '#comment-block',
+          },
+          {
+            include: '#escapes',
+          },
+          {
+            include: '#media-types',
+          },
+          {
+            match: '(?i)(?<=\\s|^|,|\\*/)(only|not)(?=\\s|{|/\\*|$)',
+            name: 'keyword.operator.logical.$1.media.css',
+          },
+          {
+            match: '(?i)(?<=\\s|^|\\*/|\\))and(?=\\s|/\\*|$)',
+            name: 'keyword.operator.logical.and.media.css',
+          },
+          {
+            match: ',(?:(?:\\s*,)+|(?=\\s*[;){]))',
+            name: 'invalid.illegal.comma.css',
+          },
+          {
+            include: '#commas',
+          },
+          {
+            begin: '\\(',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.parameters.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.parameters.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                include: '#media-features',
+              },
+              {
+                include: '#media-feature-keywords',
+              },
+              {
+                match: ':',
+                name: 'punctuation.separator.key-value.css',
+              },
+              {
+                match: '>=|<=|=|<|>',
+                name: 'keyword.operator.comparison.css',
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'constant.numeric.css',
+                  },
+                  '2': {
+                    name: 'keyword.operator.arithmetic.css',
+                  },
+                  '3': {
+                    name: 'constant.numeric.css',
+                  },
+                },
+                match: '(\\d+)\\s*(/)\\s*(\\d+)',
+                name: 'meta.ratio.css',
+              },
+              {
+                include: '#numeric-values',
+              },
+              {
+                include: '#comment-block',
+              },
+            ],
+          },
+        ],
+      },
+      'media-query-list': {
+        begin: '(?=\\s*[^{;])',
+        end: '(?=\\s*[{;])',
+        patterns: [
+          {
+            include: '#media-query',
+          },
+        ],
+      },
+      'media-types': {
+        captures: {
+          '1': {
+            name: 'support.constant.media.css',
+          },
+          '2': {
+            name: 'invalid.deprecated.constant.media.css',
+          },
+        },
+        match:
+          '(?xi)\n(?<=^|\\s|,|\\*/)\n(?:\n  # Valid media types\n  (all|print|screen|speech)\n  |\n  # Deprecated in Media Queries 4: http://dev.w3.org/csswg/mediaqueries/#media-types\n  (aural|braille|embossed|handheld|projection|tty|tv)\n)\n(?=$|[{,\\s;]|/\\*)',
+      },
+      'numeric-values': {
+        patterns: [
+          {
+            captures: {
+              '1': {
+                name: 'punctuation.definition.constant.css',
+              },
+            },
+            match: '(#)(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b',
+            name: 'constant.other.color.rgb-value.hex.css',
+          },
+          {
+            captures: {
+              '1': {
+                name: 'keyword.other.unit.percentage.css',
+              },
+              '2': {
+                name: 'keyword.other.unit.${2:/downcase}.css',
+              },
+            },
+            match:
+              '(?xi) (?<![\\w-])\n[-+]?                               # Sign indicator\n\n(?:                                 # Numerals\n    [0-9]+ (?:\\.[0-9]+)?           # Integer/float with leading digits\n  | \\.[0-9]+                       # Float without leading digits\n)\n\n(?:                                 # Scientific notation\n  (?<=[0-9])                        # Exponent must follow a digit\n  E                                 # Exponent indicator\n  [-+]?                             # Possible sign indicator\n  [0-9]+                            # Exponent value\n)?\n\n(?:                                 # Possible unit for data-type:\n  (%)                               # - Percentage\n  | ( deg|grad|rad|turn             # - Angle\n    | Hz|kHz                        # - Frequency\n    | ch|cm|em|ex|fr|in|mm|mozmm|   # - Length\n      pc|pt|px|q|rem|vh|vmax|vmin|\n      vw\n    | dpi|dpcm|dppx                 # - Resolution\n    | s|ms                          # - Time\n    )\n  \\b                               # Boundary checking intentionally lax to\n)?                                  # facilitate embedding in CSS-like grammars',
+            name: 'constant.numeric.css',
+          },
+        ],
+      },
+      'property-keywords': {
+        patterns: [
+          {
+            match:
+              '(?xi) (?<![\\w-])\n(above|absolute|active|add|additive|after-edge|alias|all|all-petite-caps|all-scroll|all-small-caps|alpha|alphabetic|alternate|alternate-reverse\n|always|antialiased|auto|auto-pos|available|avoid|avoid-column|avoid-page|avoid-region|backwards|balance|baseline|before-edge|below|bevel\n|bidi-override|blink|block|block-axis|block-start|block-end|bold|bolder|border|border-box|both|bottom|bottom-outside|break-all|break-word|bullets\n|butt|capitalize|caption|cell|center|central|char|circle|clip|clone|close-quote|closest-corner|closest-side|col-resize|collapse|color|color-burn\n|color-dodge|column|column-reverse|common-ligatures|compact|condensed|contain|content|content-box|contents|context-menu|contextual|copy|cover\n|crisp-edges|crispEdges|crosshair|cyclic|darken|dashed|decimal|default|dense|diagonal-fractions|difference|digits|disabled|disc|discretionary-ligatures\n|distribute|distribute-all-lines|distribute-letter|distribute-space|dot|dotted|double|double-circle|downleft|downright|e-resize|each-line|ease|ease-in\n|ease-in-out|ease-out|economy|ellipse|ellipsis|embed|end|evenodd|ew-resize|exact|exclude|exclusion|expanded|extends|extra-condensed|extra-expanded\n|fallback|farthest-corner|farthest-side|fill|fill-available|fill-box|filled|fit-content|fixed|flat|flex|flex-end|flex-start|flip|forwards|freeze\n|from-image|full-width|geometricPrecision|georgian|grab|grabbing|grayscale|grid|groove|hand|hanging|hard-light|help|hidden|hide\n|historical-forms|historical-ligatures|horizontal|horizontal-tb|hue|icon|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space\n|ideographic|inactive|infinite|inherit|initial|inline|inline-axis|inline-block|inline-end|inline-flex|inline-grid|inline-list-item|inline-start\n|inline-table|inset|inside|inter-character|inter-ideograph|inter-word|intersect|invert|isolate|isolate-override|italic|jis04|jis78|jis83\n|jis90|justify|justify-all|kannada|keep-all|landscape|large|larger|left|lighten|lighter|line|line-edge|line-through|linear|linearRGB\n|lining-nums|list-item|local|loose|lowercase|lr|lr-tb|ltr|luminance|luminosity|main-size|mandatory|manipulation|manual|margin-box|match-parent\n|match-source|mathematical|max-content|medium|menu|message-box|middle|min-content|miter|mixed|move|multiply|n-resize|narrower|ne-resize\n|nearest-neighbor|nesw-resize|newspaper|no-change|no-clip|no-close-quote|no-common-ligatures|no-contextual|no-discretionary-ligatures\n|no-drop|no-historical-ligatures|no-open-quote|no-repeat|none|nonzero|normal|not-allowed|nowrap|ns-resize|numbers|numeric|nw-resize|nwse-resize\n|oblique|oldstyle-nums|open|open-quote|optimizeLegibility|optimizeQuality|optimizeSpeed|optional|ordinal|outset|outside|over|overlay|overline|padding\n|padding-box|page|painted|pan-down|pan-left|pan-right|pan-up|pan-x|pan-y|paused|petite-caps|pixelated|plaintext|pointer|portrait|pre|pre-line\n|pre-wrap|preserve-3d|progress|progressive|proportional-nums|proportional-width|proximity|radial|recto|region|relative|remove|repeat|repeat-[xy]\n|reset-size|reverse|revert|ridge|right|rl|rl-tb|round|row|row-resize|row-reverse|row-severse|rtl|ruby|ruby-base|ruby-base-container|ruby-text\n|ruby-text-container|run-in|running|s-resize|saturation|scale-down|screen|scroll|scroll-position|se-resize|semi-condensed|semi-expanded|separate\n|sesame|show|sideways|sideways-left|sideways-lr|sideways-right|sideways-rl|simplified|slashed-zero|slice|small|small-caps|small-caption|smaller\n|smooth|soft-light|solid|space|space-around|space-between|space-evenly|spell-out|square|sRGB|stacked-fractions|start|static|status-bar|swap\n|step-end|step-start|sticky|stretch|strict|stroke|stroke-box|style|sub|subgrid|subpixel-antialiased|subtract|super|sw-resize|symbolic|table\n|table-caption|table-cell|table-column|table-column-group|table-footer-group|table-header-group|table-row|table-row-group|tabular-nums|tb|tb-rl\n|text|text-after-edge|text-before-edge|text-bottom|text-top|thick|thin|titling-caps|top|top-outside|touch|traditional|transparent|triangle\n|ultra-condensed|ultra-expanded|under|underline|unicase|unset|upleft|uppercase|upright|use-glyph-orientation|use-script|verso|vertical\n|vertical-ideographic|vertical-lr|vertical-rl|vertical-text|view-box|visible|visibleFill|visiblePainted|visibleStroke|w-resize|wait|wavy\n|weight|whitespace|wider|words|wrap|wrap-reverse|x-large|x-small|xx-large|xx-small|zero|zoom-in|zoom-out)\n(?![\\w-])',
+            name: 'support.constant.property-value.css',
+          },
+          {
+            match:
+              '(?xi) (?<![\\w-])\n(arabic-indic|armenian|bengali|cambodian|circle|cjk-decimal|cjk-earthly-branch|cjk-heavenly-stem|cjk-ideographic\n|decimal|decimal-leading-zero|devanagari|disc|disclosure-closed|disclosure-open|ethiopic-halehame-am\n|ethiopic-halehame-ti-e[rt]|ethiopic-numeric|georgian|gujarati|gurmukhi|hangul|hangul-consonant|hebrew\n|hiragana|hiragana-iroha|japanese-formal|japanese-informal|kannada|katakana|katakana-iroha|khmer\n|korean-hangul-formal|korean-hanja-formal|korean-hanja-informal|lao|lower-alpha|lower-armenian|lower-greek\n|lower-latin|lower-roman|malayalam|mongolian|myanmar|oriya|persian|simp-chinese-formal|simp-chinese-informal\n|square|tamil|telugu|thai|tibetan|trad-chinese-formal|trad-chinese-informal|upper-alpha|upper-armenian\n|upper-latin|upper-roman|urdu)\n(?![\\w-])',
+            name: 'support.constant.property-value.list-style-type.css',
+          },
+          {
+            match:
+              '(?<![\\w-])(?i:-(?:ah|apple|atsc|epub|hp|khtml|moz|ms|o|rim|ro|tc|wap|webkit|xv)|(?:mso|prince))-[a-zA-Z-]+',
+            name: 'support.constant.vendored.property-value.css',
+          },
+          {
+            match:
+              '(?<![\\w-])(?i:arial|century|comic|courier|garamond|georgia|helvetica|impact|lucida|symbol|system|tahoma|times|trebuchet|utopia|verdana|webdings|sans-serif|serif|monospace)(?![\\w-])',
+            name: 'support.constant.font-name.css',
+          },
+        ],
+      },
+      'property-names': {
+        patterns: [
+          {
+            match:
+              '(?xi) (?<![\\w-])\n(?:\n    # Standard CSS\n    additive-symbols|align-content|align-items|align-self|all|animation|animation-delay|animation-direction\n  | animation-duration|animation-fill-mode|animation-iteration-count|animation-name|animation-play-state\n  | animation-timing-function|backface-visibility|background|background-attachment|background-blend-mode\n  | background-clip|background-color|background-image|background-origin|background-position|background-position-[xy]\n  | background-repeat|background-size|block-size|border|border-block-end|border-block-end-color|border-block-end-style\n  | border-block-end-width|border-block-start|border-block-start-color|border-block-start-style\n  | border-block-start-width|border-bottom|border-bottom-color|border-bottom-left-radius|border-bottom-right-radius\n  | border-bottom-style|border-bottom-width|border-collapse|border-color|border-image|border-image-outset\n  | border-image-repeat|border-image-slice|border-image-source|border-image-width|border-inline-end\n  | border-inline-end-color|border-inline-end-style|border-inline-end-width|border-inline-start\n  | border-inline-start-color|border-inline-start-style|border-inline-start-width|border-left|border-left-color\n  | border-left-style|border-left-width|border-radius|border-right|border-right-color|border-right-style\n  | border-right-width|border-spacing|border-style|border-top|border-top-color|border-top-left-radius\n  | border-top-right-radius|border-top-style|border-top-width|border-width|bottom|box-decoration-break\n  | box-shadow|box-sizing|break-after|break-before|break-inside|caption-side|clear|clip|clip-path|color\n  | column-count|column-fill|column-gap|column-rule|column-rule-color|column-rule-style|column-rule-width\n  | column-span|column-width|columns|content|counter-increment|counter-reset|cursor|direction|display\n  | empty-cells|filter|flex|flex-basis|flex-direction|flex-flow|flex-grow|flex-shrink|flex-wrap|float\n  | font|font-display|font-family|font-feature-settings|font-kerning|font-language-override|font-size|font-size-adjust\n  | font-stretch|font-style|font-synthesis|font-variant|font-variant-alternates|font-variant-caps\n  | font-variant-east-asian|font-variant-ligatures|font-variant-numeric|font-variant-position|font-weight\n  | grid|grid-area|grid-auto-columns|grid-auto-flow|grid-auto-rows|grid-column|grid-column-end|grid-column-gap\n  | grid-column-start|grid-gap|grid-row|grid-row-end|grid-row-gap|grid-row-start|grid-template|grid-template-areas\n  | grid-template-columns|grid-template-rows|height|hyphens|image-orientation|image-rendering|image-resolution\n  | ime-mode|inline-size|isolation|justify-content|left|letter-spacing|line-break|line-height|list-style\n  | list-style-image|list-style-position|list-style-type|margin|margin-block-end|margin-block-start|margin-bottom\n  | margin-inline-end|margin-inline-start|margin-left|margin-right|margin-top|mask|mask-clip|mask-composite\n  | mask-image|mask-mode|mask-origin|mask-position|mask-repeat|mask-size|mask-type|max-block-size|max-height\n  | max-inline-size|max-width|max-zoom|min-block-size|min-height|min-inline-size|min-width|min-zoom|mix-blend-mode\n  | negative|object-fit|object-position|offset-block-end|offset-block-start|offset-inline-end|offset-inline-start\n  | opacity|order|orientation|orphans|outline|outline-color|outline-offset|outline-style|outline-width|overflow\n  | overflow-wrap|overflow-[xy]|pad|padding|padding-block-end|padding-block-start|padding-bottom|padding-inline-end\n  | padding-inline-start|padding-left|padding-right|padding-top|page-break-after|page-break-before|page-break-inside\n  | perspective|perspective-origin|pointer-events|position|prefix|quotes|range|resize|right|ruby-align|ruby-merge\n  | ruby-position|scroll-behavior|scroll-snap-coordinate|scroll-snap-destination|scroll-snap-type|shape-image-threshold\n  | shape-margin|shape-outside|speak-as|src|suffix|symbols|system|tab-size|table-layout|text-align|text-align-last\n  | text-combine-upright|text-decoration|text-decoration-color|text-decoration-line|text-decoration-style|text-emphasis\n  | text-emphasis-color|text-emphasis-position|text-emphasis-style|text-indent|text-orientation|text-overflow\n  | text-rendering|text-shadow|text-transform|text-underline-position|top|touch-action|transform|transform-box\n  | transform-origin|transform-style|transition|transition-delay|transition-duration|transition-property\n  | transition-timing-function|unicode-bidi|unicode-range|user-zoom|vertical-align|visibility|white-space|widows\n  | width|will-change|word-break|word-spacing|word-wrap|writing-mode|z-index|zoom\n\n  # SVG attributes\n  | alignment-baseline|baseline-shift|clip-rule|color-interpolation|color-interpolation-filters|color-profile\n  | color-rendering|dominant-baseline|enable-background|fill|fill-opacity|fill-rule|flood-color|flood-opacity\n  | glyph-orientation-horizontal|glyph-orientation-vertical|kerning|lighting-color|marker-end|marker-mid\n  | marker-start|shape-rendering|stop-color|stop-opacity|stroke|stroke-dasharray|stroke-dashoffset|stroke-linecap\n  | stroke-linejoin|stroke-miterlimit|stroke-opacity|stroke-width|text-anchor|x|y\n\n  # Not listed on MDN; presumably deprecated\n  | adjust|after|align|align-last|alignment|alignment-adjust|appearance|attachment|azimuth|background-break\n  | balance|baseline|before|bidi|binding|bookmark|bookmark-label|bookmark-level|bookmark-target|border-length\n  | bottom-color|bottom-left-radius|bottom-right-radius|bottom-style|bottom-width|box|box-align|box-direction\n  | box-flex|box-flex-group|box-lines|box-ordinal-group|box-orient|box-pack|break|character|collapse|column\n  | column-break-after|column-break-before|count|counter|crop|cue|cue-after|cue-before|decoration|decoration-break\n  | delay|display-model|display-role|down|drop|drop-initial-after-adjust|drop-initial-after-align|drop-initial-before-adjust\n  | drop-initial-before-align|drop-initial-size|drop-initial-value|duration|elevation|emphasis|family|fit|fit-position\n  | flex-group|float-offset|gap|grid-columns|grid-rows|hanging-punctuation|header|hyphenate|hyphenate-after|hyphenate-before\n  | hyphenate-character|hyphenate-lines|hyphenate-resource|icon|image|increment|indent|index|initial-after-adjust\n  | initial-after-align|initial-before-adjust|initial-before-align|initial-size|initial-value|inline-box-align|iteration-count\n  | justify|label|left-color|left-style|left-width|length|level|line|line-stacking|line-stacking-ruby|line-stacking-shift\n  | line-stacking-strategy|lines|list|mark|mark-after|mark-before|marks|marquee|marquee-direction|marquee-play-count|marquee-speed\n  | marquee-style|max|min|model|move-to|name|nav|nav-down|nav-index|nav-left|nav-right|nav-up|new|numeral|offset|ordinal-group\n  | orient|origin|overflow-style|overhang|pack|page|page-policy|pause|pause-after|pause-before|phonemes|pitch|pitch-range\n  | play-count|play-during|play-state|point|presentation|presentation-level|profile|property|punctuation|punctuation-trim\n  | radius|rate|rendering-intent|repeat|replace|reset|resolution|resource|respond-to|rest|rest-after|rest-before|richness\n  | right-color|right-style|right-width|role|rotation|rotation-point|rows|ruby|ruby-overhang|ruby-span|rule|rule-color\n  | rule-style|rule-width|shadow|size|size-adjust|sizing|space|space-collapse|spacing|span|speak|speak-header|speak-numeral\n  | speak-punctuation|speech|speech-rate|speed|stacking|stacking-ruby|stacking-shift|stacking-strategy|stress|stretch\n  | string-set|style|style-image|style-position|style-type|target|target-name|target-new|target-position|text|text-height\n  | text-justify|text-outline|text-replace|text-wrap|timing-function|top-color|top-left-radius|top-right-radius|top-style\n  | top-width|trim|unicode|up|user-select|variant|voice|voice-balance|voice-duration|voice-family|voice-pitch|voice-pitch-range\n  | voice-rate|voice-stress|voice-volume|volume|weight|white|white-space-collapse|word|wrap\n)\n(?![\\w-])',
+            name: 'support.type.property-name.css',
+          },
+          {
+            match:
+              '(?<![\\w-])(?i:-(?:ah|apple|atsc|epub|hp|khtml|moz|ms|o|rim|ro|tc|wap|webkit|xv)|(?:mso|prince))-[a-zA-Z-]+',
+            name: 'support.type.vendored.property-name.css',
+          },
+        ],
+      },
+      'property-values': {
+        patterns: [
+          {
+            include: '#commas',
+          },
+          {
+            include: '#comment-block',
+          },
+          {
+            include: '#escapes',
+          },
+          {
+            include: '#functions',
+          },
+          {
+            include: '#property-keywords',
+          },
+          {
+            include: '#unicode-range',
+          },
+          {
+            include: '#numeric-values',
+          },
+          {
+            include: '#color-keywords',
+          },
+          {
+            include: '#string',
+          },
+          {
+            match: '!\\s*important(?![\\w-])',
+            name: 'keyword.other.important.css',
+          },
+        ],
+      },
+      'pseudo-classes': {
+        captures: {
+          '1': {
+            name: 'punctuation.definition.entity.css',
+          },
+          '2': {
+            name: 'invalid.illegal.colon.css',
+          },
+        },
+        match:
+          '(?xi)\n(:)(:*)\n(?: active|any-link|checked|default|disabled|empty|enabled|first\n  | (?:first|last|only)-(?:child|of-type)|focus|focus-within|fullscreen|host|hover\n  | in-range|indeterminate|invalid|left|link|optional|out-of-range\n  | read-only|read-write|required|right|root|scope|target|unresolved\n  | valid|visited\n)(?![\\w-]|\\s*[;}])',
+        name: 'entity.other.attribute-name.pseudo-class.css',
+      },
+      'pseudo-elements': {
+        captures: {
+          '1': {
+            name: 'punctuation.definition.entity.css',
+          },
+          '2': {
+            name: 'punctuation.definition.entity.css',
+          },
+        },
+        match:
+          '(?xi)\n(?:\n  (::?)                       # Elements using both : and :: notation\n  (?: after\n    | before\n    | first-letter\n    | first-line\n    | (?:-(?:ah|apple|atsc|epub|hp|khtml|moz\n            |ms|o|rim|ro|tc|wap|webkit|xv)\n        | (?:mso|prince))\n      -[a-z-]+\n  )\n  |\n  (::)                        # Double-colon only\n  (?: backdrop\n    | content\n    | grammar-error\n    | marker\n    | placeholder\n    | selection\n    | shadow\n    | spelling-error\n  )\n)\n(?![\\w-]|\\s*[;}])',
+        name: 'entity.other.attribute-name.pseudo-element.css',
+      },
+      'rule-list': {
+        begin: '{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.section.property-list.begin.bracket.curly.css',
+          },
+        },
+        end: '}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.section.property-list.end.bracket.curly.css',
+          },
+        },
+        name: 'meta.property-list.css',
+        patterns: [
+          {
+            include: '#rule-list-innards',
+          },
+        ],
+      },
+      'rule-list-innards': {
+        patterns: [
+          {
+            include: '#comment-block',
+          },
+          {
+            include: '#escapes',
+          },
+          {
+            include: '#font-features',
+          },
+          {
+            match:
+              '(?x) (?<![\\w-])\n--\n(?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier\n  |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*',
+            name: 'variable.css',
+          },
+          {
+            begin: '(?<![-a-zA-Z])(?=[-a-zA-Z])',
+            end: '$|(?![-a-zA-Z])',
+            name: 'meta.property-name.css',
+            patterns: [
+              {
+                include: '#property-names',
+              },
+            ],
+          },
+          {
+            begin: '(:)\\s*',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.separator.key-value.css',
+              },
+            },
+            end: '\\s*(;)|\\s*(?=}|\\))',
+            endCaptures: {
+              '1': {
+                name: 'punctuation.terminator.rule.css',
+              },
+            },
+            contentName: 'meta.property-value.css',
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            match: ';',
+            name: 'punctuation.terminator.rule.css',
+          },
+        ],
+      },
+      selector: {
+        begin:
+          '(?x)\n(?=\n  (?:\\|)?                    # Possible anonymous namespace prefix\n  (?:\n    [-\\[:.*\\#a-zA-Z_]       # Valid selector character\n    |\n    [^\\x00-\\x7F]            # Which can include non-ASCII symbols\n    |\n    \\\\                      # Or an escape sequence\n    (?:[0-9a-fA-F]{1,6}|.)\n  )\n)',
+        end: '(?=\\s*[/@{)])',
+        name: 'meta.selector.css',
+        patterns: [
+          {
+            include: '#selector-innards',
+          },
+        ],
+      },
+      'selector-innards': {
+        patterns: [
+          {
+            include: '#comment-block',
+          },
+          {
+            include: '#commas',
+          },
+          {
+            include: '#escapes',
+          },
+          {
+            include: '#combinators',
+          },
+          {
+            captures: {
+              '1': {
+                name: 'entity.other.namespace-prefix.css',
+              },
+              '2': {
+                name: 'punctuation.separator.css',
+              },
+            },
+            match:
+              "(?x)\n(?:^|(?<=[\\s,(};]))         # Follows whitespace, comma, semicolon, or bracket\n(?!\n  [-\\w*]+\n  \\|\n  (?!\n      [-\\[:.*\\#a-zA-Z_]    # Make sure there's a selector to match\n    | [^\\x00-\\x7F]\n  )\n)\n(\n  (?: [-a-zA-Z_]    | [^\\x00-\\x7F] )   # First letter\n  (?: [-a-zA-Z0-9_] | [^\\x00-\\x7F]     # Remainder of identifier\n    | \\\\(?:[0-9a-fA-F]{1,6}|.)\n  )*\n  |\n  \\*     # Universal namespace\n)?\n(\\|)     # Namespace separator",
+          },
+          {
+            include: '#tag-names',
+          },
+          {
+            match: '\\*',
+            name: 'entity.name.tag.wildcard.css',
+          },
+          {
+            captures: {
+              '1': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '2': {
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+            },
+            match:
+              '(?x) (?<![@\\w-])\n([.\\#])\n# Invalid identifier\n(\n  (?:\n    # Starts with ASCII digits, with possible hyphen preceding it\n    -?[0-9]\n    |\n    # Consists of a hyphen only\n    -                                      # Terminated by either:\n    (?= $                                  # - End-of-line\n      | [\\s,.\\#)\\[:{>+~|]               # - Followed by another selector\n      | /\\*                               # - Followed by a block comment\n    )\n    |\n    # Name contains unescaped ASCII symbol\n    (?:                                    # Check for acceptable preceding characters\n        [-a-zA-Z_0-9]|[^\\x00-\\x7F]       # - Valid selector character\n      | \\\\(?:[0-9a-fA-F]{1,6}|.)         # - Escape sequence\n    )*\n    (?:                                    # Invalid punctuation\n      [!"\'%&(*;<?@^`|\\]}]                 # - NOTE: We exempt `)` from the list of checked\n      |                                    #   symbols to avoid matching `:not(.invalid)`\n      / (?!\\*)                            # - Avoid invalidating the start of a comment\n    )+\n  )\n  # Mark remainder of selector invalid\n  (?: [-a-zA-Z_0-9]|[^\\x00-\\x7F]         # - Otherwise valid identifier characters\n    | \\\\(?:[0-9a-fA-F]{1,6}|.)           # - Escape sequence\n  )*\n)',
+            name: 'invalid.illegal.bad-identifier.css',
+          },
+          {
+            captures: {
+              '1': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '2': {
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+            },
+            match:
+              '(?x)\n(\\.)                                  # Valid class-name\n(\n  (?: [-a-zA-Z_0-9]|[^\\x00-\\x7F]     # Valid identifier characters\n    | \\\\(?:[0-9a-fA-F]{1,6}|.)       # Escape sequence\n  )+\n)                                      # Followed by either:\n(?= $                                  # - End of the line\n  | [\\s,.\\#)\\[:{>+~|]               # - Another selector\n  | /\\*                               # - A block comment\n)',
+            name: 'entity.other.attribute-name.class.css',
+          },
+          {
+            captures: {
+              '1': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '2': {
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+            },
+            match:
+              '(?x)\n(\\#)\n(\n  -?\n  (?![0-9])\n  (?:[-a-zA-Z0-9_]|[^\\x00-\\x7F]|\\\\(?:[0-9a-fA-F]{1,6}|.))+\n)\n(?=$|[\\s,.\\#)\\[:{>+~|]|/\\*)',
+            name: 'entity.other.attribute-name.id.css',
+          },
+          {
+            begin: '\\[',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.entity.begin.bracket.square.css',
+              },
+            },
+            end: '\\]',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.entity.end.bracket.square.css',
+              },
+            },
+            name: 'meta.attribute-selector.css',
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#string',
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'storage.modifier.ignore-case.css',
+                  },
+                },
+                match: '(?<=["\'\\s]|^|\\*/)\\s*([iI])\\s*(?=[\\s\\]]|/\\*|$)',
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'string.unquoted.attribute-value.css',
+                    patterns: [
+                      {
+                        include: '#escapes',
+                      },
+                    ],
+                  },
+                },
+                match: '(?x)(?<==)\\s*((?!/\\*)(?:[^\\\\"\'\\s\\]]|\\\\.)+)',
+              },
+              {
+                include: '#escapes',
+              },
+              {
+                match: '[~|^$*]?=',
+                name: 'keyword.operator.pattern.css',
+              },
+              {
+                match: '\\|',
+                name: 'punctuation.separator.css',
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'entity.other.namespace-prefix.css',
+                    patterns: [
+                      {
+                        include: '#escapes',
+                      },
+                    ],
+                  },
+                },
+                match:
+                  "(?x)\n# Qualified namespace prefix\n( -?(?!\\d)(?:[\\w-]|[^\\x00-\\x7F]|\\\\(?:[0-9a-fA-F]{1,6}|.))+\n| \\*\n)\n# Lookahead to ensure there's a valid identifier ahead\n(?=\n  \\| (?!\\s|=|$|\\])\n  (?: -?(?!\\d)\n   |   [\\\\\\w-]\n   |   [^\\x00-\\x7F]\n   )\n)",
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'entity.other.attribute-name.css',
+                    patterns: [
+                      {
+                        include: '#escapes',
+                      },
+                    ],
+                  },
+                },
+                match:
+                  '(?x)\n(-?(?!\\d)(?>[\\w-]|[^\\x00-\\x7F]|\\\\(?:[0-9a-fA-F]{1,6}|.))+)\n\\s*\n(?=[~|^\\]$*=]|/\\*)',
+              },
+            ],
+          },
+          {
+            include: '#pseudo-classes',
+          },
+          {
+            include: '#pseudo-elements',
+          },
+          {
+            include: '#functional-pseudo-classes',
+          },
+          {
+            match:
+              '(?x) (?<![@\\w-])\n(?=            # Custom element names must:\n  [a-z]        # - start with a lowercase ASCII letter,\n  \\w* -       # - contain at least one dash\n)\n(?:\n  (?![A-Z])    # No uppercase ASCII letters are allowed\n  [\\w-]       # Allow any other word character or dash\n)+\n(?![(\\w-])',
+            name: 'entity.name.tag.custom.css',
+          },
+        ],
+      },
+      string: {
+        patterns: [
+          {
+            begin: '"',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.string.begin.css',
+              },
+            },
+            end: '"|(?<!\\\\)(?=$|\\n)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.string.end.css',
+              },
+            },
+            name: 'string.quoted.double.css',
+            patterns: [
+              {
+                begin: '(?:\\G|^)(?=(?:[^\\\\"]|\\\\.)+$)',
+                end: '$',
+                name: 'invalid.illegal.unclosed.string.css',
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+              {
+                include: '#escapes',
+              },
+            ],
+          },
+          {
+            begin: "'",
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.string.begin.css',
+              },
+            },
+            end: "'|(?<!\\\\)(?=$|\\n)",
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.string.end.css',
+              },
+            },
+            name: 'string.quoted.single.css',
+            patterns: [
+              {
+                begin: "(?:\\G|^)(?=(?:[^\\\\']|\\\\.)+$)",
+                end: '$',
+                name: 'invalid.illegal.unclosed.string.css',
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+              {
+                include: '#escapes',
+              },
+            ],
+          },
+        ],
+      },
+      'tag-names': {
+        match:
+          '(?xi) (?<![\\w:-])\n(?:\n    # HTML\n    a|abbr|acronym|address|applet|area|article|aside|audio|b|base|basefont|bdi|bdo|bgsound\n  | big|blink|blockquote|body|br|button|canvas|caption|center|cite|code|col|colgroup|command\n  | content|data|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|element|em|embed|fieldset\n  | figcaption|figure|font|footer|form|frame|frameset|h[1-6]|head|header|hgroup|hr|html|i\n  | iframe|image|img|input|ins|isindex|kbd|keygen|label|legend|li|link|listing|main|map|mark\n  | marquee|math|menu|menuitem|meta|meter|multicol|nav|nextid|nobr|noembed|noframes|noscript\n  | object|ol|optgroup|option|output|p|param|picture|plaintext|pre|progress|q|rb|rp|rt|rtc\n  | ruby|s|samp|script|section|select|shadow|slot|small|source|spacer|span|strike|strong\n  | style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr\n  | track|tt|u|ul|var|video|wbr|xmp\n\n  # SVG\n  | altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform\n  | circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix\n  | feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap\n  | feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur\n  | feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting\n  | feSpotLight|feTile|feTurbulence|filter|font-face|font-face-format|font-face-name\n  | font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern\n  | line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata\n  | missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor\n  | stop|svg|switch|symbol|text|textPath|tref|tspan|use|view|vkern\n\n  # MathML\n  | annotation|annotation-xml|maction|maligngroup|malignmark|math|menclose|merror|mfenced\n  | mfrac|mglyph|mi|mlabeledtr|mlongdiv|mmultiscripts|mn|mo|mover|mpadded|mphantom|mroot\n  | mrow|ms|mscarries|mscarry|msgroup|msline|mspace|msqrt|msrow|mstack|mstyle|msub|msubsup\n  | msup|mtable|mtd|mtext|mtr|munder|munderover|semantics\n)\n(?=[+~>\\s,.\\#|){:\\[]|/\\*|$)',
+        name: 'entity.name.tag.css',
+      },
+      'unicode-range': {
+        captures: {
+          '0': {
+            name: 'constant.other.unicode-range.css',
+          },
+          '1': {
+            name: 'punctuation.separator.dash.unicode-range.css',
+          },
+        },
+        match: '(?<![\\w-])[Uu]\\+[0-9A-Fa-f?]{1,6}(?:(-)[0-9A-Fa-f]{1,6})?(?![\\w-])',
+      },
+      url: {
+        begin: '(?i)(?<![\\w@-])(url)(\\()',
+        beginCaptures: {
+          '1': {
+            name: 'support.function.url.css',
+          },
+          '2': {
+            name: 'punctuation.section.function.begin.bracket.round.css',
+          },
+        },
+        end: '\\)',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.section.function.end.bracket.round.css',
+          },
+        },
+        name: 'meta.function.url.css',
+        patterns: [
+          {
+            match: '[^\'")\\s]+',
+            name: 'variable.parameter.url.css',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#comment-block',
+          },
+          {
+            include: '#escapes',
+          },
+        ],
+      },
+    },
+  },
 };
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index be20661a07..b3eb0bcd0c 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -265,7 +265,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   interface CustomLanguageDefinition {
     config?: Monaco.languages.LanguageConfiguration;
     tokens?: Monaco.languages.IMonarchLanguage;
-    syntax?: Record<string, unknown>;
   }
 
   const addVueSupport = async () => {
@@ -280,15 +279,13 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     setTheme(currentTheme, currentEditorTheme);
   };
 
-  async function registerFromTextMate({
-    name,
-    scopeName,
-    syntax,
-  }: {
-    name: string;
-    scopeName: string;
-    syntax: string;
-  }) {
+  async function registerFromTextMate(
+    langs: Array<{
+      name: string;
+      scopeName: string;
+      syntax: string;
+    }>,
+  ) {
     await addVueSupport(); // a workaround for TextMate syntax
 
     const { loadWASM } = await import(onigasmUrl);
@@ -298,26 +295,38 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     await loadWASM(onigasmWasmUrl);
 
     const registry = new Registry({
-      getGrammarDefinition: async (_scopeName: string) => {
+      getGrammarDefinition: async (scopeName: string) => {
         return {
           format: 'json',
-          content: syntax,
+          content: langs.find((l) => l.scopeName === scopeName)?.syntax ?? '',
         };
       },
     });
 
     const grammars = new Map();
-    grammars.set(name, scopeName);
-    monaco.languages.register({ id: name });
+    for (const { name, scopeName } of langs) {
+      grammars.set(name, scopeName);
+      monaco.languages.register({ id: name });
+    }
     await wireTmGrammars(monaco, registry, grammars, editor);
   }
 
-  const addRippleSupport = async (syntax: CustomLanguageDefinition['syntax']) => {
-    await registerFromTextMate({
-      name: 'ripple',
-      scopeName: 'source.ripple',
-      syntax: JSON.stringify(syntax, null, 2).replace('"name": "Ripple"', '"name": "ripple"'),
-    });
+  const addRippleSupport = async (syntaxes: {
+    ripple: Record<string, unknown>;
+    css: Record<string, unknown>;
+  }) => {
+    await registerFromTextMate([
+      {
+        name: 'ripple',
+        scopeName: 'source.ripple',
+        syntax: JSON.stringify(syntaxes.ripple),
+      },
+      {
+        name: 'CSS',
+        scopeName: 'source.css',
+        syntax: JSON.stringify(syntaxes.css),
+      },
+    ]);
   };
 
   const loadMonacoLanguage = async (lang: Language) => {
@@ -336,7 +345,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
         monaco.languages.setMonarchTokensProvider(lang, mod.tokens);
       }
       if (lang === 'ripple') {
-        await addRippleSupport(mod.syntax);
+        await addRippleSupport({ ripple: (mod as any).syntax, css: (mod as any).cssSyntax });
         return;
       }
     }

From 085b3a30c42c72176700e97d25a7a3016c688671 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 1 Sep 2025 05:15:44 +0300
Subject: [PATCH 05/71] fix typos in ripple syntax file

---
 .../editor/monaco/languages/monaco-lang-ripple.ts         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
index 30aca96d4f..b6cfdc30cc 100644
--- a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
+++ b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
@@ -1157,7 +1157,7 @@ export default {
             ],
           },
           {
-            name: 'meta.paramter.array-binding-pattern.js',
+            name: 'meta.parameter.array-binding-pattern.js',
             begin: '(?<!=|:)\\s*(?:(\\.\\.\\.)\\s*)?(\\[)',
             beginCaptures: {
               '1': {
@@ -3235,7 +3235,7 @@ export default {
           {
             name: 'meta.object.member.js meta.object-literal.key.js',
             begin: '(?=[\\\'\\"\\`])',
-            end: '(?=:)|((?<=[\\\'\\"\\`])(?=((\\s*[\\(\\<,}])|(\\s+(as|satisifies)\\s+))))',
+            end: '(?=:)|((?<=[\\\'\\"\\`])(?=((\\s*[\\(\\<,}])|(\\s+(as|satisfies)\\s+))))',
             patterns: [
               {
                 include: '#comment',
@@ -3249,7 +3249,7 @@ export default {
             name: 'meta.object.member.js meta.object-literal.key.js',
             begin:
               '(?x)(?=(\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$)))',
-            end: '(?=:)|(?=\\s*([\\(\\<,}])|(\\s+as|satisifies\\s+))',
+            end: '(?=:)|(?=\\s*([\\(\\<,}])|(\\s+as|satisfies\\s+))',
             patterns: [
               {
                 include: '#comment',
@@ -3352,7 +3352,7 @@ export default {
                 name: 'keyword.control.satisfies.js',
               },
             },
-            end: '(?=[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|^|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as|satisifies)\\s+))',
+            end: '(?=[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|^|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as|satisfies)\\s+))',
             patterns: [
               {
                 include: '#type',

From cd0045b5b7f543717037ba0b364b58fdc0ff675e Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 1 Sep 2025 05:17:30 +0300
Subject: [PATCH 06/71] temporarily use latest published ripple version

---
 src/livecodes/vendors.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 0945e7f014..322d05d4c4 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -397,7 +397,7 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.6/compiler');
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple/compiler'); // TODO: pin version
 
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 

From b7a457cd7df4c8622deef0b9330fcee7c4013d68 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 1 Sep 2025 05:20:59 +0300
Subject: [PATCH 07/71] prepare for ripple formatter

---
 src/livecodes/languages/prettier.ts           |  1 +
 src/livecodes/languages/ripple/lang-ripple.ts | 10 +++++-----
 src/sdk/models.ts                             |  1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/languages/prettier.ts b/src/livecodes/languages/prettier.ts
index 41777117da..6639d84c21 100644
--- a/src/livecodes/languages/prettier.ts
+++ b/src/livecodes/languages/prettier.ts
@@ -11,4 +11,5 @@ export const parserPlugins = {
   php: prettierPhpUrl,
   pug: vendorsBaseUrl + 'prettier/parser-pug.js',
   java: vendorsBaseUrl + 'prettier/parser-java.js',
+  // ripple: vendorsBaseUrl + 'prettier/parser-ripple.js',
 };
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 8afe23152f..a33ada87c2 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -1,15 +1,15 @@
 import type { LanguageSpecs } from '../../models';
 import { rippleUrl } from '../../vendors';
-import { parserPlugins } from '../prettier';
+// import { parserPlugins } from '../prettier';
 
 export const ripple: LanguageSpecs = {
   name: 'ripple',
   title: 'Ripple',
   info: false,
-  parser: {
-    name: 'babel-ts',
-    pluginUrls: [parserPlugins.babel, parserPlugins.html],
-  },
+  // parser: {
+  //   name: 'ripple',
+  //   pluginUrls: [parserPlugins.ripple],
+  // },
   compiler: {
     factory: async () => {
       // TODO: convert to UMD
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 16bf986a7a..fb40a15e00 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1243,6 +1243,7 @@ export type ParserName =
   | 'babel-ts'
   | 'babel-flow'
   | 'glimmer'
+  | 'ripple'
   | 'html'
   | 'markdown'
   | 'css'

From 1dd4f750140c346343a402a9f226fcf6fe9a0cd9 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 1 Sep 2025 05:25:39 +0300
Subject: [PATCH 08/71] minor fixes

---
 eslint.config.mjs                     |  1 +
 src/livecodes/editor/monaco/monaco.ts | 10 ++++------
 typos.toml                            |  1 +
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index aab8c872fb..bdb275ecf3 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -32,6 +32,7 @@ export default [
       '**/.jest',
       '**/.storybook',
       'functions/vendors',
+      'src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts',
     ],
   },
   ...fixupConfigRules(
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index b3eb0bcd0c..99ca505f3b 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -295,12 +295,10 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     await loadWASM(onigasmWasmUrl);
 
     const registry = new Registry({
-      getGrammarDefinition: async (scopeName: string) => {
-        return {
-          format: 'json',
-          content: langs.find((l) => l.scopeName === scopeName)?.syntax ?? '',
-        };
-      },
+      getGrammarDefinition: async (scopeName: string) => ({
+        format: 'json',
+        content: langs.find((l) => l.scopeName === scopeName)?.syntax ?? '',
+      }),
     });
 
     const grammars = new Map();
diff --git a/typos.toml b/typos.toml
index 629bd22d2b..b71e8ea5b4 100644
--- a/typos.toml
+++ b/typos.toml
@@ -8,6 +8,7 @@ extend-exclude = [
   "src/livecodes/services/google-fonts.ts",             # Font name
   "src/livecodes/templates/starter/blockly-starter.ts", # Random string id
   "functions/vendors/*.js",                             # Built files
+  "src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts"
 ]
 
 [default]

From 3324ef97d1acdda5bbc566c37e7d59bf207775bd Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 1 Sep 2025 13:20:42 +0300
Subject: [PATCH 09/71] add prettier-plugin-ripple

---
 src/livecodes/languages/prettier.ts           |  4 ++--
 src/livecodes/languages/ripple/lang-ripple.ts | 10 +++++-----
 src/livecodes/vendors.ts                      |  4 ++++
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/livecodes/languages/prettier.ts b/src/livecodes/languages/prettier.ts
index 6639d84c21..cd6d55457f 100644
--- a/src/livecodes/languages/prettier.ts
+++ b/src/livecodes/languages/prettier.ts
@@ -1,4 +1,4 @@
-import { prettierBaseUrl, prettierPhpUrl, vendorsBaseUrl } from '../vendors';
+import { prettierBaseUrl, prettierPhpUrl, prettierRippleUrl, vendorsBaseUrl } from '../vendors';
 
 export const prettierUrl = prettierBaseUrl + 'standalone.js';
 export const parserPlugins = {
@@ -11,5 +11,5 @@ export const parserPlugins = {
   php: prettierPhpUrl,
   pug: vendorsBaseUrl + 'prettier/parser-pug.js',
   java: vendorsBaseUrl + 'prettier/parser-java.js',
-  // ripple: vendorsBaseUrl + 'prettier/parser-ripple.js',
+  ripple: prettierRippleUrl,
 };
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index a33ada87c2..dab54bc9fa 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -1,15 +1,15 @@
 import type { LanguageSpecs } from '../../models';
 import { rippleUrl } from '../../vendors';
-// import { parserPlugins } from '../prettier';
+import { parserPlugins } from '../prettier';
 
 export const ripple: LanguageSpecs = {
   name: 'ripple',
   title: 'Ripple',
   info: false,
-  // parser: {
-  //   name: 'ripple',
-  //   pluginUrls: [parserPlugins.ripple],
-  // },
+  parser: {
+    name: 'ripple',
+    pluginUrls: [parserPlugins.ripple],
+  },
   compiler: {
     factory: async () => {
       // TODO: convert to UMD
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 322d05d4c4..903bbcbfea 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -343,6 +343,10 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
+export const prettierRippleUrl = /* @__PURE__ */ getUrl(
+  '@hatemhosny/prettier-plugin-ripple@0.0.2/build/parser-ripple.js',
+);
+
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');
 
 export const prismBaseUrl = /* @__PURE__ */ getUrl('prismjs@1.29.0/components/');

From a6c6cce91d0ffecdfcb0a0f154b3fb4fd1984988 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 1 Sep 2025 22:17:42 +0300
Subject: [PATCH 10/71] update ripple formatter

---
 src/livecodes/vendors.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 903bbcbfea..2d65cc92bb 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.2/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.3/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');
@@ -401,7 +401,7 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple/compiler'); // TODO: pin version
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.7/compiler'); // TODO: pin version
 
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 

From 4a8b37df9f6dd8adc762506148d730a0285d20d8 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 2 Sep 2025 22:36:42 +0300
Subject: [PATCH 11/71] add ripple basic syntax highlight for codemirror and
 codejar

---
 src/livecodes/editor/monaco/monaco.ts         | 8 +++++---
 src/livecodes/languages/ripple/lang-ripple.ts | 1 +
 src/livecodes/vendors.ts                      | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 99ca505f3b..9e32ab8c16 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -94,9 +94,11 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
         ? 'csharp'
         : language.startsWith('vue')
           ? 'vue'
-          : ['svelte', 'malina', 'riot'].includes(language)
-            ? ('razor' as Language) // avoid mixing code between markup & script editors when formatting
-            : mapLanguage(language);
+          : language === 'ripple'
+            ? 'ripple'
+            : ['svelte', 'malina', 'riot'].includes(language)
+              ? ('razor' as Language) // avoid mixing code between markup & script editors when formatting
+              : mapLanguage(language);
 
   try {
     (window as any).monaco = (window as any).monaco || (await loadMonaco()).monaco;
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index dab54bc9fa..7ac5abff72 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -27,4 +27,5 @@ export const ripple: LanguageSpecs = {
   },
   extensions: ['ripple'],
   editor: 'script',
+  editorLanguage: 'jsx',
 };
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 2d65cc92bb..0c9b6d6683 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.3/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.5/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');
@@ -401,7 +401,7 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.7/compiler'); // TODO: pin version
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.12/compiler'); // TODO: pin version
 
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 

From 2c881771aa2b38118035b52e56e77790b6593134 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 2 Sep 2025 23:07:51 +0300
Subject: [PATCH 12/71] use a workaround till ripple formatter is fixed

---
 src/livecodes/formatter/format.worker.ts | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/livecodes/formatter/format.worker.ts b/src/livecodes/formatter/format.worker.ts
index a6769c2bd9..0ee86a7d49 100644
--- a/src/livecodes/formatter/format.worker.ts
+++ b/src/livecodes/formatter/format.worker.ts
@@ -116,14 +116,20 @@ const format = async (
       singleQuote: formatterConfig.singleQuote ?? defaultConfig.singleQuote,
       trailingComma: formatterConfig.trailingComma === false ? 'none' : 'all',
     };
-    return (
-      (await (self as any).prettier.formatWithCursor(value, {
-        parser: parser?.name,
-        plugins: prettierPlugins,
-        cursorOffset,
-        ...options,
-      })) || unFormatted
-    );
+    const formatted = await (self as any).prettier.formatWithCursor(value, {
+      parser: parser?.name,
+      plugins: prettierPlugins,
+      cursorOffset,
+      ...options,
+    });
+
+    // TODO: remove when ripple plugin is fixed
+    if (formatted && language === 'ripple') {
+      formatted.formatted = formatted.formatted.replace(/,?\[object Object\],?/g, '');
+      if (formatted.cursorOffset < 1) formatted.cursorOffset = 1;
+    }
+
+    return formatted || unFormatted;
   }
   if (getFormatter(language) != null) {
     const formatFn = loadFormatter(language);

From 6d65af0128dda059b210724a0f3a1d80a13efeab Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 2 Sep 2025 23:17:56 +0300
Subject: [PATCH 13/71] revert formatting workaround

---
 src/livecodes/formatter/format.worker.ts | 22 ++++++++--------------
 src/livecodes/vendors.ts                 |  2 +-
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/livecodes/formatter/format.worker.ts b/src/livecodes/formatter/format.worker.ts
index 0ee86a7d49..a6769c2bd9 100644
--- a/src/livecodes/formatter/format.worker.ts
+++ b/src/livecodes/formatter/format.worker.ts
@@ -116,20 +116,14 @@ const format = async (
       singleQuote: formatterConfig.singleQuote ?? defaultConfig.singleQuote,
       trailingComma: formatterConfig.trailingComma === false ? 'none' : 'all',
     };
-    const formatted = await (self as any).prettier.formatWithCursor(value, {
-      parser: parser?.name,
-      plugins: prettierPlugins,
-      cursorOffset,
-      ...options,
-    });
-
-    // TODO: remove when ripple plugin is fixed
-    if (formatted && language === 'ripple') {
-      formatted.formatted = formatted.formatted.replace(/,?\[object Object\],?/g, '');
-      if (formatted.cursorOffset < 1) formatted.cursorOffset = 1;
-    }
-
-    return formatted || unFormatted;
+    return (
+      (await (self as any).prettier.formatWithCursor(value, {
+        parser: parser?.name,
+        plugins: prettierPlugins,
+        cursorOffset,
+        ...options,
+      })) || unFormatted
+    );
   }
   if (getFormatter(language) != null) {
     const formatFn = loadFormatter(language);
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 0c9b6d6683..923d3e4eae 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.5/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.6/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');

From 813cbdd3ff4faeff5df842a7a8a5441b6fc29b61 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 3 Sep 2025 01:20:16 +0300
Subject: [PATCH 14/71] add postFormat to parsers

---
 src/livecodes/formatter/format.worker.ts      | 18 ++++++++++--------
 src/livecodes/languages/ripple/lang-ripple.ts |  4 ++++
 src/livecodes/vendors.ts                      |  2 +-
 src/sdk/models.ts                             |  4 ++++
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/livecodes/formatter/format.worker.ts b/src/livecodes/formatter/format.worker.ts
index a6769c2bd9..d15e04adb5 100644
--- a/src/livecodes/formatter/format.worker.ts
+++ b/src/livecodes/formatter/format.worker.ts
@@ -116,14 +116,16 @@ const format = async (
       singleQuote: formatterConfig.singleQuote ?? defaultConfig.singleQuote,
       trailingComma: formatterConfig.trailingComma === false ? 'none' : 'all',
     };
-    return (
-      (await (self as any).prettier.formatWithCursor(value, {
-        parser: parser?.name,
-        plugins: prettierPlugins,
-        cursorOffset,
-        ...options,
-      })) || unFormatted
-    );
+    let formatted = await (self as any).prettier.formatWithCursor(value, {
+      parser: parser?.name,
+      plugins: prettierPlugins,
+      cursorOffset,
+      ...options,
+    });
+    if (typeof parser?.postFormat === 'function') {
+      formatted = await parser.postFormat(formatted);
+    }
+    return formatted || unFormatted;
   }
   if (getFormatter(language) != null) {
     const formatFn = loadFormatter(language);
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 7ac5abff72..d59a7a4fd7 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -9,6 +9,10 @@ export const ripple: LanguageSpecs = {
   parser: {
     name: 'ripple',
     pluginUrls: [parserPlugins.ripple],
+    postFormat: async (parsed: { formatted: string; cursorOffset: number }) => ({
+      formatted: parsed.formatted.replace(/,?\[object Object\],?/g, ''),
+      cursorOffset: parsed.cursorOffset,
+    }),
   },
   compiler: {
     factory: async () => {
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 923d3e4eae..0c9b6d6683 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.6/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.5/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index fb40a15e00..40f8abe05d 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1257,6 +1257,10 @@ export interface Parser {
   name: ParserName;
   plugins?: any[];
   pluginUrls: string[];
+  postFormat?: (parsed: {
+    formatted: string;
+    cursorOffset: number;
+  }) => Promise<{ formatted: string; cursorOffset: number }>;
 }
 export type FormatFn = (
   value: string,

From db6a6703a37a601a8290c54bdffb4f1b55a7e873 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 3 Sep 2025 01:24:12 +0300
Subject: [PATCH 15/71] edit

---
 src/livecodes/languages/ripple/lang-ripple.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index d59a7a4fd7..2b38132bc6 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -9,10 +9,14 @@ export const ripple: LanguageSpecs = {
   parser: {
     name: 'ripple',
     pluginUrls: [parserPlugins.ripple],
-    postFormat: async (parsed: { formatted: string; cursorOffset: number }) => ({
-      formatted: parsed.formatted.replace(/,?\[object Object\],?/g, ''),
-      cursorOffset: parsed.cursorOffset,
-    }),
+    postFormat: async (parsed: { formatted: string; cursorOffset: number }) => {
+      let formatted = parsed.formatted.replace(/,?\[object Object\],?/g, '');
+      if (!formatted.endsWith('\n')) formatted += '\n';
+      return {
+        formatted,
+        cursorOffset: parsed.cursorOffset,
+      };
+    },
   },
   compiler: {
     factory: async () => {

From 24df4245924f026da83e88c04e58137f714681ee Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 3 Sep 2025 01:27:48 +0300
Subject: [PATCH 16/71] add a todo comment

---
 src/livecodes/languages/ripple/lang-ripple.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 2b38132bc6..78a538945f 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -9,6 +9,7 @@ export const ripple: LanguageSpecs = {
   parser: {
     name: 'ripple',
     pluginUrls: [parserPlugins.ripple],
+    // TODO: remove this after fixing the prettier plugin
     postFormat: async (parsed: { formatted: string; cursorOffset: number }) => {
       let formatted = parsed.formatted.replace(/,?\[object Object\],?/g, '');
       if (!formatted.endsWith('\n')) formatted += '\n';

From f3702a7561b22700a75652e52f85b52fe736d309 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 4 Sep 2025 04:19:41 +0300
Subject: [PATCH 17/71] update ripple formatter and remove workaround

---
 src/livecodes/languages/ripple/lang-ripple.ts | 9 ---------
 src/livecodes/vendors.ts                      | 2 +-
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 78a538945f..7ac5abff72 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -9,15 +9,6 @@ export const ripple: LanguageSpecs = {
   parser: {
     name: 'ripple',
     pluginUrls: [parserPlugins.ripple],
-    // TODO: remove this after fixing the prettier plugin
-    postFormat: async (parsed: { formatted: string; cursorOffset: number }) => {
-      let formatted = parsed.formatted.replace(/,?\[object Object\],?/g, '');
-      if (!formatted.endsWith('\n')) formatted += '\n';
-      return {
-        formatted,
-        cursorOffset: parsed.cursorOffset,
-      };
-    },
   },
   compiler: {
     factory: async () => {
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 0c9b6d6683..6ae1b372bc 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.5/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.7/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');

From 28387b9d9b1a669e2e1a59245a6fc51cb641ab35 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 5 Sep 2025 00:13:17 +0300
Subject: [PATCH 18/71] allow changing ripple compiler version

---
 scripts/build.js                              |  1 +
 .../languages/ripple/lang-ripple-compiler.ts  | 46 +++++++++++++++++++
 src/livecodes/languages/ripple/lang-ripple.ts | 16 ++-----
 src/livecodes/vendors.ts                      |  2 -
 4 files changed, 50 insertions(+), 15 deletions(-)
 create mode 100644 src/livecodes/languages/ripple/lang-ripple-compiler.ts

diff --git a/scripts/build.js b/scripts/build.js
index 2b9d0550a5..e668ebe84e 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -237,6 +237,7 @@ const iifeBuild = () =>
       'languages/python-wasm/lang-python-wasm-script.ts',
       'languages/rescript/lang-rescript-formatter.ts',
       'languages/riot/lang-riot-compiler.ts',
+      'languages/ripple/lang-ripple-compiler.ts',
       'languages/ruby-wasm/lang-ruby-wasm-script.ts',
       'languages/scss/lang-scss-compiler.ts',
       'languages/solid/lang-solid-compiler.ts',
diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
new file mode 100644
index 0000000000..440617ab13
--- /dev/null
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -0,0 +1,46 @@
+import type { CompilerFunction, Config } from '../../models';
+import { modulesService } from '../../services/modules';
+
+(self as any).createRippleCompiler = async (initialConfig: Config): Promise<CompilerFunction> => {
+  let version = initialConfig.customSettings.ripple?.version || 'latest';
+  let compile: (code: string, filename: string) => Promise<{ js: { code: string }; css: string }>;
+
+  const updateCompiler = async (currentVersion: string) => {
+    if (typeof compile === 'function' && currentVersion === version) return;
+    const mod = await import(
+      /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${currentVersion}/compiler`)
+    );
+    compile = mod.compile;
+    version = currentVersion;
+  };
+
+  return async (code, { config }) => {
+    if (!code.trim()) return '';
+
+    const newVersion = config.customSettings.ripple?.version || version;
+    await updateCompiler(newVersion);
+
+    const { js, css } = await compile(code, './App.ripple');
+
+    const cssCode =
+      css === ''
+        ? ''
+        : `\n
+const styles = document.createElement('style');
+styles.innerHTML = ${JSON.stringify(css)};
+document.head.appendChild(styles);
+`;
+
+    const moduleUrl = /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${version}`);
+    return {
+      code: `${js.code}${cssCode}`,
+      info: {
+        imports: {
+          ripple: moduleUrl,
+          'ripple/internal': `${moduleUrl}/internal`,
+          'ripple/internal/client': `${moduleUrl}/internal/client`,
+        },
+      },
+    };
+  };
+};
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 7ac5abff72..9aacc74937 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -1,5 +1,4 @@
 import type { LanguageSpecs } from '../../models';
-import { rippleUrl } from '../../vendors';
 import { parserPlugins } from '../prettier';
 
 export const ripple: LanguageSpecs = {
@@ -11,18 +10,9 @@ export const ripple: LanguageSpecs = {
     pluginUrls: [parserPlugins.ripple],
   },
   compiler: {
-    factory: async () => {
-      // TODO: convert to UMD
-      const { compile } = await import(rippleUrl);
-      return async (code) => {
-        if (!code.trim()) return '';
-        const { js, css } = await compile(code, './src/App.ripple');
-        const cssCode =
-          css === ''
-            ? ''
-            : `\n\nconst styles = document.createElement('style');\nstyles.innerHTML = ${JSON.stringify(css)};\ndocument.head.appendChild(styles);\n`;
-        return `${js.code}${cssCode}`;
-      };
+    factory: (config, baseUrl) => {
+      (self as any).importScripts(baseUrl + '{{hash:lang-ripple-compiler.js}}');
+      return (self as any).createRippleCompiler(config);
     },
   },
   extensions: ['ripple'],
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 6ae1b372bc..c44a9dbda4 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -401,8 +401,6 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.12/compiler'); // TODO: pin version
-
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 
 export const rubyWasmScriptUrl = /* @__PURE__ */ getUrl(

From 20f8def115a88fd5520672d4b32537c75ff3bd6c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 5 Sep 2025 04:44:18 +0300
Subject: [PATCH 19/71] add ripple starter template

---
 src/livecodes/assets/templates/ripple-0.png   | Bin 0 -> 4040 bytes
 .../i18n/locales/en/translation.lokalise.json |   4 ++
 src/livecodes/i18n/locales/en/translation.ts  |   1 +
 src/livecodes/templates/starter/index.ts      |   2 +
 .../templates/starter/ripple-starter.ts       |  46 ++++++++++++++++++
 src/sdk/models.ts                             |   1 +
 6 files changed, 54 insertions(+)
 create mode 100644 src/livecodes/assets/templates/ripple-0.png
 create mode 100644 src/livecodes/templates/starter/ripple-starter.ts

diff --git a/src/livecodes/assets/templates/ripple-0.png b/src/livecodes/assets/templates/ripple-0.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b30ea52ad417ca0f4d6360f18d770992de46277
GIT binary patch
literal 4040
zcmai1cQhMN+ox(3Q7cv|Rija{SCm*mjM}jkQEgL7h1M);2B}R|&Cr@vl&GS1#OSa`
zYgE*%)@Va(e(CxCd(U~#`^UY{dG2%1xzD}l+}}vFG)Hor6FNsnN5^4oq;E}&INEs5
z!bF?jEx<Eqfj+<*sYmzfBWRtLoV~4Urb|axpUQTGW~Ak;enyS~baa58e}kTUufmg#
zj`O;)zAh@*^+y4#pWOr>`P9?GNS-Z&u^Xt$D0=sGZrXWn9V?_kR$yOl$&Y3N#x}_g
zsX=^{l=V6(;iW-3-5D;UgqLVH#Kl-0mZ&;$=nMj=xA6AYTH_OB=GNSshdW2N+S7y1
zEa{x6Z_NgLgqJ4<*_?iHf7<%B<Rk}u!VF|CWyQyg#FDx&-4u6aG*<pu9ZbN?0rXfB
z3NYmPk8-+G_Jaox;!;yn55{4Y)zvmyZ~VU773>mD=dC+N|D;_>QT6FoSoym;{M?vl
zVzjxUx;1%p)OtrsR;r8YJ%y!yRzca@OBV?(+r(8>dCj&tN)_H)2>j{GQb|cjOzb-#
zRxeU^zXv;ys1?Op1yiqlEb4gFpne-Gd6}7<TBP%F#wCk4r}*Vd_M6Mglznw!D1f2Z
z{uA}Pnjch*;cy?^*&cqF9)7^?JKHR(X`W26&8G+ASW$L%ly3vj=e{#Z1sY>%1>r(*
zad8m2+B#}Ad19{T`wi+;%bhPx91%(@e+`8LU`eg58hQwXyq`{_crSUWi@Bw9u7^QI
zMaATyzfJGuz*rJmaejV&ZMvR;65m@KwvYR|L8%H(^G88kpO-b+9beyjL_%}<`ubun
zh@?~?nM5yL(%ZRcd&ykX!Xw9?1K;DJnKi{0l2Hg3TU=U7_8#16Zf+JJ5+_$J96+j~
zoeSW1q5FCmqdNa8DLq|u)H2yk%Wj(Go}8TK&L5*|`F}*>IZSmLZhaW9bzs2v+_DrZ
zUg!zmnao>~_h=@bL1U+RlXT~UmsG^X+2e|eYQ0qWfw<&#LBYf+w{XW`ZVL;G2`>>S
zAaAVP;$9nUFKF#~KBi*BN79;Pg+e_Cb!}$%V*?>f#zqO`fKntO#4^oGg}IWLefZNm
zzOu+d_muwl>*7y>(-uG?>I?%zueuwjgoFe{M!M(6)fgV+;QDOO+y&Rc#F9H>Wo4(l
ztE+CkU$)wCSy`xbh!R63<>IB!ZxC+F7mTT~VO+B%j1i}!4zaj5)-owOV-~{c`L6}D
znNDM@R^nr?Q81J5IqB)?Sy)*O9ULllgIJIlqlCq1$2YR9JdzQQW@iJcNDj~OrS11O
zhv`j$a_6ax@N2odjAdp;qM8YgY1Nmb8ZFP7Gpd-x1Z|9S!9(wpV>mT0-Zd0IQ>o^8
z<h<qaA=TT;%8KBWjPQzY6g|txL|HE{)c5nN^TIxEY`i|*5CpEOszTv+EPup!iDqqR
z1<7)fQ*M6kjEaFpP|lj)x|uj#ox7Vv-QTxAjRo}w{8grQHT}@gPnyI0X}m<wZEAc+
zYHv$B;pR|#k0&Y5?Ah<!;N^i6R`75KxaGn3Dh<18PAFi&GS$%hqvKJXKcA%82|FGr
zXP~PabzpmJDX)3gp^fDvIi7?*f4>Cw@EhdT$7eBd_$QRXZ0QaA-%8?=hU)8#Latvu
zu>vgAjL`wgmpJ^+aZ>hZ^vYySkHNP0{mCp6TAnvGUprF7G)IP9_KjC+-vxryFYs({
z@0)aS07>eId>gN{amZ~J5)>rcR%?j}DjW5J4ZA7wtX`Mqvzwg7H$6RJ&P1=cK%Xxx
zavr=;0MFZqC8oe1^J1^0)<|=69CNKfO3FXou}@h@;PrKK-D#(;lv!`qmOEDY(z$cz
zNM_B^-Fg!g7%F;uyE%x%ly>V(!q{N$m^v&>)t(45*VhkQrh2%P(VC?X864SjaV<Rf
z215z%QK<@0!9Ggeqa!?jdZegZxIf5?i-nCNCQrBK3>3gtVJ+RFnB;#FMem2kDvRjz
z<y@UM8A9Qg&K?{Jt4{p;k9^tLgUF86;xHLmSx|uTm9;9d?0qU_MOV-oh%Ak6`R(of
zJ7`0Vx`+NWvX(af*4xvR`F~+!&n11%_*izJkH7pmAkJVo*jrF00@bNxauEu^Z}0AA
zje=Yd4JH!G(hD54x-xZ#3;b>ta;3Yb<to)!mezPN-iV(5#QK#IkdGfP{J^l2Qb+eJ
z4k*N371qb}AnSVjLsA_);NQl-Xf#@MBXemuqi85cwgD!@Q{()`Ft5pH{4!ZRQVTp`
z+sE<gHufpInb_v&Tb|ENBXTJ(Z5%5U{Tj~Tdpy@}J@oYClv?7!uu0TNtI*m_9F~fU
z)kSPk^)6@qzCmU$DCwuja|ul;2m3Yt>}osflk<LXQ1yPuMSPDq=3rraku?F2&sJOy
z-kJ~hu&8-#1#qf^UF#%&5gxHhb^qN^I;;r2M!X8Ra6MD4+~lo7kemaE3DGSeU#IOF
zdIuW1zftK##jcM^fM9<8+w^~F=uN0jLM$z9uQX4^uBNHLiu#<#Tx?25SAyKJ0*_k#
zudJUR5s_=#c5eH%7u?&|XC(YdpDigfL$$af;dYS*U!&pk@WVg>cqp%=d46&5<0(>^
zL~gYzrf@pFbiE9E#vQvB>(7rS5E4>SxDRh=9sN4|GZq_^{q>h%<K0T_KSvgWgM;-R
zB$H)<Fk7Mker(G*7rrX}{`408AbZN}-0a-f^+ncuV6gJ9UwmRY(a+S7(gt)WX+qr4
zHx<l4n$?Y`lQkCIz5Cj{zj_~QcF%XMlhSiTxE&oGt@{KqV`pFazVcAXEzc>(j1t^4
z_bSgaGIl$wrwe?DWBVJtI>%}hxT4}pHFyGx;24IcM!tWVoZD~<Z<T$kO997|mft3*
z{qh=bK<|4R<pcmkuEzdlYc~iCY(ksCX-|LmedXquNhh4MHE4@VWBEM|9&9l67kxrL
z*P$~PRd{7+WFoGl#O8LbAl|lmGQlj<u8UH~g_54hZDNbeQx;52ti~R<yro~0qfy4$
zmdMwh>)Ja5mm^7iW&@NNF9#41F;Br9D2Sf>jBLGkN}rV@+~L!rRR@ELYoC^|TqSo<
zk<e3L#@*dr_K&|+*@3tLOEYn8Z7^H=^#prYVO*t~Ik_taM}pp0+K}Lg8e5gr4M}>R
zdAZ(qF7&AFX7#k1DO@m1=#4ZK5JNb3#nvWh(+JVG!;^H;H(|7OX2u-(bt<XLrRAaE
z_sj^r!4*`#Mi78Rk}wx#?_P%^LqnMqm6S-uA-Rp-Q$Pl0fMpQ~=g+5f`vd8Ak%daz
zs*S3-T*{ruqNtgGm6FCr6tSPiWdWP>M2?7vh$@l-q<^;Mfri$>A32k+Ax6Zj%;u*~
zm9MI}iMWgm>&haRWxl%L0Y&O51vbt%S$^-Hrq-?k;tf)mo(vKimUi!Z>}ai-QB*7E
zaf4Y*QqqYCV}_=L>2!VTHZUE(9IiQDBTW+s-Cu@GiPK;p8D3HIE-qJT6;hkaO#?yY
zoETYE^~`;D>@34M$y#1s_n-E^P<SoKACV{LIU`RGQTTUg>=76eqkjA6l%9AfVaQB5
z8jW$uM^Ev4c2g>tvsMaKyi>9?4ag}Mc%$?ePY&~{frtMp_o;p(lozl7NhA>lkYP#T
zt|z<qJYgJ)CRtfPa&{-${#siv6!2~-Jao|f+;peLX_FOSS~x7zFyS4cAGmjCq9k>#
z0>W<BhRe%S2wS_^Nx{&OOg49@M~v1RFf^KwV4FhZ;^L|zMbyEB=xS<<cMk_L%W2(v
z@O{!vR2Yn!<^m!a2%<jYB#F`jIS9n)8@%N~xFvC#?ce&!0*A2LVsGL#+CdS=2T7B3
zVAk&{o;?)5N8a|eQphh7)`p_P5F8SGA*C=K{?((QR{-BbKR7s4kG+x9c=Gt<SOmDk
z{Nb>U2MS=8f<Sq5(lC$mTrpcF54$aYuZ_&vB`N@MF(?$u{d?1o>3StI;#w(kAE&>f
z43W1aI&k6<%*xF^e|NVGR-d}|htY)9jkPatQhl!WIe@Mfn;9z~U=LFYstmx_TkiLz
zi7K!FSnXscyD7s1+0u*-Zxy*n+_G9WZCqe&-glS8NY`wt(b%<bDf`n+*HiWrFbn2f
zM)^jy&K!8enMQ(w0ycX(s)T=6L@b^Y(SbX3Dzv+eHG0&>oNQj~?4wvbK+Y1#tZzip
z2+=rg{}1*@sDhm?lR^x0seNtX_FmJ+usWEy?wkjX6KpUVpKNU?)ri4%_%~jt3{Lf%
z@X&$+5{Cg<W_cOuK_}5(Bg`+xOH08c;Syt34j^uVVuWEIR`k5!e9SBP$05Fr{gM4H
zLso7MpbWw^;<0o8kd4g2+FWan!zV7#tRC?xGajM%4L&-Sinj4j;@#4{L$&&(nT$lT
z^Dl=hp|JvVA*tizG9HbY?ET)uB}Ek#x@9l7nrTXuu0IT<o{_>KocY3RXMM6py01eW
zAcjmiU!NeTw&F4eZ_~1i^tpn17I9E{IlJgwxIx+f3#=k3jZZ>nvVX51BH==czHib6
zoQQW5%`a$_AaDT8yrxl`Kcv)Ti1Ci@u$*>mp{sp)(WcVPLH?(z;qh5{+pk$!S-XUn
zTuIGSZrP!qD_*uG;&WsvyDy|6vQmaVW->qb%v|1ua@ZZERcNVz_CQQ}cOD!Jl+Az?
zErfs4{0BSB`PQBFpFXP}3x=0vi(cB4*ZF(_P%TtIDeCO8l;j><Y64Lpuu!dv5#QsE
zp#q8A*8cBjXe`B^>;roqoJ#zj@!UdFS%_vghV=?)Lig^1Xu04F^q;QEwSE@XZlVs)
z*9tczeg*?^#=}3FKjhh@H+vDs+FWT{^rj$ETRK5LA@W+k+{UG9`Grmt@6D?j9f#n5
z+$J=@uEjHTfMCHaZV~DioSS?bh&nWE)?rl`+=w_>_Y{}#(Xq{j^LWxU$Hk~&nd3z8
z!&t|L)dV1-l?M1}Ld$%ad3ku_Ol|Ts|LH|@MMd9_1Ko;P)D)_;c)RN0_xCstfY6eT
zce`uEO;F(lIFk~eMMi)sKk=%Ca;Wsg6Wg2B)zy|LmsnT0m_gi#)uv0f56k@w!aQ5c
zzFzjYgy|FX@qxIfrzeYZ{cdtu?LzzY%f5>?MEmMRT=aZ_M$qChr`9;%Cx^*Ty2Eb6
z*Z<;GvDmiiL{;H_*TtLsYk85#v$B+hih&MB0s$Y15UFf&TCmhGC3Q^;1B?X!n;rch
dZk6tYu~W=+?8O+CX1?j@j1A27U+K9={~xCjifI4<

literal 0
HcmV?d00001

diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index d6d83d19e2..4221722691 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -2744,6 +2744,10 @@
     "notes": "",
     "translation": "Riot.js Starter"
   },
+  "templates.starter.ripple": {
+    "notes": "",
+    "translation": "Ripple Starter"
+  },
   "templates.starter.ruby": {
     "notes": "",
     "translation": "Ruby Starter"
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 7346431e9b..a3246661af 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -1032,6 +1032,7 @@ const translation = {
       reason: 'Reason Starter',
       rescript: 'ReScript Starter',
       riot: 'Riot.js Starter',
+      ripple: 'Ripple Starter',
       ruby: 'Ruby Starter',
       'ruby-wasm': 'Ruby (Wasm) Starter',
       scheme: 'Scheme Starter',
diff --git a/src/livecodes/templates/starter/index.ts b/src/livecodes/templates/starter/index.ts
index 1075d26834..032067f703 100644
--- a/src/livecodes/templates/starter/index.ts
+++ b/src/livecodes/templates/starter/index.ts
@@ -52,6 +52,7 @@ import { reactStarter } from './react-starter';
 import { reasonStarter } from './reason-starter';
 import { rescriptStarter } from './rescript-starter';
 import { riotStarter } from './riot-starter';
+import { rippleStarter } from './ripple-starter';
 import { rubyStarter } from './ruby-starter';
 import { rubyWasmStarter } from './ruby-wasm-starter';
 import { schemeStarter } from './scheme-starter';
@@ -79,6 +80,7 @@ export const starterTemplates = [
   preactStarter,
   svelteStarter,
   solidStarter,
+  rippleStarter,
   litStarter,
   stencilStarter,
   mdxStarter,
diff --git a/src/livecodes/templates/starter/ripple-starter.ts b/src/livecodes/templates/starter/ripple-starter.ts
new file mode 100644
index 0000000000..07f5124b90
--- /dev/null
+++ b/src/livecodes/templates/starter/ripple-starter.ts
@@ -0,0 +1,46 @@
+import type { Template } from '../../models';
+
+export const rippleStarter: Template = {
+  name: 'ripple',
+  title: window.deps.translateString('templates.starter.ripple', 'Ripple Starter'),
+  thumbnail: 'assets/templates/ripple-0.png',
+  activeEditor: 'script',
+  markup: {
+    language: 'html',
+    content: '',
+  },
+  style: {
+    language: 'css',
+    content: '',
+  },
+  script: {
+    language: 'ripple',
+    content: `
+component Counter(props: { $name: string }) {
+  <div class="container">
+    <h1>{\`Hello, \${props.\$name}!\`}</h1>
+    <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ripple-0.png" />
+
+    let \$count = 0;
+    <p>{\`You clicked \${\$count} times.\`}</p>
+    <button onClick={() => \$count++}>{'Click me'}</button>
+  </div>
+
+  <style>
+    .container,
+    .container button {
+      text-align: center;
+      font: 1em sans-serif;
+    }
+    .logo {
+      width: 150px;
+    }
+  </style>
+}
+
+export default component App() {
+  <Counter \$name="Ripple" />
+}
+`.trimStart(),
+  },
+};
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 40f8abe05d..c465302332 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1391,6 +1391,7 @@ export type TemplateName =
   | 'preact'
   | 'svelte'
   | 'solid'
+  | 'ripple'
   | 'lit'
   | 'stencil'
   | 'mdx'

From 20a473d0e2a90774bd9a364dc83becaf84453577 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 5 Sep 2025 18:43:27 +0300
Subject: [PATCH 20/71] compile styles in ripple components

---
 src/livecodes/languages/ripple/lang-ripple-compiler.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index 440617ab13..07c16f507a 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -1,6 +1,9 @@
+import { compileBlocks } from '../../compiler';
 import type { CompilerFunction, Config } from '../../models';
 import { modulesService } from '../../services/modules';
 
+// TODO: recursively compile imported Ripple components
+
 (self as any).createRippleCompiler = async (initialConfig: Config): Promise<CompilerFunction> => {
   let version = initialConfig.customSettings.ripple?.version || 'latest';
   let compile: (code: string, filename: string) => Promise<{ js: { code: string }; css: string }>;
@@ -20,6 +23,8 @@ import { modulesService } from '../../services/modules';
     const newVersion = config.customSettings.ripple?.version || version;
     await updateCompiler(newVersion);
 
+    code = await compileBlocks(code, 'style', config);
+
     const { js, css } = await compile(code, './App.ripple');
 
     const cssCode =

From ffffb1a60defcda3328c289738247f417256a3de Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 5 Sep 2025 18:43:48 +0300
Subject: [PATCH 21/71] add docs for ripple support

---
 docs/docs/languages/ripple.mdx                | 401 ++++++++++++++++++
 docs/src/components/LanguageSliders.tsx       |   1 +
 docs/src/components/TemplateList.tsx          |   1 +
 src/livecodes/UI/command-menu-actions.ts      |   1 +
 src/livecodes/templates/starter/index.ts      |   2 +-
 .../templates/starter/ripple-starter.ts       |   2 +-
 6 files changed, 406 insertions(+), 2 deletions(-)
 create mode 100644 docs/docs/languages/ripple.mdx

diff --git a/docs/docs/languages/ripple.mdx b/docs/docs/languages/ripple.mdx
new file mode 100644
index 0000000000..93bfe5315a
--- /dev/null
+++ b/docs/docs/languages/ripple.mdx
@@ -0,0 +1,401 @@
+---
+toc_max_heading_level: 4
+---
+
+# Ripple
+
+[Ripple](https://www.ripplejs.com/) is a TypeScript UI framework that takes the best parts of React, Solid and Svelte and combines them into one package.
+
+## Usage
+
+Ripple components can be used in LiveCodes as documented in the [Ripple docs](https://github.com/trueadm/ripple). See below for usage.
+
+### Demo
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+export const demo = {
+  activeEditor: 'script',
+  script: {
+    language: 'ripple',
+    content: ` export default component Counter() {
+   let \$count = 0;
+   let \$doubled = \$count * 2;
+
+   <div class='container'>
+     <h2>{'Counter'}</h2>
+     <p>{\`Count: \${\$count}\`}</p>
+     <p>{\`Doubled: \${\$doubled}\`}</p>
+
+     <button onClick={() => \$count++}>{'Increment'}</button>
+     <button onClick={() => \$count = 0}>{'Reset'} </button>
+   </div>
+
+   <style>
+    .container {
+      text-align: center;
+      font-family: "Arial", sans-serif;
+    }
+
+    button {
+      font-size: 1em;
+      padding: 6px 12px;
+      margin: 0 6px;
+      cursor: pointer;
+      border: none;
+      font-family: "Courier New", monospace;
+    }
+
+    button:hover {
+      background-color: #e0e0e0;
+    }
+   </style>
+ }`,
+  },
+}
+
+<LiveCodes config={demo} />
+
+### Auto-rendering
+
+A component is mounted and rendered automatically as a Ripple component (without having to [manually mount](#manual-mount) it) if the following conditions are met:
+
+- The component is exported as the default export.
+- No [imports from `"./script"`](#exports) in markup editor.
+- Auto-rendering is not [disabled](#disabling-auto-rendering).
+
+### Root Element
+
+To mount the application instance to a specific DOM element use `"livecodes-app"` as the element `id` in the HTML. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used to mount the instance.
+
+Example:
+
+export const customRoot = {
+  markup: {
+    language: 'html',
+    content: `<h1>Custom Root Element</h1>
+<div id="livecodes-app"></div>
+<div>...other page content</div>
+`,
+  },
+  script: {
+    language: 'ripple',
+    content: `export default component App() {
+  let \$name = 'Ripple';
+  <div>{\`I'm a \${\$name} component\`}</div>
+  <style>
+    div {
+      color: #0e5ca3;
+      margin-bottom: 1em;
+    }
+  </style>
+}
+`,
+  },
+};
+
+<LiveCodes config={customRoot} />
+
+
+### Manual Mount
+
+Exports from Ripple code can be imported in [markup editor](../features/projects.mdx#markup-editor) from `"./script"` and used to mount the application instance manually.
+See [Exports](#exports) for details.
+
+Example:
+
+export const manualMount = {
+  markup: {
+    language: 'html',
+    content: `<h1>Manual Mount</h1>
+<div id="root"></div>
+<div>...other page content</div>
+
+<script type="module">
+  import { mount } from 'ripple';
+  import { App } from "./script";
+
+  mount(App, {
+    props: { name: 'Ripple' },
+    target: document.getElementById('root'),
+  });
+</script>
+`,
+  },
+  script: {
+    language: 'ripple',
+    content: `export component App(props: { name: string }) {
+  <div>{\`I'm a \${props.name} component\`}</div>
+  <style>
+    div {
+      color: #0e5ca3;
+      margin-bottom: 1em;
+    }
+  </style>
+}
+`,
+  },
+};
+
+<LiveCodes config={manualMount} />
+
+### Disabling Auto-rendering
+
+To disable [auto-rendering](#auto-rendering), set the [custom settings](#custom-settings) `disableAutoRender` property to `true`.
+
+```json title="Custom Settings"
+{
+  "ripple": {
+    "disableAutoRender": true
+  }
+}
+```
+
+### Module Imports
+
+npm modules can be imported as described in the section about [module resolution](../features/module-resolution.mdx), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `<link rel="stylesheet">` tags in the page `head`.
+
+Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.mdx#custom-module-resolution) documentations.
+
+Example:
+
+export const importsDemo = {
+  ripple: `import { effect } from "ripple";
+import confetti from "canvas-confetti";
+
+export default component App() {
+  <div class="container">
+    let $count = 0;
+
+    effect(() => {
+      if ($count === 2) confetti();
+    });
+
+    <button onClick={() => $count++}>{$count}</button>
+
+    if ($count > 1) {
+      <div>{'Greater than 1!'}</div>
+    }
+  </div>
+
+  <style>
+    button {
+      padding: 1rem;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+  </style>
+}
+`,
+};
+
+<LiveCodes  params={importsDemo}  formatCode={false} />
+
+
+{/*
+### Importing External Components
+
+External Svelte components can be imported. The import URL has to be an absolute URL ending with `.svelte` extension. Any bare or relative imports in the imported files are resolved and compiled recursively.
+
+Example:
+
+```html
+<script>
+  import Counter from 'https://raw.githubusercontent.com/user/repo/main/src/Counter.svelte';
+</script>
+
+<Counter />
+```
+ */}
+
+### Exports
+
+Values exported from [script editor](../features/projects.mdx#script-editor) (default or named) can be imported in the [markup editor](../features/projects.mdx#markup-editor) by importing from `"./script"` (with no extension).
+
+This can be useful, for example, for [manually mounting](#manual-mount) components in the markup editor.
+
+:::info note
+
+When values are imported from `"./script"`, [auto-rendering](#auto-rendering) is disabled, because it is assumed that you want to take control over component rendering.
+
+:::
+
+### Styles
+
+CSS can be applied to the component using various ways:
+
+#### Component Styles
+
+Styles in a `style` tag in a Ripple component are applied to that component only.
+
+CSS processors (e.g. SCSS, Stylus) can be used by specifying a `lang` attribute for the `style` tag.
+
+Example:
+
+export const styleTag = {
+  ripple: `export default component App() {
+  <h1>{'Hello World!'}</h1>
+
+  <style lang="scss">
+    $primary-color: #348734;
+    h1 {
+      color: $primary-color;
+    }
+  </style>
+}
+`
+}
+
+<RunInLiveCodes
+  params={styleTag}
+  code={styleTag.ripple}
+  language="jsx"
+  formatCode={false}
+></RunInLiveCodes>
+
+
+#### Style Editor
+
+Styles added in the [style editor](../features/projects.mdx#style-editor) are applied globally to the [result page](../features/result.mdx). This can use different **languages/processors** supported in LiveCodes including CSS, SCSS, Less, Stylus, ..etc. See [style documentation](../features/css.mdx) for more details.
+
+And of course, styles and stylesheets added in [markup editor](../features/projects.mdx#markup-editor) are also applied globally.
+
+#### Importing Stylesheets
+
+Stylesheets imported in [script editor](../features/projects.mdx#script-editor) are added as `<link rel="stylesheet">` tags in the page `head`.
+The stylesheet URL can be an absolute URL or a path in the npm package. The URL has to end with `".css"`.
+
+example:
+
+export const stylesDemo = {
+  ripple: `import "bootstrap/dist/css/bootstrap.css";\n\nexport default component App() {\n  <h1 class="m-5 text-center">{'Hello World!'}</h1>\n}\n`,
+};
+
+<RunInLiveCodes
+  params={stylesDemo}
+  code={stylesDemo.ripple}
+  language="jsx"
+  formatCode={false}
+></RunInLiveCodes>
+
+#### CSS Modules
+
+CSS modules are supported and are [documented separately](./cssmodules.mdx). Make sure to enable CSS modules (from style editor menu or in [`processors`](../configuration/configuration-object.mdx#processors) property of [configuration object](../configuration/configuration-object.mdx)).
+
+Demo:
+
+export const cssModulesDemo = {
+  activeEditor: 'script',
+  style: { language: 'css', content: `.title {\n  color: green;\n  font-family: sans-serif;\n}\n` },
+  script: {
+    language: 'ripple',
+    content: `import classes from './style.module.css';\n\nexport default component() {\n  <h1 class={classes.title}>\n    {'Hello, CSS Modules!'}\n  </h1>\n}\n`,
+  },
+  processors: ['cssmodules'],
+};
+
+<LiveCodes config={cssModulesDemo}></LiveCodes>
+
+#### CSS Frameworks
+
+[CSS Frameworks](../features/css.mdx#css-processors) supported in LiveCodes (e.g. [Tailwind CSS](./tailwindcss.mdx), [UnoCSS](./unocss.mdx), [WindiCSS](./windicss.mdx)) can detect class names added in Ripple components.
+Make sure that the required utility is enabled (from style editor menu or in `processors` property of [configuration object](../configuration/configuration-object.mdx#processors)).
+
+Example:
+
+export const tailwindDemo = {
+  activeEditor: 'script',
+  script: {
+    language: 'ripple',
+  content: `export default component Counter() {
+  let $count = 0;
+
+  <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+    <h1 class="text-2xl font-bold text-gray-800 mb-4">{'Ripple + Tailwind CSS'}</h1>
+    <div class="flex items-center space-x-4 mb-4">
+      <button
+        onClick={() => $count--}
+        class="w-12 px-4 py-2 bg-red-500 text-white rounded-lg shadow hover:bg-red-600 transition cursor-pointer"
+      >
+        {'-'}
+      </button>
+      <span class="text-3xl font-semibold text-gray-800">{$count}</span>
+      <button
+        onClick={() => $count++}
+        class="w-12 px-4 py-2 bg-green-500 text-white rounded-lg shadow hover:bg-green-600 transition cursor-pointer"
+      >
+        {'+'}
+      </button>
+    </div>
+    <button
+      onClick={() => $count = 0}
+      class="px-6 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition cursor-pointer"
+    >
+      {'Reset'}
+    </button>
+  </div>
+}
+`,
+  },
+  processors: ['tailwindcss'],
+};
+
+<LiveCodes config={tailwindDemo} />
+
+## Language Info
+
+### Name
+
+`ripple`
+
+### Extensions
+
+`.ripple`
+
+### Editor
+
+`script`
+
+## Compiler
+
+The official [Ripple compiler](https://github.com/trueadm/ripple).
+
+### Version
+
+`ripple`: v0.2.15
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.mdx) can be added to the property `ripple`.
+These include:
+
+- `"disableAutoRender"` - [disables auto-rendering](#disabling-auto-rendering) (default: `false`).
+- `"version"` - specifies the version of Ripple compiler (default: `"latest"`).
+
+Example:
+
+```json title="Custom Settings"
+{
+  "ripple": {
+    "version": "0.2.15"
+  }
+}
+```
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+## Starter Template
+
+https://livecodes.io/?template=ripple
+
+<LiveCodes template="ripple" height="400"></LiveCodes>
+
+## Links
+
+- [Ripple](https://ripplejs.com/)
+- [Ripple documentations](https://github.com/trueadm/ripple)
diff --git a/docs/src/components/LanguageSliders.tsx b/docs/src/components/LanguageSliders.tsx
index e1daff5ac6..9c51edf216 100644
--- a/docs/src/components/LanguageSliders.tsx
+++ b/docs/src/components/LanguageSliders.tsx
@@ -69,6 +69,7 @@ export default function Sliders() {
       { name: 'solid.tsx', title: 'Solid (TS)' },
       { name: 'riot', title: 'Riot.js' },
       { name: 'malina', title: 'Malina.js' },
+      { name: 'ripple', title: 'Ripple' },
       { name: 'coffeescript', title: 'CoffeeScript' },
       { name: 'livescript', title: 'LiveScript' },
       { name: 'civet', title: 'Civet' },
diff --git a/docs/src/components/TemplateList.tsx b/docs/src/components/TemplateList.tsx
index 126f377f72..e38688d7b8 100644
--- a/docs/src/components/TemplateList.tsx
+++ b/docs/src/components/TemplateList.tsx
@@ -23,6 +23,7 @@ const templates = [
   { name: 'astro', title: 'Astro Starter', thumbnail: 'astro.svg' },
   { name: 'riot', title: 'Riot.js Starter', thumbnail: 'riot.svg' },
   { name: 'malina', title: 'Malina.js Starter', thumbnail: 'malina.svg' },
+  { name: 'ripple', title: 'Ripple Starter', thumbnail: 'malina.svg' },
   { name: 'jquery', title: 'jQuery Starter', thumbnail: 'jquery.svg' },
   { name: 'backbone', title: 'Backbone Starter', thumbnail: 'backbone.svg' },
   { name: 'knockout', title: 'Knockout Starter', thumbnail: 'knockout.svg' },
diff --git a/src/livecodes/UI/command-menu-actions.ts b/src/livecodes/UI/command-menu-actions.ts
index d42de5ca55..fbed0aeb33 100644
--- a/src/livecodes/UI/command-menu-actions.ts
+++ b/src/livecodes/UI/command-menu-actions.ts
@@ -266,6 +266,7 @@ export const getCommandMenuActions = ({
         'preact',
         'svelte',
         'solid',
+        'ripple',
         'lit',
         'stencil',
         'mdx',
diff --git a/src/livecodes/templates/starter/index.ts b/src/livecodes/templates/starter/index.ts
index 032067f703..e6d68ed7fb 100644
--- a/src/livecodes/templates/starter/index.ts
+++ b/src/livecodes/templates/starter/index.ts
@@ -80,7 +80,6 @@ export const starterTemplates = [
   preactStarter,
   svelteStarter,
   solidStarter,
-  rippleStarter,
   litStarter,
   stencilStarter,
   mdxStarter,
@@ -91,6 +90,7 @@ export const starterTemplates = [
   astroStarter,
   riotStarter,
   malinaStarter,
+  rippleStarter,
   jqueryStarter,
   backboneStarter,
   knockoutStarter,
diff --git a/src/livecodes/templates/starter/ripple-starter.ts b/src/livecodes/templates/starter/ripple-starter.ts
index 07f5124b90..a74074c592 100644
--- a/src/livecodes/templates/starter/ripple-starter.ts
+++ b/src/livecodes/templates/starter/ripple-starter.ts
@@ -33,7 +33,7 @@ component Counter(props: { $name: string }) {
       font: 1em sans-serif;
     }
     .logo {
-      width: 150px;
+      width: 100px;
     }
   </style>
 }

From dfe070296804ee4292f8d87d12eb37ed5980ef77 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 5 Sep 2025 18:52:52 +0300
Subject: [PATCH 22/71] fix

---
 src/livecodes/languages/ripple/lang-ripple-compiler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index 07c16f507a..43a31a8347 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -1,4 +1,4 @@
-import { compileBlocks } from '../../compiler';
+import { compileBlocks } from '../../compiler/compile-blocks';
 import type { CompilerFunction, Config } from '../../models';
 import { modulesService } from '../../services/modules';
 

From abd3e58263040db37936b9d18ca16937f27da64d Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 20:42:36 +0300
Subject: [PATCH 23/71] allow importing external ripple components

---
 src/livecodes/compiler/import-map.ts          | 10 ++-
 .../languages/ripple/lang-ripple-compiler.ts  | 75 +++++++++++++++----
 2 files changed, 68 insertions(+), 17 deletions(-)

diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
index a915cd0040..ae70efb17c 100644
--- a/src/livecodes/compiler/import-map.ts
+++ b/src/livecodes/compiler/import-map.ts
@@ -144,6 +144,14 @@ export const isScriptImport = (mod: string) =>
       mod.toLowerCase().endsWith('.vue') ||
       mod.toLowerCase().endsWith('.svelte')));
 
+const isStyleImport = (mod: string) =>
+  mod.toLowerCase().startsWith('./style') ||
+  mod.toLowerCase().endsWith('.css') ||
+  mod.toLowerCase().endsWith('.scss') ||
+  mod.toLowerCase().endsWith('.sass') ||
+  mod.toLowerCase().endsWith('.less') ||
+  mod.toLowerCase().endsWith('.styl');
+
 const modulesCache: Record<string, string> = {};
 const fetchModule = async (mod: string) => {
   if (modulesCache[mod]) {
@@ -176,7 +184,7 @@ export const replaceSFCImports = async (
   const isExtensionless = (mod: string) =>
     mod.startsWith('.') && !mod.split('/')[mod.split('/').length - 1].includes('.');
   const sfcImports = getImports(code).filter(
-    (mod) => isSfc(mod) || isExtensionless(mod) || mod.startsWith('.'),
+    (mod) => !isStyleImport(mod) && (isSfc(mod) || isExtensionless(mod) || mod.startsWith('.')),
   );
   const projectImportMap = {
     ...config.imports,
diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index 43a31a8347..b51fe59c29 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -1,11 +1,22 @@
+import { createImportMap, getCompileResult, replaceSFCImports } from '../../compiler';
 import { compileBlocks } from '../../compiler/compile-blocks';
 import type { CompilerFunction, Config } from '../../models';
 import { modulesService } from '../../services/modules';
+import { getLanguageByAlias } from '../utils';
 
-// TODO: recursively compile imported Ripple components
+const getLatestVersion = async () => {
+  const pkg = await fetch('https://data.jsdelivr.com/v1/packages/npm/ripple')
+    .then((res) => res.json())
+    .catch(() => ({}));
+  return pkg.tags?.latest || 'latest';
+};
 
 (self as any).createRippleCompiler = async (initialConfig: Config): Promise<CompilerFunction> => {
-  let version = initialConfig.customSettings.ripple?.version || 'latest';
+  const MAIN_FILE = '__LiveCodes_App__.ripple';
+  let importedContent = '';
+  let imports: Record<string, string> = {};
+
+  let version: string = initialConfig.customSettings.ripple?.version || (await getLatestVersion());
   let compile: (code: string, filename: string) => Promise<{ js: { code: string }; css: string }>;
 
   const updateCompiler = async (currentVersion: string) => {
@@ -17,35 +28,67 @@ import { modulesService } from '../../services/modules';
     version = currentVersion;
   };
 
-  return async (code, { config }) => {
-    if (!code.trim()) return '';
+  const compileRipple = async (
+    code: string,
+    { config, filename }: { config: Config; filename: string },
+  ) => {
+    if (filename === MAIN_FILE) {
+      importedContent = '';
+      imports = {};
+    }
+    if (!code.trim()) return getCompileResult('');
 
     const newVersion = config.customSettings.ripple?.version || version;
     await updateCompiler(newVersion);
 
-    code = await compileBlocks(code, 'style', config);
+    const isRipple = (mod: string) =>
+      mod.toLowerCase().endsWith('.ripple') || mod.toLowerCase().startsWith('data:text/ripple');
 
-    const { js, css } = await compile(code, './App.ripple');
+    const fullCode = await replaceSFCImports(code, {
+      config,
+      filename,
+      getLanguageByAlias,
+      isSfc: isRipple,
+      compileSFC: async (
+        code: string,
+        { config, filename }: { config: Config; filename: string },
+      ) => {
+        const compiled = (await compileRipple(code, { config, filename })).code;
+        importedContent += `\n${filename}\n\n${code}\n`;
+        return compiled;
+      },
+    });
+    const processedCode = await compileBlocks(fullCode, 'style', config);
+    const { js, css } = await compile(processedCode, filename);
 
     const cssCode =
       css === ''
         ? ''
-        : `\n
+        : `
 const styles = document.createElement('style');
 styles.innerHTML = ${JSON.stringify(css)};
 document.head.appendChild(styles);
 `;
 
-    const moduleUrl = /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${version}`);
+    if (filename === MAIN_FILE) {
+      const moduleUrl = /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${version}`);
+      imports = {
+        ...createImportMap(importedContent, config),
+        ripple: moduleUrl,
+        'ripple/internal': `${moduleUrl}/internal`,
+        'ripple/internal/client': `${moduleUrl}/internal/client`,
+      };
+    }
+
     return {
-      code: `${js.code}${cssCode}`,
-      info: {
-        imports: {
-          ripple: moduleUrl,
-          'ripple/internal': `${moduleUrl}/internal`,
-          'ripple/internal/client': `${moduleUrl}/internal/client`,
-        },
-      },
+      code: `${js.code}\n${cssCode}`,
+      info: { importedContent, imports },
     };
   };
+
+  return (code, { config }) =>
+    compileRipple(code, {
+      config,
+      filename: MAIN_FILE,
+    });
 };

From dbfe2e154085f0711545622d877a330e5a32c6b3 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 20:42:55 +0300
Subject: [PATCH 24/71] edit ripple docs

---
 docs/docs/languages/ripple.mdx | 70 +++++++++++++++++++++++-----------
 1 file changed, 48 insertions(+), 22 deletions(-)

diff --git a/docs/docs/languages/ripple.mdx b/docs/docs/languages/ripple.mdx
index 93bfe5315a..62e5df4610 100644
--- a/docs/docs/languages/ripple.mdx
+++ b/docs/docs/languages/ripple.mdx
@@ -6,11 +6,9 @@ toc_max_heading_level: 4
 
 [Ripple](https://www.ripplejs.com/) is a TypeScript UI framework that takes the best parts of React, Solid and Svelte and combines them into one package.
 
-## Usage
-
 Ripple components can be used in LiveCodes as documented in the [Ripple docs](https://github.com/trueadm/ripple). See below for usage.
 
-### Demo
+## Demo
 
 import LiveCodes from '../../src/components/LiveCodes.tsx';
 import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
@@ -57,6 +55,9 @@ export const demo = {
 
 <LiveCodes config={demo} />
 
+
+## Mounting
+
 ### Auto-rendering
 
 A component is mounted and rendered automatically as a Ripple component (without having to [manually mount](#manual-mount) it) if the following conditions are met:
@@ -68,6 +69,7 @@ A component is mounted and rendered automatically as a Ripple component (without
 ### Root Element
 
 To mount the application instance to a specific DOM element use `"livecodes-app"` as the element `id` in the HTML. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used to mount the instance.
+In case you need more control, you can [manually mount](#manual-mount) the instance.
 
 Example:
 
@@ -152,9 +154,11 @@ To disable [auto-rendering](#auto-rendering), set the [custom settings](#custom-
 }
 ```
 
-### Module Imports
+## Importing Modules
 
-npm modules can be imported as described in the section about [module resolution](../features/module-resolution.mdx), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `<link rel="stylesheet">` tags in the page `head`.
+### NPM Modules
+
+npm modules can be imported as described in the section about [module resolution](../features/module-resolution.mdx), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `<link rel="stylesheet">` tags in the page `head` (see [below](#importing-stylesheets)).
 
 Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.mdx#custom-module-resolution) documentations.
 
@@ -192,22 +196,44 @@ export default component App() {
 
 <LiveCodes  params={importsDemo}  formatCode={false} />
 
+### External Components
 
-{/*
-### Importing External Components
+External Ripple components can be imported.
+The import URL can be either:
+- An absolute URL ending with `.ripple` extension.
+- A [bare module import](../features/module-resolution.mdx#bare-module-imports) for a published npm module with full path to the component with extension.
+- A [data URL](../features/data-urls.mdx) starting with `data:text/ripple`.
 
-External Svelte components can be imported. The import URL has to be an absolute URL ending with `.svelte` extension. Any bare or relative imports in the imported files are resolved and compiled recursively.
+Any bare or relative imports in the imported files are resolved and compiled recursively.
+If a processor is enabled (e.g. Tailwind CSS), classes in the imported files are detected and used in the generated CSS (see [CSS Frameworks](#css-frameworks) section below).
 
-Example:
+Example: ([source](https://github.com/hatemhosny/ripple-tailwind-counter-demo))
 
-```html
-<script>
-  import Counter from 'https://raw.githubusercontent.com/user/repo/main/src/Counter.svelte';
-</script>
+export const externalComponents = {
+  activeEditor: 'script',
+  script: {
+    language: 'ripple',
+    content: `// import from npm modules
+import Counter from 'ripple-tailwind-counter-demo/src/Counter.ripple';
+// alternatively use absolute URLs
+// import Counter from 'https://raw.githubusercontent.com/hatemhosny/ripple-tailwind-counter-demo/refs/heads/main/src/Counter.ripple';
 
-<Counter />
-```
- */}
+
+export default component App() {
+  let $name = "World";
+
+  setTimeout(() => {
+    $name = "Ripple + Tailwind!";
+  }, 2000);
+
+ <Counter $name={$name} />
+}
+`,
+  },
+  processors: ['tailwindcss'],
+}
+
+<LiveCodes config={externalComponents} />
 
 ### Exports
 
@@ -221,11 +247,11 @@ When values are imported from `"./script"`, [auto-rendering](#auto-rendering) is
 
 :::
 
-### Styles
+## Styles
 
 CSS can be applied to the component using various ways:
 
-#### Component Styles
+### Component Styles
 
 Styles in a `style` tag in a Ripple component are applied to that component only.
 
@@ -255,13 +281,13 @@ export const styleTag = {
 ></RunInLiveCodes>
 
 
-#### Style Editor
+### Style Editor
 
 Styles added in the [style editor](../features/projects.mdx#style-editor) are applied globally to the [result page](../features/result.mdx). This can use different **languages/processors** supported in LiveCodes including CSS, SCSS, Less, Stylus, ..etc. See [style documentation](../features/css.mdx) for more details.
 
 And of course, styles and stylesheets added in [markup editor](../features/projects.mdx#markup-editor) are also applied globally.
 
-#### Importing Stylesheets
+### Importing Stylesheets
 
 Stylesheets imported in [script editor](../features/projects.mdx#script-editor) are added as `<link rel="stylesheet">` tags in the page `head`.
 The stylesheet URL can be an absolute URL or a path in the npm package. The URL has to end with `".css"`.
@@ -279,7 +305,7 @@ export const stylesDemo = {
   formatCode={false}
 ></RunInLiveCodes>
 
-#### CSS Modules
+### CSS Modules
 
 CSS modules are supported and are [documented separately](./cssmodules.mdx). Make sure to enable CSS modules (from style editor menu or in [`processors`](../configuration/configuration-object.mdx#processors) property of [configuration object](../configuration/configuration-object.mdx)).
 
@@ -297,7 +323,7 @@ export const cssModulesDemo = {
 
 <LiveCodes config={cssModulesDemo}></LiveCodes>
 
-#### CSS Frameworks
+### CSS Frameworks
 
 [CSS Frameworks](../features/css.mdx#css-processors) supported in LiveCodes (e.g. [Tailwind CSS](./tailwindcss.mdx), [UnoCSS](./unocss.mdx), [WindiCSS](./windicss.mdx)) can detect class names added in Ripple components.
 Make sure that the required utility is enabled (from style editor menu or in `processors` property of [configuration object](../configuration/configuration-object.mdx#processors)).

From e62a259d416b4eebfabc41c63aec93cc3d23d44c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:22:08 +0300
Subject: [PATCH 25/71] upgrade ripple formatter

---
 src/livecodes/languages/ripple/lang-ripple-compiler.ts | 3 ++-
 src/livecodes/vendors.ts                               | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index b51fe59c29..c3f7a85b0c 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -1,5 +1,6 @@
-import { createImportMap, getCompileResult, replaceSFCImports } from '../../compiler';
 import { compileBlocks } from '../../compiler/compile-blocks';
+import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
+import { getCompileResult } from '../../compiler/utils';
 import type { CompilerFunction, Config } from '../../models';
 import { modulesService } from '../../services/modules';
 import { getLanguageByAlias } from '../utils';
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index c44a9dbda4..df06b73a82 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.7/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.8/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');

From 28592cd2e95d82b2538f39881507931a03277b67 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:32 +0300
Subject: [PATCH 26/71] feat(Compilers): add basic support for ripple

---
 src/livecodes/languages/languages.ts          |  2 ++
 src/livecodes/languages/ripple/index.ts       |  1 +
 src/livecodes/languages/ripple/lang-ripple.ts | 31 +++++++++++++++++++
 .../languages/ripple/ripple-runtime.ts        |  9 ++++++
 src/livecodes/result/result-page.ts           |  6 ++--
 src/livecodes/vendors.ts                      |  2 ++
 src/sdk/models.ts                             |  1 +
 7 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/livecodes/languages/ripple/index.ts
 create mode 100644 src/livecodes/languages/ripple/lang-ripple.ts
 create mode 100644 src/livecodes/languages/ripple/ripple-runtime.ts

diff --git a/src/livecodes/languages/languages.ts b/src/livecodes/languages/languages.ts
index 9f318652af..1adcb54bad 100644
--- a/src/livecodes/languages/languages.ts
+++ b/src/livecodes/languages/languages.ts
@@ -59,6 +59,7 @@ import { reason } from './reason';
 import { rescript } from './rescript';
 import { richtext } from './richtext';
 import { riot } from './riot';
+import { ripple } from './ripple';
 import { ruby } from './ruby';
 import { rubyWasm } from './ruby-wasm';
 import { scheme } from './scheme';
@@ -128,6 +129,7 @@ export const languages: LanguageSpecs[] = [
   solidTsx,
   riot,
   malina,
+  ripple,
   coffeescript,
   livescript,
   civet,
diff --git a/src/livecodes/languages/ripple/index.ts b/src/livecodes/languages/ripple/index.ts
new file mode 100644
index 0000000000..ace98a13ca
--- /dev/null
+++ b/src/livecodes/languages/ripple/index.ts
@@ -0,0 +1 @@
+export * from './lang-ripple';
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
new file mode 100644
index 0000000000..3f30bb9b43
--- /dev/null
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -0,0 +1,31 @@
+import type { LanguageSpecs } from '../../models';
+import { rippleUrl } from '../../vendors';
+import { parserPlugins } from '../prettier';
+
+export const ripple: LanguageSpecs = {
+  name: 'ripple',
+  title: 'Ripple',
+  info: false,
+  parser: {
+    name: 'babel-ts',
+    pluginUrls: [parserPlugins.babel, parserPlugins.html],
+  },
+  compiler: {
+    factory: async () => {
+      // TODO: convert to UMD
+      const { compile } = await import(rippleUrl);
+      return async (code) => {
+        if (!code.trim()) return '';
+        const { js, css } = await compile(code, './src/App.ripple');
+        const cssCode =
+          css === ''
+            ? ''
+            : `\n\nconst styles = document.createElement('style');\nstyles.innerHTML = ${JSON.stringify(css)};\ndocument.head.appendChild(styles);\n`;
+        return `${js.code}${cssCode}`;
+      };
+    },
+  },
+  extensions: ['ripple'],
+  editor: 'script',
+  editorLanguage: 'typescript',
+};
diff --git a/src/livecodes/languages/ripple/ripple-runtime.ts b/src/livecodes/languages/ripple/ripple-runtime.ts
new file mode 100644
index 0000000000..d7d8d898b6
--- /dev/null
+++ b/src/livecodes/languages/ripple/ripple-runtime.ts
@@ -0,0 +1,9 @@
+export const rippleRuntime = `
+import { mount } from 'ripple';
+import { App } from "./script";
+(() => {
+  mount(App, {
+    target: document.querySelector("#livecodes-app") || document.body.appendChild(document.createElement('div')),
+  });
+})();
+`;
diff --git a/src/livecodes/result/result-page.ts b/src/livecodes/result/result-page.ts
index 1610161a45..c5c6f189d4 100644
--- a/src/livecodes/result/result-page.ts
+++ b/src/livecodes/result/result-page.ts
@@ -11,6 +11,7 @@ import {
 import { cssPresets, getLanguageCompiler, getLanguageExtension } from '../languages';
 import { reactRuntime } from '../languages/jsx/react-runtime';
 import { reactNativeRuntime } from '../languages/react-native/react-native-runtime';
+import { rippleRuntime } from '../languages/ripple/ripple-runtime';
 import { solidRuntime } from '../languages/solid/solid-runtime';
 import { hasCustomJsxRuntime } from '../languages/typescript';
 import type { Cache, CompileInfo, Config, EditorId, Language } from '../models';
@@ -210,6 +211,7 @@ export const createResultPage = async ({
     'react-native-tsx': reactNativeRuntime,
     solid: solidRuntime,
     'solid.tsx': solidRuntime,
+    ripple: rippleRuntime,
   };
   const jsxRuntime = jsxRuntimes[code.script.language] || '';
   const reactImport =
@@ -219,7 +221,7 @@ export const createResultPage = async ({
   const shouldInsertJsxRuntime =
     Object.keys(jsxRuntimes).includes(code.script.language) &&
     !config.customSettings[code.script.language]?.disableAutoRender &&
-    hasDefaultExport(code.script.compiled) &&
+    (hasDefaultExport(code.script.compiled) || code.script.language === 'ripple') && // FIXME: ripple default export
     !hasCustomJsxRuntime(code.script.content || '', config) &&
     !importFromScript;
   const hasPreact = getImports(code.script.compiled).find((mod) => mod === 'preact');
@@ -439,7 +441,7 @@ export const createResultPage = async ({
     }
   }
 
-  // React JSX runtime
+  // JSX runtime
   if (shouldInsertJsxRuntime) {
     const jsxRuntimeScript = dom.createElement('script');
     jsxRuntimeScript.type = 'module';
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 3ee6afdcfc..570e046b59 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -389,6 +389,8 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.3/compiler');
+
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 
 export const rubyWasmScriptUrl = /* @__PURE__ */ getUrl(
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index e6bd21a015..16bf986a7a 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -968,6 +968,7 @@ export type Language =
   | 'riotjs'
   | 'malina'
   | 'malinajs'
+  | 'ripple'
   | 'xht'
   | 'coffeescript'
   | 'coffee'

From ffbdbfc666a2a004c56cc7b9d91bd635f67621a6 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:32 +0300
Subject: [PATCH 27/71] upgrade ripple, use default export

---
 src/livecodes/languages/ripple/ripple-runtime.ts | 2 +-
 src/livecodes/result/result-page.ts              | 2 +-
 src/livecodes/vendors.ts                         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/livecodes/languages/ripple/ripple-runtime.ts b/src/livecodes/languages/ripple/ripple-runtime.ts
index d7d8d898b6..80653677e6 100644
--- a/src/livecodes/languages/ripple/ripple-runtime.ts
+++ b/src/livecodes/languages/ripple/ripple-runtime.ts
@@ -1,6 +1,6 @@
 export const rippleRuntime = `
 import { mount } from 'ripple';
-import { App } from "./script";
+import App from "./script";
 (() => {
   mount(App, {
     target: document.querySelector("#livecodes-app") || document.body.appendChild(document.createElement('div')),
diff --git a/src/livecodes/result/result-page.ts b/src/livecodes/result/result-page.ts
index c5c6f189d4..9a13c0f140 100644
--- a/src/livecodes/result/result-page.ts
+++ b/src/livecodes/result/result-page.ts
@@ -221,7 +221,7 @@ export const createResultPage = async ({
   const shouldInsertJsxRuntime =
     Object.keys(jsxRuntimes).includes(code.script.language) &&
     !config.customSettings[code.script.language]?.disableAutoRender &&
-    (hasDefaultExport(code.script.compiled) || code.script.language === 'ripple') && // FIXME: ripple default export
+    hasDefaultExport(code.script.compiled) &&
     !hasCustomJsxRuntime(code.script.content || '', config) &&
     !importFromScript;
   const hasPreact = getImports(code.script.compiled).find((mod) => mod === 'preact');
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 570e046b59..b0207c7aee 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -389,7 +389,7 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.3/compiler');
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.5/compiler');
 
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 

From f9c3b4738121f2a3995c936cc52f4850dea80b19 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:32 +0300
Subject: [PATCH 28/71] add syntax highlighting for ripple in monaco

---
 scripts/build.js                              |    1 +
 .../monaco/languages/monaco-lang-ripple.ts    | 6856 +++++++++++++++++
 src/livecodes/editor/monaco/monaco.ts         |   50 +
 src/livecodes/languages/ripple/lang-ripple.ts |    1 -
 src/livecodes/vendors.ts                      |   10 +-
 5 files changed, 6916 insertions(+), 2 deletions(-)
 create mode 100644 src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts

diff --git a/scripts/build.js b/scripts/build.js
index 13058760d2..2b9d0550a5 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -160,6 +160,7 @@ const esmBuild = () =>
       'editor/monaco/languages/monaco-lang-astro.ts',
       'editor/monaco/languages/monaco-lang-clio.ts',
       'editor/monaco/languages/monaco-lang-imba.ts',
+      'editor/monaco/languages/monaco-lang-ripple.ts',
       // 'editor/monaco/languages/monaco-lang-sql.ts',
       'editor/monaco/languages/monaco-lang-wat.ts',
       'editor/codemirror/codemirror.ts',
diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
new file mode 100644
index 0000000000..392d2620d0
--- /dev/null
+++ b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
@@ -0,0 +1,6856 @@
+// from https://github.com/trueadm/ripple/blob/main/packages/ripple-vscode-plugin/syntaxes/ripple.tmLanguage.json
+// and https://github.com/trueadm/ripple/blob/main/packages/ripple-vscode-plugin/language-configuration.json
+export default {
+  syntax: {
+    information_for_contributors: [
+      'This file has been converted from https://github.com/microsoft/TypeScript-TmLanguage/blob/master/TypeScriptReact.tmLanguage',
+      'If you want to provide a fix or improvement, please create a pull request against the original repository.',
+      'Once accepted there, we are happy to receive an update request.',
+    ],
+    version:
+      'https://github.com/microsoft/TypeScript-TmLanguage/commit/48f608692aa6d6ad7bd65b478187906c798234a8',
+    name: 'Ripple',
+    scopeName: 'source.ripple',
+    patterns: [
+      {
+        include: '#directives',
+      },
+      {
+        include: '#statements',
+      },
+      {
+        include: '#shebang',
+      },
+    ],
+    repository: {
+      shebang: {
+        name: 'comment.line.shebang.js',
+        match: '\\A(#!).*(?=$)',
+        captures: {
+          '1': {
+            name: 'punctuation.definition.comment.js',
+          },
+        },
+      },
+      statements: {
+        patterns: [
+          {
+            include: '#declaration',
+          },
+          {
+            include: '#control-statement',
+          },
+          {
+            include: '#after-operator-block-as-object-literal',
+          },
+          {
+            include: '#decl-block',
+          },
+          {
+            include: '#label',
+          },
+          {
+            include: '#expression',
+          },
+          {
+            include: '#punctuation-semicolon',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#comment',
+          },
+        ],
+      },
+      'component-statements': {
+        patterns: [
+          {
+            include: '#jsx',
+          },
+          {
+            include: '#declaration',
+          },
+          {
+            include: '#component-control-statement',
+          },
+          {
+            include: '#component-decl-block',
+          },
+          {
+            include: '#label',
+          },
+          {
+            include: '#expression',
+          },
+          {
+            include: '#punctuation-semicolon',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#comment',
+          },
+        ],
+      },
+      declaration: {
+        patterns: [
+          {
+            include: '#decorator',
+          },
+          {
+            include: '#var-expr',
+          },
+          {
+            include: '#component-declaration',
+          },
+          {
+            include: '#fragment-declaration',
+          },
+          {
+            include: '#function-declaration',
+          },
+          {
+            include: '#class-declaration',
+          },
+          {
+            include: '#interface-declaration',
+          },
+          {
+            include: '#enum-declaration',
+          },
+          {
+            include: '#namespace-declaration',
+          },
+          {
+            include: '#type-alias-declaration',
+          },
+          {
+            include: '#import-equals-declaration',
+          },
+          {
+            include: '#import-declaration',
+          },
+          {
+            include: '#export-declaration',
+          },
+          {
+            name: 'storage.modifier.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(declare|export)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      'control-statement': {
+        patterns: [
+          {
+            include: '#switch-statement',
+          },
+          {
+            include: '#for-loop',
+          },
+          {
+            name: 'keyword.control.trycatch.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(catch|finally|throw|try)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(break|continue|goto)\\s+([_$[:alpha:]][_$[:alnum:]]*)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            captures: {
+              '1': {
+                name: 'keyword.control.loop.js',
+              },
+              '2': {
+                name: 'entity.name.label.js',
+              },
+            },
+          },
+          {
+            name: 'keyword.control.loop.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(break|continue|do|goto|while)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(return)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.control.flow.js',
+              },
+            },
+            end: '(?=[;}]|$|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'keyword.control.switch.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(case|default|switch)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            include: '#if-statement',
+          },
+          {
+            name: 'keyword.control.conditional.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(else|if)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.control.with.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(with)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.control.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(package)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.other.debugger.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(debugger)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      'component-control-statement': {
+        patterns: [
+          {
+            include: '#component-switch-statement',
+          },
+          {
+            include: '#for-loop',
+          },
+          {
+            name: 'keyword.control.trycatch.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(catch|finally|async|throw|try)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(break|continue|goto)\\s+([_$[:alpha:]][_$[:alnum:]]*)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            captures: {
+              '1': {
+                name: 'keyword.control.loop.js',
+              },
+              '2': {
+                name: 'entity.name.label.js',
+              },
+            },
+          },
+          {
+            name: 'keyword.control.loop.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(break|continue|do|goto|while)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(return)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.control.flow.js',
+              },
+            },
+            end: '(?=[;}]|$|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'keyword.control.switch.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(case|default|switch)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            include: '#component-if-statement',
+          },
+          {
+            name: 'keyword.control.conditional.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(else|if)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.control.with.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(with)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.control.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(package)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.other.debugger.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(debugger)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      label: {
+        patterns: [
+          {
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(:)(?=\\s*\\{)',
+            beginCaptures: {
+              '1': {
+                name: 'entity.name.label.js',
+              },
+              '2': {
+                name: 'punctuation.separator.label.js',
+              },
+            },
+            end: '(?<=\\})',
+            patterns: [
+              {
+                include: '#decl-block',
+              },
+            ],
+          },
+          {
+            match: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(:)',
+            captures: {
+              '1': {
+                name: 'entity.name.label.js',
+              },
+              '2': {
+                name: 'punctuation.separator.label.js',
+              },
+            },
+          },
+        ],
+      },
+      expression: {
+        patterns: [
+          {
+            include: '#expressionWithoutIdentifiers',
+          },
+          {
+            include: '#identifiers',
+          },
+          {
+            include: '#expressionPunctuations',
+          },
+        ],
+      },
+      expressionWithoutIdentifiers: {
+        patterns: [
+          {
+            include: '#string',
+          },
+          {
+            include: '#regex',
+          },
+          {
+            include: '#comment',
+          },
+          {
+            include: '#function-expression',
+          },
+          {
+            include: '#eval-expression',
+          },
+          {
+            include: '#class-expression',
+          },
+          {
+            include: '#arrow-function',
+          },
+          {
+            include: '#paren-expression-possibly-arrow',
+          },
+          {
+            include: '#cast',
+          },
+          {
+            include: '#ternary-expression',
+          },
+          {
+            include: '#new-expr',
+          },
+          {
+            include: '#instanceof-expr',
+          },
+          {
+            include: '#object-literal',
+          },
+          {
+            include: '#expression-operators',
+          },
+          {
+            include: '#function-call',
+          },
+          {
+            include: '#literal',
+          },
+          {
+            include: '#support-objects',
+          },
+          {
+            include: '#paren-expression',
+          },
+        ],
+      },
+      expressionPunctuations: {
+        patterns: [
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            include: '#punctuation-accessor',
+          },
+        ],
+      },
+      decorator: {
+        name: 'meta.decorator.js',
+        begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))\\@',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.decorator.js',
+          },
+        },
+        end: '(?=\\s)',
+        patterns: [
+          {
+            include: '#expression',
+          },
+        ],
+      },
+      'var-expr': {
+        patterns: [
+          {
+            name: 'meta.var.expr.js',
+            begin:
+              '(?=(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(var|let)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))',
+            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(var|let)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=^|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|((?<!^let|[^\\._$[:alnum:]]let|^var|[^\\._$[:alnum:]]var)(?=\\s*$)))',
+            patterns: [
+              {
+                begin:
+                  '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(var|let)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.export.js',
+                  },
+                  '2': {
+                    name: 'storage.modifier.js',
+                  },
+                  '3': {
+                    name: 'storage.type.js',
+                  },
+                },
+                end: '(?=\\S)',
+              },
+              {
+                include: '#destructuring-variable',
+              },
+              {
+                include: '#var-single-variable',
+              },
+              {
+                include: '#variable-initializer',
+              },
+              {
+                include: '#comment',
+              },
+              {
+                begin: '(,)\\s*(?=$|\\/\\/)',
+                beginCaptures: {
+                  '1': {
+                    name: 'punctuation.separator.comma.js',
+                  },
+                },
+                end: '(?<!,)(((?==|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|^\\s*$))|((?<=\\S)(?=\\s*$)))',
+                patterns: [
+                  {
+                    include: '#single-line-comment-consuming-line-ending',
+                  },
+                  {
+                    include: '#comment',
+                  },
+                  {
+                    include: '#destructuring-variable',
+                  },
+                  {
+                    include: '#var-single-variable',
+                  },
+                  {
+                    include: '#punctuation-comma',
+                  },
+                ],
+              },
+              {
+                include: '#punctuation-comma',
+              },
+            ],
+          },
+          {
+            name: 'meta.var.expr.js',
+            begin:
+              '(?=(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(const(?!\\s+enum\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'storage.type.js',
+              },
+            },
+            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(const(?!\\s+enum\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=^|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|((?<!^const|[^\\._$[:alnum:]]const)(?=\\s*$)))',
+            patterns: [
+              {
+                begin:
+                  '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(const(?!\\s+enum\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.export.js',
+                  },
+                  '2': {
+                    name: 'storage.modifier.js',
+                  },
+                  '3': {
+                    name: 'storage.type.js',
+                  },
+                },
+                end: '(?=\\S)',
+              },
+              {
+                include: '#destructuring-const',
+              },
+              {
+                include: '#var-single-const',
+              },
+              {
+                include: '#variable-initializer',
+              },
+              {
+                include: '#comment',
+              },
+              {
+                begin: '(,)\\s*(?=$|\\/\\/)',
+                beginCaptures: {
+                  '1': {
+                    name: 'punctuation.separator.comma.js',
+                  },
+                },
+                end: '(?<!,)(((?==|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|^\\s*$))|((?<=\\S)(?=\\s*$)))',
+                patterns: [
+                  {
+                    include: '#single-line-comment-consuming-line-ending',
+                  },
+                  {
+                    include: '#comment',
+                  },
+                  {
+                    include: '#destructuring-const',
+                  },
+                  {
+                    include: '#var-single-const',
+                  },
+                  {
+                    include: '#punctuation-comma',
+                  },
+                ],
+              },
+              {
+                include: '#punctuation-comma',
+              },
+            ],
+          },
+          {
+            name: 'meta.var.expr.js',
+            begin:
+              '(?=(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b((?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'storage.type.js',
+              },
+            },
+            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b((?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|((?<!^using|[^\\._$[:alnum:]]using|^await\\s+using|[^\\._$[:alnum:]]await\\s+using)(?=\\s*$)))',
+            patterns: [
+              {
+                begin:
+                  '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b((?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.export.js',
+                  },
+                  '2': {
+                    name: 'storage.modifier.js',
+                  },
+                  '3': {
+                    name: 'storage.type.js',
+                  },
+                },
+                end: '(?=\\S)',
+              },
+              {
+                include: '#var-single-const',
+              },
+              {
+                include: '#variable-initializer',
+              },
+              {
+                include: '#comment',
+              },
+              {
+                begin: '(,)\\s*((?!\\S)|(?=\\/\\/))',
+                beginCaptures: {
+                  '1': {
+                    name: 'punctuation.separator.comma.js',
+                  },
+                },
+                end: '(?<!,)(((?==|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|^\\s*$))|((?<=\\S)(?=\\s*$)))',
+                patterns: [
+                  {
+                    include: '#single-line-comment-consuming-line-ending',
+                  },
+                  {
+                    include: '#comment',
+                  },
+                  {
+                    include: '#var-single-const',
+                  },
+                  {
+                    include: '#punctuation-comma',
+                  },
+                ],
+              },
+              {
+                include: '#punctuation-comma',
+              },
+            ],
+          },
+        ],
+      },
+      'var-single-variable': {
+        patterns: [
+          {
+            name: 'meta.var-single-variable.expr.js',
+            begin:
+              '(?x)([_$[:alpha:]][_$[:alnum:]]*)(\\!)?(?=\\s*\n# function assignment |\n(=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)) |\n# typeannotation is fn type: < | () | (... | (param: | (param, | (param? | (param= | (param) =>\n(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))) |\n(:\\s*(=>|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(<[^<>]*>)|[^<>(),=])+=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            beginCaptures: {
+              '1': {
+                name: 'meta.definition.variable.js entity.name.function.js',
+              },
+              '2': {
+                name: 'keyword.operator.definiteassignment.js',
+              },
+            },
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|(;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            patterns: [
+              {
+                include: '#var-single-variable-type-annotation',
+              },
+            ],
+          },
+          {
+            name: 'meta.var-single-variable.expr.js',
+            begin: '([[:upper:]][_$[:digit:][:upper:]]*)(?![_$[:alnum:]])(\\!)?',
+            beginCaptures: {
+              '1': {
+                name: 'meta.definition.variable.js variable.other.constant.js',
+              },
+              '2': {
+                name: 'keyword.operator.definiteassignment.js',
+              },
+            },
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|(;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            patterns: [
+              {
+                include: '#var-single-variable-type-annotation',
+              },
+            ],
+          },
+          {
+            name: 'meta.var-single-variable.expr.js',
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)(\\!)?',
+            beginCaptures: {
+              '1': {
+                name: 'meta.definition.variable.js variable.other.readwrite.js',
+              },
+              '2': {
+                name: 'keyword.operator.definiteassignment.js',
+              },
+            },
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|(;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            patterns: [
+              {
+                include: '#var-single-variable-type-annotation',
+              },
+            ],
+          },
+        ],
+      },
+      'var-single-const': {
+        patterns: [
+          {
+            name: 'meta.var-single-variable.expr.js',
+            begin:
+              '(?x)([_$[:alpha:]][_$[:alnum:]]*)(?=\\s*\n# function assignment |\n(=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)) |\n# typeannotation is fn type: < | () | (... | (param: | (param, | (param? | (param= | (param) =>\n(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))) |\n(:\\s*(=>|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(<[^<>]*>)|[^<>(),=])+=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            beginCaptures: {
+              '1': {
+                name: 'meta.definition.variable.js variable.other.constant.js entity.name.function.js',
+              },
+            },
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|(;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            patterns: [
+              {
+                include: '#var-single-variable-type-annotation',
+              },
+            ],
+          },
+          {
+            name: 'meta.var-single-variable.expr.js',
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)',
+            beginCaptures: {
+              '1': {
+                name: 'meta.definition.variable.js variable.other.constant.js',
+              },
+            },
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|(;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            patterns: [
+              {
+                include: '#var-single-variable-type-annotation',
+              },
+            ],
+          },
+        ],
+      },
+      'var-single-variable-type-annotation': {
+        patterns: [
+          {
+            include: '#type-annotation',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#comment',
+          },
+        ],
+      },
+      'destructuring-variable': {
+        patterns: [
+          {
+            name: 'meta.object-binding-pattern-variable.js',
+            begin: '(?<!=|:|^of|[^\\._$[:alnum:]]of|^in|[^\\._$[:alnum:]]in)\\s*(?=\\{)',
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))',
+            patterns: [
+              {
+                include: '#object-binding-pattern',
+              },
+              {
+                include: '#type-annotation',
+              },
+              {
+                include: '#comment',
+              },
+            ],
+          },
+          {
+            name: 'meta.array-binding-pattern-variable.js',
+            begin: '(?<!=|:|^of|[^\\._$[:alnum:]]of|^in|[^\\._$[:alnum:]]in)\\s*(?=\\[)',
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))',
+            patterns: [
+              {
+                include: '#array-binding-pattern',
+              },
+              {
+                include: '#type-annotation',
+              },
+              {
+                include: '#comment',
+              },
+            ],
+          },
+        ],
+      },
+      'destructuring-const': {
+        patterns: [
+          {
+            name: 'meta.object-binding-pattern-variable.js',
+            begin: '(?<!=|:|^of|[^\\._$[:alnum:]]of|^in|[^\\._$[:alnum:]]in)\\s*(?=\\{)',
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))',
+            patterns: [
+              {
+                include: '#object-binding-pattern-const',
+              },
+              {
+                include: '#type-annotation',
+              },
+              {
+                include: '#comment',
+              },
+            ],
+          },
+          {
+            name: 'meta.array-binding-pattern-variable.js',
+            begin: '(?<!=|:|^of|[^\\._$[:alnum:]]of|^in|[^\\._$[:alnum:]]in)\\s*(?=\\[)',
+            end: '(?=$|^|[;,=}]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))',
+            patterns: [
+              {
+                include: '#array-binding-pattern-const',
+              },
+              {
+                include: '#type-annotation',
+              },
+              {
+                include: '#comment',
+              },
+            ],
+          },
+        ],
+      },
+      'object-binding-element': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin:
+              '(?x)(?=((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(:))',
+            end: '(?=,|\\})',
+            patterns: [
+              {
+                include: '#object-binding-element-propertyName',
+              },
+              {
+                include: '#binding-element',
+              },
+            ],
+          },
+          {
+            include: '#object-binding-pattern',
+          },
+          {
+            include: '#destructuring-variable-rest',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'object-binding-element-const': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin:
+              '(?x)(?=((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(:))',
+            end: '(?=,|\\})',
+            patterns: [
+              {
+                include: '#object-binding-element-propertyName',
+              },
+              {
+                include: '#binding-element-const',
+              },
+            ],
+          },
+          {
+            include: '#object-binding-pattern-const',
+          },
+          {
+            include: '#destructuring-variable-rest-const',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'object-binding-element-propertyName': {
+        begin:
+          '(?x)(?=((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(:))',
+        end: '(:)',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.destructuring.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#string',
+          },
+          {
+            include: '#array-literal',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            name: 'variable.object.property.js',
+            match: '([_$[:alpha:]][_$[:alnum:]]*)',
+          },
+        ],
+      },
+      'binding-element': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#regex',
+          },
+          {
+            include: '#object-binding-pattern',
+          },
+          {
+            include: '#array-binding-pattern',
+          },
+          {
+            include: '#destructuring-variable-rest',
+          },
+          {
+            include: '#variable-initializer',
+          },
+        ],
+      },
+      'binding-element-const': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#regex',
+          },
+          {
+            include: '#object-binding-pattern-const',
+          },
+          {
+            include: '#array-binding-pattern-const',
+          },
+          {
+            include: '#destructuring-variable-rest-const',
+          },
+          {
+            include: '#variable-initializer',
+          },
+        ],
+      },
+      'destructuring-variable-rest': {
+        match: '(?:(\\.\\.\\.)\\s*)?([_$[:alpha:]][_$[:alnum:]]*)',
+        captures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'meta.definition.variable.js variable.other.readwrite.js',
+          },
+        },
+      },
+      'destructuring-variable-rest-const': {
+        match: '(?:(\\.\\.\\.)\\s*)?([_$[:alpha:]][_$[:alnum:]]*)',
+        captures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'meta.definition.variable.js variable.other.constant.js',
+          },
+        },
+      },
+      'object-binding-pattern': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#object-binding-element',
+          },
+        ],
+      },
+      'object-binding-pattern-const': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#object-binding-element-const',
+          },
+        ],
+      },
+      'array-binding-pattern': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\[)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        end: '\\]',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#binding-element',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'array-binding-pattern-const': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\[)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        end: '\\]',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#binding-element-const',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'parameter-name': {
+        patterns: [
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|protected|private|readonly)\\s+(?=(override|public|protected|private|readonly)\\s+)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*(\\??)(?=\\s*\n# function assignment |\n(=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)) |\n# typeannotation is fn type: < | () | (... | (param: | (param, | (param? | (param= | (param) =>\n(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))) |\n(:\\s*(=>|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(<[^<>]*>)|[^<>(),=])+=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'entity.name.function.js variable.language.this.js',
+              },
+              '4': {
+                name: 'entity.name.function.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*(\\??)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'variable.parameter.js variable.language.this.js',
+              },
+              '4': {
+                name: 'variable.parameter.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+        ],
+      },
+      'destructuring-parameter': {
+        patterns: [
+          {
+            name: 'meta.parameter.object-binding-pattern.js',
+            begin: '(?<!=|:)\\s*(?:(\\.\\.\\.)\\s*)?(\\{)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.rest.js',
+              },
+              '2': {
+                name: 'punctuation.definition.binding-pattern.object.js',
+              },
+            },
+            end: '\\}',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.binding-pattern.object.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#parameter-object-binding-element',
+              },
+            ],
+          },
+          {
+            name: 'meta.paramter.array-binding-pattern.js',
+            begin: '(?<!=|:)\\s*(?:(\\.\\.\\.)\\s*)?(\\[)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.rest.js',
+              },
+              '2': {
+                name: 'punctuation.definition.binding-pattern.array.js',
+              },
+            },
+            end: '\\]',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.binding-pattern.array.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#parameter-binding-element',
+              },
+              {
+                include: '#punctuation-comma',
+              },
+            ],
+          },
+        ],
+      },
+      'parameter-object-binding-element': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin:
+              '(?x)(?=((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(:))',
+            end: '(?=,|\\})',
+            patterns: [
+              {
+                include: '#object-binding-element-propertyName',
+              },
+              {
+                include: '#parameter-binding-element',
+              },
+              {
+                include: '#paren-expression',
+              },
+            ],
+          },
+          {
+            include: '#parameter-object-binding-pattern',
+          },
+          {
+            include: '#destructuring-parameter-rest',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'parameter-binding-element': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#regex',
+          },
+          {
+            include: '#parameter-object-binding-pattern',
+          },
+          {
+            include: '#parameter-array-binding-pattern',
+          },
+          {
+            include: '#destructuring-parameter-rest',
+          },
+          {
+            include: '#variable-initializer',
+          },
+        ],
+      },
+      'destructuring-parameter-rest': {
+        match: '(?:(\\.\\.\\.)\\s*)?([_$[:alpha:]][_$[:alnum:]]*)',
+        captures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'variable.parameter.js',
+          },
+        },
+      },
+      'parameter-object-binding-pattern': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.object.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#parameter-object-binding-element',
+          },
+        ],
+      },
+      'parameter-array-binding-pattern': {
+        begin: '(?:(\\.\\.\\.)\\s*)?(\\[)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.rest.js',
+          },
+          '2': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        end: '\\]',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.binding-pattern.array.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#parameter-binding-element',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'field-declaration': {
+        name: 'meta.field.declaration.js',
+        begin:
+          '(?x)(?<!\\()(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(readonly)\\s+)?(?=\\s*((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|(\\#?[_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(?:(?:(\\?)|(\\!))\\s*)?(=|:|;|,|\\}|$))',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.js',
+          },
+        },
+        end: '(?x)(?=\\}|;|,|$|(^(?!\\s*((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|(\\#?[_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(?:(?:(\\?)|(\\!))\\s*)?(=|:|;|,|$))))|(?<=\\})',
+        patterns: [
+          {
+            include: '#variable-initializer',
+          },
+          {
+            include: '#type-annotation',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#array-literal',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#comment',
+          },
+          {
+            match:
+              '(?x)(\\#?[_$[:alpha:]][_$[:alnum:]]*)(?:(\\?)|(\\!))?(?=\\s*\\s*\n# function assignment |\n(=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)) |\n# typeannotation is fn type: < | () | (... | (param: | (param, | (param? | (param= | (param) =>\n(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))) |\n(:\\s*(=>|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(<[^<>]*>)|[^<>(),=])+=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            captures: {
+              '1': {
+                name: 'meta.definition.property.js entity.name.function.js',
+              },
+              '2': {
+                name: 'keyword.operator.optional.js',
+              },
+              '3': {
+                name: 'keyword.operator.definiteassignment.js',
+              },
+            },
+          },
+          {
+            name: 'meta.definition.property.js variable.object.property.js',
+            match: '\\#?[_$[:alpha:]][_$[:alnum:]]*',
+          },
+          {
+            name: 'keyword.operator.optional.js',
+            match: '\\?',
+          },
+          {
+            name: 'keyword.operator.definiteassignment.js',
+            match: '\\!',
+          },
+        ],
+      },
+      'variable-initializer': {
+        patterns: [
+          {
+            begin: '(?<!=|!)(=)(?!=)(?=\\s*\\S)(?!\\s*.*=>\\s*$)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.assignment.js',
+              },
+            },
+            end: '(?=$|^|[,);}\\]]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            begin: '(?<!=|!)(=)(?!=)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.assignment.js',
+              },
+            },
+            end: '(?=[,);}\\]]|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+))|(?=^\\s*$)|(?<![\\|\\&\\+\\-\\*\\/])(?<=\\S)(?<!=)(?=\\s*$)',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+        ],
+      },
+      'component-declaration': {
+        name: 'meta.function.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdefault)\\s+)?(?:(\\bdeclare)\\s+)?(component\\b)(?:\\s*(\\*))?(?:(?:\\s+|(?<=\\*))([_$[:alpha:]][_$[:alnum:]]*))?\\s*',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'keyword.control.default.js',
+          },
+          '3': {
+            name: 'storage.modifier.js',
+          },
+          '4': {
+            name: 'storage.type.function.js',
+          },
+          '5': {
+            name: 'keyword.generator.asterisk.js',
+          },
+          '6': {
+            name: 'meta.definition.function.js entity.name.function.js',
+          },
+        },
+        end: '(?=;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|(?<=\\})',
+        patterns: [
+          {
+            include: '#function-name',
+          },
+          {
+            include: '#component-body',
+          },
+        ],
+      },
+      'fragment-declaration': {
+        name: 'meta.function.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdefault)\\s+)?(?:(\\bdeclare)\\s+)?(fragment\\b)(?:\\s*(\\*))?(?:(?:\\s+|(?<=\\*))([_$[:alpha:]][_$[:alnum:]]*))?\\s*',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'keyword.control.default.js',
+          },
+          '3': {
+            name: 'storage.modifier.js',
+          },
+          '4': {
+            name: 'storage.type.function.js',
+          },
+          '5': {
+            name: 'keyword.generator.asterisk.js',
+          },
+          '6': {
+            name: 'meta.definition.function.js entity.name.function.js',
+          },
+        },
+        end: '(?=;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|(?<=\\})',
+        patterns: [
+          {
+            include: '#function-name',
+          },
+          {
+            include: '#component-body',
+          },
+        ],
+      },
+      'function-declaration': {
+        name: 'meta.function.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?(?:(async)\\s+)?(function\\b)(?:\\s*(\\*))?(?:(?:\\s+|(?<=\\*))([_$[:alpha:]][_$[:alnum:]]*))?\\s*',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.modifier.async.js',
+          },
+          '4': {
+            name: 'storage.type.function.js',
+          },
+          '5': {
+            name: 'keyword.generator.asterisk.js',
+          },
+          '6': {
+            name: 'meta.definition.function.js entity.name.function.js',
+          },
+        },
+        end: '(?=;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|(?<=\\})',
+        patterns: [
+          {
+            include: '#function-name',
+          },
+          {
+            include: '#function-body',
+          },
+        ],
+      },
+      'function-expression': {
+        name: 'meta.function.expression.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(async)\\s+)?(function\\b)(?:\\s*(\\*))?(?:(?:\\s+|(?<=\\*))([_$[:alpha:]][_$[:alnum:]]*))?\\s*',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.async.js',
+          },
+          '2': {
+            name: 'storage.type.function.js',
+          },
+          '3': {
+            name: 'keyword.generator.asterisk.js',
+          },
+          '4': {
+            name: 'meta.definition.function.js entity.name.function.js',
+          },
+        },
+        end: '(?=;)|(?<=\\})',
+        patterns: [
+          {
+            include: '#function-name',
+          },
+          {
+            include: '#single-line-comment-consuming-line-ending',
+          },
+          {
+            include: '#function-body',
+          },
+        ],
+      },
+      'function-name': {
+        name: 'meta.definition.function.js entity.name.function.js',
+        match: '[_$[:alpha:]][_$[:alnum:]]*',
+      },
+      'function-body': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#function-parameters',
+          },
+          {
+            include: '#return-type',
+          },
+          {
+            include: '#type-function-return-type',
+          },
+          {
+            include: '#decl-block',
+          },
+          {
+            name: 'keyword.generator.asterisk.js',
+            match: '\\*',
+          },
+        ],
+      },
+      'component-body': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#function-parameters',
+          },
+          {
+            include: '#return-type',
+          },
+          {
+            include: '#type-function-return-type',
+          },
+          {
+            include: '#component-decl-block',
+          },
+          {
+            name: 'keyword.generator.asterisk.js',
+            match: '\\*',
+          },
+        ],
+      },
+      'method-declaration': {
+        patterns: [
+          {
+            name: 'meta.method.declaration.js',
+            begin:
+              '(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(override)\\s+)?(?:\\b(public|private|protected)\\s+)?(?:\\b(abstract)\\s+)?(?:\\b(async)\\s+)?\\s*\\b(constructor)\\b(?!:)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'storage.modifier.js',
+              },
+              '4': {
+                name: 'storage.modifier.async.js',
+              },
+              '5': {
+                name: 'storage.type.js',
+              },
+            },
+            end: '(?=\\}|;|,|$)|(?<=\\})',
+            patterns: [
+              {
+                include: '#method-declaration-name',
+              },
+              {
+                include: '#function-body',
+              },
+            ],
+          },
+          {
+            name: 'meta.method.declaration.js',
+            begin:
+              '(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(override)\\s+)?(?:\\b(public|private|protected)\\s+)?(?:\\b(abstract)\\s+)?(?:\\b(async)\\s+)?(?:(?:\\s*\\b(new)\\b(?!:)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))|(?:(\\*)\\s*)?)(?=\\s*((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?[\\(])',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'storage.modifier.js',
+              },
+              '4': {
+                name: 'storage.modifier.async.js',
+              },
+              '5': {
+                name: 'keyword.operator.new.js',
+              },
+              '6': {
+                name: 'keyword.generator.asterisk.js',
+              },
+            },
+            end: '(?=\\}|;|,|$)|(?<=\\})',
+            patterns: [
+              {
+                include: '#method-declaration-name',
+              },
+              {
+                include: '#function-body',
+              },
+            ],
+          },
+          {
+            name: 'meta.method.declaration.js',
+            begin:
+              '(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(override)\\s+)?(?:\\b(public|private|protected)\\s+)?(?:\\b(abstract)\\s+)?(?:\\b(async)\\s+)?(?:\\b(get|set)\\s+)?(?:(\\*)\\s*)?(?=\\s*(((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(\\??))\\s*((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?[\\(])',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'storage.modifier.js',
+              },
+              '4': {
+                name: 'storage.modifier.async.js',
+              },
+              '5': {
+                name: 'storage.type.property.js',
+              },
+              '6': {
+                name: 'keyword.generator.asterisk.js',
+              },
+            },
+            end: '(?=\\}|;|,|$)|(?<=\\})',
+            patterns: [
+              {
+                include: '#method-declaration-name',
+              },
+              {
+                include: '#function-body',
+              },
+            ],
+          },
+        ],
+      },
+      'object-literal-method-declaration': {
+        name: 'meta.method.declaration.js',
+        begin:
+          '(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(async)\\s+)?(?:\\b(get|set)\\s+)?(?:(\\*)\\s*)?(?=\\s*(((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(\\??))\\s*((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?[\\(])',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.async.js',
+          },
+          '2': {
+            name: 'storage.type.property.js',
+          },
+          '3': {
+            name: 'keyword.generator.asterisk.js',
+          },
+        },
+        end: '(?=\\}|;|,)|(?<=\\})',
+        patterns: [
+          {
+            include: '#method-declaration-name',
+          },
+          {
+            include: '#function-body',
+          },
+          {
+            begin:
+              '(?x)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(async)\\s+)?(?:\\b(get|set)\\s+)?(?:(\\*)\\s*)?(?=\\s*(((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(\\??))\\s*((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?[\\(])',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.async.js',
+              },
+              '2': {
+                name: 'storage.type.property.js',
+              },
+              '3': {
+                name: 'keyword.generator.asterisk.js',
+              },
+            },
+            end: '(?=\\(|\\<)',
+            patterns: [
+              {
+                include: '#method-declaration-name',
+              },
+            ],
+          },
+        ],
+      },
+      'method-declaration-name': {
+        begin:
+          '(?x)(?=((\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$))|([_$[:alpha:]][_$[:alnum:]]*)|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\]))\\s*(\\??)\\s*[\\(\\<])',
+        end: '(?=\\(|\\<)',
+        patterns: [
+          {
+            include: '#string',
+          },
+          {
+            include: '#array-literal',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            name: 'meta.definition.method.js entity.name.function.js',
+            match: '[_$[:alpha:]][_$[:alnum:]]*',
+          },
+          {
+            name: 'keyword.operator.optional.js',
+            match: '\\?',
+          },
+        ],
+      },
+      'arrow-function': {
+        patterns: [
+          {
+            name: 'meta.arrow.js',
+            match:
+              '(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(\\basync)\\s+)?([_$[:alpha:]][_$[:alnum:]]*)\\s*(?==>)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.async.js',
+              },
+              '2': {
+                name: 'variable.parameter.js',
+              },
+            },
+          },
+          {
+            name: 'meta.arrow.js',
+            begin:
+              '(?x) (?:\n  (?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(\\basync)\n)? ((?<![})!\\]])\\s*\n  (?=\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  )\n)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.async.js',
+              },
+            },
+            end: '(?==>|\\{|(^\\s*(export|function|class|interface|let|var|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|const|import|enum|namespace|module|type|abstract|declare)\\s+))',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#type-parameters',
+              },
+              {
+                include: '#function-parameters',
+              },
+              {
+                include: '#arrow-return-type',
+              },
+              {
+                include: '#possibly-arrow-return-type',
+              },
+            ],
+          },
+          {
+            name: 'meta.arrow.js',
+            begin: '=>',
+            beginCaptures: {
+              '0': {
+                name: 'storage.type.function.arrow.js',
+              },
+            },
+            end: '((?<=\\}|\\S)(?<!=>)|((?!\\{)(?=\\S)))(?!\\/[\\/\\*])',
+            patterns: [
+              {
+                include: '#single-line-comment-consuming-line-ending',
+              },
+              {
+                include: '#decl-block',
+              },
+              {
+                include: '#expression',
+              },
+            ],
+          },
+        ],
+      },
+      'indexer-declaration': {
+        name: 'meta.indexer.declaration.js',
+        begin:
+          '(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(readonly)\\s*)?\\s*(\\[)\\s*([_$[:alpha:]][_$[:alnum:]]*)\\s*(?=:)',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.js',
+          },
+          '2': {
+            name: 'meta.brace.square.js',
+          },
+          '3': {
+            name: 'variable.parameter.js',
+          },
+        },
+        end: '(\\])\\s*(\\?\\s*)?|$',
+        endCaptures: {
+          '1': {
+            name: 'meta.brace.square.js',
+          },
+          '2': {
+            name: 'keyword.operator.optional.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#type-annotation',
+          },
+        ],
+      },
+      'indexer-mapped-type-declaration': {
+        name: 'meta.indexer.mappedtype.declaration.js',
+        begin:
+          '(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))([+-])?(readonly)\\s*)?\\s*(\\[)\\s*([_$[:alpha:]][_$[:alnum:]]*)\\s+(in)\\s+',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.type.modifier.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'meta.brace.square.js',
+          },
+          '4': {
+            name: 'entity.name.type.js',
+          },
+          '5': {
+            name: 'keyword.operator.expression.in.js',
+          },
+        },
+        end: '(\\])([+-])?\\s*(\\?\\s*)?|$',
+        endCaptures: {
+          '1': {
+            name: 'meta.brace.square.js',
+          },
+          '2': {
+            name: 'keyword.operator.type.modifier.js',
+          },
+          '3': {
+            name: 'keyword.operator.optional.js',
+          },
+        },
+        patterns: [
+          {
+            match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as)\\s+',
+            captures: {
+              '1': {
+                name: 'keyword.control.as.js',
+              },
+            },
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'function-parameters': {
+        name: 'meta.parameters.js',
+        begin: '\\(',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.parameters.begin.js',
+          },
+        },
+        end: '\\)',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.parameters.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#function-parameters-body',
+          },
+        ],
+      },
+      'function-parameters-body': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#decorator',
+          },
+          {
+            include: '#destructuring-parameter',
+          },
+          {
+            include: '#parameter-name',
+          },
+          {
+            include: '#parameter-type-annotation',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            name: 'punctuation.separator.parameter.js',
+            match: ',',
+          },
+        ],
+      },
+      'class-declaration': {
+        name: 'meta.class.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(?:(abstract)\\s+)?\\b(class)\\b(?=\\s+|/[/*])',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.modifier.js',
+          },
+          '4': {
+            name: 'storage.type.class.js',
+          },
+        },
+        end: '(?<=\\})',
+        patterns: [
+          {
+            include: '#class-declaration-or-expression-patterns',
+          },
+        ],
+      },
+      'class-expression': {
+        name: 'meta.class.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(abstract)\\s+)?(class)\\b(?=\\s+|[<{]|\\/[\\/*])',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.js',
+          },
+          '2': {
+            name: 'storage.type.class.js',
+          },
+        },
+        end: '(?<=\\})',
+        patterns: [
+          {
+            include: '#class-declaration-or-expression-patterns',
+          },
+        ],
+      },
+      'eval-expression': {
+        name: 'meta.eval.expression.js',
+        begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(eval)\\s*(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.eval.js',
+          },
+          '2': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        contentName: 'string.unquoted.eval-content.js',
+      },
+      'class-declaration-or-expression-patterns': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#class-or-interface-heritage',
+          },
+          {
+            match: '[_$[:alpha:]][_$[:alnum:]]*',
+            captures: {
+              '0': {
+                name: 'entity.name.type.class.js',
+              },
+            },
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#class-or-interface-body',
+          },
+        ],
+      },
+      'interface-declaration': {
+        name: 'meta.interface.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(?:(abstract)\\s+)?\\b(interface)\\b(?=\\s+|/[/*])',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.modifier.js',
+          },
+          '4': {
+            name: 'storage.type.interface.js',
+          },
+        },
+        end: '(?<=\\})',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#class-or-interface-heritage',
+          },
+          {
+            match: '[_$[:alpha:]][_$[:alnum:]]*',
+            captures: {
+              '0': {
+                name: 'entity.name.type.interface.js',
+              },
+            },
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#class-or-interface-body',
+          },
+        ],
+      },
+      'class-or-interface-heritage': {
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:\\b(extends|implements)\\b)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+        beginCaptures: {
+          '1': {
+            name: 'storage.modifier.js',
+          },
+        },
+        end: '(?=\\{)',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#class-or-interface-heritage',
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#expressionWithoutIdentifiers',
+          },
+          {
+            match:
+              '([_$[:alpha:]][_$[:alnum:]]*)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))(?=\\s*[_$[:alpha:]][_$[:alnum:]]*(\\s*\\??\\.\\s*[_$[:alpha:]][_$[:alnum:]]*)*\\s*)',
+            captures: {
+              '1': {
+                name: 'entity.name.type.module.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.optional.js',
+              },
+            },
+          },
+          {
+            match: '([_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'entity.other.inherited-class.js',
+              },
+            },
+          },
+          {
+            include: '#expressionPunctuations',
+          },
+        ],
+      },
+      'class-or-interface-body': {
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#decorator',
+          },
+          {
+            begin: '(?<=:)\\s*',
+            end: '(?=\\s|[;),}\\]:\\-\\+]|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            include: '#method-declaration',
+          },
+          {
+            include: '#indexer-declaration',
+          },
+          {
+            include: '#field-declaration',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#type-annotation',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            include: '#access-modifier',
+          },
+          {
+            include: '#property-accessor',
+          },
+          {
+            include: '#async-modifier',
+          },
+          {
+            include: '#after-operator-block-as-object-literal',
+          },
+          {
+            include: '#decl-block',
+          },
+          {
+            include: '#expression',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            include: '#punctuation-semicolon',
+          },
+        ],
+      },
+      'access-modifier': {
+        name: 'storage.modifier.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(abstract|declare|override|public|protected|private|readonly|static)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'property-accessor': {
+        name: 'storage.type.property.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(accessor|get|set)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'async-modifier': {
+        name: 'storage.modifier.async.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(async)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'enum-declaration': {
+        name: 'meta.enum.declaration.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?(?:\\b(const)\\s+)?\\b(enum)\\s+([_$[:alpha:]][_$[:alnum:]]*)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.modifier.js',
+          },
+          '4': {
+            name: 'storage.type.enum.js',
+          },
+          '5': {
+            name: 'entity.name.type.enum.js',
+          },
+        },
+        end: '(?<=\\})',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin: '\\{',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.block.js',
+              },
+            },
+            end: '\\}',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.block.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                begin: '([_$[:alpha:]][_$[:alnum:]]*)',
+                beginCaptures: {
+                  '0': {
+                    name: 'variable.other.enummember.js',
+                  },
+                },
+                end: '(?=,|\\}|$)',
+                patterns: [
+                  {
+                    include: '#comment',
+                  },
+                  {
+                    include: '#variable-initializer',
+                  },
+                ],
+              },
+              {
+                begin:
+                  '(?=((\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])+\\])))',
+                end: '(?=,|\\}|$)',
+                patterns: [
+                  {
+                    include: '#string',
+                  },
+                  {
+                    include: '#array-literal',
+                  },
+                  {
+                    include: '#comment',
+                  },
+                  {
+                    include: '#variable-initializer',
+                  },
+                ],
+              },
+              {
+                include: '#punctuation-comma',
+              },
+            ],
+          },
+        ],
+      },
+      'namespace-declaration': {
+        name: 'meta.namespace.declaration.js',
+        begin:
+          '(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(namespace|module)\\s+(?=[_$[:alpha:]"\'`]))',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.type.namespace.js',
+          },
+        },
+        end: '(?<=\\})|(?=;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            name: 'entity.name.type.module.js',
+            match: '([_$[:alpha:]][_$[:alnum:]]*)',
+          },
+          {
+            include: '#punctuation-accessor',
+          },
+          {
+            include: '#decl-block',
+          },
+        ],
+      },
+      'type-alias-declaration': {
+        name: 'meta.type.declaration.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(type)\\b\\s+([_$[:alpha:]][_$[:alnum:]]*)\\s*',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'storage.type.type.js',
+          },
+          '4': {
+            name: 'entity.name.type.alias.js',
+          },
+        },
+        end: '(?=\\}|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            begin: '(=)\\s*(intrinsic)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.assignment.js',
+              },
+              '2': {
+                name: 'keyword.control.intrinsic.js',
+              },
+            },
+            end: '(?=\\}|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+          {
+            begin: '(=)\\s*',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.assignment.js',
+              },
+            },
+            end: '(?=\\}|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+        ],
+      },
+      'import-equals-declaration': {
+        patterns: [
+          {
+            name: 'meta.import-equals.external.js',
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(import)(?:\\s+(type))?\\s+([_$[:alpha:]][_$[:alnum:]]*)\\s*(=)\\s*(require)\\s*(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'keyword.control.import.js',
+              },
+              '4': {
+                name: 'keyword.control.type.js',
+              },
+              '5': {
+                name: 'variable.other.readwrite.alias.js',
+              },
+              '6': {
+                name: 'keyword.operator.assignment.js',
+              },
+              '7': {
+                name: 'keyword.control.require.js',
+              },
+              '8': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#string',
+              },
+            ],
+          },
+          {
+            name: 'meta.import-equals.internal.js',
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(import)(?:\\s+(type))?\\s+([_$[:alpha:]][_$[:alnum:]]*)\\s*(=)\\s*(?!require\\b)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+              '3': {
+                name: 'keyword.control.import.js',
+              },
+              '4': {
+                name: 'keyword.control.type.js',
+              },
+              '5': {
+                name: 'variable.other.readwrite.alias.js',
+              },
+              '6': {
+                name: 'keyword.operator.assignment.js',
+              },
+            },
+            end: '(?=;|$|^)',
+            patterns: [
+              {
+                include: '#single-line-comment-consuming-line-ending',
+              },
+              {
+                include: '#comment',
+              },
+              {
+                match: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))',
+                captures: {
+                  '1': {
+                    name: 'entity.name.type.module.js',
+                  },
+                  '2': {
+                    name: 'punctuation.accessor.js',
+                  },
+                  '3': {
+                    name: 'punctuation.accessor.optional.js',
+                  },
+                },
+              },
+              {
+                name: 'variable.other.readwrite.js',
+                match: '([_$[:alpha:]][_$[:alnum:]]*)',
+              },
+            ],
+          },
+        ],
+      },
+      'import-declaration': {
+        name: 'meta.import.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(import)(?:\\s+(type)(?!\\s+from))?(?!\\s*[:\\(])(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.export.js',
+          },
+          '2': {
+            name: 'storage.modifier.js',
+          },
+          '3': {
+            name: 'keyword.control.import.js',
+          },
+          '4': {
+            name: 'keyword.control.type.js',
+          },
+        },
+        end: '(?<!^import|[^\\._$[:alnum:]]import)(?=;|$|^)',
+        patterns: [
+          {
+            include: '#single-line-comment-consuming-line-ending',
+          },
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            begin: '(?<=^import|[^\\._$[:alnum:]]import)(?!\\s*["\'])',
+            end: '\\bfrom\\b',
+            endCaptures: {
+              '0': {
+                name: 'keyword.control.from.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#import-export-declaration',
+              },
+            ],
+          },
+          {
+            include: '#import-export-declaration',
+          },
+        ],
+      },
+      'export-declaration': {
+        patterns: [
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(export)\\s+(as)\\s+(namespace)\\s+([_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'keyword.control.as.js',
+              },
+              '3': {
+                name: 'storage.type.namespace.js',
+              },
+              '4': {
+                name: 'entity.name.type.module.js',
+              },
+            },
+          },
+          {
+            name: 'meta.export.default.js',
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(export)(?:\\s+(type))?(?:(?:\\s*(=))|(?:\\s+(default)(?=\\s+)))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'keyword.control.type.js',
+              },
+              '3': {
+                name: 'keyword.operator.assignment.js',
+              },
+              '4': {
+                name: 'keyword.control.default.js',
+              },
+            },
+            end: '(?=$|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#interface-declaration',
+              },
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'meta.export.js',
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(export)(?:\\s+(type))?\\b(?!(\\$)|(\\s*:))((?=\\s*[\\{*])|((?=\\s*[_$[:alpha:]][_$[:alnum:]]*(\\s|,))(?!\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b)))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.export.js',
+              },
+              '2': {
+                name: 'keyword.control.type.js',
+              },
+            },
+            end: '(?=$|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+            patterns: [
+              {
+                include: '#import-export-declaration',
+              },
+            ],
+          },
+        ],
+      },
+      'import-export-declaration': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#import-export-block',
+          },
+          {
+            name: 'keyword.control.from.js',
+            match: '\\bfrom\\b',
+          },
+          {
+            include: '#import-export-assert-clause',
+          },
+          {
+            include: '#import-export-clause',
+          },
+        ],
+      },
+      'import-export-assert-clause': {
+        begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(with)|(assert))\\s*(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.with.js',
+          },
+          '2': {
+            name: 'keyword.control.assert.js',
+          },
+          '3': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            name: 'meta.object-literal.key.js',
+            match:
+              '(?:[_$[:alpha:]][_$[:alnum:]]*)\\s*(?=(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*:)',
+          },
+          {
+            name: 'punctuation.separator.key-value.js',
+            match: ':',
+          },
+        ],
+      },
+      'import-export-block': {
+        name: 'meta.block.js',
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#import-export-clause',
+          },
+        ],
+      },
+      'import-export-clause': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(?:(\\btype)\\s+)?(?:(\\bdefault)|(\\*)|(\\b[_$[:alpha:]][_$[:alnum:]]*)|((\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))))\\s+(as)\\s+(?:(default(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))|([_$[:alpha:]][_$[:alnum:]]*)|((\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)))',
+            captures: {
+              '1': {
+                name: 'keyword.control.type.js',
+              },
+              '2': {
+                name: 'keyword.control.default.js',
+              },
+              '3': {
+                name: 'constant.language.import-export-all.js',
+              },
+              '4': {
+                name: 'variable.other.readwrite.js',
+              },
+              '5': {
+                name: 'string.quoted.alias.js',
+              },
+              '12': {
+                name: 'keyword.control.as.js',
+              },
+              '13': {
+                name: 'keyword.control.default.js',
+              },
+              '14': {
+                name: 'variable.other.readwrite.alias.js',
+              },
+              '15': {
+                name: 'string.quoted.alias.js',
+              },
+            },
+          },
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            name: 'constant.language.import-export-all.js',
+            match: '\\*',
+          },
+          {
+            name: 'keyword.control.default.js',
+            match: '\\b(default)\\b',
+          },
+          {
+            match:
+              '(?:(\\btype)\\s+)?(?:([_$[:alpha:]][_$[:alnum:]]*)|((\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)))',
+            captures: {
+              '1': {
+                name: 'keyword.control.type.js',
+              },
+              '2': {
+                name: 'variable.other.readwrite.alias.js',
+              },
+              '3': {
+                name: 'string.quoted.alias.js',
+              },
+            },
+          },
+        ],
+      },
+      'switch-statement': {
+        name: 'switch-statement.expr.js',
+        begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?=\\bswitch\\s*\\()',
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            name: 'switch-expression.expr.js',
+            begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(switch)\\s*(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.switch.js',
+              },
+              '2': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'switch-block.expr.js',
+            begin: '\\{',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.block.js',
+              },
+            },
+            end: '(?=\\})',
+            patterns: [
+              {
+                name: 'case-clause.expr.js',
+                begin:
+                  '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(case|default(?=:))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.switch.js',
+                  },
+                },
+                end: '(?=:)',
+                patterns: [
+                  {
+                    include: '#expression',
+                  },
+                ],
+              },
+              {
+                begin: '(:)\\s*(\\{)',
+                beginCaptures: {
+                  '1': {
+                    name: 'case-clause.expr.js punctuation.definition.section.case-statement.js',
+                  },
+                  '2': {
+                    name: 'meta.block.js punctuation.definition.block.js',
+                  },
+                },
+                end: '\\}',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.block.js punctuation.definition.block.js',
+                  },
+                },
+                contentName: 'meta.block.js',
+                patterns: [
+                  {
+                    include: '#statements',
+                  },
+                ],
+              },
+              {
+                match: '(:)',
+                captures: {
+                  '0': {
+                    name: 'case-clause.expr.js punctuation.definition.section.case-statement.js',
+                  },
+                },
+              },
+              {
+                include: '#statements',
+              },
+            ],
+          },
+        ],
+      },
+      'component-switch-statement': {
+        name: 'switch-statement.expr.js',
+        begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?=\\bswitch\\s*\\()',
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            name: 'switch-expression.expr.js',
+            begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(switch)\\s*(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.switch.js',
+              },
+              '2': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'switch-block.expr.js',
+            begin: '\\{',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.block.js',
+              },
+            },
+            end: '(?=\\})',
+            patterns: [
+              {
+                name: 'case-clause.expr.js',
+                begin:
+                  '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(case|default(?=:))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.switch.js',
+                  },
+                },
+                end: '(?=:)',
+                patterns: [
+                  {
+                    include: '#expression',
+                  },
+                ],
+              },
+              {
+                begin: '(:)\\s*(\\{)',
+                beginCaptures: {
+                  '1': {
+                    name: 'case-clause.expr.js punctuation.definition.section.case-statement.js',
+                  },
+                  '2': {
+                    name: 'meta.block.js punctuation.definition.block.js',
+                  },
+                },
+                end: '\\}',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.block.js punctuation.definition.block.js',
+                  },
+                },
+                contentName: 'meta.block.js',
+                patterns: [
+                  {
+                    include: '#statements',
+                  },
+                ],
+              },
+              {
+                match: '(:)',
+                captures: {
+                  '0': {
+                    name: 'case-clause.expr.js punctuation.definition.section.case-statement.js',
+                  },
+                },
+              },
+              {
+                include: '#component-statements',
+              },
+            ],
+          },
+        ],
+      },
+      'for-loop': {
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))for(?=((\\s+|(\\s*\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*))await)?\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)?(\\())',
+        beginCaptures: {
+          '0': {
+            name: 'keyword.control.loop.js',
+          },
+        },
+        end: '(?<=\\))',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            name: 'keyword.control.loop.js',
+            match: 'await',
+          },
+          {
+            begin: '\\(',
+            beginCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#var-expr',
+              },
+              {
+                include: '#expression',
+              },
+              {
+                include: '#punctuation-semicolon',
+              },
+            ],
+          },
+        ],
+      },
+      'if-statement': {
+        patterns: [
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?=\\bif\\s*(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))\\s*(?!\\{))',
+            end: '(?=;|$|\\})',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(if)\\s*(\\()',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.conditional.js',
+                  },
+                  '2': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                end: '\\)',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#expression',
+                  },
+                ],
+              },
+              {
+                name: 'string.regexp.js',
+                begin:
+                  '(?<=\\))\\s*\\/(?![\\/*])(?=(?:[^\\/\\\\\\[]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\])+\\/([dgimsuvy]+|(?![\\/\\*])|(?=\\/\\*))(?!\\s*[a-zA-Z0-9_$]))',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.begin.js',
+                  },
+                },
+                end: '(/)([dgimsuvy]*)',
+                endCaptures: {
+                  '1': {
+                    name: 'punctuation.definition.string.end.js',
+                  },
+                  '2': {
+                    name: 'keyword.other.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#regexp',
+                  },
+                ],
+              },
+              {
+                include: '#statements',
+              },
+            ],
+          },
+        ],
+      },
+      'component-if-statement': {
+        patterns: [
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?=\\bif\\s*(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))\\s*(?!\\{))',
+            end: '(?=;|$|\\})',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(if)\\s*(\\()',
+                beginCaptures: {
+                  '1': {
+                    name: 'keyword.control.conditional.js',
+                  },
+                  '2': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                end: '\\)',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#expression',
+                  },
+                ],
+              },
+              {
+                name: 'string.regexp.js',
+                begin:
+                  '(?<=\\))\\s*\\/(?![\\/*])(?=(?:[^\\/\\\\\\[]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\])+\\/([dgimsuvy]+|(?![\\/\\*])|(?=\\/\\*))(?!\\s*[a-zA-Z0-9_$]))',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.begin.js',
+                  },
+                },
+                end: '(/)([dgimsuvy]*)',
+                endCaptures: {
+                  '1': {
+                    name: 'punctuation.definition.string.end.js',
+                  },
+                  '2': {
+                    name: 'keyword.other.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#regexp',
+                  },
+                ],
+              },
+              {
+                include: '#component-statements',
+              },
+            ],
+          },
+        ],
+      },
+      'decl-block': {
+        name: 'meta.block.js',
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#statements',
+          },
+        ],
+      },
+      'component-decl-block': {
+        name: 'meta.block.js',
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#component-statements',
+          },
+        ],
+      },
+      'after-operator-block-as-object-literal': {
+        name: 'meta.objectliteral.js',
+        begin:
+          '(?<!\\+\\+|--)(?<=[:=(,\\[?+!>]|^await|[^\\._$[:alnum:]]await|^return|[^\\._$[:alnum:]]return|^yield|[^\\._$[:alnum:]]yield|^throw|[^\\._$[:alnum:]]throw|^in|[^\\._$[:alnum:]]in|^of|[^\\._$[:alnum:]]of|^typeof|[^\\._$[:alnum:]]typeof|&&|\\|\\||\\*)\\s*(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#object-member',
+          },
+        ],
+      },
+      'object-literal': {
+        name: 'meta.objectliteral.js',
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#object-member',
+          },
+        ],
+      },
+      'object-member': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#object-literal-method-declaration',
+          },
+          {
+            name: 'meta.object.member.js meta.object-literal.key.js',
+            begin: '(?=\\[)',
+            end: '(?=:)|((?<=[\\]])(?=\\s*[\\(\\<]))',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#array-literal',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js meta.object-literal.key.js',
+            begin: '(?=[\\\'\\"\\`])',
+            end: '(?=:)|((?<=[\\\'\\"\\`])(?=((\\s*[\\(\\<,}])|(\\s+(as|satisifies)\\s+))))',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#string',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js meta.object-literal.key.js',
+            begin:
+              '(?x)(?=(\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$)))',
+            end: '(?=:)|(?=\\s*([\\(\\<,}])|(\\s+as|satisifies\\s+))',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#numeric-literal',
+              },
+            ],
+          },
+          {
+            name: 'meta.method.declaration.js',
+            begin: '(?<=[\\]\\\'\\"\\`])(?=\\s*[\\(\\<])',
+            end: '(?=\\}|;|,)|(?<=\\})',
+            patterns: [
+              {
+                include: '#function-body',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js',
+            match:
+              '(?![_$[:alpha:]])([[:digit:]]+)\\s*(?=(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*:)',
+            captures: {
+              '0': {
+                name: 'meta.object-literal.key.js',
+              },
+              '1': {
+                name: 'constant.numeric.decimal.js',
+              },
+            },
+          },
+          {
+            name: 'meta.object.member.js',
+            match:
+              '(?x)(?:([_$[:alpha:]][_$[:alnum:]]*)\\s*(?=(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*:(\\s*\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/)*\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            captures: {
+              '0': {
+                name: 'meta.object-literal.key.js',
+              },
+              '1': {
+                name: 'entity.name.function.js',
+              },
+            },
+          },
+          {
+            name: 'meta.object.member.js',
+            match:
+              '(?:[_$[:alpha:]][_$[:alnum:]]*)\\s*(?=(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*:)',
+            captures: {
+              '0': {
+                name: 'meta.object-literal.key.js',
+              },
+            },
+          },
+          {
+            name: 'meta.object.member.js',
+            begin: '\\.\\.\\.',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.operator.spread.js',
+              },
+            },
+            end: '(?=,|\\})',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js',
+            match: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(?=,|\\}|$|\\/\\/|\\/\\*)',
+            captures: {
+              '1': {
+                name: 'variable.other.readwrite.js',
+              },
+            },
+          },
+          {
+            name: 'meta.object.member.js',
+            match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as)\\s+(const)(?=\\s*([,}]|$))',
+            captures: {
+              '1': {
+                name: 'keyword.control.as.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            name: 'meta.object.member.js',
+            begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(as)|(satisfies))\\s+',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.as.js',
+              },
+              '2': {
+                name: 'keyword.control.satisfies.js',
+              },
+            },
+            end: '(?=[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|^|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as|satisifies)\\s+))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js',
+            begin: '(?=[_$[:alpha:]][_$[:alnum:]]*\\s*=)',
+            end: '(?=,|\\}|$|\\/\\/|\\/\\*)',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            name: 'meta.object.member.js',
+            begin: ':',
+            beginCaptures: {
+              '0': {
+                name: 'meta.object-literal.key.js punctuation.separator.key-value.js',
+              },
+            },
+            end: '(?=,|\\})',
+            patterns: [
+              {
+                begin:
+                  '(?<=:)\\s*(async)?(?=\\s*(<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)\\(\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))',
+                beginCaptures: {
+                  '1': {
+                    name: 'storage.modifier.async.js',
+                  },
+                },
+                end: '(?<=\\))',
+                patterns: [
+                  {
+                    include: '#type-parameters',
+                  },
+                  {
+                    begin: '\\(',
+                    beginCaptures: {
+                      '0': {
+                        name: 'meta.brace.round.js',
+                      },
+                    },
+                    end: '\\)',
+                    endCaptures: {
+                      '0': {
+                        name: 'meta.brace.round.js',
+                      },
+                    },
+                    patterns: [
+                      {
+                        include: '#expression-inside-possibly-arrow-parens',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                begin:
+                  '(?<=:)\\s*(async)?\\s*(\\()(?=\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))',
+                beginCaptures: {
+                  '1': {
+                    name: 'storage.modifier.async.js',
+                  },
+                  '2': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                end: '\\)',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#expression-inside-possibly-arrow-parens',
+                  },
+                ],
+              },
+              {
+                begin: '(?<=:)\\s*(async)?\\s*(?=\\<\\s*$)',
+                beginCaptures: {
+                  '1': {
+                    name: 'storage.modifier.async.js',
+                  },
+                },
+                end: '(?<=\\>)',
+                patterns: [
+                  {
+                    include: '#type-parameters',
+                  },
+                ],
+              },
+              {
+                begin:
+                  '(?<=\\>)\\s*(\\()(?=\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))',
+                beginCaptures: {
+                  '1': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                end: '\\)',
+                endCaptures: {
+                  '0': {
+                    name: 'meta.brace.round.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#expression-inside-possibly-arrow-parens',
+                  },
+                ],
+              },
+              {
+                include: '#possibly-arrow-return-type',
+              },
+              {
+                include: '#expression',
+              },
+            ],
+          },
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            include: '#decl-block',
+          },
+        ],
+      },
+      'ternary-expression': {
+        begin: '(?!\\?\\.\\s*[^[:digit:]])(\\?)(?!\\?)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.ternary.js',
+          },
+        },
+        end: '\\s*(:)',
+        endCaptures: {
+          '1': {
+            name: 'keyword.operator.ternary.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#expression',
+          },
+        ],
+      },
+      'function-call': {
+        patterns: [
+          {
+            begin:
+              '(?=(((([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))|(?<=[\\)]))\\s*(?:(\\?\\.\\s*)|(\\!))?((<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)?\\())',
+            end: '(?<=\\))(?!(((([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))|(?<=[\\)]))\\s*(?:(\\?\\.\\s*)|(\\!))?((<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)?\\())',
+            patterns: [
+              {
+                name: 'meta.function-call.js',
+                begin:
+                  '(?=(([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))',
+                end: '(?=\\s*(?:(\\?\\.\\s*)|(\\!))?((<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)?\\())',
+                patterns: [
+                  {
+                    include: '#function-call-target',
+                  },
+                ],
+              },
+              {
+                include: '#comment',
+              },
+              {
+                include: '#function-call-optionals',
+              },
+              {
+                include: '#type-arguments',
+              },
+              {
+                include: '#paren-expression',
+              },
+            ],
+          },
+          {
+            begin:
+              '(?=(((([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))|(?<=[\\)]))(<\\s*[\\{\\[\\(]\\s*$))',
+            end: '(?<=\\>)(?!(((([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))|(?<=[\\)]))(<\\s*[\\{\\[\\(]\\s*$))',
+            patterns: [
+              {
+                name: 'meta.function-call.js',
+                begin:
+                  '(?=(([_$[:alpha:]][_$[:alnum:]]*)(\\s*\\??\\.\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*))*)|(\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*))',
+                end: '(?=(<\\s*[\\{\\[\\(]\\s*$))',
+                patterns: [
+                  {
+                    include: '#function-call-target',
+                  },
+                ],
+              },
+              {
+                include: '#comment',
+              },
+              {
+                include: '#function-call-optionals',
+              },
+              {
+                include: '#type-arguments',
+              },
+            ],
+          },
+        ],
+      },
+      'function-call-target': {
+        patterns: [
+          {
+            include: '#support-function-call-identifiers',
+          },
+          {
+            name: 'entity.name.function.js',
+            match: '(\\#?[_$[:alpha:]][_$[:alnum:]]*)',
+          },
+        ],
+      },
+      'function-call-optionals': {
+        patterns: [
+          {
+            name: 'meta.function-call.js punctuation.accessor.optional.js',
+            match: '\\?\\.',
+          },
+          {
+            name: 'meta.function-call.js keyword.operator.definiteassignment.js',
+            match: '\\!',
+          },
+        ],
+      },
+      'support-function-call-identifiers': {
+        patterns: [
+          {
+            include: '#literal',
+          },
+          {
+            include: '#support-objects',
+          },
+          {
+            include: '#object-identifiers',
+          },
+          {
+            include: '#punctuation-accessor',
+          },
+          {
+            name: 'keyword.operator.expression.import.js',
+            match:
+              '(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))import(?=\\s*[\\(]\\s*[\\"\\\'\\`]))',
+          },
+        ],
+      },
+      'new-expr': {
+        name: 'new.expr.js',
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(new)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.new.js',
+          },
+        },
+        end: '(?<=\\))|(?=[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))new(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))function((\\s+[_$[:alpha:]][_$[:alnum:]]*)|(\\s*[\\(]))))',
+        patterns: [
+          {
+            include: '#expression',
+          },
+        ],
+      },
+      'instanceof-expr': {
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(instanceof)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.expression.instanceof.js',
+          },
+        },
+        end: '(?<=\\))|(?=[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|(===|!==|==|!=)|(([\\&\\~\\^\\|]\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s+instanceof(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))function((\\s+[_$[:alpha:]][_$[:alnum:]]*)|(\\s*[\\(]))))',
+        patterns: [
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'paren-expression-possibly-arrow': {
+        patterns: [
+          {
+            begin:
+              '(?<=[(=,])\\s*(async)?(?=\\s*((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?\\(\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.async.js',
+              },
+            },
+            end: '(?<=\\))',
+            patterns: [
+              {
+                include: '#paren-expression-possibly-arrow-with-typeparameters',
+              },
+            ],
+          },
+          {
+            begin:
+              '(?<=[(=,]|=>|^return|[^\\._$[:alnum:]]return)\\s*(async)?(?=\\s*((((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*))?\\()|(<)|((<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)))\\s*$)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.async.js',
+              },
+            },
+            end: '(?<=\\))',
+            patterns: [
+              {
+                include: '#paren-expression-possibly-arrow-with-typeparameters',
+              },
+            ],
+          },
+          {
+            include: '#possibly-arrow-return-type',
+          },
+        ],
+      },
+      'paren-expression-possibly-arrow-with-typeparameters': {
+        patterns: [
+          {
+            include: '#type-parameters',
+          },
+          {
+            begin: '\\(',
+            beginCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'meta.brace.round.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#expression-inside-possibly-arrow-parens',
+              },
+            ],
+          },
+        ],
+      },
+      'expression-inside-possibly-arrow-parens': {
+        patterns: [
+          {
+            include: '#expressionWithoutIdentifiers',
+          },
+          {
+            include: '#comment',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#decorator',
+          },
+          {
+            include: '#destructuring-parameter',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|protected|private|readonly)\\s+(?=(override|public|protected|private|readonly)\\s+)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*(\\??)(?=\\s*\n# function assignment |\n(=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)) |\n# typeannotation is fn type: < | () | (... | (param: | (param, | (param? | (param= | (param) =>\n(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))) |\n(:\\s*(=>|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(<[^<>]*>)|[^<>(),=])+=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n)))',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'entity.name.function.js variable.language.this.js',
+              },
+              '4': {
+                name: 'entity.name.function.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(override|public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*(\\??)(?=\\s*[:,]|$)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'variable.parameter.js variable.language.this.js',
+              },
+              '4': {
+                name: 'variable.parameter.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+          {
+            include: '#type-annotation',
+          },
+          {
+            include: '#variable-initializer',
+          },
+          {
+            name: 'punctuation.separator.parameter.js',
+            match: ',',
+          },
+          {
+            include: '#identifiers',
+          },
+          {
+            include: '#expressionPunctuations',
+          },
+        ],
+      },
+      'paren-expression': {
+        begin: '\\(',
+        beginCaptures: {
+          '0': {
+            name: 'meta.brace.round.js',
+          },
+        },
+        end: '\\)',
+        endCaptures: {
+          '0': {
+            name: 'meta.brace.round.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#expression',
+          },
+        ],
+      },
+
+      'expression-operators': {
+        patterns: [
+          {
+            name: 'keyword.control.flow.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(await)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(yield)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))(?=\\s*\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*\\*)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.flow.js',
+              },
+            },
+            end: '\\*',
+            endCaptures: {
+              '0': {
+                name: 'keyword.generator.asterisk.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#comment',
+              },
+            ],
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(yield)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))(?:\\s*(\\*))?',
+            captures: {
+              '1': {
+                name: 'keyword.control.flow.js',
+              },
+              '2': {
+                name: 'keyword.generator.asterisk.js',
+              },
+            },
+          },
+          {
+            name: 'keyword.operator.expression.delete.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))delete(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.operator.expression.in.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))in(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))(?!\\()',
+          },
+          {
+            name: 'keyword.operator.expression.of.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))of(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))(?!\\()',
+          },
+          {
+            name: 'keyword.operator.expression.instanceof.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))instanceof(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.operator.new.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))new(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            include: '#typeof-operator',
+          },
+          {
+            name: 'keyword.operator.expression.void.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))void(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as)\\s+(const)(?=\\s*($|[;,:})\\]]))',
+            captures: {
+              '1': {
+                name: 'keyword.control.as.js',
+              },
+              '2': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(as)|(satisfies))\\s+',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.as.js',
+              },
+              '2': {
+                name: 'keyword.control.satisfies.js',
+              },
+            },
+            end: '(?=^|[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as|satisfies)\\s+)|(\\s+\\<))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+          {
+            name: 'keyword.operator.spread.js',
+            match: '\\.\\.\\.',
+          },
+          {
+            name: 'keyword.operator.assignment.compound.js',
+            match: '\\*=|(?<!\\()/=|%=|\\+=|\\-=',
+          },
+          {
+            name: 'keyword.operator.assignment.compound.bitwise.js',
+            match: '\\&=|\\^=|<<=|>>=|>>>=|\\|=',
+          },
+          {
+            name: 'keyword.operator.bitwise.shift.js',
+            match: '<<|>>>|>>',
+          },
+          {
+            name: 'keyword.operator.comparison.js',
+            match: '===|!==|==|!=',
+          },
+          {
+            name: 'keyword.operator.relational.js operator.relational.ripple-force entity.name.operator.relational.ripple',
+            match: '<=|>=|<>|<|>',
+          },
+          {
+            match: '(?<=[_$[:alnum:]])(\\!)\\s*(?:(/=)|(?:(/)(?![/*])))',
+            captures: {
+              '1': {
+                name: 'keyword.operator.logical.js',
+              },
+              '2': {
+                name: 'keyword.operator.assignment.compound.js',
+              },
+              '3': {
+                name: 'keyword.operator.arithmetic.js',
+              },
+            },
+          },
+          {
+            name: 'keyword.operator.logical.js',
+            match: '\\!|&&|\\|\\||\\?\\?',
+          },
+          {
+            name: 'keyword.operator.bitwise.js',
+            match: '\\&|~|\\^|\\|',
+          },
+          {
+            name: 'keyword.operator.assignment.js',
+            match: '\\=',
+          },
+          {
+            name: 'keyword.operator.decrement.js',
+            match: '--',
+          },
+          {
+            name: 'keyword.operator.increment.js',
+            match: '\\+\\+',
+          },
+          {
+            name: 'keyword.operator.arithmetic.js',
+            match: '%|\\*|/|-|\\+',
+          },
+          {
+            begin:
+              '(?<=[_$[:alnum:])\\]])\\s*(?=(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)+(?:(/=)|(?:(/)(?![/*]))))',
+            end: '(?:(/=)|(?:(/)(?!\\*([^\\*]|(\\*[^\\/]))*\\*\\/)))',
+            endCaptures: {
+              '1': {
+                name: 'keyword.operator.assignment.compound.js',
+              },
+              '2': {
+                name: 'keyword.operator.arithmetic.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#comment',
+              },
+            ],
+          },
+          {
+            match: '(?<=[_$[:alnum:])\\]])\\s*(?:(/=)|(?:(/)(?![/*])))',
+            captures: {
+              '1': {
+                name: 'keyword.operator.assignment.compound.js',
+              },
+              '2': {
+                name: 'keyword.operator.arithmetic.js',
+              },
+            },
+          },
+        ],
+      },
+      'typeof-operator': {
+        begin:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))typeof(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+        beginCaptures: {
+          '0': {
+            name: 'keyword.operator.expression.typeof.js',
+          },
+        },
+        end: '(?=[,);}\\]=>:&|{\\?]|(extends\\s+)|$|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))',
+        patterns: [
+          {
+            include: '#type-arguments',
+          },
+          {
+            include: '#expression',
+          },
+        ],
+      },
+      literal: {
+        patterns: [
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#boolean-literal',
+          },
+          {
+            include: '#null-literal',
+          },
+          {
+            include: '#undefined-literal',
+          },
+          {
+            include: '#numericConstant-literal',
+          },
+          {
+            include: '#array-literal',
+          },
+          {
+            include: '#this-literal',
+          },
+          {
+            include: '#super-literal',
+          },
+        ],
+      },
+      'array-literal': {
+        name: 'meta.array.literal.js',
+        begin: '\\s*(\\[)',
+        beginCaptures: {
+          '1': {
+            name: 'meta.brace.square.js',
+          },
+        },
+        end: '\\]',
+        endCaptures: {
+          '0': {
+            name: 'meta.brace.square.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#expression',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'numeric-literal': {
+        patterns: [
+          {
+            name: 'constant.numeric.hex.js',
+            match: '\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+            },
+          },
+          {
+            name: 'constant.numeric.binary.js',
+            match: '\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+            },
+          },
+          {
+            name: 'constant.numeric.octal.js',
+            match: '\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)\n(?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$)',
+            captures: {
+              '0': {
+                name: 'constant.numeric.decimal.js',
+              },
+              '1': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '2': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '3': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '4': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '5': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '6': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '7': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '8': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '9': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '10': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '11': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '12': {
+                name: 'meta.delimiter.decimal.period.js',
+              },
+              '13': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+              '14': {
+                name: 'storage.type.numeric.bigint.js',
+              },
+            },
+          },
+        ],
+      },
+      'boolean-literal': {
+        patterns: [
+          {
+            name: 'constant.language.boolean.true.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))true(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'constant.language.boolean.false.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))false(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      'null-literal': {
+        name: 'constant.language.null.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))null(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'this-literal': {
+        name: 'variable.language.this.js',
+        match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))this\\b(?!\\$)',
+      },
+      'super-literal': {
+        name: 'variable.language.super.js',
+        match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))super\\b(?!\\$)',
+      },
+      'undefined-literal': {
+        name: 'constant.language.undefined.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))undefined(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'numericConstant-literal': {
+        patterns: [
+          {
+            name: 'constant.language.nan.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))NaN(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'constant.language.infinity.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Infinity(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      'support-objects': {
+        patterns: [
+          {
+            name: 'variable.language.arguments.js',
+            match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(arguments)\\b(?!\\$)',
+          },
+          {
+            name: 'support.class.promise.js',
+            match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(Promise)\\b(?!\\$)',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(import)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(meta)\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'keyword.control.import.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '4': {
+                name: 'support.variable.property.importmeta.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(new)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(target)\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'keyword.operator.new.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '4': {
+                name: 'support.variable.property.target.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x) (?:(\\.)|(\\?\\.(?!\\s*[[:digit:]]))) \\s* (?:\n  (?:(constructor|length|prototype|__proto__)\\b(?!\\$|\\s*(<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\\())\n  |\n  (?:(EPSILON|MAX_SAFE_INTEGER|MAX_VALUE|MIN_SAFE_INTEGER|MIN_VALUE|NEGATIVE_INFINITY|POSITIVE_INFINITY)\\b(?!\\$)))',
+            captures: {
+              '1': {
+                name: 'punctuation.accessor.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '3': {
+                name: 'support.variable.property.js',
+              },
+              '4': {
+                name: 'support.constant.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(exports)|(module)(?:(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))(exports|id|filename|loaded|parent|children))?)\\b(?!\\$)',
+            captures: {
+              '1': {
+                name: 'support.type.object.module.js',
+              },
+              '2': {
+                name: 'support.type.object.module.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.js',
+              },
+              '4': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '5': {
+                name: 'support.type.object.module.js',
+              },
+            },
+          },
+        ],
+      },
+      identifiers: {
+        patterns: [
+          {
+            include: '#object-identifiers',
+          },
+          {
+            match:
+              '(?x)(?:(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*)?([_$[:alpha:]][_$[:alnum:]]*)(?=\\s*=\\s*(\n  ((async\\s+)?(\n    (function\\s*[(<*]) |\n    (function\\s+) |\n    ([_$[:alpha:]][_$[:alnum:]]*\\s*=>)\n  )) |\n  ((async\\s*)?(\n    ((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))))) |\n    # sure shot arrow functions even if => is on new line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?\n  [(]\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*\n  (\n    ([)]\\s*:) |                                                                                       # ():\n    ((\\.\\.\\.\\s*)?[_$[:alpha:]][_$[:alnum:]]*\\s*:)                                                                  # [(]param: | [(]...param:\n  )\n) |\n(\n  [<]\\s*[_$[:alpha:]][_$[:alnum:]]*\\s+extends\\s*[^=>]                                                              # < typeparam extends\n) |\n# arrow function possible to detect only with => on same line\n(\n  (<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<]|\\<\\s*(((const\\s+)?[_$[:alpha:]])|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\]))([^=<>]|=[^<])*\\>)*\\>)*>\\s*)?                                                                                 # typeparameters\n  \\(\\s*(\\/\\*([^\\*]|(\\*[^\\/]))*\\*\\/\\s*)*(([_$[:alpha:]]|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\.\\.\\.\\s*[_$[:alpha:]]))([^()\\\'\\"\\`]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))*)?\\)   # parameters\n  (\\s*:\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+)?                                                                        # return type\n  \\s*=>                                                                                               # arrow operator\n)\n  ))\n))',
+            captures: {
+              '1': {
+                name: 'punctuation.accessor.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '3': {
+                name: 'entity.name.function.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(\\#?[[:upper:]][_$[:digit:][:upper:]]*)(?![_$[:alnum:]])',
+            captures: {
+              '1': {
+                name: 'punctuation.accessor.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '3': {
+                name: 'variable.other.constant.property.js',
+              },
+            },
+          },
+          {
+            match: '(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(\\#?[_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'punctuation.accessor.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '3': {
+                name: 'variable.other.property.js',
+              },
+            },
+          },
+          {
+            name: 'variable.other.constant.js',
+            match: '([[:upper:]][_$[:digit:][:upper:]]*)(?![_$[:alnum:]])',
+          },
+          {
+            name: 'variable.other.readwrite.js',
+            match: '[_$[:alpha:]][_$[:alnum:]]*',
+          },
+        ],
+      },
+      'object-identifiers': {
+        patterns: [
+          {
+            name: 'support.class.js',
+            match: '([_$[:alpha:]][_$[:alnum:]]*)(?=\\s*\\??\\.\\s*prototype\\b(?!\\$))',
+          },
+          {
+            match:
+              '(?x)(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(?:\n  (\\#?[[:upper:]][_$[:digit:][:upper:]]*) |\n  (\\#?[_$[:alpha:]][_$[:alnum:]]*)\n)(?=\\s*\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'punctuation.accessor.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '3': {
+                name: 'variable.other.constant.object.property.js',
+              },
+              '4': {
+                name: 'variable.other.object.property.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:\n  ([[:upper:]][_$[:digit:][:upper:]]*) |\n  ([_$[:alpha:]][_$[:alnum:]]*)\n)(?=\\s*\\??\\.\\s*\\#?[_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'variable.other.constant.object.js',
+              },
+              '2': {
+                name: 'variable.other.object.js',
+              },
+            },
+          },
+        ],
+      },
+      'type-annotation': {
+        patterns: [
+          {
+            name: 'meta.type.annotation.js',
+            begin: '(:)(?=\\s*\\S)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.type.annotation.js',
+              },
+            },
+            end: '(?<![:|&])(?!\\s*[|&]\\s+)((?=^|[,);\\}\\]]|//)|(?==[^>])|((?<=[\\}>\\]\\)]|[_$[:alpha:]])\\s*(?=\\{)))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+          {
+            name: 'meta.type.annotation.js',
+            begin: '(:)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.type.annotation.js',
+              },
+            },
+            end: '(?<![:|&])((?=[,);\\}\\]]|\\/\\/)|(?==[^>])|(?=^\\s*$)|((?<=[\\}>\\]\\)]|[_$[:alpha:]])\\s*(?=\\{)))',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+        ],
+      },
+      'parameter-type-annotation': {
+        patterns: [
+          {
+            name: 'meta.type.annotation.js',
+            begin: '(:)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.type.annotation.js',
+              },
+            },
+            end: '(?=[,)])|(?==[^>])',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+        ],
+      },
+      'return-type': {
+        patterns: [
+          {
+            name: 'meta.return.type.js',
+            begin: '(?<=\\))\\s*(:)(?=\\s*\\S)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.type.annotation.js',
+              },
+            },
+            end: '(?<![:|&])(?=$|^|[{};,]|//)',
+            patterns: [
+              {
+                include: '#return-type-core',
+              },
+            ],
+          },
+          {
+            name: 'meta.return.type.js',
+            begin: '(?<=\\))\\s*(:)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.operator.type.annotation.js',
+              },
+            },
+            end: '(?<![:|&])((?=[{};,]|//|^\\s*$)|((?<=\\S)(?=\\s*$)))',
+            patterns: [
+              {
+                include: '#return-type-core',
+              },
+            ],
+          },
+        ],
+      },
+      'return-type-core': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin: '(?<=[:|&])(?=\\s*\\{)',
+            end: '(?<=\\})',
+            patterns: [
+              {
+                include: '#type-object',
+              },
+            ],
+          },
+          {
+            include: '#type-predicate-operator',
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'arrow-return-type': {
+        name: 'meta.return.type.arrow.js',
+        begin: '(?<=\\))\\s*(:)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.operator.type.annotation.js',
+          },
+        },
+        end: '(?==>|\\{|(^\\s*(export|function|class|interface|let|var|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|const|import|enum|namespace|module|type|abstract|declare)\\s+))',
+        patterns: [
+          {
+            include: '#arrow-return-type-body',
+          },
+        ],
+      },
+      'possibly-arrow-return-type': {
+        begin:
+          '(?<=\\)|^)\\s*(:)(?=\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*=>)',
+        beginCaptures: {
+          '1': {
+            name: 'meta.arrow.js meta.return.type.arrow.js keyword.operator.type.annotation.js',
+          },
+        },
+        end: '(?==>|\\{|(^\\s*(export|function|class|interface|let|var|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|const|import|enum|namespace|module|type|abstract|declare)\\s+))',
+        contentName: 'meta.arrow.js meta.return.type.arrow.js',
+        patterns: [
+          {
+            include: '#arrow-return-type-body',
+          },
+        ],
+      },
+      'arrow-return-type-body': {
+        patterns: [
+          {
+            begin: '(?<=[:])(?=\\s*\\{)',
+            end: '(?<=\\})',
+            patterns: [
+              {
+                include: '#type-object',
+              },
+            ],
+          },
+          {
+            include: '#type-predicate-operator',
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'type-parameters': {
+        name: 'meta.type.parameters.js',
+        begin: '(<)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.definition.typeparameters.begin.js',
+          },
+        },
+        end: '(>)',
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.typeparameters.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            name: 'storage.modifier.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(extends|in|out|const)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            include: '#type',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            name: 'keyword.operator.assignment.js',
+            match: '(=)(?!>)',
+          },
+        ],
+      },
+      'type-arguments': {
+        name: 'meta.type.parameters.js',
+        begin: '\\<',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.typeparameters.begin.js',
+          },
+        },
+        end: '\\>',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.typeparameters.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#type-arguments-body',
+          },
+        ],
+      },
+      'type-arguments-body': {
+        patterns: [
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(_)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            captures: {
+              '0': {
+                name: 'keyword.operator.type.js',
+              },
+            },
+          },
+          {
+            include: '#type',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      type: {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#type-string',
+          },
+          {
+            include: '#numeric-literal',
+          },
+          {
+            include: '#type-primitive',
+          },
+          {
+            include: '#type-builtin-literals',
+          },
+          {
+            include: '#type-parameters',
+          },
+          {
+            include: '#type-tuple',
+          },
+          {
+            include: '#type-object',
+          },
+          {
+            include: '#type-operators',
+          },
+          {
+            include: '#type-conditional',
+          },
+          {
+            include: '#type-fn-type-parameters',
+          },
+          {
+            include: '#type-paren-or-function-parameters',
+          },
+          {
+            include: '#type-function-return-type',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(readonly)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))\\s*',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            include: '#type-name',
+          },
+        ],
+      },
+      'type-primitive': {
+        name: 'support.type.primitive.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(string|number|bigint|boolean|symbol|any|void|never|unknown)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'type-builtin-literals': {
+        name: 'support.type.builtin.js',
+        match:
+          '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(this|true|false|undefined|null|object)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+      },
+      'type-tuple': {
+        name: 'meta.type.tuple.js',
+        begin: '\\[',
+        beginCaptures: {
+          '0': {
+            name: 'meta.brace.square.js',
+          },
+        },
+        end: '\\]',
+        endCaptures: {
+          '0': {
+            name: 'meta.brace.square.js',
+          },
+        },
+        patterns: [
+          {
+            name: 'keyword.operator.rest.js',
+            match: '\\.\\.\\.',
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))([_$[:alpha:]][_$[:alnum:]]*)\\s*(\\?)?\\s*(:)',
+            captures: {
+              '1': {
+                name: 'entity.name.label.js',
+              },
+              '2': {
+                name: 'keyword.operator.optional.js',
+              },
+              '3': {
+                name: 'punctuation.separator.label.js',
+              },
+            },
+          },
+          {
+            include: '#type',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'type-object': {
+        name: 'meta.object.type.js',
+        begin: '\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#method-declaration',
+          },
+          {
+            include: '#indexer-declaration',
+          },
+          {
+            include: '#indexer-mapped-type-declaration',
+          },
+          {
+            include: '#field-declaration',
+          },
+          {
+            include: '#type-annotation',
+          },
+          {
+            begin: '\\.\\.\\.',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.operator.spread.js',
+              },
+            },
+            end: '(?=\\}|;|,|$)|(?<=\\})',
+            patterns: [
+              {
+                include: '#type',
+              },
+            ],
+          },
+          {
+            include: '#punctuation-comma',
+          },
+          {
+            include: '#punctuation-semicolon',
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'type-conditional': {
+        patterns: [
+          {
+            begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(extends)\\s+',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+            },
+            end: '(?<=:)',
+            patterns: [
+              {
+                begin: '\\?',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.operator.ternary.js',
+                  },
+                },
+                end: ':',
+                endCaptures: {
+                  '0': {
+                    name: 'keyword.operator.ternary.js',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#type',
+                  },
+                ],
+              },
+              {
+                include: '#type',
+              },
+            ],
+          },
+        ],
+      },
+      'type-paren-or-function-parameters': {
+        name: 'meta.type.paren.cover.js',
+        begin: '\\(',
+        beginCaptures: {
+          '0': {
+            name: 'meta.brace.round.js',
+          },
+        },
+        end: '\\)',
+        endCaptures: {
+          '0': {
+            name: 'meta.brace.round.js',
+          },
+        },
+        patterns: [
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))\\s*(\\??)(?=\\s*(:\\s*(\n  (<) |\n  ([(]\\s*(\n    ([)]) |\n    (\\.\\.\\.) |\n    ([_$[:alnum:]]+\\s*(\n      ([:,?=])|\n      ([)]\\s*=>)\n    ))\n  ))\n)) |\n(:\\s*(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))Function(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))) |\n(:\\s*((<\\s*$)|([\\(]\\s*((([\\{\\[]\\s*)?$)|((\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})\\s*((:\\s*\\{?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*)))|((\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])\\s*((:\\s*\\[?$)|((\\s*([^<>\\(\\)\\{\\}]|\\<([^<>]|\\<([^<>]|\\<[^<>]+\\>)+\\>)+\\>|\\([^\\(\\)]+\\)|\\{[^\\{\\}]+\\})+\\s*)?=\\s*))))))))',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'entity.name.function.js variable.language.this.js',
+              },
+              '4': {
+                name: 'entity.name.function.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)(?:(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(public|private|protected|readonly)\\s+)?(?:(\\.\\.\\.)\\s*)?(?<!=|:)(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))\\s*(\\??)(?=:)',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.operator.rest.js',
+              },
+              '3': {
+                name: 'variable.parameter.js variable.language.this.js',
+              },
+              '4': {
+                name: 'variable.parameter.js',
+              },
+              '5': {
+                name: 'keyword.operator.optional.js',
+              },
+            },
+          },
+          {
+            include: '#type-annotation',
+          },
+          {
+            name: 'punctuation.separator.parameter.js',
+            match: ',',
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'type-fn-type-parameters': {
+        patterns: [
+          {
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(abstract)\\s+)?(new)\\b(?=\\s*\\<)',
+            beginCaptures: {
+              '1': {
+                name: 'meta.type.constructor.js storage.modifier.js',
+              },
+              '2': {
+                name: 'meta.type.constructor.js keyword.control.new.js',
+              },
+            },
+            end: '(?<=>)',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#type-parameters',
+              },
+            ],
+          },
+          {
+            name: 'meta.type.constructor.js',
+            begin:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(abstract)\\s+)?(new)\\b\\s*(?=\\()',
+            beginCaptures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+              '2': {
+                name: 'keyword.control.new.js',
+              },
+            },
+            end: '(?<=\\))',
+            patterns: [
+              {
+                include: '#function-parameters',
+              },
+            ],
+          },
+          {
+            name: 'meta.type.function.js',
+            begin:
+              '(?x)(\n  (?=\n    [(]\\s*(\n      ([)]) |\n      (\\.\\.\\.) |\n      ([_$[:alnum:]]+\\s*(\n        ([:,?=])|\n        ([)]\\s*=>)\n      ))\n    )\n  )\n)',
+            end: '(?<=\\))',
+            patterns: [
+              {
+                include: '#function-parameters',
+              },
+            ],
+          },
+        ],
+      },
+      'type-function-return-type': {
+        patterns: [
+          {
+            name: 'meta.type.function.return.js',
+            begin: '(=>)(?=\\s*\\S)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.function.arrow.js',
+              },
+            },
+            end: '(?<!=>)(?<![|&])(?=[,\\]\\)\\{\\}=;>:\\?]|//|$)',
+            patterns: [
+              {
+                include: '#type-function-return-type-core',
+              },
+            ],
+          },
+          {
+            name: 'meta.type.function.return.js',
+            begin: '=>',
+            beginCaptures: {
+              '0': {
+                name: 'storage.type.function.arrow.js',
+              },
+            },
+            end: '(?<!=>)(?<![|&])((?=[,\\]\\)\\{\\}=;:\\?>]|//|^\\s*$)|((?<=\\S)(?=\\s*$)))',
+            patterns: [
+              {
+                include: '#type-function-return-type-core',
+              },
+            ],
+          },
+        ],
+      },
+      'type-function-return-type-core': {
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            begin: '(?<==>)(?=\\s*\\{)',
+            end: '(?<=\\})',
+            patterns: [
+              {
+                include: '#type-object',
+              },
+            ],
+          },
+          {
+            include: '#type-predicate-operator',
+          },
+          {
+            include: '#type',
+          },
+        ],
+      },
+      'type-operators': {
+        patterns: [
+          {
+            include: '#typeof-operator',
+          },
+          {
+            include: '#type-infer',
+          },
+          {
+            begin: '([&|])(?=\\s*\\{)',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.operator.type.js',
+              },
+            },
+            end: '(?<=\\})',
+            patterns: [
+              {
+                include: '#type-object',
+              },
+            ],
+          },
+          {
+            begin: '[&|]',
+            beginCaptures: {
+              '0': {
+                name: 'keyword.operator.type.js',
+              },
+            },
+            end: '(?=\\S)',
+          },
+          {
+            name: 'keyword.operator.expression.keyof.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))keyof(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.operator.ternary.js',
+            match: '(\\?|\\:)',
+          },
+          {
+            name: 'keyword.operator.expression.import.js',
+            match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))import(?=\\s*\\()',
+          },
+        ],
+      },
+      'type-infer': {
+        patterns: [
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(infer)\\s+([_$[:alpha:]][_$[:alnum:]]*)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))(?:\\s+(extends)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))?',
+            name: 'meta.type.infer.js',
+            captures: {
+              '1': {
+                name: 'keyword.operator.expression.infer.js',
+              },
+              '2': {
+                name: 'entity.name.type.js',
+              },
+              '3': {
+                name: 'keyword.operator.expression.extends.js',
+              },
+            },
+          },
+        ],
+      },
+      'type-predicate-operator': {
+        patterns: [
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(asserts)\\s+)?(?!asserts)(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))\\s(is)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            captures: {
+              '1': {
+                name: 'keyword.operator.type.asserts.js',
+              },
+              '2': {
+                name: 'variable.parameter.js variable.language.this.js',
+              },
+              '3': {
+                name: 'variable.parameter.js',
+              },
+              '4': {
+                name: 'keyword.operator.expression.is.js',
+              },
+            },
+          },
+          {
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(asserts)\\s+(?!is)(?:(this)|([_$[:alpha:]][_$[:alnum:]]*))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+            captures: {
+              '1': {
+                name: 'keyword.operator.type.asserts.js',
+              },
+              '2': {
+                name: 'variable.parameter.js variable.language.this.js',
+              },
+              '3': {
+                name: 'variable.parameter.js',
+              },
+            },
+          },
+          {
+            name: 'keyword.operator.type.asserts.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))asserts(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+          {
+            name: 'keyword.operator.expression.is.js',
+            match:
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))is(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+          },
+        ],
+      },
+      'type-name': {
+        patterns: [
+          {
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))\\s*(<)',
+            captures: {
+              '1': {
+                name: 'entity.name.type.module.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.optional.js',
+              },
+              '4': {
+                name: 'meta.type.parameters.js punctuation.definition.typeparameters.begin.js',
+              },
+            },
+            end: '(>)',
+            endCaptures: {
+              '1': {
+                name: 'meta.type.parameters.js punctuation.definition.typeparameters.end.js',
+              },
+            },
+            contentName: 'meta.type.parameters.js',
+            patterns: [
+              {
+                include: '#type-arguments-body',
+              },
+            ],
+          },
+          {
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(<)',
+            beginCaptures: {
+              '1': {
+                name: 'entity.name.type.js',
+              },
+              '2': {
+                name: 'meta.type.parameters.js punctuation.definition.typeparameters.begin.js',
+              },
+            },
+            end: '(>)',
+            endCaptures: {
+              '1': {
+                name: 'meta.type.parameters.js punctuation.definition.typeparameters.end.js',
+              },
+            },
+            contentName: 'meta.type.parameters.js',
+            patterns: [
+              {
+                include: '#type-arguments-body',
+              },
+            ],
+          },
+          {
+            match: '([_$[:alpha:]][_$[:alnum:]]*)\\s*(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))',
+            captures: {
+              '1': {
+                name: 'entity.name.type.module.js',
+              },
+              '2': {
+                name: 'punctuation.accessor.js',
+              },
+              '3': {
+                name: 'punctuation.accessor.optional.js',
+              },
+            },
+          },
+          {
+            name: 'entity.name.type.js',
+            match: '[_$[:alpha:]][_$[:alnum:]]*',
+          },
+        ],
+      },
+      'punctuation-comma': {
+        name: 'punctuation.separator.comma.js',
+        match: ',',
+      },
+      'punctuation-semicolon': {
+        name: 'punctuation.terminator.statement.js',
+        match: ';',
+      },
+      'punctuation-accessor': {
+        match: '(?:(\\.)|(\\?\\.(?!\\s*[[:digit:]])))',
+        captures: {
+          '1': {
+            name: 'punctuation.accessor.js',
+          },
+          '2': {
+            name: 'punctuation.accessor.optional.js',
+          },
+        },
+      },
+      string: {
+        patterns: [
+          {
+            include: '#qstring-single',
+          },
+          {
+            include: '#qstring-double',
+          },
+          {
+            include: '#template',
+          },
+        ],
+      },
+      'qstring-double': {
+        name: 'string.quoted.double.js',
+        begin: '"',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.begin.js',
+          },
+        },
+        end: '(")|((?:[^\\\\\\n])$)',
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.string.end.js',
+          },
+          '2': {
+            name: 'invalid.illegal.newline.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#string-character-escape',
+          },
+        ],
+      },
+      'qstring-single': {
+        name: 'string.quoted.single.js',
+        begin: "'",
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.begin.js',
+          },
+        },
+        end: "(\\')|((?:[^\\\\\\n])$)",
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.string.end.js',
+          },
+          '2': {
+            name: 'invalid.illegal.newline.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#string-character-escape',
+          },
+        ],
+      },
+      'string-character-escape': {
+        name: 'constant.character.escape.js',
+        match:
+          '\\\\(x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4}|u\\{[0-9A-Fa-f]+\\}|[0-2][0-7]{0,2}|3[0-6][0-7]?|37[0-7]?|[4-7][0-7]?|.|$)',
+      },
+      template: {
+        patterns: [
+          {
+            include: '#template-call',
+          },
+          {
+            contentName: 'string.template.js',
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)?(`)',
+            beginCaptures: {
+              '1': {
+                name: 'entity.name.function.tagged-template.js',
+              },
+              '2': {
+                name: 'string.template.js punctuation.definition.string.template.begin.js',
+              },
+            },
+            end: '`',
+            endCaptures: {
+              '0': {
+                name: 'string.template.js punctuation.definition.string.template.end.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#template-substitution-element',
+              },
+              {
+                include: '#string-character-escape',
+              },
+            ],
+          },
+        ],
+      },
+      'template-call': {
+        patterns: [
+          {
+            begin:
+              '(?=(([_$[:alpha:]][_$[:alnum:]]*\\s*\\??\\.\\s*)*|(\\??\\.\\s*)?)([_$[:alpha:]][_$[:alnum:]]*)(<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)?`)',
+            end: '(?=`)',
+            patterns: [
+              {
+                begin:
+                  '(?=(([_$[:alpha:]][_$[:alnum:]]*\\s*\\??\\.\\s*)*|(\\??\\.\\s*)?)([_$[:alpha:]][_$[:alnum:]]*))',
+                end: '(?=(<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)?`)',
+                patterns: [
+                  {
+                    include: '#support-function-call-identifiers',
+                  },
+                  {
+                    name: 'entity.name.function.tagged-template.js',
+                    match: '([_$[:alpha:]][_$[:alnum:]]*)',
+                  },
+                ],
+              },
+              {
+                include: '#type-arguments',
+              },
+            ],
+          },
+          {
+            begin:
+              '([_$[:alpha:]][_$[:alnum:]]*)?\\s*(?=(<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))(([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>|\\<\\s*(((keyof|infer|typeof|readonly)\\s+)|(([_$[:alpha:]][_$[:alnum:]]*|(\\{([^\\{\\}]|(\\{([^\\{\\}]|\\{[^\\{\\}]*\\})*\\}))*\\})|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(\\[([^\\[\\]]|(\\[([^\\[\\]]|\\[[^\\[\\]]*\\])*\\]))*\\])|(\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`))(?=\\s*([\\<\\>\\,\\.\\[]|=>|&(?!&)|\\|(?!\\|)))))([^<>\\(]|(\\(([^\\(\\)]|(\\(([^\\(\\)]|\\([^\\(\\)]*\\))*\\)))*\\))|(?<==)\\>)*(?<!=)\\>))*(?<!=)\\>)*(?<!=)>\\s*)`)',
+            beginCaptures: {
+              '1': {
+                name: 'entity.name.function.tagged-template.js',
+              },
+            },
+            end: '(?=`)',
+            patterns: [
+              {
+                include: '#type-arguments',
+              },
+            ],
+          },
+        ],
+      },
+      'template-substitution-element': {
+        name: 'meta.template.expression.js',
+        begin: '\\$\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.template-expression.begin.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.template-expression.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#expression',
+          },
+        ],
+        contentName: 'meta.embedded.line.js',
+      },
+      'type-string': {
+        patterns: [
+          {
+            include: '#qstring-single',
+          },
+          {
+            include: '#qstring-double',
+          },
+          {
+            include: '#template-type',
+          },
+        ],
+      },
+      'template-type': {
+        patterns: [
+          {
+            include: '#template-call',
+          },
+          {
+            contentName: 'string.template.js',
+            begin: '([_$[:alpha:]][_$[:alnum:]]*)?(`)',
+            beginCaptures: {
+              '1': {
+                name: 'entity.name.function.tagged-template.js',
+              },
+              '2': {
+                name: 'string.template.js punctuation.definition.string.template.begin.js',
+              },
+            },
+            end: '`',
+            endCaptures: {
+              '0': {
+                name: 'string.template.js punctuation.definition.string.template.end.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#template-type-substitution-element',
+              },
+              {
+                include: '#string-character-escape',
+              },
+            ],
+          },
+        ],
+      },
+      'template-type-substitution-element': {
+        name: 'meta.template.expression.js',
+        begin: '\\$\\{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.template-expression.begin.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.template-expression.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#type',
+          },
+        ],
+        contentName: 'meta.embedded.line.js',
+      },
+      regex: {
+        patterns: [
+          {
+            name: 'string.regexp.js',
+            begin:
+              '(?<!\\+\\+|--|})(?<=[=(:,\\[?+!]|^return|[^\\._$[:alnum:]]return|^case|[^\\._$[:alnum:]]case|=>|&&|\\|\\||\\*\\/)\\s*(\\/)(?![\\/*])(?=(?:[^\\/\\\\\\[\\()]|\\\\.|\\[([^\\]\\\\]|\\\\.)+\\]|\\(([^\\)\\\\]|\\\\.)+\\))+\\/([dgimsuvy]+|(?![\\/\\*])|(?=\\/\\*))(?!\\s*[a-zA-Z0-9_$]))',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.string.begin.js',
+              },
+            },
+            end: '(/)([dgimsuvy]*)',
+            endCaptures: {
+              '1': {
+                name: 'punctuation.definition.string.end.js',
+              },
+              '2': {
+                name: 'keyword.other.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#regexp',
+              },
+            ],
+          },
+          {
+            name: 'string.regexp.js',
+            begin:
+              '((?<![_$[:alnum:])\\]]|\\+\\+|--|}|\\*\\/)|((?<=^return|[^\\._$[:alnum:]]return|^case|[^\\._$[:alnum:]]case))\\s*)\\/(?![\\/*])(?=(?:[^\\/\\\\\\[]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\])+\\/([dgimsuvy]+|(?![\\/\\*])|(?=\\/\\*))(?!\\s*[a-zA-Z0-9_$]))',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.string.begin.js',
+              },
+            },
+            end: '(/)([dgimsuvy]*)',
+            endCaptures: {
+              '1': {
+                name: 'punctuation.definition.string.end.js',
+              },
+              '2': {
+                name: 'keyword.other.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#regexp',
+              },
+            ],
+          },
+        ],
+      },
+      regexp: {
+        patterns: [
+          {
+            name: 'keyword.control.anchor.regexp',
+            match: '\\\\[bB]|\\^|\\$',
+          },
+          {
+            match: '\\\\[1-9]\\d*|\\\\k<([a-zA-Z_$][\\w$]*)>',
+            captures: {
+              '0': {
+                name: 'keyword.other.back-reference.regexp',
+              },
+              '1': {
+                name: 'variable.other.regexp',
+              },
+            },
+          },
+          {
+            name: 'keyword.operator.quantifier.regexp',
+            match: '[?+*]|\\{(\\d+,\\d+|\\d+,|,\\d+|\\d+)\\}\\??',
+          },
+          {
+            name: 'keyword.operator.or.regexp',
+            match: '\\|',
+          },
+          {
+            name: 'meta.group.assertion.regexp',
+            begin: '(\\()((\\?=)|(\\?!)|(\\?<=)|(\\?<!))',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.group.regexp',
+              },
+              '2': {
+                name: 'punctuation.definition.group.assertion.regexp',
+              },
+              '3': {
+                name: 'meta.assertion.look-ahead.regexp',
+              },
+              '4': {
+                name: 'meta.assertion.negative-look-ahead.regexp',
+              },
+              '5': {
+                name: 'meta.assertion.look-behind.regexp',
+              },
+              '6': {
+                name: 'meta.assertion.negative-look-behind.regexp',
+              },
+            },
+            end: '(\\))',
+            endCaptures: {
+              '1': {
+                name: 'punctuation.definition.group.regexp',
+              },
+            },
+            patterns: [
+              {
+                include: '#regexp',
+              },
+            ],
+          },
+          {
+            name: 'meta.group.regexp',
+            begin: '\\((?:(\\?:)|(?:\\?<([a-zA-Z_$][\\w$]*)>))?',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.group.regexp',
+              },
+              '1': {
+                name: 'punctuation.definition.group.no-capture.regexp',
+              },
+              '2': {
+                name: 'variable.other.regexp',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.group.regexp',
+              },
+            },
+            patterns: [
+              {
+                include: '#regexp',
+              },
+            ],
+          },
+          {
+            name: 'constant.other.character-class.set.regexp',
+            begin: '(\\[)(\\^)?',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.character-class.regexp',
+              },
+              '2': {
+                name: 'keyword.operator.negation.regexp',
+              },
+            },
+            end: '(\\])',
+            endCaptures: {
+              '1': {
+                name: 'punctuation.definition.character-class.regexp',
+              },
+            },
+            patterns: [
+              {
+                name: 'constant.other.character-class.range.regexp',
+                match:
+                  '(?:.|(\\\\(?:[0-7]{3}|x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4}))|(\\\\c[A-Z])|(\\\\.))\\-(?:[^\\]\\\\]|(\\\\(?:[0-7]{3}|x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4}))|(\\\\c[A-Z])|(\\\\.))',
+                captures: {
+                  '1': {
+                    name: 'constant.character.numeric.regexp',
+                  },
+                  '2': {
+                    name: 'constant.character.control.regexp',
+                  },
+                  '3': {
+                    name: 'constant.character.escape.backslash.regexp',
+                  },
+                  '4': {
+                    name: 'constant.character.numeric.regexp',
+                  },
+                  '5': {
+                    name: 'constant.character.control.regexp',
+                  },
+                  '6': {
+                    name: 'constant.character.escape.backslash.regexp',
+                  },
+                },
+              },
+              {
+                include: '#regex-character-class',
+              },
+            ],
+          },
+          {
+            include: '#regex-character-class',
+          },
+        ],
+      },
+      'regex-character-class': {
+        patterns: [
+          {
+            name: 'constant.other.character-class.regexp',
+            match: '\\\\[wWsSdDtrnvf]|\\.',
+          },
+          {
+            name: 'constant.character.numeric.regexp',
+            match: '\\\\([0-7]{3}|x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4})',
+          },
+          {
+            name: 'constant.character.control.regexp',
+            match: '\\\\c[A-Z]',
+          },
+          {
+            name: 'constant.character.escape.backslash.regexp',
+            match: '\\\\.',
+          },
+        ],
+      },
+      comment: {
+        patterns: [
+          {
+            name: 'comment.block.documentation.js',
+            begin: '/\\*\\*(?!/)',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.comment.js',
+              },
+            },
+            end: '\\*/',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.comment.js',
+              },
+            },
+            patterns: [
+              {
+                include: '#docblock',
+              },
+            ],
+          },
+          {
+            name: 'comment.block.js',
+            begin: '(/\\*)(?:\\s*((@)internal)(?=\\s|(\\*/)))?',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.comment.js',
+              },
+              '2': {
+                name: 'storage.type.internaldeclaration.js',
+              },
+              '3': {
+                name: 'punctuation.decorator.internaldeclaration.js',
+              },
+            },
+            end: '\\*/',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.comment.js',
+              },
+            },
+          },
+          {
+            begin: '(^[ \\t]+)?((//)(?:\\s*((@)internal)(?=\\s|$))?)',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.whitespace.comment.leading.js',
+              },
+              '2': {
+                name: 'comment.line.double-slash.js',
+              },
+              '3': {
+                name: 'punctuation.definition.comment.js',
+              },
+              '4': {
+                name: 'storage.type.internaldeclaration.js',
+              },
+              '5': {
+                name: 'punctuation.decorator.internaldeclaration.js',
+              },
+            },
+            end: '(?=$)',
+            contentName: 'comment.line.double-slash.js',
+          },
+        ],
+      },
+      'single-line-comment-consuming-line-ending': {
+        begin: '(^[ \\t]+)?((//)(?:\\s*((@)internal)(?=\\s|$))?)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.whitespace.comment.leading.js',
+          },
+          '2': {
+            name: 'comment.line.double-slash.js',
+          },
+          '3': {
+            name: 'punctuation.definition.comment.js',
+          },
+          '4': {
+            name: 'storage.type.internaldeclaration.js',
+          },
+          '5': {
+            name: 'punctuation.decorator.internaldeclaration.js',
+          },
+        },
+        end: '(?=^)',
+        contentName: 'comment.line.double-slash.js',
+      },
+      directives: {
+        name: 'comment.line.triple-slash.directive.js',
+        begin:
+          '^(///)\\s*(?=<(reference|amd-dependency|amd-module)(\\s+(path|types|no-default-lib|lib|name|resolution-mode)\\s*=\\s*((\\\'([^\\\'\\\\]|\\\\.)*\\\')|(\\"([^\\"\\\\]|\\\\.)*\\")|(\\`([^\\`\\\\]|\\\\.)*\\`)))+\\s*/>\\s*$)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.definition.comment.js',
+          },
+        },
+        end: '(?=$)',
+        patterns: [
+          {
+            name: 'meta.tag.js',
+            begin: '(<)(reference|amd-dependency|amd-module)',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.tag.directive.js',
+              },
+              '2': {
+                name: 'entity.name.tag.directive.js',
+              },
+            },
+            end: '/>',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.tag.directive.js',
+              },
+            },
+            patterns: [
+              {
+                name: 'entity.other.attribute-name.directive.js',
+                match: 'path|types|no-default-lib|lib|name|resolution-mode',
+              },
+              {
+                name: 'keyword.operator.assignment.js',
+                match: '=',
+              },
+              {
+                include: '#string',
+              },
+            ],
+          },
+        ],
+      },
+      docblock: {
+        patterns: [
+          {
+            match: '(?x)\n((@)(?:access|api))\n\\s+\n(private|protected|public)\n\\b',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'constant.language.access-type.jsdoc',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)\n((@)author)\n\\s+\n(\n  [^@\\s<>*/]\n  (?:[^@<>*/]|\\*[^/])*\n)\n(?:\n  \\s*\n  (<)\n  ([^>\\s]+)\n  (>)\n)?',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+              '4': {
+                name: 'punctuation.definition.bracket.angle.begin.jsdoc',
+              },
+              '5': {
+                name: 'constant.other.email.link.underline.jsdoc',
+              },
+              '6': {
+                name: 'punctuation.definition.bracket.angle.end.jsdoc',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)\n((@)borrows) \\s+\n((?:[^@\\s*/]|\\*[^/])+)    # <that namepath>\n\\s+ (as) \\s+              # as\n((?:[^@\\s*/]|\\*[^/])+)    # <this namepath>',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+              '4': {
+                name: 'keyword.operator.control.jsdoc',
+              },
+              '5': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+            },
+          },
+          {
+            name: 'meta.example.jsdoc',
+            begin: '((@)example)\\s+',
+            end: '(?=@|\\*/)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+            patterns: [
+              {
+                match: '^\\s\\*\\s+',
+              },
+              {
+                contentName: 'constant.other.description.jsdoc',
+                begin: '\\G(<)caption(>)',
+                beginCaptures: {
+                  '0': {
+                    name: 'entity.name.tag.inline.jsdoc',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.bracket.angle.begin.jsdoc',
+                  },
+                  '2': {
+                    name: 'punctuation.definition.bracket.angle.end.jsdoc',
+                  },
+                },
+                end: '(</)caption(>)|(?=\\*/)',
+                endCaptures: {
+                  '0': {
+                    name: 'entity.name.tag.inline.jsdoc',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.bracket.angle.begin.jsdoc',
+                  },
+                  '2': {
+                    name: 'punctuation.definition.bracket.angle.end.jsdoc',
+                  },
+                },
+              },
+              {
+                match: '[^\\s@*](?:[^*]|\\*[^/])*',
+                captures: {
+                  '0': {
+                    name: 'source.embedded.js',
+                  },
+                },
+              },
+            ],
+          },
+          {
+            match:
+              '(?x) ((@)kind) \\s+ (class|constant|event|external|file|function|member|mixin|module|namespace|typedef) \\b',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'constant.language.symbol-type.jsdoc',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)\n((@)see)\n\\s+\n(?:\n  # URL\n  (\n    (?=https?://)\n    (?:[^\\s*]|\\*[^/])+\n  )\n  |\n  # JSDoc namepath\n  (\n    (?!\n      # Avoid matching bare URIs (also acceptable as links)\n      https?://\n      |\n      # Avoid matching {@inline tags}; we match those below\n      (?:\\[[^\\[\\]]*\\])? # Possible description [preceding]{@tag}\n      {@(?:link|linkcode|linkplain|tutorial)\\b\n    )\n    # Matched namepath\n    (?:[^@\\s*/]|\\*[^/])+\n  )\n)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'variable.other.link.underline.jsdoc',
+              },
+              '4': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+            },
+          },
+          {
+            match:
+              '(?x)\n((@)template)\n\\s+\n# One or more valid identifiers\n(\n  [A-Za-z_$]         # First character: non-numeric word character\n  [\\w$.\\[\\]]*        # Rest of identifier\n  (?:                # Possible list of additional identifiers\n    \\s* , \\s*\n    [A-Za-z_$]\n    [\\w$.\\[\\]]*\n  )*\n)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'variable.other.jsdoc',
+              },
+            },
+          },
+          {
+            begin: '(?x)((@)template)\\s+(?={)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+            end: '(?=\\s|\\*/|[^{}\\[\\]A-Za-z_$])',
+            patterns: [
+              {
+                include: '#jsdoctype',
+              },
+              {
+                name: 'variable.other.jsdoc',
+                match: '([A-Za-z_$][\\w$.\\[\\]]*)',
+              },
+            ],
+          },
+          {
+            match:
+              '(?x)\n(\n  (@)\n  (?:arg|argument|const|constant|member|namespace|param|var)\n)\n\\s+\n(\n  [A-Za-z_$]\n  [\\w$.\\[\\]]*\n)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'variable.other.jsdoc',
+              },
+            },
+          },
+          {
+            begin: '((@)typedef)\\s+(?={)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+            end: '(?=\\s|\\*/|[^{}\\[\\]A-Za-z_$])',
+            patterns: [
+              {
+                include: '#jsdoctype',
+              },
+              {
+                name: 'entity.name.type.instance.jsdoc',
+                match: '(?:[^@\\s*/]|\\*[^/])+',
+              },
+            ],
+          },
+          {
+            begin:
+              '((@)(?:arg|argument|const|constant|member|namespace|param|prop|property|var))\\s+(?={)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+            end: '(?=\\s|\\*/|[^{}\\[\\]A-Za-z_$])',
+            patterns: [
+              {
+                include: '#jsdoctype',
+              },
+              {
+                name: 'variable.other.jsdoc',
+                match: '([A-Za-z_$][\\w$.\\[\\]]*)',
+              },
+              {
+                name: 'variable.other.jsdoc',
+                match:
+                  '(?x)\n(\\[)\\s*\n[\\w$]+\n(?:\n  (?:\\[\\])?                                        # Foo[ ].bar properties within an array\n  \\.                                                # Foo.Bar namespaced parameter\n  [\\w$]+\n)*\n(?:\n  \\s*\n  (=)                                                # [foo=bar] Default parameter value\n  \\s*\n  (\n    # The inner regexes are to stop the match early at */ and to not stop at escaped quotes\n    (?>\n      "(?:(?:\\*(?!/))|(?:\\\\(?!"))|[^*\\\\])*?" |                      # [foo="bar"] Double-quoted\n      \'(?:(?:\\*(?!/))|(?:\\\\(?!\'))|[^*\\\\])*?\' |                      # [foo=\'bar\'] Single-quoted\n      \\[ (?:(?:\\*(?!/))|[^*])*? \\] |                                # [foo=[1,2]] Array literal\n      (?:(?:\\*(?!/))|\\s(?!\\s*\\])|\\[.*?(?:\\]|(?=\\*/))|[^*\\s\\[\\]])*   # Everything else\n    )*\n  )\n)?\n\\s*(?:(\\])((?:[^*\\s]|\\*[^\\s/])+)?|(?=\\*/))',
+                captures: {
+                  '1': {
+                    name: 'punctuation.definition.optional-value.begin.bracket.square.jsdoc',
+                  },
+                  '2': {
+                    name: 'keyword.operator.assignment.jsdoc',
+                  },
+                  '3': {
+                    name: 'source.embedded.js',
+                  },
+                  '4': {
+                    name: 'punctuation.definition.optional-value.end.bracket.square.jsdoc',
+                  },
+                  '5': {
+                    name: 'invalid.illegal.syntax.jsdoc',
+                  },
+                },
+              },
+            ],
+          },
+          {
+            begin:
+              '(?x)\n(\n  (@)\n  (?:define|enum|exception|export|extends|lends|implements|modifies\n  |namespace|private|protected|returns?|satisfies|suppress|this|throws|type\n  |yields?)\n)\n\\s+(?={)',
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+            end: '(?=\\s|\\*/|[^{}\\[\\]A-Za-z_$])',
+            patterns: [
+              {
+                include: '#jsdoctype',
+              },
+            ],
+          },
+          {
+            match:
+              '(?x)\n(\n  (@)\n  (?:alias|augments|callback|constructs|emits|event|fires|exports?\n  |extends|external|function|func|host|lends|listens|interface|memberof!?\n  |method|module|mixes|mixin|name|requires|see|this|typedef|uses)\n)\n\\s+\n(\n  (?:\n    [^{}@\\s*] | \\*[^/]\n  )+\n)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+            },
+          },
+          {
+            contentName: 'variable.other.jsdoc',
+            begin: "((@)(?:default(?:value)?|license|version))\\s+(([''\"]))",
+            beginCaptures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'variable.other.jsdoc',
+              },
+              '4': {
+                name: 'punctuation.definition.string.begin.jsdoc',
+              },
+            },
+            end: '(\\3)|(?=$|\\*/)',
+            endCaptures: {
+              '0': {
+                name: 'variable.other.jsdoc',
+              },
+              '1': {
+                name: 'punctuation.definition.string.end.jsdoc',
+              },
+            },
+          },
+          {
+            match: '((@)(?:default(?:value)?|license|tutorial|variation|version))\\s+([^\\s*]+)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+              '3': {
+                name: 'variable.other.jsdoc',
+              },
+            },
+          },
+          {
+            name: 'storage.type.class.jsdoc',
+            match:
+              '(?x) (@) (?:abstract|access|alias|api|arg|argument|async|attribute|augments|author|beta|borrows|bubbles |callback|chainable|class|classdesc|code|config|const|constant|constructor|constructs|copyright |default|defaultvalue|define|deprecated|desc|description|dict|emits|enum|event|example|exception |exports?|extends|extension(?:_?for)?|external|externs|file|fileoverview|final|fires|for|func |function|generator|global|hideconstructor|host|ignore|implements|implicitCast|inherit[Dd]oc |inner|instance|interface|internal|kind|lends|license|listens|main|member|memberof!?|method |mixes|mixins?|modifies|module|name|namespace|noalias|nocollapse|nocompile|nosideeffects |override|overview|package|param|polymer(?:Behavior)?|preserve|private|prop|property|protected |public|read[Oo]nly|record|require[ds]|returns?|see|since|static|struct|submodule|summary |suppress|template|this|throws|todo|tutorial|type|typedef|unrestricted|uses|var|variation |version|virtual|writeOnce|yields?) \\b',
+            captures: {
+              '1': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+          },
+          {
+            include: '#inline-tags',
+          },
+          {
+            match: '((@)(?:[_$[:alpha:]][_$[:alnum:]]*))(?=\\s+)',
+            captures: {
+              '1': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.block.tag.jsdoc',
+              },
+            },
+          },
+        ],
+      },
+      brackets: {
+        patterns: [
+          {
+            begin: '{',
+            end: '}|(?=\\*/)',
+            patterns: [
+              {
+                include: '#brackets',
+              },
+            ],
+          },
+          {
+            begin: '\\[',
+            end: '\\]|(?=\\*/)',
+            patterns: [
+              {
+                include: '#brackets',
+              },
+            ],
+          },
+        ],
+      },
+      'inline-tags': {
+        patterns: [
+          {
+            name: 'constant.other.description.jsdoc',
+            match: '(\\[)[^\\]]+(\\])(?={@(?:link|linkcode|linkplain|tutorial))',
+            captures: {
+              '1': {
+                name: 'punctuation.definition.bracket.square.begin.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.bracket.square.end.jsdoc',
+              },
+            },
+          },
+          {
+            name: 'entity.name.type.instance.jsdoc',
+            begin: '({)((@)(?:link(?:code|plain)?|tutorial))\\s*',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.bracket.curly.begin.jsdoc',
+              },
+              '2': {
+                name: 'storage.type.class.jsdoc',
+              },
+              '3': {
+                name: 'punctuation.definition.inline.tag.jsdoc',
+              },
+            },
+            end: '}|(?=\\*/)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.bracket.curly.end.jsdoc',
+              },
+            },
+            patterns: [
+              {
+                match: '\\G((?=https?://)(?:[^|}\\s*]|\\*[/])+)(\\|)?',
+                captures: {
+                  '1': {
+                    name: 'variable.other.link.underline.jsdoc',
+                  },
+                  '2': {
+                    name: 'punctuation.separator.pipe.jsdoc',
+                  },
+                },
+              },
+              {
+                match: '\\G((?:[^{}@\\s|*]|\\*[^/])+)(\\|)?',
+                captures: {
+                  '1': {
+                    name: 'variable.other.description.jsdoc',
+                  },
+                  '2': {
+                    name: 'punctuation.separator.pipe.jsdoc',
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+      jsdoctype: {
+        patterns: [
+          {
+            contentName: 'entity.name.type.instance.jsdoc',
+            begin: '\\G({)',
+            beginCaptures: {
+              '0': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+              '1': {
+                name: 'punctuation.definition.bracket.curly.begin.jsdoc',
+              },
+            },
+            end: '((}))\\s*|(?=\\*/)',
+            endCaptures: {
+              '1': {
+                name: 'entity.name.type.instance.jsdoc',
+              },
+              '2': {
+                name: 'punctuation.definition.bracket.curly.end.jsdoc',
+              },
+            },
+            patterns: [
+              {
+                include: '#brackets',
+              },
+            ],
+          },
+        ],
+      },
+      jsx: {
+        patterns: [
+          {
+            include: '#jsx-tag-style',
+          },
+          {
+            include: '#jsx-tag-without-attributes',
+          },
+          {
+            include: '#jsx-tag',
+          },
+        ],
+      },
+      'jsx-tag-without-attributes-in-expression': {
+        begin:
+          '(?<!\\+\\+|--)(?<=[({\\[,?=>:*]|&&|\\|\\||\\?|\\*\\/|^await|[^\\._$[:alnum:]]await|^return|[^\\._$[:alnum:]]return|^default|[^\\._$[:alnum:]]default|^yield|[^\\._$[:alnum:]]yield|^)\\s*(?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>))',
+        end: '(?!(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>))',
+        patterns: [
+          {
+            include: '#jsx-tag-without-attributes',
+          },
+        ],
+      },
+      'jsx-tag-without-attributes': {
+        name: 'meta.tag.without-attributes.js',
+        begin:
+          '(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>)',
+        end: '(</)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.definition.tag.begin.js',
+          },
+          '2': {
+            name: 'entity.name.tag.namespace.js',
+          },
+          '3': {
+            name: 'punctuation.separator.namespace.js',
+          },
+          '4': {
+            name: 'entity.name.tag.js',
+          },
+          '5': {
+            name: 'support.class.component.js',
+          },
+          '6': {
+            name: 'punctuation.definition.tag.end.js',
+          },
+        },
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.tag.begin.js',
+          },
+          '2': {
+            name: 'entity.name.tag.namespace.js',
+          },
+          '3': {
+            name: 'punctuation.separator.namespace.js',
+          },
+          '4': {
+            name: 'entity.name.tag.js',
+          },
+          '5': {
+            name: 'support.class.component.js',
+          },
+          '6': {
+            name: 'punctuation.definition.tag.end.js',
+          },
+        },
+        contentName: 'meta.jsx.children.js',
+        patterns: [
+          {
+            include: '#jsx-children',
+          },
+        ],
+      },
+      'jsx-tag-in-expression': {
+        begin:
+          '(?x)\n  (?<!\\+\\+|--)(?<=[({\\[,?=>:*]|&&|\\|\\||\\?|\\*\\/|^await|[^\\._$[:alnum:]]await|^return|[^\\._$[:alnum:]]return|^default|[^\\._$[:alnum:]]default|^yield|[^\\._$[:alnum:]]yield|^)\\s*\n  (?!<\\s*[_$[:alpha:]][_$[:alnum:]]*((\\s+extends\\s+[^=>])|,)) # look ahead is not type parameter of arrow\n  (?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
+        end: '(?!(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
+        patterns: [
+          {
+            include: '#jsx-tag',
+          },
+        ],
+      },
+      'jsx-tag-style': {
+        name: 'style.tag.js',
+        begin: '(<)\\s*(style)\\b(?![^>]*/>)(?=[^>]*>)',
+        beginCaptures: {
+          '1': {
+            name: 'punctuation.definition.tag.begin.js',
+          },
+          '2': {
+            name: 'entity.name.tag.js',
+          },
+        },
+        end: '(</)(style)(>)',
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.tag.begin.js',
+          },
+          '2': {
+            name: 'entity.name.tag.js',
+          },
+          '3': {
+            name: 'punctuation.definition.tag.end.js',
+          },
+        },
+        patterns: [
+          {
+            begin: '(>)',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.tag.end.js',
+              },
+            },
+            end: '(?=</style>)',
+            contentName: 'source.css',
+            patterns: [
+              {
+                include: 'source.css',
+              },
+            ],
+          },
+          {
+            begin: '(?<=<style)(?![^>]*/>)',
+            end: '(?=>)',
+            patterns: [
+              {
+                include: '#jsx-tag-attributes',
+              },
+            ],
+          },
+        ],
+      },
+      'jsx-tag': {
+        name: 'meta.tag.js',
+        begin:
+          '(?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
+        end: '(/>)|(?:(</)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>))',
+        endCaptures: {
+          '1': {
+            name: 'punctuation.definition.tag.end.js',
+          },
+          '2': {
+            name: 'punctuation.definition.tag.begin.js',
+          },
+          '3': {
+            name: 'entity.name.tag.namespace.js',
+          },
+          '4': {
+            name: 'punctuation.separator.namespace.js',
+          },
+          '5': {
+            name: 'entity.name.tag.js',
+          },
+          '6': {
+            name: 'support.class.component.js',
+          },
+          '7': {
+            name: 'punctuation.definition.tag.end.js',
+          },
+        },
+        patterns: [
+          {
+            begin:
+              '(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>)',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.tag.begin.js',
+              },
+              '2': {
+                name: 'entity.name.tag.namespace.js',
+              },
+              '3': {
+                name: 'punctuation.separator.namespace.js',
+              },
+              '4': {
+                name: 'entity.name.tag.js',
+              },
+              '5': {
+                name: 'support.class.component.js',
+              },
+            },
+            end: '(?=[/]?>)',
+            patterns: [
+              {
+                include: '#comment',
+              },
+              {
+                include: '#type-arguments',
+              },
+              {
+                include: '#jsx-tag-attributes',
+              },
+            ],
+          },
+          {
+            begin: '(>)',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.definition.tag.end.js',
+              },
+            },
+            end: '(?=</)',
+            contentName: 'meta.jsx.children.js',
+            patterns: [
+              {
+                include: '#jsx-children',
+              },
+            ],
+          },
+        ],
+      },
+      'jsx-children': {
+        patterns: [
+          {
+            include: '#jsx-evaluated-code',
+          },
+          {
+            include: '#jsx-tag-style',
+          },
+          {
+            include: '#jsx-children-statements',
+          },
+          {
+            include: '#jsx-tag-without-attributes',
+          },
+          {
+            include: '#jsx-tag',
+          },
+          {
+            include: '#jsx-entities',
+          },
+        ],
+      },
+      'jsx-children-statements': {
+        patterns: [
+          {
+            begin: '(?=\\w|\\$|//|/\\*)',
+            end: '(?=<[a-zA-Z]|</)',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.section.embedded.begin.ripple-js',
+              },
+            },
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.embedded.end.ripple-js',
+              },
+            },
+            contentName: 'source.js.embedded.ripple-isolated',
+            patterns: [
+              {
+                include: '#component-statements',
+              },
+            ],
+          },
+        ],
+      },
+      'jsx-evaluated-code': {
+        contentName: 'meta.embedded.expression.js source.js.embedded.ripple',
+        begin: '\\{',
+        end: '\\}',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.section.embedded.begin.js',
+          },
+        },
+        endCaptures: {
+          '0': {
+            name: 'punctuation.section.embedded.end.js',
+          },
+        },
+        patterns: [
+          {
+            match: '(\\@use)\\b\\s*',
+            captures: {
+              '1': {
+                name: 'storage.modifier.js',
+              },
+            },
+          },
+          {
+            include: '#expression',
+          },
+        ],
+      },
+      'jsx-entities': {
+        patterns: [
+          {
+            name: 'constant.character.entity.js',
+            match: '(&)([a-zA-Z0-9]+|#[0-9]+|#x[0-9a-fA-F]+)(;)',
+            captures: {
+              '1': {
+                name: 'punctuation.definition.entity.js',
+              },
+              '3': {
+                name: 'punctuation.definition.entity.js',
+              },
+            },
+          },
+        ],
+      },
+      'jsx-tag-attributes': {
+        name: 'meta.tag.attributes.js',
+        begin: '\\s+',
+        end: '(?=[/]?>)',
+        patterns: [
+          {
+            include: '#comment',
+          },
+          {
+            include: '#jsx-tag-attribute-name',
+          },
+          {
+            include: '#jsx-tag-attribute-assignment',
+          },
+          {
+            include: '#jsx-string-double-quoted',
+          },
+          {
+            include: '#jsx-string-single-quoted',
+          },
+          {
+            include: '#jsx-evaluated-code',
+          },
+          {
+            include: '#jsx-tag-attributes-illegal',
+          },
+        ],
+      },
+      'jsx-tag-attribute-name': {
+        match:
+          '(?x)\n  \\s*\n  (?:([_$[:alpha:]][-_$[:alnum:].]*)(:))?\n  ([_$[:alpha:]][-_$[:alnum:]]*)\n  (?=\\s|=|/?>|/\\*|//)',
+        captures: {
+          '1': {
+            name: 'entity.other.attribute-name.namespace.js',
+          },
+          '2': {
+            name: 'punctuation.separator.namespace.js',
+          },
+          '3': {
+            name: 'entity.other.attribute-name.js',
+          },
+        },
+      },
+      'jsx-tag-attribute-assignment': {
+        name: 'keyword.operator.assignment.js',
+        match: '=(?=\\s*(?:\'|"|{|/\\*|//|\\n))',
+      },
+      'jsx-string-double-quoted': {
+        name: 'string.quoted.double.js',
+        begin: '"',
+        end: '"',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.begin.js',
+          },
+        },
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#jsx-entities',
+          },
+        ],
+      },
+      'jsx-string-single-quoted': {
+        name: 'string.quoted.single.js',
+        begin: "'",
+        end: "'",
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.begin.js',
+          },
+        },
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.string.end.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#jsx-entities',
+          },
+        ],
+      },
+      'jsx-tag-attributes-illegal': {
+        name: 'invalid.illegal.attribute.js',
+        match: '\\S+',
+      },
+    },
+  },
+
+  config: {
+    // Note that this file should stay in sync with 'typescript-language-basics/language-configuration.json'
+    // onEnterRules cause errors - currently disabled
+    comments: {
+      lineComment: '//',
+      blockComment: ['/*', '*/'],
+    },
+    brackets: [
+      ['${', '}'],
+      ['{', '}'],
+      ['[', ']'],
+      ['(', ')'],
+    ],
+    autoClosingPairs: [
+      {
+        open: '{',
+        close: '}',
+      },
+      {
+        open: '[',
+        close: ']',
+      },
+      {
+        open: '(',
+        close: ')',
+      },
+      {
+        open: "'",
+        close: "'",
+        notIn: ['string', 'comment'],
+      },
+      {
+        open: '"',
+        close: '"',
+        notIn: ['string'],
+      },
+      {
+        open: '`',
+        close: '`',
+        notIn: ['string', 'comment'],
+      },
+      {
+        open: '/**',
+        close: ' */',
+        notIn: ['string'],
+      },
+    ],
+    surroundingPairs: [
+      ['{', '}'],
+      ['[', ']'],
+      ['(', ')'],
+      ["'", "'"],
+      ['"', '"'],
+      ['`', '`'],
+      ['<', '>'],
+    ],
+    autoCloseBefore: ';:.,=}])>` \n\t',
+    folding: {
+      markers: {
+        start: '^\\s*//\\s*#?region\\b',
+        end: '^\\s*//\\s*#?endregion\\b',
+      },
+    },
+    wordPattern: {
+      pattern:
+        '(-?\\d*\\.\\d\\w*)|([^\\`\\~\\@\\!\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\\'\\"\\,\\.\\<\\>/\\?\\s]+)',
+    },
+    indentationRules: {
+      decreaseIndentPattern: {
+        pattern: '^\\s*[\\}\\]\\)].*$',
+      },
+      increaseIndentPattern: {
+        pattern: '^.*(\\{[^}]*|\\([^)]*|\\[[^\\]]*)$',
+      },
+      // e.g.  * ...| or */| or *-----*/|
+      unIndentedLinePattern: {
+        pattern:
+          '^(\\t|[ ])*[ ]\\*[^/]*\\*/\\s*$|^(\\t|[ ])*[ ]\\*/\\s*$|^(\\t|[ ])*[ ]\\*([ ]([^\\*]|\\*(?!/))*)?$',
+      },
+      indentNextLinePattern: {
+        pattern: '^((.*=>\\s*)|((.*[^\\w]+|\\s*)(if|while|for)\\s*\\(.*\\)\\s*))$',
+      },
+    },
+    // onEnterRules: [
+    //   {
+    //     // e.g. /** | */
+    //     beforeText: {
+    //       pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
+    //     },
+    //     afterText: {
+    //       pattern: '^\\s*\\*/$',
+    //     },
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: ' * ',
+    //     },
+    //   },
+    //   {
+    //     // e.g. /** ...|
+    //     beforeText: {
+    //       pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       appendText: ' * ',
+    //     },
+    //   },
+    //   {
+    //     // e.g.  * ...|
+    //     beforeText: {
+    //       pattern: '^(\\t|[ ])*[ ]\\*([ ]([^\\*]|\\*(?!/))*)?$',
+    //     },
+    //     previousLineText: {
+    //       pattern: '(?=^(\\s*(/\\*\\*|\\*)).*)(?=(?!(\\s*\\*/)))',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       appendText: '* ',
+    //     },
+    //   },
+    //   {
+    //     // e.g.  */|
+    //     beforeText: {
+    //       pattern: '^(\\t|[ ])*[ ]\\*/\\s*$',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       removeText: 1,
+    //     },
+    //   },
+    //   {
+    //     // e.g.  *-----*/|
+    //     beforeText: {
+    //       pattern: '^(\\t|[ ])*[ ]\\*[^/]*\\*/\\s*$',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       removeText: 1,
+    //     },
+    //   },
+    //   {
+    //     beforeText: {
+    //       pattern: '^\\s*(\\bcase\\s.+:|\\bdefault:)$',
+    //     },
+    //     afterText: {
+    //       pattern: '^(?!\\s*(\\bcase\\b|\\bdefault\\b))',
+    //     },
+    //     action: {
+    //       indent: 'indent',
+    //     },
+    //   },
+    //   {
+    //     // Decrease indentation after single line if/else if/else, for, or while
+    //     previousLineText: '^\\s*(((else ?)?if|for|while)\\s*\\(.*\\)\\s*|else\\s*)$',
+    //     // But make sure line doesn't have braces or is not another if statement
+    //     beforeText: '^\\s+([^{i\\s]|i(?!f\\b))',
+    //     action: {
+    //       indent: 'outdent',
+    //     },
+    //   },
+    //   // Indent when pressing enter from inside ()
+    //   {
+    //     beforeText: '^.*\\([^\\)]*$',
+    //     afterText: '^\\s*\\).*$',
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: '\t',
+    //     },
+    //   },
+    //   // Indent when pressing enter from inside {}
+    //   {
+    //     beforeText: '^.*\\{[^\\}]*$',
+    //     afterText: '^\\s*\\}.*$',
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: '\t',
+    //     },
+    //   },
+    //   // Indent when pressing enter from inside []
+    //   {
+    //     beforeText: '^.*\\[[^\\]]*$',
+    //     afterText: '^\\s*\\].*$',
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: '\t',
+    //     },
+    //   },
+    //   // Add // when pressing enter from inside line comment
+    //   {
+    //     beforeText: {
+    //       pattern: '(?<!\\w:)//.*',
+    //     },
+    //     afterText: {
+    //       pattern: '^(?!\\s*$).+',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       appendText: '// ',
+    //     },
+    //   },
+    // ],
+  },
+};
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 1442c170dc..be20661a07 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -22,9 +22,13 @@ import {
   codeiumProviderUrl,
   emmetMonacoUrl,
   monacoBaseUrl,
+  monacoEditorTextmateUrl,
   monacoEmacsUrl,
+  monacoTextmateUrl,
   monacoVimUrl,
   monacoVolarUrl,
+  onigasmUrl,
+  onigasmWasmUrl,
   vendorsBaseUrl,
 } from '../../vendors';
 import { getEditorTheme } from '../themes';
@@ -253,6 +257,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     astro: baseUrl + '{{hash:monaco-lang-astro.js}}',
     clio: baseUrl + '{{hash:monaco-lang-clio.js}}',
     imba: baseUrl + '{{hash:monaco-lang-imba.js}}',
+    ripple: baseUrl + '{{hash:monaco-lang-ripple.js}}',
     // sql: baseUrl + '{{hash:monaco-lang-sql.js}}', // TODO: add autocomplete
     wat: baseUrl + '{{hash:monaco-lang-wat.js}}',
   };
@@ -260,6 +265,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   interface CustomLanguageDefinition {
     config?: Monaco.languages.LanguageConfiguration;
     tokens?: Monaco.languages.IMonarchLanguage;
+    syntax?: Record<string, unknown>;
   }
 
   const addVueSupport = async () => {
@@ -274,6 +280,46 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     setTheme(currentTheme, currentEditorTheme);
   };
 
+  async function registerFromTextMate({
+    name,
+    scopeName,
+    syntax,
+  }: {
+    name: string;
+    scopeName: string;
+    syntax: string;
+  }) {
+    await addVueSupport(); // a workaround for TextMate syntax
+
+    const { loadWASM } = await import(onigasmUrl);
+    const { Registry } = await import(monacoTextmateUrl);
+    const { wireTmGrammars } = await import(monacoEditorTextmateUrl);
+
+    await loadWASM(onigasmWasmUrl);
+
+    const registry = new Registry({
+      getGrammarDefinition: async (_scopeName: string) => {
+        return {
+          format: 'json',
+          content: syntax,
+        };
+      },
+    });
+
+    const grammars = new Map();
+    grammars.set(name, scopeName);
+    monaco.languages.register({ id: name });
+    await wireTmGrammars(monaco, registry, grammars, editor);
+  }
+
+  const addRippleSupport = async (syntax: CustomLanguageDefinition['syntax']) => {
+    await registerFromTextMate({
+      name: 'ripple',
+      scopeName: 'source.ripple',
+      syntax: JSON.stringify(syntax, null, 2).replace('"name": "Ripple"', '"name": "ripple"'),
+    });
+  };
+
   const loadMonacoLanguage = async (lang: Language) => {
     if (monacoMapLanguage(lang) === 'vue') {
       await addVueSupport();
@@ -289,6 +335,10 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       if (mod.tokens) {
         monaco.languages.setMonarchTokensProvider(lang, mod.tokens);
       }
+      if (lang === 'ripple') {
+        await addRippleSupport(mod.syntax);
+        return;
+      }
     }
   };
 
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 3f30bb9b43..8afe23152f 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -27,5 +27,4 @@ export const ripple: LanguageSpecs = {
   },
   extensions: ['ripple'],
   editor: 'script',
-  editorLanguage: 'typescript',
 };
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index b0207c7aee..0945e7f014 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -295,8 +295,12 @@ export const mjmlUrl = /* @__PURE__ */ getUrl('mjml-browser@4.15.3/lib/index.js'
 
 export const monacoBaseUrl = /* @__PURE__ */ getUrl('@live-codes/monaco-editor@0.3.0/');
 
+export const monacoEditorTextmateUrl = /* @__PURE__ */ getModuleUrl('monaco-editor-textmate@4.0.0');
+
 export const monacoEmacsUrl = /* @__PURE__ */ getUrl('monaco-emacs@0.3.0/dist/monaco-emacs.js');
 
+export const monacoTextmateUrl = /* @__PURE__ */ getModuleUrl('monaco-textmate@3.0.1');
+
 export const monacoThemesBaseUrl = /* @__PURE__ */ getUrl('monaco-themes@0.4.4/themes/');
 
 export const monacoVimUrl = /* @__PURE__ */ getUrl('monaco-vim@0.4.1/dist/monaco-vim.js');
@@ -315,6 +319,10 @@ export const normalizeCssUrl = /* @__PURE__ */ getUrl('normalize.css@8.0.1/norma
 
 export const nunjucksBaseUrl = /* @__PURE__ */ getUrl('nunjucks@3.2.4/browser/');
 
+export const onigasmUrl = /* @__PURE__ */ getModuleUrl('onigasm@2.2.5');
+
+export const onigasmWasmUrl = /* @__PURE__ */ getUrl('onigasm@2.2.5/lib/onigasm.wasm');
+
 export const opalBaseUrl = /* @__PURE__ */ getUrl('https://cdn.opalrb.com/opal/1.8.2/');
 
 export const parinferUrl = /* @__PURE__ */ getUrl('parinfer@3.13.1/parinfer.js');
@@ -389,7 +397,7 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.5/compiler');
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.6/compiler');
 
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 

From ce7fea3fd72fd2ebc3d8d4d6cc9f155af1e52d52 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:32 +0300
Subject: [PATCH 29/71] add support for CSS in Ripple components

---
 .../monaco/languages/monaco-lang-ripple.ts    | 1841 +++++++++++++++++
 src/livecodes/editor/monaco/monaco.ts         |   51 +-
 2 files changed, 1871 insertions(+), 21 deletions(-)

diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
index 392d2620d0..30aca96d4f 100644
--- a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
+++ b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
@@ -1,5 +1,6 @@
 // from https://github.com/trueadm/ripple/blob/main/packages/ripple-vscode-plugin/syntaxes/ripple.tmLanguage.json
 // and https://github.com/trueadm/ripple/blob/main/packages/ripple-vscode-plugin/language-configuration.json
+// and 'https://cdn.jsdelivr.net/gh/zikaari/monaco-textmate-languages@master/grammars/css/css.tmLanguage.json'
 export default {
   syntax: {
     information_for_contributors: [
@@ -6853,4 +6854,1844 @@ export default {
     //   },
     // ],
   },
+
+  cssSyntax: {
+    information_for_contributors: [
+      'This file has been converted from https://github.com/atom/language-css/blob/master/grammars/css.cson',
+      'If you want to provide a fix or improvement, please create a pull request against the original repository.',
+      'Once accepted there, we are happy to receive an update request.',
+    ],
+    version: 'https://github.com/atom/language-css/commit/2bc1e294e2440ad91197263cd9f95dc4b00bab2f',
+    name: 'CSS',
+    scopeName: 'source.css',
+    patterns: [
+      {
+        include: '#comment-block',
+      },
+      {
+        include: '#escapes',
+      },
+      {
+        include: '#combinators',
+      },
+      {
+        include: '#selector',
+      },
+      {
+        include: '#at-rules',
+      },
+      {
+        include: '#rule-list',
+      },
+    ],
+    repository: {
+      'at-rules': {
+        patterns: [
+          {
+            begin: '\\A(?:\\xEF\\xBB\\xBF)?(?i:(?=\\s*@charset\\b))',
+            end: ';|(?=$)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.terminator.rule.css',
+              },
+            },
+            name: 'meta.at-rule.charset.css',
+            patterns: [
+              {
+                captures: {
+                  '1': {
+                    name: 'invalid.illegal.not-lowercase.charset.css',
+                  },
+                  '2': {
+                    name: 'invalid.illegal.leading-whitespace.charset.css',
+                  },
+                  '3': {
+                    name: 'invalid.illegal.no-whitespace.charset.css',
+                  },
+                  '4': {
+                    name: 'invalid.illegal.whitespace.charset.css',
+                  },
+                  '5': {
+                    name: 'invalid.illegal.not-double-quoted.charset.css',
+                  },
+                  '6': {
+                    name: 'invalid.illegal.unclosed-string.charset.css',
+                  },
+                  '7': {
+                    name: 'invalid.illegal.unexpected-characters.charset.css',
+                  },
+                },
+                match:
+                  '(?x)        # Possible errors:\n\\G\n((?!@charset)@\\w+)   # Not lowercase (@charset is case-sensitive)\n|\n\\G(\\s+)             # Preceding whitespace\n|\n(@charset\\S[^;]*)    # No whitespace after @charset\n|\n(?<=@charset)         # Before quoted charset name\n(\\x20{2,}|\\t+)      # More than one space used, or a tab\n|\n(?<=@charset\\x20)    # Beginning of charset name\n([^";]+)              # Not double-quoted\n|\n("[^"]+$)             # Unclosed quote\n|\n(?<=")                # After charset name\n([^;]+)               # Unexpected junk instead of semicolon',
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'keyword.control.at-rule.charset.css',
+                  },
+                  '2': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                match: '((@)charset)(?=\\s)',
+              },
+              {
+                begin: '"',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.begin.css',
+                  },
+                },
+                end: '"|$',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.end.css',
+                  },
+                },
+                name: 'string.quoted.double.css',
+                patterns: [
+                  {
+                    begin: '(?:\\G|^)(?=(?:[^"])+$)',
+                    end: '$',
+                    name: 'invalid.illegal.unclosed.string.css',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)((@)import)(?:\\s+|$|(?=[\'"]|/\\*))',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.at-rule.import.css',
+              },
+              '2': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            end: ';',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.terminator.rule.css',
+              },
+            },
+            name: 'meta.at-rule.import.css',
+            patterns: [
+              {
+                begin: '\\G\\s*(?=/\\*)',
+                end: '(?<=\\*/)\\s*',
+                patterns: [
+                  {
+                    include: '#comment-block',
+                  },
+                ],
+              },
+              {
+                include: '#string',
+              },
+              {
+                include: '#url',
+              },
+              {
+                include: '#media-query-list',
+              },
+            ],
+          },
+          {
+            begin: '(?i)((@)font-face)(?=\\s*|{|/\\*|$)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.at-rule.font-face.css',
+              },
+              '2': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            end: '(?!\\G)',
+            name: 'meta.at-rule.font-face.css',
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#escapes',
+              },
+              {
+                include: '#rule-list',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(@)page(?=[\\s:{]|/\\*|$)',
+            captures: {
+              '0': {
+                name: 'keyword.control.at-rule.page.css',
+              },
+              '1': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            end: '(?=\\s*($|[:{;]))',
+            name: 'meta.at-rule.page.css',
+            patterns: [
+              {
+                include: '#rule-list',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?=@media(\\s|\\(|/\\*|$))',
+            end: '(?<=})(?!\\G)',
+            patterns: [
+              {
+                begin: '(?i)\\G(@)media',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.control.at-rule.media.css',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                end: '(?=\\s*[{;])',
+                name: 'meta.at-rule.media.header.css',
+                patterns: [
+                  {
+                    include: '#media-query-list',
+                  },
+                ],
+              },
+              {
+                begin: '{',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.section.media.begin.bracket.curly.css',
+                  },
+                },
+                end: '}',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.media.end.bracket.curly.css',
+                  },
+                },
+                name: 'meta.at-rule.media.body.css',
+                patterns: [
+                  {
+                    include: '$self',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?=@counter-style([\\s\'"{;]|/\\*|$))',
+            end: '(?<=})(?!\\G)',
+            patterns: [
+              {
+                begin: '(?i)\\G(@)counter-style',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.control.at-rule.counter-style.css',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                end: '(?=\\s*{)',
+                name: 'meta.at-rule.counter-style.header.css',
+                patterns: [
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    captures: {
+                      '0': {
+                        patterns: [
+                          {
+                            include: '#escapes',
+                          },
+                        ],
+                      },
+                    },
+                    match:
+                      '(?x)\n(?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier\n  |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*',
+                    name: 'variable.parameter.style-name.css',
+                  },
+                ],
+              },
+              {
+                begin: '{',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.section.property-list.begin.bracket.curly.css',
+                  },
+                },
+                end: '}',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.property-list.end.bracket.curly.css',
+                  },
+                },
+                name: 'meta.at-rule.counter-style.body.css',
+                patterns: [
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    include: '#rule-list-innards',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?=@document([\\s\'"{;]|/\\*|$))',
+            end: '(?<=})(?!\\G)',
+            patterns: [
+              {
+                begin: '(?i)\\G(@)document',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.control.at-rule.document.css',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                end: '(?=\\s*[{;])',
+                name: 'meta.at-rule.document.header.css',
+                patterns: [
+                  {
+                    begin: '(?i)(?<![\\w-])(url-prefix|domain|regexp)(\\()',
+                    beginCaptures: {
+                      '1': {
+                        name: 'support.function.document-rule.css',
+                      },
+                      '2': {
+                        name: 'punctuation.section.function.begin.bracket.round.css',
+                      },
+                    },
+                    end: '\\)',
+                    endCaptures: {
+                      '0': {
+                        name: 'punctuation.section.function.end.bracket.round.css',
+                      },
+                    },
+                    name: 'meta.function.document-rule.css',
+                    patterns: [
+                      {
+                        include: '#string',
+                      },
+                      {
+                        include: '#comment-block',
+                      },
+                      {
+                        include: '#escapes',
+                      },
+                      {
+                        match: '[^\'")\\s]+',
+                        name: 'variable.parameter.document-rule.css',
+                      },
+                    ],
+                  },
+                  {
+                    include: '#url',
+                  },
+                  {
+                    include: '#commas',
+                  },
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+              {
+                begin: '{',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.section.document.begin.bracket.curly.css',
+                  },
+                },
+                end: '}',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.document.end.bracket.curly.css',
+                  },
+                },
+                name: 'meta.at-rule.document.body.css',
+                patterns: [
+                  {
+                    include: '$self',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?=@(?:-(?:webkit|moz|o|ms)-)?keyframes([\\s\'"{;]|/\\*|$))',
+            end: '(?<=})(?!\\G)',
+            patterns: [
+              {
+                begin: '(?i)\\G(@)(?:-(?:webkit|moz|o|ms)-)?keyframes',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.control.at-rule.keyframes.css',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                end: '(?=\\s*{)',
+                name: 'meta.at-rule.keyframes.header.css',
+                patterns: [
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    captures: {
+                      '0': {
+                        patterns: [
+                          {
+                            include: '#escapes',
+                          },
+                        ],
+                      },
+                    },
+                    match:
+                      '(?x)\n(?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier\n  |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*',
+                    name: 'variable.parameter.keyframe-list.css',
+                  },
+                ],
+              },
+              {
+                begin: '{',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.section.keyframes.begin.bracket.curly.css',
+                  },
+                },
+                end: '}',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.keyframes.end.bracket.curly.css',
+                  },
+                },
+                name: 'meta.at-rule.keyframes.body.css',
+                patterns: [
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    captures: {
+                      '1': {
+                        name: 'entity.other.keyframe-offset.css',
+                      },
+                      '2': {
+                        name: 'entity.other.keyframe-offset.percentage.css',
+                      },
+                    },
+                    match:
+                      '(?xi)\n(?<![\\w-]) (from|to) (?![\\w-])         # Keywords for 0% | 100%\n|\n([-+]?(?:\\d+(?:\\.\\d+)?|\\.\\d+)%)     # Percentile value',
+                  },
+                  {
+                    include: '#rule-list',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?=@supports(\\s|\\(|/\\*|$))',
+            end: '(?<=})(?!\\G)|(?=;)',
+            patterns: [
+              {
+                begin: '(?i)\\G(@)supports',
+                beginCaptures: {
+                  '0': {
+                    name: 'keyword.control.at-rule.supports.css',
+                  },
+                  '1': {
+                    name: 'punctuation.definition.keyword.css',
+                  },
+                },
+                end: '(?=\\s*[{;])',
+                name: 'meta.at-rule.supports.header.css',
+                patterns: [
+                  {
+                    include: '#feature-query-operators',
+                  },
+                  {
+                    include: '#feature-query',
+                  },
+                  {
+                    include: '#comment-block',
+                  },
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+              {
+                begin: '{',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.section.supports.begin.bracket.curly.css',
+                  },
+                },
+                end: '}',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.supports.end.bracket.curly.css',
+                  },
+                },
+                name: 'meta.at-rule.supports.body.css',
+                patterns: [
+                  {
+                    include: '$self',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            begin: '(?i)((@)viewport)(?=[\\s\'"{;]|/\\*|$)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.at-rule.viewport.css',
+              },
+              '2': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            end: '(?=\\s*[@{;])',
+            name: 'meta.at-rule.viewport.css',
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#escapes',
+              },
+            ],
+          },
+          {
+            begin: '(?i)((@)font-feature-values)(?=[\\s\'"{;]|/\\*|$)\\s*',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.at-rule.font-feature-values.css',
+              },
+              '2': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            contentName: 'variable.parameter.font-name.css',
+            end: '(?=\\s*[@{;])',
+            name: 'meta.at-rule.font-features.css',
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#escapes',
+              },
+            ],
+          },
+          {
+            include: '#font-features',
+          },
+          {
+            begin: '(?i)((@)namespace)(?=[\\s\'";]|/\\*|$)',
+            beginCaptures: {
+              '1': {
+                name: 'keyword.control.at-rule.namespace.css',
+              },
+              '2': {
+                name: 'punctuation.definition.keyword.css',
+              },
+            },
+            end: ';|(?=[@{])',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.terminator.rule.css',
+              },
+            },
+            name: 'meta.at-rule.namespace.css',
+            patterns: [
+              {
+                include: '#url',
+              },
+              {
+                captures: {
+                  '1': {
+                    patterns: [
+                      {
+                        include: '#comment-block',
+                      },
+                    ],
+                  },
+                  '2': {
+                    name: 'entity.name.function.namespace-prefix.css',
+                    patterns: [
+                      {
+                        include: '#escapes',
+                      },
+                    ],
+                  },
+                },
+                match:
+                  '(?xi)\n(?:\\G|^|(?<=\\s))\n(?=\n  (?<=\\s|^)                             # Starts with whitespace\n  (?:[-a-zA-Z_]|[^\\x00-\\x7F])          # Then a valid identifier character\n  |\n  \\s*                                   # Possible adjoining whitespace\n  /\\*(?:[^*]|\\*[^/])*\\*/              # Injected comment\n)\n(.*?)                                    # Grouped to embed #comment-block\n(\n  (?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter\n  (?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier\n    |\\\\(?:[0-9a-fA-F]{1,6}|.)\n  )*\n)',
+              },
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#escapes',
+              },
+              {
+                include: '#string',
+              },
+            ],
+          },
+        ],
+      },
+      'color-keywords': {
+        patterns: [
+          {
+            match:
+              '(?i)(?<![\\w-])(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)(?![\\w-])',
+            name: 'support.constant.color.w3c-standard-color-name.css',
+          },
+          {
+            match:
+              '(?xi) (?<![\\w-])\n(aliceblue|antiquewhite|aquamarine|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood\n|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan\n|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange\n|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise\n|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen\n|gainsboro|ghostwhite|gold|goldenrod|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki\n|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow\n|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray\n|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|magenta|mediumaquamarine|mediumblue\n|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise\n|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olivedrab|orangered\n|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum\n|powderblue|rebeccapurple|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell\n|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato\n|transparent|turquoise|violet|wheat|whitesmoke|yellowgreen)\n(?![\\w-])',
+            name: 'support.constant.color.w3c-extended-color-name.css',
+          },
+          {
+            match: '(?i)(?<![\\w-])currentColor(?![\\w-])',
+            name: 'support.constant.color.current.css',
+          },
+          {
+            match:
+              '(?xi) (?<![\\w-])\n(ActiveBorder|ActiveCaption|AppWorkspace|Background|ButtonFace|ButtonHighlight|ButtonShadow\n|ButtonText|CaptionText|GrayText|Highlight|HighlightText|InactiveBorder|InactiveCaption\n|InactiveCaptionText|InfoBackground|InfoText|Menu|MenuText|Scrollbar|ThreeDDarkShadow\n|ThreeDFace|ThreeDHighlight|ThreeDLightShadow|ThreeDShadow|Window|WindowFrame|WindowText)\n(?![\\w-])',
+            name: 'invalid.deprecated.color.system.css',
+          },
+        ],
+      },
+      combinators: {
+        patterns: [
+          {
+            match: '/deep/|>>>',
+            name: 'invalid.deprecated.combinator.css',
+          },
+          {
+            match: '>>|>|\\+|~',
+            name: 'keyword.operator.combinator.css',
+          },
+        ],
+      },
+      commas: {
+        match: ',',
+        name: 'punctuation.separator.list.comma.css',
+      },
+      'comment-block': {
+        begin: '/\\*',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.comment.begin.css',
+          },
+        },
+        end: '\\*/',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.comment.end.css',
+          },
+        },
+        name: 'comment.block.css',
+      },
+      escapes: {
+        patterns: [
+          {
+            match: '\\\\[0-9a-fA-F]{1,6}',
+            name: 'constant.character.escape.codepoint.css',
+          },
+          {
+            begin: '\\\\$\\s*',
+            end: '^(?<!\\G)',
+            name: 'constant.character.escape.newline.css',
+          },
+          {
+            match: '\\\\.',
+            name: 'constant.character.escape.css',
+          },
+        ],
+      },
+      'feature-query': {
+        begin: '\\(',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.definition.condition.begin.bracket.round.css',
+          },
+        },
+        end: '\\)',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.condition.end.bracket.round.css',
+          },
+        },
+        name: 'meta.feature-query.css',
+        patterns: [
+          {
+            include: '#feature-query-operators',
+          },
+          {
+            include: '#feature-query',
+          },
+        ],
+      },
+      'feature-query-operators': {
+        patterns: [
+          {
+            match: '(?i)(?<=[\\s()]|^|\\*/)(and|not|or)(?=[\\s()]|/\\*|$)',
+            name: 'keyword.operator.logical.feature.$1.css',
+          },
+          {
+            include: '#rule-list-innards',
+          },
+        ],
+      },
+      'font-features': {
+        begin:
+          '(?xi)\n((@)(annotation|character-variant|ornaments|styleset|stylistic|swash))\n(?=[\\s@\'"{;]|/\\*|$)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.at-rule.${3:/downcase}.css',
+          },
+          '2': {
+            name: 'punctuation.definition.keyword.css',
+          },
+        },
+        end: '(?<=})',
+        name: 'meta.at-rule.${3:/downcase}.css',
+        patterns: [
+          {
+            begin: '{',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.section.property-list.begin.bracket.curly.css',
+              },
+            },
+            end: '}',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.property-list.end.bracket.curly.css',
+              },
+            },
+            name: 'meta.property-list.font-feature.css',
+            patterns: [
+              {
+                captures: {
+                  '0': {
+                    patterns: [
+                      {
+                        include: '#escapes',
+                      },
+                    ],
+                  },
+                },
+                match:
+                  '(?x)\n(?: [-a-zA-Z_]    | [^\\x00-\\x7F] )   # First letter\n(?: [-a-zA-Z0-9_] | [^\\x00-\\x7F]     # Remainder of identifier\n  | \\\\(?:[0-9a-fA-F]{1,6}|.)\n)*',
+                name: 'variable.font-feature.css',
+              },
+              {
+                include: '#rule-list-innards',
+              },
+            ],
+          },
+        ],
+      },
+      functions: {
+        patterns: [
+          {
+            begin: '(?i)(?<![\\w-])(calc)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.calc.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.calc.css',
+            patterns: [
+              {
+                match: '[*/]|(?<=\\s|^)[-+](?=\\s|$)',
+                name: 'keyword.operator.arithmetic.css',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?<![\\w-])(rgba?|hsla?)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.misc.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.color.css',
+            patterns: [
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin:
+              '(?xi) (?<![\\w-])\n(\n  (?:-webkit-|-moz-|-o-)?    # Accept prefixed/historical variants\n  (?:repeating-)?            # "Repeating"-type gradient\n  (?:linear|radial|conic)    # Shape\n  -gradient\n)\n(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.gradient.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.gradient.css',
+            patterns: [
+              {
+                match: '(?i)(?<![\\w-])(from|to|at)(?![\\w-])',
+                name: 'keyword.operator.gradient.css',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?<![\\w-])(-webkit-gradient)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'invalid.deprecated.gradient.function.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.gradient.invalid.deprecated.gradient.css',
+            patterns: [
+              {
+                begin: '(?i)(?<![\\w-])(from|to|color-stop)(\\()',
+                beginCaptures: {
+                  '1': {
+                    name: 'invalid.deprecated.function.css',
+                  },
+                  '2': {
+                    name: 'punctuation.section.function.begin.bracket.round.css',
+                  },
+                },
+                end: '\\)',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.section.function.end.bracket.round.css',
+                  },
+                },
+                patterns: [
+                  {
+                    include: '#property-values',
+                  },
+                ],
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin:
+              '(?xi) (?<![\\w-])\n(annotation|attr|blur|brightness|character-variant|contrast|counters?\n|cross-fade|drop-shadow|element|fit-content|format|grayscale|hue-rotate\n|image-set|invert|local|minmax|opacity|ornaments|repeat|saturate|sepia\n|styleset|stylistic|swash|symbols)\n(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.misc.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.misc.css',
+            patterns: [
+              {
+                match: '(?i)(?<=[,\\s"]|\\*/|^)\\d+x(?=[\\s,"\')]|/\\*|$)',
+                name: 'constant.numeric.other.density.css',
+              },
+              {
+                include: '#property-values',
+              },
+              {
+                match: '[^\'"),\\s]+',
+                name: 'variable.parameter.misc.css',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?<![\\w-])(circle|ellipse|inset|polygon|rect)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.shape.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.shape.css',
+            patterns: [
+              {
+                match: '(?i)(?<=\\s|^|\\*/)(at|round)(?=\\s|/\\*|$)',
+                name: 'keyword.operator.shape.css',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin: '(?i)(?<![\\w-])(cubic-bezier|steps)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.timing-function.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.timing-function.css',
+            patterns: [
+              {
+                match: '(?i)(?<![\\w-])(start|end)(?=\\s*\\)|$)',
+                name: 'support.constant.step-direction.css',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin:
+              '(?xi) (?<![\\w-])\n( (?:translate|scale|rotate)(?:[XYZ]|3D)?\n| matrix(?:3D)?\n| skew[XY]?\n| perspective\n)\n(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.transform.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            include: '#url',
+          },
+          {
+            begin: '(?i)(?<![\\w-])(var)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'support.function.misc.css',
+              },
+              '2': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            name: 'meta.function.variable.css',
+            patterns: [
+              {
+                name: 'variable.argument.css',
+                match:
+                  '(?x)\n--\n(?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier\n  |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+        ],
+      },
+      'functional-pseudo-classes': {
+        patterns: [
+          {
+            begin: '(?i)((:)dir)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'entity.other.attribute-name.pseudo-class.css',
+              },
+              '2': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '3': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#escapes',
+              },
+              {
+                match: '(?i)(?<![\\w-])(ltr|rtl)(?![\\w-])',
+                name: 'support.constant.text-direction.css',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            begin: '(?i)((:)lang)(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'entity.other.attribute-name.pseudo-class.css',
+              },
+              '2': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '3': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                match:
+                  '(?<=[(,\\s])[a-zA-Z]+(-[a-zA-Z0-9]*|\\\\(?:[0-9a-fA-F]{1,6}|.))*(?=[),\\s])',
+                name: 'support.constant.language-range.css',
+              },
+              {
+                begin: '"',
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.begin.css',
+                  },
+                },
+                end: '"',
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.end.css',
+                  },
+                },
+                name: 'string.quoted.double.css',
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    match: '(?<=["\\s])[a-zA-Z*]+(-[a-zA-Z0-9*]*)*(?=["\\s])',
+                    name: 'support.constant.language-range.css',
+                  },
+                ],
+              },
+              {
+                begin: "'",
+                beginCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.begin.css',
+                  },
+                },
+                end: "'",
+                endCaptures: {
+                  '0': {
+                    name: 'punctuation.definition.string.end.css',
+                  },
+                },
+                name: 'string.quoted.single.css',
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                  {
+                    match: "(?<=['\\s])[a-zA-Z*]+(-[a-zA-Z0-9*]*)*(?=['\\s])",
+                    name: 'support.constant.language-range.css',
+                  },
+                ],
+              },
+              {
+                include: '#commas',
+              },
+            ],
+          },
+          {
+            begin: '(?i)((:)(?:not|has|matches))(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'entity.other.attribute-name.pseudo-class.css',
+              },
+              '2': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '3': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                include: '#selector-innards',
+              },
+            ],
+          },
+          {
+            begin: '(?i)((:)nth-(?:last-)?(?:child|of-type))(\\()',
+            beginCaptures: {
+              '1': {
+                name: 'entity.other.attribute-name.pseudo-class.css',
+              },
+              '2': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '3': {
+                name: 'punctuation.section.function.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.section.function.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                match: '(?i)[+-]?(\\d+n?|n)(\\s*[+-]\\s*\\d+)?',
+                name: 'constant.numeric.css',
+              },
+              {
+                match: '(?i)even|odd',
+                name: 'support.constant.parity.css',
+              },
+            ],
+          },
+        ],
+      },
+      'media-features': {
+        captures: {
+          '1': {
+            name: 'support.type.property-name.media.css',
+          },
+          '2': {
+            name: 'invalid.deprecated.media.css',
+          },
+          '3': {
+            name: 'support.type.vendored.property-name.media.css',
+          },
+        },
+        match:
+          '(?xi)\n(?<=^|\\s|\\(|\\*/)           # Preceded by whitespace, bracket or comment\n(?:\n  # Standardised features\n  (\n    (?:min-|max-)?            # Range features\n    (?: height\n      | width\n      | aspect-ratio\n      | color\n      | color-index\n      | monochrome\n      | resolution\n    )\n    | grid                    # Discrete features\n    | scan\n    | orientation\n    | display-mode\n  )\n  |\n  # Deprecated features\n  (\n    (?:min-|max-)?            # Deprecated in Media Queries 4\n    device-\n    (?: height\n      | width\n      | aspect-ratio\n    )\n  )\n  |\n  # Vendor extensions\n  (\n    (?:\n      # Spec-compliant syntax\n      [-_]\n      (?: webkit              # Webkit/Blink\n        | apple|khtml         # Webkit aliases\n        | epub                # ePub3\n        | moz                 # Gecko\n        | ms                  # Microsoft\n        | o                   # Presto (pre-Opera 15)\n        | xv|ah|rim|atsc|     # Less common vendors\n          hp|tc|wap|ro\n      )\n      |\n      # Non-standard prefixes\n      (?: mso                 # Microsoft Office\n        | prince              # YesLogic\n      )\n    )\n    -\n    [\\w-]+                   # Feature name\n    (?=                       # Terminates correctly\n      \\s*                    # Possible whitespace\n      (?:                     # Possible injected comment\n        /\\*\n        (?:[^*]|\\*[^/])*\n        \\*/\n      )?\n      \\s*\n      [:)]                    # Ends with a colon or closed bracket\n    )\n  )\n)\n(?=\\s|$|[><:=]|\\)|/\\*)     # Terminates cleanly',
+      },
+      'media-feature-keywords': {
+        match:
+          '(?xi)\n(?<=^|\\s|:|\\*/)\n(?: portrait                  # Orientation\n  | landscape\n  | progressive               # Scan types\n  | interlace\n  | fullscreen                # Display modes\n  | standalone\n  | minimal-ui\n  | browser\n)\n(?=\\s|\\)|$)',
+        name: 'support.constant.property-value.css',
+      },
+      'media-query': {
+        begin: '\\G',
+        end: '(?=\\s*[{;])',
+        patterns: [
+          {
+            include: '#comment-block',
+          },
+          {
+            include: '#escapes',
+          },
+          {
+            include: '#media-types',
+          },
+          {
+            match: '(?i)(?<=\\s|^|,|\\*/)(only|not)(?=\\s|{|/\\*|$)',
+            name: 'keyword.operator.logical.$1.media.css',
+          },
+          {
+            match: '(?i)(?<=\\s|^|\\*/|\\))and(?=\\s|/\\*|$)',
+            name: 'keyword.operator.logical.and.media.css',
+          },
+          {
+            match: ',(?:(?:\\s*,)+|(?=\\s*[;){]))',
+            name: 'invalid.illegal.comma.css',
+          },
+          {
+            include: '#commas',
+          },
+          {
+            begin: '\\(',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.parameters.begin.bracket.round.css',
+              },
+            },
+            end: '\\)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.parameters.end.bracket.round.css',
+              },
+            },
+            patterns: [
+              {
+                include: '#media-features',
+              },
+              {
+                include: '#media-feature-keywords',
+              },
+              {
+                match: ':',
+                name: 'punctuation.separator.key-value.css',
+              },
+              {
+                match: '>=|<=|=|<|>',
+                name: 'keyword.operator.comparison.css',
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'constant.numeric.css',
+                  },
+                  '2': {
+                    name: 'keyword.operator.arithmetic.css',
+                  },
+                  '3': {
+                    name: 'constant.numeric.css',
+                  },
+                },
+                match: '(\\d+)\\s*(/)\\s*(\\d+)',
+                name: 'meta.ratio.css',
+              },
+              {
+                include: '#numeric-values',
+              },
+              {
+                include: '#comment-block',
+              },
+            ],
+          },
+        ],
+      },
+      'media-query-list': {
+        begin: '(?=\\s*[^{;])',
+        end: '(?=\\s*[{;])',
+        patterns: [
+          {
+            include: '#media-query',
+          },
+        ],
+      },
+      'media-types': {
+        captures: {
+          '1': {
+            name: 'support.constant.media.css',
+          },
+          '2': {
+            name: 'invalid.deprecated.constant.media.css',
+          },
+        },
+        match:
+          '(?xi)\n(?<=^|\\s|,|\\*/)\n(?:\n  # Valid media types\n  (all|print|screen|speech)\n  |\n  # Deprecated in Media Queries 4: http://dev.w3.org/csswg/mediaqueries/#media-types\n  (aural|braille|embossed|handheld|projection|tty|tv)\n)\n(?=$|[{,\\s;]|/\\*)',
+      },
+      'numeric-values': {
+        patterns: [
+          {
+            captures: {
+              '1': {
+                name: 'punctuation.definition.constant.css',
+              },
+            },
+            match: '(#)(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b',
+            name: 'constant.other.color.rgb-value.hex.css',
+          },
+          {
+            captures: {
+              '1': {
+                name: 'keyword.other.unit.percentage.css',
+              },
+              '2': {
+                name: 'keyword.other.unit.${2:/downcase}.css',
+              },
+            },
+            match:
+              '(?xi) (?<![\\w-])\n[-+]?                               # Sign indicator\n\n(?:                                 # Numerals\n    [0-9]+ (?:\\.[0-9]+)?           # Integer/float with leading digits\n  | \\.[0-9]+                       # Float without leading digits\n)\n\n(?:                                 # Scientific notation\n  (?<=[0-9])                        # Exponent must follow a digit\n  E                                 # Exponent indicator\n  [-+]?                             # Possible sign indicator\n  [0-9]+                            # Exponent value\n)?\n\n(?:                                 # Possible unit for data-type:\n  (%)                               # - Percentage\n  | ( deg|grad|rad|turn             # - Angle\n    | Hz|kHz                        # - Frequency\n    | ch|cm|em|ex|fr|in|mm|mozmm|   # - Length\n      pc|pt|px|q|rem|vh|vmax|vmin|\n      vw\n    | dpi|dpcm|dppx                 # - Resolution\n    | s|ms                          # - Time\n    )\n  \\b                               # Boundary checking intentionally lax to\n)?                                  # facilitate embedding in CSS-like grammars',
+            name: 'constant.numeric.css',
+          },
+        ],
+      },
+      'property-keywords': {
+        patterns: [
+          {
+            match:
+              '(?xi) (?<![\\w-])\n(above|absolute|active|add|additive|after-edge|alias|all|all-petite-caps|all-scroll|all-small-caps|alpha|alphabetic|alternate|alternate-reverse\n|always|antialiased|auto|auto-pos|available|avoid|avoid-column|avoid-page|avoid-region|backwards|balance|baseline|before-edge|below|bevel\n|bidi-override|blink|block|block-axis|block-start|block-end|bold|bolder|border|border-box|both|bottom|bottom-outside|break-all|break-word|bullets\n|butt|capitalize|caption|cell|center|central|char|circle|clip|clone|close-quote|closest-corner|closest-side|col-resize|collapse|color|color-burn\n|color-dodge|column|column-reverse|common-ligatures|compact|condensed|contain|content|content-box|contents|context-menu|contextual|copy|cover\n|crisp-edges|crispEdges|crosshair|cyclic|darken|dashed|decimal|default|dense|diagonal-fractions|difference|digits|disabled|disc|discretionary-ligatures\n|distribute|distribute-all-lines|distribute-letter|distribute-space|dot|dotted|double|double-circle|downleft|downright|e-resize|each-line|ease|ease-in\n|ease-in-out|ease-out|economy|ellipse|ellipsis|embed|end|evenodd|ew-resize|exact|exclude|exclusion|expanded|extends|extra-condensed|extra-expanded\n|fallback|farthest-corner|farthest-side|fill|fill-available|fill-box|filled|fit-content|fixed|flat|flex|flex-end|flex-start|flip|forwards|freeze\n|from-image|full-width|geometricPrecision|georgian|grab|grabbing|grayscale|grid|groove|hand|hanging|hard-light|help|hidden|hide\n|historical-forms|historical-ligatures|horizontal|horizontal-tb|hue|icon|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space\n|ideographic|inactive|infinite|inherit|initial|inline|inline-axis|inline-block|inline-end|inline-flex|inline-grid|inline-list-item|inline-start\n|inline-table|inset|inside|inter-character|inter-ideograph|inter-word|intersect|invert|isolate|isolate-override|italic|jis04|jis78|jis83\n|jis90|justify|justify-all|kannada|keep-all|landscape|large|larger|left|lighten|lighter|line|line-edge|line-through|linear|linearRGB\n|lining-nums|list-item|local|loose|lowercase|lr|lr-tb|ltr|luminance|luminosity|main-size|mandatory|manipulation|manual|margin-box|match-parent\n|match-source|mathematical|max-content|medium|menu|message-box|middle|min-content|miter|mixed|move|multiply|n-resize|narrower|ne-resize\n|nearest-neighbor|nesw-resize|newspaper|no-change|no-clip|no-close-quote|no-common-ligatures|no-contextual|no-discretionary-ligatures\n|no-drop|no-historical-ligatures|no-open-quote|no-repeat|none|nonzero|normal|not-allowed|nowrap|ns-resize|numbers|numeric|nw-resize|nwse-resize\n|oblique|oldstyle-nums|open|open-quote|optimizeLegibility|optimizeQuality|optimizeSpeed|optional|ordinal|outset|outside|over|overlay|overline|padding\n|padding-box|page|painted|pan-down|pan-left|pan-right|pan-up|pan-x|pan-y|paused|petite-caps|pixelated|plaintext|pointer|portrait|pre|pre-line\n|pre-wrap|preserve-3d|progress|progressive|proportional-nums|proportional-width|proximity|radial|recto|region|relative|remove|repeat|repeat-[xy]\n|reset-size|reverse|revert|ridge|right|rl|rl-tb|round|row|row-resize|row-reverse|row-severse|rtl|ruby|ruby-base|ruby-base-container|ruby-text\n|ruby-text-container|run-in|running|s-resize|saturation|scale-down|screen|scroll|scroll-position|se-resize|semi-condensed|semi-expanded|separate\n|sesame|show|sideways|sideways-left|sideways-lr|sideways-right|sideways-rl|simplified|slashed-zero|slice|small|small-caps|small-caption|smaller\n|smooth|soft-light|solid|space|space-around|space-between|space-evenly|spell-out|square|sRGB|stacked-fractions|start|static|status-bar|swap\n|step-end|step-start|sticky|stretch|strict|stroke|stroke-box|style|sub|subgrid|subpixel-antialiased|subtract|super|sw-resize|symbolic|table\n|table-caption|table-cell|table-column|table-column-group|table-footer-group|table-header-group|table-row|table-row-group|tabular-nums|tb|tb-rl\n|text|text-after-edge|text-before-edge|text-bottom|text-top|thick|thin|titling-caps|top|top-outside|touch|traditional|transparent|triangle\n|ultra-condensed|ultra-expanded|under|underline|unicase|unset|upleft|uppercase|upright|use-glyph-orientation|use-script|verso|vertical\n|vertical-ideographic|vertical-lr|vertical-rl|vertical-text|view-box|visible|visibleFill|visiblePainted|visibleStroke|w-resize|wait|wavy\n|weight|whitespace|wider|words|wrap|wrap-reverse|x-large|x-small|xx-large|xx-small|zero|zoom-in|zoom-out)\n(?![\\w-])',
+            name: 'support.constant.property-value.css',
+          },
+          {
+            match:
+              '(?xi) (?<![\\w-])\n(arabic-indic|armenian|bengali|cambodian|circle|cjk-decimal|cjk-earthly-branch|cjk-heavenly-stem|cjk-ideographic\n|decimal|decimal-leading-zero|devanagari|disc|disclosure-closed|disclosure-open|ethiopic-halehame-am\n|ethiopic-halehame-ti-e[rt]|ethiopic-numeric|georgian|gujarati|gurmukhi|hangul|hangul-consonant|hebrew\n|hiragana|hiragana-iroha|japanese-formal|japanese-informal|kannada|katakana|katakana-iroha|khmer\n|korean-hangul-formal|korean-hanja-formal|korean-hanja-informal|lao|lower-alpha|lower-armenian|lower-greek\n|lower-latin|lower-roman|malayalam|mongolian|myanmar|oriya|persian|simp-chinese-formal|simp-chinese-informal\n|square|tamil|telugu|thai|tibetan|trad-chinese-formal|trad-chinese-informal|upper-alpha|upper-armenian\n|upper-latin|upper-roman|urdu)\n(?![\\w-])',
+            name: 'support.constant.property-value.list-style-type.css',
+          },
+          {
+            match:
+              '(?<![\\w-])(?i:-(?:ah|apple|atsc|epub|hp|khtml|moz|ms|o|rim|ro|tc|wap|webkit|xv)|(?:mso|prince))-[a-zA-Z-]+',
+            name: 'support.constant.vendored.property-value.css',
+          },
+          {
+            match:
+              '(?<![\\w-])(?i:arial|century|comic|courier|garamond|georgia|helvetica|impact|lucida|symbol|system|tahoma|times|trebuchet|utopia|verdana|webdings|sans-serif|serif|monospace)(?![\\w-])',
+            name: 'support.constant.font-name.css',
+          },
+        ],
+      },
+      'property-names': {
+        patterns: [
+          {
+            match:
+              '(?xi) (?<![\\w-])\n(?:\n    # Standard CSS\n    additive-symbols|align-content|align-items|align-self|all|animation|animation-delay|animation-direction\n  | animation-duration|animation-fill-mode|animation-iteration-count|animation-name|animation-play-state\n  | animation-timing-function|backface-visibility|background|background-attachment|background-blend-mode\n  | background-clip|background-color|background-image|background-origin|background-position|background-position-[xy]\n  | background-repeat|background-size|block-size|border|border-block-end|border-block-end-color|border-block-end-style\n  | border-block-end-width|border-block-start|border-block-start-color|border-block-start-style\n  | border-block-start-width|border-bottom|border-bottom-color|border-bottom-left-radius|border-bottom-right-radius\n  | border-bottom-style|border-bottom-width|border-collapse|border-color|border-image|border-image-outset\n  | border-image-repeat|border-image-slice|border-image-source|border-image-width|border-inline-end\n  | border-inline-end-color|border-inline-end-style|border-inline-end-width|border-inline-start\n  | border-inline-start-color|border-inline-start-style|border-inline-start-width|border-left|border-left-color\n  | border-left-style|border-left-width|border-radius|border-right|border-right-color|border-right-style\n  | border-right-width|border-spacing|border-style|border-top|border-top-color|border-top-left-radius\n  | border-top-right-radius|border-top-style|border-top-width|border-width|bottom|box-decoration-break\n  | box-shadow|box-sizing|break-after|break-before|break-inside|caption-side|clear|clip|clip-path|color\n  | column-count|column-fill|column-gap|column-rule|column-rule-color|column-rule-style|column-rule-width\n  | column-span|column-width|columns|content|counter-increment|counter-reset|cursor|direction|display\n  | empty-cells|filter|flex|flex-basis|flex-direction|flex-flow|flex-grow|flex-shrink|flex-wrap|float\n  | font|font-display|font-family|font-feature-settings|font-kerning|font-language-override|font-size|font-size-adjust\n  | font-stretch|font-style|font-synthesis|font-variant|font-variant-alternates|font-variant-caps\n  | font-variant-east-asian|font-variant-ligatures|font-variant-numeric|font-variant-position|font-weight\n  | grid|grid-area|grid-auto-columns|grid-auto-flow|grid-auto-rows|grid-column|grid-column-end|grid-column-gap\n  | grid-column-start|grid-gap|grid-row|grid-row-end|grid-row-gap|grid-row-start|grid-template|grid-template-areas\n  | grid-template-columns|grid-template-rows|height|hyphens|image-orientation|image-rendering|image-resolution\n  | ime-mode|inline-size|isolation|justify-content|left|letter-spacing|line-break|line-height|list-style\n  | list-style-image|list-style-position|list-style-type|margin|margin-block-end|margin-block-start|margin-bottom\n  | margin-inline-end|margin-inline-start|margin-left|margin-right|margin-top|mask|mask-clip|mask-composite\n  | mask-image|mask-mode|mask-origin|mask-position|mask-repeat|mask-size|mask-type|max-block-size|max-height\n  | max-inline-size|max-width|max-zoom|min-block-size|min-height|min-inline-size|min-width|min-zoom|mix-blend-mode\n  | negative|object-fit|object-position|offset-block-end|offset-block-start|offset-inline-end|offset-inline-start\n  | opacity|order|orientation|orphans|outline|outline-color|outline-offset|outline-style|outline-width|overflow\n  | overflow-wrap|overflow-[xy]|pad|padding|padding-block-end|padding-block-start|padding-bottom|padding-inline-end\n  | padding-inline-start|padding-left|padding-right|padding-top|page-break-after|page-break-before|page-break-inside\n  | perspective|perspective-origin|pointer-events|position|prefix|quotes|range|resize|right|ruby-align|ruby-merge\n  | ruby-position|scroll-behavior|scroll-snap-coordinate|scroll-snap-destination|scroll-snap-type|shape-image-threshold\n  | shape-margin|shape-outside|speak-as|src|suffix|symbols|system|tab-size|table-layout|text-align|text-align-last\n  | text-combine-upright|text-decoration|text-decoration-color|text-decoration-line|text-decoration-style|text-emphasis\n  | text-emphasis-color|text-emphasis-position|text-emphasis-style|text-indent|text-orientation|text-overflow\n  | text-rendering|text-shadow|text-transform|text-underline-position|top|touch-action|transform|transform-box\n  | transform-origin|transform-style|transition|transition-delay|transition-duration|transition-property\n  | transition-timing-function|unicode-bidi|unicode-range|user-zoom|vertical-align|visibility|white-space|widows\n  | width|will-change|word-break|word-spacing|word-wrap|writing-mode|z-index|zoom\n\n  # SVG attributes\n  | alignment-baseline|baseline-shift|clip-rule|color-interpolation|color-interpolation-filters|color-profile\n  | color-rendering|dominant-baseline|enable-background|fill|fill-opacity|fill-rule|flood-color|flood-opacity\n  | glyph-orientation-horizontal|glyph-orientation-vertical|kerning|lighting-color|marker-end|marker-mid\n  | marker-start|shape-rendering|stop-color|stop-opacity|stroke|stroke-dasharray|stroke-dashoffset|stroke-linecap\n  | stroke-linejoin|stroke-miterlimit|stroke-opacity|stroke-width|text-anchor|x|y\n\n  # Not listed on MDN; presumably deprecated\n  | adjust|after|align|align-last|alignment|alignment-adjust|appearance|attachment|azimuth|background-break\n  | balance|baseline|before|bidi|binding|bookmark|bookmark-label|bookmark-level|bookmark-target|border-length\n  | bottom-color|bottom-left-radius|bottom-right-radius|bottom-style|bottom-width|box|box-align|box-direction\n  | box-flex|box-flex-group|box-lines|box-ordinal-group|box-orient|box-pack|break|character|collapse|column\n  | column-break-after|column-break-before|count|counter|crop|cue|cue-after|cue-before|decoration|decoration-break\n  | delay|display-model|display-role|down|drop|drop-initial-after-adjust|drop-initial-after-align|drop-initial-before-adjust\n  | drop-initial-before-align|drop-initial-size|drop-initial-value|duration|elevation|emphasis|family|fit|fit-position\n  | flex-group|float-offset|gap|grid-columns|grid-rows|hanging-punctuation|header|hyphenate|hyphenate-after|hyphenate-before\n  | hyphenate-character|hyphenate-lines|hyphenate-resource|icon|image|increment|indent|index|initial-after-adjust\n  | initial-after-align|initial-before-adjust|initial-before-align|initial-size|initial-value|inline-box-align|iteration-count\n  | justify|label|left-color|left-style|left-width|length|level|line|line-stacking|line-stacking-ruby|line-stacking-shift\n  | line-stacking-strategy|lines|list|mark|mark-after|mark-before|marks|marquee|marquee-direction|marquee-play-count|marquee-speed\n  | marquee-style|max|min|model|move-to|name|nav|nav-down|nav-index|nav-left|nav-right|nav-up|new|numeral|offset|ordinal-group\n  | orient|origin|overflow-style|overhang|pack|page|page-policy|pause|pause-after|pause-before|phonemes|pitch|pitch-range\n  | play-count|play-during|play-state|point|presentation|presentation-level|profile|property|punctuation|punctuation-trim\n  | radius|rate|rendering-intent|repeat|replace|reset|resolution|resource|respond-to|rest|rest-after|rest-before|richness\n  | right-color|right-style|right-width|role|rotation|rotation-point|rows|ruby|ruby-overhang|ruby-span|rule|rule-color\n  | rule-style|rule-width|shadow|size|size-adjust|sizing|space|space-collapse|spacing|span|speak|speak-header|speak-numeral\n  | speak-punctuation|speech|speech-rate|speed|stacking|stacking-ruby|stacking-shift|stacking-strategy|stress|stretch\n  | string-set|style|style-image|style-position|style-type|target|target-name|target-new|target-position|text|text-height\n  | text-justify|text-outline|text-replace|text-wrap|timing-function|top-color|top-left-radius|top-right-radius|top-style\n  | top-width|trim|unicode|up|user-select|variant|voice|voice-balance|voice-duration|voice-family|voice-pitch|voice-pitch-range\n  | voice-rate|voice-stress|voice-volume|volume|weight|white|white-space-collapse|word|wrap\n)\n(?![\\w-])',
+            name: 'support.type.property-name.css',
+          },
+          {
+            match:
+              '(?<![\\w-])(?i:-(?:ah|apple|atsc|epub|hp|khtml|moz|ms|o|rim|ro|tc|wap|webkit|xv)|(?:mso|prince))-[a-zA-Z-]+',
+            name: 'support.type.vendored.property-name.css',
+          },
+        ],
+      },
+      'property-values': {
+        patterns: [
+          {
+            include: '#commas',
+          },
+          {
+            include: '#comment-block',
+          },
+          {
+            include: '#escapes',
+          },
+          {
+            include: '#functions',
+          },
+          {
+            include: '#property-keywords',
+          },
+          {
+            include: '#unicode-range',
+          },
+          {
+            include: '#numeric-values',
+          },
+          {
+            include: '#color-keywords',
+          },
+          {
+            include: '#string',
+          },
+          {
+            match: '!\\s*important(?![\\w-])',
+            name: 'keyword.other.important.css',
+          },
+        ],
+      },
+      'pseudo-classes': {
+        captures: {
+          '1': {
+            name: 'punctuation.definition.entity.css',
+          },
+          '2': {
+            name: 'invalid.illegal.colon.css',
+          },
+        },
+        match:
+          '(?xi)\n(:)(:*)\n(?: active|any-link|checked|default|disabled|empty|enabled|first\n  | (?:first|last|only)-(?:child|of-type)|focus|focus-within|fullscreen|host|hover\n  | in-range|indeterminate|invalid|left|link|optional|out-of-range\n  | read-only|read-write|required|right|root|scope|target|unresolved\n  | valid|visited\n)(?![\\w-]|\\s*[;}])',
+        name: 'entity.other.attribute-name.pseudo-class.css',
+      },
+      'pseudo-elements': {
+        captures: {
+          '1': {
+            name: 'punctuation.definition.entity.css',
+          },
+          '2': {
+            name: 'punctuation.definition.entity.css',
+          },
+        },
+        match:
+          '(?xi)\n(?:\n  (::?)                       # Elements using both : and :: notation\n  (?: after\n    | before\n    | first-letter\n    | first-line\n    | (?:-(?:ah|apple|atsc|epub|hp|khtml|moz\n            |ms|o|rim|ro|tc|wap|webkit|xv)\n        | (?:mso|prince))\n      -[a-z-]+\n  )\n  |\n  (::)                        # Double-colon only\n  (?: backdrop\n    | content\n    | grammar-error\n    | marker\n    | placeholder\n    | selection\n    | shadow\n    | spelling-error\n  )\n)\n(?![\\w-]|\\s*[;}])',
+        name: 'entity.other.attribute-name.pseudo-element.css',
+      },
+      'rule-list': {
+        begin: '{',
+        beginCaptures: {
+          '0': {
+            name: 'punctuation.section.property-list.begin.bracket.curly.css',
+          },
+        },
+        end: '}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.section.property-list.end.bracket.curly.css',
+          },
+        },
+        name: 'meta.property-list.css',
+        patterns: [
+          {
+            include: '#rule-list-innards',
+          },
+        ],
+      },
+      'rule-list-innards': {
+        patterns: [
+          {
+            include: '#comment-block',
+          },
+          {
+            include: '#escapes',
+          },
+          {
+            include: '#font-features',
+          },
+          {
+            match:
+              '(?x) (?<![\\w-])\n--\n(?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier\n  |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*',
+            name: 'variable.css',
+          },
+          {
+            begin: '(?<![-a-zA-Z])(?=[-a-zA-Z])',
+            end: '$|(?![-a-zA-Z])',
+            name: 'meta.property-name.css',
+            patterns: [
+              {
+                include: '#property-names',
+              },
+            ],
+          },
+          {
+            begin: '(:)\\s*',
+            beginCaptures: {
+              '1': {
+                name: 'punctuation.separator.key-value.css',
+              },
+            },
+            end: '\\s*(;)|\\s*(?=}|\\))',
+            endCaptures: {
+              '1': {
+                name: 'punctuation.terminator.rule.css',
+              },
+            },
+            contentName: 'meta.property-value.css',
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#property-values',
+              },
+            ],
+          },
+          {
+            match: ';',
+            name: 'punctuation.terminator.rule.css',
+          },
+        ],
+      },
+      selector: {
+        begin:
+          '(?x)\n(?=\n  (?:\\|)?                    # Possible anonymous namespace prefix\n  (?:\n    [-\\[:.*\\#a-zA-Z_]       # Valid selector character\n    |\n    [^\\x00-\\x7F]            # Which can include non-ASCII symbols\n    |\n    \\\\                      # Or an escape sequence\n    (?:[0-9a-fA-F]{1,6}|.)\n  )\n)',
+        end: '(?=\\s*[/@{)])',
+        name: 'meta.selector.css',
+        patterns: [
+          {
+            include: '#selector-innards',
+          },
+        ],
+      },
+      'selector-innards': {
+        patterns: [
+          {
+            include: '#comment-block',
+          },
+          {
+            include: '#commas',
+          },
+          {
+            include: '#escapes',
+          },
+          {
+            include: '#combinators',
+          },
+          {
+            captures: {
+              '1': {
+                name: 'entity.other.namespace-prefix.css',
+              },
+              '2': {
+                name: 'punctuation.separator.css',
+              },
+            },
+            match:
+              "(?x)\n(?:^|(?<=[\\s,(};]))         # Follows whitespace, comma, semicolon, or bracket\n(?!\n  [-\\w*]+\n  \\|\n  (?!\n      [-\\[:.*\\#a-zA-Z_]    # Make sure there's a selector to match\n    | [^\\x00-\\x7F]\n  )\n)\n(\n  (?: [-a-zA-Z_]    | [^\\x00-\\x7F] )   # First letter\n  (?: [-a-zA-Z0-9_] | [^\\x00-\\x7F]     # Remainder of identifier\n    | \\\\(?:[0-9a-fA-F]{1,6}|.)\n  )*\n  |\n  \\*     # Universal namespace\n)?\n(\\|)     # Namespace separator",
+          },
+          {
+            include: '#tag-names',
+          },
+          {
+            match: '\\*',
+            name: 'entity.name.tag.wildcard.css',
+          },
+          {
+            captures: {
+              '1': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '2': {
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+            },
+            match:
+              '(?x) (?<![@\\w-])\n([.\\#])\n# Invalid identifier\n(\n  (?:\n    # Starts with ASCII digits, with possible hyphen preceding it\n    -?[0-9]\n    |\n    # Consists of a hyphen only\n    -                                      # Terminated by either:\n    (?= $                                  # - End-of-line\n      | [\\s,.\\#)\\[:{>+~|]               # - Followed by another selector\n      | /\\*                               # - Followed by a block comment\n    )\n    |\n    # Name contains unescaped ASCII symbol\n    (?:                                    # Check for acceptable preceding characters\n        [-a-zA-Z_0-9]|[^\\x00-\\x7F]       # - Valid selector character\n      | \\\\(?:[0-9a-fA-F]{1,6}|.)         # - Escape sequence\n    )*\n    (?:                                    # Invalid punctuation\n      [!"\'%&(*;<?@^`|\\]}]                 # - NOTE: We exempt `)` from the list of checked\n      |                                    #   symbols to avoid matching `:not(.invalid)`\n      / (?!\\*)                            # - Avoid invalidating the start of a comment\n    )+\n  )\n  # Mark remainder of selector invalid\n  (?: [-a-zA-Z_0-9]|[^\\x00-\\x7F]         # - Otherwise valid identifier characters\n    | \\\\(?:[0-9a-fA-F]{1,6}|.)           # - Escape sequence\n  )*\n)',
+            name: 'invalid.illegal.bad-identifier.css',
+          },
+          {
+            captures: {
+              '1': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '2': {
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+            },
+            match:
+              '(?x)\n(\\.)                                  # Valid class-name\n(\n  (?: [-a-zA-Z_0-9]|[^\\x00-\\x7F]     # Valid identifier characters\n    | \\\\(?:[0-9a-fA-F]{1,6}|.)       # Escape sequence\n  )+\n)                                      # Followed by either:\n(?= $                                  # - End of the line\n  | [\\s,.\\#)\\[:{>+~|]               # - Another selector\n  | /\\*                               # - A block comment\n)',
+            name: 'entity.other.attribute-name.class.css',
+          },
+          {
+            captures: {
+              '1': {
+                name: 'punctuation.definition.entity.css',
+              },
+              '2': {
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+            },
+            match:
+              '(?x)\n(\\#)\n(\n  -?\n  (?![0-9])\n  (?:[-a-zA-Z0-9_]|[^\\x00-\\x7F]|\\\\(?:[0-9a-fA-F]{1,6}|.))+\n)\n(?=$|[\\s,.\\#)\\[:{>+~|]|/\\*)',
+            name: 'entity.other.attribute-name.id.css',
+          },
+          {
+            begin: '\\[',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.entity.begin.bracket.square.css',
+              },
+            },
+            end: '\\]',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.entity.end.bracket.square.css',
+              },
+            },
+            name: 'meta.attribute-selector.css',
+            patterns: [
+              {
+                include: '#comment-block',
+              },
+              {
+                include: '#string',
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'storage.modifier.ignore-case.css',
+                  },
+                },
+                match: '(?<=["\'\\s]|^|\\*/)\\s*([iI])\\s*(?=[\\s\\]]|/\\*|$)',
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'string.unquoted.attribute-value.css',
+                    patterns: [
+                      {
+                        include: '#escapes',
+                      },
+                    ],
+                  },
+                },
+                match: '(?x)(?<==)\\s*((?!/\\*)(?:[^\\\\"\'\\s\\]]|\\\\.)+)',
+              },
+              {
+                include: '#escapes',
+              },
+              {
+                match: '[~|^$*]?=',
+                name: 'keyword.operator.pattern.css',
+              },
+              {
+                match: '\\|',
+                name: 'punctuation.separator.css',
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'entity.other.namespace-prefix.css',
+                    patterns: [
+                      {
+                        include: '#escapes',
+                      },
+                    ],
+                  },
+                },
+                match:
+                  "(?x)\n# Qualified namespace prefix\n( -?(?!\\d)(?:[\\w-]|[^\\x00-\\x7F]|\\\\(?:[0-9a-fA-F]{1,6}|.))+\n| \\*\n)\n# Lookahead to ensure there's a valid identifier ahead\n(?=\n  \\| (?!\\s|=|$|\\])\n  (?: -?(?!\\d)\n   |   [\\\\\\w-]\n   |   [^\\x00-\\x7F]\n   )\n)",
+              },
+              {
+                captures: {
+                  '1': {
+                    name: 'entity.other.attribute-name.css',
+                    patterns: [
+                      {
+                        include: '#escapes',
+                      },
+                    ],
+                  },
+                },
+                match:
+                  '(?x)\n(-?(?!\\d)(?>[\\w-]|[^\\x00-\\x7F]|\\\\(?:[0-9a-fA-F]{1,6}|.))+)\n\\s*\n(?=[~|^\\]$*=]|/\\*)',
+              },
+            ],
+          },
+          {
+            include: '#pseudo-classes',
+          },
+          {
+            include: '#pseudo-elements',
+          },
+          {
+            include: '#functional-pseudo-classes',
+          },
+          {
+            match:
+              '(?x) (?<![@\\w-])\n(?=            # Custom element names must:\n  [a-z]        # - start with a lowercase ASCII letter,\n  \\w* -       # - contain at least one dash\n)\n(?:\n  (?![A-Z])    # No uppercase ASCII letters are allowed\n  [\\w-]       # Allow any other word character or dash\n)+\n(?![(\\w-])',
+            name: 'entity.name.tag.custom.css',
+          },
+        ],
+      },
+      string: {
+        patterns: [
+          {
+            begin: '"',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.string.begin.css',
+              },
+            },
+            end: '"|(?<!\\\\)(?=$|\\n)',
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.string.end.css',
+              },
+            },
+            name: 'string.quoted.double.css',
+            patterns: [
+              {
+                begin: '(?:\\G|^)(?=(?:[^\\\\"]|\\\\.)+$)',
+                end: '$',
+                name: 'invalid.illegal.unclosed.string.css',
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+              {
+                include: '#escapes',
+              },
+            ],
+          },
+          {
+            begin: "'",
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.definition.string.begin.css',
+              },
+            },
+            end: "'|(?<!\\\\)(?=$|\\n)",
+            endCaptures: {
+              '0': {
+                name: 'punctuation.definition.string.end.css',
+              },
+            },
+            name: 'string.quoted.single.css',
+            patterns: [
+              {
+                begin: "(?:\\G|^)(?=(?:[^\\\\']|\\\\.)+$)",
+                end: '$',
+                name: 'invalid.illegal.unclosed.string.css',
+                patterns: [
+                  {
+                    include: '#escapes',
+                  },
+                ],
+              },
+              {
+                include: '#escapes',
+              },
+            ],
+          },
+        ],
+      },
+      'tag-names': {
+        match:
+          '(?xi) (?<![\\w:-])\n(?:\n    # HTML\n    a|abbr|acronym|address|applet|area|article|aside|audio|b|base|basefont|bdi|bdo|bgsound\n  | big|blink|blockquote|body|br|button|canvas|caption|center|cite|code|col|colgroup|command\n  | content|data|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|element|em|embed|fieldset\n  | figcaption|figure|font|footer|form|frame|frameset|h[1-6]|head|header|hgroup|hr|html|i\n  | iframe|image|img|input|ins|isindex|kbd|keygen|label|legend|li|link|listing|main|map|mark\n  | marquee|math|menu|menuitem|meta|meter|multicol|nav|nextid|nobr|noembed|noframes|noscript\n  | object|ol|optgroup|option|output|p|param|picture|plaintext|pre|progress|q|rb|rp|rt|rtc\n  | ruby|s|samp|script|section|select|shadow|slot|small|source|spacer|span|strike|strong\n  | style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr\n  | track|tt|u|ul|var|video|wbr|xmp\n\n  # SVG\n  | altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform\n  | circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix\n  | feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap\n  | feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur\n  | feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting\n  | feSpotLight|feTile|feTurbulence|filter|font-face|font-face-format|font-face-name\n  | font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern\n  | line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata\n  | missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor\n  | stop|svg|switch|symbol|text|textPath|tref|tspan|use|view|vkern\n\n  # MathML\n  | annotation|annotation-xml|maction|maligngroup|malignmark|math|menclose|merror|mfenced\n  | mfrac|mglyph|mi|mlabeledtr|mlongdiv|mmultiscripts|mn|mo|mover|mpadded|mphantom|mroot\n  | mrow|ms|mscarries|mscarry|msgroup|msline|mspace|msqrt|msrow|mstack|mstyle|msub|msubsup\n  | msup|mtable|mtd|mtext|mtr|munder|munderover|semantics\n)\n(?=[+~>\\s,.\\#|){:\\[]|/\\*|$)',
+        name: 'entity.name.tag.css',
+      },
+      'unicode-range': {
+        captures: {
+          '0': {
+            name: 'constant.other.unicode-range.css',
+          },
+          '1': {
+            name: 'punctuation.separator.dash.unicode-range.css',
+          },
+        },
+        match: '(?<![\\w-])[Uu]\\+[0-9A-Fa-f?]{1,6}(?:(-)[0-9A-Fa-f]{1,6})?(?![\\w-])',
+      },
+      url: {
+        begin: '(?i)(?<![\\w@-])(url)(\\()',
+        beginCaptures: {
+          '1': {
+            name: 'support.function.url.css',
+          },
+          '2': {
+            name: 'punctuation.section.function.begin.bracket.round.css',
+          },
+        },
+        end: '\\)',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.section.function.end.bracket.round.css',
+          },
+        },
+        name: 'meta.function.url.css',
+        patterns: [
+          {
+            match: '[^\'")\\s]+',
+            name: 'variable.parameter.url.css',
+          },
+          {
+            include: '#string',
+          },
+          {
+            include: '#comment-block',
+          },
+          {
+            include: '#escapes',
+          },
+        ],
+      },
+    },
+  },
 };
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index be20661a07..b3eb0bcd0c 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -265,7 +265,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   interface CustomLanguageDefinition {
     config?: Monaco.languages.LanguageConfiguration;
     tokens?: Monaco.languages.IMonarchLanguage;
-    syntax?: Record<string, unknown>;
   }
 
   const addVueSupport = async () => {
@@ -280,15 +279,13 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     setTheme(currentTheme, currentEditorTheme);
   };
 
-  async function registerFromTextMate({
-    name,
-    scopeName,
-    syntax,
-  }: {
-    name: string;
-    scopeName: string;
-    syntax: string;
-  }) {
+  async function registerFromTextMate(
+    langs: Array<{
+      name: string;
+      scopeName: string;
+      syntax: string;
+    }>,
+  ) {
     await addVueSupport(); // a workaround for TextMate syntax
 
     const { loadWASM } = await import(onigasmUrl);
@@ -298,26 +295,38 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     await loadWASM(onigasmWasmUrl);
 
     const registry = new Registry({
-      getGrammarDefinition: async (_scopeName: string) => {
+      getGrammarDefinition: async (scopeName: string) => {
         return {
           format: 'json',
-          content: syntax,
+          content: langs.find((l) => l.scopeName === scopeName)?.syntax ?? '',
         };
       },
     });
 
     const grammars = new Map();
-    grammars.set(name, scopeName);
-    monaco.languages.register({ id: name });
+    for (const { name, scopeName } of langs) {
+      grammars.set(name, scopeName);
+      monaco.languages.register({ id: name });
+    }
     await wireTmGrammars(monaco, registry, grammars, editor);
   }
 
-  const addRippleSupport = async (syntax: CustomLanguageDefinition['syntax']) => {
-    await registerFromTextMate({
-      name: 'ripple',
-      scopeName: 'source.ripple',
-      syntax: JSON.stringify(syntax, null, 2).replace('"name": "Ripple"', '"name": "ripple"'),
-    });
+  const addRippleSupport = async (syntaxes: {
+    ripple: Record<string, unknown>;
+    css: Record<string, unknown>;
+  }) => {
+    await registerFromTextMate([
+      {
+        name: 'ripple',
+        scopeName: 'source.ripple',
+        syntax: JSON.stringify(syntaxes.ripple),
+      },
+      {
+        name: 'CSS',
+        scopeName: 'source.css',
+        syntax: JSON.stringify(syntaxes.css),
+      },
+    ]);
   };
 
   const loadMonacoLanguage = async (lang: Language) => {
@@ -336,7 +345,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
         monaco.languages.setMonarchTokensProvider(lang, mod.tokens);
       }
       if (lang === 'ripple') {
-        await addRippleSupport(mod.syntax);
+        await addRippleSupport({ ripple: (mod as any).syntax, css: (mod as any).cssSyntax });
         return;
       }
     }

From e2d6ceab8d44b841d3bb77e37a446334d7452db1 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:33 +0300
Subject: [PATCH 30/71] fix typos in ripple syntax file

---
 .../editor/monaco/languages/monaco-lang-ripple.ts         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
index 30aca96d4f..b6cfdc30cc 100644
--- a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
+++ b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
@@ -1157,7 +1157,7 @@ export default {
             ],
           },
           {
-            name: 'meta.paramter.array-binding-pattern.js',
+            name: 'meta.parameter.array-binding-pattern.js',
             begin: '(?<!=|:)\\s*(?:(\\.\\.\\.)\\s*)?(\\[)',
             beginCaptures: {
               '1': {
@@ -3235,7 +3235,7 @@ export default {
           {
             name: 'meta.object.member.js meta.object-literal.key.js',
             begin: '(?=[\\\'\\"\\`])',
-            end: '(?=:)|((?<=[\\\'\\"\\`])(?=((\\s*[\\(\\<,}])|(\\s+(as|satisifies)\\s+))))',
+            end: '(?=:)|((?<=[\\\'\\"\\`])(?=((\\s*[\\(\\<,}])|(\\s+(as|satisfies)\\s+))))',
             patterns: [
               {
                 include: '#comment',
@@ -3249,7 +3249,7 @@ export default {
             name: 'meta.object.member.js meta.object-literal.key.js',
             begin:
               '(?x)(?=(\\b(?<!\\$)0(?:x|X)[0-9a-fA-F][0-9a-fA-F_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:b|B)[01][01_]*(n)?\\b(?!\\$))|(\\b(?<!\\$)0(?:o|O)?[0-7][0-7_]*(n)?\\b(?!\\$))|((?<!\\$)(?:\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)| # 1.1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # 1.E+3\n  (?:\\B(\\.)[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|             # .1E+3\n  (?:\\b[0-9][0-9_]*[eE][+-]?[0-9][0-9_]*(n)?\\b)|                 # 1E+3\n  (?:\\b[0-9][0-9_]*(\\.)[0-9][0-9_]*(n)?\\b)|                      # 1.1\n  (?:\\b[0-9][0-9_]*(\\.)(n)?\\B)|                                  # 1.\n  (?:\\B(\\.)[0-9][0-9_]*(n)?\\b)|                                  # .1\n  (?:\\b[0-9][0-9_]*(n)?\\b(?!\\.))                                 # 1\n)(?!\\$)))',
-            end: '(?=:)|(?=\\s*([\\(\\<,}])|(\\s+as|satisifies\\s+))',
+            end: '(?=:)|(?=\\s*([\\(\\<,}])|(\\s+as|satisfies\\s+))',
             patterns: [
               {
                 include: '#comment',
@@ -3352,7 +3352,7 @@ export default {
                 name: 'keyword.control.satisfies.js',
               },
             },
-            end: '(?=[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|^|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as|satisifies)\\s+))',
+            end: '(?=[;),}\\]:?\\-\\+\\>]|\\|\\||\\&\\&|\\!\\=\\=|$|^|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(as|satisfies)\\s+))',
             patterns: [
               {
                 include: '#type',

From 0c0b60e91a15a5ca0eada8b45bb1f1835a126a90 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:33 +0300
Subject: [PATCH 31/71] temporarily use latest published ripple version

---
 src/livecodes/vendors.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 0945e7f014..322d05d4c4 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -397,7 +397,7 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.6/compiler');
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple/compiler'); // TODO: pin version
 
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 

From 05d6552a552b9cda6c936fc98126f8e878e5ef21 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:33 +0300
Subject: [PATCH 32/71] prepare for ripple formatter

---
 src/livecodes/languages/prettier.ts           |  1 +
 src/livecodes/languages/ripple/lang-ripple.ts | 10 +++++-----
 src/sdk/models.ts                             |  1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/languages/prettier.ts b/src/livecodes/languages/prettier.ts
index 41777117da..6639d84c21 100644
--- a/src/livecodes/languages/prettier.ts
+++ b/src/livecodes/languages/prettier.ts
@@ -11,4 +11,5 @@ export const parserPlugins = {
   php: prettierPhpUrl,
   pug: vendorsBaseUrl + 'prettier/parser-pug.js',
   java: vendorsBaseUrl + 'prettier/parser-java.js',
+  // ripple: vendorsBaseUrl + 'prettier/parser-ripple.js',
 };
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 8afe23152f..a33ada87c2 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -1,15 +1,15 @@
 import type { LanguageSpecs } from '../../models';
 import { rippleUrl } from '../../vendors';
-import { parserPlugins } from '../prettier';
+// import { parserPlugins } from '../prettier';
 
 export const ripple: LanguageSpecs = {
   name: 'ripple',
   title: 'Ripple',
   info: false,
-  parser: {
-    name: 'babel-ts',
-    pluginUrls: [parserPlugins.babel, parserPlugins.html],
-  },
+  // parser: {
+  //   name: 'ripple',
+  //   pluginUrls: [parserPlugins.ripple],
+  // },
   compiler: {
     factory: async () => {
       // TODO: convert to UMD
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 16bf986a7a..fb40a15e00 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1243,6 +1243,7 @@ export type ParserName =
   | 'babel-ts'
   | 'babel-flow'
   | 'glimmer'
+  | 'ripple'
   | 'html'
   | 'markdown'
   | 'css'

From b2cf421f2fe15a7660a8eec1c2af3b0782bb7cbb Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:33 +0300
Subject: [PATCH 33/71] minor fixes

---
 eslint.config.mjs                     |  1 +
 src/livecodes/editor/monaco/monaco.ts | 10 ++++------
 typos.toml                            |  1 +
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index aab8c872fb..bdb275ecf3 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -32,6 +32,7 @@ export default [
       '**/.jest',
       '**/.storybook',
       'functions/vendors',
+      'src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts',
     ],
   },
   ...fixupConfigRules(
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index b3eb0bcd0c..99ca505f3b 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -295,12 +295,10 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     await loadWASM(onigasmWasmUrl);
 
     const registry = new Registry({
-      getGrammarDefinition: async (scopeName: string) => {
-        return {
-          format: 'json',
-          content: langs.find((l) => l.scopeName === scopeName)?.syntax ?? '',
-        };
-      },
+      getGrammarDefinition: async (scopeName: string) => ({
+        format: 'json',
+        content: langs.find((l) => l.scopeName === scopeName)?.syntax ?? '',
+      }),
     });
 
     const grammars = new Map();
diff --git a/typos.toml b/typos.toml
index 629bd22d2b..b71e8ea5b4 100644
--- a/typos.toml
+++ b/typos.toml
@@ -8,6 +8,7 @@ extend-exclude = [
   "src/livecodes/services/google-fonts.ts",             # Font name
   "src/livecodes/templates/starter/blockly-starter.ts", # Random string id
   "functions/vendors/*.js",                             # Built files
+  "src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts"
 ]
 
 [default]

From b3240741556fc789d6c203f6f74ad68fc02d7625 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:33 +0300
Subject: [PATCH 34/71] add prettier-plugin-ripple

---
 src/livecodes/languages/prettier.ts           |  4 ++--
 src/livecodes/languages/ripple/lang-ripple.ts | 10 +++++-----
 src/livecodes/vendors.ts                      |  4 ++++
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/livecodes/languages/prettier.ts b/src/livecodes/languages/prettier.ts
index 6639d84c21..cd6d55457f 100644
--- a/src/livecodes/languages/prettier.ts
+++ b/src/livecodes/languages/prettier.ts
@@ -1,4 +1,4 @@
-import { prettierBaseUrl, prettierPhpUrl, vendorsBaseUrl } from '../vendors';
+import { prettierBaseUrl, prettierPhpUrl, prettierRippleUrl, vendorsBaseUrl } from '../vendors';
 
 export const prettierUrl = prettierBaseUrl + 'standalone.js';
 export const parserPlugins = {
@@ -11,5 +11,5 @@ export const parserPlugins = {
   php: prettierPhpUrl,
   pug: vendorsBaseUrl + 'prettier/parser-pug.js',
   java: vendorsBaseUrl + 'prettier/parser-java.js',
-  // ripple: vendorsBaseUrl + 'prettier/parser-ripple.js',
+  ripple: prettierRippleUrl,
 };
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index a33ada87c2..dab54bc9fa 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -1,15 +1,15 @@
 import type { LanguageSpecs } from '../../models';
 import { rippleUrl } from '../../vendors';
-// import { parserPlugins } from '../prettier';
+import { parserPlugins } from '../prettier';
 
 export const ripple: LanguageSpecs = {
   name: 'ripple',
   title: 'Ripple',
   info: false,
-  // parser: {
-  //   name: 'ripple',
-  //   pluginUrls: [parserPlugins.ripple],
-  // },
+  parser: {
+    name: 'ripple',
+    pluginUrls: [parserPlugins.ripple],
+  },
   compiler: {
     factory: async () => {
       // TODO: convert to UMD
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 322d05d4c4..903bbcbfea 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -343,6 +343,10 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
+export const prettierRippleUrl = /* @__PURE__ */ getUrl(
+  '@hatemhosny/prettier-plugin-ripple@0.0.2/build/parser-ripple.js',
+);
+
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');
 
 export const prismBaseUrl = /* @__PURE__ */ getUrl('prismjs@1.29.0/components/');

From 224bdac29144078f450057a70d7b5ceb5bef7bab Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:33 +0300
Subject: [PATCH 35/71] update ripple formatter

---
 src/livecodes/vendors.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 903bbcbfea..2d65cc92bb 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.2/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.3/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');
@@ -401,7 +401,7 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple/compiler'); // TODO: pin version
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.7/compiler'); // TODO: pin version
 
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 

From bea5b56d0d0efd0ee2ed98190d11426621b0f757 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:33 +0300
Subject: [PATCH 36/71] add ripple basic syntax highlight for codemirror and
 codejar

---
 src/livecodes/editor/monaco/monaco.ts         | 8 +++++---
 src/livecodes/languages/ripple/lang-ripple.ts | 1 +
 src/livecodes/vendors.ts                      | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 99ca505f3b..9e32ab8c16 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -94,9 +94,11 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
         ? 'csharp'
         : language.startsWith('vue')
           ? 'vue'
-          : ['svelte', 'malina', 'riot'].includes(language)
-            ? ('razor' as Language) // avoid mixing code between markup & script editors when formatting
-            : mapLanguage(language);
+          : language === 'ripple'
+            ? 'ripple'
+            : ['svelte', 'malina', 'riot'].includes(language)
+              ? ('razor' as Language) // avoid mixing code between markup & script editors when formatting
+              : mapLanguage(language);
 
   try {
     (window as any).monaco = (window as any).monaco || (await loadMonaco()).monaco;
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index dab54bc9fa..7ac5abff72 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -27,4 +27,5 @@ export const ripple: LanguageSpecs = {
   },
   extensions: ['ripple'],
   editor: 'script',
+  editorLanguage: 'jsx',
 };
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 2d65cc92bb..0c9b6d6683 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.3/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.5/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');
@@ -401,7 +401,7 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.7/compiler'); // TODO: pin version
+export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.12/compiler'); // TODO: pin version
 
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 

From ec6838b8b6950f382943a01d471e662a41167a75 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:33 +0300
Subject: [PATCH 37/71] use a workaround till ripple formatter is fixed

---
 src/livecodes/formatter/format.worker.ts | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/livecodes/formatter/format.worker.ts b/src/livecodes/formatter/format.worker.ts
index a6769c2bd9..0ee86a7d49 100644
--- a/src/livecodes/formatter/format.worker.ts
+++ b/src/livecodes/formatter/format.worker.ts
@@ -116,14 +116,20 @@ const format = async (
       singleQuote: formatterConfig.singleQuote ?? defaultConfig.singleQuote,
       trailingComma: formatterConfig.trailingComma === false ? 'none' : 'all',
     };
-    return (
-      (await (self as any).prettier.formatWithCursor(value, {
-        parser: parser?.name,
-        plugins: prettierPlugins,
-        cursorOffset,
-        ...options,
-      })) || unFormatted
-    );
+    const formatted = await (self as any).prettier.formatWithCursor(value, {
+      parser: parser?.name,
+      plugins: prettierPlugins,
+      cursorOffset,
+      ...options,
+    });
+
+    // TODO: remove when ripple plugin is fixed
+    if (formatted && language === 'ripple') {
+      formatted.formatted = formatted.formatted.replace(/,?\[object Object\],?/g, '');
+      if (formatted.cursorOffset < 1) formatted.cursorOffset = 1;
+    }
+
+    return formatted || unFormatted;
   }
   if (getFormatter(language) != null) {
     const formatFn = loadFormatter(language);

From fc56a4133e9cda89b04b4cf4a471530e4067cd26 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:33 +0300
Subject: [PATCH 38/71] revert formatting workaround

---
 src/livecodes/formatter/format.worker.ts | 22 ++++++++--------------
 src/livecodes/vendors.ts                 |  2 +-
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/livecodes/formatter/format.worker.ts b/src/livecodes/formatter/format.worker.ts
index 0ee86a7d49..a6769c2bd9 100644
--- a/src/livecodes/formatter/format.worker.ts
+++ b/src/livecodes/formatter/format.worker.ts
@@ -116,20 +116,14 @@ const format = async (
       singleQuote: formatterConfig.singleQuote ?? defaultConfig.singleQuote,
       trailingComma: formatterConfig.trailingComma === false ? 'none' : 'all',
     };
-    const formatted = await (self as any).prettier.formatWithCursor(value, {
-      parser: parser?.name,
-      plugins: prettierPlugins,
-      cursorOffset,
-      ...options,
-    });
-
-    // TODO: remove when ripple plugin is fixed
-    if (formatted && language === 'ripple') {
-      formatted.formatted = formatted.formatted.replace(/,?\[object Object\],?/g, '');
-      if (formatted.cursorOffset < 1) formatted.cursorOffset = 1;
-    }
-
-    return formatted || unFormatted;
+    return (
+      (await (self as any).prettier.formatWithCursor(value, {
+        parser: parser?.name,
+        plugins: prettierPlugins,
+        cursorOffset,
+        ...options,
+      })) || unFormatted
+    );
   }
   if (getFormatter(language) != null) {
     const formatFn = loadFormatter(language);
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 0c9b6d6683..923d3e4eae 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.5/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.6/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');

From 00683e9d7569bbab41c5937c0894b769acea30a0 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:33 +0300
Subject: [PATCH 39/71] add postFormat to parsers

---
 src/livecodes/formatter/format.worker.ts      | 18 ++++++++++--------
 src/livecodes/languages/ripple/lang-ripple.ts |  4 ++++
 src/livecodes/vendors.ts                      |  2 +-
 src/sdk/models.ts                             |  4 ++++
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/livecodes/formatter/format.worker.ts b/src/livecodes/formatter/format.worker.ts
index a6769c2bd9..d15e04adb5 100644
--- a/src/livecodes/formatter/format.worker.ts
+++ b/src/livecodes/formatter/format.worker.ts
@@ -116,14 +116,16 @@ const format = async (
       singleQuote: formatterConfig.singleQuote ?? defaultConfig.singleQuote,
       trailingComma: formatterConfig.trailingComma === false ? 'none' : 'all',
     };
-    return (
-      (await (self as any).prettier.formatWithCursor(value, {
-        parser: parser?.name,
-        plugins: prettierPlugins,
-        cursorOffset,
-        ...options,
-      })) || unFormatted
-    );
+    let formatted = await (self as any).prettier.formatWithCursor(value, {
+      parser: parser?.name,
+      plugins: prettierPlugins,
+      cursorOffset,
+      ...options,
+    });
+    if (typeof parser?.postFormat === 'function') {
+      formatted = await parser.postFormat(formatted);
+    }
+    return formatted || unFormatted;
   }
   if (getFormatter(language) != null) {
     const formatFn = loadFormatter(language);
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 7ac5abff72..d59a7a4fd7 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -9,6 +9,10 @@ export const ripple: LanguageSpecs = {
   parser: {
     name: 'ripple',
     pluginUrls: [parserPlugins.ripple],
+    postFormat: async (parsed: { formatted: string; cursorOffset: number }) => ({
+      formatted: parsed.formatted.replace(/,?\[object Object\],?/g, ''),
+      cursorOffset: parsed.cursorOffset,
+    }),
   },
   compiler: {
     factory: async () => {
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 923d3e4eae..0c9b6d6683 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.6/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.5/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index fb40a15e00..40f8abe05d 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1257,6 +1257,10 @@ export interface Parser {
   name: ParserName;
   plugins?: any[];
   pluginUrls: string[];
+  postFormat?: (parsed: {
+    formatted: string;
+    cursorOffset: number;
+  }) => Promise<{ formatted: string; cursorOffset: number }>;
 }
 export type FormatFn = (
   value: string,

From a8ee0a957391c46650e920ac97be05c30fbca283 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:34 +0300
Subject: [PATCH 40/71] edit

---
 src/livecodes/languages/ripple/lang-ripple.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index d59a7a4fd7..2b38132bc6 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -9,10 +9,14 @@ export const ripple: LanguageSpecs = {
   parser: {
     name: 'ripple',
     pluginUrls: [parserPlugins.ripple],
-    postFormat: async (parsed: { formatted: string; cursorOffset: number }) => ({
-      formatted: parsed.formatted.replace(/,?\[object Object\],?/g, ''),
-      cursorOffset: parsed.cursorOffset,
-    }),
+    postFormat: async (parsed: { formatted: string; cursorOffset: number }) => {
+      let formatted = parsed.formatted.replace(/,?\[object Object\],?/g, '');
+      if (!formatted.endsWith('\n')) formatted += '\n';
+      return {
+        formatted,
+        cursorOffset: parsed.cursorOffset,
+      };
+    },
   },
   compiler: {
     factory: async () => {

From 6d5f6d367d3b01aa1951d9087ba5402babdc31f8 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:34 +0300
Subject: [PATCH 41/71] add a todo comment

---
 src/livecodes/languages/ripple/lang-ripple.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 2b38132bc6..78a538945f 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -9,6 +9,7 @@ export const ripple: LanguageSpecs = {
   parser: {
     name: 'ripple',
     pluginUrls: [parserPlugins.ripple],
+    // TODO: remove this after fixing the prettier plugin
     postFormat: async (parsed: { formatted: string; cursorOffset: number }) => {
       let formatted = parsed.formatted.replace(/,?\[object Object\],?/g, '');
       if (!formatted.endsWith('\n')) formatted += '\n';

From 765861f7930dd0f0e2a83eabf3138feff4b6ca4c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:34 +0300
Subject: [PATCH 42/71] update ripple formatter and remove workaround

---
 src/livecodes/languages/ripple/lang-ripple.ts | 9 ---------
 src/livecodes/vendors.ts                      | 2 +-
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 78a538945f..7ac5abff72 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -9,15 +9,6 @@ export const ripple: LanguageSpecs = {
   parser: {
     name: 'ripple',
     pluginUrls: [parserPlugins.ripple],
-    // TODO: remove this after fixing the prettier plugin
-    postFormat: async (parsed: { formatted: string; cursorOffset: number }) => {
-      let formatted = parsed.formatted.replace(/,?\[object Object\],?/g, '');
-      if (!formatted.endsWith('\n')) formatted += '\n';
-      return {
-        formatted,
-        cursorOffset: parsed.cursorOffset,
-      };
-    },
   },
   compiler: {
     factory: async () => {
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 0c9b6d6683..6ae1b372bc 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.5/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.7/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');

From 0c1e45f540d83bc2115d00b8bda05e8533f2e7d2 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:34 +0300
Subject: [PATCH 43/71] allow changing ripple compiler version

---
 scripts/build.js                              |  1 +
 .../languages/ripple/lang-ripple-compiler.ts  | 46 +++++++++++++++++++
 src/livecodes/languages/ripple/lang-ripple.ts | 16 ++-----
 src/livecodes/vendors.ts                      |  2 -
 4 files changed, 50 insertions(+), 15 deletions(-)
 create mode 100644 src/livecodes/languages/ripple/lang-ripple-compiler.ts

diff --git a/scripts/build.js b/scripts/build.js
index 2b9d0550a5..e668ebe84e 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -237,6 +237,7 @@ const iifeBuild = () =>
       'languages/python-wasm/lang-python-wasm-script.ts',
       'languages/rescript/lang-rescript-formatter.ts',
       'languages/riot/lang-riot-compiler.ts',
+      'languages/ripple/lang-ripple-compiler.ts',
       'languages/ruby-wasm/lang-ruby-wasm-script.ts',
       'languages/scss/lang-scss-compiler.ts',
       'languages/solid/lang-solid-compiler.ts',
diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
new file mode 100644
index 0000000000..440617ab13
--- /dev/null
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -0,0 +1,46 @@
+import type { CompilerFunction, Config } from '../../models';
+import { modulesService } from '../../services/modules';
+
+(self as any).createRippleCompiler = async (initialConfig: Config): Promise<CompilerFunction> => {
+  let version = initialConfig.customSettings.ripple?.version || 'latest';
+  let compile: (code: string, filename: string) => Promise<{ js: { code: string }; css: string }>;
+
+  const updateCompiler = async (currentVersion: string) => {
+    if (typeof compile === 'function' && currentVersion === version) return;
+    const mod = await import(
+      /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${currentVersion}/compiler`)
+    );
+    compile = mod.compile;
+    version = currentVersion;
+  };
+
+  return async (code, { config }) => {
+    if (!code.trim()) return '';
+
+    const newVersion = config.customSettings.ripple?.version || version;
+    await updateCompiler(newVersion);
+
+    const { js, css } = await compile(code, './App.ripple');
+
+    const cssCode =
+      css === ''
+        ? ''
+        : `\n
+const styles = document.createElement('style');
+styles.innerHTML = ${JSON.stringify(css)};
+document.head.appendChild(styles);
+`;
+
+    const moduleUrl = /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${version}`);
+    return {
+      code: `${js.code}${cssCode}`,
+      info: {
+        imports: {
+          ripple: moduleUrl,
+          'ripple/internal': `${moduleUrl}/internal`,
+          'ripple/internal/client': `${moduleUrl}/internal/client`,
+        },
+      },
+    };
+  };
+};
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 7ac5abff72..9aacc74937 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -1,5 +1,4 @@
 import type { LanguageSpecs } from '../../models';
-import { rippleUrl } from '../../vendors';
 import { parserPlugins } from '../prettier';
 
 export const ripple: LanguageSpecs = {
@@ -11,18 +10,9 @@ export const ripple: LanguageSpecs = {
     pluginUrls: [parserPlugins.ripple],
   },
   compiler: {
-    factory: async () => {
-      // TODO: convert to UMD
-      const { compile } = await import(rippleUrl);
-      return async (code) => {
-        if (!code.trim()) return '';
-        const { js, css } = await compile(code, './src/App.ripple');
-        const cssCode =
-          css === ''
-            ? ''
-            : `\n\nconst styles = document.createElement('style');\nstyles.innerHTML = ${JSON.stringify(css)};\ndocument.head.appendChild(styles);\n`;
-        return `${js.code}${cssCode}`;
-      };
+    factory: (config, baseUrl) => {
+      (self as any).importScripts(baseUrl + '{{hash:lang-ripple-compiler.js}}');
+      return (self as any).createRippleCompiler(config);
     },
   },
   extensions: ['ripple'],
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 6ae1b372bc..c44a9dbda4 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -401,8 +401,6 @@ export const resetCssUrl = /* @__PURE__ */ getUrl('reset-css@5.0.1/reset.css');
 
 export const riotBaseUrl = /* @__PURE__ */ getUrl('riot@9.2.2/');
 
-export const rippleUrl = /* @__PURE__ */ getModuleUrl('ripple@0.2.12/compiler'); // TODO: pin version
-
 export const rubyWasmBaseUrl = /* @__PURE__ */ getUrl('@ruby/3.3-wasm-wasi@2.6.2/dist/');
 
 export const rubyWasmScriptUrl = /* @__PURE__ */ getUrl(

From bba104db3904a6b4d73fc93315d6ec0e66c73a8c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:34 +0300
Subject: [PATCH 44/71] add ripple starter template

---
 src/livecodes/assets/templates/ripple-0.png   | Bin 0 -> 4040 bytes
 .../i18n/locales/en/translation.lokalise.json |   4 ++
 src/livecodes/i18n/locales/en/translation.ts  |   1 +
 src/livecodes/templates/starter/index.ts      |   2 +
 .../templates/starter/ripple-starter.ts       |  46 ++++++++++++++++++
 src/sdk/models.ts                             |   1 +
 6 files changed, 54 insertions(+)
 create mode 100644 src/livecodes/assets/templates/ripple-0.png
 create mode 100644 src/livecodes/templates/starter/ripple-starter.ts

diff --git a/src/livecodes/assets/templates/ripple-0.png b/src/livecodes/assets/templates/ripple-0.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b30ea52ad417ca0f4d6360f18d770992de46277
GIT binary patch
literal 4040
zcmai1cQhMN+ox(3Q7cv|Rija{SCm*mjM}jkQEgL7h1M);2B}R|&Cr@vl&GS1#OSa`
zYgE*%)@Va(e(CxCd(U~#`^UY{dG2%1xzD}l+}}vFG)Hor6FNsnN5^4oq;E}&INEs5
z!bF?jEx<Eqfj+<*sYmzfBWRtLoV~4Urb|axpUQTGW~Ak;enyS~baa58e}kTUufmg#
zj`O;)zAh@*^+y4#pWOr>`P9?GNS-Z&u^Xt$D0=sGZrXWn9V?_kR$yOl$&Y3N#x}_g
zsX=^{l=V6(;iW-3-5D;UgqLVH#Kl-0mZ&;$=nMj=xA6AYTH_OB=GNSshdW2N+S7y1
zEa{x6Z_NgLgqJ4<*_?iHf7<%B<Rk}u!VF|CWyQyg#FDx&-4u6aG*<pu9ZbN?0rXfB
z3NYmPk8-+G_Jaox;!;yn55{4Y)zvmyZ~VU773>mD=dC+N|D;_>QT6FoSoym;{M?vl
zVzjxUx;1%p)OtrsR;r8YJ%y!yRzca@OBV?(+r(8>dCj&tN)_H)2>j{GQb|cjOzb-#
zRxeU^zXv;ys1?Op1yiqlEb4gFpne-Gd6}7<TBP%F#wCk4r}*Vd_M6Mglznw!D1f2Z
z{uA}Pnjch*;cy?^*&cqF9)7^?JKHR(X`W26&8G+ASW$L%ly3vj=e{#Z1sY>%1>r(*
zad8m2+B#}Ad19{T`wi+;%bhPx91%(@e+`8LU`eg58hQwXyq`{_crSUWi@Bw9u7^QI
zMaATyzfJGuz*rJmaejV&ZMvR;65m@KwvYR|L8%H(^G88kpO-b+9beyjL_%}<`ubun
zh@?~?nM5yL(%ZRcd&ykX!Xw9?1K;DJnKi{0l2Hg3TU=U7_8#16Zf+JJ5+_$J96+j~
zoeSW1q5FCmqdNa8DLq|u)H2yk%Wj(Go}8TK&L5*|`F}*>IZSmLZhaW9bzs2v+_DrZ
zUg!zmnao>~_h=@bL1U+RlXT~UmsG^X+2e|eYQ0qWfw<&#LBYf+w{XW`ZVL;G2`>>S
zAaAVP;$9nUFKF#~KBi*BN79;Pg+e_Cb!}$%V*?>f#zqO`fKntO#4^oGg}IWLefZNm
zzOu+d_muwl>*7y>(-uG?>I?%zueuwjgoFe{M!M(6)fgV+;QDOO+y&Rc#F9H>Wo4(l
ztE+CkU$)wCSy`xbh!R63<>IB!ZxC+F7mTT~VO+B%j1i}!4zaj5)-owOV-~{c`L6}D
znNDM@R^nr?Q81J5IqB)?Sy)*O9ULllgIJIlqlCq1$2YR9JdzQQW@iJcNDj~OrS11O
zhv`j$a_6ax@N2odjAdp;qM8YgY1Nmb8ZFP7Gpd-x1Z|9S!9(wpV>mT0-Zd0IQ>o^8
z<h<qaA=TT;%8KBWjPQzY6g|txL|HE{)c5nN^TIxEY`i|*5CpEOszTv+EPup!iDqqR
z1<7)fQ*M6kjEaFpP|lj)x|uj#ox7Vv-QTxAjRo}w{8grQHT}@gPnyI0X}m<wZEAc+
zYHv$B;pR|#k0&Y5?Ah<!;N^i6R`75KxaGn3Dh<18PAFi&GS$%hqvKJXKcA%82|FGr
zXP~PabzpmJDX)3gp^fDvIi7?*f4>Cw@EhdT$7eBd_$QRXZ0QaA-%8?=hU)8#Latvu
zu>vgAjL`wgmpJ^+aZ>hZ^vYySkHNP0{mCp6TAnvGUprF7G)IP9_KjC+-vxryFYs({
z@0)aS07>eId>gN{amZ~J5)>rcR%?j}DjW5J4ZA7wtX`Mqvzwg7H$6RJ&P1=cK%Xxx
zavr=;0MFZqC8oe1^J1^0)<|=69CNKfO3FXou}@h@;PrKK-D#(;lv!`qmOEDY(z$cz
zNM_B^-Fg!g7%F;uyE%x%ly>V(!q{N$m^v&>)t(45*VhkQrh2%P(VC?X864SjaV<Rf
z215z%QK<@0!9Ggeqa!?jdZegZxIf5?i-nCNCQrBK3>3gtVJ+RFnB;#FMem2kDvRjz
z<y@UM8A9Qg&K?{Jt4{p;k9^tLgUF86;xHLmSx|uTm9;9d?0qU_MOV-oh%Ak6`R(of
zJ7`0Vx`+NWvX(af*4xvR`F~+!&n11%_*izJkH7pmAkJVo*jrF00@bNxauEu^Z}0AA
zje=Yd4JH!G(hD54x-xZ#3;b>ta;3Yb<to)!mezPN-iV(5#QK#IkdGfP{J^l2Qb+eJ
z4k*N371qb}AnSVjLsA_);NQl-Xf#@MBXemuqi85cwgD!@Q{()`Ft5pH{4!ZRQVTp`
z+sE<gHufpInb_v&Tb|ENBXTJ(Z5%5U{Tj~Tdpy@}J@oYClv?7!uu0TNtI*m_9F~fU
z)kSPk^)6@qzCmU$DCwuja|ul;2m3Yt>}osflk<LXQ1yPuMSPDq=3rraku?F2&sJOy
z-kJ~hu&8-#1#qf^UF#%&5gxHhb^qN^I;;r2M!X8Ra6MD4+~lo7kemaE3DGSeU#IOF
zdIuW1zftK##jcM^fM9<8+w^~F=uN0jLM$z9uQX4^uBNHLiu#<#Tx?25SAyKJ0*_k#
zudJUR5s_=#c5eH%7u?&|XC(YdpDigfL$$af;dYS*U!&pk@WVg>cqp%=d46&5<0(>^
zL~gYzrf@pFbiE9E#vQvB>(7rS5E4>SxDRh=9sN4|GZq_^{q>h%<K0T_KSvgWgM;-R
zB$H)<Fk7Mker(G*7rrX}{`408AbZN}-0a-f^+ncuV6gJ9UwmRY(a+S7(gt)WX+qr4
zHx<l4n$?Y`lQkCIz5Cj{zj_~QcF%XMlhSiTxE&oGt@{KqV`pFazVcAXEzc>(j1t^4
z_bSgaGIl$wrwe?DWBVJtI>%}hxT4}pHFyGx;24IcM!tWVoZD~<Z<T$kO997|mft3*
z{qh=bK<|4R<pcmkuEzdlYc~iCY(ksCX-|LmedXquNhh4MHE4@VWBEM|9&9l67kxrL
z*P$~PRd{7+WFoGl#O8LbAl|lmGQlj<u8UH~g_54hZDNbeQx;52ti~R<yro~0qfy4$
zmdMwh>)Ja5mm^7iW&@NNF9#41F;Br9D2Sf>jBLGkN}rV@+~L!rRR@ELYoC^|TqSo<
zk<e3L#@*dr_K&|+*@3tLOEYn8Z7^H=^#prYVO*t~Ik_taM}pp0+K}Lg8e5gr4M}>R
zdAZ(qF7&AFX7#k1DO@m1=#4ZK5JNb3#nvWh(+JVG!;^H;H(|7OX2u-(bt<XLrRAaE
z_sj^r!4*`#Mi78Rk}wx#?_P%^LqnMqm6S-uA-Rp-Q$Pl0fMpQ~=g+5f`vd8Ak%daz
zs*S3-T*{ruqNtgGm6FCr6tSPiWdWP>M2?7vh$@l-q<^;Mfri$>A32k+Ax6Zj%;u*~
zm9MI}iMWgm>&haRWxl%L0Y&O51vbt%S$^-Hrq-?k;tf)mo(vKimUi!Z>}ai-QB*7E
zaf4Y*QqqYCV}_=L>2!VTHZUE(9IiQDBTW+s-Cu@GiPK;p8D3HIE-qJT6;hkaO#?yY
zoETYE^~`;D>@34M$y#1s_n-E^P<SoKACV{LIU`RGQTTUg>=76eqkjA6l%9AfVaQB5
z8jW$uM^Ev4c2g>tvsMaKyi>9?4ag}Mc%$?ePY&~{frtMp_o;p(lozl7NhA>lkYP#T
zt|z<qJYgJ)CRtfPa&{-${#siv6!2~-Jao|f+;peLX_FOSS~x7zFyS4cAGmjCq9k>#
z0>W<BhRe%S2wS_^Nx{&OOg49@M~v1RFf^KwV4FhZ;^L|zMbyEB=xS<<cMk_L%W2(v
z@O{!vR2Yn!<^m!a2%<jYB#F`jIS9n)8@%N~xFvC#?ce&!0*A2LVsGL#+CdS=2T7B3
zVAk&{o;?)5N8a|eQphh7)`p_P5F8SGA*C=K{?((QR{-BbKR7s4kG+x9c=Gt<SOmDk
z{Nb>U2MS=8f<Sq5(lC$mTrpcF54$aYuZ_&vB`N@MF(?$u{d?1o>3StI;#w(kAE&>f
z43W1aI&k6<%*xF^e|NVGR-d}|htY)9jkPatQhl!WIe@Mfn;9z~U=LFYstmx_TkiLz
zi7K!FSnXscyD7s1+0u*-Zxy*n+_G9WZCqe&-glS8NY`wt(b%<bDf`n+*HiWrFbn2f
zM)^jy&K!8enMQ(w0ycX(s)T=6L@b^Y(SbX3Dzv+eHG0&>oNQj~?4wvbK+Y1#tZzip
z2+=rg{}1*@sDhm?lR^x0seNtX_FmJ+usWEy?wkjX6KpUVpKNU?)ri4%_%~jt3{Lf%
z@X&$+5{Cg<W_cOuK_}5(Bg`+xOH08c;Syt34j^uVVuWEIR`k5!e9SBP$05Fr{gM4H
zLso7MpbWw^;<0o8kd4g2+FWan!zV7#tRC?xGajM%4L&-Sinj4j;@#4{L$&&(nT$lT
z^Dl=hp|JvVA*tizG9HbY?ET)uB}Ek#x@9l7nrTXuu0IT<o{_>KocY3RXMM6py01eW
zAcjmiU!NeTw&F4eZ_~1i^tpn17I9E{IlJgwxIx+f3#=k3jZZ>nvVX51BH==czHib6
zoQQW5%`a$_AaDT8yrxl`Kcv)Ti1Ci@u$*>mp{sp)(WcVPLH?(z;qh5{+pk$!S-XUn
zTuIGSZrP!qD_*uG;&WsvyDy|6vQmaVW->qb%v|1ua@ZZERcNVz_CQQ}cOD!Jl+Az?
zErfs4{0BSB`PQBFpFXP}3x=0vi(cB4*ZF(_P%TtIDeCO8l;j><Y64Lpuu!dv5#QsE
zp#q8A*8cBjXe`B^>;roqoJ#zj@!UdFS%_vghV=?)Lig^1Xu04F^q;QEwSE@XZlVs)
z*9tczeg*?^#=}3FKjhh@H+vDs+FWT{^rj$ETRK5LA@W+k+{UG9`Grmt@6D?j9f#n5
z+$J=@uEjHTfMCHaZV~DioSS?bh&nWE)?rl`+=w_>_Y{}#(Xq{j^LWxU$Hk~&nd3z8
z!&t|L)dV1-l?M1}Ld$%ad3ku_Ol|Ts|LH|@MMd9_1Ko;P)D)_;c)RN0_xCstfY6eT
zce`uEO;F(lIFk~eMMi)sKk=%Ca;Wsg6Wg2B)zy|LmsnT0m_gi#)uv0f56k@w!aQ5c
zzFzjYgy|FX@qxIfrzeYZ{cdtu?LzzY%f5>?MEmMRT=aZ_M$qChr`9;%Cx^*Ty2Eb6
z*Z<;GvDmiiL{;H_*TtLsYk85#v$B+hih&MB0s$Y15UFf&TCmhGC3Q^;1B?X!n;rch
dZk6tYu~W=+?8O+CX1?j@j1A27U+K9={~xCjifI4<

literal 0
HcmV?d00001

diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index d6d83d19e2..4221722691 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -2744,6 +2744,10 @@
     "notes": "",
     "translation": "Riot.js Starter"
   },
+  "templates.starter.ripple": {
+    "notes": "",
+    "translation": "Ripple Starter"
+  },
   "templates.starter.ruby": {
     "notes": "",
     "translation": "Ruby Starter"
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 7346431e9b..a3246661af 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -1032,6 +1032,7 @@ const translation = {
       reason: 'Reason Starter',
       rescript: 'ReScript Starter',
       riot: 'Riot.js Starter',
+      ripple: 'Ripple Starter',
       ruby: 'Ruby Starter',
       'ruby-wasm': 'Ruby (Wasm) Starter',
       scheme: 'Scheme Starter',
diff --git a/src/livecodes/templates/starter/index.ts b/src/livecodes/templates/starter/index.ts
index 1075d26834..032067f703 100644
--- a/src/livecodes/templates/starter/index.ts
+++ b/src/livecodes/templates/starter/index.ts
@@ -52,6 +52,7 @@ import { reactStarter } from './react-starter';
 import { reasonStarter } from './reason-starter';
 import { rescriptStarter } from './rescript-starter';
 import { riotStarter } from './riot-starter';
+import { rippleStarter } from './ripple-starter';
 import { rubyStarter } from './ruby-starter';
 import { rubyWasmStarter } from './ruby-wasm-starter';
 import { schemeStarter } from './scheme-starter';
@@ -79,6 +80,7 @@ export const starterTemplates = [
   preactStarter,
   svelteStarter,
   solidStarter,
+  rippleStarter,
   litStarter,
   stencilStarter,
   mdxStarter,
diff --git a/src/livecodes/templates/starter/ripple-starter.ts b/src/livecodes/templates/starter/ripple-starter.ts
new file mode 100644
index 0000000000..07f5124b90
--- /dev/null
+++ b/src/livecodes/templates/starter/ripple-starter.ts
@@ -0,0 +1,46 @@
+import type { Template } from '../../models';
+
+export const rippleStarter: Template = {
+  name: 'ripple',
+  title: window.deps.translateString('templates.starter.ripple', 'Ripple Starter'),
+  thumbnail: 'assets/templates/ripple-0.png',
+  activeEditor: 'script',
+  markup: {
+    language: 'html',
+    content: '',
+  },
+  style: {
+    language: 'css',
+    content: '',
+  },
+  script: {
+    language: 'ripple',
+    content: `
+component Counter(props: { $name: string }) {
+  <div class="container">
+    <h1>{\`Hello, \${props.\$name}!\`}</h1>
+    <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ripple-0.png" />
+
+    let \$count = 0;
+    <p>{\`You clicked \${\$count} times.\`}</p>
+    <button onClick={() => \$count++}>{'Click me'}</button>
+  </div>
+
+  <style>
+    .container,
+    .container button {
+      text-align: center;
+      font: 1em sans-serif;
+    }
+    .logo {
+      width: 150px;
+    }
+  </style>
+}
+
+export default component App() {
+  <Counter \$name="Ripple" />
+}
+`.trimStart(),
+  },
+};
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 40f8abe05d..c465302332 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1391,6 +1391,7 @@ export type TemplateName =
   | 'preact'
   | 'svelte'
   | 'solid'
+  | 'ripple'
   | 'lit'
   | 'stencil'
   | 'mdx'

From 7881b061313a6db6c3a12484369c7ecf3b64cf0c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:34 +0300
Subject: [PATCH 45/71] compile styles in ripple components

---
 src/livecodes/languages/ripple/lang-ripple-compiler.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index 440617ab13..07c16f507a 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -1,6 +1,9 @@
+import { compileBlocks } from '../../compiler';
 import type { CompilerFunction, Config } from '../../models';
 import { modulesService } from '../../services/modules';
 
+// TODO: recursively compile imported Ripple components
+
 (self as any).createRippleCompiler = async (initialConfig: Config): Promise<CompilerFunction> => {
   let version = initialConfig.customSettings.ripple?.version || 'latest';
   let compile: (code: string, filename: string) => Promise<{ js: { code: string }; css: string }>;
@@ -20,6 +23,8 @@ import { modulesService } from '../../services/modules';
     const newVersion = config.customSettings.ripple?.version || version;
     await updateCompiler(newVersion);
 
+    code = await compileBlocks(code, 'style', config);
+
     const { js, css } = await compile(code, './App.ripple');
 
     const cssCode =

From 0887ab8d3fd9fe7087929d2e3e0d606c8ef7e744 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:34 +0300
Subject: [PATCH 46/71] add docs for ripple support

---
 docs/docs/languages/ripple.mdx                | 401 ++++++++++++++++++
 docs/src/components/LanguageSliders.tsx       |   1 +
 docs/src/components/TemplateList.tsx          |   1 +
 src/livecodes/UI/command-menu-actions.ts      |   1 +
 src/livecodes/templates/starter/index.ts      |   2 +-
 .../templates/starter/ripple-starter.ts       |   2 +-
 6 files changed, 406 insertions(+), 2 deletions(-)
 create mode 100644 docs/docs/languages/ripple.mdx

diff --git a/docs/docs/languages/ripple.mdx b/docs/docs/languages/ripple.mdx
new file mode 100644
index 0000000000..93bfe5315a
--- /dev/null
+++ b/docs/docs/languages/ripple.mdx
@@ -0,0 +1,401 @@
+---
+toc_max_heading_level: 4
+---
+
+# Ripple
+
+[Ripple](https://www.ripplejs.com/) is a TypeScript UI framework that takes the best parts of React, Solid and Svelte and combines them into one package.
+
+## Usage
+
+Ripple components can be used in LiveCodes as documented in the [Ripple docs](https://github.com/trueadm/ripple). See below for usage.
+
+### Demo
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+export const demo = {
+  activeEditor: 'script',
+  script: {
+    language: 'ripple',
+    content: ` export default component Counter() {
+   let \$count = 0;
+   let \$doubled = \$count * 2;
+
+   <div class='container'>
+     <h2>{'Counter'}</h2>
+     <p>{\`Count: \${\$count}\`}</p>
+     <p>{\`Doubled: \${\$doubled}\`}</p>
+
+     <button onClick={() => \$count++}>{'Increment'}</button>
+     <button onClick={() => \$count = 0}>{'Reset'} </button>
+   </div>
+
+   <style>
+    .container {
+      text-align: center;
+      font-family: "Arial", sans-serif;
+    }
+
+    button {
+      font-size: 1em;
+      padding: 6px 12px;
+      margin: 0 6px;
+      cursor: pointer;
+      border: none;
+      font-family: "Courier New", monospace;
+    }
+
+    button:hover {
+      background-color: #e0e0e0;
+    }
+   </style>
+ }`,
+  },
+}
+
+<LiveCodes config={demo} />
+
+### Auto-rendering
+
+A component is mounted and rendered automatically as a Ripple component (without having to [manually mount](#manual-mount) it) if the following conditions are met:
+
+- The component is exported as the default export.
+- No [imports from `"./script"`](#exports) in markup editor.
+- Auto-rendering is not [disabled](#disabling-auto-rendering).
+
+### Root Element
+
+To mount the application instance to a specific DOM element use `"livecodes-app"` as the element `id` in the HTML. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used to mount the instance.
+
+Example:
+
+export const customRoot = {
+  markup: {
+    language: 'html',
+    content: `<h1>Custom Root Element</h1>
+<div id="livecodes-app"></div>
+<div>...other page content</div>
+`,
+  },
+  script: {
+    language: 'ripple',
+    content: `export default component App() {
+  let \$name = 'Ripple';
+  <div>{\`I'm a \${\$name} component\`}</div>
+  <style>
+    div {
+      color: #0e5ca3;
+      margin-bottom: 1em;
+    }
+  </style>
+}
+`,
+  },
+};
+
+<LiveCodes config={customRoot} />
+
+
+### Manual Mount
+
+Exports from Ripple code can be imported in [markup editor](../features/projects.mdx#markup-editor) from `"./script"` and used to mount the application instance manually.
+See [Exports](#exports) for details.
+
+Example:
+
+export const manualMount = {
+  markup: {
+    language: 'html',
+    content: `<h1>Manual Mount</h1>
+<div id="root"></div>
+<div>...other page content</div>
+
+<script type="module">
+  import { mount } from 'ripple';
+  import { App } from "./script";
+
+  mount(App, {
+    props: { name: 'Ripple' },
+    target: document.getElementById('root'),
+  });
+</script>
+`,
+  },
+  script: {
+    language: 'ripple',
+    content: `export component App(props: { name: string }) {
+  <div>{\`I'm a \${props.name} component\`}</div>
+  <style>
+    div {
+      color: #0e5ca3;
+      margin-bottom: 1em;
+    }
+  </style>
+}
+`,
+  },
+};
+
+<LiveCodes config={manualMount} />
+
+### Disabling Auto-rendering
+
+To disable [auto-rendering](#auto-rendering), set the [custom settings](#custom-settings) `disableAutoRender` property to `true`.
+
+```json title="Custom Settings"
+{
+  "ripple": {
+    "disableAutoRender": true
+  }
+}
+```
+
+### Module Imports
+
+npm modules can be imported as described in the section about [module resolution](../features/module-resolution.mdx), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `<link rel="stylesheet">` tags in the page `head`.
+
+Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.mdx#custom-module-resolution) documentations.
+
+Example:
+
+export const importsDemo = {
+  ripple: `import { effect } from "ripple";
+import confetti from "canvas-confetti";
+
+export default component App() {
+  <div class="container">
+    let $count = 0;
+
+    effect(() => {
+      if ($count === 2) confetti();
+    });
+
+    <button onClick={() => $count++}>{$count}</button>
+
+    if ($count > 1) {
+      <div>{'Greater than 1!'}</div>
+    }
+  </div>
+
+  <style>
+    button {
+      padding: 1rem;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+  </style>
+}
+`,
+};
+
+<LiveCodes  params={importsDemo}  formatCode={false} />
+
+
+{/*
+### Importing External Components
+
+External Svelte components can be imported. The import URL has to be an absolute URL ending with `.svelte` extension. Any bare or relative imports in the imported files are resolved and compiled recursively.
+
+Example:
+
+```html
+<script>
+  import Counter from 'https://raw.githubusercontent.com/user/repo/main/src/Counter.svelte';
+</script>
+
+<Counter />
+```
+ */}
+
+### Exports
+
+Values exported from [script editor](../features/projects.mdx#script-editor) (default or named) can be imported in the [markup editor](../features/projects.mdx#markup-editor) by importing from `"./script"` (with no extension).
+
+This can be useful, for example, for [manually mounting](#manual-mount) components in the markup editor.
+
+:::info note
+
+When values are imported from `"./script"`, [auto-rendering](#auto-rendering) is disabled, because it is assumed that you want to take control over component rendering.
+
+:::
+
+### Styles
+
+CSS can be applied to the component using various ways:
+
+#### Component Styles
+
+Styles in a `style` tag in a Ripple component are applied to that component only.
+
+CSS processors (e.g. SCSS, Stylus) can be used by specifying a `lang` attribute for the `style` tag.
+
+Example:
+
+export const styleTag = {
+  ripple: `export default component App() {
+  <h1>{'Hello World!'}</h1>
+
+  <style lang="scss">
+    $primary-color: #348734;
+    h1 {
+      color: $primary-color;
+    }
+  </style>
+}
+`
+}
+
+<RunInLiveCodes
+  params={styleTag}
+  code={styleTag.ripple}
+  language="jsx"
+  formatCode={false}
+></RunInLiveCodes>
+
+
+#### Style Editor
+
+Styles added in the [style editor](../features/projects.mdx#style-editor) are applied globally to the [result page](../features/result.mdx). This can use different **languages/processors** supported in LiveCodes including CSS, SCSS, Less, Stylus, ..etc. See [style documentation](../features/css.mdx) for more details.
+
+And of course, styles and stylesheets added in [markup editor](../features/projects.mdx#markup-editor) are also applied globally.
+
+#### Importing Stylesheets
+
+Stylesheets imported in [script editor](../features/projects.mdx#script-editor) are added as `<link rel="stylesheet">` tags in the page `head`.
+The stylesheet URL can be an absolute URL or a path in the npm package. The URL has to end with `".css"`.
+
+example:
+
+export const stylesDemo = {
+  ripple: `import "bootstrap/dist/css/bootstrap.css";\n\nexport default component App() {\n  <h1 class="m-5 text-center">{'Hello World!'}</h1>\n}\n`,
+};
+
+<RunInLiveCodes
+  params={stylesDemo}
+  code={stylesDemo.ripple}
+  language="jsx"
+  formatCode={false}
+></RunInLiveCodes>
+
+#### CSS Modules
+
+CSS modules are supported and are [documented separately](./cssmodules.mdx). Make sure to enable CSS modules (from style editor menu or in [`processors`](../configuration/configuration-object.mdx#processors) property of [configuration object](../configuration/configuration-object.mdx)).
+
+Demo:
+
+export const cssModulesDemo = {
+  activeEditor: 'script',
+  style: { language: 'css', content: `.title {\n  color: green;\n  font-family: sans-serif;\n}\n` },
+  script: {
+    language: 'ripple',
+    content: `import classes from './style.module.css';\n\nexport default component() {\n  <h1 class={classes.title}>\n    {'Hello, CSS Modules!'}\n  </h1>\n}\n`,
+  },
+  processors: ['cssmodules'],
+};
+
+<LiveCodes config={cssModulesDemo}></LiveCodes>
+
+#### CSS Frameworks
+
+[CSS Frameworks](../features/css.mdx#css-processors) supported in LiveCodes (e.g. [Tailwind CSS](./tailwindcss.mdx), [UnoCSS](./unocss.mdx), [WindiCSS](./windicss.mdx)) can detect class names added in Ripple components.
+Make sure that the required utility is enabled (from style editor menu or in `processors` property of [configuration object](../configuration/configuration-object.mdx#processors)).
+
+Example:
+
+export const tailwindDemo = {
+  activeEditor: 'script',
+  script: {
+    language: 'ripple',
+  content: `export default component Counter() {
+  let $count = 0;
+
+  <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+    <h1 class="text-2xl font-bold text-gray-800 mb-4">{'Ripple + Tailwind CSS'}</h1>
+    <div class="flex items-center space-x-4 mb-4">
+      <button
+        onClick={() => $count--}
+        class="w-12 px-4 py-2 bg-red-500 text-white rounded-lg shadow hover:bg-red-600 transition cursor-pointer"
+      >
+        {'-'}
+      </button>
+      <span class="text-3xl font-semibold text-gray-800">{$count}</span>
+      <button
+        onClick={() => $count++}
+        class="w-12 px-4 py-2 bg-green-500 text-white rounded-lg shadow hover:bg-green-600 transition cursor-pointer"
+      >
+        {'+'}
+      </button>
+    </div>
+    <button
+      onClick={() => $count = 0}
+      class="px-6 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition cursor-pointer"
+    >
+      {'Reset'}
+    </button>
+  </div>
+}
+`,
+  },
+  processors: ['tailwindcss'],
+};
+
+<LiveCodes config={tailwindDemo} />
+
+## Language Info
+
+### Name
+
+`ripple`
+
+### Extensions
+
+`.ripple`
+
+### Editor
+
+`script`
+
+## Compiler
+
+The official [Ripple compiler](https://github.com/trueadm/ripple).
+
+### Version
+
+`ripple`: v0.2.15
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.mdx) can be added to the property `ripple`.
+These include:
+
+- `"disableAutoRender"` - [disables auto-rendering](#disabling-auto-rendering) (default: `false`).
+- `"version"` - specifies the version of Ripple compiler (default: `"latest"`).
+
+Example:
+
+```json title="Custom Settings"
+{
+  "ripple": {
+    "version": "0.2.15"
+  }
+}
+```
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+## Starter Template
+
+https://livecodes.io/?template=ripple
+
+<LiveCodes template="ripple" height="400"></LiveCodes>
+
+## Links
+
+- [Ripple](https://ripplejs.com/)
+- [Ripple documentations](https://github.com/trueadm/ripple)
diff --git a/docs/src/components/LanguageSliders.tsx b/docs/src/components/LanguageSliders.tsx
index e1daff5ac6..9c51edf216 100644
--- a/docs/src/components/LanguageSliders.tsx
+++ b/docs/src/components/LanguageSliders.tsx
@@ -69,6 +69,7 @@ export default function Sliders() {
       { name: 'solid.tsx', title: 'Solid (TS)' },
       { name: 'riot', title: 'Riot.js' },
       { name: 'malina', title: 'Malina.js' },
+      { name: 'ripple', title: 'Ripple' },
       { name: 'coffeescript', title: 'CoffeeScript' },
       { name: 'livescript', title: 'LiveScript' },
       { name: 'civet', title: 'Civet' },
diff --git a/docs/src/components/TemplateList.tsx b/docs/src/components/TemplateList.tsx
index 126f377f72..e38688d7b8 100644
--- a/docs/src/components/TemplateList.tsx
+++ b/docs/src/components/TemplateList.tsx
@@ -23,6 +23,7 @@ const templates = [
   { name: 'astro', title: 'Astro Starter', thumbnail: 'astro.svg' },
   { name: 'riot', title: 'Riot.js Starter', thumbnail: 'riot.svg' },
   { name: 'malina', title: 'Malina.js Starter', thumbnail: 'malina.svg' },
+  { name: 'ripple', title: 'Ripple Starter', thumbnail: 'malina.svg' },
   { name: 'jquery', title: 'jQuery Starter', thumbnail: 'jquery.svg' },
   { name: 'backbone', title: 'Backbone Starter', thumbnail: 'backbone.svg' },
   { name: 'knockout', title: 'Knockout Starter', thumbnail: 'knockout.svg' },
diff --git a/src/livecodes/UI/command-menu-actions.ts b/src/livecodes/UI/command-menu-actions.ts
index d42de5ca55..fbed0aeb33 100644
--- a/src/livecodes/UI/command-menu-actions.ts
+++ b/src/livecodes/UI/command-menu-actions.ts
@@ -266,6 +266,7 @@ export const getCommandMenuActions = ({
         'preact',
         'svelte',
         'solid',
+        'ripple',
         'lit',
         'stencil',
         'mdx',
diff --git a/src/livecodes/templates/starter/index.ts b/src/livecodes/templates/starter/index.ts
index 032067f703..e6d68ed7fb 100644
--- a/src/livecodes/templates/starter/index.ts
+++ b/src/livecodes/templates/starter/index.ts
@@ -80,7 +80,6 @@ export const starterTemplates = [
   preactStarter,
   svelteStarter,
   solidStarter,
-  rippleStarter,
   litStarter,
   stencilStarter,
   mdxStarter,
@@ -91,6 +90,7 @@ export const starterTemplates = [
   astroStarter,
   riotStarter,
   malinaStarter,
+  rippleStarter,
   jqueryStarter,
   backboneStarter,
   knockoutStarter,
diff --git a/src/livecodes/templates/starter/ripple-starter.ts b/src/livecodes/templates/starter/ripple-starter.ts
index 07f5124b90..a74074c592 100644
--- a/src/livecodes/templates/starter/ripple-starter.ts
+++ b/src/livecodes/templates/starter/ripple-starter.ts
@@ -33,7 +33,7 @@ component Counter(props: { $name: string }) {
       font: 1em sans-serif;
     }
     .logo {
-      width: 150px;
+      width: 100px;
     }
   </style>
 }

From defbe25e9b293b2491a1cc688bdf3fc23e8d33ea Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:34 +0300
Subject: [PATCH 47/71] fix

---
 src/livecodes/languages/ripple/lang-ripple-compiler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index 07c16f507a..43a31a8347 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -1,4 +1,4 @@
-import { compileBlocks } from '../../compiler';
+import { compileBlocks } from '../../compiler/compile-blocks';
 import type { CompilerFunction, Config } from '../../models';
 import { modulesService } from '../../services/modules';
 

From d420059c393b594681c8b7da5cfcb2094f50cb27 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:34 +0300
Subject: [PATCH 48/71] allow importing external ripple components

---
 src/livecodes/compiler/import-map.ts          | 10 ++-
 .../languages/ripple/lang-ripple-compiler.ts  | 75 +++++++++++++++----
 2 files changed, 68 insertions(+), 17 deletions(-)

diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
index a915cd0040..ae70efb17c 100644
--- a/src/livecodes/compiler/import-map.ts
+++ b/src/livecodes/compiler/import-map.ts
@@ -144,6 +144,14 @@ export const isScriptImport = (mod: string) =>
       mod.toLowerCase().endsWith('.vue') ||
       mod.toLowerCase().endsWith('.svelte')));
 
+const isStyleImport = (mod: string) =>
+  mod.toLowerCase().startsWith('./style') ||
+  mod.toLowerCase().endsWith('.css') ||
+  mod.toLowerCase().endsWith('.scss') ||
+  mod.toLowerCase().endsWith('.sass') ||
+  mod.toLowerCase().endsWith('.less') ||
+  mod.toLowerCase().endsWith('.styl');
+
 const modulesCache: Record<string, string> = {};
 const fetchModule = async (mod: string) => {
   if (modulesCache[mod]) {
@@ -176,7 +184,7 @@ export const replaceSFCImports = async (
   const isExtensionless = (mod: string) =>
     mod.startsWith('.') && !mod.split('/')[mod.split('/').length - 1].includes('.');
   const sfcImports = getImports(code).filter(
-    (mod) => isSfc(mod) || isExtensionless(mod) || mod.startsWith('.'),
+    (mod) => !isStyleImport(mod) && (isSfc(mod) || isExtensionless(mod) || mod.startsWith('.')),
   );
   const projectImportMap = {
     ...config.imports,
diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index 43a31a8347..b51fe59c29 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -1,11 +1,22 @@
+import { createImportMap, getCompileResult, replaceSFCImports } from '../../compiler';
 import { compileBlocks } from '../../compiler/compile-blocks';
 import type { CompilerFunction, Config } from '../../models';
 import { modulesService } from '../../services/modules';
+import { getLanguageByAlias } from '../utils';
 
-// TODO: recursively compile imported Ripple components
+const getLatestVersion = async () => {
+  const pkg = await fetch('https://data.jsdelivr.com/v1/packages/npm/ripple')
+    .then((res) => res.json())
+    .catch(() => ({}));
+  return pkg.tags?.latest || 'latest';
+};
 
 (self as any).createRippleCompiler = async (initialConfig: Config): Promise<CompilerFunction> => {
-  let version = initialConfig.customSettings.ripple?.version || 'latest';
+  const MAIN_FILE = '__LiveCodes_App__.ripple';
+  let importedContent = '';
+  let imports: Record<string, string> = {};
+
+  let version: string = initialConfig.customSettings.ripple?.version || (await getLatestVersion());
   let compile: (code: string, filename: string) => Promise<{ js: { code: string }; css: string }>;
 
   const updateCompiler = async (currentVersion: string) => {
@@ -17,35 +28,67 @@ import { modulesService } from '../../services/modules';
     version = currentVersion;
   };
 
-  return async (code, { config }) => {
-    if (!code.trim()) return '';
+  const compileRipple = async (
+    code: string,
+    { config, filename }: { config: Config; filename: string },
+  ) => {
+    if (filename === MAIN_FILE) {
+      importedContent = '';
+      imports = {};
+    }
+    if (!code.trim()) return getCompileResult('');
 
     const newVersion = config.customSettings.ripple?.version || version;
     await updateCompiler(newVersion);
 
-    code = await compileBlocks(code, 'style', config);
+    const isRipple = (mod: string) =>
+      mod.toLowerCase().endsWith('.ripple') || mod.toLowerCase().startsWith('data:text/ripple');
 
-    const { js, css } = await compile(code, './App.ripple');
+    const fullCode = await replaceSFCImports(code, {
+      config,
+      filename,
+      getLanguageByAlias,
+      isSfc: isRipple,
+      compileSFC: async (
+        code: string,
+        { config, filename }: { config: Config; filename: string },
+      ) => {
+        const compiled = (await compileRipple(code, { config, filename })).code;
+        importedContent += `\n${filename}\n\n${code}\n`;
+        return compiled;
+      },
+    });
+    const processedCode = await compileBlocks(fullCode, 'style', config);
+    const { js, css } = await compile(processedCode, filename);
 
     const cssCode =
       css === ''
         ? ''
-        : `\n
+        : `
 const styles = document.createElement('style');
 styles.innerHTML = ${JSON.stringify(css)};
 document.head.appendChild(styles);
 `;
 
-    const moduleUrl = /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${version}`);
+    if (filename === MAIN_FILE) {
+      const moduleUrl = /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${version}`);
+      imports = {
+        ...createImportMap(importedContent, config),
+        ripple: moduleUrl,
+        'ripple/internal': `${moduleUrl}/internal`,
+        'ripple/internal/client': `${moduleUrl}/internal/client`,
+      };
+    }
+
     return {
-      code: `${js.code}${cssCode}`,
-      info: {
-        imports: {
-          ripple: moduleUrl,
-          'ripple/internal': `${moduleUrl}/internal`,
-          'ripple/internal/client': `${moduleUrl}/internal/client`,
-        },
-      },
+      code: `${js.code}\n${cssCode}`,
+      info: { importedContent, imports },
     };
   };
+
+  return (code, { config }) =>
+    compileRipple(code, {
+      config,
+      filename: MAIN_FILE,
+    });
 };

From 56805b0c1461c6ef87e25bdd63d62cd333e8b534 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:34 +0300
Subject: [PATCH 49/71] edit ripple docs

---
 docs/docs/languages/ripple.mdx | 70 +++++++++++++++++++++++-----------
 1 file changed, 48 insertions(+), 22 deletions(-)

diff --git a/docs/docs/languages/ripple.mdx b/docs/docs/languages/ripple.mdx
index 93bfe5315a..62e5df4610 100644
--- a/docs/docs/languages/ripple.mdx
+++ b/docs/docs/languages/ripple.mdx
@@ -6,11 +6,9 @@ toc_max_heading_level: 4
 
 [Ripple](https://www.ripplejs.com/) is a TypeScript UI framework that takes the best parts of React, Solid and Svelte and combines them into one package.
 
-## Usage
-
 Ripple components can be used in LiveCodes as documented in the [Ripple docs](https://github.com/trueadm/ripple). See below for usage.
 
-### Demo
+## Demo
 
 import LiveCodes from '../../src/components/LiveCodes.tsx';
 import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
@@ -57,6 +55,9 @@ export const demo = {
 
 <LiveCodes config={demo} />
 
+
+## Mounting
+
 ### Auto-rendering
 
 A component is mounted and rendered automatically as a Ripple component (without having to [manually mount](#manual-mount) it) if the following conditions are met:
@@ -68,6 +69,7 @@ A component is mounted and rendered automatically as a Ripple component (without
 ### Root Element
 
 To mount the application instance to a specific DOM element use `"livecodes-app"` as the element `id` in the HTML. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used to mount the instance.
+In case you need more control, you can [manually mount](#manual-mount) the instance.
 
 Example:
 
@@ -152,9 +154,11 @@ To disable [auto-rendering](#auto-rendering), set the [custom settings](#custom-
 }
 ```
 
-### Module Imports
+## Importing Modules
 
-npm modules can be imported as described in the section about [module resolution](../features/module-resolution.mdx), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `<link rel="stylesheet">` tags in the page `head`.
+### NPM Modules
+
+npm modules can be imported as described in the section about [module resolution](../features/module-resolution.mdx), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `<link rel="stylesheet">` tags in the page `head` (see [below](#importing-stylesheets)).
 
 Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.mdx#custom-module-resolution) documentations.
 
@@ -192,22 +196,44 @@ export default component App() {
 
 <LiveCodes  params={importsDemo}  formatCode={false} />
 
+### External Components
 
-{/*
-### Importing External Components
+External Ripple components can be imported.
+The import URL can be either:
+- An absolute URL ending with `.ripple` extension.
+- A [bare module import](../features/module-resolution.mdx#bare-module-imports) for a published npm module with full path to the component with extension.
+- A [data URL](../features/data-urls.mdx) starting with `data:text/ripple`.
 
-External Svelte components can be imported. The import URL has to be an absolute URL ending with `.svelte` extension. Any bare or relative imports in the imported files are resolved and compiled recursively.
+Any bare or relative imports in the imported files are resolved and compiled recursively.
+If a processor is enabled (e.g. Tailwind CSS), classes in the imported files are detected and used in the generated CSS (see [CSS Frameworks](#css-frameworks) section below).
 
-Example:
+Example: ([source](https://github.com/hatemhosny/ripple-tailwind-counter-demo))
 
-```html
-<script>
-  import Counter from 'https://raw.githubusercontent.com/user/repo/main/src/Counter.svelte';
-</script>
+export const externalComponents = {
+  activeEditor: 'script',
+  script: {
+    language: 'ripple',
+    content: `// import from npm modules
+import Counter from 'ripple-tailwind-counter-demo/src/Counter.ripple';
+// alternatively use absolute URLs
+// import Counter from 'https://raw.githubusercontent.com/hatemhosny/ripple-tailwind-counter-demo/refs/heads/main/src/Counter.ripple';
 
-<Counter />
-```
- */}
+
+export default component App() {
+  let $name = "World";
+
+  setTimeout(() => {
+    $name = "Ripple + Tailwind!";
+  }, 2000);
+
+ <Counter $name={$name} />
+}
+`,
+  },
+  processors: ['tailwindcss'],
+}
+
+<LiveCodes config={externalComponents} />
 
 ### Exports
 
@@ -221,11 +247,11 @@ When values are imported from `"./script"`, [auto-rendering](#auto-rendering) is
 
 :::
 
-### Styles
+## Styles
 
 CSS can be applied to the component using various ways:
 
-#### Component Styles
+### Component Styles
 
 Styles in a `style` tag in a Ripple component are applied to that component only.
 
@@ -255,13 +281,13 @@ export const styleTag = {
 ></RunInLiveCodes>
 
 
-#### Style Editor
+### Style Editor
 
 Styles added in the [style editor](../features/projects.mdx#style-editor) are applied globally to the [result page](../features/result.mdx). This can use different **languages/processors** supported in LiveCodes including CSS, SCSS, Less, Stylus, ..etc. See [style documentation](../features/css.mdx) for more details.
 
 And of course, styles and stylesheets added in [markup editor](../features/projects.mdx#markup-editor) are also applied globally.
 
-#### Importing Stylesheets
+### Importing Stylesheets
 
 Stylesheets imported in [script editor](../features/projects.mdx#script-editor) are added as `<link rel="stylesheet">` tags in the page `head`.
 The stylesheet URL can be an absolute URL or a path in the npm package. The URL has to end with `".css"`.
@@ -279,7 +305,7 @@ export const stylesDemo = {
   formatCode={false}
 ></RunInLiveCodes>
 
-#### CSS Modules
+### CSS Modules
 
 CSS modules are supported and are [documented separately](./cssmodules.mdx). Make sure to enable CSS modules (from style editor menu or in [`processors`](../configuration/configuration-object.mdx#processors) property of [configuration object](../configuration/configuration-object.mdx)).
 
@@ -297,7 +323,7 @@ export const cssModulesDemo = {
 
 <LiveCodes config={cssModulesDemo}></LiveCodes>
 
-#### CSS Frameworks
+### CSS Frameworks
 
 [CSS Frameworks](../features/css.mdx#css-processors) supported in LiveCodes (e.g. [Tailwind CSS](./tailwindcss.mdx), [UnoCSS](./unocss.mdx), [WindiCSS](./windicss.mdx)) can detect class names added in Ripple components.
 Make sure that the required utility is enabled (from style editor menu or in `processors` property of [configuration object](../configuration/configuration-object.mdx#processors)).

From 6848574f524fdde71915e524326332cb90fc9875 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 6 Sep 2025 21:32:34 +0300
Subject: [PATCH 50/71] upgrade ripple formatter

---
 src/livecodes/languages/ripple/lang-ripple-compiler.ts | 3 ++-
 src/livecodes/vendors.ts                               | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index b51fe59c29..c3f7a85b0c 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -1,5 +1,6 @@
-import { createImportMap, getCompileResult, replaceSFCImports } from '../../compiler';
 import { compileBlocks } from '../../compiler/compile-blocks';
+import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
+import { getCompileResult } from '../../compiler/utils';
 import type { CompilerFunction, Config } from '../../models';
 import { modulesService } from '../../services/modules';
 import { getLanguageByAlias } from '../utils';
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index c44a9dbda4..df06b73a82 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -344,7 +344,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.7/build/parser-ripple.js',
+  '@hatemhosny/prettier-plugin-ripple@0.0.8/build/parser-ripple.js',
 );
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');

From a57b44a290b2d6d7ca240d5a4d232198e9b4e1b0 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 7 Sep 2025 00:42:45 +0300
Subject: [PATCH 51/71] use esm plugin for prettier

---
 src/livecodes/formatter/format.worker.ts | 47 ++++++++++++++----------
 src/livecodes/vendors.ts                 |  4 +-
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/livecodes/formatter/format.worker.ts b/src/livecodes/formatter/format.worker.ts
index d15e04adb5..bdb59f60ba 100644
--- a/src/livecodes/formatter/format.worker.ts
+++ b/src/livecodes/formatter/format.worker.ts
@@ -46,7 +46,7 @@ const load = (languages: Language[]) => {
   }
 };
 
-function loadParser(language: Language): Parser | undefined {
+async function loadParser(language: Language): Promise<Parser | undefined> {
   if (!(self as any).prettier) {
     loadPrettier();
   }
@@ -60,26 +60,33 @@ function loadParser(language: Language): Parser | undefined {
   if (!(self as any).prettierPlugins) {
     (self as any).prettierPlugins = {};
   }
-  parser.plugins = parser.pluginUrls
-    .map((pluginUrl) => {
-      if (plugins[pluginUrl]) return true;
-      try {
-        importScripts(pluginUrl);
-        plugins[pluginUrl] = true;
-        if (!prettierPlugins.pug && (self as any).pluginPug) {
-          prettierPlugins.pug = (self as any).pluginPug;
+  parser.plugins = (
+    await Promise.all(
+      parser.pluginUrls.map(async (pluginUrl) => {
+        if (plugins[pluginUrl]) return true;
+        if (language === 'ripple') {
+          const p = await import(pluginUrl);
+          prettierPlugins[language] = p;
+          return true;
         }
-        if (!prettierPlugins.java && (self as any).pluginJava?.default) {
-          prettierPlugins.java = (self as any).pluginJava.default;
+        try {
+          importScripts(pluginUrl);
+          plugins[pluginUrl] = true;
+          if (!prettierPlugins.pug && (self as any).pluginPug) {
+            prettierPlugins.pug = (self as any).pluginPug;
+          }
+          if (!prettierPlugins.java && (self as any).pluginJava?.default) {
+            prettierPlugins.java = (self as any).pluginJava.default;
+          }
+          return true;
+        } catch {
+          // eslint-disable-next-line no-console
+          console.warn('Failed to load formatter for: ' + language);
+          return false;
         }
-        return true;
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.warn('Failed to load formatter for: ' + language);
-        return false;
-      }
-    })
-    .filter(Boolean);
+      }),
+    )
+  ).filter(Boolean);
 
   if (parser.plugins.length > 0) {
     parsers[language] = parser;
@@ -108,7 +115,7 @@ const format = async (
   const unFormatted = { formatted: value, cursorOffset };
 
   if (getParser(language) != null) {
-    const parser = loadParser(language);
+    const parser = await loadParser(language);
     const options = {
       useTabs: formatterConfig.useTabs ?? defaultConfig.useTabs,
       tabWidth: formatterConfig.tabSize ?? defaultConfig.tabSize,
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index df06b73a82..ed60d715f2 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -343,9 +343,7 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
-export const prettierRippleUrl = /* @__PURE__ */ getUrl(
-  '@hatemhosny/prettier-plugin-ripple@0.0.8/build/parser-ripple.js',
-);
+export const prettierRippleUrl = /* @__PURE__ */ getModuleUrl('prettier-plugin-ripple@0.2.25');
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');
 

From b10c3c32e3ba7f36d9eaa0f715f1839b395c19b1 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 9 Sep 2025 17:49:46 +0300
Subject: [PATCH 52/71] allow loading ripple compiler & formatter from
 pkg.pr.new

---
 scripts/build.js                              |  1 +
 src/livecodes/formatter/format.worker.ts      | 12 ++++----
 src/livecodes/formatter/formatter.ts          |  6 ++--
 src/livecodes/formatter/get-formatter.ts      |  8 +++---
 src/livecodes/formatter/models.ts             |  7 +++--
 src/livecodes/languages/prettier.ts           |  3 +-
 .../languages/ripple/lang-ripple-compiler.ts  | 22 +++++++--------
 .../languages/ripple/lang-ripple-formatter.ts | 28 +++++++++++++++++++
 src/livecodes/languages/ripple/lang-ripple.ts |  9 +++---
 src/livecodes/services/pkgInfo.ts             |  8 ++++++
 src/livecodes/vendors.ts                      |  2 ++
 src/sdk/models.ts                             |  3 +-
 12 files changed, 76 insertions(+), 33 deletions(-)
 create mode 100644 src/livecodes/languages/ripple/lang-ripple-formatter.ts

diff --git a/scripts/build.js b/scripts/build.js
index e668ebe84e..b179b6b368 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -238,6 +238,7 @@ const iifeBuild = () =>
       'languages/rescript/lang-rescript-formatter.ts',
       'languages/riot/lang-riot-compiler.ts',
       'languages/ripple/lang-ripple-compiler.ts',
+      'languages/ripple/lang-ripple-formatter.ts',
       'languages/ruby-wasm/lang-ruby-wasm-script.ts',
       'languages/scss/lang-scss-compiler.ts',
       'languages/solid/lang-solid-compiler.ts',
diff --git a/src/livecodes/formatter/format.worker.ts b/src/livecodes/formatter/format.worker.ts
index bdb59f60ba..99aaa06d56 100644
--- a/src/livecodes/formatter/format.worker.ts
+++ b/src/livecodes/formatter/format.worker.ts
@@ -1,6 +1,6 @@
 import { defaultConfig } from '../config/default-config';
 import { languages, parserPlugins, prettierUrl } from '../languages';
-import type { FormatFn, FormatterConfig, Language, Parser } from '../models';
+import type { Config, FormatFn, FormatterConfig, Language, Parser } from '../models';
 import type { FormatterMessage, FormatterMessageEvent } from './models';
 
 const worker: Worker = self as any;
@@ -9,6 +9,7 @@ declare const prettierPlugins: { [key: string]: { parsers: any } };
 declare const importScripts: (...args: string[]) => void;
 
 let baseUrl: string;
+let initialConfig: Config;
 const parsers: { [key: string]: Parser } = {};
 const plugins: { [key: string]: any } = {};
 const formatters: { [key: string]: FormatFn } = {};
@@ -94,7 +95,7 @@ async function loadParser(language: Language): Promise<Parser | undefined> {
   return parser;
 }
 
-const loadFormatter = (language: Language): FormatFn | undefined => {
+const loadFormatter = async (language: Language): Promise<FormatFn | undefined> => {
   if (language in formatters) {
     return formatters[language];
   }
@@ -102,7 +103,7 @@ const loadFormatter = (language: Language): FormatFn | undefined => {
   const formatter = getFormatter(language);
   if (!formatter) return;
 
-  formatters[language] = formatter.factory(baseUrl, language);
+  formatters[language] = await formatter.factory(baseUrl, language, initialConfig);
   return formatters[language];
 };
 
@@ -135,7 +136,7 @@ const format = async (
     return formatted || unFormatted;
   }
   if (getFormatter(language) != null) {
-    const formatFn = loadFormatter(language);
+    const formatFn = await loadFormatter(language);
     const result = await formatFn?.(value, cursorOffset);
     return result || unFormatted;
   }
@@ -148,7 +149,8 @@ worker.addEventListener(
     const message = event.data;
 
     if (message.type === 'init') {
-      baseUrl = message.baseUrl;
+      baseUrl = message.payload.baseUrl;
+      initialConfig = message.payload.config;
     }
 
     if (message.type === 'load') {
diff --git a/src/livecodes/formatter/formatter.ts b/src/livecodes/formatter/formatter.ts
index 82e0441558..f9a24737c8 100644
--- a/src/livecodes/formatter/formatter.ts
+++ b/src/livecodes/formatter/formatter.ts
@@ -1,14 +1,14 @@
-import type { FormatFn, Language } from '../models';
+import type { Config, FormatFn, Language } from '../models';
 import { getAppCDN } from '../services/modules';
 import type { Formatter, FormatterMessage, FormatterMessageEvent } from './models';
 
-export const createFormatter = (baseUrl: string): Formatter => {
+export const createFormatter = (baseUrl: string, config: Config): Formatter => {
   let worker: Worker | undefined;
 
   const initWorker = () => {
     if (worker) return;
     worker = new Worker(baseUrl + '{{hash:format.worker.js}}' + '?appCDN=' + getAppCDN());
-    const configMessage: FormatterMessage = { type: 'init', baseUrl };
+    const configMessage: FormatterMessage = { type: 'init', payload: { baseUrl, config } };
     worker.postMessage(configMessage);
   };
 
diff --git a/src/livecodes/formatter/get-formatter.ts b/src/livecodes/formatter/get-formatter.ts
index cdec830d79..31e587a10b 100644
--- a/src/livecodes/formatter/get-formatter.ts
+++ b/src/livecodes/formatter/get-formatter.ts
@@ -8,13 +8,13 @@ export const getFormatter = (config: Config, baseUrl: string, lazy: boolean): Fo
   if (readonly || mode === 'codeblock' || mode === 'result') {
     return createFakeFormatter();
   } else if (lazy) {
-    return createLazyFormatter(baseUrl);
+    return createLazyFormatter(baseUrl, config);
   } else {
-    return createFormatter(baseUrl);
+    return createFormatter(baseUrl, config);
   }
 };
 
-const createLazyFormatter = (baseUrl: string) => {
+const createLazyFormatter = (baseUrl: string, config: Config) => {
   const fakeFormatter = createFakeFormatter();
   let formatter = fakeFormatter;
 
@@ -34,7 +34,7 @@ const createLazyFormatter = (baseUrl: string) => {
   };
 
   const loadFormatter = function () {
-    formatter = createFormatter(baseUrl);
+    formatter = createFormatter(baseUrl, config);
     lazyFormatter.load = formatter.load;
     lazyFormatter.getFormatFn = formatter.getFormatFn;
     lazyFormatter.destroy = formatter.destroy;
diff --git a/src/livecodes/formatter/models.ts b/src/livecodes/formatter/models.ts
index a384b00fd8..0fc780083a 100644
--- a/src/livecodes/formatter/models.ts
+++ b/src/livecodes/formatter/models.ts
@@ -1,4 +1,4 @@
-import type { FormatFn, FormatterConfig, Language } from '../models';
+import type { Config, FormatFn, FormatterConfig, Language } from '../models';
 
 export interface Formatter {
   load: (languages: Language[]) => Promise<string>;
@@ -21,7 +21,10 @@ export type FormatterMessage =
 
 export interface InitMessage {
   type: 'init';
-  baseUrl: string;
+  payload: {
+    baseUrl: string;
+    config: Config;
+  };
 }
 
 export interface LoadMessage {
diff --git a/src/livecodes/languages/prettier.ts b/src/livecodes/languages/prettier.ts
index cd6d55457f..41777117da 100644
--- a/src/livecodes/languages/prettier.ts
+++ b/src/livecodes/languages/prettier.ts
@@ -1,4 +1,4 @@
-import { prettierBaseUrl, prettierPhpUrl, prettierRippleUrl, vendorsBaseUrl } from '../vendors';
+import { prettierBaseUrl, prettierPhpUrl, vendorsBaseUrl } from '../vendors';
 
 export const prettierUrl = prettierBaseUrl + 'standalone.js';
 export const parserPlugins = {
@@ -11,5 +11,4 @@ export const parserPlugins = {
   php: prettierPhpUrl,
   pug: vendorsBaseUrl + 'prettier/parser-pug.js',
   java: vendorsBaseUrl + 'prettier/parser-java.js',
-  ripple: prettierRippleUrl,
 };
diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index c3f7a85b0c..c5a9432858 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -3,28 +3,26 @@ import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
 import { getCompileResult } from '../../compiler/utils';
 import type { CompilerFunction, Config } from '../../models';
 import { modulesService } from '../../services/modules';
+import { pkgInfoService } from '../../services/pkgInfo';
 import { getLanguageByAlias } from '../utils';
 
-const getLatestVersion = async () => {
-  const pkg = await fetch('https://data.jsdelivr.com/v1/packages/npm/ripple')
-    .then((res) => res.json())
-    .catch(() => ({}));
-  return pkg.tags?.latest || 'latest';
-};
-
 (self as any).createRippleCompiler = async (initialConfig: Config): Promise<CompilerFunction> => {
   const MAIN_FILE = '__LiveCodes_App__.ripple';
   let importedContent = '';
   let imports: Record<string, string> = {};
 
-  let version: string = initialConfig.customSettings.ripple?.version || (await getLatestVersion());
+  let version: string =
+    initialConfig.customSettings.ripple?.version ||
+    (await pkgInfoService.getPkgLatestVersion('ripple'));
   let compile: (code: string, filename: string) => Promise<{ js: { code: string }; css: string }>;
 
   const updateCompiler = async (currentVersion: string) => {
     if (typeof compile === 'function' && currentVersion === version) return;
-    const mod = await import(
-      /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${currentVersion}/compiler`)
-    );
+    const modName =
+      currentVersion.startsWith('pr:ripple@') || currentVersion.startsWith('pkg.pr.new:ripple@')
+        ? `${currentVersion}/compiler` // 'pr:ripple@f8bdb34'
+        : `ripple@${currentVersion}/compiler`; // '0.2.25'
+    const mod = await import(modulesService.getModuleUrl(modName));
     compile = mod.compile;
     version = currentVersion;
   };
@@ -72,7 +70,7 @@ document.head.appendChild(styles);
 `;
 
     if (filename === MAIN_FILE) {
-      const moduleUrl = /* @__PURE__ */ modulesService.getModuleUrl(`ripple@${version}`);
+      const moduleUrl = modulesService.getModuleUrl(`ripple@${version}`);
       imports = {
         ...createImportMap(importedContent, config),
         ripple: moduleUrl,
diff --git a/src/livecodes/languages/ripple/lang-ripple-formatter.ts b/src/livecodes/languages/ripple/lang-ripple-formatter.ts
new file mode 100644
index 0000000000..da981c954c
--- /dev/null
+++ b/src/livecodes/languages/ripple/lang-ripple-formatter.ts
@@ -0,0 +1,28 @@
+import { defaultConfig } from '../../config/default-config';
+import type { Config, FormatFn } from '../../models';
+import { modulesService } from '../../services/modules';
+import { pkgInfoService } from '../../services/pkgInfo';
+import { prettierEsmUrl, prettierRippleUrl } from '../../vendors';
+
+(self as any).createRippleFormatter = async (initialConfig: Config): Promise<FormatFn> => {
+  const version =
+    initialConfig.customSettings.ripple?.version ||
+    (await pkgInfoService.getPkgLatestVersion('ripple'));
+  const pluginUrl =
+    version.startsWith('pr:ripple@') || version.startsWith('pkg.pr.new:ripple@')
+      ? modulesService.getModuleUrl(version.replace('ripple', 'prettier-plugin-ripple'))
+      : prettierRippleUrl;
+
+  const [prettier, ripplePlugin] = await Promise.all([import(prettierEsmUrl), import(pluginUrl)]);
+  return async (code, cursorOffset, formatterConfig) =>
+    prettier.formatWithCursor(code, {
+      parser: 'ripple',
+      plugins: [ripplePlugin],
+      cursorOffset,
+      useTabs: formatterConfig?.useTabs ?? defaultConfig.useTabs,
+      tabWidth: formatterConfig?.tabSize ?? defaultConfig.tabSize,
+      semi: formatterConfig?.semicolons ?? defaultConfig.semicolons,
+      singleQuote: formatterConfig?.singleQuote ?? defaultConfig.singleQuote,
+      trailingComma: formatterConfig?.trailingComma === false ? 'none' : 'all',
+    });
+};
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 9aacc74937..76c59d5742 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -1,13 +1,14 @@
 import type { LanguageSpecs } from '../../models';
-import { parserPlugins } from '../prettier';
 
 export const ripple: LanguageSpecs = {
   name: 'ripple',
   title: 'Ripple',
   info: false,
-  parser: {
-    name: 'ripple',
-    pluginUrls: [parserPlugins.ripple],
+  formatter: {
+    factory: async (baseUrl, _language, config) => {
+      (self as any).importScripts(baseUrl + '{{hash:lang-ripple-formatter.js}}');
+      return (self as any).createRippleFormatter(config);
+    },
   },
   compiler: {
     factory: (config, baseUrl) => {
diff --git a/src/livecodes/services/pkgInfo.ts b/src/livecodes/services/pkgInfo.ts
index 5096143cb3..41b36f493c 100644
--- a/src/livecodes/services/pkgInfo.ts
+++ b/src/livecodes/services/pkgInfo.ts
@@ -217,9 +217,17 @@ const getPkgDefaultFiles = async (
   };
 };
 
+const getPkgLatestVersion = async (pkgName: string): Promise<string> => {
+  const pkg = await fetch(`${apiEndpoint}/packages/npm/${pkgName}`, { headers: jsDelivrHeaders })
+    .then((res) => res.json())
+    .catch(() => ({}));
+  return pkg.tags?.latest || 'latest';
+};
+
 export const pkgInfoService: CDNService = {
   search,
   getPkgInfo,
   getPkgFiles,
   getPkgDefaultFiles,
+  getPkgLatestVersion,
 };
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index ed60d715f2..9bb7df689a 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -343,6 +343,8 @@ export const postcssImportUrlUrl = /* @__PURE__ */ getUrl(
 
 export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
+export const prettierEsmUrl = /* @__PURE__ */ getModuleUrl('prettier@3.3.2/standalone');
+
 export const prettierRippleUrl = /* @__PURE__ */ getModuleUrl('prettier-plugin-ripple@0.2.25');
 
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index c465302332..4e22a0ae23 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1269,7 +1269,7 @@ export type FormatFn = (
 ) => Promise<{ formatted: string; cursorOffset: number }>;
 
 export interface LanguageFormatter {
-  factory: (baseUrl: string, language: Language) => FormatFn;
+  factory: (baseUrl: string, language: Language, config: Config) => FormatFn | Promise<FormatFn>;
 }
 
 export type CssPresetId = '' | 'normalize.css' | 'reset-css';
@@ -2077,6 +2077,7 @@ export interface CDNService {
   getPkgInfo: (pkgName: string) => Promise<PkgInfo | APIError>;
   getPkgFiles: (pkgName: string) => Promise<{ default?: string; files: string[] } | APIError>;
   getPkgDefaultFiles: (pkgName: string) => Promise<{ js?: string; css?: string } | APIError>;
+  getPkgLatestVersion: (pkgName: string) => Promise<string>;
 }
 
 export interface WorkerMessageEvent<T, K = unknown> extends MessageEvent {

From 544dea066f62a2fbd1597f900ce01dfc3059ad44 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 13 Sep 2025 02:11:48 +0300
Subject: [PATCH 53/71] fixes

---
 docs/src/components/TemplateList.tsx                    | 2 +-
 src/livecodes/languages/ripple/lang-ripple-formatter.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/TemplateList.tsx b/docs/src/components/TemplateList.tsx
index e38688d7b8..68d2fcf3e3 100644
--- a/docs/src/components/TemplateList.tsx
+++ b/docs/src/components/TemplateList.tsx
@@ -23,7 +23,7 @@ const templates = [
   { name: 'astro', title: 'Astro Starter', thumbnail: 'astro.svg' },
   { name: 'riot', title: 'Riot.js Starter', thumbnail: 'riot.svg' },
   { name: 'malina', title: 'Malina.js Starter', thumbnail: 'malina.svg' },
-  { name: 'ripple', title: 'Ripple Starter', thumbnail: 'malina.svg' },
+  { name: 'ripple', title: 'Ripple Starter', thumbnail: 'ripple-0.png' },
   { name: 'jquery', title: 'jQuery Starter', thumbnail: 'jquery.svg' },
   { name: 'backbone', title: 'Backbone Starter', thumbnail: 'backbone.svg' },
   { name: 'knockout', title: 'Knockout Starter', thumbnail: 'knockout.svg' },
diff --git a/src/livecodes/languages/ripple/lang-ripple-formatter.ts b/src/livecodes/languages/ripple/lang-ripple-formatter.ts
index da981c954c..9e76c9e5c4 100644
--- a/src/livecodes/languages/ripple/lang-ripple-formatter.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-formatter.ts
@@ -6,7 +6,7 @@ import { prettierEsmUrl, prettierRippleUrl } from '../../vendors';
 
 (self as any).createRippleFormatter = async (initialConfig: Config): Promise<FormatFn> => {
   const version =
-    initialConfig.customSettings.ripple?.version ||
+    initialConfig.customSettings?.ripple?.version ||
     (await pkgInfoService.getPkgLatestVersion('ripple'));
   const pluginUrl =
     version.startsWith('pr:ripple@') || version.startsWith('pkg.pr.new:ripple@')

From 6885b11e35553fea41275c871fa859cf3f09c281 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 13 Sep 2025 19:39:22 +0300
Subject: [PATCH 54/71] use filename `Component.ripple`

---
 docs/docs/languages/ripple.mdx                         | 4 ++--
 src/livecodes/languages/ripple/lang-ripple-compiler.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/docs/languages/ripple.mdx b/docs/docs/languages/ripple.mdx
index 62e5df4610..536020cbb4 100644
--- a/docs/docs/languages/ripple.mdx
+++ b/docs/docs/languages/ripple.mdx
@@ -102,7 +102,7 @@ export const customRoot = {
 
 ### Manual Mount
 
-Exports from Ripple code can be imported in [markup editor](../features/projects.mdx#markup-editor) from `"./script"` and used to mount the application instance manually.
+Exports from Ripple code can be imported in [markup editor](../features/projects.mdx#markup-editor) from `"./Component.ripple"` and used to mount the application instance manually.
 See [Exports](#exports) for details.
 
 Example:
@@ -116,7 +116,7 @@ export const manualMount = {
 
 <script type="module">
   import { mount } from 'ripple';
-  import { App } from "./script";
+  import { App } from "./Component.ripple";
 
   mount(App, {
     props: { name: 'Ripple' },
diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index c5a9432858..452e3fff50 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -7,7 +7,7 @@ import { pkgInfoService } from '../../services/pkgInfo';
 import { getLanguageByAlias } from '../utils';
 
 (self as any).createRippleCompiler = async (initialConfig: Config): Promise<CompilerFunction> => {
-  const MAIN_FILE = '__LiveCodes_App__.ripple';
+  const MAIN_FILE = 'Component.ripple';
   let importedContent = '';
   let imports: Record<string, string> = {};
 

From b0ecd9b8b8947d7936fc5d3a738249d7247b3b78 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 19 Sep 2025 00:33:14 +0300
Subject: [PATCH 55/71] fix ripple editor losing syntax highlighting

---
 src/livecodes/editor/monaco/monaco.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 9e32ab8c16..99ab8aed74 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -145,6 +145,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       currentTheme = theme;
       currentEditorTheme = editorTheme;
     });
+    refreshTextmate();
   };
 
   // https://github.com/microsoft/TypeScript-Website/blob/eaa8205658445d4df6c0ca04e42fab1019f71df0/packages/sandbox/src/index.ts#L59-L62
@@ -311,6 +312,12 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     await wireTmGrammars(monaco, registry, grammars, editor);
   }
 
+  const refreshTextmate = async () => {
+    if (['vue', 'vue-app', 'ripple'].includes(language)) {
+      await addVueSupport(); // a workaround for TextMate syntax
+    }
+  };
+
   const addRippleSupport = async (syntaxes: {
     ripple: Record<string, unknown>;
     css: Record<string, unknown>;
@@ -519,6 +526,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
         setModel(editor, editor.getValue(), language);
       }
     });
+    refreshTextmate();
   };
 
   const focus = () => editor.focus();

From 3126c4ffbfc9a0343d747c26a1b8b8e96e29f45f Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 21 Sep 2025 13:37:14 +0300
Subject: [PATCH 56/71] update ripple starter to use new reactivity syntax

---
 .../templates/starter/ripple-starter.ts          | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/livecodes/templates/starter/ripple-starter.ts b/src/livecodes/templates/starter/ripple-starter.ts
index a74074c592..9de3a135c2 100644
--- a/src/livecodes/templates/starter/ripple-starter.ts
+++ b/src/livecodes/templates/starter/ripple-starter.ts
@@ -16,14 +16,16 @@ export const rippleStarter: Template = {
   script: {
     language: 'ripple',
     content: `
-component Counter(props: { $name: string }) {
+import { track } from 'ripple';
+
+component Counter(props: { name: string }) {
   <div class="container">
-    <h1>{\`Hello, \${props.\$name}!\`}</h1>
+    <h1>{\`Hello, \${props.@name}!\`}</h1>
     <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ripple-0.png" />
 
-    let \$count = 0;
-    <p>{\`You clicked \${\$count} times.\`}</p>
-    <button onClick={() => \$count++}>{'Click me'}</button>
+    const count = track(0);
+    <p>{\`You clicked \${@count} times.\`}</p>
+    <button onClick={() => @count++}>{'Click me'}</button>
   </div>
 
   <style>
@@ -39,7 +41,9 @@ component Counter(props: { $name: string }) {
 }
 
 export default component App() {
-  <Counter \$name="Ripple" />
+  const name = track("World");
+  setTimeout(() => @name = "Ripple", 2000);
+  <Counter {name} />
 }
 `.trimStart(),
   },

From 0bed5bbcc84f0feb04aca5a5f62464614a51194d Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 24 Sep 2025 00:30:21 +0300
Subject: [PATCH 57/71] fix(Config): avoid unnecessarily reloading editors when
 changing themes from SDK

---
 src/livecodes/core.ts                 | 6 +++++-
 src/livecodes/editor/monaco/monaco.ts | 8 --------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index c9d9898714..305a72bc9a 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -1526,7 +1526,11 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false) => {
       ...getFormatterConfig(currentConfig),
     };
     for (const key in editorConfig) {
-      if ((editorConfig as any)[key] !== (currentEditorConfig as any)[key]) {
+      if (
+        (editorConfig as any)[key] != null &&
+        (editorConfig as any)[key] !== (currentEditorConfig as any)[key] &&
+        !key.includes('theme')
+      ) {
         shouldReloadEditors = true;
         break;
       }
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 99ab8aed74..9e32ab8c16 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -145,7 +145,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       currentTheme = theme;
       currentEditorTheme = editorTheme;
     });
-    refreshTextmate();
   };
 
   // https://github.com/microsoft/TypeScript-Website/blob/eaa8205658445d4df6c0ca04e42fab1019f71df0/packages/sandbox/src/index.ts#L59-L62
@@ -312,12 +311,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     await wireTmGrammars(monaco, registry, grammars, editor);
   }
 
-  const refreshTextmate = async () => {
-    if (['vue', 'vue-app', 'ripple'].includes(language)) {
-      await addVueSupport(); // a workaround for TextMate syntax
-    }
-  };
-
   const addRippleSupport = async (syntaxes: {
     ripple: Record<string, unknown>;
     css: Record<string, unknown>;
@@ -526,7 +519,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
         setModel(editor, editor.getValue(), language);
       }
     });
-    refreshTextmate();
   };
 
   const focus = () => editor.focus();

From 16d57df3b50ad28cd0e2c82e8e7e1da5545ec830 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 24 Sep 2025 14:43:15 +0300
Subject: [PATCH 58/71] add ripple language info and logo

---
 docs/docs/languages/ripple.mdx                |   8 +++++-
 src/livecodes/assets/templates/ripple-0.png   | Bin 4040 -> 0 bytes
 src/livecodes/assets/templates/ripple.png     | Bin 0 -> 13182 bytes
 src/livecodes/html/language-info.html         |  24 ++++++++++++++++++
 src/livecodes/languages/ripple/lang-ripple.ts |   1 -
 .../templates/starter/ripple-starter.ts       |   4 +--
 6 files changed, 33 insertions(+), 4 deletions(-)
 delete mode 100644 src/livecodes/assets/templates/ripple-0.png
 create mode 100644 src/livecodes/assets/templates/ripple.png

diff --git a/docs/docs/languages/ripple.mdx b/docs/docs/languages/ripple.mdx
index 536020cbb4..99cbfed08d 100644
--- a/docs/docs/languages/ripple.mdx
+++ b/docs/docs/languages/ripple.mdx
@@ -338,7 +338,7 @@ export const tailwindDemo = {
   let $count = 0;
 
   <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-    <h1 class="text-2xl font-bold text-gray-800 mb-4">{'Ripple + Tailwind CSS'}</h1>
+    <h1 class="header">{'Ripple + Tailwind CSS'}</h1>
     <div class="flex items-center space-x-4 mb-4">
       <button
         onClick={() => $count--}
@@ -361,6 +361,12 @@ export const tailwindDemo = {
       {'Reset'}
     </button>
   </div>
+
+  <style>
+    .header {
+      @apply text-2xl font-bold text-gray-800 mb-4;
+    }
+  </style>
 }
 `,
   },
diff --git a/src/livecodes/assets/templates/ripple-0.png b/src/livecodes/assets/templates/ripple-0.png
deleted file mode 100644
index 5b30ea52ad417ca0f4d6360f18d770992de46277..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4040
zcmai1cQhMN+ox(3Q7cv|Rija{SCm*mjM}jkQEgL7h1M);2B}R|&Cr@vl&GS1#OSa`
zYgE*%)@Va(e(CxCd(U~#`^UY{dG2%1xzD}l+}}vFG)Hor6FNsnN5^4oq;E}&INEs5
z!bF?jEx<Eqfj+<*sYmzfBWRtLoV~4Urb|axpUQTGW~Ak;enyS~baa58e}kTUufmg#
zj`O;)zAh@*^+y4#pWOr>`P9?GNS-Z&u^Xt$D0=sGZrXWn9V?_kR$yOl$&Y3N#x}_g
zsX=^{l=V6(;iW-3-5D;UgqLVH#Kl-0mZ&;$=nMj=xA6AYTH_OB=GNSshdW2N+S7y1
zEa{x6Z_NgLgqJ4<*_?iHf7<%B<Rk}u!VF|CWyQyg#FDx&-4u6aG*<pu9ZbN?0rXfB
z3NYmPk8-+G_Jaox;!;yn55{4Y)zvmyZ~VU773>mD=dC+N|D;_>QT6FoSoym;{M?vl
zVzjxUx;1%p)OtrsR;r8YJ%y!yRzca@OBV?(+r(8>dCj&tN)_H)2>j{GQb|cjOzb-#
zRxeU^zXv;ys1?Op1yiqlEb4gFpne-Gd6}7<TBP%F#wCk4r}*Vd_M6Mglznw!D1f2Z
z{uA}Pnjch*;cy?^*&cqF9)7^?JKHR(X`W26&8G+ASW$L%ly3vj=e{#Z1sY>%1>r(*
zad8m2+B#}Ad19{T`wi+;%bhPx91%(@e+`8LU`eg58hQwXyq`{_crSUWi@Bw9u7^QI
zMaATyzfJGuz*rJmaejV&ZMvR;65m@KwvYR|L8%H(^G88kpO-b+9beyjL_%}<`ubun
zh@?~?nM5yL(%ZRcd&ykX!Xw9?1K;DJnKi{0l2Hg3TU=U7_8#16Zf+JJ5+_$J96+j~
zoeSW1q5FCmqdNa8DLq|u)H2yk%Wj(Go}8TK&L5*|`F}*>IZSmLZhaW9bzs2v+_DrZ
zUg!zmnao>~_h=@bL1U+RlXT~UmsG^X+2e|eYQ0qWfw<&#LBYf+w{XW`ZVL;G2`>>S
zAaAVP;$9nUFKF#~KBi*BN79;Pg+e_Cb!}$%V*?>f#zqO`fKntO#4^oGg}IWLefZNm
zzOu+d_muwl>*7y>(-uG?>I?%zueuwjgoFe{M!M(6)fgV+;QDOO+y&Rc#F9H>Wo4(l
ztE+CkU$)wCSy`xbh!R63<>IB!ZxC+F7mTT~VO+B%j1i}!4zaj5)-owOV-~{c`L6}D
znNDM@R^nr?Q81J5IqB)?Sy)*O9ULllgIJIlqlCq1$2YR9JdzQQW@iJcNDj~OrS11O
zhv`j$a_6ax@N2odjAdp;qM8YgY1Nmb8ZFP7Gpd-x1Z|9S!9(wpV>mT0-Zd0IQ>o^8
z<h<qaA=TT;%8KBWjPQzY6g|txL|HE{)c5nN^TIxEY`i|*5CpEOszTv+EPup!iDqqR
z1<7)fQ*M6kjEaFpP|lj)x|uj#ox7Vv-QTxAjRo}w{8grQHT}@gPnyI0X}m<wZEAc+
zYHv$B;pR|#k0&Y5?Ah<!;N^i6R`75KxaGn3Dh<18PAFi&GS$%hqvKJXKcA%82|FGr
zXP~PabzpmJDX)3gp^fDvIi7?*f4>Cw@EhdT$7eBd_$QRXZ0QaA-%8?=hU)8#Latvu
zu>vgAjL`wgmpJ^+aZ>hZ^vYySkHNP0{mCp6TAnvGUprF7G)IP9_KjC+-vxryFYs({
z@0)aS07>eId>gN{amZ~J5)>rcR%?j}DjW5J4ZA7wtX`Mqvzwg7H$6RJ&P1=cK%Xxx
zavr=;0MFZqC8oe1^J1^0)<|=69CNKfO3FXou}@h@;PrKK-D#(;lv!`qmOEDY(z$cz
zNM_B^-Fg!g7%F;uyE%x%ly>V(!q{N$m^v&>)t(45*VhkQrh2%P(VC?X864SjaV<Rf
z215z%QK<@0!9Ggeqa!?jdZegZxIf5?i-nCNCQrBK3>3gtVJ+RFnB;#FMem2kDvRjz
z<y@UM8A9Qg&K?{Jt4{p;k9^tLgUF86;xHLmSx|uTm9;9d?0qU_MOV-oh%Ak6`R(of
zJ7`0Vx`+NWvX(af*4xvR`F~+!&n11%_*izJkH7pmAkJVo*jrF00@bNxauEu^Z}0AA
zje=Yd4JH!G(hD54x-xZ#3;b>ta;3Yb<to)!mezPN-iV(5#QK#IkdGfP{J^l2Qb+eJ
z4k*N371qb}AnSVjLsA_);NQl-Xf#@MBXemuqi85cwgD!@Q{()`Ft5pH{4!ZRQVTp`
z+sE<gHufpInb_v&Tb|ENBXTJ(Z5%5U{Tj~Tdpy@}J@oYClv?7!uu0TNtI*m_9F~fU
z)kSPk^)6@qzCmU$DCwuja|ul;2m3Yt>}osflk<LXQ1yPuMSPDq=3rraku?F2&sJOy
z-kJ~hu&8-#1#qf^UF#%&5gxHhb^qN^I;;r2M!X8Ra6MD4+~lo7kemaE3DGSeU#IOF
zdIuW1zftK##jcM^fM9<8+w^~F=uN0jLM$z9uQX4^uBNHLiu#<#Tx?25SAyKJ0*_k#
zudJUR5s_=#c5eH%7u?&|XC(YdpDigfL$$af;dYS*U!&pk@WVg>cqp%=d46&5<0(>^
zL~gYzrf@pFbiE9E#vQvB>(7rS5E4>SxDRh=9sN4|GZq_^{q>h%<K0T_KSvgWgM;-R
zB$H)<Fk7Mker(G*7rrX}{`408AbZN}-0a-f^+ncuV6gJ9UwmRY(a+S7(gt)WX+qr4
zHx<l4n$?Y`lQkCIz5Cj{zj_~QcF%XMlhSiTxE&oGt@{KqV`pFazVcAXEzc>(j1t^4
z_bSgaGIl$wrwe?DWBVJtI>%}hxT4}pHFyGx;24IcM!tWVoZD~<Z<T$kO997|mft3*
z{qh=bK<|4R<pcmkuEzdlYc~iCY(ksCX-|LmedXquNhh4MHE4@VWBEM|9&9l67kxrL
z*P$~PRd{7+WFoGl#O8LbAl|lmGQlj<u8UH~g_54hZDNbeQx;52ti~R<yro~0qfy4$
zmdMwh>)Ja5mm^7iW&@NNF9#41F;Br9D2Sf>jBLGkN}rV@+~L!rRR@ELYoC^|TqSo<
zk<e3L#@*dr_K&|+*@3tLOEYn8Z7^H=^#prYVO*t~Ik_taM}pp0+K}Lg8e5gr4M}>R
zdAZ(qF7&AFX7#k1DO@m1=#4ZK5JNb3#nvWh(+JVG!;^H;H(|7OX2u-(bt<XLrRAaE
z_sj^r!4*`#Mi78Rk}wx#?_P%^LqnMqm6S-uA-Rp-Q$Pl0fMpQ~=g+5f`vd8Ak%daz
zs*S3-T*{ruqNtgGm6FCr6tSPiWdWP>M2?7vh$@l-q<^;Mfri$>A32k+Ax6Zj%;u*~
zm9MI}iMWgm>&haRWxl%L0Y&O51vbt%S$^-Hrq-?k;tf)mo(vKimUi!Z>}ai-QB*7E
zaf4Y*QqqYCV}_=L>2!VTHZUE(9IiQDBTW+s-Cu@GiPK;p8D3HIE-qJT6;hkaO#?yY
zoETYE^~`;D>@34M$y#1s_n-E^P<SoKACV{LIU`RGQTTUg>=76eqkjA6l%9AfVaQB5
z8jW$uM^Ev4c2g>tvsMaKyi>9?4ag}Mc%$?ePY&~{frtMp_o;p(lozl7NhA>lkYP#T
zt|z<qJYgJ)CRtfPa&{-${#siv6!2~-Jao|f+;peLX_FOSS~x7zFyS4cAGmjCq9k>#
z0>W<BhRe%S2wS_^Nx{&OOg49@M~v1RFf^KwV4FhZ;^L|zMbyEB=xS<<cMk_L%W2(v
z@O{!vR2Yn!<^m!a2%<jYB#F`jIS9n)8@%N~xFvC#?ce&!0*A2LVsGL#+CdS=2T7B3
zVAk&{o;?)5N8a|eQphh7)`p_P5F8SGA*C=K{?((QR{-BbKR7s4kG+x9c=Gt<SOmDk
z{Nb>U2MS=8f<Sq5(lC$mTrpcF54$aYuZ_&vB`N@MF(?$u{d?1o>3StI;#w(kAE&>f
z43W1aI&k6<%*xF^e|NVGR-d}|htY)9jkPatQhl!WIe@Mfn;9z~U=LFYstmx_TkiLz
zi7K!FSnXscyD7s1+0u*-Zxy*n+_G9WZCqe&-glS8NY`wt(b%<bDf`n+*HiWrFbn2f
zM)^jy&K!8enMQ(w0ycX(s)T=6L@b^Y(SbX3Dzv+eHG0&>oNQj~?4wvbK+Y1#tZzip
z2+=rg{}1*@sDhm?lR^x0seNtX_FmJ+usWEy?wkjX6KpUVpKNU?)ri4%_%~jt3{Lf%
z@X&$+5{Cg<W_cOuK_}5(Bg`+xOH08c;Syt34j^uVVuWEIR`k5!e9SBP$05Fr{gM4H
zLso7MpbWw^;<0o8kd4g2+FWan!zV7#tRC?xGajM%4L&-Sinj4j;@#4{L$&&(nT$lT
z^Dl=hp|JvVA*tizG9HbY?ET)uB}Ek#x@9l7nrTXuu0IT<o{_>KocY3RXMM6py01eW
zAcjmiU!NeTw&F4eZ_~1i^tpn17I9E{IlJgwxIx+f3#=k3jZZ>nvVX51BH==czHib6
zoQQW5%`a$_AaDT8yrxl`Kcv)Ti1Ci@u$*>mp{sp)(WcVPLH?(z;qh5{+pk$!S-XUn
zTuIGSZrP!qD_*uG;&WsvyDy|6vQmaVW->qb%v|1ua@ZZERcNVz_CQQ}cOD!Jl+Az?
zErfs4{0BSB`PQBFpFXP}3x=0vi(cB4*ZF(_P%TtIDeCO8l;j><Y64Lpuu!dv5#QsE
zp#q8A*8cBjXe`B^>;roqoJ#zj@!UdFS%_vghV=?)Lig^1Xu04F^q;QEwSE@XZlVs)
z*9tczeg*?^#=}3FKjhh@H+vDs+FWT{^rj$ETRK5LA@W+k+{UG9`Grmt@6D?j9f#n5
z+$J=@uEjHTfMCHaZV~DioSS?bh&nWE)?rl`+=w_>_Y{}#(Xq{j^LWxU$Hk~&nd3z8
z!&t|L)dV1-l?M1}Ld$%ad3ku_Ol|Ts|LH|@MMd9_1Ko;P)D)_;c)RN0_xCstfY6eT
zce`uEO;F(lIFk~eMMi)sKk=%Ca;Wsg6Wg2B)zy|LmsnT0m_gi#)uv0f56k@w!aQ5c
zzFzjYgy|FX@qxIfrzeYZ{cdtu?LzzY%f5>?MEmMRT=aZ_M$qChr`9;%Cx^*Ty2Eb6
z*Z<;GvDmiiL{;H_*TtLsYk85#v$B+hih&MB0s$Y15UFf&TCmhGC3Q^;1B?X!n;rch
dZk6tYu~W=+?8O+CX1?j@j1A27U+K9={~xCjifI4<

diff --git a/src/livecodes/assets/templates/ripple.png b/src/livecodes/assets/templates/ripple.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a58b221f2850960bf99882c00df5ea6e092807b
GIT binary patch
literal 13182
zcmXwAby$<%+aEAGB?Y8gNr@pLT~d;xYm^K|cL+mDx+mS;NK1#Lgmib8v>@`%@9%p5
z*mgbJwP)v?=REiQsYSe3Q^3ce!T|sP_)3bhn#k8(<YNH~1Nkf<uhNTrL2=bokOox!
zcyWL{0NO~YN&x`1vABQC(UHg4PKx@j001t@zXu8+E#o-=z)zwiE2Zsaa+2wrkz}><
zB#{mEpxBNJ159So`igzh7uUUG@A(mx^Om;mE8d0uP08R7#<VbjBL&OC(4w09$ns=s
z-Otum-s~icnPihwU#HkO{imkP7`UEU61w^ad>obbs>S8M^<UwyZ@YcCzCicu$R`lJ
zY^nZvdmj*iDBBtg@o>9UTOQX;#8OG(CGXNBf|T}D6AhH92lJ-%=>Z`0+bH&^=esGU
z5vs(i%rzQ)RDfzCuaKU#i@sL_>twsXn;PXiHab!f!;;`|4w6f&qS!f6-v}iP1haWU
zpc0TZ$glX}qK>}(<)%LBIFZ)?@%XgI))%YGd2G$o5l9}BkoB851gwXdMF35bxCe#)
z2CX^qVaiT+VhvjiZJm#ZW~E_Y&pXC@#@{$f!U7^M>r(qj$jlqu<%Y#CdAiYI?UZi=
za8n#yFxaL2GM2gw?gO$36|q@!)}HM*B03hrnb&qYtZno6n3r>br^g6LmU}*5;WKJ}
z;5FCcl47xvaKyIn@|~01#2Nc?{NUD)oy*Znn3(nVz5&kod-4;zz%L1EY<gz{kk!ux
zrt!_e?Rtws<9}wNzh9}_k1`^b%N8fwMX0(cQQt~CeR@bk&@gde28%-5oNw!JN2x%x
zmpm2_f=_+gkpu}&B7uoYF|MY>B&7P-Ba+Ju7g;eF9lISC%_P)6&383fX59{DpQV!g
z38aqw6`2FVvefTATC{e}q^7It8#sozl-ns>uWL)E24!pyK=R}!Fi^R~`x;_}5Ne>e
z%g=8HRMzt17faM}o0HZ}U}8n1iqvwPr6=7z8{Y_M8V6Kt1m!2}pHYxx><>U*My~>$
z@`?2jqT_$Yq6yqXGx>hbK`9K&TY%hvmUQaaQf_7kRA;T#%``ICu~#s^lGlDwZ%kR=
zsAY$C&j8m>Lm_3<QpP}-HBS{K!Cr1}58|NWtywM$b8&MmLMn6`KhJ8#E8u29|Jb8f
zCWOIZl*ypM6&zc|9FJnV>@~VBHz8x(e%H5kIeG-MXXh1&=BVwED<*DESwDpdTbJY%
z`*Ow5e1?uQ*o=PAe^>?1<1wBLScKBTX-BO_`KsQ|Q@$R^aLHULg)x(3HOHAnQ`04p
z{<zA@uX)!;g>|G<fmxH)b1&9HJLSV#lSO`n{*56rQ}Q?s;DKIKK7R{c%LYBkn1Qj{
zK6{CFPo6&cIOPT}@$Z7GL=cq311dbTe`oi(6V6;AI<d^pcr^4_%*gO`DV>s&b$3L5
zzb2n(efkV$R&$)~+>00@A|Q4q3K<GMU{{)IZ;^NXR!(S*(axtec7undEE(ehnF%it
z3p5SVvmV@Wr@q>kNk!nF9=-hBXPLNaW#<*wAQIkZ8G#u;zu^C&p^GYt?p;e`@GL@s
z`)huiJOl2z7ObKyj(MGfXavA{b|?pXf6Dw$1q7ute6DX3C|sNNBlydA-^Cw$bVmL)
zui2yZ=hwS6<1m|R%On@E)@g|(DjIBky{dk<JtTDh*w&qiIhfpFe2cxl1z6kdD9XS}
zOBq3sRlU`tG#W@k*v;zG*Xe-G)il>iyr}zqL$#u3uehi_fcDvm*`)4lSyIU0F(X!^
z{{OxpFmS9aVv2ep0MgYcu#s9GF!A#gF8F*B&P1^|nJ&K}jKdZoTx2vu%UP?gfM)7+
z-94PcYwaI-Q{+b1{kWnh7dIQ(j84AxL+}FR%(wmbO`eXZ=Z-rn*B%^kJmAl;Ki3lV
zn+Hrcs*PMtuA5+D+LF(Bv<EsUpg~^h)LwR!h#_(sT=Ta|XBfn8O5Bht_v>yI9cum=
z`(l|pzQI~pMFy6E>V^TlviHNuerC^)Qw?&&*@<+}*DUWBywfSqbfBYdk=Db99&zrl
z3L`9^Nvt_D0ml!bk?G4`Dv~%%`|+f^!5N34k#g^=8Dc*`*Ljxb&5B<}f3dHnG!O`?
z7<?eP5(|F?V!dl;v#$Rh{oPC2!oS|Sh8NDdavoDNaX>@q+Ez}8{_>)qE>3!AkO$?@
zH|m#|2|_4$Wt3wfzp(V>ak3xGiS{U5e@jk85>*Wfrk%Cc=1R{z=NC5>^ne>+Wo-=%
z!`-q4#Xhn-v=GV{S)KUe^G0^DHC5`C>@k}()RM2!9P)oD<F&pgkDkWxr`yJcaoXKy
zbzHhou8Nk#h%*;C_J{vDqKY(#(WxFFehwktx6V2uX)t(_2hE-}V1kwfBfW1;t9_Vf
zZ5m9a1y%%ouCur9VsnjZy9zf4GFr4FW}xmA-LWmTit#?OoXdK>)na_<)GJPfN=<e~
z9m<JO2T)sO72+CDNG3`Y8DHc6kweH4<Ol_M4^nlx68)77)@ko5s{)!nKV+IP%dZ>Y
zJpR#;^6|b*!6)KLf6`31CH`GaODgN95A-+1yrmg)RlsXvFR7lF#OjfHtCy^_#@_MX
zKm8q4yh}>{-BrVNuq)Ejw<cC1Z#o@Nd{>-W=BJeFos=Q+g5+uB)9B{tfmZY>4iy{K
zn;H#%+M|fl3URt^MsO@aC7F`}HzeRxo>9S~mGUPr6SyAk01_;tlcEM}M>#ppVJ%ZO
z`NXDte$JoSz!v!@t6U)@$CNQhYuI>FG_&EsVBHP1IB0n(n$Q5}=rVh1Q#7CR^rKVO
zfeW&#$J9~tFIdLHyVWCCo3VnK<4x0qX~8K_8<*iRkETV~D5?`ix6I02oQ#i7UuI}?
zr2_#SwYKPzj*5Qt7b6S8(Ed6X(vQSnG5R=KFzQF6<)lnka!0T;w1)(GJ~LLLo;SFY
zcs)3YEQZ7DDEZs<9+p0d3~R<n-#b)0sk}LiE;2aAWbh;CiAa9OP$5##iFIe7PSHVm
zc8rnFX<86WvCtG<(oF)qb%*@b5N-4JTMGFTM*T~vZb1#*3B4P#qNjo)1;z4f_XMU?
z2rpH5Zt<a!wDaNGBzqEN?1cI;9nkWp70Z9wGw7UGgP@wSdLgJIDFFw9fJpgo5zz7~
zMzdt%7QUbQq6(Ig<-Q87&bQe1QFe(o1Na`dSyX<}+mtZQBE^DKdZUTeLAw5Q*(Ekj
z$iG3G*S@|OBRYsYp$y>oOz4a3gu2x~y=(rw6P(kbQBm~CVU2AW+557G9AVI4l(%fT
z$LZk=aw5)<zj0)7Lsp~Fus+Odecx~f13<uFbpI!r_Y_^_zCs6SUct78d3;5Emi(v8
zd_VEMWfI8L4iL~&CmHht=-RCy>Rz8{<uj&sdJ8qV*L7tG#SXVp>m@+V!i>LkX>R2t
zr}K49LHe=OYdxHEiDf;NB-@QpDwAh>Tjb}kQOm?fq6me2BQTC$+{k%k747F9uKP;{
zPN4o#C?ro|YM5%hU?+N44kWaEZa3;u@d}-5NRW5SHNUt+u8pePQD-yHBP#eREwJ7t
zdiOibR(PY~(Hk7wK~>0svLfy*w&x>gHA^df0IKCE2fBb0B;Hw{;A3*?Sk_nBeP0Uy
z0;|J}@Di&VBmS^ZA{KM)oyd^c;L2Is%!z%i!RUUg!|oL<O%uom7?8cuPr_E}e7&x)
zMAfnwjqm==&&hvBN|#t{F#5NY`b|ui`RY{bOQYy&Qszn~TvZ3`3eDWMtEU;9CqGx<
zY-b1m+CIqKuS3O0On!kXT8D6ebr3rxP1Y>oQ%`l@Tb-x(2`2PT+J^bR6RD|&z4)w?
z+G^ms)W3o|veFKImrVk>P`nzc%Y_ZErwVE+biFu-$paD%bwpXKmB<x)Eii%(=sn#{
z!OjJ0*x$Ez)7Vxf-m`q=!!5NlB2(3k;tXV3<hO32#_mZvI#zRM`sE*}^OM|YY6KVn
z+}Jpcw=K7|3jF=Lbj6*X(;7=Stq(8I<dy->xQ~y`<|dF9wle>o`72-I*o_dpxUH2=
zpi>;uv0Wxr;y78AbjpH+cEiy*_(TC_c%A&_FH#he*QirURXxT(b#wTqcC4KZjHu<h
z^c=KAwfw}#7nG)~?^r0pzf%U^1{Ij9WOU{G`+fMSuljXDhIwsoVEFUbsIE%DN8$N2
z5>-QcLILayf(?~~t!1x;IOgD%77UW1sZs+h`%$!%GMG_u0Et|iyHq*U_dLjo0wD;i
z(4Inqu$hBY0HGViDtF?;J*~c<J9|ZZjFGK^BUOZ}trK>a_=?x>i7zLVuIc3jWT^j|
zodoW=9hfkdlZ((XojQQ|)KKd!7VpkLp1dY)->s#S`}Y@@71VUcFWLuV=JiJS8H{x!
zuKGK&&wk02wm-}QUt3?uw_*DJVvEaP*3)D5XPC3?I6f?#YI^YTWD)XV_E!%zeNN#2
ze(F*O;yG9PwHard7A9tJRTRkNLRsGvjpqSBY2I<xkS#KL>x^3Ma-9%g@~gFWxhUzX
zGthdQYOJ)kI|(q+7}(x|ae1QZeN4EIp_F?I{2V5#ad+^w!oQlD@;FJ%qR3ECP26X)
zjjs^KeBN>MW;YgAqOGa_pc9wc=3}WyEybw^$^u>a&Pzlg8s}*dytdds;~KS@+wGxm
zuHzT{hNAIx-_i2TlzXqLVoP?-n5Zn+QxAW5r$o37{hf6a^?T6?!~zg=>F{p#=SqzG
zi<ywEQb{9uK@&my_$ORf&MC!&^4)9ed!G~3bw4m+^p&(ag|s6xOX_?u!}9u}27L*|
zRDVl@7>r%Kw7n*<v3=4H7h5IeiW>9+d%K{Db{Vg9Ti;AjGl5U17_Y0T#m5$psy8L|
z-$p|c3zy|W(yKg%gp=r95zZX<Ek5+cJ%mKsWCl(tr%epAHEU`~_Y5YJoP_a|est}0
z_9KP;Ea4*mE=iREF|pQIYq1!(=?bEpH8a^Yx2!nYHEnakhWBesk@nb-$=$HGlm_3g
z2OppHvyk;mC=aT4WqDX`b?~&W3*{vRNEfHnT9nXiTT2fG*9Bj1{qn8tbJixi=_R2L
zv3^`PNi}Ri5da_dZy4(hV&_z!=FEOA()yn3(CKTND{|F7bZ^?kXZyb6nVz|j=|qfu
zY|ZVK*7zU#_Fy)l7oLm`k(yv>iNdzJ*(Uboz1$D?z@c^!>^R|T(aD#;-d79^gD)ns
zBZ$_sSd3q=AHR5#@2Qsivj|W>ew#I(yi{>e!TQ;U_g;nbF{eF<zkG+m;H4ZT|AGZS
zX?+zfhSbM-z1}B0Ek6$bc8}VId;B5K7Cuv~Lq?}}z5~l!19^D?@if^b-OjqgL4EN6
zPZ!fIG$}`b7b&^2ul#0~%ZmNME2+!;lJW)Rv~;L|NoUiJMc9A1MljO{WxKPjmRC`P
z3%Ti!4h!Q(7p)VXao=3GqQ6~?=W~GdfetEGz+Jx>)#!N}mgg#g*P3@<SWfp(``cs3
z`K#Nie+^AW9*0K@Hq)3jKZcwzIFQzUoG;X5na}0ZQoT`p?o;`jW8eGd&|~jcLmnB9
z#OqlnpQLmwf5LWtDL)Le8Ov(Y&wP*%S$D&qG3tk-A1wa0KhHy<gyLr8B=60+A#ai0
z?ng}auq<i2NEHrb_=|FK4TdtKfK?NoTKH%Za&z1;K}D_&<JKxzwNL@w&w%RH&$3jl
zPdt&Ih@V3JoaQ)ppWX)9pxl3<zC`biWl28?Gj3m8IHmAC1Rc+(sp_2w{#3XhX~kX!
zsideR6{^q=q1KB~jjg~2F-uu}OYk~$@hKW3<%t6ez1N2osK)qV!kh;c16V%Kx4U7Z
zg!i4Ns$P!s^%pL6E6?~RqhoyqSpX=xnse66W}c~cI^f%o@KAP@Hx2!2?}V0o&6+LV
ze<2RZ0L5hs^l1%|`xa3XC>t`ZnQ=)h&&7+N-q9he{2Oqkbt6<o&+Cy0Sb1>J12S$W
z^|7n1DS*HeCXzd1Ws8>WJ(aB;pgo(Ea5~qmU~IS`sUvdMd;Y~84P(2leq2w6ajALG
zC3+(f<PW>-*jY(J)W#Rv71cbi<BX`SMKq8=CbFhuVti5bvC+81)Pk_&WMGSVoaKwt
zRxnutxX57JfA(U~zQdAJ{q$AOE=3);Mv<5u9iHu|m{VDKh_ug4c&<DX<owBKjL@h5
zX45U(yZT!7MmX{Nu<fg#V4{sY%X<IfS7C(?+#fm2JIWsd*C+qslyWfBBXvEm>aSMn
zSL?I9=p_lt$KCW#OEbMw;JnR(7;o!JYFt_K@7MLA%@o^uATdjND7Mkz@LPm%5E$EM
zaK>M99S2-4e=lh5Ur&H>;QkiI)kCH>tZ<FCv$sU8@<S(>cSod6t4wYU#mn7N;f>Cx
zKvx2XS`s61PR}umj#Od%sWoJ+R}5gzoWV3|U)-NVT!|S--=8q;r578w=oN7_VkZ14
zDG!r3NHL78ZgC+h5?T<4D&*kjtg%Rv$vDY!tzV;bd{LlQDaKQCb*IzQej+$&97w|I
z@hp-pnVe!~ypwvjqKnvq7{B3yt{FnkUnM;441|i*&5zCa#Y1^Vm_zPQuP}4fWs?Oq
zA|0Z>*iHToaEu=$#>*f{H>r3m#WENmnR6Qz9B*+co#v_A!ax5xJgZm9Jb5EhdeUDA
z|GROROV5#GzheWhiRP0Vb!y;MywgX7O1|5#|2qf$w<WQRqt5~h%OI!{;TIkwPBshZ
z*3lZI{Hz%XCV6F#%Z+@jpL&fs@HEdq98WvW*8<)i9Oi1=X|l!%S7~uEC&Fy+=$D{w
zo#pq|J-}7w{W)YUO2FRP5eyn&bL86{EqwR>+)F{N`qqQVY2>tzHEaKYJFmcZiCT4^
z2f6fn!GGw$bZUxvH@3kCZtiRUXcmO;`;53#=oucX>9>AF`P{x__Tw}3Wg3`e!rF>C
z00Yn8E7QJC0p+f>9E_@zPTx*nf;O=d7=Tw|JaLvM4D-U3UTB3ij0tw8T#<kY(OW$I
z6Nh!58cA0#zA6eWMPhR=8{mei;rU#C^qD<PW_vn5+?Y^D>KaT{1~>=(i)&OBQQW4U
zW<Uq}bNUdvJrXa*+KB3}#(^JU)qe7=I$QQltci#y=}u*JWwHiW(pbBHR9I0P*=!g>
zjSddYiQHVdAwS%&-(BiLtWO@9V;2l?qY4bn{U%}tORas;yC%d{8bhaZ9q?JtG1Gt8
zMTKNBw`5aCBAM4Y6F@>J|ISH|X&SWPNgaF%%#d@U0GW_Z)z8*+5GSJ|A=(}=*6lh+
z@y<p)^#%)6e>t8~dW=*o;ODbs%3WGgs+3Caa;_qIi)1$rd^B2AI5x5axsO&qwYyNd
z!nh%)xX^cieFQWMI*u5RS`Po1IP(Uc<ziZIT#zdJ!WbJ_9D(D6&|@PIYOb}0Mom9L
z)cwE=p1(##KoHc$)pC^X&fDeL=JUMIiOx2+m73ex{Y-HMUR9oW^I;qT&GSi+aEn-o
zONVyEL)XL11j(jA4EVM}QXg5|{)QTaa)YQsjq*RFZnK2Ay!u9f`gYzzg{pHel~-@~
zUB5**i7^-Hl%pus{ONEZy=})hCitUbD+uMAXeu8CW|l(|PU%g{?&OWU>rJS^soKGF
z$+fsEaY=niFsg{F8_$iy2m+~Vy5>J*vx88{+YFw|zL@b801MjdLs-*K{DHClP~qor
zpG&5irO)-MIYqBaD+2H>>dG+{C>m^3){Uo2xjZy`HoqvIX}>eIHywH9Uw}p69%Evu
zU|-UG*ahAGn-k;U$V=GlQaFF#+-Laub;$SNw13nUBuVFTy*{XkWWy=a(#<blYrUhc
z6sT{X<P2BUe?j<z-<b5&>6&-Y)k0Md?><Ws_$Rs2=KO>G3TuIX(Rzp~_HlU{k*X5W
z0S~ZPP6J{)NWz$3VY=<jK|zcLI3k&!a}C<)8u)b9!2Qbs{E{kS;I4(d5nt1$Bjws5
zn$rO+fB`@f#^eO)TdftmAi@``mg1mMoEVfq;G-%8#Y~F_J_ot}y`3<7Yv0peWyCpT
z?Jtn<V^FgxJhtCoQ0Bd2*<H*l%uvf%sm0`1a^^{-H=bzSldq&kj*9Ekur2^#!tP%4
z7-}rP;Tb>rU{_Zprk#PjlWiVPmfmoEj}?Ie@Ls-)C(08l`KG%A32!*v){RDWPAU&m
zz;(rEy}J^z#wGFG`?)0Q%SBe}BNT{-V`}C&zznDU=_AgFa>44AAY*zYS`9L!ublT6
zE5C=Inr&9;kK*c`9!fDZKgHuZ6xhu4ThMFdb(V7e!UVr0zkkt^D@e2V>!WeIp5on^
z8kdpLX+V-p7EuJ}<7B&*w<fnI&<5FB&noc)GS;OJ5RLMeIpq{Gbqjyv*E_0cfl_PZ
zRw_B%nn?ClOY(Km(a@KW>x9OdTW8Y|s^b_)NSd}_!5EHDWWv`K382Gq)fRZpK7G1@
zL|dd#cbD%*Th~znSVhGHYwYL%Mc#>U?=H<5slPuoqv7h#7bF5>#T+a<mDgZeCZq~c
zoOZ$m6`A?aWs3SOXuFVkoL)F=JDJgu<mz47LX}Fx{_>UIO!HG_uB0#8(|Ua+{8w`Y
zZZOJ*!+y%wQU^g)8k8u*a(_STxp^RJ>WIMk+h~Vtjk}|B)`uI**+zr>HMBpZgD2n;
zChT(}tV*itwc<2~nUy>&d=8vW_nn*)yC`h0ay`Iitkln8&OhV`TJz`jB=7RJ=MaKe
z*#&WSb!TTBNrQN^m?0U!^HuHocAU!{{x1ca?0p@fk>ma`yw9=T)*n7?<Md0%+LXd|
zpDcu)4i5X{O!98;D}9RDQbB1H#to#0=?(@MuK+%X!^^sDuN6Vp(sv-wWa3@sF1fA(
zyAm`@#p(e(zarV;rNqxT!Um`{-ks_y*b*)cnuw0UQ^+S@tQcpA6vOXdg3z7XPbyZm
zxj%la;dD<P^!tRBr&6PN2^10S%VPs_YRdO9U!G47JdZug=Oy_cSLDv_Y8N$9#(+~4
z)!$fxX`-fC{-|1^bj|*LBmj0FX{X@9R8SmU8*)B*!*OUONDo48<o~WFM_M(hS&0?1
zcc9~PBE|CSbXg6Ql+5p7Ao?luUfwqebzuMCnYK_3U%OgqNS77$!w<Aa$>q*=9FL`~
zaNQFX`I(Ihz>w#3OdopH+kN&wQSCHev}GP-JDIGTODj5W&85E)#xfOgW_dPP930ND
z`DGQt!WOD{*|9HITon~pJ0hj{&fjRFm=}@!T~!DtjG&EH+9U(NBEOeVKB0j7;)e#r
zi!zSB9`3*7d`)Bm`gmbkLl+~PEfK}bRJ1>dFr$YQ?Ul>-JgcH5OS#ZeZcg~*_53!t
z>CECip12wV1N!|&fnz@wd{uM6HrQV=(NJ*MCaCxuwvfdl_G0k1A~=?aa4(;1U@!dO
zCke_gkz^~zc|x|Q*0neOd7$|RuO-%#4LkFFe}26)qH5~*a$T>Vp7JCaglL<(^V#4Q
z^j^NN)5Y41E1wg0VS#aFOpaX|EcQ#UK?XR7#=m`PZsU1(R>-crwRQMDP3Rmptxu9j
z@u8ynd*3suquYH=tlq&ue#@c&)!0K&J12qtQL4uJP#FDiG&7aa(V<C@dA50xzR%EF
zdr(z{=Q(N+bkknBhCCobkhYisa3S6;|AMOXQP^&%{oe=#yM?0Rj6g$NFp0@{cQDMt
zrw{PA2!PEV$G1dY15RkV&6VvEJbHB(_9{dsNJs~192sx7b2SZYdR7TwVc&eYMMHyG
z-1l{Dg_jb62eG`;<uSy4J{WeHRF@h{<~$<-bgf%~lw}%)2s`o3Uj>b4YHQ&$u|87r
zkFKbBFQ10u|7FnVb{uT}#8(t3iT@Gpd>`p><(NV+{GZ=qItWG~aMoO%adBXyyxxu6
z=B?tmdV6*ZSOUrDfktR_#8*)8ZOpk2n5w{QN&m-#sxH>2XFCpkq|g5NB&^ZNBO-tN
zoi*$W2;x~uV00>d^&mTSfoz4H<%B}_hjNeU<(RCpy9ge<5J}J@CjEK1(!DR8=K07E
z+3*_z0w7yaO3CU>WT7}DMdrS!{6VUkdISS`mqeLHx1%K+QUYW?KF~<<;l$gX^bids
zoqwz%Cw=Ypg&6usNdhp7cP`Y_0|nv3MU2E>)X}TiiAw0n_1ZCIWBv8MRWOG0G#j+=
zVIgeA0YTB&B!67$BLh7#Go??bLy7_DFWG157}Zp4f?22lUG??z#x~Ay9#@>hx~?xX
z(*=T@7=MSSunb7Pnk1>KAj*{<iRKY?e}`p=Uhr?pqYpp%?Gx9dAi?}8HxSC{7E_+u
z)9X66_VhL@EG%;t$G{=HSLF4s2S^BkUGL_cTLvLFw>Mdh;xL=bVbWndbL;~Kp8Ay>
zj8z*kFxU5z8wGffw=GeRE$E7%P9(zo9`;ow!LcP9e;x3x3#n<YKIyeKV_n>f<9*Kk
z?#2lh<R||CN4AZn-+uaWO&R)VFE;JuAdj@CiGE?M`}tM0pJL=MoqW*<QQa$Y($TMd
zF*rB~OIF@xA2iH2i9@)nLpjnM{~-v;yPR^&kSkG1VE=O;V@O^T0i8=j9{UTzyN6s}
zuWFf?4K%5<6d2}5(VT)s>QS_os5hXwF7c#^tQ29z31@PVQ3F+~->e?6afF*feoH_<
zvH|f|v96YMlU93zcN~?-F!;?;XUVgw0^<6ms&qLoY*ny-PBpPlV9t7wgCe>|)NUeq
zA$E!QUr$%K3taZTbh-<iM;Hwt=_H>6jq8}JKXiwIP#lzg-Clt6xdlpoX?dQf@$X`M
z>MSN3Lb|3%HxhX27V<u>g5jIT!)KKJ+J%aoDrevG@hTH+A<v|M0eoNxvdX>^+q7fA
z{v+`C;PrO9-q4vY+bsmKUQkb!&+Cg#Knm7Xewvb2_(1QZvFWgpB~@(SZmfsG@t*9{
zUn01KYIbHn48^m>N0ETW4&VP}<e~rUXVjerY*=f52hWUswTj@<l9qnDs^HSAMAaKO
zrSdU>A+Hx5A4(4EGy7>Hqz$6ghXW?W3E}AfLxcgxHaZeq0Qia9g1#ago;l~0hXh%8
zLEfoYJ3z`7{+eu_0Rm{(OX>Lm66(E2zMNU=Rt`e#g9L~*=zC%QUv?_&2tE|R#e8eJ
zWp)1tByu`&9i>C}o0|#V^0yPSKY*U_j?ADjIT(qe#J0I`yr|K3FD3Vnv?S@eZT&Sy
z^aAB|J`j1%lj0R&A!^qX;kRrhbNCo?3{f0MlL!EP#xsEfl#ts?tJr*NdlmKR=?$;I
z)heH$L2=PndVFuL8ooZCE5!r^3`gT*>9egDxy{m^gyP-LYLQBNiml>B1jExd#-8~t
z+vK4Pq8+9J#SGCW=CJP{s%Ya}j00#d;)Hu=dgwRI!LLH9XpOP!w#VcXu$7ku9csm$
zp#CHBpPqjcyl-^+^ELfk4a^maH0Us;+sea&bZuG<IC#f-WN@Zm?3?bp|Lm<OA4pRB
zCxS-g8;Rq+?w(8KPnq`&6rP)j3|U8f+Q_SH;2L0F-?{0rCT_<O%Vhb53&tH9l1jvX
zuSoGHxU1%5k)p|1alF4Hl%ri3Kc{oW;b2C5V1on9osuQ?R+-n*!LqRN?bzL%=?})H
zom<*Ccs9?>^W_6)W6XrDV|g-(+q1A`13!WZnko~#1Q&O~Z?i}Uy0<Uq0X%4O&j}QT
zXPFjN&vBc}k8qK~d>j`>7cE9_-2DbFgYLh>tN2sL_;_Si6~;zbo62U%BCSzQN=*FT
zO}T)+iUYX>^M9|&@CAJ%wpU!&0-$9k5-Osuc@$a<%^ftK=UdVBg@K-KOqq634JJ%?
z@rNE0^wEFZQ#hp~chkB_z7JCANbL!}RGAwvpk*t^_0+!AnV^Puq#bP!IoNn}dI?1x
z_|};09_GgB?)-qPLjy2OescN>J?(N`y8T{tV^H&Gu%P_S8n9hI07dbK?P`XU;a~RI
z!$!vhK~4g<<N^v4k8oPDD@-LGnO2gC2=R1YhEzUqA2#~m=gD&%%)O)rN3lzAk4H6R
zfZ?JUyZ<BEi;pAP{3{m4ihgcTB&jl8oVzfV>dZhAP-Ue(X*sh>wNnHXwUP|-@;j2H
zSLm19pmZ!nqswb{q@4L!3Yogd^v4Y^>eIIyd&EsAKm{n9nRXYQ{iZG{H${)uX#a#_
za-oesV!|=Np$oaurFfZ{_g}$U<a)HzNr6vElIN!A2dfsNHa4~C=Z4&Ci1nWfjqbK#
zq<5Hebimsgc{zh>!2zD@$YU>*xn>_dOZXY&st^cUsQ4wN$`jE1`*tY<UFlqWES<7>
zRn=UktUtMzaozPN#e%<)c#()XeicTrdjj?IN}3iF&o;Z->8NcDAX<a(F`an3U)F*P
zj}J8@=Es)QZ%$NIwFzNW&mD_}=}4BWSZ7HmSx5XjsaRKwVTDHv(P*>Ih*k5ryK7z@
z+Nf=Js#opT47JgGbQw0S0PnGbq;4f-DgCEnqIoH|CJ<uLW{w_iRncmRtH5-)@L_J(
zHCXowV3Qyli+@oBDKCzyMoMCd`TOyu=Oh4jN2Mk7K9X1yOEkJ3k61}9V1KP-UMW(F
zJv-!^=`Nu)mcQ_?qNU|N^j*iy^JUA}xU`Necybs=G)=!gT|*o-zo1=;PMr6KIGkT*
zCGR1?QUYy0wu9m-_#Gr*vXZw`sv=Q+6vpD5@YVg&pB7-AwBN5UGKlwMQl1YY9B}7x
z$E^gJKZ(R1GgR@Aa^K*`zEhj9F%~Rx8Ex)9g++Iq32ONBOOFh@j+P@!Tj?*6#oJo^
z{>`X}9;(r!Q_k+#LPPuY4@3F*MOr<oRi|jErfLoI1?At9vXKJoerfj!5bf5N5=$xF
z&i9u)m<Jt&qSb)CfMW6Wl1a;p34{Z*R(itJSR7CH4ql!NN2$gj^>X0l6(BkdpG!}+
zaWCd(^ZtZX{QB_CTWyNdjvv}PL7SM5g+KyZ70#T(J$_Xj{@$oGhiIedxLw-kryuOj
zdxt8icH}LFW$K2q6fJ_vACQp%CZWxdDih*9F)&W#OyiNV{Tu>N@k=xleW)g%b*@fs
z%F$?rFhi&n?1`Zk9*(V2wxGuLt6gz6Ib`zU5AR+|SmQjl#d#0xk>Mbg2KvysP`5%S
z{r!a)$3ZMo&cfj@wmJzU>+_IZLcPI3kaSFcmpm6%ofvbzkov7Cv_L3@j8TYycF~k1
zJ~;B`QpwHejox^i)e#bd@Z7o~Z394#sWZ36vm%cYjr#maG1hf!@GYi9vi<B#71dU@
z+w7_GCQ2M+1wnVkYTwLZ`~TibaL&i~FL=S84+EU*poN^S3f_EHz*SV&PQq+UE03Z{
zntdbE^NEruvN<tf3?O*@{%9bNs3Svk&Az4K8F1#nmHB&%5BsO|MXERJ{#!Iu_2Q7f
z6jR9UhC`Tdy}|i8wYgOtD?so|!(2Z$)?X#Th1<OdGQd-Bw6}~w15CQvKp7eTqQ(Jj
zwki$>&%^rrHanaqkCVpAkQ%U4zviITxr1WB($1T>KPq-`n5bDPqy7_~f+m*`$Lqaz
zkMUW>mD%%YUbzgEKyvVd$pdjSQpEY_d|k;gj5wjZd?j_;=EJT?MGcz<azO7sC_QUZ
z+bZ1>xlVM`g)A$oe3%9u0kH{@d7tRtvR!ijoSPYChD;sth%Z&N<hVv>cHDCRfGOj1
z!4UP(c8Ue0<rCM%#^AtVNs7Jw(a`Sq4OMraeOQOJD8_xz*~*y1<Vp)(?~d+xYVG?H
z&fLFoU+a(;WA~6-j+!6zU5vKB<V!Vn0E<0;%bQ(iqWCJ1hMp^}CG=eTB{bF@!iVOH
zwA9ra_hXPJl>4}c%FzBE+*|)JQp6Fm?Uku=(TS9eIW4}*atr|TC<S*)zd(J_C~y}w
z(->Z2b<k}4ms&qGymz+?!@lN9TVBa$!@fTn6(rJZ`t-#ddZz}PVJG?<J5tc;#1+|k
zWR$??>N>iWK#Nq2i2Od5Ep&XJQ4UQy;QsF8%Kyz$yLz#x;c#t5QN{c)4c6!yJ%bbH
z+qR)d&y8#s>a8xNQKvIIz<j+r&cn8r2AOxSS#g*$ZZ$~y0;)(qHRApzggQ$LM4T>3
zpTGZEUX08lu-UgS=E~Ydtnkd_VFI~t+VkHK!8>MFyI87BUjFkofKPjKQ_3sG{d3hX
z7Z5bjyL@N)MONz%&fKvXj#))Jzu>LQdZa|la+V{94F*WlJ&2kEAHB%P#uI7Bqi+B5
z4GiKLNc~*ktIB2*W(+Q>r(y~|BaK;jlwPk(rudR~Mv`i;BFk&HOLAeY0<cXVF(nr6
zw}Ir*NS)I^i!HA6Q1Xuy1G|+6B#hnkB7G0Mp(k*a1~IzUu1~9zX02A=3B#ceJXa0-
zUS?{zQRM@LG%96%TzMI$u{iIF-qAaAq%`Tvp0RfrFHOAd{ndwi!JdbfU@z-{T$E+O
z{*3AFr((U=z07^(!G?k|WdsJ}mxk|XVoOL1VS~RgW;e+3{heJg{eD<WR78b=@k^)#
z=EbWj6Y>JE6la~KmI7LP%6bJmaiX$7COH^*kavux^idwaX!i&IlEbMs9@4op*!Nt$
zG)IwaMJj?xe$3D35$r0awDirYPj{MeGnRCsAJ7>27AlUEe8xOEu|KqTr7W5l)9qsT
z_kZEhl2H4e&<x)u1sT2lN{;apX^EbLiCI_;ue9K+<3;H1l)aBjyEWU1@b}0}-eg<F
zOn%T&z2a>HC~eDVLG;opVXGl-+h+Own`hI?>rx3#=4^i~YrgI&3ohMC3e$9bpkF%}
z82NlfL8Q>KLmQl6-?;Z|!_)Oa0o-Jxl0&olen8fo>KsLR2P>s9D}lDj`^6mJxR<FZ
zfo$D^iHcJ$QiaEUVs@tpUs{|yj}PJ=)%|=g=i!%!!KS})#s1n1l|g(&EXFR~=G$~$
z+4!Oi)}MreCsr-Zy&|z2T!T)buY4N94{tR4+WY^avpiZtxYT_tgg~veB}#%z{LFr@
zK6Cx*BDK5Y4%>Kbzy%#S|E&qa?Qz+b7WMhbt`aPaHi1W+$fTbA3R`^2I4m}lL%c=s
zfW;^E!iTf2EvN7J1_Pt&aK9h1Zzvgg9~BrHlvas#PZDIfFa-6pcf@3wv4{=oU!gCr
zJ5R~!l-9EjOrAB<;i|P;@b>FZ)n`LGz=PZ;sk{i_rav(O6EC`@PSNxGfVg5L(kz={
zqL(oieSsyV{zdIC7;)ANg1~nFiE^jXYzGkl50+Z$KnbmH^<2Tl{{AgJ39wo%OJ};l
zm1R9aWb^`c99s{41D&{9OD~&kR!fgC_?mu|*L!xzmXmYf^K;zDTKa(m1icw?h!Q=f
zDphWd;}^9b1eYvpX+xD|G&A`R?WwuPGVfE#SS6-xvz#G?>nn)hh<nxt7_mfnk%YX8
zuqC?R+qtgtcJWbM(V9x&xU)=0+)PMI%Pt0(C;6p;Oj34C%Wg{+_X|$;o*omvLdF9t
zqOhIUyDuG!fN}P-{TgY+6TL0&c&ijvuR^cGkqcWPzCa90{?_(li%jY^ohoZVDBT3N
zk|q5(LI7{M#3M|xnlJY0ssSQap)gwc0V=ST+HWbP-cpO$e>VN<V9JP1Vsj}8SyGt8
zmyB2V_kO=-*?i_|IMrlZu#$76D1^+#hR2z}oirbeNJRR7vLJICs2it>Bu9lyNXmXt
z^&)g0f%ZPTA&feQa+?`MzJ;meO&kfj-i(wY+-y>4mE*6x5{FMVe2X(FE8qDTTA8*^
zOzkTAkCi!|_1R$g=NgQQVZMTk04<T4K@)5g^Lp$?0L@QyiWyre1+n_i&1UDU<%=}?
zXANP(0N!xwNDi_}GG`?if#YS%R;%C;tFKT*x}^O5V~Ue%ReWkoD<Px*mP~ZVp_i&v
zxjBDQ9J5&jo&?<vS+iSx=Bv9mb@SX){%z{(zmTrtD*kVJA?t_&$4SLDjcoY2e!`i{
z79V#Vpd*{23MU=E-k6y+{g*y5xP{?q|6ui*V%5Kp8B<4iG-cesi@s8xh;F3j^bz#-
z7#TBMHuxC{O&RAOZ!^zUfz6amwzp!hm%>IRd_vlV`}QUkKlTma4I$C}pGqw{CTH|+
z!scHaVXH|_i9=h9C7s{)q4$siUjXg?fFF}B8mDHw$?+MJP!SJvQJOnm_#5Jw(lV%(
z6%t?pVMh#g|7ECY(UJ2fjW`SDl=;Q44`BOhGpfF<NZL0L6)0nP{K+6P5s-yqQAbTD
zvhR-NslO>olR27vQs>D)`S=>gG{R@^+H@a&6Q#dhrlC>PIelIj5Fy^Bm%+XMHN4C>
zHMwIoMgq;raGZ7dC|}x`L*+4)CVjuB2|ECp^b4I{&e~WmiSfKgCgNMzr)kPCorJ?F
z0Y$QD@tg4-OSB{O+~p@TXvr_xg^=`ig4s#o4QL6t;wa+%t@<ISpP0H{8mU1*3O~?W
z2O^}_W#X+%lRnMj=n<GxlIYC_&^~GZnCvM$3qQmKaC4pYs>EK!bn$7>M&ilZkG^F1
zm#YvI`GoP{SS5hGCx<+ntFOaWWleQ}sO8KRdFM+=s##=z)K3#<SF5DAY;==h^?|Z`
zYl-T2C^F4j%U7P!5r4fBim(jwSNw+mG6^@Hmwf*f4Pz7;Z>TKj(>47puAcfj{`Dhe
zkB>}6ZP!b~UJ0=aoWBNK7;bO8;{BHffmJB_t9JJxr4MN0#=^DBM|+hK(Ue;51!*S=
z%$yM(jl6)VSot02DI^iqPt(Ll4jWOHTkW$FP2VoS&rP#Zn;U9_Or?s$3YL)<tP}^?
zO*4VCfIAbAF0I?q>6W*Lw$ec%F*SeD<}_&ONdR5z^k85(D2Js*O-T2rkEoEfirjzk
z<J<j^cQd!iSJy_N6yOWt5{a_yWlrnnshRwiWZuGpZx!4X@>-0ve2|wz|4d`S^z*$s
zYOTYseHHBQ;CKIhAg>Bi=WgT3{f_v)Z70NH0U6LH)=zE-`<#=maLs5O<C|yxZ*oe*
zPO-#+)2au{Mgtj!2Yo>n|K8=h7wMM!T#(8YX9pDsE|XA2&h#?_!{QM{+R%ZA)l(qt
z`||q+668c&h?I?o{$+_<qoB^Rg{Lv0EN{6ZN?#zmBFR<W+%SPOHL*ysf6VWEYATgJ
zCTo=)JxS%e!=A!9sZp3|BxUeQQn<n>;$32g98&`dAzZPoc5^ZoiuZbC7m>O$XvTtE
zlYS-BYGdu<m;}cZ#Y_Qv`}E+pa=uD#ykFWvMVnuZ2R~v7%fH8d<a3AKVtp&F4D!Sm
z{BLo}a3V^{X)rb}>1~?L6+e<VQ{Z)^r$cBxdu1Z#5qvsBS8^WNv`7!iIJz4~{5QjJ
hB*w0lpOWQ?E^3(4-3y_`fc(!4KuJzbwo2Lz{(mdzL%je1

literal 0
HcmV?d00001

diff --git a/src/livecodes/html/language-info.html b/src/livecodes/html/language-info.html
index c990bac90d..659041750f 100644
--- a/src/livecodes/html/language-info.html
+++ b/src/livecodes/html/language-info.html
@@ -1549,6 +1549,30 @@ <h3 data-i18n="language-info:riot.name">Riot.js</h3>
     </li>
   </ul>
 </section>
+<section data-lang="ripple">
+  <h3 data-i18n="language-info:ripple.name">Ripple</h3>
+  <div data-i18n="language-info:ripple.desc">the elegant TypeScript UI framework</div>
+  <ul data-i18n="language-info:ripple.link" data-i18n-prop="innerHTML">
+    <li>
+      <a href="https://www.ripplejs.com/" target="_blank" rel="noopener">Ripple official website</a>
+    </li>
+    <li>
+      <a href="https://www.ripplejs.com/docs/introduction" target="_blank" rel="noopener"
+        >Ripple documentation</a
+      >
+    </li>
+    <li>
+      <a href="{{DOCS_BASE_URL}}languages/ripple" target="_blank" rel="noopener"
+        >LiveCodes documentation</a
+      >
+    </li>
+    <li>
+      <a href="?template=ripple" class="button" target="_parent" data-template="ripple"
+        >Load starter template</a
+      >
+    </li>
+  </ul>
+</section>
 <section data-lang="ruby">
   <h3 data-i18n="language-info:ruby.name">Ruby</h3>
   <div data-i18n="language-info:ruby.desc">Ruby running in the browser using Opal.</div>
diff --git a/src/livecodes/languages/ripple/lang-ripple.ts b/src/livecodes/languages/ripple/lang-ripple.ts
index 76c59d5742..88289925c6 100644
--- a/src/livecodes/languages/ripple/lang-ripple.ts
+++ b/src/livecodes/languages/ripple/lang-ripple.ts
@@ -3,7 +3,6 @@ import type { LanguageSpecs } from '../../models';
 export const ripple: LanguageSpecs = {
   name: 'ripple',
   title: 'Ripple',
-  info: false,
   formatter: {
     factory: async (baseUrl, _language, config) => {
       (self as any).importScripts(baseUrl + '{{hash:lang-ripple-formatter.js}}');
diff --git a/src/livecodes/templates/starter/ripple-starter.ts b/src/livecodes/templates/starter/ripple-starter.ts
index 9de3a135c2..bbe8451d88 100644
--- a/src/livecodes/templates/starter/ripple-starter.ts
+++ b/src/livecodes/templates/starter/ripple-starter.ts
@@ -3,7 +3,7 @@ import type { Template } from '../../models';
 export const rippleStarter: Template = {
   name: 'ripple',
   title: window.deps.translateString('templates.starter.ripple', 'Ripple Starter'),
-  thumbnail: 'assets/templates/ripple-0.png',
+  thumbnail: 'assets/templates/ripple.png',
   activeEditor: 'script',
   markup: {
     language: 'html',
@@ -21,7 +21,7 @@ import { track } from 'ripple';
 component Counter(props: { name: string }) {
   <div class="container">
     <h1>{\`Hello, \${props.@name}!\`}</h1>
-    <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ripple-0.png" />
+    <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ripple.png" />
 
     const count = track(0);
     <p>{\`You clicked \${@count} times.\`}</p>

From 2b71b23b6e976af7411ae9db3ab5369eac6b9514 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 24 Sep 2025 14:50:43 +0300
Subject: [PATCH 59/71] run `i18n-export`

---
 .../i18n/locales/en/language-info.lokalise.json      | 12 ++++++++++++
 src/livecodes/i18n/locales/en/language-info.ts       |  5 +++++
 2 files changed, 17 insertions(+)

diff --git a/src/livecodes/i18n/locales/en/language-info.lokalise.json b/src/livecodes/i18n/locales/en/language-info.lokalise.json
index d73b7f3b13..26b782756b 100644
--- a/src/livecodes/i18n/locales/en/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/en/language-info.lokalise.json
@@ -760,6 +760,18 @@
     "notes": "",
     "translation": "Riot.js"
   },
+  "ripple.desc": {
+    "notes": "",
+    "translation": "the elegant TypeScript UI framework"
+  },
+  "ripple.link": {
+    "notes": "### <tag-1> ###\n<li  />\n\n### <tag-2> ###\n<a href=\"https://www.ripplejs.com/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-3> ###\n<li  />\n\n### <tag-4> ###\n<a href=\"https://www.ripplejs.com/docs/introduction\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-5> ###\n<li  />\n\n### <tag-6> ###\n<a href=\"{{DOCS_BASE_URL}}languages/ripple\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-7> ###\n<li  />\n\n### <tag-8> ###\n<a href=\"?template=ripple\" class=\"button\" target=\"_parent\" data-template=\"ripple\" />\n\n",
+    "translation": "<tag-1> <tag-2>Ripple official website</tag-2> </tag-1> <tag-3> <tag-4>Ripple documentation</tag-4> </tag-3> <tag-5> <tag-6>LiveCodes documentation</tag-6> </tag-5> <tag-7> <tag-8>Load starter template</tag-8> </tag-7>"
+  },
+  "ripple.name": {
+    "notes": "",
+    "translation": "Ripple"
+  },
   "ruby.desc": {
     "notes": "",
     "translation": "Ruby running in the browser using Opal."
diff --git a/src/livecodes/i18n/locales/en/language-info.ts b/src/livecodes/i18n/locales/en/language-info.ts
index 849bf97bb1..81fef23ea9 100644
--- a/src/livecodes/i18n/locales/en/language-info.ts
+++ b/src/livecodes/i18n/locales/en/language-info.ts
@@ -328,6 +328,11 @@ const languageInfo = {
     link: '<1> <2>Riot.js official website</2> </1> <3> <4>Riot.js documentation</4> </3> <5> <6>Load starter template</6> </5>',
     name: 'Riot.js',
   },
+  ripple: {
+    desc: 'the elegant TypeScript UI framework',
+    link: '<1> <2>Ripple official website</2> </1> <3> <4>Ripple documentation</4> </3> <5> <6>LiveCodes documentation</6> </5> <7> <8>Load starter template</8> </7>',
+    name: 'Ripple',
+  },
   ruby: {
     desc: 'Ruby running in the browser using Opal.',
     link: '<1> <2>Ruby official website</2> </1> <3> <4>Ruby documentation</4> </3> <5><6>Opal official website</6></5> <7> <8>Opal standard library CDN</8> </7> <9> <10>Learn X in Y minutes, where X=ruby</10> </9> <11> <12>LiveCodes Documentations</12> </11> <13> <14>Load starter template</14> </13>',

From a0df8909c8bf60c0aae3960fab57f946a5406bf9 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 25 Sep 2025 02:15:06 +0300
Subject: [PATCH 60/71] update docs with new reactivity syntax

---
 docs/docs/languages/ripple.mdx | 108 +++++++++++++++++----------------
 docs/docusaurus.config.ts      |   1 +
 2 files changed, 58 insertions(+), 51 deletions(-)

diff --git a/docs/docs/languages/ripple.mdx b/docs/docs/languages/ripple.mdx
index 99cbfed08d..0d20e38610 100644
--- a/docs/docs/languages/ripple.mdx
+++ b/docs/docs/languages/ripple.mdx
@@ -17,39 +17,41 @@ export const demo = {
   activeEditor: 'script',
   script: {
     language: 'ripple',
-    content: ` export default component Counter() {
-   let \$count = 0;
-   let \$doubled = \$count * 2;
-
-   <div class='container'>
-     <h2>{'Counter'}</h2>
-     <p>{\`Count: \${\$count}\`}</p>
-     <p>{\`Doubled: \${\$doubled}\`}</p>
-
-     <button onClick={() => \$count++}>{'Increment'}</button>
-     <button onClick={() => \$count = 0}>{'Reset'} </button>
-   </div>
-
-   <style>
-    .container {
-      text-align: center;
-      font-family: "Arial", sans-serif;
-    }
+    content: `import { track } from 'ripple';
 
-    button {
-      font-size: 1em;
-      padding: 6px 12px;
-      margin: 0 6px;
-      cursor: pointer;
-      border: none;
-      font-family: "Courier New", monospace;
-    }
+export default component Counter() {
+  let count = track(0);
+  let doubled = track(() => @count * 2);
 
-    button:hover {
-      background-color: #e0e0e0;
-    }
-   </style>
- }`,
+  <div class='container'>
+    <h2>{'Counter'}</h2>
+    <p>{\`Count: \${@count}\`}</p>
+    <p>{\`Doubled: \${@doubled}\`}</p>
+
+    <button onClick={() => @count++}>{'Increment'}</button>
+    <button onClick={() => @count = 0}>{'Reset'} </button>
+  </div>
+
+  <style>
+  .container {
+    text-align: center;
+    font-family: "Arial", sans-serif;
+  }
+
+  button {
+    font-size: 1em;
+    padding: 6px 12px;
+    margin: 0 6px;
+    cursor: pointer;
+    border: none;
+    font-family: "Courier New", monospace;
+  }
+
+  button:hover {
+    background-color: #e0e0e0;
+  }
+  </style>
+}`,
   },
 }
 
@@ -83,9 +85,11 @@ export const customRoot = {
   },
   script: {
     language: 'ripple',
-    content: `export default component App() {
-  let \$name = 'Ripple';
-  <div>{\`I'm a \${\$name} component\`}</div>
+    content: `import { track } from 'ripple';
+
+export default component App() {
+  let name = track('Ripple');
+  <div>{\`I'm a \${@name} component\`}</div>
   <style>
     div {
       color: #0e5ca3;
@@ -165,20 +169,20 @@ Module imports can be customized using import maps as described in [module resol
 Example:
 
 export const importsDemo = {
-  ripple: `import { effect } from "ripple";
+  ripple: `import { track, effect } from "ripple";
 import confetti from "canvas-confetti";
 
 export default component App() {
   <div class="container">
-    let $count = 0;
+    let count = track(0);
 
     effect(() => {
-      if ($count === 2) confetti();
+      if (@count === 2) confetti();
     });
 
-    <button onClick={() => $count++}>{$count}</button>
+    <button onClick={() => @count++}>{@count}</button>
 
-    if ($count > 1) {
+    if (@count > 1) {
       <div>{'Greater than 1!'}</div>
     }
   </div>
@@ -214,19 +218,19 @@ export const externalComponents = {
   script: {
     language: 'ripple',
     content: `// import from npm modules
-import Counter from 'ripple-tailwind-counter-demo/src/Counter.ripple';
+import { track } from 'ripple';
+import { Counter } from 'ripple-tailwind-counter-demo/src/Counter.ripple';
 // alternatively use absolute URLs
-// import Counter from 'https://raw.githubusercontent.com/hatemhosny/ripple-tailwind-counter-demo/refs/heads/main/src/Counter.ripple';
-
+// import { Counter } from 'https://raw.githubusercontent.com/hatemhosny/ripple-tailwind-counter-demo/refs/heads/main/src/Counter.ripple';
 
 export default component App() {
-  let $name = "World";
+  let name = track("World");
 
   setTimeout(() => {
-    $name = "Ripple + Tailwind!";
+    @name = "Ripple + Tailwind!";
   }, 2000);
 
- <Counter $name={$name} />
+ <Counter {name} />
 }
 `,
   },
@@ -334,28 +338,30 @@ export const tailwindDemo = {
   activeEditor: 'script',
   script: {
     language: 'ripple',
-  content: `export default component Counter() {
-  let $count = 0;
+  content: `import { track } from 'ripple';
+
+export default component Counter() {
+  let count = track(0);
 
   <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
     <h1 class="header">{'Ripple + Tailwind CSS'}</h1>
     <div class="flex items-center space-x-4 mb-4">
       <button
-        onClick={() => $count--}
+        onClick={() => @count--}
         class="w-12 px-4 py-2 bg-red-500 text-white rounded-lg shadow hover:bg-red-600 transition cursor-pointer"
       >
         {'-'}
       </button>
-      <span class="text-3xl font-semibold text-gray-800">{$count}</span>
+      <span class="text-3xl font-semibold text-gray-800">{@count}</span>
       <button
-        onClick={() => $count++}
+        onClick={() => @count++}
         class="w-12 px-4 py-2 bg-green-500 text-white rounded-lg shadow hover:bg-green-600 transition cursor-pointer"
       >
         {'+'}
       </button>
     </div>
     <button
-      onClick={() => $count = 0}
+      onClick={() => @count = 0}
       class="px-6 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition cursor-pointer"
     >
       {'Reset'}
diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
index 815f2cddfb..9acc45ced2 100644
--- a/docs/docusaurus.config.ts
+++ b/docs/docusaurus.config.ts
@@ -290,6 +290,7 @@ const config: Config = {
         plugin: ['typedoc-plugin-missing-exports'],
         excludeExternals: true,
         internalModule: '_internal',
+        skipErrorChecking: true,
       },
     ],
     [

From efdea7ea95ea817c58c70d96b0d7f01cec8c334d Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 27 Sep 2025 20:43:31 +0300
Subject: [PATCH 61/71] update ripple syntax

---
 .../monaco/languages/monaco-lang-ripple.ts    | 474 ++++++++++++------
 1 file changed, 325 insertions(+), 149 deletions(-)

diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
index b6cfdc30cc..fac513de5e 100644
--- a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
+++ b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
@@ -103,6 +103,9 @@ export default {
           {
             include: '#var-expr',
           },
+          {
+            include: '#server-block',
+          },
           {
             include: '#component-declaration',
           },
@@ -229,7 +232,7 @@ export default {
           {
             name: 'keyword.control.trycatch.js',
             match:
-              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(catch|finally|async|throw|try)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
+              '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(catch|finally|pending|throw|try)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.))',
           },
           {
             match:
@@ -327,6 +330,24 @@ export default {
       },
       expression: {
         patterns: [
+          {
+            name: 'meta.identifier.tracked.js',
+            match: '(@)([_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'punctuation.section.embedded.begin.js',
+              },
+              '2': {
+                name: 'variable.other.js',
+              },
+            },
+          },
+          {
+            include: '#server-member-expression',
+          },
+          {
+            include: '#jsx-ref-modifier',
+          },
           {
             include: '#expressionWithoutIdentifiers',
           },
@@ -379,6 +400,12 @@ export default {
           {
             include: '#object-literal',
           },
+          {
+            include: '#tuple-literal',
+          },
+          {
+            include: '#record-literal',
+          },
           {
             include: '#expression-operators',
           },
@@ -407,17 +434,33 @@ export default {
         ],
       },
       decorator: {
-        name: 'meta.decorator.js',
-        begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))\\@',
-        beginCaptures: {
-          '0': {
-            name: 'punctuation.decorator.js',
-          },
-        },
-        end: '(?=\\s)',
         patterns: [
           {
-            include: '#expression',
+            name: 'meta.identifier.tracked.js',
+            match: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(@)([_$[:alpha:]][_$[:alnum:]]*)',
+            captures: {
+              '1': {
+                name: 'punctuation.section.embedded.begin.js',
+              },
+              '2': {
+                name: 'variable.other.js',
+              },
+            },
+          },
+          {
+            name: 'meta.decorator.js',
+            begin: '(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))\\@(?![_$[:alpha:]])',
+            beginCaptures: {
+              '0': {
+                name: 'punctuation.decorator.js',
+              },
+            },
+            end: '(?=\\s)',
+            patterns: [
+              {
+                include: '#expression',
+              },
+            ],
           },
         ],
       },
@@ -427,7 +470,7 @@ export default {
             name: 'meta.var.expr.js',
             begin:
               '(?=(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(var|let)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))',
-            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(var|let)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=^|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|((?<!^let|[^\\._$[:alnum:]]let|^var|[^\\._$[:alnum:]]var)(?=\\s*$)))',
+            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(var|let)(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=^|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|(?=\\s*$))',
             patterns: [
               {
                 begin:
@@ -503,7 +546,7 @@ export default {
                 name: 'storage.type.js',
               },
             },
-            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(const(?!\\s+enum\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=^|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|((?<!^const|[^\\._$[:alnum:]]const)(?=\\s*$)))',
+            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b(const(?!\\s+enum\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=^|;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|(?=\\s*$))',
             patterns: [
               {
                 begin:
@@ -579,7 +622,7 @@ export default {
                 name: 'storage.type.js',
               },
             },
-            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b((?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|((?<!^using|[^\\._$[:alnum:]]using|^await\\s+using|[^\\._$[:alnum:]]await\\s+using)(?=\\s*$)))',
+            end: '(?!(?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(?:(\\bexport)\\s+)?(?:(\\bdeclare)\\s+)?\\b((?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b))(?![_$[:alnum:]])(?:(?=\\.\\.\\.)|(?!\\.)))((?=;|}|((?<![_$[:alnum:]])(?:(?<=\\.\\.\\.)|(?<!\\.))(of|in)\\s+)|;|^\\s*$|(?:^\\s*(?:abstract|async|(?:\\bawait\\s+(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)\\b)|break|case|catch|class|const|continue|declare|do|else|enum|export|finally|function|for|goto|if|import|interface|let|module|namespace|switch|return|throw|try|type|(?:\\busing(?=\\s+(?!in\\b|of\\b(?!\\s*(?:of\\b|=)))[_$[:alpha:]])\\b)|var|while)\\b))|(?=\\s*$))',
             patterns: [
               {
                 begin:
@@ -895,6 +938,9 @@ export default {
           {
             include: '#array-literal',
           },
+          {
+            include: '#tuple-literal',
+          },
           {
             include: '#numeric-literal',
           },
@@ -1328,6 +1374,9 @@ export default {
           {
             include: '#array-literal',
           },
+          {
+            include: '#tuple-literal',
+          },
           {
             include: '#numeric-literal',
           },
@@ -1744,6 +1793,9 @@ export default {
           {
             include: '#array-literal',
           },
+          {
+            include: '#tuple-literal',
+          },
           {
             include: '#numeric-literal',
           },
@@ -2287,6 +2339,9 @@ export default {
                   {
                     include: '#array-literal',
                   },
+                  {
+                    include: '#tuple-literal',
+                  },
                   {
                     include: '#comment',
                   },
@@ -2977,6 +3032,31 @@ export default {
             name: 'keyword.control.loop.js',
             match: 'await',
           },
+          {
+            name: 'meta.for-of-with-index.ripple',
+            match:
+              '\\(\\s*(let|const|var)\\s+([_$[:alpha:]][_$[:alnum:]]*)\\s+(of)\\s+([^;]+)\\s*;\\s*(index)\\s+([_$[:alpha:]][_$[:alnum:]]*)\\s*\\)',
+            captures: {
+              '1': {
+                name: 'storage.type.js',
+              },
+              '2': {
+                name: 'variable.other.readwrite.js',
+              },
+              '3': {
+                name: 'keyword.operator.of.js',
+              },
+              '4': {
+                name: 'variable.other.object.js',
+              },
+              '5': {
+                name: 'keyword.keyword.index.ripple',
+              },
+              '6': {
+                name: 'variable.other.readwrite.js',
+              },
+            },
+          },
           {
             begin: '\\(',
             beginCaptures: {
@@ -3230,6 +3310,9 @@ export default {
               {
                 include: '#array-literal',
               },
+              {
+                include: '#tuple-literal',
+              },
             ],
           },
           {
@@ -4042,6 +4125,12 @@ export default {
           {
             include: '#array-literal',
           },
+          {
+            include: '#tuple-literal',
+          },
+          {
+            include: '#record-literal',
+          },
           {
             include: '#this-literal',
           },
@@ -4073,6 +4162,55 @@ export default {
           },
         ],
       },
+      'tuple-literal': {
+        name: 'meta.tuple.literal.js',
+        begin: '(#)(\\[)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.tuple.js',
+          },
+          '2': {
+            name: 'meta.brace.square.js',
+          },
+        },
+        end: '\\]',
+        endCaptures: {
+          '0': {
+            name: 'meta.brace.square.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#expression',
+          },
+          {
+            include: '#punctuation-comma',
+          },
+        ],
+      },
+      'record-literal': {
+        name: 'meta.record.literal.js',
+        begin: '(#)(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'keyword.control.record.js',
+          },
+          '2': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#object-member',
+          },
+        ],
+      },
       'numeric-literal': {
         patterns: [
           {
@@ -6269,8 +6407,8 @@ export default {
       },
       'jsx-tag-without-attributes-in-expression': {
         begin:
-          '(?<!\\+\\+|--)(?<=[({\\[,?=>:*]|&&|\\|\\||\\?|\\*\\/|^await|[^\\._$[:alnum:]]await|^return|[^\\._$[:alnum:]]return|^default|[^\\._$[:alnum:]]default|^yield|[^\\._$[:alnum:]]yield|^)\\s*(?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>))',
-        end: '(?!(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>))',
+          '(?<!\\+\\+|--)(?<=[({\\[,?=>:*]|&&|\\|\\||\\?|\\*\\/|^await|[^\\._$[:alnum:]]await|^return|[^\\._$[:alnum:]]return|^default|[^\\._$[:alnum:]]default|^yield|[^\\._$[:alnum:]]yield|^)\\s*(?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:(?!children)[a-z][a-z0-9]*|(?:children|(@?[_$[:alpha:]][-_$[:alnum:]]*(?:\\.@?[_$[:alpha:]][-_$[:alnum:]]*)*)))(?<!-))?\\s*(>))',
+        end: '(?!(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:(?!children)[a-z][a-z0-9]*|(?:children|(@?[_$[:alpha:]][-_$[:alnum:]]*(?:\\.@?[_$[:alpha:]][-_$[:alnum:]]*)*)))(?<!-))?\\s*(>))',
         patterns: [
           {
             include: '#jsx-tag-without-attributes',
@@ -6280,8 +6418,8 @@ export default {
       'jsx-tag-without-attributes': {
         name: 'meta.tag.without-attributes.js',
         begin:
-          '(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>)',
-        end: '(</)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>)',
+          '(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:(?!children)[a-z][a-z0-9]*|(?:children|(@?[_$[:alpha:]][-_$[:alnum:]]*(?:\\.@?[_$[:alpha:]][-_$[:alnum:]]*)*)))(?<!-))?\\s*(>)',
+        end: '(</)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:(?!children)[a-z][a-z0-9]*|(?:children|(@?[_$[:alpha:]][-_$[:alnum:]]*(?:\\.@?[_$[:alpha:]][-_$[:alnum:]]*)*)))(?<!-))?\\s*(>)',
         beginCaptures: {
           '1': {
             name: 'punctuation.definition.tag.begin.js',
@@ -6331,8 +6469,8 @@ export default {
       },
       'jsx-tag-in-expression': {
         begin:
-          '(?x)\n  (?<!\\+\\+|--)(?<=[({\\[,?=>:*]|&&|\\|\\||\\?|\\*\\/|^await|[^\\._$[:alnum:]]await|^return|[^\\._$[:alnum:]]return|^default|[^\\._$[:alnum:]]default|^yield|[^\\._$[:alnum:]]yield|^)\\s*\n  (?!<\\s*[_$[:alpha:]][_$[:alnum:]]*((\\s+extends\\s+[^=>])|,)) # look ahead is not type parameter of arrow\n  (?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
-        end: '(?!(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
+          '(?x)\n  (?<!\\+\\+|--)(?<=[({\\[,?=>:*]|&&|\\|\\||\\?|\\*\\/|^await|[^\\._$[:alnum:]]await|^return|[^\\._$[:alnum:]]return|^default|[^\\._$[:alnum:]]default|^yield|[^\\._$[:alnum:]]yield|^)\\s*\n  (?!<\\s*[_$[:alpha:]][_$[:alnum:]]*((\\s+extends\\s+[^=>])|,)) # look ahead is not type parameter of arrow\n  (?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:(?!children)[a-z][a-z0-9]*|(?:children|(@?[_$[:alpha:]][-_$[:alnum:]]*(?:\\.@?[_$[:alpha:]][-_$[:alnum:]]*)*)))(?<!-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
+        end: '(?!(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?![sS][tT][yY][lL][eE]\\b)(?:(?!children)[a-z][a-z0-9]*|(?:children|(@?[_$[:alpha:]][-_$[:alnum:]]*(?:\\.@?[_$[:alpha:]][-_$[:alnum:]]*)*)))(?<!-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
         patterns: [
           {
             include: '#jsx-tag',
@@ -6392,8 +6530,8 @@ export default {
       'jsx-tag': {
         name: 'meta.tag.js',
         begin:
-          '(?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
-        end: '(/>)|(?:(</)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))?\\s*(>))',
+          '(?=(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:(?!children)[a-z][a-z0-9]*|(?:children|(@?[_$[:alpha:]][-_$[:alnum:]]*(?:\\.@?[_$[:alpha:]][-_$[:alnum:]]*)*)))(?<!-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>))',
+        end: '(/>)|(?:(</)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:(?!children)[a-z][a-z0-9]*|(?:children|(@?[_$[:alpha:]][-_$[:alnum:]]*(?:\\.@?[_$[:alpha:]][-_$[:alnum:]]*)*)))(?<!-))?\\s*(>))',
         endCaptures: {
           '1': {
             name: 'punctuation.definition.tag.end.js',
@@ -6420,7 +6558,7 @@ export default {
         patterns: [
           {
             begin:
-              '(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:[a-z][a-z0-9]*|([_$[:alpha:]][-_$[:alnum:].]*))(?<!\\.|-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>)',
+              '(<)\\s*(?:([_$[:alpha:]][-_$[:alnum:].]*)(?<!\\.|-)(:))?((?:(?!children)[a-z][a-z0-9]*|(?:children|(@?[_$[:alpha:]][-_$[:alnum:]]*(?:\\.@?[_$[:alpha:]][-_$[:alnum:]]*)*)))(?<!-))(?=((<\\s*)|(\\s+))(?!\\?)|\\/?>)',
             beginCaptures: {
               '1': {
                 name: 'punctuation.definition.tag.begin.js',
@@ -6529,14 +6667,6 @@ export default {
           },
         },
         patterns: [
-          {
-            match: '(\\@use)\\b\\s*',
-            captures: {
-              '1': {
-                name: 'storage.modifier.js',
-              },
-            },
-          },
           {
             include: '#expression',
           },
@@ -6645,6 +6775,53 @@ export default {
           },
         ],
       },
+      'server-block': {
+        name: 'meta.server-block.js',
+        begin: '(#server)\\s*(\\{)',
+        beginCaptures: {
+          '1': {
+            name: 'storage.type.server.js',
+          },
+          '2': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        end: '\\}',
+        endCaptures: {
+          '0': {
+            name: 'punctuation.definition.block.js',
+          },
+        },
+        patterns: [
+          {
+            include: '#statements',
+          },
+        ],
+      },
+      'server-member-expression': {
+        name: 'meta.server-member-expression.js',
+        match: '(#server)(\\.)([_$[:alpha:]][_$[:alnum:]]*)',
+        captures: {
+          '1': {
+            name: 'storage.type.server.js',
+          },
+          '2': {
+            name: 'punctuation.accessor.js',
+          },
+          '3': {
+            name: 'entity.name.function.js',
+          },
+        },
+      },
+      'jsx-ref-modifier': {
+        name: 'storage.modifier.js',
+        match: '\\b(ref)(?=\\s+[_$[:alpha:]])',
+        captures: {
+          '1': {
+            name: 'storage.modifier.js',
+          },
+        },
+      },
       'jsx-tag-attributes-illegal': {
         name: 'invalid.illegal.attribute.js',
         match: '\\S+',
@@ -6654,7 +6831,6 @@ export default {
 
   config: {
     // Note that this file should stay in sync with 'typescript-language-basics/language-configuration.json'
-    // onEnterRules cause errors - currently disabled
     comments: {
       lineComment: '//',
       blockComment: ['/*', '*/'],
@@ -6735,124 +6911,124 @@ export default {
         pattern: '^((.*=>\\s*)|((.*[^\\w]+|\\s*)(if|while|for)\\s*\\(.*\\)\\s*))$',
       },
     },
-    // onEnterRules: [
-    //   {
-    //     // e.g. /** | */
-    //     beforeText: {
-    //       pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
-    //     },
-    //     afterText: {
-    //       pattern: '^\\s*\\*/$',
-    //     },
-    //     action: {
-    //       indent: 'indentOutdent',
-    //       appendText: ' * ',
-    //     },
-    //   },
-    //   {
-    //     // e.g. /** ...|
-    //     beforeText: {
-    //       pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
-    //     },
-    //     action: {
-    //       indent: 'none',
-    //       appendText: ' * ',
-    //     },
-    //   },
-    //   {
-    //     // e.g.  * ...|
-    //     beforeText: {
-    //       pattern: '^(\\t|[ ])*[ ]\\*([ ]([^\\*]|\\*(?!/))*)?$',
-    //     },
-    //     previousLineText: {
-    //       pattern: '(?=^(\\s*(/\\*\\*|\\*)).*)(?=(?!(\\s*\\*/)))',
-    //     },
-    //     action: {
-    //       indent: 'none',
-    //       appendText: '* ',
-    //     },
-    //   },
-    //   {
-    //     // e.g.  */|
-    //     beforeText: {
-    //       pattern: '^(\\t|[ ])*[ ]\\*/\\s*$',
-    //     },
-    //     action: {
-    //       indent: 'none',
-    //       removeText: 1,
-    //     },
-    //   },
-    //   {
-    //     // e.g.  *-----*/|
-    //     beforeText: {
-    //       pattern: '^(\\t|[ ])*[ ]\\*[^/]*\\*/\\s*$',
-    //     },
-    //     action: {
-    //       indent: 'none',
-    //       removeText: 1,
-    //     },
-    //   },
-    //   {
-    //     beforeText: {
-    //       pattern: '^\\s*(\\bcase\\s.+:|\\bdefault:)$',
-    //     },
-    //     afterText: {
-    //       pattern: '^(?!\\s*(\\bcase\\b|\\bdefault\\b))',
-    //     },
-    //     action: {
-    //       indent: 'indent',
-    //     },
-    //   },
-    //   {
-    //     // Decrease indentation after single line if/else if/else, for, or while
-    //     previousLineText: '^\\s*(((else ?)?if|for|while)\\s*\\(.*\\)\\s*|else\\s*)$',
-    //     // But make sure line doesn't have braces or is not another if statement
-    //     beforeText: '^\\s+([^{i\\s]|i(?!f\\b))',
-    //     action: {
-    //       indent: 'outdent',
-    //     },
-    //   },
-    //   // Indent when pressing enter from inside ()
-    //   {
-    //     beforeText: '^.*\\([^\\)]*$',
-    //     afterText: '^\\s*\\).*$',
-    //     action: {
-    //       indent: 'indentOutdent',
-    //       appendText: '\t',
-    //     },
-    //   },
-    //   // Indent when pressing enter from inside {}
-    //   {
-    //     beforeText: '^.*\\{[^\\}]*$',
-    //     afterText: '^\\s*\\}.*$',
-    //     action: {
-    //       indent: 'indentOutdent',
-    //       appendText: '\t',
-    //     },
-    //   },
-    //   // Indent when pressing enter from inside []
-    //   {
-    //     beforeText: '^.*\\[[^\\]]*$',
-    //     afterText: '^\\s*\\].*$',
-    //     action: {
-    //       indent: 'indentOutdent',
-    //       appendText: '\t',
-    //     },
-    //   },
-    //   // Add // when pressing enter from inside line comment
-    //   {
-    //     beforeText: {
-    //       pattern: '(?<!\\w:)//.*',
-    //     },
-    //     afterText: {
-    //       pattern: '^(?!\\s*$).+',
-    //     },
-    //     action: {
-    //       indent: 'none',
-    //       appendText: '// ',
-    //     },
-    //   },
-    // ],
+    onEnterRules: [
+      {
+        // e.g. /** | */
+        beforeText: {
+          pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
+        },
+        afterText: {
+          pattern: '^\\s*\\*/$',
+        },
+        action: {
+          indent: 'indentOutdent',
+          appendText: ' * ',
+        },
+      },
+      {
+        // e.g. /** ...|
+        beforeText: {
+          pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
+        },
+        action: {
+          indent: 'none',
+          appendText: ' * ',
+        },
+      },
+      {
+        // e.g.  * ...|
+        beforeText: {
+          pattern: '^(\\t|[ ])*[ ]\\*([ ]([^\\*]|\\*(?!/))*)?$',
+        },
+        previousLineText: {
+          pattern: '(?=^(\\s*(/\\*\\*|\\*)).*)(?=(?!(\\s*\\*/)))',
+        },
+        action: {
+          indent: 'none',
+          appendText: '* ',
+        },
+      },
+      {
+        // e.g.  */|
+        beforeText: {
+          pattern: '^(\\t|[ ])*[ ]\\*/\\s*$',
+        },
+        action: {
+          indent: 'none',
+          removeText: 1,
+        },
+      },
+      {
+        // e.g.  *-----*/|
+        beforeText: {
+          pattern: '^(\\t|[ ])*[ ]\\*[^/]*\\*/\\s*$',
+        },
+        action: {
+          indent: 'none',
+          removeText: 1,
+        },
+      },
+      {
+        beforeText: {
+          pattern: '^\\s*(\\bcase\\s.+:|\\bdefault:)$',
+        },
+        afterText: {
+          pattern: '^(?!\\s*(\\bcase\\b|\\bdefault\\b))',
+        },
+        action: {
+          indent: 'indent',
+        },
+      },
+      {
+        // Decrease indentation after single line if/else if/else, for, or while
+        previousLineText: '^\\s*(((else ?)?if|for|while)\\s*\\(.*\\)\\s*|else\\s*)$',
+        // But make sure line doesn't have braces or is not another if statement
+        beforeText: '^\\s+([^{i\\s]|i(?!f\\b))',
+        action: {
+          indent: 'outdent',
+        },
+      },
+      // Indent when pressing enter from inside ()
+      {
+        beforeText: '^.*\\([^\\)]*$',
+        afterText: '^\\s*\\).*$',
+        action: {
+          indent: 'indentOutdent',
+          appendText: '\t',
+        },
+      },
+      // Indent when pressing enter from inside {}
+      {
+        beforeText: '^.*\\{[^\\}]*$',
+        afterText: '^\\s*\\}.*$',
+        action: {
+          indent: 'indentOutdent',
+          appendText: '\t',
+        },
+      },
+      // Indent when pressing enter from inside []
+      {
+        beforeText: '^.*\\[[^\\]]*$',
+        afterText: '^\\s*\\].*$',
+        action: {
+          indent: 'indentOutdent',
+          appendText: '\t',
+        },
+      },
+      // Add // when pressing enter from inside line comment
+      {
+        beforeText: {
+          pattern: '(?<!\\w:)//.*',
+        },
+        afterText: {
+          pattern: '^(?!\\s*$).+',
+        },
+        action: {
+          indent: 'none',
+          appendText: '// ',
+        },
+      },
+    ],
   },
 
   cssSyntax: {

From a7f817f45839819fbcb2add51bd8fc9564702f31 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 28 Sep 2025 01:57:42 +0300
Subject: [PATCH 62/71] fix ripple

---
 .../monaco/languages/monaco-lang-ripple.ts    | 239 +++++++++---------
 1 file changed, 121 insertions(+), 118 deletions(-)

diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
index fac513de5e..3a663d5443 100644
--- a/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
+++ b/src/livecodes/editor/monaco/languages/monaco-lang-ripple.ts
@@ -1,6 +1,8 @@
 // from https://github.com/trueadm/ripple/blob/main/packages/ripple-vscode-plugin/syntaxes/ripple.tmLanguage.json
 // and https://github.com/trueadm/ripple/blob/main/packages/ripple-vscode-plugin/language-configuration.json
 // and 'https://cdn.jsdelivr.net/gh/zikaari/monaco-textmate-languages@master/grammars/css/css.tmLanguage.json'
+// Config onEnterRules cause errors - currently disabled
+
 export default {
   syntax: {
     information_for_contributors: [
@@ -6831,6 +6833,7 @@ export default {
 
   config: {
     // Note that this file should stay in sync with 'typescript-language-basics/language-configuration.json'
+    // onEnterRules cause errors - currently disabled
     comments: {
       lineComment: '//',
       blockComment: ['/*', '*/'],
@@ -6911,124 +6914,124 @@ export default {
         pattern: '^((.*=>\\s*)|((.*[^\\w]+|\\s*)(if|while|for)\\s*\\(.*\\)\\s*))$',
       },
     },
-    onEnterRules: [
-      {
-        // e.g. /** | */
-        beforeText: {
-          pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
-        },
-        afterText: {
-          pattern: '^\\s*\\*/$',
-        },
-        action: {
-          indent: 'indentOutdent',
-          appendText: ' * ',
-        },
-      },
-      {
-        // e.g. /** ...|
-        beforeText: {
-          pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
-        },
-        action: {
-          indent: 'none',
-          appendText: ' * ',
-        },
-      },
-      {
-        // e.g.  * ...|
-        beforeText: {
-          pattern: '^(\\t|[ ])*[ ]\\*([ ]([^\\*]|\\*(?!/))*)?$',
-        },
-        previousLineText: {
-          pattern: '(?=^(\\s*(/\\*\\*|\\*)).*)(?=(?!(\\s*\\*/)))',
-        },
-        action: {
-          indent: 'none',
-          appendText: '* ',
-        },
-      },
-      {
-        // e.g.  */|
-        beforeText: {
-          pattern: '^(\\t|[ ])*[ ]\\*/\\s*$',
-        },
-        action: {
-          indent: 'none',
-          removeText: 1,
-        },
-      },
-      {
-        // e.g.  *-----*/|
-        beforeText: {
-          pattern: '^(\\t|[ ])*[ ]\\*[^/]*\\*/\\s*$',
-        },
-        action: {
-          indent: 'none',
-          removeText: 1,
-        },
-      },
-      {
-        beforeText: {
-          pattern: '^\\s*(\\bcase\\s.+:|\\bdefault:)$',
-        },
-        afterText: {
-          pattern: '^(?!\\s*(\\bcase\\b|\\bdefault\\b))',
-        },
-        action: {
-          indent: 'indent',
-        },
-      },
-      {
-        // Decrease indentation after single line if/else if/else, for, or while
-        previousLineText: '^\\s*(((else ?)?if|for|while)\\s*\\(.*\\)\\s*|else\\s*)$',
-        // But make sure line doesn't have braces or is not another if statement
-        beforeText: '^\\s+([^{i\\s]|i(?!f\\b))',
-        action: {
-          indent: 'outdent',
-        },
-      },
-      // Indent when pressing enter from inside ()
-      {
-        beforeText: '^.*\\([^\\)]*$',
-        afterText: '^\\s*\\).*$',
-        action: {
-          indent: 'indentOutdent',
-          appendText: '\t',
-        },
-      },
-      // Indent when pressing enter from inside {}
-      {
-        beforeText: '^.*\\{[^\\}]*$',
-        afterText: '^\\s*\\}.*$',
-        action: {
-          indent: 'indentOutdent',
-          appendText: '\t',
-        },
-      },
-      // Indent when pressing enter from inside []
-      {
-        beforeText: '^.*\\[[^\\]]*$',
-        afterText: '^\\s*\\].*$',
-        action: {
-          indent: 'indentOutdent',
-          appendText: '\t',
-        },
-      },
-      // Add // when pressing enter from inside line comment
-      {
-        beforeText: {
-          pattern: '(?<!\\w:)//.*',
-        },
-        afterText: {
-          pattern: '^(?!\\s*$).+',
-        },
-        action: {
-          indent: 'none',
-          appendText: '// ',
-        },
-      },
-    ],
+    // onEnterRules: [
+    //   {
+    //     // e.g. /** | */
+    //     beforeText: {
+    //       pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
+    //     },
+    //     afterText: {
+    //       pattern: '^\\s*\\*/$',
+    //     },
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: ' * ',
+    //     },
+    //   },
+    //   {
+    //     // e.g. /** ...|
+    //     beforeText: {
+    //       pattern: '^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       appendText: ' * ',
+    //     },
+    //   },
+    //   {
+    //     // e.g.  * ...|
+    //     beforeText: {
+    //       pattern: '^(\\t|[ ])*[ ]\\*([ ]([^\\*]|\\*(?!/))*)?$',
+    //     },
+    //     previousLineText: {
+    //       pattern: '(?=^(\\s*(/\\*\\*|\\*)).*)(?=(?!(\\s*\\*/)))',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       appendText: '* ',
+    //     },
+    //   },
+    //   {
+    //     // e.g.  */|
+    //     beforeText: {
+    //       pattern: '^(\\t|[ ])*[ ]\\*/\\s*$',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       removeText: 1,
+    //     },
+    //   },
+    //   {
+    //     // e.g.  *-----*/|
+    //     beforeText: {
+    //       pattern: '^(\\t|[ ])*[ ]\\*[^/]*\\*/\\s*$',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       removeText: 1,
+    //     },
+    //   },
+    //   {
+    //     beforeText: {
+    //       pattern: '^\\s*(\\bcase\\s.+:|\\bdefault:)$',
+    //     },
+    //     afterText: {
+    //       pattern: '^(?!\\s*(\\bcase\\b|\\bdefault\\b))',
+    //     },
+    //     action: {
+    //       indent: 'indent',
+    //     },
+    //   },
+    //   {
+    //     // Decrease indentation after single line if/else if/else, for, or while
+    //     previousLineText: '^\\s*(((else ?)?if|for|while)\\s*\\(.*\\)\\s*|else\\s*)$',
+    //     // But make sure line doesn't have braces or is not another if statement
+    //     beforeText: '^\\s+([^{i\\s]|i(?!f\\b))',
+    //     action: {
+    //       indent: 'outdent',
+    //     },
+    //   },
+    //   // Indent when pressing enter from inside ()
+    //   {
+    //     beforeText: '^.*\\([^\\)]*$',
+    //     afterText: '^\\s*\\).*$',
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: '\t',
+    //     },
+    //   },
+    //   // Indent when pressing enter from inside {}
+    //   {
+    //     beforeText: '^.*\\{[^\\}]*$',
+    //     afterText: '^\\s*\\}.*$',
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: '\t',
+    //     },
+    //   },
+    //   // Indent when pressing enter from inside []
+    //   {
+    //     beforeText: '^.*\\[[^\\]]*$',
+    //     afterText: '^\\s*\\].*$',
+    //     action: {
+    //       indent: 'indentOutdent',
+    //       appendText: '\t',
+    //     },
+    //   },
+    //   // Add // when pressing enter from inside line comment
+    //   {
+    //     beforeText: {
+    //       pattern: '(?<!\\w:)//.*',
+    //     },
+    //     afterText: {
+    //       pattern: '^(?!\\s*$).+',
+    //     },
+    //     action: {
+    //       indent: 'none',
+    //       appendText: '// ',
+    //     },
+    //   },
+    // ],
   },
 
   cssSyntax: {

From 4894b3329c2f65b37c9f01e040608b38a2198d61 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 28 Sep 2025 20:02:31 +0300
Subject: [PATCH 63/71] fix loading ripple formatter

---
 src/livecodes/languages/ripple/lang-ripple-formatter.ts | 4 ++--
 src/livecodes/vendors.ts                                | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple-formatter.ts b/src/livecodes/languages/ripple/lang-ripple-formatter.ts
index 9e76c9e5c4..86c68e93c2 100644
--- a/src/livecodes/languages/ripple/lang-ripple-formatter.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-formatter.ts
@@ -2,7 +2,7 @@ import { defaultConfig } from '../../config/default-config';
 import type { Config, FormatFn } from '../../models';
 import { modulesService } from '../../services/modules';
 import { pkgInfoService } from '../../services/pkgInfo';
-import { prettierEsmUrl, prettierRippleUrl } from '../../vendors';
+import { prettierEsmUrl } from '../../vendors';
 
 (self as any).createRippleFormatter = async (initialConfig: Config): Promise<FormatFn> => {
   const version =
@@ -11,7 +11,7 @@ import { prettierEsmUrl, prettierRippleUrl } from '../../vendors';
   const pluginUrl =
     version.startsWith('pr:ripple@') || version.startsWith('pkg.pr.new:ripple@')
       ? modulesService.getModuleUrl(version.replace('ripple', 'prettier-plugin-ripple'))
-      : prettierRippleUrl;
+      : modulesService.getModuleUrl('prettier-plugin-ripple@' + version);
 
   const [prettier, ripplePlugin] = await Promise.all([import(prettierEsmUrl), import(pluginUrl)]);
   return async (code, cursorOffset, formatterConfig) =>
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index c4ac150f8e..8e070fe42b 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -347,8 +347,6 @@ export const prettierBaseUrl = /* @__PURE__ */ getUrl('prettier@3.3.2/');
 
 export const prettierEsmUrl = /* @__PURE__ */ getModuleUrl('prettier@3.3.2/standalone');
 
-export const prettierRippleUrl = /* @__PURE__ */ getModuleUrl('prettier-plugin-ripple@0.2.25');
-
 export const prettierPhpUrl = /* @__PURE__ */ getUrl('@prettier/plugin-php@0.22.2/standalone.js');
 
 export const prismBaseUrl = /* @__PURE__ */ getUrl('prismjs@1.29.0/components/');

From 6b00d829a444087a250ae038c7d22deb532a15e3 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 2 Oct 2025 23:50:12 +0300
Subject: [PATCH 64/71] fix loading ripple runtime version

---
 .../languages/ripple/lang-ripple-compiler.ts        | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index 452e3fff50..7d3465f10a 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -11,17 +11,18 @@ import { getLanguageByAlias } from '../utils';
   let importedContent = '';
   let imports: Record<string, string> = {};
 
+  const getModuleName = (v: string) =>
+    v.startsWith('pr:ripple@') || v.startsWith('pkg.pr.new:ripple@')
+      ? v // 'pr:ripple@f8bdb34'
+      : `ripple@${v}`; // '0.2.25'
+
   let version: string =
     initialConfig.customSettings.ripple?.version ||
     (await pkgInfoService.getPkgLatestVersion('ripple'));
   let compile: (code: string, filename: string) => Promise<{ js: { code: string }; css: string }>;
-
   const updateCompiler = async (currentVersion: string) => {
     if (typeof compile === 'function' && currentVersion === version) return;
-    const modName =
-      currentVersion.startsWith('pr:ripple@') || currentVersion.startsWith('pkg.pr.new:ripple@')
-        ? `${currentVersion}/compiler` // 'pr:ripple@f8bdb34'
-        : `ripple@${currentVersion}/compiler`; // '0.2.25'
+    const modName = getModuleName(currentVersion + '/compiler');
     const mod = await import(modulesService.getModuleUrl(modName));
     compile = mod.compile;
     version = currentVersion;
@@ -70,7 +71,7 @@ document.head.appendChild(styles);
 `;
 
     if (filename === MAIN_FILE) {
-      const moduleUrl = modulesService.getModuleUrl(`ripple@${version}`);
+      const moduleUrl = modulesService.getModuleUrl(getModuleName(version));
       imports = {
         ...createImportMap(importedContent, config),
         ripple: moduleUrl,

From 5a0d428d6faf302a004b0c8d046830879c3c0bd0 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 4 Oct 2025 14:21:43 +0300
Subject: [PATCH 65/71] fix ripple imports

---
 src/livecodes/languages/ripple/lang-ripple-compiler.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index 7d3465f10a..b25a36af12 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -75,8 +75,10 @@ document.head.appendChild(styles);
       imports = {
         ...createImportMap(importedContent, config),
         ripple: moduleUrl,
-        'ripple/internal': `${moduleUrl}/internal`,
         'ripple/internal/client': `${moduleUrl}/internal/client`,
+        'ripple/jsx-runtime': `${moduleUrl}/internal/client`,
+        clsx: modulesService.getModuleUrl('clsx'),
+        'esm-env': modulesService.getModuleUrl('esm-env'),
       };
     }
 

From fee8369b322a878730cfc63071627eed6eaa1883 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 7 Oct 2025 23:41:05 +0300
Subject: [PATCH 66/71] docs(SDK): add docs for using SDK in Ripple

---
 README.md                                |  6 +-
 docs/docs/sdk/index.mdx                  |  2 +-
 docs/docs/sdk/js-ts.mdx                  |  1 +
 docs/docs/sdk/react.mdx                  |  1 +
 docs/docs/sdk/ripple.mdx                 | 84 ++++++++++++++++++++++++
 docs/docs/sdk/svelte.mdx                 |  1 +
 docs/docs/sdk/vue.mdx                    |  1 +
 docs/sidebars.ts                         |  2 +-
 docs/src/components/HomepageFeatures.tsx |  6 +-
 docs/src/components/LiveCodes.tsx        | 16 +++++
 docs/src/components/ShowCode.tsx         |  6 ++
 11 files changed, 118 insertions(+), 8 deletions(-)
 create mode 100644 docs/docs/sdk/ripple.mdx

diff --git a/README.md b/README.md
index dc44433982..c98e8bc63e 100644
--- a/README.md
+++ b/README.md
@@ -119,7 +119,7 @@ Add this code to your page:
 - [Client-side!](https://livecodes.io/docs/why#client-side)
 - Very [configurable](https://livecodes.io/docs/configuration/)
 - Developer-friendly build-free environment
-- Powerful [SDK](https://livecodes.io/docs/sdk/) (available for [vanilla JavaScript, TypeScript](https://livecodes.io/docs/sdk/js-ts), [React](https://livecodes.io/docs/sdk/react), [Vue](https://livecodes.io/docs/sdk/vue) and [Svelte](https://livecodes.io/docs/sdk/svelte))
+- Powerful [SDK](https://livecodes.io/docs/sdk/) (available for [vanilla JavaScript, TypeScript](https://livecodes.io/docs/sdk/js-ts), [React](https://livecodes.io/docs/sdk/react), [Vue](https://livecodes.io/docs/sdk/vue), [Svelte](https://livecodes.io/docs/sdk/svelte) and [Ripple](https://livecodes.io/docs/sdk/ripple))
 - Comprehensive [Documentations](https://livecodes.io/docs/)
 - Focused on [privacy and security](https://livecodes.io/docs/features/security)
 - Free and [Open-Source](https://livecodes.io/docs/license)
@@ -130,7 +130,7 @@ For details check the [full list of features](https://livecodes.io/docs/features
 
 The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds.
 
-The SDK is provided as a light-weight ([less than 5kb gzipped](https://bundlephobia.com/package/livecodes)), zero-dependencies [npm package](https://livecodes.io/docs/sdk/#npm-package), that is also available from [CDNs](https://livecodes.io/docs/sdk/#cdn). It can be used to create playgrounds with a wide variety of [configurations](https://livecodes.io/docs/configuration/configuration-object.md) and [embed options](https://livecodes.io/docs/sdk/js-ts.md#embed-options). In addition, [SDK methods](https://livecodes.io/docs/sdk/js-ts.md#sdk-methods) allow programmatic communication and control of the playgrounds during runtime.
+The SDK is provided as a light-weight ([less than 5kb gzipped](https://bundlephobia.com/package/livecodes)), zero-dependencies [npm package](https://livecodes.io/docs/sdk/#npm-package), that is also available from [CDNs](https://livecodes.io/docs/sdk/#cdn). It can be used to create playgrounds with a wide variety of [configurations](https://livecodes.io/docs/configuration/configuration-object) and [embed options](https://livecodes.io/docs/sdk/js-ts#embed-options). In addition, [SDK methods](https://livecodes.io/docs/sdk/js-ts#sdk-methods) allow programmatic communication and control of the playgrounds during runtime.
 
 ### Installation
 
@@ -156,7 +156,7 @@ createPlayground('#container', {
 });
 ```
 
-The [JavaScript SDK](https://livecodes.io/docs/sdk/js-ts.md) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](https://livecodes.io/docs/sdk/react.md) and [Vue](https://livecodes.io/docs/sdk/vue.md)). The SDK can be used in [Svelte](https://livecodes.io/docs/sdk/svelte.md) directly without wrappers. [TypeScript support](https://livecodes.io/docs/sdk/js-ts.md#typescript-types) provides type-safety and a great developer experience.
+The [JavaScript SDK](https://livecodes.io/docs/sdk/js-ts) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](https://livecodes.io/docs/sdk/react) and [Vue](https://livecodes.io/docs/sdk/vue)). The SDK can be used in [Svelte](https://livecodes.io/docs/sdk/svelte) and [Ripple](https://livecodes.io/docs/sdk/ripple) directly without wrappers. [TypeScript support](https://livecodes.io/docs/sdk/js-ts#typescript-types) provides type-safety and a great developer experience.
 
 React SDK example: ([open in LiveCodes](https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQBKsAhgMZhEDKAIgNJH4C22IANCPgZQE4QADpGwA7RCC4gAFhVySAPK1hhyRSjPL8CqgLwAdEAFUAKgDEAtAA4jRAPQA+A2OWr1Y8isMg0EWADuQtj8YHaU4mCwYmA+ARC4YDJ6+H6UsJbxiTKcRBBiUBDk0JZ8xbB6AIwAdAAMdk7SMmCs0ACCYGA6ktDkYgDmPtHhvQQEPkbSav0EiADaALrcVJAYAKK4UCGSfIIi0qzaANYArkKIoL0DJ+T98EjNrdIRMdFgkiAAvtwEYACecAuICu-Rud0klDGz0ibw+3xAu2E7wQlz6oNu9xAACsCAAPaGvGKSCCsYKhIioDA4XhEABm-GwrCIAHJoOhYBFePZ+BRqMyANwGfguIUuF6-DTiWkQfpEPREYCisREIiHfinIQIBVKlUqkFg2Ba5lqo64bABMTMzg63UvKIxI0AYiIAAlYNBoNgiAB1ELQXAAQitNu+Ss+guFYnFNAACr0-v0GScxLg5UQABQASjljiIikpWDwhElYmlg2ALzLnyIfkCPh5BBO0DCIAcjgjLlguLJNHwtPITdj8cT2GTuA7EnhvwBhDkqlmCEWPwESIXS5AkIIMYbqg+3CEDPSYxCa6WG5Ov0ZtFUkAGC+A8JJPfv8P+QkIF1fhDA9+BaINkhvoQK77NwdqwkgXzcBgOgQOIkgAMwIVM2DYNAv7ROQABGcAKEgxTQNIKzshC4gEGh8A-GoYAXhCnq6AonyfEAA))
 
diff --git a/docs/docs/sdk/index.mdx b/docs/docs/sdk/index.mdx
index 129600f395..447927ee6a 100644
--- a/docs/docs/sdk/index.mdx
+++ b/docs/docs/sdk/index.mdx
@@ -10,7 +10,7 @@ The Software Development Kit (SDK) provides an easy, yet powerful, interface to
 
 The SDK is provided as a light-weight ([less than 5kb gzipped](https://bundlephobia.com/package/livecodes)), zero-dependencies [npm package](#npm-package), that is also available from [CDNs](#cdn). It can be used to create playgrounds with a wide variety of [configurations](../configuration/configuration-object.mdx) and [embed options](js-ts.mdx#embed-options). In addition, [SDK methods](js-ts.mdx#sdk-methods) allow programmatic communication and control of the playgrounds during runtime.
 
-The [JavaScript SDK](js-ts.mdx) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](react.mdx) and [Vue](vue.mdx)). The SDK can be used in [Svelte](svelte.mdx) directly without wrappers. [TypeScript support](js-ts.mdx#typescript-types) provides type-safety and a great developer experience.
+The [JavaScript SDK](js-ts.mdx) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](react.mdx) and [Vue](vue.mdx)). The SDK can be used in [Svelte](svelte.mdx) and [Ripple](ripple.mdx) directly without wrappers. [TypeScript support](js-ts.mdx#typescript-types) provides type-safety and a great developer experience.
 
 ## SDK Demo
 
diff --git a/docs/docs/sdk/js-ts.mdx b/docs/docs/sdk/js-ts.mdx
index 1eb4ef14f4..4c12e7b659 100644
--- a/docs/docs/sdk/js-ts.mdx
+++ b/docs/docs/sdk/js-ts.mdx
@@ -602,4 +602,5 @@ export const sdkDemo = {
 - [React SDK](./react.mdx)
 - [Vue SDK](./vue.mdx)
 - [Using SDK in Svelte](./svelte.mdx)
+- [Using SDK in Ripple](./ripple.mdx)
 - [Embedded Playgrounds](../features/embeds.mdx)
diff --git a/docs/docs/sdk/react.mdx b/docs/docs/sdk/react.mdx
index 343a0feb02..6e74a41972 100644
--- a/docs/docs/sdk/react.mdx
+++ b/docs/docs/sdk/react.mdx
@@ -148,4 +148,5 @@ export const reactSDKDemo = {
 - [JS/TS SDK](./js-ts.mdx)
 - [Vue SDK](./vue.mdx)
 - [Using SDK in Svelte](./svelte.mdx)
+- [Using SDK in Ripple](./ripple.mdx)
 - [Embedded Playgrounds](../features/embeds.mdx)
diff --git a/docs/docs/sdk/ripple.mdx b/docs/docs/sdk/ripple.mdx
new file mode 100644
index 0000000000..6b8c7e71a7
--- /dev/null
+++ b/docs/docs/sdk/ripple.mdx
@@ -0,0 +1,84 @@
+# Ripple
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+The [JS/TS SDK](js-ts.mdx) can be used directly in [Ripple](https://ripplejs.com) components without the need for any wrappers.
+
+## Installation
+
+Please refer to the [SDK installation](./index.mdx#installation) section.
+
+## Usage
+
+This is an example of using the LiveCodes JS SDK in a Ripple component:
+
+```jsx title="App.ripple"
+import { track } from 'ripple';
+import { createPlayground, type EmbedOptions } from 'livecodes';
+
+export default component App() {
+  const options: EmbedOptions = {
+    params: {
+      html: '<h1>Hello World!</h1>',
+      css: 'h1 {color: blue;}',
+      js: 'console.log("Hello, Ripple!")',
+      console: 'open',
+    },
+  };
+
+  const playground = track(null);
+  const onMount = (container) => {
+    createPlayground(container, options).then((sdk) => {
+      @playground = sdk; // now the SDK is available
+    });
+    return () => @playground?.destroy().then(() => @playground = null);
+  };
+
+  <div {ref onMount}></div>
+}
+```
+
+export const rippleSDKDemo = {
+  ripple: `import { track } from 'ripple';
+import { createPlayground, type EmbedOptions } from 'livecodes';
+
+export default component App() {
+  const options: EmbedOptions = {
+    params: {
+      html: '<h1>Hello World!</h1>',
+      css: 'h1 {color: blue;}',
+      js: 'console.log("Hello, Ripple!")',
+      console: 'open',
+    },
+  };
+
+  const playground = track(null);
+  const onMount = (container) => {
+    createPlayground(container, options).then((sdk) => {
+      @playground = sdk; // now the SDK is available
+    });
+    return () => @playground?.destroy().then(() => @playground = null);
+  };
+
+  <div {ref onMount}></div>
+}
+`,
+};
+
+<RunInLiveCodes params={rippleSDKDemo}></RunInLiveCodes>
+
+[Embed options](./js-ts.mdx#embed-options), [SDK methods](./js-ts.mdx#sdk-methods) and [TypeScript types](./js-ts.mdx#typescript-types) are available as described in the [JS/TS SDK documentations](./js-ts.mdx).
+
+## Demo
+
+<LiveCodes params={rippleSDKDemo} height="80vh" />
+
+## Related
+
+- [SDK Installation](./index.mdx#installation)
+- [JS/TS SDK](./js-ts.mdx)
+- [React SDK](./react.mdx)
+- [Vue SDK](./vue.mdx)
+- [Using SDK in Svelte](./svelte.mdx)
+- [Embedded Playgrounds](../features/embeds.mdx)
diff --git a/docs/docs/sdk/svelte.mdx b/docs/docs/sdk/svelte.mdx
index fd631a1d69..159335b133 100644
--- a/docs/docs/sdk/svelte.mdx
+++ b/docs/docs/sdk/svelte.mdx
@@ -97,4 +97,5 @@ However, it is recommended to cleanup when the node is unmounted, like that:
 - [JS/TS SDK](./js-ts.mdx)
 - [React SDK](./react.mdx)
 - [Vue SDK](./vue.mdx)
+- [Using SDK in Ripple](./ripple.mdx)
 - [Embedded Playgrounds](../features/embeds.mdx)
diff --git a/docs/docs/sdk/vue.mdx b/docs/docs/sdk/vue.mdx
index a74ef119f4..761b61b5ef 100644
--- a/docs/docs/sdk/vue.mdx
+++ b/docs/docs/sdk/vue.mdx
@@ -163,4 +163,5 @@ export const vueSDKDemo = {
 - [JS/TS SDK](./js-ts.mdx)
 - [React SDK](./react.mdx)
 - [Using SDK in Svelte](./svelte.mdx)
+- [Using SDK in Ripple](./ripple.mdx)
 - [Embedded Playgrounds](../features/embeds.mdx)
diff --git a/docs/sidebars.ts b/docs/sidebars.ts
index e1cc90bc1a..ae13eb2fb6 100644
--- a/docs/sidebars.ts
+++ b/docs/sidebars.ts
@@ -85,7 +85,7 @@ const sidebars: SidebarsConfig = {
             type: 'doc',
             id: 'sdk/index',
           },
-          items: ['sdk/js-ts', 'sdk/react', 'sdk/vue', 'sdk/svelte', 'sdk/headless'],
+          items: ['sdk/js-ts', 'sdk/react', 'sdk/vue', 'sdk/svelte', 'sdk/ripple', 'sdk/headless'],
         },
         {
           type: 'category',
diff --git a/docs/src/components/HomepageFeatures.tsx b/docs/src/components/HomepageFeatures.tsx
index 8cae54c463..38d807b209 100644
--- a/docs/src/components/HomepageFeatures.tsx
+++ b/docs/src/components/HomepageFeatures.tsx
@@ -151,9 +151,9 @@ const FeatureList3: FeatureItem[] = [
         <Link to="./sdk/">SDK</Link> facilitates <Link to="./features/embeds">embedding</Link>{' '}
         playgrounds and allows easy <Link to="./sdk/js-ts#sdk-methods">communication</Link> with
         them. The SDK is available for <Link to="./sdk/js-ts">vanilla JS/TS</Link>,{' '}
-        <Link to="./sdk/react">React</Link>, <Link to="./sdk/vue">Vue</Link> and{' '}
-        <Link to="./sdk/svelte">Svelte</Link>. There is also a{' '}
-        <Link to="./sdk/headless">headless mode</Link> for full control over the UI.
+        <Link to="./sdk/react">React</Link>, <Link to="./sdk/vue">Vue</Link>,{' '}
+        <Link to="./sdk/svelte">Svelte</Link> and <Link to="./sdk/ripple">Ripple</Link>. There is
+        also a <Link to="./sdk/headless">headless mode</Link> for full control over the UI.
       </>
     ),
   },
diff --git a/docs/src/components/LiveCodes.tsx b/docs/src/components/LiveCodes.tsx
index dd5e93feb3..23465bd68e 100644
--- a/docs/src/components/LiveCodes.tsx
+++ b/docs/src/components/LiveCodes.tsx
@@ -71,6 +71,21 @@ onMount(() => {
 
 <div bind:this="{container}"></div>
 
+`.trimStart();
+
+  const rippleCode = `
+import { track } from 'ripple';
+import { createPlayground, type EmbedOptions } from 'livecodes';
+
+export default component App() {
+  const options: EmbedOptions = ${stringify(options).split('\n').join('\n  ')};
+  const onMount = (container) => {
+    createPlayground(container, options);
+  };
+
+  <div {ref onMount}></div>
+}
+
 `.trimStart();
 
   return (
@@ -96,6 +111,7 @@ onMount(() => {
           react={reactCode}
           vue={vueCode}
           svelte={svelteCode}
+          ripple={rippleCode}
         ></ShowCode>
       )}
     </>
diff --git a/docs/src/components/ShowCode.tsx b/docs/src/components/ShowCode.tsx
index 68185c2e03..225ebe0ff9 100644
--- a/docs/src/components/ShowCode.tsx
+++ b/docs/src/components/ShowCode.tsx
@@ -14,12 +14,14 @@ export default function ShowCode(props: {
   react: string;
   vue: string;
   svelte: string;
+  ripple: string;
 }): ReactNode {
   const [jsCode, setJsCode] = useState(props.js);
   const [tsCode, setTsCode] = useState(props.ts);
   const [reactCode, setReactCode] = useState(props.react);
   const [vueCode, setVueCode] = useState(props.vue);
   const [svelteCode, setSvelteCode] = useState(props.svelte);
+  const [rippleCode, setRippleCode] = useState(props.ripple);
 
   const codeBlockTitleHeight = '3.7rem';
   const [codeCollapsed, setCodeCollapsed] = useState(true);
@@ -57,6 +59,7 @@ export default function ShowCode(props: {
       setReactCode(format(reactCode, 'jsx'));
       setVueCode(format(vueCode, 'html'));
       setSvelteCode(format(svelteCode, 'html'));
+      setRippleCode(format(rippleCode, 'tsx'));
     }
   }, []);
 
@@ -97,6 +100,9 @@ export default function ShowCode(props: {
             <TabItem value="svelte" label="Svelte" attributes={{ onMouseDown: resize }}>
               <CodeBlock language="html">{svelteCode}</CodeBlock>
             </TabItem>
+            <TabItem value="ripple" label="Ripple" attributes={{ onMouseDown: resize }}>
+              <CodeBlock language="tsx">{rippleCode}</CodeBlock>
+            </TabItem>
           </Tabs>
         </div>
       </div>

From 8bf2be9b7a4b49596c8005f2f77dc2b7b2cc0e79 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 8 Oct 2025 04:07:25 +0300
Subject: [PATCH 67/71] add `ripple/bind`

---
 src/livecodes/languages/ripple/lang-ripple-compiler.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index b25a36af12..a38d0788ba 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -75,6 +75,7 @@ document.head.appendChild(styles);
       imports = {
         ...createImportMap(importedContent, config),
         ripple: moduleUrl,
+        'ripple/bind': `${moduleUrl}/bind`,
         'ripple/internal/client': `${moduleUrl}/internal/client`,
         'ripple/jsx-runtime': `${moduleUrl}/internal/client`,
         clsx: modulesService.getModuleUrl('clsx'),

From dca57b75e368b3d02313e69a9ea79aeff23d1d2e Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 8 Oct 2025 23:00:45 +0300
Subject: [PATCH 68/71] clean up ripple examples in docs

---
 docs/docs/sdk/ripple.mdx          | 22 ++++++++++------------
 docs/src/components/LiveCodes.tsx |  3 +--
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/docs/docs/sdk/ripple.mdx b/docs/docs/sdk/ripple.mdx
index 6b8c7e71a7..cb42b14e5c 100644
--- a/docs/docs/sdk/ripple.mdx
+++ b/docs/docs/sdk/ripple.mdx
@@ -14,8 +14,7 @@ Please refer to the [SDK installation](./index.mdx#installation) section.
 This is an example of using the LiveCodes JS SDK in a Ripple component:
 
 ```jsx title="App.ripple"
-import { track } from 'ripple';
-import { createPlayground, type EmbedOptions } from 'livecodes';
+import { createPlayground, type EmbedOptions, type Playground } from 'livecodes';
 
 export default component App() {
   const options: EmbedOptions = {
@@ -27,12 +26,12 @@ export default component App() {
     },
   };
 
-  const playground = track(null);
-  const onMount = (container) => {
+  let playground: Playground | null = null;
+  const onMount = (container: HTMLElement) => {
     createPlayground(container, options).then((sdk) => {
-      @playground = sdk; // now the SDK is available
+      playground = sdk; // now the SDK is available
     });
-    return () => @playground?.destroy().then(() => @playground = null);
+    return () => playground?.destroy();
   };
 
   <div {ref onMount}></div>
@@ -40,8 +39,7 @@ export default component App() {
 ```
 
 export const rippleSDKDemo = {
-  ripple: `import { track } from 'ripple';
-import { createPlayground, type EmbedOptions } from 'livecodes';
+  ripple: `import { createPlayground, type EmbedOptions, type Playground } from 'livecodes';
 
 export default component App() {
   const options: EmbedOptions = {
@@ -53,12 +51,12 @@ export default component App() {
     },
   };
 
-  const playground = track(null);
-  const onMount = (container) => {
+  let playground: Playground | null = null;
+  const onMount = (container: HTMLElement) => {
     createPlayground(container, options).then((sdk) => {
-      @playground = sdk; // now the SDK is available
+      playground = sdk; // now the SDK is available
     });
-    return () => @playground?.destroy().then(() => @playground = null);
+    return () => playground?.destroy();
   };
 
   <div {ref onMount}></div>
diff --git a/docs/src/components/LiveCodes.tsx b/docs/src/components/LiveCodes.tsx
index 23465bd68e..5e22b49fe9 100644
--- a/docs/src/components/LiveCodes.tsx
+++ b/docs/src/components/LiveCodes.tsx
@@ -74,12 +74,11 @@ onMount(() => {
 `.trimStart();
 
   const rippleCode = `
-import { track } from 'ripple';
 import { createPlayground, type EmbedOptions } from 'livecodes';
 
 export default component App() {
   const options: EmbedOptions = ${stringify(options).split('\n').join('\n  ')};
-  const onMount = (container) => {
+  const onMount = (container: HTMLElement) => {
     createPlayground(container, options);
   };
 

From 7a6fe4887174ca401eb9db5710d46f21d6e6af2a Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 9 Oct 2025 00:22:31 +0300
Subject: [PATCH 69/71] edit sdk docs

---
 docs/docs/sdk/index.mdx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/docs/docs/sdk/index.mdx b/docs/docs/sdk/index.mdx
index 4f9fb80c27..e1e6a53b36 100644
--- a/docs/docs/sdk/index.mdx
+++ b/docs/docs/sdk/index.mdx
@@ -99,14 +99,11 @@ In the full [standalone app](../getting-started.mdx#standalone-app), the JavaScr
 The SDK is currently provided in the following variations:
 
 - [JavaScript/TypeScript](./js-ts.mdx)
-
 - [React](./react.mdx)
-
 - [Vue](./vue.mdx)
-
 - [Svelte](./svelte.mdx)
-
 - [Solid](./solid.mdx)
+- [Ripple](./ripple.mdx)
 
 ## Headless Mode
 

From 550c7ccde45c13f938692b6dad4808f5168572e5 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 6 Nov 2025 12:44:43 +0200
Subject: [PATCH 70/71] update ripple formatter package name

---
 src/livecodes/languages/ripple/lang-ripple-formatter.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple-formatter.ts b/src/livecodes/languages/ripple/lang-ripple-formatter.ts
index 86c68e93c2..acfd929041 100644
--- a/src/livecodes/languages/ripple/lang-ripple-formatter.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-formatter.ts
@@ -10,8 +10,8 @@ import { prettierEsmUrl } from '../../vendors';
     (await pkgInfoService.getPkgLatestVersion('ripple'));
   const pluginUrl =
     version.startsWith('pr:ripple@') || version.startsWith('pkg.pr.new:ripple@')
-      ? modulesService.getModuleUrl(version.replace('ripple', 'prettier-plugin-ripple'))
-      : modulesService.getModuleUrl('prettier-plugin-ripple@' + version);
+      ? modulesService.getModuleUrl(version.replace('ripple', '@ripple-ts/prettier-plugin'))
+      : modulesService.getModuleUrl('@ripple-ts/prettier-plugin@' + version);
 
   const [prettier, ripplePlugin] = await Promise.all([import(prettierEsmUrl), import(pluginUrl)]);
   return async (code, cursorOffset, formatterConfig) =>

From 902a78a5e6a4c9742c0418fc38e6d7ec77fb8d91 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 6 Nov 2025 13:01:56 +0200
Subject: [PATCH 71/71] update ripple runtime importmap

---
 .../languages/ripple/lang-ripple-compiler.ts         | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/languages/ripple/lang-ripple-compiler.ts b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
index a38d0788ba..05c2dca0e2 100644
--- a/src/livecodes/languages/ripple/lang-ripple-compiler.ts
+++ b/src/livecodes/languages/ripple/lang-ripple-compiler.ts
@@ -71,14 +71,16 @@ document.head.appendChild(styles);
 `;
 
     if (filename === MAIN_FILE) {
-      const moduleUrl = modulesService.getModuleUrl(getModuleName(version));
+      const moduleUrl = modulesService.getUrl(getModuleName(version));
       imports = {
         ...createImportMap(importedContent, config),
-        ripple: moduleUrl,
-        'ripple/bind': `${moduleUrl}/bind`,
-        'ripple/internal/client': `${moduleUrl}/internal/client`,
-        'ripple/jsx-runtime': `${moduleUrl}/internal/client`,
+        ripple: `${moduleUrl}/src/runtime/index-client.js`,
+        'ripple/internal/client': `${moduleUrl}/src/runtime/internal/client/index.js`,
+        'ripple/jsx-runtime': `${moduleUrl}/src/jsx-runtime.js`,
+        [`${moduleUrl}/src/runtime/internal/client/constants`]: `${moduleUrl}/src/runtime/internal/client/constants.js`,
+        [`${moduleUrl}/src/runtime/internal/client/runtime`]: `${moduleUrl}/src/runtime/internal/client/runtime.js`,
         clsx: modulesService.getModuleUrl('clsx'),
+        devalue: modulesService.getModuleUrl('devalue'),
         'esm-env': modulesService.getModuleUrl('esm-env'),
       };
     }