@lvce-editor/static-server 0.53.7 → 0.53.8

package/static/{92d11f3 → ac6286f}/packages/debug-worker/dist/debugWorkerMain.js

@@ -1742,22 +1742,204 @@ const getNoopRows = () => {
   return [];
 };
 
-const getScopeExceptionRows = scope => {
+const keywords = ['var', 'let', 'const', 'if', 'else', 'for', 'while', 'return', 'class', 'extends', 'new', 'this', 'super', 'import', 'export', 'default', 'async', 'await', 'try', 'catch', 'finally', 'throw', 'switch', 'case', 'break', 'continue', 'do', 'in', 'of', 'typeof', 'instanceof', 'delete', 'void', 'null', 'undefined', 'true', 'false', 'Infinity', 'NaN'];
+const operators = ['=', '==', '===', '!=', '!==', '<', '<=', '>', '>=', '+', '-', '*', '/', '**', '%', '++', '--', '&&', '||', '!', '&', '|', '^', '~', '<<', '>>', '>>>', '+=', '-=', '*=', '/=', '%=', '**=', '&=', '|=', '^=', '<<=', '>>=', '>>>=', '=>', '?', '?.', '??', '??=', '...'];
+const punctuation = ['(', ')', '[', ']', '{', '}', ';', ',', '`', ':', '.'];
+const isWhitespace = char => /\s/.test(char);
+const isDigit = char => /[0-9]/.test(char);
+const isLetter = char => /[a-zA-Z_]/.test(char);
+const isIdentifierChar = char => isLetter(char) || isDigit(char) || char === '_' || char === '$';
+const readWhitespace = (input, current, tokens) => {
+  let whitespace = '';
+  let pos = current;
+  while (pos < input.length && isWhitespace(input[pos])) {
+    whitespace += input[pos];
+    pos++;
+  }
+  if (whitespace) {
+    tokens.push(whitespace, 'WhiteSpace');
+  }
+  return pos;
+};
+const readString = (input, current, tokens) => {
+  const quote = input[current];
+  let string = quote;
+  let pos = current + 1;
+  while (pos < input.length && input[pos] !== quote) {
+    if (input[pos] === '\\') {
+      string += input[pos];
+      pos++;
+      if (pos < input.length) {
+        string += input[pos];
+        pos++;
+      }
+    } else {
+      string += input[pos];
+      pos++;
+    }
+  }
+  if (pos < input.length) {
+    string += input[pos];
+    pos++;
+  }
+  tokens.push(string, 'String');
+  return pos;
+};
+const readNumber = (input, current, tokens) => {
+  let number = '';
+  let pos = current;
+  if (input[pos] === '0' && pos + 1 < input.length) {
+    const next = input[pos + 1].toLowerCase();
+    if (next === 'x' || next === 'b' || next === 'o') {
+      number += input[pos] + input[pos + 1];
+      pos += 2;
+      while (pos < input.length && /[0-9a-fA-F]/.test(input[pos])) {
+        number += input[pos];
+        pos++;
+      }
+      tokens.push(number, 'Number');
+      return pos;
+    }
+  }
+  while (pos < input.length && isDigit(input[pos])) {
+    number += input[pos];
+    pos++;
+  }
+  if (pos < input.length && input[pos] === '.' && pos + 1 < input.length && isDigit(input[pos + 1])) {
+    number += input[pos];
+    pos++;
+    while (pos < input.length && isDigit(input[pos])) {
+      number += input[pos];
+      pos++;
+    }
+  }
+  if (pos < input.length && (input[pos] === 'e' || input[pos] === 'E')) {
+    number += input[pos];
+    pos++;
+    if (pos < input.length && (input[pos] === '+' || input[pos] === '-')) {
+      number += input[pos];
+      pos++;
+    }
+    while (pos < input.length && isDigit(input[pos])) {
+      number += input[pos];
+      pos++;
+    }
+  }
+  tokens.push(number, 'Number');
+  return pos;
+};
+const readIdentifier = (input, current, tokens) => {
+  let identifier = '';
+  let pos = current;
+  while (pos < input.length && isIdentifierChar(input[pos])) {
+    identifier += input[pos];
+    pos++;
+  }
+  if (identifier === 'function') {
+    tokens.push(identifier, 'Function');
+  } else if (keywords.includes(identifier)) {
+    tokens.push(identifier, 'Keyword');
+  } else {
+    tokens.push(identifier, 'Identifier');
+  }
+  return pos;
+};
+const readOperator = (input, current, tokens) => {
+  let operator = '';
+  let maxLength = 0;
+  let pos = current;
+  for (const op of operators) {
+    if (input.slice(pos, pos + op.length) === op && op.length > maxLength) {
+      maxLength = op.length;
+      operator = op;
+    }
+  }
+  if (operator) {
+    tokens.push(operator, 'Operator');
+    pos += operator.length;
+  } else {
+    tokens.push(input[pos], 'Punctuation');
+    pos++;
+  }
+  return pos;
+};
+const readComment = (input, current, tokens) => {
+  let comment = '';
+  let pos = current;
+  if (input[pos] === '/' && pos + 1 < input.length) {
+    if (input[pos + 1] === '/') {
+      comment = '//';
+      pos += 2;
+      while (pos < input.length && input[pos] !== '\n') {
+        comment += input[pos];
+        pos++;
+      }
+    } else if (input[pos + 1] === '*') {
+      comment = '/*';
+      pos += 2;
+      while (pos < input.length - 1) {
+        comment += input[pos];
+        if (input[pos] === '*' && input[pos + 1] === '/') {
+          comment += '/';
+          pos += 2;
+          break;
+        }
+        pos++;
+      }
+    }
+  }
+  if (comment) {
+    tokens.push(comment, 'Comment');
+  }
+  return pos;
+};
+const tokenizeValue = input => {
+  const tokens = [];
+  let current = 0;
+  while (current < input.length) {
+    const char = input[current];
+    if (isWhitespace(char)) {
+      current = readWhitespace(input, current, tokens);
+    } else if (char === '"' || char === "'" || char === '`') {
+      current = readString(input, current, tokens);
+    } else if (isDigit(char)) {
+      current = readNumber(input, current, tokens);
+    } else if (isLetter(char) || char === '_' || char === '$') {
+      current = readIdentifier(input, current, tokens);
+    } else if (char === '/' && current + 1 < input.length && (input[current + 1] === '/' || input[current + 1] === '*')) {
+      current = readComment(input, current, tokens);
+    } else if (operators.includes(char) || current + 1 < input.length && operators.includes(char + input[current + 1]) || current + 2 < input.length && operators.includes(char + input[current + 1] + input[current + 2])) {
+      current = readOperator(input, current, tokens);
+    } else if (punctuation.includes(char)) {
+      tokens.push(char, 'Punctuation');
+      current++;
+    } else {
+      tokens.push(char, 'Punctuation');
+      current++;
+    }
+  }
+  return tokens;
+};
+
+const getScopeExceptionRows = (scope, index) => {
   const {
     key,
     value,
     indent
   } = scope;
+  const tokens = tokenizeValue(value);
   return [{
     type: Exception$2,
     text: '',
+    tokens,
     expanded: false,
     key,
     value,
     indent,
     valueType: '',
     name: '',
-    description: ''
+    description: '',
+    index
   }];
 };
 
@@ -1766,7 +1948,7 @@ const Expanded = 1 << 0;
 const Collapsed = 1 << 1;
 const Focused = 1 << 2;
 
-const getScopePropertyRows = scope => {
+const getScopePropertyRows = (scope, index) => {
   const {
     indent,
     key,
@@ -1774,20 +1956,23 @@ const getScopePropertyRows = scope => {
     valueType,
     flags
   } = scope;
+  const tokens = tokenizeValue(value);
   return [{
     type: Property$1,
     text: '',
+    tokens,
     expanded: Boolean(flags & Expanded),
     key,
     value,
     indent,
     valueType,
     name: '',
-    description: ''
+    description: '',
+    index
   }];
 };
 
-const getScopeScopeRows = scope => {
+const getScopeScopeRows = (scope, index) => {
   const {
     key,
     flags
@@ -1801,27 +1986,31 @@ const getScopeScopeRows = scope => {
     indent: 0,
     valueType: '',
     name: '',
-    description: ''
+    description: '',
+    index
   }];
 };
 
-const getScopeThisRows = scope => {
+const getScopeThisRows = (scope, index) => {
   const {
     indent,
     key,
     value,
     valueType
   } = scope;
+  const tokens = tokenizeValue(value);
   return [{
     type: Value,
     text: '',
+    tokens,
     expanded: false,
     key,
     value,
     indent,
     valueType,
     name: '',
-    description: ''
+    description: '',
+    index
   }];
 };
 
@@ -1905,7 +2094,8 @@ const getRunAndDebugVisibleRowsScope = state => {
       const visible = getVisibleScopeItems(scopeChain, expandedIds, scopeFocusedIndex);
       for (const scope of visible) {
         const renderer = getScopeRenderer(scope.type);
-        rows.push(...renderer(scope));
+        const index = visible.indexOf(scope);
+        rows.push(...renderer(scope, index));
       }
     } else {
       rows.push({
@@ -2058,6 +2248,9 @@ const updateVisibleRows = state => {
   };
 };
 
+const FocusDebugWatchInput = 1290;
+const FocusDebugRow = 1299;
+
 const acceptWatchExpressionEdit = async state => {
   const {
     watchExpressions,
@@ -2073,7 +2266,7 @@ const acceptWatchExpressionEdit = async state => {
   const newState = {
     ...state,
     watchExpressions: newWatchExpressions,
-    focus: 0,
+    focus: FocusDebugRow,
     editingValue: '',
     editingselectionstart: 0,
     editingselectionend: 0
@@ -2081,10 +2274,7 @@ const acceptWatchExpressionEdit = async state => {
   return updateVisibleRows(newState);
 };
 
-const FocusDebugWatchInput = 1290;
-const FocusDebugRow = 1299;
-
-const addWatchExpression = async (state, expression) => {
+const addWatchExpression = async (state, expression = '') => {
   const {
     watchExpressions
   } = state;
@@ -2105,10 +2295,13 @@ const addWatchExpression = async (state, expression) => {
 };
 
 const getNewWatchExpressionsCancel = watchExpressions => {
-  const lastExpression = watchExpressions[watchExpressions.length - 1];
+  const lastExpression = watchExpressions.at(-1);
   if (lastExpression && lastExpression.expression === '') {
     return watchExpressions.toSpliced(-1, 1);
   }
+  if (lastExpression && lastExpression.isEditing) {
+    return watchExpressions.toSpliced(-1, 1);
+  }
   return watchExpressions;
 };
 
@@ -2117,13 +2310,15 @@ const cancelWatchExpressionEdit = state => {
     watchExpressions
   } = state;
   const newWatchExpressions = getNewWatchExpressionsCancel(watchExpressions);
-  return {
+  const newState = {
     ...state,
     watchExpressions: newWatchExpressions,
-    focus: 0,
+    focus: FocusDebugRow,
     editingselectionstart: 0,
-    editingselectionend: 0
+    editingselectionend: 0,
+    editingValue: ''
   };
+  return updateVisibleRows(newState);
 };
 
 const None$3 = 'none';
@@ -2171,7 +2366,8 @@ const create = (id, uri, x, y, width, height) => {
     openFilesOnPause: true,
     maxDescriptionLength: 100,
     selectedIndex: -1,
-    visibleRows: []
+    visibleRows: [],
+    tokenColoringEnabled: false
   };
   set(id, state, state);
 };
@@ -2265,7 +2461,7 @@ const dispose = async uid => {
   dispose$1(uid);
 };
 
-const commandIds = ['acceptWatchExpressionEdit', 'addWatchExpression', 'cancelWatchExpressionEdit', 'create', 'deleteAllWatchExpressions', 'deleteWatchExpression', 'diff2', 'dispose', 'focusNext', 'focusPrevious', 'getCommandIds', 'getKeyBindings', 'handleArrowDown', 'handleArrowLeft', 'handleArrowRight', 'handleArrowUp', 'handleChange', 'handleClickCallStackItem', 'handleClickCheckBox', 'handleClickDebugButton', 'handleClickPauseOnExceptions', 'handleClickPauseOnUncaughtExceptions', 'handleClickScopeValue', 'handleClickSectionAction', 'handleClickSectionBreakPoints', 'handleClickSectionCallstack', 'handleClickSectionHeading', 'handleClickSectionScope', 'handleClickSectionWatch', 'handleClickWatchExpression', 'handleClickWatchExpressionDelete', 'handleDebugInput', 'handleDelete', 'handleEnter', 'handleRename', 'handleEvaluate', 'handleInputBlur', 'handleInputFieldChange', 'handlePaused', 'handleResumed', 'handleScriptParsed', 'handleSectionHeaderContextMenu', 'handleSpace', 'handleWatchExpressionContextMenu', 'handleWatchExpressionDoubleClick', 'handleWatchValueChange', 'hideCallStack', 'hideScope', 'hideWatch', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'refreshWatchExpression', 'removeWatchExpression', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'restoreState', 'resume', 'selectIndex', 'selectNextRow', 'selectPreviousRow', 'setPauseOnExceptions', 'showCallStack', 'showScope', 'showWatch', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause'];
+const commandIds = ['acceptWatchExpressionEdit', 'addWatchExpression', 'cancelWatchExpressionEdit', 'create', 'deleteAllWatchExpressions', 'deleteWatchExpression', 'diff2', 'dispose', 'focusNext', 'focusPrevious', 'getCommandIds', 'getKeyBindings', 'handleArrowDown', 'handleArrowLeft', 'handleArrowRight', 'handleArrowUp', 'handleChange', 'handleClickCallStackItem', 'handleClickCheckBox', 'handleClickDebugButton', 'handleClickPauseOnExceptions', 'handleClickPauseOnUncaughtExceptions', 'handleClickScopeValue', 'handleClickSectionAction', 'handleClickSectionBreakPoints', 'handleClickSectionCallstack', 'handleClickSectionHeading', 'handleClickSectionScope', 'handleClickSectionWatch', 'handleClickWatchExpression', 'handleClickWatchExpressionDelete', 'handleCopy', 'handleDebugInput', 'handleDelete', 'handleEnter', 'handleEvaluate', 'handleInputBlur', 'handleInputFieldChange', 'handleNew', 'handlePaused', 'handleRename', 'handleResumed', 'handleScriptParsed', 'handleSectionHeaderContextMenu', 'handleSpace', 'handleWatchExpressionContextMenu', 'handleWatchExpressionDoubleClick', 'handleWatchValueChange', 'hideCallStack', 'hideScope', 'hideWatch', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'refreshWatchExpression', 'removeWatchExpression', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'restoreState', 'resume', 'selectFirstIndex', 'selectIndex', 'selectLastIndex', 'selectNextRow', 'selectPreviousRow', 'setPauseOnExceptions', 'showCallStack', 'showScope', 'showWatch', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -2311,6 +2507,59 @@ const getHighlight = uid => {
   };
 };
 
+const CallStackArrow$1 = 'CallStackArrow';
+const CallStackDescription$1 = 'CallStackDescription';
+const CallStackLabel$1 = 'CallStackLabel';
+const Chevron$1 = 'Chevron';
+const DebugButton$1 = 'DebugButton';
+const DebugButtons$1 = 'DebugButtons';
+const DebugRow$1 = 'DebugRow';
+const DebugRowInputField$1 = 'DebugRowInputField';
+const DebugSectionAction$1 = 'DebugSectionAction';
+const DebugSectionActions$1 = 'DebugSectionActions';
+const DebugSectionHeader$1 = 'DebugSectionHeader';
+const DebugValue$1 = 'DebugValue';
+const DebugValueBoolean$1 = 'DebugValueBoolean';
+const DebugValueFunction$1 = 'DebugValueFunction';
+const DebugValueGetter$1 = 'DebugValueGetter';
+const DebugValueNumber$1 = 'DebugValueNumber';
+const DebugValueObject$1 = 'DebugValueObject';
+const DebugValueScopeName$1 = 'DebugValueScopeName';
+const DebugValueString$1 = 'DebugValueString';
+const DebugValueSymbol$1 = 'DebugValueSymbol';
+const DebugValueUndefined$1 = 'DebugValueUndefined';
+const DeleteWatchExpression$1 = 'DeleteWatchExpression';
+const IconButton$1 = 'IconButton';
+const InputBox$1 = 'InputBox';
+const InputLabel$1 = 'InputLabel';
+const ClassNames = {
+  __proto__: null,
+  CallStackArrow: CallStackArrow$1,
+  CallStackDescription: CallStackDescription$1,
+  CallStackLabel: CallStackLabel$1,
+  Chevron: Chevron$1,
+  DebugButton: DebugButton$1,
+  DebugButtons: DebugButtons$1,
+  DebugRow: DebugRow$1,
+  DebugRowInputField: DebugRowInputField$1,
+  DebugSectionAction: DebugSectionAction$1,
+  DebugSectionActions: DebugSectionActions$1,
+  DebugSectionHeader: DebugSectionHeader$1,
+  DebugValue: DebugValue$1,
+  DebugValueBoolean: DebugValueBoolean$1,
+  DebugValueFunction: DebugValueFunction$1,
+  DebugValueGetter: DebugValueGetter$1,
+  DebugValueNumber: DebugValueNumber$1,
+  DebugValueObject: DebugValueObject$1,
+  DebugValueScopeName: DebugValueScopeName$1,
+  DebugValueString: DebugValueString$1,
+  DebugValueSymbol: DebugValueSymbol$1,
+  DebugValueUndefined: DebugValueUndefined$1,
+  DeleteWatchExpression: DeleteWatchExpression$1,
+  IconButton: IconButton$1,
+  InputBox: InputBox$1,
+  InputLabel: InputLabel$1
+};
 const Enter = 3;
 const Escape = 8;
 const Space$1 = 9;
@@ -2322,94 +2571,140 @@ const RightArrow = 15;
 const DownArrow = 16;
 const Delete = 18;
 const KeyC = 31;
+const KeyN = 42;
 const KeyV = 50;
 const F2 = 58;
 const Backslash = 91;
 const Star = 131;
-
+const KeyCode = {
+  __proto__: null,
+  Backslash,
+  Delete,
+  DownArrow,
+  End,
+  Enter,
+  Escape,
+  F2,
+  Home,
+  KeyC,
+  KeyN,
+  KeyV,
+  LeftArrow,
+  RightArrow,
+  Space: Space$1,
+  Star,
+  UpArrow
+};
 const CtrlCmd = 1 << 11 >>> 0;
 const Alt = 1 << 9 >>> 0;
+const KeyModifier = {
+  __proto__: null,
+  Alt,
+  CtrlCmd};
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const Text$1 = 12;
+const text = data => {
+  return {
+    type: Text$1,
+    text: data,
+    childCount: 0
+  };
+};
 
 const getKeyBindings = () => {
   return [{
-    key: Backslash | CtrlCmd,
+    key: KeyCode.Backslash | KeyModifier.CtrlCmd,
     command: 'Run And Debug.togglePause'
   }, {
-    key: LeftArrow,
+    key: KeyCode.LeftArrow,
     command: 'Run And Debug.handleArrowLeft',
     when: FocusDebugRow
   }, {
-    key: RightArrow,
+    key: KeyCode.RightArrow,
     command: 'Run And Debug.handleArrowRight',
     when: FocusDebugRow
   }, {
-    key: Home,
+    key: KeyCode.Home,
     command: 'Run And Debug.focusFirst',
     when: FocusDebugRow
   }, {
-    key: End,
+    key: KeyCode.End,
     command: 'Run And Debug.focusLast',
     when: FocusDebugRow
   }, {
-    key: UpArrow,
+    key: KeyCode.UpArrow,
     command: 'Run And Debug.selectPreviousRow',
     when: FocusDebugRow
   }, {
-    key: DownArrow,
+    key: KeyCode.DownArrow,
     command: 'Run And Debug.selectNextRow',
     when: FocusDebugRow
   }, {
-    key: CtrlCmd | Star,
+    key: KeyModifier.CtrlCmd | KeyCode.Star,
     command: 'Run And Debug.expandAll',
     when: FocusDebugRow
   }, {
-    key: Alt | RightArrow,
+    key: KeyModifier.Alt | KeyCode.RightArrow,
     command: 'Run And Debug.expandRecursively',
     when: FocusDebugRow
   }, {
-    key: CtrlCmd | LeftArrow,
+    key: KeyModifier.CtrlCmd | KeyCode.LeftArrow,
     command: 'Run And Debug.collapseAll',
     when: FocusDebugRow
   }, {
-    key: CtrlCmd | KeyV,
+    key: KeyModifier.CtrlCmd | KeyCode.KeyV,
     command: 'Run And Debug.handlePaste',
     when: FocusDebugRow
   }, {
-    key: CtrlCmd | KeyC,
+    key: KeyModifier.CtrlCmd | KeyCode.KeyC,
     command: 'Run And Debug.handleCopy',
     when: FocusDebugRow
   }, {
-    key: F2,
+    key: KeyModifier.CtrlCmd | KeyCode.KeyN,
+    command: 'Run And Debug.handleNew',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.F2,
     command: 'Run And Debug.handleRename',
     when: FocusDebugRow
   }, {
-    key: Delete,
+    key: KeyCode.Delete,
     command: 'Run And Debug.handleDelete',
     when: FocusDebugRow
   }, {
-    key: Escape,
+    key: KeyCode.Escape,
     command: 'Run And Debug.focusNone',
     when: FocusDebugRow
   }, {
-    key: Enter,
+    key: KeyCode.Enter,
     command: 'Run And Debug.handleClickCurrent',
     when: FocusDebugRow
   }, {
-    key: Space$1,
+    key: KeyCode.Space,
     command: 'Run And Debug.handleSpace',
     when: FocusDebugRow
   }, {
-    key: Enter,
+    key: KeyCode.Enter,
     command: 'Run And Debug.handleEnter',
     when: FocusDebugRow
   }, {
-    key: Escape,
+    key: KeyCode.Escape,
     command: 'Run And Debug.cancelWatchExpressionEdit',
     when: FocusDebugWatchInput
   }, {
-    key: Enter,
+    key: KeyCode.Enter,
     command: 'Run And Debug.acceptWatchExpressionEdit',
     when: FocusDebugWatchInput
+  }, {
+    key: KeyModifier.CtrlCmd | KeyCode.Home,
+    command: 'Run And Debug.selectFirstIndex',
+    when: FocusDebugRow
+  }, {
+    key: KeyModifier.CtrlCmd | KeyCode.End,
+    command: 'Run And Debug.selectLastIndex',
+    when: FocusDebugRow
   }];
 };
 
@@ -2707,7 +3002,8 @@ const getInnerChildScopeChain = async (cache, debugId, objectId, indent, maxDesc
       valueType: getDebugValueType(child),
       objectId: getDebugValueObjectId(child),
       indent: indent + 10,
-      label: ''
+      label: '',
+      flags: None$4
     });
   }
   return childScopeChain;
@@ -3373,6 +3669,40 @@ const handleWatchExpressionDoubleClick = async (state, dataIndex) => {
   return state;
 };
 
+const copyTextToClipboard = async text => {
+  // TODO: Implement clipboard functionality
+};
+
+const copyWatchExpression = async (state, index) => {
+  const {
+    watchExpressions
+  } = state;
+  if (index < 0 || index >= watchExpressions.length) {
+    return;
+  }
+  const watchExpression = watchExpressions[index];
+  if (watchExpression) {
+    await copyTextToClipboard();
+  }
+};
+
+const handleCopy = async state => {
+  const {
+    selectedIndex,
+    visibleRows
+  } = state;
+  if (selectedIndex < 0 || selectedIndex >= visibleRows.length) {
+    return state;
+  }
+  const currentRow = visibleRows[selectedIndex];
+  if (currentRow.type !== WatchExpression || currentRow.index === undefined) {
+    return state;
+  }
+  const watchIndex = currentRow.index;
+  await copyWatchExpression(state, watchIndex);
+  return state;
+};
+
 const handleDelete = async state => {
   const {
     selectedIndex,
@@ -3418,6 +3748,18 @@ const handleInputFieldChange = (state, name, value) => {
   return state;
 };
 
+const handleNew = async state => {
+  const {
+    selectedIndex,
+    visibleRows
+  } = state;
+  const row = visibleRows[selectedIndex];
+  if (row && (row.type === WatchExpression || row.type === WatchMessage)) {
+    return addWatchExpression(state, '');
+  }
+  return state;
+};
+
 const handleRename = async state => {
   const {
     selectedIndex
@@ -3486,25 +3828,23 @@ const handleWatchExpressionContextMenu = async (state, x, y, dataIndex) => {
   return state;
 };
 
-const hideCallStack = state => {
+const hideSection = (state, visibilityKey) => {
   return {
     ...state,
-    callStackVisible: false
+    [visibilityKey]: false
   };
 };
 
+const hideCallStack = state => {
+  return hideSection(state, 'callStackVisible');
+};
+
 const hideScope = state => {
-  return {
-    ...state,
-    scopeVisible: false
-  };
+  return hideSection(state, 'scopeVisible');
 };
 
 const hideWatch = state => {
-  return {
-    ...state,
-    watchVisible: false
-  };
+  return hideSection(state, 'watchVisible');
 };
 
 const getPortTuple = () => {
@@ -3797,71 +4137,6 @@ const ToolBar = 'toolbar';
 const Tree = 'tree';
 const TreeItem = 'treeitem';
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-const Text$1 = 12;
-const text = data => {
-  return {
-    type: Text$1,
-    text: data,
-    childCount: 0
-  };
-};
-const CallStackArrow$1 = 'CallStackArrow';
-const CallStackDescription$1 = 'CallStackDescription';
-const CallStackLabel$1 = 'CallStackLabel';
-const Chevron$1 = 'Chevron';
-const DebugButton$1 = 'DebugButton';
-const DebugButtons$1 = 'DebugButtons';
-const DebugRow$1 = 'DebugRow';
-const DebugRowInputField$1 = 'DebugRowInputField';
-const DebugSectionAction$1 = 'DebugSectionAction';
-const DebugSectionActions$1 = 'DebugSectionActions';
-const DebugSectionHeader$1 = 'DebugSectionHeader';
-const DebugValue$1 = 'DebugValue';
-const DebugValueBoolean$1 = 'DebugValueBoolean';
-const DebugValueFunction$1 = 'DebugValueFunction';
-const DebugValueGetter$1 = 'DebugValueGetter';
-const DebugValueNumber$1 = 'DebugValueNumber';
-const DebugValueObject$1 = 'DebugValueObject';
-const DebugValueScopeName$1 = 'DebugValueScopeName';
-const DebugValueString$1 = 'DebugValueString';
-const DebugValueSymbol$1 = 'DebugValueSymbol';
-const DebugValueUndefined$1 = 'DebugValueUndefined';
-const DeleteWatchExpression$1 = 'DeleteWatchExpression';
-const IconButton$1 = 'IconButton';
-const InputBox$1 = 'InputBox';
-const InputLabel$1 = 'InputLabel';
-const ClassNames = {
-  __proto__: null,
-  CallStackArrow: CallStackArrow$1,
-  CallStackDescription: CallStackDescription$1,
-  CallStackLabel: CallStackLabel$1,
-  Chevron: Chevron$1,
-  DebugButton: DebugButton$1,
-  DebugButtons: DebugButtons$1,
-  DebugRow: DebugRow$1,
-  DebugRowInputField: DebugRowInputField$1,
-  DebugSectionAction: DebugSectionAction$1,
-  DebugSectionActions: DebugSectionActions$1,
-  DebugSectionHeader: DebugSectionHeader$1,
-  DebugValue: DebugValue$1,
-  DebugValueBoolean: DebugValueBoolean$1,
-  DebugValueFunction: DebugValueFunction$1,
-  DebugValueGetter: DebugValueGetter$1,
-  DebugValueNumber: DebugValueNumber$1,
-  DebugValueObject: DebugValueObject$1,
-  DebugValueScopeName: DebugValueScopeName$1,
-  DebugValueString: DebugValueString$1,
-  DebugValueSymbol: DebugValueSymbol$1,
-  DebugValueUndefined: DebugValueUndefined$1,
-  DeleteWatchExpression: DeleteWatchExpression$1,
-  IconButton: IconButton$1,
-  InputBox: InputBox$1,
-  InputLabel: InputLabel$1
-};
-
 const {
   CallStackArrow,
   CallStackDescription,
@@ -4096,16 +4371,32 @@ const getDebugValueClassName = valueType => {
 
 const separator = text(': ');
 
-const renderValue = (row, selectedIndex, rowIndex) => {
+const renderValue = (row, selectedIndex, rowIndex, tokenColoringEnabled) => {
   const {
     indent,
     key,
     value,
     valueType,
-    expanded
+    expanded,
+    tokens
   } = row;
   const isSelected = rowIndex === selectedIndex;
   const className = getDebugRowClassName(DebugRow, isSelected);
+  const hasTokens = tokenColoringEnabled && tokens && tokens.length > 0;
+  let valueChildren;
+  if (hasTokens) {
+    valueChildren = [];
+    for (let i = 0; i < tokens.length; i += 2) {
+      valueChildren.push({
+        type: Span,
+        className: `DebugToken DebugToken${tokens[i + 1]}`,
+        childCount: 1,
+        children: [text(tokens[i])]
+      });
+    }
+  } else {
+    valueChildren = [text(value)];
+  }
   return [{
     type: Div,
     className: className,
@@ -4122,8 +4413,8 @@ const renderValue = (row, selectedIndex, rowIndex) => {
   }, text(key), separator, {
     type: Span,
     className: mergeClassNames(DebugValue, getDebugValueClassName(valueType)),
-    childCount: 1
-  }, text(value)];
+    childCount: hasTokens ? valueChildren.length / 2 : 1
+  }, ...valueChildren];
 };
 
 const renderInputField = (row, selectedIndex, rowIndex) => {
@@ -4158,7 +4449,8 @@ const renderInputField = (row, selectedIndex, rowIndex) => {
 const renderScope = (row, selectedIndex, rowIndex) => {
   const {
     key,
-    expanded
+    expanded,
+    index
   } = row;
   const isSelected = rowIndex === selectedIndex;
   const className = getDebugRowClassName(DebugRow, isSelected);
@@ -4170,7 +4462,8 @@ const renderScope = (row, selectedIndex, rowIndex) => {
     ariaLevel: 2,
     childCount: 2,
     onPointerDown: HandleClickScopeValue,
-    'data-name': key
+    'data-name': key,
+    'data-index': index
   }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), {
     type: Span,
     className: mergeClassNames(DebugValue, DebugValueScopeName),
@@ -4272,25 +4565,26 @@ const getRowRenderer = type => {
   }
 };
 
-const getRunAndDebugRowVirtualDom = (row, selectedIndex, rowIndex) => {
+const getRunAndDebugRowVirtualDom = (row, selectedIndex, rowIndex, tokenColoringEnabled) => {
   const renderer = getRowRenderer(row.type);
-  return renderer(row, selectedIndex, rowIndex);
+  return renderer(row, selectedIndex, rowIndex, tokenColoringEnabled);
 };
 
-const getRunAndDebugVirtualDom2 = (rows, selectedIndex) => {
+const getRunAndDebugVirtualDom2 = (rows, selectedIndex, tokenColoringEnabled) => {
   return [{
     type: Div,
     className: 'Viewlet RunAndDebug',
     tabIndex: 0,
     childCount: rows.length,
     role: Tree
-  }, ...rows.flatMap((row, index) => getRunAndDebugRowVirtualDom(row, selectedIndex, index))];
+  }, ...rows.flatMap((row, index) => getRunAndDebugRowVirtualDom(row, selectedIndex, index, tokenColoringEnabled))];
 };
 
 const renderItems = (oldState, newState) => {
   const rows = newState.visibleRows;
   const selectedIndex = newState.selectedIndex;
-  const dom = getRunAndDebugVirtualDom2(rows, selectedIndex);
+  const tokenColoringEnabled = newState.tokenColoringEnabled ?? true;
+  const dom = getRunAndDebugVirtualDom2(rows, selectedIndex, tokenColoringEnabled);
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
@@ -4595,6 +4889,18 @@ const selectIndex = (state, index) => {
   };
 };
 
+const selectFirstIndex = state => {
+  return selectIndex(state, 0);
+};
+
+const selectLastIndex = state => {
+  const {
+    visibleRows
+  } = state;
+  const lastIndex = visibleRows.length - 1;
+  return selectIndex(state, lastIndex);
+};
+
 const selectNextRow = state => {
   return selectIndex(state, state.selectedIndex + 1);
 };
@@ -4667,6 +4973,8 @@ const commandMap = {
   'RunAndDebug.handleClickSectionWatch': wrapCommand(handleClickSectionWatch),
   'RunAndDebug.handleClickWatchExpression': wrapCommand(handleClickWatchExpression),
   'RunAndDebug.handleClickWatchExpressionDelete': wrapCommand(handleClickWatchExpressionDelete),
+  'RunAndDebug.handleCopy': wrapCommand(handleCopy),
+  'RunAndDebug.handleNew': wrapCommand(handleNew),
   'RunAndDebug.handleDebugInput': wrapCommand(handleDebugInput),
   'RunAndDebug.handleEvaluate': wrapCommand(handleEvaluate),
   'RunAndDebug.handleInputBlur': wrapCommand(handleInputBlur),
@@ -4711,7 +5019,9 @@ const commandMap = {
   'RunAndDebug.handleEnter': wrapCommand(handleEnter),
   'RunAndDebug.handleRename': wrapCommand(handleRename),
   'RunAndDebug.handleDelete': wrapCommand(handleDelete),
-  'RunAndDebug.handleSpace': wrapCommand(handleSpace)
+  'RunAndDebug.handleSpace': wrapCommand(handleSpace),
+  'RunAndDebug.selectFirstIndex': wrapCommand(selectFirstIndex),
+  'RunAndDebug.selectLastIndex': wrapCommand(selectLastIndex)
 };
 
 const listen = async () => {